:root { font-family: var(--font-serif); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; color: var(--ink); }
body {
  background-color: var(--paper);
}

.app { max-width: 980px; width: 100%; margin: 0 auto; padding: 28px 20px 48px; }
.meta { display: flex; gap: 8px; }
.pill {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  font-size: 0.85rem; letter-spacing: 0.04em; background: var(--bg-2);
}
.pill.quiet { color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.play { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
.board-wrap { position: relative; min-width: 0; width: min(100%, 540px); max-width: 100%; }
.board { display: grid; width: 100%; max-width: 100%; aspect-ratio: 1; }
.cell {
  position: relative; display: grid; place-items: center;
  min-width: 0; min-height: 0; overflow: hidden;
  background: var(--cell); cursor: pointer; user-select: none;
}
.cell.given { font-weight: var(--weight-given); }
.cell.entry { color: var(--entry); }
.notes {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  place-items: center;
  pointer-events: none;
  box-sizing: border-box;
}
.hidden { display: none !important; }
.win, .pause-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 82%, transparent); z-index: 5; }
.win.hidden, .pause-overlay.hidden { display: none; }
.board-legend { margin-top: 12px; color: var(--muted); font-size: 0.85rem; }
.status, .hint-why { min-height: 1.2em; font-size: 0.9rem; color: var(--muted); }
.check-error { color: var(--ink); margin: 8px 0 0; }

@media (max-width: 760px) {
  .play { grid-template-columns: 1fr; }
  .board-wrap { width: 100%; }
}