*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#061522;color:#dbffed;font-family:Segoe UI,'Yu Gothic',sans-serif;height:100%;touch-action:none}canvas{display:block;width:100%;height:100%}#top{position:absolute;left:28px;right:28px;top:22px;display:flex;justify-content:space-between;align-items:center;letter-spacing:3px;font-size:17px}#top span{font-size:10px;opacity:.6}button{font:inherit;cursor:pointer;border:1px solid #6ef3c777;background:#102a35bb;color:#d8fff0;border-radius:4px;padding:10px 18px}button:hover{background:#235b60}button:focus-visible{outline:2px solid white}.panel{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:440px;max-width:84%;background:linear-gradient(135deg,#071b2cf5,#102a37e8);padding:36px;border:1px solid #8ae6d844;box-shadow:0 20px 100px #001b31aa;border-radius:9px}.eyebrow{color:#72e8c2;letter-spacing:3px;font-size:11px}h1{font-size:38px;margin:20px 0}p{line-height:1.8;color:#c2d7df;font-size:14px}.instructions{border-top:1px solid #ffffff20;margin:24px 0;padding-top:10px}.instructions p{font-size:12px;margin:10px 0}kbd{color:#7af4cb;font-family:inherit}#start,#retry{background:#91f4cf;color:#05282b;border:0;font-weight:700;width:100%;padding:16px}#start span{float:right}small{font-size:10px} .panel>small{display:block;margin-top:16px;color:#97acb8;line-height:1.7}#paused{position:absolute;top:40%;text-align:center;width:100%;font-size:40px;letter-spacing:7px;text-shadow:0 2px 20px black}#touch{display:none;position:absolute;bottom:24px;left:22px;right:22px;justify-content:space-between;pointer-events:none}#stick{height:112px;width:112px;border-radius:50%;border:1px solid #8dffcc55;background:#05213166;display:grid;place-items:center;pointer-events:auto;font-size:12px;position:relative}#stick i{position:absolute;width:40px;height:40px;border:1px solid #8fffd3;border-radius:50%;background:#7affc322}.weapons{display:flex;gap:12px;align-items:center}.weapons button{pointer-events:auto;border-radius:50%;width:78px;height:78px;padding:0;background:#0c273bd9}#missile{border-color:#ffbe66;color:#ffdcad}[hidden]{display:none!important}@media(pointer:coarse){#touch{display:flex}}@media(max-width:600px){#top{left:15px;right:15px;top:14px;font-size:14px}#top span{display:none}.panel{padding:24px;left:8%}h1{font-size:30px}.instructions{margin:14px 0}#top button{font-size:12px;padding:8px}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#resultText{white-space:pre-line}.panel{max-height:92dvh;overflow:auto}body:not([data-state="playing"]) #touch{display:none}@media(max-height:560px){.panel{padding:18px;top:52%;max-height:90dvh}.panel h1{font-size:25px;margin:10px 0}.panel .instructions{margin:8px 0;padding-top:4px}.panel p{margin:6px 0}.panel>small{margin-top:8px}}
@media(max-width:700px){#touch{display:flex}}

#throttle{position:absolute;left:20px;top:40%;width:126px;padding:10px;background:#071e2cba;border:1px solid #87dfc23d;border-radius:6px;touch-action:none}body:not([data-state="playing"]) #throttle{display:none}.throttle-label{font-size:9px;color:#9cc1bd;letter-spacing:1px}#speedSetting{display:block;font-size:16px;color:#f8dba3;margin:6px 0}.speed-buttons{display:flex;gap:6px}.speed-buttons button{padding:7px 0;flex:1;font-size:20px;background:#143c49}#speedMatch{width:100%;padding:8px 2px;font-size:11px;margin-top:6px}#throttle small{font-size:9px;color:#9ad8c5}@media(max-width:700px){#throttle{left:12px;top:auto;bottom:168px;width:110px;padding:8px}.throttle-label{font-size:8px}#speedSetting{font-size:14px}.speed-buttons button{padding:5px 0}}@media(max-height:560px){#throttle{top:32%;bottom:auto;width:106px;padding:6px}.throttle-label{display:none}#speedMatch{padding:5px 0}}

#reverse{width:100%;padding:9px 0;margin-top:6px;font-size:10px;background:#5e332cbf;border-color:#e3997477;color:#ffd5b0}

#demoStart{margin-top:10px;width:100%;font-weight:700;padding:13px;border-color:#ffcc8866;background:#284051}#demoStart small{display:block;color:#a6c6cf;font-weight:400;margin-top:4px}#demoOverlay{display:none;position:absolute;inset:0;pointer-events:none}body[data-demo="true"] #demoOverlay{display:block}body[data-demo="true"] #throttle,body[data-demo="true"] #touch{display:none!important}.demo-badge{position:absolute;left:28px;top:76px;letter-spacing:3px;font:11px Consolas,monospace;color:#ffd8a1;background:#0c2132d9;padding:9px 12px;border-left:2px solid #ffd8a1}#demoTime{margin-left:12px;color:#c3dadf}.demo-actions{position:absolute;right:28px;top:76px;display:flex;gap:8px;pointer-events:auto}.demo-actions button{font-size:11px;padding:9px 12px}.demo-caption{position:absolute;left:50%;top:73%;transform:translate(-50%,-50%);text-align:center;width:min(600px,90%);padding:18px;background:linear-gradient(90deg,transparent,#061e32d9,transparent);text-shadow:0 2px 10px #061e32}.demo-caption>span{font-size:10px;letter-spacing:3px;color:#f6c584}.demo-caption strong{display:block;font-size:28px;letter-spacing:2px;margin:7px 0;color:#e9fff7}.demo-caption p{font-size:12px;margin:0;color:#a9cad4}.demo-progress{width:180px;height:2px;background:#b7e4d326;margin:14px auto 0}.demo-progress i{display:block;height:100%;width:0;background:#b5f7d9}body[data-recording="true"] .demo-actions,body[data-recording="true"] #top button{display:none}body[data-demo="true"] #top{pointer-events:none}body[data-demo="true"] #top button{pointer-events:auto}@media(max-width:700px){.demo-badge{left:16px;top:67px;font-size:9px;padding:7px;letter-spacing:1px}.demo-actions{right:16px;top:106px}.demo-caption{top:75%;padding:12px}.demo-caption strong{font-size:21px}.demo-caption p{font-size:10px}}
