:root {
  color-scheme: dark;
  --arcade-bg: #08102d;
  --arcade-panel: #111b48;
  --arcade-panel-raised: #18275c;
  --arcade-text: #f7fbff;
  --arcade-muted: #aebce4;
  --arcade-yellow: #ffcc5c;
  --arcade-blue: #8dd9ff;
  --arcade-green: #29d3a2;
  --arcade-red: #ff7589;
  --arcade-border: #ffffff22;
  --arcade-shadow: #02061770;
  --arcade-glow: #28469580;
  --arcade-on-accent: #17204c;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #08102d;
  --panel: #111b48;
  --panel-light: #18275c;
  --text: #f7fbff;
  --muted: #aebce4;
  --yellow: #ffcc5c;
  --blue: #8dd9ff;
  --green: #29d3a2;
  --border: #ffffff22;
}

html[data-theme="light"] {
  color-scheme: light;
  --navy: #e8f0f7;
  --panel: #ffffff;
  --panel-light: #d9e4ee;
  --text: #071a33;
  --muted: #354c66;
  --yellow: #965900;
  --blue: #005c91;
  --green: #006b52;
  --border: #17365c59;
  --arcade-bg: #e8f0f7;
  --arcade-panel: #ffffff;
  --arcade-panel-raised: #d9e4ee;
  --arcade-text: #071a33;
  --arcade-muted: #354c66;
  --arcade-yellow: #965900;
  --arcade-blue: #005c91;
  --arcade-green: #006b52;
  --arcade-red: #a72c44;
  --arcade-border: #17365c59;
  --arcade-shadow: #183b612e;
  --arcade-glow: #3b9bcd52;
  --arcade-on-accent: #ffffff;
}

html[data-theme="forest"] {
  color-scheme: dark;
  --navy: #061b1a;
  --panel: #0c302a;
  --panel-light: #15463b;
  --text: #f2fff8;
  --muted: #a7d4c4;
  --yellow: #ffd166;
  --blue: #76e6ce;
  --green: #44d492;
  --border: #b7ffe125;
  --arcade-bg: #061b1a;
  --arcade-panel: #0c302a;
  --arcade-panel-raised: #15463b;
  --arcade-text: #f2fff8;
  --arcade-muted: #a7d4c4;
  --arcade-yellow: #ffd166;
  --arcade-blue: #76e6ce;
  --arcade-green: #44d492;
  --arcade-red: #ff7589;
  --arcade-border: #b7ffe125;
  --arcade-shadow: #00110c99;
  --arcade-glow: #147e6a66;
  --arcade-on-accent: #06211b;
}

html[data-theme="ocean"] {
  color-scheme: dark;
  --navy: #031c2b;
  --panel: #08354a;
  --panel-light: #0e4b63;
  --text: #f4fcff;
  --muted: #b3d7e3;
  --yellow: #ffd166;
  --blue: #6dd8ff;
  --green: #47e0c2;
  --border: #9be8ff35;
  --arcade-bg: #031c2b;
  --arcade-panel: #08354a;
  --arcade-panel-raised: #0e4b63;
  --arcade-text: #f4fcff;
  --arcade-muted: #b3d7e3;
  --arcade-yellow: #ffd166;
  --arcade-blue: #6dd8ff;
  --arcade-green: #47e0c2;
  --arcade-red: #ff7f8f;
  --arcade-border: #9be8ff35;
  --arcade-shadow: #00111dcc;
  --arcade-glow: #087ea166;
  --arcade-on-accent: #06233a;
}

html[data-theme="galaxy"] {
  color-scheme: dark;
  --navy: #160b2f;
  --panel: #27184c;
  --panel-light: #3a2468;
  --text: #fff8ff;
  --muted: #d7c5ec;
  --yellow: #ffd166;
  --blue: #c5a3ff;
  --green: #6ef0c2;
  --border: #e0c6ff31;
  --arcade-bg: #160b2f;
  --arcade-panel: #27184c;
  --arcade-panel-raised: #3a2468;
  --arcade-text: #fff8ff;
  --arcade-muted: #d7c5ec;
  --arcade-yellow: #ffd166;
  --arcade-blue: #c5a3ff;
  --arcade-green: #6ef0c2;
  --arcade-red: #ff7fa6;
  --arcade-border: #e0c6ff31;
  --arcade-shadow: #090016b8;
  --arcade-glow: #7b45cc66;
  --arcade-on-accent: #1d1037;
}

html[data-theme="sunset"] {
  color-scheme: dark;
  --navy: #2a0d25;
  --panel: #4a1838;
  --panel-light: #68284d;
  --text: #fff8fb;
  --muted: #eac0d2;
  --yellow: #ffd06a;
  --blue: #93d7ff;
  --green: #74e0b7;
  --border: #ffc0d332;
  --arcade-bg: #2a0d25;
  --arcade-panel: #4a1838;
  --arcade-panel-raised: #68284d;
  --arcade-text: #fff8fb;
  --arcade-muted: #eac0d2;
  --arcade-yellow: #ffd06a;
  --arcade-blue: #93d7ff;
  --arcade-green: #74e0b7;
  --arcade-red: #ff7b70;
  --arcade-border: #ffc0d332;
  --arcade-shadow: #17000fb8;
  --arcade-glow: #ff6b6b5c;
  --arcade-on-accent: #3b1427;
}

html[data-theme="contrast"] {
  color-scheme: dark;
  --navy: #000000;
  --panel: #101010;
  --panel-light: #242424;
  --text: #ffffff;
  --muted: #dedede;
  --yellow: #ffe600;
  --blue: #52d9ff;
  --green: #5dff9f;
  --border: #ffffff70;
  --arcade-bg: #000000;
  --arcade-panel: #101010;
  --arcade-panel-raised: #242424;
  --arcade-text: #ffffff;
  --arcade-muted: #dedede;
  --arcade-yellow: #ffe600;
  --arcade-blue: #52d9ff;
  --arcade-green: #5dff9f;
  --arcade-red: #ff6176;
  --arcade-border: #ffffff70;
  --arcade-shadow: #000000;
  --arcade-glow: #52d9ff42;
  --arcade-on-accent: #000000;
}

html[data-theme] { background: var(--arcade-bg); }

html[data-theme] body {
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, var(--arcade-glow), transparent 32%),
    radial-gradient(circle at 92% 90%, color-mix(in srgb, var(--arcade-blue), transparent 78%), transparent 30%),
    var(--navy);
}

.theme-picker { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .7rem; font-weight: 900; }
.theme-picker select { min-height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--panel); font: inherit; cursor: pointer; }
.guest-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.guest-brand-row .guest-brand { margin: 0; }

html[data-theme] :is(.library-card, .board-panel, .auth-card, .today-badge, .settings-panel) {
  color: var(--text);
  border-color: var(--border);
  background: linear-gradient(155deg, var(--panel-light), var(--panel));
  box-shadow: 0 24px 60px var(--arcade-shadow);
}
html[data-theme] :is(.auth-form input, .settings-numbers input, .game-checkboxes label, .secondary-button, .homepage-install) {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel), var(--arcade-bg) 12%);
}
html[data-theme] :is(.portal-brand, .guest-brand, .portal-nav a:hover, .leader-name strong, .results-table td:first-child) { color: var(--text); }
html[data-theme] :is(.summary-strip, .results-table-wrap, .empty-state, .period-badge, .daily-board-progress, .adaptive-note, .board-title) {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel), var(--arcade-bg) 14%);
}
html[data-theme] :is(.summary-strip span, .game-card-footer, .results-table th, .audit-table td small, .board-title small, .leader-name small, .leader-score small, .today-badge-number, .task-state) { color: var(--muted); }
html[data-theme] :is(.category-button, .category-filter-toggle) { color: var(--muted); border-color: var(--border); background: color-mix(in srgb, var(--panel), var(--arcade-bg) 10%); }
html[data-theme] .category-button:hover,
html[data-theme] .category-button:focus-visible { color: var(--text); border-color: var(--blue); }
html[data-theme] .category-button.is-active { color: var(--arcade-on-accent); border-color: var(--yellow); background: var(--yellow); }
html[data-theme] .category-button.is-active span { color: currentColor; opacity: .75; }
html[data-theme] .age-chip { color: var(--muted); background: color-mix(in srgb, var(--panel-light), transparent 25%); }
html[data-theme] .category-chip { color: color-mix(in srgb, var(--game-colour), var(--text) 28%); background: color-mix(in srgb, var(--game-colour), transparent 86%); }
html[data-theme] .play-link { color: #10182c; }
html[data-theme] :is(.today-board-button, .primary-button) { color: var(--arcade-on-accent); background: var(--yellow); }

/* A single token bridge lets every independent game plugin follow every theme. */
html[data-theme] [data-game-slug] {
  --arcade-board: color-mix(in srgb, var(--arcade-bg), var(--arcade-panel) 35%);
  --arcade-cell: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-panel) 38%);
  --arcade-cell-soft: color-mix(in srgb, var(--arcade-panel-raised), transparent 42%);
  --bg: var(--arcade-bg);
  --raised: var(--arcade-panel-raised);
  --light: var(--arcade-panel-raised);
  --ink: var(--arcade-text);
  --paper: var(--arcade-panel);
  --cream: var(--arcade-panel);
  --purple: var(--arcade-blue);
  --violet: var(--arcade-blue);
  --sea: var(--arcade-blue);
  --teal: var(--arcade-green);
  --mint: var(--arcade-green);
  --gold: var(--arcade-yellow);
  --orange: var(--arcade-yellow);
  --aqua: var(--arcade-green);
  --lilac: var(--arcade-blue);
  --coral: var(--arcade-red);
  --red: var(--arcade-red);
  --panel2: var(--arcade-panel-raised);
  --cb-bg: var(--arcade-bg);
  --cb-panel: var(--arcade-panel);
  --cb-light: var(--arcade-panel-raised);
  --cb-text: var(--arcade-text);
  --cb-muted: var(--arcade-muted);
  --cb-yellow: var(--arcade-yellow);
  --cb-blue: var(--arcade-blue);
  --cb-green: var(--arcade-green);
  --cb-purple: var(--arcade-blue);
  --cb-red: var(--arcade-red);
  --cb-border: var(--arcade-border);
  --rr-bg: var(--arcade-bg);
  --rr-panel: var(--arcade-panel);
  --rr-light: var(--arcade-panel-raised);
  --rr-text: var(--arcade-text);
  --rr-muted: var(--arcade-muted);
  --rr-yellow: var(--arcade-yellow);
  --rr-blue: var(--arcade-blue);
  --rr-green: var(--arcade-green);
  --rr-purple: var(--arcade-blue);
  --rr-red: var(--arcade-red);
  --rr-border: var(--arcade-border);
  --ws-bg: var(--arcade-bg);
  --ws-panel: var(--arcade-panel);
  --ws-light: var(--arcade-panel-raised);
  --ws-text: var(--arcade-text);
  --ws-muted: var(--arcade-muted);
  --ws-yellow: var(--arcade-yellow);
  --ws-blue: var(--arcade-blue);
  --ws-green: var(--arcade-green);
  --ws-purple: var(--arcade-blue);
  --ws-red: var(--arcade-red);
  --ws-border: var(--arcade-border);
  --ll-bg: var(--arcade-bg);
  --ll-panel: var(--arcade-panel);
  --ll-panel-light: var(--arcade-panel-raised);
  --ll-text: var(--arcade-text);
  --ll-muted: var(--arcade-muted);
  --ll-yellow: var(--arcade-yellow);
  --ll-blue: var(--arcade-blue);
  --ll-green: var(--arcade-green);
  --ll-red: var(--arcade-red);
  --ll-border: var(--arcade-border);
  --orbit-bg: var(--arcade-bg);
  --orbit-panel: var(--arcade-panel);
  --orbit-panel-soft: var(--arcade-panel-raised);
  --orbit-text: var(--arcade-text);
  --orbit-muted: var(--arcade-muted);
  --orbit-yellow: var(--arcade-yellow);
  --orbit-blue: var(--arcade-blue);
  --orbit-cyan: var(--arcade-green);
  --orbit-border: var(--arcade-border);
  --ss-bg: var(--arcade-bg);
  --ss-card: var(--arcade-panel);
  --ss-ink: var(--arcade-text);
  --ss-muted: var(--arcade-muted);
  --ss-yellow: var(--arcade-yellow);
  --ss-blue: var(--arcade-blue);
  --ss-green: var(--arcade-green);
  --ss-orange: var(--arcade-red);
  --ss-border: var(--arcade-border);
  min-height: 100vh;
  color: var(--arcade-text) !important;
  background:
    radial-gradient(circle at 16% 5%, var(--arcade-glow), transparent 32%),
    linear-gradient(150deg, var(--arcade-panel), var(--arcade-bg)) !important;
}
html[data-theme] [data-game-slug] > :is(main, [class$="-shell"], .game-shell) {
  color: var(--arcade-text);
  background: transparent !important;
}

/* Theme the remaining legacy play surfaces without recolouring semantic game pieces. */
html[data-theme] #shape-fill-app :is(.shape-card, .shape-head, .controls),
html[data-theme] #seesaw-game-app :is(.game-card, .lesson-strip, .object-area, .feedback-row),
html[data-theme] #wordsearch-app :is(.grid-card, .grid-heading, .grid-message),
html[data-theme] #circuit-switch-app :is(.board-card, .board-head, .message),
html[data-theme] #codebreaker-app :is(.code-card, .code-rules, .palette-area, .message-row),
html[data-theme] #robot-route-app :is(.route-card, .program-card, .route-heading, .route-message),
html[data-theme] #pipeworks-app :is(.board-card, .board-head, .message),
html[data-theme] #tower-transfer-app :is(.tower-card, .tower-head, .controls),
html[data-theme] #laser-lab-app :is(.lab-card, .lab-head, .controls),
html[data-theme] #minefield-logic-app :is(.field-card, .field-head, .message),
html[data-theme] #logic-matrix-app :is(.clues, .matrix-board, .matrix-card, .checkbar) {
  color: var(--arcade-text) !important;
  border-color: var(--arcade-border) !important;
}

html[data-theme] #shape-fill-app :is(.shape-head, .controls),
html[data-theme] #seesaw-game-app :is(.lesson-strip, .object-area, .feedback-row),
html[data-theme] #wordsearch-app :is(.grid-heading, .grid-message),
html[data-theme] #circuit-switch-app :is(.board-head, .message),
html[data-theme] #codebreaker-app :is(.code-rules, .palette-area, .message-row),
html[data-theme] #robot-route-app :is(.route-heading, .route-message),
html[data-theme] #pipeworks-app :is(.board-head, .message),
html[data-theme] #tower-transfer-app :is(.tower-head, .controls),
html[data-theme] #laser-lab-app :is(.lab-head, .controls),
html[data-theme] #minefield-logic-app :is(.field-head, .message),
html[data-theme] #logic-matrix-app .checkbar {
  background: var(--arcade-panel) !important;
}

html[data-theme] #shape-fill-app .shape-stage {
  background: radial-gradient(circle at 72% 50%, var(--arcade-glow), transparent 38%), linear-gradient(var(--arcade-board), var(--arcade-panel)) !important;
}
html[data-theme] #shape-fill-app .tray { fill: var(--arcade-cell-soft); stroke: var(--arcade-border); }
html[data-theme] #shape-fill-app .silhouette rect { fill: var(--arcade-bg); }
html[data-theme] #shape-fill-app .hole-outline { stroke: color-mix(in srgb, var(--arcade-blue), var(--arcade-muted) 52%); }
html[data-theme] #shape-fill-app .target-grid-cell { stroke: color-mix(in srgb, var(--arcade-blue), transparent 58%); }
html[data-theme] #shape-fill-app .outcome { background: color-mix(in srgb, var(--arcade-bg), transparent 10%); }

html[data-theme] #seesaw-game-app .seesaw-stage {
  background: radial-gradient(circle at 50% 32%, var(--arcade-glow), transparent 38%), linear-gradient(180deg, var(--arcade-board) 0 70%, var(--arcade-panel-raised) 70%, var(--arcade-panel)) !important;
}
html[data-theme] #seesaw-game-app .seesaw-stage::before { background: radial-gradient(circle, color-mix(in srgb, var(--arcade-text), transparent 28%) 0 1px, transparent 1.5px); background-size: 74px 61px; }
html[data-theme] #seesaw-game-app .stage-cloud { background: color-mix(in srgb, var(--arcade-blue), transparent 88%); }
html[data-theme] #seesaw-game-app .balance-object { color: var(--arcade-text); border-color: var(--arcade-border); background: var(--arcade-panel-raised); box-shadow: 0 9px 18px var(--arcade-shadow), inset 0 1px color-mix(in srgb, var(--arcade-text), transparent 88%); }
html[data-theme] #seesaw-game-app :is(.fixed-object, .movable-object.is-selected) { background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 12%); }
html[data-theme] #seesaw-game-app .object-stack .movable-object.is-ghost { border-color: color-mix(in srgb, var(--arcade-blue), transparent 55%); background: color-mix(in srgb, var(--arcade-panel-raised), transparent 38%); }
html[data-theme] #seesaw-game-app .fulcrum { border-bottom-color: var(--arcade-panel-raised); filter: drop-shadow(0 12px 9px var(--arcade-shadow)); }
html[data-theme] #seesaw-game-app .fulcrum::after { background: linear-gradient(140deg, color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 22%), var(--arcade-panel)); }
html[data-theme] #seesaw-game-app .object-tray { border-color: color-mix(in srgb, var(--arcade-blue), transparent 62%); background: var(--arcade-board); }
html[data-theme] #seesaw-game-app .feedback-row.is-wrong { background: color-mix(in srgb, var(--arcade-red), transparent 91%) !important; }
html[data-theme] #seesaw-game-app .feedback-row.is-correct { background: color-mix(in srgb, var(--arcade-green), transparent 91%) !important; }

html[data-theme] #wordsearch-app .letter-grid { background: var(--arcade-board) !important; }
html[data-theme] #wordsearch-app .letter-cell { color: var(--arcade-text); border-color: var(--arcade-border); background: var(--arcade-cell-soft); }
html[data-theme] #wordsearch-app .letter-cell:hover,
html[data-theme] #wordsearch-app .letter-cell:focus-visible { border-color: var(--arcade-blue); background: color-mix(in srgb, var(--arcade-blue), transparent 84%); }
html[data-theme] #wordsearch-app .letter-cell.is-preview { color: var(--arcade-on-accent); border-color: var(--arcade-yellow); background: var(--arcade-yellow); }
html[data-theme] #wordsearch-app .letter-cell.is-found { color: var(--arcade-on-accent); border-color: var(--arcade-green); background: var(--arcade-green); }
html[data-theme] #wordsearch-app .word-list-card li.is-found { color: var(--arcade-green); }

html[data-theme] #circuit-switch-app .circuit-grid { background: var(--arcade-board) !important; }
html[data-theme] #circuit-switch-app .lamp { color: var(--arcade-muted); border-color: var(--arcade-border); background: var(--arcade-cell); box-shadow: inset 0 -7px color-mix(in srgb, var(--arcade-bg), transparent 52%); }
html[data-theme] #circuit-switch-app .lamp.is-on { color: var(--arcade-yellow); border-color: var(--arcade-yellow); background: color-mix(in srgb, var(--arcade-yellow), transparent 82%); box-shadow: 0 0 22px color-mix(in srgb, var(--arcade-yellow), transparent 55%), inset 0 0 18px color-mix(in srgb, var(--arcade-yellow), transparent 72%); }

html[data-theme] #codebreaker-app .board { background: var(--arcade-board) !important; }
html[data-theme] #codebreaker-app .guess-row.is-scored { background: var(--arcade-cell-soft); }
html[data-theme] #codebreaker-app .guess-row.is-current { border-color: color-mix(in srgb, var(--arcade-blue), transparent 55%); background: color-mix(in srgb, var(--arcade-blue), transparent 90%); }
html[data-theme] #codebreaker-app .code-slot { color: var(--arcade-muted); border-color: var(--arcade-border); background: var(--arcade-bg); }
html[data-theme] #codebreaker-app .code-slot.is-filled,
html[data-theme] #codebreaker-app .symbol-button { background: var(--arcade-panel-raised); }
html[data-theme] #codebreaker-app .code-rules span { color: var(--arcade-muted); background: var(--arcade-cell-soft); }
html[data-theme] #codebreaker-app .text-button { border-color: var(--arcade-border); background: var(--arcade-cell-soft); }
html[data-theme] #codebreaker-app .code-play:fullscreen :is(.code-rules, .palette-area, .message-row),
html[data-theme] #codebreaker-app .global-game-fullscreen-host:fullscreen .code-play :is(.code-rules, .palette-area, .message-row) { border-color: var(--arcade-border); background: color-mix(in srgb, var(--arcade-panel), transparent 8%) !important; }

html[data-theme] #robot-route-app .route-grid { background: var(--arcade-board) !important; }
html[data-theme] #robot-route-app .route-cell { color: var(--arcade-muted); border-color: var(--arcade-border); background: var(--arcade-cell-soft); }
html[data-theme] #robot-route-app .route-cell:nth-child(even) { background: color-mix(in srgb, var(--arcade-panel-raised), transparent 30%); }
html[data-theme] #robot-route-app .route-cell.is-obstacle { color: var(--arcade-muted); background: color-mix(in srgb, var(--arcade-muted), transparent 82%); text-shadow: none; }
html[data-theme] #robot-route-app .route-cell.is-goal { color: var(--arcade-yellow); background: color-mix(in srgb, var(--arcade-yellow), transparent 90%); }
html[data-theme] #robot-route-app .route-cell.is-gate { background: color-mix(in srgb, var(--arcade-red), transparent 91%); }
html[data-theme] #robot-route-app .route-cell.is-gate.is-open { background: color-mix(in srgb, var(--arcade-green), transparent 92%); }
html[data-theme] #robot-route-app .program-strip { border-color: color-mix(in srgb, var(--arcade-blue), transparent 65%); background: var(--arcade-board); }
html[data-theme] #robot-route-app :is(.program-token, .command-button) { color: var(--arcade-text); border-color: var(--arcade-border); background: var(--arcade-panel-raised); }
html[data-theme] #robot-route-app .remove-token { color: var(--arcade-text); border-color: var(--arcade-border); background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-red) 20%); }
html[data-theme] #robot-route-app .global-game-fullscreen-host:fullscreen .robot-play :is(.mission-bar, .program-card) { border-color: var(--arcade-border); background: color-mix(in srgb, var(--arcade-panel), transparent 8%) !important; }

html[data-theme] #pipeworks-app .pipe-grid { background: var(--arcade-board) !important; }
html[data-theme] #pipeworks-app .pipe { --pipe-colour: var(--arcade-muted); border-color: var(--arcade-border); background: var(--arcade-cell); }
html[data-theme] #pipeworks-app .pipe.source { --pipe-colour: var(--arcade-blue); border-color: var(--arcade-blue); }
html[data-theme] #pipeworks-app .pipe.target { --pipe-colour: var(--arcade-yellow); border-color: var(--arcade-yellow); }
html[data-theme] #pipeworks-app .pipe.is-flowing { background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 22%); }
@keyframes pipe-cell-fill { from { background: var(--arcade-cell); } to { background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 22%); } }
@keyframes pipe-water { from { background: var(--arcade-muted); box-shadow: none; } to { background: var(--arcade-blue); box-shadow: 0 0 12px var(--arcade-blue); } }

html[data-theme] #tower-transfer-app .tower-stage { background: linear-gradient(var(--arcade-board), var(--arcade-panel)) !important; }
html[data-theme] #tower-transfer-app .peg { color: var(--arcade-text); background: var(--arcade-cell-soft); }
html[data-theme] #tower-transfer-app .peg.target { border-color: color-mix(in srgb, var(--arcade-yellow), transparent 55%); background: color-mix(in srgb, var(--arcade-yellow), transparent 92%); }
html[data-theme] #tower-transfer-app .peg.selected { border-color: var(--arcade-blue); background: color-mix(in srgb, var(--arcade-blue), transparent 89%); }
html[data-theme] #tower-transfer-app .peg:is(.valid-destination, .drop-valid) { border-color: color-mix(in srgb, var(--arcade-green), transparent 52%); background: color-mix(in srgb, var(--arcade-green), transparent 92%); }
html[data-theme] #tower-transfer-app .peg.drag-over { border-color: var(--arcade-green); background: color-mix(in srgb, var(--arcade-green), transparent 84%); }
html[data-theme] #tower-transfer-app .post { background: color-mix(in srgb, var(--arcade-muted), var(--arcade-panel-raised) 45%); }
html[data-theme] #tower-transfer-app .peg::after { background: color-mix(in srgb, var(--arcade-muted), var(--arcade-panel-raised) 30%); }

html[data-theme] #laser-lab-app .laser-grid { background: var(--arcade-board) !important; }
html[data-theme] #laser-lab-app .lab-cell { color: var(--arcade-text); border-color: var(--arcade-border); background: var(--arcade-cell); }
html[data-theme] #laser-lab-app .lab-cell.beam { color: var(--arcade-yellow); background: color-mix(in srgb, var(--arcade-yellow), transparent 86%); }
html[data-theme] #laser-lab-app .lab-cell.start { color: var(--arcade-red); }
html[data-theme] #laser-lab-app .lab-cell.target { color: var(--arcade-blue); }
html[data-theme] #laser-lab-app .wall { background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-bg) 42%); }
html[data-theme] #laser-lab-app .wall-symbol { border-color: var(--arcade-muted); background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-muted) 18%); box-shadow: inset 0 0 10px var(--arcade-shadow); }
html[data-theme] #laser-lab-app .wall-symbol i { background: linear-gradient(90deg, var(--arcade-muted), var(--arcade-panel), var(--arcade-muted)); }

html[data-theme] #minefield-logic-app .mine-grid { background: var(--arcade-board) !important; }
html[data-theme] #minefield-logic-app .mine-cell { color: var(--arcade-text); border-color: var(--arcade-border); background: linear-gradient(145deg, var(--arcade-panel-raised), var(--arcade-panel)); box-shadow: inset 0 -5px color-mix(in srgb, var(--arcade-bg), transparent 55%); }
html[data-theme] #minefield-logic-app .mine-cell.revealed { border-color: var(--arcade-border); background: var(--arcade-bg); }
html[data-theme] #minefield-logic-app .mine-cell.exploded { color: var(--arcade-text); border-color: var(--arcade-red); background: color-mix(in srgb, var(--arcade-red), transparent 68%); box-shadow: inset 0 0 22px var(--arcade-red); }
html[data-theme] #minefield-logic-app .mine-cell.n1 { color: var(--arcade-blue); }
html[data-theme] #minefield-logic-app .mine-cell.n2 { color: var(--arcade-green); }
html[data-theme] #minefield-logic-app .mine-cell.n3 { color: var(--arcade-red); }
html[data-theme] #minefield-logic-app .mine-cell:is(.n4, .n5, .n6, .n7, .n8) { color: color-mix(in srgb, var(--arcade-blue), var(--arcade-red) 45%); }

html[data-theme] #logic-matrix-app :is(.mark, .blocked) { border-color: var(--arcade-border); color: var(--arcade-muted); background: var(--arcade-cell); }
html[data-theme] #logic-matrix-app .blocked { background: repeating-linear-gradient(135deg, var(--arcade-cell-soft) 0 4px, transparent 4px 8px); }
html[data-theme] #logic-matrix-app .mark.no { color: var(--arcade-red); background: color-mix(in srgb, var(--arcade-red), transparent 90%); }
html[data-theme] #logic-matrix-app .mark.yes { color: var(--arcade-on-accent); background: var(--arcade-green); }
html[data-theme] #logic-matrix-app :is(.grid-heading, .row-heading, .category-key, .clues li, .clues p, .case-intro) { color: var(--arcade-muted); }
html[data-theme] #logic-matrix-app .row-heading { color: var(--arcade-text); }
html[data-theme] #logic-matrix-app .story-modal { background: color-mix(in srgb, var(--arcade-bg), transparent 8%); }
html[data-theme] #logic-matrix-app .story-modal > div { color: var(--arcade-text); border-color: var(--arcade-border); background: radial-gradient(circle at top right, var(--arcade-glow), transparent 40%), var(--arcade-panel); box-shadow: 0 35px 90px var(--arcade-shadow); }

html[data-theme] #battleships-app .fleet-list button { color: var(--arcade-text); border-color: var(--arcade-border); background: var(--arcade-panel-raised); }
html[data-theme] #battleships-app .fleet-list button:hover,
html[data-theme] #battleships-app .fleet-list button:focus-visible { border-color: var(--arcade-blue); background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 12%); }
html[data-theme] #battleships-app .fleet-list button small,
html[data-theme] #battleships-app .placement-status { color: var(--arcade-muted); }
html[data-theme] #battleships-app .fleet-list button i { color: var(--arcade-yellow); }

html[data-theme] #sequence-sleuth-app :is(.sequence-token, .option, .sample span) { color: var(--arcade-text); border-color: var(--arcade-border); background: var(--arcade-panel-raised) !important; }
html[data-theme] #sequence-sleuth-app .sequence-token.missing { color: var(--arcade-yellow); border-color: var(--arcade-blue); background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 16%) !important; }
html[data-theme] #sequence-sleuth-app .option:hover:not(:disabled) { border-color: var(--arcade-blue); background: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-blue) 12%) !important; }
html[data-theme] #sequence-sleuth-app .option.selected { color: var(--arcade-text); border-color: var(--arcade-yellow); background: color-mix(in srgb, var(--arcade-panel), var(--arcade-yellow) 24%) !important; }
html[data-theme] #sequence-sleuth-app .option.correct { color: var(--arcade-text); border-color: var(--arcade-green); background: color-mix(in srgb, var(--arcade-panel), var(--arcade-green) 24%) !important; }
html[data-theme] #sequence-sleuth-app .reason-modal { background: color-mix(in srgb, var(--arcade-bg), transparent 8%); }
html[data-theme] #sequence-sleuth-app .reason-modal > div { color: var(--arcade-text); border-color: var(--arcade-border); background: linear-gradient(155deg, var(--arcade-panel-raised), var(--arcade-panel)); box-shadow: 0 30px 90px var(--arcade-shadow); }
html[data-theme] #sequence-sleuth-app :is(.reason-modal p, .reason-modal li, .token-caption) { color: var(--arcade-muted); }
html[data-theme] #sequence-sleuth-app .correct-token { border-color: var(--arcade-border); background: var(--arcade-cell-soft); }
html[data-theme] #fraction-ferry-app .controls .check { color: var(--arcade-on-accent) !important; border-color: var(--arcade-yellow) !important; background: var(--arcade-yellow) !important; }
html[data-theme] #fraction-ferry-app .outcome { color: var(--arcade-text); background: color-mix(in srgb, var(--arcade-bg), transparent 7%); }
html[data-theme] [data-game-slug] :is(p, small, em, .message, [class$="-message"]) { color: var(--arcade-muted); }
html[data-theme] [data-game-slug] :is(.eyebrow, .brand strong) { color: var(--arcade-blue); }
html[data-theme] [data-game-slug] :is(.bank, .stars) { color: var(--arcade-yellow); }
html[data-theme] [data-game-slug] :is(.brand, .brand b) { color: var(--arcade-text) !important; }
html[data-theme] [data-game-slug] :is(button[data-action="difficulty"], button[data-action="results"]) {
  color: var(--arcade-text) !important;
  border-color: var(--arcade-border) !important;
  background: var(--arcade-panel-raised) !important;
}

/* Number Quest uses design-system token names rather than the common game tokens. */
html[data-theme] #game-app {
  --background: var(--arcade-bg);
  --foreground: var(--arcade-text);
  --card: var(--arcade-panel);
  --card-foreground: var(--arcade-text);
  --popover: var(--arcade-panel);
  --popover-foreground: var(--arcade-text);
  --primary: var(--arcade-yellow);
  --primary-foreground: var(--arcade-on-accent);
  --secondary: var(--arcade-panel-raised);
  --secondary-foreground: var(--arcade-text);
  --muted: color-mix(in srgb, var(--arcade-panel-raised), var(--arcade-bg) 20%);
  --muted-foreground: var(--arcade-muted);
  --accent: color-mix(in srgb, var(--arcade-blue), var(--arcade-panel) 70%);
  --accent-foreground: var(--arcade-text);
  --destructive: var(--arcade-red);
  --border: var(--arcade-border);
  --input: var(--arcade-border);
  --ring: var(--arcade-blue);
  --chart-1: var(--arcade-yellow);
  --chart-2: var(--arcade-green);
  --chart-3: var(--arcade-blue);
  --chart-4: color-mix(in srgb, var(--arcade-blue), var(--arcade-red) 38%);
  --chart-5: var(--arcade-red);
}

/* Shared navigation, menus and outcome cards. Game boards retain meaningful terrain colours. */
html[data-theme] [data-game-slug] :is(
  .game-head, .battle-header, .domino-shell > header, .sequence-shell > header,
  .levels, .result, .battle-result, .domino-result, .sequence-result,
  .code-result, .robot-result, .meow-result, .flight-result, .crash-result,
  .home-card, .menu-card, .intro-card
) {
  color: var(--arcade-text) !important;
  border-color: var(--arcade-border) !important;
  background: linear-gradient(155deg, var(--arcade-panel-raised), var(--arcade-panel)) !important;
  box-shadow: 0 24px 70px var(--arcade-shadow);
}
html[data-theme] [data-game-slug] :is(.game-head, .battle-header, .domino-shell > header, .sequence-shell > header) {
  background: color-mix(in srgb, var(--arcade-panel), transparent 9%) !important;
  backdrop-filter: blur(12px);
}
html[data-theme] [data-game-slug] :is(
  .levels button, .level, .mission button, .actions button, .result-actions button,
  .placement-actions button, .controls button, .stats span, .result-grid span
) {
  color: var(--arcade-text);
  border-color: var(--arcade-border);
}
html[data-theme] [data-game-slug] :is(.levels button, .level, .result-grid span) { background: color-mix(in srgb, var(--arcade-panel-raised), transparent 18%) !important; }
html[data-theme] [data-game-slug] :is(.levels button:hover, .level:hover) { background: color-mix(in srgb, var(--arcade-blue), transparent 88%) !important; }
html[data-theme] [data-game-slug] :is(.levels small, .levels em, .result-grid span, .mission small) { color: var(--arcade-muted); }
html[data-theme] [data-game-slug] .result-grid b { color: var(--arcade-text); }

/* Plugin play chrome uses theme surfaces; gameplay pieces and terrain keep their semantic colours. */
html[data-theme] [data-game-slug] :is(
  .difficulty-panel, .gravity-panel, .route-panel, .game-card, .flight-card, .route-card,
  .program-card, .grid-card, .word-list-card, .board-card, .battle-card, .challenge-card,
  .calculation-card, .control-panel, .tower-panel, .shape-card, .field-card, .road-card,
  .race-card, .arena-card, .armour-panel, .lab-card, .puzzle-card, .pizza-card, .payment-card,
  .price-card, .till-card, .equation-card, .formula-card, .telemetry-card, .placement-card,
  .command-card, .engine-card, .match-card, .matrix-card, .matrix-board, .map-card, .maze-card,
  .code-card, .found-card, .selected-ball-card, .orbit-stage-card,
  .aa-studio, .gg-course, .tf-forge, .tb-yard
) {
  color: var(--arcade-text) !important;
  border-color: var(--arcade-border) !important;
  background: linear-gradient(155deg, var(--arcade-panel-raised), var(--arcade-panel)) !important;
  box-shadow: 0 24px 70px var(--arcade-shadow);
}
html[data-theme] [data-game-slug] :is(
  .mission, .mission-bar, .mission-strip, .flight-heading, .race-head, .battle-head, .arena-head,
  .board-head, .instrument-row, .touch-controls, .grid-heading, .route-heading, .message-row,
  .route-message, .checkbar, .lesson-strip, .toolbar, .control-bar, .status-bar
) {
  color: var(--arcade-text);
  border-color: var(--arcade-border) !important;
  background: color-mix(in srgb, var(--arcade-panel), transparent 5%) !important;
}
html[data-theme] [data-game-slug] :is(
  input, select, textarea, .sound-button, .home-button, .round-button,
  .secondary-button, .touch-controls button, .controls button, .placement-actions button
) {
  color: var(--arcade-text);
  border-color: var(--arcade-border) !important;
  background: color-mix(in srgb, var(--arcade-panel-raised), transparent 12%) !important;
}
html[data-theme] [data-game-slug] :is(.primary-button, .ui-button:not(.ghost):not(.outline), .thrust-button, .next-button, .play-again) {
  color: var(--arcade-on-accent) !important;
  border-color: var(--arcade-yellow) !important;
  background: var(--arcade-yellow) !important;
}
html[data-theme] [data-game-slug] :is(
  .home-copy > p, .difficulty-card p, .gravity-card p, .concept-row span, .flight-rules > span,
  .player-stats span, .pilot-stats span, .keyboard-guide, .grid-heading, .route-heading,
  .word-list-card li, .word-list-card > p, .search-stats
) { color: var(--arcade-muted); }
html[data-theme] [data-game-slug] :is(.difficulty-card, .gravity-card, .level-card) {
  color: var(--arcade-text);
  border-color: var(--arcade-border) !important;
  background: color-mix(in srgb, var(--arcade-panel-raised), transparent 10%) !important;
}
html[data-theme="light"] [data-game-slug] :is(.canvas-wrap, .letter-grid, .route-grid, .board-grid, .game-board) {
  border-color: var(--arcade-border) !important;
  box-shadow: inset 0 0 0 1px var(--arcade-border);
}

/* The four newest games use exactly the same menu geometry as one another. */
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .game-head {
  height: 68px;
  padding: 0 clamp(18px, 4vw, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--arcade-border);
}
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .brand {
  border: 0;
  color: var(--arcade-text);
  background: none;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: .07em;
}
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .bank { font-weight: 900; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .home {
  width: min(1120px, calc(100% - 32px));
  min-height: calc(100vh - 68px);
  margin: auto;
  padding: clamp(32px, 6vw, 72px) 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .home h1,
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result h1 {
  margin: 12px 0 20px;
  font-size: clamp(44px, 7vw, 78px);
  line-height: .98;
}
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .home p { max-width: 610px; color: var(--arcade-muted); font-size: 18px; line-height: 1.65; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .stats { display: flex; gap: 30px; margin-top: 28px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .stats span { display: flex; flex-direction: column; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .stats b { color: var(--arcade-yellow); font-size: 28px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels { padding: 24px; border: 1px solid var(--arcade-border); border-radius: 26px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels h2 { margin: 7px 0 16px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels button {
  width: 100%;
  min-height: 68px;
  padding: 11px 7px;
  border: 0;
  border-top: 1px solid var(--arcade-border);
  display: grid;
  grid-template-columns: 38px 1fr 20px;
  gap: 10px;
  align-items: center;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels button > i { color: var(--arcade-blue); font-style: normal; font-weight: 900; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels button > span { display: flex; flex-direction: column; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels small { margin-top: 2px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result {
  width: min(720px, calc(100% - 28px));
  min-height: calc(100vh - 68px);
  margin: auto;
  padding: 36px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 28px;
}
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result-stars { color: color-mix(in srgb, var(--arcade-text), transparent 80%); font-size: 44px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result-stars .earned { color: var(--arcade-yellow); }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result-grid span { padding: 16px; border: 1px solid var(--arcade-border); border-radius: 14px; }
:is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result-grid b { display: block; font-size: 26px; }

/* Older bespoke paper themes need an explicit contrast bridge. */
html[data-theme="light"] :is(#battleships-app, #dominoes-app, #sequence-sleuth-app) { --navy: var(--arcade-text); }
html[data-theme] #battleships-app { --sea: var(--arcade-blue); --aqua: var(--arcade-green); --cream: var(--arcade-panel); --orange: var(--arcade-yellow); }
html[data-theme] #dominoes-app { --green: var(--arcade-blue); --mint: var(--arcade-panel-raised); --paper: var(--arcade-panel); }
html[data-theme] #fraction-ferry-app { --navy: var(--arcade-text); --sea: var(--arcade-blue); --aqua: var(--arcade-blue); --mint: var(--arcade-green); --gold: var(--arcade-yellow); --orange: var(--arcade-red); }

html[data-theme] :is(.game-outcome-hold, .game-outcome-layer) { color: var(--arcade-text); background-color: color-mix(in srgb, var(--arcade-bg), transparent 8%); }
html[data-theme] .game-outcome-dialog { color: var(--arcade-text); border-color: var(--arcade-border); background: linear-gradient(155deg, var(--arcade-panel-raised), var(--arcade-panel)); }
html[data-theme] .game-outcome-dialog p { color: var(--arcade-muted); }
html[data-theme] .game-outcome-kicker { color: var(--arcade-blue); }
html[data-theme] .game-outcome-icon,
html[data-theme] .game-outcome-dialog button { color: var(--arcade-on-accent); background: var(--arcade-yellow); }
html[data-theme] .game-outcome-pending { color: var(--arcade-text); border-color: var(--arcade-border); background: color-mix(in srgb, var(--arcade-panel), transparent 7%); }
html[data-theme] .game-outcome-pending small { color: var(--arcade-muted); }
html[data-theme] :is(.global-game-controls button, .global-theme-control) { color: var(--arcade-text); border-color: var(--arcade-border); background: color-mix(in srgb, var(--arcade-panel), transparent 7%); }
html[data-theme] .global-theme-control option { color: var(--arcade-text); background: var(--arcade-panel); }
html[data-theme] .global-game-controls button:hover { border-color: var(--arcade-blue); background: var(--arcade-panel-raised); }
html[data-theme] :is(.global-game-fullscreen-surface:fullscreen, .global-game-fullscreen-host:fullscreen),
html[data-theme] .global-game-fullscreen-host:fullscreen .global-game-fullscreen-surface { background: var(--arcade-bg) !important; }
html[data-theme] [data-game-slug]:fullscreen .mission { background: color-mix(in srgb, var(--arcade-panel), transparent 7%) !important; }

[data-game-slug]:fullscreen,
[data-game-slug] .play:fullscreen,
[data-game-slug] [data-game-play-area]:fullscreen { color: var(--arcade-text); background: var(--arcade-bg) !important; }

@media (max-width: 760px) {
  :is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .home { grid-template-columns: 1fr; gap: 26px; padding-top: 28px; }
  :is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .levels { padding: 17px; }
  :is(#triangle-forge-app, #geometry-golf-app, #area-architect-app, #track-builder-app) .result-grid { grid-template-columns: 1fr; }
}