:root { --bg:#081416; --panel:#0d2022; --panel2:#10292a; --line:#315b58; --ink:#e8f5ed; --muted:#8ea9a4; --aqua:#8be6d3; --lime:#c9ee83; --amber:#ffbd66; --red:#ff746f; --violet:#b19df0; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-width:320px; margin:0; color:var(--ink); font-family:"Cascadia Mono",Consolas,monospace; background:radial-gradient(circle at 82% -8%,rgba(44,124,112,.26),transparent 33rem),linear-gradient(180deg,#0d1d1f,#061011 76%); }
.shell { width:min(1430px,calc(100% - 32px)); margin:0 auto; padding:26px 0 16px; }
.masthead,.brief,.game-layout,footer { display:flex; }
.masthead { align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:19px; }
.eyebrow,.section-label { color:var(--aqua); font-size:.66rem; font-weight:800; letter-spacing:.13em; margin:0; }
h1 { font-size:clamp(2rem,4.2vw,3.35rem); letter-spacing:-.09em; line-height:.88; margin:8px 0 10px; }
h1 span,.title-card h2 span { color:var(--lime); }
.subtitle { color:var(--muted); font-size:.78rem; margin:0; }
.head-actions { display:flex; gap:8px; }
.button { appearance:none; border:1px solid #3b7770; background:#123134; color:var(--ink); cursor:pointer; font:800 .7rem/1 "Cascadia Mono",Consolas,monospace; letter-spacing:.04em; min-height:37px; padding:0 13px; transition:background .15s,transform .15s; }
.button:hover:not(:disabled) { background:#1b4647; transform:translateY(-1px); }.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.4}.button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}.button.primary{background:var(--lime);border-color:#e0ff9d;color:#102019}.button.primary:hover{background:#ddffad}.button.quiet{background:transparent;}
.brief { align-items:center; gap:15px; border:1px solid var(--line); border-left:3px solid var(--aqua); background:rgba(10,29,30,.87); margin-bottom:16px; padding:12px 14px; }
.brief p { color:var(--muted); flex:1 1 330px; font-size:.75rem; line-height:1.55; margin:0; }.brief p strong{color:var(--ink)}
.keys { display:flex; flex-wrap:wrap; gap:9px 12px; color:var(--muted); font-size:.6rem; }.keys span{white-space:nowrap}kbd{background:#153538;border:1px solid #39706c;color:#d8f4e9;font:inherit;margin-right:3px;padding:2px 4px}
.game-layout { align-items:flex-start; gap:16px; }.canvas-frame{background:#071213;border:1px solid #39706c;box-shadow:0 22px 48px rgba(0,0,0,.4);flex:1 1 auto;min-width:0;overflow:hidden;position:relative}canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated}
.screen-overlay{align-items:center;background:rgba(3,10,11,.72);backdrop-filter:blur(2px);display:grid;inset:0;place-items:center;position:absolute}.screen-overlay[hidden]{display:none}.overlay-card{background:#0e2426;border:1px solid #4a837c;box-shadow:0 16px 50px rgba(0,0,0,.6);padding:24px;text-align:center;width:min(405px,calc(100% - 38px))}.overlay-card h2{font-size:clamp(1.6rem,4vw,2.5rem);letter-spacing:-.08em;line-height:.9;margin:10px 0 12px}.overlay-card>p:not(.eyebrow){color:var(--muted);font-size:.75rem;line-height:1.6;margin:0 0 20px}.title-card small{color:var(--muted);display:block;font-size:.58rem;letter-spacing:.08em;margin-top:15px}.result-stats{border-left:1px solid var(--line);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;margin:20px 0}.result-stats div{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px 8px;text-align:left}.result-stats span{color:var(--muted);display:block;font-size:.56rem;margin-bottom:4px}.result-stats strong{font-size:.78rem}
.hud{display:grid;flex:0 0 288px;gap:10px;width:288px}.card{background:rgba(9,29,30,.92);border:1px solid var(--line);padding:13px}.card-heading{align-items:baseline;display:flex;justify-content:space-between;margin-bottom:9px}.card-heading strong{color:var(--amber);font-size:.65rem}.board-goal{color:var(--muted);font-size:.66rem;line-height:1.5;margin:0}.signal-status{border-top:1px solid #234a49;color:var(--aqua);font-size:.61rem;letter-spacing:.05em;margin-top:10px;min-height:20px;padding-top:9px}.signal-status.alert{color:var(--amber)}.signal-status.good{color:var(--lime)}
.meter-card{display:grid;gap:7px}.meter-line{align-items:center;color:var(--muted);display:flex;font-size:.59rem;justify-content:space-between}.meter-line strong{color:var(--ink);font-size:.68rem}.meter{background:#102b2b;border:1px solid #2a625d;height:10px;overflow:hidden}.meter i{background:linear-gradient(90deg,var(--aqua),var(--lime));display:block;height:100%;transition:width .16s;width:0}.meter i.cap{background:linear-gradient(90deg,var(--violet),#e6baff)}
.metrics{display:grid;grid-template-columns:1fr 1fr;padding:0}.metrics div{border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:50px;padding:9px 11px}.metrics div:nth-child(2n){border-right:0}.metrics div:nth-last-child(-n+2){border-bottom:0}.metrics span{color:var(--muted);display:block;font-size:.54rem;letter-spacing:.04em}.metrics strong{display:block;font-size:.77rem;margin-top:5px}.components-card{padding-bottom:10px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 6px;margin-top:10px}.legend span{align-items:center;color:var(--muted);display:flex;font-size:.58rem;gap:6px}.swatch{border:1px solid #5a8581;height:10px;width:18px}.swatch.wire{background:var(--aqua)}.swatch.diode{background:var(--lime)}.swatch.relay{background:var(--violet)}.swatch.danger{background:var(--red)}
.event-card{min-height:81px}.event-card p{color:#dbe9e2;font-size:.66rem;line-height:1.5;margin:8px 0 0}footer{color:#5e817e;font-size:.55rem;justify-content:space-between;letter-spacing:.08em;margin-top:13px;padding-bottom:6px}
@media(max-width:1080px){.game-layout{flex-direction:column}.hud{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;flex-basis:auto}.board-card{grid-row:span 2}}
@media(max-width:650px){.shell{width:min(100% - 20px,1430px);padding-top:16px}.masthead{display:block}.head-actions{margin-top:14px}.brief{align-items:flex-start;flex-direction:column}.keys{justify-content:flex-start}.hud{grid-template-columns:1fr}.board-card{grid-row:auto}footer{display:block;line-height:2}}