/* V10: compact field UI, landscape touch layout, illustrated result cards. */
:root{--safe-l:max(14px,env(safe-area-inset-left));--safe-r:max(14px,env(safe-area-inset-right));--safe-t:max(10px,env(safe-area-inset-top));--safe-b:max(14px,env(safe-area-inset-bottom))}
button:focus-visible,summary:focus-visible{outline:3px solid #27c9cc;outline-offset:4px}
.topbar{top:var(--safe-t);left:var(--safe-l);right:var(--safe-r);justify-content:center;height:46px}.topbar .brand{display:none}#timer{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:23px;min-width:104px;text-align:center;border:2px solid #fff7dc;box-shadow:0 3px 0 #17243b33;font-variant-numeric:tabular-nums}
#options{margin-left:auto;width:48px;height:48px;padding:3px;border-radius:15px;background:#fff8e6;box-shadow:0 3px 0 #17243b}#options img{width:100%;height:100%;object-fit:contain}
#scores{top:var(--safe-t);left:var(--safe-l);gap:4px;max-width:180px}.score{min-width:154px;font-size:11px;padding:5px 8px;border:0;background:#fff9ecde;gap:6px;box-shadow:0 1px 0 #17243b22}.score.me{order:initial;border:1px solid #26374a;background:#fff6d9}.score>span:nth-child(2){max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score .dot{width:10px;height:10px;border-width:1px;flex:none}.score b{font-variant-numeric:tabular-nums}.score:nth-child(n+5){display:none}.score.me{display:flex!important}
.map-box{right:var(--safe-r);top:76px;padding:4px;border-radius:12px;background:#fff9ecdd}.map-box canvas{width:94px;height:94px}.map-box span,#keyboard{display:none}
#controls{left:calc(var(--safe-l) + 10px);right:calc(var(--safe-r) + 10px);bottom:var(--safe-b)}#stick{width:110px;height:110px;border-color:#26374aa8;background:#fff8e56e;box-shadow:inset 0 0 0 8px #fff9ec3d}#knob{left:30px;top:30px;width:44px;height:44px;background:linear-gradient(#fffdf3,#e4d6b1)}.actions{gap:18px}.actions #fire{width:88px;height:88px;background:linear-gradient(#ffb45c,#ef7744);box-shadow:0 5px 0 #26374a,inset 0 3px 0 #fff5c6}.actions #item{width:64px;height:64px;background:#8bdee0;box-shadow:0 4px 0 #26374a}.actions img{width:60%;height:60%;object-fit:contain;pointer-events:none}.actions small{font-size:10px;font-weight:900}.actions #item.empty{opacity:.48}
#upgradeStatus{bottom:var(--safe-b);padding:7px 10px;display:flex;align-items:center;gap:10px;background:#fff9ecef;color:#26374a;border:2px solid #26374a;border-radius:15px;box-shadow:0 3px 0 #26374a33}.level-chip{background:#26374a;color:#ffdc83;padding:4px 7px;border-radius:6px;font-size:12px}.health-pips{display:flex;gap:3px}.health-pips i{width:13px;height:10px;background:#d2cbbd;border-radius:3px;border:1px solid #a69f90}.health-pips i.filled{background:#74b69b;border-color:#43685a}.star-pips{display:flex;gap:3px;font-size:18px;color:#d4cbbb;line-height:1}.star-pips .filled{color:#edae28;text-shadow:0 1px #976628}.star-pips img{width:30px;height:24px;object-fit:contain}
#status{bottom:calc(var(--safe-b) + 56px);font-size:12px;border:1px solid #26374a;padding:6px 12px;box-shadow:none;max-width:45vw;white-space:normal;text-align:center}#status:empty{display:none}#toast{top:70px;font-size:12px;max-width:42vw;padding:7px 12px}#roundNotice{top:112px;bottom:auto;font-size:13px;padding:8px 14px;max-width:45vw}
dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 28px);overflow:auto;padding:22px;border-radius:22px;box-shadow:8px 8px 0 #15243d55}dialog h2{margin:0;font-size:23px}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-head button{width:44px;height:44px;padding:0;box-shadow:none}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ded5bf}.settings-row button{min-width:92px;min-height:44px;font-size:13px!important;padding:8px 12px!important}.settings-note{font-size:11px;color:#7e6d54;margin:12px 0}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-actions button{min-height:44px;font-size:13px!important}.settings-actions .exit{color:#a44732}.settings-row button[aria-pressed=true]{background:#b8e2cb}
#rotateGate{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff6df;padding:24px;color:#26374a}#rotateGate[hidden]{display:none}#rotateGate img{width:105px;height:105px;object-fit:contain}.phone-turn{width:90px;height:48px;border:4px solid #26374a;border-radius:12px;transform:rotate(-12deg);margin:16px;box-shadow:6px 6px 0 #dfc999}.phone-turn:after{content:'↻';font-size:44px;line-height:36px;color:#e78040}#rotateGate h2{font-size:24px}#rotateGate p{font-size:14px;line-height:1.8;max-width:280px}.portrait-blocked #hud,.portrait-blocked .overlay{visibility:hidden}
#result .lobby-card{width:min(1000px,100%);padding:24px;max-height:calc(100dvh - 32px);background:radial-gradient(ellipse at 15% 15%,#fff3c9,transparent 50%),#fff9ed;display:grid;grid-template-columns:minmax(240px,.9fr) minmax(280px,1.1fr);gap:12px 28px;overflow:auto}#result .eyebrow{grid-column:1/-1;font-size:10px;color:#937750}#result h2{grid-column:1/-1;font-size:27px;margin:0}#winnerBanner{grid-column:1;grid-row:3 / span 3;align-self:start;background:radial-gradient(ellipse,#ffebae,#f6d68a);border:2px solid #ad8645;padding:10px 18px 18px;border-radius:22px;margin:0;gap:5px;position:relative;overflow:hidden}.winner-crown{width:100px;height:82px;object-fit:contain;animation:crown-arrive .5s ease-out}.winner-name{font-size:23px}.winner-area{font-weight:900;color:#74542d}.winner-tanks{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;max-width:100%;min-height:100px}.winner-tank{width:100px;height:100px;background-size:100% 800%;background-position:0 14.2857%;filter:drop-shadow(0 5px 2px #92652140)}#rankings{grid-column:2}#rankings .person{padding:8px;margin:3px 0;background:#fffdf7;border:1px solid #ded4bd;font-size:12px}.podium-first{background:#fff0c1!important;border-color:#cba15b!important}.place{color:#9f7e40}#awards{grid-column:2;gap:7px;margin:0}.award-card{padding:9px 8px 9px 54px;position:relative;min-height:80px;background:#f3eddd;border:1px solid #ded4bd}.award-icon{position:absolute;left:4px;top:12px;width:46px;height:46px;object-fit:contain}.award-title{font-size:12px}.award-names{font-size:11px;margin:5px 0 0}.award-stat{font-size:10px}#result small{margin:2px 0}.battle-details{grid-column:2;margin:0}.result-footer{grid-column:1/-1;display:flex;align-items:center;gap:12px;border-top:1px dashed #d9c9a9;padding-top:12px}.result-footer .primary{margin:0;width:auto;flex:1;min-height:44px}.result-footer .exit{min-height:44px;font-size:12px}.result-footer small{max-width:180px}#resultWait{font-size:12px;margin:0}.result-rule{grid-column:1/-1}#result .battle-details summary{padding:8px 0}
@keyframes crown-arrive{from{transform:translateY(-20px) rotate(-10deg);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.winner-crown{animation:none}}
@media(max-height:500px) and (orientation:landscape){
 :root{--safe-t:max(7px,env(safe-area-inset-top));--safe-b:max(10px,env(safe-area-inset-bottom))}.topbar{height:40px}#timer{font-size:19px;padding:6px 14px;min-width:88px}#options{width:44px;height:44px}.map-box{top:62px}.map-box canvas{width:66px;height:66px}#scores{top:var(--safe-t);max-width:142px}.score{min-width:130px;padding:4px 6px;font-size:10px;gap:5px}.score>span:nth-child(2){max-width:65px}.score:nth-child(n+4){display:none}.score.me{display:flex!important}
 #stick{width:100px;height:100px}#knob{left:25px;top:25px}.actions #fire{width:78px;height:78px}.actions #item{width:58px;height:58px}.actions{gap:15px}#controls{left:calc(var(--safe-l) + 6px);right:calc(var(--safe-r) + 6px)}#upgradeStatus{padding:5px 8px;gap:7px}#status{bottom:calc(var(--safe-b) + 48px);font-size:11px;max-width:42vw}#toast{top:57px;max-width:40vw;font-size:11px}#roundNotice{top:91px;bottom:auto;max-width:44vw;font-size:12px}
 .overlay{padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));align-items:flex-start}.welcome{max-width:780px;grid-template-columns:.8fr 1fr;margin:auto}.hero{display:flex;padding:20px}.hero-art{display:none}.hero h1{font-size:38px;margin:12px 0}.hero h1>span{display:block;margin:0}.tagline{font-size:14px}.hero-foot{flex-direction:column;font-size:11px;margin-top:auto}.entry{padding:18px 22px}.entry h2{font-size:22px}.entry>.sub,.entry>.eyebrow,.entry>small{display:none}.entry .primary{margin-top:10px;padding:10px}.divider{margin:12px 0 8px}.entry input{padding:9px}.entry #error{margin:4px 0;min-height:0}.rules{display:none}.lobby-card{padding:18px;max-height:calc(100dvh - 20px);overflow:auto}#lobby .lobby-card{width:min(700px,100%)}#lobby #roster{grid-template-columns:repeat(4,1fr);margin-bottom:8px;gap:5px}#lobby #roster .person{font-size:11px;padding:7px}.room-code{margin:10px 0}#network{margin-top:10px}#lobby h2{font-size:22px}#lobby .sub{font-size:11px;margin:5px 0}
 #result .lobby-card{padding:14px 18px;gap:7px 18px;grid-template-columns:minmax(190px,.8fr) minmax(240px,1.2fr);max-height:calc(100dvh - 20px)}#result h2{font-size:21px}#result .eyebrow{display:none}#winnerBanner{grid-row:2 / span 3;padding:5px 10px 12px}.winner-crown{width:74px;height:56px}.winner-name{font-size:18px}.winner-area{font-size:12px}.winner-tanks{min-height:72px}.winner-tank{width:76px;height:76px}#rankings .person{padding:5px 7px!important;font-size:11px}.award-card{min-height:59px;padding:7px 5px 7px 40px}.award-icon{width:35px;height:35px;left:2px;top:10px}.award-title{font-size:11px}.award-names{font-size:10px;margin:2px 0}.award-stat{font-size:9px}.result-footer{padding-top:7px;position:sticky;bottom:-14px;background:#fff9ed;z-index:2}.result-footer small{font-size:9px}.result-footer .primary{padding:9px}.battle-details{font-size:11px}
}

.help-head{position:sticky;top:-22px;background:#fff9ed;z-index:2;padding:8px 0;margin-top:-8px}

#advancedHelp{border-top:1px solid #ded5bf;margin:14px 0}#advancedHelp>summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:800;font-size:13px;padding:8px 0}.own-team-label{display:block;font-size:9px;line-height:1.2;color:#685531;font-weight:700}.score.own-team>span:nth-child(2){flex:1;min-width:0}.score b{flex-shrink:0}

/* Mobile viewport and independent result scrolling. */
@media(pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 body{position:fixed;inset:0}
 #game,#hud{touch-action:none;overscroll-behavior:none}
 .overlay,dialog{touch-action:pan-y;overscroll-behavior:contain}
 #result .lobby-card{overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .topbar,.map-box{right:max(4px,env(safe-area-inset-right))}
 #awards{grid-template-columns:repeat(3,minmax(0,1fr))}
 #awards .award-card{padding:8px;min-width:0}
 #awards .award-icon{position:static;width:36px;height:36px}
 #awards .award-title{font-size:14px}
 #awards .award-names{font-size:13px}
 #awards .award-stat{font-size:12px}
 #rankings .person{font-size:14px}
 #result .peaceful{grid-column:auto}
}
@media(pointer:coarse){
 #stick{width:clamp(120px,43dvh,200px);height:clamp(120px,43dvh,200px)}
 #knob{width:40%;height:40%;left:30%;top:30%}
 .actions #fire{width:clamp(88px,30dvh,140px);height:clamp(88px,30dvh,140px)}
 .actions #item{width:clamp(66px,23dvh,104px);height:clamp(66px,23dvh,104px)}
 .actions{gap:clamp(10px,2vw,18px)}
}

@media(pointer:coarse){#controls .actions{margin-left:auto}}

@media(pointer:coarse){#stick{opacity:.82}}
html{background:#e9e4cf}
#awards .award-card{text-align:center;align-items:center;padding-left:8px;padding-right:8px}
#awards .award-icon{position:static;flex-shrink:0}
#awards .award-title,#awards .award-names,#awards .award-stat{width:100%;min-width:0;overflow-wrap:anywhere;text-align:center}
@media(pointer:coarse){#stick *,#fire *,#item *{touch-action:none;-webkit-user-select:none;user-select:none}}

/* Canvas and controls share one CSS viewport; renderer reads this actual box. */
#game,#hud{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;bottom:auto}
/* Keep the root hit-testing surface aligned with the dynamic game viewport. */
@media(pointer:coarse){html{height:100%;height:100dvh}body{position:relative;inset:auto;width:100%;height:100vh;height:100dvh;min-height:100dvh}}
#game{z-index:0}#hud{z-index:10}
@media(pointer:coarse){.actions #item.empty{filter:none;background:#aeb7b1}}