* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#party { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: #0b0b0b; }
#intro { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; padding: 1.5rem; text-align: center; color: white; }
#intro h1 { max-width: 56rem; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 3rem; font-weight: 700; line-height: .95; letter-spacing: -.025em; text-wrap: balance; }
#start { border: 1px solid #b00000; background: transparent; padding: 1rem 2.5rem; color: white; font-family: monospace; font-size: .875rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; transition: background-color .2s; }
#start:hover, #start:focus-visible { background: #b00000; }
#start:focus-visible, #mute:focus-visible { outline: 2px solid white; outline-offset: 4px; }

#rave { position: absolute; inset: 0; }
#rave header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; padding: .75rem; }
#pun-card { max-width: 64rem; margin: 0 auto; transform: rotate(-1deg); border: 4px solid black; background: white; padding: .75rem 1rem; text-align: center; box-shadow: 8px 8px 0 black; }
#pun { margin: 0; color: black; font-size: 1.25rem; font-weight: 900; line-height: 1.25; text-transform: uppercase; text-wrap: balance; }
#pun.long { font-size: 1rem; }
#dance-area { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: 9rem; }
#dance-sway, #dance-pump { position: relative; width: 100%; height: 100%; }
#dance-sway { max-width: 48rem; }
#politician { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
#caption { position: absolute; z-index: 20; bottom: 1rem; left: 1rem; transform: rotate(2deg); border: 4px solid black; background: black; padding: .25rem .75rem; color: #ffe600; font-family: monospace; font-size: .875rem; font-weight: 700; text-transform: uppercase; pointer-events: none; }
#caption .slash { color: white; }
#mute { position: absolute; z-index: 20; right: 1rem; bottom: 1rem; border: 4px solid black; background: white; padding: .25rem .75rem; color: black; font-family: monospace; font-size: .875rem; font-weight: 700; text-transform: uppercase; box-shadow: 4px 4px 0 black; transition: transform .1s, box-shadow .1s; }
#mute:active { transform: translate(4px, 4px); box-shadow: none; }

@media (min-width: 768px) {
  #intro h1 { font-size: 6rem; }
  #start { font-size: 1rem; }
  #rave header { padding: 1.5rem 2rem; }
  #pun-card { padding: 1.25rem 2rem; }
  #pun { font-size: 2.25rem; }
  #pun.long { font-size: 1.875rem; }
  #dance-area { padding-top: 11rem; }
  #caption { bottom: 2rem; left: 2rem; font-size: 1.25rem; }
  #mute { right: 2rem; bottom: 2rem; }
}

@keyframes rave-bg { 0% { background-color: #ff2bd6; } 25% { background-color: #ffe600; } 50% { background-color: #00f0ff; } 75% { background-color: #7dff00; } }
@keyframes dance-pump { 0% { transform: scale(1.14, .9); } 35% { transform: scale(.95, 1.08); } 100% { transform: scale(1); } }
@keyframes dance-sway { 0% { transform: rotate(-6deg) translateX(-4%); } 50% { transform: rotate(6deg) translateX(4%); } }
@keyframes pun-pop { 0% { transform: scale(.2) rotate(-12deg); } 60% { transform: scale(1.15) rotate(3deg); } 100% { transform: scale(1) rotate(-1deg); } }
@keyframes emergency-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 0, 0, 0); } 50% { box-shadow: 0 0 32px 4px rgba(176, 0, 0, .55); } }
.rave-bg { animation: rave-bg calc(var(--beat) * 4) steps(1, end) infinite; }
#dance-pump { transform-origin: 50% 100%; animation: dance-pump var(--beat) ease-out infinite; }
#dance-sway { transform-origin: 50% 100%; animation: dance-sway calc(var(--beat) * 2) steps(1, end) infinite; }
.pun-pop { animation: pun-pop 300ms steps(4, end) both; }
#start { animation: emergency-glow 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #start { animation: none; } .rave-bg { animation-duration: calc(var(--beat) * 16); } }