/* Android TV boxes can ship WebViews without CSS Grid. Keep the TV APK in a
   landscape flex layout so unsupported grid declarations cannot stack the
   broadcast sections or push the match schedule below the screen. */
html.tv-apk,
html.tv-apk body.tv-broadcast-body {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Entry-level MXQ boxes have slow GPUs. Keep the official layout and colors,
   but remove continuous repaint-heavy motion, filters and transitions. */
html.tv-apk body.tv-broadcast-body *,
html.tv-apk body.tv-broadcast-body *::before,
html.tv-apk body.tv-broadcast-body *::after {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  scroll-behavior: auto !important;
  will-change: auto !important;
}

html.tv-apk body.tv-broadcast-body > .topbar {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: clamp(42px, 6.4vh, 68px) !important;
  min-height: 42px !important;
  max-height: 68px !important;
  padding: 4px 1.5vw !important;
  overflow: hidden !important;
}

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

html.tv-apk body.tv-broadcast-body > .topbar > .topbar-center {
  display: flex !important;
  position: relative !important;
  order: 0 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 1vw !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > .topbar > nav {
  display: flex !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

html.tv-apk body.tv-broadcast-body > main {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0 !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 1vh 1.5vw !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex: 2 1 0 !important;
  flex-direction: column !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 1.2vh 1vw !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .heading {
  display: flex !important;
  position: relative !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;
  min-height: 34px !important;
  height: auto !important;
  margin: 0 0 6px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .heading > div:first-child {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .heading #draw {
  max-width: 100% !important;
  font-size: 2.4vw !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .heading .schedule {
  display: flex !important;
  position: relative !important;
  flex: 1 1 40% !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: right !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .heading .schedule-pill {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  padding: 3px 6px !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .heading .schedule strong {
  display: inline-block !important;
  font-size: 1.45vw !important;
  white-space: nowrap !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes {
  display: flex !important;
  position: relative !important;
  flex: 0 0 20vh !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 20vh !important;
  min-height: 64px !important;
  max-height: 150px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes > .prize {
  display: flex !important;
  flex: 0 0 49% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 49% !important;
  height: 50% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 50% !important;
  margin: 0 .5% 1% 0 !important;
  padding: 2px 6px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes .prize-header {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes .prize-amount {
  display: block !important;
  font-size: calc(10px + 2vw) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes .prize-label,
html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes .prize-sub {
  display: block !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .waiting-screen {
  display: flex !important;
  position: relative !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .waiting-screen .big-countdown {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 5px 0 !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .waiting-screen .big-countdown span {
  display: inline-block !important;
  font-size: 7vh !important;
  line-height: 1 !important;
  padding: 5px 8px !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #live-strip.live-strip:not([hidden]) {
  display: flex !important;
  flex: 0 0 20vh !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 100px !important;
  max-height: 200px !important;
  margin: 0 0 6px !important;
  padding: 6px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #live-strip .ball-wrap {
  display: flex !important;
  flex: 0 0 24% !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #live-strip .last-ball {
  width: 16vh !important;
  height: 16vh !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 130px !important;
  max-height: 130px !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #live-strip .live-info {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #number-board.number-board:not([hidden]) {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 6px !important;
  padding: 3px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > #number-board .number {
  display: flex !important;
  flex: 0 0 10% !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10% !important;
  height: 11.11% !important;
  min-height: 0 !important;
  max-height: 11.11% !important;
  box-sizing: border-box !important;
  padding: 1px !important;
  font-size: 2.2vh !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .next-round:not([hidden]) {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > .board > .next-round[hidden],
html.tv-apk body.tv-broadcast-body > main > .board > .waiting-screen[hidden],
html.tv-apk body.tv-broadcast-body > main > .board > #live-strip[hidden],
html.tv-apk body.tv-broadcast-body > main > .board > #number-board[hidden] {
  display: none !important;
}

html.tv-apk body.tv-broadcast-body > main > aside {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 175px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 0 1vw !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > aside > .join {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  padding: 5px !important;
}

html.tv-apk body.tv-broadcast-body > main > aside > .tickets {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
}

html.tv-apk body.tv-broadcast-body > main > aside > .tickets > .tickets-title,
html.tv-apk body.tv-broadcast-body > main > aside > .tickets > .recent-winners {
  flex: 0 0 auto !important;
}

html.tv-apk body.tv-broadcast-body > main > aside > .tickets > #participants {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.tv-apk body.tv-broadcast-body > .bottom {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 0 28px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 0 !important;
  max-height: 28px !important;
  padding: 3px 1.5vw !important;
  overflow: hidden !important;
  font-size: 9px !important;
}

html.tv-apk body.tv-broadcast-body > .bottom .bottom-center {
  display: block !important;
  width: auto !important;
}

/* Landscape TVs keep the four prize values on one row at every usable
   desktop width. Their type scales down with the available width. */
@media (orientation: landscape) and (min-width: 700px) {
  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes {
    flex-wrap: nowrap !important;
    flex: 0 0 10vh !important;
    height: 10vh !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes > .prize {
    flex: 1 1 0 !important;
    width: 25% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 .35% 0 0 !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes .prize-amount {
    font-size: clamp(12px, 2vw, 30px) !important;
  }
}

/* Keep the Android TV masthead compact on regular 720p/1080p landscape TVs. */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  html.tv-apk body.tv-broadcast-body > .topbar {
    height: clamp(38px, 5.5vh, 48px) !important;
    min-height: 38px !important;
    max-height: 48px !important;
    padding: 3px 1.2vw !important;
  }
  html.tv-apk body.tv-broadcast-body > .topbar > .brand { gap: 7px !important; }
  html.tv-apk body.tv-broadcast-body > .topbar > .brand .brand-mark,
  html.tv-apk body.tv-broadcast-body > .topbar > .brand .brand-logo-frame {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
  html.tv-apk body.tv-broadcast-body > .topbar > .brand .brand-title { font-size: 15px !important; }
  html.tv-apk body.tv-broadcast-body > .topbar > .brand .brand-badge { font-size: 7px !important; letter-spacing: .6px !important; }
  html.tv-apk body.tv-broadcast-body > .topbar > .topbar-center .studio-clock-chip { min-height: 25px !important; padding: 3px 7px !important; }
  html.tv-apk body.tv-broadcast-body > .topbar > .topbar-center .connection { min-height: 25px !important; padding: 3px 7px !important; font-size: 9px !important; }
  html.tv-apk body.tv-broadcast-body > .topbar > nav button,
  html.tv-apk body.tv-broadcast-body > .topbar > nav .buy-tickets-link { min-height: 27px !important; padding: 4px 8px !important; font-size: 10px !important; }
}

@media (max-height: 460px) {
  html.tv-apk body.tv-broadcast-body > .topbar {
    height: 44px !important;
    min-height: 38px !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > .heading {
    min-height: 28px !important;
    margin-bottom: 3px !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes {
    flex-basis: 64px !important;
    height: 64px !important;
    margin-bottom: 3px !important;
  }

  html.tv-apk body.tv-broadcast-body > .bottom {
    flex-basis: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
  }
}

/* Narrow portrait screens must use the full width for the board. The TV APK
   normally forces a two-column landscape layout; on phones that left only a
   clipped sliver of the number board beside the participant rail. */
@media screen and (max-width: 699px), screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html.tv-apk {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.tv-apk body.tv-broadcast-body {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

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

  html.tv-apk body.tv-broadcast-body > main {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 8px 1.5vw !important;
  }

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

  html.tv-apk body.tv-broadcast-body > main > .board > .heading,
  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes,
  html.tv-apk body.tv-broadcast-body > main > .board > #waiting-screen,
  html.tv-apk body.tv-broadcast-body > main > .board > #live-strip,
  html.tv-apk body.tv-broadcast-body > main > .board > #number-board.number-board,
  html.tv-apk body.tv-broadcast-body > main > .board > #next-round,
  html.tv-apk 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;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #live-strip.live-strip:not([hidden]) {
    min-height: 150px !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #number-board.number-board:not([hidden]) {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 90vw !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #number-board.number-board:not([hidden]) .number {
    display: flex !important;
    flex: 0 0 calc(10% - 3px) !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(10% - 3px) !important;
    height: calc(11.111% - 3px) !important;
    min-height: 28px !important;
    max-height: none !important;
  }

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

  html.tv-apk body.tv-broadcast-body > main > aside > .tickets > #participants {
    flex: 0 0 auto !important;
    max-height: 55vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.tv-apk body.tv-broadcast-body > .bottom {
    display: flex !important;
    flex: 0 0 auto !important;
  }
}

/* A shorter schedule strip gives the official 90-number matrix more height. */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  html.tv-apk body.tv-broadcast-body > main > .board > .next-round:not([hidden]) {
    min-height: 30px !important;
    padding: 2px 6px !important;
    gap: 4px !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > .next-round .next-round-kicker {
    font-size: 8px !important;
    letter-spacing: .6px !important;
    line-height: 1 !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > .next-round .next-round-copy strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > .next-round .next-round-copy small {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > .next-round > strong {
    padding: 2px 5px !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #number-board .number {
    font-size: 2.35vh !important;
  }
}

/* Keep the 90-ball matrix inside its height budget on landscape TV boxes.
   Flex percentages previously made a 10% cell plus the inter-cell gap wrap
   into nine columns, creating a tenth row below the clipped board. */
@media (orientation: landscape) and (min-width: 700px) {
  html.tv-apk body.tv-broadcast-body > main > .board > #number-board.number-board:not([hidden]) {
    gap: 3px !important;
    align-content: stretch !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #number-board .number {
    flex: 0 0 calc(10% - 3px) !important;
    width: calc(10% - 3px) !important;
    height: calc(11.111% - 3px) !important;
    max-height: calc(11.111% - 3px) !important;
  }
}
/* Widescreen broadcast: reserve the last pixels for the participant rail.
   Compact rows keep the ticket ranking readable at TV proportions. */
@media (orientation: landscape) and (min-width: 700px) and (min-aspect-ratio: 3/2) {
  body.tv-broadcast-body > .bottom { display: none !important; }
  body.tv-broadcast-body > main > aside > .tickets > .tickets-title {
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards > article.ticket {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 30px !important;
    padding: 2px 5px !important;
    margin-bottom: 2px !important;
    border-radius: 6px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-player strong {
    font-size: clamp(10px, .9vw, 13px) !important;
    line-height: 11px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-player small {
    font-size: clamp(6px, .58vw, 8px) !important;
    line-height: 8px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .ticket-missing-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    line-height: 1 !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-label {
    flex: 0 0 auto !important;
    font-size: clamp(7px, .6vw, 9px) !important;
    line-height: 9px !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-numbers {
    flex: 0 1 auto !important;
    width: auto !important;
  }
  body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards .missing-number {
    min-width: 18px !important;
    min-height: 17px !important;
    height: 17px !important;
    padding: 0 3px !important;
    font-size: clamp(9px, .72vw, 11px) !important;
  }
}

/* Promotional art owns the whole waiting panel while its slide is active.
   The top schedule keeps the countdown visible; no competing content shrinks the art. */
body.tv-broadcast-body > main > .board > #waiting-screen.is-image-banner-mode,
html.tv-apk body.tv-broadcast-body > main > .board > #waiting-screen.is-image-banner-mode {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.tv-broadcast-body #waiting-screen.is-image-banner-mode > .waiting-badge,
body.tv-broadcast-body #waiting-screen.is-image-banner-mode > #waiting-countdown-content {
  display: none !important;
}
body.tv-broadcast-body #waiting-screen.is-image-banner-mode > #waiting-banner.waiting-banner-configured {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.tv-broadcast-body > main > .board > #waiting-screen.is-image-banner-mode > #waiting-banner.waiting-banner-configured figure,
body.tv-broadcast-body > main > .board > #waiting-screen.is-image-banner-mode > #waiting-banner.waiting-banner-configured img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.tv-broadcast-body > main > .board > #waiting-screen.is-image-banner-mode > #waiting-banner.waiting-banner-configured img {
  object-fit: fill !important;
}

/* Twenty fixed proximity positions use the available panel height at every size. */
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking {
  overflow: hidden !important;
  padding: 0 !important;
  scrollbar-width: none;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking::-webkit-scrollbar { display: none; }
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking > article.ticket {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: var(--public-row-height) !important;
  min-height: var(--public-row-height) !important;
  max-height: var(--public-row-height) !important;
  box-sizing: border-box !important;
  margin: 0 0 var(--public-row-gap) !important;
  padding: 0 3px !important;
  gap: 3px !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking > article.ticket:last-child { margin-bottom: 0 !important; }
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-player {
  flex: 0 1 48% !important;
  width: 48% !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-player strong {
  display: block !important;
  font-size: var(--public-name-font) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-player small {
  display: block !important;
  font-size: var(--public-meta-font) !important;
  letter-spacing: .25px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-missing-row {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .missing-label {
  font-size: var(--public-label-font) !important;
  line-height: 1 !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .missing-numbers {
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: var(--public-missing-gap, 1px) !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .missing-number {
  flex: 0 0 auto !important;
  width: var(--public-missing-size, 16px) !important;
  min-width: 0 !important;
  height: var(--public-chip-height) !important;
  min-height: 0 !important;
  max-height: var(--public-chip-height) !important;
  padding: 0 !important;
  font-size: var(--public-missing-font, 10px) !important;
  line-height: 1 !important;
}
body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards.fixed-card-ranking .ticket-complete {
  font-size: var(--public-label-font) !important;
  line-height: 1 !important;
}

/* A percentage height can collapse in portrait WebViews; anchor the APK to the viewport. */
html.tv-apk, html.tv-apk body.tv-broadcast-body { height: 100vh !important; }
@media (max-width: 699px) {
  html:not(.tv-apk) body.tv-broadcast-body > main > aside > .tickets > #participants.windowed-cards {
    height: 55vh !important;
    flex: 0 0 55vh !important;
    min-height: 0 !important;
    max-height: 55vh !important;
  }
}

/* Winner details remain separated in older WebViews without Grid or flex gap. */
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-heading {
  display: block !important;
  text-align: left !important;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-heading > strong,
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-heading > b {
  display: block !important;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-heading > b { margin: 8px 0 0 !important; }
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-prize-hero {
  display: block !important;
  text-align: center !important;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-prize-hero > small,
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-prize-hero > strong { display: block !important; }
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-prize-hero > strong { margin-top: 8px !important; }
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > div {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > div > strong,
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > div > span {
  display: block !important;
  overflow-wrap: break-word;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > div > span { margin-top: 6px !important; line-height: 1.4 !important; }
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > b {
  flex: 0 0 auto !important;
  margin-left: 18px !important;
}
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-ticket-codes { display: block !important; }
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-ticket-codes > span,
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-ticket-codes > strong { display: block !important; }
body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-ticket-codes > strong { margin-top: 6px !important; }
@media (max-width: 699px) {
  body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item { flex-direction: column !important; align-items: flex-start !important; }
  body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > div { flex: 0 1 auto !important; width: 100% !important; }
  body.tv-broadcast-body > #winner-gift-overlay .winner-spotlight-item > b { margin: 10px 0 0 !important; }
}

/* Keep result cards readable on phones, including WebViews without Grid. */
@media (max-width: 699px) {
  body.tv-broadcast-body .recent-winners-heading,
  body.tv-broadcast-body .recent-draw-group > header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
    line-height: 1.4;
  }
  body.tv-broadcast-body .recent-winners-heading > span { font-size: 12px; letter-spacing: .5px; }
  body.tv-broadcast-body .recent-winners-heading > strong { font-size: 12px; }
  body.tv-broadcast-body .recent-draw-group > header > strong { font-size: 15px; }
  body.tv-broadcast-body .recent-draw-group > header > span { display: block; font-size: 12px; }
  body.tv-broadcast-body .recent-winner-list { display: block !important; }
  body.tv-broadcast-body .recent-winner-item {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px !important;
    margin-bottom: 10px;
    border-radius: 14px;
    min-width: 0;
    box-sizing: border-box;
  }
  body.tv-broadcast-body .recent-winner-trophy { flex: 0 0 26px; margin-right: 10px; font-size: 20px; }
  body.tv-broadcast-body .recent-winner-item > div { display: block !important; flex: 1 1 70%; min-width: 0; }
  body.tv-broadcast-body .recent-winner-item small { display: block; font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; }
  body.tv-broadcast-body .recent-winner-item strong { display: block; font-size: 17px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  body.tv-broadcast-body .recent-winner-item .recent-winner-codes { display: block; font-size: 12px; line-height: 1.5; margin-top: 5px; }
  body.tv-broadcast-body .recent-winner-item > b { display: block; flex: 0 0 100%; font-size: 25px; line-height: 1.2; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.2); }
}

/* Larger prize panels for television viewing at a distance. */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  body.tv-broadcast-body > main > .board > #prizes.prizes,
  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes {
    height: 13vh !important;
    min-height: 88px !important;
    max-height: 150px !important;
    flex-basis: 13vh !important;
  }
  body.tv-broadcast-body > main > .board > #prizes.prizes > .prize,
  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes > .prize {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-amount,
  html.tv-apk body.tv-broadcast-body > main > .board > #prizes.prizes .prize .prize-amount {
    font-size: 2.6vw !important;
    font-size: clamp(22px, 2.6vw, 40px) !important;
    line-height: 1.12 !important;
  }
}

/* Match the browser's wider 15×6 scoreboard on landscape TVs. The APK uses
   flex wrapping for older WebViews, preserving all 90 cells while widening
   the participant rail toward the left side. */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  html.tv-apk body.tv-broadcast-body > main > .board {
    flex: 2 1 0 !important;
  }

  html.tv-apk body.tv-broadcast-body > main > aside {
    flex: 1 1 0 !important;
    margin-left: .7vw !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #number-board.number-board:not([hidden]) {
    gap: 3px !important;
    align-content: stretch !important;
  }

  html.tv-apk body.tv-broadcast-body > main > .board > #number-board .number {
    flex: 0 0 calc(6.6667% - 3px) !important;
    width: calc(6.6667% - 3px) !important;
    height: calc(16.6667% - 3px) !important;
    max-height: calc(16.6667% - 3px) !important;
    font-size: 15px !important;
    font-size: 2.8vh !important;
  }
}