.tvb-frame { overflow: hidden; }
.tvb-switch { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: -.2rem; }
.tvb-switch a { padding: .35rem .9rem; border-radius: 99px; background: var(--panel); color: var(--dim); font-size: .95rem; font-weight: 600; text-decoration: none; }
.tvb-switch a[aria-current] { background: var(--gold); color: var(--on-gold); }
.tvb-root { flex: 1; min-height: 0; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.tvb-root > .tv-empty { margin: auto; }
.tvb-zones { position: absolute; top: 0; left: 0; padding: 1rem 2rem; transform-origin: top left; }
.tvb-zones .zones-row { gap: 3.2rem; }
.tvb-zones .zone-label { font-size: 1rem; padding: .8rem .2rem .5rem; }
.tvb-zones .cols-row { gap: 2.6rem; }
.tvb-zones .col-cell { width: 15rem; gap: .9rem; }
.tvb-zones .col-head { font-size: .85rem; }
.tvb-zones .col-body { gap: .9rem; }
.tvb-zones .b-match { width: 15rem; height: 4.4rem; border-radius: .6rem; }
.tvb-zones .b-match .num { top: -.6rem; left: .4rem; font-size: .7rem; border-radius: .3rem; padding: 0 .3rem; }
.tvb-zones .b-match .r { padding: 0 .7rem; font-size: .95rem; gap: .4rem; }
.tvb-zones .b-match .r .s { font-size: 1.15rem; min-width: 1.3rem; padding-left: .4rem; }
.tvb-zones .b-match .r .pts i { min-width: 1.35rem; font-size: .85rem; }
.tvb-zones .b-match.is-live { box-shadow: 0 0 0 .3rem var(--live); }
@media (prefers-reduced-motion: no-preference) {
  .tvb-zones .b-match.is-live { animation: tvb-live-pulse 1.6s ease-in-out infinite; }
  @keyframes tvb-live-pulse {
    50% { box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--live) 55%, transparent); }
  }
}