/* Queens. Functional layout before the design pass; existing tokens only (spec §8, D10).
   Mobile: bar (puzzle, time, pause), square board at full width, actions row, then the hint
   panel or the Statistics and Settings buttons.
   Region colors come from the swatch classes board-view.js puts on each cell; derived colors
   (color-mix of tokens) are listed for design review in docs/follow-ups.md. */

.g-queens { padding-block: var(--s3) var(--s7); }
.g-queens__game {
  --q-edge: var(--ink);        /* region borders; the board stays pastel in both themes */
  --q-wrong: var(--state-wrong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g-queens__game { --q-edge: var(--on-ink); }
}
:root[data-theme="dark"] .g-queens__game { --q-edge: var(--on-ink); }

.g-queens__intro { margin-bottom: var(--s3); }
.g-queens__intro h1 { font-size: 24px; }
.g-queens__intro p { margin-top: var(--s1); max-width: 60ch; }
.g-queens__note { margin-bottom: var(--s3); }

/* ---------- game card ---------- */
/* 4 px side padding at 360 px leaves 320 px for the board: 40 px cells (acceptance 11) */
.g-queens__game {
  position: relative; max-width: 608px; padding: var(--s2) var(--s1);
  display: grid; gap: var(--s3); grid-template-areas: "bar" "board" "actions" "tools";
}
@media (min-width: 400px) { .g-queens__game { padding: var(--s3); } }
@media (min-width: 720px) { .g-queens__game { padding: var(--s5); } } /* board up to 560 px */
.g-queens__game:focus { outline: none; }
.g-queens__bar { grid-area: bar; display: flex; align-items: center; gap: var(--s5); min-height: 44px; padding-inline: var(--s1); }
.g-queens__bar .stat__value { font-size: 18px; }
.g-queens__pause-btn { margin-left: auto; min-width: 88px; padding-inline: 12px; } /* Pause and Resume keep one width */

/* ---------- board ---------- */
.g-queens__board {
  grid-area: board; position: relative;
  width: 100%; aspect-ratio: 1; display: flex; flex-direction: column;
  box-shadow: 0 0 0 3px var(--q-edge); /* outside the cells, so they keep their full size */
  background: var(--surface);
  user-select: none; -webkit-user-select: none;
  /* D7 (signed off): drag needs the board to keep touches, so no scrolling or pinch-zoom starts
     on the board itself; the rest of the page zooms as usual. Cells stay 40 px or more. */
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.g-queens__row { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); min-height: 0; }
.g-queens__cell {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden;
  background-color: var(--light); color: var(--deep); cursor: pointer;
  background-image: var(--q-stripe, none), var(--q-shade, none);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--deep) 30%, transparent); /* thin lines inside a region */
}
.g-queens__cell.is-mid { background-color: color-mix(in srgb, var(--field) 50%, var(--light)); }
/* Thick lines between regions: each side draws half */
.g-queens__cell::before { content: ''; position: absolute; inset: 0; pointer-events: none; border: 0 solid var(--q-edge); }
.g-queens__cell.is-edge-top::before { border-top-width: 1.5px; }
.g-queens__cell.is-edge-right::before { border-right-width: 1.5px; }
.g-queens__cell.is-edge-bottom::before { border-bottom-width: 1.5px; }
.g-queens__cell.is-edge-left::before { border-left-width: 1.5px; }
.g-queens__cell:focus { outline: none; }
.g-queens__cell:focus-visible { outline: 3px solid var(--q-edge); outline-offset: -6px; }
.g-queens__board.is-locked .g-queens__cell { cursor: default; }

.g-queens__mark { width: 64%; height: auto; aspect-ratio: 1; fill: currentColor; pointer-events: none; }
.g-queens__x { width: 56%; }
/* Conflict (§7.3): red, ringed, and the queen hollow, so it doesn't rely on color alone */
.g-queens__cell.is-conflict { color: var(--q-wrong); box-shadow: inset 0 0 0 3px var(--q-wrong); }
.g-queens__cell.is-conflict .g-queens__queen { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
/* Auto-check (§7.3): rows, columns and regions with two queens are striped */
.g-queens__cell.is-striped {
  --q-stripe: repeating-linear-gradient(135deg, color-mix(in srgb, var(--state-wrong) 38%, transparent) 0 3px, transparent 3px 9px);
}
/* Region letters (D10), top left, over the border pseudo-element */
.g-queens__board.show-letters .g-queens__cell::after {
  content: attr(data-region); position: absolute; top: 2px; left: 4px;
  font-size: 11px; font-weight: 700; line-height: 1; color: var(--deep); pointer-events: none;
}
/* Hint (§7.7): the rows, columns or regions involved shaded; the cells it reasons about ringed;
   the cell a queen must go ringed thicker; the cells it rules out dash-outlined; a wrong mark ringed red */
.g-queens__cell.is-hint-area { --q-shade: linear-gradient(color-mix(in srgb, var(--q-edge) 22%, transparent) 0 0); }
.g-queens__cell.is-hint-key { box-shadow: inset 0 0 0 3px var(--state-correct); }
.g-queens__cell.is-hint-target { box-shadow: inset 0 0 0 5px var(--state-correct); }
.g-queens__cell.is-hint-wrong { box-shadow: inset 0 0 0 4px var(--q-wrong); }
.g-queens__cell.is-hint-remove { outline: 2px dashed var(--q-edge); outline-offset: -6px; }
.g-queens__loading { margin: auto; color: var(--ink-2); padding: var(--s4); text-align: center; }

/* ---------- actions ---------- */
.g-queens__actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: var(--s2); padding-inline: var(--s1); }
.g-queens__actions .btn { touch-action: manipulation; padding-inline: 8px; min-width: 0; }

/* Hint panel takes the place of the Statistics and Settings buttons while shown */
.g-queens__hint { grid-area: tools; display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: 12px; background: var(--surface-2); }
.g-queens__hint[hidden] { display: none; }
.g-queens__hint p { flex: 1; font-size: 15px; line-height: 1.4; }
.g-queens__game.has-hint .g-queens__tools { display: none; }
.g-queens__tools { grid-area: tools; display: flex; justify-content: center; gap: var(--s2); }
.g-queens__bar .stat[hidden] { display: none; }

/* ---------- pause: hides the board and actions (D6) ---------- */
.g-queens__game.is-paused .g-queens__board,
.g-queens__game.is-paused .g-queens__actions,
.g-queens__game.is-paused .g-queens__hint { visibility: hidden; }
.g-queens__pause { grid-area: board; position: relative; inset: auto; border-radius: 0; align-content: center; padding: var(--s5); }

/* ---------- dialogs ---------- */
.g-queens__dlg .figs { margin-bottom: var(--s2); }
.g-queens__dlg .fig dd { font-size: 28px; }
.g-queens__dlg .fig dt .chip { vertical-align: 1px; margin-left: 4px; }
.g-queens__won-note { margin-top: var(--s3); }
.g-queens__stats .fig dd { font-size: 22px; }
.g-queens__recent { border-collapse: collapse; font-size: 15px; width: 100%; }
.g-queens__recent th, .g-queens__recent td { text-align: left; padding: 6px var(--s3) 6px 0; border-bottom: 1px solid var(--line); }
.g-queens__recent th { font-weight: 600; }
.g-queens__reset { margin-top: var(--s5); }
.g-queens__reset p { font-weight: 600; }
.g-queens__settings { display: grid; }
.g-queens__settings label { display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; }
.g-queens__settings input { flex: none; width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }

/* ---------- text below the game ---------- */
.g-queens__about { max-width: 62ch; margin-top: var(--s6); }
.g-queens__about h2 { margin: var(--s6) 0 var(--s3); }
.g-queens__about h2:first-child { margin-top: 0; }
.g-queens__about ol { padding-left: 1.25em; margin: var(--s3) 0 0; }
.g-queens__about li + li { margin-top: 6px; }
.g-queens__keys { border-collapse: collapse; font-size: 15px; }
.g-queens__keys th, .g-queens__keys td { text-align: left; padding: 6px var(--s4) 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.g-queens__keys th { font-weight: 600; white-space: nowrap; }