/* Grid styles shared by the playtest page and the player (SPEC §10.2–10.3). */

:root {
  --grid-line: #9aa3ad;
  --grid-line-heavy: #3c4650;
  --cell-bg: #ffffff;
  --cell-filled: #1f2933;
  --cell-cross: #8a94a0;
  --clue-bg: #eef1f4;
  --clue-text: #1f2933;
  --fb-match: #d3f0d8;
  --fb-conflict: #f8d4d4;
  --focus: #2f6fdb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grid-line: #4a545e;
    --grid-line-heavy: #aab4be;
    --cell-bg: #1b2127;
    --cell-filled: #e4e8ec;
    --cell-cross: #7d8894;
    --clue-bg: #262d34;
    --clue-text: #e4e8ec;
    --fb-match: #1f4a2a;
    --fb-conflict: #5a2626;
    --focus: #7aa7ff;
  }
}

.grid {
  --cell: clamp(28px, calc((100vw - 32px) / (var(--n) + 2.5)), 40px);
  display: grid;
  grid-template-columns: auto repeat(var(--n), var(--cell));
  width: max-content;
  border: 2px solid var(--grid-line-heavy);
  user-select: none;
  -webkit-user-select: none;
  /* Dragging on a phone paints cells instead of scrolling the page. */
  touch-action: none;
}

.corner {
  background: var(--clue-bg);
}

.clue {
  background: var(--clue-bg);
  color: var(--clue-text);
  font: 600 0.8rem/1.2 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  position: relative;
}

.row-clue {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.5rem 0 0.9rem;
  height: var(--cell);
}

.row-clue .nums {
  display: flex;
  gap: 0.45rem;
}

.col-clue {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.5rem 0 0.3rem;
  min-height: 3.2rem;
}

.col-clue .nums {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

/* Feedback tints the header background and keeps the digits in the normal
   text colour, which stays readable in both themes. A check mark and a
   strike-through carry the same meaning without colour. */
.clue.fb-match {
  background: var(--fb-match);
}

.clue.fb-conflict {
  background: var(--fb-conflict);
}

.clue.fb-conflict .nums {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.clue.fb-match::after {
  content: "✓";
  position: absolute;
  font-size: 0.65rem;
  opacity: 0.75;
}

.row-clue.fb-match::after {
  left: 0.2rem;
}

.col-clue.fb-match::after {
  top: 0.1rem;
}

/* A satisfied header: click (or Enter) crosses out its remaining blanks. */
.clue.completable {
  cursor: pointer;
}

.clue.completable:hover,
.clue.completable:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.cell {
  appearance: none;
  margin: 0;
  padding: 0;
  width: var(--cell);
  height: var(--cell);
  background: var(--cell-bg);
  border: 0;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  border-radius: 0;
  cursor: pointer;
  position: relative;
}

.cell.filled {
  background: var(--cell-filled);
}

.cell.crossed::before,
.cell.crossed::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  height: 2px;
  background: var(--cell-cross);
}

.cell.crossed::before {
  transform: rotate(45deg);
}

.cell.crossed::after {
  transform: rotate(-45deg);
}

.cell:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  z-index: 1;
}

.edge-right {
  border-right: 2px solid var(--grid-line-heavy);
}

.edge-bottom {
  border-bottom: 2px solid var(--grid-line-heavy);
}

.grid.locked .cell {
  cursor: default;
}