:root{--bg: #0d1117;--panel: rgba(12, 16, 22, .82);--border: rgba(255, 255, 255, .14);--text: #e8edf2;--muted: #9fb0c0;--accent: #7fd35a}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none;user-select:none}.hidden{display:none!important}#crosshair{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:.85}#crosshair:before,#crosshair:after{content:"";position:absolute;background:#fff;mix-blend-mode:difference}#crosshair:before{left:9px;top:2px;width:2px;height:16px}#crosshair:after{top:9px;left:2px;height:2px;width:16px}#topbar{z-index:5;position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));display:flex;gap:6px;flex-wrap:wrap;align-items:center}.pill.btn{pointer-events:auto;cursor:pointer;font:inherit;font-size:13px;line-height:1;padding:5px 10px;color:var(--text)}.pill.btn:hover{border-color:var(--accent)}.pill.btn.off{opacity:.45}#btn-fullscreen{margin-left:auto}.pill{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted);backdrop-filter:blur(6px)}.pill.online{color:var(--accent);border-color:#7fd35a66}.pill.offline{color:#ff8f6b;border-color:#ff8f6b66}#debug{position:absolute;top:44px;left:10px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--muted);white-space:pre;backdrop-filter:blur(6px);width:max-content;max-width:calc(100vw - 20px);overflow:hidden}#debug b{color:var(--text);font-weight:600}#hotbar{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;z-index:3;transform:translate(-50%);display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(6px);pointer-events:auto}.slot{position:relative;width:48px;height:48px;border-radius:6px;border:2px solid transparent;background:#ffffff0f;display:grid;place-items:center;cursor:pointer}.slot img{width:36px;height:36px;image-rendering:pixelated;border-radius:3px}.slot .num{position:absolute;top:1px;left:4px;font-size:10px;color:#ffffff80}.slot.active{border-color:var(--accent);background:#7fd35a29}#held-label{position:absolute;bottom:74px;left:50%;transform:translate(-50%);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:2px 10px;opacity:0;transition:opacity .25s}#held-label.show{opacity:1}#palette{z-index:6;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:76vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;backdrop-filter:blur(10px);pointer-events:auto}.palette-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;font-size:12px;color:var(--muted)}.palette-head strong{color:var(--text);font-size:14px}#palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}.pal-item{display:grid;place-items:center;gap:4px;padding:8px 4px;border-radius:8px;border:1px solid transparent;background:#ffffff0d;cursor:pointer;font-size:10px;color:var(--muted);text-align:center}.pal-item:hover{border-color:var(--accent);color:var(--text)}.pal-item img{width:40px;height:40px;image-rendering:pixelated;border-radius:4px}#chat{z-index:5;position:absolute;left:10px;bottom:90px;width:min(420px,46vw)}#chat-log{display:flex;flex-direction:column;gap:3px;max-height:180px;overflow:hidden;justify-content:flex-end}.chat-line{font-size:12px;background:#0a0e1499;border-radius:6px;padding:3px 8px;width:fit-content;max-width:100%;word-break:break-word;animation:fade 12s forwards}.chat-line .who{color:var(--accent)}.chat-line.system{color:var(--muted);font-style:italic}@keyframes fade{0%,75%{opacity:1}to{opacity:0}}#chat-input{margin-top:6px;width:100%;pointer-events:auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);font:inherit;font-size:13px;outline:none}#chat-input:focus{border-color:var(--accent)}#nametags{z-index:1;position:absolute;inset:0;overflow:hidden}.nametag{position:absolute;left:0;top:0;font-size:12px;padding:2px 7px;border-radius:999px;background:#0a0e14b8;border:1px solid var(--border);white-space:nowrap;display:none}#overlay{z-index:10;position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#1e2c3eb3,#06090df0);pointer-events:auto;backdrop-filter:blur(3px)}#overlay.hidden{display:none!important}.panel{width:min(460px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px 26px 20px;text-align:center}.panel h1{margin:0 0 4px;font-size:26px;letter-spacing:.5px}.panel .sub{margin:0 0 18px;color:var(--muted);font-size:12px}.panel label{display:block;text-align:left;font-size:11px;color:var(--muted);margin-bottom:12px}.panel input{display:block;width:100%;margin-top:5px;background:#ffffff0f;border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font:inherit;outline:none}.panel input:focus{border-color:var(--accent)}#play-btn{width:100%;padding:11px;border-radius:9px;border:0;background:var(--accent);color:#0d1a08;font:inherit;font-weight:700;font-size:14px;cursor:pointer}#play-btn:hover{filter:brightness(1.08)}#play-btn:disabled{opacity:.5;cursor:default}.keys{list-style:none;padding:0;margin:18px 0 0;text-align:left;font-size:11px;color:var(--muted);line-height:1.9}.keys b{color:var(--text)}#overlay-status{margin-top:10px;font-size:11px;color:var(--muted);min-height:14px}#touch-ui{position:absolute;inset:0;z-index:2}#touch-look{position:absolute;inset:0;pointer-events:auto;touch-action:none}body.palette-open #touch-look,body.chat-open #touch-look{pointer-events:none}#joystick{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(96px + env(safe-area-inset-bottom));width:150px;height:150px;border-radius:50%;background:#0c10166b;border:1px solid var(--border);backdrop-filter:blur(4px);pointer-events:auto;touch-action:none;z-index:4}#joystick-knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:0;border-radius:50%;background:#e8edf280;border:2px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);pointer-events:none}#touch-buttons{position:absolute;right:calc(20px + env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));display:grid;grid-template-columns:62px 62px;gap:10px;align-items:end;justify-items:center;pointer-events:none;z-index:4}#touch-actions{position:absolute;right:calc(20px + env(safe-area-inset-right));top:calc(58px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:10px;pointer-events:none;z-index:4}.tbtn{width:62px;height:62px;border-radius:50%;border:1px solid var(--border);background:#0c10168c;color:var(--text);font-size:22px;line-height:1;display:grid;place-items:center;pointer-events:auto;touch-action:none;backdrop-filter:blur(4px);cursor:pointer}.tbtn.big{width:80px;height:80px;font-size:28px;grid-column:2;grid-row:1 / span 2}#touch-buttons .tbtn[data-act=fly]{grid-column:1;grid-row:1}#touch-buttons .tbtn[data-act=down]{grid-column:1;grid-row:2}.tbtn.down,.tbtn:active{background:#7fd35a52;border-color:var(--accent)}.tbtn.on{border-color:var(--accent);color:var(--accent)}body.touch .pill,body.touch #debug,body.touch #hotbar,body.touch #palette,body.touch #joystick,body.touch .tbtn,body.touch #overlay,body.touch #held-label,body.touch #chat-input{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}body.touch .pill,body.touch #debug,body.touch #hotbar,body.touch #palette,body.touch #held-label,body.touch #chat-input{background:#0a0e14e6}body.touch #joystick{background:#0a0e148c}body.touch .tbtn{background:#0a0e14b8}body.touch #overlay{background:#06090df5}body.touch #crosshair{top:42%}body.touch #chat{bottom:calc(180px + env(safe-area-inset-bottom));width:min(320px,60vw)}body.touch #chat-log{max-height:96px}body.touch #hotbar{--slot: min(44px, calc((100vw - 56px) / 9));max-width:calc(100vw - 12px);gap:3px}body.touch .slot{width:var(--slot);height:var(--slot)}body.touch .slot img{width:calc(var(--slot) * .74);height:calc(var(--slot) * .74)}body.touch .slot .num{font-size:9px}@media (max-width: 460px){#joystick{width:124px;height:124px;left:calc(14px + env(safe-area-inset-left))}#joystick-knob{width:50px;height:50px}#touch-buttons{right:calc(14px + env(safe-area-inset-right));grid-template-columns:54px 54px;gap:8px}.tbtn{width:54px;height:54px;font-size:19px}.tbtn.big{width:70px;height:70px;font-size:25px}}@media (max-width: 720px){#topbar{gap:4px}.pill{font-size:11px;padding:2px 8px}#debug{font-size:10px;top:calc(40px + env(safe-area-inset-top))}#coords,#online{display:none}.panel{padding:20px 18px 16px}.panel h1{font-size:22px}#palette{width:94vw;max-height:70vh;padding:10px}#palette-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}.pal-item img{width:34px;height:34px}}@media (max-height: 480px){#joystick{width:120px;height:120px;bottom:calc(74px + env(safe-area-inset-bottom))}#joystick-knob{width:48px;height:48px}#touch-buttons{bottom:calc(74px + env(safe-area-inset-bottom))}.tbtn{width:52px;height:52px;font-size:19px}.tbtn.big{width:66px;height:66px;font-size:24px}body.touch .slot{width:38px;height:38px}body.touch .slot img{width:27px;height:27px}}