/* Knobelpost - Sudoku-Spielfeld, schlicht gehalten. */

.kp-game-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: .75rem;
}
.kp-game-stats { display: flex; gap: 1.25rem; }
.kp-stat b { display: block; font-size: 1.05rem; }
.kp-stat span { font-size: .8rem; color: #6c757d; }
.kp-stat.is-warn b { color: #dc3545; }

.kp-board-wrap { position: relative; }

.kp-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  background: #fff;
  border: 3px solid #212529;
}

.kp-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-right: 1px solid #868e96;
  border-bottom: 1px solid #868e96;
  background: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  color: #0d6efd;
  cursor: pointer;
}

/* Kraeftige Linien zwischen den 3x3-Bloecken */
.kp-cell:nth-child(9n + 3),
.kp-cell:nth-child(9n + 6) { border-right: 3px solid #212529; }
.kp-cell:nth-child(n + 19):nth-child(-n + 27),
.kp-cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 3px solid #212529; }

/* Aussenkanten kommen vom Rahmen des Bretts */
.kp-cell:nth-child(9n) { border-right: 0; }
.kp-cell:nth-child(n + 73) { border-bottom: 0; }

.kp-cell.is-given { color: #212529; font-weight: 700; cursor: default; }
.kp-cell.is-peer { background: #eef1f4; }
.kp-cell.is-same { background: #d8e6fb; }
.kp-cell.is-selected { background: #b6d4fe; box-shadow: inset 0 0 0 2px #0d6efd; }
.kp-cell.is-wrong { color: #dc3545; background: #f8d7da; }
.kp-cell:focus { outline: 2px solid #0d6efd; outline-offset: -2px; }

.kp-notes {
  position: absolute;
  top: 8%; right: 8%; bottom: 8%; left: 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: .6rem;
  font-weight: 600;
  color: #495057;
  pointer-events: none;
}
.kp-notes span { display: flex; align-items: center; justify-content: center; }

.kp-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
  background: rgba(255, 255, 255, .95);
  padding: 1rem;
  z-index: 3;
}
.kp-overlay[hidden] { display: none; }
.kp-overlay h3 { margin: 0; }
.kp-overlay p { color: #6c757d; margin: 0; max-width: 22rem; }

/* Zifferntasten */
.kp-pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
  max-width: 30rem;
  margin: .75rem auto 0;
}
.kp-key {
  aspect-ratio: 1 / 1;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  background: #fff;
  font-size: 1.25rem;
  color: #212529;
}
.kp-key small { display: block; font-size: .6rem; color: #6c757d; }
.kp-key:hover { background: #e9ecef; }
.kp-key.is-done { color: #adb5bd; }

.kp-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .35rem;
  max-width: 30rem;
  margin: .35rem auto 0;
}
@media (min-width: 576px) { .kp-tools { grid-template-columns: repeat(4, 1fr); } }
.kp-tool {
  padding: .375rem .5rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  background: #fff;
  font-size: .9rem;
  color: #212529;
}
.kp-tool:hover { background: #e9ecef; }
.kp-tool.is-active { background: #0d6efd; border-color: #0d6efd; color: #fff; }

/* Seitenspalte */
.kp-panel {
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  padding: 1rem;
  background: #fff;
}
.kp-panel + .kp-panel { margin-top: 1rem; }
.kp-panel h2 { font-size: 1rem; margin-bottom: .75rem; }
.kp-levels { display: grid; gap: .35rem; }
.kp-level {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  background: #fff;
  text-align: left;
  color: #212529;
}
.kp-level:hover { background: #e9ecef; }
.kp-level.is-active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.kp-level em { font-style: normal; font-size: .8rem; color: #6c757d; }
.kp-level.is-active em { color: #e9ecef; }

.kp-bestlist { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.kp-bestlist li {
  display: flex;
  justify-content: space-between;
  padding: .3rem 0;
  border-bottom: 1px solid #e9ecef;
}
.kp-bestlist li:last-child { border-bottom: 0; }

@media print {
  .kp-panel, .kp-pad, .kp-tools, .kp-game-bar, .kp-overlay { display: none !important; }
  .kp-board { max-width: 15cm; }
  .kp-cell { color: #000 !important; background: #fff !important; }
  .kp-notes { display: none; }
}