/* Prize Wheel broadcast: a large live wheel and a dedicated prize reveal. */
.screen-body .whb-round { display:grid; grid-template-rows:80px minmax(0,1fr); gap:28px; color:var(--tb-white); }
.screen-body .whb-round [hidden] { display:none!important; }
.screen-body .whb-head { display:flex; align-items:center; justify-content:space-between; gap:28px; min-width:0; }
.screen-body .whb-title { margin:0; height:80px; flex:1; min-width:0; font:900 68px/1.12 var(--tb-display,var(--tb-font)); overflow-wrap:anywhere; }
.screen-body .whb-clock { width:110px; text-align:center; font:800 76px/1 var(--tb-display,var(--tb-font)); font-variant-numeric:tabular-nums; }
.screen-body .whb-body { display:grid; grid-template-columns:740px minmax(0,1fr); gap:64px; min-height:0; align-items:center; }
.screen-body .whb-wheel-zone { display:grid; place-items:center; min-height:0; height:100%; }
.screen-body .whb-wheel { --whb-pointer-kick:0deg; position:relative; width:740px; height:740px; max-width:100%; }
.screen-body .whb-wheel::before { content:''; position:absolute; inset:4%; border-radius:50%; box-shadow:0 0 100px 22px color-mix(in srgb,var(--tb-blue) 16%,transparent); opacity:.45; transition:opacity .6s; }
.screen-body .whb-round[data-phase=spinning] .whb-wheel::before { opacity:1; }
.screen-body .whb-svg { display:block; width:100%; height:100%; overflow:visible; position:relative; filter:drop-shadow(0 22px 36px rgba(var(--tint-ink),.4)); }
.screen-body .whb-rim { fill:var(--tb-base); stroke:var(--tb-border); stroke-width:6; }
.screen-body .whb-rim-lights { fill:var(--tb-blue); opacity:.65; }
.screen-body .whb-round[data-phase=spinning] .whb-rim-lights { opacity:1; }
.screen-body .whb-slice { stroke:var(--tb-base); stroke-width:4; }
.screen-body .whb-tone-0:not([fill]) { fill:var(--tb-surface); }
.screen-body .whb-tone-1:not([fill]) { fill:var(--tb-surface-top); }
.screen-body .whb-tone-2:not([fill]) { fill:color-mix(in srgb,var(--tb-surface) 78%,var(--tb-white)); }
.screen-body .whb-gold-stop { stop-color:var(--gold); }
.screen-body .whb-orange-stop { stop-color:var(--orange); }
.screen-body .whb-slice.is-landed { stroke:var(--tb-white); stroke-width:8; }
.screen-body .whb-slice-label { fill:var(--tb-white); font:700 40px var(--tb-font); }
.screen-body .whb-slice-label.is-golden { fill:var(--tb-base); }
.screen-body .whb-peg { fill:var(--tb-white); }
.screen-body .whb-pointer { position:absolute; width:56px; height:68px; top:-12px; left:50%; transform:translateX(-50%) rotate(var(--whb-pointer-kick)); transform-origin:50% 12%; background:var(--tb-white); clip-path:polygon(0 0,100% 0,50% 100%); }
.screen-body .whb-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:170px; height:170px; border-radius:50%; border:6px solid var(--tb-white); background:var(--tb-base); display:grid; place-items:center; box-shadow:0 0 0 16px color-mix(in srgb,var(--tb-base) 70%,transparent); }
.screen-body .whb-hub-core { display:block; width:64px; height:64px; border:2px solid var(--tb-border); border-radius:50%; background:radial-gradient(circle,var(--tb-blue) 0 8px,transparent 9px); }
.screen-body .whb-side { display:grid; grid-template-rows:246px 90px minmax(0,1fr); gap:24px; min-height:0; height:100%; padding:10px 0; }
.screen-body .whb-participant { display:grid; grid-template-rows:56px 176px; gap:14px; min-width:0; }
.screen-body .whb-participant-label { height:56px; font:700 42px/1.1 var(--tb-font); color:var(--tb-muted); }
.screen-body .whb-name { height:176px; display:flex; align-items:center; font:900 128px/1.1 var(--tb-display,var(--tb-font)); overflow-wrap:anywhere; unicode-bidi:plaintext; }
.screen-body .whb-state { display:flex; align-items:center; height:90px; font:750 64px/1.1 var(--tb-display,var(--tb-font)); color:var(--tb-blue); }
.screen-body .whb-pool { display:grid; grid-template-rows:52px repeat(var(--whb-pool-rows,2),minmax(0,1fr)); gap:12px; min-height:0; }
.screen-body .whb-pool-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.screen-body .whb-pool-head h2 { margin:0; height:48px; flex:1; font:700 42px/1.1 var(--tb-font); }
.screen-body .whb-pool-row { display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr) 138px; gap:20px; align-items:center; background:var(--tb-surface); border:1px solid var(--tb-border); border-radius:18px; padding:16px 20px; min-height:0; }
.screen-body .whb-pool-label { display:block; min-height:0; height:100%; font:700 50px/1.12 var(--tb-font); overflow-wrap:anywhere; unicode-bidi:plaintext; align-content:center; }
.screen-body .whb-chance { font:750 40px/1 var(--tb-font); text-align:right; white-space:nowrap; }
.screen-body .whb-empty { grid-row:2 / -1; margin:0; font:700 56px/1.2 var(--tb-font); }
.screen-body .whb-round[data-phase=result] { grid-template-rows:minmax(0,1fr); }
.screen-body .whb-round[data-phase=result] .whb-body { display:grid; grid-template-columns:minmax(0,1fr); place-items:center; height:100%; }
/* One matte result surface anchors the artwork, winner and prize together. Its
   internal padding is also the animation inset at the 1920px design size. */
.screen-body .whb-result { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; min-height:0; width:100%; height:min(100%,780px); gap:56px; padding:52px; border:1px solid color-mix(in srgb,var(--tb-border) 55%,transparent); border-radius:30px; background:linear-gradient(115deg,color-mix(in srgb,var(--tb-surface-top) 92%,var(--tb-base)),color-mix(in srgb,var(--tb-surface) 94%,var(--tb-base)) 60%,var(--tb-base)); box-shadow:0 28px 64px -32px rgba(var(--tint-ink),.5),inset 0 1px 0 color-mix(in srgb,var(--tb-white) 6%,transparent); }
.screen-body .whb-round.has-prize-image .whb-result { grid-template-columns:700px minmax(0,1fr); }
.screen-body .whb-award-art { height:100%; min-height:0; display:grid; place-items:center; }
.screen-body .whb-award-copy { display:flex; flex-direction:column; justify-content:center; gap:28px; height:100%; min-width:0; min-height:0; width:100%; margin:auto; }
.screen-body .whb-award-copy .whb-participant { flex:none; height:260px; grid-template-rows:48px 176px; gap:12px; padding-bottom:22px; border-bottom:1px solid color-mix(in srgb,var(--tb-white) 18%,transparent); }
.screen-body .whb-award-copy .whb-participant-label { height:48px; color:var(--tb-white); }
.screen-body .whb-award-copy .whb-participant.is-anonymous { height:56px; grid-template-rows:48px; padding:0; border:0; }
.screen-body .whb-award-copy .whb-name { --tb-fit-max:160; height:176px; }
.screen-body .whb-prize { display:flex; align-items:center; min-height:0; height:340px; max-height:340px; flex:0 1 340px; font:900 112px/1.12 var(--tb-display,var(--tb-font)); overflow-wrap:anywhere; unicode-bidi:plaintext; background:var(--tb-brand-headline,var(--tb-highlight,linear-gradient(90deg,var(--tb-blue),var(--tb-white)))) center/cover; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 5px rgba(var(--tint-ink),.28)); }
.screen-body .whb-prize.has-parts { flex-direction:column; justify-content:center; align-items:stretch; background:none; color:var(--tb-white); }
.screen-body .whb-prize-part { display:block; width:fit-content; max-width:100%; line-height:1.1; background:var(--tb-brand-headline,var(--tb-highlight,linear-gradient(90deg,var(--tb-blue),var(--tb-white)))) center/cover; -webkit-background-clip:text; background-clip:text; color:transparent; }
.screen-body .whb-award-note { flex:none; width:100%; height:52px; font:600 36px/1.3 var(--tb-font); color:var(--tb-muted); text-align:inherit; overflow-wrap:anywhere; }
.screen-body .whb-round[data-phase=result]:not(.has-prize-image) .whb-result { width:min(100%,1480px); height:min(100%,740px); padding:48px 80px; }
.screen-body .whb-round[data-phase=result]:not(.has-prize-image) .whb-award-copy { align-items:center; text-align:center; }
.screen-body .whb-round[data-phase=result]:not(.has-prize-image) .whb-participant { width:100%; }
.screen-body .whb-round[data-phase=result]:not(.has-prize-image) :is(.whb-name,.whb-prize) { justify-content:center; width:100%; }
.screen-body .whb-round[data-phase=result]:not(.has-prize-image) .whb-prize { --tb-fit-max:152; }
.screen-body .whb-round[data-phase=result]:not(.has-prize-image) .whb-prize-part { align-self:center; }
.screen-body .whb-media { position:relative; min-height:0; border-radius:18px; padding:20px; background:var(--tb-surface); display:grid; place-items:center; overflow:hidden; }
.screen-body .whb-image { width:100%; height:100%; min-height:0; object-fit:contain; }
.screen-body .whb-award-art .whb-media { width:100%; height:100%; max-height:720px; background:none; padding:0; overflow:visible; }
.screen-body .whb-award-art .whb-media::before { content:''; position:absolute; inset:5%; z-index:-1; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--tb-blue) 17%,transparent),transparent 65%); }
.screen-body .whb-award-art .whb-image { filter:drop-shadow(0 26px 30px rgba(var(--tint-ink),.5)); }
.screen-body .whb-media-fallback { width:100%; height:100%; font:700 48px/1.2 var(--tb-font); text-align:center; overflow-wrap:anywhere; align-content:center; }
.screen-body .whb-media[data-state=pending] .whb-media-fallback { opacity:0; }
.screen-body .whb-round[data-phase=result].has-history { grid-template-rows:minmax(0,1fr) 108px; }
.screen-body .whb-history { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center; gap:24px; border-top:1px solid var(--tb-border); }
.screen-body .whb-history h2 { margin:0; height:88px; font:700 36px/1.2 var(--tb-font); }
.screen-body .whb-history-row { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr); gap:28px; padding:10px 0; height:100px; min-width:0; }
.screen-body .whb-history-row > * { height:100%; align-content:center; min-width:0; font:700 42px/1.1 var(--tb-font); overflow-wrap:anywhere; unicode-bidi:plaintext; }
.screen-body .tb-shell[data-mainboard-layout=ewc26] :is(.whb-title,.whb-name,.whb-prize) { font-family:var(--tb-headline); }
.screen-body .tb-shell[data-mainboard-layout=ewc26] :is(.whb-pool-row,.whb-media) { border-radius:0; }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-pool-row { background:var(--tb-white); color:var(--tb-bg); }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-wheel::before { box-shadow:0 0 100px 22px color-mix(in srgb,var(--tb-white) 10%,transparent); }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-award-art .whb-media::before { background:radial-gradient(ellipse at center,color-mix(in srgb,var(--tb-white) 13%,transparent),transparent 65%); }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-result { border-radius:0; border-color:color-mix(in srgb,var(--tb-white) 14%,transparent); background:linear-gradient(110deg,color-mix(in srgb,var(--tb-surface-top) 75%,var(--tb-base)),var(--tb-bg) 65%,var(--tb-base)); box-shadow:0 28px 64px -32px rgba(var(--tint-ink),.5); }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-hub-core { background:var(--tb-highlight); border:0; width:38px; height:38px; }
.screen-body .tb-shell.is-arabic :is(.whb-title,.whb-name,.whb-prize,.whb-state) { font-family:var(--tb-font); line-height:1.3; }
@media(prefers-reduced-motion:reduce) { .screen-body .whb-wheel::before { transition:none; } }

/* ---------------------------- PHONE ---------------------------- */

/* Watching card: little spinning ring (slow while ready, fast mid-spin). */
.play-body .wh-mini {
  width: 88px; height: 88px; border-radius: 50%;
  border: 5px solid var(--surface-3); border-top-color: var(--text);
  animation: whSpin 2.8s linear infinite;
}
.play-body .wh-mini.fast { animation-duration: 0.6s; }
@keyframes whSpin { to { transform: rotate(360deg); } }

.play-body .wh-watch-chip {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: 6px; padding: 10px 20px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
}
.play-body .wh-watch-chip-label {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 11px; color: var(--text-dim);
}
.play-body .wh-watch-chip-name {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 17px; color: var(--text);
}

/* Full-screen takeover — this fan was picked to spin. */
.play-body .wh-up {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; position: relative;
}
.play-body .wh-up::before {
  content: '';
  position: absolute; inset: -16px; z-index: -1;
  background: radial-gradient(420px 420px at 50% 42%, rgba(var(--tint-orange), 0.16), transparent 70%);
  animation: whBlink 1.4s ease-in-out infinite;
}
.play-body .wh-up-icon { font-size: 72px; animation: whUpFloat 1.6s ease-in-out infinite; }
@keyframes whUpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.play-body .wh-up-head {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 42px; line-height: 0.95;
  background: var(--ewc-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: whUpPulse 1.1s ease-in-out infinite;
}
@keyframes whUpPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.play-body .wh-up-stage {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 26px; color: var(--text); letter-spacing: 0.04em;
}

/* Result view — everyone sees what was won. */
.play-body .wh-won-img {
  width: min(58vw, 240px); max-height: 34vh; object-fit: contain;
  border-radius: 16px; margin-bottom: 4px;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
}
.play-body .wh-won-kicker {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.34em; font-size: 14px; color: var(--text-dim);
}
.play-body .wh-won-prize {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 34px; line-height: 1; max-width: 90vw; overflow-wrap: break-word;
  background: var(--grad-num);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.play-body .wh-yours { color: var(--success); font-weight: 600; font-size: 16px; }

/* ---------------------------- ADMIN ---------------------------- */

#dash .wh-seg-head {
  display: grid; grid-template-columns: 30px 48px minmax(0, 1fr) 96px 46px 52px 42px; gap: 10px;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 10.5px; color: var(--text-faint);
  padding: 0 13px 7px; /* 12px row padding + 1px border — columns line up with the carded rows */
}
/* Golden is the SIXTH column now that Odds sits between it and Weight. */
#dash .wh-seg-head span:first-child, #dash .wh-seg-head span:nth-child(2),
#dash .wh-seg-head span:nth-child(6) { text-align: center; }
#dash .wh-seg-head span:nth-child(5) { text-align: right; }
#dash .wh-seg-rows { display: flex; flex-direction: column; gap: 8px; }
#dash .wh-seg-row {
  display: grid; grid-template-columns: 30px 48px minmax(0, 1fr) 96px 46px 52px 42px; gap: 10px;
  align-items: center;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 8px 12px;
}
/* The slice as a percentage — wheel.html CSS 606-616. Mono + tnum, or eight
   rows jitter as digits change; right-aligned so the column reads as a total. */
#dash .wh-seg-pct {
  font-family: var(--font-mono, ui-monospace); font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--text); text-align: right;
}
/* "Golden" checkbox cell — the theme.css custom checkbox, just centred. */
#dash .wh-seg-gold-cell { display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* The row index, in the same voice as every other row index in the console.
   It was --font-display at weight 900/14px — the heaviest text left anywhere
   in the console, spent on a row number — and proportional, so a two-digit
   index shifted the 30px column under it. Mono + tabular fixes the column;
   12px/500/--text-faint puts it under the concept's 600 weight ceiling and
   matches the neighbouring .wh-seg-pct cell. Concept reference: trivia.html
   :670-676 `.q-num` (mono, tabular-nums, 11.5px).
   #dash-scoped like every rule in this file, and .wh-seg-num appears in no
   screen.js or play.js — the wall and the phones never see it. */
#dash .wh-seg-num {
  font-family: var(--font-mono, ui-monospace); font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 12px;
  color: var(--text-faint); text-align: center;
}

/* Per-segment prize image: a 48px tile (thumb or "add" placeholder) + corner ✕. */
#dash .wh-seg-img { position: relative; width: 48px; height: 48px; }
#dash .wh-seg-imgbtn {
  width: 48px; height: 48px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 16px;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out), transform var(--dur-press) var(--ease-out);
}
/* F7 — the only two hovers in this file had no pointer query, so on touch the
   tapped tile kept its lit border until something else was tapped. */
@media (hover: hover) and (pointer: fine) {
  #dash .wh-seg-imgbtn:hover { border-color: var(--line); color: var(--text-dim); }
}
/* F2 — a button built from scratch inherits nothing from .btn. (1,2,0); the
   only other rule on this element is #dash .wh-seg-imgbtn (1,1,0) above. */
#dash .wh-seg-imgbtn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  #dash .wh-seg-imgbtn { transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out); }
  #dash .wh-seg-imgbtn:active { transform: none; }
}
#dash .wh-seg-imgbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
#dash .wh-seg-imgbtn.broken { color: var(--danger); }
#dash .wh-seg-imgclr {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface-3);
  color: var(--text-dim); font-size: 10px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#dash .wh-seg-imgclr {
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  #dash .wh-seg-imgclr:hover { color: var(--danger); border-color: var(--danger); }
}
#dash .wh-seg-imgclr:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  #dash .wh-seg-imgclr { transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
  #dash .wh-seg-imgclr:active { transform: none; }
}

#dash .wh-live-spinner { display: flex; gap: 9px; align-items: center; margin-top: 8px; }
#dash .wh-live-spinner input { flex: 1; min-width: 0; }
#dash .wh-spin-btn { font-size: 16px; padding: 12px 30px; }

#dash .wh-live-history { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#dash .wh-live-history-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line-soft); font-size: 13px;
}
#dash .wh-lh-prize { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dash .wh-lh-name { color: var(--text-dim); flex-shrink: 0; }

/* Operator draw controls use the console's tokens, independently of the wall. */
#dash #tab-wheel .wh-flow { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; list-style: none; }
#dash #tab-wheel .wh-flow li { padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 6px; font: 400 12px/1.4 var(--font-body); color: var(--text-faint); }
#dash #tab-wheel .wh-flow li.current { color: var(--text); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
#dash #tab-wheel .wh-flow li.complete { color: var(--text-dim); }
#dash #tab-wheel .wh-current { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
#dash #tab-wheel .wh-current-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 13px; }
#dash #tab-wheel .wh-current-head strong { font-weight: 600; }
#dash #tab-wheel .wh-phase { color: var(--text-dim); font-size: 12px; }
#dash #tab-wheel .wh-spin-time { margin: 10px 0; color: var(--text-dim); font-size: 12px; }
#dash #tab-wheel .wh-spin-time b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
#dash #tab-wheel .wh-live-spinner { flex-wrap: wrap; }
#dash #tab-wheel .wh-live-spinner input { flex: 1 1 160px; }
#dash #tab-wheel .wh-spin-btn { padding: 8px 16px; font-size: 13px; }
#dash #tab-wheel .wh-result { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 0; }
#dash #tab-wheel .wh-result strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
#dash #tab-wheel .wh-result span { color: var(--text-dim); }
#dash #tab-wheel .wh-result-image { width: 88px; height: 88px; object-fit: contain; border-radius: 6px; background: var(--bg); }
#dash #tab-wheel .wh-live-history { margin-top: 16px; }
#dash #tab-wheel .wh-live-history h3 { margin: 0 0 6px; font: 500 12px/1.5 var(--font-body); color: var(--text-dim); }
#dash #tab-wheel .wh-draw { border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-2); overflow: hidden; }
#dash #tab-wheel .wh-draw summary { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; padding: 10px 12px; cursor: pointer; font-size: 12px; }
#dash #tab-wheel .wh-draw summary::before { content: '›'; color: var(--text-faint); }
#dash #tab-wheel .wh-draw[open] summary::before { content: '⌄'; }
#dash #tab-wheel .wh-draw summary strong { flex: 1; min-width: 120px; font-weight: 500; overflow-wrap: anywhere; }
#dash #tab-wheel .wh-award-status { color: var(--text-dim); font-size: 11px; }
#dash #tab-wheel .wh-draw-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-dim); }
#dash #tab-wheel .wh-draw summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Prize Wheel operator workspace. Shared lfs/op components own the shell. */
#dash #tab-wheel.operator-workspace .wh-empty-content { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#dash #tab-wheel.operator-workspace .wh-empty-content p { margin:0; }
#dash #tab-wheel.operator-workspace .lfs-field input[type=text] { width:100%; height:36px; min-height:36px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:5px; background:var(--bg); color:var(--text); font:400 12px var(--font-body); }
#dash #tab-wheel.operator-workspace .wh-history-toggle { display:flex; align-items:center; gap:10px; align-self:end; min-height:36px; color:var(--text-dim); font-size:11px; }
#dash #tab-wheel.operator-workspace .wh-participant-controls { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
#dash #tab-wheel.operator-workspace .wh-participant-controls input { flex:1 1 140px; min-width:0; }
#dash #tab-wheel.operator-workspace .wh-workspace-image { display:block; width:100%; max-height:220px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
#dash #tab-wheel.operator-workspace .wh-result-preview { display:flex; align-items:center; gap:18px; padding:8px 0 20px; }
#dash #tab-wheel.operator-workspace .wh-result-preview .wh-workspace-image { width:120px; height:120px; flex:none; }
#dash #tab-wheel.operator-workspace .wh-result-preview h3 { margin:0 0 12px; font:550 20px var(--font-body); overflow-wrap:anywhere; }
#dash #tab-wheel.operator-workspace .wh-probabilities { display:grid; gap:16px; padding:0 18px 18px; }
#dash #tab-wheel.operator-workspace .wh-probability { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; color:var(--text-dim); font-size:12px; }
#dash #tab-wheel.operator-workspace .wh-probability > span { overflow-wrap:anywhere; }
#dash #tab-wheel.operator-workspace .wh-probability strong { color:var(--text); font-weight:550; font-variant-numeric:tabular-nums; }
#dash #tab-wheel.operator-workspace .wh-probability .lfs-response-track { grid-column:1 / -1; }
#dash #tab-wheel.operator-workspace .wh-spin-history { display:grid; gap:8px; padding:0 18px 18px; }
#dash #tab-wheel.operator-workspace .wh-history-draw { border:1px solid var(--line); border-radius:6px; background:var(--bg); }
#dash #tab-wheel.operator-workspace .wh-history-draw summary { position:relative; display:grid; grid-template-columns:70px minmax(0,1fr) minmax(80px,.6fr) 110px; gap:10px; align-items:center; min-height:44px; padding:12px 36px 12px 12px; list-style:none; cursor:pointer; font-size:12px; overflow-wrap:anywhere; }
#dash #tab-wheel.operator-workspace .wh-history-draw summary::-webkit-details-marker { display:none; }
#dash #tab-wheel.operator-workspace .wh-history-draw summary::after { content:''; position:absolute; right:15px; top:18px; width:6px; height:6px; border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint); transform:rotate(-45deg); }
#dash #tab-wheel.operator-workspace .wh-history-draw[open] summary::after { transform:rotate(45deg); }
#dash #tab-wheel.operator-workspace .wh-history-draw summary strong { font-weight:550; overflow-wrap:anywhere; }
#dash #tab-wheel.operator-workspace .wh-history-detail { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px; border-top:1px solid var(--line); }
#dash #tab-wheel.operator-workspace .wh-history-detail .wh-workspace-image { width:72px; height:72px; }
#dash #tab-wheel.operator-workspace .wh-history-draw summary:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; border-radius:5px; }
@media(max-width:1100px) {
  #dash #tab-wheel.operator-workspace .wh-history-draw summary { grid-template-columns:60px minmax(0,1fr); }
}
@media(max-width:560px) {
  #dash #tab-wheel.operator-workspace .wh-empty-content { align-items:flex-start; flex-direction:column; }
  #dash #tab-wheel.operator-workspace .wh-result-preview { align-items:flex-start; }
  #dash #tab-wheel.operator-workspace .wh-result-preview .wh-workspace-image { width:72px; height:72px; }
}

#dash #tab-wheel .wh-title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#dash #tab-wheel .wh-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
#dash #tab-wheel .wh-header-actions .op-context { display:flex; align-items:center; gap:10px; }
#dash #tab-wheel .wh-header-actions .lfs-clock { font-size:24px; min-width:58px; text-align:center; }
#dash #tab-wheel .wh-prize-editor-row { display:grid; grid-template-columns:minmax(0,1.5fr) 90px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
#dash #tab-wheel .wh-prize-editor-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; }
#dash #tab-wheel .wh-history-draw summary > span { overflow-wrap:anywhere; min-width:0; }
#dash #tab-wheel .lfs-metric strong { overflow-wrap:anywhere; }
@media(max-width:1100px) { #dash #tab-wheel .wh-header-actions { justify-content:flex-start; } }
@media(max-width:760px) { #dash #tab-wheel .wh-prize-editor-row { grid-template-columns:minmax(0,1fr) 90px; } #dash #tab-wheel .wh-prize-editor-row .lfs-field:last-of-type { grid-column:1 / -1; } }


/* Font ascent/descent stays inside each fitted slot, including fallback faces. */
.screen-body .whb-round [data-fit] { line-height:1.4; }
.screen-body .whb-award-copy :is(.whb-name,.whb-prize)[data-fit] { line-height:1.14; }
.screen-body .tb-shell.is-arabic .whb-award-copy :is(.whb-name,.whb-prize,.whb-prize-part) { line-height:1.3; }
.screen-body .whb-title { align-content:center; }


.play-body .wh-watch-chip { max-width:100%; flex-wrap:wrap; justify-content:center; border-radius:16px; }
.play-body .wh-watch-chip-name { max-width:100%; overflow-wrap:anywhere; unicode-bidi:plaintext; }
.play-body .wh-won-prize { max-width:100%; overflow-wrap:anywhere; line-height:1.2; }
.play-body .wh-phone-media-fallback { padding:24px 16px; border:1px solid var(--line); border-radius:12px; font-size:18px; color:var(--text); }
.play-body .wh-up-head,.play-body .wh-up-stage { max-width:100%; overflow-wrap:anywhere; }
.play-body .stage-center:has(.wh-won-prize) .stage-sub { max-width:100%; overflow-wrap:anywhere; unicode-bidi:plaintext; }
@media(prefers-reduced-motion:reduce) { .play-body .wh-mini,.play-body .wh-up-icon,.play-body .wh-up-head,.play-body .wh-up::before { animation:none; } }

.screen-body .tb-shell[data-mainboard-layout=ewc26] :is(.whb-title,.whb-name,.whb-prize) { text-transform:uppercase; }

.screen-body .whb-chance { display:block; line-height:1.4; }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-gold-stop { stop-color:var(--ewc-gold); }
.screen-body .tb-shell[data-mainboard-layout=ewc26] .whb-orange-stop { stop-color:var(--ewc-orange); }

.screen-body .whb-pool-row.has-image { grid-template-columns:130px minmax(0,1fr) 138px; gap:20px; }
.screen-body .whb-pool-row .whb-media { grid-row:1; width:130px; height:130px; padding:10px; border-radius:10px; }