.bt-popup{width:calc(var(--u)*760);height:calc(var(--u)*560);min-width:420px;min-height:300px}
/* the Outcome drawn in a report reading pane (Mike 2026-10-28) */
.bt-popup.bt-inline{width:auto;height:auto;min-width:0;min-height:0}
.ib-btrep{margin:.3em 0 .6em}
.bt-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.6% 3%;overflow:auto}
/* a fight's report: the notice dialog's own label / value rows, a line naming the
   fight and the phase it stands at (W12 Battle popups, 2026-10-21) */
.bt-popup .bt-sub{font-size:calc(var(--u)*20);color:#e8d9a8;margin-bottom:.3em}
.bt-popup .bt-steps{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;font-size:calc(var(--u)*16);
  color:#7d7155;margin-bottom:.6em}
.bt-popup .bt-steps span.done{color:#b79a56}
.bt-popup .bt-steps span.on{color:#f4e4b8;font-weight:700;border-bottom:2px solid #caa338}
.bt-popup .bt-steps i{font-style:normal;color:#5d5440}
.bt-popup .bt-wait{font-size:calc(var(--u)*17);color:#9a8850;font-style:italic}
.bt-popup .nt-row{display:flex;gap:.6em;align-items:baseline;font-size:calc(var(--u)*16);color:#E8DCC8;
  padding:.14em 0;border-bottom:1px solid rgba(59,66,71,.6)}
.bt-popup .nt-row span{flex:0 0 38%;color:#C9A94E}
.bt-popup .nt-row b{color:#f4e4b8;font-weight:700}
.bt-popup .bt-rounds-h{font-size:calc(var(--u)*20);color:#f4e4b8;font-weight:700;margin:.8em 0 .2em}
.bt-popup .bt-round{margin:.35em 0 .5em}
.bt-popup .bt-round-h{display:flex;justify-content:space-between;gap:1em;font-size:calc(var(--u)*17);
  color:#caa338;font-weight:700;border-bottom:1px solid rgba(202,163,56,.45);padding-bottom:.1em}
.bt-popup .bt-round-h span{color:#e07a6a;font-weight:400}
/* the fight's head (Mike 2026-10-21): the region, largest, on top; the countdown
   in maroon at the top right; the phases as buttons under it -- the one it stands
   at lit, closed ones open for review (read-only), later ones greyed */
.bt-popup .lp-title.bt-head{display:flex;align-items:baseline;gap:.6em;font-size:calc(var(--u)*34);letter-spacing:.5px}
.bt-popup .bt-head .bt-rname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-popup .bt-head .bt-clock{flex:0 0 auto;font-size:calc(var(--u)*22);color:#b3202e;font-weight:700;font-variant-numeric:tabular-nums}
.bt-popup .bt-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin:.2em 0 .5em}
.bt-popup .bt-phases button{font-family:inherit;font-size:calc(var(--u)*15);padding:.35em .2em;border-radius:4px;cursor:pointer;
  border:1px solid #4a4433;background:rgba(0,0,0,.35);color:#b79a56}
.bt-popup .bt-phases button.on{border-color:#caa338;background:rgba(202,163,56,.22);color:#f4e4b8;font-weight:700}
.bt-popup .bt-phases button.view{box-shadow:0 0 0 1px #e8d9a8 inset}
.bt-popup .bt-phases button:disabled{opacity:.38;cursor:default;color:#7d7155}
.bt-popup .bt-review{font-size:calc(var(--u)*14);color:#9a8850;font-style:italic;margin:-.2em 0 .4em}
.bt-popup .bt-sec{margin:.5em 0 .2em;font-size:calc(var(--u)*18);color:#caa338;font-weight:700;border-bottom:1px solid rgba(202,163,56,.35)}
.bt-popup .bt-army{margin:.35em 0 .5em}
.bt-popup .bt-army-h{display:flex;justify-content:space-between;font-size:calc(var(--u)*16);color:#f4e4b8;font-weight:700}
.bt-popup .bt-army-h span{color:#b79a56;font-weight:400}
.bt-popup .bt-troops{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*150),1fr));gap:.35em;margin-top:.25em}
.bt-popup .bt-troop{display:flex;align-items:center;gap:.45em;padding:.2em .35em;border:1px solid #2f3a44;border-radius:5px;background:rgba(0,0,0,.25)}
.bt-popup .bt-troop .art,.bt-popup .bt-troop img{width:calc(var(--u)*40);height:calc(var(--u)*40);object-fit:contain;flex:0 0 auto}
.bt-popup .bt-troop .tn{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*14);color:#e8d9a8;line-height:1.15}
.bt-popup .bt-troop .tn i{display:block;font-style:normal;color:#8a7a4a;font-size:.88em}
.bt-popup .bt-troop b{font-size:calc(var(--u)*16);color:#f4e4b8}
.bt-popup .bt-chars{display:flex;flex-direction:column;gap:.35em;margin-top:.25em}
.bt-popup .bt-char{display:flex;align-items:center;gap:.55em}
.bt-popup .bt-char>img{width:calc(var(--u)*46);height:calc(var(--u)*46);border-radius:50%;object-fit:cover;border:1px solid #caa338;flex:0 0 auto}
.bt-popup .bt-char .cn{min-width:calc(var(--u)*130);font-size:calc(var(--u)*15);color:#f4e4b8;line-height:1.15}
.bt-popup .bt-char .cn i{display:block;font-style:normal;color:#8a7a4a;font-size:.88em}
.bt-popup .bt-spells{display:flex;flex-wrap:wrap;gap:.4em}
/* the scout ladder (Mike 2026-10-23): a spell still recovering at the battle, the
   assessment of the enemy force, small notes (on its way, relics carried) */
.bt-popup .bt-spell.rec{opacity:.55}
.bt-popup .bt-assess{margin:.3em 0 .4em;padding:.35em .55em;border-left:3px solid #caa338;background:rgba(202,163,56,.1);color:#f4e4b8;font-size:calc(var(--u)*15)}
.bt-popup .bt-note{font-size:calc(var(--u)*14);color:#b79a56;margin:.15em 0}
.bt-popup .bt-char .cn i+i{margin-top:.1em}
/* Pre-Battle (Mike 2026-10-21): the Invader / Defender toggle, each character's two
   spell slots, and the special actions -- a greyed row has no one to do it or no
   known target */
.bt-popup .bt-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.4em;margin:.1em 0 .4em}
.bt-popup .bt-toggle button{font-family:inherit;font-size:calc(var(--u)*16);padding:.3em;border-radius:4px;cursor:pointer;
  border:1px solid #4a4433;background:rgba(0,0,0,.35);color:#b79a56}
.bt-popup .bt-toggle button.on{border-color:#8fb3d0;background:rgba(74,138,176,.22);color:#e8f2fa;font-weight:700}
.bt-popup .bt-char{flex-wrap:wrap}
.bt-popup .bt-slots{display:flex;flex-wrap:wrap;gap:.6em;flex:1 1 auto}
.bt-popup .bt-slot{display:flex;flex-direction:column;gap:.2em;min-width:calc(var(--u)*170);padding:.25em .4em;border:1px solid #2f3a44;border-radius:5px;background:rgba(0,0,0,.25)}
.bt-popup .bt-slot-h{font-size:calc(var(--u)*13);color:#C9A94E}
.bt-popup .bt-sa{display:flex;flex-direction:column;gap:.3em;margin-top:.25em}
.bt-popup .bt-sa-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.6fr);gap:.45em;align-items:center;font-size:calc(var(--u)*14)}
.bt-popup .bt-sa-row.off{opacity:.45}
.bt-popup .bt-sa-k{color:#f4e4b8;font-weight:700}
.bt-popup .bt-sa-why{color:#8a7a4a;font-style:italic;font-size:calc(var(--u)*13)}
@media (max-width:640px){.bt-popup .bt-sa-row{grid-template-columns:1fr 1fr}.bt-popup .bt-sa-why{grid-column:1 / -1}}
/* the battlefield (Mike 2026-10-21): three ranks a side, one box per place along
   the front, the battle line between them -- a field, not a table */
.bt-popup .bf-head,.bt-popup .bf-labels{display:flex;justify-content:space-between;font-size:calc(var(--u)*15);color:#C9A94E;margin:.2em 0}
.bt-popup .bf-labels span{font-weight:700;color:#f4e4b8}
.bt-popup .bf-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 18px repeat(3,minmax(0,1fr));gap:4px;margin:0 auto;
  padding:.5em;border-radius:6px;background:linear-gradient(90deg,rgba(120,40,30,.18),rgba(60,50,30,.25) 48%,rgba(60,50,30,.25) 52%,rgba(30,60,90,.18))}
.bt-popup .bf-box{min-width:0;min-height:0;aspect-ratio:1 / 1;border:1px solid rgba(202,163,56,.25);border-radius:3px;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bt-popup .bf-box img,.bt-popup .bf-box .sig{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;font-size:calc(var(--u)*11);color:#caa338}
.bt-popup .bf-box.bf-char{border-color:#caa338}
.bt-popup .bf-box.bf-char img{object-fit:cover;border-radius:50%}
.bt-popup .bf-line{grid-column:4;grid-row:1 / -1;background:repeating-linear-gradient(180deg,#b3202e 0 6px,transparent 6px 10px);width:3px;justify-self:center}
.bt-popup .bf-sides{display:grid;grid-template-columns:1fr 1fr;gap:.8em;margin-top:.4em}
.bt-popup .bf-side-h{font-size:calc(var(--u)*15);color:#f4e4b8;font-weight:700}
.bt-popup .bf-small{font-size:calc(var(--u)*13);color:#b6a888;margin-top:.2em;display:flex;flex-wrap:wrap;gap:.3em;align-items:center}
.bt-popup .bf-mini{display:inline-flex;align-items:center;gap:.25em;color:#e8d9a8;font-size:calc(var(--u)*13)}
.bt-popup .bf-mini img{width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;object-fit:cover;border:1px solid #6b5a3a}
.bt-popup .bf-mini i{color:#8a7a4a;font-style:normal}
.bt-popup .bf-last{margin-top:.5em;padding:.35em .5em;border-top:1px solid rgba(202,163,56,.35);font-size:calc(var(--u)*15);color:#e8d9a8}
.bt-popup .bf-last b{color:#e07a6a}
/* the outcome */
.bt-popup .oc-banner{display:flex;align-items:baseline;gap:.7em;font-size:calc(var(--u)*30);font-weight:700;margin:.1em 0 .4em}
.bt-popup .oc-banner.win{color:#7fc46a}.bt-popup .oc-banner.loss{color:#e07a6a}.bt-popup .oc-banner.draw{color:#caa338}
.bt-popup .oc-banner span{font-size:calc(var(--u)*16);color:#b6a888;font-weight:400}
.bt-popup .oc-face{display:grid;grid-template-columns:1fr auto 1fr;gap:.6em;align-items:start}
.bt-popup .oc-side-h{font-size:calc(var(--u)*16);color:#f4e4b8;font-weight:700;margin-bottom:.2em}
.bt-popup .oc-side-h span{color:#8a7a4a;font-weight:400;margin-left:.4em}
.bt-popup .oc-units{display:flex;flex-direction:column;gap:.3em}
.bt-popup .oc-unit{display:flex;align-items:center;gap:.4em;padding:.2em .35em;border:1px solid #2f3a44;border-radius:5px;background:rgba(0,0,0,.25)}
.bt-popup .oc-unit.r{flex-direction:row-reverse;text-align:right}
.bt-popup .oc-unit img,.bt-popup .oc-unit .sig{width:calc(var(--u)*36);height:calc(var(--u)*36);object-fit:contain;flex:0 0 auto}
.bt-popup .oc-unit .tn{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*14);color:#e8d9a8;line-height:1.15}
.bt-popup .oc-unit .tn i{display:block;font-style:normal;color:#8a7a4a;font-size:.88em}
.bt-popup .oc-lost{color:#e07a6a;font-weight:700}
.bt-popup .oc-none{color:#6f7a64}
.bt-popup .oc-mid{display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.3em .5em;font-size:calc(var(--u)*20);border-left:1px solid rgba(202,163,56,.3);border-right:1px solid rgba(202,163,56,.3)}
.bt-popup .oc-vs{color:#caa338;font-size:calc(var(--u)*14);margin:.3em 0}
.bt-popup .oc-dim{color:#8a7a4a;font-size:calc(var(--u)*13)}
/* a character and what they did (Mike 2026-10-28): portrait, name, type, role tags,
   fate; then one line per deed, a failure in red */
.bt-popup .oc-chs{display:flex;flex-direction:column;gap:.45em}
.bt-popup .oc-ch{display:flex;gap:.55em;align-items:flex-start;padding:.4em .5em;border:1px solid #2f3a44;border-left:3px solid #7fc46a;border-radius:5px;background:rgba(0,0,0,.25)}
.bt-popup .oc-ch.died{border-left-color:#e07a6a}.bt-popup .oc-ch.captured{border-left-color:#d9a35b}
.bt-popup .oc-ch-p{width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;object-fit:cover;border:1px solid #6b5a3a;flex:0 0 auto}
.bt-popup .oc-ch-b{flex:1 1 auto;min-width:0}
.bt-popup .oc-ch-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em;font-size:calc(var(--u)*16);color:#f4e4b8;margin-bottom:.2em}
.bt-popup .oc-ch-h i{font-style:normal;color:#8a7a4a;font-size:.85em}
.bt-popup .oc-tag{font-size:calc(var(--u)*11);padding:.05em .45em;border:1px solid #6b5a3a;border-radius:9px;color:#caa338;text-transform:uppercase;letter-spacing:.4px}
.bt-popup .oc-fate-tag{margin-left:auto;font-size:calc(var(--u)*13);font-weight:700;color:#7fc46a}
.bt-popup .oc-ch.died .oc-fate-tag{color:#e07a6a}.bt-popup .oc-ch.captured .oc-fate-tag{color:#d9a35b}
.bt-popup .oc-fx{display:flex;gap:.45em;align-items:center;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.15em 0;line-height:1.3}
.bt-popup .oc-fx img{width:calc(var(--u)*30);height:calc(var(--u)*30);object-fit:contain;border-radius:4px;border:1px solid #6b5a8f;flex:0 0 auto}
.bt-popup .oc-fx i{font-style:normal;color:#8a7a4a}
.bt-popup .oc-fx b{color:#f4e4b8}
.bt-popup .oc-fx.bad{color:#e8a598}.bt-popup .oc-fx.bad b{color:#e07a6a}
.bt-popup .oc-fx.quiet{color:#8a7a4a;font-style:italic}
@media (max-width:640px){.bt-popup .oc-face{grid-template-columns:1fr}.bt-popup .oc-mid{flex-direction:row;border:0}.bt-popup .bf-sides{grid-template-columns:1fr}}
.bt-popup .bt-spell{display:flex;align-items:center;gap:.3em;font-size:calc(var(--u)*13);color:#c9b6e8}
.bt-popup .bt-spell img{width:calc(var(--u)*32);height:calc(var(--u)*32);object-fit:contain;border-radius:4px;border:1px solid #6b5a8f}
.bt-popup .bt-none{font-size:calc(var(--u)*14);color:#8a7a4a;font-style:italic}
.bt-popup .bt-yn{display:flex;gap:1.6em;font-size:calc(var(--u)*16);color:#e8d9a8;margin-top:.2em}
.bt-popup .bt-yn b{color:#f4e4b8}
.bt-popup .bt-orders{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-top:.3em}
.bt-popup .bt-orders label{display:flex;flex-direction:column;gap:.2em;font-size:calc(var(--u)*14);color:#C9A94E}
.bt-popup .bt-orders select{width:100%}
@media (max-width:640px){.bt-popup .bt-orders{grid-template-columns:1fr}.bt-popup .bt-phases{grid-template-columns:repeat(2,1fr)}}