/* ==========================================================================
   Light mode grayscale rebuild
   --------------------------------------------------------------------------
   Goal:
   - Board surfaces in neutral gray for high white/black stone readability.
   - All UI surfaces in gray shades (no beige / color-tinted light mode).
   ========================================================================== */

:root[data-theme="light"] {
  --lm-bg: #d8d9db;
  --lm-surface: #e3e4e5;
  --lm-surface-soft: #dde0e3;
  --lm-stage: #d2d6da;
  --lm-board: #c7cbd0;
  --lm-board-deep: #bcc2c9;
  --lm-rim: #b2b9c2;
  --lm-rim-strong: #9ca5b0;
  --lm-ink: #20262d;
  --lm-ink-dim: #58616c;

  color-scheme: light;

  /* Remap shared theme variables used across hub + games */
  --bg: var(--lm-bg);
  --panel: var(--lm-surface);
  --surface: var(--lm-surface);
  --surface-2: var(--lm-surface-soft);
  --rim: var(--lm-rim);
  --rim-hi: var(--lm-rim-strong);
  --chalk: var(--lm-ink);
  --chalk-dim: var(--lm-ink-dim);
  --muted: var(--lm-ink-dim);
  --stone: #636d79;
  --gold: #6f7885;
  --gold-hi: #8a94a0;
  --gold-dim: #68717d;
  --good: #6a737f;
  --warn: #767f8a;
  --bad: #5d6671;
  --signal-hi: #6e7783;

  --hub-bg: var(--lm-bg);
  --hub-surface: var(--lm-surface);
  --hub-surface-2: var(--lm-surface-soft);
  --hub-rim: var(--lm-rim);
  --hub-rim-hi: var(--lm-rim-strong);
  --hub-chalk: var(--lm-ink);
  --hub-chalk-dim: var(--lm-ink-dim);
  --hub-stone: #656e79;
  --hub-gold: #6f7885;
  --hub-gold-dim: #68717d;
  --hub-good: #6a737f;
  --hub-warn: #767f8a;
}

/* Global backgrounds */
:root[data-theme="light"] body {
  background: var(--lm-bg) !important;
  color: var(--lm-ink) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]),
:root[data-theme="light"] body[data-screen="game"],
:root[data-theme="light"] body[data-game="gomoku"][data-screen="game"] {
  background: var(--lm-bg) !important;
  color: var(--lm-ink) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) {
  --hub-bg: var(--lm-bg);
  --hub-surface: var(--lm-surface);
  --hub-surface-2: var(--lm-surface-soft);
  --hub-rim: var(--lm-rim);
  --hub-rim-hi: var(--lm-rim-strong);
  --hub-chalk: var(--lm-ink);
  --hub-chalk-dim: var(--lm-ink-dim);
  --hub-stone: #656e79;
  --hub-gold: #4aa3ff;
  --hub-gold-dim: rgba(74, 163, 255, 0.62);
  --hub-good: #7a8591;
  --hub-warn: #7a8591;
}

/* Top bars */
:root[data-theme="light"] .shell-head,
:root[data-theme="light"] .arena-topbar,
:root[data-theme="light"] .arena-shell-head {
  background: var(--lm-surface) !important;
  border-color: var(--lm-rim) !important;
}

:root[data-theme="light"] .brand-logo {
  background: var(--lm-surface-soft) !important;
  border-color: var(--lm-rim) !important;
}

:root[data-theme="light"] .brand-logo::after {
  border-color: #76808c !important;
}

/* Main panels / cards / lobby surfaces */
:root[data-theme="light"] .screen-panel,
:root[data-theme="light"] .menu-card,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .hero-rules.prose,
:root[data-theme="light"] .lobby-stage,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .panel.side,
:root[data-theme="light"] .arena-player,
:root[data-theme="light"] .card,
:root[data-theme="light"] .stats-strip,
:root[data-theme="light"] .stats-pill,
:root[data-theme="light"] .hub-game-preview,
:root[data-theme="light"] .online-mobile-controls-panel {
  background: var(--lm-surface) !important;
  border-color: var(--lm-rim) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .menu-card,
:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .menu-card.hero,
:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .hero {
  background: var(--lm-surface) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .hero-rules.prose {
  background: var(--lm-surface-soft) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .hero .hub-games-block,
:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .hero .hero-rules.prose,
:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .menu-grid > .menu-card.hero .hub-games-block,
:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .menu-grid > .menu-card.hero .hero-rules.prose {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .menu-grid > .menu-card:last-child,
:root[data-theme="light"] .game-preview-board-wrap::before {
  background: transparent !important;
}

:root[data-theme="light"] .shell-head-tools,
:root[data-theme="light"] .shell-head-extra,
:root[data-theme="light"] .online-mobile-controls-head {
  border-color: var(--lm-rim) !important;
}

/* Buttons / pills / tags -> grayscale */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .tag,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .mode-btn,
:root[data-theme="light"] .hub-game-card {
  background: #e4e7ea !important;
  border-color: var(--lm-rim) !important;
  color: #2a3138 !important;
}

:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .mode-btn:hover:not(:disabled),
:root[data-theme="light"] .shell-head .btn:hover {
  background: #e8ebee !important;
  border-color: var(--lm-rim-strong) !important;
}

:root[data-theme="light"] .btn.good,
:root[data-theme="light"] .btn.bad,
:root[data-theme="light"] .badge.good,
:root[data-theme="light"] .badge.warn,
:root[data-theme="light"] .badge.bad {
  background: #dde1e5 !important;
  border-color: #a5adb7 !important;
  color: #2d353d !important;
}

/* Keep online state semantics readable in light mode. */
:root[data-theme="light"] .online-game-tags .btn.good {
  border-color: rgba(66, 154, 106, 0.36) !important;
  background: rgba(66, 154, 106, 0.14) !important;
  color: #2f6a4a !important;
}

:root[data-theme="light"] .lobby-meta .badge.online-server-state.good {
  border-color: rgba(66, 154, 106, 0.42) !important;
  background: rgba(66, 154, 106, 0.16) !important;
  color: #2f6a4a !important;
}

:root[data-theme="light"] .online-create-actions #online-create-public {
  border-color: rgba(63, 124, 224, 0.56) !important;
  background: rgba(63, 124, 224, 0.18) !important;
  color: #1f4f83 !important;
}

:root[data-theme="light"] .online-create-actions #online-create-public:hover:not(:disabled) {
  border-color: rgba(63, 124, 224, 0.72) !important;
  background: rgba(63, 124, 224, 0.24) !important;
  color: #1a4270 !important;
}

:root[data-theme="light"] .hub-game-card {
  position: relative;
}

:root[data-theme="light"] .hub-game-card.active {
  border-color: #4aa3ff !important;
  background: #e2ecf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(74, 163, 255, 0.42),
    0 0 0 2px rgba(74, 163, 255, 0.16) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .mode-btn-online-wrap {
  border-top-color: rgba(137, 150, 166, 0.5) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .mode-btn.mode-btn-online {
  background: linear-gradient(180deg, rgba(74, 163, 255, 0.18), rgba(74, 163, 255, 0.08)) !important;
  border-color: rgba(74, 163, 255, 0.48) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 163, 255, 0.2) !important;
}

:root[data-theme="light"] body:is([data-screen="menu"], [data-screen="online-home"], [data-screen="online-lobby"]) .mode-btn.mode-btn-online:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(74, 163, 255, 0.24), rgba(74, 163, 255, 0.11)) !important;
  border-color: rgba(74, 163, 255, 0.62) !important;
}

/* Stage containers */
:root[data-theme="light"] .arena-stage,
:root[data-theme="light"] .gomoku-stage {
  background: var(--lm-stage) !important;
  border-color: var(--lm-rim) !important;
}

/* Board surfaces: explicitly darker than page/panels */
:root[data-theme="light"] .board-wrap,
:root[data-theme="light"] .board-stage .board-wrap,
:root[data-theme="light"] .arena-board-zone .board-wrap,
:root[data-theme="light"] body[data-game="gomoku"][data-screen="game"] .gomoku-center .board-wrap.board-span,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-board-wrap,
:root[data-theme="light"] .game-preview-board-wrap {
  background: var(--lm-board) !important;
  border-color: var(--lm-rim-strong) !important;
}

/* Board lines and neutral cells */
:root[data-theme="light"] .line,
:root[data-theme="light"] .game-preview-line,
:root[data-theme="light"] body[data-game="gomoku"][data-screen="game"] .line,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-line {
  stroke: #727b87 !important;
}

:root[data-theme="light"] .node[data-empty="true"] .dot,
:root[data-theme="light"] body[data-game="gomoku"][data-screen="game"] .node[data-empty="true"] .dot {
  fill: var(--lm-board-deep) !important;
  stroke: #7e8793 !important;
}

/* Neutral highlights (no color tint) */
:root[data-theme="light"] .node[data-legal="true"] .dot,
:root[data-theme="light"] .node[data-cap="true"] .dot,
:root[data-theme="light"] .node[data-placed="true"] .dot,
:root[data-theme="light"] .node[data-win="true"] .dot {
  filter: drop-shadow(0 0 6px rgba(110, 119, 130, 0.55)) !important;
}

:root[data-theme="light"] .node[data-inmill="true"] .ring,
:root[data-theme="light"] .winline {
  stroke: #75808c !important;
  filter: drop-shadow(0 0 5px rgba(109, 118, 129, 0.45)) !important;
}

:root[data-theme="light"] .onturn,
:root[data-theme="light"] .ap-turn-dot,
:root[data-theme="light"] .ap-phase.pp {
  color: #616b77 !important;
  background: rgba(123, 132, 143, 0.12) !important;
  border-color: rgba(106, 116, 126, 0.42) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .ap-turn-dot {
  box-shadow: 0 0 8px rgba(107, 116, 126, 0.7) !important;
}

/* Hnefatafl special zones + king accent converted to grayscale */
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-board-bg {
  fill: rgba(198, 203, 209, 0.9) !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] {
  --surface: var(--lm-surface);
  --surface-2: var(--lm-surface-soft);
  --rim: var(--lm-rim);
  --rim-hi: var(--lm-rim-strong);
  --gold: #6f7885;
  --gold-hi: #8a94a0;
  --gold-dim: #68717d;
  --chalk: var(--lm-ink);
  --chalk-dim: var(--lm-ink-dim);
  --stone: #636d79;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .arena-stage,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .arena-center,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .arena-player {
  background: var(--lm-surface) !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-board-wrap {
  background: var(--lm-board) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-special-zone,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-throne,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-corner {
  fill: rgba(180, 46, 64, 0.14) !important;
  stroke: rgba(180, 46, 64, 0.52) !important;
  filter: drop-shadow(0 0 7px rgba(178, 42, 62, 0.18)) !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-throne {
  fill: rgba(180, 46, 64, 0.18) !important;
  stroke: rgba(180, 46, 64, 0.58) !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-corner {
  fill: rgba(180, 46, 64, 0.12) !important;
  stroke: rgba(180, 46, 64, 0.46) !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-node-legal-ring,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-select-ring,
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-last-ring {
  stroke: #7a848f !important;
  filter: drop-shadow(0 0 6px rgba(108, 117, 127, 0.38)) !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .tafl-piece.king {
  fill: #8f1d28 !important;
  stroke: #4b1017 !important;
}

:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .a-pip-k {
  background: #8f1d28 !important;
  border-color: #4b1017 !important;
}

/* Preview board and helper tones */
:root[data-theme="light"] .game-preview-badge,
:root[data-theme="light"] .game-preview-caption,
:root[data-theme="light"] .hub-section-title,
:root[data-theme="light"] .small,
:root[data-theme="light"] .sub {
  color: var(--lm-ink-dim) !important;
}

/* Preview board accents in grayscale */
:root[data-theme="light"] .game-preview-line.is-mill,
:root[data-theme="light"] .game-preview-gk-win-line.is-win {
  stroke: rgba(118, 128, 140, 0.98) !important;
  filter: drop-shadow(0 0 4px rgba(108, 118, 130, 0.5)) !important;
}

:root[data-theme="light"] .game-preview-gk-grid-line,
:root[data-theme="light"] .game-preview-tafl-grid-line {
  stroke: rgba(112, 122, 133, 0.45) !important;
}

:root[data-theme="light"] .game-preview-gk-star {
  fill: rgba(162, 170, 180, 0.48) !important;
}

:root[data-theme="light"] .game-preview-node-outer,
:root[data-theme="light"] .game-preview-root.is-gomoku .game-preview-node-outer {
  fill: rgba(93, 103, 114, 0.9) !important;
  stroke: rgba(124, 134, 145, 0.5) !important;
}

:root[data-theme="light"] .game-preview-node-inner,
:root[data-theme="light"] .game-preview-root.is-gomoku .game-preview-node-inner {
  fill: rgba(198, 204, 212, 0.46) !important;
}

:root[data-theme="light"] .game-preview-node-wrap.is-mill .game-preview-node-outer,
:root[data-theme="light"] .game-preview-node-wrap.is-win .game-preview-node-outer,
:root[data-theme="light"] .game-preview-node-wrap.is-active .game-preview-node-outer,
:root[data-theme="light"] .game-preview-node-wrap.is-capture .game-preview-node-outer {
  fill: rgba(126, 136, 147, 0.3) !important;
  stroke: rgba(107, 117, 128, 0.9) !important;
}

:root[data-theme="light"] .game-preview-node-wrap.is-mill .game-preview-node-inner,
:root[data-theme="light"] .game-preview-node-wrap.is-win .game-preview-node-inner,
:root[data-theme="light"] .game-preview-node-wrap.is-active .game-preview-node-inner,
:root[data-theme="light"] .game-preview-node-wrap.is-capture .game-preview-node-inner {
  fill: rgba(191, 198, 207, 0.92) !important;
}

:root[data-theme="light"] .game-preview-root.is-hnefatafl .game-preview-tafl-special,
:root[data-theme="light"] .game-preview-root.is-hnefatafl .game-preview-tafl-special.corner,
:root[data-theme="light"] .game-preview-root.is-hnefatafl .game-preview-tafl-special.throne {
  fill: rgba(180, 46, 64, 0.16) !important;
  stroke: rgba(180, 46, 64, 0.74) !important;
}

:root[data-theme="light"] .game-preview-root.is-moulin .game-preview-piece.is-white {
  background: #f2e7d7 !important;
  border-color: #ccb99c !important;
}

:root[data-theme="light"] .game-preview-root.is-moulin .game-preview-piece.is-black {
  background: #202329 !important;
  border-color: #09090a !important;
}

:root[data-theme="light"] .game-preview-root.is-gomoku .game-preview-piece.is-white {
  background: #f0ece4 !important;
  border-color: #c8c4bc !important;
}

:root[data-theme="light"] .game-preview-root.is-gomoku .game-preview-piece.is-black {
  background: #1a1820 !important;
  border-color: #0a0912 !important;
}

:root[data-theme="light"] .game-preview-root.is-hnefatafl .game-preview-piece.is-white {
  background: #f2e8d8 !important;
  border-color: #b9ab92 !important;
}

:root[data-theme="light"] .game-preview-root.is-hnefatafl .game-preview-piece.is-black {
  background: #252b33 !important;
  border-color: #121820 !important;
}

:root[data-theme="light"] .game-preview-root.is-hnefatafl .game-preview-piece.is-king {
  background: #8f1d28 !important;
  border-color: #4b1017 !important;
}

:root[data-theme="light"] .game-preview-piece.is-mill,
:root[data-theme="light"] .game-preview-piece.is-win,
:root[data-theme="light"] .game-preview-piece.is-captured {
  box-shadow:
    0 0 0 2px rgba(121, 131, 143, 0.22),
    0 0 14px rgba(107, 117, 128, 0.36),
    0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="light"] .game-preview-piece.is-captured::after {
  border-color: rgba(107, 117, 128, 0.9) !important;
}

/* hard rule: no gradients in light mode */
:root[data-theme="light"] body,
:root[data-theme="light"] body *,
:root[data-theme="light"] body *::before,
:root[data-theme="light"] body *::after {
  background-image: none !important;
}

/* Keep real stone illustrations on in-game side panels (white/black pions). */
:root[data-theme="light"] body[data-screen="game"] .stone.white,
:root[data-theme="light"] body[data-screen="game"] .ap-jewel-w,
:root[data-theme="light"] body[data-screen="game"] .a-pip-w {
  background-color: #f2e7d7 !important;
  background-image: radial-gradient(circle at 34% 30%, #fff8ee 0%, #f2e7d7 48%, #dfcfb6 100%) !important;
  border-color: #ccb99c !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.44) !important;
}

:root[data-theme="light"] body[data-screen="game"] .stone.black,
:root[data-theme="light"] body[data-screen="game"] .ap-jewel-b,
:root[data-theme="light"] body[data-screen="game"] .a-pip-b {
  background-color: #202329 !important;
  background-image: radial-gradient(circle at 34% 30%, #3d3d44 0%, #1c1c21 50%, #09090b 100%) !important;
  border-color: #09090a !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Hnefatafl defenders icon: split white/red token (diagonal) in side panels. */
:root[data-theme="light"] body[data-game="hnefatafl"][data-screen="game"] .ap-jewel-w.ap-jewel-defenders {
  border: 2px solid #ab8d82 !important;
  background-color: #f2e8d8 !important;
  background-image: linear-gradient(135deg, #fff8ee 0%, #fff8ee 48%, #b1323f 52%, #8f1d28 100%) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Turn indicator dot: same light-blue accent as active hub game cards. */
:root[data-theme="light"] body[data-screen="game"] .ap-turn-dot,
:root[data-theme="light"] body[data-screen="game"] .ap-turn-dot-w,
:root[data-theme="light"] body[data-screen="game"] .ap-turn-dot-b {
  color: #4aa3ff !important;
  background: #4aa3ff !important;
  background-image: none !important;
  border-color: rgba(74, 163, 255, 0.92) !important;
  box-shadow: 0 0 10px rgba(74, 163, 255, 0.65) !important;
}

/* Online light mode: improve readability for section labels/titles. */
:root[data-theme="light"] body:is([data-screen="online-home"], [data-screen="online-lobby"]) .menu-card h2,
:root[data-theme="light"] body:is([data-screen="online-home"], [data-screen="online-lobby"]) .online-mobile-controls-head h3 {
  color: var(--lm-ink) !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] body:is([data-screen="online-home"], [data-screen="online-lobby"]) .field > label,
:root[data-theme="light"] body:is([data-screen="online-home"], [data-screen="online-lobby"]) .online-clock-picker-kicker {
  color: #2a3139 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

:root[data-theme="light"] body:is([data-screen="online-home"], [data-screen="online-lobby"]) .online-clock-picker-value {
  color: #20262d !important;
  font-weight: 600 !important;
}