* { box-sizing: border-box; }
html { overscroll-behavior: none; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #faf8ef;
  color: #776e65;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
.container {
  width: min(500px, 100%);
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 44px; line-height: 1; }
.tagline { margin: 8px 0 0; font-size: 14px; }
.scores { display: flex; gap: 8px; flex-wrap: wrap; }
.score-box {
  background: #bbada0; color: #fff; border-radius: 6px;
  padding: 8px 12px; text-align: center; min-width: 70px;
}
.score-box span { display: block; font-size: 11px; text-transform: uppercase; opacity: 0.9; }
.score-box strong { font-size: 18px; }
.difficulty, .controls { display: flex; gap: 8px; margin: 16px 0 10px; flex-wrap: wrap; }
.difficulty button, .controls button {
  flex: 1; min-height: 48px; min-width: 0;
  background: #8f7a66; color: #fff; border: 0; border-radius: 6px;
  padding: 10px 8px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.difficulty button.active, .controls button.active { background: #1a73e8; }
.difficulty button:hover, .controls button:hover { filter: brightness(0.92); }
#new-game { background: #5a4d42; }
.message { min-height: 24px; font-weight: 700; text-align: center; margin: 6px 0 10px; }
.message.win { color: #2a7a3b; }
.board {
  display: grid; grid-template-columns: repeat(9, 1fr);
  width: 100%; aspect-ratio: 1;
  border: 3px solid #776e65; border-radius: 4px; overflow: hidden;
  background: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
}
.cell {
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #d8d0c4; border-bottom: 1px solid #d8d0c4;
  font-size: clamp(18px, 5.5vw, 26px); font-weight: 600; cursor: pointer;
  background: #fff; color: #1a73e8; padding: 0;
}
.cell:nth-child(3n) { border-right-width: 3px; border-right-color: #776e65; }
.cell:nth-child(9n) { border-right-width: 1px; border-right-color: #d8d0c4; }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) { border-bottom-width: 3px; border-bottom-color: #776e65; }
.cell:nth-child(n+73) { border-bottom: 0; }
.cell.given { color: #3c3a32; font-weight: 800; }
.cell.wrong { color: #b3402a; }
.cell.selected { background: #d6e4ff; }
.cell.related { background: #f2f0eb; }
.cell.same { background: #cfe0ff; }
.cell .notes {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%; font-size: clamp(8px, 2.4vw, 11px); font-weight: 600; color: #8a8378;
}
.cell .notes span { display: flex; align-items: center; justify-content: center; }
.pad {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-top: 14px;
}
.pad button {
  min-height: 56px; background: #ede0c8; color: #3c3a32; border: 0; border-radius: 8px;
  font-size: 22px; font-weight: 800; cursor: pointer; padding: 4px 0 6px; line-height: 1.1;
}
.pad button small { display: block; font-size: 11px; font-weight: 600; opacity: 0.7; }
.pad button.done { opacity: 0.35; }
.pad button:active { background: #e2d0ac; }
.help { font-size: 13px; line-height: 1.5; }
@media (max-width: 480px) {
  h1 { font-size: 36px; }
  .container { padding-left: 12px; padding-right: 12px; }
  .score-box { min-width: 62px; padding: 6px 8px; }
  .pad { gap: 4px; }
  .pad button { min-height: 52px; font-size: 20px; }
}