/* The dock owns the space; its children no longer calculate unrelated offsets. */
.eclipse-edition { --v2-dock-height:174px; }
.eclipse-edition #v2battleDock { position:fixed; z-index:21; left:var(--sal); right:var(--sar); bottom:var(--sab); box-sizing:border-box; padding:12px; display:grid; grid-template-columns:140px 58px 66px minmax(180px,1fr) minmax(290px,35%); gap:12px; align-items:stretch; pointer-events:none; }
.eclipse-edition #v2battleDock > :is(#minimapbox,#toolbox,#heropanel,#selpanel,#cmdcard) { position:relative; inset:auto; transform:none; width:auto; min-width:0; max-width:none; height:100%; min-height:0; margin:0; padding:0; box-sizing:border-box; pointer-events:auto; }
.eclipse-edition #hudbar { height:calc(var(--v2-dock-height) + var(--sab)); }
.eclipse-edition #v2battleDock :is(#minimapbox,#toolbox,#heropanel)::after,.eclipse-edition #cmdcard::before { display:none; }
.eclipse-edition #v2battleDock #minimapbox { aspect-ratio:1; align-self:center; height:auto; }
.eclipse-edition #v2battleDock #minimap { width:100%; height:100%; border-radius:7px; }
.eclipse-edition #v2battleDock #toolbox { display:flex; gap:5px; align-items:center; justify-content:center; background:none; box-shadow:none; border:0; }
.eclipse-edition #v2battleDock #toolbox :is(#mobilebar,#grouptray) { flex-direction:column; gap:5px; }
.eclipse-edition #v2battleDock :is(.mbtn2,.gbtn) { width:29px; height:29px; border-radius:5px; }
.eclipse-edition #v2battleDock #heropanel { grid-template-columns:1fr; grid-auto-rows:42px; gap:5px; align-content:center; max-height:140px; overflow-y:auto; scrollbar-width:thin; }
.eclipse-edition #v2battleDock .heroslot:not(.aan) { display:none; }
.eclipse-edition #v2battleDock .heroslot { border-radius:6px; }
.eclipse-edition #v2battleDock #selpanel { display:flex; gap:10px; align-items:center; overflow:visible; border-left:1px solid #b8a27930; padding-left:12px; }
.eclipse-edition #v2battleDock #portrait { flex:0 0 clamp(54px,6vw,100px); width:auto; height:120px; max-height:100%; aspect-ratio:auto; border-radius:6px; }
.eclipse-edition #v2battleDock #selinfo { min-width:0; flex:1; max-width:none; padding:0; }
.eclipse-edition #v2battleDock #selname { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eclipse-edition #v2battleDock #selhp { font-size:10px; margin:3px 0; }
.eclipse-edition #v2battleDock #selcond { display:flex; position:relative; isolation:isolate; min-height:25px; gap:6px; margin:6px 0 8px; padding:0 7px; border:1px solid #bec89c42; border-radius:5px; overflow:hidden; color:#e7e7cd; }
.eclipse-edition #v2battleDock #selcond .balk { position:absolute; inset:0; width:100%; max-width:none; height:100%; margin:0; border-radius:0; opacity:.38; z-index:-1; background:linear-gradient(90deg,#96ad64 calc(var(--p,100)*1%),#142018 calc(var(--p,100)*1%)); }
.eclipse-edition #v2battleDock #selcond.laag .balk { background:linear-gradient(90deg,#d29b56 calc(var(--p,100)*1%),#251c11 0); }
.eclipse-edition #v2battleDock #selcond.op .balk { background:#76362b; }
.eclipse-edition #v2battleDock #selcond .tx { margin-left:auto; font:600 10px/1 var(--v2-sans); white-space:nowrap; }
.eclipse-edition #v2battleDock #renlabel { color:inherit; font-size:11px; gap:5px; }
.eclipse-edition #v2battleDock #renvink { margin:0; width:12px; height:12px; }
.eclipse-edition #v2battleDock #sleuvenrij { margin-top:13px; }
.eclipse-edition #v2battleDock #cmdcard { display:grid; grid-auto-flow:column; grid-template-columns:repeat(var(--v2-columns,5),minmax(40px,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; align-content:stretch; justify-content:stretch; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; border-left:1px solid #b8a27930; padding-left:12px; }
.eclipse-edition #v2battleDock #cmdcard .cmdsplit { display:none; }
.eclipse-edition #v2battleDock #cmdcard .cmdgroep { grid-column:span 3; grid-row:1 / span 2; display:grid; grid-template-columns:repeat(3,minmax(40px,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; align-content:stretch; justify-content:stretch; }
.eclipse-edition #v2battleDock #cmdcard :is(.cmd,button) { width:100%; min-width:0; max-width:none; height:100%; min-height:0; margin:0; padding:3px; border-radius:6px; background-size:cover; }
.eclipse-edition #v2battleDock #cmdcard.v2-single > button { grid-row:1 / span 2; }
.eclipse-edition #v2battleDock #cmdcard .cmd .ic { width:26px; height:26px; }
.eclipse-edition #v2battleDock #cmdcard .cmd .lbl { font-size:9px; }
.eclipse-edition #v2battleDock #cmdcard .cmd.spell { background-position:center; }
.eclipse-edition #v2battleDock #cmdcard .cmd.spell::after { border-radius:5px; }
.eclipse-edition #v2battleDock #selpanel.multi { display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:5px; }
.eclipse-edition #v2battleDock #selpanel.multi #portrait { display:block; flex:0 0 30px; width:30px; height:34px; margin:0; }
.eclipse-edition #v2battleDock #selpanel.multi #selmulti { min-width:0; max-width:100%; max-height:90px; overflow:auto; }
.eclipse-edition #rightstack { bottom:calc(var(--v2-dock-height) + 8px + var(--sab)); }
@media (min-width:901px) and (max-width:1150px) {
 .eclipse-edition #v2battleDock { grid-template-columns:112px 44px 60px minmax(180px,1fr) minmax(280px,34%); padding:10px; gap:8px; }
 .eclipse-edition #v2battleDock :is(.mbtn2,.gbtn) { width:25px; height:25px; }
 .eclipse-edition #v2battleDock #portrait { flex-basis:48px; height:94px; }
 .eclipse-edition #v2battleDock #selpanel { gap:7px; padding-left:8px; }
 .eclipse-edition #v2battleDock #selname { font-size:14px; }
 .eclipse-edition #v2battleDock #cmdcard { padding-left:8px; gap:4px; }
 .eclipse-edition #v2battleDock #cmdcard .cmdgroep { gap:4px; }
}
@media (max-width:900px) {
 .eclipse-edition #v2battleDock { grid-template-columns:100px minmax(0,1fr) 46px; grid-template-rows:116px 100px; padding:8px; gap:8px; }
 .eclipse-edition #v2battleDock #minimapbox { grid-area:1/1; align-self:center; height:100px; }
 .eclipse-edition #v2battleDock #selpanel { grid-area:1/2; border:0; padding:0; }
 .eclipse-edition #v2battleDock #heropanel { grid-area:1/3; }
 .eclipse-edition #v2battleDock #cmdcard { grid-area:2/1/3/4; padding:0; border:0; }
 .eclipse-edition #v2battleDock #toolbox { position:absolute; right:8px; top:-36px; height:30px; width:auto; padding:3px 5px; background:#132219d9; backdrop-filter:blur(16px); border:1px solid #b8a27950; border-radius:6px; }
 .eclipse-edition #v2battleDock #toolbox :is(#mobilebar,#grouptray) { flex-direction:row; gap:4px; }
 .eclipse-edition #v2battleDock :is(.mbtn2,.gbtn) { width:24px; height:24px; }
 .eclipse-edition #v2battleDock #portrait { height:108px; flex-basis:64px; }
 .eclipse-edition #v2battleDock #selpanel #selinfo #xpwrap { height:10px; margin-top:4px; background:none; }
 .eclipse-edition #v2battleDock #xptxt { position:absolute; top:3px; font-size:8px; line-height:8px; }
 .eclipse-edition #v2battleDock #xpbar { height:2px; }
 .eclipse-edition #v2battleDock #sleuvenrij { margin-top:2px; }
 .eclipse-edition #stuurveld { bottom:calc(var(--v2-dock-height) + 48px + var(--sab)); left:14px; }
 .eclipse-edition #workertray { bottom:calc(var(--v2-dock-height) + 8px + var(--sab)); }
}
@media (max-width:500px) {
 .eclipse-edition #v2battleDock { grid-template-columns:78px minmax(0,1fr) 30px; gap:7px; padding:7px; }
 .eclipse-edition #v2battleDock #minimapbox { height:78px; }
 .eclipse-edition #v2battleDock #portrait { flex-basis:45px; height:100px; }
 .eclipse-edition #v2battleDock #selpanel { gap:7px; }
 .eclipse-edition #v2battleDock #selpanel #selinfo #selname { font-size:13px; }
 .eclipse-edition #v2battleDock #selcond { padding:0 4px; gap:3px; }
 .eclipse-edition #v2battleDock #renlabel { font-size:10px; gap:3px; }
 .eclipse-edition #v2battleDock #selcond .tx { font-size:9px; }
 .eclipse-edition #v2battleDock #heropanel { grid-auto-rows:32px; }
 .eclipse-edition #v2battleDock #cmdcard { gap:4px; }
 .eclipse-edition #v2battleDock #cmdcard .cmdgroep { gap:4px; }
 .eclipse-edition #v2battleDock #cmdcard .cmd .ic { width:21px; height:21px; }
 .eclipse-edition #v2battleDock #cmdcard .cmd .lbl { font-size:8px; }
}
@media (max-height:500px) and (min-width:501px) and (max-width:900px) {
 .eclipse-edition #v2battleDock { grid-template-columns:72px minmax(0,1fr) 32px minmax(240px,42%); grid-template-rows:128px; }
 .eclipse-edition #v2battleDock #minimapbox { height:72px; }
 .eclipse-edition #v2battleDock #cmdcard { grid-area:1/4; }
 .eclipse-edition #v2battleDock #heropanel { grid-auto-rows:30px; }
 .eclipse-edition #v2battleDock #portrait { height:85px; flex-basis:45px; }
}
.eclipse-edition #v2battleDock .hidden { display:none!important; }

.eclipse-edition #v2battleDock #cmdcard > .cmd { order:1; }
.eclipse-edition #v2battleDock #cmdcard > .cmdgroep { order:2; }

.eclipse-edition #v2battleDock #cmdcard:has(> .waar) { grid-template-columns:repeat(var(--v2-columns,4),minmax(64px,1fr)); }
.eclipse-edition #v2battleDock #cmdcard .waar { width:auto; height:auto; aspect-ratio:1; align-self:center; justify-self:center; min-width:62px; max-width:100%; max-height:100%; border-radius:3px; background-color:#152015; }
.eclipse-edition #v2battleDock #cmdcard .waar:disabled { opacity:.82; filter:saturate(.8); }
.eclipse-edition #v2battleDock #cmdcard .waar.gedaan { opacity:.58; }
.eclipse-edition #v2battleDock #cmdcard .waar .rlbl { font-size:9px; line-height:1.1; padding:3px; top:0; background:linear-gradient(#08100ff2,#08100f99); }
.eclipse-edition #v2battleDock #cmdcard .waar .cost { bottom:2px; padding:2px 4px; background:#0a140dea; color:#f1d99c; font-size:11px; }
.eclipse-edition #v2battleDock #cmdcard #ab-wapen { width:auto; height:auto; min-width:44px; aspect-ratio:1; align-self:center; justify-self:center; max-height:100%; max-width:100%; border-radius:3px; }

/* Brynn's expanded catalogue: fixed readable squares instead of compressed columns. */
.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:110px 50px 60px minmax(150px,1fr) minmax(380px,48%); }
.eclipse-edition #v2battleDock #cmdcard.v2-shop { grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); grid-template-rows:none; grid-auto-rows:auto; height:224px; overflow-y:auto; overflow-x:hidden; align-content:start; padding-right:5px; scrollbar-color:#ad965c #142019; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar { aspect-ratio:1; min-height:88px; height:auto; border:1px solid #b9a97964; position:relative; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar .rlbl { display:block!important; position:absolute; top:auto; bottom:21px; left:0; right:0; padding:12px 4px 3px; color:#f4e7c6; font:600 9px/1.1 var(--v2-sans); text-align:center; background:linear-gradient(transparent,#09130cec 40%); white-space:normal; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar .cost { bottom:3px; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar:focus-visible { outline:2px solid #ead49a; outline-offset:-3px; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar.gedaan { opacity:.55; }
@media(max-width:1100px) and (min-width:901px){.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:90px 42px 52px minmax(120px,1fr) minmax(330px,46%); }}
@media(max-width:900px){.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:100px minmax(0,1fr) 46px; grid-template-rows:100px 205px; }.eclipse-edition #v2battleDock #cmdcard.v2-shop{height:205px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));}}
@media(max-width:500px){.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)){grid-template-columns:78px minmax(0,1fr) 30px;}.eclipse-edition #v2battleDock #cmdcard.v2-shop{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar{min-height:74px;}.eclipse-edition #v2battleDock #cmdcard.v2-shop .waar .rlbl{font-size:8px;}}
/* The action deck stays at the right edge at every viewport width. Narrow
   windows scroll the deck within its own panel instead of moving it below. */
.eclipse-edition #v2battleDock #cmdcard { grid-column:5; grid-row:1; }
@media(max-width:900px){
 .eclipse-edition #v2battleDock,.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:78px minmax(80px,1fr) 34px minmax(220px,43%); grid-template-rows:154px; gap:7px; }
 .eclipse-edition #v2battleDock #minimapbox { grid-area:1/1; height:78px; }
 .eclipse-edition #v2battleDock #selpanel { grid-area:1/2; }
 .eclipse-edition #v2battleDock #heropanel { grid-area:1/3; }
 .eclipse-edition #v2battleDock #cmdcard,.eclipse-edition #v2battleDock #cmdcard.v2-shop { grid-area:1/4; height:100%; border-left:1px solid #b8a27930; padding-left:6px; }
 .eclipse-edition #v2battleDock #portrait { flex-basis:42px; height:90px; }
 .eclipse-edition #v2battleDock #selpanel { flex-wrap:wrap; align-content:center; gap:3px; }
 .eclipse-edition #v2battleDock #selinfo { flex-basis:100%; }
}
@media(max-width:560px){
 .eclipse-edition #v2battleDock,.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:54px minmax(50px,1fr) 28px minmax(162px,49%); grid-template-rows:160px; padding:6px; gap:4px; }
 .eclipse-edition #v2battleDock #minimapbox { height:54px; }
 .eclipse-edition #v2battleDock #portrait { display:block; flex:0 0 30px; width:30px; height:34px; margin:0; }
 .eclipse-edition #v2battleDock #selinfo :is(#xpwrap,#sleuvenrij,#selstats,#seltraits) { max-width:100%; }
 .eclipse-edition #v2battleDock #selcond { flex-wrap:wrap; }
 .eclipse-edition #v2battleDock #cmdcard { grid-template-columns:repeat(var(--v2-columns,5),minmax(44px,1fr)); }
 .eclipse-edition #v2battleDock #cmdcard .cmdgroep { grid-template-columns:repeat(3,minmax(44px,1fr)); }
 .eclipse-edition #v2battleDock #cmdcard.v2-shop { grid-template-columns:repeat(2,minmax(66px,1fr)); }
}
@media(min-width:561px) and (max-width:900px){
 .eclipse-edition #v2battleDock #selpanel { flex-wrap:nowrap; gap:6px; }
 .eclipse-edition #v2battleDock #selinfo { flex-basis:0; }
 .eclipse-edition #v2battleDock #portrait { height:72px; }
}

/* One persistent hero shortcut next to the map; group portraits stay in their strip. */
.eclipse-edition #v2battleDock #heropanel { grid-column:2; grid-row:1; align-self:center; height:auto; grid-auto-rows:58px; padding:0 2px; }
.eclipse-edition #v2battleDock #selpanel.multi #portrait { display:none; }
.eclipse-edition #v2battleDock #selpanel.multi { display:block; align-content:center; }
@media(min-width:901px){
 .eclipse-edition #v2battleDock #toolbox { grid-column:3; grid-row:1; }
 .eclipse-edition #v2battleDock #selpanel { grid-column:4; grid-row:1; }
}
@media(max-width:900px){
 .eclipse-edition #v2battleDock,.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:78px 42px minmax(80px,1fr) minmax(220px,43%); }
 .eclipse-edition #v2battleDock #selpanel { grid-column:3; grid-row:1; }
 .eclipse-edition #v2battleDock #heropanel { grid-column:2; grid-row:1; grid-auto-rows:48px; }
}
@media(max-width:560px){
 .eclipse-edition #v2battleDock,.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:54px 30px minmax(48px,1fr) minmax(162px,49%); }
 .eclipse-edition #v2battleDock #heropanel { grid-auto-rows:36px; padding:0; }
}
/* 24-9-2026 (Eric: 'op mobiel en in de app klopt de actionbar niet, de map moet wat groter en acties zoals attack,
   defend etc vallen eraf') — STAAND op een telefoon kreeg het bevelvak 49% van de breedte en schoof Box/Line/Wedge/
   Attack/Defend/Hold buiten beeld (gemeten op 393 en 390 breed; de minikaart was 54 px). Staand krijgt het bevelvak
   nu een eigen rij over de volle breedte, zodat elke knop past; de minikaart staat op 104 px, de heldknop blijft naast
   de kaart, portret en info staan naast elkaar. Liggend blijft de indeling hierboven (daar paste alles al), alleen met
   een grotere minikaart. */
@media (max-width:560px) and (min-height:600px) {
 .eclipse-edition #v2battleDock,.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:104px 30px minmax(0,1fr); grid-template-rows:minmax(108px,auto) auto; padding:6px 8px; gap:6px 8px; }
 .eclipse-edition #v2battleDock #minimapbox { grid-area:1/1; width:104px; height:104px; align-self:center; }
 .eclipse-edition #v2battleDock #heropanel { grid-column:2; grid-row:1; }
 .eclipse-edition #v2battleDock #selpanel { grid-column:3; grid-row:1; flex-wrap:nowrap; align-items:center; gap:8px; }
 .eclipse-edition #v2battleDock #selinfo { flex:1 1 0; flex-basis:0; }
 .eclipse-edition #v2battleDock #portrait { display:block; flex:0 0 42px; width:42px; height:58px; }
 .eclipse-edition #v2battleDock #sleuvenrij { margin-top:6px; }
 .eclipse-edition #v2battleDock #cmdcard { grid-area:2/1/3/-1; height:auto; border-left:0; padding-left:0; overflow:visible; grid-template-columns:repeat(var(--v2-columns,5),minmax(0,1fr)); grid-template-rows:repeat(2,52px); }
 .eclipse-edition #v2battleDock #cmdcard .cmdgroep { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,52px); }
 .eclipse-edition #v2battleDock #cmdcard.v2-shop { grid-area:2/1/3/-1; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; height:196px; overflow-y:auto; overflow-x:hidden; }
}
@media (max-height:500px) and (max-width:900px) {
 .eclipse-edition #v2battleDock,.eclipse-edition #v2battleDock.v2-shop-open:has(#cmdcard:not(.hidden)) { grid-template-columns:100px 42px minmax(80px,1fr) minmax(220px,43%); }
 .eclipse-edition #v2battleDock #minimapbox { width:100px; height:100px; }
}

/* 25-9-2026 (Eric: 'zorg dat je bij de merchant alle items ziet') — battle-layout.js pasWinkel kiest kolommen en tegelmaat
   zodat alle waren passen; hier volgt de tegel die maat en is de schuifbalk weg. Onder 64 px alleen prent en prijs. */
.eclipse-edition #v2battleDock #cmdcard.v2-shop.v2-pas { overflow:hidden; justify-content:start; align-content:start; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop.v2-pas .waar { min-height:0; width:var(--winkel-tegel); height:var(--winkel-tegel); aspect-ratio:auto; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop.v2-klein .waar .rlbl { display:none!important; }
.eclipse-edition #v2battleDock #cmdcard.v2-shop.v2-klein .waar .cost { font-size:8px; }