/* styles.css */
[v-cloak] { display: none; }

/* Кнопки */
.cta-button {
  display: inline-block;
  background-color: transparent;
  color: white;
  padding: 0.9rem 2.2rem;
  border: 2px solid #00BFFF; /* DeepSkyBlue */
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}
.cta-button:hover {
  background-color: #00BFFF;
  color: #0d0c1d;
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.8);
}
.cta-button-sm { /* Упрощенная версия для хедера */
  padding: 0.5rem 1.25rem; font-size: 0.875rem;
  border-radius: 4px; background-color: #00BFFF; color: #0d0c1d;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.cta-button-sm:hover { background-color: white; }

/* Форма */
.form-input {
  flex-grow: 1; padding: 0.9rem 1.5rem; border-radius: 4px;
  border: 2px solid #4a5568; background-color: #1a202c;
  color: #e2e8f0; transition: all 0.3s ease;
}
.form-input:focus {
  outline: none; border-color: #00BFFF;
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.3);
}

/* Карточки Арен */
.arena-card {
  position: relative; overflow: hidden; border-radius: 8px;
  aspect-ratio: 4 / 5; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.3s ease;
}
.arena-card:hover { border-color: #00BFFF; }
.arena-video {
  position: absolute; top: 50%; left: 50%;
  width: auto; height: 120%; min-width: 120%; /* Чтобы видео заполняло контейнер */
  transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s ease;
}
.arena-card:hover .arena-video { opacity: 0.3; }
.arena-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
  display: flex; align-items: flex-end; padding: 1.5rem;
}
.arena-overlay h3 {
  font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; color: white;
}

.spinner-wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.spinner-pointer {
    position: absolute;
    top: -10px;
    right: 140px;
    width: 0;
    height: 0;
    /* border-style: solid; */
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #FFD700;
    transform: rotate(90deg);
    z-index: 10;
    filter: drop-shadow(0 0 5px #FFD700);
}

.spinner-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #00BFFF;
  box-shadow: 0 0 10px #00BFFF, 0 0 15px rgba(0,0,0,0.7) inset;
  list-style: none;
  padding: 0;
  margin: 0;
  /* Угол смещения начальной позиции колеса */
  --initial-rotation: -30deg;
  transform: rotate(var(--initial-rotation));
}

.spinner-wheel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Градиент теперь начинается с 0, а смещение управляется transform */
  background: conic-gradient(
    var(--c1) 0 60deg,
    var(--c2) 0 120deg,
    var(--c3) 0 180deg,
    var(--c4) 0 240deg,
    var(--c5) 0 300deg,
    var(--c6) 0 360deg
  );
  -webkit-mask: radial-gradient(circle closest-side at center, transparent 3px, #000 4px);
          mask: radial-gradient(circle closest-side at center, transparent 3px, #000 4px);
}
/* Линии-разделители */
.spinner-wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(#0000 0 59.5deg, #ddd 0 60.5deg);
  -webkit-mask: radial-gradient(circle closest-side at center, transparent 3px, #000 4px);
          mask: radial-gradient(circle closest-side at center, transparent 3px, #000 4px);
  opacity: 0.2;
}

.spinner-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.spinner-item .text-container {
    position: absolute;
    top: 15%;
    left: 55%;
    transform: translateX(-50%) rotate(calc(var(--initial-rotation) * -1 - var(--item-rotate)
120deg
));
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transform: rotate(calc(var(--initial-rotation) * -1));
    pointer-events: none;
}

.spinner-result {
  min-height: 150px;
  text-align: center;
}
@media (min-width: 768px) {
  .spinner-result {
    text-align: left;
  }
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* Модальные окна */
.info-modal {
  position: fixed; inset: 0; background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px); display: flex;
  justify-content: center; align-items: center; padding: 1rem; z-index: 1000;
}
.info-modal-content {
  background-color: #1a202c; color: #e2e8f0; border: 1px solid #4a5568;
  padding: 2rem; border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5); width: 100%; max-width: 600px;
  position: relative;
}
.modal-close-button {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-size: 1.5rem; color: #718096; background: none; border: none;
  cursor: pointer; line-height: 1;
}
.modal-close-button:hover { color: white; }