:root {
  --acid-green: #8bff2c;
  --toxic-green: #33ff99;
  --haze-purple: #8717ff;
  --lava-pink: #ff3ea5;
  --rgb-blue: #1bc9ff;
  --slime: #154516;
  --ink: #030303;
  --cash: #9bff6a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 10% 20%, rgba(135, 23, 255, 0.75), transparent 25%),
    radial-gradient(circle at 80% 10%, rgba(255, 62, 165, 0.65), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(27, 201, 255, 0.55), transparent 26%),
    linear-gradient(135deg, #0d1206, #1f0327 35%, #083012 60%, #1a0a29 100%);
  color: #fff8d8;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

body {
  position: relative;
}

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

body::before {
  opacity: 0.35;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2324ff6e' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M70 70 C60 20 66 8 70 2 C74 8 80 20 70 70Z'/%3E%3Cpath d='M70 70 C20 60 8 66 2 70 C8 74 20 80 70 70Z'/%3E%3Cpath d='M70 70 C80 20 74 8 70 2 C66 8 60 20 70 70Z'/%3E%3Cpath d='M70 70 C120 60 132 66 138 70 C132 74 120 80 70 70Z'/%3E%3Cpath d='M70 70 C40 30 32 18 26 12 C34 14 46 20 70 70Z'/%3E%3Cpath d='M70 70 C100 30 108 18 114 12 C106 14 94 20 70 70Z'/%3E%3Cpath d='M70 70 C40 110 32 122 26 128 C34 126 46 120 70 70Z'/%3E%3Cpath d='M70 70 C100 110 108 122 114 128 C106 126 94 120 70 70Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Cg%3E%3Cellipse cx='58' cy='66' rx='36' ry='28' fill='%23ff9bcc'/%3E%3Cellipse cx='100' cy='58' rx='26' ry='22' fill='%23ff9bcc'/%3E%3Cellipse cx='40' cy='42' rx='12' ry='18' fill='%23ff9bcc'/%3E%3Cellipse cx='118' cy='36' rx='12' ry='18' fill='%23ff9bcc'/%3E%3Ccircle cx='94' cy='56' r='3.5' fill='%23111111'/%3E%3Ccircle cx='107' cy='56' r='3.5' fill='%23111111'/%3E%3Cellipse cx='101' cy='68' rx='14' ry='10' fill='%23ff6da8'/%3E%3Ccircle cx='96' cy='68' r='2.5' fill='%23111111'/%3E%3Ccircle cx='106' cy='68' r='2.5' fill='%23111111'/%3E%3Crect x='30' y='82' width='18' height='24' rx='8' fill='%23111111'/%3E%3Crect x='66' y='86' width='18' height='20' rx='8' fill='%23111111'/%3E%3Crect x='96' y='84' width='18' height='22' rx='8' fill='%23111111'/%3E%3Cpath d='M81 40 h42' stroke='%23000000' stroke-width='6'/%3E%3Ccircle cx='90' cy='40' r='11' fill='%23000000'/%3E%3Ccircle cx='118' cy='40' r='11' fill='%23000000'/%3E%3Cpath d='M125 47 q10 4 14 14' stroke='%23dddddd' stroke-width='4' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px, 200px 140px;
  background-position: 0 0, 60px 40px;
  mix-blend-mode: screen;
}

body::after {
  opacity: 0.18;
  background:
    repeating-linear-gradient(90deg, rgba(255, 0, 80, 0.25) 0 11px, transparent 11px 24px),
    repeating-linear-gradient(0deg, rgba(0, 255, 140, 0.2) 0 8px, transparent 8px 19px);
  animation: strobe 2.2s steps(6) infinite;
}

.chaos-shell {
  position: relative;
  min-height: 100vh;
  padding: 1rem;
  isolation: isolate;
  z-index: 5;
}

.smoke-layer,
.screen-noise,
.money-rain,
.background-collage,
.image-chaos-layer,
.smoke-chaos-layer,
.rave-chaos-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.smoke-layer {
  z-index: 3;
  opacity: 0.38;
  mix-blend-mode: screen;
  filter: blur(18px);
}

.smoke-one {
  background:
    radial-gradient(circle at 15% 25%, rgba(170, 255, 98, 0.8), transparent 18%),
    radial-gradient(circle at 70% 15%, rgba(199, 84, 255, 0.8), transparent 22%),
    radial-gradient(circle at 75% 70%, rgba(28, 229, 255, 0.75), transparent 18%);
  animation: drift 12s linear infinite alternate;
}

.smoke-two {
  background:
    radial-gradient(circle at 30% 55%, rgba(121, 255, 53, 0.7), transparent 20%),
    radial-gradient(circle at 80% 42%, rgba(255, 72, 175, 0.65), transparent 25%),
    radial-gradient(circle at 20% 80%, rgba(103, 16, 255, 0.6), transparent 18%);
  animation: drift 16s linear infinite alternate-reverse;
}

.money-rain {
  z-index: 2;
  overflow: hidden;
}

.money-rain::before {
  content: "$$$ $$$ $$$ $$$ $$$ $$$ $$$ $$$ $$$ $$$ $$$ $$$ $$$";
  position: absolute;
  inset: -20% 0 0;
  font-size: clamp(2rem, 5vw, 5rem);
  color: rgba(170, 255, 96, 0.18);
  letter-spacing: 0.35em;
  writing-mode: vertical-rl;
  animation: cashfall 12s linear infinite;
}

.screen-noise {
  z-index: 4;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.5) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.8) 0 0.8px, transparent 0.8px);
  background-size: 12px 12px, 16px 16px, 10px 10px;
  animation: fizz 0.28s steps(2) infinite;
}

.hero {
  position: relative;
  z-index: 8;
  padding-top: 5rem;
}

.background-collage {
  z-index: 1;
  overflow: hidden;
  opacity: 0.66;
}

.background-collage img {
  position: absolute;
  pointer-events: none;
  filter: saturate(1.55) contrast(1.18) brightness(1.05) drop-shadow(0 0 18px rgba(0, 0, 0, 0.5));
  mix-blend-mode: normal;
}

.mute-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  border: 4px solid #000;
  padding: 0.8rem 1rem;
  color: #12030a;
  font: inherit;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffe83a, #ff3ea5, #1bc9ff);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 0 22px rgba(255, 232, 58, 0.45);
  animation: wobble 1.4s ease-in-out infinite alternate;
}

.mute-toggle.loud {
  background: linear-gradient(135deg, #8bff2c, #ffffff, #ff3ea5);
  transform: scale(1.08) rotate(-4deg);
}

.wobble-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.beat-deck {
  position: absolute;
  top: 0.5rem;
  right: 11rem;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: min(46rem, 62vw);
  padding: 0.55rem 0.7rem;
  border: 4px solid #000;
  background: rgba(20, 8, 24, 0.78);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 0 24px rgba(27, 201, 255, 0.3);
}

.beat-launch,
.beat-control {
  border: 3px solid #000;
  color: #12030a;
  font: inherit;
  text-transform: uppercase;
  padding: 0.55rem 0.75rem;
  background: linear-gradient(135deg, #8bff2c, #ffe83a, #ff3ea5);
}

.beat-launch {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
}

.beat-control {
  font-size: 0.9rem;
  background: linear-gradient(135deg, #1bc9ff, #ffffff, #8bff2c);
}

.beat-volume-wrap,
.beat-status {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.85rem;
  color: #fff8d8;
}

.beat-volume {
  width: 7rem;
  accent-color: #ff3ea5;
}

.beat-status {
  min-width: 9rem;
  text-transform: uppercase;
}

.chaos-button {
  border: 3px solid #fff;
  background: linear-gradient(120deg, rgba(255, 60, 173, 0.85), rgba(53, 255, 125, 0.75), rgba(44, 164, 255, 0.8));
  color: #11060d;
  font: inherit;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  padding: 0.8rem 1rem;
  text-transform: uppercase;
  transform: rotate(calc(var(--tilt, 0deg)));
  box-shadow: 0 0 0 4px #000, 0 0 18px rgba(255, 255, 255, 0.6);
  animation: wobble 1.6s ease-in-out infinite alternate;
}

.chaos-button:nth-child(odd) {
  --tilt: -2deg;
}

.chaos-button:nth-child(even) {
  --tilt: 3deg;
}

.title-stack {
  position: relative;
  padding: 1rem 0 2rem;
}

.nickname,
.easter-egg,
.chaos-panel h2,
.quote,
.speech-cloud,
.popup-quote {
  text-shadow: 3px 3px 0 #000;
}

.site-title {
  position: relative;
  margin: 0.2rem 0;
  font-size: clamp(4rem, 18vw, 12rem);
  line-height: 0.85;
  letter-spacing: 0.08em;
  color: #f5ff8d;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.7),
    8px 0 0 rgba(255, 54, 181, 0.8),
    -8px 0 0 rgba(27, 201, 255, 0.8),
    0 0 35px rgba(141, 255, 44, 0.95);
  animation: glitch 1.2s steps(2) infinite, pulse 2.2s infinite;
}

.site-title::before,
.site-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

.site-title::before {
  color: rgba(255, 58, 168, 0.9);
  transform: translate(6px, -4px);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 62%);
}

.site-title::after {
  color: rgba(27, 201, 255, 0.9);
  transform: translate(-8px, 5px);
  clip-path: polygon(0 40%, 100% 26%, 100% 100%, 0 100%);
}

.nickname {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(2rem, 8vw, 5rem);
  color: #ff69d1;
  letter-spacing: 0.2em;
  transform: rotate(-4deg);
}

.title-clouds {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.easter-egg {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.55), transparent 45%),
    rgba(190, 190, 190, 0.35);
  border: 2px dashed #fff;
  filter: blur(1.4px);
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
  color: #fff8d8;
  text-decoration: none;
}

.easter-egg:hover {
  filter: blur(0);
  transform: scale(1.15) rotate(-2deg);
  background: rgba(78, 255, 134, 0.55);
}

.collage-grid {
  position: relative;
  z-index: 7;
  min-height: 80vh;
}

.chaos-panel {
  position: absolute;
  border: 4px solid #000;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 18px 35px rgba(0, 0, 0, 0.45);
  padding: 1rem;
  backdrop-filter: blur(5px);
  overflow: hidden;
}

.chaos-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 50%, rgba(255, 255, 255, 0.1));
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-panel {
  left: 2%;
  top: 0;
  width: 41%;
  background: rgba(12, 44, 20, 0.75);
  transform: rotate(-3deg);
}

.mega-chaos-button {
  width: 100%;
  border: 4px solid #000;
  padding: 1rem 1.2rem;
  color: #fff7a3;
  font: inherit;
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(130, 255, 46, 0.9), rgba(19, 14, 14, 0.25) 40%, rgba(255, 64, 165, 0.95)),
    linear-gradient(45deg, rgba(30, 216, 255, 0.8), rgba(0, 0, 0, 0));
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25), 0 0 18px rgba(142, 255, 44, 0.55);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.8),
    4px 4px 0 #000,
    -4px -2px 0 rgba(27, 201, 255, 0.7);
  transform: rotate(-2deg);
  animation: wobble 1.3s ease-in-out infinite alternate, pulse 1.4s infinite;
}

.mega-chaos-button:hover {
  filter: saturate(1.4) brightness(1.1);
}

.rave-mode-button {
  width: 100%;
  border: 4px solid #000;
  padding: 0.9rem 1.1rem;
  color: #0d030d;
  font: inherit;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  text-transform: uppercase;
  background: linear-gradient(90deg, #8bff2c, #1bc9ff, #ff3ea5, #ffe83a);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 22px rgba(255, 62, 165, 0.45);
  animation: pulse 1.2s infinite;
}

.quote-panel {
  right: 7%;
  top: 4%;
  width: 34%;
  background: rgba(68, 8, 75, 0.8);
  transform: rotate(6deg);
}

.media-panel {
  left: 20%;
  top: 32%;
  width: 28%;
  background: rgba(6, 28, 53, 0.78);
  transform: rotate(-8deg);
}

.scoreboard-panel {
  left: 55%;
  top: 28%;
  width: 36%;
  background: rgba(51, 17, 11, 0.82);
  transform: rotate(5deg);
}

.bubble-panel {
  left: 10%;
  top: 61%;
  width: 38%;
  background: rgba(58, 42, 7, 0.85);
  transform: rotate(7deg);
}

.rave-panel {
  right: 4%;
  top: 62%;
  width: 31%;
  background: rgba(10, 68, 53, 0.82);
  transform: rotate(-6deg);
}

.chaos-panel h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  color: var(--acid-green);
}

.chaos-panel p,
.chaos-panel li {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.quote {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: #fff06a;
}

.equalizer {
  display: flex;
  gap: 0.35rem;
  height: 90px;
  margin: 0.8rem 0;
  align-items: flex-end;
}

.equalizer span {
  flex: 1;
  border: 2px solid #000;
  background: linear-gradient(to top, var(--lava-pink), var(--rgb-blue), var(--acid-green));
  height: 24%;
  transition: height 80ms linear;
}

.speech-cloud {
  display: inline-block;
  margin: 0.4rem;
  padding: 0.8rem 1rem;
  background: #fff;
  color: #12030a;
  border: 4px solid #000;
  border-radius: 999px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  transform: rotate(-5deg);
}

.speech-cloud.alt {
  transform: rotate(7deg);
  background: #ffe83a;
}

.sticker-stage {
  position: relative;
  z-index: 9;
  min-height: 110vh;
  margin-top: 2rem;
}

.marquee-strip {
  overflow: hidden;
  border-block: 4px solid #fff;
  background: linear-gradient(90deg, rgba(126, 12, 255, 0.7), rgba(34, 255, 117, 0.8), rgba(255, 55, 171, 0.7));
  transform: rotate(-1deg);
}

.marquee-inner {
  display: flex;
  gap: 2rem;
  width: max-content;
  padding: 0.5rem 0;
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: #090909;
  animation: marquee 10s linear infinite;
}

.sticker-field {
  position: relative;
  min-height: 100vh;
}

.sticker {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  padding: 0.6rem;
  display: grid;
  place-items: center;
  border: 4px solid #000;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 16px 30px rgba(0, 0, 0, 0.48);
  animation: spinFloat var(--speed) linear infinite;
  user-select: none;
}

.sticker:hover {
  z-index: 20;
  transform: scale(1.2) rotate(12deg);
}

.sticker.pig {
  border-radius: 28% 42% 40% 30%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.65), transparent 25%),
    linear-gradient(135deg, #ff8bbb, #ff4d94);
}

.sticker.creeper {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25), transparent),
    linear-gradient(135deg, #3cff63, #0e6d24);
}

.sticker.cash {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), transparent),
    linear-gradient(135deg, #c9ff5d, #4f9216);
  color: #081402;
}

.sticker.rgb {
  background:
    linear-gradient(45deg, #ff3d9d, #20d9ff, #9dff35);
}

.sticker.meme {
  background:
    linear-gradient(135deg, #ffdd00, #ff7a00);
  color: #1b0900;
}

.sticker.llama {
  background:
    linear-gradient(135deg, #8d5fff, #ff7ad6);
}

.sticker.discordish {
  background:
    linear-gradient(135deg, #6a74ff, #77f1ff);
}

.sticker.banana {
  background:
    linear-gradient(135deg, #fff472, #ffd400);
  color: #281600;
}

.sticker .mini {
  display: block;
  font-size: 0.75em;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.popup-quote {
  position: fixed;
  z-index: 99;
  padding: 0.8rem 1rem;
  background: #fff172;
  color: #14090c;
  border: 3px solid #000;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  pointer-events: none;
  animation: popFade 1.4s ease forwards;
}

.burst-particle {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius, 50%);
  background: var(--bg);
  border: 2px solid rgba(0, 0, 0, 0.9);
  z-index: 98;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
  animation: particleBurst var(--life, 950ms) ease-out forwards;
}

.image-chaos-layer {
  z-index: 15;
  overflow: hidden;
}

.smoke-chaos-layer {
  z-index: 14;
  overflow: hidden;
}

.rave-chaos-layer {
  z-index: 16;
  overflow: hidden;
}

.flying-image,
.floating-loot,
.falling-item {
  position: fixed;
  pointer-events: none;
  z-index: 17;
  will-change: transform, opacity;
}

.flying-image {
  width: var(--size, 140px);
  animation: flyAround var(--life, 12s) linear forwards;
}

.floating-loot {
  width: var(--size, 120px);
  animation: floatLoot var(--life, 14s) ease-in-out forwards;
}

.falling-item {
  width: var(--size, 110px);
  animation: fallDrop var(--life, 10s) linear forwards;
}

.smoke-puff {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--size, 180px);
  height: var(--size, 180px);
  pointer-events: none;
  z-index: 14;
  border-radius: 50%;
  opacity: 0.7;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 22%),
    radial-gradient(circle at 48% 44%, rgba(126, 255, 53, 0.6), transparent 45%),
    radial-gradient(circle at 62% 56%, rgba(152, 86, 255, 0.42), transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(180, 180, 180, 0.6), transparent 70%);
  filter: blur(18px);
  animation: smokeRise var(--life, 9s) ease-out forwards;
}

.rave-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 16;
  animation: raveFlash 3.5s linear forwards;
}

.rave-text {
  position: fixed;
  left: var(--x);
  top: var(--y);
  pointer-events: none;
  z-index: 17;
  font-size: clamp(1.8rem, 8vw, 6rem);
  color: var(--color);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  text-shadow: 5px 5px 0 #000;
  transform: rotate(var(--rot));
  animation: raveWord 3.2s ease-out forwards;
}

@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.1); }
}

@keyframes strobe {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.22; }
}

@keyframes cashfall {
  from { transform: translateY(-12%); }
  to { transform: translateY(18%); }
}

@keyframes fizz {
  from { transform: translate(0, 0); }
  to { transform: translate(6px, 4px); }
}

@keyframes wobble {
  from { transform: translateY(0) rotate(-4deg) scale(1); }
  to { transform: translateY(-6px) rotate(4deg) scale(1.04); }
}

@keyframes glitch {
  0%, 100% { transform: skew(0deg); }
  20% { transform: skew(3deg) translateX(4px); }
  40% { transform: skew(-5deg) translateX(-6px); }
  60% { transform: skew(2deg) translateY(-3px); }
  80% { transform: skew(-2deg) translateY(4px); }
}

@keyframes pulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.4) brightness(1.2); }
}

@keyframes bounce {
  from { height: 25%; }
  to { height: 100%; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes spinFloat {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(5deg); }
  50% { transform: translateY(14px) rotate(-6deg); }
  75% { transform: translateY(-6px) rotate(10deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

@keyframes popFade {
  0% { opacity: 0; transform: translateY(16px) scale(0.6); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(1.18); }
}

@keyframes particleBurst {
  0% {
    opacity: 1;
    transform: translate3d(var(--x), var(--y), 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0)
      rotate(var(--rot))
      scale(0.1);
  }
}

@keyframes flyAround {
  0% {
    opacity: 1;
    transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(var(--x3), var(--y3), 0) rotate(var(--r3)) scale(0.85);
  }
}

@keyframes floatLoot {
  0% {
    opacity: 0;
    transform: translate3d(var(--x1), var(--y1), 0) rotate(0deg) scale(0.6);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0.75;
    transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1.05);
  }
}

@keyframes fallDrop {
  0% {
    opacity: 0.95;
    transform: translate3d(var(--x1), -18vh, 0) rotate(0deg) scale(0.75);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(var(--x2), 120vh, 0) rotate(var(--r2)) scale(1.05);
  }
}

@keyframes smokeRise {
  0% {
    opacity: 0.82;
    transform: translate3d(var(--x1), var(--y1), 0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x2), var(--y2), 0) scale(1.6);
  }
}

@keyframes raveFlash {
  0% {
    opacity: 0;
    background:
      repeating-linear-gradient(90deg, rgba(255, 62, 165, 0.18) 0 16px, transparent 16px 34px),
      linear-gradient(135deg, rgba(27, 201, 255, 0.15), rgba(139, 255, 44, 0.12), rgba(255, 232, 58, 0.18));
  }
  15%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 11px, transparent 11px 24px),
      linear-gradient(45deg, rgba(255, 62, 165, 0.1), rgba(27, 201, 255, 0.1));
  }
}

@keyframes raveWord {
  0% {
    opacity: 0;
    transform: rotate(var(--rot)) scale(0.4);
  }
  20% {
    opacity: 1;
    transform: rotate(var(--rot)) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--rot) + 16deg)) translateY(-60px) scale(1.3);
  }
}

@media (max-width: 900px) {
  .chaos-shell {
    padding: 0.75rem 0.75rem 1.5rem;
  }

  .hero {
    padding-top: 4.75rem;
  }

  .mute-toggle {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.65rem 0.85rem;
  }

  .wobble-nav,
  .beat-deck,
  .title-clouds {
    position: static;
    width: 100%;
    max-width: none;
  }

  .beat-deck {
    margin: 0 0 1rem;
    justify-content: center;
    gap: 0.6rem;
  }

  .beat-launch,
  .beat-control,
  .chaos-button,
  .easter-egg {
    min-height: 3rem;
  }

  .beat-volume-wrap {
    width: 100%;
    text-align: center;
  }

  .beat-volume {
    width: min(16rem, 100%);
  }

  .beat-status {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .title-stack {
    padding: 0.5rem 0 1.25rem;
    text-align: center;
  }

  .title-clouds {
    justify-content: center;
  }

  .collage-grid {
    display: grid;
    gap: 1rem;
    min-height: 0;
  }

  .chaos-panel {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .equalizer {
    height: 72px;
  }

  .sticker-stage,
  .sticker-field {
    min-height: 70vh;
  }

  .sticker {
    width: min(var(--size), 40vw);
  }

  .background-collage {
    opacity: 0.44;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 4.25rem;
  }

  .wobble-nav {
    gap: 0.55rem;
  }

  .chaos-button,
  .beat-launch,
  .beat-control {
    width: 100%;
  }

  .beat-deck {
    padding: 0.75rem;
  }

  .title-clouds {
    gap: 0.7rem;
  }

  .easter-egg {
    width: 100%;
    justify-content: center;
    filter: blur(0);
  }

  .speech-cloud {
    display: block;
    margin: 0.55rem 0;
  }

  .marquee-inner {
    gap: 1.25rem;
  }
}