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

body {
  background: #0a0a0f;
  color: #e0e0e0;
  font-family: 'IBM Plex Mono', monospace;
  overflow-x: hidden;
}

:root {
  --neon-green: #00ff41;
  --hot-pink: #ff006e;
  --cyan: #00d4ff;
  --yellow: #ffe600;
  --purple: #bf00ff;
  --berrry-red: #ff2b5e;
  --bg-dark: #0a0a0f;
  --bg-panel: #111118;
  --bg-card: #1a1a25;
  --border-dim: #2a2a3a;
}

@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
  40% { clip-path: inset(50% 0 20% 0); transform: translate(4px, -2px); }
  60% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 1px); }
  80% { clip-path: inset(80% 0 5% 0); transform: translate(3px, -1px); }
}

@keyframes glitch2 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  25% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -2px); }
  50% { clip-path: inset(5% 0 80% 0); transform: translate(-3px, 2px); }
  75% { clip-path: inset(40% 0 30% 0); transform: translate(2px, 1px); }
}

@keyframes colorShift {
  0% { color: var(--neon-green); text-shadow: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green); }
  25% { color: var(--hot-pink); text-shadow: 0 0 20px var(--hot-pink), 0 0 40px var(--hot-pink); }
  50% { color: var(--cyan); text-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan); }
  75% { color: var(--berrry-red); text-shadow: 0 0 20px var(--berrry-red), 0 0 40px var(--berrry-red); }
  100% { color: var(--neon-green); text-shadow: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green); }
}

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.02); } }

@keyframes borderPulse {
  0%, 100% { border-color: var(--neon-green); box-shadow: 0 0 10px rgba(0,255,65,0.2); }
  33% { border-color: var(--berrry-red); box-shadow: 0 0 10px rgba(255,43,94,0.2); }
  66% { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,212,255,0.2); }
}

@keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-3px) rotate(-1deg); }
  20% { transform: translateX(3px) rotate(1deg); }
  30% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  50% { transform: translateX(-1px); }
}

@keyframes vhsTrack {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.5; }
  20% { transform: translateX(100%); opacity: 0; }
}

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

@keyframes spinBerrry { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

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

@keyframes badgeWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-4deg) scale(1.05); }
  75% { transform: rotate(4deg) scale(1.05); }
}

.spin-berrry { animation: spinBerrry 2.5s linear infinite; }

/* Berrry network "bug" badge in header */
.berrry-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10,10,15,0.7);
  border: 1px solid var(--berrry-red);
  box-shadow: 0 0 12px rgba(255,43,94,0.35);
  text-decoration: none;
  z-index: 50;
  transition: all 0.2s;
}
.berrry-badge:hover { animation: badgeWiggle 0.5s; box-shadow: 0 0 22px rgba(255,43,94,0.7); }
.berrry-strawberry { font-size: 18px; }
.berrry-badge-text {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--berrry-red);
  letter-spacing: 0.5px;
}
@media (max-width: 640px) { .berrry-badge-text { display: none; } }

/* Broadcast ticker */
.berrry-ticker {
  margin-top: 16px;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
  background: rgba(255,43,94,0.05);
  padding: 4px 0;
}
.berrry-ticker-inner {
  display: inline-block;
  animation: tickerScroll 22s linear infinite;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--berrry-red);
  opacity: 0.7;
  font-family: 'IBM Plex Mono', monospace;
}

.glitch-title { position: relative; font-family: 'Press Start 2P', monospace; animation: colorShift 3s infinite; }
.glitch-title::before, .glitch-title::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch-title::before { color: var(--berrry-red); animation: glitch1 2s infinite; z-index: -1; }
.glitch-title::after { color: var(--cyan); animation: glitch2 2.5s infinite; z-index: -1; }

.drop-zone { animation: borderPulse 3s infinite; }
.drop-zone:hover { animation: borderPulse 1s infinite, pulse 1s infinite; }

.scanline-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: rgba(0, 255, 65, 0.06); z-index: 9999; pointer-events: none;
  animation: scanline 4s linear infinite;
}

.neon-btn { position: relative; overflow: hidden; transition: all 0.2s; }
.neon-btn:hover { animation: shake 0.4s; box-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
.neon-btn::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg) translateX(-100%); transition: transform 0.5s;
}
.neon-btn:hover::after { transform: rotate(45deg) translateX(100%); }

.berrry-preset:hover { box-shadow: 0 0 20px var(--berrry-red) !important; }

.effect-card { transition: all 0.2s; border: 1px solid var(--border-dim); }
.effect-card:hover { border-color: var(--cyan); box-shadow: 0 0 15px rgba(0, 212, 255, 0.15); transform: translateY(-2px); }
.effect-card.berrry-card { border-color: rgba(255,43,94,0.4); }
.effect-card.berrry-card:hover { border-color: var(--berrry-red); box-shadow: 0 0 15px rgba(255,43,94,0.3); }

.chaos-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--hot-pink); cursor: pointer; box-shadow: 0 0 10px var(--hot-pink);
}
.chaos-slider::-webkit-slider-track { height: 8px; border-radius: 4px; }

.progress-bar-fill {
  background: linear-gradient(90deg, var(--neon-green), var(--cyan), var(--berrry-red), var(--yellow));
  background-size: 300% 100%; animation: gradientMove 2s linear infinite;
}
@keyframes gradientMove { 0% { background-position: 0% 0%; } 100% { background-position: 300% 0%; } }

.timeline-segment { transition: all 0.15s; cursor: pointer; }
.timeline-segment:hover { transform: scaleY(1.3); filter: brightness(1.4); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--berrry-red); }

.vhs-line {
  position: fixed; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.03);
  pointer-events: none; z-index: 9998; animation: vhsTrack 8s infinite;
}