/* Tactical combat screen. 1970s comic: ink navy, heavy black borders, slanted yellow banners. */
.bv{--ink:#091E33;--line:#111;--yel:#FFE539;--cyan:#159ED9;--red:#E63A32;--pur:#7945A8;--ivory:#FFF2D4;--green:#3DBE5A;
  --disp:'Bangers','Anton','Impact','Arial Narrow',sans-serif;--body:'Trebuchet MS',Arial,sans-serif;
  position:relative;width:100%;height:100%;display:grid;overflow:hidden;background:var(--ink);color:var(--ink);font-family:var(--body);
  grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"stage side" "abil end";
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.bv *{box-sizing:border-box}
.bv button{font-family:inherit;cursor:pointer;touch-action:manipulation}
.bv button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bv .sr,.bv-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bv h3,.bv h4{margin:0}
.bv-head{display:none}
.bv-turn em:empty{display:none}

/* ---- stage */
.bv-stage{grid-area:stage;position:relative;min-width:0;min-height:0;border:4px solid var(--line);background:#0a1d33;overflow:hidden}
.bv-canvas{position:absolute;left:0;top:0;bottom:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.bv-tag{position:absolute;left:10px;top:10px;pointer-events:none;background:var(--yel);border:3px solid var(--line);padding:5px 16px 4px;transform:skewX(-10deg);box-shadow:3px 3px 0 var(--line)}
.bv-tag-t{display:block;transform:skewX(10deg);font:italic 900 22px var(--disp);letter-spacing:.5px;text-transform:uppercase}
.bv-menubtn{position:absolute;left:10px;top:58px;width:46px;height:46px;border:3px solid var(--line);background:var(--ivory);font-size:22px;font-weight:900;box-shadow:3px 3px 0 var(--line)}
.bv-phase{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--ivory);border:3px solid var(--line);padding:3px 14px;font:italic 900 15px var(--disp);letter-spacing:.5px;white-space:nowrap;pointer-events:none;box-shadow:3px 3px 0 var(--line)}
.bv-phase:empty{display:none}
.bv-phase.enemy{background:var(--red);color:#fff}.bv-phase.hero{background:var(--cyan);color:#fff}
.bv-zoom{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:6px;z-index:3;opacity:.92}
.bv-zoom button{width:46px;height:46px;border:3px solid var(--line);background:var(--ivory);font:900 22px var(--body);box-shadow:2px 2px 0 var(--line);padding:0}
.bv-banner{position:absolute;left:50%;top:16%;transform:translate(-50%,-50%) skewX(-10deg) scale(.6);opacity:0;pointer-events:none;background:var(--yel);border:5px solid var(--line);padding:8px 34px;font:italic 900 clamp(26px,5vw,52px) var(--disp);letter-spacing:1px;box-shadow:6px 6px 0 var(--line);white-space:nowrap;color:var(--ink)}
.bv-banner.show{opacity:1;transform:translate(-50%,-50%) skewX(-10deg) scale(1);transition:transform .22s cubic-bezier(.2,1.6,.4,1),opacity .15s}
.bv-banner.super{background:linear-gradient(#fff3a0,#f2b705);}
.bv-banner.obj{background:var(--green);color:#fff}
.bv-confirm{position:absolute;left:50%;bottom:10px;transform:translate(-50%,10px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:calc(100% - 140px);background:var(--ivory);border:3px solid var(--line);padding:6px;box-shadow:4px 4px 0 var(--line);transition:opacity .12s,transform .12s;z-index:3}
.bv-confirm.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.bv-ctext{font:800 14px var(--body);padding:0 6px;max-width:300px;line-height:1.2}
.bv-confirm button{min-height:44px;min-width:84px;border:3px solid var(--line);font:italic 900 18px var(--disp);letter-spacing:.5px}
.bv-ok{background:var(--yel)}.bv-cancel{background:#fff}
.bv-toast{position:absolute;left:50%;top:64px;transform:translateX(-50%);background:var(--ink);color:#fff;border:2px solid var(--yel);padding:6px 14px;font:800 14px var(--body);opacity:0;pointer-events:none;transition:opacity .2s;z-index:4;max-width:90%;text-align:center}
.bv-toast.show{opacity:1}

/* ---- side panel */
.bv-side{grid-area:side;display:flex;flex-direction:column;gap:8px;padding:8px;min-height:0;background:var(--cyan);border:4px solid var(--line);border-left:0;overflow:hidden}
.bv-op{background:var(--yel);border:3px solid var(--line);transform:skewX(-6deg);padding:6px 10px;box-shadow:3px 3px 0 var(--line)}
.bv-op span{display:block;transform:skewX(6deg);font:italic 900 22px/1 var(--disp);text-transform:uppercase}
.bv-obj,.bv-roundap,.bv-mom,.bv-turn{background:var(--ivory);border:3px solid var(--line);padding:6px 10px}
.bv-obj h3,.bv-turn h3{font:italic 900 18px var(--disp);letter-spacing:.5px}
.bv-obj h3 button{all:unset;cursor:pointer;font:inherit}
.bv-obj ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.bv-obj li{display:flex;gap:8px;align-items:flex-start;font:800 14px/1.2 var(--body)}
.bv-obj li i{flex:none;width:18px;height:18px;border:3px solid var(--line);background:#fff;font:900 14px/12px var(--body);font-style:normal;color:var(--green);text-align:center}
.bv-obj li.done{opacity:.7;text-decoration:line-through}.bv-obj li.done i{background:var(--green);color:#fff}
.bv-roundap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px}
.bv-round{font:italic 900 24px var(--disp);letter-spacing:.5px}
.bv-ap{display:flex;align-items:center;gap:8px;font:italic 900 18px var(--disp)}
.bv-pips{display:flex;gap:5px}.bv-pips i{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);background:#fff}
.bv-pips i.on{background:var(--cyan);box-shadow:inset 0 0 0 3px #bfeaff}
.bv-mom{padding:4px 10px 8px}
.bv-mlabel s{text-decoration:none}
.bv-phone .bv-mlabel s{display:none}
.bv-mlabel{gap:6px;display:flex;justify-content:space-between;font:italic 900 14px var(--disp);letter-spacing:.5px}
.bv-mbar{position:relative;height:16px;border:3px solid var(--line);background:#222;margin-top:2px}
.bv-mbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#f2b705,var(--yel));transition:width .4s}
.bv-mbar u{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;background:var(--red);border:1px solid var(--line)}
.bv-turn{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:4px}
.bv-turn ol{list-style:none;margin:4px 0 0;padding:0;overflow-y:auto;overflow-x:hidden;display:grid;gap:3px;align-content:start;flex:1;min-height:0}
.bv-turn li button{width:100%;min-height:44px;display:flex;align-items:center;gap:8px;border:3px solid var(--line);background:#fff;padding:2px 8px 2px 2px;text-align:left}
.bv-turn li.active button{background:var(--yel)}
.bv-turn li.enemy button{border-left:8px solid var(--red)}.bv-turn li.hero button{border-left:8px solid var(--cyan)}
.bv-pt{flex:none;width:38px;height:38px;border:2px solid var(--line);background:#d6e6f2;overflow:hidden;display:block}
.bv-pt img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.bv-tok{display:grid;place-items:center;width:100%;height:100%;font:italic 900 20px var(--disp);background:var(--ivory)}
.bv-pn{flex:1;font:italic 900 15px var(--disp);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-turn em{font:900 10px var(--body);font-style:normal;background:var(--red);color:#fff;padding:1px 4px;border:1px solid var(--line)}

/* ---- ability bar */
.bv-abil{grid-area:abil;display:flex;gap:8px;padding:8px;background:var(--ink);border-top:4px solid var(--line);overflow-x:auto;align-items:stretch;min-height:104px}
.bv-abil.empty{opacity:.55}
.bv-ab{position:relative;flex:1 1 0;min-width:112px;max-width:200px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr auto;column-gap:8px;align-items:center;background:var(--ivory);border:3px solid var(--line);padding:6px 8px;text-align:left;box-shadow:3px 3px 0 #000}
.bv-ab-ico{grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;background:radial-gradient(circle,#fff 0,var(--fam) 120%);border:3px solid var(--line)}
.bv-ab-ico img,.bv-ab-ico svg{width:40px;height:40px;object-fit:contain;display:block}
.bv-svg{display:block;width:40px;height:40px}
.bv-ab-name{font:italic 900 15px/1 var(--disp);letter-spacing:.3px;text-transform:uppercase;align-self:end}
.bv-ab-ap{justify-self:start;font:900 13px var(--body);background:var(--cyan);color:#fff;border:2px solid var(--line);border-radius:10px;padding:0 8px;align-self:start;margin-top:3px}
.bv-ab.is-sel{background:var(--yel);transform:translateY(-4px);box-shadow:0 0 0 3px #fff,3px 3px 0 #000}
.bv-ab.is-off{filter:grayscale(.85);background:repeating-linear-gradient(135deg,#cfc7b0 0 6px,#e8e0c8 6px 12px)}
.bv-ab-why{position:absolute;left:0;right:0;bottom:-3px;background:var(--line);color:#fff;font:900 10px/14px var(--body);text-align:center;letter-spacing:.3px;transform:translateY(0)}
.bv-ult{background:linear-gradient(#ffe97a,#f2b705);border-color:var(--line);min-width:150px}
.bv-ult .bv-ab-ap{background:var(--red)}
.bv-ult::before{content:"SUPER";position:absolute;top:-11px;left:8px;background:var(--red);color:#fff;border:2px solid var(--line);font:italic 900 11px var(--disp);padding:0 6px;letter-spacing:1px}
.bv-end{grid-area:end;display:grid;place-items:center;padding:8px 12px;background:var(--ink);border-top:4px solid var(--line)}
.bv-endbtn{width:100%;min-height:76px;background:var(--yel);border:5px solid var(--line);transform:skewX(-10deg);box-shadow:5px 5px 0 #000;font:italic 900 34px var(--disp);letter-spacing:1px;color:var(--ink)}
.bv-endbtn span{display:block;transform:skewX(10deg)}
.bv-endbtn.armed{background:var(--red);color:#fff;font-size:24px}
.bv-endbtn.is-off{filter:grayscale(.7);opacity:.6}
.bv-endbtn:active{transform:skewX(-10deg) translate(2px,2px);box-shadow:2px 2px 0 #000}

/* ---- modals */
.bv-modal{position:absolute;inset:0;z-index:20;background:rgba(9,30,51,.78);display:flex;align-items:center;justify-content:center;padding:12px}
.bv-modal[hidden]{display:none}
.bv-card{position:relative;width:min(440px,100%);max-height:100%;overflow:auto;background:var(--ivory);border:5px solid var(--line);box-shadow:8px 8px 0 #000;padding:14px 16px}
.bv-card h1,.bv-card h2{margin:0 0 4px;font:italic 900 30px var(--disp);letter-spacing:.5px;text-transform:uppercase}
.bv-card h4{font:italic 900 15px var(--disp);margin:10px 0 4px;background:var(--yel);display:inline-block;padding:0 8px;border:2px solid var(--line)}
.bv-x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:3px solid var(--line);background:var(--red);color:#fff;font:900 26px var(--body);line-height:1;padding:0}
.bv-chead{display:flex;gap:12px;align-items:center;padding-right:44px}
.bv-chead p{margin:0;font:700 13px var(--body)}
.bv-cport{width:72px;height:72px;border:4px solid var(--line);overflow:hidden;flex:none;background:#d6e6f2}.bv-cport img{width:100%;height:100%;object-fit:cover;object-position:top}
.bv-cport.enemy{background:#f0b4ae}
.bv-chp{margin:10px 0 4px;font:800 14px var(--body)}
.bv-hpbar{height:14px;border:3px solid var(--line);background:#222;margin-bottom:2px}.bv-hpbar i{display:block;height:100%;background:var(--green)}.bv-hpbar.enemy i{background:var(--red)}
.bv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}.bv-stats div{background:#fff;border:3px solid var(--line);text-align:center;padding:2px}
.bv-stats dt{font:900 11px var(--body);letter-spacing:1px}.bv-stats dd{margin:0;font:italic 900 22px var(--disp)}
.bv-cint{background:var(--red);color:#fff;border:3px solid var(--line);padding:4px 8px;font:800 14px var(--body)}
.bv-cst,.bv-cab{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bv-cst li{font:800 13px var(--body);border-left:6px solid #a02a24;padding-left:6px}.bv-cst li.buff{border-color:#2f8f46}.bv-cst li.cc{border-color:var(--pur)}
.bv-cab li{background:#fff;border:2px solid var(--line);padding:4px 8px}.bv-cab li.ult{background:#fff3a0}
.bv-cab b{font:italic 900 15px var(--disp);text-transform:uppercase}.bv-cab span{float:right;font:800 12px var(--body)}.bv-cab small{display:block;font:600 12px var(--body);color:#333}
.bv-cwr{font:700 13px var(--body);margin:6px 0 0}
.bv-menu{text-align:center}
.bv-mbtn{display:block;width:100%;min-height:50px;margin:8px 0;border:4px solid var(--line);background:var(--yel);font:italic 900 22px var(--disp);letter-spacing:.5px}
.bv-mbtn.warn{background:var(--red);color:#fff}.bv-mbtn.go{background:var(--green);color:#fff}
.bv-check{display:flex;gap:8px;align-items:center;justify-content:center;font:800 14px var(--body);padding:8px 0;min-height:44px}.bv-check input{width:24px;height:24px}
.bv-result{text-align:center}.bv-result h1{font-size:54px;color:var(--ink)}.bv-result.win h1{color:#2f8f46;text-shadow:2px 2px 0 var(--line)}.bv-result.lose h1{color:var(--red);text-shadow:2px 2px 0 var(--line)}

/* ================= phone portrait: header strip, objectives top-left, turn strip, stage, cards, END TURN */
.bv-phone{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;grid-template-areas:"head head" "turn turn" "obj rap" "stage stage" "abil abil" "end end"}
.bv-phone .bv-zoom{right:6px;bottom:6px;gap:4px}
.bv-phone .bv-head{display:flex;grid-area:head;align-items:center;gap:8px;padding:4px 8px;background:linear-gradient(#173f6d,#0f2c4f);border-bottom:4px solid var(--line);min-height:52px}
.bv-phone .bv-back{min-height:44px;min-width:92px;background:var(--ivory);border:3px solid var(--line);font:italic 900 17px var(--disp);box-shadow:2px 2px 0 #000}
.bv-phone .bv-htitle{flex:1;color:#fff;font:italic 900 19px var(--disp);letter-spacing:.5px;text-align:center;padding-right:122px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-phone .bv-tag,.bv-phone .bv-menubtn,.bv-phone .bv-op{display:none}
.bv-phone .bv-side{display:contents}
.bv-phone .bv-mom{grid-area:head;justify-self:end;align-self:center;margin:0 8px 0 0;width:120px;padding:2px 6px 4px;z-index:2}
.bv-phone .bv-mlabel{font-size:10px;white-space:nowrap}.bv-phone .bv-mbar{height:12px}
.bv-phone .bv-obj{grid-area:obj;margin:4px 0 4px 6px;padding:3px 8px 4px;background:var(--ivory);min-width:0;border-width:3px}
.bv-phone .bv-obj h3{font-size:13px;line-height:1}.bv-phone .bv-obj h3 button{all:unset;cursor:pointer;min-height:24px;display:inline-flex;align-items:center;font:italic 900 13px var(--disp);letter-spacing:.5px}
.bv-phone .bv-obj ul{margin-top:2px}.bv-phone .bv-obj li{font-size:12px}.bv-phone .bv-obj li i{width:14px;height:14px;font-size:11px;line-height:8px;border-width:2px}
.bv-phone .bv-obj.collapsed li:not(:first-child){display:none}.bv-phone .bv-obj.collapsed ul{margin-top:0}
.bv-phone .bv-roundap{grid-area:rap;margin:4px 6px 4px 0;flex-direction:column;align-items:flex-end;gap:0;padding:0 8px 2px;background:var(--ivory);border-width:3px;justify-content:center}
.bv-phone .bv-round{font-size:16px;line-height:1.1}
.bv-phone .bv-ap{font-size:13px;gap:5px}.bv-phone .bv-pips i{width:14px;height:14px;border-width:2px}
.bv-phone .bv-turn{grid-area:turn;flex:none;padding:3px 8px;display:flex;flex-direction:row;align-items:center;gap:8px;border-width:0 0 4px;background:var(--ink)}
.bv-phone .bv-turn h3{background:var(--yel);border:3px solid var(--line);padding:0 8px;font-size:12px;line-height:1;transform:skewX(-10deg);white-space:pre;flex:none;color:var(--ink)}
.bv-phone .bv-turn h3{width:52px;white-space:normal;padding:2px 4px}
.bv-phone .bv-turn ol{display:flex;margin:0;overflow-x:auto;overflow-y:hidden;gap:4px;padding:2px 0}
.bv-phone .bv-turn li{flex:none}
.bv-phone .bv-turn li button{width:44px;min-height:44px;height:44px;padding:0;justify-content:center;border-width:3px;position:relative}
.bv-phone .bv-turn li.enemy button,.bv-phone .bv-turn li.hero button{border-left-width:3px}
.bv-phone .bv-turn li.enemy button{border-color:var(--red)}.bv-phone .bv-turn li.hero button{border-color:var(--cyan)}.bv-phone .bv-turn li.active button{border-color:var(--yel);background:var(--yel)}
.bv-phone .bv-pt{width:100%;height:100%;border:0}.bv-phone .bv-pn,.bv-phone .bv-turn em{display:none}
.bv-phone .bv-stage{border-width:0 0 4px}
.bv-phone .bv-abil{padding:6px 6px 4px;gap:5px;min-height:84px;border-top:0}
.bv-phone .bv-ab{flex:0 0 84px;min-width:84px;grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;padding:4px 2px 8px;row-gap:1px}
.bv-phone .bv-ult{flex-basis:92px;min-width:92px}
.bv-phone .bv-ab-ico{grid-row:auto;width:36px;height:36px}.bv-phone .bv-ab-ico img,.bv-phone .bv-svg{width:30px;height:30px}
.bv-phone .bv-ab-name{font-size:11px;letter-spacing:0;word-break:break-word;align-self:center;min-height:14px}.bv-phone .bv-ab-ap{justify-self:center;margin:0}
.bv-phone .bv-ab-why{font-size:9px}
.bv-phone .bv-end{padding:3px 18px 6px}.bv-phone .bv-endbtn{min-height:46px;font-size:26px;border-width:4px}
.bv-phone .bv-zoom button{width:44px;height:44px}
.bv-phone .bv-confirm{bottom:6px;max-width:calc(100% - 70px);left:calc(50% - 24px)}
.bv-phone .bv-ctext{max-width:150px;font-size:12px}.bv-phone .bv-confirm button{min-width:70px;font-size:16px}
.bv-phone .bv-phase{top:auto;bottom:60px;font-size:13px;z-index:1;left:8px;transform:none}

/* ================= wide-but-short (phone landscape) */
.bv-land{grid-template-columns:minmax(0,1fr) 210px}
.bv-land .bv-op,.bv-land .bv-turn h3,.bv-land .bv-tag{display:none}
.bv-land .bv-menubtn{top:10px}
.bv-land .bv-side{padding:4px;gap:4px}.bv-land .bv-obj li{font-size:11px}.bv-land .bv-obj h3{font-size:13px}.bv-land .bv-mom{padding:2px 8px 4px}
.bv-land .bv-pt{width:30px;height:30px}.bv-land .bv-turn li button{min-height:44px}
.bv-land .bv-abil{min-height:70px;padding:4px}.bv-land .bv-ab{min-width:118px;grid-template-columns:40px 1fr}.bv-land .bv-ab-ico{width:40px;height:40px}.bv-land .bv-ab-ico img,.bv-land .bv-svg{width:32px;height:32px}.bv-land .bv-ab-name{font-size:14px}
.bv-land .bv-endbtn{min-height:60px;font-size:24px}.bv-land .bv-end{padding:4px 8px}
.bv-land .bv-phase{top:6px;font-size:12px}

@media (prefers-reduced-motion:reduce){.bv-banner.show{transition:none}.bv-mbar i{transition:none}}
.bv-phone .bv-banner{white-space:normal;max-width:92%;text-align:center;font-size:24px;padding:6px 18px}

.bv-robj{list-style:none;margin:10px 0;padding:0;display:grid;gap:4px;text-align:left}
.bv-robj li{display:flex;gap:8px;font:800 14px/1.2 var(--body);align-items:center}
.bv-robj i{flex:none;width:22px;height:22px;border:3px solid var(--line);background:#fff;text-align:center;font:900 14px/16px var(--body);font-style:normal;color:var(--red)}
.bv-robj li.done i{background:var(--green);color:#fff}
.bv-rdown{margin:4px 0 8px;font:700 13px var(--body)}
.bv-land .bv-zoom{right:6px;bottom:6px;gap:4px}

/* shell hosts the battle in .screen.battle-root (absolute, inset 0): give the view a definite height so it fills phone screens */
.battle-root>.bv{height:100%;max-height:100%}

/* phone: phase text lives in the header (never over the map) */
.bv-phone .bv-phase{display:none}
.bv-htitle.hero{color:#9fe3ff}.bv-htitle.enemy{color:#ffb0a8}
.bv{min-height:0;max-height:100%}
.bv-phone .bv-htitle{font-size:12px;padding-right:112px;letter-spacing:0}
.bv-phone .bv-back{min-width:80px;font-size:15px}

/* ---- warnings strip (top of stage), sequence steps, team techniques */
.bv-warn{position:absolute;right:60px;top:8px;display:grid;gap:4px;justify-items:end;max-width:46%;z-index:3;pointer-events:none}
.bv-warn:empty{display:none}
.bv-w{display:flex;align-items:center;gap:6px;background:var(--ivory);border:3px solid var(--line);padding:2px 10px 2px 4px;font:italic 900 14px var(--disp);letter-spacing:.3px;box-shadow:3px 3px 0 #000;transform:skewX(-8deg)}
.bv-w>*{transform:skewX(8deg)}
.bv-w i{font-style:normal;min-width:24px;height:22px;border:2px solid var(--line);display:grid;place-items:center;font:900 11px/1 var(--body);color:#fff;background:var(--pur);letter-spacing:-2px}
.bv-w.hazard i{background:var(--red);font-size:16px;letter-spacing:0}.bv-w.boss i{background:#7a5a00;font-size:14px;letter-spacing:0}
.bv-w.more{background:var(--ink);color:#fff;border-color:var(--yel)}
.bv-phone .bv-warn{right:52px;top:4px;max-width:70%}.bv-phone .bv-w{font-size:12px}
.bv-obj li.cur{background:var(--yel);margin:0 -4px;padding:1px 4px}.bv-obj li.cur i{background:var(--ink);color:var(--yel);font-size:9px;line-height:11px}
.bv-obj li.later{opacity:.65}
.bv-tech{background:linear-gradient(#f1dcff,#d4b3f0)}.bv-tech.is-sel{background:var(--yel)}
.bv-tech.is-off{background:repeating-linear-gradient(135deg,#cfc7b0 0 6px,#e8e0c8 6px 12px)}
.bv-tc{background:var(--pur)!important}
.bv-tech::before{content:"TEAM";position:absolute;top:-11px;left:8px;background:var(--pur);color:#fff;border:2px solid var(--line);font:italic 900 11px var(--disp);padding:0 6px;letter-spacing:1px}
.bv-banner.tech{background:linear-gradient(#e7c4ff,#b35bd6)}.bv-banner.wave{background:var(--red);color:#fff}.bv-banner.phase{background:#111;color:var(--yel);border-color:var(--red)}
.bv-tsheet h2{margin-bottom:2px}.bv-tsub{margin:0 0 8px;font:700 13px var(--body)}
.bv-trow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;min-height:56px;text-align:left;border:3px solid var(--line);background:#fff;padding:6px 8px;margin:6px 0}
.bv-trow b{font:italic 900 17px var(--disp);text-transform:uppercase}.bv-trow em{font:900 14px var(--body);font-style:normal;color:var(--pur)}
.bv-trow span{font:800 12px var(--body)}.bv-trow small{grid-column:1/3;font:600 12px var(--body);color:#333}
.bv-trow u{grid-column:1/3;text-decoration:none;font:900 11px var(--body);background:var(--line);color:#fff;padding:1px 6px;justify-self:start}
.bv-trow.is-off{background:repeating-linear-gradient(135deg,#cfc7b0 0 6px,#e8e0c8 6px 12px)}
.bv-cnotes{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px}.bv-cnotes li{border:3px solid var(--line);background:var(--yel);padding:3px 8px;font:800 13px var(--body)}
.bv-stage.punch .bv-canvas{animation:bvpunch .36s ease-out}
@keyframes bvpunch{0%{transform:scale(1.035)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bv-stage.punch .bv-canvas{animation:none}}
.bv-banner{max-width:94%;white-space:normal;text-align:center}
.bv-phone .bv-warn{grid-auto-flow:column;justify-content:start;left:4px;right:52px;top:3px;max-width:none;gap:3px}
.bv-phone .bv-w{font-size:10.5px;padding:0 6px 0 2px;border-width:2px;box-shadow:2px 2px 0 #000}.bv-phone .bv-w i{min-width:18px;height:16px;font-size:9px}

/* ---- battle-fix pass: canvas is full-bleed, zoom buttons overlay the corner, range hint, momentum info, ability cards never clip */
.bv-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:calc(100% - 140px);background:var(--ink);color:#fff;border:2px solid var(--yel);padding:5px 12px;font:800 14px var(--body);text-align:center;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}
.bv-hint.show{opacity:1}
.bv-phone .bv-hint{max-width:calc(100% - 70px);left:calc(50% - 24px);font-size:12px;bottom:6px}
.bv-mom[data-act]{cursor:help}
.bv-minfo{display:block;margin-top:2px;font:700 11px/1.2 var(--body);color:#333}
.bv-phone .bv-minfo,.bv-land .bv-minfo{display:none}
.bv-abil{scroll-snap-type:x proximity;scrollbar-width:thin}
.bv .bv-ab{flex:1 0 96px;min-width:96px;max-width:170px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;text-align:center;row-gap:2px;padding:6px 4px 8px;scroll-snap-align:start}
.bv .bv-ab-ico{grid-row:auto;width:40px;height:40px}.bv .bv-ab-ico img,.bv .bv-ab-ico .bv-svg{width:32px;height:32px}
.bv .bv-ab-name{font-size:13px;line-height:1.05;letter-spacing:0;min-width:0;max-width:100%;overflow-wrap:anywhere;align-self:center}
.bv .bv-ab-ap{justify-self:center;margin:0;white-space:nowrap;font-size:12px;padding:0 6px}
.bv .bv-ult{flex-basis:108px;min-width:108px}
.bv-land .bv-ab{flex:0 0 92px;min-width:92px;padding:3px 2px 7px;row-gap:0}.bv-land .bv-ab-ico{width:28px;height:28px}.bv-land .bv-ab-ico img,.bv-land .bv-svg{width:22px;height:22px}.bv-land .bv-ab-name{font-size:11px}.bv-land .bv-ab-ap{font-size:10px}
.bv-land .bv-ult,.bv-land .bv-tech{flex-basis:96px;min-width:96px}
.bv-phone .bv-ab{flex:0 0 88px;min-width:88px}.bv-phone .bv-ult{flex-basis:96px;min-width:96px}
.bv-phone .bv-ab-name{font-size:10.5px}.bv-phone .bv-ab{flex-basis:90px;min-width:90px}

/* ---- spec A2-A5 / C5 */
.bv-hint.adv{pointer-events:auto;cursor:pointer;border-color:var(--cyan);background:#0d3a5c}
.bv .bv-ab.is-none{opacity:.62;filter:saturate(.5)}
.bv .bv-ab.is-none .bv-ab-why{background:#5b2a26}
.bv-land .bv-round{font-size:18px;white-space:nowrap}.bv-land .bv-ap{font-size:15px;white-space:nowrap}
.bv-land .bv-roundap{flex-wrap:nowrap}
/* TEAM tag: no pseudo-element on phone/landscape (it was clipped by the scrolling strip); purple top border instead */
.bv-phone .bv-tech::before,.bv-land .bv-tech::before{display:none}
.bv-phone .bv-tech,.bv-land .bv-tech{border-top:6px solid var(--pur)}
.bv-phone .bv-ult::before,.bv-land .bv-ult::before{display:none}
.bv-phone .bv-ult,.bv-land .bv-ult{border-top:6px solid var(--red)}
/* turn order: compact rows (desktop) / chips (phone, landscape) with +N */
.bv-turn li.more button{width:auto;min-width:44px;justify-content:center;background:var(--ink);color:var(--yel);font:900 15px var(--disp);border-color:var(--yel)}
.bv-desktop .bv-turn li button{min-height:36px}.bv-desktop .bv-pt{width:28px;height:28px}
.bv-desktop .bv-turn ol{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent);padding-bottom:10px}
.bv-phone .bv-turn.expanded ol{flex-wrap:wrap;overflow:visible}
.bv-land .bv-turn{padding:3px 4px}
.bv-land .bv-turn ol{display:flex;flex-wrap:wrap;gap:3px;margin:0;overflow-y:auto}
.bv-land .bv-turn li{flex:none}
.bv-land .bv-turn li button{width:44px;min-height:44px;height:44px;padding:0;justify-content:center;border-width:3px;border-left-width:3px}
.bv-land .bv-turn li.enemy button{border-color:var(--red)}.bv-land .bv-turn li.hero button{border-color:var(--cyan)}.bv-land .bv-turn li.active button{border-color:var(--yel);background:var(--yel)}
.bv-land .bv-pt{width:100%;height:100%;border:0}.bv-land .bv-pn,.bv-land .bv-turn em{display:none}
/* END TURN armed: pulse + 3s countdown bar */
.bv-endbtn{position:relative;overflow:hidden}
.bv-endbtn.armed{animation:bvpulse .6s ease-in-out infinite alternate}
.bv-endbtn.armed::after{content:"";position:absolute;left:0;bottom:0;height:6px;background:var(--yel);animation:bvcd 3s linear forwards}
@keyframes bvpulse{from{box-shadow:5px 5px 0 #000}to{box-shadow:5px 5px 0 #000,0 0 0 5px var(--yel)}}
@keyframes bvcd{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){.bv-endbtn.armed{animation:none}}
/* safe areas + wide screens */
.bv-zoom{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
.battle-root{display:flex;justify-content:center;background:#050f1a}
.battle-root>.bv{width:100%}
.bv-phone .bv-head{padding-left:max(8px,env(safe-area-inset-left))}
.bv-land .bv-roundap{flex-direction:column;align-items:flex-start;gap:0;padding:2px 10px}.bv-land .bv-pips i{width:16px;height:16px}
.bv-land .bv-ab-ico .bv-svg,.bv-land .bv-ab-ico img{width:22px;height:22px}.bv-land .bv-ab-ico .bv-svg svg{width:22px;height:22px}

/* pressure / rally chips, iron notice, LOST badge */
.bv-w.pressure i{background:var(--red);letter-spacing:0;font-size:12px}.bv-w.rally i{background:var(--green);letter-spacing:0;font-size:12px}
.bv-w.pressure,.bv-w.rally{pointer-events:auto}
.bv-phone .bv-warn[data-n="3"],.bv-phone .bv-warn[data-n="4"]{gap:2px}
.bv-iron{margin:6px 0;background:var(--red);color:#fff;border:3px solid var(--line);padding:6px 8px;font:800 14px/1.25 var(--body)}
.bv-lost{display:inline-block;background:var(--red);color:#fff;border:2px solid var(--line);font:900 12px var(--body);padding:0 6px;vertical-align:middle}

/* ---- sweep fixes: desktop tap sizes, compact portrait, slim landscape rail, ultrawide HUD scale */
.bv-obj h3 button{min-height:36px;display:inline-flex;align-items:center}
.bv-turn li button{min-height:36px}
/* compact portrait (<700px tall): header row = BACK | turn chips | momentum; END TURN beside the ability strip -> canvas >= 65% */
.bv-compact{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:78px minmax(0,1fr) 108px;grid-template-areas:"head turn mom" "obj obj rap" "stage stage stage" "abil abil end"}
.bv-compact .bv-head{display:flex;grid-area:head;min-height:0;padding:2px 0 2px 6px;border-bottom:0;background:var(--ink)}
.bv-compact .bv-htitle{display:none}.bv-compact .bv-back{min-width:70px;font-size:14px;padding:0 4px}
.bv-compact .bv-mom{grid-area:mom;justify-self:stretch;width:auto;margin:2px 6px 2px 0;align-self:center}
.bv-compact .bv-turn{grid-area:turn;padding:2px 4px;border-width:0;background:var(--ink);min-width:0}.bv-compact .bv-turn h3{display:none}
.bv-compact .bv-turn li button{width:44px;min-height:44px;height:44px}
.bv-compact .bv-obj{grid-area:obj;margin:2px 0 2px 6px;padding:2px 8px}.bv-compact .bv-obj h3{display:none}
.bv-compact .bv-obj ul{margin-top:0}
.bv-compact .bv-roundap{margin:2px 6px 2px 0}
.bv-compact .bv-abil{grid-area:abil;min-height:0;padding:4px 4px 3px}
.bv-compact .bv-ab{min-height:72px;align-content:center;padding:2px 2px 6px}.bv-compact .bv-ab-ico{width:30px;height:30px}.bv-compact .bv-ab-ico img,.bv-compact .bv-svg,.bv-compact .bv-ab-ico .bv-svg{width:24px;height:24px}
.bv-compact .bv-end{grid-area:end;padding:4px 6px 4px 2px;border-top:0;background:var(--ink);overflow:hidden}
.bv-compact .bv-endbtn{min-height:0;height:100%;width:100%;transform:none;font-size:20px;border-width:3px;line-height:1;box-shadow:3px 3px 0 #000}
.bv-compact .bv-endbtn span{transform:none}
.bv-compact .bv-endbtn.armed{font-size:13px}
/* landscape: rail <= 22% of width, status chips along the top edge instead of over the map */
.bv-land{grid-template-columns:minmax(0,1fr) clamp(140px,22vw,210px)}
@media (max-width:760px){
  .bv-land .bv-obj{padding:3px 6px}.bv-land .bv-mom{padding:2px 6px 3px}.bv-land .bv-mlabel{font-size:11px}
  .bv-land .bv-round{font-size:15px}.bv-land .bv-ap{font-size:12px}.bv-land .bv-pips i{width:12px;height:12px}
  .bv-land .bv-turn li button{width:44px;min-height:44px;height:44px}
  .bv-land .bv-side{padding:3px}.bv-land .bv-turn{padding:2px}.bv-land .bv-turn ol{gap:2px}
  .bv-land .bv-ab{flex-basis:84px;min-width:84px}.bv-land .bv-endbtn{font-size:20px}
}
.bv-land .bv-phase{left:64px;transform:none;top:6px;font-size:11px;padding:2px 10px}
.bv-land .bv-warn{left:64px;right:auto;top:34px;max-width:calc(100% - 128px);grid-auto-flow:column;justify-content:start;gap:3px}
.bv-land .bv-w{font-size:10.5px;padding:0 6px 0 2px;border-width:2px;box-shadow:2px 2px 0 #000}.bv-land .bv-w i{min-width:18px;height:16px;font-size:9px}
/* ultrawide: HUD scales up, canvas takes the rest */
@media (min-width:1900px){
  .bv-desktop{grid-template-columns:minmax(0,1fr) 375px}
  .bv-desktop .bv-side,.bv-desktop .bv-abil,.bv-desktop .bv-end,.bv-desktop .bv-tag,.bv-desktop .bv-menubtn,.bv-desktop .bv-phase,.bv-desktop .bv-zoom,.bv-desktop .bv-warn,.bv-desktop .bv-hint,.bv-desktop .bv-confirm,.bv-desktop .bv-toast{zoom:1.25}
}
@media (min-width:2400px){
  .bv-desktop{grid-template-columns:minmax(0,1fr) 435px}
  .bv-desktop .bv-side,.bv-desktop .bv-abil,.bv-desktop .bv-end,.bv-desktop .bv-tag,.bv-desktop .bv-menubtn,.bv-desktop .bv-phase,.bv-desktop .bv-zoom,.bv-desktop .bv-warn,.bv-desktop .bv-hint,.bv-desktop .bv-confirm,.bv-desktop .bv-toast{zoom:1.45}
}
/* svg icons (TEAM) must fill their .bv-svg box, never overflow it */
.bv-svg svg,.bv .bv-ab-ico svg{width:100%;height:100%;display:block}
/* objectives toggle: 44px hit area on touch layouts without growing the panel */
.bv-phone .bv-obj h3 button,.bv-land .bv-obj h3 button{min-height:44px;margin:-10px 0;padding-right:10px}

/* ---- playtest #3: END TURN never clips, is set apart from the ability strip */
.bv-end{overflow:hidden;min-width:0}
.bv-phone .bv-endbtn,.bv-land .bv-endbtn{transform:none;width:100%;max-width:100%}
.bv-phone .bv-endbtn span,.bv-land .bv-endbtn span{transform:none}
.bv-phone .bv-endbtn.armed,.bv-land .bv-endbtn.armed{font-size:15px;line-height:1.05}
.bv-compact .bv-end{border-left:4px solid var(--line);padding-left:10px}
.bv-compact .bv-endbtn{height:78%;align-self:center}
.bv-land .bv-end{border-left:0}

/* Compact portraits retain the objective inspection control used by touch, keyboard and training.
   A fixed row height keeps expanding/collapsing the checklist from reframing the camera. */
.bv-compact .bv-obj{display:flex;align-items:center;gap:8px;height:54px;min-height:54px}
.bv-compact .bv-obj h3{display:block;flex:0 0 auto}
.bv-compact .bv-obj h3 button{min-height:44px;margin:0;padding:0;font-size:11px}
.bv-compact .bv-obj ul{min-width:0;flex:1;max-height:46px;overflow:auto}

/* Touch tablets use the desktop rail but retain full touch targets. */
@media(pointer:coarse){
  .bv .bv-obj h3 button,.bv .bv-turn li button{min-height:44px;min-width:44px}
}