/* Zone browsing is isolated from the editable battle map. */
.zone-navigation{min-width:0}
#zone-browser-button{-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;width:100%;font:inherit;text-align:start;padding:.5rem .65rem;border:1px solid var(--line);border-radius:9px;background:var(--ui-input);color:var(--ink)}
#zone-browser-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.zone-browser{box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-width:none;height:min(810px,calc(100dvh - 24px));max-height:none;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 18px 80px #0005}
.zone-browser[open]{display:flex;flex-direction:column}.zone-browser::backdrop{background:#0b111cb3}.zone-browser *{box-sizing:border-box}
.zone-browser button,.zone-browser select{font:inherit;color:var(--ink);border:1px solid var(--line);background:var(--ui-control);border-radius:9px;min-height:44px;padding:.5rem .65rem}
.zone-browser button{cursor:pointer;-webkit-tap-highlight-color:transparent}.zone-browser button:active:not(:disabled){background:var(--ui-hover)}.zone-browser button:disabled{opacity:.4;cursor:default}
.zone-browser button:focus-visible,.zone-browser select:focus-visible,.zone-browser canvas:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.zone-browser h2,.zone-browser strong,.zone-browser select{color:var(--ink)}
.zb-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;flex:none}
.zb-header h2{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:500;margin:0;min-width:0}.zb-header h2 span{color:var(--muted)}.zone-browser .zb-zone-code{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 6px;border:1px solid #61b4ff77;border-radius:7px;background:#1163b730;color:#c9e8ff;font-size:.88rem;font-weight:700}.zone-browser .zb-back{font-size:.86rem;font-weight:650;color:var(--blue);border-color:#6ce5c34d;background:#6ce5c30d}
.zb-back::before{content:'←';margin-inline-end:7px}
/* Keep context announced, without duplicating the selected zone below its picker. */
.zb-help,.zb-preview,.zb-selection label span{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.zb-map-wrap{position:relative;flex:1;min-height:120px;background:#172438;border-block:1px solid var(--line);overflow:hidden}
.zb-map-wrap canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.zb-map-wrap canvas:active{cursor:grabbing}
.zb-map-tools{position:absolute;right:10px;top:10px;display:flex;gap:5px}
.zb-map-tools button,.zone-browser .zb-focus{box-shadow:0 2px 8px #0002;min-width:44px;padding:.35rem .6rem;font-size:.8rem}
.zb-in,.zb-out{font-size:1.3rem!important}
.zone-browser .zb-focus{position:absolute;bottom:10px;right:10px;white-space:nowrap}
.zb-status{position:absolute;left:10px;bottom:64px;max-width:calc(100% - 20px);font-size:.8rem;background:var(--ui-raised);border:1px solid var(--line);border-radius:8px;padding:7px 10px;pointer-events:none}
.zb-status[hidden]{display:none}
.zb-selection{display:flex;align-items:center;gap:6px;padding:8px 12px;flex:none}
.zb-selection label{position:relative;min-width:0;flex:1}.zone-browser .zb-selection select{width:100%;min-width:0;font-size:.88rem}
.zone-browser .zb-prev,.zone-browser .zb-next{width:44px;flex:0 0 44px;font-size:1.65rem;line-height:1;padding:0}
.zb-legend{font-size:.75rem;color:var(--muted);padding:0 14px;margin:0 0 8px;flex:none}
.zone-browser footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 12px 10px;flex:none;background:var(--paper);border:0;margin:0;flex-direction:row;flex-wrap:nowrap;text-align:start;min-height:0}
.zone-browser .zb-current{position:relative;display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;min-height:44px;padding:4px 23px 4px 6px;font-size:11px;text-align:start;border-color:transparent;background:transparent}.zone-browser .zb-current:hover{background:var(--ui-hover)}.zb-current::after{content:"↩";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--blue)}.zb-current span{line-height:1.2;color:var(--blue);font-size:11px;white-space:nowrap}.zb-current strong{line-height:1.2;max-width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zone-browser .zb-create{font-size:.8rem;font-weight:500;white-space:nowrap}.zone-browser .zb-create:hover:not(:disabled){background:var(--ui-hover)}
.zb-same{font-size:.74rem;color:var(--muted);flex:none;margin:0;padding:0 12px 10px}.zone-browser .zb-same[hidden]{display:none}
/* Avoid focus zoom in mobile browsers when opening the native zone picker. */
@media(max-width:560px),(max-height:500px){.zone-browser .zb-selection select{font-size:16px}}
@media(max-width:560px){
 .zone-browser{width:100%;height:100dvh;border-radius:0;border:0;margin:0}
 .zb-header{padding:calc(5px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 5px max(10px,env(safe-area-inset-left))}
 .zb-selection{padding:6px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left))}
 .zone-browser footer{padding:2px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:8px}
 .zb-legend{display:none}.zb-map-tools{top:8px;right:8px}.zone-browser .zb-focus{bottom:8px;right:8px}
}
/* Short landscape screens use a small side dock, preserving full map height. */
@media(max-height:500px) and (min-width:561px){
 .zone-browser{height:calc(100dvh - 12px);width:min(940px,calc(100vw - 12px));border-radius:12px}
 .zone-browser[open]{display:grid;grid-template-columns:minmax(0,1fr) 208px;grid-template-rows:54px 1fr auto auto}
 .zb-header{grid-column:1/-1;grid-row:1;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left))}
 .zb-map-wrap{grid-column:1;grid-row:2/5;min-height:0;border-right:1px solid var(--line)}
 .zb-selection{grid-column:2;grid-row:2;align-self:start;display:grid;grid-template-columns:1fr 1fr;padding:10px;gap:6px}
 .zb-selection label{grid-column:1/-1;grid-row:1}.zone-browser .zb-prev,.zone-browser .zb-next{width:100%}
 .zb-legend{display:none}.zone-browser footer{grid-column:2;grid-row:3;flex-direction:column;align-items:stretch;padding:10px;gap:8px}
 .zone-browser .zb-current{flex:none}.zone-browser .zb-same:not([hidden]){grid-column:2;grid-row:4;font-size:11px;padding:0 10px 8px}
}

/* Edition selection stays inside Zones, leaving the working map unobstructed. */
.zb-campaign{display:flex;gap:10px;align-items:center;padding:5px 14px 0;font-size:12px}.zb-campaign>span{color:var(--muted,#637585);flex:none}.zb-campaign select{min-width:0;width:100%;height:34px;font:inherit;border-radius:8px;padding:0 28px 0 9px}.zone-browser .zb-zone-code{max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Map choice belongs beside its label, above zone navigation at every size. */
.zone-browser .zb-campaign{display:flex;flex-direction:row;align-items:center;text-align:start;gap:8px;margin:0;padding:4px 12px 8px;flex:none}
.zone-browser .zb-campaign>span{font-size:12px;white-space:nowrap}
.zone-browser .zb-campaign select{flex:1;font-size:14px;min-width:0}
@media(max-width:560px),(max-height:500px){.zone-browser .zb-campaign select{font-size:16px}}
@media(max-width:560px){.zone-browser .zb-campaign{padding:2px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))}}
@media(max-height:500px) and (min-width:561px){
 .zone-browser[open]{grid-template-rows:54px auto 1fr auto auto}
 .zone-browser .zb-campaign{grid-column:2;grid-row:2;padding:6px 10px 0}
 .zone-browser .zb-campaign>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .zone-browser .zb-map-wrap{grid-row:2/6}
 .zone-browser .zb-selection{grid-row:3;padding:6px 10px}
 .zone-browser footer{grid-row:4;padding:5px 10px}
 .zone-browser .zb-same:not([hidden]){grid-row:5}
}