/* Games page chrome in light. The hub, headers, leaderboards, toasts, and
   controls outside the play area follow nw-theme. The play area (canvas,
   D-pad, HUD, in-game overlays, word boards) stays the dark neon stage.
   In-game light is a separate opt-in: html[data-game-light="1"], set only
   when that page's GAME_LIGHT flag is true (js/game-palette.js). Default off.
   Dark mode is untouched: every rule here is under html[data-theme="light"]. */

/* Stage. A light page meets a dark board. The rim and shadow mark that edge
   on purpose. Omitted once a game opts into in-game light. */
html[data-theme="light"]:not([data-game-light]) .game-shell,
html[data-theme="light"]:not([data-game-light]) .gs-shell,
html[data-theme="light"]:not([data-game-light]) .fb-shell {
  border-color: rgba(57, 255, 20, 0.55);
  box-shadow: 0 16px 36px rgba(13, 31, 14, 0.18), 0 0 0 1px rgba(13, 31, 14, 0.08);
}

html[data-theme="light"]:not([data-game-light]) .dd-board,
html[data-theme="light"]:not([data-game-light]) .cc-board,
html[data-theme="light"]:not([data-game-light]) .cx-terminal,
html[data-theme="light"]:not([data-game-light]) .dd-kb,
html[data-theme="light"]:not([data-game-light]) .cc-pad {
  box-sizing: border-box;
  padding: 0.55rem;
  background: #050805;
  border: 1px solid rgba(57, 255, 20, 0.45);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(13, 31, 14, 0.16);
}

html[data-theme="light"]:not([data-game-light]) .gs-pad {
  background: #050805;
}

html[data-theme="light"]:not([data-game-light]) .gs-pad__btn {
  background: #0d1f0e;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"]:not([data-game-light]) .game-shell,
  html[data-theme="light"]:not([data-game-light]) .gs-shell,
  html[data-theme="light"]:not([data-game-light]) .fb-shell,
  html[data-theme="light"]:not([data-game-light]) .dd-board,
  html[data-theme="light"]:not([data-game-light]) .cc-board,
  html[data-theme="light"]:not([data-game-light]) .cx-terminal,
  html[data-theme="light"]:not([data-game-light]) .dd-kb,
  html[data-theme="light"]:not([data-game-light]) .cc-pad {
    box-shadow: none;
  }
}

/* Keep play-area ink on the dark stage. Light theme variables would otherwise
   turn headings and muted copy dark on the still-dark overlay and tiles. */
html[data-theme="light"]:not([data-game-light]) .game-overlay h2,
html[data-theme="light"]:not([data-game-light]) .gs-shell .game-overlay h2,
html[data-theme="light"]:not([data-game-light]) .fb-shell .game-overlay h2 {
  color: #39ff14;
}

html[data-theme="light"]:not([data-game-light]) .game-overlay .muted,
html[data-theme="light"]:not([data-game-light]) .gs-shell .game-overlay .muted,
html[data-theme="light"]:not([data-game-light]) .fb-shell .game-overlay .muted {
  color: #6a9a6a;
}

html[data-theme="light"]:not([data-game-light]) .game-overlay a,
html[data-theme="light"]:not([data-game-light]) .gs-shell .game-overlay a,
html[data-theme="light"]:not([data-game-light]) .fb-shell .game-overlay a {
  color: #7cff6b;
}

html[data-theme="light"]:not([data-game-light]) .dd-tile:not(.is-correct):not(.is-present):not(.is-absent),
html[data-theme="light"]:not([data-game-light]) .cc-tile:not(.is-correct):not(.is-present):not(.is-absent) {
  color: #ffffff;
}

/* Hub cards, including Coming Soon. */
html[data-theme="light"] .game-card {
  border-color: #1b5e20;
  background: linear-gradient(105deg, rgba(15, 92, 18, 0.08), transparent 55%), linear-gradient(180deg, #ffffff, #f4f7f4);
  box-shadow: none;
}

html[data-theme="light"] .game-card::before {
  background: none;
}

html[data-theme="light"] .game-card--live:hover,
html[data-theme="light"] .game-card--live:focus-within {
  border-color: #0f5c12;
  box-shadow: 0 0 0 1px #0f5c12;
}

html[data-theme="light"] .game-card--soon {
  opacity: 1;
  border-color: #5f7a64;
}

html[data-theme="light"] .game-card__glyph {
  color: rgba(15, 92, 18, 0.16);
}

html[data-theme="light"] .game-card__glyph span {
  color: rgba(13, 31, 14, 0.28);
}

html[data-theme="light"] .game-card__tag {
  color: #0f5c12;
}

html[data-theme="light"] .game-card__desc,
html[data-theme="light"] .cc-howto {
  color: #24362b;
}

html[data-theme="light"] .game-card__soon {
  border-color: #5f7a64;
  color: #1c4a22;
}

html[data-theme="light"] .games-tabs {
  border-color: #1b5e20;
}

html[data-theme="light"] .games-tab {
  color: #24362b;
}

html[data-theme="light"] .games-tab.is-active {
  background: #0f5c12;
  color: #ffffff;
}

html[data-theme="light"] .fb-board-tabs [data-fb-board="hard"].is-active {
  background: #ff5f8f;
  color: #0a0a0a;
}

html[data-theme="light"] .leaderboard-row {
  border-bottom-color: rgba(27, 94, 32, 0.2);
}

html[data-theme="light"] .leaderboard-row:nth-child(-n + 3) .leaderboard-rank {
  color: #0f5c12;
  text-shadow: none;
}

html[data-theme="light"] .leaderboard-rank {
  color: #24362b;
}

html[data-theme="light"] .leaderboard-row.is-me {
  background: rgba(15, 92, 18, 0.08);
}

html[data-theme="light"] .game-howto li::before,
html[data-theme="light"] .game-howto .signal,
html[data-theme="light"] [data-games-page="firewall-breach"] .game-howto li::before {
  color: #0f5c12;
}

html[data-theme="light"] .game-howto .noise {
  color: #9b1c1c;
}

html[data-theme="light"] .game-teaser {
  background: #ffffff;
  border-color: #1b5e20;
  color: #14241a;
}

html[data-theme="light"] .game-teaser a,
html[data-theme="light"] .game-teaser a:hover,
html[data-theme="light"] .game-teaser a:focus {
  color: #0f5c12;
}

html[data-theme="light"] .game-teaser .teaser-tag {
  color: #0f5c12;
}

/* Difficulty chips sit above the shell, outside the play area. */
html[data-theme="light"] .gs-mode__btn:not(.is-active):not([aria-pressed="true"]) {
  color: #083d10;
  background: #ffffff;
  border-color: #1b5e20;
}

html[data-theme="light"] .gs-pause-tip,
html[data-theme="light"] .gs-pause-tip strong {
  color: #0c3d12;
  text-shadow: none;
}

html[data-theme="light"] .gs-pause-tip {
  background: #ffffff;
  border-color: #1b5e20;
}

html[data-theme="light"] .dd-result-line,
html[data-theme="light"] .cc-result-line {
  color: #14241a;
}

html[data-theme="light"] .dd-share-preview,
html[data-theme="light"] .cc-summary {
  background: #ffffff;
  border-color: #1b5e20;
  color: #14241a;
}

html[data-theme="light"] .dd-dist-label {
  color: #24362b;
}

html[data-theme="light"] .dd-dist-bar {
  background: #d5ddd8;
  color: #14241a;
}

html[data-theme="light"] .dd-dist-bar.is-today {
  background: #0f5c12;
  color: #ffffff;
}

html[data-theme="light"] .dd-hints {
  background: #ffffff;
  border-color: #1b5e20;
  color: #14241a;
}

html[data-theme="light"] .dd-hints__label {
  color: #1c4a22;
}

html[data-theme="light"] .dd-hints__summary {
  color: #0f5c12;
}

html[data-theme="light"] .dd-hints__body,
html[data-theme="light"] .dd-hints__reveal {
  border-color: rgba(27, 94, 32, 0.25);
}

html[data-theme="light"] .toast {
  background: #ffffff;
  color: #0d1f0e;
  border-color: #1b5e20;
  box-shadow: none;
}