:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #141414;
  --blood: #cc0000;
  --blood-glow: #ff2200;
  --electric: #00aaff;
  --bone: #e0e0e0;
  --bone-dim: #888888;
  --ember: #ff6600;
  --purple: #8844cc;
  --green: #22cc44;
  --gold: #ccaa00;
}

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

body {
  background: var(--bg-primary);
  color: var(--bone);
  font-family: 'Fira Code', monospace;
  overflow-x: hidden;
}

body.light-mode {
  --bg-primary: #f0ece4;
  --bg-secondary: #e8e2d8;
  --bg-card: #ffffff;
  --bone: #1a1a1a;
  --bone-dim: #555555;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
  25% { opacity: 0.9; }
  75% { opacity: 0.95; }
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(204,0,0,0.5), 0 0 20px rgba(204,0,0,0.2); }
  50% { text-shadow: 0 0 20px rgba(204,0,0,0.8), 0 0 40px rgba(204,0,0,0.4), 0 0 60px rgba(204,0,0,0.1); }
}

@keyframes metronome-flash {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1); opacity: 0.4; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hailBodom {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.font-cinzel { font-family: 'Cinzel', serif; }
.font-bebas { font-family: 'Bebas Neue', sans-serif; }
.font-fira { font-family: 'Fira Code', monospace; }

.glow-red {
  text-shadow: 0 0 10px rgba(204,0,0,0.6), 0 0 30px rgba(204,0,0,0.3);
}

.glow-red-pulse {
  animation: pulse-glow 3s ease-in-out infinite;
}

.card-section {
  background: var(--bg-card);
  border: 1px solid #222;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  animation: slideIn 0.4s ease-out;
}

.metronome-beat {
  animation: metronome-flash 0.15s ease-out;
}

.hail-bodom {
  animation: hailBodom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.progress-bar-fill {
  transition: width 0.3s linear;
  background: linear-gradient(90deg, var(--blood), var(--ember), var(--blood));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .no-print { display: none !important; }
  .card-section {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}