:root{--void: #04050c;--panel: #0a0d18;--ink: #e6edf5;--dim: #8b96ad;--left: #22d3ee;--right: #e879f9}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--void);color:var(--ink);font-family:SF Mono,ui-monospace,Menlo,monospace;overflow:hidden}.hands-demo{position:fixed;top:0;right:0;bottom:0;left:0}.cam-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.cam-wrap video,.cam-wrap canvas{position:absolute;max-width:min(92vw,960px);max-height:80vh;border-radius:8px}.cam-wrap video{transform:scaleX(-1);opacity:.5}.cam-wrap canvas{z-index:2}.demo-head{position:absolute;top:16px;left:16px;right:16px;z-index:5}.demo-head h1{font-size:16px;letter-spacing:.2em;text-transform:uppercase}.demo-head p{margin-top:6px;font-size:12px;color:var(--dim);max-width:60ch}.demo-head code{color:var(--ink)}.demo-status{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px;font-size:13px;z-index:5}.hand-status.left{color:var(--left)}.hand-status.right{color:var(--right)}.boot-status{color:var(--dim)}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:block}.debug-hud{position:fixed;top:14px;left:50%;transform:translate(-50%);font-size:14px;letter-spacing:.08em;color:var(--ink);text-shadow:0 0 8px rgba(120,200,255,.6);z-index:20;white-space:nowrap}.menu{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:30;background:radial-gradient(ellipse at center,#04050c40,#04050cc7)}.menu-title{font-size:42px;letter-spacing:.35em;text-shadow:0 0 24px rgba(34,211,238,.8)}.menu-sub{color:var(--dim);font-size:13px}.menu-cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.menu-card{display:flex;flex-direction:column;gap:8px;width:240px;padding:18px;background:#0a0d18d9;border:1px solid rgba(34,211,238,.35);border-radius:10px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}.menu-card:hover,.menu-card.hand-hover{border-color:var(--left);box-shadow:0 0 18px #22d3ee59;transform:translateY(-2px)}.mc-name{font-size:18px;letter-spacing:.1em}.mc-par{color:var(--dim);font-size:12px}.mc-best{color:var(--left);font-size:12px}.mc-board{color:var(--dim);font-size:11px;min-height:2.6em;white-space:pre-line}.menu-cursor{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--ink);border-radius:50%;box-shadow:0 0 10px #e6edf5cc;pointer-events:none;z-index:60;transition:opacity .12s}.menu-cursor.closed{background:var(--ink)}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20}.hud-timer{position:absolute;top:14px;left:50%;transform:translate(-50%);font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:.1em;text-shadow:0 0 12px rgba(120,200,255,.7)}.hud-cp{position:absolute;top:52px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:.25em;color:var(--dim)}.hud-speed{position:absolute;bottom:18px;left:50%;transform:translate(-50%);width:220px;height:4px;background:#8b96ad40;border-radius:2px;overflow:hidden}.hud-speed-fill{height:100%;width:0;background:linear-gradient(90deg,var(--left),var(--right));transition:width 80ms linear}.hud-countdown{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:96px;letter-spacing:.2em;text-shadow:0 0 40px rgba(34,211,238,.9);opacity:0;transition:opacity .15s}.hud-countdown.open{opacity:1}.hud-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none}.hud-flash.on{animation:hudflash .4s ease-out}@keyframes hudflash{0%{opacity:.55}to{opacity:0}}.hud-finish{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:10px;padding:28px 44px;background:#0a0d18eb;border:1px solid rgba(57,255,136,.5);border-radius:12px;box-shadow:0 0 30px #39ff8840;pointer-events:auto}.hud-finish.open{display:flex}.hud-finish-title{font-size:14px;letter-spacing:.4em;color:#39ff88}.hud-finish-time{font-size:44px;font-variant-numeric:tabular-nums}.hud-finish-sub{font-size:13px;color:var(--dim)}.hud-finish-btns{display:flex;gap:12px;margin-top:8px}.hud-initials{display:flex;gap:10px}.hud-slot{width:42px;height:52px;display:grid;place-items:center;font-size:30px;border:1px solid rgba(139,150,173,.4);border-radius:6px}.hud-slot.filled{border-color:var(--left);box-shadow:0 0 10px #22d3ee4d}.hud-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:380px}.hud-key{font:inherit;font-size:15px;color:var(--ink);background:#22d3ee14;border:1px solid rgba(139,150,173,.35);border-radius:6px;padding:8px 0;cursor:pointer}.hud-key:hover,.hud-key.hand-hover{border-color:var(--left);box-shadow:0 0 10px #22d3ee66}.hud-key-wide{grid-column:span 2}.hud-board{display:flex;flex-direction:column;gap:3px;font-size:15px;font-variant-numeric:tabular-nums;white-space:pre;color:var(--dim)}.hud-board-row.you{color:#39ff88;text-shadow:0 0 8px rgba(57,255,136,.6)}.hud-btn{font:inherit;font-size:14px;letter-spacing:.1em;color:var(--ink);background:#22d3ee1f;border:1px solid rgba(34,211,238,.5);border-radius:8px;padding:10px 22px;cursor:pointer;transition:box-shadow .12s,border-color .12s}.hud-btn:hover,.hud-btn.hand-hover{border-color:var(--left);box-shadow:0 0 14px #22d3ee66}.settings-btn{position:fixed;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;color:var(--dim);background:#0a0d18b3;border:1px solid rgba(139,150,173,.3);border-radius:8px;cursor:pointer;z-index:40}.settings-btn:hover{color:var(--ink);border-color:var(--left)}.settings-btn svg{width:20px;height:20px}.settings-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;opacity:0;pointer-events:none;transition:opacity .16s;z-index:48}.settings-scrim.open{opacity:1;pointer-events:auto}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);padding:18px;background:var(--panel);border-left:1px solid rgba(34,211,238,.3);transform:translate(100%);transition:transform .2s ease-out;z-index:50;display:flex;flex-direction:column;gap:16px}.settings-panel.open{transform:translate(0)}.settings-head{display:flex;justify-content:space-between;align-items:center}.settings-title{letter-spacing:.2em;text-transform:uppercase;font-size:13px}.settings-close{width:32px;height:32px;display:grid;place-items:center;color:var(--dim);background:none;border:none;cursor:pointer}.settings-close:hover{color:var(--ink)}.settings-close svg{width:18px;height:18px}.settings-row{display:flex;flex-direction:column;gap:6px;font-size:13px}.settings-row label{color:var(--dim)}.settings-row select{font:inherit;color:var(--ink);background:#04050ccc;border:1px solid rgba(139,150,173,.35);border-radius:6px;padding:8px}.cam-preview{position:fixed;left:14px;bottom:14px;width:160px;height:120px;border:1px solid rgba(139,150,173,.35);border-radius:6px;overflow:hidden;z-index:15;background:#04050c99}.cam-preview canvas{width:100%;height:100%;display:block}.reticle{position:fixed;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid;border-radius:50%;opacity:0;transition:opacity .12s;pointer-events:none;z-index:10}.reticle.left{border-color:var(--left);box-shadow:0 0 12px var(--left)}.reticle.right{border-color:var(--right);box-shadow:0 0 12px var(--right)}.reticle.present{opacity:1}.reticle.locked{border-radius:4px}.reticle.firing.left{background:var(--left)}.reticle.firing.right{background:var(--right)}