/* Vibnelo · design system
   Content first: full-bleed photos, big lyrics, quiet chrome. One accent (the hype gradient) and only on BACK, Drop
   and rewards. Everything else is white on black. The brand's 3D tokens are images on black (mix-blend-mode: screen). */
:root {
  --bg: #050507; --s1: #0e0e12; --s2: #16161c; --s3: #202028; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .14);
  --text: #fff; --text2: rgba(255, 255, 255, .78); --muted: rgba(255, 255, 255, .52); --faint: rgba(255, 255, 255, .32);
  --pink: #ff2d87; --orange: #ff8a00; --cyan: #22e1ff; --violet: #7c5cff; --up: #31e59a; --down: #ff5470;
  --hype: linear-gradient(135deg, #ff2d87 0%, #ff5a3c 55%, #ff8a00 100%);
  --f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --d: "Archivo", "Inter", system-ui, sans-serif;
  --spring: cubic-bezier(.2, .9, .25, 1.12); --ease: cubic-bezier(.2, .8, .2, 1);
  --top: env(safe-area-inset-top, 0px); --bot: env(safe-area-inset-bottom, 0px);
  --tab: 58px;
  /* Clash keeps the HOOKFIGHTS arena palette and type */
  --ca: #ff4a3d; --ca2: #ff8b3d; --cag: rgba(255, 74, 61, .4); --cb: #2f7bff; --cb2: #3dd2ff; --cbg: rgba(47, 123, 255, .4); --volt: #d6ff3d; --gold: #f4c55c;
  --x: "Archivo", "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --serif: "Instrument Serif", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--bg); color: var(--text); font: 15px/1.45 var(--f); overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.f { fill: currentColor; stroke: none; }
.num { font-variant-numeric: tabular-nums; }
.token { mix-blend-mode: screen; pointer-events: none; user-select: none; }
.tag { font: 650 10.5px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------------ shell */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr; }
.side, .panel { display: none; }
.stage { position: relative; height: 100%; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: calc(var(--top) + 18px) 18px calc(var(--tab) + var(--bot) + 28px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.view.on { opacity: 1; pointer-events: auto; }
.view.feedview { padding: 0; overflow: hidden; }

.topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; padding: calc(var(--top) + 10px) 12px 0 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .mark { width: 26px; height: 26px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }
.tabs { display: flex; justify-content: center; gap: 18px; }
.tabs button { position: relative; padding: 6px 0 10px; font: 700 16px var(--f); letter-spacing: -.005em; color: rgba(255, 255, 255, .6); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); transition: color .2s; }
.tabs button.on { color: #fff; }
.tabs button.on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 3px; border-radius: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 10px rgba(255, 255, 255, .5); }
/* Vibes: a gold V coin in a glass pill */
.coin { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff6c4 0 7%, #ffd65c 24%, #f6a823 60%, #c86a07 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 200, .45), inset 0 -2px 3px rgba(122, 52, 0, .45), 0 0 12px rgba(255, 168, 40, .45); }
.coin { font-size: 20px; }
.coin::after { content: "V"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 .52em / 1 var(--x); color: rgba(120, 52, 0, .78); }
.vibes { justify-self: end; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 5px; border-radius: 16px; font: 800 14px var(--f); background: rgba(10, 10, 14, .32); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.vibes .coin { width: 20px; height: 20px; font-size: 20px; }
.vibes.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); } }

.tabbar { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--tab) + var(--bot)); padding-bottom: var(--bot); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: #000; border-top: 1px solid rgba(255, 255, 255, .07); }
.tabbar button { position: relative; display: grid; justify-items: center; gap: 3px; font: 600 10.5px var(--f); color: rgba(255, 255, 255, .5); }
.tabbar button svg { width: 25px; height: 25px; }
.tabbar button.on { color: #fff; }
.tabbar button.on svg { stroke-width: 2.3; }
.tabbar .drop { width: 50px; height: 34px; border-radius: 12px; color: #fff; display: grid; place-items: center; justify-self: center; background: linear-gradient(120deg, #22e1ff 0%, #7c5cff 45%, #ff2d87 100%); box-shadow: 0 6px 22px -6px rgba(124, 92, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tabbar .drop svg { width: 21px; height: 21px; stroke-width: 2.8; }
.tabbar .dot { position: absolute; top: 0; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px #000; }

/* ------------------------------------------------------------------ feed */
.feed { position: absolute; inset: 0; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; background: #000; }
.feed::-webkit-scrollbar { display: none; }
.card { position: relative; height: 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; isolation: isolate; --c1: #ff2d87; --c2: #7c5cff; --hot: #ff9c38; --cool: #5a38ff; --wy: .3; --oxv: 50%; background: #000; }

/* The living cover: every hook plays like a music video. Back to front: the room (the photo with the person removed),
   light, the big lyric word, the person, dust. The camera pushes in slowly and the person moves more than the room
   (parallax), so the word really sits BEHIND the head. The light breathes with the bass. */
.lc { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #07070a; --beat: 0; }
.lc > div { position: absolute; inset: 0; }
.lc-bg, .lc-sub { background: center / cover no-repeat; transform: scale(1.07) translate3d(.6%, 0, 0); backface-visibility: hidden; }
.lc-bg { filter: brightness(.84) saturate(1.16) contrast(1.06); }
.lc-sub { filter: saturate(1.08) contrast(1.03); }
.card.on .lc-bg { animation: pushBg 24s cubic-bezier(.45, 0, .55, 1) infinite alternate, bgIn 1.5s var(--ease) both; will-change: transform; }
.card.on .lc-sub { animation: pushSub 24s cubic-bezier(.45, 0, .55, 1) infinite alternate, subIn 1.3s var(--ease) both; will-change: transform; }
@keyframes pushBg { to { transform: scale(1.14) translate3d(-.7%, -.6%, 0); } }
@keyframes pushSub { to { transform: scale(1.22) translate3d(.5%, -.2%, 0); } }
@keyframes bgIn { from { scale: 1.08; } }
@keyframes subIn { from { translate: 0 2.4%; } }
.lc-glow { mix-blend-mode: screen; opacity: calc(.62 + var(--beat) * .75); background:
  radial-gradient(44% 30% at var(--oxv) 30%, color-mix(in srgb, var(--hot) 40%, transparent), transparent 72%),
  radial-gradient(80% 44% at 0% 104%, color-mix(in srgb, var(--cool) 52%, transparent), transparent 70%),
  radial-gradient(64% 36% at 104% 4%, color-mix(in srgb, var(--cool) 36%, transparent), transparent 70%); }
.card.on .lc-glow { animation: glowDrift 11s ease-in-out infinite alternate; }
@keyframes glowDrift { to { transform: translate3d(-4%, 2%, 0) scale(1.08); } }
.lc-kw, .lc-kwf { pointer-events: none; }
.lc-dust i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--hot) 45%, #fff) 0, color-mix(in srgb, var(--hot) 55%, transparent) 32%, transparent 70%); }
.card.on .lc-dust i { animation: dust var(--d) linear var(--dl) infinite; }
@keyframes dust { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 18%, 78% { opacity: var(--o); } 100% { transform: translate3d(var(--dx), -150px, 0); opacity: 0; } }
.lc-grade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .52) 67%, rgba(0, 0, 0, .9) 100%),
  radial-gradient(130% 85% at 50% 38%, transparent 56%, rgba(0, 0, 0, .5) 100%); }
/* film grain */
.card.tk::after { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .11; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.card.tk.on::after { animation: grain .8s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } }

/* the big word: the line's strongest word, cut in three ways like the NENO shorts (across, vertical, outline) */
.kw { position: absolute; left: 0; right: 0; top: calc(var(--wy) * 100%); display: flex; justify-content: center; transform: translateY(-50%); font: 900 var(--ks, 120px) / .8 var(--x); font-stretch: var(--kx, 100%); letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--hot) 42%, transparent)); }
.kw i { font-style: normal; display: inline-block; padding: .05em 0; opacity: 0; color: transparent; background: linear-gradient(180deg, #fff 8%, color-mix(in srgb, var(--hot) 45%, #fff) 38%, var(--hot) 74%, color-mix(in srgb, var(--hot) 72%, #000) 100%); -webkit-background-clip: text; background-clip: text; }
.kw.in i { animation: kwIn .8s var(--ease) both; animation-delay: calc(var(--n) * 34ms); }
.kw.out i { opacity: 1; animation: kwOut .42s cubic-bezier(.5, 0, .9, .4) both; animation-delay: calc(var(--n) * 14ms); }
@keyframes kwIn { from { opacity: 0; transform: translateY(46%) scaleY(1.35); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes kwOut { to { opacity: 0; transform: translateY(-24%) scaleY(.9); filter: blur(8px); } }
.kw.hit { animation: kwHit .55s var(--spring); }
@keyframes kwHit { 30% { scale: 1.05; } }
.kw.v1 { right: auto; top: 46%; width: max-content; transform: translate(-50%, -50%) rotate(-90deg); }
.kw.v2 { top: calc(var(--wy) * 100% + 16%); justify-content: flex-start; padding-left: 6%; }
.kw.v2 i { background: none; -webkit-text-stroke: 2px color-mix(in srgb, var(--hot) 78%, #fff); }
.kw.front { opacity: .94; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55)); }
.kwm { position: absolute; left: -9999px; top: 0; visibility: hidden; font: 900 100px / 1 var(--x); letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; }

/* the sung line, word by word */
.card.tk .lyr { position: absolute; left: 20px; right: 84px; bottom: calc(var(--tab) + var(--bot) + 132px); }
.lyr .ln { font: 800 clamp(24px, 7.2vw, 31px) / 1.08 var(--x); font-stretch: 94%; letter-spacing: -.012em; text-wrap: balance; cursor: pointer; text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }
.lyr .ln .w { color: rgba(255, 255, 255, .4); transition: color .14s linear; }
.lyr .ln .w.sung { color: #fff; }
.lyr .ln .w.key.sung { color: color-mix(in srgb, var(--hot) 62%, #fff); text-shadow: 0 0 26px color-mix(in srgb, var(--hot) 75%, transparent); }
.lyr.swap .ln { animation: lnIn .5s var(--ease); }
@keyframes lnIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* title, artist, BACK */
.card.tk .meta { position: absolute; left: 20px; right: 92px; bottom: calc(var(--tab) + var(--bot) + 18px); display: grid; gap: 2px; justify-items: start; }
.meta .ttl { font: 800 17.5px / 1.2 var(--x); font-stretch: 104%; letter-spacing: -.004em; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.meta .by { display: flex; align-items: center; gap: 7px; max-width: 100%; font: 600 14px var(--f); color: rgba(255, 255, 255, .84); white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.meta .by b { font-weight: 650; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.meta .live { color: rgba(255, 255, 255, .62); font-weight: 550; }
.chg { font: 750 13px var(--f); }
.chg.up { color: var(--up); } .chg.down { color: var(--down); }
.flash-up { animation: fUp .9s ease; } .flash-down { animation: fDn .9s ease; }
@keyframes fUp { 20% { color: var(--up); } }
@keyframes fDn { 20% { color: var(--down); } }
.live { display: inline-flex; align-items: center; gap: 5px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
/* BACK: hold to put Vibes on a hook before it climbs */
.backchip { position: relative; margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 19px; isolation: isolate; background: rgba(14, 14, 20, .42); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17), 0 8px 26px -10px rgba(0, 0, 0, .7); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; transition: transform .25s var(--spring); }
.backchip .fill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hype); clip-path: inset(0 100% 0 0 round 19px); }
.backchip .coin { width: 26px; height: 26px; font-size: 26px; }
.backchip > b { font: 800 14px var(--f); letter-spacing: .005em; }
.backchip .px { display: inline-flex; align-items: baseline; gap: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2); }
.backchip .px b { font: 750 13.5px var(--f); }
.backchip .px .chg { font-size: 12.5px; }
.backchip.charging { transform: scale(.96); }
.backchip.done { animation: pop .5s var(--spring); }
.backchip .tip { position: absolute; left: 0; bottom: calc(100% + 10px); white-space: nowrap; padding: 7px 11px; border-radius: 10px; background: #fff; color: #000; font: 700 12px var(--f); opacity: 0; transform: translateY(6px); transition: .25s var(--ease); pointer-events: none; }
.backchip .tip.on { opacity: 1; transform: none; }
.charge { position: fixed; z-index: 85; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.7); display: grid; justify-items: center; pointer-events: none; opacity: 0; transition: opacity .18s, transform .3s var(--spring); }
.charge.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.charge b { font: 900 104px / 1 var(--x); font-stretch: 112%; letter-spacing: -.03em; background: linear-gradient(180deg, #fff6c4, #ffc94a 45%, #f08a12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 34px rgba(255, 170, 40, .55)); }
.charge span { font: 800 12px var(--f); letter-spacing: .34em; color: #fff; }

/* the progress line */
.card.tk .tbar { position: absolute; left: 0; right: 0; bottom: calc(var(--tab) + var(--bot)); height: 2px; background: rgba(255, 255, 255, .12); }
.card.tk .tbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--hot) 60%, #fff), #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--hot) 75%, transparent); }

/* actions: solid white glyphs like the best players, the avatar follows, the record spins */
.card.tk .rail { position: absolute; right: 4px; bottom: calc(var(--tab) + var(--bot) + 14px); width: 68px; display: grid; justify-items: center; gap: 12px; }
.rav { position: relative; width: 48px; height: 48px; margin-bottom: 12px; }
.rav img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff, 0 6px 18px rgba(0, 0, 0, .45); cursor: pointer; }
.rav .fol { position: absolute; left: 50%; bottom: -11px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--hype); box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.rav .fol svg { width: 13px; height: 13px; stroke-width: 3.2; }
.rav .fol.on { background: #fff; color: #111; animation: folGone .5s 1.1s var(--ease) forwards; }
@keyframes folGone { to { transform: scale(0); opacity: 0; } }
.act { display: grid; justify-items: center; gap: 2px; font: 700 12.5px var(--f); color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.act svg { width: 35px; height: 35px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); transition: transform .3s var(--spring); }
.act:active svg { transform: scale(.84); }
.act.liked svg { fill: url(#hypeGrad); }
.act.pop svg { animation: pop .45s var(--spring); }
@keyframes pop { 35% { transform: scale(1.3); } }
.disc { width: 48px; height: 48px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle, transparent 0 34%, rgba(255, 255, 255, .07) 35% 36%, transparent 37%), repeating-radial-gradient(circle, #1b1b20 0 1.3px, #09090b 1.3px 2.8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .55); }
.disc img { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; }
.card.on:not(.paused) .disc { animation: spin 6s linear infinite; }

.hint { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; font: 700 13px var(--f); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); pointer-events: none; animation: hint 1.4s ease-in-out 4, hintOut .4s 5.6s forwards; }
.hint svg { width: 30px; height: 30px; }
@keyframes hint { 50% { transform: translate(-50%, calc(-50% - 10px)); } }
@keyframes hintOut { to { opacity: 0; } }
.paused-badge { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: .2s var(--spring); pointer-events: none; }
.paused-badge svg { width: 70px; height: 70px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5)); opacity: .92; }
.card.paused .paused-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card.paused .lc > div { animation-play-state: paused; }

/* double tap: a gradient heart and sparks in the photo's light */
.burst { position: fixed; z-index: 90; pointer-events: none; width: 120px; height: 120px; margin: -60px 0 0 -60px; animation: burst .9s var(--ease) forwards; }
.burst svg { width: 100%; height: 100%; fill: url(#hypeGrad); filter: drop-shadow(0 8px 26px rgba(255, 45, 135, .55)); }
@keyframes burst { 0% { transform: scale(.2) rotate(var(--rot)); opacity: 0; } 25% { transform: scale(1.14) rotate(var(--rot)); opacity: 1; } 60% { transform: scale(1) rotate(var(--rot)); opacity: 1; } 100% { transform: scale(1.3) translateY(-80px) rotate(var(--rot)); opacity: 0; } }
.spark { position: fixed; z-index: 89; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: spark .8s var(--ease) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.coinfly { position: fixed; z-index: 95; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 34% 28%, #fff6c4 0 7%, #ffd65c 24%, #f6a823 60%, #c86a07 100%); box-shadow: 0 0 14px rgba(255, 168, 40, .8); }

/* desktop: the photo spills around the player as ambient light */
.amb { display: none; }

/* clash: the HOOKFIGHTS arena. Side A orange, side B blue, the split stays blind until you vote. */
.card.clash, .card.bk { display: flex; flex-direction: column; padding: calc(var(--top) + 60px) 16px calc(var(--tab) + var(--bot) + 12px); background: #060609; }
.arena-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.arena-bg .ba, .arena-bg .bb { position: absolute; top: -12%; bottom: 28%; width: 72%; background: center/cover no-repeat; filter: blur(30px) saturate(1.3) brightness(.72); opacity: .55; }
.arena-bg .ba { left: -18%; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 95%); mask-image: linear-gradient(90deg, #000 30%, transparent 95%); }
.arena-bg .bb { right: -18%; -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 95%); mask-image: linear-gradient(270deg, #000 30%, transparent 95%); }
.arena-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(80% 45% at 0% 0%, rgba(255, 74, 61, .2), transparent 62%), radial-gradient(80% 45% at 100% 0%, rgba(47, 123, 255, .2), transparent 62%), linear-gradient(180deg, rgba(6, 6, 9, .15), rgba(6, 6, 9, .72) 46%, #060609 74%); }
.arena-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 50% at 50% 35%, #000, transparent 80%); mask-image: radial-gradient(70% 50% at 50% 35%, #000, transparent 80%); }
.seam { position: absolute; z-index: -1; top: 0; bottom: 30%; left: 50%; width: 1px; transform: skewX(-10deg); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .26) 30%, rgba(255, 255, 255, .05) 85%, transparent); }

.chead { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; min-height: 24px; }
.tg { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font: 750 10px var(--x); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); white-space: nowrap; }
.tg.live { color: #fff; border-color: rgba(255, 74, 61, .5); background: rgba(255, 74, 61, .13); }
.tg.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ca); box-shadow: 0 0 8px var(--ca); animation: pulse 1.4s infinite; }
.tg.gold { color: var(--gold); border-color: rgba(244, 197, 92, .45); background: rgba(244, 197, 92, .1); }
.chead .go { margin-left: auto; display: inline-flex; align-items: center; gap: 1px; height: 28px; padding: 0 4px 0 10px; border-radius: 8px; font: 750 12.5px var(--f); color: var(--text2); }
.chead .go svg { width: 16px; height: 16px; }
.chead .demo { margin-left: auto; font: 500 10px var(--mono); color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }

/* the VS screen: full bleed, cut on a diagonal. Each side is the room tinted in its colour with the person cut out
   in full colour; the playing side lights up, the other side waits in the dark. */
.card.clash { padding-top: 0; }
.vs { position: relative; flex: 1 1 auto; min-height: 48%; margin: 0 -16px; container-type: size; isolation: isolate; background: #060609; }
.vs .corner { position: absolute; inset: 0; pointer-events: none; --c: var(--ca); --c2: var(--ca2); --cg: var(--cag); --cx: 30cqw; }
.vs .corner.b { --c: var(--cb); --c2: var(--cb2); --cg: var(--cbg); --cx: 70cqw; }
.vs-panel { position: absolute; inset: 0; overflow: hidden; pointer-events: auto; cursor: pointer; transition: filter .6s var(--ease); }
.corner.a .vs-panel { clip-path: polygon(0 0, 61% 0, 39% 100%, 0 100%); }
.corner.b .vs-panel { clip-path: polygon(61% 0, 100% 0, 100% 100%, 39% 100%); }
.vs-bg { position: absolute; inset: 0; background: center / cover no-repeat; filter: grayscale(1) contrast(1.3) brightness(1.25); transform: scale(1.1); }
.vs-tint { position: absolute; inset: 0; mix-blend-mode: multiply; background: linear-gradient(165deg, var(--c2), var(--c) 50%, color-mix(in srgb, var(--c) 55%, #000)); }
.vs-tint::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 30%, #050508); mix-blend-mode: screen; }
.vs-light { position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(48% 42% at var(--cx) 40%, color-mix(in srgb, var(--c) 46%, transparent), transparent 72%), radial-gradient(90% 30% at var(--cx) 100%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 70%); }
.card.on .corner.playing .vs-light { animation: stageLight 1.6s ease-in-out infinite alternate; }
@keyframes stageLight { to { opacity: .55; } }
.vs-fig { position: absolute; z-index: 1; bottom: 0; width: 106cqh; height: 106cqh; left: calc(var(--cx) - var(--ox) * 106cqh); background: center / cover no-repeat; transform-origin: 50% 100%; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .5)) drop-shadow(0 0 26px var(--cg)); }
.vs-panel::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6, 6, 9, .7) 0%, rgba(6, 6, 9, 0) 24%, rgba(6, 6, 9, 0) 52%, rgba(6, 6, 9, .55) 76%, #060609 100%); }
.vs:has(.corner.playing) .corner:not(.playing) .vs-panel { filter: brightness(.5) saturate(.45); }
.card.on .corner.a .vs-fig { animation: figInA .8s var(--ease) both; }
.card.on .corner.b .vs-fig { animation: figInB .8s var(--ease) both; }
.card.on .corner.playing .vs-fig { animation: figBreath 2.6s ease-in-out infinite; }
@keyframes figInA { from { opacity: 0; translate: -16cqw 0; } }
@keyframes figInB { from { opacity: 0; translate: 16cqw 0; } }
@keyframes figBreath { 50% { scale: 1.025; } }
.card.clash.voted .corner:not(.crowd) .vs-panel { filter: grayscale(.85) brightness(.42); }
.corner.crowd .vs-fig { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)) drop-shadow(0 0 34px var(--c)); }
.vs-seam { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vs-seam line { stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px rgba(190, 200, 255, .8)); }
.card.on .vs-seam { animation: seamIn .9s var(--ease) both; }
@keyframes seamIn { from { opacity: 0; } 40% { opacity: 1; } }

.card.clash .chead { position: absolute; z-index: 6; top: calc(var(--top) + 54px); left: 16px; right: 16px; margin: 0; }
.vs-info { position: absolute; z-index: 5; bottom: 10px; width: 47%; display: grid; gap: 6px; pointer-events: auto; cursor: pointer; }
.corner.a .vs-info { left: 16px; justify-items: start; text-align: left; }
.corner.b .vs-info { right: 16px; justify-items: end; text-align: right; }
.card.on .vs-info { animation: infoIn .6s .2s var(--ease) both; }
@keyframes infoIn { from { opacity: 0; transform: translateY(12px); } }
.slbl { display: flex; align-items: center; gap: 7px; height: 14px; font: 850 9.5px / 14px var(--x); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase; color: var(--c2); white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.corner.b .slbl { flex-direction: row-reverse; }
.slbl .bar { width: 16px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--c), var(--c2)); flex: none; }
.vs-row { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.corner.b .vs-row { flex-direction: row-reverse; }
.vs-tt { min-width: 0; }
.vs-tt h3 { font: 900 clamp(17px, 5vw, 22px) / .96 var(--x); font-stretch: 116%; text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.vs-tt .art { display: block; margin-top: 4px; font: 600 12px var(--f); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cplay { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: #0a0a0a; box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .6); transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.cplay svg { width: 17px; height: 17px; }
.cplay .eq { display: none; }
.corner.playing .cplay { background: linear-gradient(135deg, var(--c2), var(--c)); color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 10px 40px -4px var(--cg); }
.corner.playing .cplay svg { display: none; }
.corner.playing .cplay .eq { display: inline-flex; }
.eq { gap: 2px; align-items: flex-end; width: 16px; height: 14px; }
.eq i { width: 3px; border-radius: 1px; background: currentColor; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.hwave { width: 100%; height: 18px; display: flex; align-items: center; gap: 2px; }
.corner.b .hwave { flex-direction: row-reverse; }
.hwave i { flex: 1; min-width: 0; border-radius: 2px; background: rgba(255, 255, 255, .22); transition: background .12s linear; }
.hwave i.on { background: linear-gradient(180deg, var(--c2), var(--c)); }

.vsring { position: absolute; z-index: 5; left: 50%; top: 47%; width: 96px; height: 96px; margin: -48px 0 0 -48px; display: grid; place-items: center; pointer-events: none; }
.vsring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(10, 10, 14, .94) 70%); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 20px 60px -16px #000, 0 0 40px rgba(255, 255, 255, .12); }
.vsring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vsring .trk { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.vsring .ra { fill: none; stroke: url(#gA); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray 1.1s var(--ease); filter: drop-shadow(0 0 6px var(--cag)); }
.vsring .rb { fill: none; stroke: url(#gB); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray 1.1s var(--ease), stroke-dashoffset 1.1s var(--ease); filter: drop-shadow(0 0 6px var(--cbg)); }
.vsring span { position: relative; font: italic 900 32px/1 var(--x); font-stretch: 125%; letter-spacing: -.04em; padding-right: 3px; background: linear-gradient(110deg, #fff 30%, #c9c6d2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.on .vsring { animation: slam .65s var(--ease) both; }
@keyframes slam { 0% { transform: scale(1.7); opacity: 0; filter: blur(8px); } 60% { transform: scale(.94); opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }

.cangle { margin-top: 16px; text-align: center; font: 880 22px/1 var(--x); font-stretch: 116%; text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
.cangle .ca { color: #ff7a5c; } .cangle .cb { color: #6fb2ff; }
.ckeys { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ckeys span { height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); font: 500 10.5px var(--mono); color: var(--text2); white-space: nowrap; }

.votes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.vote { position: relative; overflow: hidden; height: 56px; border-radius: 14px; display: grid; align-content: center; justify-items: center; padding: 0 10px; color: #fff; background: linear-gradient(110deg, var(--c), var(--c2)); box-shadow: 0 14px 40px -14px var(--cg), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .18s var(--ease), box-shadow .25s, filter .25s, opacity .3s; --c: var(--ca); --c2: var(--ca2); --cg: var(--cag); }
.vote.b { --c: var(--cb); --c2: var(--cb2); --cg: var(--cbg); }
.vote::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); }
.vote.open::after { animation: shine .9s var(--ease) .1s; }
@keyframes shine { to { left: 120%; } }
.vote:active { transform: scale(.98); }
.vote .vt { display: flex; align-items: center; gap: 6px; font: 900 14.5px/1 var(--x); font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; }
.vote .vt svg { width: 14px; height: 14px; stroke-width: 2.4; }
.vote .vsub { margin-top: 4px; max-width: 100%; font: 600 10.5px var(--f); opacity: .86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote.gated { filter: saturate(.3) brightness(.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.vote.mine { box-shadow: 0 0 0 2px #fff, 0 20px 60px -10px var(--cg); }
.vote.dim { opacity: .35; filter: grayscale(.6); }
.vote[disabled] { cursor: default; }

.tally { position: relative; margin-top: 12px; padding: 12px 14px 12px; border-radius: 16px; background: rgba(12, 12, 18, .72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.thead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; margin-bottom: 10px; }
.thead .sb { text-align: right; }
.pct { font: 900 30px/1 var(--x); font-stretch: 118%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pct small { font-size: .45em; font-weight: 800; margin-left: 1px; }
.thead .sa .pct { color: #ff7a5c; } .thead .sb .pct { color: #6fb2ff; }
.vcount { margin-top: 3px; font: 500 10.5px var(--mono); color: var(--muted); }
.tmid { padding-bottom: 4px; font: 650 9.5px var(--x); font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.xf { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); --s: 50; }
.xf-a, .xf-b { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: width 1.1s var(--ease); }
.xf-a { left: 0; width: calc(var(--s) * 1% - 3px); background: linear-gradient(90deg, #b8241b, var(--ca), var(--ca2)); box-shadow: 0 0 24px -4px var(--cag); }
.xf-b { right: 0; width: calc((100 - var(--s)) * 1% - 3px); background: linear-gradient(90deg, var(--cb2), var(--cb), #173f99); box-shadow: 0 0 24px -4px var(--cbg); }
.xf-knob { position: absolute; top: 50%; left: calc(var(--s) * 1%); width: 26px; height: 32px; transform: translate(-50%, -50%); border-radius: 8px; background: linear-gradient(180deg, #fafafa, #c9c9cf); box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .7), inset 0 -2px 0 rgba(0, 0, 0, .15); display: grid; place-items: center; transition: left 1.1s var(--ease); }
.xf-knob i { display: block; width: 12px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .35); box-shadow: 0 -5px 0 rgba(0, 0, 0, .25), 0 5px 0 rgba(0, 0, 0, .25); }
.tfoot { margin-top: 16px; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 12px var(--f); color: var(--muted); }
.tfoot .gate { display: inline-flex; align-items: center; gap: 6px; }
.tfoot .gate i { font: 700 10.5px var(--mono); font-style: normal; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line2); color: var(--muted); }
.tfoot .gate i.ok { color: var(--volt); border-color: rgba(214, 255, 61, .45); }
.tfoot .rw { font: 750 13px var(--f); color: var(--text); }
.tfoot .rw.hot { color: var(--volt); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; gap: 4px; }
.btn.sm svg { width: 16px; height: 16px; }
.tally.locked .thead, .tally.locked .xf { filter: blur(7px); opacity: .45; user-select: none; }
.lockcta { position: absolute; inset: 0 0 44px 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.lockcta b { display: flex; align-items: center; gap: 7px; font: 850 13px var(--x); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; }
.lockcta b svg { width: 17px; height: 17px; color: var(--volt); stroke-width: 2.2; }
.lockcta span { font-size: 11.5px; color: var(--text2); }
.crownfly { position: fixed; z-index: 96; left: 50%; top: 42%; width: 150px; height: 150px; margin: -75px 0 0 -75px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(244, 197, 92, .32), rgba(244, 197, 92, .08) 55%, transparent 70%); pointer-events: none; color: var(--gold); animation: crownIn 2.2s var(--ease) forwards; }
.crownfly svg { width: 84px; height: 84px; stroke-width: 1.15; filter: drop-shadow(0 0 18px rgba(244, 197, 92, .9)); }
@keyframes crownIn { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 25% { transform: scale(1.1) rotate(4deg); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15) translateY(-90px); opacity: 0; } }

/* weekly bracket (first card of the Clash tab) */
.bk h2 { font: 900 36px/.9 var(--x); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.025em; }
.bk .bks { margin-top: 8px; font: 600 13.5px var(--f); color: var(--text2); }
.bkw { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 14px; display: grid; align-content: center; }
.bkt { display: block; width: 100%; height: auto; overflow: visible; }
.bkt .ln { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.bkt .ln.won { stroke: url(#bgrad); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(214, 255, 61, .4)); }
.bkt .tbd { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .18); stroke-dasharray: 3 3; }
.bkt .q { font: 800 15px var(--x); fill: rgba(255, 255, 255, .3); text-anchor: middle; }
.bkt .cov.lost { opacity: .3; }
.bkt .sd { fill: rgba(0, 0, 0, .78); stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.bkt .sdt { font: 700 8.5px var(--mono); fill: #fff; text-anchor: middle; }
.bkt .mine { fill: none; stroke: #fff; stroke-width: 2; }
.bkt .lv { fill: none; stroke: var(--ca); stroke-width: 1.6; animation: lv 1.6s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(255, 74, 61, .7)); }
@keyframes lv { 50% { stroke-opacity: .35; } }
.bkt .gold { fill: none; stroke: var(--gold); stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(244, 197, 92, .7)); }
.bkt .rl { font: 700 8px var(--x); font-stretch: 112%; letter-spacing: .16em; fill: rgba(255, 255, 255, .4); text-anchor: middle; }
.bkt .cl { font: 750 7.5px var(--x); font-stretch: 112%; letter-spacing: .18em; fill: var(--gold); text-anchor: middle; }
.bkt .ct { font: 800 12px var(--x); font-stretch: 105%; fill: #fff; text-anchor: middle; }
.bkt .bm { cursor: pointer; }
.bkt .trophy circle { fill: rgba(244, 197, 92, .05); stroke: rgba(244, 197, 92, .28); stroke-width: 1; stroke-dasharray: 2 4; }
.bkt .trophy use { fill: none; stroke: rgba(244, 197, 92, .55); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bkt .trophy.won circle { fill: rgba(244, 197, 92, .14); stroke: rgba(244, 197, 92, .6); stroke-dasharray: none; filter: drop-shadow(0 0 14px rgba(244, 197, 92, .45)); }
.bkt .trophy.won use { stroke: var(--gold); stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(244, 197, 92, .8)); }
.bkcta { position: relative; margin-top: 14px; display: grid; justify-items: center; gap: 2px; font: 700 12.5px var(--f); color: var(--muted); pointer-events: none; animation: nudgeUp 1.6s ease-in-out infinite; }
@keyframes nudgeUp { 50% { transform: translateY(-6px); } }
.bkcta svg { width: 22px; height: 22px; }
.nw { white-space: nowrap; }
.bkl { display: grid; gap: 8px; margin-top: 14px; }
.bmr { display: grid; grid-template-columns: 50px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); text-align: left; }
.bmr.live { border-color: rgba(255, 74, 61, .45); box-shadow: 0 10px 34px -18px var(--cag); }
.bmr .rd { font: 700 10px var(--mono); color: var(--muted); }
.bmr .cvs { position: relative; width: 52px; height: 34px; }
.bmr .cvs img, .bmr .cvs i { position: absolute; top: 0; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--s3); box-shadow: 0 0 0 2px #0b0b10; }
.bmr .cvs > :first-child { left: 0; } .bmr .cvs > :last-child { left: 18px; }
.bmr .tt { min-width: 0; display: grid; }
.bmr .tt b { font: 700 13px/1.25 var(--f); color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmr .tt b.w { color: #fff; }
.bmr .tt b.w::after { content: " ✓"; color: var(--volt); }
.bmr .st { font: 850 10.5px var(--x); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bmr .st.go { padding: 7px 11px; border-radius: 8px; color: #fff; background: linear-gradient(110deg, var(--ca), var(--ca2)); box-shadow: 0 8px 24px -10px var(--cag); }
.bmr .st.done { font: 700 11.5px var(--mono); letter-spacing: 0; color: var(--volt); }
.bkc { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 12px; border-radius: 18px; border: 1px solid rgba(244, 197, 92, .35); background: radial-gradient(120% 90% at 0% 0%, rgba(244, 197, 92, .14), transparent 60%), rgba(255, 255, 255, .03); }
.bkc img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; box-shadow: 0 16px 40px -16px rgba(244, 197, 92, .6); }
.bkc div { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.bkc b { font: 880 22px/1 var(--x); font-stretch: 116%; text-transform: uppercase; letter-spacing: -.02em; }
.bkc span:last-child { font-size: 12.5px; color: var(--muted); }
.bk .btnrow { margin-top: 12px; }
.bk .btnrow .btn { flex: 1; }

@media (max-height: 760px) {
  .card.clash .ckeys { display: none; }
  .vs { min-height: 42%; }
  .card.clash .cangle { margin-top: 10px; font-size: 18px; }
  .vs-tt h3 { font-size: 16px; }
  .vs-info .hwave, .vs-tt .art { display: none; }
  .card.clash .votes { margin-top: 10px; }
  .card.clash .vote { height: 50px; }
  .card.clash .tally { margin-top: 10px; padding: 10px 12px; }
  .card.clash .pct { font-size: 24px; }
  .card.clash .tfoot { margin-top: 12px; }
  .bk .bks { display: none; }
  .bk h2 { font-size: 30px; }
  .bmr { padding: 6px 10px; }
}

/* empty tab */
.card.empty { display: grid; place-items: center; text-align: center; padding: 0 30px; }
.card.empty h3 { font: 900 34px/1 var(--d); letter-spacing: -.02em; margin-bottom: 10px; }
.card.empty p { color: var(--muted); margin-bottom: 20px; }

/* ------------------------------------------------------------------ sheets */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 84vh; display: flex; flex-direction: column; background: #121216; border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + var(--bot)); transform: translateY(105%); transition: transform .42s var(--spring); }
.sheet.on { transform: none; }
.sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin: 2px auto 14px; flex: none; }
.sheet h4 { font: 800 18px var(--d); text-align: center; }
.sheet .sub { color: var(--muted); font-size: 13px; text-align: center; margin: 2px 0 14px; }
.sheet .body { overflow-y: auto; flex: 1; }
.cmt { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 9px 0; }
.av { display: grid; place-items: center; border-radius: 50%; font: 800 13px var(--d); flex: none; }
.cmt b { font: 600 12.5px var(--f); color: var(--muted); }
.cmt p { font-size: 14.5px; }
.cmt q { display: block; margin: 3px 0; font: 700 14px var(--d); color: #fff; quotes: "“" "”"; }
.cmt q::before { content: open-quote; } .cmt q::after { content: close-quote; }
.cmt .lk { font-size: 11.5px; color: var(--muted); display: grid; justify-items: center; }
.cmt .lk svg { width: 18px; height: 18px; }
.compose { display: flex; gap: 8px; margin-top: 10px; }
.compose input { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--s3); padding: 0 16px; }
.compose input:focus { outline: none; }
.compose button { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gift { display: grid; justify-items: center; gap: 0; padding: 4px 4px 12px; border-radius: 16px; background: var(--s2); transition: transform .25s var(--spring), background .2s; }
.gift:active { transform: scale(.93); }
.gift img { width: 92px; height: 92px; }
.gift b { font: 750 13px var(--f); }
.gift span { font: 650 12px var(--f); color: var(--muted); }
.gift[disabled] { opacity: .35; }
.giftfly { position: fixed; z-index: 96; width: 160px; height: 160px; margin: -80px 0 0 -80px; pointer-events: none; }
.shareprev { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 14px; margin: 0 0 12px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 12px; font: 750 15px var(--f); background: var(--s3); }
.btn.white { background: #fff; color: #000; }
.btn.hot { background: var(--hype); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .4; }
.seg { display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
.seg button { position: relative; white-space: nowrap; padding: 10px 0 12px; font: 700 15px var(--d); color: var(--muted); }
.seg button.on { color: #fff; }
.seg button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff; }

/* toasts */
.toasts { position: fixed; z-index: 99; left: 50%; top: calc(var(--top) + 56px); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 400px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(24, 24, 30, .97); box-shadow: 0 16px 50px -12px rgba(0, 0, 0, .9); font: 600 14px/1.3 var(--f); animation: tIn .45s var(--spring); }
.toast b { font-weight: 800; }
.toast img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.toast .tk { width: 42px; height: 42px; }
@keyframes tIn { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
.toast.out { animation: tOut .3s var(--ease) forwards; }
@keyframes tOut { to { transform: translateY(-10px); opacity: 0; } }

/* ------------------------------------------------------------------ pages */
.ph1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 18px; }
.ph1 h1 { font: 900 34px/1 var(--d); letter-spacing: -.03em; }
.big { font: 900 64px/.9 var(--d); letter-spacing: -.04em; }
.stats { display: flex; gap: 26px; margin: 12px 0 22px; }
.stats div { display: grid; gap: 2px; }
.stats b { font: 800 19px var(--d); }
.mrow { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; cursor: pointer; }
.mrow .rk { font: 750 14px var(--d); color: var(--muted); text-align: center; }
.mrow img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.mrow .t { min-width: 0; }
.mrow .t b { display: block; font: 700 15px/1.25 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .t span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .v { display: grid; justify-items: end; gap: 1px; }
.mrow .v b { font: 800 16px var(--d); }
.mrow .sp { width: 54px; height: 22px; }
.mrow .mid { display: flex; align-items: center; gap: 12px; }
.mult { font: 900 16px var(--d); }
.mini { height: 32px; padding: 0 12px; border-radius: 9px; font: 750 12.5px var(--f); background: #fff; color: #000; }
.lead { display: grid; grid-template-columns: 22px 38px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; }
.lead .rk { font: 750 14px var(--d); color: var(--muted); text-align: center; }
.lead .match { font: 650 12.5px var(--f); color: var(--muted); }
.lead.me b { color: var(--pink); }
.h2 { font: 850 20px var(--d); letter-spacing: -.01em; margin: 28px 0 10px; display: flex; justify-content: space-between; align-items: baseline; }
.h2 span { font: 600 13px var(--f); color: var(--muted); }

/* profile */
.ptop { display: grid; justify-items: center; gap: 8px; text-align: center; margin: 8px 0 4px; }
.ptop .av { width: 88px; height: 88px; font-size: 34px; }
.ptop h1 { font: 900 28px/1 var(--d); letter-spacing: -.02em; outline: none; }
.ptop .h { color: var(--muted); font-size: 14px; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin: 14px 0 6px; }
.pstats b { display: block; font: 850 20px var(--d); }
.pstats span { font-size: 12px; color: var(--muted); }
.dna { display: grid; justify-items: center; gap: 4px; margin: 10px 0; }
.dna .dna-art { width: min(100%, 330px); height: auto; display: block; }
.dna .dna-art path.live { transform-box: fill-box; transform-origin: center; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04) rotate(2deg); } }
.dna .arch { text-align: center; font: 900 30px/1 var(--d); letter-spacing: -.02em; }
.dna .arch small { display: block; font: 600 14px var(--f); color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.badge { display: grid; justify-items: center; text-align: center; }
.badge img { width: 70px; height: 70px; }
.badge b { font: 650 11.5px/1.2 var(--f); color: var(--text2); }
.badge.locked { opacity: .25; filter: grayscale(1); }
.receipts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rcpt { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5; background: var(--s2); cursor: pointer; }
.rcpt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.rcpt .in { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.rcpt .x { font: 900 38px/1 var(--d); background: var(--hype); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rcpt b { font: 800 14px/1.2 var(--d); }
.rcpt span { font-size: 11.5px; color: var(--text2); }
.empty { padding: 22px 0; color: var(--muted); }
.mis { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mis b { font: 650 15px var(--f); }
.mis b span { color: var(--muted); font-weight: 500; }
.mis .pb { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mis .pb i { display: block; height: 100%; background: #fff; border-radius: 4px; transition: width .6s var(--spring); }
.mis .rw { font: 800 14px var(--d); }
.mis.done .rw { color: var(--up); }
.mis.done .pb i { background: var(--up); }

/* drop */
.dz { display: grid; place-items: center; gap: 6px; min-height: 62vh; border-radius: 24px; background: radial-gradient(70% 50% at 50% 42%, rgba(255, 45, 135, .16), transparent 70%), var(--s1); text-align: center; cursor: pointer; padding: 20px; }
.dz.over { background: radial-gradient(70% 50% at 50% 42%, rgba(255, 45, 135, .32), transparent 70%), var(--s2); }
.dz img { width: 170px; height: 170px; }
.dz b { font: 900 30px/1 var(--d); letter-spacing: -.02em; }
.dz span { color: var(--muted); font-size: 14px; }
.wave-box { position: relative; height: 92px; border-radius: 14px; background: var(--s1); overflow: hidden; touch-action: none; margin: 8px 0 10px; }
.wave-box canvas { width: 100%; height: 100%; display: block; }
.wave-box .win { position: absolute; top: 0; bottom: 0; border-radius: 10px; border: 2px solid #fff; background: rgba(255, 255, 255, .08); cursor: grab; }
.wave-box .phd { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.fld { display: grid; gap: 6px; margin-top: 14px; }
.fld > span { font: 650 12px var(--f); color: var(--muted); }
.fld input { height: 50px; border-radius: 12px; border: 0; background: var(--s2); padding: 0 14px; font-size: 16px; }
.fld input:focus { outline: 2px solid rgba(255, 255, 255, .25); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { padding: 9px 13px; border-radius: 99px; background: var(--s2); font: 650 13.5px var(--f); }
.chip.on { background: #fff; color: #000; }
.chk { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--text2); font-size: 14px; margin-top: 12px; }
.chk input { width: 20px; height: 20px; margin-top: 1px; accent-color: #fff; }
.cover-pick { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.cover-pick .im { width: 72px; height: 72px; border-radius: 12px; background: var(--s2) center/cover; }
.scan { display: flex; align-items: center; gap: 12px; padding: 14px 0; font: 650 14px var(--f); color: var(--text2); }
.scan .ring2 { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin .8s linear infinite; flex: none; }
.scan.ok .ring2 { animation: none; border-color: var(--up); background: var(--up); }
.preview-card { position: relative; height: 64vh; min-height: 460px; border-radius: 22px; overflow: hidden; }
.preview-card .card { height: 100%; --tab: 0px; }
.preview-card .card .rail, .preview-card .card .back, .preview-card .card .hint { display: none; }

/* ------------------------------------------------------------------ onboarding */
.onb { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; overflow: hidden; transition: opacity .5s var(--ease); }
.onb.out { opacity: 0; pointer-events: none; }
.onb .in { position: relative; align-self: end; width: min(92vw, 440px); display: grid; gap: 16px; justify-items: start; padding: 0 0 calc(40px + var(--bot)); }
.onb .center { align-self: center; justify-items: center; text-align: center; padding: 0; }
.onb .logo3d { width: 92px; height: 92px; margin-bottom: -6px; }
.onb h1 { font: 900 clamp(48px, 14vw, 76px)/.9 var(--d); letter-spacing: -.045em; }
.onb p { color: var(--text2); font-size: 17px; max-width: 30ch; }
.onb .btn { height: 56px; padding: 0 28px; font-size: 17px; border-radius: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }
.speed { position: relative; width: min(84vw, 360px); aspect-ratio: 3 / 4; }
.scard { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: var(--s1); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); touch-action: none; transition: transform .45s var(--ease), opacity .45s; }
.scard img { width: 100%; height: 100%; object-fit: cover; }
.scard .sh { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85)); }
.scard .tx { position: absolute; left: 18px; right: 18px; bottom: 18px; text-align: left; }
.scard .tx q { display: block; font: 800 22px/1.15 var(--d); letter-spacing: -.01em; quotes: "“" "”"; margin-bottom: 8px; }
.scard .tx q::before { content: open-quote; } .scard .tx q::after { content: close-quote; }
.scard .tx span { color: var(--text2); font-size: 14px; }
.scard .stamp { position: absolute; top: 22px; padding: 6px 12px; border: 3px solid; border-radius: 10px; font: 900 24px var(--d); letter-spacing: .06em; opacity: 0; }
.scard .stamp.love { left: 18px; color: var(--up); transform: rotate(-10deg); }
.scard .stamp.nope { right: 18px; color: var(--down); transform: rotate(10deg); }
.scard .tb { position: absolute; left: 14px; right: 14px; top: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.scard .tb i { display: block; height: 100%; width: 0; background: #fff; }
.speed-btns { display: flex; gap: 26px; justify-content: center; }
.speed-btns button { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); transition: transform .25s var(--spring); }
.speed-btns button:active { transform: scale(.86); }
.speed-btns .love { background: #fff; color: var(--pink); }
.speed-btns svg { width: 28px; height: 28px; }
.dots { display: flex; gap: 4px; }
.dots i { width: 26px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.dots i.on { background: #fff; }

/* ------------------------------------------------------------------ small shell bits */
.tapstart { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(5, 5, 7, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tapstart span { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: #000; box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .8); }
.tapstart svg { width: 34px; height: 34px; margin-left: 4px; }
.vhead { display: grid; justify-items: center; gap: 4px; text-align: center; margin-bottom: 8px; }
.vhead .coin { width: 44px; height: 44px; font-size: 44px; margin-bottom: 6px; }
.vhead h4 { font: 900 28px var(--d); letter-spacing: -.02em; }
.vhead span { color: var(--muted); font-size: 13.5px; }
.earn { display: grid; margin-top: 10px; }
.earn span { display: flex; align-items: center; gap: 10px; padding: 11px 0; font: 600 14px var(--f); color: var(--text2); border-bottom: 1px solid var(--line); }
.earn span:last-child { border: 0; }
.earn svg { width: 18px; height: 18px; color: var(--muted); }
.earn b { margin-left: auto; font: 800 14px var(--d); color: #fff; }
.nrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.nrow .ni { width: 40px; height: 40px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; }
.nrow .ni svg { width: 19px; height: 19px; }
.nrow b { font: 600 14.5px/1.3 var(--f); }
.nrow > span:last-child { font-size: 12px; color: var(--muted); }
.dz .dzi { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; margin-bottom: 10px; box-shadow: -4px 0 0 var(--cyan), 4px 0 0 var(--pink); }
.dz .dzi svg { width: 34px; height: 34px; stroke-width: 2.4; }
.cmt-q { display: block; margin-top: 8px; padding: 6px 10px; border-left: 3px solid #fff; font: 700 13px var(--d); }
.ahead { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.ahead img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ahead h4 { text-align: left; }
.ahead span { font-size: 13px; color: var(--muted); }
.mrow .rk svg { width: 18px; height: 18px; }
.onb .gain { font: 900 22px var(--d); background: var(--hype); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel .stats { gap: 22px; }
.panel h3 .tag { cursor: pointer; }

/* ------------------------------------------------------------------ v3 pages: the living cover outside the feed */
.lcm { position: relative; overflow: hidden; background: #0a0a0d; container-type: size; }
.lcm > div { position: absolute; inset: 0; background: center / cover no-repeat; }
.lcm-bg { filter: brightness(.86) saturate(1.15) contrast(1.05); }
.lcm-kw span { position: absolute; left: 0; right: 0; top: calc(var(--wy) * 100%); transform: translateY(-50%); text-align: center; font-weight: 900; line-height: .8; font-family: var(--x); font-stretch: 70%; letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; color: transparent; background: linear-gradient(180deg, #fff 8%, color-mix(in srgb, var(--hot) 45%, #fff) 38%, var(--hot) 74%, color-mix(in srgb, var(--hot) 72%, #000)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--hot) 40%, transparent)); }
.lcm.brand .lcm-kw span { font-stretch: 75%; background-image: linear-gradient(100deg, #6ff0ff 0%, #22e1ff 18%, #7c5cff 50%, #ff2d87 82%, #ff8a3d 100%); filter: drop-shadow(0 0 26px rgba(124, 92, 255, .55)); }

/* onboarding: the product is the first screen */
.ohero { position: absolute; inset: 0; }
.oslide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.oslide.on { opacity: 1; }
.oslide .lcm { position: absolute; inset: 0; }
.oslide.on .lcm-bg { animation: pushBg 9s ease-out both; }
.oslide.on .lcm-sub { animation: pushSub 9s ease-out both; }
.oslide.on .lcm-kw span { animation: kwIn 1s var(--ease) .25s both; }
.lcm.brand .lcm-ghost span { background-image: none; -webkit-text-stroke: 1.6px rgba(255, 255, 255, .8); filter: drop-shadow(0 0 10px rgba(124, 92, 255, .75)); }
.onb .in p { max-width: 34ch; font-size: 16.5px; line-height: 1.4; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.ofeat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.ofeat span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 15px; font: 650 12.5px var(--f); color: #fff; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ofeat svg { width: 14px; height: 14px; }
.onb .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7) 66%, #000 92%); }
.onb .in h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }

/* Speed Taste cards use the living cover too */
.scard .lcm { position: absolute; inset: 0; }

/* market */
.earcard { position: relative; overflow: hidden; padding: 16px 16px 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(49, 229, 154, .1), rgba(255, 255, 255, .02) 55%), var(--s1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.earcard .earchart { position: absolute; right: 0; top: 22px; width: 52%; height: 52%; opacity: .95; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.earcard .big { position: relative; margin: 2px 0 4px; font-stretch: 105%; }
.earcard > .chg { position: relative; font-size: 13px; }
.earcard .stats { position: relative; margin: 16px 0 0; }
.movers { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px 6px; padding: 2px 18px 8px; scrollbar-width: none; }
.movers::-webkit-scrollbar { display: none; }
.mv { position: relative; flex: none; width: 144px; height: 192px; border-radius: 18px; overflow: hidden; scroll-snap-align: start; text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mv .lcm { position: absolute; inset: 0; }
.mv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 48%, rgba(0, 0, 0, .9)); }
.mv-rk { position: absolute; z-index: 1; top: 9px; left: 10px; font: 900 22px / 1 var(--x); font-stretch: 112%; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.mv-tx { position: absolute; z-index: 1; left: 11px; right: 10px; bottom: 10px; display: grid; gap: 1px; }
.mv-tx b { font: 900 22px / 1 var(--x); font-stretch: 105%; color: var(--up); text-shadow: 0 0 18px rgba(49, 229, 154, .35); }
.mv-tx span { font: 650 12.5px / 1.25 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { gap: 6px; border: 0; padding: 4px; margin: 14px 0 6px; border-radius: 14px; background: var(--s1); }
.seg button { flex: 1; padding: 9px 10px; border-radius: 10px; font: 700 13.5px var(--f); }
.seg button.on { background: var(--s3); }
.seg button.on::after { display: none; }
.mrow { grid-template-columns: 22px 48px minmax(0, 1fr) auto; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mrow img { width: 48px; height: 48px; border-radius: 12px; }
.mrow .v .chg { padding: 2px 6px; border-radius: 6px; font-size: 12px; background: rgba(49, 229, 154, .12); }
.mrow .v .chg.down { background: rgba(255, 84, 112, .12); }
.lead { border-bottom: 1px solid var(--line); }

/* profile */
.phero { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; margin: -6px -18px 0; padding: 26px 18px 18px; overflow: hidden; isolation: isolate; }
.phero::before { content: ""; position: absolute; inset: -30% -10% 0; z-index: -1; background: radial-gradient(40% 50% at 25% 30%, color-mix(in srgb, var(--d1) 55%, transparent), transparent 70%), radial-gradient(45% 55% at 78% 25%, color-mix(in srgb, var(--d2) 55%, transparent), transparent 70%), radial-gradient(50% 50% at 50% 80%, color-mix(in srgb, var(--d3) 35%, transparent), transparent 70%); filter: blur(30px); opacity: .7; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, var(--bg)); }
.pav { width: 96px; height: 96px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--d1), var(--d2), var(--d3)); box-shadow: 0 16px 50px -12px color-mix(in srgb, var(--d2) 70%, transparent); }
.pav span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #0c0c10; font: 900 40px / 1 var(--x); font-stretch: 110%; }
.phero h1 { margin-top: 6px; font: 900 30px / 1 var(--x); font-stretch: 108%; letter-spacing: -.02em; outline: none; }
.phero .h { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 99px; background: rgba(255, 170, 40, .14); color: #ffc15a; font: 750 12.5px var(--f); }
.streak svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.phero .pstats { width: 100%; margin: 14px 0 0; padding: 12px 6px; border-radius: 18px; background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.card2 { margin: 16px 0 0; padding: 18px 14px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dna .dna-art .s1, .dna .dna-art .s2, .dna .dna-art .s3 { transform-box: view-box; transform-origin: 50% 50%; }
.dna .dna-art .s1 { animation: dnaSpin 46s linear infinite; }
.dna .dna-art .s2 { animation: dnaSpin 30s linear infinite reverse; }
.dna .dna-art .s3 { animation: dnaSpin 22s linear infinite; }
@keyframes dnaSpin { to { transform: rotate(360deg); } }
.mis { padding: 13px 14px; margin-top: 8px; border: 0; border-radius: 16px; background: var(--s1); }
.mis .pb i { background: linear-gradient(90deg, #ffd65c, #ff8a3d); }

/* inbox */
.h2.first { margin-top: 4px; }
.nrow { border: 0; padding: 10px 0; }
.nrow .ni { background: linear-gradient(135deg, #7c5cff, #22e1ff); color: #fff; box-shadow: 0 8px 22px -10px rgba(124, 92, 255, .9); }
.nrow.k-vibes .ni, .nrow.k-streak .ni { background: radial-gradient(circle at 34% 28%, #fff6c4 0 7%, #ffd65c 24%, #f6a823 60%, #c86a07 100%); color: #6b3500; box-shadow: 0 8px 22px -10px rgba(255, 168, 40, .9); }
.nrow.k-clash .ni { background: linear-gradient(135deg, var(--ca), var(--cb)); }
.nrow.k-bracket .ni { background: linear-gradient(135deg, #ffe08a, #f4c55c 50%, #b9822a); color: #3d2600; }
.nrow.k-called .ni, .nrow.k-boost .ni, .nrow.k-drop .ni { background: var(--hype); }
.nrow .ni svg { fill: none; }
.big-empty { display: grid; justify-items: center; gap: 6px; padding: 80px 0; text-align: center; }
.big-empty svg { width: 42px; height: 42px; color: var(--faint); margin-bottom: 6px; }
.big-empty b { font: 800 20px var(--x); color: #fff; }

/* drop */
.dz { min-height: 0; padding: 38px 20px 30px; border-radius: 28px; gap: 8px; isolation: isolate; overflow: hidden; background: radial-gradient(70% 60% at 50% 30%, rgba(124, 92, 255, .22), transparent 70%), var(--s1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.dz.over { background: radial-gradient(70% 60% at 50% 30%, rgba(255, 45, 135, .32), transparent 70%), var(--s2); }
.dz b { margin-top: 10px; font: 900 32px / 1 var(--x); font-stretch: 108%; }
.dz .fmt { margin-top: 6px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--faint); }
.orb { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; background: linear-gradient(var(--s1), var(--s1)) padding-box, linear-gradient(120deg, #22e1ff, #7c5cff, #ff2d87) border-box; opacity: .55; animation: orb 3.2s ease-out infinite; }
.orb i:nth-child(2) { animation-delay: -1.06s; } .orb i:nth-child(3) { animation-delay: -2.13s; }
@keyframes orb { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
.dz .dzi { position: relative; width: 84px; height: 84px; margin: 0; background: linear-gradient(120deg, #22e1ff, #7c5cff 45%, #ff2d87); color: #fff; box-shadow: 0 18px 50px -12px rgba(124, 92, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.steps div { display: grid; gap: 2px; padding: 14px 12px; border-radius: 18px; background: var(--s1); }
.steps i { width: 24px; height: 24px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--f); font-style: normal; background: rgba(255, 255, 255, .1); }
.steps b { font: 800 14px var(--x); }
.steps span { font-size: 12px; color: var(--muted); }

/* sheets and toasts: glass */
.sheet { background: rgba(18, 18, 24, .92); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 -30px 80px -20px rgba(0, 0, 0, .8); }
.toast { background: rgba(26, 26, 34, .86); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 50px -12px rgba(0, 0, 0, .9); }
.cmt .av { box-shadow: 0 0 0 2px #121218, 0 0 0 3.5px rgba(255, 255, 255, .14); }

/* Ear Score v2 */
.ebig { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font: 800 11px var(--x); font-stretch: 110%; letter-spacing: .06em; text-transform: uppercase; color: #ffd65c; background: rgba(255, 196, 70, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 70, .3); }
.earcard .stats { gap: 20px; }
.calls { display: grid; }
.crow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.crow img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.crow .t b { display: block; font: 700 14.5px / 1.25 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .t span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.eard { display: inline-block; padding: 3px 8px; border-radius: 8px; font: 800 13px var(--x); font-variant-numeric: tabular-nums; }
.eard.up { color: var(--up); background: rgba(49, 229, 154, .12); }
.eard.down { color: var(--down); background: rgba(255, 84, 112, .12); }
.tfoot .eard { margin-left: 6px; font-size: 12px; }
.crow .cd { min-width: 42px; text-align: right; font: 600 12px var(--mono); color: var(--muted); }
.empty.slim { padding: 6px 0 4px; font-size: 13.5px; line-height: 1.45; }
.phero .tier { height: 22px; }
/* the prototype says so, next to the logo */
.lockup { display: flex; align-items: center; gap: 6px; }
.protag { font: 800 7.5px / 1.05 var(--x); font-stretch: 72%; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.side .wordmark .protag { margin-left: 2px; padding: 3px 6px; border-radius: 6px; font-size: 8px; color: #ffd65c; background: rgba(255, 196, 70, .1); box-shadow: inset 0 0 0 1px rgba(255, 196, 70, .3); text-shadow: none; }
.tabs { min-width: 0; gap: 16px; }
.tabs button { white-space: nowrap; }
@media (max-width: 380px) { .tabs { gap: 12px; } .tabs button { font-size: 14.5px; } }

/* ------------------------------------------------------------------ social: friends on the card, comments that float */
.card.tk.soc .lyr { bottom: calc(var(--tab) + var(--bot) + 160px); }
.fact { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-bottom: 4px; padding: 3px 10px 3px 4px; border-radius: 14px; font: 600 12.5px var(--f); color: #fff; text-align: left; background: rgba(12, 12, 18, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 214, 92, .3); }
.fact > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact b { font-weight: 750; }
.stk { display: inline-flex; flex: none; }
.stk .av { box-shadow: 0 0 0 1.5px #ffd65c; font-size: 9px; }
.stk .av + .av { margin-left: -6px; }
.bubs { position: absolute; left: 16px; right: 92px; bottom: calc(var(--tab) + var(--bot) + 238px); height: 0; z-index: 2; }
.card.tk.soc .bubs { bottom: calc(var(--tab) + var(--bot) + 266px); }
.bub { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 13px 5px 5px; border-radius: 22px; color: #fff; text-align: left; background: rgba(16, 16, 22, .5); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 12px 30px -12px rgba(0, 0, 0, .8); animation: bubUp 4.5s cubic-bezier(.2, .7, .3, 1) forwards; }
.bub .av { font-size: 11px; }
.bub > span { min-width: 0; font: 600 13.5px / 1.25 var(--f); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bub b { display: flex; align-items: center; gap: 5px; font: 700 11px / 1.3 var(--f); color: rgba(255, 255, 255, .62); }
.bub i, .cmt b i { font: 800 9px / 1 var(--x); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #1b1200; background: #ffd65c; padding: 2px 5px; border-radius: 5px; }
.bub.fr { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 92, .55), 0 12px 30px -12px rgba(0, 0, 0, .8), 0 0 24px -6px rgba(255, 196, 70, .45); }
.bub.fr .av { box-shadow: 0 0 0 2px #ffd65c; }
.bub.me { background: linear-gradient(120deg, rgba(255, 45, 135, .55), rgba(255, 138, 0, .45)); }
@keyframes bubUp { 0% { opacity: 0; transform: translate(0, 24px) scale(.82); } 9% { opacity: 1; transform: translate(0, 0) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -160px) scale(.97); } }

/* comments sheet */
.clikes { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.clikes .stk .av { box-shadow: 0 0 0 1.5px #121218; }
.cmts { display: grid; }
.cmt { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; padding: 10px 0; }
.cmt b { display: flex; align-items: center; gap: 6px; font: 650 12.5px var(--f); color: var(--text2); }
.cmt b span { color: var(--muted); font-weight: 500; }
.cmt p { margin-top: 2px; font-size: 15px; line-height: 1.35; }
.cmt.fr .av { box-shadow: 0 0 0 2px #121218, 0 0 0 3.5px #ffd65c; }
.cmt.focus { margin: 0 -10px; padding: 10px; border-radius: 14px; background: rgba(255, 214, 92, .08); }
.cmeta { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.cmeta button { font: 650 12px var(--f); color: var(--muted); }
.tchip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 11px; color: #fff !important; background: rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; }
.tchip svg { width: 10px; height: 10px; }
.cmt .lk { display: grid; justify-items: center; align-self: start; gap: 1px; padding-top: 2px; font: 600 11.5px var(--f); color: var(--muted); }
.cmt .lk svg { width: 19px; height: 19px; transition: transform .3s var(--spring); }
.cmt .lk.on { color: #ff4f8b; }
.cmt .lk.on svg { fill: #ff2d87; stroke: #ff2d87; animation: pop .4s var(--spring); }
.atchip { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: center; height: 30px; padding: 0 10px 0 8px; border-radius: 15px; font: 700 12.5px var(--f); font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .08); }
.atchip svg { width: 10px; height: 10px; }

/* friends, people, invites */
.ring { position: relative; display: inline-grid; place-items: center; flex: none; padding: 3px; border-radius: 50%; background: conic-gradient(#ffd65c calc(var(--m) * 1%), rgba(255, 255, 255, .12) 0); }
.ring .av { box-shadow: 0 0 0 2.5px var(--bg); }
.invite { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 14px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 196, 70, .2), transparent 55%), radial-gradient(100% 140% at 100% 100%, rgba(124, 92, 255, .25), transparent 60%), var(--s1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.iv-art { position: relative; display: flex; }
.iv-art .av { box-shadow: 0 0 0 2px #15151b; font-size: 12px; }
.iv-art .av + .av { margin-left: -10px; }
.iv-art .coin { position: absolute; right: -8px; bottom: -6px; width: 22px; height: 22px; font-size: 22px; }
.iv-tx b { display: block; font: 850 16px var(--x); }
.iv-tx span { font-size: 12.5px; color: var(--text2); }
.invite .btn { grid-column: 1 / -1; width: 100%; height: 40px; }
.frow { display: flex; gap: 14px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; }
.frow::-webkit-scrollbar { display: none; }
.frow button { display: grid; justify-items: center; gap: 4px; flex: none; width: 66px; }
.frow b { max-width: 66px; font: 650 12px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow button > span:last-child { font: 700 11px var(--f); color: #ffd65c; }
.fplus { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(255, 255, 255, .3); }
.fplus svg { width: 22px; height: 22px; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; cursor: pointer; }
.prow b { display: block; font: 700 14.5px var(--f); }
.prow div > span { font-size: 12.5px; color: var(--muted); }
.prow .btn svg, .fhead .btn svg { width: 15px; height: 15px; }
.fhead { display: grid; justify-items: center; gap: 6px; text-align: center; margin: 4px 0 6px; }
.fhead h4 { font: 900 22px var(--x); }
.fsub { font-size: 13px; color: var(--text2); }
.fsub b { color: #ffd65c; }
.fhead [data-fbtn] { margin-top: 6px; }
.h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 8px; font: 800 15px var(--x); }
.h3 span { font: 500 10.5px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.fliked { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fliked button { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; text-align: left; }
.fliked .lcm { position: absolute; inset: 0; }
.fliked button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .85)); }
.fliked span { position: absolute; z-index: 1; left: 8px; right: 6px; bottom: 7px; font: 700 11.5px / 1.2 var(--f); }
.sendto { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px 12px; padding: 2px 18px 4px; scrollbar-width: none; }
.sendto::-webkit-scrollbar { display: none; }
.sendto button { display: grid; justify-items: center; gap: 5px; flex: none; width: 58px; font: 600 11px var(--f); color: var(--text2); }
.sendto button > span:last-child { max-width: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sendto .sicon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); }
.sendto button.sent .av { box-shadow: 0 0 0 2px var(--up); opacity: .6; }
.pstats button { display: block; color: inherit; }

/* ------------------------------------------------------------------ accounts */
.auth { display: grid; gap: 4px; text-align: center; }
.auth h4 { font: 900 24px var(--x); font-stretch: 106%; }
.auth .sub { margin: 4px auto 12px; max-width: 34ch; line-height: 1.45; }
.auth .fld { text-align: left; }
.coin.big { width: 54px; height: 54px; font-size: 54px; margin: 4px auto 10px; }
.hfield { display: flex; align-items: center; height: 50px; border-radius: 12px; background: var(--s2); padding: 0 14px; }
.hfield b { color: var(--muted); font-weight: 700; }
.hfield input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 16px; padding-left: 2px; }
.hfield input:focus { outline: none; }
.fld em { font-style: normal; font-size: 12px; color: var(--muted); }
.fld em.ok { color: var(--up); } .fld em.no { color: var(--down); }
.fld textarea { width: 100%; border-radius: 12px; border: 0; background: var(--s2); padding: 12px 14px; font-size: 15px; line-height: 1.45; resize: vertical; }
.fld textarea:focus { outline: 2px solid rgba(255, 255, 255, .25); }
.msg { min-height: 18px; margin-top: 8px; font-size: 13px; color: var(--down); text-align: center; }
.msg.ok { color: var(--text2); }
.legal { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--faint); text-align: center; }
.legal a { color: var(--text2); }
.link { display: block; margin: 10px auto 0; font: 650 13.5px var(--f); color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }
.rkey { margin: 14px 0; padding: 16px; border-radius: 14px; background: var(--s2); font: 700 17px var(--mono); letter-spacing: .06em; word-break: break-all; user-select: all; -webkit-user-select: all; }
.btn.danger { background: var(--down); color: #fff; }
.offline { position: fixed; z-index: 120; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(90vw, 360px); display: grid; gap: 8px; justify-items: center; padding: 18px; border-radius: 18px; background: rgba(20, 20, 26, .96); box-shadow: 0 20px 60px -10px #000; text-align: center; }
.offline span { font-size: 13px; color: var(--text2); }

/* ------------------------------------------------------------------ profiles: banner, ringed avatar, now playing, links, pins */
.pf { position: relative; margin: calc(-1 * (var(--top) + 18px)) -18px 0; }
.pf-banner { position: relative; height: 236px; overflow: hidden; background: var(--s1); }
.pf-banner .lcm { position: absolute; inset: 0; }
.pf-banner.img { background: center / cover no-repeat; }
.pf-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 35%, rgba(5, 5, 7, .2) 65%, var(--bg) 100%); }
.pf-banner.live .lcm-bg { animation: pushBg 18s ease-in-out infinite alternate; }
.pf-banner.live .lcm-sub { animation: pushSub 18s ease-in-out infinite alternate; }
.pf-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: -62px 18px 0; }
.pf-avw { position: relative; flex: none; }
.pf-av { width: var(--s); height: var(--s); border-radius: 50%; padding: 4px; display: grid; place-items: center; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .9); }
.pf-av > img, .pf-av > .av { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg); font-size: calc(var(--s) * .4); }
.pf-av.t-fresh { background: linear-gradient(135deg, #6a6a76, #2b2b33); }
.pf-av.t-good { background: linear-gradient(135deg, #22e1ff, #2f7bff); }
.pf-av.t-sharp { background: linear-gradient(135deg, #7c5cff, #22e1ff); }
.pf-av.t-maker { background: linear-gradient(135deg, #ff2d87, #ff8a3d); }
.pf-av.t-oracle { background: conic-gradient(#ffd65c, #ff8a3d, #fff2b0, #ffd65c); animation: oracle 5s linear infinite; }
@keyframes oracle { to { filter: hue-rotate(25deg) brightness(1.15); } }
.pf-note { position: absolute; left: calc(100% - 26px); bottom: calc(100% - 22px); display: inline-flex; align-items: center; gap: 7px; max-width: 200px; padding: 7px 12px; border-radius: 16px 16px 16px 4px; font: 650 12.5px var(--f); color: #fff; white-space: nowrap; background: rgba(28, 28, 36, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px -10px #000; }
.pf-note > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pf-note.playing { background: linear-gradient(120deg, rgba(255, 45, 135, .9), rgba(255, 138, 61, .9)); }
.pf-note.playing .eq { display: inline-flex; color: #fff; }
.pf-note.add { color: #ffd65c; }
.pf-note.add svg { width: 13px; height: 13px; }
.pf-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.pf-actions .btn svg { width: 16px; height: 16px; }
.pf-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 18px 0; font: 900 30px / 1.02 var(--x); font-stretch: 108%; letter-spacing: -.02em; }
.pf-handle { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 18px 0; color: var(--muted); font-size: 14px; }
.pf-match { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; color: #ffd65c; font: 650 12.5px var(--f); background: rgba(255, 214, 92, .12); box-shadow: inset 0 0 0 1px rgba(255, 214, 92, .3); }
.pf-bio { margin: 12px 18px 0; font-size: 15px; line-height: 1.45; color: var(--text2); white-space: pre-line; }
.pf-bio.add { display: block; color: #ffd65c; font-weight: 650; text-align: left; }
.pf-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 18px 0; }
.pf-links a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: 16px; font: 650 12.5px var(--f); color: #fff; text-decoration: none; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pf-links a svg { width: 16px; height: 16px; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 18px 0; padding: 12px 4px; border-radius: 18px; text-align: center; background: var(--s1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pf-stats b { display: block; font: 850 19px var(--x); }
.pf-stats span { font-size: 12px; color: var(--muted); }
.pf-stats button { color: inherit; }
.pf-tabs { position: sticky; top: 0; z-index: 3; display: flex; margin: 18px 0 0; padding: 0 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
.pf-tabs button { position: relative; flex: 1; padding: 13px 0; font: 700 14px var(--f); color: var(--muted); }
.pf-tabs button.on { color: #fff; }
.pf-tabs button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px; background: #fff; }
.pf-pane { padding: 3px 0 0; }
.pf-pane .receipts, .pf-pane .dna { margin: 10px 18px 0; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pf-cell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; background: var(--s1); }
.pf-cell .lcm { position: absolute; inset: 0; }
.pf-cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .82)); }
.pf-ct { position: absolute; z-index: 1; left: 7px; right: 7px; bottom: 6px; display: grid; gap: 1px; }
.pf-ct b { font: 750 12px / 1.2 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ct span { display: inline-flex; align-items: center; gap: 3px; font: 700 11px var(--f); color: var(--text2); }
.pf-ct svg { width: 9px; height: 9px; }
.pin-tag { position: absolute; z-index: 1; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 5px; border-radius: 6px; font: 800 10.5px var(--f); color: #fff; background: var(--hype); }
.pin-tag svg { width: 11px; height: 11px; }
.pin-tag.rev { background: rgba(0, 0, 0, .6); color: #ffd65c; }
.pf-pin { position: absolute; z-index: 2; right: 5px; top: 5px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pf-pin svg { width: 14px; height: 14px; }
.pf-pin.on { background: #fff; color: #000; }
.pf-empty { padding: 34px 22px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pf-empty .link { display: inline; margin: 0; }
.pf-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 30px 18px 12px; }
.pf-foot a { font-size: 12px; color: var(--faint); text-decoration: none; }
.pf-loading { height: 50vh; display: grid; place-items: center; }
.pf-loading::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .15); border-top-color: #fff; animation: spin .8s linear infinite; }
.gcard { position: relative; z-index: 2; margin: -48px 18px 0; padding: 22px 18px 18px; border-radius: 24px; background: rgba(18, 18, 24, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px -30px #000; }
.gcard h1 { margin-bottom: 10px; font: 900 34px / .98 var(--x); font-stretch: 108%; letter-spacing: -.02em; }
.gcard p { margin-bottom: 16px; font-size: 14.5px; line-height: 1.45; color: var(--text2); }
.pf.guest .dna { margin: 16px 18px 0; }
/* anyone's profile, full screen */
.userview { position: fixed; inset: 0; z-index: 55; overflow-y: auto; background: var(--bg); transform: translateX(100%); transition: transform .38s var(--ease); }
.userview.on { transform: none; }
.userview .pf { margin: 0; }
.uv-back { position: fixed; z-index: 5; left: 12px; top: calc(var(--top) + 12px); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.uv-back svg { transform: rotate(180deg); }
/* edit profile, settings, report */
.ep-imgs { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 6px 0 8px; }
.ep-av { position: relative; }
.ep-av > span:last-child { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #000; background: #fff; }
.ep-av > span:last-child svg { width: 15px; height: 15px; }
.ep-bl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ep-bl button { width: 46px; height: 32px; border-radius: 9px; display: grid; place-items: center; font: 700 11px var(--f); background: var(--s3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ep-bl button.on { box-shadow: 0 0 0 2px #fff; }
.ep-bl button svg { width: 16px; height: 16px; }
.ep-links { display: grid; gap: 8px; margin-top: 8px; }
.ep-link { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; height: 46px; padding: 0 12px; border-radius: 12px; background: var(--s2); }
.ep-link svg { width: 18px; height: 18px; color: var(--muted); }
.ep-link input { min-width: 0; height: 100%; border: 0; background: none; font-size: 15px; }
.ep-link input:focus { outline: none; }
.set-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; width: 100%; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--line); }
.set-row svg { width: 18px; height: 18px; color: var(--muted); }
.set-row b { display: block; font: 650 14.5px var(--f); }
.set-row span { font-size: 12.5px; color: var(--muted); }
.set-row.danger b { color: var(--down); }
.set .btn { margin-top: 10px; }
.rep .chk { margin-top: 10px; }
.shx { display: flex; gap: 8px; margin-top: 10px; }
.shx button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font: 650 13px var(--f); background: var(--s2); }
.shx svg { width: 16px; height: 16px; }
.unm { padding: 0; font: inherit; color: inherit; }
.lead { cursor: pointer; }
.nrow { width: 100%; text-align: left; }
.nrow.new b { color: #fff; font-weight: 700; }
.rq { display: flex; gap: 6px; }
.rq .btn svg { width: 15px; height: 15px; }
.earcard.guest p { position: relative; max-width: 36ch; margin: 6px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--text2); }
.meta .plays { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .62); font-weight: 550; }
.meta .plays svg { width: 10px; height: 10px; }
.tag.rev { color: #ffd65c; }
/* the drop, after upload */
.capedit { display: grid; gap: 6px; }
.capl { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; }
.capl span { font: 600 11px var(--mono); color: var(--muted); }
.capl input { height: 42px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 15px; background: var(--s2); }
.review { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(255, 214, 92, .08); box-shadow: inset 0 0 0 1px rgba(255, 214, 92, .25); }
.review svg { color: #ffd65c; }
.review b { display: block; color: #ffd65c; }
.review span { font-size: 13px; line-height: 1.45; color: var(--text2); }

/* ------------------------------------------------------------------ the drop: many songs, a draggable chorus window each */
.drafts { display: grid; gap: 12px; }
.draft { padding: 14px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.draft.s-done { box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .35); }
.draft.s-fail, .draft.s-error { box-shadow: inset 0 0 0 1px rgba(255, 84, 112, .4); }
.dr-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.dr-cover { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font: 700 10.5px var(--f); color: var(--muted); background: var(--s3) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.dr-cover svg { width: 18px; height: 18px; }
.dr-meta { display: grid; gap: 2px; min-width: 0; }
.dr-title, .dr-artist { min-width: 0; border: 0; background: none; padding: 2px 0; color: #fff; }
.dr-title { font: 800 16px var(--x); }
.dr-artist { font: 600 13px var(--f); color: var(--text2); }
.dr-title:focus, .dr-artist:focus { outline: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.dr-st { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 650 12px var(--f); color: var(--text2); }
.dr-st svg { width: 14px; height: 14px; }
.s-done .dr-st { color: var(--up); }
.s-fail .dr-st, .s-error .dr-st { color: var(--down); }
.dr-st .ring2 { width: 13px; height: 13px; border-width: 2px; }
.dr-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--s2); }
.dr-x svg { width: 15px; height: 15px; }
.dr-wave { position: relative; height: 74px; margin-top: 12px; border-radius: 12px; overflow: hidden; touch-action: none; cursor: pointer; background: rgba(255, 255, 255, .03); }
.dr-wave .bars { position: absolute; inset: 8px 4px; display: flex; align-items: center; gap: 1px; }
.dr-wave .bars i { flex: 1; min-width: 0; border-radius: 1px; background: rgba(255, 255, 255, .28); }
.dr-wave .win { position: absolute; top: 0; bottom: 0; display: grid; place-items: end center; padding-bottom: 4px; border-radius: 10px; cursor: grab; background: linear-gradient(180deg, rgba(255, 45, 135, .28), rgba(255, 138, 61, .22)); box-shadow: inset 0 0 0 2px rgba(255, 140, 90, .9), 0 0 24px -4px rgba(255, 45, 135, .7); }
.dr-wave .win span { font: 700 10.5px var(--mono); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.dr-wave .phd { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; pointer-events: none; left: -4px; }
.dr-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dr-row .btn svg { width: 15px; height: 15px; }
.dr-hint { font-size: 12px; color: var(--muted); }
.dr-words { margin-top: 10px; }
.dr-words summary { cursor: pointer; font: 700 13px var(--f); color: var(--text2); }
.dr-words summary em { font-style: normal; font-weight: 500; color: var(--muted); }
.dr-words textarea { width: 100%; margin-top: 8px; border-radius: 12px; border: 0; background: var(--s2); padding: 12px 14px; font-size: 15px; line-height: 1.45; resize: vertical; }
.dropbar { position: sticky; bottom: calc(var(--tab) + var(--bot) + 8px); margin-top: 14px; padding: 14px; border-radius: 20px; background: rgba(18, 18, 24, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 -20px 50px -20px #000; }
.dropbar .chk { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.dropbar .chk a { color: var(--text2); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------------ desktop */
@media (min-width: 900px) {
  :root { --tab: 0px; }
  #app { grid-template-columns: 232px minmax(0, 1fr) 330px; }
  .side { display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; }
  .side .wordmark { display: flex; align-items: center; gap: 10px; margin: 0 10px 22px; font: 900 25px var(--d); letter-spacing: -.03em; }
  .side .wordmark svg { width: 32px; height: 32px; }
  .side nav { display: grid; gap: 2px; }
  .side nav button { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; font: 650 16px var(--f); color: var(--text2); text-align: left; }
  .side nav button:hover { background: var(--s1); color: #fff; }
  .side nav button.on { color: #fff; font-weight: 800; }
  .side nav button.on svg { stroke-width: 2.4; }
  .side nav .count { margin-left: auto; font: 800 11px var(--f); padding: 2px 7px; border-radius: 9px; background: var(--pink); color: #fff; }
  .side .dropbtn { margin-top: 14px; justify-content: center; background: #fff; color: #000 !important; font-weight: 800 !important; }
  .side .foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; }
  .side .foot img { width: 46px; height: 46px; }
  .side .foot b { display: block; font: 800 16px var(--d); }
  .side .foot span { font-size: 12px; color: var(--muted); }
  .view { padding: 32px max(40px, calc((100% - 680px) / 2)) 40px; }
  .view.feedview { padding: 0; display: grid; place-items: center; background: radial-gradient(60% 50% at 50% 50%, #111118, #050507); }
  .feed { position: relative; inset: auto; width: calc((100vh - 40px) * .5625); height: calc(100vh - 40px); border-radius: 18px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95); }
  .feed .card { border-radius: 18px; }
  .topbar { left: 50%; transform: translateX(-50%); width: calc((100vh - 40px) * .5625); top: 20px; padding: 14px 14px 0; }
  .topbar .lockup, .topbar .vibes { visibility: hidden; }
  .tabbar { display: none; }
  .amb { display: block; position: absolute; inset: -12%; z-index: 0; background: center / cover no-repeat; filter: blur(70px) saturate(1.5) brightness(.5); opacity: .85; transition: opacity .5s; pointer-events: none; }
  .amb.sw { opacity: 0; }
  .feed { z-index: 1; }
  .tbar { bottom: 0; }
  .panel { display: flex; flex-direction: column; gap: 22px; padding: 24px 20px; overflow-y: auto; }
  .panel .vibes { justify-self: start; height: auto; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; font-size: 22px; gap: 10px; }
  .panel .vibes .coin { width: 26px; height: 26px; font-size: 26px; }
  .panel h3 { font: 800 15px var(--d); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
  .panel h3 span { font: 600 12px var(--f); color: var(--muted); }
  .pulse-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; cursor: pointer; }
  .pulse-row img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
  .pulse-row b { display: block; font: 650 14px/1.2 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-row span { font-size: 12.5px; color: var(--muted); }
  .pulse-row .v { text-align: right; font: 800 14px var(--d); }
  .sheet { left: auto; right: 24px; bottom: 24px; width: 400px; border-radius: 20px; max-height: calc(100vh - 48px); transform: translateY(calc(100% + 40px)); }
  .toasts { top: 22px; }
  .kbd { font-size: 12px; color: var(--muted); line-height: 2; }
  .kbd kbd { font: 700 11px var(--f); padding: 2px 6px; border-radius: 5px; background: var(--s2); color: var(--text2); }
  .onb .in { align-self: center; }
  .userview { left: 232px; right: 330px; }
  .uv-back { left: 248px; }
  #v-profile .pf, .userview .pf { max-width: 680px; margin-left: auto; margin-right: auto; }
  #v-profile .pf { margin-top: -32px; }
  .onb .ohero { left: auto; width: min(54vw, 78vh); }
  .onb .fade { background: linear-gradient(90deg, #000 0%, #000 calc(100% - min(54vw, 78vh)), rgba(0, 0, 0, .55) calc(100% - min(54vw, 78vh) + 120px), rgba(0, 0, 0, 0) calc(100% - min(54vw, 78vh) + 320px)), linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .6)); }
  .onb .in:not(.center) { position: absolute; left: max(64px, 7vw); top: 50%; transform: translateY(-50%); width: min(38vw, 520px); padding: 0; gap: 22px; }
  .onb .in:not(.center) h1 { font-size: clamp(72px, 7.4vw, 124px); }
  .onb .in:not(.center) p { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .card.on .lc-bg, .card.on .lc-sub, .card.on .lc-glow, .card.on .lc-dust i, .card.tk.on::after, .oslide.on .lcm-bg, .oslide.on .lcm-sub, .orb i { animation: none; }
}