:root {
  --page-bg: #07111d;
  --frame-bg: #02070d;
  --frame-border: rgba(255, 255, 255, 0.1);
  --text: #f7f1db;
  --muted: #d2c7a7;
  --headline-ink: #0f2434;
  --chip-bg: rgba(10, 19, 31, 0.84);
  --chip-border: rgba(255, 255, 255, 0.12);
  --cta-bg: #f3c14c;
  --cta-text: #111c2c;
  --shadow-heavy: 0 28px 70px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(243, 193, 76, 0.15), transparent 34%),
    linear-gradient(160deg, #030811 0%, #071426 54%, #05101b 100%);
  color: var(--text);
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 12px;
}

.stage-frame {
  position: relative;
  width: min(100vw - 24px, 1600px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--frame-border);
  border-radius: 24px;
  background: var(--frame-bg);
  box-shadow: var(--shadow-heavy);
}

.stage {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  --pack-accent: #f2ca55;
  position: absolute;
  inset: 0;
  transform-origin: center center;
}

.stage-frame .stage {
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    scale(var(--stage-scale, 1))
    perspective(1800px)
    rotateX(var(--tilt-y))
    rotateY(var(--tilt-x));
}

.layer,
.packs-cluster,
.pack-card,
.pack-hit-area,
.hud,
.reward-card,
.cta-shell,
.selection-pill,
.cta-hit-area,
.stage-glow,
.stage-vignette {
  position: absolute;
}

.layer {
  display: block;
  user-select: none;
  pointer-events: none;
}

.background {
  filter: saturate(1.02) contrast(1.04);
}

.header-lockup,
.lockup {
  z-index: 2;
}

.stage-vignette {
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, transparent 0%, rgba(4, 9, 16, 0.06) 100%);
  pointer-events: none;
}

.stage-glow {
  width: 620px;
  height: 620px;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.42;
  pointer-events: none;
  z-index: 1;
}

.stage-glow-left {
  left: -160px;
  top: 180px;
  background: radial-gradient(circle, rgba(245, 194, 75, 0.34), transparent 72%);
}

.stage-glow-right {
  right: -80px;
  top: 80px;
  background: radial-gradient(circle, rgba(109, 198, 255, 0.24), transparent 74%);
}

.selection-pill {
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 0 36px;
  background: center / 100% 100% no-repeat url("./assets/cta-frame.webp");
  color: var(--cta-text);
  font-family: Rockwell, "Rockwell Bold", "Superclarendon", Georgia, serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 1;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.stage[data-state="ctaReady"] .selection-pill,
.stage[data-state="exiting"] .selection-pill {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.lockup-meta {
  z-index: 6;
}

.badges,
.logo,
.legal {
  z-index: 6;
}

.badges {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease;
}

.stage[data-state="ctaReady"] .badges,
.stage[data-state="exiting"] .badges {
  opacity: 1;
  visibility: visible;
}

.packs-cluster {
  z-index: 7;
}

.pack-card {
  --pack-rotate: 0deg;
  --pack-lift: 0px;
  --pack-scale: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(var(--pack-lift)) rotate(var(--pack-rotate)) scale(var(--pack-scale));
  transition:
    transform 220ms ease,
    filter 220ms ease,
    opacity 220ms ease;
  pointer-events: none;
}

.pack-hit-area {
  --pack-rotate: 0deg;
  --pack-lift: 0px;
  --pack-scale: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(var(--pack-lift)) rotate(var(--pack-rotate)) scale(var(--pack-scale));
}

.pack-hit-area-nami {
  clip-path: polygon(3% 18%, 11% 5%, 39% 4%, 86% 1%, 97% 14%, 98% 87%, 90% 98%, 12% 99%, 3% 87%);
}

.pack-hit-area-boa {
  clip-path: polygon(4% 17%, 11% 4%, 40% 4%, 86% 1%, 97% 14%, 98% 87%, 90% 98%, 12% 99%, 3% 87%);
}

.pack-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.pack-card::after {
  content: "";
  position: absolute;
  inset: 7% 11%;
  border-radius: 22px;
  border: 0;
  box-shadow: 0 0 0 rgba(243, 193, 76, 0);
}

.pack-card-nami img {
  animation: float-left 4s ease-in-out infinite;
}

.pack-card-boa img {
  animation: float-right 4.4s ease-in-out infinite;
}

.stage[data-state="boot"] .pack-card {
  pointer-events: none;
  opacity: 1;
  filter: saturate(1) brightness(1);
}

.stage[data-state="intro"] .pack-card {
  pointer-events: none;
  opacity: 1;
  filter: saturate(1) brightness(1);
}

.stage[data-state="boot"] .pack-hit-area,
.stage[data-state="intro"] .pack-hit-area,
.stage[data-state="exiting"] .pack-hit-area {
  pointer-events: none;
}

.stage[data-state="choice"] .pack-card:hover,
.stage[data-state="selected"] .pack-card:hover,
.stage[data-state="reveal"] .pack-card:hover,
.stage[data-state="ctaReady"] .pack-card:hover {
  --pack-lift: -10px;
  --pack-scale: 1.01;
}

.pack-card[data-selected="true"] {
  --pack-lift: -34px;
  --pack-scale: 1.11;
  filter: saturate(1.08) brightness(1.05) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.28));
}

.pack-hit-area[data-selected="true"] {
  --pack-lift: -34px;
  --pack-scale: 1.11;
}

.stage[data-state="selected"] .pack-card[data-selected="true"] {
  animation: sealed-shake 420ms ease-in-out;
}

.stage[data-state="selected"] .pack-hit-area[data-selected="true"] {
  animation: sealed-shake 420ms ease-in-out;
}

.stage[data-state="selected"] .pack-card[data-selected="true"] img {
  animation: none;
}

.stage[data-state="reveal"] .pack-card[data-selected="true"] {
  animation: reveal-pop 620ms cubic-bezier(0.2, 0.9, 0.22, 1.12);
}

.stage[data-state="reveal"] .pack-hit-area[data-selected="true"] {
  animation: reveal-pop 620ms cubic-bezier(0.2, 0.9, 0.22, 1.12);
}

.stage[data-state="reveal"] .pack-card[data-selected="true"] img,
.stage[data-state="ctaReady"] .pack-card[data-revealed="true"] img,
.stage[data-state="exiting"] .pack-card[data-revealed="true"] img {
  animation: none;
}

.stage[data-state="reveal"] .pack-card[data-selected="true"]::after {
  animation: reveal-flare 520ms ease-out;
}

.stage[aria-label="One Piece playable buy-in preview"] .pack-card::after {
  border-color: rgba(255, 228, 160, 0);
  box-shadow: 0 0 0 rgba(243, 193, 76, 0);
}

.pack-card[data-selected="false"] {
  --pack-lift: 10px;
  --pack-scale: 0.96;
  filter: saturate(0.86) brightness(0.88);
}

.pack-hit-area[data-selected="false"] {
  --pack-lift: 10px;
  --pack-scale: 0.96;
}

.pack-card[data-selected="none"] {
  --pack-lift: 0px;
  --pack-scale: 1;
  filter: saturate(1) brightness(1);
}

.pack-hit-area[data-selected="none"] {
  --pack-lift: 0px;
  --pack-scale: 1;
}

.reward-card {
  z-index: 8;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(8, 17, 30, 0.94), rgba(8, 17, 30, 0.72));
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(32px);
  pointer-events: none;
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.stage[data-state="selected"] .reward-card,
.stage[data-state="reveal"] .reward-card,
.stage[data-state="ctaReady"] .reward-card,
.stage[data-state="exiting"] .reward-card {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.reward-kicker {
  margin: 0 0 10px;
  color: var(--pack-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reward-title {
  margin: 0;
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-size: 48px;
  line-height: 0.95;
  text-transform: uppercase;
}

.reward-body {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.35;
}

.cta-shell {
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.cta-frame {
  z-index: 0;
}

.cta-button {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cta-text);
  font-family: Rockwell, "Rockwell Bold", "Superclarendon", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.stage[data-state="ctaReady"] .cta-shell,
.stage[data-state="exiting"] .cta-shell {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cta-hit-area {
  z-index: 9;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

.cta-hit-area::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid rgba(255, 228, 160, 0.46);
  opacity: 0;
  animation: pulse-ring 2.3s ease-out infinite;
}

.stage[data-state="ctaReady"] .cta-hit-area,
.stage[data-state="exiting"] .cta-hit-area {
  opacity: 1;
  pointer-events: auto;
}

.stage[data-state="ctaReady"] .cta-hit-area::before,
.stage[data-state="exiting"] .cta-hit-area::before {
  opacity: 1;
}

@keyframes float-left {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
  }
}

@keyframes float-right {
  0%,
  100% {
    transform: translateY(-6px) rotate(2deg);
  }
  50% {
    transform: translateY(8px) rotate(0deg);
  }
}

@keyframes sealed-shake {
  0% {
    transform: translateY(-34px) rotate(var(--pack-rotate)) scale(1.11);
  }
  18% {
    transform: translateY(-30px) rotate(calc(var(--pack-rotate) - 3deg)) scale(1.115);
  }
  36% {
    transform: translateY(-38px) rotate(calc(var(--pack-rotate) + 3.5deg)) scale(1.12);
  }
  54% {
    transform: translateY(-31px) rotate(calc(var(--pack-rotate) - 2.5deg)) scale(1.115);
  }
  72% {
    transform: translateY(-37px) rotate(calc(var(--pack-rotate) + 2deg)) scale(1.115);
  }
  100% {
    transform: translateY(-34px) rotate(var(--pack-rotate)) scale(1.11);
  }
}

@keyframes reveal-pop {
  0% {
    transform: translateY(22px) rotate(var(--pack-rotate)) scale(0.9);
    filter: saturate(0.96) brightness(0.96) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
  }
  48% {
    transform: translateY(-68px) rotate(var(--pack-rotate)) scale(1.2);
    filter: saturate(1.16) brightness(1.12) drop-shadow(0 32px 46px rgba(0, 0, 0, 0.34));
  }
  100% {
    transform: translateY(-34px) rotate(var(--pack-rotate)) scale(1.11);
    filter: saturate(1.08) brightness(1.05) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.28));
  }
}

@keyframes reveal-flare {
  0% {
    box-shadow: 0 0 0 rgba(255, 242, 181, 0);
    opacity: 0;
  }
  35% {
    box-shadow: 0 0 42px rgba(255, 242, 181, 0.72);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 242, 181, 0);
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    opacity: 0.78;
    transform: scale(0.96);
  }
  72% {
    opacity: 0;
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}