:root{--sand:#e8d9b0;--deep:#06202e;--accent:#ffb457;--ok:#7ddf7a;--bad:#ff5d5d;--ui-bg:#091218d1;--ui-line:#ffdcaa38;--font:"Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:#f3e7d0;-webkit-user-select:none;user-select:none;background:#04121b;margin:0;padding:0;overflow:hidden}#viewport{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}#loading{z-index:100;background:radial-gradient(at 50% 40%,#123449,#04121b 70%);justify-content:center;align-items:center;transition:opacity .8s;display:flex;position:fixed;inset:0}#loading.fade{opacity:0;pointer-events:none}.loading-inner{text-align:center}.loading-inner h1{letter-spacing:14px;color:var(--sand);text-shadow:0 0 30px #ffbe6e59;margin:0;font-size:52px}.loading-inner .sub{letter-spacing:8px;opacity:.5;margin:6px 0 34px;font-size:12px}.bar{background:#ffffff1f;border-radius:3px;width:320px;height:3px;margin:0 auto;overflow:hidden}.bar-fill{background:linear-gradient(90deg,#ffb457,#ffe6b0);width:0%;height:100%;transition:width .3s}.load-text{opacity:.55;letter-spacing:2px;margin-top:14px;font-size:12px}.overlay{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#040c12b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.panel{background:var(--ui-bg);border:1px solid var(--ui-line);text-align:center;border-radius:14px;width:min(92vw,640px);max-width:640px;padding:30px 38px;box-shadow:0 24px 70px #0009}.panel.wide{text-align:left;width:min(94vw,860px);max-width:860px}.panel.dark{background:#1e0606db;border-color:#ff78784d}.title{letter-spacing:10px;color:var(--sand);margin:0 0 6px;font-size:38px}.title.dead{color:#ff8a8a}.tagline{opacity:.7;margin:0 0 22px;font-size:14px;line-height:1.7}button.primary{color:#2a1600;letter-spacing:3px;cursor:pointer;font-size:16px;font-weight:700;font-family:var(--font);background:linear-gradient(#ffc476,#e2913a);border:0;border-radius:8px;padding:12px 40px;transition:transform .12s,box-shadow .12s}button.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ffaa5059}.controls-grid{grid-template-columns:repeat(3,1fr);gap:8px 14px;margin:26px 0 18px;font-size:12px;display:grid}.controls-grid>div{align-items:center;gap:8px;display:flex}.controls-grid span{opacity:.65}kbd{font-size:11px;font-family:var(--font);white-space:nowrap;background:#ffffff17;border:1px solid #ffffff29;border-bottom-width:2px;border-radius:5px;padding:3px 7px}.quality-row{justify-content:center;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;display:flex}.quality-row select{color:#f3e7d0;border:1px solid var(--ui-line);font-family:var(--font);background:#ffffff14;border-radius:6px;padding:5px 10px}.hint{opacity:.45;margin:6px 0 0;font-size:12px;line-height:1.6}#hud{z-index:20;pointer-events:none;position:fixed;inset:0}#crosshair{width:26px;height:26px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ch-dot{background:#ffffffe6;border-radius:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;position:absolute;top:50%;left:50%;box-shadow:0 0 3px #000c}.ch-ring{opacity:0;border:1px solid #ffffff59;border-radius:50%;transition:transform .15s,opacity .15s;position:absolute;inset:0;transform:scale(.5)}#crosshair.active .ch-ring{opacity:1;transform:scale(1)}#vitals{flex-direction:column;gap:6px;display:flex;position:absolute;bottom:22px;left:22px}.vital{align-items:center;gap:8px;display:flex}.vital .ico{text-align:center;filter:drop-shadow(0 1px 2px #000);width:18px;font-size:13px}.vital .track{background:#0000008c;border:1px solid #ffffff24;border-radius:4px;width:168px;height:7px;overflow:hidden}.vital .fill{border-radius:3px;width:100%;height:100%;transition:width .25s linear,background .4s linear}.vital[data-key=health] .fill{background:linear-gradient(90deg,#ff4d4d,#ff8f8f)}.vital[data-key=hunger] .fill{background:linear-gradient(90deg,#c98b3a,#ecc07a)}.vital[data-key=thirst] .fill{background:linear-gradient(90deg,#2f8fd0,#7fd0f5)}.vital[data-key=warmth] .fill{background:linear-gradient(90deg,#e0642a,#ffb072)}.vital[data-key=stamina] .fill{background:linear-gradient(90deg,#4aa84a,#a5e37f)}.vital[data-key=oxygen] .fill{background:linear-gradient(90deg,#63d6e8,#c8f7ff)}.vital.low .fill{animation:.9s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}#clock{text-align:right;text-shadow:0 2px 6px #000000d9;position:absolute;top:20px;right:24px}#clock .day{opacity:.7;letter-spacing:2px;font-size:13px}#clock .time{letter-spacing:3px;font-size:30px;font-weight:300;line-height:1.1}#clock .weather{opacity:.6;letter-spacing:3px;font-size:12px}#hotbar{gap:7px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.slot{background:#00000080;border:1px solid #ffffff26;border-radius:8px;justify-content:center;align-items:center;width:54px;height:54px;font-size:24px;transition:border-color .15s,transform .15s,background .15s;display:flex;position:relative}.slot.sel{border-color:var(--accent);background:#ffb45729;transform:translateY(-5px)}.slot .num{opacity:.5;font-size:9px;position:absolute;top:2px;left:4px}.slot .cnt{text-shadow:0 1px 3px #000;font-size:11px;font-weight:700;position:absolute;bottom:2px;right:5px}.slot .dur{background:#ffffff2e;border-radius:2px;height:2px;position:absolute;bottom:3px;left:4px;right:4px;overflow:hidden}.slot .dur>i{background:var(--ok);height:100%;display:block}#prompt{background:#0000008c;border:1px solid #ffffff1f;border-radius:20px;align-items:center;gap:9px;padding:7px 16px;font-size:14px;display:flex;position:absolute;top:56%;left:50%;transform:translate(-50%)}#toasts{flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:absolute;bottom:90px;right:24px}.toast{border-left:3px solid var(--accent);background:#0009;border-radius:5px;padding:7px 14px;font-size:13px;transition:opacity .4s,transform .4s;animation:.25s slideIn}.toast.warn{border-left-color:var(--bad)}.toast.good{border-left-color:var(--ok)}.toast.out{opacity:0;transform:translate(30px)}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}}#damage-vignette{opacity:0;background:radial-gradient(#0000 45%,#b40000bf 100%);transition:opacity .35s;position:absolute;inset:0}#water-tint{opacity:0;background:radial-gradient(#146e8c47 30%,#063046b8 100%);transition:opacity .35s;position:absolute;inset:0}.tabs{border-bottom:1px solid var(--ui-line);gap:8px;margin-bottom:18px;display:flex}.tab{color:#f3e7d0;opacity:.5;cursor:pointer;letter-spacing:3px;font-size:15px;font-family:var(--font);background:0 0;border:0;border-bottom:2px solid #0000;padding:8px 18px}.tab.active{opacity:1;border-bottom-color:var(--accent)}#bag-grid{grid-template-columns:repeat(8,1fr);gap:8px;display:grid}#bag-grid .slot{cursor:pointer;width:100%;height:0;padding-bottom:100%}#bag-grid .slot:hover{border-color:#ffffff73}#bag-grid .slot .ico{justify-content:center;align-items:center;font-size:26px;display:flex;position:absolute;inset:0}#bag-grid .slot .nm{text-align:center;opacity:.6;font-size:9px;position:absolute;bottom:3px;left:0;right:0}#craft-list{grid-template-columns:1fr 1fr;gap:10px;max-height:58vh;padding-right:6px;display:grid;overflow-y:auto}.recipe{cursor:pointer;background:#ffffff0b;border:1px solid #ffffff17;border-radius:9px;align-items:center;gap:12px;padding:10px 12px;transition:background .15s,border-color .15s;display:flex}.recipe:hover{background:#ffffff17}.recipe.locked{opacity:.4;cursor:not-allowed}.recipe.locked:hover{background:#ffffff0b}.recipe .r-ico{text-align:center;width:36px;font-size:28px}.recipe .r-name{font-size:14px;font-weight:600}.recipe .r-cost{opacity:.6;margin-top:3px;font-size:11px}.recipe .r-desc{opacity:.4;margin-top:2px;font-size:10px}.recipe .r-cost .miss{color:var(--bad)}.close{border:1px solid var(--ui-line);color:#f3e7d0;cursor:pointer;font-family:var(--font);background:#ffffff14;border-radius:7px;margin-top:18px;margin-left:auto;margin-right:auto;padding:8px 20px;display:block}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#00000040;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffdcaa40;border-radius:4px}