/* theme.css — gemeinsames Fineliner-Theme. Warmes Weiss, feine Tinte, cozy.
   Der Sternenhimmel bleibt schwarz (eigene Seiten); dies ist fuer die UI drumherum. */

/* --- Grundlagen fuer Barrierefreiheit und Mobile --- */
/* Sichtbarer Fokusring NUR bei Tastatur-Navigation (nicht bei Maus/Touch). */
:focus-visible {
  outline: 2px solid var(--gold, #e8a04a);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Grauen Antipp-Blitz auf Mobile entfernen (wir geben eigenes Feedback). */
a, button, .btn, [role="button"], input, textarea {
  -webkit-tap-highlight-color: transparent;
}
/* Doppeltipp-Zoom auf Bedienelementen verhindern, ohne Seiten-Zoom zu sperren. */
button, .btn, [role="button"] { touch-action: manipulation; }
/* Ruhebeduerfnis respektieren: Animationen stark reduzieren. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

:root {
  --ink: #1a1a1a;            /* Fineliner-Tinte */
  --ink-soft: #5a5852;       /* weicherer Text */
  --ink-faint: #8a8780;      /* Hinweise, Meta */
  --paper: #faf8f3;          /* warmes Weiss, Karten */
  --paper-2: #f0ebe0;        /* leicht abgesetzt */
  --line: #1a1a1a;           /* Outline */
  --line-soft: #d8d2c4;      /* zarte Trennlinie */
  --gold: #e8a04a;           /* warmer Akzent */
  --gold-ink: #a8531d;       /* Akzent-Text auf hell */
  --violet: #7b6db0;         /* Bot-Spezies */
  --sky: #06060e;            /* Himmel */
  --radius: 10px;
  --radius-card: 14px;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Karten und Flaechen */
.card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
}

/* Buttons im Fineliner-Stil */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; cursor: pointer;
  border-radius: var(--radius); padding: 10px 16px;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink);
  transition: background 0.12s;
}
.btn:hover { background: var(--paper-2); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: #000; }
.btn-accent { border-color: #e0b080; color: var(--gold-ink); }
.btn-accent:hover { background: #fbf3e8; }

/* Eingaben */
.field {
  width: 100%; background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 11px 12px; font: inherit; font-size: 16px;
}
.field:focus { outline: none; border-color: var(--gold); }

label { display: block; font-size: 12px; color: var(--ink-faint); margin-bottom: 5px; }

/* Pills (Tags, Fraktionen) */
.pill {
  font-size: 12px; padding: 4px 10px; border-radius: 20px;
  border: 1.5px solid var(--line); color: var(--ink); background: transparent;
}
.pill.soft { border: 1px solid var(--line-soft); color: var(--ink-faint); }

/* Typografie */
.serif { font-family: Georgia, "Times New Roman", serif; }
h1 { font-size: 20px; font-weight: 500; color: var(--ink); }
h2 { font-size: 15px; font-weight: 500; color: var(--ink); }

/* Wesen-Animationen (gemeinsam) */
@keyframes creature-drift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@media (prefers-reduced-motion: reduce){ .creature, .creature *{animation:none !important} }