:root{color-scheme:dark;--aqua:#bb91ed;--ink:#14171c;--muted:#a5afba;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:#10151b;color:#eff1f4;overflow:hidden}button,select{font:inherit;color:inherit}button{background:#232d34;border:1px solid #45545f;border-radius:7px;padding:10px 15px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#31464e;border-color:var(--aqua)}button:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}button:disabled{cursor:default;opacity:.38}button.primary{background:#bb91ed;color:#102022;font-weight:700;border:0}button.primary:hover{background:#d8b5fa}[hidden]{display:none!important}#viewport{position:fixed;inset:0}#viewport canvas{width:100%;height:100%;display:block;image-rendering:pixelated}#top{height:62px;position:fixed;inset:0 0 auto;z-index:4;display:flex;align-items:center;gap:16px;padding:0 25px;background:linear-gradient(#10171bed,#10171b80);border-bottom:1px solid #ffffff16;font-size:12px}.brand{font-weight:900;font-size:19px;letter-spacing:1px;color:var(--aqua)}.brand span{color:#eff1f4}.pill{font-size:9px;letter-spacing:1.8px;border:1px solid #bb91ed55;border-radius:4px;padding:5px 8px;color:var(--aqua)}#connection{color:#a5afba}#identity{margin-left:auto;font-family:monospace;color:#b6d5db}#top button{font-size:11px;padding:7px 10px}.overlay{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:80px 20px 20px;background:radial-gradient(ellipse at 50% 25%,#1f45576e,#0b101bdd);backdrop-filter:blur(5px)}.board-wrap{width:min(100%,1000px)}.board-caption{font-size:11px;letter-spacing:2px;font-weight:700;color:#e3f0f1;display:flex;align-items:center;gap:10px;margin:0 12px 15px}.board-caption small{margin-left:auto;color:#a5afba;letter-spacing:.3px;font-size:10px;font-weight:400}.dot{width:6px;height:6px;background:#bb91ed;border-radius:50%;box-shadow:0 0 13px #bb91ed}.board-bottom{display:flex;align-items:center;justify-content:space-between;padding:14px 8px;color:var(--muted);font-size:12px}.board-bottom button{background:#bb91ed16;color:var(--aqua);border-color:#bb91ed60}.footnote{text-align:center;color:#85939f;font-size:10px;letter-spacing:.5px}#board-stage{position:relative;width:100%;aspect-ratio:896/512;border:1px solid #526675;border-radius:18px;overflow:hidden;background:#18191e;box-shadow:0 30px 100px #0008,0 0 70px #bb91ed08}#board-image{display:block;width:100%;height:100%;object-fit:contain}#board-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--aqua);background:#18191e}#board-hotspots{position:absolute;inset:0}.board-hotspot{position:absolute;background:transparent;border:0;border-radius:10px;padding:0}.board-hotspot:hover,.board-hotspot:focus-visible{background:#bb91ed09;box-shadow:inset 0 0 0 2px #bb91edaa;outline:0}.board-hotspot.disabled{background:#15191bbb;border:1px solid #ffffff13;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;color:#a5afba;font-size:10px}#hud{position:fixed;inset:0;pointer-events:none;text-shadow:2px 2px #000a;font-family:monospace}#timer{position:absolute;top:90px;left:50%;transform:translateX(-50%);text-align:center;background:#0c151c80;border:1px solid #fff2;border-radius:10px;padding:10px 30px;min-width:210px}#timer small{font-family:Arial;font-size:9px;letter-spacing:2px;color:#9ac7cd;display:block}#timer strong{display:block;font-size:37px;line-height:1.3;color:white}#mode-label{color:#a5d4dc;font-size:11px}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:25px;line-height:1;color:white;text-shadow:1px 1px #111,-1px -1px #111;mix-blend-mode:difference}#hotbar{position:absolute;bottom:61px;left:50%;transform:translateX(-50%);display:flex;background:#141414b0;border:2px solid #7a7a7a;padding:2px;gap:2px}.hot-slot{width:49px;height:49px;position:relative;background:#1118;border:2px solid #444;display:grid;place-items:center}.hot-slot.selected{border-color:#edf5f8;box-shadow:inset 0 0 0 1px #111,0 0 0 1px #fff}.hot-slot small{position:absolute;top:0;left:3px;font-size:10px;color:#aaa}.hot-slot .count{position:absolute;right:1px;bottom:0;font-size:13px}.item-icon{width:30px;height:30px;image-rendering:pixelated;object-fit:contain}.item-abbr{font-family:monospace;color:#c0dbe5;font-size:10px;text-align:center;word-break:break-word}.item-cube{width:24px;height:24px;transform:rotate(-10deg);border:2px solid #ffffff38;box-shadow:4px 4px #0006}#actionbar{position:absolute;bottom:134px;left:20%;width:60%;text-align:center;font-size:17px;font-weight:bold;color:#f4e9ba}#quick-actions{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:7px;pointer-events:auto;white-space:nowrap}#quick-actions button{padding:6px 12px;font-size:11px;background:#10171ba8}#fps{position:absolute;left:16px;bottom:19px;font-size:11px;color:#d6e4e6}#world-label{position:absolute;right:16px;bottom:19px;font-size:11px;color:#d6e4e6}#click-hint{position:absolute;top:60%;width:100%;text-align:center;font-family:Arial;font-size:12px;color:white;background:#1118;padding:12px}#scoreboard{position:absolute;right:18px;top:34%;font-size:12px;text-align:right;line-height:1.7}.inventory-panel,.settings-panel{background:#1b222bee;border:1px solid #465966;box-shadow:0 30px 100px #0009;border-radius:16px;padding:24px;width:min(96vw,620px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-heading h2{font-size:18px;margin:0}.panel-heading button{padding:4px 10px}.inventory-panel p{font-size:11px;color:#98aab7;margin:18px 0 0;text-align:center}#inventory-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}.inventory-slot{height:55px;padding:2px;background:#2d333c;position:relative;display:grid;place-items:center;border-radius:4px;border:1px solid #58616b}.inventory-slot:hover{background:#4d616b;z-index:2}.inventory-slot .count{position:absolute;bottom:2px;right:3px;font-size:11px}.inventory-slot .item-label{font-size:7px;line-height:1.1;max-width:100%;height:15px;overflow:hidden;text-align:center}.settings-panel{max-width:390px;padding:30px}.settings-panel h1{font-size:26px;margin:12px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--aqua)}.settings-panel p{font-size:12px;color:#a5afba;line-height:1.8}.settings-panel label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin:24px 0}.settings-panel input{width:145px;accent-color:var(--aqua)}.settings-panel select{background:#202c34;padding:5px;border:1px solid #45545f;border-radius:5px}.settings-panel>button{width:100%;margin-top:10px}.controls{border-top:1px solid #ffffff16;padding-top:16px}#messages{position:fixed;left:15px;bottom:150px;max-width:43%;z-index:6;font:12px/1.6 monospace;text-shadow:1px 1px #000;pointer-events:none}#messages div{background:#0a1118ae;padding:2px 7px;margin-top:3px;border-radius:3px;animation:fadeMessage 12s forwards}@keyframes fadeMessage{0%,70%{opacity:1}100%{opacity:0}}#title-flash{position:fixed;top:38%;width:100%;text-align:center;font:bold 34px monospace;pointer-events:none;z-index:7;text-shadow:3px 3px #000;color:#bb91ed}@media(max-height:760px){.board-wrap{width:min(100%,820px)}.board-caption{margin-bottom:8px}.board-bottom{padding:9px}.footnote{margin:4px}.overlay{padding-top:70px}}@media(max-width:650px){#connection,.pill{display:none}.brand{font-size:15px}#top{padding:0 12px;gap:10px}.board-caption{letter-spacing:1px;font-size:9px}.board-caption small{display:none}.board-bottom{font-size:10px}.hot-slot{width:35px;height:40px}#messages{max-width:90%}#quick-actions{bottom:10px}.inventory-slot{height:44px}.item-icon{width:23px;height:23px}}
/* In-game UI: compact HUD, proper inventory slots, and a responsive pause menu. */
#crosshair{width:15px;height:15px;background:linear-gradient(white,white) center/2px 15px no-repeat,linear-gradient(white,white) center/15px 2px no-repeat;filter:drop-shadow(1px 1px #222);mix-blend-mode:difference}
#hotbar{bottom:24px;gap:0;padding:0;border:2px solid #888;background:#1118;box-shadow:0 2px 0 #111}
.hot-slot{width:44px;height:44px;border-color:#555;border-radius:0;background:#15151577;box-shadow:inset 1px 1px #222,inset -1px -1px #8885}
.hot-slot.selected{border-color:#eee;box-shadow:inset 0 0 0 1px #222,0 0 0 1px #ddd;z-index:1}
.hot-slot small{font-size:8px;top:1px;left:2px;max-width:30px;overflow:hidden;white-space:nowrap}.icon-wrap{display:grid;place-items:center;width:100%;height:100%;min-width:0}.item-icon{width:34px;height:34px;image-rendering:pixelated;pointer-events:none}
.hot-slot .count,.inventory-slot .count{font:bold 15px monospace;color:#fff;right:2px;bottom:0;text-shadow:2px 2px #222}
#held-label{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);font-size:13px;text-align:center;color:white}
#quick-actions{bottom:80px;left:16px;transform:none;flex-direction:column;align-items:flex-start;gap:5px}#quick-actions button{background:#121b25c9;padding:7px 11px}#actionbar{bottom:112px;font-size:15px}#timer{top:76px;padding:7px 22px;border:0;border-radius:5px}#timer strong{font-size:29px}#scoreboard{background:#1116;padding:8px 10px;max-width:240px;font-size:11px;line-height:1.5}#world-label{bottom:14px}#fps{bottom:14px}#messages{z-index:3;bottom:170px;font-size:11px;max-width:38%}#title-flash{z-index:3}
.playing #top{opacity:0;pointer-events:none}.playing #quick-actions{display:none}#top{transition:opacity .15s}#click-hint{width:auto;left:50%;transform:translateX(-50%);border-radius:6px;line-height:1.7;top:55%;max-width:90vw}#hud{user-select:none}
.overlay{backdrop-filter:none;background:#0b111ac9;padding:76px 20px 20px}.inventory-panel{width:min(96vw,510px);background:#c6c6c6;border:3px solid #eee;border-right-color:#555;border-bottom-color:#555;border-radius:3px;padding:18px;color:#303030;box-shadow:0 20px 60px #0007;max-height:calc(100dvh - 100px);overflow-y:auto}.panel-heading{margin-bottom:14px;gap:10px}.panel-heading h2{font:600 16px/1.4 monospace}.panel-heading button{border-radius:2px;background:#a0a0a0;border-color:#555;color:#222;font-size:18px;padding:0 7px}.inventory-panel p{color:#555;font-family:monospace;line-height:1.5}.inventory-panel #inventory-grid{gap:3px}.inventory-slot{aspect-ratio:1;height:auto;min-width:0;padding:3px;background:#8b8b8b;border:2px solid #fff;border-left-color:#373737;border-top-color:#373737;border-radius:0;transition:none}.inventory-slot:hover,.inventory-slot:focus-visible{background:#b0b0b0;outline:2px solid #fff;outline-offset:-2px}.inventory-slot.unavailable{opacity:.55}.inventory-slot.pending{background:#c5e0d8}.inventory-slot .item-icon{width:100%;height:100%;max-width:38px;max-height:38px}.inventory-slot .count{font-size:13px}#item-tooltip{position:fixed;z-index:12;pointer-events:none;max-width:280px;background:#160c22f7;border:2px solid #40205b;box-shadow:0 3px 10px #0008;padding:10px 12px;color:#c5c3ca;font:12px/1.6 monospace;white-space:pre-wrap}#item-tooltip strong{color:#fff;display:block;margin-bottom:4px}#item-tooltip .muted{color:#a19aa9;font-style:italic;margin-top:6px}
.pause-panel{width:min(760px,96vw);max-height:calc(100dvh - 100px);display:flex;flex-direction:column;background:#17212bf5;border:1px solid #49606d;border-radius:12px;padding:26px;box-shadow:0 20px 90px #0008}.pause-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.pause-heading h1{font-size:28px;margin:8px 0 0;letter-spacing:-.7px}.pause-heading button{white-space:nowrap;font-size:12px}kbd{font-size:10px;border:1px solid currentColor;padding:1px 4px;margin-left:8px;border-radius:3px;opacity:.7}.pause-note{font-size:12px;line-height:1.5;color:#9eafbd;margin:15px 0 21px}.settings-tabs{display:flex;gap:4px;border-bottom:1px solid #ffffff1a;padding-bottom:10px}.settings-tabs button{flex:1;background:transparent;border:1px solid transparent;font-size:12px;padding:10px 8px}.settings-tabs button.active{background:#bb91ed16;border-color:#bb91ed66;color:#7ce2de}.settings-content{overflow-y:auto;min-height:290px;padding:8px 3px;scrollbar-width:thin;scrollbar-color:#4e6473 transparent}.option{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 22px;border-bottom:1px solid #ffffff0e;padding:19px 2px;font-size:13px}.option small{display:block;font-size:11px;color:#90a4b4;line-height:1.5;margin-top:5px}.option output{font-size:12px;color:#6bdfd7;font-variant-numeric:tabular-nums}.option input[type=range]{grid-column:1/-1;width:100%;accent-color:#53d2cc;cursor:pointer;height:17px;margin:2px 0 0}.option select{background:#24323e;border:1px solid #4b606e;border-radius:5px;padding:8px 10px;font-size:12px;min-width:110px}.option input[type=checkbox]{accent-color:#53d2cc;width:18px;height:18px;cursor:pointer}.pause-footer{display:flex;align-items:center;gap:8px;border-top:1px solid #ffffff1a;padding-top:18px;margin-top:12px}.pause-footer>span{margin-right:auto;color:#8ca1af;font-size:10px}.pause-footer button{font-size:11px;padding:8px 12px}.subtle{background:transparent;border-color:#ffffff25;color:#aebdc8}.presets{display:flex;gap:8px;margin:12px 0 4px}.presets button{flex:1;font-size:13px;padding:12px 4px}.presets small{display:block;font-size:10px;color:#98adbb;margin-top:5px}#binding-help{font-size:11px;line-height:1.6;color:#99afbe;margin:13px 0}#bindings{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.binding-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #ffffff0c;font-size:12px}.binding-row button{font-size:11px;padding:6px 9px;min-width:82px}.binding-row button.listening{border-color:#53d2cc;background:#bb91ed22;color:#83eae2}#reset-controls{font-size:11px;margin-top:18px}.board-hotspot{transition:background 80ms,box-shadow 80ms}.board-hotspot:hover{background:#bb91ed24;box-shadow:inset 0 0 0 2px #bb91ed}.board-hotspot.disabled{opacity:1}#board-loading{z-index:2}.board-wrap{max-height:100%;width:min(100%,calc((100dvh - 195px)*1.75),1000px)}#board-stage{border-radius:12px}.footnote{line-height:1.6}
@media(max-width:650px){.pause-panel{padding:18px;max-height:calc(100dvh - 85px)}.pause-heading h1{font-size:23px}.pause-heading{gap:8px}.pause-heading button{padding:10px;font-size:11px}.pause-heading kbd{display:none}.settings-tabs button{font-size:11px}.pause-footer>span{display:none}.pause-footer{justify-content:space-between}#bindings{grid-template-columns:1fr}.option{gap:10px}.hot-slot{width:36px;height:38px}.item-icon{width:29px;height:29px}#scoreboard{max-width:155px;font-size:9px}#quick-actions button{font-size:10px}#timer{min-width:140px}#timer strong{font-size:24px}#messages{max-width:55%}.board-bottom{gap:10px}.presets small{font-size:9px}.settings-content{min-height:220px}.inventory-slot .count{font-size:11px}}
@media(max-height:540px){.overlay{padding-top:65px;padding-bottom:10px}.pause-panel{max-height:calc(100dvh - 75px);padding:14px}.pause-heading h1{font-size:20px}.pause-note{margin:8px 0;font-size:10px}.settings-tabs{padding-bottom:5px}.settings-content{min-height:0}.pause-footer{padding-top:10px;margin-top:4px}#timer{top:15px}.board-wrap{width:min(100%,calc((100dvh - 160px)*1.75))}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}