:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #F5F3EE;
  --bg-board: #FFFFFF;
  --bg-subgrid-alt: #EDEAE3;
  --border-cell: #D9D4CB;
  --border-block: #2B2F38;
  --text-given: #1A1D24;
  --text-entered: #3B67B0;
  --text-pencil: #8A8F99;
  --accent: #D98E3C;
  --accent-soft: #F4E3CC;
  --accent-same-num: #E8D5A8;
  --error-fg: #B23A3A;
  --error-bg: #F7DADA;
  --success: #4F8A5B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-canvas: #14171C;
    --bg-board: #1B1F26;
    --bg-subgrid-alt: #20252E;
    --border-cell: #2E343F;
    --border-block: #E5E7EB;
    --text-given: #E8EAEE;
    --text-entered: #8AB4F8;
    --text-pencil: #6B7280;
    --accent: #E8A65A;
    --accent-soft: #3A2E1F;
    --accent-same-num: #4A3820;
    --error-fg: #F08A8A;
    --error-bg: #3A1F1F;
    --success: #7FB98A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #14171C;
  --bg-board: #1B1F26;
  --bg-subgrid-alt: #20252E;
  --border-cell: #2E343F;
  --border-block: #E5E7EB;
  --text-given: #E8EAEE;
  --text-entered: #8AB4F8;
  --text-pencil: #6B7280;
  --accent: #E8A65A;
  --accent-soft: #3A2E1F;
  --accent-same-num: #4A3820;
  --error-fg: #F08A8A;
  --error-bg: #3A1F1F;
  --success: #7FB98A;
}

:root {
  --font-body: Inter, Geist, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg-panel: color-mix(in srgb, var(--bg-board) 82%, var(--bg-subgrid-alt));
  --bg-button: color-mix(in srgb, var(--bg-subgrid-alt) 84%, var(--bg-board));
  --bg-button-hover: color-mix(in srgb, var(--accent-soft) 70%, var(--bg-board));
  --text-muted: color-mix(in srgb, var(--text-given) 54%, var(--text-pencil));
  --text-pencil-readable: color-mix(in srgb, var(--text-pencil) 45%, var(--border-block));
  --text-entered-contrast: color-mix(in srgb, var(--text-entered) 82%, var(--border-block));
  --ring-hover: color-mix(in srgb, var(--accent) 40%, transparent);
  --ring-selected: color-mix(in srgb, var(--accent) 18%, var(--bg-board));
  --success-bg: color-mix(in srgb, var(--success) 30%, var(--bg-board));
  --surface-line: color-mix(in srgb, var(--border-cell) 62%, transparent);
  --shadow-elevated: 0 24px 72px color-mix(in srgb, var(--border-block) 14%, transparent);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-soft) 36%, transparent), transparent 32%),
    linear-gradient(135deg, var(--bg-canvas), color-mix(in srgb, var(--bg-canvas) 76%, var(--bg-subgrid-alt)));
  color: var(--text-given);
  font-family: var(--font-body);
}

button,
select {
  font: inherit;
}

button {
  border: 1px solid var(--surface-line);
  border-radius: 14px;
  background: var(--bg-button);
  color: var(--text-given);
  cursor: pointer;
  font-weight: 600;
  touch-action: manipulation;
  transition: background 80ms linear, border-color 80ms linear, color 80ms linear, opacity 80ms linear;
}

button:focus-visible,
select:focus-visible,
.cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 40%;
}

.app-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 48px;
}

.hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  color: var(--text-given);
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  letter-spacing: -0.08em;
  line-height: 0.92;
}

.hero-copy {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.display-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.utility-toggle,
.control-group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 14px;
}

.button-icon {
  display: inline-grid;
  width: 1.35em;
  height: 1.35em;
  place-items: center;
  color: currentColor;
  font-weight: 700;
  line-height: 1;
}

.game-panel {
  border: 1px solid var(--surface-line);
  border-radius: 28px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-elevated);
  padding: 22px;
}

.status-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.status-bar > div,
.controls,
.number-pad {
  border: 1px solid var(--surface-line);
  border-radius: 18px;
  background: var(--bg-board);
}

.status-bar > div {
  padding: 14px;
}

.status-label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-pencil-readable);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-value,
select {
  color: var(--text-given);
  font-size: 1.08rem;
  font-weight: 650;
}

select {
  width: 100%;
  border: 0;
  background: transparent;
}

.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(240px, 320px);
  justify-content: center;
  align-items: start;
  gap: 22px;
}

.board-stack {
  display: grid;
  width: min(560px, 92vw);
  min-width: 0;
  gap: 14px;
  justify-self: center;
}

.board-wrap {
  width: min(560px, 92vw);
  min-width: 0;
  border-radius: 16px;
  background: var(--bg-board);
}

.sudoku-board {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid var(--border-block);
  border-radius: 12px;
  background: var(--bg-board);
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.cell {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-right: 1px solid var(--border-cell);
  border-bottom: 1px solid var(--border-cell);
  border-radius: 0;
  background: var(--bg-board);
  color: var(--text-pencil);
  cursor: pointer;
  font-size: clamp(1.18rem, 4.4vw, 2rem);
  font-weight: 400;
  line-height: 1;
  transition: background 80ms linear, color 80ms linear, box-shadow 80ms linear;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cell:nth-child(9n) {
  border-right: 0;
}

.cell:nth-last-child(-n + 9) {
  border-bottom: 0;
}

.cell:nth-child(3n):not(:nth-child(9n)) {
  border-right: 2px solid var(--border-block);
}

.cell.row-divider {
  border-bottom: 2px solid var(--border-block);
}

.cell.block-alt {
  background: var(--bg-subgrid-alt);
}

.cell.related {
  background: var(--accent-soft);
}

.cell.same-value {
  background: var(--accent-same-num);
}

.cell.selected {
  background: var(--ring-selected);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cell.fixed {
  color: var(--text-given);
  font-weight: 600;
}

.cell.entered {
  color: var(--text-entered);
  font-weight: 400;
}

.cell.related.entered,
.cell.same-value.entered,
.cell.selected.entered {
  color: var(--text-entered-contrast);
}

.cell.error {
  background: var(--error-bg);
  color: var(--error-fg);
  animation: errorShake 240ms linear;
}

.cell.error::after {
  content: "⚠";
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--error-fg);
  font-size: 0.64rem;
  line-height: 1;
}

html[data-cb="true"] .cell.error {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 5px,
    color-mix(in srgb, var(--error-fg) 22%, transparent) 5px,
    color-mix(in srgb, var(--error-fg) 22%, transparent) 8px
  );
}

html[data-cb="true"] .cell.selected {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 0 0 5px color-mix(in srgb, var(--accent) 34%, transparent);
}

.cell.just-filled {
  animation: cellFill 120ms ease-out;
}

.cell .digit {
  display: inline-block;
}

.notes-grid {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 10%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  color: var(--text-pencil-readable);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.notes-grid span {
  display: grid;
  place-items: center;
}

@media (hover: hover) {
  button:hover {
    border-color: var(--accent);
    background: var(--bg-button-hover);
    color: var(--accent);
  }

  .cell:hover {
    box-shadow: inset 0 0 0 1px var(--ring-hover);
  }

  .cell.selected:hover {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
}

.number-pad {
  display: grid;
  padding: 10px;
  gap: 8px;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.number-pad button {
  position: relative;
  min-height: 46px;
  padding: 12px 8px;
  color: var(--text-entered-contrast);
  font-size: 1.08rem;
}

.number-pad sup {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--text-pencil-readable);
  font-size: 0.64rem;
  font-weight: 600;
}

.number-value {
  display: inline-block;
}

.controls {
  display: grid;
  min-width: 0;
  padding: 14px;
  gap: 14px;
}

.control-group {
  display: grid;
  gap: 10px;
}

.control-group.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-group button.active,
.control-group button.toggle.active,
.utility-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

button.primary {
  border-color: var(--accent);
  background: var(--bg-button);
  color: var(--text-given);
}

.message {
  min-height: 56px;
  padding: 13px 14px;
  border: 1px solid var(--surface-line);
  border-radius: 14px;
  background: var(--bg-button);
  color: var(--text-muted);
  line-height: 1.45;
}

.message.success {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.message.error {
  border-color: var(--error-fg);
  background: var(--error-bg);
  color: var(--error-fg);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 32px;
  color: var(--text-muted);
}

.site-footer a,
.legal-page a {
  color: var(--text-entered-contrast);
}

.legal-page {
  max-width: 820px;
  color: var(--text-muted);
  line-height: 1.65;
}

.legal-page h1,
.legal-page h2 {
  color: var(--text-given);
}

.legal-page h1 {
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 7vw, 4rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.legal-page section {
  margin: 26px 0;
  padding: 18px;
  border: 1px solid var(--surface-line);
  border-radius: 18px;
  background: var(--bg-board);
}

.sudoku-board.complete .cell {
  animation: completeFlash 180ms ease-out both;
  animation-delay: calc(var(--cell-index) * 22ms);
}

@keyframes cellFill {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes errorShake {
  0%,
  100% {
    transform: translateX(0);
  }

  16% {
    transform: translateX(-8px);
  }

  32% {
    transform: translateX(8px);
  }

  48% {
    transform: translateX(-8px);
  }

  64% {
    transform: translateX(8px);
  }

  80% {
    transform: translateX(-8px);
  }
}

@keyframes completeFlash {
  0% {
    background: var(--bg-board);
  }

  45% {
    background: var(--success-bg);
  }

  100% {
    background: var(--bg-board);
  }
}

@media (max-width: 900px) {
  .board-layout {
    grid-template-columns: 1fr;
  }

  .controls {
    width: min(560px, 92vw);
    justify-self: center;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 18px, 620px);
    padding: 18px 0 28px;
  }

  .hero {
    align-items: start;
    flex-direction: column;
  }

  .display-toggles {
    justify-content: flex-start;
  }

  .game-panel {
    padding: 14px;
    border-radius: 20px;
  }

  .status-bar {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 14px;
  }

  .board-stack,
  .board-wrap,
  .controls {
    width: min(560px, 92vw);
  }

  .number-pad {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
  }

  .number-pad button {
    min-height: 40px;
    padding: 10px 4px;
  }

  .number-pad sup {
    top: 4px;
    right: 5px;
  }
}

@media (max-width: 460px) {
  .app-shell {
    width: calc(100% - 12px);
  }

  .game-panel {
    padding: 10px;
  }

  .controls {
    padding: 10px;
  }

  .control-group.compact {
    grid-template-columns: 1fr;
  }

  .cell {
    font-size: clamp(1rem, 5.2vw, 1.28rem);
  }

  .notes-grid {
    font-size: 10px;
    padding: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
  }
}