:root { color-scheme: light; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font-size: 22px; }
.theme-toggle:hover { background: #e9edde; }
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111c18;
  --ink: #e1eadc;
  --muted: #a9b6a7;
  --line: #35483b;
  --white: #1b2a22;
  --green: #d4ed9e;
  --purple: #3b324a;
}
[data-theme="dark"] .genre-row,
[data-theme="dark"] .game-card,
[data-theme="dark"] .ranking-panel { background: var(--white); }
[data-theme="dark"] .brand-icon { background: #d4ed9e; color: #213d33; }
[data-theme="dark"] .button { background: #c7df9d; border-color: #c7df9d; color: #1c3025; }
[data-theme="dark"] .button:hover { background: #dcf0bc; }
[data-theme="dark"] .button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .button.secondary:hover,
[data-theme="dark"] .theme-toggle:hover { background: #2c3f32; }
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .hero h1 em,
[data-theme="dark"] .player-score,
[data-theme="dark"] .spark { color: #b2c88e; }
[data-theme="dark"] .hero-stamp { color: #b2c88e; border-color: var(--line); }
[data-theme="dark"] .pill,
[data-theme="dark"] .avatar { background: #2b3d2d; border-color: #40573c; color: #cfdfb8; }
[data-theme="dark"] .puzzle-pill { background: #3a3048; border-color: #564565; color: #d8c4ee; }
[data-theme="dark"] .player-rank { color: #b1bdae; }
[data-theme="dark"] .ranking-table td { border-color: var(--line); }
[data-theme="dark"] .notice { background: #332e1f; border-color: #574c2b; color: #e2d0a0; }
[data-theme="dark"] input { background: #1b2a22; border-color: #52634d; color: var(--ink); }
[data-theme="dark"] input::placeholder { color: #99a695; }
[data-theme="dark"] #login-status { color: #f0bb8f; }
[data-theme="dark"] #toast { background: #c7df9d; color: #1c3025; }
[data-theme="dark"] dialog::backdrop { background: #020805ad; }
[data-theme="dark"] .game-frame { background: #1b2a22; }
[data-theme="dark"] .idle-art { background: radial-gradient(ellipse at center, #405c35, #223626); }
[data-theme="dark"] .puzzle-art { background: radial-gradient(ellipse at center, #574569, #2c263a); }
[data-theme="dark"] .art-tag { color: #d1dfb9; }
[data-theme="dark"] .puzzle-art .art-tag { color: #ded0f1; }
/* The same theme also covers the first-party game iframe documents. */
[data-theme="dark"] body:has(.game-shell) { background: radial-gradient(ellipse at center, #293e29, #15251c); color: #e0ebd5; }
[data-theme="dark"] body.puzzle { background: radial-gradient(ellipse at center, #3a304b, #211c2d); color: #e6dcef; }
[data-theme="dark"] .subtitle,
[data-theme="dark"] .stat span { color: #b6c3a9; }
[data-theme="dark"] .puzzle .subtitle,
[data-theme="dark"] .puzzle .stat span { color: #c3b2d5; }
[data-theme="dark"] .primary { background: #c7df9d; color: #1c3025; }
[data-theme="dark"] .puzzle .primary { background: #d3b9ed; color: #312341; }
[data-theme="dark"] .secondary { background: #ffffff0c; border-color: #ffffff40; color: inherit; }
[data-theme="dark"] .tile { background: #5d4d6b; box-shadow: 0 3px 0 #17111e; color: #faf2de; }
[data-theme="dark"] .tile:hover { background: #766087; }
[data-theme="dark"] .tile:disabled { opacity: .75; }
@media (max-width: 700px) { .header-actions { gap: 7px; } .theme-toggle { width: 33px; height: 33px; font-size: 20px; } }
@media (max-width: 380px) { .site-header { padding: 0 12px; gap: 8px; } .site-header nav { gap: 10px; } .site-header .brand { font-size: 21px; gap: 6px; } .site-header .brand-icon { width: 25px; } }