/* ISSON · Spiele
   Gemeinsamer Rahmen aller Spiele im Stil „Lieferschein“:
   schwarzer Briefkopf, weisses Belegpapier, schwarze Linien, Cyan nur als Leuchtstift.
   Jedes Spiel lädt diese Datei vor seinem eigenen Stylesheet. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Markenfarben (wie quelle/assets/css/site.css) */
  --cyan: #00CBFF;
  --cyan-hell: #00FFFF;
  --tinte: #000000;
  --papier: #FFFFFF;
  --text-leise: #4A4A4A;
  --text-hell-leise: #B8C2C8;
  --linie: #D4D8DB;
  --linie-dunkel: #2B2B2B;
  --fehler: #B3261E;

  --schrift-titel: "Space Grotesk", "Inter", system-ui, sans-serif;
  --schrift-text: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Alte Spiel-Variablen, auf ISSON abgebildet. Jedes Spiel darf sie in seinem
     eigenen :root nicht mehr überschreiben. */
  --bg: var(--papier);
  --surface: var(--papier);
  --surface-2: #F3F5F6;
  --line: var(--linie);
  --text: var(--tinte);
  --muted: var(--text-leise);
  --accent: var(--tinte);          /* Flächen und Knöpfe: Tinte, nie Cyan */
  --danger: var(--fehler);
  --radius: 0;
  --font: var(--schrift-text);
  --mono: var(--schrift-text);     /* Zahlen in Tabellenziffern statt Monospace */

  /* Spielbildschirm der Arcade-Spiele: schwarz, Figuren weiss und cyan */
  --bildschirm: #000000;
  --bildschirm-linie: #1F2326;
  --bildschirm-text: #FFFFFF;
  --bildschirm-leise: #B8C2C8;
}

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--tinte) var(--papier); accent-color: var(--tinte); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-feature-settings: "cv11" 1, "tnum" 1;
}
::selection { background: var(--cyan); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cyan); }

/* ---------- Kopf: schwarzer Briefkopf mit farbigem Logo ---------- */

.spielkopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--tinte); color: var(--papier);
  border-bottom: 1px solid var(--linie-dunkel);
}
.spielkopf__innen {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px);
  height: 64px;
}
.spielkopf__logo { display: block; flex: none; }
.spielkopf__logo img { display: block; width: 112px; height: auto; }
.spielkopf__zurueck {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 1rem;
  font: 600 0.95rem/1 var(--schrift-text); text-decoration: none;
  color: var(--tinte); background: var(--papier); border: 1px solid var(--papier);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.spielkopf__zurueck svg { width: 18px; height: 18px; }
.spielkopf__zurueck:hover { background: transparent; color: var(--papier); }
.spielkopf :focus-visible { outline-color: var(--papier); }

/* ---------- Gemeinsame Bausteine, die die Spiele nutzen dürfen ---------- */

.spiel-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.6rem 1.1rem;
  font: 600 0.95rem/1.2 var(--schrift-text);
  color: var(--papier); background: var(--tinte);
  border: 2px solid var(--tinte); border-radius: 0; cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.spiel-knopf:hover { background: var(--papier); color: var(--tinte); }

.spiel-hinweis { font-size: 0.85rem; color: var(--text-leise); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}