:root{--epic-orange:#ff9d00;--epic-green:#7fd228;--epic-red:#ff6b68;--epic-blue:#56b9ff;--epic-panel:#061521;--epic-panel-2:#081b29;--epic-line:#2d4153;--epic-muted:#9aa8b6}
.epic-page{background:#030a12}.wide-container{max-width:1560px}.epic-shell{padding:34px 0 64px}.epic-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:20px}.epic-heading h1{margin:0;font-size:clamp(2.3rem,5vw,4rem);text-transform:uppercase}.epic-heading p{margin:7px 0 0;max-width:780px;color:var(--epic-muted);line-height:1.55}.beta-badge{flex:0 0 auto;border:1px solid rgba(255,157,0,.45);background:rgba(255,157,0,.10);color:#ffc15f;border-radius:999px;padding:7px 11px;font-weight:900;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.epic-grid{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,2fr);gap:18px;align-items:start}.epic-sidebar{display:grid;gap:14px;position:sticky;top:82px}.epic-panel{border:1px solid var(--epic-line);background:linear-gradient(145deg,var(--epic-panel-2),var(--epic-panel));border-radius:12px;overflow:hidden}.epic-panel-title{margin:0;padding:15px 17px 13px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem;text-transform:uppercase;letter-spacing:.08em}.epic-panel-body{padding:16px}.field-label,.health-grid label,.advanced-row label{display:block;color:#c7d0da;font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.epic-input{width:100%;min-height:43px;border:1px solid #3b5063;background:#020b13;color:white;border-radius:7px;padding:9px 10px;font:inherit}.epic-input:focus{outline:2px solid rgba(86,185,255,.30);border-color:var(--epic-blue)}.epic-input:disabled{color:#ffc15f;background:#0c1720;border-color:#4a3b24;opacity:1}.percent-field{position:relative}.percent-field .epic-input{padding-right:30px;text-align:right;font-variant-numeric:tabular-nums}.percent-field>span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-weight:900;color:#aab7c4;pointer-events:none}.limit-list{display:grid;gap:14px}
.limit-row{display:grid;grid-template-columns:minmax(0,1fr) 102px 92px;grid-template-areas:"name name name" "maximum autofill fill";gap:7px 10px;align-items:end;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.065)}
.limit-row:last-of-type{border-bottom:0;padding-bottom:0}
.limit-name{grid-area:name;font-size:.82rem;font-weight:950;text-transform:uppercase;color:#fff;letter-spacing:.03em}
.limit-control{min-width:0}
.limit-maximum{grid-area:maximum}
.limit-fill{grid-area:fill}
.limit-control .field-label{margin-bottom:5px}
.auto-fill-toggle{grid-area:autofill;display:flex;align-items:center;justify-content:center;gap:6px;min-height:43px;border:1px solid #425466;border-radius:7px;background:#06111b;color:#cad4de;font-size:.67rem;font-weight:900;text-transform:uppercase;cursor:pointer;padding:0 9px;white-space:nowrap}
.auto-fill-toggle input{width:18px;height:18px;accent-color:var(--epic-orange);flex:0 0 auto}
.health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.health-grid label .epic-input{margin-top:5px}.setting-note{margin:10px 0 0;color:#8392a1;font-size:.72rem;line-height:1.45}.checkbox-row{display:flex;gap:10px;align-items:center;min-height:44px;margin-top:7px}.checkbox-row input{width:22px;height:22px;accent-color:var(--epic-orange)}.checkbox-row label{font-weight:800}details.advanced{border-top:1px solid rgba(255,255,255,.06);margin-top:12px;padding-top:10px}details.advanced summary{cursor:pointer;color:#b7c3cf;font-size:.78rem;font-weight:800}.advanced-row{margin-top:10px}.advanced-row .percent-field{margin-top:5px;max-width:150px}
.capacity-grid{display:grid;gap:9px}.capacity-row{display:grid;grid-template-columns:94px 1fr auto;gap:10px;align-items:center}.capacity-label{color:#cbd3db;font-size:.76rem;font-weight:800;text-transform:uppercase}.capacity-bar{height:9px;background:#020910;border-radius:999px;overflow:hidden;border:1px solid #263a4b}.capacity-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1aac69,var(--epic-green));transition:width .2s ease}.capacity-bar.over>i{background:linear-gradient(90deg,#e94444,var(--epic-red))}.capacity-value{min-width:92px;text-align:right;font-variant-numeric:tabular-nums;font-size:.7rem;color:#dce4eb}.auto-update-note{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#b8d7c4;font-weight:850;font-size:.76rem}.live-dot{width:9px;height:9px;border-radius:50%;background:#45d77a;box-shadow:0 0 0 4px rgba(69,215,122,.11)}.epic-action,.toolbar-button{min-height:39px;border:1px solid #3b5063;background:#071725;color:#e8edf2;border-radius:7px;padding:0 12px;cursor:pointer;font-weight:850}.epic-action.danger{border-color:#74353a;color:#ffb2b2;background:#1a0b10}
.calculator-main{min-width:0;display:grid;gap:16px}.selection-panel{border:1px solid var(--epic-line);border-radius:12px;overflow:hidden;background:#05131f}.category-tabs{display:flex;background:#030c14;border-bottom:1px solid var(--epic-line);overflow-x:auto}.category-tab{border:0;border-right:1px solid #203344;background:transparent;color:#9eabb8;min-height:52px;padding:0 18px;cursor:pointer;font-weight:900;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.category-tab.active{color:white;background:#0a1c2a;box-shadow:inset 0 -3px 0 var(--epic-orange)}.category-tab .tab-count{margin-left:6px;color:var(--epic-orange)}.category-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.category-toolbar p{margin:0;color:var(--epic-muted);font-size:.76rem}.toolbar-button{min-height:34px;font-size:.7rem;white-space:nowrap}.level-selection-list{display:grid;gap:0;max-height:none;overflow:visible}.unit-level-row{display:grid;grid-template-columns:105px minmax(0,1fr);border-bottom:1px solid rgba(255,255,255,.07);min-width:0}.unit-level-row:last-child{border-bottom:0}.level-selector{padding:13px 10px;background:#04101a;border-right:1px solid rgba(255,255,255,.07);display:flex;align-items:flex-start;gap:8px;position:sticky;left:0;z-index:2}.level-selector input{width:20px;height:20px;accent-color:var(--epic-orange);margin-top:2px}.level-selector strong{display:block;color:#fff;font-size:.93rem}.level-selector span{display:block;margin-top:3px;color:#7e8e9d;font-size:.58rem;text-transform:uppercase}.level-cards{display:flex;gap:9px;padding:10px;overflow-x:auto;scrollbar-width:thin}.unit-option{position:relative;display:grid;grid-template-columns:68px minmax(96px,1fr);gap:10px;align-items:center;flex:0 0 205px;min-height:91px;padding:9px;border:1px solid #2a4052;background:#061725;border-radius:8px;cursor:pointer;transition:.14s ease}.unit-option:hover{border-color:#6b8296;transform:translateY(-1px)}.unit-option.selected{border:2px solid #ff9d00;background:linear-gradient(145deg,#293225,#10202a);box-shadow:0 0 0 2px rgba(255,157,0,.16),0 0 18px rgba(255,157,0,.13)}.unit-option.selected:after{content:"✓";position:absolute;top:5px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#ff9d00;color:#1b0e00;font-size:.75rem;font-weight:1000}.unit-option input{position:absolute;opacity:0;pointer-events:none}.unit-option img{width:68px;height:68px;object-fit:cover;border-radius:6px;background:#02080d;border:1px solid #33495a}.unit-copy{min-width:0}.unit-type{color:#ffb74a;font-size:.62rem;font-weight:900;text-transform:uppercase}.unit-name{color:#fff;font-size:.7rem;font-weight:800;line-height:1.15;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.unit-strength{color:#8f9dac;font-size:.58rem;margin-top:4px}.missing-icon{filter:grayscale(1);opacity:.7}
.result-panel{border:1px solid var(--epic-line);border-radius:12px;background:#05131f;overflow:hidden}.result-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.result-head h2{margin:0;font-size:1rem;text-transform:uppercase}.results-title-group{display:flex;align-items:center;gap:10px;min-width:0}.results-method-switch{display:grid;grid-template-columns:repeat(2,auto);margin-left:10px;padding:2px;border:1px solid #3b5163;border-radius:7px;background:#07131e}.results-method-switch button{min-height:28px;padding:4px 10px;border:0;border-radius:5px;background:transparent;color:#91a3b2;font:inherit;font-size:.62rem;font-weight:850;text-transform:uppercase;cursor:pointer}.results-method-switch button.is-active{background:#a97713;color:#fff}.result-status{color:#95a4b3;font-size:.72rem}.result-empty{padding:32px 18px;color:#8f9eac;text-align:center;line-height:1.55}.result-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:13px}.result-group{border:1px solid #293e50;border-radius:9px;overflow:hidden;background:#061725}.result-group h3{margin:0;padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.06);text-transform:uppercase;font-size:.77rem;letter-spacing:.07em}.result-list{display:grid}.result-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.075);background:linear-gradient(90deg,var(--row-color,#10202c) 0%,var(--row-color,#10202c) 38%,#061725 100%);box-shadow:inset 4px 0 0 var(--row-accent,#415467)}.result-row:last-child{border-bottom:0}.result-row img{width:76px;height:76px;object-fit:cover;border-radius:5px;border:1px solid #31485b}.result-unit{min-width:0}.result-unit strong{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-unit span{display:block;margin-top:2px;color:#7f90a0;font-size:.59rem}.result-qty{text-align:right;font-size:1.18rem;font-weight:950;color:#fff;font-variant-numeric:tabular-nums}.result-qty small{display:block;color:#718393;font-size:.55rem;font-weight:700;text-transform:uppercase}.result-debug{margin-top:2px;color:#d7a758!important}.validation-box{display:none;padding:11px 13px;border:1px solid rgba(255,95,95,.42);background:rgba(143,31,31,.13);color:#ffc7c7;border-radius:8px;font-size:.76rem;line-height:1.45}.validation-box.show{display:block}
.preserve-results-position,.preserve-results-position *{overflow-anchor:none!important;scroll-behavior:auto!important}
@media(max-width:760px){.results-title-group{width:100%;flex-wrap:wrap}.results-method-switch{margin-left:auto}.result-status{width:100%;margin-left:0}}
@media(max-width:1180px){
  .epic-grid{grid-template-columns:1fr}
  .epic-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .epic-sidebar>:first-child{grid-row:span 2}
  .result-groups{grid-template-columns:1fr 1fr}
  .result-group:last-child{grid-column:1/-1}
}
@media(max-width:760px){
  .epic-shell{padding-top:20px}
  .epic-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .epic-sidebar{grid-template-columns:1fr}
  .epic-sidebar>:first-child{grid-row:auto}
  .limit-row{grid-template-columns:minmax(0,1fr) auto 92px}
  .health-grid{grid-template-columns:1fr 1fr 1fr}
  .unit-level-row{grid-template-columns:82px minmax(0,1fr)}
  .level-selector{padding:12px 7px}
  .unit-option{flex-basis:198px}
  .result-groups{grid-template-columns:1fr}
  .result-group:last-child{grid-column:auto}
  .result-head{align-items:flex-start;flex-direction:column}
  .category-toolbar{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
  .health-grid{grid-template-columns:1fr}
  .limit-row{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "maximum maximum" "autofill fill"}
  .auto-fill-toggle{min-width:0}
  .unit-level-row{grid-template-columns:72px minmax(0,1fr)}
  .level-selector{flex-direction:column;gap:4px}
  .level-selector input{width:22px;height:22px}
  .unit-option{grid-template-columns:64px minmax(92px,1fr);flex-basis:190px}
  .unit-option img{width:64px;height:64px}
  .result-row{grid-template-columns:70px minmax(0,1fr) auto;padding:10px}
  .result-row img{width:70px;height:70px}
}

/* v11 alignment refinements */
.limit-control,.auto-fill-toggle{align-self:end}
.limit-fill .percent-field,.limit-maximum .epic-input{width:100%}
.health-grid{align-items:end}
.health-grid>label{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.health-percent-field{margin-top:5px}
.health-percent-field .epic-input{text-align:right}

/* Layer separation slider */
.layer-separation-control{margin-top:10px}
.slider-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.slider-heading label{margin:0}
.slider-heading output{min-width:66px;text-align:center;padding:5px 8px;border:1px solid #53683b;border-radius:6px;background:#315d29;color:#fff;font-weight:900;font-size:.76rem;font-variant-numeric:tabular-nums}
.separation-slider{width:100%;height:24px;margin:0;accent-color:#78c84f;cursor:pointer}
.slider-scale{display:flex;justify-content:space-between;margin-top:0;color:#98a7b6;font-size:.66rem;font-variant-numeric:tabular-nums}
.slider-reset{margin-top:12px;min-height:38px;border:1px solid #52793a;background:#071725;color:#d7e8d1;border-radius:7px;padding:0 12px;font-weight:800;cursor:pointer}
.slider-reset:hover{border-color:#76a95a;background:#0a1d28}

/* v11 does not display internal ranking diagnostics to players */
.result-debug{display:none!important}


/* v12 Layer Health & Dying Order */
.layer-chart-panel{
  border:1px solid var(--epic-line);
  border-radius:12px;
  background:linear-gradient(145deg,var(--epic-panel-2),var(--epic-panel));
  overflow:hidden;
}
.layer-chart-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:15px 17px 13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.section-number{
  font-size:.92rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
}
.layer-chart-head p{
  margin:6px 0 0;
  color:#93a1af;
  font-size:.74rem;
  line-height:1.45;
  max-width:760px;
}
.die-direction{
  display:flex;
  align-items:center;
  gap:8px;
  color:#cbd5df;
  font-size:.68rem;
  text-transform:uppercase;
  font-weight:900;
  white-space:nowrap;
  padding-top:2px;
}
.die-direction b{color:var(--epic-orange);font-size:1rem}
.layer-chart-empty{
  margin:13px;
  padding:28px 16px;
  text-align:center;
  color:#8494a3;
  border:1px dashed #2a4052;
  border-radius:9px;
  font-size:.76rem;
}
.layer-chart-scroll{
  overflow-x:auto;
  padding:12px 13px 5px;
  -webkit-overflow-scrolling:touch;
}
.layer-chart-wrap{
  position:relative;
  min-width:760px;
  border:1px solid #293e50;
  border-radius:9px;
  overflow:hidden;
  background:#04111b;
}
.layer-health-chart{
  display:block;
  width:100%;
  height:480px;
  overflow:visible;
}
.chart-tooltip{
  position:absolute;
  z-index:4;
  pointer-events:none;
  min-width:170px;
  max-width:235px;
  padding:9px 10px;
  border:1px solid #53697c;
  border-radius:7px;
  background:rgba(2,10,17,.96);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  color:#fff;
  font-size:.69rem;
  line-height:1.45;
}
.chart-tooltip strong{display:block;color:#fff;margin-bottom:3px}
.chart-tooltip span{display:block;color:#aebac6}

.chart-legend{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
  padding:8px 15px 14px;
  color:#a9b5c0;
  font-size:.7rem;
  font-weight:800;
}
.chart-legend span{display:flex;align-items:center;gap:7px}
.legend-line{width:23px;height:3px;border-radius:999px;display:inline-block}
.legend-line.troop{background:#e8edf2}
.legend-line.monster{background:#4e91e6}
.legend-line.mercenary{background:#d34c3f}

.chart-axis-label{fill:#8292a1;font-size:11px;font-weight:700}
.chart-grid-line{stroke:rgba(180,195,208,.16);stroke-width:1}
.chart-grid-line-vertical{stroke:rgba(180,195,208,.10)}
.chart-axis-line{stroke:#627789;stroke-width:1.5}
.chart-series-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart-point{stroke:#02080d;stroke-width:2;cursor:pointer}
.chart-point-label{font-size:12px;font-weight:900;text-anchor:middle}
.chart-y-title{fill:#98a8b7;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.chart-style-control{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #3a5063;border-radius:8px;background:#07131d;white-space:nowrap}
.chart-style-control button{min-height:28px;padding:4px 9px;border:0;border-radius:5px;background:transparent;color:#9fb0bf;font-family:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.chart-style-control button:hover{color:#fff;background:#172735}.chart-style-control button.active{color:#071019;background:#e2a72e}

@media(max-width:760px){
  .layer-chart-head{flex-direction:column}
  .die-direction{width:100%;justify-content:flex-start}
  .layer-health-chart{height:440px}
}


/* v13 chart refinements */
.chart-legend{
  justify-content:center;
  padding:12px 15px 5px;
}
.layer-chart-scroll{
  overflow-x:hidden;
  padding:10px 13px 7px;
}
.layer-chart-wrap{
  min-width:0;
  width:100%;
}
.layer-health-chart{
  width:100%;
  height:auto;
  aspect-ratio:1.65/1;
  min-height:360px;
}
.chart-tooltip{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:9px;
  align-items:start;
  min-width:210px;
  max-width:270px;
}
.chart-tooltip img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid #4b6274;
  background:#02080d;
}
.chart-tooltip .tooltip-copy{min-width:0}
.chart-tooltip .tooltip-copy strong{font-size:.74rem}
.chart-tooltip .tooltip-copy span{font-size:.66rem}
@media(max-width:760px){
  .chart-legend{gap:13px;padding-top:11px}
  .layer-chart-scroll{padding-left:8px;padding-right:8px}
  .layer-health-chart{min-height:340px;aspect-ratio:1.2/1}
  .chart-tooltip{grid-template-columns:52px minmax(0,1fr);min-width:190px;max-width:235px}
  .chart-tooltip img{width:52px;height:52px}
}


/* v14 tabbed work area */
.category-tabs{
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.category-tab{
  flex:0 0 auto;
}
.selection-content[hidden],
.tab-view-panel[hidden]{
  display:none!important;
}
.selection-panel{
  overflow:hidden;
}
.result-unit strong{
  color:#f2b544;
  font-weight:950;
}
.result-unit span{
  color:#ffd177;
  font-weight:750;
}
@media(max-width:760px){
  .category-tabs{
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .category-tab{
    min-width:max-content;
    padding-left:15px;
    padding-right:15px;
  }
}

.mode-switch{display:inline-flex;margin:12px 0 5px;padding:3px;border:1px solid #354b5e;border-radius:9px;background:#020b13}
.mode-button{min-height:39px;border:0;border-radius:6px;background:transparent;color:#94a4b3;padding:0 16px;cursor:pointer;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.mode-button.active{color:#140b00;background:linear-gradient(#ffb22d,#ef8b00)}
.mode-description{margin-top:7px!important}
.order-view{padding:14px}
.order-intro h2{margin:0;font-size:1rem;text-transform:uppercase}.order-intro p{margin:5px 0 13px;color:#91a0af;font-size:.74rem}
.order-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.order-group{border:1px solid #2b4153;border-radius:9px;background:#051520;overflow:hidden}.order-group h3{margin:0;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.8rem;text-transform:uppercase}
.order-direction{display:flex;justify-content:space-between;padding:7px 11px;color:#7f90a0;font-size:.6rem;text-transform:uppercase;font-weight:850}
.order-list{display:grid;gap:6px;padding:8px}
.order-item{display:grid;grid-template-columns:30px minmax(0,1fr) 34px 34px;gap:6px;align-items:center;min-height:48px;padding:6px 7px;border:1px solid #344a5d;border-radius:7px;background:#081b29;user-select:none}
.order-item.dragging{opacity:.45}.drag-handle{font-size:1.15rem;color:#8092a3;cursor:grab;text-align:center}
.order-copy strong{display:block;color:#fff;font-size:.78rem}.order-copy span{display:block;color:#8b9aa9;font-size:.6rem;margin-top:2px}
.order-move{width:32px;height:32px;border:1px solid #3d5365;border-radius:6px;background:#06121d;color:#dbe3ea;cursor:pointer;font-weight:950}
.order-empty{padding:15px 10px;color:#7f90a0;text-align:center;font-size:.7rem}.custom-only-tab[hidden]{display:none!important}
@media(max-width:900px){.order-columns{grid-template-columns:1fr}}
@media(max-width:520px){.mode-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.mode-button{padding:0 8px;font-size:.72rem}}


/* v20 refinements */

/* Match Health input numerals to Army Limit input numerals */
.health-percent-field .epic-input{
  font-size:1rem!important;
  font-weight:500!important;
  line-height:1.2!important;
}

/* Colored custom-order rows use the same visual language as Results */
.order-item{
  background:
    linear-gradient(90deg,
      var(--order-row-color,#10202c) 0%,
      var(--order-row-color,#10202c) 42%,
      #081b29 100%);
  box-shadow:inset 4px 0 0 var(--order-accent,#415467);
  transition:transform .13s ease, box-shadow .13s ease, opacity .13s ease, background .13s ease;
}
.order-item.dragging{
  opacity:.72;
  box-shadow:
    inset 4px 0 0 var(--order-accent,#415467),
    0 8px 22px rgba(0,0,0,.28);
  transform:scale(1.015);
  z-index:5;
}
.order-item.drag-over{
  transform:translateY(4px);
}
.order-list.drag-active .order-item:not(.dragging){
  transition:transform .12s ease;
}
.drag-handle{
  cursor:grab;
}
.order-item.dragging .drag-handle{
  cursor:grabbing;
}


/* v21 final polish */

/* The tooltip uses the HTML hidden attribute; explicitly honor it even though
   the tooltip is otherwise display:grid. */
.chart-tooltip[hidden]{
  display:none!important;
}

/* Match the Health % symbol to the value typography. */
.health-percent-field>span{
  font-size:1rem!important;
  font-weight:500!important;
  line-height:1.2!important;
  color:#fff!important;
  font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   v43 SIMPLIFIED STACKER UI
   Compact unit selection, text-only results, reduced vertical space.
   ========================================================================== */

/* Overall density */
.epic-shell{padding-top:24px}
.epic-grid{grid-template-columns:minmax(300px,.62fr) minmax(0,2.2fr);gap:14px}
.epic-sidebar{gap:10px}
.epic-panel-title{padding:11px 13px 10px;font-size:.78rem}
.epic-panel-body{padding:12px}
.epic-input{min-height:39px;padding:7px 9px}
.limit-list{gap:10px}
.limit-row{gap:5px 8px;padding-bottom:10px}
.health-grid{gap:7px}
.setting-note{font-size:.66rem;margin-top:7px}
.checkbox-row{min-height:36px;margin-top:5px}
details.advanced{margin-top:8px;padding-top:7px}

/* Health help stays available without taking permanent space. */
.health-help-details{margin-top:8px;border-top:1px solid rgba(255,255,255,.055);padding-top:7px}
.health-help-details summary{cursor:pointer;color:#8fa0af;font-size:.66rem;font-weight:800}
.health-help-details p{margin:6px 0 0;color:#81919f;font-size:.65rem;line-height:1.45}

/* Capacity + reset compact utility row */
.capacity-grid{gap:7px}
.capacity-row{grid-template-columns:78px 1fr auto;gap:7px}
.capacity-label{font-size:.68rem}
.capacity-value{min-width:82px;font-size:.65rem}
.calculator-utility-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.calculator-utility-row .auto-update-note{margin:0;font-size:.64rem}
.compact-reset{min-height:31px;padding:0 10px;font-size:.64rem}

/* Smaller navigation tabs */
.category-tabs{position:sticky;top:72px;z-index:12}
.category-tab{min-height:44px;padding:0 13px;font-size:.72rem}
.category-toolbar{padding:8px 10px}
.category-toolbar p{font-size:.66rem}
.toolbar-button{min-height:30px;padding:0 10px;font-size:.63rem}

/* Unit selection: no icons, no horizontal card scroller */
.level-selection-list{max-height:none}
.unit-level-row{
  grid-template-columns:72px minmax(0,1fr);
  border-bottom:1px solid rgba(255,255,255,.065);
}
.level-selector{
  min-height:100%;
  padding:8px 7px;
  gap:6px;
  align-items:center;
  border-left:3px solid var(--level-accent,#526274);
}
.level-selector input{width:18px;height:18px;margin:0}
.level-selector strong{font-size:.78rem}
.level-selector span{margin-top:1px;font-size:.52rem}
.level-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:5px;
  padding:6px;
  overflow:visible;
}
.unit-option{
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:6px;
  align-items:center;
  min-width:0;
  min-height:42px;
  padding:5px 7px;
  border:1px solid #2a4052;
  border-left:3px solid var(--unit-accent,#526274);
  border-radius:6px;
  background:#061725;
  cursor:pointer;
  transition:border-color .1s ease,background .1s ease,transform .1s ease;
}
.unit-option:hover{border-color:#6b8296;transform:none;background:#0a1c29}
.unit-option.selected{
  border:1px solid #ff9d00;
  border-left:4px solid #ff9d00;
  background:#19251f;
  box-shadow:inset 0 0 0 1px rgba(255,157,0,.18);
}
.unit-option.selected:after{content:none}
.unit-option input{position:absolute;opacity:0;pointer-events:none}
.unit-check{
  width:18px;height:18px;
  display:grid;place-items:center;
  border:1px solid #526678;
  border-radius:4px;
  color:#1b0e00;
  background:#020b13;
  font-size:.7rem;
  font-weight:1000;
}
.unit-option.selected .unit-check{background:#ff9d00;border-color:#ff9d00}
.unit-copy{min-width:0}
.unit-name{
  color:#eef2f5;
  font-size:.67rem;
  font-weight:850;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0;
  display:block;
}
.unit-type{
  margin-top:2px;
  color:#8091a0;
  font-size:.53rem;
  font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.unit-strength{display:none}

/* Results: compact unit identity, icon, and quantity. */
.result-groups{gap:10px;padding:10px}
.result-group{background:#06131e}
.result-group h3{padding:8px 10px;font-size:.68rem}
.result-list{padding:3px 8px 6px}
.result-row.compact-result-row{
  display:flex;
  align-items:flex-end;
  gap:7px;
  min-height:38px;
  padding:3px 7px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:linear-gradient(90deg,var(--result-bg,#10202c) 0%,var(--result-bg-soft,#0a1822) 100%)!important;
  border:1px solid color-mix(in srgb,var(--result-accent,#415467) 68%,transparent);
  border-left:4px solid var(--result-accent,#415467);
  border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
  margin:2px 0;
}
.result-row.compact-result-row:last-child{border-bottom:0}
.result-label{min-width:0;flex:0 1 auto;color:var(--result-text,#dfe5ea);text-shadow:0 1px 0 rgba(0,0,0,.65)}
.result-label strong{
  display:block;
  color:inherit;
  font-size:.76rem;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.result-label span{
  display:block;
  margin-top:2px;
  color:inherit;
  opacity:.78;
  font-size:.56rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.result-leader{
  flex:1 1 30px;
  min-width:16px;
  height:1px;
  margin-bottom:5px;
  border-bottom:2px dotted color-mix(in srgb,var(--result-text,#a7b4bf) 55%,transparent);
}
.result-qty{
  flex:0 0 auto;
  color:var(--result-text,#fff);
  text-shadow:0 1px 0 rgba(0,0,0,.7);
  font-size:.94rem;
  line-height:1;
  font-weight:950;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.result-qty small{display:none}
.compact-result-empty{padding:10px!important;font-size:.65rem}

/* Give the health ladder enough height for unit-colored labels and axes. */
.layer-health-chart{min-height:360px}
.chart-tooltip img{display:block}

/* Mobile */
@media(max-width:1180px){
  .epic-grid{grid-template-columns:1fr}
  .epic-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .epic-sidebar>:first-child{grid-row:span 2}
}

@media(max-width:760px){
  .epic-sidebar{grid-template-columns:1fr}
  .epic-sidebar>:first-child{grid-row:auto}
  .category-tabs{top:72px}
  .category-tab{min-height:42px;padding:0 10px;font-size:.66rem}
  .category-toolbar{display:flex;flex-direction:row;align-items:center}
  .category-toolbar p{max-width:75%}
  .level-selection-list{max-height:none}
  .unit-level-row{grid-template-columns:60px minmax(0,1fr)}
  .level-selector{padding:6px 5px}
  .level-selector strong{font-size:.7rem}
  .level-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px}
  .unit-option{min-height:44px;padding:5px 6px}
  .unit-name{font-size:.64rem}
  .unit-type{font-size:.5rem}
  .result-groups{grid-template-columns:1fr}
  .result-group:last-child{grid-column:auto}
  .health-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .health-grid label{font-size:.56rem;letter-spacing:.02em}
  .health-percent-field .epic-input{font-size:.85rem!important;padding-left:4px;padding-right:21px}
  .health-percent-field>span{right:6px;font-size:.85rem!important}
  .layer-health-chart{min-height:340px}
}

@media(max-width:420px){
  .level-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-option{grid-template-columns:16px minmax(0,1fr);gap:5px}
  .unit-check{width:16px;height:16px;font-size:.62rem}
  .result-label strong{font-size:.72rem}
  .result-qty{font-size:.84rem}
}

/* v44 top-down stacking calculator layout */
.topdown-stacker-page .wide-container{max-width:1500px}
.topdown-stacker-page .epic-heading{margin-bottom:20px}
.topdown-stacker-page .validation-box{margin:0 0 16px}
.topdown-panel{background:#111d28;border:1px solid #334658;border-radius:14px;overflow:hidden;margin-bottom:18px}
.topdown-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;border-bottom:1px solid #263849;background:#0d1721}
.topdown-panel-heading>div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topdown-panel-heading h2{font-size:17px;line-height:1.15;margin:0;text-transform:uppercase;letter-spacing:.035em;color:#f2f5f8}
.topdown-panel-heading p{margin:0;color:#9fb0c0;font-size:12px;flex-basis:100%;padding-left:34px}
.section-kicker{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#e9a020;color:#07131d;font-weight:900;font-size:13px}

.setup-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);gap:18px;padding:18px}
.setup-block{min-width:0;padding:0 2px}
.setup-block h3,.capacity-results h3{margin:0 0 11px;color:#dce6ef;text-transform:uppercase;font-size:13px;letter-spacing:.05em}
.compact-limit-list .limit-row{display:grid;grid-template-columns:minmax(95px,.65fr) minmax(110px,1fr) auto minmax(100px,.72fr);gap:9px;align-items:end;padding:9px 0;border-bottom:1px solid #263746}
.compact-limit-list .limit-row:last-child{border-bottom:0}
.compact-limit-list .limit-name{align-self:center;margin-top:15px}
.compact-limit-list .auto-fill-toggle{margin-bottom:0;height:42px}
.health-setup-block{padding-left:18px;border-left:1px solid #2b3d4e}
.health-setup-block .health-grid{grid-template-columns:repeat(3,minmax(100px,1fr));gap:10px}
.health-setup-block .checkbox-row{margin-top:12px}
.health-setup-block .advanced{margin-top:10px}

.selection-area{overflow:visible}
.selection-heading .toolbar-button{flex:0 0 auto}
.selection-card-grid{display:grid;grid-template-columns:repeat(4,minmax(175px,1fr)) minmax(260px,1.5fr);gap:10px;padding:12px}
.selection-card{--card-accent:#8aa0b4;background:#0d1822;border:1px solid #2d4052;border-top:3px solid var(--card-accent);border-radius:10px;min-width:0;overflow:hidden}
.selection-guardsmen{--card-accent:#d78538}.selection-specialists{--card-accent:#be77c7}.selection-engineers{--card-accent:#d6b34c}.selection-monsters{--card-accent:#5fa4d9}.selection-mercenaries{--card-accent:#d05f5a}
.selection-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;background:#101f2b;border-bottom:1px solid #263847}
.selection-card-title h3{margin:0;color:#f0f4f7;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.selection-card-title>div>span{display:block;margin-top:2px;color:#8497a8;font-size:10px}
.category-master,.level-master,.subgroup-master{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#cbd6df;font-size:11px;font-weight:800}
.category-master input,.level-master input,.subgroup-master input,.hierarchy-unit input{accent-color:#e9a020}
.hierarchy-list{padding:6px;max-height:none;overflow:visible}
.selection-level,.selection-subgroup{border:1px solid var(--level-border,#263849);border-radius:7px;background:#0a151e;margin-bottom:5px;overflow:hidden}
.selection-level:last-child{margin-bottom:0}
.selection-level>summary,.selection-subgroup>summary{list-style:none;display:grid;grid-template-columns:13px 1fr auto;align-items:center;gap:5px;min-height:33px;padding:5px 7px;cursor:pointer;background:var(--level-surface-strong,#11202c);color:var(--level-text,#d7e1e9)}
.selection-level>summary::-webkit-details-marker,.selection-subgroup>summary::-webkit-details-marker{display:none}
.level-chevron::before,.subgroup-chevron::before{content:'›';display:block;font-size:16px;line-height:1;color:#7d91a3;transition:transform .15s ease}
.selection-level[open]>summary .level-chevron::before,.selection-subgroup[open]>summary .subgroup-chevron::before{transform:rotate(90deg)}
.level-master{font-size:12px}.level-master span{color:var(--level-text,#f2f5f7)}.level-selected-count,.selection-subgroup>summary>span:last-child{font-size:9px;color:var(--level-text,#7f93a5);opacity:.82;font-variant-numeric:tabular-nums}
.selection-level-body{padding:5px;background:var(--level-surface,#09131c)}
.selection-subgroup{border-color:var(--level-border,#213443);margin-bottom:4px}
.selection-subgroup>summary{min-height:30px;background:var(--level-surface,#0e1c27);padding:4px 6px}
.subgroup-master{font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.hierarchy-unit-list{display:grid;grid-template-columns:1fr;gap:3px;padding:4px 0 0}
.hierarchy-unit{position:relative;display:flex;align-items:center;gap:6px;min-height:31px;padding:5px 6px;border:1px solid var(--level-border,#2a3c4b);border-radius:6px;background:var(--level-surface,#101c26);cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}
.hierarchy-unit:hover{border-color:var(--level-base,#536d82);box-shadow:inset 3px 0 0 var(--level-base,#536d82)}.hierarchy-unit.selected{border-color:var(--level-base,var(--card-accent,#e9a020));background:var(--level-surface,#15251f);box-shadow:inset 3px 0 0 var(--level-base,var(--card-accent,#e9a020))}
.hierarchy-unit>input{position:absolute;opacity:0;pointer-events:none}
.hierarchy-check{display:grid;place-items:center;flex:0 0 17px;width:17px;height:17px;border:1px solid #667a8a;border-radius:4px;color:#07131d;font-size:11px;font-weight:900;background:#09141d}
.hierarchy-unit.selected .hierarchy-check{background:#e9a020;border-color:#e9a020}
.hierarchy-unit-copy{min-width:0;display:block}.hierarchy-unit-copy strong{display:block;color:var(--level-text,#e9eef3);font-size:10px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hierarchy-unit-copy small{display:block;color:var(--level-text,#708596);opacity:.72;font-size:8px;line-height:1;margin-top:3px;text-transform:uppercase}
.selection-card .selection-level>summary{border-left:4px solid var(--level-base,var(--card-accent));box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}

.order-view{padding-bottom:0}.order-view>.topdown-panel-heading{margin-bottom:0}.order-view .order-columns{padding:14px}
.output-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;align-items:start}
.output-grid>.topdown-panel{margin-bottom:0;min-width:0}
.result-panel{padding:0}.result-panel .result-head{padding:14px 16px}.result-panel .result-head>div{display:flex;align-items:center;gap:10px}.result-status{margin-left:auto}
.capacity-results{padding:14px 16px;border-bottom:1px solid #263849;background:#0e1923}
.capacity-results .capacity-grid{gap:8px}.capacity-results .capacity-row{grid-template-columns:82px minmax(80px,1fr) minmax(115px,auto)}
.result-panel .result-empty{margin:14px 16px}.result-panel .result-groups{padding:0 16px 10px}.result-utility{padding:8px 16px 14px}
.layer-chart-panel{padding:0}.layer-chart-panel .layer-chart-head{padding:14px 16px;border-bottom:1px solid #263849}.layer-chart-panel .section-number{display:flex;align-items:center;gap:10px;color:#f0f4f7;text-transform:uppercase;font-weight:900}.layer-chart-panel .chart-legend{padding:8px 16px}.layer-chart-panel .layer-chart-empty{margin:10px 16px 16px}.layer-chart-panel .layer-chart-scroll{margin:0 10px 12px}

@media (max-width:1180px){
  .selection-card-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}.selection-mercenaries{grid-column:span 2}
  .setup-grid{grid-template-columns:1fr}.health-setup-block{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid #2b3d4e}
}
@media (max-width:860px){
  .topdown-stacker-page .epic-shell{padding-top:18px}
  .setup-grid{padding:12px}
  .compact-limit-list .limit-row{grid-template-columns:1fr 1fr}.compact-limit-list .limit-name{grid-column:1/-1;margin:0}.compact-limit-list .auto-fill-toggle{height:40px}.compact-limit-list .limit-fill{grid-column:2}
  .health-setup-block .health-grid{grid-template-columns:repeat(3,1fr)}
  .selection-card-grid{grid-template-columns:1fr 1fr;padding:10px}.selection-mercenaries{grid-column:1/-1}
  .hierarchy-list{max-height:none}
  .output-grid{grid-template-columns:1fr}.output-grid>.topdown-panel{margin-bottom:18px}
}
@media (max-width:600px){
  .topdown-panel{border-radius:10px;margin-bottom:12px}
  .topdown-panel-heading{padding:12px;align-items:flex-start}.topdown-panel-heading p{padding-left:0}.auto-update-note{font-size:9px}
  .health-setup-block .health-grid{grid-template-columns:1fr}
  .selection-card-grid{grid-template-columns:1fr;gap:8px}.selection-mercenaries{grid-column:auto}
  .selection-card-title{padding:9px 10px}.hierarchy-list{padding:5px}.selection-level>summary{min-height:38px}.hierarchy-unit{min-height:36px}.hierarchy-unit-copy strong{font-size:11px}
  .order-view .order-columns{padding:10px}
  .capacity-results .capacity-row{grid-template-columns:72px 1fr}.capacity-results .capacity-value{grid-column:1/-1;text-align:right;margin-top:-2px}
}

/* v46: Advanced settings now live directly beneath Army Limits. */
.setup-grid{grid-template-columns:minmax(0,1fr)}
.advanced-settings-panel{margin-top:14px!important;padding-top:12px!important}
.advanced-settings-panel>summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 2px;font-size:.8rem!important;letter-spacing:.03em}
.advanced-settings-content{display:grid;gap:16px;padding:14px 0 2px}
.advanced-health-block h3{margin:0 0 10px}
.advanced-settings-content .health-grid{grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px}
.advanced-settings-content .health-help-details{margin-top:8px}
.advanced-settings-content .layer-separation-control{margin-top:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.advanced-reset{justify-self:start;margin-top:0}
@media (max-width:760px){.advanced-settings-content .health-grid{grid-template-columns:1fr}.advanced-reset{width:100%}}


/* v47: Compact horizontal Army Limits controls.
   Desktop: Leadership / Authority / Dominance sit side-by-side.
   Each card keeps Maximum on top with compact Max Fill + Fill controls below. */
.compact-limit-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(210px,260px));
  gap:14px;
  max-width:808px;
  align-items:start;
}
.compact-limit-list .limit-row{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:
    "name name"
    "maximum maximum"
    "autofill fill";
  justify-content:start;
  align-items:end;
  column-gap:10px;
  row-gap:7px;
  min-width:0;
  padding:12px 13px 13px;
  border:1px solid #2d4052;
  border-radius:9px;
  background:#0d1822;
}
.compact-limit-list .limit-row:last-child{border-bottom:1px solid #2d4052}
.compact-limit-list .limit-name{
  grid-area:name;
  align-self:auto;
  margin:0 0 1px;
  color:#f0f4f7;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.025em;
}
.compact-limit-list .limit-maximum{grid-area:maximum}
.compact-limit-list .limit-fill{grid-area:fill}
.compact-limit-list .auto-fill-toggle{
  grid-area:autofill;
  align-self:end;
  width:auto;
  min-width:0;
  height:39px;
  margin:0;
  padding:0 10px;
  white-space:nowrap;
}
.compact-limit-list .limit-control{width:auto;min-width:0}
.compact-limit-list .limit-maximum .epic-input{
  width:12ch;
  max-width:100%;
}
.compact-limit-list .limit-fill .percent-field{
  width:9ch;
  min-width:0;
}
.compact-limit-list .limit-fill .percent-field .epic-input{
  width:100%;
  min-width:0;
  padding-left:7px;
  padding-right:24px;
  text-align:right;
}
.compact-limit-list .field-label{margin-bottom:5px}
.setup-block>.setting-note{
  max-width:808px;
  margin-top:8px;
}
.setup-block>#arachneRow{max-width:808px}

@media (max-width:900px){
  .compact-limit-list{
    grid-template-columns:repeat(2,minmax(210px,260px));
    max-width:534px;
  }
}
@media (max-width:600px){
  .compact-limit-list{
    grid-template-columns:1fr;
    max-width:none;
    gap:9px;
  }
  .compact-limit-list .limit-row{
    grid-template-columns:auto auto;
    width:100%;
    padding:11px 12px 12px;
  }
  .compact-limit-list .limit-maximum .epic-input{width:12ch}
  .compact-limit-list .limit-fill .percent-field{width:9ch}
}


/* v48: Make the Advanced Settings disclosure state obvious. */
.advanced-settings-panel > summary{
  justify-content:flex-start;
  gap:8px;
  cursor:pointer;
  list-style:none;
}
.advanced-settings-panel > summary::-webkit-details-marker{display:none}
.advanced-settings-panel > summary::before{
  content:"▶";
  display:inline-block;
  font-size:.72em;
  line-height:1;
  transform-origin:center;
  transition:transform .15s ease;
}
.advanced-settings-panel[open] > summary::before{
  transform:rotate(90deg);
}


/* v50: Put Advanced Settings beside Army Limits on desktop and compact health inputs. */
.setup-grid{
  grid-template-columns:minmax(620px, 1.2fr) minmax(440px, .8fr)!important;
  gap:22px;
  align-items:start;
}
.advanced-settings-column{
  min-width:0;
  padding-left:22px;
  border-left:1px solid #2b3d4e;
}
.advanced-settings-column .advanced-settings-panel{
  margin-top:0!important;
  padding-top:0!important;
}
.advanced-settings-column .advanced-settings-panel>summary{
  min-height:34px;
}
.advanced-settings-column .advanced-settings-content{
  gap:14px;
  padding-top:10px;
}
.advanced-settings-column .health-grid{
  grid-template-columns:repeat(3, max-content)!important;
  justify-content:start;
  gap:16px!important;
}
.advanced-settings-column .health-grid>label{
  width:max-content;
}
.advanced-settings-column .health-percent-field{
  width:112px;
  min-width:112px;
  max-width:112px;
}
.advanced-settings-column .health-percent-field .epic-input{
  width:100%;
}
.advanced-settings-column .layer-separation-control{
  margin-top:2px;
}
.advanced-settings-column .health-help-details{
  max-width:560px;
}
@media (max-width:1180px){
  .setup-grid{
    grid-template-columns:1fr!important;
    gap:0;
  }
  .advanced-settings-column{
    margin-top:14px;
    padding-left:0;
    padding-top:14px;
    border-left:0;
    border-top:1px solid #2b3d4e;
  }
}
@media (max-width:600px){
  .advanced-settings-column .health-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .advanced-settings-column .health-grid>label{
    width:max-content;
  }
}


/* v53: Protect result quantities from clipping at narrow column widths.
   The quantity always keeps its intrinsic width; the label and dotted
   leader yield space first. */
.result-row.compact-result-row{
  min-width:0;
}

.result-row.compact-result-row .result-label{
  flex:1 1 0;
  min-width:0;
}

.result-row.compact-result-row .result-leader{
  flex:1 10 18px;
  min-width:0;
}

.result-row.compact-result-row .result-qty{
  flex:0 0 max-content;
  width:max-content;
  min-width:max-content;
  max-width:none;
  white-space:nowrap;
  overflow:visible;
  padding-left:2px;
}

/* Give the rightmost number a little breathing room from the card edge. */
.result-row.compact-result-row{
  padding-right:10px;
}

/* At especially narrow widths, sacrifice the dotted leader before
   allowing the quantity to become cramped. */
@media (max-width:1180px){
  .result-row.compact-result-row{
    gap:5px;
  }
  .result-row.compact-result-row .result-leader{
    flex-basis:8px;
  }
}

@media (max-width:760px){
  .result-row.compact-result-row .result-leader{
    display:none;
  }
  .result-row.compact-result-row .result-label{
    padding-right:6px;
  }
}


/* ==========================================================================
   v56 — Epic Stacker v2 production integration
   ========================================================================== */

.epic-v2-only[hidden],
.custom-v1-only[hidden]{display:none!important}

.advanced-divider{
  height:1px;
  margin:4px 0 12px;
  background:#263848;
}

.combat-input-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(130px,170px));
  gap:10px 14px;
  justify-content:start;
}
.combat-input-grid>label,
.derived-family-grid label{
  color:#aeb9c3;
  font-size:.64rem;
  font-weight:800;
}
.combat-input-grid .percent-field,
.derived-family-grid .percent-field{
  width:112px;
  margin-top:5px;
}
.combat-input-grid .epic-input,
.derived-family-grid .epic-input{
  width:100%;
}

.compact-family-override{
  display:flex;
  width:max-content;
  max-width:100%;
  min-height:34px;
  margin:12px 0 4px;
  padding:0;
  background:transparent;
  border:0;
}

.derived-family-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr));
  gap:14px;
  margin-top:8px;
}
.derived-family-grid section{
  padding:10px;
  border:1px solid #293d4e;
  border-radius:8px;
  background:#091723;
}
.derived-family-grid h4{
  margin:0 0 8px;
  color:#e8edf1;
  font-size:.72rem;
  text-transform:uppercase;
}
.derived-family-grid label{
  display:block;
  margin-top:8px;
}
.family-derived-field[readonly]{
  color:#8fa0af;
  background:#07111a;
  border-color:#263645;
  cursor:default;
}
.epic-v2-note{max-width:570px}

.epic-prediction-panel{
  margin:10px 10px 0;
  padding:10px;
  border:1px solid #2e4355;
  border-radius:8px;
  background:#081722;
}
.prediction-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.prediction-summary>div{
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:7px;
  background:#0b1c29;
}
.prediction-summary span{
  display:block;
  color:#8293a1;
  font-size:.58rem;
  font-weight:850;
  text-transform:uppercase;
}
.prediction-summary strong{
  display:block;
  margin-top:4px;
  color:#f0aa28;
  font-size:1.18rem;
  line-height:1.15;
}
.encounter-plan-details{margin-top:9px}.encounter-plan-details>.encounter-plan-preview{margin-top:0;padding:12px;border:0;border-top:1px solid #3a5266;border-radius:0;background:#07131e}.encounter-plan-preview header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.encounter-plan-preview header span{color:#f0aa28;font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.encounter-plan-preview h3{margin:2px 0 0;font-size:.92rem}.encounter-plan-preview header button{border:0;background:transparent;color:#9eabb7;font-size:1.25rem;cursor:pointer}.encounter-plan-controls{display:grid;grid-template-columns:minmax(150px,220px);gap:10px;margin-top:11px}.encounter-plan-attacks>span{display:block;margin-bottom:5px;color:#9eabb7;font-size:.6rem;font-weight:850;text-transform:uppercase}.encounter-plan-attacks{padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:#0b1c29;display:flex;flex-direction:column;justify-content:center}.encounter-plan-attacks>span{margin-bottom:3px}.encounter-plan-attacks strong{color:#f0aa28;font-size:1.05rem}.encounter-plan-table-wrap{margin-top:10px;overflow-x:auto;border:1px solid #33495b;border-radius:7px}.encounter-plan-table{width:100%;min-width:620px;border-collapse:collapse}.encounter-plan-table th{padding:8px 10px;background:#132235;color:#8ea2b3;font-size:.57rem;text-align:center;text-transform:uppercase}.encounter-plan-table th:first-child{text-align:left}.encounter-plan-table td{padding:9px 10px;border-top:1px solid #2d4355;color:#e6edf2;font-size:.72rem;text-align:right;font-weight:750}.encounter-plan-table td:first-child{text-align:left}.encounter-plan-table tbody tr{cursor:pointer;background:#091824;transition:background-color .15s ease}.encounter-plan-table tbody tr.is-selected{background:#16291f;box-shadow:inset 3px 0 #f0aa28}.encounter-plan-table tbody tr:hover{background:#102330}.encounter-plan-table label{display:flex;align-items:center;gap:8px;cursor:pointer}.encounter-plan-table input{accent-color:#f0aa28}.encounter-plan-table [data-cost]{color:#f0aa28;font-size:.82rem}.encounter-plan-note{margin:9px 0 0;color:#81909f;font-size:.64rem;line-height:1.45}
@media(max-width:720px){.encounter-plan-controls{grid-template-columns:1fr}.encounter-plan-attacks{min-height:55px}.encounter-plan-table-wrap{margin-left:-2px;margin-right:-2px}}
.encounter-plan-table [data-cost] strong{display:block;font-size:.86rem}.encounter-plan-table [data-cost] small{display:block;margin-top:2px;color:#8fa0ae;font-size:.53rem;white-space:nowrap}.encounter-plan-table [data-cost].net-positive strong{color:#78df91}.encounter-plan-table [data-cost].net-negative strong{color:#ff7777}
.battle-details{
  margin-top:9px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:8px;
}
.battle-details>summary{
  cursor:pointer;
  color:#aebbc6;
  font-size:.65rem;
  font-weight:850;
}
.prediction-meta{
  margin:8px 0;
  color:#8798a7;
  font-size:.62rem;
  line-height:1.45;
}
.prediction-table-wrap{overflow-x:auto}
.prediction-table{
  width:100%;
  min-width:690px;
  border-collapse:collapse;
  font-size:.59rem;
}
.prediction-table th,
.prediction-table td{
  padding:6px 7px;
  border-bottom:1px solid rgba(255,255,255,.055);
  text-align:right;
  white-space:nowrap;
}
.prediction-table th:first-child,
.prediction-table td:first-child{text-align:left}
.prediction-table th{
  color:#8193a2;
  text-transform:uppercase;
  font-size:.53rem;
}
.prediction-table td{color:#c9d1d8}

.optimizing-status{
  color:#f0a51a!important;
}
.optimizing-status::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  margin-right:6px;
  border:2px solid rgba(240,165,26,.28);
  border-top-color:#f0a51a;
  border-radius:50%;
  animation:epicSpin .7s linear infinite;
  vertical-align:-1px;
}
@keyframes epicSpin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .combat-input-grid{grid-template-columns:1fr 1fr}
  .derived-family-grid{grid-template-columns:1fr}
  .prediction-summary{grid-template-columns:1fr}
  .epic-prediction-panel{margin:8px 7px 0;padding:8px}
}


/* ==========================================================================
   v58 — repaired Epic v2 UI layout
   ========================================================================== */

.advanced-settings-panel.always-open{
  margin:0;
}
.advanced-settings-title{
  margin:0 0 12px;
  color:#eef2f5;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.advanced-settings-panel.always-open .advanced-settings-content{
  display:grid;
  gap:14px;
  padding:0;
}

/* A derived field is truly unavailable until the override is enabled. */
.family-derived-field:disabled{
  pointer-events:none;
  cursor:not-allowed;
  opacity:.62;
  color:#8393a1;
  background:#07111a;
  border-color:#253543;
  -webkit-text-fill-color:#8393a1;
}

/* Desktop selection/prediction split. */
.selection-prediction-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(350px,400px);
  gap:14px;
  align-items:start;
  padding:0 12px 12px;
}
.selection-main-column{min-width:0}
.selection-main-column>.selection-card-grid{
  grid-template-columns:repeat(3,minmax(170px,1fr));
  padding:0;
}
.selection-main-column .selection-mercenaries{
  grid-column:span 2;
}
.prediction-side-column{
  min-width:0;
  padding-left:14px;
  border-left:1px solid #2a3d4d;
}
.prediction-side-heading{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  min-height:34px;
}
.prediction-side-heading h2{
  margin:0;
  color:#eef2f5;
  font-size:.82rem;
  text-transform:uppercase;
}
.prediction-side-column .epic-prediction-panel{
  margin:0;
}
.prediction-side-column .prediction-summary{
  grid-template-columns:1fr;
}

@media(max-width:1180px){
  .selection-prediction-grid{grid-template-columns:1fr}
  .prediction-side-column{
    border-left:0;
    border-top:1px solid #2a3d4d;
    padding:12px 0 0;
  }
  .prediction-side-column .prediction-summary{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:900px){
  .selection-main-column>.selection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .selection-main-column .selection-mercenaries{grid-column:1/-1}
}
@media(max-width:760px){
  .selection-prediction-grid{padding:0 10px 10px}
  .prediction-side-column .prediction-summary{grid-template-columns:1fr}
}
@media(max-width:520px){
  .selection-main-column>.selection-card-grid{grid-template-columns:1fr}
  .selection-main-column .selection-mercenaries{grid-column:auto}
}


/* ==========================================================================
   v59 — manual Epic optimization + compact Advanced Settings
   ========================================================================== */

.advanced-settings-panel .epic-input,
.advanced-settings-panel .percent-field .epic-input{
  font-family:inherit;
  font-size:.86rem;
  font-weight:700;
  line-height:1.15;
}
.advanced-settings-panel .percent-field>span{
  font-size:.86rem;
  line-height:1;
}

#customFamilyBonusFields[hidden]{display:none!important}

.selection-prediction-grid{display:block;padding:0}
.selection-main-column{display:block}
.prediction-side-column{display:none!important}
.selection-area .selection-card-grid{
  grid-template-columns:repeat(5,minmax(150px,1fr));
}

.selection-optimize-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.055);
}
.optimize-help{
  color:#8293a2;
  font-size:.67rem;
  line-height:1.4;
}
.optimize-army-button{
  min-width:170px;
  min-height:42px;
  background:linear-gradient(180deg,#f5ae2c,#df8f16);
  border-color:#ffc055;
  color:#091018;
  font-weight:950;
}
.optimize-army-button:hover:not(:disabled){filter:brightness(1.08)}
.optimize-army-button:disabled{opacity:.48;cursor:not-allowed}

.result-panel>.epic-prediction-panel{margin:10px 12px 4px}
.result-panel>.epic-prediction-panel .prediction-summary{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

body.optimizer-modal-open{overflow:hidden}
.optimizer-modal{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px
}
.optimizer-modal[hidden]{display:none!important}
.optimizer-modal-backdrop{
  position:absolute;inset:0;background:rgba(2,8,13,.78);backdrop-filter:blur(3px)
}
.optimizer-dialog{
  position:relative;z-index:1;width:min(620px,100%);
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;
  max-height:calc(100vh - 36px);overflow:auto;
  padding:20px;border:1px solid #40576a;border-radius:12px;
  background:linear-gradient(145deg,#152431,#0c1822);
  box-shadow:0 24px 70px rgba(0,0,0,.48)
}
.optimizer-spinner{
  width:36px;height:36px;border:4px solid rgba(240,165,26,.18);
  border-top-color:#f0a51a;border-radius:50%;animation:epicSpin .8s linear infinite
}
.optimizer-dialog-copy{min-width:0}
.optimizer-eyebrow{
  display:block;color:#f0a51a;font-size:.62rem;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase
}
.optimizer-dialog h2{margin:3px 0 5px;font-size:1.05rem;color:#f2f5f7}
.optimizer-progress-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:7px}
#optimizerProgressHeadline{margin:0;color:#c8d2da;font-size:.78rem;font-weight:750}
.optimizer-progress-heading>strong{flex:0 0 auto;color:#e8eef2;font-size:.72rem;font-variant-numeric:tabular-nums}
.optimizer-progress-track{
  position:relative;height:10px;overflow:hidden;border:1px solid #33495a;
  border-radius:999px;background:#06111a
}
.optimizer-progress-track i{
  display:block;width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#64bb73,#a2dc48);transition:width .22s ease
}
.optimizer-progress-meta{
  display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  color:#8293a2;font-size:.62rem
}
.optimizer-progress-detail{
  min-height:2.7em;margin:11px 0 13px;color:#8fa0ae;
  font-size:.67rem;line-height:1.45
}
.optimizer-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.optimizer-eld-compact{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.optimizer-eld-compact span{display:block;color:#8fa1b1;font-size:.54rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.optimizer-eld-compact strong{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-top:2px;color:#f2f5f7;font-size:.8rem}
.optimizer-eld-compact b{font:inherit}.optimizer-eld-compact i{color:#6f8493;font-style:normal}
.optimizer-health-ladder{width:calc(100% + 56px);margin:8px 0 8px -56px;padding:9px 10px 7px;border:1px solid #31485a;border-radius:9px;background:#091721}
.optimizer-health-ladder-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.optimizer-health-ladder-heading strong{color:#dce6ec;font-size:.7rem;text-transform:uppercase;letter-spacing:.025em}
#optimizerHealthLadder{display:block;width:100%;height:300px;overflow:visible;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.optimizer-chart-toolbar{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0}
.optimizer-health-legend{display:flex;justify-content:center;gap:18px;margin:0;color:#aab8c2;font-size:.55rem;font-weight:800}
.optimizer-health-legend span::before{content:"";display:inline-block;width:13px;height:2px;margin:0 5px 2px 0;background:currentColor}
.optimizer-health-legend .troop{color:#dce6ec}.optimizer-health-legend .monster{color:#64a5ff}.optimizer-health-legend .mercenary{color:#e86b59}
.optimizer-chart-style-control{margin:0;width:max-content;padding:2px}
.optimizer-chart-style-control button{min-height:22px;padding:2px 7px;font-size:.58rem}
.optimizer-cancel{min-width:90px;margin:0 0 0 -56px;justify-self:start}

@media(max-width:1100px){
  .selection-area .selection-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .selection-area .selection-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selection-optimize-row{flex-direction:column;align-items:stretch}
  .optimize-help{text-align:center}
  .optimize-army-button{width:100%;min-height:48px;font-size:.88rem}
  .result-panel>.epic-prediction-panel .prediction-summary{grid-template-columns:1fr}
  .optimizer-dialog{grid-template-columns:1fr;width:min(440px,100%);padding:18px}
  .optimizer-spinner{width:32px;height:32px}
  .optimizer-cancel{width:100%;min-height:44px;margin-left:0}
  .optimizer-health-ladder-heading{gap:6px}
  .optimizer-health-ladder{width:100%;margin-left:0}
  #optimizerHealthLadder{height:245px}
}
@media(max-width:520px){
  .selection-area .selection-card-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   v63 — Three calculator modes + mobile-compatible Epic Optimizer
   ========================================================================== */
.optimizer-only[hidden],
.separation-mode-only[hidden]{display:none!important}

.three-mode-switch{
  display:inline-flex;
  flex-wrap:wrap;
}
.three-mode-switch .mode-button{white-space:nowrap}

@media(max-width:640px){
  .three-mode-switch{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .three-mode-switch .mode-button{
    width:100%;
    min-height:44px;
    text-align:center;
  }
}


/* ==========================================================================
   v64 — shared health rules + classic/custom Battle Details
   ========================================================================== */

.beta-tag{
  display:inline-block;
  margin-left:4px;
  padding:1px 5px;
  border:1px solid rgba(240,165,26,.55);
  border-radius:999px;
  color:#f4b33a;
  font-size:.54rem;
  font-weight:900;
  line-height:1.25;
  vertical-align:1px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mode-button.active .beta-tag{
  color:#15100a;
  border-color:rgba(21,16,10,.42);
}

.health-override-row{
  width:max-content;
  max-width:100%;
  margin:10px 0 0;
  padding:0;
  border:0;
  background:transparent;
}
.health-derived-note{
  margin-top:5px;
  max-width:520px;
}

.classic-battle-details{
  margin:10px 12px 4px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.classic-battle-details[hidden]{display:none!important}
.classic-details-table{
  min-width:650px;
}

@media(max-width:640px){
  .three-mode-switch .mode-button{
    white-space:normal;
  }
  .health-override-row{
    width:100%;
  }
}

/* v65: optional Mercenary optimization */
.optimizer-merc-option{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}
.compact-option-row{width:max-content;max-width:100%;margin:0;padding:0;border:0;background:transparent}
.inline-info-help{position:relative;display:inline-block}.inline-info-help>summary{display:grid;place-items:center;width:22px;height:22px;padding:0;list-style:none;cursor:pointer;border:1px solid #496075;border-radius:50%;color:#b9c7d2;background:#0b1a26;font-size:.69rem;font-weight:900}.inline-info-help>summary::-webkit-details-marker{display:none}.inline-info-help[open]>summary{color:#10161b;background:#f0a51a;border-color:#f0a51a}
.inline-info-card{position:absolute;z-index:30;left:0;top:calc(100% + 7px);width:min(360px,calc(100vw - 38px));padding:11px 12px;border:1px solid #40576a;border-radius:9px;background:#0b1924;box-shadow:0 12px 35px rgba(0,0,0,.38);color:#aebbc6;font-size:.67rem;line-height:1.45}.inline-info-card strong{display:block;margin-bottom:5px;color:#edf2f5;font-size:.7rem}.inline-info-card p{margin:5px 0 0}
@media(max-width:640px){.inline-info-card{position:fixed;left:18px;right:18px;top:auto;bottom:18px;width:auto;max-height:45vh;overflow:auto}}


/* ==========================================================================
   v68 — unified calculator input typography
   ========================================================================== */
.epic-input,
.percent-field .epic-input,
.health-percent-field .epic-input,
.combat-input-grid .epic-input,
.derived-family-grid .epic-input,
.limit-control .epic-input{
  font-family:inherit!important;
  font-size:.86rem!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:normal!important;
}
.percent-field>span,
.health-percent-field>span,
.combat-input-grid .percent-field>span,
.derived-family-grid .percent-field>span{
  font-family:inherit!important;
  font-size:.86rem!important;
  font-weight:700!important;
  line-height:1!important;
}


/* v88 stat input image help */
.help-input-field{min-width:0}
.help-field-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:22px}
.help-field-heading label{display:block;color:#c7d0da;font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.health-grid>.help-input-field{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.health-grid>.help-input-field .health-percent-field{margin-top:5px}
.combat-input-grid>.help-input-field,.derived-family-grid .help-input-field{display:grid;gap:5px;min-width:0}
.derived-family-grid .help-input-field+.help-input-field{margin-top:8px}
.stat-help-button{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;padding:0;border:1px solid #496075;border-radius:50%;background:#0b1a26;color:#c6d2dc;font:900 .72rem/1 system-ui,sans-serif;cursor:pointer}
.stat-help-button:hover,.stat-help-button:focus-visible{background:#f0a51a;border-color:#f0a51a;color:#10161b;outline:none}
body.stat-help-modal-open{overflow:hidden}
.stat-help-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px}
.stat-help-modal[hidden]{display:none!important}
.stat-help-backdrop{position:absolute;inset:0;background:rgba(0,7,13,.78);backdrop-filter:blur(3px)}
.stat-help-dialog{position:relative;z-index:1;width:min(980px,100%);max-height:calc(100vh - 36px);overflow:auto;border:1px solid #40566a;border-radius:14px;background:#0c1822;color:#eaf0f5;box-shadow:0 24px 70px rgba(0,0,0,.48);padding:18px}
.stat-help-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px}
.stat-help-eyebrow{display:block;color:#f0a51a;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.stat-help-dialog h2{margin:3px 0 0;font-size:1.15rem;color:#f5f7f9}
.stat-help-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid #40566a;border-radius:9px;background:#111f2b;color:#dbe4eb;font-size:1.5rem;line-height:1;cursor:pointer}
.stat-help-close:hover,.stat-help-close:focus-visible{background:#f0a51a;color:#10161b;border-color:#f0a51a;outline:none}
.stat-help-text{margin:13px 0;color:#b8c5d0;font-size:.87rem;line-height:1.5}
.stat-help-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;align-items:start}
.stat-help-figure{margin:0;min-width:0;border:1px solid #31485b;border-radius:10px;overflow:hidden;background:#07121b}
.stat-help-figure img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#050b10}
.stat-help-figure figcaption{padding:9px 11px;color:#c7d2dc;font-size:.76rem;line-height:1.35;border-top:1px solid #263b4c}
@media(max-width:760px){
  .help-field-heading label{font-size:.62rem;letter-spacing:.03em}
  .stat-help-modal{padding:10px}
  .stat-help-dialog{max-height:calc(100vh - 20px);padding:13px;border-radius:11px}
  .stat-help-gallery{grid-template-columns:1fr}
  .stat-help-figure img{max-height:none}
}
.derived-family-grid .help-field-heading label{margin-top:0}

/* Epic battle calculation guide */
.calculator-reference-row{display:flex;align-items:center;margin:7px 0 10px}
.calculator-guide-link,.optimizer-guide-link,.stat-help-guide-link{border:0;background:transparent;color:#79bce6;text-decoration:underline;text-decoration-color:rgba(121,188,230,.42);text-underline-offset:3px;cursor:pointer;font:700 .78rem/1.35 inherit;padding:0}
.calculator-guide-link:hover,.calculator-guide-link:focus-visible,.optimizer-guide-link:hover,.optimizer-guide-link:focus-visible,.stat-help-guide-link:hover,.stat-help-guide-link:focus-visible{color:#f0b43c;text-decoration-color:currentColor;outline:none}
.calculator-guide-link::before{content:'i';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border:1px solid currentColor;border-radius:50%;font:900 .65rem/1 system-ui,sans-serif;text-decoration:none}
.optimizer-guide-link{display:block;margin-top:4px;font-size:.72rem}
.stat-help-guide-link{display:block;margin:15px 0 1px auto}
body.battle-guide-open{overflow:hidden}
.battle-guide-modal{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:18px}
.battle-guide-modal[hidden]{display:none!important}
.battle-guide-backdrop{position:absolute;inset:0;background:rgba(0,7,13,.82);backdrop-filter:blur(4px)}
.battle-guide-dialog{position:relative;z-index:1;width:min(1080px,100%);max-height:calc(100vh - 36px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid #405a70;border-radius:16px;background:#0b1721;color:#eaf0f5;box-shadow:0 28px 90px rgba(0,0,0,.58)}
.battle-guide-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 17px;border-bottom:1px solid #2b4051;background:linear-gradient(135deg,#142432,#0d1923)}
.battle-guide-eyebrow{display:block;color:#f0a51a;font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.battle-guide-header h2{margin:4px 0 3px;color:#f7f9fb;font-size:1.4rem;line-height:1.2}
.battle-guide-header p{margin:0;color:#aebdca;font-size:.88rem;line-height:1.45}
.battle-guide-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid #405a70;border-radius:10px;background:#10202c;color:#dce5ec;font-size:1.55rem;cursor:pointer}
.battle-guide-close:hover,.battle-guide-close:focus-visible{border-color:#f0a51a;background:#f0a51a;color:#10161b;outline:none}
.battle-guide-layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0}
.battle-guide-nav{display:flex;flex-direction:column;gap:4px;overflow:auto;padding:15px 12px;border-right:1px solid #273c4d;background:#09131c}
.battle-guide-nav button{border:1px solid transparent;border-radius:8px;background:transparent;color:#aebdca;text-align:left;font:750 .82rem/1.3 inherit;padding:10px 11px;cursor:pointer}
.battle-guide-nav button:hover,.battle-guide-nav button:focus-visible,.battle-guide-nav button[aria-current="true"]{border-color:#3a556a;background:#122332;color:#f3b43a;outline:none}
.battle-guide-content{min-width:0;overflow:auto;padding:17px 20px 25px;scroll-behavior:smooth}
.battle-guide-content details{border:1px solid #2d4558;border-radius:11px;background:#0d1c28;overflow:hidden}
.battle-guide-content details+details{margin-top:10px}
.battle-guide-content summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;color:#edf3f7;font-size:1rem;font-weight:850;cursor:pointer;list-style:none}
.battle-guide-content summary::-webkit-details-marker{display:none}
.battle-guide-content summary::after{content:'+';margin-left:auto;color:#f0a51a;font-size:1.2rem}
.battle-guide-content details[open] summary::after{content:'−'}
.battle-guide-content summary>span{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:7px;background:#e9a629;color:#101820;font-size:.76rem;font-weight:950}
.battle-guide-section-copy{padding:2px 15px 17px;border-top:1px solid rgba(124,161,187,.16);color:#c7d3dc;font-size:1rem;line-height:1.62}
.battle-guide-section-copy>p{margin:14px 0 0}
.battle-guide-section-copy strong{color:#f1f5f8}
.battle-guide-callout,.battle-guide-example{margin-top:14px;padding:13px 14px;border-left:3px solid #e6a62d;border-radius:0 8px 8px 0;background:#101f2b}
.battle-guide-callout p,.battle-guide-example p{margin:5px 0 0}
.battle-guide-example{border-left-color:#75b9e5}
.battle-guide-formula{display:grid;gap:7px;margin-top:14px;padding:13px 14px;border:1px solid #36536a;border-radius:9px;background:#07131c}
.battle-guide-formula span{color:#83bde2;font-size:.73rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.battle-guide-formula code,.battle-guide-example code{display:block;color:#f4c45e;font:700 .88rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:normal}
.battle-guide-example code{margin-top:8px}
.battle-guide-routing,.battle-guide-methods,.battle-guide-results-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
.battle-guide-routing>div,.battle-guide-methods>div,.battle-guide-results-grid>div{display:grid;gap:4px;padding:12px;border:1px solid #2e485b;border-radius:9px;background:#091722}
.battle-guide-routing span{color:#aebdca;font-size:.85rem}
.battle-guide-methods{grid-template-columns:repeat(2,minmax(0,1fr))}
.battle-guide-methods p,.battle-guide-results-grid p{margin:0;color:#b9c7d1}
.battle-guide-results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.battle-guide-flow{display:grid;gap:0;margin:15px 0 0;padding:0;counter-reset:guide-flow;list-style:none}
.battle-guide-flow li{position:relative;display:grid;grid-template-columns:33px minmax(0,1fr);gap:0 11px;padding-bottom:14px;counter-increment:guide-flow}
.battle-guide-flow li::before{content:counter(guide-flow);position:relative;z-index:1;display:grid;place-items:center;grid-row:1/3;width:31px;height:31px;border:1px solid #5682a1;border-radius:50%;background:#102534;color:#f2b43b;font-size:.76rem;font-weight:900}
.battle-guide-flow li:not(:last-child)::after{content:'';position:absolute;left:15px;top:31px;bottom:0;width:1px;background:#355064}
.battle-guide-flow li strong{align-self:end}
.battle-guide-flow li span{color:#aebdca;font-size:.88rem;line-height:1.45}
@media(max-width:760px){
  .battle-guide-modal{padding:0}
  .battle-guide-dialog{width:100%;height:100%;max-height:none;border:0;border-radius:0}
  .battle-guide-header{padding:15px}
  .battle-guide-header h2{font-size:1.2rem}
  .battle-guide-header p{display:none}
  .battle-guide-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .battle-guide-nav{flex-direction:row;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid #273c4d}
  .battle-guide-nav button{flex:0 0 auto;white-space:nowrap;padding:8px 10px}
  .battle-guide-content{padding:11px 10px 22px}
  .battle-guide-section-copy{padding:2px 12px 15px}
  .battle-guide-routing,.battle-guide-methods,.battle-guide-results-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   v89 — mobile-safe Health / Strength & Combat help layout
   ========================================================================== */
@media (max-width:760px){
  /* Never let the advanced input area establish a page-wide minimum width. */
  .advanced-settings-column,
  .advanced-settings-panel,
  .advanced-settings-content,
  .advanced-health-block,
  .advanced-combat-block,
  .health-grid,
  .combat-input-grid,
  .derived-family-grid,
  .help-input-field,
  .help-field-heading,
  .percent-field{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box;
  }

  /* A single column is much easier to read/tap on phones and prevents clipping. */
  .advanced-settings-column .health-grid,
  .advanced-settings-content .health-grid,
  .combat-input-grid,
  .derived-family-grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    gap:12px!important;
  }

  /* Keep the help control beside the label instead of pushing it to the far edge. */
  .help-field-heading{
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    width:100%;
  }
  .help-field-heading label{
    min-width:0;
    max-width:calc(100% - 40px);
    font-size:.66rem;
    letter-spacing:.035em;
    overflow-wrap:anywhere;
  }
  .stat-help-button{
    flex:0 0 30px;
    width:30px;
    height:30px;
    font-size:.78rem;
  }

  /* Inputs get the available width, while remaining comfortably sized on tablets. */
  .advanced-settings-column .health-percent-field,
  .health-grid .health-percent-field,
  .combat-input-grid .percent-field,
  .derived-family-grid .percent-field{
    width:100%!important;
    min-width:0!important;
    max-width:220px!important;
    margin-top:4px;
  }
  .advanced-settings-column .health-percent-field .epic-input,
  .combat-input-grid .epic-input,
  .derived-family-grid .epic-input{
    width:100%!important;
    min-width:0!important;
  }

  .compact-family-override{
    width:100%;
  }
  .derived-family-grid section{
    min-width:0;
  }
}

@media (max-width:420px){
  .setup-grid{padding-left:10px!important;padding-right:10px!important}
  .advanced-settings-column{width:100%;overflow:visible}
  .advanced-settings-content{width:100%}
  .help-field-heading label{font-size:.64rem}
  .stat-help-button{flex-basis:32px;width:32px;height:32px}
  .advanced-settings-column .health-percent-field,
  .combat-input-grid .percent-field,
  .derived-family-grid .percent-field{max-width:none!important}
}


/* v92 — calculator UX polish */
.mode-switch{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(100%,640px);
  gap:4px;
  padding:4px;
}
.mode-button{
  position:relative;
  min-width:0;
  padding:0 14px;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.mode-button.active{
  box-shadow:0 0 0 1px rgba(255,190,85,.38),inset 0 -2px 0 rgba(255,255,255,.22);
}
.mode-button.active::after{
  content:"Selected";
  display:block;
  margin-top:1px;
  font-size:.48rem;
  line-height:1;
  letter-spacing:.08em;
  opacity:.68;
}
.mode-description{
  max-width:850px;
  color:#a9b6c2!important;
  line-height:1.5;
}
.topdown-panel-heading h2,
.section-number{
  letter-spacing:.01em;
}
.selection-heading .toolbar-button,
.compact-reset,
.advanced-reset{
  opacity:.86;
}
.optimize-army-button{
  min-width:190px;
  min-height:46px;
  font-size:.84rem;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.optimize-help{
  max-width:440px;
}
@media (hover:hover) and (pointer:fine){
  .mode-button:not(.active):hover{background:#0a1a27;color:#d7e0e7}
  .mode-button.active:hover{filter:brightness(1.04)}
}
@media (max-width:760px){
  .mode-switch{
    width:100%;
    grid-template-columns:1fr;
    gap:3px;
  }
  .mode-button{
    min-height:44px;
    text-align:left;
    padding:6px 13px;
  }
  .mode-button.active::after{
    display:inline;
    margin-left:8px;
  }
  .mode-description{
    margin-top:9px!important;
    font-size:.78rem;
  }
  .selection-optimize-row{
    align-items:stretch;
    flex-direction:column;
    gap:9px;
  }
  .optimize-help{
    max-width:none;
  }
  .optimize-army-button{
    width:100%;
    min-height:48px;
  }
  .selection-heading{
    align-items:flex-start;
    gap:10px;
  }
}


/* v98 — explain unusual early optimizer sacrifices */
.sacrifice-flag{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:5px;padding:0;border:1px solid #d59a35;border-radius:50%;background:#24190a;color:#ffc45b;font:900 .68rem/1 system-ui,sans-serif;vertical-align:middle;cursor:pointer}
.sacrifice-flag:hover,.sacrifice-flag:focus-visible{background:#f0a51a;color:#10161b;outline:none}
body.sacrifice-help-modal-open{overflow:hidden}
.sacrifice-help-modal{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;padding:18px}
.sacrifice-help-modal[hidden]{display:none!important}
.sacrifice-help-backdrop{position:absolute;inset:0;background:rgba(0,7,13,.78);backdrop-filter:blur(3px)}
.sacrifice-help-dialog{position:relative;z-index:1;width:min(620px,100%);border:1px solid #40566a;border-radius:14px;background:#0c1822;color:#eaf0f5;box-shadow:0 24px 70px rgba(0,0,0,.48);padding:18px}
.sacrifice-help-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px}
.sacrifice-help-eyebrow{display:block;color:#f0a51a;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.sacrifice-help-dialog h2{margin:3px 0 0;font-size:1.08rem;color:#f5f7f9}
.sacrifice-help-dialog p{margin:14px 0 2px;color:#c3ced7;font-size:.88rem;line-height:1.6}
.sacrifice-help-close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid #40566a;border-radius:9px;background:#111f2b;color:#dbe4eb;font-size:1.5rem;line-height:1;cursor:pointer}
@media(max-width:760px){.sacrifice-help-modal{padding:10px}.sacrifice-help-dialog{padding:14px;border-radius:11px}.sacrifice-flag{width:24px;height:24px}}

.opening-sacrifice-note{margin:0 12px 10px;border:1px solid rgba(213,154,53,.55);border-radius:8px;background:rgba(36,25,10,.42);color:#dbe4eb}
.opening-sacrifice-note[hidden]{display:none!important}
.opening-sacrifice-note>summary{padding:8px 11px;color:#ffc45b;font-size:.76rem;font-weight:800;cursor:pointer;list-style-position:inside}
.opening-sacrifice-note>div{border-top:1px solid rgba(213,154,53,.28);padding:2px 11px 8px}
.opening-sacrifice-note p{margin:7px 0;color:#c7d2da;font-size:.76rem;line-height:1.45}
.opening-sacrifice-action{margin:2px 0 8px;padding:7px 10px;border:1px solid #d59a35;border-radius:7px;background:#172534;color:#ffd06f;font:800 .72rem/1.25 inherit;cursor:pointer}
.opening-sacrifice-action:hover,.opening-sacrifice-action:focus-visible{background:#f0a51a;color:#10161b;outline:none}

/* v111 — compact unit bonus matrix */
.bonus-matrix-heading{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bonus-matrix-heading h3{margin:0}
.bonus-matrix{overflow-x:auto;overflow-y:hidden;border:1px solid #304658;border-radius:10px;background:#0a1722}
.bonus-matrix-header,.bonus-matrix-row{display:grid;grid-template-columns:minmax(96px,1.25fr) repeat(4,minmax(68px,1fr)) 56px;gap:8px;align-items:center;padding:8px 10px}
.bonus-matrix-header{min-height:38px;background:#0d1d29;color:#91a4b4;font-size:.61rem;font-weight:900;text-transform:uppercase;letter-spacing:.035em}
.bonus-matrix-header>span:not(:first-child){display:flex;align-items:center;justify-content:center;gap:4px;text-align:center}
.bonus-matrix-header .stat-help-button{width:17px;height:17px;font-size:.58rem;flex:0 0 17px}
.bonus-matrix-row{border-top:1px solid #263a4a}
.bonus-matrix-row>strong{color:#edf2f6;font-size:.72rem;text-transform:uppercase}
.bonus-profile-name{display:flex;align-items:center;gap:6px;min-width:0}
.bonus-profile-disclosure{display:flex;align-items:center;gap:5px;min-width:0;padding:0;border:0;background:none;color:#edf2f6;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1.2;text-align:left;text-transform:uppercase;cursor:pointer}
.bonus-profile-disclosure>span{color:#f0a51a;font-size:1rem;transition:transform .15s ease}
.bonus-profile-disclosure[aria-expanded="true"]>span{transform:rotate(90deg)}
.bonus-profile-name small{padding:2px 5px;border:1px solid #a97820;border-radius:999px;background:#2b210e;color:#ffc85c;font-size:.5rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.bonus-child-row{background:#08141e}
.bonus-child-row>strong{padding-left:20px;color:#bdcad3}
.bonus-matrix-row .percent-field{min-width:0}
.bonus-matrix-row .epic-input{width:100%;min-width:0;padding:8px 20px 8px 7px;text-align:right;font-size:.76rem}
.bonus-matrix-row .percent-field>span{right:7px;font-size:.68rem}
.bonus-matrix-row .family-derived-field:disabled{opacity:.72;background:#09141e;color:#aebbc5}
.bonus-mode-base{color:#7f93a3;font-size:.62rem;font-weight:850;text-align:center;text-transform:uppercase}
.bonus-auto-toggle{display:flex;align-items:center;justify-content:center;gap:4px;color:#aab9c5;font-size:.61rem;font-weight:850;cursor:pointer}
.bonus-auto-toggle input{accent-color:var(--epic-orange)}
.section-heading-help{flex:0 0 auto}
.global-bonus-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){
  .bonus-matrix{overflow-x:auto}
  .bonus-matrix-header,.bonus-matrix-row{min-width:610px;grid-template-columns:100px repeat(4,88px) 58px}
  .global-bonus-grid{grid-template-columns:1fr}
}

/* v105 — Battle Details discoverability and optimizer ELD clarity */
.battle-details{margin-top:10px;border:1px solid #2d4355;border-radius:7px;padding:0;overflow:hidden;background:#091824}
.battle-details>summary{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;min-height:48px;padding:9px 42px 9px 12px;cursor:pointer;list-style:none;color:#eef3f6;background:#0d1d2a;transition:background-color .15s ease}
.battle-details>summary::-webkit-details-marker{display:none}
.battle-details>summary::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(90deg);color:#f0aa28;font-size:1.25rem;line-height:1;font-weight:900;transition:transform .15s ease}
.battle-details[open]>summary::after{transform:translateY(-50%) rotate(-90deg)}
.battle-details-title{font-size:.78rem;line-height:1.2;font-weight:900;text-transform:uppercase;letter-spacing:.035em}
.battle-details-subtitle{color:#91a3b2;font-size:.62rem;line-height:1.3;font-weight:650}
.battle-details>.prediction-meta,.battle-details>.prediction-table-wrap{margin-left:10px;margin-right:10px}
.battle-details>.prediction-table-wrap{margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.battle-details>summary:hover{background:#112433}}
@media(max-width:520px){.battle-details>summary{align-items:flex-start;flex-direction:column;gap:3px}.battle-details-title{font-size:.8rem}.battle-details-subtitle{font-size:.64rem}}


/* v107 — restore v105 result/progress UX and add optimizer timing */
.battle-details{
  margin-top:10px;
  border:1px solid #2d4355;
  border-radius:7px;
  padding:0;
  overflow:hidden;
  background:#091824;
}
.battle-details>summary{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px 12px;
  min-height:48px;
  padding:9px 42px 9px 12px;
  cursor:pointer;
  list-style:none;
  color:#eef3f6;
  background:#0d1d2a;
  transition:background-color .15s ease;
}
.battle-details>summary::-webkit-details-marker{display:none}
.battle-details>summary::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  color:#f0aa28;
  font-size:1.25rem;
  line-height:1;
  font-weight:900;
  transition:transform .15s ease;
}
.battle-details[open]>summary::after{transform:translateY(-50%) rotate(-90deg)}
.battle-details-title{
  font-size:.78rem;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.battle-details-subtitle{
  color:#91a3b2;
  font-size:.62rem;
  line-height:1.3;
  font-weight:650;
}
.battle-details>.prediction-meta,
.battle-details>.prediction-table-wrap{margin-left:10px;margin-right:10px}
.battle-details>.prediction-table-wrap{margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.battle-details>summary:hover{background:#112433}}

@media(max-width:520px){
  .battle-details>summary{align-items:flex-start;flex-direction:column;gap:3px}
  .battle-details-title{font-size:.8rem}
  .battle-details-subtitle{font-size:.64rem}
}


/* ==========================================================================
   v108 — viewport-safe info help, no-scroll Battle Details, fuller unit names
   ========================================================================== */

/* Keep the Mercenary optimization explanation fully inside the viewport on
   desktop and mobile. A fixed viewport popover is more reliable than an
   absolutely positioned card near the trigger when the Army Limits panel is
   close to the bottom of the visible screen. */
.inline-info-help[open]{
  z-index:1002;
}
.inline-info-card{
  position:fixed!important;
  z-index:1003!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:22px!important;
  transform:translateX(-50%);
  width:min(430px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px);
  max-height:min(62vh,480px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  box-sizing:border-box;
}
@media(max-width:640px){
  .inline-info-card{
    left:18px!important;
    right:18px!important;
    bottom:18px!important;
    transform:none;
    width:auto!important;
    max-width:none;
    max-height:60vh!important;
  }
}

/* Battle Details should use the width of the result panel rather than create
   a horizontal scrollbar. Headers may wrap; data values remain compact. */
.battle-details>.prediction-table-wrap{
  overflow-x:hidden!important;
  width:auto;
}
.prediction-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed;
}
.prediction-table th,
.prediction-table td{
  padding:6px 5px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prediction-table th{
  white-space:normal!important;
  line-height:1.18;
}
.prediction-table td{
  white-space:nowrap;
}
.prediction-table th:nth-child(1),
.prediction-table td:nth-child(1){width:31%}
.prediction-table th:nth-child(2),
.prediction-table td:nth-child(2){width:10%}
.prediction-table th:nth-child(3),
.prediction-table td:nth-child(3){width:8%}
.prediction-table th:nth-child(4),
.prediction-table td:nth-child(4){width:10%}
.prediction-table th:nth-child(5),
.prediction-table td:nth-child(5){width:21%}
.prediction-table th:nth-child(6),
.prediction-table td:nth-child(6){width:20%}

@media(max-width:700px){
  .battle-details>.prediction-meta,
  .battle-details>.prediction-table-wrap{
    margin-left:6px;
    margin-right:6px;
  }
  .prediction-table{
    font-size:.53rem;
  }
  .prediction-table th{
    font-size:.47rem;
  }
  .prediction-table th,
  .prediction-table td{
    padding:5px 3px;
  }
  .prediction-table th:nth-child(1),
  .prediction-table td:nth-child(1){width:30%}
  .prediction-table th:nth-child(2),
  .prediction-table td:nth-child(2){width:11%}
  .prediction-table th:nth-child(3),
  .prediction-table td:nth-child(3){width:9%}
  .prediction-table th:nth-child(4),
  .prediction-table td:nth-child(4){width:10%}
  .prediction-table th:nth-child(5),
  .prediction-table td:nth-child(5){width:20%}
  .prediction-table th:nth-child(6),
  .prediction-table td:nth-child(6){width:20%}
}

/* Use more of each result card for the unit name. The dotted leader yields
   space first, and longer names may use a second line instead of being cut
   down to only a few characters. */
.result-row.compact-result-row{
  align-items:center;
}
.result-row.compact-result-row .result-label{
  flex:3 1 0!important;
  min-width:0;
}
.result-row.compact-result-row .result-leader{
  flex:.45 1 12px!important;
  min-width:6px!important;
}
.result-row.compact-result-row .result-label strong{
  white-space:normal!important;
  overflow:hidden;
  text-overflow:clip;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  line-height:1.08;
}

/* Keep the existing result-tile footprint. The icon occupies a fixed middle
   slot, so it cannot overlap either the truncating name or fixed-width quantity. */
.result-row.compact-result-row .result-unit-icon{
  display:block!important;
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px;
  max-width:40px;
  align-self:center;
  object-fit:cover;
  border:1px solid color-mix(in srgb,var(--result-accent,#415467) 75%,#fff 10%)!important;
  border-radius:4px!important;
  background:#06111a;
}
@media(max-width:1180px){
  .result-row.compact-result-row .result-leader{
    flex:.2 1 6px!important;
  }
}
@media(max-width:760px){
  .result-row.compact-result-row .result-leader{
    display:none!important;
  }
  .result-row.compact-result-row .result-label{
    flex:1 1 auto!important;
  }
}


/* v109 — keep result unit names to one line */
.result-row.compact-result-row .result-label strong{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
}


/* v110 — center viewport-safe inline help instead of bottom anchoring */
.inline-info-card{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(430px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px)!important;
  max-height:min(70vh,480px)!important;
  overflow:auto!important;
}
@media(max-width:640px){
  .inline-info-card{
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    width:calc(100vw - 32px)!important;
    max-width:calc(100vw - 32px)!important;
    max-height:72vh!important;
  }
}


/* v111 — dismissible inline help */
.inline-info-card{
  padding-top:38px!important;
}
.inline-info-close{
  position:absolute;
  top:9px;
  right:10px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #41586b;
  border-radius:6px;
  background:#102231;
  color:#eef3f6;
  font-size:1rem;
  line-height:1;
  font-weight:800;
  cursor:pointer;
}
.inline-info-close:hover,
.inline-info-close:focus-visible{
  background:#173146;
  border-color:#607b91;
  outline:none;
}

/* v112 — Battle Calculator Beta */
.four-mode-switch{width:min(100%,820px);grid-template-columns:repeat(4,minmax(0,1fr))}.battle-beta-panel{margin-top:14px}.battle-config-panel{border-color:#385369}.battle-beta-badge{padding:4px 7px;border:1px solid #6a8aa2;border-radius:5px;color:#b8d1e2;font-size:.56rem;font-weight:900;letter-spacing:.07em}.battle-beta-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;padding:0 16px 16px}.battle-beta-block h3{margin:0 0 9px}.battle-choice-grid,.battle-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.battle-choice,.battle-method{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid #31495b;border-radius:7px;background:#0a1a27;cursor:pointer}.battle-choice:has(input:checked),.battle-method:has(input:checked){border-color:#c78b28;background:#122332;box-shadow:inset 0 0 0 1px rgba(199,139,40,.2)}.battle-choice input,.battle-method input{margin-top:2px}.battle-choice span,.battle-method span{display:grid;gap:2px;min-width:0}.battle-choice strong,.battle-method strong{font-size:.72rem;color:#e9eef2}.battle-choice small,.battle-method small{font-size:.6rem;color:#8fa1b1;line-height:1.3}.battle-method.disabled{opacity:.5;cursor:not-allowed}.battle-context-note{margin-top:9px!important}@media(max-width:900px){.four-mode-switch{grid-template-columns:repeat(2,minmax(0,1fr))}.battle-beta-grid{grid-template-columns:1fr}}@media(max-width:600px){.four-mode-switch{grid-template-columns:1fr}.battle-choice-grid,.battle-method-grid{grid-template-columns:1fr}}


/* ==========================================================================
   v113 — Battle Calculator compact selector UX
   ========================================================================== */
.mode-switch.four-mode-switch{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:min(100%,920px)!important;
  gap:4px!important;
}
.four-mode-switch .mode-button{
  width:100%;
  white-space:normal;
  text-align:center;
}
#arachneRow[hidden]{display:none!important}

.battle-config-heading{padding-bottom:8px!important}
.battle-config-heading p{margin-top:3px!important}
.battle-select-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:0 16px 10px;
}
.workspace-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.workspace-actions button{border:1px solid rgba(130,174,201,.35);border-radius:7px;background:#102738;color:#cfe3ee;padding:5px 8px;font:inherit;font-size:.75rem;cursor:pointer}
.workspace-actions button:disabled{opacity:.38;cursor:not-allowed}
.workspace-actions input[hidden]{display:none!important}
.workspace-dialog{width:min(520px,calc(100vw - 28px));border:1px solid rgba(116,174,207,.38);border-radius:14px;background:#0b1b28;color:#e7f1f6;padding:0;box-shadow:0 24px 80px #000b}
.workspace-dialog::backdrop{background:#02080dcc;backdrop-filter:blur(3px)}
.workspace-dialog form{display:grid;gap:16px;padding:22px}
.workspace-dialog h2{margin:0}
.workspace-dialog label{display:grid;gap:6px}
.workspace-dialog input,.workspace-dialog select{box-sizing:border-box;width:100%;border:1px solid rgba(135,177,199,.38);border-radius:8px;background:#102738;color:#fff;padding:9px}
.workspace-dialog fieldset{border:1px solid rgba(135,177,199,.25);border-radius:10px;padding:12px}
.encounter-formation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.workspace-dialog .dialog-check{display:flex;align-items:center;gap:8px;margin-top:12px}.workspace-dialog .dialog-check input{width:auto}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{border:1px solid rgba(135,177,199,.38);border-radius:8px;background:#17364a;color:#fff;padding:8px 14px;cursor:pointer}
.biff-import-intro{margin:0;color:#aebdca;line-height:1.5}
.biff-import-summary{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.biff-import-summary>div{display:grid;gap:4px;padding:10px;border:1px solid rgba(135,177,199,.25);border-radius:8px;background:#091824}
.biff-import-summary span{color:#8fa1b1;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.biff-import-summary strong{font-size:.84rem;overflow-wrap:anywhere}
.biff-import-name-field{display:grid;gap:6px}
.biff-import-name-field>span{color:#eef3f6;font-size:.69rem;font-weight:900;text-transform:uppercase;letter-spacing:.035em}
.biff-import-name-field input{box-sizing:border-box;width:100%;border:1px solid rgba(135,177,199,.38);border-radius:8px;background:#102738;color:#fff;padding:10px;font:inherit}
.biff-import-name-field input:focus{outline:2px solid rgba(239,167,39,.34);outline-offset:1px;border-color:#d0952e}
#biffImportWarnings{padding:10px 12px;border:1px solid rgba(239,167,39,.35);border-radius:8px;background:rgba(239,167,39,.06)}
#biffImportWarnings[hidden]{display:none!important}
#biffImportWarnings h3{margin:0 0 6px;font-size:.8rem}
#biffImportWarnings ul{margin:0;padding-left:18px;color:#c8d3dc;font-size:.72rem;line-height:1.45}
@media(max-width:560px){.biff-import-summary{grid-template-columns:1fr}}
@media(max-width:560px){.encounter-formation-grid{grid-template-columns:repeat(2,1fr)}}
.battle-select-field{display:grid;gap:6px;min-width:0}
.battle-select-field>span{
  color:#eef3f6;
  font-size:.69rem;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.battle-select-field select{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  border:1px solid #3a5265;
  border-radius:7px;
  padding:0 36px 0 11px;
  background:#091925;
  color:#f0f4f7;
  font:inherit;
  font-size:.78rem;
  font-weight:750;
  cursor:pointer;
}
.battle-select-field select:focus{
  outline:2px solid rgba(239,167,39,.34);
  outline-offset:1px;
  border-color:#d0952e;
}
.battle-encounter-fields{display:grid;grid-template-columns:minmax(190px,1fr) 138px;gap:8px;align-items:start}.battle-norm-input{display:grid;grid-template-columns:minmax(0,84px) 46px;gap:6px}.battle-norm-value{position:relative;display:block;min-width:0}.battle-norm-input input{box-sizing:border-box;width:100%;min-height:44px;border:1px solid #3a5265;border-radius:7px;padding:0 25px 0 11px;background:#091925;color:#f0f4f7;font:inherit;font-size:.84rem;font-weight:800;-moz-appearance:textfield}.battle-norm-input input::-webkit-inner-spin-button,.battle-norm-input input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.battle-norm-value>span{position:absolute;top:50%;left:calc(11px + var(--norm-chars,1)*.52em);pointer-events:none;transform:translateY(-50%);color:#f0aa28;font-size:.84rem;font-weight:900}.battle-norm-input select{min-width:0!important;padding:0 18px 0 7px!important;font-size:.78rem!important}.battle-norm-input input:focus{outline:2px solid rgba(239,167,39,.34);outline-offset:1px;border-color:#d0952e}.battle-norm-field>small{color:#91a3b2;font-size:.6rem;line-height:1.35}.battle-norm-field[hidden]{display:none!important}
.battle-selection-summary{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:14px;
  padding:0 16px 14px;
}
.battle-selection-summary p{
  margin:0;
  color:#91a3b2;
  font-size:.65rem;
  line-height:1.45;
}
@media(max-width:760px){
  .mode-switch.four-mode-switch{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }
  .four-mode-switch .mode-button{
    text-align:center!important;
    padding:6px 7px!important;
    font-size:.68rem;
    line-height:1.2;
  }
  .battle-select-grid,.battle-selection-summary{grid-template-columns:1fr}
  .battle-select-grid{gap:10px;padding-left:12px;padding-right:12px}
  .battle-selection-summary{gap:4px;padding-left:12px;padding-right:12px}
}
@media(max-width:420px){.battle-encounter-fields{grid-template-columns:minmax(160px,1fr) 138px}}


/* ==========================================================================
   v114 — unified Battle Calculator top layout
   ========================================================================== */

/* The heading's first column was shrink-wrapping the selector. Give it the
   available page width, then keep all four calculators in one desktop row. */
.epic-heading>div:first-child{
  width:100%;
  min-width:0;
}
.mode-switch.calculator-mode-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;
  max-width:1040px!important;
  min-width:0!important;
  gap:6px!important;
  box-sizing:border-box!important;
}
.mode-switch.calculator-mode-grid .mode-button{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:10px 8px!important;
  text-align:center!important;
  white-space:normal!important;
}

/* Battle Calculator desktop: Battle | Army Limits | Health & Combat */
.battle-mode-active .battle-top-layout{
  display:grid;
  grid-template-columns:minmax(230px,.8fr) minmax(300px,1fr) minmax(390px,1.35fr);
  gap:12px;
  align-items:stretch;
  margin-top:14px;
}
.battle-mode-active #battleBetaPanel,
.battle-mode-active .setup-panel{
  margin:0!important;
  min-width:0;
}
.battle-mode-active #battleBetaPanel{
  display:block!important;
}
.battle-mode-active #battleBetaPanel .battle-config-panel{
  height:100%;
  box-sizing:border-box;
  margin:0!important;
}

/* The existing setup shell becomes transparent to the outer 3-column grid. */
.battle-mode-active .setup-panel{
  display:contents!important;
}
.battle-mode-active .setup-panel>.topdown-panel-heading{
  display:none!important;
}
.battle-mode-active .setup-panel>.setup-grid{
  display:contents!important;
}
.battle-mode-active .setup-block,
.battle-mode-active .advanced-settings-column{
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  box-sizing:border-box;
  border:1px solid #304658;
  border-radius:8px;
  background:#111e29;
  padding:14px!important;
  overflow:visible!important;
}
.battle-mode-active .setup-block{grid-column:2}
.battle-mode-active .advanced-settings-column{grid-column:3}

/* Section headings used only by the new Battle Calculator layout. */
.battle-only-column-title{display:none}
.battle-mode-active .battle-only-column-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid #2c4151;
}
.battle-mode-active .battle-only-column-title h2{
  margin:0!important;
  font-family:inherit!important;
  font-size:.92rem!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:.015em!important;
  text-transform:uppercase;
}
.battle-mode-active .setup-block>h3{
  display:none!important;
}

/* Section 1: vertically stacked, compact controls. */
.battle-mode-active #battleBetaPanel .battle-config-heading{
  padding-bottom:8px!important;
}
.battle-mode-active #battleBetaPanel .battle-select-grid{
  grid-template-columns:1fr!important;
  gap:11px!important;
  padding:0 14px 10px!important;
}
.battle-mode-active #battleBetaPanel .battle-selection-summary{
  grid-template-columns:1fr!important;
  gap:5px!important;
  padding:0 14px 14px!important;
}

/* Section 2: Leadership, Authority, Dominance stacked vertically. */
.battle-mode-active .setup-block .limit-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
}
.battle-mode-active .setup-block .limit-row{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.battle-mode-active .setup-block .setting-note{
  margin-top:10px!important;
}
.battle-mode-active #arachneRow{
  display:none!important;
}

/* Section 3: Health & Combat uses a compact mixed grid. */
.battle-mode-active .advanced-settings-column .advanced-settings-panel{
  margin:0!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
}
.battle-mode-active .advanced-settings-column .advanced-settings-content{
  padding:0!important;
}
.battle-mode-active .advanced-settings-column .health-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
.battle-mode-active .advanced-settings-column .combat-input-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px 12px!important;
}
.battle-mode-active .advanced-settings-column .advanced-divider{
  margin:13px 0!important;
}

/* Typography consistency throughout the Battle Calculator's top sections. */
.battle-mode-active #battleBetaPanel,
.battle-mode-active .setup-block,
.battle-mode-active .advanced-settings-column,
.battle-mode-active #battleBetaPanel *,
.battle-mode-active .setup-block *,
.battle-mode-active .advanced-settings-column *{
  font-family:inherit!important;
}
.battle-mode-active .battle-select-field>span,
.battle-mode-active .field-label,
.battle-mode-active .help-field-heading label,
.battle-mode-active .limit-name{
  letter-spacing:.02em!important;
}
.battle-mode-active .battle-select-field select,
.battle-mode-active input,
.battle-mode-active button{
  font-family:inherit!important;
}

/* When another calculator is active, preserve the original page layout. */
body:not(.battle-mode-active) .battle-top-layout{
  display:block;
}

/* Tablet/mobile: return to a clear vertical 1 → 2 → 3 flow. */
@media(max-width:1100px){
  .battle-mode-active .battle-top-layout{
    display:block;
  }
  .battle-mode-active .setup-panel{
    display:block!important;
    margin-top:12px!important;
  }
  .battle-mode-active .setup-panel>.setup-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .battle-mode-active .setup-block,
  .battle-mode-active .advanced-settings-column{
    display:block!important;
    margin:0!important;
  }
}
@media(max-width:760px){
  .mode-switch.calculator-mode-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:none!important;
  }
  .battle-mode-active .advanced-settings-column .health-grid,
  .battle-mode-active .advanced-settings-column .combat-input-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:460px){
  .battle-mode-active .advanced-settings-column .health-grid,
  .battle-mode-active .advanced-settings-column .combat-input-grid{
    grid-template-columns:1fr!important;
  }
}


/* ==========================================================================
   v115 — Battle header spacing + horizontal Army Limit controls
   ========================================================================== */

/* Give the first Battle field more breathing room below the section header. */
.battle-mode-active #battleBetaPanel .battle-select-grid{
  padding-top:12px!important;
}

/* In Battle Calculator desktop view, keep each capacity's Maximum / Max Fill /
   Fill percentage on one horizontal line. */
@media(min-width:1101px){
  .battle-mode-active .setup-block .limit-row{
    display:grid!important;
    grid-template-columns:minmax(92px,1fr) auto minmax(78px,.72fr)!important;
    gap:10px!important;
    align-items:end!important;
  }

  .battle-mode-active .setup-block .limit-row>.limit-main,
  .battle-mode-active .setup-block .limit-row>.limit-fill-check,
  .battle-mode-active .setup-block .limit-row>.limit-fill-input{
    min-width:0!important;
    width:auto!important;
    margin:0!important;
  }

  .battle-mode-active .setup-block .limit-main{
    grid-column:1!important;
  }
  .battle-mode-active .setup-block .limit-fill-check{
    grid-column:2!important;
  }
  .battle-mode-active .setup-block .limit-fill-input{
    grid-column:3!important;
  }

  /* Keep checkbox control and fill value visually aligned with the Maximum input. */
  .battle-mode-active .setup-block .limit-fill-check,
  .battle-mode-active .setup-block .limit-fill-input{
    align-self:end!important;
  }

  .battle-mode-active .setup-block .limit-fill-check .checkbox-tile,
  .battle-mode-active .setup-block .limit-fill-input input{
    min-height:40px!important;
    box-sizing:border-box!important;
  }
}


/* ==========================================================================
   v116 — spacing, dynamic section sequencing, Army Limits alignment,
          and compact help-icon placement
   ========================================================================== */

/* Clear separation between the 1–3 desktop row and the next major section. */
.battle-mode-active .battle-top-layout{
  margin-bottom:18px!important;
}

/* Army Limits: the actual DOM uses a primary maximum block plus a fill block.
   Force those two children onto one row, then make Max Fill + Fill sit together. */
@media(min-width:1101px){
  .battle-mode-active .setup-block .limit-card{
    display:grid!important;
    grid-template-columns:minmax(105px,1fr) minmax(190px,1.35fr)!important;
    column-gap:12px!important;
    align-items:end!important;
  }

  .battle-mode-active .setup-block .limit-card>.limit-main{
    grid-column:1!important;
    min-width:0!important;
  }

  .battle-mode-active .setup-block .limit-card>.limit-fill-row{
    grid-column:2!important;
    display:grid!important;
    grid-template-columns:minmax(105px,1fr) minmax(70px,.62fr)!important;
    gap:10px!important;
    align-items:end!important;
    margin:0!important;
    min-width:0!important;
  }

  .battle-mode-active .setup-block .limit-fill-row>*{
    margin:0!important;
    min-width:0!important;
  }

  .battle-mode-active .setup-block .limit-main input,
  .battle-mode-active .setup-block .limit-fill-row input,
  .battle-mode-active .setup-block .limit-fill-row .checkbox-tile{
    min-height:40px!important;
    box-sizing:border-box!important;
  }
}

/* Health & Combat help icons should sit immediately beside the label instead
   of being pushed to the far side of the grid cell. */
.battle-mode-active .advanced-settings-column .help-field-heading{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:auto!important;
}

.battle-mode-active .advanced-settings-column .help-field-heading label{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}

.battle-mode-active .advanced-settings-column .field-help{
  flex:0 0 auto!important;
  margin:0!important;
  position:static!important;
}

.battle-mode-active .advanced-settings-column .help-field-heading .help-icon,
.battle-mode-active .advanced-settings-column .help-field-heading summary{
  margin-left:0!important;
}

/* Keep the label/icon group tight even when the cell has extra width. */
.battle-mode-active .advanced-settings-column .help-field{
  align-items:start!important;
}


/* ==========================================================================
   v117 — corrected bindings for v116 UX changes
   ========================================================================== */

/* Direct spacing on the next actual section, rather than relying only on the
   wrapper margin. */
.battle-mode-active .selection-area{
  margin-top:18px!important;
}

/* Actual Army Limits markup: name above, then Maximum | Max Fill | Fill on one
   horizontal control row. */
@media(min-width:1101px){
  .battle-mode-active .compact-limit-list .limit-row{
    display:grid!important;
    grid-template-columns:minmax(108px,1fr) minmax(116px,1.12fr) minmax(76px,.68fr)!important;
    grid-template-areas:
      "name name name"
      "maximum autofill fill"!important;
    column-gap:10px!important;
    row-gap:7px!important;
    align-items:end!important;
  }
  .battle-mode-active .compact-limit-list .limit-name{grid-area:name!important}
  .battle-mode-active .compact-limit-list .limit-maximum{grid-area:maximum!important}
  .battle-mode-active .compact-limit-list .auto-fill-toggle{grid-area:autofill!important}
  .battle-mode-active .compact-limit-list .limit-fill{grid-area:fill!important}

  .battle-mode-active .compact-limit-list .limit-maximum .epic-input,
  .battle-mode-active .compact-limit-list .auto-fill-toggle,
  .battle-mode-active .compact-limit-list .limit-fill .percent-field{
    height:42px!important;
    min-height:42px!important;
    box-sizing:border-box!important;
  }
  .battle-mode-active .compact-limit-list .limit-maximum .epic-input,
  .battle-mode-active .compact-limit-list .limit-fill .percent-field{
    width:100%!important;
    max-width:none!important;
  }
}

/* Actual help control class is .stat-help-button. Keep each ? immediately next
   to the label it explains. */
.battle-mode-active .advanced-settings-column .help-field-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:max-content!important;
  max-width:100%!important;
}
.battle-mode-active .advanced-settings-column .help-field-heading label{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
}
.battle-mode-active .advanced-settings-column .help-field-heading .stat-help-button{
  flex:0 0 22px!important;
  margin:0!important;
}


/* ==========================================================================
   v118 — authoritative Battle Calculator layout correction
   ========================================================================== */

@media (min-width:1101px){
  body.battle-mode-active .battle-top-layout{
    display:grid!important;
    grid-template-columns:minmax(250px,.82fr) minmax(330px,1fr) minmax(430px,1.42fr)!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    align-items:stretch!important;
    margin:14px 0 20px!important;
  }
  body.battle-mode-active #battleBetaPanel{
    display:block!important;
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  body.battle-mode-active .battle-top-layout>.setup-panel{
    display:contents!important;
  }
  body.battle-mode-active .battle-top-layout>.setup-panel>.topdown-panel-heading{
    display:none!important;
  }
  body.battle-mode-active .battle-top-layout>.setup-panel>.setup-grid{
    display:contents!important;
  }
  body.battle-mode-active .battle-top-layout .setup-block{
    display:block!important;
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:14px!important;
    box-sizing:border-box!important;
  }
  body.battle-mode-active .battle-top-layout .advanced-settings-column{
    display:block!important;
    grid-column:3!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:14px!important;
    box-sizing:border-box!important;
  }
  body.battle-mode-active .setup-block .limit-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.battle-mode-active .setup-block .limit-row{
    display:grid!important;
    grid-template-columns:minmax(105px,1fr) minmax(118px,1.18fr) minmax(76px,.72fr)!important;
    grid-template-areas:
      "name name name"
      "maximum autofill fill"!important;
    column-gap:10px!important;
    row-gap:5px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-items:end!important;
  }
  body.battle-mode-active .setup-block .limit-name{grid-area:name!important;margin:0!important}
  body.battle-mode-active .setup-block .limit-maximum{grid-area:maximum!important;width:100%!important;min-width:0!important;margin:0!important}
  body.battle-mode-active .setup-block .auto-fill-toggle{
    grid-area:autofill!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-self:end!important;
    box-sizing:border-box!important;
  }
  body.battle-mode-active .setup-block .limit-fill{grid-area:fill!important;width:100%!important;min-width:0!important;margin:0!important}
}

body.battle-mode-active .advanced-settings-column .help-field-heading{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
}
body.battle-mode-active .advanced-settings-column .help-field-heading>label{
  flex:0 1 auto!important;
  width:auto!important;
  margin:0!important;
}
body.battle-mode-active .advanced-settings-column .help-field-heading>.stat-help-button{
  position:static!important;
  flex:0 0 auto!important;
  margin:0!important;
  transform:none!important;
}

body.battle-mode-active .battle-top-layout + .battle-sequenced-section{
  margin-top:20px!important;
}

@media (max-width:1100px){
  body.battle-mode-active .battle-top-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:12px 0 18px!important;
    overflow:visible!important;
  }
  body.battle-mode-active #battleBetaPanel,
  body.battle-mode-active .battle-top-layout>.setup-panel{
    display:block!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body.battle-mode-active .battle-top-layout>.setup-panel>.topdown-panel-heading{
    display:none!important;
  }
  body.battle-mode-active .battle-top-layout>.setup-panel>.setup-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body.battle-mode-active .battle-top-layout .setup-block,
  body.battle-mode-active .battle-top-layout .advanced-settings-column{
    display:block!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body.battle-mode-active .setup-block .limit-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "name name"
      "maximum maximum"
      "autofill fill"!important;
    gap:7px 9px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.battle-mode-active .setup-block .limit-name{grid-area:name!important}
  body.battle-mode-active .setup-block .limit-maximum{grid-area:maximum!important;width:100%!important}
  body.battle-mode-active .setup-block .auto-fill-toggle{grid-area:autofill!important;width:100%!important}
  body.battle-mode-active .setup-block .limit-fill{grid-area:fill!important;width:100%!important}
}

@media (max-width:600px){
  body.battle-mode-active .advanced-settings-column .health-grid,
  body.battle-mode-active .advanced-settings-column .combat-input-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
  }
  body.battle-mode-active .advanced-settings-column .help-input-field,
  body.battle-mode-active .advanced-settings-column .percent-field{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}


/* ==========================================================================
   v119 — Battle Calculator Custom Order phase
   ========================================================================== */
body.battle-mode-active #orderView{
  margin-top:14px;
}
body.battle-mode-active #orderView[hidden]{
  display:none!important;
}
body.battle-mode-active #orderView .topdown-panel-heading p{
  max-width:760px;
}


/* ==========================================================================
   v121 — vertical Custom Die Order direction labels
   ========================================================================== */
.order-group .order-direction{
  display:block!important;
  width:100%;
  box-sizing:border-box;
}

.order-group .order-direction-top{
  padding:8px 10px 6px!important;
  text-align:left!important;
}

.order-group .order-direction-bottom{
  padding:6px 10px 9px!important;
  text-align:left!important;
}

.order-group .order-direction-top span,
.order-group .order-direction-bottom span{
  display:inline-block;
}

.order-group .order-direction-bottom{
  border-top:1px solid rgba(255,255,255,.05);
  margin-top:4px;
}

/* Empty columns still show the vertical direction clearly. */
.order-group .order-list:empty{
  min-height:82px;
}


/* ==========================================================================
   v122 — Battle Calculator Epic Optimize phase
   ========================================================================== */
body.battle-mode-active .selection-optimize-row:not([hidden]){
  margin-top:14px;
}
body.battle-mode-active .selection-optimize-row .optimize-help{
  max-width:760px;
}

/* v123 — persistent Battle Calculator workspaces */


/* ==========================================================================
   v128 — PvP CP Battle
   ========================================================================== */
.pvp-enemy-field{
  grid-column:1 / -1;
}
.battle-select-help{
  color:#8597a7;
  font-size:.61rem;
  line-height:1.35;
  font-weight:600;
}
.pvp-cp-details-panel{
  margin:12px 0 0;
}
.pvp-cp-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}
.pvp-cp-summary>div{
  display:grid;
  gap:2px;
  padding:8px 10px;
  border:1px solid #2d4355;
  border-radius:6px;
  background:#091824;
}
.pvp-cp-summary span{
  color:#8fa1b1;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:850;
}
.pvp-cp-summary strong{
  color:#eef3f6;
  font-size:.72rem;
}
.pvp-cp-table th:nth-child(1),.pvp-cp-table td:nth-child(1){width:27%}
.pvp-cp-table th:nth-child(2),.pvp-cp-table td:nth-child(2){width:12%}
.pvp-cp-table th:nth-child(3),.pvp-cp-table td:nth-child(3){width:9%}
.pvp-cp-table th:nth-child(4),.pvp-cp-table td:nth-child(4){width:17%}
.pvp-cp-table th:nth-child(5),.pvp-cp-table td:nth-child(5){width:20%}
.pvp-cp-table th:nth-child(6),.pvp-cp-table td:nth-child(6){width:15%}
@media(max-width:700px){
  .pvp-cp-summary{grid-template-columns:1fr}
  .pvp-cp-table{font-size:.5rem}
}


/* ==========================================================================
   v129 — PvP CP refinements
   ========================================================================== */

/* Some existing grid rules explicitly set display:grid. These selectors must
   win whenever a battle-dependent field is hidden. */
/* PvP keeps the Strength Against Epic grid cell in place so DD and ST do not
   shift when the Epic-only field is unavailable. */
#strengthAgainstEpicField[hidden]{
  display:grid!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#pvpEnemyUnitField[hidden],
#pvpModelField[hidden],
#pvpCpDetailsPanel[hidden]{
  display:none!important;
}

.pvp-cp-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}
.pvp-cp-metrics>div{
  display:grid;
  gap:2px;
  min-width:0;
  padding:9px 10px;
  border:1px solid #2d4355;
  border-radius:6px;
  background:#091824;
}
.pvp-cp-metrics span{
  color:#8fa1b1;
  font-size:.58rem;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:850;
}
.pvp-cp-metrics strong{
  color:#eef3f6;
  font-size:1rem;
  line-height:1.15;
}
.pvp-cp-metrics small{
  color:#7f92a2;
  font-size:.56rem;
  line-height:1.3;
}

.pvp-cp-table th:nth-child(6),
.pvp-cp-table td:nth-child(6){
  width:19%;
  white-space:normal;
}

@media(max-width:700px){
  .pvp-cp-metrics{grid-template-columns:1fr}
}


/* ==========================================================================
   v133 — shared Temple level / actual revival costs
   ========================================================================== */
.global-player-setting.temple-setting{
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #31485b;
  border-radius:8px;
  background:#101d28;
}
.temple-setting label{
  display:grid;
  gap:5px;
  min-width:180px;
}
.temple-level-select{
  min-width:180px;
}
.temple-bonus-copy{
  display:grid;
  gap:4px;
  padding-bottom:3px;
}
.temple-bonus-copy span{
  color:#8ea0af;
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
}
.temple-bonus-copy strong{
  font-size:1rem;
}
.temple-setting-note{
  margin-top:6px!important;
}
.pvp-cp-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.pvp-cp-table th:nth-child(1),.pvp-cp-table td:nth-child(1){width:23%}
.pvp-cp-table th:nth-child(2),.pvp-cp-table td:nth-child(2){width:9%}
.pvp-cp-table th:nth-child(3),.pvp-cp-table td:nth-child(3){width:8%}
.pvp-cp-table th:nth-child(4),.pvp-cp-table td:nth-child(4){width:13%}
.pvp-cp-table th:nth-child(5),.pvp-cp-table td:nth-child(5){width:14%}
.pvp-cp-table th:nth-child(6),.pvp-cp-table td:nth-child(6){width:15%}
.pvp-cp-table th:nth-child(7),.pvp-cp-table td:nth-child(7){width:18%;white-space:normal}
@media(max-width:700px){
  .pvp-cp-metrics{grid-template-columns:1fr}
  .global-player-setting.temple-setting{align-items:stretch}
  .temple-setting label,.temple-level-select{width:100%;min-width:0}
}


/* ==========================================================================
   v134 — Battle controls / translation-safe PvP wording
   ========================================================================== */
.battle-select-field>span{
  color:#fff;
  font-size:.82rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.2;
}
.battle-select-field select{
  width:100%;
  min-height:43px;
  box-sizing:border-box;
  border:1px solid #3b5063;
  border-radius:7px;
  padding:9px 34px 9px 10px;
  background:#020b13;
  color:#fff;
  font:inherit;
  font-size:inherit;
  font-weight:inherit;
}
.battle-select-field select:focus{
  outline:2px solid rgba(86,185,255,.30);
  outline-offset:0;
  border-color:var(--epic-blue);
}


/* ==========================================================================
   v135 — PvP-specific Health and Strength bonuses
   ========================================================================== */
#strengthAgainstEpicField[hidden],
#pvpHealthField[hidden],
#pvpStrengthField[hidden]{
  display:none!important;
}
.pvp-only-stat-field{min-width:0}


/* ==========================================================================
   v146 — Battle Calculator assumptions
   ========================================================================== */
.battle-calculator-notes{
  margin-top:7px;
  max-width:920px;
  color:#8fa3b5;
  font-size:.72rem;
  line-height:1.45;
}
.battle-calculator-notes p{
  margin:2px 0;
}
.battle-calculator-notes strong{
  color:#aebdca;
  font-weight:800;
}
@media(max-width:700px){
  .battle-calculator-notes{
    font-size:.70rem;
    line-height:1.42;
  }
}


/* ==========================================================================
   v149 — Battle Calculator introduction readability
   ========================================================================== */
.battle-page-description,
.battle-calculator-notes{
  width:100%;
  max-width:1120px;
}


/* ==========================================================================
   v157 — make all Battle Details disclosure bars clearly interactive
   ========================================================================== */
.battle-details>summary{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:52px;
  padding:10px 50px;
  cursor:pointer;
  list-style:none;
  text-align:center;
  color:#eef3f6;
  background:#102432;
  border-bottom:1px solid transparent;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
  user-select:none;
}
.battle-details>summary::-webkit-details-marker{display:none}

/* Matching left/right disclosure chevrons. */
.battle-details>summary::before,
.battle-details>summary::after{
  content:"›";
  position:absolute;
  top:50%;
  color:#f0aa28;
  font-size:1.28rem;
  line-height:1;
  font-weight:900;
  transform:translateY(-50%) rotate(90deg);
  transition:transform .15s ease,color .15s ease;
}
.battle-details>summary::before{left:15px}
.battle-details>summary::after{right:15px}

/* Both arrows point upward while expanded. */
.battle-details[open]>summary{
  border-bottom-color:#2d4355;
}
.battle-details[open]>summary::before,
.battle-details[open]>summary::after{
  transform:translateY(-50%) rotate(-90deg);
}

.battle-details-title{
  text-align:center;
}
.battle-details-subtitle{
  max-width:760px;
  text-align:center;
}

@media (hover:hover) and (pointer:fine){
  .battle-details>summary:hover{
    background:#163042;
    box-shadow:inset 0 0 0 1px rgba(240,170,40,.13);
  }
  .battle-details>summary:hover::before,
  .battle-details>summary:hover::after{
    color:#ffc24f;
  }
}
.battle-details>summary:focus-visible{
  outline:2px solid #f0aa28;
  outline-offset:-2px;
  background:#163042;
}

@media(max-width:520px){
  .battle-details>summary{
    align-items:center;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    min-height:54px;
    padding:9px 40px;
    text-align:center;
  }
  .battle-details>summary::before{left:11px}
  .battle-details>summary::after{right:11px}
  .battle-details-title{font-size:.78rem}
  .battle-details-subtitle{
    font-size:.61rem;
    line-height:1.3;
  }
}


/* ==========================================================================
   v158 — match PvP Battle Details spacing to Epic results
   ========================================================================== */
.pvp-cp-details-panel{
  margin-bottom:10px;
}

/* v161 nested Custom Die Order */
.order-tier-card{display:grid}
.order-item{grid-template-columns:30px 30px minmax(0,1fr) 34px 34px}
.order-expand{width:28px;height:28px;border:0;background:transparent;color:#f0aa28;font-size:1.05rem;font-weight:900;cursor:pointer}
.unit-order-list{display:grid;gap:5px;margin:0 8px 7px 28px;padding:7px;border:1px solid rgba(255,255,255,.08);border-top:0;border-radius:0 0 7px 7px;background:#06141f}
.unit-order-list[hidden]{display:none!important}
.unit-order-item{display:grid;grid-template-columns:25px minmax(0,1fr) 30px 30px;gap:5px;align-items:center;min-height:40px;padding:5px 6px;border:1px solid #2c4050;border-radius:6px;background:#0a1b27;user-select:none}
.unit-order-item.dragging{opacity:.6}
.unit-drag-handle{color:#718797;cursor:grab;text-align:center}
.unit-order-copy strong{display:block;color:#e7edf1;font-size:.7rem}.unit-order-copy span{display:block;color:#8294a3;font-size:.56rem;margin-top:2px}
.unit-order-move{width:28px;height:28px;border:1px solid #344b5d;border-radius:5px;background:#07131d;color:#dbe3ea;cursor:pointer;font-weight:900}

/* v163 — internal Custom Order tiles inherit their tier color */
.unit-order-item{
  background:
    linear-gradient(90deg,
      var(--unit-order-row-color,#0a1b27) 0%,
      var(--unit-order-row-color,#0a1b27) 70%,
      #081b29 100%);
  box-shadow:inset 3px 0 0 var(--unit-order-accent,#415467);
  border-color:var(--unit-order-accent,#2c4050);
}

/* v169 minimum separation + compact live damage feedback */
.minimum-separation-toggle{display:flex;align-items:flex-start;gap:9px;margin:10px 0 8px;padding:8px 10px;border:1px solid #31485a;border-radius:7px;background:#071824;cursor:pointer}
.minimum-separation-toggle input{margin-top:2px}.minimum-separation-toggle span{display:grid;gap:2px}.minimum-separation-toggle strong{font-size:.72rem;color:#e8edf2}.minimum-separation-toggle small{font-size:.59rem;line-height:1.35;color:#8294a3}
#fixedSeparationControl[hidden]{display:none!important}
.live-damage-slot{display:flex;align-items:baseline;gap:6px;min-height:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.live-damage-label{font-size:.56rem;font-weight:900;letter-spacing:.08em;color:#8193a2}.live-damage-slot strong{font-size:.82rem;color:#eef3f6}
.live-damage-change{font-size:.60rem;font-weight:900}.live-damage-change.up{color:#55d982}.live-damage-change.down{color:#ff6b6b}.live-damage-change.neutral{color:#8495a4}
.selection-heading-actions{display:flex;align-items:center;gap:12px}.live-damage-order{justify-content:flex-end;padding:0 12px 7px}
.review-selection-button{border-color:#d79b2c;color:#ffd276;background:#17212a}.review-selection-button:hover:not(:disabled){border-color:#ffbd45;background:#242b2f}.review-selection-button:disabled{opacity:.48;cursor:not-allowed}
.review-progress-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:18px}.review-progress-modal[hidden]{display:none!important}.review-progress-backdrop{position:absolute;inset:0;background:rgba(2,8,13,.78);backdrop-filter:blur(3px)}.review-progress-dialog{position:relative;z-index:1;width:min(520px,100%);display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:20px;border:1px solid #40576a;border-radius:12px;background:linear-gradient(145deg,#152431,#0c1822);box-shadow:0 24px 70px rgba(0,0,0,.48)}.review-progress-dialog h2{margin:3px 0 5px;font-size:1.05rem}.review-progress-dialog p{color:#aebdca;line-height:1.45}.review-progress-note{font-size:.7rem}.review-proposal-dialog{width:min(680px,calc(100% - 24px))}.review-proposal-dialog form{display:grid;gap:14px}.review-proposal-dialog h2,.review-proposal-dialog p{margin:0}.review-proposal-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.review-proposal-metrics>div{display:grid;gap:4px;padding:10px;border:1px solid rgba(135,177,199,.25);border-radius:8px;background:#091824}.review-proposal-metrics span{color:#8fa1b1;font-size:.62rem;font-weight:800;line-height:1.35;text-transform:uppercase}.review-method-note{padding:9px 10px;border-left:3px solid #d99c29;background:#0a1722;color:#b9c7d1;font-size:.74rem;line-height:1.45}.review-change-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.review-change-grid section{padding:10px;border:1px solid rgba(135,177,199,.25);border-radius:8px;background:#091824}.review-change-grid h3{margin:0 0 6px;font-size:.75rem;text-transform:uppercase}.review-change-grid ul{margin:0;padding-left:18px;color:#c9d5de;font-size:.76rem;line-height:1.5}.review-mercenary-note{color:#aebdca;font-size:.74rem}
body.review-progress-open{overflow:hidden}
@media(max-width:620px){.review-progress-dialog{grid-template-columns:1fr}.review-proposal-metrics,.review-change-grid{grid-template-columns:1fr}.selection-heading-actions{flex-wrap:wrap;justify-content:flex-end}.review-selection-button{order:-1}}
@media(max-width:620px){.live-damage-slot{gap:4px}.live-damage-slot strong{font-size:.75rem}.live-damage-change{font-size:.56rem}.selection-heading-actions{gap:7px}}

/* v170 — compact live metric placement beside section titles */
.section-heading-copy{display:block!important;min-width:0}
.section-title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-heading-copy>p{margin:5px 0 0!important;padding-left:34px!important;color:#9fb0c0;font-size:12px}
.battle-only-column-title .live-damage-slot{margin-left:2px}
.selection-heading .section-heading-copy{flex:1 1 auto}
.selection-heading-actions{margin-left:auto}
.live-damage-slot{justify-content:flex-start!important}
.live-damage-order{padding:0!important}
@media(max-width:700px){
  .section-heading-copy>p{padding-left:0!important}
  .section-title-line{gap:7px}
}

/* v175 — Custom Order V2 flat cross-tier squad ladder */
.custom-order-v2-heading .section-title-line{align-items:center}
.custom-order-reset{margin-left:8px;min-height:30px;padding:0 10px;font-size:.58rem}
.custom-order-sticky-metric{position:sticky;top:66px;z-index:18;display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:7px 12px;border:1px solid #334a5d;border-radius:7px;background:rgba(7,20,30,.96);box-shadow:0 5px 14px rgba(0,0,0,.2);backdrop-filter:blur(5px)}
.custom-order-sticky-metric>span{font-size:.57rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8295a5}
.custom-order-v2-columns .order-list{gap:6px}
.squad-order-item{display:grid;grid-template-columns:28px 42px 25px minmax(125px,1fr) minmax(120px,auto) 32px 32px;gap:6px;align-items:center;min-height:54px;padding:5px 7px;border:1px solid #344a5d;border-radius:7px;background:linear-gradient(90deg,var(--order-row-color,#10202c) 0%,var(--order-row-color,#10202c) 56%,#081b29 100%);box-shadow:inset 4px 0 0 var(--order-accent,#415467);user-select:none;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease}
.squad-order-item.dragging{opacity:.65;transform:scale(1.01);box-shadow:inset 4px 0 0 var(--order-accent,#415467),0 8px 20px rgba(0,0,0,.28)}
.squad-order-rank{font-size:.73rem;font-weight:950;text-align:center;color:#f4b632;font-variant-numeric:tabular-nums}
.squad-order-icon-wrap{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:6px;overflow:hidden;background:#07131d;display:grid;place-items:center}
.squad-order-icon{width:100%;height:100%;object-fit:cover}
.squad-order-drag{font-size:1rem;color:#8ca0b0;cursor:grab;text-align:center}.squad-order-item.dragging .squad-order-drag{cursor:grabbing}
.squad-order-copy{min-width:0}.squad-order-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:.72rem}.squad-order-copy span{display:block;margin-top:2px;color:#a5b4c0;font-size:.57rem;text-transform:uppercase}
.squad-order-bonus{justify-self:end;color:#cbd6de;font-size:.57rem;font-weight:900;white-space:nowrap;text-transform:uppercase}
.squad-order-move{width:30px;height:32px;border:1px solid #3d5365;border-radius:6px;background:#06121d;color:#dbe3ea;cursor:pointer;font-weight:950}
.order-list.drag-active{outline:1px dashed rgba(244,182,50,.35);outline-offset:3px;border-radius:7px}
@media(max-width:1100px){.squad-order-item{grid-template-columns:26px 38px 22px minmax(105px,1fr) 32px 32px}.squad-order-icon-wrap{width:36px;height:36px}.squad-order-bonus{grid-column:4/5;justify-self:start;margin-top:-3px}.squad-order-copy{align-self:end}}
@media(max-width:900px){.custom-order-sticky-metric{top:58px}.squad-order-item{grid-template-columns:28px 42px 25px minmax(0,1fr) 34px 34px}.squad-order-bonus{grid-column:4/5;justify-self:start}.custom-order-reset{margin-left:0}}
@media(max-width:520px){.squad-order-item{grid-template-columns:24px 38px 20px minmax(0,1fr) 32px 32px;padding:5px}.squad-order-icon-wrap{width:36px;height:36px}.squad-order-copy strong{font-size:.68rem}.squad-order-bonus{font-size:.53rem}.custom-order-sticky-metric{top:52px}}

/* v176 — Custom Order V2 density, drag/rank feedback, and sticky live result */
#orderView{overflow:visible}
#orderView>.topdown-panel-heading{border-radius:14px 14px 0 0}
.custom-order-sticky-metric{
  position:sticky!important;
  top:64px!important;
  z-index:60!important;
  margin:0 14px 10px!important;
  box-shadow:0 6px 18px rgba(0,0,0,.34)!important;
}
.custom-order-v2-columns{min-width:0}
.custom-order-v2-columns .order-group{min-width:0}
.custom-order-v2-columns .order-list{min-width:0;overflow:hidden;gap:4px}
.squad-order-item{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  grid-template-columns:18px 22px 34px minmax(0,1fr) minmax(88px,auto) 28px 28px;
  gap:5px;
  min-height:44px;
  padding:3px 5px;
  overflow:hidden;
}
.squad-order-drag{grid-column:1;font-size:.88rem}
.squad-order-rank{grid-column:2;font-size:.67rem}
.squad-order-icon-wrap{grid-column:3;width:32px;height:32px;border-radius:5px}
.squad-order-copy{grid-column:4;overflow:hidden}
.squad-order-copy strong{font-size:.68rem}
.squad-order-copy span{font-size:.53rem;margin-top:1px}
.squad-order-bonus{grid-column:5;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.52rem}
.squad-order-move{width:27px;height:28px;padding:0}
@media(max-width:1250px){
 .squad-order-item{grid-template-columns:17px 21px 32px minmax(0,1fr) 28px 28px}
 .squad-order-icon-wrap{width:30px;height:30px}
 .squad-order-bonus{grid-column:4/5;grid-row:2;justify-self:start;margin-top:-3px}
}
@media(max-width:900px){
 #orderView{overflow:visible}
 .custom-order-sticky-metric{top:56px!important;margin:0 10px 8px!important}
 .squad-order-item{grid-template-columns:18px 22px 34px minmax(0,1fr) 30px 30px;min-height:44px}
 .squad-order-icon-wrap{width:32px;height:32px}
}

/* v177 — Custom Order V2 compact whole-tile dragging */
html,body{overflow-x:hidden}
#orderView{
  overflow:visible!important;
  contain:none!important;
  transform:none!important;
}
#orderView .order-columns,
#orderView .order-group,
#orderView .order-list{
  min-width:0!important;
  overflow:visible!important;
}
.custom-order-sticky-metric{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:8px!important;
  z-index:100!important;
  margin:0 14px 10px!important;
  background:#0b1823!important;
  box-shadow:0 5px 18px rgba(0,0,0,.42)!important;
}
.custom-order-v2-columns .order-list{gap:3px!important;padding:6px!important}

.squad-order-item{
  display:grid!important;
  grid-template-areas:"icon copy bonus up down"!important;
  grid-template-columns:30px minmax(0,1fr) minmax(72px,92px) 26px 26px!important;
  column-gap:5px!important;
  row-gap:0!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  height:auto!important;
  box-sizing:border-box!important;
  padding:3px 4px!important;
  overflow:hidden!important;
  cursor:grab!important;
}
.squad-order-item.dragging{cursor:grabbing!important}
.squad-order-drag,.squad-order-rank{display:none!important}
.squad-order-icon-wrap{
  grid-area:icon!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:5px!important;
  margin:0!important;
}
.squad-order-copy{
  grid-area:copy!important;
  min-width:0!important;
  overflow:hidden!important;
  padding-left:1px!important;
}
.squad-order-copy strong{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:.65rem!important;
  line-height:1.08!important;
}
.squad-order-copy span{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  margin-top:1px!important;
  font-size:.50rem!important;
  line-height:1.05!important;
}
.squad-order-bonus{
  grid-area:bonus!important;
  min-width:0!important;
  max-width:92px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  justify-self:end!important;
  margin:0!important;
  font-size:.48rem!important;
  line-height:1.05!important;
}
.squad-order-move{
  width:25px!important;
  height:27px!important;
  min-width:25px!important;
  padding:0!important;
  cursor:pointer!important;
}
.squad-order-move:nth-of-type(1){grid-area:up!important}
.squad-order-move:nth-of-type(2){grid-area:down!important}

@media(max-width:1200px){
  .squad-order-item{
    grid-template-areas:
      "icon copy up down"
      "icon bonus up down"!important;
    grid-template-columns:28px minmax(0,1fr) 25px 25px!important;
    min-height:40px!important;
  }
  .squad-order-icon-wrap{width:26px!important;height:26px!important;min-width:26px!important}
  .squad-order-bonus{
    justify-self:start!important;
    max-width:100%!important;
    font-size:.47rem!important;
  }
}
@media(max-width:900px){
  .custom-order-sticky-metric{
    top:6px!important;
    margin:0 10px 8px!important;
  }
  .squad-order-item{
    grid-template-areas:"icon copy bonus up down"!important;
    grid-template-columns:30px minmax(0,1fr) minmax(76px,110px) 28px 28px!important;
    min-height:39px!important;
  }
  .squad-order-icon-wrap{width:28px!important;height:28px!important;min-width:28px!important}
}
@media(max-width:520px){
  .squad-order-item{
    grid-template-areas:
      "icon copy up down"
      "icon bonus up down"!important;
    grid-template-columns:28px minmax(0,1fr) 27px 27px!important;
    padding:3px!important;
    min-height:40px!important;
  }
  .squad-order-copy strong{font-size:.64rem!important}
  .squad-order-bonus{justify-self:start!important;max-width:100%!important}
}

/* v178 — readability + reliable floating Custom Order live result */
.custom-order-sticky-metric{display:none!important}

.custom-order-floating-metric{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:260px;
  max-width:min(520px,calc(100vw - 24px));
  padding:7px 12px;
  border:1px solid #405a70;
  border-radius:8px;
  background:rgba(7,20,30,.97);
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  backdrop-filter:blur(6px);
  pointer-events:none;
}
.custom-order-floating-metric[hidden]{display:none!important}
.custom-order-floating-metric>span{
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9fb2c2;
}
.custom-order-floating-metric .live-damage-slot{
  min-height:0;
  gap:6px;
}
.custom-order-floating-metric .live-damage-label{font-size:.58rem}
.custom-order-floating-metric .live-damage-slot strong{font-size:.82rem}
.custom-order-floating-metric .live-damage-change{font-size:.60rem}

.custom-order-v2-columns .order-list{
  gap:4px!important;
  padding:7px!important;
  overflow:hidden!important;
}
.squad-order-item{
  grid-template-areas:"icon copy bonus up down"!important;
  grid-template-columns:36px minmax(0,1fr) 126px 29px 29px!important;
  column-gap:6px!important;
  min-height:44px!important;
  padding:4px 5px!important;
}
.squad-order-icon-wrap{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
}
.squad-order-copy strong{
  font-size:.72rem!important;
  line-height:1.12!important;
}
.squad-order-copy span{
  margin-top:2px!important;
  font-size:.56rem!important;
  line-height:1.08!important;
  color:#eef3f6!important;
  opacity:.92!important;
}
.squad-order-bonus{
  width:126px!important;
  max-width:126px!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  font-size:.52rem!important;
  text-align:right!important;
  justify-self:end!important;
}
.squad-order-move{
  width:28px!important;
  height:30px!important;
  min-width:28px!important;
}

@media(max-width:1250px){
  .squad-order-item{
    grid-template-areas:
      "icon copy up down"
      "icon bonus up down"!important;
    grid-template-columns:34px minmax(0,1fr) 28px 28px!important;
    min-height:46px!important;
  }
  .squad-order-icon-wrap{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
  .squad-order-bonus{
    width:auto!important;
    max-width:100%!important;
    justify-self:start!important;
    text-align:left!important;
    font-size:.51rem!important;
  }
}

@media(max-width:900px){
  .custom-order-floating-metric{
    top:8px;
    min-width:230px;
    padding:6px 10px;
  }
  .squad-order-item{
    grid-template-areas:"icon copy bonus up down"!important;
    grid-template-columns:36px minmax(0,1fr) 116px 30px 30px!important;
    min-height:45px!important;
  }
  .squad-order-icon-wrap{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  .squad-order-copy strong{font-size:.72rem!important}
  .squad-order-copy span{font-size:.56rem!important}
  .squad-order-bonus{
    width:116px!important;
    max-width:116px!important;
    justify-self:end!important;
    text-align:right!important;
  }
}

@media(max-width:620px){
  .custom-order-floating-metric{
    top:6px;
    min-width:0;
    width:auto;
    max-width:calc(100vw - 16px);
  }
  .squad-order-item{
    grid-template-areas:
      "icon copy up down"
      "icon bonus up down"!important;
    grid-template-columns:34px minmax(0,1fr) 29px 29px!important;
    min-height:47px!important;
  }
  .squad-order-icon-wrap{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
  .squad-order-bonus{
    width:auto!important;
    max-width:100%!important;
    justify-self:start!important;
    text-align:left!important;
    font-size:.51rem!important;
  }
}

/* v179 — final Custom Order tile readability */
.squad-order-bonus{
  font-size:.58rem!important;
  font-weight:900!important;
  letter-spacing:.005em;
}
@media(max-width:1250px){
  .squad-order-bonus{font-size:.56rem!important}
}
@media(max-width:900px){
  .squad-order-bonus{font-size:.57rem!important}
}
@media(max-width:620px){
  .squad-order-bonus{font-size:.55rem!important}
}


/* ==========================================================================
   v193 — Battle Calculator UX refinement
   ========================================================================== */
.battle-mode-active .epic-heading{
  margin-bottom:16px;
}
.battle-mode-active .epic-heading h1{
  font-size:clamp(2.25rem,4.5vw,3.55rem);
  letter-spacing:.005em;
}
.battle-page-description{
  margin-top:5px!important;
  color:#b5c2ce!important;
  font-size:.96rem;
}
.battle-calculator-notes{
  width:min(100%,780px);
  margin-top:10px;
  border:1px solid #26394a;
  border-radius:8px;
  background:#08131e;
  color:#9cafbf;
  font-size:.78rem;
}
.battle-calculator-notes>summary{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 38px 0 12px;
  position:relative;
  list-style:none;
  cursor:pointer;
  color:#d9e2e9;
  font-weight:800;
}
.battle-calculator-notes>summary::-webkit-details-marker{display:none}
.battle-calculator-notes>summary::after{
  content:'›';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  color:#efa727;
  font-size:1.25rem;
  transition:transform .15s ease;
}
.battle-calculator-notes[open]>summary::after{
  transform:translateY(-50%) rotate(-90deg);
}
.battle-calculator-note-content{
  padding:4px 12px 11px;
  border-top:1px solid #203242;
}
.battle-calculator-note-content p{
  margin:7px 0;
  line-height:1.5;
}

/* Functional text should be readable before it is decorative. */
.battle-mode-active .battle-select-field>span,
.battle-mode-active .field-label,
.battle-mode-active .help-field-heading label{
  color:#c8d3dc;
  font-size:.75rem;
  line-height:1.25;
  letter-spacing:.015em;
  text-transform:none;
}
.battle-mode-active .setting-note,
.battle-mode-active .battle-selection-summary p,
.battle-mode-active .topdown-panel-heading p{
  font-size:.76rem;
  line-height:1.5;
}
.battle-mode-active .topdown-panel{
  border-color:#31475a;
  background:#101c27;
}
.battle-mode-active .topdown-panel-heading{
  background:#0b1620;
}
.battle-mode-active .battle-select-field select,
.battle-mode-active .epic-input{
  background:#06121c;
  border-color:#40576a;
}
.battle-mode-active .workspace-actions button{
  min-height:32px;
  padding:0 10px;
  font-size:.75rem;
}

.selection-card-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  margin:-5px 0;
  padding:5px 0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:default;
}
.selection-card-toggle>span:first-child{min-width:0}
.selection-card-name{
  display:block;
  color:#f0f4f7;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.selection-card-toggle>span:first-child>span:last-child{
  display:block;
  margin-top:3px;
  color:#91a3b2;
  font-size:.69rem;
}
.selection-card-chevron{display:none}

.battle-mode-active :is(input,select,button,summary):focus-visible,
.battle-mode-active .hierarchy-unit:focus-within{
  outline:2px solid #f0a51a;
  outline-offset:2px;
}
.battle-mode-active .epic-input:focus,
.battle-mode-active .battle-select-field select:focus{
  outline:2px solid rgba(240,165,26,.72);
  outline-offset:2px;
  border-color:#f0a51a;
}

/* Keep the long optimization workflow's status and primary action in reach. */
.battle-mode-active .selection-optimize-row{
  position:sticky;
  bottom:10px;
  z-index:12;
  margin:0 12px 12px;
  border:1px solid #44586a;
  border-radius:10px;
  background:rgba(9,20,30,.96);
  box-shadow:0 10px 28px rgba(0,0,0,.38);
  backdrop-filter:blur(8px);
}
.battle-mode-active .optimize-army-button{
  min-height:46px;
}

@media(max-width:600px){
  .battle-mode-active .epic-shell{padding-top:14px}
  .battle-mode-active .epic-heading{margin-bottom:12px}
  .battle-mode-active .epic-heading h1{
    font-size:2rem;
    line-height:1.08;
  }
  .battle-page-description{
    font-size:.88rem;
    line-height:1.45!important;
  }
  .battle-calculator-notes{
    font-size:.76rem;
  }
  .battle-mode-active .workspace-actions{
    gap:7px;
  }
  .battle-mode-active .workspace-actions button,
  .battle-mode-active .toolbar-button,
  .battle-mode-active .advanced-reset,
  .battle-mode-active #resetCalculator{
    min-height:40px;
    padding:0 12px;
    font-size:.78rem;
  }
  .selection-card-title{
    min-height:48px;
  }
  .selection-card-toggle{
    min-height:40px;
    cursor:pointer;
  }
  .selection-card-chevron{
    display:inline-block;
    flex:0 0 auto;
    color:#efa727;
    font-size:1rem;
    transition:transform .15s ease;
  }
  .selection-card.is-collapsed .selection-card-chevron{transform:rotate(180deg)}
  .selection-card.is-collapsed .hierarchy-list{display:none}
  .category-master{
    min-height:40px;
    padding-left:8px;
  }
  .battle-mode-active .selection-optimize-row{
    bottom:8px;
    margin:0 8px 8px;
    padding:9px;
    gap:8px;
  }
  .battle-mode-active .selection-optimize-row .optimize-help{
    font-size:.72rem;
    line-height:1.35;
  }
  .battle-mode-active .optimize-army-button{
    min-height:48px;
  }
}


/* v194 — compact Army Limit switches and aligned top-panel headings */
.battle-mode-active .battle-only-column-title{
  min-height:48px;
  box-sizing:border-box;
  margin:-14px -14px 12px!important;
  padding:12px 14px!important;
  border-bottom:1px solid #263849;
  background:#0b1620;
}
.battle-mode-active .battle-only-column-title h2{
  font-size:17px!important;
  letter-spacing:.035em!important;
}

body.battle-mode-active .compact-limit-list .limit-row{
  grid-template-columns:minmax(0,1fr) minmax(74px,88px)!important;
  grid-template-areas:
    "name autofill"
    "maximum fill"!important;
  gap:7px 10px!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden;
}
body.battle-mode-active .compact-limit-list .limit-name{
  grid-area:name!important;
  align-self:center!important;
}
body.battle-mode-active .compact-limit-list .limit-maximum{
  grid-area:maximum!important;
  width:100%!important;
  min-width:0!important;
}
body.battle-mode-active .compact-limit-list .limit-fill{
  grid-area:fill!important;
  width:100%!important;
  min-width:0!important;
}
body.battle-mode-active .compact-limit-list .limit-maximum .epic-input,
body.battle-mode-active .compact-limit-list .limit-fill .percent-field,
body.battle-mode-active .compact-limit-list .limit-fill .epic-input{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle{
  grid-area:autofill!important;
  justify-self:end!important;
  align-self:center!important;
  width:auto!important;
  min-width:0!important;
  height:26px!important;
  min-height:26px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle span{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding-left:35px;
  color:#aebdca;
  font-size:.65rem;
  letter-spacing:.02em;
  text-transform:none;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle span::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:29px;
  height:17px;
  border:1px solid #536779;
  border-radius:999px;
  background:#152431;
  transform:translateY(-50%);
  transition:border-color .15s ease,background .15s ease;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle span::after{
  content:'';
  position:absolute;
  left:3px;
  top:50%;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#a9b5bf;
  transform:translateY(-50%);
  transition:left .15s ease,background .15s ease;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle input:checked+span::before{
  border-color:#e9a020;
  background:#8f5d0c;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle input:checked+span::after{
  left:15px;
  background:#fff4d6;
}
body.battle-mode-active .compact-limit-list .auto-fill-toggle input:focus-visible+span{
  outline:2px solid #f0a51a;
  outline-offset:2px;
  border-radius:4px;
}

@media(max-width:600px){
  body.battle-mode-active .compact-limit-list .limit-row{
    grid-template-columns:minmax(0,1fr) minmax(82px,96px)!important;
  }
  body.battle-mode-active .compact-limit-list .auto-fill-toggle{
    min-height:36px!important;
  }
  body.battle-mode-active .compact-limit-list .auto-fill-toggle span{
    min-height:36px;
  }
}

/* v195 — associate Max Fill directly with its capacity title */
body.battle-mode-active .compact-limit-list .limit-row{
  grid-template-columns:minmax(0,1fr) minmax(74px,88px)!important;
  grid-template-areas:
    "title title"
    "maximum fill"!important;
}
body.battle-mode-active .compact-limit-list .limit-title-row{
  grid-area:title;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
body.battle-mode-active .compact-limit-list .limit-name{
  flex:0 1 auto;
}
body.battle-mode-active .compact-limit-list .limit-title-row .auto-fill-toggle{
  flex:0 0 auto;
  justify-self:auto!important;
}

/* v197 — preserve readable bonus values before the calculator reaches mobile layout */
@media (min-width:1101px) and (max-width:1320px){
  body.battle-mode-active .battle-top-layout{
    grid-template-columns:minmax(260px,.8fr) minmax(440px,1.2fr)!important;
  }
  body.battle-mode-active #battleBetaPanel{grid-column:1!important;grid-row:1!important}
  body.battle-mode-active .battle-top-layout .setup-block{grid-column:2!important;grid-row:1!important}
  body.battle-mode-active .battle-top-layout .advanced-settings-column{grid-column:1/-1!important;grid-row:2!important}
}

/* v198 — keep the encounter readable beside a compact, fully visible norm. */
.battle-encounter-fields{grid-template-columns:185px 224px;gap:10px;justify-content:start}
.battle-norm-input{grid-template-columns:minmax(0,72px) 58px 82px;gap:6px}
.battle-norm-basis{display:flex;min-width:0;min-height:44px;align-items:center;gap:6px;color:#d8e0e6;font-size:.68rem;font-weight:850;cursor:pointer}.battle-norm-basis .epic-basis-switch{position:relative;display:inline-flex;flex:0 0 auto;width:38px;height:22px}.battle-norm-basis .epic-basis-switch input{position:absolute;width:1px!important;height:1px!important;opacity:0}.battle-norm-basis .epic-basis-switch i{width:38px;height:22px;border:1px solid #496074;border-radius:999px;background:#263746;cursor:pointer;transition:.15s}.battle-norm-basis .epic-basis-switch i:after{content:'';display:block;width:16px;height:16px;margin:2px;border-radius:50%;background:#aab6c0;transition:.15s}.battle-norm-basis .epic-basis-switch input:checked+i{border-color:#e3a62a;background:#9b6e18}.battle-norm-basis .epic-basis-switch input:checked+i:after{transform:translateX(16px);background:#fff}.battle-norm-basis .epic-basis-switch input:focus-visible+i{outline:2px solid rgba(240,165,26,.45);outline-offset:2px}.battle-norm-input.is-chests{grid-template-columns:minmax(0,72px) 82px}.battle-norm-input.is-chests .battle-norm-value>span,.battle-norm-input.is-chests #encounterPlanUnit{display:none}.battle-encounter-fields>.battle-select-field:first-child .workspace-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex-wrap:nowrap}.battle-encounter-fields>.battle-select-field:first-child .workspace-actions button{min-width:0;padding-left:4px;padding-right:4px;font-size:.68rem}
@media(min-width:1321px){body.battle-mode-active .battle-top-layout{grid-template-columns:440px 360px minmax(430px,1fr)!important}}
@media(min-width:1101px) and (max-width:1320px){body.battle-mode-active .battle-top-layout{grid-template-columns:440px minmax(320px,1fr)!important}}
@media(max-width:520px){.battle-encounter-fields{grid-template-columns:1fr}.battle-encounter-fields>.battle-select-field:first-child{max-width:185px}.battle-norm-field{max-width:224px}}

/* Fit the complete encounter and norm row inside the fixed 440px Battle card. */
.battle-encounter-fields{grid-template-columns:180px 222px}
.battle-norm-input{grid-template-columns:minmax(0,72px) 56px 82px}
.battle-norm-input.is-chests{grid-template-columns:minmax(0,72px) 82px}
.account-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;flex-wrap:nowrap}.account-actions button{min-width:0;padding-left:4px!important;padding-right:4px!important;font-size:.66rem!important}.encounter-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:0}.encounter-actions button{min-width:0;font-size:.72rem}.clan-members-field{max-width:130px}.clan-members-field input{box-sizing:border-box;width:100%;min-height:40px;border:1px solid #40576a;border-radius:7px;padding:0 10px;background:#06121c;color:#fff;font:inherit;font-weight:800;-moz-appearance:textfield}.clan-members-field input::-webkit-inner-spin-button,.clan-members-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:520px){.battle-encounter-fields{grid-template-columns:1fr}.battle-encounter-fields>.battle-select-field:first-child{max-width:180px}.battle-norm-field{max-width:222px}.account-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
.battle-mode-active #battleBetaPanel{display:grid!important;align-content:start;gap:12px}.battle-mode-active #battleBetaPanel .battle-config-panel{height:auto}.player-clan-panel .battle-select-grid,.battle-settings-panel .battle-select-grid{padding-top:12px!important}

/* Keep the two setup cards readable and align Battle with the adjacent setup cards. */
@media(min-width:1321px){
  body.battle-mode-active .battle-top-layout{grid-template-columns:480px 360px minmax(430px,1fr)!important;align-items:stretch}
  body.battle-mode-active #battleBetaPanel{display:grid!important;grid-template-rows:auto minmax(0,1fr);align-self:stretch;align-content:stretch;row-gap:16px!important}
  body.battle-mode-active #battleBetaPanel .battle-settings-panel{height:auto;min-height:0}
}
.encounter-plan-preview header{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,180px);align-items:center;gap:12px}
.encounter-plan-preview header .encounter-plan-attacks{min-width:0;padding:7px 12px}
@media(max-width:620px){.encounter-plan-preview header{grid-template-columns:minmax(0,1fr) auto}.encounter-plan-preview header .encounter-plan-attacks{grid-column:1/-1;grid-row:2}}
.output-visual-column{display:grid;min-width:0;gap:18px;align-content:start}.output-visual-column>.topdown-panel{min-width:0;margin-bottom:0}.encounter-plan-standalone{margin-top:0}.encounter-plan-standalone[hidden]{display:none!important}.encounter-plan-heading>div{display:flex;align-items:center;gap:10px}.encounter-plan-heading h2{margin:0}.encounter-plan-source{color:#8fa2b2;font-size:.62rem}.encounter-plan-standalone>.encounter-plan-preview{padding:12px;background:#07131e}

/* Give four-digit norms, their suffix, and the unit selector distinct space. */
.battle-encounter-fields{grid-template-columns:180px 250px}
.battle-norm-input{grid-template-columns:minmax(0,84px) 62px 88px;gap:8px}
.battle-norm-input.is-chests{grid-template-columns:minmax(0,84px) 88px}
.battle-norm-value>span{left:calc(11px + var(--norm-chars,1)*.62em)}

/* Keep the account, compact temple selector, and divisor on one line. */
.player-clan-primary{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px 112px;
  gap:12px;
  align-items:end;
  min-width:0;
}
.player-clan-primary>.battle-select-field{min-width:0}
.player-clan-primary #accountSelect{width:100%;min-width:0}
.player-clan-panel .temple-setting{
  display:contents;
}
.player-clan-panel .temple-setting label{
  min-width:0;
  width:76px;
}
.player-clan-panel .temple-level-select{
  box-sizing:border-box;
  width:76px;
  min-width:0;
  padding-left:10px;
  padding-right:20px;
}
.player-clan-panel .temple-bonus-copy{
  min-width:0;
  align-self:end;
  padding-bottom:7px;
}
.player-clan-panel .account-actions{margin-top:0}
@media(max-width:430px){
  .player-clan-primary{grid-template-columns:76px minmax(0,1fr)}
  .player-clan-primary>.battle-select-field{grid-column:1/-1}
}

/* Keep every Battle control inside the viewport on narrow phones. */
@media(max-width:600px){
  body.battle-mode-active .battle-settings-panel,
  body.battle-mode-active .battle-settings-panel *{
    min-width:0;
    box-sizing:border-box;
  }
  body.battle-mode-active .battle-settings-panel .battle-select-grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.battle-mode-active .battle-encounter-fields{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
  }
  body.battle-mode-active .battle-encounter-fields>.battle-select-field:first-child,
  body.battle-mode-active .battle-norm-field{
    width:100%;
    max-width:none!important;
  }
  body.battle-mode-active .battle-norm-input{
    grid-template-columns:minmax(0,1fr) 58px minmax(78px,88px)!important;
    width:100%;
  }
  body.battle-mode-active .battle-norm-input.is-chests{
    grid-template-columns:minmax(0,1fr) minmax(78px,88px)!important;
  }
  body.battle-mode-active .battle-settings-panel select,
  body.battle-mode-active .battle-settings-panel input{
    width:100%;
    max-width:100%;
  }
}