/* 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, .55);
  --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, .55); 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(--f); 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(--f); 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(--f); 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(--f); 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(--f); 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(--f); 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(--f); 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); }
.onb .in:not(.center) { gap: 14px; }
.onb .in:not(.center) p { margin-top: -2px; }
/* three promises in one even glass strip, never wrapping */
.ofeat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; margin-top: 2px; border-radius: 16px; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ofeat span { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 66px; padding: 10px 4px; font: 700 12.5px / 1.15 var(--f); color: rgba(255, 255, 255, .92); text-align: center; }
.ofeat span + span { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.ofeat svg { width: 19px; height: 19px; }
.ofeat span:nth-child(1) svg { color: #22e1ff; }
.ofeat span:nth-child(2) svg { color: #ff8a3d; }
.ofeat span:nth-child(3) svg { color: #31e59a; }
.onb .ostart { justify-self: stretch; height: 58px; margin-top: 4px; border-radius: 18px; font: 800 17px var(--f); letter-spacing: -.01em; box-shadow: 0 12px 44px rgba(124, 92, 255, .32), 0 2px 0 rgba(255, 255, 255, .4) inset; transition: transform .15s var(--ease); }
.onb .ostart:active { transform: scale(.98); }
.onb .ostart svg { width: 18px; height: 18px; }
.osign { justify-self: center; margin-top: -6px; padding: 8px 14px; font: 600 14.5px var(--f); color: rgba(255, 255, 255, .62); }
.osign b { color: #fff; font-weight: 750; }
/* story bars + the song on screen */
.otop { position: absolute; z-index: 2; top: calc(var(--top) + 10px); left: 12px; right: 12px; pointer-events: none; }
.obars { display: flex; gap: 4px; }
.obars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.obars b { display: block; height: 100%; width: 0; border-radius: 2px; background: #fff; }
.obars i.done b { width: 100%; }
.obars i.on b { animation: obar 3.6s linear forwards; }
@keyframes obar { to { width: 100%; } }
.ocap { position: relative; height: 34px; margin-top: 10px; }
.ocap span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; max-width: 100%; font: 750 14px var(--f); color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ocap span.on { opacity: 1; transform: none; }
.ocap img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.ocap em { font-style: normal; font-weight: 550; color: rgba(255, 255, 255, .7); overflow: hidden; text-overflow: ellipsis; }
.ocap em::before { content: "\00b7"; margin-right: 6px; }
.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(--f); 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(--f); 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(--f); 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: relative; 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; }
  .onb .ostart, .ofeat { justify-self: start; width: min(100%, 440px); }
  .osign { justify-self: start; padding-left: 0; }
  .otop { left: auto; right: 24px; width: calc(min(54vw, 78vh) - 48px); }
}
@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; }
}

/* ------------------------------------------------------------------ tester round 1: clearer words, honest numbers */
.act .n { font-size: 12px; }
.chg.flat { color: var(--text2); }
.tier.new { color: #9fe8ff; background: rgba(34, 225, 255, .1); box-shadow: inset 0 0 0 1px rgba(34, 225, 255, .25); }
/* taste test: what to do, labelled buttons, a way out */
.onb .shint { margin: -6px 0 2px; font: 650 14.5px var(--f); color: rgba(255, 255, 255, .8); }
.speed-btns button { width: auto; height: auto; display: grid; justify-items: center; gap: 6px; border-radius: 0; background: none; }
.speed-btns .love { background: none; color: inherit; }
.speed-btns .sb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.speed-btns .love .sb { background: #fff; color: var(--pink); }
.speed-btns .sl { font: 700 13px var(--f); color: rgba(255, 255, 255, .78); }
.oskip { margin-top: 6px; padding: 8px 14px; font: 600 14px var(--f); color: rgba(255, 255, 255, .6); text-decoration: underline; text-underline-offset: 3px; }
.onb .oshare { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font: 700 14.5px var(--f); color: #fff; }
.onb .oshare svg { width: 16px; height: 16px; }
/* Following: artists to follow */
.fsug { display: grid; gap: 10px; width: min(100%, 340px); margin: 6px auto 14px; text-align: left; }
.fs-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.fs-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fs-row b { display: block; font: 750 15px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-row span { font: 500 13px var(--f); color: var(--text2); }
/* share: WhatsApp */
.sendto .sicon.wa { background: #25d366; color: #fff; }
.sendto .sicon.wa svg { width: 26px; height: 26px; }
/* drop: editable names look editable, the promise to the artist, Drop waits for the tick */
.dr-ed { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: text; }
.dr-ed input { flex: 1; }
.dr-ed svg { flex: none; width: 14px; height: 14px; color: var(--text2); opacity: .8; }
.dr-title, .dr-artist { border-bottom: 1px dashed rgba(255, 255, 255, .18) !important; }
.dr-title:disabled, .dr-artist:disabled { border-bottom-color: transparent !important; }
.dr-keep { display: grid; grid-template-columns: 16px 1fr; gap: 8px; margin: 0 0 12px; font: 500 13px / 1.45 var(--f); color: var(--text2); }
.dr-keep svg { width: 16px; height: 16px; margin-top: 2px; color: var(--up); }
.btn.wait { opacity: .5; }
.dr-wave .win span { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .72); }
.dr-wave { margin-top: 24px; overflow: visible; }

/* Call it: the sheet asks first */
.callit { display: grid; gap: 12px; }
.ci-top { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.ci-top img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.ci-top b { display: block; font: 800 16px var(--x); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-top span { font: 500 13.5px var(--f); color: var(--text2); }
.callit h4 { text-align: left; margin: 4px 0 -4px; font-size: 22px; }
.callit .sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text2); }
.ci-had { display: flex; align-items: center; gap: 8px; margin: 0; font: 650 14px var(--f); color: var(--up); }
.ci-had svg { width: 16px; height: 16px; }
.ci-amt { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ci-amt button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 14px; font: 800 17px var(--f); background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ci-amt button.on { background: rgba(255, 214, 92, .14); box-shadow: inset 0 0 0 2px #ffd65c; }
.ci-amt .coin { width: 22px; height: 22px; font-size: 22px; }
.ci-note, .vfree { margin: 0; font: 500 13px / 1.45 var(--f); color: var(--text2); }
.vfree { margin: 8px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.backchip.called { background: rgba(49, 229, 154, .16); box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .45); }
.backchip.called > b { color: var(--up); }
.backchip .px:empty { display: none; }
.mrow .v .pl, .pulse-row .v .pl { display: block; font: 600 12px var(--f); color: var(--text2); }

/* Drop: the words on the card, before the drop */
.dr-wp { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(124, 92, 255, .12), rgba(255, 45, 135, .06)), var(--s2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.wp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wp-h b { font: 800 14px var(--f); }
.wp-h .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.wp-h .btn svg { width: 14px; height: 14px; }
.wp-s { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 13px / 1.4 var(--f); color: var(--text2); }
.wp-s.ok { color: #9fe8ff; }
.wp-s .ring2 { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin .8s linear infinite; flex: none; }
.wp-lines { display: grid; gap: 4px; margin-top: 10px; }
.wl { margin: 0; font: 800 17px / 1.3 var(--x); font-stretch: 96%; color: rgba(255, 255, 255, .5); transition: color .2s; }
.wl span { transition: color .12s; }
.wl span.on { color: #fff; }
.wl.cur span.on { color: #fff; text-shadow: 0 0 18px rgba(255, 45, 135, .55); }

/* tester round 1, batch 3: readability floor, tap targets, focus, new bits */
.tag, .protag, .slbl, .vote .vsub, .chead .demo, .legal, .pf-foot a, .dz .fmt, .tier, .bub b, .tg, .tfoot .gate i, .bkt .rl, .bkt .cl, .bkt .sdt { font-size: 12px; }
.tabbar button span { font-size: 11.5px; }
.fol { position: absolute; }
.fol::before { content: ""; position: absolute; inset: -11px; }
.cmeta button { padding: 10px 6px; margin: -10px 0; }
.vibes { min-height: 36px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sheet:focus { outline: none; }
.meta .full { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; padding: 4px 9px 4px 10px; border-radius: 12px; font: 750 12.5px var(--f); color: #fff; text-decoration: none; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.meta .full svg { width: 13px; height: 13px; }
.asite { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px; font: 700 13.5px var(--f); color: #9fe8ff; text-decoration: none; }
.asite svg { width: 15px; height: 15px; }
.mrow.ar { grid-template-columns: 48px minmax(0, 1fr) auto; width: 100%; text-align: left; }
.mrow .v .new, .mv-tx .new { font: 800 12px var(--f); letter-spacing: .04em; text-transform: uppercase; color: #9fe8ff; }
.dr-full { display: grid; gap: 6px; margin-top: 12px; font: 700 13px var(--f); color: var(--text2); }
.dr-full em { font-style: normal; font-weight: 500; color: var(--muted); }
.dr-full input { height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--s2); color: #fff; font: 500 15px var(--f); }
.onb .odna { width: min(100%, 320px); }
.onb .osave { margin-top: -6px; font: 500 13px var(--f); color: var(--text2); }
.set-row .mini { margin-left: auto; }

/* AI label */
.aitag { display: inline-grid; place-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 6px; font: 800 11px var(--f); letter-spacing: .04em; color: #fff; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); vertical-align: 2px; }
.dr-ai { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; margin-top: 12px; font: 650 13.5px var(--f); color: var(--text2); }
.dr-ai input { width: 18px; height: 18px; accent-color: #ff2d87; }
.dr-ai em { font-style: normal; font-weight: 500; color: var(--muted); }

/* notifications: the ask */
.pushask { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 6px; }
.pa-ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #22e1ff, #7c5cff 50%, #ff2d87); }
.pa-ico svg { width: 28px; height: 28px; color: #fff; }
.pushask h4 { margin: 4px 0 0; font-size: 21px; }
.pushask .sub { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: var(--text2); }
.pushask .sub svg { width: 16px; height: 16px; vertical-align: -3px; }
.set-row .mini { margin-left: auto; }

/* 9:16 video */
.sendto .sicon.vid { background: linear-gradient(135deg, #ff2d87, #ff8a3d); color: #fff; }
.vidmake { display: grid; gap: 12px; }
.vidmake h4 { margin: 0; }
.vm-box { display: grid; place-items: center; }
.vm-box canvas, .vm-vid { width: min(56vw, 230px); aspect-ratio: 9 / 16; height: auto; border-radius: 16px; background: #000; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.vm-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.vm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff2d87, #ff8a3d); transition: width .2s linear; }
.vidmake .sub { margin: 0; text-align: center; font-size: 14px; color: var(--text2); }

/* a drop that is live at once */
.review.live { background: rgba(49, 229, 154, .08); box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .3); }
.review.live svg { color: var(--up); }

/* taste test: the big word also over the person, see-through, so it reads in full */
.lcm.see .lcm-ghost span { opacity: .45; filter: none; }

/* the Vibes token: the mark's gradient and V, not gold */
.coin { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2322e1ff'/><stop offset='.5' stop-color='%237c5cff'/><stop offset='1' stop-color='%23ff2d87'/></linearGradient></defs><circle cx='24' cy='24' r='24' fill='url(%23g)'/><circle cx='24' cy='24' r='22.6' fill='none' stroke='white' stroke-opacity='.35' stroke-width='1.4'/><path d='M15.6 15.2 24 33.6l8.4-18.4' fill='none' stroke='white' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat; box-shadow: 0 2px 10px rgba(124, 92, 255, .35); }
.coin::after { content: none; }
.coinfly { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2322e1ff'/><stop offset='.5' stop-color='%237c5cff'/><stop offset='1' stop-color='%23ff2d87'/></linearGradient></defs><circle cx='24' cy='24' r='24' fill='url(%23g)'/><circle cx='24' cy='24' r='22.6' fill='none' stroke='white' stroke-opacity='.35' stroke-width='1.4'/><path d='M15.6 15.2 24 33.6l8.4-18.4' fill='none' stroke='white' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat; box-shadow: 0 0 14px rgba(124, 92, 255, .8); }
/* the sign-up sheets: the real mark */
.auth-mark { display: block; width: 64px; height: 64px; margin: 6px auto 12px; filter: drop-shadow(0 8px 24px rgba(124, 92, 255, .45)); }
.auth-mark .mark { display: block; width: 100%; height: 100%; }
/* Call it: the chosen amount in the brand colour */
.ci-amt button.on { background: rgba(124, 92, 255, .16); box-shadow: inset 0 0 0 2px #7c5cff; }

/* branded scrollbars everywhere: thin, the mark's gradient on the thumb */
* { scrollbar-width: thin; scrollbar-color: rgba(124, 92, 255, .75) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid transparent; background: linear-gradient(#22e1ff, #7c5cff, #ff2d87) padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#6ff0ff, #9b82ff, #ff5aa5) padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* an artist's page */
.tier.ai { color: #fff; background: linear-gradient(135deg, #22e1ff, #7c5cff 55%, #ff2d87); box-shadow: none; }
.pf-artist .pf-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* an artist's name opens the artist */
[data-artist] { cursor: pointer; }
.alink:hover, .vs-tt .art:hover, .fs-row b:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the white New drop button stays white (with dark text) on hover */
.side .dropbtn:hover, .side .dropbtn:focus-visible { background: #e9e9f2; color: #000 !important; }

/* the big word over the person, see-through (feed + still covers); the brand keeps its white outline */
.kw.ghost { filter: none; opacity: .42; }
.kw.ghost.v2 { opacity: .5; }
.lcm:not(.brand) .lcm-ghost span { opacity: .45; filter: none; }
/* settings rows: icon, text, and a pill on the right that stays black on white */
.set-row { grid-template-columns: 22px 1fr auto; }
.set-row .mini { display: inline-flex; align-items: center; color: #000; font-size: 12.5px; }
/* sheets: opaque enough that nothing behind them reads through */
.sheet { background: rgba(18, 18, 24, .97); }
/* the profile banner shares the "live" class with the live dot: it stays a full-width block */
.pf-banner.live { display: block; }
/* the banner shows the face (portraits keep it in the upper third), the room and the person stay aligned */
.pf-banner .lcm > div { background-position: 50% 24%; }

/* ================================================================ UX batch 1 */
/* a closed profile page is gone, not parked over the right column */
.userview { visibility: hidden; transition: transform .38s var(--ease), visibility 0s linear .38s; }
.userview.on { visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
/* the comment row: the send button stays round whatever the width */
.compose input { min-width: 0; }
.compose button, .compose .atchip { flex: none; }
/* the name on a colour banner */
.pf-banner.grad { container-type: size; }
.pf-bn { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 16%; pointer-events: none; z-index: 1; }
.pf-bn span { font-weight: 900; line-height: .8; font-family: var(--x); font-stretch: 75%; letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .16); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .86); filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .28)); }
/* Taste DNA: a card on every profile, not a hidden tab */
.pf-dna { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: calc(100% - 36px); margin: 14px 18px 0; padding: 10px 14px 10px 10px; border-radius: 20px; text-align: left; border: 1.5px solid transparent; background: linear-gradient(#0e0e15, #0e0e15) padding-box, linear-gradient(120deg, #22e1ff, #7c5cff 50%, #ff2d87) border-box; box-shadow: 0 18px 50px -24px rgba(124, 92, 255, .7); transition: transform .2s var(--ease); }
.pf-dna:hover { transform: translateY(-1px); }
.pf-dna .pd-art { width: 84px; height: 84px; display: grid; place-items: center; }
.pf-dna .pd-art svg { width: 84px; height: 84px; }
.pf-dna .tag { display: block; margin-bottom: 3px; }
.pf-dna b { display: block; font: 900 22px/1.05 var(--d); color: transparent; background-image: linear-gradient(90deg, #6ff0ff, #9b82ff 55%, #ff5aa5); -webkit-background-clip: text; background-clip: text; }
.pf-dna small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--text2); }
.pf-dna > .i { width: 18px; height: 18px; color: var(--muted); }
/* the Default banner tile */
.ep-bl .ep-def { position: relative; overflow: hidden; width: auto; min-width: 74px; padding: 0 12px; font: 800 12px var(--f); color: #fff; background: linear-gradient(135deg, #22e1ff, #7c5cff 55%, #ff2d87); }
.ep-def img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ep-def span { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.ep-hint { display: block; margin-top: 7px; font-size: 11.5px; color: var(--muted); }
/* Vibes tasks are buttons */
button.mis { width: 100%; text-align: left; border-radius: 0; cursor: pointer; }
button.mis .rw { display: inline-flex; align-items: center; gap: 4px; }
button.mis .rw .i { width: 14px; height: 14px; opacity: .6; }
button.mis:hover b { color: #fff; }
.mis .pb { display: block; }
.earn .go { cursor: pointer; }
.earn .go:hover { color: #fff; }
.earn .go b { margin-left: auto; }
.earn .go b + .i { width: 14px; height: 14px; margin-left: -4px; }
/* the button a task points at */
.nudge { animation: nudge 1s ease-in-out 3; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); transform: scale(1); } 45% { box-shadow: 0 0 0 10px rgba(124, 92, 255, .38); transform: scale(1.08); } }

/* ================================================================ UX batch 2: sheets, Clash */
/* every sheet has a close button */
.sclose { position: absolute; z-index: 3; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text2); background: rgba(255, 255, 255, .07); transition: background .2s, color .2s; }
.sclose:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sclose .i { width: 16px; height: 16px; }
/* comments: the writing row stays at the bottom of the sheet */
.sheet .body:has(> .compose) { display: flex; flex-direction: column; }
.sheet .body > .compose { margin-top: auto; padding-top: 10px; position: sticky; bottom: 0; background: inherit; }
.sheet .body > .cmts { flex: none; }
/* Clash: the playing side's ring and countdown */
.cplay .cring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; transition: opacity .2s; }
.cplay .cring circle { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2.6; }
.cplay .cring .p { stroke: #fff; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.corner:not(.playing) .cplay .cring { opacity: 0; }
.slbl .ctime { margin-left: 4px; padding: 1px 6px; border-radius: 6px; font: 700 10.5px/14px var(--mono); letter-spacing: .02em; color: #fff; background: rgba(0, 0, 0, .45); }
.slbl .ctime:empty { display: none; }
.corner.b .slbl .ctime { margin: 0 4px 0 0; }
/* Clash text never breaks mid-word, vote labels stay on one line */
.card.clash { container-type: inline-size; }
.vs-tt h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; font-size: clamp(14px, 4.6cqi, 22px); }
.vote .vt { white-space: nowrap; font-size: clamp(12px, 3.8cqi, 14.5px); }
/* the bracket: the tree scales into the room it has, list titles end in an ellipsis, the header fits */
.bkw { display: flex; align-items: center; justify-content: center; }
.bkt { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; }
.bmr .tt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .tg, .chead .demo { white-space: nowrap; flex: none; }
.bk h2 { white-space: nowrap; font-size: clamp(26px, 9.6cqi, 36px); }
.card.bk { container-type: inline-size; }
@media (max-height: 760px) {
  .bkl { gap: 6px; margin-top: 10px; }
  .bmr { padding: 5px 10px; }
  .bmr .cvs, .bmr .cvs img, .bmr .cvs i { height: 30px; }
  .bmr .cvs img, .bmr .cvs i { width: 30px; }
  .bkcta { margin-top: 8px; }
  .bkw { margin-top: 8px; }
}
.fnav { display: none; }

/* ================================================================ desktop like TikTok */
@media (min-width: 900px) {
  :root { --rw: 92px; --ch: calc(100vh - 40px); --cw: calc(var(--ch) * .5625); }
  /* the column holds the hook and, beside it, its actions */
  .feed { width: calc(var(--cw) + var(--rw)); height: var(--ch); border-radius: 0; box-shadow: none; background: transparent; }
  .feed .card { background: transparent; border-radius: 0; }
  .feed .card.tk > .lc, .feed .card.tk > .lc-grade { right: var(--rw); border-radius: 18px; }
  .feed .card.tk > .lc { box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95); }
  .feed .card.tk::after { inset: 0 var(--rw) 0 0; border-radius: 18px; animation: none; }
  .card.tk .lyr { right: calc(var(--rw) + 22px); }
  .card.tk .meta { right: calc(var(--rw) + 18px); }
  .bubs { right: calc(var(--rw) + 18px); }
  .card.tk .tbar { left: 18px; right: calc(var(--rw) + 18px); bottom: 10px; height: 3px; border-radius: 3px; overflow: hidden; }
  .card.tk .paused-badge { left: calc(50% - var(--rw) / 2); }
  .card.tk .rail { right: 0; width: var(--rw); bottom: 18px; gap: 16px; }
  .card.tk .rail .act { gap: 6px; color: var(--text2); text-shadow: none; font-size: 12px; }
  .card.tk .rail .act svg { width: 24px; height: 24px; padding: 13px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; filter: none; transition: background .2s, transform .3s var(--spring); }
  .card.tk .rail .act:hover svg { background: rgba(255, 255, 255, .16); }
  .card.tk .rail .rav { margin-bottom: 14px; }
  .card.clash, .card.bk, .card.empty { margin-right: var(--rw); border-radius: 18px; }
  .topbar { left: calc(50% - var(--rw) / 2); width: var(--cw); }
  /* next / previous, like TikTok on a computer */
  .fnav { position: absolute; z-index: 4; right: 28px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
  .fnav button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .2s, transform .2s var(--ease); }
  .fnav button:hover { background: rgba(255, 255, 255, .16); transform: scale(1.06); }
  .fnav button .i { width: 22px; height: 22px; }
  .fnav button:last-child .i { transform: rotate(180deg); }
  /* sheets: a full-height panel on the right, no scrolling for short ones, no floating box */
  .sheet { top: 0; bottom: 0; right: 0; left: auto; width: 400px; max-height: none; border-radius: 0; padding: 22px 22px 22px; transform: translateX(105%); box-shadow: -40px 0 90px -30px rgba(0, 0, 0, .9), inset 1px 0 0 rgba(255, 255, 255, .07); }
  .sheet.on { transform: none; }
  .sheet .grab { display: none; }
  .sheet .sclose { top: 16px; right: 16px; }
  .scrim { background: rgba(0, 0, 0, .38); }
}

/* the playing side counts down inside its button, the ring shows how far it is */
.vs-info { grid-template-columns: minmax(0, 1fr); }
.slbl { max-width: 100%; }
.cplay .cnum { display: none; font: 800 16px/1 var(--f); color: #fff; }
.corner.playing .cplay .eq { display: none; }
.corner.playing .cplay .cnum { display: block; }
/* the bracket header and title fit the card */
.bk h2 { font-size: clamp(22px, 8cqi, 36px); }
.card.bk .chead { gap: 5px; }
.card.bk .chead .tg { letter-spacing: .08em; padding-left: 8px; padding-right: 8px; }
/* the name on a colour banner: centred, with a real space */
.pf-bn { padding-bottom: 6%; }
.pf-bn span { word-spacing: .14em; }

/* the smallest bracket cards drop the vote count pill (each match row says Vote anyway) */
@container (max-width: 356px) { .card.bk .chead .tg:nth-child(2) { display: none; } }
/* profile buttons never wrap */
.pf-actions .btn { white-space: nowrap; }

/* ================================================================ UX batch 4 */
/* gift tokens are real cut-outs now: no blending trick */
.token { mix-blend-mode: normal; }
/* tap to listen: the brand orb */
.tapstart { align-content: center; gap: 22px; background: radial-gradient(circle at 50% 44%, rgba(124, 92, 255, .3), rgba(5, 5, 7, .66) 60%); -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2); }
.tapstart span { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: inherit; display: block; }
.tapstart .ts-orb { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.tapstart .ts-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #22e1ff, #7c5cff, #ff2d87, #ff8a3d, #22e1ff); -webkit-mask: radial-gradient(circle, transparent 0 60px, #000 61px); mask: radial-gradient(circle, transparent 0 60px, #000 61px); filter: drop-shadow(0 0 22px rgba(124, 92, 255, .65)); animation: tsSpin 4.5s linear infinite; }
.tapstart .ts-core { position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .24), rgba(16, 13, 30, .94) 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 70px -12px rgba(0, 0, 0, .85); transition: transform .3s var(--spring); }
.tapstart .ts-core svg { width: 42px; height: 42px; margin-left: 7px; filter: drop-shadow(0 0 16px rgba(255, 255, 255, .55)); }
.tapstart:hover .ts-core, .tapstart:active .ts-core { transform: scale(1.06); }
.tapstart .ts-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(124, 92, 255, .6); animation: tsWave 2.4s ease-out infinite; }
.tapstart .ts-wave.w2 { animation-delay: 1.2s; border-color: rgba(255, 45, 135, .5); }
.tapstart .ts-tx { display: grid; justify-items: center; gap: 8px; }
.tapstart .ts-tx b { font: 900 22px/1 var(--x); font-stretch: 116%; text-transform: uppercase; letter-spacing: .03em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.tapstart .ts-tx small { display: inline-flex; align-items: center; gap: 6px; font: 650 13px var(--f); color: rgba(255, 255, 255, .75); }
.tapstart .ts-tx small svg { width: 15px; height: 15px; margin: 0; }
@keyframes tsSpin { to { transform: rotate(360deg); } }
@keyframes tsWave { from { transform: scale(1); opacity: .9; } to { transform: scale(1.95); opacity: 0; } }
/* up next */
.upnext { position: absolute; z-index: 6; left: 12px; right: 12px; top: calc(var(--top) + 58px); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .35s var(--ease), transform .5s var(--spring); pointer-events: none; }
.upnext.in { opacity: 1; transform: none; pointer-events: auto; }
.un-go { flex: 1; min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) 40px; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border-radius: 18px; text-align: left; color: #fff; background: rgba(14, 12, 24, .64); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 18px 40px -16px rgba(0, 0, 0, .85); }
.un-go img, .un-vs { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.un-vs { display: grid; place-items: center; font: italic 900 15px var(--x); background: linear-gradient(135deg, #ff4a3d, #2f7bff); }
.un-tx { min-width: 0; display: grid; gap: 1px; }
.un-tx small { font: 800 9.5px var(--x); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: #b9a8ff; }
.un-tx b { font: 800 15px/1.2 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un-tx > span { font: 600 12px var(--f); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un-ring { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.un-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.un-ring circle { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 3; }
.un-ring .p { stroke: #fff; stroke-linecap: round; }
.un-s { font: 800 14px var(--f); }
.un-stay { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(14, 12, 24, .64); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.un-stay .i { width: 15px; height: 15px; }
/* the gift button wears the best gift */
.act .gtok { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); transition: transform .3s var(--spring); }
.act.pop .gtok { animation: pop .45s var(--spring); }
/* banners: who sent what */
.gbans { position: absolute; z-index: 5; left: 12px; top: calc(var(--top) + 58px); display: grid; gap: 8px; justify-items: start; pointer-events: none; }
.gban { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border-radius: 28px; color: #fff; background: linear-gradient(90deg, rgba(124, 92, 255, .92), rgba(255, 45, 135, .62) 72%, rgba(255, 45, 135, .1)); box-shadow: 0 14px 34px -16px rgba(124, 92, 255, .9); animation: gbIn .55s var(--spring) both; }
.gban.g-crown, .gban.g-mic { background: linear-gradient(90deg, rgba(214, 150, 30, .95), rgba(255, 138, 61, .62) 72%, rgba(255, 138, 61, .1)); box-shadow: 0 14px 34px -16px rgba(244, 197, 92, .9); }
.gban.g-flame { background: linear-gradient(90deg, rgba(255, 74, 61, .92), rgba(255, 138, 61, .6) 72%, rgba(255, 138, 61, .1)); }
.gban.g-speaker { background: linear-gradient(90deg, rgba(34, 140, 255, .92), rgba(34, 225, 255, .55) 72%, rgba(34, 225, 255, .1)); }
.gban img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); animation: gbTok .7s var(--spring) .12s both; }
.gban span { font: 600 13px/1.15 var(--f); }
.gban b { display: block; font: 800 13.5px var(--f); }
.gban.out { animation: gbOut .45s var(--ease) forwards; }
@keyframes gbIn { from { opacity: 0; transform: translateX(-110%); } }
@keyframes gbOut { to { opacity: 0; transform: translateX(-60%); } }
@keyframes gbTok { from { transform: scale(.3) rotate(-30deg); } }
/* sending a gift: a moment on the hook */
.gstage { position: fixed; z-index: 58; pointer-events: none; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 46%, rgba(20, 12, 40, .2), rgba(0, 0, 0, .74) 70%); animation: gsIn .35s var(--ease) both; --gc: rgba(124, 92, 255, .78); }
.gstage.out { animation: gsOut .65s var(--ease) .15s forwards; }
.gstage.g-crown, .gstage.g-mic { --gc: rgba(244, 197, 92, .82); }
.gstage.g-flame { --gc: rgba(255, 106, 61, .82); }
.gstage.g-speaker { --gc: rgba(34, 225, 255, .75); }
.gs-rays { position: absolute; left: 50%; top: 46%; width: 170%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .17) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 16%, transparent 56%); mask: radial-gradient(circle, #000 0 16%, transparent 56%); animation: gsSpin 7s linear infinite; }
.gs-glow { position: absolute; left: 50%; top: 46%; width: 74%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--gc), transparent 66%); filter: blur(12px); animation: gsGlow 1.4s ease-in-out infinite alternate; }
.gs-tok { position: absolute; left: 50%; top: 46%; width: 54%; max-width: 280px; translate: -50% -50%; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 34px var(--gc)); animation: gsTok .9s var(--spring) both; }
.gs-tx { position: absolute; left: 0; right: 0; top: calc(46% + min(31%, 160px)); text-align: center; font: 900 30px/1 var(--x); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); animation: gsTx .7s var(--ease) .25s both; }
.gs-tx small { display: block; margin-bottom: 7px; font: 700 11.5px var(--f); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
@keyframes gsIn { from { opacity: 0; } }
@keyframes gsOut { to { opacity: 0; } }
@keyframes gsSpin { to { rotate: 360deg; } }
@keyframes gsGlow { from { opacity: .7; scale: .9; } to { opacity: 1; scale: 1.08; } }
@keyframes gsTok { 0% { opacity: 0; scale: .2; rotate: -24deg; } 60% { opacity: 1; scale: 1.12; rotate: 6deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes gsTx { from { opacity: 0; transform: translateY(14px); } }
/* the gift sheet */
.gbal { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -2px 0 14px; font: 600 13px var(--f); color: var(--text2); }
.gbal .coin { width: 18px; height: 18px; font-size: 18px; }
.gbal b { color: #fff; font: 800 14px var(--d); }
.ggot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; font: 600 12.5px var(--f); color: var(--muted); }
.ggot i { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 9px 0 3px; border-radius: 13px; font: 800 12px var(--f); font-style: normal; color: #fff; background: rgba(255, 255, 255, .07); }
.ggot img { width: 22px; height: 22px; object-fit: contain; }
.gifts { gap: 10px; }
.gift { position: relative; gap: 5px; padding: 16px 6px 13px; border-radius: 18px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.gift:hover { background: rgba(255, 255, 255, .085); transform: translateY(-2px); }
.gift img, .gift .token { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); transition: transform .35s var(--spring); }
.gift:hover .token { transform: scale(1.1) rotate(-5deg); }
.gift .gp { display: inline-flex; align-items: center; gap: 4px; font: 800 12px var(--d); color: var(--text2); }
.gift .gp .coin { width: 14px; height: 14px; font-size: 14px; }
.gift.g-crown { background: radial-gradient(120% 90% at 50% 0%, rgba(244, 197, 92, .14), rgba(255, 255, 255, .045) 70%); }
@media (min-width: 900px) {
  .upnext { right: calc(var(--rw) + 12px); }
  .card.tk .rail .act .gtok { width: 50px; height: 50px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .08); }
}

/* ================================================================ audit fixes */
.lcm-kw span, .pf-bn span { font-size: var(--fs); }
.lcm.pfb .lcm-kw span { font-size: min(var(--fs), 32cqh); }
.pf-bn span { font-size: min(var(--fs), 34cqh); }
.dna-art { overflow: visible; }
/* small text links: a bigger invisible touch area, same layout */
.unm, .tchip, .cmeta button, .alink, .vs-tt .art, .meta .by b, .meta a.full, .pf-foot a, .link, .lk, .pf-bio.add { position: relative; }
.unm::after, .tchip::after, .cmeta button::after, .alink::after, .vs-tt .art::after, .meta .by b::after, .meta a.full::after, .pf-foot a::after, .link::after, .lk::after, .pf-bio.add::after, .rav .fol::after { content: ""; position: absolute; inset: -9px -6px; }
/* phones: a sheet may take the screen up to a sliver at the top */
@media (max-width: 899px) {
  .sheet { max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); }
}
/* Edit profile: Save stays in reach while you scroll */
.ep > [data-save] { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 22px 8px rgba(18, 18, 24, .97); }

/* Clash in the brand's colours: side A is the warm end of the Vibnelo gradient (pink to orange), side B the cool
   end (cyan to violet); the vote buttons are living gradients like the big words */
:root { --ca: #ff3b6b; --ca2: #ff8a3d; --cag: rgba(255, 59, 107, .42); --cb: #3d7bff; --cb2: #22e1ff; --cbg: rgba(61, 123, 255, .42); }
.vote { background: linear-gradient(115deg, #ff2d87 0%, #ff5c5c 45%, #ff8a3d 100%); background-size: 170% 100%; box-shadow: 0 16px 44px -14px rgba(255, 45, 135, .62), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -10px 22px -12px rgba(0, 0, 0, .3); }
.vote.b { background-image: linear-gradient(115deg, #22e1ff 0%, #3d7bff 48%, #7c5cff 100%); box-shadow: 0 16px 44px -14px rgba(124, 92, 255, .62), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -10px 22px -12px rgba(0, 0, 0, .3); }
.vote.open { animation: vgrad 4.5s ease-in-out infinite alternate; }
.vote .vt, .vote .vsub { text-shadow: 0 1px 10px rgba(0, 0, 0, .28); }
.vote.gated { filter: saturate(.55) brightness(.6); }
.vote.mine { box-shadow: 0 0 0 2px #fff, 0 20px 60px -10px var(--cg); }
@keyframes vgrad { to { background-position: 100% 0; } }
.bmr .st.go { background: linear-gradient(115deg, #ff2d87, #ff8a3d); box-shadow: 0 8px 24px -10px rgba(255, 45, 135, .7); }

/* ================================================================ Charts, rebuilt */
.ch-top { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.ch-top h1 { font: 900 34px/1 var(--d); letter-spacing: -.03em; }
.ch-live { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(49, 229, 154, .12); box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .35); }
.ch-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); animation: pulse 1.6s infinite; }
.ch-tabs { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; margin: 0 -18px; padding: 8px 18px 10px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(var(--bg) 78%, transparent); }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tabs button { flex: none; height: 36px; padding: 0 15px; border-radius: 18px; font: 750 14px var(--f); color: var(--text2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .2s, color .2s; }
.ch-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ch-tabs button.on { color: #000; background: #fff; box-shadow: none; }
.ch-sub { margin: 2px 0 12px; font: 500 13px var(--f); color: var(--muted); }
/* the #1 */
.chero { position: relative; height: clamp(250px, 64vw, 340px); border-radius: 22px; overflow: hidden; cursor: pointer; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.chero .lcm { position: absolute; inset: 0; }
.chero .lcm > div { background-position: 50% 30%; }
.ch-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 46%, rgba(0, 0, 0, .86)); pointer-events: none; }
.ch-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: 15px; font: 750 12px var(--f); color: #fff; background: rgba(10, 10, 16, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ch-badge b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; font: 900 12px var(--d); color: #000; background: linear-gradient(120deg, #6ff0ff, #9b82ff 50%, #ff5aa5); }
.ch-tx { position: absolute; left: 18px; right: 86px; bottom: 16px; display: grid; gap: 3px; }
.ch-tx h2 { font: 900 clamp(24px, 7.4vw, 32px)/1 var(--x); font-stretch: 104%; letter-spacing: -.015em; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.ch-art { font: 650 14px var(--f); color: rgba(255, 255, 255, .86); justify-self: start; }
.ch-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.ch-stat b { font: 900 18px var(--d); }
.ch-stat span { font: 600 12px var(--f); color: rgba(255, 255, 255, .7); }
.ch-play { position: absolute; right: 16px; bottom: 16px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #000; background: #fff; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8); transition: transform .25s var(--spring); }
.ch-play:hover { transform: scale(1.06); }
.ch-play .pv-i svg { width: 22px; height: 22px; margin-left: 3px; }
.ch-play.on { color: #fff; background: linear-gradient(135deg, #22e1ff, #7c5cff 55%, #ff2d87); }
/* the in-list preview: play icon, then bars and a ring while it plays */
.pring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .2s; overflow: visible; }
.pring circle { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 2.6; }
.pring .pr { stroke: #fff; stroke-linecap: round; }
[data-prev].on .pring { opacity: 1; }
.pv-i { display: grid; place-items: center; }
.pv-i .eq { display: none; }
[data-prev].on .pv-i > svg { display: none; }
[data-prev].on .pv-i .eq { display: inline-flex; }
/* rows */
.clist { display: grid; margin-top: 6px; }
.crow2 { display: grid; grid-template-columns: 26px 12px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-radius: 14px; cursor: pointer; transition: background .2s; }
.crow2:hover { background: rgba(255, 255, 255, .04); }
.crow2 .rk { font: 900 17px var(--d); text-align: center; color: #fff; }
.crow2 .mvm { font: 800 10px var(--f); text-align: center; color: var(--muted); }
.crow2 .mvm.up { color: var(--up); }
.crow2 .mvm.down { color: var(--down); }
.crow2 .cv { position: relative; width: 52px; height: 52px; border-radius: 12px; }
.crow2 .cv img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: block; }
.crow2 .cv .pv-i { position: absolute; inset: 0; border-radius: 12px; color: #fff; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .2s; }
.crow2 .cv .pv-i svg { width: 18px; height: 18px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.crow2:hover .cv .pv-i, .crow2 .cv.on .pv-i { opacity: 1; }
.crow2 .cv.on .pv-i { background: rgba(10, 8, 22, .55); }
.crow2 .t { min-width: 0; display: grid; gap: 2px; }
.crow2 .t b { font: 700 15px/1.25 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow2 .t span { justify-self: start; max-width: 100%; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow2 .v { display: flex; align-items: center; gap: 10px; }
.crow2 .sp { width: 46px; height: 18px; }
.crow2 .vv { display: grid; justify-items: end; gap: 0; min-width: 52px; }
.crow2 .vv b { font: 800 15px var(--d); }
.crow2 .vv span { font: 600 11px var(--f); color: var(--muted); }
/* your Ear in one line */
.earstrip { display: flex; align-items: center; gap: 16px; width: 100%; margin: 12px 0 4px; padding: 12px 14px; border-radius: 18px; text-align: left; background: linear-gradient(#0e0e15, #0e0e15) padding-box, linear-gradient(120deg, rgba(34, 225, 255, .55), rgba(124, 92, 255, .55), rgba(255, 45, 135, .55)) border-box; border: 1px solid transparent; }
.earstrip .es-l b { display: block; font: 900 24px/1 var(--d); }
.earstrip .es-k b { display: block; font: 800 15px var(--d); }
.earstrip .tag { display: block; margin-bottom: 3px; }
.earstrip > .i { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.earstrip.guest { justify-content: space-between; font: 500 13px/1.35 var(--f); color: var(--text2); }
.earstrip.guest b { color: #fff; font-weight: 750; }
.earstrip.guest .btn { flex: none; }
/* Top ears podium */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 10px 0 14px; }
.pod { display: grid; justify-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pod.p1 { padding-top: 20px; background: radial-gradient(120% 80% at 50% 0%, rgba(244, 197, 92, .16), rgba(255, 255, 255, .04) 70%); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .35); }
.pod-av { position: relative; }
.pod-av i { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--d); font-style: normal; color: #000; background: #d8d8e0; box-shadow: 0 0 0 3px var(--bg); }
.pod.p1 .pod-av i { background: var(--gold); }
.pod.p3 .pod-av i { background: #e0a070; }
.pod b { max-width: 100%; font: 750 13px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .num { font: 900 16px var(--d); }
.pod.me { box-shadow: inset 0 0 0 2px #fff; }
@media (min-width: 900px) {
  .ch-tabs { margin: 0; padding: 8px 0 10px; }
  .chero { height: 340px; }
}

/* a sheet's body takes its content height (no 9 px scroll on short sheets); it scrolls only when the sheet is full */
.sheet .body { flex: 1 1 auto; }
/* the logo is the way home: For you, from the top */
.lockup, .wordmark { cursor: pointer; text-align: left; }

/* the touch areas of links at the very bottom of a sheet stay inside it (no 9 px scroll) */
.sheet .body { padding-bottom: 10px; }

/* ================================================================ a drop's living cover */
/* the person = the photo through its mask; the mask sits exactly like the photo */
.lc-sub.mk, .lcm-sub.mk, .vs-fig.mkw > i.mk { -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.vs-fig.mkw > i.mk { position: absolute; inset: 0; background: center / cover no-repeat; }
.pf-banner .lcm > div.mk { -webkit-mask-position: 50% 24%; mask-position: 50% 24%; }
.chero .lcm > div.mk { -webkit-mask-position: 50% 30%; mask-position: 50% 30%; }
/* no person: the word gets a shadow of its own so it reads on any picture */
.card.flat .kw { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--hot) 38%, transparent)) drop-shadow(0 6px 26px rgba(0, 0, 0, .6)); }
/* the Drop page: the cover's badge and the preview */
.dr-cover { position: relative; }
.dr-life { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 11px; font: 800 10.5px var(--f); color: #fff; background: rgba(10, 10, 16, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dr-life.ok { background: linear-gradient(120deg, #22e1ff, #7c5cff 55%, #ff2d87); box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .8); }
.dr-life .i { width: 10px; height: 10px; }
.dr-life.busy { width: 22px; padding: 0; justify-content: center; }
.dr-life .ring2 { width: 12px; height: 12px; }
.lpv { position: relative; width: min(100%, 290px); aspect-ratio: 9 / 16; margin: 4px auto 0; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.lpv .lcm { position: absolute; inset: 0; }
.lpv .lcm-bg { animation: pushBg 9s ease-out both; }
.lpv .lcm-sub { animation: pushSub 9s ease-out both; }
.lpv .lcm-kw span { animation: kwIn 1s var(--ease) .25s both; }
.lpv-sh { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .78)); pointer-events: none; }
.lpv-tx { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 3px; }
.lpv-tx q { font: 800 19px/1.1 var(--x); font-stretch: 94%; quotes: none; margin-bottom: 6px; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.lpv-tx b { font: 800 14px var(--x); }
.lpv-tx span { font: 600 12px var(--f); color: rgba(255, 255, 255, .8); }
.lpv-note { margin: 12px 0 2px; text-align: center; font: 500 12.5px var(--f); color: var(--muted); }

/* ================================================================ creator controls */
.tag.mine { color: #fff; background: rgba(124, 92, 255, .22); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .5); }
/* the Manage sheet */
.mhead { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin: 2px 40px 12px 0; }
.mhead img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.mhead b { display: block; font: 800 17px/1.2 var(--d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mst { display: inline-block; margin-top: 4px; font: 700 12px var(--f); color: var(--muted); }
.mst.ok { color: var(--up); }
.mst.rev { color: #ffb74d; }
.mstats { display: grid; grid-template-columns: repeat(4, 1fr) 18px; align-items: center; width: 100%; padding: 12px 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); text-align: center; }
.mstats span { display: grid; font: 600 11.5px var(--f); color: var(--muted); }
.mstats b { font: 800 17px var(--d); color: #fff; }
.mstats > .i { width: 16px; height: 16px; color: var(--muted); }
.mlist { display: grid; margin-top: 8px; }
.mrow2 { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 12px 2px; text-align: left; border-bottom: 1px solid var(--line); }
.mrow2 > .i { width: 19px; height: 19px; color: var(--text2); }
.mrow2 b { display: block; font: 700 14.5px var(--f); }
.mrow2 small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.mrow2:hover b { color: #fff; }
.mrow2.danger b, .mrow2.danger > .i { color: var(--down); }
.mrow2.danger.sure { background: rgba(255, 74, 61, .1); border-radius: 12px; padding-left: 10px; }
.mgrp { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.mgrp .tag { display: block; margin-bottom: 8px; }
.mseg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.mseg button { height: 36px; border-radius: 10px; font: 700 13px var(--f); color: var(--text2); transition: background .2s, color .2s; }
.mseg button.on { color: #000; background: #fff; }
.mhint { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); }
.cmt-off { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; font: 600 13px var(--f); color: var(--text2); background: rgba(255, 255, 255, .05); }
.cmt-off .i { width: 15px; height: 15px; }
/* stories */
.stories { display: flex; gap: 14px; margin: 0 -18px 16px; padding: 4px 18px 6px; overflow-x: auto; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.st-item { flex: none; display: grid; justify-items: center; gap: 6px; width: 70px; }
.st-item b { max-width: 70px; font: 650 11.5px var(--f); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ring { position: relative; width: 66px; height: 66px; padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, #22e1ff, #7c5cff, #ff2d87, #ff8a3d, #22e1ff); }
.st-ring.off { background: rgba(255, 255, 255, .12); }
.st-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); display: block; }
.st-ring i { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 15px/1 var(--f); font-style: normal; color: #fff; background: linear-gradient(135deg, #22e1ff, #7c5cff 55%, #ff2d87); box-shadow: 0 0 0 3px var(--bg); }
.panel .stories { margin: 6px 0 0; padding: 2px 0 4px; }
.panel .st-item { width: 62px; }
.panel .st-ring { width: 58px; height: 58px; }
/* a story rings the avatar (the feed rail, profiles) */
.rav.st img { box-shadow: 0 0 0 2px #0a0a0f, 0 0 0 4px #ff2d87, 0 6px 18px rgba(0, 0, 0, .45); }
.pf-avw.st { cursor: pointer; }
.pf-avw.st .pf-av { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px #7c5cff, 0 0 0 9px rgba(255, 45, 135, .7); }
.pin-tag.lock { display: inline-flex; align-items: center; gap: 4px; left: auto; right: 8px; }
.pin-tag.lock .i { width: 11px; height: 11px; }
/* the drop's choices */
.dr-opts { display: grid; gap: 0; margin-top: 4px; }
.dr-opts .mgrp { padding: 10px 0 8px; }
/* pick a hook for the story */
.mpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mpick button { display: grid; gap: 6px; text-align: left; }
.mpick img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.mpick b { font: 700 12.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* who can watch, on your own grid: a quiet label, never mistaken for a Follow button */
.pin-tag.lock { background: rgba(10, 10, 16, .72); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; max-width: none; }

/* ================================================================ Version Clash */
.tg.vt { color: #fff; border-color: rgba(124, 92, 255, .6); background: linear-gradient(120deg, rgba(34, 225, 255, .18), rgba(124, 92, 255, .22), rgba(255, 45, 135, .18)); }
.vtcard { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: 12px; align-items: center; margin: 4px 0 12px; padding: 14px; border-radius: 18px; cursor: pointer; border: 1.5px solid transparent; background: linear-gradient(#101017, #101017) padding-box, linear-gradient(120deg, rgba(34, 225, 255, .5), rgba(124, 92, 255, .5), rgba(255, 45, 135, .5)) border-box; transition: box-shadow .25s; }
.vtcard.on { box-shadow: 0 18px 50px -20px rgba(124, 92, 255, .8); background: linear-gradient(#141020, #141020) padding-box, linear-gradient(120deg, #22e1ff, #7c5cff, #ff2d87) border-box; }
.vtcard input { width: 20px; height: 20px; accent-color: #7c5cff; }
.vt-ic { display: grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 3px; height: 44px; border-radius: 12px; font: italic 900 16px var(--x); color: #fff; background: linear-gradient(120deg, #ff2d87, #ff8a3d 48%, #22e1ff 52%, #7c5cff); }
.vt-ic i { font: italic 800 10px var(--x); opacity: .85; }
.vtcard b { display: block; font: 800 15px var(--f); }
.vtcard small { display: block; margin-top: 3px; font: 500 12.5px/1.35 var(--f); color: var(--text2); }
.vtb p { margin: 8px 0 0; font: 500 12.5px/1.4 var(--f); color: var(--muted); }
.vtbar { height: 10px; border-radius: 6px; overflow: hidden; background: linear-gradient(90deg, #22e1ff, #7c5cff); }
.vtbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff2d87, #ff8a3d); border-right: 2px solid #0e0e15; transition: width .6s var(--ease); }
.vtn { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font: 600 12px var(--f); color: var(--muted); }
.vtn b { font: 900 15px var(--d); color: #fff; }

/* the smallest phones (640 px tall): sheets get compact so short ones fit without scrolling */
@media (max-height: 700px) and (max-width: 899px) {
  .sheet { padding-top: 4px; }
  .sheet .grab { margin-bottom: 8px; }
  .sheet h4 { font-size: 17px; }
  .sheet .sub { margin-bottom: 10px; }
  .sheet img[data-prev] { max-height: 30vh; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
  .ci-amt button { height: 46px; }
  .ci-top img { width: 46px; height: 46px; }
  .set-row { padding: 9px 0; }
}

/* ================================================================ release kit */
.rk { display: grid; gap: 10px; }
.rk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 12px; align-items: center; width: 100%; padding: 13px 14px; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .2s; }
.rk-row:hover { background: rgba(255, 255, 255, .09); }
.rk-row > .i { width: 18px; height: 18px; color: var(--text2); }
.rk-row b { display: block; font: 750 14.5px var(--f); }
.rk-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.rk-row.busy { opacity: .6; pointer-events: none; }
.rk-txt { border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); overflow: hidden; }
.rk-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 0 14px; }
.rk-h b { font: 750 13px var(--f); color: var(--text2); }
.rk-txt pre { margin: 0; padding: 8px 14px 12px; max-height: 150px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 500 13px/1.45 var(--f); color: #fff; user-select: text; }
.rk-tips { padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(34, 225, 255, .08), rgba(124, 92, 255, .1), rgba(255, 45, 135, .08)); }
.rk-tips b { display: block; margin-bottom: 6px; font: 800 13.5px var(--f); }
.rk-tips p { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: 6px 0 0; font: 500 12.5px/1.4 var(--f); color: var(--text2); }
.rk-tips .i { width: 14px; height: 14px; margin-top: 2px; color: var(--up); }

/* ================================================================ virtual artists */
.myart { margin: 16px 18px 0; }
.myart .h2 { margin: 0 0 10px; }
.ma-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ma-row::-webkit-scrollbar { display: none; }
.ma { flex: none; display: grid; justify-items: center; gap: 4px; width: 104px; padding: 12px 6px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .2s; }
.ma:hover { background: rgba(255, 255, 255, .085); }
.ma img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0e0e15, 0 0 0 4px rgba(124, 92, 255, .7); }
.ma b { max-width: 96px; font: 750 13px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma span { max-width: 96px; font: 500 11.5px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma.add { background: linear-gradient(#0e0e15, #0e0e15) padding-box, linear-gradient(120deg, rgba(34, 225, 255, .55), rgba(124, 92, 255, .55), rgba(255, 45, 135, .55)) border-box; border: 1px solid transparent; box-shadow: none; }
.ma-plus { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #22e1ff, #7c5cff 55%, #ff2d87); }
.ma-plus .i { width: 22px; height: 22px; }
.af-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.af-tx { font: 700 14px var(--f); }
.af-tx small { display: block; font: 500 12px var(--f); color: var(--muted); }
.fld em.ok { color: var(--up); font-style: normal; }
.fld em.no { color: var(--down); font-style: normal; }
.danger-txt { color: var(--down) !important; background: rgba(255, 74, 61, .08) !important; }
.danger-txt.sure { background: rgba(255, 74, 61, .2) !important; }
.dr-as { display: flex; align-items: center; gap: 6px; }
.dr-as > span { font: 600 12.5px var(--f); color: var(--muted); }
.dr-as select { min-width: 0; max-width: 100%; height: 30px; padding: 0 28px 0 10px; border-radius: 9px; border: 0; font: 650 13.5px var(--f); color: #fff; background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 9px center / 12px no-repeat; -webkit-appearance: none; appearance: none; }
.dr-as select option { color: #000; }

/* ================================================================ polish: page header, finer hearts */
/* the back button lives in a header bar: the banner (and the name on it) starts below */
.uv-head { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; min-height: calc(var(--top) + 56px); padding: var(--top) 14px 0 10px; background: rgba(6, 6, 9, .74); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.uv-head .uv-back { position: static; left: auto; top: auto; flex: none; width: 38px; height: 38px; background: rgba(255, 255, 255, .08); }
.uv-head .uv-back:hover { background: rgba(255, 255, 255, .15); }
.uv-ttl { min-width: 0; font: 800 16px var(--d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .uv-head .uv-back { left: auto; } }
/* the rail's icons a little smaller */
.act svg { width: 31px; height: 31px; }
.act .gtok { width: 36px; height: 36px; }
/* the like: a crisp pop, a ring and eight brand dots (no big flying heart on the button) */
.act[data-act="like"] { position: relative; --ic: 15.5px; }
.act[data-act="like"]::before { content: ""; position: absolute; left: 50%; top: var(--ic); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid #ff2d87; opacity: 0; pointer-events: none; }
.act[data-act="like"]::after { content: ""; position: absolute; left: 50%; top: var(--ic); width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 -20px 0 #ff2d87, 14px -14px 0 #ff8a3d, 20px 0 0 #7c5cff, 14px 14px 0 #22e1ff, 0 20px 0 #ff2d87, -14px 14px 0 #ff8a3d, -20px 0 0 #7c5cff, -14px -14px 0 #22e1ff; }
.act.pop svg { animation: likePop .55s cubic-bezier(.2, .9, .3, 1.25); }
.act.pop[data-act="like"]::before { animation: likeRing .5s ease-out; }
.act.pop[data-act="like"]::after { animation: likeDots .6s ease-out; }
@keyframes likePop { 0% { transform: scale(1); } 22% { transform: scale(.76); } 58% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes likeRing { 0% { transform: scale(.3); opacity: .95; border-width: 7px; } 100% { transform: scale(1.35); opacity: 0; border-width: 1px; } }
@keyframes likeDots { 0% { transform: scale(.45); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@media (min-width: 900px) { .card.tk .rail .act[data-act="like"] { --ic: 25px; } .card.tk .rail .act[data-act="like"]::before { width: 50px; height: 50px; margin: -25px 0 0 -25px; } }
/* the double tap: smaller, softer */
.burst { width: 92px; height: 92px; margin: -46px 0 0 -46px; animation: burst2 .9s cubic-bezier(.2, .8, .3, 1) forwards; }
.burst svg { position: relative; filter: drop-shadow(0 6px 18px rgba(255, 45, 135, .45)); }
.bwave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 45, 135, .7); animation: bwave .7s ease-out forwards; }
@keyframes burst2 { 0% { transform: scale(.3) rotate(var(--rot)); opacity: 0; } 22% { transform: scale(1.08) rotate(var(--rot)); opacity: 1; } 45% { transform: scale(.96) rotate(var(--rot)); } 70% { transform: scale(1) rotate(var(--rot)); opacity: 1; } 100% { transform: translateY(-40px) scale(.9) rotate(var(--rot)); opacity: 0; } }
@keyframes bwave { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.spark { width: 5px; height: 5px; animation: spark .7s cubic-bezier(.2, .8, .3, 1) forwards; }

/* people: their photo, or a centred initial */
.av { font-family: var(--f); font-weight: 800; line-height: 1; letter-spacing: 0; color: #fff; overflow: hidden; }
.av.img { background: #1a1a22; }
.av.img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================================ Taste DNA, the full page */
.dnax { padding: 6px 18px 30px; }
.dx-hero { position: relative; display: grid; justify-items: center; text-align: center; padding: 10px 0 6px; }
.dx-hero::before { content: ""; position: absolute; left: 50%; top: 40px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .28), transparent 66%); filter: blur(20px); pointer-events: none; }
.dx-aura { position: relative; width: min(300px, 78vw); aspect-ratio: 1; }
.dx-aura svg { width: 100%; height: 100%; }
.dx-hero .tag { position: relative; margin-top: 6px; }
.dx-hero h2 { position: relative; margin: 4px 0 4px; font: 900 clamp(30px, 8vw, 40px)/1 var(--d); letter-spacing: -.02em; color: transparent; background-image: linear-gradient(100deg, #6ff0ff, #9b82ff 50%, #ff5aa5); -webkit-background-clip: text; background-clip: text; }
.dx-hero p { position: relative; max-width: 320px; margin: 0 0 12px; font: 500 14px/1.45 var(--f); color: var(--text2); }
.dx-match { position: relative; font: 600 13px var(--f); color: var(--text2); }
.dx-match b { font: 900 18px var(--d); color: #fff; }
.dx-sec { margin-top: 22px; }
.dx-sec .h2 { margin: 0 0 10px; }
.dx-tr { margin-bottom: 12px; }
.dx-trh { display: flex; justify-content: space-between; align-items: baseline; }
.dx-trh b { font: 750 14px var(--f); }
.dx-trh span { font: 900 15px var(--d); }
.dx-tr.top .dx-trh span { color: transparent; background-image: linear-gradient(90deg, #6ff0ff, #ff5aa5); -webkit-background-clip: text; background-clip: text; }
.dx-bar { height: 8px; margin: 6px 0 4px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.dx-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #22e1ff, #7c5cff 55%, #ff2d87); transition: width 1s var(--ease) var(--dl, 0ms); }
.dnax.in .dx-bar i { width: var(--w); }
.dx-tr small { font-size: 12px; color: var(--muted); }
.dx-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dx-nums div { display: grid; gap: 2px; padding: 12px 8px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .045); }
.dx-nums b { font: 900 18px var(--d); }
.dx-nums span { font: 600 11px var(--f); color: var(--muted); }
.dx-clock { display: grid; justify-items: center; padding: 6px 0 2px; border-radius: 18px; background: rgba(255, 255, 255, .03); }
.dx-clock svg { width: min(240px, 66vw); }
.dx-clock text { font: 700 10px var(--f); fill: rgba(255, 255, 255, .45); text-anchor: middle; }
.dx-clock p { margin: 0 0 12px; font: 650 13px var(--f); color: var(--text2); }
.dx-art { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 8px 4px; text-align: left; }
.dx-art img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.dx-an b { display: block; font: 750 14px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-an i { display: block; height: 5px; width: var(--w); margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, #22e1ff, #7c5cff, #ff2d87); }
.dx-am { font: 700 12.5px var(--f); color: var(--muted); }
.dx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dx-cell { display: grid; gap: 4px; text-align: left; }
.dx-cell img { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; }
.dx-cell b { font: 700 12.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-cell span { font: 600 11px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-twin { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 12px; align-items: center; width: 100%; padding: 8px 4px; text-align: left; }
.dx-twin b { display: block; font: 750 14px var(--f); }
.dx-twin small { font-size: 12px; color: var(--muted); }
.dx-twin > .i { width: 16px; height: 16px; color: var(--muted); }
.dx-empty { padding: 18px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .04); }
.dx-empty b { display: block; font: 800 16px var(--d); }
.dx-empty p { margin: 6px 0 12px; font: 500 13px/1.45 var(--f); color: var(--text2); }
.dx-how { display: flex; gap: 8px; align-items: flex-start; margin: 22px 0 0; font: 500 12px/1.45 var(--f); color: var(--muted); }
.dx-how .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
/* ================================================================ after the vote: what comes next
   The A/B buttons give way to one launcher: the next battle's covers, a countdown that fills it, and a way to stay. */
.card.clash.voted .votes { display: none; }
.nx-row { display: flex; margin-top: 14px; animation: nxIn .6s var(--spring) both; }
.nx { --p: 0; position: relative; flex: 1; min-width: 0; min-height: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) 48px; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-radius: 20px; text-align: left; color: #fff; isolation: isolate; overflow: hidden; border: 1.5px solid transparent; background-image: linear-gradient(rgba(17, 13, 27, .96), rgba(17, 13, 27, .96)), linear-gradient(115deg, #ff2d87, #ff8a3d 30%, #22e1ff 64%, #7c5cff); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 260% 100%; animation: nxBorder 3.6s ease-in-out infinite alternate; box-shadow: 0 22px 54px -22px rgba(255, 45, 135, .75), 0 16px 50px -24px rgba(34, 225, 255, .65); transition: transform .18s var(--ease); }
.nx::before { content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left center; transform: scaleX(var(--p)); background: linear-gradient(90deg, rgba(255, 45, 135, .2), rgba(255, 138, 61, .18) 40%, rgba(124, 92, 255, .3)); }
.nx:active { transform: scale(.985); }
.nx-vs { position: relative; display: flex; }
.nx-vs img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 26%; background: #222; box-shadow: 0 0 0 2px #ff5c5c, 0 8px 18px -6px rgba(0, 0, 0, .8); }
.nx-vs img + img { margin-left: -12px; box-shadow: 0 0 0 2px #22e1ff, 0 8px 18px -6px rgba(0, 0, 0, .8); }
.nx-vs i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; font: italic 900 9px/1 var(--x); font-stretch: 116%; color: #fff; background: #120e1d; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .32), 0 4px 10px rgba(0, 0, 0, .6); }
.nx-one img, .nx-done { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; background: #222; }
.nx-done { display: grid; place-items: center; color: #06110c; background: linear-gradient(135deg, #31e59a, #22e1ff); }
.nx-done svg { width: 24px; height: 24px; stroke-width: 2.6; }
.nx-tx { min-width: 0; display: grid; gap: 2px; }
.nx-tx small { font: 800 10px/1.25 var(--x); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase; color: #ff9a6b; background-image: linear-gradient(90deg, #ff8a3d, #ff2d87 48%, #b9a8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-tx b { font: 800 14.5px/1.25 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-tx b em { font-style: normal; font-weight: 600; color: var(--muted); }
.nx-tx > span { display: flex; align-items: center; gap: 4px; min-width: 0; font: 650 12px/1.3 var(--f); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-tx > span svg { width: 13px; height: 13px; flex: none; color: var(--volt); stroke-width: 2.2; }
.nx-ring { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #0b0b10; background: #fff; box-shadow: 0 10px 28px -8px rgba(255, 255, 255, .42); }
.nx-ring svg:not(.i) { position: absolute; left: -5px; top: -5px; width: 58px; height: 58px; transform: rotate(-90deg); overflow: visible; }
.nx-ring circle { fill: none; stroke-width: 3; stroke: rgba(255, 255, 255, .16); }
.nx-ring circle.p { stroke: #fff; stroke-linecap: round; }
.nx-ring svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
.nx-s { font: 800 18px/1 var(--f); font-variant-numeric: tabular-nums; }
.nx.live .nx-ring svg.i, .nx:not(.live) .nx-s { display: none; }
.tstay { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px 0 10px; border-radius: 16px; font: 700 12.5px var(--f); color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .2s; }
.tstay:hover { background: rgba(255, 255, 255, .14); }
.tstay svg { width: 14px; height: 14px; stroke-width: 2.4; }
.slbl .yp { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 8px 0 6px; border-radius: 10px; font: 850 9px/1 var(--x); font-stretch: 112%; letter-spacing: .1em; color: #fff; text-shadow: none; animation: nxIn .5s var(--spring) both; }
.slbl .yp svg { width: 10px; height: 10px; stroke-width: 3.2; }
.corner.a .slbl .yp { background: linear-gradient(115deg, #ff2d87, #ff8a3d); box-shadow: 0 6px 16px -6px rgba(255, 45, 135, .8); }
.corner.b .slbl .yp { background: linear-gradient(115deg, #22e1ff, #3d7bff 50%, #7c5cff); box-shadow: 0 6px 16px -6px rgba(61, 123, 255, .8); }
.corner.picked .slbl .sdn { display: none; }
.tfoot .tfin { flex: none; font: 600 12px var(--f); color: var(--muted); white-space: nowrap; }
/* after the vote a side's button replays it: bars, not the 8 s count */
.card.clash.voted .corner.playing .cplay .cnum { display: none; }
.card.clash.voted .corner.playing .cplay .eq { display: inline-flex; }
.card.clash.voted .corner .cplay .cring { opacity: 0; }
@keyframes nxIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes nxBorder { to { background-position: 0 0, 100% 0; } }
@media (max-height: 760px) {
  .card.clash .nx-row { margin-top: 10px; }
  .card.clash .nx { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
}

/* ================================================================ ink: the big words in their own photo's colours
   (--ink the letters, --ink2 the glow, --ink3 the deep end; a card without them falls back to its warm light) */
.card, .lcm { --ink: var(--hot); --ink2: var(--ink); --ink3: color-mix(in srgb, var(--ink) 62%, #000); }
.kw { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--ink2) 46%, transparent)); }
.kw i { background-image: linear-gradient(180deg, #fff 8%, color-mix(in oklab, var(--ink) 45%, #fff) 38%, var(--ink) 72%, var(--ink3) 100%); }
.kw.v2 i { background-image: none; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 78%, #fff); }
.card.flat .kw { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--ink2) 38%, transparent)) drop-shadow(0 6px 26px rgba(0, 0, 0, .6)); }
.lyr .ln .w.key.sung { color: color-mix(in srgb, var(--ink) 62%, #fff); text-shadow: 0 0 26px color-mix(in srgb, var(--ink) 75%, transparent); }
.card.tk .tbar i { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 60%, #fff), #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--ink) 75%, transparent); }
.lcm-kw span { background-image: linear-gradient(180deg, #fff 8%, color-mix(in oklab, var(--ink) 45%, #fff) 38%, var(--ink) 72%, var(--ink3)); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ink2) 40%, transparent)); }

/* ================================================================ looks: every hook its own visual identity
   Each look sets the big word's face and colour, the photo's grade, an effect layer (.lc-fx in the feed, .lcm-fx on
   still covers; effects move only on the playing card) and the sung line. Kinetic is the house look: no overrides. */
.lc-fx, .lcm-fx { pointer-events: none; overflow: hidden; }
.lc-fx::before, .lc-fx::after, .lcm-fx::before, .lcm-fx::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* -- Cinematic: Bebas caps in white light, a cool high-contrast grade, a lens flare across the frame, subtitles */
.card.look-cinema .lc-bg, .lcm.look-cinema .lcm-bg { filter: brightness(.76) saturate(.9) contrast(1.18); }
.look-cinema .lc-fx::after, .look-cinema .lcm-fx::after { background: linear-gradient(180deg, rgba(0, 46, 70, .36), rgba(0, 0, 0, 0) 45%, rgba(255, 120, 40, .16)); mix-blend-mode: soft-light; }
.look-cinema .lc-fx::before, .look-cinema .lcm-fx::before { inset: 37% -10% auto; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 70%, #fff) 50%, transparent); box-shadow: 0 0 24px 7px color-mix(in srgb, var(--ink) 40%, transparent); opacity: .55; mix-blend-mode: screen; }
.card.on.look-cinema .lc-fx::before { animation: lkFlare 9s ease-in-out infinite alternate; }
@keyframes lkFlare { from { opacity: .3; transform: translateX(-6%); } to { opacity: .75; transform: translateX(6%); } }
.card.look-cinema .kw, .lcm.look-cinema .lcm-kw span { font-family: "Bebas Neue", var(--x); font-weight: 400; font-stretch: normal; letter-spacing: .015em; line-height: .86; }
.card.look-cinema .kw:not(.ghost) { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--ink2) 40%, transparent)) drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.card.look-cinema .kw:not(.v2) i, .lcm.look-cinema .lcm-kw span { background-image: linear-gradient(180deg, #fff 35%, color-mix(in oklab, var(--ink) 34%, #fff)); }
.card.look-cinema .lyr, .card.look-romance .lyr, .card.look-dream .lyr, .card.look-gold .lyr, .card.look-minimal .lyr { text-align: center; }
.card.look-cinema .lyr .ln { font: 600 clamp(15px, 4.4vw, 19px) / 1.42 var(--f); letter-spacing: .1em; text-transform: uppercase; font-stretch: 100%; }

/* -- Neon night: a neon script that flickers on, rain over the city, the night pushed toward its own neon */
.card.look-neon .lc-bg, .lcm.look-neon .lcm-bg { filter: brightness(.7) saturate(1.3) contrast(1.14); }
.look-neon .lc-fx::after, .look-neon .lcm-fx::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 20%, transparent), transparent 42%, color-mix(in srgb, var(--ink2) 18%, transparent)); mix-blend-mode: screen; }
.look-neon .lc-fx::before, .look-neon .lcm-fx::before { inset: -180px 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='180'%3E%3Cg stroke='white' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M14 8l-3 30' stroke-opacity='.42'/%3E%3Cpath d='M52 64l-3 26' stroke-opacity='.26'/%3E%3Cpath d='M90 20l-4 34' stroke-opacity='.36'/%3E%3Cpath d='M106 112l-3 28' stroke-opacity='.3'/%3E%3Cpath d='M32 124l-3 24' stroke-opacity='.24'/%3E%3Cpath d='M72 150l-2 20' stroke-opacity='.32'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 180px repeat; opacity: .5; }
.lcm.look-neon .lcm-fx::before { inset: 0; background-size: 60px 90px; }
.card.on.look-neon .lc-fx::before { animation: lkRain .45s linear infinite; }
@keyframes lkRain { to { transform: translate3d(0, 180px, 0); } }
.card.look-neon .kw, .lcm.look-neon .lcm-kw span { font-family: Neonderthaw, cursive; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.card.look-neon .kw:not(.ghost) { filter: none; }
.card.look-neon .kw i, .lcm.look-neon .lcm-kw span { padding: 0 .22em; color: #fff; background-image: none; text-shadow: 0 0 2px #fff, 0 0 8px var(--ink), 0 0 20px var(--ink), 0 0 44px var(--ink2), 0 0 90px color-mix(in srgb, var(--ink2) 60%, transparent); }
.lcm.look-neon .lcm-kw span { filter: none; }
.card.look-neon .kw.in i { animation: lkNeon 1.5s linear both; }
@keyframes lkNeon { 0% { opacity: 0; } 7% { opacity: .9; } 10% { opacity: .1; } 15% { opacity: 1; } 21% { opacity: .35; } 25%, 100% { opacity: 1; } }
.card.look-neon .lyr .ln .w.sung { color: #fff; text-shadow: 0 0 10px var(--ink), 0 0 24px var(--ink2); }

/* -- Romantic: a handwritten script that writes itself, warm-pink light leaks breathing at the edges */
.card.look-romance .lc-bg, .lcm.look-romance .lcm-bg { filter: brightness(.86) saturate(1.12) contrast(1.02) sepia(.1); }
.look-romance .lc-fx::after, .look-romance .lcm-fx::after { background: radial-gradient(55% 38% at 0% 16%, rgba(255, 150, 120, .42), transparent 70%), radial-gradient(50% 34% at 100% 74%, rgba(255, 92, 168, .32), transparent 70%); mix-blend-mode: screen; }
.card.on.look-romance .lc-fx::after { animation: lkLeak 7s ease-in-out infinite alternate; }
@keyframes lkLeak { from { opacity: .5; } to { opacity: 1; } }
.card.look-romance .kw, .lcm.look-romance .lcm-kw span { font-family: "Great Vibes", cursive; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.card.look-romance .kw:not(.ghost) { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--ink2) 45%, transparent)) drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
.card.look-romance .kw i, .lcm.look-romance .lcm-kw span { padding: 0 .22em; background-image: linear-gradient(180deg, #fff 22%, color-mix(in oklab, var(--ink) 30%, #ffe0e8) 68%, color-mix(in oklab, var(--ink) 55%, #ff8fb1)); }
.card.look-romance .kw.in i { animation: lkWrite 1.3s cubic-bezier(.3, .1, .25, 1) both; }
@keyframes lkWrite { from { clip-path: inset(0 100% 0 0); opacity: .3; } 25% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.card.look-romance .lyr .ln { font: italic 400 clamp(27px, 8.2vw, 35px) / 1.04 var(--serif); letter-spacing: 0; font-stretch: 100%; }

/* -- Gold: Cinzel caps in metal, gold bokeh drifting up, a warm floor of light */
.card.look-gold .lc-bg, .lcm.look-gold .lcm-bg { filter: brightness(.8) saturate(1.05) contrast(1.08) sepia(.2); }
.look-gold .lc-fx::after, .look-gold .lcm-fx::after { background: radial-gradient(80% 50% at 50% 100%, rgba(244, 197, 92, .22), transparent 70%); mix-blend-mode: screen; }
.card.look-gold .lc-dust i { background: radial-gradient(circle, #fff7d6 0, #f3c55c 38%, rgba(243, 197, 92, 0) 70%); }
.card.look-gold .kw, .lcm.look-gold .lcm-kw span { font-family: Cinzel, serif; font-weight: 700; font-stretch: normal; letter-spacing: .04em; line-height: .95; }
.card.look-gold .kw:not(.ghost), .lcm.look-gold .lcm-kw:not(.lcm-ghost) span { filter: drop-shadow(0 0 16px rgba(244, 197, 92, .38)) drop-shadow(0 5px 14px rgba(0, 0, 0, .55)); }
.card.look-gold .kw:not(.v2) i, .lcm.look-gold .lcm-kw span { background-image: linear-gradient(180deg, #fff8dc 0%, #f6dc8a 30%, #d9a842 58%, #fff1b8 66%, #b07a26 100%); }
.card.look-gold .kw.v2 i { -webkit-text-stroke: 2px #f0c86a; }
.card.look-gold .lyr .ln { font: 600 clamp(15px, 4.4vw, 19px) / 1.45 Cinzel, serif; letter-spacing: .08em; font-stretch: 100%; }
.card.look-gold .lyr .ln .w.sung, .card.look-gold .lyr .ln .w.key.sung { color: #f6d27a; text-shadow: 0 0 18px rgba(244, 197, 92, .45); }

/* -- Dreamy: a soft serif italic that comes out of the haze, stars twinkling in the sky */
.card.look-dream .lc-bg, .lcm.look-dream .lcm-bg { filter: brightness(.92) saturate(1.2) contrast(.98); }
.look-dream .lc-fx, .look-dream .lcm-fx { background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--ink2) 24%, transparent), transparent 70%); }
.look-dream .lc-fx::before, .look-dream .lcm-fx::before { bottom: 45%; background-image: radial-gradient(1.6px 1.6px at 8% 14%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 32%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 37% 9%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 51% 26%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 66% 12%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 79% 35%, #fff 50%, transparent 51%), radial-gradient(1.7px 1.7px at 91% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 15% 58%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 45% 64%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 72% 70%, #fff 50%, transparent 51%); background-repeat: no-repeat; }
.look-dream .lc-fx::after, .look-dream .lcm-fx::after { bottom: 45%; background-image: radial-gradient(1.3px 1.3px at 12% 40%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 29% 6%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 43% 44%, #fff 50%, transparent 51%), radial-gradient(1.9px 1.9px at 58% 20%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 84% 52%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 95% 8%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 4% 72%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 80%, #fff 50%, transparent 51%); background-repeat: no-repeat; }
.card.on.look-dream .lc-fx::before { animation: lkTwinkle 2.8s ease-in-out infinite alternate; }
.card.on.look-dream .lc-fx::after { animation: lkTwinkle 3.7s ease-in-out infinite alternate-reverse; }
@keyframes lkTwinkle { from { opacity: .2; } to { opacity: 1; } }
.card.look-dream .kw, .lcm.look-dream .lcm-kw span { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-stretch: normal; text-transform: none; letter-spacing: 0; line-height: 1.1; }
.card.look-dream .kw:not(.ghost) { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ink2) 55%, transparent)) drop-shadow(0 0 2px rgba(255, 255, 255, .5)); }
.card.look-dream .kw i, .lcm.look-dream .lcm-kw span { padding: 0 .12em; background-image: linear-gradient(180deg, #fff 35%, color-mix(in oklab, var(--ink) 38%, #fff)); }
.card.look-dream .kw.in i { animation: lkDream 1.6s var(--ease) both; }
@keyframes lkDream { from { opacity: 0; filter: blur(14px); transform: scale(1.05); } to { opacity: 1; filter: none; transform: none; } }
.card.look-dream .lyr .ln { font: italic 500 clamp(25px, 7.6vw, 32px) / 1.08 "Cormorant Garamond", serif; letter-spacing: 0; font-stretch: 100%; }
.card.look-dream .lyr .ln .w.sung { text-shadow: 0 0 16px color-mix(in srgb, var(--ink2) 70%, transparent); }

/* -- Film: a warm faded print, heavy grain, a light leak that flickers, Playfair italic and a typewriter line */
.card.look-film .lc-bg, .card.look-film .lc-sub, .lcm.look-film .lcm-bg, .lcm.look-film .lcm-sub { filter: sepia(.4) saturate(.8) contrast(.94) brightness(.9); }
.card.look-film.tk::after { opacity: .26; }
.look-film .lc-fx::after, .look-film .lcm-fx::after { background: radial-gradient(60% 45% at 100% 0%, rgba(255, 160, 80, .34), transparent 70%); mix-blend-mode: screen; }
.look-film .lc-fx::before, .look-film .lcm-fx::before { box-shadow: inset 0 0 140px 30px rgba(20, 10, 0, .62); }
.card.on.look-film .lc-fx::after { animation: lkFlick 2.6s steps(4) infinite; }
@keyframes lkFlick { 0% { opacity: .95; } 25% { opacity: .7; } 50% { opacity: 1; } 75% { opacity: .82; } }
.card.look-film .kw, .lcm.look-film .lcm-kw span { font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; font-stretch: normal; text-transform: none; letter-spacing: -.01em; line-height: 1.12; }
.card.look-film .kw:not(.ghost) { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
.card.look-film .kw i, .lcm.look-film .lcm-kw span { padding: 0 .1em; background-image: linear-gradient(180deg, #fff6e6 20%, #f1dcb6 70%, #d9b98a); }
.card.look-film .kw.in i { animation: lkFade 1.1s ease both; }
@keyframes lkFade { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }
.card.look-film .lyr .ln { font: 700 clamp(16px, 4.8vw, 20px) / 1.55 "Courier Prime", ui-monospace, monospace; letter-spacing: 0; font-stretch: 100%; text-shadow: none; }
.card.look-film .lyr .ln .w { color: rgba(255, 244, 222, .72); padding: 0 .12em; border-radius: 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.card.look-film .lyr .ln .w.sung, .card.look-film .lyr .ln .w.key.sung { color: #1d1206; background: #f3d983; text-shadow: none; }

/* -- Minimal: a muted, darker photo, a small serif word, an elegant centred line */
.card.look-minimal .lc-bg, .lcm.look-minimal .lcm-bg { filter: brightness(.6) saturate(.5) contrast(1.06); }
.card.look-minimal .lc-sub, .lcm.look-minimal .lcm-sub { filter: saturate(.62) brightness(.9); }
.card.look-minimal .lc-glow { opacity: .2; }
.card.look-minimal .lc-dust { display: none; }
.card.look-minimal .kw, .lcm.look-minimal .lcm-kw span { font-family: "Instrument Serif", serif; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: .01em; line-height: 1.05; }
.card.look-minimal .kw:not(.ghost) { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45)); }
.card.look-minimal .kw i, .lcm.look-minimal .lcm-kw span { padding: 0 .08em; color: rgba(255, 255, 255, .95); background-image: none; }
.card.look-minimal .lyr .ln { font: 400 clamp(25px, 7.6vw, 32px) / 1.1 var(--serif); letter-spacing: .005em; font-stretch: 100%; }
.card.look-minimal .lyr .ln .w { color: rgba(255, 255, 255, .42); }
.card.look-minimal .lyr .ln .w.sung, .card.look-minimal .lyr .ln .w.key.sung { color: #fff; text-shadow: none; }

/* the look picker: every look on the song's own cover, the recommended one marked */
.dr-look { margin-top: 12px; display: grid; gap: 8px; }
.lkp { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.lkp::-webkit-scrollbar { display: none; }
.lk { position: relative; flex: none; width: 84px; display: grid; gap: 6px; justify-items: center; scroll-snap-align: start; color: var(--text2); font: 700 11.5px var(--f); }
.lk .lcm { width: 84px; height: 132px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .2s; }
.lk.on .lcm { box-shadow: 0 0 0 2px #fff, 0 10px 26px -8px rgba(124, 92, 255, .75); }
.lk.on b { color: #fff; }
.lk > i { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; font: 800 8.5px/1.3 var(--x); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; background: linear-gradient(115deg, #ff2d87, #7c5cff); }
.lk-none { font: 600 13px var(--f); color: var(--muted); }
.lkg { flex-wrap: wrap; justify-content: center; overflow: visible; padding-top: 8px; }
.lkg .lk { width: calc(25% - 6px); min-width: 74px; }
.lkg .lk .lcm { width: 100%; height: auto; aspect-ratio: 9 / 14; }

/* ================================================================ the user's logo, and the lyric-video looks sing in the middle
   The create button wears the logo's spectrum (cyan, blue, violet, magenta, amber) with a glass highlight. */
img.mark { display: block; object-fit: contain; }
.tabbar .drop { background: linear-gradient(125deg, #1fd4ff 0%, #3a63ff 28%, #9b3dff 56%, #ff2fa6 80%, #ff9d2e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -8px 14px -8px rgba(30, 0, 70, .55), 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 26px -6px rgba(155, 61, 255, .7); }
/* the sung line in the middle of the frame like a lyric video (Kinetic keeps the TikTok lower third, Cinematic its
   subtitles); the next line waits under it, faint */
.lyr .ln2 { display: none; }
.card.look-romance .lyr, .card.look-gold .lyr, .card.look-dream .lyr, .card.look-film .lyr, .card.look-minimal .lyr, .card.look-neon .lyr { top: 55%; bottom: auto; transform: translateY(-50%); }
.card.look-neon .lyr { text-align: center; }
.card.look-romance .lyr .ln { font-size: clamp(30px, 9vw, 40px); }
.card.look-dream .lyr .ln { font-size: clamp(29px, 8.8vw, 38px); }
.card.look-minimal .lyr .ln { font-size: clamp(28px, 8.6vw, 36px); }
.card.look-gold .lyr .ln { font-size: clamp(17px, 5vw, 22px); }
.card.look-film .lyr .ln { font-size: clamp(17px, 5.2vw, 21px); }
.card.look-romance .lyr .ln2, .card.look-gold .lyr .ln2, .card.look-dream .lyr .ln2, .card.look-film .lyr .ln2, .card.look-minimal .lyr .ln2, .card.look-neon .lyr .ln2 { display: block; margin-top: .7em; opacity: .42; text-wrap: balance; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.card.look-romance .lyr .ln2 { font: italic 400 clamp(18px, 5.4vw, 23px) / 1.1 var(--serif); }
.card.look-dream .lyr .ln2 { font: italic 500 clamp(18px, 5.4vw, 23px) / 1.1 "Cormorant Garamond", serif; }
.card.look-minimal .lyr .ln2 { font: 400 clamp(17px, 5.2vw, 22px) / 1.12 var(--serif); }
.card.look-gold .lyr .ln2 { font: 600 clamp(12px, 3.5vw, 15px) / 1.4 Cinzel, serif; letter-spacing: .08em; }
.card.look-film .lyr .ln2 { font: 700 clamp(13px, 3.9vw, 16px) / 1.5 "Courier Prime", monospace; color: rgba(255, 244, 222, .9); }
.card.look-neon .lyr .ln2 { font: 700 clamp(15px, 4.6vw, 19px) / 1.15 var(--f); }
.lyr.swap .ln2 { animation: lnIn .5s var(--ease) .08s both; }

/* ================================================================ the stage: one fixed 9:16 composition, identical everywhere
   Every hook is composed once on a 1080 x 1920 stage (the saved video's frame). A screen only scales it: --u is one stage
   unit here, the whole stage always shows, and a taller phone gets the same photo, blurred, above and below it. */
.lc { container-type: size; }
.lc > .lc-ext { inset: -6%; background: center / cover no-repeat; filter: blur(28px) brightness(.4) saturate(1.2); }
.lc > .stg { inset: auto; left: 50%; top: 50%; --u: min(calc(100cqw / 1080), calc(100cqh / 1920)); width: calc(1080 * var(--u)); height: calc(1920 * var(--u)); transform: translate(-50%, -50%); overflow: hidden; }
.stg > div { position: absolute; inset: 0; }
.card.paused .stg > div { animation-play-state: paused; }
.stg > .lc-grade { z-index: auto; }
.card.tk .stg > .lyr { inset: auto; left: calc(80 * var(--u)); right: calc(180 * var(--u)); bottom: calc(380 * var(--u)); top: auto; transform: none; }
.card.tk.soc .stg > .lyr { bottom: calc(460 * var(--u)); }
.card.tk .stg > .lyr.mid { left: calc(180 * var(--u)); right: calc(180 * var(--u)); top: calc(1060 * var(--u)); bottom: auto; transform: translateY(-50%); }
.card.tk .stg > .lyr .ln { text-wrap: nowrap; }
.card.tk .stg > .lyr .ln2 { margin-top: .7em; }
.look-neon .lc-fx::before { background-size: calc(240 * var(--u)) calc(360 * var(--u)); }

/* ================================================================ Call it, AAA: a glass pill with a slowly turning spectrum
   edge, a rising-hit emblem whose trend line draws itself, and a little shake with a shine every few seconds */
@property --cba { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.backchip { height: 40px; padding: 0 15px 0 5px; gap: 9px; border: 1.5px solid transparent; background: linear-gradient(rgba(16, 12, 26, .66), rgba(16, 12, 26, .66)) padding-box, conic-gradient(from var(--cba), #1fd4ff, #9b3dff, #ff2fa6, #ff9d2e, #1fd4ff) border-box; box-shadow: 0 10px 30px -12px rgba(155, 61, 255, .7); animation: cbSpin 7s linear infinite; }
@keyframes cbSpin { to { --cba: 360deg; } }
.backchip > b { font: 800 14.5px var(--f); letter-spacing: .01em; }
.backchip .cbi { position: relative; width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 9px rgba(155, 61, 255, .6)); transform-origin: 50% 60%; }
.backchip .cbi svg { display: block; width: 100%; height: 100%; }
.backchip .cbi .d { fill: url(#callGrad); }
.backchip .cbi path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.backchip .cbi .tr { stroke-dasharray: 30; }
.backchip .cbi .ok { display: none; }
.card.on .backchip .cbi .tr { animation: cbDraw 1.1s var(--ease) .35s both; }
.card.on .backchip .cbi .ah { animation: cbHead .5s var(--ease) 1.2s both; }
@keyframes cbDraw { from { stroke-dashoffset: 30; } }
@keyframes cbHead { from { opacity: 0; transform: translate(-3px, 3px); } }
.backchip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; }
.card.on .backchip:not(.called) .cbi { animation: cbNudge 5.4s ease-in-out 2.6s infinite; }
.card.on .backchip:not(.called)::after { animation: cbShine 5.4s ease-in-out 2.6s infinite; }
@keyframes cbNudge { 0%, 84%, 100% { transform: none; } 87% { transform: rotate(-14deg) scale(1.14); } 90% { transform: rotate(11deg) scale(1.14); } 93% { transform: rotate(-7deg) scale(1.07); } 96% { transform: rotate(3deg); } }
@keyframes cbShine { 0%, 80% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.backchip:hover .cbi { transform: rotate(-8deg) scale(1.08); transition: transform .25s var(--spring); }
.backchip.called { border-color: transparent; background: linear-gradient(rgba(10, 34, 26, .7), rgba(10, 34, 26, .7)) padding-box, linear-gradient(115deg, #31e59a, #22e1ff) border-box; box-shadow: 0 10px 30px -12px rgba(49, 229, 154, .6); animation: none; }
.backchip.called .cbi { filter: drop-shadow(0 0 9px rgba(49, 229, 154, .6)); }
.backchip.called .cbi .d { fill: #19c27e; }
.backchip.called .cbi .tr, .backchip.called .cbi .ah { display: none; }
.backchip.called .cbi .ok { display: inline; }
@media (prefers-reduced-motion: reduce) { .backchip, .backchip .cbi, .backchip::after, .backchip .cbi path { animation: none !important; } }

/* the line block sits at the same stage place on every card (the friends line no longer moves it) */
.card.tk .stg > .lyr, .card.tk.soc .stg > .lyr { bottom: calc(460 * var(--u)); }
.card.tk .stg > .lyr.mid { bottom: auto; }
.stg .kw.v2 i { -webkit-text-stroke-width: calc(var(--u) * 5); }
.stg .kw:not(.ghost) { filter: drop-shadow(0 0 calc(var(--u) * 60) color-mix(in srgb, var(--ink2) 46%, transparent)); }
.card.tk .stg > .lyr .ln { filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 40) rgba(0, 0, 0, .5)); text-shadow: none; }

/* full song, one tap deeper: in the like toast and the share sheet (the toast with a link takes taps) */
.toast.act { pointer-events: auto; }
.toast .tfull { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; padding: 4px 8px 4px 10px; border-radius: 12px; font: 750 12.5px var(--f); color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); }
.toast .tfull svg { width: 13px; height: 13px; }
.shx .shfull { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }

/* a partial person (a head, a seated or lying person) moves with the room, so the head never leaves its body */
.card.on.part .lc-sub { animation: pushBg 24s cubic-bezier(.45, 0, .55, 1) infinite alternate, bgIn 1.5s var(--ease) both; }
/* in Clash it is the whole photo in colour, only a hint of the side's colour over it */
.vs-panel.whole .vs-bg { filter: saturate(1.05) contrast(1.05) brightness(.92); }
.vs-panel.whole .vs-tint { opacity: .38; }

/* one mark everywhere: the sidebar keeps its 32 px (the old rule sized only an svg), the Vibes coin is the brand mark */
.side .wordmark .mark { width: 32px; height: 32px; }
.coin { border-radius: 23%; background: url("../img/mark.svg?v=25") center / 100% 100% no-repeat; box-shadow: 0 2px 10px rgba(124, 92, 255, .32); }
.coin::after { content: none; }

/* the see-through copy of a word behind the person reads clearly (it used to be 42 %) */
.kw.ghost { opacity: .56; }
.kw.ghost.v2 { opacity: .62; }

/* ================================================================ the weekly bracket, as a broadcast */
.card.bk { background: radial-gradient(70% 36% at 0% 0%, rgba(255, 45, 135, .22), transparent 70%), radial-gradient(70% 36% at 100% 0%, rgba(34, 225, 255, .18), transparent 70%), radial-gradient(55% 26% at 50% 34%, rgba(244, 197, 92, .1), transparent 70%), #07060c; }
.bk h2 { color: transparent; background-image: linear-gradient(100deg, #fff 30%, #ffe6a8 50%, #fff 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: bkSheen 6s ease-in-out infinite; }
@keyframes bkSheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.bkt .floor line { stroke: url(#bkF); stroke-width: 1; }
.bkt .ln { fill: none; stroke: url(#bkL); stroke-opacity: .3; stroke-width: 1.7; stroke-linecap: round; filter: none; }
.bkt .ln.won { stroke: url(#bkG); stroke-opacity: 1; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(244, 197, 92, .75)); }
.bkt .ln.live { stroke-opacity: .85; stroke-dasharray: 3 9; animation: bkFlow 1.1s linear infinite; }
@keyframes bkFlow { to { stroke-dashoffset: -12; } }
.bkt .sl .halo { fill: none; stroke: none; transform-box: fill-box; transform-origin: center; }
.bkt .sl.live .halo { stroke: #ff5c7a; stroke-width: 1.6; animation: bkPulse 1.7s ease-in-out infinite; }
@keyframes bkPulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .15; transform: scale(1.14); } }
.bkt .sl .ring { fill: none; stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .6)); }
.bkt .sl.lost image { filter: grayscale(1) brightness(.5); }
.bkt .sl.lost .ring { stroke: rgba(255, 255, 255, .2); }
.bkt .sl.won .ring { stroke: url(#bkG); stroke-width: 3.2; filter: drop-shadow(0 0 7px rgba(244, 197, 92, .85)); }
.bkt .sl.mine .ring { stroke-width: 3.4; }
.bkt .sl.tbd circle { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; stroke-dasharray: 2 3; }
.bkt .sl.tbd text { font: 800 6.5px var(--x); letter-spacing: .16em; fill: rgba(255, 255, 255, .32); text-anchor: middle; }
.bkt .seed circle { fill: #0b0a12; stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.bkt .seed text { font: 800 8px var(--f); fill: #fff; text-anchor: middle; }
.bkt .cup .rays { transform-box: view-box; transform-origin: 180px 62px; animation: bkRays 22s linear infinite; }
.bkt .cup .rays path { fill: #f4c55c; opacity: .1; }
.bkt .cup.won .rays path { opacity: .22; }
@keyframes bkRays { to { transform: rotate(360deg); } }
.bkt .cup { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.bkt .cl { font: 800 7.5px var(--x); font-stretch: 112%; letter-spacing: .3em; fill: #f4c55c; text-anchor: middle; }
.bkt .ct { font: 850 12.5px var(--x); font-stretch: 105%; fill: #fff; text-anchor: middle; }
.bkt .rl { font: 800 6.8px var(--x); font-stretch: 112%; letter-spacing: .22em; fill: rgba(255, 255, 255, .42); text-anchor: middle; }
/* the fight cards */
.bkl { gap: 9px; }
.fc { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 9px; border-radius: 18px; text-align: left; color: #fff; border: 1px solid transparent; background: linear-gradient(rgba(16, 13, 26, .92), rgba(16, 13, 26, .92)) padding-box, linear-gradient(100deg, rgba(255, 74, 122, .6), rgba(255, 255, 255, .07) 45%, rgba(61, 155, 255, .6)) border-box; transition: transform .18s var(--ease); }
.fc:active { transform: scale(.985); }
.fc.live { box-shadow: 0 14px 40px -18px rgba(255, 45, 135, .65); }
.fc-faces { position: relative; display: flex; align-items: center; }
.fc-faces img, .fc-faces b { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1c1a26; }
.fc-faces .a { box-shadow: 0 0 0 2px #ff4a7a, 0 6px 14px -4px rgba(255, 74, 122, .6); }
.fc-faces .b { margin-left: 12px; box-shadow: 0 0 0 2px #3d9bff, 0 6px 14px -4px rgba(61, 155, 255, .6); }
.fc-faces i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 5px 2px; border-radius: 7px; font: italic 900 9px/1 var(--x); font-stretch: 116%; color: #fff; background: #0b0a12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.fc-tt { min-width: 0; display: grid; gap: 1px; }
.fc-tt small { font: 800 9px var(--x); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fc-tt b { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 13.5px/1.28 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-tt b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.fc-tt b.a::before { background: #ff4a7a; }
.fc-tt b.b::before { background: #3d9bff; }
.fc-tt b.w { color: #ffe39b; }
.fc-st { display: inline-flex; align-items: center; gap: 3px; font: 850 10.5px var(--x); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fc-st.go { padding: 9px 10px 9px 13px; border-radius: 12px; color: #fff; background: linear-gradient(115deg, #ff2d87, #ff8a3d); box-shadow: 0 10px 26px -10px rgba(255, 45, 135, .85); }
.fc-st.done { color: var(--up); }
.fc-st.res { font: 700 12px var(--f); letter-spacing: 0; color: #ffe39b; }
.fc-st svg { width: 14px; height: 14px; }

/* ================================================================ Following, empty: a wall of artists to follow */
.card.empty.fa-wall { display: block; padding: 0; text-align: left; background: #07060c; }
.fa-bg { position: absolute; inset: -12%; background: center / cover no-repeat; filter: blur(42px) brightness(.5) saturate(1.35); }
.fa-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 45% at 50% 0%, rgba(124, 92, 255, .28), transparent 70%), linear-gradient(180deg, rgba(7, 6, 12, .15), rgba(7, 6, 12, .82) 62%); }
.fa-in { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: calc(var(--top) + 74px) 16px calc(var(--tab) + var(--bot) + 24px); }
.fa-in::-webkit-scrollbar { display: none; }
.fa-wall .fa-in h3 { margin: 0; font: 900 40px/.94 var(--x); font-stretch: 112%; letter-spacing: -.025em; text-transform: none; }
.fa-wall .fa-in > p { margin: 10px 0 0; font: 600 14.5px var(--f); color: var(--text2); }
.fa-prog { display: flex; align-items: center; gap: 6px; margin: 16px 0 14px; }
.fa-prog i { width: 28px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); transition: background .3s, box-shadow .3s; }
.fa-prog i.on { background: linear-gradient(90deg, #ff2d87, #ff8a3d); box-shadow: 0 0 12px rgba(255, 45, 135, .6); }
.fa-prog span { margin-left: 6px; font: 700 12.5px var(--f); color: var(--text2); }
.fa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fa-card { position: relative; overflow: hidden; border-radius: 18px; cursor: pointer; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fa-card .lcm { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.fa-card::after { content: ""; position: absolute; inset: 42% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(5, 5, 8, .94)); }
.fa-meta { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 52px; display: grid; gap: 2px; }
.fa-meta b { font: 850 16px/1.15 var(--f); }
.fa-meta span { font: 600 11.5px var(--f); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-fol { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; height: 34px; border-radius: 17px; font: 800 13px var(--f); color: #fff; background: linear-gradient(115deg, #ff2d87, #9b3dff); box-shadow: 0 10px 24px -10px rgba(255, 45, 135, .85); transition: transform .18s var(--spring), background .25s; }
.fa-fol:active { transform: scale(.96); }
.fa-fol.on { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.fa-in .fa-go { width: 100%; margin-top: 16px; }
.fa-in .fa-back { width: 100%; margin-top: 10px; }
.card.empty.fa-wall, .fa-wall .fa-in, .fa-wall .fa-in h3 { color: #fff; }
/* hidden means hidden (.btn sets its own display) */
.fa-in .fa-go[hidden] { display: none; }

/* the fight card's VS: on a live card the pulsing-dot rule (.live i) squeezed it into a 6 px box and the letters spilled onto the right face */
.fc-faces i { z-index: 1; width: auto; height: auto; animation: none; }
.card.bk .bks { text-wrap: balance; }
/* the cup: light turns, rings drift, a glint sweeps the gold, sparkles twinkle; only while the card is on screen */
.bkt .cup { filter: none; }
.bkt .cup .beams { opacity: .8; }
.bkt .cup.won .beams { opacity: 1; }
.bkt .cup .beams, .bkt .cup .ring1, .bkt .cup .ring2 { transform-box: fill-box; transform-origin: center; }
.bkt .cup .gl { transform: translateX(52px); }
.card.bk.on .bkt .cup .beams { animation: bkSpin 48s linear infinite; }
.card.bk.on .bkt .cup .ring1 { animation: bkSpin 30s linear infinite; }
.card.bk.on .bkt .cup .ring2 { animation: bkSpin 40s linear infinite reverse; }
.card.bk.on .bkt .cup .gl { animation: bkGlint 5s cubic-bezier(.45, 0, .25, 1) infinite; }
.card.bk.on .bkt .cup .spk path { animation: bkTwinkle 2.6s ease-in-out infinite; }
.card.bk.on .bkt .cup .spk path:nth-child(2) { animation-duration: 3.1s; animation-delay: -.9s; }
.card.bk.on .bkt .cup .spk path:nth-child(3) { animation-duration: 2.2s; animation-delay: -1.7s; }
.card.bk.on .bkt .cup .spk path:nth-child(4) { animation-duration: 3.4s; animation-delay: -.4s; }
.card.bk.on .bkt .cup .spk path:nth-child(5) { animation-duration: 2.8s; animation-delay: -2.1s; }
.card.bk.on .bkt .cup .spk path:nth-child(6) { animation-duration: 2.4s; animation-delay: -1.2s; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
@keyframes bkGlint { 0% { transform: translateX(-20px); } 36%, 100% { transform: translateX(160px); } }
@keyframes bkTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .card.bk.on .bkt .cup .beams, .card.bk.on .bkt .cup .ring1, .card.bk.on .bkt .cup .ring2, .card.bk.on .bkt .cup .gl, .card.bk.on .bkt .cup .spk path { animation: none; } }
/* the battle card's way to the Weekly Cup: a gold trophy and one short word, so the head fits a 360 px phone */
.chead .go.cupgo { gap: 4px; padding-left: 8px; }
.chead .go.cupgo svg:first-child { width: 15px; height: 15px; color: #f4c55c; }
.chead .ls { display: none; }
@media (max-width: 345px) { .chead .lf { display: none; } .chead .ls { display: inline; } }
/* an empty slot: a calm question mark (the slot's dashed outline must not run around the letters too) */
.bkt .sl.tbd text { font: 800 14px var(--x); letter-spacing: 0; fill: rgba(255, 255, 255, .3); stroke: none; }

/* ============================================================ Batch A: Crate, lists, search */
/* Save on the rail: a white bookmark, gold once it is in your Crate */
.act.saved svg { fill: url(#goldGrad); filter: drop-shadow(0 2px 10px rgba(244, 197, 92, .45)); }
.toast button.tfull { border: 0; cursor: pointer; }
/* playing a list: back, whose list it is, where you are in it */
.lsthead { display: flex; align-items: center; gap: 9px; min-width: 0; pointer-events: auto; }
.lsthead .lh-back { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(10, 10, 16, .46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.lsthead .lh-back svg { width: 20px; height: 20px; transform: scaleX(-1); }
.lsthead .lh-back:hover { background: rgba(255, 255, 255, .16); }
.lsthead .lh-av { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 4px 14px rgba(0, 0, 0, .5); }
.lsthead .lh-tx { display: grid; min-width: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.lsthead .lh-tx b { font: 800 15px/1.15 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsthead .lh-tx small { font: 650 12px/1.2 var(--f); color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .topbar .lsthead { position: absolute; left: 14px; top: 12px; } }
/* the end of a list */
.card.lst-end { display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 70% at 50% 30%, rgba(124, 92, 255, .22), transparent 60%), radial-gradient(90% 60% at 50% 100%, rgba(255, 45, 135, .16), transparent 60%), #07070b; }
.lst-end .le-in { display: grid; justify-items: center; gap: 8px; max-width: 320px; text-align: center; }
.lst-end .le-av, .lst-end .le-ic { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 16px 40px rgba(0, 0, 0, .6); }
.lst-end .le-ic { display: grid; place-items: center; background: linear-gradient(135deg, #7c5cff, #ff2d87); }
.lst-end .le-ic svg { width: 34px; height: 34px; }
.lst-end small { margin-top: 10px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lst-end h3 { font: 900 30px/1.05 var(--d); letter-spacing: -.02em; }
.lst-end p { font: 600 15px var(--f); color: var(--text2); }
.lst-end .le-acts { display: grid; gap: 9px; width: 100%; margin-top: 14px; }
.lst-end .le-acts .btn { width: 100%; justify-content: center; }
.lst-end .le-acts .btn.ghost { background: transparent; box-shadow: none; color: var(--text2); }
/* Following, explained */
.fa-in .fa-kick { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 10px 5px 8px; border-radius: 999px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.fa-in .fa-kick svg { width: 14px; height: 14px; }
.fa-in .fa-lbl { margin: 16px 0 8px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: left; }
/* the Crate */
.pf-tabs.n5 button { font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
.crate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px 12px; }
.crate-head b { display: block; font: 800 16px var(--f); }
.crate-head span { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font: 600 12.5px var(--f); color: var(--muted); }
.crate-head span svg { width: 13px; height: 13px; color: var(--gold); }
.crate-empty { display: grid; justify-items: center; gap: 6px; padding: 42px 24px 30px; text-align: center; }
.crate-empty .ce-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 55%, #c98b22); box-shadow: 0 14px 34px -12px rgba(244, 197, 92, .7); }
.crate-empty .ce-ic svg { width: 30px; height: 30px; }
.crate-empty b { margin-top: 8px; font: 800 17px var(--f); }
.crate-empty span { font: 500 14px/1.45 var(--f); color: var(--muted); }
.pin-tag.early { color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 60%, #d99a2b); box-shadow: 0 6px 16px -6px rgba(244, 197, 92, .8); }
.pf-ct i { font-style: normal; font-weight: 800; }
.pf-ct i.up { color: var(--up); }
.pf-ct i.down { color: var(--down); }
.h2.gcrate { margin-top: 26px; }
/* Charts search */
.srch { position: sticky; top: calc(-1 * (var(--top) + 18px)); z-index: 6; display: flex; align-items: center; gap: 10px; margin: 0 -18px 6px; padding: 8px 18px; background: linear-gradient(var(--bg) 82%, transparent); }
.sbox { position: relative; flex: 1; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 8px 0 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.sbox:focus-within { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.sbox > svg { width: 19px; height: 19px; color: var(--muted); }
.sbox input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 600 16px var(--f); }
.sbox input::placeholder { color: rgba(255, 255, 255, .45); }
.sbox input::-webkit-search-cancel-button { display: none; }
.sclear { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--text2); background: rgba(255, 255, 255, .1); }
.sclear[hidden] { display: none; }
.sclear svg { width: 16px; height: 16px; }
.scancel { display: none; font: 700 15px var(--f); color: #fff; }
#v-market.searching .scancel { display: block; }
#v-market.searching .mk-body { display: none; }
#v-market:not(.searching) .mk-res { display: none; }
.mk-res { padding-bottom: 20px; }
.s-h { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; font: 800 12px var(--x); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.s-h span { font: 700 12px var(--f); letter-spacing: 0; }
.s-clr { font: 700 13px var(--f); letter-spacing: 0; text-transform: none; color: var(--text2); }
.srow { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.srow .cv { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; }
.srow .cv img { width: 100%; height: 100%; object-fit: cover; }
.srow .t { display: grid; gap: 1px; min-width: 0; }
.srow .t b { font: 750 15.5px/1.25 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .t > span { font: 600 13px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow q { margin-top: 3px; font: italic 500 13.5px/1.35 var(--f); color: var(--text2); quotes: "“" "”"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srow q mark, .srow q mark { color: #fff; font-weight: 750; font-style: normal; background: linear-gradient(transparent 58%, rgba(244, 197, 92, .5) 58%); }
.srow.top { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, rgba(124, 92, 255, .16), rgba(255, 45, 135, .1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.srow.top .cv { width: 84px; height: 84px; border-radius: 14px; }
.srow.top .t b { font-size: 19px; }
.s-kind { justify-self: start; margin-bottom: 4px; padding: 3px 7px; border-radius: 6px; font: 800 10px var(--x); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .14); }
.sart-top { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border-radius: 18px; text-align: left; background: linear-gradient(135deg, rgba(124, 92, 255, .16), rgba(255, 45, 135, .1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sart-top img, .sart-top .av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.sart-top > span { display: grid; flex: 1; min-width: 0; }
.sart-top b { font: 800 19px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sart-top small { font: 600 13px var(--f); color: var(--muted); }
.sart-top > svg { width: 20px; height: 20px; color: var(--muted); }
.sarts { display: flex; gap: 14px; margin: 0 -18px; padding: 2px 18px 6px; overflow-x: auto; scrollbar-width: none; }
.sarts::-webkit-scrollbar { display: none; }
.sart { flex: none; display: grid; justify-items: center; gap: 4px; width: 82px; text-align: center; }
.sart img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); }
.sart b { max-width: 100%; font: 750 13px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sart small { max-width: 100%; font: 600 11.5px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sppl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; text-align: left; }
.sppl > span { display: grid; flex: 1; min-width: 0; }
.sppl b { font: 750 15px var(--f); }
.sppl small { font: 600 13px var(--f); color: var(--muted); }
.sppl > svg { width: 18px; height: 18px; color: var(--muted); }
.srec { display: flex; flex-wrap: wrap; gap: 8px; }
.srec .sq { display: inline-flex; align-items: center; border-radius: 12px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.srec .sq button:first-child, .strend { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px 0 11px; font: 650 14px var(--f); color: #fff; }
.srec .sq svg, .strend svg { width: 15px; height: 15px; color: var(--muted); }
.srec .sqx { width: 34px; height: 36px; display: grid; place-items: center; color: var(--muted); }
.srec .sqx svg { width: 14px; height: 14px; }
.strend { padding: 0 13px 0 11px; border-radius: 12px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.strend svg { color: var(--gold); }
.s-tip { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px; border-radius: 16px; font: 500 14px/1.45 var(--f); color: var(--text2); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.s-tip svg { flex: none; width: 22px; height: 22px; color: var(--gold); }
.s-tip b { display: block; color: #fff; }
.s-none { display: grid; gap: 4px; padding: 40px 10px; text-align: center; color: var(--muted); font: 500 14.5px/1.45 var(--f); }
.s-none b { color: #fff; font: 800 17px var(--f); }
.s-wait { display: flex; justify-content: center; gap: 6px; padding: 34px 0; }
.s-wait i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); animation: sWait 1s ease-in-out infinite; }
.s-wait i:nth-child(2) { animation-delay: .15s; }
.s-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes sWait { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
/* desktop: search in the side bar */
.side-search { display: none; }
@media (min-width: 900px) {
  .side-search { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 10px; padding: 0 10px 0 12px; height: 42px; border-radius: 12px; text-align: left; font: 600 14px var(--f); color: var(--muted); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .side-search:hover { color: #fff; background: rgba(255, 255, 255, .1); }
  .side-search svg { width: 18px; height: 18px; }
  .side-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-search kbd { padding: 1px 7px; border-radius: 6px; font: 700 12px var(--mono); color: var(--text2); background: rgba(255, 255, 255, .1); }
  .srch { margin: 0 0 6px; padding: 8px 0; }
  #v-market .scancel { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .s-wait i { animation: none; } }

/* a guest's Crate: the title, then what it means */
.h2.gcrate { display: grid; gap: 3px; justify-content: start; }
.h2.gcrate span { margin: 0; font: 600 13px var(--f); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ============================================================ Batch B1: the Vibes economy */
.coinfly { position: fixed; z-index: 120; display: inline-flex; align-items: center; gap: 4px; transform: translate(-50%, -50%); pointer-events: none; font: 900 16px var(--x); font-stretch: 112%; color: #ffe39b; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); animation: coinFly 1.05s cubic-bezier(.2, .8, .2, 1) forwards; }
.coinfly .coin { width: 18px; height: 18px; }
@keyframes coinFly { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -80%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(.96); } }
.vchest { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 12px 12px 10px; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.vchest .vc-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: url("../media/g/crown.webp") center / 112% no-repeat, radial-gradient(circle at 50% 40%, rgba(244, 197, 92, .35), transparent 70%); filter: grayscale(.85) brightness(.7); }
.vchest .vc-tx { flex: 1; display: grid; min-width: 0; }
.vchest .vc-tx b { font: 800 14.5px var(--f); }
.vchest .vc-tx small { font: 600 12.5px var(--f); color: var(--muted); }
.vchest .vc-go { flex: none; padding: 8px 14px; border-radius: 12px; font: 850 13px var(--x); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 55%, #d99a2b); box-shadow: 0 10px 24px -10px rgba(244, 197, 92, .9); }
.vchest.ready { background: linear-gradient(120deg, rgba(244, 197, 92, .16), rgba(255, 45, 135, .1)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .45), 0 14px 34px -18px rgba(244, 197, 92, .8); cursor: pointer; }
.vchest.ready .vc-ic { filter: none; animation: chestBob 1.6s ease-in-out infinite; }
.vchest.ready .vc-tx small { color: #ffe39b; }
.vchest.open .vc-ic { filter: none; opacity: .75; }
.vchest[aria-disabled="true"] { cursor: default; }
@keyframes chestBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .vchest.ready .vc-ic, .coinfly { animation: none; } }

/* ============================================================ Batch B2: Spotlight */
.spot-tag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-bottom: 8px; padding: 4px 9px 4px 7px; border-radius: 8px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 60%, #d99a2b); box-shadow: 0 8px 22px -10px rgba(244, 197, 92, .9); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-tag svg { width: 13px; height: 13px; flex: none; }
.card.tk .meta .spot-tag { display: flex; width: max-content; }
.mrow2.spotrow { background: linear-gradient(120deg, rgba(244, 197, 92, .14), rgba(255, 45, 135, .08)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .35); }
.mrow2.spotrow > svg:first-child { color: var(--gold); }
.mrow2.spotrow > svg:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.sp-how { display: grid; gap: 10px; margin: 6px 0 16px; padding: 0; list-style: none; }
.sp-how li { display: flex; gap: 11px; align-items: flex-start; font: 500 14px/1.45 var(--f); color: var(--text2); }
.sp-how li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gold); }
.sp-how b { color: #fff; }
.sp-budgets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sp-budgets button { display: grid; gap: 1px; padding: 12px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sp-budgets button b { font: 850 20px var(--x); font-stretch: 105%; }
.sp-budgets button small { font: 600 12px var(--f); color: var(--muted); }
.sp-budgets button.on { background: linear-gradient(140deg, rgba(244, 197, 92, .2), rgba(255, 45, 135, .12)); box-shadow: inset 0 0 0 2px var(--gold); }
.sp-budgets button.poor { opacity: .5; }
.sp-have { display: flex; align-items: center; gap: 7px; margin: 12px 2px; font: 600 13.5px var(--f); color: var(--muted); }
.sp-have b { color: #fff; }
.sp-have .coin { width: 16px; height: 16px; }
.sp-note { margin: 10px 2px 0; font: 500 12.5px/1.45 var(--f); color: var(--muted); }
.sp-live { padding: 14px; border-radius: 18px; background: linear-gradient(140deg, rgba(244, 197, 92, .12), rgba(255, 45, 135, .07)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .3); }
.sp-top { display: flex; align-items: center; gap: 8px; }
.sp-top b { font: 800 15px var(--f); }
.sp-top span:last-child { margin-left: auto; font: 600 12.5px var(--f); color: var(--muted); }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.4s infinite; }
.sp-bar { height: 8px; margin: 12px 0; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.sp-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f4c55c, #ff8a3d); }
.sp-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sp-k span { display: grid; font: 600 11.5px var(--f); color: var(--muted); }
.sp-k b { font: 800 18px var(--f); color: #fff; }
.sp-live .btn { margin-top: 12px; }
.sp-res { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sp-res b { font: 750 14px var(--f); }
.sp-res small { font: 600 12px var(--f); color: var(--muted); }
.sp-st { justify-self: start; padding: 2px 7px; border-radius: 6px; font: 800 10px var(--x); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); background: rgba(255, 255, 255, .08); }
.sp-st.done { color: var(--up); }
.sp-st.paused { color: #ffd65c; }
@media (prefers-reduced-motion: reduce) { .sp-dot { animation: none; } }

/* ============================================================ Batch B3: the weekly theme, the seasons */
.card.thc { display: grid; align-items: end; padding: calc(var(--top) + 64px) 18px calc(var(--tab) + var(--bot) + 18px); overflow: hidden; background: #07070b; }
.thc .th-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: blur(28px) saturate(1.3) brightness(.45); transform: scale(1.2); }
.thc .th-bg.none { background: radial-gradient(90% 60% at 30% 20%, rgba(124, 92, 255, .4), transparent 60%), radial-gradient(80% 60% at 80% 90%, rgba(255, 45, 135, .3), transparent 60%); filter: none; transform: none; }
.thc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 7, .2), rgba(5, 5, 7, .55) 40%, rgba(5, 5, 7, .92)); }
.thc .th-in { position: relative; z-index: 1; display: grid; gap: 10px; max-width: 520px; width: 100%; margin: 0 auto; }
.th-kick { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 60%, #d99a2b); }
.th-kick svg { width: 14px; height: 14px; }
.thc h2 { font: 900 clamp(34px, 10vw, 46px) / .98 var(--d); letter-spacing: -.03em; text-wrap: balance; }
.th-blurb { font: 500 16px/1.4 var(--f); color: var(--text2); }
.th-meta { display: flex; gap: 14px; font: 600 13px var(--f); color: var(--muted); }
.th-meta b { color: #fff; }
.th-board { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.th-board li { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 14px; cursor: pointer; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.th-board li:first-child { background: linear-gradient(120deg, rgba(244, 197, 92, .2), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .4); }
.th-board .rk { font: 900 15px var(--x); text-align: center; color: var(--muted); }
.th-board li:first-child .rk { color: var(--gold); }
.th-board img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.th-board .tt { display: grid; min-width: 0; }
.th-board .tt b { font: 750 14.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-board .tt small, .th-board .sc small { font: 600 12px var(--f); color: var(--muted); white-space: nowrap; }
.th-board .sc { display: grid; justify-items: end; }
.th-board .sc b { font: 800 15px var(--f); }
.th-empty { font: 500 14px var(--f); color: var(--muted); }
.th-last { display: flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--f); color: var(--text2); }
.th-last svg { flex: none; width: 18px; height: 18px; color: var(--gold); }
.th-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.th-acts .btn:only-child { grid-column: 1 / -1; }
.th-acts .btn { justify-content: center; }
.th-prize { display: flex; align-items: center; gap: 6px; font: 600 12.5px var(--f); color: var(--muted); }
.th-prize svg { width: 14px; height: 14px; color: var(--gold); }
.th-pick { display: grid; gap: 8px; margin-top: 12px; }
.thp { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.thp img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.thp span { flex: 1; display: grid; min-width: 0; }
.thp b { font: 750 14.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thp small { font: 600 12px var(--f); color: var(--muted); }
.thp i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.thp i svg { width: 16px; height: 16px; }
.thp.on { box-shadow: inset 0 0 0 2px var(--gold); background: linear-gradient(120deg, rgba(244, 197, 92, .14), rgba(255, 255, 255, .04)); }
.thp.on i { color: #2a1c02; background: var(--gold); }
/* seasons */
.sea { display: grid; gap: 10px; margin: 2px 0 12px; }
.sea-seg { display: inline-flex; justify-self: start; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.sea-seg button { height: 32px; padding: 0 14px; border-radius: 9px; font: 750 13.5px var(--f); color: var(--text2); }
.sea-seg button.on { color: #000; background: #fff; }
.sea-tx { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; font: 500 13px/1.45 var(--f); color: var(--text2); background: linear-gradient(120deg, rgba(244, 197, 92, .12), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .28); }
.sea-tx svg { flex: none; width: 20px; height: 20px; color: var(--gold); }
.sea-tx b { display: block; color: #fff; font: 800 14.5px var(--f); }
.sea-last { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sea-last button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; font: 700 12.5px var(--f); background: rgba(255, 255, 255, .06); }
.lead .rk.top, .ta-row .rk.top { color: var(--gold); }
.tart { display: grid; gap: 2px; }
.ta-row { display: grid; grid-template-columns: 26px 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; }
.ta-row .rk { font: 900 15px var(--x); text-align: center; color: var(--muted); }
.ta-row img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
.ta-row .t { display: grid; min-width: 0; }
.ta-row .t b { font: 750 15px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-row .t span { font: 600 12.5px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-row .mini.on { color: var(--text2); background: rgba(255, 255, 255, .08); }
.ta-you { font: 800 11px var(--x); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ============================================================ Batch C: Hook Lab */
.hl { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; padding-bottom: 20px; }
.hl-kick { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 800 11.5px var(--x); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; color: #ffe39b; }
.hl-kick i { width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(from 0deg, #1fd4ff, #9b3dff, #ff2fa6, #ffb547, #1fd4ff); box-shadow: 0 0 12px rgba(155, 61, 255, .8); }
.hl-hero { display: grid; gap: 10px; padding-top: 4px; }
.hl-hero h1 { font: 900 clamp(34px, 9.4vw, 52px) / .98 var(--d); letter-spacing: -.035em; }
.hl-hero p { max-width: 560px; font: 500 15.5px/1.5 var(--f); color: var(--text2); }
.hl-drop { position: relative; display: grid; gap: 16px; padding: 18px 16px 18px; border-radius: 24px; cursor: pointer; background: radial-gradient(120% 120% at 0% 0%, rgba(124, 92, 255, .22), transparent 55%), radial-gradient(100% 120% at 100% 100%, rgba(255, 45, 135, .16), transparent 55%), #0b0a12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px -40px rgba(124, 92, 255, .6); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.hl-drop:hover, .hl-drop.over { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35), 0 30px 90px -36px rgba(255, 45, 135, .7); }
.hl-drop.over { transform: scale(1.01); }
.hl-demo { position: relative; height: 150px; margin-top: 26px; }
.hl-dbars, .hl-sbars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.hl-dbars i, .hl-sbars i { flex: 1; min-width: 1px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)); }
.hl-dwin { position: absolute; top: -6px; bottom: -6px; left: 25%; width: 17%; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 45, 135, .26), rgba(124, 92, 255, .22)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 34px rgba(255, 45, 135, .45); }
.hl-dwin span { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font: 700 11.5px var(--mono); white-space: nowrap; color: #fff; }
.hl-dpin { position: absolute; top: -30px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 999px; font: 700 11px var(--f); white-space: nowrap; color: var(--text2); background: rgba(10, 10, 16, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.hl-dpin b { display: grid; place-items: center; min-width: 24px; height: 18px; padding: 0 4px; border-radius: 9px; font: 800 11px var(--f); color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 60%, #d99a2b); }
.hl-dscan, .hl-sline { position: absolute; top: -10px; bottom: -10px; width: 2px; background: linear-gradient(180deg, transparent, #fff, transparent); box-shadow: 0 0 18px #fff; animation: hlScan 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hlScan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.hl-cta { display: grid; justify-items: center; gap: 8px; margin-top: 14px; text-align: center; }
.hl-cta .btn { min-width: 220px; justify-content: center; }
.hl-cta small { font: 600 12.5px var(--f); color: var(--muted); }
.hl-spec { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hl-spec > div { display: grid; align-content: start; gap: 4px; padding: 14px 12px 14px 0; }
.hl-spec > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.hl-spec em { font: 700 11px var(--f); font-style: normal; color: var(--gold); }
.hl-spec b { font: 800 14px var(--f); }
.hl-spec span { font: 500 12.5px/1.45 var(--f); color: var(--muted); }
@media (max-width: 560px) { .hl-spec { grid-template-columns: 1fr; } .hl-spec > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.hl-legal { display: flex; align-items: center; gap: 7px; font: 500 12.5px var(--f); color: var(--muted); }
.hl-legal svg { width: 14px; height: 14px; }
.hl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hl-top .hl-kick { flex-basis: 100%; }
.hl-top h1 { flex: 1; font: 900 32px/1 var(--d); letter-spacing: -.03em; }
.hl-add { cursor: pointer; }
.hl-deck { display: grid; gap: 14px; padding: 14px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.hl-head { display: flex; align-items: center; gap: 12px; }
.hl-cover { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .06) center / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hl-id { flex: 1; display: grid; gap: 3px; min-width: 0; }
.hl-title { width: 100%; font: 850 19px var(--f) !important; }
.hl-st { display: inline-flex; align-items: center; gap: 6px; font: 650 12.5px var(--f); color: var(--muted); }
.hl-st svg { width: 14px; height: 14px; }
.hl-st.s-done { color: var(--up); }
.hl-abtag { justify-self: start; padding: 2px 8px; border-radius: 6px; font: 800 10.5px var(--x); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, rgba(34, 225, 255, .3), rgba(124, 92, 255, .35)); }
.hl-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, .06); }
.hl-scan { position: relative; display: grid; gap: 14px; padding: 18px 4px 4px; }
.hl-scan .hl-sbars { position: relative; height: 70px; opacity: .55; }
.hl-scan .hl-sline { top: 8px; bottom: auto; height: 86px; }
.hl-scan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hl-scan li { display: flex; align-items: center; gap: 9px; font: 600 14px var(--f); color: var(--muted); }
.hl-scan li.on { color: #fff; }
.hl-scan li.ok { color: var(--up); }
.hl-scan li svg { width: 16px; height: 16px; }
.hl-scan li > i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.hl-ed { position: relative; padding-top: 30px; }
.hl-pins { position: absolute; left: 0; right: 0; top: 0; height: 26px; }
.hl-pin { position: absolute; top: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 2px; border-radius: 999px; background: rgba(10, 10, 16, .9); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .55); }
.hl-pin b { display: grid; place-items: center; min-width: 26px; height: 20px; border-radius: 10px; font: 800 11.5px var(--f); color: #2a1c02; background: linear-gradient(160deg, #fff2bf, #f4c55c 60%, #d99a2b); }
.hl-pin i { font: 800 10px var(--f); font-style: normal; color: var(--gold); padding-right: 3px; }
.hl-pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: rgba(244, 197, 92, .7); }
.hl-wave { position: relative; height: 96px; border-radius: 14px; cursor: grab; touch-action: none; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.hl-wave:active { cursor: grabbing; }
.hl-curve { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.hl-curve path { fill: url(#goldGrad); opacity: .16; }
.hl-bars { position: absolute; inset: 10px 4px; display: flex; align-items: center; gap: 1px; pointer-events: none; }
.hl-bars i { flex: 1; min-width: 1px; border-radius: 1px; background: rgba(255, 255, 255, .34); }
.hl-win { position: absolute; top: 3px; bottom: 3px; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 45, 135, .24), rgba(124, 92, 255, .2)); box-shadow: inset 0 0 0 2px #fff, 0 0 26px rgba(255, 45, 135, .45); pointer-events: none; }
.hl-win::before, .hl-win::after { content: ""; position: absolute; top: 50%; width: 4px; height: 28px; margin-top: -14px; border-radius: 2px; background: #fff; }
.hl-win::before { left: -2px; } .hl-win::after { right: -2px; }
.hl-win span { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; font: 700 11px var(--mono); white-space: nowrap; color: #fff; background: rgba(10, 10, 16, .7); }
.hl-ph { position: absolute; top: 0; bottom: 0; width: 2px; left: -4px; background: #fff; box-shadow: 0 0 10px #fff; pointer-events: none; }
.hl-ruler { position: relative; height: 18px; margin-top: 4px; }
.hl-ruler span { position: absolute; top: 0; transform: translateX(-50%); font: 600 10.5px var(--mono); color: var(--muted); }
.hl-ruler span:first-child { transform: none; }
.hl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 14px; align-items: stretch; }
@media (max-width: 420px) { .hl-grid { grid-template-columns: minmax(0, 1fr) 132px; } }
.hl-jury { display: grid; gap: 12px; align-content: start; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.hl-jury.none { align-content: center; gap: 4px; font: 500 13.5px/1.45 var(--f); color: var(--muted); }
.hl-jury.none b { color: #fff; font: 800 15px var(--f); }
.hl-dial { position: relative; justify-self: start; width: 104px; height: 104px; margin-bottom: 22px; display: grid; place-items: center; align-content: center; }
.hl-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hl-dial .tr { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 9; }
.hl-dial .fg { fill: none; stroke: url(#goldGrad); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .35s var(--ease); filter: drop-shadow(0 0 8px rgba(244, 197, 92, .55)); }
.hl-dial b { position: relative; font: 900 34px/1 var(--d); letter-spacing: -.02em; }
/* the label sits under the ring, never inside it: a larger system font can't push it under the gold */
.hl-dial small { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font: 700 9.5px var(--f); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .6); }
.hl-parts { display: grid; gap: 7px; }
.hl-part { display: grid; grid-template-columns: 62px 1fr 18px; align-items: center; gap: 8px; font: 650 12px var(--f); color: var(--text2); }
.hl-part i { height: 6px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.hl-part em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff2d87, #ff8a3d 55%, #f4c55c); transition: width .3s var(--ease); }
.hl-part b { font: 800 12px var(--f); text-align: right; }
.hl-why { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-why span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 6px; border-radius: 999px; font: 650 11.5px var(--f); color: #ffe39b; background: rgba(244, 197, 92, .1); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .25); }
.hl-why svg { width: 12px; height: 12px; }
.hl-pvw { display: grid; }
.hl-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; cursor: pointer; background: #000; box-shadow: 0 0 0 4px #121218, 0 0 0 5px rgba(255, 255, 255, .14), 0 24px 50px -20px rgba(0, 0, 0, .9); }
.hl-phone .lcm { position: absolute; inset: 0; }
.hl-ph-sh { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .78)); pointer-events: none; }
.hl-ph-ln { position: absolute; left: 10px; right: 10px; bottom: 44px; font: 800 12px/1.2 var(--x); text-wrap: balance; color: rgba(255, 255, 255, .6); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.hl-ph-ln span.on { color: #fff; }
.hl-ph-meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; }
.hl-ph-meta b { font: 800 11.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-ph-meta span { font: 600 10px var(--f); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-ph-busy { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 8px; font: 650 10px var(--f); background: rgba(0, 0, 0, .6); }
.hl-phone.empty { display: grid; place-items: center; align-content: center; gap: 4px; padding: 12px; text-align: center; color: var(--muted); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.hl-phone.empty b { color: #fff; font: 800 13px var(--f); }
.hl-phone.empty span { font: 500 11.5px/1.35 var(--f); }
.hl-phone.empty svg { width: 26px; height: 26px; }
.hl-cuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .hl-cuts { grid-template-columns: 1fr; } }
.hl-cut { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.hl-cut i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 800 12px var(--f); font-style: normal; color: var(--gold); box-shadow: inset 0 0 0 1.5px rgba(244, 197, 92, .5); }
.hl-cut span { flex: 1; display: grid; min-width: 0; }
.hl-cut b { font: 800 14px var(--f); }
.hl-cut small { font: 600 11.5px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-cut em { flex: none; font: 900 20px var(--d); font-style: normal; color: #fff; }
.hl-cut.on { background: linear-gradient(120deg, rgba(244, 197, 92, .16), rgba(255, 45, 135, .08)); box-shadow: inset 0 0 0 2px var(--gold); }
.hl-cut.on i { color: #2a1c02; background: var(--gold); box-shadow: none; }
.hl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hl-acts .btn { flex: 1; justify-content: center; min-width: 150px; }
.hl-panel { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.hl-ph2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 800 12px var(--x); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hl-ph2 span { font: 600 12px var(--f); letter-spacing: 0; text-transform: none; color: var(--muted); text-align: right; }
.hl-det summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font: 800 12px var(--x); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.hl-det summary::-webkit-details-marker { display: none; }
.hl-det summary span { font: 600 12px var(--f); letter-spacing: 0; text-transform: none; color: var(--muted); text-align: right; }
.hl-det[open] summary { margin-bottom: 12px; }
.hl-bar { position: sticky; bottom: calc(var(--tab) + var(--bot) + 8px); z-index: 5; display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: rgba(12, 12, 18, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px -20px rgba(0, 0, 0, .9); }
@media (min-width: 900px) { .hl-bar { bottom: 12px; } }
.hl-acts.done .btn.hot { flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .hl-dscan, .hl-sline { animation: none; opacity: 0; } }

/* ============================================================ sign in with your phone */
.lk-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font: 700 12px var(--f); color: var(--muted); }
.lk-or::before, .lk-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lk-hint { margin: 6px 0 4px; font: 500 12.5px var(--f); color: var(--muted); text-align: center; }
.lk-box { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px; align-items: center; margin: 14px 0 6px; }
@media (max-width: 420px) { .lk-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.lk-qr { width: 172px; height: 172px; display: grid; place-items: center; padding: 8px; border-radius: 18px; background: #fff; }
.lk-qr svg { width: 100%; height: 100%; }
.lk-qr small { color: #333; font: 600 12px var(--f); text-align: center; }
.lk-steps { display: grid; gap: 10px; }
.lk-steps > div:not(.lk-code) { display: flex; gap: 9px; align-items: flex-start; font: 500 13.5px/1.4 var(--f); color: var(--text2); text-align: left; }
.lk-steps i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 800 11px var(--f); font-style: normal; color: #000; background: #fff; }
.lk-code { font: 800 34px var(--mono); letter-spacing: .08em; }
.lk-steps small { font: 600 12px var(--f); color: var(--muted); }
.lk-warn { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 14px; padding: 12px; border-radius: 14px; font: 500 13px/1.45 var(--f); color: #ffe39b; background: rgba(244, 197, 92, .08); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .3); }
.lk-warn svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.lk-in { font: 800 26px var(--mono) !important; letter-spacing: .12em; text-align: center; }
/* a reward always says what it is: the Vibes coin and the word */
.earn .vrw { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.earn .vrw .coin, .mis .rw .coin { width: 15px; height: 15px; font-size: 15px; flex: none; }
.mis .rw { display: inline-flex; align-items: center; gap: 4px; }
/* Hook Lab: the drop bar is one compact line; cuts that sit close on the waveform stack */
.hl-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; }
.hl-bar .btn { min-width: 132px; justify-content: center; }
.hl-chk { margin: 0; font: 650 13.5px/1.3 var(--f); }
.hl-fine { margin: 2px 4px 0; font: 500 12px/1.5 var(--f); color: var(--muted); }
.hl-fine a { color: var(--text2); }
.hl-ed.two { padding-top: 54px; }
.hl-pin.up { top: 26px; }
.hl-pin.up::after { height: 6px; }
/* Settings: the two passkey actions share one row */
.set-keys { display: flex; gap: 8px; flex-wrap: wrap; }
.set-keys .btn { flex: 1; justify-content: center; min-width: 0; }

/* ============================================================ Batch D: the Vibe Map */
.vm-entry { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 10px; padding: 12px 14px; border-radius: 18px; text-align: left; background: radial-gradient(120% 140% at 0% 50%, rgba(124, 92, 255, .32), transparent 60%), radial-gradient(90% 140% at 100% 50%, rgba(34, 225, 255, .14), transparent 60%), #0b0a14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.vm-entry > svg { width: 18px; height: 18px; color: var(--muted); margin-left: auto; }
.vm-et { display: grid; min-width: 0; }
.vm-et b { font: 850 16px var(--f); }
.vm-et small { font: 500 12.5px var(--f); color: var(--text2); }
.vm-orb { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .35), transparent 70%); }
.vm-orb i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px currentColor; }
.vm-orb i:nth-child(1) { left: 8px; top: 14px; color: #ff2d87; background: #ff2d87; } .vm-orb i:nth-child(2) { left: 22px; top: 6px; color: #22e1ff; background: #22e1ff; }
.vm-orb i:nth-child(3) { left: 30px; top: 24px; color: #f4c55c; background: #f4c55c; } .vm-orb i:nth-child(4) { left: 14px; top: 30px; color: #7c5cff; background: #7c5cff; }
.vm-orb i:nth-child(5) { left: 22px; top: 19px; width: 9px; height: 9px; color: #31e59a; background: #31e59a; }
.vmap { position: fixed; inset: 0; z-index: 70; display: none; background: radial-gradient(70% 60% at 30% 30%, rgba(124, 92, 255, .2), transparent 70%), radial-gradient(60% 50% at 80% 80%, rgba(255, 45, 135, .14), transparent 70%), #04040a; }
.vmap.on { display: block; }
.vm-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.vm-cv:active { cursor: grabbing; }
.vm-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: calc(var(--top) + 10px) 14px 26px; background: linear-gradient(rgba(4, 4, 10, .92), transparent); pointer-events: none; }
.vm-head > * { pointer-events: auto; }
.vm-head .uv-back { position: static; flex: none; background: rgba(255, 255, 255, .1); }
.vm-head > div { flex: 1; display: grid; min-width: 0; }
.vm-head b { font: 900 22px/1.05 var(--d); letter-spacing: -.02em; }
.vm-head span { font: 500 12.5px var(--f); color: var(--text2); }
.vm-me { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; font: 700 13px var(--f); color: #31e59a; background: rgba(49, 229, 154, .1); box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .35); }
.vm-me svg { width: 15px; height: 15px; }
.vm-reticle { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .2); pointer-events: none; }
.vm-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--bot) + 104px); text-align: center; font: 600 12.5px var(--f); color: var(--muted); pointer-events: none; }
.vm-card { position: absolute; left: 14px; right: 14px; bottom: calc(var(--bot) + 18px); display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 10px 10px 10px 10px; border-radius: 20px; background: rgba(12, 12, 18, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px -20px rgba(0, 0, 0, .9); }
.vm-card[hidden] { display: none; }
.vm-card img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.vm-tx { flex: 1; display: grid; min-width: 0; }
.vm-tx b { font: 800 15px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-tx span { font: 600 12.5px var(--f); color: var(--muted); }
.hl-more { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font: 700 13.5px var(--f); color: var(--text2); }
.hl-more svg { width: 15px; height: 15px; }

/* ============================================================ Batch E: a fair start */
.new-tag { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 5px; margin-bottom: 8px; padding: 4px 9px 4px 7px; border-radius: 8px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: #04120c; background: linear-gradient(160deg, #b8ffe0, #31e59a 60%, #1fb87a); box-shadow: 0 8px 22px -10px rgba(49, 229, 154, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-tag svg { width: 13px; height: 13px; flex: none; }

/* ============================================================ the sung line's menu, the creator card */
.lnmenu { position: absolute; z-index: 14; left: 50%; display: flex; gap: 6px; padding: 5px; border-radius: 16px; transform: translate(-50%, 8px) scale(.96); opacity: 0; transition: transform .25s var(--spring), opacity .2s; background: rgba(12, 12, 18, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 40px -14px rgba(0, 0, 0, .9); }
.lnmenu.in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.lnmenu button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 12px; font: 750 13.5px var(--f); color: #fff; white-space: nowrap; }
.lnmenu button svg { width: 16px; height: 16px; }
.lnmenu button:hover { background: rgba(255, 255, 255, .08); }
.lnmenu [data-lnlove].on { color: #ff6b9e; }
.lnmenu [data-lnlove].on svg { fill: url(#hypeGrad); }
.cc-box { margin-top: 12px; }
.cc-img { display: block; width: 100%; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); }

/* ================================================================ reports: the Hook report and the Studio
   A page, not a dashboard: the hook's own picture up top, one verdict in a sentence, numbered sections on hairlines,
   charts you can drag across. No boxes around numbers. */
.rp { z-index: 56; }
#v-report { z-index: 57; }
@media (max-width: 420px) { .dx-nums { grid-template-columns: repeat(4, 1fr); } }
.rp .uv-head { margin-bottom: calc(-56px - var(--top)); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s, border-color .25s; }
.rp .uv-head .uv-back { background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rp .uv-head .uv-ttl { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.rp .uv-head.solid { background: rgba(6, 6, 9, .94); border-bottom-color: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.rp .uv-head.solid .uv-ttl { opacity: 1; transform: none; }

/* the hero: the hook's picture, graded into the page */
.rp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(70vh, 540px); padding-top: calc(var(--top) + 72px); }
.rp-bg { position: absolute; inset: 0; z-index: -2; background: center 28% / cover no-repeat; transform: scale(1.07); transition: transform 1.8s var(--ease); }
.rp.in .rp-bg { transform: none; }
.rp-grade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 55% at 12% 100%, color-mix(in srgb, var(--c1, #ff2d87) 28%, transparent), transparent 70%), linear-gradient(180deg, rgba(5, 5, 7, .3) 0%, rgba(5, 5, 7, .32) 30%, rgba(5, 5, 7, .84) 68%, var(--bg) 100%); }
.rp-hin { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px 24px; }
.rp-kick { display: inline-flex; align-items: center; gap: 10px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.rp-kick i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.rp-kick em { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .28); font-style: normal; color: var(--gold); }
.rp-ttl { margin-top: 14px; font: 900 clamp(40px, 12.4vw, 78px)/.88 var(--x); font-stretch: 72%; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 6px 40px rgba(0, 0, 0, .45); }
.rp-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font: 650 15px var(--f); color: rgba(255, 255, 255, .84); }
.rp-state { padding: 4px 7px; border-radius: 6px; font: 700 10px var(--f); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .13); }
.rp-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); }
.rp-st { min-width: 0; padding: 14px 0 0 16px; border-left: 1px solid rgba(255, 255, 255, .16); }
.rp-st:first-child { padding-left: 0; border-left: 0; }
.rp-st b { display: block; font: 900 clamp(38px, 11.4vw, 62px)/.9 var(--x); font-stretch: 75%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.rp-st span { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 700 10px/1.2 var(--f); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.rp-st span svg { width: 13px; height: 13px; flex: none; color: var(--gold); }
.rp-dl { display: inline-block; margin-top: 6px; font: 700 11.5px var(--f); font-style: normal; color: var(--muted); white-space: nowrap; }
.rp-dl.up { color: var(--up); }
.rp-dl.down { color: var(--down); }

/* the verdict */
.rp-wrap { max-width: 760px; margin: 0 auto; padding: 4px 20px calc(var(--bot) + 56px); }
.rp-verdict { padding: 26px 0 4px; }
.rp-vh { font: 800 clamp(25px, 6.6vw, 36px)/1.12 var(--d); letter-spacing: -.025em; text-wrap: balance; }
.rp-vh em { font-style: normal; color: var(--gold); }
.rp-vs { max-width: 62ch; margin-top: 12px; font: 450 15px/1.55 var(--f); color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.rp-sk { height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.rp-vs.rp-sk { width: 78%; height: 44px; }

/* a section: its number, its name, a hairline */
.rp-sec { margin-top: 46px; }
.rp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 16px; }
.rp-no { font: 700 11px var(--f); letter-spacing: .08em; color: var(--gold); }
.rp-h h2 { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1.1 var(--d); letter-spacing: -.02em; }
.rp-h h2 svg { width: 20px; height: 20px; color: rgba(255, 255, 255, .78); }
.rp-rule { flex: 1; min-width: 20px; height: 1px; align-self: center; background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04)); }
.rp-aside { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 600 12px var(--f); color: var(--muted); white-space: nowrap; }
.rp-aside svg { width: 13px; height: 13px; color: rgba(255, 255, 255, .55); }
.rp-aside svg.f { color: #ff6b9e; }
.rp-heat { font: 800 15px var(--d); color: #fff; }
.rp-aside .rp-dl { margin: 0; }
.rp-key { display: inline-block; width: 16px; border-top: 1.5px dashed rgba(255, 255, 255, .5); }
.rp-sub { display: flex; align-items: center; gap: 7px; margin: 28px 0 8px; font: 700 10.5px var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rp-sub svg { width: 14px; height: 14px; }

/* a chart you can drag across */
.rp-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 42px; margin-bottom: 8px; }
.rp-read b { font: 900 36px/1 var(--x); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.rp-read span { font: 600 13px var(--f); color: var(--text2); }
.rp-was { font-style: normal; color: var(--muted); }
.rp-plot { position: relative; height: var(--ph, 190px); touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.rp-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-prev { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.rp-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(255, 255, 255, .06); pointer-events: none; }
.rp-gl span { position: absolute; left: -34px; top: -7px; width: 26px; text-align: right; font: 600 9.5px var(--f); color: rgba(255, 255, 255, .36); }
/* the y labels sit in a gutter of their own, never under the curve */
.rp-plot, .rp-plot ~ .rp-lane, .rp-plot ~ .rp-ax { margin-left: 34px; }
.rp-rev { transform: scaleX(0); transform-origin: 0 0; transition: transform 1.1s var(--ease) .15s; }
.rp.in .rp-rev { transform: none; }
.rp-end { position: absolute; right: -4px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #ff2d87; box-shadow: 0 0 0 3px rgba(255, 45, 135, .25), 0 0 14px #ff2d87; opacity: 0; transition: opacity .3s 1.1s; pointer-events: none; }
.rp.in .rp-end { opacity: 1; }
.rp-endl { position: absolute; right: 2px; transform: translateY(-160%); font: 800 12px var(--f); color: #ff8fb6; pointer-events: none; }
.rp-drop { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed rgba(255, 84, 112, .8); pointer-events: none; }
.rp-drop span { position: absolute; bottom: 8px; left: 6px; padding: 3px 7px; border-radius: 6px; font: 700 10.5px var(--f); white-space: nowrap; color: #fff; background: rgba(255, 84, 112, .92); }
.rp-drop.r span { left: auto; right: 6px; }
.rp-cur { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(255, 255, 255, .6); pointer-events: none; }
.rp-cur i { position: absolute; left: -6px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 0 16px rgba(155, 130, 255, .9); }
.rp-lane { position: relative; height: 22px; margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.rp-lane i { position: absolute; top: -1px; display: grid; place-items: center; min-width: 17px; height: 18px; padding: 0 4px; border-left: 1px solid rgba(255, 255, 255, .32); font: 700 10px var(--f); font-style: normal; color: rgba(255, 255, 255, .55); transition: color .15s, background .15s; }
.rp-lane i.on { color: #000; background: #fff; border-color: #fff; border-radius: 0 4px 4px 0; }
.rp-ax { display: flex; justify-content: space-between; margin-top: 6px; font: 600 10.5px var(--f); letter-spacing: .04em; color: rgba(255, 255, 255, .42); }
.rp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--line); }
.rp-trio div { padding: 12px 0 0 14px; border-left: 1px solid var(--line); }
.rp-trio div:first-child { padding-left: 0; border-left: 0; }
.rp-trio b { display: block; font: 800 22px/1 var(--d); font-variant-numeric: tabular-nums; }
.rp-trio span { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 650 10px var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rp-trio span svg { width: 12px; height: 12px; flex: none; }

/* the lines, set like a lyric sheet with notes in the margin */
.rp-lines { list-style: none; border-top: 1px solid var(--line); }
.rp-line { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background .2s; }
.rp-line.on { background: linear-gradient(90deg, rgba(155, 130, 255, .14), transparent 75%); }
.rp-ln { display: grid; gap: 3px; padding-top: 5px; font: 600 10.5px var(--f); color: rgba(255, 255, 255, .4); }
.rp-ln b { font: 700 12px var(--f); color: rgba(255, 255, 255, .78); }
.rp-lt p { font: 600 17px/1.4 var(--f); color: rgba(255, 255, 255, .93); text-wrap: pretty; }
.rp-lm { display: block; height: 3px; margin-top: 10px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.rp-lm i { display: block; width: var(--w); height: 100%; border-radius: 2px; background: rgba(255, 84, 112, .5); transform: scaleX(0); transform-origin: 0 0; transition: transform .9s var(--ease) .3s; }
.rp.in .rp-lm i { transform: none; }
.rp-line.worst .rp-lm i { background: var(--down); box-shadow: 0 0 10px rgba(255, 84, 112, .6); }
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rp-tags em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; font: 700 9.5px var(--f); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.rp-tags em svg { width: 10px; height: 10px; }
.rp-tags .lv { color: #ff8fb6; background: rgba(255, 45, 135, .13); }
.rp-tags .lf { color: #ff8a9b; background: rgba(255, 84, 112, .13); }
.rp-lv { display: grid; justify-items: end; gap: 5px; padding-top: 6px; text-align: right; }
.rp-lv b { display: inline-flex; align-items: center; gap: 4px; font: 800 13px var(--f); color: #ff6b9e; }
.rp-lv b svg { width: 12px; height: 12px; }
.rp-lv small { font: 650 11px var(--f); color: rgba(255, 255, 255, .5); white-space: nowrap; }
.rp-line.worst .rp-lv small { color: #ff8a9b; }

/* the hit forecast: one number, one meter */
.rp-fc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.rp-fcn { display: flex; align-items: baseline; }
.rp-fcn b { font: 900 78px/.85 var(--x); font-stretch: 75%; font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 0 40px rgba(244, 197, 92, .32); }
.rp-fc.wait .rp-fcn b { color: #fff; text-shadow: none; }
.rp-fcn small { margin-left: 3px; font: 800 22px var(--x); font-stretch: 80%; color: rgba(255, 255, 255, .5); }
.rp-fct b { display: block; font: 800 18px/1.2 var(--d); }
.rp-fc.hot .rp-fct b { color: var(--gold); }
.rp-fct span { display: block; margin-top: 5px; font: 450 13.5px/1.5 var(--f); color: var(--muted); }
.rp-meter { grid-column: 1 / -1; margin-top: 18px; }
.rp-mt { position: relative; height: 8px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 10%), rgba(255, 255, 255, .05); }
.rp-mf { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, #7c5cff, #ff2d87 62%, var(--gold)); transform: scaleX(0); transform-origin: 0 0; transition: transform 1s var(--ease) .2s; }
.rp-fc.wait .rp-mf { background: linear-gradient(90deg, rgba(255, 255, 255, .3), #fff); }
.rp.in .rp-mf { transform: none; }
.rp-mk { position: absolute; top: 50%; left: var(--p); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 4px 14px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s 1.05s; }
.rp.in .rp-mk { opacity: 1; }
.rp-ms { display: flex; justify-content: space-between; margin-top: 9px; font: 600 10px var(--f); color: rgba(255, 255, 255, .4); }

/* bars by day */
.rp-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.rp-bars.dense { gap: 1px; }
.rp-bars i { position: relative; flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(155, 130, 255, .95), rgba(124, 92, 255, .32)); transform: scaleY(0); transform-origin: 0 100%; transition: transform .7s var(--ease) .1s; }
.rp-bars.dense i { border-radius: 1px 1px 0 0; }
.rp.in .rp-bars i { transform: none; }
.rp-bars i.now { background: linear-gradient(180deg, #ff2d87, rgba(255, 45, 135, .38)); box-shadow: 0 0 18px rgba(255, 45, 135, .32); }
.rp-bars i.z { background: none; box-shadow: none; }
.rp-bars i span { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); font: 700 10px var(--f); white-space: nowrap; color: #fff; opacity: 0; transition: opacity .15s; pointer-events: none; }
.rp-bars i:hover span, .rp-bars i.now span { opacity: 1; }
.rp-spark svg { width: 100%; height: 90px; }

/* where listens start, where they are */
.rp-stack { display: flex; gap: 3px; height: 10px; margin-bottom: 10px; }
.rp-stack i { width: var(--w); min-width: 3px; border-radius: 3px; background: var(--c); }
.rp-list { border-top: 1px solid var(--line); }
.rp-li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 46px; gap: 12px; align-items: center; min-height: 50px; border-bottom: 1px solid var(--line); }
.rp-si { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.rp-si svg { width: 16px; height: 16px; }
.rp-li b { font: 600 15px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-li span { font: 800 15px var(--d); font-variant-numeric: tabular-nums; text-align: right; }
.rp-li small { font: 600 11px var(--f); color: var(--muted); text-align: right; }
.rp-li.cc { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.1fr) 46px; }
.rp-li .fl { display: inline-grid; place-items: center; width: 28px; height: 20px; border-radius: 4px; font: 700 10px/1 var(--f); font-style: normal; color: var(--text2); background: rgba(255, 255, 255, .07); }
.rp-li u { display: block; width: var(--w); height: 4px; border-radius: 2px; background: linear-gradient(90deg, #22e1ff, #7c5cff); }

/* everything else: a ledger */
.rp-ledger { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 34px; border-top: 1px solid var(--line); }
.rp-lr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rp-lr span { display: inline-flex; align-items: center; gap: 11px; font: 550 15px var(--f); color: var(--text2); }
.rp-lr span svg { width: 18px; height: 18px; flex: none; color: rgba(255, 255, 255, .5); }
.rp-lr.z span svg { color: rgba(255, 255, 255, .26); }
.rp-lr b { font: 800 19px var(--d); font-variant-numeric: tabular-nums; text-align: right; }
.rp-lr small { grid-column: 2; margin-top: 3px; font: 600 10.5px var(--f); color: var(--muted); text-align: right; }
.rp-lr small:empty { display: none; }
.rp-lr small .rp-dl { margin: 0; font-size: 10.5px; }
.rp-lr.z b { font-weight: 600; color: rgba(255, 255, 255, .28); }
@media (min-width: 640px) { .rp-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-foot { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 46px; padding: 20px 0; text-align: left; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.rp-foot > span { flex: 1; min-width: 0; }
.rp-fi { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #000; background: linear-gradient(135deg, #ffe08a, var(--gold)); box-shadow: 0 8px 24px -10px rgba(244, 197, 92, .7); }
.rp-fi svg { width: 22px; height: 22px; stroke-width: 2.2; }
.rp-foot b { display: block; font: 800 18px var(--d); }
.rp-foot small { display: block; margin-top: 3px; font: 500 13px var(--f); color: var(--muted); }
.rp-foot > svg { flex: none; color: var(--gold); transition: transform .2s var(--ease); }
.rp-foot:hover > svg { transform: translateX(4px); }
.rp-empty { display: grid; justify-items: start; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp-empty b { font: 800 17px var(--d); }
.rp-empty span { font: 450 14px/1.5 var(--f); color: var(--muted); }
.rp-empty .btn { margin-top: 10px; }

/* the Studio: no picture, the brand's light instead */
.rp-hero.st { min-height: 0; padding-top: calc(var(--top) + 78px); background: radial-gradient(80% 120% at 0% 0%, rgba(124, 92, 255, .3), transparent 60%), radial-gradient(70% 100% at 100% 0%, rgba(255, 45, 135, .2), transparent 62%), radial-gradient(60% 80% at 60% 120%, rgba(244, 197, 92, .12), transparent 70%); }
.rp-hero.st .rp-grade { background: linear-gradient(180deg, transparent 55%, var(--bg)); }
.rp-hero.st .rp-ttl { font-size: clamp(38px, 11vw, 66px); }
.rp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.rp-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rp-seg button { height: 32px; padding: 0 14px; border-radius: 999px; font: 700 11.5px var(--f); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); transition: background .2s, color .2s; }
.rp-seg button:hover { color: #fff; }
.rp-seg button.on { color: #000; background: #fff; }
.rp-as select { height: 38px; padding: 0 34px 0 14px; border: 0; border-radius: 999px; font: 650 13.5px var(--f); color: #fff; background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 12px no-repeat; -webkit-appearance: none; appearance: none; }
.rp-as select option { color: #000; }
.rp-hooks { border-top: 1px solid var(--line); }
.rp-hk { display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px 56px 48px; gap: 10px; align-items: center; width: 100%; min-height: 64px; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); transition: background .15s; }
button.rp-hk:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .04), transparent); }
.rp-hk.hd { min-height: 0; padding: 10px 0 8px; font: 700 9.5px var(--f); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.rp-hk.hd span:nth-child(n+3) { text-align: right; }
.rp-hn { font: 700 11px var(--f); color: rgba(255, 255, 255, .42); }
.rp-ht { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rp-ht img, .rp-ht > i { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--s3); }
.rp-ht > span { min-width: 0; }
.rp-ht b { display: block; font: 700 14.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ht small { display: block; margin-top: 2px; font: 500 12px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-hv { font: 800 15px var(--d); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 420px) { .rp-hk { grid-template-columns: 16px minmax(0, 1fr) 48px 48px; gap: 8px; } .rp-hk > :nth-child(5) { display: none; } .rp-ht { gap: 10px; } .rp-ht img, .rp-ht > i { width: 40px; height: 40px; } }
.rp-clock { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; align-items: center; }
.rp-clock svg { width: 100%; height: auto; }
.rp-clock text { font: 700 10px var(--f); fill: rgba(255, 255, 255, .5); text-anchor: middle; }
.rp-clock p { font: 800 21px/1.25 var(--d); letter-spacing: -.02em; text-wrap: balance; }
@media (max-width: 480px) { .rp-clock { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .rp-clock svg { max-width: 240px; } }
@media (min-width: 900px) { .rp-hero { min-height: 480px; } .rp-hin, .rp-wrap { padding-left: 28px; padding-right: 28px; } }
@media (prefers-reduced-motion: reduce) { .rp-bg, .rp-rev, .rp-lm i, .rp-mf, .rp-bars i { transform: none !important; transition: none !important; } .rp-end, .rp-mk { opacity: 1; transition: none; } }

/* ================================================================ icons with their words: stats, tabs, sections, small buttons */
.pf-stats span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pf-stats span svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.pf-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pf-tabs button svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 430px) { .pf-tabs.n5 button { flex-direction: column; gap: 3px; padding: 9px 0 10px; font-size: 11.5px; } .pf-tabs.n5 button svg { width: 18px; height: 18px; } }
.ch-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.ch-tabs button svg { width: 15px; height: 15px; flex: none; }
.tag > svg.i { width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }
.mini, .fa-fol { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mini svg, .fa-fol svg { width: 14px; height: 14px; flex: none; stroke-width: 2.2; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button svg { width: 15px; height: 15px; flex: none; }
.hfield > svg { width: 18px; height: 18px; flex: none; margin-right: 8px; color: var(--muted); }
.btn svg { flex: none; }

/* ================================================================ community: answers, premieres, Day One, the leagues */
/* what makes a drop special right now, over its title */
.xchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.xchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 11px; border-radius: 14px; font: 750 11.5px var(--f); color: #fff; background: rgba(10, 10, 16, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.xchip svg { flex: none; width: 13px; height: 13px; }
.xchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xchip.pm { background: linear-gradient(115deg, rgba(255, 45, 135, .9), rgba(255, 138, 0, .9)); box-shadow: 0 8px 22px -10px rgba(255, 45, 135, .8); }
.xchip.d1 { color: #1a1205; background: linear-gradient(115deg, #ffe08a, var(--gold)); box-shadow: 0 8px 22px -10px rgba(244, 197, 92, .8); }
.xchip.an:hover { background: rgba(255, 255, 255, .16); }
.tg.an { display: inline-flex; align-items: center; gap: 4px; color: #1a1205; border-color: transparent; background: linear-gradient(115deg, #ffe08a, var(--gold)); }
.tg.an svg { width: 12px; height: 12px; }

/* a premiere: the picture, the clock, wait for it */
.card.pmc { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.pm-bg { position: absolute; inset: 0; background: center 30% / cover no-repeat; transform: scale(1.04); }
.card.pmc.on .pm-bg { animation: pmZoom 16s ease-in-out infinite alternate; }
@keyframes pmZoom { to { transform: scale(1.13); } }
.pm-bg.none { background: radial-gradient(80% 60% at 30% 30%, rgba(124, 92, 255, .45), transparent 70%), radial-gradient(70% 60% at 80% 70%, rgba(255, 45, 135, .4), transparent 70%), #07070b; }
.pm-sh { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 7, .4), rgba(5, 5, 7, .12) 28%, rgba(5, 5, 7, .74) 58%, rgba(5, 5, 7, .96)); }
.pm-in { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; padding: 0 22px calc(var(--tab) + var(--bot) + 30px); text-align: center; }
.pm-kick { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 15px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: linear-gradient(115deg, #ff2d87, #ff8a00); box-shadow: 0 10px 30px -10px rgba(255, 45, 135, .85); }
.pm-kick svg { width: 15px; height: 15px; }
.pm-kick em { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .45); font-style: normal; }
.pm-in h2 { margin-top: 18px; font: 900 clamp(40px, 13vw, 74px)/.9 var(--x); font-stretch: 72%; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 8px 40px rgba(0, 0, 0, .6); }
.pm-by { margin-top: 10px; font: 700 16px var(--f); color: rgba(255, 255, 255, .88); }
.pm-cd { display: flex; gap: 10px; margin-top: 24px; }
.pm-cd span { display: grid; justify-items: center; min-width: 70px; padding: 11px 6px 9px; border-radius: 15px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.pm-cd b { font: 900 36px/1 var(--x); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.pm-cd i { margin-top: 5px; font: 700 9.5px var(--f); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.pm-when { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font: 600 13.5px var(--f); color: rgba(255, 255, 255, .82); }
.pm-when svg { width: 15px; height: 15px; }
.pm-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.pm-n { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 13px var(--f); color: rgba(255, 255, 255, .72); }
.pm-n svg { width: 15px; height: 15px; }
.pm-n b { color: #fff; }
@media (max-width: 360px) { .pm-cd span { min-width: 60px; } .pm-cd b { font-size: 30px; } }

/* Hook Lab: release */
.hl-when { display: grid; grid-template-columns: 1fr 1fr; }
.hl-when button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.hl-when button svg { width: 16px; height: 16px; }
.hl-prem { display: grid; gap: 6px; margin-top: 12px; }
.hl-prem > span { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--f); color: var(--muted); }
.hl-prem > span svg { width: 14px; height: 14px; }
.hl-prem input { height: 48px; padding: 0 14px; border: 0; border-radius: 12px; font: 650 16px var(--f); color: #fff; background: var(--s2); color-scheme: dark; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hl-note { display: flex; gap: 8px; margin-top: 10px; font: 500 12.5px/1.45 var(--f); color: var(--muted); }
.hl-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.hl-d1 span svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--gold); }
.hl-d1.off { opacity: .62; }
.hl-ans { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: linear-gradient(115deg, rgba(244, 197, 92, .14), rgba(255, 45, 135, .1)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .36); }
.hl-ans > svg { flex: none; width: 20px; height: 20px; color: var(--gold); }
.hl-ans > span { flex: 1; min-width: 0; font: 600 14px/1.35 var(--f); }
.hl-ans small { display: block; margin-top: 2px; font: 500 12px var(--f); color: var(--muted); }
.hl-ans button { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.hl-ans button svg { width: 16px; height: 16px; }
.hl-empty > .hl-ans { margin: 0 0 18px; }

/* the leagues */
.lg-pick { display: flex; gap: 8px; margin: 4px 0 14px; overflow-x: auto; scrollbar-width: none; }
.lg-pick::-webkit-scrollbar { display: none; }
.lg-pick button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 19px; font: 750 13.5px var(--f); color: var(--text2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lg-pick button svg { width: 15px; height: 15px; }
.lg-pick button small { font: 700 11px var(--f); color: var(--muted); }
.lg-pick button.on { color: #000; background: #fff; }
.lg-pick button.on small { color: rgba(0, 0, 0, .55); }
.lg-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; font: 700 10.5px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lg-head span { display: inline-flex; align-items: center; gap: 6px; }
.lg-head svg { width: 13px; height: 13px; }
.lg-k { color: var(--gold); }
.lg-champ { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 14px; padding: 14px 16px; text-align: left; border-radius: 18px; background: linear-gradient(120deg, rgba(244, 197, 92, .2), rgba(255, 138, 0, .08) 60%, rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .4); }
.lg-cw { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #1a1205; background: linear-gradient(135deg, #ffe08a, var(--gold)); box-shadow: 0 10px 26px -10px rgba(244, 197, 92, .8); }
.lg-cw svg { width: 26px; height: 26px; stroke-width: 2.1; }
.lg-ct { flex: 1; min-width: 0; }
.lg-ct small { display: block; font: 700 10px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lg-ct b { display: block; margin-top: 3px; font: 800 17px var(--d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-ct span { display: block; font: 500 12.5px var(--f); color: var(--muted); }
.lg-champ > svg { flex: none; color: var(--gold); }
.lg-tbl { border-top: 1px solid var(--line); }
.lg-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 54px 56px; gap: 10px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); cursor: pointer; }
.lg-row:not(.hd):hover { background: linear-gradient(90deg, rgba(255, 255, 255, .04), transparent); }
.lg-row.hd { min-height: 0; padding: 10px 0 8px; cursor: default; font: 700 9.5px var(--f); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.lg-row.hd span:nth-child(n+3) { text-align: right; }
.lg-rk { justify-self: center; font: 800 15px var(--d); color: rgba(255, 255, 255, .55); }
.lg-row.top .lg-rk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; color: #1a1205; }
.lg-row.t1 .lg-rk { background: linear-gradient(135deg, #ffe08a, var(--gold)); }
.lg-row.t2 .lg-rk { background: linear-gradient(135deg, #f1f1f4, #b8bac4); }
.lg-row.t3 .lg-rk { background: linear-gradient(135deg, #ffc69a, #c77a45); }
.lg-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lg-h img, .lg-h > i { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--s3); }
.lg-h > span { min-width: 0; }
.lg-h b { display: block; font: 700 14.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-h small { display: block; font: 500 12px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-wl { font: 650 12.5px var(--f); color: var(--text2); text-align: right; }
.lg-r { font: 800 17px var(--d); font-variant-numeric: tabular-nums; text-align: right; }
.lg-how { display: flex; gap: 8px; margin: 14px 0 6px; font: 500 12.5px/1.5 var(--f); color: var(--muted); }
.lg-how svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.lg-empty { display: grid; justify-items: start; gap: 8px; margin-top: 8px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lg-empty > svg { width: 30px; height: 30px; color: var(--gold); }
.lg-empty b { font: 800 18px var(--d); }
.lg-empty span { font: 450 14px/1.5 var(--f); color: var(--muted); }
.lg-empty .btn { margin-top: 6px; }
@media (max-width: 380px) { .lg-row { grid-template-columns: 26px minmax(0, 1fr) 46px 48px; gap: 8px; } }

/* ================================================================ trust: Tastemaker panels, the A&R desk, Verified original, install */
/* a panelist's sheet */
.pnl-k { display: flex; align-items: center; justify-content: center; gap: 7px; font: 800 11px var(--x); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pnl-k svg { width: 15px; height: 15px; }
.pnl h4 { margin-top: 8px; }
.pnl .sub { text-align: center; }
.pnl-t { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 10px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pnl-t img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.pnl-t > span { flex: 1; min-width: 0; }
.pnl-t b { display: block; font: 800 16px var(--d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-t small { font: 500 13px var(--f); color: var(--muted); }
.pnl-t i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #000; background: #fff; }
.pnl-t i svg { width: 18px; height: 18px; margin-left: 2px; }
.pnl-q { margin-top: 18px; }
.pnl-q > b { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font: 750 14px var(--f); }
.pnl-q > b svg { width: 16px; height: 16px; color: var(--gold); }
.pnl-lines { display: grid; gap: 6px; }
.pnl-lines button { padding: 10px 12px; border-radius: 12px; text-align: left; font: 600 15px/1.4 var(--f); color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pnl-lines button.on { color: #fff; background: rgba(255, 45, 135, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 107, 158, .75); }
.pnl-nv { display: flex; align-items: center; gap: 10px; font: 600 14px var(--f); }
.pnl-skip { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pnl-skip input { flex: 1; accent-color: #ff2d87; }
.pnl-skip span { font: 700 13px var(--mono); }
.pnl-w { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; font: 600 15px var(--f); color: #fff; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pnl .btn.wide { margin-top: 16px; }

/* the artist's panel, in the Hook report */
.rp-pt { max-width: 62ch; font: 450 15px/1.55 var(--f); color: rgba(255, 255, 255, .72); }
.rp-pbuy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.rp-pbuy button { display: grid; justify-items: center; gap: 2px; padding: 16px 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: background .2s, box-shadow .2s; }
.rp-pbuy button:hover { background: rgba(244, 197, 92, .08); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .45); }
.rp-pbuy b { font: 900 34px/1 var(--x); font-stretch: 78%; }
.rp-pbuy span { font: 700 9.5px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rp-pbuy em { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font: 800 14px var(--d); font-style: normal; color: var(--gold); }
.rp-pbuy em .coin { width: 16px; height: 16px; font-size: 16px; }
.rp-pf { display: flex; gap: 7px; margin-top: 12px; font: 500 12.5px/1.45 var(--f); color: var(--muted); }
.rp-pf svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.rp-pst { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 650 14px var(--f); }
.rp-pst span { display: inline-flex; align-items: center; gap: 6px; font: 700 10px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rp-pst span.live { color: var(--up); }
.rp-pst span.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px var(--up); animation: pulse 1.6s infinite; }
.rp-pst em { margin-left: auto; font: 600 12px var(--f); font-style: normal; color: var(--muted); }
.rp-prep { margin-top: 16px; }
.rp-bar3 { display: flex; gap: 3px; height: 12px; }
.rp-bar3 i { width: var(--w); min-width: 3px; border-radius: 4px; }
.rp-bar3 .y, .rp-leg .y { background: var(--up); }
.rp-bar3 .m, .rp-leg .m { background: var(--gold); }
.rp-bar3 .x, .rp-leg .x { background: var(--down); }
.rp-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 600 12.5px var(--f); color: var(--text2); }
.rp-leg span { display: inline-flex; align-items: center; gap: 6px; }
.rp-leg i { width: 9px; height: 9px; border-radius: 3px; }
.rp-leg b { color: #fff; }
.rp-pbest { display: flex; gap: 10px; margin-top: 18px; font: 600 16px/1.45 var(--f); }
.rp-pbest > svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: #ff6b9e; }
.rp-pbest small { display: block; margin-bottom: 4px; font: 700 10px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rp-pskip { display: flex; gap: 10px; margin-top: 14px; font: 500 14px/1.5 var(--f); color: var(--text2); }
.rp-pskip svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--muted); }
.rp-words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rp-words span { padding: 6px 12px; border-radius: 999px; font: 600 14px var(--f); color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* the panel pool, under the Ear card */
.pstrip { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(244, 197, 92, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(244, 197, 92, .26); }
.pstrip.on { background: linear-gradient(120deg, rgba(49, 229, 154, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .4); }
.ps-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #1a1205; background: linear-gradient(135deg, #ffe08a, var(--gold)); }
.ps-i svg { width: 22px; height: 22px; stroke-width: 2.1; }
.ps-t { flex: 1; min-width: 0; }
.ps-t b { display: block; font: 800 15px var(--d); }
.ps-t small { display: block; font: 500 12.5px/1.4 var(--f); color: var(--muted); }
.ps-lock svg { width: 18px; height: 18px; color: var(--muted); }
.pstrip .mini.on { color: #fff; background: rgba(255, 255, 255, .14); }

/* the A&R desk */
.desk .rp-hero.st .rp-ttl { font-size: clamp(36px, 10vw, 60px); }
.dk-me { display: flex; align-items: center; gap: 12px; width: 100%; margin: 22px 0 6px; padding: 14px 16px; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dk-me > svg:first-child { flex: none; width: 20px; height: 20px; color: var(--gold); }
.dk-me > span { flex: 1; min-width: 0; }
.dk-me b { display: block; font: 800 15px var(--d); }
.dk-me small { display: block; font: 500 12.5px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-me > svg:last-child { flex: none; width: 17px; height: 17px; color: var(--muted); }
.dk-list { margin-top: 14px; border-top: 1px solid var(--line); }
.dk-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dk-cv { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--s3); }
.dk-cv img { width: 100%; height: 100%; object-fit: cover; }
.dk-cv span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .15s; }
.dk-cv:hover span, .dk-cv:focus-visible span { opacity: 1; }
.dk-cv span svg { width: 20px; height: 20px; }
.dk-tt { min-width: 0; text-align: left; }
.dk-tt b { display: block; font: 750 15px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-tt small { display: block; font: 500 12px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-st { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.dk-st em { display: inline-flex; align-items: center; gap: 4px; font: 650 11.5px var(--f); font-style: normal; color: var(--text2); }
.dk-st em svg { width: 12px; height: 12px; color: var(--muted); }
.dk-st em.fc, .dk-st em.fc svg { color: var(--gold); }

/* Verified original */
.vo-b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; color: #052e1f; background: #31e59a; box-shadow: 0 0 10px rgba(49, 229, 154, .5); vertical-align: -3px; }
.vo-b svg { width: 12px; height: 12px; stroke-width: 2.4; }
.vbadge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; font: 700 10.5px var(--f); letter-spacing: .08em; text-transform: uppercase; color: #7ff0b8; background: rgba(49, 229, 154, .12); box-shadow: inset 0 0 0 1px rgba(49, 229, 154, .35); }
.vbadge svg { width: 13px; height: 13px; }

/* on the home screen */
.instbar { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(var(--tab) + var(--bot) + 12px); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: rgba(18, 18, 24, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .1); transform: translateY(160%); transition: transform .4s var(--spring); }
.instbar.in { transform: none; }
.ib-mark { flex: none; width: 38px; height: 38px; }
.ib-mark > * { width: 100%; height: 100%; }
.ib-t { flex: 1; min-width: 0; }
.ib-t b { display: block; font: 800 14.5px var(--d); }
.ib-t small { font: 500 12px var(--f); color: var(--muted); }
.ib-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); }
.ib-x svg { width: 18px; height: 18px; }
.inst { text-align: center; }
.inst-mark { display: inline-block; width: 64px; height: 64px; }
.inst-mark > * { width: 100%; height: 100%; }
.inst .sub { margin-top: 4px; }
.inst-steps { display: grid; gap: 10px; margin-top: 18px; list-style: none; text-align: left; }
.inst-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font: 600 14.5px var(--f); background: rgba(255, 255, 255, .05); }
.inst-steps li i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 12px var(--f); font-style: normal; color: #000; background: #fff; }
.inst-steps li svg { flex: none; width: 20px; height: 20px; color: var(--gold); }

/* ================================================================ the type system
   Inter reads and taps, Archivo heads and counts (and the wide-caps page kickers), mono only for timecodes and codes.
   Numbers that used to be monospace keep their columns with tabular figures. */
.chead .demo,
.ckeys span,
.vcount,
.tfoot .gate i,
.bkt .sdt,
.bmr .rd,
.bmr .st.done,
.dz .fmt,
.crow .cd,
.h3 span,
.cplay .cnum,
.un-s,
.nx-s,
.bkt .seed text,
.fc-st.res,
.s-h span,
.th-board .sc b,
.hl-dpin b,
.hl-spec em,
.hl-pin b,
.hl-pin i,
.hl-dial small,
.hl-part b,
.hl-cut i,
.lk-steps i,
.rp-state,
.rp-st span,
.rp-dl,
.rp-no,
.rp-sub,
.rp-gl span,
.rp-endl,
.rp-drop span,
.rp-lane i,
.rp-ax,
.rp-trio span,
.rp-ln,
.rp-ln b,
.rp-tags em,
.rp-lv b,
.rp-lv small,
.rp-ms,
.rp-bars i span,
.rp-li small,
.rp-li .fl,
.rp-lr small,
.rp-seg button,
.rp-hk.hd,
.rp-hn,
.rp-clock text,
.pm-cd i,
.lg-pick button small,
.lg-head,
.lg-ct small,
.lg-row.hd,
.lg-wl,
.rp-pbuy span,
.rp-pst span,
.rp-pst em,
.rp-pbest small,
.dk-st em,
.vbadge,
.inst-steps li i { font-variant-numeric: tabular-nums; }

/* ================================================================ taste and sharing: reposts, translation, Clear mode, pull to refresh */
.xchip.rp { background: rgba(10, 10, 16, .6); }
.xchip.rp svg { color: #7ff0b8; }
.xchip.tr { cursor: pointer; }
.xchip.tr.on { color: #000; background: #fff; box-shadow: none; }
.xchip.tr.on svg { color: #000; }
/* the sung line in your language, right under it */
.lyr .ltr { max-width: 92%; margin: 8px auto 0; font: 600 15px/1.35 var(--f); color: rgba(255, 255, 255, .86); text-align: inherit; text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.lyr .ltr:empty { display: none; }
.lyr.swap .ltr { animation: lnIn .5s var(--ease); }
/* Clear mode: the hook and its words, nothing else */
.card.tk.clear .meta, .card.tk.clear .rail, .card.tk.clear .bubs, .card.tk.clear .hint { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
body.clearing .topbar, body.clearing .tabbar { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
/* pull to refresh */
.ptr { position: fixed; z-index: 60; left: 50%; top: calc(var(--top) + 64px); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; font: 700 13px var(--f); color: #fff; background: rgba(18, 18, 24, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .12); opacity: 0; transform: translate(-50%, 0); pointer-events: none; }
.ptr svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.ptr.go svg { transform: rotate(180deg); }
.ptr.spin svg { animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* the share sheet's action row: round icons with their word under them */
.shacts { display: flex; gap: 6px; margin: 16px -16px 0; padding: 4px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.shacts::-webkit-scrollbar { display: none; }
.sha { flex: none; display: grid; justify-items: center; gap: 7px; width: 74px; font: 600 11.5px/1.25 var(--f); color: var(--text2); text-align: center; }
.sha-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .2s, transform .15s var(--spring); }
.sha-i svg { width: 22px; height: 22px; }
.sha:hover .sha-i { background: rgba(255, 255, 255, .14); }
.sha:active .sha-i { transform: scale(.92); }
.sha.on .sha-i { color: #052e1f; background: #31e59a; box-shadow: 0 8px 22px -10px rgba(49, 229, 154, .8); }
.sha[data-sa="nope"] .sha-i svg, .sha[data-sa="rep"] .sha-i svg { color: rgba(255, 255, 255, .8); }

/* Not interested, Why this hook */
.nope-opts { display: grid; gap: 8px; margin-top: 14px; }
.nope-opts button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nope-opts button:hover { background: rgba(255, 255, 255, .09); }
.nope-opts button > svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.nope-opts b { display: block; font: 750 15px var(--f); }
.nope-opts small { display: block; margin-top: 2px; font: 500 12.5px/1.4 var(--f); color: var(--muted); }
.sheet h4 > svg.i { width: 19px; height: 19px; margin-right: 8px; vertical-align: -3px; }
.why { display: grid; gap: 2px; margin-top: 14px; list-style: none; border-top: 1px solid var(--line); }
.why li { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); font: 600 14.5px/1.4 var(--f); }
.why li svg { flex: none; width: 20px; height: 20px; color: var(--gold); }
.toast .tundo { pointer-events: auto; margin-left: 6px; padding: 4px 10px; border-radius: 999px; font: 800 12.5px var(--f); color: #000; background: #fff; }

/* the inbox, by kind */
.nfil { display: flex; gap: 6px; margin: 0 -18px 10px; padding: 2px 18px 4px; overflow-x: auto; scrollbar-width: none; }
.nfil::-webkit-scrollbar { display: none; }
.nfil button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 17px; font: 700 13px var(--f); color: var(--text2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.nfil button svg { width: 15px; height: 15px; }
.nfil button.on { color: #000; background: #fff; }

/* comments: the artist's pin and likes; bigger taps on the time and the name */
.cpin { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font: 700 11.5px var(--f); color: var(--gold); }
.cpin svg { width: 13px; height: 13px; }
.cbya { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 4px; font: 700 11.5px var(--f); color: #ff6b9e; }
.cbya svg { width: 12px; height: 12px; }
.tchip { height: 28px; padding: 0 10px 0 8px; border-radius: 14px; }
.unm { display: inline-flex; align-items: center; min-height: 28px; padding: 0 2px; margin: 0 -2px; }
.cmt b { min-height: 28px; }

/* the Crate: Saved or History */
.cr-seg { display: inline-flex; gap: 4px; margin: 2px 0 14px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.cr-seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font: 700 13px var(--f); color: var(--text2); }
.cr-seg button svg { width: 15px; height: 15px; }
.cr-seg button.on { color: #000; background: #fff; }
.hist { border-top: 1px solid var(--line); }
.hrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.hrow img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }
.hrow b { display: block; font: 700 14.5px var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow small { display: block; font: 500 12px var(--f); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow em { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--f); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.hrow em svg { width: 13px; height: 13px; color: #31e59a; }

/* ================================================================ profile card, seeking, search tabs */
.pcard { text-align: center; }
.pc-in { display: grid; justify-items: center; gap: 4px; padding: 22px 18px 18px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 255, .28), transparent 60%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.pc-av img, .pc-av .av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 30px -10px rgba(0, 0, 0, .8); }
.pc-in > b { margin-top: 10px; font: 800 20px var(--d); }
.pc-in > span:not(.pc-av) { font: 600 14px var(--f); color: var(--muted); }
.pc-qr { display: grid; place-items: center; width: 196px; height: 196px; margin-top: 16px; padding: 14px; border-radius: 20px; background: #fff; }
.pc-qr svg { width: 100%; height: 100%; }
.pc-qr p { font: 600 12px var(--f); color: #000; word-break: break-all; }
.pc-in small { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 12.5px var(--f); color: var(--muted); }
.pc-in small svg { width: 15px; height: 15px; }
.card.tk .tbar { touch-action: none; cursor: pointer; transition: height .15s var(--ease); }
.card.tk .tbar::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -10px; }
.card.tk .tbar.seeking { height: 6px; }
.tbar-t { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font: 700 22px var(--mono); color: #fff; background: rgba(10, 10, 16, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; }
.card.tk.seekon .meta, .card.tk.seekon .rail { opacity: .15; transition: opacity .2s var(--ease); }
.tbar.seeking .tbar-t { opacity: 1; }
.s-tabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 17px; font: 700 13px var(--f); color: var(--text2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.s-tabs button small { font: 700 11px var(--f); color: var(--muted); font-variant-numeric: tabular-nums; }
.s-tabs button.on { color: #000; background: #fff; }
.s-tabs button.on small { color: rgba(0, 0, 0, .55); }