.symbol, .score-animate {
  transform: translateZ(0);
}
.symbol, .score-animate {
  will-change: transform, opacity;
}

@media (max-width: 700px) and (hover: none) {
  .symbol, .score-animate {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
}


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

/* Всегда занимать всю ширину и минимальную высоту экрана */
html, body {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
  overflow-x: hidden;
}

body {
background: url('img/fon.jpg') center/cover no-repeat;
  min-height: 100vh;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Для плавной прокрутки и адаптивности на мобилках */
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

/* --- Мобильные экраны: вертикальный отступ и растягивание, без центрирования по вертикали --- */
@media (max-width: 700px) {
  body {
    align-items: flex-start;
    justify-content: stretch;
    padding-top: 18px;
    min-height: 100vh;
    height: auto;
  }
}

/* Планшеты (опционально, если надо больше места сверху) */
@media (max-width: 1000px) and (min-width: 701px) {
  body {
    padding-top: 14px;
    align-items: flex-start;
  }
}
.slot {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding: 0;
  max-width: 1450px;
  min-height: 580px;
  width: 100vw;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  transition: all 0.3s;
}



    .promo-column {
  position: absolute;
  top: var(--promo-top, 0px);
  left: var(--promo-left, -20px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 240px;
  max-width: 260px;
  min-height: 900px;
  z-index: 5;
  transition: all .3s;
  align-items: stretch;
}

/* --- Планшеты и средние экраны --- */
@media (max-width: 1200px) {
  .promo-column {
    position: static;
    flex-direction: row;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    min-height: 220px;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
  }
}

/* --- Мобильные экраны --- */
@media (max-width: 700px) {
  .promo-column {
    position: static;
    flex-direction: row;
    width: 100vw;
    min-width: 0;
    min-height: 0;
    max-width: 100vw;
    gap: 6px;
    padding: 0 0 8px 0;
    align-items: stretch;
  }
}

  .promo-box, .promo-box-bottom {
  background: rgba(255,0,157,0.7);
  color: #fff;
  font-family: 'Glina Script', cursive;
  border-radius: 18px;
  padding: 18px 12px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 4px 16px 0 rgba(210,60,210,0.10);
  position: relative;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}


   .promo-box-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 32px;
  gap: 18px;
}


.promo-total-label {
  font-family: 'Glina Script', cursive;
  font-size: 28px;
  color: #ffffff;
  background: linear-gradient(90deg, #fff 60%, #ffb3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  text-shadow: 0 2px 12px #fff7, 0 1px 0 #d1a6ff;
  font-weight: bold;
}

/* --- Планшеты --- */
@media (max-width: 1000px) {
  .promo-total-label {
    font-size: 58px;
  }
}

/* --- Мобильные телефоны --- */
@media (max-width: 700px) {
  .promo-total-label {
    font-size: 43px;
  }
}



.promo-total-counter {
  width: 90px;
  height: 80px;
  background: linear-gradient(180deg, #fff6ed 0%, #ffe0ff 100%);
  border-radius: 22px;
  border: 4px solid #e66aff;
  box-shadow: 0 4px 20px #ffb3fc66, 0 2px 8px #ae7dff55;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Планшеты --- */
@media (max-width: 1000px) {
  .promo-total-counter {
    width: 105px;
    height: 98px;
    border-radius: 12px;
    border-width: 2px;
  }
}
/* --- Мобильные телефоны --- */
@media (max-width: 700px) {
  .promo-total-counter {
   width: 105px;
    height: 98px;
    border-radius: 12px;
    border-width: 2px;
  }
}


#total-won {
  font-size: 46px;
  font-weight: 900;
  color: #ff45ac;
  font-family: 'Glina Script', cursive;
  text-shadow: 0 2px 18px #fff, 0 1px 0 #ffe6fa;
}

/* --- Планшеты --- */
@media (max-width: 1000px) {
  #total-won {
    font-size: 73px;
  }
}

/* --- Мобильные телефоны --- */
@media (max-width: 700px) {
  #total-won {
    font-size: 36px;
  }
}

    .promo-1 {
  width: 97%;
  height: auto;
  display: block;
  margin: 0 auto;
}



    .promo-box .casino-icon {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}



    /* Фриспин-барабан */
   .spin-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 8px;
  width: 100%;
}



    .spin-label {
  font-size: 22px;
  letter-spacing: 2px;
  color: #fff;
  font-family: 'Glina Script', cursive;
  text-shadow: 0 2px 10px #f0c9ff, 0 1px 0 #ab36c9;
  margin-bottom: 12px;
}


   .spin-reel {
  width: 82px;
  height: 108px;
  background: linear-gradient(180deg, #fff6ed 0%, #f0c9ff 100%);
  border-radius: 22px;
  border: 4px solid #e66aff;
  box-shadow: 0 4px 24px #ff7de922, 0 2px 8px #ae7dff55;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Glina Script', cursive;
  position: relative;
  overflow: hidden;
  margin-bottom: 9px;
}


   .spin-num, .spin-num-next {
  font-size: 70px;
  font-weight: 900;
  color: #ad0dff;
  line-height: 1;
  text-shadow: 0 4px 20px #fff, 0 2px 10px #ffe0ff, 0 1px 0 #fff9;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: none;
  will-change: transform, opacity;
}

    .spin-num-next {
  color: #ff45ac;
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.24,2,.5,.9), opacity 0.18s;
}


 .spin-left-text {
  font-size: 22px;
  font-family: 'Glina Script', cursive;
  color: #fff;
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px #ffb4f9, 0 2px 0 #fff8;
}

/* --- Планшеты --- */
@media (max-width: 1000px) {
  .spin-left-text {
    font-size: 43px;
    margin-bottom: 3px;
    letter-spacing: 0.7px;
  }
}

/* --- Мобильные телефоны --- */
@media (max-width: 700px) {
  .spin-left-text {
    font-size: 29px;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
  }
}


    /* ---- Основная игровая зона ---- */
   .slot-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  width: 960px;
  max-width: 100vw;
  border-radius: 28px;
}


.logo, .x, .casino {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.logo { top: -120px; left: 33%; transform: translateX(-50%);}
.x { top: -65px; right: 690px;}
.casino { top: -150px; left: 740px;}
.slot-content .logo img { width:270px; }
.slot-content .x img { width:85px; }
.slot-content .casino img { width:460px; }
.window-wrapper {
  width: 960px;
  max-width: 100vw;
  height: 580px;
  background: rgba(255, 255, 255, 0.555);
  border-radius: 22px;
  box-shadow: 0 8px 40px 0 rgba(180,70,230,0.15), 0 0 0 4px #fff inset;
  border: 4px dashed #ff7272;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto 22px auto;
  position: relative;
  overflow: hidden;
}
.slot-content {
  width: 960px;
  max-width: 100vw;
  border-radius: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* По умолчанию скрыт подвал-бар */
.logos-mobile-bar {
  display: none;
}



    .window {
  display: flex;
  gap: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  perspective: 800px;
  background: none;
}


    .reel {
      flex: 1 1 0;
      position: relative;
      background: transparent;
      border-right: 2px solid #ffe4fa;
      min-width: 0;
      height: 100%;
      margin: 0;
      border-radius: 10;
    }
    .window .reel:last-child { border-right: none; }
    .symbol {
      position:absolute; width:100%; height:150px;
      top:0; left:0; animation-fill-mode:forwards;
    }
    .symbol img {
      display:block; width:70%; margin:0 auto;
      transition: transform .2s;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    }
    .symbol[data-sym="banana"] img,
    .symbol[data-sym="melon"] img { transform: translateY(10px); }
    .symbol[data-sym="h_candy"] img { width:130%; transform: translate(-13px,-35px);}
    .symbol[data-sym="scatter"] img { width:120%; transform: translate(-10px,-30px);}
    .symbol[data-sym="scatter"] { z-index:1000; }
    #controls {
      width: 960px;
      max-width: 100vw;
      margin: var(--controls-margin, -25px) auto 0 auto;
      border-radius: 0 0 28px 28px;
      background: rgba(255,0,157,0.7);
      padding: var(--controls-padding, 30px);
      display: flex;
      align-items: center;
      justify-content: var(--controls-justify, center);
      position: relative;
      transition: margin 0.25s, padding 0.25s;
    }
    .scatter-info {
  position: relative;
  left: -60px;        /* подвинет весь блок чуть левее */
  --scatter-offset: 0px;
  font-family: 'Glina Script', cursive;
  font-size: 30px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  letter-spacing: 1px;
  margin-left: var(--scatter-offset);
}
    .scatter-info .si-text { margin-right:8px; white-space:nowrap; }
    .scatter-info .si-icon {
      width:32px; height:32px; margin:0 4px;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    }
    #spin {
      position:absolute; top:-25px; right:70px;
      width:150px; height:150px; border:none;
      border-radius:50%;
      background:#fff url('img/spin-icon.png') no-repeat center;
      background-size:60% 60%;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(0,0,0,0.3);
      transition:transform .1s; z-index:20;
      display: flex; align-items: center; justify-content: center;
    }
    #spin:active { 
  transform: scale(0.95); 
}

/* --- Adaptive for tablets/phones --- */
@media (max-width: 1200px) {
  .slot { flex-direction: column; gap: 18px; align-items: center; }
  .promo-column { flex-direction: row; width: 100vw; justify-content: center; gap: 12px; }
  .window-wrapper, #controls { width: 99vw; min-width: 0; }
  .slot-content { width: 99vw; }
  .logo { top: -505px; }
  .x, .casino { top: -407px; }
}
@media (max-width: 1000px) {
  .window-wrapper { height: 570px; }
  .slot-content .logo img { width: 450px; }
  .slot-content .casino img { width: 680px !important; } /* Любой нужный размер */
  #controls { padding: 12px; }
  .scatter-info {position: relative; left: 25px;   --scatter-offset: 0px;  font-size: 50px;  display: inline-flex;}
  .promo-box, .promo-box-bottom { font-size: 16px; padding: 10px 6px; }
  
  .logo { top: 1080px; right: 0px;}
  .x { top: 1180px; opacity: 0;right: 420px; }
  .casino {  top: 1050px;  left: 400px; }
  #spin { width: 400px; height: 400px; top: 80px;  right: 280px;}
}
/* --- Мобильные телефоны (важно для высоты барабана) --- */
    
/* POPUP FREE SPINS — Sweet Bonanza Style */
#free-spins-popup {
  position: fixed;
  z-index: 99999;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(56,9,60,0.87);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-modal {
  /* Размеры и отступы */
  min-width: 580px;
  max-width: 96vw;
  min-height: 420px;
  padding: 60px 48px 46px;
  border-radius: 52px;
  
  /* Флекс-бокс для выравнивания контента */
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Новый пастельно-розовый градиент */
  background: linear-gradient(
    135deg,
    #ffb6c1 0%,   /* светлый розовый */
    #ff4b9c 100%  /* насыщенный розовый */
  );
  
  /* Тень и внутренняя подсветка */
  box-shadow:
    0 22px 72px rgba(255, 75, 156, 0.6),
    inset 0 0 0 6px rgba(255, 255, 255, 0.2),
    0 0 44px rgba(255, 182, 193, 0.3);
  
  /* Убираем рамку, текст делаем белым */
  border: none;
  color: #ffffff;
  
  /* Чтобы попап накладывался поверх */
  position: relative;
  z-index: 1000;
}

/* Плашка-число внутри попапа — в розовых тонах */
.sb-modal .stat-box {
  background: #ffffff;        /* белая карточка */
  color: #ff4b9c;             /* яркий розовый для цифр */
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5em 1em;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0.5em;
}

.sb-modal::before {
  content: none;
}

/* Базовый стиль для всех scatter-декораций */
.sb-modal .scatter-decor {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

/* Первая пятнадцатка */
.sb-modal .s1  { top:  5%;  left: 10%;  transform: rotate( 10deg); }
.sb-modal .s2  { top:  8%;  right:12%;  transform: rotate(-15deg); }
.sb-modal .s3  { top: 25%;  left:  5%;  transform: rotate( 30deg); }
.sb-modal .s4  { top: 30%;  right: 8%;  transform: rotate(-25deg); }
.sb-modal .s5  { top: 50%;  left:  2%;  transform: rotate( 45deg); }
.sb-modal .s6  { top: 55%;  right: 2%;  transform: rotate(-40deg); }
.sb-modal .s7  { top: 75%;  left: 12%;  transform: rotate( 15deg); }
.sb-modal .s8  { bottom:5%;  left: 20%;  transform: rotate(-10deg); }
.sb-modal .s9  { bottom:8%;  right:18%;  transform: rotate( 20deg); }
.sb-modal .s10 { top: 15%;  left: 50%;  transform: rotate(-5deg); }
.sb-modal .s11 { top: 45%;  left: 60%;  transform: rotate( 25deg); }
.sb-modal .s12 { bottom:20%; right:40%;  transform: rotate(-30deg); }
.sb-modal .s13 { bottom:30%; left: 35%;  transform: rotate( 35deg); }
.sb-modal .s14 { top: 65%;  right:50%;  transform: rotate(-20deg); }
.sb-modal .s15 { bottom:50%; left: 75%;  transform: rotate( 10deg); }

/* Вторая пятнадцатка */
.sb-modal .s16 { top: 12%;  left: 30%;  transform: rotate(-12deg); }
.sb-modal .s17 { top: 18%;  right:35%;  transform: rotate( 18deg); }
.sb-modal .s18 { top: 40%;  left: 25%;  transform: rotate(-28deg); }
.sb-modal .s19 { top: 48%;  right:28%;  transform: rotate( 32deg); }
.sb-modal .s20 { bottom:15%; left: 45%;  transform: rotate(-22deg); }
.sb-modal .s21 { bottom:25%; right:55%;  transform: rotate( 27deg); }
.sb-modal .s22 { top: 60%;  left: 15%;  transform: rotate(-17deg); }
.sb-modal .s23 { top: 68%;  right:20%;  transform: rotate( 14deg); }
.sb-modal .s24 { bottom:35%; left: 55%;  transform: rotate(-33deg); }
.sb-modal .s25 { bottom:45%; right:15%;  transform: rotate( 29deg); }
.sb-modal .s26 { top: 22%;  left: 80%;  transform: rotate(-19deg); }
.sb-modal .s27 { top: 35%;  right:65%;  transform: rotate( 21deg); }
.sb-modal .s28 { bottom:10%; left: 60%;  transform: rotate(-26deg); }
.sb-modal .s29 { bottom:20%; right:30%;  transform: rotate( 24deg); }
.sb-modal .s30 { top: 55%;  left: 90%;  transform: rotate(-15deg); }
.sb-title {
  font-family: 'Glina Script', 'Comic Sans MS', cursive;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #ece7ff 10%, #9e70e8 35%, #6ab4ff 65%, #fff6e8 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #9e70e8;
  text-shadow:
    0 4px 18px #bf7fff66,
    0 1px 0 #fff8,
    0 0 8px #f1eaff77;
  filter: drop-shadow(0 0 10px #ebcfff77);
}
.sb-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Glina Script', Arial, sans-serif;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 40px;
  background: linear-gradient(90deg,#e4dbfc 12%,#b388e9 52%,#fff2e2 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #b388e9;
  text-shadow: 0 2px 14px #cbaaff66, 0 2px 0 #fff7, 0 1px 0 #e8e2fc66;
  gap: 6px;
  position: relative;
  z-index: 3;
}
.sb-desc-center {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: inherit;
}
.sb-desc-center::before {
  content: "Вам доступно";
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 110%;
  color: #fff;
  filter: blur(30px) brightness(2);
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
  background: none;
}

.sb-desc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0;
  position: relative;
}
.sb-desc-row::before {
  content: "";
  position: absolute;
  left: -16px; right: -16px; top: -10px; bottom: -10px;
  background: linear-gradient(120deg, #fff6 30%, #c4ffe5cc 90%);
  filter: blur(28px) brightness(1.1);
  border-radius: 18px;
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
}
.sb-num-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  
  /* Почти белый фон с лёгкой прозрачностью */
  background: rgba(255, 255, 255, 0.85);
  
  /* Слегка закруглённые углы */
  border-radius: 12px;
  
  /* Тонкая полупрозрачная белая рамка */
  border: 1px solid rgba(255, 255, 255, 0.6);
  
  /* Мягкая тень для “парящего” эффекта */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 0 4px rgba(255, 255, 255, 0.4);
  
  margin-right: 16px;
  position: relative;
  z-index: 2;
}

.sb-num {
  font-size:  Fifty px;
  font-size:  Fifty px;
  font-size:  POPPY px;
  font-size: 62px; /* оставил 62px, как в вашем примере */
  font-weight: 900;
  
  /* Пастельно-розовый цвет цифры */
  color: #FFB6C1;
  
  /* Лёгкая светлая подсветка */
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.8),
    0 0 4px rgba(255, 182, 193, 0.5);
  
  letter-spacing: 1px;
  line-height: 1;
}

.sb-btn {
  font-size: 40px;
  font-family: 'Glina Script', Arial, sans-serif;
  background: linear-gradient(180deg,#8fff96 0%,#43c77c 100%);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 24px 108px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 18px;
  box-shadow: 0 8px 48px #34ff95b0, 0 2px 0 #fff8 inset;
  cursor: pointer;
  outline: none;
  transition: background .18s, box-shadow .18s, transform .10s;
  text-shadow: 0 2px 10px #9be3c3, 0 2px 0 #fff9;
  position: relative;
  overflow: hidden;
}
.sb-btn::after {
  content: '';
  position: absolute;
  left: 25%; right: 25%; top: 0;
  height: 13px;
  background: linear-gradient(90deg, #fff5 0%, #fff 30%, #fff5 100%);
  opacity: 0.33;
  border-radius: 44px;
  filter: blur(2px);
  pointer-events: none;
}
.sb-btn:hover {
  background: linear-gradient(180deg,#77ffa6 60%,#1fb85b 100%);
  color: #fff;
  box-shadow: 0 8px 72px #b2ffd6b0, 0 2px 0 #fff6 inset;
  transform: scale(1.045);
}
@media (max-width: 750px) {
  .sb-modal { min-width: 0; width: 98vw; padding: 5vw 0 10vw 0;}
  .sb-title { font-size: 10vw;}
  .sb-desc { font-size: 7vw;}
  .sb-num { font-size: 14vw;}
  .sb-btn { font-size: 8vw; padding: 8vw 0; width: 90vw;}
}
.spin-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 0 0;
  margin-bottom: 8px;
}
.spin-label {
  font-size: 22px;
  font-family: 'Glina Script', cursive;
  color: #fff;
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px #ffb4f9, 0 2px 0 #fff8;
}

/* Планшеты */
@media (max-width: 1000px) {
  .spin-label {
    font-size: 58px;
    margin-bottom: 3px;
  }
}

/* Мобильные телефоны */
@media (max-width: 700px) {
  .spin-label {
    font-size: 48px;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
  }
}

.spin-reel {
  width: 90px;
  height: 80px;
  background: linear-gradient(180deg, #fff6ed 0%, #ffe0ff 100%);
  border-radius: 22px;
  border: 4px solid #e66aff;
  box-shadow: 0 4px 20px #ffb3fc66, 0 2px 8px #ae7dff55;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Планшеты */
@media (max-width: 1000px) {
  .spin-reel {
    width: 105px;
    height: 98px;
    border-radius: 12px;
    border-width: 2px;
  }
}

/* Мобильные телефоны */
@media (max-width: 700px) {
  .spin-reel {
    width: 95px;
    height: 98px;
    border-radius: 8px;
    border-width: 1px;
  }
}

.spin-num,
.spin-num-next {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 54px;
  font-family: 'Glina Script', cursive;
  font-weight: 900;
  color: #ff45ac;
  letter-spacing: 2px;
  text-shadow: 0 2px 14px #fffb, 0 1px 0 #b67cff;
  transition: transform 0.3s, opacity 0.3s;
}

/* Планшеты */
@media (max-width: 1000px) {
  .spin-num,
  .spin-num-next {
    font-size: 76px;
    letter-spacing: 1px;
  }
}

/* Мобильные телефоны */
@media (max-width: 700px) {
  .spin-num,
  .spin-num-next {
    font-size: 65px;
    letter-spacing: 0.5px;
  }
}


/* --- Для free-spin-counter (выиграно) --- */
.free-spin-counter {
  width: 95%;
  min-height: 100px;
  background: linear-gradient(92deg,#662f93 5%,#ffacee 90%);
  border-radius: 28px;
  box-shadow: 0 6px 36px #b229ef77, 0 1px 0 #fff6 inset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  position: relative;
  border: 3.5px solid #fff4;
}


.fsc-title {
  font-family: 'Glina Script', cursive;
  font-size: 32px;
  color: #ffe7fc;
  text-shadow: 0 2px 12px #ffb4f9, 0 2px 0 #fff8;
  margin-right: 8px;
  font-weight: 700;
}
.fsc-value {
  display: inline-block;
  min-width: 84px;
  font-size: 70px;
  color: #fff;
  background: linear-gradient(92deg,#ffe066 30%,#ff4e5b 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 12px #fff, 0 3px 12px #ffd70060;
  font-weight: 900;
  font-family: 'Glina Script', cursive;
  letter-spacing: 3px;
  vertical-align: middle;
  filter: drop-shadow(0 0 10px #ffe37e);
  transition: color 0.12s;
}
.fsc-anim {
  font-size: 54px;
  font-family: 'Glina Script', cursive;
  position: absolute;
  right: 40px; top: 18px;
  pointer-events: none;
  color: #9fffcc;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  font-weight: 900;
  text-shadow: 0 2px 12px #fff, 0 3px 12px #ffd70060;
}
.fsc-anim.fsc-show {
  opacity: 1;
  animation: fly-spin-anim 1s cubic-bezier(.32,.79,.38,.96);
}
@keyframes fly-spin-anim {
  0% { transform: translateY(0) scale(1);}
  20% { transform: translateY(-32px) scale(1.15);}
  50% { transform: translateY(-44px) scale(1.08);}
  100% { transform: translateY(0) scale(1);}
}

/* начало финальный поп ап на скатеры*/
#overlay { 
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #fff7 0%, #ffdefa44 100%);
  z-index: 200000;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.28s;
  backdrop-filter: blur(2.5px);
}
#overlay.show {
  display: flex;
}




.mega-popup {
  min-width: 420px;
  max-width: 94vw;
  background:  linear-gradient(
    135deg,
    #ffb6c1 0%,   /* светлый розовый */
    #ff4b9c 100%  /* насыщенный розовый */
  );;
  border-radius: 36px;
  box-shadow: 0 22px 72px rgba(255, 75, 156, 0.6),
    inset 0 0 0 6px rgba(255, 255, 255, 0.2),
    0 0 44px rgba(255, 182, 193, 0.3);
  padding: 48px 34px 38px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 5px solid #ffb8f4;
  position: relative;
  overflow: visible; /* <-- Важно, чтобы монеты не обрезались */
}
.mega-popup .mega-text {
  font-family: 'Glina Script', 'Comic Sans MS', cursive;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #ece7ff 10%, #9e70e8 35%, #6ab4ff 65%, #fff6e8 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #9e70e8;
  text-shadow:
    0 4px 18px #bf7fff66,
    0 1px 0 #fff8,
    0 0 8px #f1eaff77;
  filter: drop-shadow(0 0 10px #ebcfff77);
}
.mega-popup .mega-win {
  font-family: 'Glina Script', 'Comic Sans MS', cursive;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #ece7ff 10%, #9e70e8 35%, #6ab4ff 65%, #fff6e8 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #9e70e8;
  text-shadow:
    0 4px 18px #bf7fff66,
    0 1px 0 #fff8,
    0 0 8px #f1eaff77;
  filter: drop-shadow(0 0 10px #ebcfff77);
}
.mega-popup .mega-win .amount {
  font-family: 'Glina Script', 'Comic Sans MS', cursive;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  background: #00ff2d;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #9e70e8;
  text-shadow:
    0 4px 18px #bf7fff66,
    0 1px 0 #fff8,
    0 0 8px #f1eaff00;
  filter: drop-shadow(0 0 10px #ebcfff77);

}
.mega-popup .mega-subtext {
  font-family: 'Glina Script', 'Comic Sans MS', cursive;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #ece7ff 10%, #9e70e8 35%, #6ab4ff 65%, #fff6e8 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #9e70e8;
  text-shadow:
    0 4px 18px #bf7fff66,
    0 1px 0 #fff8,
    0 0 8px #f1eaff77;
  filter: drop-shadow(0 0 10px #ebcfff77);
}
.mega-popup .mega-btn {
 font-size: 40px;
  font-family: 'Glina Script', Arial, sans-serif;
  background: linear-gradient(180deg,#8fff96 0%,#43c77c 100%);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 24px 108px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 18px;
  box-shadow: 0 8px 48px #34ff95b0, 0 2px 0 #fff8 inset;
  cursor: pointer;
  outline: none;
  transition: background .18s, box-shadow .18s, transform .10s;
  text-shadow: 0 2px 10px #9be3c3, 0 2px 0 #fff9;
  position: relative;
  overflow: hidden;
}
.mega-popup .mega-btn:active {
  background: linear-gradient(95deg, #fff 10%, #f065d8 90%);
  transform: scale(0.98);
}

/* --- Планшеты и средние экраны --- */
@media (max-width: 1200px) {
  .mega-popup {
    min-width: 320px;
    padding: 32px 18px 22px 18px;
    border-radius: 26px;
  }
  .mega-popup .mega-text      { font-size: 2.1rem; margin-bottom: 11px; }
  .mega-popup .mega-win       { font-size: 1.13rem; margin-bottom: 12px; }
  .mega-popup .mega-win .amount { font-size: 1.8rem; }
  .mega-popup .mega-subtext   { font-size: 0.99rem; margin-bottom: 16px; }
  .mega-popup .mega-btn       { font-size: 1.13rem; padding: 13px 33px 8px 33px; border-radius: 13px;}
}

/* --- Мобильные телефоны --- */
@media (max-width: 1000px) {
  .mega-popup {
    min-width: 90vw;
    max-width: 99vw;
    padding: 11vw 2vw 6vw 2vw;
    border-radius: 10vw;
  }
  .mega-popup .mega-text      { font-size: 6vw; margin-bottom: 4vw; }
  .mega-popup .mega-win       { font-size: 3.6vw; margin-bottom: 4vw; }
  .mega-popup .mega-win .amount { font-size: 5vw; }
  .mega-popup .mega-subtext   { font-size: 3.1vw; margin-bottom: 4vw; }
  .mega-popup .mega-btn       { font-size: 4vw; padding: 4vw 12vw 2vw 12vw; border-radius: 4vw;}
}

/* конец финальный поп ап на скатеры*/


@keyframes scatter-rotate {
  0%   { transform: perspective(400px) rotateY(0deg); }
  50%  { transform: perspective(400px) rotateY(360deg); }
  100% { transform: perspective(400px) rotateY(0deg); }
}
.symbol[data-sym="scatter"].animating {
  animation: scatter-rotate 1.5s ease-in-out 1;
}

/**анимация спина**/
/* Прыжок с вытягиванием */
@keyframes smoothBounce {
  0%   { transform: scale(1,1) translateY(0);}
  16%  { transform: scale(1.16,0.88) translateY(-16px);}
  32%  { transform: scale(0.92,1.13) translateY(0);}
  48%  { transform: scale(1.10,0.94) translateY(-10px);}
  65%  { transform: scale(1,1) translateY(0);}
  100% { transform: scale(1,1) translateY(0);}
}
.symbol.animate-bounce {
  animation: smoothBounce 0.92s cubic-bezier(.35,1.11,.53,1.05) forwards;
  z-index: 10;
}

@keyframes fadeOutSym {
  0%   { opacity: 1;}
  100% { opacity: 0;}
}
.symbol.animate-fade {
  animation: fadeOutSym 0.36s cubic-bezier(.43,1.05,.65,1.08) forwards;
  z-index: 10;
}

/* Баллы */
.score-animate {
  opacity: 0;
  transition: opacity 0.44s, transform 1.2s cubic-bezier(.35,1.18,.55,1);
  font-family: 'Glina Script', Arial, sans-serif;
  pointer-events: none;
}
.score-animate.show {
  opacity: 1;
  transform: translate(-50%, -90%) scale(1.09);
  transition: opacity 1.28s, transform 1.15s cubic-bezier(.36,1.19,.54,1.02);
}