/* TONE ZONE — graphite surfaces and one blue accent. */
:root{--bg:#0c111b;--panel:#151d2a;--line:#344053;--ink:#f1f4f9;--muted:#aab5c6;--lime:#79a8ff;--violet:#79a8ff;--pink:#ee9393;--accent:#2463dc}
body{background:var(--bg);font-family:Arial,Helvetica,sans-serif;line-height:1.5}h1,h2,h3,.brand,.year,.big,.score b,.cover-play{font-family:Arial,Helvetica,sans-serif}h1,h2,h3{line-height:1.2}.shell{max-width:1120px}.header{border-bottom:1px solid var(--line);padding-bottom:22px}.brand{font-size:30px;font-weight:800;letter-spacing:-1px}.brand .tag{font-family:inherit!important}.mark{height:30px;gap:3px}.mark i{background:var(--lime);border-radius:2px}.screen-tools{gap:6px}.screen-tools .textbtn{border-radius:6px;padding:9px 12px;color:var(--muted)}.screen-tools .textbtn:hover{background:var(--panel);color:var(--ink)}.textbtn:hover{color:var(--lime)}.eyebrow{font-size:13px;letter-spacing:1.5px;color:var(--muted)}
.intro{padding:26px 0;display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:end}.intro .eyebrow{grid-column:1/-1;margin:0 0 4px}.intro h1{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-1px;line-height:1.12}.intro p{max-width:255px;margin:0;font-size:16px}.grid{grid-template-columns:1.05fr 1fr;gap:28px}.grid>*,.gamegrid>*{min-width:0}.deck{min-height:230px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:none}.deck .eyebrow{color:var(--muted)}.deck h2{font-size:32px;max-width:none;letter-spacing:-.5px}.deck p{max-width:none;font-size:16px;color:var(--muted)}.deck .wave{display:none}.deckfoot{border-color:var(--line);gap:16px;margin-top:24px;color:var(--muted);font-weight:400}.deckfoot span:last-child{text-align:right}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}.panel h2{font-size:23px}.primary{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;box-shadow:none;font-weight:700}.primary:hover:not(:disabled){background:#1d55c2}.primary:active:not(:disabled){background:#194cae}.primary:disabled,.primary:disabled:hover,.primary:disabled:active{background:#273348;border-color:#45536b;color:#b1bed1;opacity:1;box-shadow:none;cursor:not-allowed}.chip{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:7px}.chip.active{background:#1c3156;border-color:#658ac7;color:var(--ink)}input,select,.category-select{background:#101722;color:var(--ink);border:1px solid #4c5c73;border-radius:7px}input:focus,.category-select:focus-visible{outline-color:var(--lime)}.small{font-size:14px}.rulebar{border-top:1px solid var(--line)}.rulebar strong{font-size:16px}.rulebar span{font-size:14px}.num{color:var(--muted)}
.category-group{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px;margin:18px 0}.category-group legend{color:var(--ink)}.category-check{border-radius:6px;border:1px solid transparent;font-size:16px;padding:9px 7px}.category-check:has(input:checked){background:#20304b;border-color:#476087}.category-check input[type=checkbox]{accent-color:var(--accent)}.category-check small{color:var(--muted)}
.scoreboard{gap:10px}.score{border:1px solid var(--line);border-radius:8px;padding:12px 16px}.score.active{background:#1b2b46;border-color:#658ac7}.score b{font-size:24px}.playerbox{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--panel)}.listen{border-radius:12px;background:var(--accent);color:#fff;box-shadow:none}.playerbox .wave{color:#6880a5}.wave b{border-radius:3px}.lineheading{padding-bottom:12px;border-bottom:1px solid var(--line)}.lineheading h2{font-size:26px}.timeline{padding:0;border:0}.slot{background:transparent;border:1px dashed #52617a;color:var(--muted);border-radius:7px;min-height:48px;margin:10px 0}.slot:hover:not(:disabled){color:var(--ink);border-color:var(--lime)}.slot.selected{background:#1c3156;border:1px solid #79a8ff;color:var(--ink)}.card,.year-choice{background:#1a2433;color:var(--ink);border:1px solid #3b4b63;border-radius:9px;padding:16px;gap:16px;box-shadow:none;margin:3px 0}.card .year{background:transparent;color:var(--ink);font-size:29px;font-weight:700;letter-spacing:-1px;padding:0 14px 0 0;border-right:1px solid #45546c;flex-shrink:0}.card h3,.card strong{font-size:16px}.card p,.card-artist{color:var(--muted)}.same-year-label{color:var(--lime);font-size:14px;font-weight:500}.year-choice.selected{background:#1c3156;border:1px solid var(--lime);box-shadow:none}.year-choice:hover:not(:disabled){border-color:var(--lime)}.card>div{min-width:0;overflow-wrap:anywhere}
.answer{background:#192a43;border:1px solid #688bbc;border-radius:9px}.answer.wrong{background:#30232b;border-color:#a66c75}.answer .year{color:var(--ink)}.answer.wrong .year{color:var(--pink)}.bonus-panel{background:#172235;border:1px solid #455977;border-radius:9px}.secondary{background:var(--panel);border-color:var(--line);border-radius:8px}.turnscreen{max-width:580px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:30px;margin:36px auto}.turnscreen h1{font-size:clamp(30px,7vw,46px);overflow-wrap:anywhere;letter-spacing:-1px}.big{color:var(--ink);font-size:76px}.turnscreen .panel{background:#111a28}.footer{padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px}.app-version{padding:3px 8px;background:var(--panel);border-radius:4px}.section:has(>#solo-clock){padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}#solo-clock{font-size:22px;color:var(--ink)}
dialog:not(.music-cover){background:var(--panel);border:1px solid #566780;border-radius:12px;max-width:540px;padding:24px}dialog:not(.music-cover)::backdrop{background:#050a13df}dialog.music-cover,dialog.music-cover.is-playing{background:#0c111b;color:var(--ink)}dialog.music-cover::backdrop{background:#0c111b}.cover-play{color:var(--ink);text-shadow:none}.cover-content{gap:18px}.cover-status{color:var(--muted)}html:fullscreen{background:var(--bg)}#toast{background:var(--ink);color:var(--bg);border-radius:8px}
@media(max-width:700px){.header{gap:12px}.screen-tools{width:100%;justify-content:flex-start;gap:6px}.screen-tools .textbtn{flex:1;font-size:14px;padding:9px 6px;white-space:nowrap}.intro{display:block;padding:24px 0}.intro h1{font-size:33px}.intro .eyebrow{margin-bottom:8px}.intro p{margin-top:12px;max-width:none}.grid,.gamegrid{grid-template-columns:1fr;gap:22px}.deck{min-height:0;padding:22px}.deck h2{font-size:29px}.deck p{font-size:16px}.deckfoot{font-size:14px}.panel{padding:20px}.turnscreen{padding:24px 18px;margin:24px auto}.card,.year-choice{padding:14px;gap:12px}.card .year{font-size:26px;padding-right:12px}.sticky{bottom:16px}.sticky .primary{box-shadow:0 0 0 5px var(--bg)}.rulebar{grid-template-columns:1fr;gap:18px}.rulebar>div{display:grid;grid-template-columns:120px 1fr;gap:0 12px}.rulebar .num{grid-row:1/3;margin:0;align-self:center}.category-options{gap:6px}.category-check{font-size:15px;padding:8px 5px;gap:8px}}
@media(max-width:380px){.category-options,.names{grid-template-columns:1fr}.card .year{font-size:23px}.deckfoot{flex-wrap:wrap}.deckfoot span:last-child{text-align:left}.rulebar>div{display:block}.rulebar .num{margin-bottom:5px}}

.cover-player{font-size:clamp(24px,5vw,38px);font-weight:700;line-height:1.25;color:var(--ink);margin:0;max-width:100%;overflow-wrap:anywhere;letter-spacing:0}.cover-status:empty{display:none}

/* Language control uses the existing restrained blue palette. */
.language-picker{display:inline-flex;align-items:center;border:1px solid #3a4559;border-radius:9px;overflow:hidden;flex-shrink:0}
.language-picker button{appearance:none;border:0;background:transparent;color:#cbd5e1;padding:10px 12px;min-height:44px;min-width:44px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.language-picker button[aria-pressed="true"]{background:#2563eb;color:#fff}
.language-picker button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.screen-tools{flex-wrap:wrap;align-items:center}
@media(max-width:600px){.header{align-items:flex-start;gap:12px}.screen-tools{justify-content:flex-end;gap:4px}.screen-tools>.textbtn{font-size:14px;padding:8px}.language-picker button{padding:8px}}

/* Contact and contextual song reports */
.contact-panel{margin-top:36px}.contact-panel>p{margin:12px 0 24px}.contact-panel a{overflow-wrap:anywhere}.contact-panel label,.contact-dialog label{display:block;font-size:14px}.contact-panel textarea,.contact-dialog textarea,.contact-dialog select{display:block;width:100%;margin-top:8px;background:var(--surface,#151c28);color:var(--text,#edf2fa);border:1px solid var(--line,#344056);border-radius:10px;padding:12px;font:inherit;font-size:16px;min-width:0}.contact-panel textarea,.contact-dialog textarea{resize:vertical}.contact-panel input,.contact-dialog input{margin-top:8px}.contact-dialog{width:min(560px,calc(100% - 24px));max-height:90dvh;overflow:auto}.contact-dialog>p{margin:14px 0 22px}.contact-dialog .primary,.contact-dialog .report-close{width:100%}.contact-status:empty{display:none}.contact-status{margin-top:14px;overflow-wrap:anywhere}.cover-report{display:block;margin:12px auto 0;font-size:14px}.report-error{font-size:14px}

.contact-dialog .contact-panel{border:0;padding:0;margin:0;background:transparent;box-shadow:none}.contact-dialog .formgrid{grid-template-columns:1fr}.contact-dialog .formgrid .full{grid-column:auto}.footer>[data-action="contact"]{order:1;margin-left:auto}.footer{flex-wrap:wrap;gap:16px}

/* Compact YouTube player with an opaque title strip inside the modal. */
.youtube-mini{position:relative;isolation:isolate;width:200px;height:200px;min-width:200px;min-height:200px;flex:0 0 200px;overflow:hidden;background:#000;visibility:hidden}
.youtube-mini iframe{display:block;position:absolute;inset:0;width:200px;height:200px;max-width:none;border:0;z-index:0}
.youtube-title-mask{position:absolute;inset:0 0 auto;height:70px;background:#0c111b;z-index:2;pointer-events:auto}
.music-cover.is-playing .youtube-mini{visibility:visible}
.music-cover .cover-content{height:auto;min-height:100%;gap:12px;padding:12px 0}
.music-cover{overflow-y:auto}
.music-cover.is-playing .cover-play{font-size:32px;line-height:1.1;min-height:44px;padding:0 16px}
.music-cover .cover-status:empty{display:none}
.music-cover .cover-player{flex-shrink:0;overflow-wrap:anywhere}

/* Playback controls occupy the first screen; the mini player is one scroll below. */
dialog.music-cover{padding:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto}
.music-cover .cover-content{box-sizing:border-box;min-height:100vh;min-height:100dvh;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom))}
.cover-video-screen{box-sizing:border-box;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:32px 24px max(32px,env(safe-area-inset-bottom))}

.brand-group{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;min-width:0}.youtube-credit{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:14px;font-weight:400;letter-spacing:0}.youtube-credit img{display:block;width:90px;height:31px;object-fit:contain}@media(max-width:420px){.brand-group{gap:8px 14px}.youtube-credit{font-size:12px}}

.gamegrid.timeline-only{grid-template-columns:1fr}.gamegrid.timeline-only>.playerbox{display:none}.replay-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}.replay-controls .textbtn{font-size:14px}.replay-controls p:empty{display:none}

.score .score-name{font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);margin-bottom:10px;max-width:220px;overflow-wrap:anywhere}.score .zone-label{display:inline;font-size:15px;font-weight:600;color:var(--muted);margin:0}.score{flex-shrink:0}

/* Official attribution is separate from the game brand and links to YouTube. */
.header>.youtube-credit{flex-shrink:0}.youtube-credit{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:8px;min-height:44px;background:#0c111b}.youtube-credit img{display:block;width:280px;height:auto;max-width:100%;object-fit:contain}.cover-video-screen{flex-direction:column;gap:24px}.cover-video-screen>.youtube-credit{flex-shrink:0}

.music-cover .cover-content{position:relative;padding-top:160px}.cover-brand{position:absolute;top:clamp(16px,6dvh,64px);left:0;width:100%;display:flex;justify-content:center;padding:0 16px}.cover-brand .youtube-credit{flex-shrink:0;max-width:100%}

.music-cover .cover-content{padding-top:220px}.cover-brand{top:clamp(16px,4dvh,40px);flex-direction:column;align-items:center;gap:8px}.cover-brand .cover-game-logo{font-size:clamp(28px,6vw,36px);line-height:1.2;justify-content:center;white-space:nowrap;color:var(--ink)}