/* Live-only responsive readability. Loaded after the legacy presentation CSS.
   Breakpoints use viewport CSS pixels, never guessed physical monitor inches.
   Existing !important declarations require scoped overrides during migration. */
.broadcast-page {
 --metric-small:clamp(1rem,.5rem + 1vw,1.375rem);
 --pair-label:clamp(22px,1.375vw,26.4px);
 font-variant-numeric:tabular-nums lining-nums;
}
.broadcast-page :is(time,#countdown,.winner span,.history-number strong,
 .payout-line strong,.broadcast-pair-prize strong,.broadcast-pale-row,
 .broadcast-super-result,.drawing-hours) {
 font-variant-numeric:tabular-nums lining-nums!important;
 font-feature-settings:"tnum" 1,"lnum" 1;
}
.broadcast-page :is(.broadcast-center,.broadcast-history,.broadcast-payout,
 .draw-stage,.result-board,.history-result,.payout-line) {min-width:0;box-sizing:border-box}
.broadcast-page .broadcast-pale-row {
 display:grid;grid-template-columns:minmax(0,1fr) max-content;
 align-items:center;gap:clamp(6px,.5vw,12px);
}
.broadcast-page .broadcast-pale-row :is(small,strong) {color:#fff;font-weight:800;text-shadow:none}
@media (max-width:1000px) {
 .broadcast-page .broadcast-pale-row small {font-size:clamp(16px,2vw,22px);line-height:1.2}
 .broadcast-page .broadcast-pale-row strong {font-size:clamp(20px,2.5vw,28px);line-height:1.2}
 .broadcast-page .broadcast-payout small {font-size:16px;line-height:1.25}
}
/* Readability review: scale sidebar type to its width, not half-screen height.
   Keep original panels, values, central balls and countdown unchanged. */
@media screen and (min-width:1001px) {
 html[data-monitor-preview] body.broadcast-page .broadcast-payout {
  --sidebar-type:clamp(.8px,calc(100vw / 1600),1.2px);
 }
 html[data-monitor-preview] body.broadcast-page .broadcast-payout .broadcast-pale-row strong,
 html[data-monitor-preview] body.broadcast-page .broadcast-payout .broadcast-super-result strong {
  font-size:max(29px,calc(28 * var(--sidebar-type)))!important;line-height:1.1!important;font-variant-numeric:tabular-nums;
 }
 html[data-monitor-preview] body.broadcast-page .broadcast-payout small {
  font-size:max(16px,calc(16 * var(--sidebar-type)))!important;line-height:1.15!important;
 }
}
@media screen and (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout {gap:4px!important;padding:5px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout h2 {font-size:calc(20 * var(--sidebar-type))!important;line-height:1.1!important;margin:2px 0!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .payout-line {
  display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;flex:1 0 auto!important;min-height:34px!important;margin:0!important;padding:1px 8px!important;gap:6px!important;
 }
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .payout-line span,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pair-prize>span {font-size:max(18px,calc(18 * var(--sidebar-type)))!important;line-height:1.1!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .payout-line>strong,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pair-prize>strong {font-size:max(28px,calc(26 * var(--sidebar-type)))!important;line-height:1.05!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-card,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-tripleta-prize {flex:0 0 auto!important;margin:0!important;padding:2px 8px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pair-prize {display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:2px 8px!important;text-align:left!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pair-prize>small,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-super-result {grid-column:1 / -1!important;text-align:center!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-results,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-super-result {margin-top:3px!important;padding-top:3px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-row {padding:0!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-row small {font-weight:700!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-history h2 {font-size:clamp(15px,1.15vw,22px)!important;white-space:normal!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .history-day h3 {font-size:clamp(12px,.85vw,16px)!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .history-game {font-size:clamp(14px,1vw,19px)!important;line-height:1.05!important}
}

@media screen and (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout small {font-size:max(13px,calc(12 * var(--sidebar-type)))!important;line-height:1.1!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-super-result {flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:5px!important}
}

@media screen and (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-row strong,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-super-result strong {font-size:max(22px,calc(22 * var(--sidebar-type)))!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-day {margin-top:0!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-game {font-size:clamp(14px,.94vw,18px)!important;line-height:1.05!important}
}

@media screen and (min-width:1200px) and (min-height:801px) {
 html[data-monitor-preview] body.broadcast-page .broadcast-payout .payout-line {padding-top:4px!important;padding-bottom:4px!important}
}

/* Sidebar fitting must not override the existing full-stage drawing states. */
@media screen and (min-width:1001px) {
 html[data-monitor-preview] body.broadcast-page:is([data-state="LIVE DRAWING"],[data-state="RESULTS"]) .broadcast-history,
 html[data-monitor-preview] body.broadcast-page:is([data-state="LIVE DRAWING"],[data-state="RESULTS"]) .broadcast-payout {display:none!important}
 html[data-monitor-preview] body.broadcast-page:is([data-state="LIVE DRAWING"],[data-state="RESULTS"]) .broadcast-layout {display:flex!important;flex:1 1 0!important;min-height:0!important;padding:0!important}
 html[data-monitor-preview] body.broadcast-page:is([data-state="LIVE DRAWING"],[data-state="RESULTS"]) .broadcast-center {display:flex!important;flex:1 1 0!important;min-height:0!important;height:100%!important}
 html[data-monitor-preview] body.broadcast-page:is([data-state="LIVE DRAWING"],[data-state="RESULTS"]) .draw-stage {flex:1 1 0!important;min-height:0!important;height:100%!important}
}

/* Pair-position labels must be readable from the same distance as pair values. */
@media screen and (min-width:1001px) {
 html[data-monitor-preview] body.broadcast-page .broadcast-payout .broadcast-pale-row small,
 html[data-monitor-preview] body.broadcast-page .broadcast-payout .broadcast-pale-row span {
  font-size:max(22px,calc(22 * var(--sidebar-type)))!important;
  line-height:1.1!important;font-weight:800!important;white-space:nowrap;
 }
}

/* Whole-page distance readability: keep ranks beside the history balls so
   larger labels do not consume another vertical line in split-screen TV. */
@media screen and (min-width:1001px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-live,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-official,
 html[data-monitor-preview] body.broadcast-page[data-state] #broadcast-language,
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-past-link {font-size:16px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #broadcast-state {font-size:15px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-clock time {font-size:max(20px,calc(30 * var(--monitor-u)))!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-clock small {font-size:14px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #simulation-broadcast-notice>.simulation-notice {font-size:16px!important;line-height:1.15!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout small {font-size:max(18px,calc(16 * var(--sidebar-type)))!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .drawing-hours-label {font-size:16px!important}
}
@media screen and (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-header {flex-basis:48px!important;height:48px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number {flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:4px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number small {font-size:16px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number strong {width:max(40px,calc(64 * var(--monitor-u)))!important;height:max(40px,calc(64 * var(--monitor-u)))!important;font-size:max(20px,calc(30 * var(--monitor-u)))!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-game {font-size:20px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .history-result time {font-size:16px!important}
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) .drawing-hours {font-size:18px!important}
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) #result-heading {font-size:18px!important}
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) #result-time {font-size:16px!important}
}
@media screen and (min-width:1001px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-row small {font-size:max(22px,calc(22 * var(--sidebar-type)))!important}
}
@media screen and (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number {display:flex!important;flex-direction:row!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number small {line-height:1.1!important}
}
/* Keep the existing accessible icon-only history control in compact headers. */
@media (min-width:1001px) and (max-width:1399px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-past-link {font-size:0!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-past-link::before {font-size:24px}
}
@media (min-width:1001px) and (max-width:1199px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-super-result {flex-direction:column!important;gap:2px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number {flex-direction:column!important;gap:1px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number small {font-size:14px!important;line-height:1!important}
 html[data-monitor-preview] body.broadcast-page[data-state] #previous-results .history-number strong {width:36px!important;height:36px!important;font-size:20px!important;flex-shrink:0}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-header {gap:4px!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-official {font-size:14px!important;padding-inline:7px!important}
}
@media (min-width:1001px) and (max-width:1199px) {
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) .broadcast-layout {
  grid-template-columns:minmax(225px,1fr) minmax(0,2.65fr) minmax(294px,1fr)!important;
 }
}
@media (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) .next-drawing {height:auto!important;flex:0 0 auto!important;padding:6px!important}
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) .drawing-hours {position:static!important;transform:none!important;width:100%!important;margin:4px 0 0!important}
}
/* Decorative effects stay clear of data and never move individual letters. */
.broadcast-page .results-neon-sign span {animation:none!important;transform:none!important;will-change:auto!important}
@media (min-width:1001px) and (max-height:800px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .payout-line::after {right:2px;top:8px;bottom:8px;width:2px}
}

/* Loaded-asset marker for Live version reports; no layout change. */
html{--soley-live-style-build:"v141-live-version-20261021"}

/* Keep schedule flow and long Creole pair labels safe between desktop widths. */
@media (min-width:1001px) {
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) .next-drawing {height:auto!important;flex:0 0 auto!important;padding:6px 8px 8px!important}
 html[data-monitor-preview] body.broadcast-page[data-state]:not([data-state="LIVE DRAWING"]):not([data-state="RESULTS"]) .drawing-hours {position:static!important;transform:none!important;width:100%!important;margin:6px 0 0!important}
}
@media (min-width:1001px) and (max-width:1199px) {
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-row strong {font-size:22px!important;line-height:1.1!important}
 html[data-monitor-preview] body.broadcast-page[data-state] .broadcast-payout .broadcast-pale-row {gap:8px!important}
}