:root {
  color-scheme: light;
  --page: #191b1d;
  --ink: #f2eee7;
  --muted: #b7b4ad;
  --shell: #541d1d;
  --shell-deep: #351113;
  --shell-light: #81514f;
  --band: #171416;
  --metal: #b6b4b1;
  --lcd: #8fc7e8;
  --line: rgba(255, 255, 255, .17);
  --grille: rgba(20, 12, 13, .38);
  --accent: #8fc7e8;
}

:root[data-theme="royal"] { --shell:#17326a; --shell-deep:#0d1d45; --shell-light:#5876ac; --grille:rgba(7,15,38,.43); }
:root[data-theme="emerald"] { --shell:#164b3d; --shell-deep:#0c2e28; --shell-light:#4c7c6c; --grille:rgba(3,28,22,.45); }
:root[data-theme="porcelain"] { --shell:#e2ddd2; --shell-deep:#b9b4aa; --shell-light:#fbf7ee; --grille:rgba(67,60,53,.24); --line:rgba(53,48,44,.14); --ink:#302c28; }

* { box-sizing: border-box; }
body { background:radial-gradient(ellipse at 50% -12%, rgba(255,255,255,.11), transparent 42%), linear-gradient(110deg, rgba(255,255,255,.018), transparent 23%, rgba(0,0,0,.16) 52%, transparent 76%), repeating-linear-gradient(96deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px), var(--page); color:var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin:0; min-height:100vh; }
button, input { font: inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
button:focus-visible, input:focus-visible { outline:3px solid #1677a8; outline-offset:3px; }
.study-page { margin:0 auto; max-width:1440px; padding:28px clamp(20px, 5.6vw, 86px) 34px; }
.study-header { align-items:center; display:grid; gap:18px; grid-template-columns:1fr auto 1fr; margin:0 auto 44px; max-width:1120px; }
.wordmark { color:var(--ink); font-size:1.28rem; font-weight:650; grid-column:2; isolation:isolate; justify-self:center; letter-spacing:-.05em; position:relative; text-decoration:none; white-space:nowrap; }.wordmark::before { background:url("/logo.svg") center / 100% 100% no-repeat; content:""; filter:invert(86%) sepia(23%) saturate(790%) hue-rotate(143deg) brightness(109%) contrast(92%); height:14rem; left:50%; opacity:.14; pointer-events:none; position:absolute; top:50%; transform:translate(-50%, -50%); width:51rem; z-index:-1; }.wordmark strong { font-family:Georgia, serif; font-size:1.72rem; font-style:italic; font-weight:500; }
.study-kicker { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.15em; margin:0; text-align:center; text-transform:uppercase; }
.quiet-button { background:none; border:0; color:var(--ink); font-size:.76rem; font-weight:700; grid-column:3; justify-self:end; padding:8px; }.quiet-button span { border:1px solid currentColor; border-radius:50%; display:inline-grid; height:17px; margin-left:5px; place-items:center; width:17px; }
.radio-stage { align-items:center; display:flex; justify-content:center; min-height:640px; }
.radio { background:linear-gradient(130deg, var(--shell-light), transparent 20%), linear-gradient(160deg, var(--shell), var(--shell-deep)); border:1px solid rgba(255,255,255,.16); border-radius:clamp(28px, 4vw, 58px); box-shadow:0 28px 45px rgba(64,44,35,.18), inset 0 1px rgba(255,255,255,.22), inset 0 -2px rgba(0,0,0,.22); color:#f7f4ef; max-width:1060px; overflow:hidden; padding:19px 23px 16px; position:relative; transition:background .25s ease, color .25s ease; width:100%; }
:root[data-theme="porcelain"] .radio { color:#322d28; box-shadow:0 28px 45px rgba(64,44,35,.12), inset 0 1px rgba(255,255,255,.6), inset 0 -2px rgba(75,65,56,.18); }
.radio-shell-texture { background-image:repeating-linear-gradient(92deg, transparent 0 15px, rgba(255,236,220,.045) 17px, transparent 19px 40px), linear-gradient(175deg, rgba(255,255,255,.07), transparent 16%, rgba(0,0,0,.11)); inset:0; mix-blend-mode:soft-light; pointer-events:none; position:absolute; }.radio > :not(.radio-shell-texture) { position:relative; }
.radio-topline { display:flex; justify-content:space-between; padding:0 9px 12px; }.radio-topline span { background:rgba(0,0,0,.2); border-radius:99px; height:3px; width:18%; }
.control-band { align-items:center; background:linear-gradient(180deg, #29272a, var(--band)); border:1px solid rgba(255,255,255,.07); border-radius:16px; box-shadow:inset 0 1px 2px rgba(0,0,0,.7); display:flex; justify-content:space-between; min-height:112px; padding:14px 20px; }
.display-label, .control-caption { font-size:.61rem; font-weight:800; letter-spacing:.15em; margin:0 0 8px; opacity:.7; text-transform:uppercase; }.display-label { color:#b1b2ae; }
.lcd { background:linear-gradient(145deg, #071115, #0a171b); border:1px solid rgba(143,199,232,.37); border-radius:5px; box-shadow:inset 0 0 12px #000, 0 1px 0 rgba(255,255,255,.1); color:var(--lcd); display:block; font-family:"Courier New", ui-monospace, monospace; font-size:clamp(.72rem, 1.6vw, .98rem); font-weight:700; letter-spacing:.085em; line-height:1.45; min-width:min(54vw, 370px); padding:9px 13px; text-shadow:0 0 8px rgba(143,199,232,.3); }.lcd span { font-size:.76em; opacity:.75; }.lcd.is-updating { animation:lcd-flicker .25s steps(2); }
@keyframes lcd-flicker { 50% { opacity:.46; } }
.band-controls { display:flex; gap:8px; }.speaker-button, .reset-control { align-items:center; background:#242225; border:1px solid #454348; border-radius:8px; color:#d2d1cd; display:flex; flex-direction:column; height:58px; justify-content:center; min-width:58px; padding:5px; }.speaker-button span, .reset-control span { font-size:1.15rem; line-height:1; }.speaker-button small, .reset-control small { font-size:.51rem; font-weight:800; letter-spacing:.1em; margin-top:4px; }.speaker-button[aria-pressed="false"] { color:#777; }
.radio-main { display:grid; gap:22px; grid-template-columns:1fr 190px 1.55fr; padding:30px 9px 25px; }
.tuner-section { border-right:1px solid var(--line); padding-right:21px; }.era-knobs { display:grid; gap:14px 8px; grid-template-columns:repeat(4, 1fr); }.era-knob { align-items:center; background:none; border:0; color:inherit; display:flex; flex-direction:column; font-size:.57rem; font-weight:800; gap:7px; letter-spacing:.04em; min-height:83px; padding:0; }.knob-face { background:repeating-linear-gradient(100deg, #d7d6d3 0 2px, #a09e9b 3px 5px, #dad9d6 6px 8px); border:2px solid rgba(40,38,37,.48); border-radius:50%; box-shadow:0 3px 0 rgba(0,0,0,.27), inset 2px 2px 3px rgba(255,255,255,.65), inset -3px -3px 4px rgba(60,59,57,.28); display:grid; height:42px; place-items:center; transition:transform .22s ease, box-shadow .16s ease; width:42px; }.knob-face i { background:#454342; border-radius:99px; height:3px; transform:rotate(-34deg) translateY(-12px); transform-origin:center 12px; width:8px; }.era-knob.is-selected .knob-face { box-shadow:0 1px 0 rgba(0,0,0,.3), inset 2px 2px 3px rgba(255,255,255,.65), inset -3px -3px 4px rgba(60,59,57,.28), 0 0 0 3px color-mix(in srgb, var(--accent) 44%, transparent); transform:rotate(19deg) translateY(2px); }.era-knob:active .knob-face { transform:translateY(2px) scale(.97); }
.play-section { align-items:center; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; padding-right:21px; }.main-dial { background:radial-gradient(circle at center, transparent 0 39px, rgba(45,45,43,.3) 40px 42px, transparent 43px 51px, rgba(45,45,43,.25) 52px 54px, transparent 55px), linear-gradient(135deg, #e0dfdc, #979693); border:3px solid rgba(37,36,34,.64); border-radius:50%; box-shadow:0 7px 0 rgba(0,0,0,.28), inset 3px 3px 3px rgba(255,255,255,.75), inset -4px -4px 5px rgba(45,43,41,.35), 0 0 0 5px rgba(255,255,255,.1); color:#2b2928; height:142px; padding:0; position:relative; transition:transform .16s ease, box-shadow .18s ease; width:142px; }.main-dial:hover { box-shadow:0 7px 0 rgba(0,0,0,.28), inset 3px 3px 3px rgba(255,255,255,.75), inset -4px -4px 5px rgba(45,43,41,.35), 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent); }.main-dial:active { transform:translateY(2px) rotate(4deg); box-shadow:0 4px 0 rgba(0,0,0,.3), inset 3px 3px 3px rgba(255,255,255,.75), inset -4px -4px 5px rgba(45,43,41,.35); }.main-dial.is-playing { animation:dial-spin var(--spin-duration, .5s) linear 1 forwards; } @keyframes dial-spin { to { transform:rotate(360deg); } }.dial-mark { background:#3b3938; height:12px; left:50%; position:absolute; top:10px; transform:translateX(-50%); width:3px; }.dial-copy { align-items:center; display:flex; flex-direction:column; justify-content:center; position:absolute; inset:0; }.dial-copy strong { font-size:1rem; letter-spacing:.12em; }.dial-copy small { font-size:.62rem; font-weight:800; margin-top:4px; opacity:.72; }.dial-note { font-size:.58rem; font-weight:800; letter-spacing:.14em; margin:13px 0 0; opacity:.74; }
.search-section { align-self:center; position:relative; }.search-section label { display:block; font-size:.9rem; font-weight:750; margin-bottom:9px; }.search-box { position:relative; }.search-box input { background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.22); border-radius:10px; color:#211f1d; min-height:53px; padding:0 47px 0 15px; width:100%; }.search-box > span { color:#4e4a47; font-size:1.45rem; pointer-events:none; position:absolute; right:15px; top:11px; }.search-hint { font-size:.7rem; line-height:1.45; margin:8px 0 0; opacity:.78; }.search-hint[data-tone="wrong"] { color:#f2a98f; font-weight:850; opacity:1; }.search-results { background:#fffdf9; border:1px solid rgba(32,29,27,.15); border-radius:10px; box-shadow:0 14px 24px rgba(25,21,18,.22); left:0; max-height:235px; overflow:auto; position:absolute; right:0; top:75px; z-index:3; }.search-result { align-items:center; background:none; border:0; border-bottom:1px solid #e7e1d8; color:#26221f; display:flex; gap:10px; justify-content:flex-start; min-height:61px; padding:10px 13px; text-align:left; width:100%; }.search-result:last-child { border-bottom:0; }.search-result:hover, .search-result:focus-visible { background:#f1ebe2; outline:0; }.search-result img { border-radius:7px; flex:0 0 auto; height:38px; object-fit:cover; width:38px; }.search-result strong, .search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.search-result strong { font-size:.84rem; }.search-result small { color:#6d665f; font-size:.69rem; margin-top:3px; }.search-result > span { min-width:0; }
.grille-zone { align-items:center; border-top:1px solid var(--line); display:grid; gap:20px; grid-template-columns:1fr auto auto; min-height:128px; overflow:hidden; padding:17px 10px 12px; position:relative; }.speaker-grille { background-image:radial-gradient(circle, var(--grille) 1.15px, transparent 1.75px); background-size:7px 7px; border-radius:12px; inset:0; opacity:.82; pointer-events:none; position:absolute; }.preset-panel, .skip-button { position:relative; }.preset-panel { align-items:center; display:flex; gap:18px; }.preset-panel .control-caption { margin:0; white-space:nowrap; }.preset-buttons { display:flex; gap:9px; }.preset { align-items:center; background:rgba(24,20,21,.18); border:1px solid rgba(255,255,255,.14); border-radius:8px; color:inherit; display:flex; flex-direction:column; height:63px; justify-content:center; min-width:52px; padding:4px; }.preset strong { font-size:.86rem; line-height:1; }.preset small { font-size:.49rem; font-weight:800; letter-spacing:.1em; margin-top:3px; opacity:.72; }.led { background:#392b2a; border-radius:50%; box-shadow:inset 0 1px 2px #000; height:6px; margin-bottom:6px; width:6px; }.preset.is-active .led { background:var(--lcd); box-shadow:0 0 7px var(--lcd); }.preset:active { transform:translateY(2px); }.skip-button { background:rgba(255,255,255,.09); border:1px solid var(--line); border-radius:9px; color:inherit; font-size:.63rem; font-weight:850; letter-spacing:.11em; min-height:47px; padding:0 16px; }.skip-button span { color:var(--lcd); font-size:1.2rem; margin-left:5px; }.radio-footer { display:flex; font-size:.52rem; font-weight:800; justify-content:space-between; letter-spacing:.17em; margin:0; opacity:.57; padding:9px 8px 0; }
.radio[data-result="correct"] .lcd { border-color:#a5e2bd; color:#a5e2bd; }.radio[data-result="wrong"] .lcd { border-color:#e5aa8a; color:#e5aa8a; }
dialog { background:#fffdf8; border:0; border-radius:18px; box-shadow:0 28px 60px rgba(30,22,17,.25); color:#28231f; max-width:440px; padding:32px; }.dialog-close { background:none; border:0; font-size:1.6rem; position:absolute; right:15px; top:10px; }.dialog-eyebrow { color:#746d65; font-size:.64rem; font-weight:800; letter-spacing:.15em; margin:0 0 14px; }.dialog-eyebrow, .dialog-close { text-transform:uppercase; }dialog h2 { font-family:Georgia, serif; font-size:2rem; font-weight:400; letter-spacing:-.06em; line-height:.94; margin:0; }dialog p:not(.dialog-eyebrow), dialog ul { color:#625b54; line-height:1.55; margin:20px 0 0; }dialog::backdrop { background:rgba(32,25,20,.3); backdrop-filter:blur(3px); }.study-note { color:var(--muted); font-size:.64rem; letter-spacing:.08em; margin:31px 0 0; text-align:center; text-transform:uppercase; }
@media (max-width:800px) { .study-header { margin-bottom:28px; }.radio-stage { min-height:auto; }.radio { max-width:620px; }.radio-main { grid-template-columns:1fr 170px; }.search-section { grid-column:1/-1; }.tuner-section { border-right:0; }.play-section { border-right:0; padding-right:0; }.search-section { border-top:1px solid var(--line); padding-top:20px; }.grille-zone { grid-template-columns:1fr auto; }.preset-panel { display:block; }.preset-panel .control-caption { margin-bottom:9px; }.skip-button { grid-column:2; grid-row:1; }.preset { min-width:47px; } }
@media (max-width:520px) { .study-page { padding:19px 12px 27px; }.study-header { grid-template-columns:1fr auto 1fr; margin-bottom:46px; min-height:52px; position:relative; }.study-kicker { display:none; }.wordmark { font-size:1.08rem; grid-column:2; justify-self:center; }.wordmark::before { height:5.4rem; width:18rem; }.quiet-button { font-size:0; grid-column:3; justify-self:end; position:absolute; right:0; top:3px; }.quiet-button span { font-size:.75rem; margin-left:0; }.radio { border-radius:27px; padding:13px; }.control-band { border-radius:12px; min-height:92px; padding:10px; }.lcd { font-size:.65rem; min-width:0; padding:8px; }.band-controls { gap:5px; }.speaker-button, .reset-control { height:50px; min-width:45px; }.radio-main { display:block; padding:20px 5px; }.tuner-section { padding:0 0 20px; }.era-knobs { gap:7px; }.era-knob { font-size:.48rem; min-height:74px; }.knob-face { height:39px; width:39px; }.play-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:21px 0; }.main-dial { height:132px; width:132px; }.search-section { border:0; padding-top:21px; }.grille-zone { display:block; min-height:170px; padding:17px 5px 11px; }.preset-panel .control-caption { margin-bottom:10px; }.preset-buttons { gap:5px; justify-content:space-between; }.preset { flex:1; min-width:0; }.skip-button { margin-top:14px; width:100%; }.radio-footer { font-size:.45rem; }.study-note { line-height:1.6; margin-top:25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }

/* Live game additions. The progress and slider controls appear only in the comparison study. */
.legacy-progress-wrap, .volume-gear { display:none; }
.result-area { align-self:center; padding:4px 4px 0; text-align:left; }
.result-area h2 { font-family:Georgia, serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:400; letter-spacing:-.06em; line-height:.95; margin:0; }
.result-area p { font-size:.77rem; line-height:1.5; margin:8px 0 0; opacity:.78; }
.result-area .result-score { color:var(--lcd); font-weight:800; opacity:1; }
.radio[data-result="wrong"] .result-area .result-score { color:#f0b396; }
.result-area a { color:var(--lcd); display:inline-block; font-size:.76rem; font-weight:800; margin-top:12px; }
.next-round { background:rgba(255,255,255,.1); border:1px solid var(--line); border-radius:8px; color:inherit; display:block; font-size:.65rem; font-weight:800; letter-spacing:.11em; margin-top:15px; min-height:42px; padding:0 14px; }
@media (min-width:801px) { .result-area { grid-column:3; grid-row:1; } }
html[data-variant="progress"] .display-wrap, html[data-variant="progress"] .speaker-button { display:none; }
html[data-variant="progress"] .legacy-progress-wrap { display:block; flex:1; min-width:0; padding-right:22px; }
html[data-variant="progress"] .volume-gear { align-items:center; background:#242225; border:1px solid #454348; border-radius:8px; color:#d2d1cd; display:grid; grid-template-columns:auto 1fr auto; gap:7px; height:58px; min-width:190px; padding:8px 10px; }
.volume-gear > span, .volume-gear output { font-size:.5rem; font-weight:800; letter-spacing:.09em; }
.volume-gear output { color:var(--lcd); font-variant-numeric:tabular-nums; text-align:right; }
.volume-gear input { accent-color:var(--lcd); cursor:pointer; min-width:74px; width:100%; }
.legacy-timeline { background:rgba(255,255,255,.14); border-radius:999px; height:8px; position:relative; }
.legacy-available, .legacy-progress { border-radius:inherit; height:100%; left:0; position:absolute; top:0; }
.legacy-available { background:rgba(143,199,232,.25); transition:width .22s ease; }
.legacy-progress { background:var(--lcd); box-shadow:0 0 9px rgba(143,199,232,.5); transition:width .08s linear; }
.legacy-markers { inset:0; position:absolute; }
.legacy-marker { position:absolute; top:0; }.legacy-marker i { background:rgba(255,255,255,.4); display:block; height:17px; transform:translate(-50%,-5px); width:1px; }
.legacy-marker small { color:#aeb6b9; font-size:.5rem; font-weight:800; left:0; position:absolute; top:16px; transform:translateX(-50%); }
.legacy-marker.is-unlocked small { color:#e4e5e0; }.legacy-marker.is-current i { background:var(--lcd); box-shadow:0 0 6px var(--lcd); height:22px; transform:translate(-50%,-7px); width:2px; }.legacy-marker.is-current small { color:var(--lcd); }
@media (max-width:800px) { .result-area { grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; } html[data-variant="progress"] .legacy-progress-wrap { padding-right:12px; } html[data-variant="progress"] .volume-gear { min-width:174px; } }
@media (max-width:520px) { .result-area { border:0; padding-top:21px; } html[data-variant="progress"] .legacy-progress-wrap { padding:0 4px 19px; } html[data-variant="progress"] .control-band { align-items:stretch; display:block; } html[data-variant="progress"] .band-controls { display:flex; } html[data-variant="progress"] .volume-gear { flex:1; min-width:0; } }

/* A complete 360° turn represents the full 15-second clue. */
@keyframes dial-spin { to { transform:rotate(var(--spin-degrees, 12deg)); } }
.radio-footer { font-size:.64rem; gap:18px; letter-spacing:.13em; opacity:.7; }
.radio-footer span { white-space:nowrap; }
@media (max-width:520px) { .radio-footer { font-size:.52rem; gap:8px; letter-spacing:.08em; } }

/* The surrounding dark-metal header remains legible when the radio itself becomes Porcelain. */
.study-header .wordmark, .study-header .quiet-button { color:#f2eee7; }
@media (min-width:801px) { .study-header { padding-top:10px; } }

/* Correct-answer emphasis stays within the radio's cool LCD material language. */
.radio[data-result="correct"] .lcd { border-color:var(--lcd); color:var(--lcd); }
.correct-result, .wrong-result { animation:correct-result-reveal .34s ease both; }
@keyframes correct-result-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.correct-kicker, .wrong-kicker { border-radius:999px; display:inline-flex; font-size:.7rem; font-weight:900; letter-spacing:.13em; margin:0 0 12px; padding:7px 10px; transform:translateY(-8px); }.correct-kicker { background:rgba(143,199,232,.14); border:1px solid rgba(143,199,232,.55); color:var(--lcd); }.wrong-kicker { background:rgba(240,179,150,.14); border:1px solid rgba(240,179,150,.58); color:#f0b396; }
.correct-details { align-items:center; display:grid; gap:14px; grid-template-columns:82px minmax(0,1fr); }
.correct-cover { animation:cover-reveal .4s ease .05s both; border:1px solid rgba(143,199,232,.38); border-radius:9px; box-shadow:0 7px 17px rgba(0,0,0,.26); display:block; height:82px; object-fit:cover; width:82px; }
@keyframes cover-reveal { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
.correct-copy h2 { font-family:Georgia, serif; font-size:clamp(1.55rem, 3vw, 2.2rem); font-weight:400; letter-spacing:-.06em; line-height:.92; margin:0; }
.correct-copy p { margin:6px 0 0; }.correct-copy .correct-artist { font-size:.83rem; font-weight:750; opacity:1; }.correct-copy .correct-album { font-size:.73rem; opacity:.72; }
.result-rewards { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }.result-rewards strong, .result-rewards span { border-radius:7px; font-size:.66rem; font-weight:900; letter-spacing:.1em; padding:8px 9px; }.result-rewards strong { background:var(--lcd); color:#09151b; }.result-rewards span { background:rgba(255,255,255,.09); border:1px solid var(--line); color:inherit; }
.result-actions { align-items:center; display:flex; flex-wrap:wrap; gap:12px; margin-top:15px; }.correct-result .next-round { background:var(--lcd); border-color:var(--lcd); color:#09151b; font-weight:900; margin:0; min-width:126px; }.correct-result .result-actions a { color:var(--lcd); margin:0; }.wrong-result .result-rewards strong { background:#f0b396; color:#241816; }.wrong-result .result-actions a { color:#f0b396; margin:0; }
.legacy-progress-wrap { position:relative; }.legacy-progress-wrap.is-result-flash::after { align-items:center; animation:result-lcd-flash 1.1s ease both; background:linear-gradient(145deg, #071115, #0a171b); border:1px solid rgba(143,199,232,.45); border-radius:5px; color:var(--lcd); content:attr(data-result-message); display:flex; font-family:"Courier New", ui-monospace, monospace; font-size:.75rem; font-weight:800; inset:0; justify-content:center; letter-spacing:.1em; position:absolute; text-shadow:0 0 8px rgba(143,199,232,.35); z-index:2; }.legacy-progress-wrap.is-result-flash .display-label { opacity:0; } @keyframes result-lcd-flash { 0% { opacity:0; } 15%, 72% { opacity:1; } 100% { opacity:0; } }
@media (max-width:520px) { .correct-details { gap:12px; grid-template-columns:70px minmax(0,1fr); }.correct-cover { height:70px; width:70px; }.correct-kicker { font-size:.64rem; }.result-actions { align-items:stretch; flex-direction:column; gap:9px; }.correct-result .next-round { width:100%; }.correct-result .result-actions a { text-align:center; } }

/* Resolved rounds give the right-side reveal space, while the grille control advances play. */
@media (min-width:801px) { .correct-result, .wrong-result { align-self:stretch; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:4px 0 4px 5px; }.correct-result .correct-details, .wrong-result .correct-details { grid-template-columns:86px minmax(0,1fr); max-width:none; width:100%; }.correct-result .correct-cover, .wrong-result .correct-cover { height:86px; width:86px; }.correct-result .correct-copy h2, .wrong-result .correct-copy h2 { font-size:clamp(1.65rem, 2.7vw, 2.15rem); line-height:.94; }.correct-result .correct-artist, .wrong-result .correct-artist { font-size:.84rem; }.correct-result .correct-album, .wrong-result .correct-album { font-size:.72rem; }.correct-result .result-rewards, .wrong-result .result-rewards { margin-top:12px; }.correct-result .result-actions, .wrong-result .result-actions { margin-top:12px; } }
.skip-button.is-next { background:var(--lcd); border-color:var(--lcd); box-shadow:0 0 0 3px rgba(143,199,232,.17); color:#09151b; font-size:.7rem; font-weight:950; }
.skip-button.is-next span { color:#09151b; }
.skip-button.is-next { align-items:center; display:inline-flex; gap:7px; justify-content:center; text-align:center; }.skip-button.is-next span { margin-left:0; }
@media (max-width:520px) { .skip-button.is-next { min-height:53px; } }

/* The first two clip markers are only 0.4 seconds apart, so their mobile labels
   need independent offsets even though their timeline positions remain exact. */
@media (max-width:520px) { .legacy-marker:nth-child(1) small { left:0; transform:translateX(0); }.legacy-marker:nth-child(2) small { left:0; transform:translateX(18px); }.legacy-marker small { font-size:.48rem; } }

/* On compact screens, keep the next action beside the primary play control. */
@media (max-width:520px) { .play-section { align-items:center; display:grid; grid-template-columns:132px minmax(112px, 1fr); column-gap:18px; justify-content:center; }.play-section .main-dial { grid-column:1; grid-row:1; }.play-section .dial-note { grid-column:1; grid-row:2; }.play-section .skip-button { grid-column:2; grid-row:1; margin:0; min-height:53px; width:100%; } }