:root {
  --bg: #040714;
  --bg2: #07122b;

  --cyan: #22edff;
  --blue: #1778ff;
  --purple: #702cff;
  --pink: #ff238b;
  --red: #ff3c43;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.page {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  padding: 14px 0 110px;
  background:
    radial-gradient(800px 620px at 15% 8%, rgba(34, 237, 255, .12), transparent 55%),
    radial-gradient(800px 620px at 88% 22%, rgba(255, 35, 139, .11), transparent 55%),
    radial-gradient(700px 520px at 50% 90%, rgba(112, 44, 255, .13), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.posterWrap {
  width: min(520px, 100vw);
  overflow: hidden;
  border-radius: 18px;
  background: #02030a;
  box-shadow: 0 28px 110px rgba(0, 0, 0, .62);
}

.posterImg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* CTA – E-SPORT BLUE / RED */
.cta {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 20;

  width: min(520px, 92vw);
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  border: 2px solid rgba(210, 240, 255, .88);
  border-radius: 999px;

  color: #ffffff;
  font-size: clamp(23px, 5vw, 28px);
  font-weight: 1000;
  letter-spacing: .3px;
  text-decoration: none;
  text-shadow: 0 3px 8px rgba(0, 0, 0, .78);

  background:
    radial-gradient(120% 170% at 18% 0%, rgba(255,255,255,.32), transparent 42%),
    linear-gradient(
      90deg,
      #00cfff 0%,
      #176dff 34%,
      #4424c9 55%,
      #de1746 78%,
      #ff3945 100%
    );

  box-shadow:
    0 18px 65px rgba(0, 0, 0, .68),
    0 0 0 3px rgba(0, 207, 255, .22) inset,
    0 0 0 7px rgba(255, 37, 68, .15) inset,
    -8px 0 24px rgba(0, 191, 255, .35),
    8px 0 26px rgba(255, 31, 67, .38);

  transform: translateX(-50%);
  animation: ctaPulse 2.5s ease-in-out infinite;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.78) 22%,
    rgba(255,255,255,.16) 42%,
    transparent 62%
  );

  transform: translateX(-70%);
  animation: shine 2.2s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }

  50% {
    transform: translateX(-50%) scale(1.028);
    filter: brightness(1.12);
  }
}

.cta:active {
  transform: translateX(-50%) scale(.98);
  filter: brightness(1.16);
}

.cta.is-loading {
  pointer-events: none;
  opacity: .88;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta::before {
    animation: none;
  }
}