/* "Alice in Wonderland" by Marco T.L. — free for non-commercial use (readme in assets/fonts) */
@font-face { font-family: 'Alice'; src: url('../assets/fonts/Alice_in_Wonderland_3.ttf') format('truetype'); font-display: swap; }

/* ===== theme tokens ===== */
:root, [data-theme="gothic"] {
  --bg: #060408; --bg2: #120a10; --surface: rgba(18, 8, 14, .78); --surface-2: rgba(40, 12, 22, .65);
  --text: #eadfe6; --muted: #a9939f; --accent: #a3112b; --accent-2: #e8d6f0; --accent-soft: #6b0f1f;
  --border: rgba(163, 17, 43, .38); --on-accent: #f4e9ef; --on-main: #f4e9ef;
  --head: 'Alice', 'Cinzel', 'Hind Siliguri', serif; --body: 'Alice', 'Cinzel', 'Hind Siliguri', serif; --read: 'Cormorant Garamond', 'Hind Siliguri', Georgia, serif;
  --radius: 6px; --shadow: 0 0 40px -10px rgba(163, 17, 43, .55);
  --dog: #1c1418; --dog-ear: #0c080a; --dog-nose: #a3112b; --dog-eye: #ff2a4a;
}
[data-theme="dark"] {
  --bg: #14101F; --bg2: #1d1730; --surface: rgba(37, 29, 61, .72); --surface-2: rgba(55, 44, 92, .6);
  --text: #f3efff; --muted: #a99fc9; --accent: #7C5CFF; --accent-2: #C6FF3D; --accent-soft: #A58BFF;
  --border: rgba(165, 139, 255, .22); --on-accent: #fff; --on-main: #14101F;
  --head: 'Fredoka', 'Hind Siliguri', system-ui, sans-serif; --body: 'Fredoka', 'Hind Siliguri', system-ui, sans-serif; --read: var(--body);
  --radius: 22px; --shadow: 0 20px 60px -20px rgba(124, 92, 255, .45);
  --dog: #A58BFF; --dog-ear: #7C5CFF; --dog-nose: #C6FF3D; --dog-eye: #14101F;
}
[data-theme="light"] {
  --bg: #fbf9ff; --bg2: #efeaff; --surface: rgba(255, 255, 255, .85); --surface-2: #f1ecff;
  --text: #1c1533; --muted: #6b6390; --accent: #6a48ff; --accent-2: #4f8a00; --accent-soft: #8c73ff;
  --border: rgba(106, 72, 255, .18); --on-accent: #fff; --on-main: #fff;
  --head: 'Fredoka', 'Hind Siliguri', system-ui, sans-serif; --body: 'Fredoka', 'Hind Siliguri', system-ui, sans-serif; --read: var(--body);
  --radius: 22px; --shadow: 0 20px 50px -25px rgba(106, 72, 255, .4);
  --dog: #A58BFF; --dog-ear: #7C5CFF; --dog-nose: #9be000; --dog-eye: #1c1533;
}
[data-theme="aero"] {
  --bg: #bfe8ff; --bg2: #e9fbff; --surface: rgba(255, 255, 255, .42); --surface-2: rgba(255, 255, 255, .62);
  --text: #08385a; --muted: #3f6f8f; --accent: #0a9bf5; --accent-2: #45b51f; --accent-soft: #7fd3ff;
  --border: rgba(255, 255, 255, .85); --on-accent: #fff; --on-main: #fff;
  --head: 'Nunito', 'Hind Siliguri', 'Segoe UI', sans-serif; --body: 'Nunito', 'Hind Siliguri', 'Segoe UI', sans-serif; --read: var(--body);
  --radius: 26px; --shadow: 0 18px 40px -18px rgba(8, 80, 140, .45);
  --dog: #8fd8ff; --dog-ear: #27a4ef; --dog-nose: #7be04a; --dog-eye: #08385a;
}
[data-theme="cyber"] {
  --bg: #040506; --bg2: #0b0e12; --surface: rgba(12, 15, 20, .82); --surface-2: rgba(30, 36, 46, .7);
  --text: #dfe7ef; --muted: #8494a4; --accent: #c9d6e3; --accent-2: #7df9ff; --accent-soft: #5d6b7a;
  --border: rgba(201, 214, 227, .28); --on-accent: #040506; --on-main: #040506;
  --head: 'Orbitron', 'Hind Siliguri', sans-serif; --body: 'Orbitron', 'Hind Siliguri', sans-serif; --read: 'Fredoka', 'Hind Siliguri', sans-serif;
  --radius: 0px; --shadow: 0 0 30px -8px rgba(125, 249, 255, .35);
  --dog: #b9c4cf; --dog-ear: #6f7c89; --dog-nose: #7df9ff; --dog-eye: #040506;
}

/* ===== base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.55; overflow-x: hidden; transition: background .6s, color .4s; }
[data-theme="gothic"] body { font-size: 18px; letter-spacing: .01em; }
[data-theme="cyber"] body { font-size: 14px; letter-spacing: .02em; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
[hidden] { display: none !important; }
input, textarea, select { font-family: var(--read); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#theme-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#clickfx { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.nav, main, .foot { position: relative; z-index: 2; }

/* ===== nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(16px, 4vw, 40px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--border);
}
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sections-btn { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.sections-btn .burger { display: grid; gap: 4px; width: 18px; }
.sections-btn .burger i { height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.sections-btn.open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sections-btn.open .burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sections-btn.open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
[data-theme="gothic"] .sections-btn, [data-theme="cyber"] .sections-btn { border-radius: 0; }
.theme-btn, .acct { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden; }
.acct.in { padding: 4px 14px 4px 4px; }
[data-theme="gothic"] .theme-btn, [data-theme="gothic"] .acct, [data-theme="cyber"] .theme-btn, [data-theme="cyber"] .acct { border-radius: 0; }
.theme-menu { position: absolute; right: clamp(16px, 4vw, 40px); top: 62px; display: grid; gap: 4px; padding: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); min-width: 240px; animation: pop .25s ease-out; }
.theme-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 12px; text-align: left; font-family: 'Fredoka', sans-serif; }
.theme-menu button:hover, .theme-menu button.on { background: var(--surface-2); }
.theme-menu small { color: var(--muted); font-size: 11px; margin-left: auto; }
.sw { width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 1px solid rgba(128, 128, 128, .4); flex: none; }
.sw-dark { background: linear-gradient(135deg, #14101F 50%, #7C5CFF 50%); }
.sw-light { background: linear-gradient(135deg, #fff 50%, #ccbfff 50%); }
.sw-gothic { background: radial-gradient(circle at 50% 50%, #a3112b 25%, #060408 30%); }
.sw-aero { background: radial-gradient(circle at 35% 30%, #fff 10%, #4cc3ff 45%, #45b51f 100%); }
.sw-cyber { background: conic-gradient(#cfd8e3, #5d6b7a, #7df9ff, #cfd8e3); }

/* ===== themed address ===== */
.addr { position: relative; text-decoration: none; font-family: var(--head); font-size: 22px; white-space: nowrap; display: inline-flex; align-items: baseline; }
.addr-get { opacity: .55; font-size: .8em; }
.addr-name { font-weight: 700; }
.addr-tld { color: var(--accent-2); font-size: .8em; }
.addr-sigil { display: none; }
[data-theme="dark"] .addr-name { text-shadow: 0 0 18px rgba(165, 139, 255, .7); }
[data-theme="dark"] .addr-tld { text-shadow: 0 0 12px var(--accent-2); }
[data-theme="light"] .addr { font-weight: 700; }
[data-theme="light"] .addr-tld { text-decoration: underline wavy var(--accent); }
[data-theme="gothic"] .addr { font-size: 30px; color: #eadfe6; }
[data-theme="gothic"] .addr-name { font-weight: 400; text-shadow: 0 0 10px rgba(163, 17, 43, .9), 0 2px 0 #000; }
[data-theme="gothic"] .addr-tld { color: #c41634; position: relative; }
[data-theme="gothic"] .addr-tld::after { content: ""; position: absolute; left: 40%; top: 85%; width: 3px; height: 0; background: #a3112b; border-radius: 0 0 3px 3px; animation: drip 3.5s ease-in infinite; }
[data-theme="aero"] .addr { padding: 4px 16px 6px; border-radius: 999px; color: #fff; font-weight: 900; font-size: 21px; background: linear-gradient(180deg, #7fd6ff 0%, #1aa3ff 52%, #0a7fd1 53%, #39c0ff 100%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(0, 90, 170, .7); text-shadow: 0 1px 2px rgba(0, 60, 120, .5); overflow: hidden; }
[data-theme="aero"] .addr::after { content: ""; position: absolute; left: 8px; right: 8px; top: 2px; height: 45%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .1)); }
[data-theme="aero"] .addr-tld { color: #c9ff9e; }
[data-theme="cyber"] .addr { font-size: 18px; letter-spacing: .14em; gap: 2px; }
[data-theme="cyber"] .addr-name { background: linear-gradient(180deg, #ffffff 0%, #9aa8b6 45%, #3c4651 50%, #e6edf5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; animation: glitch 4s steps(1) infinite; }
[data-theme="cyber"] .addr-tld { color: var(--accent-2); text-shadow: 0 0 8px var(--accent-2); }
[data-theme="cyber"] .addr-sigil { display: inline-block; width: 26px; height: 26px; margin-right: 6px; align-self: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L22 16 L36 6 L24 19 L38 20 L24 21 L36 34 L22 24 L20 38 L18 24 L4 34 L16 21 L2 20 L16 19 L4 6 L18 16Z' fill='none' stroke='%23cfd8e3' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat; animation: spin 12s linear infinite; }
[data-theme="light"] body::after { content: "who uses this bruh 💀"; position: fixed; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; background: #1c1533; color: #fff; font-family: 'Fredoka'; font-size: 14px; transform: rotate(-4deg); animation: wobble 3s ease-in-out infinite; z-index: 55; }

/* ===== sections menu: vertical, revealed by "Show sections", unique animation per theme ===== */
.sections { position: fixed; z-index: 49; top: 70px; left: clamp(12px, 3vw, 36px); width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow-y: auto; display: grid; gap: 6px; padding: 10px; background: color-mix(in srgb, var(--bg2) 88%, transparent); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.sections a { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; animation: secIn .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 40ms); }
.sections a .si { grid-row: span 2; font-size: 24px; text-align: center; transition: transform .3s; }
.sections a b { font-family: var(--head); font-weight: 600; line-height: 1.1; }
[data-theme="gothic"] .sections a b { font-weight: 400; font-size: 21px; }
.sections a small { color: var(--muted); font-size: 12px; font-family: var(--read); }
.sections a:hover, .sections a.on { background: var(--surface-2); border-color: var(--border); }
.sections a:hover .si { transform: scale(1.2) rotate(-8deg); }
.sections a.on { border-color: var(--accent); }
.sections.closing a { animation: secOut .35s ease-in both; animation-delay: calc((11 - var(--i)) * 18ms); }
.sections.closing { animation: fadeOut .5s ease-in forwards; }
[data-theme="gothic"] .sections a { animation-name: secInGoth; }
[data-theme="gothic"] .sections.closing a { animation-name: secOutGoth; }
[data-theme="aero"] .sections a { animation-name: secInAero; }
[data-theme="aero"] .sections.closing a { animation-name: secOutAero; }
[data-theme="cyber"] .sections a { animation-name: secInCyber; animation-timing-function: steps(6); }
[data-theme="cyber"] .sections.closing a { animation-name: secOutCyber; }
[data-theme="light"] .sections a { animation-name: secInLight; }

/* ===== page transitions ===== */
.swipe { position: fixed; inset: 0; z-index: 85; pointer-events: none; visibility: hidden; }
.swipe.in, .swipe.out { visibility: visible; }
[data-theme="gothic"] .swipe { background: radial-gradient(circle at var(--x) var(--y), #000 0 40%, #2a0008 60%, transparent 75%); background-size: 100% 100%; }
[data-theme="gothic"] .swipe.in { animation: inkIn .38s ease-in forwards; }
[data-theme="gothic"] .swipe.out { animation: inkOut .45s ease-out forwards; }
[data-theme="aero"] .swipe { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, .95), rgba(150, 225, 255, .9) 40%, rgba(60, 170, 240, .85)); }
[data-theme="aero"] .swipe.in { animation: bubbleIn .38s ease-in forwards; }
[data-theme="aero"] .swipe.out { animation: bubbleOut .45s ease-out forwards; }
[data-theme="cyber"] .swipe { background: repeating-linear-gradient(0deg, #040506 0 14px, #0f141a 14px 16px, #7df9ff 16px 17px); }
[data-theme="cyber"] .swipe.in { animation: glitchIn .38s steps(5) forwards; }
[data-theme="cyber"] .swipe.out { animation: glitchOut .45s steps(5) forwards; }
[data-theme="dark"] .swipe { background: linear-gradient(115deg, transparent 20%, #7C5CFF 20% 45%, #C6FF3D 45% 48%, #14101F 48%); background-size: 300% 100%; }
[data-theme="dark"] .swipe.in { animation: slashIn .38s ease-in forwards; }
[data-theme="dark"] .swipe.out { animation: slashOut .45s ease-out forwards; }
[data-theme="light"] .swipe { background: #fbf9ff; }
[data-theme="light"] .swipe.in { animation: fadeIn .38s ease forwards; }
[data-theme="light"] .swipe.out { animation: fadeOut .45s ease forwards; }

/* ===== intro ===== */
#intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: background .2s; overflow: hidden; }
#intro::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%); animation: pulse 2s ease-in-out infinite; }
.intro-stage { position: relative; text-align: center; }
.intro-dawg { width: min(260px, 60vw); margin: 0 auto; animation: introDrop .8s cubic-bezier(.3, 1.5, .5, 1) both; }
.intro-dawg svg { width: 100%; overflow: visible; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .4)); }
#intro.flash .intro-dawg { animation: costume .3s cubic-bezier(.3, 1.6, .5, 1); }
#intro.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: flash .25s ease-out forwards; pointer-events: none; }
.intro-word { font-family: var(--head); font-size: clamp(54px, 12vw, 120px); line-height: 1; margin-top: 10px; color: var(--text); }
.intro-word span { display: inline-block; animation: letter .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.intro-word span:nth-child(1) { animation-delay: .25s } .intro-word span:nth-child(2) { animation-delay: .32s } .intro-word span:nth-child(3) { animation-delay: .39s }
.intro-word span:nth-child(4) { animation-delay: .46s } .intro-word span:nth-child(5) { animation-delay: .53s } .intro-word span:nth-child(6) { animation-delay: .6s }
.intro-sub { color: var(--muted); font-family: var(--read); letter-spacing: .1em; }
.intro-skip { position: absolute; right: 20px; bottom: 20px; background: none; border: 1px solid var(--border); color: var(--muted); padding: 8px 16px; border-radius: 999px; }
#intro.out { animation: introOut .7s cubic-bezier(.6, 0, .4, 1) forwards; }

/* ===== onboarding ===== */
.overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: fadeIn .4s ease; }
.overlay.leave { animation: fadeOut .45s ease forwards; }
.onboard-card { width: min(640px, 100%); padding: clamp(22px, 5vw, 40px); animation: obIn .6s cubic-bezier(.2, .9, .3, 1.2); }
.onboard-card.leave { animation: obOut .42s ease-in forwards; }
.onboard-card h2 { font-family: var(--head); font-size: clamp(28px, 5vw, 42px); margin: 0 0 20px; font-weight: 600; }
[data-theme="gothic"] .onboard-card h2 { font-weight: 400; }
.ob-choices { display: grid; gap: 14px; }
.ob-choice { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; text-align: left; gap: 2px 14px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), border-color .2s; position: relative; overflow: hidden; }
.ob-choice:hover { transform: translateY(-4px) scale(1.02); border-color: var(--accent); }
.ob-emoji { grid-row: span 2; font-size: 40px; align-self: center; }
.ob-choice b { font-family: var(--head); font-size: 22px; font-weight: 600; }
[data-theme="gothic"] .ob-choice b { font-weight: 400; font-size: 26px; }
.ob-choice small { color: var(--muted); font-family: var(--read); }

/* ===== tour ===== */
#tour { position: fixed; inset: 0; z-index: 140; }
.tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72), 0 0 0 3px var(--accent-2), 0 0 30px 6px var(--accent); transition: all .55s cubic-bezier(.3, 1.2, .4, 1); pointer-events: none; }
.tour-card { position: fixed; padding: 18px; transition: left .55s cubic-bezier(.3, 1.2, .4, 1), top .55s cubic-bezier(.3, 1.2, .4, 1); }
.tour-card.swap { animation: tourSwap .45s cubic-bezier(.3, 1.4, .5, 1); }
.tour-dawg { width: 64px; float: right; margin: -8px -4px 0 8px; }
.tour-dawg svg { width: 100%; }
.tour-card h3 { font-family: var(--head); margin: 4px 0 6px; font-size: 24px; font-weight: 600; }
[data-theme="gothic"] .tour-card h3 { font-weight: 400; font-size: 28px; }
.tour-card p { margin: 0 0 14px; font-family: var(--read); font-size: 15px; }
.tour-step { color: var(--accent-2); font-size: 12px !important; letter-spacing: .15em; margin: 0 !important; }
#tour.in { animation: fadeIn .4s ease; }

/* ===== layout + cards ===== */
main { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 120px; }
.page { animation: pageIn .55s cubic-bezier(.2, .8, .2, 1); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--shadow); }
[data-theme="aero"] .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), var(--shadow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 45%, rgba(255, 255, 255, .25)); }
[data-theme="gothic"] .card { border-image: linear-gradient(90deg, transparent, #a3112b, transparent) 1; }
[data-theme="cyber"] .card { clip-path: polygon(0 12px, 12px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 12px)); }
.sec-title { font-family: var(--head); font-size: clamp(26px, 3.5vw, 36px); margin: 48px 0 18px; font-weight: 600; }
.sec-title.small { font-size: 24px; margin-top: 32px; }
[data-theme="gothic"] .sec-title, [data-theme="gothic"] h2, [data-theme="gothic"] h3 { font-weight: 400; }
.tag { font-family: var(--read); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: middle; font-weight: 500; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--accent-2); margin: 0 0 8px; font-weight: 600; font-family: var(--read); }
[data-theme="aero"] .eyebrow { color: #2a8a0a; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.field { display: grid; gap: 6px; color: var(--muted); }
.field input, .upload input[type="text"], textarea, .search { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); width: 100%; color: var(--text); }
[data-theme="gothic"] .field input, [data-theme="gothic"] textarea, [data-theme="gothic"] .search, [data-theme="cyber"] .field input, [data-theme="cyber"] textarea, [data-theme="cyber"] .search { border-radius: 0; }
.err { color: #ff6b81; font-size: 14px; margin: 4px 0 0; min-height: 1em; font-family: var(--read); }
.err:empty { display: none; }
.empty { padding: 30px; text-align: center; color: var(--muted); font-family: var(--read); }
.small-note { font-size: 13px; margin-top: 14px; font-family: var(--read); }
.link-btn { background: none; border: 0; color: var(--accent-2); text-decoration: underline; padding: 8px 0; }

/* ===== buttons + per-theme press ===== */
.btn { border: 0; padding: 13px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, box-shadow .2s, filter .2s; position: relative; overflow: hidden; }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-main { background: var(--accent); color: var(--on-main); box-shadow: 0 10px 30px -10px var(--accent); }
[data-theme="dark"] .btn-main { background: var(--accent-2); color: #14101F; box-shadow: 0 0 28px -6px var(--accent-2); }
.btn-ghost { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
[data-theme="aero"] .btn-main { background: linear-gradient(180deg, #8fdcff, #129bf2 50%, #0a86d8 51%, #3cc0ff); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px #0a6fb8; text-shadow: 0 1px 1px rgba(0, 60, 120, .5); }
[data-theme="aero"] .btn-ghost { background: rgba(255, 255, 255, .5); border-color: #fff; }
[data-theme="gothic"] .btn { border-radius: 0; letter-spacing: .04em; font-weight: 400; font-size: 19px; }
[data-theme="gothic"] .btn-main { background: linear-gradient(#7d0c20, #a3112b); box-shadow: 0 0 22px -4px #a3112b; }
[data-theme="cyber"] .btn { border-radius: 0; text-transform: uppercase; font-size: 12px; letter-spacing: .14em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
[data-theme="cyber"] .btn-main { background: linear-gradient(180deg, #f4f8fb, #9aa8b6 48%, #4b5662 52%, #dfe7ef); }
[data-theme="cyber"] .btn-ghost { border: 1px solid var(--accent-2); color: var(--accent-2); }
.press-ring { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; animation: pressRing .6s ease-out forwards; background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 70%); }
[data-theme="gothic"] .press-ring { background: radial-gradient(circle, #000 30%, rgba(163, 17, 43, .8) 50%, transparent 70%); animation-name: pressInk; }
[data-theme="aero"] .press-ring { background: radial-gradient(circle, transparent 40%, rgba(255, 255, 255, .95) 55%, transparent 70%); }
[data-theme="cyber"] .press-ring { border-radius: 0; background: none; border: 1px solid #7df9ff; animation-name: pressSquare; }
[data-theme="dark"] .press-ring { background: radial-gradient(circle, #C6FF3D, transparent 65%); }
.pressed { animation: press .35s cubic-bezier(.3, 1.6, .5, 1); }
[data-theme="gothic"] .pressed { animation: pressGoth .45s ease-out; }
[data-theme="aero"] .pressed { animation: pressJelly .5s cubic-bezier(.3, 1.6, .5, 1); }
[data-theme="cyber"] .pressed { animation: pressGlitch .3s steps(3); }
[data-theme="light"] .pressed { animation: pressBounce .45s cubic-bezier(.3, 1.8, .5, 1); }

/* ===== hero + mascot ===== */
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; min-height: 66vh; }
.hero-title { font-family: var(--head); font-size: clamp(42px, 7vw, 86px); line-height: 1.02; margin: 0 0 20px; font-weight: 700; }
.hero-title span { display: block; animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero-title .accent { background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rise .8s .15s cubic-bezier(.2, .8, .2, 1) both, shimmer 5s linear infinite; }
[data-theme="gothic"] .hero-title { font-weight: 400; text-shadow: 0 0 30px rgba(163, 17, 43, .6); font-size: clamp(48px, 8vw, 96px); }
[data-theme="gothic"] .hero-title .accent { background: linear-gradient(90deg, #a3112b, #ff4d6d, #a3112b); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 14px rgba(163, 17, 43, .7)); }
[data-theme="cyber"] .hero-title { font-size: clamp(30px, 5vw, 58px); text-transform: uppercase; letter-spacing: .04em; }
[data-theme="cyber"] .hero-title .accent { background: linear-gradient(180deg, #fff, #8d9aa8 48%, #2e353d 52%, #dfe7ef); -webkit-background-clip: text; background-clip: text; }
[data-theme="aero"] .hero-title { color: #fff; text-shadow: 0 2px 0 #4aa7dc, 0 6px 20px rgba(0, 80, 160, .35); font-weight: 900; }
[data-theme="aero"] .hero-title .accent { background: linear-gradient(180deg, #d6ffb8, #59c92b 55%, #2f9a0e); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 0 #fff); }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 540px; margin: 0 0 28px; font-family: var(--read); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.stats { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--head); font-size: 32px; color: var(--accent-2); line-height: 1; }
[data-theme="aero"] .stat b, [data-theme="light"] .stat b { color: var(--accent); }
.stat span { font-size: 13px; color: var(--muted); font-family: var(--read); }
.hero-dawg { position: relative; display: grid; place-items: center; }
.dawg-wrap { width: min(340px, 80vw); cursor: pointer; filter: drop-shadow(0 25px 40px rgba(0, 0, 0, .35)); }
.dawg-wrap svg, .auth-dawg svg { width: 100%; height: auto; overflow: visible; }
.speech { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 20px; font-family: 'Fredoka', 'Hind Siliguri', sans-serif; font-weight: 600; max-width: min(320px, 80vw); text-align: center; animation: bob 3s ease-in-out infinite; }
.speech::after { content: ""; position: absolute; bottom: -8px; left: 50%; border: 8px solid transparent; border-top-color: var(--text); border-bottom: 0; transform: translateX(-50%); }
.speech.pop { animation: speechPop .4s cubic-bezier(.3, 1.6, .5, 1); }
.companion { position: fixed; right: 14px; bottom: 10px; z-index: 60; display: grid; justify-items: end; pointer-events: none; }
.companion .dawg-wrap.mini { width: 96px; pointer-events: auto; }
.companion .speech { position: relative; top: auto; left: auto; transform: none; margin-bottom: 8px; font-size: 14px; opacity: 0; translate: 0 10px; transition: opacity .3s, translate .3s; pointer-events: auto; }
.companion .speech::after { left: auto; right: 34px; transform: none; }
.companion.talking .speech { opacity: 1; translate: 0 0; }
.companion .speech { pointer-events: none; }
body[data-at="chat"] .companion { display: none; }
body[data-at="home"] .companion .speech { display: none; }
body.reading .companion { opacity: .35; transform: scale(.7); transform-origin: bottom right; transition: .3s; }
body.reading .companion:hover { opacity: 1; transform: none; }

.dawg .body { animation: breathe 3.2s ease-in-out infinite; transform-origin: 75px 110px; }
.dawg .earL { animation: earL 5s ease-in-out infinite; transform-origin: 40px 42px; }
.dawg .earR { animation: earR 5s ease-in-out infinite; transform-origin: 110px 42px; }
.dawg .lids { animation: blink 4.5s infinite; transform-origin: 75px 60px; transform-box: view-box; }
.dawg .tail { animation: wag .5s ease-in-out infinite alternate; transform-origin: 112px 112px; }
.dawg.happy .body { animation: jump .6s cubic-bezier(.3, 1.6, .5, 1); }
.dawg .acc { display: none; }
[data-theme="dark"] .dawg .acc-phones, [data-theme="light"] .dawg .acc-shades, [data-theme="gothic"] .dawg .acc-goth, [data-theme="aero"] .dawg .acc-bubble, [data-theme="cyber"] .dawg .acc-cyber { display: inline; }
[data-theme="gothic"] .dawg .pupil { filter: drop-shadow(0 0 4px #ff2a4a); }
[data-theme="gothic"] .dawg .body, [data-theme="aero"] .dawg .body { animation: float 4.5s ease-in-out infinite; }
[data-theme="cyber"] .dawg .head { animation: glitchShift 5s steps(1) infinite; }
.acc-goth .wing { animation: flap .35s ease-in-out infinite alternate; transform-box: fill-box; }
.acc-goth .wing.l { transform-origin: right center; }
.acc-goth .wing.r { transform-origin: left center; }
.acc-bubble .shine { animation: shine 4s ease-in-out infinite; }
.acc-cyber .scan { animation: scan 2.2s linear infinite; }
.zzz { font-family: 'Fredoka'; fill: var(--muted); opacity: 0; }
.dawg.sleepy .zzz { animation: zzz 2.4s ease-out infinite; }
.dawg.sleepy .lids { animation: none; transform: scaleY(1); }

/* ===== home ===== */
.focus { display: flex; gap: 28px; align-items: center; padding: 26px; margin-top: 10px; }
.focus-ring { position: relative; width: 140px; height: 140px; display: grid; place-items: center; flex: none; }
.focus-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.focus-ring circle { fill: none; stroke-width: 9; }
.ring-bg { stroke: var(--surface-2); }
.ring-fg { stroke: var(--accent-2); stroke-linecap: round; stroke-dasharray: 327; transition: stroke-dashoffset 1s linear; }
[data-theme="light"] .ring-fg, [data-theme="gothic"] .ring-fg { stroke: var(--accent); }
.focus-ring span { font-family: var(--head); font-size: 30px; font-weight: 700; }
.focus h3 { margin: 0 0 4px; font-family: var(--head); }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.today { padding: 16px 18px; }
.today small { color: var(--muted); font-family: var(--read); display: block; }
.today b { font-family: var(--head); font-size: 30px; }
.continue { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-top: 12px; }
.continue > span { font-size: 34px; }
.continue div { flex: 1; display: grid; }
.continue small { color: var(--muted); font-family: var(--read); }
.paths { display: grid; gap: 14px; }
.path { text-align: left; padding: 22px 24px; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.path:hover { transform: translateX(6px); border-color: var(--accent); }
.path.on { outline: 2px solid var(--accent-2); }
.path h3 { font-family: var(--head); font-size: 26px; margin: 0; font-weight: 600; }
.path p { margin: 0; color: var(--muted); grid-column: 2; font-family: var(--read); }
.path-emoji { grid-row: span 2; font-size: 38px; align-self: center; transition: transform .3s; }
.path:hover .path-emoji { transform: scale(1.25) rotate(-10deg); }
.path-detail { margin-top: 14px; padding: 24px; animation: pop .35s ease-out; }
.path-detail h3 { font-family: var(--head); margin: 0 0 12px; }
.diag { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.diag button { padding: 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); text-align: left; font-family: var(--read); position: relative; overflow: hidden; }
.diag-out { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: var(--surface-2); border-left: 4px solid var(--accent-2); font-family: var(--read); }
.diag-out:empty { display: none; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tool { padding: 20px; }
.tool h3 { font-family: var(--head); margin: 0 0 6px; }
.tool p, .tool ol { font-family: var(--read); color: var(--muted); font-size: 15px; }
.tight { padding-left: 20px; margin: 0; }

/* ===== Bangladesh ===== */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h2 { font-family: var(--head); font-size: clamp(30px, 4vw, 44px); margin: 0; font-weight: 600; }
.seg-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.seg-toggle button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-family: 'Hind Siliguri', var(--read); transition: background .25s, color .25s; }
.seg-toggle button.on { background: var(--accent); color: var(--on-accent); }
.grade-list { display: grid; gap: 8px; margin-bottom: 20px; }
.grade { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; text-align: left; animation: listIn .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 50ms); transition: transform .25s, border-color .25s; position: relative; overflow: hidden; }
.grade:hover:not(:disabled) { transform: translateX(6px); border-color: var(--accent); }
.grade.on { outline: 2px solid var(--accent-2); }
.grade:disabled { opacity: .5; cursor: not-allowed; }
.grade b { font-family: var(--head); font-size: 20px; font-weight: 600; }
.grade small { color: var(--muted); font-family: var(--read); }
.subj-list { display: grid; gap: 12px; }
.subj-row { padding: 18px 20px; animation: listIn .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 35ms); }
.subj-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.subj-head b { font-family: var(--head); font-size: 21px; font-weight: 600; }
.guides { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.guides small { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; display: block; margin-bottom: 8px; font-family: var(--read); }

/* ===== papers ===== */
.board-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.board-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.board-tabs button.on { background: var(--accent); color: var(--on-accent); }
.board-tabs button:disabled { opacity: .55; cursor: not-allowed; }
.board-tabs small { font-size: 11px; opacity: .8; }
.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.subj { padding: 18px 16px; text-align: left; transition: transform .25s, border-color .25s; position: relative; overflow: hidden; animation: listIn .45s both; animation-delay: calc(var(--i) * 30ms); }
.subj:hover { transform: translateY(-4px); border-color: var(--accent); }
.subj.on { outline: 2px solid var(--accent-2); }
.subj b { display: block; font-size: 17px; }
.subj small { color: var(--muted); font-family: var(--read); }
.subj .big { position: absolute; right: -6px; bottom: -14px; font-size: 54px; opacity: .18; transition: transform .3s; }
.subj:hover .big { transform: rotate(-12deg) scale(1.15); }
.years { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 14px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); transition: all .2s; position: relative; overflow: hidden; font-family: var(--read); }
.chip.on, .chip:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
[data-theme="cyber"] .chip, [data-theme="gothic"] .chip { border-radius: 0; }
.sessions { display: grid; gap: 14px; }
.session { padding: 18px 20px; animation: listIn .4s ease-out both; animation-delay: calc(var(--i) * 60ms); }
.session h4 { margin: 0 0 12px; font-family: var(--head); font-size: 21px; font-weight: 600; }
.files { display: flex; gap: 8px; flex-wrap: wrap; }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; text-decoration: none; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; transition: transform .15s, border-color .15s; position: relative; overflow: hidden; font-family: var(--read); }
.file:hover { transform: translateY(-2px); border-color: var(--accent-2); }
[data-theme="gothic"] .file { border-radius: 2px; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-family: 'Fredoka', sans-serif; }
.badge.MS { background: var(--accent-2); color: #14101F; }
[data-theme="light"] .badge.MS, [data-theme="aero"] .badge.MS { color: #fff; }
.badge.FILE, .badge.IN { background: var(--muted); }
.done-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.note-list { display: grid; gap: 8px; }
.note-list .file { display: flex; }

/* ===== reader ===== */
.reader-page { max-width: none; }
.reader-bar { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; }
.rd-title { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--read); }
.rd-tools, .rd-nav { display: flex; gap: 4px; align-items: center; }
.rd-tools button, .rd-nav button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: 18px; display: grid; place-items: center; position: relative; overflow: hidden; }
.rd-tools button.on { background: var(--accent); border-color: var(--accent-2); transform: translateY(-2px); }
.rd-colors { display: flex; gap: 4px; margin-left: 6px; }
.rd-colors button { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--c) !important; }
.rd-colors button.on { outline: 2px solid var(--text); outline-offset: 2px; }
.rd-nav input { width: 58px; padding: 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.rd-nav span { color: var(--muted); font-family: var(--read); margin-right: 4px; }
.rd-save { text-align: center; font-size: 13px; min-height: 1em; font-family: var(--read); }
.reader-stage { display: grid; justify-content: center; gap: 18px; padding: 10px 0 40px; overflow-x: auto; }
.reader-stage[data-tool="hl"], .reader-stage[data-tool="pen"] { cursor: crosshair; touch-action: none; }
.reader-stage[data-tool="note"] { cursor: copy; }
.reader-stage[data-tool="erase"] { cursor: not-allowed; }
.rd-page { position: relative; background: #fff; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); margin: 0 auto; animation: pop .4s ease-out; }
.rd-page canvas { display: block; }
.rd-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.reader-stage[data-tool="view"] .rd-ink { pointer-events: none; }
.rd-notes { position: absolute; inset: 0; pointer-events: none; }
.rd-num { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #888; font-family: sans-serif; }
.sticky { position: absolute; width: 170px; pointer-events: auto; background: #fff27a; box-shadow: 2px 6px 14px rgba(0, 0, 0, .35); transform: rotate(-2deg); animation: stickIn .4s cubic-bezier(.3, 1.6, .5, 1); }
.sticky textarea { width: 100%; min-height: 90px; background: transparent; border: 0; border-radius: 0; color: #222; font-family: 'Fredoka', 'Hind Siliguri', sans-serif; font-size: 14px; resize: vertical; padding: 10px; margin: 0; }
.sticky-x { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #222; color: #fff; font-size: 11px; }

/* ===== friends ===== */
.tag-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; flex-wrap: wrap; }
.tag-card small { color: var(--muted); width: 100%; font-family: var(--read); }
.tag-card b { font-family: var(--head); font-size: 30px; flex: 1; }
.add-friend { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; padding: 18px 22px; margin-top: 12px; }
.add-friend .err { grid-column: 1 / -1; }
.people { display: grid; gap: 10px; }
.person { display: flex; align-items: center; gap: 14px; padding: 12px 16px; animation: listIn .4s both; }
.person > div:nth-child(2) { flex: 1; display: grid; }
.person small { color: var(--muted); font-family: var(--read); }
.person-act { display: flex; gap: 6px; }
.empty-card { padding: 30px; text-align: center; display: grid; gap: 14px; justify-items: center; font-family: var(--read); }
.pfp { border-radius: 50%; object-fit: cover; flex: none; background: var(--accent); color: var(--on-accent); display: inline-grid; place-items: center; font-family: var(--head); }
.pfp.xs { width: 30px; height: 30px; font-size: 14px; }
.pfp.md { width: 44px; height: 44px; font-size: 20px; }
.pfp.xl { width: 110px; height: 110px; font-size: 48px; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent-2); }

/* ===== badges ===== */
.badge-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.bdg { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 15px; background: var(--surface-2); border: 1px solid var(--border); }
.tier-legendary.bdg, .badge-card.tier-legendary.got { background: linear-gradient(135deg, #3a2400, #ffcf4a 40%, #fff4c2 50%, #ffb300 60%, #3a2400); background-size: 300% 300%; animation: foil 4s linear infinite; border-color: #ffd86b; }
.tier-epic.bdg, .badge-card.tier-epic.got { background: linear-gradient(135deg, #2a0a4a, #b06bff, #ff7ad9); border-color: #d6a8ff; }
.tier-rare.bdg, .badge-card.tier-rare.got { background: linear-gradient(135deg, #062a4a, #3aa0ff, #7df9ff); border-color: #8fd3ff; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge-card { padding: 16px; display: grid; gap: 4px; justify-items: center; text-align: center; transition: transform .3s; }
.badge-card:hover { transform: translateY(-4px) rotate(-1deg); }
.badge-card .badge-coin { font-size: 36px; }
.badge-card small { color: var(--muted); font-family: var(--read); font-size: 13px; }
.badge-card.got b, .badge-card.got small { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.badge-card em { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; opacity: .7; font-style: normal; }
.badge-card.locked { filter: grayscale(1); opacity: .45; }
.badge-pop { position: fixed; z-index: 120; left: 50%; top: 90px; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; padding: 16px 24px; border-radius: 22px; background: var(--bg2); border: 2px solid var(--accent-2); box-shadow: 0 0 60px -10px var(--accent-2); animation: badgeIn .8s cubic-bezier(.3, 1.6, .5, 1) both; max-width: calc(100vw - 32px); }
.badge-pop.out { animation: badgeOut .6s ease-in forwards; }
.badge-pop .badge-coin { font-size: 46px; animation: coinSpin 1.2s ease-out; }
.badge-pop div:last-child { display: grid; }
.badge-pop small { text-transform: uppercase; letter-spacing: .2em; color: var(--accent-2); font-size: 11px; }
.badge-pop b { font-family: var(--head); font-size: 26px; }
.badge-pop span { color: var(--muted); font-size: 14px; font-family: var(--read); }

/* ===== profile + auth ===== */
.auth { max-width: 480px; margin: 0 auto; padding: 30px; display: grid; gap: 10px; }
.auth.shake { animation: shake .45s; }
.auth-dawg { width: 110px; margin: -10px auto 0; }
.auth h2 { font-family: var(--head); text-align: center; margin: 0; font-size: 32px; }
.auth form { display: grid; gap: 10px; }
.og-note { text-align: center; padding: 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 207, 74, .15), rgba(255, 179, 0, .25)); border: 1px solid #ffcf4a; font-family: var(--read); margin: 0; }
.hint { margin: -4px 0 0; font-size: 13px; min-height: 1em; font-family: var(--read); }
.hint.ok { color: #6fe08a; } .hint.bad { color: #ff6b81; }
.profile-card { overflow: hidden; padding: 0 0 20px; }
.profile-banner { height: 120px; background: linear-gradient(120deg, var(--accent), var(--accent-soft), var(--accent-2)); background-size: 200% 200%; animation: shimmerBg 8s ease infinite; }
[data-theme="gothic"] .profile-banner { background: linear-gradient(rgba(6, 4, 8, .2), rgba(6, 4, 8, .85)), var(--banner) center 30%/cover; }
.profile-top { display: flex; gap: 20px; align-items: flex-end; padding: 0 24px; margin-top: -55px; flex-wrap: wrap; }
.pfp-edit { position: relative; cursor: pointer; display: inline-block; flex: none; }
.pfp-edit .pfp-pen { position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.profile-main { flex: 1; min-width: 180px; }
.profile-main h2 { font-family: var(--head); margin: 0; font-size: 36px; }
.tag-copy { border: 1px dashed var(--border); background: var(--surface-2); border-radius: 999px; padding: 4px 12px; font-family: var(--read); }
.profile-card .bio, .profile-card .ubars, .profile-card > .muted, .profile-card > .err { margin: 16px 24px 0; }
.ubars { display: flex; flex-direction: column; gap: 4px; }
.ubars img { width: 350px; max-width: 100%; image-rendering: pixelated; }
.profile-cd { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--surface-2); animation: pop .4s ease-out; }
.profile-cd .cd { width: 70px; height: 70px; }
.np { margin: 0; font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--read); }

/* ===== chat ===== */
.chat-page { padding-top: 0; }
.chat { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 170px); min-height: 460px; overflow: hidden; padding: 0; }
.convos { border-right: 1px solid var(--border); overflow-y: auto; padding: 10px; display: grid; align-content: start; gap: 4px; background: color-mix(in srgb, var(--bg2) 50%, transparent); }
.convo { display: flex; gap: 10px; align-items: center; padding: 10px; border: 0; background: none; border-radius: 14px; text-align: left; transition: background .2s, transform .2s; position: relative; overflow: hidden; }
.convo span { display: grid; min-width: 0; }
.convo small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--read); }
.convo:hover { transform: translateX(4px); }
.convo.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent-2); }
.thread { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; }
.thread-head { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.thread-head div { display: grid; }
.thread-head small { color: #6fe08a; font-family: var(--read); }
.msgs { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; flex-direction: column; max-width: 72%; animation: msgIn .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; }
.bubble { padding: 10px 14px; border-radius: 20px; font-family: var(--read); word-break: break-word; }
.msg.me .bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; box-shadow: 0 8px 22px -10px var(--accent); }
.msg.them .bubble { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
[data-theme="dark"] .msg.me .bubble { background: linear-gradient(135deg, #7C5CFF, #b06bff); }
[data-theme="gothic"] .msg.me .bubble { background: linear-gradient(135deg, #5a0718, #a3112b); border-radius: 2px 14px 2px 14px; }
[data-theme="gothic"] .msg.them .bubble { border-radius: 14px 2px 14px 2px; }
[data-theme="aero"] .msg.me .bubble { background: linear-gradient(180deg, #8fdcff, #129bf2 50%, #0a86d8 51%, #3cc0ff); box-shadow: inset 0 1px 0 #fff; }
[data-theme="cyber"] .bubble { border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-theme="cyber"] .msg.me .bubble { background: linear-gradient(180deg, #f4f8fb, #9aa8b6 48%, #4b5662 52%, #dfe7ef); color: #040506; }
.bubble img { display: block; max-width: 260px; max-height: 300px; border-radius: 12px; margin-bottom: 4px; }
.msg time { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--read); }
.typing { display: flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s } .typing i:nth-child(3) { animation-delay: .3s }
.composer { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); }
.composer input { flex: 1; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); }
.attach { font-size: 22px; cursor: pointer; padding: 6px; transition: transform .2s; }
.attach:hover { transform: rotate(-12deg) scale(1.15); }
.send { width: 46px; height: 46px; padding: 0; justify-content: center; }
.chat-err { padding: 0 16px 8px; }

/* ===== leaderboard ===== */
.construction { padding: 0 0 22px; overflow: hidden; text-align: center; }
.construction h3 { font-family: var(--head); font-size: 28px; margin: 20px 0 6px; }
.construction p { padding: 0 20px; font-family: var(--read); }
.tape { background: repeating-linear-gradient(45deg, #111 0 18px, #ffcf00 18px 36px); color: transparent; height: 26px; animation: tape 1.5s linear infinite; background-size: 51px 51px; }
.creator { display: flex; gap: 22px; align-items: center; padding: 22px; margin-top: 16px; flex-wrap: wrap; }
.creator-pfp { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #000, 0 0 30px 4px rgba(200, 0, 30, .7); }
.creator-main { flex: 1; min-width: 220px; }
.hold-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.venom-name { font-family: 'Alice', serif; font-size: clamp(54px, 9vw, 86px); line-height: 1; color: #000; background: none; border: 0; padding: 0 4px; user-select: none; -webkit-user-select: none; touch-action: none;
  text-shadow: 0 0 2px #000, 0 3px 6px rgba(255, 0, 30, .9), 0 8px 18px rgba(255, 0, 30, .75), 0 14px 34px rgba(200, 0, 20, .6);
  -webkit-text-stroke: 1px #1a0004; filter: url(#venom); position: relative; transition: transform .2s; }
.venom-name::after { /* venom drips */
  content: ""; position: absolute; left: 12%; right: 12%; top: 78%; height: 26px; pointer-events: none;
  background: radial-gradient(circle at 10% 0, #000 0 4px, transparent 5px), radial-gradient(circle at 34% 0, #000 0 3px, transparent 4px), radial-gradient(circle at 63% 0, #000 0 5px, transparent 6px), radial-gradient(circle at 88% 0, #000 0 3px, transparent 4px);
  animation: venomDrip 2.6s ease-in infinite; }
.venom-name.holding { animation: venomShake .12s linear infinite; }
.venom-name.revealed { animation: venomBurst .7s cubic-bezier(.3, 1.6, .5, 1); }
.venom-name.small { font-size: clamp(30px, 5vw, 44px); }
.venom-name.small::after { display: none; }
.creator-role { font-family: 'Alice', serif; font-size: 26px; color: #c41634; text-shadow: 0 0 10px rgba(255, 0, 30, .6); }
.hold-hint { display: inline-flex; align-items: center; gap: 6px; font-family: var(--read); font-size: 14px; color: var(--muted); animation: nudge 1.4s ease-in-out infinite; }
.hold-meter { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin: 10px 0; max-width: 300px; overflow: hidden; }
.hold-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #300, #ff1a3c); box-shadow: 0 0 12px #ff1a3c; }
.discord-line { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(-14px) scale(.9); filter: blur(6px); transition: all .7s cubic-bezier(.3, 1.4, .5, 1); }
.discord-line.shown { opacity: 1; transform: none; filter: none; }
.discord { width: 46px; height: 46px; color: #000; filter: drop-shadow(0 4px 8px rgba(255, 0, 30, .9)) drop-shadow(0 0 16px rgba(200, 0, 20, .6)); }

/* ===== music ===== */
.jukebox { display: flex; gap: 28px; padding: 24px; align-items: center; flex-wrap: wrap; }
.jewel { position: relative; width: min(420px, 100%); }
.yt-slot { display: grid; place-items: center; text-align: center; color: var(--muted); font-family: var(--read); padding: 16px; background-size: cover !important; aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; background: #000 linear-gradient(135deg, rgba(255, 255, 255, .08), transparent); box-shadow: inset 0 0 0 1px var(--border); }
.jewel-cd { position: absolute; right: -18px; bottom: -22px; }
.player-main { flex: 1; min-width: 240px; }
.player-main h3 { font-family: var(--head); font-size: 26px; margin: 0 0 4px; }
.progress { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); margin: 12px 0; font-family: var(--read); }
.progress input { flex: 1; accent-color: var(--accent-2); }
.ctrl { gap: 8px; }
.ib { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); font-size: 18px; display: grid; place-items: center; position: relative; overflow: hidden; }
.ib.big { width: 58px; height: 58px; font-size: 22px; background: var(--accent); color: var(--on-accent); }
.ib[aria-pressed="true"] { border-color: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); }
.vol { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.cd { position: relative; width: 110px; height: 110px; border-radius: 50%; flex: none; background: conic-gradient(from 20deg, #e9e9f2, #b7c6ff, #ffd6f5, #c8fff4, #fff3b0, #e9e9f2); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .4); }
.cd.spin { animation: spin 3s linear infinite; }
.cd-cover { position: absolute; inset: 22%; border-radius: 50%; background: var(--accent) center/cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.cd-hole { position: absolute; inset: 46%; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.cd::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); }
.albums { display: grid; gap: 8px; }
.album { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; text-align: left; animation: listIn .45s both; animation-delay: calc(var(--i) * 25ms); transition: transform .25s; position: relative; overflow: hidden; }
.album:hover { transform: translateX(6px); }
.album.on { outline: 2px solid var(--accent-2); }
.album-art { width: 54px; height: 54px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.album small { color: var(--muted); font-family: var(--read); }
.tracks { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 4px; }
.track { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; background: var(--surface); text-align: left; font-family: var(--read); transition: border-color .2s, transform .2s; }
.track:hover { border-color: var(--border); transform: translateX(4px); }
.track.on { border-color: var(--accent-2); }
.tn { color: var(--muted); width: 32px; font-size: 13px; }
.tt { flex: 1; }
.eq { display: flex; gap: 2px; align-items: flex-end; height: 16px; }
.eq i { width: 3px; background: var(--accent-2); animation: eq .8s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s } .eq i:nth-child(3) { animation-delay: .4s }
.stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.station { padding: 16px; text-align: left; transition: transform .25s; position: relative; overflow: hidden; }
.station:hover { transform: translateY(-4px); }
.station .art { height: 90px; border-radius: 14px; margin-bottom: 10px; }
.station b { display: block; }
.station small { color: var(--muted); font-family: var(--read); }
.yt-dock { position: fixed; z-index: 70; left: 14px; bottom: 14px; width: 240px; height: 200px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7), 0 0 0 2px var(--border); background: #000; transition: width .4s, height .4s, border-radius .4s; }
.yt-dock::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); }
.yt-dock.big { border-radius: 12px; transition: none; }
.yt-dock iframe, #ytFrame { width: 100%; height: 100%; display: block; }
.yt-close { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; }
.yt-dock.big .yt-close { display: none; }
.mini-player { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 4px; max-width: 190px; }
.mini-cd { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 0deg, #ddd, #8ad, #fdf, #aff, #ddd); animation: spin 2s linear infinite; flex: none; }
.mini-title { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--read); }

/* ===== customize ===== */
.cust-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cust-tabs button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.cust-tabs button.on { background: var(--accent); color: var(--on-accent); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wall-tile { position: relative; border: 2px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); transition: transform .25s, border-color .25s; animation: pop .4s both; }
.wall-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.wall-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 12px; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); font-family: var(--read); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-tile:hover { transform: translateY(-4px); }
.wall-tile:hover img { transform: scale(1.08); }
.wall-tile.on { border-color: var(--accent-2); box-shadow: 0 0 24px -4px var(--accent-2); }
.bar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; }
.ubar { padding: 4px; border: 2px solid transparent; border-radius: 8px; background: var(--surface); }
.ubar img { width: 100%; display: block; image-rendering: pixelated; }
.ubar.on { border-color: var(--accent-2); }
.upload { display: grid; gap: 10px; padding: 20px; }
.upload label { display: grid; gap: 6px; color: var(--muted); font-family: var(--read); }

/* ===== settings, talk, credits ===== */
.settings { padding: 30px; max-width: 760px; margin: 0 auto; display: grid; gap: 20px; }
.settings h2 { font-family: var(--head); margin: 0; font-size: 36px; }
.theme-row, .tap-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-row button, .tap-grid button { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 8px; align-items: center; font-family: 'Fredoka', 'Hind Siliguri', sans-serif; position: relative; overflow: hidden; }
.theme-row button.on, .tap-grid button.on { border-color: var(--accent-2); outline: 2px solid var(--accent-2); }
.toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--read); }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 46px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; transition: background .2s; flex: none; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.toggle input:checked + span { background: var(--accent); }
.toggle input:checked + span::after { transform: translateX(20px); background: #fff; }
.toggle input:focus-visible + span { outline: 3px solid var(--accent-2); }
.talk { padding: clamp(22px, 4vw, 40px); max-width: 720px; margin: 0 auto; }
.talk h2 { font-family: var(--head); font-size: 36px; margin: 0 0 8px; }
.talk-note { color: var(--muted); font-size: 17px; margin: 0 0 22px; font-family: var(--read); }
.talk-note b { color: var(--accent-2); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; transition: all .2s; font-family: var(--read); }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-2); }
textarea { resize: vertical; margin-bottom: 12px; }
.sent { font-size: 18px; color: var(--accent-2); animation: pop .4s ease-out; }
.credits { display: grid; gap: 8px; padding-left: 18px; margin: 0; font-family: var(--read); font-size: 14px; }
.credits a { color: var(--accent-2); }
[data-theme="light"] .credits a, [data-theme="aero"] .credits a { color: var(--accent); }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px clamp(16px, 4vw, 40px) 130px; font-size: 13px; border-top: 1px solid var(--border); font-family: var(--read); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 200%); z-index: 130; padding: 12px 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-family: 'Fredoka', 'Hind Siliguri', sans-serif; font-weight: 600; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.toast:empty { visibility: hidden; }
.toast.show { transform: translate(-50%, 0); }
.toast.bad { background: #ff6b81; color: #fff; }

/* ===== scenery ===== */
.wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 60s ease-in-out infinite alternate; }
.wall-tint { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)); }
.scene-moon { position: absolute; top: 80px; right: 8%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #f3e9e9, #b9a3a8 60%, #6e5960); box-shadow: 0 0 80px 20px rgba(200, 30, 60, .25); opacity: .85; }
.scene-fog { position: absolute; left: -50%; right: -50%; height: 40vh; bottom: -5vh; background: radial-gradient(ellipse at center, rgba(120, 100, 120, .22), transparent 60%); animation: fog 30s linear infinite alternate; }
.scene-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .85)); }
.scene-branch { position: absolute; top: 0; left: 0; width: 360px; opacity: .9; }
.goth-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.28) contrast(1.25); animation: kenburns 60s ease-in-out infinite alternate; }
.goth-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 4, 8, .55), rgba(60, 4, 16, .35) 60%, rgba(6, 4, 8, .9)); }
.goth-raven { position: absolute; left: -2%; bottom: -4%; height: 70vh; filter: invert(1) grayscale(1) contrast(1.4); mix-blend-mode: screen; opacity: .16; -webkit-mask-image: radial-gradient(ellipse at 40% 55%, #000 25%, transparent 68%); mask-image: radial-gradient(ellipse at 40% 55%, #000 25%, transparent 68%); }
.goth-web { position: absolute; top: 0; right: 0; width: min(520px, 55vw); mix-blend-mode: screen; opacity: .5; filter: grayscale(1) contrast(1.3); -webkit-mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 72%); mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 72%); }
.goth-rose { position: absolute; right: -4%; bottom: -6%; width: min(460px, 50vw); mix-blend-mode: screen; opacity: .55; filter: saturate(.6) hue-rotate(-20deg); -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
.aero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #5cc6ff 0%, #b4e8ff 45%, #e8fbff 70%, #c4f19a 88%, #6fcf3a 100%); }
.aero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.35) brightness(1.08); animation: kenburns 50s ease-in-out infinite alternate; }
.aero-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 35%, rgba(225, 248, 255, .55) 70%, rgba(233, 251, 255, .92) 100%); }
.aero-sun { position: absolute; top: -120px; left: 10%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 30%, transparent 65%); animation: pulse 6s ease-in-out infinite; mix-blend-mode: screen; }
.aero-streak { position: absolute; left: -10%; width: 120%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); transform: rotate(-8deg); animation: streak 9s ease-in-out infinite; }
.cyber-grid { position: absolute; inset: -50%; background-image: linear-gradient(rgba(201, 214, 227, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 214, 227, .06) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(600px) rotateX(55deg) translateY(10%); animation: gridMove 6s linear infinite; }
.cyber-sigil { position: absolute; opacity: .16; animation: spin 60s linear infinite; }
.cyber-scan { position: absolute; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, rgba(125, 249, 255, .06), transparent); animation: scanPage 7s linear infinite; }
.dark-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: orb 18s ease-in-out infinite alternate; }
.creature { position: absolute; will-change: transform; }
.bat { animation: batFly var(--dur, 12s) linear forwards; }
.bat .w { animation: flap .18s ease-in-out infinite alternate; transform-box: fill-box; }
.bat .w.l { transform-origin: right center; }
.bat .w.r { transform-origin: left center; }
.raven-img { width: 110px; filter: brightness(0) drop-shadow(0 0 6px rgba(163, 17, 43, .6)); animation: glide 1.6s ease-in-out infinite alternate; }
.spider { top: 0; animation: spiderDrop var(--dur, 9s) ease-in-out forwards; display: flex; flex-direction: column; align-items: center; }
.spider i { width: 1px; background: rgba(220, 210, 220, .5); height: var(--len, 200px); }

/* ===== tap fx ===== */
.cfx { position: absolute; transform: translate(-50%, -50%); }
.rose-wrap { transform: translate(-50%, -32%); }
.rose { overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); animation: roseLife 2.2s ease-in forwards; }
.rose .stem { stroke-dasharray: 140; stroke-dashoffset: 140; animation: drawStem .5s ease-out forwards; }
.rose .thorns path { transform-box: fill-box; transform-origin: left center; transform: scale(0); animation: thorn .25s ease-out forwards; }
.rose .thorns path:nth-child(1) { animation-delay: .25s } .rose .thorns path:nth-child(2) { animation-delay: .32s } .rose .thorns path:nth-child(3) { animation-delay: .39s } .rose .thorns path:nth-child(4) { animation-delay: .46s }
.rose .leaves path { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: thorn .4s .35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.rose .sepal { transform-box: fill-box; transform-origin: center top; transform: scale(0); animation: thorn .3s .2s ease-out forwards; }
.rose .petal { transform-box: view-box; transform-origin: 60px 60px; transform: scale(0) rotate(-40deg); opacity: 0; animation: petal .55s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: .25s; }
.rose .dew { opacity: 0; animation: fadeIn .3s .9s forwards; }
.petal-fall { width: 12px; height: 16px; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 30% 30%, #8e1228, #2a0309); animation: petalFall 1.6s ease-in forwards; opacity: 0; }
.flower { animation: bloom 1.6s cubic-bezier(.2, .8, .2, 1) forwards; }
.bat-burst { animation: batBurst 1.1s ease-out forwards; }
.bat-burst .w { animation: flap .12s ease-in-out infinite alternate; transform-box: fill-box; }
.bat-burst .w.l { transform-origin: right center; } .bat-burst .w.r { transform-origin: left center; }
.ink { animation: inkSplat .9s ease-out forwards; }
.ripple { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); box-shadow: inset 0 0 10px rgba(120, 210, 255, .8), 0 0 10px rgba(120, 210, 255, .6); animation: ripple .8s ease-out forwards; }
.bub { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(150, 220, 255, .3) 60%, rgba(60, 170, 240, .6)); border: 1px solid rgba(255, 255, 255, .9); animation: spark .9s ease-out forwards; }
.spark { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: spark .7s ease-out forwards; }
.heart { width: 14px; height: 14px; animation: spark .9s ease-out forwards; }
.heart::before { content: "💜"; font-size: 16px; }
.star { width: 10px; height: 10px; animation: spark 1s ease-out forwards; }
.star::before { content: "✦"; color: #ffe14d; text-shadow: 0 0 8px #ffe14d; font-size: 16px; }
.sigil-burst { animation: sigilBurst .9s ease-out forwards; }

/* ===== keyframes ===== */
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(8px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes listIn { from { opacity: 0; transform: translateX(-24px); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px) skewY(4deg); } }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes shimmerBg { 50% { background-position: 100% 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translate(-50%, -6px); } }
@keyframes speechPop { from { transform: translateX(-50%) scale(.5); } }
.companion .speech.pop { animation: compPop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes compPop { from { transform: scale(.5); } }
@keyframes wobble { 50% { transform: rotate(3deg) scale(1.05); } }
@keyframes breathe { 50% { transform: translateY(-4px) scale(1.01, .99); } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes earL { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(4deg); } 85% { transform: rotate(-8deg); } }
@keyframes earR { 0%, 40%, 100% { transform: rotate(0); } 45% { transform: rotate(14deg); } 50% { transform: rotate(-4deg); } 55% { transform: rotate(8deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
@keyframes jump { 40% { transform: translateY(-26px) scale(.95, 1.06); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes shine { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes scan { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px); } }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(2px, -1px) skewX(10deg); } 95% { transform: translate(-2px, 1px); } 97% { transform: translate(1px, 0) skewX(-6deg); } }
@keyframes glitchShift { 0%, 94%, 100% { transform: none; } 95% { transform: translateX(3px); } 97% { transform: translateX(-3px); } }
@keyframes drip { 0%, 30% { height: 0; opacity: 1; } 80% { height: 14px; opacity: 1; } 100% { height: 18px; opacity: 0; } }
@keyframes fog { to { transform: translateX(20%); } }
@keyframes kenburns { to { transform: scale(1.12) translate(-2%, -1%); } }
@keyframes batFly { from { transform: translate(var(--x0), var(--y0)) scaleX(var(--s, 1)); } to { transform: translate(var(--x1), var(--y1)) scaleX(var(--s, 1)); } }
@keyframes glide { to { transform: translateY(-14px) rotate(-4deg); } }
@keyframes spiderDrop { 0% { transform: translateY(calc(-1 * var(--len))); } 35%, 65% { transform: translateY(0); } 100% { transform: translateY(calc(-1 * var(--len) - 40px)); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .85; } }
@keyframes streak { 0%, 100% { opacity: 0; transform: rotate(-8deg) translateX(-30%); } 50% { opacity: 1; transform: rotate(-8deg) translateX(30%); } }
@keyframes gridMove { to { background-position: 0 46px; } }
@keyframes scanPage { from { top: -120px; } to { top: 100%; } }
@keyframes orb { to { transform: translate(80px, -60px) scale(1.2); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
/* sections menu */
@keyframes secIn { from { opacity: 0; transform: translateX(-30px) scale(.95); } }
@keyframes secOut { to { opacity: 0; transform: translateX(-30px) scale(.95); } }
@keyframes secInGoth { 0% { opacity: 0; transform: translateY(18px); filter: blur(10px) brightness(3) sepia(1) hue-rotate(-50deg); } 40% { opacity: .4; } 55% { opacity: .1; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes secOutGoth { to { opacity: 0; transform: translateY(-14px); filter: blur(10px); } }
@keyframes secInAero { 0% { opacity: 0; transform: scale(.3); border-radius: 50%; } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes secOutAero { to { opacity: 0; transform: scale(.2) translateY(-30px); } }
@keyframes secInCyber { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-10px); } 50% { opacity: 1; clip-path: inset(40% 20% 30% 0); transform: translateX(6px); } 100% { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes secOutCyber { to { opacity: 0; clip-path: inset(0 0 0 100%); } }
@keyframes secInLight { 0% { opacity: 0; transform: translateY(-20px) rotate(-3deg); } 60% { transform: translateY(4px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
/* page transitions */
@keyframes inkIn { from { clip-path: circle(0 at var(--x) var(--y)); } to { clip-path: circle(150% at var(--x) var(--y)); } }
@keyframes inkOut { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(20px); } }
@keyframes bubbleIn { from { clip-path: circle(0 at var(--x) var(--y)); } to { clip-path: circle(150% at var(--x) var(--y)); } }
@keyframes bubbleOut { to { clip-path: circle(0 at 50% -20%); } }
@keyframes glitchIn { 0% { clip-path: inset(0 0 100% 0); } 40% { clip-path: inset(30% 0 40% 0); transform: translateX(-20px); } 70% { clip-path: inset(0 0 20% 0); transform: translateX(14px); } 100% { clip-path: inset(0); transform: none; } }
@keyframes glitchOut { 0% { clip-path: inset(0); } 50% { clip-path: inset(40% 0 30% 0); transform: translateX(20px); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes slashIn { from { background-position: 100% 0; } to { background-position: 50% 0; } }
@keyframes slashOut { from { background-position: 50% 0; } to { background-position: 0 0; } }
/* intro + onboarding + tour */
@keyframes introDrop { from { opacity: 0; transform: translateY(-80px) scale(.6) rotate(-10deg); } }
@keyframes costume { 0% { transform: scale(.85) rotate(-6deg); } 100% { transform: none; } }
@keyframes flash { from { opacity: .35; } to { opacity: 0; } }
@keyframes letter { from { opacity: 0; transform: translateY(60px) rotate(20deg) scale(.4); } }
@keyframes introOut { to { opacity: 0; transform: scale(1.4); filter: blur(14px); } }
@keyframes obIn { from { opacity: 0; transform: translateY(40px) scale(.92) rotateX(20deg); } }
@keyframes obOut { to { opacity: 0; transform: translateX(-60px) scale(.95); } }
@keyframes tourSwap { from { opacity: 0; transform: translateY(12px) scale(.96); } }
/* buttons */
@keyframes pressRing { to { width: 260px; height: 260px; margin: -130px 0 0 -130px; opacity: 0; } }
@keyframes pressInk { 0% { opacity: 1; } to { width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0; filter: blur(2px); } }
@keyframes pressSquare { 0% { width: 4px; height: 4px; opacity: 1; } to { width: 200px; height: 60px; margin: -30px 0 0 -100px; opacity: 0; } }
@keyframes press { 40% { transform: scale(.94); } }
@keyframes pressGoth { 0% { filter: brightness(1); } 20% { filter: brightness(2.2) saturate(2); transform: scale(.96) skewX(-3deg); } 40% { filter: brightness(.6); } 60% { filter: brightness(1.6); } 100% { filter: none; transform: none; } }
@keyframes pressJelly { 25% { transform: scale(1.12, .88); } 50% { transform: scale(.94, 1.06); } 75% { transform: scale(1.03, .97); } }
@keyframes pressGlitch { 33% { transform: translateX(-4px); filter: hue-rotate(90deg); } 66% { transform: translateX(4px); filter: invert(1); } }
@keyframes pressBounce { 30% { transform: scale(.9) rotate(-2deg); } 60% { transform: scale(1.08) rotate(2deg); } }
/* tap fx */
@keyframes roseLife { 0%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(14px) rotate(6deg); } }
@keyframes drawStem { to { stroke-dashoffset: 0; } }
@keyframes thorn { to { transform: scale(1); } }
@keyframes petal { to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes petalFall { 0% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 120px) rotate(var(--r)); } }
@keyframes bloom { 0% { transform: translate(-50%, -50%) scale(0) rotate(-90deg); opacity: 1; } 35% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -30%) scale(1.1) rotate(25deg); opacity: 0; } }
@keyframes batBurst { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9); opacity: 0; } }
@keyframes inkSplat { 0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: .95; } 30% { transform: translate(-50%, -50%) scale(1.1) rotate(20deg); } 100% { transform: translate(-50%, -40%) scale(1.2) rotate(25deg); opacity: 0; } }
@keyframes ripple { to { width: 140px; height: 140px; opacity: 0; } }
@keyframes spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } }
@keyframes sigilBurst { 0% { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.4) rotate(45deg); opacity: 0; } }
/* misc */
@keyframes stickIn { from { transform: scale(0) rotate(-20deg); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes foil { to { background-position: 300% 300%; } }
@keyframes badgeIn { from { opacity: 0; transform: translate(-50%, -60px) scale(.5) rotate(-8deg); } }
@keyframes badgeOut { to { opacity: 0; transform: translate(-50%, -40px) scale(.8); } }
@keyframes coinSpin { from { transform: rotateY(720deg) scale(.3); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes tape { to { background-position: 51px 0; } }
@keyframes venomDrip { 0% { transform: scaleY(.2); transform-origin: top; opacity: 1; } 70% { transform: scaleY(1.6); opacity: 1; } 100% { transform: scaleY(2) translateY(6px); opacity: 0; } }
@keyframes venomShake { 50% { transform: translate(1px, -1px) scale(1.02); } }
@keyframes venomBurst { 0% { transform: scale(1); } 40% { transform: scale(1.18); text-shadow: 0 0 2px #000, 0 6px 30px #ff0020, 0 0 60px #ff0020; } 100% { transform: none; } }
@keyframes nudge { 50% { transform: translateX(-6px); } }

/* ===== reduced effects ===== */
.no-fx *, .no-fx *::before, .no-fx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.no-fx #fx, .no-fx #theme-layer .creature { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* ===== mobile ===== */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 20px; }
  .hero-sub { margin-inline: auto; }
  .hero-cta, .stats { justify-content: center; }
  .hero-dawg { order: -1; margin-top: 50px; }
  .dawg-wrap { width: min(220px, 56vw); }
  .sb-label, .acct > span:not(.pfp), .nav-ic .nl { display: none !important; }
  .nav { gap: 10px; }
  .addr { font-size: 18px; } [data-theme="gothic"] .addr { font-size: 24px; }
  .focus { flex-direction: column; text-align: center; }
  .chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 150px); }
  .convos { grid-auto-flow: column; grid-auto-columns: max-content; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .convo span small { display: none; }
  .add-friend { grid-template-columns: 1fr; }
  .scene-branch { width: 200px; }
  .bar-grid { grid-template-columns: 1fr; }
  .companion .dawg-wrap.mini { width: 70px; }
  .yt-dock { width: 200px; height: 200px; }
  .reader-bar { top: 56px; }
  .jewel-cd { display: none; }
}

/* Bangladesh flag (Windows can't render flag emoji) */
.flag-bd { display: inline-block; width: 1.5em; height: 1em; vertical-align: middle; border-radius: 3px; background: radial-gradient(circle at 45% 50%, #f42a41 0 30%, #006a4e 31%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }

/* ===== polish pass ===== */
[data-theme="gothic"] .hero-sub, [data-theme="gothic"] .path p, [data-theme="gothic"] .tool p, [data-theme="gothic"] .tool ol,
[data-theme="gothic"] .diag-out, [data-theme="gothic"] .talk-note, [data-theme="gothic"] .tour-card p, [data-theme="gothic"] .ob-choice small { font-size: 1.12em; line-height: 1.45; }
[data-theme="gothic"] .file, [data-theme="gothic"] .chip, [data-theme="gothic"] .bubble, [data-theme="gothic"] .track { font-size: 16px; font-weight: 600; }
[data-theme="aero"] .hero-sub, [data-theme="aero"] .stat span, [data-theme="aero"] .eyebrow { color: #04324f; text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 2px #fff; }
[data-theme="aero"] .hero-sub { font-weight: 700; }
.pfp.bot-pfp { background: var(--surface-2); overflow: visible; }
.pfp.bot-pfp svg { width: 120%; margin: -10% 0 0 -10%; }
.yt-slot b { display: block; color: var(--text); font-family: var(--head); font-size: 1.4em; }
@media (max-width: 860px) {
  .scene-moon { width: 80px; height: 80px; top: 70px; right: 4%; opacity: .55; }
  .companion .speech { font-size: 12px; max-width: 220px; padding: 7px 12px; }
}
.pfp.bot-pfp { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 70%, #fff 10%), var(--surface-2) 75%); box-shadow: 0 0 0 1px var(--border); }

/* ===== round 3: smaller taps ===== */
.rose { width: 54px; height: 86px; }
.rose-wrap { transform: translate(-50%, -30%); }
.petal-fall { width: 7px; height: 9px; }
.flower svg { width: 48px; height: 48px; }
.bat-burst svg { width: 30px; height: 15px; }
.ink svg { width: 54px; height: 54px; }
.ripple { width: 10px; height: 10px; }
@keyframes ripple { to { width: 64px; height: 64px; opacity: 0; } }
.bub { width: 7px; height: 7px; }
.spark { width: 4px; height: 4px; }
.heart::before { font-size: 11px; } .star::before { font-size: 11px; }
@keyframes sigilBurst { 0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1) rotate(45deg); opacity: 0; } }
.press-ring { animation-duration: .45s; }
@keyframes pressRing { to { width: 120px; height: 120px; margin: -60px 0 0 -60px; opacity: 0; } }

/* ===== header buttons ===== */
.nav-ic { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); position: relative; max-width: 210px; }
.nav-ic .nl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.nav-ic .nic { font-size: 17px; line-height: 1; flex: none; }
.nav-ic .mini-cd { width: 20px; height: 20px; animation: none; }
.nav-ic.playing .mini-cd { animation: spin 2s linear infinite; box-shadow: 0 0 10px var(--accent-2); }
[data-theme="gothic"] .nav-ic, [data-theme="cyber"] .nav-ic { border-radius: 0; }
.online-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #2bd96b; color: #032; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.friends-pop { position: absolute; right: clamp(12px, 4vw, 40px); top: 62px; width: min(340px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; padding: 14px; display: grid; gap: 8px; animation: pop .3s cubic-bezier(.3, 1.4, .5, 1); z-index: 60; }
.friends-pop h4 { margin: 0 0 4px; font-family: var(--head); font-size: 20px; display: flex; justify-content: space-between; align-items: center; }
.fp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; transition: background .2s; }
.fp-row:hover { background: var(--surface-2); }
.fp-row .pfp-wrap { position: relative; }
.fp-row .status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #777; box-shadow: 0 0 0 2px var(--bg2); }
.fp-row .status.on { background: #2bd96b; box-shadow: 0 0 0 2px var(--bg2), 0 0 8px #2bd96b; }
.fp-row small { display: block; color: var(--muted); font-family: var(--read); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-row em { font-style: normal; font-size: 12px; color: var(--muted); }
.fp-empty { font-family: var(--read); color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .nav-ic { padding: 7px 9px; } .nav-right { gap: 5px; } }

/* ===== songs, remove buttons ===== */
.upload { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.upload input[type="file"] { font-size: 13px; max-width: 100%; }
.sub-h { font-family: var(--head); font-size: 20px; margin: 22px 0 10px; font-weight: 600; }
.song-list { display: grid; gap: 8px; }
.song { display: flex; align-items: center; gap: 12px; padding: 10px 14px; animation: listIn .4s both; }
.song-cover { width: 46px; height: 46px; border-radius: 10px; background: var(--accent) center/cover; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.song-meta { flex: 1; min-width: 0; display: grid; }
.song-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-meta small { color: var(--muted); font-family: var(--read); }
.x-btn { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 12px; display: grid; place-items: center; transition: background .2s, color .2s, transform .2s; }
.x-btn:hover { background: #d6334d; color: #fff; transform: rotate(90deg); }
.btn.danger, .btn-ghost.danger { color: #ff6b81; border-color: rgba(255, 107, 129, .5); }
.danger-row { margin-top: 26px; }
.ubar-item { position: relative; display: inline-block; }
.ubar-item .x-btn { position: absolute; right: -10px; top: -10px; width: 24px; height: 24px; }
.pad { padding: 0 24px; } .pad-card { padding: 18px 20px; } .center { text-align: center; }
.msg-del { margin-left: 8px; border: 0; background: rgba(0, 0, 0, .25); color: inherit; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; opacity: 0; transition: opacity .2s; vertical-align: middle; }
.msg:hover .msg-del, .msg-del:focus { opacity: 1; }
@media (hover: none) { .msg-del { opacity: .6; } }
.pfp-wrap { position: relative; display: inline-block; flex: none; }
.pfp-wrap .status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #777; box-shadow: 0 0 0 2px var(--bg2); }
.pfp-wrap .status.on { background: #2bd96b; box-shadow: 0 0 0 2px var(--bg2), 0 0 8px #2bd96b; }
.mfa-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.mfa-qr img { width: 160px; height: 160px; background: #fff; padding: 8px; border-radius: 12px; }
.mfa-qr code { font-size: 13px; word-break: break-all; background: var(--surface-2); padding: 8px; border-radius: 8px; }
.tier-mythic.bdg, .badge-card.tier-mythic.got { background: linear-gradient(135deg, #000, #3a0008 40%, #ff1a3c 50%, #3a0008 60%, #000); background-size: 300% 300%; animation: foil 3s linear infinite; border-color: #ff1a3c; box-shadow: 0 0 16px rgba(255, 26, 60, .6); }
.profile-card.owner { box-shadow: 0 0 0 2px #ff1a3c, 0 0 50px -10px rgba(255, 0, 30, .7); }

/* ===== home story ===== */
.story { display: grid; gap: clamp(30px, 6vw, 70px); margin: 40px 0 20px; }
.beat { display: grid; grid-template-columns: minmax(150px, 280px) 1fr; gap: clamp(18px, 4vw, 48px); align-items: center; opacity: .15; transform: translateY(40px); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.beat:nth-child(even) { grid-template-columns: 1fr minmax(150px, 280px); }
.beat:nth-child(even) .beat-art { order: 2; }
.beat.shown { opacity: 1; transform: none; }
.beat-art svg { width: 100%; height: auto; overflow: visible; }
.beat-text h3 { font-family: var(--head); font-size: clamp(26px, 4vw, 42px); line-height: 1.12; margin: 0 0 10px; font-weight: 700; }
[data-theme="gothic"] .beat-text h3 { font-weight: 400; }
.beat-text h3 em { font-style: normal; color: var(--accent-2); }
[data-theme="light"] .beat-text h3 em, [data-theme="aero"] .beat-text h3 em { color: var(--accent); }
.beat-text p { font-family: var(--read); font-size: 18px; color: var(--muted); margin: 0 0 12px; max-width: 560px; }
[data-theme="aero"] .beat-text p { color: #04324f; text-shadow: 0 0 8px rgba(255, 255, 255, .9); font-weight: 600; }
/* 1: kid reaching for a spark they chose */
.beat-art .sun-glow { fill: var(--accent-2); opacity: .15; }
.beat-art .spark-a { fill: var(--accent-2); transform-origin: 100px 76px; transform: scale(0) rotate(-45deg); }
.beat-art .kid circle, .beat-art .kid path:not(.arm) { fill: var(--text); }
.beat-art .kid .arm { stroke: var(--text); fill: none; transform-origin: 112px 88px; transform: rotate(40deg); }
.beat.shown .spark-a { animation: sparkIn 1.2s .3s cubic-bezier(.3, 1.6, .5, 1) forwards, twinkle 2s 1.5s ease-in-out infinite; }
.beat.shown .kid .arm { animation: reach .8s .2s ease-out forwards; }
.beat.shown .sun-glow { animation: pulse 3s ease-in-out infinite; }
/* 2: the "DO IT. NOW." stamp kills the flame */
.beat-art .flame path { fill: #ff8a2b; filter: drop-shadow(0 0 12px #ff8a2b); transform-origin: 100px 120px; }
.beat-art .stamp rect { fill: none; stroke: #e5243b; stroke-width: 5; }
.beat-art .stamp text { fill: #e5243b; font: 900 22px 'Fredoka', sans-serif; letter-spacing: .06em; }
.beat-art .stamp { opacity: 0; transform-origin: 100px 76px; transform: scale(2.4) rotate(-14deg); }
.beat-art .smoke circle { fill: var(--muted); opacity: 0; }
.beat.shown .flame path { animation: flicker .6s ease-in-out 3, dieOut .6s 1.6s ease-in forwards; }
.beat.shown .stamp { animation: stampIn .35s 1.3s cubic-bezier(.5, 0, .7, 1.4) forwards; }
.beat.shown .smoke circle { animation: smokeUp 1.6s 2s ease-out forwards; }
.beat.shown .smoke circle:nth-child(2) { animation-delay: 2.2s; } .beat.shown .smoke circle:nth-child(3) { animation-delay: 2.4s; }
/* 3: pressure gauge needle hits red */
.beat-art .gauge-bg { stroke: var(--surface-2); }
.beat-art .gauge-red { stroke: #e5243b; stroke-dasharray: 100; stroke-dashoffset: 100; }
.beat-art .needle path { stroke: var(--text); } .beat-art .needle circle { fill: var(--text); }
.beat-art .needle { transform-origin: 100px 120px; transform: rotate(-80deg); }
.beat-art .gauge-lbl { fill: var(--muted); font: 700 12px 'Fredoka', sans-serif; letter-spacing: .3em; }
.beat.shown .needle { animation: needle 1.8s .2s cubic-bezier(.3, 1.4, .5, 1) forwards, shake .3s 2s 4; }
.beat.shown .gauge-red { animation: drawStem 1.6s .3s ease-out forwards; }
/* 4: the lightbulb moment */
.beat-art .bulb path, .beat-art .bulb rect { fill: var(--surface-2); stroke: var(--text); stroke-width: 3; transition: fill .4s; }
.beat-art .bulb-glow { fill: var(--accent-2); opacity: 0; }
.beat-art .rays path { stroke: var(--accent-2); opacity: 0; }
.beat.shown .bulb path { animation: bulbOn .2s 1s steps(2) 3 forwards; }
.beat.shown .bulb-glow { animation: glowOn .6s 1.6s ease-out forwards; }
.beat.shown .rays path { animation: fadeIn .4s 1.8s forwards; }
/* 5: Dawg + perks */
.beat-dawg { width: min(240px, 60vw); margin: 0 auto; }
.beat-dawg svg { width: 100%; overflow: visible; }
.perks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; font-family: var(--read); font-size: 17px; }
.perks li { padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); opacity: 0; transform: translateX(-20px); }
.beat.shown .perks li { animation: listIn .5s both; animation-delay: calc(.3s + var(--i) * .18s); opacity: 1; transform: none; }
@keyframes sparkIn { to { transform: scale(1) rotate(0); } }
@keyframes twinkle { 50% { transform: scale(.85) rotate(10deg); } }
@keyframes reach { to { transform: rotate(0); } }
@keyframes flicker { 50% { transform: scale(1.08, .94); } }
@keyframes dieOut { to { transform: scale(.1); opacity: 0; } }
@keyframes stampIn { to { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes smokeUp { 0% { opacity: .6; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px) scale(1.6); } }
@keyframes needle { to { transform: rotate(72deg); } }
@keyframes bulbOn { to { fill: #ffe14d; } }
@keyframes glowOn { to { opacity: .35; } }
@media (max-width: 760px) {
  .beat, .beat:nth-child(even) { grid-template-columns: 1fr; text-align: center; }
  .beat:nth-child(even) .beat-art { order: 0; }
  .beat-art { max-width: 220px; margin: 0 auto; }
  .beat-text p { margin-inline: auto; }
  .perks { text-align: left; }
}

/* ===== reader tools v2 ===== */
.rd-tools { flex-wrap: wrap; }
.rd-tools > button { width: auto !important; min-width: 38px; padding: 0 8px; gap: 4px; display: inline-flex !important; align-items: center; justify-content: center; }
.rd-tools > button small { font-size: 12px; font-family: var(--read); }
.rd-tools > button:disabled { opacity: .35; }
.rd-tools button[data-tool="text"].on { box-shadow: 0 0 0 2px var(--accent-2), 0 0 14px var(--accent-2); }
.rd-sizes { display: inline-flex; gap: 3px; margin-left: 4px; }
.rd-sizes button { width: 30px !important; height: 30px !important; }
.rd-sizes i { display: block; width: 18px; height: var(--s); border-radius: 4px; background: currentColor; }
.rd-sizes button.on { border-color: var(--accent-2); }
.reader-stage[data-tool="text"] { cursor: crosshair; touch-action: none; }
.ans-box { position: absolute; pointer-events: auto; border: 1.5px dashed var(--c); border-radius: 4px; background: rgba(255, 255, 255, .55); animation: stickIn .35s cubic-bezier(.3, 1.6, .5, 1); min-width: 60px; min-height: 26px; }
.ans-box textarea { width: 100%; height: 100%; margin: 0; padding: 3px 6px; border: 0; border-radius: 0; background: transparent; color: var(--c); font-family: 'Kalam', 'Comic Sans MS', 'Segoe Print', cursive; line-height: 1.3; resize: none; overflow: auto; }
.ans-box:focus-within { background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px rgba(31, 79, 255, .25); }
.ans-grip { position: absolute; left: -10px; top: -12px; width: 20px; height: 20px; border-radius: 6px; background: #222; color: #fff; font-size: 12px; display: grid; place-items: center; cursor: move; opacity: 0; transition: opacity .2s; touch-action: none; }
.ans-box:hover .ans-grip, .ans-box:focus-within .ans-grip, .sticky:hover .ans-grip, .sticky:focus-within .ans-grip { opacity: 1; }
@media (hover: none) { .ans-grip { opacity: .8; } }
.ans-box .sticky-x { opacity: 0; transition: opacity .2s; }
.ans-box:hover .sticky-x, .ans-box:focus-within .sticky-x { opacity: 1; }
.rd-ink path, .rd-ink rect { pointer-events: visiblePainted; }
.reader-stage[data-tool="erase"] .rd-ink path:hover, .reader-stage[data-tool="erase"] .rd-ink rect:hover { opacity: .35; }

/* ===== planner + locked-in bars ===== */
.lock-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.lock-bar { padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(14px); }
.lock-bar span { display: block; font-family: var(--read); color: var(--muted); margin-bottom: 8px; }
.lock-bar b { color: var(--text); font-family: var(--head); font-size: 22px; }
.lb-track { height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
.lb-track.sm { height: 6px; margin-top: 6px; width: 100%; }
.lb-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px var(--accent-2); animation: barGrow 1.2s cubic-bezier(.2, .8, .2, 1); position: relative; overflow: hidden; }
.lb-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-100%); animation: barShine 2.4s 1.2s ease-in-out infinite; }
.lb-track.wk i { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
[data-theme="aero"] .lb-track i { background: linear-gradient(180deg, #a6f06a, #45b51f 50%, #2f9a0e 51%, #7be04a); }
@keyframes barGrow { from { width: 0; } }
@keyframes barShine { to { transform: translateX(100%); } }
.plan-today, .plan-new, .plan-card { padding: 20px 22px; margin-top: 14px; }
.plan-today h3, .plan-new h3 { font-family: var(--head); margin: 0 0 10px; font-size: 24px; }
.task-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.task { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); transition: opacity .4s, transform .4s; }
.task label { display: flex; gap: 10px; align-items: center; cursor: pointer; font-family: var(--read); }
.task input { position: absolute; opacity: 0; }
.task .tick { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--accent); flex: none; display: grid; place-items: center; transition: background .2s; }
.task input:checked + .tick { background: var(--accent); }
.task input:checked + .tick::after { content: "✓"; color: var(--on-accent); font-weight: 700; }
.task input:focus-visible + .tick { outline: 3px solid var(--accent-2); }
.task.done .tt { text-decoration: line-through; opacity: .55; }
.task small { color: var(--muted); font-family: var(--read); font-size: 12px; }
.task.just-done { animation: taskDone .7s ease forwards; }
@keyframes taskDone { 30% { transform: scale(1.03); background: var(--accent); } 100% { opacity: .4; transform: translateX(20px); } }
.warn { color: #ffb347; font-family: var(--read); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.field select { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.days-off { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.days-off legend { color: var(--muted); margin-bottom: 6px; font-family: var(--read); }
.days-off input { position: absolute; opacity: 0; }
.days-off span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; font-family: var(--read); }
.days-off input:checked + span { background: var(--accent); color: var(--on-accent); }
.days-off input:focus-visible + span { outline: 3px solid var(--accent-2); }
.plan-card summary { cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; list-style: none; }
.plan-card summary::-webkit-details-marker { display: none; }
.plan-card summary b { font-family: var(--head); font-size: 22px; }
.plan-card summary .lb-track { grid-column: 1 / -1; }
.plan-days { display: grid; gap: 12px; margin: 16px 0; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.plan-day h5 { margin: 0 0 6px; font-family: var(--read); font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.plan-day.is-today h5 { color: var(--accent-2); }

/* ===== Dawg's guides ===== */
.coach { position: fixed; z-index: 75; left: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 16px 16px 16px 12px; display: grid; grid-template-columns: 70px 1fr; gap: 10px; animation: coachIn .55s cubic-bezier(.3, 1.4, .5, 1); }
.coach.out { animation: fadeOut .3s forwards; }
.coach-dawg svg { width: 70px; overflow: visible; }
.coach h4 { font-family: var(--head); margin: 0 0 8px; font-size: 22px; font-weight: 600; }
[data-theme="gothic"] .coach h4 { font-weight: 400; }
.coach ol { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 8px; font-family: var(--read); font-size: 15px; }
.coach li { animation: listIn .45s both; animation-delay: calc(.2s + var(--i) * .12s); }
.coach .link-btn { padding: 0; font-size: 13px; }
.coach-x { position: absolute; top: 8px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 14px; }
.coach-help { position: fixed; z-index: 61; right: 118px; bottom: 22px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 700 18px 'Fredoka', sans-serif; box-shadow: var(--shadow); backdrop-filter: blur(10px); animation: pop .4s; }
.coach-help:hover { transform: scale(1.1) rotate(-8deg); }
.coach-pulse { animation: coachPulse 1.2s ease-out 2 !important; position: relative; z-index: 5; }
@keyframes coachPulse { 0% { box-shadow: 0 0 0 0 var(--accent-2); } 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes coachIn { from { opacity: 0; transform: translateY(30px) scale(.9); } }
body[data-at="chat"] .coach-help { right: 18px; }
@media (max-width: 860px) { .coach-help { right: 88px; bottom: 16px; } .coach { grid-template-columns: 50px 1fr; } .coach-dawg svg { width: 50px; } }

.bot-pfp .zzz { display: none; }
.ans-box { background: rgba(255, 255, 255, .18); }

.ob-choices.pron { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ===== profile card (anyone) ===== */
.who { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.who:hover .pfp { box-shadow: 0 0 0 3px var(--accent-2); }
.name-btn { font-weight: 700; display: block; }
.name-btn:hover { text-decoration: underline; }
.fp-row .pfp-wrap { cursor: pointer; }
.user-modal { position: fixed; inset: 0; z-index: 145; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadeIn .25s; }
.um-card { position: relative; width: min(480px, 100%); max-height: 88vh; overflow-y: auto; padding: 0 0 20px; animation: umIn .45s cubic-bezier(.3, 1.4, .5, 1); }
.um-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: #fff; }
.um-card .profile-banner { height: 100px; }
.um-top { display: flex; gap: 16px; align-items: flex-end; padding: 0 20px; margin-top: -48px; flex-wrap: wrap; }
.um-top .pfp-wrap .status { width: 18px; height: 18px; right: 6px; bottom: 6px; }
.um-main { flex: 1; min-width: 160px; }
.um-main h2 { margin: 0; font-family: var(--head); font-size: 30px; }
.um-main p { margin: 2px 0; font-family: var(--read); }
.on-txt { color: #2bd96b; font-weight: 700; }
.um-doing { color: var(--text); }
.um-bio { margin: 14px 20px 0; font-family: var(--read); font-style: italic; font-size: 17px; }
.um-sec { margin: 14px 20px 0; }
.um-sec > small { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); margin-bottom: 6px; font-family: var(--read); }
.um-np { display: flex; gap: 12px; align-items: center; }
.um-np .cd { width: 54px; height: 54px; }
.um-np b { display: block; font-family: var(--read); }
.bdg.big { width: auto; height: auto; padding: 4px 10px; gap: 6px; display: inline-flex; border-radius: 999px; }
.bdg.big em { font-style: normal; font-size: 12px; font-family: var(--read); }
.um-act { margin: 18px 20px 0; }
body.modal-open { overflow: hidden; }
@keyframes umIn { from { opacity: 0; transform: translateY(30px) scale(.94); } }

/* ===== custom locked-in bar, profile stats, own PDFs ===== */
.lock-bars.custom .lb-track i { background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 50%, #fff), var(--bc)); box-shadow: 0 0 12px var(--bc), 0 0 30px color-mix(in srgb, var(--bc) 55%, transparent); }
.lock-bars.custom .lb-track.wk i { background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 35%, transparent), var(--bc)); }
.lock-bars.st-pulse .lb-track i { animation: barGrow 1.2s cubic-bezier(.2, .8, .2, 1), barPulse 1.8s 1.2s ease-in-out infinite; }
@keyframes barPulse { 50% { filter: brightness(1.4) drop-shadow(0 0 10px var(--bc, var(--accent-2))); } }
.lock-bars.st-rainbow .lb-track i { background: linear-gradient(90deg, #ff4d6d, #ffb84d, #f9f871, #6bff95, #4dc3ff, #a77bff, #ff4d6d) !important; background-size: 200% 100% !important; box-shadow: 0 0 16px rgba(255, 255, 255, .55); animation: barGrow 1.2s cubic-bezier(.2, .8, .2, 1), rainbowRun 3s linear infinite; }
@keyframes rainbowRun { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lock-bars .lb-track i { animation: none !important; } }
.lock-bar .lb-lvl { float: right; font-style: normal; font-size: 12px; letter-spacing: .08em; color: var(--text); }
.lb-why { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--read); font-size: 12px; color: var(--muted); }
.lb-why span { display: inline; margin: 0; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.lock-bar .lb-why b { font-family: var(--read); font-size: 12px; }
.um-card .lock-bars { grid-template-columns: 1fr; margin: 0; }
.um-book { font-family: var(--read); }
.um-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-top: 10px; }
.um-stats div { padding: 8px 6px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.um-stats b { display: block; font-family: var(--head); font-size: 18px; }
.um-stats small { color: var(--muted); font-size: 11px; font-family: var(--read); }
.bar-custom .row { gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); background: var(--c); box-shadow: 0 0 10px var(--c); cursor: pointer; padding: 0; }
.swatch.on { outline: 3px solid var(--text); outline-offset: 2px; }
.swatch.pickc { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.swatch.pickc input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.privacy .toggle { display: flex; margin: 8px 0; }
.my-pdfs { padding: 14px 18px; margin-bottom: 14px; }
.my-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.my-head small { display: block; }
.my-list { display: grid; gap: 6px; margin-top: 10px; }
.my-pdf { display: flex; gap: 10px; align-items: center; }
.my-pdf .file { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-reqs { padding: 14px 18px; margin: 14px 0; }
.home-reqs h3 { margin: 0 0 8px; }
.hr-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); }
.hr-row .name-btn { margin-right: auto; }
.hr-row .muted { font-family: var(--read); font-size: 13px; }

/* the full name "getdawgly.com" always shows (word of mouth): shrink it on narrow screens instead of cutting "get" */
.addr { flex-shrink: 0; } /* never squeeze or clip the name */
.addr .addr-get { opacity: .8; }
@media (max-width: 860px) { .addr, [data-theme] .addr { font-size: 16px; letter-spacing: 0; } [data-theme="aero"] .addr { padding: 3px 10px 4px; } [data-theme="gothic"] .addr { font-size: 20px; } }
@media (max-width: 400px) { .addr, [data-theme] .addr { font-size: 13px; } [data-theme="aero"] .addr { padding: 3px 8px 4px; } [data-theme="gothic"] .addr { font-size: 16px; } }
@media (max-width: 420px) {
  .nav { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .nav-right { gap: 3px; } .nav-ic { padding: 6px 7px; } .sections-btn { padding: 6px 8px; }
  .acct { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
  .sections-btn, .nav-ic, .acct { flex-shrink: 0; }
  [data-theme="cyber"] .addr-sigil { display: none; }
}
@media (max-width: 360px) {
  .nav { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .nav-right { gap: 2px; } .nav-ic { padding: 5px; } .nav-ic .nic { font-size: 15px; } .nav-ic .mini-cd { width: 17px; height: 17px; }
  .addr, [data-theme] .addr { font-size: 12px; } [data-theme="aero"] .addr { padding: 3px 7px 4px; } [data-theme="gothic"] .addr { font-size: 15px; }
}

/* ===== mod section + creator panel ===== */
.tag.bad { background: #e5243b; color: #fff; }
.mod-tag { background: linear-gradient(90deg, #3a7bff, #7a5cff); color: #fff; font-weight: 700; }
.mod-note { display: block; font-family: var(--read); font-style: italic; margin: 4px 0; color: var(--text); }
.mod-steps { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.mod-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.mod-steps li > span { font-size: 20px; }
.mod-steps li.ok { box-shadow: 0 0 0 2px #2bd96b inset; }
.mod-steps small { display: block; color: var(--muted); font-family: var(--read); }
.mod-done { font-weight: 700; }
.admin-list { display: grid; gap: 8px; }
.admin-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; flex-wrap: wrap; }
.admin-row.is-banned { opacity: .6; }
.ar-main { flex: 1; min-width: 200px; }
.ar-main .name-btn { display: inline; }
.ar-main .tag { margin-left: 6px; }
.ar-main small { display: block; color: var(--muted); font-family: var(--read); overflow-wrap: anywhere; }
.ar-act { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.danger { color: #e5243b; }

/* ---------- albums: drop-down tracks ---------- */
.alb { animation: listIn .45s both; animation-delay: calc(var(--i) * 25ms); }
.alb .album { width: 100%; grid-template-columns: 54px 1fr auto auto; animation: none; z-index: 1; }
.alb .chev { font-size: 18px; color: var(--muted); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.alb.open .chev { transform: rotate(180deg); color: var(--accent-2); }
.alb.open .album { outline: 2px solid var(--accent-2); box-shadow: 0 10px 40px -12px var(--accent-2); }
.alb .album::before { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); }
.alb.open .album::before { transition: transform .8s ease; transform: translateX(120%); }
.alb.open .album-art { animation: artPop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes artPop { 40% { transform: scale(1.18) rotate(-8deg); } 70% { transform: scale(.95) rotate(3deg); } }
.alb-drop { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(.2, .9, .2, 1), opacity .4s; }
.alb.open .alb-drop { grid-template-rows: 1fr; opacity: 1; }
.alb-inner { overflow: hidden; min-height: 0; padding: 0 6px 0 22px; border-left: 2px solid transparent; transition: border-color .5s; }
.alb.open .alb-inner { border-left-color: var(--accent-2); }
.alb-inner .tracks { margin: 8px 0 10px; }
.alb.open .tracks li { animation: trackIn .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(min(var(--k), 18) * 28ms + 120ms); }
@keyframes trackIn { from { opacity: 0; transform: translateY(-14px) scale(.96); filter: blur(4px); } }
.alb-inner .more-tracks { margin: 0 0 12px; }

/* ---------- YouTube bot wall ---------- */
.yt-block { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px;
  background: rgba(8, 12, 24, .92); color: #fff; font-size: 13px; text-align: center; }
.yt-block b { font-size: 15px; }
.yt-block .row { justify-content: center; flex-wrap: wrap; gap: 6px; }
.yt-block .btn { font-size: 12px; padding: 6px 10px; }
.yt-block .btn-ghost { color: #fff; }
.yt-block[hidden] { display: none; }
.yt-block a.btn { background: #e62117; color: #fff; border: 0; }
.yt-block { overflow-y: auto; }
@media (max-width: 600px) { .yt-block { justify-content: safe center; gap: 5px; padding: 8px 10px; font-size: 11.5px; } .yt-block b { font-size: 13px; } .yt-block .btn { padding: 5px 8px; font-size: 11px; } }

/* ---------- music: "Your music" upload card (top of the page) ---------- */
.my-music { position: relative; overflow: hidden; padding: 22px; margin: 22px 0 8px; display: grid; gap: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface) 55%, color-mix(in srgb, var(--accent-2) 18%, var(--surface))); }
.my-music::before { content: ""; position: absolute; width: 320px; height: 320px; right: -110px; top: -150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent 70%); animation: mmFloat 9s ease-in-out infinite alternate; }
@keyframes mmFloat { to { transform: translate(-60px, 40px) scale(1.15); } }
.mm-head { display: flex; gap: 14px; align-items: center; position: relative; }
.mm-head h3 { margin: 0 0 4px; font-family: var(--head); font-size: 22px; }
.mm-head p { margin: 0; color: var(--muted); font-family: var(--read); font-size: 14px; line-height: 1.45; }
.mm-head b { color: var(--text); }
.mm-icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 26px -8px var(--accent-2), inset 0 1px 0 rgba(255, 255, 255, .5); }
.my-music .upload { padding: 0; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; position: relative; }
.drop { position: relative; display: grid !important; place-items: center; align-content: center; gap: 6px; min-height: 170px; padding: 18px; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent-2) 60%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop b { color: var(--text); font-size: 16px; word-break: break-word; }
.drop small { color: var(--muted); }
.drop-icon { font-size: 30px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.drop:hover, .drop.over { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, var(--surface-2)); transform: translateY(-2px); }
.drop:hover .drop-icon, .drop.over .drop-icon { transform: translateY(-6px) scale(1.15); }
.drop.picked { border-style: solid; border-color: var(--accent-2); }
.drop.picked .drop-icon { animation: artPop .7s cubic-bezier(.3, 1.6, .5, 1); }
.drop:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.up-side { display: grid; gap: 10px; align-content: start; }
.up-side label { display: grid; gap: 6px; color: var(--muted); font-family: var(--read); }
.up-side .err:empty { display: none; }
.my-music #songsView .sub-h:first-child { margin-top: 4px; }
@media (max-width: 700px) { .my-music .upload { grid-template-columns: 1fr; } .drop { min-height: 140px; } .my-music { padding: 16px; } }

/* ---------- creator's playlist ---------- */
.alb.creator .album { background: linear-gradient(120deg, color-mix(in srgb, var(--accent-2) 20%, var(--surface)), var(--surface)); }
.alb.creator .pfp { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 2px var(--accent-2), 0 0 18px -2px var(--accent-2); }
.creator-tag { font-size: 11px; vertical-align: middle; }
.cp-note { margin: 10px 0 2px; font-size: 13px; color: var(--muted); font-family: var(--read); }
.cp-cover { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--accent) center/cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* ---------- creator row: same venom name as the profile ---------- */
.cp-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.venom-name.mini { font-size: 30px; padding: 0 2px; cursor: pointer; }
.venom-name.mini::after { display: none; }
.cp-name .creator-role { font-size: 15px; }
.alb.creator .pfp[data-cprof] { cursor: pointer; transition: transform .25s, box-shadow .25s; }
.alb.creator .pfp[data-cprof]:hover, .venom-name.mini:hover { transform: scale(1.08); }
.alb.creator .album { background: linear-gradient(120deg, rgba(30, 0, 6, .14), var(--surface) 60%); }
.alb.creator .pfp { box-shadow: 0 0 0 2px #000, 0 0 18px 2px rgba(200, 0, 30, .7); }

/* ---------- record player (uploaded + creator songs) ---------- */
.rec-vinyl { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 33%, rgba(255, 255, 255, .05) 33.5%, transparent 34.5%),
    repeating-radial-gradient(circle, #121212 0 1.6px, #1d1d1f 1.6px 3.2px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), inset 0 0 0 2px #050505;
  animation: spin 2.4s linear infinite; animation-play-state: paused; }
.rec-vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0 8%, rgba(255, 255, 255, .16) 12%, transparent 18% 52%, rgba(255, 255, 255, .12) 58%, transparent 64%); }
.rec-vinyl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4%; height: 4%; translate: -50% -50%; border-radius: 50%; background: #e8e8e8; box-shadow: 0 0 0 2px #000; }
.rec-label { position: absolute; inset: 31%; border-radius: 50%; background: linear-gradient(145deg, var(--accent), var(--accent-2)) center/cover;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.spin .rec-vinyl, .rec-vinyl.spin { animation-play-state: running; }

/* mini record in the corner */
.rec-dock { position: fixed; z-index: 71; left: 14px; bottom: 14px; animation: recIn .5s cubic-bezier(.3, 1.6, .5, 1); }
.rec-dock[hidden] { display: none; }
@keyframes recIn { from { transform: translateY(40px) scale(.6); opacity: 0; } }
.rec-disc { width: 78px; height: 78px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: block;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent-2) 60%, transparent)); transition: transform .25s; }
.rec-disc:hover { transform: scale(1.08); }
.rec-disc:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.rec-dock .rec-vinyl { width: 78px; }
.rec-x { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; cursor: pointer; }

/* big record player */
@keyframes recUp { from { transform: translateY(60px) scale(.94); opacity: 0; } }
.rec-stage { position: relative; width: min(280px, 72vw); margin: 4px auto 16px; }
.rec-platter { padding: 6%; border-radius: 50%; background: radial-gradient(circle, #2b2b30, #0c0c0f 70%); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.np-full.playing .rec-platter { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 50px -6px var(--accent-2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* tonearm swings onto the record while playing */
.rec-arm { position: absolute; top: -4%; right: -6%; width: 46%; height: 72%; transform-origin: 82% 8%; transform: rotate(-28deg); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.rec-arm::before { content: ""; position: absolute; right: 8%; top: 0; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ddd 30%, #888 32%, #bbb 60%, #666); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.rec-arm i { position: absolute; right: 18%; top: 9%; width: 5%; height: 82%; border-radius: 4px; background: linear-gradient(90deg, #aaa, #eee, #999); transform: rotate(18deg); transform-origin: top; }
.rec-arm i::after { content: ""; position: absolute; left: -90%; bottom: -6%; width: 280%; height: 13%; border-radius: 3px; background: #2a2a2a; }
.np-full.playing .rec-arm { transform: rotate(0deg); }

/* ---------- onboarding: theme picker ---------- */
.ob-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ob-theme { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface-2); color: inherit; text-align: center; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), border-color .2s, box-shadow .2s; }
.ob-theme:hover { transform: translateY(-4px) scale(1.03); border-color: var(--accent); }
.ob-theme.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 30px -10px var(--accent); }
.ob-theme .sw { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); transition: transform .4s; }
.ob-theme.on .sw { transform: rotate(180deg) scale(1.08); }
.ob-theme b { font-family: var(--head); font-size: 18px; }
.ob-theme small { color: var(--muted); font-size: 13px; }
.ob-next { display: block; margin: 18px auto 0; }

/* ---------- riff extras: squiggly seek bars ---------- */
.squig { position: relative; flex: 1; display: flex; align-items: center; height: 26px; --p: 0%; }
.squig input { position: relative; z-index: 1; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.squig input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent var(--p), color-mix(in srgb, var(--muted) 45%, transparent) var(--p)); }
.squig input::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent var(--p), color-mix(in srgb, var(--muted) 45%, transparent) var(--p)); }
.squig input::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 20px; margin-top: -8px; border-radius: 4px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.squig input::-moz-range-thumb { width: 6px; height: 20px; border: 0; border-radius: 4px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.squig > i { position: absolute; left: 0; top: 50%; width: var(--p); height: 4px; translate: 0 -50%; border-radius: 4px; background: var(--accent-2); pointer-events: none; transition: height .35s; }
.squig.live > i { height: 12px; border-radius: 0; animation: squig 1s linear infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q5 0 10 6 T20 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 20px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q5 0 10 6 T20 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 20px 100% repeat-x; }
@keyframes squig { to { -webkit-mask-position: 20px 0; mask-position: 20px 0; } }
.rate-btn { font-size: 13px; font-weight: 700; font-family: var(--read); }

/* ---------- record visualizer ring ---------- */
.rec-viz { position: absolute; inset: -14%; width: 128%; height: 128%; pointer-events: none; }

/* ---------- equalizer & effects ---------- */
.fx-sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 20, .55); backdrop-filter: blur(10px); animation: fadeIn .25s; }
.fx-sheet[hidden] { display: none; }
.fx-card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 22px 20px; animation: recUp .4s cubic-bezier(.2, .9, .3, 1.2); }
.fx-card h3 { margin: 2px 0 10px; font-family: var(--head); font-size: 24px; }
.fx-note { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); font-size: 14px; }
.fx-on { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 10px 0 4px; cursor: pointer; }
.fx-on input { width: 20px; height: 20px; accent-color: var(--accent-2); }
.fx-warn { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
#fxBody { transition: opacity .3s; }
#fxBody.off { opacity: .45; }
.fx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fx-presets .on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.eq-bands { display: grid; gap: 4px; margin-bottom: 14px; }
.band { display: grid; grid-template-columns: 40px 1fr 32px; align-items: center; gap: 10px; font-family: var(--read); font-size: 12px; color: var(--muted); }
.band input, .fx-knobs input { width: 100%; accent-color: var(--accent-2); }
.band output { text-align: right; font-variant-numeric: tabular-nums; }
.fx-knobs { display: grid; gap: 10px; margin-bottom: 8px; }
.fx-knobs label { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-weight: 600; }
.fx-knobs input { grid-column: 1 / -1; }
.fx-knobs output { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- now playing: app-style screen (spinning record + lyrics) ---------- */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes npUp { from { transform: translateY(100%); } }
.np-full { position: fixed; inset: 0; z-index: 95; color: #fff; --np-tint: var(--accent);
  background: radial-gradient(130% 75% at 50% 0%, color-mix(in srgb, var(--np-tint) 72%, #000), #06060a 80%); animation: npUp .45s cubic-bezier(.2, .9, .3, 1); }
.np-full[hidden] { display: none; }
.np-viz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.np-scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); scrollbar-width: none; }
.np-scroll::-webkit-scrollbar { display: none; }
.np-full svg, .ly-pill svg, .jukebox .ib svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.np-full svg.fill { fill: currentColor; stroke: none; }
.np-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; padding: 12px 16px; text-align: center; }
.np-from { min-width: 0; }
.np-from small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.np-from b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-icon { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .15s; }
.np-icon:hover { background: rgba(255, 255, 255, .22); }
.np-icon:active, .np-skip:active, .np-play:active { transform: scale(.9); }
.np-full .rate-btn { font-size: 13px; }
.np-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; max-width: 1300px; height: calc(100% - 68px); margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px) 24px; }
.np-side { min-width: 0; text-align: center; }
.np-side .rec-stage { width: min(360px, 32vw, 46vh); margin: 4px auto 26px; }
.np-full.playing .rec-platter { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 60px -6px var(--np-tint), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.np-side h2 { margin: 0 0 4px; font-family: var(--head); font-size: clamp(20px, 2.6vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }
.np-full .progress { margin: 10px 0 8px; color: rgba(255, 255, 255, .75); }
.np-ctrl { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 18px); }
.np-skip { width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.np-skip svg { width: 30px; height: 30px; }
.np-play { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #08080c; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 34px -8px var(--np-tint); transition: transform .15s; }
.np-play svg { width: 32px; height: 32px; }
.np-to-ly, .np-hint { display: none; }
/* lyrics card */
.np-ly { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 16px 22px 6px; border-radius: 24px;
  background: color-mix(in srgb, var(--np-tint) 32%, rgba(0, 0, 0, .45)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px -20px rgba(0, 0, 0, .7); scroll-margin-top: 12px; }
.np-ly-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.np-ly-head b { font-family: var(--head); font-size: 18px; }
.ly-tools { display: flex; align-items: center; gap: 6px; font-family: var(--read); font-size: 12px; opacity: .85; }
.ly-tools[hidden] { display: none; }
.ly-tools button { padding: 5px 9px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; cursor: pointer; }
.np-lyrics { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 35% 0; scrollbar-width: none;
  -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.np-lyrics::-webkit-scrollbar { display: none; }
.ly { margin: 0; padding: 7px 0; font-family: var(--head); font-size: clamp(22px, 2.8vw, 34px); font-weight: 700; line-height: 1.25; opacity: .35; cursor: pointer; transform-origin: left center;
  transition: opacity .4s, transform .5s cubic-bezier(.3, 1.4, .5, 1), text-shadow .4s; }
.ly:hover { opacity: .65; }
.ly.on { opacity: 1; transform: scale(1.04); text-shadow: 0 0 24px var(--np-tint); }
.ly.plain { opacity: .9; cursor: default; font-size: clamp(17px, 2vw, 22px); font-weight: 500; }
.ly-msg { opacity: .7; font-family: var(--read); font-size: 17px; }
/* jukebox buttons */
.ly-pill { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: inherit; font-weight: 700; cursor: pointer; transition: transform .15s, border-color .2s; }
.ly-pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.ly-pill svg { width: 18px; height: 18px; }
#bigCd { cursor: pointer; }
/* phones and narrow windows: player fills the first screen, scroll down to the lyrics card */
@media (max-width: 900px) {
  .np-grid { display: block; height: auto; padding: 0 16px 20px; }
  .np-side { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding-bottom: 8px; }
  .np-side .rec-stage { width: min(300px, 74vw, 42dvh); }
  .np-to-ly { display: grid; }
  .np-hint { display: inline-flex; align-items: center; gap: 4px; align-self: center; margin-top: 18px; padding: 8px 16px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; cursor: pointer; animation: hint 2s ease-in-out infinite; }
  .np-hint svg { width: 18px; height: 18px; }
  @keyframes hint { 50% { transform: translateY(4px); } }
  .np-ly { height: calc(100dvh - 40px); }
  .ly { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .np-full, .np-hint { animation: none; } }
.ly-retry { margin-top: 8px; padding: 8px 18px; border: 0; border-radius: 99px; background: #fff; color: #08080c; font-weight: 700; cursor: pointer; }