* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-dark: #0a0a1a;
  --bg-purple: #1a0a2e;
  --accent-yellow: #ffd700;
  --accent-orange: #ff6b35;
  --accent-green: #39ff14;
  --accent-pink: #ff69b4;
  --accent-cyan: #00e5ff;
  --skin: #f4c89a;
  --skin-shadow: #d4a87a;
  --hair: #3d2314;
  --neon-glow: 0 0 20px rgba(255, 215, 0, 0.35), 0 0 40px rgba(138, 43, 226, 0.25);
  --dude-scale: 1;
}

html {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: 'Rubik', sans-serif;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(88, 28, 135, 0.45), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(255, 107, 53, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 60% at 0% 80%, rgba(0, 229, 255, 0.08), transparent 50%),
    linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-purple) 50%, #0d1b2a 100%);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: #fff;
}

#stars {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 15% 85%, rgba(255,215,0,0.3), transparent),
    radial-gradient(2px 2px at 85% 15%, rgba(255,107,53,0.3), transparent);
  pointer-events: none;
  z-index: 0;
  animation: star-twinkle 8s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

#neon-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 215, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 20%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 9998;
  opacity: 0.35;
}

/* Fixed Craneworm logos — visible on scroll */
.brand-float {
  position: fixed;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.brand-float img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 3px solid rgba(255, 215, 0, 0.65);
  box-shadow:
    0 0 24px rgba(138, 43, 226, 0.55),
    0 0 48px rgba(255, 215, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.5);
  background: #0a0a1a;
  animation: brand-pulse 3s ease-in-out infinite;
}

.brand-float:hover img {
  transform: scale(1.04);
  border-color: var(--accent-yellow);
  box-shadow:
    0 0 32px rgba(255, 215, 0, 0.5),
    0 0 60px rgba(138, 43, 226, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.55);
}

@keyframes brand-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

.brand-float-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  white-space: nowrap;
}

.brand-float-tr {
  top: 14px;
  right: 14px;
}

.brand-float-tr img {
  width: clamp(140px, 22vw, 240px);
}

.brand-float-bl {
  bottom: 14px;
  left: 14px;
}

.brand-float-bl img {
  width: clamp(120px, 18vw, 200px);
  animation: brand-float-drift 4s ease-in-out infinite;
}

@keyframes brand-float-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Live drug death counter — top-left, pinned to viewport like Craneworm logos */
.drug-death-counter {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid rgba(255, 60, 60, 0.55);
  background: rgba(8, 4, 12, 0.88);
  box-shadow:
    0 0 20px rgba(255, 40, 40, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.drug-death-counter-skull {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.6));
}

.drug-death-counter-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.drug-death-counter-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.05rem, 2.8vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.05;
  color: #ff2222;
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.65),
    0 0 14px rgba(255, 40, 40, 0.75);
}

.drug-death-counter-realdata {
  font-family: 'Bangers', cursive;
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
  color: #ff1111;
  text-transform: lowercase;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.6),
    0 0 12px rgba(255, 30, 30, 0.8);
}

.drug-death-counter-value {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 1px;
  color: #ff5555;
  text-shadow:
    0 0 10px rgba(255, 50, 50, 0.7),
    0 0 24px rgba(255, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s ease, color 0.15s ease;
}

.drug-death-counter-value.tick {
  transform: scale(1.08);
  color: #ff9999;
}

.drug-death-counter-sublabel {
  font-family: 'Rubik', sans-serif;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.2;
  color: rgba(255, 160, 160, 0.65);
  text-transform: lowercase;
}

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  height: auto;
  position: relative;
  z-index: 1;
  padding: 20px clamp(88px, 12vw, 160px) 40px;
}

.screen.active {
  display: flex;
}

#game-screen.active {
  overflow-y: visible;
  justify-content: flex-start;
}

/* Title Screen */
#title-screen {
  justify-content: center;
  gap: 12px;
}

.title-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(26, 10, 46, 0.75), rgba(10, 10, 26, 0.55));
  border: 2px solid rgba(255, 215, 0, 0.35);
  box-shadow: var(--neon-glow), inset 0 0 60px rgba(138, 43, 226, 0.15);
  backdrop-filter: blur(6px);
}

.beerface-poster-hero {
  width: min(380px, 92vw);
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 3px solid rgba(255, 105, 180, 0.55);
  box-shadow:
    0 0 36px rgba(255, 105, 180, 0.35),
    0 0 60px rgba(138, 43, 226, 0.25),
    0 14px 42px rgba(0, 0, 0, 0.5);
  animation: float 3s ease-in-out infinite;
}

.studio-logo {
  width: min(560px, 94vw);
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  border: 4px solid rgba(255, 215, 0, 0.5);
  box-shadow:
    0 0 50px rgba(138, 43, 226, 0.6),
    0 0 80px rgba(255, 215, 0, 0.25),
    0 12px 40px rgba(0, 0, 0, 0.45);
  animation: float 3s ease-in-out infinite;
}

.studio-logo-compact {
  width: min(200px, 50vw);
  margin-top: 4px;
}

.game-title-sr,
.tagline-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.title-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.65rem, 2vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-cyan);
  padding: 6px 16px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.title-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.title-features span {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.game-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(4rem, 12vw, 7rem);
  color: var(--accent-yellow);
  text-shadow:
    4px 4px 0 #1a237e,
    -2px -2px 0 #ff6b35,
    0 0 30px rgba(255, 215, 0, 0.5);
  letter-spacing: 6px;
  animation: wobble 2s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.tagline {
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: var(--accent-pink);
  letter-spacing: 2px;
}

.subtitle {
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.sound-hint {
  color: rgba(255, 215, 0, 0.7);
  font-size: 0.95rem;
  margin-top: 8px;
  animation: pulse-hint 2s ease-in-out infinite;
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.big-btn {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  padding: 16px 48px;
  background: linear-gradient(180deg, var(--accent-orange), #cc4400);
  color: #fff;
  border: 4px solid var(--accent-yellow);
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 0 #992200, 0 8px 20px rgba(0,0,0,0.4);
}

.big-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #992200, 0 12px 30px rgba(255,107,53,0.4);
}

.big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #992200;
}

/* Game Header */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 920px;
  padding: 16px 20px;
  margin-bottom: 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(45, 27, 105, 0.85), rgba(10, 10, 26, 0.9));
  border: 3px solid rgba(255, 215, 0, 0.45);
  box-shadow: var(--neon-glow), 0 12px 32px rgba(0, 0, 0, 0.35);
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

.header-logo {
  width: clamp(160px, 28vw, 280px);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 3px solid rgba(255, 215, 0, 0.55);
  box-shadow:
    0 0 28px rgba(138, 43, 226, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.4);
}

.header-presents {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: var(--accent-pink);
  letter-spacing: 2px;
  padding-left: 4px;
}

.header-title-block {
  text-align: right;
  flex: 1;
}

.header-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--accent-yellow);
  text-shadow:
    3px 3px 0 #1a237e,
    -1px -1px 0 var(--accent-orange),
    0 0 24px rgba(255, 215, 0, 0.4);
  letter-spacing: 5px;
  line-height: 1;
}

.header-tagline {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.header-poster {
  display: none;
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 10px;
  border: 2px solid rgba(255, 105, 180, 0.55);
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.35);
  margin-bottom: 4px;
}

#game-screen:has(#dude.char-beerface) .header-poster {
  display: block;
}

#game-screen:has(#dude.char-beerface) .header-title-block {
  align-items: center;
}

.new-life-btn {
  font-family: 'Bangers', cursive;
  font-size: 1.35rem;
  letter-spacing: 2px;
  padding: 12px 22px;
  border: 3px solid #39ff14;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a4a1a, #0d2a0d);
  color: #39ff14;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.45), 0 6px 0 #052005;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  animation: new-life-pulse 1.2s ease-in-out infinite;
}

.new-life-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(57, 255, 20, 0.7), 0 8px 0 #052005;
}

.new-life-btn.hidden {
  display: none;
}

@keyframes new-life-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* ========== CHARACTER: BEERFACE (original) ========== */
#dude.char-beerface {
  --skin: #edc4a8;
  --skin-shadow: #c89078;
  --hair: #4a2c18;
}

#dude.char-black-beerface {
  --skin: #6b4a35;
  --skin-shadow: #4a3020;
  --hair: #1a0f08;
}

#dude.char-black-beerface .beerface-classic-only {
  display: none !important;
}

#dude.char-beerface .cocoa-butterface-kit,
#dude.char-beerface .cocoa-butterface-face-kit,
#dude.char-beerface .cbf-earring-l,
#dude.char-beerface .cbf-earring-r,
#dude.char-black-beerface .cocoa-butterface-kit,
#dude.char-black-beerface .cocoa-butterface-face-kit,
#dude.char-black-beerface .cbf-earring-l,
#dude.char-black-beerface .cbf-earring-r {
  display: none !important;
}

#dude.char-black-beerface .black-beerface-kit {
  display: block;
}

#dude.char-black-beerface .face {
  z-index: 2;
}

.black-beerface-kit {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  height: 80px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Low wide pick — masculine afro */
.bb-afro {
  position: absolute;
  top: -54px;
  left: 50%;
  transform: translateX(-50%);
  width: 218px;
  height: 88px;
  background: radial-gradient(ellipse 100% 92% at 50% 38%, #2a1810, #1a0f08 58%, #120a06);
  border-radius: 46% 46% 42% 42%;
  box-shadow:
    inset 0 -10px 18px rgba(0, 0, 0, 0.38),
    inset 8px 0 10px rgba(255, 255, 255, 0.03),
    inset -6px 0 10px rgba(0, 0, 0, 0.22),
    0 4px 8px rgba(0, 0, 0, 0.25);
}

.bb-afro::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 188px;
  height: 62px;
  background: radial-gradient(ellipse 95% 90% at 50% 42%, #241610, transparent 72%);
  border-radius: 50%;
  opacity: 0.85;
}

.bb-afro::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 196px;
  height: 22px;
  background: linear-gradient(180deg, #1a0f08, transparent);
  border-radius: 0 0 50% 50%;
  opacity: 0.9;
}

.black-beerface-face-kit {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

#dude.char-black-beerface .black-beerface-face-kit {
  display: block;
}

#dude.char-black-beerface .forehead-bruise,
#dude.char-black-beerface .cheek-scar {
  display: none;
}

/* Teardrop tattoo — under left eye */
.bb-teardrop-tattoo {
  position: absolute;
  top: 120px;
  left: 36px;
  width: 9px;
  height: 13px;
  background: #120808;
  border-radius: 50% 50% 50% 50% / 35% 35% 75% 75%;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(30, 18, 12, 0.6);
  transform: rotate(-10deg);
  z-index: 5;
}

.bb-teardrop-tattoo::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 5px;
  height: 5px;
  background: #0a0606;
  border-radius: 50%;
  opacity: 0.85;
}

/* Goatee */
.bb-goatee {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 38px;
  z-index: 4;
}

.bb-goatee::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 14px;
  background: linear-gradient(180deg, #1a1008, #120a06);
  border-radius: 0 0 40% 40%;
  box-shadow: -14px 2px 0 -2px #1a1008, 14px 2px 0 -2px #1a1008;
}

.bb-goatee::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 20px;
  background: radial-gradient(ellipse 80% 90% at 50% 20%, #1a1008, #0e0806 75%);
  border-radius: 40% 40% 55% 55%;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.35);
}

#dude.char-black-beerface .eye-bag {
  width: 54px;
  height: 18px;
  bottom: -8px;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(12, 8, 6, 0.92) 0%,
    rgba(22, 14, 10, 0.75) 45%,
    rgba(35, 22, 16, 0.4) 70%,
    transparent 88%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

#dude.char-black-beerface .eyebrow {
  height: 9px;
  border-radius: 3px;
}

#dude.char-black-beerface .eyebrow.left {
  transform: rotate(-8deg);
  width: 48px;
}

#dude.char-black-beerface .eyebrow.right {
  transform: rotate(8deg);
  width: 48px;
}

#dude.char-black-beerface .nostril {
  width: 8px;
  height: 6px;
  bottom: 6px;
}

#dude.char-black-beerface .nostril.left {
  left: 6px;
}

#dude.char-black-beerface .nostril.right {
  right: 6px;
}

#dude.char-black-beerface .nostril-hole {
  width: 4px;
  height: 3px;
  bottom: 1px;
}

#dude.char-black-beerface .nose-tip {
  width: 34px;
  height: 24px;
}

#dude.char-black-beerface:not(.idle) .bb-afro {
  animation: bb-afro-bounce 0.38s ease-in-out infinite;
  transform-origin: 50% 85%;
}

#dude.char-black-beerface:is(
  .puking, .cocaine, .coke-bleed, .coke-seizure, .coke-nod,
  .crack-psycho, .crack-celly-sick, .crack-crying, .crack-paranoia,
  .fent-woozy, .coke-stroke, .k-hole, .frozen, .angel-dust-stumble,
  .angel-dust-fucked, .coughing, .giggling
) .bb-afro {
  animation: bb-afro-shake 0.22s ease-in-out infinite;
}

#dude.char-black-beerface.henny-smashed .bb-afro {
  animation: bb-afro-crooked 0.6s ease-out forwards;
}

@keyframes bb-afro-bounce {
  0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
  25% { transform: translateX(-50%) rotate(-2.5deg) scale(1.02); }
  75% { transform: translateX(-50%) rotate(2.5deg) scale(0.98); }
}

@keyframes bb-afro-shake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(calc(-50% - 4px)) rotate(-4deg); }
  40% { transform: translateX(calc(-50% + 5px)) rotate(5deg); }
  60% { transform: translateX(calc(-50% - 3px)) rotate(-3deg); }
  80% { transform: translateX(calc(-50% + 4px)) rotate(4deg); }
}

@keyframes bb-afro-crooked {
  to { transform: translateX(calc(-50% + 10px)) rotate(-16deg); }
}

/* Black Beerface — keep dark skin through all drug/drink states */
#dude.char-black-beerface .face,
#dude.char-black-beerface.puking .face,
#dude.char-black-beerface.angry .face,
#dude.char-black-beerface.henny-smashed .face,
#dude.char-black-beerface.disgusted .face,
#dude.char-black-beerface.dead .face {
  background: var(--skin) !important;
  box-shadow: inset -8px -8px 20px var(--skin-shadow) !important;
}

#dude.char-black-beerface.puking .face {
  background: #5a4838 !important;
  box-shadow: inset -8px -8px 20px #3d2a20 !important;
}

#dude.char-black-beerface.angry .face {
  background: #7a4a38 !important;
  box-shadow: inset -8px -8px 20px #4a3020 !important;
}

#dude.char-black-beerface.henny-smashed .face {
  background: #6b4038 !important;
  box-shadow: inset -8px -8px 20px #4a2820 !important;
}

#dude.char-black-beerface.dead .face {
  background: #4a3530 !important;
  filter: grayscale(0.45) brightness(0.85) !important;
}

#dude.char-black-beerface.mush-tripping .face {
  background: linear-gradient(180deg, #3d4a30, var(--skin) 45%) !important;
}

#dude.char-black-beerface .lips,
#dude.char-black-beerface .mouth .lips,
#dude.char-black-beerface.bong-rip .mouth .lips,
#dude.char-black-beerface.bong-chugging .mouth .lips,
#dude.char-black-beerface.inhaling .mouth .lips,
#dude.char-black-beerface.blunt-rip .mouth .lips,
#dude.char-black-beerface.drinking .mouth .lips,
#dude.char-black-beerface.beer-drink .mouth .lips,
#dude.char-black-beerface.henny-drink .mouth .lips,
#dude.char-black-beerface.puking .mouth .lips,
#dude.char-black-beerface.giggling .mouth .lips,
#dude.char-black-beerface.angry .mouth .lips,
#dude.char-black-beerface.disgusted .mouth .lips,
#dude.char-black-beerface.dead .mouth .lips {
  background: #8b5a48 !important;
  border-color: #5a3828 !important;
}

#dude.char-black-beerface.angry .eyeball {
  background: #3d2820 !important;
  border-color: #8b0000 !important;
}

#dude.char-black-beerface.angry .face {
  animation: angry-pulse-dark 0.3s ease-in-out infinite alternate;
}

@keyframes angry-pulse-dark {
  from { filter: brightness(0.95); }
  to { filter: brightness(1.08) saturate(1.15); }
}

@keyframes dmt-face-warp-dark {
  0%, 100% { filter: hue-rotate(0deg) brightness(0.95); }
  50% { filter: hue-rotate(35deg) brightness(1.02); }
}

#dude.char-black-beerface.crack-psycho .eyeball,
#dude.char-black-beerface.coke-seizure .eyeball {
  background: radial-gradient(circle, #6a5040 25%, #3a2820 100%) !important;
}

/* Whole-body filters that wash out skin — keep him dark */
#dude.char-black-beerface.frozen {
  filter: saturate(0.7) brightness(0.82) !important;
}

#dude.char-black-beerface.k-hole:not(.frozen) {
  filter: saturate(0.55) blur(0.5px) brightness(0.88) !important;
}

#dude.char-black-beerface.crack-celly-sick {
  filter: hue-rotate(18deg) saturate(0.8) brightness(0.86) !important;
}

#dude.char-black-beerface.mush-tripping .eyeball {
  background: radial-gradient(circle, #ccc 25%, #4a6040 100%) !important;
}

#dude.char-black-beerface.angel-dust-fucked .eyeball {
  background: #4a4030 !important;
  border-color: #cc0000 !important;
}

#dude.char-black-beerface.puking .mouth .lips {
  background: #5a7048 !important;
  border-color: #3d5030 !important;
}

#dude.char-black-beerface.coke-stroke .face,
#dude.char-black-beerface.cocaine .face,
#dude.char-black-beerface.coke-bleed .face,
#dude.char-black-beerface.coke-nod .face,
#dude.char-black-beerface.coke-collapsed .face,
#dude.char-black-beerface.fent-woozy .face,
#dude.char-black-beerface.crack-paranoia .face,
#dude.char-black-beerface.crack-crying .face,
#dude.char-black-beerface.crack-psycho .face,
#dude.char-black-beerface.coke-snorting .face,
#dude.char-black-beerface.acid-tripping .face,
#dude.char-black-beerface.acid-dosing .face,
#dude.char-black-beerface.knocked-out .face,
#dude.char-black-beerface.burping .face,
#dude.char-black-beerface.coughing .face,
#dude.char-black-beerface.giggling .face {
  background: var(--skin) !important;
  box-shadow: inset -8px -8px 20px var(--skin-shadow) !important;
}

#dude.char-black-beerface .neck,
#dude.char-black-beerface .ear {
  background: var(--skin-shadow) !important;
}

#dude.char-black-beerface .neck {
  background: var(--skin) !important;
}

#dude.char-black-beerface.dmt-tripping .face {
  animation: dmt-face-warp-dark 2s ease-in-out infinite !important;
}

/* ========== BUTTERFACE ========== */
#dude.char-butterface {
  --skin: #e8b8a0;
  --skin-shadow: #c89078;
  --hair: #d4a85a;
}

#dude.char-butterface .beerface-classic-only,
#dude.char-butterface .black-beerface-kit,
#dude.char-butterface .black-beerface-face-kit,
#dude.char-butterface .cocoa-butterface-kit,
#dude.char-butterface .cocoa-butterface-face-kit,
#dude.char-butterface .cbf-earring-l,
#dude.char-butterface .cbf-earring-r {
  display: none !important;
}

#dude.char-butterface .butterface-kit,
#dude.char-butterface .butterface-face-kit {
  display: block;
}

.butterface-kit {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.bf-hair-back {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 110px;
  background: linear-gradient(180deg, #e8c878 0%, #d4a85a 40%, #c89848 100%);
  border-radius: 50% 50% 30% 30%;
  box-shadow: inset -8px 0 12px rgba(0, 0, 0, 0.12);
}

.bf-hair-back::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 90px;
  background: linear-gradient(180deg, #d4a85a, #c09040);
  border-radius: 0 0 40% 40%;
}

.butterface-face-kit {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.bf-hair-front {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 48px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, #e8c878, #d4a85a 70%, transparent 72%);
  border-radius: 50% 50% 0 0;
  z-index: 3;
}

.bf-clip {
  position: absolute;
  top: -8px;
  right: 28px;
  width: 18px;
  height: 10px;
  background: #ff69b4;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.6);
  z-index: 5;
}

.bf-blush {
  position: absolute;
  top: 108px;
  width: 28px;
  height: 16px;
  background: radial-gradient(ellipse, rgba(255, 120, 140, 0.55), transparent 70%);
  border-radius: 50%;
}

.bf-blush-l { left: 18px; }
.bf-blush-r { right: 18px; }

.bf-liner {
  position: absolute;
  top: 72px;
  width: 46px;
  height: 3px;
  background: #1a1018;
  border-radius: 2px;
}

.bf-liner-l { left: 22px; transform: rotate(-4deg); }
.bf-liner-r { right: 22px; transform: rotate(4deg); }

.bf-lash {
  position: absolute;
  top: 78px;
  width: 44px;
  height: 14px;
  border-top: 3px solid #1a1018;
  border-radius: 50% 50% 0 0;
}

.bf-lash-l { left: 24px; transform: rotate(-6deg); }
.bf-lash-r { right: 24px; transform: rotate(6deg); }

#dude.char-butterface .ear::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border: 3px solid #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

#dude.char-butterface .eyebrow {
  height: 5px;
  background: #c8a060;
  width: 44px;
}

#dude.char-butterface .lips,
#dude.char-butterface .mouth .lips {
  background: linear-gradient(180deg, #ff8ab0, #e85888) !important;
  border-color: #c84878 !important;
  width: 52px;
  height: 20px;
  box-shadow: 0 2px 8px rgba(255, 100, 150, 0.35);
}

#dude.char-butterface .forehead-bruise,
#dude.char-butterface .cheek-scar {
  display: none;
}

#dude.char-butterface .face,
#dude.char-butterface.puking .face,
#dude.char-butterface.angry .face,
#dude.char-butterface.henny-smashed .face,
#dude.char-butterface.disgusted .face,
#dude.char-butterface.dead .face,
#dude.char-butterface.coke-bleed .face,
#dude.char-butterface.cocaine .face,
#dude.char-butterface.acid-tripping .face,
#dude.char-butterface.mush-tripping .face {
  background: var(--skin) !important;
  box-shadow: inset -8px -8px 20px var(--skin-shadow) !important;
}

#dude.char-butterface.mush-tripping .face {
  background: linear-gradient(180deg, #ffd0e8, var(--skin) 45%) !important;
}

#dude.char-butterface.mush-tripping .eyeball {
  background: radial-gradient(circle, #fff 25%, #ffb0d8 100%) !important;
}

#dude.char-butterface:not(.idle) .bf-hair-back,
#dude.char-butterface:not(.idle) .bf-hair-front {
  animation: bf-hair-sway 0.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes bf-hair-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}

#dude.char-butterface:is(.puking, .coke-seizure, .crack-psycho, .giggling, .mush-tripping) .bf-hair-back,
#dude.char-butterface:is(.puking, .coke-seizure, .crack-psycho, .giggling, .mush-tripping) .bf-hair-front {
  animation: bf-hair-shake 0.2s ease-in-out infinite;
}

@keyframes bf-hair-shake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(calc(-50% - 3px)) rotate(-3deg); }
  75% { transform: translateX(calc(-50% + 3px)) rotate(3deg); }
}

.character-pick-btn-butter:hover {
  border-color: #ff69b4;
  box-shadow: 0 0 18px rgba(255, 105, 180, 0.45);
}

.char-preview-butterface {
  background: linear-gradient(180deg, #d4a85a 30%, #e8b8a0 30% 62%);
}

.char-preview-butterface::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 24px;
  background: radial-gradient(ellipse, #e8c878, #d4a85a);
  border-radius: 50% 50% 0 0;
}

.char-preview-butterface::after {
  content: '💄';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
}

#dude.char-butterface .blotter-classic,
#dude.char-butterface .blotter-black { display: none; }
#dude.char-beerface .blotter-butter,
#dude.char-black-beerface .blotter-butter { display: none; }

#dude.char-butterface .blotter-square {
  background: linear-gradient(135deg, #ff69b4, #ffb6c1, #ffd700, #ff1493);
  box-shadow: 0 0 14px rgba(255, 105, 180, 0.85);
}

/* ========== COCOA BUTTERFACE ========== */
#dude.char-cocoa-butterface {
  --skin: #4a3428;
  --skin-shadow: #2e2018;
  --hair: #1a1208;
  width: 310px;
}

#dude.char-cocoa-butterface .beerface-classic-only,
#dude.char-cocoa-butterface .black-beerface-kit,
#dude.char-cocoa-butterface .black-beerface-face-kit,
#dude.char-cocoa-butterface .butterface-kit,
#dude.char-cocoa-butterface .butterface-face-kit {
  display: none !important;
}

#dude.char-cocoa-butterface .cocoa-butterface-kit,
#dude.char-cocoa-butterface .cocoa-butterface-face-kit,
#dude.char-cocoa-butterface .cbf-earring-l,
#dude.char-cocoa-butterface .cbf-earring-r {
  display: block;
}

.cocoa-butterface-kit {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 130px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.cbf-wig {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 228px;
  height: 88px;
  background: linear-gradient(180deg, #2a1810 0%, #1a1008 45%, #120a06 100%);
  border-radius: 48% 48% 32% 32%;
  box-shadow:
    inset -10px 0 14px rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  z-index: 2;
}

.cbf-wig-edge {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 14px;
  background: linear-gradient(180deg, rgba(26, 16, 8, 0.85), transparent);
  border-radius: 0 0 50% 50%;
  z-index: 1;
}

.cocoa-butterface-face-kit {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.cbf-stubble-patches {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 28px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1;
}

.cbf-stub {
  position: absolute;
  width: 3px;
  height: 5px;
  background: #1a1008;
  border-radius: 2px;
  transform: rotate(-18deg);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2);
}

.cbf-stub.s1 { top: 8px; left: 28px; }
.cbf-stub.s2 { top: 4px; left: 52px; transform: rotate(12deg); }
.cbf-stub.s3 { top: 6px; right: 48px; transform: rotate(-8deg); }
.cbf-stub.s4 { top: 10px; right: 24px; transform: rotate(22deg); }

#dude.char-cocoa-butterface:is(
  .leaning, .bong-rip, .inhaling, .blunt-rip, .puking, .angry,
  .giggling, .disgusted, .angel-dust-stumble, .cbf-wig-slip,
  .mush-tripping, .acid-tripping, .coke-snorting
) .cbf-stubble-patches {
  opacity: 1;
}

#dude.char-cocoa-butterface:is(
  .leaning, .bong-rip, .inhaling, .blunt-rip, .puking, .angry,
  .giggling, .angel-dust-stumble, .cbf-wig-slip
) .cbf-wig {
  transform: translateX(calc(-50% + 5px)) rotate(3deg);
}

#dude.char-cocoa-butterface.leaning .cbf-wig,
#dude.char-cocoa-butterface.bong-rip .cbf-wig {
  transform: translateX(calc(-50% - 4px)) rotate(-4deg);
}

.cbf-mascara-lash {
  position: absolute;
  top: 74px;
  width: 52px;
  height: 18px;
  border-top: 5px solid #6b21a8;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 -2px 8px rgba(107, 33, 168, 0.45);
}

.cbf-mascara-lash.lash-l {
  left: 18px;
  transform: rotate(-5deg);
}

.cbf-mascara-lash.lash-r {
  right: 18px;
  transform: rotate(5deg);
}

.cbf-contour {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 80px;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(30, 15, 10, 0.12) 100%);
  border-radius: 50%;
  pointer-events: none;
}

.cbf-earring {
  display: none;
  position: absolute;
  top: 118px;
  width: 16px;
  height: 28px;
  z-index: 7;
  pointer-events: none;
}

.cbf-earring-l { left: -2px; }
.cbf-earring-r { right: -2px; }

.cbf-earring-hook {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 8px;
  border: 2px solid #c0c0c0;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.cbf-diamond-ring {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid #d4af37;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe566, #daa520);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.cbf-diamond-stone {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #fff 0%, #b8e0ff 40%, #88c8ff 100%);
  box-shadow: 0 0 8px rgba(180, 220, 255, 0.9);
}

.cbf-diamond-stone.missing {
  opacity: 0;
}

.cbf-ring-gap {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #2a2018;
  border-radius: 2px;
  opacity: 0.7;
}

.cbf-falling-stone {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg, #fff, #88c8ff);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0.85;
  animation: cbf-stone-dangle 2.5s ease-in-out infinite;
}

@keyframes cbf-stone-dangle {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); opacity: 0.85; }
  50% { transform: translateX(-50%) rotate(45deg) translateY(6px); opacity: 0.5; }
}

#dude.char-cocoa-butterface.cbf-earring-drop .cbf-falling-stone {
  animation: cbf-stone-fall 1.2s ease-in forwards;
}

@keyframes cbf-stone-fall {
  0% { transform: translateX(-50%) rotate(45deg) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) rotate(90deg) translateY(48px); opacity: 0; }
}

#dude.char-cocoa-butterface .head {
  width: 248px;
}

#dude.char-cocoa-butterface .neck {
  width: 118px;
  height: 68px;
  border-radius: 0 0 28px 28px;
}

#dude.char-cocoa-butterface .ear {
  background: var(--skin-shadow) !important;
}

#dude.char-cocoa-butterface .face,
#dude.char-cocoa-butterface.puking .face,
#dude.char-cocoa-butterface.angry .face,
#dude.char-cocoa-butterface.dead .face,
#dude.char-cocoa-butterface.cocaine .face,
#dude.char-cocoa-butterface.mush-tripping .face,
#dude.char-cocoa-butterface.acid-tripping .face {
  background: var(--skin) !important;
  box-shadow: inset -10px -12px 24px var(--skin-shadow) !important;
  border-radius: 46% 46% 40% 40%;
}

#dude.char-cocoa-butterface .cheek {
  width: 38px;
  height: 26px;
  top: 102px;
}

#dude.char-cocoa-butterface .lips,
#dude.char-cocoa-butterface .mouth .lips {
  background: linear-gradient(180deg, #c85888, #a04068) !important;
  border-color: #883858 !important;
  width: 58px;
  height: 22px;
}

#dude.char-cocoa-butterface .eyebrow {
  height: 6px;
  background: #1a1008;
  width: 46px;
}

#dude.char-cocoa-butterface .forehead-bruise,
#dude.char-cocoa-butterface .cheek-scar {
  display: none;
}

#dude.char-cocoa-butterface .blotter-classic,
#dude.char-cocoa-butterface .blotter-black,
#dude.char-cocoa-butterface .blotter-butter { display: none; }
#dude.char-beerface .blotter-cocoa,
#dude.char-black-beerface .blotter-cocoa,
#dude.char-butterface .blotter-cocoa { display: none; }

#dude.char-cocoa-butterface .blotter-square {
  background: linear-gradient(135deg, #6b21a8, #4a148c, #ffd700, #2a1810);
  box-shadow: 0 0 14px rgba(107, 33, 168, 0.85);
}

#cocoa-bubble {
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
}

.cocoa-text {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.35rem;
  color: #d8b4fe;
  text-shadow: 0 0 10px #6b21a8, 2px 2px 0 #000;
  letter-spacing: 1px;
}

.cocoa-text.c2 {
  font-size: 1.15rem;
  color: #ffd700;
  margin-top: 4px;
}

#cocoa-bubble.active .cocoa-text.c2 {
  animation: cocoa-text-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes cocoa-text-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.character-pick-btn-cocoa:hover {
  border-color: #a855f7;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}

.char-preview-cocoa-butterface {
  background: linear-gradient(180deg, #1a1008 28%, #4a3428 28% 60%);
}

.char-preview-cocoa-butterface::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 26px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
}

.char-preview-cocoa-butterface::after {
  content: '💎';
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 0.75rem;
  opacity: 0.55;
}

.new-life-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}

.new-life-modal.hidden {
  display: none;
}

.new-life-modal-box {
  background: linear-gradient(180deg, #2d1b69, #1a0a2e);
  border: 4px solid var(--accent-yellow);
  border-radius: 22px;
  padding: 32px 28px;
  max-width: 760px;
  width: 94%;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.35);
  animation: modal-pop 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.new-life-title {
  font-family: 'Bangers', cursive;
  font-size: 2.4rem;
  color: var(--accent-yellow);
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.new-life-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
}

.character-pick-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.character-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  min-width: 148px;
  max-width: 175px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.character-pick-btn:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--accent-yellow);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
}

.character-pick-btn-black:hover {
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.45);
}

.char-preview {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.45);
  position: relative;
  overflow: hidden;
}

.char-preview-beerface {
  background: linear-gradient(180deg, #edc4a8 38%, #0c2340 38%);
  box-shadow: inset 0 0 12px rgba(255, 105, 180, 0.25);
}

.char-preview-beerface::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  border: 2px solid rgba(255, 105, 180, 0.45);
}

.char-preview-beerface::after {
  content: 'B';
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: #ff69b4;
  text-shadow: 0 0 6px rgba(255, 105, 180, 0.8);
}

.char-preview-black-beerface {
  background: linear-gradient(180deg, #1a0f08 26%, #6b4a35 26% 58%);
}

.char-preview-black-beerface::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 28px;
  background: radial-gradient(ellipse 100% 90% at 50% 42%, #2a1810, #1a0f08 72%);
  border-radius: 46% 46% 40% 40%;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}

.char-preview-black-beerface::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 12px;
  width: 4px;
  height: 6px;
  background: #120808;
  border-radius: 50% 50% 50% 50% / 35% 35% 75% 75%;
  box-shadow: 0 38px 0 0 #1a0f08;
}

.character-pick-label {
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: #fff;
}

.character-pick-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
  max-width: 150px;
}

.game-area.dude-is-dead .action-panel-wrap {
  opacity: 0.45;
  pointer-events: none;
}

.feature-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 920px;
  margin-bottom: 4px;
}

.feature-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.15), rgba(57, 255, 20, 0.05));
  border: 1px solid rgba(57, 255, 20, 0.45);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
}

.feature-badge:nth-child(2) {
  border-color: rgba(255, 215, 0, 0.45);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.04));
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.12);
}

.feature-badge:nth-child(3) {
  border-color: rgba(215, 138, 255, 0.45);
  background: linear-gradient(180deg, rgba(215, 138, 255, 0.12), rgba(215, 138, 255, 0.04));
  box-shadow: 0 0 12px rgba(215, 138, 255, 0.12);
}

.feature-badge:nth-child(4) {
  border-color: rgba(255, 107, 53, 0.45);
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.12), rgba(255, 107, 53, 0.04));
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.12);
}

/* Game Area — character stage stays pinned while poison panel scrolls */
.game-area {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  flex: 1;
  width: 100%;
  max-width: 1180px;
}

.dude-stage {
  position: sticky;
  top: 72px;
  align-self: flex-start;
  flex-shrink: 0;
  z-index: 12;
  width: 100%;
  max-width: 460px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(26, 10, 46, 0.92), rgba(10, 10, 26, 0.88));
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow:
    0 0 40px rgba(138, 43, 226, 0.25),
    inset 0 0 50px rgba(0, 0, 0, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.stage-frame {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 20;
}

.stage-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--accent-yellow);
  border-style: solid;
  opacity: 0.75;
}

.stage-corner.tl { top: 0; left: 0; border-width: 3px 0 0 3px; }
.stage-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; }
.stage-corner.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.stage-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; }

#dude-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* === STAGE ANCHOR MAP (420×380 design space) === */
  /* Mouth slot — bong / bubbler */
  --anchor-mouth-left: 65%;
  --anchor-mouth-bottom: 2px;
  --anchor-mouth-shift-x: -8%;
  --anchor-mouth-shift-y: 14px;
  --anchor-mouth-rotate: -46deg;
  --anchor-mouth-origin-x: 78%;
  --anchor-mouth-origin-y: 92%;

  --anchor-bubbler-left: 63%;
  --anchor-bubbler-bottom: 2px;
  --anchor-bubbler-shift-x: -8%;
  --anchor-bubbler-shift-y: 16px;
  --anchor-bubbler-rotate: -44deg;
  --anchor-bubbler-origin-x: 72%;
  --anchor-bubbler-origin-y: 88%;

  /* Blunt / lip */
  --anchor-blunt-left: 45%;
  --anchor-blunt-bottom: 72px;
  --anchor-blunt-shift-x: -56%;
  --anchor-blunt-shift-y: 8px;
  --anchor-blunt-rotate: -14deg;
  --anchor-blunt-origin-x: 92%;
  --anchor-blunt-origin-y: 55%;

  /* DMT pipe */
  --anchor-dmt-left: 60%;
  --anchor-dmt-bottom: 84px;
  --anchor-dmt-shift-x: -38%;
  --anchor-dmt-shift-y: 4px;
  --anchor-dmt-rotate: -12deg;
  --anchor-dmt-origin-x: 92%;
  --anchor-dmt-origin-y: 42%;

  /* Drink tilt */
  --anchor-drink-left: 58%;
  --anchor-drink-bottom: 34px;
  --anchor-drink-shift-x: -10%;
  --anchor-drink-shift-y: 12px;
  --anchor-drink-rotate: -62deg;
  --anchor-drink-origin-x: 20%;
  --anchor-drink-origin-y: 8%;

  /* Hennessy */
  --anchor-henny-left: 56%;
  --anchor-henny-bottom: 18px;
  --anchor-henny-shift-x: -30%;
  --anchor-henny-shift-y: 10px;
  --anchor-henny-rotate: -74deg;
  --anchor-henny-origin-x: 52%;
  --anchor-henny-origin-y: 4%;

  /* Coke tray */
  --anchor-coke-left: 50%;
  --anchor-coke-bottom: 8px;

  /* JS spawn points (px from stage top-left) */
  --fx-smoke-x: 120;
  --fx-smoke-y: 100;
  --fx-blunt-smoke-x: 148;
  --fx-blunt-smoke-y: 168;
  --fx-blunt-ring-x: 175;
  --fx-blunt-ring-y: 175;
  --fx-blunt-exhale-x: 142;
  --fx-blunt-exhale-y: 162;
  --fx-crack-smoke-x: 108;
  --fx-crack-smoke-y: 96;
}

/* ========== PROPS ========== */
#prop-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.prop {
  position: absolute;
  left: 50%;
  bottom: -180px;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 20;
}

.prop.phase-raise {
  animation: prop-raise 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.prop.phase-use {
  bottom: 155px;
  opacity: 1;
  transform: translateX(-30%) rotate(-18deg);
  transition: bottom 0.3s, transform 0.3s;
}

#prop-bong.phase-use,
#prop-bong.tilt-mouth.phase-use {
  left: var(--anchor-mouth-left);
  bottom: var(--anchor-mouth-bottom);
  transform: translateX(var(--anchor-mouth-shift-x)) translateY(var(--anchor-mouth-shift-y)) rotate(var(--anchor-mouth-rotate));
  transform-origin: var(--anchor-mouth-origin-x) var(--anchor-mouth-origin-y);
}

#prop-bong.phase-raise,
#prop-bong.tilt-mouth.phase-raise {
  animation: prop-raise-bong 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-bong {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(15deg);
    transform-origin: var(--anchor-mouth-origin-x) var(--anchor-mouth-origin-y);
  }
  70% {
    left: var(--anchor-mouth-left);
    bottom: 6px;
    opacity: 1;
    transform: translateX(var(--anchor-mouth-shift-x)) translateY(var(--anchor-mouth-shift-y)) rotate(-48deg) scale(1.05);
    transform-origin: var(--anchor-mouth-origin-x) var(--anchor-mouth-origin-y);
  }
  100% {
    left: var(--anchor-mouth-left);
    bottom: var(--anchor-mouth-bottom);
    opacity: 1;
    transform: translateX(var(--anchor-mouth-shift-x)) translateY(var(--anchor-mouth-shift-y)) rotate(var(--anchor-mouth-rotate)) scale(1);
    transform-origin: var(--anchor-mouth-origin-x) var(--anchor-mouth-origin-y);
  }
}

#prop-bubbler.phase-use,
#prop-bubbler.tilt-mouth.phase-use {
  left: var(--anchor-bubbler-left);
  bottom: var(--anchor-bubbler-bottom);
  transform: translateX(var(--anchor-bubbler-shift-x)) translateY(var(--anchor-bubbler-shift-y)) rotate(var(--anchor-bubbler-rotate));
  transform-origin: var(--anchor-bubbler-origin-x) var(--anchor-bubbler-origin-y);
}

#prop-bubbler.phase-raise,
#prop-bubbler.tilt-mouth.phase-raise {
  animation: prop-raise-bubbler 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-bubbler {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(15deg);
    transform-origin: var(--anchor-bubbler-origin-x) var(--anchor-bubbler-origin-y);
  }
  70% {
    left: var(--anchor-bubbler-left);
    bottom: 6px;
    opacity: 1;
    transform: translateX(var(--anchor-bubbler-shift-x)) translateY(18px) rotate(-46deg) scale(1.05);
    transform-origin: var(--anchor-bubbler-origin-x) var(--anchor-bubbler-origin-y);
  }
  100% {
    left: var(--anchor-bubbler-left);
    bottom: var(--anchor-bubbler-bottom);
    opacity: 1;
    transform: translateX(var(--anchor-bubbler-shift-x)) translateY(var(--anchor-bubbler-shift-y)) rotate(var(--anchor-bubbler-rotate)) scale(1);
    transform-origin: var(--anchor-bubbler-origin-x) var(--anchor-bubbler-origin-y);
  }
}

#prop-bubbler.phase-use .bubbler-mouthpiece {
  box-shadow: 0 0 10px rgba(100, 200, 255, 0.7);
  animation: mouthpiece-glow 0.5s ease-in-out infinite alternate;
}

#prop-blunt.phase-use,
#prop-blunt.tilt-mouth.phase-use {
  left: var(--anchor-blunt-left);
  bottom: var(--anchor-blunt-bottom);
  transform: translateX(var(--anchor-blunt-shift-x)) translateY(var(--anchor-blunt-shift-y)) rotate(var(--anchor-blunt-rotate));
  transform-origin: var(--anchor-blunt-origin-x) var(--anchor-blunt-origin-y);
}

#prop-blunt.phase-raise,
#prop-blunt.tilt-mouth.phase-raise {
  animation: prop-raise-blunt 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-blunt {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(10deg);
    transform-origin: var(--anchor-blunt-origin-x) var(--anchor-blunt-origin-y);
  }
  70% {
    left: var(--anchor-blunt-left);
    bottom: calc(var(--anchor-blunt-bottom) + 6px);
    opacity: 1;
    transform: translateX(var(--anchor-blunt-shift-x)) translateY(6px) rotate(-16deg) scale(1.05);
    transform-origin: var(--anchor-blunt-origin-x) var(--anchor-blunt-origin-y);
  }
  100% {
    left: var(--anchor-blunt-left);
    bottom: var(--anchor-blunt-bottom);
    opacity: 1;
    transform: translateX(var(--anchor-blunt-shift-x)) translateY(var(--anchor-blunt-shift-y)) rotate(var(--anchor-blunt-rotate)) scale(1);
    transform-origin: var(--anchor-blunt-origin-x) var(--anchor-blunt-origin-y);
  }
}

#prop-blunt.phase-use .prop-smoke-blunt {
  top: -6px;
  left: -18px;
  transform: none;
  width: 100px;
  height: 90px;
}

#prop-blunt.phase-use .prop-smoke-blunt::before,
#prop-blunt.phase-use .prop-smoke-blunt::after {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle, rgba(210,210,210,0.95) 0%, rgba(160,160,160,0.5) 45%, transparent 72%);
}

#prop-blunt.phase-use .prop-smoke-blunt::after {
  left: 28px;
  top: 8px;
  width: 36px;
  height: 36px;
  animation-delay: 0.25s;
}

#prop-blunt.phase-use .prop-smoke-blunt.active::before,
#prop-blunt.phase-use .prop-smoke-blunt.active::after {
  animation: blunt-tip-smoke 1.4s ease-out infinite;
}

@keyframes blunt-tip-smoke {
  0% { transform: translateY(0) scale(0.5); opacity: 0.95; }
  100% { transform: translateY(-55px) scale(1.6); opacity: 0; }
}

#prop-bong.phase-use .bong-mouthpiece {
  box-shadow: 0 0 12px rgba(123, 104, 238, 0.8);
  animation: mouthpiece-glow 0.5s ease-in-out infinite alternate;
}

@keyframes mouthpiece-glow {
  from { box-shadow: 0 0 8px rgba(123, 104, 238, 0.6); }
  to { box-shadow: 0 0 16px rgba(180, 150, 255, 1); }
}

.prop.phase-lower {
  animation: prop-lower 0.7s ease-in forwards;
}

.prop.tilt-drink.phase-use {
  transform: translateX(-40%) rotate(-55deg);
  bottom: 170px;
}

.prop.tilt-mouth.phase-use {
  transform: translateX(-25%) rotate(-30deg);
  bottom: 148px;
}

@keyframes prop-raise {
  0% {
    bottom: -180px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(10deg);
  }
  70% {
    bottom: 165px;
    opacity: 1;
    transform: translateX(-32%) rotate(-22deg) scale(1.05);
  }
  100% {
    bottom: 155px;
    opacity: 1;
    transform: translateX(-30%) rotate(-18deg) scale(1);
  }
}

@keyframes prop-lower {
  0% {
    opacity: 1;
  }
  100% {
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.3) rotate(30deg);
  }
}

.prop-hand {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 38px;
  background: var(--skin);
  border-radius: 40% 40% 50% 50%;
  border: 3px solid var(--skin-shadow);
  z-index: -1;
  box-shadow: inset -4px -4px 8px var(--skin-shadow);
}

.prop-hand::before {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 55px;
  background: linear-gradient(90deg, var(--skin-shadow), var(--skin), var(--skin-shadow));
  border-radius: 14px;
  z-index: -2;
}

.prop-hand.pinch {
  width: 38px;
  height: 32px;
}

.prop-hand.wrap {
  width: 46px;
  height: 50px;
  border-radius: 30% 30% 45% 45%;
}

/* Prop hands + fent arm live in #prop-layer / #dude-arm (siblings of #dude) — mirror active character skin */
#dude-container:has(#dude.char-beerface) {
  --skin: #edc4a8;
  --skin-shadow: #c89078;
}

#dude-container:has(#dude.char-butterface) {
  --skin: #e8b8a0;
  --skin-shadow: #c89078;
}

#dude-container:has(#dude.char-black-beerface) {
  --skin: #6b4a35;
  --skin-shadow: #4a3020;
}

#dude-container:has(#dude.char-cocoa-butterface) {
  --skin: #4a3428;
  --skin-shadow: #2e2018;
}

#dude-container:has(#dude.char-black-beerface) .prop-hand,
#dude-container:has(#dude.char-black-beerface) .arm-skin,
#dude-container:has(#dude.char-black-beerface) .arm-hand,
#dude-container:has(#dude.char-cocoa-butterface) .prop-hand,
#dude-container:has(#dude.char-cocoa-butterface) .arm-skin,
#dude-container:has(#dude.char-cocoa-butterface) .arm-hand {
  background: var(--skin);
  border-color: var(--skin-shadow);
  box-shadow: inset -4px -4px 8px var(--skin-shadow);
}

#dude-container:has(#dude.char-black-beerface) .prop-hand::before,
#dude-container:has(#dude.char-cocoa-butterface) .prop-hand::before {
  background: linear-gradient(90deg, var(--skin-shadow), var(--skin), var(--skin-shadow));
}

#dude-container:has(#dude.char-black-beerface) .arm-skin,
#dude-container:has(#dude.char-cocoa-butterface) .arm-skin {
  box-shadow: inset -4px -2px 8px var(--skin-shadow);
}

/* Classic straight-tube bong */
.bong-classic {
  position: relative;
  width: 90px;
  height: 175px;
}

.bong-mouthpiece {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 14px;
  background: linear-gradient(180deg, #7b68ee, #6a5acd);
  border: 3px solid #483d8b;
  border-radius: 8px 8px 2px 2px;
  z-index: 4;
}

.bong-tube {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 72px;
  background: linear-gradient(90deg, rgba(138,100,220,0.5), rgba(180,150,255,0.75), rgba(138,100,220,0.5));
  border: 3px solid rgba(120,80,200,0.7);
  border-radius: 4px;
  z-index: 3;
}

.bong-ice-pinch {
  position: absolute;
  top: 28px;
  left: -4px;
  width: calc(100% + 8px);
  height: 8px;
  background: rgba(200,180,255,0.4);
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.3);
}

.bong-beaker {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 88px;
  background: linear-gradient(90deg, rgba(130,90,210,0.45), rgba(170,130,255,0.65), rgba(130,90,210,0.45));
  border: 4px solid rgba(110,70,190,0.75);
  border-radius: 6px 6px 28px 28px;
  overflow: hidden;
  z-index: 2;
}

.bong-downstem {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 10px;
  height: 52px;
  background: linear-gradient(90deg, rgba(200,220,255,0.5), rgba(240,250,255,0.7));
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  transform: rotate(12deg);
}

.bong-side-arm {
  position: absolute;
  top: 92px;
  right: -8px;
  width: 42px;
  height: 14px;
  background: linear-gradient(90deg, rgba(200,220,255,0.5), rgba(230,240,255,0.7));
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  transform: rotate(-8deg);
  z-index: 5;
}

.bong-side-bowl {
  position: absolute;
  right: -22px;
  top: -10px;
  width: 32px;
  height: 22px;
  background: linear-gradient(180deg, #999, #555);
  border-radius: 50% 50% 35% 35%;
  border: 3px solid #444;
}

.bong-bud {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 11px;
  background: #2d6a2e;
  border-radius: 40%;
}

.bong-cherry {
  position: absolute;
  top: -7px;
  right: 0;
  width: 9px;
  height: 9px;
  background: #ff4500;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px #ff6600;
}

.prop.phase-use .bong-cherry,
.prop.phase-raise .bong-cherry {
  opacity: 1;
  animation: cherry-glow 0.5s ease-in-out infinite alternate;
}

@keyframes cherry-glow {
  from { box-shadow: 0 0 6px #ff6600; transform: scale(1); }
  to { box-shadow: 0 0 14px #ff3300; transform: scale(1.2); }
}

.bong-carb {
  position: absolute;
  top: 100px;
  left: 8px;
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  border: 2px solid #666;
  z-index: 6;
}

.bong-water {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(80,180,255,0.55), rgba(30,120,200,0.75));
  overflow: hidden;
}

.bong-bubble {
  position: absolute;
  background: rgba(255,255,255,0.75);
  border-radius: 50%;
  opacity: 0;
}

.bong-bubble.bb1 { width: 6px; height: 6px; bottom: 8%; left: 22%; }
.bong-bubble.bb2 { width: 9px; height: 9px; bottom: 5%; left: 45%; }
.bong-bubble.bb3 { width: 5px; height: 5px; bottom: 12%; left: 60%; }
.bong-bubble.bb4 { width: 7px; height: 7px; bottom: 6%; left: 35%; }
.bong-bubble.bb5 { width: 10px; height: 10px; bottom: 4%; left: 52%; }
.bong-bubble.bb6 { width: 4px; height: 4px; bottom: 10%; left: 68%; }

.bong-stem-bubbles {
  position: absolute;
  bottom: 28%;
  left: 22px;
  width: 20px;
  height: 40px;
  pointer-events: none;
}

.stem-bubble {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  opacity: 0;
}

.stem-bubble.sb1 { bottom: 0; left: 4px; }
.stem-bubble.sb2 { bottom: 0; left: 10px; }
.stem-bubble.sb3 { bottom: 0; left: 7px; }

#prop-bong.bong-chugging .bong-water {
  animation: bong-water-chug 0.35s ease-in-out infinite;
}

#prop-bong.bong-chugging .bong-water-line {
  animation: bong-water-line-slosh 0.35s ease-in-out infinite;
}

#prop-bong.bong-chugging .bong-bubble {
  opacity: 1;
  animation: bong-bubble-rise 0.55s ease-out infinite;
}

#prop-bong.bong-chugging .bong-bubble.bb1 { animation-delay: 0s; }
#prop-bong.bong-chugging .bong-bubble.bb2 { animation-delay: 0.08s; }
#prop-bong.bong-chugging .bong-bubble.bb3 { animation-delay: 0.16s; }
#prop-bong.bong-chugging .bong-bubble.bb4 { animation-delay: 0.24s; }
#prop-bong.bong-chugging .bong-bubble.bb5 { animation-delay: 0.12s; }
#prop-bong.bong-chugging .bong-bubble.bb6 { animation-delay: 0.2s; }

#prop-bong.bong-chugging .stem-bubble {
  opacity: 1;
  animation: stem-bubble-rise 0.45s ease-out infinite;
}

#prop-bong.bong-chugging .stem-bubble.sb1 { animation-delay: 0s; }
#prop-bong.bong-chugging .stem-bubble.sb2 { animation-delay: 0.1s; }
#prop-bong.bong-chugging .stem-bubble.sb3 { animation-delay: 0.2s; }

#prop-bong.bong-chugging .bong-milk {
  opacity: 1;
  animation: bong-milk-fill 2.4s ease-in forwards;
}

#prop-bong.bong-chugging {
  animation: bong-chug-shake 0.25s ease-in-out infinite;
}

@keyframes bong-water-chug {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.08) translateY(-3px); }
}

@keyframes bong-water-line-slosh {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg) translateY(-2px); }
}

@keyframes bong-bubble-rise {
  0% { transform: translateY(0) scale(0.4); opacity: 0.9; }
  100% { transform: translateY(-55px) scale(1.1); opacity: 0; }
}

@keyframes stem-bubble-rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0.95; }
  100% { transform: translateY(-70px) scale(0.9); opacity: 0; }
}

.bong-milk {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 0;
  background: linear-gradient(180deg, rgba(240,240,250,0.9), rgba(200,200,220,0.75));
  border-radius: 4px;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

@keyframes bong-milk-fill {
  0% { height: 0; opacity: 0; }
  20% { height: 20px; opacity: 0.7; }
  60% { height: 58px; opacity: 0.85; }
  100% { height: 72px; opacity: 0.9; }
}

@keyframes bong-chug-shake {
  0%, 100% {
    transform: translateX(var(--anchor-mouth-shift-x)) translateY(var(--anchor-mouth-shift-y)) rotate(var(--anchor-mouth-rotate));
  }
  50% {
    transform: translateX(var(--anchor-mouth-shift-x)) translateY(calc(var(--anchor-mouth-shift-y) - 2px)) rotate(-44deg);
  }
}

#prop-bong.bong-chugging.phase-use,
#prop-bong.bong-chugging.tilt-mouth.phase-use {
  animation: bong-chug-shake 0.25s ease-in-out infinite;
}

.bong-water-line {
  position: absolute;
  bottom: 50%;
  left: 8%;
  right: 8%;
  height: 3px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  transform-origin: center;
}

.bong-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.75rem;
  color: var(--accent-green);
  letter-spacing: 2px;
  white-space: nowrap;
}

/* DMT pipe — mouthpiece at lips */
#prop-dmt.phase-use,
#prop-dmt.tilt-mouth.phase-use {
  left: var(--anchor-dmt-left);
  bottom: var(--anchor-dmt-bottom);
  transform: translateX(var(--anchor-dmt-shift-x)) translateY(var(--anchor-dmt-shift-y)) rotate(var(--anchor-dmt-rotate));
  transform-origin: var(--anchor-dmt-origin-x) var(--anchor-dmt-origin-y);
}

#prop-dmt.phase-raise,
#prop-dmt.tilt-mouth.phase-raise {
  animation: prop-raise-dmt 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-dmt {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(10deg);
    transform-origin: var(--anchor-dmt-origin-x) var(--anchor-dmt-origin-y);
  }
  70% {
    left: var(--anchor-dmt-left);
    bottom: calc(var(--anchor-dmt-bottom) + 6px);
    opacity: 1;
    transform: translateX(var(--anchor-dmt-shift-x)) translateY(2px) rotate(-14deg) scale(1.05);
    transform-origin: var(--anchor-dmt-origin-x) var(--anchor-dmt-origin-y);
  }
  100% {
    left: var(--anchor-dmt-left);
    bottom: var(--anchor-dmt-bottom);
    opacity: 1;
    transform: translateX(var(--anchor-dmt-shift-x)) translateY(var(--anchor-dmt-shift-y)) rotate(var(--anchor-dmt-rotate)) scale(1);
    transform-origin: var(--anchor-dmt-origin-x) var(--anchor-dmt-origin-y);
  }
}

#prop-dmt.phase-use .dmt-mouth {
  box-shadow: 0 0 10px rgba(180, 100, 255, 0.7);
  animation: mouthpiece-glow 0.5s ease-in-out infinite alternate;
}

.dmt-pipe {
  position: relative;
  width: 80px;
  height: 50px;
}

.dmt-bowl {
  position: absolute;
  left: 0;
  top: 8px;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, #444, #222);
  border-radius: 50%;
  border: 3px solid #666;
}

.dmt-crystal {
  position: absolute;
  width: 8px;
  height: 14px;
  background: linear-gradient(180deg, #fff, #e0b0ff, #9b59b6);
  border-radius: 2px;
  top: 8px;
  left: 10px;
  transform: rotate(-15deg);
  box-shadow: 0 0 8px #d78aff;
}

.dmt-crystal.c2 { left: 16px; transform: rotate(10deg); height: 12px; }
.dmt-crystal.c3 { left: 22px; transform: rotate(-5deg); height: 10px; background: linear-gradient(180deg, #fff, #b0e0ff); }

.dmt-stem {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 35px;
  height: 8px;
  background: linear-gradient(90deg, #555, #888);
  border-radius: 4px;
}

.dmt-mouth {
  position: absolute;
  right: 0;
  top: 16px;
  width: 18px;
  height: 16px;
  background: #777;
  border-radius: 0 8px 8px 0;
  border: 2px solid #555;
}

.dmt-glow {
  position: absolute;
  inset: -15px;
  background: radial-gradient(circle, rgba(180,100,255,0.4), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: none;
}

.prop.phase-use .dmt-glow,
.dude.dmt-tripping ~ #prop-layer .dmt-glow {
  opacity: 1;
  animation: dmt-pulse 1s ease-in-out infinite alternate;
}

@keyframes dmt-pulse {
  from { transform: scale(0.9); opacity: 0.5; }
  to { transform: scale(1.2); opacity: 1; }
}

.dmt-label { color: #d78aff; }

/* Cocaine mirror tray */
#prop-cocaine.phase-use {
  left: var(--anchor-coke-left);
  bottom: var(--anchor-coke-bottom);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 80%;
}

#prop-cocaine.phase-raise {
  animation: prop-raise-coke 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-coke {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.5) rotate(8deg);
  }
  70% {
    bottom: 14px;
    opacity: 1;
    transform: translateX(-50%) scale(1.04) rotate(-1deg);
  }
  100% {
    left: 50%;
    bottom: 8px;
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
}

#prop-cocaine.snort-mode .coke-straw {
  display: none;
}

.coke-mirror {
  position: relative;
  width: 110px;
  height: 82px;
}

.mirror-tray {
  padding: 5px 8px 8px;
  background: linear-gradient(180deg, #555, #333 60%, #222);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.mirror-surface {
  width: 94px;
  height: 62px;
  background: linear-gradient(135deg, #c0c8d8, #e8ecf4, #a8b0c0);
  border: 2px solid #8899aa;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.6);
}

.coke-line {
  position: absolute;
  height: 3px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
  transition: opacity 0.2s, transform 0.25s;
}

.coke-line.l1 { width: 52px; top: 10px; left: 12px; transform: rotate(-4deg); }
.coke-line.l2 { width: 48px; top: 20px; left: 16px; transform: rotate(3deg); }
.coke-line.l3 { width: 44px; top: 30px; left: 14px; transform: rotate(-2deg); }
.coke-line.l4 { width: 40px; top: 40px; left: 18px; transform: rotate(4deg); }

.coke-line.snorting {
  animation: coke-line-snort 0.52s ease-in forwards;
  z-index: 2;
}

.coke-line.snorting::before {
  content: '';
  position: absolute;
  left: 0;
  top: -6px;
  width: 100%;
  height: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  border-radius: 50%;
  animation: line-powder-rise 0.52s ease-out forwards;
  pointer-events: none;
}

.coke-line.snorting::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #fff, rgba(255,255,255,0.3));
  border-radius: 50%;
  animation: line-spark-suck 0.52s ease-in forwards;
}

@keyframes coke-line-snort {
  0% { opacity: 1; filter: brightness(1); box-shadow: 0 0 4px rgba(255,255,255,0.8); }
  40% { opacity: 0.85; filter: brightness(1.6); box-shadow: 0 0 12px rgba(255,255,255,1); transform: scaleX(0.65); }
  100% { opacity: 0; transform: scaleX(0.05); filter: brightness(2); }
}

@keyframes line-powder-rise {
  0% { opacity: 0; transform: translateY(0) scaleY(0.3); }
  30% { opacity: 1; transform: translateY(-12px) scaleY(1); }
  100% { opacity: 0; transform: translateY(-48px) scaleY(0.6); }
}

@keyframes line-spark-suck {
  0% { opacity: 0; transform: translate(0, -50%) scale(0.5); }
  50% { opacity: 1; transform: translate(8px, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(20px, -80%) scale(0.2); }
}

.coke-line.consumed {
  opacity: 0;
  transform: scaleX(0);
  pointer-events: none;
}

#prop-cocaine.snort-line-1 .mirror-surface,
#prop-cocaine.snort-line-2 .mirror-surface,
#prop-cocaine.snort-line-3 .mirror-surface,
#prop-cocaine.snort-line-4 .mirror-surface {
  box-shadow: inset 0 0 16px rgba(255,255,255,0.75);
}

.coke-dust {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  opacity: 0.6;
}

.coke-straw {
  position: absolute;
  bottom: 0;
  right: 5px;
  width: 40px;
  height: 6px;
  background: linear-gradient(90deg, #ff6b9d, #ff4081);
  border-radius: 3px;
  transform: rotate(-20deg);
}

.coke-label { color: #fff; text-shadow: 0 0 6px #fff; }

/* Pink cocaine variant */
.pink-coke .coke-line,
.pink-coke .coke-dust {
  background: rgba(255, 105, 180, 0.95);
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.9);
}

.pink-coke .mirror-surface {
  background: linear-gradient(135deg, #ffc0e0, #ffe0f0, #ffb6d9);
  border-color: #ff69b4;
}

.pink-coke .coke-label {
  color: #ff69b4;
  text-shadow: 0 0 8px #ff1493;
}

.pink-coke .coke-straw {
  background: linear-gradient(90deg, #ff69b4, #ff1493);
}

/* Black Beerface — crack cook & smoke */
.crack-cook-scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 240px;
  height: 210px;
  z-index: 45;
  pointer-events: none;
}

.crack-cook-scene.active {
  animation: crack-scene-rise 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes crack-scene-rise {
  0% { bottom: -180px; opacity: 0; }
  100% { bottom: 4px; opacity: 1; }
}

/* Street ziplock — no flat white square */
.crack-source-bag {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 48px;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.35s;
}

.crack-cook-scene.phase-setup .crack-source-bag {
  opacity: 1;
  animation: crack-bag-tilt-pour 1.1s ease-in-out forwards;
}

.crack-cook-scene.phase-cooking .crack-source-bag,
.crack-cook-scene.phase-rock-ready .crack-source-bag,
.crack-cook-scene.phase-pipe .crack-source-bag,
.crack-cook-scene.phase-smoking .crack-source-bag {
  opacity: 0;
  pointer-events: none;
}

@keyframes crack-bag-tilt-pour {
  0%, 18% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  45%, 72% { transform: translateX(-42%) rotate(-38deg) translateY(6px); }
  100% { transform: translateX(-50%) rotate(-8deg) translateY(0); }
}

.crack-bag-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, rgba(40, 38, 36, 0.92), rgba(18, 16, 14, 0.88));
  border: 2px solid rgba(90, 85, 78, 0.7);
  border-radius: 5px 5px 9px 9px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.crack-bag-seal {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 9px;
  background: repeating-linear-gradient(90deg, #6a6560 0 2px, #3a3835 2px 4px);
  border-radius: 2px;
}

.crack-bag-powder {
  position: absolute;
  bottom: 5px;
  left: 7px;
  right: 7px;
  height: 16px;
  background:
    radial-gradient(circle at 20% 40%, rgba(245, 240, 230, 0.95) 0 1px, transparent 1px),
    radial-gradient(circle at 55% 60%, rgba(235, 228, 215, 0.9) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 35%, rgba(240, 235, 225, 0.92) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(220, 210, 195, 0.75), rgba(180, 170, 155, 0.55));
  background-size: 8px 8px, 7px 7px, 9px 9px, 100% 100%;
  border-radius: 3px;
}

.crack-powder-pour {
  position: absolute;
  top: 38px;
  left: 50%;
  width: 20px;
  height: 50px;
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
}

.crack-cook-scene.phase-setup .crack-powder-pour {
  opacity: 1;
}

.pour-bit {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(240, 235, 220, 0.95);
  border-radius: 50%;
  animation: powder-pour-fall 0.55s ease-in infinite;
}

.pour-bit.pb1 { left: 4px; animation-delay: 0.35s; }
.pour-bit.pb2 { left: 9px; animation-delay: 0.45s; }
.pour-bit.pb3 { left: 6px; animation-delay: 0.55s; }
.pour-bit.pb4 { left: 12px; animation-delay: 0.65s; }

@keyframes powder-pour-fall {
  0% { top: 0; opacity: 0; transform: scale(0.5); }
  15% { opacity: 1; }
  100% { top: 42px; opacity: 0; transform: scale(0.8); }
}

.crack-bag-tag {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffd700;
  text-shadow: 0 0 4px #000;
  white-space: nowrap;
}

.crack-cook-scene.variant-nigga .crack-bag-body {
  background: linear-gradient(160deg, #2a2a2a, #0e0e0e);
  border-color: #444;
}
.crack-cook-scene.variant-nigga .crack-bag-tag::after { content: 'FROM THAT NIGGA'; }

.crack-cook-scene.variant-babymama .crack-bag-body {
  background: linear-gradient(160deg, #c71585, #8b0e55);
  border-color: #ffb6d9;
}
.crack-cook-scene.variant-babymama .crack-bag-tag::after { content: 'BABY MOMMA\'S GIRL'; }

.crack-cook-scene.variant-celly .crack-bag-body {
  background: linear-gradient(160deg, #4a6741, #1e2a1a);
  border-color: #6b8e5a;
}
.crack-cook-scene.variant-celly .crack-bag-tag::after { content: 'FROM MY CELLY'; }

.crack-cook-scene.variant-crazywhite .crack-bag-body {
  background: repeating-linear-gradient(45deg, #e8e8e8 0 5px, #cc2222 5px 10px);
  border-color: #ffcc00;
}
.crack-cook-scene.variant-crazywhite .crack-bag-tag::after { content: 'CRAZY WHITE BOY'; }

.crack-cook-table {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 130px;
  transition: opacity 0.5s, transform 0.5s;
}

.cook-surface {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, #3d3028, #2a2018 55%, #1a1410);
  border-radius: 6px 6px 4px 4px;
  border: 2px solid #1a1410;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.cook-surface::after {
  content: '';
  position: absolute;
  inset: 4px 8px auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  border-radius: 2px;
}

/* Spoon tilted — bowl over the flame */
.crack-spoon {
  position: absolute;
  left: 28px;
  bottom: 38px;
  width: 130px;
  height: 40px;
  transform: rotate(-14deg);
  transform-origin: 30% 80%;
  z-index: 4;
}

.crack-cook-scene.phase-cooking .crack-spoon {
  animation: spoon-cook-tremble 0.22s ease-in-out infinite;
}

@keyframes spoon-cook-tremble {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50% { transform: rotate(-12deg) translateY(-1px); }
}

.spoon-bowl {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 34px;
  background: radial-gradient(ellipse at 50% 28%, #ececec, #a8a8a8 58%, #606060);
  border-radius: 50% 50% 46% 46%;
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.38),
    0 4px 8px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.spoon-handle {
  position: absolute;
  right: 0;
  top: 16px;
  width: 78px;
  height: 9px;
  background: linear-gradient(180deg, #d8d8d8, #9a9a9a 55%, #707070);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.spoon-handle::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 1px;
  width: 8px;
  height: 7px;
  background: #888;
  border-radius: 0 3px 3px 0;
}

.spoon-powder {
  position: absolute;
  inset: 7px 9px 11px;
  background:
    radial-gradient(circle at 30% 35%, rgba(245, 240, 230, 0.95) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 65% 55%, rgba(235, 228, 215, 0.9) 0 1.5px, transparent 1.5px),
    rgba(210, 200, 185, 0.65);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s, transform 0.5s;
}

.crack-cook-scene.phase-setup .spoon-powder,
.crack-cook-scene.phase-cooking .spoon-powder {
  opacity: 1;
  transform: scale(1);
}

.crack-cook-scene.phase-rock-ready .spoon-powder,
.crack-cook-scene.phase-pipe .spoon-powder,
.crack-cook-scene.phase-smoking .spoon-powder {
  opacity: 0;
  transform: scale(0.2);
}

.spoon-liquid {
  position: absolute;
  inset: 9px 11px 13px;
  background: radial-gradient(ellipse at 50% 40%, #fff4c8, #e8b848 55%, #c87818);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}

.crack-cook-scene.phase-cooking .spoon-liquid {
  opacity: 1;
  transform: scale(1);
  animation: spoon-liquid-boil 1.2s ease-in-out infinite;
}

.crack-cook-scene.phase-rock-ready .spoon-liquid {
  opacity: 0;
  transform: scale(0);
}

@keyframes spoon-liquid-boil {
  0%, 100% { transform: scale(1); filter: brightness(1) hue-rotate(0deg); }
  35% { transform: scale(1.06) translateY(-1px); filter: brightness(1.25) hue-rotate(8deg); }
  70% { transform: scale(0.97); filter: brightness(1.1) hue-rotate(-4deg); }
}

.spoon-heat-glow {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 22px;
  background: radial-gradient(ellipse, rgba(255, 140, 40, 0.75), rgba(255, 80, 0, 0.25) 55%, transparent 75%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
}

.crack-cook-scene.phase-cooking .spoon-heat-glow {
  opacity: 1;
  animation: spoon-heat-pulse 0.18s ease-in-out infinite alternate;
}

@keyframes spoon-heat-pulse {
  from { transform: translateX(-50%) scale(0.9); opacity: 0.75; }
  to { transform: translateX(-50%) scale(1.12); opacity: 1; }
}

.spoon-bubbles {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.crack-cook-scene.phase-cooking .spoon-bubbles {
  opacity: 1;
}

.spoon-bubbles span {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(255, 245, 200, 0.85);
  border-radius: 50%;
  animation: cook-bubble-pop 0.7s ease-out infinite;
}

.spoon-bubbles .sb1 { left: 14px; top: 11px; animation-delay: 0s; }
.spoon-bubbles .sb2 { left: 24px; top: 14px; animation-delay: 0.15s; }
.spoon-bubbles .sb3 { left: 18px; top: 7px; animation-delay: 0.3s; }
.spoon-bubbles .sb4 { left: 10px; top: 17px; animation-delay: 0.42s; }
.spoon-bubbles .sb5 { left: 28px; top: 9px; animation-delay: 0.55s; }

@keyframes cook-bubble-pop {
  0% { transform: scale(0); opacity: 0; }
  35% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.1) translateY(-14px); opacity: 0; }
}

.crack-rock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 11px;
  margin: -5px 0 0 -7px;
  background: linear-gradient(135deg, #fff0c0, #d4a030, #8b6010);
  border-radius: 3px 6px 4px 2px;
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.85);
}

.crack-cook-scene.phase-rock-ready .crack-rock,
.crack-cook-scene.phase-pipe .crack-rock {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: crack-rock-pulse 0.55s ease-in-out infinite alternate;
}

.crack-cook-scene.phase-smoking .crack-rock {
  opacity: 0;
  transform: scale(0);
}

@keyframes crack-rock-pulse {
  from { box-shadow: 0 0 6px rgba(255, 200, 60, 0.6); filter: brightness(1); }
  to { box-shadow: 0 0 16px rgba(255, 230, 100, 1); filter: brightness(1.15); }
}

/* Lighter sits LOW under spoon bowl */
.crack-lighter {
  position: absolute;
  left: 28px;
  bottom: 14px;
  width: 32px;
  height: 58px;
  z-index: 3;
  transform: rotate(-6deg);
  opacity: 0;
}

.crack-cook-scene.phase-cooking .crack-lighter {
  opacity: 1;
  animation: lighter-slide-under-spoon 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes lighter-slide-under-spoon {
  0% { transform: translate(8px, 28px) rotate(-6deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(-6deg); opacity: 1; }
}

.lighter-shell {
  position: relative;
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #9a0000 0%, #e82020 35%, #cc1010 65%, #7a0000 100%);
  border-radius: 4px 4px 5px 5px;
  box-shadow:
    inset 2px 0 4px rgba(255, 255, 255, 0.15),
    inset -2px 0 4px rgba(0, 0, 0, 0.25),
    0 5px 10px rgba(0, 0, 0, 0.45);
}

.lighter-metal-cap {
  position: absolute;
  top: -5px;
  left: 3px;
  right: 3px;
  height: 8px;
  background: linear-gradient(180deg, #d0d0d0, #888);
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.lighter-label {
  position: absolute;
  top: 10px;
  left: 4px;
  right: 4px;
  height: 14px;
  background: linear-gradient(180deg, #fff8e0, #f0d878);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.lighter-label::after {
  content: 'FLAME';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #cc1010;
}

.lighter-window {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 10px;
  height: 14px;
  background: linear-gradient(180deg, rgba(200, 230, 255, 0.5), rgba(120, 160, 200, 0.35));
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

.lighter-nozzle {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  background: linear-gradient(180deg, #aaa, #666);
  border-radius: 2px 2px 0 0;
}

.lighter-wheel {
  position: absolute;
  top: 12px;
  right: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#888 0 12deg, #bbb 12deg 24deg);
  border: 1px solid #555;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.crack-cook-scene.phase-cooking .lighter-wheel {
  animation: lighter-wheel-spark 0.35s linear infinite;
}

@keyframes lighter-wheel-spark {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}

.lighter-flame {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 48px;
  opacity: 0;
}

.crack-cook-scene.phase-cooking .lighter-flame {
  opacity: 1;
  animation: flame-ignite 0.35s ease-out forwards;
}

@keyframes flame-ignite {
  0% { transform: translateX(-50%) scaleY(0.2); opacity: 0; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}

.flame-glow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 28px;
  background: radial-gradient(ellipse, rgba(255, 150, 50, 0.65), transparent 72%);
  animation: flame-glow-pulse 0.16s ease-in-out infinite;
}

.flame-outer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 38px;
  background: linear-gradient(180deg, rgba(255, 235, 80, 0.85), rgba(255, 100, 20, 0.45), transparent);
  border-radius: 50% 50% 42% 42%;
  animation: flame-flicker 0.11s ease-in-out infinite alternate-reverse;
}

.flame-core {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 30px;
  background: linear-gradient(180deg, #fffef0 0%, #ffe838 22%, #ff9800 58%, #ff4500 100%);
  border-radius: 50% 50% 38% 38%;
  animation: flame-flicker 0.09s ease-in-out infinite alternate;
}

.flame-tip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: linear-gradient(180deg, rgba(180, 220, 255, 0.7), transparent);
  border-radius: 50%;
  animation: flame-tip-dance 0.14s ease-in-out infinite alternate;
}

@keyframes flame-tip-dance {
  from { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  to { transform: translateX(-50%) translateY(-3px); opacity: 1; }
}

@keyframes flame-flicker {
  from { transform: translateX(-50%) scaleY(1) scaleX(1); }
  to { transform: translateX(-50%) scaleY(1.14) scaleX(0.88); }
}

@keyframes flame-glow-pulse {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.cook-fumes {
  position: absolute;
  left: 48px;
  bottom: 64px;
  width: 70px;
  height: 50px;
  opacity: 0;
  z-index: 2;
}

.crack-cook-scene.phase-cooking .cook-fumes {
  opacity: 1;
}

.cook-fumes .fume {
  position: absolute;
  background: rgba(160, 155, 145, 0.55);
  border-radius: 50%;
  filter: blur(3px);
  animation: cook-fume-rise 1.2s ease-out infinite;
}

.cook-fumes .f1 { width: 12px; height: 12px; left: 8px; animation-delay: 0s; }
.cook-fumes .f2 { width: 16px; height: 16px; left: 22px; animation-delay: 0.22s; }
.cook-fumes .f3 { width: 11px; height: 11px; left: 38px; animation-delay: 0.44s; }
.cook-fumes .f4 { width: 14px; height: 14px; left: 14px; animation-delay: 0.6s; }
.cook-fumes .f5 { width: 10px; height: 10px; left: 48px; animation-delay: 0.78s; }

@keyframes cook-fume-rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  25% { opacity: 0.85; }
  100% { transform: translateY(-58px) translateX(6px) scale(1.5); opacity: 0; }
}

.crack-pipe-stage {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(calc(-50% - 52px)) scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s, transform 0.45s;
}

.crack-cook-scene.phase-pipe .crack-pipe-stage {
  opacity: 1;
  animation: pipe-rise-to-mouth 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.crack-cook-scene.phase-smoking .crack-pipe-stage {
  opacity: 1;
  transform: translateX(calc(-50% - 56px)) scale(1.08) translateY(6px);
}

@keyframes pipe-rise-to-mouth {
  0% {
    transform: translateX(calc(-50% - 52px)) scale(0.7) translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(calc(-50% - 52px)) scale(1) translateY(0);
    opacity: 1;
  }
}

.crack-cook-scene.phase-pipe .crack-cook-table,
.crack-cook-scene.phase-smoking .crack-cook-table {
  opacity: 0.2;
  transform: translateX(-50%) scale(0.8) translateY(12px);
}

.crack-pipe {
  position: relative;
  width: 100px;
  height: 56px;
  transform: rotate(-38deg);
}

.pipe-stem {
  position: absolute;
  right: 0;
  top: 20px;
  width: 64px;
  height: 11px;
  background: linear-gradient(180deg, #b0b0b0, #666 45%, #3a3a3a);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.pipe-stem::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 2px;
  width: 8px;
  height: 7px;
  background: #555;
  border-radius: 0 4px 4px 0;
}

.pipe-bowl {
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 38% 32%, #ccc, #666 55%, #333);
  border-radius: 50%;
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.5);
  overflow: visible;
}

.pipe-rock {
  position: absolute;
  inset: 9px;
  background: linear-gradient(135deg, #fff0c0, #a07820);
  border-radius: 4px;
  opacity: 0;
  transform: scale(0);
}

.crack-cook-scene.phase-pipe .pipe-rock,
.crack-cook-scene.phase-smoking .pipe-rock {
  opacity: 1;
  transform: scale(1);
  animation: pipe-rock-settle 0.5s ease-out forwards;
}

@keyframes pipe-rock-settle {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.pipe-cherry {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 20, 0.95), rgba(255, 40, 0, 0.4) 55%, transparent 75%);
  opacity: 0;
}

.pipe-ember-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 100, 0, 0.5), transparent 70%);
  opacity: 0;
}

.crack-cook-scene.phase-smoking .pipe-cherry,
.crack-cook-scene.phase-smoking .pipe-ember-glow {
  opacity: 1;
}

.crack-cook-scene.phase-smoking .pipe-cherry {
  animation: pipe-cherry-glow 0.12s ease-in-out infinite alternate;
}

.crack-cook-scene.phase-smoking .pipe-ember-glow {
  animation: pipe-ember-pulse 0.2s ease-in-out infinite;
}

@keyframes pipe-cherry-glow {
  from { transform: scale(0.88); filter: brightness(0.9); }
  to { transform: scale(1.12); filter: brightness(1.2); }
}

@keyframes pipe-ember-pulse {
  0%, 100% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

.pipe-lighter-spark {
  position: absolute;
  left: 2px;
  top: -18px;
  width: 20px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
}

.pipe-lighter-spark::before,
.pipe-lighter-spark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 40% 40%;
}

.pipe-lighter-spark::before {
  width: 14px;
  height: 20px;
  background: linear-gradient(180deg, rgba(255, 230, 80, 0.9), rgba(255, 80, 0, 0.3));
}

.pipe-lighter-spark::after {
  width: 6px;
  height: 14px;
  background: linear-gradient(180deg, #fff, #ff9800);
}

.crack-cook-scene.phase-smoking .pipe-lighter-spark {
  opacity: 1;
  animation: pipe-spark-flash 0.45s ease-out forwards;
}

@keyframes pipe-spark-flash {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.8) translateY(-8px); }
}

.pipe-carb-hole {
  position: absolute;
  right: 20px;
  top: 22px;
  width: 5px;
  height: 5px;
  background: #1a1a1a;
  border-radius: 50%;
  border: 1px solid #444;
}

.crack-pipe-smoke {
  position: absolute;
  left: -30px;
  top: -55px;
  width: 130px;
  height: 110px;
}

.crack-pipe-smoke:not(.hidden) {
  display: block;
}

.crack-pipe-smoke span {
  position: absolute;
  background: rgba(210, 210, 205, 0.8);
  border-radius: 50%;
  filter: blur(3px);
  animation: crack-smoke-wisp 1.4s ease-out infinite;
}

.crack-pipe-smoke .cps1 { width: 20px; height: 20px; left: 12px; bottom: 0; animation-delay: 0s; }
.crack-pipe-smoke .cps2 { width: 26px; height: 26px; left: 32px; bottom: 6px; animation-delay: 0.08s; }
.crack-pipe-smoke .cps3 { width: 18px; height: 18px; left: 54px; bottom: 2px; animation-delay: 0.16s; }
.crack-pipe-smoke .cps4 { width: 28px; height: 28px; left: 22px; bottom: 22px; animation-delay: 0.22s; }
.crack-pipe-smoke .cps5 { width: 22px; height: 22px; left: 46px; bottom: 28px; animation-delay: 0.3s; }
.crack-pipe-smoke .cps6 { width: 16px; height: 16px; left: 64px; bottom: 18px; animation-delay: 0.38s; }
.crack-pipe-smoke .cps7 { width: 24px; height: 24px; left: 8px; bottom: 38px; animation-delay: 0.12s; }
.crack-pipe-smoke .cps8 { width: 30px; height: 30px; left: 38px; bottom: 44px; animation-delay: 0.24s; }
.crack-pipe-smoke .cps9 { width: 18px; height: 18px; left: 58px; bottom: 50px; animation-delay: 0.36s; }
.crack-pipe-smoke .cps10 { width: 14px; height: 14px; left: 72px; bottom: 32px; animation-delay: 0.44s; }

.crack-cook-scene.phase-smoking .crack-pipe-smoke span {
  animation-duration: 1.1s;
}

@keyframes crack-smoke-wisp {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  18% { opacity: 0.95; }
  100% { transform: translateY(-85px) translateX(24px) scale(1.8); opacity: 0; }
}

/* Crack smoking dude pose */
.dude.crack-smoking .head {
  animation: crack-head-to-pipe 0.6s ease-out forwards;
}

@keyframes crack-head-to-pipe {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(14deg) translateY(14px) translateX(-2px); }
}

.dude.crack-smoking.inhaling .head {
  animation: crack-head-inhale 0.8s ease-in-out infinite;
}

@keyframes crack-head-inhale {
  0%, 100% { transform: rotate(14deg) translateY(14px) translateX(-2px); }
  50% { transform: rotate(17deg) translateY(18px) translateX(-4px); }
}

.dude.crack-smoking .eyelid { height: 20%; }
.dude.crack-smoking.inhaling .nostril-hole {
  box-shadow: 0 0 8px rgba(200,200,200,0.8);
}

/* Crack aftermath states */
.dude.crack-paranoia {
  animation: crack-paranoia-look 0.35s ease-in-out infinite;
}

@keyframes crack-paranoia-look {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-1deg); }
  75% { transform: translateX(6px) rotate(1deg); }
}

.dude.crack-paranoia .eyeball { border-color: #ff0000; }
.dude.crack-paranoia .pupil {
  animation: pupil-dart 0.25s ease-in-out infinite alternate;
}

@keyframes pupil-dart {
  from { transform: translate(-50%, -50%) translateX(-4px); }
  to { transform: translate(-50%, -50%) translateX(6px); }
}

.dude.crack-crying .eyelid { height: 45%; }
.dude.crack-crying .cheek { background: rgba(180, 60, 60, 0.35); }
.dude.crack-crying .mouth .lips {
  border-radius: 50% 50% 60% 60%;
  height: 14px;
  transform: scaleY(1.2);
}

.dude.crack-celly-sick {
  filter: hue-rotate(80deg) saturate(0.7);
  animation: celly-shake 0.12s ease-in-out infinite;
}

@keyframes celly-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.dude.crack-psycho {
  animation: crack-psycho-jitter 0.06s ease-in-out infinite;
}

@keyframes crack-psycho-jitter {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-3deg) scale(1.02); }
  75% { transform: rotate(3deg) scale(0.98); }
}

.dude.crack-psycho .eyeball { background: #fff; }
.dude.crack-psycho .pupil { opacity: 0; transform: scale(0.3); }
.dude.crack-psycho .eyelid { height: 5%; }

/* Crack FX overlays */
.crack-police-lights {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

.crack-police-lights.active .cop-flash {
  animation: cop-flash-pulse 0.5s ease-in-out infinite;
}

.cop-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.cop-red {
  background: linear-gradient(90deg, rgba(255,0,0,0.35), transparent 50%);
}

.cop-blue {
  background: linear-gradient(270deg, rgba(0,80,255,0.35), transparent 50%);
  animation-delay: 0.25s !important;
}

@keyframes cop-flash-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.85; }
}

.crack-cell-bars {
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  padding: 0 8px;
}

.crack-cell-bars.active {
  animation: cell-bars-drop 0.6s ease-out forwards;
}

@keyframes cell-bars-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.cell-bar {
  width: 14px;
  background: linear-gradient(90deg, #333, #666, #333);
  box-shadow: 2px 0 8px rgba(0,0,0,0.6), inset 0 0 4px rgba(255,255,255,0.1);
  border-radius: 2px;
}

.cell-glow {
  position: absolute;
  inset: 0;
  background: rgba(40,80,40,0.25);
  pointer-events: none;
}

.crack-tears {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.crack-tears.active .tear {
  animation: tear-fall 1.2s ease-in infinite;
}

.tear {
  position: absolute;
  width: 8px;
  height: 14px;
  background: linear-gradient(180deg, rgba(100,180,255,0.9), rgba(50,120,200,0.6));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  top: 95px;
}

.tear.t1 { left: 108px; animation-delay: 0s; }
.tear.t2 { left: 168px; animation-delay: 0.3s; }
.tear.t3 { left: 118px; animation-delay: 0.6s; }
.tear.t4 { left: 158px; animation-delay: 0.15s; }
.tear.t5 { left: 138px; animation-delay: 0.45s; }
.tear.t6 { left: 148px; animation-delay: 0.75s; }

@keyframes tear-fall {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(80px) scale(0.8); }
}

.crack-psycho-flash {
  position: absolute;
  inset: 0;
  z-index: 58;
  pointer-events: none;
}

.crack-psycho-flash.active {
  animation: psycho-bg-flash 0.15s ease-in-out infinite;
}

@keyframes psycho-bg-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(255,255,0,0.15); }
}

.psycho-bolt {
  position: absolute;
  font-size: 28px;
  opacity: 0;
  animation: psycho-bolt-pop 0.4s ease-out infinite;
}

.crack-psycho-flash.active .psycho-bolt { opacity: 1; }

.psycho-bolt.pb1 { top: 60px; left: 40px; animation-delay: 0s; }
.psycho-bolt.pb2 { top: 100px; right: 50px; animation-delay: 0.15s; }
.psycho-bolt.pb3 { top: 140px; left: 50%; animation-delay: 0.3s; }

@keyframes psycho-bolt-pop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  40% { transform: scale(1.3) rotate(15deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(-10deg); opacity: 0; }
}

/* Fentanyl syringe */
.fent-prop {
  width: 90px;
}

.fent-syringe {
  position: relative;
  width: 34px;
  margin: 0 auto;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.45));
}

.syringe-plunger {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  z-index: 3;
  transition: top 0.45s ease-in;
}

.plunger-knob {
  width: 18px;
  height: 12px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ddd, #888);
  border: 2px solid #555;
  border-radius: 3px 3px 1px 1px;
}

.plunger-rod {
  width: 6px;
  height: 22px;
  margin: 0 auto;
  background: linear-gradient(90deg, #777, #bbb, #777);
  border: 1px solid #555;
}

.fent-syringe.pushing .syringe-plunger {
  top: 10px;
}

.syringe-barrel {
  position: relative;
  width: 30px;
  height: 82px;
  background: linear-gradient(90deg, rgba(180,210,240,0.55), rgba(245,252,255,0.9), rgba(180,210,240,0.55));
  border: 3px solid rgba(90,110,150,0.9);
  border-radius: 5px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 2;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.5);
}

.syringe-graduations {
  position: absolute;
  inset: 8px 4px 8px auto;
  width: 6px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 7px,
    rgba(80,100,140,0.5) 7px,
    rgba(80,100,140,0.5) 9px
  );
  pointer-events: none;
}

.syringe-liquid {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  height: 75%;
  background: linear-gradient(180deg, rgba(255,60,60,0.35), rgba(180,20,20,0.85));
  border-radius: 2px;
  transition: height 0.5s ease-in;
}

.fent-syringe.pushing .syringe-liquid {
  height: 12%;
}

.syringe-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: 'Bangers', cursive;
  font-size: 0.6rem;
  color: #cc0000;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
}

.syringe-hub {
  width: 22px;
  height: 10px;
  background: linear-gradient(180deg, #ccc, #888);
  border: 2px solid #666;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.syringe-needle {
  position: relative;
  width: 8px;
  height: 54px;
  margin: 0 auto;
  transition: height 0.25s ease-in;
}

.needle-shaft {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: calc(100% - 10px);
  background: linear-gradient(90deg, #888, #e8e8e8 45%, #aaa 55%, #777);
  border-radius: 1px;
  box-shadow: 1px 0 1px rgba(0,0,0,0.2);
}

.needle-bevel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 2px solid transparent;
  border-top: 14px solid #b0b0b0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

.needle-bevel::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -3px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 1px solid transparent;
  border-top: 10px solid #d8d8d8;
}

.needle-blood {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 0;
  background: linear-gradient(180deg, #aa0000, #660000);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: height 0.2s ease-in 0.1s, opacity 0.15s;
}

#prop-fentanyl.fent-jab .needle-blood {
  height: 38px;
  opacity: 1;
}

.fent-label { color: #ff4444; }

/* Dude arm for injection */
.dude-arm {
  position: absolute;
  bottom: 130px;
  left: 20px;
  width: 110px;
  height: 36px;
  z-index: 8;
  transform: rotate(-8deg);
  opacity: 0;
  pointer-events: none;
}

.dude-arm.active {
  opacity: 1;
  animation: arm-show 0.5s ease-out forwards;
}

.dude-arm.fent-stab {
  animation: arm-flinch 0.35s ease-out forwards;
}

@keyframes arm-show {
  0% { opacity: 0; transform: rotate(-8deg) translateX(-30px); }
  100% { opacity: 1; transform: rotate(-8deg) translateX(0); }
}

@keyframes arm-flinch {
  0%, 100% { transform: rotate(-8deg) translateX(0); }
  40% { transform: rotate(-6deg) translateX(4px) translateY(2px); }
}

.arm-skin {
  position: absolute;
  inset: 0;
  background: var(--skin);
  border-radius: 18px;
  border: 3px solid var(--skin-shadow);
  box-shadow: inset -4px -2px 8px var(--skin-shadow);
  overflow: hidden;
}

.arm-vein {
  position: absolute;
  top: 42%;
  left: 18%;
  width: 55%;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(70,110,160,0.55) 15%, rgba(90,130,180,0.7) 50%, rgba(70,110,160,0.45) 85%, transparent);
  border-radius: 4px;
  transform: rotate(-2deg);
}

.arm-track-mark {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 14px;
  height: 3px;
  background: rgba(120,60,60,0.35);
  border-radius: 2px;
  transform: translateY(-50%);
}

.arm-hand {
  position: absolute;
  right: -18px;
  top: 4px;
  width: 28px;
  height: 28px;
  background: var(--skin);
  border-radius: 50%;
  border: 3px solid var(--skin-shadow);
}

.arm-prick {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  opacity: 0;
  pointer-events: none;
}

.prick-hole {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #1a0505 0%, #440000 40%, transparent 70%);
  border-radius: 50%;
  transform: scale(0);
}

.arm-prick.active .prick-hole {
  animation: prick-hole-pop 0.25s ease-out forwards;
}

@keyframes prick-hole-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.prick-blood {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #cc0000 0%, #880000 50%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
}

.arm-prick.active .prick-blood {
  animation: prick-splash 0.4s ease-out 0.1s forwards;
}

@keyframes prick-splash {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.85; }
}

.prick-drop {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 5px;
  height: 0;
  background: linear-gradient(180deg, #aa0000, #660000);
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
  opacity: 0;
}

.arm-prick.active .prick-drop {
  animation: prick-drip 1.2s ease-in 0.3s forwards;
}

@keyframes prick-drip {
  0% { height: 0; opacity: 0; }
  30% { height: 14px; opacity: 1; }
  100% { height: 22px; opacity: 0.9; }
}

/* Fent needle animations — vertical stab into arm */
#prop-fentanyl.phase-raise {
  animation: fent-raise 1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  transform-origin: 50% 100%;
}

#prop-fentanyl.phase-use {
  left: 58px;
  bottom: 172px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100%;
  opacity: 1;
}

#prop-fentanyl.fent-jab {
  animation: fent-jab 0.4s cubic-bezier(0.6, 0, 0.9, 0.3) forwards;
}

#prop-fentanyl.fent-jab .syringe-needle {
  height: 72px;
}

@keyframes fent-raise {
  0% {
    left: 70%;
    bottom: -120px;
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) scale(0.55);
    transform-origin: 50% 100%;
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1.05);
  }
  100% {
    left: 58px;
    bottom: 172px;
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
    transform-origin: 50% 100%;
  }
}

@keyframes fent-jab {
  0% {
    transform: translateX(-50%) rotate(0deg) translateY(0);
  }
  55% {
    transform: translateX(-50%) rotate(0deg) translateY(32px);
  }
  75% {
    transform: translateX(-50%) rotate(0deg) translateY(26px);
  }
  100% {
    transform: translateX(-50%) rotate(0deg) translateY(28px);
  }
}

.dude.fent-woozy {
  animation: woozy-sway 1.5s ease-in-out infinite;
}

.dude.fent-woozy .eyelid { height: 70%; }
.dude.fent-woozy .pupil { opacity: 0.5; }

@keyframes woozy-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}

/* Bubbler — round handheld piece */
.bubbler {
  position: relative;
  width: 55px;
  height: 100px;
}

.bubbler-mouthpiece {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 28px;
  background: linear-gradient(90deg, #aaa, #ddd, #aaa);
  border-radius: 6px;
  border: 2px solid #888;
}

.bubbler-neck {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 20px;
  background: rgba(200,230,255,0.5);
  border: 2px solid rgba(255,255,255,0.4);
}

.bubbler-chamber {
  position: relative;
  margin-top: 14px;
  width: 55px;
  height: 65px;
  background: linear-gradient(90deg, rgba(200,230,255,0.35), rgba(240,250,255,0.55), rgba(200,230,255,0.35));
  border: 4px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  overflow: hidden;
}

.bubbler-water {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(100,200,255,0.4), rgba(50,150,200,0.65));
}

.bubble {
  position: absolute;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  opacity: 0;
}

.prop.phase-use .bubble,
.prop.phase-raise .bubble {
  opacity: 1;
}

.bubble.b1 { width: 8px; height: 8px; bottom: 20%; left: 30%; animation: bubble-up 1.2s ease-in infinite; }
.bubble.b2 { width: 6px; height: 6px; bottom: 15%; left: 55%; animation: bubble-up 1s ease-in 0.3s infinite; }
.bubble.b3 { width: 10px; height: 10px; bottom: 25%; left: 42%; animation: bubble-up 1.4s ease-in 0.6s infinite; }
.bubble.b4 { width: 5px; height: 5px; bottom: 18%; left: 65%; animation: bubble-up 0.9s ease-in 0.2s infinite; }
.bubble.b5 { width: 7px; height: 7px; bottom: 22%; left: 48%; animation: bubble-up 1.1s ease-in 0.15s infinite; }
.bubble.b6 { width: 9px; height: 9px; bottom: 12%; left: 38%; animation: bubble-up 0.85s ease-in 0.45s infinite; }
.bubble.b7 { width: 4px; height: 4px; bottom: 28%; left: 58%; animation: bubble-up 0.7s ease-in 0.55s infinite; }
.bubble.b8 { width: 11px; height: 11px; bottom: 16%; left: 22%; animation: bubble-up 1.3s ease-in 0.7s infinite; }

#prop-bubbler.bubbler-chugging .bubbler-water {
  animation: bubbler-water-chug 0.3s ease-in-out infinite;
}

#prop-bubbler.bubbler-chugging .bubble {
  opacity: 1;
  animation: bubble-up-frenzy 0.5s ease-out infinite;
}

#prop-bubbler.bubbler-chugging .bubble.b1 { animation-delay: 0s; }
#prop-bubbler.bubbler-chugging .bubble.b2 { animation-delay: 0.06s; }
#prop-bubbler.bubbler-chugging .bubble.b3 { animation-delay: 0.12s; }
#prop-bubbler.bubbler-chugging .bubble.b4 { animation-delay: 0.18s; }
#prop-bubbler.bubbler-chugging .bubble.b5 { animation-delay: 0.04s; }
#prop-bubbler.bubbler-chugging .bubble.b6 { animation-delay: 0.1s; }
#prop-bubbler.bubbler-chugging .bubble.b7 { animation-delay: 0.16s; }
#prop-bubbler.bubbler-chugging .bubble.b8 { animation-delay: 0.22s; }

#prop-bubbler.bubbler-chugging {
  animation: bubbler-chug-shake 0.22s ease-in-out infinite;
}

@keyframes bubble-up {
  0% { transform: translateY(0) scale(0.5); opacity: 0.8; }
  100% { transform: translateY(-45px) scale(1.2); opacity: 0; }
}

@keyframes bubble-up-frenzy {
  0% { transform: translateY(0) scale(0.4); opacity: 1; }
  100% { transform: translateY(-60px) scale(1.4); opacity: 0; }
}

@keyframes bubbler-water-chug {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.12) translateY(-2px); }
}

@keyframes bubbler-chug-shake {
  0%, 100% { transform: translateX(-8%) translateY(16px) rotate(-44deg); }
  50% { transform: translateX(-7%) translateY(14px) rotate(-42deg); }
}

.bubbler-bowl {
  position: absolute;
  top: 55px;
  right: -18px;
  width: 28px;
  height: 18px;
  background: #777;
  border-radius: 50% 50% 30% 30%;
  border: 2px solid #555;
}

/* Blunt */
.blunt {
  position: relative;
  width: 110px;
  height: 22px;
  transform: rotate(-5deg);
}

.blunt-paper {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #c4a574, #a08050, #8b6914);
  border-radius: 4px;
  border: 2px solid #7a5c20;
}

.blunt-paper::before {
  content: '';
  position: absolute;
  left: 20%;
  top: 2px;
  width: 60%;
  height: 2px;
  background: rgba(0,0,0,0.15);
  border-radius: 1px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.1);
}

.blunt-tip {
  position: absolute;
  left: -8px;
  top: 3px;
  width: 14px;
  height: 16px;
  background: #b8956a;
  border-radius: 3px 0 0 3px;
}

.blunt-cherry {
  position: absolute;
  left: -14px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ff6600, #cc2200);
  border-radius: 50%;
  opacity: 0;
}

.cherry-glow {
  position: absolute;
  inset: -6px;
  background: radial-gradient(circle, rgba(255,100,0,0.6), transparent);
  border-radius: 50%;
  animation: cherry-pulse 0.4s ease-in-out infinite alternate;
}

@keyframes cherry-pulse {
  from { transform: scale(0.8); opacity: 0.6; }
  to { transform: scale(1.3); opacity: 1; }
}

.prop.phase-use .blunt-cherry,
.prop.phase-raise .blunt-cherry {
  opacity: 1;
}

.blunt-ash {
  position: absolute;
  left: -20px;
  top: 8px;
  width: 8px;
  height: 6px;
  background: #555;
  border-radius: 2px;
  opacity: 0;
}

.prop.phase-use .blunt-ash {
  opacity: 1;
  animation: ash-fall 1.5s ease-in infinite;
}

@keyframes ash-fall {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* Beer — frosty mug at mouth, lips on glass rim */
#prop-beer .prop-hand.wrap {
  bottom: 14px;
  left: 52%;
  width: 46px;
  height: 50px;
  z-index: 1;
}

#prop-beer.phase-use,
#prop-beer.tilt-drink.phase-use {
  left: var(--anchor-drink-left);
  bottom: var(--anchor-drink-bottom);
  transform: translateX(var(--anchor-drink-shift-x)) translateY(var(--anchor-drink-shift-y)) rotate(var(--anchor-drink-rotate));
  transform-origin: var(--anchor-drink-origin-x) var(--anchor-drink-origin-y);
  filter: drop-shadow(3px 6px 10px rgba(0, 0, 0, 0.4));
}

#prop-beer.phase-raise,
#prop-beer.tilt-drink.phase-raise {
  animation: prop-raise-beer 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-beer {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(15deg);
    transform-origin: var(--anchor-drink-origin-x) var(--anchor-drink-origin-y);
  }
  70% {
    left: var(--anchor-drink-left);
    bottom: calc(var(--anchor-drink-bottom) + 6px);
    opacity: 1;
    transform: translateX(var(--anchor-drink-shift-x)) translateY(10px) rotate(-64deg) scale(1.05);
    transform-origin: var(--anchor-drink-origin-x) var(--anchor-drink-origin-y);
  }
  100% {
    left: var(--anchor-drink-left);
    bottom: var(--anchor-drink-bottom);
    opacity: 1;
    transform: translateX(var(--anchor-drink-shift-x)) translateY(var(--anchor-drink-shift-y)) rotate(var(--anchor-drink-rotate)) scale(1);
    transform-origin: var(--anchor-drink-origin-x) var(--anchor-drink-origin-y);
  }
}

#prop-beer.drinking-mug.tilt-drink.phase-use {
  animation: beer-mug-chug-tilt 1.4s ease-in-out forwards;
}

@keyframes beer-mug-chug-tilt {
  0% { transform: translateX(-10%) translateY(12px) rotate(-62deg); }
  25%, 75% { transform: translateX(-6%) translateY(18px) rotate(-72deg); }
  50% { transform: translateX(-4%) translateY(22px) rotate(-76deg); }
  100% { transform: translateX(-10%) translateY(12px) rotate(-62deg); }
}

#prop-beer.drinking-mug .mug-rim {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 6px rgba(200, 230, 255, 0.9);
}

#prop-beer.drinking-mug .mug-beer {
  animation: mug-chug-drain 1.4s ease-in forwards;
}

#prop-beer.beer-chugging .beer-bubble {
  animation: beer-bubble-rise 0.6s ease-in infinite;
}

@keyframes mug-chug-drain {
  0% { height: 68%; }
  100% { height: 24%; }
}

@keyframes beer-bubble-rise {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-18px) scale(1.2); opacity: 0; }
}

.beer-mug {
  position: relative;
  width: 96px;
  height: 112px;
}

.mug-glass {
  position: relative;
  width: 72px;
  height: 96px;
  background: linear-gradient(90deg,
    rgba(140, 190, 230, 0.5) 0%,
    rgba(235, 248, 255, 0.75) 38%,
    rgba(200, 230, 255, 0.55) 62%,
    rgba(140, 190, 230, 0.5) 100%);
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-top: 6px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px 6px 14px 14px;
  box-shadow:
    inset -8px 0 16px rgba(100, 150, 200, 0.25),
    inset 8px 0 16px rgba(255, 255, 255, 0.35),
    inset 0 0 22px rgba(200, 235, 255, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.mug-rim {
  position: absolute;
  top: -3px;
  left: -2px;
  right: -2px;
  height: 10px;
  background: linear-gradient(180deg, #fff, rgba(230, 245, 255, 0.9));
  border-radius: 4px 4px 0 0;
  z-index: 6;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.glass-shine {
  position: absolute;
  top: 12px;
  left: 8px;
  width: 10px;
  height: 55px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  border-radius: 6px;
  z-index: 5;
  pointer-events: none;
}

.mug-handle {
  position: absolute;
  right: -4px;
  top: 28px;
  width: 28px;
  height: 48px;
  border: 7px solid rgba(255, 255, 255, 0.6);
  border-left: none;
  border-radius: 0 16px 16px 0;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), inset -2px 0 4px rgba(200, 230, 255, 0.4);
}

.mug-beer {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  height: 68%;
  background: linear-gradient(180deg,
    #f5c842 0%,
    #e09018 25%,
    #c86a08 55%,
    #9a4a00 100%);
  border-radius: 0 0 10px 10px;
  opacity: 0.95;
  overflow: hidden;
}

.beer-bubble {
  position: absolute;
  background: radial-gradient(circle, rgba(255,255,200,0.9), rgba(255,200,80,0.4));
  border-radius: 50%;
  opacity: 0.7;
}

.beer-bubble.bbb1 { width: 5px; height: 5px; bottom: 20%; left: 15%; animation-delay: 0s; }
.beer-bubble.bbb2 { width: 4px; height: 4px; bottom: 35%; left: 45%; animation-delay: 0.15s; }
.beer-bubble.bbb3 { width: 6px; height: 6px; bottom: 15%; right: 20%; animation-delay: 0.3s; }
.beer-bubble.bbb4 { width: 3px; height: 3px; bottom: 50%; left: 30%; animation-delay: 0.45s; }
.beer-bubble.bbb5 { width: 4px; height: 4px; bottom: 25%; right: 35%; animation-delay: 0.2s; }

.mug-foam,
.beer-foam {
  position: absolute;
  top: 10px;
  left: 5px;
  right: 5px;
  height: 22px;
  opacity: 1;
  z-index: 3;
  overflow: visible;
}

.foam-cap {
  display: block;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, #fffff8, #f8e8b8 60%, #e8d090);
  border-radius: 50% 50% 25% 25%;
  box-shadow: 0 -3px 8px rgba(255, 255, 255, 0.7), inset 0 2px 4px rgba(255,255,255,0.5);
}

.foam-lump {
  position: absolute;
  background: #fffef0;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(255,255,255,0.6);
}

.foam-lump.fl1 { width: 10px; height: 8px; top: -4px; left: 8px; }
.foam-lump.fl2 { width: 12px; height: 9px; top: -6px; left: 28px; }
.foam-lump.fl3 { width: 8px; height: 7px; top: -3px; right: 10px; }

.beer-foam.active,
.mug-foam.active {
  animation: mug-foam-chug 1.4s ease-in-out infinite;
}

@keyframes mug-foam-chug {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.mug-frost {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.frost-crystal {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0.75;
  box-shadow: 0 0 4px rgba(200, 240, 255, 0.8);
}

.frost-crystal.fc1 { width: 7px; height: 7px; top: 14px; left: 5px; }
.frost-crystal.fc2 { width: 5px; height: 5px; top: 32px; left: 3px; }
.frost-crystal.fc3 { width: 6px; height: 6px; top: 52px; left: 8px; }
.frost-crystal.fc4 { width: 5px; height: 5px; top: 22px; right: 8px; }
.frost-crystal.fc5 { width: 8px; height: 8px; top: 58px; right: 5px; }
.frost-crystal.fc6 { width: 4px; height: 4px; top: 70px; left: 20px; }

#prop-beer.frosty-ready .frost-crystal {
  animation: frost-sparkle 1.2s ease-in-out infinite alternate;
}

#prop-beer.frosty-ready .mug-glass {
  box-shadow:
    inset 0 0 26px rgba(210, 240, 255, 0.75),
    0 0 18px rgba(180, 220, 255, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.35);
}

#prop-beer.frosty-ready .mug-sweat .sweat-drop {
  animation: sweat-drip 2s ease-in infinite;
}

@keyframes frost-sparkle {
  from { opacity: 0.5; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.15); }
}

.mug-condense {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 35%,
    rgba(180, 220, 255, 0.25) 100%);
  z-index: 3;
  pointer-events: none;
}

.mug-sweat {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.sweat-drop {
  position: absolute;
  width: 4px;
  height: 8px;
  background: linear-gradient(180deg, rgba(200, 235, 255, 0.9), rgba(150, 200, 230, 0.5));
  border-radius: 0 0 50% 50%;
  opacity: 0;
}

.sweat-drop.sd1 { top: 38px; left: 4px; animation-delay: 0s; }
.sweat-drop.sd2 { top: 55px; right: 6px; animation-delay: 0.6s; }
.sweat-drop.sd3 { top: 72px; left: 12px; animation-delay: 1.2s; }

@keyframes sweat-drip {
  0% { opacity: 0; height: 0; }
  20% { opacity: 0.9; height: 10px; }
  100% { opacity: 0; height: 22px; transform: translateY(8px); }
}

.beer-drip,
.mug-drip {
  position: absolute;
  top: 58px;
  left: 10px;
  width: 6px;
  height: 0;
  background: linear-gradient(180deg, rgba(200, 230, 255, 0.95), rgba(150, 200, 230, 0.6));
  border-radius: 0 0 4px 4px;
  opacity: 0;
  z-index: 7;
}

.beer-drip.active,
.mug-drip.active {
  height: 22px;
  opacity: 0.9;
  animation: drip-condense 1.4s ease-in infinite;
}

@keyframes drip-condense {
  0%, 100% { height: 12px; opacity: 0.65; }
  50% { height: 24px; opacity: 1; }
}

.mug-overflow {
  position: absolute;
  top: 6px;
  left: 14px;
  width: 14px;
  height: 0;
  background: linear-gradient(180deg, #f5c842, #c86a08);
  border-radius: 0 0 6px 6px;
  opacity: 0;
  z-index: 8;
}

.mug-overflow.active {
  height: 16px;
  opacity: 0.85;
  animation: beer-overflow-drip 1.4s ease-in infinite;
}

@keyframes beer-overflow-drip {
  0%, 100% { height: 8px; opacity: 0.5; }
  50% { height: 20px; opacity: 0.95; }
}

.mug-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.75rem;
  color: var(--accent-orange);
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 107, 53, 0.5);
}

/* Hennessy bottle */
.henny-bottle {
  position: relative;
  width: 58px;
  height: 140px;
}

.henny-cork {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 14px;
  background: #2a1810;
  border-radius: 4px 4px 0 0;
}

.henny-neck {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 35px;
  background: linear-gradient(90deg, #4a2810, #6b3a18, #4a2810);
  border-radius: 4px;
}

.henny-shoulder {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 18px;
  background: linear-gradient(90deg, #4a2810, #6b3a18, #4a2810);
  border-radius: 50% 50% 0 0;
}

.henny-body {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 78px;
  background: linear-gradient(90deg, #3d1f0a, #5c3015, #7a4520, #5c3015, #3d1f0a);
  border-radius: 8px 8px 14px 14px;
  border: 3px solid #2a1508;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.henny-label {
  font-family: 'Bangers', cursive;
  font-size: 0.55rem;
  color: var(--accent-yellow);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.2;
}

.henny-sub {
  font-size: 0.4rem;
  color: rgba(255,215,0,0.7);
  letter-spacing: 2px;
}

.henny-liquid {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 65%;
  background: linear-gradient(180deg, rgba(180,100,30,0.6), rgba(120,60,15,0.8));
  border-radius: 0 0 8px 8px;
  opacity: 0.7;
  transition: height 0.4s ease-in;
}

/* Hennessy — bottle neck at mouth, chug pose */
#prop-hennesy .prop-hand.wrap {
  bottom: 18px;
  left: 58%;
  width: 44px;
  height: 48px;
  z-index: 1;
}

#prop-hennesy.phase-use,
#prop-hennesy.tilt-drink.phase-use {
  left: var(--anchor-henny-left);
  bottom: var(--anchor-henny-bottom);
  transform: translateX(var(--anchor-henny-shift-x)) translateY(var(--anchor-henny-shift-y)) rotate(var(--anchor-henny-rotate));
  transform-origin: var(--anchor-henny-origin-x) var(--anchor-henny-origin-y);
}

#prop-hennesy.phase-raise,
#prop-hennesy.tilt-drink.phase-raise {
  animation: prop-raise-hennesy 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-hennesy {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(15deg);
    transform-origin: var(--anchor-henny-origin-x) var(--anchor-henny-origin-y);
  }
  70% {
    left: var(--anchor-henny-left);
    bottom: calc(var(--anchor-henny-bottom) + 6px);
    opacity: 1;
    transform: translateX(var(--anchor-henny-shift-x)) translateY(8px) rotate(-76deg) scale(1.05);
    transform-origin: var(--anchor-henny-origin-x) var(--anchor-henny-origin-y);
  }
  100% {
    left: var(--anchor-henny-left);
    bottom: var(--anchor-henny-bottom);
    opacity: 1;
    transform: translateX(var(--anchor-henny-shift-x)) translateY(var(--anchor-henny-shift-y)) rotate(var(--anchor-henny-rotate)) scale(1);
    transform-origin: var(--anchor-henny-origin-x) var(--anchor-henny-origin-y);
  }
}

#prop-hennesy.henny-drinking.tilt-drink.phase-use {
  animation: henny-bottle-chug 2s ease-in-out forwards;
}

@keyframes henny-bottle-chug {
  0% {
    transform: translateX(-30%) translateY(10px) rotate(-74deg);
  }
  20%, 80% {
    transform: translateX(-24%) translateY(16px) rotate(-82deg);
  }
  45%, 55% {
    transform: translateX(-21%) translateY(20px) rotate(-86deg);
  }
  100% {
    transform: translateX(-30%) translateY(10px) rotate(-74deg);
  }
}

.henny-neck-hole {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 8px;
  background: radial-gradient(ellipse, #2a1508, #1a0a04);
  border-radius: 50%;
  z-index: 2;
}

#prop-hennesy.henny-drinking .henny-cork {
  animation: henny-cork-pop 0.35s ease-out forwards;
  z-index: 5;
}

@keyframes henny-cork-pop {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) rotate(60deg); }
}

#prop-hennesy.henny-drinking .henny-neck {
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.8);
}

#prop-hennesy.henny-drinking .henny-neck-hole {
  animation: neck-hole-glug 0.25s ease-in-out infinite alternate;
}

@keyframes neck-hole-glug {
  from { transform: translateX(-50%) scale(1); background: radial-gradient(ellipse, #3a2010, #1a0a04); }
  to { transform: translateX(-50%) scale(1.2); background: radial-gradient(ellipse, #5a3018, #2a1508); }
}

#prop-hennesy.henny-drinking .henny-liquid {
  animation: henny-drain 2s ease-in forwards;
}

@keyframes henny-drain {
  0% { height: 65%; }
  100% { height: 18%; }
}

/* Hennessy pour stream — bottle neck to mouth */
.henny-pour-stream {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 10px;
  height: 62px;
  transform: translateX(-50%);
  transform-origin: top center;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
}

#prop-hennesy.henny-drinking .henny-pour-stream:not(.hidden) {
  opacity: 1;
}

.pour-liquid-main {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #d4882a 0%,
    #b86a18 25%,
    #9a5512 55%,
    #7a4210 85%,
    #5c3210 100%);
  border-radius: 5px 5px 50% 50%;
  box-shadow: inset 2px 0 6px rgba(255, 210, 120, 0.35), inset -2px 0 4px rgba(0, 0, 0, 0.2);
  animation: pour-stream-pulse 0.12s ease-in-out infinite alternate;
}

.pour-liquid-shine {
  position: absolute;
  top: 4px;
  left: 2px;
  width: 3px;
  height: 80%;
  background: linear-gradient(180deg, rgba(255, 230, 160, 0.7), transparent);
  border-radius: 2px;
  animation: pour-shine-flow 0.4s linear infinite;
}

@keyframes pour-shine-flow {
  0% { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(20%); opacity: 0; }
}

@keyframes pour-stream-pulse {
  from { transform: scaleX(1); }
  to { transform: scaleX(1.15); }
}

.pour-drop {
  position: absolute;
  width: 5px;
  height: 7px;
  background: #a85a15;
  border-radius: 50% 50% 50% 50%;
  opacity: 0;
}

#prop-hennesy.henny-drinking .pour-drop {
  animation: pour-drop-fall 0.5s ease-in infinite;
}

.pour-drop.pd1 { bottom: -4px; left: 0; animation-delay: 0s; }
.pour-drop.pd2 { bottom: -8px; left: 6px; animation-delay: 0.15s; }
.pour-drop.pd3 { bottom: -6px; left: -3px; animation-delay: 0.28s; }

@keyframes pour-drop-fall {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(18px); }
}

.pour-splash-mouth {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background: radial-gradient(ellipse, rgba(180, 100, 30, 0.9), transparent 72%);
  border-radius: 50%;
  animation: pour-mouth-splash 0.2s ease-in-out infinite alternate;
}

@keyframes pour-mouth-splash {
  from { transform: translateX(-50%) scale(0.85); opacity: 0.7; }
  to { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

/* Mouth-level drink FX */
#henny-drink-fx {
  top: 175px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 60px;
  z-index: 14;
}

#henny-drink-fx.active .henny-mouth-pool {
  animation: henny-mouth-pool-grow 0.4s ease-out forwards;
}

.henny-mouth-pool {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: radial-gradient(ellipse, rgba(180, 100, 30, 0.75), transparent 70%);
  border-radius: 50%;
  opacity: 0;
}

@keyframes henny-mouth-pool-grow {
  0% { width: 0; height: 0; opacity: 0; }
  100% { width: 32px; height: 18px; opacity: 0.85; }
}

.henny-chin-stream {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 0;
  background: linear-gradient(180deg, #b86a18, #7a4210);
  border-radius: 0 0 4px 4px;
  opacity: 0;
}

#henny-drink-fx.active .henny-chin-stream {
  animation: henny-chin-stream-flow 2s ease-in forwards;
}

@keyframes henny-chin-stream-flow {
  0% { height: 0; opacity: 0; }
  15% { height: 22px; opacity: 0.9; }
  100% { height: 28px; opacity: 0.6; }
}

.henny-chin-drip {
  position: absolute;
  width: 5px;
  background: #9a5512;
  border-radius: 0 0 50% 50%;
  opacity: 0;
}

#henny-drink-fx.active .henny-chin-drip {
  animation: henny-chin-drip-fall 0.7s ease-in infinite;
}

.henny-chin-drip.hcd1 { top: 34px; left: 42%; height: 0; }
.henny-chin-drip.hcd2 { top: 36px; left: 54%; height: 0; animation-delay: 0.25s; }

@keyframes henny-chin-drip-fall {
  0% { height: 0; opacity: 0; }
  30% { height: 10px; opacity: 0.85; }
  100% { height: 16px; opacity: 0; }
}

.henny-gulp-ring {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 20px;
  border: 2px solid rgba(180, 100, 30, 0.5);
  border-radius: 50%;
  opacity: 0;
}

#henny-drink-fx.active .henny-gulp-ring {
  animation: henny-gulp-pulse 0.45s ease-in-out infinite;
}

@keyframes henny-gulp-pulse {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  40% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.3); }
}

/* Prop smoke trails */
.prop-smoke {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  opacity: 0;
  pointer-events: none;
}

.prop.phase-use .prop-smoke.active,
.prop.phase-raise .prop-smoke.active {
  opacity: 1;
}

.prop-smoke::before,
.prop-smoke::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(220,220,220,0.9) 0%, transparent 70%);
  border-radius: 50%;
  animation: prop-smoke-rise 1.2s ease-out infinite;
}

.prop-smoke::after {
  left: 20px;
  animation-delay: 0.4s;
  width: 25px;
  height: 25px;
}

@keyframes prop-smoke-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0.9; }
  100% { transform: translateY(-70px) scale(1.4); opacity: 0; }
}

/* ========== THE DUDE ========== */
#dude {
  position: relative;
  width: 280px;
  height: 340px;
  transition: transform 0.3s;
  margin-top: 60px;
}

.neck {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 60px;
  background: var(--skin);
  border-radius: 0 0 20px 20px;
  z-index: 1;
}

.head {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 240px;
  z-index: 2;
}

.face {
  position: absolute;
  inset: 30px 10px 10px 10px;
  background: var(--skin);
  border-radius: 50% 50% 45% 45%;
  box-shadow: inset -8px -8px 20px var(--skin-shadow);
  overflow: visible;
}

.ear {
  position: absolute;
  top: 98px;
  width: 30px;
  height: 40px;
  background: var(--skin-shadow);
  border-radius: 50%;
  z-index: 4;
}

.ear.left { left: -5px; }
.ear.right { right: -5px; }

.forehead-bruise {
  position: absolute;
  top: 6px;
  left: 52%;
  width: 42px;
  height: 30px;
  background: radial-gradient(ellipse at 45% 50%,
    rgba(90, 45, 130, 0.6) 0%,
    rgba(70, 35, 100, 0.4) 45%,
    transparent 72%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.forehead-bruise::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 12px;
  width: 18px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(60, 25, 90, 0.45) 0%, transparent 70%);
  border-radius: 50%;
}

.cheek-scar {
  position: absolute;
  top: 148px;
  left: 16px;
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #b06868 15%, #c87878 50%, #a05858 85%, transparent);
  border-radius: 2px;
  transform: rotate(-28deg);
  z-index: 5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.cheek-scar::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 14px;
  width: 14px;
  height: 2px;
  background: #a86060;
  border-radius: 1px;
  transform: rotate(12deg);
  opacity: 0.7;
}

/* Hair */
.hair-back {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 200px;
  background: var(--hair);
  border-radius: 50% 50% 30% 30%;
  z-index: 0;
}

.hair-front {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 60px;
  z-index: 3;
}

.hair-front::before,
.hair-front::after {
  content: '';
  position: absolute;
  background: var(--hair);
  border-radius: 50% 50% 0 0;
}

.hair-front::before {
  left: 10px;
  width: 70px;
  height: 50px;
  transform: rotate(-15deg);
}

.hair-front::after {
  right: 10px;
  width: 70px;
  height: 50px;
  transform: rotate(15deg);
}

/* Boston Red Sox cap — sits ON head, crooked drunk */
.redsox-cap {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 218px;
  height: 78px;
  transform: translateX(-50%) rotate(-14deg);
  transform-origin: 50% 85%;
  z-index: 7;
}

.cap-dome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 198px;
  height: 46px;
  background: radial-gradient(ellipse 100% 90% at 50% 20%, #142d52, #0c2340 55%, #081a30);
  border-radius: 48% 52% 42% 42%;
  border: 3px solid #061228;
  box-shadow:
    inset 0 -12px 20px rgba(0,0,0,0.4),
    0 4px 8px rgba(0,0,0,0.25);
  z-index: 2;
}

.cap-side {
  position: absolute;
  top: 28px;
  width: 22px;
  height: 28px;
  background: linear-gradient(180deg, #0c2340, #081a30);
  border: 2px solid #061228;
  z-index: 1;
}

.cap-side.left {
  left: 6px;
  border-radius: 8px 0 0 12px;
  transform: rotate(-8deg);
}

.cap-side.right {
  right: 6px;
  border-radius: 0 8px 12px 0;
  transform: rotate(6deg);
}

.cap-band {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 208px;
  height: 12px;
  background: linear-gradient(180deg, #0a1a3a, #061228);
  border-radius: 3px;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

.cap-logo {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) rotate(6deg);
  font-family: 'Bangers', cursive;
  font-size: 2.2rem;
  color: #bd3039;
  text-shadow: 2px 2px 0 #7a1a22;
  line-height: 1;
  z-index: 4;
}

.cap-bill {
  position: absolute;
  top: 48px;
  left: 4%;
  width: 108px;
  height: 20px;
  background: linear-gradient(180deg, #0c2340 0%, #081a30 100%);
  border-radius: 3px 50px 45px 3px;
  border: 2px solid #061228;
  transform: rotate(-4deg);
  box-shadow: 0 5px 10px rgba(0,0,0,0.45);
  z-index: 5;
}

.cap-button {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #2a4570, #0c2340);
  border-radius: 50%;
  border: 2px solid #061228;
  z-index: 5;
}

/* Eye bags */
.eye-bag {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(120, 90, 110, 0.55) 0%, rgba(90, 70, 85, 0.35) 60%, transparent 80%);
  border-radius: 50%;
  z-index: 4;
  box-shadow: 0 3px 6px rgba(60, 40, 50, 0.25);
}

.eye.left .eye-bag {
  transform: translateX(-48%) rotate(-3deg);
}

.eye.right .eye-bag {
  transform: translateX(-52%) rotate(4deg);
}

/* Eyebrows */
.eyebrow {
  position: absolute;
  top: 44px;
  width: 45px;
  height: 8px;
  background: var(--hair);
  border-radius: 4px;
  z-index: 3;
  transition: transform 0.2s;
}

.eyebrow.left { left: 35px; transform: rotate(-5deg); }
.eyebrow.right { right: 35px; transform: rotate(5deg); }

/* Eyes */
.eye {
  position: absolute;
  top: 58px;
  width: 55px;
  height: 50px;
  z-index: 3;
  overflow: visible;
}

.eye.left { left: 30px; }
.eye.right { right: 30px; }

.eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  border: 3px solid #333;
  position: relative;
  overflow: hidden;
}

.pupil {
  position: absolute;
  width: 22px;
  height: 28px;
  background: #4a3728;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  transition: all 0.3s;
}

.pupil::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 4px;
  left: 4px;
}

.bloodshot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(255,0,0,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, rgba(255,0,0,0.4) 0%, transparent 40%);
  border-radius: 50%;
}

.eyelid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: var(--skin);
  border-radius: 50% 50% 0 0;
  z-index: 2;
  transition: height 0.3s;
  overflow: hidden;
}

/* Beerface — "game over" gothic eyelid tattoos (visible when eyes shut) */
.eyelid-tattoo {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #1a0808;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(80, 40, 40, 0.35);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}

#dude.char-beerface.dead .eyelid-tattoo {
  opacity: 1;
}

.eye.left .eyelid-tattoo {
  font-size: 12px;
}

.eye.right .eyelid-tattoo {
  font-size: 11px;
  letter-spacing: 0.06em;
}

#dude.char-beerface.dead .eyeball::before,
#dude.char-beerface.dead .eyeball::after {
  content: none;
}

/* Nose — realistic bridge + nostrils */
.nose {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 50px;
  z-index: 3;
}

.nose-bridge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 30px;
  background: linear-gradient(90deg, var(--skin-shadow) 0%, var(--skin) 45%, var(--skin-shadow) 100%);
  border-radius: 10px 10px 6px 6px;
  box-shadow:
    inset -3px 0 5px rgba(0,0,0,0.08),
    inset 3px 0 5px rgba(255,255,255,0.15);
}

.nose-tip {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 26px;
  background: linear-gradient(180deg, var(--skin) 0%, var(--skin-shadow) 85%);
  border-radius: 42% 42% 58% 58%;
  box-shadow:
    0 5px 8px rgba(0,0,0,0.12),
    inset 0 -4px 6px rgba(0,0,0,0.06);
}

.nose-septum {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18));
  border-radius: 2px;
}

.nostril {
  position: absolute;
  bottom: 5px;
  width: 12px;
  height: 10px;
  background: #241414;
  border-radius: 55% 55% 70% 70%;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
}

.nostril.left {
  left: 4px;
  transform: rotate(18deg);
}

.nostril.right {
  right: 4px;
  transform: rotate(-18deg);
}

.nostril-hole {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  background: #120808;
  border-radius: 45% 45% 60% 60%;
  box-shadow: inset 0 1px 3px #000;
}

.dude.coke-bleed .nostril {
  background: #3a1010;
}

.dude.coke-bleed .nostril-hole {
  background: #4a0000;
  box-shadow: inset 0 0 6px #cc0000, 0 0 8px rgba(180, 0, 0, 0.8);
  animation: nostril-pulse 0.4s ease-in-out infinite alternate;
}

@keyframes nostril-pulse {
  from { box-shadow: inset 0 0 4px #aa0000, 0 0 6px rgba(180, 0, 0, 0.6); }
  to { box-shadow: inset 0 0 10px #ff2222, 0 0 14px rgba(255, 0, 0, 0.9); }
}

.dude.coke-bleed .nose-tip,
.dude.coke-bleed .nose-bridge {
  background: linear-gradient(90deg, #c89088, #d4a0a0, #c89088);
}

/* Cocaine snort — line by line, powder trail to nostril */
.coke-snort-fx {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.snort-trail {
  position: absolute;
  inset: 0;
}

.trail-bit {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}

.coke-snort-fx.line-1 .trail-bit { bottom: -8px; }
.coke-snort-fx.line-2 .trail-bit { bottom: 2px; }
.coke-snort-fx.line-3 .trail-bit { bottom: 12px; }
.coke-snort-fx.line-4 .trail-bit { bottom: 22px; }

.coke-snort-fx.nostril-left .trail-bit { left: 50%; margin-left: -3px; }
.coke-snort-fx.nostril-right .trail-bit { right: 50%; margin-right: -3px; }

.snort-powder-burst {
  position: absolute;
  top: 122px;
  width: 18px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 55%, transparent 75%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
}

.snort-powder-burst.burst-left { left: 82px; }
.snort-powder-burst.burst-right { right: 82px; }

.coke-nostril-flash {
  position: absolute;
  top: 126px;
  width: 12px;
  height: 10px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  opacity: 0;
  filter: blur(2px);
}

.coke-nostril-flash.flash-left { left: 84px; }
.coke-nostril-flash.flash-right { right: 84px; }

.coke-snort-fx.snort-active.nostril-left .trail-bit {
  animation: powder-trail-up-left 0.52s ease-in forwards;
}

.coke-snort-fx.snort-active.nostril-right .trail-bit {
  animation: powder-trail-up-right 0.52s ease-in forwards;
}

.coke-snort-fx.snort-active .tb1 { animation-delay: 0s; }
.coke-snort-fx.snort-active .tb2 { animation-delay: 0.04s; }
.coke-snort-fx.snort-active .tb3 { animation-delay: 0.08s; }
.coke-snort-fx.snort-active .tb4 { animation-delay: 0.12s; }
.coke-snort-fx.snort-active .tb5 { animation-delay: 0.16s; }
.coke-snort-fx.snort-active .tb6 { animation-delay: 0.2s; }
.coke-snort-fx.snort-active .tb7 { animation-delay: 0.24s; }
.coke-snort-fx.snort-active .tb8 { animation-delay: 0.28s; }

@keyframes powder-trail-up-left {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-6px, -165px) scale(0.25); }
}

@keyframes powder-trail-up-right {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(6px, -165px) scale(0.25); }
}

.coke-snort-fx.snort-active.nostril-left .burst-left,
.coke-snort-fx.snort-active.nostril-left .flash-left {
  animation: nostril-powder-flash 0.5s ease-out forwards;
}

.coke-snort-fx.snort-active.nostril-right .burst-right,
.coke-snort-fx.snort-active.nostril-right .flash-right {
  animation: nostril-powder-flash 0.5s ease-out forwards;
}

@keyframes nostril-powder-flash {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0.7); }
}

.dude.coke-snorting .head {
  animation: coke-head-lean-down 0.8s ease-out forwards;
}

@keyframes coke-head-lean-down {
  0% { transform: translateX(-50%) rotate(0) translateY(0); }
  100% { transform: translateX(-50%) rotate(24deg) translateY(46px); }
}

.dude.coke-snort-left .head {
  animation: coke-snort-jerk-left 0.52s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.dude.coke-snort-right .head {
  animation: coke-snort-jerk-right 0.52s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes coke-snort-jerk-left {
  0% { transform: translateX(-50%) rotate(24deg) translateY(46px); }
  35% { transform: translateX(-54%) rotate(28deg) translateY(54px); }
  65% { transform: translateX(-52%) rotate(26deg) translateY(50px); }
  100% { transform: translateX(-50%) rotate(24deg) translateY(46px); }
}

@keyframes coke-snort-jerk-right {
  0% { transform: translateX(-50%) rotate(24deg) translateY(46px); }
  35% { transform: translateX(-46%) rotate(28deg) translateY(54px); }
  65% { transform: translateX(-48%) rotate(26deg) translateY(50px); }
  100% { transform: translateX(-50%) rotate(24deg) translateY(46px); }
}

.dude.coke-snort-left .nostril.left .nostril-hole {
  background: #fff;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.6);
  animation: nostril-coke-inhale 0.52s ease-out;
}

.dude.coke-snort-right .nostril.right .nostril-hole {
  background: #fff;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.6);
  animation: nostril-coke-inhale 0.52s ease-out;
}

.coke-snort-fx.pink .trail-bit {
  background: rgba(255, 120, 200, 0.95);
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.9);
}

.coke-snort-fx.pink .snort-powder-burst {
  background: radial-gradient(ellipse, rgba(255, 150, 210, 0.95) 0%, rgba(255, 105, 180, 0.4) 55%, transparent 75%);
}

.coke-snort-fx.pink .coke-nostril-flash {
  background: rgba(255, 150, 210, 0.85);
}

.pink-coke .coke-line.snorting::before {
  background: linear-gradient(180deg, rgba(255, 150, 210, 0.95) 0%, rgba(255, 105, 180, 0.45) 50%, transparent 100%);
}

@keyframes nostril-coke-inhale {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.35); background: #fff; }
  100% { transform: translateX(-50%) scale(1); }
}

/* Mouth */
.mouth {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 30px;
  z-index: 3;
}

.lips {
  position: absolute;
  inset: 0;
  border: 3px solid #c97b7b;
  border-top: none;
  border-radius: 0 0 50% 50%;
  background: #d4908e;
  transition: all 0.2s;
  z-index: 2;
}

.tongue {
  display: none;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  z-index: 3;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
}

.tongue-root {
  width: 30px;
  height: 10px;
  background: linear-gradient(180deg, #c84858 0%, #d85868 100%);
  border-radius: 45% 45% 20% 20%;
  box-shadow: inset 0 2px 4px rgba(255, 180, 190, 0.35);
  z-index: 1;
}

.tongue-mid {
  position: relative;
  width: 28px;
  height: 22px;
  margin-top: -3px;
  background: linear-gradient(180deg, #e06878 0%, #d85068 45%, #c04058 100%);
  border-radius: 42% 42% 38% 38%;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.12),
    inset 3px 0 6px rgba(255, 190, 200, 0.25),
    inset -3px 0 6px rgba(120, 30, 50, 0.15);
}

.tongue-vein {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 70%;
  background: linear-gradient(180deg, rgba(140, 30, 50, 0.55), rgba(100, 20, 40, 0.35));
  border-radius: 2px;
}

.tongue-tip {
  position: relative;
  width: 22px;
  height: 14px;
  margin-top: -2px;
  background: linear-gradient(180deg, #d04860 0%, #b83850 70%, #a03048 100%);
  border-radius: 48% 48% 52% 52% / 35% 35% 65% 65%;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

.tongue-mid {
  z-index: 2;
}

/* Cheeks */
.cheek {
  position: absolute;
  top: 98px;
  width: 35px;
  height: 25px;
  background: rgba(255, 120, 120, 0.3);
  border-radius: 50%;
  z-index: 2;
}

.cheek.left { left: 15px; }
.cheek.right { right: 15px; }

.sweat {
  display: none;
  position: absolute;
  top: 50px;
  right: 25px;
  width: 12px;
  height: 18px;
  background: #87ceeb;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  z-index: 4;
  animation: drip 1s ease-in-out infinite;
}

@keyframes drip {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
  50% { transform: rotate(45deg) translateY(8px); opacity: 0.5; }
}

/* ========== REACTION STATES ========== */

/* Idle - stoned */
.dude.idle .eyelid { height: 60%; }
.dude.idle .pupil { transform: translate(-50%, -30%) scale(1.1); }

/* Coughing (blunt) */
.dude.coughing .eyebrow.left { transform: rotate(-20deg) translateY(5px); }
.dude.coughing .eyebrow.right { transform: rotate(20deg) translateY(5px); }
.dude.coughing .eyelid { height: 30%; }
.dude.coughing .mouth .lips {
  height: 20px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
}
.dude.coughing .sweat { display: block; }
.dude.coughing {
  animation: cough-shake 0.15s ease-in-out infinite;
}

@keyframes cough-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-5px) rotate(-2deg); }
  75% { transform: translateX(5px) rotate(2deg); }
}

/* Puking (bong) */
.dude.puking .face { background: #b8d4a0; }
.dude.puking .eyelid { height: 80%; }
.dude.puking .pupil { transform: translate(-50%, -50%) scale(0.5); }
.dude.puking .mouth .lips {
  width: 50px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #6b8e4e;
  background: #8fbc6a;
}
.dude.puking .sweat { display: block; }
.dude.puking {
  animation: gag 0.3s ease-in-out infinite;
}

@keyframes gag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Burping (beer) */
.dude.burping .cheek { background: rgba(255, 80, 80, 0.6); transform: scale(1.3); }
.dude.burping .mouth .lips {
  width: 50px;
  height: 35px;
  border-radius: 50%;
}
.dude.burping .eyelid { height: 40%; }
.dude.burping {
  animation: burp-puff 0.5s ease-out;
}

@keyframes burp-puff {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Giggling (bubbler) */
.dude.giggling .eyelid { height: 75%; }
.dude.giggling .pupil { transform: translate(-50%, -20%) scale(0.8); }
.dude.giggling .mouth .lips {
  border-radius: 50%;
  height: 15px;
  width: 60px;
  border: 3px solid #c97b7b;
  border-bottom: none;
  background: transparent;
}
.dude.giggling .cheek { background: rgba(255, 100, 150, 0.5); }
.dude.giggling {
  animation: giggle-shake 0.2s ease-in-out infinite;
}

@keyframes giggle-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg) translateY(-3px); }
  75% { transform: rotate(3deg) translateY(-3px); }
}

/* Henny rage */
.dude.angry .face {
  background: #e8a090;
  box-shadow: inset -8px -8px 20px #c87060;
  animation: angry-pulse 0.3s ease-in-out infinite alternate;
}

.dude.angry .eyebrow.left {
  transform: rotate(25deg) translateY(8px);
  background: #2a1510;
  height: 10px;
}

.dude.angry .eyebrow.right {
  transform: rotate(-25deg) translateY(8px);
  background: #2a1510;
  height: 10px;
}

.dude.angry .eyelid { height: 15%; }
.dude.angry .pupil {
  background: #1a0505;
  transform: translate(-50%, -50%) scale(1.15);
}
.dude.angry .eyeball {
  border-color: #8b0000;
  background: #ffe0e0;
}
.dude.angry .mouth .lips {
  width: 58px;
  height: 16px;
  border-radius: 35%;
  border-color: #8b3030;
  background: #a04040;
  animation: angry-grimace 0.15s ease-in-out infinite;
}

@keyframes angry-grimace {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.85); }
}

.dude.angry .cheek {
  background: rgba(200, 30, 30, 0.55);
}
.dude.angry .sweat { display: block; }
.dude.angry {
  animation: angry-shake 0.12s ease-in-out infinite;
}

@keyframes angry-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.15) saturate(1.3); }
}

@keyframes angry-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}

.face-veins {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 50px;
  z-index: 6;
  pointer-events: none;
}

.face-veins.active { display: block; }

.vein {
  position: absolute;
  background: #cc0000;
  border-radius: 2px;
  animation: vein-throb 0.4s ease-in-out infinite alternate;
}

.vein.v1 {
  top: 8px;
  left: 35%;
  width: 4px;
  height: 22px;
  transform: rotate(-15deg);
}

.vein.v2 {
  top: 5px;
  right: 32%;
  width: 4px;
  height: 18px;
  transform: rotate(20deg);
}

.vein.v3 {
  top: 2px;
  left: 48%;
  width: 3px;
  height: 14px;
}

@keyframes vein-throb {
  from { opacity: 0.6; transform: scaleY(1); }
  to { opacity: 1; transform: scaleY(1.15); }
}

.blood-on-face.active { display: block; }

.face-blood {
  position: absolute;
  background: #8b0000;
  border-radius: 50%;
  opacity: 0.85;
}

.face-blood.fb1 {
  top: 55px;
  left: 20px;
  width: 35px;
  height: 28px;
  border-radius: 40% 60% 50% 50%;
}

.face-blood.fb2 {
  top: 70px;
  right: 18px;
  width: 25px;
  height: 40px;
  border-radius: 50% 50% 40% 60%;
}

.face-blood.fb3 {
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 20px;
  border-radius: 50%;
}

/* Bottle smash animation */
#prop-hennesy.smash-raise .henny-bottle {
  animation: bottle-raise-smash 1s ease-in forwards;
}

#prop-hennesy.smashing .henny-bottle {
  animation: bottle-slam 0.35s ease-in forwards;
}

#prop-hennesy.shattered .henny-bottle > :not(.henny-shatter-pieces) {
  opacity: 0;
  transition: opacity 0.05s;
}

#prop-hennesy.shattered .henny-shatter-pieces:not(.hidden) {
  opacity: 1;
}

@keyframes bottle-raise-smash {
  0% { transform: rotate(0) translateY(0); }
  70% { transform: rotate(-145deg) translateY(-95px) translateX(25px); }
  100% { transform: rotate(-155deg) translateY(-88px) translateX(28px); }
}

@keyframes bottle-slam {
  0% { transform: rotate(-155deg) translateY(-88px) translateX(28px); filter: brightness(1); }
  55% { transform: rotate(-188deg) translateY(-8px) translateX(20px) scale(1.12); filter: brightness(1.3); }
  75% { transform: rotate(-198deg) translateY(6px) translateX(16px) scale(1.05); filter: brightness(2.5); }
  100% { transform: rotate(-202deg) translateY(10px) translateX(14px) scale(0.92); filter: brightness(1); }
}

/* Bottle shatter fragments */
.henny-shatter-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.henny-shatter-pieces.active .shatter-piece {
  animation: bottle-piece-fly 0.9s ease-out forwards;
}

.shatter-piece {
  position: absolute;
  opacity: 0;
  border: 1px solid rgba(80, 40, 15, 0.8);
}

.shatter-piece.sp-neck {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 30px;
  background: linear-gradient(90deg, #4a2810, #6b3a18, #4a2810);
  border-radius: 4px;
  --px: -45px; --py: -60px; --pr: -120deg;
}

.shatter-piece.sp-shoulder {
  top: 42px;
  left: 4px;
  width: 24px;
  height: 14px;
  background: linear-gradient(135deg, #5c3015, #3d1f0a);
  border-radius: 50% 0 0 0;
  --px: -70px; --py: -20px; --pr: 80deg;
  animation-delay: 0.03s;
}

.shatter-piece.sp-body-left {
  top: 58px;
  left: 2px;
  width: 22px;
  height: 50px;
  background: linear-gradient(180deg, #5c3015, #3d1f0a);
  border-radius: 8px 0 0 14px;
  --px: -85px; --py: 40px; --pr: -60deg;
  animation-delay: 0.05s;
}

.shatter-piece.sp-body-right {
  top: 58px;
  right: 2px;
  width: 20px;
  height: 48px;
  background: linear-gradient(180deg, #7a4520, #5c3015);
  border-radius: 0 8px 14px 0;
  --px: 75px; --py: 35px; --pr: 95deg;
  animation-delay: 0.04s;
}

.shatter-piece.sp-body-front {
  top: 65px;
  left: 14px;
  width: 28px;
  height: 35px;
  background: linear-gradient(180deg, #6b3a18, #4a2810);
  clip-path: polygon(10% 0, 90% 5%, 80% 100%, 20% 95%);
  --px: 15px; --py: 70px; --pr: 45deg;
  animation-delay: 0.02s;
}

.shatter-piece.sp-base {
  bottom: 4px;
  left: 10px;
  width: 36px;
  height: 16px;
  background: #3d1f0a;
  border-radius: 0 0 12px 12px;
  --px: 5px; --py: 90px; --pr: 20deg;
  animation-delay: 0.08s;
}

.shatter-piece.sp-label-shard {
  top: 78px;
  left: 20px;
  width: 14px;
  height: 10px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), #5c3015);
  clip-path: polygon(0 0, 100% 20%, 70% 100%, 10% 80%);
  --px: -30px; --py: 55px; --pr: -140deg;
  animation-delay: 0.06s;
}

.shatter-piece.sp-glass-sliver {
  top: 50px;
  left: 28px;
  width: 8px;
  height: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(200, 180, 140, 0.5));
  clip-path: polygon(30% 0, 100% 10%, 60% 100%, 0 90%);
  border-color: rgba(255, 255, 255, 0.6);
  --px: 50px; --py: -35px; --pr: 200deg;
  animation-delay: 0.01s;
}

@keyframes bottle-piece-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  25% { opacity: 1; transform: translate(calc(var(--px, 0) * 0.3), calc(var(--py, 0) * 0.3)) rotate(calc(var(--pr, 0) * 0.3)) scale(1.05); }
  100% { opacity: 0.75; transform: translate(var(--px, 0), var(--py, 0)) rotate(var(--pr, 0)) scale(0.7); }
}

/* Anger bubble */
#anger-bubble {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
}

.anger-text {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: #ff2222;
  text-shadow: 3px 3px 0 #000, 0 0 15px rgba(255,0,0,0.7);
  animation: anger-pop 0.4s ease-out forwards;
}

.anger-text.a2 {
  font-size: 1.4rem;
  color: var(--accent-yellow);
  animation-delay: 0.5s;
  opacity: 0;
}

#anger-bubble.active .anger-text.a2 {
  animation: anger-pop 0.4s ease-out 0.5s forwards;
}

#reparations-bubble {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
}

.reparations-text {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.7rem;
  color: #ffd700;
  text-shadow: 3px 3px 0 #000, 0 0 14px rgba(255, 215, 0, 0.65);
  animation: anger-pop 0.4s ease-out forwards;
}

.reparations-text.r2 {
  font-size: 2rem;
  color: #39ff14;
  animation-delay: 0.45s;
  opacity: 0;
}

#reparations-bubble.active .reparations-text.r2 {
  animation: anger-pop 0.4s ease-out 0.45s forwards;
}

#butterface-bubble {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
}

.butter-text {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.6rem;
  color: #ff69b4;
  text-shadow: 3px 3px 0 #000, 0 0 14px rgba(255, 105, 180, 0.65);
  animation: anger-pop 0.4s ease-out forwards;
}

.butter-text.b2 {
  font-size: 1.9rem;
  color: #ffb6c1;
  animation-delay: 0.4s;
  opacity: 0;
}

#butterface-bubble.active .butter-text.b2 {
  animation: anger-pop 0.4s ease-out 0.4s forwards;
}

@keyframes anger-pop {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Gore splatter — detailed henny smash */
#henny-gore {
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  z-index: 22;
}

.smash-impact-flash {
  position: absolute;
  top: 55px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ff4444 40%, transparent 70%);
  opacity: 0;
}

#henny-gore.active .smash-impact-flash {
  animation: smash-flash-burst 0.5s ease-out forwards;
}

@keyframes smash-flash-burst {
  0% { opacity: 1; transform: scale(0.3); }
  40% { opacity: 0.95; transform: scale(2.5); }
  100% { opacity: 0; transform: scale(4); }
}

.smash-crack-text {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 2.6rem;
  color: #ff2222;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 0, 0, 0.9);
  opacity: 0;
  white-space: nowrap;
  z-index: 5;
}

#henny-gore.active .smash-crack-text {
  animation: smash-text-pop 0.55s ease-out 0.05s forwards;
}

@keyframes smash-text-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.2) rotate(-8deg); }
  35% { opacity: 1; transform: translateX(-50%) scale(1.35) rotate(4deg); }
  100% { opacity: 0.9; transform: translateX(-50%) scale(1) rotate(0); }
}

.skull-crack {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, transparent, #4a0000, #8b0000, #4a0000, transparent);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
}

#henny-gore.active .skull-crack {
  animation: skull-crack-spread 0.4s ease-out forwards;
}

.skull-crack.sc1 { top: 58px; left: 95px; width: 70px; transform-origin: center; animation-delay: 0.08s; }
.skull-crack.sc2 { top: 72px; left: 110px; width: 55px; transform: rotate(35deg); transform-origin: left; animation-delay: 0.12s; }
.skull-crack.sc3 { top: 68px; left: 130px; width: 45px; transform: rotate(-28deg); transform-origin: right; animation-delay: 0.15s; }
.skull-crack.sc4 { top: 82px; left: 105px; width: 60px; transform: rotate(8deg); animation-delay: 0.18s; }

@keyframes skull-crack-spread {
  0% { opacity: 0; transform: scaleX(0); }
  60% { opacity: 1; transform: scaleX(1.1); }
  100% { opacity: 0.95; transform: scaleX(1); }
}

.glass-shard {
  position: absolute;
  background: linear-gradient(135deg, rgba(220, 200, 160, 0.95), rgba(255, 255, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  opacity: 0;
}

#henny-gore.active .glass-shard {
  animation: shard-fly 0.85s ease-out forwards;
}

.glass-shard.g1 { width: 14px; height: 20px; top: 52px; left: 118px; clip-path: polygon(0 0, 100% 25%, 55% 100%); }
.glass-shard.g2 { width: 11px; height: 16px; top: 48px; left: 142px; animation-delay: 0.04s; clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 75%); }
.glass-shard.g3 { width: 18px; height: 12px; top: 66px; left: 98px; animation-delay: 0.07s; clip-path: polygon(0 20%, 100% 0, 90% 100%, 10% 80%); }
.glass-shard.g4 { width: 9px; height: 14px; top: 44px; left: 162px; animation-delay: 0.02s; }
.glass-shard.g5 { width: 16px; height: 9px; top: 76px; left: 128px; animation-delay: 0.09s; }
.glass-shard.g6 { width: 7px; height: 12px; top: 60px; left: 88px; animation-delay: 0.05s; }
.glass-shard.g7 { width: 12px; height: 8px; top: 50px; left: 175px; animation-delay: 0.03s; --sx: 95px; --sy: -40px; --sr: 220deg; }
.glass-shard.g8 { width: 6px; height: 18px; top: 55px; left: 105px; animation-delay: 0.06s; --sx: -85px; --sy: -55px; --sr: -170deg; }
.glass-shard.g9 { width: 10px; height: 10px; top: 70px; left: 155px; animation-delay: 0.08s; --sx: 70px; --sy: 30px; --sr: 160deg; }
.glass-shard.g10 { width: 8px; height: 6px; top: 40px; left: 130px; animation-delay: 0.01s; --sx: -25px; --sy: -70px; --sr: -90deg; }
.glass-shard.g11 { width: 13px; height: 7px; top: 85px; left: 108px; animation-delay: 0.1s; --sx: -60px; --sy: 85px; --sr: 130deg; }
.glass-shard.g12 { width: 5px; height: 15px; top: 62px; left: 168px; animation-delay: 0.04s; --sx: 90px; --sy: 60px; --sr: -210deg; }

@keyframes shard-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  20% { opacity: 1; transform: translate(calc(var(--sx, 30px) * 0.2), calc(var(--sy, 60px) * 0.2)) rotate(calc(var(--sr, 180deg) * 0.2)) scale(1.1); }
  100% { opacity: 0.8; transform: translate(var(--sx, 30px), var(--sy, 60px)) rotate(var(--sr, 180deg)) scale(0.85); }
}

.glass-shard.g1 { --sx: -55px; --sy: 85px; --sr: 210deg; }
.glass-shard.g2 { --sx: 65px; --sy: 75px; --sr: -155deg; }
.glass-shard.g3 { --sx: -75px; --sy: 45px; --sr: 95deg; }
.glass-shard.g4 { --sx: 85px; --sy: 95px; --sr: -205deg; }
.glass-shard.g5 { --sx: 25px; --sy: 105px; --sr: 125deg; }
.glass-shard.g6 { --sx: -45px; --sy: 115px; --sr: -85deg; }

.glass-embed {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(180, 160, 120, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: scale(0);
}

#henny-gore.active .glass-embed {
  animation: glass-embed-stick 0.5s ease-out 0.1s forwards;
}

.glass-embed.ge1 { width: 10px; height: 16px; top: 54px; left: 132px; clip-path: polygon(20% 0, 100% 10%, 70% 100%, 0 90%); }
.glass-embed.ge2 { width: 8px; height: 12px; top: 64px; left: 148px; animation-delay: 0.15s; clip-path: polygon(0 0, 80% 20%, 100% 100%, 20% 80%); }
.glass-embed.ge3 { width: 6px; height: 10px; top: 58px; left: 112px; animation-delay: 0.18s; }

@keyframes glass-embed-stick {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
  100% { opacity: 0.95; transform: scale(1) rotate(8deg); }
}

.blood-splat {
  position: absolute;
  background: radial-gradient(ellipse, #cc0000 0%, #8b0000 60%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

#henny-gore.active .blood-splat {
  animation: blood-burst 0.6s ease-out forwards;
}

.blood-splat.b1 { width: 80px; height: 62px; top: 40px; left: 98px; }
.blood-splat.b2 { width: 55px; height: 44px; top: 88px; left: 55px; animation-delay: 0.06s; }
.blood-splat.b3 { width: 50px; height: 55px; top: 76px; left: 172px; animation-delay: 0.04s; }
.blood-splat.b4 { width: 100px; height: 38px; top: 118px; left: 90px; animation-delay: 0.1s; }
.blood-splat.b5 { width: 40px; height: 32px; top: 52px; left: 168px; animation-delay: 0.08s; }
.blood-splat.b6 { width: 35px; height: 28px; top: 95px; left: 185px; animation-delay: 0.12s; }

@keyframes blood-burst {
  0% { opacity: 0; transform: scale(0); }
  35% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0.92; transform: scale(1); }
}

.blood-spurt {
  position: absolute;
  width: 6px;
  background: linear-gradient(180deg, #ff2222, #cc0000 70%, transparent);
  border-radius: 50% 50% 0 0;
  opacity: 0;
  transform-origin: bottom center;
}

#henny-gore.active .blood-spurt {
  animation: blood-spurt-fountain 0.45s ease-out infinite alternate;
}

.blood-spurt.hbs1 { top: 42px; left: 128px; height: 0; animation-delay: 0.1s; }
.blood-spurt.hbs2 { top: 48px; left: 142px; height: 0; width: 5px; animation-delay: 0.15s; }
.blood-spurt.hbs3 { top: 45px; left: 115px; height: 0; width: 4px; animation-delay: 0.2s; }

@keyframes blood-spurt-fountain {
  0% { height: 12px; opacity: 0.85; transform: scaleY(0.8); }
  100% { height: 28px; opacity: 1; transform: scaleY(1.2); }
}

.blood-mist {
  position: absolute;
  width: 5px;
  height: 4px;
  background: #aa0000;
  border-radius: 50%;
  opacity: 0;
}

#henny-gore.active .blood-mist {
  animation: blood-mist-spray 0.7s ease-out forwards;
}

.blood-mist.hm1 { top: 56px; left: 125px; --mx: -40px; --my: -35px; }
.blood-mist.hm2 { top: 58px; left: 138px; --mx: 45px; --my: -28px; animation-delay: 0.02s; }
.blood-mist.hm3 { top: 54px; left: 148px; --mx: 55px; --my: -45px; animation-delay: 0.04s; }
.blood-mist.hm4 { top: 60px; left: 112px; --mx: -55px; --my: -20px; animation-delay: 0.03s; }
.blood-mist.hm5 { top: 52px; left: 155px; --mx: 30px; --my: -55px; animation-delay: 0.05s; }
.blood-mist.hm6 { top: 62px; left: 118px; --mx: -25px; --my: -50px; animation-delay: 0.01s; }

@keyframes blood-mist-spray {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  25% { opacity: 1; transform: translate(calc(var(--mx, 0) * 0.3), calc(var(--my, 0) * 0.3)) scale(1.5); }
  100% { opacity: 0.6; transform: translate(var(--mx, 0), var(--my, 0)) scale(0.8); }
}

.blood-drip {
  position: absolute;
  width: 6px;
  background: linear-gradient(180deg, #cc0000, #660000);
  border-radius: 0 0 4px 4px;
  opacity: 0;
}

#henny-gore.active .blood-drip {
  animation: blood-drip-fall 1.4s ease-in forwards;
}

.blood-drip.d1 { top: 95px; left: 125px; height: 0; animation-delay: 0.25s; }
.blood-drip.d2 { top: 105px; left: 150px; height: 0; animation-delay: 0.4s; }
.blood-drip.d3 { top: 100px; left: 108px; height: 0; animation-delay: 0.55s; }
.blood-drip.d4 { top: 108px; left: 168px; height: 0; animation-delay: 0.35s; }

@keyframes blood-drip-fall {
  0% { height: 0; opacity: 0; }
  25% { height: 40px; opacity: 1; }
  100% { height: 65px; opacity: 0.75; }
}

.brain-chunk {
  position: absolute;
  background: radial-gradient(ellipse, #ffb6c1, #d4788a, #b85c6e);
  border-radius: 40% 60% 50% 45%;
  opacity: 0;
  border: 2px solid #a05060;
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.15);
}

#henny-gore.active .brain-chunk {
  animation: brain-fly 1s ease-out forwards;
}

.brain-chunk.br1 { width: 30px; height: 24px; top: 50px; left: 142px; }
.brain-chunk.br2 { width: 22px; height: 20px; top: 72px; left: 72px; animation-delay: 0.08s; }
.brain-chunk.br3 { width: 18px; height: 16px; top: 62px; left: 188px; animation-delay: 0.12s; }
.brain-chunk.br4 { width: 14px; height: 12px; top: 58px; left: 102px; animation-delay: 0.06s; }
.brain-chunk.br5 { width: 20px; height: 14px; top: 78px; left: 158px; animation-delay: 0.14s; }

@keyframes brain-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(0); }
  25% { opacity: 1; transform: translate(0, 0) scale(1.25) rotate(12deg); }
  100% { opacity: 0.88; transform: translate(var(--bx, 20px), var(--by, 50px)) scale(0.9) rotate(var(--br, 45deg)); }
}

.brain-chunk.br1 { --bx: 45px; --by: 75px; --br: 65deg; }
.brain-chunk.br2 { --bx: -60px; --by: 58px; --br: -35deg; }
.brain-chunk.br3 { --bx: 70px; --by: 48px; --br: 95deg; }
.brain-chunk.br4 { --bx: -40px; --by: -30px; --br: -80deg; }
.brain-chunk.br5 { --bx: 35px; --by: 90px; --br: 40deg; }

.brain-string {
  position: absolute;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, #ffaaaa, #cc5566);
  border-radius: 1px;
  opacity: 0;
}

#henny-gore.active .brain-string {
  animation: brain-string-dangle 0.8s ease-out 0.15s forwards;
}

.brain-string.bstr1 { top: 56px; left: 136px; transform: rotate(-20deg); }
.brain-string.bstr2 { top: 60px; left: 152px; transform: rotate(25deg); animation-delay: 0.2s; }

@keyframes brain-string-dangle {
  0% { opacity: 0; height: 0; }
  50% { opacity: 0.9; height: 22px; }
  100% { opacity: 0.75; height: 18px; }
}

.brain-splatter {
  position: absolute;
  top: 46px;
  left: 108px;
  width: 72px;
  height: 52px;
  background: radial-gradient(ellipse, #f0a0b0 0%, #c06070 45%, transparent 78%);
  border-radius: 50%;
  opacity: 0;
}

#henny-gore.active .brain-splatter {
  animation: brain-burst 0.55s ease-out 0.05s forwards;
}

.brain-pink-mist {
  position: absolute;
  top: 48px;
  left: 120px;
  width: 50px;
  height: 35px;
  background: radial-gradient(ellipse, rgba(255, 180, 190, 0.7), transparent 70%);
  opacity: 0;
}

#henny-gore.active .brain-pink-mist {
  animation: brain-mist-puff 0.6s ease-out 0.1s forwards;
}

@keyframes brain-mist-puff {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.85; transform: scale(1.3); }
  100% { opacity: 0.6; transform: scale(1); }
}

@keyframes brain-burst {
  0% { transform: scale(0); opacity: 0; }
  45% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.92; }
}

.scalp-blood-fountain {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 30px;
  background: radial-gradient(ellipse at center top, #ff0000, #8b0000 50%, transparent 75%);
  opacity: 0;
}

#henny-gore.active .scalp-blood-fountain {
  animation: scalp-fountain 0.4s ease-out infinite alternate;
}

@keyframes scalp-fountain {
  from { opacity: 0.85; transform: translateX(-50%) scaleY(0.9); }
  to { opacity: 1; transform: translateX(-50%) scaleY(1.2); }
}

.henny-residue-drip {
  position: absolute;
  top: 70px;
  left: 138px;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, #9a5512, #5c3210);
  border-radius: 0 0 3px 3px;
  opacity: 0;
}

#henny-gore.active .henny-residue-drip {
  animation: henny-residue-fall 1.2s ease-in 0.3s forwards;
}

@keyframes henny-residue-fall {
  0% { height: 0; opacity: 0; }
  30% { height: 25px; opacity: 0.8; }
  100% { height: 45px; opacity: 0.5; }
}

.dude.henny-smashed .face {
  background: #b87870;
  box-shadow: inset -8px -8px 20px #a06058;
}

.dude.henny-smashed .redsox-cap {
  animation: cap-crooked 0.6s ease-out forwards;
}

@keyframes cap-crooked {
  to { transform: rotate(-18deg) translateX(8px); }
}

/* Knocked out (hennesy) */
.dude.knocked-out {
  transform: rotate(25deg) translateY(40px);
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.dude.knocked-out .eyelid { height: 90%; }
.dude.knocked-out .pupil { opacity: 0; }
.dude.knocked-out .mouth .lips {
  width: 40px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
}

.dude.knocked-out .eyeball::before,
.dude.knocked-out .eyeball::after {
  content: 'X';
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* Blunt disgust — "ew is this a blackwood" */
.dude.disgusted .face { background: #d4c4a0; }
.dude.disgusted .eyebrow.left { transform: rotate(-15deg) translateY(-5px); }
.dude.disgusted .eyebrow.right { transform: rotate(20deg) translateY(3px); }
.dude.disgusted .eyelid { height: 45%; }
.dude.disgusted .pupil { transform: translate(-50%, -50%) scale(0.9); }
.dude.disgusted .mouth .lips {
  width: 55px;
  height: 18px;
  border-radius: 50% 50% 40% 60%;
  border: 3px solid #b07070;
  transform: skewX(-8deg);
}
.dude.disgusted .tongue { display: flex; }

/* Cocaine — jittering, wide eyes */
.dude.cocaine .eyelid { height: 5%; }
.dude.cocaine .pupil {
  width: 14px;
  height: 18px;
  animation: coke-look 0.25s ease-in-out infinite;
}
.dude.cocaine .eye.left .pupil { animation-delay: 0s; }
.dude.cocaine .eye.right .pupil { animation-delay: 0.12s; }
.dude.cocaine .eyebrow.left { transform: rotate(-30deg) translateY(-8px); }
.dude.cocaine .eyebrow.right { transform: rotate(30deg) translateY(-8px); }
.dude.cocaine .mouth .lips {
  width: 80px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
}
.dude.cocaine .cheek { background: rgba(255, 50, 50, 0.5); }
.dude.cocaine .sweat { display: block; }
.dude.cocaine {
  animation: coke-jitter 0.08s ease-in-out infinite;
}

@keyframes coke-jitter {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-6px, 3px) rotate(-2deg); }
  50% { transform: translate(5px, -4px) rotate(2deg); }
  75% { transform: translate(-3px, -2px) rotate(-1deg); }
  100% { transform: translate(4px, 2px) rotate(1deg); }
}

@keyframes coke-look {
  0% { transform: translate(-80%, -50%); }
  25% { transform: translate(-20%, -60%); }
  50% { transform: translate(-60%, -30%); }
  75% { transform: translate(-30%, -55%); }
  100% { transform: translate(-70%, -45%); }
}

/* Coke 1 — graphic nose bleed → puddle */
.dude.coke-bleed .eyelid { height: 35%; }
.dude.coke-bleed .eyeball { border-color: #8b0000; }
.dude.coke-bleed .cheek { background: rgba(180, 20, 20, 0.45); }
.dude.coke-bleed {
  animation: coke-bleed-shake 0.18s ease-in-out infinite;
}

@keyframes coke-bleed-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

.dude.coke-collapsed {
  transform: rotate(75deg) translateY(95px) translateX(-35px);
  transition: transform 1.4s cubic-bezier(0.55, 0, 0.85, 0.36);
}

.dude.coke-collapsed .head {
  transform: translateX(-50%) rotate(15deg);
}

/* Blood originating FROM nose on face */
.nose-blood {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}

.nostril-drip {
  position: absolute;
  top: 130px;
  width: 5px;
  height: 0;
  background: linear-gradient(180deg, #aa0000, #660000);
  border-radius: 0 0 3px 3px;
  opacity: 0;
}

.nostril-drip.drip-left { left: 86px; }
.nostril-drip.drip-right { left: 104px; width: 4px; }

.nose-blood.phase-1 .nostril-drip {
  animation: nostril-drip-grow 1.2s ease-out forwards;
}

@keyframes nostril-drip-grow {
  0% { height: 0; opacity: 0; }
  15% { opacity: 1; }
  100% { height: 22px; opacity: 1; }
}

.blood-stream {
  position: absolute;
  top: 146px;
  width: 0;
  background: linear-gradient(180deg, #bb1111, #770000 40%, #550000);
  border-radius: 3px;
  opacity: 0;
  box-shadow: 1px 0 3px rgba(0,0,0,0.3);
}

.blood-stream.stream-left {
  left: 84px;
  transform: rotate(8deg);
  transform-origin: top center;
}

.blood-stream.stream-right {
  left: 102px;
  transform: rotate(-6deg);
  transform-origin: top center;
}

.blood-stream.stream-center {
  left: 92px;
  width: 6px;
  transform: rotate(2deg);
}

.nose-blood.phase-2 .blood-stream.stream-left,
.nose-blood.phase-2 .blood-stream.stream-right {
  animation: face-stream-grow 2s ease-in forwards;
}

.nose-blood.phase-2 .blood-stream.stream-center {
  animation: face-stream-grow-center 2.2s ease-in 0.3s forwards;
}

@keyframes face-stream-grow {
  0% { width: 5px; height: 0; opacity: 0; }
  10% { opacity: 1; }
  100% { width: 7px; height: 55px; opacity: 0.95; }
}

@keyframes face-stream-grow-center {
  0% { height: 0; opacity: 0; }
  10% { opacity: 1; }
  100% { height: 48px; opacity: 0.9; }
}

.blood-lip-smear {
  position: absolute;
  top: 198px;
  left: 82px;
  width: 0;
  height: 14px;
  background: radial-gradient(ellipse, #990000 0%, #660000 70%);
  border-radius: 40% 60% 50% 50%;
  opacity: 0;
}

.nose-blood.phase-2 .blood-lip-smear {
  animation: lip-smear-grow 1.5s ease-out 1s forwards;
}

@keyframes lip-smear-grow {
  to { width: 38px; opacity: 0.9; }
}

.blood-chin-blob {
  position: absolute;
  top: 208px;
  left: 90px;
  width: 0;
  height: 0;
  background: radial-gradient(ellipse, #aa0000, #550000);
  border-radius: 50% 50% 45% 55%;
  opacity: 0;
}

.nose-blood.phase-3 .blood-chin-blob {
  animation: chin-blob-grow 1.2s ease-out forwards;
}

@keyframes chin-blob-grow {
  0% { width: 0; height: 0; opacity: 0; }
  50% { width: 28px; height: 22px; opacity: 1; }
  100% { width: 32px; height: 26px; opacity: 0.95; }
}

.blood-cheek-smear {
  position: absolute;
  top: 165px;
  width: 0;
  height: 8px;
  background: #880000;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-20deg);
}

.blood-cheek-smear.left-smear { left: 58px; }
.blood-cheek-smear.right-smear {
  left: 118px;
  transform: rotate(15deg);
}

.nose-blood.phase-2 .blood-cheek-smear {
  animation: cheek-smear 1s ease-out 0.5s forwards;
}

@keyframes cheek-smear {
  to { width: 22px; opacity: 0.75; }
}

/* Neck → ground cascade */
.blood-cascade {
  position: absolute;
  top: 255px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 110px;
  z-index: 6;
  pointer-events: none;
}

.neck-blood-river {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: linear-gradient(180deg, #990000, #660000 50%, #440000);
  border-radius: 0 0 8px 8px;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.blood-cascade.phase-3 .neck-blood-river {
  animation: neck-river-flow 2s ease-in forwards;
}

@keyframes neck-river-flow {
  0% { width: 0; height: 0; opacity: 0; }
  20% { width: 10px; height: 30px; opacity: 1; }
  100% { width: 14px; height: 120px; opacity: 0.95; }
}

.falling-blood-drop {
  position: absolute;
  width: 7px;
  height: 10px;
  background: #aa0000;
  border-radius: 50% 50% 50% 20%;
  opacity: 0;
  left: 50%;
}

.blood-cascade.phase-3 .falling-blood-drop {
  animation: blood-drop-fall 1.2s ease-in infinite;
}

.falling-blood-drop.fb1 { top: 40px; animation-delay: 0s; margin-left: -8px; }
.falling-blood-drop.fb2 { top: 55px; animation-delay: 0.25s; margin-left: 6px; }
.falling-blood-drop.fb3 { top: 70px; animation-delay: 0.5s; margin-left: -4px; }
.falling-blood-drop.fb4 { top: 85px; animation-delay: 0.75s; margin-left: 2px; }

@keyframes blood-drop-fall {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.7; transform: translateY(90px) scale(0.8); }
}

.ground-blood-trail {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: linear-gradient(180deg, #770000, transparent);
  opacity: 0;
}

.blood-cascade.phase-4 .ground-blood-trail {
  animation: ground-trail 1s ease-out forwards;
}

@keyframes ground-trail {
  to { width: 8px; height: 45px; opacity: 0.9; }
}

/* Detailed blood puddle on ground */
.blood-puddle-scene {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 90px;
  z-index: 5;
  pointer-events: none;
}

#dude.coke-collapsed {
  z-index: 7;
}

.puddle-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #aa0000 0%, #770000 35%, #440000 65%, #220000 90%);
  border-radius: 45% 55% 50% 50%;
  opacity: 0;
  box-shadow: inset 0 -8px 20px rgba(0,0,0,0.5), 0 4px 15px rgba(100,0,0,0.6);
}

.puddle-body-inner {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: radial-gradient(ellipse, rgba(200,30,30,0.6) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
}

.blood-puddle-scene.phase-4 .puddle-body {
  animation: puddle-spread 2.5s ease-out forwards;
}

.blood-puddle-scene.phase-4 .puddle-body-inner {
  animation: puddle-inner 2s ease-out 0.5s forwards;
}

@keyframes puddle-spread {
  0% { width: 0; height: 0; opacity: 0; }
  15% { width: 40px; height: 18px; opacity: 0.8; }
  40% { width: 120px; height: 42px; opacity: 0.95; }
  100% { width: 220px; height: 65px; opacity: 1; }
}

@keyframes puddle-inner {
  to { width: 140px; height: 35px; opacity: 0.7; }
}

.puddle-splatter {
  position: absolute;
  background: #660000;
  border-radius: 50%;
  opacity: 0;
}

.puddle-splatter.sp1 { bottom: 30px; left: 20px; width: 0; height: 0; }
.puddle-splatter.sp2 { bottom: 45px; right: 25px; width: 0; height: 0; }
.puddle-splatter.sp3 { bottom: 15px; left: 45%; width: 0; height: 0; }

.blood-puddle-scene.phase-4 .puddle-splatter.sp1 {
  animation: splat-pop 0.6s ease-out 0.8s forwards;
}
.blood-puddle-scene.phase-4 .puddle-splatter.sp2 {
  animation: splat-pop 0.5s ease-out 1.2s forwards;
}
.blood-puddle-scene.phase-4 .puddle-splatter.sp3 {
  animation: splat-pop 0.4s ease-out 1.5s forwards;
}

@keyframes splat-pop {
  0% { width: 0; height: 0; opacity: 0; }
  70% { opacity: 1; }
  100% { width: var(--sw, 18px); height: var(--sh, 12px); opacity: 0.85; }
}

.puddle-splatter.sp1 { --sw: 22px; --sh: 14px; }
.puddle-splatter.sp2 { --sw: 16px; --sh: 10px; }
.puddle-splatter.sp3 { --sw: 12px; --sh: 8px; }

.puddle-ripple {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 2px solid rgba(180, 40, 40, 0.5);
  border-radius: 50%;
  opacity: 0;
}

.blood-puddle-scene.phase-4 .puddle-ripple {
  animation: puddle-ripple-expand 2s ease-out 1s infinite;
}

@keyframes puddle-ripple-expand {
  0% { width: 60px; height: 25px; opacity: 0.6; }
  100% { width: 200px; height: 70px; opacity: 0; }
}

.puddle-drip-edge {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 0;
  background: #550000;
  border-radius: 0 0 3px 3px;
  opacity: 0;
}

.puddle-drip-edge.de1 { left: 30%; }
.puddle-drip-edge.de2 { right: 28%; }

.blood-puddle-scene.phase-4 .puddle-drip-edge {
  animation: edge-drip 1.5s ease-in 2s forwards;
}

@keyframes edge-drip {
  to { height: 18px; opacity: 0.8; }
}

/* Coke 2 — nodding off / fent death */
.dude.coke-nod .eyelid { height: 75%; }
.dude.coke-nod .pupil { opacity: 0.4; transform: translate(-50%, -30%) scale(0.8); }
.dude.coke-nod .head {
  animation: nod-off 1.2s ease-in-out infinite;
}

@keyframes nod-off {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  40% { transform: translateX(-50%) rotate(15deg) translateY(12px); }
  60% { transform: translateX(-50%) rotate(8deg) translateY(6px); }
}

/* Coke 3 — stroke droop / k-hole */
.dude.coke-stroke .face {
  transform: skewY(6deg);
  border-radius: 60% 40% 50% 45%;
}
.dude.coke-stroke .eye.left .eyeball { transform: translateY(8px); }
.dude.coke-stroke .eye.right .eyeball { transform: translateY(4px) scale(0.95); }
.dude.coke-stroke .eyelid { height: 60%; }
.dude.coke-stroke .eyebrow.left { transform: rotate(10deg) translateY(12px); }
.dude.coke-stroke .eyebrow.right { transform: rotate(-5deg) translateY(5px); }
.dude.coke-stroke .mouth .lips {
  width: 55px;
  height: 25px;
  border-radius: 0 0 60% 40%;
  transform: translateX(-50%) skewX(-12deg);
  left: 45%;
}
.dude.coke-stroke .tongue { display: flex; width: 30px; }
.dude.coke-stroke .tongue-mid { height: 16px; }
.dude.coke-stroke .tongue-tip { height: 10px; width: 18px; }

.dude.k-hole {
  animation: none !important;
  filter: saturate(0.4) blur(0.5px);
}

#drool-stream {
  top: 230px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  width: 80px;
  height: 90px;
}

#drool-stream.active .drool-strand {
  animation: drool-dangle 1.5s ease-in-out infinite;
}

.drool-strand {
  position: absolute;
  top: 0;
  width: 8px;
  background: linear-gradient(180deg, rgba(200,220,255,0.9), rgba(150,200,255,0.7));
  border-radius: 0 0 4px 4px;
  opacity: 0;
}

.drool-strand.ds1 { left: 30px; height: 0; }
.drool-strand.ds2 { left: 42px; height: 0; animation-delay: 0.2s; }
.drool-strand.ds3 { left: 36px; height: 0; animation-delay: 0.4s; width: 6px; }

#drool-stream.active .drool-strand {
  height: 55px;
  opacity: 0.9;
}

@keyframes drool-dangle {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}

.drool-pool {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 0;
  background: rgba(150, 200, 255, 0.5);
  border-radius: 50%;
}

#drool-stream.active .drool-pool {
  animation: drool-pool-grow 3s ease-out forwards;
}

@keyframes drool-pool-grow {
  to { height: 20px; }
}

/* Coke 4 — seizure / foam */
.dude.coke-seizure {
  animation: seizure-convulse 0.12s ease-in-out infinite;
}

@keyframes seizure-convulse {
  0% { transform: rotate(-8deg) translateX(-5px); }
  25% { transform: rotate(10deg) translateX(8px) translateY(-4px); }
  50% { transform: rotate(-12deg) translateX(-10px); }
  75% { transform: rotate(8deg) translateX(6px) translateY(3px); }
  100% { transform: rotate(-6deg) translateX(-4px); }
}

.dude.coke-seizure .eyelid { height: 80%; }
.dude.coke-seizure .pupil { opacity: 0; }
.dude.coke-seizure .eyeball { background: #fff; }
#mouth-foam {
  top: 195px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  width: 70px;
  height: 50px;
}

#mouth-foam.active .foam-bubble {
  animation: foam-pop 0.4s ease-out infinite alternate;
}

.foam-bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  border: 1px solid rgba(200, 220, 255, 0.8);
}

.foam-bubble.f1 { width: 18px; height: 14px; top: 0; left: 10px; }
.foam-bubble.f2 { width: 14px; height: 12px; top: 5px; left: 28px; animation-delay: 0.15s; }
.foam-bubble.f3 { width: 12px; height: 10px; top: 2px; left: 45px; animation-delay: 0.3s; }

#mouth-foam.active .foam-bubble { opacity: 1; }

.foam-drip {
  position: absolute;
  top: 18px;
  left: 25px;
  width: 20px;
  height: 0;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0 0 10px 10px;
}

#mouth-foam.active .foam-drip {
  animation: foam-drip-grow 2s ease-in forwards;
}

@keyframes foam-pop {
  from { transform: scale(0.9); }
  to { transform: scale(1.15); }
}

@keyframes foam-drip-grow {
  to { height: 30px; }
}

/* Coke source buttons */
.coke-source-btn .btn-label {
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: center;
}

.coke-source-btn {
  grid-column: span 2;
}

.action-btn[data-action="cocaine-dealer"]:hover:not(:disabled) { border-color: #cc0000; }
.action-btn[data-action="cocaine-exbf"]:hover:not(:disabled) { border-color: #888; }
.action-btn[data-action="cocaine-pink"]:hover:not(:disabled) { border-color: #ff69b4; }
.action-btn[data-action="cocaine-homie"]:hover:not(:disabled) { border-color: #fff; }
.action-btn[data-action="crack-nigga"]:hover:not(:disabled) { border-color: #ffd700; }
.action-btn[data-action="crack-babymama"]:hover:not(:disabled) { border-color: #ff69b4; }
.action-btn[data-action="crack-celly"]:hover:not(:disabled) { border-color: #6b8e5a; }
.action-btn[data-action="crack-crazywhite"]:hover:not(:disabled) { border-color: #ff0; }

/* Fentanyl — dead */
.dude.dead .face { background: #b0a090; filter: grayscale(0.7); }
.dude.dead .eyelid { height: 85%; }
.dude.dead .pupil { opacity: 0; }
.dude.dead .eyeball::before,
.dude.dead .eyeball::after {
  content: 'X';
  position: absolute;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.dude.dead .mouth .lips {
  width: 50px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #a07070;
  background: #c09090;
}
.dude.dead .tongue { display: flex; }
.dude.dead {
  transform: rotate(-5deg) translateY(10px);
}

/* DMT — body stunned */
.dude.dmt-tripping .face {
  animation: dmt-face-warp 2s ease-in-out infinite;
}
.dude.dmt-tripping .pupil {
  animation: dmt-pupil-spin 3s linear infinite;
}
.dude.dmt-tripping .eyelid { height: 45%; }

@keyframes dmt-face-warp {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(90deg); }
}

@keyframes dmt-pupil-spin {
  0% { transform: translate(-50%, -40%) scale(1.2); }
  25% { transform: translate(-30%, -50%) scale(0.8); }
  50% { transform: translate(-60%, -35%) scale(1.4); }
  75% { transform: translate(-40%, -55%) scale(0.9); }
  100% { transform: translate(-50%, -40%) scale(1.2); }
}

/* Leaning toward prop */
.dude.leaning .head {
  animation: lean-to-prop 0.8s ease-out forwards;
}

@keyframes lean-to-prop {
  0% { transform: translateX(-50%) rotate(0); }
  100% { transform: translateX(-42%) rotate(-12deg); }
}

.dude.drinking .head {
  animation: tilt-drink 1.8s ease-in-out forwards;
}

@keyframes tilt-drink {
  0% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-48%) rotate(-30deg); }
  70% { transform: translateX(-48%) rotate(-30deg); }
  100% { transform: translateX(-50%) rotate(0); }
}

/* Hennessy — mouth seals on bottle neck */
.dude.henny-drink .head {
  animation: henny-lean-in 0.8s ease-out forwards;
}

@keyframes henny-lean-in {
  0% { transform: translateX(-50%) rotate(0); }
  100% { transform: translateX(-47%) rotate(-14deg) translateY(8px); }
}

.dude.henny-drink.drinking .head {
  animation: henny-chug-head 2s ease-in-out forwards;
}

@keyframes henny-chug-head {
  0% { transform: translateX(-47%) rotate(-14deg) translateY(8px); }
  20%, 80% { transform: translateX(-44%) rotate(-22deg) translateY(16px); }
  45%, 55% { transform: translateX(-42%) rotate(-26deg) translateY(20px); }
  100% { transform: translateX(-47%) rotate(-14deg) translateY(8px); }
}

.dude.henny-drink .mouth .lips {
  width: 46px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
  background: #d4908e;
  animation: lips-seal-henny 0.5s ease-out forwards;
}

@keyframes lips-seal-henny {
  0% { width: 70px; height: 30px; border-radius: 0 0 50% 50%; }
  100% { width: 46px; height: 34px; border-radius: 50%; }
}

.dude.henny-drink.drinking .mouth .lips {
  width: 40px;
  height: 38px;
  animation: henny-lip-chug 0.35s ease-in-out infinite;
}

@keyframes henny-lip-chug {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Beer — lips seal on glass rim */
.dude.beer-drink .head {
  animation: beer-lean-in 0.8s ease-out forwards;
}

@keyframes beer-lean-in {
  0% { transform: translateX(-50%) rotate(0); }
  100% { transform: translateX(-46%) rotate(-12deg) translateY(10px); }
}

.dude.beer-drink.drinking .head {
  animation: beer-chug-head 1.4s ease-in-out forwards;
}

@keyframes beer-chug-head {
  0% { transform: translateX(-46%) rotate(-12deg) translateY(10px); }
  25%, 75% { transform: translateX(-43%) rotate(-20deg) translateY(18px); }
  50% { transform: translateX(-41%) rotate(-24deg) translateY(22px); }
  100% { transform: translateX(-46%) rotate(-12deg) translateY(10px); }
}

.dude.beer-drink .mouth .lips {
  width: 48px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
  background: #d4908e;
  animation: lips-seal-beer 0.5s ease-out forwards;
}

@keyframes lips-seal-beer {
  0% { width: 70px; height: 30px; border-radius: 0 0 50% 50%; }
  100% { width: 48px; height: 32px; border-radius: 50%; }
}

.dude.beer-drink.drinking .mouth .lips {
  width: 42px;
  height: 36px;
  animation: beer-lip-chug 0.3s ease-in-out infinite;
}

@keyframes beer-lip-chug {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.dude.inhaling .head {
  animation: inhale-head 1.5s ease-in-out;
}

@keyframes inhale-head {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  40%, 60% { transform: translateX(-45%) rotate(-8deg) translateY(4px); }
}

/* Bong rip — mouth seals on mouthpiece */
.dude.bong-rip .head {
  animation: bong-lean-in 0.9s ease-out forwards;
}

@keyframes bong-lean-in {
  0% { transform: translateX(-50%) rotate(0); }
  100% { transform: translateX(-48%) rotate(-10deg) translateY(10px); }
}

.dude.bong-rip.inhaling .head {
  animation: bong-inhale-seal 1.6s ease-in-out forwards;
}

@keyframes bong-inhale-seal {
  0% { transform: translateX(-48%) rotate(-10deg) translateY(10px); }
  30%, 70% { transform: translateX(-47%) rotate(-12deg) translateY(14px); }
  100% { transform: translateX(-48%) rotate(-10deg) translateY(10px); }
}

.dude.bong-rip .mouth .lips {
  width: 48px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
  background: #d4908e;
  animation: lips-seal-bong 0.6s ease-out forwards;
}

@keyframes lips-seal-bong {
  0% { width: 70px; height: 30px; border-radius: 0 0 50% 50%; }
  100% { width: 48px; height: 32px; border-radius: 50%; }
}

.dude.bong-rip.inhaling .eyelid { height: 25%; }

.dude.bong-chugging.inhaling .head {
  animation: bong-chug-head 2.4s ease-in-out forwards;
}

@keyframes bong-chug-head {
  0% { transform: translateX(-48%) rotate(-10deg) translateY(10px); }
  20%, 80% { transform: translateX(-46%) rotate(-14deg) translateY(18px); }
  50% { transform: translateX(-45%) rotate(-15deg) translateY(22px); }
  100% { transform: translateX(-48%) rotate(-10deg) translateY(10px); }
}

.dude.bong-chugging.inhaling .mouth .lips {
  width: 42px;
  height: 36px;
  animation: lips-chug-pulse 0.4s ease-in-out infinite;
}

@keyframes lips-chug-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Blunt — intentional fat rips */
.dude.blunt-rip .head {
  animation: blunt-lean-in 0.7s ease-out forwards;
}

@keyframes blunt-lean-in {
  0% { transform: translateX(-50%) rotate(0); }
  100% { transform: translateX(-47%) rotate(-12deg) translateY(12px); }
}

.dude.blunt-rip.inhaling .head {
  animation: blunt-fat-rip 2.4s ease-in-out forwards;
}

@keyframes blunt-fat-rip {
  0% { transform: translateX(-47%) rotate(-12deg) translateY(12px); }
  12% { transform: translateX(-46%) rotate(-14deg) translateY(16px); }
  35%, 70% { transform: translateX(-44%) rotate(-17deg) translateY(22px); }
  55% { transform: translateX(-43%) rotate(-18deg) translateY(24px); }
  100% { transform: translateX(-47%) rotate(-12deg) translateY(14px); }
}

.dude.blunt-rip .mouth .lips {
  width: 44px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
  background: #d4908e;
  animation: lips-seal-blunt 0.5s ease-out forwards;
}

@keyframes lips-seal-blunt {
  0% { width: 70px; height: 30px; border-radius: 0 0 50% 50%; }
  100% { width: 44px; height: 30px; border-radius: 50%; }
}

.dude.blunt-rip.inhaling .mouth .lips {
  width: 38px;
  height: 34px;
  animation: blunt-lip-suck 0.35s ease-in-out infinite;
}

@keyframes blunt-lip-suck {
  0%, 100% { transform: scale(1); width: 38px; height: 34px; }
  50% { transform: scale(1.06); width: 36px; height: 36px; }
}

.dude.blunt-rip.inhaling .cheek {
  background: rgba(255, 120, 120, 0.55);
  transform: scale(1.35);
  transition: all 0.3s;
}

.dude.blunt-rip.inhaling .eyelid { height: 20%; }

.dude.blunt-exhale .head {
  animation: blunt-exhale-push 1.2s ease-out forwards;
}

@keyframes blunt-exhale-push {
  0% { transform: translateX(-47%) rotate(-12deg) translateY(14px); }
  30% { transform: translateX(-49%) rotate(-6deg) translateY(8px); }
  100% { transform: translateX(-50%) rotate(0) translateY(0); }
}

.dude.blunt-exhale .mouth .lips {
  width: 55px;
  height: 28px;
  border-radius: 50%;
  animation: blunt-o-face 0.8s ease-out forwards;
}

@keyframes blunt-o-face {
  0% { width: 38px; height: 34px; }
  40% { width: 58px; height: 42px; }
  100% { width: 52px; height: 32px; }
}

/* Smoke ring */
#smoke-ring {
  top: 188px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  width: 120px;
  height: 120px;
}

#smoke-ring.active .smoke-ring {
  animation: smoke-ring-blow 2.2s ease-out forwards;
}

#smoke-ring.active .smoke-ring.ring-2 {
  animation: smoke-ring-blow 2.2s ease-out 0.15s forwards;
}

.smoke-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 7px solid rgba(195,195,195,0.85);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 12px rgba(180,180,180,0.6),
    inset 0 0 8px rgba(220,220,220,0.4);
  opacity: 0;
}

.smoke-ring.ring-2 {
  border-width: 5px;
  border-color: rgba(170,170,170,0.6);
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}

@keyframes smoke-ring-blow {
  0% {
    transform: scale(0.25);
    opacity: 0;
    border-width: 12px;
  }
  15% {
    transform: scale(0.7);
    opacity: 0.95;
    border-width: 9px;
  }
  45% {
    transform: scale(1.1) translateY(-18px);
    opacity: 0.8;
    border-width: 6px;
  }
  100% {
    transform: scale(2.2) translateY(-75px);
    opacity: 0;
    border-width: 2px;
  }
}

/* ========== EFFECT LAYERS ========== */
.effect-layer {
  position: absolute;
  pointer-events: none;
}

.hidden { display: none !important; }

/* Smoke puffs */
.smoke-puff {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(200,200,200,0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: smoke-rise 1s ease-out forwards;
  opacity: 0.8;
}

.smoke-puff.blunt-cloud {
  width: 58px;
  height: 58px;
  background: radial-gradient(circle, rgba(220,220,220,0.95) 0%, rgba(170,170,170,0.45) 42%, transparent 72%);
  animation: blunt-cloud-rise 1.6s ease-out forwards;
  opacity: 0.92;
}

@keyframes blunt-cloud-rise {
  0% { transform: translateY(0) scale(0.55); opacity: 0.95; }
  40% { transform: translateY(-35px) scale(1.15); opacity: 0.8; }
  100% { transform: translateY(-110px) scale(1.9); opacity: 0; }
}

@keyframes smoke-rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0.8; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

/* Puke */
#puke-stream {
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.puke-chunk {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #7cb342;
  border-radius: 50% 50% 50% 20%;
  animation: puke-fly 0.8s ease-out forwards;
}

.puke-chunk.c1 { left: -10px; animation-delay: 0s; }
.puke-chunk.c2 { left: 10px; animation-delay: 0.1s; background: #8bc34a; }
.puke-chunk.c3 { left: 0; animation-delay: 0.2s; background: #9ccc65; width: 15px; height: 15px; }

@keyframes puke-fly {
  0% { transform: translateY(0) scale(0); opacity: 1; }
  50% { transform: translateY(60px) scale(1.2); }
  100% { transform: translateY(120px) scale(0.8); opacity: 0.6; }
}

.puke-splash {
  position: absolute;
  top: 100px;
  left: -30px;
  width: 80px;
  height: 30px;
  background: #7cb342;
  border-radius: 50%;
  opacity: 0;
  animation: splash 0.5s ease-out 0.6s forwards;
}

@keyframes splash {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0.5; }
}

/* Burp bubble */
#burp-bubble {
  top: 120px;
  right: -20px;
  z-index: 10;
}

#burp-bubble span {
  font-family: 'Bangers', cursive;
  font-size: 2.5rem;
  color: var(--accent-yellow);
  text-shadow: 2px 2px 0 #333;
  animation: burp-pop 1s ease-out forwards;
  display: inline-block;
}

@keyframes burp-pop {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  30% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  70% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(0.8) translateY(-30px); opacity: 0; }
}

/* Giggle notes */
#giggle-notes .note {
  position: absolute;
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: var(--accent-pink);
  animation: note-float 1.5s ease-out forwards;
}

.note.n1 { left: -60px; top: 80px; animation-delay: 0s; }
.note.n2 { right: -50px; top: 60px; animation-delay: 0.3s; color: var(--accent-green); }
.note.n3 { left: -30px; top: 140px; animation-delay: 0.6s; color: var(--accent-yellow); }

@keyframes note-float {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

/* Soul clone — DMT outer body */
.soul-clone {
  position: absolute;
  top: 30px;
  right: -30px;
  width: 140px;
  height: 160px;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
}

.soul-clone.active {
  opacity: 1;
  animation: soul-exit 2.5s ease-out forwards;
}

@keyframes soul-exit {
  0% {
    top: 80px;
    right: 90px;
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    top: 20px;
    right: -60px;
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    top: 10px;
    right: -90px;
    opacity: 0.75;
    transform: scale(1.05);
  }
}

.clone-aura {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(150,100,255,0.35), transparent 70%);
  border-radius: 50%;
  animation: aura-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes aura-pulse {
  from { transform: scale(0.9); opacity: 0.5; }
  to { transform: scale(1.1); opacity: 0.9; }
}

.clone-head {
  position: relative;
  width: 100px;
  height: 110px;
  margin: 20px auto 0;
}

.clone-face {
  position: absolute;
  inset: 15px 5px 5px;
  background: rgba(244, 200, 154, 0.45);
  border: 3px solid rgba(180, 150, 255, 0.6);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 0 20px rgba(150,100,255,0.5), inset 0 0 15px rgba(255,255,255,0.2);
}

.clone-eye {
  position: absolute;
  top: 35px;
  width: 28px;
  height: 22px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  border: 2px solid rgba(100,80,200,0.5);
  overflow: hidden;
}

.clone-eye.left { left: 12px; }
.clone-eye.right { right: 12px; }

.clone-pupil {
  position: absolute;
  width: 12px;
  height: 14px;
  background: rgba(74,55,40,0.8);
  border-radius: 50%;
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
}

.clone-mouth {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  border: 2px solid rgba(200,120,120,0.6);
  border-top: none;
  border-radius: 0 0 50% 50%;
}

/* Per-character clone kits — only active character visible */
.soul-clone .clone-kit {
  display: none;
}

.soul-clone.clone-char-beerface .clone-kit-beerface,
.soul-clone.clone-char-black-beerface .clone-kit-black,
.soul-clone.clone-char-butterface .clone-kit-butter,
.soul-clone.clone-char-cocoa-butterface .clone-kit-cocoa {
  display: block;
}

/* Beerface soul clone */
.soul-clone.clone-char-beerface .clone-face {
  background: rgba(237, 196, 168, 0.48);
  border-color: rgba(255, 105, 180, 0.55);
  box-shadow:
    0 0 20px rgba(255, 105, 180, 0.35),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.soul-clone.clone-char-beerface .clone-aura {
  background: radial-gradient(circle, rgba(255, 105, 180, 0.32), transparent 70%);
}

.clone-cap {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  width: 88px;
  height: 30px;
  background: radial-gradient(ellipse 100% 88% at 50% 12%, rgba(26, 61, 106, 0.62), rgba(12, 35, 64, 0.55) 52%, rgba(6, 22, 40, 0.5));
  border-radius: 48% 52% 14% 14%;
  border: 2px solid rgba(255, 105, 180, 0.38);
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.25);
  z-index: 2;
}

.clone-cap::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 8%;
  width: 48px;
  height: 10px;
  background: linear-gradient(180deg, rgba(12, 35, 64, 0.55), rgba(8, 26, 48, 0.45));
  border-radius: 3px 50px 45px 3px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  transform: rotate(-4deg);
}

.clone-cap-b {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bangers', cursive;
  font-size: 1.15rem;
  color: rgba(255, 105, 180, 0.92);
  text-shadow:
    0 0 8px rgba(255, 105, 180, 0.85),
    1px 1px 0 rgba(0, 0, 0, 0.3);
  line-height: 1;
}

.clone-cheek-flush {
  position: absolute;
  top: 50px;
  width: 14px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(255, 120, 140, 0.45), transparent 70%);
  border-radius: 50%;
}

.clone-cheek-flush.cf-l { left: 2px; }
.clone-cheek-flush.cf-r { right: 2px; }

.soul-clone.clone-char-beerface .clone-mouth {
  border-color: rgba(232, 88, 136, 0.65);
  height: 9px;
}

/* Black Beerface soul clone */
.soul-clone.clone-char-black-beerface .clone-face {
  background: rgba(107, 74, 53, 0.52);
  border-color: rgba(80, 55, 40, 0.65);
  box-shadow:
    0 0 18px rgba(60, 40, 25, 0.45),
    inset 0 0 12px rgba(0, 0, 0, 0.15);
}

.soul-clone.clone-char-black-beerface .clone-aura {
  background: radial-gradient(circle, rgba(80, 50, 30, 0.38), transparent 70%);
}

.soul-clone.clone-char-black-beerface .clone-pupil {
  background: rgba(18, 12, 8, 0.9);
}

.soul-clone.clone-char-black-beerface .clone-mouth {
  border-color: rgba(140, 90, 70, 0.7);
}

.clone-afro {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 40px;
  background: radial-gradient(ellipse 100% 92% at 50% 38%, rgba(42, 24, 16, 0.72), rgba(26, 15, 8, 0.78) 58%, rgba(18, 10, 6, 0.8));
  border-radius: 46% 46% 42% 42%;
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.38),
    inset 6px 0 6px rgba(255, 255, 255, 0.03),
    0 3px 6px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.clone-afro::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 28px;
  background: radial-gradient(ellipse 95% 90% at 50% 42%, rgba(36, 22, 16, 0.75), transparent 72%);
  border-radius: 50%;
}

.clone-teardrop {
  position: absolute;
  top: 52px;
  left: 15px;
  width: 5px;
  height: 8px;
  background: rgba(18, 8, 8, 0.88);
  border-radius: 50% 50% 50% 50% / 35% 35% 75% 75%;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  transform: rotate(-10deg);
  z-index: 3;
}

.clone-teardrop::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 1px;
  width: 3px;
  height: 3px;
  background: rgba(10, 6, 6, 0.85);
  border-radius: 50%;
}

.clone-goatee {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 18px;
  z-index: 3;
}

.clone-goatee::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 7px;
  background: linear-gradient(180deg, rgba(26, 16, 8, 0.85), rgba(18, 10, 6, 0.8));
  border-radius: 0 0 40% 40%;
  box-shadow: -7px 1px 0 -1px rgba(26, 16, 8, 0.85), 7px 1px 0 -1px rgba(26, 16, 8, 0.85);
}

.clone-goatee::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 10px;
  background: radial-gradient(ellipse 80% 90% at 50% 20%, rgba(26, 16, 8, 0.88), rgba(14, 8, 6, 0.85) 75%);
  border-radius: 40% 40% 55% 55%;
}

/* Butterface soul clone */
.soul-clone.clone-char-butterface .clone-face {
  background: rgba(232, 184, 160, 0.5);
  border-color: rgba(255, 140, 180, 0.55);
  box-shadow:
    0 0 20px rgba(255, 140, 180, 0.35),
    inset 0 0 14px rgba(255, 220, 235, 0.2);
}

.soul-clone.clone-char-butterface .clone-aura {
  background: radial-gradient(circle, rgba(255, 150, 190, 0.34), transparent 70%);
}

.soul-clone.clone-char-butterface .clone-eye {
  background: rgba(255, 248, 252, 0.68);
  border-color: rgba(200, 120, 160, 0.45);
}

.soul-clone.clone-char-butterface .clone-mouth {
  width: 36px;
  height: 10px;
  border-color: rgba(232, 88, 136, 0.72);
  background: linear-gradient(180deg, rgba(255, 138, 176, 0.35), rgba(232, 88, 136, 0.25));
}

.clone-bf-hair {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 44px;
  background: linear-gradient(180deg, rgba(232, 200, 120, 0.72) 0%, rgba(212, 168, 90, 0.68) 45%, rgba(200, 152, 72, 0.62) 100%);
  border-radius: 50% 50% 28% 28%;
  box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.clone-bf-hair::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 20px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(232, 200, 120, 0.65), transparent 72%);
  border-radius: 50% 50% 0 0;
}

.clone-bf-hair::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 34px;
  background: linear-gradient(180deg, rgba(212, 168, 90, 0.68), rgba(192, 144, 64, 0.58));
  border-radius: 0 0 40% 40%;
}

.clone-bf-clip {
  position: absolute;
  top: -6px;
  right: 10px;
  width: 10px;
  height: 6px;
  background: rgba(255, 105, 180, 0.85);
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(255, 105, 180, 0.55);
  z-index: 4;
}

.clone-bf-blush {
  position: absolute;
  top: 48px;
  width: 14px;
  height: 9px;
  background: radial-gradient(ellipse, rgba(255, 120, 140, 0.55), transparent 70%);
  border-radius: 50%;
}

.clone-bf-blush.bf-l { left: 4px; }
.clone-bf-blush.bf-r { right: 4px; }

.clone-bf-lash {
  position: absolute;
  top: 34px;
  width: 22px;
  height: 8px;
  border-top: 2px solid rgba(26, 16, 24, 0.75);
  border-radius: 50% 50% 0 0;
}

.clone-bf-lash.lash-l {
  left: 12px;
  transform: rotate(-5deg);
}

.clone-bf-lash.lash-r {
  right: 12px;
  transform: rotate(5deg);
}

/* Cocoa Butterface soul clone */
.soul-clone.clone-char-cocoa-butterface .clone-face {
  background: rgba(74, 52, 40, 0.52);
  border-color: rgba(107, 33, 168, 0.55);
  box-shadow:
    0 0 20px rgba(107, 33, 168, 0.35),
    inset 0 0 14px rgba(0, 0, 0, 0.12);
}

.soul-clone.clone-char-cocoa-butterface .clone-aura {
  background: radial-gradient(circle, rgba(107, 33, 168, 0.32), transparent 70%);
}

.soul-clone.clone-char-cocoa-butterface .clone-mouth {
  border-color: rgba(168, 64, 104, 0.72);
  height: 10px;
}

.clone-cbf-wig {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 38px;
  background: linear-gradient(180deg, rgba(42, 24, 16, 0.75), rgba(26, 16, 8, 0.8));
  border-radius: 48% 48% 28% 28%;
  z-index: 1;
}

.clone-cbf-mascara {
  position: absolute;
  top: 34px;
  width: 24px;
  height: 10px;
  border-top: 3px solid rgba(107, 33, 168, 0.85);
  border-radius: 50% 50% 0 0;
}

.clone-cbf-mascara.lash-l { left: 10px; transform: rotate(-4deg); }
.clone-cbf-mascara.lash-r { right: 10px; transform: rotate(4deg); }

.clone-cbf-earring {
  position: absolute;
  top: 46px;
  width: 8px;
  height: 12px;
}

.clone-cbf-earring.er-l { left: -2px; }
.clone-cbf-earring.er-r { right: -2px; }

.clone-cbf-earring::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border: 1px solid #d4af37;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe566, #daa520);
}

.clone-cbf-earring::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #fff, #88c8ff);
}

.clone-cbf-earring.broken::after {
  opacity: 0;
}

.clone-tether {
  position: absolute;
  bottom: 40px;
  left: -40px;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(180,130,255,0.6), rgba(180,130,255,0.3));
  border-radius: 2px;
  animation: tether-flicker 1s ease-in-out infinite alternate;
}

@keyframes tether-flicker {
  from { opacity: 0.4; width: 70px; }
  to { opacity: 0.9; width: 90px; }
}

/* DMT warp background */
.dmt-warp {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff00ff22, #00ffff22, #ffff0022, #ff00ff22);
  animation: warp-spin 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.dmt-warp.active {
  display: block;
}

@keyframes warp-spin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* Death overlay */
#death-overlay {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 20;
}

.rip-text {
  font-family: 'Bangers', cursive;
  font-size: 3.5rem;
  color: #ff2222;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255,0,0,0.6);
  display: block;
  animation: rip-fade 2s ease-out forwards;
}

@keyframes rip-fade {
  0% { transform: scale(0); opacity: 0; }
  30% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.flatline {
  width: 200px;
  height: 3px;
  background: #00ff00;
  margin: 10px auto;
  box-shadow: 0 0 10px #00ff00;
  animation: flatline-beep 1.2s ease-in-out infinite;
}

@keyframes flatline-beep {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Heroin modal */
.heroin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.heroin-modal-box {
  background: linear-gradient(180deg, #2d1b69, #1a0a2e);
  border: 4px solid var(--accent-yellow);
  border-radius: 20px;
  padding: 32px 36px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255,215,0,0.3);
  animation: modal-pop 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}

@keyframes modal-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.heroin-msg {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.heroin-close-btn {
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  padding: 12px 28px;
  background: var(--accent-orange);
  color: #fff;
  border: 3px solid var(--accent-yellow);
  border-radius: 30px;
  cursor: pointer;
  letter-spacing: 1px;
}

.heroin-close-btn:hover {
  background: #ff8533;
}

/* Knockout stars */
#stars-knockout .ko-star {
  position: absolute;
  font-size: 2rem;
  color: var(--accent-yellow);
  animation: star-orbit 2s linear infinite;
}

.ko-star.s1 { top: 20px; left: 60px; animation-delay: 0s; }
.ko-star.s2 { top: 10px; right: 50px; animation-delay: 0.3s; font-size: 1.5rem; }
.ko-star.s3 { top: 50px; left: 100px; animation-delay: 0.6s; font-size: 1.8rem; }

@keyframes star-orbit {
  0% { transform: rotate(0deg) translateX(30px) rotate(0deg); opacity: 1; }
  100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); opacity: 0.6; }
}

/* Status text */
.status-text {
  font-family: 'Bangers', cursive;
  font-size: 1.6rem;
  color: var(--accent-yellow);
  text-align: center;
  margin-top: 16px;
  min-height: 2em;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 215, 0, 0.2);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(255, 215, 0, 0.25);
  transition: color 0.3s, border-color 0.3s;
}

/* Action panel wrapper */
.action-panel-wrap {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 620px;
  flex-shrink: 0;
  padding: 20px 16px 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(26, 10, 46, 0.55), rgba(10, 10, 26, 0.35));
  border: 2px solid rgba(255, 215, 0, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.panel-header-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--accent-yellow);
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #1a237e, 0 0 20px rgba(255, 215, 0, 0.35);
}

.panel-header-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}

.scroll-hint {
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  color: var(--accent-yellow);
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.85;
  animation: scroll-bounce 1.5s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* Action Panel */
.action-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
  padding: 4px 4px 12px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #2d1b69, #1a0a2e);
  border: 3px solid var(--accent-yellow);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: 'Rubik', sans-serif;
  box-shadow: 0 4px 0 #0a0520;
}

.action-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #4a2d8a, #2d1b69);
  box-shadow: 0 7px 0 #0a0520, 0 0 20px rgba(255,215,0,0.3);
}

.action-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0a0520;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  font-size: 2rem;
}

.btn-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-btn[data-action="bong"]:hover:not(:disabled) { border-color: var(--accent-green); }
.action-btn[data-action="bubbler"]:hover:not(:disabled) { border-color: var(--accent-pink); }
.action-btn[data-action="blunt"]:hover:not(:disabled) { border-color: #aaa; }
.action-btn[data-action="hennesy"]:hover:not(:disabled) { border-color: #c9a227; }
.action-btn[data-action="beer"]:hover:not(:disabled) { border-color: var(--accent-orange); }
.action-btn[data-action="dmt"]:hover:not(:disabled) { border-color: #d78aff; }

.action-btn[data-action="fentanyl"]:hover:not(:disabled) { border-color: #ff4444; }
.action-btn[data-action="heroin"]:hover:not(:disabled) { border-color: #888; }
.action-btn[data-action="jungle"]:hover:not(:disabled) { border-color: #39ff14; }

/* Footer */
.game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 920px;
  padding: 20px 16px;
  margin-top: 8px;
  border-radius: 16px;
  background: rgba(10, 10, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  width: 72px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 0 12px rgba(138, 43, 226, 0.35);
}

.mute-btn {
  background: none;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.mute-btn:hover {
  border-color: var(--accent-yellow);
}

.mute-btn.muted {
  opacity: 0.5;
}

/* ========== JUNGLE JUICE ========== */
.jungle-scene {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.jungle-scene.active {
  display: block;
}

.jungle-blender {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  z-index: 16;
  opacity: 0;
  animation: blender-appear 0.6s ease-out forwards;
}

@keyframes blender-appear {
  from { opacity: 0; transform: translateX(-50%) scale(0.5); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.blender-lid {
  width: 90px;
  height: 18px;
  background: linear-gradient(180deg, #444, #222);
  border-radius: 8px 8px 2px 2px;
  margin: 0 auto;
  border: 3px solid #666;
  transition: transform 0.4s;
  z-index: 5;
  position: relative;
}

.jungle-blender.lid-on .blender-lid {
  transform: translateY(0);
}

.jungle-blender.lid-off .blender-lid {
  transform: translateY(-30px) rotate(-20deg);
}

.blender-jar {
  position: relative;
  width: 100px;
  height: 110px;
  margin: 0 auto;
  background: linear-gradient(90deg, rgba(200,220,255,0.35), rgba(240,250,255,0.55));
  border: 4px solid rgba(255,255,255,0.45);
  border-radius: 8px 8px 16px 16px;
  overflow: hidden;
}

.blender-stuff {
  position: absolute;
  inset: 10px 8px 20px;
  z-index: 2;
}

.blender-chunk {
  position: absolute;
  border-radius: 4px;
  animation: chunk-settle 0.4s ease-out forwards;
}

@keyframes chunk-settle {
  from { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  to { opacity: 1; }
}

.blender-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, #7b4dff, #39ff14, #ff6b35, #00ffff);
  opacity: 0.75;
  transition: height 0.5s;
  z-index: 1;
}

.jungle-blender.blending .blender-liquid {
  height: 85%;
  animation: liquid-swirl 0.3s linear infinite;
}

@keyframes liquid-swirl {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(120deg); }
}

.blender-vortex {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
  z-index: 3;
}

.jungle-blender.blending .blender-vortex {
  opacity: 1;
  animation: vortex-spin 0.15s linear infinite;
}

.jungle-blender.blending {
  animation: blender-shake 0.1s ease-in-out infinite;
}

@keyframes vortex-spin {
  to { transform: rotate(360deg); }
}

@keyframes blender-shake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  50% { transform: translateX(calc(-50% + 3px)) rotate(1deg); }
}

.blender-base {
  width: 110px;
  height: 45px;
  background: linear-gradient(180deg, #333, #111);
  border-radius: 8px;
  margin: 4px auto 0;
  border: 3px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jungle-blender.blending .bb-on {
  color: #39ff14;
  text-shadow: 0 0 8px #39ff14;
  animation: blink-on 0.3s ease-in-out infinite alternate;
}

@keyframes blink-on {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

.bb-on {
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  color: #666;
  letter-spacing: 2px;
}

.blender-tag {
  font-family: 'Bangers', cursive;
  font-size: 0.7rem;
  color: var(--accent-green);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 1px;
}

/* Flying ingredients */
.flying-ingredient {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flying-ingredient.drop {
  animation: ing-drop 0.9s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes ing-drop {
  0% { top: -60px; opacity: 0; transform: translateX(-50%) rotate(0deg) scale(0.5); }
  20% { opacity: 1; transform: translateX(-50%) rotate(10deg) scale(1.1); }
  80% { top: 200px; transform: translateX(-50%) rotate(180deg) scale(1); }
  100% { top: 210px; opacity: 0; transform: translateX(-50%) rotate(200deg) scale(0.3); }
}

/* Ingredient visuals */
.ing-visual { width: 100%; height: 100%; position: relative; }

.ing-pill .ing-visual {
  width: 36px; height: 16px;
  background: linear-gradient(90deg, #ff4444 50%, #fff 50%);
  border-radius: 8px;
  border: 2px solid #cc0000;
}

.ing-codeine .ing-visual {
  width: 28px; height: 55px;
  background: linear-gradient(90deg, #6a0dad, #9b30ff, #6a0dad);
  border-radius: 4px 4px 8px 8px;
  border: 2px solid #4a0080;
}
.ing-codeine .ing-visual::after {
  content: 'LEAN';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 0.45rem;
  color: #fff;
  font-family: 'Bangers', cursive;
}

.ing-powder .ing-visual {
  width: 40px; height: 30px;
  background: #ddd;
  border: 2px solid #aaa;
  border-radius: 4px;
}
.ing-powder .ing-visual::before {
  content: '';
  position: absolute;
  top: 5px; left: 8px;
  width: 24px; height: 3px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 8px 0 #fff, 0 16px 0 #fff;
}

.ing-bark .ing-visual {
  width: 45px; height: 25px;
  background: linear-gradient(180deg, #8b6914, #5c4033);
  border-radius: 20% 40% 30% 50%;
  border: 2px solid #3d2817;
}

.ing-clock .ing-visual {
  width: 44px; height: 44px;
  background: #fff;
  border: 4px solid #333;
  border-radius: 50%;
}
.ing-clock .ing-visual::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 14px;
  background: #333;
  transform: translate(-50%, -100%);
}
.ing-clock .ing-visual::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 3px;
  background: #333;
  transform: translate(0, -50%);
}

.ing-hotsauce .ing-visual {
  width: 22px; height: 50px;
  background: linear-gradient(180deg, #cc0000, #ff3300);
  border-radius: 4px 4px 8px 8px;
  border: 2px solid #990000;
}
.ing-hotsauce .ing-visual::before {
  content: '🌶️';
  position: absolute;
  font-size: 0.6rem;
  top: 30%; left: 50%;
  transform: translateX(-50%);
}

.ing-keys .ing-visual {
  width: 45px; height: 20px;
}
.ing-keys .ing-visual::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: #ffd700;
  border-radius: 50%;
  border: 2px solid #b8860b;
  left: 0; top: 3px;
  box-shadow: 22px 0 0 -2px #ffd700, 22px 0 0 0 #b8860b;
}

.ing-avocado .ing-visual {
  width: 36px; height: 44px;
  background: radial-gradient(ellipse, #c5e384 30%, #6b8e23 70%);
  border-radius: 50% 50% 45% 45%;
}
.ing-avocado .ing-visual::after {
  content: '';
  position: absolute;
  top: 40%; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 20px;
  background: #c5e384;
  border-radius: 50%;
}

.ing-lighter .ing-visual {
  width: 24px; height: 44px;
  background: linear-gradient(90deg, #ff0000, #cc0000);
  border-radius: 4px;
  border: 2px solid #990000;
}
.ing-lighter .ing-visual::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 8px;
  background: #333;
  border-radius: 3px 3px 0 0;
}

.ing-benadryl .ing-visual {
  width: 42px; height: 32px;
  background: linear-gradient(180deg, #ffb6c1, #ff69b4);
  border: 2px solid #cc4488;
  border-radius: 4px;
}
.ing-benadryl .ing-visual::after {
  content: 'BENNY';
  position: absolute;
  font-size: 0.4rem;
  font-family: 'Bangers', cursive;
  color: #fff;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Jungle cup */
.jungle-cup {
  position: absolute;
  bottom: 155px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 60px;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.7));
  border: 3px solid rgba(255,255,255,0.6);
  border-radius: 4px 4px 12px 12px;
  z-index: 22;
  opacity: 0;
}

.jungle-cup.show {
  animation: cup-appear 0.5s ease-out forwards;
}

.jungle-cup.drink-raise {
  animation: cup-to-mouth 1s ease-in-out forwards;
}

@keyframes cup-appear {
  to { opacity: 1; bottom: 120px; }
}

@keyframes cup-to-mouth {
  0% { bottom: 120px; transform: translateX(-50%) rotate(0); opacity: 1; }
  100% { bottom: 165px; transform: translateX(-35%) rotate(-40deg); opacity: 1; }
}

.cup-liquid {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  height: 80%;
  background: linear-gradient(180deg, #7b4dff, #39ff14, #ff00ff);
  border-radius: 0 0 8px 8px;
  animation: cup-liquid-swirl 1s linear infinite;
}

@keyframes cup-liquid-swirl {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
}

.cup-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.55rem;
  color: var(--accent-green);
  white-space: nowrap;
}

/* Dude frozen & sucked */
.dude.frozen {
  animation: none !important;
  filter: saturate(0.3) brightness(1.2);
  transform: scale(1);
}

.dude.frozen .head,
.dude.frozen .eye,
.dude.frozen .pupil {
  animation: none !important;
}

.dude.frozen .pupil {
  transform: translate(-50%, -50%) scale(1.5) !important;
  background: #000;
}

.dude.sucked {
  animation: get-sucked 0.45s ease-in forwards !important;
  transform-origin: center center;
}

@keyframes get-sucked {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.3) rotate(360deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(1080deg); opacity: 0; }
}

.dude-container.suck-mode {
  animation: container-suck 0.5s ease-in forwards;
}

@keyframes container-suck {
  0% { transform: scale(1); }
  100% { transform: scale(0.95); }
}

/* Black hole */
.black-hole {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300px;
  height: 300px;
  z-index: 200;
  pointer-events: none;
}

.black-hole.active {
  animation: bh-appear-suck 0.6s ease-in forwards;
}

@keyframes bh-appear-suck {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.bh-core {
  position: absolute;
  inset: 30%;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 60px 30px #000, inset 0 0 40px #1a0030;
  z-index: 3;
}

.bh-ring {
  position: absolute;
  inset: 5%;
  border: 4px solid transparent;
  border-top-color: #ff6b35;
  border-right-color: #7b4dff;
  border-bottom-color: #39ff14;
  border-radius: 50%;
  animation: bh-ring-spin 0.4s linear infinite;
  z-index: 2;
}

@keyframes bh-ring-spin {
  to { transform: rotate(360deg); }
}

.bh-accretion {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, transparent 40%, rgba(123,77,255,0.4) 55%, transparent 70%);
  border-radius: 50%;
  animation: bh-pulse 0.3s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes bh-pulse {
  from { transform: scale(0.9); opacity: 0.6; }
  to { transform: scale(1.1); opacity: 1; }
}

.bh-spiral {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.15), transparent, rgba(255,107,53,0.2), transparent);
  border-radius: 50%;
  animation: bh-spiral-spin 0.2s linear infinite;
  z-index: 0;
}

@keyframes bh-spiral-spin {
  to { transform: rotate(-360deg); }
}

.action-btn.jungle-btn {
  border-color: #7b4dff;
  background: linear-gradient(180deg, #4a148c, #1a0a2e);
}

.action-btn.jungle-btn:hover:not(:disabled) {
  border-color: #39ff14;
  box-shadow: 0 7px 0 #0a0520, 0 0 25px rgba(123,77,255,0.5);
}

#dude-container.jungle-active #dude {
  margin-top: 20px;
}

#dude-container.jungle-active .jungle-scene {
  display: block;
}

/* ========== MUSHROOM SCENE ========== */
.mushroom-scene {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  overflow: hidden;
}

.mushroom-scene.active {
  display: block;
}

#dude-container.mushroom-active #dude {
  margin-top: 10px;
  z-index: 6;
}

/* Black Beerface — donkey vendor mushroom path */
.mushroom-scene.black-shroom-path .shroom-cow,
.mushroom-scene.black-shroom-path #pasture-poop-spot {
  display: none !important;
}

.mushroom-scene.black-shroom-path .pasture-hill {
  background: linear-gradient(180deg, #d4b878 0%, #b8924a 50%, #8b6830 100%);
}

.mushroom-scene.black-shroom-path .grass-blade {
  background: linear-gradient(180deg, #c9a85a, #9a7840);
}

/* Butterface — influencer shroom delivery path */
.mushroom-scene.butter-shroom-path .shroom-cow,
.mushroom-scene.butter-shroom-path #pasture-poop-spot,
.mushroom-scene.butter-shroom-path .shroom-donkey-vendor,
.mushroom-scene.butter-shroom-path .shroom-slavery-vision,
.mushroom-scene.butter-shroom-path .mush-chain-overlay {
  display: none !important;
}

.mushroom-scene.butter-shroom-path .pasture-hill {
  background: linear-gradient(180deg, #e8d0f0 0%, #d8b8e8 50%, #c8a0d8 100%);
}

.shroom-phone-dm {
  position: absolute;
  top: 8%;
  right: -120px;
  width: 130px;
  z-index: 8;
  opacity: 0;
}

.shroom-phone-dm.active {
  opacity: 1;
}

.shroom-phone-dm.slide-in {
  animation: phone-dm-slide 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes phone-dm-slide {
  0% { right: -120px; opacity: 0; }
  100% { right: 8%; opacity: 1; }
}

.phone-frame {
  background: #1a1020;
  border: 3px solid #ff69b4;
  border-radius: 14px;
  padding: 10px 8px;
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
}

.phone-notch {
  width: 40px;
  height: 5px;
  background: #333;
  border-radius: 3px;
  margin: 0 auto 6px;
}

.dm-header {
  font-size: 0.55rem;
  color: #ff69b4;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.dm-bubble {
  font-size: 0.5rem;
  padding: 5px 7px;
  border-radius: 8px;
  margin-bottom: 5px;
  max-width: 95%;
  line-height: 1.3;
}

.dm-bubble.dm-in {
  background: #3a2848;
  color: #ffb6c1;
  margin-right: auto;
}

.dm-bubble.dm-out {
  background: #ff69b4;
  color: #fff;
  margin-left: auto;
  text-align: right;
}

.shroom-delivery-bag {
  position: absolute;
  bottom: 40px;
  left: 115%;
  width: 100px;
  height: 90px;
  z-index: 7;
  opacity: 0;
}

.shroom-delivery-bag.active {
  opacity: 1;
}

.shroom-delivery-bag.drop-in {
  animation: delivery-drop-in 1.4s cubic-bezier(0.3, 0.9, 0.4, 1) forwards;
}

@keyframes delivery-drop-in {
  0% { left: 115%; transform: translateY(-20px); opacity: 0; }
  70% { left: 42%; transform: translateY(4px); opacity: 1; }
  100% { left: 44%; transform: translateY(0); opacity: 1; }
}

.delivery-bag-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fff8f0, #f0e0d0);
  border: 3px solid #ff69b4;
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.delivery-logo {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.55rem;
  color: #ff69b4;
  letter-spacing: 1px;
  white-space: nowrap;
}

.delivery-gummies {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}

.gummy {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #ff69b4, #c84888);
  border-radius: 40%;
}

.shroom-cancel-vision {
  position: absolute;
  inset: 0;
  z-index: 14;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.shroom-cancel-vision.active {
  opacity: 1;
  animation: cancel-vision-enter 1.2s ease-out forwards;
}

@keyframes cancel-vision-enter {
  0% { opacity: 0; transform: scale(1.1); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.cancel-screen-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a0820, #3a1848 50%, #2a1030);
}

.cancel-phone-frame {
  position: absolute;
  inset: 12% 10%;
  border: 4px solid #ff69b4;
  border-radius: 12px;
  background: rgba(20, 10, 30, 0.85);
  overflow: hidden;
}

.live-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  background: #ff0000;
  color: #fff;
  font-size: 0.55rem;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  animation: live-blink 1s step-end infinite;
}

@keyframes live-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.5; }
}

.cancel-comment {
  position: absolute;
  left: 10px;
  right: 10px;
  font-size: 0.55rem;
  color: #ffb6c1;
  background: rgba(255, 105, 180, 0.15);
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  animation: comment-scroll 2.5s ease-out forwards;
}

.cancel-comment.c1 { top: 28%; animation-delay: 0.2s; }
.cancel-comment.c2 { top: 38%; animation-delay: 0.6s; }
.cancel-comment.c3 { top: 48%; animation-delay: 1s; color: #ff69b4; font-weight: bold; }
.cancel-comment.c4 { top: 58%; animation-delay: 1.4s; }
.cancel-comment.c5 { top: 68%; animation-delay: 1.8s; }

@keyframes comment-scroll {
  0% { opacity: 0; transform: translateX(30px); }
  20% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0.85; transform: translateX(0); }
}

.cancel-viewers {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.cancel-caption {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: #ffb6c1;
  text-shadow: 0 0 12px rgba(255, 105, 180, 0.6);
  white-space: nowrap;
  z-index: 5;
}

.shroom-cancel-vision.hauling .cancel-phone-frame {
  animation: cancel-phone-shrink 3.5s ease-in forwards;
}

@keyframes cancel-phone-shrink {
  0% { transform: scale(1); }
  100% { transform: scale(0.15) translateY(80px); opacity: 0.3; }
}

.mush-phone-overlay {
  position: absolute;
  inset: 0;
  z-index: 19;
  opacity: 0;
  pointer-events: none;
}

.mush-phone-overlay.active {
  opacity: 1;
}

.phone-suck-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 4px solid #ff69b4;
  border-radius: 50%;
  opacity: 0;
}

.mush-phone-overlay.haul .phone-suck-ring {
  animation: phone-suck-ring 1.2s ease-out infinite;
}

@keyframes phone-suck-ring {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.phone-pull-beam {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 0;
  background: linear-gradient(180deg, rgba(255, 105, 180, 0.6), transparent);
  opacity: 0;
}

.mush-phone-overlay.haul .phone-pull-beam {
  animation: phone-pull-beam 3.5s ease-in forwards;
}

@keyframes phone-pull-beam {
  0% { height: 0; opacity: 0; }
  20% { height: 180px; opacity: 0.8; }
  100% { height: 220px; opacity: 0; }
}

.shroom-warp.butter-warp {
  background: radial-gradient(circle at 50% 55%,
    rgba(255, 105, 180, 0.55) 0%,
    rgba(200, 100, 255, 0.4) 45%,
    transparent 72%);
}

.shroom-warp.butter-warp.active {
  animation: butter-warp-pulse 1s ease-in-out infinite alternate;
}

@keyframes butter-warp-pulse {
  from { opacity: 0.5; filter: hue-rotate(0deg); }
  to { opacity: 0.9; filter: hue-rotate(20deg); }
}

.dude.mush-phone-sucked {
  animation: mush-phone-suck 3.5s cubic-bezier(0.45, 0.1, 0.55, 0.9) forwards !important;
  transform-origin: center 65%;
  z-index: 18;
}

.dude.mush-phone-sucked .head {
  animation: none !important;
}

@keyframes mush-phone-suck {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  15% { transform: translateX(4px) scale(0.95) rotate(2deg); }
  30% { transform: translateX(-6px) scale(0.82) rotate(-3deg); }
  50% { transform: translateX(0) scale(0.55) translateY(-20px); opacity: 1; }
  75% { transform: translateX(0) scale(0.25) translateY(-60px); opacity: 0.7; }
  100% { transform: translateX(0) scale(0.05) translateY(-120px); opacity: 0; }
}

.shroom-donkey-vendor {
  position: absolute;
  bottom: 30px;
  left: 115%;
  width: 200px;
  height: 150px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.shroom-donkey-vendor.active {
  opacity: 1;
}

.shroom-donkey-vendor.trot-in {
  animation: donkey-trot-in 1.8s cubic-bezier(0.3, 0.85, 0.4, 1) forwards;
}

.shroom-donkey-vendor.trot-out {
  left: 12%;
  animation: donkey-trot-out 1.3s ease-in forwards;
}

@keyframes donkey-trot-in {
  0% { left: 115%; transform: translateY(0); }
  25% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
  100% { left: 12%; transform: translateY(0); }
}

@keyframes donkey-trot-out {
  0% { left: 12%; opacity: 1; }
  100% { left: -55%; opacity: 0; }
}

.shroom-donkey-vendor.trot-in .donkey-leg,
.shroom-donkey-vendor.trot-out .donkey-leg {
  animation: donkey-leg-trot 0.28s ease-in-out infinite;
}

.shroom-donkey-vendor.trot-in .dl-fr,
.shroom-donkey-vendor.trot-in .dl-bl,
.shroom-donkey-vendor.trot-out .dl-fr,
.shroom-donkey-vendor.trot-out .dl-bl {
  animation-delay: 0.14s;
}

@keyframes donkey-leg-trot {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-18deg); }
}

.donkey-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 130px;
  height: 72px;
  background: linear-gradient(180deg, #a08060, #7a5a40 65%, #5a4030);
  border-radius: 42% 38% 30% 30%;
  box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.2);
}

.donkey-head {
  position: absolute;
  left: -28px;
  top: 8px;
  width: 44px;
  height: 38px;
  background: linear-gradient(180deg, #9a7860, #6a5040);
  border-radius: 45% 40% 50% 50%;
}

.donkey-ear {
  position: absolute;
  top: -10px;
  width: 12px;
  height: 28px;
  background: #7a5a42;
  border-radius: 50% 50% 0 0;
}

.donkey-ear.de-left { left: 4px; transform: rotate(-12deg); }
.donkey-ear.de-right { right: 4px; transform: rotate(12deg); }

.donkey-eye {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 6px;
  height: 7px;
  background: #1a1008;
  border-radius: 50%;
}

.donkey-snout {
  position: absolute;
  bottom: 4px;
  left: -6px;
  width: 22px;
  height: 16px;
  background: #8a6a50;
  border-radius: 40% 30% 50% 50%;
}

.donkey-leg {
  position: absolute;
  bottom: -18px;
  width: 10px;
  height: 22px;
  background: #6a5040;
  border-radius: 3px;
  transform-origin: top center;
}

.donkey-leg.dl-fl { left: 18px; }
.donkey-leg.dl-fr { left: 38px; }
.donkey-leg.dl-bl { left: 72px; }
.donkey-leg.dl-br { left: 92px; }

.donkey-tail {
  position: absolute;
  right: -8px;
  top: 18px;
  width: 28px;
  height: 6px;
  background: #6a5040;
  border-radius: 3px;
  transform: rotate(15deg);
}

.donkey-rider {
  position: absolute;
  bottom: 58px;
  left: 42px;
  width: 52px;
  height: 62px;
  z-index: 3;
}

.rider-sombrero {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 14px;
  background: #2a1810;
  border-radius: 50%;
  box-shadow: 0 -8px 0 0 #3a2418, 0 2px 4px rgba(0, 0, 0, 0.35);
}

.rider-face {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 30px;
  background: #c89068;
  border-radius: 45%;
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.15);
}

.rider-eye {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 6px;
  background: #1a1008;
  border-radius: 50%;
}

.rider-eye.re-left { left: 6px; }
.rider-eye.re-right { right: 6px; }

.rider-mustache {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 8px;
  background: #1a1008;
  border-radius: 0 0 50% 50%;
}

.rider-mustache::before,
.rider-mustache::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 12px;
  height: 6px;
  background: #1a1008;
  border-radius: 50%;
}

.rider-mustache::before { left: -4px; transform: rotate(-8deg); }
.rider-mustache::after { right: -4px; transform: rotate(8deg); }

.rider-poncho {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 28px;
  background: linear-gradient(180deg, #c84830, #8b2818);
  border-radius: 8px 8px 20px 20px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.rider-poncho::before {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border-top: 2px dashed rgba(255, 220, 100, 0.5);
}

.rider-arm.arm-offer {
  position: absolute;
  top: 38px;
  right: -18px;
  width: 28px;
  height: 8px;
  background: #c89068;
  border-radius: 4px;
  transform: rotate(-20deg);
}

.shroom-donkey-vendor.dealing .rider-arm.arm-offer {
  animation: rider-offer-arm 0.8s ease-in-out infinite alternate;
}

@keyframes rider-offer-arm {
  from { transform: rotate(-20deg) translateY(0); }
  to { transform: rotate(-8deg) translateY(-4px); }
}

.donkey-mush-sack {
  position: absolute;
  bottom: 48px;
  right: -8px;
  width: 36px;
  height: 40px;
  z-index: 2;
}

.sack-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #c4a060, #8b6830);
  border-radius: 8px 8px 14px 14px;
  border: 2px solid #6a5028;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

.sack-shroom {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 40% 30%, #e85a9a, #9b2d6a);
  border-radius: 50% 50% 40% 40%;
}

.sack-shroom::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 5px;
  background: #f0e8d8;
  border-radius: 2px;
}

.sack-shroom.ss1 { top: 4px; left: 6px; }
.sack-shroom.ss2 { top: 8px; right: 6px; }
.sack-shroom.ss3 { top: 16px; left: 12px; width: 8px; height: 8px; }

.vendor-speech {
  position: absolute;
  top: -36px;
  left: 20px;
  z-index: 8;
  opacity: 0;
}

.shroom-donkey-vendor.dealing .vendor-speech {
  opacity: 1;
}

.vendor-line {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid #ffd700;
  border-radius: 10px;
  padding: 3px 10px;
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 #333;
  animation: vendor-line-pop 0.6s ease-out forwards;
  opacity: 0;
}

.vendor-line.vl2 { animation-delay: 0.45s; font-size: 0.85rem; }

@keyframes vendor-line-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Penny deal */
.shroom-penny-deal {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 90px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.shroom-penny-deal.active {
  opacity: 1;
}

.penny {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 30%, #e8c860, #b8922a 55%, #8b6914);
  border-radius: 50%;
  border: 2px solid #6a5010;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
}

.penny::after {
  content: '¢';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  color: #5a4010;
}

.shroom-penny-deal.active .coin-p1 {
  left: 8px;
  bottom: 20px;
  animation: penny-to-vendor 1s ease-in 0.2s forwards;
}

.shroom-penny-deal.active .coin-p2 {
  left: 28px;
  bottom: 12px;
  animation: penny-to-vendor 1s ease-in 0.45s forwards;
}

@keyframes penny-to-vendor {
  0% { opacity: 0; transform: translate(0, 20px) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(55px, -30px) scale(0.9); }
}

.deal-shrooms {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70px;
  height: 50px;
  opacity: 0;
}

.shroom-penny-deal.complete .deal-shrooms {
  opacity: 1;
  animation: shrooms-handoff 0.8s ease-out forwards;
}

@keyframes shrooms-handoff {
  0% { transform: translateX(40px) scale(0.3); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(-50px) scale(1); opacity: 1; }
}

.deal-cap {
  position: absolute;
  width: 18px;
  height: 14px;
  background: radial-gradient(circle at 40% 28%, #ff6eb4, #9b2d6a);
  border-radius: 50% 50% 35% 35%;
}

.deal-cap::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 7px;
  background: #f5edd8;
  border-radius: 2px;
}

.deal-cap.dc1 { left: 4px; bottom: 8px; }
.deal-cap.dc2 { left: 24px; bottom: 14px; transform: rotate(12deg); }
.deal-cap.dc3 { left: 42px; bottom: 6px; transform: rotate(-8deg); }

.deal-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent 70%);
  opacity: 0;
}

.shroom-penny-deal.complete .deal-sparkle {
  animation: deal-sparkle-pop 0.6s ease-out forwards;
}

@keyframes deal-sparkle-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Slavery trip vision */
.shroom-slavery-vision {
  position: absolute;
  inset: 0;
  z-index: 14;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: scale(1.15);
}

.shroom-slavery-vision.active {
  opacity: 1;
  animation: slavery-vision-enter 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slavery-vision-enter {
  0% {
    opacity: 0;
    transform: scale(1.35);
    filter: blur(6px) brightness(1.8);
  }
  40% {
    opacity: 0.85;
    filter: blur(2px) brightness(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

.shroom-slavery-vision.vision-zoom {
  animation: slavery-vision-zoom 2s ease-out forwards;
}

@keyframes slavery-vision-zoom {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.slavery-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(10, 0, 0, 0.75) 100%);
  pointer-events: none;
}

.slavery-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #1a0828 0%,
    #4a1828 22%,
    #8a3820 48%,
    #c86828 68%,
    #5a3020 100%);
}

.slavery-sun {
  position: absolute;
  top: 8%;
  right: 18%;
  width: 56px;
  height: 56px;
  background: radial-gradient(circle, #fff8c0 0%, #ffaa30 35%, #ff6600 65%, transparent 72%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 140, 0, 0.7), 0 0 80px rgba(255, 80, 0, 0.35);
  animation: slavery-sun-pulse 3s ease-in-out infinite alternate;
}

@keyframes slavery-sun-pulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.06); filter: brightness(1.15); }
}

.slavery-heat-shimmer {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(255, 180, 80, 0.12));
  animation: heat-shimmer-wave 2.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes heat-shimmer-wave {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.5; }
  50% { transform: translateY(-8px) scaleY(1.08); opacity: 0.85; }
}

.slavery-distant-trees {
  position: absolute;
  bottom: 78px;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 1;
  opacity: 0.55;
}

.st-tree {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 48px solid #1a2818;
}

.st-tree::after {
  content: '';
  position: absolute;
  top: 44px;
  left: -3px;
  width: 6px;
  height: 14px;
  background: #2a1810;
}

.st-tree.st1 { left: 5%; transform: scale(0.8); }
.st-tree.st2 { left: 22%; transform: scale(1.1); }
.st-tree.st3 { right: 28%; transform: scale(0.9); }
.st-tree.st4 { right: 6%; transform: scale(1.2); }

.slavery-field-rows {
  position: absolute;
  bottom: 72px;
  left: -5%;
  right: -5%;
  height: 70px;
  z-index: 1;
  opacity: 0.45;
}

.field-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3a5028 15%, #4a6030 50%, #3a5028 85%, transparent);
  transform-origin: center;
}

.field-row.fr1 { bottom: 52px; transform: perspective(200px) rotateX(12deg); }
.field-row.fr2 { bottom: 38px; transform: perspective(200px) rotateX(18deg); }
.field-row.fr3 { bottom: 24px; transform: perspective(200px) rotateX(24deg); }
.field-row.fr4 { bottom: 12px; transform: perspective(200px) rotateX(30deg); }
.field-row.fr5 { bottom: 2px; transform: perspective(200px) rotateX(36deg); }

.slavery-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95px;
  background: linear-gradient(180deg, #7a5840 0%, #5a4030 40%, #3a2818 100%);
  z-index: 2;
}

.ground-cracks {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(72deg, transparent 48%, rgba(30, 15, 8, 0.5) 49%, transparent 50%),
    linear-gradient(-65deg, transparent 62%, rgba(30, 15, 8, 0.4) 63%, transparent 64%);
  opacity: 0.6;
}

.ground-pebbles {
  position: absolute;
  bottom: 8px;
  left: 10%;
  width: 80%;
  height: 12px;
  background:
    radial-gradient(circle at 10% 50%, #4a3828 2px, transparent 2px),
    radial-gradient(circle at 35% 30%, #4a3828 1.5px, transparent 1.5px),
    radial-gradient(circle at 60% 60%, #4a3828 2px, transparent 2px),
    radial-gradient(circle at 85% 40%, #4a3828 1.5px, transparent 1.5px);
}

.slavery-overseer {
  position: absolute;
  bottom: 88px;
  right: 12%;
  width: 36px;
  height: 70px;
  z-index: 4;
  opacity: 0;
}

.shroom-slavery-vision.active .slavery-overseer {
  animation: overseer-fade-in 1s ease-out 0.8s forwards;
}

@keyframes overseer-fade-in {
  to { opacity: 0.7; }
}

.shroom-slavery-vision.chains-rattle .overseer-whip {
  animation: whip-crack 0.6s ease-out 2;
}

.overseer-hat {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 10px;
  background: #2a1810;
  border-radius: 50%;
  box-shadow: 0 -6px 0 0 #3a2418;
}

.overseer-body {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 38px;
  background: linear-gradient(180deg, #e8e0d0, #c8c0b0);
  border-radius: 6px 6px 4px 4px;
}

.overseer-whip {
  position: absolute;
  top: 20px;
  right: -28px;
  width: 36px;
  height: 4px;
  background: linear-gradient(90deg, #5a4030, #8b6848);
  border-radius: 2px;
  transform-origin: left center;
  transform: rotate(-20deg);
}

@keyframes whip-crack {
  0%, 100% { transform: rotate(-20deg); }
  30% { transform: rotate(-55deg); }
  50% { transform: rotate(10deg); }
}

.slavery-cart {
  position: absolute;
  bottom: 48px;
  left: 115%;
  width: 168px;
  height: 82px;
  z-index: 5;
}

.shroom-slavery-vision.hauling .slavery-cart {
  animation:
    slavery-cart-haul 4.2s cubic-bezier(0.35, 0.05, 0.4, 1) forwards,
    cart-bounce-ride 0.32s ease-in-out infinite;
}

@keyframes slavery-cart-haul {
  0% { left: 115%; }
  28% { left: 38%; }
  100% { left: -58%; }
}

@keyframes cart-bounce-ride {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.cart-yoke {
  position: absolute;
  bottom: 38px;
  right: -42px;
  width: 48px;
  height: 14px;
  border: 4px solid #4a3020;
  border-radius: 50%;
  border-top-color: transparent;
  transform: rotate(-12deg);
}

.cart-bed {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 104px;
  height: 32px;
  background: linear-gradient(180deg, #7a5840, #4a3828);
  border: 3px solid #2a1810;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.35);
}

.cart-plank {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: rgba(30, 15, 8, 0.45);
}

.cart-plank.cp1 { top: 8px; }
.cart-plank.cp2 { top: 16px; }
.cart-plank.cp3 { top: 24px; }

.cart-shackle {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 14px;
  border: 3px solid #666;
  border-radius: 50%;
  border-bottom: none;
}

.cart-shackle.cs-left { left: 6px; }
.cart-shackle.cs-right { right: 6px; }

.cart-side-rail {
  position: absolute;
  bottom: 44px;
  width: 4px;
  height: 18px;
  background: #5a4030;
  border-radius: 2px;
}

.cart-side-rail.csr-left { left: 2px; }
.cart-side-rail.csr-right { left: 98px; }

.cart-wheel {
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, #9a8878 30%, #5a4838 70%);
  border: 4px solid #2a2018;
  border-radius: 50%;
}

.shroom-slavery-vision.hauling .cart-wheel {
  animation: cart-wheel-spin 0.45s linear infinite;
}

.cart-wheel.cw-back { left: 10px; }
.cart-wheel.cw-front { left: 68px; }

.wheel-spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 10px;
  background: #3a2818;
  transform-origin: center bottom;
  margin-left: -1px;
  margin-top: -10px;
}

.wheel-spoke.ws1 { transform: rotate(0deg); }
.wheel-spoke.ws2 { transform: rotate(60deg); }
.wheel-spoke.ws3 { transform: rotate(120deg); }

.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #4a3828;
  border-radius: 50%;
  border: 2px solid #2a1810;
}

@keyframes cart-wheel-spin {
  to { transform: rotate(360deg); }
}

.cart-pole {
  position: absolute;
  bottom: 30px;
  right: -58px;
  width: 62px;
  height: 7px;
  background: linear-gradient(180deg, #6a5040, #4a3020);
  border-radius: 3px;
  transform: rotate(-10deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.shroom-slavery-vision.hauling .cart-pole {
  animation: cart-pole-bob 0.32s ease-in-out infinite;
}

@keyframes cart-pole-bob {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(-6deg) translateY(-2px); }
}

.cart-haul-chain {
  position: absolute;
  bottom: 32px;
  right: -18px;
  display: flex;
  gap: 1px;
  transform: rotate(-8deg);
}

.ch-link {
  width: 8px;
  height: 12px;
  border: 2px solid #777;
  border-radius: 4px;
  background: linear-gradient(180deg, #aaa, #666);
}

.vision-dude-mini {
  position: absolute;
  bottom: 38px;
  left: 28px;
  width: 34px;
  height: 48px;
  z-index: 6;
}

.shroom-slavery-vision.hauling .vision-dude-mini {
  animation: vdm-bounce 0.32s ease-in-out infinite;
}

@keyframes vdm-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.vdm-afro {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 14px;
  background: radial-gradient(ellipse, #1a1008, #0a0604);
  border-radius: 50%;
  z-index: 2;
}

.vdm-head {
  position: relative;
  width: 24px;
  height: 24px;
  background: #6b4a35;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: inset -2px -3px 5px #4a3020;
  z-index: 1;
}

.vdm-eye {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.vdm-eye::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 4px;
  height: 4px;
  background: #1a1008;
  border-radius: 50%;
}

.vdm-eye-l { left: 5px; }
.vdm-eye-r { right: 5px; }

.vdm-mouth {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 4px;
  border-bottom: 2px solid #3a2018;
  border-radius: 0 0 50% 50%;
}

.vdm-neck-chain {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 8px;
  border: 2px solid #888;
  border-radius: 50%;
  border-top: none;
  z-index: 3;
}

.vdm-body {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 16px;
  background: #4a3020;
  border-radius: 4px 4px 2px 2px;
}

.vdm-wrist-chain {
  position: absolute;
  top: 28px;
  width: 14px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888 0 3px, #555 3px 6px);
  border-radius: 2px;
}

.vdm-wrist-chain.vdm-wl { left: -4px; transform: rotate(20deg); }
.vdm-wrist-chain.vdm-wr { right: -4px; transform: rotate(-20deg); }

.vdm-ankle-chain {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #777 0 3px, #aaa 3px 6px);
  border-radius: 2px;
}

.cart-dust-trail {
  position: absolute;
  bottom: 52px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.shroom-slavery-vision.hauling .cart-dust-trail {
  opacity: 1;
  animation: dust-trail-follow 4.2s linear forwards;
}

@keyframes dust-trail-follow {
  0% { transform: translateX(80%); }
  100% { transform: translateX(-60%); }
}

.dust-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 150, 110, 0.7), transparent 70%);
  animation: dust-puff-rise 0.8s ease-out infinite;
}

.dust-puff.dp1 { width: 22px; height: 22px; left: 20%; bottom: 0; }
.dust-puff.dp2 { width: 28px; height: 28px; left: 35%; bottom: 4px; animation-delay: 0.15s; }
.dust-puff.dp3 { width: 18px; height: 18px; left: 50%; bottom: 2px; animation-delay: 0.3s; }
.dust-puff.dp4 { width: 24px; height: 24px; left: 65%; bottom: 6px; animation-delay: 0.1s; }
.dust-puff.dp5 { width: 20px; height: 20px; left: 80%; bottom: 0; animation-delay: 0.25s; }

@keyframes dust-puff-rise {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.4) translateY(-18px); opacity: 0; }
}

.slavery-chains-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.4;
}

.shroom-slavery-vision.chains-rattle .slavery-chains-bg {
  animation: chains-bg-rattle 0.15s ease-in-out 8;
}

@keyframes chains-bg-rattle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-0.5deg); }
  75% { transform: translateX(3px) rotate(0.5deg); }
}

.bg-chain {
  position: absolute;
  width: 110%;
  left: -5%;
  height: 7px;
  background: repeating-linear-gradient(90deg, #555 0 5px, #999 5px 10px);
}

.bg-chain.bc1 { top: 22%; transform: rotate(-6deg); }
.bg-chain.bc2 { top: 38%; transform: rotate(4deg); }
.bg-chain.bc3 { top: 54%; transform: rotate(-3deg); }
.bg-chain.bc4 { top: 70%; transform: rotate(5deg); }

.bg-chain-v {
  position: absolute;
  width: 6px;
  height: 80px;
  background: repeating-linear-gradient(180deg, #666 0 6px, #999 6px 12px);
  opacity: 0.5;
}

.bg-chain-v.bcv1 { top: 8%; left: 12%; }
.bg-chain-v.bcv2 { top: 5%; right: 22%; height: 100px; }
.bg-chain-v.bcv3 { top: 12%; left: 48%; height: 70px; opacity: 0.35; }

.slavery-caption {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.35rem;
  color: #ffcccc;
  text-shadow: 2px 2px 0 #300, 0 0 24px rgba(255, 0, 0, 0.6);
  letter-spacing: 2px;
  opacity: 0;
  white-space: nowrap;
  z-index: 9;
}

.slavery-caption-sub {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.85rem;
  color: rgba(255, 180, 150, 0.75);
  letter-spacing: 3px;
  opacity: 0;
  white-space: nowrap;
  z-index: 9;
}

.shroom-slavery-vision.active .slavery-caption {
  animation: slavery-caption-fade 1.4s ease-out 0.5s forwards;
}

.shroom-slavery-vision.active .slavery-caption-sub {
  animation: slavery-caption-fade 1.4s ease-out 1.1s forwards;
}

@keyframes slavery-caption-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.slavery-vision-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 200, 150, 0.35);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

.shroom-slavery-vision.chains-rattle .slavery-vision-flash {
  animation: vision-flash-hit 0.35s ease-out;
}

@keyframes vision-flash-hit {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

.shroom-warp.enslave-warp {
  background:
    radial-gradient(circle at 50% 55%, rgba(120, 30, 30, 0.6) 0%, transparent 55%),
    radial-gradient(circle at 30% 40%, rgba(80, 20, 100, 0.35) 0%, transparent 45%),
    conic-gradient(from 0deg at 50% 50%, rgba(255, 60, 0, 0.15), rgba(60, 0, 80, 0.2), rgba(255, 60, 0, 0.15));
}

.shroom-warp.enslave-warp.active {
  animation: enslave-warp-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes enslave-warp-pulse {
  from { opacity: 0.5; filter: hue-rotate(0deg) saturate(1.3) blur(0); }
  to { opacity: 0.9; filter: hue-rotate(-30deg) saturate(1.7) blur(1px); }
}

/* Chains on dude + haul off */
.mush-chain-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
}

.mush-chain-overlay.active {
  opacity: 1;
}

.chain-vignette-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(60, 0, 0, 0.45) 100%);
  opacity: 0;
  animation: chain-vignette-pulse 2s ease-in-out infinite alternate;
}

.mush-chain-overlay.active .chain-vignette-pulse {
  opacity: 1;
}

@keyframes chain-vignette-pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

.iron-collar {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 52px;
  height: 14px;
  border: 4px solid #666;
  border-radius: 50%;
  border-bottom: none;
  background: linear-gradient(180deg, #888, #555);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.mush-chain-overlay.chains-lock .iron-collar {
  animation: collar-snap 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}

@keyframes collar-snap {
  0% { transform: translateX(-50%) scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; }
}

.dude-chain,
.ankle-chain {
  position: absolute;
  display: flex;
  gap: 1px;
  opacity: 0;
}

.chain-link-seg {
  width: 7px;
  height: 10px;
  border: 2px solid #777;
  border-radius: 4px;
  background: linear-gradient(180deg, #bbb, #666);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.mush-chain-overlay.chains-lock .dude-chain,
.mush-chain-overlay.chains-lock .ankle-chain {
  animation: chain-snap-on 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.mush-chain-overlay.chains-lock .chain-link-seg {
  animation: chain-link-rattle 0.12s ease-in-out 4;
}

@keyframes chain-snap-on {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes chain-link-rattle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.dude-chain.dc-wrist-l {
  top: 56%;
  left: 16%;
  transform: rotate(28deg);
}

.dude-chain.dc-wrist-r {
  top: 56%;
  right: 16%;
  transform: rotate(-28deg);
  animation-delay: 0.08s;
}

.dude-chain.dc-neck {
  top: 43%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  animation-delay: 0.15s;
}

.ankle-chain.dc-ankle-l {
  bottom: 22%;
  left: 28%;
  transform: rotate(15deg);
  animation-delay: 0.22s;
}

.ankle-chain.dc-ankle-r {
  bottom: 22%;
  right: 28%;
  transform: rotate(-15deg);
  animation-delay: 0.28s;
}

.mush-chain-overlay.haul .chain-link-seg {
  animation: chain-seg-tug 0.35s ease-in-out infinite;
}

.mush-chain-overlay.haul .iron-collar {
  animation: collar-tug 0.35s ease-in-out infinite;
}

@keyframes chain-seg-tug {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}

@keyframes collar-tug {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(calc(-50% - 3px)) scale(1); }
}

.haul-rope {
  position: absolute;
  top: 46%;
  left: 72%;
  width: 0;
  height: 14px;
  transform-origin: left center;
  opacity: 0;
  overflow: visible;
}

.haul-chain-links {
  display: flex;
  gap: 1px;
  height: 100%;
}

.hcl {
  width: 9px;
  height: 12px;
  border: 2px solid #777;
  border-radius: 4px;
  background: linear-gradient(180deg, #aaa, #555);
  flex-shrink: 0;
}

.mush-chain-overlay.haul .haul-rope {
  animation: haul-chain-extend 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mush-chain-overlay.haul .hcl {
  animation: haul-link-pop 0.15s ease-out backwards;
}

.mush-chain-overlay.haul .hcl:nth-child(1) { animation-delay: 0.05s; }
.mush-chain-overlay.haul .hcl:nth-child(2) { animation-delay: 0.12s; }
.mush-chain-overlay.haul .hcl:nth-child(3) { animation-delay: 0.19s; }
.mush-chain-overlay.haul .hcl:nth-child(4) { animation-delay: 0.26s; }
.mush-chain-overlay.haul .hcl:nth-child(5) { animation-delay: 0.33s; }
.mush-chain-overlay.haul .hcl:nth-child(6) { animation-delay: 0.4s; }

@keyframes haul-chain-extend {
  to { width: 140px; opacity: 1; }
}

@keyframes haul-link-pop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.haul-dust {
  position: absolute;
  bottom: 18%;
  left: 20%;
  width: 60%;
  height: 30px;
  opacity: 0;
}

.mush-chain-overlay.haul .haul-dust {
  opacity: 1;
}

.haul-dust span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 130, 90, 0.6), transparent 70%);
  animation: haul-dust-kick 0.5s ease-out infinite;
}

.haul-dust .hd1 { width: 16px; height: 16px; left: 10%; bottom: 0; }
.haul-dust .hd2 { width: 22px; height: 22px; left: 35%; bottom: 2px; animation-delay: 0.12s; }
.haul-dust .hd3 { width: 14px; height: 14px; left: 58%; bottom: 0; animation-delay: 0.08s; }
.haul-dust .hd4 { width: 18px; height: 18px; left: 78%; bottom: 4px; animation-delay: 0.2s; }

@keyframes haul-dust-kick {
  0% { transform: scale(0.5) translateY(0); opacity: 0.9; }
  100% { transform: scale(1.3) translateY(-20px); opacity: 0; }
}

.struggle-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  pointer-events: none;
}

.mush-chain-overlay.chains-lock .struggle-flash {
  animation: struggle-flash-hit 0.4s ease-out;
}

@keyframes struggle-flash-hit {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}

.dude.mush-enslaved {
  transform-origin: center 72%;
  z-index: 18;
}

.dude.mush-enslaved .head {
  animation: none !important;
}

.dude.mush-enslaved.enslave-struggle {
  animation: mush-enslave-struggle 1.4s ease-in-out forwards !important;
}

@keyframes mush-enslave-struggle {
  0% { transform: translateX(0) scale(1) rotate(0deg); }
  12% { transform: translateX(8px) scale(0.98) rotate(3deg); }
  24% { transform: translateX(-6px) scale(0.96) rotate(-2deg); }
  36% { transform: translateX(10px) scale(0.94) rotate(4deg); }
  48% { transform: translateX(-8px) scale(0.92) rotate(-3deg); }
  60% { transform: translateX(6px) scale(0.9) rotate(2deg); }
  75% { transform: translateX(-14px) scale(0.86) rotate(-5deg); }
  100% { transform: translateX(-18px) scale(0.84) rotate(-6deg); }
}

.dude.mush-enslaved.enslave-struggle .head {
  animation: enslave-head-struggle 1.4s ease-in-out forwards !important;
}

@keyframes enslave-head-struggle {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-50%) rotate(8deg) translateY(2px); }
  40% { transform: translateX(-50%) rotate(-6deg) translateY(4px); }
  60% { transform: translateX(-50%) rotate(10deg); }
  80% { transform: translateX(-50%) rotate(-8deg) translateY(3px); }
}

.dude.mush-enslaved.enslave-haul {
  animation: mush-enslave-haul 4.2s cubic-bezier(0.4, 0.05, 0.5, 0.95) forwards !important;
}

@keyframes mush-enslave-haul {
  0% {
    transform: translateX(-18px) scale(0.84) rotate(-6deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(120, 0, 0, 0.5));
  }
  8% {
    transform: translateX(-28px) scale(0.78) rotate(-7deg) translateY(2px);
  }
  20% {
    transform: translateX(-55px) scale(0.65) rotate(-9deg) translateY(0);
  }
  35% {
    transform: translateX(-95px) scale(0.48) rotate(-11deg) translateY(4px);
  }
  50% {
    transform: translateX(-140px) scale(0.34) rotate(-12deg) translateY(8px);
    opacity: 0.95;
  }
  65% {
    transform: translateX(-190px) scale(0.24) rotate(-14deg) translateY(12px);
  }
  80% {
    transform: translateX(-240px) scale(0.14) rotate(-15deg) translateY(16px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(-310px) scale(0.05) rotate(-18deg) translateY(22px);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }
}

.shroom-pasture {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95px;
  z-index: 1;
}

.pasture-hill {
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
  height: 70px;
  background: linear-gradient(180deg, #5a9e3a 0%, #3d7a28 55%, #2d5c1c 100%);
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0 8px 20px rgba(255,255,255,0.12);
}

.grass-blade {
  position: absolute;
  bottom: 45px;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #7bc85a, #4a8a32);
  border-radius: 50% 50% 0 0;
  transform-origin: bottom center;
}

.grass-blade.g1 { left: 12%; transform: rotate(-12deg); height: 22px; }
.grass-blade.g2 { left: 28%; transform: rotate(8deg); }
.grass-blade.g3 { left: 45%; transform: rotate(-6deg); height: 20px; }
.grass-blade.g4 { left: 62%; transform: rotate(14deg); }
.grass-blade.g5 { left: 78%; transform: rotate(-10deg); height: 24px; }
.grass-blade.g6 { left: 90%; transform: rotate(5deg); }

/* Cow */
.shroom-cow {
  position: absolute;
  bottom: 28px;
  left: 110%;
  width: 268px;
  height: 172px;
  z-index: 4;
  opacity: 0;
}

.shroom-cow.run-in {
  opacity: 1;
  animation: cow-gallop-in 1.6s cubic-bezier(0.25, 0.8, 0.35, 1) forwards;
}

.shroom-cow.pooped {
  opacity: 1;
  left: 8%;
  animation: cow-poop-strain 1.4s ease-in-out infinite;
}

.shroom-cow.pooped .cow-tail {
  animation: cow-tail-poop 0.35s ease-in-out infinite;
}

.shroom-cow.pooped .cow-anus {
  animation: anus-poop-pulse 0.35s ease-in-out infinite;
}

.shroom-cow.pooped .cow-strain-face {
  opacity: 1;
}

.shroom-cow.pooped .cow-eye {
  animation: cow-eye-strain 0.4s ease-in-out infinite;
}

.shroom-cow.pooped .cow-pupil {
  transform: scale(1.3);
}

@keyframes cow-poop-strain {
  0%, 100% { transform: translateY(0) scaleX(1); }
  40% { transform: translateY(3px) scaleX(1.02); }
  55% { transform: translateY(5px) scaleX(1.01); }
}

@keyframes cow-tail-poop {
  0%, 100% { transform: rotate(55deg); }
  50% { transform: rotate(95deg); }
}

@keyframes anus-poop-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@keyframes cow-eye-strain {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}

.shroom-cow.run-out {
  opacity: 1;
  left: 8%;
  animation: cow-gallop-out 1.2s ease-in forwards;
}

.shroom-cow.mooing .cow-moo-bubble {
  opacity: 1;
}

.shroom-cow.mooing .moo-text {
  animation: moo-bubble-pop 0.9s ease-out forwards;
}

.shroom-cow.mooing .moo-text.moo2 {
  animation-delay: 0.35s;
}

@keyframes cow-gallop-in {
  0% { left: 110%; transform: translateY(0); }
  15% { transform: translateY(-10px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-12px); }
  60% { transform: translateY(0); }
  75% { transform: translateY(-8px); }
  100% { left: 8%; transform: translateY(0); }
}

@keyframes cow-gallop-out {
  0% { left: 8%; opacity: 1; }
  100% { left: -60%; opacity: 0; }
}

.cow-moo-bubble {
  position: absolute;
  top: -28px;
  left: 40px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.moo-text {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 2px 2px 0 #333, 0 0 12px rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.55);
  padding: 4px 12px;
  border-radius: 12px;
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.3);
}

.moo-text.moo2 {
  font-size: 1.2rem;
  margin-top: 4px;
  margin-left: 20px;
}

@keyframes moo-bubble-pop {
  0% { opacity: 0; transform: scale(0.2) translateY(10px); }
  25% { opacity: 1; transform: scale(1.15) translateY(0); }
  70% { opacity: 1; transform: scale(1) translateY(-6px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-18px); }
}

.shroom-cow.run-in .cow-leg,
.shroom-cow.run-out .cow-leg {
  animation: cow-leg-gallop 0.25s ease-in-out infinite;
}

.shroom-cow.run-in .leg-fr,
.shroom-cow.run-in .leg-bl,
.shroom-cow.run-out .leg-fr,
.shroom-cow.run-out .leg-bl { animation-delay: 0.12s; }

@keyframes cow-leg-gallop {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-25deg); }
}

.cow-body {
  position: absolute;
  top: 34px;
  left: 38px;
  width: 168px;
  height: 92px;
  background: linear-gradient(180deg, #fafaf5 0%, #e8e8e0 55%, #d8d8d0 100%);
  border-radius: 48% 46% 42% 42%;
  border: 4px solid #aaa;
  box-shadow:
    inset -6px -6px 14px rgba(0,0,0,0.1),
    inset 4px 4px 10px rgba(255,255,255,0.5);
  z-index: 2;
}

.cow-belly {
  position: absolute;
  bottom: 8px;
  left: 20%;
  width: 58%;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(240,240,235,0.8));
  border-radius: 50%;
}

.cow-spot {
  position: absolute;
  background: radial-gradient(ellipse, #1a1a1a 0%, #333 70%);
  border-radius: 50%;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}

.cow-spot.sp1 { width: 42px; height: 34px; top: 14px; left: 22px; }
.cow-spot.sp2 { width: 30px; height: 26px; top: 40px; left: 82px; }
.cow-spot.sp3 { width: 22px; height: 18px; top: 16px; right: 18px; }
.cow-spot.sp4 { width: 16px; height: 14px; top: 52px; left: 48px; }

.cow-udder {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 30px;
  background: radial-gradient(ellipse, #f8c0c8, #e09098);
  border-radius: 50%;
  border: 3px solid #d07080;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  z-index: 3;
}

.udder-teat {
  position: absolute;
  bottom: -10px;
  width: 8px;
  height: 14px;
  background: #f0a0a8;
  border-radius: 0 0 50% 50%;
  border: 1px solid #d07080;
}

.udder-teat.ut1 { left: 8px; }
.udder-teat.ut2 { left: 18px; }
.udder-teat.ut3 { right: 18px; }
.udder-teat.ut4 { right: 8px; }

.cow-neck {
  position: absolute;
  top: 38px;
  left: 18px;
  width: 36px;
  height: 42px;
  background: linear-gradient(135deg, #ecece4, #d8d8d0);
  border-radius: 40%;
  border: 3px solid #aaa;
  z-index: 1;
}

.cow-head {
  position: absolute;
  top: 8px;
  left: -4px;
  width: 78px;
  height: 68px;
  background: linear-gradient(180deg, #f4f4ec, #e0e0d8);
  border-radius: 50% 42% 48% 48%;
  border: 4px solid #aaa;
  z-index: 4;
  box-shadow: inset -3px -3px 8px rgba(0,0,0,0.08);
}

.cow-cheek {
  position: absolute;
  bottom: 18px;
  width: 14px;
  height: 10px;
  background: rgba(255, 180, 180, 0.35);
  border-radius: 50%;
}

.cow-cheek.cc-left { left: 4px; }
.cow-cheek.cc-right { right: 4px; }

.cow-strain-face {
  position: absolute;
  top: 18px;
  left: 14px;
  width: 48px;
  height: 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.cow-strain-face::before,
.cow-strain-face::after {
  content: '';
  position: absolute;
  top: 0;
  width: 7px;
  height: 12px;
  background: linear-gradient(180deg, #a8d8ff, #68b0e0);
  border-radius: 50% 50% 50% 0;
  opacity: 0.85;
}

.cow-strain-face::before {
  left: 4px;
  transform: rotate(-25deg);
  animation: sweat-drip-cow 0.5s ease-in-out infinite;
}

.cow-strain-face::after {
  right: 4px;
  transform: rotate(25deg) scaleX(-1);
  animation: sweat-drip-cow 0.5s ease-in-out 0.25s infinite;
}

@keyframes sweat-drip-cow {
  0%, 100% { transform: rotate(-25deg) translateY(0); opacity: 0.85; }
  50% { transform: rotate(-25deg) translateY(4px); opacity: 1; }
}

.shroom-cow.pooped .cow-strain-face::after {
  animation-name: sweat-drip-cow-right;
}

@keyframes sweat-drip-cow-right {
  0%, 100% { transform: rotate(25deg) scaleX(-1) translateY(0); opacity: 0.85; }
  50% { transform: rotate(25deg) scaleX(-1) translateY(4px); opacity: 1; }
}

.cow-ear {
  position: absolute;
  top: -6px;
  width: 18px;
  height: 24px;
  background: #e8c8c8;
  border-radius: 50% 50% 0 0;
  border: 2px solid #c8a0a0;
}

.cow-ear.ce-left { left: 2px; transform: rotate(-20deg); }
.cow-ear.ce-right { right: 2px; transform: rotate(20deg); }

.cow-snout {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 34px;
  background: linear-gradient(180deg, #fce0e0, #f0c0c0);
  border-radius: 45%;
  border: 3px solid #d89898;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.08);
}

.cow-mouth-line {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: #8a6060;
  border-radius: 2px;
}

.cow-nostril {
  position: absolute;
  bottom: 12px;
  width: 9px;
  height: 11px;
  background: radial-gradient(ellipse, #2a1818, #4a3030);
  border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
}

.cow-nostril.cn-l { left: 8px; }
.cow-nostril.cn-r { right: 8px; }

.cow-eye {
  position: absolute;
  top: 16px;
  width: 16px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #333;
  overflow: hidden;
}

.cow-eye.ce-left { left: 8px; }
.cow-eye.ce-right { right: 8px; }

.cow-pupil {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 12px;
  background: #111;
  border-radius: 50%;
  transition: transform 0.15s;
}

.cow-horn {
  position: absolute;
  top: -2px;
  width: 14px;
  height: 26px;
  background: linear-gradient(180deg, #eee, #888);
  border-radius: 50% 50% 0 0;
  border: 1px solid #666;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
}

.cow-horn.ch-left { left: -4px; transform: rotate(-28deg); }
.cow-horn.ch-right { right: -4px; transform: rotate(28deg); }

.cow-leg {
  position: absolute;
  bottom: 0;
  width: 22px;
  height: 48px;
  background: linear-gradient(90deg, #d8d8d0, #ecece4, #d0d0c8);
  border: 3px solid #999;
  border-radius: 5px 5px 8px 8px;
  transform-origin: top center;
  z-index: 1;
}

.cow-hoof {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 10px;
  background: #2a2a2a;
  border-radius: 3px 3px 6px 6px;
  border: 2px solid #111;
}

.cow-leg.leg-fl { left: 48px; }
.cow-leg.leg-fr { left: 76px; }
.cow-leg.leg-bl { left: 148px; }
.cow-leg.leg-br { left: 176px; }

.cow-rear-butt {
  position: absolute;
  top: 58px;
  right: 2px;
  width: 52px;
  height: 72px;
  z-index: 3;
}

.cow-haunch {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 44px;
  background: linear-gradient(135deg, #e8e8e0, #d0d0c8);
  border-radius: 40% 50% 45% 35%;
  border: 3px solid #999;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.1);
}

.cow-anus {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  background: radial-gradient(ellipse, #5a3828, #3a2018);
  border-radius: 50%;
  border: 2px solid #2a1810;
  z-index: 6;
  box-shadow: 0 0 6px rgba(90, 56, 40, 0.5);
}

.shroom-cow.pooped .cow-anus {
  background: radial-gradient(ellipse, #4a2818, #2a1008);
  box-shadow: 0 0 10px rgba(120, 70, 40, 0.7);
}

.cow-tail {
  position: absolute;
  top: 48px;
  right: 18px;
  width: 14px;
  height: 58px;
  background: linear-gradient(180deg, #333, #1a1a1a);
  border-radius: 6px;
  transform-origin: top center;
  animation: cow-tail-swish 0.6s ease-in-out infinite;
  z-index: 5;
}

.cow-tail-tip {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background: #1a1a1a;
  border-radius: 50%;
}

@keyframes cow-tail-swish {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(-25deg); }
}

/* Poop — erupts from cow butt and drops to pasture */
.cow-poop {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.cow-poop.active {
  opacity: 1;
}

.cow-poop.dropping {
  animation: poop-fall-from-butt 0.85s cubic-bezier(0.35, 0.95, 0.45, 1) forwards;
}

@keyframes poop-fall-from-butt {
  0% {
    top: 36px;
    transform: translateX(-50%) translateY(0);
  }
  60% {
    top: 36px;
    transform: translateX(-50%) translateY(55px);
  }
  85% {
    top: 36px;
    transform: translateX(-50%) translateY(98px);
  }
  100% {
    top: 36px;
    transform: translateX(-50%) translateY(108px);
  }
}

.pasture-poop-spot {
  position: absolute;
  bottom: 34px;
  left: calc(30% - 42px);
  width: 72px;
  height: 120px;
  z-index: 8;
  pointer-events: none;
}

.pasture-poop-spot .cow-poop.grounded,
.pasture-poop-spot .cow-poop.stays {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  transform: none;
  opacity: 1 !important;
  visibility: visible !important;
}

.cow-poop.grounded {
  position: absolute;
  top: auto;
  bottom: 42px;
  left: calc(33% - 42px);
  transform: none;
  z-index: 8;
  opacity: 1;
}

.cow-poop.stays {
  opacity: 1 !important;
  visibility: visible !important;
}

.cow-poop.grounded.stays .poop-softserve {
  height: 96px;
  opacity: 1;
}

.cow-poop.grounded.stays .poop-splat {
  width: 70px;
  opacity: 0.75;
}

.shroom-cow.run-out ~ .pasture-poop-spot .cow-poop,
.shroom-cow.run-out ~ #pasture-poop-spot .cow-poop {
  opacity: 1 !important;
  visibility: visible !important;
}

.poop-butt-connector {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(ellipse, #5c3a22, #3a2210);
  border-radius: 50%;
  opacity: 0;
  z-index: 2;
}

.cow-poop.swirling .poop-butt-connector {
  animation: butt-connector-squirt 1.3s ease-out forwards;
}

@keyframes butt-connector-squirt {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  10% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
}

.poop-nozzle {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 0;
  background: linear-gradient(180deg, #5c3a22, #6b4423 40%, #4a2f18);
  border-radius: 4px;
  opacity: 0;
  z-index: 3;
}

.cow-poop.swirling .poop-nozzle {
  animation: nozzle-squirt 1.3s ease-out forwards;
}

@keyframes nozzle-squirt {
  0% { height: 0; opacity: 0; }
  8% { height: 8px; opacity: 1; }
  20% { height: 28px; opacity: 1; }
  75% { height: 22px; opacity: 0.9; }
  100% { height: 6px; opacity: 0.5; }
}

.poop-softserve {
  position: relative;
  width: 56px;
  height: 0;
  top: 4px;
}

.swirl-layer {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 16px;
  margin-left: -20px;
  background: linear-gradient(180deg, #9a6a3c 0%, #7a5230 30%, #5c3a20 70%, #4a2f18 100%);
  border-radius: 42% 42% 38% 38%;
  border: 2px solid #3d2810;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.25),
    2px 2px 4px rgba(0,0,0,0.15);
  opacity: 0;
  transform: scale(0) rotate(0deg);
}

.swirl-layer.l1 { top: 0;    --swirl-rot: 0deg;   width: 42px; }
.swirl-layer.l2 { top: 12px; --swirl-rot: 42deg;  width: 40px; }
.swirl-layer.l3 { top: 24px; --swirl-rot: 84deg;  width: 38px; }
.swirl-layer.l4 { top: 35px; --swirl-rot: 126deg; width: 36px; }
.swirl-layer.l5 { top: 45px; --swirl-rot: 168deg; width: 34px; }
.swirl-layer.l6 { top: 54px; --swirl-rot: 210deg; width: 32px; }
.swirl-layer.l7 { top: 62px; --swirl-rot: 252deg; width: 30px; }
.swirl-layer.l8 { top: 69px; --swirl-rot: 294deg; width: 28px; height: 14px; }

.swirl-tip {
  position: absolute;
  top: 78px;
  left: 50%;
  width: 16px;
  height: 12px;
  margin-left: -8px;
  background: radial-gradient(ellipse, #8a5a32, #5c3a20);
  border-radius: 50% 50% 30% 30%;
  opacity: 0;
  transform: scale(0);
}

.cow-poop.swirling .swirl-layer.l1 { animation: softserve-swirl 0.2s ease-out 0.05s forwards; }
.cow-poop.swirling .swirl-layer.l2 { animation: softserve-swirl 0.2s ease-out 0.18s forwards; }
.cow-poop.swirling .swirl-layer.l3 { animation: softserve-swirl 0.2s ease-out 0.31s forwards; }
.cow-poop.swirling .swirl-layer.l4 { animation: softserve-swirl 0.2s ease-out 0.44s forwards; }
.cow-poop.swirling .swirl-layer.l5 { animation: softserve-swirl 0.2s ease-out 0.57s forwards; }
.cow-poop.swirling .swirl-layer.l6 { animation: softserve-swirl 0.2s ease-out 0.7s forwards; }
.cow-poop.swirling .swirl-layer.l7 { animation: softserve-swirl 0.2s ease-out 0.83s forwards; }
.cow-poop.swirling .swirl-layer.l8 { animation: softserve-swirl 0.2s ease-out 0.96s forwards; }
.cow-poop.swirling .swirl-tip  { animation: softserve-swirl 0.2s ease-out 1.08s forwards; }

.cow-poop.landed .poop-softserve {
  height: 96px;
}

.cow-poop.landed .poop-nozzle {
  height: 6px;
  opacity: 0.4;
}

@keyframes softserve-swirl {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(calc(var(--swirl-rot) - 90deg)) translateY(-6px);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) rotate(var(--swirl-rot)) translateY(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--swirl-rot)) translateY(0);
  }
}

.poop-splat {
  position: absolute;
  top: 86px;
  left: -8px;
  width: 0;
  height: 8px;
  background: radial-gradient(ellipse, #5a3818 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
}

.cow-poop.landed .poop-splat {
  animation: poop-splat 0.4s ease-out 0.2s forwards;
}

@keyframes poop-splat {
  to { width: 70px; opacity: 0.7; }
}

.poop-stink {
  position: absolute;
  top: -30px;
  left: 10px;
}

.stink-line {
  position: absolute;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  color: #6b5030;
  opacity: 0;
}

.cow-poop.landed .stink-line {
  animation: stink-rise 1.5s ease-out infinite;
}

.stink-line.s1 { left: 0; animation-delay: 0s; }
.stink-line.s2 { left: 14px; animation-delay: 0.3s; }
.stink-line.s3 { left: 28px; animation-delay: 0.6s; }

@keyframes stink-rise {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 0.8; }
  100% { transform: translateY(-28px); opacity: 0; }
}

.poop-flies .fly {
  position: absolute;
  font-size: 8px;
  color: #333;
  opacity: 0;
}

.cow-poop.landed .fly {
  animation: fly-buzz 1.2s ease-in-out infinite;
}

.fly.f1 { top: -10px; left: 20px; }
.fly.f2 { top: -18px; left: 35px; animation-delay: 0.4s; }
.fly.f3 { top: -6px; left: 48px; animation-delay: 0.8s; }

@keyframes fly-buzz {
  0%, 100% { transform: translate(0, 0); opacity: 0.8; }
  50% { transform: translate(6px, -8px); opacity: 1; }
}

/* Magic mushrooms — sprout from poop pile */
.shroom-patch {
  position: absolute;
  bottom: 58px;
  left: 34%;
  width: 70px;
  height: 60px;
  z-index: 6;
}

.shroom-patch.on-poop {
  bottom: auto;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
}

.cow-poop.grounded .shroom-patch.on-poop {
  top: -8px;
}

.magic-shroom {
  position: absolute;
  bottom: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  opacity: 0;
}

.shroom-patch.sprouting .magic-shroom {
  animation: shroom-sprout 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.shroom-patch.sprouting .sh1 { left: 0; animation-delay: 0s; }
.shroom-patch.sprouting .sh2 { left: 14px; animation-delay: 0.12s; }
.shroom-patch.sprouting .sh3 { left: 28px; animation-delay: 0.24s; }
.shroom-patch.sprouting .sh4 { left: 8px; animation-delay: 0.36s; }
.shroom-patch.sprouting .sh5 { left: 22px; animation-delay: 0.48s; }

@keyframes shroom-sprout {
  0% { transform: scaleY(0) scaleX(0.3); opacity: 0; }
  40% { transform: scaleY(0.6) scaleX(0.8); opacity: 1; }
  70% { transform: scaleY(1.1) scaleX(1.05); }
  100% { transform: scaleY(1) scaleX(1); opacity: 1; }
}

.shroom-stem {
  width: 6px;
  height: 16px;
  margin: 0 auto;
  background: linear-gradient(90deg, #f5f0e0, #fffaf0, #f0e8d8);
  border-radius: 3px;
  border: 1px solid #d8d0c0;
}

.shroom-cap {
  width: 22px;
  height: 14px;
  margin: 0 auto -2px;
  background: radial-gradient(ellipse at 40% 30%, #ff4444, #cc1111 60%, #991111);
  border-radius: 50% 50% 30% 30%;
  border: 2px solid #881111;
  position: relative;
}

.shroom-cap::before {
  content: '';
  position: absolute;
  inset: 3px;
  background:
    radial-gradient(circle at 30% 40%, #fff 2px, transparent 3px),
    radial-gradient(circle at 60% 55%, #fff 2px, transparent 3px),
    radial-gradient(circle at 45% 70%, #fff 1.5px, transparent 2px);
}

/* Beerface cow-poop path — golden cap mushrooms */
.mushroom-scene:not(.black-shroom-path):not(.butter-shroom-path):not(.cocoa-shroom-path) .shroom-cap {
  background: radial-gradient(ellipse at 38% 28%, #fff4a8, #ffd700 42%, #daa520 68%, #b8860b);
  border: 2px solid #b8860b;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.45);
}

.mushroom-scene:not(.black-shroom-path):not(.butter-shroom-path):not(.cocoa-shroom-path) .shroom-cap::before {
  background:
    radial-gradient(circle at 28% 38%, #fffde7 2px, transparent 3px),
    radial-gradient(circle at 58% 52%, #fff8dc 2px, transparent 3px),
    radial-gradient(circle at 44% 68%, #ffe566 1.5px, transparent 2px);
}

.mushroom-scene:not(.black-shroom-path):not(.butter-shroom-path):not(.cocoa-shroom-path) .picked-cap {
  background: radial-gradient(ellipse at 40% 30%, #fff4a8, #ffd700 55%, #daa520);
  border: 2px solid #b8860b;
}

.shroom-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(180,255,120,0.5), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: shroom-pulse 1s ease-in-out infinite alternate;
}

.mushroom-scene:not(.black-shroom-path):not(.butter-shroom-path):not(.cocoa-shroom-path) .shroom-glow {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.55), transparent 70%);
}

.shroom-patch.sprouting .shroom-glow {
  opacity: 1;
}

@keyframes shroom-pulse {
  from { transform: scale(0.8); opacity: 0.4; }
  to { transform: scale(1.2); opacity: 0.9; }
}

.shroom-patch.picked .magic-shroom {
  animation: shroom-picked 0.5s ease-in forwards;
}

@keyframes shroom-picked {
  to { transform: scaleY(0.2) scaleX(0.2); opacity: 0; }
}

/* Picked shrooms in hand */
.picked-shrooms {
  position: absolute;
  bottom: 120px;
  left: 42%;
  z-index: 16;
  opacity: 0;
}

.picked-shrooms.show {
  opacity: 1;
}

.picked-cap {
  position: absolute;
  width: 18px;
  height: 12px;
  background: radial-gradient(ellipse, #ff4444, #aa1111);
  border-radius: 50% 50% 30% 30%;
  border: 2px solid #881111;
  opacity: 0;
}

.picked-shrooms.show .picked-cap {
  animation: cap-to-mouth 0.6s ease-in forwards;
}

.picked-cap.pc1 { left: 0; animation-delay: 0s; }
.picked-cap.pc2 { left: 14px; animation-delay: 0.25s; }
.picked-cap.pc3 { left: 7px; top: -8px; animation-delay: 0.5s; }

@keyframes cap-to-mouth {
  0% { transform: translateY(40px) scale(0.5); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-90px) scale(0.3); opacity: 0; }
}

/* Trip warp */
.shroom-warp {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%,
    rgba(180, 80, 255, 0.5) 0%,
    rgba(80, 200, 120, 0.35) 40%,
    transparent 70%);
  z-index: 12;
  opacity: 0;
  pointer-events: none;
}

.shroom-warp.active {
  display: block;
  animation: shroom-warp-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes shroom-warp-pulse {
  from { opacity: 0.5; filter: hue-rotate(0deg); }
  to { opacity: 0.85; filter: hue-rotate(60deg); }
}

.dude.mush-watching .head {
  animation: mush-watch-down 0.8s ease-out forwards;
}

@keyframes mush-watch-down {
  to { transform: translateX(-50%) rotate(18deg) translateY(25px); }
}

.dude.mush-eating .head {
  animation: mush-eat-bob 0.5s ease-in-out 3;
}

@keyframes mush-eat-bob {
  0%, 100% { transform: translateX(-50%) rotate(20deg) translateY(28px); }
  50% { transform: translateX(-50%) rotate(22deg) translateY(32px); }
}

.dude.mush-tripping {
  animation: mush-trip-wobble 2s ease-in-out infinite;
}

.dude.mush-tripping .pupil {
  transform: translate(-50%, -50%) scale(2) !important;
  background: #000;
}

.dude.mush-tripping .eyeball {
  background: radial-gradient(circle, #fff 30%, #e0ffe0 100%);
}

.dude.mush-tripping .face {
  background: linear-gradient(180deg, #c8ffb8, var(--skin) 40%);
}

@keyframes mush-trip-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-2deg) scale(1.02); }
  75% { transform: rotate(2deg) scale(0.98); }
}

.dude.mush-abducted {
  animation: mush-abduct-suck 3.4s cubic-bezier(0.45, 0.05, 0.55, 1) forwards !important;
  transform-origin: center 65%;
  z-index: 18;
  filter: drop-shadow(0 0 0 transparent);
}

.dude.mush-abducted .head {
  animation: none !important;
  transform: translateX(-50%) !important;
}

@keyframes mush-abduct-suck {
  /* Phase 1 — shrink + spin on the ground */
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
  18% {
    transform: translateY(2px) scale(0.82) rotate(120deg);
    opacity: 1;
  }
  32% {
    transform: translateY(0) scale(0.62) rotate(260deg);
    opacity: 1;
  }
  42% {
    transform: translateY(0) scale(0.48) rotate(380deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(120, 255, 180, 0.4));
  }
  /* Phase 2 — sucked up the beam while shrinking + spinning */
  52% {
    transform: translateY(-35px) scale(0.38) rotate(480deg);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(140, 255, 200, 0.65));
  }
  68% {
    transform: translateY(-95px) scale(0.26) rotate(620deg);
    opacity: 0.98;
    filter: drop-shadow(0 0 18px rgba(160, 255, 220, 0.75));
  }
  82% {
    transform: translateY(-140px) scale(0.14) rotate(780deg);
    opacity: 0.85;
    filter: drop-shadow(0 0 22px rgba(180, 255, 240, 0.8));
  }
  94% {
    transform: translateY(-162px) scale(0.06) rotate(900deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-172px) scale(0.02) rotate(990deg);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* UFO */
.shroom-ufo {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%) scale(1.55);
  transform-origin: center top;
  width: 200px;
  height: 145px;
  z-index: 25;
  opacity: 0;
}

.shroom-ufo.descend {
  opacity: 1;
  animation: ufo-descend 2s ease-out forwards;
}

.shroom-ufo.abduct {
  animation: ufo-hover-abduct 3.4s ease-in-out forwards;
}

.shroom-ufo.leave {
  animation: ufo-fly-away 1.5s ease-in forwards;
}

@keyframes ufo-descend {
  0% { top: -180px; opacity: 0; transform: translateX(-50%) scale(1.55); }
  30% { opacity: 1; }
  100% { top: 10px; opacity: 1; transform: translateX(-50%) scale(1.55); }
}

@keyframes ufo-hover-abduct {
  0%, 100% { top: 10px; transform: translateX(-50%) scale(1.55); }
  50% { top: 5px; transform: translateX(-52%) scale(1.55); }
}

@keyframes ufo-fly-away {
  0% { top: 5px; opacity: 1; transform: translateX(-50%) scale(1.55); }
  100% { top: -240px; opacity: 0; transform: translateX(-30%) scale(0.5); }
}

.ufo-dome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 52px;
  background: radial-gradient(ellipse at 40% 30%, rgba(180,255,255,0.8), rgba(80,180,200,0.5));
  border-radius: 50% 50% 20% 20%;
  border: 3px solid rgba(200,240,255,0.7);
  z-index: 3;
  overflow: hidden;
}

.ufo-alien {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 28px;
  background: #7fff7f;
  border-radius: 50% 50% 40% 40%;
}

.ufo-alien::before,
.ufo-alien::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 6px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

.ufo-alien::before { left: 1px; }
.ufo-alien::after { right: 1px; }

.ufo-disc {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 185px;
  height: 46px;
  background: linear-gradient(180deg, #888 0%, #555 50%, #333 100%);
  border-radius: 50%;
  border: 3px solid #666;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 30px rgba(100,200,255,0.4);
}

.ufo-light {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #ffff66;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffff00;
  animation: ufo-blink 0.4s ease-in-out infinite alternate;
}

.ufo-light.l1 { left: 8%; animation-delay: 0s; }
.ufo-light.l2 { left: 22%; animation-delay: 0.08s; }
.ufo-light.l3 { left: 38%; animation-delay: 0.16s; }
.ufo-light.l4 { left: 54%; animation-delay: 0.24s; }
.ufo-light.l5 { left: 70%; animation-delay: 0.32s; }
.ufo-light.l6 { left: 84%; animation-delay: 0.4s; }

@keyframes ufo-blink {
  from { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
  to { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

.ufo-beam {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  opacity: 0;
  z-index: 1;
}

.shroom-ufo.abduct .ufo-beam {
  animation: ufo-beam-on 0.6s ease-out forwards;
}

@keyframes ufo-beam-on {
  to {
    width: 130px;
    height: 340px;
    opacity: 0.85;
  }
}

.shroom-ufo.abduct .beam-particles {
  animation: beam-particles-suck 0.35s linear infinite;
}

@keyframes beam-particles-suck {
  from { transform: translateY(30px); opacity: 0.6; }
  to { transform: translateY(-40px); opacity: 1; }
}

.beam-core {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(180,255,200,0.9) 0%,
    rgba(120,255,180,0.5) 40%,
    rgba(80,200,255,0.2) 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  animation: beam-flicker 0.15s ease-in-out infinite alternate;
}

@keyframes beam-flicker {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

.beam-particles {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0px, transparent 8px,
    rgba(255,255,255,0.3) 8px, rgba(255,255,255,0.3) 10px);
  animation: beam-particles-up 0.5s linear infinite;
}

@keyframes beam-particles-up {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.action-btn[data-action="mushrooms"]:hover:not(:disabled) {
  border-color: #cc3333;
  box-shadow: 0 7px 0 #0a0520, 0 0 20px rgba(180, 80, 255, 0.4);
}

.action-btn[data-action="acid"]:hover:not(:disabled) {
  border-color: #ff00ff;
  box-shadow: 0 7px 0 #0a0520, 0 0 22px rgba(255, 0, 255, 0.45);
}

.action-btn[data-action="angel-dust"]:hover:not(:disabled) {
  border-color: #b8a0ff;
  box-shadow: 0 7px 0 #0a0520, 0 0 22px rgba(184, 160, 255, 0.45);
}

/* ========== ANGEL DUST / PCP ========== */
.angel-dust-scene {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}

.angel-dust-scene.active {
  display: block;
}

#dude-container.angel-dust-active #dude {
  z-index: 10;
}

.pcp-cat {
  position: absolute;
  bottom: 72px;
  left: 110%;
  width: 88px;
  height: 72px;
  z-index: 11;
  opacity: 0;
}

.pcp-cat.walk-in {
  opacity: 1;
  animation: cat-walk-in 2s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

.pcp-cat.approach {
  opacity: 1;
  left: 42%;
  animation: cat-approach-dude 2.8s ease-in-out forwards;
}

.pcp-cat.nose-to-nose {
  opacity: 1;
  left: 46%;
  bottom: 82px;
  transform: scale(1.15);
}

.pcp-cat.bitten {
  opacity: 1;
  left: 46%;
  bottom: 82px;
  animation: cat-body-recoil 0.5s ease-out forwards;
}

@keyframes cat-body-recoil {
  0% { transform: scale(1.15); }
  25% { transform: scale(1.05) translateX(-6px); }
  50% { transform: scale(1.1) translateX(4px); }
  100% { transform: scale(1.08); }
}

@keyframes cat-walk-in {
  0% { left: 110%; opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  25% { transform: translateY(-4px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
  100% { left: 42%; opacity: 1; transform: translateY(0); }
}

@keyframes cat-approach-dude {
  0% { left: 42%; bottom: 72px; transform: scale(1); }
  100% { left: 46%; bottom: 82px; transform: scale(1.15); }
}

.cat-body {
  position: absolute;
  bottom: 8px;
  left: 18px;
  width: 52px;
  height: 28px;
  background: linear-gradient(180deg, #e8a050, #c87830);
  border-radius: 45% 45% 40% 40%;
  border: 2px solid #a06020;
  box-shadow: inset -3px -3px 6px rgba(0,0,0,0.15);
}

.cat-body::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 12px;
  width: 18px;
  height: 12px;
  background: rgba(255, 220, 180, 0.5);
  border-radius: 50%;
}

.cat-head {
  position: absolute;
  bottom: 28px;
  left: 8px;
  width: 44px;
  height: 40px;
  background: linear-gradient(180deg, #f0b060, #d89040);
  border-radius: 50% 50% 45% 45%;
  border: 2px solid #a06020;
  z-index: 2;
  transition: opacity 0.15s;
}

.cat-head.bitten-off {
  animation: cat-head-rip-away 0.25s ease-in forwards;
  pointer-events: none;
}

@keyframes cat-head-rip-away {
  0% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); }
  40% { opacity: 0.7; transform: scale(1.08) rotate(-12deg) translateY(4px); filter: brightness(1.4); }
  100% { opacity: 0; transform: scale(0.3) rotate(-25deg) translateY(18px); visibility: hidden; }
}

.cat-ear {
  position: absolute;
  top: -8px;
  width: 14px;
  height: 18px;
  background: #e09040;
  border: 2px solid #a06020;
  border-radius: 50% 50% 0 0;
}

.cat-ear.ce-l { left: 4px; transform: rotate(-12deg); }
.cat-ear.ce-r { right: 4px; transform: rotate(12deg); }

.cat-face {
  position: absolute;
  inset: 8px 6px 4px;
}

.cat-eye {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 12px;
  background: #1a5a1a;
  border-radius: 50%;
  border: 1px solid #0a3a0a;
}

.cat-eye.ce-left { left: 4px; }
.cat-eye.ce-right { right: 4px; }

.pcp-cat.nose-to-nose .cat-eye,
.pcp-cat.bitten .cat-eye {
  width: 12px;
  height: 14px;
  background: #2a8a2a;
}

.cat-nose {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  background: #f0a0a0;
  border-radius: 50% 50% 40% 40%;
}

.cat-whisker {
  position: absolute;
  top: 14px;
  width: 16px;
  height: 1px;
  background: #ddd;
}

.cat-whisker.cw-l1 { left: -10px; transform: rotate(-8deg); }
.cat-whisker.cw-l2 { left: -10px; top: 18px; transform: rotate(5deg); }
.cat-whisker.cw-r1 { right: -10px; transform: rotate(8deg); }
.cat-whisker.cw-r2 { right: -10px; top: 18px; transform: rotate(-5deg); }

.cat-pupil {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 6px;
  background: #000;
  border-radius: 50%;
}

.cat-mouth {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  border-bottom: 2px solid #8b4513;
  border-radius: 0 0 50% 50%;
}

/* Severed head — flies off after bite */
.cat-head-severed {
  position: absolute;
  bottom: 28px;
  left: 8px;
  width: 48px;
  z-index: 6;
  pointer-events: none;
}

.cat-head-severed.flying {
  animation: severed-head-tumble 1.4s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}

@keyframes severed-head-tumble {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  15% { transform: translate(8px, -12px) rotate(-35deg) scale(1.05); }
  40% { transform: translate(45px, -55px) rotate(120deg) scale(0.95); }
  70% { transform: translate(90px, -30px) rotate(280deg) scale(0.85); opacity: 0.95; }
  100% { transform: translate(130px, 40px) rotate(420deg) scale(0.7); opacity: 0.75; }
}

.severed-head-top {
  position: relative;
  width: 44px;
  height: 40px;
  background: linear-gradient(180deg, #f0b060, #d89040);
  border-radius: 50% 50% 45% 45%;
  border: 2px solid #a06020;
  z-index: 2;
}

.severed-face {
  position: absolute;
  inset: 8px 6px 4px;
}

.shock-eye {
  position: absolute;
  top: 4px;
  width: 14px;
  height: 16px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  animation: shock-eye-wobble 0.3s ease-in-out infinite alternate;
}

.shock-eye.se-l { left: 2px; }
.shock-eye.se-r { right: 2px; }

.shock-eye::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

@keyframes shock-eye-wobble {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.cat-tongue-out {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 14px;
  background: linear-gradient(180deg, #ff6b8a, #e04060);
  border-radius: 0 0 50% 50%;
  border: 1px solid #c03050;
}

.severed-neck {
  position: relative;
  width: 36px;
  height: 22px;
  margin: -4px auto 0;
  z-index: 1;
}

.neck-flesh-ring {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, #cc3333, #8b0000 60%, #4a0000);
}

.neck-flesh-ring.nfr1 {
  top: 0;
  width: 34px;
  height: 10px;
  border: 2px solid #660000;
}

.neck-flesh-ring.nfr2 {
  top: 6px;
  width: 28px;
  height: 8px;
  background: radial-gradient(ellipse, #aa2222, #660000);
}

.neck-bone {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 8px;
  background: linear-gradient(180deg, #f5f0e8, #d8d0c0);
  border: 1px solid #a09080;
  border-radius: 2px;
}

.neck-marrow {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 4px;
  background: radial-gradient(ellipse, #ffcccc, #cc6666);
  border-radius: 50%;
}

.neck-blood-gush {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 16px;
  background: radial-gradient(ellipse at center top, #ff0000, #8b0000 50%, transparent 75%);
  animation: neck-gush-pulse 0.35s ease-out infinite alternate;
}

@keyframes neck-gush-pulse {
  from { transform: translateX(-50%) scaleY(1); opacity: 0.9; }
  to { transform: translateX(-50%) scaleY(1.25); opacity: 1; }
}

.neck-drip {
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, #cc0000, #660000);
  border-radius: 0 0 3px 3px;
  animation: neck-drip-fall 0.8s ease-in infinite;
}

.neck-drip.nd1 { top: 18px; left: 10px; height: 0; animation-delay: 0s; }
.neck-drip.nd2 { top: 18px; right: 10px; height: 0; animation-delay: 0.2s; }

@keyframes neck-drip-fall {
  0% { height: 0; opacity: 0; }
  30% { height: 12px; opacity: 1; }
  100% { height: 22px; opacity: 0.6; }
}

.neck-tendon {
  position: absolute;
  width: 2px;
  height: 10px;
  background: linear-gradient(180deg, #ffaaaa, #cc4444);
  border-radius: 1px;
}

.neck-tendon.nt1 { top: 4px; left: 8px; transform: rotate(-15deg); }
.neck-tendon.nt2 { top: 4px; right: 8px; transform: rotate(15deg); }

/* Graphic neck stump on cat body */
.cat-neck-stump {
  position: absolute;
  bottom: 26px;
  left: 18px;
  width: 28px;
  height: 20px;
  z-index: 4;
}

.cat-neck-stump:not(.hidden) .stump-spurt {
  animation: stump-spurt-fountain 0.3s ease-out infinite alternate;
}

.stump-outer {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, #aa2222, #660000 55%, #3a0000);
  border-radius: 50% 50% 40% 40%;
  border: 2px solid #440000;
}

.stump-flesh {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 10px;
  background: radial-gradient(ellipse, #cc3333, #8b0000);
  border-radius: 50%;
  animation: stump-flesh-throb 0.5s ease-in-out infinite alternate;
}

@keyframes stump-flesh-throb {
  from { transform: translateX(-50%) scale(1); }
  to { transform: translateX(-50%) scale(1.1); }
}

.stump-bone {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: linear-gradient(180deg, #f0ebe0, #c8c0b0);
  border: 1px solid #908070;
  border-radius: 2px;
}

.stump-marrow {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 4px;
  background: radial-gradient(ellipse, #ffbbbb, #dd6666);
  border-radius: 50%;
}

.stump-spurt {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 18px;
  background: linear-gradient(180deg, #ff2222, #cc0000 60%, transparent);
  border-radius: 50% 50% 0 0;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8));
}

.stump-spurt.spurt2 {
  left: 40%;
  width: 6px;
  height: 14px;
  animation-delay: 0.15s;
  transform: translateX(-50%) rotate(-12deg);
}

@keyframes stump-spurt-fountain {
  from { transform: translateX(-50%) scaleY(0.85); opacity: 0.85; }
  to { transform: translateX(-50%) scaleY(1.35); opacity: 1; }
}

.stump-drip {
  position: absolute;
  width: 5px;
  background: #8b0000;
  border-radius: 0 0 4px 4px;
  animation: stump-drip-fall 1s ease-in infinite;
}

.stump-drip.sd1 { top: 16px; left: 6px; height: 0; }
.stump-drip.sd2 { top: 16px; right: 6px; height: 0; animation-delay: 0.35s; }

@keyframes stump-drip-fall {
  0% { height: 0; opacity: 0; }
  25% { height: 18px; opacity: 1; }
  100% { height: 32px; opacity: 0.7; }
}

.stump-tendon {
  position: absolute;
  width: 2px;
  height: 8px;
  background: linear-gradient(180deg, #ff9999, #aa3333);
}

.stump-tendon.st1 { top: 2px; left: 5px; transform: rotate(-20deg); }
.stump-tendon.st2 { top: 2px; right: 5px; transform: rotate(20deg); }

/* Blood spray burst from bite */
.cat-blood-spray {
  position: absolute;
  bottom: 40px;
  left: 20px;
  width: 60px;
  height: 60px;
  z-index: 7;
  pointer-events: none;
}

.cat-blood-spray.active .spray-bit {
  animation: blood-spray-burst 0.7s ease-out forwards;
}

.spray-bit {
  position: absolute;
  display: block;
  background: #cc0000;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

.spray-bit.sp1 { width: 8px; height: 6px; top: 50%; left: 50%; --sx: -35px; --sy: -45px; }
.spray-bit.sp2 { width: 6px; height: 5px; top: 50%; left: 50%; --sx: 40px; --sy: -30px; animation-delay: 0.02s; }
.spray-bit.sp3 { width: 10px; height: 7px; top: 50%; left: 50%; --sx: 25px; --sy: -55px; animation-delay: 0.04s; }
.spray-bit.sp4 { width: 5px; height: 4px; top: 50%; left: 50%; --sx: -50px; --sy: -20px; animation-delay: 0.01s; }
.spray-bit.sp5 { width: 7px; height: 5px; top: 50%; left: 50%; --sx: 55px; --sy: -15px; animation-delay: 0.03s; }
.spray-bit.sp6 { width: 4px; height: 3px; top: 50%; left: 50%; --sx: -20px; --sy: -60px; animation-delay: 0.05s; }
.spray-bit.sp7 { width: 9px; height: 6px; top: 50%; left: 50%; --sx: 15px; --sy: -70px; animation-delay: 0.02s; }
.spray-bit.sp8 { width: 5px; height: 5px; top: 50%; left: 50%; --sx: -45px; --sy: -50px; animation-delay: 0.06s; }
.spray-bit.sp9 { width: 6px; height: 4px; top: 50%; left: 50%; --sx: 60px; --sy: -40px; animation-delay: 0.04s; }
.spray-bit.sp10 { width: 8px; height: 5px; top: 50%; left: 50%; --sx: 0px; --sy: -80px; animation-delay: 0.01s; }

@keyframes blood-spray-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  20% { opacity: 1; transform: translate(calc(var(--sx, 0) * 0.4), calc(var(--sy, 0) * 0.4)) scale(1.3); }
  100% { opacity: 0.7; transform: translate(var(--sx, 0), var(--sy, 0)) scale(0.8); }
}

.cat-tail {
  position: absolute;
  bottom: 18px;
  right: 0;
  width: 10px;
  height: 36px;
  background: #d89040;
  border: 2px solid #a06020;
  border-radius: 6px;
  transform-origin: bottom center;
  animation: cat-tail-swish 0.8s ease-in-out infinite;
}

@keyframes cat-tail-swish {
  0%, 100% { transform: rotate(15deg); }
  50% { transform: rotate(-20deg); }
}

.cat-meo-bubble {
  position: absolute;
  top: -32px;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.cat-meo-bubble span {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 10px;
  border: 2px solid #fff;
}

.pcp-cat.meowing .cat-meo-bubble {
  opacity: 1;
  animation: meow-pop 0.9s ease-out forwards;
}

@keyframes meow-pop {
  0% { transform: scale(0.3) translateY(8px); opacity: 0; }
  30% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1) translateY(-8px); opacity: 0.9; }
}

/* Dude on angel dust */
.dude.angel-dust-stumble {
  animation: angel-dust-stumble 0.45s ease-in-out infinite;
}

@keyframes angel-dust-stumble {
  0%, 100% { transform: rotate(-4deg) translateX(0); }
  25% { transform: rotate(5deg) translateX(8px); }
  50% { transform: rotate(-6deg) translateX(-6px); }
  75% { transform: rotate(3deg) translateX(4px); }
}

.dude.angel-dust-fucked .pupil {
  animation: pcp-eyes 0.3s ease-in-out infinite alternate;
  transform: translate(-50%, -50%) scale(0.6);
}

.dude.angel-dust-fucked .eyeball {
  background: #ffffcc;
  border-color: #cc0000;
}

.dude.angel-dust-fucked .eyelid {
  height: 15%;
}

.dude.angel-dust-fucked .cheek {
  background: rgba(180, 60, 200, 0.35);
}

@keyframes pcp-eyes {
  from { transform: translate(-40%, -60%) scale(0.5); }
  to { transform: translate(-60%, -40%) scale(0.7); }
}

.dude.angel-dust-approach .head {
  animation: angel-lean-to-cat 2.8s ease-in-out forwards;
}

@keyframes angel-lean-to-cat {
  0% { transform: translateX(-50%) rotate(0) translateY(0); }
  100% { transform: translateX(-42%) rotate(18deg) translateY(28px); }
}

.dude.angel-dust-stare .head {
  transform: translateX(-42%) rotate(18deg) translateY(28px);
}

.dude.angel-dust-stare .mouth .lips {
  width: 52px;
  height: 28px;
  border-radius: 40%;
  animation: stare-growl-mouth 0.5s ease-in-out infinite alternate;
}

@keyframes stare-growl-mouth {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.12); }
}

.dude.angel-dust-bite .head {
  animation: angel-bite-chomp 0.5s ease-in forwards;
}

@keyframes angel-bite-chomp {
  0% { transform: translateX(-42%) rotate(18deg) translateY(28px); }
  35% { transform: translateX(-39%) rotate(24deg) translateY(34px) scale(1.08); }
  55% { transform: translateX(-40%) rotate(20deg) translateY(30px) scale(1.04); }
  100% { transform: translateX(-42%) rotate(16deg) translateY(26px); }
}

.bite-teeth {
  display: none;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 26px;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  z-index: 3;
  pointer-events: none;
}

.bite-tooth {
  width: 8px;
  height: 18px;
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 55%, #e8e8e8 100%);
  border-radius: 2px 2px 5px 5px;
  border: 1px solid #bbb;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.08);
}

.bite-tooth:nth-child(3),
.bite-tooth:nth-child(4) {
  height: 20px;
  width: 9px;
}

.dude.angel-dust-bite .bite-teeth {
  display: flex;
  animation: bite-teeth-snap 0.45s ease-in forwards;
}

.dude.angel-dust-bite .bite-tooth {
  height: 22px;
  border-color: #aaa;
}

.dude.angel-dust-bite .bite-tooth:nth-child(1),
.dude.angel-dust-bite .bite-tooth:nth-child(6) {
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 40%, #ccaaaa 100%);
}

.dude.angel-dust-bite .bite-tooth:nth-child(2),
.dude.angel-dust-bite .bite-tooth:nth-child(5) {
  background: linear-gradient(180deg, #fff 0%, #eecccc 50%, #aa4444 100%);
}

.dude.angel-dust-bite .bite-tooth:nth-child(3),
.dude.angel-dust-bite .bite-tooth:nth-child(4) {
  height: 24px;
  background: linear-gradient(180deg, #fff 0%, #ffdddd 45%, #cc2222 100%);
}

@keyframes bite-teeth-snap {
  0% { transform: translateX(-50%) scaleY(0.3); opacity: 0.5; }
  35% { transform: translateX(-50%) scaleY(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}

.dude.angel-dust-bite .mouth .lips {
  width: 64px;
  height: 40px;
  border-radius: 42%;
  background: #5a1818;
  border: 3px solid #660000;
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.dude.angel-dust-bite .mouth .tongue {
  display: none;
}

.dude.angel-dust-aftermath .bite-teeth {
  display: flex;
  opacity: 0.9;
}

.dude.angel-dust-aftermath .bite-tooth {
  height: 20px;
}

.dude.angel-dust-aftermath .mouth .lips {
  width: 58px;
  height: 34px;
  background: #6b2828;
  border-color: #660000;
}

.dude.angel-dust-aftermath .head {
  transform: translateX(-42%) rotate(16deg) translateY(26px);
}

/* Butterface angel dust — hide cat, show boyfriend murder path */
#dude-container.butter-angel-path .pcp-cat {
  display: none !important;
}

#dude-container:not(.butter-angel-path) .butter-angel-scene {
  display: none !important;
}

.butter-angel-scene {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  overflow: hidden;
}

.butter-angel-scene.active {
  display: block;
}

.butter-pcp-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 105, 180, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(40, 10, 30, 0.55), rgba(20, 8, 18, 0.75));
  opacity: 0;
}

.butter-angel-scene.active .butter-pcp-backdrop {
  animation: butter-pcp-backdrop-in 1.2s ease-out forwards;
}

@keyframes butter-pcp-backdrop-in {
  to { opacity: 1; }
}

.butter-drama-bubble {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 280px;
  text-align: center;
  z-index: 16;
  opacity: 0;
}

.butter-angel-scene.phase-argue .butter-drama-bubble {
  opacity: 1;
}

.drama-line {
  display: none;
  font-family: 'Bangers', cursive;
  font-size: 0.95rem;
  color: #ff69b4;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.7), 0 2px 4px #000;
  letter-spacing: 1px;
  line-height: 1.2;
  padding: 6px 10px;
  background: rgba(20, 8, 18, 0.65);
  border: 2px solid rgba(255, 105, 180, 0.45);
  border-radius: 10px;
}

.butter-angel-scene.phase-argue .drama-line.show {
  display: block;
  animation: drama-line-pop 0.5s ease-out;
}

@keyframes drama-line-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.bf-boyfriend {
  position: absolute;
  bottom: 48px;
  left: 108%;
  width: 110px;
  height: 200px;
  z-index: 14;
  opacity: 0;
}

.bf-boyfriend.walk-in {
  opacity: 1;
  animation: bf-walk-in 2.2s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes bf-walk-in {
  0% { left: 108%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 38%; opacity: 1; }
}

.bf-boyfriend.arguing,
.bf-boyfriend.pleading,
.bf-boyfriend.stabbed,
.bf-boyfriend.dying {
  opacity: 1;
  left: 38%;
}

.bf-boyfriend.stabbed {
  animation: bf-stab-recoil 0.6s ease-out forwards;
}

@keyframes bf-stab-recoil {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-12px) rotate(-8deg); }
  50% { transform: translateX(6px) rotate(4deg); }
  100% { transform: translateX(0) rotate(-2deg); }
}

.bf-boyfriend.dying {
  animation: bf-collapse 1.8s ease-in forwards;
}

@keyframes bf-collapse {
  0% { transform: rotate(-2deg) translateY(0); opacity: 1; }
  40% { transform: rotate(12deg) translateY(20px); }
  100% { transform: rotate(78deg) translateY(90px) translateX(-20px); opacity: 0.35; }
}

.bfb-afro {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 36px;
  background: radial-gradient(ellipse 100% 92% at 50% 38%, #2a1810, #1a0f08 58%, #120a06);
  border-radius: 46% 46% 42% 42%;
  z-index: 2;
}

.bfb-head {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 68px;
  z-index: 3;
}

.bfb-face {
  position: absolute;
  inset: 0;
  background: #6b4a35;
  border-radius: 48% 48% 44% 44%;
  box-shadow: inset -4px -6px 12px rgba(0, 0, 0, 0.25);
}

.bfb-brow {
  position: absolute;
  top: 14px;
  width: 18px;
  height: 5px;
  background: #1a0f08;
  border-radius: 2px;
}

.bfb-brow-l { left: 10px; transform: rotate(-8deg); }
.bfb-brow-r { right: 10px; transform: rotate(8deg); }

.bfb-eye {
  position: absolute;
  top: 22px;
  width: 16px;
  height: 14px;
}

.bfb-eye-l { left: 10px; }
.bfb-eye-r { right: 10px; }

.bfb-eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #2a1818;
  overflow: hidden;
}

.bf-boyfriend.pleading .bfb-pupil,
.bf-boyfriend.stabbed .bfb-pupil,
.bf-boyfriend.dying .bfb-pupil {
  width: 10px;
  height: 10px;
  animation: bf-pupil-fear 0.4s ease-in-out infinite alternate;
}

@keyframes bf-pupil-fear {
  from { transform: translate(-50%, -50%) scale(1.2); }
  to { transform: translate(-40%, -45%) scale(1.5); }
}

.bfb-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 8px;
  background: #1a1008;
  border-radius: 50%;
}

.bfb-teardrop {
  position: absolute;
  top: 36px;
  left: 14px;
  width: 7px;
  height: 10px;
  background: #120808;
  border-radius: 50% 50% 50% 50% / 35% 35% 75% 75%;
  transform: rotate(-10deg);
}

.bfb-nose {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 10px;
  background: #5a4030;
  border-radius: 40%;
}

.bfb-goatee {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 16px;
  background: radial-gradient(ellipse 80% 90% at 50% 20%, #1a1008, #0e0806 75%);
  border-radius: 40% 40% 55% 55%;
}

.bfb-mouth {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 10px;
  border-bottom: 3px solid #3a2018;
  border-radius: 0 0 50% 50%;
}

.bf-boyfriend.pleading .bfb-mouth {
  width: 28px;
  height: 14px;
  border: 2px solid #3a2018;
  border-radius: 50%;
  background: rgba(30, 15, 10, 0.5);
  animation: bf-plea-mouth 0.5s ease-in-out infinite alternate;
}

@keyframes bf-plea-mouth {
  from { transform: translateX(-50%) scaleY(0.9); }
  to { transform: translateX(-50%) scaleY(1.15); }
}

.bfb-fear-sweat {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 6px;
  height: 10px;
  background: linear-gradient(180deg, rgba(180, 220, 255, 0.8), transparent);
  border-radius: 50%;
  opacity: 0;
}

.bf-boyfriend.pleading .bfb-fear-sweat,
.bf-boyfriend.stabbed .bfb-fear-sweat {
  opacity: 1;
  animation: fear-sweat-drip 1s ease-in infinite;
}

@keyframes fear-sweat-drip {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

.bfb-neck {
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 18px;
  background: #5a4030;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}

.bfb-torso {
  position: absolute;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  z-index: 1;
}

.bfb-hoodie {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a3048, #1a2038);
  border-radius: 12px 12px 8px 8px;
  border: 2px solid #0a1020;
  box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.2);
}

.bfb-arm {
  position: absolute;
  top: 8px;
  width: 14px;
  height: 48px;
  background: linear-gradient(180deg, #2a3048, #1a2038);
  border: 2px solid #0a1020;
  border-radius: 8px;
  transform-origin: top center;
}

.bfb-arm-l { left: -6px; transform: rotate(18deg); }
.bfb-arm-r { right: -6px; transform: rotate(-18deg); }

.bf-boyfriend.pleading .bfb-arm-l {
  animation: bf-arm-plea-l 0.8s ease-in-out infinite alternate;
}

.bf-boyfriend.pleading .bfb-arm-r {
  animation: bf-arm-plea-r 0.8s ease-in-out infinite alternate 0.2s;
}

@keyframes bf-arm-plea-l {
  from { transform: rotate(18deg); }
  to { transform: rotate(-35deg); }
}

@keyframes bf-arm-plea-r {
  from { transform: rotate(-18deg); }
  to { transform: rotate(35deg); }
}

.bfb-plea-bubble {
  position: absolute;
  top: -8px;
  right: -72px;
  width: 88px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #ccc;
  border-radius: 12px;
  text-align: center;
  opacity: 0;
  z-index: 15;
}

.bfb-plea-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: #fff;
}

.bf-boyfriend.pleading .bfb-plea-bubble {
  opacity: 1;
  animation: plea-bubble-shake 0.6s ease-in-out infinite;
}

@keyframes plea-bubble-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.bfb-plea-main {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #333;
  line-height: 1.1;
}

.bfb-plea-sub {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.62rem;
  color: #666;
  margin-top: 2px;
}

.bfb-stab-wound {
  position: absolute;
  top: 118px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 50px;
  z-index: 8;
}

.bfb-stab-wound:not(.hidden) {
  display: block;
}

.stab-hole {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 18px;
  background: #1a0808;
  border-radius: 40%;
  box-shadow: inset 0 0 6px #000;
}

.stab-blood-spurt {
  position: absolute;
  background: #8b0000;
  border-radius: 50%;
  opacity: 0;
}

.bfb-stab-wound:not(.hidden) .stab-blood-spurt {
  animation: blood-spurt-out 0.5s ease-out forwards;
}

.stab-blood-spurt.sp1 { top: 4px; left: 8px; width: 10px; height: 10px; }
.stab-blood-spurt.sp2 { top: 0; right: 6px; width: 8px; height: 8px; animation-delay: 0.08s; }
.stab-blood-spurt.sp3 { top: 10px; left: 50%; width: 12px; height: 12px; animation-delay: 0.15s; }

@keyframes blood-spurt-out {
  0% { transform: scale(0); opacity: 0; }
  40% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.8) translateY(8px); opacity: 0.7; }
}

.stab-blood-drip {
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, #8b0000, #cc0000);
  border-radius: 0 0 4px 4px;
  opacity: 0;
}

.bfb-stab-wound:not(.hidden) .stab-blood-drip {
  animation: stab-drip-fall 1.2s ease-in forwards;
}

.stab-blood-drip.sd1 { top: 28px; left: 14px; height: 0; }
.stab-blood-drip.sd2 { top: 30px; left: 22px; height: 0; animation-delay: 0.2s; }
.stab-blood-drip.sd3 { top: 32px; right: 10px; height: 0; animation-delay: 0.35s; }

@keyframes stab-drip-fall {
  0% { height: 0; opacity: 0; }
  30% { height: 24px; opacity: 1; }
  100% { height: 40px; opacity: 0.6; }
}

.butter-pcp-knife {
  position: absolute;
  bottom: 120px;
  left: 52%;
  width: 70px;
  height: 24px;
  z-index: 20;
  transform-origin: 85% 50%;
  opacity: 0;
}

.butter-pcp-knife.stab-out {
  opacity: 1;
  animation: butter-knife-stab 0.55s ease-in forwards;
}

@keyframes butter-knife-stab {
  0% { transform: rotate(-30deg) translateX(0); opacity: 0.5; }
  35% { transform: rotate(8deg) translateX(42px); opacity: 1; }
  55% { transform: rotate(12deg) translateX(52px) scale(1.05); }
  100% { transform: rotate(6deg) translateX(46px); opacity: 1; }
}

.pcp-knife-blade {
  position: absolute;
  left: 0;
  top: 4px;
  width: 48px;
  height: 10px;
  background: linear-gradient(180deg, #e8e8e8, #a8a8a8, #c0c0c0);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pcp-knife-blade::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #b0b0b0;
}

.pcp-knife-handle {
  position: absolute;
  right: 0;
  top: 2px;
  width: 22px;
  height: 14px;
  background: linear-gradient(180deg, #4a2030, #2a1020);
  border-radius: 3px;
  border: 1px solid #1a0810;
}

.pcp-knife-blood {
  position: absolute;
  left: 4px;
  top: 5px;
  width: 0;
  height: 8px;
  background: linear-gradient(90deg, #8b0000, #cc0000);
  border-radius: 2px;
  opacity: 0;
}

.butter-pcp-knife.bloody .pcp-knife-blood {
  width: 36px;
  opacity: 1;
  animation: knife-blood-smear 0.4s ease-out forwards;
}

@keyframes knife-blood-smear {
  from { width: 0; }
  to { width: 38px; }
}

.butter-stab-gore {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.butter-stab-gore.active {
  display: block;
}

.stab-splat {
  position: absolute;
  background: radial-gradient(ellipse, #8b0000, #5a0000 60%, transparent 72%);
  border-radius: 50%;
  opacity: 0;
}

.butter-stab-gore.active .stab-splat {
  animation: splat-pop 0.4s ease-out forwards;
}

.stab-splat.ss1 { top: 38%; left: 42%; width: 28px; height: 22px; }
.stab-splat.ss2 { top: 45%; left: 48%; width: 18px; height: 14px; animation-delay: 0.1s; }
.stab-splat.ss3 { top: 52%; left: 40%; width: 22px; height: 18px; animation-delay: 0.15s; }
.stab-splat.ss4 { top: 35%; left: 52%; width: 14px; height: 12px; animation-delay: 0.08s; }
.stab-splat.ss5 { bottom: 80px; left: 36%; width: 50px; height: 20px; animation-delay: 0.25s; }

@keyframes splat-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.75; }
}

.stab-floor-pool {
  position: absolute;
  bottom: 36px;
  left: 32%;
  width: 0;
  height: 0;
  background: radial-gradient(ellipse, rgba(139, 0, 0, 0.7), rgba(100, 0, 0, 0.4) 60%, transparent 75%);
  border-radius: 50%;
  opacity: 0;
}

.butter-stab-gore.active .stab-floor-pool {
  animation: floor-pool-grow 2s ease-out 0.3s forwards;
}

@keyframes floor-pool-grow {
  to { width: 120px; height: 36px; opacity: 0.85; }
}

.butter-pcp-caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Rubik', sans-serif;
  font-size: 0.62rem;
  color: rgba(255, 200, 220, 0.8);
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: 0;
  z-index: 16;
}

.butter-angel-scene.phase-stab .butter-pcp-caption,
.butter-angel-scene.phase-dead .butter-pcp-caption {
  opacity: 1;
}

/* Butterface dude PCP murder animations */
#dude.char-butterface.angel-dust-fucked .pupil {
  animation: pcp-eyes 0.25s ease-in-out infinite alternate;
}

#dude.char-butterface.butter-pcp-turn .head {
  animation: butter-turn-to-bf 1.5s ease-in-out forwards;
}

@keyframes butter-turn-to-bf {
  to { transform: translateX(-48%) rotate(-14deg) translateY(12px); }
}

#dude.char-butterface.butter-pcp-rage .head {
  transform: translateX(-48%) rotate(-14deg) translateY(12px);
  animation: butter-rage-shake 0.35s ease-in-out infinite;
}

@keyframes butter-rage-shake {
  0%, 100% { transform: translateX(-48%) rotate(-14deg) translateY(12px); }
  50% { transform: translateX(-46%) rotate(-18deg) translateY(8px); }
}

#dude.char-butterface.butter-pcp-stab .head {
  animation: butter-stab-lunge 0.55s ease-in forwards;
}

@keyframes butter-stab-lunge {
  0% { transform: translateX(-48%) rotate(-14deg) translateY(12px); }
  40% { transform: translateX(-38%) rotate(-8deg) translateY(18px) scale(1.06); }
  100% { transform: translateX(-42%) rotate(-10deg) translateY(14px); }
}

#dude.char-butterface.butter-pcp-stab .mouth .lips {
  width: 48px;
  height: 22px;
  background: linear-gradient(180deg, #ff4a78, #c82858) !important;
  border-color: #a01848 !important;
}

#dude.char-butterface.butter-pcp-aftermath .head {
  transform: translateX(-42%) rotate(-10deg) translateY(14px);
}

#dude.char-butterface.butter-pcp-aftermath #blood-on-face {
  display: block;
}

#dude.char-butterface.butter-pcp-aftermath #blood-on-face.active .face-blood {
  opacity: 1;
}

/* Growl bubble */
#growl-bubble {
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
}

.growl-text {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.6rem;
  color: #ff4444;
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,0,0,0.6);
  opacity: 0;
}

.growl-text.g2 {
  font-size: 2rem;
  color: #cc0000;
}

#growl-bubble.active .growl-text {
  animation: growl-pop 0.8s ease-out forwards;
}

#growl-bubble.active .growl-text.g2 {
  animation: growl-pop 0.8s ease-out 1.2s forwards;
}

@keyframes growl-pop {
  0% { transform: scale(0.2); opacity: 0; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

/* Cat bite gore — face splatter */
#cat-bite-gore {
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 200px;
  z-index: 24;
}

.bite-flash-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 4px solid #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 20px #ff0000, inset 0 0 10px #ff4444;
}

#cat-bite-gore.active .bite-flash-ring {
  animation: bite-flash-expand 0.4s ease-out forwards;
}

@keyframes bite-flash-expand {
  0% { opacity: 1; transform: scale(0.5); border-color: #fff; }
  50% { opacity: 0.9; transform: scale(2.5); border-color: #ff0000; }
  100% { opacity: 0; transform: scale(4); border-color: #660000; }
}

.chomp-burst {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 2.4rem;
  color: #ff2222;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 0, 0, 0.9);
  opacity: 0;
  white-space: nowrap;
  z-index: 5;
}

#cat-bite-gore.active .chomp-burst {
  animation: chomp-burst-pop 0.6s ease-out forwards;
}

@keyframes chomp-burst-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.2) rotate(-10deg); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.4) rotate(5deg); }
  60% { opacity: 1; transform: translateX(-50%) scale(1.1) rotate(0); }
  100% { opacity: 0.85; transform: translateX(-50%) scale(1) rotate(0); }
}

#cat-bite-gore.active .cat-blood-splat {
  animation: cat-splat-pop 0.5s ease-out forwards;
}

.cat-blood-splat {
  position: absolute;
  background: radial-gradient(ellipse, #cc0000 0%, #660000 55%, transparent 75%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

.cat-blood-splat.cbs1 { width: 50px; height: 40px; top: 60px; left: 30px; }
.cat-blood-splat.cbs2 { width: 35px; height: 28px; top: 45px; right: 25px; animation-delay: 0.08s; }
.cat-blood-splat.cbs3 { width: 60px; height: 20px; top: 80px; left: 70px; animation-delay: 0.15s; }
.cat-blood-splat.cbs4 { width: 42px; height: 35px; top: 95px; left: 20px; animation-delay: 0.1s; }
.cat-blood-splat.cbs5 { width: 28px; height: 22px; top: 50px; left: 100px; animation-delay: 0.18s; }

@keyframes cat-splat-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.75; }
}

.face-blood-splatter {
  position: absolute;
  background: radial-gradient(ellipse, #aa0000 0%, #660000 50%, transparent 72%);
  border-radius: 40% 60% 50% 45%;
  opacity: 0;
  transform: scale(0);
}

#cat-bite-gore.active .face-blood-splatter {
  animation: face-splatter-burst 0.55s ease-out forwards;
}

.face-blood-splatter.fbs1 { width: 55px; height: 45px; top: 70px; left: 75px; animation-delay: 0.05s; }
.face-blood-splatter.fbs2 { width: 38px; height: 30px; top: 100px; left: 130px; animation-delay: 0.12s; }
.face-blood-splatter.fbs3 { width: 48px; height: 25px; top: 55px; left: 145px; animation-delay: 0.08s; }

@keyframes face-splatter-burst {
  0% { transform: scale(0) rotate(0); opacity: 0; }
  50% { transform: scale(1.4) rotate(15deg); opacity: 0.95; }
  100% { transform: scale(1) rotate(8deg); opacity: 0.8; }
}

.cat-blood-drip {
  position: absolute;
  width: 5px;
  background: linear-gradient(180deg, #cc0000, #660000);
  border-radius: 0 0 4px 4px;
  opacity: 0;
}

#cat-bite-gore.active .cat-blood-drip {
  animation: cat-blood-drip-fall 1.1s ease-in forwards;
}

.cat-blood-drip.cbd1 { top: 85px; left: 55px; height: 0; animation-delay: 0.25s; }
.cat-blood-drip.cbd2 { top: 90px; left: 120px; height: 0; animation-delay: 0.4s; }
.cat-blood-drip.cbd3 { top: 75px; left: 160px; height: 0; animation-delay: 0.55s; }

@keyframes cat-blood-drip-fall {
  0% { height: 0; opacity: 0; }
  30% { height: 28px; opacity: 1; }
  100% { height: 48px; opacity: 0.75; }
}

.cat-fur-tuft {
  position: absolute;
  top: 65px;
  left: 95px;
  width: 18px;
  height: 14px;
  background: linear-gradient(135deg, #e8a050, #c87830);
  border-radius: 50% 30% 50% 30%;
  border: 1px solid #a06020;
  opacity: 0;
  transform: scale(0);
}

#cat-bite-gore.active .cat-fur-tuft {
  animation: fur-tuft-fly 0.8s ease-out 0.1s forwards;
}

@keyframes fur-tuft-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(0); }
  40% { opacity: 1; transform: translate(15px, -20px) scale(1.2) rotate(45deg); }
  100% { opacity: 0.8; transform: translate(35px, 15px) scale(0.9) rotate(90deg); }
}

.cat-bone-chunk {
  position: absolute;
  top: 80px;
  left: 140px;
  width: 12px;
  height: 8px;
  background: linear-gradient(135deg, #f0ebe0, #c0b8a8);
  border: 1px solid #908070;
  border-radius: 2px;
  opacity: 0;
  transform: scale(0);
}

#cat-bite-gore.active .cat-bone-chunk {
  animation: bone-chunk-fly 0.9s ease-out 0.15s forwards;
}

@keyframes bone-chunk-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(0); }
  35% { opacity: 1; transform: translate(-10px, -25px) scale(1.1) rotate(-30deg); }
  100% { opacity: 0.85; transform: translate(-30px, 20px) scale(0.85) rotate(-75deg); }
}

/* ========== ACID TRIP ========== */
.dude.acid-dosing .lips {
  width: 58px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #c97b7b;
  background: #3a2020;
  top: 4px;
}

.dude.acid-dosing .tongue {
  display: flex;
  width: 42px;
  bottom: -6px;
  z-index: 4;
  animation: acid-tongue-out 0.65s ease-out forwards;
}

.dude.acid-dosing .tongue-root {
  width: 36px;
  height: 12px;
}

.dude.acid-dosing .tongue-mid {
  width: 34px;
  height: 32px;
}

.dude.acid-dosing .tongue-tip {
  width: 28px;
  height: 20px;
}

@keyframes acid-tongue-out {
  from { transform: translateX(-50%) translateY(0) scaleY(0.4); opacity: 0.6; }
  to { transform: translateX(-50%) translateY(18px) scaleY(1); opacity: 1; }
}

.dude.acid-swallowed .tongue {
  display: flex;
  animation: acid-tongue-in 0.5s ease-in forwards;
}

@keyframes acid-tongue-in {
  from { transform: translateX(-50%) translateY(18px) scaleY(1); opacity: 1; }
  to { transform: translateX(-50%) translateY(0) scaleY(0.2); opacity: 0; }
}

.acid-blotter {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
}

.blotter-square {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #ff6b9d, #7b4dff, #39ff14, #00ffff);
  border: 2px solid #fff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 100, 255, 0.8);
  opacity: 0;
  transform: scale(0) rotate(45deg);
}

.acid-blotter.on-tongue .blotter-square {
  animation: blotter-drop 0.7s ease-out forwards;
}

@keyframes blotter-drop {
  0% { opacity: 0; transform: scale(0) rotate(180deg) translateY(-40px); }
  60% { opacity: 1; transform: scale(1.1) rotate(0deg) translateY(42px); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(46px); }
}

.blotter-art {
  font-size: 0.85rem;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.dude.acid-tripping .pupil {
  transform: translate(-50%, -50%) scale(1.8) !important;
  background: radial-gradient(circle, #ff00ff, #000);
}

.dude.acid-tripping .eyeball {
  animation: acid-eye-swirl 2s linear infinite;
}

@keyframes acid-eye-swirl {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.dude.acid-shrinking {
  animation: acid-shrink-away 2.5s ease-in forwards !important;
  z-index: 8;
}

@keyframes acid-shrink-away {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(0.35) translateY(30px); opacity: 0.9; }
  100% { transform: scale(0.06) translateY(120px); opacity: 0; }
}

#dude-container.acid-active .acid-visions.active {
  display: block;
}

.acid-visions {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  overflow: hidden;
}

.acid-visions.phase-lights .trip-swirl,
.acid-visions.phase-lights .trip-orb {
  opacity: 1;
}

.trip-swirl {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  border: 4px solid transparent;
}

.trip-swirl.s1 {
  top: 20%; left: 10%; width: 80px; height: 80px;
  border-top-color: #ff00ff; border-right-color: #00ffff;
  animation: trip-spin 3s linear infinite;
}

.trip-swirl.s2 {
  top: 40%; right: 5%; width: 100px; height: 100px;
  border-bottom-color: #ffff00; border-left-color: #ff6600;
  animation: trip-spin 2s linear infinite reverse;
}

.trip-swirl.s3 {
  bottom: 25%; left: 30%; width: 120px; height: 120px;
  border-top-color: #39ff14; border-right-color: #ff00ff;
  animation: trip-spin 4s linear infinite;
}

@keyframes trip-spin {
  to { transform: rotate(360deg); }
}

.trip-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
}

.trip-orb.o1 {
  top: 30%; left: 40%; width: 30px; height: 30px;
  background: radial-gradient(circle, #fff, #ff00ff, transparent);
  animation: orb-float 2s ease-in-out infinite;
}

.trip-orb.o2 {
  top: 55%; left: 20%; width: 24px; height: 24px;
  background: radial-gradient(circle, #fff, #00ffff, transparent);
  animation: orb-float 2.5s ease-in-out infinite 0.5s;
}

.trip-orb.o3 {
  top: 25%; right: 25%; width: 36px; height: 36px;
  background: radial-gradient(circle, #fff, #ffff00, transparent);
  animation: orb-float 1.8s ease-in-out infinite 1s;
}

@keyframes orb-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { transform: translateY(-20px) scale(1.3); opacity: 1; }
}

.acid-visions.phase-creatures .trip-butterfly,
.acid-visions.phase-creatures .trip-dragon,
.acid-visions.phase-creatures .trip-flooble {
  opacity: 1;
}

.trip-butterfly {
  position: absolute;
  opacity: 0;
  display: flex;
  align-items: center;
}

.trip-butterfly.bf1 { top: 25%; left: 5%; animation: bf-flutter 1.2s ease-in-out infinite; }
.trip-butterfly.bf2 { top: 45%; right: 8%; animation: bf-flutter 1s ease-in-out infinite 0.3s; }
.trip-butterfly.bf3 { top: 60%; left: 25%; animation: bf-flutter 1.4s ease-in-out infinite 0.6s; }

.bf-wing {
  width: 22px; height: 28px;
  border-radius: 50% 50% 40% 40%;
}

.bf-wing.left {
  background: linear-gradient(135deg, #ff00ff, #7b4dff);
  transform: rotate(-20deg);
  animation: wing-flap-l 0.3s ease-in-out infinite alternate;
}

.bf-wing.right {
  background: linear-gradient(135deg, #00ffff, #39ff14);
  transform: rotate(20deg);
  animation: wing-flap-r 0.3s ease-in-out infinite alternate;
}

.bf-body {
  width: 6px; height: 18px;
  background: #333;
  border-radius: 3px;
}

@keyframes wing-flap-l {
  from { transform: rotate(-20deg) scaleY(1); }
  to { transform: rotate(-45deg) scaleY(0.85); }
}

@keyframes wing-flap-r {
  from { transform: rotate(20deg) scaleY(1); }
  to { transform: rotate(45deg) scaleY(0.85); }
}

@keyframes bf-flutter {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, -12px); }
}

.trip-dragon {
  position: absolute;
  top: 15%;
  right: -80px;
  width: 90px;
  height: 50px;
  opacity: 0;
  animation: dragon-fly-face 4s ease-in-out infinite;
}

.acid-visions.phase-creatures .trip-dragon {
  animation: dragon-fly-face 4s ease-in-out infinite;
}

@keyframes dragon-fly-face {
  0% { right: -80px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { right: 110%; opacity: 0; }
}

.dragon-body {
  position: absolute;
  left: 20px; top: 18px;
  width: 50px; height: 18px;
  background: linear-gradient(90deg, #6b2d8a, #9b4dff);
  border-radius: 40%;
}

.dragon-head {
  position: absolute;
  left: 0; top: 12px;
  width: 28px; height: 22px;
  background: #7b3daf;
  border-radius: 50% 30% 40% 40%;
}

.dragon-eye {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 10px;
  background: #ffff00;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff0;
}

.dragon-horn {
  position: absolute;
  top: -4px; left: 8px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 10px solid #ff6600;
}

.dragon-wing {
  position: absolute;
  top: 0;
  width: 32px; height: 24px;
  background: linear-gradient(135deg, rgba(255,0,255,0.7), rgba(0,255,255,0.5));
  border-radius: 50% 50% 20% 20%;
}

.dragon-wing.dw-left { left: 22px; transform: rotate(-15deg); animation: dw-flap 0.4s infinite alternate; }
.dragon-wing.dw-right { left: 42px; transform: rotate(15deg); animation: dw-flap 0.4s infinite alternate-reverse; }

.dragon-tail {
  position: absolute;
  right: 0; top: 22px;
  width: 30px; height: 8px;
  background: #6b2d8a;
  border-radius: 0 50% 50% 0;
}

@keyframes dw-flap {
  from { transform: rotate(-15deg) scaleY(1); }
  to { transform: rotate(-30deg) scaleY(0.8); }
}

.trip-flooble {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 50px;
  background: radial-gradient(ellipse, #ff69b4, #9b30ff);
  border-radius: 60% 40% 55% 45%;
  opacity: 0;
  animation: floob-bounce 2s ease-in-out infinite;
}

.floob-eye {
  position: absolute;
  width: 10px; height: 12px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #000;
}

.floob-eye.e1 { top: 8px; left: 8px; }
.floob-eye.e2 { top: 12px; left: 28px; }
.floob-eye.e3 { top: 8px; right: 8px; }

.floob-mouth {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 8px;
  background: #4a1040;
  border-radius: 0 0 50% 50%;
}

@keyframes floob-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-15px) scale(1.1); }
}

/* Acid cartoon episode */
.acid-cartoon {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
}

.acid-cartoon.active {
  opacity: 1;
  animation: cartoon-zoom-in 1.5s ease-out forwards;
}

@keyframes cartoon-zoom-in {
  from { transform: scale(0.1); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.acid-cartoon-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a0030, #300060, #003030, #600030);
  animation: acid-bg-shift 8s ease-in-out infinite alternate;
}

@keyframes acid-bg-shift {
  0% { filter: hue-rotate(0deg) saturate(1.5); }
  100% { filter: hue-rotate(120deg) saturate(2); }
}

.acid-kaleidoscope {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #ff6600, #39ff14, #7b4dff, #ff00ff);
  opacity: 0;
  animation: kaleido-spin 12s linear infinite;
}

.acid-cartoon.ep-5 .acid-kaleidoscope,
.acid-cartoon.ep-6 .acid-kaleidoscope {
  opacity: 0.25;
}

@keyframes kaleido-spin {
  to { transform: rotate(360deg); }
}

.acid-episode-title {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 0 10px #ff00ff;
  z-index: 5;
  opacity: 0;
}

.acid-cartoon.ep-1 .acid-episode-title {
  animation: title-flash 2s ease-out forwards;
}

.acid-episode-sub {
  position: absolute;
  top: 36px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 2px;
  z-index: 5;
  opacity: 0;
}

.acid-cartoon.ep-1 .acid-episode-sub {
  animation: title-flash 2s ease-out 0.5s forwards;
}

@keyframes title-flash {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
}

.acid-episode-credits {
  position: absolute;
  bottom: 8px; right: 10px;
  font-size: 0.5rem;
  color: rgba(255,255,255,0.5);
  z-index: 5;
  opacity: 0;
}

.acid-cartoon.ep-6 .acid-episode-credits {
  opacity: 1;
}

.acid-creature {
  position: absolute;
  opacity: 0;
  z-index: 4;
}

/* Cartoon butterflies ep-2 */
.acid-cartoon.ep-2 .cartoon-butterfly,
.acid-cartoon.ep-3 .cartoon-butterfly {
  opacity: 1;
}

.cartoon-butterfly {
  display: flex;
  align-items: center;
}

.cartoon-butterfly.cb1 { top: 20%; left: -30px; animation: cb-cross 5s linear infinite; }
.cartoon-butterfly.cb2 { top: 45%; animation: cb-cross 6s linear infinite 1s; }
.cartoon-butterfly.cb3 { top: 65%; animation: cb-cross 4.5s linear infinite 2s; }

@keyframes cb-cross {
  from { left: -30px; }
  to { left: 110%; }
}

.cb-wing {
  width: 28px; height: 34px;
  border-radius: 50%;
}

.cb-wing.l {
  background: linear-gradient(135deg, #ff1493, #ff69b4);
  animation: cb-flap-l 0.25s infinite alternate;
}

.cb-wing.r {
  background: linear-gradient(135deg, #00ced1, #7fff00);
  animation: cb-flap-r 0.25s infinite alternate;
}

.cb-body { width: 8px; height: 22px; background: #222; border-radius: 4px; }

@keyframes cb-flap-l { from { transform: rotate(-15deg); } to { transform: rotate(-40deg); } }
@keyframes cb-flap-r { from { transform: rotate(15deg); } to { transform: rotate(40deg); } }

/* Cartoon dragon ep-3 */
.cartoon-dragon {
  top: 30%; left: -120px;
  width: 110px; height: 60px;
}

.acid-cartoon.ep-3 .cartoon-dragon,
.acid-cartoon.ep-4 .cartoon-dragon {
  opacity: 1;
  animation: cd-soar 6s ease-in-out infinite;
}

@keyframes cd-soar {
  0% { left: -120px; top: 30%; }
  50% { left: 40%; top: 15%; }
  100% { left: 110%; top: 35%; }
}

.cd-body {
  position: absolute;
  left: 30px; top: 22px;
  width: 60px; height: 22px;
  background: linear-gradient(90deg, #4a0080, #8a2be2);
  border-radius: 50%;
}

.cd-head {
  position: absolute;
  left: 0; top: 14px;
  width: 36px; height: 30px;
  background: #6a0dad;
  border-radius: 50% 40% 45% 45%;
}

.cd-wing {
  position: absolute;
  top: 0;
  width: 40px; height: 30px;
  background: linear-gradient(135deg, rgba(255,20,147,0.8), rgba(0,191,255,0.6));
  border-radius: 50%;
}

.cd-wing.left { left: 25px; animation: cd-wing 0.35s infinite alternate; }
.cd-wing.right { left: 50px; animation: cd-wing 0.35s infinite alternate-reverse; }

.cd-fire {
  position: absolute;
  left: -8px; top: 24px;
  width: 20px; height: 14px;
  background: radial-gradient(ellipse, #ff6600, #ff0, transparent);
  border-radius: 50%;
  animation: fire-pulse 0.2s infinite alternate;
}

@keyframes cd-wing { from { transform: rotate(-10deg); } to { transform: rotate(-25deg); } }
@keyframes fire-pulse { from { opacity: 0.7; transform: scale(0.9); } to { opacity: 1; transform: scale(1.2); } }

/* Flooblemorph ep-4 */
.flooblemorph {
  bottom: 25%; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 75px;
  background: radial-gradient(ellipse, #ff6ec7, #7b68ee 60%, #4b0082);
  border-radius: 45% 55% 50% 50%;
}

.acid-cartoon.ep-4 .flooblemorph,
.acid-cartoon.ep-5 .flooblemorph {
  opacity: 1;
  animation: fm-wobble 3s ease-in-out infinite;
}

.fm-eye {
  position: absolute;
  width: 12px; height: 14px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #000;
  top: calc(10px + var(--i) * 8px);
  left: calc(15px + var(--i) * 14px);
}

.fm-tentacle {
  position: absolute;
  bottom: -20px;
  width: 8px; height: 25px;
  background: #9b59b6;
  border-radius: 4px;
  animation: tentacle-wave 1s ease-in-out infinite;
}

.fm-tentacle.t1 { left: 20px; animation-delay: 0s; }
.fm-tentacle.t2 { left: 42px; animation-delay: 0.2s; }
.fm-tentacle.t3 { right: 20px; animation-delay: 0.4s; }

@keyframes fm-wobble {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50% { transform: translateX(-50%) rotate(3deg) scale(1.05); }
}

@keyframes tentacle-wave {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(15deg); }
}

/* Snorb ep-4 */
.snorb-creature {
  top: 55%; left: 10%;
  width: 70px; height: 50px;
}

.acid-cartoon.ep-4 .snorb-creature {
  opacity: 1;
  animation: snorb-slide 5s ease-in-out infinite;
}

@keyframes snorb-slide {
  0%, 100% { left: 10%; }
  50% { left: 60%; }
}

.snorb-shell {
  width: 50px; height: 35px;
  background: linear-gradient(180deg, #dda0dd, #9370db);
  border-radius: 50% 50% 40% 40%;
  border: 3px solid #8a2be2;
}

.snorb-face {
  position: absolute;
  top: 8px; left: 8px;
  width: 30px; height: 20px;
  background: #e6e6fa;
  border-radius: 50%;
}

.snorb-trail {
  position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(147,112,219,0.6));
  border-radius: 3px;
}

/* Prism fox ep-4 */
.prism-fox {
  top: 20%; right: 15%;
  width: 60px; height: 45px;
}

.acid-cartoon.ep-4 .prism-fox,
.acid-cartoon.ep-5 .prism-fox {
  opacity: 1;
  animation: pf-hop 2s ease-in-out infinite;
}

.pf-head {
  width: 28px; height: 24px;
  background: linear-gradient(135deg, #ff00ff, #00ffff, #ffff00);
  clip-path: polygon(50% 0%, 100% 60%, 80% 100%, 20% 100%, 0% 60%);
}

.pf-body {
  position: absolute;
  top: 18px; left: 10px;
  width: 35px; height: 20px;
  background: linear-gradient(90deg, #7b4dff, #39ff14);
  border-radius: 40%;
}

.pf-tail {
  position: absolute;
  top: 20px; right: 0;
  width: 25px; height: 12px;
  background: linear-gradient(90deg, #ff6600, transparent);
  border-radius: 50%;
}

@keyframes pf-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Jellyphant ep-5 */
.jellyphant {
  bottom: 15%; left: 20%;
  width: 80px; height: 70px;
}

.acid-cartoon.ep-5 .jellyphant,
.acid-cartoon.ep-6 .jellyphant {
  opacity: 1;
  animation: jp-float 4s ease-in-out infinite;
}

.jp-dome {
  width: 70px; height: 45px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,182,193,0.8), rgba(186,85,211,0.5));
  border-radius: 50% 50% 40% 40%;
  border: 2px solid rgba(255,255,255,0.4);
}

.jp-trunk {
  position: absolute;
  bottom: 0; left: 25px;
  width: 12px; height: 30px;
  background: rgba(221,160,221,0.7);
  border-radius: 6px;
  animation: trunk-swing 2s ease-in-out infinite;
}

.jp-tentacles {
  position: absolute;
  bottom: -15px; left: 10px;
  width: 50px; height: 15px;
  background: repeating-linear-gradient(90deg, #da70d6 0px, #da70d6 8px, transparent 8px, transparent 12px);
  border-radius: 0 0 50% 50%;
}

@keyframes jp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes trunk-swing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(10deg); }
}

/* Rainbow worm ep-5 */
.rainbow-worm {
  top: 40%; left: -60px;
  width: 80px; height: 20px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
  border-radius: 50%;
}

.acid-cartoon.ep-5 .rainbow-worm,
.acid-cartoon.ep-6 .rainbow-worm {
  opacity: 1;
  animation: worm-crawl 4s linear infinite;
}

@keyframes worm-crawl {
  from { left: -60px; transform: rotate(0deg); }
  to { left: 110%; transform: rotate(360deg); }
}

/* Void moth ep-6 */
.void-moth {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 80px;
  background: radial-gradient(ellipse, #000 30%, #4b0082 60%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 40px #9400d3;
}

.acid-cartoon.ep-6 .void-moth {
  opacity: 1;
  animation: void-pulse 2s ease-in-out infinite;
}

@keyframes void-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* Tiny beerface — watches the acid cartoon trip */
.acid-tiny-dude {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 58px;
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}

.atd-neck {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  background: var(--skin);
  border: 1px solid var(--skin-shadow);
  border-radius: 0 0 4px 4px;
}

.atd-face {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 36px;
  background: linear-gradient(180deg, var(--skin) 0%, var(--skin-shadow) 100%);
  border-radius: 46% 46% 42% 42%;
  border: 2px solid var(--skin-shadow);
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.atd-cap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  width: 44px;
  height: 22px;
  z-index: 3;
}

.atd-cap-dome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 14px;
  background: radial-gradient(ellipse at 50% 20%, #142d52, #0c2340 70%);
  border-radius: 50% 50% 40% 40%;
  border: 1px solid #061228;
}

.atd-cap-bill {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 20px;
  height: 6px;
  background: #0c2340;
  border-radius: 2px 50% 40% 2px;
  border: 1px solid #061228;
  transform: rotate(-6deg);
}

.atd-cap-b {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  font-family: 'Bangers', cursive;
  font-size: 0.55rem;
  color: #bd3039;
  text-shadow: 1px 1px 0 #7a1a22;
  line-height: 1;
}

.atd-brow {
  position: absolute;
  top: 8px;
  width: 10px;
  height: 3px;
  background: #3a2518;
  border-radius: 2px;
}

.atd-brow-l { left: 5px; transform: rotate(18deg); }
.atd-brow-r { right: 5px; transform: rotate(-18deg); }

.atd-eye {
  position: absolute;
  top: 12px;
  width: 13px;
  height: 15px;
  z-index: 2;
}

.atd-eye-l { left: 4px; }
.atd-eye-r { right: 4px; }

.atd-eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  overflow: hidden;
  animation: atd-eye-wide 1.2s ease-in-out infinite alternate;
}

.atd-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 11px;
  background: radial-gradient(circle, #1a1a1a 30%, #000 100%);
  border-radius: 50%;
  animation: atd-pupil-dart 2s ease-in-out infinite;
}

@keyframes atd-eye-wide {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.18); }
}

@keyframes atd-pupil-dart {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25% { transform: translate(-65%, -55%) scale(1.1); }
  50% { transform: translate(-35%, -45%) scale(1.15); }
  75% { transform: translate(-55%, -60%) scale(1.05); }
}

.atd-nose {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  background: var(--skin-shadow);
  border-radius: 40%;
}

.atd-mouth {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  border-bottom: 2px solid #b07070;
  border-radius: 0 0 50% 50%;
  animation: atd-mouth-gasp 0.8s ease-in-out infinite alternate;
}

@keyframes atd-mouth-gasp {
  from { height: 5px; width: 12px; }
  to { height: 8px; width: 16px; }
}

.acid-cartoon.ep-1 .acid-tiny-dude,
.acid-cartoon.ep-2 .acid-tiny-dude,
.acid-cartoon.ep-3 .acid-tiny-dude,
.acid-cartoon.ep-4 .acid-tiny-dude,
.acid-cartoon.ep-5 .acid-tiny-dude,
.acid-cartoon.ep-6 .acid-tiny-dude {
  opacity: 1;
  animation: tiny-dude-wander 8s ease-in-out infinite;
}

@keyframes tiny-dude-wander {
  0%, 100% { left: 28%; transform: translateX(-50%) rotate(-3deg); }
  25% { left: 72%; transform: translateX(-50%) rotate(3deg); }
  50% { left: 50%; bottom: 36px; transform: translateX(-50%) scale(1.08) rotate(0deg); }
  75% { left: 22%; transform: translateX(-50%) rotate(-5deg); }
}

/* Black Beerface acid — blotter + path toggle */
#dude.char-black-beerface .blotter-classic { display: none; }
#dude.char-beerface .blotter-black { display: none; }

#dude.char-black-beerface .blotter-square {
  background: linear-gradient(135deg, #8b0000, #ff4500, #ffd700, #1a0a00);
  box-shadow: 0 0 14px rgba(255, 60, 0, 0.85);
}

#dude-container.black-acid-path .trip-swirl,
#dude-container.black-acid-path .trip-orb,
#dude-container.black-acid-path .trip-butterfly,
#dude-container.black-acid-path .trip-dragon,
#dude-container.black-acid-path .trip-flooble {
  display: none !important;
}

#dude-container:not(.black-acid-path) .black-acid-visions {
  display: none !important;
}

#dude-container.black-acid-path #acid-cartoon {
  display: none !important;
}

.black-acid-visions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#dude-container.black-acid-path .acid-visions.phase-lights .trip-cop-strobe,
#dude-container.black-acid-path .acid-visions.phase-lights .trip-heat-orb {
  opacity: 1;
}

.trip-cop-strobe {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
}

.trip-cop-strobe.st1 {
  background: radial-gradient(ellipse at 25% 40%, rgba(255, 0, 0, 0.55) 0%, transparent 55%);
  animation: cop-strobe-red 0.45s step-end infinite;
}

.trip-cop-strobe.st2 {
  background: radial-gradient(ellipse at 75% 55%, rgba(0, 80, 255, 0.5) 0%, transparent 55%);
  animation: cop-strobe-blue 0.45s step-end infinite 0.22s;
}

@keyframes cop-strobe-red {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

@keyframes cop-strobe-blue {
  0%, 49% { opacity: 0.15; }
  50%, 100% { opacity: 1; }
}

.trip-heat-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(2px);
}

.trip-heat-orb.ho1 {
  top: 28%; left: 35%; width: 40px; height: 40px;
  background: radial-gradient(circle, #fff8e0, #ff6600, transparent);
  animation: heat-orb-pulse 2.2s ease-in-out infinite;
}

.trip-heat-orb.ho2 {
  top: 52%; right: 18%; width: 32px; height: 32px;
  background: radial-gradient(circle, #ffe0a0, #cc2200, transparent);
  animation: heat-orb-pulse 1.8s ease-in-out infinite 0.4s;
}

.trip-heat-orb.ho3 {
  bottom: 30%; left: 22%; width: 48px; height: 48px;
  background: radial-gradient(circle, #fff, #ff3300, transparent);
  animation: heat-orb-pulse 2.5s ease-in-out infinite 0.8s;
}

@keyframes heat-orb-pulse {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.7; }
  50% { transform: scale(1.35) translateY(-14px); opacity: 1; }
}

#dude-container.black-acid-path .acid-visions.phase-creatures .trip-chain-ring,
#dude-container.black-acid-path .acid-visions.phase-creatures .trip-shadow-eye,
#dude-container.black-acid-path .acid-visions.phase-creatures .trip-reaper-silhouette,
#dude-container.black-acid-path .acid-visions.phase-creatures .trip-crack-smoke {
  opacity: 1;
}

.trip-chain-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px dashed #888;
  opacity: 0;
  box-shadow: inset 0 0 8px rgba(180, 180, 180, 0.4);
}

.trip-chain-ring.cr1 {
  top: 18%; left: 8%; width: 90px; height: 90px;
  animation: chain-ring-spin 4s linear infinite;
}

.trip-chain-ring.cr2 {
  top: 42%; right: 6%; width: 110px; height: 110px;
  animation: chain-ring-spin 3s linear infinite reverse;
}

.trip-chain-ring.cr3 {
  bottom: 20%; left: 28%; width: 130px; height: 130px;
  animation: chain-ring-spin 5s linear infinite;
}

@keyframes chain-ring-spin {
  to { transform: rotate(360deg); }
}

.trip-shadow-eye {
  position: absolute;
  width: 28px;
  height: 18px;
  background: #1a0a08;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
}

.trip-shadow-eye::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 8px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff2200, #660000);
  border-radius: 50%;
  animation: shadow-eye-blink 2.5s ease-in-out infinite;
}

.trip-shadow-eye.se1 { top: 22%; left: 42%; animation: shadow-eye-float 3s ease-in-out infinite; }
.trip-shadow-eye.se2 { top: 48%; left: 12%; animation: shadow-eye-float 2.6s ease-in-out infinite 0.5s; }
.trip-shadow-eye.se3 { top: 58%; right: 20%; animation: shadow-eye-float 3.2s ease-in-out infinite 1s; }

@keyframes shadow-eye-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(0.1); }
}

@keyframes shadow-eye-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -12px); }
}

.trip-reaper-silhouette {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 120px;
  opacity: 0;
  background:
    radial-gradient(ellipse 50px 30px at 50% 12%, #0a0a0a 70%, transparent 71%),
    linear-gradient(180deg, transparent 18%, #0a0a0a 18%, #0a0a0a 85%, transparent 86%);
  filter: drop-shadow(0 0 18px rgba(255, 0, 0, 0.35));
  animation: reaper-loom 4s ease-in-out infinite;
}

@keyframes reaper-loom {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.75; }
  50% { transform: translateX(-50%) scale(1.12); opacity: 1; }
}

.trip-crack-smoke {
  position: absolute;
  width: 50px;
  height: 60px;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(200, 200, 200, 0.5), transparent 70%);
  filter: blur(3px);
  animation: crack-smoke-rise 2.5s ease-in-out infinite;
}

.trip-crack-smoke.cs1 { bottom: 15%; left: 18%; }
.trip-crack-smoke.cs2 { bottom: 22%; right: 14%; animation-delay: 0.8s; }

@keyframes crack-smoke-rise {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-30px) scale(1.2); opacity: 0.9; }
}

/* Black Beerface acid nightmare cartoon */
.acid-cartoon-black {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
}

.acid-cartoon-black.active {
  opacity: 1;
  animation: nightmare-zoom-in 1.5s ease-out forwards;
}

@keyframes nightmare-zoom-in {
  from { transform: scale(0.08); opacity: 0; filter: brightness(2); }
  to { transform: scale(1); opacity: 1; filter: brightness(1); }
}

.acid-nightmare-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a0808 0%, #3a1010 35%, #2a1810 70%, #0a0604 100%);
  animation: nightmare-bg-pulse 6s ease-in-out infinite alternate;
}

@keyframes nightmare-bg-pulse {
  0% { filter: brightness(0.9) saturate(1.1); }
  100% { filter: brightness(1.1) saturate(1.4) hue-rotate(-8deg); }
}

.acid-nightmare-haze {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 60, 0, 0.15), transparent 60%);
  animation: nightmare-haze-drift 8s ease-in-out infinite alternate;
}

@keyframes nightmare-haze-drift {
  0% { transform: translateX(-5%) scale(1); opacity: 0.6; }
  100% { transform: translateX(5%) scale(1.08); opacity: 0.9; }
}

.acid-nightmare-title {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  color: #ffcc88;
  text-shadow: 0 0 12px #ff3300, 0 2px 4px #000;
  z-index: 5;
  opacity: 0;
  white-space: nowrap;
}

.acid-cartoon-black.ep-1 .acid-nightmare-title {
  animation: nightmare-title-flash 2s ease-out forwards;
}

.acid-nightmare-sub {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: rgba(255, 200, 150, 0.75);
  letter-spacing: 2px;
  z-index: 5;
  opacity: 0;
}

.acid-cartoon-black.ep-1 .acid-nightmare-sub {
  animation: nightmare-title-flash 2s ease-out 0.5s forwards;
}

@keyframes nightmare-title-flash {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
}

.acid-nightmare-credits {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.5rem;
  color: rgba(255, 180, 120, 0.55);
  z-index: 5;
  opacity: 0;
}

.acid-cartoon-black.ep-6 .acid-nightmare-credits {
  opacity: 1;
}

.nightmare-creature {
  position: absolute;
  opacity: 0;
  z-index: 4;
}

/* Cop cars ep-2 */
.nm-copcar {
  width: 90px;
  height: 44px;
}

.nm-copcar.cc1 { top: 28%; left: -100px; }
.nm-copcar.cc2 { top: 52%; left: -100px; }

.acid-cartoon-black.ep-2 .nm-copcar {
  opacity: 1;
}

.acid-cartoon-black.ep-2 .nm-copcar.cc1 {
  animation: nm-cop-swoop 5s linear infinite;
}

.acid-cartoon-black.ep-2 .nm-copcar.cc2 {
  animation: nm-cop-swoop 5.5s linear infinite 1.2s;
}

@keyframes nm-cop-swoop {
  0% { left: -100px; }
  100% { left: 110%; }
}

.nm-car-body {
  position: absolute;
  inset: 8px 0 0 0;
  background: linear-gradient(180deg, #2a2a3a, #1a1a28);
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 -4px 0 #0a0a14;
}

.nm-car-body::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 12px;
  right: 12px;
  height: 10px;
  background: #4a5a6a;
  border-radius: 4px 4px 0 0;
}

.nm-car-light {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 10px;
  border-radius: 3px;
}

.nm-light-l {
  left: 8px;
  background: #ff0000;
  animation: nm-light-flash 0.4s step-end infinite;
}

.nm-light-r {
  right: 8px;
  background: #0044ff;
  animation: nm-light-flash 0.4s step-end infinite 0.2s;
}

@keyframes nm-light-flash {
  0%, 49% { opacity: 1; box-shadow: 0 0 10px currentColor; }
  50%, 100% { opacity: 0.2; box-shadow: none; }
}

.nm-car-bar {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #ff0000 0 6px, #0044ff 6px 12px);
  border-radius: 2px;
  animation: nm-bar-flash 0.3s step-end infinite;
}

@keyframes nm-bar-flash {
  0%, 49% { filter: brightness(1.5); }
  50%, 100% { filter: brightness(0.6); }
}

/* Chain serpent ep-3 */
.nm-chain-serpent {
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 120px;
}

.acid-cartoon-black.ep-3 .nm-chain-serpent,
.acid-cartoon-black.ep-4 .nm-chain-serpent {
  opacity: 1;
  animation: nm-chain-writhe 3s ease-in-out infinite;
}

@keyframes nm-chain-writhe {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50% { transform: translateX(-50%) rotate(3deg) scale(1.05); }
}

.nm-chain-link {
  position: absolute;
  width: 28px;
  height: 18px;
  border: 3px solid #888;
  border-radius: 8px;
  background: linear-gradient(180deg, #aaa, #666);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.nm-chain-link.cl1 { top: 10px; left: 0; transform: rotate(-20deg); }
.nm-chain-link.cl2 { top: 0; left: 30px; transform: rotate(10deg); }
.nm-chain-link.cl3 { top: 18px; left: 58px; transform: rotate(-8deg); }
.nm-chain-link.cl4 { top: 8px; left: 88px; transform: rotate(15deg); }
.nm-chain-link.cl5 { top: 28px; left: 118px; transform: rotate(-12deg); }
.nm-chain-link.cl6 { top: 14px; left: 148px; transform: rotate(8deg); }

/* Gavel ep-4 */
.nm-gavel {
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 100px;
}

.acid-cartoon-black.ep-4 .nm-gavel {
  opacity: 1;
  animation: nm-gavel-slam 1.8s ease-in-out infinite;
}

@keyframes nm-gavel-slam {
  0%, 70%, 100% { transform: translateX(-50%) rotate(-25deg) translateY(0); }
  75% { transform: translateX(-50%) rotate(5deg) translateY(18px); }
  80% { transform: translateX(-50%) rotate(-5deg) translateY(12px); }
}

.nm-gavel-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 28px;
  background: linear-gradient(180deg, #6a5040, #3a2818);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.nm-gavel-handle {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 60px;
  background: linear-gradient(90deg, #5a4030, #8a6848, #5a4030);
  border-radius: 3px;
  transform-origin: top center;
}

.nm-gavel-impact {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(255, 200, 0, 0.6), transparent 70%);
  opacity: 0;
  animation: nm-impact-flash 1.8s ease-in-out infinite;
}

@keyframes nm-impact-flash {
  0%, 74%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  76% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  85% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

/* Living crack spoon ep-5 */
.nm-melt-spoon {
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 110px;
}

.acid-cartoon-black.ep-5 .nm-melt-spoon,
.acid-cartoon-black.ep-6 .nm-melt-spoon {
  opacity: 1;
  animation: nm-spoon-melt 4s ease-in-out infinite;
}

@keyframes nm-spoon-melt {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); filter: hue-rotate(0deg); }
  50% { transform: translateX(-50%) rotate(5deg) scale(1.08); filter: hue-rotate(20deg); }
}

.nm-spoon-bowl {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 28px;
  background: linear-gradient(180deg, #ccc, #888);
  border-radius: 50% 50% 40% 40%;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.3);
}

.nm-spoon-rock {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  background: linear-gradient(135deg, #e8e0d0, #b8a890);
  border-radius: 40%;
  animation: nm-rock-bubble 1.5s ease-in-out infinite;
}

@keyframes nm-rock-bubble {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.15); }
}

.nm-spoon-drip {
  position: absolute;
  bottom: -8px;
  width: 6px;
  height: 14px;
  background: linear-gradient(180deg, #ff6600, #cc3300);
  border-radius: 0 0 50% 50%;
  animation: nm-drip-fall 1.2s ease-in infinite;
}

.nm-spoon-drip.sd1 { left: 14px; }
.nm-spoon-drip.sd2 { right: 14px; animation-delay: 0.5s; }

@keyframes nm-drip-fall {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(24px); opacity: 0; }
}

.nm-spoon-handle {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 50px;
  background: linear-gradient(90deg, #999, #ccc, #999);
  border-radius: 3px;
}

.nm-spoon-face {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 28px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 6px;
}

.nm-spoon-eye {
  width: 10px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #ff0000;
  animation: nm-spoon-blink 2s ease-in-out infinite;
}

@keyframes nm-spoon-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.15); }
}

/* Ancestor faces ep-6 */
.nm-ancestor-faces {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.acid-cartoon-black.ep-6 .nm-ancestor-faces {
  opacity: 1;
}

.nm-ancestor {
  width: 48px;
  height: 64px;
  background: linear-gradient(180deg, #4a3828, #2a1810);
  border-radius: 45% 45% 40% 40%;
  opacity: 0;
  box-shadow: 0 0 20px rgba(255, 100, 0, 0.4);
  position: relative;
}

.nm-ancestor::before,
.nm-ancestor::after {
  content: '';
  position: absolute;
  top: 22px;
  width: 8px;
  height: 10px;
  background: radial-gradient(circle, #ffcc00, #663300);
  border-radius: 50%;
}

.nm-ancestor::before { left: 10px; }
.nm-ancestor::after { right: 10px; }

.acid-cartoon-black.ep-6 .nm-ancestor.af1 {
  animation: nm-ancestor-rise 2s ease-out 0.2s forwards;
}

.acid-cartoon-black.ep-6 .nm-ancestor.af2 {
  animation: nm-ancestor-rise 2s ease-out 0.6s forwards;
  transform: scale(1.15);
}

.acid-cartoon-black.ep-6 .nm-ancestor.af3 {
  animation: nm-ancestor-rise 2s ease-out 1s forwards;
}

@keyframes nm-ancestor-rise {
  0% { opacity: 0; transform: translateY(40px) scale(0.6); }
  100% { opacity: 0.9; transform: translateY(0) scale(1); }
}

.nm-ancestor-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 120, 0, 0.25), transparent 65%);
  animation: nm-ancestor-glow-pulse 3s ease-in-out infinite;
}

@keyframes nm-ancestor-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Tiny black dude in nightmare cartoon */
.acid-tiny-dude-black {
  position: absolute;
  bottom: 28px;
  left: 28%;
  transform: translateX(-50%);
  width: 36px;
  height: 52px;
  z-index: 6;
  opacity: 0;
}

.atdb-afro {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 22px;
  background: radial-gradient(ellipse, #1a1008, #0a0604);
  border-radius: 50%;
}

.atdb-face {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 30px;
  background: #5a4030;
  border-radius: 45%;
  box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.3);
}

.atdb-brow {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 3px;
  background: #1a1008;
  border-radius: 2px;
}

.atdb-brow-l { left: 4px; transform: rotate(-8deg); }
.atdb-brow-r { right: 4px; transform: rotate(8deg); }

.atdb-eye {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 10px;
}

.atdb-eye-l { left: 4px; }
.atdb-eye-r { right: 4px; }

.atdb-eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.atdb-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ff00ff, #000);
  border-radius: 50%;
  animation: atdb-pupil-swirl 2s linear infinite;
}

@keyframes atdb-pupil-swirl {
  0% { transform: translate(-50%, -50%) scale(1.5); }
  50% { transform: translate(-30%, -60%) scale(2); }
  100% { transform: translate(-50%, -50%) scale(1.5); }
}

.atdb-teardrop {
  position: absolute;
  top: 18px;
  left: 6px;
  width: 5px;
  height: 8px;
  background: #1a5090;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(-15deg);
}

.atdb-nose {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 5px;
  background: #4a3020;
  border-radius: 40%;
}

.atdb-goatee {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 10px;
  background: #1a1008;
  border-radius: 0 0 50% 50%;
}

.atdb-mouth {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 5px;
  border-bottom: 2px solid #3a2018;
  border-radius: 0 0 50% 50%;
  animation: atdb-mouth-gasp 0.8s ease-in-out infinite alternate;
}

@keyframes atdb-mouth-gasp {
  from { height: 4px; width: 10px; }
  to { height: 7px; width: 14px; }
}

.atdb-neck {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  background: #5a4030;
  border-radius: 0 0 4px 4px;
}

.acid-cartoon-black.ep-1 .acid-tiny-dude-black,
.acid-cartoon-black.ep-2 .acid-tiny-dude-black,
.acid-cartoon-black.ep-3 .acid-tiny-dude-black,
.acid-cartoon-black.ep-4 .acid-tiny-dude-black,
.acid-cartoon-black.ep-5 .acid-tiny-dude-black,
.acid-cartoon-black.ep-6 .acid-tiny-dude-black {
  opacity: 1;
  animation: atdb-wander 8s ease-in-out infinite;
}

@keyframes atdb-wander {
  0%, 100% { left: 22%; transform: translateX(-50%) rotate(-4deg); }
  25% { left: 68%; transform: translateX(-50%) rotate(4deg); }
  50% { left: 48%; bottom: 32px; transform: translateX(-50%) scale(1.06); }
  75% { left: 18%; transform: translateX(-50%) rotate(-6deg); }
}

/* Butterface acid — blotter path + visions */
#dude-container.butter-acid-path .trip-swirl,
#dude-container.butter-acid-path .trip-orb,
#dude-container.butter-acid-path .trip-butterfly,
#dude-container.butter-acid-path .trip-dragon,
#dude-container.butter-acid-path .trip-flooble,
#dude-container.butter-acid-path .black-acid-visions {
  display: none !important;
}

#dude-container:not(.butter-acid-path) .butter-acid-visions {
  display: none !important;
}

#dude-container.butter-acid-path #acid-cartoon,
#dude-container.butter-acid-path #acid-cartoon-black {
  display: none !important;
}

.butter-acid-visions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#dude-container.butter-acid-path .acid-visions.phase-lights .trip-pink-sparkle,
#dude-container.butter-acid-path .acid-visions.phase-lights .trip-champagne-bubble {
  opacity: 1;
}

.trip-pink-sparkle {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 182, 220, 0.9) 0%, rgba(255, 105, 180, 0.4) 40%, transparent 70%);
  animation: pink-sparkle-pulse 2s ease-in-out infinite;
}

.trip-pink-sparkle.ps1 { top: 18%; left: 12%; animation-delay: 0s; }
.trip-pink-sparkle.ps2 { top: 44%; right: 10%; animation-delay: 0.6s; }
.trip-pink-sparkle.ps3 { bottom: 22%; left: 38%; animation-delay: 1.1s; }

@keyframes pink-sparkle-pulse {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.25) rotate(20deg); opacity: 1; }
}

.trip-champagne-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  border: 2px solid rgba(255, 240, 200, 0.7);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 220, 160, 0.25));
  animation: champagne-rise 3.5s ease-in-out infinite;
}

.trip-champagne-bubble.ch1 { left: 20%; bottom: 10%; width: 22px; height: 22px; }
.trip-champagne-bubble.ch2 { left: 55%; bottom: 8%; width: 16px; height: 16px; animation-delay: 0.8s; }
.trip-champagne-bubble.ch3 { right: 22%; bottom: 14%; width: 28px; height: 28px; animation-delay: 1.5s; }

@keyframes champagne-rise {
  0% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-40px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-80px) scale(0.9); opacity: 0.2; }
}

#dude-container.butter-acid-path .acid-visions.phase-creatures .trip-karen-head,
#dude-container.butter-acid-path .acid-visions.phase-creatures .trip-phone-alert,
#dude-container.butter-acid-path .acid-visions.phase-creatures .trip-heart-float {
  opacity: 1;
}

.trip-karen-head {
  position: absolute;
  width: 36px;
  height: 42px;
  opacity: 0;
}

.trip-karen-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 22px;
  background: linear-gradient(180deg, #e8d8b0, #c8b890);
  border-radius: 50% 50% 30% 30%;
}

.trip-karen-head::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 18px;
  background: #f5d0c0;
  border-radius: 45%;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.08);
}

.trip-karen-head.kh1 { top: 20%; left: 8%; animation: karen-float 4s ease-in-out infinite; }
.trip-karen-head.kh2 { top: 38%; right: 12%; animation: karen-float 3.5s ease-in-out infinite 0.7s; }
.trip-karen-head.kh3 { bottom: 28%; left: 42%; animation: karen-float 4.2s ease-in-out infinite 1.2s; }

@keyframes karen-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-18px) rotate(6deg); }
}

.trip-phone-alert {
  position: absolute;
  width: 28px;
  height: 44px;
  background: linear-gradient(180deg, #2a2030, #1a1020);
  border-radius: 6px;
  border: 2px solid #ff69b4;
  opacity: 0;
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.5);
  animation: phone-vibrate 0.3s ease-in-out infinite;
}

.trip-phone-alert::after {
  content: '!';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #ff69b4;
}

.trip-phone-alert.pa1 { top: 26%; left: 62%; }
.trip-phone-alert.pa2 { bottom: 32%; right: 18%; animation-delay: 0.15s; }

@keyframes phone-vibrate {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-2deg); }
  75% { transform: translateX(2px) rotate(2deg); }
}

.trip-heart-float {
  position: absolute;
  width: 18px;
  height: 16px;
  opacity: 0;
  background: #ff69b4;
  transform: rotate(-45deg);
  animation: heart-float-up 3s ease-in-out infinite;
}

.trip-heart-float::before,
.trip-heart-float::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 16px;
  background: #ff69b4;
  border-radius: 50%;
}

.trip-heart-float::before { top: -8px; left: 0; }
.trip-heart-float::after { left: 8px; top: 0; }

.trip-heart-float.hf1 { left: 28%; top: 52%; }
.trip-heart-float.hf2 { right: 30%; top: 30%; animation-delay: 0.9s; }
.trip-heart-float.hf3 { left: 48%; bottom: 20%; animation-delay: 1.6s; }

@keyframes heart-float-up {
  0% { transform: rotate(-45deg) translateY(0) scale(0.8); opacity: 0.5; }
  50% { transform: rotate(-45deg) translateY(-24px) scale(1.1); opacity: 1; }
  100% { transform: rotate(-45deg) translateY(-48px) scale(0.7); opacity: 0.2; }
}

/* Butterface acid brunch cartoon */
.acid-cartoon-butter {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
}

.acid-cartoon-butter.active {
  opacity: 1;
  animation: brunch-zoom-in 1.5s ease-out forwards;
}

@keyframes brunch-zoom-in {
  from { transform: scale(0.08); opacity: 0; filter: brightness(1.8) saturate(1.4); }
  to { transform: scale(1); opacity: 1; filter: brightness(1) saturate(1); }
}

.acid-brunch-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffd0e8 0%, #ffb6d8 30%, #ffc8e0 55%, #ffe8f4 100%);
  animation: brunch-bg-shimmer 5s ease-in-out infinite alternate;
}

@keyframes brunch-bg-shimmer {
  0% { filter: brightness(1) hue-rotate(0deg); }
  100% { filter: brightness(1.08) hue-rotate(8deg); }
}

.acid-brunch-haze {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 215, 0, 0.2), transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 105, 180, 0.25), transparent 55%);
  animation: brunch-haze-drift 7s ease-in-out infinite alternate;
}

@keyframes brunch-haze-drift {
  0% { transform: translateX(-4%) scale(1); }
  100% { transform: translateX(4%) scale(1.06); }
}

.acid-brunch-title {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.15rem;
  color: #ff1493;
  text-shadow: 0 0 12px #ffb6c1, 0 2px 4px #fff;
  z-index: 5;
  opacity: 0;
  white-space: nowrap;
}

.acid-cartoon-butter.ep-1 .acid-brunch-title {
  animation: brunch-title-pop 2s ease-out forwards;
}

.acid-brunch-sub {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  color: rgba(180, 60, 120, 0.85);
  letter-spacing: 2px;
  z-index: 5;
  opacity: 0;
}

.acid-cartoon-butter.ep-1 .acid-brunch-sub {
  animation: brunch-title-pop 2s ease-out 0.5s forwards;
}

@keyframes brunch-title-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
}

.acid-brunch-credits {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.5rem;
  color: rgba(200, 80, 140, 0.65);
  z-index: 5;
  opacity: 0;
}

.acid-cartoon-butter.ep-6 .acid-brunch-credits {
  opacity: 1;
}

.brunch-creature {
  position: absolute;
  opacity: 0;
  z-index: 4;
}

/* Karens ep-2 */
.bt-karen {
  width: 72px;
  height: 56px;
}

.bt-karen.kk1 { top: 30%; left: -90px; }
.bt-karen.kk2 { top: 54%; left: -90px; }

.acid-cartoon-butter.ep-2 .bt-karen {
  opacity: 1;
}

.acid-cartoon-butter.ep-2 .bt-karen.kk1 {
  animation: bt-karen-swoop 4.8s linear infinite;
}

.acid-cartoon-butter.ep-2 .bt-karen.kk2 {
  animation: bt-karen-swoop 5.2s linear infinite 1s;
}

@keyframes bt-karen-swoop {
  0% { left: -90px; }
  100% { left: 110%; }
}

.bt-karen-hair {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 28px;
  background: linear-gradient(180deg, #e8d8b0, #c8b080);
  border-radius: 50% 50% 35% 35%;
}

.bt-karen-face {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 28px;
  background: #f5d0c0;
  border-radius: 45%;
}

.bt-karen-eye {
  position: absolute;
  top: 8px;
  width: 8px;
  height: 6px;
  background: #2a1818;
  border-radius: 50%;
}

.bt-karen-eye:first-of-type { left: 8px; }
.bt-karen-eye:last-of-type { right: 8px; }

.bt-karen-mouth {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 4px;
  border-bottom: 2px solid #c87878;
  border-radius: 0 0 50% 50%;
}

.bt-karen-sign {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.45rem;
  font-weight: bold;
  color: #8b0000;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Mimosa squad ep-3 */
.bt-mimosa-squad {
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 80px;
}

.acid-cartoon-butter.ep-3 .bt-mimosa-squad {
  opacity: 1;
  animation: mimosa-squad-bob 3s ease-in-out infinite;
}

@keyframes mimosa-squad-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-12px); }
}

.bt-mimosa {
  position: absolute;
  bottom: 0;
  width: 36px;
  height: 56px;
}

.bt-mimosa.mg1 { left: 0; animation: mimosa-tilt 2s ease-in-out infinite; }
.bt-mimosa.mg2 { left: 72px; animation: mimosa-tilt 2.2s ease-in-out infinite 0.4s; }
.bt-mimosa.mg3 { right: 0; animation: mimosa-tilt 2.4s ease-in-out infinite 0.8s; }

@keyframes mimosa-tilt {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(6deg); }
}

.bt-glass {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 38px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 240, 220, 0.3));
  border: 2px solid rgba(255, 200, 180, 0.8);
  border-radius: 0 0 8px 8px;
}

.bt-orange {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 22px;
  background: linear-gradient(180deg, #ffb347, #ff8c00);
  border-radius: 0 0 6px 6px;
}

.bt-glass::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}

/* Group chat ep-4 */
.bt-group-chat {
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 120px;
}

.acid-cartoon-butter.ep-4 .bt-group-chat {
  opacity: 1;
}

.bt-phone-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 88px;
  background: linear-gradient(180deg, #3a2848, #1a1028);
  border-radius: 10px;
  border: 3px solid #ff69b4;
  box-shadow: 0 0 16px rgba(255, 105, 180, 0.45);
}

.bt-chat-bubble {
  position: absolute;
  font-size: 0.42rem;
  font-weight: bold;
  color: #fff;
  background: #ff69b4;
  padding: 3px 6px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
}

.acid-cartoon-butter.ep-4 .bt-chat-bubble.cb-a {
  top: 0;
  right: -8px;
  opacity: 1;
  animation: chat-pop 0.6s ease-out forwards;
}

.acid-cartoon-butter.ep-4 .bt-chat-bubble.cb-b {
  top: 28px;
  left: -20px;
  opacity: 1;
  animation: chat-pop 0.6s ease-out 0.5s forwards;
}

.acid-cartoon-butter.ep-4 .bt-chat-bubble.cb-c {
  top: 52px;
  right: -12px;
  opacity: 1;
  animation: chat-pop 0.6s ease-out 1s forwards;
}

@keyframes chat-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Lip gloss elephant + prosecco worm ep-5 */
.bt-lipgloss-elephant {
  top: 28%;
  left: 18%;
  width: 80px;
  height: 64px;
}

.bt-prosecco-worm {
  top: 48%;
  right: 14%;
  width: 90px;
  height: 24px;
  background: linear-gradient(90deg, #ffd700, #fff8dc, #ffd700, #fffacd);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.acid-cartoon-butter.ep-5 .bt-lipgloss-elephant,
.acid-cartoon-butter.ep-5 .bt-prosecco-worm,
.acid-cartoon-butter.ep-6 .bt-lipgloss-elephant,
.acid-cartoon-butter.ep-6 .bt-prosecco-worm {
  opacity: 1;
}

.acid-cartoon-butter.ep-5 .bt-prosecco-worm,
.acid-cartoon-butter.ep-6 .bt-prosecco-worm {
  animation: prosecco-wiggle 2s ease-in-out infinite;
}

@keyframes prosecco-wiggle {
  0%, 100% { transform: rotate(-6deg) scaleX(1); }
  50% { transform: rotate(6deg) scaleX(1.1); }
}

.bt-ele-body {
  position: absolute;
  bottom: 0;
  width: 64px;
  height: 44px;
  background: radial-gradient(ellipse, #ffb6d8, #ff8ab8);
  border-radius: 50% 50% 40% 40%;
  animation: ele-bounce 2.5s ease-in-out infinite;
}

@keyframes ele-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.bt-ele-trunk {
  position: absolute;
  top: 20px;
  right: -8px;
  width: 28px;
  height: 8px;
  background: #ff8ab8;
  border-radius: 0 50% 50% 0;
  transform-origin: left center;
  animation: trunk-swing 1.5s ease-in-out infinite alternate;
}

@keyframes trunk-swing {
  from { transform: rotate(-15deg); }
  to { transform: rotate(15deg); }
}

.bt-ele-tube {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 22px;
  background: linear-gradient(180deg, #ff69b4, #ff1493);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 20, 147, 0.6);
}

/* Vibe check ep-6 */
.bt-vibe-check {
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 140px;
}

.acid-cartoon-butter.ep-6 .bt-vibe-check {
  opacity: 1;
  animation: vibe-pulse 1.2s ease-in-out infinite;
}

@keyframes vibe-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

.bt-vibe-screen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a1838, #1a1028);
  border-radius: 16px;
  border: 4px solid #ff69b4;
  box-shadow: 0 0 24px rgba(255, 105, 180, 0.55);
}

.bt-vibe-text {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  color: #ffb6c1;
  letter-spacing: 2px;
}

.bt-vibe-x {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  color: #ff0044;
  text-shadow: 0 0 16px #ff0044;
  animation: vibe-x-flash 0.8s step-end infinite;
}

@keyframes vibe-x-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* Tiny butterface in brunch cartoon */
.acid-tiny-dude-butter {
  position: absolute;
  bottom: 28px;
  left: 32%;
  transform: translateX(-50%);
  width: 36px;
  height: 52px;
  z-index: 6;
  opacity: 0;
}

.atbf-hair {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 24px;
  background: linear-gradient(180deg, #e8c878, #d4a85a);
  border-radius: 50% 50% 30% 30%;
}

.atbf-clip {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 8px;
  height: 5px;
  background: #ff69b4;
  border-radius: 2px;
  z-index: 2;
}

.atbf-face {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 30px;
  background: #e8b8a0;
  border-radius: 45%;
  box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.12);
}

.atbf-brow {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 2px;
  background: #c8a060;
  border-radius: 2px;
}

.atbf-brow-l { left: 4px; transform: rotate(-4deg); }
.atbf-brow-r { right: 4px; transform: rotate(4deg); }

.atbf-eye {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 10px;
}

.atbf-eye-l { left: 4px; }
.atbf-eye-r { right: 4px; }

.atbf-eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.atbf-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ff69b4, #4a2030);
  border-radius: 50%;
  animation: atbf-pupil-sparkle 2s linear infinite;
}

@keyframes atbf-pupil-sparkle {
  0% { transform: translate(-50%, -50%) scale(1.4); }
  50% { transform: translate(-35%, -55%) scale(1.8); }
  100% { transform: translate(-50%, -50%) scale(1.4); }
}

.atbf-blush {
  position: absolute;
  top: 18px;
  width: 7px;
  height: 5px;
  background: rgba(255, 120, 140, 0.55);
  border-radius: 50%;
}

.atbf-blush-l { left: 2px; }
.atbf-blush-r { right: 2px; }

.atbf-mouth {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: linear-gradient(180deg, #ff8ab0, #e85888);
  border-radius: 0 0 50% 50%;
  animation: atbf-mouth-gasp 0.7s ease-in-out infinite alternate;
}

@keyframes atbf-mouth-gasp {
  from { height: 5px; width: 10px; }
  to { height: 8px; width: 14px; }
}

.atbf-neck {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  background: #e8b8a0;
  border-radius: 0 0 4px 4px;
}

.acid-cartoon-butter.ep-1 .acid-tiny-dude-butter,
.acid-cartoon-butter.ep-2 .acid-tiny-dude-butter,
.acid-cartoon-butter.ep-3 .acid-tiny-dude-butter,
.acid-cartoon-butter.ep-4 .acid-tiny-dude-butter,
.acid-cartoon-butter.ep-5 .acid-tiny-dude-butter,
.acid-cartoon-butter.ep-6 .acid-tiny-dude-butter {
  opacity: 1;
  animation: atbf-wander 8s ease-in-out infinite;
}

@keyframes atbf-wander {
  0%, 100% { left: 24%; transform: translateX(-50%) rotate(-3deg); }
  25% { left: 70%; transform: translateX(-50%) rotate(4deg); }
  50% { left: 50%; bottom: 32px; transform: translateX(-50%) scale(1.08); }
  75% { left: 20%; transform: translateX(-50%) rotate(-5deg); }
}

#dude-container.cocoa-acid-path #acid-cartoon,
#dude-container.cocoa-acid-path #acid-cartoon-black,
#dude-container.cocoa-acid-path #acid-cartoon-butter {
  display: none !important;
}

#dude-container.cocoa-acid-path .trip-swirl,
#dude-container.cocoa-acid-path .trip-orb,
#dude-container.cocoa-acid-path .trip-butterfly,
#dude-container.cocoa-acid-path .trip-dragon,
#dude-container.cocoa-acid-path .trip-flooble,
#dude-container.cocoa-acid-path .black-acid-visions,
#dude-container.cocoa-acid-path .butter-acid-visions {
  display: none !important;
}

#dude-container:not(.cocoa-acid-path) .cocoa-acid-visions {
  display: none !important;
}

.cocoa-acid-visions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#dude-container.cocoa-acid-path .acid-visions.phase-lights .trip-purple-sparkle,
#dude-container.cocoa-acid-path .acid-visions.phase-lights .trip-fake-diamond,
#dude-container.cocoa-acid-path .acid-visions.phase-lights .trip-wig-tuft {
  opacity: 1;
}

.trip-purple-sparkle {
  position: absolute;
  width: 64px;
  height: 64px;
  opacity: 0;
  background: radial-gradient(circle, rgba(216, 180, 254, 0.95) 0%, rgba(107, 33, 168, 0.45) 42%, transparent 72%);
  animation: purple-sparkle-pulse 2.2s ease-in-out infinite;
}

.trip-purple-sparkle.pv1 { top: 16%; left: 10%; }
.trip-purple-sparkle.pv2 { top: 42%; right: 8%; animation-delay: 0.5s; }
.trip-purple-sparkle.pv3 { bottom: 20%; left: 36%; animation-delay: 1s; }

@keyframes purple-sparkle-pulse {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.55; }
  50% { transform: scale(1.2) rotate(18deg); opacity: 1; }
}

.trip-fake-diamond {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.85));
  animation: fake-diamond-spin 3s linear infinite;
}

.trip-fake-diamond.fd1 { top: 24%; left: 22%; }
.trip-fake-diamond.fd2 { top: 58%; right: 18%; animation-delay: 0.7s; }
.trip-fake-diamond.fd3 { bottom: 28%; left: 58%; animation-delay: 1.4s; }

@keyframes fake-diamond-spin {
  from { transform: rotate(0deg) scale(0.9); opacity: 0.5; }
  50% { transform: rotate(180deg) scale(1.15); opacity: 1; }
  to { transform: rotate(360deg) scale(0.9); opacity: 0.5; }
}

.trip-wig-tuft {
  position: absolute;
  width: 28px;
  height: 14px;
  opacity: 0;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 50% 50% 30% 30%;
  animation: wig-tuft-drift 4s ease-in-out infinite;
}

.trip-wig-tuft.wt1 { top: 30%; left: 44%; }
.trip-wig-tuft.wt2 { top: 52%; right: 30%; animation-delay: 1.2s; }

@keyframes wig-tuft-drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.45; }
  50% { transform: translateY(-28px) rotate(12deg); opacity: 0.95; }
}

#dude-container.cocoa-acid-path .acid-visions.phase-creatures .trip-salon-phone,
#dude-container.cocoa-acid-path .acid-visions.phase-creatures .trip-drama-pulse {
  opacity: 1;
}

.trip-salon-phone {
  position: absolute;
  width: 34px;
  height: 52px;
  opacity: 0;
  background: linear-gradient(180deg, #2a2030, #1a1020);
  border: 2px solid #6b21a8;
  border-radius: 8px;
  animation: salon-phone-buzz 1.4s ease-in-out infinite;
}

.trip-salon-phone::after {
  content: '💬';
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 0.75rem;
}

.trip-salon-phone.sal1 { top: 34%; left: 14%; }
.trip-salon-phone.sal2 { bottom: 26%; right: 16%; animation-delay: 0.6s; }

@keyframes salon-phone-buzz {
  0%, 100% { transform: rotate(-4deg); }
  25% { transform: rotate(4deg) translateX(2px); }
  75% { transform: rotate(-6deg) translateX(-2px); }
}

.trip-drama-pulse {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 68, 68, 0.65);
  animation: drama-pulse-ring 2s ease-out infinite;
}

.trip-drama-pulse.dp1 { top: 20%; right: 24%; }
.trip-drama-pulse.dp2 { bottom: 32%; left: 20%; animation-delay: 0.8s; }

@keyframes drama-pulse-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

#dude-container.cocoa-angel-path .pcp-cat {
  display: none !important;
}

#dude-container:not(.cocoa-angel-path) .cocoa-angel-scene {
  display: none !important;
}

.cocoa-angel-scene {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
}

.cocoa-angel-scene.active {
  opacity: 1;
}

.cocoa-pcp-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(107, 33, 168, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(10, 5, 20, 0.2), rgba(26, 16, 8, 0.55));
}

.cocoa-pcp-diamond-trail {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.cocoa-angel-scene.phase-chase .cocoa-pcp-diamond-trail,
.cocoa-angel-scene.phase-nightmare .cocoa-pcp-diamond-trail {
  opacity: 1;
}

.trail-stone {
  position: absolute;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #fff, #88c8ff);
  transform: rotate(45deg);
  animation: trail-stone-fall 2.2s ease-in infinite;
}

.trail-stone.ts1 { top: 8%; left: 42%; }
.trail-stone.ts2 { top: 22%; left: 48%; animation-delay: 0.3s; }
.trail-stone.ts3 { top: 36%; left: 52%; animation-delay: 0.6s; }
.trail-stone.ts4 { top: 50%; left: 46%; animation-delay: 0.9s; }
.trail-stone.ts5 { top: 64%; left: 50%; animation-delay: 1.2s; }

@keyframes trail-stone-fall {
  0% { transform: rotate(45deg) translateY(0); opacity: 1; }
  100% { transform: rotate(90deg) translateY(120px); opacity: 0.2; }
}

.cocoa-pcp-mannequin {
  position: absolute;
  top: 18%;
  right: -80px;
  width: 70px;
  height: 90px;
  opacity: 0;
}

.cocoa-angel-scene.phase-chase .cocoa-pcp-mannequin {
  opacity: 1;
  animation: cpm-swoop 3.5s ease-in-out infinite;
}

@keyframes cpm-swoop {
  0% { right: -80px; transform: rotate(-10deg); }
  50% { right: 28%; transform: rotate(8deg) scale(1.08); }
  100% { right: 110%; transform: rotate(-6deg); }
}

.cpm-neck {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 30px;
  background: #d4c4b0;
  border-radius: 4px;
}

.cpm-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 58px;
}

.cpm-wig {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 36px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
}

.cpm-face {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 38px;
  background: #c8b8a8;
  border-radius: 45%;
}

.cpm-sign {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.65rem;
  color: #d8b4fe;
  white-space: nowrap;
}

.cocoa-pcp-baby-daddy {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 100px;
  opacity: 0;
}

.cocoa-angel-scene.phase-nightmare .cocoa-pcp-baby-daddy {
  opacity: 1;
  animation: cpbd-loom 2.4s ease-in-out infinite alternate;
}

@keyframes cpbd-loom {
  from { transform: translateX(-50%) scale(0.9); filter: brightness(0.75); }
  to { transform: translateX(-50%) scale(1.06); filter: brightness(1.05); }
}

.cpbd-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  background: #1a1020;
  border-radius: 40% 40% 18% 18%;
  clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
}

.cpbd-cap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 22px;
  background: #2a2030;
  border-radius: 40% 40% 10% 10%;
}

.cpbd-plea {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.72rem;
  color: #ffd700;
  white-space: nowrap;
  text-shadow: 0 0 8px #6b21a8;
}

.cocoa-pcp-caption {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: #ffd700;
  text-shadow: 0 0 10px #6b21a8, 2px 2px 0 #000;
  z-index: 3;
  white-space: nowrap;
}

#dude.char-cocoa-butterface.cocoa-pcp-chase .head {
  animation: cocoa-chase-head 0.35s ease-in-out infinite alternate;
}

@keyframes cocoa-chase-head {
  from { transform: translateX(calc(-50% - 6px)) rotate(-6deg); }
  to { transform: translateX(calc(-50% + 6px)) rotate(6deg); }
}

.mushroom-scene.cocoa-shroom-path .shroom-cow,
.mushroom-scene.cocoa-shroom-path #pasture-poop-spot,
.mushroom-scene.cocoa-shroom-path .shroom-donkey-vendor,
.mushroom-scene.cocoa-shroom-path .shroom-slavery-vision,
.mushroom-scene.cocoa-shroom-path .mush-chain-overlay,
.mushroom-scene.cocoa-shroom-path .shroom-phone-dm,
.mushroom-scene.cocoa-shroom-path .shroom-delivery-bag,
.mushroom-scene.cocoa-shroom-path .shroom-cancel-vision,
.mushroom-scene.cocoa-shroom-path .shroom-ufo {
  display: none !important;
}

.mushroom-scene.cocoa-shroom-path .pasture-hill {
  background: linear-gradient(180deg, #1a1020 0%, #2a2038 100%);
}

.shroom-gas-station {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
}

.shroom-gas-station.active {
  opacity: 1;
}

.gas-shelf {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 80px;
  background: linear-gradient(180deg, #4a5568, #2d3748);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.gas-sign {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: #ffd700;
  text-shadow: 0 0 12px #ff6600;
}

.gas-shroom-bag {
  position: absolute;
  bottom: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 88px;
  background: linear-gradient(180deg, #8b4513, #5c2e0a);
  border-radius: 8px 8px 14px 14px;
  border: 2px solid #ffd700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.gas-bag-label {
  font-size: 0.5rem;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

.gas-bag-warn {
  font-size: 0.42rem;
  color: #ff6b6b;
}

.gas-ring-light {
  position: absolute;
  top: 22%;
  right: 18%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid rgba(255, 102, 0, 0.5);
  opacity: 0;
}

.shroom-gas-station.glow .gas-ring-light {
  opacity: 1;
  animation: gas-ring-spin 3s linear infinite;
}

@keyframes gas-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cocoa-shroom-live {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
}

.cocoa-shroom-live.active {
  opacity: 1;
}

.cocoa-live-frame {
  position: absolute;
  top: 12%;
  right: 8%;
  width: 160px;
  height: 200px;
  background: linear-gradient(180deg, #1a1020, #2a1830);
  border: 3px solid #ff0055;
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(255, 0, 85, 0.45);
}

.cocoa-live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff0055;
  color: #fff;
  font-family: 'Bangers', cursive;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  animation: live-badge-blink 1s step-end infinite;
}

@keyframes live-badge-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}

.cocoa-live-comment {
  position: absolute;
  left: 10px;
  right: 10px;
  font-size: 0.48rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 6px;
  border-radius: 6px;
}

.cocoa-live-comment.lc1 { top: 36px; }
.cocoa-live-comment.lc2 { top: 58px; }
.cocoa-live-comment.lc3 { top: 80px; }
.cocoa-live-comment.lc4 { top: 102px; }

.cocoa-live-viewers {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.5rem;
  color: #d8b4fe;
}

.cocoa-live-wig-fly {
  position: absolute;
  top: 22%;
  left: 38%;
  width: 90px;
  height: 40px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
  opacity: 0;
  transform: rotate(-12deg);
}

.cocoa-shroom-live.wig-fly .cocoa-live-wig-fly {
  opacity: 1;
  animation: cocoa-wig-fly-off 2.5s ease-out forwards;
}

@keyframes cocoa-wig-fly-off {
  0% { transform: translate(0, 0) rotate(-12deg); opacity: 1; }
  100% { transform: translate(80px, -60px) rotate(24deg); opacity: 0.85; }
}

.cocoa-live-stone-fly {
  position: absolute;
  top: 48%;
  left: 52%;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #fff, #88c8ff);
  transform: rotate(45deg);
  opacity: 0;
}

.cocoa-shroom-live.wig-fly .cocoa-live-stone-fly {
  opacity: 1;
  animation: cocoa-stone-fly-off 2s ease-in infinite;
}

@keyframes cocoa-stone-fly-off {
  0% { transform: rotate(45deg) translateY(0); }
  100% { transform: rotate(90deg) translateY(48px); opacity: 0.3; }
}

.shroom-warp.cocoa-warp {
  background: radial-gradient(circle, rgba(107, 33, 168, 0.45), rgba(255, 0, 85, 0.25), transparent 70%);
}

/* Cocoa salon acid cartoon */
.acid-cartoon-cocoa {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
}

.acid-cartoon-cocoa.active {
  opacity: 1;
  animation: salon-zoom-in 1.5s ease-out forwards;
}

@keyframes salon-zoom-in {
  from { transform: scale(0.08); opacity: 0; filter: brightness(1.8) saturate(1.4); }
  to { transform: scale(1); opacity: 1; filter: brightness(1) saturate(1); }
}

.acid-salon-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e9d5ff 0%, #c4b5fd 30%, #a78bfa 55%, #f5d0fe 100%);
  animation: salon-bg-shimmer 5s ease-in-out infinite alternate;
}

@keyframes salon-bg-shimmer {
  0% { filter: brightness(1) hue-rotate(0deg); }
  100% { filter: brightness(1.08) hue-rotate(12deg); }
}

.acid-salon-haze {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 215, 0, 0.22), transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(107, 33, 168, 0.28), transparent 55%);
  animation: salon-haze-drift 7s ease-in-out infinite alternate;
}

@keyframes salon-haze-drift {
  0% { transform: translateX(-4%) scale(1); }
  100% { transform: translateX(4%) scale(1.06); }
}

.acid-salon-title {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.05rem;
  color: #6b21a8;
  text-shadow: 0 0 12px #d8b4fe, 0 2px 4px #fff;
  z-index: 5;
  opacity: 0;
  white-space: nowrap;
}

.acid-cartoon-cocoa.ep-1 .acid-salon-title {
  animation: salon-title-pop 2s ease-out forwards;
}

.acid-salon-sub {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  color: rgba(88, 28, 135, 0.85);
  letter-spacing: 2px;
  z-index: 5;
  opacity: 0;
}

.acid-cartoon-cocoa.ep-1 .acid-salon-sub {
  animation: salon-title-pop 2s ease-out 0.5s forwards;
}

@keyframes salon-title-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
}

.acid-salon-credits {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.5rem;
  color: rgba(107, 33, 168, 0.65);
  z-index: 5;
  opacity: 0;
}

.acid-cartoon-cocoa.ep-6 .acid-salon-credits {
  opacity: 1;
}

.salon-creature {
  position: absolute;
  opacity: 0;
  z-index: 4;
}

.ck-diamond {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.ck-diamond.dk1 { top: 28%; left: -40px; }
.ck-diamond.dk2 { top: 48%; left: -50px; }
.ck-diamond.dk3 { top: 62%; left: -35px; }

.acid-cartoon-cocoa.ep-2 .ck-diamond {
  opacity: 1;
  animation: ck-diamond-fly 3.5s ease-in-out infinite;
}

.ck-diamond.dk2 { animation-delay: 0.4s; }
.ck-diamond.dk3 { animation-delay: 0.8s; }

@keyframes ck-diamond-fly {
  0% { left: -50px; transform: rotate(0deg) scale(0.8); opacity: 0.4; }
  50% { left: 55%; transform: rotate(180deg) scale(1.2); opacity: 1; }
  100% { left: 110%; transform: rotate(360deg) scale(0.7); opacity: 0.3; }
}

.ck-wig-mannequin {
  top: 32%;
  left: -100px;
  width: 64px;
  height: 80px;
}

.acid-cartoon-cocoa.ep-3 .ck-wig-mannequin {
  opacity: 1;
  animation: ck-mannequin-swoop 4s ease-in-out infinite;
}

@keyframes ck-mannequin-swoop {
  0% { left: -100px; transform: rotate(-12deg); }
  45% { left: 48%; transform: rotate(8deg) scale(1.1); }
  100% { left: 110%; transform: rotate(-6deg); }
}

.ck-mannequin-neck {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 28px;
  background: #d4c4b0;
  border-radius: 4px;
}

.ck-mannequin-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 56px;
}

.ck-mannequin-wig {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 34px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
}

.ck-mannequin-face {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 36px;
  background: #c8b8a8;
  border-radius: 45%;
}

.ck-group-chat {
  top: 38%;
  right: -90px;
  width: 72px;
  height: 90px;
}

.acid-cartoon-cocoa.ep-4 .ck-group-chat {
  opacity: 1;
  animation: ck-chat-slide 4.5s ease-in-out infinite;
}

@keyframes ck-chat-slide {
  0% { right: -90px; transform: rotate(6deg); }
  50% { right: 38%; transform: rotate(-4deg) scale(1.05); }
  100% { right: -90px; transform: rotate(6deg); }
}

.ck-phone-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 58px;
  background: linear-gradient(180deg, #2a2030, #1a1020);
  border-radius: 8px;
  border: 2px solid #6b21a8;
}

.ck-chat-bubble {
  position: absolute;
  font-size: 0.42rem;
  padding: 3px 5px;
  background: #fff;
  color: #4a148c;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ck-chat-bubble.cb-a { top: 0; left: -8px; }
.ck-chat-bubble.cb-b { top: 22px; right: -12px; background: #f3e8ff; }
.ck-chat-bubble.cb-c { top: 44px; left: -4px; animation: ck-typing 1s step-end infinite; }

@keyframes ck-typing {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}

.ck-mascara-elephant {
  top: 52%;
  left: 8%;
  width: 80px;
  height: 56px;
}

.acid-cartoon-cocoa.ep-5 .ck-mascara-elephant,
.acid-cartoon-cocoa.ep-6 .ck-mascara-elephant {
  opacity: 1;
  animation: ck-ele-bounce 3s ease-in-out infinite;
}

.ck-ele-body {
  position: absolute;
  bottom: 8px;
  left: 12px;
  width: 52px;
  height: 36px;
  background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
  border-radius: 50% 50% 40% 40%;
}

.ck-ele-trunk {
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 22px;
  height: 28px;
  background: #a78bfa;
  border-radius: 0 0 50% 50%;
  transform-origin: top center;
  animation: ck-trunk-swing 2s ease-in-out infinite alternate;
}

@keyframes ck-trunk-swing {
  from { transform: rotate(-12deg); }
  to { transform: rotate(18deg); }
}

.ck-ele-wand {
  position: absolute;
  top: 4px;
  right: 0;
  width: 6px;
  height: 28px;
  background: #1a1020;
  border-radius: 3px;
}

.ck-ele-wand::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 8px;
  background: #6b21a8;
  border-radius: 2px;
}

.ck-drama-worm {
  top: 68%;
  right: 12%;
  width: 90px;
  height: 14px;
  background: repeating-linear-gradient(90deg, #ff69b4 0 12px, #6b21a8 12px 24px);
  border-radius: 20px;
  transform: rotate(-8deg);
}

.acid-cartoon-cocoa.ep-5 .ck-drama-worm,
.acid-cartoon-cocoa.ep-6 .ck-drama-worm {
  opacity: 1;
  animation: ck-worm-wiggle 2.5s ease-in-out infinite;
}

@keyframes ck-worm-wiggle {
  0%, 100% { transform: rotate(-8deg) scaleX(1); }
  50% { transform: rotate(6deg) scaleX(1.15); }
}

@keyframes ck-ele-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.ck-baby-daddy {
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 72px;
}

.acid-cartoon-cocoa.ep-6 .ck-baby-daddy {
  opacity: 1;
  animation: ck-bd-loom 2.5s ease-in-out infinite alternate;
}

@keyframes ck-bd-loom {
  from { transform: translateX(-50%) scale(0.92); filter: brightness(0.85); }
  to { transform: translateX(-50%) scale(1.08); filter: brightness(1.1); }
}

.ck-bd-silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 58px;
  background: #1a1020;
  border-radius: 40% 40% 20% 20%;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.ck-bd-text {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.85rem;
  color: #ffd700;
  text-shadow: 0 0 8px #6b21a8;
  white-space: nowrap;
}

.ck-bd-ex {
  position: absolute;
  top: 18px;
  right: 8px;
  font-size: 1.4rem;
  color: #ff4444;
  animation: ck-bd-ex-flash 0.8s step-end infinite;
}

@keyframes ck-bd-ex-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

.acid-tiny-dude-cocoa {
  position: absolute;
  bottom: 28px;
  left: 32%;
  transform: translateX(-50%);
  width: 40px;
  height: 56px;
  z-index: 6;
  opacity: 0;
}

.atcb-wig {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 26px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
}

.atcb-face {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 34px;
  background: #4a3428;
  border-radius: 45%;
  box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.2);
}

.atcb-brow {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 2px;
  background: #1a1008;
  border-radius: 2px;
}

.atcb-brow-l { left: 4px; transform: rotate(-4deg); }
.atcb-brow-r { right: 4px; transform: rotate(4deg); }

.atcb-eye {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 10px;
}

.atcb-eye-l { left: 4px; }
.atcb-eye-r { right: 4px; }

.atcb-eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.atcb-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #a855f7, #4a148c);
  border-radius: 50%;
  animation: atcb-pupil-sparkle 2s linear infinite;
}

@keyframes atcb-pupil-sparkle {
  0% { transform: translate(-50%, -50%) scale(1.4); }
  50% { transform: translate(-35%, -55%) scale(1.8); }
  100% { transform: translate(-50%, -50%) scale(1.4); }
}

.atcb-lash {
  position: absolute;
  top: 8px;
  width: 14px;
  height: 6px;
  border-top: 3px solid #6b21a8;
  border-radius: 50% 50% 0 0;
}

.atcb-lash-l { left: 2px; transform: rotate(-6deg); }
.atcb-lash-r { right: 2px; transform: rotate(6deg); }

.atcb-earring.broken {
  position: absolute;
  top: 20px;
  right: -2px;
  width: 6px;
  height: 10px;
  border: 2px solid #d4af37;
  border-radius: 50%;
  background: transparent;
}

.atcb-earring.broken::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #fff, #88c8ff);
  animation: atcb-stone-dangle 1.5s ease-in-out infinite;
}

@keyframes atcb-stone-dangle {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(45deg) translateY(4px); }
}

.atcb-mouth {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  background: linear-gradient(180deg, #c85888, #a04068);
  border-radius: 0 0 50% 50%;
  animation: atcb-mouth-gasp 0.7s ease-in-out infinite alternate;
}

@keyframes atcb-mouth-gasp {
  from { height: 5px; width: 11px; }
  to { height: 9px; width: 16px; }
}

.atcb-neck {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background: #4a3428;
  border-radius: 0 0 6px 6px;
}

.acid-cartoon-cocoa.ep-1 .acid-tiny-dude-cocoa,
.acid-cartoon-cocoa.ep-2 .acid-tiny-dude-cocoa,
.acid-cartoon-cocoa.ep-3 .acid-tiny-dude-cocoa,
.acid-cartoon-cocoa.ep-4 .acid-tiny-dude-cocoa,
.acid-cartoon-cocoa.ep-5 .acid-tiny-dude-cocoa,
.acid-cartoon-cocoa.ep-6 .acid-tiny-dude-cocoa {
  opacity: 1;
  animation: atcb-wander 8s ease-in-out infinite;
}

@keyframes atcb-wander {
  0%, 100% { left: 22%; transform: translateX(-50%) rotate(-4deg); }
  25% { left: 68%; transform: translateX(-50%) rotate(5deg); }
  50% { left: 48%; bottom: 34px; transform: translateX(-50%) scale(1.1); }
  75% { left: 18%; transform: translateX(-50%) rotate(-6deg); }
}

/* ========== COCOA DUI — HENNY DRUNK DRIVING ========== */
#dude-container.cocoa-dui-active #dude,
#dude-container.cocoa-dui-active #prop-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cocoa-dui-scene {
  position: absolute;
  inset: 0;
  z-index: 55;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
}

.cocoa-dui-scene.active {
  opacity: 1;
}

.cdui-night-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0618 0%, #1a1030 38%, #2a1840 100%);
}

.cdui-streetlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cdui-lamp {
  position: absolute;
  top: 8%;
  width: 4px;
  height: 48px;
  background: #888;
  border-radius: 2px;
}

.cdui-lamp::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 10px;
  background: #ffd966;
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(255, 217, 102, 0.65);
}

.cdui-lamp.l1 { left: 8%; }
.cdui-lamp.l2 { left: 48%; }
.cdui-lamp.l3 { right: 10%; }

.cdui-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58%;
}

.cdui-road-scroll {
  position: absolute;
  inset: 0;
  background: #2a2a35;
  overflow: hidden;
}

.cdui-stripe {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 36px;
  background: #ffd700;
  border-radius: 2px;
  opacity: 0.85;
}

.cdui-stripe.s1 { top: 8%; }
.cdui-stripe.s2 { top: 24%; }
.cdui-stripe.s3 { top: 40%; }
.cdui-stripe.s4 { top: 56%; }
.cdui-stripe.s5 { top: 72%; }
.cdui-stripe.s6 { top: 88%; }

.cocoa-dui-scene.phase-driving .cdui-road-scroll,
.cocoa-dui-scene.phase-hit-1 .cdui-road-scroll,
.cocoa-dui-scene.phase-hit-2 .cdui-road-scroll,
.cocoa-dui-scene.phase-hit-3 .cdui-road-scroll {
  animation: cdui-road-zoom 0.35s linear infinite;
}

@keyframes cdui-road-zoom {
  from { transform: scaleY(1) translateY(0); }
  to { transform: scaleY(1.08) translateY(12px); }
}

.cdui-sidewalk {
  position: absolute;
  top: 0;
  right: 0;
  width: 28%;
  height: 100%;
  background: linear-gradient(90deg, #3a3a42, #4a4a55);
}

.cdui-curb {
  position: absolute;
  top: 0;
  right: 26%;
  width: 6px;
  height: 100%;
  background: #888;
}

.cdui-car {
  position: absolute;
  bottom: 22%;
  left: 18%;
  width: 200px;
  height: 88px;
  z-index: 6;
  transition: transform 0.4s ease;
}

.cocoa-dui-scene.phase-enter .cdui-car {
  animation: cdui-car-enter 1.2s ease-out forwards;
}

@keyframes cdui-car-enter {
  from { transform: translateX(-120px) scale(0.85); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

.cocoa-dui-scene.phase-driving .cdui-car,
.cocoa-dui-scene.phase-hit-1 .cdui-car,
.cocoa-dui-scene.phase-hit-2 .cdui-car,
.cocoa-dui-scene.phase-hit-3 .cdui-car {
  animation: cdui-car-swerve 0.55s ease-in-out infinite;
}

@keyframes cdui-car-swerve {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(14px) rotate(3deg); }
  75% { transform: translateX(-10px) rotate(-4deg); }
}

.cocoa-dui-scene.phase-crash .cdui-car,
.cocoa-dui-scene.phase-aftermath .cdui-car {
  animation: cdui-car-wreck 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes cdui-car-wreck {
  0% { transform: translateX(0) rotate(0deg); }
  35% { transform: translateX(48px) rotate(28deg) scale(1.05); }
  70% { transform: translateX(62px) rotate(42deg) scale(0.95); }
  100% { transform: translateX(58px) rotate(38deg) scale(0.92); }
}

.cdui-car-shadow {
  position: absolute;
  bottom: -6px;
  left: 12%;
  width: 78%;
  height: 12px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  filter: blur(3px);
}

.cdui-car-body {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 100%;
  height: 52px;
  background: linear-gradient(180deg, #6b21a8, #4a148c);
  border-radius: 12px 28px 8px 8px;
  border: 3px solid #2a0848;
  box-shadow: inset -6px -4px 12px rgba(0, 0, 0, 0.25);
}

.cdui-car-roof {
  position: absolute;
  top: -28px;
  left: 38px;
  width: 108px;
  height: 32px;
  background: linear-gradient(180deg, #7c3aed, #5b21b6);
  border-radius: 18px 18px 4px 4px;
  border: 3px solid #2a0848;
}

.cdui-car-door {
  position: absolute;
  top: 10px;
  left: 72px;
  width: 2px;
  height: 34px;
  background: rgba(0, 0, 0, 0.35);
}

.cdui-car-trim {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  height: 4px;
  background: #ffd700;
  border-radius: 2px;
  opacity: 0.7;
}

.cdui-wheel {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 34px;
  background: #1a1a1a;
  border-radius: 50%;
  border: 4px solid #444;
  z-index: 2;
}

.cdui-wheel::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 3px solid #666;
  border-radius: 50%;
}

.cocoa-dui-scene.phase-driving .cdui-wheel,
.cocoa-dui-scene.phase-hit-1 .cdui-wheel,
.cocoa-dui-scene.phase-hit-2 .cdui-wheel,
.cocoa-dui-scene.phase-hit-3 .cdui-wheel {
  animation: cdui-wheel-spin 0.4s linear infinite;
}

@keyframes cdui-wheel-spin {
  to { transform: rotate(360deg); }
}

.cdui-wheel-rear { left: 18px; }
.cdui-wheel-front { right: 22px; }

.cdui-windshield {
  position: absolute;
  top: -18px;
  left: 44px;
  width: 96px;
  height: 44px;
  background: linear-gradient(135deg, rgba(180, 220, 255, 0.35), rgba(120, 160, 200, 0.2));
  border: 3px solid #2a0848;
  border-radius: 8px 18px 4px 4px;
  overflow: hidden;
  z-index: 4;
}

.cdui-glass-reflection {
  position: absolute;
  top: 4px;
  left: 8px;
  width: 28px;
  height: 18px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  transform: skewX(-12deg);
}

.cdui-windshield-cracks {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(32deg, transparent 42%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0.5) 44%, transparent 44%),
    linear-gradient(-18deg, transparent 55%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.45) 57%, transparent 57%),
    linear-gradient(68deg, transparent 30%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 32%, transparent 32%);
}

.cocoa-dui-scene.phase-hit-1 .cdui-windshield-cracks { opacity: 0.35; }
.cocoa-dui-scene.phase-hit-2 .cdui-windshield-cracks { opacity: 0.55; }
.cocoa-dui-scene.phase-hit-3 .cdui-windshield-cracks { opacity: 0.75; }
.cocoa-dui-scene.phase-crash .cdui-windshield-cracks,
.cocoa-dui-scene.phase-aftermath .cdui-windshield-cracks { opacity: 1; }

.cdui-blood-splatter {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #cc0000, #660000);
  opacity: 0;
}

.cdui-blood-splatter.bs1 { width: 18px; height: 14px; top: 12px; left: 20px; }
.cdui-blood-splatter.bs2 { width: 12px; height: 10px; top: 22px; right: 14px; }
.cdui-blood-splatter.bs3 { width: 22px; height: 16px; bottom: 6px; left: 38px; }

.cocoa-dui-scene.phase-hit-1 .cdui-blood-splatter.bs1 { opacity: 0.9; }
.cocoa-dui-scene.phase-hit-2 .cdui-blood-splatter.bs2 { opacity: 0.9; }
.cocoa-dui-scene.phase-hit-3 .cdui-blood-splatter.bs3 { opacity: 0.95; }

.cdui-driver {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 38px;
  z-index: 5;
}

.cdui-driver-wig {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 22px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
  z-index: 2;
}

.cocoa-dui-scene.phase-driving .cdui-driver-wig,
.cocoa-dui-scene.phase-hit-1 .cdui-driver-wig,
.cocoa-dui-scene.phase-hit-2 .cdui-driver-wig,
.cocoa-dui-scene.phase-hit-3 .cdui-driver-wig {
  animation: cdui-wig-bounce 0.5s ease-in-out infinite;
}

@keyframes cdui-wig-bounce {
  0%, 100% { transform: translateX(calc(-50% + 2px)) rotate(4deg); }
  50% { transform: translateX(calc(-50% - 3px)) rotate(-6deg); }
}

.cdui-driver-face {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 28px;
  background: #4a3428;
  border-radius: 45%;
  z-index: 1;
}

.cdui-driver-brow {
  position: absolute;
  top: 4px;
  width: 10px;
  height: 2px;
  background: #1a1008;
  border-radius: 2px;
}

.cdui-driver-brow.db-l { left: 6px; transform: rotate(-8deg); }
.cdui-driver-brow.db-r { right: 6px; transform: rotate(8deg); }

.cdui-driver-eye {
  position: absolute;
  top: 8px;
  width: 12px;
  height: 11px;
}

.cdui-driver-eye.eye-l { left: 5px; }
.cdui-driver-eye.eye-r { right: 5px; }

.cdui-eyeball {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ccc;
}

.cdui-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #1a0505;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cocoa-dui-scene.phase-driving .cdui-pupil,
.cocoa-dui-scene.phase-hit-1 .cdui-pupil,
.cocoa-dui-scene.phase-hit-2 .cdui-pupil,
.cocoa-dui-scene.phase-hit-3 .cdui-pupil {
  animation: cdui-eye-roll 1.2s ease-in-out infinite;
}

@keyframes cdui-eye-roll {
  0% { transform: translate(-50%, -50%); }
  20% { transform: translate(20%, -80%); }
  40% { transform: translate(-90%, 10%); }
  60% { transform: translate(60%, 40%); }
  80% { transform: translate(-30%, -60%); }
  100% { transform: translate(-50%, -50%); }
}

.cdui-mascara-lash {
  position: absolute;
  top: -3px;
  left: -2px;
  right: -2px;
  height: 5px;
  border-top: 3px solid #6b21a8;
  border-radius: 50% 50% 0 0;
}

.cdui-driver-mouth {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: #a04068;
  border-radius: 0 0 50% 50%;
}

.cocoa-dui-scene.phase-driving .cdui-driver-mouth {
  animation: cdui-mouth-slur 0.6s ease-in-out infinite alternate;
}

@keyframes cdui-mouth-slur {
  from { width: 12px; height: 6px; }
  to { width: 18px; height: 10px; }
}

.cdui-driver-earring.er-broken {
  position: absolute;
  top: 14px;
  right: -4px;
  width: 6px;
  height: 8px;
  border: 2px solid #d4af37;
  border-radius: 50%;
}

.cdui-driver-earring.er-broken::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #fff, #88c8ff);
}

.cdui-henny-bottle {
  position: absolute;
  bottom: -8px;
  left: -18px;
  width: 16px;
  height: 38px;
  background: linear-gradient(90deg, #3a2010, #5c3018, #3a2010);
  border-radius: 4px 4px 6px 6px;
  border: 2px solid #2a1008;
  z-index: 6;
  transform: rotate(-12deg);
}

.cdui-bottle-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.28rem;
  color: #ffd700;
  font-weight: bold;
  writing-mode: vertical-rl;
}

.cdui-bottle-liquid {
  position: absolute;
  bottom: 4px;
  left: 3px;
  right: 3px;
  height: 55%;
  background: linear-gradient(180deg, #c87820, #8b4510);
  border-radius: 0 0 4px 4px;
}

.cocoa-dui-scene.phase-driving .cdui-henny-bottle {
  animation: cdui-bottle-sway 0.8s ease-in-out infinite;
}

@keyframes cdui-bottle-sway {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-3px); }
}

.cdui-steering-wheel {
  position: absolute;
  bottom: -14px;
  right: -8px;
  width: 28px;
  height: 28px;
  border: 4px solid #333;
  border-radius: 50%;
  background: transparent;
  z-index: 3;
}

.cocoa-dui-scene.phase-driving .cdui-steering-wheel {
  animation: cdui-wheel-jerk 0.45s ease-in-out infinite;
}

@keyframes cdui-wheel-jerk {
  0%, 100% { transform: rotate(-25deg); }
  50% { transform: rotate(35deg); }
}

.cdui-wheel-spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 18px;
  background: #555;
  transform: translate(-50%, -50%);
}

.cdui-pedestrian {
  position: absolute;
  bottom: 38%;
  right: -60px;
  width: 28px;
  height: 52px;
  opacity: 0;
  z-index: 3;
}

.cdui-ped-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #e8c8a8;
  border-radius: 50%;
}

.cdui-ped-body {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 22px;
  border-radius: 4px;
}

.cdui-ped-legs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 16px;
  background: #334;
  border-radius: 2px 2px 4px 4px;
}

.cdui-pedestrian.ped1 .cdui-ped-body { background: #4488cc; }
.cdui-pedestrian.ped2 .cdui-ped-body { background: #cc4488; }
.cdui-pedestrian.ped3 .cdui-ped-body { background: #44aa66; }
.cdui-pedestrian.ped1 .cdui-ped-head { background: #d4a878; }
.cdui-pedestrian.ped2 .cdui-ped-head { background: #f0d0b0; }
.cdui-pedestrian.ped3 .cdui-ped-head { background: #8b6040; }

.cdui-ped-bag,
.cdui-ped-phone,
.cdui-ped-dog {
  position: absolute;
  font-size: 0.55rem;
  top: 18px;
  right: -10px;
}

.cocoa-dui-scene.phase-driving .cdui-pedestrian.ped1 {
  opacity: 1;
  animation: cdui-ped-walk 2.8s linear infinite;
}

.cocoa-dui-scene.phase-hit-1 .cdui-pedestrian.ped1,
.cocoa-dui-scene.phase-hit-2 .cdui-pedestrian.ped1,
.cocoa-dui-scene.phase-hit-3 .cdui-pedestrian.ped1 {
  opacity: 0;
}

.cocoa-dui-scene.phase-hit-1 .cdui-pedestrian.ped2,
.cocoa-dui-scene.phase-hit-2 .cdui-pedestrian.ped2,
.cocoa-dui-scene.phase-hit-3 .cdui-pedestrian.ped2 {
  opacity: 1;
  animation: cdui-ped-walk 2.2s linear infinite;
}

.cocoa-dui-scene.phase-hit-2 .cdui-pedestrian.ped2 {
  animation-duration: 1.6s;
}

.cocoa-dui-scene.phase-hit-3 .cdui-pedestrian.ped3 {
  opacity: 1;
  animation: cdui-ped-walk 1.4s linear infinite;
}

@keyframes cdui-ped-walk {
  from { right: -60px; }
  to { right: 55%; }
}

.cdui-hit-burst {
  position: absolute;
  bottom: 42%;
  left: 42%;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.cdui-hit-burst span {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: #ff4444;
  text-shadow: 0 0 8px #000, 2px 2px 0 #ffd700;
}

.cocoa-dui-scene.phase-hit-1 .cdui-hit-burst.hit1 {
  opacity: 1;
  animation: cdui-thump-pop 0.7s ease-out forwards;
}

.cocoa-dui-scene.phase-hit-2 .cdui-hit-burst.hit2 {
  opacity: 1;
  animation: cdui-thump-pop 0.7s ease-out forwards;
}

.cocoa-dui-scene.phase-hit-3 .cdui-hit-burst.hit3 {
  opacity: 1;
  animation: cdui-thump-pop 0.7s ease-out forwards;
}

@keyframes cdui-thump-pop {
  0% { transform: scale(0.3); opacity: 0; }
  40% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

.cdui-body-fly {
  position: absolute;
  width: 20px;
  height: 28px;
  background: #4488cc;
  border-radius: 6px;
  opacity: 0;
  z-index: 7;
}

.cdui-body-fly.bf1 { background: #4488cc; }
.cdui-body-fly.bf2 { background: #cc4488; }
.cdui-body-fly.bf3 { background: #44aa66; }

.cocoa-dui-scene.phase-hit-1 .cdui-body-fly.bf1 {
  opacity: 1;
  animation: cdui-body-launch 0.9s ease-out forwards;
}

.cocoa-dui-scene.phase-hit-2 .cdui-body-fly.bf2 {
  opacity: 1;
  animation: cdui-body-launch 0.9s ease-out forwards;
}

.cocoa-dui-scene.phase-hit-3 .cdui-body-fly.bf3 {
  opacity: 1;
  animation: cdui-body-launch 0.9s ease-out forwards;
}

@keyframes cdui-body-launch {
  0% { bottom: 40%; left: 48%; transform: rotate(0deg) scale(1); opacity: 1; }
  100% { bottom: 72%; left: 68%; transform: rotate(280deg) scale(0.6); opacity: 0.3; }
}

.cocoa-dui-bubble {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  z-index: 60;
  pointer-events: none;
  transition: opacity 0.2s;
}

.cocoa-dui-bubble.active {
  opacity: 1;
}

#dude-container.cocoa-dui-active .cocoa-dui-bubble.active {
  opacity: 1;
  top: 8%;
}

.cdui-speech {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  color: #ffd700;
  text-shadow: 0 0 10px #6b21a8, 2px 2px 0 #000;
  letter-spacing: 1px;
}

.cdui-speech.l2 {
  font-size: 1rem;
  color: #d8b4fe;
  margin-top: 2px;
}

.cdui-dash-panel {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 88px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #6b21a8;
  border-radius: 8px;
  z-index: 10;
  opacity: 0;
}

.cocoa-dui-scene.phase-driving .cdui-dash-panel,
.cocoa-dui-scene.phase-hit-1 .cdui-dash-panel,
.cocoa-dui-scene.phase-hit-2 .cdui-dash-panel,
.cocoa-dui-scene.phase-hit-3 .cdui-dash-panel {
  opacity: 1;
}

.cdui-speed-ring {
  text-align: center;
  margin-bottom: 4px;
}

.cdui-speed-num {
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: #ff4444;
  line-height: 1;
}

.cdui-speed-unit {
  font-size: 0.45rem;
  color: #aaa;
  display: block;
}

.cdui-swerve-label {
  font-size: 0.42rem;
  color: #d8b4fe;
  display: block;
  margin-bottom: 2px;
}

.cdui-swerve-bar {
  height: 6px;
  background: #2a2030;
  border-radius: 3px;
  overflow: hidden;
}

.cdui-swerve-fill {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #6b21a8, #ff4444);
  border-radius: 3px;
}

.cocoa-dui-scene.phase-driving .cdui-swerve-fill {
  animation: cdui-swerve-pump 0.5s ease-in-out infinite alternate;
}

@keyframes cdui-swerve-pump {
  from { width: 45%; }
  to { width: 98%; }
}

.cdui-henny-meter {
  font-size: 0.5rem;
  margin-top: 4px;
  text-align: center;
}

.cdui-airbag {
  position: absolute;
  top: 0;
  left: 40px;
  width: 70px;
  height: 50px;
  background: radial-gradient(ellipse, #f5f5f0, #ddd);
  border-radius: 50%;
  opacity: 0;
  z-index: 8;
  transform: scale(0.2);
}

.cocoa-dui-scene.phase-crash .cdui-airbag,
.cocoa-dui-scene.phase-aftermath .cdui-airbag {
  opacity: 0.95;
  animation: cdui-airbag-pop 0.5s ease-out forwards;
}

@keyframes cdui-airbag-pop {
  from { transform: scale(0.2); }
  to { transform: scale(1); }
}

.cdui-hood-damage {
  position: absolute;
  bottom: 38px;
  left: 20px;
  width: 60px;
  height: 28px;
  background: linear-gradient(180deg, #3a2060, #2a1040);
  border-radius: 8px;
  opacity: 0;
  transform: skewX(-12deg);
  z-index: 3;
}

.cocoa-dui-scene.phase-crash .cdui-hood-damage,
.cocoa-dui-scene.phase-aftermath .cdui-hood-damage {
  opacity: 1;
  animation: cdui-hood-crush 0.6s ease-out forwards;
}

@keyframes cdui-hood-crush {
  from { transform: skewX(-12deg) scaleY(1); }
  to { transform: skewX(-22deg) scaleY(0.55) translateY(8px); }
}

.cdui-wig-on-glass {
  position: absolute;
  top: 8px;
  right: 20px;
  width: 42px;
  height: 20px;
  background: linear-gradient(180deg, #2a1810, #1a1008);
  border-radius: 48% 48% 30% 30%;
  opacity: 0;
  z-index: 9;
  transform: rotate(24deg);
}

.cocoa-dui-scene.phase-crash .cdui-wig-on-glass,
.cocoa-dui-scene.phase-aftermath .cdui-wig-on-glass {
  opacity: 1;
  animation: cdui-wig-fly-glass 0.8s ease-out forwards;
}

@keyframes cdui-wig-fly-glass {
  from { transform: rotate(0deg) translateY(20px); opacity: 0; }
  to { transform: rotate(24deg) translateY(0); opacity: 1; }
}

.cdui-fallen-stone {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #fff, #88c8ff);
  transform: rotate(45deg);
  opacity: 0;
  z-index: 9;
}

.cocoa-dui-scene.phase-crash .cdui-fallen-stone,
.cocoa-dui-scene.phase-aftermath .cdui-fallen-stone {
  opacity: 1;
}

.cdui-crash-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 15;
  pointer-events: none;
}

.cocoa-dui-scene.phase-crash .cdui-crash-flash {
  animation: cdui-flash-bang 0.9s ease-out forwards;
}

@keyframes cdui-flash-bang {
  0% { opacity: 0; }
  8% { opacity: 0.95; }
  25% { opacity: 0.2; }
  40% { opacity: 0.7; }
  100% { opacity: 0; }
}

.cdui-crash-text {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 2.2rem;
  color: #ff2222;
  text-shadow: 0 0 16px #ff6600, 3px 3px 0 #000;
  opacity: 0;
  z-index: 16;
}

.cocoa-dui-scene.phase-crash .cdui-crash-text,
.cocoa-dui-scene.phase-aftermath .cdui-crash-text {
  animation: cdui-crash-text-pop 0.8s ease-out 0.15s forwards;
}

@keyframes cdui-crash-text-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.cdui-crash-fire {
  position: absolute;
  bottom: 28%;
  left: 52%;
  width: 48px;
  height: 40px;
  opacity: 0;
  z-index: 7;
}

.cdui-flame {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 28px;
  background: linear-gradient(180deg, #ffee00, #ff6600, #cc0000);
  border-radius: 50% 50% 20% 20%;
  animation: cdui-flame-flicker 0.35s ease-in-out infinite alternate;
}

.cdui-flame.f1 { left: 0; }
.cdui-flame.f2 { left: 16px; height: 34px; animation-delay: 0.1s; }
.cdui-flame.f3 { left: 30px; height: 22px; animation-delay: 0.2s; }

@keyframes cdui-flame-flicker {
  from { transform: scaleY(0.85) scaleX(0.95); opacity: 0.85; }
  to { transform: scaleY(1.1) scaleX(1.05); opacity: 1; }
}

.cocoa-dui-scene.phase-crash .cdui-crash-fire,
.cocoa-dui-scene.phase-aftermath .cdui-crash-fire {
  opacity: 1;
}

.cdui-glass-shards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  opacity: 0;
}

.cdui-shard {
  position: absolute;
  width: 8px;
  height: 12px;
  background: rgba(200, 230, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(25deg);
}

.cdui-shard.sh1 { top: 35%; left: 42%; }
.cdui-shard.sh2 { top: 48%; left: 55%; transform: rotate(-15deg); }
.cdui-shard.sh3 { top: 40%; left: 38%; transform: rotate(45deg); }
.cdui-shard.sh4 { top: 52%; left: 48%; }
.cdui-shard.sh5 { top: 44%; left: 60%; transform: rotate(-30deg); }
.cdui-shard.sh6 { top: 38%; left: 50%; transform: rotate(60deg); }

.cocoa-dui-scene.phase-crash .cdui-glass-shards,
.cocoa-dui-scene.phase-aftermath .cdui-glass-shards {
  opacity: 1;
}

.cocoa-dui-scene.phase-crash .cdui-shard,
.cocoa-dui-scene.phase-aftermath .cdui-shard {
  animation: cdui-shard-fly 1s ease-out forwards;
}

@keyframes cdui-shard-fly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--sx, 20px), var(--sy, -40px)) rotate(180deg); opacity: 0.6; }
}

.cdui-shard.sh1 { --sx: -30px; --sy: -50px; }
.cdui-shard.sh2 { --sx: 40px; --sy: -35px; }
.cdui-shard.sh3 { --sx: -15px; --sy: -60px; }
.cdui-shard.sh4 { --sx: 25px; --sy: -45px; }
.cdui-shard.sh5 { --sx: -40px; --sy: -30px; }
.cdui-shard.sh6 { --sx: 10px; --sy: -55px; }

.cdui-henny-spill {
  position: absolute;
  bottom: 24%;
  left: 44%;
  width: 48px;
  height: 18px;
  background: radial-gradient(ellipse, rgba(139, 69, 19, 0.85), rgba(90, 40, 10, 0.5));
  border-radius: 50%;
  opacity: 0;
  z-index: 5;
}

.cocoa-dui-scene.phase-crash .cdui-henny-spill,
.cocoa-dui-scene.phase-aftermath .cdui-henny-spill {
  opacity: 1;
  animation: cdui-henny-pool 0.8s ease-out forwards;
}

@keyframes cdui-henny-pool {
  from { transform: scale(0.3); }
  to { transform: scale(1.2); }
}

.cdui-police-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 14;
  pointer-events: none;
}

.cdui-cop {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.cocoa-dui-scene.phase-aftermath .cdui-police-flash {
  opacity: 1;
}

.cocoa-dui-scene.phase-aftermath .cdui-cop.c-red {
  background: rgba(255, 0, 0, 0.25);
  animation: cdui-cop-flash 0.6s step-end infinite;
}

.cocoa-dui-scene.phase-aftermath .cdui-cop.c-blue {
  background: rgba(0, 80, 255, 0.22);
  animation: cdui-cop-flash 0.6s step-end infinite reverse;
}

@keyframes cdui-cop-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .game-area {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 920px;
  }

  .dude-stage {
    top: 68px;
    max-width: 100%;
  }

  .action-panel-wrap {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .screen {
    padding: 16px 12px 32px;
  }

  .game-header {
    flex-direction: column;
    text-align: center;
    padding: 14px;
  }

  .new-life-btn {
    order: -1;
    width: 100%;
    max-width: 280px;
  }

  .header-brand {
    flex-direction: column;
  }

  .header-title-block {
    text-align: center;
  }

  .brand-float-tr img {
    width: 110px;
  }

  .brand-float-bl img {
    width: 90px;
  }

  .brand-float-tr {
    top: 8px;
    right: 8px;
  }

  .brand-float-bl {
    bottom: 8px;
    left: 8px;
  }

  .dude-stage {
    top: 58px;
  }

  .drug-death-counter {
    top: 8px;
    left: 8px;
    padding: 8px 10px;
    gap: 8px;
    z-index: 10000;
  }

  .drug-death-counter-skull {
    font-size: 1.2rem;
  }

  .drug-death-counter-title {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }

  .drug-death-counter-realdata {
    font-size: 0.78rem;
    letter-spacing: 1.5px;
  }

  .drug-death-counter-sublabel {
    font-size: 0.44rem;
  }

  .drug-death-counter-value {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .action-panel {
    grid-template-columns: repeat(2, 1fr);
  }

  #dude-container {
    height: 340px;
  }

  .coke-source-btn {
    grid-column: span 2;
  }

  #dude {
    transform: scale(0.8);
    margin-top: 40px;
  }

  .prop.phase-use {
    bottom: 130px;
  }

  .title-features {
    gap: 6px;
  }

  .title-features span {
    font-size: 0.6rem;
    padding: 4px 7px;
  }

  .feature-badges {
    gap: 6px;
  }

  .feature-badge {
    font-size: 0.58rem;
    padding: 5px 10px;
  }

  #dude-container {
    --anchor-mouth-left: 63%;
    --anchor-mouth-bottom: 0px;
    --anchor-mouth-shift-x: -6%;
    --anchor-mouth-shift-y: 12px;
    --anchor-bubbler-left: 61%;
    --anchor-bubbler-bottom: 0px;
    --anchor-bubbler-shift-x: -6%;
    --anchor-bubbler-shift-y: 14px;
    --anchor-blunt-left: 43%;
    --anchor-blunt-bottom: 58px;
    --anchor-blunt-shift-x: -58%;
    --anchor-blunt-shift-y: 6px;
    --anchor-coke-bottom: 4px;
    --anchor-drink-left: 56%;
    --anchor-drink-bottom: 26px;
    --anchor-drink-shift-x: -8%;
    --anchor-drink-shift-y: 10px;
    --anchor-dmt-left: 58%;
    --anchor-dmt-bottom: 72px;
    --anchor-dmt-shift-x: -36%;
    --anchor-dmt-shift-y: 2px;
    --anchor-henny-left: 54%;
    --anchor-henny-bottom: 12px;
    --anchor-henny-shift-x: -28%;
    --anchor-henny-shift-y: 8px;
  }

  .header-title {
    font-size: 1.8rem;
  }

  .header-logo {
    width: 150px;
  }

  .dude-stage {
    padding: 12px;
  }
}

/* ========== ADDERALL ========== */
.adderall-prop .adderall-bottle {
  width: 52px;
  height: 78px;
  position: relative;
}

.add-bottle-body {
  width: 100%;
  height: 58px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(90deg, #ff8c00, #ffb347);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-bottle-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.add-bottle-cap {
  width: 28px;
  height: 10px;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px 4px 0 0;
  border: 2px solid #ddd;
}

.add-bottle-neck {
  width: 22px;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(90deg, #ff8c00, #ffb347);
}

#prop-adderall.phase-use,
#prop-adderall.tilt-drink.phase-use {
  left: var(--anchor-drink-left);
  bottom: calc(var(--anchor-drink-bottom) + 48px);
  transform: translateX(var(--anchor-drink-shift-x)) translateY(var(--anchor-drink-shift-y)) rotate(-50deg);
  transform-origin: var(--anchor-drink-origin-x) var(--anchor-drink-origin-y);
  filter: drop-shadow(3px 6px 10px rgba(0, 0, 0, 0.45));
  z-index: 30;
}

#prop-adderall.phase-raise,
#prop-adderall.tilt-drink.phase-raise {
  animation: prop-raise-adderall 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes prop-raise-adderall {
  0% {
    left: 50%;
    bottom: -200px;
    opacity: 0;
    transform: translateX(-50%) scale(0.4) rotate(20deg);
  }
  70% {
    left: var(--anchor-drink-left);
    bottom: calc(var(--anchor-drink-bottom) + 54px);
    opacity: 1;
    transform: translateX(var(--anchor-drink-shift-x)) translateY(8px) rotate(-55deg) scale(1.05);
  }
  100% {
    left: var(--anchor-drink-left);
    bottom: calc(var(--anchor-drink-bottom) + 48px);
    opacity: 1;
    transform: translateX(var(--anchor-drink-shift-x)) translateY(var(--anchor-drink-shift-y)) rotate(-50deg) scale(1);
  }
}

#prop-adderall.adderall-dump.phase-use .adderall-bottle {
  animation: add-bottle-dump 1.8s ease-in-out forwards;
}

@keyframes add-bottle-dump {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(118deg); }
  55%, 100% { transform: rotate(168deg); }
}

.add-pill-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: visible;
}

.add-pill-rain.hidden { display: none !important; }

.add-fall-pill {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffcc80, #ff6f00 55%, #e65100);
  border: 1.5px solid #fff3e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  opacity: 0;
}

#prop-adderall.adderall-dump .add-fall-pill {
  animation: add-pill-fall-mouth 0.85s ease-in forwards;
}

.add-fall-pill.fp1 { left: 38%; top: 8%; animation-delay: 0.05s; }
.add-fall-pill.fp2 { left: 48%; top: 6%; animation-delay: 0.18s; }
.add-fall-pill.fp3 { left: 42%; top: 10%; animation-delay: 0.3s; }
.add-fall-pill.fp4 { left: 52%; top: 7%; animation-delay: 0.42s; }
.add-fall-pill.fp5 { left: 45%; top: 5%; animation-delay: 0.55s; }
.add-fall-pill.fp6 { left: 50%; top: 9%; animation-delay: 0.68s; }
.add-fall-pill.fp7 { left: 40%; top: 8%; animation-delay: 0.8s; }
.add-fall-pill.fp8 { left: 47%; top: 6%; animation-delay: 0.95s; }

@keyframes add-pill-fall-mouth {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 1; transform: translateY(12px) scale(1); }
  70% { opacity: 1; transform: translateY(95px) scale(0.95); }
  100% { opacity: 0; transform: translateY(130px) scale(0.35); }
}

#dude.adderall-mouth-open .mouth {
  transform: scale(1.15, 1.35);
  border-radius: 50% 50% 40% 40%;
  background: #3a1515;
}

#dude.adderall-chewing .mouth { transform: scaleY(0.6); animation: add-chew 0.25s ease-in-out infinite; }
#dude.adderall-tweaking { animation: add-tweak-shake 0.12s ease-in-out infinite; }
#dude.adderall-tweaking .pupil { animation: add-eye-dart 0.3s ease-in-out infinite alternate; }
#dude.adderall-skinny .head { transform: scaleX(0.88) scaleY(1.05); }
#dude.adderall-skinny .cheek-scar { box-shadow: inset -8px 0 12px rgba(0,0,0,0.35); }

@keyframes add-chew {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(0.75); }
}

@keyframes add-tweak-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-0.5deg); }
  75% { transform: translateX(2px) rotate(0.5deg); }
}

@keyframes add-eye-dart {
  from { transform: translate(-3px, -2px); }
  to { transform: translate(4px, 1px); }
}

.adderall-scene {
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
}

.adderall-scene.hidden { display: none !important; }

.adderall-beer-scene,
.adderall-black-scene,
.adderall-butter-scene,
.adderall-cocoa-scene {
  position: absolute;
  inset: 0;
}

.adderall-beer-scene > *,
.adderall-black-scene > *,
.adderall-butter-scene > *,
.adderall-cocoa-scene > * {
  display: none;
}

#dude-container:not(.beer-adderall-path) .adderall-beer-scene { display: none; }
#dude-container:not(.black-adderall-path) .adderall-black-scene { display: none; }
#dude-container:not(.butter-adderall-path) .adderall-butter-scene { display: none; }
#dude-container:not(.cocoa-adderall-path) .adderall-cocoa-scene { display: none; }

#dude-container.adderall-scene-mode #prop-layer {
  opacity: 0;
  pointer-events: none;
}

#dude-container.beer-adderall-path.adderall-scene-mode #dude {
  opacity: 1;
  pointer-events: none;
  z-index: 5;
}

#dude-container:not(.beer-adderall-path).adderall-scene-mode #dude {
  opacity: 0;
  pointer-events: none;
}

#dude-container.beer-adderall-path .adderall-scene {
  background: transparent;
  pointer-events: none;
}

#adderall-scene.phase-skinny #dude.adderall-skinny {
  opacity: 1;
  filter: contrast(1.15) brightness(0.92);
}

/* Beerface phases */
#adderall-scene.phase-calendar .add-calendar,
#adderall-scene.phase-calendar .add-clean-fx { display: flex; }

#adderall-scene.phase-skinny .add-skinny-mask,
#adderall-scene.phase-skinny .add-calendar { display: block; }

#adderall-scene.phase-skinny .add-calendar { display: flex; }

#adderall-scene.phase-skinny .add-cal-day::after {
  content: '?!';
  font-size: 1rem;
  color: #c62828;
}

#adderall-scene.phase-fired .add-phone-fired { display: flex; }

#adderall-scene.phase-divorce .add-wife-scene { display: block; }

#adderall-scene.phase-street .add-street-scene { display: block; }

.add-calendar {
  position: absolute;
  top: 12px;
  right: 12px;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
  background: #fff;
  color: #c62828;
  border-radius: 8px;
  border: 3px solid #c62828;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  animation: add-cal-flip 0.6s ease-in-out infinite;
}

.add-cal-title { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; font-weight: 700; }
.add-cal-day { font-family: 'Bangers', cursive; font-size: 2.2rem; line-height: 1; }
.add-cal-sub { font-size: 0.55rem; font-weight: 700; }

@keyframes add-cal-flip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(12deg) scale(1.05); }
}

.add-clean-fx {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(57, 255, 20, 0.08);
}

.add-sparkle { font-size: 1.8rem; animation: add-spark-bounce 0.5s ease-in-out infinite alternate; }
.add-sparkle.s2 { animation-delay: 0.15s; font-size: 2.4rem; }
.add-sparkle.s3 { animation-delay: 0.3s; }

.add-clean-text {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: var(--accent-green);
  letter-spacing: 2px;
  animation: add-text-pulse 0.4s ease-in-out infinite;
}

@keyframes add-spark-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes add-text-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.add-skinny-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
}

.add-skeleton-cheek {
  position: absolute;
  top: 38%;
  width: 42px;
  height: 52px;
  background: linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.7) 100%);
  border-radius: 50%;
  animation: add-cheek-suck 1s ease-in-out infinite;
}

.add-skeleton-cheek.l { left: 18%; }
.add-skeleton-cheek.r { right: 18%; }

.add-sunken-eye {
  position: absolute;
  top: 28%;
  width: 28px;
  height: 18px;
  background: #1a0a0a;
  border-radius: 50%;
  box-shadow: inset 0 4px 8px #000;
}

.add-sunken-eye.l { left: 30%; }
.add-sunken-eye.r { right: 30%; }

@keyframes add-cheek-suck {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

.add-phone-fired {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
}

.add-phone-body {
  width: 140px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #222, #111);
  border-radius: 16px;
  border: 3px solid var(--accent-yellow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: add-phone-vibrate 0.15s ease-in-out infinite;
}

.add-boss-name { font-family: 'Orbitron', sans-serif; font-size: 0.55rem; color: #ff4444; }
.add-boss-line { font-family: 'Bangers', cursive; font-size: 0.95rem; color: #ff6666; letter-spacing: 1px; }

@keyframes add-phone-vibrate {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

.add-wife-scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,0,0,0.15), rgba(0,0,0,0.6));
  padding: 20px;
}

.add-wife-line {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: #ff4444;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 6px;
  animation: add-wife-shout 0.5s ease-in-out infinite alternate;
}

@keyframes add-wife-shout { from { transform: translateX(0); } to { transform: translateX(4px); } }

.add-kids-silhouette {
  position: absolute;
  bottom: 50px;
  left: 20px;
  width: 60px;
  height: 40px;
  background: #333;
  border-radius: 8px 8px 0 0;
}

.add-kids-silhouette::before,
.add-kids-silhouette::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 28px;
  background: #444;
  border-radius: 50% 50% 0 0;
}

.add-kids-silhouette::before { left: 8px; }
.add-kids-silhouette::after { right: 8px; }

.add-house-sign {
  position: absolute;
  bottom: 30px;
  right: 16px;
  font-family: 'Bangers', cursive;
  font-size: 0.85rem;
  color: var(--accent-yellow);
  padding: 6px 10px;
  border: 2px solid var(--accent-yellow);
  transform: rotate(-8deg);
}

.add-street-scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a1028 0%, #0a0a12 60%, #1a1510 100%);
}

.add-trash-fire {
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
}

.add-flame {
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 36px;
  background: linear-gradient(180deg, #ffeb3b, #ff5722, transparent);
  border-radius: 50% 50% 20% 20%;
  animation: add-flame-flicker 0.3s ease-in-out infinite alternate;
}

.add-flame.f1 { left: 10px; }
.add-flame.f2 { left: 30px; animation-delay: 0.1s; height: 44px; }
.add-flame.f3 { left: 50px; animation-delay: 0.2s; }

@keyframes add-flame-flicker {
  from { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  to { transform: scaleY(1.15) scaleX(0.9); opacity: 1; }
}

.add-tent-row {
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 10px;
}

.add-tent {
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 36px solid #4a3728;
  opacity: 0.8;
}

.add-street-crew {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.add-crew-member {
  width: 36px;
  height: 48px;
  border-radius: 8px 8px 4px 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
}

.add-crew-member span {
  font-size: 0.35rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.crew-black { background: linear-gradient(180deg, #5c3d2e 30%, #2a1810 100%); }
.crew-cocoa { background: linear-gradient(180deg, #8b5a8b 20%, #4a2848 100%); }
.crew-butter { background: linear-gradient(180deg, #f4c89a 25%, #d4a87a 100%); }

.add-crack-pipe-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 0.9rem;
  color: #ff9800;
  letter-spacing: 2px;
}

/* Black path phases */
#adderall-scene.phase-crush .add-black-cook,
#adderall-scene.phase-cook .add-black-cook { display: block; }

#adderall-scene.phase-inject .add-black-arm-scene { display: block; }

#adderall-scene.phase-mirror .add-mirror-scene { display: flex; }

#adderall-scene.phase-gun .add-revolver-scene { display: block; }

.add-black-cook {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.add-crush-pile {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 20px;
  background: #4fc3f7;
  border-radius: 4px;
  opacity: 0.8;
}

.add-black-spoon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 24px;
}

.add-spoon-bowl {
  position: absolute;
  left: 0;
  width: 36px;
  height: 22px;
  background: #aaa;
  border-radius: 50% 50% 40% 40%;
  overflow: hidden;
}

.add-spoon-powder {
  position: absolute;
  inset: 4px;
  background: #4fc3f7;
  border-radius: 50%;
  opacity: 0.9;
}

#adderall-scene.phase-cook .add-spoon-liquid {
  position: absolute;
  inset: 6px;
  background: rgba(79, 195, 247, 0.6);
  border-radius: 50%;
  animation: add-liquid-bubble 0.5s ease-in-out infinite;
}

#adderall-scene.phase-cook .add-spoon-cotton { display: none; }

#adderall-scene.phase-cotton .add-spoon-cotton,
#adderall-scene.phase-inject .add-spoon-cotton {
  display: block;
  position: absolute;
  top: 2px;
  left: 8px;
  width: 18px;
  height: 14px;
  background: #fff;
  border-radius: 4px;
  opacity: 0.9;
}

.add-spoon-handle {
  position: absolute;
  left: 34px;
  top: 8px;
  width: 66px;
  height: 6px;
  background: #888;
  border-radius: 3px;
}

.add-black-lighter {
  position: absolute;
  top: 42%;
  left: 58%;
  width: 24px;
  height: 36px;
  background: #c62828;
  border-radius: 4px;
}

#adderall-scene.phase-cook .add-lighter-flame {
  display: block;
  position: absolute;
  top: -18px;
  left: 4px;
  width: 16px;
  height: 22px;
  background: linear-gradient(180deg, #ffeb3b, #ff5722);
  border-radius: 50% 50% 30% 30%;
  animation: add-flame-flicker 0.2s ease-in-out infinite;
}

.add-black-arm-scene {
  position: absolute;
  inset: 0;
  background: rgba(20,0,0,0.4);
}

.add-arm-slap {
  position: absolute;
  top: 30%;
  right: 25%;
  width: 50px;
  height: 30px;
  background: #5c3d2e;
  border-radius: 8px;
  animation: add-arm-slap 0.4s ease-out;
}

@keyframes add-arm-slap {
  0% { transform: translateX(20px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.add-arm-tourniquet {
  position: absolute;
  top: 38%;
  right: 22%;
  width: 56px;
  height: 8px;
  background: #c62828;
  border-radius: 4px;
}

.add-arm-needle {
  position: absolute;
  top: 32%;
  right: 18%;
  width: 40px;
  height: 4px;
  background: #ccc;
  transform: rotate(-30deg);
  animation: add-needle-in 0.8s ease-out forwards;
}

@keyframes add-needle-in {
  from { transform: rotate(-30deg) translateX(20px); opacity: 0; }
  to { transform: rotate(-30deg) translateX(0); opacity: 1; }
}

.add-arm-vein {
  position: absolute;
  top: 40%;
  right: 28%;
  width: 3px;
  height: 24px;
  background: #4a148c;
  border-radius: 2px;
}

.add-mirror-scene {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
}

.add-mirror-frame {
  width: 120px;
  height: 150px;
  border: 4px solid #ffd700;
  border-radius: 8px;
  background: linear-gradient(180deg, #87ceeb, #e0e0e0);
  position: relative;
  overflow: hidden;
}

.add-mirror-reflection {
  position: absolute;
  inset: 10px;
  border-radius: 4px;
  background: var(--skin);
}

.add-mirror-reflection.white-face {
  background: #f5d0b0;
  filter: brightness(1.2);
}

.add-mirror-scream {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  color: #ff2222;
  white-space: nowrap;
  animation: add-scream-shake 0.2s ease-in-out infinite;
}

@keyframes add-scream-shake {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-48%) scale(1.05); }
}

.add-revolver-scene {
  position: absolute;
  inset: 0;
  background: #000;
}

.add-revolver {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 40px;
  background: #333;
  border-radius: 8px;
}

.add-revolver::before {
  content: '';
  position: absolute;
  right: -30px;
  top: 14px;
  width: 35px;
  height: 8px;
  background: #222;
  border-radius: 0 4px 4px 0;
}

#adderall-scene.phase-gun .add-gun-flash {
  display: block;
  position: absolute;
  inset: 0;
  background: #fff;
  animation: add-gun-flash 0.4s ease-out forwards;
}

#adderall-scene.phase-gun .add-brain-splatter {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 60px;
  background: radial-gradient(ellipse, #8b0000 0%, transparent 70%);
  animation: add-splatter-grow 0.5s ease-out forwards;
}

@keyframes add-gun-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes add-splatter-grow {
  from { transform: translateX(-50%) scale(0); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Butter path */
#adderall-scene.phase-party .add-party-counter { display: flex; }

#adderall-scene.phase-hospital .add-hospital-room { display: block; }

.add-party-counter {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,105,180,0.2), rgba(0,0,0,0.5));
  gap: 4px;
}

.add-party-label { font-family: 'Orbitron', sans-serif; font-size: 0.55rem; color: #ff69b4; }
.add-party-num { font-family: 'Bangers', cursive; font-size: 3rem; color: #ff1493; line-height: 1; }
.add-party-goal { font-family: 'Bangers', cursive; font-size: 1.2rem; color: rgba(255,255,255,0.6); }

.add-hospital-room {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e8f4f8, #b0c4de);
}

.add-hospital-bed {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 50px;
  background: #fff;
  border: 3px solid #90a4ae;
  border-radius: 8px;
}

.add-iv-drip {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 8px;
  height: 80px;
  background: linear-gradient(180deg, transparent, #4fc3f7);
}

.add-aids-chart {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: #c62828;
  padding: 6px 12px;
  border: 3px solid #c62828;
  background: #fff;
}

.add-facetime-screen {
  position: absolute;
  top: 50px;
  right: 12px;
  width: 100px;
  height: 120px;
  background: #111;
  border-radius: 12px;
  border: 3px solid #39ff14;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.add-ft-face {
  flex: 1;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
}

.add-ft-face span { font-size: 0.4rem; color: #fff; font-weight: 700; }
.add-ft-face.ugly1 { background: linear-gradient(180deg, #8b7355, #5c4033); }
.add-ft-face.ugly2 { background: linear-gradient(180deg, #6b8e23, #556b2f); }

.add-ft-live {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.45rem;
  color: #ff2222;
  font-weight: 700;
  animation: add-live-blink 0.8s step-end infinite;
}

@keyframes add-live-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

.add-flatline {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: #c62828;
  letter-spacing: 3px;
  animation: add-flatline-pulse 0.5s ease-in-out infinite;
}

@keyframes add-flatline-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Cocoa path */
#adderall-scene.phase-split .add-split-bubble,
#adderall-scene.phase-split .add-cocoa-mirror-split { display: flex; }

#adderall-scene.phase-cocoa-death .add-cocoa-death { display: block; }

.add-split-bubble {
  position: absolute;
  top: 20%;
  width: 42%;
  padding: 10px 8px;
  background: rgba(138, 43, 226, 0.85);
  border: 2px solid #ff69b4;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  animation: add-split-bounce 0.4s ease-in-out infinite alternate;
}

.add-split-bubble.left { left: 4%; }
.add-split-bubble.right { right: 4%; animation-delay: 0.2s; }

.add-name-tag { font-family: 'Bangers', cursive; font-size: 1rem; color: #ffd700; }
.add-split-line { font-family: 'Rubik', sans-serif; font-size: 0.55rem; color: #fff; font-weight: 700; }

@keyframes add-split-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

.add-cocoa-mirror-split {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 80px;
  gap: 4px;
}

.add-split-face {
  flex: 1;
  border-radius: 8px;
  background: linear-gradient(180deg, #8b5a8b, #4a2848);
}

.add-cocoa-death {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.add-cocoa-final {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  color: #ff4444;
  white-space: nowrap;
}

.add-cocoa-fall {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 60px;
  background: linear-gradient(180deg, #8b5a8b, #2a1028);
  border-radius: 8px 8px 4px 4px;
  animation: add-cocoa-collapse 1s ease-out forwards;
}

@keyframes add-cocoa-collapse {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(40px) rotate(15deg); opacity: 0.3; }
}

.action-btn[data-action="adderall"]:hover {
  border-color: #4fc3f7;
  box-shadow: 0 0 16px rgba(79, 195, 247, 0.45);
}