/* Shared game chrome. Keep the playing surface, geometry, input targets and
   semantic puzzle/player colours under each game's control. Capture harnesses
   use the same .game-box boundary as the live shell. */
.game-box {
  --bg:#171717;
  --panel:#1c1c1c;
  --panel-2:#272727;
  --line:#41403c;
  --text:#f3eee7;
  --muted:#b8b2aa;
  --accent:#e9a36b;
  --accent-2:#c8b29e;
  color:var(--text);
  background:#1c1c1c;
  color-scheme:dark;
}

/* Shared .btn elements are action controls, never game-specific cell classes.
   Do not add dimensions here: legacy modules size their own touch controls. */
.game-box .btn {
  background:#30302e;
  color:#f3eee7;
  border-color:#4b4945;
  box-shadow:none;
  text-shadow:none;
}
.game-box .btn.primary {
  background:#e8d7c4;
  border-color:#e8d7c4;
  color:#28211b;
  box-shadow:none;
}
.game-box .btn:hover { border-color:#e9a36b; }
.game-box .btn.primary:hover { background:#f2e4d3; }
.game-box .btn:focus-visible { outline-color:#f0ba86; }

/* These suffixes name setup/chrome containers, not boards, cells or cards.
   !important is deliberate: modules inject their own stylesheet after this one. */
.game-box div:is([class$="-panel"],[class$="-setup"],[class$="-curtain"]) {
  background:#1c1c1c!important;
  border-color:#41403c!important;
  box-shadow:none!important;
  color:#f3eee7!important;
}
.game-box div[class$="-curtain"] { background:#252422!important; }
.game-box :is([class$="-kicker"],[class$="-lock"]) { color:#e9ba91!important; }

/* Newer modules predate the shared token palette. Only explicitly named chrome
   is restyled; colour-choice tiles, pieces, traps and canvas pixels are untouched. */
.game-box :is(.bd-score,.cd-score,.cc-score,.td-score,.ls-player,.tt-player,
  .bd-strategy,.cd-strategy,.cd-notebook,.ls-tip,.tt-tip,
  .cd-secrets,.bd-reveal>div,.cd-history li,.cd-note-grid>div,
  .nh-hud,.od-hud,.od-pad,.od-coach,.od-stat,.od-log,.tt-last,.tt-level-note,.ls-last,.ls-level-note,
  .dd-hud,.dd-tools,.du-hud,.du-coach,.du-stat,.du-heat,.pd-player,.pd-tip,.pd-selection,.pd-last-turn,.pd-level-note) {
  background:#272727!important;
  border-color:#48453f!important;
  color:#f3eee7!important;
  box-shadow:none!important;
}
.game-box :is(.bd-options,.cd-options,.cc-options,.td-options,.ls-options,.tt-options,.nh-row,.od-row,.od-buttons,.nh-controls,.tt-actions,.ls-pushes,
  .dd-row,.du-row,.pd-options,.pd-tools,.rr-bar,.rr-controls) button {
  background:#30302e!important;
  border-color:#4b4945!important;
  color:#eee8df!important;
}
.game-box :is(.bd-options,.cd-options,.cc-options,.td-options,.ls-options,.tt-options,.pd-options) button[aria-pressed="true"],
.game-box :is(.nh-row,.od-row,.dd-row,.du-row) button.on {
  background:#e8d7c4!important;
  border-color:#e8d7c4!important;
  color:#28211b!important;
}
.game-box :is(.bd-primary,.cd-primary,.cc-start,.td-start,.ls-start,.tt-start,.nh-start,.od-start,.dd-start,.dd-fire,.du-start,.pd-start,.pd-place) {
  background:#e8d7c4!important;
  border-color:#e8d7c4!important;
  color:#28211b!important;
  box-shadow:none!important;
}
.game-box :is(.bd-panel,.cd-panel,.cc-panel,.td-panel,.ls-panel,.tt-panel) > p:not([role="status"]),
.game-box :is(.bd-note,.cd-note,.cd-legend,.ls-help,.td-score span,.cc-score span,.bd-score span,.cd-score span) {
  color:#bfb8af!important;
}
.game-box :is(.bd-strategy,.cd-notebook,.cd-strategy) { border-left-color:#bb8b61!important; }
.game-box :is(.bd-score,.cd-score,.td-score,.cc-score,.ls-player,.tt-player).active {
  border-color:#e9a36b!important;
}
.game-box :is(.bd-prize,.bd-prizes span,.cd-slot) {
  background:#302c27!important;
  border-color:#64513e!important;
  color:#f3dfc5!important;
}
.game-box :is(.bd-prize strong,.bd-reveal strong,.cd-notebook strong,.cd-feedback strong) { color:#f1c797!important; }
.game-box .bd-card {
  background:#33312e!important;
  border-color:#6b6258!important;
  color:#f6eee3!important;
}
.game-box .bd-card.selected { background:#59432f!important; border-color:#edbb86!important; }
.game-box .bd-card small { color:#cbbfad!important; }
.game-box :is(.cd-digits,.cd-edit) button {
  background:#30302e!important;
  color:#f3eee7!important;
  border-color:#57524a!important;
}
.game-box :is(.bd-progress i,.cd-track) { background:#44403a!important; }
.game-box :is(.bd-progress i.done,.cd-track i) { background:#b89d80!important; }
.game-box .bd-progress i.current { background:#edbb86!important; }
.game-box :is(.bd-history td,.bd-history th,.cd-legend) { border-bottom-color:#45413b!important; }
.game-box :is(.od-clock,.od-status,.nh-status,.dd-round,.dd-status,.du-round,.du-status,.du-feedback,.du-heat strong,.pd-selection strong) { color:#e7cfb5!important; }
.game-box .dd-tools input { accent-color:#e9a36b; }
.game-box .tt-phase li { border-color:#514a40!important; color:#bfb8af!important; }
.game-box .tt-phase li[aria-current="step"] { background:#e8d7c4!important; border-color:#e8d7c4!important; color:#28211b!important; }

/* Fleet's percentage-width grids need a definite flex-item width; otherwise
   both boards shrink to their caption's intrinsic width (about 77px). Match
   the module's existing board caps and allow its flex wrap to stack them. */
.game-box .g-fleet .n-side {
  width:min(320px,44vw);
  max-width:100%;
  flex:0 1 auto;
}
@media (max-width:430px) {
  .game-box .g-fleet .n-side { width:min(300px,86vw); }
}

/* Tactile classic boards: retain original cell sizes and semantic state classes. */
.game-box .g-fourrow { --bad:#d35a47; --warn:#e7b950; }
.game-box .g-fourrow .f-board { background:linear-gradient(145deg,#9c6440,#6b432d); border-color:#be9065; box-shadow:inset 0 2px 0 #e5bb8266,0 7px 0 #3f2b20,0 13px 22px #0003; }
.game-box .g-fourrow .f-cell { background:#261e18; box-shadow:inset 0 3px 6px #0009,0 1px 0 #e2b98565; }
.game-box .g-fourrow .f-cell.p1 { background:radial-gradient(circle at 35% 28%,#ef9682,#cb523e 65%); box-shadow:inset 0 0 0 4px #8e392d60,inset 0 -4px 5px #7d312a88,0 2px 3px #0006; }
.game-box .g-fourrow .f-cell.p2 { background:radial-gradient(circle at 35% 28%,#ffe2a0,#dfaa3e 65%); box-shadow:inset 0 0 0 4px #aa772a60,inset 0 -4px 5px #87632688,0 2px 3px #0006; }
.game-box .g-fourrow .f-cell.is-last { outline:2px solid #fff6dc; outline-offset:-4px; }
.game-box .g-fourrow .f-cell.is-win { outline:3px solid #fff; outline-offset:-4px; box-shadow:inset 0 0 0 6px #5a7d45,0 0 0 2px #eff0bb; }
.game-box .g-fourrow .f-drop { background:#302b24; border-color:#6e5942; color:#e6d0aa; }
.game-box .g-reversi .rv-board { background:linear-gradient(145deg,#9a7650,#59402b); border-color:#ad8b60; box-shadow:inset 0 2px 0 #f0cf9955,0 6px 0 #392a1d,0 12px 20px #0003; }
.game-box .g-reversi .rv-cell { background:#6c7356; border-color:#525a41; box-shadow:inset 0 1px 2px #0002; border-radius:3px; }
.game-box .g-reversi .rv-cell.is-corner { background:#646d4c; }
.game-box .g-reversi .rv-disc.dark { background:radial-gradient(circle at 34% 25%,#63615a,#24251f 65%); box-shadow:inset 0 1px 1px #a29b7c,0 3px 2px #0007; }
.game-box .g-reversi .rv-disc.light { background:radial-gradient(circle at 34% 25%,#fffdf2,#e4d7b7 70%); box-shadow:inset 0 1px 1px #fff,0 3px 2px #0007; }
.game-box .g-reversi .rv-cell.is-legal::after { background:#fff2c8; box-shadow:0 0 0 2px #3b452c88; }
.game-box .g-reversi .rv-cell.is-last { box-shadow:inset 0 0 0 2px #ffe5a3; }
.game-box .g-reversi .rv-cell.is-cursor { box-shadow:inset 0 0 0 2px #fff; }
.game-box .g-sudoku9 .s9-grid,.game-box .g-sudoku .s-board { background:#f8f1e2; border-color:#96836a; border-radius:9px; box-shadow:0 5px 0 #847259,0 12px 20px #0003; }
.game-box .g-sudoku9 .s9-cell,.game-box .g-sudoku .s-cell { background:#fffaf0; color:#945027; border-color:#d6cdbd!important; font-weight:600; }
.game-box .g-sudoku9 .s9-cell.is-given,.game-box .g-sudoku .s-cell.is-given { background:#f7f0e2; color:#39392f; font-weight:750; }
.game-box .g-sudoku9 .s9-cell.bx-r,.game-box .g-sudoku9 .s9-cell.bx-b { border-color:#9d8a6d!important; }
.game-box .g-sudoku9 .s9-cell.is-peer,.game-box .g-sudoku .s-cell.is-peer { background:#eae3d3; }
.game-box .g-sudoku9 .s9-cell.is-same,.game-box .g-sudoku .s-cell.is-same { background:#e2d0ad; }
.game-box .g-sudoku9 .s9-cell.is-sel,.game-box .g-sudoku .s-cell.is-sel { background:#f5d9a9; outline:2px solid #995123; outline-offset:-2px; box-shadow:none; }
.game-box .g-sudoku9 .s9-cell.is-hint,.game-box .g-sudoku .s-cell.is-hint { color:#71642c; }
.game-box .g-sudoku9 .s9-cell.is-bad,.game-box .g-sudoku .s-cell.is-bad { color:#ab302b; }
.game-box .g-sudoku9 .s9-cell.is-wrong,.game-box .g-sudoku .s-cell.is-wrong { color:#a82b29; background:#f7d6cc; box-shadow:inset 0 0 0 2px #a82b29; }
.game-box .g-sudoku9 .s9-notes,.game-box .g-sudoku .s-note { color:#75654e; }
.game-box .g-sudoku9 .s9-key,.game-box .g-sudoku .s-key { background:#eae0cf; color:#493d2c; border-color:#b9a88f; box-shadow:0 2px 0 #776750; }
.game-box .g-sudoku9 .s9-key[aria-pressed="true"] { background:#bc7d4e; color:#fff; border-color:#deb58c; }
/* Given clues can also be peers/same digits; keep these combined states on paper. */
.game-box .g-sudoku .s-cell.is-peer { background:#eae3d3!important; }
.game-box .g-sudoku .s-cell.is-same { background:#e2d0ad!important; }
.game-box .g-sudoku .s-cell.is-sel { background:#f5d9a9!important; }
.game-box .g-sudoku .s-cell.is-wrong { background:#f7d6cc!important; }