/* ---- Reset & base ---- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f4f5f7;
  color: #222;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: max-width 0.15s ease;
}

/* Samurai's board is wider than the classic layout, so widen the
   container too - on desktop this avoids forcing a scrollbar for no
   reason; on narrow screens max-width simply has no effect either way. */
#app.wide-mode {
  max-width: 760px;
}

.app-header {
  text-align: center;
}

.app-header h1 {
  margin: 8px 0 0;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}

/* ---- Top bar ---- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.mode-select,
.difficulty-select {
  display: flex;
  gap: 6px;
}

button {
  font-family: inherit;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  background: #e2e5eb;
  color: #222;
  cursor: pointer;
  touch-action: manipulation;
}

button:active {
  filter: brightness(0.92);
}

.mode-select button.active,
.difficulty-select button.active {
  background: #3b6ef0;
  color: #fff;
}

.primary-btn {
  background: #3b6ef0;
  color: #fff;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Status bar ---- */
.status-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 1.05rem;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
}

/* ---- Board ---- */
.board-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  /* flex-start, not center: centering an element that's wider than its
     container makes the portion that overflows the start edge harder
     to reach. */
  justify-content: flex-start;
  /* Deliberately NOT a scroll container (no overflow:auto here). On
     iOS Safari, pinch-zooming and panning around an oversized element
     that lives inside its OWN independently-scrollable box fights the
     page's native pinch-zoom gesture - one finger drag tries to scroll
     this box while the browser is also trying to pan the zoomed page,
     which is exactly the "clunky" feel on the Samurai board. Letting
     the board overflow into the page's normal flow instead means
     there's only one scrollable/zoomable surface (the page itself), so
     native pinch-zoom-and-pan behaves the way it does everywhere else
     on the web.
   */
  overflow: visible;
}

.board {
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: #fff;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Samurai's 21x21 cross is far too dense to squeeze into one screen at
   a readable size, so it gets fixed-size cells inside a scrollable
   wrapper instead of shrinking to fit - same approach a paper Samurai
   Sudoku booklet takes: it's just a bigger page, not a smaller grid. */
.board.samurai {
  width: max-content;
  aspect-ratio: auto;
  grid-template-columns: repeat(21, 32px);
  grid-template-rows: repeat(21, 32px);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d8dd;
  font-size: clamp(0.9rem, 4.2vw, 1.4rem);
  color: #1c1c1c;
  user-select: none;
  cursor: pointer;
  position: relative;
  background: #fff;
}

.board.samurai .cell {
  font-size: 14px;
}

.cell.blank {
  border: none;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.cell.border-right {
  border-right: 2px solid #222;
}

.cell.border-bottom {
  border-bottom: 2px solid #222;
}

.cell.edge-top {
  border-top: 2px solid #222;
}

.cell.edge-right {
  border-right: 2px solid #222;
}

.cell.edge-bottom {
  border-bottom: 2px solid #222;
}

.cell.edge-left {
  border-left: 2px solid #222;
}

.cell.given {
  font-weight: 700;
  color: #000;
}

.cell .value {
  pointer-events: none;
}

.cell.peer {
  background: #eaf0ff;
}

.cell.selected {
  background: #c9dcff;
}

.cell.same-number {
  background: #d7e6ff;
}

.cell.conflict .value,
.cell.conflict.given {
  color: #d23b3b;
}

.cell.conflict {
  background: #fdeaea;
}

.cell.selected.conflict {
  background: #fad0d0;
}

.cell.error {
  background: #ffb3b3 !important;
}

/* Pencil-mark notes grid inside an empty cell */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.notes span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.5rem, 1.8vw, 0.7rem);
  color: #5a6b8c;
}

.board.samurai .notes span {
  font-size: 6px;
}

/* ---- Generating overlay ---- */
.generating-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 600;
  color: #3b6ef0;
  border-radius: 4px;
}

.generating-overlay.hidden {
  display: none;
}

/* ---- Controls ---- */
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-buttons button {
  flex: 1;
  max-width: 140px;
}

#notes-btn.active {
  background: #3b6ef0;
  color: #fff;
}

.number-pad {
  display: flex;
  gap: 6px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  transition: max-width 0.15s ease;
}

#app.wide-mode .number-pad {
  max-width: 650px;
}

.num-btn {
  flex: 1;
  aspect-ratio: 1 / 1;
  font-size: clamp(1rem, 3.5vw, 1.3rem);
  background: #fff;
  border: 1px solid #d6d8dd;
  border-radius: 8px;
  padding: 0;
  min-width: 0;
}

.num-btn:active {
  background: #eaf0ff;
}

/* A digit that's fully placed disappears entirely (not just greyed out) -
   the flex layout lets the remaining buttons grow to fill the freed space. */
.num-btn.completed {
  display: none;
}

/* ---- Win modal ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content p {
  margin: 6px 0;
  font-size: 1.05rem;
}

.modal-content button {
  margin-top: 16px;
}

/* ---- Larger screens ---- */
@media (min-width: 600px) {
  #app {
    padding-top: 24px;
  }

  .app-header h1 {
    font-size: 2rem;
  }
}

/* ---- Smaller screens ---- */
@media (max-width: 480px) {
  .board.samurai {
    grid-template-columns: repeat(21, 26px);
    grid-template-rows: repeat(21, 26px);
  }

  .board.samurai .cell {
    font-size: 11px;
  }

  .board.samurai .notes span {
    font-size: 5px;
  }
}