/* Fonts are self-hosted through the Vite Bunny plugin (see vite.config.js).
   The previous @import pulled three families from Google on every page view, which is a
   render-blocking request chain and an undisclosed third-party transfer of the visitor's IP. */

:root {
  --steam-bg-dark: #121811;
  --steam-bg-panel: #1a2418;
  --steam-bg-header: #243221;
  --steam-bg-card: #202d1d;
  --steam-bg-inset: #10170f;
  
  --steam-border-light: #475e3c;
  --steam-border-dark: #0d130c;
  --steam-border-mid: #2c3c28;

  --steam-green-lime: #a2d658;
  --steam-green-accent: #83b841;
  --steam-green-dim: #5c842e;
  --steam-text-light: #d8e6d2;
  --steam-text-muted: #8ba383;

  --steam-gold: #e5b324;
  --steam-blue: #4ba3e3;
  --steam-red: #d94545;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  background-color: var(--steam-bg-dark);
  color: var(--steam-text-light);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-image: radial-gradient(circle at 50% 0%, #1e2c1c 0%, #121811 70%);
}

.mono-font {
  font-family: 'Share Tech Mono', monospace;
}

.retro-font {
  font-family: 'Share Tech Mono', monospace;
}

/* Old Steam Beveled Containers */
.steam-box {
  background-color: var(--steam-bg-panel);
  border-top: 2px solid var(--steam-border-light);
  border-left: 2px solid var(--steam-border-light);
  border-bottom: 2px solid var(--steam-border-dark);
  border-right: 2px solid var(--steam-border-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.steam-box-inset {
  background-color: var(--steam-bg-inset);
  border-top: 2px solid var(--steam-border-dark);
  border-left: 2px solid var(--steam-border-dark);
  border-bottom: 2px solid var(--steam-border-light);
  border-right: 2px solid var(--steam-border-light);
}

.steam-header-bar {
  background: linear-gradient(180deg, #2e3f2a 0%, #1c2919 100%);
  border-bottom: 2px solid var(--steam-green-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Old Steam Buttons */
.steam-btn {
  background: linear-gradient(180deg, #3d5435 0%, #263620 100%);
  border-top: 1px solid #57784b;
  border-left: 1px solid #57784b;
  border-bottom: 1px solid #141c11;
  border-right: 1px solid #141c11;
  color: #c9e2bd;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.steam-btn:hover {
  background: linear-gradient(180deg, #4d6b42 0%, #304429 100%);
  color: var(--steam-green-lime);
  box-shadow: 0 0 8px rgba(131, 184, 65, 0.3);
}

.steam-btn:active {
  background: #1a2517;
  border-top: 1px solid #141c11;
  border-left: 1px solid #141c11;
  border-bottom: 1px solid #57784b;
  border-right: 1px solid #57784b;
}

.steam-btn-secondary {
  background: linear-gradient(180deg, #2b3827 0%, #192316 100%);
  color: var(--steam-text-muted);
  border: 1px solid var(--steam-border-mid);
}

.steam-btn-secondary:hover {
  color: var(--steam-text-light);
  border-color: var(--steam-border-light);
}

.steam-btn-danger {
  background: linear-gradient(180deg, #5c2626 0%, #381515 100%);
  border-top: 1px solid #823b3b;
  border-left: 1px solid #823b3b;
  border-bottom: 1px solid #1f0b0b;
  border-right: 1px solid #1f0b0b;
  color: #fca5a5;
}

.steam-btn-danger:hover {
  background: linear-gradient(180deg, #753030 0%, #4a1c1c 100%);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

.steam-btn-warning {
  background: linear-gradient(180deg, #5c441a 0%, #38270d 100%);
  border-top: 1px solid #82632b;
  border-left: 1px solid #82632b;
  border-bottom: 1px solid #1f1405;
  border-right: 1px solid #1f1405;
  color: #fde047;
}

.steam-btn-warning:hover {
  background: linear-gradient(180deg, #755722 0%, #4a3411 100%);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.steam-badge {
  background: rgba(131, 184, 65, 0.15);
  border: 1px solid var(--steam-green-accent);
  color: var(--steam-green-lime);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 2px;
}

.steam-badge-gold {
  background: rgba(229, 179, 36, 0.15);
  border: 1px solid var(--steam-gold);
  color: #f7d568;
}

.steam-badge-helper {
  background: rgba(75, 163, 227, 0.15);
  border: 1px solid var(--steam-blue);
  color: #8ed0ff;
}

.steam-badge-locked {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #3d4a39;
  /* #61735c measured 2.6:1 on the panel - below the 4.5:1 minimum for small text */
  color: #a8bfa0;
}

/* Custom Progress Bar */
.steam-progress-track {
  background-color: #10170f;
  border: 1px solid #2e3e29;
  height: 12px;
  position: relative;
  overflow: hidden;
}

.steam-progress-fill {
  background: linear-gradient(90deg, #5c842e 0%, #83b841 50%, #a2d658 100%);
  height: 100%;
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(162, 214, 88, 0.5);
}

/* Steam Avatar Box */
.steam-avatar-frame {
  border: 2px solid var(--steam-green-accent);
  box-shadow: 0 0 12px rgba(131, 184, 65, 0.4);
  background-color: #10170f;
  padding: 3px;
}

/* Achievement Item styling */
.achievement-card {
  background: linear-gradient(135deg, #1f2b1d 0%, #151d13 100%);
  border: 1px solid #344830;
  transition: all 0.2s ease;
}

.achievement-card:hover {
  border-color: var(--steam-green-accent);
  box-shadow: 0 0 10px rgba(131, 184, 65, 0.25);
  transform: translateY(-1px);
}

.achievement-card.unlocked {
  border-color: var(--steam-green-accent);
  background: linear-gradient(135deg, #253622 0%, #182316 100%);
}

.achievement-card.locked {
  border-color: #2a3826;
  background: #141c13;
}

.achievement-card.locked img {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* Notification Banner */
.steam-notification-banner {
  background: linear-gradient(90deg, #243520 0%, #192416 100%);
  border-bottom: 2px solid var(--steam-green-lime);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* Focus Visibility & Target Size (WCAG 2.4.7, 1.4.11, 2.5.8) */
:focus-visible {
  outline: 2px solid #8ed0ff !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #8ed0ff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(75, 163, 227, 0.4) !important;
}

input[type="checkbox"],
input[type="radio"] {
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
}

/* High Contrast Steam Input Fields */
.steam-input {
  background-color: #0b120a !important;
  color: #f0fdf4 !important;
  border: 1px solid #3e5e38 !important;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.steam-input:focus {
  border-color: #a2d658 !important;
  box-shadow: 0 0 10px rgba(162, 214, 88, 0.4) !important;
  background-color: #101a0e !important;
}

.steam-input::placeholder {
  color: #6a8c60 !important;
  opacity: 1;
}

select.steam-input option {
  background-color: #0c140c !important;
  color: #ffffff !important;
}

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

/* Retro Toast Notification */
.retro-toast-box {
  background-color: #141f12 !important;
  background-image: 
    linear-gradient(180deg, rgba(30, 48, 26, 0.96) 0%, rgba(14, 22, 12, 0.98) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 2px) !important;
  border: 2px solid #a2d658 !important;
  border-radius: 6px;
  box-shadow: 
    0 0 25px rgba(162, 214, 88, 0.5),
    inset 0 0 12px rgba(162, 214, 88, 0.2),
    0 10px 30px rgba(0, 0, 0, 0.95) !important;
  color: #ffffff !important;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  position: relative;
  overflow: hidden;
}

.retro-toast-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #a2d658;
  box-shadow: 0 0 8px #a2d658;
}

/* Retro Steam Markdown Prose Styles */
.prose-steam {
  color: #d1d5db;
  font-size: 0.875rem;
  line-height: 1.625;
}
.prose-steam h1, .prose-steam h2, .prose-steam h3, .prose-steam h4, .prose-steam h5, .prose-steam h6 {
  color: #a2d658;
  font-family: monospace;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose-steam h1 { font-size: 1.25rem; border-bottom: 1px solid #2e402b; padding-bottom: 0.25rem; }
.prose-steam h2 { font-size: 1.1rem; }
.prose-steam h3 { font-size: 1rem; }
.prose-steam p { margin-bottom: 0.75rem; }
.prose-steam p:last-child { margin-bottom: 0; }
.prose-steam a { color: #8ed0ff; text-decoration: underline; }
.prose-steam a:hover { color: #ffffff; }
.prose-steam strong { color: #ffffff; font-weight: 700; }
.prose-steam em { font-style: italic; color: #fbbf24; }
.prose-steam blockquote {
  border-left: 4px solid #83b841;
  background-color: rgba(16, 23, 15, 0.8);
  padding: 0.6rem 0.85rem;
  margin: 0.75rem 0;
  border-radius: 0 0.25rem 0.25rem 0;
  color: #9ca3af;
  font-style: italic;
}
.prose-steam blockquote p { margin-bottom: 0.25rem; }
.prose-steam ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.prose-steam ol { list-style-type: decimal; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.prose-steam li { margin-bottom: 0.25rem; }
.prose-steam code {
  background-color: #0b100a;
  color: #a2d658;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.85em;
  border: 1px solid #2e402b;
}
.prose-steam pre {
  background-color: #0b100a;
  border: 1px solid #2e402b;
  padding: 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}
.prose-steam pre code {
  background: none;
  padding: 0;
  border: none;
  color: #a2d658;
}
.prose-steam hr {
  border: 0;
  border-top: 1px solid #2e402b;
  margin: 1rem 0;
}