/* Custom Scrollbar & Animations */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.glow-pink { box-shadow: 0 0 15px rgba(236, 72, 153, 0.5); }
.glow-green { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); }
.glow-blue { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
.glow-red { box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }

@keyframes pulse-fast {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.animate-pulse-fast { animation: pulse-fast 0.6s infinite; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.animate-shake { animation: shake 0.3s ease-in-out; }

/* Overdrive Mode: pulsing neon pink frenzy state */
@keyframes overdrive-pulse {
  0%, 100% {
    border-color: #ec4899;
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.55), inset 0 0 26px rgba(236, 72, 153, 0.18);
  }
  50% {
    border-color: #f472b6;
    box-shadow: 0 0 42px rgba(236, 72, 153, 0.9), inset 0 0 60px rgba(236, 72, 153, 0.35);
  }
}
.overdrive-glow {
  animation: overdrive-pulse 1s ease-in-out infinite;
  background-image: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.22), transparent 65%);
}
.overdrive-intensity-panel {
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.35), inset 0 0 18px rgba(236, 72, 153, 0.12);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.overdrive-intensity-panel.overdrive-critical {
  animation: overdrive-critical 0.4s ease-in-out infinite;
  border-color: #ef4444;
}
@keyframes overdrive-critical {
  0%, 100% {
    box-shadow: 0 0 22px rgba(236, 72, 153, 0.5), inset 0 0 20px rgba(236, 72, 153, 0.2);
  }
  50% {
    box-shadow: 0 0 48px rgba(239, 68, 68, 0.95), inset 0 0 40px rgba(239, 68, 68, 0.45);
  }
}
#overdrive-intensity-fill { transition: width 100ms linear; }

/* Overtime Rush: crimson vignette warning for the final 15 seconds */
@keyframes overtime-pulse {
  0%, 100% { box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.28); }
  50% { box-shadow: inset 0 0 120px rgba(239, 68, 68, 0.55); }
}
.overtime-rush {
  animation: overtime-pulse 0.9s ease-in-out infinite;
  border-color: #ef4444 !important;
  background-image: radial-gradient(circle at 50% 120%, rgba(239, 68, 68, 0.28), transparent 70%);
}
.timer-warning {
  color: #ef4444 !important;
  font-size: 2rem !important;
  animation: pulse-fast 0.8s infinite;
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
}

/* Boss Battle */
@keyframes boss-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}
.boss-idle { animation: boss-idle 2.4s ease-in-out infinite; }
.boss-enraged {
  background-image: linear-gradient(160deg, rgba(69, 10, 10, 0.95), rgba(15, 23, 42, 0.98));
  border-color: #ef4444 !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.45);
}
.boss-hit { animation: shake 0.35s ease-in-out; }

/* Class takes a boss hit: full-screen red flash that fades back to normal */
@keyframes boss-damage-flash {
  0% { box-shadow: inset 0 0 0 9999px rgba(239, 68, 68, 0.6); }
  100% { box-shadow: inset 0 0 0 9999px rgba(239, 68, 68, 0); }
}
.boss-damage-flash {
  animation: boss-damage-flash 0.9s ease-out forwards !important;
}

.boss-damage-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(239, 68, 68, 0);
  opacity: 0;
  z-index: 40;
}
.boss-damage-flash-overlay.active {
  animation: boss-damage-overlay-flash 0.9s ease-out forwards;
}
@keyframes boss-damage-overlay-flash {
  0% { background: rgba(239, 68, 68, 0.55); opacity: 1; }
  100% { background: rgba(239, 68, 68, 0); opacity: 0; }
}

/* Boss roar screen shake — intensity scales 1 (light) to 3 (ferocious) */
@keyframes boss-roar-shake-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%, 60% { transform: translate(-4px, 2px) rotate(-0.4deg); }
  40%, 80% { transform: translate(4px, -2px) rotate(0.4deg); }
}
@keyframes boss-roar-shake-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%, 60% { transform: translate(-9px, 3px) rotate(-0.7deg); }
  40%, 80% { transform: translate(9px, -3px) rotate(0.7deg); }
}
@keyframes boss-roar-shake-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15%, 45%, 75% { transform: translate(-14px, 4px) rotate(-1.1deg); }
  30%, 60%, 90% { transform: translate(14px, -4px) rotate(1.1deg); }
}
.boss-roar-1 { animation: boss-roar-shake-1 0.55s ease-in-out; }
.boss-roar-2 { animation: boss-roar-shake-2 0.8s ease-in-out; }
.boss-roar-3 { animation: boss-roar-shake-3 1.05s ease-in-out; }

/* Knight sword strike against the boss */
@keyframes knight-slash {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(16px) rotate(-22deg); }
  55% { transform: translateX(22px) rotate(-8deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.knight-slash { animation: knight-slash 0.45s ease-in-out; }
@keyframes boss-struck {
  0%, 100% { filter: brightness(1); transform: translateX(0); }
  30% { filter: brightness(1.7); transform: translateX(6px) rotate(1deg); }
  65% { filter: brightness(1.15); transform: translateX(-4px) rotate(-1deg); }
}
.boss-struck { animation: boss-struck 0.5s ease-in-out; }

/* Crimson vignette when the boss is below its enrage threshold */
@keyframes boss-vignette-pulse {
  0%, 100% { box-shadow: inset 0 0 55px rgba(239, 68, 68, 0.28), 0 0 22px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: inset 0 0 110px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.4); }
}
.boss-crimson-vignette {
  animation: boss-vignette-pulse 1.4s ease-in-out infinite;
}

/* Roar screen shake lasts the full 3-second roar window */
@keyframes boss-screen-shake-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-3px, 2px) rotate(-0.25deg); }
  20%, 40%, 60%, 80% { transform: translate(3px, -2px) rotate(0.25deg); }
}
@keyframes boss-screen-shake-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-6px, 3px) rotate(-0.5deg); }
  20%, 40%, 60%, 80% { transform: translate(6px, -3px) rotate(0.5deg); }
}
@keyframes boss-screen-shake-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 4px) rotate(-0.8deg); }
  20%, 40%, 60%, 80% { transform: translate(10px, -4px) rotate(0.8deg); }
}
.boss-screen-shake-1 { animation: boss-screen-shake-1 3s ease-in-out; }
.boss-screen-shake-2 { animation: boss-screen-shake-2 3s ease-in-out; }
.boss-screen-shake-3 { animation: boss-screen-shake-3 3s ease-in-out; }

/* The Big Freeze */
@keyframes frozen-chatter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-3px, 1.5px) rotate(-0.35deg); }
  40% { transform: translate(3px, -1.5px) rotate(0.35deg); }
  60% { transform: translate(-1.5px, -1.5px) rotate(-0.2deg); }
  80% { transform: translate(1.5px, 1.5px) rotate(0.2deg); }
}
.frozen-screen {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1.5px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(165, 243, 252, 0.35) 0px, rgba(165, 243, 252, 0.35) 2.5px, transparent 4.5px),
    radial-gradient(circle at 45% 68%, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0.3) 1.5px, transparent 3px),
    radial-gradient(circle at 85% 72%, rgba(165, 243, 252, 0.3) 0px, rgba(165, 243, 252, 0.3) 2px, transparent 4px),
    radial-gradient(circle at 30% 42%, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 1.5px, transparent 3px),
    linear-gradient(160deg, rgba(8, 145, 178, 0.88), rgba(2, 6, 23, 0.96));
  -webkit-backdrop-filter: blur(12px) saturate(150%) contrast(1.08) brightness(0.88);
  backdrop-filter: blur(12px) saturate(150%) contrast(1.08) brightness(0.88);
  border: 2px solid rgba(6, 182, 212, 0.75);
  box-shadow: 0 0 55px rgba(6, 182, 212, 0.6), inset 0 0 120px rgba(6, 182, 212, 0.5), inset 0 0 35px rgba(255, 255, 255, 0.15);
  animation: frozen-chatter 0.12s linear infinite;
}
@keyframes snow-fall {
  0% { transform: translateY(-20%) rotate(0deg); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translateY(720px) rotate(320deg); opacity: 0; }
}
.snowflake {
  position: absolute;
  top: -24px;
  color: #a5f3fc;
  font-size: 18px;
  animation: snow-fall linear infinite;
  pointer-events: none;
}

@keyframes thaw-shiver {
  0%, 100% { transform: translateX(-4px) rotate(-0.6deg); }
  25% { transform: translateX(4px) rotate(0.6deg); }
  50% { transform: translateX(-3px) rotate(-0.5deg); }
  75% { transform: translateX(3px) rotate(0.5deg); }
}
.thaw-shiver {
  animation: thaw-shiver 0.22s linear infinite;
  will-change: transform;
}

/* Floating arcade toast (overdrive / boss damage) */
#arcade-toast {
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.94);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
#arcade-toast.arcade-toast--show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.student-view body > header,
.student-view body > footer { display: none !important; }
.student-view body > main { padding-top: 1.5rem; }

/* Treehouse Stacker */
#treehouse-build-countdown-fill { transition: width 100ms linear; }
#treehouse-showcase-gallery { scrollbar-width: thin; scrollbar-color: #10b981 #1e293b; }
#treehouse-showcase-gallery::-webkit-scrollbar { height: 8px; }
#treehouse-showcase-gallery::-webkit-scrollbar-track { background: #1e293b; }
#treehouse-showcase-gallery::-webkit-scrollbar-thumb { background: #10b981; border-radius: 4px; }