/* Spin the Wheel (DECISIONS.md 53). Reads only tokens: the lobby theme (--t-*,
   from the client's lobby.theme) and the wedge colours (--seg0..5, --seg-ink0..5),
   all written onto :root by lobby.js. No client colour is declared here.

   Every class is gw-* (the wheel art's own .wheel-face/.seg-label/.bulb aside):
   an un-namespaced .wheel-tilt here once picked up the lobby's positioning and
   threw the wheel over its own button. Namespaces are the rule, not a style. */

/* ---------- the head: title and line, beside the lobby's Back button ---------- */
.gw-head{ padding:2px 0 10px 52px; min-height:50px; display:flex; flex-direction:column; justify-content:center; }
.gw-headline{ margin:0; font:600 19px/1.15 var(--t-font); letter-spacing:-.3px; color:var(--t-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ink2, not dim: a grey line on a tinted page fails 4.5:1 (founder's phone, 2026-10-03) */
.gw-subline{ margin:2px 0 0; font:400 12.5px/1.35 var(--t-font); color:var(--t-ink2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- the stage: one design canvas, scaled to fit (game.js fit()) ---------- */
.gw-fit{ flex:1; min-height:0; position:relative; margin-bottom:4px; }
.gw-canvas{ position:absolute; left:0; top:0; width:343px; height:490px; border-radius:var(--t-r-card); overflow:hidden;
  isolation:isolate; -webkit-user-select:none; user-select:none; }
.gw-bg{ position:absolute; inset:0; background:linear-gradient(180deg, var(--t-bg2) 0%, color-mix(in srgb, var(--t-bg2) 60%, var(--t-floor)) 62%, var(--t-floor) 100%); }
/* Everything below is placed from the BOTTOM: a taller phone gives the arch more
   sky and never moves the button away from the thumb. The wheel's centre sits
   282px above the bottom edge. */
.gw-bloom{ position:absolute; left:50%; bottom:122px; width:420px; height:320px; margin-left:-210px; border-radius:50%;
  background:radial-gradient(closest-side, var(--t-bloom), transparent); opacity:.9; pointer-events:none; }
.gw-arch{ position:absolute; left:22px; right:22px; top:24px; bottom:128px; border-radius:999px 999px 0 0;
  background:radial-gradient(110% 80% at 50% 12%, var(--t-paper) 0%, var(--t-paper) 52%, color-mix(in srgb, var(--t-paper) 82%, var(--t-bg2)) 100%); }
.gw-floor{ position:absolute; left:0; right:0; bottom:0; height:170px;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--t-floor) 92%, transparent) 22%, var(--t-floor) 60%, color-mix(in srgb, var(--t-floor) 88%, #000) 100%); }
/* the room dims to a spotlight on the wheel while it turns */
.gw-dim{ position:absolute; inset:0; opacity:0; pointer-events:none; z-index:2;
  background:radial-gradient(70% 46% at 50% calc(100% - 282px), transparent 52%, color-mix(in srgb, var(--t-ink) 24%, transparent) 100%); }
.gw-cam{ position:absolute; inset:0; transform-origin:50% calc(100% - 282px); z-index:3; }
.gw-3d{ position:absolute; inset:0; perspective:900px; perspective-origin:50% 30%; }

.gw-tilt{ position:absolute; left:50%; bottom:146px; width:272px; height:272px; margin-left:-136px; z-index:3;
  touch-action:none; cursor:grab; -webkit-tap-highlight-color:transparent; }
.gw-tilt:active{ cursor:grabbing; }
.gw-rot{ position:absolute; inset:0; will-change:transform; }
.gw-rot > svg, .gw-gloss{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.gw-gloss{ pointer-events:none; }
/* the six colours blended round a cone: the wheel's motion blur, shown by speed */
.gw-blur{ position:absolute; left:18.8px; top:18.8px; width:234.4px; height:234.4px; border-radius:50%; opacity:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side, transparent 23%, #000 25%); mask-image:radial-gradient(closest-side, transparent 23%, #000 25%); }
.gw-hit{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.gw-hit path{ fill:#FFF6EC; opacity:0; }
.gw-drop{ position:absolute; left:50%; top:50%; width:30px; height:39px; margin:-24px 0 0 -15px; z-index:5; pointer-events:none; }
.gw-pointer{ position:absolute; left:50%; top:-18px; width:34px; height:46px; margin-left:-17px; z-index:4; pointer-events:none;
  transform-origin:50% 30%; will-change:transform; filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.gw-ring{ position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--t-coin) 60%, transparent); opacity:0; pointer-events:none; }
/* floor reflection: the same cone, flipped and fading into the floor */
.gw-refl{ position:absolute; left:50%; bottom:-92px; width:234px; height:234px; margin-left:-117px; border-radius:50%; opacity:.16;
  transform:scaleY(-1); pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg, transparent 58%, #000 100%); mask-image:linear-gradient(0deg, transparent 58%, #000 100%); }
.gw-contact{ position:absolute; left:50%; bottom:132px; width:210px; height:24px; margin-left:-105px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--t-ink) 30%, transparent), transparent); }

/* the brand's product windows, standing on the floor either side */
.gw-wins{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.gw-win{ position:absolute; bottom:102px; width:76px; height:104px; }
.gw-win.l{ left:10px; } .gw-win.r{ right:10px; }
.gw-win-face{ position:absolute; inset:0; border-radius:38px 38px 10px 10px; overflow:hidden; background:var(--w, var(--t-paper)); transform-origin:50% 100%;
  box-shadow:0 12px 16px -8px color-mix(in srgb, var(--t-ink) 38%, transparent), inset 0 0 0 3px var(--t-paper); }
.gw-win.l .gw-win-face{ transform:rotate(-6deg); } .gw-win.r .gw-win-face{ transform:rotate(5deg); }
.gw-win img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--p, 50% 50%); }
.gw-win-face::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 40%); }

.gw-tara{ position:absolute; right:10px; bottom:200px; width:70px; height:70px; z-index:6; pointer-events:none; will-change:transform; }
.gw-tara svg{ display:block; width:70px; height:70px; }
.gw-sparks{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.gw-spark{ position:absolute; transform-origin:50% 50%; }
.gw-spark path{ fill:var(--t-paper); }
.gw-spark:nth-child(2) path{ fill:color-mix(in srgb, var(--t-floor) 70%, var(--t-ink)); }
/* sparkles thrown off the pointer on a win start at its tip */
.gw-fx{ position:absolute; left:50%; bottom:414px; width:0; height:0; z-index:7; pointer-events:none; }
.gw-fx-p{ position:absolute; left:-9px; top:-9px; overflow:visible; }

.gw-badge{ position:absolute; left:14px; top:14px; z-index:7; height:26px; padding:0 10px; border-radius:999px; display:flex; align-items:center;
  background:var(--t-paper); color:var(--t-badge); font:700 12px/1 var(--t-font); letter-spacing:.1px; white-space:nowrap; }

/* ---------- the button and the hint: on the floor, under the thumb ---------- */
.gw-spin{ position:absolute; left:16px; right:16px; bottom:40px; height:52px; z-index:8; overflow:hidden;
  border:0; border-radius:var(--t-r-btn); cursor:pointer; background:var(--t-btn); color:var(--t-btn-ink);
  font:600 17px/1 var(--t-font); letter-spacing:-.1px;
  box-shadow:0 10px 20px -6px color-mix(in srgb, var(--t-btn) 50%, transparent);
  transition:transform .14s cubic-bezier(.23,1,.32,1), opacity .2s ease; }
.gw-spin:active:not(:disabled){ transform:scale(.97); }
.gw-spin:disabled{ opacity:.55; cursor:default; }
.gw-spin-t{ position:relative; }
.gw-sheen{ position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,236,210,.35), rgba(255,255,255,0)); }
.gw-hint{ position:absolute; left:0; right:0; bottom:13px; margin:0; z-index:8; display:flex; align-items:center; justify-content:center; gap:6px;
  font:500 12.5px/1 var(--t-font); color:var(--t-ink2); pointer-events:none; }
.gw-hint svg{ width:15px; height:15px; flex:none; }

/* ---------- the reveal: the brand's own card, rising out of the wheel ---------- */
.gw-ov{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
.gw-ov[hidden]{ display:none; }
.gw-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--t-ink) 44%, transparent); }
.gw-rays{ position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.gw-rays.is-on{ opacity:1; }
/* the rotation lives on ::before so GSAP can scale the wrapper without fighting
   a CSS animation for ownership of transform */
.gw-rays::before{ content:''; flex:none; width:min(150vw,680px); aspect-ratio:1; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--won, var(--t-coin)) 62%, transparent) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 18%, rgba(0,0,0,.45) 46%, transparent 74%);
          mask-image:radial-gradient(closest-side, #000 18%, rgba(0,0,0,.45) 46%, transparent 74%);
  animation:gwRays 24s linear infinite; }
@keyframes gwRays{ to{ transform:rotate(360deg); } }
.gw-rv{ position:relative; z-index:1; width:min(340px,100%); max-height:100%; overflow:auto; background:var(--t-paper); border-radius:var(--t-r-card);
  padding:22px 20px 14px; text-align:center; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); }
.gw-rv-win{ position:relative; width:132px; height:168px; margin:0 auto 14px; border-radius:66px 66px 18px 18px; overflow:hidden;
  background:var(--w, var(--t-bg2)); box-shadow:inset 0 0 0 3px var(--t-paper), 0 14px 24px -12px color-mix(in srgb, var(--t-ink) 40%, transparent); }
.gw-rv-win img{ display:block; width:100%; height:100%; object-fit:cover; }
.gw-rv-win::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%); pointer-events:none; }
.gw-rv-big{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 8px;
  font:700 46px/1 var(--t-font); letter-spacing:-1.5px; color:var(--t-ink); }
.gw-rv-big small{ display:block; font-size:13px; letter-spacing:0; font-weight:600; margin-top:6px; }
.gw-rv-big.word{ font-size:24px; letter-spacing:-.3px; text-align:center; }
.gw-rv-icon{ position:absolute; right:10px; bottom:10px; z-index:1; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--t-paper); color:var(--t-ink); box-shadow:0 4px 10px -4px rgba(0,0,0,.35); }
.gw-rv-icon svg{ width:18px; height:18px; }
.gw-rv-tara{ position:absolute; left:50%; top:96px; width:84px; height:84px; margin-left:30px; z-index:2; pointer-events:none; }
.gw-rv-tara svg{ display:block; width:84px; height:84px; }
.gw-rv.is-miss .gw-rv-tara{ top:64px; margin-left:-42px; }
.gw-rv-eyebrow{ margin:0; font:600 13px/1.3 var(--t-font); color:var(--t-badge-ink, var(--t-badge)); }
.gw-rv-prize{ margin:2px 0 6px; font:600 26px/1.15 var(--t-font); letter-spacing:-.4px; color:var(--t-ink); text-wrap:balance; }
.gw-rv.is-miss .gw-rv-prize{ font-size:22px; color:var(--t-ink2); }
.gw-rv-msg{ margin:0 0 16px; font:400 13.5px/1.45 var(--t-font); color:var(--t-ink2); }
.gw-rv-claim{ width:100%; height:52px; border:0; border-radius:var(--t-r-btn); cursor:pointer; background:var(--t-btn); color:var(--t-btn-ink);
  font:600 16px/1 var(--t-font); transition:transform .12s cubic-bezier(.23,1,.32,1); }
.gw-rv-claim:active{ transform:scale(.98); }
.gw-rv-claim[hidden]{ display:none; }
.gw-rv-close{ display:block; width:100%; height:44px; margin-top:4px; border:0; background:none; cursor:pointer;
  font:500 14px/1 var(--t-font); color:var(--t-ink2); }

/* ---------- confetti: transform/opacity only ---------- */
.gw-confetti{ position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.gw-cf{ position:absolute; top:42%; left:50%; will-change:transform, opacity; }
.gw-cf > svg{ display:block; }   /* the drop: a plain box is animated, never a bare <svg> (decision 175) */
.gw-flash{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* short phones: the card's window shrinks before anything scrolls */
@media (max-height:620px){
  .gw-rv{ padding-top:16px; }
  .gw-rv-win{ width:104px; height:132px; border-radius:52px 52px 14px 14px; margin-bottom:10px; }
  .gw-rv-big{ font-size:36px; }
  .gw-rv-tara{ top:76px; width:70px; height:70px; }
  .gw-rv-tara svg{ width:70px; height:70px; }
  .gw-rv.is-miss .gw-rv-tara{ top:48px; margin-left:-35px; }
}

@media (prefers-reduced-motion: reduce){
  .gw-rays::before{ animation:none; }
  .gw-spin, .gw-rv-claim{ transition:none; }
  .gw-spin:active:not(:disabled), .gw-rv-claim:active{ transform:none; }
}