/* Mathgrid tokens: dark mode only changes these values. */
:root {
  --g-mathgrid: #b07d2b;
  --mg-line: #dcdcd6;
  --mg-cage: #1b1b1b;
  --mg-cell: #ffffff;
  --mg-given: #efede6;
  --mg-peer: #f7f3ea;
  --mg-in-cage: #f3ead6;
  --mg-selected: #f0dcb4;
  --mg-player: #8a5d14;
  --mg-label: #1b1b1b;
  --mg-note: #6b6b6b;
  --mg-key-bg: #f1f0ec;
}
:root[data-theme='dark'] {
  --g-mathgrid: #d6a453;
  --mg-line: var(--board-grid);
  --mg-cage: #ededed;
  --mg-cell: #1a1a1a;
  --mg-given: #2a2a2a;
  --mg-peer: #232019;
  --mg-in-cage: #2c2618;
  --mg-selected: #4a3a1c;
  --mg-player: #f0c27a;
  --mg-label: #ededed;
  --mg-note: #a0a0a0;
  --mg-key-bg: #1f1f1f;
}

.mathgrid-shell {
  --game-accent: var(--g-mathgrid);
}
.mathgrid-shell .shell-stage {
  gap: var(--space-4);
  padding: 0 var(--space-4);
}
.mathgrid-shell .shell-board-area {
  width: 100%;
}
.mathgrid-shell .shell-input {
  width: 100%;
  min-height: 0;
  padding: 0;
}
.mg-board-wrap {
  width: min(520px, calc(100vw - 32px), calc(100dvh - 300px));
  margin: 0 auto;
}
/* Thin grid lines are the 1px gaps over the line colour; thick cage outlines are an SVG layer on top. */
.mg-board {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  gap: 1px;
  aspect-ratio: 1;
  background: var(--mg-line);
  /* Own stacking context: cage lines and labels must stay under the floating hint card. */
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.mg-cages {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mg-cages path,
.mg-cages rect {
  fill: none;
  stroke: var(--mg-cage);
  stroke-width: 3px;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.mg-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--mg-cell);
  color: var(--mg-player);
  font: 600 calc(100cqw / var(--n) * 0.48) / 1 var(--font-app);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.mg-cell.given {
  background: var(--mg-given);
  color: var(--text);
  font-weight: 800;
}
.mg-cell.peer {
  background: var(--mg-peer);
}
.mg-cell.in-cage {
  background: var(--mg-in-cage);
}
.mg-cell.same {
  background: color-mix(in srgb, var(--mg-selected) 55%, var(--mg-cell));
}
.mg-cell.selected {
  z-index: 1;
  background: var(--mg-selected);
  box-shadow: inset 0 0 0 2px var(--game-accent);
}
.mg-cell:focus {
  outline: 0;
}
.mg-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--text);
}
.mg-cell.conflict {
  color: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.mg-cell.hint-context {
  box-shadow: inset 0 0 0 3px var(--hint-context);
}
.mg-cell.hint-target {
  background: color-mix(in srgb, var(--hint-target) 22%, var(--mg-cell));
  box-shadow: inset 0 0 0 3px var(--hint-target);
}
.mg-value {
  margin-top: 14%;
}
.mg-ghost {
  color: var(--hint-target);
  opacity: 0.8;
}
/* Cage label: target and operation in the cage's first (top-left) cell. */
.mg-label {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 4px;
  max-width: calc(100% - 6px);
  overflow: hidden;
  color: var(--mg-label);
  font: 700 max(10px, calc(100cqw / var(--n) * 0.2)) / 1.1 var(--font-app);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.mg-label.satisfied {
  color: var(--success);
}
.mg-label.violated {
  color: var(--danger);
}
.mg-label.hinted {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--hint-context);
  color: var(--bg);
}
/* Pencil marks sit below the label in a 2- or 3-column keypad layout so a number keeps its place. */
.mg-notes {
  position: absolute;
  inset: 30% 6% 4%;
  display: grid;
  grid-template-columns: repeat(var(--note-cols), 1fr);
  color: var(--mg-note);
  font: 600 max(9px, calc(100cqw / var(--n) * 0.17)) / 1 var(--font-app);
}
.mg-notes i {
  display: grid;
  place-items: center;
  font-style: normal;
}
.mg-cell.just-set .mg-value {
  animation: mg-pop 140ms ease-out;
}
@keyframes mg-pop {
  from {
    transform: scale(0.6);
  }
}
.mg-board.shake {
  animation: mg-shake 240ms ease-in-out;
}
@keyframes mg-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.mg-board.solved .mg-cell {
  animation: mg-solved 520ms ease-out both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes mg-solved {
  40% {
    background: color-mix(in srgb, var(--game-accent) 35%, var(--mg-cell));
  }
}

/* Number pad: digits on one row, pencil and clear below. */
.mg-pad {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.mg-digits {
  display: grid;
  grid-template-columns: repeat(var(--keys), minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 14px;
  background: var(--mg-key-bg);
}
.mg-key,
.mg-mode {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.mg-key {
  height: 48px;
  font: 700 22px var(--font-app);
}
.mg-digits.pencil .mg-key {
  color: var(--game-accent);
  font-size: 17px;
}
.mg-key.on {
  background: var(--segment-on);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.2),
    inset 0 0 0 1.5px var(--game-accent);
}
.mg-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.mg-mode {
  height: 40px;
  background: var(--mg-key-bg);
  font: 600 14px var(--font-app);
}
.mg-mode svg {
  width: 20px;
  height: 20px;
}
.mg-mode.on {
  background: var(--game-accent);
  color: var(--bg);
}
.mg-hint-meta {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* Picture rules: the 3 × 3 demo board with its pad or a sum line under it. */
/* The pad and sum line scale with the demo: 48 px keys at the usual 260 px, smaller in the reduced-motion
   storyboard. */
.mg-demo {
  container-type: inline-size;
  display: grid;
  width: 100%;
  gap: 8px;
}
.mg-demo .mg-key {
  height: 18.5cqw;
  font-size: 8.5cqw;
}
.mathgrid-shell .mg-demo-board {
  width: 100%;
}
.mathgrid-shell .mg-demo-board .mg-cell,
.mg-demo .mg-key {
  cursor: default;
}
.mg-demo-sum {
  height: 15.4cqw;
  margin: 0;
  color: var(--text);
  font: 700 10cqw / 15.4cqw var(--font-app);
  text-align: center;
}
.mg-demo-sum .ok {
  color: var(--success);
}
.mg-demo-sum .no {
  color: var(--danger);
}
.mg-demo .shell-demo-mark,
.mg-demo-board .shell-demo-mark {
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .mg-cell,
  .mg-cell.just-set .mg-value,
  .mg-board.shake,
  .mg-board.solved .mg-cell {
    animation: none;
    transition: none;
  }
}