/* Dragon Den - Legendary Fantasy Adventure Theme */

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

:root {
  /* Dragon Fire Color Palette */
  --dragon-red: #dc2626;
  --dragon-orange: #ea580c;
  --dragon-gold: #f59e0b;
  --dragon-amber: #d97706;
  --fire-red: #ef4444;
  --ember-orange: #fb923c;
  --dark-bg: #0f0f0f;
  --darker-bg: #0a0a0a;
  --card-bg: #1a1a1a;
  --accent-gold: #fbbf24;
  --accent-copper: #cd7c32;
  --danger-red: #dc2626;
  --health-green: #10b981;
  --mana-blue: #3b82f6;
  --dragon-glow: rgba(220, 38, 38, 0.6);
  --fire-glow: rgba(251, 191, 36, 0.5);
  --ember-glow: rgba(234, 88, 12, 0.4);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes dragonPulse {
  0%, 100% { box-shadow: 0 0 15px var(--dragon-glow); }
  50% { box-shadow: 0 0 30px var(--fire-glow); }
}

@keyframes fireGlow {
  0%, 100% { 
    text-shadow: 0 0 8px var(--dragon-gold);
  }
  50% { 
    text-shadow: 0 0 12px var(--dragon-gold);
  }
}

/* Reduce glow animation frequency */
.logo i,
.logo .accent {
  animation-duration: 4s;
}

/* Removed constant float animation - now only on hover */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%);
  color: #f1f5f9;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Performance optimizations */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimized Dragon Fire Background Effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, var(--dragon-red) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--dragon-orange) 0%, transparent 35%);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

/* Remove heavy breathing animation */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: dragonBreathLight 12s ease-in-out infinite;
  }
}

@keyframes dragonBreathLight {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.10; }
}

/* Simplified Dragon Embers */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1px 1px at 25% 20%, var(--dragon-gold), transparent),
    radial-gradient(1px 1px at 75% 30%, var(--ember-orange), transparent),
    radial-gradient(1px 1px at 85% 80%, var(--dragon-amber), transparent);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

/* Only animate on devices that can handle it */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  body::after {
    animation: emberFloatLight 20s linear infinite;
  }
}

@keyframes emberFloatLight {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

.game-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  /* Performance optimizations */
  transform: translateZ(0);
  will-change: auto;
}

/* Modern Header */
.game-header {
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(251, 191, 36, 0.1);
}

.game-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.08), transparent);
}

/* Only animate header sweep on hover */
.game-header:hover::before {
  animation: dragonSweepOnce 2s ease-out;
}

@keyframes dragonSweepOnce {
  0% { left: -100%; }
  100% { left: 100%; }
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.logo i {
  font-size: 3rem;
  color: var(--dragon-gold);
  animation: fireGlow 2s ease-in-out infinite;
}

.logo h1 {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

.logo .accent {
  color: var(--dragon-gold);
  animation: fireGlow 2s ease-in-out infinite;
}

.subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  color: #94a3b8;
  margin-bottom: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* Header Stats Orbs */
.header-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.stat-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, rgba(26, 26, 26, 0.8) 70%);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-orb:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--dragon-gold);
  box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
}

.stat-orb i {
  font-size: 1.5rem;
  color: var(--dragon-gold);
}

.stat-orb span {
  font-family: 'Orbitron', monospace;
  font-size: 0.875rem;
  font-weight: 700;
  color: #f1f5f9;
}

/* Modal Base */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 8, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 2rem;
  animation: fadeIn 0.3s ease;
  overflow-y: auto;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(16px);
  padding: 2.5rem;
  border-radius: 20px;
  border: 2px solid rgba(251, 191, 36, 0.3);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.2);
  max-width: 1100px;
  width: 100%;
  position: relative;
  margin: auto 0;
}

.modal-content h2 {
  font-size: 2.2rem;
  color: var(--dragon-gold);
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

.modal-content h2 i {
  margin-right: 1rem;
  color: var(--dragon-orange);
}

/* Class Selection */
.class-intro {
  text-align: center;
  font-size: 1rem;
  color: #cbd5e1;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Inter', sans-serif;
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.class-card {
  background: rgba(26, 26, 26, 0.9);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  /* Simplified backdrop */
  background: rgba(26, 26, 26, 0.95);
  /* Performance optimizations */
  transform: translateZ(0);
  will-change: transform;
}

.class-card:hover {
  border-color: var(--dragon-gold);
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.05);
}

.class-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--dragon-gold);
  filter: drop-shadow(0 0 8px var(--fire-glow));
  transition: transform 0.3s ease;
}

/* Only animate on hover instead of constantly */
.class-card:hover .class-icon {
  animation: floatOnce 1s ease-in-out;
}

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

.class-card h3 {
  font-size: 1.4rem;
  color: var(--dragon-gold);
  margin-bottom: 0.75rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.class-stats {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.class-stats .stat {
  color: #f1f5f9;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  font-family: 'Orbitron', monospace;
}

.class-card p {
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  flex: 1;
}

.class-abilities {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.ability {
  background: linear-gradient(135deg, var(--dragon-red), var(--dragon-orange));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 0 10px var(--dragon-glow);
  border: 1px solid rgba(251, 191, 36, 0.3);
  font-family: 'Inter', sans-serif;
}

/* Class Selection Footer */
.class-selection-footer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(106, 13, 173, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, var(--soul-purple), var(--soul-violet));
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  box-shadow: 0 0 20px var(--soul-glow);
  transform: translateZ(0);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--soul-violet), var(--soul-blue));
  transform: translateY(-3px);
  box-shadow: 0 5px 30px var(--purple-glow);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-primary i {
  margin-right: 0.75rem;
}

/* Change Destiny Button */
.change-destiny-btn {
  background: rgba(106, 13, 173, 0.2);
  border: 2px solid var(--soul-purple);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  color: var(--soul-cyan);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  width: 100%;
  margin-top: 1rem;
  transform: translateZ(0);
}

.change-destiny-btn:hover {
  background: rgba(106, 13, 173, 0.4);
  border-color: var(--soul-violet);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px var(--soul-glow);
}

.change-destiny-btn i {
  margin-right: 0.5rem;
}

/* Dragon Health & Stats System */
.dragon-stats-panel {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(251, 191, 36, 0.1);
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.dragon-stats-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.15), transparent);
  animation: dragonStatsSweep 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dragonStatsSweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Stat Bars Container */
.stat-bars-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-bar-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-bar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #e0e0e0;
  font-weight: 600;
}

.stat-bar-header i {
  font-size: 0.9rem;
  filter: drop-shadow(0 0 8px currentColor);
}

.stat-bar-header .fa-heart {
  color: #ef4444;
}

.stat-bar-header .fa-star {
  color: #fbbf24;
}

.stat-bar-label {
  color: var(--soul-cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}

.stat-bar-value {
  margin-left: auto;
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-size: 0.75rem;
}

/* Progress Bars */
.progress-bar {
  width: 100%;
  height: 14px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(106, 13, 173, 0.4);
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.progress-fill {
  height: 100%;
  transition: width 0.5s ease;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 0 15px currentColor;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 6px 6px 0 0;
}

.health-bar .progress-fill {
  background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
  box-shadow: 0 0 15px #ef4444, inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

.xp-bar .progress-fill {
  background: linear-gradient(90deg, #d97706, #fbbf24, #fcd34d);
  box-shadow: 0 0 15px #fbbf24, inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

/* Quick Info Pills */
.stat-quick-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--soul-purple);
  border-radius: 20px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(106, 13, 173, 0.3), transparent);
  transition: left 0.5s ease;
}

.stat-pill:hover::before {
  left: 100%;
}

.stat-pill:hover {
  border-color: var(--soul-cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--soul-glow);
}

.stat-pill i {
  font-size: 0.85rem;
  filter: drop-shadow(0 0 8px currentColor);
}

.level-pill i {
  color: var(--soul-violet);
}

.gold-pill i {
  color: #fbbf24;
}

.mana-pill i {
  color: var(--soul-cyan);
}

.class-pill i {
  color: var(--accent-silver);
}

/* Main Game View */
.game-panels {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  flex: 1;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.center-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Story Panel */
.story-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 20px;
  padding: 0;
  backdrop-filter: blur(15px);
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.story-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--soul-purple), var(--soul-violet), var(--soul-cyan), var(--soul-violet), var(--soul-purple));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

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

.story-intro {
  padding: 1.5rem;
}

.story-intro h3 {
  font-size: 1.4rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.story-intro h3 i {
  color: var(--soul-violet);
  font-size: 1.5rem;
  filter: drop-shadow(0 0 15px var(--purple-glow));
}

.story-panel h2 {
  font-size: 2rem;
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.story-panel h2 i {
  margin-right: 1rem;
  color: var(--soul-violet);
}

.story-content {
  flex: 1;
  margin-bottom: 2rem;
  overflow-y: auto;
  padding-right: 1rem;
}

.story-text {
  font-size: 1.15rem;
  line-height: 1.9;
  color: #e8e8e8;
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.story-intro p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #d8d8d8;
  margin-bottom: 1rem;
  text-align: justify;
}

.current-location {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--soul-purple);
  margin-top: 1rem;
  box-shadow: 0 0 20px rgba(106, 13, 173, 0.3);
}

.current-location i {
  color: var(--soul-cyan);
  font-size: 1.2rem;
}

.location-name {
  color: var(--accent-gold);
  font-weight: 700;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Controls Panel */
.controls-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(15px);
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

.controls-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--soul-cyan), transparent);
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.controls-panel h4 {
  font-size: 1.2rem;
  color: var(--accent-gold);
  margin-bottom: 1.25rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.controls-panel h4 i {
  color: var(--soul-cyan);
  font-size: 1.4rem;
  filter: drop-shadow(0 0 15px var(--cyan-glow));
}

/* Action Buttons */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.action-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(18, 18, 26, 0.5));
  border: 2px solid var(--soul-purple);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  transform: translateZ(0);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(106, 13, 173, 0.3), transparent 70%);
  transform: scale(0);
  transition: transform 0.5s ease;
}

.action-btn:hover::before {
  transform: scale(1);
}

.action-btn i {
  font-size: 2.5rem;
  color: var(--soul-violet);
  filter: drop-shadow(0 0 20px var(--purple-glow));
  transition: all 0.3s ease;
  z-index: 1;
}

.action-btn span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  z-index: 1;
}

.action-btn small {
  font-size: 0.75rem;
  color: #b0b0b0;
  font-family: 'Inter', sans-serif;
  z-index: 1;
}

.action-btn:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: var(--soul-cyan);
  box-shadow: 
    0 0 40px var(--soul-glow),
    0 10px 30px rgba(0, 0, 0, 0.5);
}

.action-btn:hover i {
  transform: scale(1.2) rotate(5deg);
  color: var(--soul-cyan);
  filter: drop-shadow(0 0 30px var(--cyan-glow));
}

.action-btn:hover span {
  color: var(--soul-cyan);
  text-shadow: 0 0 20px var(--cyan-glow);
}

.action-btn:active {
  transform: translateY(-4px) scale(1.02);
}

/* Specific action button themes */
.store-btn:hover {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.4), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.store-btn:hover i {
  color: var(--accent-emerald);
  filter: drop-shadow(0 0 30px rgba(16, 185, 129, 0.6));
}

.cave-btn:hover {
  border-color: var(--soul-cyan);
  box-shadow: 0 0 40px var(--cyan-glow), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dragon-btn:hover {
  border-color: var(--accent-crimson);
  box-shadow: 0 0 40px rgba(220, 38, 38, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dragon-btn:hover i {
  color: var(--accent-crimson);
  filter: drop-shadow(0 0 30px rgba(220, 38, 38, 0.6));
  animation: dragonPulse 0.5s ease-in-out;
}

@keyframes dragonPulse {
  0%, 100% { transform: scale(1.2) rotate(5deg); }
  50% { transform: scale(1.3) rotate(-5deg); }
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.choice-btn {
  background: linear-gradient(135deg, rgba(106, 13, 173, 0.3), rgba(65, 105, 225, 0.3));
  border: 2px solid var(--soul-purple);
  padding: 1.25rem 2rem;
  border-radius: 12px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.choice-btn::before {
  content: '▶';
  position: absolute;
  left: 1.5rem;
  opacity: 0;
  transition: all 0.3s ease;
  color: var(--accent-gold);
}

.choice-btn:hover {
  background: linear-gradient(135deg, rgba(106, 13, 173, 0.5), rgba(65, 105, 225, 0.5));
  border-color: var(--soul-violet);
  transform: translateX(10px);
  box-shadow: 0 0 25px var(--soul-glow);
  padding-left: 3rem;
}

.choice-btn:hover::before {
  opacity: 1;
}

.choice-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Character Card */
.character-card {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  animation: soulPulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.character-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--soul-purple), var(--soul-violet), var(--soul-cyan), var(--soul-violet), var(--soul-purple));
  background-size: 400% 400%;
  border-radius: 20px;
  z-index: -1;
  animation: gradientBorder 6s ease infinite;
  opacity: 0.5;
}

@keyframes gradientBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.character-card h3 {
  font-size: 1.8rem;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.character-class {
  color: var(--soul-cyan);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stat-bar {
  margin-bottom: 1.25rem;
}

.stat-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #d0d0d0;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.bar-container {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  height: 20px;
  border: 1px solid rgba(106, 13, 173, 0.3);
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
  position: relative;
  box-shadow: 0 0 10px currentColor;
}

.bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.health-bar {
  background: linear-gradient(90deg, #dc143c, #32cd32);
}

.mana-bar {
  background: linear-gradient(90deg, #1e90ff, #00bfff);
}

.xp-bar {
  background: linear-gradient(90deg, var(--soul-purple), var(--accent-gold));
}

/* Inventory & Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(18, 18, 26, 0.5));
  padding: 1.25rem;
  border-radius: 12px;
  border: 2px solid var(--soul-purple);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--soul-purple), var(--soul-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.stat-item:hover::before {
  transform: scaleX(1);
}

.stat-item:hover {
  border-color: var(--soul-cyan);
  box-shadow: 0 0 25px var(--soul-glow);
  transform: translateY(-2px);
}

.stat-item .stat-name {
  font-size: 0.9rem;
  color: var(--soul-cyan);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.stat-item .stat-value {
  font-size: 1.8rem;
  color: var(--accent-gold);
  font-weight: 700;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.inventory-card {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  position: relative;
  overflow: hidden;
}

.inventory-card h3, .inventory-card h4 {
  font-size: 1.5rem;
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.inventory-card h3 i, .inventory-card h4 i {
  color: var(--soul-violet);
  font-size: 1.6rem;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

/* Map Panel */
.map-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  position: relative;
  overflow: hidden;
}

.map-panel h4 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.map-panel h4 i {
  color: var(--soul-violet);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

.world-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.map-location {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(106, 13, 173, 0.3);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #666;
  transition: all 0.3s ease;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.map-location.discovered {
  border-color: var(--soul-purple);
  color: var(--soul-violet);
  cursor: pointer;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

.map-location.discovered:hover {
  border-color: var(--soul-cyan);
  color: var(--soul-cyan);
  transform: translateY(-5px);
  box-shadow: 0 5px 25px var(--soul-glow);
  filter: drop-shadow(0 0 20px var(--cyan-glow));
}

.map-location.active {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  animation: locationPulse 2s ease-in-out infinite;
}

@keyframes locationPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
}

/* Inventory Panel */
.inventory-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  position: relative;
  overflow: hidden;
}

.inventory-panel h4 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.inventory-panel h4 i {
  color: var(--soul-violet);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

/* Abilities Panel */
.abilities-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  position: relative;
  overflow: hidden;
}

.abilities-panel h4 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.abilities-panel h4 i {
  color: var(--soul-violet);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

.abilities-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ability-item {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--soul-purple);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.ability-item:hover {
  border-color: var(--soul-cyan);
  transform: translateX(5px);
  box-shadow: 0 0 25px var(--soul-glow);
}

.ability-icon {
  font-size: 1.8rem;
  color: var(--soul-violet);
  filter: drop-shadow(0 0 10px var(--purple-glow));
  transition: all 0.3s ease;
}

.ability-item:hover .ability-icon {
  color: var(--soul-cyan);
  filter: drop-shadow(0 0 15px var(--cyan-glow));
  transform: scale(1.2);
}

.ability-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ability-name {
  color: #e0e0e0;
  font-weight: 600;
  font-size: 1rem;
}

.ability-cost {
  color: var(--soul-cyan);
  font-size: 0.85rem;
}

/* Achievements Panel */
.achievements-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  position: relative;
  overflow: hidden;
}

.achievements-panel h4 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.achievements-panel h4 i {
  color: var(--soul-violet);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.achievement {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(106, 13, 173, 0.3);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.achievement i {
  font-size: 1.3rem;
  color: #666;
}

.achievement span {
  color: #888;
  font-size: 0.85rem;
}

.achievement.locked {
  opacity: 0.5;
}

.achievement.unlocked {
  border-color: var(--accent-gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  animation: achievementUnlock 0.6s ease;
}

.achievement.unlocked i {
  color: var(--accent-gold);
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.achievement.unlocked span {
  color: var(--accent-gold);
  font-weight: 600;
}

@keyframes achievementUnlock {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Skills Panel */
.skills-panel {
  background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(10, 10, 15, 0.95));
  border: 2px solid var(--soul-purple);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 0 40px var(--soul-glow),
    inset 0 0 40px rgba(106, 13, 173, 0.1);
  position: relative;
  overflow: hidden;
}

.skills-panel h4 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.skills-panel h4 i {
  color: var(--soul-violet);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 10px var(--purple-glow));
}

.skill-bars {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.skill-item {
  position: relative;
}

.skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.skill-header i {
  color: var(--soul-cyan);
  font-size: 1.1rem;
}

.skill-header span:first-of-type {
  flex: 1;
  color: #e0e0e0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.skill-value {
  color: var(--accent-gold);
  font-weight: 700;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.skill-bar {
  height: 12px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--soul-purple);
  position: relative;
}

.skill-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmerBar 2s linear infinite;
}

@keyframes shimmerBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--soul-purple), var(--soul-violet), var(--soul-cyan));
  background-size: 200% 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  animation: skillGradient 3s ease infinite;
  box-shadow: 0 0 15px var(--soul-glow);
  position: relative;
}

@keyframes skillGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.inventory-item {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(18, 18, 26, 0.6));
  padding: 1.25rem;
  border-radius: 12px;
  border: 2px solid rgba(106, 13, 173, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.inventory-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(106, 13, 173, 0.3), transparent);
  transition: left 0.5s ease;
}

.inventory-item:hover::before {
  left: 100%;
}

.inventory-item:hover {
  border-color: var(--soul-cyan);
  transform: translateY(-5px);
  box-shadow: 
    0 5px 25px var(--soul-glow),
    inset 0 0 20px rgba(106, 13, 173, 0.2);
}

.inventory-item i {
  font-size: 1.8rem;
  color: var(--soul-violet);
  filter: drop-shadow(0 0 10px var(--purple-glow));
  transition: all 0.3s ease;
}

.inventory-item:hover i {
  color: var(--soul-cyan);
  filter: drop-shadow(0 0 15px var(--cyan-glow));
  transform: scale(1.2) rotate(5deg);
}

.inventory-item span {
  flex: 1;
  color: #e0e0e0;
  font-weight: 600;
  font-size: 1rem;
}

.item-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--accent-silver);
}

.item-name {
  font-weight: 600;
  color: var(--soul-cyan);
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
}

.item-type {
  font-size: 0.85rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Combat Modal */
.combat-modal {
  text-align: center;
}

.enemy-display {
  margin-bottom: 2rem;
}

.enemy-icon {
  font-size: 6rem;
  color: var(--danger-red);
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px rgba(220, 20, 60, 0.7));
  animation: float 2s ease-in-out infinite;
}

.enemy-name {
  font-size: 2rem;
  color: var(--danger-red);
  margin-bottom: 1rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.7);
}

.enemy-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.enemy-stat {
  font-size: 1.2rem;
  color: #d0d0d0;
  font-weight: 600;
}

.combat-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.combat-btn {
  background: linear-gradient(135deg, rgba(106, 13, 173, 0.4), rgba(220, 20, 60, 0.4));
  border: 2px solid var(--soul-purple);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  transform: translateZ(0);
}

.combat-btn:hover {
  background: linear-gradient(135deg, rgba(106, 13, 173, 0.6), rgba(220, 20, 60, 0.6));
  border-color: var(--danger-red);
  transform: scale(1.05);
  box-shadow: 0 0 30px var(--soul-glow);
}

.combat-btn i {
  margin-right: 0.75rem;
  font-size: 1.5rem;
}

.combat-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Battle Log */
.battle-log {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--soul-purple);
  border-radius: 10px;
  padding: 1.5rem;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2rem;
  font-family: 'Inter', monospace;
}

.log-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(106, 13, 173, 0.2);
  color: #b0b0b0;
  font-size: 0.95rem;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-entry.damage {
  color: var(--danger-red);
  font-weight: 600;
}

.log-entry.heal {
  color: var(--health-green);
  font-weight: 600;
}

.log-entry.info {
  color: var(--soul-cyan);
}

/* Victory/Death Screens */
.victory-modal .modal-content,
.death-modal .modal-content {
  text-align: center;
}

.victory-icon,
.death-icon {
  font-size: 6rem;
  margin-bottom: 2rem;
}

.victory-icon {
  color: var(--accent-gold);
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
  animation: float 2s ease-in-out infinite;
}

.death-icon {
  color: var(--danger-red);
  filter: drop-shadow(0 0 30px rgba(220, 20, 60, 0.8));
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.reward-item {
  background: rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--soul-purple);
}

.reward-item i {
  font-size: 2.5rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
}

.reward-amount {
  font-size: 1.5rem;
  color: var(--accent-gold);
  font-weight: 700;
  font-family: 'Cinzel', serif;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn {
  background: linear-gradient(135deg, var(--soul-purple), var(--soul-violet));
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 10px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  box-shadow: 0 0 20px var(--soul-glow);
  transform: translateZ(0);
  will-change: transform;
}

.btn:hover {
  background: linear-gradient(135deg, var(--soul-violet), var(--soul-blue));
  transform: translateY(-3px);
  box-shadow: 0 5px 30px var(--purple-glow);
}

.btn-secondary {
  background: rgba(106, 13, 173, 0.3);
  border: 2px solid var(--soul-purple);
}

.btn-secondary:hover {
  background: rgba(106, 13, 173, 0.5);
  border-color: var(--soul-violet);
}

/* Footer */
.game-footer {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: rgba(18, 18, 26, 0.6);
  border-radius: 15px;
  border: 1px solid var(--soul-purple);
}

.game-footer p {
  color: #888;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  font-family: 'Inter', sans-serif;
}

.game-footer .tip {
  color: var(--soul-cyan);
  font-style: italic;
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .game-view {
    grid-template-columns: 1fr;
  }
  
  .stats-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .class-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .class-card {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .logo h1 {
    font-size: 2.5rem;
  }
  
  .logo i {
    font-size: 2.5rem;
  }
  
  .modal-content {
    padding: 2rem 1.5rem;
  }
  
  .modal-content h2 {
    font-size: 1.8rem;
  }
  
  .class-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid,
  .inventory-grid {
    grid-template-columns: 1fr;
  }
  
  .combat-actions {
    grid-template-columns: 1fr;
  }
  
  .story-panel {
  padding: 1.5rem;
  }
  
  .reward-grid {
    grid-template-columns: 1fr;
  }
}

/* Loading Screen */
#gameLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.loader-content {
  text-align: center;
  padding: 3rem;
  background: rgba(18, 18, 26, 0.8);
  border-radius: 20px;
  border: 2px solid var(--soul-purple);
  box-shadow: 0 0 40px var(--soul-glow);
  backdrop-filter: blur(15px);
}

.loader-icon {
  font-size: 5rem;
  background: linear-gradient(135deg, var(--soul-purple), var(--soul-violet), var(--soul-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px var(--purple-glow));
  margin-bottom: 2rem;
  animation: float 2s ease-in-out infinite;
}

.loader-text {
  font-size: 2rem;
  font-family: 'Cinzel', serif;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.loader-bar {
  width: 300px;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--soul-purple);
}

.loader-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--soul-purple), var(--soul-violet), var(--soul-cyan));
  width: 0%;
  animation: loadProgress 1s ease-in-out forwards;
  box-shadow: 0 0 10px var(--soul-glow);
}

@keyframes loadProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--soul-purple), var(--soul-violet));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--soul-violet), var(--soul-blue));
}