/* heardit — listening-room palette: violet night, VU-meter amber, lilac for interaction */
/* Inter (SIL Open Font License), bundled in /fonts so the site has no outside font dependency. */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('../fonts/InterDisplay-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('../fonts/InterDisplay-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('../fonts/InterDisplay-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --ink: #1B1230;
  --ink-2: #241940;
  --ink-3: #302352;
  --line: #43336B;
  --text: #F4EFFF;
  --muted: #AA9CCC;
  --amber: #FFB547;
  --lilac: #A390FF;
  --good: #5CE1A2;
  --bad: #FF7194;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16, .84, .24, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: 'cv11' 1;  /* Inter's rounder single-storey a */
  font-size: 17px;
  line-height: 1.5;
  background:
    radial-gradient(1100px 640px at 50% -12%, #33205A 0%, transparent 62%),
    radial-gradient(700px 500px at 100% 110%, #2A1747 0%, transparent 60%),
    var(--ink);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
a { color: var(--lilac); }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; }
h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; }
.muted { color: var(--muted); }

#app { position: relative; z-index: 1; }
.screen { width: min(100%, 760px); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px 48px; }

/* ---------- Buttons & inputs ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--ink-2);
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink-3); border-color: #5A4790; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #2A1500; }
.btn-primary:hover { background: #FFC56E; border-color: #FFC56E; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: transparent; color: var(--text); }
.btn-small { padding: 8px 14px; font-size: 15px; }
.btn-spotify { background: #1ED760; border-color: #1ED760; color: #04210F; }
.btn-spotify:hover { background: #3BE477; border-color: #3BE477; }
.btn-icon {
  appearance: none; border: 0; background: transparent; color: var(--muted); padding: 8px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.btn-icon:hover { color: var(--text); background: rgba(255,255,255,.06); }

input {
  width: 100%; min-width: 0; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 12px 18px; outline: none; transition: border-color .15s, background .15s;
}
input::placeholder { color: #7E70A3; }
input:focus { border-color: var(--lilac); background: rgba(0,0,0,.3); }
.inline { display: flex; gap: 10px; margin-top: 10px; }

/* ---------- Home ---------- */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 12px; }
.wordmark {
  font-size: clamp(3.4rem, 13vw, 7rem);
  font-family: var(--display); font-weight: 900; letter-spacing: -.055em; line-height: .9; padding-right: .06em;
  background: linear-gradient(180deg, #FFFFFF 30%, #C9BBFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: var(--muted); max-width: 30ch; margin: 18px 0 32px; }

.spotify-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--r-pill);
  background: rgba(30,215,96,.12); border: 1px solid rgba(30,215,96,.35); font-size: 14px; color: #BFF5D3;
}
.spotify-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #1ED760; }
.spotify-chip button { appearance: none; border: 0; background: rgba(255,255,255,.08); border-radius: var(--r-pill); padding: 4px 10px; cursor: pointer; font-size: 13px; color: #DDF9E7; }

/* Play: the main way in */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.quick-sub { margin: 0; color: var(--muted); max-width: 30ch; }
.btn-big {
  display: inline-flex; align-items: center; gap: 10px; padding: 18px 40px 18px 32px; font-size: 1.25rem; font-weight: 700;
  box-shadow: 0 14px 40px -12px rgba(255,181,71,.55);
}
.btn-big:hover { box-shadow: 0 18px 48px -12px rgba(255,181,71,.7); }

/* Game settings: rows of segmented controls (radio buttons) */
.settings { display: grid; gap: 14px; margin-top: 26px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.seg { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 4px 12px; }
.seg legend { float: left; padding: 0; color: var(--muted); font-size: 15px; font-weight: 500; }
.seg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label {
  position: relative; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.seg label:hover { color: var(--text); border-color: #5A4790; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: rgba(163,144,255,.18); border-color: var(--lilac); color: var(--text); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--lilac); outline-offset: 3px; }
.seg-hint { grid-column: 2; margin: 0; font-size: 14px; color: var(--muted); }
/* Difficulty warms from lilac to hot pink as it gets harder */
#difficulty label:has(input:checked) { border-color: var(--dc, var(--lilac)); background: color-mix(in srgb, var(--dc, var(--lilac)) 20%, transparent); }

.block { margin-top: 44px; }
.block > h2 { font-size: 1.6rem; letter-spacing: -.015em; }

.free { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 16px; }
.free-row { padding: 20px 4px; border-bottom: 1px solid var(--line); margin: 0; }
.free-row h3 { font-size: 1.12rem; }
.free-row p { margin: 2px 0 0; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text);
  padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer; font-size: 15px;
}
.chip:hover { border-color: var(--lilac); background: rgba(163,144,255,.12); }
#spotify-row-action { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.foot { margin-top: 40px; color: #7E70A3; font-size: 14px; }

/* ---------- Loading ---------- */
.loading { min-height: 70dvh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.loading p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.eq { display: flex; gap: 6px; height: 44px; align-items: flex-end; }
.eq i { width: 8px; border-radius: 4px; background: var(--amber); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.2s; background: #FFA36B; }
.eq i:nth-child(3) { animation-delay: -.45s; background: #F48FB1; }
.eq i:nth-child(4) { animation-delay: -.7s; background: #C79BFF; }
.eq i:nth-child(5) { animation-delay: -.9s; background: var(--lilac); }
@keyframes eq { 0%,100% { height: 18%; } 50% { height: 100%; } }

/* ---------- Round ---------- */
#screen-round { max-width: 600px; }
.round-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.round-meta { display: flex; flex-direction: column; line-height: 1.25; }
.round-meta span:first-child { font-weight: 700; }
.round-meta span:last-child { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.round-score { text-align: right; line-height: 1.15; }
.round-score span { display: block; font-size: 13px; color: var(--muted); }
.round-score b { font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--amber); }
.hint { text-align: center; color: #D9CDFB; margin: 18px 0 0; min-height: 1.5em; font-weight: 500; }

.meter-wrap {
  --size: min(78vw, 360px);
  position: relative; width: var(--size); height: var(--size); margin: 14px auto 8px;
}
.meter-wrap::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,181,71,.18), transparent 70%);
  filter: blur(18px); opacity: calc(.4 + var(--e, 0) * 1.2); transition: opacity .1s;
}
#viz { position: absolute; inset: -9%; width: 118%; height: 118%; }
.meter { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.meter-track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 14; }
.meter-fill {
  fill: none; stroke: var(--amber); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 879.6; stroke-dashoffset: 879.6;
  filter: drop-shadow(0 0 8px rgba(255,181,71,.55));
}
.meter-center {
  position: absolute; inset: 15%; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #3B2A63, #22173D 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 20px 60px -20px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .15s var(--ease-out);
}
.meter-center:hover { transform: scale(1.015); }
.meter-center:active { transform: scale(.985); }
.pts {
  font-size: clamp(3rem, 15vw, 5.2rem); font-family: var(--display); font-weight: 900; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.pts-lbl { font-size: 14px; color: var(--muted); max-width: 20ch; text-align: center; line-height: 1.3; }
.play-pill {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill); background: var(--amber); color: #2A1500; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.play-pill svg { width: 18px; height: 18px; }
.playing .play-pill { background: rgba(255,255,255,.14); color: var(--text); }

.ladder { list-style: none; display: flex; gap: 6px; padding: 0; margin: 6px auto 14px; max-width: 540px; }
.ladder li {
  flex: 1; min-width: 0; text-align: center; padding: 7px 2px 6px; border-radius: 12px; line-height: 1.2;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: #8173A8;
  transition: background .2s, border-color .2s, color .2s;
}
.ladder b { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ladder span { font-size: 12px; font-variant-numeric: tabular-nums; }
.ladder li.current { border-color: var(--amber); background: rgba(255,181,71,.13); color: var(--text); }
.ladder li.current span { color: var(--amber); }
.ladder li.skipped, .ladder li.wrong { opacity: .5; }
.ladder li.skipped span, .ladder li.wrong span { text-decoration: line-through; }
.ladder li.wrong { border-color: rgba(255,113,148,.6); color: var(--bad); }

.listen-row { display: flex; align-items: center; justify-content: center; gap: 14px; }

.guess { display: flex; gap: 10px; margin-top: 18px; }
.combo { position: relative; flex: 1; min-width: 0; }
.combo input { padding: 14px 20px; font-size: 17px; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5;
  list-style: none; margin: 0; padding: 6px; border-radius: 18px; background: #2B1F4A; border: 1px solid var(--line);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.55); max-height: min(44vh, 380px); overflow-y: auto;
}
.suggest li { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: rgba(163,144,255,.18); }
.suggest img { width: 40px; height: 40px; border-radius: 6px; flex: none; background: var(--ink-3); object-fit: cover; }
.suggest .s-t { font-weight: 600; line-height: 1.25; }
.suggest .s-a { font-size: 14px; color: var(--muted); }
.suggest .s-empty { color: var(--muted); cursor: default; }
.suggest .s-empty:hover { background: none; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.choice {
  appearance: none; text-align: left; border: 1px solid var(--line); background: var(--ink-2); border-radius: var(--r-md);
  padding: 14px 16px; cursor: pointer; line-height: 1.3; transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--lilac); background: var(--ink-3); }
.choice b { display: block; font-weight: 650; }
.choice span { font-size: 14px; color: var(--muted); }
.choice.wrong, .choice.wrong:hover { border-color: rgba(255,113,148,.55); background: rgba(255,113,148,.08); opacity: .55; cursor: not-allowed; }
.choice.wrong b { text-decoration: line-through; }

.feedback { min-height: 1.6em; text-align: center; margin: 12px 0 0; font-weight: 600; }
.feedback.bad { color: var(--bad); }
.feedback.good { color: var(--good); }
.round-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.streak { color: var(--amber); font-weight: 600; font-size: 15px; }

.shake { animation: shake .38s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* ---------- Results ---------- */
.results { text-align: center; padding-top: 24px; }
.res-level { color: var(--muted); margin: 0; font-weight: 600; }
.res-score {
  font-size: clamp(4rem, 20vw, 8rem); font-family: var(--display); font-weight: 900; letter-spacing: -.055em; line-height: .95;
  font-variant-numeric: tabular-nums; color: var(--amber); margin-top: 6px;
}
.res-sub { color: #D9CDFB; margin: 10px 0 0; }
.res-list { list-style: none; padding: 0; margin: 26px 0 0; text-align: left; border-top: 1px solid var(--line); }
.res-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.res-list img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--ink-3); }
.res-list .t { font-weight: 650; line-height: 1.25; }
.res-list .a { color: var(--muted); font-size: 14px; }
.res-list .p { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.res-list .p small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.res-list .miss .p { color: var(--bad); }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 100; background: #F4EFFF; color: #1B1230; padding: 12px 20px; border-radius: 14px; font-weight: 600;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); max-width: min(90vw, 520px); text-align: center;
}

/* =========================================================
   CINEMATIC REVEAL
   Opens with a circle wipe from wherever the player answered (driven from reveal.js),
   then builds up in the album cover's colours:
   --rv-a / --rv-b vivid hues, --rv-dark deep base, --rv-light highlight, --e live audio energy 0..1.
   ========================================================= */
.reveal {
  --rv-a: #A390FF; --rv-b: #FFB547; --rv-dark: #120B22; --rv-light: #FFF; --e: 0; --px: 0; --py: 0;
  position: fixed; inset: 0; z-index: 50; overflow: hidden; background: var(--rv-dark);
  display: grid; grid-template-rows: 1fr auto auto; color: #fff;
}
.reveal.fade { opacity: 0; transition: opacity .4s ease; }   /* reduced-motion entrance */
.reveal.fade.on { opacity: 1; }

/* The game screen sinks back while the circle opens over it */
#app { transform-origin: 50% 40%; }

/* Rings and flash that ride on top of the wipe */
.wipe-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.wipe-fx .ring {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid var(--c, #fff); box-shadow: 0 0 24px var(--c, #fff), inset 0 0 18px var(--c, #fff);
}
.wipe-fx .flash {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.25) 25%, transparent 60%);
  mix-blend-mode: screen;
}
.wipe-fx .spark {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--c, #fff); box-shadow: 0 0 12px var(--c, #fff);
}

.rv-bg { position: absolute; inset: -8%; overflow: hidden; }
.rv-bg img {
  width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.6) brightness(.68);
  opacity: 0; transform: scale(1.6);
  transition: opacity 1.2s ease .1s, transform 34s cubic-bezier(.1,.6,.3,1);
}
.reveal.on .rv-bg img { opacity: .8; transform: scale(1.25); }

.rv-beams { position: absolute; left: 50%; top: 40%; width: 0; height: 0; mix-blend-mode: screen; pointer-events: none; }
.rv-beams i {
  position: absolute; left: -110vmax; top: -110vmax; width: 220vmax; height: 220vmax; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 22%, transparent 52%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 22%, transparent 52%);
  filter: blur(10px); opacity: 0;
}
.rv-beams i:first-child {
  background: conic-gradient(from 0deg,
    transparent 0deg 8deg, var(--rv-a) 14deg, transparent 22deg 58deg,
    var(--rv-b) 64deg, transparent 72deg 118deg, var(--rv-a) 126deg, transparent 131deg 176deg,
    var(--rv-light) 181deg, transparent 186deg 232deg, var(--rv-b) 240deg, transparent 250deg 300deg,
    var(--rv-a) 308deg, transparent 316deg 360deg);
  animation: spin 70s linear infinite;
}
.rv-beams i:last-child {
  background: conic-gradient(from 30deg,
    transparent 0deg 30deg, var(--rv-b) 36deg, transparent 44deg 100deg,
    var(--rv-a) 108deg, transparent 116deg 200deg, var(--rv-light) 205deg, transparent 210deg 280deg,
    var(--rv-b) 288deg, transparent 296deg 360deg);
  animation: spin 110s linear infinite reverse;
}
/* Beams burst open once, then breathe with the music */
.reveal.on .rv-beams i { animation: spin 70s linear infinite, beams-in 1.6s cubic-bezier(.2,.8,.2,1) .35s both; opacity: calc(.32 + var(--e) * .55); }
.reveal.on .rv-beams i:last-child { animation: spin 110s linear infinite reverse, beams-in 1.6s cubic-bezier(.2,.8,.2,1) .5s both; }
@keyframes beams-in { from { opacity: 0; transform: scale(.2); } 40% { opacity: 1; } to { transform: scale(1); } }
@keyframes spin { to { rotate: 360deg; } }

.rv-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(0,0,0,.6) 100%); }

.rv-stage {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 20px 8px; text-align: center; min-height: 0;
}
.rv-verdict {
  margin: 0 0 18px; font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.88);
  padding: 6px 14px; border-radius: var(--r-pill); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-10px) scale(.96);
  transition: opacity .5s ease .9s, transform .7s var(--ease-out) .9s;
}
.reveal.win .rv-verdict { color: #D3FFE9; border-color: rgba(92,225,162,.5); }
.reveal.miss .rv-verdict { color: #FFD6E0; border-color: rgba(255,113,148,.45); }
.reveal.on .rv-verdict { opacity: 1; transform: none; }

/* Cover: drops in with a slight spin and overshoot, then a shockwave ring as it lands */
.rv-cover-wrap {
  --cs: min(62vw, 40vh, 420px);
  position: relative; width: var(--cs); height: var(--cs); perspective: 900px;
  opacity: 0; transform: translateY(60px) scale(.5) rotate(-9deg); filter: blur(12px);
  transition: opacity .5s ease .45s, filter .7s ease .45s, transform 1.15s cubic-bezier(.18,1.3,.4,1) .45s;
}
.reveal.on .rv-cover-wrap { opacity: 1; transform: none; filter: none; }
.rv-cover-wrap::before {
  content: ""; position: absolute; inset: -2px; border-radius: 12px; pointer-events: none;
  border: 2px solid var(--rv-light); box-shadow: 0 0 30px var(--rv-a), inset 0 0 20px var(--rv-a); opacity: 0;
}
.reveal.on .rv-cover-wrap::before { animation: shockwave 1s cubic-bezier(.1,.7,.2,1) 1.05s both; }
@keyframes shockwave { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
.rv-cover {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block;
  transform: rotateX(calc(var(--py) * -6deg)) rotateY(calc(var(--px) * 8deg)) scale(calc(1 + var(--e) * .03));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 40px 90px -24px rgba(0,0,0,.85),
    0 0 calc(60px + var(--e) * 100px) calc(var(--e) * 16px) color-mix(in srgb, var(--rv-a) 70%, transparent);
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255,255,255,.16));
  transition: transform .25s ease-out;
}
.rv-cover-wrap::after { /* light sheen sweeping across the cover after it lands */
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
  background-size: 300% 100%; background-position: 120% 0; opacity: 0;
}
.reveal.on .rv-cover-wrap::after { animation: sheen 1.3s ease 1.25s 1 both; }
@keyframes sheen { 0% { opacity: 0; background-position: 120% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } }

/* Title card: each word rises out of a mask, like kinetic type in a trailer */
.rv-text { margin-top: clamp(26px, 6vh, 60px); max-width: 1000px; }
.rv-title {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 7.6vw, 6.2rem);
  line-height: .98; letter-spacing: -.045em; word-spacing: .06em;
  text-shadow: 0 0 40px color-mix(in srgb, var(--rv-a) 55%, transparent), 0 4px 16px rgba(0,0,0,.35);
  text-wrap: balance;
}
/* Each word wipes up into view; its own clip opens past the glow, so nothing gets boxed in */
.rv-title .w { display: inline-block; }
.rv-title .wi {
  display: inline-block; transform: translateY(45%); opacity: 0;
  clip-path: inset(0 -1em 100% -1em);
  transition: transform .9s cubic-bezier(.2,.9,.15,1), clip-path .8s cubic-bezier(.2,.9,.15,1), opacity .3s ease;
  transition-delay: calc(1.05s + var(--i) * 85ms);
}
.reveal.on .rv-title .wi { transform: none; opacity: 1; clip-path: inset(-1em -1em -1em -1em); }
/* Once the words have landed (or the iris-out begins), drop their clips so they can't fight the circle's clip */
.reveal.settled .rv-title .wi, .reveal.closing .rv-title .wi { clip-path: none; transform: none; opacity: 1; transition: none; }
.rv-artist {
  margin: 14px 0 0; font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 600; letter-spacing: -.01em;
  opacity: 0; transform: translateY(12px); filter: blur(6px);
  transition: opacity .7s ease 1.5s, transform .9s var(--ease-out) 1.5s, filter .7s ease 1.5s;
}
.rv-album {
  margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: 1rem;
  opacity: 0; transition: opacity .8s ease 1.75s;
}
.rv-points {
  margin: 16px 0 0; font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(1.8rem, 4.4vw, 2.6rem); color: var(--amber);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(255,181,71,.55);
  opacity: 0; transform: scale(.6);
}
.reveal.on .rv-points { animation: pop .7s cubic-bezier(.2,1.6,.4,1) 1.95s both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.rv-points small { display: block; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.75); text-shadow: none; font-family: var(--font); letter-spacing: 0; }
.reveal.miss .rv-points { color: rgba(255,255,255,.62); text-shadow: none; font-size: 1.05rem; font-weight: 600; font-family: var(--font); letter-spacing: 0; }
.reveal.on .rv-artist { opacity: 1; transform: none; filter: none; }
.reveal.on .rv-album { opacity: 1; }

.rv-actions {
  position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px max(22px, env(safe-area-inset-bottom));
  opacity: 0; transform: translateY(10px); transition: opacity .6s ease 2.3s, transform .8s var(--ease-out) 2.3s;
}
.reveal.on .rv-actions { opacity: 1; transform: none; }
.rv-open { color: rgba(255,255,255,.8); font-weight: 600; text-underline-offset: 4px; }
.rv-open:hover { color: #fff; }
.rv-next { min-width: 160px; }
.rv-progress { position: relative; z-index: 2; height: 3px; background: rgba(255,255,255,.12); }
.rv-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--rv-a), var(--rv-b)); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .choices { grid-template-columns: 1fr; }
  .btn-big { width: 100%; justify-content: center; }
  .seg { grid-template-columns: 1fr; }
  .seg-hint { grid-column: 1; }
  .settings { padding: 16px; }
  .guess .btn { padding-inline: 16px; }
  .inline { flex-wrap: nowrap; }
  .ladder { gap: 4px; }
  .ladder b { font-size: 12.5px; }
  .ladder span { font-size: 11px; }
  .suggest { top: auto; bottom: calc(100% + 8px); box-shadow: 0 -20px 50px -10px rgba(0,0,0,.55); }
}
@media (max-height: 700px) {
  .rv-cover-wrap { --cs: min(56vw, 36vh, 360px); }
  .rv-text { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .rv-bg img, .reveal.on .rv-bg img { transform: scale(1.25); transition: opacity .6s ease; }
  .rv-cover-wrap, .rv-title .wi, .rv-artist, .rv-verdict, .rv-actions { transform: none !important; filter: none !important; }
  .rv-cover { transform: none; }
  .rv-title .wi { transition: none; }
}