/* ── Game palette (mapped to albertcss tokens) ───────────────────────────── */

:root {
  --bg:            var(--silver);     /* page background */
  --surface:       var(--bodyBg);     /* board / cards */
  --border-light:  var(--grey100);    /* thin cell lines */
  --border-box:    var(--grey700);    /* 3×3 box dividers */
  --border-outer:  var(--grey900);    /* board outer edge */

  /* Derived tints (primary #005b99 blended toward white) */
  --cell-peer:     #d9e7f0;   /* same row/col/box — ~85% white */
  --cell-selected: #b3cee0;   /* selected cell    — ~70% white */
  /* warn #695802 blended toward white */
  --cell-same-num: #edebe1;   /* same digit highlight */
  /* red #b60202 blended toward white */
  --cell-conflict: #f6e1e1;   /* conflict */

  --num-given:    var(--grey900);   /* clue numbers */
  --num-user:     var(--primary);   /* player numbers */
  --num-conflict: var(--red);       /* conflict numbers */
  --num-note:     var(--grey500);   /* pencil marks */

  --primary-hover: var(--primaryActive);
  --btn-bg:        var(--bodyBg);
  --btn-border:    var(--grey100);
  --btn-hover:     #d9e7f0;
  --btn-active:    var(--primary);

  --focus-shadow: var(--focusShadow);

  --cell-size:   3.5rem;                       /* 56px */
  --radius:      0.25rem;                      /* 4px  — base */
  --radius-xs:   calc(var(--radius) * 0.5);   /* 2px  — board corners */
  --radius-sm:   var(--radius);                /* 4px  — tabs, numpad */
  --radius-lg:   calc(var(--radius) * 1.5);   /* 6px  — loading card */
  --radius-xl:   calc(var(--radius) * 2);     /* 8px  — modal */
  --radius-full: 50%;                          /* circles */
  --shadow:      0 0.125rem 0.75rem rgba(54, 54, 64, 0.12);
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #000;
    --surface: #222;

    --cell-peer:     #132130;
    --cell-selected: #1b3347;
    --cell-same-num: #272310;
    --cell-conflict: #391010;

    --btn-bg:    #2d2d31;
    --btn-hover: #132130;
    --shadow:    0 0.125rem 0.75rem rgba(0, 0, 0, 0.4);
  }
  .timer      { color: var(--grey300); }
  .action-btn { color: var(--grey300); }
  .modal-icon { background: #0e2b0e; color: var(--green); }
}

/* ── Base ────────────────────────────────────────────────────────────────── */

body {
  background: var(--bg);
  color: var(--num-given);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 1rem;
}

#app {
  width: 100%;
  max-width: 32.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.875rem;
  letter-spacing: -1px;
  color: var(--primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mistakes {
  font-size: 0.875rem;
  color: var(--grey600);
}

.timer {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--grey700);
}

/* ── Difficulty nav ──────────────────────────────────────────────────────── */

.difficulty-nav {
  display: flex;
  gap: 0.375rem;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.25rem;
  box-shadow: var(--shadow);
}

.diff-btn {
  flex: 1;
  padding: 0.5rem 0.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey600);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.diff-btn:hover  { background: var(--btn-hover); color: var(--primary); }
.diff-btn.active { background: var(--primary); color: #fff; font-weight: 600; }

/* ── Game area ───────────────────────────────────────────────────────────── */

.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── Board ───────────────────────────────────────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: repeat(9, var(--cell-size));
  grid-template-rows: repeat(9, var(--cell-size));
  border: 0.125rem solid var(--border-outer);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  user-select: none;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.08s;
}

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

.cell.box-right  { border-right: 0.125rem solid var(--border-box); }
.cell.box-bottom { border-bottom: 0.125rem solid var(--border-box); }

/* Cell states */
.cell.peer     { background: var(--cell-peer); }
.cell.same-num { background: var(--cell-same-num); }
.cell.selected { background: var(--cell-selected); }
.cell.conflict { background: var(--cell-conflict); }

/* Value */
.cell-value {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  display: none;
}

.cell.given       .cell-value { color: var(--num-given); font-weight: 700; }
.cell:not(.given) .cell-value { color: var(--num-user); }
.cell.conflict    .cell-value { color: var(--num-conflict); }
.cell.has-value   .cell-value { display: block; }

/* Notes */
.cell-notes {
  position: absolute;
  inset: 0.125rem;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.cell.has-notes .cell-notes { display: grid; }

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--num-note);
  line-height: 1;
}

/* ── Controls ────────────────────────────────────────────────────────────── */

.controls {
  width: 100%;
  max-width: calc(9 * var(--cell-size));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Action row */
.action-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.action-btn {
  flex: 1;
  max-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.375rem 0.5rem;
  background: var(--btn-bg);
  border: 0.125rem solid var(--btn-border);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey700);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.action-btn i { font-size: 1.25rem; }

.action-btn:hover {
  background: var(--btn-hover);
  color: var(--primary);
  border-color: var(--primary);
}

.action-btn.active {
  background: var(--btn-hover);
  color: var(--primary);
  border-color: var(--primary);
}

/* Numpad */
.numpad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.375rem;
}

.num-btn {
  aspect-ratio: 1;
  background: var(--btn-bg);
  border: 0.125rem solid var(--btn-border);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--num-given);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.1s, color 0.1s, transform 0.1s;
}

.num-btn:hover          { background: var(--btn-hover); color: var(--primary); }
.num-btn:active         { transform: scale(0.94); }
.num-btn.selected-num   { background: var(--cell-selected); color: var(--primary); border-color: var(--primary); }
.num-btn.completed      { opacity: 0.22; pointer-events: none; }

/* New game button */
.new-game-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.5rem var(--focus-shadow);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.new-game-btn:hover  { background: var(--primary-hover); box-shadow: 0 0.25rem 0.875rem var(--focus-shadow); }
.new-game-btn:active { transform: scale(0.98); }

/* ── Overlays ────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(54, 54, 64, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0.25rem);
  z-index: 100;
}

.overlay.hidden { display: none; }

/* Loading */
.loading-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
}

.loading-box p {
  font-size: 0.875rem;
  color: var(--grey600);
}

.spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.25rem solid var(--grey100);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

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

/* Victory modal */
.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 2.5rem 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.2);
  max-width: 22.5rem;
  width: 90%;
}

.modal-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: #c8e8c8;
  color: var(--green);
  border-radius: var(--radius-full);
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.modal h2 {
  font-size: 1.5rem;
  margin: 0;
}

.solve-stats {
  font-size: 0.875rem;
  color: var(--grey600);
  margin-bottom: 0.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 32.5rem) {
  :root { --cell-size: calc((100vw - 2.5rem) / 9); }

  body { padding: 0.75rem; }

  .cell-value  { font-size: 1.125rem; }
  .note        { font-size: 0.5rem; }
  .num-btn     { font-size: 1.125rem; }
  .modal       { padding: 2rem 1.75rem; }
}