:root{--panel: #2b2b33;--panel-light: #3a3a44;--slot: #1c1c22;--slot-border: #55555f;--slot-border-light: #8b8b96;--accent: #6cc24a}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#0b0f1a;font-family:Pixelify Sans,system-ui,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}#app canvas{display:block;width:100%;height:100%;cursor:crosshair}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);mix-blend-mode:difference}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#fff}.crosshair:before{left:50%;top:0;width:2px;height:100%;transform:translate(-50%)}.crosshair:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}.break-bar{position:absolute;left:50%;top:calc(50% + 22px);width:60px;height:6px;transform:translate(-50%);background:#0000008c;border:1px solid rgba(255,255,255,.35);opacity:0;transition:opacity .12s}.break-fill{height:100%;width:0%;background:#fff}.item-name{position:absolute;left:50%;bottom:118px;transform:translate(-50%);font-size:20px;text-shadow:2px 2px 0 rgba(0,0,0,.7);opacity:0;transition:opacity .35s}.fly-indicator{position:absolute;left:50%;top:18px;transform:translate(-50%);font-size:16px;letter-spacing:3px;color:#9ff5ea;text-shadow:2px 2px 0 rgba(0,0,0,.6);opacity:0;transition:opacity .2s}.debug{position:absolute;left:12px;top:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;line-height:1.5;color:#e8f4ff;text-shadow:1px 1px 0 rgba(0,0,0,.8);display:none}.help{position:absolute;left:18px;bottom:18px;padding:14px 18px;background:#0c101ab8;border:2px solid rgba(255,255,255,.14);border-radius:8px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}.help.visible{opacity:1;transform:translateY(0)}.help h2{font-size:18px;letter-spacing:2px;margin-bottom:8px;color:var(--accent)}.help-grid{display:grid;grid-template-columns:auto auto;gap:3px 16px;font-size:14px;color:#d6e4f5}.help-grid span:nth-child(odd){color:#93a9c4}.hud-bottom{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.hud-stats{display:flex;flex-direction:column;gap:2px;width:100%}.stat-row{display:flex;gap:1px;min-height:0;padding:0 4px}.stat-row:empty{display:none}.stat-row.air{justify-content:flex-end}.heart,.armor-icon,.bubble{width:18px;height:18px;image-rendering:pixelated;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6))}.hotbar{display:flex;gap:3px;padding:4px;background:#0c0c10b3;border:2px solid rgba(0,0,0,.6);border-radius:4px}.hotbar-slot{position:relative;width:54px;height:54px;background:#282830d9;border:2px solid rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px #ffffff14;display:flex;align-items:center;justify-content:center}.hotbar-slot.selected{border-color:#fff;box-shadow:0 0 0 2px #fff9,inset 0 0 0 1px #ffffff40;transform:scale(1.06)}.hotbar-slot .slot-icon{width:40px;height:40px;image-rendering:pixelated}.hotbar-slot .slot-count{position:absolute;right:3px;bottom:1px;font-size:16px;text-shadow:1px 1px 0 #000,0 0 3px #000}.hotbar-slot .slot-key{position:absolute;left:3px;top:0;font-size:11px;color:#ffffff80}.ui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#06080e8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto}.ui-panel{background:var(--panel);border:3px solid #14141a;box-shadow:inset 0 0 0 2px var(--panel-light),0 18px 50px #0009;border-radius:8px;padding:18px 22px 22px;min-width:420px}.panel-title{font-size:22px;margin-bottom:14px;color:#fff;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.slot{position:relative;width:48px;height:48px;background:var(--slot);border:2px solid var(--slot-border);box-shadow:inset 0 2px #0006;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .08s,background .08s}.slot:hover{border-color:var(--slot-border-light);background:#26262e}.slot .slot-icon{width:36px;height:36px;image-rendering:pixelated;display:none;pointer-events:none}.slot .slot-count{position:absolute;right:2px;bottom:0;font-size:15px;text-shadow:1px 1px 0 #000;pointer-events:none}.slot-placeholder{position:absolute;font-size:20px;color:#ffffff29;pointer-events:none}.slot .durability{position:absolute;left:3px;right:3px;bottom:2px;height:3px;background:#0009;display:none}.durability-fill{height:100%;width:100%;background:#5cd65c}.craft-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}.craft-grid{display:grid;grid-template-columns:repeat(2,48px);gap:4px}.craft-grid.grid-3{grid-template-columns:repeat(3,48px)}.craft-arrow{font-size:28px;color:#ffffff80}.armor-row{display:flex;gap:4px;margin-bottom:16px}.inv-grid{display:grid;grid-template-columns:repeat(9,48px);gap:4px}.hotbar-grid{margin-top:10px}.cursor-stack{position:fixed;z-index:30;width:48px;height:48px;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;justify-content:center}.cursor-stack img{width:40px;height:40px;image-rendering:pixelated;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.5))}.cursor-stack span{position:absolute;right:0;bottom:0;font-size:16px;text-shadow:1px 1px 0 #000}.furnace-body{display:flex;align-items:center;gap:20px;padding:10px 4px}.furnace-col{display:flex;flex-direction:column;align-items:center;gap:8px}.flame{width:20px;height:22px;background:#00000080;display:flex;align-items:flex-end;border-radius:3px;overflow:hidden}.flame-fill{width:100%;height:0%;background:linear-gradient(#ffd23a,#ff7a1e);transition:height .1s linear}.furnace-arrow{width:70px;height:12px;background:#00000080;border-radius:6px;overflow:hidden}.furnace-progress{height:100%;width:0%;background:#dcdce4;transition:width .1s linear}#loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#2b4a7a,#0b0f1a 70%);transition:opacity .6s}#loading.hidden{opacity:0;pointer-events:none}.loading-inner{text-align:center}.loading-inner h1{font-size:64px;letter-spacing:8px;color:#fff;text-shadow:0 6px 0 #1c3a5e,0 0 40px rgba(108,194,74,.6)}.loading-inner p{margin-top:14px;font-size:18px;color:#b9d4f0;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}