@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');
:root{--ink:#eaf1eb;--muted:#9ba8a1;--panel:rgba(10,17,14,.72);--line:rgba(235,244,236,.12);--accent:#e0b36a;--green:#86b985;--danger:#d76d63}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08100d;color:var(--ink);font-family:Inter,system-ui,sans-serif}button{font:inherit;color:inherit;border:0;background:none}#game,canvas{position:fixed;inset:0;width:100%;height:100%;display:block}.hud{position:fixed;inset:0;pointer-events:none}.top-left{position:absolute;left:18px;top:16px;text-shadow:0 2px 8px #0009}.brand{font-family:Rajdhani,sans-serif;letter-spacing:.17em;font-size:17px}.brand b{font-weight:700;color:#dcc08a}.place{margin-top:3px;font-size:11px;color:#d5dfd8;display:flex;gap:8px;align-items:center;opacity:.9}.place i{width:4px;height:4px;border-radius:50%;background:#d8b36d;box-shadow:0 0 10px #d8b36d}.top-right{position:absolute;right:16px;top:14px;display:flex;gap:8px;pointer-events:auto}.top-right button{width:38px;height:38px;border:1px solid var(--line);background:rgba(8,15,12,.45);backdrop-filter:blur(14px);border-radius:12px;font-size:17px;box-shadow:0 8px 20px #0002}.survival{position:absolute;left:50%;top:17px;transform:translateX(-50%);display:flex;gap:7px;padding:6px 8px;border:1px solid var(--line);border-radius:16px;background:rgba(7,12,10,.38);backdrop-filter:blur(12px)}.stat{display:flex;align-items:center;gap:4px;font-size:10px;color:#e9eee9;padding:0 4px}.stat span{font-size:11px;opacity:.75}.stat b{font-size:11px}.stat.hp span{color:#f39a8f}.stat.sta span{color:#f4cf79}.stat.food span{color:#a8d889}.stat.water span{color:#8fd4ee}.mission{position:absolute;top:66px;left:50%;transform:translateX(-50%);min-width:260px;max-width:58vw;padding:8px 12px;border:1px solid rgba(234,242,235,.08);background:rgba(5,10,8,.28);backdrop-filter:blur(10px);border-radius:11px;text-align:center;color:#e7ece7;font-size:11px}.mission span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#d9b16b;margin:0 7px 1px 0;box-shadow:0 0 12px #d9b16b}.target{position:absolute;left:50%;top:105px;transform:translateX(-50%);width:min(310px,68vw);padding:10px 12px;border:1px solid rgba(255,255,255,.11);background:rgba(9,15,12,.55);backdrop-filter:blur(16px);border-radius:14px;box-shadow:0 12px 30px #0002}.target.hit{animation:hit .16s}.target-top{display:flex;justify-content:space-between;gap:12px}.target small{display:block;font-size:8px;letter-spacing:.15em;color:#91a19a}.target strong{display:block;margin-top:1px;font-family:Rajdhani,sans-serif;font-size:19px;letter-spacing:.04em}.target em{font-style:normal;font-family:Rajdhani;font-size:20px;color:#d7bb80}.target-bar{height:5px;margin-top:7px;border-radius:999px;background:#243129;overflow:hidden}.target-bar span{display:block;height:100%;background:linear-gradient(90deg,#93a35f,#d6ba73)}.target div:last-child{font-size:10px;color:#aeb9b1;margin-top:6px}.context{position:absolute;left:50%;bottom:128px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:13px;background:rgba(8,14,11,.67);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);box-shadow:0 14px 30px #0003}.context-glyph{min-width:54px;height:30px;padding:0 9px;display:grid;place-items:center;border-radius:8px;background:rgba(216,179,106,.14);color:#e5c67d;font:700 11px Rajdhani;letter-spacing:.1em}.context-copy strong{display:block;font:700 14px Rajdhani;letter-spacing:.06em}.context-copy span{font-size:9px;color:#aab6af}.context kbd{border:1px solid var(--line);padding:4px 6px;border-radius:6px;color:#cad4ce;font-size:9px}.selected-item{position:absolute;left:50%;bottom:99px;transform:translateX(-50%);font:700 10px Rajdhani;letter-spacing:.17em;color:#d8c08b;text-shadow:0 2px 7px #0008}.hotbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:5px;pointer-events:auto}.slot{width:52px;height:58px;position:relative;border:1px solid rgba(255,255,255,.10);border-radius:11px;background:rgba(10,16,13,.60);backdrop-filter:blur(14px);box-shadow:0 8px 20px #0002}.slot.selected{border-color:rgba(224,179,106,.75);background:rgba(78,66,42,.34);transform:translateY(-3px)}.slot small{position:absolute;left:6px;top:5px;color:#8f9b95;font-size:8px}.slot strong{font-size:21px;position:absolute;left:50%;top:14px;transform:translateX(-50%)}.slot span{position:absolute;right:6px;bottom:5px;font-size:9px;color:#e8eee9}.crosshair{position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);opacity:.48}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#f4f1e4}.crosshair:before{width:1px;height:17px;left:8px}.crosshair:after{height:1px;width:17px;top:8px}.toast{position:absolute;left:50%;bottom:185px;transform:translateX(-50%) translateY(9px);padding:8px 12px;border-radius:10px;background:rgba(5,10,8,.84);border:1px solid rgba(255,255,255,.08);font-size:10px;opacity:0;transition:.18s;box-shadow:0 10px 24px #0003}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#mobileControls{position:fixed;inset:0;pointer-events:none}.joystick{position:absolute;left:18px;bottom:24px;width:120px;height:120px;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:rgba(8,14,11,.2);pointer-events:auto}.stick{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(20,29,24,.62);backdrop-filter:blur(12px);box-shadow:0 12px 28px #0003}.stick span{display:block;width:8px;height:8px;border-radius:50%;background:#d8b36d;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px #d8b36d88}.mobile-actions{position:absolute;right:18px;bottom:18px;width:170px;height:170px}.mobile-actions button,.quick{pointer-events:auto;border-radius:50%;background:rgba(8,15,12,.58);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);box-shadow:0 10px 30px #0003}.mobile-actions .attack{width:72px;height:72px;position:absolute;right:0;bottom:28px;background:rgba(67,33,30,.63);border-color:#bb7565;font-size:25px}.mobile-actions .context-action{width:62px;height:62px;position:absolute;left:10px;top:40px;background:rgba(58,74,57,.65);font:700 10px Rajdhani;letter-spacing:.1em}.mobile-actions .sprint{width:46px;height:46px;position:absolute;right:45px;top:3px;color:#e6c36e}.mobile-actions .mount{width:54px;height:54px;position:absolute;right:82px;bottom:8px;background:rgba(50,59,95,.64);font-size:19px}.quick{position:absolute;right:22px;bottom:24px;width:42px;height:42px;background:rgba(12,20,16,.72);font-size:21px}.quick-wheel{position:fixed;right:28px;bottom:76px;width:210px;height:210px;border-radius:50%;background:rgba(7,14,10,.88);border:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 18px 40px #0006;pointer-events:auto}.quick-wheel button{position:absolute;width:70px;height:36px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);font:700 11px Rajdhani;letter-spacing:.08em}.quick-wheel button:nth-child(1){top:25px;left:70px}.quick-wheel button:nth-child(2){top:87px;right:4px}.quick-wheel button:nth-child(3){bottom:25px;left:70px}.quick-wheel button:nth-child(4){top:87px;left:4px}.overlay{position:fixed;inset:0;background:rgba(2,7,4,.52);backdrop-filter:blur(9px);display:grid;place-items:center;z-index:20;pointer-events:auto}.panel{position:relative;width:min(720px,92vw);max-height:84vh;overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(9,15,12,.9);box-shadow:0 30px 80px #0006}.panel>small{letter-spacing:.2em;color:#9ca9a1;font:700 10px Rajdhani}.panel h2{font:700 30px Rajdhani;margin:4px 0 20px}.close{position:absolute;right:13px;top:12px;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.05);font-size:22px}.recipe-grid,.inventory-grid,.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.recipe,.inv-cell,.menu-grid button{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);padding:12px;text-align:left}.recipe strong{display:block;font:700 16px Rajdhani}.recipe span{display:block;color:#9eaaa4;font-size:10px;margin-top:5px}.recipe:disabled{opacity:.38}.inv-cell{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center}.inv-cell b{font-size:23px}.inv-cell span{font-size:11px}.inv-cell em{font-size:10px;color:#a7b3ad;font-style:normal}.fine{color:#88958f;font-size:11px;line-height:1.6}.map-panel{width:min(780px,94vw)}#mapCanvas{width:100%;height:auto;border-radius:12px;background:#101a15;border:1px solid var(--line)}.loading{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#243b2e 0,#0a120e 45%,#050806 100%)}.loading-card{width:min(430px,86vw);text-align:center;padding:34px 24px}.logo{font:700 42px Rajdhani;letter-spacing:.15em}.logo b{color:#e2bc73}.tag{display:block;font:700 11px Rajdhani;letter-spacing:.35em;color:#7e9a82;margin-top:2px}.loading-card p{color:#a2aea7;font-size:11px;margin:28px 0 10px}.progress{height:3px;border-radius:99px;background:#19231d;overflow:hidden}.progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#6f9c78,#dfbd78);animation:load 1.8s ease-in-out infinite}.start{margin-top:22px;padding:12px 18px;border:1px solid rgba(227,193,116,.5);border-radius:11px;background:rgba(200,165,94,.10);font:700 12px Rajdhani;letter-spacing:.18em}.loading-card small{display:block;color:#66736b;font-size:9px;margin-top:18px}.hidden{display:none!important}@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes hit{50%{transform:translateX(-50%) scale(1.015)}}
@media(max-width:700px){.brand{font-size:15px}.survival{top:62px}.top-right{top:13px}.mission{top:106px;max-width:75vw;font-size:10px}.target{top:146px}.context{bottom:123px}.hotbar{bottom:9px}.slot{width:43px;height:51px}.slot strong{font-size:18px}.slot small{left:5px}.slot span{right:5px}.selected-item{bottom:72px}.toast{bottom:180px}.joystick{width:108px;height:108px;left:14px;bottom:16px}.mobile-actions{right:13px;bottom:10px}.quick{right:14px;bottom:17px}.panel{padding:23px 18px}.recipe-grid,.inventory-grid{grid-template-columns:1fr}}
