/* The draw machine and the winner card (Chris, 21 Oct 2026; DRAW-MODES.md "The draw machine").
   The machine is one dark stage on every look - it is what viewers watch, on the site and on a stream - wearing the operator's
   colour (--st-p on the platform's templates, the site's primary colour on Ruby's candy: --dm-op, set by partials/draw-live)
   with gold kept for a win and red for a number that is not an entry. The winner card wears the site's own look. Both are
   drawn in code - no pictures. Driven by public/theme/draw-live.js. */

.dm-wrap{width:100%;min-width:0;container:dm/inline-size}   /* sized by its place, never by its contents */
.st-draw{min-width:0}
.dm{--dm-body:#0f172b;--dm-body2:#16203a;--dm-edge:#26324f;--dm-ink:#eaf0fb;--dm-mute:#9aa7c2;--dm-hi:#e6eaf1;--dm-lo:#5d6779;
  --dm-accent:var(--st-p,var(--dm-op,#046eff));--dm-gold:#f5c451;--dm-gold-ink:#2a1d00;--dm-miss:#ff5a5f;--dm-on:#2ee59d;
  --dm-display:var(--st-font-display,var(--rcc-display,system-ui,sans-serif));--dm-font:var(--st-font-body,var(--rcc-body,system-ui,sans-serif));
  --dm-digit:var(--st-font-display,var(--rcc-display,"Arial Narrow",Impact,sans-serif));--dm-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative;box-sizing:border-box;width:100%;margin:8px 0 0;padding:14px 14px 16px;border-radius:20px;overflow:hidden;
  text-align:center;color:var(--dm-ink);font:15px/1.45 var(--dm-font);
  background:linear-gradient(180deg,var(--dm-body2),var(--dm-body));
  background:radial-gradient(70% 45% at 50% 0%,color-mix(in srgb,var(--dm-accent) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--dm-body2),var(--dm-body));
  border:1px solid var(--dm-edge);box-shadow:0 24px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
.dm::before{content:"";position:absolute;inset:7px;border-radius:15px;border:1px solid var(--dm-edge);border-color:color-mix(in srgb,var(--dm-accent) 38%,transparent);pointer-events:none}
.dm *{box-sizing:border-box}
.dm p{margin:0;max-width:none;text-align:center}

.dm__plate{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;
  font:700 11px/1.2 var(--dm-display);letter-spacing:.2em;text-transform:uppercase;color:var(--dm-mute)}
.dm__live{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;background:var(--dm-miss);box-shadow:0 0 8px var(--dm-miss)}
.dm__live.is-on{background:var(--dm-on);box-shadow:0 0 10px var(--dm-on)}

/* the tape: the sealed list, then the public random number running past */
.dm__tape{position:relative;display:flex;align-items:center;height:38px;margin-top:10px;border-radius:10px;overflow:hidden;background:#04070f;border:1px solid var(--dm-edge)}
.dm__tape-l{position:relative;z-index:2;flex:none;align-self:stretch;display:flex;align-items:center;padding:0 12px;background:#04070f;border-right:1px solid var(--dm-edge);
  box-shadow:14px 0 14px #04070f;font:700 10px/1 var(--dm-display);letter-spacing:.14em;text-transform:uppercase;color:var(--dm-ink)}
.dm__tape-win{position:relative;flex:1;min-width:0;align-self:stretch;overflow:hidden;font:500 13px/1 var(--dm-mono);
  color:#cfe0ff;color:color-mix(in srgb,var(--dm-accent) 55%,#dfe9ff)}
/* the run is out of the flow, so however long its words it can never widen the machine or the page (21 Oct: it did) */
.dm__tape-run{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dm__tape.is-go .dm__tape-run{right:auto;overflow:visible;padding-left:100%;animation:dm-tape 14s linear infinite}
.dm__tape.is-fast .dm__tape-run{animation-duration:2.4s}
@keyframes dm-tape{to{transform:translateX(-100%)}}

/* the rotors: one per digit of the highest ticket, a strip of 0-9 turned to land the next digit in the window */
.dm__rotors{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,2.2vw,16px);margin-top:16px}
.dm__rotor{--cell:46px;position:relative;flex:0 1 92px;min-width:0;aspect-ratio:92/144;border-radius:12px;overflow:hidden;
  background:linear-gradient(90deg,#1a2135,#0a0e19 18%,#0a0e19 82%,#1a2135);border:1px solid var(--dm-edge)}
.dm__rotor::before,.dm__rotor::after{content:"";position:absolute;left:0;right:0;height:34%;z-index:2;pointer-events:none}
.dm__rotor::before{top:0;background:linear-gradient(#0a0e19,rgba(10,14,25,0))}
.dm__rotor::after{bottom:0;background:linear-gradient(rgba(10,14,25,0),#0a0e19)}
.dm__edge{position:absolute;top:0;bottom:0;z-index:3;width:6px;opacity:.55;background:repeating-linear-gradient(0deg,var(--dm-lo) 0 2px,var(--dm-hi) 2px 4px)}
.dm__edge--l{left:0}.dm__edge--r{right:0}
.dm__win{position:absolute;left:6px;right:6px;top:50%;z-index:1;height:var(--cell);transform:translateY(-50%);border-radius:6px;
  border:1px solid var(--dm-accent);box-shadow:0 0 22px -4px var(--dm-accent);transition:border-color .2s,box-shadow .2s}
.dm__rotor.is-locked .dm__win{border-color:var(--dm-ink)}
.dm__rotor.is-win .dm__win{border-color:var(--dm-gold);box-shadow:0 0 26px -2px var(--dm-gold)}
.dm__rotor.is-miss .dm__win{border-color:var(--dm-miss);box-shadow:0 0 22px -4px var(--dm-miss)}
.dm__strip{position:absolute;left:0;right:0;top:50%;display:block;will-change:transform}
.dm__strip b{display:flex;align-items:center;justify-content:center;height:var(--cell);font:700 calc(var(--cell)*.8)/1 var(--dm-digit);font-variant-numeric:tabular-nums;
  color:var(--dm-hi);background:linear-gradient(180deg,var(--dm-hi),var(--dm-lo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dm__rotor.is-win .dm__strip b{background-image:linear-gradient(180deg,#fff3c4,var(--dm-gold))}

/* the lampboard: letters light in turn, as a cipher machine types its answer */
.dm__lamps{display:grid;gap:5px;justify-content:center;margin-top:14px}
.dm__lamprow{display:flex;justify-content:center;gap:5px}
.dm__lamp{display:grid;place-items:center;width:clamp(20px,6vw,28px);height:clamp(20px,6vw,28px);border-radius:50%;font:700 clamp(10px,2.6vw,12px)/1 var(--dm-display);
  color:#5a6684;background:radial-gradient(circle at 35% 30%,#2a3350,#121a2e);border:1px solid #2a3554;transition:color .12s,background .12s,box-shadow .12s}
.dm__lamp.is-lit{color:#1b1300;background:radial-gradient(circle at 35% 30%,#fff6d8,var(--dm-gold));box-shadow:0 0 14px var(--dm-gold)}
.dm__lamp.is-lit.is-red{color:#2a0607;background:radial-gradient(circle at 35% 30%,#ffd9da,var(--dm-miss));box-shadow:0 0 14px var(--dm-miss)}

/* the plate: WINNER with the name, or NO ENTRY - the moment the rotors stop */
.dm__result{display:grid;place-items:center;min-height:196px;margin-top:16px;padding:14px;border-radius:14px;background:#060a14;border:1px solid var(--dm-edge);
  transition:background .3s,border-color .3s}
.dm .dm__eyebrow{font:700 12px/1.2 var(--dm-display);letter-spacing:.24em;text-transform:uppercase;color:var(--dm-gold)}
.dm .dm__word{font:700 clamp(30px,9vw,54px)/1 var(--dm-display);letter-spacing:.06em;text-transform:uppercase;color:var(--dm-ink)}
.dm .dm__name{margin-top:8px!important;font:700 clamp(20px,5vw,28px)/1.15 var(--dm-display);color:var(--dm-ink);overflow-wrap:anywhere}
.dm .dm__name.is-held{color:var(--dm-mute);font-size:clamp(16px,4vw,20px)}
.dm .dm__line{margin-top:6px!important;font-size:14.5px;color:var(--dm-mute)}
.dm .dm__lock{display:inline-block;margin-top:8px!important;padding:5px 10px;border-radius:999px;font:700 12px/1.2 var(--dm-display);letter-spacing:.08em;text-transform:uppercase;
  color:var(--dm-mute);border:1px solid var(--dm-edge);font-variant-numeric:tabular-nums}
.dm .dm__lock.is-locked{color:var(--dm-gold-ink);background:var(--dm-gold);border-color:var(--dm-gold)}
.dm__result.is-win{border-color:var(--dm-gold);background:#1c1606;background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--dm-gold) 26%,#060a14),#060a14)}
.dm .dm__result.is-win .dm__word{color:var(--dm-gold);text-shadow:0 0 24px rgba(245,196,81,.55)}
.dm__result.is-miss{border-color:var(--dm-miss)}
.dm .dm__result.is-miss .dm__word{color:var(--dm-miss)}

/* every number drawn, and the winners so far */
.dm__history{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:24px;margin-top:10px}
.dm__history span{padding:5px 7px;border-radius:6px;border:1px solid var(--dm-edge);font:600 12px/1 var(--dm-mono);color:var(--dm-mute)}
.dm__history span.is-miss{text-decoration:line-through;text-decoration-color:var(--dm-miss)}
.dm__history span.is-win{color:var(--dm-gold-ink);background:var(--dm-gold);border-color:var(--dm-gold)}
.dm__history em{font:600 12px/24px var(--dm-font);font-style:normal;color:var(--dm-mute)}
.dm__winners{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;text-align:left}
.dm .dm__lock[hidden],.dm__winners[hidden]{display:none}   /* their display would beat the hidden attribute: an empty pill under the plate's words */
.dm__winners li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--dm-edge)}
.dm__winners .dm__pl{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:700 13px/1 var(--dm-display);color:var(--dm-gold-ink);background:var(--dm-gold)}
.dm__winners b{display:block;font:700 17px/1.2 var(--dm-display);overflow-wrap:anywhere}
.dm__winners small{display:block;font:600 12.5px/1.3 var(--dm-font);color:var(--dm-mute)}
.dm__winners .dm__st{font:700 11px/1.2 var(--dm-display);letter-spacing:.06em;text-transform:uppercase;color:var(--dm-mute);text-align:right;font-variant-numeric:tabular-nums}
.dm__winners .dm__st.is-locked{color:var(--dm-gold)}
.dm__sound{position:relative;margin-top:12px;padding:6px 11px;border-radius:999px;border:1px solid var(--dm-edge);background:transparent;color:var(--dm-mute);
  font:600 12.5px/1 var(--dm-font);cursor:pointer}
.dm__sound[aria-pressed="true"]{color:var(--dm-ink);border-color:var(--dm-ink)}
.dm__sound:focus-visible{outline:2px solid var(--dm-ink);outline-offset:2px}
.dm__check{display:inline-block;margin-top:12px;color:var(--dm-ink);font:600 14px/1 var(--dm-font);text-decoration:underline;text-underline-offset:3px}
.dm__sparkle{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px}
.dm__sparkle i{position:absolute;top:0;width:6px;height:10px;border-radius:2px;opacity:0;animation:dm-fall 1.8s ease-in forwards}
@keyframes dm-fall{0%{opacity:1;transform:translateY(-20px) rotate(0)}100%{opacity:0;transform:translateY(460px) rotate(540deg)}}

/* the facts under it, and the team's panel (the Live draw screen) */
.dm-side{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;min-width:0}
.dm-side>.dm-facts,.dm-side>.dm-team{margin-top:0}
.dm-facts{display:grid;gap:8px;width:100%;margin:12px 0 0;text-align:left}
.dm-facts>div{display:grid;gap:2px;padding:9px 12px;border-radius:12px;background:var(--st-s2,rgba(0,0,0,.05))}
.dm-facts dt{font:700 12px/1.3 var(--st-font-body,var(--rcc-body,inherit));color:var(--st-muted,var(--rcc-mute,#666))}
.dm-facts dd{margin:0;font:600 13px/1.4 var(--st-font-body,var(--rcc-body,inherit));color:var(--st-fg,var(--rcc-text,inherit))}
.dm-facts code{display:block;font:600 11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.dm-facts small{font-weight:700;color:var(--st-muted,var(--rcc-mute,#666))}
.dm-team{display:grid;gap:10px;width:100%;margin-top:14px;padding:14px;border-radius:14px;text-align:left;border:1px dashed var(--st-line,rgba(0,0,0,.25))}
.dm-team .dm-team__h{margin:0;font:700 11px/1.3 var(--st-font-display,var(--rcc-display,inherit));letter-spacing:.14em;text-transform:uppercase;color:var(--st-muted,var(--rcc-mute,#666))}
.dm-team .dm-team__say{margin:0;font:600 15px/1.45 var(--st-font-body,var(--rcc-body,inherit));color:var(--st-fg,var(--rcc-text,inherit));max-width:none}
.dm-team .dm-team__out{margin:0;padding:10px 12px;border-radius:10px;font:700 15px/1.45 var(--st-font-body,var(--rcc-body,inherit));color:#fff;background:#b3261e;max-width:none}
.dm-team .dm-team__out a{color:inherit;text-decoration:underline}
.dm-team .st-draw__presses{justify-content:flex-start}
.dm-team__locks .st-btn small{display:block;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
.dm-team .st-btn[disabled]{opacity:.5;cursor:default}
.dm-team .st-btn.is-gold,.rc-candy .dm-team .st-btn.is-gold{background:#f5c451;color:#2a1d00;border-color:#f5c451;text-shadow:none}

/* the stream page: the machine alone, filling the browser source */
.st-draw--stream{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;max-width:none!important}
.st-draw--stream .dm{margin:0;padding:22px 22px 24px}
.st-draw--stream .dm__rotor{flex-basis:150px}
.st-draw--stream .dm__lamp{width:clamp(22px,3.2vw,36px);height:clamp(22px,3.2vw,36px);font-size:clamp(11px,1.4vw,15px)}
.st-draw--stream .dm__word{font-size:clamp(34px,7vw,84px)}
.st-draw--stream .dm__name{font-size:clamp(22px,4.4vw,48px)}
.st-draw--stream .dm__line{font-size:clamp(14px,1.8vw,20px)}
/* ...and wherever the machine itself is wide on a landscape screen (the stream view, the admin's Live draw screen): two
   columns sized by the screen's height, so the whole machine fits with no scrolling - the rotors and lampboard on the
   left, the plate, the numbers and the winners on the right */
@media (min-aspect-ratio:4/3){@container dm (min-width:720px){
  .dm-wrap .dm{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:3.4vh;row-gap:0;align-items:start;padding:2.4vh 3vh 3vh;
    grid-template-areas:"plate plate" "tape tape" "rotors result" "lamps result" ". history" ". winners";grid-template-rows:auto auto auto auto auto minmax(0,1fr)}
  .dm-wrap .dm__plate{grid-area:plate;font-size:1.5vh}
  .dm-wrap .dm__tape{grid-area:tape;height:4.6vh;margin-top:1.4vh}
  .dm-wrap .dm__tape-l{font-size:1.25vh}
  .dm-wrap .dm__tape-win{font-size:1.7vh}
  .dm-wrap .dm__rotors{grid-area:rotors;margin-top:2.4vh;gap:1.4vh}
  .dm-wrap .dm__rotor{flex-basis:21vh}
  .dm-wrap .dm__lamps{grid-area:lamps;margin-top:2.4vh;gap:.9vh}
  .dm-wrap .dm__lamprow{gap:.9vh}
  .dm-wrap .dm__lamp{width:4.4vh;height:4.4vh;font-size:1.8vh}
  .dm-wrap .dm__result{grid-area:result;align-self:stretch;min-height:30vh;margin-top:2.4vh;padding:2vh}
  .dm-wrap .dm .dm__word{font-size:9vh}
  .dm-wrap .dm .dm__name{font-size:5.2vh}
  .dm-wrap .dm .dm__line{font-size:2.2vh}
  .dm-wrap .dm .dm__lock{font-size:1.7vh;padding:.7vh 1.4vh}
  .dm-wrap .dm__sound{justify-self:center;align-self:start;margin-top:2vh}
  .dm-wrap .dm__history{grid-area:history;margin-top:1.6vh;gap:.6vh}
  .dm-wrap .dm__history span{font-size:1.6vh;padding:.6vh .8vh}
  .dm-wrap .dm__winners{grid-area:winners;align-self:stretch;margin-top:1.4vh;gap:1vh;grid-template-columns:repeat(auto-fill,minmax(26vh,1fr));align-content:start;overflow:hidden}
  .dm-wrap .dm__winners li{padding:1vh 1.2vh;gap:1.2vh}
  .dm-wrap .dm__winners .dm__pl{width:4.4vh;height:4.4vh;font-size:1.8vh}
  .dm-wrap .dm__winners b{font-size:2.5vh}
  .dm-wrap .dm__winners small,.dm-wrap .dm__winners .dm__st{font-size:1.5vh}
}}
/* six digits or more (a competition of 100,000+ tickets): slimmer rotors, and on a wide screen the row of them takes the
   machine's whole width, the lampboard and the plate side by side under it */
.dm--long .dm__rotors{gap:clamp(3px,1.2vw,10px)}
.dm--long .dm__edge{width:3px}
.dm--long .dm__win{left:3px;right:3px}
@media (min-aspect-ratio:4/3){@container dm (min-width:720px){
  .dm-wrap .dm.dm--long{grid-template-areas:"plate plate" "tape tape" "rotors rotors" "lamps result" "history history" "winners winners";grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto auto}
  .dm-wrap .dm--long .dm__sound{grid-area:lamps;align-self:end;margin:0}
  .dm-wrap .dm--long .dm__rotors{gap:1vh}
  .dm-wrap .dm--long .dm__rotor{flex-basis:12vh}
  .dm-wrap .dm--long .dm__result{min-height:22vh}
}}
@media (max-width:420px){.dm{padding:12px 10px 14px}.dm__plate{letter-spacing:.12em}.dm__tape-l{font-size:9px;letter-spacing:.06em;padding:0 8px}.dm__tape-win{font-size:12px;padding-left:8px}}
@media (prefers-reduced-motion:reduce){.dm__tape.is-go .dm__tape-run{animation:none;padding-left:0}.dm__sparkle{display:none}}

/* the winner card: the competition page once every winner is locked in, in place of the machine */
.st-wcard{--wc-gold:var(--st-win,var(--rcc-gold,#f5c451));--wc-gold-ink:var(--st-win-ink,#2a1d00);--wc-fg:var(--st-fg,var(--rcc-text,inherit));
  --wc-mute:var(--st-muted,var(--rcc-mute,#666));--wc-line:var(--st-line,rgba(0,0,0,.12));--wc-display:var(--st-font-display,var(--rcc-display,inherit));
  position:relative;overflow:hidden;text-align:left!important;align-items:stretch!important;border-top:4px solid var(--wc-gold)!important}
.st-wcard::before{content:"";position:absolute;inset:0 0 auto;height:140px;pointer-events:none;background:linear-gradient(180deg,rgba(245,196,81,.16),transparent)}
.st-wcard>*{position:relative}
.st-wcard__ribbon{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font:700 11.5px/1.2 var(--wc-display);letter-spacing:.12em;text-transform:uppercase;color:var(--wc-mute)}
.st-wcard__ribbon b{padding:6px 9px;border-radius:6px;letter-spacing:.2em;color:var(--wc-gold-ink);background:var(--wc-gold)}
.st-wcard__body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;margin-top:14px}
.st-wcard .st-wcard__eyebrow{margin:14px 0 0;font:700 13px/1.2 var(--wc-display);letter-spacing:.26em;text-transform:uppercase;color:var(--wc-fg)}
.st-wcard .st-wcard__body .st-wcard__eyebrow{margin-top:0}
.st-wcard__name{margin:6px 0 0;font:700 clamp(30px,8vw,44px)/1.05 var(--wc-display);color:var(--wc-fg);overflow-wrap:anywhere}
.st-wcard .st-wcard__prize{margin:6px 0 0;font-size:16px;color:var(--wc-fg);max-width:none}
/* the Golden Number (GoldenNumber): a winner whose ticket had it - gold, as every win is */
.st-wcard .st-wcard__golden{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--wc-fg);max-width:none}
.st-wcard .st-wcard__golden b,.st-wcard__gold-tag{display:inline-block;padding:3px 8px;border-radius:999px;font:700 11px/1.2 var(--wc-display);letter-spacing:.12em;text-transform:uppercase;color:var(--wc-gold-ink);background:var(--wc-gold);white-space:nowrap}
.st-wcard__ticket small{display:block;margin-bottom:6px;font:700 10.5px/1 var(--wc-display);letter-spacing:.2em;text-transform:uppercase;color:var(--wc-mute)}
.st-wcard__tiles{display:flex;gap:5px}
.st-wcard__tiles b{display:grid;place-items:center;flex:0 1 44px;min-width:0;aspect-ratio:44/60;border-radius:9px;font:700 clamp(24px,7vw,36px)/1 var(--wc-display);font-variant-numeric:tabular-nums;
  color:#2a1d00;background:linear-gradient(180deg,#ffe7a3,#f5c451);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 6px 16px -8px rgba(160,110,0,.7)}
/* a tile's width is written out, and not left to its flex-basis: Safari measures a strip by what is in it, not by the basis, so the
   strip came out too narrow, its tiles ran past the card's edge and the last digit was cut off ("220" for 2201). A row with no room
   for the name and the number puts the number on a line of its own, so a long number never squeezes the name away. */
.st-wcard__tiles--sm{flex:0 1 auto;min-width:0;max-width:100%;margin-left:auto}
.st-wcard__tiles--sm b{flex:0 1 28px;width:28px;aspect-ratio:28/38;border-radius:6px;font-size:21px}
.st-wcard__list{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.st-wcard__list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:9px 11px;border-radius:12px;border:1px solid var(--wc-line)}
.st-wcard__list li>b{flex:1 1 90px;min-width:0;font:700 18px/1.2 var(--wc-display);color:var(--wc-fg);overflow-wrap:anywhere}
.st-wcard__place{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:700 13px/1 var(--wc-display);color:#2a1d00;background:#f5c451}
.st-wcard__place--2{background:#d9dee7}.st-wcard__place--3{background:#e0a46e}.st-wcard__place--4{background:transparent;color:var(--wc-fg);border:1px solid var(--wc-line)}
.st-wcard__proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--wc-line)}
.st-wcard__proof dt{font:700 10.5px/1.2 var(--wc-display);letter-spacing:.14em;text-transform:uppercase;color:var(--wc-mute)}
.st-wcard__proof dd{margin:4px 0 0;font-size:13.5px;line-height:1.35;color:var(--wc-fg)}
.st-wcard__more{margin-top:10px;font-size:13px;color:var(--wc-mute)}
.st-wcard__more summary{cursor:pointer;font-weight:700}
.st-wcard__more .st-draw__how{margin:6px 0 0;text-align:left}
.st-wcard__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
@media (max-width:560px){.st-wcard__body{grid-template-columns:minmax(0,1fr)}.st-wcard__proof{grid-template-columns:minmax(0,1fr)}}

/* a finished competition's instant winners, prize by prize: who found each, or "No winners" - never the numbers nobody
   found. Gold edge on a prize somebody won */
.st-iwwin__tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;align-items:start}
.st-iwwin__tier{display:grid;gap:8px;min-width:0;text-align:left;padding:12px 14px;border-radius:14px;
  background:var(--st-s1,var(--rcc-pearl,#fff));border:1px solid var(--st-line,rgba(0,0,0,.12));color:var(--st-fg,var(--rcc-text,inherit))}
.st-iwwin__tier.is-won{border-color:var(--st-win,var(--rcc-gold,#f5c451));box-shadow:inset 0 3px 0 var(--st-win,var(--rcc-gold,#f5c451))}
.st-iwwin__head{display:grid;gap:2px}
.st-iwwin__head:has(.st-iwwin__pic){grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pic prize" "pic count";column-gap:10px;row-gap:0;align-items:center}
/* the named places only where they exist - a name with no area is put on top of the next one */
.st-iwwin__head:has(.st-iwwin__pic) .st-iwwin__pic{grid-area:pic}
.st-iwwin__head:has(.st-iwwin__pic) .st-iwwin__prize{grid-area:prize}
.st-iwwin__head:has(.st-iwwin__pic) .st-iwwin__count{grid-area:count}
.st-iwwin__pic{width:44px;height:44px;border-radius:9px;object-fit:cover}
.st-iwwin__prize{font:700 15.5px/1.25 var(--st-font-display,var(--rcc-display,inherit));overflow-wrap:anywhere}
.st-iwwin__count{font:600 12.5px/1.3 var(--st-font-body,var(--rcc-body,inherit));color:var(--st-muted,var(--rcc-mute,#666))}
.st-iwwin__names{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px dashed var(--st-line,rgba(0,0,0,.15))}
.st-iwwin__names li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px dashed var(--st-line,rgba(0,0,0,.12));
  font:700 14px/1.3 var(--st-font-body,var(--rcc-body,inherit))}
.st-iwwin__names li>span{min-width:0;overflow-wrap:anywhere}
.st-iwwin__names li>small{flex:none;font-weight:600;font-size:12.5px;color:var(--st-muted,var(--rcc-mute,#666));font-variant-numeric:tabular-nums}
.st-iwwin__names span small{margin-left:4px;padding:1px 6px;border-radius:99px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#2a1d00;background:var(--st-win,var(--rcc-gold,#f5c451))}
.st-iwwin__none{margin:0;padding-top:6px;border-top:1px dashed var(--st-line,rgba(0,0,0,.15));font:700 14px/1.3 var(--st-font-body,var(--rcc-body,inherit));color:var(--st-muted,var(--rcc-mute,#666))}
.st-iwwin__all{justify-self:start;font-size:14px;font-weight:700;color:var(--st-p-text,#b0102a)!important}