/* ================= daily spin wheel ================= */
#dailyOverlay{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  padding:20px;background:radial-gradient(120% 90% at 50% 8%,rgba(40,30,90,.78),rgba(5,6,14,.94));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#dailyOverlay.show{display:flex;animation:dfade .25s ease}
@keyframes dfade{from{opacity:0}to{opacity:1}}

.daily-card{position:relative;width:100%;max-width:388px;overflow:hidden;text-align:center;
  padding:30px 22px 20px;border-radius:28px;border:1px solid #4a4f92;
  background:linear-gradient(168deg,#232a58,#161c3d 50%,#241a4c);
  box-shadow:0 30px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 4px rgba(255,207,51,.08);
  animation:dpop .38s cubic-bezier(.2,1.32,.34,1) both}
@keyframes dpop{from{transform:scale(.9) translateY(16px);opacity:0}to{transform:none;opacity:1}}
/* soft rotating glow behind everything */
.daily-glow{position:absolute;top:-40%;left:50%;width:150%;height:150%;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,rgba(255,203,5,.14),transparent 90deg,rgba(120,90,255,.14) 180deg,transparent 270deg,rgba(255,203,5,.14));
  animation:dglow 14s linear infinite}
@keyframes dglow{to{transform:translateX(-50%) rotate(360deg)}}
.daily-card>*{position:relative;z-index:1}
/* ---- THE MARQUEE ----
   "FREE DAILY SPIN" was a gold pill, which reads as a banner ad rather than as
   the top of a machine. This is a lit sign: a plate with bulbs running along
   the top of it, the way the header of an arcade cabinet is lit. */
.daily-marquee{position:relative;padding-top:12px}
.mq-bulbs{position:absolute;top:0;left:12%;right:12%;height:9px;display:block;
  background:radial-gradient(circle at 4.5px 4.5px,#fff3b0 2.4px,rgba(255,203,5,.35) 3.2px,transparent 3.6px) 0 0/18px 9px;
  animation:mqChase 1.1s steps(2,end) infinite}
@keyframes mqChase{to{background-position:18px 0}}
.mq-plate{display:inline-flex;align-items:baseline;gap:.28em;padding:7px 22px 8px;border-radius:12px;
  background:linear-gradient(180deg,#2b2150,#171034);
  box-shadow:inset 0 0 0 2px #ffcf33,inset 0 0 0 5px #14102c,0 8px 22px -6px rgba(255,203,5,.5)}
.mq-plate span{font-family:'Bebas Neue';font-size:23px;letter-spacing:.14em;color:#c9cfff}
.mq-plate b{font-family:'Bebas Neue';font-size:31px;letter-spacing:.09em;font-weight:400;color:#ffcf33;
  text-shadow:0 0 18px rgba(255,203,5,.65)}

/* ---- the streak ----
   Was 13px grey text and three flat dots. The pips are Poké Balls now, which is
   the same shape the Upgrades page uses to say "how many of these are yours" —
   one language for progress, and readable at a glance instead of parsed. */
.daily-streak{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.ds-day{font-family:'Bebas Neue';font-size:15px;letter-spacing:.13em;color:#8b93d8}
.ds-day b{color:#fff;font-size:19px;font-weight:400;margin-left:.18em}
.dpips{display:inline-flex;gap:5px}
.dpips .dp{width:14px;height:14px;border-radius:50%;flex:none;display:block;
  background:#242a52;box-shadow:inset 0 0 0 1.4px #3a4076;
  transition:background .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,1.2,.35,1)}
.dpips .dp.on{
  background:linear-gradient(180deg,#ff4d4d 0 46%,#12142b 46% 54%,#f2f4ff 54% 100%);
  box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.5),0 0 10px rgba(255,77,77,.45);
  transform:scale(1.08)}
.ds-mult{font-family:'Bebas Neue';font-size:20px;line-height:1;color:#6d76ab;
  padding:4px 10px 5px;border-radius:9px;background:rgba(255,255,255,.05)}
.ds-mult i{font-style:normal;font-size:14px;opacity:.7}
.ds-mult.up{color:#241a02;background:linear-gradient(180deg,#ffe884,#ffcb05 60%,#e5a800);
  box-shadow:0 4px 14px -3px rgba(255,203,5,.6)}

/* wheel */
/* The flapper hangs at top:-16px and its pivot circle reaches another 9px
   above that, so the wheel's real top edge is 25px higher than the box. At the
   old 18px margin the pivot sat ON the streak pips. 36px clears it with room to
   read as a gap rather than as a near-miss.

   WIDTH: sized against the CARD, not the viewport. `max-width:76vw` was a
   guess at how much room the card had, and on a 344px-wide window it guessed
   almost exactly wrong — 76vw came to 261px inside a content box of 260px, so
   the wheel filled its parent edge to edge and .daily-card's overflow:hidden
   shaved whatever hung past it. min(280px,100%) cannot make that mistake: the
   percentage is measured against the box the wheel actually lives in, so the
   wheel is 280px whenever there is room for 280px and exactly the content
   width whenever there is not.

   The halo sits at inset:-8% and so pokes outside that box, which is fine on
   purpose — its gradient reaches transparent at ~51% of the wrap, so there is
   nothing left of it by the time it gets to the edge. */
.wheel-wrap{position:relative;width:min(280px,100%);aspect-ratio:1;
  margin:36px auto 8px}
.wheel-halo{position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,203,5,.28),transparent 62%);filter:blur(6px);
  animation:dhalo 2.6s ease-in-out infinite}
@keyframes dhalo{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.9;transform:scale(1.03)}}
.wheel-spin{position:absolute;inset:0;transform:rotate(0deg);will-change:transform}
.wheel-svg{width:100%;height:100%;display:block}
.wheel-icons{position:absolute;inset:0;pointer-events:none}
.wheel-ico{position:absolute;width:19%}
.wheel-ico.cash{width:21%}
.ico-body{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}

/* ETB tile on a wedge */
.etbico{position:relative;width:100%;aspect-ratio:5/6;border-radius:7px;overflow:hidden;
  background:linear-gradient(160deg,#20264f,#10152f);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 9px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
/* real product photo: no tile behind it — just the product, floating */
.etbico.hasart{background:none;border:none;box-shadow:none;overflow:visible;border-radius:0}
.etbico .etb-real{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.6))}
.etb-themed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:1;
  background:linear-gradient(160deg,#2b325f,#171d3d)}
.etb-themed .etb-lid{position:absolute;top:0;left:0;right:0;height:26%;background:linear-gradient(180deg,#ffcf33,#e0a400);
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.etb-themed .etb-logo{max-width:80%;max-height:42%;object-fit:contain;margin-top:12%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.etb-themed .etb-tag{position:absolute;bottom:5%;font-family:'Bebas Neue';font-size:9px;letter-spacing:.12em;color:#cfd6ff;opacity:.9}
/* booster-pack wedges: foil wrapper look rather than a boxy lid */
.etb-themed.pack{background:linear-gradient(160deg,#3a2f6b,#1b1638)}
.etb-themed.pack .etb-lid{height:14%;background:linear-gradient(180deg,#dfe4ff,#9aa4d8)}
.etb-themed.pack .etb-logo{max-height:46%;margin-top:6%}

/* cash wedge icon */
.cashico .cash-svg{width:74%;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.cashico .cash-tag{font-family:'Bebas Neue';font-size:15px;letter-spacing:.03em;color:#3a2600;line-height:.9;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}

/* ---- PEGS, BULBS AND THE FLAPPER ----
   The parts that make a wheel a machine. Without them it is a rotating image,
   and the deceleration — the whole pleasure of a prize wheel — has nothing to
   register against. */
.wheel-peg{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff,#c9cede 60%,#7f86a8);
  box-shadow:0 1px 3px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.3);z-index:3}
.wheel-bulbs{position:absolute;inset:0;pointer-events:none;z-index:1}
.wheel-bulb{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#ffcf33;box-shadow:0 0 7px rgba(255,203,5,.85);
  animation:wbulb 1.1s steps(2,end) infinite;animation-delay:var(--d,0s)}
@keyframes wbulb{0%,49%{opacity:1}50%,100%{opacity:.22}}
.wheel-wrap.spinning .wheel-bulb{animation-duration:.34s}

/* the flapper: hinged at the top, kicked by js on every peg it passes */
.wheel-flap{position:absolute;top:-16px;left:50%;margin-left:-13px;width:26px;height:44px;z-index:5;
  transform-origin:50% 6px}
.wheel-flap i{position:absolute;top:0;left:0;width:0;height:0;display:block;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:34px solid #ff4d4d;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.wheel-flap::after{content:'';position:absolute;top:-9px;left:50%;margin-left:-9px;
  width:18px;height:18px;border-radius:50%;background:#ff4d4d;
  box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.5)}
.wheel-flap.tick{animation:wflap .1s ease-out}
@keyframes wflap{0%{transform:rotate(0)}45%{transform:rotate(15deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){
  .wheel-bulb,.mq-bulbs{animation:none}
  .wheel-flap.tick{animation:none}
}

/* the hub is a Poké Ball, and it is the only round thing at the centre */
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(180deg,#ff5252 0 46%,#15171d 46% 54%,#fdfdfd 54% 100%);
  box-shadow:inset 0 0 0 3px #12142b,0 0 0 3px #ffcf33,0 6px 16px rgba(0,0,0,.6)}
.wheel-hub span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 3px #15171d,0 1px 3px rgba(0,0,0,.4)}
.wheel-wrap.spinning .wheel-halo{animation-duration:.7s}

/* spin button */
.daily-btn{margin-top:16px;width:100%;padding:15px;border:none;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;
  font-family:'Bebas Neue';font-size:23px;letter-spacing:.11em;color:#3a2600;
  background:linear-gradient(180deg,#ffe884,#ffcb05 55%,#e5a800);
  box-shadow:0 10px 24px -5px rgba(255,203,5,.55),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s ease,filter .12s ease}
.daily-btn>span{position:relative;z-index:1}
/* the sweep across the button. It animated `left`, which is a LAYOUT property:
   the browser re-lays-out the button on every frame, forever, for a highlight.
   translateX is composited and looks identical. */
.daily-btn::before{content:'';position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  animation:dshine 2.6s ease-in-out infinite}
@keyframes dshine{
  0%     {transform:translateX(-150%) skewX(-18deg)}
  55%,100%{transform:translateX(325%)  skewX(-18deg)}
}
.daily-btn:hover:not(:disabled){filter:brightness(1.06)}
.daily-btn:active:not(:disabled){transform:translateY(2px)}
.daily-btn:disabled{opacity:.75;cursor:default}
.daily-btn:disabled::before{display:none}

/* ================= THE WIN =================
   WHAT WENT: a conic ray burst spinning behind the prize — the most generic
   "you won" graphic in existence — with the TEXT set larger than the thing you
   had actually won. Backwards on both counts.

   What replaced it: the prize is the subject. It drops onto a lit podium under
   a spotlight cone, so the light in the scene comes from a source that is
   visibly in the scene rather than from rays emanating out of nowhere. */
.daily-win{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;padding:26px 22px;text-align:center;
  background:radial-gradient(120% 80% at 50% 24%,#2a3160,#10142c 78%);
  animation:dwin .3s ease both}
@keyframes dwin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* the spotlight: a cone from above, not a starburst */
.dw-beam{position:absolute;top:-6%;left:50%;width:230px;height:62%;margin-left:-115px;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,232,150,.30),rgba(255,232,150,.06) 62%,transparent);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  animation:dbeam 3.4s ease-in-out infinite alternate}
@keyframes dbeam{from{opacity:.75}to{opacity:1}}

.dw-mult{position:relative;z-index:2;margin-bottom:6px;
  font-family:'Bebas Neue';font-size:14px;letter-spacing:.16em;color:#241a02;
  padding:4px 13px 5px;border-radius:999px;
  background:linear-gradient(180deg,#ffe884,#ffcb05 60%,#e5a800);
  box-shadow:0 5px 16px -4px rgba(255,203,5,.7)}
.dw-kick{position:relative;z-index:2;font-family:'Bebas Neue';font-size:17px;letter-spacing:.28em;
  color:#8b93d8}

/* the stage: prize + podium, sized so the PRIZE is the biggest thing here */
.dw-stage{position:relative;z-index:2;margin:10px 0 14px;
  display:flex;flex-direction:column;align-items:center}
.dw-prize{position:relative;height:172px;display:flex;align-items:flex-end;justify-content:center;
  animation:dwDrop .62s cubic-bezier(.18,1.5,.4,1) both}
@keyframes dwDrop{
  0%  {transform:translateY(-56px) scale(.72);opacity:0}
  60% {opacity:1}
  100%{transform:none;opacity:1}
}
.dw-cash{display:flex;align-items:flex-end;justify-content:center;height:100%}
.dw-prize.cash .cash-svg{width:172px;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
.dw-etb{position:relative;width:132px;height:172px}
.dw-etb.hasart{width:168px}
.dw-etb .etb-themed{position:absolute;inset:0;border-radius:11px;overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.6)}
.dw-etb .etb-themed .etb-lid{height:24%}
.dw-etb .etb-themed .etb-logo{max-width:80%;max-height:44%}
.dw-etb .etb-themed .etb-tag{font-size:13px}
.dw-etbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}

/* the podium it lands on, and the shadow that says it landed */
.dw-podium{position:relative;width:186px;height:16px;margin-top:-2px;
  border-radius:50%/60%;
  background:radial-gradient(closest-side,rgba(255,232,150,.55),rgba(255,203,5,.12) 62%,transparent);
  animation:dwLand .62s cubic-bezier(.18,1.5,.4,1) both}
.dw-podium i{position:absolute;left:50%;top:3px;width:104px;height:9px;margin-left:-52px;
  border-radius:50%;background:rgba(0,0,0,.55);filter:blur(3px)}
@keyframes dwLand{0%,55%{transform:scaleX(.4);opacity:0}100%{transform:none;opacity:1}}

.dw-amt{position:relative;z-index:2;font-family:'Bebas Neue';font-size:38px;letter-spacing:.02em;
  color:#fff;line-height:1.02;text-shadow:0 3px 18px rgba(0,0,0,.55)}
.dw-sub{position:relative;z-index:2;font-family:'Bebas Neue';font-size:19px;letter-spacing:.08em;
  color:#ffcf33;margin-top:2px}
.daily-win .daily-btn{position:relative;z-index:2;max-width:236px;margin-top:16px}

@media (prefers-reduced-motion:reduce){
  .dw-prize,.dw-podium,.dw-beam{animation:none}
}
@media(max-height:680px){
  .dw-prize{height:140px}
  .dw-etb{width:108px;height:140px}
  .dw-etb.hasart{width:138px}
  .dw-amt{font-size:32px}
}