/* DIGIGMA Binary Puzzle play shell — lot 7.
   Tokens + first-class boards. Loaded only by /binary-puzzle/.
   Do not link from Sudoku or Killer. 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(--game-binary, #2E8B7A);
  --accent-soft: color-mix(in srgb, var(--game-binary, #2E8B7A) 16%, var(--paper));
  --accent-hover: #246E61;
  --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: #986300;
  --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(--ink-strong);
  --bin-given: #201A12;
  --bin-entry: #986300;
  --board-bin-0: var(--bin-given);
  --board-bin-1: var(--bin-entry);
  --weight-given: 800;
  --weight-entry: 600;
  --box: var(--board-line-strong);
  --sel: var(--play-ring-active, #19D65A);
  --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(--game-binary, #2E8B7A);
  --accent-soft: color-mix(in srgb, var(--game-binary, #2E8B7A) 16%, var(--paper));
  --accent-hover: #246E61;
  --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: #E0C078;
  --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(--ink-strong);
  --bin-given: #F7F0E2;
  --bin-entry: #E0C078;
  --board-bin-0: var(--bin-given);
  --board-bin-1: var(--bin-entry);
  --weight-given: 800;
  --weight-entry: 600;
  --box: var(--board-line-strong);
  --sel: var(--play-ring-active, #3EEA72);
  --sel-bg: var(--board-cell-sel);
  --hi: var(--board-cell-hi);
  --shadow: var(--shadow-card);
}

html.is-play body.ds-binary {
  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-binary .app {
  width: min(1040px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

body.ds-binary .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-binary .cell,
body.ds-binary .board .cell {
  background: var(--board-cell);
  background-image: none;
  color: var(--bin-given);
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums;
  font-feature-settings: "zero" 0, "tnum" 0, "ss01" 0;
  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-binary .cell.given,
body.ds-binary .cell.given.is-bin-0,
body.ds-binary .cell.given.is-bin-1,
body.ds-binary .cell.given.hi,
body.ds-binary .cell.given.sel,
body.ds-binary .cell.given.hint-unit,
body.ds-binary .cell.given.hint-witness,
body.ds-binary .cell.given.hint-place,
body.ds-binary .cell.given.rule-unbalance,
body.ds-binary .cell.given.rule-triple,
body.ds-binary .cell.given.bad,
body.ds-binary .cell.given.conflict,
body.ds-binary .cell.given.mismatch {
  color: var(--bin-given);
  font-weight: var(--weight-given);
}

body.ds-binary .cell.entry,
body.ds-binary .cell.entry.is-bin-0,
body.ds-binary .cell.entry.is-bin-1,
body.ds-binary .cell.entry.hi,
body.ds-binary .cell.entry.sel,
body.ds-binary .cell.entry.hint-unit,
body.ds-binary .cell.entry.hint-witness,
body.ds-binary .cell.entry.hint-place,
body.ds-binary .cell.entry.rule-unbalance,
body.ds-binary .cell.entry.rule-triple {
  color: var(--bin-entry);
  font-weight: var(--weight-entry);
}

body.ds-binary .cell {
  position: relative;
}

body.ds-binary .cell.is-bin-0,
body.ds-binary .cell.is-bin-1 {
  letter-spacing: 0;
}

body.ds-binary .cell.is-bin-1::after {
  content: none;
}

body.ds-binary .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-binary .cell.hi { background-color: var(--board-cell); }
body.ds-binary .cell.hint-unit { background-color: var(--board-cell-hi); }
body.ds-binary .cell.hint-witness { background-color: var(--board-cell-same); }
body.ds-binary .cell.hint-place {
  background-color: var(--board-cell-sel);
  box-shadow: inset 0 0 0 2px var(--indigo);
}

/* Quiet: given-dense lines often trip unbalance. Slight wash only; keep given/user ink. */
body.ds-binary .cell.rule-unbalance,
body.ds-binary .cell.hi.rule-unbalance,
body.ds-binary .cell.given.rule-unbalance,
body.ds-binary .cell.entry.rule-unbalance {
  background-color: color-mix(in srgb, var(--vermillon) 6%, var(--board-cell));
  box-shadow: none;
}

body.ds-binary .cell.sel,
body.ds-binary .cell.sel.is-bin-0,
body.ds-binary .cell.sel.is-bin-1,
body.ds-binary .cell.rule-triple.sel,
body.ds-binary .cell.rule-unbalance.sel,
body.ds-binary .cell.hint-place.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: 3;
}

@media (hover: hover) and (pointer: fine) {
  body.ds-binary .cell:hover:not(.sel) { background-color: var(--board-cell-hover); }
  body.ds-binary .cell.rule-unbalance:hover:not(.sel) {
    background-color: color-mix(in srgb, var(--vermillon) 8%, var(--board-cell));
  }
  body.ds-binary .cell.rule-triple:hover:not(.sel) {
    background-color: var(--board-bin-warn);
  }
}

body.ds-binary .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-binary .cell.bad,
body.ds-binary .cell.conflict,
body.ds-binary .cell.mismatch,
body.ds-binary .cell.bad.rule-unbalance,
body.ds-binary .cell.conflict.rule-unbalance,
body.ds-binary .cell.bad.rule-triple,
body.ds-binary .cell.conflict.rule-triple {
  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-binary .cell.sel.bad,
body.ds-binary .cell.sel.conflict,
body.ds-binary .cell.sel.mismatch,
body.ds-binary .cell.sel.bad.rule-triple,
body.ds-binary .cell.sel.conflict.rule-triple,
body.ds-binary .cell.sel.bad.rule-unbalance,
body.ds-binary .cell.sel.conflict.rule-unbalance {
  background-color: var(--board-cell-sel);
  color: var(--board-digit-bad);
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A), inset 0 -3px 0 0 var(--board-digit-bad);
}

body.ds-binary .notes {
  position: absolute;
  top: 2px;
  right: 3px;
  left: auto;
  bottom: auto;
  display: block;
  width: auto;
  height: auto;
  color: var(--board-note);
  font-family: var(--font-digits);
  font-size: clamp(0.72rem, 3.1vw, 0.92rem);
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

body.ds-binary .cell.is-draft {
  font-weight: 400;
}

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

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

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

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

body.ds-binary .keypad button {
  background: var(--board-key);
  border: 1px solid var(--board-key-line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums;
  font-feature-settings: "zero" 0, "tnum" 0, "ss01" 0;
  font-size: 1.15rem;
  box-shadow: var(--shadow-1);
}

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

body.ds-binary .clear-all-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
}

body.ds-binary .clear-all-dialog[hidden] { display: none !important; }

body.ds-binary .clear-all-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sumi, #2B2419) 42%, transparent);
}

body.ds-binary .clear-all-card {
  position: relative;
  z-index: 1;
  width: min(400px, calc(100% - 32px));
  margin: 18vh auto 0;
  padding: 22px 20px 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

body.ds-binary .clear-all-card h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}

body.ds-binary .clear-all-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

body.ds-binary .clear-all-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.ds-binary .clear-all-actions button {
  min-height: 44px;
  min-width: 88px;
  padding: 8px 16px;
}

body.ds-binary .clear-all-actions .danger {
  background: color-mix(in srgb, var(--vermillon) 16%, var(--paper-bright));
  border: 1px solid var(--vermillon);
  color: var(--ink);
  font-weight: 600;
}

body.ds-binary .clear-all-actions .danger:hover {
  background: color-mix(in srgb, var(--vermillon) 24%, var(--paper-bright));
}

body.ds-binary button.primary,
body.ds-binary .start-card button.primary,
body.ds-binary .start-card .primary,
body.ds-binary .win-card button.primary,
body.ds-binary #newGame.primary,
body.ds-binary .play-secondary #newGame.primary,
body.ds-binary #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-binary .start-card::before {
  background: var(--cta);
}

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

body.ds-binary #confirmDrafts {
  grid-column: 1 / -1;
  font-weight: 500;
}

body.ds-binary #confirmDrafts:disabled {
  opacity: 0.45;
  cursor: default;
}

body.ds-binary .play-secondary {
  display: block;
}

body.ds-binary .play-secondary .more-btn {
  width: 100%;
  font-weight: 500;
}

body.ds-binary .play-more:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding: 10px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

body.ds-binary .toggles .check {
  grid-column: 1 / -1;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

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

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

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

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

body.ds-binary .start-card,
body.ds-binary .win-card,
body.ds-binary .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-binary .start-card h2,
body.ds-binary .win-card h2,
body.ds-binary .pause-card h2 {
  font-family: var(--font-display);
  color: var(--ink);
}

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

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

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

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

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

body.ds-binary .footer-brand .ds-logo-mark,
body.ds-binary .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-binary :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 760px) {
  body.ds-binary .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-binary .clock { order: 0 !important; }
  body.ds-binary .board-wrap { order: 1 !important; }
  body.ds-binary .keypad { order: 2 !important; }
  body.ds-binary .toggles,
  body.ds-binary .actions,
  body.ds-binary .check-wrap,
  body.ds-binary .play-secondary { order: 3 !important; }
  body.ds-binary .play-more { order: 4 !important; }
  body.ds-binary .hint-why,
  body.ds-binary .status { order: 5 !important; }
  body.ds-binary .keypad {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.is-play body.ds-binary .cell .notes {
    top: 1px;
    right: 2px;
    font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  html.is-play body.ds-binary { overflow: hidden; }
  body.ds-binary .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    padding: 4px 10px 8px;
    overflow: hidden;
  }
  body.ds-binary .play-context,
  body.ds-binary .meta,
  body.ds-binary .board-legend { display: none; }
  body.ds-binary .toolbar {
    flex: 0 0 auto;
    margin-bottom: 4px;
    gap: 6px;
  }
  body.ds-binary .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-binary .side {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: auto;
  }
  body.ds-binary .board-wrap,
  body.ds-binary .clock,
  body.ds-binary .keypad,
  body.ds-binary .play-secondary { order: unset !important; }
  body.ds-binary .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-binary .board {
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1;
  }
  body.ds-binary .keypad { width: 100% !important; }
  body.ds-binary .keypad button { min-height: 44px; }
  body.ds-binary .clock { font-size: 1.15rem; }
}

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