/* Warcraft Theme - Heroic Fantasy
   Key Feelings: Heroic Fantasy, Magic as Energy, Alive World
   Shapes: Rounded Rectangles, Shields, Scrolls
   Materials: Carved Wood, Gold, Light Stone
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Spectral:wght@400;600&display=swap');

:root {
  /* --- Color Palette --- */
  
  /* Backgrounds: Warm Wood & Stone */
  --color-bg-primary: #120f0a; /* Deepest Shadow */
  --color-bg-secondary: #1f1a14; /* Dark Wood */
  --color-bg-tertiary: #2e261d; /* Carved Wood */
  --color-bg-header: rgba(31, 26, 20, 0.95);

  /* Text: Parchment & Gold */
  --color-text-primary: #f5deb3; /* Wheat/Parchment */
  --color-text-secondary: #d4c4a8; /* Aged Paper */
  --color-text-muted: #8b7e66; /* Faded Ink */
  --color-text-gold: #ffd700; /* Gold */

  /* Borders: Metals */
  --color-border: #5c4033; /* Dark Bronze */
  --color-border-light: #8b5a2b; /* Bronze */
  --color-border-medium: #cd7f32; /* Copper */
  --color-border-gold: #ffd700;

  /* Accents: Magic & Factions */
  --color-accent-primary: #ffd700; /* Gold (Heroic) */
  --color-accent-secondary: #0070dd; /* Rare Blue */
  --color-accent-blue: #00bfff; /* Arcane/Mana */
  --color-accent-green: #32cd32; /* Nature */
  --color-accent-red: #8b0000; /* Horde/Blood */
  --color-accent-purple: #a335ee; /* Epic Purple */
  --color-accent-orange: #ff8000; /* Legendary Orange */

  /* Steam Integration */
  --color-steam-bg: #14100c;
  --color-steam-hover: #2e261d;
  --color-steam-text: #f5deb3;
  --color-steam-border: #8b5a2b;

  /* Glass/Panel Effects */
  --glass-bg: rgba(31, 26, 20, 0.92);
  --glass-border: rgba(205, 127, 50, 0.4);

  /* Status */
  --color-online-ping: rgba(50, 205, 50, 0.6);
  --color-online: #32cd32;
}

/* --- Animations --- */
@keyframes mana-pulse {
    0% { box-shadow: 0 0 5px rgba(0, 191, 255, 0.2); }
    50% { box-shadow: 0 0 15px rgba(0, 191, 255, 0.5); }
    100% { box-shadow: 0 0 5px rgba(0, 191, 255, 0.2); }
}

@keyframes gold-shimmer {
    0% { border-color: #8b5a2b; }
    50% { border-color: #ffd700; }
    100% { border-color: #8b5a2b; }
}

/* --- Typography --- */
body, .font-sans {
    font-family: 'Spectral', serif !important;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-serif, .font-display, .text-4xl, .text-2xl, .text-xl, .text-3xl {
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase;
    color: var(--color-text-gold) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.05em;
}

/* --- Backgrounds --- */
body {
  background-color: var(--color-bg-primary);
  /* Heroic Atmosphere */
  background-image: 
    /* Vignette */
    radial-gradient(circle at center, transparent 20%, #000 130%),
    /* Subtle magical particles/noise */
    repeating-linear-gradient(45deg, rgba(255, 215, 0, 0.02) 0px, rgba(255, 215, 0, 0.02) 1px, transparent 1px, transparent 50px),
    /* Deep texture */
    linear-gradient(to bottom, #1f1a14, #0a0805);
  background-attachment: fixed;
}

/* --- Shapes & Geometry --- */
/* Rounded Rectangles with "Carved" look */
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md {
    border-radius: 8px !important;
}

.rounded-full {
    border: 2px solid var(--color-border-medium);
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* --- Components --- */

/* Cards / Panels - Wooden Boards / Stone Slabs */
.bg-glass, .card, .panel, .game-card, .bg-\[\#1a1a1a\], .bg-\[\#0f0f0f\], .bg-gray-800 {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    /* Inner glow/shadow for depth */
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8), /* Deep shadow inside */
        0 4px 10px rgba(0,0,0,0.5),     /* Drop shadow */
        0 0 0 1px rgba(255, 215, 0, 0.1) /* Faint gold rim */
        !important;
    position: relative;
}

/* Header - Tavern Bulletin Board / Portal Frame */
header, .header-glass {
    background: var(--color-bg-header) !important;
    border-bottom: 2px solid var(--color-border-medium) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

/* Buttons - Stone Tablets with Magic Glow */
button, .btn, .btn-primary, .btn-secondary {
    font-family: 'Cinzel', serif !important;
    border-radius: 6px !important;
    border: 1px solid var(--color-border-medium) !important;
    background: linear-gradient(to bottom, #3e3226, #1f1a14) !important;
    color: var(--color-text-gold) !important;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}

button:hover, .btn:hover {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.3), 
        inset 0 0 10px rgba(255, 215, 0, 0.1);
    transform: translateY(-1px);
    color: #fff !important;
}

/* Inputs - Scrolls / Parchment areas */
input, textarea, select, .form-input {
    background-color: #120f0a !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    font-family: 'Spectral', serif !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important;
}

input:focus, textarea:focus {
    border-color: var(--color-accent-blue) !important;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.3), inset 0 2px 5px rgba(0,0,0,0.5) !important;
}

/* Text Overrides */
.text-gray-400, .text-gray-500, .text-gray-600 {
    color: var(--color-text-secondary) !important;
}

.text-white, .text-gray-100, .text-gray-200 {
    color: var(--color-text-primary) !important;
}

/* Link Hover Effects */
a:hover {
    color: var(--color-text-gold) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Specific Component Tweaks */
/* Game Cards - Add a "Rare Item" feel */
.game-card:hover {
    border-color: var(--color-accent-blue) !important;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.3) !important;
}

/* Badges / Pills */
.badge, .rounded-full.text-xs {
    border: 1px solid rgba(255,255,255,0.1);
    font-family: 'Cinzel', serif !important;
    letter-spacing: 0.05em;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #0f0c08;
}
::-webkit-scrollbar-thumb {
    background: #5c4033;
    border: 1px solid #0f0c08;
}
::-webkit-scrollbar-thumb:hover {
    background: #8b5a2b;
}

/* Restore Font Awesome families overridden by theme typography */
.fa, .fas, .fa-solid, .far, .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
}
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}