:root {
  --bg: #14161c;
  --panel: #1d2029;
  --line: #2c303c;
  --text: #e8e9ee;
  --muted: #8b90a0;
  --accent: #f0a640;
  --clue: #262a35;
  --block: #0d0e12;
  --cell: #f7f5ef;
  --cell-text: #1a1c22;
  --entry: #2457c5;
  --sel: #ffd98a;
  --run: #fbeccd;
  --same: #e3ecff;
  --err: #d8342c;
  --err-bg: #ffd9d6;
  --ok: #2e9e5b;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; cursor: pointer; }

header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1100px; margin: 0 auto; padding: 10px 12px 6px;
}
h1 { margin: 0; font-size: 1.35rem; letter-spacing: .04em; }
h1::first-letter { color: var(--accent); }
h1 .jp { font-size: .7em; font-weight: 500; color: var(--muted); letter-spacing: .12em; margin-left: .3em; }
.levels { display: flex; background: var(--panel); border-radius: 10px; padding: 3px; }
.levels button {
  border: 0; background: none; padding: 7px 14px; border-radius: 8px; color: var(--muted); font-weight: 600;
}
.levels button.active { background: var(--accent); color: #1b1305; }
.status { display: flex; gap: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
#timer { color: var(--text); font-weight: 600; min-width: 3.5em; text-align: right; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 1.1rem; }

main {
  max-width: 1100px; margin: 0 auto; padding: 4px 12px 16px;
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* ---------- board ---------- */
.board {
  --size: min(calc(100vw - 24px), calc(100dvh - 330px), 680px);
  width: max(var(--size), 280px);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 2px;
  background: var(--line);
  border: 2px solid var(--line);
  border-radius: 6px;
  container-type: inline-size;
  user-select: none; -webkit-user-select: none;
}
.cell {
  aspect-ratio: 1;
  position: relative;
  display: grid; place-items: center;
  font-size: calc(100cqw / var(--cols) * .56);
  line-height: 1;
}
.cell.block { background: var(--block); }
.cell.clue {
  background: var(--clue) linear-gradient(to top right, transparent calc(50% - 1px), #4a5062 calc(50% - .5px), #4a5062 calc(50% + .5px), transparent calc(50% + 1px));
  color: #d7dae4;
}
.cell.clue span {
  position: absolute; cursor: pointer; padding: 2%; border-radius: 3px; font-size: calc(100cqw / var(--cols) * .3); font-weight: 600;
}
.cell.clue .a { top: 7%; right: 9%; }
.cell.clue .d { bottom: 7%; left: 9%; }
.cell.clue.bad .a.bad, .cell.clue.bad .d.bad { color: #ff8a80; }
.cell.clue.full .a.full, .cell.clue.full .d.full { color: #7dd3a0; }
.cell.clue span.focus { background: var(--accent); color: #1b1305 !important; }

.cell.white { background: var(--cell); color: var(--entry); font-weight: 600; cursor: pointer; }
.cell.white.run { background: var(--run); }
.cell.white.same { background: var(--same); }
.cell.white.sel { background: var(--sel); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.white.conflict { color: var(--err); }
.cell.white.wrong { background: var(--err-bg); }
.cell.white.wrong.sel { box-shadow: inset 0 0 0 2px var(--err); }
.solved .cell.white { color: var(--ok); }

.notes {
  position: absolute; inset: 4%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-size: calc(100cqw / var(--cols) * .25); font-weight: 500; color: #5d6372;
}
.notes span { display: grid; place-items: center; }

/* ---------- hints ---------- */
.hints {
  width: min(100%, 680px);
  background: var(--panel); border-radius: 10px; padding: 8px 12px;
  font-size: .92rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
  order: 2;
}
.hints h3 { display: none; margin: 0 0 8px; text-align: center; color: var(--text); font-size: 1rem; }
.hints p { margin: 0; }
.hints .muted { color: #666b7a; }
.hints b { color: var(--text); }
.run-combos { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.run-title { white-space: nowrap; }
.run-combos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.run-combos li { color: var(--accent); font-family: ui-monospace, Consolas, monospace; letter-spacing: .05em; }
.run-combos li.muted { color: var(--err); letter-spacing: 0; font-family: inherit; }

/* ---------- pad ---------- */
.board { order: 1; }
.pad { display: grid; gap: 8px; width: min(100%, 520px); order: 3; grid-template-columns: 1fr 4fr; grid-template-areas: "digits digits" "notes tools"; }
.pad .digits { grid-area: digits; }
.pad .tools { grid-area: tools; }
.pad .notes-toggle { grid-area: notes; }
.actions { order: 4; }
.digits { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.digits button, .tools button, .notes-toggle {
  border: 0; border-radius: 10px; background: var(--panel); padding: 0;
  min-height: 46px; font-size: 1.35rem; font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35);
}
.digits button:active, .tools button:active { transform: translateY(1px); background: #272b37; }
.digits button.used { color: var(--muted); opacity: .55; }
.notes-mode .digits button { color: var(--accent); font-size: 1rem; }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tools .danger { color: #ff8a80; }
.tools button { font-size: .95rem; font-weight: 500; min-height: 42px; }
#notesBtn.on { background: var(--accent); color: #1b1305; }

.actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; }
.actions button {
  background: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; color: var(--muted);
}
.actions button:hover { color: var(--text); border-color: var(--muted); }
.toggle { color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.toggle input { accent-color: var(--accent); width: 18px; height: 18px; }

/* ---------- dialogs ---------- */
dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  max-width: min(92vw, 460px); padding: 20px 22px;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin-top: 0; }
dialog ul { padding-left: 1.2em; line-height: 1.5; }
kbd { background: #2b2f3b; border-radius: 4px; padding: 0 5px; font-size: .9em; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.dialog-actions button {
  border: 1px solid var(--line); background: none; border-radius: 8px; padding: 8px 14px;
}
.dialog-actions .primary { background: var(--accent); color: #1b1305; border-color: var(--accent); font-weight: 600; }

/* ---------- notes toggle placement ---------- */
.notes-toggle { display: block; font-size: 1rem !important; font-weight: 600 !important; min-height: 42px; }
@media (max-width: 979px) { .notes-toggle span { display: none; } .notes-toggle { font-size: 1.2rem !important; } }

/* ---------- wide screens: help | board | controls ---------- */
@media (min-width: 980px) and (min-height: 560px) {
  main {
    max-width: 1400px;
    grid-template-columns: 220px auto 230px;
    grid-template-areas: "hints board pad" "hints actions pad";
    align-items: start; justify-content: center;
    column-gap: 24px;
  }
  .board { grid-area: board; --size: min(calc(100vw - 560px), calc(100dvh - 120px), 780px); }
  .hints {
    grid-area: hints; width: 220px; max-width: none; align-self: stretch;
    display: block; padding: 14px; max-height: calc(100dvh - 90px); overflow-y: auto;
  }
  .hints h3 { display: block; }
  .hints p { margin-bottom: 10px; line-height: 1.45; }
  .run-combos { display: block; margin-bottom: 14px; }
  .run-title { margin-bottom: 6px; color: var(--muted); }
  .run-combos ul { display: block; }
  .run-combos li { text-align: center; padding: 2px 0; font-size: 1.1rem; letter-spacing: .45em; }
  .pad { grid-template-columns: 1fr; grid-template-areas: "notes" "digits" "tools"; }
  .pad { grid-area: pad; width: 230px; gap: 12px; }
  .notes-toggle { min-height: 52px; }
  .digits { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .digits button { aspect-ratio: 1; min-height: 0; font-size: 1.6rem; }
  .tools { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tools button { min-height: 48px; }
  .tools #checkBtn, .tools #eraseBtn { grid-column: 1 / -1; }
  .actions { grid-area: actions; }
}

/* ---------- small phones ---------- */
@media (max-width: 420px) {
  header { padding: 8px 8px 4px; gap: 8px; }
  h1 { font-size: 1.1rem; }
  .levels button { padding: 6px 10px; font-size: .9rem; }
  main { padding: 2px 6px 12px; gap: 10px; }
  .board { --size: min(calc(100vw - 12px), calc(100dvh - 300px)); gap: 1px; border-width: 1px; }
  .digits { gap: 4px; }
  .digits button { min-height: 44px; font-size: 1.2rem; }
  .tools span { display: none; }
  .tools button { font-size: 1.2rem; }
  .hints { font-size: .85rem; padding: 6px 10px; }
}