/* Sudoku — eigene Styles (Farben nur über Tokens aus basis.css) */
:root { --g: 360px; --dick: 2px; }
html, body { height: 100%; overflow: hidden; }
#spiel { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 8px 10px; min-height: 0; }
#infos { padding: 4px 8px; width: var(--g); justify-content: space-between; gap: 8px; }
#i-modus { color: var(--akzent); }

#brett { width: var(--g); height: var(--g); display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  background: var(--kl-flaeche); border: var(--dick) solid var(--kl-text); border-radius: 8px; overflow: hidden; touch-action: manipulation;
  box-shadow: var(--kl-schatten); flex: none; }
.z { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-right: 1px solid var(--kl-linie); border-bottom: 1px solid var(--kl-linie);
  font-size: calc(var(--g) / 9 * .58); font-weight: 600; color: var(--akzent); line-height: 1; transition: background .12s; }
.z.r-dick { border-right: var(--dick) solid var(--kl-text); }
.z.u-dick { border-bottom: var(--dick) solid var(--kl-text); }
.z.c8 { border-right: 0; } .z.r8 { border-bottom: 0; }
.z.vorgabe { color: var(--kl-text); font-weight: 800; }
.z.tipp { color: var(--kl-gut); }
.z.falsch { color: var(--kl-schlecht); background: color-mix(in srgb, var(--kl-schlecht) 16%, var(--kl-flaeche)); }
.z.bereich { background: color-mix(in srgb, var(--akzent) 11%, var(--kl-flaeche)); }
.z.gleich { background: color-mix(in srgb, var(--akzent) 30%, var(--kl-flaeche)); }
.z.auswahl { background: color-mix(in srgb, var(--akzent) 45%, var(--kl-flaeche)); }
.z.blitz { animation: blitz .6s ease-out; }
@keyframes blitz { 0% { background: color-mix(in srgb, var(--kl-gut) 55%, var(--kl-flaeche)); } }
.notizen { position: absolute; inset: 1px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.notizen i { font-style: normal; display: flex; align-items: center; justify-content: center; font-size: calc(var(--g) / 9 * .25);
  color: var(--kl-text2); font-weight: 700; border-radius: 3px; }
.notizen i.hl { color: #fff; background: var(--akzent); }

#werkzeuge { width: var(--g); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: none; }
.wz { border: 0; background: none; color: var(--kl-text2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 10px; }
.wz span { font-size: 22px; line-height: 1.1; color: var(--kl-text); }
.wz:hover { background: var(--kl-flaeche2); }
.wz:active { transform: translateY(1px); }
.wz.an { background: var(--akzent); color: #fff; }
.wz.an span { color: #fff; }
.wz i { font-style: normal; font-size: 10px; }
.wz:disabled { opacity: .4; cursor: default; }

#ziffern { width: var(--g); display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; flex: none; }
.zf { border: 0; border-radius: 10px; background: var(--kl-flaeche); color: var(--akzent); box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  font: inherit; font-weight: 800; font-size: calc(var(--g) / 9 * .55); padding: 4px 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.zf small { font-size: 10px; color: var(--kl-text2); font-weight: 700; }
.zf:active { transform: translateY(2px); box-shadow: none; }
.zf.leer { visibility: hidden; }
.notizmodus .zf { color: var(--kl-text2); }

/* Menü / Statistik */
.menue { display: flex; flex-direction: column; gap: 8px; }
.menue .kl-knopf { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.menue .kl-knopf small { font-weight: 600; opacity: .8; font-size: 12px; }
.stat { width: 100%; border-collapse: collapse; font-size: 14px; }
.stat th, .stat td { padding: 5px 4px; border-bottom: 1px solid var(--kl-linie); text-align: right; }
.stat th:first-child, .stat td:first-child { text-align: left; }
.stat td { color: var(--kl-text); }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--kl-linie); color: var(--kl-text); cursor: pointer; }
.schalter input { width: 22px; height: 22px; accent-color: var(--akzent); }
@media (min-height: 700px) and (max-width: 600px) {
  #spiel { justify-content: center; gap: 12px; }
  .zf { padding: 12px 0 6px; }
}