/* ==========================================================================
   CricScoring - broadcast/overlay.css
   OVERLAY BASE - LAYOUT + SCOREBOARD COMPONENTS
   Moved from legacy overlay.html  lines 11-472
   ==========================================================================
   Everything the overlay draws before the animation/fx layers run:
   bottom bar, team + batsman + bowler panels, centre status strip, ball
   chips, target box, innings-break / result lower thirds, corner popups
   and the full-screen scoreboard panel.
   Accent colours resolve through --bc-* / --fx* variables so a theme can
   recolour the whole overlay from one file (broadcast/themes/<id>/theme.css).
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { width: 100vw; height: 100vh; background: transparent; overflow: hidden; font-family: 'Roboto Condensed', 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* MAIN BOTTOM BAR */
#overlay-container { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); opacity: 1; transform: translateY(0); z-index: 1000; }
#overlay-container.hidden { transform: translateY(100%); opacity: 0; pointer-events: none;}
.scoreboard-bar { position: relative; display: flex; align-items: flex-end; width: 100%; height: 120px; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.4)); }
.cyan-bg-bar { position: absolute; left: -50px; right: -50px; bottom: 0; height: 95px; background: linear-gradient(90deg, var(--bc-cyan-1, #10dbd8), var(--bc-cyan-2, #05c2c2)); transform: skewX(-15deg); z-index: 1; }

.so-badge { position: absolute; top: -42px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, var(--bc-danger, #e51a3a), var(--bc-danger-dark, #b01024)); color: white; font-size: 22px; font-weight: 900; padding: 6px 32px; border-radius: 6px 6px 0 0; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 -3px 10px rgba(0,0,0,0.3); z-index: 0; opacity: 0; transition: 0.4s ease; }
.so-badge.active { opacity: 1; top: -38px; }

/* LEFT TEAM */
.team-left-sec { position: relative; width: 190px; height: 95px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.team-left-bg { position: absolute; inset: 0; left: -50px; background: linear-gradient(135deg, var(--bc-navy-1, #182855), var(--bc-navy-2, #22376e)); transform: skewX(-15deg); border-right: 3px solid var(--bc-cyan-1, #10dbd8); box-shadow: 5px 0 10px rgba(0,0,0,0.2); }
.team-name-text { position: relative; z-index: 4; color: #ffffff; font-size: 24px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; letter-spacing: 1px; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); }

/* BATSMAN SEC */
.batsman-sec { position: relative; width: 570px; height: 95px; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-left: 45px; padding-right: 25px; overflow: hidden; }
.bat-row { display: flex; align-items: center; height: 42px; }
.ind-arrow { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid transparent; margin-right: 12px; visibility: hidden; }
.ind-arrow.active { border-left-color: #ff0b4c; visibility: visible; }
.bat-name { flex-grow: 1; color: #111111; font-size: 32px; font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-runs { width: 65px; text-align: right; color: #111111; font-size: 36px; font-weight: 900; }
.bat-balls { width: 55px; text-align: right; color: #222222; font-size: 24px; font-weight: 700; padding-top: 6px; opacity: 0.9;}

.splash-batsman { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bc-danger, #e51a3a), #990011); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; overflow: hidden; border-radius: inherit; }
.splash-batsman.active { opacity: 1; }
.wkt-text { color: #ffffff; font-size: 56px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 15px rgba(255,11,76,0.5); transform: scale3d(0.8, 0.8, 1); opacity: 0; margin: 0; padding: 0; line-height: 1; }
.splash-batsman.active .wkt-text { animation: textPopSharp 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* CENTER SEC */
.center-sec { position: relative; width: 400px; display: flex; flex-direction: column; align-items: center; z-index: 4; }
.center-top { position: relative; width: 100%; height: 85px; display: flex; align-items: center; justify-content: center; }
.center-top-bg { position: absolute; inset: 0; background: #0c0b2c; transform: skewX(-15deg); border-left: 2px solid rgba(255,255,255,0.15); border-right: 2px solid rgba(255,255,255,0.15); box-shadow: 0 5px 15px rgba(0,0,0,0.6); }
.center-content { position: relative; z-index: 5; display: flex; align-items: baseline; gap: 20px; color: white; }
.c-team { font-size: 30px; font-weight: 700; letter-spacing: 1px; opacity: 0.9; padding-bottom: 8px;}
.c-score { font-size: 80px; font-weight: 900; letter-spacing: -2px; line-height: 80px; text-shadow: 0 4px 10px rgba(0,0,0,0.6);}
.c-overs { font-size: 30px; font-weight: 700; opacity: 0.85; padding-bottom: 8px;}

/* CAROUSEL */
.center-bot { position: relative; min-width: 90%; width: max-content; padding: 0 35px; height: 35px; margin-top: -1px; display: flex; align-items: center; justify-content: center; z-index: 6; }
.center-bot-bg { position: absolute; inset: 0; background: #ffffff; transform: skewX(-15deg); box-shadow: 0 5px 10px rgba(0,0,0,0.4); }
.c-status { position: relative; z-index: 7; color: #000000; font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; opacity: 1; transition: opacity 0.4s ease; }

/* BOWLER SEC & TARGET SEC */
.bowler-sec { position: relative; width: 570px; height: 95px; z-index: 2; padding-left: 25px; padding-right: 45px; overflow: hidden; }
#bowl-std-content { transition: opacity 0.3s ease; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.bowl-top-row { display: flex; align-items: center; justify-content: space-between; height: 40px; padding-bottom: 2px;}
.bowl-name { color: #111111; font-size: 32px; font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px;}
.bowl-fig-box { display: flex; align-items: baseline; gap: 10px;}
.bowl-fig { color: #111111; font-size: 36px; font-weight: 900; text-align: right; }
.bowl-ov { color: #222222; font-size: 24px; font-weight: 700; }
.bowl-bot-row { display: flex; align-items: center; gap: 10px; height: 46px;}

.tv-ball { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; box-shadow: 0 3px 6px rgba(0,0,0,0.3); }
.tv-ball.dot { background: #0c0b2c; color: #ffffff; } .tv-ball.run { background: #ffffff; color: #111111; border: 1px solid #ccc;} 
.tv-ball.wkt { background: var(--bc-danger, #e51a3a); color: #ffffff; font-size: 24px; font-weight: 900; border: 2px solid white;} 
.tv-ball.four { background: var(--bc-gold, #facc15); color: #000000; border: 2px solid #ffffff; } .tv-ball.six { background: #8b5cf6; color: #ffffff; border: 2px solid #ffffff; } 

#target-box-sec { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 25px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.target-box-title { color: #444; font-size: 16px; font-weight: 900; line-height: 1; margin-bottom: 6px; letter-spacing: 1px; }
.target-box-eq { color: #111; font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: 0.5px; text-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.splash-bowler { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #1a1a3a 0%, #08081c 80%, #000000 100%); box-shadow: inset 0 0 20px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; overflow: hidden; border-radius: inherit; }
.splash-bowler.active { opacity: 1; }
.shining-text { font-size: 56px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #ffffff; margin: 0; padding: 0; line-height: 1; transform: scale3d(0.8, 0.8, 1); opacity: 0; text-shadow: 0 4px 10px rgba(0,0,0,0.6); }
.splash-bowler.active #bs-text { animation: textPopSharp 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.bs-four { color: var(--bc-gold, #facc15); text-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 10px rgba(250,204,21,0.4); }
.bs-six { color: #a855f7; color: #e9d5ff; text-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 10px rgba(168,85,247,0.4); }
.bs-nb { color: #f97316; text-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 10px rgba(249,115,22,0.4); }
.bs-fh { color: #06b6d4; color: #cffafe; text-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 10px rgba(6,182,212,0.4); }
.glare { position: absolute; top: 0; left: -50%; width: 30%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); z-index: 15; animation: glareSweep 2s ease-in-out infinite; }

@keyframes textPopSharp { 0% { transform: scale3d(0.8, 0.8, 1); opacity: 0; } 15% { transform: scale3d(1.1, 1.1, 1); opacity: 1; } 25% { transform: scale3d(1, 1, 1); opacity: 1; } 85% { transform: scale3d(1.02, 1.02, 1); opacity: 1; } 95% { transform: scale3d(1.05, 1.05, 1); opacity: 0; } 100% { transform: scale3d(1.05, 1.05, 1); opacity: 0; } }
@keyframes glareSweep { 0% { left: -50%; } 50% { left: 150%; } 100% { left: 150%; } }

/* RIGHT TEAM */
.team-right-sec { position: relative; width: 190px; height: 95px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.team-right-bg { position: absolute; inset: 0; right: -50px; background: linear-gradient(135deg, var(--bc-danger, #e51a3a), var(--bc-danger-dark, #b01024)); transform: skewX(-15deg); border-left: 3px solid #ff4d4d; box-shadow: -5px 0 10px rgba(0,0,0,0.2); }

/* =========================================================
   🔥 NEW: INNINGS BREAK & MATCH SUMMARY (BOTTOM BAR) 🔥
   ========================================================= */
/* ───────────────────────────────────────────────────────────────
   INNINGS BREAK / MATCH END — "Hero TARGET block"
   small stacked label | team score pill | HUGE gold target
   | chasing team + equation. Same family as the scoreboard.
   ─────────────────────────────────────────────────────────────── */
.summary-sec { position: relative; width: 100%; height: 95px; display: flex; align-items: center; justify-content: center; z-index: 5; overflow: hidden; }
.summary-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(16,219,216,.16), transparent 60%),
        linear-gradient(135deg, #0f172a, #1e3a8a);
    border-top: 4px solid var(--bc-cyan-1, #10dbd8); box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}
.ib-wrap{ position:relative; z-index:6; display:flex; align-items:stretch; width:100%; height:100%; }

.ib-team{ position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; overflow:hidden; }
.ib-team-a{ background: linear-gradient(120deg,var(--bc-danger, #e51a3a),#8f0d1e); }
.ib-team-b{ background: linear-gradient(240deg,#1d4ed8,#12275e); justify-content:flex-end; }
.ib-team::after{
    content:""; position:absolute; top:0; bottom:0; width:64px; background: rgba(0,0,0,.20);
}
.ib-team-a::after{ right:-30px; transform: skewX(-15deg); }
.ib-team-b::after{ left:-30px;  transform: skewX(-15deg); }

.ib-team-inner{ position:relative; z-index:2; padding:0 32px; min-width:0; }
.ib-team-b .ib-team-inner{ text-align:right; }
.ib-team-lbl{
    font-size:9.5px; font-weight:900; letter-spacing:3px; text-transform:uppercase;
    color: rgba(255,255,255,.72); line-height:1.2;
}
.ib-team-name{
    font-size:23px; font-weight:900; letter-spacing:1px; text-transform:uppercase; line-height:1.12;
    text-shadow:0 2px 6px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ib-team-score{
    font-size:26px; font-weight:900; color:#fff; line-height:1.12; font-variant-numeric:tabular-nums;
    text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.ib-team-score i{ font-style:normal; font-size:15px; color: rgba(255,255,255,.72); font-weight:800; }
.ib-team-eq{
    font-size:16px; font-weight:900; color:#bfdbfe; letter-spacing:.7px; text-transform:uppercase;
    text-shadow:0 2px 6px rgba(0,0,0,.5);
}

.ib-mid{
    position:relative; z-index:8; flex:0 0 300px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background: linear-gradient(180deg,#0b1430,#0a0f24);
    border-left:2px solid rgba(255,255,255,.13); border-right:2px solid rgba(255,255,255,.13);
    box-shadow: 0 0 26px rgba(0,0,0,.55);
}
.ib-mid-wide{ flex:1 1 auto; }
.ib-ribbon{
    background:var(--bc-cyan-1, #10dbd8); color:#04121a; font-size:10.5px; font-weight:900; letter-spacing:3px;
    text-transform:uppercase; padding:3px 18px; border-radius:3px; box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.ib-target-box{
    margin-top:3px; display:flex; flex-direction:column; align-items:center; padding:1px 24px 3px;
}
.ib-target-lbl{ font-size:10px; font-weight:900; letter-spacing:4px; color:var(--bc-gold, #facc15); text-transform:uppercase; }
.ib-target-num{
    font-size:50px; font-weight:900; color:var(--bc-gold, #facc15); line-height:1; font-variant-numeric:tabular-nums;
    text-shadow: 0 3px 14px rgba(0,0,0,.75), 0 0 30px rgba(250,204,21,.4);
}
.ib-result-line{
    margin-top:4px; padding:0 22px; text-align:center;
    font-size:27px; font-weight:900; color:var(--bc-gold, #facc15); text-transform:uppercase; letter-spacing:.4px;
    line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 22px rgba(250,204,21,.3);
}

.ib-meta{
    position:absolute; right:14px; bottom:5px; z-index:9;
    font-size:10px; font-weight:800; color: rgba(255,255,255,.55); letter-spacing:2px; text-transform:uppercase;
}

/* =========================================================
   5. PREMIUM ALERT POPUPS (BOTTOM-RIGHT CORNER)
   ========================================================= */
.alert-popup {
    position: fixed; bottom: 140px; right: 40px; transform: translateX(50px);
    background: linear-gradient(135deg, #0a0f24, #121b3d); color: #fff;
    padding: 15px 30px; border-radius: 8px; box-shadow: -5px 15px 30px rgba(0,0,0,0.8);
    border-right: 6px solid var(--bc-cyan-1, #10dbd8); z-index: 2500; 
    opacity: 0; pointer-events: none; transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.alert-popup.active { opacity: 1; transform: translateX(0); }
.alert-title { font-size: 16px; font-weight: 900; text-transform: uppercase; color: var(--bc-cyan-1, #10dbd8); letter-spacing: 2px; margin-bottom: 5px;}
.alert-desc { font-size: 32px; font-weight: 900; color: #ffffff; text-transform: uppercase; line-height: 1.1;}
.alert-sub { font-size: 16px; font-weight: 700; color: #ccc; letter-spacing: 1px; margin-top: 5px; text-transform: lowercase;}

#milestone-popup { border-right-color: var(--bc-gold, #facc15); }
#milestone-popup .alert-title { color: var(--bc-gold, #facc15); }

/* =========================================================
   6. FULL SCREEN SCOREBOARD GRAPHIC
   ========================================================= */
#fs-graphics-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;
    background: rgba(0, 0, 0, 0.85); opacity: 0; pointer-events: none; transition: 0.5s ease; z-index: 2000;
}
#fs-graphics-container.active { opacity: 1; }

/* ───────────────────────────────────────────────────────────────
   FULL-SCREEN SCOREBOARD — "Star Sports / IPL" broadcast family
   dark navy + cyan, big score hero, side-by-side tables,
   team-colour accents, broadcast footer strip.
   ─────────────────────────────────────────────────────────────── */
.fs-panel {
    width: 1200px; height: 750px; border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(16,219,216,.25);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(16,219,216,.12), transparent 55%),
        linear-gradient(135deg, #0a0f24, #121b3d);
    display: none; flex-direction: column; overflow: hidden; position: relative;
}
.fs-panel.active { display: flex; animation: fsIn .7s cubic-bezier(.16,1,.3,1); }
@keyframes fsIn{
    0%  { transform: translateY(70px) scale(.96); opacity:0; filter: blur(6px) }
    100%{ transform: translateY(0)    scale(1);   opacity:1; filter: blur(0) }
}
@keyframes slideUpFade { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- header ---------- */
.fs-header {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(100deg, var(--bc-cyan-hi, #16e7e4), var(--bc-cyan-2, #05c2c2) 55%, var(--bc-cyan-hi, #16e7e4));
    color: #000; padding: 11px 22px; font-size: 24px; font-weight: 900;
    letter-spacing: 2.5px; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.fs-hdr-meta{
    font-size: 13px; letter-spacing: 2px; font-weight: 900;
    background: rgba(0,0,0,.82); color: var(--bc-cyan-1, #10dbd8); padding: 4px 12px; border-radius: 4px;
    display: flex; align-items: center; gap: 8px;
}
.fs-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--bc-danger, #e51a3a); animation: fsPulse 1.2s infinite; }
@keyframes fsPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.fs-score-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 18px 22px 14px; color: white;}

/* ---------- hero row ---------- */
.fs-score-top {
    display: flex; justify-content: space-between; align-items: stretch; gap: 20px;
    background: linear-gradient(100deg, rgba(16,219,216,.10), rgba(0,0,0,0));
    border-left: 6px solid var(--bc-cyan-1, #10dbd8); border-bottom: 2px solid rgba(16,219,216,.35);
    padding: 10px 18px; margin-bottom: 14px;
}
.fs-team-name { font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1.05; }
.fs-team-score { font-size: 62px; font-weight: 900; color: var(--bc-gold, #facc15); line-height: 1; text-shadow: 0 4px 16px rgba(0,0,0,.8), 0 0 26px rgba(250,204,21,.3); }
.fs-team-score .fs-ov { font-size: 27px; color: #94a3b8; text-shadow: none; }
.fs-rate-row{ display:flex; gap:10px; margin-top:9px; }
.fs-pill{
    font-size: 13px; font-weight: 900; letter-spacing: .8px; padding: 3px 10px; border-radius: 4px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #94a3b8;
    text-transform: uppercase;
}
.fs-pill b{ color:#fff; font-size: 15px; margin-left: 3px; }
.fs-pill.rrr{ background: rgba(250,204,21,.14); border-color: rgba(250,204,21,.4); color:var(--bc-gold, #facc15); }
.fs-pill.rrr b{ color:var(--bc-gold, #facc15); }
.fs-context-box { text-align: right; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.fs-ctx-label{ font-size: 14px; font-weight: 900; letter-spacing: 3.5px; color: var(--bc-cyan-1, #10dbd8); text-transform: uppercase; }
.fs-ctx-big{ font-size: 54px; font-weight: 900; color: var(--bc-gold, #facc15); line-height: 1; text-shadow: 0 0 24px rgba(250,204,21,.28); }
.fs-ctx-sub{ font-size: 18px; font-weight: 900; color: #e2e8f0; margin-top: 7px; letter-spacing: .6px; text-transform: uppercase; }
.fs-ctx-line{ font-size: 15px; font-weight: 800; color: #94a3b8; margin-top: 4px; letter-spacing: .8px; text-transform: uppercase; }

/* ---------- tables ---------- */
.fs-tables { display: flex; gap: 18px; flex: 1; min-height: 0; }
.fs-table-wrap {
    flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    background: rgba(0,0,0,.34); border-radius: 12px; border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.4);
}
.fs-table-head{
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: linear-gradient(90deg, rgba(16,219,216,.22), rgba(16,219,216,0));
    border-bottom: 2px solid rgba(16,219,216,.5);
    font-size: 15px; font-weight: 900; letter-spacing: 2.5px; color: var(--bc-cyan-1, #10dbd8); text-transform: uppercase;
}
.fs-th-badge{ background:var(--bc-cyan-1, #10dbd8); color:#04121a; font-size:11px; padding:2px 7px; border-radius:3px; letter-spacing:1px; }
.fs-table-scroll{ flex: 1; overflow: hidden; }
table { width: 100%; border-collapse: collapse; color: white; font-size: 17px; text-transform: uppercase; }
th {
    text-align: left; padding: 6px 8px; font-size: 12px; letter-spacing: 1.2px;
    border-bottom: 1px solid rgba(16,219,216,.3); color: #7dd8d6; font-weight: 900;
    background: rgba(255,255,255,.04);
}
td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 700; }
tbody tr:nth-child(even){ background: rgba(255,255,255,.03); }
.tb-center { text-align: center; }
.tb-name{ font-weight: 800; letter-spacing: .2px; }
.tb-wkt { color: #94a3b8; font-size: 12px; font-weight: 600; display: block; margin-top: 1px; text-transform: none; }
.tb-no { color: var(--bc-cyan-1, #10dbd8); }
.tb-striker::after{ content:"*"; color:var(--bc-danger, #e51a3a); font-weight:900; margin-left:3px; }

/* ---------- live row highlights ---------- */
tbody tr.tb-on{   background: linear-gradient(90deg, rgba(250,204,21,.15), rgba(250,204,21,0)); }
tbody tr.tb-on td:first-child{ box-shadow: inset 3px 0 0 var(--bc-gold, #facc15); }
tbody tr.tb-ns{   background: rgba(16,219,216,.06); }
tbody tr.tb-ns td:first-child{ box-shadow: inset 3px 0 0 rgba(16,219,216,.55); }
tbody tr.tb-bowl{ background: linear-gradient(90deg, rgba(16,219,216,.16), rgba(16,219,216,0)); }
tbody tr.tb-bowl td:first-child{ box-shadow: inset 3px 0 0 var(--bc-cyan-1, #10dbd8); }

/* ---------- innings progress ---------- */
.fs-progress{ height:5px; border-radius:3px; background:rgba(255,255,255,.10); overflow:hidden; margin:-6px 0 13px; }
.fs-progress span{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--bc-cyan-1, #10dbd8),var(--bc-gold, #facc15)); transition: width .5s ease; }

/* ---------- footer info strip ---------- */
.fs-foot{
    display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 9px 16px;
    background: linear-gradient(90deg, rgba(16,219,216,.16), rgba(0,0,0,.25));
    border-left: 5px solid var(--bc-cyan-1, #10dbd8); border-radius: 8px;
}
.fs-foot-item{ display: flex; align-items: baseline; gap: 7px; }
.fs-foot-lbl{ font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #7dd8d6; text-transform: uppercase; }
.fs-foot-val{ font-size: 19px; font-weight: 900; color: #fff; }
.fs-foot-sep{ width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.fs-over-chips{ display: flex; gap: 5px; margin-left: auto; }
.fs-chip{
    min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.fs-chip.four{ background:var(--bc-gold, #facc15); color:#141000; border-color:#fff; }
.fs-chip.six{ background:#8b5cf6; color:#fff; border-color:#fff; }
.fs-chip.wkt{ background:var(--bc-danger, #e51a3a); color:#fff; border-color:#fff; }
.fs-chip.wd,.fs-chip.nb{ background:#f97316; color:#fff; border-color:#fff; }

/* =====================================================================
   🏆 PREMIUM HD UPGRADE
   Layered on top of the original rules — layout & colours unchanged.
   ===================================================================== */

:root{
    --skew: -15deg;
    --counter-skew: 15deg;
    --ink: #0a0a14;
    --cyan-1: var(--bc-cyan-hi, #16e7e4);
    --cyan-2: var(--bc-cyan-dark, #04b3b3);
    --fx: #ffffff;           /* accent, swapped per event */
    --fx-soft: rgba(255,255,255,.5);
}

/* Crisper rendering for broadcast capture */
html, body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-variant-numeric: tabular-nums lining-nums;
    font-kerning: normal;
}
.scoreboard-bar, .scoreboard-bar *{ font-variant-numeric: tabular-nums lining-nums; }

/* ---------- richer bar surfaces ---------- */
.scoreboard-bar{
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.cyan-bg-bar{
    background:
        linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.06) 34%, rgba(0,0,0,.05) 62%, rgba(0,0,0,.20) 100%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 2px, rgba(255,255,255,0) 2px 9px),
        linear-gradient(100deg, var(--cyan-1) 0%, #0bd0ce 45%, var(--cyan-2) 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 12px rgba(0,60,60,.35);
    overflow: hidden;
}
/* slow travelling gloss on the teal bar */
.cyan-bg-bar::after{
    content:""; position:absolute; top:0; bottom:0; width:22%;
    left:-30%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.30) 45%, rgba(255,255,255,.42) 55%, transparent 100%);
    animation: barGloss 7s cubic-bezier(.5,0,.5,1) infinite;
    pointer-events:none;
}
@keyframes barGloss{ 0%{left:-30%} 55%{left:120%} 100%{left:120%} }

.team-left-bg{
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 10px),
        linear-gradient(135deg, #1d3068 0%, var(--bc-navy-2, #22376e) 55%, #16244d 100%);
    border-right: 3px solid var(--cyan-1);
    box-shadow: 6px 0 18px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.20);
}
.team-right-bg{
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 10px),
        linear-gradient(135deg, #f02444 0%, #d2172f 55%, #980d20 100%);
    border-left: 3px solid #ff6b7f;
    box-shadow: -6px 0 18px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.22);
}
.center-top-bg{
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%),
        linear-gradient(160deg, #141334 0%, #0c0b2c 55%, #07061c 100%);
    border-left: 2px solid rgba(255,255,255,.22);
    border-right: 2px solid rgba(255,255,255,.22);
    box-shadow: 0 6px 20px rgba(0,0,0,.7), inset 0 3px 0 rgba(255,255,255,.16);
}
.center-bot-bg{
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f7 60%, #dfe6ea 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.9);
}

/* ---------- readability over ANY video ---------- */
.team-name-text{
    font-weight: 900; letter-spacing: .6px; font-size: 25px;
    text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 1px rgba(0,0,0,.9);
}
.bat-name, .bowl-name{
    font-size: 33px; letter-spacing: .2px; color: #07070f;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.bat-runs, .bowl-fig{
    font-size: 38px; color: #05050d; letter-spacing: -.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bat-balls, .bowl-ov{
    font-size: 25px; color: #123; opacity: .92; font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.c-score{
    font-size: 82px; letter-spacing: -2.5px;
    text-shadow: 0 4px 14px rgba(0,0,0,.85), 0 0 26px rgba(22,231,228,.22), 0 1px 0 rgba(255,255,255,.25);
}
.c-team, .c-overs{ text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.c-status{
    font-size: 16.5px; letter-spacing: .7px; color: #0a0a14;
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.target-box-eq{
    font-size: 43px; color: #07070f;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.12);
}
.target-box-title{ color: #14424a; letter-spacing: 1.4px; font-size: 15px; }

/* striker arrow — a touch more visible */
.ind-arrow.active{
    border-left-color: #ff0b4c;
    filter: drop-shadow(0 0 6px rgba(255,11,76,.85));
    animation: strikerPulse 1.6s ease-in-out infinite;
}
@keyframes strikerPulse{ 0%,100%{ transform: translateX(0); opacity:1 } 50%{ transform: translateX(3px); opacity:.75 } }

/* ---------- glossy ball chips ---------- */
.tv-ball{
    width: 41px; height: 41px; font-size: 22px;
    box-shadow: 0 3px 7px rgba(0,0,0,.42), inset 0 2px 3px rgba(255,255,255,.42), inset 0 -3px 6px rgba(0,0,0,.28);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    position: relative; overflow: hidden;
    animation: ballIn .38s cubic-bezier(.2,1.5,.4,1) both;
}
.tv-ball::after{
    content:""; position:absolute; top:-45%; left:-15%; width:130%; height:60%;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    border-radius: 50%; pointer-events:none;
}
@keyframes ballIn{ from{ transform: scale(.3) translateY(6px); opacity:0 } to{ transform:none; opacity:1 } }
.tv-ball.run{ background: linear-gradient(180deg,#ffffff,#e6ebee); color:#0a0a14; border:1px solid #c6ced3; text-shadow:none; }
.tv-ball.dot{ background: linear-gradient(180deg,#232152,#0c0b2c); }
.tv-ball.four{
    background: linear-gradient(180deg,#ffe066,#f5b800); color:#141000;
    box-shadow: 0 3px 8px rgba(0,0,0,.42), 0 0 14px rgba(250,204,21,.65), inset 0 2px 3px rgba(255,255,255,.6);
    text-shadow:none;
}
.tv-ball.six{
    background: linear-gradient(180deg,#b98cff,#7c3aed);
    box-shadow: 0 3px 8px rgba(0,0,0,.42), 0 0 16px rgba(139,92,246,.75), inset 0 2px 3px rgba(255,255,255,.45);
}
.tv-ball.wkt{
    background: linear-gradient(180deg,#ff5470,#d10f2c);
    box-shadow: 0 3px 8px rgba(0,0,0,.42), 0 0 16px rgba(229,26,58,.8), inset 0 2px 3px rgba(255,255,255,.4);
    animation: ballIn .38s cubic-bezier(.2,1.5,.4,1) both, wktChip 1.5s ease-in-out 0.4s infinite;
}
@keyframes wktChip{ 0%,100%{ box-shadow: 0 3px 8px rgba(0,0,0,.42), 0 0 14px rgba(229,26,58,.75), inset 0 2px 3px rgba(255,255,255,.4) }
                    50%  { box-shadow: 0 3px 8px rgba(0,0,0,.42), 0 0 26px rgba(229,26,58,1), inset 0 2px 3px rgba(255,255,255,.4) } }


/* ===========================================================================
   MIGRATION ADDITIONS (behaviour unchanged, markup cleaned)
   =========================================================================== */

/* the two lower thirds start hidden and are switched on by JS */
.cs-hidden { display: none; }

/* result lower third: slightly different background wash + fixed side panels */
.summary-bg-result {
    background: radial-gradient(120% 160% at 50% 0%, rgba(16,219,216,.16), transparent 70%);
}
.ib-team-fixed { flex: 0 0 300px; }
.ib-score-stack { font-size: 17px; line-height: 1.35; }
.ib-ribbon-gold { background: #facc15; }
.ib-name-lg { font-size: 19px; }