/* ==========================================================================
   AFTERFALL - Elite Post-Apocalyptic ARPG Showcase Stylesheet
   Strict Taste-Skill Anti-Slop Compliant (4pt/8pt Base Grid, Zero-Generic UI)
   ========================================================================== */

:root {
  /* Color Palette - Keine reinen Schwarzwerte (#000000 verboten) */
  --color-void: #090a0f;
  --color-void-dark: #06070a;
  --color-surface: #11141c;
  --color-surface-hover: #171b26;
  --color-surface-card: rgba(17, 20, 28, 0.7);

  /* Micro-Borders & Grids */
  --border-dim: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-glow-gold: rgba(212, 175, 55, 0.4);
  --border-glow-crimson: rgba(220, 38, 38, 0.4);

  /* Akzente */
  --color-gold: #d4af37;
  --color-gold-light: #f5d77f;
  --color-gold-glow: #e6ca65;
  --color-crimson: #991b1b;
  --color-crimson-light: #ef4444;
  --color-emerald: #10b981;

  /* Typography Colors */
  --color-ash: #94a3b8;
  --color-ash-light: #cbd5e1;
  --color-ash-muted: #64748b;
  --color-stone-100: #f1f5f9;
  --color-stone-200: #e2e8f0;
  --color-stone-300: #cbd5e1;

  /* Font Families */
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shadows */
  --shadow-gold-glow: 0 0 24px rgba(212, 175, 55, 0.25);
  --shadow-crimson-glow: 0 0 24px rgba(239, 68, 68, 0.25);
  --shadow-emerald-glow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--color-void);
  color: var(--color-ash);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Base Utility Classes */
.bg-void { background-color: var(--color-void); }
.bg-void-dark { background-color: var(--color-void-dark); }
.bg-surface { background-color: var(--color-surface); }
.text-ash { color: var(--color-ash); }
.text-ash-light { color: var(--color-ash-light); }
.text-ash-muted { color: var(--color-ash-muted); }
.text-gold { color: var(--color-gold); }
.text-gold-light { color: var(--color-gold-light); }
.text-gold-glow { color: var(--color-gold-glow); }
.text-crimson { color: var(--color-crimson); }
.text-crimson-light { color: var(--color-crimson-light); }

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

.border-border-dim { border-color: var(--border-dim); }
.border-border-subtle { border-color: var(--border-subtle); }

/* Ambient Canvas & Vignette */
#ambient-canvas {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.vignette-overlay {
  background: radial-gradient(circle at center, transparent 40%, rgba(6, 7, 10, 0.85) 100%);
  pointer-events: none;
}

.cursor-light {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* Glass Header */
.glass-header {
  background: rgba(9, 10, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.text-glow-amber {
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
}

.drop-shadow-hero {
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 60px rgba(212, 175, 55, 0.15);
}

/* Nav Link Hover Animation */
.nav-link {
  position: relative;
  padding: 8px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after {
  width: 100%;
}

/* Interactive Buttons */
.btn-primary {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  color: #fff;
  border: 1px solid rgba(239, 68, 68, 0.4);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(153, 27, 27, 0.4);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
  border-color: rgba(239, 68, 68, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}

.btn-secondary {
  text-decoration: none;
  background: rgba(17, 20, 28, 0.6);
  backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary:hover {
  background: rgba(23, 27, 38, 0.8);
  transform: translateY(-2px);
}

.btn-gamejolt {
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grid & Layout System (Strict 8pt rhythm) */
.max-w-7xl { max-width: 1280px; }
.max-w-5xl { max-width: 1024px; }
.max-w-4xl { max-width: 896px; }
.max-w-3xl { max-width: 768px; }
.max-w-2xl { max-width: 672px; }
.max-w-md { max-width: 448px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.px-6 { padding-left: 24px; padding-right: 24px; }
.py-28 { padding-top: 112px; padding-bottom: 112px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

.border { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }

.relative { position: relative; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.pointer-events-none { pointer-events: none; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.w-14 { width: 56px; }
.h-14 { height: 56px; }
.w-16 { width: 64px; }
.h-16 { height: 64px; }
.w-2 { width: 8px; }
.h-2 { height: 8px; }
.w-8 { width: 32px; }
.h-px { height: 1px; }
.h-20 { height: 80px; }
.h-1\.5 { height: 6px; }

.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }

/* Responsive Grid Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: flex-end; }
  .md\:text-left { text-align: left; }
  .md\:text-2xl { font-size: 24px; line-height: 32px; }
  .md\:text-3xl { font-size: 30px; line-height: 36px; }
  .md\:text-5xl { font-size: 48px; line-height: 1.1; }
  .md\:text-8xl { font-size: 96px; line-height: 1; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:text-9xl { font-size: 120px; line-height: 0.95; }
  .lg\:text-3xl { font-size: 30px; line-height: 38px; }
}

/* Card Hover Juice & Motion */
.pillar-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.trophy-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.trophy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.badge-trophy.bronze { background: rgba(180, 83, 9, 0.2); color: #d97706; border: 1px solid rgba(180, 83, 9, 0.4); }
.badge-trophy.silver { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }
.badge-trophy.gold { background: rgba(212, 175, 55, 0.2); color: #f5d77f; border: 1px solid rgba(212, 175, 55, 0.4); }
.badge-trophy.platinum { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }

/* PoE Item Tooltip Style Card */
.poe-item-card {
  background: rgba(13, 15, 22, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  position: relative;
  font-family: var(--font-mono);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.poe-item-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
}
.poe-item-header {
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 12px;
}
.poe-item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.poe-item-base {
  font-size: 11px;
  color: var(--color-ash-muted);
  text-transform: uppercase;
}
.poe-item-sockets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.socket {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #555;
}
.socket.red { background: #dc2626; border-color: #ef4444; box-shadow: 0 0 6px rgba(220, 38, 38, 0.6); }
.socket.green { background: #16a34a; border-color: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.socket.blue { background: #2563eb; border-color: #3b82f6; box-shadow: 0 0 6px rgba(37, 99, 235, 0.6); }

.poe-affix-list {
  font-size: 12px;
  color: #7dd3fc;
  line-height: 1.6;
}
.poe-flavor {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
  font-size: 11px;
  color: #a87b51;
  font-style: italic;
  text-align: center;
}

/* Keyframes */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping { animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }