:root{--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-top:env(safe-area-inset-top,0px);color:#f8f7ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#090b18;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;user-drag:none}html,body,#root{overscroll-behavior:none;touch-action:none;height:100%;min-height:100%;overflow:hidden}body{background:radial-gradient(circle at 18% 8%,#ff5f7a47,#0000 28rem),radial-gradient(circle at 82% 12%,#63f7b42e,#0000 26rem),linear-gradient(160deg,#090b18 0%,#121a2c 54%,#08070d 100%);width:100%;margin:0;position:fixed}button,input{font:inherit}a{color:inherit;text-decoration:none}.app-shell{height:100dvh;padding:max(clamp(.75rem, 2vw, 1.5rem), calc(var(--safe-area-top) + .5rem)) clamp(.75rem, 2vw, 1.5rem) max(clamp(.75rem, 2vw, 1.5rem), calc(var(--safe-area-bottom) + .5rem));touch-action:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.game-shell{gap:.65rem;width:min(100%,48rem);max-height:100%;display:grid}.topbar{z-index:1;grid-template-columns:3rem minmax(0,1fr) 3rem;align-items:center;gap:.75rem;min-height:3rem;display:grid;position:relative}.topbar h1{color:#f8f7ff;letter-spacing:0;text-align:center;text-transform:uppercase;margin:0;font-family:Courier New,monospace;font-size:clamp(1.45rem,5vw,2.3rem);line-height:1}.icon-button,.topbar-spacer{aspect-ratio:1;width:3rem}.icon-button{color:#f8f7ff;cursor:pointer;background:#090b1894;border:1px solid #f8f7ff33;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:background .16s,transform .16s;display:inline-flex}.icon-button:hover,.icon-button:focus-visible{background:#f8f7ff24;transform:translateY(-1px)}.play-surface{touch-action:none;gap:.55rem;min-height:0;display:grid}.canvas-frame{touch-action:none;background:#090b18;border:1px solid #f8f7ff33;border-radius:.5rem;overflow:hidden;box-shadow:inset 0 0 0 1px #63f7b41a,0 1.5rem 4rem #00000061}.drag-pad{touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(90deg,#0000,#63f7b438,#0000),#090b1894;border:1px solid #f8f7ff29;border-radius:.5rem;height:5.3rem;transition:background .14s,border-color .14s;position:relative}.drag-pad--joystick-active{background:0 0;border-color:#0000}.touch-joystick{aspect-ratio:1;cursor:pointer;touch-action:none;background:radial-gradient(circle at 34% 28%,#ffffff47,#0000 .7rem),radial-gradient(circle at 58% 70%,#00000059,#0000 2.2rem),linear-gradient(145deg,#63f7b44d,#090b18db);border:1px solid #f8f7ff38;border-radius:999px;width:4.7rem;padding:0;transition:opacity .14s,visibility .14s;display:none;position:absolute;bottom:.55rem;right:1.85rem;box-shadow:inset 0 .18rem .4rem #ffffff1f,inset 0 -.4rem .8rem #00000057,0 .7rem 1.3rem #0000004d}.touch-joystick--hidden{opacity:0;pointer-events:none;visibility:hidden}.touch-joystick:focus-visible{outline-offset:3px;outline:2px solid #f8f7ffb3}.touch-joystick:before{border-radius:inherit;content:"";background:radial-gradient(circle,#63f7b42e,#0000 52%),#090b184d;border:1px solid #f8f7ff24;position:absolute;inset:.62rem}.touch-joystick-thumb{aspect-ratio:1;border-radius:inherit;pointer-events:none;will-change:transform;background:radial-gradient(circle at 32% 24%,#ffffff75,#0000 .55rem),linear-gradient(145deg,#63f7b4 0%,#2dbd8e 56%,#14705f 100%);border:1px solid #f8f7ff57;width:2.45rem;position:absolute;top:50%;left:50%;box-shadow:inset 0 .18rem .38rem #ffffff3d,inset 0 -.32rem .5rem #00000047,0 .34rem .72rem #0000005c}.drag-pad:before{content:"";-webkit-user-select:none;user-select:none;background:#f8f7ff6b;border-radius:999px;width:min(8rem,42%);height:.25rem;transition:opacity .14s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drag-pad--joystick-active:before{opacity:0}canvas{aspect-ratio:720/820;height:min(calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - 10.75rem), 820px);touch-action:none;-webkit-user-select:none;user-select:none;width:auto;max-width:100%;margin:0 auto;display:block}@media (width<=560px){.app-shell{padding:max(.5rem, calc(var(--safe-area-top) + .5rem)) .5rem max(.5rem, calc(var(--safe-area-bottom) + .5rem));align-items:start}.game-shell{gap:.5rem}.topbar{grid-template-columns:2.75rem minmax(0,1fr) 2.75rem}.icon-button,.topbar-spacer{width:2.75rem}.drag-pad{height:6rem}.touch-joystick{width:5rem;bottom:.48rem;right:1.75rem}canvas{height:min(calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - 12.95rem), calc(100vw * 820 / 720));width:100%}}