:root {
  color-scheme: light;
  --ink: #171321;
  --muted: #574e67;
  --yellow: #ffd447;
  --pink: #ff4f9a;
  --coral: #ff6b4a;
  --cyan: #1cc8ff;
  --green: #10b981;
  --green-dark: #047857;
  --red: #ef4444;
  --red-dark: #b91c1c;
  --white: #fffaf2;
  --line: rgba(23, 19, 33, 0.16);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #ffe8f3;
  color: var(--ink);
  overflow-x: hidden;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 18%, rgba(255, 212, 71, 0.9) 0 9rem, transparent 9.2rem),
    radial-gradient(circle at 88% 11%, rgba(28, 200, 255, 0.7) 0 11rem, transparent 11.2rem),
    radial-gradient(circle at 78% 88%, rgba(16, 185, 129, 0.75) 0 13rem, transparent 13.2rem),
    radial-gradient(circle at 7% 92%, rgba(255, 107, 74, 0.7) 0 10rem, transparent 10.2rem),
    linear-gradient(135deg, #fff0a8 0%, #ffd6e8 34%, #c9f3ff 68%, #ddfbe8 100%);
}

.panel {
  width: min(100%, 1180px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4vw, 42px);
  padding: clamp(22px, 7vw, 88px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.panel::before {
  width: clamp(120px, 20vw, 250px);
  height: clamp(120px, 20vw, 250px);
  right: clamp(12px, 5vw, 70px);
  top: clamp(28px, 8vw, 86px);
  background:
    linear-gradient(90deg, transparent 46%, rgba(23, 19, 33, 0.16) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(23, 19, 33, 0.16) 47% 53%, transparent 54%),
    var(--yellow);
  box-shadow: 0 24px 70px rgba(255, 79, 154, 0.22);
  opacity: 0.62;
}

.panel::after {
  width: clamp(84px, 13vw, 160px);
  height: clamp(84px, 13vw, 160px);
  left: clamp(12px, 5vw, 70px);
  bottom: clamp(28px, 8vw, 86px);
  background: var(--cyan);
  box-shadow:
    24px 18px 0 rgba(255, 79, 154, 0.78),
    -16px -20px 0 rgba(16, 185, 129, 0.78);
  opacity: 0.52;
}

.hidden {
  display: none;
}

.intro {
  align-items: center;
  text-align: center;
}

.panel > * {
  position: relative;
  z-index: 2;
}

.transition-lock .actions {
  pointer-events: none;
}

.marquee {
  width: min(100%, 920px);
  overflow: hidden;
  white-space: nowrap;
  border-block: 4px solid var(--ink);
  padding: clamp(10px, 2vw, 18px) 0;
  background: rgba(255, 250, 242, 0.52);
  transform: rotate(-1.4deg);
  box-shadow: 10px 10px 0 rgba(23, 19, 33, 0.12);
}

.marquee span {
  display: inline-block;
  min-width: 100%;
  font-size: clamp(48px, 12vw, 138px);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--pink);
  text-shadow:
    3px 3px 0 var(--ink),
    7px 7px 0 var(--yellow);
  animation: slideText 5s linear infinite;
}

.names {
  height: clamp(76px, 13vw, 150px);
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.names span {
  position: absolute;
  opacity: 0;
  transform: translateY(48px);
  font-size: clamp(42px, 10vw, 112px);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ink);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow:
    0 5px 0 var(--white),
    0 10px 0 rgba(255, 107, 74, 0.38);
  animation: fastNames 8.4s cubic-bezier(0.2, 0.9, 0.18, 1) infinite;
}

.names span:nth-child(2) {
  animation-delay: 1.2s;
}

.names span:nth-child(3) {
  animation-delay: 2.4s;
}

.names span:nth-child(4) {
  animation-delay: 3.6s;
}

.names span:nth-child(5) {
  animation-delay: 4.8s;
}

.names span:nth-child(6) {
  animation-delay: 6s;
}

.names span:nth-child(7) {
  animation-delay: 7.2s;
}

.primary-button,
.yes-button,
.no-button {
  min-height: 54px;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  border: 4px solid var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.primary-button {
  width: min(100%, 360px);
  min-height: clamp(62px, 9vw, 82px);
  background: linear-gradient(135deg, var(--ink), #4338ca);
  box-shadow: 0 12px 0 rgba(23, 19, 33, 0.22);
  font-size: clamp(22px, 5vw, 34px);
}

.start-button {
  animation: startBounce 1.2s ease-in-out infinite alternate;
}

.primary-button:active,
.yes-button:active,
.no-button:active {
  transform: scale(0.98);
}

.event-info {
  display: grid;
  justify-content: center;
  gap: 8px;
  text-align: center;
  margin-bottom: clamp(8px, 2vw, 22px);
  transform: translateY(clamp(-28px, -3vw, -10px));
}

.event-info p {
  margin: 0;
  display: inline-grid;
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink);
  font-size: clamp(17px, 2.2vw, 28px);
  line-height: 1.45;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(255, 250, 242, 0.86);
}

.event-info strong {
  display: block;
  max-width: min(78vw, 760px);
  font: inherit;
  text-align: center;
}

.event-info p:last-child {
  gap: 6px;
}

.event-info p:last-child .event-icon {
  margin-right: -4px;
}

.event-info .event-icon {
  display: inline-grid;
  width: 2em;
  height: 2em;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 4px 4px 0 rgba(23, 19, 33, 0.12);
  flex: 0 0 2em;
  font-size: 0.92em;
  line-height: 1;
  text-align: center;
  padding: 0;
  transform: none;
}

h1 {
  margin: 0;
  font-size: clamp(38px, 8.4vw, 96px);
  line-height: 0.98;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  text-shadow:
    0 5px 0 var(--white),
    0 11px 0 rgba(255, 79, 154, 0.22);
  animation: headlineFloat 2.8s ease-in-out infinite;
}

.ticket-note {
  width: fit-content;
  margin: -8px auto 0;
  padding: 10px 22px;
  color: var(--ink);
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 8px;
  font-size: clamp(20px, 4.2vw, 38px);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow:
    8px 8px 0 var(--pink),
    14px 14px 0 rgba(23, 19, 33, 0.14);
  animation: ticketWiggle 2.4s ease-in-out infinite;
}

.stage-two .ticket-note {
  order: -1;
  margin: 0 auto -4px;
  background: linear-gradient(135deg, var(--yellow), #fff7ad);
  box-shadow:
    8px 8px 0 var(--coral),
    14px 14px 0 rgba(23, 19, 33, 0.16);
}

.actions {
  display: grid;
  width: min(100%, 760px);
  grid-template-columns: 1.5fr 0.8fr;
  gap: clamp(12px, 2.5vw, 22px);
  align-items: center;
  align-self: center;
  margin-top: clamp(12px, 3vw, 36px);
}

.yes-button {
  min-height: clamp(78px, 11vw, 116px);
  background: linear-gradient(135deg, var(--green), #22c55e);
  font-size: clamp(28px, 6vw, 54px);
  box-shadow: 0 12px 0 rgba(4, 120, 87, 0.32);
}

#question:not(.stage-two):not(.stage-three):not(.stage-four) .yes-button {
  animation: yesPulse 1.35s ease-in-out infinite;
}

.no-button {
  min-height: clamp(58px, 8vw, 82px);
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  font-size: clamp(17px, 3.8vw, 28px);
  box-shadow: 0 9px 0 rgba(185, 28, 28, 0.28);
}

.angry {
  margin: 0;
  font-size: clamp(96px, 19vw, 210px);
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 10px 0 rgba(23, 19, 33, 0.12));
  animation: angryBeat 740ms ease-in-out infinite alternate;
}

.event-info .angry {
  display: block;
  font-size: clamp(120px, 24vw, 260px);
  text-shadow: none;
  text-transform: none;
}

.stage-three .event-info .angry {
  font-size: clamp(128px, 25vw, 290px);
}

.stage-two .actions {
  position: relative;
  min-height: clamp(150px, 24vw, 220px);
  grid-template-columns: 1.65fr 0.55fr;
}

.stage-two .no-button {
  position: relative;
  animation: dodge 520ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite alternate;
}

.stage-three {
  gap: clamp(14px, 3vw, 26px);
  max-width: none;
  width: 100%;
  background:
    repeating-radial-gradient(circle at 12% 20%, rgba(255, 212, 71, 0.32) 0 0.6rem, transparent 0.7rem 4rem),
    repeating-radial-gradient(circle at 86% 76%, rgba(255, 122, 24, 0.32) 0 0.7rem, transparent 0.8rem 4.4rem),
    linear-gradient(rgba(255, 237, 213, 0.38), rgba(255, 237, 213, 0.38)),
    radial-gradient(circle at 50% 88%, rgba(255, 212, 71, 0.88) 0 8rem, transparent 8.2rem),
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, 0.85) 0 13rem, transparent 13.2rem),
    radial-gradient(circle at 88% 12%, rgba(185, 28, 28, 0.76) 0 12rem, transparent 12.2rem),
    linear-gradient(135deg, #ffedd5 0%, #fb7185 44%, #b91c1c 100%);
}

.stage-three .ticket-note {
  background: linear-gradient(135deg, #ffd447, #ff8a3d);
  box-shadow:
    8px 8px 0 var(--red-dark),
    14px 14px 0 rgba(23, 19, 33, 0.18);
}

.stage-three::before {
  content: "🔥 🔥 🔥 🔥 🔥 🔥 🔥";
  width: auto;
  height: auto;
  inset: auto 0 2svh;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: transparent;
  font-size: clamp(56px, 12vw, 140px);
  letter-spacing: clamp(2px, 2vw, 24px);
  text-shadow:
    0 0 #ff7a18,
    0 -18px #ffd447;
  text-align: center;
  opacity: 0.72;
  animation: flames 720ms ease-in-out infinite alternate;
}

.stage-three::after {
  content: "🔥 🔥 🔥\A🔥 🔥 🔥\A🔥 🔥 🔥";
  white-space: pre;
  width: auto;
  height: auto;
  inset: 6svh 0 auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(40px, 9vw, 96px);
  line-height: 1.25;
  letter-spacing: clamp(8px, 4vw, 44px);
  text-align: center;
  opacity: 0.44;
  animation: sideFlames 960ms ease-in-out infinite alternate;
}

.stage-three .actions {
  width: min(100%, 920px);
  grid-template-columns: 1fr;
  gap: clamp(18px, 4vw, 42px);
  margin-top: clamp(24px, 5vw, 58px);
}

.stage-three .yes-button {
  min-height: min(62svh, 520px);
  font-size: clamp(54px, 15vw, 150px);
  border-radius: clamp(20px, 5vw, 52px);
  animation: yesPulse 1.2s ease-in-out infinite;
}

.stage-three .no-button {
  width: 74px;
  min-height: 36px;
  justify-self: end;
  margin-top: clamp(6px, 2vw, 22px);
  font-size: 12px;
  padding: 0 8px;
  border-width: 3px;
  animation: tinyPanic 430ms ease-in-out infinite alternate;
}

.stage-four {
  max-width: none;
  width: 100%;
  background:
    repeating-radial-gradient(circle at 10% 14%, rgba(255, 212, 71, 0.4) 0 0.7rem, transparent 0.8rem 3.2rem),
    repeating-radial-gradient(circle at 88% 24%, rgba(255, 122, 24, 0.48) 0 0.8rem, transparent 0.9rem 3.4rem),
    repeating-radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.18) 0 0.6rem, transparent 0.7rem 2.8rem),
    radial-gradient(circle at 50% 100%, rgba(255, 212, 71, 0.92) 0 12rem, transparent 12.4rem),
    radial-gradient(circle at 16% 34%, rgba(239, 68, 68, 0.9) 0 15rem, transparent 15.3rem),
    radial-gradient(circle at 86% 18%, rgba(127, 29, 29, 0.92) 0 16rem, transparent 16.4rem),
    linear-gradient(145deg, #7f1d1d 0%, #b91c1c 38%, #450a0a 100%);
}

.stage-four h1,
.stage-four .event-info p {
  color: var(--white);
  text-shadow:
    3px 3px 0 #450a0a,
    0 10px 0 rgba(255, 122, 24, 0.32);
}

.stage-four::before {
  content: "🔥 🔥 🔥 🔥 🔥 🔥 🔥\A🔥 🔥 🔥 🔥 🔥 🔥 🔥";
  white-space: pre;
  width: auto;
  height: auto;
  inset: auto 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: clamp(54px, 10vw, 126px);
  line-height: 1.08;
  letter-spacing: clamp(0px, 1.8vw, 20px);
  text-align: center;
  text-shadow:
    0 0 #ff7a18,
    0 -16px #ffd447,
    0 10px #b91c1c;
  opacity: 0.9;
  animation: flames 520ms ease-in-out infinite alternate;
}

.stage-four::after {
  content: "🔥 🔥 🔥\A🔥 🔥 🔥\A🔥 🔥 🔥\A🔥 🔥 🔥";
  white-space: pre;
  width: auto;
  height: auto;
  inset: 0 auto auto 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(36px, 7vw, 88px);
  line-height: 1.18;
  opacity: 0.5;
  animation: sideFlames 640ms ease-in-out infinite alternate;
}

.stage-four .event-info {
  margin-bottom: 0;
  transform: translateY(0);
}

.stage-four .ticket-note {
  display: none;
}

.stage-four .many-actions {
  width: min(100%, 1080px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 1.3vw, 12px);
  align-items: stretch;
}

.stage-four .yes-button {
  min-height: clamp(44px, 7vw, 74px);
  border-width: 3px;
  font-size: clamp(15px, 3.2vw, 30px);
  animation: yesPulse 850ms ease-in-out infinite;
}

.stage-four .many-actions .yes-button:nth-child(2n) {
  animation-delay: 120ms;
}

.stage-four .many-actions .yes-button:nth-child(3n) {
  animation-delay: 240ms;
}

.stage-four .final-small-no {
  width: 48px;
  min-height: 28px;
  padding: 0 6px;
  align-self: center;
  justify-self: center;
  font-size: 9px;
  border-width: 2px;
  animation: tinyPanic 360ms ease-in-out infinite alternate;
}

.result {
  text-align: center;
}

.happy-emoji,
.final-angry {
  margin: 0;
  line-height: 1;
  text-align: center;
}

.happy-emoji {
  font-size: clamp(92px, 20vw, 210px);
  filter: drop-shadow(0 14px 0 rgba(16, 185, 129, 0.16));
  animation: happyPop 1.25s ease-in-out infinite alternate;
}

.result p {
  margin: 0;
  color: var(--green-dark);
  font-size: clamp(25px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 4px 0 var(--white);
}

.result .happy-emoji {
  color: inherit;
  font-size: clamp(92px, 20vw, 210px);
  line-height: 1;
  text-shadow: none;
}

.rejected {
  align-items: center;
  text-align: center;
  width: 100vw;
  max-width: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 212, 71, 0.8) 0 13rem, transparent 13.2rem),
    linear-gradient(135deg, #ffedd5 0%, #fb7185 38%, #991b1b 100%);
}

.final-angry {
  font-size: clamp(150px, 38vw, 390px);
  filter: drop-shadow(0 18px 0 rgba(23, 19, 33, 0.18));
  animation: angryBeat 520ms ease-in-out infinite alternate;
}

.retry-button {
  background: linear-gradient(135deg, var(--yellow), var(--coral));
  color: var(--ink);
}

.rejected-gif {
  width: min(88vw, 420px);
  max-height: 30svh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(23, 19, 33, 0.28);
}

.saved-note {
  margin: -10px 0 0;
  color: var(--white);
  font-size: clamp(28px, 7vw, 68px);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    3px 3px 0 #450a0a,
    0 9px 0 rgba(255, 212, 71, 0.24);
}

@keyframes slideText {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes fastNames {
  0%,
  100% {
    opacity: 0;
    transform: translateY(48px);
  }

  5%,
  10% {
    opacity: 1;
    transform: translateY(0);
  }

  14% {
    opacity: 0;
    transform: translateY(-54px);
  }
}

@keyframes angryBeat {
  from {
    transform: scale(1) rotate(-2deg);
  }

  to {
    transform: scale(1.12) rotate(2deg);
  }
}

@keyframes happyPop {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(-8px) scale(1.06);
  }
}

@keyframes headlineFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-0.5deg);
  }

  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

@keyframes ticketWiggle {
  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    transform: rotate(-1deg) translateY(-4px);
  }
}

@keyframes yesPulse {
  0%,
  100% {
    transform: scale(1);
    filter: saturate(1);
  }

  50% {
    transform: scale(1.08);
    filter: saturate(1.22);
  }
}

@keyframes startBounce {
  from {
    transform: translateY(0) scale(1);
    box-shadow: 0 12px 0 rgba(23, 19, 33, 0.22);
  }

  to {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 20px 0 rgba(23, 19, 33, 0.16);
  }
}

@keyframes dodge {
  0% {
    transform: translate(0, 0) rotate(-8deg);
  }

  25% {
    transform: translate(-62px, 48px) rotate(16deg);
  }

  52% {
    transform: translate(46px, -36px) rotate(-18deg);
  }

  78% {
    transform: translate(-34px, -54px) rotate(14deg);
  }

  100% {
    transform: translate(38px, 42px) rotate(-12deg);
  }
}

@keyframes tinyPanic {
  from {
    transform: translateX(0) rotate(-10deg) scale(0.88);
  }

  to {
    transform: translateX(-34px) rotate(12deg) scale(0.76);
  }
}

@keyframes flames {
  from {
    transform: translateY(10px) scaleY(0.9);
    opacity: 0.62;
  }

  to {
    transform: translateY(-14px) scaleY(1.1);
    opacity: 0.94;
  }
}

@keyframes sideFlames {
  from {
    transform: translateX(-18px) translateY(8px) scale(0.95);
    opacity: 0.34;
  }

  to {
    transform: translateX(18px) translateY(-6px) scale(1.04);
    opacity: 0.58;
  }
}

@media (max-width: 420px) {
  .panel {
    min-height: 100svh;
    padding: 18px;
  }

  .actions {
    gap: 10px;
  }

  .panel::before {
    top: 12px;
    right: -42px;
  }

  .panel::after {
    left: -38px;
    bottom: 16px;
  }

  .event-info p:not(.angry) {
    width: fit-content;
    max-width: 100%;
    grid-template-columns: 2em minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 6px;
    font-size: clamp(15px, 4.4vw, 18px);
    line-height: 1.25;
  }

  .event-info strong {
    max-width: calc(100vw - 86px);
  }

  .event-info .event-icon {
    width: 1.5em;
    height: 1.5em;
    flex-basis: 2em;
    box-shadow: 3px 3px 0 rgba(23, 19, 33, 0.12);
    font-size: 0.9em;
    transform: none;
  }

  .event-info p:last-child {
    align-items: start;
  }

  .event-info p:last-child .event-icon {
    margin-top: -0.2em;
  }

  .event-info p:last-child {
    gap: 6px;
  }

  .event-info p:last-child .event-icon {
    margin-right: 0;
  }

  .ticket-note {
    max-width: 92%;
  }

  .stage-four .many-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .question {
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee span,
  .names span,
  h1,
  .ticket-note,
  .start-button,
  .angry,
  .happy-emoji,
  .final-angry,
  #question:not(.stage-two):not(.stage-three):not(.stage-four) .yes-button,
  .stage-two .no-button,
  .stage-three .yes-button,
  .stage-three .no-button,
  .stage-three::before,
  .stage-three::after,
  .stage-four .yes-button,
  .stage-four .no-button,
  .stage-four::before,
  .stage-four::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}