/* Selected Broadcast Split card, adapted to the live field HUD. */
:root { --role-if:#f8d34c; --role-of:#81d878; --role-c:#71bafa; --role-p:#f69a9e; }
.skill-icon { display:inline-block; width:24px; height:24px; object-fit:contain; vertical-align:middle; flex:none; }
.skill-tag { display:inline-flex; align-items:center; gap:4px; }
.player-role-bar { position:absolute; top:5px; right:5px; width:33.333333%; height:18px; display:flex; overflow:hidden; border:1px solid #10213a; border-radius:3px; box-shadow:0 2px 4px #0005; z-index:1; }
.player-role-bar>span { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; font:700 10px/1 'Barlow Condensed',sans-serif; color:#10213a; }
.player-role-bar>span+span { border-left:1px solid #10213a40; }
.role-IF { background:var(--role-if); }.role-OF { background:var(--role-of); }.role-C { background:var(--role-c); }.role-P { background:var(--role-p); }.role-DH { background:#b7c4da; }
.roster-portrait { position:relative; align-self:stretch; display:flex; align-items:center; }.roster-portrait .player-role-bar { top:2px; right:1px; height:13px; }.roster-portrait .player-role-bar>span { font-size:8px; }
#star-plate .skill-icon { width:26px; height:26px; }
.live-player .skill-tag { display:inline-flex; align-items:center; gap:3px; }
.live-player .skill-icon { width:20px; height:20px; }
.cutin b .skill-icon { width:36px; height:36px; border:0; border-radius:0; background:none; }
#hud:not(.lele-hud) .live-player.bc-panel { width:510px; padding:4px; display:grid; grid-template-columns:20% minmax(0,1fr) 40%; gap:6px; align-items:center; min-height:0; max-width:calc(var(--gw) - 40px); }
.bc-panel .bc-portrait { position:relative; min-width:0; align-self:center; aspect-ratio:4/5; overflow:hidden; border:2px solid #e5bd5a; border-radius:7px; background:#faf8ef; }
.bc-panel .bc-portrait .face { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; object-position:50% 100%; border:0; border-radius:0; background:none; }
.bc-panel .bc-portrait .face.art { object-fit:contain; transform:scale(var(--portrait-zoom,1)); transform-origin:50% 0; }
.bc-portrait-column { min-width:0; align-self:center; }
.bc-portrait-column .bc-portrait { width:100%; }
.bc-toggle { display:none; }
.bc-info { min-width:0; display:flex; flex-direction:column; gap:5px; }
.bc-kicker { display:flex; align-items:baseline; gap:6px; color:#b8c7e0; font:italic 700 13px/1 'Barlow Condensed',var(--font); text-transform:uppercase; }
.bc-kicker b { font-size:17px; color:#fff; }
.bc-name { font:italic 800 25px/1.04 'Barlow Condensed',var(--font); color:#f5f7fc; overflow-wrap:anywhere; text-wrap:balance; }
.bc-team { color:#ecc76b; font:600 11px/1.2 var(--font); }
.bc-labels { display:flex; gap:4px; flex-wrap:wrap; }
.bc-labels>span { font:700 10px/1.1 var(--font); border-radius:3px; padding:4px 5px; color:#10213a; white-space:nowrap; }
.order-lead { background:#9bdbed; }.order-middle { background:#c4b1f3; }.order-bottom { background:#b7c4da; }.bats-L { background:#8ce3d2; }.bats-R { background:#ffc09f; }.bats-S { background:#cbb4f8; }
.bc-skills { display:flex; gap:4px; flex-wrap:nowrap; min-width:0; }.bc-skills:empty { display:none; }
.bc-skills .skill-help { flex:0 1 auto; min-width:0; max-width:calc(50% - 2px); }
.bc-skills .skill-tag { min-width:0; max-width:100%; }
.bc-panel .skill-tag>span,.live-player .skill-tag>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-arm-boost { font:700 10px/1.2 var(--font); align-self:center; color:#ffdc78; flex:none; }
.card-pitcher-portrait { position:relative; align-self:stretch; }.card-pitcher-portrait>.face { width:100%; height:100%; object-fit:cover; }
.bc-panel .skill-tag { color:#f5f7fc; font:600 12px/1.1 'Barlow Condensed',var(--font); padding:3px 5px; border:1px solid #d1ad5780; border-radius:5px; background:#08162d; white-space:nowrap; cursor:help; }
.bc-panel .skill-help { pointer-events:auto; }
.bc-panel .skill-tag:focus-visible { outline:2px solid #7ed8ff; outline-offset:3px; }
.bc-season { margin-top:3px; }.bc-season>small { display:block; margin-bottom:5px; color:#aab7d4; font:600 8px/1 var(--font); letter-spacing:.12em; }
.bc-season>div { display:flex; gap:9px; }.bc-season>div>span { display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
/* (a pitcher's line is wider: 3.53 ERA 15-10 W-L 224 K) */
.bc-season.pitch>div { gap:6px; }.bc-season.pitch b { font-size:21px; }
.bc-season b { font:italic 800 23px/1 'Barlow Condensed',var(--font); color:#fff; }
.bc-season em { font:700 8px/1 var(--font); padding:3px; border-radius:3px; background:#274d7055; color:#b8d9ff; }.bc-season span:nth-child(2) em { background:#70582055; color:#f6d478; }.bc-season span:nth-child(3) em { background:#713f3c55; color:#ffb3a4; }
.ability-diamond { margin:0; width:100%; min-width:0; justify-self:center; }.ability-diamond svg { display:block; width:100%; height:auto; overflow:visible; }
.ad-grid { fill:none; stroke:#7795bd; stroke-opacity:.37; stroke-width:1; }.ad-axis { stroke:#7795bd; stroke-opacity:.25; stroke-width:1; }
.ad-shape { fill:#ecc45b4d; stroke:#f8d16e; stroke-width:2.4; stroke-linejoin:round; }.ad-point { fill:#ffd77c; }
.ability-diamond text { font:italic 700 20px 'Barlow Condensed',sans-serif; fill:#f5f7fc; }.ability-diamond .ad-value { fill:#f5ce6b; font-size:27px; font-weight:800; }.ability-diamond .ad-penalty text { fill:#ff777b; }
/* Same rhythm for a triggering skill and its affected numbers/chart vertex. */
.stat-boost { animation:abilityBoost 1.35s ease-in-out infinite; }
.ability-diamond .stat-boost text,.ability-diamond .stat-boost.ad-point { animation:abilityBoostInk 1.35s ease-in-out infinite; }
@keyframes abilityBoost { 0%,100% { color:#ffdc78; border-color:#ffdc78; filter:drop-shadow(0 0 3px #ffcf6b70); } 50% { color:#ff7878; border-color:#ff7878; filter:drop-shadow(0 0 5px #ff575b90); } }
@keyframes abilityBoostInk { 0%,100% { fill:#ffdc78; } 50% { fill:#ff7878; } }
.live-stats .stat-boost b,.live-stats .stat-boost span { color:inherit; }
#hud #matchup-popup { width:680px; background:#0d1d36; color:#f5f7fc; border-color:#e5bd5a; }
#matchup-popup .batter-card.bc-panel { width:100%; display:grid; grid-template-columns:22% minmax(0,1fr) 34%; gap:8px; padding:6px; border:2px solid #e5bd5a; background:#101f3b; border-radius:10px; }
#matchup-popup .pitcher-card { display:grid; grid-template-columns:90px minmax(0,1fr) 160px; color:#f5f7fc; background:#101f3b; border-color:#e5bd5a; gap:12px; padding:14px; }
#matchup-popup .pitcher-card .card-pitcher-portrait { width:90px; height:112px; min-width:0; overflow:hidden; border:1px solid #e5bd5a; border-radius:7px; }
#matchup-popup .pitcher-card .face { width:100%; height:100%; border:0; border-radius:0; }
#matchup-popup .pitcher-card .stat b,#matchup-popup .pitcher-card .who>small { color:#c7d6ed; }
#matchup-popup .pitcher-card .stat>span,#matchup-popup .pitcher-card .stamina>span { color:#b8c7e0; }
#matchup-popup .pitcher-card .skill-tag { display:inline-flex; background:#08162d; color:#f5f7fc; border:1px solid #d1ad5780; border-radius:5px; padding:3px 6px; }
#matchup-popup .pitcher-card [data-stat].stat-boost .stat>span,#matchup-popup .pitcher-card [data-stat].stat-boost .stat>b { color:inherit; }
#matchup-popup .skill-tooltip { position:static; display:block; width:auto; max-width:100%; white-space:normal; margin-top:6px; }
#matchup-popup .skill-tooltip[hidden] { display:none; }
#matchup-popup .skill-help { display:block; max-width:100%; }
@media(max-width:600px) {
  #hud #matchup-popup { width:calc(var(--gw) - 24px); }
  #matchup-popup .batter-card.bc-panel { grid-template-columns:30% minmax(0,1fr); gap:6px; padding:6px; }
  #matchup-popup .ability-diamond { grid-column:1/-1; max-width:220px; justify-self:center; }
  #matchup-popup .pitcher-card { grid-template-columns:70px minmax(0,1fr); }
  #matchup-popup .pitcher-card .card-pitcher-portrait { width:70px; height:90px; }
  #matchup-popup .pitcher-card .stats { grid-column:1/-1; }
}
#matchup-popup .bc-name { font-size:30px; }
#matchup-popup .skill-help { position:relative; }
html.short #hud:not(.lele-hud) .live-player.bc-panel { width:340px; padding:4px; gap:5px; grid-template-columns:20% minmax(0,1fr) 31%; max-width:calc(var(--gw) - 20px); }
html.short .bc-panel .bc-portrait { border-width:1px; }
html.short .bc-info { gap:3px; }html.short .bc-kicker { font-size:10px; }html.short .bc-kicker b { font-size:13px; }html.short .bc-name { font-size:18px; }html.short .bc-team { font-size:9px; }
html.short .bc-labels { gap:3px; }html.short .bc-labels>span { font-size:8px; padding:3px; }
html.short .bc-panel .skill-tag { font-size:10px; padding:2px 3px; }html.short .bc-panel .skill-icon { width:17px; height:17px; }
html.short .bc-season { margin-top:2px; }html.short .bc-season>small { font-size:7px; letter-spacing:.04em; margin-bottom:3px; }html.short .bc-season>div { gap:5px; }html.short .bc-season b { font-size:18px; }html.short .bc-season em { font-size:7px; padding:2px; }
html.short .player-role-bar { height:14px; top:3px; right:3px; }html.short .player-role-bar>span { font-size:8px; }
/* (batting on a phone, the bunt sits low, beside your portrait: clear of the pitcher's card at any height, the derby's too) */
html.short #hud[data-role="bat"] .bunt-btn { left:calc(92px + var(--safe-l)); bottom:calc(42px + var(--safe-b)); }
html.short #hud[data-role="bat"]:has(.live-player.hero.bc-expanded) .bunt-btn { left:calc(10px + var(--safe-l)); bottom:calc(165px + var(--safe-b)); }
/* On a phone, use one shared skill row to keep three abilities readable. */
html.short #hud .live-player.bc-panel .bc-info { display:contents; }
html.short #hud .live-player.bc-panel .bc-portrait, html.short #hud .live-player.bc-panel .bc-portrait-column { grid-column:1; grid-row:1/6; }
html.short #hud .live-player.bc-panel .bc-kicker { grid-column:2; grid-row:1; }
html.short #hud .live-player.bc-panel .bc-name { grid-column:2; grid-row:2; }
html.short #hud .live-player.bc-panel .bc-team { grid-column:2; grid-row:3; }
html.short #hud .live-player.bc-panel .bc-labels { grid-column:2; grid-row:4; }
html.short #hud .live-player.bc-panel .bc-season { grid-column:2; grid-row:5; }
html.short #hud .live-player.bc-panel .bc-skills { grid-column:1/-1; grid-row:6; }
html.short #hud .live-player.bc-panel .ability-diamond { grid-column:3; grid-row:1/6; width:100%; }
html.short #hud:not(.lele-hud) .live-player.bc-panel { row-gap:3px; }
html.short .live-player .live-stats { margin-top:3px; margin-bottom:2px; }
@media(max-height:360px) {
  html.short #hud .live-player.bc-panel .bc-name { font-size:16px; }
  html.short #hud .live-player.bc-panel .bc-team { display:none; }
  html.short #hud .live-player.bc-panel .bc-skills .skill-icon { width:15px; height:15px; }
  html.short #hud .live-player .lp-skills .skill-icon { width:15px; height:15px; }
  html.short #hud .live-player .live-stats { margin-top:1px; margin-bottom:0; }
  html.short #hud .live-player .live-stats b { font-size:14px; }
  html.short #hud .live-player .lp-pitches { margin-top:3px; }
  html.short #hud .live-player .lp-sub { display:none; }
}
@media(max-height:340px) {
  html.short #hud .live-pitcher.foe .lp-pitches { display:none; }
}
/* Small screens start with one portrait; the native portrait button expands it. */
@media(max-width:900px),(max-height:520px) {
  #hud .live-player.bc-panel .bc-toggle { display:block; position:absolute; inset:0; z-index:2; width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:5px; background:transparent; cursor:pointer; pointer-events:auto; }
  #hud .live-player.bc-panel .bc-toggle:focus-visible { outline:3px solid #7ed8ff; outline-offset:-4px; }
  html #hud:not(.lele-hud) .live-player.bc-panel:not(.bc-expanded) { display:block; width:72px; padding:0; border:0; border-radius:7px; background:none; box-shadow:none; }
  /* (above the phone layout's own rules for an open card) */
  html #hud:not(.lele-hud) .live-player.bc-panel:not(.bc-expanded) .bc-portrait { width:72px; height:90px; min-height:0; border-width:2px; }
  html #hud:not(.lele-hud) .live-player.bc-panel:not(.bc-expanded) .bc-info,
  html #hud:not(.lele-hud) .live-player.bc-panel:not(.bc-expanded) .ability-diamond,
  html #hud:not(.lele-hud) .live-player.bc-panel:not(.bc-expanded) .bc-arsenal { display:none; }
}
@media(prefers-reduced-motion:reduce) { .stat-boost,.ability-diamond .stat-boost text,.ability-diamond .stat-boost.ad-point { animation:none!important; color:#ffdc78!important; fill:#ffdc78!important; border-color:#ff7878!important; filter:drop-shadow(0 0 2px #ff787870); } }
/* ---- the pitcher's card, made like the batter's (Twin Cards) ---- */
/* the other side's card, under the scoreboard, at 82% */
html:not(.short) #hud:not(.lele-hud) .live-player.foe.bc-panel { transform:scale(.82); transform-origin:0 0; }
/* Both players' live stats sit below their portraits without a tinted background. */
.bc-band { display:flex; flex-direction:column; gap:3px; padding:5px 2px 0; color:#fff; font:italic 700 12px/1 'Barlow Condensed',var(--font); text-shadow:0 1px 3px #07112a; pointer-events:none; }
.bc-band>div { display:flex; justify-content:space-between; align-items:baseline; gap:4px; }
.bc-band b { font-size:16px; font-weight:800; }
.bc-band small { font:700 9px/1 var(--font); color:#c9d6ee; letter-spacing:.06em; }
.bc-stamina { position:relative; display:block; height:5px; border-radius:3px; background:#ffffff2b; overflow:hidden; }
.bc-stamina>i { position:absolute; inset:0 auto 0 0; width:var(--v); border-radius:inherit; background:linear-gradient(90deg,#3fd27f,#a6e65f); }
.bc-stamina.mid>i { background:#f6c744; }.bc-stamina.low>i { background:#ef5350; }
/* the pitcher's diamond in sky blue, so the two never read alike */
.ability-diamond.pitch .ad-shape { fill:#5cc8ff3d; stroke:#8fdcff; }.ability-diamond.pitch .ad-point { fill:#c2efff; }.ability-diamond.pitch .ad-value { fill:#8fdcff; }
.bc-labels .top-kmh { background:#b7c4da; }
/* a pitch's level, 1–7: its number, and seven cells warming as they climb (after Power Pros) */
.pitch-lv { display:inline-block; min-width:14px; margin-left:4px; padding:1px 3px; border-radius:3px; font:italic 800 11px/1.1 'Barlow Condensed',var(--font); text-align:center; color:#10213a; background:#c9d6ee; vertical-align:2px; }
.pitch-lv.lv1,.pitch-lv.lv2 { background:#8ea2c4; }.pitch-lv.lv5 { background:#ffd77c; }.pitch-lv.lv6 { background:#ffb347; }.pitch-lv.lv7 { background:#ff7a59; box-shadow:0 0 8px #ff7a5980; }
.pitch-cells { display:flex; gap:1.5px; }
.pitch-cells u { flex:1; display:block; min-width:4px; height:4px; border-radius:1px; background:#22355a; }
.pitch-cells u.on { background:#ffd77c; }.pitch-cells u.on:nth-child(n+5) { background:#ffb347; }.pitch-cells u.on:nth-child(n+7) { background:#ff7a59; }
/* the arsenal of a pitcher you face: each pitch's break, code, level, name and level cells (the last one thrown in gold) */
.bc-arsenal { grid-column:1/-1; display:flex; gap:6px; padding:0 2px 2px; }
.live-player.hero .bc-arsenal { display:none; }
.bc-arsenal .lp-pitch { flex:1; min-width:0; max-width:124px; grid-template-columns:24px minmax(0,1fr) auto; grid-template-rows:none; grid-template-areas:'icon code lv' 'icon name name' 'cells cells cells'; row-gap:2px; column-gap:5px; padding:5px 7px 6px; }
.bc-arsenal .lp-pitch .brk { grid-area:icon; grid-row:auto; }
.bc-arsenal .lp-pitch>b { grid-area:code; }.bc-arsenal .lp-pitch>.pitch-lv { grid-area:lv; margin:0; }
.bc-arsenal .lp-pitch small { grid-area:name; }.bc-arsenal .pitch-cells { grid-area:cells; margin-top:2px; }
#matchup-popup .pitcher-card.bc-panel { width:100%; display:grid; grid-template-columns:22% minmax(0,1fr) 34%; gap:8px; padding:6px; border:2px solid #e5bd5a; background:#101f3b; border-radius:10px; color:#f5f7fc; }
#matchup-popup .pitcher-card.bc-panel .bc-name { font-size:30px; }
html.short #hud .live-player.bc-panel .bc-arsenal { grid-row:7; gap:4px; }
html.short .bc-arsenal .lp-pitch { grid-template-columns:18px minmax(0,1fr) auto; grid-template-areas:'icon code lv' 'cells cells cells'; padding:3px 5px; }
html.short .bc-arsenal .lp-pitch small { display:none; }
html.short .bc-band { padding:4px 2px 0; }html.short .bc-band b { font-size:13px; }html.short .bc-band small { font-size:8px; }
@media(max-width:600px) {
  #matchup-popup .pitcher-card.bc-panel { grid-template-columns:30% minmax(0,1fr); gap:6px; padding:6px; }
  #matchup-popup .pitcher-card.bc-panel .ability-diamond { grid-column:1/-1; max-width:220px; justify-self:center; }
  #matchup-popup .bc-arsenal { flex-wrap:wrap; }
}