.play-page {
  --play-primary: #123d38;
  --play-secondary: #1d5b52;
  --play-accent: #e6b94a;
  --play-ink: #102b28;
  --play-muted: #61706d;
  --play-surface: #fffdf8;
  --play-surface-muted: #edf3f0;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--play-primary) 9%, #f8f4e8), #f5f9f5 56%, #fff8e8);
  color: var(--play-ink);
}

.play-content {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
}

.play-ambient {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  opacity: 0.28;
  filter: blur(4px);
  pointer-events: none;
}

.play-ambient--one {
  width: 28rem;
  height: 28rem;
  inset-block-start: -18rem;
  inset-inline-end: -10rem;
  background: var(--play-accent);
}

.play-ambient--two {
  width: 24rem;
  height: 24rem;
  inset-block-end: -16rem;
  inset-inline-start: -12rem;
  background: var(--play-secondary);
}

.customer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin-inline: auto;
  color: var(--play-ink);
}

.customer-brand p,
.customer-brand span {
  display: block;
  margin: 0;
}

.customer-brand p {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.customer-brand span {
  color: var(--play-muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  width: 2.6rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0.85rem;
  background: var(--play-primary);
  box-shadow: 0 0.55rem 1.3rem color-mix(in srgb, var(--play-primary) 24%, transparent);
  color: white;
  font-size: 1.2rem;
}

.brand-logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: white;
}

.campaign-copy {
  max-width: 41rem;
  margin: clamp(1.5rem, 4vh, 3rem) auto 0.6rem;
  text-align: center;
}

.campaign-kicker,
.result-eyebrow {
  margin: 0 0 0.45rem;
  color: var(--play-secondary);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.campaign-copy h1,
.used-experience > h1,
.unavailable-card h1 {
  margin: 0;
  color: var(--play-primary);
  font-size: clamp(2.1rem, 8.5vw, 4.75rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.campaign-copy > p:last-child,
.used-experience > p,
.unavailable-card > p:last-child {
  max-width: 34rem;
  margin: 0.8rem auto 0;
  color: var(--play-muted);
  font-size: clamp(0.92rem, 2.8vw, 1.05rem);
}

.play-stage {
  position: relative;
  display: grid;
  justify-items: center;
}

.sound-toggle {
  justify-self: end;
  min-height: 2.25rem;
  margin-block-end: -1.4rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--play-primary) 15%, transparent);
  border-radius: 999px;
  background: rgb(255 255 255 / 66%);
  color: var(--play-muted);
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.wheel-shell {
  position: relative;
  display: grid;
  width: min(88vw, 31rem);
  justify-items: center;
  padding-block-start: 1.7rem;
}

.wheel-rim {
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(0.48rem, 1.7vw, 0.75rem);
  border-radius: 50%;
  background: linear-gradient(135deg, #f5faff, #1677ff 45%, #0f3d75);
  box-shadow:
    0 1.7rem 4rem color-mix(in srgb, var(--play-primary) 24%, transparent),
    inset 0 0 0 2px rgb(255 255 255 / 62%);
}

.wheel-pointer {
  position: absolute;
  z-index: 4;
  inset-block-start: 0.6rem;
  width: 2.7rem;
  height: 3.4rem;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(135deg, #ffffff, #22c55e);
  filter: drop-shadow(0 0.4rem 0.35rem rgb(25 47 42 / 24%));
}

.wheel-target-badge {
  position: absolute;
  z-index: 5;
  inset-block-start: 0.05rem;
  inset-inline-start: 50%;
  display: grid;
  min-width: 5.4rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: linear-gradient(120deg, #0f3d75, #1677ff);
  box-shadow: 0 0.65rem 1.4rem rgb(15 61 117 / 25%);
  color: white;
  text-align: center;
  transform: translateX(1.75rem);
}

.wheel-target-badge span,
.wheel-target-badge strong {
  line-height: 1;
}

.wheel-target-badge span {
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.82;
}

.wheel-target-badge strong {
  margin-block-start: 0.08rem;
  font-size: 1rem;
  font-weight: 950;
}

.prize-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.12, 0.68, 0.08, 1);
  will-change: transform;
}

.prize-wheel::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, transparent 53%, rgb(255 255 255 / 26%) 54%, transparent 75%);
  content: "";
  pointer-events: none;
}

.wheel-label {
  --segment-angle: 0deg;
  --wheel-label-radius: min(32vw, 10rem);
  --wheel-label-size: clamp(0.8rem, 2.9vw, 1.18rem);
  --wheel-label-max-width: 5rem;
  position: absolute;
  z-index: 1;
  inset: 50%;
  width: var(--wheel-label-max-width);
  height: 1px;
  transform: rotate(var(--segment-angle)) translateY(calc(-1 * var(--wheel-label-radius)));
  transform-origin: 0 0;
}

.wheel-label span {
  display: block;
  width: fit-content;
  max-width: var(--wheel-label-max-width);
  padding: 0.12rem 0.34rem;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--segment-angle)));
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 999px;
  background: rgb(255 255 255 / 64%);
  color: #0f3d75;
  font-size: var(--wheel-label-size);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px rgb(255 255 255 / 58%);
}

.wheel-hub {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 26%;
  aspect-ratio: 1;
  inset: 37%;
  place-items: center;
  border: clamp(0.3rem, 1vw, 0.55rem) solid #fff6cf;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--play-primary), var(--play-secondary));
  box-shadow: 0 0.65rem 1.5rem rgb(20 58 52 / 30%);
  color: white;
}

.wheel-hub span {
  font-size: clamp(0.72rem, 2.8vw, 1.08rem);
  font-weight: 950;
  letter-spacing: 0.12em;
}

.wheel-sr-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  list-style: none;
  white-space: nowrap;
}

.spin-actions {
  display: grid;
  width: min(100%, 27rem);
  justify-items: stretch;
  margin-block-start: 1.15rem;
}

.spin-button {
  min-height: 4rem;
  padding: 0.9rem 2rem;
  border: 0;
  border-radius: 1.25rem;
  background: linear-gradient(120deg, var(--play-primary), var(--play-secondary));
  box-shadow:
    0 1rem 2.1rem color-mix(in srgb, var(--play-primary) 28%, transparent),
    inset 0 1px rgb(255 255 255 / 22%);
  color: white;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.spin-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--play-primary) 34%, transparent);
}

.spin-button:active:not(:disabled) {
  transform: translateY(1px);
}

.spin-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.spin-button:focus-visible,
.sound-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--play-accent) 78%, white);
  outline-offset: 4px;
}

.spin-assurance {
  margin: 0.6rem 0 0;
  color: var(--play-muted);
  font-size: 0.7rem;
  text-align: center;
}

.prize-gallery {
  width: min(100%, 64rem);
  margin-block-start: clamp(1.25rem, 4vw, 2rem);
}

.prize-gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.85rem;
}

.prize-gallery-heading h2 {
  margin: 0;
  color: var(--play-primary);
  font-size: clamp(1.25rem, 4vw, 1.9rem);
  letter-spacing: -0.035em;
}

.prize-gallery-heading > span {
  flex: 0 0 auto;
  padding: 0.34rem 0.64rem;
  border: 1px solid color-mix(in srgb, var(--play-secondary) 18%, transparent);
  border-radius: 999px;
  background: rgb(255 255 255 / 62%);
  color: var(--play-secondary);
  font-size: 0.68rem;
  font-weight: 850;
}

.prize-gallery-empty {
  margin: 0;
  padding: 1rem;
  border: 1px solid rgb(24 61 56 / 9%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 64%);
  color: var(--play-muted);
  text-align: center;
}

.prize-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.7rem), 1fr));
  gap: 0.75rem;
}

.prize-gallery-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(24 61 56 / 10%);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 0.75rem 1.8rem rgb(18 56 50 / 8%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  backdrop-filter: blur(12px);
}

.prize-gallery-card--winner {
  border-color: #22c55e;
  box-shadow:
    0 0 0 0.22rem rgb(34 197 94 / 18%),
    0 1.1rem 2.4rem rgb(15 61 117 / 18%);
  transform: translateY(-0.12rem);
}

.prize-gallery-art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f5faff;
}

.prize-gallery-image {
  width: 100%;
  height: 100%;
}

.prize-gallery-image img {
  object-fit: contain;
}

.gallery-winner-badge {
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-end: 0.55rem;
  padding: 0.26rem 0.5rem;
  border-radius: 999px;
  background: #22c55e;
  color: #062815;
  font-size: 0.63rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prize-gallery-card-copy {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
}

.prize-number-badge {
  width: fit-content;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #0f3d75, #1677ff);
  color: white;
  font-size: 0.7rem;
  font-weight: 950;
}

.prize-gallery-card h3 {
  margin: 0;
  overflow: hidden;
  color: var(--play-ink);
  font-size: 0.9rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-note {
  margin: 0 0 0.7rem;
  padding: 0.72rem 0.9rem;
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 76%);
  color: var(--play-muted);
  font-size: 0.78rem;
  text-align: center;
}

.connection-note--offline,
.connection-note--error {
  border: 1px solid #e7c98e;
  color: #714e18;
}

.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.result-backdrop {
  position: fixed;
  z-index: 20;
  display: grid;
  inset: 0;
  place-items: center;
  padding: 1rem;
  background: rgb(9 31 28 / 68%);
  backdrop-filter: blur(10px);
  animation: result-fade 380ms ease both;
}

.result-card {
  position: relative;
  z-index: 2;
  width: min(100%, 32rem);
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 2rem;
  background: linear-gradient(155deg, #fffef9, #f7f2df);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 38%);
  color: var(--play-ink);
  text-align: center;
  animation: result-rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.result-card h2 {
  margin: 0.9rem 0 0;
  color: var(--play-primary);
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.result-card > p:not(.result-eyebrow) {
  margin: 0.65rem auto 1rem;
  color: var(--play-muted);
  font-size: 0.88rem;
}

.winner-design-frame {
  width: min(100%, 29rem);
  margin-inline: auto;
  padding: 0.45rem;
  border: 1px solid rgb(15 61 117 / 10%);
  border-radius: 1.4rem;
  background: #f5faff;
}

.winner-design-image {
  width: 100%;
  min-height: clamp(13rem, 58vh, 25rem);
  margin-inline: auto;
  border-radius: 1rem;
  background: var(--play-surface-muted);
}

.winner-design-image img {
  object-fit: contain;
}

.winner-number {
  display: inline-grid;
  min-width: 8.5rem;
  margin-block-start: 0.85rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #0f3d75, #1677ff);
  color: white;
}

.winner-number span,
.winner-number strong {
  display: block;
  line-height: 1;
}

.winner-number span {
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.82;
}

.winner-number strong {
  margin-block-start: 0.18rem;
  font-size: 1.25rem;
  font-weight: 950;
}

.winner-number--legacy {
  background: #eef4ff;
  color: #0f3d75;
}

.safe-image {
  position: relative;
  overflow: hidden;
}

.safe-image img {
  object-fit: cover;
}

.safe-image-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgb(255 255 255 / 82%), transparent 35%),
    linear-gradient(145deg, #dceee8, #f7e9bd);
  color: var(--play-primary);
}

.safe-image-placeholder span {
  font-size: 1.7rem;
  font-weight: 950;
}

.reference-code {
  padding: 0.9rem;
  border: 1px dashed color-mix(in srgb, var(--play-primary) 28%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--play-primary) 5%, white);
}

.reference-code span,
.reference-code strong {
  display: block;
}

.reference-code span {
  color: var(--play-muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reference-code strong {
  margin-block-start: 0.15rem;
  color: var(--play-primary);
  font-size: 1.35rem;
  letter-spacing: 0.12em;
}

.confetti {
  position: absolute;
  overflow: hidden;
  inset: 0;
  pointer-events: none;
}

.confetti span {
  --confetti-index: 0;
  position: absolute;
  width: 0.55rem;
  height: 1rem;
  inset-block-start: -2rem;
  inset-inline-start: calc((var(--confetti-index) + 1) * 5.2%);
  border-radius: 0.2rem;
  background: hsl(calc(var(--confetti-index) * 38deg) 72% 58%);
  animation: confetti-fall calc(2.2s + var(--confetti-index) * 50ms) ease-in infinite;
  animation-delay: calc(var(--confetti-index) * -120ms);
}

.used-experience {
  max-width: 43rem;
  margin: clamp(3rem, 9vh, 6rem) auto 0;
  text-align: center;
}

.used-experience .wheel-shell {
  width: min(70vw, 20rem);
  margin-inline: auto;
}

.used-experience .wheel-label {
  transform: rotate(var(--segment-angle)) translateY(calc(-1 * min(28vw, 5.8rem)));
}

.state-pill {
  display: inline-flex;
  margin-block-end: 1rem;
  padding: 0.38rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--play-secondary) 18%, transparent);
  border-radius: 999px;
  background: rgb(255 255 255 / 64%);
  color: var(--play-secondary);
  font-size: 0.7rem;
  font-weight: 800;
}

.used-winner-card {
  margin: 1.4rem auto 0;
  background: rgb(255 255 255 / 76%);
  backdrop-filter: blur(12px);
}

.unavailable-card {
  width: min(100%, 34rem);
  margin: clamp(4rem, 15vh, 9rem) auto 0;
  padding: clamp(1.5rem, 7vw, 3rem);
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 2rem;
  background: rgb(255 255 255 / 68%);
  box-shadow: 0 1.5rem 4rem rgb(23 57 51 / 13%);
  text-align: center;
  backdrop-filter: blur(14px);
}

.unavailable-symbol {
  display: grid;
  width: 4.5rem;
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  place-items: center;
  border-radius: 1.4rem;
  background: linear-gradient(145deg, var(--play-primary), var(--play-secondary));
  box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--play-primary) 20%, transparent);
  color: white;
  font-size: 1.6rem;
}

@keyframes result-fade {
  from { opacity: 0; }
}

@keyframes result-rise {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.96); }
}

@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(540deg); }
}

@media (min-width: 48rem) {
  .play-content { padding-block-start: 1.5rem; }
  .campaign-copy { margin-block-start: 2.3rem; }
  .sound-toggle { margin-inline-end: 4rem; }
  .wheel-shell { width: min(51vh, 33rem); }
  .wheel-label { transform: rotate(var(--segment-angle)) translateY(calc(-1 * var(--wheel-label-radius))); }
}

@media (max-width: 42rem) {
  .prize-gallery-heading {
    align-items: start;
    flex-direction: column;
  }

  .prize-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wheel-target-badge {
    min-width: 4.6rem;
    transform: translateX(1rem);
  }

  .winner-design-image {
    min-height: clamp(12rem, 50vh, 19rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .result-card,
  .result-backdrop { animation: none; }
  .prize-wheel { transition-timing-function: ease-out; }
  .prize-gallery-card { transition: none; }
}