/* live_scene.css v20 — PTP Live Strike Zone
 * Companion to live_scene.js v20.
 * Modern digital strike zone with all-white plate, gold accents, navy backdrop.
 */

.ptp-live-scene {
    width: 100%;
    margin: 0;
    display: block;
}

/* outer wrap */
.ptp-live-wrap {
    background: linear-gradient(180deg, #0c2c54 0%, #07203f 100%);
    border: 1px solid rgba(232, 168, 60, 0.22);
    border-radius: 18px;
    padding: 18px 14px 18px 14px;
    box-shadow: 0 14px 48px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.ptp-live-wrap::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at top, rgba(232,168,60,0.06), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px);
    pointer-events:none;
}

/* title strip */
.ptp-live-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 4px 12px 4px;
    position: relative;
    z-index: 2;
}
.ptp-live-title-left,
.ptp-live-title-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ptp-live-eyebrow {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e8a83c;
    background: rgba(232, 168, 60, 0.10);
    border: 1px solid rgba(232, 168, 60, 0.35);
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 700;
}
.ptp-live-inning {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: #cfe0ff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ptp-live-bso {
    font-family: ui-monospace, Menlo, monospace;
    color: #cfe0ff;
    font-size: 16px;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 4px 10px;
    border-radius: 6px;
}
.ptp-live-bso b { color: #fff; font-weight: 700; }
.ptp-live-outs {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #9eb6d8;
    text-transform: uppercase;
}

/* last pitch banner */
.ptp-live-lastpitch {
    --famc: #cbb27a;
    margin: 0 4px 12px 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(232,168,60,0.22);
    border-left: 3px solid var(--famc);
    border-radius: 10px;
    padding: 10px 12px;
    position: relative;
    z-index: 2;
}
.ptp-live-lp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ptp-live-lp-row + .ptp-live-lp-row { margin-top: 6px; }
.ptp-live-lp-fam-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--famc);
    box-shadow: 0 0 10px var(--famc);
}
.ptp-live-lp-type {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}
.ptp-live-lp-velo {
    margin-left: auto;
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.ptp-live-lp-velo small {
    font-size: 11px;
    color: #cfe0ff;
    margin-left: 4px;
    font-weight: 600;
    letter-spacing: 0.12em;
}
.ptp-live-lp-result-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}
.ptp-live-lp-result-pill.strike { background:#a13434; border-color:#cc4949; }
.ptp-live-lp-result-pill.ball   { background:#1b4079; border-color:#3a6bb8; }
.ptp-live-lp-result-pill.foul   { background:#7a5a1e; border-color:#c08b2c; }
.ptp-live-lp-result-pill.play   { background:#d6a02b; color:#0c2c54; border-color:#f3c558; }

.ptp-live-hitchip {
    background: rgba(232,168,60,0.10);
    border: 1px solid rgba(232,168,60,0.35);
    color: #f3d486;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.ptp-live-hitchip b { color: #fff; margin-right: 4px; font-weight: 700; }

/* svg */
.ptp-live-svgwrap {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    max-width: 380px;
    padding: 4px 0;
}
.ptp-live-svg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* dots */
.ptp-pdot {
    cursor: pointer;
    transition: filter .12s ease, stroke-width .12s ease;
}
/* Hover effect uses filter glow + stroke widen — NO geometric transform.
   Scaling the dot would shift its hit area, causing rapid mouseenter/leave
   flicker as the cursor falls on/off the resized boundary. */
.ptp-pdot:hover {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 2px #fff);
}
.ptp-pdot--last {
    animation: ptpPdotPulse 1.8s ease-out infinite;
}
@keyframes ptpPdotPulse {
    0%   { filter: drop-shadow(0 0 0 currentColor); }
    50%  { filter: drop-shadow(0 0 6px currentColor); }
    100% { filter: drop-shadow(0 0 0 currentColor); }
}
.ptp-pdot-ring { pointer-events: none; }
.ptp-pdot-num  { pointer-events: none; }
.ptp-pdot-trail {
    animation: ptpTrailDraw .6s ease-out;
}
@keyframes ptpTrailDraw {
    from { stroke-dashoffset: 12; }
    to   { stroke-dashoffset: 0; }
}

/* legend */
.ptp-live-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    justify-content: center;
    margin: 10px 4px 0 4px;
    padding: 8px 0;
    border-top: 1px dashed rgba(255,255,255,0.08);
    position: relative;
    z-index: 2;
}
.ptp-live-legitem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b8cdec;
}
.ptp-live-legdot {
    width: 9px; height: 9px; border-radius: 50%;
}
.ptp-live-legring {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1.6px solid #ffd400;
    box-sizing: border-box;
}

/* mini pitch table */
.ptp-live-ptable {
    margin: 14px 4px 0 4px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.ptp-live-ptable-h,
.ptp-live-ptable-r {
    display: grid;
    grid-template-columns: 56px 1.4fr 60px 60px 1.4fr;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
}
.ptp-live-ptable-h {
    background: rgba(232,168,60,0.08);
    color: #e8a83c;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(232,168,60,0.18);
}
.ptp-live-ptable-r {
    color: #d6e3f5;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ptp-live-ptable-r--last {
    background: rgba(232,168,60,0.07);
    color: #fff;
}
.ptp-live-ptable-num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 700;
}
.ptp-live-ptable-fdot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.ptp-live-ptable-res { font-size: 10.5px; letter-spacing: 0.06em; }
.ptp-res-strike { color: #ff8270; }
.ptp-res-ball   { color: #6ea2ff; }
.ptp-res-foul   { color: #e8c66e; }
.ptp-res-play   { color: #ffd400; font-weight: 700; }
.ptp-res-pitch  { color: #c3d3ec; }

/* tooltip */
.ptp-live-tip {
    position: absolute;
    z-index: 9999;
    background: linear-gradient(180deg, #0c2c54 0%, #061a36 100%);
    border: 1px solid rgba(232,168,60,0.45);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 200px;
    max-width: 260px;
    color: #e6eefc;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    font-family: -apple-system, "Inter", "Helvetica Neue", sans-serif;
    pointer-events: none;
    opacity: 1;
    transition: opacity .12s ease;
}
/* Only animate the FIRST appearance, not every re-show */
.ptp-live-tip.ptp-live-tip--anim {
    animation: ptpTipIn .14s ease-out;
}
@keyframes ptpTipIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ptp-live-tip-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    margin-bottom: 6px;
}
.ptp-live-tip-h b { font-weight: 800; color: #e8a83c; }
.ptp-live-tip-dot { width: 9px; height: 9px; border-radius: 50%; }
.ptp-live-tip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.ptp-live-tip-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
}
.ptp-live-tip-grid > div span { color: #9eb6d8; letter-spacing: 0.04em; }
.ptp-live-tip-grid > div b   { color: #fff; font-weight: 700; }
.ptp-live-tip-res {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.10);
    color: #f3d486;
    font-size: 11.5px;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

/* flash on new pitch */
.ptp-live-flash .ptp-live-wrap {
    animation: ptpFlash .32s ease-out;
}
@keyframes ptpFlash {
    0%   { box-shadow: 0 14px 48px rgba(0,0,0,0.32), 0 0 0 0 rgba(232,168,60,0.6); }
    100% { box-shadow: 0 14px 48px rgba(0,0,0,0.32), 0 0 0 14px rgba(232,168,60,0); }
}

/* ============= MATCHUP EDGE INLINE (premium) ============= */
.ptp-live-edge {
    margin: 16px 0 4px 0;
    background: linear-gradient(180deg, #0c2c54 0%, #07203f 100%);
    border: 1px solid rgba(232, 168, 60, 0.35);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 14px 48px rgba(0,0,0,0.28);
    position: relative;
    overflow: hidden;
}
.ptp-live-edge::before {
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(circle at top right, rgba(232,168,60,0.10), transparent 60%);
    pointer-events: none;
}
.ptp-live-edge-h {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 14px;
    position: relative; z-index: 2;
}
.ptp-live-edge-titlewrap {
    display:flex; align-items:center; gap:8px;
}
.ptp-live-edge-eyebrow {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e8a83c;
    background: rgba(232,168,60,0.10);
    border:1px solid rgba(232,168,60,0.4);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}
.ptp-live-edge-titlewrap b {
    color: #fff;
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
}
.ptp-live-edge-score {
    display:flex; flex-direction:column; align-items:flex-end;
    line-height:1;
}
.ptp-live-edge-score-num {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 800;
    color: #e8a83c;
    font-size: 36px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 16px rgba(232,168,60,0.5);
}
.ptp-live-edge-score-lab {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9eb6d8;
    margin-top: 4px;
    font-family: ui-monospace, Menlo, monospace;
}
.ptp-live-edge-favor {
    margin-top: 6px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    font-family: ui-monospace, Menlo, monospace;
    padding: 3px 9px;
    border-radius: 999px;
}
.ptp-live-edge-favor.hitter  { background: #2c8a52; }
.ptp-live-edge-favor.pitcher { background: #a13434; }
.ptp-live-edge-favor.even    { background: #5a6b85; }

.ptp-live-edge-meta {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom: 12px;
    position: relative; z-index: 2;
}
.ptp-live-edge-vs {
    flex: 1 1 auto;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 10px;
    color: #cfe0ff;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ptp-live-edge-vs b { color:#fff; font-weight:700; }
.ptp-live-edge-vs span {
    color: #9eb6d8;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: ui-monospace, Menlo, monospace;
}

.ptp-live-edge-bullets {
    margin: 0 0 12px 0;
    padding: 0;
    list-style: none;
    position: relative; z-index: 2;
}
.ptp-live-edge-bullets li {
    color: #d6e3f5;
    font-size: 13px;
    line-height: 1.55;
    padding: 6px 0 6px 22px;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ptp-live-edge-bullets li:first-child { border-top:0; padding-top: 4px; }
.ptp-live-edge-bullets li::before {
    content: "▸";
    position: absolute; left: 4px; top: 6px;
    color: #e8a83c;
    font-size: 12px;
}

.ptp-live-edge-pitches {
    position: relative; z-index: 2;
}
.ptp-live-edge-pitches-h {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 14px 0 8px 0;
    font-weight: 700;
}
.ptp-live-edge-pitch {
    display: grid;
    grid-template-columns: 28px 1.6fr 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    margin-bottom: 6px;
}
.ptp-live-edge-pitch-fdot {
    width: 12px; height: 12px; border-radius: 50%;
    justify-self:center;
}
.ptp-live-edge-pitch-name {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.ptp-live-edge-pitch-name small {
    display:block;
    color:#9eb6d8;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: ui-monospace, Menlo, monospace;
}
.ptp-live-edge-pitch-stat {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: #d6e3f5;
    text-align: right;
}
.ptp-live-edge-pitch-stat b {
    display:block;
    color:#fff;
    font-size: 14px;
    font-weight: 800;
}
.ptp-live-edge-pitch-stat span {
    color:#9eb6d8;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Edge impact accent on first row */
.ptp-live-edge-pitch--top {
    border-color: rgba(232,168,60,0.40);
    background: rgba(232,168,60,0.07);
}

/* premium lock state */
.ptp-live-edge--locked {
    text-align: center;
    padding: 30px 20px;
}
.ptp-live-edge-lockicon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(232,168,60,0.10);
    border: 1.5px solid rgba(232,168,60,0.45);
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #e8a83c;
    font-size: 22px;
    margin-bottom: 12px;
}
.ptp-live-edge--locked h4 {
    color: #fff;
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 18px;
    margin: 0 0 8px 0;
    letter-spacing: 0.02em;
}
.ptp-live-edge--locked p {
    color: #b8cdec;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px 0;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.ptp-live-edge-cta {
    display: inline-block;
    padding: 10px 22px;
    background: linear-gradient(180deg, #e8a83c 0%, #c98a25 100%);
    color: #0c2c54;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(232,168,60,0.32);
    border: 0;
    cursor: pointer;
    font-family: "Inter", -apple-system, sans-serif;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ptp-live-edge-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(232,168,60,0.45);
}

/* mobile-first refinements */
@media (max-width: 520px) {
    .ptp-live-title { flex-wrap:wrap; gap: 8px; }
    .ptp-live-title-right { flex-wrap: wrap; }
    .ptp-live-lp-velo { font-size: 20px; }
    .ptp-live-ptable-h,
    .ptp-live-ptable-r {
        grid-template-columns: 44px 1.4fr 50px 50px 1.3fr;
        font-size: 11px;
        padding: 7px 8px;
    }
    .ptp-live-svgwrap { max-width: 320px; }
    .ptp-live-edge { padding: 14px 12px; }
    .ptp-live-edge-score-num { font-size: 30px; }
    .ptp-live-edge-pitch { grid-template-columns: 22px 1.6fr 1fr 1fr; gap: 6px; padding: 8px; }
}

/* ===============================================================
 *  v23 — LIVE ARENA (3-col: [batter header+status] [vs+scene] [pitcher header+predictor])
 * =============================================================== */
.lg-live-arena {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr minmax(240px, 320px);
    gap: 14px;
    align-items: stretch;
    margin: 12px 0 18px;
}
.lg-arena-side {
    background: linear-gradient(180deg, #0c2c54 0%, #07203f 100%);
    border: 1px solid #1a3766;
    border-radius: 12px;
    padding: 12px 14px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lg-arena-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #1a3766;
}
.lg-arena-header .lg-matchup-role {
    color: #8aa7d4;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.lg-arena-header .lg-matchup-name {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    word-break: break-word;
}
.lg-arena-header .lg-matchup-hand {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.lg-arena-header .lg-matchup-stats {
    color: #c5d3e8;
    font-size: 11px;
    font-family: ui-monospace, Menlo, monospace;
    line-height: 1.3;
}
.lg-arena-header--pitcher { text-align: left; }
.lg-arena-side-label {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.lg-arena-vs {
    text-align: center;
    margin-bottom: 8px;
    padding: 6px 0;
}
.lg-arena-vs .lg-matchup-vs-text {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 14px;
    border: 1px solid #1a3766;
    border-radius: 6px;
    background: rgba(7,32,63,0.6);
}
.lg-count-bases-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: center;
}
.lg-count-bases-stack .lg-count,
.lg-count-bases-stack .lg-bases {
    width: 100%;
}
.lg-arena-center {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.lg-arena-side--pitcher #lg-pitch-predictor-host {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===============================================================
 *  PITCH PREDICTOR (inline, premium-gated)
 * =============================================================== */
.ptp-live-predictor {
    background: linear-gradient(180deg, #07203f 0%, #051934 100%);
    border: 1px solid #1a3766;
    border-radius: 10px;
    padding: 12px;
    color: #d6e4f7;
    font-family: 'Inter', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.ptp-live-predictor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 0%, rgba(232,168,60,0.10), transparent 60%);
    pointer-events: none;
}
.ptp-live-pp-h {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid #143461;
    padding-bottom: 8px;
    position: relative;
    z-index: 1;
}
.ptp-live-pp-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ptp-live-pp-eyebrow {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ptp-live-pp-titlewrap b {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ptp-live-pp-conf {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.ptp-live-pp-conf-num {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 22px;
    font-weight: 700;
}
.ptp-live-pp-conf-lab {
    color: #7ea1cf;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 2px;
}
.ptp-live-pp-top {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.ptp-live-pp-zone {
    display: block;
    width: 96px;
    height: 96px;
}
.ptp-live-pp-toptype {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ptp-live-pp-toptype-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.ptp-live-pp-toptype-row b {
    color: #fff;
    font-weight: 700;
}
.ptp-live-pp-fdot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}
.ptp-live-pp-toptype-prob {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.ptp-live-pp-toptype-zone {
    color: #9eb6d8;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ptp-live-pp-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.ptp-live-pp-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ptp-live-pp-bar-lab {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d6e4f7;
    font-size: 11px;
}
.ptp-live-pp-bar-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ptp-live-pp-bar-pct {
    color: #e8a83c;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
}
.ptp-live-pp-bar-track {
    background: #0a2547;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    border: 1px solid #143461;
}
.ptp-live-pp-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 6px currentColor;
}
.ptp-live-pp-reason {
    color: #9eb6d8;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    line-height: 1.4;
    padding-top: 6px;
    border-top: 1px solid #143461;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.ptp-live-pp-reason-glyph {
    color: #e8a83c;
    flex-shrink: 0;
}

/* ===== ACCURACY block (last pitch + game %) ===== */
.ptp-live-pp-acc {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #143461;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
    font-family: ui-monospace, Menlo, monospace;
}
.ptp-live-pp-acc-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 2px;
}
.ptp-live-pp-acc-pname {
    color: #fff;
    font-family: 'Barlow', 'Bebas Neue', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
}
.ptp-live-pp-acc-htag {
    color: #e8a83c;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
.ptp-live-pp-acc-lab {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f88ad;
    font-weight: 700;
    margin-bottom: 4px;
}
.ptp-live-pp-acc-last {
    background: rgba(8, 28, 58, 0.55);
    border: 1px solid #143461;
    border-radius: 6px;
    padding: 8px 10px;
}
.ptp-live-pp-acc-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ptp-live-pp-acc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #c8d6ee;
}
.ptp-live-pp-acc-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
}
.ptp-live-pp-acc-tick--ok {
    background: #1f8a4d;
    color: #fff;
    box-shadow: 0 0 6px rgba(31, 138, 77, 0.5);
}
.ptp-live-pp-acc-tick--miss {
    background: #b03434;
    color: #fff;
    box-shadow: 0 0 6px rgba(176, 52, 52, 0.4);
}
.ptp-live-pp-acc-rowlab {
    color: #6f88ad;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 9px;
    font-weight: 700;
    min-width: 28px;
}
.ptp-live-pp-acc-rowval {
    color: #fff;
    font-weight: 600;
}
.ptp-live-pp-acc-rowpred {
    color: #6f88ad;
    font-size: 10px;
    font-style: italic;
    margin-left: auto;
}
.ptp-live-pp-acc-game {
    background: linear-gradient(180deg, rgba(13, 47, 92, 0.65) 0%, rgba(7, 32, 63, 0.65) 100%);
    border: 1px solid #1c4a82;
    border-radius: 6px;
    padding: 8px 10px;
    position: relative;
}
.ptp-live-pp-acc-stats {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.ptp-live-pp-acc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
}
.ptp-live-pp-acc-stat b {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ptp-live-pp-acc-stat i {
    font-style: normal;
    color: #6f88ad;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}
.ptp-live-pp-acc-stat--both b {
    color: #e8a83c;
    text-shadow: 0 0 8px rgba(232, 168, 60, 0.45);
}
.ptp-live-pp-acc-n {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 9px;
    color: #6f88ad;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* locked state */
.ptp-live-predictor--locked {
    text-align: center;
    padding: 18px 14px;
    background: linear-gradient(180deg, #07203f 0%, #051934 100%);
    border-color: #e8a83c;
}
.ptp-live-pp-lockicon {
    font-size: 22px;
    margin-bottom: 6px;
}
.ptp-live-predictor--locked h5 {
    color: #e8a83c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.ptp-live-predictor--locked p {
    color: #b8caea;
    font-size: 11px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.ptp-live-pp-cta {
    display: inline-block;
    background: #e8a83c;
    color: #0c2c54;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.18s ease;
}
.ptp-live-pp-cta:hover { background: #f3c558; }

/* ===============================================================
 *  v25 — Pitch Predictor rail placement (directly under box score)
 * =============================================================== */
/* The .lg-bs-panel is a flex column; force the active pane to size to
   its content so the predictor host immediately follows the lineup
   rather than being pushed to the bottom of the column. */
.lg-bs-panel .lg-bs-pane.active {
    flex: 0 0 auto;
    overflow-y: visible;
}
.lg-pp-rail {
    margin: 0 12px 14px;
    padding-top: 14px;
    border-top: 1px solid #1a3766;
    flex: 0 0 auto;
}
.lg-pp-rail:empty {
    display: none;
}
.lg-pp-rail .ptp-live-predictor {
    /* The right rail is narrow; let the predictor breathe */
    padding: 12px 10px;
}

/* mobile: predictor stays beneath box score, just shrinks naturally */
@media (max-width: 900px) {
    .lg-pp-rail { margin: 0 8px 12px; padding-top: 12px; }
}
@media (max-width: 520px) {
    .ptp-live-pp-top { grid-template-columns: 84px 1fr; gap: 10px; }
    .ptp-live-pp-zone { width: 84px; height: 84px; }
    .ptp-live-pp-conf-num { font-size: 18px; }
    .ptp-live-pp-toptype-prob { font-size: 20px; }
}