/* Results are a persistent destination, not a timed interruption. */
#success-dialog { color-scheme:light; color:#18232e; background:#fffdf5; width:min(440px,calc(100% - 24px)); max-height:calc(var(--visible-height,100dvh) - 24px); padding:22px; border:3px solid #18232e; border-radius:8px; box-shadow:5px 7px 0 #18232e; overflow:auto; }
#success-dialog::backdrop { background:#101923ba; backdrop-filter:blur(5px); }
#success-dialog[open] { animation:success-arrive .3s cubic-bezier(.18,.8,.24,1.15); }
#success-dialog .success-close { position:absolute; top:6px; right:6px; width:44px; height:44px; color:#18232e; z-index:2; }
.success-burst { position:relative; height:135px; display:grid; place-items:center; margin:6px 0 4px; isolation:isolate; }
.success-burst::before { content:''; position:absolute; inset:0; background:#ffe34b; z-index:-1; clip-path:polygon(0 35%,18% 31%,13% 4%,34% 20%,46% 0,56% 19%,79% 4%,79% 28%,100% 19%,88% 45%,100% 65%,78% 66%,86% 94%,62% 79%,52% 100%,40% 78%,18% 95%,22% 70%,0 80%,11% 53%); }
#success-dialog h2 { font:italic 900 55px/1 Arial,Helvetica,sans-serif; color:white; -webkit-text-stroke:2px #18232e; text-shadow:3px 4px 0 #18232e; transform:rotate(-5deg); margin:0; }
.success-game { margin:4px 0 16px; text-align:center; font-size:21px; line-height:1.25; font-weight:800; }
.success-game>span { display:block; font-size:12px; font-weight:500; margin-top:6px; color:#53606a; }
.success-now { display:grid; grid-template-columns:1fr 1fr; background:#18232e; color:white; border:2px solid #18232e; padding:15px 0; }
.success-now>div { display:flex; flex-direction:column; align-items:center; gap:5px; }
.success-now>div+div { border-left:1px solid #ffffff38; }
.success-now strong { font:800 32px/1.1 Arial,sans-serif; font-variant-numeric:tabular-nums; }
.success-now span { font-size:11px; text-transform:uppercase; }
.success-averages { width:100%; border-collapse:collapse; margin-top:14px; font-size:16px; }
.success-averages caption { text-align:left; font-size:15px; font-weight:800; margin:2px 0 12px; }
.success-averages th,.success-averages td { padding:9px 4px; border-bottom:1px solid #c7cbd0; text-align:right; font-variant-numeric:tabular-nums; }
.success-averages th:first-child { text-align:left; }
.success-averages thead { font-size:11px; color:#54616a; }
.success-averages tbody th { font-size:13px; }
.success-averages small { display:block; font-size:10px; font-weight:400; color:#54616a; margin-top:3px; }
.success-note { font-size:10px; line-height:15px; color:#54616a; margin:9px 0 14px; }
.success-actions { display:grid; gap:10px; }
.success-actions button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:47px; border:2px solid #18232e; border-radius:6px; font-size:14px; font-weight:750; color:#18232e; box-shadow:0 3px 0 #18232e; background:white; }
.success-actions svg { width:18px; height:18px; }
.success-actions .success-share { background:#ffe34b; }
.success-actions .success-next { background:#18232e; color:white; }
.success-actions .success-home { box-shadow:none; border-color:#c7cbd0; background:transparent; }
.success-unlock { color:#53606a; font-size:12px; line-height:18px; text-align:center; margin:3px 0; }
.success-share-status { margin:10px 0 0; min-height:0; font-size:11px; color:#53606a; }
.success-share-status:empty { display:none; }
@keyframes success-arrive { from { transform:scale(.86) rotate(-2deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }

/* Illustrated game pieces: one line weight and no icon-library fallbacks. */
#companion .comic-object { width:90%; height:90%; overflow:visible; filter:drop-shadow(1px 2px 0 #18232e18); }
#companion[data-game=shelf] :is(.bank-item,.target-slot) { background:var(--piece-face); border:1.5px solid light-dark(#abb5be,#8393a4); }
#companion[data-game=shelf] .target-slot:not(.occupied) { background:light-dark(#edf0f1,#2c343c); }
#companion[data-game=shelf] .shelf-position:nth-child(n) .target-slot:not(.occupied) { background:light-dark(#edf0f1,#2c343c); }
#companion[data-game=shelf] .shelf-position { border-bottom:3px solid light-dark(#5a6974,#a6b6c2); }
#companion[data-game=shelf] .bank-item.used { background:transparent; border-style:dashed; }
#companion[data-game=patchwork] .patch-board .target-slot { border:2px solid #18232e; background:light-dark(#edf0f1,#2c343c); border-radius:5px; }
#companion[data-game=patchwork] .patch-target>svg { border:2px solid #18232e; box-shadow:3px 3px 0 #18232e; }
#companion[data-game=patchwork] .bank-item { border:2px solid #18232e; }
#companion[data-game=patchwork] .patch-stage { grid-template-columns:minmax(82px,.36fr) minmax(0,1fr); gap:15px; }
#companion[data-game=patchwork] .patch-target figcaption { font-weight:750; color:var(--ink); }

/* Equal is typeset as equations, with named, high-contrast operators. */
#companion[data-game=equal] .equations { padding:8px 0 14px; gap:12px; }
#companion[data-game=equal] .equation { position:relative; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 22px 50px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
#companion[data-game=equal] .equation .target-slot { height:61px; min-height:0; border:2px solid #18232e; border-radius:5px; background:var(--piece-face); box-shadow:2px 3px 0 #18232e; }
#companion[data-game=equal] .equation .target-slot:not(.occupied) { background:light-dark(#f4f5f5,#29313a); }
#companion[data-game=equal] .slot-number { color:var(--muted); opacity:.5; font-size:22px; }
#companion[data-game=equal] .number-value { font:900 28px/1 Arial,Helvetica,sans-serif; color:#18232e; }
#companion[data-game=equal] .math-operation { width:52px; height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#18232e; background:#ffe34b; border:2px solid #18232e; border-radius:6px; box-shadow:2px 3px 0 #18232e; transform:rotate(-3deg); }
#companion[data-game=equal] .math-operation b { font:900 31px/31px Arial,sans-serif; }
#companion[data-game=equal] .math-operation small { font-size:9px; line-height:14px; font-weight:750; }
#companion[data-game=equal] .math-equals { font:800 22px/1 Arial,sans-serif; color:var(--ink); }
#companion[data-game=equal] .equation-target { background:none; box-shadow:none; border:0; font:900 29px/1 Arial,sans-serif; color:var(--ink); }
#companion[data-game=equal] .equation-state { position:absolute; right:17px; bottom:0; width:14px; height:14px; }
#companion[data-game=equal] .equation-state svg { width:12px; height:12px; }
#companion[data-game=equal] .bank-item { height:53px; border:2px solid #18232e; border-radius:5px; box-shadow:1px 3px 0 #18232e; }
#companion[data-game=equal] .comp-bank { gap:9px; }
#companion[data-game=equal] .equation.satisfied .equation-target { color:var(--action); }
#companion[data-game=equal] .equation.violated .equation-target { color:var(--board-error); }

/* Second Shift: a compact, dark industrial work surface. */
#second-shift { background:#101c22; --surface:#101c22; --ink:#ecf2ef; --muted:#a2b7be; --line:#344953; --action:#d5ec69; --action-ink:#14252c; --game-color:#d5ec69; --ss-dark:#0c171c; padding-inline:max(14px,env(safe-area-inset-left)); }
#second-shift { color:var(--ink); }
#second-shift .header { border-color:#344953; }
#second-shift .brand .eyebrow { display:none; }
#second-shift h1 { font-size:20px; font-weight:750; }
#second-shift .icon-button { color:#ecf2ef; }
#second-shift .puzzle-context { border-color:#344953; }
#second-shift .puzzle-context :is(strong,.play-timer) { color:#d5ec69; }
#second-shift .ss-studio-tile { fill:#1b2d36; stroke:#334a56; stroke-width:1; }
#second-shift .ss-machine-name { font-size:6px; font-weight:800; fill:#b4c9c9; }
#second-shift .ss-actor-label { font-size:7px; fill:#e7f1ef; }
#second-shift .ss-worker { filter:none; }
#second-shift .ss-target-outline { stroke:transparent; fill:transparent; }
#second-shift .ss-station.in-reach .ss-target-outline { stroke:#d5ec69; stroke-dasharray:none; }
#second-shift .ss-take { padding-block:10px; gap:10px; }
#second-shift .ss-phase { font-size:12px; }
#second-shift .ss-steps { display:grid; grid-template-columns:repeat(7,24px); gap:3px; max-width:none; overflow:visible; }
#second-shift .ss-beat { width:24px; height:24px; border-radius:3px; border:1px solid #3e5963; background:#162830; }
#second-shift .ss-beat.filled { background:#d4e5e4; color:#152830; box-shadow:none; }
#second-shift .ss-beat.next { border:2px solid #55cbd8; background:#23434d; }
#second-shift .ss-log { gap:5px; margin-bottom:10px; }
#second-shift .ss-log>span { border-color:#55cbd8; background:#18323a; padding:7px 9px; border-radius:0; }
#second-shift .ss-log>span.you { border-color:#d5ec69; background:#27352a; }
#second-shift .ss-pad { gap:7px; margin-bottom:12px; }
#second-shift .ss-pad .icon-button { width:49px; height:46px; background:#233944; color:#e7f1ef; border:1px solid #48616e; border-radius:5px; box-shadow:0 2px 0 #071116; }
#second-shift .ss-command .primary-button { background:#d5ec69; color:#13272b; border:0; box-shadow:none; border-radius:5px; font-weight:750; }
#second-shift .ss-next-mark { stroke:#55cbd8; }

/* Direct letter play; no wheel, spin state, or gambling-style scores. */
#test-room .notwof-score { display:flex; align-items:center; justify-content:space-between; padding:8px 0 16px; border-bottom:2px solid var(--ink); }
.notwof-score>div { display:flex; align-items:baseline; gap:8px; }
.notwof-score strong { font:900 38px/1 Arial,sans-serif; }
.notwof-score span { font-size:11px; font-weight:650; }
.notwof-category { text-align:center; font-size:12px; color:var(--muted); margin:22px 0 12px; }
#test-room [data-test-game=phrase] .phrase-board { padding:15px 0 28px; min-height:190px; gap:13px 18px; }
#test-room [data-test-game=phrase] .phrase-board span { border:1.5px solid var(--board-edge); background:light-dark(#e6ebef,#253341); }
#test-room [data-test-game=phrase] .phrase-board span.revealed { background:var(--piece-face); border-color:var(--piece-ink); box-shadow:0 3px 0 var(--piece-ink); }
.notwof-letter-values { display:flex; justify-content:space-between; font-size:11px; padding:14px 0; border-top:1px solid var(--line); }
.notwof-letter-values b { display:block; margin-top:3px; font-size:13px; }
#test-room [data-test-game=phrase] .lab-keyboard { gap:8px; margin:6px 0 20px; }
#test-room [data-test-game=phrase] .lab-keyboard button { min-height:44px; border:1.5px solid var(--piece-ink); font-weight:750; }
#test-room [data-test-game=phrase] .lab-keyboard .is-vowel:not(:disabled) { background:#ffe34b; }
.notwof-solve { display:flex; justify-content:center; }
.notwof-solve button { min-height:46px; width:100%; }

/* Distinct placement and exclusion marks. */
#test-room .towers-board.mark-mode { touch-action:none; }
#test-room .tower-cell .tower-piece { width:100%; height:100%; filter:none; }
#test-room .tower-cross { width:11px; height:11px; opacity:.8; color:#243142; }
#test-room .tower-cross::before,#test-room .tower-cross::after { background:#243142; height:2px; }

#test-room .orbit-board .pk-cell { background:light-dark(#edf0f5,#182731); }
#test-room .orbit-board .orbit-highlight { background:light-dark(#dcebf0,#29414a); }
#test-room .orbit-board .pk-cell.conflict { background:var(--board-pink); }
#test-room .orbit-board svg { width:100%; height:100%; filter:none; }

#test-room .bridges-board { background:light-dark(#eef3f5,#1d2b35); border:1px solid var(--board-edge); border-radius:6px; }
.bridge-guide { fill:none; stroke:var(--board-edge); stroke-width:2; stroke-dasharray:2 8; stroke-linecap:round; }
.castle-depth { fill:#758895; }
.castle-face { fill:#edf1ee; stroke:#4f6575; stroke-width:1.5; }
.castle-stone { fill:none; stroke:#aab9c1; stroke-width:1; }
#test-room .bridge-node text { fill:#1c3546; font-weight:850; }
#test-room .bridge-node.complete .castle-face { fill:#cce9d6; stroke:#337b5a; }
#test-room .bridge-node.conflict .castle-face { fill:#f9d1d5; stroke:#ae3b50; }
#test-room .bridge-node:is(.complete,.conflict) text { fill:#1c3546; }

#test-room .pk-cell.signal-wall { padding:0; background:var(--piece-face); border:0; box-shadow:none!important; }
#test-room .signal-number { box-sizing:border-box; width:100%; height:100%; min-height:0; margin:0; background:var(--piece-face); border:3px solid #101820; border-radius:0; box-shadow:none; color:#be314c; font-weight:850; font-size:24px; }
#test-room .signal-wall.satisfied .signal-number { color:#147a42; border-color:#101820; }
#test-room .signal-number:empty { background:light-dark(#dce1e5,#3d4c5d); }

#test-room .district-center svg { width:100%; height:100%; display:block; filter:none; }
#test-room .district-center { padding:0; box-shadow:inset 0 0 0 1px #172333!important; }
#test-room .district-map .board-region-face { stroke-width:1.5; }
#test-room [data-test-game=districts] .pk-palette button { padding:0; width:49px; height:49px; min-height:0; overflow:hidden; border:2px solid var(--board-edge); border-radius:4px; }
#test-room [data-test-game=districts] .pk-palette button svg { width:100%; height:100%; }

/* Blue optics: quiet hardware, bright beam, no full-screen strobe. */
#test-room:has([data-test-game=laser]) { --action:light-dark(#166fc3,#85caff); --action-ink:light-dark(#fff,#12263b); }
#test-room .laser-board { background:#101f2d; border:1px solid #466078; }
#test-room .laser-board .pk-cell { background:#101f2d; box-shadow:inset 0 0 0 .5px #314456; }
#test-room .laser-board .pk-cell:disabled { box-shadow:inset 0 0 0 .5px #314456!important; }
#test-room .laser-board .laser-mirror { background:#162c3f; }
#test-room .laser-mirror svg { width:96%; height:96%; filter:none; }
#test-room .laser-mirror svg circle { fill:none; stroke:#718b9c; }
#test-room .laser-mirror .optic-base { fill:#223b50; stroke:#49677e; stroke-width:1.5; }
#test-room .laser-target { fill:#1c3348; stroke:#678ca9; stroke-width:2; }
#test-room .target-core { fill:#365575; stroke:#7597b5; stroke-width:1.5; }
#test-room .laser-lit .laser-target { fill:#244c6e; stroke:#7ed4ff; }
#test-room .laser-lit .target-core { fill:#c4f2ff; stroke:#e7fbff; filter:drop-shadow(0 0 4px #34a6ff); }
#test-room .laser-board .target-order { fill:#152b3f; }
#test-room .laser-lit .target-order { fill:#152b3f; }
#test-room .laser-beam { overflow:visible; filter:none; pointer-events:none; }
.beam-halo { fill:none; stroke:#158aff; stroke-width:16; stroke-linecap:round; opacity:.28; filter:blur(3px); }
.beam-core { fill:none; stroke:#8fe3ff; stroke-width:3; stroke-linecap:round; }
.beam-electric { fill:none; stroke:#edfaff; stroke-width:1.5; stroke-linejoin:round; stroke-dasharray:13 7 3 19; animation:laser-charge .85s linear infinite; }
body:has(dialog[open]) .beam-electric { animation-play-state:paused; }
@keyframes laser-charge { to { stroke-dashoffset:-42; } }
@media(max-width:390px) { #companion[data-game=equal] .equation { gap:5px; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 18px 45px; } #companion[data-game=equal] .math-operation { width:48px; } #success-dialog h2 { font-size:49px; } }
@media(max-height:750px) { #success-dialog { padding:17px; } .success-burst { height:110px; } .success-now { padding:10px 0; } .success-averages { margin-top:9px; } .success-averages th,.success-averages td { padding-block:6px; } #companion[data-game=equal] .equation { padding-block:5px; } #companion[data-game=equal] .equations { gap:7px; } }
@media(prefers-reduced-motion:reduce) { #success-dialog[open],.beam-electric { animation:none; } }