/* THE PRIZE WHEEL (prize-stage.js), shared by play.html and display.html. The show is a size container,
   so every size below is a share of its own width and one stylesheet serves a phone and a stadium. */
.pz{ position:relative; container-type:inline-size; width:100%; color:#fff; font-family:'Inter',system-ui,sans-serif; text-align:center; }
.pz-head{ display:flex; flex-direction:column; align-items:center; gap:1cqw; margin-bottom:3cqw; }
.pz-kick{ font-family:"Russo One",sans-serif; font-size:4.2cqw; letter-spacing:.6cqw; color:#ffd23f; }
.pz-for{ font-family:"Russo One",sans-serif; font-size:7cqw; line-height:1.05; }
.pz.big .pz-kick{ font-size:1.8cqw; letter-spacing:.3cqw; } .pz.big .pz-for{ font-size:3.4cqw; } .pz.big .pz-head{ margin-bottom:1.4cqw; }
.pz-stagebox{ position:relative; display:flex; flex-direction:column; align-items:center; }

/* 1. the wheel, in layers. Every size is a share of the frame's width (the wheelbox): the frame's opening
   is 62.3% of it, the disc 64.6% (tucked under the rim), the hub 34%. */
.pz-wheelbox{ position:relative; width:92cqw; aspect-ratio:1; margin:0 auto; }
.pz.big .pz-wheelbox{ width:34cqw; margin:5.8cqw auto 1cqw; }
.pz-wheelbox > *{ position:absolute; pointer-events:none; user-select:none; -webkit-user-select:none; }
.pz-rig{ width:178.6%; left:-39.3%; top:-16.8%; z-index:0; filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.55)); }
.pz-glow{ inset:-12%; border-radius:50%; z-index:0; background:radial-gradient(circle, rgba(255,210,63,.32), rgba(255,170,40,.1) 45%, transparent 68%); }
.pz-disc{ inset:17.7%; z-index:1; border-radius:50%; will-change:transform; }
.pz-svg{ display:block; width:100%; height:100%; overflow:visible; }
.pz-gloss{ inset:18.9%; z-index:2; border-radius:50%;
  background:radial-gradient(ellipse 70% 55% at 34% 24%, rgba(255,255,255,.2), rgba(255,255,255,.04) 55%, transparent 70%),
             radial-gradient(circle, transparent 82%, rgba(0,0,0,.35)); }
.pz-frame{ inset:0; width:100%; height:100%; z-index:3; filter:drop-shadow(0 1.4cqw 2.2cqw rgba(0,0,0,.6)); }
.pz.big .pz-frame{ filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.6)); }
.pz-hub{ left:33%; top:33%; width:34%; height:34%; z-index:4; filter:drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.55)); }
.pz-hub img, .pz-name{ position:absolute; inset:0; width:100%; height:100%; }
.pz-name{ overflow:visible; }
/* the needle hangs from its hinge; its tip reaches the pegs just inside the rim */
.pz-needle{ left:44.15%; top:-4.4%; width:11.7%; z-index:5; transform-origin:50% 12.7%; will-change:transform;
  filter:drop-shadow(0 .8cqw .8cqw rgba(0,0,0,.55)); }
.pz.big .pz-needle{ filter:drop-shadow(0 .35cqw .4cqw rgba(0,0,0,.55)); }
.pz.landed .pz-glow{ animation:pzGlow 1.2s ease-in-out infinite; }
@keyframes pzGlow{ 50%{ opacity:.55; transform:scale(1.04) } }
.pz-ico{ height:1.25em; width:auto; vertical-align:-.25em; filter:drop-shadow(0 .1em .15em rgba(0,0,0,.5)); }

/* 2. the landing, named */
.pz-reveal{ height:0; overflow:visible; opacity:0; }
.pz-reveal b{ display:inline-block; margin-top:4cqw; font-family:"Russo One",sans-serif; font-size:9cqw; color:#ffd23f; text-shadow:0 0 4cqw rgba(255,210,63,.55); }
.pz.big .pz-reveal b{ font-size:4cqw; margin-top:0; }
.pz.t-bonus1 .pz-reveal b{ color:#37d18a; text-shadow:0 0 4cqw rgba(55,209,138,.6); }
.pz.t-bonus2 .pz-reveal b{ color:#c08bff; text-shadow:0 0 4cqw rgba(192,139,255,.7); }
.pz.t-etb .pz-reveal b{ background:linear-gradient(90deg,#ff5a5f,#ffd23f,#37d18a,#4aa3ff,#c08bff,#ff5a5f); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:pzFoil 1.6s linear infinite; }
.pz.landed .pz-reveal{ height:auto; opacity:1; animation:pzPop .5s cubic-bezier(.34,1.56,.64,1); }
.pz-reveal .pz-ico{ height:11cqw; margin:0 2cqw 0 0; vertical-align:-3cqw; animation:pzPackIn .7s cubic-bezier(.3,1.6,.5,1); }
.pz.big .pz-reveal .pz-ico{ height:5cqw; margin-right:1cqw; vertical-align:-1.4cqw; }
@keyframes pzPackIn{ from{ transform:translateY(40%) rotate(-30deg) scale(.3); opacity:0 } }
@keyframes pzPop{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes pzFoil{ to{ background-position:200% 0 } }

/* 4. the reels, and 5. the summary — each takes the wheel's place in turn */
.pz-reels, .pz-summary{ display:none; }
.pz.reeling .pz-wheelbox, .pz.reeling .pz-reveal, .pz.done .pz-wheelbox, .pz.done .pz-reveal{ display:none; }
.pz.reeling .pz-reels{ display:flex; }
.pz.done .pz-summary{ display:block; animation:pzPop .45s ease-out; }
.pz-reels{ gap:3cqw; justify-content:center; width:100%; }
.pz.big .pz-reels{ gap:1.4cqw; }
.pz-col{ flex:1 1 0; max-width:32cqw; }
.pz.big .pz-col{ max-width:20cqw; }
.pz-col-h{ font-family:"Russo One",sans-serif; font-size:3.4cqw; letter-spacing:.3cqw; color:#ffd23f; margin-bottom:1.6cqw; }
.pz.big .pz-col-h{ font-size:1.3cqw; margin-bottom:.7cqw; }
.pz-win{ position:relative; height:42cqw; overflow:hidden; border-radius:3cqw; background:#0b1020;
  box-shadow:inset 0 0 0 .6cqw rgba(255,210,63,.45), 0 1.6cqw 4cqw rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.pz.big .pz-win{ height:16cqw; border-radius:1.2cqw; }
.pz-win::after{ content:''; position:absolute; left:4%; right:4%; top:33.3%; height:33.3%; border-radius:2cqw; pointer-events:none;
  box-shadow:inset 0 0 0 .5cqw rgba(255,210,63,.75); }
.pz-strip{ will-change:transform; }
.pz-cell{ height:14cqw; display:flex; align-items:center; justify-content:center; padding:0 3%; box-sizing:border-box;
  font-family:"Russo One",sans-serif; font-size:4.6cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pz.big .pz-cell{ height:5.333cqw; font-size:2cqw; }
.pz-col.stopped .pz-win{ box-shadow:inset 0 0 0 .8cqw #ffd23f, 0 0 5cqw rgba(255,210,63,.55); animation:pzPop .4s ease-out; }
.pz-sum-h{ font-family:"Russo One",sans-serif; font-size:4.4cqw; letter-spacing:.6cqw; color:#ffd23f; margin-bottom:2.4cqw; }
.pz.big .pz-sum-h{ font-size:1.8cqw; margin-bottom:1cqw; }
/* a dark panel, so the list reads over whatever is behind it (the stadium, on the big screen) */
.pz-summary, .pz-reels{ box-sizing:border-box; }
.pz-summary{ width:100%; max-width:92cqw; margin:0 auto; padding:4cqw; border-radius:4cqw; background:rgba(9,12,22,.86);
  border:1px solid rgba(255,210,63,.3); box-shadow:0 2cqw 6cqw rgba(0,0,0,.5); }
.pz.big .pz-summary{ max-width:50cqw; padding:1.8cqw; border-radius:1.6cqw; }
.pz.big .pz-reels{ padding:1.6cqw; border-radius:1.6cqw; background:rgba(9,12,22,.7); width:auto; }
.pz-row{ display:flex; justify-content:space-between; align-items:center; gap:3cqw; padding:2.6cqw 4cqw; margin-bottom:1.6cqw; border-radius:3cqw;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); font-size:4.8cqw; font-weight:800; text-align:left; }
.pz.big .pz-row{ padding:1cqw 1.6cqw; margin-bottom:.7cqw; border-radius:1.2cqw; font-size:2cqw; }
.pz-row b{ font-family:"Russo One",sans-serif; color:#ffd23f; white-space:nowrap; }
.pz-row.win{ background:rgba(255,210,63,.12); border-color:rgba(255,210,63,.45); }
.pz.t-etb .pz-row.win b{ background:linear-gradient(90deg,#ff5a5f,#ffd23f,#37d18a,#4aa3ff,#c08bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pz-row.none{ justify-content:center; color:#8c93a8; font-weight:700; }
.pz-you{ margin-top:3cqw; font-family:"Russo One",sans-serif; font-size:6.4cqw; color:#37d18a; text-shadow:0 0 3cqw rgba(55,209,138,.55); animation:pzPulse 1s ease-in-out infinite; }
@keyframes pzPulse{ 50%{ transform:scale(1.06) } }

/* 3. the BONUS splash — each rarer outcome a step louder */
.pz-splash{ position:absolute; inset:-4cqw; z-index:6; display:none; align-items:center; justify-content:center; pointer-events:none; }
.pz.splash .pz-splash{ display:flex; }
.pz-sp{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2cqw; animation:pzSlam .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes pzSlam{ from{ transform:scale(3); opacity:0 } to{ transform:none; opacity:1 } }
.pz-sp b{ position:relative; z-index:2; font-family:"Russo One",sans-serif; font-size:15cqw; line-height:1; }
.pz.big .pz-sp b{ font-size:7cqw; }
.pz-sp span{ position:relative; z-index:2; font-size:4.6cqw; font-weight:800; }
.pz.big .pz-sp span{ font-size:2cqw; }
/* the BONUS banner pops in with a bounce; the prize is lettered on its ribbon */
.pz-sp.b1, .pz-sp.b2{ animation:none; gap:0; }
.pz-ban{ position:relative; z-index:2; width:88cqw; animation:pzBan .8s cubic-bezier(.2,1.5,.4,1) both; }
.pz.big .pz-ban{ width:40cqw; }
.pz-ban img{ display:block; width:100%; height:auto; filter:drop-shadow(0 1.4cqw 2cqw rgba(0,0,0,.6)); }
.pz-ban svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
@keyframes pzBan{ 0%{ transform:scale(0) rotate(-8deg); opacity:0 } 55%{ transform:scale(1.16) rotate(2deg); opacity:1 } 75%{ transform:scale(.95) } 100%{ transform:none; opacity:1 } }
.pz-sp .pz-double{ z-index:3; margin-bottom:-3cqw; font-size:14cqw; color:#fff; letter-spacing:.6cqw;
  text-shadow:0 0 3cqw #ff7ad9, 0 0 7cqw #9b5cff, 0 1cqw 0 #5a1fa0; animation:pzSlam .5s .3s cubic-bezier(.2,1.6,.4,1) both, pzFlash .35s .8s steps(2) 4; }
.pz.big .pz-sp .pz-double{ font-size:6cqw; margin-bottom:-1.2cqw; letter-spacing:.3cqw; }
/* the packs themselves fly in under the banner, fanned like a hand of cards */
.pz-fly{ position:relative; z-index:3; display:flex; justify-content:center; height:24cqw; margin:-4cqw 0 1cqw; }
.pz.big .pz-fly{ height:10cqw; margin:-1.6cqw 0 .5cqw; }
.pz-fly img{ height:100%; width:auto; margin:0 -2.4cqw; transform-origin:50% 130%;
  transform:rotate(calc(-10deg + (var(--i) - (var(--n) - 1) / 2) * 16deg));
  filter:drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.6)) drop-shadow(0 0 2cqw rgba(255,210,63,.45));
  animation:pzFly .9s cubic-bezier(.25,1.45,.5,1) both; animation-delay:calc(.35s + var(--i) * .16s); }
.pz.big .pz-fly img{ margin:0 -1cqw; }
@keyframes pzFly{ from{ transform:translateY(140%) rotate(-220deg) scale(.2); opacity:0 } }
.pz-sp > span{ text-shadow:0 .3cqw .6cqw rgba(0,0,0,.7); }
.pz-sp.etb .pz-etb-more{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; margin-top:1cqw; }
.pz-sp.etb .pz-ban{ width:70cqw; animation-delay:1.5s; }
.pz.big .pz-sp.etb .pz-ban{ width:30cqw; }
.pz-sp.etb .pz-fly{ height:20cqw; }
.pz.big .pz-sp.etb .pz-fly{ height:8.5cqw; }
.pz-sp.etb .pz-fly img{ animation-delay:calc(1.85s + var(--i) * .16s); }
.pz-rays{ position:absolute; left:50%; top:50%; width:170cqw; aspect-ratio:1; transform:translate(-50%,-50%); z-index:0; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,210,63,.28) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask-image:radial-gradient(circle, #000 18%, transparent 62%); mask-image:radial-gradient(circle, #000 18%, transparent 62%);
  animation:pzSpin 9s linear infinite; }
@keyframes pzSpin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
.pz-sp.b1 b{ color:#ffd23f; text-shadow:0 0 5cqw rgba(255,210,63,.8), 0 1cqw 0 #8a5a00; }
.pz-sp.b2 b{ color:#fff; text-shadow:0 0 3cqw #ff7ad9, 0 0 7cqw #9b5cff, 0 1cqw 0 #5a1fa0; animation:pzFlash .35s steps(2) 4; }
.pz-sp.b2 .pz-rays{ background:repeating-conic-gradient(rgba(192,139,255,.35) 0deg 7deg, rgba(255,122,217,.18) 7deg 14deg, transparent 14deg 22deg); animation-duration:4s; }
@keyframes pzFlash{ 50%{ filter:brightness(2.2) } }
/* ETB: the room goes dark, foil lettering, two counter-rotating ray fields, the box rises */
.pz-sp.etb b{ font-size:11cqw; background:linear-gradient(90deg,#ff5a5f,#ffd23f,#37d18a,#4aa3ff,#c08bff,#ff7ad9,#ff5a5f); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 2.4cqw rgba(255,255,255,.55));
  animation:pzFoil 1.2s linear infinite, pzPulse .8s ease-in-out infinite; }
.pz.big .pz-sp.etb b{ font-size:5.6cqw; }
.pz-sp.etb .pz-rays{ background:repeating-conic-gradient(rgba(255,90,95,.3) 0deg 6deg, rgba(255,210,63,.3) 6deg 12deg, rgba(55,209,138,.3) 12deg 18deg, rgba(74,163,255,.3) 18deg 24deg, transparent 24deg 30deg);
  animation-duration:5s; }
.pz-sp.etb .pz-rays.two{ animation-direction:reverse; animation-duration:7s; opacity:.6; }
.pz-etb{ position:relative; z-index:2; width:34cqw; aspect-ratio:1.35; animation:pzRise 1.1s cubic-bezier(.2,1.3,.4,1); }
.pz.big .pz-etb{ width:15cqw; }
@keyframes pzRise{ from{ transform:translateY(60%) scale(.4) rotate(-12deg); opacity:0 } to{ transform:none; opacity:1 } }
.pz-etb-body{ position:absolute; inset:18% 0 0; border-radius:4%; display:grid; place-items:center;
  background:linear-gradient(135deg,#1a2f6b,#3a5fd1 40%,#ffd23f 41%,#ffd23f 47%,#3a5fd1 48%,#1a2f6b);
  box-shadow:0 0 6cqw rgba(255,210,63,.75), inset 0 0 0 .8cqw rgba(255,255,255,.35); }
.pz-etb-body span{ font-family:"Russo One",sans-serif; font-size:4.2cqw; line-height:1; color:#fff; text-shadow:0 .4cqw 0 rgba(0,0,0,.4); }
.pz.big .pz-etb-body span{ font-size:1.8cqw; }
.pz-etb-lid{ position:absolute; left:-3%; right:-3%; top:0; height:24%; border-radius:6% 6% 3% 3%;
  background:linear-gradient(90deg,#ffd23f,#fff3b0,#ffd23f); box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.35); animation:pzLid 1.4s .6s ease-in-out infinite; }
@keyframes pzLid{ 50%{ transform:translateY(-14%) rotate(-3deg) } }
.pz.shake{ animation:pzShake .5s ease-in-out 2; }
.pz.shake-big{ animation:pzShakeBig .45s ease-in-out 5; }
@keyframes pzShake{ 20%{ transform:translate(-1cqw,.5cqw) } 40%{ transform:translate(1cqw,-.5cqw) } 60%{ transform:translate(-.6cqw,-.4cqw) } 80%{ transform:translate(.6cqw,.4cqw) } }
@keyframes pzShakeBig{ 20%{ transform:translate(-2cqw,1cqw) rotate(-.6deg) } 40%{ transform:translate(2cqw,-1cqw) rotate(.6deg) } 60%{ transform:translate(-1.2cqw,-.8cqw) } 80%{ transform:translate(1.2cqw,.8cqw) } }

/* behind a splash, the room dims (for the ETB, goes dark); the bursts fly between it and the banner */
.pz-dim{ position:absolute; inset:-100vmax; z-index:4; display:none; pointer-events:none;
  background:radial-gradient(circle 48vmax, rgba(6,8,20,.25), rgba(6,8,20,.75)); }
.pz.splash .pz-dim{ display:block; animation:pzFade .4s ease-out; }
.pz.t-etb.splash .pz-dim{ background:radial-gradient(circle 38vmax, rgba(10,6,24,.4), rgba(4,2,10,.95)); }
@keyframes pzFade{ from{ opacity:0 } }
.pz-burst{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:visible; }
.pz-bp{ position:absolute; left:0; top:0; width:1.6cqw; height:2.8cqw; border-radius:.4cqw; will-change:transform; }
.pz-bp.sq{ width:2cqw; height:2cqw; border-radius:50%; }
.pz.big .pz-bp{ width:.65cqw; height:1.15cqw; } .pz.big .pz-bp.sq{ width:.8cqw; height:.8cqw; }
.pz.thud{ animation:pzThud .4s ease-out; }
@keyframes pzThud{ 25%{ transform:translateY(.9cqw) } 50%{ transform:translate(-.5cqw,-.3cqw) } 75%{ transform:translate(.3cqw,.2cqw) } }
.pz.big.thud{ animation-name:pzThudBig; }
@keyframes pzThudBig{ 25%{ transform:translateY(.4cqw) } 50%{ transform:translate(-.25cqw,-.15cqw) } 75%{ transform:translate(.15cqw,.1cqw) } }

/* confetti */
.pz-fx{ position:absolute; inset:-10cqw 0 0; pointer-events:none; overflow:visible; z-index:7; }
.pz-cf{ position:absolute; top:-4cqw; width:2.2cqw; height:1.2cqw; border-radius:.3cqw; animation:pzFall linear forwards; }
.pz.big .pz-cf{ width:.9cqw; height:.5cqw; }
@keyframes pzFall{ to{ transform:translate(var(--dx), 160cqw) rotate(var(--rot)); opacity:.2 } }
.pz.big .pz-cf{ animation-name:pzFallBig; }
@keyframes pzFallBig{ to{ transform:translate(var(--dx), 62cqw) rotate(var(--rot)); opacity:.2 } }

@media (prefers-reduced-motion: reduce){ .pz-rays, .pz.shake, .pz.shake-big, .pz-you{ animation:none !important; } }

/* the phone's frame. The show measures itself by its own width (a size container), so it must be GIVEN
   one: in the phone's centred column it would otherwise shrink to nothing and draw nothing. */
.pz-host{ width:100%; max-width:520px; align-self:center; }

/* the big screen's frame */
#prizeArena{ position:fixed; inset:0; z-index:57; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 75% 70% at 50% 48%, transparent 40%, rgba(2,4,12,.72)); }
#prizeArena.hidden{ display:none; }
.prize-wrap{ width:min(94vw, 160vh, 1700px); }