@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--ink:#eaf1e9;--muted:#94a79d;--panel:rgba(12,23,22,.91);--panel2:rgba(18,35,32,.94);--line:rgba(198,224,206,.16);--mint:#a8d7a9;--lime:#d0e67c;--danger:#df6b55;--gold:#e0be77;--shadow:0 16px 50px rgba(0,0,0,.4)}
*{box-sizing:border-box}html,body,#game-root{width:100%;height:100%;margin:0;overflow:hidden;background:#101b1b;color:var(--ink);font-family:Inter,system-ui,sans-serif;touch-action:none}button,input{font:inherit}button{color:inherit;cursor:pointer}#game-canvas{display:block;width:100%;height:100%;outline:0}.hidden{display:none!important}.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,rgba(6,15,15,.95),rgba(12,27,25,.82) 55%,rgba(14,21,18,.9));overflow:auto}.loading-screen{z-index:50;flex-direction:column;gap:12px;background:#101c1b}.loading-mark{font:900 76px 'Barlow Condensed';letter-spacing:-5px;color:var(--lime);text-shadow:0 0 36px rgba(194,225,123,.22)}.loading-screen p{font-size:12px;letter-spacing:4px;font-weight:800}.loading-screen small{color:var(--muted);font-size:10px;letter-spacing:1px}.loading-track{width:220px;height:3px;background:#30413a;overflow:hidden}.loading-track span{display:block;height:100%;width:0;background:var(--lime);transition:width .25s}.menu-screen{align-items:stretch;justify-content:center;flex-direction:column;padding:7vh 8vw;isolation:isolate;background:radial-gradient(ellipse at 77% 46%,rgba(99,132,86,.2),transparent 36%),linear-gradient(110deg,rgba(4,11,11,.97) 0%,rgba(9,23,21,.91) 58%,rgba(10,24,21,.84) 100%)}.menu-screen:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background:linear-gradient(130deg,transparent 40%,rgba(157,196,132,.1) 40.2%,transparent 40.7%),repeating-linear-gradient(0deg,transparent 0 48px,rgba(255,255,255,.025) 49px 50px)}.menu-grain{position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}.menu-brand{max-width:650px;margin:0 0 34px 4vw}.brand-kicker,.section-kicker{font-size:10px;font-weight:800;letter-spacing:3px;color:var(--lime)}.menu-brand h1{margin:10px 0 0;font:900 clamp(70px,12vw,150px)/.8 'Barlow Condensed';letter-spacing:-5px}.menu-brand h1 span{color:var(--lime)}.menu-brand p{font-size:11px;font-weight:700;letter-spacing:3px;color:#b6c5b8;margin-top:20px}.menu-card,.character-card,.pause-card{width:min(440px,92vw);margin-left:4vw;padding:24px 26px;background:rgba(9,20,19,.84);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.menu-tabs,.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1.5px;color:#91a79c;font-weight:800}.status-dot{color:var(--mint)}.status-dot:before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#9ee0a1;box-shadow:0 0 9px #9ee0a1}.save-summary{margin:22px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:#a6b7ad;line-height:1.6}.menu-actions{display:grid;gap:9px}.btn{border:1px solid transparent;padding:13px 16px;font-size:10px;font-weight:900;letter-spacing:1.5px;transition:.18s;min-height:42px}.btn-primary{background:var(--lime);color:#18251c}.btn-primary:hover{background:#e1f09c;transform:translateY(-1px)}.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn-secondary{background:rgba(172,206,177,.1);border-color:rgba(183,219,184,.23);color:#e3eee2}.btn-secondary:hover{background:rgba(172,206,177,.18)}.btn-ghost{background:transparent;border-color:var(--line);color:#9db0a4}.btn-ghost:hover{border-color:var(--mint);color:var(--ink)}.menu-foot{margin-top:19px;font-size:8px;letter-spacing:1px}.menu-note{margin:20px 0 0 4vw;color:#789087;font-size:10px;letter-spacing:.7px}.character-screen,.pause-screen{background:rgba(5,13,13,.85);backdrop-filter:blur(14px)}.character-card,.pause-card{margin:0;width:min(480px,92vw)}.character-card h2,.pause-card h2{font:900 48px/.9 'Barlow Condensed';margin:13px 0}.character-card h2 span{color:var(--lime)}.character-card>p,.tame-panel p{font-size:11px;line-height:1.6;color:#9fb1a5}.gender-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.gender-option{background:rgba(157,186,162,.08);border:1px solid var(--line);padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:7px}.gender-option.selected{border-color:var(--lime);background:rgba(197,224,133,.1)}.gender-icon{font-size:34px;color:var(--lime)}.gender-option b{font:800 15px 'Barlow Condensed';letter-spacing:1px}.gender-option small{font-size:9px;color:var(--muted)}.name-label{display:block;font-size:9px;font-weight:800;letter-spacing:1.2px;color:#a5b6aa;margin-bottom:8px}.character-card input{width:100%;background:#101d1b;border:1px solid var(--line);color:var(--ink);padding:12px;outline:none}.character-card input:focus{border-color:var(--mint)}.character-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:18px}.pause-card h2{color:var(--lime);font-size:58px}.pause-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}.pause-hint{font-size:9px;color:#7f968b;margin:18px 0 0;line-height:1.5}
/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;z-index:5}.hud button,.side-panel,.map-panel,.tame-panel,.touch-controls{pointer-events:auto}.hud-top{position:absolute;top:calc(15px + env(safe-area-inset-top));left:18px;right:18px;display:flex;align-items:center;gap:10px}.location-card,.day-card{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(8,18,17,.68);border:1px solid rgba(220,240,220,.12);backdrop-filter:blur(8px)}.location-card>div,.day-card>div{display:flex;flex-direction:column;gap:3px}.location-card b,.day-card b{font:800 13px 'Barlow Condensed';letter-spacing:1px}.location-card small,.day-card small{font-size:8px;color:#a3b8aa;letter-spacing:1px}.live-dot{width:7px;height:7px;border-radius:50%;background:#b5dd8c;box-shadow:0 0 10px #b5dd8c}.day-card{margin-left:auto}.day-card>span{font-size:20px;color:#ecd28a}.hud-icon-btn{width:39px;height:39px;background:rgba(8,18,17,.68);border:1px solid var(--line);font-size:19px}.hud-left{position:absolute;top:92px;left:18px;width:min(230px,43vw)}.status-stack{display:grid;gap:7px;padding:11px 12px;background:rgba(8,18,17,.63);border:1px solid rgba(220,240,220,.1);backdrop-filter:blur(7px)}.status-line{display:grid;grid-template-columns:15px 1fr 25px;align-items:center;gap:7px}.status-symbol{font-size:11px;color:#c3d8c2;text-align:center}.status-line>b{font-size:9px;color:#d3dfd4;text-align:right}.status-track,.target-bar,.tame-track{height:5px;background:rgba(225,239,224,.15);overflow:hidden}.status-track i,.target-bar i,.tame-track i{display:block;width:100%;height:100%;transition:width .2s}.health-fill{background:#d96c5b}.stamina-fill{background:#d7d98d}.hunger-fill{background:#c79c5c}.thirst-fill{background:#6eb9cd}.quick-info{display:flex;justify-content:space-between;padding:7px 11px;margin-top:5px;background:rgba(8,18,17,.52);font-size:8px;letter-spacing:1px;color:#b4c2b5}.hud-right{position:absolute;right:18px;top:90px;display:flex;align-items:flex-end;flex-direction:column;gap:10px}.mini-map{width:125px;height:125px;border-radius:50%;border:2px solid rgba(225,239,222,.5);background:radial-gradient(circle,transparent 0 67%,#16404a 68% 100%),conic-gradient(from -18deg,#55734f 0 72deg,#81915d 72deg 144deg,#667b4d 144deg 216deg,#9a7551 216deg 288deg,#87938a 288deg 360deg);overflow:hidden;position:relative;box-shadow:0 8px 22px #0006}.mini-map:before,.mini-map:after{content:"";position:absolute;background:rgba(224,230,183,.18)}.mini-map:before{width:100%;height:1px;top:50%}.mini-map:after{height:100%;width:1px;left:50%}.map-crosshair{position:absolute;width:23px;height:23px;border:1px solid rgba(245,247,202,.3);border-radius:50%;left:calc(50% - 11px);top:calc(50% - 11px)}.map-player{position:absolute;left:calc(50% - 4px);top:calc(50% - 4px);z-index:2;width:8px;height:8px;background:#f3e6a0;border:2px solid #334533;border-radius:50%;box-shadow:0 0 8px #fff}.map-n{position:absolute;top:5px;left:calc(50% - 3px);font-size:8px;font-weight:900;color:#eff0d0}.target-card{width:155px;padding:9px;background:rgba(8,18,17,.75);border:1px solid var(--line)}.target-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.5px}.target-top span{color:var(--lime)}.target-bar{margin:7px 0 5px}.target-bar i{background:#d66b5c}.target-card small{font-size:8px;color:#a7baad}.interaction-prompt{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(7,17,16,.83);border:1px solid rgba(212,232,193,.28);font-size:9px;font-weight:800;letter-spacing:1px}.interaction-prompt kbd{padding:4px 7px;background:var(--lime);color:#1b281e}.crosshair{position:absolute;left:50%;top:50%;width:8px;height:8px;border:1px solid rgba(255,255,255,.8);border-radius:50%;transform:translate(-50%,-50%);opacity:.6}.toast{position:absolute;top:18%;left:50%;transform:translate(-50%,-10px);padding:10px 16px;background:rgba(8,19,17,.9);border:1px solid rgba(205,229,170,.3);font-size:10px;font-weight:800;letter-spacing:.6px;opacity:0;transition:.25s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.damage-flash{position:absolute;inset:0;border:0 solid rgba(201,57,43,0);transition:border .12s;pointer-events:none}.damage-flash.hit{border:8px solid rgba(201,57,43,.3)}.bottom-hud{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(620px,95vw)}.hotbar{display:flex;gap:5px;padding:5px;background:rgba(8,18,17,.75);border:1px solid rgba(220,240,220,.13);backdrop-filter:blur(8px)}.hot-slot{position:relative;width:61px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:rgba(155,181,158,.07);border:1px solid rgba(206,228,201,.12)}.hot-slot.selected{border-color:var(--lime);background:rgba(197,224,133,.12)}.slot-num{position:absolute;left:5px;top:3px;font-size:8px;color:#91a69a}.slot-icon{font-size:19px}.hot-slot small{font-size:7px;letter-spacing:.4px;color:#bdcabe}.bottom-actions{display:flex;justify-content:center;gap:5px}.action-btn{padding:8px 12px;background:rgba(8,18,17,.75);border:1px solid rgba(220,240,220,.14);font-size:8px;font-weight:800;letter-spacing:.7px;color:#d5e1d6}.action-btn span{margin-right:5px;color:var(--lime);font-size:13px}.action-btn:active{background:rgba(197,224,133,.2)}
.side-panel,.map-panel{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:min(340px,calc(100vw - 28px));max-height:72vh;overflow:auto;padding:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.panel-header,.tame-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:13px}.panel-header small,.tame-heading small{display:block;font-size:8px;letter-spacing:2px;color:var(--lime);font-weight:800;margin-bottom:3px}.panel-header h3{margin:0;font:800 26px 'Barlow Condensed';letter-spacing:1px}.panel-close{border:1px solid var(--line);background:rgba(240,250,240,.04);width:30px;height:30px;font-size:20px;color:#aebeb1}.inventory-capacity{display:flex;justify-content:space-between;font-size:8px;color:#9fb1a4;letter-spacing:.8px;margin:8px 0}.inventory-capacity b{color:var(--lime)}.inventory-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.item-card,.recipe-card,.build-card{display:flex;align-items:center;gap:9px;padding:10px;background:rgba(175,205,174,.07);border:1px solid rgba(216,234,210,.1);min-height:53px}.item-card .item-icon{font-size:19px}.item-card>div:nth-child(2),.recipe-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.item-card b,.recipe-card b,.build-card b{font-size:9px}.item-card small,.recipe-card small,.build-card small{font-size:8px;color:#9aad9f;line-height:1.35}.item-qty{font-size:11px;color:var(--lime);font-weight:800}.recipe-list,.build-list{display:grid;gap:7px}.recipe-card,.build-card{justify-content:space-between}.recipe-card button,.build-card button{padding:7px 8px;background:rgba(205,229,153,.16);border:1px solid rgba(205,229,153,.23);color:#e3edda;font-size:8px;font-weight:900;white-space:nowrap}.recipe-card button:disabled,.build-card button:disabled{opacity:.35}.panel-tip{font-size:9px;line-height:1.5;color:#82998d;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}.map-panel{width:min(420px,calc(100vw - 28px))}.large-map{position:relative;width:100%;aspect-ratio:1;background:radial-gradient(circle,transparent 0 55%,#16414d 56% 100%),conic-gradient(from -18deg,#55734f 0 72deg,#81915d 72deg 144deg,#667b4d 144deg 216deg,#9a7551 216deg 288deg,#87938a 288deg 360deg);border:1px solid rgba(208,230,195,.25);overflow:hidden}.large-map:before{content:"";position:absolute;inset:0;background:linear-gradient(25deg,transparent 49%,rgba(105,184,186,.5) 49.5% 50.5%,transparent 51%),linear-gradient(90deg,transparent 49%,rgba(205,220,169,.12) 49.5% 50%,transparent 50.5%);opacity:.7}.large-map-player{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:#f7f0a2;border:2px solid #34412a;box-shadow:0 0 12px #f2e98b}.map-legend{display:flex;gap:12px;margin:12px 0;font-size:8px;color:#a9bcad}.map-panel p{font-size:9px;color:#84988d}.tame-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(370px,calc(100vw - 32px));padding:17px;background:var(--panel2);border:1px solid rgba(206,231,162,.3);box-shadow:var(--shadow)}.tame-heading b{font:800 20px 'Barlow Condensed'}.tame-meta{display:flex;justify-content:space-between;font-size:9px;font-weight:800;color:#c8d6bd;margin:12px 0 8px}.tame-track{height:8px}.tame-track i{background:var(--lime)}.tame-panel .btn{width:100%;margin-top:9px}
.touch-controls{display:none;position:absolute;inset:auto 0 calc(100px + env(safe-area-inset-bottom)) 0;height:150px}.joystick-zone{position:absolute;left:15px;bottom:0;width:130px;height:130px;display:flex;align-items:center;justify-content:center}.joystick-base{position:relative;width:112px;height:112px;border-radius:50%;border:1px solid rgba(228,241,221,.24);background:rgba(8,17,16,.28);backdrop-filter:blur(2px)}#joystick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(229,242,221,.6);background:rgba(198,222,163,.4);box-shadow:0 3px 10px #0005}.touch-actions{position:absolute;right:12px;bottom:0;width:150px;height:156px}.touch-btn{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(9,20,18,.6);border:1px solid rgba(224,239,214,.3);font-size:19px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;backdrop-filter:blur(5px)}.touch-btn small{font-size:5px;letter-spacing:.25px;color:#d0ddcf}.touch-jump{right:0;top:0}.touch-attack{left:0;top:54px;background:rgba(117,57,47,.5)}.touch-interact{right:0;top:54px}.touch-crouch{left:0;top:0}.touch-sprint{left:0;bottom:0}.touch-mount{right:0;bottom:0}.touch-view{left:57px;top:4px;width:36px;height:36px;font-size:12px}.touch-sprint.active{background:rgba(177,194,95,.65);border-color:var(--lime);color:#fff}.control-hint{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);color:rgba(220,235,220,.6);font-size:7px;letter-spacing:1px;white-space:nowrap}.hud.mobile .touch-controls{display:block}.hud.mobile .control-hint{display:none}.hud.mobile .bottom-hud{bottom:calc(12px + env(safe-area-inset-bottom));left:50%;width:auto}.hud.mobile .hotbar{transform:scale(.82);transform-origin:center bottom;margin-bottom:-4px}.hud.mobile .bottom-actions{gap:3px}.hud.mobile .action-btn{font-size:7px;padding:7px 8px}.hud.mobile .hud-left{top:84px;width:155px}.hud.mobile .status-stack{padding:8px}.hud.mobile .hud-right{top:82px;right:10px}.hud.mobile .mini-map{width:90px;height:90px}.hud.mobile .location-card{padding:7px 9px}.hud.mobile .location-card b{font-size:11px}.hud.mobile .day-card{padding:7px 8px}.hud.mobile .day-card b{font-size:11px}.hud.mobile .side-panel,.hud.mobile .map-panel{right:8px;top:55%;max-height:62vh}.hud.mobile .tame-panel{top:47%}
@media(max-width:700px){.menu-screen{padding:5vh 6vw}.menu-brand{margin-left:0;margin-bottom:25px}.menu-brand h1{font-size:clamp(66px,20vw,110px)}.menu-brand p{font-size:8px;letter-spacing:1.8px}.menu-card{margin-left:0;padding:18px}.menu-note{margin-left:0;font-size:8px}.character-card,.pause-card{padding:20px}.character-card h2{font-size:42px}.pause-grid{grid-template-columns:1fr}.status-line{grid-template-columns:13px 1fr 22px;gap:5px}.hud-left{top:83px;left:9px}.hud-top{left:9px;right:9px;top:calc(8px + env(safe-area-inset-top))}.hud-right{right:9px;top:83px}.bottom-hud{bottom:calc(8px + env(safe-area-inset-bottom))}}
@media(hover:none),(pointer:coarse){.hud:not(.mobile) .touch-controls{display:block}.hud:not(.mobile) .control-hint{display:none}}

#rotate-build-btn{width:100%;margin-top:7px}