:root{--red:#e0312b;--blue:#2b6fe0;--ink:#1b1b1d;--paper:#f6f6f4;--muted:#6b6b70;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--paper);height:100%;margin:0;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}.title{background:linear-gradient(135deg, #e0312b14, transparent 40%), linear-gradient(315deg, #2b6fe014, transparent 40%), var(--paper);place-items:center;display:grid;position:absolute;inset:0}.card{gap:14px;width:min(420px,100vw - 32px);display:grid}.card h1{letter-spacing:.04em;margin:0 0 6px;font-size:56px;font-weight:800}.card h1 span{color:var(--red)}.card h1 span+span{color:var(--blue)}.card label{color:var(--muted);gap:6px;font-size:13px;display:grid}.card input{font:inherit;background:#fff;border:1px solid #d0d0d0;border-radius:8px;padding:10px 12px;font-size:18px}.card button,.menu button{font:inherit;border:1px solid var(--ink);color:var(--ink);cursor:pointer;background:#fff;border-radius:8px;padding:12px 16px;font-size:17px;font-weight:600}.card button.primary{background:var(--ink);color:#fff}.card button:disabled{opacity:.5;cursor:wait}.row{grid-template-columns:1fr auto;gap:8px;display:grid}.row input{text-transform:uppercase;letter-spacing:.2em}.message{min-height:1.4em;color:var(--red);font-size:14px}.hint{color:var(--muted);font-size:13px}.hud{font-variant-numeric:tabular-nums;position:absolute;inset:0;pointer-events:none!important}.hud .top{background:#ffffffd9;border-radius:10px;align-items:center;gap:10px;padding:6px 14px;font-size:22px;font-weight:700;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.hud .score-red{color:var(--red)}.hud .score-blue{color:var(--blue)}.hud .timer{text-align:center;min-width:56px;color:var(--ink)}.hud .status{color:#fff;white-space:nowrap;background:#1b1b1dc7;border-radius:8px;padding:6px 14px;font-size:16px;position:absolute;top:64px;left:50%;transform:translate(-50%)}.hud .status:empty{display:none}.hud .crosshair{border:2px solid #1b1b1dbf;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%}.hud .corner{background:#ffffffd9;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.5;position:absolute;bottom:12px;left:12px}.hud .corner .red{color:var(--red)}.hud .corner .blue{color:var(--blue)}.hud .warning{color:#fff;background:#e0312be6;border-radius:8px;padding:6px 10px;font-size:13px;position:absolute;top:12px;right:12px}.hud .warning:empty{display:none}.hud .results{background:#fffffff0;border-radius:12px;min-width:300px;padding:18px 24px;font-size:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud .results:empty{display:none}.hud .results h2{margin:0 0 8px}.hud .results table{border-collapse:collapse;width:100%}.hud .results td{padding:2px 6px}.hud .white{opacity:0;background:#fff;position:absolute;inset:0}.menu{background:#f6f6f4b3;place-items:center;display:grid;position:absolute;inset:0}.menu>div{gap:10px;min-width:260px;display:grid}.menu h2{margin:0}.click-to-play{color:#fff;pointer-events:none;background:#1b1b1dc7;border-radius:8px;padding:8px 14px;font-size:15px;position:absolute;bottom:18%;left:50%;transform:translate(-50%)}html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body.touch-mode.playing{touch-action:none}body.touch-mode{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body.touch-mode input{-webkit-user-select:text;user-select:text}#scene{touch-action:none}.touch{position:absolute;inset:0;pointer-events:none!important}.touch>*{pointer-events:auto}.touch-layer{touch-action:none;position:absolute;inset:0}.stick{left:calc(110px + env(safe-area-inset-left));top:calc(100% - 110px - env(safe-area-inset-bottom));pointer-events:none;opacity:.55;background:#1b1b1d1a;border:2px solid #1b1b1d40;border-radius:50%;place-items:center;width:128px;height:128px;margin:-64px 0 0 -64px;transition:opacity .15s;display:grid;position:absolute}.stick.active{opacity:1;transition:none}.stick-knob{background:#1b1b1d8c;border-radius:50%;width:56px;height:56px}.touch-button{letter-spacing:.04em;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;font-weight:800;display:grid;position:absolute}.touch-button.fire{right:calc(36px + env(safe-area-inset-right));bottom:calc(44px + env(safe-area-inset-bottom));color:#fff;background:#e0312bd1;width:104px;height:104px;font-size:18px;box-shadow:0 4px 14px #0000002e}.touch-button.fire.active{background:#b01e19f2;transform:scale(.94)}.touch-button.jump{right:calc(48px + env(safe-area-inset-right));bottom:calc(164px + env(safe-area-inset-bottom));width:80px;height:80px;color:var(--ink);background:#ffffffd9;border:2px solid #1b1b1d4d;font-size:13px}.touch-button.jump.active{background:var(--ink);color:#fff;transform:scale(.94)}.touch-button.crouch{right:calc(160px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));width:72px;height:72px;color:var(--ink);background:#ffffffd1;border:2px solid #1b1b1d4d;font-size:11px}.touch-button.crouch.active{background:var(--ink);color:#fff}.touch-menu{top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:48px;height:48px;color:var(--ink);background:#ffffffd9;border:none;border-radius:10px;font-size:24px;position:absolute}.touch-help{color:#fff;background:#1b1b1dd1;border-radius:12px;padding:14px 20px;font-size:18px;line-height:1.6;transition:opacity .4s;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);pointer-events:none!important}.touch-help.hidden{opacity:0}.rotate{background:var(--paper);text-align:center;place-items:center;padding:24px;font-size:20px;font-weight:600;display:none;position:absolute;inset:0}@media (orientation:portrait) and (max-width:600px){.rotate{display:grid}}body.touch-mode .hud .corner{bottom:auto;top:calc(12px + env(safe-area-inset-top));font-size:12px}body.touch-mode .hud .click-to-play{display:none!important}@media (max-height:500px){.title{place-items:start center;padding:12px 0;overflow-y:auto}.card{gap:8px}.card h1{margin:0;font-size:34px}.card button,.card input{padding:8px 12px;font-size:16px}}.menu .menu-card{background:#fffffff5;border-radius:14px;width:min(420px,100vw - 32px);max-height:calc(100vh - 24px);padding:20px 22px;overflow-y:auto;box-shadow:0 10px 30px #00000026}.menu button.primary{background:var(--ink);color:#fff}.menu .setting{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:15px;display:grid}.menu .setting.check{grid-template-columns:auto 1fr}.menu .setting input[type=range]{width:100%}.menu .setting input[type=checkbox]{width:20px;height:20px}.menu .value{text-align:right;font-variant-numeric:tabular-nums;min-width:48px}.menu .controls{border-collapse:collapse;width:100%;font-size:14px}.menu .controls th{text-align:left;color:var(--muted);white-space:nowrap;vertical-align:top;padding:3px 10px 3px 0;font-weight:600}.menu .controls td{padding:3px 0}.hud .scoreboard{background:#fffffff2;border-radius:12px;min-width:320px;padding:16px 22px;font-size:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud .scoreboard:empty{display:none}.hud .scoreboard h2{margin:0 0 8px;font-size:18px}.hud .scoreboard table{border-collapse:collapse;width:100%}.hud .scoreboard th,.hud .scoreboard td{text-align:left;padding:2px 8px}.hud .scoreboard .red{color:var(--red)}.hud .scoreboard .blue{color:var(--blue)}