*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;font-family:Segoe UI,system-ui,sans-serif;background:#0a0e14;color:#e8ecf0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.hidden{display:none!important}button{font-family:inherit;cursor:pointer;border:none;border-radius:6px;padding:.65rem 1.25rem;font-size:.95rem;transition:background .15s,transform .1s}button:active{transform:scale(.97)}.btn-primary{background:linear-gradient(180deg,#3d8bfd,#2563eb);color:#fff}.btn-primary:hover{background:linear-gradient(180deg,#5a9fff,#3b82f6)}.btn-secondary{background:#2a3344;color:#e8ecf0;border:1px solid #3d4f66}.btn-secondary:hover{background:#354158}.btn-danger{background:#7f1d1d;color:#fecaca}.btn-danger:hover{background:#991b1b}input,select{font-family:inherit;font-size:.95rem;padding:.55rem .75rem;border-radius:6px;border:1px solid #3d4f66;background:#141b26;color:#e8ecf0;width:100%}input:focus{outline:2px solid #3d8bfd;outline-offset:1px}.form-error{color:#f87171;font-size:.85rem;margin-top:.35rem}.menu-page .menu-root{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem;background:radial-gradient(ellipse at 50% 20%,#1a2840,#0a0e14 70%)}.menu-page .game-root{display:none}.menu-title{font-size:clamp(2rem,6vw,3.2rem);font-weight:700;letter-spacing:.04em;margin-bottom:.25rem;background:linear-gradient(135deg,#7dd3fc,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.menu-subtitle{color:#94a3b8;margin-bottom:2rem;font-size:.95rem}.menu-panel{width:100%;max-width:420px;background:#141b26eb;border:1px solid #2d3a4f;border-radius:12px;padding:1.5rem;box-shadow:0 12px 40px #00000073}.menu-panel h2{font-size:1.1rem;margin-bottom:1rem;color:#cbd5e1}.save-list{list-style:none;margin-bottom:1rem;max-height:240px;overflow-y:auto}.save-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .75rem;border-radius:8px;margin-bottom:.4rem;background:#1a2332;border:1px solid transparent;transition:border-color .15s,background .15s}.save-item:hover{border-color:#3d4f66;background:#222d3f}.save-item-info{flex:1;min-width:0}.save-item-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-item-meta{font-size:.75rem;color:#64748b;margin-top:.15rem}.save-item-actions{display:flex;gap:.35rem;flex-shrink:0}.save-item-actions button{padding:.4rem .65rem;font-size:.8rem}.menu-form .field{margin-bottom:.85rem}.menu-form label{display:block;font-size:.8rem;color:#94a3b8;margin-bottom:.3rem}.menu-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.menu-actions button{width:100%}.empty-saves{text-align:center;color:#64748b;padding:1rem;font-size:.9rem}.delete-confirm{margin-top:.75rem;padding:.75rem;background:#1f1515;border:1px solid #7f1d1d;border-radius:8px}.delete-confirm p{font-size:.9rem;margin-bottom:.65rem}.delete-confirm-actions{display:flex;gap:.5rem}.delete-confirm-actions button{flex:1}.game-page .menu-root{display:none}.game-page .game-root{display:block;position:fixed;inset:0;width:100%;height:100%}#game-canvas-host{position:absolute;inset:0;width:100%;height:100%}#game-canvas-host canvas{display:block;width:100%;height:100%}.status-bars{position:fixed;top:12px;left:12px;z-index:25;display:flex;flex-direction:column;gap:6px;pointer-events:none;min-width:180px}.status-bar{height:14px;background:#0a0e14d9;border:1px solid #3d4f66;border-radius:7px;overflow:hidden}.status-bar-fill{height:100%;width:100%;transition:width .15s}#health-fill{background:linear-gradient(90deg,#dc2626,#ef4444)}#health-fill.low{background:linear-gradient(90deg,#7f1d1d,#b91c1c)}#breath-fill{background:linear-gradient(90deg,#0369a1,#38bdf8)}#breath-fill.low{background:linear-gradient(90deg,#0c4a6e,#0284c7)}.status-bar-label{font-size:.65rem;color:#94a3b8;margin-bottom:2px}.btn-controls{position:fixed;top:12px;right:12px;z-index:25;pointer-events:auto;padding:.45rem .85rem;font-size:.8rem;background:#141b26e6;border:1px solid #3d4f66;color:#e8ecf0;border-radius:6px}.btn-controls:hover{background:#2a3344}.btn-debug-perf{position:fixed;top:12px;right:96px;z-index:25;pointer-events:auto;padding:.45rem .85rem;font-size:.8rem;background:#141b26e6;border:1px solid #3d4f66;color:#e8ecf0;border-radius:6px;cursor:pointer}.btn-debug-perf:hover{background:#2a3344;border-color:#7dd3fc}.debug-perf-panel{position:fixed;top:48px;right:12px;z-index:45;width:min(360px,92vw);max-height:70vh;overflow-y:auto;pointer-events:auto;background:#080c12f5;border:2px solid #475569;border-radius:10px;padding:.65rem .75rem;font-family:ui-monospace,Consolas,monospace}.debug-perf-panel.hidden{display:none}.debug-perf-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem}.debug-perf-title{font-weight:700;color:#7dd3fc;font-size:.85rem}.debug-perf-body{margin:0;white-space:pre-wrap;font-size:.68rem;line-height:1.5;color:#cbd5e1}.controls-overlay{position:fixed;inset:0;z-index:110;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:1rem}.controls-panel{background:#141b26;border:1px solid #3d4f66;border-radius:12px;padding:1.5rem;max-width:420px;width:100%;max-height:85vh;overflow-y:auto}.controls-panel h2{margin-bottom:1rem}.controls-panel ul{list-style:none;margin-bottom:1rem}.controls-panel li{padding:.4rem 0;font-size:.9rem;color:#cbd5e1;border-bottom:1px solid #1e293b}.controls-panel li strong{color:#7dd3fc}.debug-inspect{position:fixed;left:.75rem;bottom:.75rem;z-index:25;max-width:min(420px,92vw);pointer-events:none;background:#080c12eb;border:2px solid #475569;border-radius:8px;padding:.5rem .65rem;font-family:ui-monospace,Consolas,monospace;font-size:.7rem;line-height:1.45;color:#cbd5e1}.debug-inspect.hidden{display:none}.debug-inspect-title{font-weight:700;color:#7dd3fc;margin-bottom:.35rem;font-size:.72rem}.debug-inspect-body{margin:0;white-space:pre-wrap;word-break:break-word}.hud-root{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;padding:.75rem;display:flex;justify-content:center}.hud-stack{display:flex;flex-direction:column;align-items:center;gap:.35rem;pointer-events:auto}.hud-item-bar{display:flex;align-items:flex-end;gap:10px;padding:8px 10px;background:#0a0e14eb;border:2px solid #2d3a4f;border-radius:12px}.hud-panel-btn{width:58px;min-height:72px;flex-shrink:0;border:2px solid #475569;border-radius:10px;background:linear-gradient(180deg,#1a2332,#121820);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;cursor:pointer;padding:4px 2px 2px;transition:border-color .12s,box-shadow .12s;color:inherit;font:inherit}.hud-panel-btn:hover{border-color:#64748b}.hud-panel-btn[aria-expanded=true]{border-color:#fbbf24;box-shadow:0 0 10px #fbbf2459}.hud-panel-btn canvas{width:40px;height:40px;image-rendering:pixelated}.hud-panel-btn-key{position:absolute;top:3px;left:5px;font-size:.55rem;font-weight:700;color:#64748b}.hud-panel-btn-label{font-size:.55rem;color:#94a3b8;text-align:center;line-height:1.1;margin-top:2px}.hud-panel-btn-bag{order:0}.hotbar{order:1}.hud-panel-btn-craft{order:2}.hud-slot{width:72px;min-height:88px;border:2px solid #3d4f66;border-radius:8px;background:#141b26;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;cursor:pointer;padding:4px 2px 2px;transition:border-color .12s,transform .1s,box-shadow .12s;color:inherit;font:inherit}.hud-slot:hover{border-color:#5a6f8a}.hud-slot.selected{border-color:#3d8bfd;box-shadow:0 0 12px #3d8bfd8c;transform:translateY(-2px)}.hud-slot canvas{width:48px;height:48px;image-rendering:pixelated}.hud-slot-key{position:absolute;top:3px;left:5px;font-size:.6rem;font-weight:700;color:#94a3b8}.hud-slot-name{font-size:.55rem;color:#94a3b8;text-align:center;line-height:1.1;margin-top:2px}.hud-slot-count{position:absolute;bottom:16px;right:4px;font-size:.65rem;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}.inventory-panel{position:fixed;left:50%;bottom:130px;transform:translate(-50%);z-index:40;width:min(520px,94vw);max-height:50vh;background:#0a0e14f5;border:2px solid #3d4f66;border-radius:12px;padding:.75rem;pointer-events:auto;display:flex;flex-direction:column}.inventory-panel-header,.crafting-panel-header{margin-bottom:.65rem}.inventory-panel-title-row,.crafting-panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}.inventory-panel-title-row h3,.crafting-panel-title-row h3{font-size:1rem;color:#e2e8f0;margin:0}.inventory-panel-hint,.crafting-panel-hint{font-size:.75rem;color:#94a3b8;margin:0}.crafting-tabs{display:flex;gap:6px;margin-bottom:.5rem}.craft-tab{flex:1;padding:.4rem .6rem;font-size:.78rem;font-weight:600;background:#141b26;border:2px solid #3d4f66;border-radius:6px;color:#94a3b8;cursor:pointer}.craft-tab.active{border-color:#3d8bfd;color:#e2e8f0;background:#1e293b}.crafting-encyclopedia{display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:42vh}.ency-section-title{font-size:.82rem;color:#7dd3fc;margin:0 0 .5rem;font-weight:700}.ency-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.ency-tile-card{display:flex;gap:8px;padding:8px;border:1px solid #2d3a4f;border-radius:8px;background:#141b26}.ency-tile-card canvas{width:40px;height:40px;image-rendering:pixelated;flex-shrink:0}.ency-tile-name{font-size:.78rem;font-weight:700;color:#e2e8f0}.ency-tile-tags,.ency-tile-detail{font-size:.65rem;color:#94a3b8;line-height:1.35}.ency-tools-list{display:flex;flex-direction:column;gap:6px}.ency-tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border:1px solid #2d3a4f;border-radius:8px;background:#141b26;font-size:.72rem}.ency-tool-name{font-weight:700;color:#e2e8f0;min-width:5rem}.ency-tool-ing{color:#94a3b8;flex:1}.ency-tool-out{color:#7dd3fc;font-weight:600}.btn-panel-close{flex-shrink:0;width:2rem;height:2rem;padding:0;font-size:1.25rem;line-height:1;background:transparent;border:2px solid #3d4f66;border-radius:6px;color:#e2e8f0;cursor:pointer}.btn-panel-close:hover{border-color:#3d8bfd;color:#7dd3fc}.crafting-panel{position:fixed;left:50%;bottom:130px;transform:translate(-50%);z-index:40;width:min(520px,94vw);max-height:50vh;background:#0a0e14f5;border:2px solid #3d4f66;border-radius:12px;padding:.75rem;pointer-events:auto;display:flex;flex-direction:column}.crafting-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto}.crafting-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid #2d3a4f;border-radius:8px;background:#141b26}.crafting-ingredients{display:flex;flex-wrap:wrap;gap:6px;flex:1}.crafting-chip{display:flex;align-items:center;gap:4px;font-size:.7rem;color:#cbd5e1}.crafting-chip canvas{width:32px;height:32px;image-rendering:pixelated}.crafting-arrow{color:#64748b;font-weight:700}.crafting-output{display:flex;align-items:center;gap:4px;font-size:.7rem;color:#e2e8f0}.crafting-output canvas{width:32px;height:32px;image-rendering:pixelated}.btn-craft{padding:.4rem .75rem;font-size:.75rem;font-weight:600;background:#1e3a5f;border:2px solid #3d8bfd;border-radius:6px;color:#e2e8f0;cursor:pointer}.btn-craft:disabled{opacity:.4;cursor:not-allowed;border-color:#3d4f66;background:#141b26}.btn-craft:not(:disabled):hover{background:#2563eb}.inventory-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;overflow-y:auto}.inv-cell{aspect-ratio:1;min-height:72px;border:2px solid #3d4f66;border-radius:8px;background:#141b26;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;padding:2px}.inv-cell.empty{opacity:.35;cursor:default}.inv-cell.place-selected{border-color:#3d8bfd;box-shadow:0 0 10px #3d8bfd73}.inv-cell canvas{width:48px;height:48px;image-rendering:pixelated}.inv-cell-count{position:absolute;bottom:14px;right:4px;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}.inv-cell-name{font-size:.55rem;color:#94a3b8;text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.action-hint{font-size:.8rem;color:#e2e8f0;background:#0a0e14e6;padding:.35rem .75rem;border-radius:6px;border:1px solid #3d4f66;text-align:center;max-width:90vw}.hotbar{display:flex;gap:6px}.hotbar-slot.selected .hud-slot-name{color:#7dd3fc}.touch-root{position:fixed;inset:0;z-index:15;pointer-events:none}.touch-controls{display:none}.pause-overlay{position:fixed;inset:0;z-index:100;background:#000000a6;display:flex;align-items:center;justify-content:center}.pause-panel{background:#141b26;border:1px solid #3d4f66;border-radius:12px;padding:2rem;text-align:center;min-width:260px}.pause-panel h2{margin-bottom:1.25rem}.pause-panel button{display:block;width:100%;margin-bottom:.5rem}.controls-note{font-size:.85rem;color:#94a3b8;margin-bottom:1rem;line-height:1.4}.save-indicator{position:fixed;top:48px;right:12px;z-index:30;background:#141b26e6;padding:.35rem .75rem;border-radius:6px;font-size:.8rem;color:#94a3b8}.container-panel{position:fixed;left:50%;bottom:130px;transform:translate(-50%);z-index:40;width:min(560px,94vw);max-height:62vh;background:#0a0e14f5;border:2px solid #3d4f66;border-radius:12px;padding:.75rem;pointer-events:auto;display:flex;flex-direction:column;overflow-y:auto}.container-panel-header{margin-bottom:.65rem}.container-panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem}.container-panel-title-row h3{font-size:1rem;color:#e2e8f0;margin:0}.container-panel-hint,.container-bag-label{font-size:.75rem;color:#94a3b8;margin:0 0 .5rem}.furnace-slots-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:.65rem}.furnace-progress-bar{height:8px;background:#141b26;border:1px solid #3d4f66;border-radius:4px;overflow:hidden;margin-bottom:.75rem}.furnace-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#f97316,#fbbf24);transition:width .1s linear}.supply-chest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:.75rem}.container-bag-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;overflow-y:auto;max-height:22vh}.container-slot{position:relative;min-height:72px}.container-slot-label{position:absolute;top:2px;left:4px;font-size:.55rem;font-weight:700;color:#7dd3fc;z-index:1}.container-slot.output-slot{border-color:#f59e0b}@media(max-width:1024px){.game-page{--touch-btn-size: clamp(46px, 11.5vw, 56px);--touch-gap: 5px;--mobile-hud-offset: calc(122px + env(safe-area-inset-bottom, 0px)) ;--touch-safe-left: max(10px, env(safe-area-inset-left, 0px));--touch-safe-right: max(10px, env(safe-area-inset-right, 0px))}.menu-panel{max-width:100%}.status-bars{top:max(8px,env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));min-width:140px}.btn-controls{top:max(8px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));padding:.4rem .7rem;font-size:.75rem}.btn-debug-perf{top:max(48px,calc(env(safe-area-inset-top,0px) + 36px));right:max(10px,env(safe-area-inset-right,0px));font-size:.75rem}.debug-perf-panel{top:max(88px,calc(env(safe-area-inset-top,0px) + 76px));max-height:50vh}.hud-root{padding:.45rem max(.45rem,env(safe-area-inset-right,0px)) max(.45rem,env(safe-area-inset-bottom,0px)) max(.45rem,env(safe-area-inset-left,0px))}.hud-stack{gap:.25rem;max-width:100%}.hud-item-bar{gap:5px;padding:5px 6px;border-radius:10px}.hud-panel-btn{width:48px;min-height:62px;padding:3px 2px 2px;border-radius:8px}.hud-panel-btn canvas{width:32px;height:32px}.hud-panel-btn-key{display:none}.hud-panel-btn-label{font-size:.5rem}.hud-slot{width:54px;min-height:68px;padding:3px 2px 2px;border-radius:7px}.hud-slot canvas{width:34px;height:34px}.hud-slot-key{display:none}.hud-slot-name{font-size:.48rem;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-slot-count{font-size:.48rem}.hotbar{gap:4px}.action-hint{font-size:.68rem;padding:.28rem .55rem;border-radius:8px;max-width:min(92vw,420px);line-height:1.25}.inventory-panel,.crafting-panel,.container-panel{bottom:calc(var(--mobile-hud-offset) + 8px);max-height:42vh}.inv-cell{min-height:54px}.touch-root .touch-controls{display:block}}@media(max-width:380px){.game-page{--touch-btn-size: 44px;--mobile-hud-offset: calc(112px + env(safe-area-inset-bottom, 0px)) }.hud-panel-btn{width:42px;min-height:56px}.hud-panel-btn canvas{width:28px;height:28px}.hud-slot{width:48px;min-height:60px}.hud-slot canvas{width:30px;height:30px}.hud-slot-name,.hud-panel-btn-label{display:none}.action-hint{font-size:.62rem;padding:.22rem .45rem}}@media(min-width:600px)and (max-width:1024px){.game-page{--touch-btn-size: 58px;--mobile-hud-offset: calc(132px + env(safe-area-inset-bottom, 0px)) }.hud-panel-btn{width:54px;min-height:70px}.hud-panel-btn canvas{width:36px;height:36px}.hud-slot{width:62px;min-height:76px}.hud-slot canvas{width:40px;height:40px}.hud-slot-name{font-size:.52rem}.touch-actions{flex-direction:row;gap:var(--touch-gap)}.touch-btn-action{min-width:76px}}@media(min-width:1025px){.touch-root .touch-controls{display:none}}.touch-controls{position:absolute;inset:0;pointer-events:none}.touch-zone-left,.touch-zone-right{position:absolute;bottom:var(--mobile-hud-offset, 122px);pointer-events:auto;display:flex;flex-direction:column;align-items:center}.touch-zone-left{left:var(--touch-safe-left, 10px)}.touch-zone-right{right:var(--touch-safe-right, 10px)}.touch-dpad{display:flex;flex-direction:column;align-items:center;gap:var(--touch-gap, 5px)}.touch-dpad-row{display:flex;align-items:center;justify-content:center;gap:var(--touch-gap, 5px)}.touch-dpad-center{width:var(--touch-btn-size, 52px);height:var(--touch-btn-size, 52px);border-radius:50%;background:#141b2659;border:1px dashed rgba(61,79,102,.5);pointer-events:none;flex-shrink:0}.touch-actions{display:flex;flex-direction:column;gap:var(--touch-gap, 5px);pointer-events:auto}.touch-btn{width:var(--touch-btn-size, 52px);height:var(--touch-btn-size, 52px);min-width:44px;min-height:44px;border-radius:50%;background:#141b26d1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:2px solid rgba(100,116,139,.65);color:#e8ecf0;font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;padding:0;box-shadow:0 2px 8px #00000059;transition:background .1s,border-color .1s,box-shadow .1s,transform .08s}.touch-btn svg{width:42%;height:42%;fill:currentColor;pointer-events:none}.touch-btn:active,.touch-btn.active{background:#3d8bfd8c;border-color:#3d8bfd;box-shadow:0 0 12px #3d8bfd66;transform:scale(.94)}.touch-btn-action{width:auto;min-width:68px;height:var(--touch-btn-size, 52px);border-radius:calc(var(--touch-btn-size, 52px) / 2);padding:0 14px;letter-spacing:.02em}