/* The field HUD, after the gameplay concept (dev/reference/broadcast-2026-10-15/):
   deep navy panels ruled in gold, white condensed italics. The scoreboard top
   left (each runner's number under their base; a base is tapped to throw
   over), the other side's card under it (a pitcher's with the pitches they
   throw and each one's break), your player's card large at the bottom left
   with their portrait, the pitch grid over that card while you pitch,
   the pickoff indicator round the cursor, and the bunt button for fingers.
   Tee-ball keeps its own column of cards (no .hero/.foe there). Loaded after
   broadcast.css. */

#hud {
  --hb: #0b1833; --hb2: #16305c; --hgold: #e5bd5a; --hgold-soft: #e5bd5a55; --hline: #e5bd5a2e;
  --htext: #f5f7fc; --hmuted: #aab7d4; --hball: #3fd27f; --hstrike: #f6c744; --hout: #ef5350;
  --cond: 'Barlow Condensed', 'LetsFish Round', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --panel: linear-gradient(180deg, #17315ef2, #0a1731f5);
  --panel-edge: inset 0 0 0 1px #07112a, inset 0 0 0 3px #e5bd5a26, 0 8px 22px #050c1d80;
  --hero-w: 372px; --foe-w: 408px; --bug-h: 88px;
}

/* ---- the scoreboard ---- */
#hud .bug { top: calc(18px + var(--safe-t)); left: calc(20px + var(--safe-l)); height: var(--bug-h); align-items: stretch; color: var(--htext); background: var(--panel); border: 2px solid var(--hgold); border-radius: 10px; box-shadow: var(--panel-edge); overflow: visible; }
#hud .bug-teams { display: flex; flex-direction: column; }
#hud .bug-team { flex: 1; min-width: 172px; gap: 9px; padding: 0 14px 0 12px; border-left: 0; position: relative; }
#hud .bug-team::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 2px; background: var(--team); }
#hud .bug-team + .bug-team { border-top: 1px solid var(--hline); }
#hud .bug-team.batting { background: linear-gradient(90deg, color-mix(in srgb, var(--team) 34%, transparent), transparent 80%); }
#hud .bug-icon { font-size: 20px; filter: drop-shadow(0 1px 1px #0008); }
#hud .bug-team b { flex: 1; font: italic 700 21px/1 var(--cond); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
#hud .bug-runs { font: italic 800 32px/1 var(--cond); color: #fff; min-width: 24px; text-align: right; }
#hud .bug-mid { flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; border: 0; border-left: 1px solid var(--hline); border-right: 1px solid var(--hline); }
#hud .bug-inning { display: flex; align-items: center; gap: 2px; font: italic 800 34px/1 var(--cond); color: #fff; }
#hud .bug-inning .arrow { font-size: 15px; color: var(--hgold); margin: 0; }
#hud .bug-half { font: italic 700 14px/1 var(--cond); color: var(--hmuted); letter-spacing: 1px; text-transform: uppercase; text-align: center; }
/* the bases: a diamond of three, a runner's number under their base */
#hud .bug-diamond { position: relative; width: 82px; height: auto; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--hline); background: none; color: inherit; font: inherit; pointer-events: none; }
#hud .bug-diamond .bug-base { position: absolute; width: 22px; height: 22px; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); pointer-events: none; }
#hud .bug-diamond .bug-base[data-b="2"] { left: 50%; top: 31%; }
#hud .bug-diamond .bug-base[data-b="3"] { left: 27%; top: 54%; }
#hud .bug-diamond .bug-base[data-b="1"] { left: 73%; top: 54%; }
#hud .bug-diamond .bug-base i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; transform: rotate(45deg); background: #142a52; border: 2px solid #c9d3ea; border-radius: 2px; box-shadow: none; }
#hud .bug-diamond .bug-base.on i { background: var(--hgold); border-color: #fff4cf; box-shadow: 0 0 9px #e5bd5aa0; }
/* the count */
#hud .bug-count { justify-content: center; gap: 4px; padding: 0 14px 0 12px; }
#hud .bug-count > div { gap: 5px; }
#hud .bug-count span { width: 13px; color: #fff; font: italic 700 15px/1 var(--cond); }
#hud .bug-count i { width: 12px; height: 12px; background: #142a52; border: 1.5px solid #8796b8; }
#hud .bug-count i.on { border-color: transparent; }
#hud .bug-count > div:nth-child(1) i.on { background: var(--hball); box-shadow: 0 0 6px #3fd27f88; }
#hud .bug-count > div:nth-child(2) i.on { background: var(--hstrike); box-shadow: 0 0 6px #f6c74488; }
#hud .bug-count > div:nth-child(3) i.on { background: var(--hout); box-shadow: 0 0 6px #ef535088; }

/* ---- the top right: the buttons, the last pitch's speed, the phase ---- */
/* Each crossing of home gets the same away/home order as the corner score. */
#hud > .score-announcement { position: absolute; z-index: 8; left: 50%; top: 19%; transform: translateX(-50%); width: max-content; max-width: 76cqw; padding: 10px 24px 16px; color: var(--htext); background: linear-gradient(110deg, #09172bed, #16305cf5 50%, #09172bed); border-block: 2px solid var(--hgold); border-radius: 8px; box-shadow: 0 8px 32px #030b2080; pointer-events: none; text-align: center; }
#hud .score-announcement[hidden] { display: none; }
#hud .score-call { color: var(--hgold); font: italic 800 clamp(16px, 2.1cqw, 28px)/1.1 var(--cond); letter-spacing: .12em; }
#hud .score-match { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.5cqw, 38px); }
#hud .score-club { display: grid; justify-items: center; gap: 3px; min-width: 60px; font: italic 700 clamp(12px, 1.5cqw, 20px)/1 var(--cond); }
#hud .score-club .team-logo { width: clamp(48px, 7cqw, 96px); height: clamp(48px, 7cqw, 96px); object-fit: contain; filter: drop-shadow(0 3px 5px #0008); }
#hud .score-club.scoring { color: var(--hgold); }
#hud .score-total { display: flex; align-items: center; gap: clamp(8px, 1.5cqw, 24px); font: italic 800 clamp(52px, 9cqw, 128px)/1 var(--cond); font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 #050d20; }
#hud .score-total b.scoring { color: #ffe09a; }
#hud .score-total i { color: var(--hmuted); font-size: .55em; font-style: normal; }
#hud .score-announcement.on { animation: score-arrive .3s ease-out both; }
#hud:has(> .score-announcement:not([hidden])) > .banner { top: 48%; bottom: auto; }
#hud.replaying .score-announcement { visibility: hidden; }
@keyframes score-arrive { from { opacity: 0; transform: translate(-50%, -12px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@container app (max-height: 500px) { #hud > .score-announcement { top: 17%; padding: 6px 18px 10px; } #hud .score-club .team-logo { width: 48px; height: 48px; } #hud .score-total { font-size: clamp(48px, 8cqw, 72px); } }
@media (prefers-reduced-motion: reduce) { #hud .score-announcement.on { animation: none; } }

/* ---- the line score: the inning break (and the end), after the broadcasts' ----
   A band in the colours of the side that batted, wiped on: the kicker (three
   outs, change) over the half's title, its runs, hits and runners left on to
   the right; under it the line, big, the inning just played lit in gold; and
   beside it the other side's three due up, faces and all, and their pitcher. */
#hud .linescore { z-index: 7; width: min(1060px, 94cqw); padding: 0; color: var(--htext); background: var(--panel); border: 2px solid var(--hgold); border-radius: 12px; box-shadow: var(--panel-edge), 0 18px 48px #030b20a0; overflow: hidden; }
#hud .linescore.end { bottom: calc(14px + var(--safe-b)); }
#hud .ls-band { display: flex; align-items: center; gap: clamp(10px, 2cqw, 28px); padding: clamp(7px, .9cqw, 12px) clamp(14px, 2.2cqw, 28px); background: linear-gradient(104deg, color-mix(in srgb, var(--team) 82%, #050d20) 0 62%, color-mix(in srgb, var(--team) 36%, #0b1833) 62.3%, #0b1833); border-bottom: 2px solid var(--hgold); position: relative; overflow: hidden; }
#hud .ls-band::after { content: ''; position: absolute; inset: 0 auto 0 -30%; width: 22%; background: linear-gradient(100deg, transparent, #ffffff38, transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
#hud .ls-head { display: grid; gap: 3px; min-width: 0; }
#hud .ls-kicker { color: var(--hgold); font: italic 800 clamp(12px, 1.35cqw, 18px)/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; }
#hud .linescore h3 { margin: 0; color: #fff; font: italic 800 clamp(22px, 3.1cqw, 44px)/1 var(--cond); letter-spacing: .02em; text-align: left; text-transform: uppercase; text-shadow: 0 3px 0 #050d2099; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .ls-tally { margin-left: auto; display: flex; gap: clamp(6px, .9cqw, 12px); }
#hud .ls-tally span { display: grid; justify-items: center; gap: 2px; min-width: clamp(46px, 5.4cqw, 70px); padding: 5px 8px 4px; background: #050d2070; border: 1px solid var(--hgold-soft); border-radius: 6px; }
#hud .ls-tally b { font: italic 800 clamp(20px, 2.6cqw, 34px)/1 var(--cond); font-variant-numeric: tabular-nums; }
#hud .ls-tally small { color: var(--hmuted); font: 700 clamp(10px, 1cqw, 13px)/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
#hud .ls-body { display: flex; align-items: stretch; }
#hud .linescore table { flex: 1; margin: clamp(6px, 1cqw, 12px) clamp(10px, 1.6cqw, 20px) clamp(8px, 1.2cqw, 14px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
#hud .linescore th { padding: 3px clamp(3px, .6cqw, 8px); color: var(--hmuted); font: 700 clamp(11px, 1.2cqw, 15px)/1 var(--cond); }
#hud .linescore td { padding: clamp(4px, .75cqw, 9px) clamp(3px, .6cqw, 8px); border-top: 1px solid var(--hline); font: italic 700 clamp(16px, 2cqw, 26px)/1 var(--cond); text-align: center; }
#hud .linescore .tn { position: relative; display: flex; align-items: center; gap: clamp(6px, .8cqw, 10px); padding-left: 12px; border-left: 0; text-align: left; text-transform: uppercase; white-space: nowrap; }
#hud .linescore .tn::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--team); }
#hud .linescore .tn .team-logo { width: clamp(24px, 2.9cqw, 38px); height: clamp(24px, 2.9cqw, 38px); filter: drop-shadow(0 2px 3px #0008); }
#hud .linescore tr.batted .tn { background: linear-gradient(90deg, color-mix(in srgb, var(--team) 38%, transparent), transparent 92%); }
#hud .linescore th.r { color: var(--hgold); }
#hud .linescore td.r { color: #fff; background: #050d2060; font: italic 800 clamp(24px, 3.1cqw, 42px)/1 var(--cond); }
#hud .linescore td.he { color: #d9e1f2; }
#hud .linescore th.lit { color: var(--hgold); }
#hud .linescore td.lit { color: #1d1405; background: linear-gradient(180deg, #ffe39a, var(--hgold)); }
#hud .ls-next { display: grid; align-content: start; gap: clamp(3px, .45cqw, 6px); width: clamp(220px, 29cqw, 340px); padding: clamp(6px, .8cqw, 10px) clamp(10px, 1.4cqw, 16px); background: #050d2052; border-left: 1px solid var(--hline); }
#hud .ls-next-head { display: flex; align-items: center; gap: 8px; color: var(--hgold); font: italic 800 clamp(12px, 1.3cqw, 16px)/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
#hud .ls-next-head .team-logo { width: clamp(20px, 2.2cqw, 28px); height: clamp(20px, 2.2cqw, 28px); }
#hud .ls-next ol { display: grid; gap: clamp(2px, .35cqw, 4px); margin: 0; padding: 0; list-style: none; }
#hud .ls-next li, #hud .ls-pitcher { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(6px, .8cqw, 10px); align-items: center; }
#hud .ls-next .face, #hud .ls-pitcher .face { grid-row: span 2; width: clamp(28px, 2.9cqw, 38px); height: clamp(28px, 2.9cqw, 38px); border-radius: 50%; border: 2px solid var(--hgold-soft); object-fit: cover; object-position: 50% 18%; background: #0b1833; }
#hud .ls-ord { grid-row: span 2; display: grid; place-items: center; min-width: 1.7em; height: 1.7em; color: #1d1405; background: var(--hgold); border-radius: 4px; font: italic 800 clamp(12px, 1.3cqw, 16px)/1 var(--cond); }
#hud .ls-next b, #hud .ls-pitcher b { overflow: hidden; font: italic 700 clamp(14px, 1.6cqw, 20px)/1.1 var(--cond); white-space: nowrap; text-overflow: ellipsis; }
#hud .ls-next small, #hud .ls-pitcher em { color: var(--hmuted); font: 600 clamp(11px, 1.1cqw, 14px)/1.1 var(--cond); font-style: normal; font-variant-numeric: tabular-nums; }
#hud .ls-pitcher { padding-top: clamp(3px, .45cqw, 6px); border-top: 1px dashed var(--hline); }
#hud .ls-pitcher small { grid-row: span 2; color: var(--hgold); font: italic 800 clamp(11px, 1.1cqw, 14px)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
/* in: up from below, the band wiped across, a sheen over it, the rows one after another, the inning's cell pulsing; out: down and away */
#hud .linescore.on { animation: ls-in .42s cubic-bezier(.2, .9, .25, 1) both; }
#hud .linescore.on .ls-band { animation: ls-wipe .5s .08s cubic-bezier(.3, .8, .3, 1) both; }
#hud .linescore.on .ls-band::after { animation: ls-sheen .9s .55s ease-out; }
#hud .linescore.on .ls-next li, #hud .linescore.on .ls-pitcher { animation: ls-row .32s calc(.4s + var(--i, 3) * .11s) ease-out both; }
#hud .linescore.on td.lit { animation: ls-lit .5s .6s 3 alternate ease-in-out; }
#hud .linescore.out { animation: ls-out .3s ease-in both; }
@keyframes ls-in { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes ls-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes ls-sheen { 0% { opacity: 1; left: -30%; } 100% { opacity: 0; left: 110%; } }
@keyframes ls-row { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ls-lit { to { filter: brightness(1.25); box-shadow: 0 0 12px #ffd76699; } }
@keyframes ls-out { to { opacity: 0; translate: 0 26px; } }
/* a phone held sideways: tighter, the faces smaller, the pitcher's line left out */
@container app (max-height: 500px) {
  #hud .linescore { width: min(96cqw, 900px); }
  #hud .linescore.end { bottom: calc(8px + var(--safe-b)); }
  #hud .ls-band { padding: 5px 12px; }
  #hud .linescore h3 { font-size: clamp(18px, 3cqw, 26px); }
  #hud .ls-tally span { min-width: 40px; padding: 3px 6px 2px; }
  #hud .ls-tally b { font-size: 18px; }
  #hud .linescore table { margin: 4px 10px 6px; }
  #hud .linescore td { padding: 3px 4px; font-size: 15px; }
  #hud .linescore td.r { font-size: 20px; }
  #hud .ls-next { width: clamp(180px, 30cqw, 250px); padding: 5px 10px; gap: 3px; }
  #hud .ls-next .face { width: 24px; height: 24px; }
  #hud .ls-pitcher { display: none; }
}
@media (prefers-reduced-motion: reduce) { #hud .linescore.on, #hud .linescore.on *, #hud .linescore.out { animation: none !important; } }

#hud .hud-tools > .icon-btn, #hud .hud-tools > .popover-anchor > .icon-btn { width: 46px; height: 46px; color: #fff; background: var(--panel); border: 2px solid var(--hgold); border-radius: 9px; box-shadow: var(--panel-edge); font-size: 19px; }
#hud .pitch-info { background: var(--panel); border: 1px solid var(--hgold-soft); color: var(--hmuted); font: 600 12px var(--font); }
#hud .pitch-info span { font: italic 800 22px var(--cond); color: #fff; }
#hud .phase-chip { background: var(--panel); border: 1px solid var(--hgold-soft); box-shadow: var(--panel-edge); }
#hud .phase-chip b { color: #fff; }
#hud .phase-chip span { color: var(--hmuted); border-left-color: var(--hline); }
#hud .action-guide { background: var(--panel); border: 1px solid var(--hgold-soft); box-shadow: var(--panel-edge); max-width: calc(var(--gw) - 2 * (var(--hero-w) + 40px)); }
#hud .action-guide b { color: #fff; }
#hud .action-guide span { color: var(--hmuted); }
/* Baseball omits coaching panels and the phase badge; tee-ball retains its own feedback. */
#hud:not(.lele-hud) .action-guide, #hud:not(.lele-hud) .swing-feedback, #hud:not(.lele-hud) .phase-chip { display: none; }

/* ---- the players' cards ---- */
.live-matchup { display: flex; flex-direction: column; gap: 8px; left: calc(20px + var(--safe-l)); right: auto; top: calc(96px + var(--safe-t)); width: 196px; }
.live-matchup[hidden] { display: none !important; }
.live-player { color: var(--htext); }
.lp-face { display: none; }
.live-player .live-who { display: flex; align-items: baseline; gap: 5px; }
.live-player .live-who em { font-style: normal; color: var(--hmuted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-player .lp-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-player .lp-sub { display: block; color: var(--hgold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-stats > .meter i { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--hgold) var(--v), #ffffff1f var(--v)); }
.lp-pitches { display: none; }
/* (tee-ball's column: the compact cards as they were) */
.lele-hud .live-player .lp-name { font-size: 13px; }
.lele-hud .live-player .live-who b { display: none; }

/* baseball: the cards are placed one by one over the whole HUD */
#hud:not(.lele-hud) .live-matchup { inset: 0; width: auto; display: block; }
.live-player.hero, .live-player.foe { position: absolute; width: auto; max-width: none; padding: 0; color: var(--htext); background: var(--panel); border: 2px solid var(--hgold); border-left: 2px solid var(--hgold); border-radius: 10px; box-shadow: var(--panel-edge); pointer-events: none; }
.live-player.hero .lp-face, .live-player.foe .lp-face { display: block; position: absolute; overflow: hidden; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--team) 55%, #fff 10%), color-mix(in srgb, var(--team) 60%, #06102a) 72%); border: 2px solid var(--hgold); }
.lp-face .face { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border: 0; border-radius: 0; background: none; }
.live-player.hero .live-who span, .live-player.foe .live-who span { font: italic 700 15px/1 var(--cond); color: var(--hmuted); text-transform: uppercase; letter-spacing: .5px; }
.live-player.hero .live-who b, .live-player.foe .live-who b { font: italic 800 17px/1 var(--cond); color: #fff; }
.live-player.hero .live-stats, .live-player.foe .live-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; justify-content: start; }
.live-player.hero .live-stats > div, .live-player.foe .live-stats > div { text-align: left; min-width: 0; }
.live-player.hero .live-stats span, .live-player.foe .live-stats span { display: block; color: var(--hmuted); font: 600 11px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.live-player.hero .live-stats b, .live-player.foe .live-stats b { display: block; color: #fff; font: italic 800 26px/1.05 var(--cond); }
.live-player.hero .live-today, .live-player.foe .live-today { display: block; color: var(--hmuted); font-size: 10px; margin-top: 3px; }

/* yours: big, bottom left, with the full portrait contained in the panel */
.live-player.hero { left: calc(20px + var(--safe-l)); bottom: calc(20px + var(--safe-b)); width: var(--hero-w); min-height: 122px; padding: 11px 14px 10px 142px; }
.live-player.hero .lp-face { left: 12px; bottom: 10px; width: 118px; height: 136px; border-radius: 12px 12px 8px 8px; box-shadow: 0 6px 16px #050c1d90; }
.live-player.hero .lp-name { font: italic 800 30px/1.05 var(--cond); letter-spacing: .3px; margin-top: 3px; }
.live-player.hero .lp-sub { font: 600 12px/1.3 var(--font); margin: 1px 0 6px; }

/* the other side's: under the scoreboard */
.live-player.foe { left: calc(20px + var(--safe-l)); top: calc(18px + var(--bug-h) + 10px + var(--safe-t)); width: var(--foe-w); min-height: 92px; padding: 10px 14px 10px 98px; }
.live-player.foe .lp-face { left: 10px; top: 10px; width: 76px; height: 76px; border-radius: 7px; }
.live-player.foe .lp-name { font: italic 800 21px/1.1 var(--cond); margin-top: 2px; }
.live-player.foe .lp-sub { font: 600 11px/1.3 var(--font); margin: 0 0 4px; }
.live-player.foe .live-stats b { font-size: 21px; }
.live-player.foe .live-today { display: none; }
/* the pitcher's pitches and how each breaks; the last one thrown in gold */
.live-player.foe .lp-pitches { display: flex; gap: 6px; margin: 9px 0 0 -88px; }
.lp-pitch { flex: 1; min-width: 0; max-width: 92px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 4px; padding: 5px 7px; border: 1px solid #e5bd5a40; border-radius: 6px; background: #071229cc; }
.lp-pitch .brk { grid-row: span 2; width: 24px; height: 24px; }
.lp-pitch b { font: italic 800 15px/1 var(--cond); color: #fff; }
.lp-pitch small { font: 600 10px/1.15 var(--font); color: var(--hmuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-pitch.last { border-color: var(--hgold); background: #1b2f58; box-shadow: 0 0 0 1px var(--hgold), 0 0 10px #e5bd5a55; }

/* a pitch's break */
.brk { overflow: visible; filter: drop-shadow(0 1px 0 #000a); }
.brk path { fill: none; stroke: var(--pc); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.brk polygon { fill: var(--pc); stroke: var(--pc); stroke-width: 1; stroke-linejoin: round; }

/* ---- the field panel, bottom right: the throw button for fingers and the bases ---- */
.pitch-picker { display: none !important; }
#hud[data-touch="0"] .pitchbar { display: none; }
.field-panel { position: absolute; right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none !important; }
.field-panel .pitchbar { position: static; display: flex; pointer-events: none !important; }
/* the field's diamond: who's on, by number and name; pitching, a runner's base takes a click or a tap to throw over */
.base-diamond { position: relative; width: 272px; height: 118px; background: var(--panel); border: 2px solid var(--hgold); border-radius: 10px; box-shadow: var(--panel-edge); }
.base-diamond[hidden] { display: none; }
.bd-lines { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border: 1.5px solid #c9d3ea66; transform: translate(-50%, -50%) rotate(45deg); background: radial-gradient(circle, #3b7a3a33, transparent 70%); }
.bd-home { position: absolute; left: 50%; top: calc(50% + 40px); width: 12px; height: 12px; background: #f5f7fc; transform: translate(-50%, -50%) rotate(45deg); }
.bd-base { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; color: var(--htext); pointer-events: none; }
.bd-base[data-b="2"] { left: 50%; top: calc(50% - 40px); }
.bd-base[data-b="1"] { left: calc(50% + 40px); top: 50%; }
.bd-base[data-b="3"] { left: calc(50% - 40px); top: 50%; }
.bd-base i { display: block; width: 17px; height: 17px; background: #142a52; border: 2px solid #c9d3ea; border-radius: 2px; transform: rotate(45deg); }
.bd-base.on i { background: var(--hgold); border-color: #fff4cf; box-shadow: 0 0 10px #e5bd5ab0; }
/* each runner's number and name, outward from their base */
.bd-base span { position: absolute; top: 50%; transform: translateY(-50%); max-width: 86px; padding: 2px 6px; border: 1px solid var(--hgold-soft); border-radius: 4px; background: #071229e6; font: italic 700 13px/1.1 var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-base span:empty { display: none; }
.bd-base[data-b="1"] span, .bd-base[data-b="2"] span { left: calc(100% + 8px); }
.bd-base[data-b="3"] span { right: calc(100% + 8px); }
.bd-base:not(:disabled) { pointer-events: auto; cursor: pointer; }
.bd-base:not(:disabled)::after { content: ''; position: absolute; inset: -10px; }
.bd-base:not(:disabled) i { animation: bdPick 1.1s ease-in-out infinite; }
@keyframes bdPick { 50% { box-shadow: 0 0 0 4px #e5bd5a55, 0 0 14px #e5bd5a; } }
.pitch-cross { --cell: 66px; --cellw: 80px; display: grid; grid-template-columns: repeat(3, var(--cellw)); grid-auto-rows: var(--cell); gap: 5px; padding: 7px; background: var(--panel); border: 2px solid var(--hgold); border-radius: 10px; box-shadow: var(--panel-edge); position: relative; }
.pitch-cross[hidden] { display: none; }
.pc-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border: 1px solid #e5bd5a30; border-radius: 6px; background: linear-gradient(180deg, #13284ee6, #0a1630e6); color: var(--htext); line-height: 1.05; pointer-events: none; }
.pc-cell.empty { background: #0a1630b3; border-color: #e5bd5a1a; }
.pc-cell .brk { width: 26px; height: 26px; }
.pc-cell b { font: italic 800 18px/1 var(--cond); color: #fff; }
.pc-cell small { font: 600 10px/1.1 var(--font); color: var(--hmuted); max-width: calc(var(--cellw) - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-cell kbd { position: absolute; left: 5px; top: 3px; font: 600 9px var(--font); color: #8796b880; }
.pc-cell.empty kbd { position: static; color: #8796b84d; }
.pc-cell.on { background: linear-gradient(180deg, #24427a, #142a52); border: 2px solid var(--hgold); box-shadow: 0 0 0 1px #07112a, 0 0 14px #e5bd5a80; }
.pc-cell.on small { color: #fff; }
.pc-cell.last { border-style: dashed; border-color: var(--pc); }
.pitch-cross.live .pc-cell:not(:disabled) { pointer-events: auto; cursor: pointer; }
.pitch-cross.live .pc-cell:not(:disabled):hover { border-color: var(--hgold); }
.pitch-cross:not(.live) { opacity: .9; }
/* the pitch grid, over your pitcher's card (clear of the pitcher), the chosen pitch named on top;
   each pitch with its level (1–7) and its usual speed; hud.js measures the card into --card-h / --card-w */
.pitch-dock { position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(20px + var(--safe-b) + var(--card-h, 190px) + 10px); display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: none; }
.pitch-dock[hidden], #hud:not([data-role="pitch"]) .pitch-dock { display: none; }
.pitch-name { width: 0; min-width: 100%; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 2px solid var(--hgold); border-radius: 8px; background: var(--panel); box-shadow: var(--panel-edge); color: #fff; white-space: nowrap; }
.pitch-name[hidden] { display: none; }
.pitch-name .brk { flex: none; width: 20px; height: 20px; }
.pitch-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: italic 800 17px/1 var(--cond); text-transform: uppercase; }
.pitch-name .pitch-lv { flex: none; margin-left: 0; }
.pitch-name span { flex: none; margin-left: auto; font: italic 700 14px/1 var(--cond); color: var(--hmuted); }
.pitch-dock .pc-cell .brk { width: 22px; height: 22px; }
.pc-cell b .pitch-lv { font-size: 11px; }
.pc-cell .pitch-cells { width: 52px; margin-top: 2px; }
.pc-kmh { position: absolute; right: 5px; top: 3px; font: italic 700 10px/1 var(--cond); color: var(--hmuted); }
/* a phone's pitches: one button that opens them as a wheel (pitch-wheel.js) in place of the grid */
.pitch-wheel-btn { display: none; }
.pitch-wheel { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.pitch-wheel[hidden] { display: none; }
.pitch-wheel.sticky { pointer-events: auto; background: #050c1d40; }
.pw-ring { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.pw-ring::before { content: ''; position: absolute; left: -117px; top: -117px; width: 234px; height: 234px; border-radius: 50%; border: 2px solid var(--hgold); background: radial-gradient(circle, #0a1731cc 0 26%, #17315ee6 27%, #0a1731f2 100%); box-shadow: var(--panel-edge); transform: scale(.3); opacity: 0; transition: transform .16s cubic-bezier(.2, .9, .3, 1.2), opacity .1s; }
.pitch-wheel.open .pw-ring::before { transform: none; opacity: 1; }
.pw-item { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #e5bd5a55; border-radius: 50%; background: linear-gradient(180deg, #13284e, #0a1630); color: #fff; line-height: 1; transform: translate(0, 0) scale(.4); opacity: 0; transition: transform .16s cubic-bezier(.2, .9, .3, 1.25), opacity .1s, background .08s; }
.pw-item[hidden] { display: none; }
.pitch-wheel.open .pw-item { transform: translate(calc(var(--dx) * 80px), calc(var(--dy) * 80px)); opacity: 1; }
.pw-item .brk { width: 18px; height: 18px; }
.pw-item b { font: italic 800 15px/1 var(--cond); }
.pw-item .pitch-lv { margin: 1px 0 0; font-size: 9px; padding: 0 3px; }
.pw-item.on { border-color: var(--hgold); box-shadow: 0 0 0 1px #07112a, 0 0 12px #e5bd5a80; }
.pitch-wheel.open .pw-item.lit { transform: translate(calc(var(--dx) * 80px), calc(var(--dy) * 80px)) scale(1.18); border-color: #fff1c2; background: linear-gradient(180deg, #ffe08f, #e5b543); color: #10203f; box-shadow: 0 0 0 2px #07112a, 0 0 18px var(--pc); }
.pw-item.lit .brk path { stroke: #10203f; }
.pw-item.lit .brk polygon { fill: #10203f; stroke: #10203f; }
.pc-sub { padding: 6px 14px; border: 2px solid var(--hgold); border-radius: 8px; background: var(--panel); color: #fff3cf; font: italic 700 15px var(--cond); pointer-events: auto; cursor: pointer; }
.pc-sub[hidden] { display: none; }
#hud .throw-btn { pointer-events: auto; color: #10203f; border: 2px solid #fff1c2; background: linear-gradient(180deg, #ffe08f, #e5b543); box-shadow: 0 4px 0 #8e6a1f, 0 8px 20px #050c1d70; border-radius: 10px; font: italic 800 24px var(--cond); }
/* a finger's aim: the stick over 投球！ (beside it on a phone: controls.js), its knob the throw button's gold */
#hud .field-panel .pitchbar { position: relative; inset: auto; }
#hud .aim-stick { position: absolute; right: 0; bottom: calc(100% + 12px); width: 112px; height: 112px; border: 2px solid var(--hgold); border-radius: 50%; background: radial-gradient(circle, #0a173199 0 34%, #17315ecc 35%, #0a1731e6 100%); box-shadow: var(--panel-edge); pointer-events: auto; touch-action: none; }
#hud .aim-stick[hidden] { display: none; }
#hud .aim-stick::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed var(--hgold-soft); pointer-events: none; }
#hud .aim-stick i { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; border: 2px solid #fff1c2; border-radius: 50%; background: linear-gradient(180deg, #ffe08f, #e5b543); box-shadow: 0 3px 0 #8e6a1f, 0 6px 14px #050c1d80; transition: transform .14s ease-out; pointer-events: none; }
#hud .aim-stick.held { border-color: #fff1c2; }
#hud .aim-stick.held i { transition: none; }

/* ---- what goes round the cards ---- */
/* the swing's result: bottom centre, between the cards */
#hud:not(.lele-hud) .swing-feedback { left: calc(50% - 162px); bottom: calc(24px + var(--safe-b)); background: var(--panel); border: 1px solid var(--hgold-soft); border-top: 3px solid #78daba; box-shadow: var(--panel-edge); }
#hud:not(.lele-hud) .swing-feedback.sweet { border-top-color: var(--hgold); }
#hud:not(.lele-hud) .swing-feedback[data-grade="miss"] { border-top-color: #ec9182; }
/* the skip button stands clear of the grid */
.skip-btn, .hr-replay-btn { right: calc(20px + var(--safe-r)); }
/* a home run's replay, as the broadcast shows it: the numbers on the hit, lower left, as it comes down */
.replay-stats { position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(8.5% + 14px); display: flex; gap: 2px; padding: 8px 6px; background: var(--panel); border: 2px solid var(--hgold); border-radius: 10px; box-shadow: var(--panel-edge); color: var(--htext); opacity: 0; transform: translateX(-24px); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.3, .4, 1); }
.replay-stats.on { opacity: 1; transform: none; }
.replay-stats:empty { display: none; }
.replay-stats > div { display: flex; flex-direction: column; padding: 0 14px; }
.replay-stats > div + div { border-left: 1px solid var(--hline); }
.replay-stats small { font: italic 700 12px/1.2 var(--cond); color: var(--hgold); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.replay-stats b { font: italic 800 30px/1 var(--cond); white-space: nowrap; }
.replay-stats i { margin-left: 3px; font: italic 700 15px var(--cond); color: var(--hmuted); }

/* the pickoff indicator: opened where the right button went down */
.pickoff-menu { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 8; }
.pickoff-menu[hidden] { display: none; }
.po-center { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--hgold); box-shadow: 0 0 0 3px #0b1833aa; }
.po-arrow { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--hgold-soft); color: #fff; font: 700 13px var(--font); white-space: nowrap; }
.po-arrow em { font-style: normal; color: var(--hgold); font-size: 16px; }
.po-arrow[data-b="1"] { left: 86px; top: 0; }
.po-arrow[data-b="2"] { left: 0; top: -58px; }
.po-arrow[data-b="3"] { left: -86px; top: 0; }
.po-arrow.off { opacity: .35; }
.po-arrow.pick:not(.off) { background: var(--hgold); color: #10203f; border-color: #fff4cf; }
.po-arrow.pick:not(.off) em { color: #10203f; }
.po-left { position: absolute; left: 0; top: 44px; transform: translateX(-50%); white-space: nowrap; font: 600 11px var(--font); color: #fff4cf; text-shadow: 0 1px 3px #050c1d; }

/* a finger's bunt: by the left thumb, over the batter's card */
.bunt-btn { position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(172px + var(--safe-b)); width: 78px; height: 78px; border-radius: 50%; border: 2px solid var(--hgold); background: var(--panel); color: #fff; font: italic 800 20px var(--cond); box-shadow: var(--panel-edge); touch-action: none; }
.bunt-btn[hidden] { display: none; }
.bunt-btn.on { background: linear-gradient(180deg, #ffe08f, #e5b543); color: #10203f; }

/* ---- a phone, either way up: everything smaller, the same places ---- */
html.short #hud { --hero-w: 252px; --foe-w: 286px; --bug-h: 58px; }
html.short #hud .bug { top: calc(8px + var(--safe-t)); left: calc(10px + var(--safe-l)); border-radius: 8px; }
html.short #hud .bug-team { min-width: 112px; gap: 5px; padding: 0 8px 0 9px; }
html.short #hud .bug-icon { font-size: 14px; }
html.short #hud .bug-team b { font-size: 15px; }
html.short #hud .bug-runs { font-size: 22px; min-width: 16px; }
html.short #hud .bug-mid { padding: 0 8px; }
html.short #hud .bug-inning { font-size: 22px; }
html.short #hud .bug-inning .arrow { font-size: 11px; }
html.short #hud .bug-half { font-size: 10px; }
html.short #hud .bug-diamond { width: 58px; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* (a phone: the bases open the field's panel; with a runner on and the panel closed they pulse, a tap target) */
html.short #hud .bug-diamond::after { content: '▾'; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); color: var(--hgold); font: 700 10px/1 var(--font); opacity: .75; }
html.short #hud .bug-diamond[aria-expanded="true"]::after { content: '▴'; }
html.short #hud .bug-diamond:focus-visible { outline: 2px solid var(--hgold); outline-offset: -3px; border-radius: 6px; }
html.short #hud .bug-diamond.mf-cue { animation: bugBasesCue 1.15s ease-in-out infinite; }
html.short #hud .bug-diamond.mf-cue .bug-base.on i { animation: bugBaseCue 1.15s ease-in-out infinite; }
html.short #hud .bug-diamond.mf-cue::after { opacity: 1; }
@keyframes bugBasesCue { 50% { background: radial-gradient(closest-side, #ffd76640, transparent); box-shadow: inset 0 0 0 2px #ffd766aa; } }
@keyframes bugBaseCue { 50% { transform: rotate(45deg) scale(1.22); box-shadow: 0 0 14px #ffd766; } }
@media (prefers-reduced-motion: reduce) { html.short #hud .bug-diamond.mf-cue, html.short #hud .bug-diamond.mf-cue .bug-base.on i { animation: none; } html.short #hud .bug-diamond.mf-cue { box-shadow: inset 0 0 0 2px #ffd766aa; } }
html.short #hud .bug-diamond .bug-base i { left: 5px; top: 5px; width: 12px; height: 12px; }
html.short #hud .bug-count { padding: 0 9px 0 8px; gap: 2px; }
html.short #hud .bug-count span { font-size: 12px; width: 10px; }
html.short #hud .bug-count i { width: 9px; height: 9px; }
html.short #hud .hud-tools > .icon-btn, html.short #hud .hud-tools > .popover-anchor > .icon-btn { width: 38px; height: 38px; font-size: 16px; }
html.short .live-player.hero { left: calc(10px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); min-height: 76px; padding: 7px 10px 7px 84px; border-radius: 8px; }
html.short .live-player.hero .lp-face { left: 7px; bottom: 7px; width: 70px; height: 80px; border-radius: 9px 9px 6px 6px; }
html.short .live-player.hero .lp-name { font-size: 19px; margin-top: 1px; }
html.short .live-player.hero .lp-sub { font-size: 10px; margin: 0 0 2px; }
html.short .live-player.hero .live-stats b, html.short .live-player.foe .live-stats b { font-size: 16px; }
html.short .live-player.hero .live-stats span, html.short .live-player.foe .live-stats span { font-size: 9px; }
html.short .live-player.hero .live-stats, html.short .live-player.foe .live-stats { gap: 6px; }
html.short .live-player .live-who span { font-size: 11px; }
html.short .live-player .live-who b { font-size: 13px; }
html.short .live-player .live-today { display: none; }
html.short .live-player.foe { left: calc(10px + var(--safe-l)); top: calc(8px + var(--bug-h) + 6px + var(--safe-t)); min-height: 56px; padding: 6px 10px 6px 58px; border-radius: 8px; }
html.short .live-player.foe .lp-face { left: 6px; top: 6px; width: 44px; height: 44px; border-radius: 5px; }
html.short .live-player.foe .lp-name { font-size: 15px; }
html.short .live-player.foe .lp-sub { display: none; }
html.short .live-player.foe .lp-pitches { margin: 5px 0 0 -52px; gap: 4px; }
html.short .lp-pitch { padding: 2px 5px; grid-template-columns: 18px 1fr; column-gap: 3px; }
html.short .lp-pitch .brk { width: 18px; height: 18px; }
html.short .lp-pitch b { font-size: 12px; }
html.short .lp-pitch small { display: none; }
html.short .field-panel { right: calc(10px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); gap: 5px; }
html.short .base-diamond { width: 196px; height: 78px; border-radius: 8px; }
html.short .bd-lines { width: 36px; height: 36px; }
html.short .bd-home { top: calc(50% + 26px); width: 9px; height: 9px; }
html.short .bd-base[data-b="2"] { top: calc(50% - 26px); }
html.short .bd-base[data-b="1"] { left: calc(50% + 26px); }
html.short .bd-base[data-b="3"] { left: calc(50% - 26px); }
html.short .bd-base i { width: 12px; height: 12px; }
html.short .bd-base span { max-width: 58px; font-size: 11px; padding: 1px 4px; }
html.short .pitch-cross { --cell: 40px; --cellw: 52px; padding: 4px; gap: 3px; border-radius: 8px; }
html.short .pc-cell { flex-direction: row; gap: 3px; }
html.short .pc-cell .brk { width: 17px; height: 17px; }
html.short .pc-cell b { font-size: 14px; }
html.short .pc-cell small, html.short .pc-cell kbd { display: none; }
html.short .pc-cell.empty kbd { display: block; }
html.short .pc-sub { padding: 3px 10px; font-size: 12px; }
/* on a phone the grid stands beside your card (collapsed to its portrait), not over it;
   your card opened has no room beside it, so the grid steps aside until it closes again */
html.short .pitch-dock { left: calc(10px + var(--safe-l) + var(--card-w, 72px) + 8px); bottom: calc(10px + var(--safe-b)); gap: 4px; }
/* (the grid folded into the wheel's button, the pitch's name and 換投 beside it) */
/* (raised so the wheel opens round the button, not shifted up off the screen's bottom: pitch-wheel.js) */
html.short .pitch-dock { display: grid; grid-template-columns: auto auto; grid-template-areas: "name name" "wheel sub"; align-items: center; justify-items: start; gap: 5px 8px; bottom: calc(90px + var(--safe-b)); }
html.short .pitch-dock .pitch-cross { display: none; }
html.short .pitch-wheel-btn { grid-area: wheel; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; padding: 0; border: 2px solid var(--hgold); border-radius: 50%; background: radial-gradient(circle, #24427a 0 52%, #0a1731 54%); color: #fff; box-shadow: var(--panel-edge); pointer-events: auto; touch-action: none; cursor: pointer; }
html.short .pitch-wheel-btn::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px dotted #e5bd5a80; pointer-events: none; }
html.short .pitch-wheel-btn:disabled { opacity: .75; cursor: default; }
html.short .pitch-wheel-btn .brk { width: 18px; height: 18px; }
html.short .pitch-wheel-btn b { font: italic 800 17px/1 var(--cond); }
html.short .pitch-dock .pitch-name { grid-area: name; width: auto; min-width: 0; }
html.short .pitch-dock .pc-sub { grid-area: sub; }
html.short #hud:has(.live-player.hero.bc-expanded) .pitch-dock { display: none; }
html.short .pitch-name { padding: 3px 6px; gap: 4px; }
html.short .pitch-name b { font-size: 13px; }
html.short .pitch-name .brk { width: 15px; height: 15px; }
html.short .pitch-name span { font-size: 11px; }
html.short .pitch-dock .pc-cell .brk { width: 17px; height: 17px; }
html.short .pc-cell .pitch-cells, html.short .pc-kmh { display: none; }
html.short .pc-cell b .pitch-lv { font-size: 9px; margin-left: 2px; padding: 0 2px; }
html.short #hud .throw-btn { min-height: 46px; font-size: 19px; padding: 8px 20px; }
html.short #hud .aim-stick { position: relative; right: auto; bottom: auto; flex: none; align-self: flex-end; width: 108px; height: 108px; margin-right: 10px; }
html.short #hud:not(.lele-hud) .swing-feedback { left: calc(50% - 140px); bottom: calc(10px + var(--safe-b)); }
html.short #hud .action-guide { bottom: calc(10px + var(--safe-b)); max-width: calc(var(--gw) - 2 * (var(--hero-w) + 24px)); }
html.short .bunt-btn { left: calc(10px + var(--safe-l)); bottom: calc(96px + var(--safe-b)); width: 68px; height: 68px; font-size: 17px; }
html.short .skip-btn, html.short .hr-replay-btn { right: calc(12px + var(--safe-r)); }
html.short .replay-stats { left: calc(12px + var(--safe-l)); bottom: calc(6% + 8px); padding: 5px 4px; }
html.short .replay-stats b { font-size: 22px; }
/* the narrowest phones: the opponent's card gives way to the play */
@media (max-width: 600px) and (orientation: portrait) {
  html:not(.turned) .live-player.foe { display: none; }
}

/* a skill's cut-in slides in between the two cards, clear of both */
#hud:not(.lele-hud) .cutins { top: 44%; }
#hud:not(.lele-hud) .cutin { border-block: 2px solid transparent; }
#hud:not(.lele-hud) .cutin::before { inset: -2px 0; border-top: 2px solid var(--hgold); border-bottom: 2px solid var(--hgold); }
html.short #hud:not(.lele-hud) .cutins { top: 45%; }
/* (pitching on a phone, your card drops its line) */
html.short #hud[data-role="pitch"] .live-player.hero .lp-sub, html.short #hud[data-role="pitch"] .live-player.hero .live-who em { display: none; }

/* the role and number never give way; the team's name does */
.live-player .live-who > span, .live-player .live-who > b { flex: none; }
.live-player .live-who > em { min-width: 0; }
/* Keep the portrait inside all four panel edges at every card height. */
.live-player.hero .lp-face { top: 10px; height: auto; }
html.short .live-player.hero .lp-face { top: 7px; height: auto; }
/* a pitcher's cut-in comes in higher, over the pitch grid */
#hud[data-role="pitch"]:not(.lele-hud) .cutins { top: 35%; }
/* the phase chip keeps clear of the scoreboard */
#hud .phase-chip { left: max(50%, calc(530px + var(--safe-l))); }
html.short #hud .phase-chip { left: max(50%, calc(372px + var(--safe-l))); }
/* on a phone the guide sits in the gap between your card and the grid */
html.short #hud[data-role="pitch"] .action-guide { left: calc(10px + var(--hero-w) + 10px + var(--safe-l)); right: calc(218px + var(--safe-r)); transform: none; max-width: none; margin-inline: auto; width: fit-content; }
html.short .live-player .lp-extra { display: none; }
/* (the base sheet's compact card width stays out of the broadcast cards) */
html.short .live-player.hero { width: var(--hero-w); }
html.short .live-player.foe { width: var(--foe-w); }
/* a finger's bunt on a phone (batting, beside the batter's portrait: player-card.css) */
html.short .bunt-btn { bottom: calc(124px + var(--safe-b)); width: 60px; height: 60px; font-size: 16px; }
/* Reference artwork keeps its frame; preserve the complete face and hair. */
.lp-face .face.art { object-fit: contain; object-position: center; background: #faf8ef; }
.lp-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.live-player .skill-tag { display: inline-block; max-width: 100%; margin: 0; padding: 2px 7px; border: 1px solid #e5bd5a80; border-radius: 5px; background: #0a1731; color: #ffe098; font: 600 11px/1.3 var(--font); }
.skill-help { position: relative; display: inline-flex; max-width: 100%; pointer-events: auto; }
.live-player button.skill-tag { cursor: help; touch-action: manipulation; }
.live-player button.skill-tag:focus-visible { outline: 2px solid #fff4cf; outline-offset: 3px; }
.live-player:has(.skill-tooltip:not([hidden])) { z-index: 20; }
.skill-tooltip { position: absolute; z-index: 21; left: 0; bottom: calc(100% + 6px); width: 260px; max-width: calc(var(--gw) - 120px); padding: 10px 12px; border: 1px solid var(--hgold); border-radius: 8px; background: #0b1833; color: #f5f7fc; font: 500 13px/1.5 var(--font); white-space: normal; box-shadow: 0 5px 20px #0008; cursor: default; }
.skill-tooltip[hidden] { display: none; }
.skill-tooltip::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 100%; height: 7px; }
html.short .skill-tooltip { width: 235px; padding: 8px 10px; font-size: 12px; }
html:not(.short) .bunt-btn { bottom: calc(210px + var(--safe-b)); }
.matchup-popup .card .who { min-width: 0; }
.matchup-popup .card .who .skill-description { display: block; margin-top: 4px; white-space: normal; line-height: 1.4; }
.matchup-popup .card .who > b, .matchup-popup .card .who > small:not(.skill-description) { overflow: hidden; text-overflow: ellipsis; }
html.short .lp-skills { margin-top: 3px; }
html.short .live-player .skill-tag { padding: 1px 5px; font-size: 10px; }
#hud .flight-readouts { display: contents; }
#hud .hr-distance { position: absolute; z-index: 6; top: calc(18px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 8px; padding: 8px 17px; border: 2px solid var(--hgold); border-radius: 10px; background: var(--panel); color: var(--htext); box-shadow: var(--panel-edge); pointer-events: none; }
#hud .hr-distance[hidden] { display: none; }
.hr-distance span { font: 600 12px/1.2 var(--font); }
.hr-distance strong { font: italic 800 34px/1 var(--cond); font-variant-numeric: tabular-nums; color: #ffe098; min-width: 3ch; text-align: right; }
.hr-distance small { font: 600 15px var(--font); }
#hud.has-hr-distance .phase-chip { visibility: hidden; }
/* (their wrapper is display: contents, so a replay's fade must reach them) */
#hud.replaying :is(.hr-distance, .pitch-info) { opacity: 0; transition: opacity .2s; }
html.short #hud .hr-distance { gap: 6px; padding: 5px 10px; }
/* Flow the readouts below the tools on phones, including the rotated layout.
   The last pitch's speed must move down while the distance counter is shown. */
html.short #hud .flight-readouts { position: absolute; z-index: 6; top: calc(56px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
html.short #hud .flight-readouts > .hr-distance, html.short #hud .flight-readouts > .pitch-info { position: static; transform: none; }
html.short .hr-distance strong { font-size: 25px; }
html.short .hr-distance span { font-size: 10px; }
#hud .bug-icon .team-logo { display: block; width: 28px; height: 28px; }
html.short #hud .bug-icon .team-logo { width: 21px; height: 21px; }
/* tee-ball's column starts under the scoreboard */
#hud.lele-hud .live-matchup { top: calc(18px + var(--bug-h) + 10px + var(--safe-t)); }
html.short #hud.lele-hud .live-matchup { top: calc(8px + var(--bug-h) + 6px + var(--safe-t)); }
#hud.lele-hud .bug-count span { width: auto; min-width: 22px; font-size: 13px; white-space: nowrap; }
#hud.lele-hud .bug-count b { font: italic 700 15px var(--cond); color: #fff; white-space: nowrap; }