:root {
  color-scheme: light;
  --bg: #fff6ea;
  --bg-2: #ffffff;
  --ink: #241c3d;
  --muted: #6b6285;
  --purple: #7c5cff;
  --pink: #ff5fa2;
  --yellow: #ffc247;
  --teal: #2fd6c0;
  --card-border: rgba(36, 28, 61, 0.08);
  --max: 1080px;
  font-family: "Baloo 2", Poppins, ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 280px;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 90% 18%, rgba(255, 194, 71, 0.16), transparent 26rem),
    radial-gradient(circle at 80% 90%, rgba(47, 214, 192, 0.14), transparent 30rem),
    var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

a { color: inherit; }

.lib-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0;
  background: rgba(255, 246, 234, 0.82);
  backdrop-filter: blur(14px);
}

.lib-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.lib-brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--purple), var(--pink));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.35);
  transform: rotate(-6deg);
}

.lib-topbar nav { display: flex; gap: 20px; }
.lib-topbar nav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}
.lib-topbar nav a:hover, .lib-topbar nav a:focus-visible { color: var(--purple); }

.lib-hero {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 46px 0 20px;
}

.lib-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.12);
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lib-hero h1 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.lib-hero p {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.lib-section {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0 100px;
}

.lib-section h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
}

.lib-section > p.lib-lead { margin: 0 0 32px; color: var(--muted); }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 14px 30px rgba(36, 28, 61, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.game-card:hover, .game-card:focus-visible {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 0 22px 44px rgba(36, 28, 61, 0.14);
}

.game-card-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, var(--purple), var(--pink));
}

.game-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card-emoji {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 3.2rem;
}

/* Links auf der Karte: Art/Kategorie des Spiels ("type" in config.json). */
.game-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Rechts auf der Karte: optionaler Status ("status" in config.json).
   Spiele ohne sinnvollen Status bekommen dieses Element gar nicht erst.
   Die Farbe kommt aus einer .status-*-Klasse, damit sie zentral definiert
   bleibt und nicht pro Spielkarte gesetzt werden muss. */
.game-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(36, 28, 61, 0.18);
}

.status-new { background: var(--teal); color: #06403a; }
.status-beta { background: var(--yellow); color: #6b4500; }
.status-update { background: var(--purple); color: #fff; }

/* Sehr schmale Geräte: Typ- und Status-Badge dürfen sich nicht überlappen. */
@media (max-width: 360px) {
  .game-card-tag,
  .game-card-status {
    padding: 4px 9px;
    font-size: 0.66rem;
  }
}

.game-card-body { padding: 22px; }

.game-card-body h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.game-card-body p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Kleine Fähigkeits-Chips ("features" in config.json), z.B. "Multiplayer".
   Bewusst ruhiger gestaltet als das Status-Badge im Bild: ein Status ist eine
   Meldung und darf auffallen, eine Fähigkeit ist eine Sacheigenschaft und
   soll die Karte nicht dominieren. Deshalb heller Grund mit kräftiger Schrift
   statt Vollfläche.

   Die Farbe kommt aus einem festen kleinen Vorrat an Farbtönen (.tint-*),
   NICHT aus einer Klasse je Fähigkeit. Dadurch braucht eine neue Fähigkeit
   kein neues CSS — sie wählt in config/features.js einen vorhandenen Ton.

   .tint-rose ist dabei reserviert: nur Hinweise ("wofür das Spiel eher nicht
   gedacht ist") tragen Rot, und sie können ihren Ton nicht selbst wählen.
   Deshalb heißt Rot auf der ganzen Seite dasselbe. */
.game-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.game-card-feature {
  /* Vorbelegung = neutral. Eine .tint-*-Klasse überschreibt nur diese drei
     Werte, dadurch bleibt ein Chip auch ohne gültigen Ton lesbar. */
  --feature-bg: #f2f0f7;
  --feature-line: var(--card-border);
  --feature-ink: var(--muted);

  padding: 3px 10px;
  border: 1px solid var(--feature-line);
  border-radius: 999px;
  background: var(--feature-bg);
  color: var(--feature-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.game-card-feature.tint-purple {
  --feature-bg: #efeaff;
  --feature-line: rgba(124, 92, 255, 0.32);
  --feature-ink: #553bc9;
}

/* Reserviert für Hinweise (kind: "caveat" in config/features.js). Eine
   Fähigkeit kann diesen Ton nicht wählen — siehe FEATURE_TINTS. */
.game-card-feature.tint-rose {
  --feature-bg: #ffe8ea;
  --feature-line: rgba(200, 40, 60, 0.32);
  --feature-ink: #a51f36;
}

.game-card-feature.tint-amber {
  --feature-bg: #fff3d9;
  --feature-line: rgba(255, 194, 71, 0.5);
  --feature-ink: #8a5a00;
}

.game-card-feature.tint-teal {
  --feature-bg: #dcf7f2;
  --feature-line: rgba(47, 214, 192, 0.45);
  --feature-ink: #0e6459;
}

.game-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--purple);
}

.game-card:hover .game-card-cta, .game-card:focus-visible .game-card-cta { color: var(--pink); }

.game-card.coming-soon {
  opacity: 0.6;
  pointer-events: none;
}

.game-card.coming-soon .game-card-art { background: linear-gradient(145deg, #d8d2ee, #f0d9e6); }

.lib-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 48px;
  border-top: 1px solid var(--card-border);
}

.lib-footer div { display: grid; }
.lib-footer strong { font-size: 1rem; }
.lib-footer span { color: var(--muted); font-size: 0.82rem; }

.lib-footer nav { display: flex; gap: 20px; }
.lib-footer nav a {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.lib-footer nav a:hover, .lib-footer nav a:focus-visible { color: var(--purple); }

@media (max-width: 640px) {
  .lib-topbar nav { display: none; }
  .lib-footer { flex-direction: column; align-items: flex-start; gap: 18px; }
}

.lib-legal {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 60px 0 100px;
}

.lib-legal-back {
  display: inline-flex;
  margin-bottom: 32px;
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}

.lib-legal h1 { margin: 0 0 32px; font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.02em; }
.lib-legal h2 { margin: 40px 0 10px; font-size: 1.2rem; letter-spacing: -0.01em; }
.lib-legal p, .lib-legal address, .lib-legal li { color: var(--muted); }
.lib-legal address { font-style: normal; }
.lib-legal a { color: var(--purple); }

.mini-hero {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 46px 0 6px;
}
.mini-back {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}
.mini-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.02em; }
.mini-hero p { max-width: 560px; margin: 14px 0 0; color: var(--muted); }

.mini-stage {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.mini-hud {
  display: flex;
  gap: 28px;
  align-items: baseline;
  font-weight: 800;
  font-size: 1.1rem;
}
.mini-hud .label {
  display: block;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mini-board-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: #241c3d;
  box-shadow: 0 14px 30px rgba(36, 28, 61, 0.16);
  touch-action: none;
}
.mini-board-wrap canvas { display: block; width: 100%; height: 100%; }

.mini-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 10px;
  background: rgba(36, 28, 61, 0.9);
  color: #fff;
  text-align: center;
  padding: 20px;
  line-height: 1.5;
}
.mini-overlay.hidden { display: none; }
.mini-overlay h2 { margin: 0; font-size: 1.5rem; }
.mini-overlay p { margin: 0; max-width: 320px; color: rgba(255, 255, 255, 0.72); }
.mini-overlay .mini-overlay-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  margin-top: 6px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--purple), var(--pink));
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  /* Wird auch auf <a> eingesetzt (Login im Header, 404-Seite) — ohne das
     zeichnet der Browser einen Unterstrich quer durch den Button. */
  text-decoration: none;
}
.mini-btn:hover, .mini-btn:focus-visible { filter: brightness(1.08); }

.mini-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.mini-help { max-width: 480px; color: var(--muted); font-size: 0.88rem; text-align: center; }
.mini-help kbd {
  padding: 2px 7px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: #fff;
  font: 700 0.8rem ui-monospace, monospace;
}

.mini-view.hidden { display: none; }

body.in-game .lib-footer { display: none; }

.mini-menu {
  width: min(420px, calc(100% - 40px));
  margin: 0 auto;
  padding: 50px 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.mini-menu h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.6rem); letter-spacing: -0.02em; }

.coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 194, 71, 0.2);
  color: #8a5b00;
  font-weight: 800;
  font-size: 0.85rem;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 17px 22px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(36, 28, 61, 0.06);
  transition: transform 160ms ease, border-color 160ms ease;
}
.menu-btn:hover, .menu-btn:focus-visible { border-color: var(--purple); transform: translateY(-2px); }
.menu-btn.primary { background: linear-gradient(145deg, var(--purple), var(--pink)); color: #fff; border: none; }

.mini-panel {
  width: min(460px, calc(100% - 40px));
  margin: 0 auto;
  padding: 50px 0 90px;
}
.mini-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mini-panel-head h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.2rem); letter-spacing: -0.02em; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: #fff;
}
.settings-row strong { display: block; font-size: 0.95rem; }
.settings-row span { color: var(--muted); font-size: 0.82rem; }

.toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #e4dff5;
  cursor: pointer;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease;
}
.toggle.on { background: var(--purple); }
.toggle.on::after { transform: translateX(20px); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.shop-card {
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.shop-card.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple) inset; }
.shop-swatch { height: 56px; border-radius: 12px; margin-bottom: 10px; }
.shop-card h3 { margin: 0 0 4px; font-size: 0.98rem; }
.shop-card p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.shop-card .mini-btn { width: 100%; margin-top: 12px; padding: 9px; font-size: 0.85rem; }
.shop-card .mini-btn:disabled { opacity: 0.55; cursor: default; filter: none; }

/* --- Ladezustand der Spielkarten ----------------------------------------

   Zwei Wartezeiten, zwei Antworten (siehe assets/js/bild-laden.js):
   das Schimmern auf der Bildfläche, solange ein Bild lädt, und ganze
   Platzhalter-Karten, solange die Karten selbst noch geholt werden.

   Der Platz ist durch aspect-ratio auf .game-card-art ohnehin reserviert,
   es springt also nichts — das Schimmern beantwortet nur die Frage
   „kommt da noch was?", die ein stiller Farbverlauf offen lässt. */

@keyframes kachel-schimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.game-card-art[data-laedt] {
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0) 80%
    ),
    linear-gradient(145deg, var(--purple), var(--pink));
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: kachel-schimmer 1.6s linear infinite;
}

/* Das Bild liegt über der Fläche: sobald es gezeichnet ist, deckt es das
   Schimmern ab. Bis dahin darf es nicht schon halb sichtbar sein. */
.game-card-art[data-laedt] img { opacity: 0; }
.game-card-art img { transition: opacity 220ms ease; }

.game-card-platzhalter {
  /* Nicht anklickbar und für Screenreader unsichtbar (aria-hidden im JS):
     ein Platzhalter ist kein Spiel. */
  pointer-events: none;
}

.platzhalter-zeile {
  display: block;
  height: 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--card-border);
  animation: kachel-schimmer 1.6s linear infinite;
  background-image:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 80%
    );
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
.platzhalter-titel { height: 18px; width: 55%; margin-bottom: 14px; }
.platzhalter-kurz  { width: 70%; }

/* Dauerbewegung ist für manche Menschen unangenehm bis auslösend. Ohne
   Animation bleibt der Zustand trotzdem erkennbar: die Fläche ist gefüllt,
   nur eben still. */
@media (prefers-reduced-motion: reduce) {
  .game-card-art[data-laedt],
  .platzhalter-zeile { animation: none; }
}