*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;background:#16392b;color:#f6ecd1;font-family:Verdana,Arial,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button,input{font:inherit}button{cursor:pointer;color:inherit;background:#233c31;border:1px solid #65846a;touch-action:manipulation;border-radius:4px}button:not(:disabled):active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}#world{display:block;width:100%;height:100dvh;image-rendering:pixelated;touch-action:none}header{position:absolute;top:0;left:0;right:0;padding:20px 24px;display:flex;align-items:center;gap:15px;pointer-events:none;background:linear-gradient(#10251ec9,transparent)}.brand{font-family:Georgia,serif;font-size:29px;letter-spacing:.2em;font-weight:bold;text-shadow:2px 3px #14291b}.brand small{display:block;font:9px Verdana;letter-spacing:.22em;color:#d5cfa6;margin-top:5px}#connection{margin-left:auto;font-size:10px;letter-spacing:.05em;background:#102a20cc;padding:8px;border:1px solid #78906150}.iconBtn{width:38px;height:38px;font-size:18px;pointer-events:auto;flex-shrink:0}#hud{position:absolute;inset:0;pointer-events:none}.vitals{position:absolute;top:97px;left:24px;width:185px;padding:12px;background:#112a21e8;border:1px solid #65846a;box-shadow:3px 3px #10241f}.vitals>span{font-size:12px}.vitals>b{float:right;font-size:12px}.hpTrack{height:8px;background:#532c2b;margin:8px 0}.hpTrack i{height:100%;display:block;background:#a9cb64;transition:width .2s}.vitals small{font-size:10px;color:#d8d7b9}.miniMap{position:absolute;right:24px;top:97px;width:118px;height:125px;pointer-events:auto;background:#112b22;padding:5px;border:2px solid #b2a577;box-shadow:3px 3px #122b21}.miniMap canvas{width:100%;height:100px;image-rendering:pixelated}.miniMap span{font-size:9px;display:block;letter-spacing:.13em}#zoneNotice{position:absolute;top:239px;right:24px;font-size:11px;text-align:right;max-width:160px;background:#1a302bc9;padding:8px;line-height:1.5}#feed{position:absolute;top:198px;left:24px;font-size:10px;line-height:1.6;max-width:190px;color:#f3dba7}#feed div{margin-bottom:5px;padding:5px 8px;background:#152c22c9}#target{position:absolute;top:60%;left:50%;transform:translateX(-50%);text-align:center;background:#132a20df;padding:8px 12px;font-size:11px;border:1px solid #85956b;line-height:1.5;max-width:220px}#target:empty{display:none}.bottomHud{position:absolute;left:26px;right:26px;bottom:calc(41px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.steering{display:flex;flex-direction:column;gap:25px;align-items:center;pointer-events:auto}#dial{width:96px;height:96px;border:2px solid #9ea774;border-radius:50%;background:#17392ac9;position:relative;touch-action:none;box-shadow:inset 0 0 0 16px #0e211833}#dialDot{position:absolute;left:calc(50% - 9px);top:calc(50% - 9px);width:18px;height:18px;border-radius:50%;background:#eed496;box-shadow:0 0 0 4px #142c2260;pointer-events:none}#dial span{position:absolute;bottom:-20px;text-align:center;left:-5px;right:-5px;font-size:9px;letter-spacing:.12em;pointer-events:none}#stopBtn{font-size:9px;padding:7px 10px;background:#17392add}.quickbar{display:flex;gap:6px;pointer-events:auto;align-items:end}.quickbar button{position:relative;width:68px;height:68px;background:#142e24ed;border:2px solid #8c9c6c;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:3px;box-shadow:3px 3px #12271d}.quickbar span{font-size:8px}.quickbar b{position:absolute;right:3px;top:3px;font-size:10px;color:#ffe1a0}.quickbar canvas,.actions canvas,.resource canvas,.recipe canvas{image-rendering:pixelated}.actions{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}.actions button{border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;touch-action:none;border:2px solid #d9c293;box-shadow:3px 3px #10281e;background:#9b5836}.actions #chopBtn{width:66px;height:66px;background:#45663d;border-color:#a9bf7c}.actions span{font-size:8px;font-weight:bold}#modeLabel{position:absolute;left:24px;bottom:calc(10px + env(safe-area-inset-bottom));font-size:9px;letter-spacing:.08em;color:#eee5c7;text-shadow:1px 1px #11281c}#toast{position:absolute;left:50%;top:34%;transform:translateX(-50%);padding:12px 18px;color:#263224;background:#f2dda6;border:2px solid #a88546;font-size:13px;max-width:88%;text-align:center;z-index:30;opacity:0;pointer-events:none;transition:opacity .15s}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#0c241ddb,#10291d40);padding:18px;overflow-y:auto;touch-action:pan-y}.lobbyPanel{width:420px;padding:30px;background:#152e23e8;border:1px solid #779262;box-shadow:7px 7px #091b1760}.eyebrow{font-size:9px;letter-spacing:.18em;color:#bfc68c}h1{font-family:Georgia,serif;font-weight:normal;font-size:45px;line-height:1.06;letter-spacing:-.04em;margin:17px 0;color:#f6eac7;text-shadow:2px 3px #091d17}.lead{font-size:13px;color:#cad2b7;line-height:1.7;margin-bottom:22px}label{display:block;font-size:11px;margin-bottom:8px;color:#e4d6a9}input{width:100%;padding:13px 12px;background:#0e241c;border:1px solid #687c50;border-radius:3px;color:#f5eacb;outline:none;font-size:16px;user-select:text;-webkit-user-select:text}input:focus{border-color:#ddc477}.primary{background:#d5b970;color:#243021;border-color:#f0d493;width:100%;padding:15px;font-size:12px;font-weight:bold;letter-spacing:.07em;margin-top:14px;box-shadow:0 3px #977c40}.primary span{display:block;font-weight:normal;font-size:10px;letter-spacing:0;margin-top:5px}.joinRow{display:flex;gap:8px;margin-top:18px}.joinRow input{width:60%;letter-spacing:.1em}.joinRow button{flex:1;font-size:11px;letter-spacing:.04em}.quiet{display:block;width:100%;padding:13px;font-size:11px;margin-top:14px;background:#163226;border-color:#64835a}.lobbyFoot{border-top:1px solid #557149;margin-top:22px;padding-top:15px;font-size:10px;color:#aebb9b;line-height:1.8;text-align:center}.error{font-size:12px;color:#ffc9a7;line-height:1.5}.sheet{position:absolute;inset:0;background:#081e19c9;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:20;touch-action:pan-y}.card{background:#173226;border:2px solid #90a06b;box-shadow:6px 6px #091c1777;padding:25px;width:460px;max-width:100%;max-height:95%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.cardHead{display:flex;justify-content:space-between;align-items:center;gap:10px}.cardHead h2{font-family:Georgia,serif;font-size:32px;font-weight:normal;margin:5px 0 15px}.cardHead small,.resultCard>small{font-size:9px;letter-spacing:.14em;color:#c4c791}.cardHead>button:not(.iconBtn){padding:10px;font-size:10px}.card p,.card li{font-size:13px;line-height:1.65;color:#cfdbbf}.card li{margin-bottom:12px}.card ol{padding-left:20px}.card h3{font-size:13px;margin-top:20px}#resources{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.resource{padding:10px;background:#10281f;border:1px solid #536f47;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.resource canvas{width:26px;height:26px}.resource span{font-size:11px}.resource b{width:100%;font-size:20px;color:#edd7a2}.tabs{display:flex;gap:8px;margin-top:24px}.tabs button{flex:1;padding:12px;font-size:12px}.tabs .active{background:#aec17a;color:#203322;border-color:#d2dda1}.recipe{display:flex;align-items:center;gap:10px;padding:15px 0;border-bottom:1px solid #48613d}.recipe>canvas{width:34px;height:34px}.recipe>div{flex:1}.recipe h4{margin:0 0 5px;font-size:13px}.recipe p{margin:0;font-size:11px;color:#b5c3a3}.recipe .cost{margin-top:5px;color:#e1cb94;font-size:10px}.recipe button{padding:10px;font-size:10px;min-width:65px}.card .footnote{font-size:11px;color:#b3c0a0}.mapCard{width:540px}.mapCard canvas{width:100%;aspect-ratio:1;image-rendering:pixelated;border:2px solid #b0a276}.mapLegend{display:flex;justify-content:space-between;font-size:11px;margin-top:14px;color:#e8d5a4}.resultCard{text-align:center}.resultCard h2{font:44px Georgia;color:#f0d78b;margin:20px 0}#playerList{margin:15px 0}.playerRow{display:flex;gap:12px;align-items:center;padding:12px;border-bottom:1px solid #4f6943;font-size:14px}.playerRow i{width:12px;height:12px;background:#b8cf77;box-shadow:2px 2px #091d16}.playerRow small{margin-left:auto;font-size:10px;color:#c0cfaa}
@media(max-width:600px){header{padding:17px 16px}.brand{font-size:23px}.brand small{font-size:8px}#connection{font-size:8px;padding:6px}.iconBtn{width:32px;height:32px}.vitals{top:86px;left:16px;width:151px;padding:10px}.miniMap{top:86px;right:16px;width:96px;height:104px}.miniMap canvas{height:80px}#zoneNotice{right:16px;top:202px;font-size:10px}#feed{left:16px;top:180px;max-width:165px}.bottomHud{left:16px;right:16px;bottom:calc(37px + env(safe-area-inset-bottom));gap:6px}.quickbar{position:absolute;left:50%;transform:translateX(-50%);bottom:110px}.quickbar button{width:55px;height:55px}.actions{gap:8px}.actions button{width:78px;height:78px}.actions #chopBtn{width:62px;height:62px}#dial{width:90px;height:90px}#modeLabel{left:16px;font-size:8px}.lobbyPanel{padding:25px}h1{font-size:42px}.card{padding:20px}.resource{padding:8px}.resource span{font-size:10px}}
@media(max-height:620px){.lobbyPanel{padding:18px;max-height:100%;overflow-y:auto}h1{font-size:32px;margin:10px 0}.lead{margin-bottom:12px}.lobbyFoot{margin-top:12px;padding-top:10px}.quickbar{position:static;transform:none}header{padding:10px 16px}.vitals{top:65px}.miniMap{top:65px;width:85px;height:90px}.miniMap canvas{height:67px}#zoneNotice{top:166px}.bottomHud{bottom:30px}#feed{display:none}#dial{width:74px;height:74px}.steering{gap:23px}.actions button{width:65px;height:65px}.actions #chopBtn{width:58px;height:58px}}

#moveStick{width:108px;height:108px;border:2px solid #9ea774;border-radius:50%;background:#17392aca;position:relative;touch-action:none;overscroll-behavior:none;box-shadow:inset 0 0 0 18px #0e211833;cursor:grab}#moveStick:active{cursor:grabbing}#moveKnob{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;background:#d8c48c;border:2px solid #f6e3aa;border-radius:50%;box-shadow:0 3px 0 #716642,0 0 0 5px #13291e55;pointer-events:none}#moveStick span{position:absolute;bottom:-21px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.12em;pointer-events:none}.combat{position:relative;pointer-events:auto}.combat #dial{width:108px;height:108px}.combat .actions{position:absolute;right:0;bottom:129px}.bottomHud{bottom:calc(48px + env(safe-area-inset-bottom))}.quickbar{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}.quickbar button{width:55px;height:55px}#dial,#moveStick{touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}@media(max-width:360px){#moveStick,.combat #dial{width:94px;height:94px}.quickbar button{width:47px;height:52px}.combat .actions{bottom:117px}}@media(max-height:620px) and (min-width:601px){#moveStick,.combat #dial{width:84px;height:84px}.bottomHud{bottom:35px}.combat .actions{right:100px;bottom:0}.quickbar{left:42%;bottom:0}.quickbar button{width:48px;height:52px}}

#hud[data-control="tap"] #dial,#hud[data-control="tap"] #shootBtn{display:none}#hud[data-control="tap"] .combat{width:76px;height:108px}#hud[data-control="tap"] .combat .actions{right:0;bottom:0}#hud[data-control="tap"] #chopBtn{width:72px;height:72px}#world{touch-action:none}@media(max-height:620px) and (min-width:601px){#hud[data-control="tap"] .combat{height:84px}}

#hud[data-control="tap"] #moveStick{width:158px;height:158px;background:#15372bbf;box-shadow:inset 0 0 0 2px #38583e}#hud[data-control="tap"] #moveStick:before{content:"";position:absolute;left:27%;top:27%;width:46%;height:46%;border:2px dashed #ced5a1;border-radius:50%;background:#d1d79b12;pointer-events:none}#hud[data-control="tap"] #moveKnob{width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px)}#hud[data-control="tap"] #moveStick[data-moving="true"]{border-color:#f3db8b;background:#375c39dc}#hud[data-control="tap"] .combat{display:none}#hud[data-control="tap"] .quickbar{left:auto;right:0;bottom:0;transform:none}#hud[data-control="tap"] #modeLabel{font-size:8px;letter-spacing:0}@media(max-height:620px){#hud[data-control="tap"] #moveStick{width:134px;height:134px}}

#quickCraftPanel{display:none;position:absolute;right:0;bottom:0;width:182px;pointer-events:auto;background:#10291ec9;border:1px solid #577449;padding:9px 7px 6px;border-radius:8px}#hud[data-control="tap"] #quickCraftPanel{display:block}#hud[data-control="tap"] .quickbar{display:none}.craftCircles{display:flex;justify-content:space-between;gap:4px}.craftSlot{width:52px;text-align:center;min-width:0}.craftSlot>span{display:block;font-size:8px;line-height:1.3;margin:6px -3px 8px;color:#d4d6b1;white-space:nowrap}.craftSlot button{width:51px;height:51px;border-radius:50%;border:2px solid #577052;position:relative;display:flex;align-items:center;justify-content:center;background:#1a3125;touch-action:manipulation;box-shadow:inset 0 -3px #0a2017}.craftSlot canvas{image-rendering:pixelated;opacity:.4;pointer-events:none}.craftSlot button[data-state="ready"]{border-color:#f6dc85;background:#69743d;box-shadow:0 0 13px #efcc6580,inset 0 0 7px #efdb8150}.craftSlot button[data-state="ready"] canvas,.craftSlot button[data-state="complete"] canvas{opacity:1}.craftSlot button[data-state="complete"]{border-color:#8eaa72}.craftSlot button b{position:absolute;right:-3px;top:-4px;min-width:16px;height:16px;font-size:11px;line-height:15px;border-radius:50%;background:#29482d;color:#e9e5a0}.craftSlot button b:empty{display:none}.craftSlot button[data-state="ready"] b{color:#263725;background:#f1da83}#woodCounters{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.woodCount{min-width:0;position:relative;padding:4px 2px;background:#10231bdd;border:1px solid #405c3e;border-radius:3px;text-align:center}.woodCount canvas{width:20px;height:20px;vertical-align:middle;image-rendering:pixelated}.woodCount b{font-size:12px;vertical-align:middle;color:#f3df9f;margin-left:2px}.woodCount span{display:block;font-size:8px;line-height:1.4;color:#d1d6b5;overflow:hidden}.craftFooter{display:flex;align-items:center;justify-content:space-between;gap:3px;margin-top:6px}.craftFooter span{font-size:6px;color:#c4cf9b}.craftFooter button{font-size:8px;padding:3px 5px;background:transparent;border-color:#537044}@media(max-width:370px){#quickCraftPanel{width:166px;padding:8px 5px 5px}.craftSlot{width:48px}.craftSlot button{width:47px;height:47px}#hud[data-control="tap"] #moveStick{width:138px;height:138px}}@media(max-width:335px){#quickCraftPanel{width:158px}#hud[data-control="tap"] #moveStick{width:124px;height:124px}.craftSlot{width:44px}.craftSlot button{width:44px;height:44px}}

.craftSlot>span{font-size:10px}.woodCount span{font-size:9px}.woodCount b{font-size:14px}.craftFooter span,.craftFooter button{font-size:9px}

/* Floating circles: only the controls intercept touches. */
#hud[data-control="tap"] .miniMap{top:86px;right:16px;width:136px;height:145px}
#hud[data-control="tap"] .miniMap canvas{height:118px}
#hud[data-control="tap"] #quickCraftPanel{position:fixed;top:243px;right:16px;bottom:auto;width:60px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none;overflow:visible}
#hud[data-control="tap"] .craftCircles{flex-direction:column;align-items:center;gap:10px;margin:0}
#hud[data-control="tap"] .craftSlot{width:60px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
#hud[data-control="tap"] .craftSlot button{width:46px;height:46px;flex-shrink:0;pointer-events:auto}
#hud[data-control="tap"] .craftSlot>span{font-size:8px;white-space:nowrap;margin:0;line-height:1.3;text-shadow:1px 1px 2px #061d16,0 0 4px #061d16;color:#fff1ce}
#hud[data-control="tap"] #woodCounters{position:absolute;top:calc(100% + 12px);right:0;width:136px;pointer-events:none;gap:6px}
#hud[data-control="tap"] .woodCount{background:none;border:0;padding:0;text-shadow:1px 1px 2px #061d16}
#hud[data-control="tap"] .woodCount canvas{width:18px;height:18px}
#hud[data-control="tap"] .woodCount b{font-size:12px;margin:0}
#hud[data-control="tap"] .woodCount span{font-size:8px}
#hud[data-control="tap"] .craftFooter{display:none}
#hud[data-control="tap"] #zoneNotice{top:184px;left:16px;right:auto;max-width:155px;text-align:left}
#hud[data-control="tap"] #feed{top:243px;max-width:150px}
#hitConfirm{position:absolute;top:27%;left:50%;transform:translateX(-50%);font-size:14px;font-weight:bold;color:#fff0a0;text-shadow:2px 2px #17291d;background:#173024d9;padding:9px 13px;border:1px solid #efcf78;opacity:0;white-space:nowrap;transition:opacity .1s;pointer-events:none}

@media(max-height:700px){#hud[data-control="tap"] .miniMap{top:65px;width:116px;height:124px}#hud[data-control="tap"] .miniMap canvas{height:99px}#hud[data-control="tap"] #quickCraftPanel{top:200px}#hud[data-control="tap"] .craftCircles{gap:6px}#hud[data-control="tap"] .craftSlot button{width:42px;height:42px}}
@media(max-height:480px){#hud[data-control="tap"] .miniMap{top:56px;width:105px;height:112px}#hud[data-control="tap"] .miniMap canvas{height:85px}#hud[data-control="tap"] #quickCraftPanel{top:176px}#hud[data-control="tap"] .craftCircles{gap:4px}#hud[data-control="tap"] .craftSlot button{width:36px;height:36px}#hud[data-control="tap"] .craftSlot{gap:2px}#hud[data-control="tap"] .craftSlot canvas{width:26px;height:26px}#hud[data-control="tap"] #woodCounters{position:fixed;top:auto;bottom:18px;right:94px;width:140px}#hud[data-control="tap"] #zoneNotice{top:143px}}

/* Bottom tool belt and separate right-thumb actions. */
#hud[data-control="tap"] #quickCraftPanel{top:auto;right:auto;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(280px,calc(100vw - 24px))}
#hud[data-control="tap"] .craftCircles{flex-direction:row;justify-content:center;gap:14px}
#hud[data-control="tap"] .craftSlot{width:54px;gap:4px}
#hud[data-control="tap"] .craftSlot button{width:48px;height:48px}
#hud[data-control="tap"] .craftSlot canvas{width:32px;height:32px}
#hud[data-control="tap"] #woodCounters{position:static;top:auto;bottom:auto;right:auto;width:100%;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:9px}
#hud[data-control="tap"] .woodCount canvas{width:16px;height:16px}
#hud[data-control="tap"] .woodCount span{font-size:7px}
#hud[data-control="tap"] .bottomHud{bottom:calc(142px + env(safe-area-inset-bottom))}
#hud[data-control="tap"] .combat{display:block;width:84px;height:158px;pointer-events:none}
#hud[data-control="tap"] .combat .actions{right:0;bottom:0;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
#hud[data-control="tap"] #chopBtn{display:flex;width:82px;height:82px;pointer-events:auto}
#hud[data-control="tap"] #shootBtn{display:flex;width:56px;height:56px;pointer-events:auto}
#hud[data-control="tap"] #shootBtn canvas{width:26px;height:26px}
#hud[data-control="tap"] #modeLabel{display:none}
@media(max-height:480px){#hud[data-control="tap"] .bottomHud{bottom:calc(120px + env(safe-area-inset-bottom))}#hud[data-control="tap"] #moveStick{width:108px;height:108px}#hud[data-control="tap"] .combat{height:138px}#hud[data-control="tap"] #chopBtn{width:70px;height:70px}#hud[data-control="tap"] #shootBtn{width:52px;height:52px}#hud[data-control="tap"] .combat .actions{gap:8px}#hud[data-control="tap"] #quickCraftPanel{bottom:calc(8px + env(safe-area-inset-bottom))}}

#rotatePrompt{z-index:50;background:#0c211ef5}.rotateCard{text-align:center;width:340px}.rotateCard h2{font:30px Georgia;margin:8px 0}.rotatePhone{font-size:65px;color:#e7d196;line-height:1.2}.rotateCard .rotateHint{font-size:11px}.rotateCard small{display:block;font-size:10px;margin-top:16px;color:#aebda2}
/* Landscape leaves the middle clear and places thumbs at the corners. */
@media(orientation:landscape) and (max-height:600px){
header{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}.brand{font-size:22px}.brand small{font-size:7px}
#hud[data-control="tap"] .vitals{top:62px;left:max(16px,env(safe-area-inset-left));width:156px;padding:8px}
#hud[data-control="tap"] .miniMap{top:60px;right:max(16px,env(safe-area-inset-right));width:120px;height:128px}#hud[data-control="tap"] .miniMap canvas{height:102px}
#hud[data-control="tap"] .bottomHud{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom))}
#hud[data-control="tap"] #moveStick{width:124px;height:124px}
#hud[data-control="tap"] .combat{height:146px;width:80px}
#hud[data-control="tap"] #chopBtn{width:76px;height:76px}#hud[data-control="tap"] #shootBtn{width:54px;height:54px}
#hud[data-control="tap"] #quickCraftPanel{bottom:calc(9px + env(safe-area-inset-bottom));width:280px}
#hud[data-control="tap"] #zoneNotice{top:128px;left:max(16px,env(safe-area-inset-left));font-size:9px;max-width:156px;padding:4px}
#hud[data-control="tap"] #target{top:62%;font-size:10px;padding:4px 8px}
#hitConfirm{top:19%}.rotateCard{padding:15px}.rotatePhone{font-size:35px}
}

#lockStatus{position:absolute;left:50%;top:19%;transform:translateX(-50%);font-size:10px;font-weight:bold;padding:6px 10px;background:#142c22dc;color:#ffe58e;border:1px solid #c9b679;max-width:220px;text-align:center;pointer-events:none}#lockStatus:empty{display:none}@media(orientation:landscape) and (max-height:600px){#lockStatus{top:8%}}

/* Compact edge HUD. */
body[data-playing="true"] header .brand,body[data-playing="true"] #connection{display:none}
body[data-playing="true"] header{justify-content:flex-end;padding:8px max(12px,env(safe-area-inset-right));background:none}
#hud[data-control] .vitals{top:calc(10px + env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:150px;padding:7px 9px;background:#10271ec2;border:0;box-shadow:none}
#hud[data-control] .vitals .hpTrack{margin:5px 0;height:6px}#hud[data-control] .vitals>span,#hud[data-control] .vitals>b{font-size:10px}#hud[data-control] .vitals small{font-size:9px}
#hud[data-control] #woodCounters{position:fixed;display:grid;grid-template-columns:repeat(6,1fr);top:calc(73px + env(safe-area-inset-top));left:12px;right:auto;bottom:auto;width:min(230px,calc(100vw - 156px));margin:0;gap:3px;pointer-events:none}
#hud .woodCount{background:none;border:0;padding:0;text-shadow:1px 1px 2px #061d16}#hud .woodCount canvas{width:16px;height:16px}#hud .woodCount b{font-size:11px;margin:0}#hud .woodCount span{font-size:7px}
#hud[data-control] .miniMap{top:calc(54px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
#hud[data-control="tap"] #quickCraftPanel{bottom:calc(5px + env(safe-area-inset-bottom));top:auto}
#hud[data-control="tap"] .bottomHud{bottom:calc(93px + env(safe-area-inset-bottom))}
#hud[data-control="tap"] #zoneNotice{top:calc(113px + env(safe-area-inset-top));left:12px;font-size:9px;padding:3px 5px;max-width:170px}
#hud[data-control="tap"] #feed{display:none}#hud[data-control="tap"] #target{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));background:none;border:0;padding:2px;font-size:9px;text-shadow:1px 1px #10241a}
#lockStatus{top:calc(146px + env(safe-area-inset-top));font-size:9px;padding:4px 7px}
@media(orientation:landscape) and (min-width:600px){
#hud[data-control] #woodCounters{top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:260px}
#hud[data-control="tap"] .vitals{top:calc(10px + env(safe-area-inset-top))}
#hud[data-control="tap"] .miniMap{top:calc(49px + env(safe-area-inset-top))}
#hud[data-control="tap"] .bottomHud{bottom:calc(24px + env(safe-area-inset-bottom))}
#hud[data-control="tap"] #zoneNotice{top:calc(73px + env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
#hud #lockStatus{top:calc(53px + env(safe-area-inset-top))}
}

/* Small world-anchored notices, without opaque panels. */
#toast,#hud #hitConfirm,#hud #lockStatus,#hud[data-control] #target{position:absolute;bottom:auto;transform:translateX(-50%);background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0 3px;color:#f9ebbd;text-shadow:0 1px 2px #0b241c,1px 0 2px #0b241c;font-size:10px;line-height:1.35;max-width:220px;pointer-events:none}
#toast{font-size:11px;max-width:240px;width:max-content}#hud #hitConfirm{color:#ffe39a;font-size:12px}
.recipe>.recipeActions{flex:0 0 110px;display:flex;flex-direction:column;gap:6px}.recipeActions button{padding:9px 5px;font-size:10px}.recipeActions small{font-size:9px}.recipe .ownedCount{color:#f1dc9c;margin-top:5px}.mergeBtn:not(:disabled){background:#607443;border-color:#e6cf80}
@media(max-width:370px){#hud[data-control="tap"] #quickCraftPanel{left:43%;width:230px}#hud[data-control="tap"] .craftCircles{gap:4px}.recipe{gap:6px}.recipe>.recipeActions{flex-basis:95px}}
@media(max-width:370px){}

.targetSetting{display:flex;align-items:center;gap:10px;font-size:12px}.targetSetting input{width:20px;height:20px;accent-color:#b5c584}

/* Flush map, separate hit targets{--map-size:126px}
#hud[data-control] .miniMap{top:0;right:0;width:var(--map-size);height:var(--map-size);padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:#153526}
#hud[data-control] .miniMap canvas{display:block;width:100%;height:100%}
#hud[data-control] .miniMap span{position:absolute;left:0;right:0;bottom:25px;font-size:7px;letter-spacing:.02em;text-shadow:0 1px #000;background:#14291cbd;padding:3px}
#miniTimer{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#14291cdd;color:#f4dda0;font:700 18px monospace;padding:3px}
#mapBtn[data-shrinking="true"] #miniTimer{color:#ffc29e;background:#552f36e8}
body[data-playing="true"] header{z-index:5;right:calc(var(--map-size) + 50px);padding:8px 0;left:auto}
#tutorial{z-index:35;background:#071b16b5}.tutorialCard{width:430px;max-width:100%;padding:24px;background:#163329f2;border:1px solid #9aa47b;box-shadow:6px 6px #0a2018;text-align:center}.tutorialTop{display:flex;align-items:center;justify-content:space-between;color:#c9d7b1;font-size:10px;letter-spacing:.13em}.tutorialTop b{font:36px monospace;color:#f5d99a}.tutorialVisual{height:76px;display:flex;align-items:center;justify-content:center}.tutorialVisual canvas{width:64px;height:64px;image-rendering:pixelated}.tutorialVisual span{font:60px Georgia;color:#e8d497}.tutorialCard h2{font:28px Georgia;margin:12px 0}.tutorialCard p{font:13px/1.7 Verdana;color:#d4dfc5;min-height:70px}.tutorialCard small{font-size:9px;color:#a9bd9e}#tutorialSteps{display:flex;justify-content:center;gap:8px;margin:16px}#tutorialSteps i{width:7px;height:7px;background:#486646}#tutorialSteps i.current{background:#f0d38c}#tutorialSteps i.done{background:#9eba78}.tutorialTrack{height:3px;background:#344f36;margin:12px 0}.tutorialTrack i{display:block;height:100%;background:#e4cd8d}
@media(orientation:landscape) and (max-height:600px){:root{--map-size:112px}.tutorialCard{padding:12px 22px;width:450px}.tutorialVisual{height:45px}.tutorialVisual canvas{width:42px;height:42px}.tutorialVisual span{font-size:40px}.tutorialCard h2{font-size:23px;margin:7px}.tutorialCard p{font-size:12px;min-height:42px;margin:7px 0}#tutorialSteps{margin:9px}.tutorialTop b{font-size:28px}}
@media(max-width:500px){}

/* Independent multitouch crafting: the second finger never becomes a page gesture. */
#quickCraftPanel .craftSlot button{touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}#quickCraftPanel .craftSlot button>*{pointer-events:none}

/* v22: warm mineral borders and restrained forest panels keep the arena readable. */
:root{--gold:#d9bc7c;--panel:#172e25;--ink:#f3e7c3}
button{border-color:#8a9270;color:var(--ink);box-shadow:inset 0 1px #e9dba21f,0 2px 0 #091d17}
button:focus-visible{outline:2px solid #f5db92;outline-offset:3px}
.lobbyPanel{background:linear-gradient(135deg,#162f29f7,#182e21ed);border:1px solid #a79767;box-shadow:0 18px 60px #061e19aa,inset 0 0 0 5px #d5c0840b}
.lobbyPanel h1{color:#f4e2b5}.lobbyPanel .eyebrow{color:#bbc98b}.primary{background:linear-gradient(#adbd7a,#849d61);color:#152d24;border:1px solid #d4d69e}
#hud .vitals{background:#142b23dd;border:1px solid #a9ad7760;box-shadow:inset 0 1px #e4d59a20}
#materialCounters{position:absolute;left:12px;top:100px;font:9px monospace;color:#e5debd;background:#182e24c9;padding:5px 8px;pointer-events:none}
#healBtn{position:absolute;right:18px;bottom:210px;width:72px;height:66px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #b4c185;background:#213b2de8;touch-action:none;pointer-events:auto;border-radius:12px}
#healBtn canvas{width:29px;height:29px;image-rendering:pixelated}#healBtn span{font:9px monospace;pointer-events:none}#healBtn>*{pointer-events:none}#healBtn:disabled{opacity:.45}
.requirements{list-style:none;margin:12px 0;padding:0;font:11px/1.8 Verdana}.requirements li{display:flex;justify-content:space-between;gap:8px}.requirements .missing{color:#e8b69c}.requirements .available{color:#b8d18e}
@media(orientation:landscape) and (max-height:600px){#healBtn{bottom:180px;right:14px;width:62px;height:54px}#materialCounters{top:87px;font-size:8px}}
@media(max-width:540px) and (orientation:portrait){#healBtn{bottom:225px}}
#hud[data-control="dual"] #quickCraftPanel{display:block;position:fixed;top:auto;right:auto;left:50%;bottom:calc(5px + env(safe-area-inset-bottom));transform:translateX(-50%);width:286px;padding:0;border:0;background:none;pointer-events:none}
#hud[data-control="dual"] .craftCircles{display:flex;flex-direction:row;justify-content:center;gap:4px;margin:0}
#hud[data-control="dual"] .craftSlot{width:54px;display:flex;flex-direction:column;align-items:center;gap:4px}
#hud[data-control="dual"] .craftSlot button{width:48px;height:48px;pointer-events:auto}
#hud[data-control="dual"] .craftSlot canvas{width:30px;height:30px}
#hud[data-control="dual"] .craftSlot>span{font-size:8px;white-space:nowrap;text-shadow:1px 1px #10281e}
#hud[data-control="dual"] .craftFooter,#hud[data-control="dual"] .quickbar{display:none}
@media(orientation:landscape) and (max-height:450px){#hud[data-control] .craftSlot button{width:42px;height:42px}#healBtn{bottom:175px;right:13px}}