/* Кнопка "Мне повезет" */
.lucky-btn {
  padding: 6px 14px 6px 28px;
  font-size: 0.85em;
  background: transparent;
  color: #f57c00;
  border: 1.5px solid #f57c00;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(245, 124, 0, 0.08);
  position: relative;
  display: inline-block;
  min-width: 120px;
  text-align: center;
}

/* Hover только для десктопа */
@media (min-width: 769px) {
  .lucky-btn:hover {
    background: #ffe0b2;
    border-color: #c9721c;
  }
  
  .lucky-btn:hover .lucky-text {
    opacity: 0;
  }
}

.lucky-text {
  transition: opacity 0.4s ease;
  display: inline-block;
  vertical-align: middle;
}

/* Wrapper с фиксированными размерами - теперь вне кнопки */
.dice-wrapper {
  position: fixed;
  width: 14px;
  height: 14px;
  overflow: visible;
  pointer-events: none;
  z-index: 1000;
  transition: transform 0.4s ease;
  color: #f57c00;
}

/* Плавный переход при hover и spinning */
.dice-wrapper.dice-transitioning {
  transition: left 0.4s ease, top 0.4s ease, transform 0.4s ease;
}

.dice-icon {
  display: block;
  perspective: 150px;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 0;
}

.dice-3d {
  width: 14px;
  height: 14px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.2s;
  transform: rotateX(-25deg) rotateY(35deg);
}

.dice-face {
  position: absolute;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  display: grid;
  grid-template-rows: 4px 4px 4px;
  grid-template-columns: 4px 4px 4px;
  padding: 2px;
  box-sizing: border-box;
  opacity: 0.9;
}

.dot {
  width: 2px;
  height: 2px;
  background: currentColor;
  border-radius: 50%;
}

/* Грань 1 - одна точка по центру */
.dice-front {
  transform: rotateY(0deg) translateZ(7px);
}
.dice-front .dot {
  grid-area: 2 / 2;
}

/* Грань 2 - две точки по диагонали */
.dice-back {
  transform: rotateY(180deg) translateZ(7px);
}
.dice-back .dot:nth-child(1) {
  grid-area: 1 / 1;
}
.dice-back .dot:nth-child(2) {
  grid-area: 3 / 3;
}

/* Грань 3 - три точки по диагонали */
.dice-right {
  transform: rotateY(90deg) translateZ(7px);
}
.dice-right .dot:nth-child(1) {
  grid-area: 1 / 1;
}
.dice-right .dot:nth-child(2) {
  grid-area: 2 / 2;
}
.dice-right .dot:nth-child(3) {
  grid-area: 3 / 3;
}

/* Грань 4 - четыре точки по углам */
.dice-left {
  transform: rotateY(-90deg) translateZ(7px);
}
.dice-left .dot:nth-child(1) {
  grid-area: 1 / 1;
}
.dice-left .dot:nth-child(2) {
  grid-area: 1 / 3;
}
.dice-left .dot:nth-child(3) {
  grid-area: 3 / 1;
}
.dice-left .dot:nth-child(4) {
  grid-area: 3 / 3;
}

/* Грань 5 - пять точек */
.dice-top {
  transform: rotateX(90deg) translateZ(7px);
}
.dice-top .dot:nth-child(1) {
  grid-area: 1 / 1;
}
.dice-top .dot:nth-child(2) {
  grid-area: 1 / 3;
}
.dice-top .dot:nth-child(3) {
  grid-area: 2 / 2;
}
.dice-top .dot:nth-child(4) {
  grid-area: 3 / 1;
}
.dice-top .dot:nth-child(5) {
  grid-area: 3 / 3;
}

/* Грань 6 - шесть точек */
.dice-bottom {
  transform: rotateX(-90deg) translateZ(7px);
}
.dice-bottom .dot:nth-child(1) {
  grid-area: 1 / 1;
}
.dice-bottom .dot:nth-child(2) {
  grid-area: 1 / 3;
}
.dice-bottom .dot:nth-child(3) {
  grid-area: 2 / 1;
}
.dice-bottom .dot:nth-child(4) {
  grid-area: 2 / 3;
}
.dice-bottom .dot:nth-child(5) {
  grid-area: 3 / 1;
}
.dice-bottom .dot:nth-child(6) {
  grid-area: 3 / 3;
}

/* Состояние spinning */
.lucky-btn.spinning {
  pointer-events: none;
  opacity: 0.7;
}

.lucky-btn.spinning .lucky-text {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lucky-btn.spinning ~ .dice-wrapper {
  transition: transform 0.4s ease;
}

.lucky-btn.spinning ~ .dice-wrapper .dice-3d {
  animation: dice-roll 2s ease-out;
}

.lucky-btn.spinning ~ .dice-wrapper .dice-front {
  transform: rotateY(0deg) translateZ(7px);
}

.lucky-btn.spinning ~ .dice-wrapper .dice-back {
  transform: rotateY(180deg) translateZ(7px);
}

.lucky-btn.spinning ~ .dice-wrapper .dice-right {
  transform: rotateY(90deg) translateZ(7px);
}

.lucky-btn.spinning ~ .dice-wrapper .dice-left {
  transform: rotateY(-90deg) translateZ(7px);
}

.lucky-btn.spinning ~ .dice-wrapper .dice-top {
  transform: rotateX(90deg) translateZ(7px);
}

.lucky-btn.spinning ~ .dice-wrapper .dice-bottom {
  transform: rotateX(-90deg) translateZ(7px);
}

@keyframes dice-roll {
  0% {
    transform: rotateX(-25deg) rotateY(35deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(335deg) rotateY(215deg) rotateZ(90deg) scale(1.3);
  }
  50% {
    transform: rotateX(695deg) rotateY(395deg) rotateZ(180deg) scale(1.2);
  }
  75% {
    transform: rotateX(1055deg) rotateY(575deg) rotateZ(270deg) scale(1.4);
  }
  100% {
    transform: rotateX(1415deg) rotateY(755deg) rotateZ(360deg) scale(1);
  }
}