*{box-sizing:border-box}html,body{color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;background:#000;height:100%;margin:0;font-family:ui-monospace,SF Mono,Menlo,monospace;overflow:hidden}#app canvas{display:block}#crosshair{pointer-events:none;mix-blend-mode:difference;width:18px;height:18px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair:before,#crosshair:after{content:"";background:#fff;position:absolute}#crosshair:before{width:2px;height:18px;left:8px}#crosshair:after{width:18px;height:2px;top:8px}#hotbar{pointer-events:none;background:#00000073;border-radius:6px;gap:4px;padding:4px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}#hotbar:before{content:attr(data-label);text-shadow:0 1px 2px #000;white-space:nowrap;font-size:13px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.slot{border:2px solid #ffffff26;border-radius:4px;width:44px;height:44px;padding:6px;position:relative}.slot.selected{background:#ffffff26;border-color:#fff}.slot canvas{width:100%;height:100%;image-rendering:pixelated}.slot span{opacity:.7;font-size:9px;position:absolute;top:1px;left:3px}#debug{white-space:pre;pointer-events:none;background:#00000080;padding:6px 8px;font-size:12px;line-height:1.45;position:fixed;top:8px;left:8px}#overlay{cursor:pointer;background:#0a141e8c;place-items:center;display:grid;position:fixed;inset:0}#overlay.hidden{display:none}#overlay .panel{background:#0009;border-radius:10px;max-width:420px;padding:24px 32px}#overlay h1{margin:0 0 4px;font-size:22px}#overlay p{opacity:.8;margin:0 0 14px}#overlay dl{grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-size:13px;display:grid}#overlay dt{color:#ffd27a}#overlay dd{margin:0}#map{background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}#map canvas{cursor:crosshair}#map[hidden]{display:none}#map canvas{border:3px solid #fffc;border-radius:6px;max-width:94vw;max-height:90vh;box-shadow:0 8px 40px #00000080}#minimap{pointer-events:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:fixed;top:12px;right:12px}#minimap canvas{filter:drop-shadow(0 2px 6px #00000073)}#minimap div{background:#00000073;border-radius:4px;padding:2px 8px;font-size:11px}#dialogue{pointer-events:none;background:#0a101ec7;border:2px solid #d6ac40d9;border-radius:10px;max-width:min(560px,100vw - 32px);padding:12px 18px;font-size:15px;line-height:1.45;position:fixed;bottom:112px;left:50%;transform:translate(-50%)}#dialogue strong{color:#ffd27a;margin-bottom:2px;display:block}#prompt{pointer-events:none;background:#0000008c;border-radius:6px;padding:6px 12px;font-size:14px;position:fixed;top:calc(50% + 40px);left:50%;transform:translate(-50%)}#prompt[hidden]{display:none}#prompt kbd{font:inherit;color:#9ff3dd;border:1px solid #ffffffb3;border-radius:3px;margin-right:6px;padding:0 6px;font-weight:700;display:inline-block}#carhud{text-align:center;pointer-events:none;background:#0a0a0e9e;border:1px solid #ff3c3c99;border-radius:8px;padding:6px 14px;font-size:14px;position:fixed;bottom:84px;left:50%;transform:translate(-50%)}#carhud[hidden]{display:none}#carhud b{color:#ff5a5a;font-size:20px}#carhud .fly{color:#9ff3dd;font-weight:700}#carhud small{opacity:.7;margin-top:2px;font-size:11px;display:block}#crosshair[hidden],body:not(.touch) #overlay .touch-only,body.touch #overlay .mouse-only,body:not(.ios-browser) .hint.ios-browser{display:none}@media (orientation:landscape){.hint.portrait{display:none}}#overlay .hint{color:#9ff3dd;margin:12px 0 0;font-size:12px}body.touch #overlay .panel{touch-action:pan-y;max-height:calc(100dvh - 24px);padding:16px 22px;overflow:auto}body.touch #overlay dl{font-size:12px}#touch{--safe-l:max(12px, env(safe-area-inset-left));--safe-r:max(12px, env(safe-area-inset-right));--safe-b:max(12px, env(safe-area-inset-bottom));--safe-t:max(8px, env(safe-area-inset-top));position:fixed;inset:0}#touch[hidden]{display:none}.tbtn{color:#ffffffe6;text-shadow:0 1px 2px #000;background:#00000052;border:2px solid #ffffff73;border-radius:50%;place-items:center;font-size:13px;font-weight:700;display:grid;position:absolute}.tbtn.held{background:#ffffff4d;border-color:#fff}.tbtn.jump{right:calc(var(--safe-r) + 16px);bottom:calc(var(--safe-b) + 28px);width:76px;height:76px;font-size:26px}.tbtn.down{right:calc(var(--safe-r) + 104px);bottom:calc(var(--safe-b) + 12px);width:60px;height:60px;font-size:20px}.tbtn.fly,.tbtn.exit{right:calc(var(--safe-r) + 26px);bottom:calc(var(--safe-b) + 122px);width:56px;height:56px}.tbtn.exit{border-color:#ff5a5acc}#touch:not(.flying):not(.mounted) .tbtn.down,#touch.mounted .tbtn.fly,#touch:not(.mounted) .tbtn.exit{display:none}#touch .top{top:var(--safe-t);left:var(--safe-l);gap:8px;display:flex;position:absolute}#touch .top .tbtn{border-radius:8px;width:48px;height:36px;font-size:12px;position:static}.stick{left:calc(var(--safe-l) + 90px);top:calc(100% - var(--safe-b) - 90px);opacity:.45;pointer-events:none;background:#0000002e;border:2px solid #ffffff4d;border-radius:50%;width:128px;height:128px;margin:-64px 0 0 -64px;position:absolute}.stick.active{opacity:1}.knob{background:#ffffff8c;border-radius:50%;width:48px;height:48px;position:absolute;top:38px;left:38px}.knob.sprint{background:#9ff3ddd9}body.touch #crosshair{width:14px;height:14px}body.touch #crosshair:before{height:14px;left:6px}body.touch #crosshair:after{width:14px;top:6px}body.touch #hotbar{bottom:var(--hotbar-b,max(8px, env(safe-area-inset-bottom)));pointer-events:auto}body.touch .slot{width:40px;height:40px;padding:5px}body.touch .slot span{display:none}body.touch #minimap{top:max(8px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));pointer-events:auto}body.touch #minimap canvas{width:108px!important;height:108px!important}body.touch #prompt{pointer-events:auto;padding:10px 16px;font-size:15px}body.touch #debug{top:56px;left:max(8px, env(safe-area-inset-left));font-size:10px}body.touch #dialogue{font-size:14px;bottom:100px}body.touch #carhud{bottom:96px}@media (orientation:portrait){body.touch #hotbar{--hotbar-b:132px}body.touch .slot{width:34px;height:34px;padding:4px}body.touch #dialogue{bottom:190px}body.touch #carhud{bottom:180px}}