:root{color-scheme:dark;--bg:#11151c;--panel:#191f28;--line:#303a48;--muted:#8995a5;--white:#eef3f8;--cyan:#69e5d0;--orange:#ff9d6c}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -25%,#25303d 0,#11151c 60%);color:var(--white);font-family:'Space Grotesk',sans-serif;min-height:100vh;display:grid;place-items:center;padding:24px}.shell{width:min(1100px,100%)}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.brand{display:flex;align-items:center;gap:12px;min-width:220px}.brand-mark{height:42px;width:42px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan);font-size:24px;font-weight:700;clip-path:polygon(50% 0,100% 100%,0 100%)}.brand h1{font-size:15px;line-height:1;margin:0;letter-spacing:.14em}.brand p{font:10px 'DM Mono',monospace;letter-spacing:.19em;color:var(--muted);margin:6px 0 0}.readout{display:grid;grid-template-columns:auto auto;column-gap:13px;align-items:center;padding:8px 14px;border-left:1px solid var(--line);border-right:1px solid var(--line);min-width:280px}.eyebrow{font:9px 'DM Mono',monospace;letter-spacing:.16em;color:var(--muted)}.readout .eyebrow{grid-column:1/3}.readout strong{font-size:14px;letter-spacing:.12em;color:var(--cyan)}.readout #timer{font:11px 'DM Mono',monospace;color:#bbc6d2;justify-self:end}.actions{display:flex;gap:8px}button{font:600 11px 'Space Grotesk',sans-serif;color:#10161b;background:var(--cyan);border:0;padding:11px 13px;border-radius:4px;cursor:pointer;transition:transform .15s,filter .15s}button:hover{filter:brightness(1.1);transform:translateY(-1px)}button.secondary{background:#27323e;color:var(--white);border:1px solid #3b4857}kbd{font:9px 'DM Mono',monospace;border:1px solid #617080;border-radius:3px;padding:2px 4px;margin-left:7px;color:#aeb9c6}.game-wrap{position:relative;border:1px solid #35414f;background:#121923;box-shadow:0 22px 70px #0008;overflow:hidden}.game-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:16/10;cursor:crosshair}.corner-label{position:absolute;left:16px;top:14px;font:9px 'DM Mono',monospace;letter-spacing:.16em;color:#758496;pointer-events:none}.corner-label span{color:var(--cyan);padding:0 5px}.toast{position:absolute;top:14px;left:50%;transform:translate(-50%,-8px);padding:8px 13px;border:1px solid #5a6978;background:#121923df;color:var(--white);font:10px 'DM Mono',monospace;letter-spacing:.09em;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.dead{position:absolute;inset:0;background:#090d12c9;display:grid;place-items:center}.dead[hidden]{display:none}.dead-card{text-align:center;padding:30px;background:#171e27;border:1px solid #495564;box-shadow:0 10px 40px #0009}.dead-card h2{font-size:32px;letter-spacing:.14em;margin:10px 0}.dead-card p{font-size:12px;color:var(--muted);margin:0 0 20px}.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 2px;color:#b6c0cb}.foot>div{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.foot .eyebrow{margin-right:1px}.foot span:not(.eyebrow){font-size:10px}.foot kbd{margin:0 2px}.foot p{font:10px 'DM Mono',monospace;color:#788595;margin:0;text-align:right}
@media(max-width:700px){body{padding:12px}.topbar{height:auto;min-height:70px;flex-wrap:wrap}.brand{min-width:140px}.readout{min-width:0;border-right:0;margin-left:auto}.actions{width:100%;justify-content:flex-end}.game-wrap canvas{aspect-ratio:4/3}.foot{align-items:flex-start;flex-direction:column}.foot p{text-align:left}.foot>div{gap:9px}}