/* =========================================================
   Holland Casino Online — Wheel landing
   Кольори взяті з Figma.
   ========================================================= */

:root{
  --navy:      #001D40;
  --navy-2:    #0E4D9D;
  --pink:      #FA136C;
  --pink-2:    #F60076;
  --orange:    #F87038;
  --gold:      #FDF697;
  --white:     #FFFFFF;

  --grad-btn:  linear-gradient(90deg, #F60076 0%, #F87038 100%);
  --grad-bar:  linear-gradient(90deg, #F18942 0%, #E73088 100%);
  --font:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wheel-size: 630px;   /* десктоп — за макетом */
  --orbit-size: 900px;   /* більші іконки — трохи ширша орбіта, щоб не лізли на обід */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  overflow:hidden;
  background:var(--navy);
  font-family:var(--font);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

img{ display:block; max-width:100%; user-select:none; -webkit-user-drag:none; pointer-events:none; }

/* ---------------------------------------------------------
   BACKGROUND
   --------------------------------------------------------- */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--navy); }

.bg__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.9;
  transform:scale(1.06);
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{ from{ transform:scale(1.06);} to{ transform:scale(1.14) translateY(-1%);} }

.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(75% 65% at 50% 45%, rgba(14,77,157,.55) 0%, rgba(0,29,64,.55) 55%, rgba(0,14,34,.92) 100%);
}

.bg__shapes{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  animation:shapesPulse 9s ease-in-out infinite;
}
@keyframes shapesPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03);} }

.bg__confetti{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.9;
  animation:confDrift 14s ease-in-out infinite alternate;
}
@keyframes confDrift{ from{ transform:translateY(-1.5%) scale(1.02);} to{ transform:translateY(1.5%) scale(1.05);} }

.confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---------------------------------------------------------
   PRELOADER
   --------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-hidden{ opacity:0; visibility:hidden; }

.loader__inner{ display:grid; justify-items:center; gap:38px; width:min(84vw,460px); }

.loader__logo{
  width:min(66vw,340px);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.6));
  animation:logoIn .9s cubic-bezier(.2,.9,.25,1.2) both, logoPulse 2.6s ease-in-out 1s infinite;
}
@keyframes logoIn{ from{ opacity:0; transform:scale(.8) translateY(16px);} to{ opacity:1; transform:none;} }
@keyframes logoPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} }

.loader__bar{
  position:relative;
  width:100%; height:34px;
  padding:1px;
  border:3px solid #2E7BD6;
  border-radius:999px;
  background:
    repeating-linear-gradient(115deg,
      #FFFFFF 0 12px,
      #E4E9EF 12px 24px);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 2px 4px rgba(0,0,0,.18);
  overflow:hidden;
  animation:dropIn .6s ease .2s both;
}
/* Градієнт зафіксований на всю ширину смуги, а показуємо його через clip-path.
   Так колір не «стискається» і нічого не мигає — просто рівний рух зліва направо. */
.loader__fill{
  position:absolute; inset:1px;
  border-radius:999px;
  background:var(--grad-btn);
  clip-path:inset(0 100% 0 0);      /* JS зменшує праву відсічку */
}

/* ---------------------------------------------------------
   STAGE
   --------------------------------------------------------- */
.stage{
  position:relative; z-index:10;
  height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:14px;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease .1s, visibility .6s ease .1s;
}
.stage.is-visible{ opacity:1; visibility:visible; }

.stage__logo{
  position:absolute; top:18px; left:24px; z-index:14;
  width:clamp(90px,10vw,150px);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));
  animation:dropIn .7s cubic-bezier(.2,.9,.25,1.2) .2s both;
}

.head{ text-align:center; }
.head__sub{
  font-size:clamp(16px,2.1vw,30px); font-weight:700; letter-spacing:.06em;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
  animation:dropIn .7s cubic-bezier(.2,.9,.25,1.2) .3s both;
}
.head__main{
  font-size:clamp(32px,5.4vw,72px); font-weight:900; font-style:italic;
  line-height:1.05;
  text-shadow:0 5px 22px rgba(0,0,0,.7);
  animation:dropIn .7s cubic-bezier(.2,.9,.25,1.2) .45s both;
}
@keyframes dropIn{ from{ opacity:0; transform:translateY(-22px) scale(.94);} to{ opacity:1; transform:none;} }

/* ---------------------------------------------------------
   SCENE / WHEEL
   --------------------------------------------------------- */
.scene{
  position:relative; width:100%; max-width:1180px;
  flex:1 1 auto; display:grid; place-items:center; min-height:0;
}

.wheel-wrap{
  position:relative; z-index:5;
  width:var(--wheel-size); height:var(--wheel-size);
  display:grid; place-items:center;
  animation:wheelIn 1s cubic-bezier(.2,.9,.25,1.2) .5s both;
}
@keyframes wheelIn{ from{ opacity:0; transform:scale(.6) rotate(-25deg);} to{ opacity:1; transform:none;} }

/* мʼяке золоте гало навколо колеса */
.wheel-glow{
  position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,200,80,.85) 34%,
    rgba(255,150,40,.45) 46%,
    rgba(250,19,108,.25) 58%,
    transparent 70%);
  filter:blur(14px);
  animation:glowPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{ 0%,100%{ transform:scale(.96); opacity:.65;} 50%{ transform:scale(1.06); opacity:1;} }

/* золоті іскри-дуги з макета — ПОВЕРХ колеса, повільно обертаються */
/* ядро дуги в PNG сидить на 0.717 від пів-розміру; 157% виводить його на новий, ширший обід */
.wheel-light{
  position:absolute; inset:-28.5%;
  width:157%; height:157%;
  max-width:none;
  z-index:5;                       /* вище диска, нижче стрілки */
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:lightSpin 9s linear infinite, lightPulse 2.2s ease-in-out infinite;
}
@keyframes lightSpin{ to{ transform:rotate(360deg);} }
@keyframes lightPulse{ 0%,100%{ opacity:.8;} 50%{ opacity:1;} }

/* під час спіну іскри крутяться швидше */
.wheel.is-spinning ~ .wheel-light{ animation:lightSpin 1.6s linear infinite, lightPulse 1s ease-in-out infinite; }

.wheel{
  position:relative; width:100%; height:100%;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--white);
  /* золотий кант + широкий рожевий обід, як у макеті */
  box-shadow:
    0 22px 60px rgba(0,0,0,.6),
    0 0 0 9px #EFC559,
    0 0 0 30px var(--pink),
    0 0 46px 10px rgba(255,190,70,.55);
}

.wheel__disc{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:50%;
  transform:rotate(0deg);
  will-change:transform;
}
.wheel:not(.is-spinning) .wheel__disc{ animation:wobble 5s ease-in-out infinite; }
@keyframes wobble{ 0%,100%{ transform:rotate(-1.2deg);} 50%{ transform:rotate(1.2deg);} }

.wheel__hub{
  position:relative; z-index:3;
  width:30%; height:30%;
  border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #17418C, #001D40);
  display:grid; place-items:center;
  padding:6%;
  box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 0 5px var(--white);
}
.wheel__hub img{ width:100%; }

/* Пін: більший і «лежить» на колесі — вістря заходить у сектор,
   основа перекриває обід (як у макеті). */
.wheel__pointer{
  position:absolute; top:-5.5%; left:50%; z-index:6;
  width:18%;
  transform:translateX(-50%);
  transform-origin:50% 0%;          /* хитається від основи, вістря не відривається */
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
  animation:pointerTick 2.4s ease-in-out infinite;
}
@keyframes pointerTick{ 0%,100%{ transform:translateX(-50%) rotate(0);} 50%{ transform:translateX(-50%) rotate(-6deg);} }

/* під час спіну пін «клацає» частіше */
.wheel.is-spinning + .wheel-light + .wheel__pointer,
.wheel.is-spinning ~ .wheel__pointer{ animation:pointerTick .18s ease-in-out infinite; }

/* ---------------------------------------------------------
   ORBIT — іконки ігор навколо колеса
   --------------------------------------------------------- */
.orbit{
  position:absolute;
  width:var(--orbit-size); height:var(--orbit-size);
  animation:orbitSpin 36s linear infinite;
  pointer-events:none;
}
@keyframes orbitSpin{ to{ transform:rotate(360deg);} }

.orbit__item{
  position:absolute; top:50%; left:50%;
  width:18%; height:18%;
  margin:-9% 0 0 -9%;
  transform:rotate(var(--a)) translateY(calc(var(--orbit-size) / -2)) rotate(calc(var(--a) * -1));
}
.orbit__item i{ display:block; width:100%; height:100%; animation:orbitCounter 36s linear infinite; }
@keyframes orbitCounter{ to{ transform:rotate(-360deg);} }

.orbit__item img{
  width:100%; height:100%; object-fit:contain;
  animation:iconPulse 2s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes iconPulse{
  0%,100%{ transform:scale(.85); filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) brightness(.9); }
  50%    { transform:scale(1.15); filter:drop-shadow(0 8px 22px rgba(250,19,108,.7)) brightness(1.12); }
}

/* ---------------------------------------------------------
   PEOPLE
   --------------------------------------------------------- */
/* Люди «прибиті» до нижніх кутів. Жодних вертикальних зсувів угору —
   інакше зʼявляється рівний зріз знизу. «Дихають» масштабом від нижньої точки,
   плюс запас -2% нижче краю екрана. */
.person{
  position:absolute; bottom:-8vh; z-index:1;   /* зріз PNG іде за нижній край екрана */
  height:min(98vh, 1020px); width:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
  transform-origin:50% 100%;
  will-change:transform;
}
.person--l{ left:0;  animation:personInL .9s cubic-bezier(.2,.9,.25,1.2) .55s both, swayL 5s ease-in-out 1.6s infinite; }
.person--r{ right:0; animation:personInR .9s cubic-bezier(.2,.9,.25,1.2) .65s both, swayR 5.6s ease-in-out 1.8s infinite; }

@keyframes personInL{ from{ opacity:0; transform:translateX(-70px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes personInR{ from{ opacity:0; transform:translateX(70px)  scale(.96);} to{ opacity:1; transform:none;} }

@keyframes swayL{ 0%,100%{ transform:scale(1);}      50%{ transform:scale(1.018); } }
@keyframes swayR{ 0%,100%{ transform:scale(1);}      50%{ transform:scale(1.022); } }

.stage.is-spinning .person--l{ animation:cheerL .5s ease-in-out infinite; }
.stage.is-spinning .person--r{ animation:cheerR .5s ease-in-out infinite; }
@keyframes cheerL{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045); } }
@keyframes cheerR{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);  } }

/* ---------------------------------------------------------
   CHIPS
   --------------------------------------------------------- */
.chip{ position:absolute; z-index:6; width:110px; filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)); }
.float{ animation:floatY 6s ease-in-out infinite; }
@keyframes floatY{
  0%,100%{ transform:translateY(0)     rotate(-7deg); }
  50%    { transform:translateY(-28px) rotate(7deg);  }
}
.chip--1{ left:1%;  top:8%;    width:120px; animation-duration:5.2s; }
.chip--2{ left:6%;  bottom:2%; width:150px; animation-duration:7s;   animation-delay:.6s; }
.chip--3{ right:2%; top:6%;    width:130px; animation-duration:6.4s; animation-delay:.3s; }
.chip--4{ right:5%; bottom:4%; width:110px; animation-duration:5.8s; animation-delay:.9s; }
.chip--5{ left:24%; top:2%;    width:70px;  animation-duration:6.8s; animation-delay:1.2s; }
.chip--6{ right:23%;bottom:1%; width:80px;  animation-duration:6.1s; animation-delay:.4s; }

.chip--l1{ left:9%;  bottom:16%; width:140px; }
.chip--l2{ right:8%; top:16%;    width:110px; animation-delay:.8s; }
.chip--l3{ right:20%;bottom:12%; width:80px;  animation-delay:1.4s; }

.chip--m1{ left:-6%;  bottom:14%; width:120px; }
.chip--m2{ right:-4%; top:20%;    width:100px; animation-delay:.7s; }

/* ---------------------------------------------------------
   FLARE + SHOCKWAVE
   --------------------------------------------------------- */
.flare{
  position:absolute; z-index:7;
  width:200%; height:200%;
  object-fit:contain; opacity:0; pointer-events:none;
  mix-blend-mode:screen;
}
.flare.is-burst{ animation:flareBurst 1.3s ease-out forwards; }
@keyframes flareBurst{
  0%  { opacity:0; transform:scale(.25) rotate(0);}
  28% { opacity:1; transform:scale(1.1) rotate(25deg);}
  100%{ opacity:0; transform:scale(1.5) rotate(65deg);}
}

.shockwave{
  position:absolute; z-index:6;
  width:100%; height:100%;
  border-radius:50%;
  border:6px solid rgba(253,246,151,.95);
  opacity:0; pointer-events:none;
}
.shockwave.is-burst{ animation:shock .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes shock{
  0%  { opacity:.95; transform:scale(.7); border-width:16px; }
  100%{ opacity:0;   transform:scale(2.5); border-width:1px; }
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  position:relative; z-index:12;
  display:inline-grid; place-items:center;
  border:0; cursor:pointer;
  font-family:var(--font); font-weight:800; letter-spacing:.08em;
  color:var(--white); text-decoration:none;
  background:var(--grad-btn);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(250,19,108,.5), inset 0 -3px 0 rgba(0,0,0,.2);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn::after{
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg);
  animation:shine 2.6s ease-in-out infinite;
}
@keyframes shine{ 0%{ left:-60%;} 55%,100%{ left:130%;} }
.btn:active{ transform:scale(.96); }

.btn--spin{
  width:min(82vw,400px); height:82px; font-size:34px;
  border-radius:16px;
  animation:btnPop .7s cubic-bezier(.2,.9,.25,1.2) .8s both, btnPulse 1.6s ease-in-out 1.6s infinite;
}
@keyframes btnPop{ from{ opacity:0; transform:translateY(26px) scale(.9);} to{ opacity:1; transform:none;} }
@keyframes btnPulse{
  0%,100%{ transform:scale(1);    box-shadow:0 10px 30px rgba(250,19,108,.5); }
  50%    { transform:scale(1.055); box-shadow:0 14px 44px rgba(250,19,108,.85); }
}
.btn--spin.is-disabled{ pointer-events:none; filter:grayscale(.5) brightness(.8); animation:none; }

.btn--cta{
  width:min(72%,300px); height:58px; font-size:20px; margin-top:16px;
  animation:btnPulse 1.4s ease-in-out infinite;
}

.attempts{
  margin-top:10px; font-size:14px; font-weight:600; opacity:.9;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.attempts b{ color:var(--gold); }

/* ---------------------------------------------------------
   WIN MODAL
   --------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.modal.is-open{ opacity:1; visibility:visible; }

.modal__backdrop{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 45%, rgba(14,77,157,.55) 0%, rgba(0,14,34,.94) 100%);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal__confetti{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
}
.modal.is-open .modal__confetti{ animation:confIn .8s ease .2s forwards; }
@keyframes confIn{ from{ opacity:0; transform:scale(1.1);} to{ opacity:1; transform:scale(1);} }

.confetti--modal{ position:absolute; inset:0; z-index:1; }

.modal__box{
  position:relative; z-index:2;
  width:min(92vw,600px);
  padding:26px 22px 34px;
  text-align:center;
  transform:scale(.7); opacity:0;
}
.modal.is-open .modal__box{ animation:boxIn .7s cubic-bezier(.2,.9,.25,1.35) .1s forwards; }
@keyframes boxIn{ to{ transform:scale(1); opacity:1; } }

.modal__logo{ width:190px; margin:0 auto 14px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.65)); }

.modal__title{
  display:grid;
  font-size:clamp(50px,11vw,104px); font-weight:900; font-style:italic; line-height:.9;
  text-shadow:0 8px 0 rgba(0,0,0,.22), 0 16px 44px rgba(0,0,0,.65);
}
.modal__title span{ display:block; opacity:0; }
.modal.is-open .modal__title span:nth-child(1){ animation:titlePop .55s cubic-bezier(.2,.9,.25,1.5) .35s forwards; }
.modal.is-open .modal__title span:nth-child(2){ animation:titlePop .55s cubic-bezier(.2,.9,.25,1.5) .5s forwards; }
@keyframes titlePop{
  0%  { opacity:0; transform:scale(.4) rotate(-8deg); }
  70% { opacity:1; transform:scale(1.13) rotate(2deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}

.modal__panel{
  margin-top:22px; padding:24px 18px 28px;
  border:2px solid rgba(255,255,255,.4);
  border-radius:18px;
  background:rgba(0,29,64,.4);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
}
.modal.is-open .modal__panel{ animation:panelIn .5s ease .65s forwards; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.modal__prize{
  font-size:clamp(22px,4.6vw,38px); font-weight:800;
  text-shadow:0 4px 16px rgba(0,0,0,.65);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
/* колесо не має «з'їдати» невисокі екрани */
@media (max-height:900px){ :root{ --wheel-size:520px; --orbit-size:750px; } }
@media (max-height:800px){ :root{ --wheel-size:450px; --orbit-size:650px; } }

@media (max-width:1400px){
  .person{ height:min(88vh, 900px); bottom:-7vh; }
}

@media (max-width:1100px){
  :root{ --wheel-size:400px; --orbit-size:590px; }
  .person{ height:min(70vh, 700px); bottom:-6vh; }
  .chip{ width:80px !important; }
}

/* =========================  MOBILE  ========================= */
@media (max-width:620px){
  :root{
    --wheel-size: min(320px, 80vw);   /* колесо суттєво більше */
    --orbit-size: min(430px, 107vw);  /* іконки ближче до обода */
  }

  .stage{ gap:0; padding:8px 8px 16px; justify-content:flex-start; }
  .stage__logo{ position:static; margin:4px auto 6px; width:126px; }
  .head{ padding-top:0; }
  .head__sub{ font-size:15px; }
  .head__main{ font-size:26px; }

  .scene{ margin-top:6vh; }

  /* на мобілці — тільки дівчина, на передньому плані */
  .person--r{ display:none; }
  .person--l{
    left:-16%; bottom:-2vh;
    height:48vh;
    z-index:9;                      /* передній план: поверх колеса, іконок і фішок */
  }

  /* іконки ігор — більші */
  .orbit__item{ width:21%; height:21%; margin:-10.5% 0 0 -10.5%; }

  .chip{ width:56px !important; }
  .chip--5,.chip--6{ display:none; }
  .chip--1{ left:2%;  top:4%; }
  .chip--3{ right:2%; top:2%; }
  .chip--4{ right:2%; bottom:14%; }

  .wheel{
    box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 6px #EFC559, 0 0 0 18px var(--pink),
               0 0 26px 5px rgba(255,190,70,.5);
  }
  .wheel__pointer{ width:21%; top:-5%; }

  .loader__bar{ height:28px; border-width:2px; }

  .btn--spin{ width:min(86vw,340px); height:66px; font-size:28px; margin-top:auto; }
  .attempts{ margin-top:8px; font-size:13px; }

  .modal__logo{ width:140px; }
  .btn--cta{ height:52px; font-size:18px; }
}

/* невисокі телефони */
@media (max-height:720px) and (max-width:620px){
  :root{ --wheel-size:min(280px,74vw); --orbit-size:min(375px,100vw); }
  .head__main{ font-size:24px; }
  .stage__logo{ width:104px; margin-bottom:2px; }
  .scene{ margin-top:3vh; }
  .person--l{ height:43vh; }
  .attempts{ display:none; }
  .btn--spin{ height:60px; font-size:25px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}