/* Устанавливаем черный фон и полноэкранный режим */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Убираем скролл */
  }
  
  /* Контейнер для кубиков и кнопки */
  .container {
    text-align: center;
    perspective: 1000px; /* Добавляем перспективу для 3D-эффекта */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Центрируем содержимое по вертикали */
    gap: 5vh; /* Используем относительные единицы для адаптивности */
    width: 100vw; /* Занимаем всю ширину экрана */
    height: 100vh; /* Занимаем всю высоту экрана */
    position: relative; /* Для позиционирования кубиков */
    overflow: visible; /* Не скрываем элементы за границами */
  }
  
  /* Обертка для кубиков */
  .dice-container {
    display: flex;
    gap: 5vw; /* Используем относительные единицы для адаптивности */
    width: 100%; /* Занимаем всю ширину экрана */
    justify-content: center; /* Центрируем кубики по горизонтали */
  }
  
  /* Стили для 3D-кубика */
  .dice {
    width: 30vw; /* Размер кубика зависит от ширины экрана */
    height: 30vw;
    position: relative; /* Относительное позиционирование */
    transform-style: preserve-3d; /* Сохраняем 3D-трансформации */
    transform: rotateX(0deg) rotateY(0deg); /* Начальное положение */
    transition: transform 0.5s ease-out; /* Плавное вращение */
  }
  
  /* Стили для граней кубика */
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: ivory;
    border: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: visible; /* Убедимся, что задние грани видны */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); /* Уменьшаем тень для мобильных */
    overflow: visible; /* Не скрываем элементы за границами */
    clip-path: polygon(
      10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%
    ); /* Создаем скругленные углы с помощью clip-path */
  }
  
  /* Стили для точек */
  .dot {
    width: 15%; /* Размер точек зависит от размера кубика */
    height: 15%;
    background-color: black;
    border-radius: 50%;
    position: absolute;
  }
  
  /* Позиции для точек */
  .center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .top-left {
    top: 15%;
    left: 15%;
  }
  
  .top-right {
    top: 15%;
    right: 15%;
  }
  
  .middle-left {
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
  }
  
  .middle-right {
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
  }
  
  .bottom-left {
    bottom: 15%;
    left: 15%;
  }
  
  .bottom-right {
    bottom: 15%;
    right: 15%;
  }
  
  /* Позиционирование граней */
  .front {
    transform: translateZ(15vw); /* Глубина зависит от размера кубика */
  }
  
  .back {
    transform: rotateY(180deg) translateZ(15vw);
  }
  
  .right {
    transform: rotateY(90deg) translateZ(15vw);
  }
  
  .left {
    transform: rotateY(-90deg) translateZ(15vw);
  }
  
  .top {
    transform: rotateX(90deg) translateZ(15vw);
  }
  
  .bottom {
    transform: rotateX(-90deg) translateZ(15vw);
  }
  
  /* Стили для кнопки */
  #rollButton {
    padding: 2vh 8vw; /* Увеличиваем размер кнопки для мобильных */
    font-size: 4vw; /* Размер шрифта адаптивный */
    background-color: ivory;
    color: black;
    border: none;
    border-radius: 1vh; /* Сглаживаем углы кнопки */
    cursor: pointer;
    position: absolute; /* Позиционируем кнопку абсолютно */
    bottom: 5vh; /* Размещаем кнопку внизу экрана */
  }
  
  #rollButton:hover {
    background-color: #ddd;
  }
  
  /* Анимация броска кубиков в 3D */
  @keyframes roll3D {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
      transform: rotateX(360deg) rotateY(180deg);
    }
    50% {
      transform: rotateX(720deg) rotateY(360deg);
    }
    75% {
      transform: rotateX(1080deg) rotateY(540deg);
    }
    100% {
      transform: rotateX(1440deg) rotateY(720deg);
    }
  }
  
  /* Класс для анимации броска */
  .rolling {
    animation: roll3D 2s ease-in-out;
  }