/* =====================================================
   Sudoku — fountain-pen-on-graph-paper aesthetic
   Color palette from spec: warm amber #c4922a
   ===================================================== */

/* --- Page shell overrides --- */
.sudoku-page {
  --sudoku-frame-width: 1040px;
  /* Override shared dark-theme tokens for light paper theme */
  --color-bg: #f5f0e8;
  --color-surface: #faf7f0;
  --color-surface-2: #f5f0e8;
  --color-surface-3: #ece5d8;
  --color-text: #2c2420;
  --color-text-muted: #8a7e70;
  --color-border: rgba(100, 80, 60, 0.25);
  --color-primary: #c4922a;
  /* Paper palette */
  --s-page-bg: #f5f0e8;
  --s-paper: #faf7f0;
  --s-grid-minor: rgba(120, 100, 80, 0.25);
  --s-grid-major: rgba(60, 45, 30, 0.55);
  --s-given: #2c2420;
  --s-player: #3a5a8c;
  --s-pencil: rgba(100, 90, 80, 0.5);
  --s-amber: #c4922a;
  --s-amber-hover: #d4a23a;
  --s-sel-ring: rgba(196, 146, 42, 0.4);
  --s-sibling: rgba(196, 146, 42, 0.08);
  --s-conflict: rgba(200, 50, 30, 0.18);
  --s-conflict-text: #c43218;
  --s-hint1: rgba(196, 146, 42, 0.14);
  --s-hint2-ring: rgba(196, 146, 42, 0.5);
  --s-hint3-bg: #faf5e8;
  --s-heatmap-cool: rgba(70, 130, 200, 0.38);
  --s-heatmap-warm: rgba(220, 100, 30, 0.48);
  --s-stamp: #c4922a;
  --s-text: #2c2420;
  --s-muted: #8a7e70;
  /* Board size */
  --s-board: min(92vw, 480px);
  --s-cell: calc(var(--s-board) / 9);
  background: var(--s-page-bg);
}

.sudoku-page .tool-frame {
  max-width: var(--sudoku-frame-width);
}

.sudoku-page .tool-header-block {
  max-width: 600px;
}

.sudoku-page .page-title {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 0.98;
}

.sudoku-page .page-subtitle {
  max-width: 44ch;
  color: var(--s-muted);
}

/* --- Cabinet wrapper --- */
.sudoku-cabinet {
  background: var(--s-paper);
  border: 1px solid rgba(100, 80, 60, 0.2);
  border-radius: 16px;
  padding: 16px 16px 0;
  /* Paper fiber texture */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(180, 160, 140, 0.04) 18px,
      rgba(180, 160, 140, 0.04) 19px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 18px,
      rgba(180, 160, 140, 0.04) 18px,
      rgba(180, 160, 140, 0.04) 19px
    );
}

/* --- Marquee (top bar) --- */
.sudoku-marquee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  flex-wrap: wrap;
}

.sudoku-marquee__left,
.sudoku-marquee__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* .sudoku-marquee__btn — sizing handled by .button-sm */

/* Segmented control */
.sudoku-seg {
  display: flex;
  border: 1px solid rgba(100, 80, 60, 0.28);
  border-radius: 8px;
  overflow: hidden;
}

.sudoku-seg__btn {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(100, 80, 60, 0.2);
  padding: 7px 13px;
  min-height: 36px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--s-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}

.sudoku-seg__btn:last-child {
  border-right: none;
}

.sudoku-seg__btn:hover {
  background: rgba(196, 146, 42, 0.1);
  color: var(--s-amber);
}

.sudoku-seg__btn.active {
  background: var(--s-amber);
  color: #fff;
  font-weight: 700;
}

/* Timer */
.sudoku-timer {
  font-family: 'Georgia', serif;
  font-size: 0.92rem;
  color: var(--s-muted);
  min-width: 38px;
  text-align: right;
}

/* --- Stage: board + sidecar --- */
.sudoku-stage {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* --- Board wrap --- */
.sudoku-board-wrap {
  position: relative;
  width: var(--s-board);
  max-width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
}

/* --- 9×9 grid --- */
.sudoku-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: var(--s-paper);
  position: relative;
  /* Fine graph-paper lines — use border (not outline) so it respects box-sizing */
  border: 2px solid var(--s-grid-major);
  user-select: none;
}

/* Individual cells */
.sudoku-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-right: 1px solid var(--s-grid-minor);
  border-bottom: 1px solid var(--s-grid-minor);
  box-sizing: border-box;
  transition: background 80ms;
  -webkit-tap-highlight-color: transparent;
}

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

/* Thick box borders — right side of cols 3,6 */
.sudoku-cell:nth-child(3n):not(:nth-child(9n)) {
  border-right: 2px solid var(--s-grid-major);
  filter: drop-shadow(0.3px 0 0 rgba(60,45,30,0.2));
}
/* Thick box borders — bottom of rows 3,6 */
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2px solid var(--s-grid-major);
}

/* Cell states */
.sudoku-cell--selected {
  background: var(--s-hint1) !important;
  box-shadow: inset 0 0 0 2px var(--s-amber);
  z-index: 2;
}

.sudoku-cell--sibling {
  background: var(--s-sibling);
}

.sudoku-cell--same-digit {
  background: rgba(196, 146, 42, 0.13);
}

.sudoku-cell--conflict {
  background: var(--s-conflict) !important;
}

/* Hint tiers */
.sudoku-cell--hint1 {
  background: var(--s-hint1) !important;
  animation: hint1-pulse 1.2s ease-in-out infinite;
}

.sudoku-cell--hint2 {
  box-shadow: inset 0 0 0 2px var(--s-hint2-ring) !important;
  background: rgba(196, 146, 42, 0.06) !important;
}

/* Heatmap */
.sudoku-cell--heatmap {
  transition: background 400ms ease;
}

/* Ink stamp on region complete */
.sudoku-cell--stamp {
  animation: stamp-trace 0.4s ease-out forwards;
}

/* --- Digit text inside cell --- */
.sudoku-cell__digit {
  font-family: 'Georgia', serif;
  font-size: clamp(16px, 3.2vw, 24px);
  line-height: 1;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.sudoku-cell__digit--given {
  font-weight: 700;
  color: var(--s-given);
}

.sudoku-cell__digit--player {
  font-weight: 400;
  color: var(--s-player);
  animation: ink-drop 80ms ease-out;
}

.sudoku-cell__digit--conflict {
  color: var(--s-conflict-text);
}

/* --- Pencil marks grid (3×3 sub-grid in cell) --- */
.sudoku-cell__pencil {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
  padding: 1px;
}

.sudoku-cell__pm {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(6px, 1.1vw, 10px);
  color: var(--s-pencil);
  line-height: 1;
}

.sudoku-cell__pm--fade-out {
  animation: pm-fade-out 150ms ease-out forwards;
}

/* --- Digit palette --- */
.sudoku-palette {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px 16px;
  flex-wrap: wrap;
}

.sudoku-palette__digit {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(100, 80, 60, 0.28);
  border-radius: 10px;
  background: var(--s-paper);
  font-family: 'Georgia', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--s-given);
  cursor: pointer;
  transition: background 100ms, border-color 100ms, transform 80ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sudoku-palette__digit:hover {
  background: rgba(196, 146, 42, 0.1);
  border-color: var(--s-amber);
}

.sudoku-palette__digit.active {
  background: var(--s-amber);
  border-color: var(--s-amber);
  color: #fff;
}

.sudoku-palette__digit:active {
  transform: scale(0.93);
}

.sudoku-palette__erase,
.sudoku-palette__pencil {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(100, 80, 60, 0.2);
  border-radius: 10px;
  background: transparent;
  font-size: 1.1rem;
  color: var(--s-muted);
  cursor: pointer;
  transition: background 100ms, color 100ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sudoku-palette__erase:hover {
  background: rgba(200, 50, 30, 0.1);
  color: var(--s-conflict-text);
}

.sudoku-palette__pencil:hover,
.sudoku-palette__pencil[aria-pressed="true"] {
  background: rgba(196, 146, 42, 0.15);
  color: var(--s-amber);
}

/* --- Sidecar --- */
.sudoku-sidecar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

/* Stats strip */
.sudoku-stats-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
}

.sudoku-stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: rgba(196, 146, 42, 0.06);
  border: 1px solid rgba(196, 146, 42, 0.18);
  border-radius: 10px;
}

.sudoku-stat__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--s-muted);
}

.sudoku-stat__value {
  font-family: 'Georgia', serif;
  font-size: 1.25rem;
  color: var(--s-amber);
}

.sudoku-reset-stats {
  border: none;
  background: none;
  color: var(--s-muted);
  font-size: 0.62rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 100ms, opacity 150ms;
  opacity: 0;
}

.sudoku-stats-strip:hover .sudoku-reset-stats,
.sudoku-reset-stats:focus-visible {
  opacity: 1;
}

.sudoku-reset-stats:hover {
  color: var(--s-conflict-text);
}

/* Controls */
.sudoku-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: rgba(100, 80, 60, 0.04);
  border: 1px solid rgba(100, 80, 60, 0.12);
  border-radius: 12px;
}

.sudoku-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sudoku-control-label {
  font-size: 0.78rem;
  color: var(--s-text);
  font-weight: 500;
}

.sudoku-control-btn {
  padding: 4px 10px;
  min-height: 0;
  font-size: 0.75rem;
}

/* Toggle button */
.sudoku-toggle {
  min-width: 44px;
  padding: 4px 10px;
  border: 1px solid rgba(100, 80, 60, 0.25);
  border-radius: 20px;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--s-muted);
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}

.sudoku-toggle--on,
.sudoku-toggle[aria-pressed="true"] {
  background: rgba(196, 146, 42, 0.15);
  border-color: var(--s-amber);
  color: var(--s-amber);
}

/* Hint panel */
.sudoku-hint-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(196, 146, 42, 0.22);
  border-radius: 12px;
  background: var(--s-hint3-bg, #faf5e8);
}

.sudoku-hint-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sudoku-hint-panel__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s-amber);
}

.sudoku-hint-btns {
  display: flex;
  gap: 5px;
}

.sudoku-hint-btn {
  padding: 6px 14px;
  min-height: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border-color: rgba(196, 146, 42, 0.35);
  color: var(--s-amber);
}

.sudoku-hint-btn:hover {
  background: rgba(196, 146, 42, 0.12);
}

.sudoku-hint-card {
  padding-top: 8px;
  border-top: 1px solid rgba(196, 146, 42, 0.18);
}

.sudoku-hint-card__technique {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--s-amber);
  font-family: 'Georgia', serif;
}

.sudoku-hint-card__explanation {
  margin: 0;
  font-size: 0.78rem;
  color: var(--s-text);
  line-height: 1.55;
}

/* Status message */
.sudoku-status {
  font-size: 0.78rem;
  color: var(--s-muted);
  min-height: 1.4em;
  line-height: 1.4;
}

/* --- Result overlay (covers board on completion) --- */
.sudoku-result-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 240, 0.88);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.sudoku-result-layer:not([hidden]) {
  display: flex;
}
.sudoku-result-layer.sudoku-result-layer--visible {
  opacity: 1;
  pointer-events: auto;
}

.sudoku-result-card {
  background: var(--s-paper);
  border: 1px solid rgba(196, 146, 42, 0.35);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(100, 80, 60, 0.14);
}

.sudoku-result__kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--s-amber);
}

.sudoku-result__title {
  margin: 0 0 16px;
  font-family: 'Georgia', serif;
  font-size: 1.6rem;
  color: var(--s-given);
  line-height: 1.1;
}

.sudoku-result__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.sudoku-result__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px;
  background: rgba(196, 146, 42, 0.06);
  border-radius: 8px;
}

.sudoku-result__stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--s-muted);
}

.sudoku-result__stat-value {
  font-family: 'Georgia', serif;
  font-size: 1.15rem;
  color: var(--s-amber);
}

.sudoku-result__heatmap-note {
  display: none;
}

.sudoku-result__actions {
  display: none;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sudoku-result__actions:not([hidden]) {
  display: flex;
}

/* --- Animations --- */
@keyframes ink-drop {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes conflict-flash {
  0%, 100% { background: var(--s-conflict); }
  50%       { background: rgba(200, 50, 30, 0.35); }
}

@keyframes hint1-pulse {
  0%, 100% { background: var(--s-hint1); }
  50%       { background: rgba(196, 146, 42, 0.24); }
}

@keyframes stamp-trace {
  0%   { box-shadow: inset 0 0 0 0 var(--s-stamp); }
  50%  { box-shadow: inset 0 0 0 2px var(--s-stamp); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

@keyframes result-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pm-fade-out {
  to { opacity: 0; filter: blur(0.5px); }
}

@keyframes puzzle-complete-glow {
  0%   { box-shadow: 0 0 0 0 rgba(196, 146, 42, 0); }
  40%  { box-shadow: 0 0 20px 8px rgba(196, 146, 42, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(196, 146, 42, 0); }
}

.sudoku-board--complete {
  animation: puzzle-complete-glow 600ms ease-out;
}

/* =====================================================
   MOBILE (≤ 680px)
   ===================================================== */
@media (max-width: 680px) {
  .sudoku-page {
    /* viewport − container margin (16×2) − cabinet padding (10×2) − cabinet border (1×2) − subpixel buffer */
    --s-board: min(calc(100vw - 56px), 400px);
  }

  .sudoku-stage {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .sudoku-board-wrap {
    width: 100%;
    max-width: var(--s-board);
  }

  .sudoku-sidecar {
    width: 100%;
  }

  .sudoku-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sudoku-control-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .sudoku-palette {
    gap: 5px;
    padding: 12px 4px 14px;
  }

  .sudoku-palette__digit,
  .sudoku-palette__erase,
  .sudoku-palette__pencil {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .sudoku-cell__digit {
    font-size: clamp(14px, 4.2vw, 20px);
  }

  .sudoku-cell__pm {
    font-size: clamp(5px, 1.4vw, 8px);
  }

  .sudoku-cabinet {
    padding: 10px 10px 0;
    border-radius: var(--radius-sm, 10px);
  }

  .sudoku-marquee {
    gap: 6px;
  }

  .sudoku-seg__btn {
    padding: 6px 10px;
    min-height: 34px;
    font-size: 0.72rem;
  }

  .sudoku-stats-strip {
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .sudoku-cabinet {
    padding: 8px 8px 0;
  }

  .sudoku-page {
    /* viewport − container margin (12×2) − cabinet padding (8×2) − cabinet border (1×2) − subpixel buffer */
    --s-board: calc(100vw - 44px);
  }

  .sudoku-marquee {
    gap: 4px;
  }

  .sudoku-marquee__btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .sudoku-stats-strip {
    gap: 4px;
  }

  .sudoku-stat-card {
    padding: 6px 4px;
  }

  .sudoku-stat__label {
    font-size: 0.6rem;
  }

  .sudoku-stat__value {
    font-size: 1.05rem;
  }

  .sudoku-controls {
    padding: 8px;
    gap: 6px;
  }

  .sudoku-hint-panel {
    padding: 8px;
  }

  .sudoku-palette {
    gap: 3px;
    padding: 10px 2px 12px;
  }

  .sudoku-palette__digit,
  .sudoku-palette__erase,
  .sudoku-palette__pencil {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    border-radius: 7px;
  }
}