/* A complete command rail: army selection, separate siege force and commitment. */
.battle-board>.battle-controls.command-panel{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:18px 16px;height:auto;max-height:none;min-height:0;overflow:visible;border:2px solid #ad925c;border-radius:10px;background:linear-gradient(105deg,#f6ebcd,#e6d5ae);box-shadow:inset 0 0 0 2px #fff4d465,inset 0 0 26px #b8945524,0 6px 20px #0004}
.command-panel .command-icon,.battle-card-info .command-icon{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.command-panel .command-heading{display:flex;align-items:center;gap:8px;border-bottom:1px solid #a78a5060;padding:0 0 11px;color:#30523b}
.command-panel .command-heading h3{margin:0;font-family:Georgia,serif;font-size:18px;line-height:1.2;color:#2d442f}
.command-panel .command-heading>span{display:none}
.battle-board>.command-panel .battle-troop-control{overflow:visible;min-height:0;flex:none}
.command-panel .command-troop-header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.battle-board>.command-panel .command-troop-header label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1.35;color:#3e523b}
.command-panel .command-troop-header label .command-icon{width:32px;height:32px;object-fit:contain}
.command-panel .troop-stepper{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.command-panel .troop-stepper output{font-size:31px;line-height:1.2;font-weight:800;font-variant-numeric:tabular-nums;min-width:87px;text-align:center;color:#244d34}
.command-panel .troop-stepper button{display:grid;place-items:center;width:34px;height:40px;min-height:0;flex:none;padding:0;border:1px solid #ad9565;border-radius:7px;background:linear-gradient(#fff5d7,#d9c395);color:#38533a;box-shadow:inset 0 1px #fff9e5,0 2px 3px #79593320;cursor:pointer}
.command-panel .troop-stepper button .command-icon{width:16px;height:16px;stroke-width:2.3}
.command-panel .command-slider{margin:12px 0 2px}
.battle-board .command-panel #troop-range{
 --cavalry-thumb-size:38px;appearance:none;-webkit-appearance:none;display:block;
 width:100%;height:38px;min-height:0;margin:0;padding:0;border:0;background:transparent;
 border-radius:6px;cursor:pointer;box-shadow:none;
}
.battle-board .command-panel #troop-range::-webkit-slider-runnable-track{
 height:8px;border:1px solid #a38b5b;border-radius:10px;
 background:linear-gradient(to right,#466544 0%,#466544 var(--range-progress,0%),#ddd1b0 var(--range-progress,0%),#ddd1b0 100%);
 box-shadow:inset 0 1px 2px #56462735,0 1px #fff4d3;
}
.battle-board .command-panel #troop-range::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none;width:var(--cavalry-thumb-size);height:var(--cavalry-thumb-size);
 margin-top:calc((8px - var(--cavalry-thumb-size))/2);border:0;border-radius:0;
 background:url('./assets/art/battle-sprites.webp?v=44') 0% 100%/600% 200% no-repeat;
 box-shadow:none;filter:drop-shadow(0 2px 1px #59462980);cursor:grab;transition:filter .12s;
}
.battle-board .command-panel #troop-range::-moz-range-track{
 height:8px;border:1px solid #a38b5b;border-radius:10px;
 background:linear-gradient(to right,#466544 0%,#466544 var(--range-progress,0%),#ddd1b0 var(--range-progress,0%),#ddd1b0 100%);
 box-shadow:inset 0 1px 2px #56462735,0 1px #fff4d3;
}
.battle-board .command-panel #troop-range::-moz-range-thumb{
 width:var(--cavalry-thumb-size);height:var(--cavalry-thumb-size);border:0;border-radius:0;
 background:url('./assets/art/battle-sprites.webp?v=44') 0% 100%/600% 200% no-repeat;
 box-shadow:none;filter:drop-shadow(0 2px 1px #59462980);cursor:grab;transition:filter .12s;
}
.battle-board .command-panel #troop-range:hover:not(:disabled)::-webkit-slider-thumb{filter:brightness(1.12) drop-shadow(0 2px 2px #594629a0)}
.battle-board .command-panel #troop-range:hover:not(:disabled)::-moz-range-thumb{filter:brightness(1.12) drop-shadow(0 2px 2px #594629a0)}
.battle-board .command-panel #troop-range:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing}
.battle-board .command-panel #troop-range:active:not(:disabled)::-moz-range-thumb{cursor:grabbing}
.battle-board .command-panel #troop-range:focus-visible{outline:2px solid #55744a;outline-offset:2px}
.battle-board .command-panel #troop-range:disabled{cursor:default;opacity:.5}
.battle-board .command-panel #troop-range:disabled::-webkit-slider-thumb{cursor:default;filter:grayscale(.7)}
.battle-board .command-panel #troop-range:disabled::-moz-range-thumb{cursor:default;filter:grayscale(.7)}
.command-panel .troop-base-equation{font-size:11px;line-height:1.3;gap:8px;padding:3px 0 9px;color:#6f6249}
.command-panel .troop-base-equation b{color:#30573a;font-weight:750}
.battle-board>.command-panel .troop-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}
.battle-board>.command-panel .troop-shortcuts button{height:40px;min-height:0;padding:5px 2px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:11px;font-weight:750;line-height:1.15;border:1px solid #af9868;border-radius:6px;background:linear-gradient(#f8edd0,#dbc59a);color:#4a5235;box-shadow:inset 0 1px #fff9e3;cursor:pointer}
.command-panel .troop-shortcuts button small{font-size:8px;color:inherit}
.battle-board>.command-panel .troop-shortcuts button[aria-pressed=true]{background:linear-gradient(#527047,#314e37);color:#fff3ce;border-color:#42613c;box-shadow:inset 0 1px #99b482,0 0 0 1px #d9b871}
.battle-board .command-panel .siege-toggle{position:relative;display:flex;align-items:center;gap:9px;margin:0;padding:12px 10px;min-height:76px;border:1px solid #bb9b63;border-radius:7px;background:linear-gradient(120deg,#f9edd0,#e2c99d);color:#68502e;cursor:pointer;flex:none}
.command-panel .siege-toggle>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.command-panel .siege-toggle>.command-icon{width:30px;height:32px;color:#866238}
.command-panel .siege-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.command-panel .siege-copy strong{font-size:13px;line-height:1.25;color:#564326}
.command-panel .siege-copy small{font-size:10px;line-height:1.4;color:#796345}
.command-panel .siege-copy small b{font-weight:800}
.command-panel .siege-check{display:grid;place-items:center;flex:none;width:23px;height:23px;border:1px solid #9f8a57;border-radius:5px;background:#fff4d6;box-shadow:inset 0 1px 3px #70542b25}
.command-panel .siege-check>.command-icon{width:16px;height:16px;opacity:0;stroke-width:3}
.command-panel .siege-toggle[data-selected=true]{background:linear-gradient(110deg,#e7e2be,#c4c798);border-color:#627b47;box-shadow:0 0 0 1px #ddbd7480}
.command-panel .siege-toggle[data-selected=true] .siege-check{background:#3f603f;color:#fff4ca;border-color:#315431}
.command-panel .siege-toggle[data-selected=true] .siege-check>.command-icon{opacity:1}
.command-panel .siege-toggle[data-available=false]{opacity:.58;cursor:default}
.command-panel .siege-toggle:has(input:focus-visible){outline:3px solid #497446;outline-offset:2px}
.command-panel .command-reserve{display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;border:1px solid #b4a77d60;border-radius:6px;background:#decba44f;min-height:30px;flex:none}
.command-panel .command-reserve .command-icon{width:18px;height:19px;color:#71805c}
.battle-board>.command-panel #reserve-label{font-size:11px;line-height:1.25;color:#6c654b;font-weight:650}
.battle-board>.command-panel .commit-panel{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding:12px 0 0;border-left:0;border-top:1px solid #a9905766;min-height:0;max-height:none;flex:none}
.battle-board .command-panel .attack-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;margin:0;min-width:0}
.command-panel .attack-label{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.3;color:#716247}
.command-panel .attack-label .command-icon{width:13px;height:13px}
.battle-board .command-panel .attack-preview #attack-number{grid-column:2;grid-row:1/3;align-self:center;font-size:29px;line-height:1.15;text-align:right;color:#244a34;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.battle-board .command-panel .attack-preview .attack-formula{grid-column:1;grid-row:2;font-size:10px;color:#3d5c3d;line-height:1.2}
.battle-board .command-panel .attack-preview>small{grid-column:1/-1;font-size:9px;line-height:1.3;color:#86734f}
.battle-board .command-panel .commit-panel>.btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;flex:none;padding:10px 7px;font-size:13px;line-height:1.25;white-space:normal}
.command-panel .commit-panel>.btn .command-icon{width:18px;height:18px}
.battle-board .command-panel .commit-hint{font-size:9px;line-height:1.3;text-align:center;color:#806f4a}
.command-panel button:focus-visible{outline:3px solid #41673e;outline-offset:2px}
.command-panel button:disabled,.command-panel input:disabled{cursor:default;opacity:.55}
.battle-board>.battle-card-info{grid-column:1;grid-row:5;align-self:center;justify-self:start;position:relative;display:flex;align-items:center;gap:4px;height:24px;padding:3px 7px;border:1px solid #ac95624d;border-radius:5px;background:#1b3324;color:#e5d0a2;font-size:9px;line-height:1;cursor:pointer}
.battle-card-info .command-icon{width:13px;height:13px}
.battle-board>.battle-history{grid-column:1;justify-self:end;width:auto}
.battle-board>.battle-history>summary{font-size:9px}
.battle-board>.battle-result-drawer{grid-column:2;grid-row:5;position:relative;align-self:center;justify-self:stretch;padding:0;height:24px;max-height:none;width:auto;overflow:visible;background:none;border:0;box-shadow:none}
.battle-board>.battle-result-drawer>summary{height:24px;padding:4px 8px;line-height:1.3;text-align:center;color:#dfc89b;font-size:10px;background:#183223;border:1px solid #a68e5950;border-radius:5px}
.battle-board>.battle-result-drawer[open]>.round-resolution{position:absolute;z-index:18;right:0;bottom:30px;width:350px;max-width:calc(100vw - 24px);max-height:360px;overflow:auto;margin:0;padding:14px;border:1px solid #bca16a;border-radius:8px;background:#f0e3c5;box-shadow:0 8px 25px #0006}
@media(min-width:761px){.battle-page.battle-board{grid-template-columns:minmax(0,1fr) 320px}.battle-board>.battle-finished{grid-row:2/5}.battle-board>.battle-side .battle-side-heading h3{overflow-wrap:normal;word-break:break-word}}
@media(min-width:761px) and (max-width:1200px){.battle-page.battle-board{grid-template-columns:minmax(0,1fr) 300px}}
@media(min-width:761px) and (max-height:790px){
 .battle-board>.battle-controls.command-panel{padding:12px;gap:9px}
 .command-panel .command-heading{padding-bottom:8px}.command-panel .command-heading h3{font-size:16px}
 .command-panel .command-slider{margin-top:7px}.command-panel .troop-base-equation{padding-bottom:6px}
 .battle-board .command-panel .siege-toggle{padding:9px 8px;min-height:65px}.command-panel .siege-copy strong{font-size:12px}.command-panel .siege-copy small{font-size:9px}
 .battle-board>.command-panel .commit-panel{padding-top:8px;gap:5px}
 .battle-board .command-panel .attack-preview #attack-number{font-size:26px}
}
@media(max-width:760px) and (max-height:710px){
 .battle-board .battle-army-readout{display:none}
 .battle-board .battle-camp{width:70px;padding:4px 5px}
 .battle-board .enemy-camp{left:5px;top:4px}.battle-board .own-camp{right:5px;bottom:4px}
 .battle-board .battle-camp>small{font-size:6px;margin-bottom:1px;letter-spacing:0}
 .battle-board .camp-health-number strong{font-size:16px}
 .battle-board .camp-health-number>span{display:none}
 .battle-board .camp-health-track{height:4px;margin-top:2px}
 .battle-board .battle-phase.is-clock-preparation{font-size:6px;line-height:1.25;max-width:44%;padding:3px 5px}
}
@media(max-width:760px){
 .battle-page.battle-board{--hand-height:clamp(106px,calc((100dvh - 568px)/2),138px);grid-template-rows:30px var(--hand-height) minmax(0,1fr) var(--hand-height) 250px 24px;gap:5px;padding:7px 10px}
 .battle-board>.battle-controls.command-panel{grid-column:1;grid-row:5;height:250px;padding:7px 9px;gap:4px;border-radius:8px;overflow:visible}
 .command-panel .command-heading{display:none}
 .battle-board>.command-panel .command-troop-header label{font-size:10px;line-height:1.25;gap:5px}
 .command-panel .command-troop-header label .command-icon{width:28px;height:28px}
 .command-panel .troop-stepper{gap:5px}.command-panel .troop-stepper output{font-size:25px;min-width:79px;line-height:1.1}
 .command-panel .troop-stepper button{width:31px;height:32px}
 .command-panel .command-slider{margin:0}.battle-board .command-panel #troop-range{--cavalry-thumb-size:30px;height:28px}
 .command-panel .troop-base-equation{font-size:9px;padding:1px 0 2px;line-height:1.2;gap:6px}
 .battle-board>.command-panel .troop-shortcuts{gap:4px;margin:0}
 .battle-board>.command-panel .troop-shortcuts button{height:28px;padding:3px 1px;font-size:10px;line-height:1.1}.command-panel .troop-shortcuts button small{font-size:7px}
 .battle-board .command-panel .siege-toggle{min-height:47px;padding:6px 7px;gap:7px}
 .command-panel .siege-toggle>.command-icon{width:25px;height:27px}.command-panel .siege-copy{gap:2px}.command-panel .siege-copy strong{font-size:11px;line-height:1.18}.command-panel .siege-copy small{font-size:8.5px;line-height:1.25}
 .command-panel .siege-check{width:21px;height:21px}
 .command-panel .command-reserve{min-height:20px;padding:2px 5px;gap:5px}.command-panel .command-reserve .command-icon{width:13px;height:14px}.battle-board>.command-panel #reserve-label{font-size:9px}
 .battle-board>.command-panel .commit-panel{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:3px 8px;padding:4px 0 0;margin-top:auto;align-items:center;flex:none}
 .battle-board .command-panel .attack-preview{display:flex;flex-direction:column;gap:1px;min-width:0}.command-panel .attack-label{font-size:8px;gap:3px}.command-panel .attack-label .command-icon{width:10px;height:10px}
 .battle-board .command-panel .attack-preview #attack-number{font-size:22px;line-height:1.05;align-self:flex-start;text-align:left;overflow-wrap:normal;white-space:nowrap}
 .battle-board .command-panel .attack-preview .attack-formula{font-size:8px;line-height:1.1}.battle-board .command-panel .attack-preview>small{display:none}
 .battle-board .command-panel .commit-panel>.btn{font-size:11px;line-height:1.15;min-height:39px;padding:7px 3px;gap:4px}.command-panel .commit-panel>.btn .command-icon{width:14px;height:14px}
 .battle-board .command-panel .commit-hint{display:none}
 .battle-board>.battle-card-info{grid-column:auto;grid-row:auto;position:absolute;left:10px;bottom:7px;z-index:6;width:calc((100% - 32px)/3);height:24px;padding:4px 2px;justify-content:center;font-size:8px}
 .battle-board>.battle-result-drawer{position:absolute;left:calc(33.333% + 5px);right:auto;bottom:7px;width:calc((100% - 32px)/3);grid-column:auto;grid-row:auto;height:24px}
 .battle-board>.battle-result-drawer>summary{font-size:8px;line-height:1.2;padding:5px 3px}
 .battle-board>.battle-result-drawer[open]>.round-resolution{right:auto;left:50%;transform:translateX(-50%);bottom:30px;width:calc(100vw - 24px);max-height:calc(100dvh - 130px)}
 .battle-board>.battle-history{grid-column:1;grid-row:6;justify-self:end;width:calc((100% - 12px)/3)}
 .battle-board>.battle-history>summary{font-size:7px;padding:7px 1px;white-space:nowrap;letter-spacing:0}
}
