/* v23 · weathered brass, leather and linen. The forest keeps the center stage. */
:root{--gold:#d9bd83;--ink:#f2e6c8;--panel:#172722;--map-size:112px}
body{background:#1b3027;color:var(--ink);font-family:Arial,sans-serif}
button{border-radius:8px;border-color:#827356;background:linear-gradient(150deg,#394439,#202c25);box-shadow:inset 0 1px #ead7a32b,0 3px 8px #08110c55}
button:not(:disabled):hover{border-color:#dfc58e}
.brand{letter-spacing:.27em;color:#ecdbaf}.brand small{color:#b7b99a}
.screen{justify-content:flex-start;background:linear-gradient(90deg,#0b1916ec 0%,#13221bbb 35%,#14211b18 75%);padding:36px 7vw}
.lobbyPanel{width:430px;max-width:100%;padding:30px;background:linear-gradient(140deg,#202b23f5,#101f19ee);border:1px solid #bba3748c;border-radius:2px;box-shadow:0 24px 70px #08170e8a,inset 0 0 0 5px #d3b57909;position:relative}
.lobbyPanel:before,.lobbyPanel:after{content:"";position:absolute;width:24px;height:24px;border-color:#d6be86;border-style:solid;pointer-events:none}
.lobbyPanel:before{left:-4px;top:-4px;border-width:2px 0 0 2px}.lobbyPanel:after{right:-4px;bottom:-4px;border-width:0 2px 2px 0}
.eyebrow{color:#c6b88f!important;letter-spacing:.15em;font-size:9px}
.lobbyPanel h1{font:normal 44px/1.08 Georgia,serif;letter-spacing:-.03em;color:#f4e7c8;text-shadow:0 3px #07140f;margin:19px 0}
.lead{font-size:13px;line-height:1.6;color:#c2c9b2}.lobbyFoot{color:#aaa98a;line-height:1.7}
.primary{background:linear-gradient(150deg,#deca91,#b49a64);color:#202d22;border-color:#f0d99e;box-shadow:inset 0 1px #f7eccc,0 4px 12px #08170f55;letter-spacing:.07em}
#combatTrainingBtn{border:1px solid #b3a173;color:#e8d4a2;background:linear-gradient(110deg,#414c35,#2b3d2b);padding:13px 7px;letter-spacing:.07em}
input{background:#0f201ad9;border-color:#716c51;color:#f0e4c5;border-radius:5px}
.card,.tutorialCard,#inventory .inventoryCard{background:linear-gradient(145deg,#293327fa,#15271ffb);border-color:#bba270;border-radius:6px;box-shadow:0 16px 70px #020b08a8,inset 0 0 0 4px #e5cf8f0a}
.sheet{backdrop-filter:blur(3px)}
#hud[data-control] .vitals{left:max(14px,env(safe-area-inset-left));top:12px;width:166px;padding:9px 12px 8px;background:linear-gradient(110deg,#162820ec,#1c2c21b8);border:1px solid #b99e695c;border-left:3px solid #c5af7c;border-radius:3px 12px 12px 3px;box-shadow:0 4px 15px #07171038}
#hud[data-control] .vitals>span{font:12px Georgia;letter-spacing:.04em}#hud[data-control] .vitals>b{font:700 13px Georgia;color:#eee0b5}
#hud[data-control] .vitals .hpTrack{height:5px;background:#56332d;box-shadow:0 0 0 1px #091711;margin:7px 0}
#hud[data-control] .vitals small{font-size:8px;letter-spacing:.08em;color:#cad0b5}
#hud[data-control] .miniMap{right:10px;top:10px;width:var(--map-size);height:var(--map-size);border:2px solid #b7a478;border-radius:50%;background:#213025;box-shadow:0 0 0 4px #13271dc9,0 4px 12px #08181177;overflow:hidden}
#hud[data-control] .miniMap span{bottom:22px;background:#12261bc4;font-size:6px;padding:2px}
#miniTimer{font-size:14px;padding:3px;background:#13221ed9}
#hud #inventoryBtn{right:calc(var(--map-size) + 24px);top:14px;width:40px;height:40px;background:#263b2eee;border:1px solid #bba477;border-radius:9px}
body[data-playing="true"] header{right:calc(var(--map-size) + 73px);top:6px}
body[data-playing="true"] header #helpBtn{width:36px;height:36px;font-family:Georgia;background:#1b3227db}
#hud[data-control] #woodCounters{top:14px;left:50%;width:246px;transform:translateX(-50%);padding:5px 8px;border-radius:8px;background:#18291fad;border:1px solid #c3ab7540;gap:4px}
#hud .woodCount canvas{width:22px;height:22px}#hud .woodCount span{font-size:7px;color:#d2ccb2}#hud .woodCount b{font:11px Georgia}
#materialCounters{top:86px;left:17px;border:0;background:#1d302184;font:9px/1.5 monospace;color:#d1cdb2;padding:3px 7px;border-radius:4px;max-width:200px}
#hud[data-control] .bottomHud{left:max(23px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));gap:0}
#hud[data-control] #moveStick{width:116px;height:116px;border:1px solid #d3be897d;background:radial-gradient(circle,#32493455 32%,#192c2277 33%,#243d2a66 65%,#d7c69918 67%,#172f2066 70%);box-shadow:0 4px 20px #0a1e1744,inset 0 0 0 7px #bbaa7320}
#hud[data-control] #moveStick:before{content:"";position:absolute;inset:21px;border:1px dashed #d5c58e45;border-radius:50%;pointer-events:none}
#hud[data-control] #moveKnob{width:43px;height:43px;left:calc(50% - 21.5px);top:calc(50% - 21.5px);background:radial-gradient(circle at 35% 25%,#ddd0a0,#948653);border:2px solid #e8d7a3;box-shadow:0 3px 8px #08160dc9,inset 0 0 0 5px #7c795331}
#moveStick span{bottom:-17px;font-size:8px;letter-spacing:.17em;color:#e8dbb9;text-shadow:0 2px 2px #132b1a}
#hud[data-control] .combat{display:block;width:244px;height:153px;pointer-events:none}
#hud[data-control] .combat #dial{position:absolute;right:163px;bottom:74px;width:66px;height:66px;border:1px solid #c7bb8370;background:radial-gradient(circle,#adbb6930,#19332977);box-shadow:inset 0 0 0 7px #cebd8f12;pointer-events:auto}
#dialDot{width:13px;height:13px;left:calc(50% - 6.5px);top:calc(50% - 6.5px);background:#ecdaad}
#dial span{font-size:7px;bottom:-14px;letter-spacing:.07em}
#hud[data-control] .combat .actions{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end;gap:13px;flex-direction:row-reverse;pointer-events:none}
#hud[data-control] #shootBtn{position:relative;display:flex;width:149px;height:150px;border-radius:48% 48% 16px 16px;border:1px solid #baa3737d;background:radial-gradient(ellipse at 50% 46%,#58704533,#24362ad6 68%,#213126db);box-shadow:inset 0 1px #e8d4a938,0 5px 20px #0a1b1055;overflow:visible;pointer-events:auto;touch-action:none;transform:none;transition:border-color .12s,background .12s}
#shootBtn>*{pointer-events:none}#shootBtn #bowDraw{position:absolute;left:-5px;top:8px;width:160px;height:125px;image-rendering:auto}
#shootBtn #bowLabel{position:absolute;left:0;right:0;top:8px;font:8px Georgia;letter-spacing:.2em;color:#decea6}
#hud[data-control] #shootBtn>span{position:absolute;bottom:8px;left:3px;right:3px;font-size:7px;letter-spacing:.06em;font-weight:400;color:#f3e2b4}
#hud[data-control] #shootBtn[data-drawing="true"]{border-color:#f0d28a;background:radial-gradient(ellipse,#9c9b4644,#2c402de6);box-shadow:0 0 24px #cfb55e22,inset 0 0 0 3px #f0d28a18}
#hud[data-control] #shootBtn:disabled{opacity:.4}
#hud[data-control] #chopBtn{width:64px;height:64px;border-radius:50%;border:1px solid #c3b483;background:radial-gradient(circle at 40% 20%,#64744d,#334936);box-shadow:inset 0 0 0 4px #c3b48316,0 4px 9px #0d1f1555;pointer-events:auto}
#chopBtn canvas{width:32px;height:32px}#chopBtn span{font-size:7px;letter-spacing:.05em}
#hud #healBtn{position:fixed;right:25px;bottom:calc(188px + env(safe-area-inset-bottom));width:58px;height:50px;border-radius:13px;background:#273e2eda;border:1px solid #b6b17a80;box-shadow:0 3px 10px #0a1b1250}
#healBtn canvas{width:25px;height:25px}#healBtn span{font-size:8px}
#hud[data-control] #quickCraftPanel{bottom:calc(8px + env(safe-area-inset-bottom));width:270px}
#hud[data-control] .craftSlot button{width:42px;height:42px;border:1px solid #a89c725c;border-radius:9px;background:linear-gradient(#354637e6,#1b3024e6);box-shadow:0 4px 10px #10251577,inset 0 1px #d4cc9e22}
#hud[data-control] .craftSlot{width:49px;gap:3px}#hud[data-control] .craftSlot canvas{width:29px;height:29px}
#hud[data-control] .craftSlot>span{margin:0;font-size:7px;color:#e6dfc5;letter-spacing:.03em;max-width:53px;white-space:normal;text-align:center;line-height:1.3;min-height:18px}
#hud[data-control] .craftSlot button[data-state="ready"]{border-color:#e6cf84;background:linear-gradient(#788151e6,#455c38ed);box-shadow:0 0 10px #efd17b30}
#hud #modeLabel{display:none}
#hud #feed{display:none}#hud #zoneNotice{left:16px;right:auto;top:117px;max-width:190px;font-size:10px;background:#4c302783;border-radius:4px;padding:5px}
#zoneNotice:empty{display:none}#hud #lockStatus{font-size:10px;color:#fff0bc}#hud #target{font-size:10px}
#inventory .inventorySlot{border-radius:4px;background:linear-gradient(#243829,#16281e);border-color:#807959}
#inventory .inventorySlot.selected{border-color:#e6c787;background:#43533a;box-shadow:inset 0 0 0 1px #d5bc7980}
#inventory .inventorySlot canvas,#inventory .inventoryPreview canvas{image-rendering:auto}
@media(orientation:landscape) and (max-height:600px){.screen{padding:12px 7vw}.lobbyPanel{width:460px;padding:16px 24px}.lobbyPanel h1{font-size:30px;margin:10px 0}.lobbyPanel .lead{font-size:11px;margin:6px 0 10px}.lobbyPanel label{font-size:9px}.lobbyPanel input{padding:8px}.lobbyPanel button{padding:9px}.lobbyFoot{font-size:8px;margin-top:7px}.lobbyPanel .eyebrow{font-size:8px}.lobbyPanel .joinRow{margin:7px 0}.lobbyPanel #combatTrainingBtn{padding:9px}.lobbyPanel #trainingBtn{padding:6px}.brand{font-size:22px}.brand small{font-size:7px}}
@media(orientation:landscape) and (max-height:420px){:root{--map-size:96px}#hud[data-control] .bottomHud{bottom:24px}#hud[data-control] #moveStick{width:103px;height:103px}#hud[data-control] .combat{height:135px;width:225px}#hud[data-control] #shootBtn{width:138px;height:137px}#shootBtn #bowDraw{width:150px;height:117px;top:4px}#hud[data-control] .combat #dial{right:153px;bottom:73px;width:58px;height:58px}#hud #healBtn{bottom:173px;width:50px;height:45px}#hud[data-control] #woodCounters{width:222px;top:10px}#hud[data-control] .vitals{width:154px}#hud .woodCount canvas{width:18px;height:18px}#hud[data-control] #quickCraftPanel{left:44%;width:245px}#hud[data-control] .craftSlot{width:44px}#hud[data-control] .craftSlot button{width:38px;height:38px}}
@media(orientation:landscape) and (max-height:600px){.lobbyPanel{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:7px;width:600px;max-width:84vw;max-height:calc(100dvh - 24px);overflow:visible;padding:18px 22px}.lobbyPanel .eyebrow,.lobbyPanel h1,.lobbyPanel .lead,.lobbyPanel .lobbyFoot,.lobbyPanel .error{grid-column:1/-1;margin:0}.lobbyPanel h1{font-size:30px;line-height:1.03}.lobbyPanel h1 br{display:none}.lobbyPanel h1 br:after{content:" "}.lobbyPanel .lead{font-size:11px;line-height:1.4;margin-bottom:3px}.lobbyPanel label{grid-column:1;align-self:end;margin:0;font-size:9px}.lobbyPanel #nickname{grid-column:1;grid-row:5;padding:9px;font-size:14px;min-width:0}.lobbyPanel #createBtn{grid-column:2;grid-row:4/6;margin:0;align-self:stretch;padding:8px;font-size:10px}.lobbyPanel .joinRow{grid-column:1/-1;margin:0}.lobbyPanel .joinRow input{font-size:12px;padding:8px}.lobbyPanel .quiet{margin:0;font-size:9px}.lobbyPanel #combatTrainingBtn,.lobbyPanel #trainingBtn{padding:12px 3px}.lobbyPanel .lobbyFoot{padding-top:7px;font-size:8px;line-height:1.4}.lobbyPanel .lobbyFoot br:first-of-type{display:none}.lobbyPanel .error:empty{display:none}}
@media(orientation:portrait){.screen{justify-content:center;padding:80px 18px 20px}.lobbyPanel{padding:24px}.lobbyPanel h1{font-size:38px}#hud[data-control] #woodCounters{left:12px;top:85px;transform:none;width:222px}#materialCounters{top:141px}#hud[data-control] .bottomHud{left:14px;right:12px;bottom:92px}#hud[data-control] #moveStick{width:96px;height:96px}#hud[data-control] .combat{width:220px;height:142px}#hud[data-control] #shootBtn{width:132px;height:139px}#shootBtn #bowDraw{width:146px;height:114px}#hud[data-control] .combat #dial{right:146px}#hud #healBtn{bottom:252px;right:23px}#hud #modeLabel{bottom:67px}#hud[data-control] #quickCraftPanel{bottom:10px}#hud #zoneNotice{top:177px}#hud[data-control] #chopBtn{width:60px;height:60px}}
@media(orientation:portrait) and (max-width:360px){#hud[data-control] .combat{width:190px}#hud[data-control] #shootBtn{width:118px}#shootBtn #bowDraw{left:-12px}#hud[data-control] .combat #dial{right:132px;width:53px;height:53px}#hud[data-control] #chopBtn{width:54px;height:54px}#hud[data-control] .combat .actions{gap:9px}#hud[data-control] #moveStick{width:82px;height:82px}}
/* v24: an upward bow with room to pull down; one separate look/action pad. */
#hud[data-control] .combat{width:250px;height:168px}
#hud[data-control] #shootBtn{height:166px}
#shootBtn #bowDraw{top:18px}
#hud[data-control] #chopBtn{position:relative;width:86px;height:86px;margin-bottom:10px;touch-action:none;transform:none;background:radial-gradient(circle at 40% 25%,#596b4a,#263e30);box-shadow:inset 0 0 0 8px #c3b48312,0 4px 9px #0d1f1555}
#chopBtn>*{pointer-events:none}
#chopBtn #dialDot{width:7px;height:7px;left:calc(50% - 3.5px);top:calc(50% - 3.5px);background:#ffca74;box-shadow:0 0 0 2px #182c20b0}
#chopBtn canvas{width:27px;height:27px;margin-top:-5px}
#chopBtn span{font-size:6px;letter-spacing:0}
#chopBtn small{position:absolute;bottom:-17px;left:-9px;right:-9px;font-size:7px;letter-spacing:.04em;color:#e5d8b4;text-shadow:0 2px 2px #132b1a}
#hud[data-control] #chopBtn[data-turning="true"]{border-color:#ffd692;box-shadow:inset 0 0 0 8px #e9c77e24,0 0 12px #efc77e30}
#hud #healBtn{bottom:calc(206px + env(safe-area-inset-bottom))}
@media(orientation:landscape) and (max-height:420px){#hud[data-control] .combat{width:239px;height:153px}#hud[data-control] #shootBtn{height:153px}#shootBtn #bowDraw{top:17px}#hud #healBtn{bottom:191px}}
@media(orientation:portrait){#hud[data-control] .combat{width:229px;height:162px}#hud[data-control] #shootBtn{height:162px}#hud[data-control] #chopBtn{width:82px;height:82px}#hud #healBtn{bottom:274px}}
@media(orientation:portrait) and (max-width:360px){#hud[data-control] .combat{width:207px}#hud[data-control] #chopBtn{width:78px;height:78px}#hud[data-control] .combat .actions{gap:9px}#shootBtn #bowDraw{left:-14px}}
@media(orientation:portrait) and (max-width:400px){#hud[data-control] .vitals{width:122px}#hud[data-control] .vitals>span{display:inline-block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* v25 equipment, context and safe-touch controls */
#hud #bolaBtn{position:absolute;right:170px;bottom:115px;width:74px;min-height:47px;border:1px solid #bbab7c;background:#273c30e8;border-radius:12px;pointer-events:auto;touch-action:none;padding:4px;display:flex;align-items:center;flex-direction:column;gap:2px}
#bolaBtn canvas{width:29px;height:29px}#bolaBtn span{font-size:7px;color:#f1dfb4}#bolaBtn[data-selected="true"]{border:2px solid #ffb05c;background:#645332}
#hud[data-control] #woodCounters{width:320px;gap:2px}#hud .woodCount span{font-size:6px}#hud .woodCount canvas{width:19px;height:19px}
#materialCounters{max-width:260px;font-size:8px}
#inventory .inventorySlot canvas{width:38px;height:38px}.inventorySlot{min-height:52px}
.labOption{display:flex!important;align-items:center;gap:8px;font-size:10px!important;line-height:1.4;color:#e5dab9}.labOption input{width:18px!important;height:18px;margin:0;padding:0;accent-color:#c9bd7e}
@media(orientation:landscape) and (max-height:600px){.lobbyPanel .labOption{grid-column:1/-1;grid-row:8}.lobbyPanel .lobbyFoot{grid-row:9}.lobbyPanel{row-gap:5px}.lobbyPanel .lead{font-size:10px}}
@media(orientation:portrait){#hud[data-control] #woodCounters{width:258px}#hud .woodCount canvas{width:16px;height:16px}#hud #bolaBtn{right:146px;bottom:116px;width:75px}#materialCounters{max-width:226px}}
@media(orientation:landscape) and (max-height:420px){#hud #bolaBtn{right:159px;bottom:109px}#hud[data-control] #woodCounters{width:286px;left:48%}}
@media(orientation:portrait) and (max-width:360px){#hud #bolaBtn{right:130px;width:72px}}
#chargeMeter{position:absolute;bottom:23px;left:18px;right:18px;height:5px;background:#11291e;border:1px solid #9d9465;border-radius:4px;overflow:hidden}#chargeMeter[hidden]{display:none}#chargeFill{display:block;height:100%;background:linear-gradient(90deg,#b4c47c,#ffc273);width:0}

@media(orientation:portrait){#hud[data-control] #woodCounters{width:205px}#hud .woodCount span{font-size:6px}.lobbyFoot a{color:#f1d69b}}

#cordChoices{position:absolute;bottom:100%;left:20px;right:20px;padding:8px;display:flex;gap:5px;background:#1b3327f5;border:1px solid #c0aa72;border-radius:9px;pointer-events:auto}#cordChoices[hidden]{display:none}#cordChoices button{min-width:60px;padding:12px 4px;font-size:10px;touch-action:none;background:#42593b;color:#f4e1b1;border:1px solid #b3ad7b;border-radius:4px}#cordChoices button:disabled{opacity:.45}