@font-face {
    font-family: 'Calibri';
    src: url('calibri.eot');
    src: url('calibri.eot?#iefix') format('embedded-opentype'),
         url('calibri.woff') format('woff'),
         url('calibri.ttf') format('truetype'),
         url('calibri.svg#calibri') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* делаем везде так, чтобы свойства width и height задавали не размеры контента, а размеры блока */
* {
  box-sizing: border-box;
}

/* общие настройки страницы */
body {
    display: grid;
    place-items: center;
    background: #000;
    overflow: hidden;
    font-family: 'Calibri';
    background-image: url(p_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    height: 100vh;
}
h1 {
  color: rgb(252, 222, 222);  
  font-size: 300%;
  font-weight: 600;
  margin-top: 0;
}

.logo-ponch {
    position: absolute;
    width: 200px;
    right: -45px;
    top: 33%;
}

.logo-ponch img {
    width:100%;
    height: auto;
    max-width: 350px;
}

.deal-wheel {
  /* задаём переменные блока */
  /* размеры колеса */
  --size: clamp(250px, 80vmin, 700px);
  /* настройки яркости и заливки фона секторов */
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(
      hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
      hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
    );
  position: relative;
  display: grid;
  grid-gap: calc(var(--size) / 20);
  align-items: center;
  grid-template-areas:
    "spinner"
    "trigger";
  font-size: calc(var(--size) / 21);
  top: -5%;
}

.deal-wheel-message {
    position: relative;
    display: none; 
    grid-gap: calc(var(--size) / 20);
    align-items: center;
    font-size: calc(var(--size) / 21);
}

.deal-wheel-message h3 {
    color: #fff;
    font-size: 130%;
    font-weight: 600;
    text-align: center;
}

@media screen and (orientation:portrait) {
    .deal-wheel {
        top: -9%;
    }
    .logo-ponch {
        top: 3%;
    }
}

@media screen and (max-width: 876px) {
   .logo-ponch {
        display: none;
   }
}

@media screen and (max-width: 750px) {
    /*
    .deal-wheel {
        display: none; 
    }
    .deal-wheel-message {
        display: grid; 
        top: -45%;
    }
    */
}

/*
@media screen and (max-width:970px) and (orientation:landscape) {
    .logo-ponch {
        display: none;
    }
    .deal-wheel {
        display: none; 
    }
    .deal-wheel-message {
        display: grid; 
        top: -45%;
    }
}

@media screen and (orientation:landscape) and (max-height:936px) {
    .logo-ponch {
        display: none;
    }
    .deal-wheel {
        display: none; 
    }
    .deal-wheel-message {
        display: grid; 
        top: -45%;
    }
}

*/
/* всё, что относится ко внутренним элементам главного блока, будет находиться в области сетки с названием spinner */
.deal-wheel > * {
  grid-area: spinner;
}

/* сам блок и кнопка будут находиться в области сетки с названием trigger и будут выровнены по центру */
.deal-wheel .btn-spin {
  grid-area: trigger;
  justify-self: center;
}

/* сектор колеса */
.spinner {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-areas: "spinner";
  width: var(--size);
  height: var(--size);
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  border-radius: 50%;
  box-shadow: 0px 0px 5px 10px rgb(252 222 222), 0px 10px 15px -7px rgb(252 222 222);
  box-shadow: 0px 0px 5px 12px rgb(252 222 222), 0px 3px 15px 11px rgb(164 68 68 / 23%) inset;
}

/* всё, что внутри этого блока, будет находиться в области сетки с названием spinner */
.spinner * {
  grid-area: spinner;
}

/* текст на секторах */
.prize {
  display: flex;
  align-items: center;
  /* задаём отступы от краёв блока */
  /* margin-top: 3%; */
  margin-left: -3%;
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
  /* устанавливаем размеры */
  width: 50%;
  height: 50%;
  /* устанавливаем координаты, относительно которых будем вращать текст */
  transform-origin: center right;
  /* поворачиваем текст */
  transform: rotate(var(--rotate));
  /* запрещаем пользователю выделять мышкой текст на секторах */
  user-select: none;
}

/* язычок */
.ticker {
  /* добавляем относительное позиционирование */
  position: relative;
  /* устанавливаем размеры */
  left: calc(var(--size) / -15);
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 20);
  /* фон язычка */
  background: var(--lg);
  /* делаем так, чтобы язычок был выше колеса */
  z-index: 1;
  /* форма язычка */
  clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
  /* устанавливаем точку, относительно которой будет вращаться язычок при движении колеса */
  transform-origin: center left;
}

.shadow-wrapper {
    position: absolute;
    top: -16px;
    left: 50%;
    filter: drop-shadow(10px 10px 15px #00000099);
    filter: drop-shadow(-1px 10px 5px rgba(0, 0, 0, 0.25));
}

.ticker {
    position: relative;
    left: 0;
    width: calc(var(--size) / 10);
    height: calc(var(--size) / 20);
    background: rgb(252, 222, 222);
    z-index: 1;
    clip-path: polygon(20% 0, 70% 50%, 20% 100%, 20% 50%);
    /* transform-origin: top; */
    transform: rotate(90deg);
}

#spin {
    user-select: none;
    position: absolute;
    top: 54.8%;
    left: 55%;
    width: 20%;
    height: 18%;
    margin: -15%;
    background: rgb(252, 222, 222);
    color: #fff;
    border-radius: 100%;
    border: 6px solid #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
    transition: 0.8s;
    z-index: 5;
}

/* кнопка запуска колеса */
.btn-spin {
    color: white;
    color: rgb(252, 222, 222);
    background: black;
    border: 5px solid #fff;
    font-size: inherit;
    padding: 0.9rem 2rem 1rem;
    cursor: pointer;
    border-radius: 1.35rem;
    box-shadow: 0 1px 25px 0 rgb(252 222 222 / 67%);
}

.btn-spin:hover {
    color: white;
    background: black;
    border-color: rgb(252, 222, 222);
    box-shadow: 0 2px 30px 0 rgb(252 222 222 / 67%);
}


/* если кнопка нажата и неактивна */
.btn-spin:disabled {
  cursor: progress;
  opacity: 0.25;
}

.text-center {
    text-align: center;
}

.font-weight-bold {
    font-weight: 600;
}

.font-size-2 {
    font-size: 120%;
}

.font-size-3 {
    font-size: 150%;
}

.rotate-90 span {
  transform: rotate(90deg);    
}

.rotate-180 span {
  transform: rotate(180deg);    
}

.rotate-270 span {
  transform: rotate(-90deg);    
}

.img-ponch span {
    width: 60%;
    background-image: url("/55_rsz.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 60%;
    transform: rotate(-90deg);
    background-position: center;
}

.img-ponch-loading span {
    animation: loading 2800ms ease;
}


/* анимация вращения */
.is-spinning .spinner {
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

/* анимация движения язычка */
.is-spinning .ticker {
    animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* эффект, когда колесо задевает язычок при вращении */
@keyframes tick {
  40% {
    /* чуть поворачиваем язычок наверх в середине анимации */
    transform: rotate(-12deg);
  }
}

/* анимируем выпавший сектор */
.prize.selected .text {
  /* делаем текст белым */
  filter: invert(1);
  transition: 300ms color ease;
  /* настраиваем длительность анимации */
  animation: selected 800ms ;
}

.font-color-2.prize.selected .text {
  /* меняем цвет текста - каринки с кроликом */
  color: rgb(252, 222, 222);
  filter: none;
  transition: 300ms color ease;
  /* настраиваем длительность анимации */
  animation: selected 800ms ;
}

/* настраиваем анимацию текста на выпавшем секторе по кадрам */
@keyframes selected {
  /* что происходит на 25% от начала анимации */
  25% {
    /* увеличиваем текст в 1,25 раза */
    
    /* добавляем тексту тень */
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
   
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
   
  }
  85% {
    
  }
}

@keyframes loading {
    0% {
        opacity: 0;
  }
    25% {
        opacity: 0;
  }
    40% {
        opacity: 0;
  }
    60% {
       opacity: 0.1;
  }
    65% {
       opacity: 0.2;
  }
    75% {
       opacity: 0.3;
  }
    80% {
       opacity: 0.4;
  }
    85% {
        opacity: .5;
  }
    90% {
        opacity: .6;
  }
    95% {
        opacity: .7;
  }
  100% {
        opacity: 1;
  }
    
}