/* ===============================================================================================
   Arcade - Sudoku

   Nur das, was arcade/prismPop.css nicht schon mitbringt (siehe dessen Kopfkommentar): die
   Bühnen-Farbvariablen dieser vierten Bühne, die Schwierigkeits-Kacheln und das Zahlenfeld.
   Alles Spielunabhängige (Rahmen, HUD, Canvas-Hülle, Dialoge, Rangliste, Fußleiste, Tabellen/
   Kacheln der Seitenteile) kommt unveraendert aus prismPop.css, VOR dieser Datei eingebunden.

   HIER STEHEN ALLE FARBEN DES SPIELFELDS, auch die des Canvas - sudoku.js liest sie ueber
   getComputedStyle aus den Variablen unten, statt sie selbst als Konstanten zu fuehren.

   Das war frueher anders: die Werte standen doppelt (einmal hier, einmal in sudoku.js), und der
   Kommentar an dieser Stelle ermahnte, beide von Hand gleichzuhalten - dieselbe
   Doppelwahrheit-Falle wie bei den drei aelteren Spielen. Mit der Hell/Dunkel-Umschaltung
   (21.09.2026) waere daraus eine doppelte Doppelwahrheit geworden: zwei Paletten mal zwei Orte.
   Deshalb jetzt EINE Wahrheit, und zwar hier.

   Nebenwirkung, die den Ausschlag gab: Hell/Dunkel ist damit reine CSS-Sache. sudoku.js muss von
   Themen gar nichts wissen, es liest einfach die gerade gueltigen Werte.

   SUDOKU IST DAS EINZIGE ARCADE-SPIEL MIT HELLER SPIELFLAECHE. Prism Pop, Tetris und 2048 bleiben
   bewusst immer dunkel (siehe arcade/CLAUDE.md) - dort ist das Spielfeld eine leuchtende Flaeche
   vor dunklem Grund, bei Sudoku dagegen ein Blatt Papier mit Zahlen darauf.
   =============================================================================================== */

/* ------------------------------------------------------------------------------------------- */
/* Palette - dunkel (Vorgabe)                                                                    */
/* ------------------------------------------------------------------------------------------- */

.sudoku-buehne {
  --arcade-bg: #10161a;
  --arcade-flaeche: #10161a;

  --sudoku-grund:        #10161a;              /* Canvas-Hintergrund   */
  --sudoku-block:        rgba(255,255,255,0.03); /* jedes zweite 3x3-Feld */
  --sudoku-gleich:       rgba(92,191,152,0.16); /* Zellen mit derselben Ziffer */
  --sudoku-peer:         rgba(255,255,255,0.05); /* Zeile/Spalte/Block der Auswahl */
  --sudoku-wahl:         rgba(92,191,152,0.22); /* die gewaehlte Zelle */
  --sudoku-puls-rgb:     92,191,152;            /* nur die Kanaele - die Deckkraft rechnet das Spiel */
  --sudoku-gitter-fein:  rgba(255,255,255,0.14);
  --sudoku-gitter-grob:  rgba(255,255,255,0.4);
  --sudoku-vorgabe:      #f2f1ee;               /* fest vorgegebene Ziffern */
  --sudoku-eigen:        #5cbf98;               /* selbst eingetragene */
  --sudoku-konflikt:     #e2557a;
  --sudoku-notiz:        rgba(255,255,255,0.45);

  --sudoku-akzent:       #5cbf98;
  --sudoku-akzent-weich: rgba(92,191,152,0.18);
  --sudoku-knopf:        rgba(255,255,255,0.04);
}

/* ------------------------------------------------------------------------------------------- */
/* Palette - hell                                                                                */
/*                                                                                               */
/* Hoehere Spezifitaet als die Regel oben (Attribut am :root davor), gewinnt also unabhaengig von */
/* der Reihenfolge. Das Gruen ist hier deutlich dunkler: #5cbf98 hat auf Weiss zu wenig Kontrast  */
/* fuer Ziffern, die man zehn Minuten lang anschaut.                                              */
/* ------------------------------------------------------------------------------------------- */

:root[data-theme="light"] .sudoku-buehne {
  --arcade-bg: #eef1f8;
  --arcade-flaeche: #ffffff;
  --arcade-linie: rgba(30,36,48,0.12);
  --arcade-text: #1e2430;
  /* #64748b (der Wert aus includes/theme.css) kaeme auf dem hellen Buehnengrund nur auf 4,2:1 -
     knapp unter der Lesbarkeitsschwelle fuer kleinen Text. Nachgerechnet, nicht geschaetzt. */
  --arcade-text-schwach: #5b6878;

  --sudoku-grund:        #ffffff;
  --sudoku-block:        rgba(30,36,48,0.04);
  --sudoku-gleich:       rgba(31,122,89,0.14);
  --sudoku-peer:         rgba(30,36,48,0.06);
  --sudoku-wahl:         rgba(31,122,89,0.20);
  --sudoku-puls-rgb:     31,122,89;
  --sudoku-gitter-fein:  rgba(30,36,48,0.18);
  --sudoku-gitter-grob:  rgba(30,36,48,0.55);
  --sudoku-vorgabe:      #1e2430;
  --sudoku-eigen:        #1f7a59;
  --sudoku-konflikt:     #c0392b;
  --sudoku-notiz:        rgba(30,36,48,0.50);

  --sudoku-akzent:       #1f7a59;
  --sudoku-akzent-weich: rgba(31,122,89,0.14);
  --sudoku-knopf:        rgba(30,36,48,0.04);

  /* .arcade-buehne setzt Rahmen und Schatten fest auf dunkle Werte - beides hier nachziehen,
     sonst steht ein schwarzer Rand um eine weisse Flaeche. */
  border-color: #d7dee8;
  box-shadow: 0 18px 38px -22px rgba(30,42,61,0.28);
}

/* ------------------------------------------------------------------------------------------- */
/* Hell: die geteilten Teile aus prismPop.css nachziehen                                         */
/*                                                                                               */
/* prismPop.css gehoert allen vier Spielen und bleibt fuer die anderen drei unangetastet dunkel.  */
/* Was dort mit festen dunklen Werten steht (und nicht ueber die --arcade-*-Variablen laeuft),    */
/* wird hier ausschliesslich fuer die Sudoku-Buehne im Hellmodus ueberschrieben.                  */
/*                                                                                               */
/* Der Hauptknopf ist dabei die Stelle, die es wirklich braucht: prismPop.css setzt seinen        */
/* HINTERGRUND auf var(--arcade-text) und seine Schrift auf ein festes Fast-Schwarz. Mit heller   */
/* Palette waere er dunkel auf dunkel, also unleserlich. Der dunkle Knopf bleibt - auf weissem    */
/* Grund liest er sich gut -, nur seine Schrift wird hell.                                        */
/* ------------------------------------------------------------------------------------------- */

:root[data-theme="light"] .sudoku-buehne .arcade-wert,
:root[data-theme="light"] .sudoku-buehne .arcade-symbolknopf {
  background: var(--sudoku-knopf);
}

:root[data-theme="light"] .sudoku-buehne .arcade-overlay {
  background: rgba(244, 246, 250, 0.86);
}

:root[data-theme="light"] .sudoku-buehne .arcade-karte {
  background: #ffffff;
  border-color: #d7dee8;
  box-shadow: 0 24px 60px rgba(30, 42, 61, 0.18);
}

:root[data-theme="light"] .sudoku-buehne .arcade-knopf {
  color: #f5f7fb;
}

:root[data-theme="light"] .sudoku-buehne .arcade-knopf--zweit {
  color: var(--arcade-text);
  border-color: #d7dee8;
}

/* ------------------------------------------------------------------------------------------- */
/* Schwierigkeitsauswahl auf dem Titelbildschirm                                                 */
/* ------------------------------------------------------------------------------------------- */

.sudoku-schwierigkeit-label {
  margin: 1rem 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arcade-text-schwach);
}

.sudoku-schwierigkeiten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.sudoku-schwierigkeit {
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--arcade-linie);
  border-radius: 10px;
  background: var(--sudoku-knopf);
  color: var(--arcade-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sudoku-schwierigkeit.ist-aktiv {
  border-color: var(--sudoku-akzent);
  background: var(--sudoku-akzent-weich);
  color: var(--sudoku-akzent);
}

/* ------------------------------------------------------------------------------------------- */
/* Zahlenfeld und Werkzeugknoepfe - echte <button>, keine Canvas-Flaechen (gleiche Begruendung   */
/* wie arcade/tetris.css: verlaessliche Trefferflaechen, fokussierbar, screenreader-tauglich).    */
/* ------------------------------------------------------------------------------------------- */

.sudoku-zahlenfeld {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.3rem;
  padding: 0.5rem 0.7rem 0;
}

.sudoku-ziffernknopf {
  aspect-ratio: 1;
  border: 1px solid var(--arcade-linie);
  border-radius: 8px;
  background: var(--sudoku-knopf);
  color: var(--arcade-text);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}

.sudoku-werkzeuge {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem 0.5rem;
}

.sudoku-werkzeugknopf {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--arcade-linie);
  border-radius: 10px;
  background: var(--sudoku-knopf);
  color: var(--arcade-text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}

.sudoku-werkzeugknopf.ist-aktiv {
  border-color: var(--sudoku-akzent);
  background: var(--sudoku-akzent-weich);
  color: var(--sudoku-akzent);
}

.sudoku-ziffernknopf:focus-visible,
.sudoku-werkzeugknopf:focus-visible,
.sudoku-schwierigkeit:focus-visible {
  outline: 2px solid #7aa7ff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------- */
/* "Als PDF speichern" (07.10.2026): Dialog fuer die Ordnerwahl. Liegt ausserhalb der Buehne und  */
/* folgt deshalb dem Seitenthema (includes/theme.css), nicht den Buehnenfarben.                  */
/* ------------------------------------------------------------------------------------------- */

.sudoku-pdf {
  width: min(26rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--border, #8a8f98);
  border-radius: 14px;
  background: var(--card-bg, #ffffff);
  color: var(--text-main, #16181d);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.sudoku-pdf::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.sudoku-pdf__form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.2rem 1.2rem;
}

.sudoku-pdf__titel {
  margin: 0;
  font-size: 1.2rem;
}

.sudoku-pdf__text {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.sudoku-pdf__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.sudoku-pdf__feld {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border, #8a8f98);
  border-radius: 9px;
  background: var(--body-bg, #ffffff);
  color: inherit;
  font: inherit;
  font-size: 1rem; /* unter 16px zoomt iOS beim Antippen in die Seite */
}

.sudoku-pdf__status {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.sudoku-pdf__status.ist-fehler {
  color: #c62828;
}

.sudoku-pdf__status.ist-ok {
  color: #1b7a3d;
}

.sudoku-pdf__knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sudoku-pdf__knopf {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border, #8a8f98);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.sudoku-pdf__knopf--haupt {
  border-color: #1b6fd1;
  background: #1b6fd1;
  color: #ffffff;
  font-weight: 600;
}

.sudoku-pdf__knopf:disabled {
  opacity: 0.55;
  cursor: default;
}