/* theme-dark.css – gemeinsamer Dark Mode für alle Seiten (wird nach den seiteneigenen Stilen
   geladen und gewinnt dadurch bei gleicher Spezifität).

   Grundidee:
   - Helle Flächen (grüne/gelbe/blaue Knöpfe, Sticker, weiße Karten) bekommen wie im hellen
     Modus SCHWARZE Schrift und schwarze Rahmen: --c-ink ist im Dark Mode fast schwarz
     (das setzen die Seiten selbst in ihrem html[data-theme="dark"]-Block).
   - Akzentfarbe ist Neon-Pink wie auf der normalen Seite (#ff2e93), aber nur als Akzent:
     Rahmen und leichtes Leuchten dunkler Bausteine, nicht als Flächenfarbe.
   - Schrift auf dunklen Flächen: neutrales Weiß ohne Blaustich. */

html[data-theme="dark"] {
  --c-accent: #ff2e93;
  --c-accent-line: rgba(255, 46, 147, 0.55);
  --c-accent-glow: rgba(255, 46, 147, 0.18);
  --c-card-text: #f4eef6;
}

/* Dunkle Bausteine: pinker Rahmen statt des (jetzt schwarzen) Ink-Rahmens */
html[data-theme="dark"] .jax-card,
html[data-theme="dark"] .jax-input,
html[data-theme="dark"] .jax-select,
html[data-theme="dark"] .jax-textarea,
html[data-theme="dark"] .jax-chip,
html[data-theme="dark"] .hud-chip,
html[data-theme="dark"] .timerbar-track,
html[data-theme="dark"] .timer-track,
html[data-theme="dark"] .wait-timer-track,
html[data-theme="dark"] .tab-btn,
html[data-theme="dark"] .game-tab,
html[data-theme="dark"] .lvl-tab,
html[data-theme="dark"] .seg-row,
html[data-theme="dark"] .shot-frame,
html[data-theme="dark"] .reveal-img-box,
html[data-theme="dark"] .cover-art-img,
html[data-theme="dark"] .event-row-image img,
html[data-theme="dark"] #questionImage,
html[data-theme="dark"] #letterImgBox,
html[data-theme="dark"] #drawCanvasWrap,
html[data-theme="dark"] #paint-flyby-img,
html[data-theme="dark"] #stage,
html[data-theme="dark"] #arena,
html[data-theme="dark"] #board,
html[data-theme="dark"] #snake-canvas,
html[data-theme="dark"] #invader-canvas,
html[data-theme="dark"] #pixel-canvas,
html[data-theme="dark"] #lem-editor-canvas,
html[data-theme="dark"] #nameOverlay input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: var(--c-accent-line);
}

/* Leuchten: dezent pink statt cyan */
html[data-theme="dark"] .jax-card {
  box-shadow: 0 0 0 1px var(--c-accent-glow), 0 0 22px var(--c-accent-glow);
}
html[data-theme="dark"] .jax-btn {
  box-shadow: 0 0 12px var(--c-accent-glow);
}
html[data-theme="dark"] .jax-btn:hover {
  box-shadow: 0 0 18px rgba(255, 46, 147, 0.3);
}

/* Fokus sichtbar in der Akzentfarbe */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* Stellen, die --c-ink als FLÄCHE und die Kartenfarbe als Schrift nutzen: im Dark Mode wäre
   das schwarz auf fast schwarz -> Akzent-Pink mit schwarzer Schrift */
html[data-theme="dark"] .action-btn.active,
html[data-theme="dark"] .result-rank {
  background: var(--c-accent);
  color: #0b0b12;
}
html[data-theme="dark"] .result-row.result-first .result-rank {
  background: var(--c-yellow);
}

/* Helle Flächen mit weißer Schrift: im Dark Mode schwarze Schrift (Neon-Pink ist sehr hell) */
html[data-theme="dark"] .chat-ticker-label {
  color: #0b0b12;
}

/* Feine Trennlinien in Ink-Farbe wären auf dunklem Grund unsichtbar */
html[data-theme="dark"] .chip-stem {
  background: var(--c-card-text);
}

/* Spielstand-Chips über dem Spielfeld (id-Selektor der Seite ist stärker als .jax-chip) */
html[data-theme="dark"] #hud .jax-chip {
  border-color: var(--c-ink);
}