:root {
  --hot-pink: #ff36df;
  --pink: #ff64ea;
  --blue: #2fbcff;
  --cyan: #2bf7ff;
  --green: #35ef6a;
  --yellow: #ffd84f;
  --orange: #ff7d28;
  --ink: #07000d;
  --panel: rgba(35, 4, 54, 0.68);
  --line: rgba(255, 105, 239, 0.8);
  --wheel-size: 36rem;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    "Arial Black",
    system-ui,
    sans-serif;
  color: #fff;
  background:
    radial-gradient(circle at 77% 25%, rgba(42, 188, 255, 0.58), transparent 33rem),
    radial-gradient(circle at 26% 42%, rgba(255, 50, 212, 0.7), transparent 32rem),
    linear-gradient(125deg, #180019 0%, #4a044b 38%, #06216f 72%, #030714 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -3;
  background-image: url("./assets/lucky-spin-reference.png");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  filter: blur(10px) saturate(1.4);
  transform: scale(1.04);
}

body::after {
  z-index: -2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.22), transparent 1px),
    radial-gradient(circle at 80% 76%, rgba(255, 255, 255, 0.18), transparent 1px);
  background-size: 4rem 4rem, 4rem 4rem, 8.5rem 8.5rem, 7rem 7rem;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.party-page {
  position: relative;
  min-height: 100svh;
  padding: 1rem;
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 54, 223, 0.34), transparent 21rem),
    radial-gradient(circle at 70% 62%, rgba(47, 188, 255, 0.22), transparent 18rem),
    rgba(5, 0, 14, 0.86);
  backdrop-filter: blur(10px);
}

.age-gate[hidden] {
  display: none;
}

.age-gate__panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  width: min(30rem, 92vw);
  padding: 2.2rem 1.6rem 1.6rem;
  border: 0.18rem solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 54, 223, 0.86), rgba(20, 4, 70, 0.96) 52%, rgba(34, 190, 255, 0.82)),
    #10001d;
  box-shadow:
    0 0 0.8rem #fff,
    0 0 2.2rem var(--hot-pink),
    0 0 3rem var(--blue),
    inset 0 0 1.8rem rgba(255, 255, 255, 0.16);
  text-align: center;
}

.age-gate__badge {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  margin-top: -4.5rem;
  border: 0.18rem solid #fff;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, #ff58e7 0 34%, #10001d 35% 100%);
  box-shadow:
    0 0 0.8rem #fff,
    0 0 1.8rem var(--hot-pink);
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 1.45rem;
}

.age-gate p {
  margin: 0;
  color: #c9f9ff;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-shadow: 0 0 0.9rem var(--blue);
}

.age-gate h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 0.95;
  text-shadow:
    0 0 0.35rem #fff,
    0 0 1rem var(--hot-pink);
}

.age-gate__panel > span:not(.age-gate__badge) {
  max-width: 22rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  line-height: 1.35;
}

.age-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.4rem;
}

.age-gate button {
  min-width: 9.5rem;
  min-height: 3.1rem;
  border: 0.15rem solid #fff;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(110deg, var(--hot-pink), #7b3fff 55%, var(--blue));
  box-shadow:
    0 0 0.7rem #fff,
    0 0 1.4rem var(--hot-pink);
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.age-gate button:last-child {
  background:
    linear-gradient(110deg, rgba(14, 0, 30, 0.92), rgba(80, 74, 96, 0.9));
  box-shadow:
    0 0 0.45rem rgba(255, 255, 255, 0.6),
    0 0 1rem rgba(255, 54, 223, 0.5);
}

.party-page--temporary-cleanup h1::before,
.party-page--temporary-cleanup .mini-ticket,
.party-page--temporary-cleanup .ticket-card,
.party-page--temporary-cleanup .pixel-badge,
.party-page--temporary-cleanup .wish-card {
  display: none !important;
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(19rem, 27rem) minmax(32rem, 1fr) minmax(17rem, 22rem);
  gap: 1.2rem;
  width: min(100%, 94rem);
  min-height: calc(100svh - 2rem);
  margin: 0 auto;
  align-items: end;
  isolation: isolate;
}

.window-chip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 20rem;
  height: 3.4rem;
  padding: 0 1rem;
  border: 2px solid var(--pink);
  border-radius: 8px;
  background: rgba(36, 2, 58, 0.42);
  box-shadow:
    0 0 1rem var(--hot-pink),
    inset 0 0 1rem rgba(255, 255, 255, 0.18);
  text-transform: uppercase;
  text-shadow: 0 0 0.7rem #fff;
}

.window-chip .heart {
  font-size: 2rem;
  color: #fff;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1rem var(--hot-pink);
}

.window-actions {
  margin-left: auto;
  color: #ffd5fb;
}

.intro-panel {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-top: 4.2rem;
}

.eyebrow {
  display: inline-flex;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 6px;
  background: rgba(255, 35, 211, 0.18);
  box-shadow: 0 0 1.3rem rgba(255, 54, 223, 0.6);
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
}

h1 {
  position: relative;
  margin: 0 0 1rem;
  line-height: 0.82;
  text-transform: uppercase;
}

h1::before {
  content: "♕";
  position: absolute;
  top: -3.4rem;
  left: 7.6rem;
  color: #fff;
  font-size: 4.8rem;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1.1rem var(--hot-pink);
  transform: rotate(-11deg);
}

h1 span,
h1 strong {
  display: block;
  letter-spacing: 0;
}

h1 span {
  color: #ff5fea;
  font-size: 7.2rem;
  -webkit-text-stroke: 2px #ffd9fb;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1.2rem var(--hot-pink),
    0.35rem 0.35rem 0 #9411c9;
}

h1 strong {
  margin-left: 3.2rem;
  color: #eafdff;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 6.8rem;
  font-style: italic;
  font-weight: 900;
  text-shadow:
    0 0 0.35rem #fff,
    0 0 1.4rem var(--blue),
    0.25rem 0.2rem 0 #0078ff;
  transform: rotate(-7deg);
}

.message-box {
  position: relative;
  width: min(100%, 24rem);
  margin-top: 1rem;
  padding: 1.25rem 1.4rem 1.05rem 2.1rem;
  border: 2px solid var(--pink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 41, 226, 0.22), rgba(22, 5, 53, 0.74)),
    var(--panel);
  box-shadow:
    0 0 1.5rem rgba(255, 63, 226, 0.9),
    inset 0 0 2rem rgba(255, 255, 255, 0.08);
}

.message-box p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1.35;
  text-shadow: 0 0 0.7rem rgba(255, 255, 255, 0.6);
}

.box-heart {
  position: absolute;
  top: -1.25rem;
  left: -0.6rem;
  font-size: 3rem;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1rem var(--hot-pink);
}

.code-area {
  width: min(100%, 24.5rem);
  margin-top: 1.1rem;
}

.code-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.35rem 0.3rem;
  color: #fff;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1rem var(--hot-pink);
}

.code-title span {
  color: #fff;
}

.code-input {
  display: grid;
  grid-template-columns: 2.8rem 1fr 3rem;
  align-items: center;
  height: 4.2rem;
  border: 2px solid var(--pink);
  border-radius: 8px;
  background: rgba(5, 0, 11, 0.78);
  box-shadow:
    0 0 1.25rem rgba(255, 54, 223, 0.9),
    inset 0 0 1rem rgba(48, 188, 255, 0.14);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.code-area.is-valid .code-input {
  border-color: var(--cyan);
  box-shadow:
    0 0 1.35rem rgba(43, 247, 255, 0.95),
    0 0 2.1rem rgba(53, 239, 106, 0.38),
    inset 0 0 1rem rgba(48, 188, 255, 0.24);
}

.code-area.is-invalid .code-input {
  border-color: #ff5a74;
  filter: saturate(0.75);
  box-shadow:
    0 0 1.15rem rgba(255, 54, 100, 0.85),
    inset 0 0 1rem rgba(255, 54, 100, 0.12);
}

.lock {
  color: #ffd7fb;
  font-size: 1.6rem;
  text-align: center;
  text-shadow: 0 0 0.8rem var(--hot-pink);
}

.code-input input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 1.12rem;
  text-transform: uppercase;
}

.code-input input::placeholder {
  color: #d55aff;
  opacity: 1;
}

.code-input button {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.35rem;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 40, 220, 0.35);
  box-shadow: 0 0 1rem var(--hot-pink);
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    box-shadow 0.18s ease;
}

.code-input button:disabled {
  cursor: wait;
  opacity: 0.6;
  transform: scale(0.94);
}

.code-area p {
  margin: 0.45rem 0 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.7rem rgba(255, 255, 255, 0.55);
}

.code-area.is-valid p {
  color: #baffff;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1rem var(--cyan);
}

.code-area.is-invalid p {
  color: #ffb1c1;
  text-shadow: 0 0 0.75rem rgba(255, 54, 100, 0.9);
}

.mini-ticket {
  display: inline-grid;
  gap: 0.15rem;
  margin: 1rem 0 0 0.1rem;
  padding: 0.55rem 0.85rem;
  border: 2px solid #fff;
  border-radius: 7px;
  color: #260030;
  background:
    repeating-linear-gradient(90deg, #16001c 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #ff4fe8, #ffb2f2);
  box-shadow: 0 0 1.2rem rgba(255, 92, 235, 0.9);
  font-family: "Arial Black", system-ui, sans-serif;
  transform: rotate(-4deg);
}

.mini-ticket span {
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 0 0.7rem var(--hot-pink);
}

.mini-ticket strong {
  font-size: 0.68rem;
  color: #2d0040;
}

.wheel-scene {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: end;
  min-height: 45rem;
  padding-bottom: 1.2rem;
}

.pointer {
  position: absolute;
  top: -1.75rem;
  left: 50%;
  z-index: 8;
  width: 4.8rem;
  height: 4.8rem;
  background: linear-gradient(145deg, #fff, #050006 30%, #000 70%, #ffbbef);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter:
    drop-shadow(0 0 0.4rem #fff)
    drop-shadow(0 0 1.2rem var(--hot-pink));
  transform: translateX(-50%);
  pointer-events: none;
}

.wheel-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 61%, rgba(255, 255, 255, 0.95) 62%, transparent 64%),
    repeating-conic-gradient(from 0deg, var(--hot-pink) 0 4deg, var(--blue) 4deg 7deg, transparent 7deg 12deg);
  box-shadow:
    0 0 1rem #fff,
    0 0 2.2rem var(--hot-pink),
    0 0 3.5rem rgba(47, 188, 255, 0.95);
}

.wheel-frame::before {
  content: "";
  position: absolute;
  inset: -1rem;
  z-index: -1;
  border: 0.35rem solid var(--hot-pink);
  border-radius: 50%;
  box-shadow:
    0 0 1rem #fff,
    0 0 2.6rem var(--hot-pink),
    inset 0 0 1.8rem var(--blue);
}

.wheel {
  position: relative;
  width: calc(var(--wheel-size) - 3rem);
  height: calc(var(--wheel-size) - 3rem);
  border: 0.35rem solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 23%, rgba(6, 0, 20, 0.75) 24% 29%, transparent 30%),
    conic-gradient(
      from -15deg,
      var(--slice-0-color, #ffc414) 0deg 30deg,
      var(--slice-1-color, #8a00ff) 30deg 60deg,
      var(--slice-2-color, #006fff) 60deg 90deg,
      var(--slice-3-color, #00a4d5) 90deg 120deg,
      var(--slice-4-color, #00a84b) 120deg 150deg,
      var(--slice-5-color, #6ed80d) 150deg 180deg,
      var(--slice-6-color, #f6bb19) 180deg 210deg,
      var(--slice-7-color, #ff891b) 210deg 240deg,
      var(--slice-8-color, #ff3d1d) 240deg 270deg,
      var(--slice-9-color, #ff198e) 270deg 300deg,
      var(--slice-10-color, #ffdb36) 300deg 330deg,
      var(--slice-11-color, #ff4fe8) 330deg 360deg
    );
  box-shadow:
    inset 0 0 2rem rgba(255, 255, 255, 0.28),
    inset 0 0 4rem rgba(0, 0, 0, 0.35);
  transform: rotate(var(--rotation, 0deg));
  transition: transform var(--spin-duration, 12s) cubic-bezier(0.11, 0.78, 0.08, 1);
}

.wheel.is-spinning {
  will-change: transform;
}

.wheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -15deg, rgba(255, 255, 255, 0.82) 0 0.8deg, transparent 0.8deg 30deg),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.25), transparent 9rem);
  pointer-events: none;
}

.wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  width: clamp(5.6rem, calc(var(--wheel-size) * 0.265), 9.6rem);
  color: #fff;
  text-align: center;
  text-transform: none;
  text-shadow:
    0 0 0.25rem #000,
    0 0 0.75rem rgba(255, 255, 255, 0.8);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--slice) * 30deg))
    translateY(calc(var(--wheel-size) * -0.29))
    rotate(90deg);
}

.wheel-text {
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: clamp(0.49rem, calc(var(--wheel-size) * 0.024), 0.86rem);
  font-weight: 900;
  line-height: 0.88;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.wheel-icon {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: 0.05rem;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 48%),
    #030006;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow:
    0 0 0.45rem rgba(255, 255, 255, 0.45),
    0 0 0.8rem rgba(0, 0, 0, 0.7);
}

.wheel-label.is-super {
  color: #fff7b1;
  text-shadow:
    0 0 0.35rem #000,
    0 0 0.7rem #fff,
    0 0 1rem var(--yellow);
}

.wheel-label.is-long .wheel-text {
  font-size: clamp(0.43rem, calc(var(--wheel-size) * 0.0205), 0.74rem);
  line-height: 0.86;
}

.wheel-label.is-super .wheel-text {
  color: #fff;
  font-size: clamp(0.43rem, calc(var(--wheel-size) * 0.0205), 0.74rem);
}

.wheel-label.is-extra-long .wheel-text {
  font-size: clamp(0.34rem, calc(var(--wheel-size) * 0.016), 0.58rem);
  line-height: 0.84;
}

.wheel-label.is-super .wheel-icon {
  border-color: #fff5aa;
  color: #2a001f;
  background:
    radial-gradient(circle at 35% 25%, #fff, transparent 28%),
    linear-gradient(135deg, #fff2a5, #ffcf22 44%, #ff56e8);
  box-shadow:
    0 0 0.5rem #fff,
    0 0 1.2rem var(--yellow),
    0 0 1.6rem var(--hot-pink);
}

.wheel-label.is-claimed {
  color: #d9d9e5;
  opacity: 0.68;
  filter: grayscale(1);
  text-shadow:
    0 0 0.3rem #000,
    0 0 0.7rem rgba(255, 255, 255, 0.45);
}

.wheel-label.is-claimed .wheel-icon {
  border-color: rgba(255, 255, 255, 0.48);
  color: #f4f4ff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.7), transparent 28%),
    linear-gradient(135deg, #9d9baa, #565463);
  box-shadow:
    0 0 0.35rem rgba(255, 255, 255, 0.6),
    0 0 0.9rem rgba(0, 0, 0, 0.72);
}

.wheel-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 11rem;
  height: 11rem;
  border: 0.35rem solid var(--hot-pink);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 54, 223, 0.2), transparent 48%),
    #060008;
  box-shadow:
    0 0 1rem #fff,
    0 0 2rem var(--hot-pink),
    inset 0 0 1.8rem rgba(255, 54, 223, 0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wheel-core span {
  width: 55%;
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 56%,
    79% 91%,
    50% 69%,
    21% 91%,
    32% 56%,
    2% 35%,
    39% 35%
  );
  filter:
    drop-shadow(0 0 0.35rem #fff)
    drop-shadow(0 0 1.1rem var(--hot-pink))
    drop-shadow(0 0 1.9rem var(--hot-pink));
  transform: translateY(-0.03rem);
}

.stand {
  width: min(30rem, 78%);
  height: 4.2rem;
  margin-top: -1.45rem;
  border: 0.35rem solid var(--hot-pink);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 54, 223, 0.55), rgba(3, 3, 20, 0.88)),
    #08000c;
  box-shadow:
    0 0 1.2rem var(--hot-pink),
    0 0 2rem var(--blue),
    inset 0 -1rem 1.4rem rgba(47, 188, 255, 0.7);
}

.spin-button {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: min(29rem, 90%);
  min-height: 6.3rem;
  margin-top: -2.8rem;
  border: 0.22rem solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(255, 56, 224, 0.98), rgba(106, 46, 255, 0.92) 58%, rgba(23, 193, 255, 0.94)),
    #170021;
  box-shadow:
    0 0 0.8rem #fff,
    0 0 2rem var(--hot-pink),
    0 0 2.6rem var(--blue),
    inset 0 0 1.2rem rgba(255, 255, 255, 0.22);
  transition:
    opacity 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.spin-button::after {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      -18deg,
      rgba(255, 255, 255, 0.14) 0 0.35rem,
      transparent 0.35rem 0.75rem
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.spin-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.65) brightness(0.62);
  box-shadow:
    0 0 0.3rem rgba(255, 255, 255, 0.55),
    0 0 0.9rem rgba(255, 54, 223, 0.34),
    inset 0 0 1.2rem rgba(0, 0, 0, 0.45);
}

.spin-button:disabled::after {
  opacity: 1;
}

.spin-button.is-ready {
  animation: spinPulse 1.2s ease-in-out infinite alternate;
}

.spin-button.is-spent {
  animation: none;
}

.spin-button strong {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 4rem;
  font-style: italic;
  line-height: 1;
  text-shadow:
    0 0 0.35rem #fff,
    0 0 1.2rem var(--hot-pink);
  transform: rotate(-4deg);
}

.spin-button span {
  color: #c9f9ff;
  font-size: 3rem;
  line-height: 1;
  text-shadow: 0 0 1rem var(--blue);
}

.spin-button:active {
  transform: translateY(2px) scale(0.99);
}

.spin-button:disabled:active {
  transform: none;
}

@keyframes spinPulse {
  from {
    box-shadow:
      0 0 0.8rem #fff,
      0 0 2rem var(--hot-pink),
      0 0 2.6rem var(--blue),
      inset 0 0 1.2rem rgba(255, 255, 255, 0.22);
  }

  to {
    box-shadow:
      0 0 1.15rem #fff,
      0 0 2.8rem var(--hot-pink),
      0 0 3.4rem var(--blue),
      inset 0 0 1.6rem rgba(255, 255, 255, 0.3);
  }
}

.side-panel {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 42rem;
}

.ticket-card {
  position: absolute;
  top: 2rem;
  right: 0.7rem;
  z-index: 5;
  display: grid;
  width: 13.5rem;
  padding: 0.8rem 1.05rem;
  border: 2px solid var(--pink);
  border-radius: 8px;
  color: #10001b;
  background:
    linear-gradient(90deg, transparent 85%, rgba(0, 0, 0, 0.72) 85% 88%, transparent 88%),
    linear-gradient(135deg, #8cf5ff, #ff9ef0 48%, #ffd5ff);
  box-shadow:
    0 0 1rem #fff,
    0 0 1.8rem var(--hot-pink);
  text-transform: uppercase;
  transform: rotate(-10deg);
}

.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  left: -0.75rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #250038;
  box-shadow: inset 0 0 0.5rem rgba(255, 255, 255, 0.45);
}

.ticket-card::before {
  top: 1.2rem;
}

.ticket-card::after {
  bottom: 1.2rem;
}

.ticket-card small,
.ticket-card strong {
  font-family: "Arial Black", system-ui, sans-serif;
  line-height: 0.95;
}

.ticket-card small {
  font-size: 1.75rem;
}

.ticket-card strong {
  font-size: 2.15rem;
}

.ticket-card span {
  margin-top: 0.3rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.character-wrap {
  position: absolute;
  right: 3.5rem;
  bottom: 2.2rem;
  z-index: 4;
  width: 15rem;
  height: 35rem;
  margin: 0;
}

.character-wrap::before {
  content: "";
  position: absolute;
  inset: 14% -26% 8% -28%;
  z-index: -1;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 54, 223, 0.26), rgba(47, 188, 255, 0.18)),
    rgba(6, 0, 16, 0.24);
  box-shadow:
    0 0 1rem var(--hot-pink),
    0 0 2.3rem var(--blue),
    inset 0 0 2rem rgba(255, 255, 255, 0.1);
  transform: rotate(4deg);
}

.character,
.character-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.character-glow {
  z-index: -1;
  opacity: 0.82;
  filter: blur(3px) saturate(1.5);
  transform: scale(1.08);
}

.character {
  filter:
    drop-shadow(0 0 0.45rem rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 1.2rem rgba(255, 54, 223, 0.9))
    drop-shadow(0 0 1.8rem rgba(47, 188, 255, 0.8));
}

.neon-callout {
  position: absolute;
  top: 17rem;
  left: -0.4rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--blue);
  border-radius: 8px;
  color: #fff;
  background: rgba(10, 14, 88, 0.24);
  box-shadow:
    0 0 1rem var(--blue),
    inset 0 0 1.4rem rgba(255, 54, 223, 0.25);
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.neon-callout span {
  color: #fff;
  font-size: 2.6rem;
  text-shadow:
    0 0 0.4rem #fff,
    0 0 1rem var(--hot-pink);
}

.neon-callout b {
  color: #ff72ee;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 2.15rem;
  line-height: 0.88;
  text-shadow:
    0 0 0.35rem #fff,
    0 0 1rem var(--hot-pink);
}

.pixel-badge {
  position: absolute;
  right: 0.4rem;
  bottom: 9.5rem;
  z-index: 6;
  padding: 0.45rem 0.7rem;
  border: 3px solid #f9dbff;
  border-radius: 6px;
  color: #ff7bed;
  background: rgba(14, 0, 27, 0.82);
  box-shadow:
    0 0 0.9rem var(--hot-pink),
    inset 0 0 1rem rgba(47, 188, 255, 0.38);
  font-family: "Courier New", monospace;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 0.92;
  text-align: center;
  transform: rotate(12deg);
}

.wish-card {
  position: absolute;
  right: 0.2rem;
  bottom: 1.2rem;
  z-index: 6;
  display: grid;
  gap: 0.2rem;
  min-width: 14rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--hot-pink);
  border-radius: 8px;
  background: rgba(21, 3, 61, 0.62);
  box-shadow:
    0 0 1.1rem var(--hot-pink),
    inset 0 0 1.3rem rgba(47, 188, 255, 0.26);
  transform: rotate(5deg);
}

.wish-card span {
  color: #ff7bed;
  font-size: 1.35rem;
  text-shadow:
    0 0 0.35rem #fff,
    0 0 1rem var(--hot-pink);
}

.wish-card b {
  color: #bfeeff;
  font-size: 1rem;
  text-shadow: 0 0 0.8rem var(--blue);
}

.prize-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 54, 223, 0.35), transparent 20rem),
    rgba(4, 0, 12, 0.72);
  backdrop-filter: blur(8px);
}

.prize-modal[hidden] {
  display: none;
}

.prize-modal__glow {
  position: absolute;
  width: min(32rem, 88vw);
  aspect-ratio: 1;
  border: 0.3rem solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--hot-pink), var(--blue), var(--yellow), var(--hot-pink));
  opacity: 0.24;
  filter: blur(14px);
  animation: modalGlow 6s linear infinite;
}

.prize-modal__panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  width: min(35rem, 92vw);
  padding: 2.3rem 2rem 1.8rem;
  border: 0.18rem solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 54, 223, 0.86), rgba(26, 11, 87, 0.95) 52%, rgba(29, 196, 255, 0.82)),
    #10001d;
  box-shadow:
    0 0 0.8rem #fff,
    0 0 2.2rem var(--hot-pink),
    0 0 3.2rem var(--blue),
    inset 0 0 2rem rgba(255, 255, 255, 0.17);
  text-align: center;
}

.prize-modal__badge {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  margin-top: -4.6rem;
  border: 0.18rem solid #fff;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, #ff58e7 0 32%, #10001d 33% 100%);
  box-shadow:
    0 0 0.8rem #fff,
    0 0 1.8rem var(--hot-pink);
  font-size: 2.8rem;
  line-height: 1;
}

.prize-modal__eyebrow {
  margin: 0;
  color: #c9f9ff;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 0.9rem var(--blue);
}

.prize-modal h2 {
  margin: 0;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 0.95;
  text-shadow:
    0 0 0.35rem #fff,
    0 0 1rem var(--hot-pink);
}

.prize-modal strong {
  display: block;
  max-width: 27rem;
  color: #fffcc8;
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.75rem);
  line-height: 1.08;
  text-shadow:
    0 0 0.4rem #000,
    0 0 1rem var(--yellow),
    0 0 1.4rem var(--hot-pink);
}

.prize-modal p:last-of-type {
  max-width: 25rem;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1.35;
  text-shadow: 0 0 0.8rem rgba(255, 255, 255, 0.7);
}

.prize-modal button {
  min-width: 8.8rem;
  min-height: 3rem;
  border: 0.15rem solid #fff;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(110deg, var(--hot-pink), #7b3fff 55%, var(--blue));
  box-shadow:
    0 0 0.7rem #fff,
    0 0 1.4rem var(--hot-pink);
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 1rem;
}

@keyframes modalGlow {
  to {
    transform: rotate(360deg);
  }
}

.stage::before,
.stage::after {
  content: "★";
  position: absolute;
  z-index: 0;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
  text-shadow:
    0 0 1rem var(--hot-pink),
    0 0 2rem var(--blue);
  pointer-events: none;
}

.stage::before {
  top: 5.2rem;
  left: 31rem;
  font-size: 5.8rem;
  transform: rotate(-11deg);
}

.stage::after {
  top: 16rem;
  right: 3.6rem;
  font-size: 5rem;
  transform: rotate(12deg);
}

@media (max-width: 1260px) {
  :root {
    --wheel-size: 31rem;
  }

  .stage {
    grid-template-columns: minmax(17rem, 24rem) minmax(28rem, 1fr) minmax(15rem, 19rem);
    gap: 0.9rem;
  }

  h1 span {
    font-size: 5.9rem;
  }

  h1 strong {
    font-size: 5.4rem;
  }

  .wheel-scene {
    min-height: 40rem;
  }

  .character-wrap {
    right: 2rem;
    width: 13rem;
    height: 31rem;
  }

  .ticket-card {
    width: 12rem;
  }
}

@media (max-width: 980px) {
  :root {
    --wheel-size: 27rem;
  }

  body {
    overflow-x: hidden;
  }

  .party-page {
    padding: 0.8rem;
  }

  .stage {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 1.4rem;
    align-items: center;
  }

  .window-chip {
    position: relative;
    min-width: 0;
    width: min(100%, 23rem);
    margin-bottom: -0.6rem;
  }

  .intro-panel {
    padding-top: 0;
  }

  h1 span {
    font-size: 5rem;
  }

  h1 strong {
    margin-left: 2.2rem;
    font-size: 4.8rem;
  }

  h1::before {
    top: -2.4rem;
    left: 5rem;
    font-size: 3.8rem;
  }

  .message-box,
  .code-area {
    width: min(100%, 34rem);
  }

  .wheel-scene {
    min-height: 34rem;
    padding-top: 0.8rem;
  }

  .pointer {
    top: 0;
    width: 3.8rem;
    height: 3.8rem;
  }

  .spin-button {
    min-height: 5.1rem;
  }

  .spin-button strong {
    font-size: 3.1rem;
  }

  .side-panel {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(10rem, 1fr);
    gap: 1rem;
    width: min(100%, 34rem);
    min-height: 28rem;
    margin: 0 auto;
    padding-bottom: 2.5rem;
  }

  .ticket-card,
  .character-wrap,
  .neon-callout,
  .pixel-badge,
  .wish-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .ticket-card {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .character-wrap {
    grid-row: 2 / 5;
    width: 12rem;
    height: 27rem;
  }

  .neon-callout {
    align-self: start;
  }

  .pixel-badge,
  .wish-card {
    align-self: start;
  }

  .stage::before,
  .stage::after {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --wheel-size: 20rem;
  }

  body {
    background:
      radial-gradient(circle at 47% 12%, rgba(255, 91, 235, 0.5), transparent 18rem),
      radial-gradient(circle at 72% 64%, rgba(45, 226, 255, 0.36), transparent 17rem),
      radial-gradient(circle at 18% 82%, rgba(255, 219, 76, 0.12), transparent 13rem),
      linear-gradient(165deg, #260027 0%, #262a76 48%, #100021 100%);
  }

  .party-page {
    padding: 0.7rem;
  }

  .window-chip {
    height: auto;
    min-height: 3.2rem;
    gap: 0.7rem;
    font-size: 0.86rem;
  }

  h1 span {
    font-size: 3.7rem;
    -webkit-text-stroke-width: 1px;
  }

  h1 strong {
    margin-left: 1.4rem;
    font-size: 3.65rem;
  }

  h1::before {
    top: -1.85rem;
    left: 3.8rem;
    font-size: 2.8rem;
  }

  .message-box {
    padding: 1rem 1rem 1rem 1.45rem;
  }

  .message-box p {
    font-size: 0.98rem;
  }

  .code-input {
    grid-template-columns: 2.4rem 1fr 2.7rem;
    height: 3.7rem;
  }

  .code-input input {
    font-size: 0.95rem;
  }

  .wheel-scene {
    min-height: 27rem;
  }

  .wheel-label {
    width: 5.6rem;
  }

  .wheel-text {
    font-size: 0.49rem;
    line-height: 0.88;
  }

  .wheel-label.is-long .wheel-text {
    font-size: 0.43rem;
    line-height: 0.86;
  }

  .wheel-icon {
    width: 1.08rem;
    height: 1.08rem;
    font-size: 0.62rem;
  }

  .wheel-label.is-extra-long .wheel-text {
    font-size: 0.34rem;
    line-height: 0.84;
  }

  .wheel-core {
    width: 6.8rem;
    height: 6.8rem;
  }

  .wheel-core span {
    width: 55%;
  }

  .spin-button {
    min-height: 4.4rem;
    gap: 0.55rem;
  }

  .spin-button strong {
    font-size: 2.55rem;
  }

  .spin-button span {
    font-size: 2.1rem;
  }

  .side-panel {
    grid-template-columns: 1fr;
    width: min(100%, 23rem);
    min-height: auto;
    padding-bottom: 3rem;
  }

  .ticket-card {
    justify-self: center;
  }

  .character-wrap {
    grid-row: auto;
    justify-self: center;
    width: 11rem;
    height: 25rem;
  }

  .neon-callout,
  .pixel-badge,
  .wish-card {
    justify-self: center;
  }
}

.party-page--temporary-cleanup .side-panel {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 2rem);
}

.party-page--temporary-cleanup .character-wrap {
  position: relative;
  inset: auto;
  right: auto;
  bottom: auto;
  width: 24rem;
  height: min(58rem, calc(100svh - 1rem));
  transform: translateX(1.5rem);
}

.party-page--temporary-cleanup .neon-callout {
  top: 50%;
  left: -0.8rem;
  z-index: 1;
  opacity: 0.5;
  transform: translateY(-50%) rotate(-3deg);
}

@media (max-width: 980px) {
  .party-page--temporary-cleanup .side-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    width: min(100%, 34rem);
    min-height: auto;
    padding-bottom: 1.5rem;
  }

  .party-page--temporary-cleanup .character-wrap {
    grid-row: auto;
    justify-self: center;
    width: 16rem;
    height: 35.5rem;
    transform: none;
  }

  .party-page--temporary-cleanup .neon-callout {
    left: auto;
    top: auto;
    justify-self: center;
    opacity: 0.9;
  }
}

@media (max-width: 560px) {
  .party-page--temporary-cleanup .character-wrap {
    width: 14rem;
    height: 31.5rem;
  }
}