* { box-sizing: border-box; }
:root { --pink:#ff00a8; --cyan:#00f6ff; --lime:#9dff00; --yellow:#fff200; }
body { margin:0; overflow:hidden; background:#030005; color:#fff; font-family:Impact, "Arial Black", sans-serif; }
button { font:inherit; cursor:pointer; }
.club { position:relative; width:100vw; height:100vh; min-height:520px; overflow:hidden; background:radial-gradient(circle at 50% 45%,#170021 0,#050008 55%,#000 100%); }
.entry { position:absolute; z-index:100; inset:0; display:grid; place-content:center; justify-items:center; gap:23px; background:#030005; transition:opacity .8s ease, visibility .8s; }
.entry-glow { position:absolute; width:280px; height:280px; border-radius:50%; background:#24002c; filter:blur(70px); animation:breathe 2.4s ease-in-out infinite; }
.entry p,.entry small,.entry button { position:relative; z-index:1; }
.entry p { margin:0; color:#777; font:13px "Courier New",monospace; letter-spacing:.1em; }
.entry small { color:#444; font:10px "Courier New",monospace; letter-spacing:.12em; }
#trust-button { min-width:230px; padding:20px 35px; border:1px solid #4b1f52; border-radius:2px; color:#f7e8ff; background:#130016; box-shadow:0 0 25px #b500d333,inset 0 0 20px #78008b22; font-size:24px; letter-spacing:.06em; text-transform:lowercase; transition:.25s; }
#trust-button:hover { color:#fff; border-color:#ef56ff; box-shadow:0 0 45px #e900ff88,inset 0 0 20px #78008b44; transform:scale(1.05); }
.party { visibility:hidden; position:absolute; inset:0; }
.club.playing .entry { opacity:0; visibility:hidden; pointer-events:none; }
.club.playing .party { visibility:visible; }
.strobe { position:absolute; z-index:20; inset:0; pointer-events:none; mix-blend-mode:overlay; animation:strobe .42s steps(1) infinite; }
.beam { position:absolute; z-index:1; top:-40%; left:50%; width:16vw; height:150vh; transform-origin:50% 0; clip-path:polygon(45% 0,55% 0,100% 100%,0 100%); opacity:.65; mix-blend-mode:screen; }
.beam-1 { background:linear-gradient(#fff0,#ff00c8aa); animation:beam1 3.2s ease-in-out infinite alternate; }
.beam-2 { background:linear-gradient(#fff0,#00eeffaa); animation:beam2 2.4s ease-in-out infinite alternate; }
.beam-3 { background:linear-gradient(#fff0,#95ff00aa); animation:beam3 3.7s ease-in-out infinite alternate; }
.beam-4 { background:linear-gradient(#fff0,#ffe600aa); animation:beam4 2.9s ease-in-out infinite alternate; }
.disco-ball { position:absolute; z-index:8; top:-22px; left:50%; width:115px; height:115px; border-radius:50%; transform:translateX(-50%); background:repeating-linear-gradient(0deg,#fff 0 5px,#444 5px 7px),repeating-linear-gradient(90deg,transparent 0 9px,#111 9px 11px); box-shadow:0 0 40px #fff,0 0 100px #00eaff; animation:ball 2s linear infinite; }
.disco-ball::before { content:""; position:absolute; left:54px; bottom:110px; height:100px; border-left:3px solid #777; }
.disco-ball span { position:absolute; inset:-35px; border:2px dotted #fff; border-radius:50%; animation:spin 4s linear infinite reverse; }
.marquee { position:absolute; z-index:30; left:0; width:100%; overflow:hidden; white-space:nowrap; border-block:4px solid #fff; background:#000; color:var(--yellow); box-shadow:0 0 22px var(--pink); font-size:clamp(18px,3vw,36px); font-style:italic; letter-spacing:.1em; line-height:1.25; transform:rotate(-1deg) scale(1.02); }
.marquee.top { top:82px; }
.marquee.bottom { bottom:14px; color:var(--cyan); transform:rotate(1deg) scale(1.02); }
.marquee span { display:inline-block; min-width:200%; animation:marquee 7s linear infinite; }
.marquee.bottom span { animation-direction:reverse; animation-duration:5s; }
.star-field { position:absolute; inset:0; z-index:4; }
.star { position:absolute; width:8px; height:8px; background:#fff; box-shadow:0 0 10px currentColor,0 0 24px currentColor; animation:pop var(--speed) steps(2) infinite; transform:rotate(45deg); }
.dancer-stage { position:absolute; z-index:10; inset:120px 0 55px; display:grid; place-items:center; align-content:center; }
.dancer { position:relative; z-index:4; height:min(55vh,520px); max-width:82vw; image-rendering:auto; filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 25px var(--pink)) drop-shadow(0 0 55px var(--cyan)); animation:dancer-bounce .6s ease-in-out infinite alternate; }
.dancer-stage h1 { position:absolute; z-index:5; top:48%; margin:0; color:#fff; font-size:clamp(55px,13vw,180px); font-style:italic; letter-spacing:-.06em; text-shadow:6px 6px 0 var(--pink),-6px -6px 0 var(--cyan),0 0 30px #fff; transform:rotate(-8deg); mix-blend-mode:screen; animation:title .6s steps(2) infinite; pointer-events:none; }
.dancer-stage p { position:absolute; z-index:6; bottom:0; margin:0; padding:5px 12px; background:#000; border:2px solid #fff; color:var(--lime); font:700 clamp(12px,2vw,20px) "Courier New",monospace; letter-spacing:.15em; transform:rotate(2deg); }
.pulse-ring { position:absolute; width:min(50vh,500px); height:min(50vh,500px); border:8px solid var(--cyan); border-radius:50%; box-shadow:0 0 25px var(--cyan),inset 0 0 25px var(--cyan); animation:pulse 1.2s ease-out infinite; }
.ring-2 { border-color:var(--pink); box-shadow:0 0 25px var(--pink),inset 0 0 25px var(--pink); animation-delay:.6s; }
.sound-button { position:absolute; z-index:50; right:18px; bottom:63px; width:50px; height:50px; border:3px solid #fff; border-radius:50%; background:#000; color:#fff; box-shadow:4px 4px 0 var(--pink),-4px -4px 0 var(--cyan); }
@keyframes breathe { 50%{transform:scale(1.35);opacity:.5} }
@keyframes strobe { 0%,85%{background:transparent} 86%{background:#ff00bf66} 90%{background:#00eeff77} 95%{background:#fff8} }
@keyframes beam1 { from{transform:rotate(-65deg)}to{transform:rotate(40deg)} }
@keyframes beam2 { from{transform:rotate(55deg)}to{transform:rotate(-35deg)} }
@keyframes beam3 { from{transform:rotate(-30deg)}to{transform:rotate(65deg)} }
@keyframes beam4 { from{transform:rotate(25deg)}to{transform:rotate(-55deg)} }
@keyframes ball { 50%{box-shadow:0 0 40px #fff,0 0 120px #ff00d4} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes marquee { to{transform:translateX(-50%)} }
@keyframes pop { 50%{opacity:.1;transform:rotate(45deg) scale(.3)} }
@keyframes dancer-bounce { to{transform:translateY(-14px) scale(1.025)} }
@keyframes pulse { from{transform:scale(.4);opacity:1}to{transform:scale(1.7);opacity:0} }
@keyframes title { 50%{transform:rotate(-5deg) scale(1.06);filter:hue-rotate(90deg)} }
@media (max-width:600px) {
  .marquee.top { top:63px; }
  .disco-ball { width:85px;height:85px; }
  .dancer-stage { inset:98px 0 50px; }
  .dancer { height:auto; width:min(82vw,360px); }
  .dancer-stage h1 { top:55%; }
  .sound-button { bottom:58px; right:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .party * { animation-duration:2s !important; }
  .strobe { display:none; }
}