:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: #fff4e2;
  background: #120921;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 8%, #67265c 0, transparent 47%),
    radial-gradient(ellipse at 93% 57%, #29275e 0, transparent 53%),
    #120921;
}
.party {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.marquee {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem 1.35rem;
  padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.75rem);
}
h1, p { margin: 0; }
h1 {
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #ffe08c;
  text-shadow: 0 0.06em #a93b71, 0 0.12em 0.19em #160619;
}
h1 span + span { color: #ff9ad2; }
.controls { display: flex; flex-wrap: wrap; gap: 0.55rem; }
button {
  min-height: 46px;
  padding: 0.6rem 1.15rem;
  border: 1px solid #ffdf88;
  border-radius: 100vw;
  background: #ffdf88;
  color: #28122d;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
button:hover { background: #fff0b7; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#restart { color: #fff4e2; border-color: #e395ca; background: #332047; }
#restart:hover { background: #503062; }
#status { width: 100%; }
.stage {
  grid-row: 2;
  position: relative;
  min-height: min(60vw, 65svh);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, #562752, transparent 72%);
}
canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.caption {
  z-index: 2;
  box-sizing: content-box;
  min-height: 2.6em;
  padding: 0.65rem 1rem 0.4rem;
  color: #ffe3f2;
  font-size: clamp(0.95rem, 1.7vw, 1.22rem);
  text-align: center;
}
.pickles-cameo {
  position: absolute;
  z-index: 2;
  top: clamp(6rem, 16vh, 9rem);
  right: clamp(0.75rem, 3vw, 2rem);
  pointer-events: none;
}
.pickles-cameo img {
  width: clamp(5.5rem, 14vw, 11rem);
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid #ffe08c;
  border-radius: 0.65rem;
  box-shadow: 0 0.5rem 2rem #160619b0;
  animation: cameo-in 240ms ease-out both;
}
.pickles-cameo img:first-child { object-position: 50% 49%; }
.pickles-cameo img:last-child { object-position: 64% center; }
@keyframes cameo-in {
  from { opacity: 0; transform: translateY(0.6rem) rotate(4deg); }
  to { opacity: 1; transform: rotate(4deg); }
}
.lasers {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.lasers i {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: 150vmax;
  height: 2px;
  color: var(--color);
  background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent);
  box-shadow: 0 0 12px currentColor;
  opacity: 0.38;
  transform: rotate(var(--from));
  transform-origin: left center;
}
.lasers i:nth-child(1) { --top: 2%; --left: -5%; --color: #ff7ad6; --from: 17deg; --to: 51deg; }
.lasers i:nth-child(2) { --top: 90%; --left: -5%; --color: #66fff0; --from: -19deg; --to: -54deg; }
.lasers i:nth-child(3) { --top: 9%; --left: 103%; --color: #af9aff; --from: 163deg; --to: 132deg; }
.lasers i:nth-child(4) { --top: 94%; --left: 103%; --color: #ffbf75; --from: 199deg; --to: 230deg; }
.is-playing .lasers i { animation: sweep 5s ease-in-out infinite alternate both; }
.is-playing .lasers i:nth-child(even) { animation-duration: 6.5s; }
@keyframes sweep { to { transform: rotate(var(--to)); } }
@media (max-width: 700px) {
  .marquee { justify-content: center; text-align: center; }
  .controls { justify-content: center; }
  .pickles-cameo { top: auto; bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .is-playing .lasers i, .pickles-cameo img { animation: none; }
}