:root{color-scheme:dark;font-family:Tahoma,Arial,sans-serif;background:#080b16;color:#f4f7ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 10%,#251c49,transparent 55%);min-height:100vh}header{padding:24px 6%;border-bottom:1px solid #ffffff18;display:flex;justify-content:space-between;align-items:center}header b{font-size:25px;letter-spacing:4px}em{color:#00e5ff;font-style:normal}header span,small{color:#a4a9c4;font-size:12px}main{max-width:1200px;margin:auto;padding:32px}h1{font-size:clamp(32px,6vw,64px);margin:25px 0}p{color:#a4a9c4;line-height:1.8}label{display:block;margin:18px 0}input,select{padding:12px;background:#141a2c;border:1px solid #464065;border-radius:9px;color:white;margin:8px;max-width:100%}button{font:inherit;cursor:pointer;border:1px solid #8b5cff;background:#24203d;color:white;border-radius:12px;padding:15px 24px;min-height:48px}button:hover{background:#433063}button:focus-visible{outline:2px solid #00e5ff}.cards{display:flex;gap:16px;margin:25px 0;flex-wrap:wrap}.cards button{flex:1;min-width:160px;padding:28px;text-align:right}.cards small{display:block;margin-top:12px}#message{color:#ffd34e}canvas{width:100%;background:#0e1425;border:1px solid #404761;touch-action:none;display:block}#hud{padding:12px;white-space:pre-wrap}#touch{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}.stick{width:100px;height:100px;flex-shrink:0;border:2px solid #655780;border-radius:50%;display:grid;place-items:center;touch-action:none;user-select:none;background:#181c32}.actions{display:flex;gap:5px;flex-wrap:wrap}.actions button{padding:10px}pre{white-space:pre-wrap;line-height:1.8} [hidden]{display:none!important}@media(max-width:600px){main{padding:12px}header{padding:16px}.cards{gap:8px}.stick{width:80px;height:80px}.actions button{font-size:12px;padding:7px}}
#arena{height:calc(100dvh - 140px);display:flex;flex-direction:column;align-items:center}#arena canvas{width:auto;max-width:100%;height:auto;min-height:0;flex:1;object-fit:contain}#arena #touch{width:100%;flex-shrink:0}#arena p{font-size:11px;margin:6px 0}#hud{flex-shrink:0}@media(max-height:550px){header{padding:8px}main{padding:6px}#arena{height:calc(100dvh - 62px);position:relative}#touch{position:absolute;bottom:10px;padding:0 18px;pointer-events:none}#touch>*{pointer-events:auto}.stick{opacity:.7;width:70px;height:70px}#arena p{display:none}}
#touch{direction:ltr}.actions{direction:rtl}
#preferences{border:1px solid #464065;border-radius:12px;padding:15px;max-width:520px}#preferences summary{cursor:pointer}#preferences input[type=range]{padding:0;vertical-align:middle}#metrics{font:12px monospace;color:#00e5ff;direction:ltr}#rotateHint{display:none;color:#ffd34e;font-size:12px}#shoot{touch-action:none;background:#64334c;border-color:#ff3d81;font-weight:bold}#touch button{touch-action:none;-webkit-user-select:none;user-select:none}body.playing{overscroll-behavior:none}body.playing header{display:none}body.playing main{padding:0;max-width:none}body.playing #arena{height:100dvh;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));position:relative}body.playing #hud{font-size:14px;padding:7px}body.playing #touch{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));margin:8px 0;bottom:max(14px,env(safe-area-inset-bottom))}body.playing canvas{border:0}body.playing #metrics{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:2}@media(orientation:portrait){body.playing #rotateHint{display:block}.actions{max-width:190px;justify-content:center}body.playing #touch{position:static}.stick{width:78px;height:78px}}@media(orientation:landscape) and (max-height:550px){body.playing canvas{width:100%;height:100%;position:absolute;inset:0}body.playing #hud{z-index:2;background:#080b1680;border-radius:8px}body.playing #touch{z-index:2}.actions{margin-left:auto;margin-right:22px;max-width:230px}#shoot{min-width:74px;min-height:66px}.stick{width:90px;height:90px}#aim{width:68px;height:68px}.actions button{min-height:48px}.actions #shoot{min-height:66px}}
body.playing{overflow:hidden}body.playing #arena{overflow:hidden}