/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Logos Sudoku: LogosVox original. The board is a tray of nine boxes, each
 * cell a well; givens in ink, the player's digits in cobalt, notes as a small
 * 3×3 grid. Phones: board, tools, then a row of nine keys. Wide screens and
 * phones held sideways: the tools and a 3×3 pad beside the board.
 */
:root {
  --sd-entry: var(--lv-g-cobalt);
  --sd-accent: var(--lv-g-violet);
  --sd-peer: rgb(42 75 255 / 0.07);
  --sd-same: rgb(140 20 252 / 0.14);
  --sd-sel: rgb(140 20 252 / 0.16);
  --sd-bad: rgb(255 99 64 / 0.16);
  --sd-given: var(--lv-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sd-entry: #8fa1ff;
    --sd-peer: rgb(85 115 255 / 0.1);
    --sd-same: rgb(162 75 255 / 0.22);
    --sd-sel: rgb(162 75 255 / 0.26);
    --sd-bad: rgb(255 122 92 / 0.2);
  }
}
:root[data-theme="dark"] {
  --sd-entry: #8fa1ff;
  --sd-peer: rgb(85 115 255 / 0.1);
  --sd-same: rgb(162 75 255 / 0.22);
  --sd-sel: rgb(162 75 255 / 0.26);
  --sd-bad: rgb(255 122 92 / 0.2);
}

.sd-main {
  --size: min(calc(100vw - 24px), calc(var(--lv-avail) - 236px), 540px);
  gap: 8px;
  padding-top: 6px;
  padding-bottom: 2px;
}
.sd-stage { position: relative; flex: none; }
.sd-side { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* The tray: nine boxes, the gaps between them wider than between cells. */
.sd-board {
  --pad: clamp(4px, calc(var(--size) * 0.016), 9px);
  --gap: clamp(6px, calc(var(--size) * 0.02), 12px);
  --cgap: clamp(2px, calc(var(--size) * 0.005), 3px);
  width: var(--size);
  height: var(--size);
  padding: var(--pad);
  display: grid;
  grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.sd-box { display: grid; grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); gap: var(--cgap); }
.sd-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: clamp(5px, calc(var(--size) * 0.018), 9px);
  color: var(--sd-entry);
  font: 600 calc(var(--size) * 0.064) / 1 var(--lv-display);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* No colour transition: a tap restyles up to 81 cells, and 81 running transitions cost a slow phone
     half its frames. Highlights change at once, which also reads as quicker. */
}
.sd-cell:focus-visible { outline-offset: -2px; }
.sd-cell > span { position: relative; z-index: 1; transition: opacity var(--lv-base) var(--lv-ease); }
.sd-cell.is-given { color: var(--sd-given); font-weight: 700; }
.sd-cell.is-peer { background-color: var(--sd-peer); }
.sd-cell.is-same { background-color: var(--sd-same); }
.sd-cell.is-sel { background-color: var(--sd-sel); box-shadow: inset 0 0 0 2px var(--sd-accent); }
.sd-cell.is-bad { background-color: var(--sd-bad); }
.sd-cell.is-bad.is-entry { color: var(--lv-g-coral); }
.sd-cell.is-bad.is-sel { box-shadow: inset 0 0 0 2px var(--lv-g-coral); }

/* Notes: a small 3×3 grid of digits; the selected digit lights up in them. */
.sd-notes { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 100%; height: 100%; padding: 6%; }
.sd-notes i {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 calc(var(--size) * 0.025) / 1 var(--lv-font);
  font-style: normal;
  color: var(--lv-ink-muted);
}
.sd-board[data-focus="1"] [data-n="1"], .sd-board[data-focus="2"] [data-n="2"], .sd-board[data-focus="3"] [data-n="3"],
.sd-board[data-focus="4"] [data-n="4"], .sd-board[data-focus="5"] [data-n="5"], .sd-board[data-focus="6"] [data-n="6"],
.sd-board[data-focus="7"] [data-n="7"], .sd-board[data-focus="8"] [data-n="8"], .sd-board[data-focus="9"] [data-n="9"] {
  color: var(--sd-accent);
  font-weight: 800;
}

/* Moments: a digit pops in, a clash shakes, a full row/column/box sweeps, a solved board glows. */
.sd-pop { animation: lv-pop 200ms var(--lv-ease) both; }
.sd-cell[data-fx="shake"] > span { animation: lv-shake 320ms ease-in-out; }
.sd-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sd-accent);
  opacity: 0;
  pointer-events: none;
}
.sd-cell[data-fx="sweep"]::after { animation: sd-sweep 460ms var(--lv-ease) calc(var(--k) * 32ms) both; }
.sd-cell[data-fx="hint"]::after { background: var(--lv-g-gold); animation: sd-sweep 520ms var(--lv-ease) both; }
.sd-cell[data-fx="win"]::after { background: linear-gradient(135deg, var(--lv-g-violet), var(--lv-g-cyan)); animation: sd-sweep 620ms var(--lv-ease) calc(var(--k) * 60ms) both; }
@keyframes sd-sweep {
  0% { opacity: 0; transform: scale(0.7); }
  40% { opacity: 0.32; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
:root[data-motion="reduce"] .sd-cell::after, :root[data-motion="reduce"] .sd-pop, :root[data-motion="reduce"] .sd-cell > span { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sd-cell::after, .sd-pop, .sd-cell > span { animation: none !important; } }

/* Paused (the board is hidden) and making a puzzle. */
.sd-board.is-veiled .sd-cell > span, .sd-board.is-busy .sd-cell > span { opacity: 0; }
.sd-board.is-veiled .sd-cell, .sd-board.is-busy .sd-cell { background-color: var(--lv-g-well); box-shadow: inset 0 1px 2px var(--lv-g-well-shade); }
.sd-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-weight: 600;
  color: var(--lv-ink-muted);
  pointer-events: none;
  animation: sd-breathe 1.4s ease-in-out infinite alternate;
}
.sd-status[hidden] { display: none; }
@keyframes sd-breathe { from { opacity: 0.45; } to { opacity: 1; } }

/* Tools: one row of six on a phone. */
.sd-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: var(--size); }
.sd-tools .lv-tool { min-width: 0; padding: 4px 2px; }
.sd-tools .lv-tool span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The digit pad: big keys with what is left of each digit; a finished digit fades. */
.sd-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: calc(var(--size) + 4px); margin: 0 -2px; }
.sd-key {
  height: 58px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.sd-key > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 100%;
  border-radius: var(--lv-radius);
  border: 1px solid var(--lv-edge);
  background: var(--lv-void-raised);
  box-shadow: inset 0 -2px 0 var(--lv-edge);
  transition: transform var(--lv-fast) var(--lv-ease), background-color var(--lv-fast) var(--lv-ease), opacity var(--lv-fast) var(--lv-ease);
}
.sd-key b { font-size: 24px; line-height: 1.05; color: var(--lv-ink); }
.sd-key small { min-height: 12px; font-size: 10px; font-weight: 600; line-height: 12px; color: var(--lv-ink-subtle); font-variant-numeric: tabular-nums; }
.sd-key:hover > span { background: var(--lv-surface-hover); }
.sd-key:active > span { transform: scale(0.94); background: var(--lv-surface-active); }
.sd-key.is-focus > span { border-color: color-mix(in srgb, var(--sd-accent) 55%, transparent); background: var(--sd-same); }
.sd-key:disabled { cursor: default; }
.sd-key:disabled > span { opacity: 0.32; transform: none; box-shadow: none; }
.sd-pad.is-notes .sd-key > span { border-style: dashed; border-color: var(--lv-edge-strong); box-shadow: none; }
.sd-pad.is-notes .sd-key b { font-size: 17px; font-weight: 600; color: var(--sd-accent); }
.sd-legend { max-width: var(--size); }

/* Tall phones have height to spare under a full-width board: bigger keys and tools. */
@media (max-aspect-ratio: 1/2) {
  .sd-key { height: 68px; }
  .sd-key b { font-size: 27px; }
  .sd-tools .lv-tool { min-height: 58px; }
  .sd-main { gap: 12px; }
}
.sd-board { touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* Wide screens: the board on the left, tools and a 3×3 pad beside it. */
@media (min-width: 880px) and (min-height: 600px) {
  .sd-main {
    --size: min(calc(var(--lv-avail) - 140px), calc(100vw - 400px), 620px);
    flex-direction: row;
    max-width: none;
    gap: 32px;
  }
  .sd-side { width: 264px; gap: 14px; }
  .sd-tools { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-tools .lv-tool { min-height: 56px; font-size: 12px; }
  .sd-pad { width: calc(100% + 8px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -4px; }
  .sd-key { height: 80px; padding: 4px; }
  .sd-key b { font-size: 30px; }
  .sd-key small { font-size: 11px; }
  .sd-pad.is-notes .sd-key b { font-size: 22px; }
  .sd-legend { max-width: 100%; }
}

/* Phones held sideways: the board fills the height, the controls beside it. */
@media (orientation: landscape) and (max-height: 540px) {
  .sd-main {
    --size: min(calc(var(--lv-avail) - 72px), calc(100vw - 330px));
    padding-top: 6px;
    padding-bottom: 0;
  }
  .sd-side { width: 252px; gap: 8px; }
  .sd-tools { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-tools .lv-tool { min-height: 44px; flex-direction: row; gap: 6px; }
  .sd-pad { width: calc(100% + 4px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-key { height: 46px; padding: 2px; }
  .sd-key > span { flex-direction: row; gap: 6px; }
  .sd-key b { font-size: 22px; }
}