/* Exact CSS gaps: 5px between controls, rows, recall and pause. */
html body.portfolio-redesign.reinforcement-panel-v1:not(.normal-ui) .stage .army-side,body.reinforcement-panel-v1 .stage .army-side{display:none!important}
html body.reinforcement-panel-v1 .stage #reinforcementToggle[hidden]{display:none!important}
#reinforcementPanel[hidden]{display:none!important}
#reinforcementPanel{position:absolute;left:52px;top:116px;width:clamp(180px,18vw,260px);z-index:15;display:none;gap:5px;font-family:F1Barlow,system-ui,sans-serif}
#reinforcementPanel.rf-open{display:grid}
#reinforcementPanel .rf-side{display:grid;gap:5px;min-width:0}
#reinforcementPanel .rf-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#reinforcementPanel button,#reinforcementPanel output{box-sizing:border-box;min-width:0;min-height:0;display:grid;place-items:center;padding:4px;aspect-ratio:1;border:3px ridge #b2c4d5;border-radius:8px;background:linear-gradient(135deg,#164d74,#031c35 65%,#006eac);color:#fff;box-shadow:inset 0 0 0 2px #00caff,inset 0 0 14px #008cffa8,0 2px 5px #000a;font-size:clamp(17px,2.6vw,32px);line-height:1;text-shadow:0 0 9px #9ae8ff;cursor:pointer}
#reinforcementPanel output{font-size:clamp(21px,3vw,39px);font-weight:900;cursor:default}
#reinforcementPanel svg{width:100%;height:100%;fill:#153c2a;stroke:#e4fff4;stroke-width:2.5;stroke-linejoin:round}
#reinforcementPanel .rf-deploy{position:relative;background:linear-gradient(135deg,#1a6222,#034714 65%,#11bf28);box-shadow:inset 0 0 0 2px #4bff61,inset 0 0 14px #12ff5688}
#reinforcementPanel .sell .rf-deploy{background:linear-gradient(135deg,#671c23,#4c070d 65%,#ce1425);box-shadow:inset 0 0 0 2px #ff3b42,inset 0 0 14px #ff123c88}
#reinforcementPanel .sell svg{fill:#4b191c}
#reinforcementPanel .rf-plus{position:absolute;right:1px;bottom:1px;background:#046b19;border:2px solid white;border-radius:50%;width:40%;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(17px,2.2vw,27px)}
#reinforcementPanel .sell .rf-plus{background:#a91322}
#reinforcementPanel .rf-recall{width:100%;height:46px;aspect-ratio:auto;grid-template-columns:1fr auto;font-size:15px;gap:5px;background:linear-gradient(#fb9b0a,#803500 55%,#cc6001);box-shadow:inset 0 0 0 2px #ffc52c,inset 0 0 13px #ff7a00;padding:4px 14px}
#reinforcementPanel .rf-recall svg{max-width:120px;fill:none;stroke:#fff}
#reinforcementPanel .rf-pause{height:44px;aspect-ratio:auto;width:100%;font-size:clamp(14px,1.7vw,21px);background:linear-gradient(#515f6d,#26313b);box-shadow:inset 0 0 0 2px #a7b5c3}
#reinforcementPanel .rf-pause.rf-resume{background:linear-gradient(#f4a420,#9a4800);box-shadow:inset 0 0 0 2px #ffe199}
#reinforcementPanel button:disabled{opacity:1;filter:grayscale(1) brightness(.65);cursor:default}
#reinforcementPanel button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#reinforcementPanel .rf-status{position:absolute;left:0;bottom:calc(100% + 5px);width:100%;margin:0;color:#ffdf9b;font:11px/1.4 system-ui;background:#061a29e8;border-radius:4px;padding:3px 6px;min-height:0;pointer-events:none}
#reinforcementPanel .rf-status:empty{display:none}
.stage.chart-expanded #reinforcementPanel{top:370px}
@media(max-width:700px) and (orientation:portrait),(max-width:540px){#reinforcementPanel{left:42px;top:125px;width:min(240px,calc(100% - 50px))}#reinforcementPanel button,#reinforcementPanel output{max-height:52px;font-size:22px}#reinforcementPanel .rf-recall{height:34px;font-size:12px}#reinforcementPanel .rf-pause{height:36px;font-size:16px}.stage.chart-expanded #reinforcementPanel{top:260px}}

/* Use the supplied original artwork as a CSS sprite; no regenerated icons. */
#reinforcementPanel button,#reinforcementPanel output{border:0!important;border-radius:0;padding:0;box-shadow:none!important;text-shadow:none;background-color:transparent;background-image:url("assets/r18-button-reference.png")!important;background-repeat:no-repeat;position:relative;isolation:isolate}
#reinforcementPanel .rf-deploy{background-size:656.410256% 489.952153%!important;background-position:5.606759% 3.926380%!important}
#reinforcementPanel .sell .rf-deploy{background-size:656.410256% 437.606838%!important;background-position:5.606759% 58.101266%!important}
#reinforcementPanel .rf-factor{background-size:701.369863% 489.952153%!important;background-position:24.069856% 3.926380%!important}
#reinforcementPanel .rf-up{background-size:701.369863% 489.952153%!important;background-position:41.457859% 3.926380%!important}
#reinforcementPanel .rf-down{background-size:701.369863% 489.952153%!important;background-position:58.921792% 3.926380%!important}
#reinforcementPanel .rf-recall{background-size:165.517241% 793.798450%!important;background-position:11.677632% 31.620112%!important}
#reinforcementPanel .rf-pause{background-size:163.927428% 716.083916%!important;background-position:10.851419% 97.843360%!important}
#reinforcementPanel .rf-pause.rf-resume{background-size:405.277045% 752.941176%!important;background-position:96.197061% 97.522523%!important}
#reinforcementPanel .rf-deploy svg,#reinforcementPanel .rf-plus,#reinforcementPanel .rf-recall svg,#reinforcementPanel .rf-recall>span{visibility:hidden}
#reinforcementPanel .rf-up,#reinforcementPanel .rf-down{font-size:0}
#reinforcementPanel .rf-factor{font-size:0}
#reinforcementPanel .rf-factor::after{content:'x' attr(data-factor);position:absolute;inset:24% 12% 23%;display:grid;place-items:center;background:linear-gradient(115deg,#003352,#00233d 65%,#003250);color:#fff;font:bold clamp(20px,2.5vw,36px)/1 F1Barlow,system-ui,sans-serif;text-shadow:0 0 7px #8ad7ff}
#reinforcementPanel .rf-pause,#reinforcementPanel .rf-pause.rf-resume{width:100%;height:44px;aspect-ratio:auto;box-shadow:none;background-color:transparent;border:0}
#reinforcementPanel .rf-pause-label{position:absolute;inset:18% 9%;display:grid;place-items:center;background:linear-gradient(#344451,#23303e);font:700 clamp(14px,1.7vw,21px)/1 F1Barlow,system-ui,sans-serif;color:white;white-space:nowrap}
#reinforcementPanel .rf-resume .rf-pause-label{inset:16% 10%;background:linear-gradient(#d87800,#a64a00);font-size:clamp(14px,1.7vw,21px)}
@media(max-width:700px) and (orientation:portrait),(max-width:540px){#reinforcementPanel .rf-pause,#reinforcementPanel .rf-pause.rf-resume{height:36px}#reinforcementPanel .rf-factor::after{font-size:25px}}



/* Keep the actual button as pointer target while native updates repaint labels. */
#reinforcementPanel .rf-pause-label{pointer-events:none}

html body.portfolio-redesign .stage #battlePowerBar .bp-army-data b,html body.portfolio-redesign .stage #battlePowerBar .bp-army-data small{font-size:clamp(15px,1.3vw,20px)!important;line-height:1.15!important;font-weight:800}
html body.portfolio-redesign .stage #battlePowerBar .bp-legend{display:flex;align-items:start;gap:12px!important}
html body.portfolio-redesign .stage #battlePowerBar .bp-side-summary{flex:1;min-width:0;flex-wrap:wrap;column-gap:5px;row-gap:2px}
html body.portfolio-redesign .stage #battlePowerBar .bp-reinforcement{display:block;flex-basis:100%;font:700 clamp(10px,.9vw,13px)/1.2 F1Barlow,system-ui,sans-serif;color:#c7e4ef;white-space:normal}
html body.portfolio-redesign .stage #battlePowerBar .bp-summary-buy .bp-reinforcement{text-align:left}
html body.portfolio-redesign .stage #battlePowerBar .bp-summary-sell .bp-reinforcement{text-align:right}
@media(max-width:700px) and (orientation:portrait),(max-width:540px){
 html body.portfolio-live.portfolio-redesign:not(.normal-ui) .stage:has(.reference-neon){grid-template-rows:64px 36px 0px minmax(140px,1fr) 160px 96px 30px 64px!important}
 html body.portfolio-live.portfolio-redesign:not(.normal-ui) .stage #battlePowerBar{height:64px!important}
 html body.portfolio-redesign .stage #battlePowerBar .bp-army-data b,html body.portfolio-redesign .stage #battlePowerBar .bp-army-data small{font-size:13px!important;line-height:15px!important}
 html body.portfolio-redesign .stage #battlePowerBar .bp-reinforcement{font-size:10px;line-height:12px}
 html body.portfolio-redesign .stage #battlePowerBar .bp-legend{gap:6px!important}
}
html body.portfolio-live.portfolio-redesign:not(.normal-ui) .stage #battlePowerBar{height:112px!important}
@media(max-width:700px) and (orientation:portrait),(max-width:540px){
html body.portfolio-live.portfolio-redesign:not(.normal-ui) .stage #battlePowerBar{height:84px!important}
html body.portfolio-live.portfolio-redesign:not(.normal-ui) .stage:has(.reference-neon){grid-template-rows:84px 36px 0px minmax(140px,1fr) 160px 96px 30px 64px!important}
}

html body.portfolio-redesign .stage #battlePowerBar .bp-summary-buy .bp-reinforcement{color:#55f7a6}
html body.portfolio-redesign .stage #battlePowerBar .bp-summary-sell .bp-reinforcement{color:#ff7187}
#reinforcementPanel .rf-status{bottom:auto;top:calc(100% + 5px)}

/* Use the same five-second transport grace as START/STOP; disabled stays disabled. */
html body .stage :is(#reinforcementPanel button,#reinforcementToggle,#buyManual,#sellManual,#buyRecall,#sellRecall).rf-connection-grace:disabled{transition:none!important;filter:var(--rf-ready-filter,none)!important;opacity:var(--rf-ready-opacity,1)!important;background:var(--rf-ready-background)!important;color:var(--rf-ready-color)!important;box-shadow:var(--rf-ready-shadow)!important;cursor:progress!important}

/* Visibility follows the confirmed running round, not transient army/loading classes. */
html body.reinforcement-panel-v1 .stage #reinforcementToggle[data-round-visible="true"]:not([hidden]){display:grid!important}