/* Diablo II Theme - Dark, Gothic, Stone Hell */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');

:root {
  /* Background Colors - Dark Stone & Abyss */
  --color-bg-primary: #0a0a0a; /* Deepest Abyss */
  --color-bg-secondary: #141414; /* Dark Stone */
  --color-bg-tertiary: #1f1f1f; /* Lighter Stone */
  --color-bg-header: rgba(10, 10, 10, 0.98);

  /* Text Colors - Parchment & Blood */
  --color-text-primary: #dcdcdc; /* Aged Parchment */
  --color-text-secondary: #a8a8a8; /* Dull Steel */
  --color-text-muted: #6b6b6b; /* Ash */

  /* Border Colors - Rusted Metal & Stone */
  --color-border: #4a3c31; /* Old Iron */
  --color-border-light: rgba(139, 69, 19, 0.4);
  --color-border-medium: #8b4513; /* Rusted Iron */

  /* Accent Colors - Demonic Power */
  --color-accent-primary: #8a0303; /* Blood Red */
  --color-accent-secondary: #c04000; /* Hellfire Orange */
  --color-accent-blue: #2d3047; /* Dark Magic */
  --color-accent-green: #2f4f2f; /* Poison/Corruption */
  --color-accent-red: #8a0303;
  --color-accent-yellow: #daa520; /* Ancient Gold */
  --color-accent-amber: #b8860b;

  /* Steam Colors - Darkened */
  --color-steam-bg: #0f0f0f;
  --color-steam-hover: #3d0000;
  --color-steam-text: #dcdcdc;
  --color-steam-border: #8a0303;

  /* Glass Effect - Dirty Crystal */
  --glass-bg: rgba(20, 20, 20, 0.95);
  --glass-border: rgba(139, 69, 19, 0.5);

  /* Status Colors */
  --color-online-ping: rgba(255, 69, 0, 0.6);
  --color-online: #ff4500;
}

/* --- Typography --- */
body, .font-sans {
    font-family: 'MedievalSharp', cursive !important;
    letter-spacing: 0.02em;
}

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: #c0b396 !important; /* Gold/Parchment */
    text-shadow: 2px 2px 0px #000;
}

/* --- Backgrounds --- */
body {
  background-color: var(--color-bg-primary);
  /* Subtle stone texture pattern */
  background-image: 
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 10px),
    radial-gradient(circle at 50% 0%, #2a0a0a 0%, #000000 60%);
  background-attachment: fixed;
}

/* --- Shapes & Geometry --- */
/* Remove all rounded corners for that sharp, carved stone look */
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md, .rounded, .rounded-full, .rounded-sm {
    border-radius: 1px !important;
}

/* Exceptions for user avatars to keep them slightly distinct or circular if needed, but let's make them square too for style */
.rounded-full {
    border-radius: 50% !important; /* Keep avatars round, or maybe 10% for a gem look? Let's keep round for now */
    border: 2px solid #5c4033;
}

/* --- Components --- */

/* Cards / Panels */
.bg-glass, .card, .panel, .game-card, .bg-\[\#1a1a1a\], .bg-\[\#0f0f0f\] {
    background-color: #161616 !important;
    border: 1px solid #4a3c31 !important;
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.8), 
        0 4px 10px rgba(0,0,0,0.5);
    position: relative;
}

/* Decorative corners for cards (using pseudo-elements if possible, but hard with generic classes) 
   Instead, we use a double border effect via box-shadow */
.card, .panel, .game-card {
    box-shadow: 
        inset 0 0 0 1px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(0,0,0,0.8),
        0 5px 15px rgba(0,0,0,0.5) !important;
}

.game-card:hover {
    border-color: #8a0303 !important;
    box-shadow: 
        0 0 15px rgba(138, 3, 3, 0.4), 
        inset 0 0 20px rgba(0,0,0,0.9) !important;
    transform: translateY(-2px);
}

/* Buttons */
.btn-primary, .bg-purple-600, .btn-gradient {
    background: linear-gradient(to bottom, #4a3c31, #2a221b) !important;
    border: 2px solid #6d5a4b !important;
    border-top-color: #8b735b !important;
    border-bottom-color: #1a1510 !important;
    color: #e0d8c8 !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.btn-primary:hover, .bg-purple-600:hover, .btn-gradient:hover {
    background: linear-gradient(to bottom, #8a0303, #4a0000) !important;
    border-color: #ff4500 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
}

/* Secondary Buttons */
.btn-secondary, .bg-gray-700 {
    background: #1f1f1f !important;
    border: 1px solid #4a3c31 !important;
    color: #a8a8a8 !important;
}

/* Inputs */
input, textarea, select, .form-input {
    background-color: #0a0a0a !important;
    border: 2px solid #4a3c31 !important;
    color: #dcdcdc !important;
    font-family: 'MedievalSharp', cursive !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}

input:focus, textarea:focus, select:focus {
    border-color: #8a0303 !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(138, 3, 3, 0.5), inset 0 2px 8px rgba(0,0,0,0.8) !important;
}

/* Headers & Navigation */
header, .header-glass {
    background: linear-gradient(to bottom, #141414, #0a0a0a) !important;
    border-bottom: 2px solid #4a3c31 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

/* Text Gradients -> Solid Gold/Red */
.text-gradient {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #c0b396 !important;
    text-shadow: 
        0 0 10px rgba(138, 3, 3, 0.5),
        2px 2px 0 #000;
}

/* Links */
a {
    transition: color 0.3s ease;
}
a:hover {
    color: #ff4500 !important;
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.5);
}

/* Modals */
.modal-content, [role="dialog"] {
    background-color: #141414 !important;
    border: 4px solid #4a3c31 !important;
    border-image: linear-gradient(to bottom, #8b4513, #2a221b) 1 !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #4a3c31;
    border: 1px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover {
    background: #6d5a4b;
}

/* 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;
}