/* Sudoku chrome. Rule-bearing board colors remain game-owned. */
:root {
  --ui-bg:#f8f9fa; --ui-surface:#fff; --ui-text:#1e293b; --ui-muted:#64748b; --ui-line:#e2e8f0;
  --bg-primary:#f8f9fa; --bg-secondary:#f1f2f6; --panel-bg:#fff; --text-primary:#1e293b; --text-secondary:#64748b; --border-color:#e2e8f0;
  --bg:#f8f9fa; --surface:#fff; --text:#1e293b; --muted:#64748b; --line:#e2e8f0;
  --piece-ink:#475569; --piece-accent:#3b82f6; --piece-wall:#64748b; --piece-floor:#fff;
}
:root[data-theme='dark'], :root[data-bs-theme='dark'] {
  --ui-bg:#0f172a; --ui-surface:#1e293b; --ui-text:#f8fafc; --ui-muted:#bac6d6; --ui-line:#475569;
  --bg-primary:#0f172a; --bg-secondary:#1e293b; --panel-bg:#1e293b; --text-primary:#f8fafc; --text-secondary:#bac6d6; --border-color:#475569;
  --bg:#0f172a; --surface:#1e293b; --text:#f8fafc; --muted:#bac6d6; --line:#475569;
  --piece-ink:#cbd5e1; --piece-accent:#60a5fa; --piece-wall:#94a3b8; --piece-floor:#1e293b;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme='light']):not([data-bs-theme='light']) {
    --ui-bg:#0f172a; --ui-surface:#1e293b; --ui-text:#f8fafc; --ui-muted:#bac6d6; --ui-line:#475569;
    --bg-primary:#0f172a; --bg-secondary:#1e293b; --panel-bg:#1e293b; --text-primary:#f8fafc; --text-secondary:#bac6d6; --border-color:#475569;
    --bg:#0f172a; --surface:#1e293b; --text:#f8fafc; --muted:#bac6d6; --line:#475569;
    --piece-ink:#cbd5e1; --piece-accent:#60a5fa; --piece-wall:#94a3b8; --piece-floor:#1e293b;
  }
}
body { background-color:var(--bg-primary); color:var(--text-primary); }
body.experiment-shell .experiment-header { background:var(--ui-bg); backdrop-filter:none; }
body.experiment-shell .experiment-icon-button { background:transparent; border-color:transparent; }
body.experiment-shell .actions button, body.experiment-shell .controls button { box-shadow:none; border-radius:10px; }
/* Piece boards share the approved low-profile tray, without decorative colors. */
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #board {
  padding:8px; gap:3px; border:1px solid var(--ui-line); border-radius:14px;
  background:var(--bg-secondary); box-shadow:0 3px 0 var(--ui-line); position:relative; isolation:isolate;
}
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #board .cell {
  background:var(--piece-floor); color:var(--ui-text); border:1px solid var(--ui-line); border-radius:5px; font-weight:650;
}
:is([data-experiment='inertia-grid'],[data-experiment='crate-escape']) #board .wall { background:var(--ui-line); }
[data-experiment='circle-relocation'] #board .cell { border-radius:5px; }
[data-experiment='circle-relocation'] #board .selected { outline:2px solid var(--piece-accent); outline-offset:-3px; }
[data-experiment='circle-relocation'] #board .room-0,[data-experiment='circle-relocation'] #board .room-3 { background:var(--bg-secondary); }
[data-experiment='circle-relocation'] #board .region-right { border-right:2px solid var(--ui-text); }
[data-experiment='circle-relocation'] #board .region-bottom { border-bottom:2px solid var(--ui-text); }
:is([data-experiment='inertia-grid'],[data-experiment='crate-escape']) #board .exit { border:2px solid var(--piece-accent); outline:0; }
[data-experiment='crate-escape'] #board .plate { outline:2px dashed var(--piece-accent); outline-offset:-5px; }
#board .piece-webgl { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
#board[data-piece-renderer] .piece-rendered { color:transparent; }
#board[data-piece-renderer] .circle::after { content:attr(data-marble-label); position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.2rem; font-weight:800; text-shadow:0 1px 3px #0f172a; z-index:2; }
#board .circle { position:relative; }
/* Feedback on a numeric counter never creates a full-screen game obstruction. */
.motion-feedback-anchor { position:relative; }
@media(prefers-reduced-motion:reduce) { .win-effect { display:none!important; } }

[data-experiment='crate-escape'] #board .crate { position:relative; }
[data-experiment='crate-escape'] #board[data-piece-renderer] .crate::after { content:'×'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.7rem; font-weight:400; pointer-events:none; z-index:2; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) :is(.controls:has(#up),.directions) { display:grid; grid-template-columns:repeat(3,48px); gap:5px; width:max-content; margin:14px auto; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) :is(#up,#left,#down,#right) { min-width:48px; min-height:44px; padding:4px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); color:var(--ui-text); font-size:0; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #up { grid-column:2; grid-row:1; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #left { grid-column:1; grid-row:2; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #down { grid-column:2; grid-row:2; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #right { grid-column:3; grid-row:2; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) :is(#up,#left,#down,#right)::after { font-size:22px; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #up::after { content:'↑'; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #left::after { content:'←'; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #down::after { content:'↓'; }
:is([data-experiment='inertia-grid'],[data-experiment='circle-relocation'],[data-experiment='crate-escape']) #right::after { content:'→'; }
/* DOM keeps clues, regions and hit targets. The scene draws only the material beneath them. */
[data-play-surface] { position:relative; isolation:isolate; }
.play-webgl { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
[data-play-static] { position:relative; }
[data-play-material] { z-index:1; background-color:transparent!important; }
[data-play-surface] [data-play-card] { opacity:0!important; }
.play-webgl-cards { z-index:4; }
body.experiment-shell #game-instructions { font-size:.86rem; line-height:1.55; }

[data-play-surface] > svg { z-index:2; }
.play-canvas-tile.selected { outline:2px solid var(--piece-accent); outline-offset:-2px; }

/* Scoped to the newest boards. Existing classic-game skins remain unchanged. */
[data-play-measuring] { transition:none!important; }
[data-play-glyph] { color:transparent!important; text-shadow:none!important; }
:is([data-experiment='waterway-regions'],[data-experiment='shortest-route-walls'],[data-experiment='growing-polyomino'],[data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) main { max-width:440px; }
:is([data-experiment='waterway-regions'],[data-experiment='shortest-route-walls'],[data-experiment='growing-polyomino'],[data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board {
  width:100%; padding:5px; gap:2px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-line);
}
:is([data-experiment='waterway-regions'],[data-experiment='shortest-route-walls'],[data-experiment='growing-polyomino'],[data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .cell {
  padding:0; border:1px solid transparent; border-radius:3px; background:var(--ui-surface); color:var(--ui-text); font:650 clamp(17px,5vw,24px)/1 system-ui,sans-serif;
}
:is([data-experiment='growing-polyomino'],[data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) :is(.palette,.controls) button[aria-pressed='true'] {
  border:2px solid var(--piece-accent); background:color-mix(in srgb,var(--piece-accent) 12%,var(--ui-surface)); color:var(--ui-text);
}
:is([data-experiment='growing-polyomino'],[data-experiment='five-cell-regions']) .palette button {
  min-height:44px; padding:8px 10px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-surface); color:var(--ui-text); font:650 13px/1.2 system-ui,sans-serif;
}
[data-experiment='five-cell-regions'] #board .clue { outline:0; font-weight:750; }
[data-experiment='five-cell-regions'] #board .cell.selected { outline:2px solid var(--piece-accent); outline-offset:-3px; box-shadow:none; }
:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .cell { position:relative; outline:0; }
:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .region-label { position:absolute; bottom:3px; right:4px; display:grid; place-items:center; width:18px; height:18px; border-radius:4px; color:var(--ui-text); background:var(--ui-line); font:650 11px/1 system-ui,sans-serif; }
:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .boundary-top { border-top:2px solid var(--ui-text); }
:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .boundary-right { border-right:2px solid var(--ui-text); }
:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .boundary-bottom { border-bottom:2px solid var(--ui-text); }
:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes']) #board .boundary-left { border-left:2px solid var(--ui-text); }
[data-experiment='paired-shapes'] #board .gray-piece { background:var(--ui-muted); color:var(--ui-bg); }
[data-experiment='paired-shapes'] #board .clue-area { color:var(--ui-text); text-shadow:none; font-size:1.45rem; }
[data-experiment='paired-shapes'] #board .clue-symbol { font-size:15px; top:5px; left:6px; }
[data-experiment='growing-polyomino'] #board :is(.stage-1,.stage-2,.stage-3,.stage-4) { background:color-mix(in srgb,var(--piece-accent) 15%,var(--ui-surface)); font-weight:750; }
[data-experiment='growing-polyomino'] #board .arrow { outline:2px solid var(--piece-accent); outline-offset:-3px; }
[data-experiment='waterway-regions'] #board .water { background:color-mix(in srgb,var(--piece-accent) 10%,var(--ui-surface)); }
[data-experiment='waterway-regions'] #board[data-play-renderer='three'] .water:not(.source):not(.drain) { font-size:0; }
[data-experiment='waterway-regions'] #board :is(.source,.drain) { outline:2px solid var(--piece-accent); outline-offset:-3px; font-size:16px; }
[data-experiment='shortest-route-walls'] #board .wall { background:var(--ui-muted); color:var(--ui-bg); }
[data-experiment='shortest-route-walls'] #board :is(.start,.goal) { color:var(--piece-accent); font-weight:800; }

/* New collection: quiet tabletop, one clear playfield and secondary controls. */
body[data-play-style='studio'] { --studio-bg:#f3f4f3; --studio-tray:#e1e6e7; --studio-shadow:#34455420; --piece-accent:#387ba8; --piece-wall:#728694; background:var(--studio-bg); }
:root[data-theme='dark'] body[data-play-style='studio'],:root[data-bs-theme='dark'] body[data-play-style='studio'] { --studio-bg:#111923; --studio-tray:#263442; --studio-shadow:#0006; --piece-accent:#8bbddd; --piece-wall:#6e879c; }
@media(prefers-color-scheme:dark) { :root:not([data-theme='light']):not([data-bs-theme='light']) body[data-play-style='studio'] { --studio-bg:#111923; --studio-tray:#263442; --studio-shadow:#0006; --piece-accent:#8bbddd; --piece-wall:#6e879c; } }
body[data-play-style='studio'] :is(.game-header,.experiment-header) { border:0; background:var(--studio-bg); max-width:520px; min-height:72px; padding:12px; margin:0 auto; position:relative; }
body[data-play-style='studio'] :is(.game-header,.experiment-header) h1 { font-size:21px; font-weight:750; letter-spacing:-.045em; }
body[data-play-style='studio'] :is(.icon-button,.experiment-icon-button) { border:0; background:transparent; box-shadow:none; }
body[data-play-style='studio'] main { max-width:480px; width:calc(100% - 32px); margin:12px auto; }
body[data-play-style='studio'] :is(.stats,.stats-bar) { border:0; background:transparent; box-shadow:none; color:var(--ui-muted); font-size:12px; letter-spacing:.02em; margin:0 0 20px; }
body[data-play-style='studio'] :is(#board,.loop-board,.araf-board,.galaxy-board) { box-shadow:0 14px 28px -18px var(--studio-shadow); }
body[data-play-style='studio'] [data-play-surface] { border-radius:12px; }
body[data-play-style='studio'] :is(.actions,.controls,.color-controls,.mark-controls,.palette) { gap:8px; }
body[data-play-style='studio'] :is(.actions,.controls,.palette) button { border-radius:12px; font-size:14px; min-height:44px; }
body[data-play-style='studio'] :is(#status,#status-text) { line-height:1.6; font-size:13px; color:var(--ui-muted); margin:16px auto; }
body[data-play-style='studio'] details { margin:20px auto; color:var(--ui-muted); font-size:13px; line-height:1.7; }
body[data-play-style='studio'] details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; }
body[data-play-style='studio'] details summary::before { content:'+'; font-size:20px; font-weight:300; }
body[data-play-style='studio'] details[open] summary::before { content:'−'; }
body[data-play-style='studio'].experiment-shell:not([data-experiment='cube-route']) main { display:flex; flex-direction:column; }
body[data-play-style='studio'].experiment-shell main > #status { order:0; margin:0 0 18px; min-height:22px; }
body[data-play-style='studio'].experiment-shell main > :is(#palette,#regions,#tones) { order:1; margin:0 auto 14px; }
body[data-play-style='studio'].experiment-shell main > #board { order:2; }
body[data-play-style='studio'].experiment-shell main > :is(.directions,.controls,.actions,.palette) { order:3; }
body[data-play-style='studio'].experiment-shell main > details { order:5; width:100%; }
body[data-play-style='studio'].experiment-shell #board { box-shadow:0 8px 0 -3px var(--studio-tray),0 22px 32px -20px var(--studio-shadow); }
body[data-play-style='studio']:is([data-experiment='crate-escape'],[data-experiment='inertia-grid'],[data-experiment='circle-relocation']) #board { padding:14px; gap:4px; border:0; border-radius:22px; background:var(--studio-tray); }
body[data-play-style='studio']:is([data-experiment='crate-escape'],[data-experiment='inertia-grid'],[data-experiment='circle-relocation']) #board .cell { background:var(--ui-surface); border:0; border-radius:8px; box-shadow:inset 0 1px 2px #0001; }
body[data-play-style='studio']:is([data-experiment='crate-escape'],[data-experiment='inertia-grid']) #board .wall { background:transparent; box-shadow:none; }
body[data-play-style='studio']:is([data-experiment='crate-escape'],[data-experiment='inertia-grid']) #board .exit { background:color-mix(in srgb,var(--piece-accent) 15%,var(--ui-surface)); border:2px solid var(--piece-accent); }
body[data-play-style='studio'][data-experiment='circle-relocation'] #board .region-right { border-right:3px solid var(--piece-wall); }
body[data-play-style='studio'][data-experiment='circle-relocation'] #board .region-bottom { border-bottom:3px solid var(--piece-wall); }
body[data-play-style='studio']:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes'],[data-experiment='growing-polyomino']) #board { gap:0; padding:10px; border:0; border-radius:18px; background:var(--studio-tray); }
body[data-play-style='studio']:is([data-experiment='five-cell-regions'],[data-experiment='paired-shapes'],[data-experiment='growing-polyomino']) #board .cell { border-radius:0; box-shadow:inset 0 0 0 .5px var(--ui-line); }
body[data-play-style='studio'] #board .region-label { background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-line); opacity:1; font-size:11px; }
[data-experiment='paired-shapes'] #board .gray-piece .clue-area { color:var(--ui-bg); }
body[data-play-style='studio'][data-experiment='waterway-regions'] #board { padding:14px; gap:7px; border:0; border-radius:22px; background:var(--studio-tray); }
body[data-play-style='studio'][data-experiment='waterway-regions'] #board .cell { border-radius:9px; background:var(--ui-surface); }
body[data-play-style='studio'][data-experiment='waterway-regions'] #board :is(.source,.drain) { outline:0; border:2px solid var(--piece-accent); border-radius:50%; font-size:13px; }
body[data-play-style='studio'][data-experiment='waterway-regions'] #board .water { background:color-mix(in srgb,var(--piece-accent) 9%,var(--ui-surface)); }
body[data-play-style='studio'][data-experiment='waterway-regions'] #board .invalid-clue { color:#b45348; box-shadow:inset 0 0 0 2px #b4534880; }
body[data-play-style='studio'][data-experiment='cube-route'] #board { width:min(100%,440px,46svh); }
body[data-play-style='studio'][data-experiment='cube-route'] main { max-width:800px; }
body[data-play-style='studio'][data-experiment='cube-route'] .game-panel { padding:0 12px; }
body[data-play-style='studio'][data-experiment='cube-route'] .route-help:empty { display:none; }
@media(min-width:720px) { body[data-play-style='studio'] main { margin-top:24px; } }

body[data-play-style='studio'] .studio-objective { order:-1; color:var(--ui-text); font-size:14px; font-weight:600; line-height:1.55; text-align:center; margin:0 0 8px; }

body[data-play-style='studio'][data-experiment='circle-relocation'] .piece-rendered::after { opacity:0; }