:root {
  --bg-dark: #0d0d0d;
  --bg-panel: #1a1a1a;
  --bg-parchment: #2a2318;
  --blood-dark: #8b1a1a;
  --blood-bright: #c41e3a;
  --ember: #d4a017;
  --ember-dim: #8a6a10;
  --bone: #c4b99a;
  --bone-dim: #7a7260;
  --text-primary: #d4cbb8;
  --text-dim: #6b6355;
  --text-bright: #f0e8d8;
  --border-ornate: #3a3228;
  --border-elite: #b87333;
  --border-boss: #c41e3a;
}

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

html, body, #root {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Crimson Pro', serif;
  font-size: 16px;
}

/* Noise overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.font-crimson {
  font-family: 'Crimson Pro', serif;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--border-ornate);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bone-dim);
}

/* Ornate border */
.ornate-border {
  border: 1px solid var(--border-ornate);
  position: relative;
}

.ornate-border::before,
.ornate-border::after {
  content: '✦';
  position: absolute;
  color: var(--ember-dim);
  font-size: 8px;
  opacity: 0.5;
}
.ornate-border::before {
  top: -5px;
  left: -5px;
}
.ornate-border::after {
  bottom: -5px;
  right: -5px;
}

/* Glow effects */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(212, 160, 23, 0.3); }
  50% { box-shadow: 0 0 20px rgba(212, 160, 23, 0.6); }
}

@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 8px rgba(196, 30, 58, 0.3); }
  50% { box-shadow: 0 0 20px rgba(196, 30, 58, 0.6); }
}

@keyframes spPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bannerSlide {
  0% { transform: scaleX(0); opacity: 0; }
  50% { transform: scaleX(1.05); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes fogFade {
  from { opacity: 0; backdrop-filter: blur(10px); }
  to { opacity: 1; backdrop-filter: blur(0px); }
}

@keyframes bloodVignette {
  0% { box-shadow: inset 0 0 0 0 rgba(139, 26, 26, 0); }
  50% { box-shadow: inset 0 0 80px 20px rgba(139, 26, 26, 0.4); }
  100% { box-shadow: inset 0 0 0 0 rgba(139, 26, 26, 0); }
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

.animate-banner {
  animation: bannerSlide 0.6s ease-out;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-pulse-red {
  animation: pulseRed 1.5s ease-in-out infinite;
}

.animate-sp-pulse {
  animation: spPulse 0.3s ease-in-out;
}

.blood-vignette {
  animation: bloodVignette 0.8s ease-out;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9998;
}

/* Elite border */
.elite-border {
  border: 2px solid var(--border-elite);
  box-shadow: 0 0 12px rgba(184, 115, 51, 0.3);
}

/* Boss border */
.boss-border {
  border: 2px solid var(--border-boss);
  box-shadow: 0 0 16px rgba(196, 30, 58, 0.4);
}

/* Panel backgrounds */
.panel-bg {
  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
}

.parchment-bg {
  background: linear-gradient(135deg, #2a2318 0%, #1e1a12 100%);
}

/* Wound states */
.wound-fresh { filter: none; }
.wound-wounded { filter: sepia(0.3) saturate(1.3); }
.wound-crippled { filter: sepia(0.5) saturate(1.5) brightness(0.8); }
.wound-downed { filter: grayscale(0.5) sepia(0.3) brightness(0.5); }
.wound-dead { filter: grayscale(0.9) brightness(0.3); }

/* Responsive */
@media (max-width: 1024px) {
  .desktop-layout {
    flex-direction: column !important;
  }
  .desktop-layout > div {
    width: 100% !important;
    max-height: 50vh;
  }
}

/* Button hover glow */
.btn-ember:hover {
  box-shadow: 0 0 15px rgba(212, 160, 23, 0.4);
}

.btn-blood:hover {
  box-shadow: 0 0 15px rgba(196, 30, 58, 0.4);
}

/* Modal backdrop */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

/* Death screen */
.death-overlay {
  background: radial-gradient(ellipse at center, rgba(13, 13, 13, 0.95) 0%, rgba(0, 0, 0, 0.99) 100%);
}

/* Tab active underline */
.tab-active {
  border-bottom: 2px solid var(--ember);
  color: var(--ember);
}

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--border-ornate);
  border-radius: 3px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ember);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(212, 160, 23, 0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ember);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(212, 160, 23, 0.5);
}

/* Generation loading pulse */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.generating-shimmer {
  background: linear-gradient(90deg, #2a2318 0%, #3a3228 50%, #2a2318 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}