/* Dominoes board. Inherits the existing theme tokens (--text, --muted, --line, --accent,
   --ink, --action-text, --canvas); it introduces no colour of its own. */
.dominoes { display: grid; justify-items: center; gap: 1.25rem; width: 100%; color: inherit; }
/* Cells never shrink below a full-size target: a wider board scrolls inside this frame
   instead, so the page itself never scrolls sideways. */
.dominoes-frame { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
/* One square track per column and per row. The renderer sets --columns and --rows for the
   board in hand; the cells carry the 44px floor on both axes. */
.dominoes-layout { display: grid; grid-template-columns: repeat(var(--columns, 5), minmax(44px, 1fr)); grid-template-rows: repeat(var(--rows, 4), minmax(44px, auto)); width: min(100%, calc(var(--columns, 5) * 3.6rem)); margin-inline: auto; background: color-mix(in srgb, currentColor 3%, transparent); }
.dominoes-cell { position: relative; box-sizing: border-box; width: 100%; min-width: 0; aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; margin: 0; padding: 0; font: inherit; font-size: clamp(1.1rem, 5vw, 1.6rem); font-variant-numeric: tabular-nums; line-height: 1; color: inherit; background: transparent; border: 0; border-right: 1px solid var(--line, #c2ccbd); border-bottom: 1px solid var(--line, #c2ccbd); cursor: pointer; transition: background .15s ease; }
.dominoes-cell.is-first-column { border-left: 1px solid var(--line, #c2ccbd); }
.dominoes-cell.is-first-row { border-top: 1px solid var(--line, #c2ccbd); }
.dominoes-pip { display: block; }
/* A claimed pair reads as one tile: a shared tint, a firm outline, and no line down the
   middle. The rounded corners follow the two cells the player joined. */
.dominoes-cell.is-paired { border: 2px solid currentColor; border-radius: 7px; background: color-mix(in srgb, currentColor 13%, transparent); }
.dominoes-cell.is-join-right { border-right-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dominoes-cell.is-join-below { border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dominoes-cell.is-join-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dominoes-cell.is-join-above { border-top-left-radius: 0; border-top-right-radius: 0; }
/* A noted gap is the player's own mark on a boundary, never part of a domino. */
.dominoes-cell.is-gap-right::after, .dominoes-cell.is-gap-below::before { content: ''; position: absolute; z-index: 1; width: 10px; height: 10px; background: var(--muted, currentColor); }
.dominoes-cell.is-gap-right::after { top: 50%; right: 0; transform: translate(50%, -50%) rotate(45deg); }
.dominoes-cell.is-gap-below::before { bottom: 0; left: 50%; transform: translate(-50%, 50%) rotate(45deg); }
/* A cell claimed by two dominoes at once is not a fault to hide: it is said in the label,
   marked here, and counted in the status line. */
.dominoes-cell.is-crowded { background: color-mix(in srgb, var(--accent, currentColor) 20%, transparent); }
.dominoes-cell.is-crowded .dominoes-pip { text-decoration: underline double; text-underline-offset: .16em; }
/* A chosen cell waits for the cell beside it. The ring round the number says so without
   relying on colour alone. */
.dominoes-cell.is-armed .dominoes-pip { outline: 2px solid currentColor; outline-offset: .3em; border-radius: 50%; }
.dominoes-cell:hover:not(.is-paired) { background: color-mix(in srgb, currentColor 8%, transparent); }
.dominoes-cell.is-paired:hover { background: color-mix(in srgb, currentColor 20%, transparent); }
.dominoes-cell[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--accent, currentColor); }
.dominoes-cell:focus-visible { outline: 3px solid currentColor; outline-offset: -5px; }
/* The set is printed on every dominoes box, so listing it helps without giving anything away. */
.dominoes-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; width: min(100%, 30rem); }
.dominoes-piece { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 1.75rem; padding: .1rem .35rem; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted, currentColor); border: 1px solid var(--line, currentColor); border-radius: 3px; }
.dominoes-pips { white-space: nowrap; }
.dominoes-piece.is-used { color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); border-color: currentColor; text-decoration: line-through; }
.dominoes-piece.is-repeated { color: inherit; border: 2px solid var(--accent, currentColor); text-decoration: underline double; }
/* State for a reader, never for the eye: the tile beside it already shows it. */
.dominoes-aside { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.dominoes-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.75rem; margin: 0; font-size: .875rem; }
.dominoes-metric { display: inline-flex; align-items: baseline; gap: .5rem; }
.dominoes-label { color: var(--muted, currentColor); }
.dominoes-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.dominoes-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: min(100%, 24rem); }
.dominoes-key { min-height: 48px; min-width: 0; width: 100%; padding: .5rem .35rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; cursor: pointer; }
.dominoes-key:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.dominoes-key:disabled { opacity: .55; cursor: default; }
.dominoes-key:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.dominoes-mode[aria-pressed="true"] { border-width: 3px; border-style: double; background: var(--accent, currentColor); color: var(--action-text, var(--canvas, #fff)); font-weight: 650; }
.dominoes-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted, currentColor); }
.dominoes[data-state="solved"] .dominoes-cell.is-paired { border-color: var(--accent, currentColor); }
.dominoes[data-state="blocked"] .dominoes-cell, .dominoes[data-state="waiting"] .dominoes-cell { cursor: default; }
@media (max-width: 380px) {
  .dominoes { gap: 1rem; }
  .dominoes-pad, .dominoes-tray { width: 100%; max-width: 100%; }
  .dominoes-key { padding: .5rem .1rem; font-size: .8125rem; }
  .dominoes-tally { gap: .3rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dominoes-cell { transition: none; }
}
@media (forced-colors: active) {
  .dominoes-cell { border-color: CanvasText; }
  .dominoes-cell.is-paired { border-color: CanvasText; background: transparent; }
  .dominoes-cell.is-gap-right::after, .dominoes-cell.is-gap-below::before { background: CanvasText; }
  .dominoes-cell.is-crowded { background: Highlight; color: HighlightText; }
  .dominoes-cell[aria-current="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .dominoes-piece.is-used { background: transparent; }
  .dominoes-mode[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* A board of sums. The rectangle is divided into regions rather than printed with numbers, so
   the walls of a region are the firm lines and the faint cell rules sit inside them. No colour
   of its own: the same theme tokens as the rest of the family. */
.dominoes-sums .dominoes-layout { background: color-mix(in srgb, currentColor 2%, transparent); }
.dominoes-sums .dominoes-cell[data-wall~="left"] { border-left: 2px solid currentColor; }
.dominoes-sums .dominoes-cell[data-wall~="right"] { border-right: 2px solid currentColor; }
.dominoes-sums .dominoes-cell[data-wall~="top"] { border-top: 2px solid currentColor; }
.dominoes-sums .dominoes-cell[data-wall~="bottom"] { border-bottom: 2px solid currentColor; }
/* The sum of a region, in the corner of the first cell the region reaches. */
.dominoes-sum { position: absolute; top: 2px; left: 4px; font-size: .55rem; font-weight: 700; line-height: 1; opacity: .8; }
/* A printed number is a region of one cell: it is given, so it reads firmer than a laid pip. */
.dominoes-sums .dominoes-cell.is-printed .dominoes-pip { font-weight: 600; }
/* A laid piece reads as one tile across its two cells, the same language the joined board uses. */
.dominoes-sums .dominoes-cell.is-laid { background: color-mix(in srgb, currentColor 13%, transparent); border-radius: 7px; }
.dominoes-sums .dominoes-cell.is-laid[data-joined="right"] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dominoes-sums .dominoes-cell.is-laid[data-joined="left"] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dominoes-sums .dominoes-cell.is-laid[data-joined="below"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dominoes-sums .dominoes-cell.is-laid[data-joined="above"] { border-top-left-radius: 0; border-top-right-radius: 0; }
.dominoes-sums .dominoes-cell.is-cursor { outline: 2px solid var(--accent, currentColor); outline-offset: -3px; }
/* The set to choose from. A chosen piece is pressed; a laid one is out of the way but still
   readable, so the player can see the whole set at any moment. */
/* Every rule here is scoped to the sums board. `.dominoes-piece` is the printed board's class
   too — it lists the same set beside its own grid — so an unscoped rule here restyles a board
   this work never touched. It did: the space check caught the printed board's tray growing by
   66px before anything shipped. */
.dominoes-sums .dominoes-set { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.dominoes-sums .dominoes-piece { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .35rem .6rem; font: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; color: inherit; background: transparent; border: 1px solid var(--line, #c2ccbd); border-radius: 4px; cursor: pointer; }
.dominoes-sums .dominoes-piece:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.dominoes-sums .dominoes-piece.is-chosen { border-color: currentColor; border-width: 2px; background: color-mix(in srgb, currentColor 13%, transparent); font-weight: 600; }
.dominoes-sums .dominoes-piece.is-used { opacity: .5; cursor: default; }
.dominoes-sums .dominoes-piece.is-used .dominoes-pips { text-decoration: line-through; }