/* Pixelregal – 80er/90er-Look: Pixelschrift, harte Schatten, Konsolenfarben, Röhrenbild-Streifen.
   Schriften liegen auf dem eigenen Server (keine externen Dienste). */

@font-face { font-family: "Pixelify"; src: url("fonts/PixelifySans-Medium.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("fonts/Silkscreen-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --grund: #dedad0;          /* Konsolengrau */
  --punkt: rgba(27,19,64,.07);
  --flaeche: #fbf8ef;
  --tinte: #17112e;
  --leise: #5f5873;
  --linie: #17112e;
  --rot: #e0263f;
  --gelb: #f5b800;
  --gruen: #19a051;
  --blau: #2457d6;
  --lila: #1b1340;
  --schattenfarbe: var(--linie);
  --titelschatten: var(--gelb);
  --schatten: 4px 4px 0 var(--schattenfarbe);
  --schatten-gross: 6px 6px 0 var(--schattenfarbe);
  --rand: 3px solid var(--linie);
  --pixel: "Pixelify", ui-monospace, monospace;
  --silk: "Silkscreen", "Pixelify", ui-monospace, monospace;
  --text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0e0a22;
    --punkt: rgba(120,100,255,.10);
    --flaeche: #1a1438;
    --tinte: #f1ecff;
    --leise: #a69dc8;
    --linie: #000000;
    --rot: #ff3d5a;
    --gelb: #ffd23f;
    --gruen: #2fd47a;
    --blau: #4f86ff;
    --schattenfarbe: #4a37b0;
    --titelschatten: var(--rot);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinte); font: 16px/1.5 var(--text);
  background-color: var(--grund);
  background-image: radial-gradient(var(--punkt) 1.2px, transparent 1.3px);
  background-size: 12px 12px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: var(--blau); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: 2rem; text-shadow: 2px 2px 0 var(--titelschatten); }
h2 { font-size: 1.35rem; margin-top: 1.8em; display: flex; align-items: center; gap: 10px; }
h2::before { content: ""; width: 10px; height: 10px; background: var(--rot); box-shadow: 14px 0 0 var(--gelb), 28px 0 0 var(--gruen); margin-right: 30px; flex: none; }
.dezent { color: var(--leise); }
.mono, .pixel { font-family: var(--silk); letter-spacing: .02em; }
.pix { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 10; color: #fff; padding-top: env(safe-area-inset-top);
  background: var(--lila);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
}
.kopf-innen { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 24px; }
.logo { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 12px; font: 1.15rem/1 var(--silk); letter-spacing: .08em; text-shadow: 2px 2px 0 var(--rot); }
.logo-modul { width: 34px; height: auto; color: #fff; }
.streifen { display: grid; grid-template-columns: repeat(4, 1fr); height: 6px; }
.streifen i:nth-child(1) { background: var(--rot); }
.streifen i:nth-child(2) { background: var(--gelb); }
.streifen i:nth-child(3) { background: var(--gruen); }
.streifen i:nth-child(4) { background: var(--blau); }
.nav-oben { display: none; gap: 6px; margin-left: auto; }
.nav-oben a { color: #fff; text-decoration: none; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font: .8rem/1 var(--silk); letter-spacing: .04em; border: 2px solid transparent; }
.nav-oben a:hover { border-color: rgba(255,255,255,.35); }
.nav-oben a[aria-current] { background: var(--gelb); color: var(--lila); border-color: #000; box-shadow: 3px 3px 0 #000; }
.nav-oben .pix { width: 14px; height: 14px; }

/* Unten-Navigation am Handy */
.nav-unten {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--lila); border-top: 3px solid #000;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-unten a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; color: #b7aee0; text-decoration: none; font: .62rem/1 var(--silk); letter-spacing: .04em; }
.nav-unten .pix { width: 22px; height: 22px; }
.nav-unten a[aria-current] { color: var(--gelb); }
.nav-unten a[aria-current] .pix { filter: drop-shadow(2px 2px 0 var(--rot)); }

@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .nav-oben { display: flex; }
  .nav-unten { display: none; }
}

.inhalt { max-width: 1100px; margin: 0 auto; padding: 24px 16px 36px; }
.fuss { max-width: 1100px; margin: 0 auto; padding: 18px 16px 30px; display: flex; flex-wrap: wrap; gap: 18px; font: .7rem/1.4 var(--silk); border-top: 3px dashed var(--leise); }
.fuss a { color: var(--leise); }
.fuss-marke { color: var(--leise); margin-right: auto; }

/* ---------- Meldungen als Spiel-Textbox ---------- */
.meldung {
  padding: 14px 18px; margin-bottom: 18px; font-family: var(--pixel); font-size: 1.05rem;
  background: var(--lila); color: #fff; border: 3px solid #000;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--lila), var(--schatten);
}
.meldung::before { content: "▶ "; color: var(--gelb); }
.meldung-fehler::before { content: "! "; color: var(--rot); }
.meldung-ok::before { content: "★ "; color: var(--gruen); }

/* ---------- Knöpfe ---------- */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: var(--rand); border-radius: 0;
  background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten);
  font: .8rem/1 var(--silk); letter-spacing: .04em; text-decoration: none; cursor: pointer;
  transition: transform .05s, box-shadow .05s;
}
.btn:hover, button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--schattenfarbe); }
.btn:active, button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--schattenfarbe); }
.btn-haupt, button.btn-haupt { background: var(--rot); color: #fff; }
.btn-gelb { background: var(--gelb); color: #17112e; }
.btn-klein, button.btn-klein { min-height: 36px; padding: 0 12px; font-size: .7rem; }
.btn-gefahr, button.btn-gefahr { color: var(--rot); }
.btn-scan, button.btn-scan { background: var(--gelb); color: #17112e; }
.btn-scan .pix { width: 18px; height: 18px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- Formulare ---------- */
label { display: block; font: .75rem/1.3 var(--silk); letter-spacing: .03em; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; color: var(--tinte);
  background: var(--flaeche); border: var(--rand); border-radius: 0;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.08);
}
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--gelb); outline-offset: 2px; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.feld { margin-bottom: 16px; }
.feld small { color: var(--leise); display: block; margin-top: 6px; font-size: .85rem; }
.feld-reihe { display: flex; gap: 10px; align-items: stretch; }
.feld-reihe input { flex: 1; min-width: 0; }
.feld-reihe .btn-scan { flex: none; }
input[type=file] { width: 100%; padding: 10px; border: 3px dashed var(--leise); background: var(--flaeche); font: inherit; }
input[type=file]::file-selector-button { font: .7rem/1 var(--silk); margin-right: 12px; padding: 10px 14px; border: var(--rand); background: var(--gelb); color: #17112e; box-shadow: 3px 3px 0 var(--schattenfarbe); cursor: pointer; }
.raster-2 { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .raster-2 { grid-template-columns: 1fr 1fr; } }
.haken { display: flex; flex-wrap: wrap; gap: 10px; }
.haken label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: var(--rand); background: var(--flaeche); cursor: pointer; font: .95rem/1.3 var(--text); letter-spacing: 0; margin: 0; }
.haken input { width: 18px; height: 18px; accent-color: var(--rot); }
.haken label:has(input:checked) { background: var(--gelb); color: #17112e; box-shadow: 3px 3px 0 var(--schattenfarbe); }

.karte { background: var(--flaeche); border: var(--rand); padding: 20px; box-shadow: var(--schatten-gross); }
.schmal { max-width: 480px; margin: 0 auto; }

/* ---------- Suche ---------- */
.suche { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 24px; }
.suche select, .suche .suche-los { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .suche { grid-template-columns: 1fr auto 220px auto; }
  .suche select, .suche .suche-los { grid-column: auto; }
}
.leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.leiste h1, .leiste h2 { margin-bottom: 0; }
.zaehler { font: .7rem/1 var(--silk); color: var(--leise); margin-bottom: 16px; }

/* ---------- Spielmodule (Kacheln) ---------- */
.gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
@media (min-width: 600px) { .gitter { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .gitter { grid-template-columns: repeat(5, 1fr); } }
.kachel { color: inherit; text-decoration: none; display: block; background: var(--flaeche); border: var(--rand); box-shadow: var(--schatten); transition: transform .08s, box-shadow .08s; }
.kachel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--schattenfarbe); }
.kachel:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--schattenfarbe); }
.kachel .cover { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-bottom: var(--rand); background: #000; }
.kachel-text { padding: 8px 10px 10px; }
.kachel-titel { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kachel-zusatz { font: .6rem/1.6 var(--silk); color: var(--leise); margin-top: 4px; letter-spacing: .02em; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; }
.kachel-zusatz .sterne .pix { width: 10px; height: 10px; }

/* Platzhalter im Stil eines Modul-Etiketts */
.cover-leer { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }
.cover-leer::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 10px, transparent 10px 20px); }
.etikett-band { position: absolute; top: 0; left: 0; right: 0; padding: 7px 8px; background: #000; color: #fff; font: .55rem/1 var(--silk); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etikett-buchstabe { position: relative; font: 700 4.2rem/1 var(--pixel); text-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.etikett-rillen { position: absolute; left: 12%; right: 12%; bottom: 10px; height: 10px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 4px, transparent 4px 8px); }
.cover-leer.f0 { background: var(--rot); }
.cover-leer.f1 { background: var(--blau); }
.cover-leer.f2 { background: var(--gruen); }
.cover-leer.f3 { background: #ef7d00; }
.cover-leer.f4 { background: #6b3fd1; }
.cover-leer.f5 { background: #2b2546; }

/* ---------- Detailseiten ---------- */
.detail { display: grid; gap: 18px; grid-template-columns: 128px 1fr; align-items: start; }
.detail h1 { font-size: 1.55rem; overflow-wrap: anywhere; }
.detail .cover { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: var(--rand); box-shadow: var(--schatten-gross); }
.detail .cover-leer .etikett-buchstabe { font-size: 3rem; }
.detail-rest { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .detail { grid-template-columns: 280px 1fr; gap: 28px; }
  .detail h1 { font-size: 2.3rem; }
  .detail .cover-leer .etikett-buchstabe { font-size: 6rem; }
  .detail-rest { grid-column: 2; }
}
.wertung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note { font: 1.7rem/1 var(--silk); color: var(--rot); text-shadow: 2px 2px 0 var(--gelb); }
.sterne { display: inline-flex; gap: 3px; }
.sterne .pix { width: 16px; height: 16px; fill: var(--leise); opacity: .35; }
.sterne .pix.an { fill: var(--gelb); opacity: 1; filter: drop-shadow(1px 1px 0 #000); }
.fakten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; }
.fakten dt { font: .65rem/2 var(--silk); color: var(--leise); }
.fakten dd { margin: 0; }
.etikett { display: inline-flex; align-items: center; gap: 6px; font: .6rem/1 var(--silk); padding: 5px 8px; border: 2px solid var(--linie); background: var(--flaeche); }
.etikett-gut { background: var(--gruen); color: #fff; }

/* ---------- Listen ---------- */
.liste { list-style: none; padding: 0; margin: 0; border: var(--rand); background: var(--flaeche); box-shadow: var(--schatten-gross); }
.liste > li { padding: 14px 16px; border-top: 3px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.liste > li:first-child { border-top: 0; }
.liste .haupt { font-weight: 700; }
.liste .cover { width: 48px; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--linie); }
.liste .cover-leer .etikett-buchstabe { font-size: 1.3rem; text-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.liste .cover-leer .etikett-band, .liste .cover-leer .etikett-rillen { display: none; }
.release-zeile { display: flex; gap: 12px; align-items: flex-start; }
.region { display: inline-block; font: .58rem/1 var(--silk); padding: 5px 6px; color: #fff; background: var(--blau); border: 2px solid var(--linie); flex: none; margin-top: 2px; }
.region-NTSC-U { background: var(--rot); }
.region-NTSC-J { background: #6b3fd1; }
.region-andere { background: #2b2546; }

.review { padding: 16px 0; border-top: 3px dashed var(--leise); }
.review-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.review-punkte { font: .85rem/1 var(--silk); color: #fff; background: var(--rot); padding: 6px 8px; border: 2px solid var(--linie); }

.punktwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.punktwahl label { margin: 0; }
.punktwahl input { position: absolute; opacity: 0; pointer-events: none; }
.punktwahl span { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: var(--rand); font: .85rem/1 var(--silk); background: var(--flaeche); cursor: pointer; box-shadow: 3px 3px 0 var(--schattenfarbe); }
.punktwahl input:checked + span { background: var(--rot); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--schattenfarbe); }
.punktwahl input:focus-visible + span { outline: 3px solid var(--gelb); outline-offset: 2px; }

.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 600px) { .fotos { grid-template-columns: repeat(5, 1fr); } }
.foto { position: relative; }
.foto img { aspect-ratio: 1; width: 100%; object-fit: cover; border: var(--rand); }
.foto form { position: absolute; right: 6px; top: 6px; }
.foto button { min-height: 30px; padding: 0 9px; font-size: .7rem; background: #000; color: #fff; box-shadow: none; border-width: 2px; }
.vorschau { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vorschau img { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--linie); }

/* Spielstand-Anzeige */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 22px; }
.zahl { color: #fff; border: 3px solid #000; padding: 12px; box-shadow: var(--schatten);
  background: var(--lila) repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.zahl b { display: block; font: 1.4rem/1.1 var(--silk); color: var(--gelb); text-shadow: 2px 2px 0 var(--rot); white-space: nowrap; }
.zahl span { font: .55rem/1.4 var(--silk); color: #cfc7f0; letter-spacing: .05em; text-transform: uppercase; }

.leer { text-align: center; padding: 44px 16px; }
.leer-titel { font: 1.6rem/1.2 var(--silk); color: var(--rot); text-shadow: 3px 3px 0 var(--gelb); margin-bottom: 12px; }
.blinken { animation: blinken 1.1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.blaettern { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
table.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border: var(--rand); box-shadow: var(--schatten-gross); }
.tabelle th { font: .62rem/1.3 var(--silk); text-align: left; padding: 10px; background: var(--lila); color: #fff; }
.tabelle td { text-align: left; padding: 10px; border-top: 2px solid var(--linie); }
.tabelle-huelle { overflow-x: auto; padding: 0 6px 6px 0; }
pre.code { background: #0e0a22; color: #7dffa8; border: var(--rand); padding: 14px; overflow-x: auto; font: .82rem/1.5 ui-monospace, Menlo, Consolas, monospace; }

/* Start-Bildschirm für Login/Registrierung */
.start { text-align: center; margin: 8px 0 24px; }
.start-titel { font: 1.6rem/1.2 var(--silk); text-shadow: 3px 3px 0 var(--gelb); }
.start-zeile { font: .75rem/1 var(--silk); color: var(--rot); margin-top: 14px; }

/* ---------- Barcode-Scanner ---------- */
html.scanner-offen { overflow: hidden; }
.scanner {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  background: #07051a; color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.scanner-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.scanner-titel { font: 1rem/1 var(--silk); color: var(--gelb); text-shadow: 2px 2px 0 var(--rot); }
.scanner-zu, .scanner button { background: #000; color: #fff; border-color: #fff; box-shadow: 3px 3px 0 var(--rot); }
.scanner-bild { position: relative; flex: 1; min-height: 0; border: 3px solid #fff; box-shadow: 6px 6px 0 var(--rot); overflow: hidden; background: #000; }
.scanner-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner-rahmen { position: absolute; left: 5%; right: 5%; top: 35%; height: 30%; border: 3px solid var(--gelb); box-shadow: 0 0 0 9999px rgba(7,5,26,.55); }
.scanner-laser { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--rot); box-shadow: 0 0 10px 2px var(--rot); animation: laser 1.6s ease-in-out infinite alternate; }
@keyframes laser { from { top: 8%; } to { top: 92%; } }
.scanner-treffer .scanner-rahmen { border-color: var(--gruen); }
.scanner-treffer .scanner-laser { background: var(--gruen); box-shadow: 0 0 14px 4px var(--gruen); animation: none; }
.scanner-hinweis { text-align: center; margin: 16px 0 6px; font: .72rem/1.5 var(--silk); color: #e7e1ff; }
.scanner-treffer .scanner-hinweis { font-size: 1.1rem; color: var(--gruen); }
.scanner-knoepfe { display: flex; justify-content: center; min-height: 44px; }
.scanner .scanner-licht.an { background: var(--gelb); color: #000; }

@media (prefers-reduced-motion: reduce) {
  .blinken, .scanner-laser { animation: none; }
  .btn, button, .kachel { transition: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }