/* Scale from viewport height as well as width: Android TV may use display zoom. */
.buy-tickets-link { display: none; }
.narration-notice {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 520px);
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 222, 120, .72);
  border-radius: 999px;
  background: rgba(10, 18, 33, .94);
  color: #ffe79a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .48), 0 0 18px rgba(245, 211, 114, .2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .25px;
  line-height: 1.2;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.narration-notice[hidden] { display: none; }
.narration-notice.is-attention {
  border-color: #ffb85a;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 184, 90, .14), 0 8px 26px rgba(0, 0, 0, .58), 0 0 22px rgba(255, 184, 90, .28);
}

@media (max-width: 699px) {
  /* Phones use the TV as a fixed broadcast surface. Keep the browser
     viewport from jumping when the live payload refreshes; the main board
     owns the bounded scroll area when the full 90-ball grid is taller than
     the handset. */
  html:has(body.tv-broadcast-body),
  body.tv-broadcast-body {
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    overflow-anchor: none;
  }

  body.tv-broadcast-body {
    position: fixed;
    inset: 0;
  }

  body.tv-broadcast-body > main {
    min-height: 0;
    height: calc(100dvh - 182px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    overflow-anchor: none;
  }

  body.tv-broadcast-body > main > .board {
    min-height: 0;
    overflow: visible;
    overflow-anchor: none;
  }

  /* The sky image is bright on phones. A calm pale panel plus navy type keeps
     the live heading readable without changing the TV visual identity. */
  body.tv-broadcast-body > main > .board > .heading {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 14px;
    background: rgba(235, 245, 255, .9);
    box-shadow: 0 8px 20px rgba(9, 37, 78, .2);
  }

  body.tv-broadcast-body > main > .board > .heading .eyebrow,
  body.tv-broadcast-body > main > .board > .heading h1,
  body.tv-broadcast-body > main > .board > .heading .schedule-icon,
  body.tv-broadcast-body > main > .board > .heading .schedule strong,
  body.tv-broadcast-body > main > .board > .heading .room-tag {
    color: #092b54 !important;
    text-shadow: none !important;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule-countdown {
    color: #ffffff !important;
    background: #0e4f91 !important;
    border-color: #8ec8ff !important;
  }

  body.tv-broadcast-body > main > .board > .heading h1 {
    font-size: clamp(25px, 8vw, 34px);
    line-height: 1.05;
  }

  body.tv-broadcast-body > main > .board > .heading .eyebrow {
    color: #0a5598 !important;
    letter-spacing: 1.2px;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule {
    min-width: 0;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule-pill {
    padding: 2px 0;
  }

  body.tv-broadcast-body > main > .board > .heading .room-tag {
    color: #234d78 !important;
  }

  @supports not (height: 100dvh) {
    body.tv-broadcast-body { min-height: 100vh; height: 100vh; }
    body.tv-broadcast-body > main { height: calc(100vh - 182px); }
  }

  body.tv-broadcast-body > .topbar nav {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(42px, .72fr) repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body.tv-broadcast-body > .topbar nav .buy-tickets-link,
  body.tv-broadcast-body > .topbar nav button {
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    padding: 7px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.tv-broadcast-body > .topbar nav .buy-tickets-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255, 222, 120, .72);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #f5d879 0%, #c38b23 100%);
    color: #211707;
    font-size: clamp(9px, 2.55vw, 11px);
    letter-spacing: -.25px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .38), inset 0 1px 1px rgba(255, 255, 255, .65);
    text-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The ticket icon is decorative here. Removing it on narrow screens gives
     the action label enough room to stay readable instead of ending in a
     clipped “cartela”. The full action remains available through aria-label. */
  body.tv-broadcast-body > .topbar nav .buy-tickets-link .btn-icon {
    display: none;
  }

  body.tv-broadcast-body > .topbar nav #fullscreen .btn-icon,
  body.tv-broadcast-body > .topbar nav #refresh .btn-icon {
    display: none;
  }

  body.tv-broadcast-body > .topbar nav .btn-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.tv-broadcast-body > .topbar nav .buy-tickets-link:hover,
  body.tv-broadcast-body > .topbar nav .buy-tickets-link:active {
    color: #120d04;
    border-color: #fff1ad;
    box-shadow: 0 0 18px rgba(245, 211, 114, .42), inset 0 1px 2px rgba(255, 255, 255, .75);
    transform: translateY(-1px);
  }
}

@media (max-width: 360px) {
  body.tv-broadcast-body > .topbar nav {
    grid-template-columns: minmax(0, 1.55fr) minmax(38px, .62fr) repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  body.tv-broadcast-body > .topbar nav .buy-tickets-link,
  body.tv-broadcast-body > .topbar nav button {
    min-height: 36px;
    padding-inline: 3px;
    font-size: 9px;
    letter-spacing: -.3px;
  }
}

@media (min-width: 850px) {
  body.tv-broadcast-body {height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:auto;}
  body.tv-broadcast-body>.topbar {position:static;height:auto;min-height:54px;flex:0 0 auto;padding:6px 2vw;gap:10px;}
  .topbar .brand-title {font-size:clamp(16px,1.7vw,27px);}
  .topbar .brand-badge {font-size:9px;letter-spacing:1px;}
  .topbar .topbar-center {gap:8px;min-width:0;}
  .topbar .connection {font-size:12px;padding:6px 10px;}
  .topbar button {padding:7px 10px;font-size:13px;white-space:nowrap;}
  .topbar .reference-tools {padding:0;}
  .topbar .reference-tools button {padding:0;width:34px;height:34px;font-size:20px;}
  body.tv-broadcast-body>main {min-height:520px;flex:1;padding:10px 2vw;gap:14px;grid-template-columns:minmax(0,1.85fr) minmax(260px,1fr);}
  body.tv-broadcast-body .board {padding:0;gap:8px;min-width:0;}
  .board .heading {margin:0;min-height:44px;}
  .heading h1 {font-size:clamp(20px,2vw,34px);margin:0;}
  .schedule-icon {font-size:9px;}
  .schedule-pill {padding:5px 8px;flex-wrap:wrap;justify-content:center;}
  .board .prizes {grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0;}
  .board .prize {padding:8px;}
  .board .prize-icon-wrap {font-size:20px;width:24px;}
  .board .prize-label {font-size:11px;letter-spacing:.5px;}
  .board .prize-sub {font-size:8px;}
  .board .prize-header {gap:5px;}
  .board .prize .prize-amount {font-size:clamp(15px,16cqw,42px);}
  .board .waiting-screen {min-height:260px;overflow:visible;margin:0;padding:10px;gap:5px;justify-content:center;}
  .waiting-screen .big-countdown {margin:5px 0;gap:12px;}
  .waiting-screen .big-countdown span {font-size:clamp(46px,10vh,100px);padding:7px 12px;}
  .waiting-screen .countdown-sep {font-size:55px;}
  .waiting-screen .waiting-badge {padding:5px 10px;}
  .waiting-screen #waiting-hint {margin:3px 0;font-size:12px;}
  .waiting-screen .ticket-price-badge {padding:5px 15px;font-size:17px;}
  main>aside {min-width:0;gap:10px;}
  aside .join {padding:10px;gap:10px;}
  .join .qr-frame {padding:8px;}
  .join canvas {width:clamp(90px,10vw,145px);height:clamp(90px,10vw,145px);}
  .join h2 {font-size:18px;}
  .join p {font-size:11px;line-height:1.35;}
  .join .btn-purchase {padding:8px 12px;font-size:12px;}
  aside .tickets {padding:12px;}
  .tickets .participants {overflow:auto;}
  body.tv-broadcast-body>.bottom {height:auto;min-height:27px;padding:4px 2vw;font-size:10px;}
}

/* Last-resort fit for short landscape WebViews (the 28–40 inch Smart Pro
   often exposes 540p or 720p CSS pixels).  Every vertical section gets an
   explicit flex budget: the featured ball stays inside its panel and the
   15×6 number board uses whatever height remains, so its bottom row cannot
   be cut off by the viewport.  The invitation is deliberately compact so
   the ticket list below it has more room. */
@media (orientation: landscape) and (min-aspect-ratio: 3/2) and (min-width: 700px) and (max-height: 900px) {
  body.tv-broadcast-body {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  body.tv-broadcast-body > .topbar {
    flex: 0 0 clamp(44px, 6.8vh, 60px);
    height: clamp(44px, 6.8vh, 60px);
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.tv-broadcast-body > main {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding-block: clamp(3px, .65vh, 7px);
    gap: clamp(6px, .9vw, 12px);
  }

  body.tv-broadcast-body > main > .board {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: clamp(3px, .65vh, 7px);
  }

  body.tv-broadcast-body > main > .board > .heading {
    flex: 0 0 clamp(27px, 5.8vh, 46px);
    min-height: 0;
    height: clamp(27px, 5.8vh, 46px);
    margin: 0;
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > .heading h1 {
    font-size: clamp(16px, 2.1vw, 29px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.tv-broadcast-body > main > .board > .prizes {
    flex: 0 0 clamp(46px, 10vh, 76px);
    height: clamp(46px, 10vh, 76px);
    min-height: 0;
    margin: 0;
    gap: clamp(3px, .45vw, 6px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  body.tv-broadcast-body > main > .board > .prizes .prize {
    min-height: 0;
    padding: clamp(3px, .55vh, 7px) clamp(4px, .55vw, 8px);
    border-radius: 8px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-icon-wrap {
    width: clamp(13px, 1.5vw, 20px);
    font-size: clamp(12px, 1.6vw, 21px);
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-label {
    font-size: clamp(7px, .72vw, 11px);
    letter-spacing: .3px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-sub {
    font-size: clamp(6px, .58vw, 8px);
    letter-spacing: .15px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize .prize-amount {
    margin-top: 1px;
    font-size: clamp(12px, 2.15vw, 27px);
  }

  body.tv-broadcast-body > main > .board > .waiting-screen {
    flex: 1 1 0;
    min-height: 0 !important;
    margin: 0;
  }

  body.tv-broadcast-body > main > .board > #live-strip.live-strip {
    flex: 0 0 clamp(124px, 24vh, 194px);
    height: clamp(124px, 24vh, 194px);
    min-height: 0;
    margin: 0;
    padding: clamp(5px, 1vh, 10px);
    gap: clamp(5px, 1vw, 12px);
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > #live-strip .ball-wrap {
    min-height: 0;
    overflow: visible;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball {
    width: clamp(100px, 19vh, 154px) !important;
    height: clamp(100px, 19vh, 154px) !important;
    margin: 0 auto;
    flex: 0 0 auto;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > small {
    font-size: clamp(14px, 2.5vh, 23px);
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > strong {
    font-size: clamp(36px, 6vh, 68px) !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip .live-info {
    min-width: 0;
    overflow: hidden;
    gap: clamp(3px, .7vh, 7px);
  }

  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong {
    font-size: clamp(18px, 2.65vw, 35px);
  }

  body.tv-broadcast-body > main > .board > #number-board {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: clamp(2px, .38vh, 4px);
    padding: clamp(3px, .6vh, 6px);
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > #number-board .number {
    min-height: 0;
    aspect-ratio: auto;
    border-radius: clamp(2px, .45vh, 5px);
    font-size: clamp(8px, 1.25vw, 16px);
    line-height: 1;
  }

  body.tv-broadcast-body > main > .board > .next-round {
    flex: 0 0 clamp(30px, 6.8vh, 54px);
    height: clamp(30px, 6.8vh, 54px);
    min-height: 0;
    margin: 0;
    padding: clamp(3px, .7vh, 7px) clamp(5px, .7vw, 9px);
    gap: clamp(3px, .7vw, 8px);
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > .next-round > strong {
    padding: 2px 7px;
    font-size: clamp(13px, 2.1vw, 23px);
  }

  body.tv-broadcast-body > main > aside {
    min-height: 0;
    gap: clamp(5px, .8vh, 9px);
  }

  body.tv-broadcast-body > main > aside .join {
    flex: 0 0 clamp(108px, 20vh, 160px);
    height: clamp(108px, 20vh, 160px);
    min-height: 0;
    padding: clamp(5px, .75vh, 8px);
    gap: clamp(5px, .7vw, 9px);
    overflow: hidden;
  }

  body.tv-broadcast-body > main > aside .join .qr-frame {
    padding: 4px;
    border-radius: 7px;
  }

  body.tv-broadcast-body > main > aside .join #qr {
    width: clamp(64px, 10vh, 98px) !important;
    height: clamp(64px, 10vh, 98px) !important;
  }

  body.tv-broadcast-body > main > aside .join-content {
    min-width: 0;
    overflow: hidden;
  }

  body.tv-broadcast-body > main > aside .join h2 {
    margin: 2px 0 3px;
    font-size: clamp(12px, 1.45vw, 18px);
    line-height: 1.05;
  }

  body.tv-broadcast-body > main > aside .join p {
    display: -webkit-box;
    margin: 2px 0 4px;
    overflow: hidden;
    font-size: clamp(7px, .72vw, 10px);
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.tv-broadcast-body > main > aside .join .btn-purchase {
    padding: 4px 7px;
    font-size: clamp(8px, .65vw, 10px);
  }

  body.tv-broadcast-body > main > aside .tickets {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(6px, .8vh, 10px);
  }

  body.tv-broadcast-body > main > aside .tickets .participants {
    min-height: 0;
    overflow: auto !important;
  }

  body.tv-broadcast-body > .bottom {
    flex: 0 0 clamp(18px, 3.5vh, 27px);
    height: clamp(18px, 3.5vh, 27px);
    min-height: 0;
    padding-block: 2px;
    overflow: hidden;
    font-size: clamp(6px, .65vw, 9px);
  }
}
@media(min-width:850px) and (max-height:600px) {
  .topbar .connection {display:none;}
  body.tv-broadcast-body>main {min-height:440px;}
  .board .waiting-screen {min-height:215px;}
  .waiting-screen .big-countdown span {font-size:48px;}
}

/* Keep the complete 1–90 board inside the available column at every aspect
   ratio. Participant cards stay in one scrollable list so every confirmed
   card can be consulted after the partida starts. */
body.tv-broadcast-body .number-board {
  width:100%;
  box-sizing:border-box;
  min-height:0;
  grid-auto-rows:minmax(0,1fr);
  aspect-ratio:15 / 6;
  overflow:hidden;
}
body.tv-broadcast-body .tickets .participants {
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#5ca2ff rgba(7,19,38,.6);
}
body.tv-broadcast-body .tickets .participants::-webkit-scrollbar { width:8px; }
body.tv-broadcast-body .tickets .participants::-webkit-scrollbar-thumb { border-radius:8px; background:#5ca2ff; }
@media (min-width:850px) and (max-width:1120px) {
  body.tv-broadcast-body>main {
    grid-template-columns:minmax(0,1.62fr) minmax(270px,1fr);
    gap:10px;
    padding-inline:1.25vw;
  }
  body.tv-broadcast-body .number-board { gap:4px; padding:7px; }
  body.tv-broadcast-body .number-board .number {
    border-radius:6px;
    font-size:clamp(10px,1.55vw,18px);
  }
}
@media (min-width:850px) and (max-height:760px) {
  body.tv-broadcast-body>main { padding-block:7px; }
  body.tv-broadcast-body .number-board { gap:3px; padding:6px; }
  body.tv-broadcast-body .number-board .number { font-size:clamp(10px,1.25vw,18px); }
}
@media (max-width:849px) {
  body.tv-broadcast-body .number-board {
    grid-template-columns:repeat(10,minmax(0,1fr));
    grid-template-rows:repeat(9,minmax(0,1fr));
    aspect-ratio:10 / 9;
    gap:4px;
    padding:7px;
  }
  body.tv-broadcast-body .number-board .number {
    border-radius:6px;
    font-size:clamp(10px,2.8vw,17px);
  }
}

/* Keep the broadcast artwork visible around the content. The board itself
   should not paint a second blue rectangle over the sky; the live ball stage
   and number board retain their own contrast panels for readability. */
body.tv-broadcast-body .board {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: none !important;
}
body.tv-broadcast-body .board .waiting-screen {
  background: radial-gradient(ellipse at center, rgba(20, 64, 118, 0.96) 0%, rgba(8, 25, 55, 0.98) 72%, rgba(5, 13, 29, 0.99) 100%) !important;
  border-color: rgba(109, 181, 255, 0.58) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 45px rgba(63, 151, 239, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}
body.tv-broadcast-body .heading .schedule-pill {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.tv-broadcast-body .heading .schedule {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Android TV WebView can extend the topbar's translucent backdrop into the
   first row below it, which appears as a bright blurred strip on the TV.
   Keep the broadcast header opaque and crisp so the sky artwork starts
   cleanly below the header on 28–40 inch screens. */
body.tv-broadcast-body > .topbar {
  background: linear-gradient(180deg, #171e2b 0%, #0b111d 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
  isolation: isolate;
}
body.tv-broadcast-body > .topbar::before,
body.tv-broadcast-body > .topbar::after {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The heading begins a little below the static header on Android TV. Cover
   that short transition with a solid studio band so the cloud artwork cannot
   read as a blurred stripe directly under the header. */
@media (min-width: 850px) {
  body.tv-broadcast-body > main {
    position: relative;
    isolation: isolate;
  }
  body.tv-broadcast-body > main::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 38px;
    background: #0b111d;
    pointer-events: none;
  }
  body.tv-broadcast-body > main > * {
    position: relative;
    z-index: 1;
  }
}
body.tv-broadcast-body .board .prizes {
  background: transparent !important;
}
body.tv-broadcast-body .board .prizes .prize {
  background: linear-gradient(155deg, rgba(28, 33, 45, 0.92), rgba(14, 17, 24, 0.94)) !important;
}

body.tv-broadcast-body .ticket-participant-roster {
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(109, 181, 255, 0.42);
  border-radius: 10px;
  background: rgba(7, 17, 34, 0.76);
}
body.tv-broadcast-body .ticket-participant-roster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #dceaff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}
body.tv-broadcast-body .ticket-participant-roster-heading span {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #08250f;
  background: #5de09b;
  font-size: 10px;
  text-align: center;
}
body.tv-broadcast-body .ticket-participant-roster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 54px;
  overflow: auto;
  scrollbar-width: thin;
}
body.tv-broadcast-body .ticket-participant-roster-list span {
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid rgba(140, 190, 255, .35);
  border-radius: 999px;
  color: #f1f6ff;
  background: rgba(29, 63, 108, .75);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Public TV cards show the player and only the values still needed for the
   active prize. This keeps the sidebar legible without exposing a tiny full
   ticket grid. */
body.tv-broadcast-body .ticket.ticket-missing-only {
  display: block;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 211, 93, 0.62) !important;
  border-radius: 10px !important;
  background: rgba(7, 17, 34, 0.82) !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.tv-broadcast-body .ticket-missing-only .ticket-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
body.tv-broadcast-body .ticket-missing-only .ticket-player strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(14px, 1.05vw, 19px);
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.tv-broadcast-body .ticket-missing-only .ticket-player small {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  color: #ffdc75;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.tv-broadcast-body .ticket-missing-only .ticket-missing-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
body.tv-broadcast-body .ticket-missing-only .missing-label {
  flex: 0 0 auto;
  padding-top: 6px;
  color: #ffdc75;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
body.tv-broadcast-body .ticket-missing-only .missing-numbers {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
body.tv-broadcast-body .ticket-missing-only .missing-number {
  display: inline-flex;
  min-width: 30px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4px 7px;
  border: 1px solid rgba(255, 220, 116, 0.8);
  border-radius: 6px;
  color: #fff1af;
  background: rgba(104, 74, 18, 0.76);
  font-size: clamp(14px, 1.1vw, 19px);
  font-weight: 900;
  line-height: 1;
}
body.tv-broadcast-body .ticket-missing-only .ticket-complete {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(129, 245, 170, 0.75);
  border-radius: 6px;
  color: #b8ffd0;
  background: rgba(18, 124, 69, 0.7);
  font-size: 12px;
  font-weight: 900;
}
body.tv-broadcast-body .ticket-missing-only .ticket-progress-hidden,
body.tv-broadcast-body .ticket-missing-only .ticket-progress-unavailable {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(255, 220, 116, 0.42);
  border-radius: 5px;
  color: rgba(255, 241, 175, 0.8);
  background: rgba(104, 74, 18, 0.36);
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 700;
}
body.tv-broadcast-body .tickets:has(.ticket-missing-only) > footer {
  display: none !important;
}

/* Center the featured ball in its own stage and give each new official call
   a clear entrance pulse. The info column keeps its existing position and
   remains readable on the 16:9 broadcast layout. */
@media (min-width: 700px) {
  body.tv-broadcast-body #live-strip.live-strip {
    display: grid;
    grid-template-columns: minmax(220px, 42%) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
  }

  body.tv-broadcast-body #live-strip .ball-wrap {
    width: 100%;
    min-height: 100%;
    justify-content: center;
  }

  body.tv-broadcast-body #live-strip .last-ball {
    margin: 10px auto 0;
    transform-origin: center center;
    will-change: transform, opacity, filter;
  }
}

@keyframes tv-last-ball-enter {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(.7);
    transform: translateY(28px) scale(.54) rotate(-16deg);
  }
  58% {
    opacity: 1;
    filter: blur(0) saturate(1.15);
    transform: translateY(-5px) scale(1.09) rotate(3deg);
  }
  78% { transform: translateY(2px) scale(.97) rotate(-1deg); }
  100% {
    opacity: 1;
    filter: none;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes tv-last-ball-ring {
  0% { opacity: .9; transform: scale(.62); }
  70% { opacity: .25; transform: scale(1.28); }
  100% { opacity: 0; transform: scale(1.48); }
}

body.tv-broadcast-body #live-strip .last-ball.is-entering {
  z-index: 2;
  animation: tv-last-ball-enter .82s cubic-bezier(.18, .84, .28, 1.16) both, ball-float 3s .84s ease-in-out infinite;
}

body.tv-broadcast-body #live-strip .last-ball.is-entering::before {
  position: absolute;
  z-index: -1;
  inset: -16px;
  border: 2px solid rgba(255, 237, 164, .72);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(245, 211, 114, .12), 0 0 34px rgba(245, 211, 114, .52);
  content: "";
  pointer-events: none;
  animation: tv-last-ball-ring .82s ease-out both;
}

/* At the compact desktop width used by the public play screen, the sphere
   deserves the visual centre of the live stage. Keep the live information in
   a narrow rail on the right so it remains visible without pulling the ball
   back to the left edge. */
@media (min-width: 700px) {
  body.tv-broadcast-body #live-strip.live-strip {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    min-height: 194px;
    padding: 14px 14px 14px 14px;
  }

  body.tv-broadcast-body #live-strip .ball-wrap {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 176px;
    min-height: 166px;
    justify-content: flex-start;
    transform: translateX(-50%);
    pointer-events: none;
  }

  body.tv-broadcast-body #live-strip .last-ball {
    width: 150px !important;
    height: 150px !important;
    margin: 4px auto 0;
  }

  body.tv-broadcast-body #live-strip .live-info {
    position: relative;
    z-index: 2;
    width: 36%;
    min-width: 188px;
    max-width: 286px;
    flex: 0 1 36%;
    gap: 7px;
    padding-top: 2px;
  }

  body.tv-broadcast-body #live-strip .phase-row {
    display: block;
  }

  body.tv-broadcast-body #live-strip .phase-row strong {
    display: block;
    margin-top: 4px;
    font-size: clamp(22px, 2.5vw, 34px);
  }

  body.tv-broadcast-body #live-strip .recent-track {
    display: grid;
    align-items: center;
    justify-items: start;
    gap: 6px;
    margin: 1px 0;
  }

  body.tv-broadcast-body #live-strip .recent {
    flex-wrap: nowrap;
    gap: 7px;
    padding: 5px 7px;
    border: 1px solid rgba(145, 201, 255, .28);
    border-radius: 999px;
    background: rgba(8, 25, 53, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 14px rgba(0, 0, 0, .22);
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(226, 241, 255, .92);
    background: radial-gradient(circle at 34% 24%, #ffffff 0%, #e5f2ff 19%, #77b4ee 52%, #265b99 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .32), inset 0 1px 2px rgba(255, 255, 255, .9);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere::before {
    background: radial-gradient(circle at 35% 25%, #ffffff 12%, #f5faff 58%, #c6dcf2 100%);
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > small {
    top: 13%;
    font-size: 7px;
    color: #23466e;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > strong {
    top: 36%;
    font-size: 14px;
    color: #102d51;
  }

  @keyframes tv-recent-ball-in {
    0% { opacity: 0; filter: blur(5px); transform: translateY(-8px) scale(.62); }
    65% { opacity: 1; filter: blur(0); transform: translateY(2px) scale(1.12); }
    100% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere.is-new {
    animation: tv-recent-ball-in .52s cubic-bezier(.2, .8, .25, 1.12) both;
    box-shadow: 0 0 0 3px rgba(255, 223, 113, .18), 0 0 18px rgba(111, 190, 255, .72), inset 0 1px 2px rgba(255, 255, 255, .95);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tv-broadcast-body #live-strip .last-ball.is-entering,
  body.tv-broadcast-body #live-strip .last-ball.is-entering::before {
    animation: none;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere.is-new {
    animation: none;
  }
}

/* Keep the broadcast proportions stable on 28–40 inch 16:9 screens. The
   sidebar has a bounded width so the QR invitation cannot consume the space
   used by the results list, while the board keeps all remaining width. */
@media (min-width: 850px) {
  body.tv-broadcast-body {
    overflow: hidden;
  }

  body.tv-broadcast-body > .topbar {
    height: clamp(50px, 6.5vh, 72px);
    min-height: 0;
    box-sizing: border-box;
    padding: 4px clamp(12px, 1.6vw, 30px);
    gap: 8px;
  }
  .topbar .brand { gap: 10px; min-width: 0; }
  .topbar .brand-mark {
    width: clamp(32px, 4.1vh, 44px);
    height: clamp(32px, 4.1vh, 44px);
    font-size: clamp(17px, 2.4vh, 24px);
  }
  .topbar .brand-title { font-size: clamp(16px, 1.25vw, 23px); }
  .topbar .brand-badge { font-size: clamp(7px, .72vw, 9px); letter-spacing: 1px; }
  .topbar .topbar-center { gap: 6px; }
  .topbar .studio-clock-chip { padding: 4px 8px; gap: 6px; }
  .topbar .studio-clock-chip strong { font-size: clamp(11px, 1vw, 14px); }
  .topbar .connection { padding: 5px 8px; font-size: clamp(10px, .75vw, 12px); }
  .topbar button { padding: 6px 9px; font-size: clamp(11px, .8vw, 13px); }

  body.tv-broadcast-body > main {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 480px);
    gap: clamp(10px, 1.1vw, 18px);
    padding-inline: clamp(12px, 1.6vw, 30px);
  }
  main > aside { min-width: 0; }
  aside .join { padding: clamp(8px, 1vh, 14px); gap: clamp(8px, .9vw, 14px); }
  .join .qr-frame { padding: 6px; border-radius: 10px; }
  body.tv-broadcast-body .join #qr {
    width: clamp(88px, 7.2vw, 132px) !important;
    height: clamp(88px, 7.2vw, 132px) !important;
  }
  .join-content { min-width: 0; }
  .join h2 { font-size: clamp(15px, 1.2vw, 20px); }
  .join p { margin: 4px 0 8px; font-size: clamp(9px, .7vw, 12px); }
  .join .btn-purchase { padding: 7px 10px; font-size: clamp(10px, .7vw, 12px); }
  aside .tickets { min-width: 0; }
}

/* Short 720/768px-high TV viewports need a little more vertical breathing
   room for the board and the complete QR/results column. */
@media (min-width: 850px) and (max-height: 760px) {
  .topbar .brand-mark { width: 32px; height: 32px; font-size: 17px; }
  .topbar .brand-title { font-size: clamp(15px, 1.45vw, 21px); }
  .topbar .brand-badge { font-size: 7px; }
  .topbar .studio-clock-chip { padding: 3px 7px; }
  .topbar .connection { display: none; }
  .topbar button { padding: 5px 8px; font-size: 11px; }
  body.tv-broadcast-body > main { padding-block: 6px; }
  aside .join { padding: 7px; gap: 7px; }
  body.tv-broadcast-body .join #qr { width: clamp(82px, 8vw, 112px) !important; height: clamp(82px, 8vw, 112px) !important; }
  .join h2 { font-size: 15px; }
  .join p { font-size: 9px; line-height: 1.25; }
  .join .btn-purchase { padding: 6px 8px; font-size: 10px; }
}

/* Keep the broadcast balls tied to the official B-I-N-G-O colour bands.
   The compact TV layout above used a single blue treatment for the recent
   calls, which made the sequence hard to read at a glance. */
body.tv-broadcast-body #live-strip .recent span.bingo-sphere {
  background:
    radial-gradient(ellipse at 25% 14%, #fff 0%, rgba(255,255,255,.78) 7%, transparent 18%),
    radial-gradient(circle at 35% 30%, transparent 38%, rgba(0,0,0,.42) 100%),
    var(--ball-color) !important;
  border-color: rgba(255,255,255,.92);
  color: #25292c !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.78),
    inset -4px -5px 8px rgba(0,0,0,.42),
    0 4px 10px rgba(0,0,0,.34);
}

body.tv-broadcast-body #live-strip .recent span.bingo-sphere.ball-group-B { --ball-color: #168fe0; }
body.tv-broadcast-body #live-strip .recent span.bingo-sphere.ball-group-I { --ball-color: #e73247; }
body.tv-broadcast-body #live-strip .recent span.bingo-sphere.ball-group-N { --ball-color: #16b84b; }
body.tv-broadcast-body #live-strip .recent span.bingo-sphere.ball-group-G { --ball-color: #f29a16; }
body.tv-broadcast-body #live-strip .recent span.bingo-sphere.ball-group-O { --ball-color: #5b626b; }

body.tv-broadcast-body #live-strip .recent span.bingo-sphere > small,
body.tv-broadcast-body #live-strip .recent span.bingo-sphere > strong {
  color: #25292c !important;
}

/* Give the featured call the same physical-ball treatment while retaining
   the centered entrance animation and the letter-band colour. */
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere {
  background:
    radial-gradient(ellipse at 25% 14%, #fff 0%, rgba(255,255,255,.84) 7%, transparent 18%),
    radial-gradient(circle at 35% 30%, transparent 38%, rgba(0,0,0,.44) 100%),
    var(--ball-color) !important;
  border: 4px solid rgba(255,255,255,.94);
  box-shadow:
    inset 5px 5px 10px rgba(255,255,255,.72),
    inset -9px -10px 18px rgba(0,0,0,.46),
    0 12px 26px rgba(0,0,0,.44),
    0 0 0 4px rgba(255,255,255,.14);
  color: #25292c !important;
}

body.tv-broadcast-body #live-strip .last-ball.bingo-sphere:not(.is-entering)::before {
  background: radial-gradient(circle at 35% 25%, #fff 20%, #f6f7f8 60%, #c5cbd0 100%);
  box-shadow: 1px 2px 3px rgba(0,0,0,.14);
}

body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > small,
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > strong {
  color: #25292c !important;
}

body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.ball-group-B { --ball-color: #168fe0; }
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.ball-group-I { --ball-color: #e73247; }
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.ball-group-N { --ball-color: #16b84b; }
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.ball-group-G { --ball-color: #f29a16; }
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.ball-group-O { --ball-color: #5b626b; }

/* Keep the header paint clipped to its own row. The main area starts directly
   below the separator so the header colour cannot bleed into the artwork. */
body.tv-broadcast-body > .topbar {
  overflow: hidden;
}

@media (min-width: 850px) {
  body.tv-broadcast-body > main::before {
    display: none;
  }
}

/* Do not reserve a dark spacer below the header. Older cached stylesheets
   used this pseudo-element as a transition band; on a television it appears
   as a black stripe and consumes the height needed by the broadcast panels. */
body.tv-broadcast-body > main::before {
  content: none !important;
  display: none !important;
}

/* Match the established TV ball treatment: a clean coloured rim, a white
   inner face and a restrained shadow. The centered layout and entrance pulse
   remain provided by the rules above. */
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere {
  background:
    radial-gradient(ellipse at 25% 14%, #fff 0%, rgba(255,255,255,.8) 6%, transparent 17%),
    radial-gradient(circle at 35% 30%, transparent 38%, rgba(0,0,0,.8) 100%),
    var(--ball-color) !important;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.8),
    inset -5px -6px 10px rgba(0,0,0,.55),
    0 7px 12px rgba(0,0,0,.28);
}

body.tv-broadcast-body #live-strip .last-ball.bingo-sphere:not(.is-entering)::before {
  background: radial-gradient(circle at 35% 25%, #fff 25%, #f6f7f8 58%, #bec4c9 100%);
  box-shadow: 1px 2px 3px rgba(0,0,0,.15);
}

/* The accumulated prize stays lit through its configured ball limit. Once
   the limit is exceeded it loses the glow and shows a subdued cracked face. */
body.tv-broadcast-body .board .prizes .prize.prize-accumulated-ready {
  background: linear-gradient(150deg, #462007 0%, #200d02 100%) !important;
  border-color: #ff9d42;
  animation: prize-pulse-acumulado 1.45s ease-in-out infinite;
}

body.tv-broadcast-body .prize.prize-accumulated-ready .prize-shine {
  background: linear-gradient(90deg, transparent, rgba(255,210,160,.34), transparent);
  animation-duration: 3.8s;
}

body.tv-broadcast-body .board .prizes .prize.prize-accumulated-expired {
  background: linear-gradient(155deg, #292d35 0%, #11151c 100%) !important;
  border-color: rgba(156,164,176,.5);
  box-shadow: 0 8px 20px rgba(0,0,0,.46), inset 0 1px 1px rgba(255,255,255,.08);
  filter: saturate(.35);
  animation: none;
}

body.tv-broadcast-body .prize.prize-accumulated-expired::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .86;
  background:
    linear-gradient(116deg, transparent 0 30%, rgba(230,236,242,.66) 30.5% 31.1%, transparent 31.7%),
    linear-gradient(72deg, transparent 0 46%, rgba(103,112,124,.95) 46.5% 47.2%, transparent 47.8%),
    linear-gradient(130deg, transparent 0 57%, rgba(215,222,230,.54) 57.5% 58.1%, transparent 58.7%),
    linear-gradient(45deg, transparent 0 70%, rgba(104,113,125,.86) 70.5% 71.1%, transparent 71.7%),
    linear-gradient(164deg, transparent 0 74%, rgba(216,223,230,.46) 74.5% 75.1%, transparent 75.7%);
}

body.tv-broadcast-body .prize.prize-accumulated-expired > * {
  position: relative;
  z-index: 2;
}

body.tv-broadcast-body .prize.prize-accumulated-expired .prize-shine {
  display: none;
}

body.tv-broadcast-body .prize.prize-accumulated-expired .prize-icon-wrap {
  filter: grayscale(1) brightness(.62);
  animation: none;
}

body.tv-broadcast-body .prize.prize-accumulated-expired .prize-label,
body.tv-broadcast-body .prize.prize-accumulated-expired .prize-sub,
body.tv-broadcast-body .prize.prize-accumulated-expired .prize-amount {
  color: #aeb5bf;
  text-shadow: none;
}

/* Featured call: centered porcelain face, even coloured rim and calm motion. */
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere {
  background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.7), transparent 32%), radial-gradient(circle at 50% 40%, transparent 52%, rgba(0,0,0,.42)), var(--ball-color) !important;
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.5), inset 0 -6px 12px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.35);
  animation: none;
  filter: none;
}
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere::before,
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.is-entering::before {
  inset: 12%; width: 76%; height: 76%; z-index: 0;
  border: 0; border-radius: 50%; opacity: 1; transform: none;
  background: radial-gradient(circle at 40% 30%, #fff, #f5f7fa 75%, #dce3ec) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.16); animation: none;
}
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > small {
  left: 12%; width: 76%; top: 20%; font-size: 23px; line-height: 1;
}
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > strong {
  left: 12%; width: 76%; top: 38%; font-size: 62px !important; line-height: 1; letter-spacing: -3px;
}
@media (min-width: 700px) {
  body.tv-broadcast-body #live-strip .ball-wrap {
    top: 50%; transform: translate(-50%, -50%); min-height: 0;
    gap: 7px; justify-content: center;
  }
  body.tv-broadcast-body #live-strip .last-ball { margin: 0 auto; }
}
@keyframes tv-call-settle {
  from { opacity: 0; transform: translateY(12px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.is-entering {
  animation: tv-call-settle .45s cubic-bezier(.2,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  body.tv-broadcast-body #live-strip .last-ball.bingo-sphere.is-entering { animation: none; }
}

/* Restore the broadcast composition used by the reference screen: the
   featured ball has a generous left stage and the live details sit beside it. */
@media (min-width: 700px) {
  body.tv-broadcast-body #live-strip.live-strip {
    display: grid;
    grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 1.7vw, 28px);
    min-height: clamp(220px, 29vh, 320px);
    padding: clamp(12px, 1.6vw, 22px);
  }

  body.tv-broadcast-body #live-strip .ball-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    transform: none;
    pointer-events: auto;
    justify-content: center;
    gap: 7px;
  }

  body.tv-broadcast-body #live-strip .last-ball {
    width: clamp(170px, 16vw, 250px) !important;
    height: clamp(170px, 16vw, 250px) !important;
    margin: 0 auto;
  }

  body.tv-broadcast-body #live-strip .live-info {
    position: relative;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1;
    gap: 10px;
    padding-top: 0;
  }

  body.tv-broadcast-body #live-strip .phase-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  body.tv-broadcast-body #live-strip .phase-row strong {
    display: block;
    margin-top: 0;
    font-size: clamp(24px, 3vw, 48px);
  }

  body.tv-broadcast-body #live-strip .recent-track {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
  }
}

body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > small {
  top: 20%;
  font-size: clamp(20px, 2vw, 34px);
}

body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > strong {
  top: 38%;
  font-size: clamp(54px, 6.1vw, 94px) !important;
  letter-spacing: -.04em;
}

/* The fixed two-column broadcast composition is for wide 16:9 televisions.
   Square, 4:3 and portrait screens need a natural-height, scrollable layout. */
@media (max-aspect-ratio: 3/2) {
  body.tv-broadcast-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.tv-broadcast-body > .topbar {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
    gap: 7px !important;
  }

  body.tv-broadcast-body > .topbar .brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  body.tv-broadcast-body > .topbar .topbar-center {
    order: 3 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  body.tv-broadcast-body > .topbar nav {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  body.tv-broadcast-body > main {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px 10px 96px !important;
    gap: 10px !important;
  }

  body.tv-broadcast-body > main > .board {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  body.tv-broadcast-body > main > .board > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > .board > .heading {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.tv-broadcast-body > main > .board > .heading h1 {
    max-width: 100% !important;
    font-size: clamp(22px, 4vw, 38px) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  body.tv-broadcast-body > main > .board > .prizes {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(68px, auto) !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > .board > .prizes > .prize {
    min-width: 0 !important;
    min-height: 68px !important;
    height: auto !important;
    padding: 8px 10px !important;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-label {
    font-size: clamp(10px, 1.5vw, 14px) !important;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-sub {
    font-size: clamp(9px, 1.2vw, 12px) !important;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize .prize-amount {
    font-size: clamp(18px, 2.7vw, 28px) !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip.live-strip {
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > .board > #number-board.number-board {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > aside {
    display: flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > aside > .tickets {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > aside .tickets .participants {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-height: 120px !important;
    max-height: 52vh !important;
    overflow: auto !important;
  }

  body.tv-broadcast-body > .bottom {
    display: flex !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    padding: 7px 10px !important;
  }
}

/* Android TV WebViews sometimes report a 700–949px CSS viewport even when
   the physical screen is a 16:9 32-inch panel. Treat that landscape viewport
   as the broadcast layout: keep the QR invitation in the upper-right column
   and place the ticket cards directly below it instead of using the mobile
   two-column aside. */
@media (orientation: landscape) and (min-aspect-ratio: 3/2) and (min-height: 360px) and (max-width: 949px) {
  body.tv-broadcast-body {
    height: 100vh;height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.tv-broadcast-body > .topbar {
    height: clamp(46px, 8vh, 62px);
    min-height: 0;
    flex-wrap: nowrap;
    padding: 4px 1.5vw;
    gap: 7px;
  }

  body.tv-broadcast-body > .topbar .brand {
    min-width: 0;
    gap: 7px;
  }

  body.tv-broadcast-body > .topbar .brand-mark {
    width: clamp(30px, 5vh, 40px);
    height: clamp(30px, 5vh, 40px);
    font-size: clamp(16px, 2.8vh, 22px);
  }

  body.tv-broadcast-body > .topbar .brand-title {
    font-size: clamp(14px, 2.2vw, 20px);
  }

  body.tv-broadcast-body > .topbar .brand-badge {
    font-size: 7px;
    letter-spacing: .7px;
  }

  body.tv-broadcast-body > .topbar .topbar-center {
    order: initial;
    width: auto;
    min-width: 0;
    margin-left: auto;
    gap: 5px;
  }

  body.tv-broadcast-body > .topbar .connection {
    display: none;
  }

  body.tv-broadcast-body > .topbar nav {
    flex: 0 0 auto;
    gap: 5px;
  }

  body.tv-broadcast-body > .topbar nav button {
    padding: 5px 7px;
    font-size: 10px;
  }

  body.tv-broadcast-body > main {
    display: grid;
    flex: 1 1 0;
    grid-template-columns: minmax(0, 1fr) clamp(238px, 31vw, 330px);
    gap: 10px;
    min-height: 0;
    height: calc(100vh - clamp(46px, 8vh, 62px) - 25px);height: calc(100dvh - clamp(46px, 8vh, 62px) - 25px);
    padding: 7px 1.5vw;
  }

  body.tv-broadcast-body > main > aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 9px;
  }

  body.tv-broadcast-body > main > aside .join {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: 7px;
    gap: 8px;
    text-align: left;
  }

  body.tv-broadcast-body > main > aside .join .qr-frame {
    padding: 5px;
    border-radius: 8px;
  }

  body.tv-broadcast-body > main > aside .join #qr {
    width: clamp(78px, 10vw, 108px) !important;
    height: clamp(78px, 10vw, 108px) !important;
  }

  body.tv-broadcast-body > main > aside .join-content {
    min-width: 0;
  }

  body.tv-broadcast-body > main > aside .join h2 {
    margin: 3px 0 4px;
    font-size: clamp(14px, 1.8vw, 18px);
  }

  body.tv-broadcast-body > main > aside .join p {
    margin: 3px 0 6px;
    font-size: clamp(8px, .95vw, 11px);
    line-height: 1.25;
  }

  body.tv-broadcast-body > main > aside .join .btn-purchase {
    padding: 5px 7px;
    font-size: 9px;
  }

  body.tv-broadcast-body > main > aside .tickets {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 9px;
  }

  body.tv-broadcast-body > main > aside .tickets .participants {
    display: block;
    min-height: 0;
    overflow: auto !important;
  }

  body.tv-broadcast-body > .bottom {
    height: 25px;
    min-height: 25px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 1.5vw;
    font-size: 8px;
    text-align: left;
  }
}

/* 720p televisions have enough width for the full broadcast composition but
   much less vertical room than a desktop monitor. Let the board flex inside
   that height so the featured ball and all six rows of the 1–90 panel remain
   visible instead of being clipped at the bottom of the TV. */
@media (orientation: landscape) and (min-aspect-ratio: 3/2) and (min-height: 300px) and (max-height: 760px) {
  body.tv-broadcast-body > .topbar {
    height: clamp(44px, 7vh, 54px);
    padding-block: 3px;
  }

  body.tv-broadcast-body > main {
    height: calc(100vh - clamp(44px, 7vh, 54px) - 25px);height: calc(100dvh - clamp(44px, 7vh, 54px) - 25px);
    min-height: 0;
    box-sizing: border-box;
    padding-block: 5px;
    gap: 8px;
  }

  body.tv-broadcast-body .board {
    min-height: 0;
    overflow: hidden;
    gap: 5px;
  }

  body.tv-broadcast-body .board .heading {
    min-height: 34px;
    margin-bottom: 0;
  }

  body.tv-broadcast-body .heading h1 {
    font-size: clamp(18px, 2vw, 28px);
  }

  body.tv-broadcast-body .board .prizes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  body.tv-broadcast-body .board .prize {
    padding: 5px 7px;
  }

  body.tv-broadcast-body .board .prize-icon-wrap {
    width: 19px;
    font-size: 16px;
  }

  body.tv-broadcast-body .board .prize-label {
    font-size: 9px;
  }

  body.tv-broadcast-body .board .prize-sub {
    font-size: 7px;
  }

  body.tv-broadcast-body .board .prize .prize-amount {
    font-size: clamp(14px, 2.1vw, 28px);
  }

  body.tv-broadcast-body #live-strip.live-strip {
    min-height: clamp(170px, 28vh, 220px);
    padding: 8px;
    gap: 10px;
  }

  body.tv-broadcast-body #live-strip .last-ball {
    width: clamp(132px, 21vh, 180px) !important;
    height: clamp(132px, 21vh, 180px) !important;
    margin-top: 0;
  }

  body.tv-broadcast-body #live-strip .ball-wrap {
    min-height: 0;
    gap: 4px;
  }

  body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > small {
    font-size: clamp(16px, 2.8vh, 23px);
  }

  body.tv-broadcast-body #live-strip .last-ball.bingo-sphere > strong {
    font-size: clamp(42px, 7vh, 62px) !important;
  }

  body.tv-broadcast-body #live-strip .live-info {
    gap: 5px;
  }

  body.tv-broadcast-body #live-strip .phase-row strong {
    font-size: clamp(21px, 2.9vw, 36px);
  }

  body.tv-broadcast-body #live-strip .recent-track {
    gap: 6px;
    margin: 0;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere {
    width: 28px;
    height: 28px;
  }

  body.tv-broadcast-body #number-board {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  body.tv-broadcast-body #number-board .number {
    aspect-ratio: auto;
    min-height: 0;
    font-size: clamp(10px, 1.45vw, 17px);
  }

  body.tv-broadcast-body .next-round {
    min-height: 52px;
    margin-top: 2px;
    padding-top: 6px;
    gap: 8px;
  }

  body.tv-broadcast-body .next-round > strong {
    font-size: 19px;
    padding: 3px 9px;
  }
}

/* Final compact-landscape fit for Android TV WebViews.  A Smart Pro can
   report a 16:9 panel as roughly 960x540 CSS pixels (or smaller), where the
   desktop prize rule otherwise wraps the four cards into two rows.  Keep the
   board as a bounded flex column and let only the six-row number panel absorb
   the remaining height.  This prevents the featured ball and the lower rows
   from being painted outside the WebView viewport. */
@media (orientation: landscape) and (min-aspect-ratio: 3/2) and (min-height: 300px) and (max-height: 760px) {
  body.tv-broadcast-body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.tv-broadcast-body > .topbar {
    flex: 0 0 clamp(46px, 7vh, 56px);
    height: clamp(46px, 7vh, 56px);
    min-height: 0;
  }

  body.tv-broadcast-body > main {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding-block: clamp(4px, .8vh, 8px);
  }

  body.tv-broadcast-body > main > .board {
    display: flex;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    gap: 5px;
  }

  body.tv-broadcast-body > main > .board > .heading {
    flex: 0 0 auto;
    min-height: 30px;
    margin: 0;
  }

  body.tv-broadcast-body > main > .board > .prizes {
    display: grid;
    flex: 0 0 clamp(52px, 11vh, 78px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    height: clamp(52px, 11vh, 78px);
    margin: 0;
    gap: 5px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize {
    min-height: 0;
    padding: 5px 6px;
    border-radius: 9px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-header {
    min-height: 0;
    gap: 3px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-icon-wrap {
    width: 17px;
    font-size: 15px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-label {
    font-size: clamp(7px, .8vw, 10px);
    letter-spacing: .45px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-sub {
    font-size: clamp(6px, .6vw, 8px);
    letter-spacing: .25px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize .prize-amount {
    margin-top: 2px;
    font-size: clamp(13px, 2.3vw, 25px);
    letter-spacing: -.5px;
  }

  body.tv-broadcast-body > main > .board > .waiting-screen {
    flex: 1 1 0;
    min-height: 0 !important;
    margin: 0;
    padding: 6px;
  }

  body.tv-broadcast-body > main > .board > #live-strip.live-strip {
    flex: 0 0 clamp(148px, 27vh, 212px);
    height: clamp(148px, 27vh, 212px);
    min-height: 0;
    margin: 0;
    padding: 8px;
    gap: 8px;
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > #live-strip .ball-wrap {
    min-height: 0;
    gap: 3px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball {
    width: clamp(120px, 23vh, 176px) !important;
    height: clamp(120px, 23vh, 176px) !important;
    margin: 0 auto;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > small {
    font-size: clamp(16px, 2.8vh, 24px);
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > strong {
    font-size: clamp(42px, 6.8vh, 72px) !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip .live-info {
    min-width: 0;
    gap: 5px;
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong {
    font-size: clamp(20px, 2.8vw, 34px);
  }

  body.tv-broadcast-body > main > .board > #live-strip .recent-track {
    gap: 5px;
    margin: 0;
  }

  body.tv-broadcast-body > main > .board > #number-board {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > #number-board .number {
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 5px;
    font-size: clamp(9px, 1.25vw, 16px);
  }

  body.tv-broadcast-body > main > .board > .next-round {
    flex: 0 0 clamp(42px, 8vh, 58px);
    min-height: 0;
    height: clamp(42px, 8vh, 58px);
    margin: 0;
    padding: 5px 8px;
    gap: 6px;
    overflow: hidden;
  }

  body.tv-broadcast-body > main > .board > .next-round > strong {
    padding: 3px 8px;
    font-size: clamp(16px, 2.5vw, 24px);
  }

  body.tv-broadcast-body > .bottom {
    flex: 0 0 25px;
    height: 25px;
    min-height: 25px;
    overflow: hidden;
  }
}

/* Some Android TV firmware exposes a 1280x720 panel to WebView as only
   640x360 CSS pixels.  Keep a small but complete broadcast composition at
   that height too; otherwise the live sphere consumes the space needed by
   the lower six rows of the number board. */
@media (orientation: landscape) and (min-height: 300px) and (max-height: 500px) {
  body.tv-broadcast-body > .topbar {
    flex-basis: 40px;
    height: 40px;
    padding-block: 2px;
  }

  body.tv-broadcast-body > main {
    padding-block: 2px;
    gap: 6px;
  }

  body.tv-broadcast-body > main > .board {
    gap: 3px;
  }

  body.tv-broadcast-body > main > .board > .heading {
    min-height: 24px;
  }

  body.tv-broadcast-body > main > .board > .heading h1 {
    font-size: clamp(15px, 2.5vw, 21px);
    margin-top: 0;
  }

  body.tv-broadcast-body > main > .board > .heading > div:first-child {
    min-width: 0;
    flex: 1 1 0;
  }

  body.tv-broadcast-body > main > .board > .heading h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule {
    flex: 0 0 38%;
    min-width: 0;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule-icon,
  body.tv-broadcast-body > main > .board > .heading .room-tag {
    display: none;
  }

  body.tv-broadcast-body > main > .board > .heading .eyebrow {
    font-size: 7px;
    letter-spacing: .8px;
  }

  body.tv-broadcast-body > main > .board > .prizes {
    flex-basis: 44px;
    height: 44px;
    gap: 3px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize {
    padding: 3px 4px;
    border-radius: 6px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-icon-wrap {
    width: 13px;
    font-size: 12px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-label {
    font-size: 8px;
    letter-spacing: .2px;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize-sub {
    display: none;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize .prize-amount {
    margin-top: 1px;
    font-size: clamp(10px, 2vw, 17px);
  }

  body.tv-broadcast-body > main > .board > #live-strip.live-strip {
    flex-basis: 120px;
    height: 120px;
    padding: 5px;
    gap: 5px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball {
    width: 90px !important;
    height: 90px !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > small {
    font-size: 14px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > strong {
    font-size: 34px !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong {
    font-size: clamp(17px, 2.7vw, 26px);
  }

  body.tv-broadcast-body > main > .board > #live-strip .recent-track {
    gap: 3px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .recent span.bingo-sphere {
    width: 22px;
    height: 22px;
  }

  body.tv-broadcast-body > main > .board > #number-board {
    gap: 2px;
    padding: 3px;
  }

  body.tv-broadcast-body > main > .board > #number-board .number {
    border-radius: 3px;
    font-size: clamp(8px, 1.1vw, 12px);
  }

  body.tv-broadcast-body > main > .board > .next-round {
    flex-basis: 34px;
    height: 34px;
    padding: 3px 5px;
    gap: 4px;
  }

  body.tv-broadcast-body > main > .board > .next-round > strong {
    padding: 2px 5px;
    font-size: 14px;
  }

  body.tv-broadcast-body > .bottom {
    flex-basis: 18px;
    height: 18px;
    min-height: 18px;
    padding-block: 1px;
    font-size: 8px;
  }
}

/* Narrow CSS viewports are usually a scaled 720p Android TV output.  Give
   the board enough width for a single compact heading and keep the optional
   footer out of the measured stage so the number rows cannot fall below the
   screen. */
@media (orientation: landscape) and (min-height: 300px) and (max-height: 430px) and (max-width: 699px) {
  body.tv-broadcast-body > main {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 38vw);
    gap: 4px;
    padding-inline: 4px;
  }

  body.tv-broadcast-body > main > .board > .heading {
    display: flex;
    min-height: 30px;
    height: 30px;
    gap: 4px;
  }

  body.tv-broadcast-body > main > .board > .heading > div:first-child {
    min-width: 0;
    flex: 1 1 0;
  }

  body.tv-broadcast-body > main > .board > .heading h1 {
    overflow: hidden;
    font-size: 16px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.tv-broadcast-body > main > .board > .heading .eyebrow {
    overflow: hidden;
    max-width: 100%;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule {
    flex: 0 0 38%;
    min-width: 0;
    gap: 0;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule-pill {
    min-width: 0;
    padding: 0;
    gap: 2px;
    font-size: 8px;
    white-space: nowrap;
  }

  body.tv-broadcast-body > main > .board > .heading .schedule-icon,
  body.tv-broadcast-body > main > .board > .heading .room-tag {
    display: none;
  }

  body.tv-broadcast-body > main > .board > .prizes {
    flex-basis: 40px;
    height: 40px;
  }

  body.tv-broadcast-body > main > .board > #live-strip.live-strip {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    flex-basis: 108px;
    height: 108px;
    gap: 4px;
    padding: 4px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball {
    width: 80px !important;
    height: 80px !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > small {
    font-size: 12px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > strong {
    font-size: 30px !important;
  }

  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong {
    font-size: 16px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .recent-track {
    gap: 2px;
  }

  body.tv-broadcast-body > main > .board > #live-strip .recent span.bingo-sphere {
    width: 19px;
    height: 19px;
  }

  body.tv-broadcast-body > main > .board > #number-board {
    gap: 2px;
    padding: 2px;
  }

  body.tv-broadcast-body > main > .board > #number-board .number {
    border-radius: 2px;
    font-size: 8px;
  }

  body.tv-broadcast-body > main > .board > .next-round {
    flex-basis: 28px;
    height: 28px;
    padding: 2px 4px;
    gap: 3px;
  }

  body.tv-broadcast-body > main > .board > .next-round > strong {
    font-size: 12px;
    padding: 1px 4px;
  }

  body.tv-broadcast-body > .bottom {
    display: none;
  }
}

/* Final guard for short landscape screens.  Keep the featured ball inside
   its stage and let the 1–90 grid consume the remaining height, so the
   bottom row is never clipped.  The compact invitation leaves more vertical
   space for the participant cards on the right. */
@media (orientation: landscape) and (min-aspect-ratio: 3/2) and (min-width: 700px) and (max-height: 900px) {
  body.tv-broadcast-body { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
  body.tv-broadcast-body > .topbar {
    flex: 0 0 clamp(44px, 6.8vh, 60px);
    height: clamp(44px, 6.8vh, 60px);
    min-height: 0;
    overflow: hidden;
  }
  body.tv-broadcast-body > main {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding-block: clamp(3px, .65vh, 7px);
  }
  body.tv-broadcast-body > main > .board {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: clamp(3px, .65vh, 7px);
  }
  body.tv-broadcast-body > main > .board > .heading {
    flex: 0 0 clamp(27px, 5.8vh, 46px);
    height: clamp(27px, 5.8vh, 46px);
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
  body.tv-broadcast-body > main > .board > .heading h1 {
    font-size: clamp(16px, 2.1vw, 29px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.tv-broadcast-body > main > .board > .prizes {
    flex: 0 0 clamp(46px, 10vh, 76px);
    height: clamp(46px, 10vh, 76px);
    min-height: 0;
    margin: 0;
    gap: clamp(3px, .45vw, 6px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
  body.tv-broadcast-body > main > .board > .prizes .prize {
    min-height: 0;
    padding: clamp(3px, .55vh, 7px) clamp(4px, .55vw, 8px);
    border-radius: 8px;
  }
  body.tv-broadcast-body > main > .board > .prizes .prize-label { font-size: clamp(7px, .72vw, 11px); letter-spacing: .3px; }
  body.tv-broadcast-body > main > .board > .prizes .prize-sub { font-size: clamp(6px, .58vw, 8px); letter-spacing: .15px; }
  body.tv-broadcast-body > main > .board > .prizes .prize .prize-amount { margin-top: 1px; font-size: clamp(12px, 2.15vw, 27px); }
  body.tv-broadcast-body > main > .board > .waiting-screen { flex: 1 1 0; min-height: 0 !important; margin: 0; }
  body.tv-broadcast-body > main > .board > #live-strip.live-strip {
    flex: 0 0 clamp(124px, 24vh, 194px);
    height: clamp(124px, 24vh, 194px);
    min-height: 0;
    margin: 0;
    padding: clamp(5px, 1vh, 10px);
    overflow: hidden;
  }
  body.tv-broadcast-body > main > .board > #live-strip .last-ball {
    width: clamp(100px, 19vh, 154px) !important;
    height: clamp(100px, 19vh, 154px) !important;
    margin: 0 auto;
    flex: 0 0 auto;
  }
  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > small { font-size: clamp(14px, 2.5vh, 23px); }
  body.tv-broadcast-body > main > .board > #live-strip .last-ball.bingo-sphere > strong { font-size: clamp(36px, 6vh, 68px) !important; }
  body.tv-broadcast-body > main > .board > #live-strip .live-info { min-width: 0; overflow: hidden; gap: clamp(3px, .7vh, 7px); }
  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong { font-size: clamp(18px, 2.65vw, 35px); }
  body.tv-broadcast-body > main > .board > #number-board {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: clamp(2px, .38vh, 4px);
    padding: clamp(3px, .6vh, 6px);
    overflow: hidden;
  }
  body.tv-broadcast-body > main > .board > #number-board .number {
    min-height: 0;
    aspect-ratio: auto;
    border-radius: clamp(2px, .45vh, 5px);
    font-size: clamp(8px, 1.25vw, 16px);
    line-height: 1;
  }
  body.tv-broadcast-body > main > .board > .next-round {
    flex: 0 0 clamp(30px, 6.8vh, 54px);
    height: clamp(30px, 6.8vh, 54px);
    min-height: 0;
    margin: 0;
    padding: clamp(3px, .7vh, 7px) clamp(5px, .7vw, 9px);
    overflow: hidden;
  }
  body.tv-broadcast-body > main > aside { min-height: 0; gap: clamp(5px, .8vh, 9px); }
  body.tv-broadcast-body > main > aside .join {
    flex: 0 0 clamp(108px, 20vh, 160px);
    height: clamp(108px, 20vh, 160px);
    min-height: 0;
    padding: clamp(5px, .75vh, 8px);
    overflow: hidden;
  }
  body.tv-broadcast-body > main > aside .join .qr-frame { padding: 4px; border-radius: 7px; }
  body.tv-broadcast-body > main > aside .join #qr { width: clamp(64px, 10vh, 98px) !important; height: clamp(64px, 10vh, 98px) !important; }
  body.tv-broadcast-body > main > aside .join-content { min-width: 0; overflow: hidden; }
  body.tv-broadcast-body > main > aside .join h2 { margin: 2px 0 3px; font-size: clamp(12px, 1.45vw, 18px); line-height: 1.05; }
  body.tv-broadcast-body > main > aside .join p {
    display: -webkit-box;
    margin: 2px 0 4px;
    overflow: hidden;
    font-size: clamp(7px, .72vw, 10px);
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body.tv-broadcast-body > main > aside .join .btn-purchase { padding: 4px 7px; font-size: clamp(8px, .65vw, 10px); }
  body.tv-broadcast-body > main > aside .tickets { flex: 1 1 0; min-height: 0; overflow: hidden; padding: clamp(6px, .8vh, 10px); }
body.tv-broadcast-body > main > aside .tickets .participants { min-height: 0; overflow: auto !important; }
}

/* Keep the QR invitation compact and pinned to the upper-right of the
   sidebar so the public ticket sample has the largest possible viewing area.
   This is sized with viewport units so the same composition holds across
   28–40 inch 16:9 televisions. */
@media (min-width: 850px) {
  body.tv-broadcast-body > main > aside .join {
    min-height: 0;
    height: auto;
    flex: 0 0 auto;
    padding: clamp(7px, .85vh, 10px) clamp(9px, .85vw, 13px);
    gap: clamp(8px, .8vw, 11px);
    align-items: flex-start;
  }

  body.tv-broadcast-body > main > aside .join-content {
    order: 1;
    min-width: 0;
    align-self: center;
  }

  body.tv-broadcast-body > main > aside .join .qr-frame {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px;
    border-radius: 8px;
  }

  body.tv-broadcast-body > main > aside .join #qr {
    width: clamp(64px, 5.4vw, 78px) !important;
    height: clamp(64px, 5.4vw, 78px) !important;
  }

  body.tv-broadcast-body > main > aside .join h2 {
    margin: 0 0 3px;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.15;
  }

  body.tv-broadcast-body > main > aside .join p {
    margin: 2px 0 5px;
    font-size: clamp(8px, .62vw, 10px);
    line-height: 1.25;
  }

  body.tv-broadcast-body > main > aside .join p {
    display: none;
  }

  body.tv-broadcast-body > main > aside .join .btn-purchase {
    padding: 5px 8px;
    font-size: clamp(9px, .62vw, 10px);
  }

  body.tv-broadcast-body > main > aside .tickets {
    padding: clamp(10px, 1.1vh, 13px);
  }
}

@media (min-width: 850px) and (max-height: 760px) {
  body.tv-broadcast-body > main > aside .join {
    height: auto;
    flex: 0 0 auto;
    padding: 6px 8px;
    gap: 7px;
  }

  body.tv-broadcast-body > main > aside .join #qr {
    width: clamp(58px, 7vh, 72px) !important;
    height: clamp(58px, 7vh, 72px) !important;
  }
}

/* The title must stay on one readable line even when a TV reports a reduced
   CSS width.  Ellipsis keeps the prize row from covering the match label. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > .board > .heading h1 {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(17px, 2vw, 30px);
  }
}

/* 720p polish: keep the active prize card steady and legible. The previous
   pulse scaled the whole card while the icon bobbed independently, which
   made the title look clipped at the compact TV height. */
@keyframes tv-prize-active-glow-720 {
  0%, 100% {
    border-color: rgba(255, 235, 151, .86);
    box-shadow: 0 7px 16px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 221, 93, .26), 0 0 20px rgba(255, 214, 86, .42), inset 0 1px 1px rgba(255, 255, 255, .2);
  }
  50% {
    border-color: #fff3bb;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 224, 102, .42), 0 0 34px rgba(255, 211, 73, .68), inset 0 1px 2px rgba(255, 255, 255, .42);
  }
}

@media (orientation: landscape) and (min-width: 850px) and (max-height: 760px) {
  body.tv-broadcast-body > main > .board > .prizes .prize.prize-active {
    animation: tv-prize-active-glow-720 1.5s ease-in-out infinite;
    transform: none !important;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize.prize-active .prize-icon-wrap {
    animation: none;
    transform: none !important;
  }

  body.tv-broadcast-body > main > .board > .prizes .prize .prize-amount {
    font-size: clamp(15px, 1.9vw, 24px);
    letter-spacing: -.35px;
  }

  /* Use one compact row per ticket: point name and card identity stay on the
     left while the missing values remain visible on the right. */
  body.tv-broadcast-body > main > aside .tickets-title {
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  body.tv-broadcast-body > main > aside .ticket.ticket-missing-only {
    display: grid;
    grid-template-columns: minmax(92px, .78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 7px;
    min-height: 0;
    margin-bottom: 6px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .ticket-player {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .ticket-player strong {
    font-size: 12px;
    line-height: 1.05;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .ticket-player small {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: .35px;
    text-overflow: ellipsis;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .ticket-missing-row {
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .missing-label {
    padding: 0;
    font-size: 8px;
    letter-spacing: .45px;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .missing-numbers {
    align-items: center;
    gap: 3px;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .missing-number {
    min-width: 22px;
    min-height: 22px;
    padding: 2px 4px;
    border-radius: 5px;
    font-size: 11px;
  }

  body.tv-broadcast-body > main > aside .ticket-missing-only .ticket-complete {
    min-height: 22px;
    padding: 2px 6px;
    font-size: 9px;
  }

  /* The recent-call canaleta gets a little more room and the same coloured
     B-I-N-G-O rims as the featured ball, so it stays readable at 720p. */
  body.tv-broadcast-body #live-strip .recent-track {
    gap: 8px;
  }

  body.tv-broadcast-body #live-strip .recent {
    gap: 5px;
    padding: 4px 6px;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere {
    width: 34px;
    height: 34px;
    border-width: 2px;
    box-shadow: inset 2px 2px 4px rgba(255,255,255,.78), inset -4px -5px 8px rgba(0,0,0,.42), 0 4px 10px rgba(0,0,0,.34);
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere::before {
    inset: 10%;
    width: 80%;
    height: 80%;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > small {
    top: 15%;
    font-size: 7px;
  }

  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > strong {
    top: 37%;
    font-size: 13px;
  }
}


/* Explicit offsets work in older Android WebViews without inset support. */
body.tv-broadcast-body #live-strip .ball-wrap {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
}
/* The sheen must never participate in the prize flex layout. */
body.tv-broadcast-body .prize.prize-active > .prize-shine {
  position: absolute;
}

/* Keep the broadcast idle between official calls on low-power TV hardware.
   Prize eligibility remains visible through static gold borders and glow. */
body.tv-broadcast-body .prize-icon-wrap,
body.tv-broadcast-body .board .prizes .prize.prize-active,
body.tv-broadcast-body .board .prizes .prize.prize-accumulated-ready,
body.tv-broadcast-body .number.latest,
body.tv-broadcast-body #live-strip .last-ball:not(.is-entering) {
  animation: none !important;
}
body.tv-broadcast-body .prize-shine {
  display: none;
}
body.tv-broadcast-body .board .prizes .prize.prize-active,
body.tv-broadcast-body .board .prizes .prize.prize-accumulated-ready {
  box-shadow: inset 0 0 0 2px #ffe18a, 0 0 12px rgba(255,210,85,.5);
}

/* Android TV: reserve real text height; do not rely on clamp() support. */
@media (orientation: landscape) and (min-width: 700px) {
  body.tv-broadcast-body > main > .board > .heading {
    display: flex;
    flex: 0 0 auto;
    height: auto;
    min-height: 54px;
    padding: 3px 0 5px;
    box-sizing: border-box;
    align-items: center;
    overflow: visible;
  }
  body.tv-broadcast-body > main > .board > .heading > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.tv-broadcast-body > main > .board > .heading .eyebrow {
    margin: 0 0 4px;
    font-size: 10px;
    line-height: 14px;
    white-space: normal;
  }
  body.tv-broadcast-body > main > .board > .heading h1 {
    margin: 0;
    padding: 0 0 2px;
    font-size: 24px;
    line-height: 29px;
  }
  body.tv-broadcast-body > main > aside {
    display: flex;
    flex-direction: column;
  }
  body.tv-broadcast-body > main > aside .join {
    display: flex;
    flex-direction: row;
    flex: 0 0 68px;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    box-sizing: border-box;
    padding: 5px 8px;
    align-items: center;
    overflow: hidden;
  }
  body.tv-broadcast-body > main > aside .join .qr-frame {
    padding: 3px;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    order: 2;
  }
  body.tv-broadcast-body > main > aside .join #qr {
    width: 50px !important;
    height: 50px !important;
  }
  body.tv-broadcast-body > main > aside .join-content {
    order: 1;
    min-width: 0;
  }
  body.tv-broadcast-body > main > aside .join h2,
  body.tv-broadcast-body > main > aside .join p { display: none; }
  body.tv-broadcast-body > main > aside .join .eyebrow {
    font-size: 10px;
    line-height: 14px;
    margin: 0 0 4px;
  }
  body.tv-broadcast-body > main > aside .join .btn-purchase {
    font-size: 10px;
    padding: 5px 8px;
  }
  body.tv-broadcast-body > main > aside .tickets {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
  }
}

/* Each row has a stable footprint so scrolling can render a small window. */
body.tv-broadcast-body #participants.windowed-cards {
  display: block !important;
  overflow-y: auto;
  overflow-anchor: none;
  padding-top: 0;
  padding-bottom: 0;
}
body.tv-broadcast-body #participants.windowed-cards > article.ticket {
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 0 4px !important;
  padding: 3px 7px !important;
  overflow: hidden;
}

body.tv-broadcast-body #participants.windowed-cards > article.ticket {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 6px;
  height: var(--card-window-height, 42px) !important;
  min-height: var(--card-window-height, 42px) !important;
  max-height: var(--card-window-height, 42px) !important;
}
body.tv-broadcast-body #participants.windowed-cards .ticket-player {
  display: block;
  min-width: 0;
  margin: 0;
}
body.tv-broadcast-body #participants.windowed-cards .ticket-player strong {
  display: block;
  font-size: 12px;
  line-height: 15px;
}
body.tv-broadcast-body #participants.windowed-cards .ticket-player small {
  display: block;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 8px;
  line-height: 11px;
  background: transparent;
}
body.tv-broadcast-body #participants.windowed-cards .ticket-missing-row {
  display: block;
  min-width: 0;
  margin: 0;
}
body.tv-broadcast-body #participants.windowed-cards .missing-label {
  display: inline;
  font-size: 8px;
  line-height: 10px;
  padding: 0;
}
body.tv-broadcast-body #participants.windowed-cards .missing-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
body.tv-broadcast-body #participants.windowed-cards .missing-number {
  min-width: 22px;
  min-height: 21px;
  padding: 1px 3px;
  font-size: 13px;
  font-weight: 900;
  line-height: 12px;
}
body.tv-broadcast-body #participants.windowed-cards .ticket-complete {
  font-size: 9px;
  line-height: 13px;
  min-height: 0;
  padding: 1px 3px;
}

body.tv-broadcast-body #participants.windowed-cards .ticket-missing-row {
  line-height: 10px;
  font-size: 8px;
}
body.tv-broadcast-body #participants.windowed-cards > article.ticket {
  grid-template-rows: minmax(0, 1fr);
}

/* Give the public list a little more reading width. The board keeps the
   larger left column while the right panel gains room for ticket codes and
   larger missing-number chips. */
@media (orientation: landscape) and (min-width: 700px) {
body.tv-broadcast-body > main {
    grid-template-columns: minmax(0, 1fr) clamp(330px, 34vw, 450px);
  }
}

/* The TV has no need for a QR canvas: removing it gives the public sample
   the full vertical side rail and keeps the Android WebView from spending
   time painting a bitmap that is not used on the television. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside .join {
    flex: 0 0 clamp(42px, 6vh, 58px) !important;
    height: clamp(42px, 6vh, 58px) !important;
    min-height: clamp(42px, 6vh, 58px) !important;
    max-height: clamp(42px, 6vh, 58px) !important;
    box-sizing: border-box;
    padding: 4px 8px !important;
    overflow: hidden;
  }
  body.tv-broadcast-body > main > aside .join .qr-frame { display: none !important; }
  body.tv-broadcast-body > main > aside .join-content {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  body.tv-broadcast-body > main > aside .join .eyebrow {
    margin: 0;
    white-space: nowrap;
  }
  body.tv-broadcast-body > main > aside .join h2,
  body.tv-broadcast-body > main > aside .join p { display: none !important; }
  body.tv-broadcast-body > main > aside .join .btn-purchase {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
  body.tv-broadcast-body > main > aside .tickets {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body.tv-broadcast-body > main > aside .tickets > footer { display: none !important; }
}


/* TV APK: keep the complete right rail for the public participant sample.
   The markup no longer includes the invitation; this fallback also hides it
   when an older WebView restores a cached document from a previous release. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside { gap: 0 !important; }
  body.tv-broadcast-body > main > aside > .join { display: none !important; }
  body.tv-broadcast-body > main > aside > .tickets {
    flex: 1 1 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* Make the recent official calls easy to read on the TV APK. Explicit
   box-sizing and fixed flex bases keep both the sphere and its two-digit
   number inside the circle at every compact WebView width. */
@media (orientation: landscape) and (min-width: 850px) and (max-height: 760px) {
  body.tv-broadcast-body #live-strip .recent {
    gap: 8px !important;
    padding: 4px 8px !important;
  }
  body.tv-broadcast-body #live-strip .recent span.bingo-sphere {
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > small {
    top: 14% !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }
  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > strong {
    top: 36% !important;
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
}

/* Scaled 640x360-style Android TV viewports use an even tighter composition;
   30px balls remain large enough to read without pushing the live text out. */
@media (orientation: landscape) and (min-height: 300px) and (max-height: 500px) {
  body.tv-broadcast-body #live-strip .recent {
    gap: 5px !important;
    padding: 3px 6px !important;
  }
  body.tv-broadcast-body #live-strip .recent span.bingo-sphere {
    box-sizing: border-box !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }
  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > small {
    top: 13% !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }
  body.tv-broadcast-body #live-strip .recent span.bingo-sphere > strong {
    top: 35% !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  /* This short-height breakpoint previously hid every prize subtitle,
     including the configured accumulated-ball limit. Keep the 45-ball rule
     visible on the card. */
  body.tv-broadcast-body > main > .board > .prizes .prize.prize-acumulado .prize-sub {
    display: block !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }
}

/* Compact the public participant rail on the TV APK. The slimmer frame and
   shorter row footprint leave room for more participant names at once while
   keeping the card text readable from a television distance. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside > .tickets {
    padding: 6px !important;
    border-width: 1px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .08) !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title {
    padding-bottom: 3px !important;
    margin-bottom: 3px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title h2 {
    font-size: clamp(15px, 1.45vw, 18px) !important;
  }
  body.tv-broadcast-body > main > aside #participants.windowed-cards > article.ticket {
    margin-bottom: 4px !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
  }
  body.tv-broadcast-body > main > aside #participants.windowed-cards .ticket-player strong {
    font-size: 12px;
    line-height: 14px;
  }
  body.tv-broadcast-body > main > aside #participants.windowed-cards .ticket-player small {
    font-size: 8px;
    line-height: 10px;
  }
  body.tv-broadcast-body > main > aside #participants.windowed-cards .missing-number {
    min-width: 21px;
    min-height: 20px;
    padding: 1px 3px;
    font-size: 12px;
  }
}

/* Prize announcements must cover the complete TV viewport. Some Android TV
   WebViews resolve a fixed overlay against the board stacking context, which
   leaves the celebration stranded in a corner. Pin it to the viewport and
   center the card explicitly after every other TV stylesheet. */
body.tv-broadcast-body > #winner-gift-overlay.winner-gift-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  padding: clamp(12px, 3vw, 28px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.tv-broadcast-body > #winner-gift-overlay.winner-gift-overlay[hidden] {
  display: none !important;
}

body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-card {
  width: min(760px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100vh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

/* Mobile TV composition: the browser viewport stays fixed, while the main
   broadcast surface owns the scroll. A grid row with a fixed height used to
   squeeze the board and let its prize cards overflow into the ticket list. */
@media (max-width: 699px) {
  /* Stack the round identity and schedule on narrow phones. The desktop
     two-column heading leaves too little width at 355px, so the schedule
     used to paint over the round title and countdown badge. */
  body.tv-broadcast-body > main > .board > .heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 13px 11px !important;
  }
  body.tv-broadcast-body > main > .board > .heading > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
  }
  body.tv-broadcast-body > main > .board > .heading h1 {
    max-width: 100% !important;
    font-size: clamp(28px, 10vw, 38px) !important;
    line-height: .98 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    text-align: left !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule-pill {
    min-width: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 3px 5px !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule-icon {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule-countdown {
    max-width: 100% !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body > main > .board > .heading .room-tag {
    align-self: center !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }

  body.tv-broadcast-body > main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 12px 10px 22px !important;
  }
  /* The phone layout must scroll as a document. Keeping the body fixed and
     overflow-hidden here trapped the lower participants panel off-screen. */
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
  }
  body.tv-broadcast-body {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
  }
  body.tv-broadcast-body > main > .board {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  body.tv-broadcast-body > main > .board > .heading,
  body.tv-broadcast-body > main > .board > .prizes,
  body.tv-broadcast-body > main > .board > .waiting-screen,
  body.tv-broadcast-body > main > .board > #live-strip,
  body.tv-broadcast-body > main > .board > #number-board,
  body.tv-broadcast-body > main > .board > .next-round {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
  body.tv-broadcast-body > main > .board > .prizes {
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 0 !important;
  }
  body.tv-broadcast-body > main > .board > .prizes .prize,
  body.tv-broadcast-body > main > .board > .prizes .prize.prize-active {
    transform: none !important;
    z-index: 0 !important;
  }
  body.tv-broadcast-body > main > aside {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 14px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .participants {
    height: min(420px, calc(100dvh - 300px)) !important;
    min-height: 260px !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.tv-broadcast-body #participants.windowed-cards > article.ticket {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    margin: 0 0 6px !important;
    padding: 8px 9px !important;
    overflow: hidden !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .ticket-player {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .ticket-player strong {
    min-width: 0 !important;
    max-width: 58% !important;
    font-size: 12px !important;
    line-height: 14px !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .ticket-player small {
    max-width: 42% !important;
    overflow: hidden !important;
    font-size: 8px !important;
    line-height: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .ticket-missing-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .missing-label {
    flex: 0 0 auto !important;
    font-size: 8px !important;
    line-height: 22px !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .missing-numbers {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
  }
  body.tv-broadcast-body #participants.windowed-cards .missing-number,
  body.tv-broadcast-body #participants.windowed-cards .ticket-complete {
    flex: 0 0 auto !important;
    min-width: 23px !important;
    min-height: 22px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    line-height: 16px !important;
  }
}

/* Keep the waiting/results panel inside the right-hand TV card. Winner rows
   should use the free height and scroll when a draw has more prizes than fit. */
@media (min-width: 700px) and (min-aspect-ratio: 1501/1000) {
  body.tv-broadcast-body { overflow: hidden !important; }
  body.tv-broadcast-body > main > aside > .tickets {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 10px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners > .recent-winners-heading {
    flex: 0 0 auto !important;
    margin-bottom: 6px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners > .recent-winners-list {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-draw-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    min-height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 4px 0 0 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-draw-group > header {
    flex: 0 0 auto !important;
    margin-bottom: 5px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(50px, auto) !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    width: 100% !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item {
    min-height: 50px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-trophy { font-size: 18px !important; }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item small { font-size: 8px !important; }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item strong { font-size: clamp(13px, 1.25vw, 18px) !important; }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item span { font-size: 9px !important; }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item > b { font-size: clamp(14px, 1.4vw, 20px) !important; }
}

/* The account's cards follow the same gift-bubble interaction as the Hub
   wallet: collapsed by default, pinned above the TV edge, and expandable
   without stealing height from the public participant rail. */
.private-tickets-float {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 140;
  width: min(370px, calc(100vw - 32px));
  pointer-events: none;
}
.private-tickets-float-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px 8px 9px;
  color: #fff;
  border: 2px solid rgba(255, 226, 124, .95);
  border-radius: 999px;
  background: linear-gradient(135deg, #1d62b5, #3286e5 65%, #65a5f2);
  box-shadow: 0 8px 0 rgba(7, 30, 87, .2), 0 14px 30px rgba(5, 22, 65, .38);
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  transition: transform .18s ease, filter .18s ease;
}
.private-tickets-float-trigger:hover { filter: brightness(1.06); transform: translateY(-2px); }
.private-tickets-float-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 2px solid #fff5bf;
  border-radius: 50%;
  color: #a96500;
  background: linear-gradient(145deg, #fff6bb, #f0b934);
  box-shadow: 0 3px 10px rgba(53, 31, 2, .25);
  font-size: 20px;
}
.private-tickets-float-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.private-tickets-float-copy strong { color: #fff; font-size: 15px; line-height: 1; }
.private-tickets-float-copy small { overflow: hidden; color: rgba(255,255,255,.86); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.private-tickets-float-chevron { margin-left: auto; color: #fff; font-size: 18px; line-height: 1; transition: transform .2s ease; }
.private-tickets-float.is-open .private-tickets-float-chevron { transform: rotate(180deg); }
.private-tickets-float-panel {
  max-height: min(680px, calc(100vh - 112px));
  margin-bottom: 12px;
  padding: 11px;
  overflow: auto;
  border: 2px solid rgba(255, 226, 124, .95);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(9, 31, 63, .99), rgba(7, 14, 28, .99));
  box-shadow: 0 10px 0 rgba(7, 30, 87, .18), 0 18px 42px rgba(3, 17, 49, .5);
  pointer-events: auto;
}
.private-tickets-float-panel[hidden] { display: none; }
.private-tickets-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 10px;
  color: #78c8ff;
  font-size: 14px;
  font-weight: 900;
}
.private-tickets-heading button {
  display: grid;
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  color: #d9e9ff;
  border: 1px solid rgba(120, 200, 255, .45);
  border-radius: 50%;
  background: rgba(20, 61, 111, .72);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}
.private-tickets-heading button svg { display: block; width: 20px; height: 20px; }
.private-tickets-heading button:hover { background: #214363; }
.private-tickets-heading button:active { background: #0b1b30; }
.private-tickets-heading button:focus-visible { outline: 2px solid #a7d8ff; outline-offset: 3px; }
.private-participants {
  max-height: min(520px, calc(100vh - 245px));
  overflow: auto;
  scrollbar-color: #5ca2ff rgba(7, 19, 38, .6);
}
.private-participants .ticket { border-color: rgba(91, 190, 255, .3); }
.private-tickets-float-panel footer { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px 0; color: #a9c8e7; font-size: 10px; }

@media (max-width: 699px) {
  .private-tickets-float { right: 10px; bottom: 10px; width: min(350px, calc(100vw - 20px)); }
  .private-tickets-float-panel { max-height: calc(100vh - 104px); }
  .private-participants { max-height: calc(100vh - 240px); }
}

/* Results must stay readable on every desktop/TV viewport. Keep the draw
   heading and each winner card in a single full-width vertical column; this
   final override also handles older Android WebViews with different flex
   sizing behavior. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners > .recent-winners-heading {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners > .recent-winners-list,
  body.tv-broadcast-body > main > aside > .tickets .recent-draw-group {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-list {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(82px, auto) !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    box-sizing: border-box !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item > div {
    min-width: 0 !important;
  }
}

/* The results layout above intentionally uses !important so its rows stay
   vertical on older TV WebViews. Keep that override from defeating the
   hidden attribute while a partida is live: an invisible results panel must
   release its flex space so the public cartelas start directly under the
   heading instead of being pushed to the bottom of the card. */
body.tv-broadcast-body > main > aside > .tickets > #recent-winners[hidden] {
  display: none !important;
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* renderCards() keeps the virtualized-card class on this node after a draw
   finishes. Its display:block rule overrides the browser's default [hidden]
   styling, so explicitly remove the participant rail from the flex layout;
   otherwise it steals half the results card and clips the lower prizes. */
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards[hidden] {
  display: none !important;
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Give the compact results rail a clear reading order. Each winner's stage,
   name, and card code gets its own line; the prize stays aligned at right. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside > .tickets > #recent-winners .recent-winners-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: clamp(10px, .85vw, 12px) !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #recent-winners .recent-winners-heading > span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #recent-winners .recent-winners-heading > strong {
    white-space: nowrap !important;
    font-size: clamp(10px, .8vw, 12px) !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-draw-group > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    line-height: 1.25 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-draw-group > header strong {
    min-width: 0 !important;
    font-size: clamp(11px, .92vw, 13px) !important;
    line-height: 1.25 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-draw-group > header span {
    font-size: clamp(10px, .78vw, 11px) !important;
    line-height: 1.25 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item small,
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item strong,
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item .recent-winner-codes {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item small {
    color: #ffe28a !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item strong {
    overflow: hidden !important;
    font-size: clamp(13px, 1.05vw, 16px) !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
    text-overflow: ellipsis !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item .recent-winner-codes {
    overflow: hidden !important;
    color: #c5d5ed !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item > b {
    font-size: clamp(17px, 1.45vw, 22px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }
}

/* Finished rounds use a compact single-line heading so the winner cards get
   the maximum vertical space available in the public TV rail. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside > .tickets.tickets-results-mode > .tickets-title {
    padding-top: 2px !important;
    padding-bottom: 3px !important;
    margin-bottom: 2px !important;
    min-height: 0 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets.tickets-results-mode > .tickets-title .tickets-kicker:empty {
    display: none !important;
  }
  body.tv-broadcast-body > main > aside > .tickets.tickets-results-mode > .tickets-title h2 {
    font-size: clamp(14px, 1.2vw, 17px) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets.tickets-results-mode > #recent-winners {
    padding-top: 2px !important;
  }
}

/* Highlight winning cards and winner's participant cards so they stand out and visibly continue in the game */
body.tv-broadcast-body .ticket.is-winner-card {
  border: 1.5px solid rgba(234, 179, 8, 0.9) !important;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.22), rgba(15, 23, 42, 0.96)) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.35) !important;
  position: relative;
  z-index: 2;
}
body.tv-broadcast-body .ticket.is-winner-card .ticket-player strong {
  color: #fde047 !important;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.4);
}
body.tv-broadcast-body .ticket.is-winner-owner-card {
  border-left: 3.5px solid rgba(234, 179, 8, 0.8) !important;
}

/* Prize amounts are the primary result on the TV. Keep them legible on
   phones without allowing the winner card or result rail to overflow. */
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > b {
  font-size: clamp(30px, 7vw, 56px) !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
}
body.tv-broadcast-body > main > .board .winner-item > b {
  font-size: clamp(24px, 3vw, 38px) !important;
}
body.tv-broadcast-body > main > aside > .tickets .recent-winner-item > b {
  font-size: clamp(19px, 2.2vw, 30px) !important;
  line-height: 1 !important;
}

@media (max-width: 699px) {
  body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > b {
    font-size: clamp(30px, 7.5vw, 52px) !important;
  }
  body.tv-broadcast-body > main > aside > .tickets .recent-winner-item > b {
    font-size: clamp(18px, 5vw, 28px) !important;
  }
}

/* Keep the logged-in account fully readable on narrow phones. The connection
   status may ellipsize, but the account identity must keep its own space. */
@media (max-width: 699px) {
  body.tv-broadcast-body > .topbar > .topbar-center {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: initial !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-chip {
    min-width: 0 !important;
    padding: 5px 8px !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-label {
    font-size: 8px !important;
    letter-spacing: .8px !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-chip strong {
    font-size: clamp(12px, 3.2vw, 14px) !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .connection {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 8px !important;
    gap: 5px !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .connection::before {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 auto !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .tv-account {
    min-width: max-content !important;
    max-width: 126px !important;
    flex: 0 0 auto !important;
    padding: 6px 8px !important;
    gap: 5px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center #tv-account-label {
    min-width: 0 !important;
    max-width: 78px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .tv-account-copy {
    min-width: 0 !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .tv-account-copy small {
    display: none !important;
  }
}
/* Fixed broadcast budget: never stretch the document or participant rail.
   The number cells use the actual remaining height, not only viewport width. */
html { height: 100%; overflow: hidden; }
body.tv-broadcast-body {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.tv-broadcast-body > .topbar { flex: 0 0 auto !important; min-height: 0 !important; }
body.tv-broadcast-body > main {
  display: grid !important;
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(4px, .9vh, 10px) clamp(8px, 1.3vw, 24px) !important;
  gap: clamp(6px, 1vw, 14px) !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > .board {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(3px, .8vh, 8px) !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > .board > .heading {
  flex: 0 0 clamp(28px, 6vh, 56px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.tv-broadcast-body > main > .board > .prizes {
  flex: 0 0 clamp(48px, 10vh, 96px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
body.tv-broadcast-body > main > .board > #live-strip.live-strip {
  flex: 0 0 32% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(4px, 1vh, 12px) !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > .board > #live-strip .last-ball {
  width: clamp(64px, 22vh, 240px) !important;
  height: clamp(64px, 22vh, 240px) !important;
}
body.tv-broadcast-body > main > .board > #number-board.number-board {
  display: grid;
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(2px, .45vh, 5px) !important;
  padding: clamp(3px, .7vh, 8px) !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}
body.tv-broadcast-body > main > .board > #number-board .number {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  font-size: var(--tv-number-size, 16px) !important;
  line-height: 1 !important;
  overflow: hidden;
}
body.tv-broadcast-body > main > .board > .next-round { flex: 0 0 7% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; }
body.tv-broadcast-body > main > .board > .waiting-screen { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; }
body.tv-broadcast-body > main > aside { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
body.tv-broadcast-body > main > aside > .tickets { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; }
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  touch-action: none;
}
body.tv-broadcast-body > .bottom { flex: 0 0 auto !important; min-height: 0 !important; max-height: 24px; overflow: hidden !important; }
body.tv-broadcast-body #number-board[hidden],
body.tv-broadcast-body #participants[hidden],
body.tv-broadcast-body #live-strip[hidden],
body.tv-broadcast-body #waiting-screen[hidden],
body.tv-broadcast-body #next-round[hidden] { display: none !important; }
body.tv-broadcast-body .private-tickets-float-panel { height: min(620px, 78vh); max-height: calc(100vh - 96px) !important; overflow: hidden !important; }
body.tv-broadcast-body #private-participants { flex: 1 1 0; min-height: 0; max-height: none; overflow: hidden !important; }
body.tv-broadcast-body #private-participants > article.ticket { box-sizing: border-box; height: var(--private-card-height, 176px) !important; min-height: var(--private-card-height, 176px) !important; max-height: var(--private-card-height, 176px) !important; margin-bottom: 4px !important; overflow: hidden; }
.private-cards-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 13px; }
.private-cards-pagination button { min-height: 36px; padding: 5px 12px; }
.private-cards-pagination button:disabled { opacity: .45; cursor: default; }
@media (orientation: landscape) {
  body.tv-broadcast-body > main { grid-template-columns: minmax(0, 1fr) minmax(180px, 33%) !important; grid-template-rows: minmax(0, 1fr) !important; }
}
@media (orientation: portrait) {
  body.tv-broadcast-body > main { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) minmax(0, .42fr) !important; }
  body.tv-broadcast-body > main > .board > .heading { flex-basis: 44px !important; }
  body.tv-broadcast-body > main > .board { padding: 0 !important; }
  body.tv-broadcast-body > main > .board > .heading { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; overflow: hidden !important; }
  body.tv-broadcast-body > main > .board > .heading > div:first-child { flex: 1 1 50% !important; min-width: 0 !important; }
  body.tv-broadcast-body > main > .board > .heading h1 { font-size: 18px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body.tv-broadcast-body > main > .board > .heading .eyebrow { margin: 0 !important; font-size: 8px !important; line-height: 1.2 !important; }
  body.tv-broadcast-body > main > .board > .heading .schedule { flex: 1 1 50% !important; position: static !important; width: auto !important; gap: 2px !important; }
  body.tv-broadcast-body > main > .board > .heading .schedule-pill { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; padding: 0 !important; gap: 2px !important; }
  body.tv-broadcast-body > main > .board > .heading .schedule strong { font-size: 10px !important; line-height: 1.1 !important; }
  body.tv-broadcast-body > main > .board > .heading .schedule-icon { font-size: 7px !important; }
  body.tv-broadcast-body > main > .board > .heading .schedule-countdown { font-size: 8px !important; padding: 2px 3px !important; }
  body.tv-broadcast-body > main > .board > .heading .room-tag { display: none !important; }
  body.tv-broadcast-body > main > .board > .prizes { flex-basis: 80px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
  body.tv-broadcast-body > main > .board > .prizes .prize { padding: 2px 4px !important; gap: 1px !important; border-radius: 8px; }
  body.tv-broadcast-body > main > .board > .prizes .prize-amount { font-size: 19px !important; line-height: 1 !important; }
  body.tv-broadcast-body > main > .board > .prizes .prize-label { font-size: 9px !important; }
  body.tv-broadcast-body > main > .board > .prizes .prize-sub { font-size: 6px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .last-ball { width: 23vw !important; height: 23vw !important; }
  body.tv-broadcast-body > main > .board > #live-strip.live-strip { display: grid !important; grid-template-columns: minmax(0, 28%) minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .ball-wrap { min-height: 0 !important; align-items: center !important; gap: 3px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .ball-wrap .eyebrow { font-size: 8px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .live-info { height: 100% !important; min-height: 0 !important; margin: 0 !important; justify-content: center !important; gap: 6px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .phase-row { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; gap: 3px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong { font-size: 14px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .called-meter { font-size: 9px !important; padding: 0 !important; }
  body.tv-broadcast-body > main > .board > #live-strip .called-meter { min-height: 0 !important; height: 12px !important; margin: 0 !important; line-height: 1 !important; }
  body.tv-broadcast-body > main > .board > #live-strip #phase.phase-prize { font-size: 15px !important; line-height: 1.15 !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent-label { display: none; }
  body.tv-broadcast-body > main > .board > #live-strip .recent span.bingo-sphere { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex-basis: 32px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent-track { gap: 0; }
  body.tv-broadcast-body > main > .board > #live-strip .recent { gap: 3px !important; padding: 3px !important; }
  body.tv-broadcast-body > main > .board > .next-round { flex-basis: 34px !important; padding: 3px 6px !important; }
  body.tv-broadcast-body > main > .board > .next-round { display: flex !important; align-items: center !important; overflow: hidden !important; gap: 5px !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-kicker,
  body.tv-broadcast-body > main > .board > .next-round .next-round-prizes { display: none !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-copy { flex: 1 1 auto !important; min-width: 0 !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-copy strong { font-size: 12px !important; line-height: 1.1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-copy small { font-size: 8px !important; line-height: 1.1 !important; }
  body.tv-broadcast-body > main > .board > .next-round > strong { font-size: 17px !important; padding: 2px 5px !important; margin: 0 !important; }
  body.tv-broadcast-body > main > .board > #number-board.number-board { gap: 1px !important; padding: 3px !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title { padding: 0 0 4px !important; margin: 0 !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title h2 { font-size: 14px !important; }
  body.tv-broadcast-body #participants.windowed-cards > article.ticket { height: var(--card-window-height, 78px) !important; min-height: var(--card-window-height, 78px) !important; max-height: var(--card-window-height, 78px) !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.tv-broadcast-body > .topbar { height: 36px !important; padding: 3px 8px !important; flex-direction: row !important; gap: 6px !important; }
  body.tv-broadcast-body > .topbar .topbar-center { display: none !important; }
  body.tv-broadcast-body > .topbar nav { width: auto !important; display: flex !important; margin-left: auto; }
  body.tv-broadcast-body > .topbar nav button { min-height: 28px !important; padding: 3px 6px !important; }
  body.tv-broadcast-body > main > .board > .heading h1 { font-size: 16px !important; line-height: 1 !important; }
  body.tv-broadcast-body > main > .board > #live-strip #phase.phase-prize { font-size: 13px !important; line-height: 1.15 !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent-label { display: none; }
  body.tv-broadcast-body > main > .board > #live-strip .recent span.bingo-sphere { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; flex-basis: 28px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent { padding: 2px !important; gap: 3px !important; }
}

/* Public rows fit their own content instead of sharing the height of the
   longest missing-number list anywhere in the ranking. */
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket {
  height: var(--public-row-height, auto) !important;
  min-height: var(--public-row-height, 36px) !important;
  max-height: none !important;
  margin: 0 0 4px !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket:last-child { margin-bottom: 0 !important; }
/* Every missing number stays on the same line. The bounded public-list
   measurement sets chip width and type size from this row's available space. */
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket.ticket-many-missing {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-numbers {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--public-missing-gap, 2px) !important;
  width: 100%;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-number {
  flex: 0 1 var(--public-missing-size, 22px) !important;
  width: var(--public-missing-size, 22px) !important;
  min-width: 0 !important;
  max-width: 28px !important;
  min-height: 18px !important;
  height: 24px;
  padding: 0 !important;
  font-size: var(--public-missing-font, 13px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
@media (max-width: 699px) {
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket { min-height: var(--public-row-height, 78px) !important; }
}

/* Authenticated tickets have their own full-grid page budget. */
body.tv-broadcast-body .private-tickets-float-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
body.tv-broadcast-body .private-tickets-float-panel > .private-tickets-heading,
body.tv-broadcast-body .private-tickets-float-panel > footer,
body.tv-broadcast-body .private-tickets-float-panel > .private-cards-pagination { flex: 0 0 auto; }
body.tv-broadcast-body #private-participants > .ticket-private-full {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 7px 9px !important;
}
body.tv-broadcast-body #private-participants .ticket-player {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  margin: 0 !important;
}
body.tv-broadcast-body #private-participants .ticket-player strong { font-size: 14px !important; line-height: 1.1 !important; }
body.tv-broadcast-body #private-participants .ticket-player small {
  max-width: none !important;
  width: 100%;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #bed8f1 !important;
}
body.tv-broadcast-body #private-participants .ticket-private-position { display: inline-block; margin-left: 6px; font-size: 9px; }
body.tv-broadcast-body #private-participants .ticket-private-grid {
  display: grid;
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
body.tv-broadcast-body #private-participants .ticket-private-grid-90 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
body.tv-broadcast-body #private-participants .ticket-private-number {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  border: 1px solid #4a7eac;
  border-radius: 4px;
  background: #14375c;
  color: #f7fbff;
  font-size: var(--private-number-size, 16px);
  font-weight: 800;
  line-height: 1;
}
body.tv-broadcast-body #private-participants .ticket-private-number.is-called { color: #032012; background: #39e979; border-color: #9af8bf; }
body.tv-broadcast-body #private-participants .ticket-private-number.is-blank { background: #0a213b; border-color: #213e5b; }
body.tv-broadcast-body #private-participants .ticket-missing-row { flex: 0 0 auto; align-items: center; gap: 6px; }
body.tv-broadcast-body #private-participants .missing-label { padding: 0; font-size: 10px; line-height: 1.1; letter-spacing: 0; }
body.tv-broadcast-body #private-participants .missing-numbers { gap: 3px; }
body.tv-broadcast-body #private-participants .missing-number,
body.tv-broadcast-body #private-participants .ticket-complete { min-width: 20px; min-height: 20px; padding: 2px 4px; font-size: 12px; line-height: 1; }
/* Prize rows share the fixed broadcast height budget. Reset the legacy
   68px minimum and implicit rows before choosing one or two rows. */
body.tv-broadcast-body > main > .board > .heading #draw {
  font-size: clamp(16px, 3.7vh, 36px) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.tv-broadcast-body > main > .board > .heading > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.tv-broadcast-body > main > .board > .heading #stage { display: block; margin: 0 !important; font-size: clamp(6px, 1.1vh, 10px) !important; line-height: 1 !important; }
@media (orientation: portrait), (max-width: 699px) {
  body.tv-broadcast-body > main > .board > .heading #draw { font-size: clamp(16px, 5vw, 22px) !important; }
}
body.tv-broadcast-body > main > .board > #prizes.prizes {
  --tv-prize-budget: clamp(46px, 10vh, 96px);
  --tv-prize-amount-size: clamp(14px, 2.15vw, 34px);
  --tv-prize-label-size: clamp(9px, .92vw, 14px);
  --tv-prize-rule-size: clamp(6px, .67vw, 10px);
  --tv-prize-padding: clamp(3px, .6vh, 7px);
  display: grid !important;
  flex: 0 0 var(--tv-prize-budget) !important;
  width: 100% !important;
  height: var(--tv-prize-budget) !important;
  min-height: 0 !important;
  max-height: var(--tv-prize-budget) !important;
  margin: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(3px, .45vw, 8px) !important;
  overflow: visible !important;
}
body.tv-broadcast-body > main > .board > #prizes.prizes > .prize {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: var(--tv-prize-padding) clamp(4px, .5vw, 9px) !important;
  gap: 2px !important;
  border-radius: clamp(6px, .9vw, 12px) !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > .board > #prizes.prizes .prize-header {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
body.tv-broadcast-body > main > .board > #prizes.prizes .prize-title-wrap {
  width: 100% !important;
  min-width: 0 !important;
  gap: 1px !important;
}
body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-amount {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--tv-prize-amount-size) !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
}
body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--tv-prize-label-size) !important;
  line-height: 1.05 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}
body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-sub,
body.tv-broadcast-body > main > .board > #prizes.prizes .prize.prize-active .prize-current-label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--tv-prize-rule-size) !important;
  line-height: 1.05 !important;
  letter-spacing: .015em !important;
  white-space: nowrap !important;
}

/* Fallback for WebViews without named inline-size containers. Short
   landscape screens retain four columns to preserve the number board. */
@media (max-width: 949px) and (min-height: 501px) {
  body.tv-broadcast-body > main > .board > #prizes.prizes {
    --tv-prize-budget: clamp(104px, 15vh, 148px);
    --tv-prize-amount-size: clamp(18px, 2.8vh, 26px);
    --tv-prize-label-size: clamp(9px, .85vw, 12px);
    --tv-prize-rule-size: clamp(6px, .65vw, 8px);
    --tv-prize-padding: 3px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Modern browsers choose by the actual left broadcast column, rather than
   the viewport width occupied partly by the participant rail. */
@supports (container-type: inline-size) {
  body.tv-broadcast-body > main > .board {
    container-type: inline-size;
    container-name: tv-prize-board;
  }
  @media (min-height: 501px) {
    @container tv-prize-board (min-width: 641px) {
      body.tv-broadcast-body > main > .board > #prizes.prizes {
        --tv-prize-budget: clamp(46px, 10vh, 96px);
        --tv-prize-amount-size: clamp(14px, 2.15vw, 34px);
        --tv-prize-label-size: clamp(9px, .92vw, 14px);
        --tv-prize-rule-size: clamp(6px, .67vw, 10px);
        --tv-prize-padding: clamp(3px, .6vh, 7px);
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: minmax(0, 1fr) !important;
      }
    }
    @container tv-prize-board (max-width: 640px) {
      body.tv-broadcast-body > main > .board > #prizes.prizes {
        --tv-prize-budget: clamp(104px, 15vh, 148px);
        --tv-prize-amount-size: clamp(18px, 2.8vh, 26px);
        --tv-prize-label-size: clamp(9px, .85vw, 12px);
        --tv-prize-rule-size: clamp(6px, .65vw, 8px);
        --tv-prize-padding: 3px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
      }
    }
  }
}

/* Each prize establishes an inline-size container. Long amounts
   remain inside their own panel even when a TV exposes a small CSS width. */
@supports (font-size: 1cqw) {
  body.tv-broadcast-body > main > .board > #prizes.prizes > .prize { container-type: inline-size; }
  body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-amount {
    font-size: min(var(--tv-prize-amount-size), 15cqw) !important;
  }
}

@media (max-height: 500px) {
  body.tv-broadcast-body .private-tickets-float { bottom: 8px; }
  body.tv-broadcast-body .private-tickets-float-trigger { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
  body.tv-broadcast-body .private-tickets-float-panel:not([hidden]) {
    height: calc(100vh - 72px) !important;
    max-height: calc(100vh - 72px) !important;
    margin-bottom: 6px;
    padding: 6px;
    gap: 3px;
  }
  body.tv-broadcast-body .private-tickets-float-panel > .private-tickets-heading { padding: 0; font-size: 12px; }
  body.tv-broadcast-body .private-tickets-float-panel > footer { display: none; }
  body.tv-broadcast-body .private-cards-pagination { padding-top: 4px; }
  body.tv-broadcast-body .private-cards-pagination button { min-height: 28px; padding: 3px 8px; }
  body.tv-broadcast-body #private-participants > .ticket-private-full { gap: 4px !important; padding: 5px 7px !important; }
  body.tv-broadcast-body #private-participants .ticket-player strong { font-size: 13px !important; }
  body.tv-broadcast-body #private-participants .ticket-player small { font-size: 9px !important; }
}

/* Phones use document flow so browser chrome and the portrait viewport never
   crop the lower part of the broadcast. Larger TV and desktop layouts keep
   their fixed-screen composition above. */
@media screen and (max-width: 699px), screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.tv-broadcast-body {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }
  body.tv-broadcast-body > .topbar {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > .topbar > .brand { order: 1; width: 100%; min-width: 0; gap: 9px; }
  body.tv-broadcast-body > .topbar > .brand .brand-mark { width: 38px; height: 38px; font-size: 21px; }
  body.tv-broadcast-body > .topbar > .brand .brand-title { font-size: 16px; }
  body.tv-broadcast-body > .topbar > .brand .brand-badge { margin-top: 2px; font-size: 8px; letter-spacing: 1.2px; }
  body.tv-broadcast-body > .topbar > nav {
    order: 2;
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.tv-broadcast-body > .topbar > nav > a,
  body.tv-broadcast-body > .topbar > nav > button {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 5px 4px !important;
    gap: 4px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center {
    order: 3;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-chip {
    flex: 0 0 auto;
    justify-content: center;
    gap: 5px;
    padding: 5px 7px;
    font-size: 9px;
    white-space: nowrap;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-chip strong { font-size: 13px; }
  body.tv-broadcast-body > .topbar > .topbar-center .connection {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 5px 7px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.tv-broadcast-body > .topbar > .topbar-center .tv-account { flex: 1 1 100%; min-width: 0; }
  body.tv-broadcast-body > main {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px 10px !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board > .heading {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board > .heading > div:first-child { min-width: 0 !important; }
  body.tv-broadcast-body > main > .board > .heading #stage { font-size: 9px !important; line-height: 1.2 !important; }
  body.tv-broadcast-body > main > .board > .heading #draw {
    max-width: 100%;
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule-pill {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 !important;
  }
  body.tv-broadcast-body > main > .board > .heading .schedule strong { padding: 2px 6px !important; font-size: 12px !important; }
  body.tv-broadcast-body > main > .board > .heading .schedule-icon { font-size: 8px !important; }
  body.tv-broadcast-body > main > .board > .heading .room-tag { display: inline-flex !important; font-size: 9px !important; }
  body.tv-broadcast-body > main > .board > #prizes.prizes {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(54px, auto)) !important;
    grid-auto-rows: minmax(54px, auto) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board > #prizes.prizes > .prize {
    width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    padding: 5px !important;
    gap: 2px !important;
  }
  body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-amount { font-size: clamp(17px, 5.4vw, 24px) !important; }
  body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-label { font-size: 10px !important; }
  body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-sub,
  body.tv-broadcast-body > main > .board > #prizes.prizes .prize.prize-active .prize-current-label { font-size: 7px !important; }
  body.tv-broadcast-body > main > .board > .waiting-screen {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 205px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 10px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board > .waiting-screen .big-countdown { flex-wrap: nowrap !important; gap: 8px !important; margin: 5px 0 !important; }
  body.tv-broadcast-body > main > .board > .waiting-screen .big-countdown span { padding: 6px 9px !important; font-size: clamp(36px, 11vw, 52px) !important; line-height: 1 !important; }
  body.tv-broadcast-body > main > .board > .waiting-screen .countdown-unit { min-width: 0 !important; }
  body.tv-broadcast-body > main > .board > .waiting-screen .countdown-sep { font-size: 34px !important; }
  body.tv-broadcast-body > main > .board > .waiting-screen #waiting-hint { max-width: 100%; text-align: center; }
  body.tv-broadcast-body > main > .board > .waiting-screen.is-banner-mode { min-height: 0 !important; }
  body.tv-broadcast-body > main > .board > .waiting-screen.is-banner-mode .waiting-banner-configured figure { min-height: 120px !important; max-height: 240px !important; }
  body.tv-broadcast-body > main > .board > #live-strip.live-strip:not([hidden]) {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: minmax(78px, 26vw) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: none !important;
    padding: 10px 8px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board > #live-strip .ball-wrap { min-width: 0 !important; min-height: 0 !important; gap: 4px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .ball-wrap .eyebrow { font-size: 8px !important; letter-spacing: 1px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .last-ball { width: clamp(76px, 23vw, 104px) !important; height: clamp(76px, 23vw, 104px) !important; }
  body.tv-broadcast-body > main > .board > #live-strip .live-info { height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; gap: 7px !important; overflow: visible !important; }
  body.tv-broadcast-body > main > .board > #live-strip .phase-row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 4px !important; margin: 0 !important; }
  body.tv-broadcast-body > main > .board > #live-strip .phase-row #phase { flex: 1 1 100% !important; font-size: 12px !important; line-height: 1.2 !important; }
  body.tv-broadcast-body > main > .board > #live-strip .phase-row strong { font-size: 14px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent-track { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; min-width: 0 !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent-label { display: none !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent { flex-wrap: wrap !important; gap: 3px !important; padding: 3px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .recent span.bingo-sphere { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; flex-basis: 34px !important; }
  body.tv-broadcast-body > main > .board > #live-strip .called-meter { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 3px 5px !important; font-size: 9px !important; line-height: 1.2 !important; }
  body.tv-broadcast-body > main > .board > #number-board.number-board {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(9, minmax(28px, auto)) !important;
    grid-auto-rows: minmax(28px, auto) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px !important;
    gap: 3px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > .board > #number-board .number { width: auto !important; height: auto !important; min-height: 28px !important; font-size: clamp(14px, 4vw, 19px) !important; }
  body.tv-broadcast-body > main > .board > #next-round.next-round:not([hidden]) { display: flex !important; flex: 0 0 auto !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 46px !important; max-height: none !important; margin: 0 !important; padding: 6px 8px !important; gap: 6px !important; overflow: visible !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-kicker { display: none !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-copy { flex: 1 1 auto !important; min-width: 0 !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-prizes { display: none !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-copy strong { font-size: 13px !important; white-space: normal !important; }
  body.tv-broadcast-body > main > .board > .next-round .next-round-copy small { font-size: 10px !important; }
  body.tv-broadcast-body > main > .board > .next-round > strong { flex: 0 0 auto; font-size: 18px !important; }
  body.tv-broadcast-body > main > .board > .winners { flex: 0 0 auto !important; max-height: none !important; overflow: visible !important; }
  body.tv-broadcast-body > main > aside { display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; gap: 10px !important; overflow: visible !important; }
  body.tv-broadcast-body > main > aside > .tickets {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px !important;
    overflow: visible !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title { flex: 0 0 auto !important; padding: 0 0 7px !important; margin: 0 !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title h2 { font-size: 18px !important; }
  body.tv-broadcast-body > main > aside > .tickets > #participants { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 55vh !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y !important; }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket { height: auto !important; min-height: 72px !important; max-height: none !important; }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 8px 0 !important; overflow: visible !important; }
  body.tv-broadcast-body > main > aside > .tickets > .recent-winners .recent-winners-list { max-height: 55vh !important; overflow-x: hidden !important; overflow-y: auto !important; }
  body.tv-broadcast-body > .bottom {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    text-align: center !important;
  }
  body.tv-broadcast-body > .bottom .bottom-left { justify-content: center; flex-wrap: wrap; min-width: 0; line-height: 1.3; }
  body.tv-broadcast-body > .bottom .bottom-center { width: 100%; }
  body.tv-broadcast-body > .bottom .trust-badge { display: inline-block; max-width: 100%; line-height: 1.3; white-space: normal; }
  body.tv-broadcast-body > .bottom .bottom-right { text-align: center; }
  body.tv-broadcast-body > main > .board > #waiting-screen[hidden],
  body.tv-broadcast-body > main > .board > #live-strip[hidden],
  body.tv-broadcast-body > main > .board > #number-board[hidden],
  body.tv-broadcast-body > main > .board > #next-round[hidden] { display: none !important; }
}

@media screen and (max-width: 369px) {
  body.tv-broadcast-body > .topbar > .topbar-center { flex-direction: column !important; }
  body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-chip,
  body.tv-broadcast-body > .topbar > .topbar-center .connection { justify-content: center; width: 100%; }
}

/* The private card overlay follows the viewport width instead of allowing a
   90-ball grid's intrinsic minimum size to push the panel past the screen. */
@media (orientation: landscape) and (min-width: 700px) {
  body.tv-broadcast-body .private-tickets-float {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
  }

  body.tv-broadcast-body .private-tickets-float-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.tv-broadcast-body #private-participants,
  body.tv-broadcast-body #private-participants > .ticket-private-full,
  body.tv-broadcast-body #private-participants .ticket-player,
  body.tv-broadcast-body #private-participants .ticket-private-grid {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
}

/* Portrait phones need the document itself to scroll. The earlier TV layout
   uses a bounded viewport and hidden overflow; an independent body scroller
   on mobile Safari can then paint the countdown and results over each other. */
@media screen and (max-width: 699px) and (orientation: portrait), screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html:has(body.tv-broadcast-body) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.tv-broadcast-body {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
  }

  body.tv-broadcast-body > .topbar,
  body.tv-broadcast-body > main,
  body.tv-broadcast-body > .bottom {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main {
    display: block !important;
  }

  body.tv-broadcast-body > main > .board {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > .board > .heading,
  body.tv-broadcast-body > main > .board > #prizes,
  body.tv-broadcast-body > main > .board > #waiting-screen,
  body.tv-broadcast-body > main > .board > #live-strip,
  body.tv-broadcast-body > main > .board > #number-board,
  body.tv-broadcast-body > main > .board > #next-round,
  body.tv-broadcast-body > main > .board > .winners {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > .board > #waiting-screen:not([hidden]) {
    min-height: 185px !important;
    animation: none !important;
  }

  body.tv-broadcast-body > main > .board > #number-board:not([hidden]) {
    display: grid !important;
    min-height: 0 !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(9, minmax(28px, auto)) !important;
  }

  body.tv-broadcast-body > main > aside {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > aside > .tickets {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > main > aside > .tickets > .recent-winners {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tv-broadcast-body > .bottom {
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Keep the typography overrides above in force after the later winner amount
   sizing rules that are shared with the live winner spotlight. */
@media (min-width: 700px) {
  body.tv-broadcast-body > main > aside > .tickets > #recent-winners .recent-winner-item > b {
    font-size: clamp(17px, 1.45vw, 22px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }
}

/* The result spotlight is the only winner announcement on the public TV;
   suppress the older inline list that used to sit below the number board. */
body.tv-broadcast-body > main > .board > #winners {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Landscape TV density: spend less viewport height on the masthead and card
   chrome so up to twenty closest tickets fit beside the live game. */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  body.tv-broadcast-body > .topbar {
    height: clamp(38px, 5.5vh, 48px) !important;
    min-height: clamp(38px, 5.5vh, 48px) !important;
    max-height: clamp(38px, 5.5vh, 48px) !important;
    padding: 3px clamp(8px, 1.4vw, 20px) !important;
    gap: 8px !important;
  }
  body.tv-broadcast-body > .topbar .brand { gap: 7px !important; }
  body.tv-broadcast-body > .topbar .brand-mark,
  body.tv-broadcast-body > .topbar .brand-logo-frame { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; }
  body.tv-broadcast-body > .topbar .brand-mark { font-size: 15px !important; }
  body.tv-broadcast-body > .topbar .brand-title { font-size: clamp(13px, 1.05vw, 17px) !important; line-height: 1 !important; }
  body.tv-broadcast-body > .topbar .brand-badge { margin-top: 1px !important; font-size: 7px !important; line-height: 1 !important; letter-spacing: .6px !important; }
  body.tv-broadcast-body > .topbar .studio-clock-chip { min-height: 25px !important; padding: 3px 7px !important; gap: 4px !important; }
  body.tv-broadcast-body > .topbar .studio-clock-chip strong { font-size: 11px !important; }
  body.tv-broadcast-body > .topbar .connection { min-height: 25px !important; padding: 3px 7px !important; font-size: 9px !important; }
  body.tv-broadcast-body > .topbar nav { gap: 5px !important; }
  body.tv-broadcast-body > .topbar nav button,
  body.tv-broadcast-body > .topbar nav .buy-tickets-link { min-height: 27px !important; padding: 4px 8px !important; font-size: 10px !important; }

  body.tv-broadcast-body > main > aside > .tickets { padding: 5px !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title { padding: 0 0 3px !important; margin: 0 0 2px !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title .tickets-kicker { font-size: 8px !important; line-height: 1 !important; margin: 0 0 2px !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title h2 { font-size: clamp(13px, 1.1vw, 16px) !important; line-height: 1.05 !important; }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket {
    min-height: 26px !important;
    padding: 1px 4px !important;
    margin-bottom: 2px !important;
    gap: 4px !important;
    border-radius: 5px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket.ticket-many-missing {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-player strong {
    font-size: clamp(10px, .95vw, 12px) !important;
    line-height: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-player small {
    font-size: 7px !important;
    line-height: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-missing-row { line-height: 9px !important; }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-label { font-size: 7px !important; line-height: 8px !important; }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-numbers { gap: 1px !important; }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-number {
    min-height: 15px !important;
    height: 15px !important;
    padding: 0 2px !important;
    font-size: clamp(9px, .82vw, 11px) !important;
    line-height: 1 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-complete { font-size: 7px !important; line-height: 9px !important; }
}

/* Let configured waiting art fill the whole banner panel on TV WebViews. */
body.tv-broadcast-body > main > .board > .waiting-screen.is-banner-mode .waiting-banner-configured {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > .board > .waiting-screen.is-banner-mode .waiting-banner-configured figure {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.tv-broadcast-body > main > .board > .waiting-screen.is-banner-mode .waiting-banner-configured img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Larger names in the twelve-row public TV ranking. */
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-player strong{font-size:var(--public-name-font,20px)!important;line-height:1.05!important}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-player small{font-size:var(--public-meta-font,14px)!important;line-height:1.05!important}