/*
 * Gemeinsame Grundlage für alle Seiten: Farben, Schrift, Flächen, Bedienelemente.
 * Standard-Optik „Studio-Anzeigetafel“: fast schwarzer Grund, warmes Weiß, Signalgelb als einziger Akzent.
 * Grün und Rot gibt es nur für richtig/falsch. Flächen sind flach und durch Linien getrennt, nicht durch Schatten.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}

:root {
  --bg: #111315;
  --text: #eee8dc;
  --muted: rgba(238, 232, 220, 0.62);
  --faint: rgba(238, 232, 220, 0.36);
  --glass: #1a1d21;          /* Fläche (Name aus der ersten Optik, wird überall verwendet) */
  --glass-strong: #22262b;   /* erhöhte Fläche */
  --edge: #30353b;           /* Haarlinie */
  --fill: rgba(238, 232, 220, 0.06);
  --accent: #ffcb05;
  --on-accent: #111315;      /* Schrift auf Gelb */
  --accent-text: #ffcb05;    /* Gelb als Schriftfarbe; im hellen Modus dunkler */
  --blue: #ffcb05;
  --pink: #ffcb05;
  --live: #ef4d3c;
  --ok: #4cc46a;
  --twitch: #9146ff;
  --radius: 4px;
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1);
  --wide: 125%;              /* Breite der Anzeigetafel-Schrift */
  font: 100%/1.5 "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* Die Gamemaster-Seite folgt dem System; die Streamer-Seite bleibt dunkel, weil sie im Stream läuft. */
@media (prefers-color-scheme: light) {
  :root.adaptive {
    --bg: #f2efe7;
    --text: #17191c;
    --muted: rgba(23, 25, 28, 0.62);
    --faint: rgba(23, 25, 28, 0.36);
    --glass: #fbf9f4;
    --glass-strong: #ffffff;
    --edge: #d8d2c4;
    --fill: rgba(23, 25, 28, 0.05);
    --accent-text: #8a6a00;
    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2 { font-stretch: var(--wide); font-weight: 800; letter-spacing: -0.01em; }

/* Farbflächen gibt es in dieser Optik nicht mehr */
.backdrop { display: none; }

.glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

/* Kleine Beschriftung in Großbuchstaben, ein gelbes Quadrat markiert „live“ */
.badge {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.badge.live { color: var(--text); }
.badge.ok { color: var(--ok); }
.badge i { width: 0.6em; height: 0.6em; background: var(--accent); }
.badge.ok i { background: var(--ok); }

/* Knöpfe reagieren beim Drücken, nicht erst beim Loslassen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font: inherit; font-weight: 650; font-size: 0.9375rem;
  color: var(--text);
  background: var(--glass-strong);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 60ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: #ffd633; }
.btn.twitch { background: var(--twitch); border-color: var(--twitch); color: #fff; }
.btn.danger { color: var(--live); }
.btn.small { min-height: 2.1rem; padding: 0 0.8rem; font-size: 0.8125rem; }
.btn:focus-visible, .field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font: inherit; font-size: 1rem;
  color: var(--text);
  background: var(--fill);
}
.field::placeholder { color: var(--faint); }
.field:focus-visible { border-color: var(--accent); }
/* Aufklappliste: eigene Farben, sonst steht unter Windows helle Schrift auf weißem Grund */
select.field option { background-color: var(--bg); color: var(--text); }

.avatar {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 3px;
  object-fit: cover;
  background: var(--glass-strong);
  display: grid; place-items: center;
  font-weight: 800; font-stretch: var(--wide); color: var(--accent-text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media (prefers-contrast: more) {
  .glass { border-color: var(--text); }
}