/**
 * Game pages (body.dk-game-page): playfield readability only.
 * Toolbar/modal/chrome use inline styles in header.php (unchanged look).
 * When site theme is dark, keep #game canvas/SVG on a light playfield.
 */

/* ----- Playfield: always light (readable game text) ----- */
body.dk-game-page #game_container,
body.dk-game-page #game {
  color-scheme: only light;
  background: #ffffff;
  color: #14213d;
}

body.dk-game-page #game canvas,
body.dk-game-page #game #stage,
body.dk-game-page #game #canvasStage {
  color-scheme: only light;
}

body.dk-game-page #game iframe {
  color-scheme: only light;
  background: #ffffff;
}

/* SVG labels using currentColor inherit dark page text — reset on light playfields only */
body.dk-game-page #game:not(.dk-game-dark-playfield) #stage text:not([fill]),
body.dk-game-page #game:not(.dk-game-dark-playfield) #stage text[fill="currentColor"],
body.dk-game-page #game:not(.dk-game-dark-playfield) svg text:not([fill]),
body.dk-game-page #game:not(.dk-game-dark-playfield) svg text[fill="currentColor"] {
  fill: #14213d;
}

/* Space / night games: dark in-SVG playfield, light labels */
body.dk-game-page #game_container.dk-game-dark-playfield,
body.dk-game-page #game.dk-game-dark-playfield {
  background: #050814;
  color: #ffffff;
}

body.dk-game-page #game.dk-game-dark-playfield canvas,
body.dk-game-page #game.dk-game-dark-playfield #stage,
body.dk-game-page #game.dk-game-dark-playfield #canvasStage {
  background: transparent;
  color: #ffffff;
}

body.dk-game-page #game.dk-game-dark-playfield #stage text:not([fill]),
body.dk-game-page #game.dk-game-dark-playfield svg text:not([fill]) {
  fill: #ffffff;
}

html[data-dk-theme="dark"] body.dk-game-page #game_container:not(.dk-game-dark-playfield),
html[data-dk-theme="dark"] body.dk-game-page #game:not(.dk-game-dark-playfield),
html[data-dk-theme="dark"] body.dk-game-page #game:not(.dk-game-dark-playfield) canvas,
html[data-dk-theme="dark"] body.dk-game-page #game:not(.dk-game-dark-playfield) #stage {
  color-scheme: only light;
  background: #ffffff;
  color: #14213d;
}

@media (prefers-color-scheme: dark) {
  html[data-dk-theme="system"] body.dk-game-page #game_container:not(.dk-game-dark-playfield),
  html[data-dk-theme="system"] body.dk-game-page #game:not(.dk-game-dark-playfield),
  html[data-dk-theme="system"] body.dk-game-page #game:not(.dk-game-dark-playfield) canvas,
  html[data-dk-theme="system"] body.dk-game-page #game:not(.dk-game-dark-playfield) #stage {
    color-scheme: only light;
    background: #ffffff;
    color: #14213d;
  }
}

/* Line art colorizer: let #lac-root theme show; keep drawing canvas white for color accuracy */
html[data-dk-theme="dark"] body.dk-game-page #game_container:has(#lac-root),
html[data-dk-theme="dark"] body.dk-game-page #game.lac-game {
  background: transparent !important;
  color: var(--dk-ink, #f5f2ff) !important;
  color-scheme: dark;
}

html[data-dk-theme="dark"] body.dk-game-page #game.lac-game canvas.coloring-canvas,
html[data-dk-theme="dark"] body.dk-game-page #game.lac-game #canvasStage {
  color-scheme: light !important;
  background: #ffffff !important;
  color: #14213d !important;
}

@media (prefers-color-scheme: dark) {
  html[data-dk-theme="system"] body.dk-game-page #game_container:has(#lac-root),
  html[data-dk-theme="system"] body.dk-game-page #game.lac-game {
    background: transparent !important;
    color: var(--dk-ink, #f5f2ff) !important;
    color-scheme: dark;
  }

  html[data-dk-theme="system"] body.dk-game-page #game.lac-game canvas.coloring-canvas,
  html[data-dk-theme="system"] body.dk-game-page #game.lac-game #canvasStage {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #14213d !important;
  }
}

@media (prefers-color-scheme: light) {
  html[data-dk-theme="system"] body.dk-game-page #game_container:has(#lac-root),
  html[data-dk-theme="system"] body.dk-game-page #game.lac-game {
    background: transparent !important;
    color: var(--dk-ink, #14213d) !important;
    color-scheme: light;
  }

  html[data-dk-theme="system"] body.dk-game-page #game.lac-game canvas.coloring-canvas,
  html[data-dk-theme="system"] body.dk-game-page #game.lac-game #canvasStage {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #14213d !important;
  }
}

/* Writing Lab: light tracing playfield; chrome follows site theme via CSS vars */
html[data-dk-theme="dark"] body.dk-game-page #game_container:has(#wl-root),
html[data-dk-theme="dark"] body.dk-game-page #game_container.dk-wl-playfield,
html[data-dk-theme="dark"] body.dk-game-page #game.wl-game,
html[data-dk-theme="dark"] body.dk-game-page #game.dk-wl-game {
  background: transparent !important;
  color-scheme: light;
}

html[data-dk-theme="dark"] body.dk-game-page #game #wl-root .wl-stage-wrap {
  color-scheme: light !important;
  background: #ffffff !important;
}

html[data-dk-theme="dark"] body.dk-game-page #game #wl-root .wl-canvas {
  color-scheme: light !important;
  background: transparent !important;
}

@media (prefers-color-scheme: dark) {
  html[data-dk-theme="system"] body.dk-game-page #game_container:has(#wl-root),
  html[data-dk-theme="system"] body.dk-game-page #game_container.dk-wl-playfield,
  html[data-dk-theme="system"] body.dk-game-page #game.wl-game,
  html[data-dk-theme="system"] body.dk-game-page #game.dk-wl-game {
    background: transparent !important;
    color-scheme: light;
  }

  html[data-dk-theme="system"] body.dk-game-page #game #wl-root .wl-stage-wrap {
    color-scheme: light !important;
    background: #ffffff !important;
  }

  html[data-dk-theme="system"] body.dk-game-page #game #wl-root .wl-canvas {
    color-scheme: light !important;
    background: transparent !important;
  }
}

@media (prefers-color-scheme: light) {
  html[data-dk-theme="system"] body.dk-game-page #game_container:has(#wl-root),
  html[data-dk-theme="system"] body.dk-game-page #game_container.dk-wl-playfield {
    background: transparent !important;
    color-scheme: light;
  }
}

/*
 * Themed game chrome (disabled — caused empty nav bar + background shift):
 *
body.dk-game-page {
  color: var(--dk-ink);
  background: var(--dk-page-bg);
}
body.dk-game-page #top_navigation.dk-top-nav-minimal { ... }
body.dk-game-page .dk-game-toolbar-row { ... }
body.dk-game-page .dk-theme-switch { ... }
body.dk-game-page .game-toolbar { ... }
body.dk-game-page .game-toolbar-btn { ... }
body.dk-game-page .game-modal-overlay { ... }
*/