/* Neo-Expressionism Theme */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Courier+Prime:wght@400;700&display=swap');

:root {
  /* Primary Background Colors - Chaotic Dark */
  --color-bg-primary: #121010; /* Dark charcoal */
  --color-bg-secondary: #1a1515; /* Rusty dark */
  --color-bg-tertiary: #15151a; /* Navy dark */
  --color-bg-header: #000000;

  /* Text Colors - High Contrast */
  --color-text-primary: #f2f2f2; /* Off-white */
  --color-text-secondary: #ff0055; /* Hot pink */
  --color-text-muted: #aaaaaa;

  /* Border Colors - Stark */
  --color-border: #ffffff;
  --color-border-light: rgba(255, 255, 255, 0.3);
  --color-border-medium: rgba(255, 255, 255, 0.6);

  /* Accent Colors - Acid/Neon */
  --color-accent-primary: #ffff00; /* Acid Yellow */
  --color-accent-secondary: #00ffff; /* Cyan */
  --color-accent-blue: #00ffff;
  --color-accent-green: #33ff00;
  --color-accent-red: #ff0000;
  --color-accent-yellow: #ffff00;
  --color-accent-amber: #ffaa00;

  /* Steam Colors */
  --color-steam-bg: #000000;
  --color-steam-hover: #ff0055;
  --color-steam-text: #ffffff;
  --color-steam-border: #ffff00;

  /* Glass Effect */
  --glass-bg: rgba(0, 0, 0, 0.95);
  --glass-border: #ffffff;

  /* Telegram Color */
  --color-telegram: #0088cc;

  /* Status Colors */
  --color-online-ping: rgba(51, 255, 0, 0.75);
  --color-online: #33ff00;
}

/* Typography Overrides */
body {
    font-family: 'Courier Prime', monospace !important;
    letter-spacing: -0.5px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

h1, h2, h3, h4, h5, h6, .font-display, .logo-text, .nav-link {
    font-family: 'Permanent Marker', cursive !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0px #ff0055;
}

/* Rough Borders and Shadows */
.game-card, .card, .bg-glass, .bg-bg-secondary {
    border: 2px solid var(--color-border) !important;
    box-shadow: 4px 4px 0px var(--color-accent-primary) !important;
    border-radius: 0 !important; /* Sharp corners */
    transition: all 0.1s ease !important;
}

.game-card:hover, .card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0px var(--color-accent-secondary) !important;
    border-color: var(--color-accent-secondary) !important;
}

/* Buttons */
.btn, button, .button, a.btn-primary, a.btn-secondary {
    border: 2px solid var(--color-border) !important;
    border-radius: 0 !important;
    font-family: 'Permanent Marker', cursive !important;
    text-transform: uppercase;
    box-shadow: 3px 3px 0px #000 !important;
}

.btn:hover, button:hover {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #000 !important;
}

/* Inputs */
input, textarea, select {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffff00 !important;
    font-family: 'Courier Prime', monospace !important;
    border-radius: 0 !important;
}

input:focus, textarea:focus {
    outline: none !important;
    border-color: var(--color-accent-primary) !important;
    box-shadow: 3px 3px 0px var(--color-accent-primary) !important;
}

/* Specific text color overrides */
.text-gray-400, .text-gray-500, .text-muted {
    color: #aaaaaa !important;
}

.text-white {
    color: #ffffff !important;
}

/* Header */
header, .header-glass {
    border-bottom: 2px solid #ffffff !important;
    background: #000000 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #000000;
    border-left: 1px solid #333;
}
::-webkit-scrollbar-thumb {
    background: #ff0055;
    border: 2px solid #000000;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff3377;
}

/* Selection */
::selection {
    background: #ffff00;
    color: #000000;
}

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