/* ════════════════════════════════════════════════════════════════════════════
   CUATROBET — FORTUNE TIGER  |  Entertainment landing page
════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Cuatrobet brand */
  --c-orange:      #FC6200;
  --c-orange-2:    #EF5D00;
  --c-orange-3:    #E35800;
  --c-orange-4:    #D65300;
  --c-orange-5:    #CA4E00;
  --c-orange-lt:   #FF8A40;
  --c-orange-pale: #FFF0E5;
  --c-bg:          #0C0C18;
  --c-bg-2:        #0B0B17;

  /* keep gold for wheel rim + decorative accents */
  --c-gold:      #E8B840;
  --c-gold-lt:   #FFD866;
  --c-gold-pale: #FFF4C0;
  --c-cream:     #FFF5F0;

  /* wheel size — larger base; container query (90cqh) caps to actual stage height */
  --wheel-size: clamp(286px, min(44vw, 57svh), 689px);

  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.25,.46,.45,.94);
  --dur-fast: 160ms;
  --dur-mid:  300ms;
}

/* ─── 2. RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Manrope", Arial, sans-serif;
  color: #fff;
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
img, video { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ─── 3. BACKGROUND ─────────────────────────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(0.82) brightness(0.62) contrast(1.10);
}

/* Cuatrobet dark overlay — deep black-navy centre, near-black edges */
.bg__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 88% 72% at 56% 50%,
      rgba(12,12,24,.20)  0%,
      rgba(6,6,18,.54)   52%,
      rgba(0,0,8,.92)  100%
    ),
    linear-gradient(180deg,
      rgba(0,0,8,.54)   0%,
      rgba(0,0,4,.06)  20%,
      rgba(0,0,4,.06)  80%,
      rgba(0,0,8,.60) 100%
    );
}

/* Cuatrobet orange cinematic glow — large, centred right where wheel sits */
.bg__radial {
  position: absolute;
  top: 28%;
  left: 55%;
  transform: translateX(-50%);
  width: 110%;
  max-width: 1200px;
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(252,98,0,.30)   0%,
    rgba(200,60,0,.16)   34%,
    rgba(100,24,0,.07)   60%,
    transparent          74%
  );
  /* blur removed — was filter:blur(52px) causing massive GPU repaint every frame */
  animation: radialPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes radialPulse {
  to { opacity: .52; transform: translateX(-50%) scale(1.16); }
}

/* Edge vignette — premium depth */
.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 34%, rgba(0,0,8,.76) 100%);
}

/* ─── 4. PAGE ────────────────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ─── 5. HEADER ─────────────────────────────────────────────────────────── */
.header {
  width: 100%;
  flex-shrink: 0;
  padding: clamp(10px,1.6vh,20px) clamp(16px,3vw,52px);
  z-index: 50;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
}
.header__brand {
  display: flex;
  transform: scale(2.5);
  align-items: center;
  gap: clamp(8px,1.2vw,20px);
  filter: drop-shadow(0 0 24px rgba(252,98,0,.36));
  animation: headerIn .65s .05s var(--ease-spring) both;
}
@keyframes headerIn {
  from { transform: translateY(-20px) scale(.90); opacity: 0; }
}
.Ti {
  height: clamp(38px,5.2vh,66px);
  width: auto;
  object-fit: contain;
  /* will-change:filter removed — filter animation already forces a layer; no gain */
  animation: logoGlow 6s ease-in-out infinite alternate;
}
@keyframes logoGlow {
  from { filter: drop-shadow(0 0 8px rgba(252,98,0,.32)); }
  to   { filter: drop-shadow(0 0 20px rgba(252,98,0,.64)); }
}
.header__spins-left { display: none !important; }
.header__spins-dot {
  width: clamp(10px,1.4vw,16px);
  height: clamp(10px,1.4vw,16px);
  border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 0 10px rgba(252,98,0,.72);
  transition: background .3s, box-shadow .3s;
}
.header__spins-dot.used { background: rgba(255,255,255,.20); box-shadow: none; }

/* ─── 6. HERO ────────────────────────────────────────────────────────────── */
.hero {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}


/* Headline */
.hero__head {
  flex-shrink: 0;
  text-align: center;
  padding: clamp(4px,.7vh,10px) 16px 0;
  pointer-events: none;
  animation: headIn .8s .15s var(--ease-spring) both;

  position: relative;
  z-index: 80 !important;
  margin-bottom: clamp(24px, 4svh, 64px) !important;
  padding-bottom: clamp(8px, 1.5svh, 20px) !important;
  overflow: visible;
  max-width: 100%;
}
@keyframes headIn {
  from { transform: translateY(-16px) scale(.93); opacity: 0; }
}
.hero__eyebrow {
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: clamp(10px,1.2vw,15px);
  font-weight: 900;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--c-orange-lt);
  opacity: .90;
  margin-bottom: 3px;
}
.hero__title {
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: clamp(34px, min(4.7vw, 9svh), 74px) !important;
  font-weight: 700;
  line-height: 0.92 !important;
  padding: 15px 12px 10px !important;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(168deg, #FFF8BC 0%, #FFD44C 28%, #FF8B00 54%, #FFC035 72%, #FFF4A0 100%);
  -webkit-background-clip: text; background-clip: text;
  filter:
    drop-shadow(0 3px 0 rgba(10,4,0,.92))
    drop-shadow(0 6px 0 rgba(20,8,0,.58))
    drop-shadow(0 14px 22px rgba(0,0,0,.46));
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
  transform: skewX(-8deg);
  display: block;
  text-rendering: optimizeLegibility;
}
.hero__desc {
  font-family: "Manrope", Arial, sans-serif;
  margin-top: clamp(4px, 0.8svh, 8px) !important;
  font-size: clamp(9px, min(1vw, 1.7svh), 13px) !important;
  font-weight: 800;
  color: rgba(255,200,140,.88);
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* Stage — tiger left, wheel centre */
.hero__stage {
  flex: 1;
  position: relative;
  width: 100%;
  max-width: 1600px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding-top: clamp(16px, 3svh, 46px) !important;
}

/* ─── 7. TIGER ──────────────────────────────────────────────────────────── */
.tiger {
  position: absolute;
  /*
   * left: 0–30px — tiger hugs the left edge of the stage.
   * width: fills the space from left edge to 24px before the wheel's left edge.
   *   50% = stage centre, wheel*0.5 = wheel half, left = tiger start, 24px gap.
   * clip-path on hero__stage clips any tiger overflow above the stage top.
   */
  left: clamp(0px, 2vw, 30px);
  bottom: 0;
  width: clamp(200px, calc(50% - var(--wheel-size) * 0.5 - clamp(0px, 2vw, 30px) - 24px), 620px);
  z-index: 12;
  pointer-events: none;
  background: transparent !important;
  overflow: visible !important;
  animation: tigerIdle 7s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  transform-origin: 44% 100%;
  will-change: transform;
}
.tiger__img {
  display: block !important;
  width: 100%;
  height: auto;
  background: transparent !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  max-width: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


.tiger__shadow { display: none; }
@keyframes tigerIdle {
  0%   { transform: translate3d(0,0,0)      rotate(-.5deg) scale(1.000); }
  42%  { transform: translate3d(4px,-6px,0) rotate(.2deg)  scale(1.007); }
  100% { transform: translate3d(8px,-13px,0) rotate(.6deg) scale(1.014); }
}

/* ─── 8. WHEEL AREA ─────────────────────────────────────────────────────── */
.wheel-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  animation: wheelAreaIn .85s .25s var(--ease-spring) both;
  margin-top: clamp(12px, 2.5svh, 38px) !important;
}
@keyframes wheelAreaIn {
  from { transform: translateY(44px) scale(.80); opacity: 0; }
}
/* Cuatrobet orange spotlight glow behind the wheel */
.wheel-area__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150%; aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(252,98,0,.34)   0%,
    rgba(200,60,0,.18)   30%,
    rgba(100,24,0,.07)   56%,
    transparent          72%
  );
  /* blur removed — was filter:blur(32px) causing expensive GPU compositing */
  pointer-events: none;
  z-index: -1;
  animation: wheelGlow 8s ease-in-out infinite alternate;
}
@keyframes wheelGlow {
  to { opacity: .65; transform: translate(-50%,-50%) scale(1.14); }
}

/* ─── 9. WHEEL: STATIC SHELL + ANIMATED DISC ───────────────────────────── */

.wheel-shell {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  flex-shrink: 0;
}

/* ─── Desktop override (≥769px): tiger position + title layout ──────────── */
@media (min-width: 769px) {
  .hero__stage {
    overflow: visible !important;
    clip-path: none !important;
  }

  .tiger {
    height: 82vh !important;
    width: auto !important;

    /* чим більше мінус — тим ближче до колеса */
    right: calc(50% + var(--wheel-size) * 0.5 - 130px) !important;

    left: auto !important;
    bottom: -16vh !important;
    z-index: 9999 !important;
  }

  .tiger__img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  .hero__head {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 100 !important;
    transform: translateY(-55px) !important;
  }

  .hero__title {
    font-size: clamp(44px, 5.8vw, 88px) !important;
    line-height: 0.9 !important;
  }

  .hero__desc {
    margin-top: 4px !important;
    font-size: clamp(10px, 1vw, 14px) !important;
  }

  .header__brand {
    transform: scale(2.5) !important;
    transform-origin: left top !important;
  }
}

/* ─── RESPONSIVE 769px–1024px: fix logo/title overlap ───────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Remove the negative translateY that pushes the title into the header area */
  .hero__head {
    transform: translateY(0) !important;
  }
  /* Ensure header always sits above the hero head */
  .header {
    z-index: 200 !important;
  }
}

.wheel-disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: center center;
  animation: wheelRock 3.6s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change: transform;
}

#wheelWrap.is-spinning .wheel-disc {
  animation: none !important;
  transform: rotate(0deg) !important;
}
@keyframes wheelRock {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

.wheel-disc__shadow {
  /* Hidden — blur was spreading dark tone onto the wheel's lower edge visually */
  display: none;
}

canvas#wheel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  z-index: 4;
  cursor: pointer;
  transition: filter var(--dur-fast);
}
#wheelWrap:not(.is-spinning):hover canvas#wheel {
  filter: brightness(1.08) saturate(1.12);
}

/* Decorative gold ring — rotates inside disc */
.wheel-disc__ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 60%, rgba(8,4,0,.44) 61.5%, transparent 63%),
    repeating-conic-gradient(from -1deg, rgba(8,4,0,.22) 0 1.2deg, transparent 1.2deg 3.6deg),
    linear-gradient(140deg, #FFF0A6, #D79927 26%, #FFF4A7 48%, #A86012 74%, #FFE270 100%);
  box-shadow:
    inset 0 0 0 clamp(6px,1.1vw,16px) rgba(255,238,140,.90),
    inset 0 0 0 clamp(12px,2.1vw,30px) rgba(12,12,24,.88),
    0 0 0 2px rgba(255,224,100,.24),
    0 0 40px rgba(252,98,0,.20),
    0 22px 58px rgba(0,0,8,.66);
  -webkit-mask: radial-gradient(circle, transparent 0 70%, #000 71% 100%);
  mask: radial-gradient(circle, transparent 0 70%, #000 71% 100%);
  z-index: 5;
  pointer-events: none;
  animation: ringRotate 8s linear infinite;
  will-change: transform;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }

/* Pointer pin */
.wheel-shell__pin {
  position: absolute;
  top: -5.5%; left: 50%;
  transform: translateX(-50%);
  width: clamp(22px,2.9vw,44px);
  z-index: 8;
  filter: drop-shadow(0 5px 8px rgba(0,0,8,.64));
}
.wheel-shell__pin svg { width: 100%; height: auto; display: block; }

/* ─── 10. CTA ROW ───────────────────────────────────────────────────────── */
.hero__cta {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  /* top padding clears -6% ring overhang (max ~47px at 780px wheel) */
  padding: clamp(48px,6.5vh,76px) 16px clamp(4px,.8vh,10px);
  z-index: 12;
  width: 100%;
}

/* ─── 11. SPIN BUTTON ───────────────────────────────────────────────────── */
.spin-btn {
  position: relative;
  z-index: 12;
  border: 2.5px solid rgba(255,200,120,.72);
  border-radius: 999px;
  padding: clamp(13px,1.6vw,20px) clamp(44px,6.5vw,90px);
  background: linear-gradient(180deg, #FF8640 0%, #FC6200 44%, #D65300 100%);
  color: #fff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(18px,2.6vw,30px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.38);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  box-shadow:
    0 18px 44px rgba(0,0,8,.54),
    0 0 0 1px rgba(252,98,0,.40),
    0 0 32px rgba(252,98,0,.28),
    inset 0 -5px 0 rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.38);
  transition: transform var(--dur-mid), box-shadow var(--dur-mid), filter var(--dur-mid);
}
.spin-btn::before {
  content: "";
  position: absolute;
  inset: -30% -50%;
  background: linear-gradient(90deg, transparent 28%, rgba(255,255,255,.52) 50%, transparent 72%);
  transform: translateX(-100%) rotate(10deg);
  transition: transform .58s ease;
}
.spin-btn:hover::before { transform: translateX(100%) rotate(10deg); }
.spin-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.10);
  box-shadow:
    0 24px 56px rgba(0,0,8,.56),
    0 0 0 1px rgba(252,98,0,.52),
    0 0 48px rgba(252,98,0,.38),
    inset 0 -5px 0 rgba(0,0,0,.20),
    inset 0 2px 0 rgba(255,255,255,.38);
}
.spin-btn:active { transform: translateY(1px) scale(.968); }
.spin-btn:disabled {
  opacity: .58;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(.56);
}

/* ─── 12. DECORATIVE ELEMENTS ───────────────────────────────────────────── */
.petal {
  position: fixed;
  width: var(--w); height: calc(var(--w) * 1.55);
  border-radius: 76% 4% 76% 8%;
  background: linear-gradient(135deg, #FFB060, #FC6200 48%, #FFD080);
  box-shadow: 0 5px 10px rgba(100,30,0,.18);
  opacity: .55;
  pointer-events: none;
  z-index: 3;
  animation: petalFall var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes petalFall {
  from { transform: translate3d(0,-8vh,0) rotate(var(--rot)) scale(.72); }
  to   { transform: translate3d(var(--drift),112vh,0) rotate(calc(var(--rot) + 620deg)) scale(1.05); }
}
/* Tiny coins */
.micro-coin {
  position: fixed;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 29%,
    #FFF6A8 0 18%, #FFCC30 45%, #F08C14 70%, #9E4E0A 100%);
  box-shadow: 0 2px 5px rgba(70,20,4,.34);
  pointer-events: none;
  z-index: 3;
  opacity: .60;
  animation: microFloat var(--dur) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
@keyframes microFloat {
  from { transform: translate3d(0,0,0) rotate(var(--r)) scale(1.00); opacity: .60; }
  to   { transform: translate3d(var(--dx),var(--dy),0) rotate(calc(var(--r)+18deg)) scale(.97); opacity: .38; }
}
/* Reward icons — 7 scattered elements with fade-in/hold/fade-out cycle */
.deco-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4; contain: layout style; }
.deco {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.50));
  opacity: 0; /* start hidden — animation fades in */
}

/* Positions — 6 elements, 2 of each icon, spread around screen edges */
.deco--1 { width: clamp(52px,5.2vw,80px); right: 3%;  top: 10%;    animation: decoFade1 13s ease-in-out 0s    infinite; }
.deco--2 { width: clamp(48px,4.8vw,74px); right: 4%;  bottom: 18%; animation: decoFade2 16s ease-in-out 2.4s  infinite; }
.deco--3 { width: clamp(44px,4.3vw,66px); left:  3%;  top: 22%;    animation: decoFade3 11s ease-in-out 1.0s  infinite; }
.deco--4 { width: clamp(46px,4.5vw,70px); right: 19%; top: 5%;     animation: decoFade4 18s ease-in-out 4.8s  infinite; }
.deco--5 { width: clamp(40px,3.9vw,60px); left:  5%;  bottom: 22%; animation: decoFade5 14s ease-in-out 3.2s  infinite; }
.deco--6 { width: clamp(38px,3.7vw,58px); left:  17%; bottom: 8%;  animation: decoFade6 12s ease-in-out 6.0s  infinite; }

/* Each keyframe: fade-in → hold (with gentle float) → fade-out */
@keyframes decoFade1 {
  0%   { opacity:0;    transform:translate3d(0,0,0)          rotate(-5deg) scale(.92); }
  16%  { opacity:.84; }
  78%  { opacity:.82;  transform:translate3d(-9px,-18px,0)   rotate(4deg)  scale(1.03); }
  100% { opacity:0;    transform:translate3d(-11px,-22px,0)  rotate(5deg)  scale(.94); }
}
@keyframes decoFade2 {
  0%   { opacity:0;    transform:translate3d(0,0,0)          rotate(4deg)  scale(.90); }
  14%  { opacity:.80; }
  80%  { opacity:.78;  transform:translate3d(-13px,15px,0)   rotate(-5deg) scale(1.04); }
  100% { opacity:0;    transform:translate3d(-15px,19px,0)   rotate(-6deg) scale(.92); }
}
@keyframes decoFade3 {
  0%   { opacity:0;    transform:translate3d(0,0,0)          rotate(-3deg) scale(.94); }
  18%  { opacity:.86; }
  76%  { opacity:.84;  transform:translate3d(11px,-16px,0)   rotate(5deg)  scale(1.02); }
  100% { opacity:0;    transform:translate3d(13px,-20px,0)   rotate(6deg)  scale(.95); }
}
@keyframes decoFade4 {
  0%   { opacity:0;    transform:translate3d(0,0,0)          rotate(6deg)  scale(.88); }
  12%  { opacity:.76; }
  82%  { opacity:.74;  transform:translate3d(10px,20px,0)    rotate(-4deg) scale(1.05); }
  100% { opacity:0;    transform:translate3d(12px,24px,0)    rotate(-5deg) scale(.90); }
}
@keyframes decoFade5 {
  0%   { opacity:0;    transform:translate3d(0,0,0)          rotate(-6deg) scale(.91); }
  20%  { opacity:.82; }
  74%  { opacity:.80;  transform:translate3d(-7px,14px,0)    rotate(3deg)  scale(1.03); }
  100% { opacity:0;    transform:translate3d(-9px,18px,0)    rotate(4deg)  scale(.92); }
}
@keyframes decoFade6 {
  0%   { opacity:0;    transform:translate3d(0,0,0)          rotate(3deg)  scale(.93); }
  15%  { opacity:.78; }
  79%  { opacity:.76;  transform:translate3d(14px,-12px,0)   rotate(-4deg) scale(1.02); }
  100% { opacity:0;    transform:translate3d(16px,-15px,0)   rotate(-5deg) scale(.94); }
}
/* ─── 13. CONFETTI ──────────────────────────────────────────────────────── */
#confettiWrap { position: fixed; inset: 0; pointer-events: none; z-index: 340; contain: layout style; }

/* ─── 14. WIN POPUP ─────────────────────────────────────────────────────── */
.win-pop {
  position: fixed; inset: 0;
  z-index: 360;
  pointer-events: none;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.82);
  transition: opacity .20s ease, transform .20s ease;
}
.win-pop.show { opacity: 1; transform: scale(1); }

.win-pop__card { position: relative; overflow: visible; min-width: min(90vw, 480px); }

.win-pop__tiger {
  position: absolute; right: -16px; top: -58px;
  width: clamp(66px,10.5vw,108px);
  height: auto; object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.60));
  z-index: 8;
  animation: tigerPeek .55s var(--ease-spring) .30s both;
}
@keyframes tigerPeek {
  from { transform: translateY(14px) scale(.45) rotate(14deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.win-pop__body {
  position: relative; overflow: hidden;
  border-radius: 24px;
  padding: clamp(22px,4vw,40px) clamp(24px,5vw,56px);
  text-align: center;
  background:
    radial-gradient(circle at 50% -4%, rgba(255,255,255,.30), transparent 28%),
    linear-gradient(145deg, rgba(8,8,20,.97), rgba(24,12,0,.98) 44%, rgba(8,4,0,.97));
  border: 2px solid rgba(252,98,0,.68);
  box-shadow:
    0 28px 96px rgba(0,0,8,.72),
    0 0 60px rgba(252,98,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 36px rgba(252,98,0,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);  
}
.win-pop__body::before { left: -36px; top: -38px; }
.win-pop__body::after  { right: -36px; bottom: -38px; animation-delay: .22s; }
@keyframes orbPulse { to { transform: scale(1.22); opacity: .55; } }
.win-pop__shine {
  position: absolute; inset: -60%;
  background: linear-gradient(108deg, transparent 33%, rgba(255,255,255,.26) 50%, transparent 67%);
  transform: translateX(-65%) rotate(-10deg);
  animation: shineSweep 1.0s .08s ease-out both;
}
@keyframes shineSweep { to { transform: translateX(65%) rotate(-10deg); } }
.win-pop__label {
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: clamp(44px,8.8vw,88px);
  font-weight: 700;
  line-height: .84;
  text-rendering: optimizeLegibility;
  color: transparent;
  background: linear-gradient(180deg, var(--c-gold-pale) 5%, var(--c-gold-lt) 36%, #FF9200 66%, var(--c-gold-pale) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter:
    drop-shadow(0 4px 0 rgba(10,4,0,.90))
    drop-shadow(0 8px 0 rgba(20,8,0,.42))
    drop-shadow(0 18px 28px rgba(0,0,0,.30));
  animation: labelPunch .75s var(--ease-spring) both;
}
@keyframes labelPunch {
  0%  { transform: scale(.28); opacity: 0; }
  70% { transform: scale(1.12); }
  100%{ transform: scale(1.00); opacity: 1; }
}
.win-pop__prize {
  margin-top: 10px;
  font: 900 clamp(16px,2.5vw,28px) "Manrope", Arial, sans-serif;
  color: var(--c-cream); text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(20,8,0,.44);
}
.win-pop__count {
  margin-top: 8px;
  display: inline-flex; padding: 5px 16px;
  border-radius: 999px;
  background: rgba(252,98,0,.16);
  color: var(--c-orange-lt);
  font: 900 11px "Manrope", Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ─── 15. OVERLAY / MODAL ────────────────────────────────────────────────── */
:root {
  /* aliases used by the imported/reference form styles */
  --fontFamily: "Manrope", Arial, sans-serif;
  --secondaryFont: "Zalando Sans Expanded", Arial, sans-serif;
  --secondary: #fff;
  --orangeColor: var(--c-orange);
  --button-color: var(--c-orange);
  --bg-input-color: linear-gradient(90deg, hsla(0, 0%, 100%, .096), hsla(0, 0%, 100%, .04));
  --color-danger: #ef4444;
  --color-border: #b2b2b2;
  --color-primary-muted: #e04e00;
  --shadow-soft: 0 .75rem 1.875rem rgba(0, 0, 0, .3);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,8,.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/bg/popup-bg-CBcy41h8.webp') center 45% / cover no-repeat;
  opacity: .75;
  pointer-events: none;
  z-index: 0;
}
.overlay.show {
  display: flex;
  animation: overlayIn .26s ease both;
}
@keyframes overlayIn { from { opacity: 0; } }

.modal {
  width: min(96vw, 34.75rem);
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, #223, #112);
  box-shadow:
    0 32px 120px rgba(0,0,8,.92),
    0 0 80px rgba(80,40,140,.08),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  animation: modalIn .42s var(--ease-spring) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(252,98,0,.28) transparent;
}
.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-thumb {
  background: rgba(252,98,0,.28);
  border-radius: 4px;
}
@keyframes modalIn {
  from { transform: scale(.62); opacity: 0; }
  to   { transform: scale(1.00); opacity: 1; }
}

/* ─── 16. REGISTRATION FORM — reference styles adapted to current modal ───── */

/* Form shell */
.modal .form__content {
  width: 100%;
  max-width: 34.75rem;
  padding-block: 2.1875rem;
  padding-inline: 4.0625rem;
  color: var(--secondary);
  font-family: var(--fontFamily);
}

/* Header: logo/text left, support icon right */
.modal .form__shell-top {
  align-items: center;
  border-bottom: .0625rem solid rgba(140, 140, 181, .62);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.8125rem;
  min-height: 2.125rem;
  padding-bottom: 2rem;
  position: relative;
}

.modal .form__shell-brand {
  align-items: center;
  display: inline-flex;
  gap: .5rem;
  justify-content: flex-start;
  min-width: 0;
}

.modal .form__shell-brand-icon {
  flex-shrink: 0;
  height: 3rem;
  width: 3rem;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(252,98,0,.35));
}

.modal .form__shell-brand-text {
  color: var(--secondary);
  font-family: var(--secondaryFont);
  font-size: 3rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.modal .form__shell-action {
  align-items: center;
  display: flex;
  flex: 0 0 1.5rem;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
  color: var(--button-color);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.modal .form__shell-support {
  background: var(--button-color);
  display: block;
  height: 100%;
  width: 100%;
  -webkit-mask: url("data:image/svg+xml,%3csvg%20width='17'%20height='18'%20viewBox='0%200%2017%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.25%208.12474V14.3747C16.25%2015.2035%2015.9208%2015.9984%2015.3347%2016.5845C14.7487%2017.1705%2013.9538%2017.4997%2013.125%2017.4997H8.75C8.58424%2017.4997%208.42527%2017.4339%208.30806%2017.3167C8.19085%2017.1995%208.125%2017.0405%208.125%2016.8747C8.125%2016.709%208.19085%2016.55%208.30806%2016.4328C8.42527%2016.3156%208.58424%2016.2497%208.75%2016.2497H13.125C13.6223%2016.2497%2014.0992%2016.0522%2014.4508%2015.7006C14.8025%2015.3489%2015%2014.872%2015%2014.3747H13.125C12.6277%2014.3747%2012.1508%2014.1772%2011.7992%2013.8256C11.4475%2013.4739%2011.25%2012.997%2011.25%2012.4997V9.37474C11.25%208.87746%2011.4475%208.40055%2011.7992%208.04892C12.1508%207.69729%2012.6277%207.49974%2013.125%207.49974H14.9727C14.8544%206.20048%2014.3689%204.96168%2013.5728%203.92806C12.7768%202.89443%2011.703%202.10865%2010.477%201.6625C9.25106%201.21635%207.92344%201.12824%206.64925%201.40847C5.37507%201.6887%204.20692%202.32569%203.28125%203.24505C2.1302%204.38092%201.42025%205.88887%201.27813%207.49974H3.125C3.62228%207.49974%204.0992%207.69729%204.45083%208.04892C4.80246%208.40055%205%208.87746%205%209.37474V12.4997C5%2012.997%204.80246%2013.4739%204.45083%2013.8256C4.0992%2014.1772%203.62228%2014.3747%203.125%2014.3747H1.875C1.37772%2014.3747%200.900806%2014.1772%200.549175%2013.8256C0.197544%2013.4739%200%2012.997%200%2012.4997V8.12474C0.0017523%206.51529%200.480956%204.94253%201.37696%203.60555C2.27296%202.26856%203.54547%201.22745%205.03343%200.613999C6.52139%200.000547022%208.1579%20-0.157669%209.73582%200.159376C11.3137%200.476421%2012.7621%201.25447%2013.8977%202.39505C14.6474%203.14842%2015.2411%204.04231%2015.6447%205.02552C16.0484%206.00872%2016.2541%207.06191%2016.25%208.12474Z'%20fill='%23D8D8D8'/%3e%3c/svg%3e") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg%20width='17'%20height='18'%20viewBox='0%200%2017%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.25%208.12474V14.3747C16.25%2015.2035%2015.9208%2015.9984%2015.3347%2016.5845C14.7487%2017.1705%2013.9538%2017.4997%2013.125%2017.4997H8.75C8.58424%2017.4997%208.42527%2017.4339%208.30806%2017.3167C8.19085%2017.1995%208.125%2017.0405%208.125%2016.8747C8.125%2016.709%208.19085%2016.55%208.30806%2016.4328C8.42527%2016.3156%208.58424%2016.2497%208.75%2016.2497H13.125C13.6223%2016.2497%2014.0992%2016.0522%2014.4508%2015.7006C14.8025%2015.3489%2015%2014.872%2015%2014.3747H13.125C12.6277%2014.3747%2012.1508%2014.1772%2011.7992%2013.8256C11.4475%2013.4739%2011.25%2012.997%2011.25%2012.4997V9.37474C11.25%208.87746%2011.4475%208.40055%2011.7992%208.04892C12.1508%207.69729%2012.6277%207.49974%2013.125%207.49974H14.9727C14.8544%206.20048%2014.3689%204.96168%2013.5728%203.92806C12.7768%202.89443%2011.703%202.10865%2010.477%201.6625C9.25106%201.21635%207.92344%201.12824%206.64925%201.40847C5.37507%201.6887%204.20692%202.32569%203.28125%203.24505C2.1302%204.38092%201.42025%205.88887%201.27813%207.49974H3.125C3.62228%207.49974%204.0992%207.69729%204.45083%208.04892C4.80246%208.40055%205%208.87746%205%209.37474V12.4997C5%2012.997%204.80246%2013.4739%204.45083%2013.8256C4.0992%2014.1772%203.62228%2014.3747%203.125%2014.3747H1.875C1.37772%2014.3747%200.900806%2014.1772%200.549175%2013.8256C0.197544%2013.4739%200%2012.997%200%2012.4997V8.12474C0.0017523%206.51529%200.480956%204.94253%201.37696%203.60555C2.27296%202.26856%203.54547%201.22745%205.03343%200.613999C6.52139%200.000547022%208.1579%20-0.157669%209.73582%200.159376C11.3137%200.476421%2012.7621%201.25447%2013.8977%202.39505C14.6474%203.14842%2015.2411%204.04231%2015.6447%205.02552C16.0484%206.00872%2016.2541%207.06191%2016.25%208.12474Z'%20fill='%23D8D8D8'/%3e%3c/svg%3e") center/contain no-repeat;
}

/* Title / login row */
.modal .form__content-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.modal .form__title {
  color: var(--secondary);
  font-family: var(--secondaryFont);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.modal .form__content-login {
  color: var(--button-color);
  font-family: var(--fontFamily);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: .125rem;
  white-space: nowrap;
  background: transparent;
}

.modal .form__content-support {
  display: none;
}

/* Register form ordering */
.modal .register-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal .field--email { order: 2; }
.modal .field--phone { order: 1; }
.modal .field--password { order: 3; }
.modal .check {
  margin-top: -.375rem;
  order: 4;
}
.modal .register-form__error { order: 5; }
.modal .register-form__submit { order: 6; }
.modal .register-form__signin { order: 7; }

/* Fields */
.modal .field {
  align-items: center;
  background: var(--bg-input-color);
  border: .0625rem solid hsla(0, 0%, 100%, .05);
  border-radius: .875rem;
  display: flex;
  gap: .5rem;
  line-height: 1.2;
  margin: 0;
  padding: 1.5rem 1.25rem 1.5rem 1rem;
  position: relative;
  transition: border-color .2s ease, margin-bottom .2s ease, background-color .2s ease, box-shadow .2s ease;
  width: 100%;
  z-index: 0;
}

.modal .field:focus-within,
.modal .field:hover {
  border-color: #ff5900cc;
}

.modal .field.field--invalid,
.modal .field.is-error,
.modal .field.field-error {
  border-color: var(--color-danger);
  margin-bottom: .875rem;
  z-index: 1;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.modal .field input {
  background-color: transparent;
  border: 0;
  color: #fff;
  font-family: var(--fontFamily);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  min-width: 0;
  outline: none;
  transition: transform .2s ease;
  width: 100%;
}

.modal .field input::placeholder {
  color: rgba(255,255,255,.42);
  opacity: 1;
}

.modal .field--phone input {
  flex: 1 1 auto;
}

.modal .field:not(.field--phone) input:not(:placeholder-shown) {
  transform: translateY(.5rem);
}

.modal .field__icon {
  position: absolute;
  left: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  opacity: .75;
  pointer-events: none;
  z-index: 2;
}

.modal .field--email input,
.modal .field--password input {
  padding-left: 3.625rem;
}

.modal .field--email .field__hidden-placeholder,
.modal .field--password .field__hidden-placeholder {
  left: 3.625rem;
}

.modal .field__phone-prefix {
  align-items: center;
  color: #ffffffc7;
  display: inline-flex;
  gap: .5rem;
  margin-right: .875rem;
  position: relative;
  white-space: nowrap;
}

.modal .field__phone-flag {
  display: block;
  height: 1.5rem;
  object-fit: contain;
  width: 1.5rem;
}

.modal .field__phone-code {
  color: rgba(255,255,255,.80);
  font-weight: 800;
  font-size: .95rem;
}

.modal .field__hidden-placeholder {
  color: #ffffff9e;
  font-size: .6875rem;
  left: 2.8125rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 1rem;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease;
}

.modal .field:not(.field--phone) input:not(:placeholder-shown) ~ .field__hidden-placeholder {
  opacity: 1;
  transform: translateY(0);
}

.modal .field__toggle {
  cursor: pointer;
  display: grid;
  place-items: center;
  position: absolute;
  right: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(255,255,255,.55);
}

.modal .field__eye {
  height: 1.25rem;
  width: 1.25rem;
  object-fit: contain;
}

.modal .field__error {
  align-items: center;
  color: var(--color-danger);
  display: flex;
  font-family: var(--fontFamily);
  font-size: .75rem;
  gap: .375rem;
  left: 0;
  line-height: .875rem;
  opacity: 0;
  position: absolute;
  top: calc(100% + .4375rem);
  transform: translateY(.375rem);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  visibility: hidden;
  z-index: 2;
}

.modal .field__error.shown,
.modal .field.is-error .field__error,
.modal .field.field-error .field__error,
.modal .field.field--invalid .field__error,
.modal .check.is-error .field__error,
.modal .check.field-error .field__error,
.modal .check.field--invalid .field__error {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.modal .field__error-icon {
  flex-shrink: 0;
  height: .75rem;
  object-fit: contain;
  width: .75rem;
}

/* Checkbox */
.modal .check {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: .75rem;
  justify-content: center;
  position: relative;
}

.modal .check.field--invalid,
.modal .check.is-error,
.modal .check.field-error {
  margin-bottom: .875rem;
  z-index: 1;
}

.modal .check input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.modal .check__box {
  background: transparent;
  border: .0625rem solid var(--color-border);
  border-radius: .5rem;
  display: grid;
  height: 1.75rem;
  min-width: 1.75rem;
  place-items: center;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  width: 1.75rem;
}

.modal .check:focus-visible .check__box,
.modal .check:hover .check__box {
  border-color: var(--orangeColor);
}

.modal .check__icon {
  color: #fff;
  font-size: .875rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease;
}

.modal .check input:checked + .check__box,
.modal .check input:checked ~ .check__box {
  background: var(--button-color);
  border-color: var(--button-color);
  box-shadow: var(--shadow-soft);
}

.modal .check input:checked + .check__box .check__icon,
.modal .check input:checked ~ .check__box .check__icon {
  opacity: 1;
  transform: scale(1);
}

.modal .check__text {
  color: silver;
  font-family: var(--fontFamily);
  font-size: .875rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.modal .check__text strong {
  color: var(--button-color);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.modal .check__text a {
  color: var(--button-color);
  text-decoration: underline;
  text-underline-offset: .125rem;
}

.modal .check__text .field__error {
  left: 0;
  top: calc(100% + .4375rem);
}

/* Bonus card */
.modal .bonus-card {
  align-items: center;
  background: var(--bg-input-color);
  border: .125rem solid var(--button-color);
  border-radius: .75rem;
  color: var(--secondary);
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  width: 100%;
  text-align: left;
  cursor: default;
}

.modal .bonus-card__icon {
  display: flex;
  flex-shrink: 0;
  height: 3.75rem;
  width: 2.5rem;
  object-fit: contain;
}

.modal .bonus-card__body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-right: 1rem;
  min-width: 0;
}

.modal .bonus-card__top {
  align-items: center;
  display: flex;
  gap: .25rem;
}

.modal .bonus-card__badge {
  background-color: var(--button-color);
  border-radius: .25rem;
  color: #fff;
  font-family: var(--fontFamily);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  padding: .125rem .25rem;
}

.modal .bonus-card__label {
  color: #ffffffb3;
  font-family: var(--fontFamily);
  font-size: .75rem;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal .bonus-card__text {
  color: var(--secondary);
  font-family: var(--fontFamily);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.modal .bonus-card__text strong,
.modal .reg-bonus-hi {
  color: var(--button-color);
  font-weight: 900;
}
.modal .reg-bonus-plus {
  color: rgba(255,255,255,.55);
  font-weight: 700;
}

/* Submit / sign-in */
.modal .register-form__submit {
  background: var(--orangeColor);
  border: 0;
  border-radius: .75rem;
  color: #fff;
  cursor: pointer;
  font-family: var(--secondaryFont);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
  padding-block: 1.5rem;
  padding-inline: 1.6875rem;
  text-transform: uppercase;
  transition: background-color .2s ease, transform .2s ease, filter .2s ease;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.modal .register-form__submit:focus-visible,
.modal .register-form__submit:hover {
  background: var(--color-primary-muted);
  filter: brightness(1.04);
}

.modal .register-form__submit:active {
  transform: translateY(.0625rem);
}

.modal .register-form__submit svg,
.modal .register-form__lines {
  display: none;
}

.modal .register-form__submit-text {
  position: relative;
  z-index: 1;
}

.modal .register-form__signin {
  color: #fff;
  font-family: var(--secondaryFont);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: .5rem;
  text-align: center;
}

.modal .register-form__signin a {
  color: var(--button-color) !important;
  text-decoration: underline;
  text-underline-offset: .125rem;
}

/* Mobile adjustments copied/adapted from reference CSS */
@media (max-width: 68.75em) {
  .modal .check {
    justify-content: flex-start;
  }

  .modal .bonus-card {
    display: grid;
    gap: .5rem;
    grid-template-columns: 2.5rem 1fr auto;
  }

  .modal .bonus-card__body {
    margin-right: 0;
    text-align: left;
  }

  .modal .bonus-card__text br {
    display: none;
  }
}

/* ── Desktop (≥769px): form centering · scroll lock · checkbox · compact form ── */
@media (min-width: 769px) {
  /* Force overlay to properly flex-center the modal and never allow overflow */
  .overlay.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  /* Modal: auto-center, cap to viewport height, hide overflow.
     Form is compacted below so it fits without internal scroll. */
  .modal {
    margin: 0 auto !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
  }

  /* Compact form vertical spacing so the full form fits without scroll */
  .modal .form__content {
    padding-block: 1.25rem;
  }
  .modal .form__shell-top {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
  .modal .register-form {
    gap: 1rem;
  }
  .modal .field {
    padding-block: 1.25rem;
  }

  /* Checkbox row: fit-content block centered, text left-aligned after checkbox */
  .modal .check {
    width: fit-content !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .modal .check__text {
    text-align: left !important;
  }
  .modal .check__text a {
    display: block !important;
  }

  /* Hard scroll lock — page, html, body */
  html, body {
    overflow: hidden !important;
    height: 100% !important;
  }
  .page {
    height: 100dvh !important;
    overflow: hidden !important;
  }
}

@media (max-width: 37.5em) {
  .modal {
    max-height: none;
  }
}

@media (max-width: 29.99875em) {
  .overlay {
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }

  .modal {
    width: 100vw;
    max-width: none;
    min-height: 100dvh;
    max-height: none;
    overflow-y: visible;
    border-radius: 0;
  }

  .modal .form__content {
    padding-inline: clamp(1.25rem, .38903061224375rem + 3.6734693878vw, 4.0625rem);
  }

  .modal .form__content-header {
    margin-bottom: .875rem;
  }

  .modal .form__title {
    font-size: clamp(.875rem, .6836734693875rem + .8163265306vw, 1.5rem);
  }

  .modal .form__shell-brand-icon {
    height: 2.6rem;
    width: 2.6rem;
  }

  .modal .form__shell-brand-text {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .modal .register-form {
    gap: .875rem;
  }

  .modal .check {
    margin-top: 0;
  }

  .modal .field {
    font-size: .875rem;
    padding-block: 1rem;
  }

  .modal .field__hidden-placeholder {
    top: .625rem;
  }

  .modal .bonus-card {
    margin-bottom: .875rem;
    padding-block: .375rem;
  }

  .modal .bonus-card__body {
    gap: .125rem;
  }

  .modal .bonus-card__text {
    font-size: 1rem;
  }

  .modal .register-form__submit {
    font-size: clamp(1rem, .92346938775625rem + .3265306122vw, 1.25rem);
    padding-block: clamp(1.25rem, 1.17346938775625rem + .3265306122vw, 1.5rem);
  }
}

@media (max-width: 23.4375em) {
  .modal .form__title {
    font-size: .875rem;
  }

  .modal .register-form__submit {
    font-size: 1rem;
    padding-block: 1.25rem;
  }
}

@media (hover:hover) {
  .modal .form__shell-action--next:hover {
    color: var(--color-primary-muted);
  }

  .modal .form__shell-action--next:hover .form__shell-support {
    background: var(--color-primary-muted);
  }
}


/* ─── 17. SUCCESS CARD ──────────────────────────────────────────────────── */
.success-card {
  padding: clamp(32px,5.5vw,52px) clamp(22px,5vw,42px);
  text-align: center;
}
.success-tiger {
  width: clamp(86px,12.5vw,130px); height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.48));
  animation: successPop .65s var(--ease-spring) both;
}
@keyframes successPop {
  from { transform: scale(.34) rotate(-14deg); opacity: 0; }
  to   { transform: scale(1.00) rotate(0deg);  opacity: 1; }
}
.success-card h2 {
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: clamp(30px,5.5vw,48px);
  font-weight: 700;
  color: var(--c-orange-lt); text-transform: uppercase;
  display: block;
  transform: skewX(-8deg);
  text-rendering: optimizeLegibility;
}
.success-card p {
  margin-top: 10px; color: var(--c-cream);
  font-weight: 900; font-size: clamp(12px,1.6vw,16px); line-height: 1.55;
}

/* ─── 18. DISCLAIMER ────────────────────────────────────────────────────── */
.disclaimer {
  flex-shrink: 0;
  padding: clamp(6px,1.1vh,13px) 20px;
  text-align: center;
  font-size: clamp(9px,1.0vw,12px);
  font-weight: 800; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  z-index: 10;
}

/* ─── 19. FLYING LUCKY PARTICLES ─────────────────────────────────────────── */
.lucky-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  /* will-change removed — 28 compositor layers was causing GPU overload */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.lucky-particle.coin {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%,
    #FFFAC8 0% 13%, #FFE354 36%, #FFA820 64%, #9A5808 100%);
  box-shadow:
    0 0 10px rgba(255,200,60,.40),
    0 2px 6px rgba(100,40,0,.30),
    inset 0 1px 0 rgba(255,255,255,.60);
}
.lucky-particle.symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--psz);
  color: var(--pclr);
  text-shadow: 0 0 14px var(--pglow);
  line-height: 1;
}

@keyframes particleLR {
  from { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--pr0)); }
  7%   { opacity: var(--popa); }
  92%  { opacity: var(--popa); }
  to   { opacity: 0; transform: translate3d(132vw, var(--psway), 0) rotate(var(--pr1)); }
}
@keyframes particleRL {
  from { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--pr0)); }
  7%   { opacity: var(--popa); }
  92%  { opacity: var(--popa); }
  to   { opacity: 0; transform: translate3d(-132vw, var(--psway), 0) rotate(var(--pr1)); }
}
@keyframes particleBT {
  from { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--pr0)) scale(.85); }
  7%   { opacity: var(--popa); }
  92%  { opacity: var(--popa); }
  to   { opacity: 0; transform: translate3d(var(--psway), -142vh, 0) rotate(var(--pr1)) scale(1.1); }
}
@keyframes particleDiag {
  from { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--pr0)); }
  8%   { opacity: var(--popa); }
  91%  { opacity: var(--popa); }
  to   { opacity: 0; transform: translate3d(var(--pdx), var(--pdy), 0) rotate(var(--pr1)); }
}

/* ─── 20. RESPONSIVE 1024px — tablet + mobile logo centering ─────────────── */
@media (max-width: 1024px) {
  :root { --wheel-size: clamp(235px, min(53vw, 54svh), 571px); }

  /* Center the brand on tablet/mobile */
  .header__inner {
    position: relative;
    justify-content: center;
  }
}

/* ─── 21. RESPONSIVE 768px — mobile layout ───────────────────────────────── */
@media (max-width: 768px) {
  :root { --wheel-size: clamp(260px, 78vw, 420px); }

  .hero__stage {
    position: static;      /* tiger escapes to .page as containing block */
    flex: 0 0 auto;        /* wraps to content — no size containment issues */
    min-height: auto;
    align-items: center;
    justify-content: center;
    padding: clamp(36px,5vh,54px) 0 clamp(8px,1.5vh,16px); /* top: clears ring/pin */
  }

  .hero__head {
    padding-top: clamp(6px,1.5vh,14px);
    padding-bottom: clamp(4px,1vh,10px);
  }

  .hero__cta {
    padding-top: clamp(28px,5vh,46px);
    padding-bottom: clamp(6px,1.2vh,14px);
  }

  /*
   * Tiger on mobile: z-index 11 puts it in front of the wheel (10) but behind
   * the spin button (12). The wheel is 78vw wide — there is no room to the
   * left of it to show the tiger at z-index 6. The mask fades the right half
   * quickly so the wheel's spinning segments remain readable through the tiger.
   */
  .tiger {
    position: absolute;
    left: -10px;
    bottom: -10vh;
    width: clamp(260px, 80vw, 360px);
    z-index: 11;
    opacity: 1;
  }
  .wheel-area {
    transform: translateY(-10%);
  }
  .tiger__img {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Reduce petal/micro-coin opacity on mobile — less intrusive */
  .petal      { opacity: .30; }
  .micro-coin { opacity: .30; }

  .deco-layer            { display: none; }
  .hero__desc            { display: none; }

  .hero__eyebrow { font-size: clamp(9px,2.2vw,12px); }
  .hero__title   { font-size: clamp(30px,8.2vw,68px); white-space: nowrap; }
  .disclaimer    { font-size: clamp(9px,2.5vw,11px); }

  .spin-btn { font-size: clamp(16px,5.2vw,23px); padding: 13px clamp(28px,9vw,52px); }
}

/* ─── 22. RESPONSIVE 480px — small phones ───────────────────────────────── */
@media (max-width: 480px) {
  :root { --wheel-size: clamp(248px, 84vw, 360px); }

  .tiger {
    width: clamp(240px, 78vw, 320px);
    left: -8px;
    bottom: -10vh;
    opacity: 1;
  }

  .header { padding: 8px 14px; }
  .Ti     { height: clamp(30px,4.2vh,44px); }

  .hero__eyebrow { display: none; }
  .hero__title   { font-size: clamp(26px,8.8vw,44px); white-space: nowrap; }
  .hero__head    { padding-top: clamp(4px,1vh,8px); padding-bottom: clamp(2px,.6vh,6px); }

  .hero__stage { padding-top: clamp(30px,4.5vh,48px); padding-bottom: clamp(4px,1vh,10px); }

  .hero__cta { padding-top: clamp(24px,4.2vh,40px); padding-bottom: clamp(4px,.8vh,10px); }

  .spin-btn {
    font-size: clamp(15px,5.5vw,22px);
    padding: 12px clamp(24px,10vw,50px);
    max-width: 82vw;
  }

  .bg__img { object-position: 55% 28%; }

  .modal      { width: min(96vw, 420px); }
}

/* ─── 23. SHORT VIEWPORT (landscape phones) ──────────────────────────────── */
@media (max-height: 580px) {
  :root { --wheel-size: clamp(190px, 42vw, 340px); }
  .hero__stage  {
    flex: 0 0 auto;
    min-height: auto;
    align-items: center;
    padding: clamp(8px,2vh,16px) 0 clamp(4px,1.2vh,10px);
  }
  .hero__cta    { padding-top: clamp(20px,3.8vh,32px); padding-bottom: 4px; }
  .hero__title  { font-size: clamp(22px,5.8vw,48px); white-space: nowrap; }
  .hero__eyebrow, .hero__desc { display: none; }
  .disclaimer   { display: none; }
  .tiger        { opacity: .22; }
}

/* ─── 24. REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:       .01ms !important;
  }
  .lucky-particle { display: none; }
}

/* ─── 24b. TAB HIDDEN — pause non-critical animations to save GPU ────────── */
.page-is-hidden .petal,
.page-is-hidden .micro-coin,
.page-is-hidden .lucky-particle,
.page-is-hidden .bg__radial,
.page-is-hidden .wheel-area__glow,
.page-is-hidden .tiger,
.page-is-hidden .wheel-disc__ring,
.page-is-hidden .deco {
  animation-play-state: paused;
}

/* ─── 25. HIDE iOS SAFARI PLAY BUTTON ON TIGER VIDEO ────────────────────── */
#tigerVideo::-webkit-media-controls,
#tigerVideo::-webkit-media-controls-start-playback-button,
#tigerVideo::-webkit-media-controls-play-button,
#tigerVideo::-webkit-media-controls-overlay-play-button,
#tigerVideo::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}


.field--phone .field__phone-prefix {
  top: 42% !important;
  transform: translateY(-50%) !important;
}

/* Checkbox row: full-width, left-aligned, grid layout */
.register-form .check {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  align-self: stretch !important;
  justify-self: stretch !important;
  justify-content: flex-start !important;

  display: grid !important;
  grid-template-columns: 32px 1fr !important;
  column-gap: 8px !important;
  align-items: start !important;
}

.register-form .check__box {
  grid-column: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
}

.register-form .check__text {
  grid-column: 2 !important;
  text-align: left !important;
  justify-self: start !important;
  max-width: 100% !important;
}

.register-form .check__text a {
  display: block !important;
}


/* ─── Logo position fix: 769px–1024px range ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 120 !important;
    padding: 18px 32px !important;
    pointer-events: none !important;
  }

  .header__inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .header__brand {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: scale(2.2) !important;
    transform-origin: left top !important;
    z-index: 130 !important;
    pointer-events: auto !important;
  }

  .hero__head {
    z-index: 40 !important;
  }
}

/* ─── 26. MOBILE 480px: form layout & checkbox text ─────────────────────── */
@media (max-width: 480px) {
  .overlay.show {
    padding: 4px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .modal {
    width: calc(100vw - 16px) !important;
    max-width: 390px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .form__content {
    padding-top: 18px !important;
    padding-bottom: 10px !important;
  }

  .form__shell-top {
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
  }

  .register-form__signin {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  .check__text {
    font-size: 11px !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
    text-align: left !important;
  }

  .check__text a,
  .check__text strong {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 700 !important;
  }

  .check__text a {
    display: block !important;
  }
}


/* ─── 27. FINAL FORM FIELD ALIGNMENT ────────────────────────────────────── */
.register-form .field {
  display: grid !important;
  grid-template-columns: 76px 1fr 44px !important;
  align-items: center !important;

  width: 100% !important;
  height: 66px !important;
  min-height: 66px !important;

  padding: 0 !important;
  box-sizing: border-box !important;
}

.register-form .field input {
  grid-column: 2 !important;

  width: 100% !important;
  height: 66px !important;
  min-height: 66px !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: normal !important;
  text-align: left !important;
}

.register-form .field__icon {
  grid-column: 1 !important;
  position: static !important;
  transform: none !important;

  justify-self: center !important;
  align-self: center !important;

  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

/* Phone prefix: flag + country code, first grid column */
.register-form .field__phone-prefix {
  grid-column: 1 !important;

  position: static !important;
  transform: none !important;
  inset: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: 100% !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.register-form .field__phone-flag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
}

.register-form .field__phone-flag img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: block !important;
}

.register-form .field__phone-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: static !important;
  transform: none !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.register-form .field__toggle {
  grid-column: 3 !important;

  position: static !important;
  transform: none !important;

  justify-self: center !important;
  align-self: center !important;

  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
}

/* ─── 28. CHECKBOX ICON ──────────────────────────────────────────────────── */
.check__box {
  background: #FC6200 !important;
  border: none !important;
  border-radius: 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.check__icon {
  width: 25px !important;
  height: 25px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.check__icon svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
}

.check__icon svg path {
  stroke: #ffffff !important;
  stroke-width: 3.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* unchecked state */
.check input[type="checkbox"]:not(:checked) + .check__box {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
}

.check input[type="checkbox"]:not(:checked) + .check__box .check__icon {
  opacity: 0 !important;
}

/* checked state */
.check input[type="checkbox"]:checked + .check__box {
  background: #FC6200 !important;
  border: none !important;
}

.check input[type="checkbox"]:checked + .check__box .check__icon {
  opacity: 1 !important;
}

/* Final size override: 22px check icon */
.check__icon svg {
  width: 22px !important;
  height: 22px !important;
}

.check__icon svg path {
  stroke-width: 3.4 !important;
}

/* ─── 29. CHECKBOX STATE (class-driven) ─────────────────────────────────── */
#ageRow .check__box {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: none !important;
}

#ageRow .check__icon {
  opacity: 0 !important;
  visibility: hidden !important;
}

#ageRow.is-checked .check__box {
  background: #FC6200 !important;
  background-color: #FC6200 !important;
  background-image: none !important;
  border: 2px solid #FC6200 !important;
}

#ageRow.is-checked .check__icon {
  opacity: 1 !important;
  visibility: visible !important;
}