:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:#2b2f36;height:100%;margin:0;overflow:hidden}#app{justify-content:center;align-items:center;height:100%;display:flex}#game{aspect-ratio:4/3;cursor:default;width:min(100vw,133.33vh);height:min(75vw,100vh);image-rendering:-webkit-optimize-contrast;touch-action:none;background:#7fa1b3;outline:none;box-shadow:0 10px 40px #00000080}#touch-controls{pointer-events:none;z-index:10;display:none;position:fixed;inset:0}#touch-controls.visible{display:block}#dpad{left:max(16px, env(safe-area-inset-left));bottom:max(16px, env(safe-area-inset-bottom));pointer-events:auto;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:168px;height:168px;display:grid;position:absolute}.dpad-btn{color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff40;border:2px solid #ffffff80;border-radius:10px;justify-content:center;align-items:center;padding:0;font-size:22px;display:flex}.dpad-btn:active{background:#ffffff80}.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-right{grid-area:2/3}.dpad-down{grid-area:3/2}#touch-actions{right:max(16px, env(safe-area-inset-right));top:max(16px, env(safe-area-inset-top));pointer-events:auto;flex-direction:column;gap:10px;display:flex;position:absolute}.action-btn{color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff40;border:2px solid #ffffff80;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:18px;display:flex}.action-btn:active{background:#ffffff80}