*{box-sizing:border-box}html,body{color:#3f6;background:#000;height:100%;margin:0;font-family:Courier New,ui-monospace,monospace;overflow:hidden}canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#hud{pointer-events:none}.screen{text-shadow:0 0 6px #3f6,0 0 18px #1a5;background:#0000008c;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0}.hidden{display:none}h1{letter-spacing:.25em;color:#0000;-webkit-text-stroke:2px #3f6;text-shadow:0 0 12px #3f6,0 0 40px #1a5;margin:0;font-size:clamp(48px,11vw,128px);font-weight:700}h2{letter-spacing:.2em;margin:0;font-size:56px}.sub{letter-spacing:.3em;opacity:.8;font-size:13px}.panel{border:1px solid #3f6;grid-template-columns:repeat(3,auto);gap:10px 28px;padding:16px 22px;display:grid;box-shadow:inset 0 0 12px #1a5}.panel label{letter-spacing:.15em;flex-direction:column;gap:4px;font-size:12px;display:flex}input,select,button{font:inherit;color:#3f6;text-transform:uppercase;background:#000;border:1px solid #3f6;outline:none;padding:4px 8px}input:focus,select:focus{box-shadow:0 0 8px #3f6}button{letter-spacing:.4em;cursor:pointer;text-shadow:inherit;padding:8px 36px 8px 44px;font-size:22px}button:hover{color:#000;background:#3f6}.controls{opacity:.75;margin:4px 0 0;font-size:12px;line-height:1.5}#over-board{font-size:18px;line-height:1.6}.blink{letter-spacing:.3em;animation:1.1s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}html,body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.row{gap:16px;display:flex}.hint{letter-spacing:.2em;opacity:.6;font-size:12px}.touch-help{letter-spacing:.15em;opacity:.8;text-align:center;padding:0 12px;font-size:12px;display:none}body.touch .controls,body.touch .hint,body.touch .blink{display:none}body.touch .touch-help{display:block}#touch{pointer-events:none;position:fixed;inset:0}#touch.hidden{display:none}#touch>*{pointer-events:auto}.t-stickzone{width:46%;position:absolute;top:18%;bottom:0;left:0}.t-base{opacity:0;border:2px solid #33ff6680;border-radius:50%;width:124px;height:124px;margin:-62px 0 0 -62px;transition:opacity .1s;position:absolute;box-shadow:inset 0 0 12px #33ff664d}.t-knob{background:#33ff6640;border:2px solid #3f6;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%}.t-btn{letter-spacing:.1em;color:#3f6;touch-action:none;background:#001e0a59;border:2px solid #33ff66b3;border-radius:50%;padding:0;font-size:14px;font-weight:700;position:absolute}.t-btn:hover{color:#3f6;background:#001e0a59}.t-btn.down{color:#000;background:#33ff6673}.t-fire{right:calc(24px + env(safe-area-inset-right));color:#f35;border-color:#f35;width:96px;height:96px;font-size:16px;bottom:28px}.t-fire.down{color:#000;background:#ff335580}.t-msl{right:calc(132px + env(safe-area-inset-right));width:64px;height:64px;bottom:22px}.t-tgt{right:calc(124px + env(safe-area-inset-right));width:56px;height:56px;bottom:100px}.t-throttle{right:calc(212px + env(safe-area-inset-right));background:#001e0a59;border:2px solid #33ff66b3;align-items:flex-end;width:42px;height:30vh;max-height:150px;display:flex;position:absolute;bottom:24px}.t-fill{background:#3f66;width:100%}.t-throttle span{text-align:center;font-size:11px;position:absolute;top:-18px;left:0;right:0}.t-top{gap:10px;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}.t-small{border-radius:4px;width:auto;height:34px;padding:0 14px;font-size:12px;position:static}#rotate{z-index:10;letter-spacing:.3em;text-shadow:0 0 8px #3f6;background:#000;justify-content:center;align-items:center;display:none;position:fixed;inset:0}@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}@media (height<=500px){.screen{gap:8px}h1{font-size:48px}h2{font-size:34px}.panel{gap:6px 16px;padding:10px 14px}button{padding:6px 28px 6px 34px;font-size:18px}#over-board{font-size:14px}}
