:root{
  --chatSpace:540px;   /* chatWrap bottom offset + head + body + margins */
  --tr:#ff4b3e; --tr2:#ff8a2a; --trD:#7a1408; --gold:#ffc93c;
  --mu:#37b6ff; --mu2:#7a5cff; --muD:#0b1f52; --cy:#5ef2ff;
  --ink:#eef3ff; --dim:#9aa7c4;
  --panel:linear-gradient(180deg,rgba(13,17,32,.86),rgba(6,8,18,.92));
  --line:rgba(255,255,255,.10);
  --disp:'Arial Black','Franklin Gothic Bold','Impact','Segoe UI',sans-serif;
  --mono:'Consolas','Menlo','Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#04050c;color:var(--ink);
  font-family:var(--disp);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
#field{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#field.drag{cursor:grabbing}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud button,#hud a,#hud .pe{pointer-events:auto}
button{font-family:var(--disp);cursor:pointer}

/* ── simulated badge ─────────────────────────────────────── */
#simBadge{position:absolute;top:10px;left:10px;background:rgba(50,38,0,.85);
  border:1px solid #ffc93c;color:#ffd75e;font-size:10px;font-weight:900;letter-spacing:.14em;
  padding:5px 9px;border-radius:4px;text-shadow:0 0 8px rgba(255,201,60,.5);
  animation:simPulse 2.4s infinite;z-index:40}
@keyframes simPulse{0%,100%{box-shadow:0 0 0 rgba(255,201,60,.0)}50%{box-shadow:0 0 14px rgba(255,201,60,.35)}}

/* ── top HUD: title / score / leader / meters ─────────────── */
#topHud{position:absolute;top:0;left:50%;transform:translateX(-50%);text-align:center;width:min(96vw,860px);padding-top:8px}
#warTitle{font-size:clamp(10px,1.15vw,14px);letter-spacing:.42em;color:var(--dim);font-weight:900;white-space:nowrap}
#warTitle em{font-style:normal;color:var(--gold);text-shadow:0 0 10px rgba(255,201,60,.8)}
#warTitle span{display:block;font-size:clamp(7px,.7vw,9px);letter-spacing:.34em;color:#5a6684;margin-top:2px}
/* mid-width screens: the long subtitle would run under the control cluster */
@media (max-width:1460px){#warTitle span{display:none}}
@media (max-width:1120px){#scoreRow{font-size:clamp(22px,2.9vw,34px)}}
#scoreRow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,22px);margin-top:2px;
  font-size:clamp(22px,3.4vw,52px);font-weight:900;font-style:italic;line-height:1.05;white-space:nowrap}
.scoreSide{display:flex;align-items:baseline;gap:.35em}
.scoreSide .nm{font-size:.44em;letter-spacing:.08em}
.scoreSide.t{color:#ffb3a7;text-shadow:0 0 18px rgba(255,75,62,.9),0 0 46px rgba(255,75,62,.5)}
.scoreSide.m{color:#b9e6ff;text-shadow:0 0 18px rgba(55,182,255,.9),0 0 46px rgba(55,182,255,.5)}
.scoreSide b{font-size:1.06em;color:#fff;-webkit-text-stroke:1px rgba(255,255,255,.15)}
.scoreSide.t b{text-shadow:0 0 24px var(--tr),0 0 60px rgba(255,75,62,.6),0 3px 0 #7a1408}
.scoreSide.m b{text-shadow:0 0 24px var(--mu),0 0 60px rgba(55,182,255,.6),0 3px 0 #0b2a6b}
#swords{font-size:.62em;font-style:normal;color:var(--gold);text-shadow:0 0 16px rgba(255,201,60,.9);animation:swordPulse 1.6s infinite}
@keyframes swordPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#leaderPill{display:inline-block;margin-top:4px;padding:3px 18px;font-size:clamp(10px,1vw,14px);font-weight:900;
  letter-spacing:.3em;font-style:italic;border-radius:3px;color:#fff;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background .4s}
#leaderPill.t{background:linear-gradient(90deg,#a01606,#ff4b3e);text-shadow:0 0 10px #fff5}
#leaderPill.m{background:linear-gradient(90deg,#0b2a6b,#37b6ff);text-shadow:0 0 10px #fff5}
#leaderPill.n{background:linear-gradient(90deg,#3a3f55,#5a6684)}
#meters{display:flex;justify-content:center;gap:clamp(14px,3vw,44px);margin-top:6px}
.mcol{width:clamp(120px,15vw,210px)}
.mrow{display:flex;align-items:center;gap:6px;margin-top:3px}
.mrow i{font-style:normal;font-size:10px;width:13px;text-align:center;filter:drop-shadow(0 0 4px #000)}
.mlab{font-size:8px;letter-spacing:.12em;color:var(--dim);width:58px;text-align:left;white-space:nowrap}
.mcol.m .mrow{flex-direction:row-reverse}
.mcol.m .mlab{text-align:right}
.mbar{flex:1;height:9px;background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:2px;overflow:hidden;position:relative}
.mbar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,0,0,.4) 7px 9px)}
.mfill{height:100%;width:50%;transition:width .5s cubic-bezier(.2,.9,.3,1);border-radius:1px}
.mcol.t .mfill{background:linear-gradient(90deg,#7a1408,var(--tr),var(--tr2));box-shadow:0 0 8px rgba(255,75,62,.7)}
.mcol.m .mfill{background:linear-gradient(90deg,#0b2a6b,var(--mu),var(--cy));box-shadow:0 0 8px rgba(55,182,255,.7);margin-left:auto}

/* ── token chips (bottom corners) ─────────────────────────── */
.chip{position:absolute;bottom:14px;width:clamp(196px,17vw,250px);padding:10px 12px 12px;background:var(--panel);
  border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.chip.t{left:14px;border-left:3px solid var(--tr)}
.chip.m{right:14px;border-right:3px solid var(--mu);text-align:right}
.chipHead{font-size:11px;font-weight:900;letter-spacing:.18em}
.chip.t .chipHead{color:#ffb3a7}.chip.m .chipHead{color:#b9e6ff}
.chipPx{font-size:clamp(18px,1.7vw,24px);font-weight:900;font-style:italic;color:#fff;margin-top:2px;
  text-shadow:0 0 12px rgba(255,255,255,.25)}
.chipStats{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:3px;line-height:1.5}
.chipStats b{color:var(--ink);font-weight:700}
.chg.up{color:#43e97b!important}.chg.dn{color:#ff5f6d!important}
.chipPow{margin-top:5px;font-size:9px;letter-spacing:.14em;color:var(--dim)}
.chipPow b{font-size:14px;font-style:italic;margin-left:4px}
.chip.m .chipPow b{margin-left:0;margin-right:4px}
.chip.t .chipPow b{color:#ff8b7f;text-shadow:0 0 8px rgba(255,75,62,.8)}
.chip.m .chipPow b{color:#7fd4ff;text-shadow:0 0 8px rgba(55,182,255,.8)}
/* 1 holder = 1 warrior — community size under arms */
.chipHold{margin-top:4px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:#ffe9a3}
.chipHold b{font-weight:700;color:#ffd75e}
.buy{display:block;margin-top:8px;padding:8px 0;text-align:center;text-decoration:none;color:#fff;
  font-size:13px;font-weight:900;font-style:italic;letter-spacing:.12em;border-radius:4px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:transform .12s,filter .12s}
.buy:hover{transform:scale(1.045);filter:brightness(1.2)}
.buy.t{background:linear-gradient(180deg,#ff6a3e,#c81e0e);box-shadow:0 0 16px rgba(255,75,62,.5),inset 0 1px 0 #ffb3a7}
/* ── CA pill (copyable contract address) ── */
.caPill{display:flex;align-items:center;gap:6px;margin-top:7px;padding:5px 8px;border-radius:7px;cursor:pointer;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13);font:700 9.5px Consolas,monospace;
  color:#cfd8ea;letter-spacing:.04em;user-select:none;transition:border-color .15s,background .15s;white-space:nowrap;overflow:hidden}
.caPill:hover{border-color:rgba(255,255,255,.4);background:rgba(0,0,0,.6)}
.caPill .lbl{opacity:.65;flex:0 0 auto}
.caPill .addr{overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.caPill .cp{flex:0 0 auto;opacity:.8}
.caPill.copied{border-color:#39d98a;color:#39d98a}
.chip.t .caPill:hover{border-color:#ff8b6a}
.chip.m .caPill:hover{border-color:#57c8ff}
/* ── social links ── */
#social{position:absolute;right:14px;top:54px;z-index:30;display:flex;flex-direction:row;gap:5px;align-items:center}
#social a{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;text-decoration:none;
  background:rgba(6,9,18,.68);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px);
  font:700 10px Consolas,monospace;color:#cfd8ea;letter-spacing:.06em;transition:.15s}
#social a:hover{border-color:#fff;color:#fff}
/* MID-WIDTH DESKTOP (761–1360px): the socials row shares the top band with
   the centred score row, and adding the 📣 MARKETING KIT chip pushed it into
   .scoreSide / #leaderPill at 1366 and 1024 (caught by scripts/p4_rects.js).
   Drop the handle + address labels to their glyphs there — the title
   attribute still carries the full text, and the row halves in width.
   Below 761px the mobile rule below takes over with its own footer row. */
@media (min-width:761px) and (max-width:1460px){
  #social a .sL{display:none}
  #social .kL{display:none}
  #social{gap:4px}
  #social a{padding:5px 7px}
}
/* mobile: socials collapse into ONE slim centered footer row between the
   chips and the buy bar — zero overlap with the token blocks (round 5) */
@media (max-width:760px){
  #social{left:0;right:0;top:auto;bottom:66px;flex-direction:row;justify-content:center;
    align-items:center;gap:6px;z-index:46;pointer-events:none}
  #social a{padding:2px 8px;font-size:8px;border-radius:6px;background:rgba(6,9,18,.8);pointer-events:auto}
  /* phones: 📣 MARKETING KIT collapses to 📣 KIT so the row still fits 390px */
  #social .kL{display:none}
}
/* 📣 MARKETING KIT — same chip as the other socials, gold hairline so it
   reads as an action rather than a contact detail. Deliberately NOT a
   button and NOT in #ctrls: it must never compete with the HUD controls. */
#kitLink{border-color:rgba(255,201,60,.34);color:#ffd75e}
#kitLink:hover{border-color:var(--gold);color:#fff;box-shadow:0 0 12px rgba(255,201,60,.28)}
.buy.m{background:linear-gradient(180deg,#37b6ff,#1e51c8);box-shadow:0 0 16px rgba(55,182,255,.5),inset 0 1px 0 #b9e6ff}

/* ── war feed ──────────────────────────────────────────────────────────
   HUD LAYOUT CONTRACT (owner round 5 — "war feed overlaps war chat"):
   the left column is FEED (top) then CHAT (anchored to the bottom).
   --chatSpace = chatWrap total height + its bottom offset + breathing
   room; the feed clips itself to never cross into that band. A height
   media query shrinks the chat body on short screens so both fit.
   The rect-overlap suite (scripts/p4_rects.js) enforces this at
   1700×960 / 1366×768 / 1024×768 / 390×844.                          ── */
#feed{position:absolute;left:14px;top:clamp(150px,20vh,210px);width:238px;pointer-events:none;
  max-height:calc(100vh - var(--chatSpace,540px) - clamp(150px,20vh,210px) - 14px);overflow:hidden}
#feedTitle{font-size:9px;letter-spacing:.26em;color:var(--dim);margin-bottom:4px;text-shadow:0 1px 4px #000}
.fitem{font-family:var(--mono);font-size:10.5px;line-height:1.35;padding:4px 8px;margin-bottom:3px;border-radius:3px;
  background:rgba(5,7,16,.72);border-left:2px solid #444;color:#cdd6ea;
  animation:feedIn .3s cubic-bezier(.2,1.4,.4,1);text-shadow:0 1px 2px #000}
.fitem.t{border-left-color:var(--tr)}.fitem.m{border-left-color:var(--mu)}
.fitem.g{border-left-color:var(--gold);color:#ffe9a3;background:rgba(40,30,0,.78)}
@keyframes feedIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}

/* ── generals / war record (collapsible, right side) ──────── */
#genPanel{position:absolute;right:14px;top:clamp(120px,17vh,170px);width:236px;text-align:right}
#genToggle{background:var(--panel);border:1px solid var(--line);color:var(--gold);font-size:10px;
  font-weight:900;letter-spacing:.18em;padding:6px 12px;border-radius:3px;font-style:italic}
#genToggle:hover{border-color:var(--gold)}
#genBody{margin-top:6px;background:var(--panel);border:1px solid var(--line);padding:8px 10px;text-align:left;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
#genPanel.closed #genBody{display:none}
.gRow{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;padding:2.5px 0;color:#cdd6ea}
.gRow .rk{color:var(--gold);width:14px;font-weight:700}
.gRow .ad{flex:1}
.gRow .ct{color:var(--dim)}
.gRow.t .ad{color:#ffb3a7}.gRow.m .ad{color:#b9e6ff}
#warRecord{margin-top:7px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.14);
  font-family:var(--mono);font-size:9.5px;color:var(--dim);line-height:1.6}
#warRecord b{color:var(--ink)}

/* ── control cluster (top right) ──────────────────────────── */
#ctrls{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:41}
.cbtn{background:var(--panel);border:1px solid var(--line);color:var(--ink);width:36px;height:32px;
  border-radius:4px;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,transform .1s}
.cbtn:hover{border-color:var(--gold);transform:translateY(-1px)}
.cbtn.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(255,201,60,.35)}
.cbtn.wide{width:auto;padding:0 12px;font-size:10px;font-weight:900;letter-spacing:.1em;font-style:italic;color:var(--gold)}
/* narrow desktops: BATTLE MOMENT collapses to its 📸 icon so the control
   cluster never reaches the centered score row */
@media (max-width:1120px){#ctrls .cbtn.wide{max-width:36px;padding:0 10px;overflow:hidden;white-space:nowrap;justify-content:flex-start}}

/* ── chyron (announcer, bottom center) ────────────────────── */
#chyron{position:absolute;left:50%;transform:translateX(-50%) translateY(20px);bottom:16px;width:min(46vw,660px);
  background:rgba(4,6,14,.88);border:1px solid var(--line);border-left:3px solid #888;
  padding:7px 14px;font-family:var(--mono);font-size:12.5px;opacity:0;transition:opacity .25s,transform .25s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
#chyron.on{opacity:1;transform:translateX(-50%) translateY(0)}
#chSp{font-weight:700;letter-spacing:.08em;margin-right:8px;font-family:var(--disp);font-size:10px}
#chTx{color:#dfe7f7}
.car{display:inline-block;width:7px;height:12px;background:#dfe7f7;vertical-align:-2px;animation:carBlink .7s steps(1) infinite}
@keyframes carBlink{50%{opacity:0}}

/* ── big-moment banner (MOMENT DIRECTOR — owner round 5: ~40% smaller
      typography, slight transparency so the FIELD reads through, short
      holds; one at a time, scale-punch in, burn-out exit) ──────── */
#bannerWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
#banner{display:none;text-align:center;padding:10px 30px;position:relative;will-change:transform,opacity,filter}
#banner.show{display:block;opacity:.84;animation:bannerSlam .45s cubic-bezier(.15,1.6,.4,1)}
#banner.bout{display:block;animation:bannerBurn .42s ease-in forwards}
#banner .bTop{font-size:clamp(8px,1.0vw,12px);letter-spacing:.5em;font-weight:900;color:#fff;opacity:.8}
#banner .bMain{font-size:clamp(17px,2.8vw,42px);font-weight:900;font-style:italic;letter-spacing:.02em;line-height:1;
  color:#fff;-webkit-text-stroke:1px rgba(0,0,0,.3);white-space:nowrap;
  transform:skewX(-4deg)}
#banner .bSub{font-size:clamp(7px,.75vw,10px);letter-spacing:.34em;font-weight:900;margin-top:4px;color:#fff;opacity:.85}
#banner::before,#banner::after{content:'';position:absolute;left:-7vw;right:-7vw;height:2px;background:currentColor;opacity:.5}
#banner::before{top:0}#banner::after{bottom:0}
#banner.t{color:var(--tr)}#banner.t .bMain{text-shadow:0 0 10px rgba(255,75,62,.7),0 0 26px rgba(255,75,62,.5),0 3px 0 #7a1408}
#banner.m{color:var(--mu)}#banner.m .bMain{text-shadow:0 0 10px rgba(55,182,255,.7),0 0 26px rgba(55,182,255,.5),0 3px 0 #0b2a6b}
#banner.g{color:var(--gold)}#banner.g .bMain{text-shadow:0 0 10px rgba(255,201,60,.7),0 0 26px rgba(255,201,60,.5),0 3px 0 #6b4e00}
@keyframes bannerSlam{0%{transform:scale(2.1);opacity:0}55%{transform:scale(.95);opacity:.92}100%{transform:scale(1);opacity:.84}}

/* ── textLevel:'minimal' (body.textmin, DEFAULT — director.ts syncs the
      class ~1Hz from window.BATTLE_CONFIG.textLevel): the rare surviving
      center banner is smaller + more transparent, the chyron lighter ── */
body.textmin #banner.show{opacity:.72}
body.textmin #banner{padding:7px 22px}
body.textmin #banner .bTop{font-size:clamp(7px,.8vw,10px);letter-spacing:.4em}
body.textmin #banner .bMain{font-size:clamp(14px,2.1vw,30px)}
body.textmin #banner .bSub{display:none}
body.textmin #chyron{opacity:0}
body.textmin #chyron.on{opacity:.88}
@media (max-width:760px){
  /* mobile minimal: banner ~60% opacity + tiny; chyron a slim strip;
     floats smaller — the fight must stay ≥85% unobscured at ALL times */
  body.textmin #bannerWrap{opacity:.6}
  body.textmin #banner{padding:3px 10px}
  body.textmin #banner .bTop{display:none}
  body.textmin #banner .bMain{font-size:clamp(10px,3.8vw,15px)}
  body.textmin #chyron{font-size:9.5px;padding:4px 9px;width:min(76vw,420px);opacity:0}
  body.textmin #chyron.on{opacity:.8}
  body.textmin .wlbl.float{font-size:10px!important}
}
@keyframes bannerBurn{0%{transform:scale(1);opacity:.84;filter:brightness(1) blur(0)}
  100%{transform:scale(1.14) translateY(-12px);opacity:0;filter:brightness(2.4) blur(5px)}}

/* ── dev panel ────────────────────────────────────────────── */
#devPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;z-index:60;
  background:rgba(5,7,16,.96);border:1px solid var(--gold);padding:14px 16px;width:min(94vw,540px);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
#devPanel.on{display:block}
#devPanel h3{font-size:11px;letter-spacing:.3em;color:var(--gold);margin-bottom:10px;font-style:italic}
.devGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.devGrid .full{grid-column:1/3}
.dbtn{background:#101527;border:1px solid var(--line);color:var(--ink);font-size:10px;font-weight:700;
  letter-spacing:.06em;padding:7px 6px;border-radius:3px;font-family:var(--mono)}
.dbtn:hover{border-color:#fff}
.dbtn.t{border-left:3px solid var(--tr)}.dbtn.m{border-left:3px solid var(--mu)}.dbtn.g{border-left:3px solid var(--gold)}
#devPanel .note{font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:9px;line-height:1.5}

/* ── battle-moment modal ──────────────────────────────────── */
#mmWrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,3,8,.8);z-index:70}
#mmWrap.on{display:flex}
#mmBox{background:var(--panel);border:1px solid var(--gold);padding:14px;max-width:min(94vw,760px)}
#mmCv{width:100%;display:block;border:1px solid var(--line)}
#mmBtns{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}
#mmBtns a,#mmBtns button{background:linear-gradient(180deg,#ffc93c,#d99e00);color:#241a00;border:0;font-weight:900;
  font-style:italic;letter-spacing:.1em;font-size:12px;padding:9px 18px;text-decoration:none;border-radius:3px;font-family:var(--disp)}
#mmBtns button{background:#1a2138;color:var(--ink)}

/* ── audio-arming pill (sound defaults ON, browsers need a gesture) ── */
#armPill{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;
  background:rgba(40,30,0,.92);border:1px solid var(--gold);color:#ffe9a3;
  font-size:11px;font-weight:900;font-style:italic;letter-spacing:.18em;padding:8px 18px;
  border-radius:20px;animation:armPulse 1.4s infinite;pointer-events:none;z-index:46;
  text-shadow:0 0 8px rgba(255,201,60,.6)}
#armPill.off{display:none}
@keyframes armPulse{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 rgba(255,201,60,0)}
  50%{transform:translateX(-50%) scale(1.06);box-shadow:0 0 18px rgba(255,201,60,.45)}}

/* ── war chat (bottom-left, collapsible, upgrade: chat+Q&A) ── */
#chatWrap{position:absolute;left:14px;bottom:268px;width:240px;z-index:44;pointer-events:none}
#chatHead{display:flex;gap:4px;align-items:stretch}
#chatToggle{background:var(--panel);border:1px solid var(--line);color:#9fd8a3;font-size:10px;
  font-weight:900;letter-spacing:.16em;padding:6px 12px;border-radius:3px;font-style:italic;font-family:var(--disp)}
#chatToggle:hover{border-color:#9fd8a3}
#chatPop{background:var(--panel);border:1px solid var(--line);color:#9fd8a3;font-size:12px;
  padding:0 9px;border-radius:3px;line-height:1}
#chatPop:hover{border-color:#9fd8a3}
#chatBody{margin-top:6px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;
  height:218px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
#chatWrap.closed #chatBody{display:none}
/* short screens: shrink the chat so the feed keeps real estate */
@media (max-height:880px){
  :root{--chatSpace:466px}
  #chatBody{height:144px}
}
#chatMsgs{flex:1;overflow:hidden;padding:6px 8px;display:flex;flex-direction:column;justify-content:flex-end}
.cmsg{font-family:var(--mono);font-size:10px;line-height:1.35;margin-top:3px;color:#cdd6ea;
  animation:feedIn .25s cubic-bezier(.2,1.4,.4,1);word-break:break-word}
.cmsg .cu{font-weight:700;color:#8fa2c4}
.cmsg.t .cu{color:#ffb3a7}.cmsg.m .cu{color:#b9e6ff}
.cmsg.you .cu{color:#9fd8a3}
.cmsg.ans{background:rgba(44,32,0,.6);border-left:2px solid var(--gold);padding:3px 6px;color:#ffe9a3}
.cmsg.ans .cu{color:var(--gold)}
/* boss speech mirrored into chat (owner round 4): side-colored, distinct bg */
.cmsg.boss{padding:4px 7px;border-radius:3px}
.cmsg.boss.t{background:rgba(122,20,8,.5);border-left:2px solid var(--gold);color:#ffd9d2}
.cmsg.boss.t .cu{color:var(--gold)}
.cmsg.boss.m{background:rgba(11,31,82,.6);border-left:2px solid var(--cy);color:#d5efff}
.cmsg.boss.m .cu{color:var(--cy)}
.cmsg.sys{color:#ff8d80}
.cmsg.sys .cu{color:#ff8d80}
#chatIn{display:flex;border-top:1px solid var(--line)}
#chatIn input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);
  font-family:var(--mono);font-size:11px;padding:8px 8px}
#chatIn input::placeholder{color:#5a6684}
#chatIn button{background:#1a2138;border:0;border-left:1px solid var(--line);color:var(--gold);
  font-size:11px;padding:0 12px;font-weight:900;font-family:var(--disp)}

/* ── side stamp: BUY COMBO + demoted moments (director-owned; sits at the
      side so it NEVER stacks on the center banner) ─────────── */
#stamp{position:absolute;left:31%;top:25%;transform:translate(-50%,-50%) rotate(-7deg) scale(0);
  font-size:clamp(20px,2.6vw,42px);font-weight:900;font-style:italic;letter-spacing:.02em;white-space:nowrap;
  padding:5px 18px;border:4px solid currentColor;border-radius:9px;pointer-events:none;opacity:0;z-index:30;
  -webkit-text-stroke:1px rgba(0,0,0,.3);font-family:var(--disp)}
#stamp.small{font-size:clamp(13px,1.6vw,24px);border-width:2px;padding:3px 12px}
#stamp.m{left:69%}
#stamp.t{color:var(--tr);text-shadow:0 0 18px rgba(255,75,62,.9);box-shadow:0 0 34px rgba(255,75,62,.4),inset 0 0 26px rgba(255,75,62,.25)}
#stamp.m{color:var(--mu);text-shadow:0 0 18px rgba(55,182,255,.9);box-shadow:0 0 34px rgba(55,182,255,.4),inset 0 0 26px rgba(55,182,255,.25)}
#stamp.g{color:var(--gold);text-shadow:0 0 18px rgba(255,201,60,.9);box-shadow:0 0 34px rgba(255,201,60,.4),inset 0 0 26px rgba(255,201,60,.25)}
#stamp.show{animation:stampSlam .32s cubic-bezier(.2,1.5,.4,1) forwards}
#stamp.out{animation:stampOut .4s ease-in forwards}
@keyframes stampSlam{0%{opacity:0;transform:translate(-50%,-50%) rotate(4deg) scale(2.4)}
  100%{opacity:.92;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}}
@keyframes stampOut{to{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1.12)}}

/* ── dev volume dial ──────────────────────────────────────── */
.dvol{opacity:.6}
.dvol.on{opacity:1;border-color:var(--gold)!important;color:var(--gold)}

/* ── mobile ───────────────────────────────────────────────── */
#buyBar{display:none}
@media (max-width:760px){
  #meters{display:none}
  /* COMPACT KILLFEED (owner iPhone re-test): demoted moments live HERE now,
     not in center banners/stamps — tiny, translucent, top-left, ~4 rows */
  #feed{display:block;left:6px;top:118px;width:148px;max-height:92px;opacity:.85}
  #feedTitle{display:none}
  .fitem{font-size:8px;line-height:1.25;padding:2px 5px;margin-bottom:2px;border-left-width:2px;
    background:rgba(5,7,16,.55);border-radius:2px}
  #genPanel{display:none}
  #chatWrap{display:none}
  /* center banners: rarer (director), smaller + more transparent here */
  #bannerWrap{opacity:.68}
  #banner{padding:6px 16px}
  #banner .bTop{font-size:7px;letter-spacing:.34em}
  #banner .bMain{font-size:clamp(14px,5.4vw,24px)}
  #banner .bSub{display:none}
  /* side stamps: rate-limited (director) + much smaller */
  #stamp{font-size:clamp(13px,4vw,20px);border-width:2px;padding:3px 10px}
  #stamp.small{font-size:clamp(10px,3.2vw,15px);border-width:1px;padding:2px 8px}
  .chip{bottom:88px;width:46vw;padding:7px 9px}
  .chip .buy{display:none}
  .chipPx{font-size:15px}
  .chipStats{font-size:8.5px}
  .chipHold{font-size:8px}
  /* speech-plate round: chyron + arm pill step up so the boss plates fit
     between chip top (~y-218) and the chyron strip */
  #chyron{bottom:262px;font-size:11px;width:min(92vw,660px)}
  #armPill{bottom:312px;font-size:9px;padding:6px 12px}
  #scoreRow{font-size:38px}
  #warTitle{display:none}
  #topHud{padding-top:44px}
  #buyBar{display:flex;position:absolute;left:0;right:0;bottom:0;gap:8px;padding:9px 10px 12px;
    background:linear-gradient(0deg,rgba(3,4,10,.95),rgba(3,4,10,0));z-index:45}
  #buyBar .buy{flex:1;margin-top:0;font-size:14px;padding:12px 0}
  #simBadge{font-size:7.5px;top:6px;left:6px;padding:3px 5px;letter-spacing:.1em;max-width:44vw}
  #ctrls{top:6px;right:6px;gap:3px}
  .cbtn{width:27px;height:26px;font-size:11px}
  .cbtn.wide{max-width:27px;padding:0 5px;overflow:hidden;white-space:nowrap;justify-content:flex-start;letter-spacing:4px}
}

/* ════ twm3d additions: WebGL canvas, DOM label layer, FX overlays ════ */
#field{cursor:grab}
#field.drag{cursor:grabbing}
#labels{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.wlbl{position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none;white-space:nowrap}
.wlbl.float{font:900 italic 15px var(--disp);color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,.9),0 2px 2px rgba(0,0,0,.8),0 0 14px currentColor}
.wlbl.bubble{font:900 13px var(--disp);color:#10131c;background:#fff;border:2px solid #888;
  border-radius:9px;padding:3px 9px;transform-origin:50% 100%;
  max-width:330px;white-space:normal;text-align:center;line-height:1.25}
.wlbl.bubble::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-5px;
  border:5px solid transparent;border-top-color:#fff}
.wlbl.bubble.t{border-color:#c81e0e}
.wlbl.bubble.m{border-color:#1e6ac8}
.wlbl.bubble.big{font-size:17px;padding:5px 13px;border-width:3px}
.fxo{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0}
#fxFlash{background:#fff0dc}
#fxWhite{background:#fffaee;z-index:9}
#fxRageT{background:radial-gradient(ellipse at center,rgba(255,50,30,.0) 40%,rgba(255,50,30,.9) 100%)}
#fxRageM{background:radial-gradient(ellipse at center,rgba(40,140,255,.0) 40%,rgba(40,140,255,.9) 100%)}
#fxFrenzy{background:radial-gradient(ellipse at center,rgba(255,110,30,0) 55%,rgba(255,60,20,.55) 100%)}
#devPerf{border-top:1px dashed rgba(255,255,255,.14);margin-top:6px;padding-top:6px;color:#7fd4ff!important}

/* ════ phase C additions ═══════════════════════════════════════════════ */

/* ── cinematic letterbox bars (kill-cams) ── */
#letterbox{position:fixed;inset:0;pointer-events:none;z-index:7}
#letterbox i{position:absolute;left:0;right:0;height:9vh;background:#000;display:block;
  transition:transform .45s cubic-bezier(.3,.9,.3,1)}
#letterbox .lbT{top:0;transform:translateY(-101%)}
#letterbox .lbB{bottom:0;transform:translateY(101%)}
#letterbox.on .lbT,#letterbox.on .lbB{transform:none}

/* ── 🔮 prophecy widget: 🔮 button in the chat header + floating popover ── */
#proToggle{background:var(--panel);border:1px solid var(--line);color:#c9b3ff;font-size:12px;
  padding:0 9px;border-radius:3px;line-height:1}
#proToggle:hover,#proToggle.live{border-color:#c9b3ff}
#proToggle.live{color:#e6d7ff;box-shadow:0 0 10px rgba(138,92,255,.45)}
#proWrap{display:none;position:absolute;left:14px;bottom:300px;width:240px;z-index:52;
  background:rgba(8,7,20,.97);border:1px solid #7a5cff;padding:10px 11px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
#proWrap.on{display:block}
#proHead{font-size:11px;letter-spacing:.2em;color:#c9b3ff;font-style:italic;font-weight:900;margin-bottom:7px}
#proHead span{color:#ffd75e;letter-spacing:.05em}
#proQ{font-size:10px;font-weight:900;letter-spacing:.1em;color:#e6d7ff;font-style:italic;text-align:center}
#proPick{display:flex;gap:6px;margin-top:6px}
#proPick button{flex:1;font-size:10px;font-weight:900;font-style:italic;padding:7px 0;border-radius:4px;border:0;color:#fff;
  font-family:var(--disp);letter-spacing:.06em}
#proT{background:linear-gradient(180deg,#ff6a3e,#c81e0e)}
#proM{background:linear-gradient(180deg,#37b6ff,#1e51c8)}
#proPick button:hover{filter:brightness(1.25)}
#proState{font-family:var(--mono);font-size:9.5px;color:#cdd6ea;margin-top:6px;text-align:center;min-height:12px}
#proState.hit{color:#43e97b;font-weight:700}
#proState.miss{color:#ff5f6d;font-weight:700}
#proStats{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:4px;text-align:center}
#proStats b{color:#e6d7ff}
#proShare{display:none;width:100%;margin-top:6px;background:linear-gradient(180deg,#7a5cff,#4b2ea8);border:0;color:#fff;
  font-size:9.5px;font-weight:900;font-style:italic;letter-spacing:.08em;padding:6px 0;border-radius:4px;font-family:var(--disp)}
#proShare:hover{filter:brightness(1.2)}

/* ── 📜 war records board (right rail, under generals) ── */
#recPanel{position:absolute;right:14px;top:clamp(158px,22vh,214px);width:236px;text-align:right;z-index:29}
/* generals panel open → records rail steps down out of its way */
#genPanel:not(.closed)+#recPanel{top:calc(clamp(120px,17vh,170px) + 344px)}
#recToggle{background:var(--panel);border:1px solid var(--line);color:#ffd75e;font-size:10px;
  font-weight:900;letter-spacing:.18em;padding:6px 12px;border-radius:3px;font-style:italic;font-family:var(--disp)}
#recToggle:hover{border-color:var(--gold)}
#recBody{margin-top:6px;background:var(--panel);border:1px solid var(--line);padding:7px 9px;text-align:left;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  overflow-y:auto;max-height:calc(100vh - clamp(158px,22vh,214px) - 290px)}
#recPanel.closed #recBody{display:none}
/* records rail pushed down by an open generals rail: clamp harder */
#genPanel:not(.closed)+#recPanel #recBody{max-height:calc(100vh - clamp(120px,17vh,170px) - 344px - 290px)}
/* short screens can't fit both open rails over the chip — records yields */
@media (max-height:820px){#genPanel:not(.closed)+#recPanel{display:none}}
.recRow{display:grid;grid-template-columns:14px 1fr auto;grid-template-rows:auto auto;gap:0 6px;
  font-family:var(--mono);padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.recRow:last-child{border-bottom:0}
.recRow .ri{grid-row:1/3;font-size:11px;align-self:center}
.recRow .rn{font-size:8px;letter-spacing:.1em;color:var(--dim)}
.recRow .rv{grid-column:2/4;font-size:10.5px;color:#ffe9a3;font-weight:700}
.recRow .rt{font-size:8px;color:#5a6684;justify-self:end;grid-row:1;grid-column:3}

/* ── 🪖 enlist ── */
#btnEnlist{background:var(--panel);border:1px solid var(--line);color:#ffd75e;font-size:9px;
  font-weight:900;letter-spacing:.02em;padding:6px 6px;border-radius:3px;font-style:italic;font-family:var(--disp);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84px;flex:0 1 auto}
#chatHead{flex-wrap:nowrap}
#chatToggle{white-space:nowrap;flex:0 0 auto}
#btnEnlist:hover{border-color:var(--gold)}
#enlistBox{display:none;position:absolute;left:14px;bottom:300px;width:240px;z-index:52;
  background:rgba(5,7,16,.97);border:1px solid var(--gold);padding:12px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
#enlistBox.on{display:block}
#enlistBox h4{font-size:11px;letter-spacing:.2em;color:var(--gold);font-style:italic;margin-bottom:8px}
#enName{width:100%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);color:var(--ink);
  font:700 12px var(--mono);padding:8px 9px;border-radius:4px;outline:0}
#enName:focus{border-color:var(--gold)}
#enSides{display:flex;gap:6px;margin-top:8px}
#enSides button{flex:1;font-size:9.5px;font-weight:900;font-style:italic;padding:8px 0;border-radius:4px;border:0;color:#fff;
  font-family:var(--disp)}
#enT{background:linear-gradient(180deg,#ff6a3e,#c81e0e)}
#enM{background:linear-gradient(180deg,#37b6ff,#1e51c8)}
#enSides button:hover{filter:brightness(1.25)}
#enNote{font-family:var(--mono);font-size:8.5px;color:var(--dim);margin-top:8px;line-height:1.5}
#enClose{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--dim);font-size:12px}
#enClose:hover{color:#fff}

/* ── 📰 war report toast ── */
#reportToast{position:absolute;left:50%;transform:translateX(-50%);top:120px;z-index:52;
  display:flex;align-items:center;gap:10px;background:rgba(40,30,0,.95);border:1px solid var(--gold);
  color:#ffe9a3;font-size:11px;font-weight:900;font-style:italic;letter-spacing:.1em;padding:9px 14px;border-radius:6px;
  pointer-events:auto;animation:armPulse 2s infinite}
#reportToast button{background:linear-gradient(180deg,#ffc93c,#d99e00);border:0;color:#241a00;font-weight:900;
  font-size:10px;padding:5px 12px;border-radius:3px;font-family:var(--disp);font-style:italic}
#reportToast #reportDismiss{background:#1a2138;color:var(--ink)}

/* ── stream mode (?view=stream): OBS/restream layout ── */
#wm,#livePulse{display:none}
body.stream #wm{display:block;position:fixed;right:18px;bottom:14px;z-index:60;pointer-events:none;
  font:900 italic 15px var(--disp);color:rgba(238,243,255,.82);letter-spacing:.06em;
  text-shadow:0 0 12px rgba(0,0,0,.9),0 1px 3px #000}
body.stream #wm b{color:var(--gold)}
body.stream #livePulse{display:flex;align-items:center;gap:7px;position:fixed;top:14px;right:18px;z-index:60;
  pointer-events:none;font:900 11px var(--disp);letter-spacing:.3em;color:#ffb3b3;
  background:rgba(5,7,16,.7);border:1px solid rgba(255,80,80,.5);padding:5px 11px;border-radius:14px}
body.stream #livePulse i{width:8px;height:8px;border-radius:50%;background:#ff3b30;
  animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.7);opacity:1}
  50%{box-shadow:0 0 0 7px rgba(255,59,48,0);opacity:.55}}
body.stream #chatWrap,body.stream #proWrap,body.stream #enlistBox,body.stream .chip,
body.stream #buyBar,body.stream #social,body.stream #ctrls,body.stream #armPill,
body.stream #genPanel,body.stream #recPanel,body.stream #devPanel,body.stream #reportToast,
body.stream .plate{display:none!important}   /* OBS chrome stays minimal — the chyron echoes boss lines */
body.stream #topHud{transform:translateX(-50%) scale(1.12);transform-origin:top center}
body.stream #feed{top:auto;bottom:96px;left:18px;width:260px}
body.stream #chyron{bottom:18px}
body.stream #simBadge{top:auto;bottom:14px;left:18px;z-index:60}
body.stream.nocursor,body.stream.nocursor *{cursor:none!important}
/* pure-battlefield variant: ?view=stream&nohud=1 → watermark only */
body.stream.nohud #hud,body.stream.nohud #labels,body.stream.nohud #livePulse{display:none!important}

/* mobile: hide the new rails like their siblings */
@media (max-width:760px){
  #proWrap,#recPanel,#enlistBox{display:none}
}

/* ── SPEECH PLATES (speech.ts) — the single dialogue surface. Compact,
   corner-docked, side-colored, small type; bottom offset + max-height +
   line-clamp are written by speech.ts from the measured HUD rects so a
   plate can never cover a panel or the battlefield center. ── */
.plate{position:absolute;bottom:230px;width:clamp(196px,17vw,250px);z-index:32;pointer-events:none;
  background:rgba(5,7,16,.88);border:1px solid var(--line);padding:5px 8px 6px;overflow:hidden;
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.plate.on{opacity:1;transform:none}
.plate .pWho{display:block;font:900 8px var(--disp);letter-spacing:.14em;margin-bottom:2px;font-style:italic}
.plate .pTx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font:700 9px var(--mono);line-height:1.3;color:#dfe7f7;white-space:normal;word-break:break-word}
.plate.t{left:14px;border-left:3px solid var(--tr)}
.plate.t .pWho{color:#ffb3a7}
.plate.m{right:14px;border-right:3px solid var(--mu);text-align:right}
.plate.m .pWho{color:#b9e6ff}
.plate.n{left:50%;transform:translateX(-50%) translateY(6px);width:min(38vw,460px);text-align:center;
  border-bottom:2px solid #566;background:rgba(5,7,16,.8)}
.plate.n.on{transform:translateX(-50%)}
.plate.n .pWho{color:#9aa7c4}
.plate.n.tt .pWho{color:#ffb3a7}
.plate.n.mm .pWho{color:#b9e6ff}
@media (max-width:760px){
  /* mobile: boss plates tiny above the chips; troop plate OFF (speech.ts
     also gates it). chyron + arm pill step up one slot to clear them. */
  .plate{width:46vw;padding:3px 6px 4px}
  .plate .pWho{font-size:7px;margin-bottom:1px}
  .plate .pTx{font-size:8px;line-height:1.25;-webkit-line-clamp:2}
  .plate.t{left:6px}
  .plate.m{right:6px}
  .plate.n{display:none}
}

/* hero nametag over the enlisted soldier */
.wlbl.heroTag{font:900 13px var(--disp);color:#ffe9a3;background:rgba(5,7,16,.78);
  border:1px solid rgba(255,201,60,.55);border-radius:10px;padding:2px 9px;
  text-shadow:0 1px 2px #000;letter-spacing:.04em}
.wlbl.heroTag.t{border-color:rgba(255,75,62,.7)}
.wlbl.heroTag.m{border-color:rgba(55,182,255,.7)}
#devPerf{white-space:pre-line}

/* ── MOBILE WORLD-LABEL TEXT DIET (owner iPhone re-test) — LAST so it
   outranks every base .wlbl rule above; !important beats the inline
   float sizing labels.ts writes. labels.ts also caps phones at 2 live
   bubbles. ── */
@media (max-width:760px){
  .wlbl.bubble{font-size:9.5px!important;max-width:180px;padding:2px 7px;border-width:1.5px;border-radius:6px}
  .wlbl.bubble.big{font-size:11px!important;padding:3px 8px;border-width:2px}
  .wlbl.bubble::after{border-width:4px;bottom:-7px}
  .wlbl.float{font-size:11px!important}
  .wlbl.heroTag{font-size:10px!important}
}

/* ════ §CONTENT ENGINE (content.ts) — share toast + WAR ROOM ═══════════
   RECT DISCIPLINE: #wrDock is anchored into the one column that is free
   at 1700×960 / 1366×768 / 1024×768 / 390×844 — LEFT under the SIMULATED
   badge on desktop (the killfeed starts at ~154px), RIGHT under the
   control cluster on phones (where the score row + killfeed leave a clean
   gutter). The dock is height-capped so an open toast can never reach the
   panel below it. Audited by scripts/p4_rects.js as group 'warroom'.  ══ */
#wrDock{position:absolute;left:14px;top:50px;width:238px;z-index:53;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none}
#wrBtn{background:var(--panel);border:1px solid var(--line);color:var(--gold);font-size:9.5px;
  font-weight:900;letter-spacing:.18em;padding:5px 10px;border-radius:3px;font-style:italic;
  font-family:var(--disp);display:flex;align-items:center;gap:6px;line-height:1.2}
#wrBtn:hover{border-color:var(--gold)}
#wrCount{font-style:normal;font-size:8.5px;background:var(--gold);color:#241a00;border-radius:8px;
  padding:0 5px;font-weight:900;font-family:var(--mono);min-width:0}
#wrCount:empty{display:none}

#shareToast{display:none;width:100%;background:linear-gradient(180deg,rgba(16,20,38,.96),rgba(6,8,18,.97));
  border:1px solid rgba(255,201,60,.55);border-left:3px solid var(--gold);border-radius:4px;
  padding:5px 6px;flex-direction:column;gap:4px;pointer-events:auto;
  box-shadow:0 6px 22px rgba(0,0,0,.6);animation:stIn .28s ease-out}
#shareToast.on{display:flex}
@keyframes stIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#shareToast .stTop{display:flex;gap:7px;align-items:center}
#stThumb{width:68px;height:38px;object-fit:cover;border:1px solid var(--line);border-radius:2px;flex:none}
#shareToast .stTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
#shareToast .stTitle{font:900 8px var(--disp);letter-spacing:.14em;color:var(--gold);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stTag{font:700 7px var(--mono);letter-spacing:.08em;color:var(--deep,#5a6684);color:#5a6684;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stHead{font:900 9.5px var(--disp);font-style:italic;letter-spacing:.02em;color:var(--ink);line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#shareToast .stB{display:flex;flex-direction:row;gap:4px}
#shareToast .stB button{font:900 8px var(--disp);font-style:italic;letter-spacing:.06em;
  background:linear-gradient(180deg,#ffc93c,#d99e00);color:#241a00;border:0;border-radius:2px;padding:4px 6px;
  white-space:nowrap;line-height:1.1;flex:1}
#shareToast .stB #stMore,#shareToast .stB #stX{background:#1a2138;color:var(--dim);font-size:8px;flex:none;padding:4px 8px}
#shareToast .stB button:hover{filter:brightness(1.15)}

/* WAR ROOM modal — centered overlay, same family as the battle-moment box */
#wrWrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(2,3,8,.82);z-index:72}
#wrWrap.on{display:flex}
#wrBox{background:var(--panel);border:1px solid var(--gold);padding:12px 14px 10px;
  width:min(94vw,640px);max-height:min(86vh,640px);display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
#wrHead{font:900 italic 13px var(--disp);letter-spacing:.16em;color:var(--gold);
  display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#wrHead span{color:var(--dim);font-size:9px;letter-spacing:.14em;flex:1}
#wrClose{margin-left:auto;background:#1a2138;color:var(--ink);border:0;border-radius:3px;
  font:900 11px var(--disp);padding:4px 10px}
#wrClose:hover{background:#2a3352}
#wrList{overflow-y:auto;margin-top:8px;flex:1;min-height:60px}
.wrRow{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px dashed rgba(255,255,255,.08)}
.wrRow:last-child{border-bottom:0}
.wrRow.t{border-left:3px solid var(--tr)}.wrRow.m{border-left:3px solid var(--mu)}
.wrRow.n{border-left:3px solid var(--gold)}
.wrTh{width:104px;height:59px;object-fit:cover;border:1px solid var(--line);flex:none;border-radius:2px}
.wrTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wrTx .wrTag{font:700 8px var(--mono);letter-spacing:.12em;color:var(--gold)}
.wrTx b{font:900 italic 12px var(--disp);color:var(--ink);letter-spacing:.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wrTx .wrSub{font:700 9px var(--mono);color:var(--dim)}
.wrBtns{display:flex;flex-direction:column;gap:4px;flex:none}
.wrBtns button{font:900 8.5px var(--disp);font-style:italic;letter-spacing:.08em;border:0;border-radius:2px;
  padding:5px 9px;background:linear-gradient(180deg,#ffc93c,#d99e00);color:#241a00;white-space:nowrap}
.wrBtns .wrCp{background:#1a2138;color:var(--ink)}
.wrBtns button:hover{filter:brightness(1.18)}
.wrEmpty{font:700 9.5px var(--mono);color:var(--dim);line-height:1.7;padding:18px 6px;text-align:center}
#wrNote{font:700 8.5px var(--mono);color:var(--deep,#5a6684);line-height:1.6;margin-top:8px;
  padding-top:7px;border-top:1px solid var(--line);color:#5a6684}

/* 📸 SHARE PANEL — preview + pre-written copy + the two exports.
   Opens only on a deliberate action; on a phone it becomes a bottom
   sheet so the thumb-reachable half of the screen holds the buttons. */
#shWrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(2,3,8,.86);z-index:74}
#shWrap.on{display:flex}
#shBox{background:var(--panel);border:1px solid var(--gold);padding:12px 14px 10px;
  width:min(94vw,560px);max-height:92vh;display:flex;flex-direction:column;gap:8px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
#shHead{font:900 italic 13px var(--disp);letter-spacing:.16em;color:var(--gold);
  display:flex;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line)}
#shClose{margin-left:auto;background:#1a2138;color:var(--ink);border:0;border-radius:3px;
  font:900 11px var(--disp);padding:4px 10px}
#shClose:hover{background:#2a3352}
#shPrev{background:#04050c;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;overflow:hidden;flex:0 1 auto;min-height:0}
#shImg{max-width:100%;max-height:34vh;object-fit:contain;display:block}
#shSizes{display:flex;gap:6px}
#shSizes button{flex:1;font:900 8.5px var(--disp);font-style:italic;letter-spacing:.1em;border:1px solid var(--line);
  border-radius:2px;padding:5px 6px;background:#141a2c;color:var(--dim)}
#shSizes button.on{background:linear-gradient(180deg,#2a3352,#1a2138);color:var(--gold);border-color:var(--gold)}
#shText{width:100%;height:112px;resize:none;background:#0a0e1c;border:1px solid var(--line);
  color:var(--ink);font:700 10.5px var(--mono);line-height:1.55;padding:8px;border-radius:2px}
#shBtns{display:flex;gap:6px}
#shBtns button,#shBtns a{flex:1;text-align:center;text-decoration:none;font:900 9.5px var(--disp);font-style:italic;
  letter-spacing:.08em;border:0;border-radius:2px;padding:9px 6px;
  background:linear-gradient(180deg,#ffc93c,#d99e00);color:#241a00;white-space:nowrap}
#shBtns #shCopy{background:#1a2138;color:var(--ink)}
#shBtns #shX{background:linear-gradient(180deg,#20283f,#0d1120);color:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
#shBtns button:hover,#shBtns a:hover{filter:brightness(1.18)}
#shNote{font:700 8px var(--mono);color:#5a6684;line-height:1.5}

/* stream mode keeps the OBS capture clean */
body.stream #wrDock,body.stream #wrWrap,body.stream #shWrap{display:none!important}

/* phones: the dock moves to the right gutter (the killfeed owns the left) */
@media (max-width:760px){
  #wrDock{left:auto;right:6px;top:116px;width:min(238px,47vw);align-items:flex-end}
  #wrBtn{font-size:8px;letter-spacing:.12em;padding:4px 7px}
  #stThumb{width:54px;height:30px}
  #shareToast{padding:4px 5px;gap:3px}
  #shareToast .stTitle{font-size:7px}
  #stTag{display:none}
  #stHead{font-size:8px;-webkit-line-clamp:2}
  #shareToast .stB button{font-size:7px;padding:3px 4px}
  .wrTh{width:74px;height:42px}
  #wrBox{padding:10px}
  /* share panel → bottom sheet: preview on top, actions under the thumb */
  #shWrap{align-items:flex-end}
  #shBox{width:100vw;max-width:100vw;padding:10px 10px 12px;gap:6px;max-height:94vh;clip-path:none;
    border-left:0;border-right:0;border-bottom:0}
  #shImg{max-height:26vh}
  #shText{height:88px;font-size:10px}
  #shSizes button{font-size:8px}
  #shBtns{flex-wrap:wrap}
  #shBtns button,#shBtns a{padding:11px 6px;font-size:9px;flex:1 1 30%}
}

/* ── GAME-NAV-LINKS ── always-available exits: HOME + MARKETING KIT ── */
#social #homeLink{border-color:rgba(255,209,92,.5);color:#ffd15c}
#social #homeLink:hover{border-color:#ffd15c;background:rgba(255,209,92,.14)}
#social #kitLink{border-color:rgba(255,209,92,.5);color:#ffd15c}
#social #kitLink:hover{border-color:#ffd15c;background:rgba(255,209,92,.14)}
@media (max-width:760px){
  /* phones: keep both exits visible as icon chips with real tap targets */
  #social{display:flex!important;flex-direction:row;gap:6px;right:8px;bottom:auto;top:56px;
          z-index:60;pointer-events:auto}
  #social a{min-width:40px;min-height:32px;display:inline-flex;align-items:center;
            justify-content:center;padding:6px 9px;font-size:12px}
  #social #homeLink,#social #kitLink{background:rgba(10,14,21,.86)}
  #social .sL,#social .kL{display:none}
  #social #homeLink .sL{display:inline;font-size:10px;letter-spacing:.06em}
  #social #kitLink  .kL{display:none}
}

/* ══════════ NAV-V2 (2026-08-12) ══════════════════════════════════════
   The site links used to be a wide row pinned under the control cluster.
   With HOME + UPDATES added it reached across the MUSK score column on
   desktop, and the phone rule sat it directly on the score row. They now
   live in ONE dropdown anchored to the top-right corner, so they occupy
   zero battlefield real-estate until asked for. Audited by qa/rects.js. */
#navBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 12px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,209,92,.16),rgba(255,169,43,.10));
  border:1px solid rgba(255,209,92,.62);color:#ffd15c;
  font:900 11px/1 Consolas,Menlo,monospace;letter-spacing:.14em;
  text-shadow:0 0 10px rgba(255,201,60,.45);transition:.15s;flex:0 0 auto}
#navBtn:hover,#navBtn.on{background:rgba(255,209,92,.26);border-color:#ffd15c;color:#fff}
#navBtn .nbT{display:inline}
#navBtn.hint{animation:navHint 1.5s ease-in-out 3}
@keyframes navHint{0%,100%{box-shadow:0 0 0 rgba(255,201,60,0)}
  50%{box-shadow:0 0 0 4px rgba(255,201,60,.22),0 0 18px rgba(255,201,60,.4)}}

#social{position:absolute!important;top:50px!important;right:10px!important;
  left:auto!important;bottom:auto!important;z-index:70!important;
  display:none!important;flex-direction:column!important;align-items:stretch!important;
  gap:6px!important;width:230px!important;padding:9px!important;border-radius:13px!important;
  background:linear-gradient(180deg,rgba(12,16,30,.975),rgba(5,7,15,.985))!important;
  border:1px solid rgba(255,209,92,.34)!important;
  box-shadow:0 20px 56px rgba(0,0,0,.62)!important;pointer-events:auto!important;
  backdrop-filter:blur(8px)}
#social.on{display:flex!important}
#social a{width:100%!important;min-height:42px!important;justify-content:flex-start!important;
  gap:10px!important;padding:10px 12px!important;border-radius:9px!important;
  font:800 11px/1.2 Consolas,Menlo,monospace!important;letter-spacing:.09em!important;
  background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.12)!important;
  color:#dbe4f4!important;backdrop-filter:none!important}
#social a:hover{background:rgba(255,255,255,.11)!important;border-color:#fff!important;color:#fff!important}
#social a .sL,#social a .kL{display:inline!important;font-size:11px!important;letter-spacing:.09em!important}
#social #homeLink,#social #kitLink{border-color:rgba(255,209,92,.5)!important;color:#ffd15c!important}
#social #homeLink:hover,#social #kitLink:hover{background:rgba(255,209,92,.15)!important;border-color:#ffd15c!important}
/* click-catcher so the panel closes when the battlefield is clicked */
#navScrim{position:absolute;inset:0;z-index:69;display:none}
#navScrim.on{display:block}

@media (max-width:760px){
  #navBtn{height:26px;padding:0 8px;font-size:9.5px;letter-spacing:.1em}
  #navBtn .nbT{display:none}
  #social{top:38px!important;right:6px!important;width:min(230px,64vw)!important;
    padding:7px!important;gap:5px!important;z-index:70!important}
  #social a{min-height:44px!important;font-size:11px!important;padding:11px 12px!important}
  /* the badge shares the top strip with the control cluster on phones */
  #simBadge{max-width:calc(100vw - 250px);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;font-size:7px}
}
/* the mid-width label-stripping rules no longer apply — the links are in a
   panel now and always carry their full text */
@media (min-width:761px) and (max-width:1460px){
  #social a .sL,#social .kL{display:inline!important}
  #social a{padding:10px 12px!important}
}
/* Tablet/small-laptop widths: the labelled BATTLE MOMENT button made the
   right cluster so wide that the centred scoreboard had to shift left to
   avoid it. Collapse it to its icon here (title tooltip keeps the name)
   and the scoreboard stays dead-centre. */
@media (max-width:1300px){
  #ctrls .cbtn.wide{width:32px;max-width:32px;padding:0;justify-content:center;
    overflow:hidden;font-size:0;letter-spacing:0}
  #ctrls .cbtn.wide::before{content:'\1F4F8';font-size:13px}
}
@media (max-width:760px){
  #ctrls .cbtn.wide{width:27px;max-width:27px}
  #ctrls .cbtn.wide::before{font-size:11px}
}
body.stream #navBtn,body.stream #social,body.stream #navScrim{display:none!important}


/* ══ MOBILE BOTTOM STACK ═════════════════════════════════════════════════
   Four bottom-anchored layers used to carry independent fixed offsets, so
   fixing one collision created the next. They now read their position from
   variables solved at runtime against the measured height of the layer
   below (see BOTTOM-STACK in index.html). The fallbacks are only used if
   the script has not run yet. */
@media (max-width:760px){
  .plate   { bottom: var(--plateBottom,  244px) !important; z-index: 46 !important; }
  #chyron  { bottom: var(--chyronBottom, 300px) !important; }
  #armPill { bottom: var(--armBottom,    348px) !important; }
}