/* ============================================================================
   WHEEL OF FORTUNE — popup + cooldown chip
   Uses the site's own theme variables (--panel, --gold, --line, --text,
   --muted) so it follows Winter / Summer / Ramadan / light-dark themes.
   Sits at z-index 290: just under the Daily XP gate (300), so if both are due
   the XP claim always comes first.
   ========================================================================== */
.wheel-gate{
  position:fixed; inset:0; z-index:290;
  display:none; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
  background:rgba(6,8,14,0.6);
  backdrop-filter:blur(10px) saturate(110%);
  -webkit-backdrop-filter:blur(10px) saturate(110%);
}
.wheel-gate.open{display:flex; animation:wheelGateFade .25s ease;}
@keyframes wheelGateFade{from{opacity:0;} to{opacity:1;}}

.wheel-panel{
  position:relative;
  width:100%; max-width:440px; margin:auto;
  background:linear-gradient(160deg, #241c0d, var(--panel));
  border:1px solid var(--gold);
  border-radius:18px;
  padding:26px 22px 22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--gold-rgb),.15);
  animation:wheelPanelPop .35s cubic-bezier(.2,.9,.25,1.25);
}
@keyframes wheelPanelPop{from{transform:scale(.88); opacity:0;} to{transform:scale(1); opacity:1;}}
.wheel-panel.tier-glow{ box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 46px var(--wheel-glow, transparent); border-color:var(--wheel-glow, var(--gold)); }

.wheel-x{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer;
}
.wheel-snd{ right:auto; left:12px; font-size:15px; }
.wheel-x:hover{color:var(--text); border-color:var(--gold);}
.wheel-x[disabled]{opacity:.35; cursor:default;}

.wheel-panel h3{
  font-family:'Teko', sans-serif; font-size:30px; letter-spacing:.04em;
  color:var(--text); margin:0 0 2px;
}
.wheel-sub{color:var(--muted); font-size:12.5px; margin:0 0 14px; min-height:18px;}

.wheel-stage{ position:relative; width:min(300px, 76vw); aspect-ratio:1/1; margin:6px auto 14px; }
.wheel-stage svg{ width:100%; height:100%; display:block; overflow:visible; }
.wheel-rotor{ transform-origin:50% 50%; transform-box:view-box; will-change:transform; }
.wheel-stage.is-dim .wheel-rotor{ filter:saturate(.45) brightness(.7); }
.wheel-pointer{
  position:absolute; left:50%; top:-10px; transform:translateX(-50%); z-index:3;
  width:0; height:0;
  border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:26px solid var(--gold);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
.wheel-slice-label{ font-family:'Teko', sans-serif; fill:#fff; text-anchor:middle; paint-order:stroke; stroke:rgba(0,0,0,.35); stroke-width:.6px; }
.wheel-slice-label.dark{ fill:#2a1f00; stroke:none; }
.wheel-hub{ fill:var(--panel); stroke:var(--gold); stroke-width:2.5; }
.wheel-hub-text{ font-family:'Teko', sans-serif; font-size:13px; fill:var(--gold); text-anchor:middle; letter-spacing:.06em; }

.wheel-countdown{
  font-family:'Teko', sans-serif; font-size:34px; letter-spacing:.06em; color:var(--gold);
  margin:0 0 4px; line-height:1.1;
}

.wheel-result{
  margin:0 0 12px; padding:12px 12px 10px;
  border:1px solid var(--wheel-glow, var(--line)); border-radius:12px;
  background:rgba(255,255,255,.03);
  animation:wheelResultIn .45s cubic-bezier(.2,.9,.25,1.25);
}
.wheel-result[hidden]{display:none;}
@keyframes wheelResultIn{from{transform:translateY(8px) scale(.94); opacity:0;} to{transform:none; opacity:1;}}
.wheel-tier-pill{
  display:inline-block; padding:2px 12px; border-radius:999px;
  font-family:'Teko', sans-serif; font-size:16px; letter-spacing:.08em;
  background:var(--wheel-glow, var(--gold)); color:#fff;
}
.wheel-tier-pill.dark{ color:#2a1f00; }
.wheel-prize{ font-family:'Teko', sans-serif; font-size:42px; line-height:1.05; color:var(--text); margin:4px 0 0; }
.wheel-prize-note{ color:var(--muted); font-size:12.5px; margin:2px 0 0; }

.wheel-panel .modal-actions{ margin-top:6px; display:flex; justify-content:center; gap:10px; }
.wheel-btn{
  min-width:190px; padding:12px 26px; border-radius:8px; cursor:pointer;
  background:var(--gold); color:var(--on-gold, #1a1407);
  border:1px solid var(--gold);
  font-family:'Teko', sans-serif; font-size:21px; letter-spacing:.07em; font-weight:600; line-height:1.1;
  transition:transform .12s ease, background .15s ease;
}
.wheel-btn:hover:not([disabled]){ background:var(--gold-hover, var(--gold)); transform:translateY(-1px); }
.wheel-btn:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.wheel-btn[disabled]{ opacity:.55; cursor:default; }
.wheel-btn[hidden]{ display:none; }

.wheel-odds{ margin-top:14px; text-align:left; border-top:1px solid var(--line); padding-top:10px; }
.wheel-odds summary{ cursor:pointer; color:var(--muted); font-size:12.5px; text-align:center; list-style:none; }
.wheel-odds summary::-webkit-details-marker{display:none;}
.wheel-odds summary:hover{color:var(--text);}
.wheel-odds-row{ display:flex; align-items:center; gap:8px; padding:5px 2px; font-size:12.5px; color:var(--text); }
.wheel-odds-row .sw{ width:10px; height:10px; border-radius:3px; flex:none; background:var(--c); }
.wheel-odds-row .nm{ flex:1; }
.wheel-odds-row .pr{ color:var(--muted); }
.wheel-odds-row .ch{ min-width:56px; text-align:right; font-variant-numeric:tabular-nums; }
.wheel-odds-foot{ color:var(--muted); font-size:11.5px; margin:8px 2px 0; line-height:1.45; }

/* ---------- confetti (Rare / Epic / Legend only) ---------- */
.wheel-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:18px; }
.wheel-confetti i{
  position:absolute; top:38%; left:50%; width:7px; height:11px; border-radius:2px;
  background:var(--c); opacity:0;
  animation:wheelConfetti 1.5s ease-out forwards;
}
@keyframes wheelConfetti{
  0%{opacity:1; transform:translate(0,0) rotate(0);}
  100%{opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--rot));}
}

/* ---------- cooldown chip ---------- */
.wheel-chip{
  position:fixed; left:16px; bottom:84px; z-index:120;
  display:none; align-items:center; gap:8px;
  padding:8px 14px 8px 10px; border-radius:999px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--line); cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-family:'Manrope', sans-serif; font-size:12.5px; font-weight:700;
}
.wheel-chip.show{display:inline-flex;}
/* the gold "JOIN TOURNAMENT NOW!" button sits at the same spot; lift the chip above it while it is showing */
.wheel-chip.above-join{ bottom:126px; }
.wheel-chip:hover{border-color:var(--gold);}
.wheel-chip .wc-ico{ font-size:18px; line-height:1; }
.wheel-chip .wc-time{ font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
.wheel-chip.is-ready{ border-color:var(--gold); color:var(--gold); animation:wheelChipPulse 1.8s ease-in-out infinite; }
.wheel-chip.is-ready .wc-ico{ animation:wheelChipSpin 3.2s linear infinite; }
@keyframes wheelChipPulse{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(var(--gold-rgb),.45);}
  50%{box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 9px rgba(var(--gold-rgb),0);}
}
@keyframes wheelChipSpin{to{transform:rotate(360deg);}}

@media (max-width:640px){
  .wheel-panel{ padding:24px 16px 18px; }
  .wheel-panel h3{ font-size:26px; }
  .wheel-prize{ font-size:36px; }
  .wheel-chip{ left:10px; bottom:76px; }
  .wheel-chip.above-join{ bottom:116px; }
}
@media (prefers-reduced-motion:reduce){
  .wheel-chip.is-ready, .wheel-chip.is-ready .wc-ico, .wheel-confetti i{ animation:none; }
  .wheel-panel, .wheel-result{ animation:none; }
}