:root{color:#edf5ff;background:#050711;font-family:ui-rounded,Avenir Next,system-ui,sans-serif}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#050711}#app{position:fixed;inset:0}canvas{display:block;touch-action:none}#boot{position:fixed;inset:0;display:grid;place-items:center;color:#ffcf73;letter-spacing:.08em}.hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:1;padding:10px;pointer-events:none;text-shadow:0 2px 7px #050711}.hud h1,.hud p{margin:0}.hud h1{color:#ffcf73;font-size:14px;letter-spacing:.17em;text-transform:uppercase}.hud-status,.hud-hint{margin-top:5px!important;font-size:11px;letter-spacing:.08em}.hud-status{opacity:.78}.hud-hint{color:#a8dfff}.dpad[hidden]{display:none}.dpad{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;z-index:2;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);transform:translate(-50%);padding:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));gap:2px}.dpad-button{border:1px solid rgba(168,223,255,.55);border-radius:12px;background:#0f1f35d4;color:#edf5ff;font:inherit;font-size:24px;touch-action:none}.dpad-button:active{background:#316f96f5}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}