/* DIGIGMA Sudoku play shell — lot 5.
   Tokens + first-class boards. Loaded only by /sudoku/.
   Do not link from Killer or Binary. Do not assign a hex to --washi. */

/* DS CSS is linked from index.html so files load in parallel. Fonts come from site.css. */

html.is-play.ds-root,
html.is-play.ds-root[data-ds-theme="light"] {
  color-scheme: light;
  --ink-button: var(--ivory);
  --note: var(--board-note);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
  --accent: var(--indigo);
  --accent-soft: var(--indigo-soft);
  --accent-hover: var(--indigo-hover);
  --gold: var(--cta);
  --gold-fill: var(--cta);
  --gold-border: var(--cta);
  --gold-hover: var(--cta-hover);
  --gold-soft: color-mix(in srgb, var(--cta) 18%, var(--paper-bright));
  --gold-wash: color-mix(in srgb, var(--cta) 14%, var(--paper));
  --gold-active: color-mix(in srgb, var(--cta) 22%, var(--paper-bright));
  --gold-hint: var(--board-cell-sel);
  --gold-hint-ring: var(--cta);
  --entry: var(--board-entry);
  --same: var(--board-cell-same);
  --ok: var(--matcha);
  --hint-witness: var(--board-cell-same);
  --hint-place: var(--board-cell-sel);
  --hint-unit: var(--board-cell-hi);
  --bad: var(--board-digit-bad);
  --vermillion: var(--board-digit-bad);
  --cell: var(--board-cell);
  --btn: var(--paper-bright);
  --btn-hover: var(--paper-wash);
  --btn-hover-line: var(--indigo);
  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --given: var(--board-given);
  --box: var(--board-line-strong);
  --sel: var(--indigo);
  --sel-bg: var(--board-cell-sel);
  --hi: var(--board-cell-hi);
  --shadow: var(--shadow-card);
}

html.is-play.ds-root[data-ds-theme="dark"] {
  color-scheme: dark;
  --ink-button: var(--ivory);
  --note: var(--board-note);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
  --accent: var(--indigo);
  --accent-soft: var(--indigo-soft);
  --accent-hover: var(--indigo-hover);
  --gold: var(--cta);
  --gold-fill: var(--cta);
  --gold-border: var(--cta);
  --gold-hover: var(--cta-hover);
  --gold-soft: color-mix(in srgb, var(--cta) 18%, var(--paper-bright));
  --gold-wash: color-mix(in srgb, var(--cta) 14%, var(--paper));
  --gold-active: color-mix(in srgb, var(--cta) 22%, var(--paper-bright));
  --gold-hint: var(--board-cell-sel);
  --gold-hint-ring: var(--cta);
  --entry: var(--board-entry);
  --same: var(--board-cell-same);
  --ok: var(--matcha);
  --hint-witness: var(--board-cell-same);
  --hint-place: var(--board-cell-sel);
  --hint-unit: var(--board-cell-hi);
  --bad: var(--board-digit-bad);
  --vermillion: var(--board-digit-bad);
  --cell: var(--board-cell);
  --btn: var(--paper-bright);
  --btn-hover: var(--paper-bright);
  --btn-hover-line: var(--indigo);
  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --given: var(--board-given);
  --box: var(--board-line-strong);
  --sel: var(--indigo);
  --sel-bg: var(--board-cell-sel);
  --hi: var(--board-cell-hi);
  --shadow: var(--shadow-card);
}

html.is-play body.ds-sudoku {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  background-color: var(--paper);
  background-image: none;
}

body.ds-sudoku .app {
  width: min(1040px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

body.ds-sudoku .board {
  background: var(--board-cell);
  background-image: none;
  border: 2px solid var(--board-frame);
  border-radius: var(--radius-board);
  box-shadow: none;
  aspect-ratio: 1;
}

body.ds-sudoku .cell {
  background: var(--board-cell);
  background-image: none;
  color: var(--board-given);
  font-family: var(--font-digits);
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  font-weight: var(--weight-entry);
  border-right: 1px solid var(--board-line);
  border-bottom: 1px solid var(--board-line);
}

body.ds-sudoku .cell:nth-child(3n) { border-right: 2px solid var(--board-line-strong); }
body.ds-sudoku .cell:nth-child(9n) { border-right: none; }
body.ds-sudoku .cell:nth-child(n + 19):nth-child(-n + 27),
body.ds-sudoku .cell:nth-child(n + 46):nth-child(-n + 54) {
  border-bottom: 2px solid var(--board-line-strong);
}
body.ds-sudoku .cell:nth-child(n + 73) { border-bottom: none; }

body.ds-sudoku .cell.given {
  color: var(--board-given);
  font-weight: var(--weight-given);
}
body.ds-sudoku .cell.given.hi,
body.ds-sudoku .cell.given.same,
body.ds-sudoku .cell.given.sel,
body.ds-sudoku .cell.given.sel.same,
body.ds-sudoku .cell.given.hint-unit,
body.ds-sudoku .cell.given.hint-witness,
body.ds-sudoku .cell.given.hint-place,
body.ds-sudoku .cell.given.bad,
body.ds-sudoku .cell.given.conflict,
body.ds-sudoku .cell.given.mismatch {
  color: var(--board-given);
  font-weight: var(--weight-given);
}

body.ds-sudoku .cell.entry,
body.ds-sudoku .cell.entry.hi,
body.ds-sudoku .cell.entry.same,
body.ds-sudoku .cell.entry.sel,
body.ds-sudoku .cell.entry.sel.same,
body.ds-sudoku .cell.entry.hint-unit,
body.ds-sudoku .cell.entry.hint-witness,
body.ds-sudoku .cell.entry.hint-place {
  color: var(--board-entry);
  /* Francis 2026-0918 item 8: use the shared --weight-entry token like every
     other grid game instead of a hardcoded literal (same value, consistent
     authoring so a future token change doesn't silently miss Sudoku). */
  font-weight: var(--weight-entry);
}

body.ds-sudoku .cell.hi { background-color: var(--board-cell-hi); }
body.ds-sudoku .cell.same-note {
  background-color: var(--board-cell-same-note, var(--board-cell-same));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--play-ring-same, #5F8F3E) 55%, transparent);
  border-radius: 5px;
}
body.ds-sudoku .cell.same {
  background-color: var(--board-cell-same);
  box-shadow: inset 0 0 0 2px var(--play-ring-same, #5F8F3E);
  border-radius: 5px;
  z-index: 1;
}
body.ds-sudoku .cell.hint-unit { background-color: var(--board-cell-hi); }
body.ds-sudoku .cell.hint-witness { background-color: var(--board-cell-same); }
body.ds-sudoku .cell.hint-place {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2px var(--indigo);
}

body.ds-sudoku .cell.sel {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  border-radius: 5px;
  z-index: 2;
}

body.ds-sudoku .cell.sel.same {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
}

body.ds-sudoku .notes span.is-focus {
  color: var(--board-digit-ok);
  font-weight: 700;
  background: color-mix(in srgb, var(--matcha) 32%, transparent);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--play-ring-same, #5F8F3E) 50%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  body.ds-sudoku .cell:hover:not(.sel) { background-color: var(--board-cell-hover); }
}

body.ds-sudoku .cell:focus-visible {
  outline: none;
  z-index: 3;
  box-shadow: inset 0 0 0 2px var(--indigo), 0 0 0 2px var(--paper);
}

body.ds-sudoku .cell.bad,
body.ds-sudoku .cell.conflict,
body.ds-sudoku .cell.mismatch {
  background-color: var(--board-cell-bad);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--board-digit-bad) 16%, transparent) 3px,
    color-mix(in srgb, var(--board-digit-bad) 16%, transparent) 5px
  );
  color: var(--board-digit-bad);
  font-weight: var(--weight-given);
  box-shadow: inset 0 -3px 0 0 var(--board-digit-bad);
}
body.ds-sudoku .cell.bad.sel,
body.ds-sudoku .cell.conflict.sel,
body.ds-sudoku .cell.mismatch.sel {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A), inset 0 -3px 0 0 var(--board-digit-bad);
}

/* Reveal keeps the previous wrong entry secondary to the solution.
   Explicit spacing also separates neighboring strikes on narrow phone cells. */
html.is-play body.ds-sudoku .reveal-values {
  gap: 2px;
}

html.is-play body.ds-sudoku .reveal-wrong {
  margin-inline-end: 0;
  font-size: max(12px, .82em);
  font-weight: 600;
  color: color-mix(in srgb, var(--board-digit-bad) 85%, var(--ink));
  flex-shrink: 0;
}

html.is-play body.ds-sudoku .reveal-wrong::after {
  height: 1.75px;
}

body.ds-sudoku .notes {
  color: var(--board-note);
  font-family: var(--font-digits);
  font-size: 0.52em;
  font-weight: 500;
  overflow: hidden;
}

@media (max-width: 760px) {
  body.ds-sudoku .notes { font-size: 0.64em; }
}

body.ds-sudoku .clock,
body.ds-sudoku .clock #timer {
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums;
  color: var(--board-clock);
}

body.ds-sudoku .clock #timer {
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
}

body.ds-sudoku .clock #pause,
body.ds-sudoku .toolbar button,
body.ds-sudoku .toggles button,
body.ds-sudoku .actions button,
body.ds-sudoku .play-secondary button,
body.ds-sudoku .keypad button,
body.ds-sudoku .start-card button,
body.ds-sudoku .win-card button,
body.ds-sudoku .pause-card button {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

body.ds-sudoku .keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.ds-sudoku .keypad button {
  background: var(--board-key);
  border: 1px solid var(--board-key-line);
  color: var(--ink);
  font-family: var(--font-digits);
  font-size: 1.15rem;
  box-shadow: var(--shadow-1);
}

body.ds-sudoku .keypad button:hover { border-color: var(--indigo); }

body.ds-sudoku button.primary,
body.ds-sudoku .start-card button.primary,
body.ds-sudoku .start-card .primary,
body.ds-sudoku .win-card button.primary,
body.ds-sudoku #newGame.primary,
body.ds-sudoku .play-secondary #newGame.primary,
body.ds-sudoku #startGateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);
  border: 1px solid var(--cta);
  color: var(--cta-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  width: auto;
  min-width: 132px;
  min-height: 44px;
  padding: 10px 22px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

body.ds-sudoku .start-card::before {
  background: var(--cta);
}

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

body.ds-sudoku .toggles .check {
  grid-column: 1 / -1;
}

body.ds-sudoku #pause {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  color: var(--ink);
  min-width: 88px;
  padding: 8px 16px;
}

body.ds-sudoku button.active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--cta-ink);
}

body.ds-sudoku .pill,
body.ds-sudoku .play-mode-badge {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  color: var(--ink);
}

body.ds-sudoku .start-gate {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

body.ds-sudoku .start-card,
body.ds-sudoku .win-card,
body.ds-sudoku .pause-card {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 22px;
  color: var(--ink);
}

body.ds-sudoku .start-card h2,
body.ds-sudoku .win-card h2,
body.ds-sudoku .pause-card h2 {
  font-family: var(--font-display);
  color: var(--ink);
}

body.ds-sudoku .mode-btn.is-on {
  color: var(--cta-ink);
  border-bottom-color: var(--cta);
}

body.ds-sudoku .toolbar select,
body.ds-sudoku .toolbar input {
  min-height: 44px;
  background: var(--paper-bright);
  color: var(--ink);
  border: 1px solid var(--line);
}

body.ds-sudoku .footer-brand .mark { display: none; }

body.ds-sudoku .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

body.ds-sudoku .footer-brand .ds-logo-word {
  display: block;
  line-height: 1;
}

body.ds-sudoku .footer-brand .ds-logo-mark,
body.ds-sudoku .footer-brand .ds-logo-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 26%;
  background: none;
  object-fit: contain;
  display: block;
}



body.ds-sudoku :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Tablets retain a usable 3×3 pad beside the board in both orientations. */
@media (min-width: 761px) and (min-height: 501px) {
  body.ds-sudoku .play {
    display: grid !important;
    grid-template-columns: minmax(0, 540px) minmax(190px, 260px);
    gap: 20px;
  }
  body.ds-sudoku .side { display: flex !important; min-width: 0; }
  body.ds-sudoku .board-wrap { width: 100%; max-width: 540px; }
  body.ds-sudoku .keypad button { min-height: 52px; }
}

@media (max-width: 760px) {
  body.ds-sudoku .app {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 0 28px;
  }
  /* play.css only orders clock/board/keypad. Side children otherwise stay at 0. */
  body.ds-sudoku .clock { order: 0 !important; }
  body.ds-sudoku .board-wrap { order: 1 !important; }
  body.ds-sudoku .keypad { order: 2 !important; }
  body.ds-sudoku .keypad button { min-height: 52px; }
  body.ds-sudoku .toggles,
  body.ds-sudoku .actions,
  body.ds-sudoku .check-wrap,
  body.ds-sudoku .play-secondary { order: 3 !important; }
  body.ds-sudoku .play-more { order: 4 !important; }
  body.ds-sudoku .hint-why,
  body.ds-sudoku .status { order: 5 !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
  html.is-play body.ds-sudoku { overflow: hidden; }
  body.ds-sudoku .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    padding: 4px 10px 8px;
    overflow: hidden;
  }
  body.ds-sudoku .play-context,
  body.ds-sudoku .meta,
  body.ds-sudoku .board-legend { display: none; }
  body.ds-sudoku .toolbar {
    flex: 0 0 auto;
    margin-bottom: 4px;
    gap: 6px;
  }
  body.ds-sudoku .play {
    display: grid !important;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: unset !important;
    grid-template-columns: minmax(0, 1fr) minmax(148px, 34vw);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  body.ds-sudoku .side {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: auto;
  }
  body.ds-sudoku .board-wrap,
  body.ds-sudoku .clock,
  body.ds-sudoku .keypad,
  body.ds-sudoku .play-secondary { order: unset !important; }
  body.ds-sudoku .board-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    max-width: 100% !important;
    height: 100%;
    max-height: 100%;
    aspect-ratio: unset;
  }
  body.ds-sudoku .board {
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1;
  }
  body.ds-sudoku .keypad { width: 100% !important; }
  body.ds-sudoku .keypad button { min-height: 44px; }
  body.ds-sudoku .clock { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.ds-sudoku .cell,
  body.ds-sudoku .keypad button {
    transition: none;
  }
}