:root {
  --board-mint:light-dark(#c9eee4,#294940);
  --board-blue:light-dark(#d6e9ff,#30465f);
  --board-pink:light-dark(#ffdae4,#563949);
  --board-yellow:light-dark(#ffedb2,#514a31);
  --board-lilac:light-dark(#e8ddff,#443956);
  --board-peach:light-dark(#ffe0c6,#544033);
  --board-white:light-dark(#fffefa,#252c35);
  --board-edge:light-dark(#c1cbd5,#556578);
  --piece-face:light-dark(#fffefa,#edf1f7);
  --piece-edge:light-dark(#b9c5cf,#697a90);
  --piece-ink:#26394a;
  --piece-raised:inset 0 1px 0 #ffffffb3,0 3px 0 var(--piece-edge),0 5px 6px #142e3a10;
  --board-error:light-dark(#b43850,#ffb2b9);
}

/* Shared tools stay neutral; color belongs to the puzzle and its state. */
:is(#companion,#second-shift,#test-room) .primary-button { background:var(--game-color,var(--lab-color)); border-radius:8px; box-shadow:0 2px 0 color-mix(in srgb,var(--game-color,var(--lab-color)) 75%,#26394a); }
#test-room { --action:light-dark(#167e6a,#8bd8c1); --action-ink:light-dark(white,#19382e); }
#test-room .primary-button { background:var(--action); border-color:var(--action); box-shadow:0 2px 0 light-dark(#126653,#456b60); }
:is(#companion,#second-shift,#test-room) .header .icon-button { box-shadow:none; }
:is(#companion,#second-shift,#test-room) :is(.pk-tools,.prototype-controls,.comp-actions,.ss-pad) .icon-button { background:var(--board-white); border-color:var(--board-edge); border-radius:8px; box-shadow:0 2px 0 var(--line); }
#test-room :is(.prototype-meta,.trivia-meta,.phrase-meta,.tone-meta) { min-height:30px; margin-bottom:14px; font-size:12px; }
#test-room :is(.prototype-meta,.trivia-meta,.phrase-meta)>span:last-child { font-variant-numeric:tabular-nums; font-weight:650; color:var(--ink); }
#test-room :is(.pk-tools,.prototype-controls) { margin-top:16px; padding-top:14px; }
#test-room .lab-status { font-size:12px; line-height:19px; }
#test-room .pk-palette { gap:8px; margin-top:18px; padding-bottom:3px; }
#test-room .pk-palette button { background:var(--piece-face); color:var(--piece-ink); border:1px solid var(--board-edge); border-radius:7px; box-shadow:var(--piece-raised); min-height:46px; }
#test-room .pk-palette button[aria-pressed=true] { border-color:var(--action); outline:2px solid var(--action); outline-offset:1px; }
#test-room .pk-palette button:active { box-shadow:inset 0 1px 0 #fff9,0 1px 0 var(--piece-edge); }
#test-room .pk-grid { background:var(--board-white); border:1px solid var(--board-edge); border-radius:8px; overflow:hidden; }
#test-room .pk-cell { color:var(--ink); box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--board-edge) 55%,transparent); }
#test-room .pk-cell:disabled { box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--board-edge) 55%,transparent)!important; opacity:1; }
#test-room .pk-cell:active:not(:disabled) { background:var(--board-blue); }
#test-room .pk-cell.conflict { background:var(--board-pink); box-shadow:inset 0 0 0 2px var(--board-error); }
#test-room .pk-frame { grid-template-columns:30px minmax(0,1fr) 30px; grid-template-rows:34px auto 34px; gap:4px; }
#test-room .pk-axis span:not(:empty) { margin:2px; border-radius:6px; border:1px solid var(--board-edge); background:var(--board-blue); color:var(--ink); font-size:15px; font-weight:750; box-shadow:0 2px 0 var(--board-edge); }
#test-room .pk-axis:is(.left,.right) span:not(:empty) { background:var(--board-lilac); }

/* Continuous colored territories, with the same shallow edge as Domino. */
.board-territories { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.board-region-face { fill:light-dark(var(--region-fill),color-mix(in srgb,var(--region) 33%,#252a33)); stroke:light-dark(color-mix(in srgb,var(--region) 48%,var(--region-fill)),color-mix(in srgb,var(--region) 65%,#b8c4d4)); stroke-width:1.2; }
.board-region-depth { fill:light-dark(color-mix(in srgb,var(--region) 48%,var(--region-fill)),color-mix(in srgb,var(--region) 22%,#141922)); }
.board-region.complete .board-region-face { stroke:var(--region); stroke-width:2; }
.board-region.conflict .board-region-face { stroke:var(--board-error); stroke-width:2; stroke-dasharray:4 3; }

/* Shelf Life, Equal and Patchwork: loose pieces above colored sockets. */
#companion .comp-bank { gap:8px; border-top:1px solid var(--line); padding-top:12px; padding-bottom:7px; }
#companion :is(.bank-item,.target-slot.occupied) { background:var(--piece-face); border:1px solid var(--board-edge); border-radius:7px; color:var(--piece-ink); box-shadow:var(--piece-raised); }
#companion .target-slot.occupied:disabled { box-shadow:var(--piece-raised)!important; }
#companion .target-slot { border:1px solid var(--board-edge); border-radius:7px; background:var(--board-blue); box-shadow:inset 0 2px 0 #26394a0d; }
#companion :is(.bank-item,.target-slot).selected { border:2px solid var(--action); outline:1px solid var(--action); outline-offset:1px; }
#companion .bank-item.used { border:1px dashed var(--line); background:transparent; box-shadow:none; opacity:.65; }
#companion .target-slot.drop-target { background:var(--board-mint); outline:2px solid var(--action); }
#companion .slot-number { font-size:13px; font-weight:650; opacity:.8; }
#companion .shelf-board { gap:7px; padding:12px 0; background:none; border:0; }
#companion .shelf-position { border-bottom:3px solid var(--board-edge); }
#companion .shelf-position>span { font-size:10px; padding:4px 0; }
#companion .shelf-position:nth-child(3n+2) .target-slot:not(.occupied) { background:var(--board-pink); }
#companion .shelf-position:nth-child(3n) .target-slot:not(.occupied) { background:var(--board-yellow); }
#companion .shelf-clues li { padding:10px 0; font-size:13px; line-height:20px; }
#companion .clue-state { width:23px; height:23px; border:1px solid var(--board-edge); border-radius:6px; background:var(--board-white); }
#companion .satisfied .clue-state { background:var(--board-mint); border-color:var(--action); }
#companion .violated .clue-state { background:var(--board-pink); border-color:var(--board-error); }
#companion .shelf-object-icon { color:var(--object-color,#248475); background:var(--object-fill,#c9eee4); border-radius:6px; }
#companion .shelf-object-icon svg { width:62%; height:62%; stroke-width:1.9; }
#companion[data-game=equal] .bank-item:not(.used) { background:var(--piece-face); }
#companion .number-value { color:var(--piece-ink); font-size:29px; font-weight:750; }
#companion .equation .target-slot:not(.occupied) { background:var(--board-blue); border-style:solid; }
#companion .equation:nth-child(even) .target-slot:not(.occupied) { background:var(--board-lilac); }
#companion .equation-target { height:48px; display:grid; place-items:center; border:1px solid var(--board-edge); border-radius:6px; background:var(--board-yellow); box-shadow:0 2px 0 var(--board-edge); font-size:24px; }
#companion .equation.satisfied .equation-target { background:var(--board-mint); border-color:var(--action); }
#companion .equation.violated .equation-target { background:var(--board-pink); border-color:var(--board-error); }
#companion .operator { font-size:20px; color:var(--muted); }
#companion .equations { gap:14px; padding:14px 0; }
#companion .patch-board { gap:5px; }
#companion .patch-board .target-slot { border-radius:6px; }
#companion[data-game=patchwork] .bank-item { border-radius:6px; }
#companion .patch-target>svg { border:1px solid var(--board-edge); border-radius:6px; box-shadow:0 3px 0 var(--board-edge); overflow:hidden; }
#companion .tile-face { color:var(--piece-ink); border:1px solid var(--board-edge); box-shadow:0 1px 0 var(--piece-edge); }

/* Second Shift keeps the worker colors and machine states recognizable. */
#second-shift { --ss-dark:#40566b; }
#second-shift .ss-floor { fill:var(--board-blue); stroke:light-dark(#afcbe4,#587084); rx:6px; }
#second-shift .ss-floor-depth { fill:light-dark(#9ebed9,#172934); rx:6px; }
#second-shift .ss-counter-top { fill:var(--piece-face); stroke:var(--board-edge); stroke-width:1.2; rx:5px; }
#second-shift .ss-counter-side { fill:var(--piece-edge); stroke:var(--board-edge); stroke-width:1.2; rx:5px; }
#second-shift .ss-worker { filter:drop-shadow(0 2px 1px #142e3a18); }
#second-shift .ss-actor-label { fill:var(--ink); font-size:9px; }
#second-shift .ss-step-dot { fill:var(--action); opacity:.65; }
#second-shift .ss-beat { border-radius:6px; background:var(--board-blue); border-color:var(--board-edge); }
#second-shift .ss-beat.filled { color:var(--piece-ink); background:var(--piece-face); box-shadow:0 2px 0 var(--piece-edge); }
#second-shift .ss-beat.next { background:var(--board-mint); border-color:#248475; }
#second-shift .ss-beat.spent { opacity:.5; }
#second-shift .ss-log>span { background:var(--board-blue); border-radius:0 5px 5px 0; padding:5px 8px; }
#second-shift .ss-log>span.you { background:var(--board-peach); }

/* Pipes: white plumbing, blue water, clear joint boundaries. */
#test-room .pipe-board { border:1px solid var(--board-edge); background:var(--board-blue); border-radius:8px; }
#test-room .pipe-cell { background:var(--board-blue); box-shadow:inset 0 0 0 .5px light-dark(#adc6db,#506b85); }
#test-room .pipe-cell.wet { background:var(--board-mint); }
#test-room .pipe-cell:disabled { box-shadow:inset 0 0 0 .5px var(--board-edge)!important; }
#test-room .pipe-rim { stroke:var(--piece-edge); stroke-width:25; filter:drop-shadow(0 2px 0 #26394a20); }
#test-room .pipe-interior { stroke:var(--piece-face); stroke-width:20; }
#test-room .pipe-joint { fill:var(--piece-face); }
#test-room .pipe-cell.wet .pipe-interior { stroke:#459dc7; stroke-width:14; }
#test-room .pipe-cell.wet .pipe-joint { fill:#459dc7; }
#test-room .pipe-inlet { fill:#257da5; stroke:var(--piece-face); stroke-width:3; }

/* Towers and Districts share Domino's connected regions and letter badges. */
#test-room .towers-board { position:relative; border:0; border-radius:0; overflow:visible; background:transparent; isolation:isolate; }
#test-room .tower-cell { border:0; background:transparent; box-shadow:inset 0 0 0 .5px light-dark(#ffffff6b,#ffffff24); }
#test-room .tower-cell:active { background:light-dark(#ffffff40,#ffffff10); }
#test-room .tower-cell .territory-label:not(:empty) { top:3px; left:3px; width:14px; height:14px; display:grid; place-items:center; font-size:9px; line-height:1; color:white; background:color-mix(in srgb,var(--territory) 80%,#223442); border-radius:4px; }
#test-room .tower-cell.conflict::after { inset:4px; border-color:var(--board-error); border-radius:6px; }
#test-room .tower-cross { opacity:.5; }
#test-room .tower-cell svg { filter:drop-shadow(0 2px 1px #26394a35); }
#test-room .tower-ledger { gap:7px; }
#test-room .tower-ledger span { background:var(--board-blue); border:1px solid var(--board-edge); border-radius:6px; padding:8px 4px; color:var(--muted); }
#test-room .tower-ledger span:nth-child(2) { background:var(--board-lilac); }
#test-room .tower-ledger span:nth-child(3) { background:var(--board-mint); }
#test-room .tower-ledger b { font-size:17px; margin-top:4px; }
#test-room .tower-modes { background:var(--board-blue); border:1px solid var(--board-edge); }
#test-room .tower-modes button[aria-pressed=true] { background:var(--piece-face); color:var(--piece-ink); box-shadow:0 2px 0 var(--piece-edge); }
#test-room .district-map { isolation:isolate; }
#test-room .district-board { position:relative; background:transparent; border:0; border-radius:0; overflow:visible; }
#test-room .district-board .pk-cell { background:var(--board-white); border:0; box-shadow:inset 0 0 0 .5px var(--line); }
#test-room .district-board .district-owned { background:transparent; box-shadow:inset 0 0 0 .5px light-dark(#ffffff6b,#ffffff24); }
#test-room .district-board .conflict { box-shadow:inset 0 0 0 2px var(--board-error); }
#test-room .district-owned svg { filter:drop-shadow(0 2px 1px #26394a18); }
#test-room .island-counts { gap:6px; flex-wrap:wrap; }
#test-room .island-counts span { min-height:34px; flex:1 0 45px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid color-mix(in srgb,var(--land) 45%,var(--board-edge)); border-radius:6px; background:color-mix(in srgb,var(--land) 15%,var(--surface)); color:var(--ink); }

/* Number and signal boards keep clues legible above the board color. */
#test-room [data-test-game=stackerz] .pk-grid { border:1px solid var(--board-edge); border-radius:8px; }
#test-room [data-test-game=stackerz] .pk-cell { background:var(--board-blue); border:0; box-shadow:inset 0 0 0 .5px var(--board-edge); }
#test-room [data-test-game=stackerz] .pk-cell:is(:nth-child(8n+2),:nth-child(8n+4),:nth-child(8n+5),:nth-child(8n+7)) { background:var(--board-mint); }
#test-room [data-test-game=stackerz] .pk-cell.stackerz-given { background:var(--board-lilac); }
#test-room [data-test-game=stackerz] .pk-cell.conflict { background:var(--board-pink); box-shadow:inset 0 0 0 2px var(--board-error); }
#test-room [data-test-game=stackerz] .skyline-clue:not(.empty) { background:var(--board-yellow); border-radius:6px; }
#test-room [data-test-game=stackerz] .pk-palette button { width:54px; height:60px; background:var(--piece-face); }
#test-room [data-test-game=stackerz] .pk-palette button[aria-pressed=true] { background:var(--board-mint); }
#test-room .pk-clue { background:var(--piece-face); color:var(--piece-ink); border:1px solid var(--board-edge); }
#test-room .orbit-board { background:var(--board-white); border-color:var(--board-edge); }
#test-room .orbit-board .pk-cell { background:var(--board-blue); }
#test-room .orbit-board .orbit-highlight { background:var(--board-mint); box-shadow:inset 0 0 0 1.5px #248475; }
#test-room .orbit-board .pk-cell.conflict { background:var(--board-pink); }
#test-room .orbit-board svg { filter:drop-shadow(0 2px 1px #26394a18); }
#test-room .pk-frame:has(.orbit-board) { grid-template-columns:20px minmax(0,1fr); grid-template-rows:28px auto; }
#test-room .pk-frame:has(.orbit-board) .pk-axis:is(.right,.bottom) { display:none; }
#test-room .pk-frame:has(.orbit-board) .pk-axis span { margin:1px; font-size:13px; border-radius:4px; }
#test-room .orbit-star { fill:light-dark(#81a6c3,#718da9); }
#test-room .planet-ledger { gap:7px; }
#test-room .planet-ledger>div { min-height:40px; padding:7px 10px; border:1px solid color-mix(in srgb,var(--planet) 40%,var(--board-edge)); border-radius:6px; background:color-mix(in srgb,var(--planet) 13%,var(--surface)); }
#test-room .planet-ledger i { width:16px; height:16px; border:2px solid var(--piece-face); box-shadow:0 1px 0 var(--piece-edge); }
#test-room .pk-cell.signal-wall { background:var(--board-lilac); color:var(--ink); font-size:21px; }
#test-room .pk-cell.signal-wall.satisfied { color:var(--action); }
#test-room .signal-number { display:grid; place-items:center; width:72%; height:72%; min-height:26px; background:var(--piece-face); color:var(--piece-ink); border:1px solid var(--board-edge); border-radius:6px; box-shadow:0 2px 0 var(--piece-edge); font-size:20px; }
#test-room .signal-wall.satisfied .signal-number { color:#167e6a; border-color:#248475; }
#test-room .pk-cell.signal-covered { background:var(--board-mint); }
#test-room .signal-covered svg { filter:drop-shadow(0 2px 1px #26394a18); }
#test-room .signal-dot { background:#248475; width:5px; height:5px; opacity:.5; }

/* Bridges, Loop, Color Race and Laser use white hardware and colored connections. */
#test-room .pk-network { background:transparent; }
#test-room .bridge-base { fill:var(--piece-edge); }
#test-room .bridge-island { fill:var(--piece-face); stroke:var(--board-edge); stroke-width:1.4; }
#test-room .bridge-node.complete .bridge-island { fill:var(--board-mint); stroke:#248475; stroke-width:2; }
#test-room .bridge-node.conflict .bridge-island { fill:var(--board-pink); stroke:var(--board-error); stroke-width:2; }
#test-room .bridge-node text { fill:var(--piece-ink); font-size:22px; }
#test-room .bridge-node:is(.complete,.conflict) text { fill:var(--ink); }
#test-room .bridge-rail { stroke:var(--board-edge); stroke-width:2; stroke-dasharray:3 7; stroke-linecap:round; }
#test-room .bridge-rail.placed { stroke:#447eb8; stroke-width:5; stroke-dasharray:none; filter:drop-shadow(0 2px 0 #26394a25); }
#test-room .bridge-rail.conflict { stroke:var(--board-error); }
#test-room .loop-clue-base { fill:var(--piece-edge); }
#test-room .loop-clue-face { fill:var(--piece-face); stroke:var(--board-edge); stroke-width:1; }
#test-room .loop-clue.complete .loop-clue-face { fill:var(--board-mint); }
#test-room .loop-clue.conflict .loop-clue-face { fill:var(--board-pink); stroke:var(--board-error); }
#test-room .loop-clue text { fill:var(--piece-ink); font-size:22px; }
#test-room .loop-clue:is(.complete,.conflict) text { fill:var(--ink); }
#test-room .loop-line.placed { stroke:#248475; filter:drop-shadow(0 2px 0 #26394a25); }
#test-room .network-underlay { stroke:var(--piece-edge); stroke-width:17; stroke-linecap:round; filter:drop-shadow(0 2px 1px #26394a18); }
#test-room .network-base { stroke:var(--piece-face); stroke-width:12; }
#test-room .race-seed { stroke:var(--piece-face); stroke-width:3; filter:drop-shadow(0 3px 0 #26394a30); }
#test-room .race-scores { gap:8px; margin-top:12px; }
#test-room .race-scores>span { flex:1; grid-template-columns:10px 1fr; border:1px solid color-mix(in srgb,var(--race-color) 40%,var(--board-edge)); border-radius:6px; background:color-mix(in srgb,var(--race-color) 13%,var(--surface)); padding:9px 12px; }
#test-room .race-scores b { font-size:20px; }
#test-room .laser-board { background:var(--board-blue); }
#test-room .laser-mirror { background:var(--board-lilac); }
#test-room .laser-mirror svg { filter:drop-shadow(0 2px 0 #26394a20); }
#test-room .laser-mirror svg circle { fill:var(--piece-face); stroke:var(--board-edge); }
#test-room .laser-target { fill:var(--piece-face); stroke:#bd5b74; }
#test-room .laser-board svg text { fill:var(--piece-ink); }
#test-room .laser-board .laser-lit svg text { fill:var(--ink); }
#test-room .laser-lit .laser-target { fill:var(--board-yellow); stroke:#a37b25; }
#test-room .laser-beam { filter:drop-shadow(0 2px 1px #b4385020); }

/* Word and image games borrow the same tactile tiles, without tinting photos. */
#test-room .trivia-answers { gap:12px; }
#test-room .trivia-answers button { background:var(--piece-face); color:var(--piece-ink); border-color:var(--board-edge); border-radius:8px; box-shadow:var(--piece-raised); padding:12px; min-height:62px; }
#test-room .trivia-answers button>span { background:#d6e9ff; color:var(--piece-ink); border-color:#b3cbe2; width:30px; height:30px; border-radius:6px; font-weight:750; }
#test-room .trivia-answers button:nth-child(2)>span { background:#ffdae4; border-color:#e4b2c0; }
#test-room .trivia-answers button:nth-child(3)>span { background:#ffedb2; border-color:#d9c689; }
#test-room .trivia-answers button:nth-child(4)>span { background:#e8ddff; border-color:#c9b8e5; }
#test-room .trivia-answers button.correct { background:var(--board-mint); color:var(--ink); border-color:#248475; opacity:1; }
#test-room .trivia-answers button.incorrect { background:var(--board-pink); color:var(--ink); border-color:var(--board-error); opacity:1; }
#test-room .question-progress i { height:7px; border-radius:3px; }
#test-room .question-progress .current { background:#447eb8; }
#test-room .question-progress .right { background:#248475; }
#test-room .question-progress .wrong { background:#bd5b74; }
#test-room .trivia-question { font-size:22px; line-height:1.4; }
#test-room .phrase-board { gap:12px 16px; padding:12px 0; }
#test-room .phrase-board span { background:var(--board-blue); border:1px solid var(--board-edge); border-radius:5px; height:39px; }
#test-room .phrase-board span.revealed { background:var(--piece-face); color:var(--piece-ink); box-shadow:var(--piece-raised); }
#test-room .phrase-wheel { filter:drop-shadow(0 3px 0 var(--piece-edge)); }
#test-room .phrase-wheel svg>circle { fill:var(--piece-face); stroke:var(--board-edge); stroke-width:2; }
#test-room .lab-keyboard { gap:9px; }
#test-room .lab-keyboard button { background:var(--piece-face); color:var(--piece-ink); border-color:var(--board-edge); border-radius:6px; box-shadow:var(--piece-raised); }
#test-room .lab-keyboard button:disabled { background:var(--tile); color:var(--muted); opacity:.65; }
#test-room .phrase-controls .secondary-button { background:var(--board-lilac); border-color:var(--board-edge); border-radius:7px; }
#test-room .tone-scene { border:1px solid var(--board-edge); border-radius:8px; box-shadow:0 3px 0 var(--piece-edge); margin-bottom:7px; }
#test-room .tone-sliders { padding:10px 2px; gap:9px; }
#test-room .tone-sliders label { padding-top:5px; border-bottom:1px solid var(--line); }
#test-room .tone-sliders label>span { font-weight:600; }
#test-room .tone-sliders input { min-height:44px; }
#test-room .tone-compare i { border:3px solid var(--piece-face); box-shadow:0 3px 0 var(--piece-edge),0 0 0 1px var(--board-edge); }
#test-room .tone-photo-tabs button { background:var(--board-blue); border-color:var(--board-edge); }
#test-room .tone-photo-tabs button[aria-pressed=true] { background:var(--board-mint); border-color:var(--action); }

@media(max-width:390px) { #test-room:has([data-test-game=towers]) { padding-inline:max(10px,env(safe-area-inset-left)); } }
@media(max-width:430px) { #test-room:has([data-test-game=orbit]) { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); } }
@media(prefers-reduced-motion:reduce) { :is(#companion,#second-shift,#test-room) button { transition:none; } }
@media(prefers-contrast:more) {
  :root { --board-edge:light-dark(#536779,#bac8da); }
  #test-room :is(.pk-cell,.pipe-cell) { box-shadow:inset 0 0 0 1px var(--board-edge); }
  .board-region-face { stroke:var(--region); stroke-width:2; }
}