/* ── Custom properties ──────────────────────────────────────────────────── */
:root {
  --bg:            #f2f2f7;
  --header-bg:     #ffffff;
  --grid-bg:       #ffffff;
  --border-thin:   #c8c8d0;
  --border-thick:  #2c2c2e;
  --given-color:   #1a1a1a;
  --given-bg:      #f0f0f5;
  --user-color:    #1a6cc4;
  --hint-color:    #8a3fa8;
  --accent:        #d6eaff;
  --peer-bg:       #eef4ff;
  --hover-bg:      #d0f0e4;
  --conflict-bg:   #ffe0e0;
  --conflict-color:#c01010;
  --same-digit-bg: #c8e0ff;
  --legal-entry-bg:#ddf4f8;
  --hint-cell-bg:  #fff3c0;
  --hint-pattern-bg:#e0b3f0;
  --hint-elim-bg:  #f0e6f5;
  --note-color:    #4a4a5a;
  --btn-bg:        #ffffff;
  --btn-border:    #c8c8d0;
  --btn-active-bg: #1a6cc4;
  --btn-active-fg: #ffffff;
  --mode-bg:       #e8e8f0;
  --mode-active:   #1a6cc4;
  --mode-active-fg:#ffffff;
  --dialog-bg:     #ffffff;
  --overlay-bg:    rgba(0,0,0,0.45);
  --shadow:        0 2px 12px rgba(0,0,0,0.15);
  --radius:        10px;
  --font-scale:    1;
  --error-text:    #c0392b;
  --completion-flash-clean: rgba(245, 197, 24, 0.88);
  --completion-flash-hint:  rgba(138, 63, 168, 0.75);
  --completion-flash-peek:  rgba(192, 16, 16, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #1c1c1e;
    --header-bg:     #2c2c2e;
    --grid-bg:       #2c2c2e;
    --border-thin:   #48484a;
    --border-thick:  #d0d0d8;
    --given-color:   #f0f0f0;
    --given-bg:      #3a3a3c;
    --user-color:    #5db8ff;
    --hint-color:    #d08aff;
    --accent:        #1e3a5a;
    --peer-bg:       #252538;
    --hover-bg:      #1a3028;
    --conflict-bg:   #5a1e1e;
    --conflict-color:#ff7070;
    --same-digit-bg: #1a3a5a;
    --legal-entry-bg:#0d2228;
    --hint-cell-bg:  #4a3a00;
    --hint-pattern-bg:#6a3f8a;
    --hint-elim-bg:  #3d2c47;
    --note-color:    #aaaabc;
    --btn-bg:        #3a3a3c;
    --btn-border:    #545458;
    --btn-active-bg: #5db8ff;
    --btn-active-fg: #000000;
    --mode-bg:       #3a3a3c;
    --mode-active:   #5db8ff;
    --mode-active-fg:#000000;
    --dialog-bg:     #2c2c2e;
    --overlay-bg:    rgba(0,0,0,0.65);
    --error-text:    #ff7675;
    --completion-flash-hint: rgba(208, 138, 255, 0.75);
    --completion-flash-peek: rgba(255, 112, 112, 0.75);
  }
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: none; /* prevents pinch-zoom; user-scalable=no is ignored by iOS 10+ */
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  color: var(--given-color);
}

/* ── App shell ──────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-thin);
  flex-shrink: 0;
  gap: 12px;
}

#header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

#header-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

#header h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

#header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#difficulty-select {
  font-size: 15px;
  font-family: inherit;
  padding: 6px 28px 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: var(--given-color);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

#help-btn {
  font-size: 16px;
  font-weight: 700;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--note-color);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

#new-game-btn {
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--given-color);
  cursor: pointer;
  touch-action: manipulation;
}

#header-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--note-color);
  white-space: nowrap;
}


/* ── Main / grid area ───────────────────────────────────────────────────── */
#main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  container-type: size;
}

#grid-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ── Sudoku grid ────────────────────────────────────────────────────────── */
#grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  border: 2px solid var(--border-thick);
  border-radius: 4px;
  overflow: hidden;
  /* Square: min() picks the smaller container dimension, works consistently across browsers */
  width: min(100cqw, 100cqh);
  aspect-ratio: 1 / 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Cells ──────────────────────────────────────────────────────────────── */
.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grid-bg);
  border-right: 1px solid var(--border-thin);
  border-bottom: 1px solid var(--border-thin);
  cursor: pointer;
  transition: background 0.06s;
  overflow: hidden;
}

/* Remove redundant outer edges */
.cell:nth-child(9n)       { border-right: none; }
.cell:nth-child(n+73)     { border-bottom: none; }

/* Thick borders at 3×3 box boundaries — right side */
.cell:nth-child(9n+3),
.cell:nth-child(9n+6) {
  border-right: 2px solid var(--border-thick);
}

/* Thick borders at 3×3 box boundaries — bottom side (rows 3 and 6) */
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2px solid var(--border-thick);
}
 
/* Cell state backgrounds */
.cell.given        { background: var(--given-bg); }
.cell.peer         { background: var(--peer-bg); }
.cell.legal-entry  { background: var(--legal-entry-bg); }
.cell.same-digit   { background: var(--same-digit-bg); }
.cell.hint-cell    { background: var(--hint-cell-bg); }
.cell.hint-pattern { background: var(--hint-pattern-bg); }
.cell.hint-elim    { background: var(--hint-elim-bg); }
.cell.conflict     { background: var(--conflict-bg); }
.cell.selected     { background: var(--accent); }
.cell.hover        { background: var(--hover-bg); }

/* Digit text */
.digit {
  font-size: max(14px, calc(var(--font-scale) * 5cqmin));
  font-weight: 600;
  font-family: 'Noteworthy', 'Bradley Hand', 'Bradley Hand ITC', 'Segoe Print', cursive;
  line-height: 1;
  pointer-events: none;
}

.given       .digit { color: var(--given-color); }
.user        .digit { color: var(--user-color); }
.conflict    .digit { color: var(--conflict-color); }
.same-digit  .digit { font-weight: 800; }

/* Hint-revealed cells (user answer via hint) get a distinct color */
/* Applied by the 'user' class — hint reveals are regular answer entries */

/* ── Notes (candidate digits) ───────────────────────────────────────────── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 92%;
  height: 92%;
  pointer-events: none;
}

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(9px, calc(var(--font-scale) * 3cqmin));
  font-weight: 500;
  font-family: 'Noteworthy', 'Bradley Hand', 'Bradley Hand ITC', 'Segoe Print', cursive;
  color: var(--note-color);
  line-height: 1;
}

.note.highlighted {
  font-weight: 700;
  color: var(--user-color);
}

.note.eliminated {
  text-decoration: line-through;
  color: var(--conflict-color);
}

/* ── Loading overlay ────────────────────────────────────────────────────── */
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  border-radius: 4px;
}

#loading p {
  font-size: 16px;
  color: var(--note-color);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-thin);
  border-top-color: var(--user-color);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes completion-flash {
  0%   { background-color: transparent; }
  15%  { background-color: var(--completion-flash-color, var(--completion-flash-clean)); }
  100% { background-color: transparent; }
}

.cell.completing {
  animation: completion-flash 480ms ease-out;
  transition: none;
}

.cell.completing.flash-hint { --completion-flash-color: var(--completion-flash-hint); }
.cell.completing.flash-peek { --completion-flash-color: var(--completion-flash-peek); }

/* ── Controls ───────────────────────────────────────────────────────────── */
#controls {
  flex-shrink: 0;
  padding: 8px 12px 4px;
  background: var(--header-bg);
  border-top: 1px solid var(--border-thin);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Number pad ─────────────────────────────────────────────────────────── */
#numpad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
}

.num-btn {
  position: relative;
  height: 52px;
  font-family: inherit;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  color: var(--given-color);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s, transform 0.06s;
  -webkit-user-select: none;
  user-select: none;
}

.num-digit {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.num-remaining {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--note-color);
  line-height: 1;
}

.num-btn:active {
  background: var(--accent);
  transform: scale(0.93);
}

.num-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

#delete-btn {
  font-size: 20px;
  color: var(--note-color);
}

/* ── Mode controls ──────────────────────────────────────────────────────── */
#mode-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.mode-action {
  position: relative;
  min-width: 0;
}

.mode-action > .mode-btn {
  width: 100%;
}

.mode-btn {
  height: 42px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--mode-bg);
  border: none;
  border-radius: 8px;
  color: var(--given-color);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  padding: 0 4px;
}

.mode-btn.active {
  background: var(--mode-active);
  color: var(--mode-active-fg);
}

.mode-btn:active {
  opacity: 0.7;
}

.redo-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 82px;
  height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: var(--mode-active);
  color: var(--mode-active-fg);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s, transform 0.08s;
  z-index: 20;
  white-space: nowrap;
}

.redo-popover:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.redo-popover.active {
  filter: brightness(1.08);
  transform: translateX(-50%) translateY(0) scale(1.04);
}

/* ── Custom puzzle entry ────────────────────────────────────────────────── */
#entry-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#entry-instructions {
  font-size: 13px;
  color: var(--note-color);
  text-align: center;
}

#entry-btns {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 6px;
}

.entry-confirm {
  background: var(--mode-active);
  color: var(--mode-active-fg);
}

.cell.photo-review {
  background: var(--hint-cell-bg);
  box-shadow: inset 0 0 0 2px var(--hint-color);
}

#photo-import-btn {
  width: 100%;
}

#entry-error {
  font-size: 13px;
  color: var(--error-text);
  text-align: center;
  min-height: 1.4em;
}

#hint-technique {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--hint-cell-bg);
  border: 1px solid var(--border-thin);
  border-radius: 26px;
  padding: 0 4px 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--given-color);
  box-shadow: var(--shadow);
  white-space: nowrap;
}

#hint-technique-label {
  padding: 0 4px;
}

.hint-step-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--given-color);
  min-width: 44px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.hint-step-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

#hint-technique-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--note-color);
  padding: 0 2px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Overlay + dialogs ──────────────────────────────────────────────────── */
#overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

#overlay.hidden { display: none; }

.dialog {
  background: var(--dialog-bg);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dialog.hidden { display: none; }

.dialog h2 {
  font-size: 22px;
  font-weight: 700;
}

.dialog p {
  font-size: 16px;
  color: var(--note-color);
  line-height: 1.4;
}

.dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

.dialog-btns button {
  flex: 1;
  height: 48px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  background: var(--mode-active);
  color: var(--mode-active-fg);
  cursor: pointer;
  touch-action: manipulation;
}

/* Help dialog */
#help-dialog {
  max-width: min(80vw, 800px);
  max-height: 85vh;
}

#help-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.help-section strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--given-color);
}

.help-section p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--note-color);
  margin: 0;
}

.technique-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 0;
}

.technique-group h3 {
  margin: 0;
  font-size: 14px;
  color: var(--given-color);
}

.technique-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 5px 0 0 16px;
  padding-left: 10px;
  border-left: 2px solid var(--mode-bg);
}

.technique-list dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--given-color);
}

.technique-list dd {
  margin: 1px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--note-color);
}

.dialog-btns button.btn-secondary {
  background: var(--mode-bg);
  color: var(--given-color);
}

#photo-corners-dialog {
  max-width: min(92vw, 620px);
  max-height: 92vh;
}

#photo-crop-dialog {
  max-width: min(92vw, 620px);
  max-height: 92vh;
}

#photo-crop-canvas {
  display:block;
  width:auto;
  max-width:100%;
  max-height:65vh;
  object-fit:contain;
  background:#111;
  border-radius:8px;
  touch-action:none;
}

.crop-dialog-btns { flex-wrap:wrap; }
.crop-dialog-btns button { min-width:120px; }

#photo-corners-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  background: #111;
  border-radius: 8px;
  touch-action: none;
}

#photo-corners-error.corner-error {
  color: var(--error-text);
  font-size: 13px;
}

/* ── Settings dialog ────────────────────────────────────────────────────── */
#settings-dialog {
  max-height: 85vh;
}

#settings-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

.settings-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.settings-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--note-color);
  margin-bottom: 4px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-thin);
  gap: 12px;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row > span {
  font-size: 15px;
  color: var(--given-color);
}

.toggle-btn {
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 12px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--note-color);
  cursor: pointer;
  touch-action: manipulation;
  min-width: 48px;
  flex-shrink: 0;
}

.toggle-btn.active {
  background: var(--mode-active);
  color: var(--mode-active-fg);
  border-color: var(--mode-active);
}

.settings-seg {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.seg-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  color: var(--given-color);
  cursor: pointer;
  touch-action: manipulation;
}

.seg-btn.active {
  background: var(--mode-active);
  color: var(--mode-active-fg);
  border-color: var(--mode-active);
}

.settings-action-btn {
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 6px;
  background: var(--mode-active);
  color: var(--mode-active-fg);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}

/* ── Scribble sink (off-screen, must not be display:none) ───────────────── */
#scribble-input {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: 4px;
}

/* When focused (Scribble is ready to receive handwriting), show a subtle
   green tint over the cell so the player knows writing is expected */
#scribble-input:focus {
  opacity: 1;
  background: rgba(52, 199, 89, 0.13);
  outline: 2px solid rgba(52, 199, 89, 0.55);
  outline-offset: -2px;
}