/* Сброс и базовые настройки */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: black;
}

/* Видео на весь экран */
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}

/* Контейнер колеса */
.wheel-container {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  z-index: 2;
  border-radius: 50%;
  padding: 10px;
  background: radial-gradient(circle, #FFA300 0%, #FFE663 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Само колесо */
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #00f601 0deg 45deg,
    #f00 45deg 90deg,
    #00f601 90deg 135deg,
    #f00 135deg 180deg,
    #00f601 180deg 225deg,
    #f00 225deg 270deg,
    #00f601 270deg 315deg,
    #f00 315deg 360deg
  );
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  transition: transform 4s cubic-bezier(0.25,0.1,0.25,1);
  position: relative;
  overflow: hidden;
}

/* Контейнер для текста секторов */
.labels-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-22.5deg);
}

/* Подписи секторов */
.sector-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.sector-label span {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  width: 70px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 0 4px black;
  line-height: 1.2;
  word-wrap: break-word;
}

/* Стрелка */
.arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
  width: auto;
  z-index: 3;
}

/* Кнопка спина */
#spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  background: url('{{ url_for("static", filename="assets/spin-button.png") }}') no-repeat center/contain;
  cursor: pointer;
  z-index: 4;
}

/* Информация о спинах */
.spin-info {
  position: absolute;
  bottom: -65px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #ffd700;
  border-radius: 12px;
  padding: 5px 20px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 15px #ffd700aa;
  font-family: "Arial", sans-serif;
  z-index: 5;
}

.spin-info span {
  color: #00ff6a;
  font-weight: bold;
}

/* Кнопка получения спинов */
#get-spins {
  position: absolute;
  bottom: -130px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #00f601, #00d25a);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 10px 25px;
  cursor: pointer;
  box-shadow: 0 0 15px #00ff6a;
  transition: all 0.2s ease;
  z-index: 5;
}

#get-spins:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 0 25px #00ff88;
}

/* Адаптивность для маленьких экранов */