:root{
  --theme-surface-strong:#0d111d;
  --theme-surface-soft:#151a2c;
  --theme-surface-raised:#171d2d;
  --theme-border:#ffffff14;
  --theme-border-strong:#334158;
  --theme-shadow:0 20px 60px #0005;
  --theme-shadow-soft:0 10px 30px #0003;
  --theme-overlay:#02050bc9;
  --theme-focus:#67e8f9;
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface2:#eef2f8;
  --line:#d5ddea;
  --text:#171b26;
  --muted:#637087;
  --accent:#7456e8;
  --accent2:#087f9e;
  --ok:#087b59;
  --danger:#c93d58;
  --theme-surface-strong:#ffffff;
  --theme-surface-soft:#f0f3f8;
  --theme-surface-raised:#e8edf5;
  --theme-border:#dbe2ec;
  --theme-border-strong:#bdc8d8;
  --theme-shadow:0 20px 55px #25324a18;
  --theme-shadow-soft:0 10px 26px #25324a14;
  --theme-overlay:#17203375;
  --theme-focus:#0e7490;
}

html[data-theme="dark"]{color-scheme:dark}

/* Shared site chrome ------------------------------------------------------ */
.topbar nav{margin-left:auto}
.theme-toggle{
  min-width:42px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-left:12px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface2);
  color:var(--text);
  cursor:pointer;
  font:750 .76rem/1 system-ui,sans-serif;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:color-mix(in srgb,var(--surface2) 82%,var(--accent) 18%)}
.theme-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--theme-focus) 55%,transparent);outline-offset:2px}
.theme-toggle-icon{font-size:1rem;line-height:1}
.theme-toggle-label{white-space:nowrap}

html[data-theme="light"] body{
  background:
    radial-gradient(circle at 82% 0%,#e9e2ff 0,transparent 34rem),
    radial-gradient(circle at 10% 28%,#dff5fa 0,transparent 28rem),
    var(--bg);
}
html[data-theme="light"] .topbar{border-bottom-color:#dce3ed;background:#f7f9fce8;box-shadow:0 6px 24px #2836500c}
html[data-theme="light"] .brand-mark{box-shadow:0 8px 26px #7456e833}
html[data-theme="light"] .kicker,
html[data-theme="light"] .category,
html[data-theme="light"] .eyebrow{color:#6847d3}
html[data-theme="light"] .hero h1 em{background:linear-gradient(90deg,#6948d8,#087f9e);background-clip:text;color:transparent}
html[data-theme="light"] .button,
html[data-theme="light"] .tool-button{background:#fff;border-color:#d4dce8;color:#202634;box-shadow:0 2px 8px #25324a0c}
html[data-theme="light"] .button.primary{background:linear-gradient(135deg,#7557e9,#5f46cf);border-color:transparent;color:#fff}
html[data-theme="light"] .button:hover,
html[data-theme="light"] .tool-button:hover{border-color:#9ba8ba;background:#f8f9fc}
html[data-theme="light"] .hero-orbit{border-color:#cfd8e6;background:radial-gradient(circle,#7557e915,transparent 63%)}
html[data-theme="light"] .hero-orbit span{background:#fff;border-color:#d8e0eb;box-shadow:0 18px 42px #25324a1c}
html[data-theme="light"] .game-card{background:linear-gradient(145deg,#ffffff,#f3f6fa);border-color:#dce3ed;box-shadow:0 6px 20px #25324a0b}
html[data-theme="light"] .game-card:hover{border-color:#7456e84c;background:#fff;box-shadow:0 10px 28px #25324a14}
html[data-theme="light"] .game-index{color:#7a8598}
html[data-theme="light"] .game-state{color:#087b59;border-color:#0b8f6538;background:#e9f8f2}
html[data-theme="light"] .about{background:linear-gradient(135deg,#f0ecff,#edf9fb);border-color:#d9e1ec;box-shadow:var(--theme-shadow-soft)}
html[data-theme="light"] .search{background:#fff;border-color:#d5ddea;box-shadow:0 5px 20px #25324a0d}
html[data-theme="light"] .pill{background:#fff;border-color:#d6deea;color:#657087}
html[data-theme="light"] footer{border-top-color:#dce3ed}

/* Generic game host ------------------------------------------------------ */
html[data-theme="light"] .play-card,
html[data-theme="light"] .rules-card{background:linear-gradient(145deg,#fff,#f3f6fa);border-color:#dce3ed;box-shadow:var(--theme-shadow-soft)}
html[data-theme="light"] .play-toolbar{border-bottom-color:#dce3ed}
html[data-theme="light"] .engine-warning{background:#fff0f2;color:#a92f47;border-bottom-color:#f0bdc7}
html[data-theme="light"] .game-status{border-top-color:#dce3ed}
html[data-theme="light"] .local-note{border-top-color:#dce3ed;color:#758096}
html[data-theme="light"] .cell{border-color:#c9d3e2;background:#fff;color:#1b2230}
html[data-theme="light"] .cell:hover{border-color:#7456e8}
html[data-theme="light"] .cell.revealed{background:#e9eef5}
html[data-theme="light"] .cell.queen{background:#ddd6fe;color:#312e81}
html[data-theme="light"] .morris-board{border-color:#9aa8bc;background:linear-gradient(135deg,#f8fafc,#e7edf5)}
html[data-theme="light"] .morris-line{border-color:#8b98aa}
html[data-theme="light"] .morris-point{background:#dfe5ee;border-color:#66758b}
html[data-theme="light"] .morris-point.p1{background:#fff}
html[data-theme="light"] .edge-h,
html[data-theme="light"] .edge-v{background:#d5ddea}
html[data-theme="light"] .dot{background:#334155}

/* Reusable game shell ---------------------------------------------------- */
html[data-theme="light"] .game-shell-heading>.eyebrow{color:#67758a}
html[data-theme="light"] .game-shell-heading>.eyebrow:hover{color:#1f2937}
html[data-theme="light"] .game-hero-panel{
  border-color:color-mix(in srgb,var(--game-accent) 24%,#d7dfeb);
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--game-accent) 12%,transparent),transparent 28rem),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--game-accent-2) 10%,transparent),transparent 24rem),
    linear-gradient(145deg,#ffffff,#f3f6fa 76%);
  box-shadow:var(--theme-shadow),inset 0 1px #fff;
}
html[data-theme="light"] .game-symbol{border-color:color-mix(in srgb,var(--game-accent) 34%,#c9d3e2);background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 13%,#fff),color-mix(in srgb,var(--game-accent-2) 8%,#f7f9fc));color:#202634;box-shadow:0 14px 28px #25324a16,inset 0 1px #fff}
html[data-theme="light"] .game-badge{border-color:#d4dce8;background:#f5f7fb;color:#5f6d82}
html[data-theme="light"] .game-hero-copy>p{color:#647188}
html[data-theme="light"] .game-hero-panel>.pill{background:#fff}
html[data-theme="light"] .game-quick-facts span{border-color:#d6deea;background:#fff;color:#5d6a7f}
html[data-theme="light"] .game-play-card{border-color:color-mix(in srgb,var(--game-accent) 18%,#d9e1ec);background:linear-gradient(160deg,#fff,#f4f7fa 74%);box-shadow:var(--theme-shadow)}
html[data-theme="light"] .game-play-header{border-bottom-color:#dce3ed;background:#fbfcfe}
html[data-theme="light"] .play-session #engine-label{color:#748096}
html[data-theme="light"] .game-controlbar{border-bottom-color:#dce3ed;background:#f3f6fa}
html[data-theme="light"] .game-control-group-label,
html[data-theme="light"] .game-control-label{color:#68768b}
html[data-theme="light"] .game-select,
html[data-theme="light"] .game-action,
html[data-theme="light"] .game-segmented-option{border-color:#c6d0df;background:#fff;color:#202735}
html[data-theme="light"] .game-select{color-scheme:light}
html[data-theme="light"] .game-action:hover:not(:disabled),
html[data-theme="light"] .game-segmented-option:hover:not(:disabled){background:#f0f4f9;border-color:#98a8bd}
html[data-theme="light"] .game-action--primary{border-color:color-mix(in srgb,var(--game-accent) 42%,#b9c5d5);background:linear-gradient(135deg,color-mix(in srgb,var(--game-accent) 72%,#fff),color-mix(in srgb,var(--game-accent-2) 48%,#fff));color:#fff}
html[data-theme="light"] .game-action--danger{border-color:#e7a5b1;background:#fff0f2;color:#a62c44}
html[data-theme="light"] .game-action--toggle.is-active{border-color:color-mix(in srgb,var(--game-accent-2) 50%,#b7c3d3);background:color-mix(in srgb,var(--game-accent-2) 11%,#fff);color:#075d73}
html[data-theme="light"] .game-segmented{border-color:#c9d3e0;background:#edf1f6}
html[data-theme="light"] .game-segmented-option{background:transparent;color:#66758a}
html[data-theme="light"] .game-segmented-option.is-active{background:#fff;border-color:#bbc7d7;color:#1f2937;box-shadow:0 2px 8px #25324a12}
html[data-theme="light"] .game-board-tool{border-color:#c8d3e1;background:#fff;color:#273142;box-shadow:0 3px 10px #25324a0d}
html[data-theme="light"] .game-board-tool:hover:not(:disabled){background:#f1f5f9;border-color:#94a5ba}
html[data-theme="light"] .game-board-tool-icon{color:#26374a}
html[data-theme="light"] .game-board-tool-label{color:#66768b}
html[data-theme="light"] .game-board-tool--toggle.is-active{border-color:color-mix(in srgb,var(--game-accent-2) 52%,#b8c4d4);background:color-mix(in srgb,var(--game-accent-2) 10%,#fff)}
html[data-theme="light"] .game-board-tool--toggle.is-active .game-board-tool-icon,
html[data-theme="light"] .game-board-tool--toggle.is-active .game-board-tool-label{color:#075d73}
html[data-theme="light"] .game-board-tool--primary{border-color:color-mix(in srgb,var(--game-accent) 38%,#b7c4d5);background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 12%,#fff),color-mix(in srgb,var(--game-accent-2) 8%,#fff))}
html[data-theme="light"] .game-status-wrap{border-top-color:#dce3ed;background:#f8fafc}
html[data-theme="light"] .status-hint{color:#768399}
html[data-theme="light"] .game-guide-card{border-color:#dbe2ec;background:linear-gradient(155deg,#fff,#f3f6fa);box-shadow:var(--theme-shadow-soft)}
html[data-theme="light"] .game-guide-card ol li{color:#5f6d82}
html[data-theme="light"] .game-guide-card ol li::before{border-color:color-mix(in srgb,var(--game-accent-2) 28%,#d0d8e5);background:#fff;color:#18566a}
html[data-theme="light"] .game-tips{border-color:#dce3ed;background:#f6f8fb}
html[data-theme="light"] .game-tips li{color:#68768b}
html[data-theme="light"] .related-game-card{border-color:#dce3ed;background:linear-gradient(145deg,#fff,#f3f6fa);box-shadow:0 5px 18px #25324a0b}
html[data-theme="light"] .related-game-card .category{color:#6e7b90}
html[data-theme="light"] .related-game-card p{color:#66748a}
html[data-theme="light"] .game-onboarding{border-color:color-mix(in srgb,var(--game-accent-2) 28%,#d6deea);background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--game-accent) 11%,transparent),transparent 19rem),radial-gradient(circle at 100% 0,color-mix(in srgb,var(--game-accent-2) 9%,transparent),transparent 20rem),#fff;color:#1d2431;box-shadow:0 40px 110px #25324a38}
html[data-theme="light"] .game-onboarding::backdrop{background:var(--theme-overlay);backdrop-filter:blur(9px)}
html[data-theme="light"] .onboarding-close{border-color:#d1dae7;background:#f5f7fb;color:#59677c}
html[data-theme="light"] .onboarding-brand{border-bottom-color:#dce3ed;color:#6e7b90}
html[data-theme="light"] .onboarding-brand span{color:#075d73}
html[data-theme="light"] .onboarding-brand strong{color:#202735}
html[data-theme="light"] .onboarding-intro>p:last-child{color:#66758a}
html[data-theme="light"] .onboarding-progress span{background:#dbe2ec}

/* Stats, blog and articles ---------------------------------------------- */
html[data-theme="light"] .metric-card{border-color:#dce3ed;background:linear-gradient(145deg,#fff,#f3f6fa);box-shadow:var(--theme-shadow-soft)}
html[data-theme="light"] .activity-row{border-color:#dce3ed;background:#fff;box-shadow:0 4px 16px #25324a0b}
html[data-theme="light"] .activity-row:hover{border-color:#7456e84d}
html[data-theme="light"] .empty-state{border-color:#c7d1df;background:#fafbfd}
html[data-theme="light"] .featured-post{border-color:#d7e0eb;background:radial-gradient(circle at 85% 30%,#a5eef22d,transparent 28rem),linear-gradient(135deg,#f1edff,#edf9fb);box-shadow:var(--theme-shadow-soft)}
html[data-theme="light"] .post-art{box-shadow:0 30px 70px #25324a24;color:#fff}
html[data-theme="light"] .post-card{border-color:#dce3ed;background:#fff;box-shadow:0 5px 18px #25324a0c}
html[data-theme="light"] .post-card span{color:#6748d1}
html[data-theme="light"] .article-head{border-bottom-color:#dce3ed}
html[data-theme="light"] .article-meta{color:#728096}
html[data-theme="light"] .article-body p{color:#46536a}
html[data-theme="light"] .article-callout{border-color:#7456e844;background:#7456e80a}

/* Game-specific boards -------------------------------------------------- */
html[data-theme="light"] .sudoku-board{border-color:#8c9bb0;background:#8c9bb0;box-shadow:0 22px 45px #25324a22,0 0 0 1px #fff}
html[data-theme="light"] .sudoku-cell{border-color:#cbd5e1;background:#fff;color:#243044}
html[data-theme="light"] .sudoku-cell.box-tone-b{background:#f3f6fa}
html[data-theme="light"] .sudoku-cell.box-edge-right{border-right-color:#8c9bb0}
html[data-theme="light"] .sudoku-cell.box-edge-bottom{border-bottom-color:#8c9bb0}
html[data-theme="light"] .sudoku-cell:hover{background:#e8f1fb;border-color:#8da9c7}
html[data-theme="light"] .sudoku-cell.revealed{background:#e9eef5;color:#172033}
html[data-theme="light"] .sudoku-cell.revealed.box-tone-b{background:#e2e8f0}
html[data-theme="light"] .sudoku-cell.user-value{color:#1769c2;text-shadow:none}
html[data-theme="light"] .sudoku-cell.peer{background:#e7f3f7}
html[data-theme="light"] .sudoku-cell.box-tone-b.peer{background:#dfeef3}
html[data-theme="light"] .sudoku-cell.revealed.peer{background:#d9e9f1}
html[data-theme="light"] .sudoku-cell.user-value.peer{background:#e2f1f8}
html[data-theme="light"] .sudoku-cell.same-value{background:#cfeaf4;color:#075d73;box-shadow:inset 0 0 0 2px #0891b244}
html[data-theme="light"] .sudoku-cell.revealed.same-value{background:#c5e2ec;color:#164e63}
html[data-theme="light"] .sudoku-stat{border-color:#d0dae7;background:#fff}
html[data-theme="light"] .sudoku-stat-label{color:#6c7a8e}
html[data-theme="light"] .sudoku-stat-value{color:#273346}
html[data-theme="light"] .sudoku-stat--mode.is-active{border-color:#3b82f6;background:#eaf2ff}
html[data-theme="light"] .sudoku-stat--mode.is-active .sudoku-stat-value{color:#1d4ed8}
html[data-theme="light"] .sudoku-input-dock{border-color:#d0dae7;background:linear-gradient(155deg,#fff,#f2f5f9);box-shadow:0 16px 34px #25324a16,inset 0 1px #fff}
html[data-theme="light"] .sudoku-input-heading strong{color:#2b3648}
html[data-theme="light"] .sudoku-input-heading span{color:#718096}
html[data-theme="light"] .sudoku-number{border-color:#c4d0df;background:#fff;color:#273448}
html[data-theme="light"] .sudoku-number:hover:not(:disabled){background:#eaf2f8;border-color:#87a6bd}
html[data-theme="light"] .sudoku-number.complete{background:#edf1f5;color:#7b8798}
html[data-theme="light"] .sudoku-input-dock .game-board-tool{background:#fff}

html[data-theme="light"] .nonogram-col-clues>div,
html[data-theme="light"] .nonogram-row-clues>div{color:#6847d3}
html[data-theme="light"] .nonogram-board{border-color:#8f9db0;background:#8f9db0}
html[data-theme="light"] .nonogram-cell{background:#fff}
html[data-theme="light"] .nonogram-cell.filled{background:#243044}
html[data-theme="light"] .norinori-board{background:#9aa8bb;border-color:#8190a4}
html[data-theme="light"] .norinori-cell{border-color:#b7c2d0;background:#fff}
html[data-theme="light"] .norinori-cell:hover{background:#eef2f7}
html[data-theme="light"] .colors-stats span,
html[data-theme="light"] .mathcrossword-info span,
html[data-theme="light"] .waypoint-info span,
html[data-theme="light"] .kakuro-info span{border-color:#d0dae7;background:#fff;color:#425067}
html[data-theme="light"] .colors-board{border-color:#a8b5c7;background:#d8e0eb;box-shadow:0 16px 34px #25324a17}
html[data-theme="light"] .mathcrossword-board{background:#a8b3c2;border-color:#8b98aa;box-shadow:0 16px 34px #25324a17}
html[data-theme="light"] .mathcrossword-number.fixed{background:#e6ebf2;color:#172033}
html[data-theme="light"] .mathcrossword-operator{background:#f2f5f8;color:#6847d3}
html[data-theme="light"] .mathcrossword-block{background:#cbd5e1}
html[data-theme="light"] .waypoint-board{background:#a8b3c2;border-color:#8b98aa;box-shadow:0 16px 34px #25324a17}
html[data-theme="light"] .waypoint-cell{border-color:#c1ccda;background:#fff;color:#1f3b61}
html[data-theme="light"] .waypoint-cell:hover{background:#edf4fb}
html[data-theme="light"] .waypoint-cell.path{background:#d9e9f8}
html[data-theme="light"] .lits-board{background:#9aa6b6;border-color:#8593a6;box-shadow:0 16px 34px #25324a17}
html[data-theme="light"] .lits-cell{border-color:#b7c2d0;background:#fff}
html[data-theme="light"] .lits-cell:hover{background:#eef2f7}

@media(max-width:850px){
  .theme-toggle-label{display:none}
  .theme-toggle{width:38px;min-width:38px;padding:0;margin-left:8px}
}

@media(max-width:520px){
  .topbar nav{gap:12px}
  .theme-toggle{height:34px;width:34px;min-width:34px}
}

@media(prefers-reduced-motion:reduce){
  .theme-toggle{transition:none}
}