/* Gráficos de transmisión: se dibujan en un lienzo de 1920x1080 que se escala a la pantalla. */
:root{
  --display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Saira",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ov-dark:#0b111b; --ov-mid:#162030; --ov-line:#2a3648; --ov-ink:#ffffff; --ov-soft:#a9b6c8; --ov-gold:#f6b40e;
}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;font-family:var(--body);color:var(--ov-ink);pointer-events:none}

/* marcador */
.bug{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);display:flex;height:92px;box-shadow:0 14px 40px rgba(0,0,0,.45);border-radius:6px;overflow:hidden}
.bug .team{display:flex}
.bug .logo{width:92px;display:grid;place-items:center}
.bug .logo img,.bug .logo svg{width:68px;height:68px;object-fit:contain}
.bug .name{background:var(--ov-dark);padding:0 26px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:210px;position:relative}
.bug .name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--tc)}
.bug .name b{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;letter-spacing:.05em;white-space:nowrap}
.bug .name b.sm{font-size:38px;letter-spacing:.03em}
.bug .name b.xs{font-size:30px;letter-spacing:.02em}
.bug .fouls{display:flex;gap:6px;align-items:center;font-size:15px;font-weight:600;color:var(--ov-soft);letter-spacing:.08em}
.bug .pip{width:14px;height:6px;border-radius:2px;background:#ffffff2a}
.bug .pip.on{background:#fff}
.bug .fouls.limit .pip.on{background:#ff4d4d}
.bug .bonus{color:#ff6b6b;font-weight:700}
.bug .score{width:124px;background:#f4f6f9;color:var(--ov-dark);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:70px;font-variant-numeric:tabular-nums;line-height:1}
.bug .score.bump{animation:bump .9s ease}
@keyframes bump{0%{background:var(--ov-gold)}100%{background:#f4f6f9}}
.bug .mid{width:200px;background:var(--ov-mid);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-left:1px solid var(--ov-line);border-right:1px solid var(--ov-line)}
.bug .mid .q{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.14em;color:var(--ov-gold)}
.bug .mid .clock{font-family:var(--display);font-weight:700;font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.bug .mid .clock.low{color:#ff6b6b}
.bug .team.b .name{align-items:flex-end}

/* logo del canal */
.chlogo{position:absolute;max-width:340px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.chlogo.s{max-height:70px}.chlogo.m{max-height:100px}.chlogo.l{max-height:140px}
.chlogo.tl{left:60px;top:44px}.chlogo.tr{right:60px;top:44px}
.chlogo.bl{left:60px;bottom:52px}.chlogo.br{right:60px;bottom:52px}

/* banner de anotación */
.banner{position:absolute;left:110px;bottom:180px;display:flex;align-items:stretch;height:118px;border-radius:6px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.5);animation:bannerIn .55s cubic-bezier(.2,.9,.25,1) both}
.banner.out{animation:bannerOut .45s ease forwards}
@keyframes bannerIn{from{transform:translateX(-140px);opacity:0}to{transform:none;opacity:1}}
@keyframes bannerOut{to{transform:translateX(-120px);opacity:0}}
.banner .num{width:124px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:64px;line-height:1}
.banner .who{background:var(--ov-dark);padding:0 36px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:520px}
.banner .who b{font-family:var(--display);font-weight:800;font-size:52px;line-height:1;letter-spacing:.03em;text-transform:uppercase}
.banner .who span{font-size:24px;color:var(--ov-soft);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.banner .who span em{font-style:normal;color:#fff}
.banner .pts{width:150px;background:var(--ov-gold);color:var(--ov-dark);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:72px;line-height:1}
.banner .tlogo{width:118px;background:var(--ov-mid);display:grid;place-items:center}
.banner .tlogo img,.banner .tlogo svg{width:78px;height:78px;object-fit:contain}

/* paneles */
.ov-panel{position:absolute;left:50%;top:120px;transform:translateX(-50%);width:1180px;background:rgba(11,17,27,.95);border-radius:8px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55);animation:panelIn .5s cubic-bezier(.2,.9,.25,1) both}
.ov-panel.still{animation:none}
@keyframes panelIn{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.ov-head{display:grid;grid-template-columns:110px 1fr 110px;align-items:stretch;height:110px}
.ov-head .side{display:grid;place-items:center}
.ov-head .side img,.ov-head .side svg{width:76px;height:76px;object-fit:contain}
.ov-head .ttl{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ov-mid)}
.ov-head .ttl b{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.ov-head .ttl span{font-size:20px;font-weight:600;color:var(--ov-gold);letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.ov-body{padding:26px 40px 34px}
.ov-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ov-table th{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.12em;color:var(--ov-soft);text-align:center;padding:8px 6px;border-bottom:2px solid var(--ov-line)}
.ov-table td{font-family:var(--display);font-weight:700;font-size:44px;text-align:center;padding:14px 6px;border-bottom:1px solid var(--ov-line)}
.ov-table td.tm{text-align:left;display:flex;align-items:center;gap:18px}
.ov-table td.tm i{width:12px;height:50px;border-radius:2px;background:var(--tc);flex:none}
.ov-table td.cur,.ov-table th.cur{color:var(--ov-gold)}
.ov-table td.tot{background:#ffffff12;font-weight:800;font-size:54px}
.ov-table tr:last-child td{border-bottom:0}
.ldr{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ldr .col{display:flex;flex-direction:column;gap:14px}
.ldr .top1{display:flex;align-items:center;gap:22px;padding:18px 22px;background:var(--ov-mid);border-left:10px solid var(--tc);border-radius:4px}
.ldr .top1 .big{font-family:var(--display);font-weight:800;font-size:110px;line-height:.9;font-variant-numeric:tabular-nums}
.ldr .top1 .big small{font-size:28px;color:var(--ov-soft);margin-left:6px;letter-spacing:.1em}
.ldr .top1 .nm{display:flex;flex-direction:column;gap:4px;min-width:0}
.ldr .top1 .nm span{font-size:22px;color:var(--ov-soft);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ldr .top1 .nm b{font-family:var(--display);font-weight:800;font-size:44px;line-height:1.05;text-transform:uppercase}
.ldr .rest{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:700;font-size:34px;padding:6px 22px;border-bottom:1px solid var(--ov-line)}
.ldr .rest em{font-style:normal;color:var(--ov-soft);margin-right:12px}
.box{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.box h3{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.box h3 i{width:10px;height:28px;background:var(--tc);border-radius:2px}
.box table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.box th{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.1em;color:var(--ov-soft);text-align:right;padding:5px 6px;border-bottom:2px solid var(--ov-line)}
.box td{font-family:var(--display);font-weight:600;font-size:25px;text-align:right;padding:4px 6px;border-bottom:1px solid #ffffff12}
.box th:nth-child(2),.box td:nth-child(2){text-align:left}
.box td:first-child{color:var(--ov-soft)}
.box td.p{font-weight:800;color:#fff}
.box tr.mx td.p{color:var(--ov-gold)}
.box tr.out td{opacity:.45}

@media (prefers-reduced-motion:reduce){.stage *{animation-duration:.01ms!important}}