/* Gamelection – Retro-Theme (NES/SNES-Ära)
   Zusätzlich NACH app.css laden:
   <link rel="stylesheet" href="/assets/css/theme-retro.css">
   Schrift: "Press Start 2P" (SIL Open Font License), self-hosted. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/PressStart2P.woff2') format('woff2');
  font-display: swap;
}

:root {
  --radius: 0;                       /* harte Kanten überall, wo var(--radius) genutzt wird */
  --bg: #0d0d14;
  --surface: #15151f;
  --surface-2: #1d1d2b;
  --border: #32324a;
  --pixel-font: 'Press Start 2P', 'Courier New', monospace;
  --hard-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- CRT-Gefühl */

/* Rauschen etwas kräftiger als im Standard-Theme */
body::before { opacity: 0.09; }

/* Scanlines + leichte Vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------------------- Typo */

.logo-text {
  font-family: var(--pixel-font);
  font-size: 12px;
  letter-spacing: 0;
}

h1, .form-card h1, .page-head h1, .teaser h1 {
  font-family: var(--pixel-font);
  line-height: 1.6;
}
.hero h1 { font-size: 24px; }
.page-head h1 { font-size: 16px; }
.form-card h1 { font-size: 14px; }
.teaser h1 { font-size: 18px; }
.feature h3, .modal h2 {
  font-family: var(--pixel-font);
  font-size: 11px;
  line-height: 1.6;
}
.result-info h3 { font-size: 14px; }
.card-title { font-size: 13px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 17px; }
}

/* ---------------------------------------------------------------- Kanten & Hard Shadows */

.btn, input, select, textarea, .badge, .stat-chip, .toast, .notice,
.affiliate-row a, .cover-placeholder, .mobile-menu a, .nav-links a, .nav-burger,
.danger-zone, .result-thumb, .chip {
  border-radius: 0;
}

.btn {
  border-width: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn-primary { border-color: #b45309; }

.card, .form-card, .feature, .result-row, .table-wrap, .modal, .teaser {
  border-width: 2px;
  box-shadow: var(--hard-shadow);
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(245, 158, 11, 0.35);
}

.topbar { border-bottom-width: 2px; backdrop-filter: none; background: var(--bg); }
.mobile-menu { border-bottom-width: 2px; }

input:focus, select:focus, textarea:focus {
  box-shadow: 3px 3px 0 rgba(245, 158, 11, 0.35);
}

/* ---------------------------------------------------------------- Details */

/* Cover-Platzhalter: Pixel-Schachbrett statt Verlauf */
.cover-placeholder {
  font-family: var(--pixel-font);
  font-size: 28px;
  background:
    repeating-conic-gradient(rgba(245, 158, 11, 0.10) 0% 25%, var(--surface-2) 0% 50%);
  background-size: 16px 16px;
}
.result-thumb .cover-placeholder { font-size: 14px; }

/* Pixelige Sterne & Chips */
.stars { font-size: 12px; letter-spacing: 2px; }
.stat-chip strong { font-family: var(--pixel-font); font-size: 10px; }
.badge-soon { font-family: var(--pixel-font); font-size: 7px; padding: 3px 8px; }

/* Blinkender Cursor-Effekt für den Marktplatz-Teaser-Badge */
@keyframes retro-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.35; } }
.teaser .badge-soon { animation: retro-blink 1.2s steps(1) infinite; }