*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#7f9cab;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#eaf1f2}#app,#world{position:absolute;inset:0;width:100%;height:100%}#world{display:block;touch-action:none}.panel{position:absolute;z-index:3;background:rgba(5,12,17,.64);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:10px 12px}#hud{left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:grid;gap:4px;font-size:11px;line-height:1.25;pointer-events:none}#hud b{font-size:12px;letter-spacing:.08em}#modeReadout{color:#b9e2c5}#modes{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:min(330px,58vw)}button{border:1px solid rgba(255,255,255,.2);background:rgba(14,25,31,.75);color:#eef6f7;border-radius:9px;min-width:48px;min-height:44px;padding:8px 10px;font:inherit;font-size:11px}button.active{background:rgba(170,210,188,.24);border-color:rgba(196,235,212,.7)}#dpad{position:absolute;z-index:4;left:max(14px,env(safe-area-inset-left));bottom:max(20px,calc(env(safe-area-inset-bottom) + 10px));display:grid;justify-items:center;gap:5px}#dpad>div{display:flex;gap:5px}#dpad button{width:52px;height:52px;font-size:18px;background:rgba(6,13,18,.58);backdrop-filter:blur(7px)}#hint{position:absolute;z-index:3;bottom:max(14px,calc(env(safe-area-inset-bottom) + 6px));left:50%;transform:translateX(-50%);font-size:10px;background:rgba(5,12,17,.52);border-radius:999px;padding:7px 11px;pointer-events:none;white-space:nowrap}#loading{position:absolute;z-index:10;inset:0;display:grid;place-content:center;text-align:center;gap:8px;background:#809baa;color:#fff;transition:opacity .55s}#loading strong{font-size:22px;letter-spacing:.12em}#loading span{font-size:12px;opacity:.8}.ready #loading{opacity:0;pointer-events:none}@media(max-width:600px){#hint{display:none}#modes{max-width:62vw}#hud{max-width:48vw}}