:root {
  --bg-dark: #0a0a14;
  --bg-card: #12121f;
  --bg-card-hover: #1a1a2e;
  --accent-fire: #e8630a;
  --accent-amber: #f59e0b;
  --accent-warm: #f4a261;
  --accent-red: #dc2626;
  --text-primary: #e8e6e3;
  --text-secondary: #9ca3af;
  --border-subtle: rgba(255,165,0,0.12);
  --glow-fire: 0 0 20px rgba(232,99,10,0.3);
}

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

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Source Sans 3', sans-serif;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Oswald', sans-serif;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

@keyframes fireGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(232,99,10,0.4), 0 0 30px rgba(232,99,10,0.2); }
  50% { box-shadow: 0 0 25px rgba(232,99,10,0.6), 0 0 50px rgba(232,99,10,0.3); }
}

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

@keyframes snuff {
  0% { opacity: 1; filter: brightness(1); }
  50% { filter: brightness(1.5) sepia(1); }
  100% { opacity: 0.35; filter: brightness(0.5) grayscale(1); }
}

@keyframes dropBuffs {
  0% { transform: scale(1); }
  10% { transform: scale(1.05) rotate(-1deg); }
  20% { transform: scale(0.95) rotate(1deg); }
  30% { transform: scale(1.03) rotate(-0.5deg); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

@keyframes torchFlicker {
  0%, 100% { text-shadow: 0 0 10px #e8630a, 0 0 20px #f59e0b; }
  25% { text-shadow: 0 0 15px #dc2626, 0 0 30px #e8630a; }
  50% { text-shadow: 0 0 8px #f59e0b, 0 0 25px #e8630a; }
  75% { text-shadow: 0 0 18px #e8630a, 0 0 35px #dc2626; }
}

.fire-glow { animation: fireGlow 2s ease-in-out infinite; }
.fade-slide-in { animation: fadeSlideIn 0.4s ease-out forwards; }
.snuff-out { animation: snuff 0.8s ease-out forwards; }
.drop-buffs { animation: dropBuffs 0.6s ease-out; }
.torch-flicker { animation: torchFlicker 1.5s ease-in-out infinite; }

.bg-pattern {
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(232,99,10,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(220,38,38,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(245,158,11,0.05) 0%, transparent 50%);
}

.tribe-card {
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: all 0.2s;
}

.tribe-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255,165,0,0.25);
}

.event-card {
  border-left: 3px solid var(--accent-fire);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(18,18,31,0.8) 100%);
}

input[type="text"], input[type="number"], select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Source Sans 3', sans-serif;
  transition: border-color 0.2s;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--accent-fire);
  box-shadow: 0 0 0 2px rgba(232,99,10,0.2);
}

input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
}

input[type="range"]::-webkit-slider-track {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent-fire);
  border-radius: 50%;
  margin-top: -7px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(232,99,10,0.5);
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  animation: confetti 3s ease-out forwards;
  z-index: 1000;
  pointer-events: none;
}