/* Optional theme and utility controls; gameplay colors remain defined in styles.css. */
.utility-controls { display:flex; align-items:center; gap:2px; }
.utility-controls .text-button { white-space:nowrap; }
.theme-toggle { width:30px; height:30px; display:grid; place-items:center; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--ink); font-size:1rem; cursor:pointer; }
.theme-toggle:hover { background:#e9f2f0; }
.stats-note { color:var(--muted); font-size:.78rem; margin:-.15rem 0 0 !important; }
.reminder-dialog { text-align:left; }
.reminder-dialog h2 { font-size:1.7rem; }
.reminder-dialog form { display:grid; gap:9px; margin:21px 0 0; }
.reminder-dialog label { font-size:.8rem; font-weight:750; }
.reminder-dialog input { width:100%; border:1px solid #b8c6ce; border-radius:8px; background:#fff; color:var(--ink); padding:.75rem .8rem; font:inherit; }
.reminder-dialog .share-button { margin-top:3px; }
.cancel-button { border:0; border-radius:8px; background:transparent; color:var(--muted); font:700 .82rem inherit; padding:.55rem; cursor:pointer; }
.reminder-status { min-height:1.3em; color:#aa4a40 !important; font-size:.78rem; margin:12px 0 0 !important; }
.reminder-status.ready { color:var(--teal-dark) !important; }
.reminder-small { font-size:.69rem; line-height:1.45; margin:11px 0 0 !important; }
.mode-nav { width:min(1240px,calc(100% - 32px)); margin:0 auto 10px; display:flex; gap:5px; overflow:auto; scrollbar-width:none; }
.mode-nav::-webkit-scrollbar { display:none; }.mode-nav a { flex:0 0 auto; border:1px solid #c9d6dc; border-radius:999px; padding:.25rem .55rem; color:var(--ink); font-size:.68rem; font-weight:750; text-decoration:none; }.mode-nav a:hover,.mode-nav a[aria-current="page"] { background:#e7f3f1; border-color:#8fcac5; color:var(--teal-dark); }
.support-dialog { text-align:center; }.donation-amounts { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:20px 0 12px; }.donation-amounts button { border:1px solid #b9cbd1; border-radius:8px; padding:.56rem .2rem; background:#fff; color:var(--ink); font:800 .78rem inherit; cursor:pointer; }.donation-amounts button.selected { background:var(--teal); border-color:var(--teal); color:#fff; }.donate-link { display:block; text-decoration:none; }.support-dialog .cancel-button { margin-top:8px; }

html[data-theme="dark"] { color-scheme:dark; --ink:#eef4f4; --muted:#aab9c4; --paper:#0d1a29; --line:#34495b; --teal:#35a6a0; --teal-dark:#77cbc5; --gold:#efbb59; --slate:#65798b; --cream:#17283a; --shadow:0 18px 42px rgba(0,0,0,.28); }
html[data-theme="dark"] body { background:radial-gradient(circle at 50% 0,#16374a 0,transparent 26rem),var(--paper); }
html[data-theme="dark"] .game-topbar .brand { background:#fcfbf8; border-radius:6px; padding:2px 5px; line-height:0; }
html[data-theme="dark"] .game-topbar .brand img { mix-blend-mode:normal; }
html[data-theme="dark"] .text-button,html[data-theme="dark"] .icon-button,html[data-theme="dark"] .theme-toggle { color:var(--ink); }
html[data-theme="dark"] .text-button:hover,html[data-theme="dark"] .icon-button:hover,html[data-theme="dark"] .theme-toggle:hover { background:#20384b; }
html[data-theme="dark"] .grid,html[data-theme="dark"] #keyboard,html[data-theme="dark"] .radio-card,html[data-theme="dark"] .game-card,html[data-theme="dark"] .how-grid>div,html[data-theme="dark"] .dialog { background:#16293a; border-color:#355066; }
html[data-theme="dark"] .tile { background:#1c3144; border-color:#486175; color:var(--ink); }
html[data-theme="dark"] .tile.filled { border-color:#8fa2b0; }
html[data-theme="dark"] .key { background:#314a5d; color:var(--ink); }
html[data-theme="dark"] .radio-card select,html[data-theme="dark"] .reminder-dialog input { background:#0e1d2c; color:var(--ink); border-color:#4a6173; }
html[data-theme="dark"] .station-genre,html[data-theme="dark"] .radio-count,html[data-theme="dark"] .stats-note { color:var(--teal-dark); }
html[data-theme="dark"] .radio-count,html[data-theme="dark"] .status-pill { background:#193b45; border-color:#327276; }
html[data-theme="dark"] .content-split,html[data-theme="dark"] .content { border-color:var(--line); }
html[data-theme="dark"] .dist-bar { background:#284052; }
html[data-theme="dark"] .close-dialog { color:var(--muted); }
html[data-theme="dark"] .cancel-button { color:var(--muted); }
html[data-theme="dark"] .reminder-status { color:#ff9f90 !important; }
html[data-theme="dark"] .reminder-status.ready { color:#8ce0d5 !important; }
html[data-theme="dark"] .mode-nav a { background:#142b42; border-color:#506d84; color:#d7e3eb; } html[data-theme="dark"] .mode-nav a:hover,html[data-theme="dark"] .mode-nav a[aria-current="page"] { background:#193e50; border-color:#58aaa6; color:#c8f6f0; } html[data-theme="dark"] .donation-amounts button { background:#1e3950; color:#f5f9fc; border-color:#6b879d; } html[data-theme="dark"] .donation-amounts button.selected { background:#287f81; border-color:#55aaa8; }
@media(max-width:800px) { .utility-controls { gap:0; } .utility-controls .text-button { font-size:.68rem; padding:.35rem .28rem; } .reminder-trigger { max-width:80px; overflow:hidden; text-overflow:ellipsis; } .theme-toggle { width:27px; height:27px; } }
@media(max-width:370px) { .game-topbar .brand img { width:100px; } .utility-controls .text-button { font-size:.58rem; padding:.3rem .18rem; } .reminder-trigger { max-width:44px; } .theme-toggle { width:24px; height:24px; font-size:.86rem; } }

/* Dark mode visibility refinement: page, panels, controls, then game states. */
html[data-theme="dark"] { --paper:#071421; --ink:#f3f7fb; --muted:#b6c5d2; --line:#496276; --teal:#39b7b0; --teal-dark:#91e2da; --gold:#f1bf5c; --slate:#587289; --cream:#14283b; --shadow:0 14px 34px rgba(0,0,0,.22); }
html[data-theme="dark"] body { background:radial-gradient(circle at 50% 0,#123249 0,transparent 27rem),var(--paper); }
html[data-theme="dark"] .game-topbar .brand { background:transparent; padding:0; }
html[data-theme="dark"] .game-topbar .brand img { mix-blend-mode:normal; }
html[data-theme="dark"] .game-topbar .text-button,html[data-theme="dark"] .theme-toggle { color:#f3f7fb; }
html[data-theme="dark"] .game-topbar .text-button:hover,html[data-theme="dark"] .theme-toggle:hover { background:#1b3850; color:#b9f1eb; }
html[data-theme="dark"] .grid { background:#10243a; border-color:#4d6a82; }
html[data-theme="dark"] #keyboard,html[data-theme="dark"] .radio-card,html[data-theme="dark"] .game-card,html[data-theme="dark"] .how-grid>div,html[data-theme="dark"] .dialog { background:#142b42; border-color:#506d84; }
html[data-theme="dark"] .tile { background:#203a52; border-color:#607d94; color:#f8fbff; }
html[data-theme="dark"] .tile.filled { border-color:#a3b9c8; }
html[data-theme="dark"] .tile.correct,html[data-theme="dark"] .key.correct { background:#248f8d; border-color:#56c6bd; color:#fff; }
html[data-theme="dark"] .tile.present,html[data-theme="dark"] .key.present { background:#eab24e; border-color:#f5cc78; color:#142131; }
html[data-theme="dark"] .tile.absent,html[data-theme="dark"] .key.absent { background:#526d84; border-color:#7894a8; color:#fff; }
html[data-theme="dark"] .key { background:#29465e; border:1px solid #5b7890; color:#f5f9fc; font-weight:800; }
html[data-theme="dark"] .key:hover { background:#35566e; }
html[data-theme="dark"] .radio-card select,html[data-theme="dark"] .reminder-dialog input { background:#1e3950; color:#f5f9fc; border-color:#6b879d; }
html[data-theme="dark"] .radio-card select:hover { border-color:#9bb5c7; }
html[data-theme="dark"] .play-button { background:#287f81; border:1px solid #55aaa8; color:#fff; }
html[data-theme="dark"] .play-button:hover { background:#35a09b; }
html[data-theme="dark"] .play-button:disabled { background:#354b5b; border-color:#4d6271; color:#a6b4bd; }
html[data-theme="dark"] .radio-count,html[data-theme="dark"] .status-pill { background:#193e50; border-color:#4a9294; color:#b9f1eb; }
html[data-theme="dark"] .station-genre { color:#a5eee6; }
html[data-theme="dark"] .radio-status { color:#c3d1db; }
html[data-theme="dark"] .volume input { accent-color:#58c7c1; }
html[data-theme="dark"] .volume input::-webkit-slider-runnable-track { height:5px; border-radius:999px; background:#54728a; }
html[data-theme="dark"] .volume input::-webkit-slider-thumb { width:15px; height:15px; margin-top:-5px; border:2px solid #d9fffb; border-radius:50%; background:#44b8b1; }
html[data-theme="dark"] .volume input::-moz-range-track { height:5px; border-radius:999px; background:#54728a; }
html[data-theme="dark"] .volume input::-moz-range-thumb { width:12px; height:12px; border:2px solid #d9fffb; border-radius:50%; background:#44b8b1; }
html[data-theme="dark"] .content,html[data-theme="dark"] .content-split { border-color:#405c72; }
html[data-theme="dark"] .content p,html[data-theme="dark"] .intro > p:last-child,html[data-theme="dark"] footer { color:#b6c5d2; }
html[data-theme="dark"] .intro .eyebrow { color:#aec2d0; }
html[data-theme="dark"] .dist-bar { background:#28465e; }
html[data-theme="dark"] .dist-fill { background:#329d98; }
html[data-theme="dark"] button:focus-visible,html[data-theme="dark"] select:focus-visible,html[data-theme="dark"] input:focus-visible { outline:3px solid #8ae9df; outline-offset:2px; }
@media (hover:hover) { html[data-theme="dark"] .key:hover,html[data-theme="dark"] .play-button:hover,html[data-theme="dark"] .radio-card select:hover { filter:none; } }
.guide-discovery { margin-top:42px; padding-top:42px; border-top:1px solid var(--line); }
.guide-discovery h2 { margin-bottom:20px; }
.guide-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.guide-cards a { display:block; border:1px solid #dae3e7; border-radius:13px; padding:18px; background:#fff; text-decoration:none; }
.guide-cards a:hover { border-color:#8fcac5; box-shadow:0 10px 24px rgba(17,45,72,.08); }
.guide-cards h3 { color:var(--ink); margin:0 0:.4rem; font-size:1rem; }
.guide-cards p { color:var(--muted); margin:0; font-size:.86rem; line-height:1.55; }
.guides-link { display:inline-block; margin-top:17px; color:var(--teal-dark); font-size:.88rem; font-weight:800; text-decoration:none; }
.guides-link:hover { text-decoration:underline; }
html[data-theme="dark"] .guide-cards a { background:#142b42; border-color:#506d84; }
@media(max-width:800px){ .guide-cards { grid-template-columns:1fr; } }

/* Desktop keyboard: no enclosing panel, just tactile keys alongside the grid. */
@media (min-width:1100px) {
  html[data-theme="dark"] #keyboard { background:transparent; border:0; box-shadow:none; }
  html[data-theme="dark"] .key { background:#29465e; border-color:#5b7890; border-bottom-color:#486a83; box-shadow:0 2px 0 rgba(0,0,0,.28); color:#f5f9fc; }
  html[data-theme="dark"] .key:hover { background:#35566e; border-color:#7799af; }
  html[data-theme="dark"] .key:active { box-shadow:0 1px 0 rgba(0,0,0,.28); }
  html[data-theme="dark"] .key.correct { background:#248f8d; border-color:#56c6bd; color:#fff; }
  html[data-theme="dark"] .key.present { background:#eab24e; border-color:#f5cc78; color:#142131; }
  html[data-theme="dark"] .key.absent { background:#526d84; border-color:#7894a8; color:#fff; }
}