:root{color:#dffcff;background:#03030a;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{margin:0;min-width:320px;min-height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}#app{width:100vw;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:clamp(10px,2vmin,24px);background:radial-gradient(circle at 26% 18%,rgba(0,255,242,.16),transparent 26%),radial-gradient(circle at 82% 64%,rgba(255,43,214,.14),transparent 30%),linear-gradient(135deg,#03040a,#070712 58%,#020208)}.cabinet{position:relative;width:min(100vw - 20px,calc((100vh - 20px) * 4 / 3));width:min(100vw - 20px,calc((100dvh - 20px) * 4 / 3));aspect-ratio:4 / 3;overflow:hidden;border:1px solid rgba(139,255,249,.5);border-radius:8px;background:#02030a;box-shadow:0 0 26px #00fff23d,0 0 70px #ff2bd629,inset 0 0 44px #00fff214}canvas{display:block;width:100%;height:100%;image-rendering:auto;touch-action:none}.crt{position:absolute;inset:0;pointer-events:none}.scanlines{opacity:.28;background:linear-gradient(#ffffff14 50%,#00000057 50%),linear-gradient(90deg,#ff005f0d,#00fff20a,#ffffff05);background-size:100% 4px,7px 100%;mix-blend-mode:screen}.vignette{background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.42) 86%,rgba(0,0,0,.82) 100%),linear-gradient(rgba(255,255,255,.04),transparent 18%,transparent 82%,rgba(0,0,0,.24))}.touch-controls{--stick-x: 0px;--stick-y: 0px;display:none;touch-action:none}.stick-zone,.touch-button{touch-action:none}.stick-zone{width:clamp(116px,29vw,164px);height:clamp(96px,17dvh,132px);display:grid;place-items:center}.stick-base{width:clamp(78px,20vw,104px);aspect-ratio:1;border:1px solid rgba(100,255,242,.48);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(100,255,242,.12),rgba(100,255,242,.02) 58%,transparent 60%),#02030a75;box-shadow:0 0 18px #64fff238,inset 0 0 28px #64fff21f}.stick-knob{width:42%;aspect-ratio:1;border:1px solid rgba(223,252,255,.78);border-radius:50%;background:#64fff238;box-shadow:0 0 18px #64fff280;transform:translate(var(--stick-x),var(--stick-y))}.touch-actions{display:grid;grid-template-columns:auto auto;grid-template-areas:"menu overdrive" "fire fire";align-items:center;justify-content:end;gap:10px}.touch-button{min-width:0;border:1px solid rgba(223,252,255,.52);border-radius:999px;color:#dffcff;background:#02030a94;box-shadow:0 0 16px #64fff22e,inset 0 0 20px #64fff214;font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0}.touch-button.is-pressed,.touch-button:active{color:#02030a;background:#dffcffdb;box-shadow:0 0 26px #dffcff70}.touch-button--menu{grid-area:menu;width:72px;height:40px}.touch-button--overdrive{grid-area:overdrive;width:56px;height:56px;color:#fff36d;border-color:#fff36d8a;box-shadow:0 0 16px #fff36d33,inset 0 0 20px #fff36d14}.touch-button--overdrive.is-ready{background:#fff36d2e;box-shadow:0 0 26px #fff36d6b}.touch-button--fire{grid-area:fire;justify-self:end;width:clamp(92px,28vw,132px);height:clamp(64px,11dvh,84px);color:#ffdaf7;border-color:#ff4fd894;background:#ff4fd821;box-shadow:0 0 20px #ff4fd842,inset 0 0 24px #ff4fd81a}@media(pointer:coarse),(max-width:920px){#app{grid-template-rows:auto auto;align-content:space-between;gap:clamp(8px,1.8dvh,14px);padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.cabinet{width:min(calc(100vw - max(16px,env(safe-area-inset-left) + env(safe-area-inset-right))),calc((100dvh - clamp(118px,20dvh,154px) - max(22px,env(safe-area-inset-top) + env(safe-area-inset-bottom))) * 4 / 3));max-height:calc(100dvh - clamp(118px,20dvh,154px) - max(22px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))}.touch-controls{width:min(100%,560px);min-height:clamp(110px,18dvh,146px);display:grid;grid-template-columns:minmax(116px,1fr) minmax(154px,1fr);align-items:center;gap:clamp(8px,3vw,22px)}}@media(pointer:coarse)and (orientation:landscape),(max-width:920px)and (orientation:landscape){#app{grid-template-rows:minmax(0,1fr);gap:0}.cabinet{width:min(calc(100vw - clamp(292px,38vw,348px)),calc((100dvh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom))) * 4 / 3));max-height:calc(100dvh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))}.touch-controls{position:fixed;inset:0;width:auto;min-height:0;pointer-events:none;display:block}.stick-zone{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));pointer-events:auto}.touch-actions{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));pointer-events:auto}}