/* Colors (--bg, --ink, --accent, --gold, --seg0..5, etc.) are NOT defined
   here — they're set on :root at runtime by lobby.js from the active
   client's config. This file only ever reads var(--token); it never
   declares a client color, so the exact same CSS reskins for every
   client with zero edits. */

.game-spin-wheel{ display:flex; flex-direction:column; align-items:center; }

.gw-headline{
  font-family:'Bungee',system-ui,sans-serif; font-weight:400;
  font-size:clamp(20px,6.2vw,30px); text-align:center; margin:4px 0 2px;
  text-wrap:balance; letter-spacing:.3px; color:var(--ink);
  animation:fadeUp .5s ease-out both;
}
.gw-subline{
  font-size:13px; color:var(--ink-dim); text-align:center; margin:0 0 18px; max-width:320px;
  animation:fadeUp .5s ease-out both .08s;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- 3D wheel scene ---------- */
.wheel-scene{
  position:relative; width:min(320px,84vw); perspective:1100px; margin-top:6px;
  animation:sceneIn .8s cubic-bezier(.2,1.2,.4,1) both .1s;
}
@keyframes sceneIn{ from{ opacity:0; transform:scale(.85);} to{ opacity:1; transform:scale(1);} }

.wheel-floor{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:78%; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%);
  filter:blur(2px);
}
.wheel-tilt{ transform:rotateX(22deg); transform-style:preserve-3d; animation:idleWobble 5s ease-in-out infinite; }
.wheel-tilt.spinning{ animation:none; }
@keyframes idleWobble{
  0%,100%{ transform:rotateX(22deg) rotateZ(0deg); }
  50%{ transform:rotateX(22deg) rotateZ(2deg); }
}
.wheel-rim{
  position:relative; border-radius:50%; padding:9px; transform-style:preserve-3d;
  background:conic-gradient(from 0deg, #3a3044, #4a3f57, #2a2332, #4a3f57, #3a3044);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.06) inset, 0 -6px 14px rgba(0,0,0,.5) inset;
}
.wheel-disc-holder{
  position:relative; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 3px rgba(0,0,0,.4) inset; background:var(--bg-panel); aspect-ratio:1;
}
[data-el="wheelSpinner"]{ position:relative; width:100%; height:100%; transform-origin:50% 50%; will-change:transform; }
[data-el="wheelSpinner"] svg{ display:block; position:absolute; inset:0; width:100%; height:100%; }
.wheel-edge-2{ transform:translate3d(0,5px,-10px); filter:brightness(.5); z-index:1; }
.wheel-edge-1{ transform:translate3d(0,2.5px,-5px); filter:brightness(.72); z-index:2; }
.wheel-face{ z-index:3; }
.seg-label{ font-family:'Manrope'; font-weight:800; font-size:9.5px; fill:#0e0b12; }

.sheen{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 8%, rgba(255,255,255,.22), transparent 55%);
  mix-blend-mode:soft-light; background-position:50% 8%; animation:sheenSweep 5s ease-in-out infinite;
}
@keyframes sheenSweep{ 0%,100%{ background-position:38% 4%; } 50%{ background-position:62% 14%; } }

.impact-flash{
  position:absolute; inset:-6%; border-radius:50%; pointer-events:none; z-index:5;
  background:radial-gradient(circle, rgba(255,255,255,.9), transparent 62%); opacity:0; mix-blend-mode:screen;
}
.impact-flash.fire{ animation:impactFlash .4s ease-out; }
@keyframes impactFlash{ 0%{ opacity:0; } 15%{ opacity:.85; } 100%{ opacity:0; } }

.wheel-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateZ(14px);
  width:22%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #2c2434, #17121c 70%); border:2px solid #3a3044;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Bungee'; font-size:7.5px; line-height:1.25; color:var(--ink-faint); letter-spacing:.4px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
}

.pointer-3d{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%) translateZ(30px);
  width:34px; height:34px; z-index:4; filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)); transition:transform .12s ease;
}
.pointer-3d.tick{ transform:translateX(-50%) translateZ(30px) scale(.88) rotate(-4deg); }

/* ---------- controls ---------- */
.spin-cta{
  margin-top:30px; font-family:'Bungee'; font-weight:400; font-size:15px; letter-spacing:.6px;
  color:#0e0b12; background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 80%, white), var(--gold));
  border:none; border-radius:999px; padding:15px 40px;
  box-shadow:0 10px 24px -6px color-mix(in srgb, var(--gold) 55%, transparent), 0 2px 0 rgba(255,255,255,.4) inset;
  cursor:pointer; min-height:52px; min-width:200px; transition:transform .08s ease, box-shadow .08s ease;
  animation-name:fadeUp, breathe; animation-duration:.5s, 2.4s; animation-delay:.5s, 1.3s;
  animation-timing-function:ease-out, ease-in-out; animation-iteration-count:1, infinite; animation-fill-mode:both, none;
}
.spin-cta:active{ transform:scale(.96); box-shadow:0 4px 10px -4px color-mix(in srgb, var(--gold) 50%, transparent); }
.spin-cta:disabled{ opacity:.5; cursor:default; transform:none; animation:none; }
@keyframes breathe{
  0%,100%{ box-shadow:0 10px 24px -6px color-mix(in srgb, var(--gold) 55%, transparent), 0 2px 0 rgba(255,255,255,.4) inset; }
  50%{ box-shadow:0 10px 34px -4px color-mix(in srgb, var(--gold) 85%, transparent), 0 2px 0 rgba(255,255,255,.4) inset; }
}
.hint{ margin-top:10px; font-size:11.5px; color:var(--ink-faint); text-align:center; animation:fadeUp .5s ease-out both .58s; }

/* ---------- ambient background motes ---------- */
.motes{ position:absolute; inset:-20% -10%; pointer-events:none; z-index:0; overflow:hidden; }
.mote{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.35; filter:blur(.5px); animation:moteDrift linear infinite; }
@keyframes moteDrift{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.4; } 90%{ opacity:.3; }
  100%{ transform:translateY(-160px) translateX(var(--drift,12px)); opacity:0; }
}

/* ---------- confetti (transform/opacity only) ---------- */
.confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.confetti-piece{ position:absolute; top:38%; left:50%; width:8px; height:14px; will-change:transform, opacity; }

/* ---------- reveal modal ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; background:rgba(10,8,13,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.overlay[hidden]{ display:none; }
.reveal-card{
  width:min(340px,100%); background:var(--bg-elevated); border:1px solid var(--line); border-radius:22px;
  padding:28px 24px; text-align:center; box-shadow:0 24px 60px -16px rgba(0,0,0,.7); position:relative;
}
.reveal-emoji{
  display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background:var(--won-color, var(--gold)); box-shadow:0 10px 22px -6px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.06);
}
.reveal-card h2.prize{ font-family:'Bungee'; font-weight:400; font-size:24px; margin:2px 0 6px; color:var(--won-color, var(--gold)); text-wrap:balance; }
.reveal-card .msg{ color:var(--ink-dim); font-size:13.5px; margin:0 0 22px; line-height:1.5; }
.reveal-card .claim{
  width:100%; padding:14px; border-radius:12px; border:none; cursor:pointer; font-family:'Bungee'; font-size:13.5px;
  letter-spacing:.4px; color:#0e0b12; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent));
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent); min-height:48px; margin-top:2px;
}
.reveal-card .again{ display:block; margin-top:12px; background:none; border:none; color:var(--ink-faint); font-size:12px; text-decoration:underline; cursor:pointer; padding:8px; }

.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; }

@media (prefers-reduced-motion: reduce){
  .pointer-3d{ transition:none; }
  .wheel-tilt, .sheen, .mote, .gw-headline, .gw-subline, .wheel-scene, .spin-cta, .hint{ animation:none !important; }
}

@media (min-width:640px){ .wheel-scene{ width:360px; } }