* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #050505;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.banner {
  position: relative;
  width: min(375px, 100vw);
  aspect-ratio: 375 / 640;
  overflow: hidden;
  background: #000;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.banner img {
  -webkit-user-drag: none;
  user-select: none;
}

.banner img,
.cta {
  position: absolute;
  display: block;
  max-width: none;
}

.bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player {
  left: 50%;
  top: -0.3%;
  width: 67.5%;
}

.coin-left {
  left: -12.3%;
  top: 24%;
  width: 30.6%;
}

.logo {
  left: 2.67%;
  top: 2.5%;
  width: 44.8%;
}

.chip-cash {
  left: 5.33%;
  top: 13.28%;
  width: 52%;
}

.chip-sport {
  left: 14.93%;
  top: 23.13%;
  width: 41.07%;
}

.offer {
  left: 3.2%;
  top: 37.81%;
  width: 94.13%;
  z-index: 2;
}

.props {
  left: -15.5%;
  top: 48.5%;
  width: 103%;
  z-index: 3;
}

.coin-bottom {
  left: -12.8%;
  top: 85.6%;
  width: 27.1%;
  z-index: 4;
}

.cta {
  left: 0;
  top: 79.4%;
  width: 100%;
  z-index: 5;
  line-height: 0;
}

.cta img {
  position: relative;
  width: 100%;
  height: auto;
  transform-origin: center center;
  animation: cta-pulse 1.8s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.45));
  }

  50% {
    transform: scale(1.045);
    filter: drop-shadow(0 0 18px rgba(255, 230, 40, 0.95));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta img {
    animation: none;
    filter: drop-shadow(0 0 8px rgba(255, 214, 0, 0.55));
  }
}

.banner .coin-side {
  display: none;
}

@media (min-width: 960px) {
  body {
    display: block;
    background: #050505;
  }

  .banner {
    width: 100vw;
    height: 100vh;
    min-height: 700px;
    aspect-ratio: auto;
    background:
      radial-gradient(ellipse 38% 46% at 74% 6%, rgba(198, 184, 12, 0.5), transparent 70%),
      radial-gradient(ellipse 46% 38% at 16% 100%, rgba(154, 140, 8, 0.42), transparent 72%),
      #050505;
  }

  .bg {
    opacity: 0;
  }

  .logo {
    left: clamp(28px, 4vw, 72px);
    top: clamp(28px, 4.5vh, 52px);
    width: clamp(190px, 15vw, 250px);
  }

  .chip-cash {
    left: clamp(28px, 4vw, 72px);
    top: clamp(108px, 15vh, 148px);
    width: clamp(220px, 17vw, 300px);
  }

  .chip-sport {
    left: clamp(44px, 5.2vw, 100px);
    top: clamp(178px, 24.5vh, 232px);
    width: clamp(176px, 13.5vw, 240px);
  }

  .coin-left {
    left: clamp(-72px, -2.5vw, -16px);
    top: clamp(210px, 30vh, 280px);
    width: clamp(120px, 10vw, 180px);
  }

  .offer {
    left: clamp(24px, 3vw, 64px);
    top: clamp(268px, 36vh, 340px);
    width: clamp(440px, 44vw, 680px);
    z-index: 4;
  }

  .player {
    left: auto;
    right: clamp(-56px, -1.5vw, -8px);
    top: clamp(-28px, -2vh, 0px);
    width: clamp(360px, 38vw, 580px);
  }

  .props {
    left: clamp(420px, 38vw, 580px);
    top: auto;
    bottom: clamp(0px, 1.5vh, 20px);
    width: clamp(520px, 44vw, 700px);
  }

  .coin-bottom {
    left: clamp(-36px, 0vw, 12px);
    top: auto;
    bottom: clamp(-24px, -1vh, 8px);
    width: clamp(110px, 9vw, 160px);
  }

  .banner .coin-side {
    display: block;
    right: clamp(24px, 5vw, 96px);
    bottom: clamp(96px, 16vh, 180px);
    width: clamp(96px, 8vw, 150px);
    z-index: 4;
  }

  .cta {
    left: clamp(8px, 2vw, 36px);
    top: auto;
    bottom: clamp(-36px, -2vh, -12px);
    width: clamp(400px, 38vw, 600px);
  }
}