/* Premium primary CTAs only: Home Play and gameplay Spin. */

.home-play,
.device.is-playing .btn-spin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 220, 112, 0.9);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 241, 170, 0.18), transparent 32%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 115, 62, 0.42), transparent 58%),
    linear-gradient(180deg, #c43a24 0%, #9d2017 48%, #5c0d0a 100%);
  box-shadow:
    inset 0 0 0 2px rgba(91, 30, 8, 0.78),
    inset 0 3px 0 rgba(255, 239, 167, 0.18),
    inset 0 -5px 9px rgba(45, 3, 2, 0.36),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(240, 174, 43, 0.2);
  color: #ffe9a6;
  transition:
    transform 160ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
}

.home-play::before,
.device.is-playing .btn-spin::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: clamp(5px, 0.55vw, 8px);
  border: 1px solid rgba(255, 226, 126, 0.54);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(81, 29, 8, 0.58),
    0 0 5px rgba(255, 206, 76, 0.14);
  pointer-events: none;
}

.home-play::after,
.device.is-playing .btn-spin::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 12%;
  width: 44%;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 76%);
  pointer-events: none;
}

.home-play {
  width: clamp(300px, 38vw, 500px);
  max-width: 82%;
  min-height: clamp(58px, 7.5vh, 78px);
  margin-block: clamp(3px, 0.7vh, 8px);
  padding: clamp(8px, 1.1vh, 12px) clamp(28px, 3vw, 44px);
  background:
    url("../assets/img/btn-spin-frame.webp") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 241, 170, 0.18), transparent 32%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 115, 62, 0.42), transparent 58%),
    linear-gradient(180deg, #c43a24 0%, #9d2017 48%, #5c0d0a 100%);
}

.home-play-km,
.home-play-en,
.device.is-playing .btn-spin-text {
  position: relative;
  z-index: 2;
}

.home-play-km {
  font-size: clamp(1rem, 2.35vh, 1.42rem);
  line-height: 1.05;
  color: #ffe8a0;
  text-shadow:
    0 1px 0 #6c2708,
    0 3px 5px rgba(0, 0, 0, 0.48);
}

.home-play-en {
  margin-top: 2px;
  font-size: clamp(0.58rem, 1.15vh, 0.72rem);
  line-height: 1;
  letter-spacing: 0.18em;
  color: #fff3c4;
}

.device.is-playing .spin-zone {
  width: clamp(250px, 44%, 400px);
  max-width: 80%;
}

.device.is-playing .btn-spin {
  width: 100%;
  min-height: 0;
  aspect-ratio: 420 / 104;
}

.device.is-playing .btn-spin-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  opacity: 0.94;
}

.device.is-playing .btn-spin-text b {
  font-size: clamp(1.28rem, 3.7vh, 2.15rem);
  line-height: 1;
}

.device.is-playing .btn-spin-text small {
  margin-top: 3px;
  font-size: clamp(0.52rem, 1.05vh, 0.68rem);
  line-height: 1;
}

.home-play:hover,
.device.is-playing .btn-spin:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.04);
  box-shadow:
    inset 0 0 0 2px rgba(91, 30, 8, 0.78),
    inset 0 3px 0 rgba(255, 239, 167, 0.22),
    inset 0 -5px 9px rgba(45, 3, 2, 0.36),
    0 10px 19px rgba(0, 0, 0, 0.44),
    0 0 20px rgba(240, 174, 43, 0.3);
}

.home-play:active,
.device.is-playing .btn-spin:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.home-play:focus-visible,
.device.is-playing .btn-spin:focus-visible {
  outline: 2px solid #fff0a7;
  outline-offset: 3px;
}

@media (max-width: 932px) and (orientation: landscape) {
  .home-play {
    width: min(62%, 270px);
    max-width: 76%;
    min-height: clamp(44px, 12vh, 54px);
    margin-block: 2px;
    padding: 5px 20px;
  }

  .home-play-km {
    font-size: clamp(0.84rem, 3.6vh, 1.05rem);
  }

  .home-play-en {
    font-size: clamp(0.45rem, 1.8vh, 0.56rem);
  }

  .device.is-playing .spin-zone {
    width: min(72%, 250px);
    max-width: 78%;
  }

  .device.is-playing .btn-spin {
    min-height: 0;
    aspect-ratio: 420 / 100;
  }

  .device.is-playing .btn-spin-text b {
    font-size: clamp(1rem, 4.5vh, 1.3rem);
  }

  .device.is-playing .btn-spin-text small {
    display: none;
  }
}

@media (max-width: 740px) and (max-height: 380px) and (orientation: landscape) {
  .home-play {
    width: min(60%, 235px);
    min-height: 42px;
  }

  .device.is-playing .spin-zone {
    width: min(68%, 220px);
  }
}