/* ─── The wheel of fortune, /wheel ────────────────────────────────────────
   The same campaign as the mini game, not a second one. Everything structural
   comes from style.css: the LEC navy ground, the smoke plate, the gold diamond
   CTA artwork, the chevron nameplate, Nexa, the sign-up field treatment, the
   on-screen keyboard and the daylight theme. This file adds the wheel and
   nothing else.

   The wheel itself is the one place that needs more than navy and gold. A wheel
   reads as a wheel because neighbouring slices differ, so the slices use four
   campaign colours rather than two: Euronics yellow for the chests, Euronics
   blue for the stickers, the campaign orange for the skins, and white for the
   free turns.
   ---------------------------------------------------------------------- */

.wmain {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.2rem var(--gutter);
}

.wscreen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.wscreen.is-active { display: flex; }

/* The title block carries the campaign's gold arc, centred on it the same way
   the game's does, including the correction for the artwork not being centred
   inside its own SVG. */
/* The gold arc frames the title block, and is sized from that block's HEIGHT
   rather than from the page width.
   Two things went wrong before. Anchored on the two lines of the heading alone
   it was three times taller than the words and its top ran up under the lock-up
   bar, so it read as drifting rather than framing. Sized from the viewport it
   changed shape every time the copy changed length. Sizing it off the block it
   surrounds keeps it centred on that block at any width and in either language.

   The transform cancels the artwork not being centred inside its own SVG: its
   ink sits 3.46% left and 2.01% below the file's centre, the same correction
   the game's title block carries. */
/* The arc frames the TITLE, and its box hugs the title.
   Two separate mistakes, both visible and both fixed here. Anchored on the
   block that also holds the standfirst, the arc's middle landed between the
   heading and the sentence under it, so it sat about 45px low. And as a full
   width block it centred on the grid column rather than on the words, which in
   landscape put it a couple of hundred pixels right of the title it frames.

   `width: fit-content` on the heading solves the horizontal case in every
   layout, portrait or landscape, French or English, because the box is the
   words. Hanging the arc off the heading alone solves the vertical one.

   The transform cancels the artwork not being centred inside its own SVG: its
   ink sits 3.46% left and 2.01% below the file's centre, the same correction
   the game's title block carries. Measured from pixels afterwards, not
   assumed: the gold ink lands within a pixel of the type's centre. */
.wtitle { position: relative; }
.whero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 250%;
  aspect-ratio: 911 / 722;
  transform: translate(calc(-50% + 3.46%), calc(-50% - 2.01%));
  background: url("../assets/brand/bg-kv.svg") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
/* Room for the arc's top, which reaches above the words it frames. */
#w-signup.is-active { padding-top: 1.4rem; }
[data-theme="day"] .whero::before { opacity: 0.62; }

/* One rule, not two. There used to be a second `.whero` block further down
   whose `margin: 0 0 0.8rem` shorthand quietly reset the auto side margins set
   above it, so the heading hugged the left of its column while the standfirst
   under it was centred, by about 110px in landscape. A shorthand resets the
   longhands it covers; keeping the heading in one place is what stops that
   happening again.

   `width: fit-content` matters beyond the centring: the arc hangs off this box,
   so the box has to be the words. */
.whero {
  position: relative;
  width: fit-content;
  margin: 0 auto 0.8rem;
  color: var(--ink-strong);
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 0.94;
  text-transform: uppercase;
  text-shadow: 0 0 70px rgba(29, 66, 138, 0.7);
}
[data-theme="day"] .whero { text-shadow: none; }

.wlede {
  max-width: 28rem;
  /* Auto side margins, because the heading above it has them: the heading is
     `width: fit-content` so the gold arc can centre on the words, and a capped
     box with no auto margins next to a centred one puts the two on different
     axes. Centred text inside a left hugging box is not centred on the page. */
  margin: 0 auto 1.2rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.wlede strong { color: var(--gold); font-weight: 900; }
[data-theme="day"] .wlede strong { color: var(--gold-ink); }

/* ─── The prize pile ──────────────────────────────────────────────────────
   The prizes, shown rather than listed. Absolutely positioned inside a box with
   a fixed aspect ratio, so the whole arrangement scales with one number and the
   overlaps hold at any width: a flex or grid version reflows and the pile stops
   being a pile.

   Every piece is artwork on transparency or a squared crop with its own frame,
   which is what lets the same pile sit on navy and on white. Nothing here
   depends on the page colour except the card edges.

   Sources: the four champion crops come from Riot's own Data Dragon loading
   art, the chest and key from Community Dragon's loot assets, and the stickers
   are the production print files. All self-hosted, because the CSP allows no
   external image origin.
   ---------------------------------------------------------------------- */

.wpile {
  position: relative;
  width: min(26rem, 90%);
  /* Taller than the artwork looks, because the pieces are positioned from their
     top edge and the lowest ones are rotated: a box sized to what the pile
     appears to need lets the bottom stickers spill onto the sign-up form, which
     is what 16/10 and then 1/0.78 both did. Measured, not eyeballed. */
  aspect-ratio: 1 / 0.86;
  margin: 0 auto 1.1rem;
}

.wp {
  position: absolute;
  display: block;
  /* Every piece carries width and height attributes so the layout does not jump
     while they load. Once CSS sets a width, the height attribute has to be
     released or the piece is stretched to it, which is what squashed the chest
     into a rectangle. */
  height: auto;
  /* The pile is read as one object, so every piece casts the same shadow and
     sits at the same remove from the page. */
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55));
}
[data-theme="day"] .wp { filter: drop-shadow(0 5px 12px rgba(5, 0, 25, 0.3)); }

/* Champion crops are rectangles, so they get the campaign's clipped corner and
   a gold edge: without a frame a photographic crop on navy reads as a mistake.
   They fan out behind everything else. */
.wp-skin {
  width: 25%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--gold);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.wp-skin.is-1 { left:  2%; top:  8%; transform: rotate(-11deg); z-index: 2; }
.wp-skin.is-2 { left: 21%; top:  0%; transform: rotate(-4deg);  z-index: 3; }
.wp-skin.is-3 { left: 52%; top:  0%; transform: rotate(4deg);   z-index: 3; }
.wp-skin.is-4 { left: 72%; top:  8%; transform: rotate(11deg);  z-index: 2; }

/* The chest is what a third of players walk away with, so it is the biggest
   piece and it sits in front of the cards. */
.wp-chest { width: 33%; left: 33%; top: 28%; z-index: 6; }
.wp-key   { width: 19%; left: 61%; top: 26%; transform: rotate(20deg); z-index: 5; }

/* Stickers scatter across the front. They are die cut, so they overlap
   everything without needing a frame of their own. */
/* Anchored from the BOTTOM, not the top.
   Positioned from the top, a piece's own height decides where it ends, and a
   portrait sticker in a narrower box ended 66px below the container and landed
   on the sign-up form. From the bottom the box contains them whatever their
   proportions, which is the edge that matters. */
.wp-sticker { width: 19%; height: auto; top: auto; z-index: 7; }
.wp-sticker.is-1 { left:  1%; bottom: 22%; transform: rotate(-14deg); }
.wp-sticker.is-2 { left: 17%; bottom:  4%; transform: rotate(8deg);   }
.wp-sticker.is-3 { left: 41%; bottom:  0%; transform: rotate(-5deg); width: 16%; }
.wp-sticker.is-4 { left: 60%; bottom:  4%; transform: rotate(12deg);  }
.wp-sticker.is-5 { left: 78%; bottom: 22%; transform: rotate(15deg);  }

/* The union of every piece is measured against the container in QA, because a
   piece that overhangs the box lands on the sign-up form underneath it and
   nothing in CSS complains. */

.wform { max-width: 26rem; }

.wsmall {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.weyebrow {
  margin: 0 0 0.5rem;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
[data-theme="day"] .weyebrow { color: var(--gold-ink); }

/* The sign-up fields. Sized here because style.css sizes the game's by id, so
   #w-name and #w-email match none of it; the look is the game's. */
#w-name,
#w-email {
  user-select: text;
  flex: 1 1 100%;
  min-width: 0;
  height: 3.6rem;
  padding: 0 1rem;
  background: rgba(10, 16, 36, 0.9);
  border: 0;
  border-bottom: 2px solid rgba(216, 226, 240, 0.28);
  color: var(--ink-strong);
  font: 900 1rem/1 var(--font);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color .15s;
}
#w-email { font-weight: 400; letter-spacing: 0.03em; text-transform: none; }
#w-name::placeholder,
#w-email::placeholder {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#w-name:focus,
#w-email:focus { outline: none; border-bottom-color: var(--gold); }
[data-theme="day"] #w-name,
[data-theme="day"] #w-email {
  background: var(--surface-2);
  border-bottom-color: rgba(5, 0, 25, 0.45);
}
[data-theme="day"] #w-name:focus,
[data-theme="day"] #w-email:focus { border-bottom-color: var(--gold-ink); }

/* Sized for a fingertip on a tablet, not a mouse pointer. */
.wheel-page .consent input { width: 1.7rem; height: 1.7rem; }

/* ─── The wheel itself ────────────────────────────────────────────────── */

.wstage {
  display: grid;
  place-items: center;
  width: 100%;
  /* Clearance for the pointer, which bites into the rim from above. */
  padding-top: 1.6rem;
}

.wwheel-wrap {
  position: relative;
  width: min(72vh, 92vw, 34rem);
  aspect-ratio: 1;
}

.wwheel {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  /* The rim is CSS rather than canvas so it stays crisp at any device pixel
     ratio, and it is the campaign's gold on the campaign's blue. */
  box-shadow:
    0 0 0 6px var(--gold),
    0 0 0 11px var(--blue),
    0 18px 50px rgba(0, 0, 0, 0.55);
  transform: rotate(0deg);
}
/* A long tail rather than a linear stop: a wheel that decelerates evenly reads
   as motorised, and the last three slices are where the whole effect lives. */
.wwheel.is-spinning {
  transition: transform var(--w-spin-ms, 5200ms) cubic-bezier(0.12, 0.72, 0.1, 1);
}

.wpointer {
  position: absolute;
  top: -2.2%;
  left: 50%;
  width: 9%;
  height: 13%;
  transform: translateX(-50%);
  background: var(--gold);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
  z-index: 3;
}

/* The spin button, under the wheel.
   It used to be a disc at the hub. A hub covers the point where sixteen slices
   meet, which is the thing that makes a wheel look like a wheel, and it put a
   second button style on a site that already has one. This is the campaign's
   own CTA artwork, the same button as everywhere else. */
.wgo {
  margin-top: 1.4rem;
  font-size: 1rem;
  padding: 0 2.4rem;
}
.wgo[disabled] { opacity: 0.5; pointer-events: none; animation: none; }
/* A slow pulse, so an iPad left alone on a plinth still looks like it wants a
   press. It stops the moment the wheel turns. */
.wgo:not([disabled]) { animation: wgo-pulse 2.4s ease-in-out infinite; }
@keyframes wgo-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.12); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .wgo:not([disabled]) { animation: none; } }

/* The status line sits on the campaign's chevron plate, the same furniture the
   game uses for its prompt. */
.wstatus {
  display: inline-block;
  min-height: 3rem;
  margin: 1.2rem 0 0;
  padding: 0 1.4rem;
  border: 0 solid transparent;
  border-left-width: 2.2rem;
  border-right-width: 2.2rem;
  border-image: url("../assets/brand/nameplate.svg") 0 40 fill / 0 2.2rem / 0 stretch;
  color: var(--body);
  font-weight: 900;
  font-size: 0.78rem;
  line-height: 3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.wstatus.is-on { opacity: 1; }
[data-theme="day"] .wstatus { color: #FFFFFF; }

/* ─── The result ──────────────────────────────────────────────────────── */

/* ─── The prize, shown ────────────────────────────────────────────────────
   The name alone is a line of text after five seconds of a spinning wheel. The
   picture is the payoff, so it lands first and the name reads as its caption.
   Sized off the viewport height because the result screen has a button under
   it and this runs on a totem where that button has to stay in reach.
   ---------------------------------------------------------------------- */

.wwon {
  position: relative;
  display: grid;
  place-items: center;
  width: min(15rem, 46vw);
  height: min(15rem, 22vh);
  margin: 0 0 1rem;
  /* Lands rather than appears, and slightly ahead of the name under it. */
  animation: wwon-in .6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.wwon[hidden] { display: none; }

.wwon-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
[data-theme="day"] .wwon-img { filter: drop-shadow(0 10px 26px rgba(5, 0, 25, 0.3)); }

/* A champion crop is a photograph, so it takes the campaign's frame. A sticker
   and a chest are cut out and stand on their own. */
.wwon-img.is-framed {
  width: min(11rem, 20vh);
  height: min(11rem, 20vh);
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--gold);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* The chest prize is a chest AND a key, so the key comes with it. */
.wwon-key {
  position: absolute;
  right: -4%;
  bottom: 2%;
  width: 38%;
  height: auto;
  transform: rotate(18deg);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  animation: wwon-in .6s .18s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.wwon-key[hidden] { display: none; }

@keyframes wwon-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(18px); }
  100% { opacity: 1; transform: none; }
}
/* The key keeps its angle through the entrance. */
@keyframes wwon-key-in {
  0%   { opacity: 0; transform: rotate(18deg) scale(0.5); }
  100% { opacity: 1; transform: rotate(18deg) scale(1); }
}
.wwon-key { animation-name: wwon-key-in; }

@media (prefers-reduced-motion: reduce) {
  .wwon, .wwon-key { animation: none; }
}

.wprize {
  margin: 0 0 1.2rem;
  max-width: 22rem;
  color: var(--ink-strong);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 0 60px rgba(241, 196, 0, 0.35);
  animation: wprize-in .55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
[data-theme="day"] .wprize { text-shadow: none; }

@keyframes wprize-in {
  0%   { opacity: 0; transform: scale(0.6) translateY(14px); }
  100% { opacity: 1; transform: none; }
}

/* The ornate campaign frame, the same one the game's score panel uses. */
.wcard {
  width: 100%;
  max-width: 24rem;
  padding: 0.9rem 0.8rem;
  border: 2.4rem solid transparent;
  border-image: url("../assets/brand/panel-frame.svg") 120 fill / 2.4rem / 0 stretch;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(241, 196, 0, 0.12), transparent 72%),
    linear-gradient(170deg, rgba(29, 66, 138, 0.3), rgba(10, 16, 36, 0.92));
  background-origin: border-box;
  animation: wprize-in .5s .12s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.wcard[hidden] { display: none; }
/* On white the frame's gold-only ink disappears and its slices band, both tried
   on the game's panels. Same answer here: the motif without the 9-slice. */
[data-theme="day"] .wcard {
  border-width: 0;
  border-image: none;
  padding: 1.4rem 1.2rem;
  background: linear-gradient(170deg, #21498F, #14264F);
  box-shadow: inset 0 0 0 3px var(--gold);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.wcard-label {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wcode, .wclaim {
  margin: 0;
  color: var(--white);
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}
.wclaim { font-size: 2.2rem; letter-spacing: 0.2em; color: var(--gold); }
.wcard-note {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
[data-theme="day"] .wcard-label,
[data-theme="day"] .wcard-note { color: #B9C6DC; }

#w-done { margin-top: 1.4rem; }

/* ─── The win burst ───────────────────────────────────────────────────────
   Every spin wins something, so this fires on every reveal and has to be worth
   seeing two hundred times. Forty plain divs animating transform and opacity,
   which the compositor handles off the main thread: a canvas particle system
   would be competing with the wheel's own canvas for the same frame budget.
   ---------------------------------------------------------------------- */

.wburst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.wconfetti {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 12px;
  height: 18px;
  opacity: 0;
  will-change: transform, opacity;
  animation: wconfetti-fly var(--w-dur, 1500ms) var(--w-delay, 0ms) cubic-bezier(0.15, 0.6, 0.35, 1) forwards;
}

@keyframes wconfetti-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--w-x)), calc(-50% + var(--w-y)))
                    rotate(var(--w-spin-deg)) scale(1); }
}

/* One ring pushing out from the middle, under the confetti: it is what makes
   the burst read as a single event rather than forty specks. */
.wring {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 20vmin;
  height: 20vmin;
  margin: -10vmin 0 0 -10vmin;
  border: 4px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: wring-out 900ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes wring-out {
  0%   { opacity: 0.9; transform: scale(0.2); }
  100% { opacity: 0;   transform: scale(3.4); }
}

@media (prefers-reduced-motion: reduce) {
  .wburst { display: none; }
  .wwheel.is-spinning { transition-duration: 600ms; }
}

/* ─── Shape for an iPad ───────────────────────────────────────────────────
   Landscape is the orientation a wheel on a plinth ends up in, and there a
   full-width column wastes the sides. The wheel's size is driven by height,
   which is the scarce axis in landscape, so the copy moves beside it.
   ---------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 46rem) {
  .wmain { max-width: 62rem; }

  #w-signup { display: none; }
  /* Two columns, and the copy stays CENTRED inside its own. Left aligning it
     here was the one place the page did not read as one design: the title, the
     standfirst and the pile all sat against the left edge of the column while
     the form beside them was centred, and the gold arc is centred on the words
     by construction, so the block looked like it had drifted. */
  #w-signup.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }
  #w-signup.is-active .wtitle,
  #w-signup.is-active .wpile { grid-column: 1; }
  /* The column is half the page here, and the copy stacks title, standfirst and
     pile inside it while the form sits alongside. Measured: at 21rem the stack
     was 150px taller than the viewport on a wide screen, so the page scrolled
     on the one screen where nothing should. */
  #w-signup.is-active .wpile { width: min(16rem, 100%); margin-inline: auto; }
  #w-signup.is-active .whero { font-size: 2.9rem; }
  #w-signup.is-active .wlede { font-size: 0.98rem; }
  #w-signup.is-active .wform,
  #w-signup.is-active .wsmall {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
  #w-signup.is-active .wsmall { grid-row: 4; text-align: center; }

  .wwheel-wrap { width: min(76vh, 46vw, 34rem); }
}

/* The on-screen keyboard is 14rem of keys. On an iPad in landscape that is most
   of the screen, so while it is open the page gives up the title block, the
   same way the totem does. */
@media (orientation: landscape) and (max-height: 56rem) {
  body.is-typing.wheel-page .wtitle,
  body.is-typing.wheel-page .wpile,
  body.is-typing.wheel-page .wsmall { display: none; }
  body.is-typing.wheel-page #w-signup.is-active { grid-template-columns: 1fr; }
  body.is-typing.wheel-page #w-signup.is-active .wform { grid-column: 1; grid-row: 1; }
  body.is-typing.wheel-page .wmain { justify-content: flex-start; padding-top: 0.5rem; }
}

/* ─── The wheel on a portrait totem ───────────────────────────────────────
   The wheel runs on the 43 inch totems and the mini game moved to the iPads,
   so the wheel inherits the problem the game had: content centred in a
   1080x1920 viewport puts the thing you touch at 75 to 84% of the way down the
   glass, which is hip height on a screen that starts near the knee.

   Same answer as `style.css` gives the game, and the same thresholds, so the
   two pages agree about what a totem is: taller than 3:4 and at least 1100px,
   which catches every totem and no phone. Everything given back is spacing,
   never the size of a thing a hand uses.
   ---------------------------------------------------------------------- */
@media (max-aspect-ratio: 3 / 4) and (min-height: 1100px) {
  .wmain { padding-top: 0.6rem; }

  /* Top-anchored rather than centred in a shortened box: centring only lifts by
     half of what it reserves, and reaching the upper half that way needs more
     room than the screen has. The empty glass ends up at the bottom, where
     nobody can reach anyway. */
  .wscreen { justify-content: flex-start; }

  /* Each screen reserves what it can afford. The sign-up column is the tall one
     (title, standfirst, the prize pile, two fields, a consent line, a button
     and the small print), so it is compressed rather than lifted: reserving the
     full band there pushed the button off the bottom of the glass. */
  #w-signup.is-active { padding-bottom: 5vh; }
  #w-signup.is-active .whero { font-size: 2.7rem; }
  #w-signup.is-active .wlede { font-size: 0.98rem; margin-bottom: 0.8rem; }
  #w-signup.is-active .wpile { width: min(18rem, 70%); margin-bottom: 0.8rem; }
  #w-signup.is-active .wsmall { margin-top: 0.6rem; font-size: 0.72rem; }

  /* The wheel is sized off the height it is given, so it takes what the reach
     band leaves rather than the whole screen. */
  .wwheel-wrap { width: min(50vh, 86vw, 30rem); }
  .wgo { margin-top: 1.1rem; }
  #w-play.is-active { padding-top: 1vh; padding-bottom: 16vh; }

  /* The result is read, not touched, apart from one button. Its reserve was set
     before the prize artwork existed; a digital win also carries the code card,
     and at 26vh that combination ran 177px past the bottom. Measured, not
     guessed. */
  #w-result.is-active { padding-bottom: 14vh; justify-content: center; }
  #w-result.is-active .wwon { height: min(13rem, 17vh); margin-bottom: 0.8rem; }
  #w-result.is-active .wwon-img.is-framed { width: min(9.5rem, 16vh); height: min(9.5rem, 16vh); }
  #w-result.is-active .wprize { font-size: 2.1rem; margin-bottom: 0.9rem; }
}