:root {
  --cell-size: clamp(32px, calc((100vw - (2 * var(--pad))) / 9), 84px);
  --board-size: calc(9 * var(--cell-size));
  --pad: clamp(16px, 2.4vmin, 24px);
  --border-thin: 1px;
  --border-strong: 4px; /* 3x3 separators */
  --border-outer: var(--border-strong); /* outer board border */

  /* Night defaults (further lightened) */
  --bg: #1b2333; /* softer dark */
  --panel: #202a3d;
  --panel-2: #25324a;
  --text: #f2f6ff;
  --muted: #ccd3e2;
  --primary: #0a84ff; /* Apple accent blue */
  --accent: #0a84ff;
  --success: #30d158; /* Apple green */
  --warning: #ff9f0a;
  --danger: #ff6b6b;
  /* Slightly lighter board grid lines (dark mode) */
  --grid: #475281; /* was #3b4464 */
  --grid-strong: #6a74a0; /* was #56608a */
}

:root[data-theme='day'] {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel-2: #eef2ff;
  --text: #0b1533;
  --muted: #4b5568;
  --primary: #0a84ff;
  --accent: #0a84ff;
  --danger: #d32f2f;
  /* Slightly lighter board grid lines (light mode) */
  --grid: #d7dbe7; /* was #ced3e0 */
  --grid-strong: #7a8090; /* was #6b7280 */
}

/* Light mode: remove dark top gradient entirely for a cleaner look */
:root[data-theme='day'] body {
  background: var(--bg);
}

* {
  box-sizing: border-box;
}
/* removed fixed 100% height to avoid unnecessary vertical scrollbars on desktop */
body {
  margin: 0;
  font:
    14px/1.4 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    Arial,
    'Apple Color Emoji',
    'Segoe UI Emoji';
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -20%, rgba(22, 32, 57, 0.28), transparent),
    radial-gradient(900px 500px at 90% -10%, rgba(10, 132, 255, 0.03), transparent), var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  /* safe-area padding merged from later block */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.site-header,
.site-footer {
  width: calc(var(--board-size) + 2 * var(--pad));
  max-width: calc(var(--board-size) + 2 * var(--pad));
  overflow-x: hidden;
  margin: 16px auto;
  padding: 0 var(--pad);
}
.site-header {
  display: grid;
  row-gap: 10px;
}
.site-header h1 {
  margin: 0;
  font-size: clamp(22px, 3.4vmin, 32px);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}
/* Ensure main action buttons fill their grid cells */
#new-puzzle,
#undo,
#restart,
#hint,
#solve-board {
  width: 100%;
}
/* Place the badges neatly in the row below */
#error-badge {
  grid-column: 1 / 2;
}
#hint-badge {
  grid-column: 2 / 3;
}
#clock-badge {
  grid-column: 3 / 4;
}
.actions .badge {
  justify-self: stretch;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Segmented difficulty switch occupies its own full row */
.actions .segmented {
  grid-column: 1 / -1;
  justify-self: start;
}
.actions button,
.actions select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2d3352; /* slightly lighter */
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 80ms ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
  font-size: clamp(12px, 1.8vmin, 16px);
}
.actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.actions button:hover,
.actions select:hover {
  background: var(--panel-2);
  transform: translateY(-0.5px);
}
.badge {
  margin-left: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #364066; /* slightly lighter */
  color: var(--text);
  font-size: 14px;
}
.badge.danger {
  background: rgba(255, 0, 0, 0.08);
  border-color: rgba(255, 0, 0, 0.35);
}
.actions select {
  appearance: none;
  -webkit-appearance: none;
}
.segmented {
  display: inline-flex;
  align-items: stretch;
  background: color-mix(in oklab, var(--panel) 94%, transparent);
  border: 1px solid #364066; /* slightly lighter */
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-width: 260px;
}
.segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  min-width: 86px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
  outline: none;
}
.segmented button + button {
  border-left: 1px solid #364066; /* slightly lighter */
}
.segmented button:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
/* active state consolidated later with stronger styling */
.segmented button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.actions button[aria-pressed='true'] {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Screen-reader only label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main {
  display: grid;
  place-items: start center;
}
.app {
  padding: var(--pad);
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: saturate(160%) blur(18px);
  transition:
    background 200ms ease,
    box-shadow 200ms ease;
  width: calc(var(--board-size) + 2 * var(--pad));
  max-width: calc(var(--board-size) + 2 * var(--pad));
  overflow-x: hidden;
}

/* Generation overlay */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}
.overlay.hidden {
  display: none;
}
.overlay-card {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2d3352; /* slightly lighter */
  padding: 16px 18px;
  border-radius: 14px;
  min-width: 260px;
  display: grid;
  justify-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.overlay .spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.overlay .overlay-text {
  opacity: 0.9;
}
.overlay .ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid #495279; /* slightly lighter */
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 80ms ease;
}
/* Match hover/active feel of other buttons */
.overlay .ghost:hover {
  background: var(--panel-2);
  transform: translateY(-0.5px);
}
.overlay .ghost:active {
  transform: scale(0.9);
}
.overlay .ghost:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.overlay .ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.numpad {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(clamp(44px, 6vmin, 72px), auto));
  gap: 8px;
}
.numpad button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2d3352; /* slightly lighter */
  padding: clamp(8px, 1.2vmin, 12px) 0;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 120ms ease,
    transform 80ms ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 2px rgba(0, 0, 0, 0.2);
  font-size: clamp(12px, 1.8vmin, 16px);
}
.numpad button:hover {
  background: var(--panel-2);
  transform: translateY(-0.5px);
}
.numpad button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.numpad button.muted {
  color: var(--muted);
}

.board .cell.selected {
  outline: 3px solid color-mix(in oklab, var(--success) 70%, transparent);
  outline-offset: -3px;
}
/* Ensure wrong-selected cells keep a warning outline instead of success */
.board .cell.mistake.selected {
  outline-color: color-mix(in oklab, var(--warning) 85%, transparent);
}

/* removed base .board block; merged into final override below */
/* merged into .board .cell below */
/* Stronger 3x3 vertical separators, but avoid doubling at the outer edge */
.board .cell:nth-child(3n):not(:nth-child(9n)) {
  border-right: var(--border-strong) solid var(--grid-strong);
}
/* Prevent thin+strong stacking on the outermost right column */
.board .cell:nth-child(9n) {
  border-right-width: 0;
}
/* Prevent thin+strong stacking on the outermost left column */
.board .cell:nth-child(9n + 1) {
  border-left-width: 0;
}
/* removed commented-out first-column separator experiment */
/* merged into the later .board .cell input rule (bottom-most wins) */

.board .cell input[readonly] {
  color: var(--muted);
}
.board .cell.invalid input {
  color: var(--danger);
  font-weight: 700;
}
.board .cell.mistake input {
  color: var(--danger);
  font-weight: 800;
}
.board .cell.mistake {
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--warning) 80%, transparent) !important;
}
.board .cell.mistake-flash {
  animation: mistakeFlash 260ms ease;
}
@keyframes mistakeFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
}
.board .cell.prefill input {
  color: var(--text);
  font-weight: 600;
}
.board .cell.given input {
  color: var(--primary);
  font-weight: 600;
}

.status {
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(12px, 1.8vmin, 15px);
}

.board .cell.value-pulse {
  animation: valuePulse 180ms ease;
}
@keyframes valuePulse {
  0% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

.board .cell.hl-rc {
  background: color-mix(in oklab, var(--panel-2) 85%, transparent);
}
.board .cell.hl-same {
  box-shadow: inset 0 0 0 2px var(--success);
}
/* Responsive tweaks for narrow viewports */
/* merged into a single @media (max-width: 640px) block later */

/* Safe-area and input sizing fixes for small devices */
:root {
  /* ensure sensible base system font for numbers */
  --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    system-ui, 'Segoe UI Emoji';
}

/* removed dangling selector list and redundant font-size; merged safe-area into body */

/* Mobile tweaks: reduce segmented min width and button padding */
/* merged into a single @media (max-width: 640px) block later */

/* Final overrides to ensure inputs fit cleanly inside cells on narrow viewports */
/* merged padding/overflow into the later .board .cell block */

.board .cell input {
  box-sizing: border-box;
  /* slightly larger inset and slightly smaller font to avoid clipping on narrow devices */
  width: calc(var(--cell-size) - 12px);
  height: calc(var(--cell-size) - 12px);
  padding: 0;
  margin: 0;
  line-height: calc(var(--cell-size) - 12px);
  text-align: center;
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: calc((var(--cell-size) - 12px) * 0.6);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  border: 0;
  background: transparent;
  caret-color: var(--primary);
}

/* Keep givens slightly smaller so they never clash with separators */
.board .cell.prefill input,
.board .cell.given input {
  font-size: calc((var(--cell-size) - 10px) * 0.58);
}
/* Force board to never exceed available viewport (accounts for safe-area + padding) */
/* consolidated into the final .board override (bottom-most wins) */

/* Stronger, higher-contrast 3x3 horizontal separators */
.board .cell::after {
  /* expand slightly so it visually connects with outer border */
  left: -2px;
  right: -2px;
  bottom: -1px;
  height: 0;
  border-bottom: var(--border-thin) solid var(--grid);
  box-shadow: none;
  transform: translateY(0);
}

/* Ensure separators render above cell backgrounds but below any selection outlines */
/* merged position/z-index into the later .board .cell block */

/* ===== layout fixes: center board and avoid scrollbar overlap ===== */
html {
  scrollbar-gutter: auto;
}

.app {
  padding-left: var(--pad);
  padding-right: var(--pad);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100vw - 2 * var(--pad));
}

/* removed intermediate board sizing; final override below applies */

@media (min-width: 800px) {
  .app {
    /* make desktop padding symmetric to avoid left-shifted appearance */
    padding-left: calc(var(--pad) + 18px);
    padding-right: calc(var(--pad) + 18px);
  }
}

/* Footer: reduce legal/copyright font */
.site-footer {
  font-size: clamp(11px, 1.6vmin, 13px);
  text-align: center;
  padding: 12px var(--pad);
  color: var(--muted);
}

/* Small mobile safety */
@media (max-width: 420px) {
  :root {
    --pad: 8px;
    --cell-size: clamp(20px, calc((100vw - (2 * var(--pad))) / 9), 56px);
    --board-size: calc(9 * var(--cell-size));
  }
  .app {
    padding-left: calc(var(--pad) + env(safe-area-inset-left));
    padding-right: calc(var(--pad) + env(safe-area-inset-right));
  }
}

/* final override to force equal column widths and square cells */
.board {
  /* merged base visuals */
  display: grid;
  gap: 0;
  box-sizing: border-box;
  border: var(--border-strong) solid var(--grid-strong);
  background: var(--panel);
  border-radius: 10px;
  overflow: hidden;
  contain: paint; /* isolate grid painting to reduce hairlines */

  /* sizing/layout overrides */
  grid-template-columns: repeat(9, 1fr) !important;
  width: 100% !important; /* match container content width so board aligns with actions/numpad */
  max-width: 100% !important;
  margin: 0 auto !important;
}

.board .cell {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border: var(--border-thin) solid var(--grid);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* merged into the single consolidated mobile block below */

/* Stronger, high-contrast selected state for segmented buttons */
.segmented button.active,
.segmented button[aria-pressed='true'] {
  background: var(--primary);
  color: color-mix(in oklab, white 92%, var(--primary) 8%);
  border-color: color-mix(in oklab, var(--primary) 60%, black 40%);
  box-shadow:
    inset 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.18);
}

/* --- Mobile fix: difficulty segmented control --- */
@media (max-width: 640px) {
  /* variables and sizing */
  :root {
    --pad: 10px;
    /* compute available space: viewport minus safe-area insets, padding and outer board borders */
    --available-width: calc(
      100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - (2 * var(--pad)) -
        (2 * var(--border-outer)) - 8px
    );
    --cell-size: clamp(24px, calc(var(--available-width) / 9), 60px);
    --board-size: calc(9 * var(--cell-size));
  }

  /* layout containers */
  .site-header,
  .site-footer,
  .app {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .site-header {
    margin: 8px auto;
    row-gap: 8px;
  }

  .site-header h1 {
    font-size: clamp(16px, 5vmin, 20px);
  }

  /* actions grid */
  .actions {
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  .actions .segmented {
    min-width: 180px;
    grid-column: 1 / -1;
  }

  /* segmented control */
  .actions .segmented,
  .segmented {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* prevents the active pill from bulging out */
    border-radius: 12px; /* keep nice corners on the group */
  }

  .segmented button {
    flex: 1 1 0;
    min-width: 0; /* allow shrink */
    padding: 8px 12px;
    border-radius: 0; /* no inner rounding - outer group handles it */
  }

  .segmented button + button {
    border-left: 1px solid #364066; /* slightly lighter */
  }

  /* keep active state neat; no outward glow that shifts layout */
  .segmented button.active,
  .segmented button[aria-pressed='true'] {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  }

  /* numpad layout */
  .numpad {
    margin-top: 8px;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 6px;
  }

  .numpad button {
    padding: 8px 0;
    font-size: clamp(12px, 2.2vmin, 14px);
  }

  /* compact action buttons */
  .actions button,
  .actions select {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* removed commented-out horizontal separator experiment */

.actions button:active,
.numpad button:active {
  transform: scale(0.9);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

.board .cell.invalid input {
  animation: shake 0.3s ease-in-out;
}

.segmented button:active {
  transform: translateY(0.5px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

.board .cell input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.board .cell[data-row='2'],
.board .cell[data-row='5'] {
  border-bottom: var(--border-strong) solid var(--grid-strong);
}