/* Knobelbande Sudoku — Notizbuch-Look. Tokens aus 05-gemeinsam/design/knobelbande.css,
   Bedienung und Klassen: 03-spiele/sudoku/CLAUDE.md
   Ohne JavaScript und im Druck steht statt des Spiels die Tabelle .sudoku-blatt (knobelbande.css). */

.sudoku {
  container: sudoku / inline-size;
  max-width: 30rem;
  margin: var(--abstand-5) auto;
}
.sudoku--6 { max-width: 27rem; }
.sudoku--4 { max-width: 23rem; }

/* Fläche: das Gitter liegt auf Karopapier, mit Klebeband angeheftet */
.sudoku__flaeche {
  position: relative;
  padding: var(--abstand-3);
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-flach);
}

/* Gitter: dünne Karolinien, dicke Kastenlinien in Tinte */
.sudoku__gitter {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  border: 3px solid var(--tinte);
  border-radius: 3px 5px 4px 6px;
  background: var(--papier-weiss);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  font-variant-numeric: tabular-nums;
}
.sudoku__reihe { display: contents; }

/* 9×9 am Handy: 44 px je Feld gehen bei 360 px nicht (9 × 44 = 396). Damit die Felder so groß wie
   möglich werden, nimmt das Gitter die Innenabstände der Rätselkarte mit und die Karopapier-Fläche
   schrumpft auf einen schmalen Rand: bei 360 px rund 35 px je Feld, bei 390 px rund 38 px
   (Ausnahme dokumentiert in 03-spiele/sudoku/CLAUDE.md; WCAG 2.5.8 verlangt mindestens 24 px). */
@media (max-width: 34rem) {
  .sudoku--9 { margin-inline: calc(var(--abstand-4) * -1 + var(--abstand-1)); }
  /* oben Platz für das Klebeband, sonst deckt es die erste Zeile ab */
  .sudoku--9 .sudoku__flaeche { padding: var(--abstand-4) var(--abstand-1) var(--abstand-1); }
}

.sudoku__feld {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--papier-weiss);
  color: var(--tinte);
  font-family: var(--schrift-grund);
  font-weight: 800;
  font-size: calc(100cqi / var(--n) * .56);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease;
}
.sudoku__reihe > .sudoku__feld:last-child { border-right: 0; }
.sudoku__reihe:last-child > .sudoku__feld { border-bottom: 0; }
.sudoku__feld.ist-kastenrand-rechts { border-right: 3px solid var(--tinte); }
.sudoku__feld.ist-kastenrand-unten { border-bottom: 3px solid var(--tinte); }

/* Vorgaben in Tinte, eigene Zahlen mit Bleistift von Hand */
.sudoku__feld.ist-vorgabe { cursor: default; }
.sudoku__feld.ist-eigen {
  color: var(--bleistift);
  font-family: var(--schrift-hand);
  font-weight: 400;
  font-size: calc(100cqi / var(--n) * .7);
}
.sudoku__zahl { grid-area: 1 / 1; }

/* Bleistift-Notizen: kleine Zahlen an fester Stelle im Feld */
.sudoku__notizen {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(var(--kasten-spalten), 1fr);
  place-items: center;
  padding: 6%;
  color: var(--bleistift);
  font-family: var(--schrift-hand);
  font-weight: 400;
  font-size: calc(100cqi / var(--n) * .31);
  line-height: 1;
  pointer-events: none;
}
.sudoku--6 .sudoku__notizen { font-size: calc(100cqi / var(--n) * .3); padding: 8%; }

/* Hervorheben: Zeile, Spalte, Kasten zart; gleiche Zahlen etwas mehr; gewähltes Feld kräftig */
.sudoku__feld.ist-bereich { background: color-mix(in srgb, var(--farbe-sudoku) 20%, var(--papier-weiss)); }
.sudoku__feld.ist-gleich { background: color-mix(in srgb, var(--farbe-sudoku) 50%, var(--papier-weiss)); }
.sudoku__feld.ist-gewaehlt {
  background: var(--farbe-sudoku);
  box-shadow: inset 0 0 0 3px var(--farbe-sudoku-dunkel);
}
.sudoku__feld:focus { outline: none; }
.sudoku__feld:focus-visible {
  outline: 3px solid var(--blaustift);
  outline-offset: -5px;
  border-radius: 2px;
}

/* Doppelt in Zeile, Spalte oder Kasten: rot, eigene Zahl wellig unterstrichen */
.sudoku__feld.ist-konflikt { color: var(--fehler); background: var(--fehler-hell); }
.sudoku__feld.ist-konflikt.ist-gewaehlt { box-shadow: inset 0 0 0 3px var(--fehler); }
.sudoku__feld.ist-konflikt.ist-eigen .sudoku__zahl {
  text-decoration: underline wavy var(--fehler);
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
}

/* „Prüfen“: falsche Zahl mit Rotstift eingekreist */
.sudoku__feld.ist-falsch::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 2.5px solid var(--rotstift);
  border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* Gelöst: Stempel über dem Gitter */
.sudoku__stempelplatz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden; /* die Aufdrück-Bewegung startet größer — nicht über den Rand hinaus */
  pointer-events: none;
}
.sudoku__stempel {
  font-size: clamp(2rem, 13cqi, 3.75rem);
  background: color-mix(in srgb, var(--papier-weiss) 85%, transparent);
  --stempel-drehung: -12deg;
}
.sudoku--geloest .sudoku__feld { cursor: default; }
.sudoku--geloest .sudoku__werkzeug,
.sudoku--geloest .sudoku__tasten,
.sudoku--geloest .sudoku__pruefen { display: none; }
.sudoku--geloest .sudoku__gitter { border-color: var(--erfolg); }

/* Werkzeuge: Rückgängig, Notizen, Löschen */
.sudoku__werkzeug {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--abstand-2);
  margin-top: var(--abstand-4);
}
.sudoku--4 .sudoku__werkzeug,
.sudoku--bilder .sudoku__werkzeug { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ohne Notizknopf */
.sudoku__werkzeugknopf {
  flex-direction: column;
  gap: 2px;
  min-height: 3.75rem;
  padding: var(--abstand-1) var(--abstand-1);
  font-size: var(--groesse-klein);
  line-height: 1.1;
}
.sudoku__werkzeugknopf .icon { width: 1.5rem; height: 1.5rem; }

/* Zahlenfeld: 9 Zahlen am Handy in zwei Reihen, sonst eine Reihe */
.sudoku__tasten {
  --tasten: var(--n);
  display: grid;
  grid-template-columns: repeat(var(--tasten), minmax(0, 1fr));
  gap: var(--abstand-2);
  margin-top: var(--abstand-3);
}
.sudoku--9 .sudoku__tasten { --tasten: 5; }
@container sudoku (min-width: 29rem) {
  .sudoku--9 .sudoku__tasten { --tasten: 9; }
}
.sudoku__taste {
  min-height: 3.25rem;
  padding: 0;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.sudoku__taste.ist-fertig {
  --knopf-grund: var(--papier-alt);
  --knopf-text: var(--bleistift);
  --knopf-rand: var(--bleistift-hell);
  box-shadow: none;
}
.sudoku__taste.ist-fertig .sudoku__tastenzahl {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Notizmodus: Zahlenfeld schreibt klein mit Bleistift */
.sudoku.ist-notizmodus .sudoku__taste {
  --knopf-grund: var(--zettel-blau);
  border-style: dashed;
  font-family: var(--schrift-hand);
  font-weight: 400;
  font-size: 1.45rem;
}
.sudoku.ist-notizmodus .sudoku__taste.ist-fertig { --knopf-grund: var(--papier-alt); }
.sudoku.ist-notizmodus .sudoku__feld.ist-gewaehlt { box-shadow: inset 0 0 0 3px var(--farbe-sudoku-dunkel), inset 0 0 0 5px var(--papier-weiss); }

.sudoku__meldung {
  min-height: 1.5em;
  margin: var(--abstand-3) 0 0;
  text-align: center;
  font-weight: 700;
}
.sudoku__meldung--gut { color: var(--erfolg); }
.sudoku__meldung--fehler { color: var(--fehler); }

.sudoku__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
}
.sudoku__frage { margin-top: var(--abstand-4); }

/* Bilder-Sudoku ------------------------------------------------------------------------------
   Statt Ziffern Sprite-Symbole (Namen im YAML-Feld bilder). Jedes Bild hat eine eigene Farbe,
   damit Kleine es auch daran erkennen — nie nur daran: die Formen unterscheiden sich auch
   schwarz-weiß (Bildersätze in 09-werkzeuge/sudoku-erzeugen.py). Alle Farben mit mindestens 3:1
   Kontrast auf Papierweiß und auf dem gewählten Feld (--farbe-sudoku). */
.sudoku, .sudoku-bildleiste, .sudoku-blatt {
  --bild-lupe: #1f5bb8;          /* blau */
  --bild-fussspur: #7a4a1e;      /* braun */
  --bild-schluessel: #6a3fa0;    /* violett */
  --bild-gluehbirne: #b84f00;    /* orange */
  --bild-haus: #b8232b;          /* rot */
  --bild-stern-voll: #8f5f00;    /* gold */
  --bild-auge: #1d6e40;          /* grün */
  --bild-lachen: #b0306e;        /* pink */
  --bild-bueroklammer: #4a5568;  /* grau */
  --bild-wirbel: #8b2a7d;        /* beere */
  --bild-tannenbaum: #1d6e40;    /* grün (U7b, Satz Weihnachten) */
  --bild-schneeflocke: #1f5bb8;  /* blau */
  --bild-geschenk: #b8232b;      /* rot */
}
.sudoku-bild { color: var(--tinte); }
.sudoku-bild--lupe { color: var(--bild-lupe); }
.sudoku-bild--fussspur { color: var(--bild-fussspur); }
.sudoku-bild--schluessel { color: var(--bild-schluessel); }
.sudoku-bild--gluehbirne { color: var(--bild-gluehbirne); }
.sudoku-bild--haus { color: var(--bild-haus); }
.sudoku-bild--stern-voll { color: var(--bild-stern-voll); }
.sudoku-bild--auge { color: var(--bild-auge); }
.sudoku-bild--lachen { color: var(--bild-lachen); }
.sudoku-bild--bueroklammer { color: var(--bild-bueroklammer); }
.sudoku-bild--wirbel { color: var(--bild-wirbel); }
.sudoku-bild--tannenbaum { color: var(--bild-tannenbaum); }
.sudoku-bild--schneeflocke { color: var(--bild-schneeflocke); }
.sudoku-bild--geschenk { color: var(--bild-geschenk); }

/* Im Gitter: Bild statt Zahl, gleich groß bei Vorgabe und eigener Eingabe */
.sudoku--bilder .sudoku__zahl { display: grid; place-items: center; }
.sudoku--bilder .sudoku__feld .sudoku-bild {
  width: calc(100cqi / var(--n) * .62);
  height: calc(100cqi / var(--n) * .62);
  vertical-align: 0;
}
/* Vorgaben auf getöntem Feld (liegt über jeder Hervorhebung, bleibt also immer erkennbar),
   eigene Bilder auf weißem Papier */
.sudoku--bilder .sudoku__feld.ist-vorgabe {
  background-image: linear-gradient(color-mix(in srgb, var(--tinte) 11%, transparent), color-mix(in srgb, var(--tinte) 11%, transparent));
}
/* Doppelt: eigenes Bild rot gestrichelt umrandet (statt Wellenlinie unter der Zahl) */
.sudoku--bilder .sudoku__feld.ist-konflikt.ist-eigen .sudoku__zahl {
  outline: 2px dashed var(--fehler);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Tastenfeld mit Bildern; ein Bild, das schon n-mal steht, grau und durchgestrichen */
.sudoku--bilder .sudoku__taste { position: relative; }
.sudoku--bilder .sudoku__taste .sudoku-bild { width: 2rem; height: 2rem; vertical-align: 0; }
.sudoku--bilder .sudoku__taste.ist-fertig .sudoku-bild { color: var(--bleistift-hell); }
.sudoku--bilder .sudoku__taste.ist-fertig::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  border-top: 2px solid var(--bleistift);
  transform: rotate(-35deg);
}

/* Bildleiste über dem Spiel: welche Bilder vorkommen, mit Wort */
.sudoku-bildleiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-2) var(--abstand-4);
  margin: var(--abstand-3) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}
.sudoku-bildleiste li { display: inline-flex; align-items: center; gap: var(--abstand-1); }
.sudoku-bildleiste .sudoku-bild { width: 1.75rem; height: 1.75rem; vertical-align: 0; }

/* Tabelle ohne JavaScript und im Druck: Symbol statt Ziffer */
.sudoku-blatt--bilder .sudoku-bild { display: block; width: 72%; height: 72%; margin: auto; }

/* Ohne JavaScript steht die Tabelle da; mit Spiel nur noch im Druck (knobelbande.css) */
.sudoku--aktiv .sudoku-blatt { display: none; }

@media print {
  /* Ein leeres Blatt zum Ausfüllen trägt keinen Gelöst-Stempel (der kommt von 03-spiele/notizbuch/) */
  .raetsel__geloest { display: none !important; }
  .sudoku__flaeche, .sudoku__werkzeug, .sudoku__tasten, .sudoku__meldung,
  .sudoku__aktionen, .sudoku__frage { display: none !important; }
  /* Bilder-Sudoku auf Papier: Symbole schwarz, die Formen tragen allein */
  .sudoku-blatt--bilder .sudoku-bild, .sudoku-bildleiste .sudoku-bild { color: #000; }
  .sudoku-bildleiste { margin: 2mm 0 0; font-size: 11pt; }
  .sudoku-bildleiste .sudoku-bild { width: 7mm; height: 7mm; }
}