:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}
*,:after,:before{box-sizing:border-box}
html{text-size-adjust:none;height:100%}
a,button{cursor:revert}
menu,ol,summary,ul{list-style:none}
img{max-inline-size:100%;max-block-size:100%}

@font-face{font-family:FontRobotoRegular;src:url(./roboto-regular-webfont.cb1117c5.woff);font-display:swap}
@font-face{font-family:FontPassionOneBold;src:url(./PassionOne-Bold.fe8c0c23.woff);font-display:swap}

body{
  font-family:FontRobotoRegular,sans-serif;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  min-height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color:#232323;
  margin:0;
}
main{padding-bottom:40px}
@media(min-width:600px){main{padding-bottom:80px}}

.container{
  background-position:top;
  background-size:cover;
  background-repeat:no-repeat;
  background-image:url(./background-mobile.3b4a9880.webp);
  height:auto;
  min-height:100dvh;
  width:100vw;
  position:relative;
  overflow:hidden;
}
@media(min-width:1300px){
  .container{background-image:url(./background-desktop.3890e627.webp)}
}

/* decorative sticker overlay ("BONOS EXCLUSIVOS" ribbon) — size/tilt/artwork
   unchanged, only repositioned further left+up so it sits under "GRATIS",
   clear of the wheel, instead of overlapping the wheel's top-left edge */
.sticker{
  width:100%;height:100%;position:absolute;top:0;left:0;z-index:3;
  background-image:url(./sticker.0973a5cf.webp);
  background-size:70px 69px;background-repeat:no-repeat;
  background-position:top 130px left calc(50% - 120px);
  pointer-events:none;
}
@media(min-width:600px){.sticker{background-size:120px 119px;background-position:top 250px left calc(50% - 210px)}}
@media(min-width:1000px){.sticker{background-size:140px 139px;background-position:top 280px left calc(50% - 280px)}}
@media(min-width:1300px){.sticker{background-size:110px 109px;background-position:top 260px left calc(50% - 260px)}}
@media(min-width:1600px){.sticker{background-size:130px 129px;background-position:top 280px left calc(50% - 280px)}}
@media(min-width:1920px){.sticker{background-position:top 280px left calc(50% - 350px)}}

/* character illustration */
.character{
  position:absolute;background-size:cover;background-repeat:no-repeat;
  top:155px;left:-145px;background-position:50%;height:515px;width:270px;
  background-image:url(./character.eaaee725.webp);z-index:2;
}
@media(min-width:600px){.character{top:270px;left:-280px;height:1000px;width:520px}}
@media(min-width:1300px){
  .character{
    top:180px;left:70px;height:1000px;width:450px;
    animation-name:moveLeftCharacterAnimation;animation-duration:15s;
    animation-iteration-count:infinite;animation-timing-function:ease;
  }
}
@media(min-width:1920px){
  .character{top:210px;height:970px;width:500px;left:310px}
}
@keyframes moveLeftCharacterAnimation{0%{transform:translateX(0)}50%{transform:translateX(-100px)}to{transform:translateX(0)}}

.bcg-elements{
  position:absolute;background-size:cover;background-repeat:no-repeat;
  left:-46%;top:0;height:100%;width:192%;
  background-image:url(./elements-mobile.4a1357d6.webp);
  background-position:top;z-index:1;
}
@media(min-width:600px){
  .bcg-elements{background-image:url(./elements-tablet.3d5b3279.webp);background-position:bottom -170px center;width:216.5%;left:-58%}
}
@media(min-width:1300px){
  .bcg-elements{background-image:url(./elements-desktop.e4e88703.webp);background-position:50%;width:147%;left:-23.5%;height:128%;top:-14%}
}
@media(min-width:1920px){
  .bcg-elements{width:125%;top:-12.5%;height:125%;left:-12.5%;background-size:cover}
}

/* payment method logos — each centered inside its own fixed box via
   object-fit:contain (preserves aspect ratio, no stretch/crop, no added
   bg/border/shadow); boxes share the same height per breakpoint so the
   logos line up on a common visual baseline regardless of their own
   width/aspect-ratio */
.payment-logos{position:absolute;bottom:10px;left:0;right:0;z-index:5;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:0 15px}
.payment-logos__left{display:flex;align-items:center;gap:4px}
.payment-logos__item{display:block;object-fit:contain;height:auto}
.payment-logos__item--visa{width:90px}
.payment-logos__item--mastercard{width:68px}
.payment-logos__item--binance{width:105px}
@media(min-width:600px){
  .payment-logos{bottom:15px;padding:0 20px}
  .payment-logos__left{gap:8px}
  .payment-logos__item--visa{width:135px}
  .payment-logos__item--mastercard{width:98px}
  .payment-logos__item--binance{width:150px}
}
@media(min-width:1300px){
  .payment-logos{bottom:20px;padding:0 40px}
  .payment-logos__left{gap:15px}
  .payment-logos__item--visa{width:210px}
  .payment-logos__item--mastercard{width:150px}
  .payment-logos__item--binance{width:240px}
}
@media(min-width:1920px){
  .payment-logos__item--visa{width:255px}
  .payment-logos__item--mastercard{width:180px}
  .payment-logos__item--binance{width:285px}
}

/* logo + bonus banner */
.wheel-logo-bonus{position:relative;top:0;left:0;width:100%}
.wheel-logo-bonus__logo{margin:0 auto;padding-top:12px;width:250px;aspect-ratio:1770/272}
.wheel-logo-bonus__logo-image{display:block;height:100%;width:100%;object-fit:contain}

/* "Bonos exclusivos" label — deliberately left-aligned (not centered like the
   bonus banner) so it never sits over the centered circular wheel below it */
.wheel-logo-bonus__label{
  position:absolute;z-index:2;left:14px;top:10px;margin:0;
  color:#ffd84d;font-family:FontPassionOneBold,sans-serif;text-transform:uppercase;
  font-size:13px;letter-spacing:.02em;text-shadow:0 2px 3px rgba(0,0,0,.6);
  max-width:40%;
}
@media(min-width:600px){.wheel-logo-bonus__label{left:24px;top:22px;font-size:20px}}
@media(min-width:1300px){.wheel-logo-bonus__label{left:40px;top:24px;font-size:24px}}
@media(min-width:1920px){.wheel-logo-bonus__label{left:60px;top:30px;font-size:28px}}

.wheel-logo-bonus__bonus{margin:0 auto;position:absolute;left:50%;transform:translateX(-50%);z-index:2;width:308px;top:-8px;aspect-ratio:2158/729}
.wheel-logo-bonus__bonus-image{display:block;width:100%;height:100%;object-fit:contain}
@media(min-width:600px){
  .wheel-logo-bonus__logo{padding-top:48px;width:150px}
  .wheel-logo-bonus__bonus{width:590px;top:3px}
}
@media(min-width:1300px){
  .wheel-logo-bonus__logo{padding-top:36px;width:170px}
  .wheel-logo-bonus__bonus{width:920px;top:-6px;left:50%}
}
@media(min-width:1920px){
  .wheel-logo-bonus__logo{padding-top:27px;width:210px}
  .wheel-logo-bonus__bonus{width:1208px;top:-8px;left:48.2%}
}


/* wheel */
.wheel{
  position:absolute;transform:translateX(-50%);left:50%;border-radius:50%;
  background-position:50%;background-repeat:no-repeat;z-index:2;
  display:flex;justify-content:center;align-items:center;
  background-image:url(./wheel-outside.1ce77d27.webp);
  background-size:360px;top:198px;height:340px;width:340px;
}
@media(min-width:600px){.wheel{background-size:cover;top:325px;height:660px;width:660px}}
@media(min-width:1300px){.wheel{top:200px;height:550px;width:550px}}
@media(min-width:1920px){.wheel{top:260px;height:680px;width:680px}}

.wheel__container{position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:center}
.wheel__container:after{
  content:"";position:absolute;top:-20px;left:-10px;height:360px;width:360px;
  background-image:url(./wheel-blings.3bafa1af.webp);
  background-position:50%;background-repeat:no-repeat;background-size:380px;
  animation:blinking 1s infinite;
}
@media(min-width:600px){.wheel__container:after{top:-25px;left:-5px;height:670px;width:670px;background-size:cover}}
@media(min-width:1300px){.wheel__container:after{top:-25px;left:-10px;height:570px;width:570px}}
@media(min-width:1920px){.wheel__container:after{top:-30px;left:-10px;height:700px;width:700px}}
@keyframes blinking{0%{opacity:0}50%{opacity:1}to{opacity:0}}

.wheel__pointer{
  position:absolute;left:50%;transform:translateX(-50%);display:block;z-index:1;
  top:25px;width:20px;height:20px;
}
@media(min-width:600px){.wheel__pointer{top:65px;width:30px;height:30px}}
@media(min-width:1300px){.wheel__pointer{top:55px;width:30px;height:25px}}
@media(min-width:1920px){.wheel__pointer{top:70px;width:40px;height:35px}}

.wheel__spinner{position:relative;height:273px;width:273px;top:-7px;border-radius:50%}
@media(min-width:600px){.wheel__spinner{height:515px;width:515px;top:-15px}}
@media(min-width:1300px){.wheel__spinner{height:420px;width:420px;top:-11px}}
@media(min-width:1920px){.wheel__spinner{height:525px;width:525px}}
.wheel__spinner--animate{animation:wheelMove 2s ease-out infinite}
@keyframes wheelMove{0%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}to{transform:rotate(-6deg)}}
.wheel__spinner--spinning{animation:none!important}

.wheel__inside{
  background-position:50%;background-size:cover;background-repeat:no-repeat;border-radius:50%;
  position:relative;height:100%;width:100%;transition:transform 4.5s cubic-bezier(.2,.8,.2,1);
  background-image:url(./wheel-inside.4a85a070.webp);
}

.wheel__button{
  z-index:1;text-transform:uppercase;cursor:pointer;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:65px;width:65px;border:none;background:none;padding:0;
}
@media(min-width:600px){.wheel__button{height:125px;width:125px}}
@media(min-width:1300px){.wheel__button{height:110px;width:110px}}
@media(min-width:1920px){.wheel__button{height:130px;width:130px}}
.wheel__button-bcg{
  display:block;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background-image:url(./wheel-center.fed94953.webp);
}
.wheel__button-text{
  width:100%;display:block;position:relative;z-index:1;font-weight:700;text-align:center;
  color:#23002f;font-size:12px;
}
@media(min-width:600px){.wheel__button-text{font-size:25px}}
@media(min-width:1300px){.wheel__button-text{font-size:30px}}
@media(min-width:1920px){.wheel__button-text{font-size:29px}}

.wheel__text{
  text-transform:uppercase;position:absolute;text-align:center;padding-top:22px;
  transform-origin:bottom center;top:0;left:0;right:0;margin:auto;height:50%;font-weight:700;
  width:80px;color:#fff;
}
@media(min-width:600px){.wheel__text{padding-top:48px;width:120px}}
@media(min-width:1300px){.wheel__text{padding-top:25px;width:120px}}
@media(min-width:1920px){.wheel__text{padding-top:50px;width:125px}}
.wheel__text:nth-child(2){transform:rotate(45deg)}
.wheel__text:nth-child(3){transform:rotate(90deg)}
.wheel__text:nth-child(4){transform:rotate(135deg)}
.wheel__text:nth-child(5){transform:rotate(180deg)}
.wheel__text:nth-child(6){transform:rotate(225deg)}
.wheel__text:nth-child(7){transform:rotate(270deg)}
.wheel__text:nth-child(8){transform:rotate(315deg)}
.wheel__text .text-bold{font-size:10px;font-weight:700}
.wheel__text .text-top{margin-bottom:4px}
.wheel__text .text-top.text-bold{font-size:10px}
.wheel__text .text-regular{font-size:8px}
.wheel__text .text-regular.text-bottom{width:50px;margin:0 auto}
@media(min-width:600px){
  .wheel__text .text-bold{font-size:18px}
  .wheel__text .text-top{margin-bottom:0}
  .wheel__text .text-top.text-bold{font-size:18px}
  .wheel__text .text-regular{font-size:15px}
  .wheel__text .text-regular.text-bottom{width:100px}
}
@media(min-width:1300px){
  .wheel__text .text-top{margin-bottom:2px}
  .wheel__text .text-bottom{line-height:1.5}
  .wheel__text .text-bold{font-size:17px}
  .wheel__text .text-regular{font-size:14px}
}
@media(min-width:1920px){
  .wheel__text .text-bold{font-size:18px}
  .wheel__text .text-regular{font-size:14px}
}

/* popup (bonus reveal) */
.popup{
  position:fixed;top:0;left:100%;height:100%;width:100%;background-color:rgba(0,0,0,.5);z-index:4;overflow:hidden;
  transition:left .4s ease-in-out;
}
.popup--show{left:0}
.popup__content{height:100%;width:100%;position:relative}
.popup__logo{margin:0 auto;position:relative;z-index:1;padding-top:42px;width:142px}
.popup__logo-image{display:block;height:100%;width:100%;object-fit:cover}
.popup__logo{display:none}

.popup__success{
  background-position:50%;background-size:cover;background-repeat:no-repeat;
  display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;
  background-image:url(./popup-success.63107f23.webp);height:300px;width:min(540px,90vw);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding-top:40px;border-radius:12px;
}
.popup__success-texts{color:#fff;position:static;line-height:1.3;text-transform:uppercase;width:100%;margin:40px auto 0}
.popup__success-title{text-transform:uppercase;font-family:FontPassionOneBold,sans-serif;position:relative}
.popup__success-main-text{font-weight:700;max-width:380px;margin:0 auto 0;font-size:18px;line-height:1.5;position:relative;top:-35px}
.popup__success-subtext{font-size:20px;max-width:400px;margin:0 auto;transform:translateY(-27px)}
.popup__success-button{
  position:static;border:none;font-weight:700;border-radius:50px;
  background:linear-gradient(180deg,#ffe600,#ffb800);text-shadow:0 1px 0 #ffe249;box-shadow:inset 0 -2px 0 #f90;
  cursor:pointer;font-size:16px;padding:16px;width:200px;min-width:135px;margin-top:0;
  display:inline-block;text-decoration:none;color:#23002f;text-transform:uppercase;transform:translateY(-10px);
}
.popup__success-button:hover{background:linear-gradient(180deg,#ffb800,#ffe600);box-shadow:inset 0 -5px 0 #f90}
@media(min-width:600px){
  .popup__success{height:400px;width:540px}
  .popup__success-main-text{font-size:20px}
  .popup__success-subtext{font-size:22px}
  .popup__success-button{width:225px;font-size:18px;padding:20px}
}

.disclaimer{width:100vw;background-color:#232323;min-height:60px;box-sizing:border-box}
.disclaimer .licenceTexts{padding:.5rem .75rem;color:#fff;font-size:8px}
.disclaimer .licenceTexts span{display:block}
@media(min-width:600px){.disclaimer{min-height:50px}.disclaimer .licenceTexts{padding:.5rem 1rem;color:#fff;font-size:12px}}
@media(min-width:1300px){.disclaimer .licenceTexts{padding:.5rem 2rem}}


/* Подсказка для iOS: там ярлык добавляется только руками через «Поделиться»,
   программного запроса в Safari нет, поэтому показываем два шага. */
.ios-hint{position:fixed;inset:0;z-index:60;display:none;place-items:end center;
  background:rgba(0,0,0,.6);padding:0 16px 24px}
.ios-hint--show{display:grid}
.ios-hint__box{width:100%;max-width:420px;background:#1c1730;color:#fff;
  border-radius:18px;padding:18px 20px;text-align:center;
  font-family:"Roboto",system-ui,sans-serif}
.ios-hint__title{margin:0 0 10px;font-size:17px;font-weight:700}
.ios-hint__step{margin:6px 0;font-size:15px;opacity:.9}
.ios-hint__close{margin-top:14px;width:100%;padding:12px 0;border:0;
  border-radius:12px;background:#4ade80;color:#0b3b1e;font-size:16px;
  font-weight:700}


/* Плашка установки в стиле преленда. Егор 26.08: «пусть выскакивает, но
   стилизованная под этот преленд». Тёмная карточка, золотая кнопка — те же
   цвета, что у попапа с выигрышем, чтобы это читалось как часть страницы. */
.install{position:fixed;inset:0;z-index:70;display:none;place-items:center;
  background:rgba(10,0,16,.72);padding:16px}
.install--show{display:grid}
.install__box{width:100%;max-width:360px;text-align:center;padding:22px 20px 18px;
  border-radius:22px;border:2px solid #ffd84d;
  background:radial-gradient(120% 120% at 50% 0%,#4a1060 0%,#25002f 70%);
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.install__logo{width:150px;max-width:60%;margin:0 auto 10px;display:block}
.install__title{margin:0 0 8px;color:#ffd84d;font-size:22px;line-height:1.1;
  font-family:FontPassionOneBold,"Rye",sans-serif;text-transform:uppercase}
.install__text{margin:0 0 16px;color:#fff;font-size:14px;line-height:1.35;
  font-family:"Roboto",system-ui,sans-serif;opacity:.92}
.install__yes{width:100%;padding:15px 0;border:0;border-radius:14px;
  font-family:FontPassionOneBold,"Rye",sans-serif;font-size:20px;
  text-transform:uppercase;color:#23002f;cursor:pointer;
  background:linear-gradient(180deg,#ffe600,#ffb800);
  text-shadow:0 1px 0 #ffe249;box-shadow:inset 0 -3px 0 #f90}
.install__yes:hover{background:linear-gradient(180deg,#ffb800,#ffe600)}
.install__no{margin-top:10px;width:100%;padding:10px 0;border:0;background:none;
  color:#c9a8d8;font-size:14px;font-family:"Roboto",system-ui,sans-serif;
  cursor:pointer;text-decoration:underline}