*{box-sizing:border-box}body{margin:0;background:#101b29;color:#edf5ed;font-family:system-ui,sans-serif;overflow:hidden}canvas{width:100vw;height:100dvh;display:block;touch-action:none}main{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,#324e4b,#101b29 70%);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;overflow:auto}h1{font-size:clamp(48px,9vw,90px);line-height:.87;letter-spacing:-5px;margin:22px}h1 span{color:#e9bc62}.badge{font-size:11px;letter-spacing:3px;color:#a4c9be}p{color:#bfcbc9}#panel{width:min(440px,100%);text-align:center}button,select,input{font:inherit;border:1px solid #6b807f;border-radius:10px;padding:12px;background:#203833;color:white;margin:5px}button{cursor:pointer}button:hover{background:#39594e}button.primary{background:#e9bc62;color:#192b2c;font-weight:bold}input{width:150px}#hud{position:absolute;top:12px;left:12px;pointer-events:none;font-size:14px;background:#102027db;border-radius:10px;padding:10px;max-width:70%}#exit{position:absolute;right:10px;top:10px;padding:7px;font-size:12px}#touch{display:none;position:absolute;inset:0;pointer-events:none}.stick{position:absolute;bottom:25px;width:100px;height:100px;border:2px solid #ffffff50;border-radius:50%;background:#ffffff12;display:grid;place-items:center;touch-action:none;pointer-events:auto}.stick.active{background:#e9bc6240}#move{left:25px}#aim{right:145px}#touch button{position:absolute;pointer-events:auto;touch-action:none;font-size:12px;padding:14px}#fire{right:15px;bottom:50px}#dash{left:130px;bottom:20px}#reload{right:15px;bottom:115px}#swap{right:145px;bottom:135px}@media(pointer:coarse){body.playing #touch{display:block}}small{display:block;color:#acbeb8;line-height:1.6}label{display:inline-block;margin:6px}