/* WoW Forever Custom Styling & Warcraft Theme */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --wow-gold: #f8b700;
  --wow-gold-dim: #c69b3d;
  --wow-gold-dark: #644a19;
  --wow-dark-bg: #090b10;
  --wow-panel-bg: #121520;
  --wow-panel-border: #2c3246;
  --wow-alliance-blue: #0078ff;
  --wow-horde-red: #b30000;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--wow-dark-bg);
  color: #e2e8f0;
  background-attachment: fixed;
}

h1, h2, h3, h4, .font-cinzel {
  font-family: 'Cinzel', serif;
}

/* WoW Border & Metallic Trims */
.wow-border {
  border: 1px solid #3a4259;
  box-shadow: 0 0 0 1px #161a26, 0 10px 30px rgba(0, 0, 0, 0.7);
  position: relative;
}

.wow-border-gold {
  border: 1px solid #a67c2e;
  box-shadow: 0 0 20px rgba(198, 155, 61, 0.25), inset 0 0 15px rgba(198, 155, 61, 0.08);
}

.wow-border-alliance {
  border-color: #0078ff;
  box-shadow: 0 0 20px rgba(0, 120, 255, 0.25), inset 0 0 15px rgba(0, 120, 255, 0.08);
}

.wow-border-horde {
  border-color: #b30000;
  box-shadow: 0 0 20px rgba(179, 0, 0, 0.25), inset 0 0 15px rgba(179, 0, 0, 0.08);
}

.wow-gold-text {
  color: #f8b700;
  text-shadow: 0 0 12px rgba(248, 183, 0, 0.5);
}

.wow-gold-gradient {
  background: linear-gradient(180deg, #fff5c0 0%, #e5c158 45%, #9e7520 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Class Colors */
.color-warrior { color: #C79C6E; }
.color-paladin { color: #F58CBA; }
.color-hunter { color: #ABD473; }
.color-rogue { color: #FFF569; }
.color-priest { color: #FFFFFF; }
.color-deathknight { color: #C41E3A; }
.color-shaman { color: #0070DE; }
.color-mage { color: #40C7EB; }
.color-warlock { color: #8787ED; }
.color-monk { color: #00FF96; }
.color-druid { color: #FF7D0A; }
.color-demonhunter { color: #A330C9; }
.color-evoker { color: #33937F; }

/* Custom Buttons */
.btn-wow {
  background: linear-gradient(180deg, #3a2e19 0%, #20170a 100%);
  border: 1px solid #a67c2e;
  color: #fce8a6;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 235, 160, 0.35);
}

.btn-wow:hover {
  background: linear-gradient(180deg, #5c4927 0%, #352611 100%);
  border-color: #ffd166;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(248, 183, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.btn-wow:active {
  transform: translateY(1px);
}

.btn-wow-alliance {
  background: linear-gradient(180deg, #0d2850 0%, #08162e 100%);
  border: 1px solid #2563eb;
  color: #bfdbfe;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(147, 197, 253, 0.35);
}
.btn-wow-alliance:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #0f2963 100%);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
}

.btn-wow-horde {
  background: linear-gradient(180deg, #4c0f0f 0%, #280808 100%);
  border: 1px solid #dc2626;
  color: #fecaca;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(252, 165, 165, 0.35);
}
.btn-wow-horde:hover {
  background: linear-gradient(180deg, #991b1b 0%, #450a0a 100%);
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #090b10;
}
::-webkit-scrollbar-thumb {
  background: #23293a;
  border-radius: 4px;
  border: 1px solid #3f4a66;
}
::-webkit-scrollbar-thumb:hover {
  background: #a67c2e;
}

/* Image Hover Zoom Effects */
.zoom-card {
  overflow: hidden;
  position: relative;
}
.zoom-card img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
}
.zoom-card:hover img {
  transform: scale(1.06);
  filter: brightness(1.1);
}

/* Faction Glow Transitions */
.faction-alliance-bg {
  background-image: 
    linear-gradient(180deg, rgba(9, 11, 16, 0.75) 0%, rgba(9, 11, 16, 0.95) 100%),
    radial-gradient(circle at 50% 10%, rgba(0, 120, 255, 0.2) 0%, transparent 60%);
}

.faction-horde-bg {
  background-image: 
    linear-gradient(180deg, rgba(9, 11, 16, 0.75) 0%, rgba(9, 11, 16, 0.95) 100%),
    radial-gradient(circle at 50% 10%, rgba(179, 0, 0, 0.2) 0%, transparent 60%);
}