:root{--bg:#000;--btn:rgba(255,255,255,0.13);--btnOn:rgba(255,224,96,0.45);--bd:rgba(255,255,255,0.35)}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#wrap{position:fixed;inset:0;display:grid;place-items:center}
#wrap canvas{grid-area:1/1}
#gl3{display:block;background:#000}
#game{image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:transparent;outline:none;position:relative;z-index:1}
/* touch controls */
#touch{display:none;position:fixed;inset:0;z-index:3;pointer-events:none;font-family:"Press Start 2P",monospace}
#touch button,#touch #stick{pointer-events:auto;touch-action:none}
#touch button{position:absolute;border:2px solid var(--bd);background:var(--btn);color:#fff;border-radius:50%;font:inherit;font-size:14px;padding:0}
#touch button.on{background:var(--btnOn)}
#touch button svg{width:52%;height:52%;display:block;margin:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));pointer-events:none}
#topbar{position:absolute;top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px}
#topbar button{position:static;width:40px;height:32px;border-radius:8px}
#topbar button svg{width:20px;height:20px}
#btns{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:200px;height:170px}
#btns .a{width:66px;height:66px;right:0;bottom:6px}
#btns .b{width:58px;height:58px;right:76px;bottom:0}
#btns .e{width:50px;height:50px;right:18px;bottom:84px}
#btns .s{width:46px;height:46px;right:140px;bottom:4px}
#btns .q{width:46px;height:46px;right:84px;bottom:72px}
#stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04) 0,rgba(255,255,255,.10) 60%,rgba(255,255,255,.18) 100%);border:2px solid rgba(255,255,255,.35);box-shadow:inset 0 0 18px rgba(0,0,0,.5)}
#stick::before{content:"";position:absolute;inset:22%;border-radius:50%;border:1px dashed rgba(255,255,255,.18);pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 32%,#8a8aa8 0,#4a4a64 55%,#24243a 100%);border:2px solid rgba(255,255,255,.55);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.35);transition:transform .08s}
#stick.on #knob{transition:none;background:radial-gradient(circle at 38% 32%,#ffe9a0 0,#c8a040 55%,#6a5018 100%)}
@media (max-height:420px){#stick{width:124px;height:124px}#knob{width:52px;height:52px;margin:-26px 0 0 -26px}#btns{transform:scale(0.85);transform-origin:right bottom}}
/* start screen */
#splash{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#3a1f6e 0%,#140a2a 55%,#05030c 100%);cursor:pointer;font-family:"Press Start 2P",monospace;transition:opacity .6s}
#splash.hide{opacity:0;pointer-events:none}
#splashImg{display:block;max-width:min(92vw,80vh);max-height:min(92vw,80vh);width:auto;height:auto;filter:drop-shadow(0 0 24px rgba(160,120,255,.55));animation:spl 4s ease-in-out infinite;-webkit-user-drag:none;user-select:none}
@keyframes spl{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.01)}}
#splashHint{color:#fff;font-size:clamp(10px,2.2vmin,16px);margin-top:1.5vh;padding:0 12px;text-align:center;animation:blink 1.2s steps(2) infinite;text-shadow:0 2px 0 #000}
@keyframes blink{50%{opacity:.25}}
#splashVer{position:absolute;right:12px;bottom:10px;color:#777;font-size:10px}
body:not(.ingame) #stick,body:not(.ingame) #btns,body:not(.ingame) #topbar,body:not(.ingame) #rotHint{visibility:hidden}
body.uiopen #stick,body.uiopen #btns,body.uiopen #topbar,body.uiopen #rotHint{visibility:hidden}
#rotHint{display:none;position:absolute;left:50%;top:calc(max(6px,env(safe-area-inset-top)) + 44px);transform:translateX(-50%);color:#ffe9a0;font-size:9px;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:6px;white-space:nowrap}
@media (orientation:portrait){#rotHint{display:block}#btns{transform:scale(0.8);transform-origin:right bottom}#stick{width:124px;height:124px}#knob{width:52px;height:52px;margin:-26px 0 0 -26px}}