/* ---------- Christmas word search (/puzzles/word-search) ---------- */


/* Square letters: a table ignores aspect-ratio, so the height is the grid's width (that of its container, up to 32rem)
   over its letters. */
.wordsearch,
.wordsearch-answer {
  container-type: inline-size;
}

.wordsearch-grid td:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: -2px;
}

.wordsearch td {
  cursor: pointer;
}

.wordsearch-answer summary {
  cursor: pointer;
  width: fit-content;
  margin-bottom: 0.75rem;
  font-weight: 650;
  color: var(--gold-text);
}
/* ---------- Christmas memory game (/puzzles/memory) ---------- */

/* The game on the screen (`.memory-game`, hidden until `app.js` runs): the choices of pairs and players, the counts, */


.memory-option {
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 2px solid var(--muted-night);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.memory-option[aria-pressed="true"] {
  border-color: var(--accent-deep);
  background: var(--accent);
  color: var(--ink);
}
/* „Share your score” of one player, once all the pairs are found. */


.memory-share > .button {
  margin-top: 0.75rem;
}

.memory-picture {
  width: 71%;
  height: 71%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* The Christmas crosswords (`.crossword-sheet`), on the screen and on paper alike: each crossword on white – its name, */


.cw-cell {
  fill: #fff;
  stroke: #000;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.cw-num {
  font: 600 3.2px/1 var(--sans);
  fill: #000;
}

.cw-letter {
  font: 700 6px/1 var(--sans);
  fill: #000;
  text-anchor: middle;
  dominant-baseline: central;
}

.cw-list ol {
  margin: 0;
  padding-left: 2rem;
}

.crossword-answer {
  margin-top: 1rem;
}

.crossword-answer summary {
  cursor: pointer;
  width: fit-content;
  margin: 0 0.5rem 0.75rem;
  font-weight: 650;
  color: var(--red-deep);
}
/* Filled in on the screen (`.cw-play`, shown by public/app.js): a table of squares as wide as the crossword's white, */


.cw-said {
  margin-top: 0.5rem;
  font-weight: 650;
}

.cw-grid {
  position: relative;
}

.cw-square {
  position: relative;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.cw-square.cw-word {
  background: #fff1bf;
}

.cw-square.cw-at {
  background: #ffd45c;
  box-shadow: inset 0 0 0 2px #000;
}

.cw-square[data-state="right"] .cw-v {
  color: #1f7a45;
}

.cw-square[data-state="wrong"] {
  background: #fde3e7;
  box-shadow: inset 0 0 0 3px var(--red);
}

.cw-square[data-state="wrong"] .cw-v {
  color: var(--red-deep);
}

.cw-square[data-state="shown"] .cw-v {
  color: var(--pen);
}

.cw-list li[tabindex] {
  cursor: pointer;
}

.cw-n {
  position: absolute;
  top: 1px;
  left: 2px;
  font: 600 0.5625rem/1 var(--sans);
  pointer-events: none;
}
/* ---------- Christmas mazes (/puzzles/maze) ---------- */

/* On the screen: the mazes two a level (`.mazes`), each on white – its task with its level after it, the maze as wide */


.maze-label {
  font-family: var(--sans);
  font-weight: 700;
}

/* The maze walked on the screen (public/app.js, `.maze-on`): the way drawn in red from the start, the walls over it,
   its end a red dot; the way through, under „Show the way”, a broad green band under it. Drawing on the maze does not
   scroll the page, select its words or open a menu. Traced out and the dot hopping at the finish only for those who
   do not ask the screen to keep still. */
.maze-on .maze-drawing {
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* The six mazes to pick from (`.maze-pick`), over the maze walked: their shapes, two a level under its name, the one */


.maze-pick a[aria-current] {
  border-color: var(--red);
  color: var(--red);
}

.maze-won .maze-said {
  font-weight: 700;
  color: var(--red-deep);
}
/* ---------- Christmas recipe cards (/printables/recipe-cards) ---------- */

/* A maze: the mazes to pick from over it, its drawing as large as fits – as wide as a phone held upright –, what it */


.play-stage .maze-drawing {
  flex: 1;
  min-height: 0;
  height: 100%;
}
/* A crossword: the clue of the word being filled in over the board (`data-clue`, public/app.js), held at the top while */


.play-stage .crossword-sheet {
  flex: none;
}

.play-stage .cw-how {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 3em;
  margin: 0 0 0.5rem;
  padding: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: #fff;
}

.play-stage .cw-said {
  min-height: 1.5em;
  margin: 0.25rem 0 0;
}

.play-stage .cw-buttons {
  margin: 0.25rem 0 0;
}
/* A word search: the level on top, the grid as large as fits (`--side`), the words under it and a new grid at the end; */


.play-stage .wordsearch > * {
  margin: 0;
}

.play-stage .wordsearch-levels,
.play-stage .wordsearch-new {
  justify-content: center;
  text-align: center;
}

.play-stage .wordsearch-hint {
  font-size: 0.9375rem;
  text-align: center;
}

.play-stage .wordsearch-grid td {
  height: calc(var(--side) / 10);
  font-size: calc(var(--side) / 20);
}

.play-stage .wordsearch-grid[data-size="13"] td {
  height: calc(var(--side) / 13);
  font-size: calc(var(--side) / 26);
}

.play-stage .wordsearch-said {
  min-height: 1.4em;
  text-align: center;
}

.play-stage .wordsearch-words {
  font-size: 0.9375rem;
  line-height: 1.4;
}
/* The memory game: the board as large as fits under the choices and the count (`--ratio`: its columns over its rows), */


.play-stage .memory-board {
  --ratio: 1;
  width: min(100cqw, (100cqh - 11rem) * var(--ratio));
  max-width: none;
  margin-top: 0.5rem;
}

.play-stage .memory-count,
.play-stage .memory-turn,
.play-stage .memory-said {
  margin-top: 0.375rem;
}
/* ---------- Christmas word of the day (/puzzles/word-of-the-day) ---------- */

/* The board: 6 rows of 5 squares (Japanese 4, Korean 3, Chinese 2); each square says its colour aloud too. */


.wotd-4 .wotd-row {
  grid-template-columns: repeat(4, 1fr);
}

.wotd-3 .wotd-row {
  grid-template-columns: repeat(3, 1fr);
}

.wotd-2 .wotd-row {
  grid-template-columns: repeat(2, 1fr);
}

.wotd-2 .wotd-cell,
.wotd-3 .wotd-cell {
  font-size: 2rem;
}

.wotd-green {
  border-color: #2f7d43;
  background: #2f7d43;
  color: #fff;
}

.wotd-yellow {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.wotd-gray {
  border-color: #6b7486;
  background: #6b7486;
  color: #fff;
}

.wotd-next {
  color: var(--muted-paper);
  text-align: center;
}

.wotd-wrong {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #fde8eb;
  color: var(--red-deep);
  text-align: center;
}

.wotd-keys {
  text-align: center;
}

.wotd-keys .wotd-cell {
  width: 2.25rem;
  font-size: 1rem;
}

.wotd-end {
  text-align: center;
}

.wotd-legend {
  padding: 0;
  list-style: none;
}

.wotd-legend .wotd-cell {
  flex: none;
  width: 1.75rem;
}

.wotd-form input[name="w"]::placeholder {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}
/* ---------- Christmas sudoku (/puzzles/sudoku) ---------- */

/* On the screen: the pictures and their names (`.sudoku-legend`), then a section a size, its two boards side by side */


.sudoku-legend .sudoku-icon {
  width: 1.9rem;
  height: 1.9rem;
}

.sudoku-4 > .sudoku-cell:nth-child(4n),
.sudoku-6 > .sudoku-cell:nth-child(6n),
.sudoku-9 > .sudoku-cell:nth-child(9n) {
  border-right: 0;
}

.sudoku-cell.sudoku-r {
  border-right: 3px solid var(--ink);
}

.sudoku-cell.sudoku-b {
  border-bottom: 3px solid var(--ink);
}

.sudoku-icon {
  width: 78%;
  height: 78%;
}

.sudoku-i1 {
  color: #f2b705;
}

.sudoku-i2 {
  color: #2e7d32;
}

.sudoku-i3 {
  color: #d32f2f;
}

.sudoku-i4 {
  color: #1e6fd9;
}

.sudoku-i5 {
  color: #8e44ad;
}

.sudoku-i6 {
  color: #f06292;
}

/* A square to fill on the screen (`app.js`): tapped, the next picture; filled by hand, a digit in blue. */
.sudoku-cell[role="button"] {
  cursor: pointer;
  color: var(--pen);
  font-weight: 500;
}

.sudoku-cell[role="button"]:hover {
  background: #eef4fb;
}

.sudoku-cell[role="button"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.sudoku-cell.sudoku-bad {
  background: #ffd5da;
}

.sudoku-board.sudoku-won {
  border-color: #2e7d32;
}

.sudoku-tools {
  margin: 0.75rem 0 0;
  text-align: center;
}

.sudoku-answer {
  margin-top: 0.75rem;
}

.sudoku-answer summary {
  cursor: pointer;
  color: var(--pen);
  font-weight: 600;
}

.sudoku-answer .sudoku-cell {
  font-size: 0.85rem;
}

.sudoku-solved {
  background: #eef3e6;
  font-weight: 400;
}
/* ---------- Christmas dinner calculator (/christmas-dinner/) ---------- */

/* The Christmas jigsaw puzzle (`puzzles::jigsaw`, data-jigsaw): the pictures and the numbers of pieces as links, its */


.jigsaw-level {
  padding: 0.35rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: inherit;
  font-size: 0.9rem;
  text-decoration: none;
}

.jigsaw-thumb[aria-current="true"],
.jigsaw-level[aria-current="true"] {
  border-color: var(--gold);
}

.jigsaw-level[aria-current="true"] {
  background: var(--accent);
  color: var(--ink);
}

.jigsaw-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.jigsaw-area {
  position: relative;
  overflow: hidden;
  padding: 0.75rem 0;
  border-radius: 0.75rem;
  background: #f4efe6;
  user-select: none;
  -webkit-user-select: none;
}

.jigsaw-board {
  max-width: 100%;
  width: 22rem;
  margin: 0 auto;
  outline: 2px dashed #a8957a;
  outline-offset: 0;
}

.jigsaw-on .jigsaw-picture {
  opacity: 0;
  transition: opacity 0.2s;
}

.jigsaw-on.jigsaw-peek .jigsaw-picture {
  opacity: 0.25;
}

.jigsaw-piece {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  touch-action: none;
  cursor: grab;
  filter: drop-shadow(0 2px 2px rgb(29 38 56 / 0.35));
}

.jigsaw-piece:active {
  cursor: grabbing;
}

.jigsaw-edge {
  fill: none;
  stroke: rgb(29 38 56 / 0.45);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.jigsaw-piece.jigsaw-placed {
  cursor: default;
  filter: none;
}

.jigsaw-placed .jigsaw-edge {
  stroke: rgb(29 38 56 / 0.12);
}

.jigsaw-note,
.jigsaw-said {
  margin: 0.75rem 0 0;
  text-align: center;
}

.jigsaw-share {
  margin: 0.5rem 0 0;
  text-align: center;
}
/* ---------- Christmas word scramble (/puzzles/word-scramble) ---------- */

/* On the screen: two lists (`#kids`, `#family`), each word its mixed letters as tiles (`.scramble-tile`), its field */


.scramble-input {
  flex: 1 1 10rem;
  max-width: 18rem;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font: inherit;
  text-transform: uppercase;
}

.scramble-hint {
  opacity: 0.8;
  font-size: 0.9rem;
}

.scramble-list > li.scramble-ok {
  border-color: #1a7f4b;
}

.scramble-list > li.scramble-ok .scramble-hint::after {
  content: " ✓";
  color: #1a7f4b;
  font-weight: 700;
}

.scramble-answer {
  margin-top: 0.75rem;
}

.scramble-answer summary {
  cursor: pointer;
  font-weight: 600;
}

.scramble-key {
  columns: 2;
  margin: 0.5rem 0 0;
}

.scramble-count,
.scramble-said {
  margin: 0 0 0.4rem;
  font-weight: 600;
}
/* The Christmas hangman (`puzzles::hangman`): the level and its switch, the snowman with the lives under it, the word */


.snowman-figure {
  margin: 0;
  width: min(14rem, 60vw);
}

.hangman-lives {
  margin: 0;
  font-weight: 700;
  font-size: 1.125rem;
}
/* One row however long the word: the boxes get narrower. */


.hangman-cell-lost {
  color: var(--red-deep);
}

.hangman-end {
  margin: 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

a.hangman-key:hover,
a.hangman-key:focus-visible {
  background: var(--gold);
}

.hangman-key-hit {
  background: #cfe9d4;
  border-color: #3f8f55;
  color: #1f5a32;
}

.hangman-key-miss {
  background: transparent;
  border-color: var(--red);
  color: var(--muted-night);
  text-decoration: line-through;
}

.hangman-key-off {
  opacity: 0.5;
}

@media (max-width: 420px) {
  .hangman-keys {
    gap: 0.25rem;
  }

  .hangman-word {
    gap: 0.25rem;
  }

  .hangman-cell {
    font-size: 1.25rem;
  }
}
/* ---------- Christmas spot the difference (/puzzles/spot-the-difference) ---------- */

/* The Christmas spot the difference (`puzzles::spot`, data-spot): the pictures and the levels as links, the counter, then */


.spot-level {
  padding: 0.35rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: inherit;
  font-size: 0.9rem;
  text-decoration: none;
}

.spot-thumb[aria-current="true"],
.spot-level[aria-current="true"] {
  border-color: var(--gold);
}

.spot-level[aria-current="true"] {
  background: var(--accent);
  color: var(--ink);
}

.spot-count,
.spot-note,
.spot-said {
  margin: 0 0 0.5rem;
  text-align: center;
}

.spot-count,
.spot-said {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.spot-picture.spot-miss {
  outline-color: var(--red);
  animation: spot-shake 0.3s;
}

@keyframes spot-shake {
  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spot-picture.spot-miss {
    animation: none;
  }
}

.spot-answer {
  margin-top: 0.75rem;
}

.spot-answer summary {
  cursor: pointer;
  font-weight: 600;
}

.spot-solution {
  max-width: 22rem;
  margin: 1rem auto;
  cursor: default;
}

@media (max-width: 600px) {
  .spot-pair {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .spot-picture {
    max-height: none;
  }
}

/* ---------- Christmas tic-tac-toe (/puzzles/tic-tac-toe) ---------- */

/* The Christmas tic-tac-toe (`puzzles::tictactoe`, data-tictactoe): the modes and the levels as links (the chosen one
   gold), the status, then a square board of 3 × 3 squares – each at least 88 px on a phone, the whole board in 390 px
   without scrolling sideways; a free square a link with a ring when focused, a taken one its tree or snowman, the
   winning line gold. */
.ttt {
  text-align: center;
}

.ttt-switch a:hover {
  border-color: var(--text);
}

.ttt-switch a.ttt-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.ttt > .ttt-status {
  margin: 0.75rem 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
}

a.ttt-cell:hover {
  background: #fff8e6;
}

a.ttt-cell:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 2px;
  background: #fff8e6;
}

.ttt-win {
  background: #f7dc8f;
  box-shadow: inset 0 0 0 4px var(--gold-deep);
}

.ttt-free {
  opacity: 0.6;
}

.ttt-next {
  margin: 1rem 0 0;
}

.ttt-next a:not(.button) {
  color: var(--text);
}
/* ---------- Christmas sliding puzzle (/puzzles/sliding-puzzle) ---------- */

/* The pictures and the sizes are the jigsaw puzzle's links (`.jigsaw-choice`); then the switch of the numbers, „New */


.sliding > .sliding-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sliding-solved > .sliding-stats {
  color: var(--gold-text);
  font-size: 1.1rem;
}

.sliding-board:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.sliding-k4 .sliding-tile {
  width: 25%;
  height: 25%;
}

.sliding-ready .sliding-tile {
  transition: transform 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .sliding-ready .sliding-tile {
    transition: none;
  }
}

.sliding-tile[data-empty] {
  visibility: hidden;
}

.sliding-solved .sliding-tile {
  outline-color: transparent;
  cursor: default;
}

.sliding-solved .sliding-tile[data-empty] {
  visibility: visible;
}

.sliding-note {
  margin: 0.75rem 0 0;
  text-align: center;
}

.sliding-share {
  margin: 0.75rem 0 0;
  text-align: center;
}

/* Alone on the full screen (`/puzzles/sliding-puzzle/play`): the board no taller than about two thirds of the screen. */
.play-stage .sliding-board {
  width: min(100%, 26rem, 58dvh);
}
/* ---------- Christmas nonogram (/puzzles/nonogram) ---------- */

/* The pictures and the levels are the jigsaw puzzle's links (`.jigsaw-choice`); then the tools – „Fill” / „Cross” */


.nono-tool[aria-pressed="true"] {
  border-color: var(--accent-deep);
  background: var(--accent);
  color: var(--ink);
}

.nono-tool[aria-pressed="true"] .nono-swatch {
  border-color: var(--ink);
}

.nono-swatch-fill {
  background: var(--ink);
  border-color: var(--snow);
}

.nono > .nono-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.nono-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.nono-grid {
  --c: clamp(18px, calc((min(100vw, var(--column)) - 6.5rem) / var(--w)), 28px);
  /* As wide as its squares: never squeezed under 18 px by a narrow box, which scrolls instead. */
  width: max-content;
  margin: 0 auto;
  border-collapse: collapse;
  background: #f4efe6;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

.nono-grid:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.nono-grid th,
.nono-corner {
  padding: 0;
  font-size: max(11px, calc(var(--c) * 0.5));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* The thicker lines: after each fifth column (the row's clue is the first cell) and each fifth row, and round it. */
.nono-grid td:nth-child(5n + 6),
.nono-print td:nth-child(5n + 6) {
  border-right: 2px solid var(--ink);
}

.nono-grid tbody tr:nth-child(5n) td,
.nono-print tbody tr:nth-child(5n) td {
  border-bottom: 2px solid var(--ink);
}

.nono-grid tbody td:nth-child(2),
.nono-print tbody td:nth-child(2) {
  border-left: 2px solid var(--ink);
}

.nono-grid tbody tr:first-child td,
.nono-print tbody tr:first-child td {
  border-top: 2px solid var(--ink);
}

.nono-grid tbody td:last-child,
.nono-print tbody td:last-child {
  border-right: 2px solid var(--ink);
}

.nono-grid tbody tr:last-child td,
.nono-print tbody tr:last-child td {
  border-bottom: 2px solid var(--ink);
}

.nono-cell.nono-on {
  background: var(--ink);
}

.nono-cell.nono-given {
  background: #4f6b5a;
  cursor: default;
}

.nono-cell.nono-x {
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 42%, var(--red) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--red) 42% 58%, transparent 58%);
}

.nono-cell.nono-at {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.nono-solved .nono-cell {
  cursor: default;
}

.nono-solved .nono-cell.nono-x {
  background: #fff;
}

.nono-solved .nono-cell.nono-on:nth-child(odd),
.nono-solved .nono-cell.nono-given:nth-child(odd) {
  background: var(--red);
}

.nono-solved .nono-cell.nono-on:nth-child(even),
.nono-solved .nono-cell.nono-given:nth-child(even) {
  background: #2f8f5b;
}

.nono-end {
  margin-top: 0.75rem;
  text-align: center;
}

.nono > .nono-end > .nono-said {
  margin: 0 0 0.5rem;
  color: var(--gold-text);
  font-size: 1.15rem;
  font-weight: 700;
}

.nono-end p {
  margin: 0;
}

.nono-end:has([data-share-score][hidden]) .button-quiet {
  margin-bottom: 0.5rem;
}

.nono-note {
  margin: 0.75rem 0 0;
  text-align: center;
}

.nono-key-link {
  margin: -1.5rem 0 0;
  padding: 0 0.25rem;
}
/* The sheet to print: not on the screen, but the solution (`?key=1`), shown small on light paper. */


.nono-key h2 {
  color: #000;
}

.nono-key a {
  color: var(--pen);
}

.nono-print {
  margin: 0 auto;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.nono-print th,
.nono-print .nono-corner {
  padding: 0 0.2em;
  font-size: 0.7rem;
  line-height: 1.1;
}

.nono-print .nono-col {
  vertical-align: bottom;
}

.nono-print .nono-row {
  text-align: right;
  white-space: nowrap;
}

.nono-pcell.nono-on {
  background: #000;
}

.nono-pcell.nono-given {
  background: #bbb;
}

.nono-site {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

/* Alone on the full screen (`/puzzles/nonogram/play`): the pictures in one row that scrolls, the grid no taller than
   the screen leaves it (scrolling in its box past that), so the stage need not zoom the squares under 18 px. */
.play-stage .nono .jigsaw-choice {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  margin-bottom: 0.4rem;
}

.play-stage .nono .jigsaw-thumb {
  position: relative;
  flex: none;
  width: auto;
}

/* The names stay for a screen reader only. */
.play-stage .nono .jigsaw-thumb span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.play-stage .nono .jigsaw-level {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.play-stage .nono-wrap {
  max-height: calc(100dvh - 22rem);
  overflow: auto;
}

.play-stage .nono-grid {
  --c: clamp(18px, min((100vw - 6.5rem) / var(--w), (100dvh - 16rem) / (var(--h) + 4)), 32px);
}

/* ---------- Christmas 2048 (/puzzles/2048) ---------- */
/* „New game”, „Undo” and the full screen, the score and the best one, then the board – as wide as the page, at most
   26rem, square: 16 dim squares in a grid and over them the tiles app.js places (`--x`, `--y`) with a transform, a
   step the tile and the gap. A tile: its picture (`<use>` of `#t48-N`) over its number, its colors by level
   (`.t48-v1` 2 … `.t48-v11` 2048, `.t48-v12` past it; twenty48::COLORS, each 4.5:1 or more). The pictures white with
   a dark outline, whatever art of the site they come from. The end (2048, or no move) over the board. Under it the
   names of the tiles; without JavaScript only they and the note show. */
.t48-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.t48-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.t48 > .t48-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.t48-wrap {
  position: relative;
  width: min(100%, 26rem);
  margin: 0 auto;
}

.t48-board {
  --gap: 0.45rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  aspect-ratio: 1;
  padding: var(--gap);
  border-radius: 0.6rem;
  background: #2b4162;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.t48-board:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.t48-cell {
  border-radius: 0.4rem;
  background: rgb(23 18 15 / 0.06);
}

.t48-tile {
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  width: calc((100% - 5 * var(--gap)) / 4);
  height: calc((100% - 5 * var(--gap)) / 4);
  border-radius: 0.4rem;
  font-size: clamp(0.95rem, 5.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1;
  transform: translate(calc(var(--x) * (100% + var(--gap))), calc(var(--y) * (100% + var(--gap))));
}

.t48-tile .t48-art {
  width: 58%;
  height: 52%;
}

.t48-d4 .t48-num {
  font-size: 0.82em;
}

.t48-d5 .t48-num,
.t48-d6 .t48-num {
  font-size: 0.68em;
}

.t48-ready .t48-tile {
  transition: transform 100ms ease-in-out;
}

.t48-new {
  animation: t48-in 100ms ease-out;
}

.t48-merged {
  animation: t48-pop 100ms ease-out;
}

@keyframes t48-in {
  from {
    scale: 0.2;
  }
}

@keyframes t48-pop {
  50% {
    scale: 1.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t48-ready .t48-tile {
    transition: none;
  }

  .t48-new,
  .t48-merged {
    animation: none;
  }
}

.t48-v1 {
  background: #e3f2fd;
  color: #0d3b66;
}

.t48-v2 {
  background: #bbdefb;
  color: #0d3b66;
}

.t48-v3 {
  background: #90caf9;
  color: #0d2b4e;
}

.t48-v4 {
  background: #c8e6c9;
  color: #1b4d1e;
}

.t48-v5 {
  background: #81c784;
  color: #10301a;
}

.t48-v6 {
  background: #2e7d32;
  color: #ffffff;
}

.t48-v7 {
  background: #1b5e20;
  color: #ffffff;
}

.t48-v8 {
  background: #ffe082;
  color: #4a2c00;
}

.t48-v9 {
  background: #ffb300;
  color: #3a2000;
}

.t48-v10 {
  background: #bf360c;
  color: #ffffff;
}

.t48-v11 {
  background: #c62828;
  color: #ffffff;
}

.t48-v12 {
  background: #5d0b0b;
  color: #ffd54f;
}

.t48-art {
  display: block;
  overflow: visible;
}

.t48-lines path:first-child {
  stroke: #1d2638;
  stroke-width: 4;
}

.t48-lines path:last-child {
  stroke: #fff;
  stroke-width: 2;
}

.t48-ornament > path:first-child {
  stroke-width: 7;
}

.t48-solid path {
  stroke: #1d2638;
  stroke-width: 10;
  stroke-linejoin: round;
  paint-order: stroke;
}

.t48-coloring .cp-part,
.t48-coloring .cp-line {
  stroke: #1d2638;
  stroke-width: 9;
  cursor: inherit;
}

.t48-end {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.6rem;
  background: rgb(13 27 46 / 0.86);
  text-align: center;
}

.t48-end > .t48-said {
  margin: 0;
  color: var(--gold-text);
  font-size: 1.4rem;
  font-weight: 800;
}

.t48-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.t48-key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.t48-key .t48-art {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
}

.t48-note {
  margin: 0.25rem 0 0;
  text-align: center;
}

/* Alone on the full screen (`/puzzles/2048/play`): the board, no names under it. */
.play-stage .t48-wrap {
  width: min(100%, 26rem, 62dvh);
}

/* ---------- Christmas Minesweeper (/puzzles/minesweeper) ---------- */
/* The levels, the mode („Uncover” / „Mark with a candy cane”, large for a thumb), „New game” and the full screen, the
   coal left and the time, then the field: as wide as the page, at most 2.4rem a square, so 16 × 16 still fits a phone
   of 360 px (about 20 px a square) without the page scrolling sideways. A square under the snow is a white drift with
   flakes; uncovered it is trodden snow (`minesweeper::OPEN`) with its number in the color of `.msw-n1`…`.msw-n8`
   (`minesweeper::NUMBERS`, each 4.5:1 or more on it). The candy cane and the coal are `<use>` of the page's symbols.
   The coal that ended a game on red; a candy cane where there was no coal faded. The end under the field. */
.msw-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.msw-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.msw-tools > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.msw-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.4rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.msw-tool[aria-pressed="true"] {
  border-color: var(--accent-deep);
  background: var(--accent);
  color: var(--ink);
}

.msw-swatch {
  width: 1.2rem;
  height: 1.2rem;
  border: 1.5px solid #9fb4c8;
  border-radius: 0.2rem;
  background: linear-gradient(#ffffff, #d4e3f1);
}

.msw-tool .msw-art {
  width: 1.4rem;
  height: 1.4rem;
}

.msw > .msw-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.msw-wrap {
  max-width: 100%;
}

.msw-easy {
  --w: 9;
}

.msw-medium {
  --w: 12;
}

.msw-hard {
  --w: 16;
}

.msw-board {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--w), 1fr);
  gap: 2px;
  width: min(100%, calc(var(--w) * 2.4rem));
  margin: 0 auto;
  padding: 4px;
  border-radius: 0.5rem;
  background: #9fb4c8;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.msw-row,
.msw-gc {
  display: contents;
}

.msw-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0 8%, transparent 9%),
    radial-gradient(circle at 70% 62%, #ffffff 0 6%, transparent 7%),
    linear-gradient(#ffffff, #d4e3f1);
  box-shadow: inset 0 -2px 0 #b3c7da;
  color: #1d2638;
  font: inherit;
  font-size: calc(100cqi / var(--w) * 0.55);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

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

.msw-open {
  background: #eef3f8;
  box-shadow: none;
  cursor: default;
}

.msw-art {
  width: 78%;
  height: 78%;
  pointer-events: none;
}

.msw-hit {
  background: #f6c9c4;
}

.msw-wrong .msw-art {
  opacity: 0.35;
}

.msw-n1 {
  color: #1552a8;
}

.msw-n2 {
  color: #1d6b27;
}

.msw-n3 {
  color: #b3261e;
}

.msw-n4 {
  color: #4a2a9a;
}

.msw-n5 {
  color: #7a3410;
}

.msw-n6 {
  color: #00635a;
}

.msw-n7 {
  color: #263238;
}

.msw-n8 {
  color: #5b3a2e;
}

.msw-end {
  margin-top: 0.75rem;
  text-align: center;
}

.msw-end > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
}

.msw-end > .msw-said {
  color: var(--gold-text);
  font-size: 1.3rem;
  font-weight: 800;
}

.msw-note {
  margin: 0.25rem 0 0;
  text-align: center;
}

/* Alone on the full screen (`/puzzles/minesweeper/play`): the field fits the screen's height too. */
.play-stage .msw-board {
  width: min(100%, calc(var(--w) * 2.4rem), 62dvh);
}

/* A phone: the field takes the screen's width past the page's margins (centered on it), its gaps thinner – 16 × 16
   squares of about 20 px on 360 px, still no sideways scroll. */
@media (max-width: 30rem) {
  .msw-board {
    position: relative;
    left: 50%;
    width: min(calc(100vw - 1.5rem), calc(var(--w) * 2.4rem));
    gap: 1px;
    padding: 2px;
    translate: -50% 0;
  }
}

/* The Christmas Lights Out (`/puzzles/lights-out`, `.lo-`): a grid of bulbs, each a <use> of the page's `#lo-bulb` in a
   square on the night with a rim of `lights::RIM` (3:1 or more on it). A lit bulb (`aria-pressed="true"`) is warm – its
   color by its place (`data-c`, the site's red, gold, sky, dawn and green) – and glows; a dark one is grey with a
   dashed outline, so it shows without color too. A square fits the phone: 7 × 7 on 360 px with no sideways scroll.
   The bulb of a hint has a gold ring that pulses; every light on, the grid twinkles – both still with less motion. */
.lo-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lo-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}

.lo > .lo-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lo-easy {
  --w: 3;
}

.lo-medium {
  --w: 5;
}

.lo-hard {
  --w: 7;
}

.lo-board {
  --gap: 6px;
  --s: min(calc((100vw - 3rem - (var(--w) - 1) * var(--gap)) / var(--w)), 4.5rem);
  display: grid;
  grid-template-columns: repeat(var(--w), var(--s));
  justify-content: center;
  gap: var(--gap);
  margin: 0 auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.lo-row,
.lo-gc {
  display: contents;
}

.lo-cell {
  --bulb: var(--red);
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 2px solid #8796b3;
  border-radius: 0.6rem;
  background: var(--night-up);
  cursor: pointer;
  transition: background-color 0.15s;
}

.lo-cell[data-c="1"] {
  --bulb: var(--gold);
}

.lo-cell[data-c="2"] {
  --bulb: var(--sky);
}

.lo-cell[data-c="3"] {
  --bulb: var(--dawn);
}

.lo-cell[data-c="4"] {
  --bulb: #3fae6a;
}

.lo-art {
  width: 80%;
  height: 80%;
  pointer-events: none;
  fill: #4b5468;
  stroke: #aab6cc;
  stroke-dasharray: 2 1.6;
  transition: fill 0.15s, filter 0.15s;
}

.lo-cell[aria-pressed="true"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--bulb) 35%, transparent), var(--night-up) 70%);
}

.lo-cell[aria-pressed="true"] .lo-art {
  fill: var(--bulb);
  stroke: #ffffff;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 3px var(--bulb)) drop-shadow(0 0 8px var(--bulb));
}

.lo-cell:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.lo-cell.lo-hint {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold);
  animation: lo-pulse 1s ease-in-out infinite alternate;
}

@keyframes lo-pulse {
  to {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 40%, transparent);
  }
}

.lo-won .lo-cell .lo-art {
  animation: lo-twinkle 0.9s ease-in-out 3 alternate;
}

.lo-won .lo-gc:nth-child(2n) .lo-art {
  animation-delay: 0.3s;
}

@keyframes lo-twinkle {
  50% {
    opacity: 0.55;
  }
}

.lo > .lo-said {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.lo-end {
  text-align: center;
}

.lo-end > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
}

.lo-note {
  margin: 0.5rem 0 0;
  text-align: center;
}

/* Alone on the full screen (`/puzzles/lights-out/play`): the grid fits the screen's height too. */
.play-stage .lo-board {
  --s: min(calc((100vw - 3rem - (var(--w) - 1) * var(--gap)) / var(--w)), 4.5rem, calc((62dvh - (var(--w) - 1) * var(--gap)) / var(--w)));
}

@media (prefers-reduced-motion: reduce) {
  .lo-cell,
  .lo-art {
    transition: none;
  }

  .lo-cell.lo-hint,
  .lo-won .lo-cell .lo-art {
    animation: none;
  }
}

/* ---------- Christmas four in a row (/puzzles/four-in-a-row) ---------- */

/* The Christmas four in a row (`puzzles::fourinrow`, data-fourinrow): the modes and the levels are the tic-tac-toe's
   links (`.ttt-switch`), then the status, a row of arrows and the green board of 7 × 6 holes – each column at least
   44 px wide and a link the whole height of the board (`a.c4-col`), so 7 × 44 px + the gaps fit in 390 px without
   scrolling sideways. The last bauble dropped has a white ring and falls in (none with reduced motion); the four of a
   win a gold one. */
.c4 {
  text-align: center;
}

.c4 > .c4-status {
  margin: 0.75rem 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
}

.c4-frame {
  width: min(100%, 30rem);
  margin: 0 auto;
}

.c4-drops,
.c4-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 2px;
}

.c4-drops {
  padding: 0 6px;
}

.c4-drop,
.c4-shut {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}

.c4-arrow {
  width: 60%;
  max-width: 1.75rem;
}

.c4-board {
  padding: 4px;
  border: 2px solid #0f3f25;
  border-radius: 0.75rem;
  background: #1d6b40;
}

.c4-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 0.5rem;
  text-decoration: none;
}

a.c4-col:hover {
  background: #2c8a55;
}

a.c4-col:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 2px;
  background: #2c8a55;
}

.c4-cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
}

.c4-hole,
.c4-disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c4-last::after,
.c4-win::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #ffffff;
}

.c4-win::after {
  box-shadow: inset 0 0 0 4px var(--gold), 0 0 10px 2px var(--gold);
}

.c4-last .c4-disc {
  animation: c4-fall 0.35s ease-in;
}

@keyframes c4-fall {
  from {
    transform: translateY(-160%);
    opacity: 0.4;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c4-last .c4-disc {
    animation: none;
  }
}
/* The Christmas snake game (`puzzles::snake`, data-snake): the levels are the tic-tac-toe's links (`.ttt-switch`), */


.snake > .snake-stats,
.snake > .snake-shared {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.snake > .snake-shared {
  color: var(--gold-text);
}

.snake > .snake-said {
  min-height: 1.5em;
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.snake-frame {
  width: min(92vw, 480px, 100%);
  margin: 0 auto;
}

.snake-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #f4f9fd;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.snake-ring {
  animation: snake-blink 0.9s ease-in-out infinite alternate;
}

@keyframes snake-blink {
  to {
    opacity: 0.25;
  }
}

.snake-pad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  gap: 6px;
  justify-content: center;
  margin: 0.5rem 0;
}

.snake-dir {
  min-width: 52px;
  min-height: 52px;
  border: 1px solid var(--muted-night);
  border-radius: 0.75rem;
  background: rgb(23 18 15 / 0.06);
  color: var(--text);
  font-size: 1.25rem;
  touch-action: manipulation;
  cursor: pointer;
}

.snake-dir[data-way="up"] {
  grid-area: up;
}

.snake-dir[data-way="left"] {
  grid-area: left;
}

.snake-dir[data-way="right"] {
  grid-area: right;
}

.snake-dir[data-way="down"] {
  grid-area: down;
}

.snake-dir:hover {
  border-color: var(--text);
}

.snake-dir:focus-visible,
.snake-end .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.snake-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .snake-ring {
    animation: none;
  }
}
/* The Christmas catching game (`puzzles::catch`, data-catch): the levels are the tic-tac-toe's links (`.ttt-switch`), */


.catch > .catch-stats,
.catch > .catch-shared,
.catch > .catch-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.catch > .catch-shared {
  color: var(--gold-text);
}

.catch-stats > [data-catch-lives] {
  color: #ff6b6b;
}

.catch > .catch-said {
  min-height: 1.5em;
}

.catch-frame {
  width: min(92vw, 420px, 100%, calc((100svh - 230px) * 0.75));
  min-width: 240px;
  margin: 0 auto;
}

.catch-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.catch-pad {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.catch-dir {
  min-width: 72px;
  min-height: 44px;
  border: 1px solid var(--muted-night);
  border-radius: 0.75rem;
  background: rgb(23 18 15 / 0.06);
  color: var(--text);
  font-size: 1.25rem;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.catch-dir:hover {
  border-color: var(--text);
}

.catch-dir:focus-visible,
.catch-end .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.catch-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
/* The Christmas bells memory game (`puzzles::bells`, data-bells): the levels are the tic-tac-toe's links (`.ttt-switch`), */


.bells > .bells-stats,
.bells > .bells-shared,
.bells > .bells-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.bells > .bells-shared {
  color: var(--gold-text);
}

.bells > .bells-said {
  min-height: 1.5em;
}

.bells-frame {
  width: min(92vw, 420px, 100%, calc(100svh - 300px));
  min-width: 240px;
  margin: 0 auto;
}

.bells-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 3px solid #0d3b66;
  border-radius: 0.75rem;
  background: #0b1a33;
}

/* Numbered clockwise, as the arrows ↑ → ↓ ←: 1 top left, 2 top right, 3 bottom right, 4 bottom left. */
.bells-bell[data-bell="2"] {
  grid-column: 2;
  grid-row: 2;
}

.bells-bell[data-bell="3"] {
  grid-column: 1;
  grid-row: 2;
}

.bells-bell {
  position: relative;
  min-width: 64px;
  min-height: 64px;
  aspect-ratio: 1;
  padding: 6%;
  border: 2px solid var(--muted-night);
  border-radius: 1rem;
  background: rgb(23 18 15 / 0.06);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: background-color 0.1s, box-shadow 0.1s;
}

.bells-bell:disabled {
  cursor: default;
}

.bells-bell[aria-disabled="true"] {
  cursor: wait;
}

.bells-bell:hover {
  border-color: var(--text);
}

.bells-bell:focus-visible,
.bells-controls .button:focus-visible,
.bells-end .button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

.bells-art {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 10%;
}

.bells-num {
  position: absolute;
  top: 0.35rem;
  left: 0.5rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.bells-bell.bells-lit {
  border-color: var(--gold);
  background: rgba(255, 236, 160, 0.45);
  box-shadow: 0 0 0 4px var(--gold), 0 0 28px 6px rgba(255, 213, 79, 0.8);
}

.bells-lit .bells-art {
  filter: brightness(1.35);
  animation: bells-swing 0.4s ease-in-out;
}

@keyframes bells-swing {
  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(12deg);
  }

  75% {
    transform: rotate(-12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bells-lit .bells-art {
    animation: none;
  }

  .bells-bell {
    transition: none;
  }
}

.bells-controls,
.bells-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* The Christmas Breakout (`puzzles::breakout`, data-brk): the levels are the tic-tac-toe's links (`.ttt-switch`), then
   the points, the best and the lives, the board of 3 : 4 (one SVG, at most 92 % of the screen's width and short enough
   that it fits on a phone of 390 × 844 with its buttons), what the game says and the 2 buttons ◀ ▶, each at least
   44 px. The pointer on the board moves the sleigh, not the page (`touch-action: none` on the board only). */
.brk {
  text-align: center;
}

.brk > .brk-stats,
.brk > .brk-shared,
.brk > .brk-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.brk > .brk-shared {
  color: var(--gold-text);
}

.brk-stats > [data-brk-lives] {
  color: #ff6b6b;
}

.brk > .brk-said {
  min-height: 1.5em;
}

.brk:focus {
  outline: none;
}

.brk-frame {
  width: min(92vw, 420px, 100%, calc((100svh - 240px) * 0.75));
  min-width: 240px;
  margin: 0 auto;
}

.brk-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.brk-pad {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.brk-dir {
  min-width: 72px;
  min-height: 44px;
  border: 1px solid var(--muted-night);
  border-radius: 0.75rem;
  background: rgb(23 18 15 / 0.06);
  color: var(--text);
  font-size: 1.25rem;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.brk-dir:hover {
  border-color: var(--text);
}

.brk-dir:focus-visible,
.brk-end .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.brk-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* The Christmas match 3 (`puzzles::match3`, data-m3): the levels are the tic-tac-toe's links (`.ttt-switch`), then
   the points, the best and the moves or seconds left, the square board (one SVG of 8 × 8 cells, at most 92 % of the
   screen's width or 440 px – cells of 40 px and more on a phone of 390 × 844 – and short enough to fit on the screen
   with its lines), what the game says and the buttons. The pointer on the board swaps cells, not the page
   (`touch-action: none` on the board only). The cell picked has a gold frame, the cursor of the keys a white dashed
   one, a hint glows; nothing moves with prefers-reduced-motion (app.js skips its slides too). */
.m3 {
  text-align: center;
}

.m3 > .m3-stats,
.m3 > .m3-shared,
.m3 > .m3-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.m3 > .m3-shared {
  color: var(--gold-text);
}

.m3 > .m3-said {
  min-height: 1.5em;
}

.m3-stats > span {
  white-space: nowrap;
}

.m3-frame {
  width: min(92vw, 440px, 100%, calc(100svh - 230px));
  min-width: 280px;
  margin: 0 auto;
}

.m3-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.m3-board:focus {
  outline: none;
}

.m3-board:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.m3-tile {
  stroke: transparent;
  stroke-width: 3;
}

.m3-cell:hover .m3-tile {
  fill-opacity: 0.22;
}

.m3-board.m3-keys:focus .m3-cur .m3-tile {
  stroke: #ffffff;
  stroke-dasharray: 5 3;
}

.m3-cell[aria-selected="true"] .m3-tile {
  stroke: var(--gold);
  stroke-dasharray: none;
  fill-opacity: 0.3;
}

.m3-hint .m3-tile {
  stroke: #9fd3ff;
  animation: m3-glow 1s ease-in-out infinite alternate;
}

@keyframes m3-glow {
  from {
    fill-opacity: 0.13;
  }
  to {
    fill-opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m3-hint .m3-tile {
    animation: none;
    fill-opacity: 0.4;
  }
}

.m3-tools {
  margin: 0.5rem 0;
}

.m3-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.m3-end .button:focus-visible,
.m3-tools .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
/* The Christmas solitaire (`puzzles::solitaire`, data-sol): the levels are the tic-tac-toe's links (`.ttt-switch`), */


.sol > .sol-stats,
.sol > .sol-shared,
.sol > .sol-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.sol > .sol-shared {
  color: var(--gold-text);
}

.sol > .sol-said {
  min-height: 1.5em;
}

.sol-stats > span {
  white-space: nowrap;
}

.sol-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sol-frame {
  max-width: calc(7 * 90px + 6 * 10px + 20px);
  margin: 0 auto;
}

.sol-table {
  --sol-gap: clamp(3px, 1.2vw, 10px);
  padding: clamp(4px, 1.5vw, 10px);
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 30%, #2e7d4f 0%, #1f6b3f 55%, #155232 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), inset 0 0 40px rgba(0, 0, 0, 0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.sol-top,
.sol-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sol-gap);
}

.sol-cols {
  margin-top: calc(var(--sol-gap) * 2 + 4px);
  align-items: stretch;
}

.sol-pile {
  position: relative;
  min-width: 0;
  aspect-ratio: 5 / 7;
  border-radius: 8%/5.7%;
  outline-offset: 2px;
}

.sol-stock,
.sol-base,
.sol-col:empty {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.12);
}

.sol-stock {
  cursor: pointer;
}

.sol-stock.sol-empty::after {
  content: "";
  position: absolute;
  inset: 28%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.sol-mark {
  position: absolute;
  inset: 25% 20%;
  width: 60%;
  height: 50%;
  color: rgba(255, 255, 255, 0.22);
}

.sol-col {
  aspect-ratio: auto;
  min-height: calc((100vw - 2rem) / 7 * 1.4);
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}

.sol-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 5 / 7;
  flex: none;
  border-radius: 8%/5.7%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  cursor: grab;
  outline-offset: 1px;
}

.sol-stock > .sol-card,
.sol-waste > .sol-card,
.sol-base > .sol-card {
  position: absolute;
  inset: 0;
}

.sol-col > .sol-card + .sol-card {
  margin-top: -100%;
}

.sol-col > .sol-card:not(.sol-up) + .sol-card {
  margin-top: -122%;
}

.sol-waste > .sol-x1 {
  left: 36%;
}

.sol-waste > .sol-x2 {
  left: 72%;
}

.sol-red {
  color: #c62828;
}

.sol-black {
  color: #1b1b1b;
}

.sol-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.sol-i {
  position: absolute;
  top: 4%;
  left: 6%;
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: clamp(14px, 3.9vw, 22px);
  letter-spacing: -0.04em;
}

.sol-si {
  width: 0.75em;
  height: 0.75em;
}

.sol-mid {
  position: absolute;
  inset: 40% 12% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sol-big {
  width: 80%;
  height: 100%;
}

.sol-hat {
  width: 62%;
  height: auto;
  margin-bottom: -6%;
}

.sol-fig {
  font-size: clamp(16px, 5.2vw, 34px);
}

.sol-card:not(.sol-up) {
  cursor: default;
}

.sol-card:focus-visible,
.sol-pile:focus-visible {
  outline: 3px solid #ffffff;
  z-index: 3;
}

.sol-won .sol-base > .sol-card:last-child {
  animation: sol-dance 0.9s ease-in-out 3;
}

.sol-won .sol-base:nth-child(5) > .sol-card:last-child {
  animation-delay: 0.15s;
}

.sol-won .sol-base:nth-child(6) > .sol-card:last-child {
  animation-delay: 0.3s;
}

.sol-won .sol-base:nth-child(7) > .sol-card:last-child {
  animation-delay: 0.45s;
}

@keyframes sol-dance {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-18%) rotate(-8deg);
  }
  60% {
    transform: translateY(-6%) rotate(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-won .sol-base > .sol-card:last-child {
    animation: none;
  }
}

@media (min-width: 700px) {
  .sol-col > .sol-card + .sol-card {
    margin-top: -108%;
  }

  .sol-col {
    min-height: calc(90px * 1.4);
  }
}

.sol-end .button:focus-visible,
.sol-tools .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* The Christmas mahjong (`puzzles::mahjong`, data-mj): the levels are the tic-tac-toe's links (`.ttt-switch`), then the
   points, the pairs left, the time, the best, the wins and the deal, „Show free tiles”, the board – one SVG scaled to the
   width of its box (its viewBox), on deep green felt: a tile at most 56 px wide on a computer (the box at most 1.4 × the
   viewBox), on a phone of 390 px the box takes the whole width of the screen so the turtle's 15 tiles stay ≥ 22 px wide –,
   what the game says and the buttons. The tiles are cream with a darker side (their thickness), each layer a little up
   and to the left of the one under it; with „Show free tiles” the blocked ones are dimmed. The tile picked has a thick
   blue frame, the hint's pair a green one, the focus of the keys a white one; the last pair flies off at a win – none of
   it moves with prefers-reduced-motion. */
.mj {
  text-align: center;
}

.mj > .mj-stats,
.mj > .mj-shared,
.mj > .mj-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.mj > .mj-shared {
  color: var(--gold-text);
}

.mj > .mj-said {
  min-height: 1.5em;
}

.mj-stats > span {
  white-space: nowrap;
}

.mj-show label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 1.0625rem;
  cursor: pointer;
}

.mj-show input {
  width: 1.4rem;
  height: 1.4rem;
}

.mj-frame {
  max-width: calc(338px * 1.4);
  margin: 0 auto;
  padding: clamp(2px, 1vw, 12px);
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 35%, #2e6b4a 0%, #1d5236 60%, #133d27 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), inset 0 0 40px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
}

/* The turtle is wider than the column of the text: its board out over it, centred, as wide as the screen allows. */
.mj-normal .mj-frame {
  width: min(calc(628px * 1.4), calc(100vw - 3rem));
  max-width: none;
  margin-left: 50%;
  translate: -50% 0;
}

.mj-board {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mj-tile {
  cursor: pointer;
  outline: none;
}

.mj-face {
  transition: fill 0.15s;
}

.mj-dim .mj-blocked {
  cursor: default;
}

.mj-dim .mj-blocked .mj-face {
  fill: #c9bfa6;
}

.mj-dim .mj-blocked .mj-pic,
.mj-dim .mj-blocked .mj-n {
  opacity: 0.45;
}

.mj-tile.mj-sel .mj-face {
  fill: #fff3b0;
  stroke: #0d47a1;
  stroke-width: 3.5;
}

.mj-tile.mj-hint .mj-face {
  stroke: #00c853;
  stroke-width: 3.5;
}

.mj-tile:focus-visible .mj-face {
  stroke: #ffffff;
  stroke-width: 3;
}

.mj-tile.mj-sel:focus-visible .mj-face {
  stroke: #0d47a1;
  stroke-width: 4;
}

.mj-tile:focus-visible .mj-side {
  stroke: #ffffff;
  stroke-width: 2;
}

.mj > .mj-stuck {
  color: var(--text);
  font-weight: 700;
}

.mj-won {
  animation: mj-glow 0.9s ease-out;
}

.mj-fly {
  animation: mj-fly 0.9s ease-in forwards;
  pointer-events: none;
}

@keyframes mj-glow {
  50% {
    box-shadow: inset 0 0 0 3px var(--gold), 0 0 28px rgba(255, 213, 79, 0.7);
  }
}

@media (max-width: 40rem) {
  /* Out over the padding of the page (`main.sheet` 1rem, `.block` 0.25rem): the whole width of the screen. */
  .mj-frame,
  .mj-normal .mj-frame {
    width: auto;
    max-width: none;
    margin: 0 -1.25rem;
    translate: none;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mj-face {
    transition: none;
  }

  .mj-won,
  .mj-fly {
    animation: none;
  }
}
/* ---------- Build a snowman, decorate a gingerbread man, make a snow globe, light up a house ---------- */

/* The four builders of the puzzles are `craft::Builder`s (their layout and tiles in the Craft section); here only the */


.globe-snow {
  position: absolute;
  top: 9.375%;
  left: 13.75%;
  width: 72.5%;
  height: 60.4167%;
  overflow: hidden;
  clip-path: circle(50%);
  pointer-events: none;
}

.globe-shake,
.houselights-twinkle {
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .globe-shake,
  .houselights-twinkle {
    display: none;
  }
}

/* The reindeer flight (`puzzles::reindeer_flight`, data-flight): the levels are the tic-tac-toe's links (`.ttt-switch`),
   then the obstacles passed, the best and the lives on easy, the board of 3 : 4 (one SVG, at most 92 % of the screen's
   width and short enough that it fits on a phone of 390 × 844 with its button), what the game says and the button „Fly
   up”, at least 44 px high. A tap on the board is a jump, not a scroll or a zoom (`touch-action: none` on the board
   only). The stars twinkle, unless prefers-reduced-motion. */
.flight {
  text-align: center;
}

.flight > .flight-stats,
.flight > .flight-shared,
.flight > .flight-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.flight > .flight-shared {
  color: var(--gold-text);
}

.flight-stats [data-flight-lives] {
  color: #ff6b6b;
}

.flight > .flight-said {
  min-height: 1.5em;
}

.flight:focus {
  outline: none;
}

.flight-frame {
  width: min(92vw, 420px, 100%, calc((100svh - 250px) * 0.75));
  min-width: 240px;
  margin: 0 auto;
}

.flight-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #081530;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.flight-star {
  animation: flight-twinkle 2.4s ease-in-out infinite alternate;
}

.flight-star-late {
  animation-delay: -1.2s;
}

@keyframes flight-twinkle {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flight-star {
    animation: none;
  }
}

.flight > .flight-pad {
  margin: 0.5rem 0;
}

.flight-up {
  min-width: 10rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--muted-night);
  border-radius: 0.75rem;
  background: rgb(23 18 15 / 0.06);
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.flight-up:hover {
  border-color: var(--text);
}

.flight-up:focus-visible,
.flight-end .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.flight-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
/* The present stack (`puzzles::present_stack`, data-stack): the levels are the tic-tac-toe's links (`.ttt-switch`), then */


.stack > .stack-shared,
.stack > .stack-said {
  margin: 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}

.stack > .stack-shared {
  color: var(--gold-text);
}

.stack > .stack-said {
  min-height: 1.5em;
}

.stack-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.stack-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text);
}

.stack-next-box,
.stack-next-box svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.stack-frame {
  position: relative;
  height: min(62vh, 520px, calc(100svh - 300px));
  min-height: 300px;
  aspect-ratio: 1 / 2;
}

.stack-picture,
.stack-board {
  display: block;
  width: 100%;
  height: 100%;
}

.stack-board {
  box-sizing: border-box;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.stack-cover {
  position: absolute;
  inset: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.375rem;
  background: rgba(8, 21, 48, 0.82);
}

.stack-cover > .stack-cover-text {
  margin: 0;
  color: var(--gold-text);
  font-size: 1.25rem;
  font-weight: 700;
}

.stack-cover .button:focus-visible,
.stack-key:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.stack-key {
  min-width: 3.25rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--muted-night);
  border-radius: 0.75rem;
  background: rgb(23 18 15 / 0.06);
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.stack-rotate,
.stack-key[data-stack-key="drop"] {
  font-size: 1.75rem;
}

.stack-key:hover {
  border-color: var(--text);
}

.stack-note {
  margin: 0.5rem 0;
}

@media (min-width: 640px) {
  .stack-game {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
  }

  .stack-side {
    flex-direction: column;
    align-items: flex-start;
    width: 10rem;
    text-align: left;
  }

  .stack-side > .stack-next {
    flex-direction: column;
    align-items: flex-start;
  }

  .stack-next-box,
  .stack-next-box svg {
    width: 5rem;
    height: 5rem;
  }

  .stack-side > .stack-stats {
    flex-direction: column;
    justify-content: flex-start;
    font-size: 1rem;
  }
}
/* The Christmas bubble shooter (`puzzles::bubble_shooter`, data-bubble): the levels are the tic-tac-toe's links */


.bubble > .bubble-shared,
.bubble > .bubble-said {
  margin: 0.25rem 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.bubble > .bubble-shared {
  color: var(--gold-text);
}

.bubble > .bubble-said {
  min-height: 1.5em;
}

.bubble-frame {
  position: relative;
  width: min(100%, calc(min(64vh, 540px, 100svh - 290px) * 2 / 3));
  min-width: 200px;
  margin: 0 auto;
  aspect-ratio: 2 / 3;
}

.bubble-picture,
.bubble-board {
  display: block;
  width: 100%;
  height: 100%;
}

.bubble-board {
  box-sizing: border-box;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bubble-cover {
  position: absolute;
  inset: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.375rem;
  background: rgba(8, 21, 48, 0.72);
}

.bubble-cover > .bubble-cover-text {
  margin: 0;
  color: var(--gold-text);
  font-size: 1.375rem;
  font-weight: 700;
}

.bubble-cover .button:focus-visible,
.bubble-key:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.bubble-key {
  min-width: 3.25rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--muted-night);
  border-radius: 0.75rem;
  background: rgb(23 18 15 / 0.06);
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.bubble-key.bubble-fire {
  min-width: 6rem;
  border-color: var(--gold);
  background: rgba(246, 184, 31, 0.18);
  font-size: 1.0625rem;
  font-weight: 700;
}

.bubble-key:hover {
  border-color: var(--text);
}

.bubble-note {
  margin: 0.5rem 0;
}
/* Catch the elf (`puzzles::catch_the_elf`, data-elf): the levels are the tic-tac-toe's links (`.ttt-switch`), then the */


.elf > .elf-shared,
.elf > .elf-said {
  margin: 0.25rem 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.elf > .elf-shared {
  color: var(--gold-text);
}

.elf > .elf-said {
  min-height: 1.5em;
}

.elf-picture {
  width: min(100%, 60vh, 92vw, 480px);
  min-width: 240px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.elf-board {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.elf-hole {
  cursor: pointer;
  outline: none;
}

.elf-who {
  transform: translateY(58px);
  transition: transform 0.12s ease-out;
}

.elf-who.elf-up {
  transform: none;
}

.elf-hole:focus-visible > .elf-ring {
  stroke: var(--gold);
  stroke-opacity: 1;
  stroke-width: 4;
}

.elf-hit > .elf-ring {
  fill: var(--gold);
  fill-opacity: 0.35;
}

.elf-ouch > .elf-ring {
  fill: #ef5350;
  fill-opacity: 0.45;
}

.elf-miss > .elf-ring {
  fill: #ffffff;
  fill-opacity: 0.15;
}

@media (prefers-reduced-motion: reduce) {
  .elf-who {
    transition: none;
  }
}

.elf-bar .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.elf-note {
  margin: 0.5rem 0;
}

/* The Christmas connect (`puzzles::connect`, data-cn): the levels are the tic-tac-toe's links (`.ttt-switch`), then the
   pairs left, time, hints, shuffles and best over the board (one SVG of flat tiles in a frame of one empty square), what
   the game says, the hint, shuffle and undo buttons, „Play again” and „Share your score”. The board is as wide as the
   screen allows and as high as leaves room for the rest on it (`--cn-aspect` its width over its height: across on a
   wide screen, upright – `cn-tall`, set by app.js – on a tall one; on a phone of 390 × 844 a tile about 44 px wide and
   all of it on the screen). A picked tile is lifted with a red edge and a pale face, a focused one has a gold dashed
   edge, the hint's pair a green one; a tap is the game's, not a zoom (`touch-action: manipulation`). Paused, the tiles
   are hidden. With prefers-reduced-motion nothing moves. */
.cn {
  gap: 0.5rem;
  text-align: center;
}

.cn > .cn-shared,
.cn > .cn-said {
  margin: 0.25rem 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.cn > .cn-shared {
  color: var(--gold-text);
}

.cn > .cn-said {
  min-height: 1.5em;
}

.cn-frame {
  --cn-aspect: 1.333;
  width: min(calc(100vw - 3rem), calc((100svh - 13rem) * var(--cn-aspect)));
  min-width: min(100%, 280px);
  margin-left: 50%;
  translate: -50% 0;
}

.cn-easy .cn-frame {
  --cn-aspect: 1.189;
}

.cn-frame.cn-tall {
  --cn-aspect: 0.629;
}

.cn-easy .cn-frame.cn-tall {
  --cn-aspect: 0.708;
}

@media (max-width: 40rem) {
  /* Out over the padding of the page (`main.sheet` 1rem, `.block` 0.25rem): the whole width of the screen. */
  .cn-frame {
    width: min(calc(100% + 2.5rem), calc((100svh - 12rem) * var(--cn-aspect)));
  }

  /* The levels on one line and the numbers on two: the word „Level” for a screen reader only, smaller type. */
  .cn > .ttt-switch {
    gap: 0.375rem;
    margin: 0;
  }

  .cn > .ttt-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cn > .ttt-switch a {
    padding: 0.6rem 0.625rem;
    font-size: 0.875rem;
  }

  .cn > .cn-stats {
    font-size: 0.8125rem;
  }

  .cn > .cn-said {
    margin: 0;
    font-size: 0.9375rem;
  }

  .cn-tools .button {
    padding-inline: 0.875rem;
    font-size: 0.9375rem;
  }
}

.cn-board {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cn-tile {
  cursor: pointer;
  outline: none;
}

.cn-in {
  transition: transform 0.12s ease-out, opacity 0.3s;
}

.cn-sel .cn-in {
  transform: translate(0, -4px);
}

.cn-sel .cn-face {
  fill: #fff0b3;
  stroke: #c62828;
  stroke-width: 3;
}

.cn-hint .cn-face {
  fill: #dcf5d6;
  stroke: #2e7d32;
  stroke-width: 3;
  animation: cn-pulse 0.9s ease-in-out 3;
}

.cn-tile:focus-visible .cn-face {
  stroke: #f6b81f;
  stroke-width: 3.5;
  stroke-dasharray: 6 3;
}

.cn-sel:focus-visible .cn-face {
  stroke: #c62828;
}

.cn-going .cn-in {
  opacity: 0.35;
}

.cn-line {
  pointer-events: none;
}

@keyframes cn-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-in {
    transition: none;
  }

  .cn-hint .cn-face {
    animation: none;
  }
}

.cn-tools .button,
.cn-end .button {
  min-height: 44px;
}

.cn-tools .button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The Christmas math game (`puzzles::math_game`, data-mg): the levels are the tic-tac-toe's links (`.ttt-switch`),
   then the points, trees, time and best over the tree (one SVG of 300 × 360, as tall as the screen leaves room for:
   at most 340 px wide and never wider than the column), the sum in big bright digits, three answer buttons (at least
   64 × 64 px, a row of three in 390 px), the box to type the answer in with „Check”, what the game says and Start –
   on a phone of 390 × 844 all of it on one screen at #play. A bauble drops in and swings a little when hung, the star
   pops up with the 10th; with prefers-reduced-motion they just appear. A tap is the game's, not a zoom
   (`touch-action: manipulation`); a focused button or box shows a gold ring. */
.mg {
  gap: 0.5rem;
  text-align: center;
}

.mg > .ttt-switch {
  margin: 0;
}

.mg > .mg-shared,
.mg > .mg-said {
  margin: 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.mg > .mg-shared {
  color: var(--gold-text);
}

.mg > .mg-said {
  min-height: 1.5em;
}

.mg-picture {
  width: min(100%, 340px, calc((100svh - 27rem) * 300 / 360));
  min-width: 180px;
  margin: 0 auto;
  aspect-ratio: 300 / 360;
}

.mg-board {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 3px solid #0d3b66;
  border-radius: 0.5rem;
  background: #0b1a33;
}

.mg-read {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mg > .mg-question {
  margin: 0;
  color: var(--text);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.mg > .mg-answers {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

.mg-answer {
  min-width: 64px;
  min-height: 64px;
  flex: 0 1 6.5rem;
  padding: 0 0.5rem;
  border: 3px solid #ffe082;
  border-radius: 0.875rem;
  background: #fff8e1;
  color: #1d2638;
  font: 800 2rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mg-answer:hover {
  background: #ffffff;
}

.mg-answer:focus-visible,
.mg-type > .mg-input:focus,
.mg-type .button:focus-visible,
.mg-bar .button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.mg-answer.mg-wrong {
  border-color: #b71c1c;
  background: #ef5350;
  color: #ffffff;
}

.mg-answer.mg-right {
  border-color: #1b5e20;
  background: #66bb6a;
  color: #0b2e10;
}

.mg > .mg-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted-night);
}

.mg-type > .mg-input {
  width: 5.5rem;
  min-height: 48px;
  padding: 0 0.5rem;
  border: 2px solid var(--muted-night);
  border-radius: 0.5rem;
  background: #ffffff;
  color: #1d2638;
  font: 800 1.75rem/1 var(--sans);
  text-align: center;
  touch-action: manipulation;
  transition: none;
}

.mg-type .button {
  min-height: 48px;
  touch-action: manipulation;
}

.mg-ball {
  opacity: 0;
}

.mg-bauble.mg-on > .mg-spot {
  opacity: 0;
}

.mg-bauble.mg-on > .mg-ball {
  opacity: 1;
  transform-origin: 0 -14px;
  animation: mg-drop 0.7s var(--ease-out);
}

.mg-star {
  opacity: 0;
}

.mg-star.mg-on {
  opacity: 1;
  transform-origin: 150px 30px;
  animation: mg-shine 0.6s var(--ease-out);
}

@keyframes mg-drop {
  0% {
    opacity: 0;
    transform: translateY(-28px);
  }
  45% {
    opacity: 1;
    transform: translateY(2px);
  }
  65% {
    transform: rotate(9deg);
  }
  85% {
    transform: rotate(-5deg);
  }
  100% {
    transform: none;
  }
}

@keyframes mg-shine {
  0% {
    transform: scale(0.2) rotate(-40deg);
  }
  70% {
    transform: scale(1.15) rotate(6deg);
  }
  100% {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-bauble.mg-on > .mg-ball,
  .mg-star.mg-on {
    animation: none;
  }
}

.mg > .mg-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.mg-note {
  margin: 0.5rem 0;
}

/* On a phone the levels on one line: the word „Level” for a screen reader only, smaller type. */
@media (max-width: 30rem) {
  .mg > .ttt-switch {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .mg > .ttt-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mg > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.4rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
}
/* The Christmas lights puzzle (`/puzzles/christmas-lights-puzzle`, `.lp-`): a board of square tiles touching each other */


.lp > .lp-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lp-s5,
.lp-s7 {
  --w: 5;
  --s: clamp(44px, calc((100vw - 2.75rem) / var(--w)), 64px);
}

.lp-s7 {
  --w: 7;
}

.lp-s9 {
  --w: 9;
  --s: clamp(38px, calc((100vw - 2.75rem) / var(--w)), 56px);
}

.lp-board {
  display: grid;
  grid-template-columns: repeat(var(--w), var(--s));
  width: max-content;
  margin: 0 auto;
  border: 3px solid #24406b;
  border-radius: 10px;
  overflow: hidden;
  background: #13294b;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.lp-row,
.lp-gc {
  display: contents;
}

.lp-tile {
  position: relative;
  display: block;
  width: var(--s);
  height: var(--s);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #13294b;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

.lp-tile[aria-disabled="true"] {
  cursor: default;
}

.lp-art {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lp-bg {
  stroke: #1c365f;
  stroke-width: 0.6;
}

.lp-lock .lp-bg {
  fill: #1d3d33;
}

.lp-turn {
  transform-origin: 20px 20px;
  transition: transform 0.16s ease-out;
}

.lp-wire {
  transition: stroke 0.15s;
}

.lp-on .lp-wire {
  stroke: #ffd54f;
}

.lp-on .lp-knot {
  fill: #ffd54f;
}

.lp-on .lp-glass {
  opacity: 0;
}

.lp-on .lp-lit {
  opacity: 1;
}

.lp-on .lp-glow {
  opacity: 0.45;
  filter: blur(2.5px);
}

.lp-won .lp-lit,
.lp-won .lp-glow {
  animation: lp-twinkle 0.7s ease-in-out 6 alternate;
}

.lp-won .lp-gc:nth-child(2n) .lp-lit,
.lp-won .lp-gc:nth-child(2n) .lp-glow {
  animation-delay: 0.35s;
}

@keyframes lp-twinkle {
  to {
    opacity: 0.35;
  }
}

.lp > .lp-said {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.lp > .lp-tools,
.lp > .lp-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.lp-shared {
  font-weight: 700;
  text-align: center;
}

.lp-picture {
  display: block;
  width: min(100%, 320px);
  margin: 0 auto;
  border: 3px solid #24406b;
  border-radius: 10px;
}

.lp-note {
  margin: 0.5rem 0 0;
  text-align: center;
}

/* On a phone the levels on one line: the word „Level” for a screen reader only, smaller type. */
@media (max-width: 30rem) {
  .lp > .ttt-switch {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .lp > .ttt-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lp > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.45rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .lp > .lp-tools {
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-turn,
  .lp-wire {
    transition: none;
  }

  .lp-won .lp-lit,
  .lp-won .lp-glow {
    animation: none;
  }
}
/* The Christmas checkers (`/puzzles/christmas-checkers`, `.ck-`): a board of 8 × 8 in a dark-red frame, its light */


.ck > .ck-differ {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  text-align: center;
}

.ck > .ck-stats {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ck-board {
  --ck: clamp(42px, calc((100vw - 2.75rem - 12px) / 8), 64px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, var(--ck));
  width: max-content;
  margin: 0 auto;
  border: 6px solid #6e1424;
  border-radius: 8px;
  overflow: hidden;
  background: #f3ead2;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ck-row,
.ck-cell {
  display: contents;
}

.ck-light {
  display: block;
  width: var(--ck);
  height: var(--ck);
  background: #f3ead2;
}

.ck-sq {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ck);
  height: var(--ck);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0f3b22;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ck-sq:focus-visible {
  z-index: 2;
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

.ck-piece {
  position: relative;
  z-index: 1;
  display: block;
  width: 88%;
  height: 88%;
  pointer-events: none;
}

.ck-last {
  background: #1b5a35;
}

.ck-sel {
  box-shadow: inset 0 0 0 4px #ffd23f;
}

.ck-must::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px dashed #ffd23f;
  border-radius: 50%;
}

.ck-goal::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 30%;
  height: 30%;
  border: 2px solid #6b4100;
  border-radius: 50%;
  background: #ffd23f;
}

.ck-won::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle, #ffffffcc 0 1.5px, transparent 2.5px);
  background-size: 60px 60px, 37px 37px;
  background-position: 0 0, 18px 11px;
  animation: ck-snow 4s linear infinite;
}

.ck-won .ck-piece {
  animation: ck-twinkle 0.6s ease-in-out 8 alternate;
}

.ck-won .ck-cell:nth-child(2n) .ck-piece {
  animation-delay: 0.3s;
}

@keyframes ck-snow {
  to {
    background-position: 0 240px, 18px 159px;
  }
}

@keyframes ck-twinkle {
  to {
    filter: brightness(1.35) drop-shadow(0 0 4px #ffe58a);
  }
}

.ck > .ck-said {
  min-height: 1.5em;
  margin: 0 0 0.6rem;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.ck > .ck-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.ck-shared {
  font-weight: 700;
  text-align: center;
}

.ck-picture {
  display: block;
  width: min(100%, 340px);
  margin: 0 auto;
}

.ck-note {
  margin: 0.5rem 0 0;
  text-align: center;
}

/* On a phone the rules and the modes on one line each: their labels for a screen reader only, smaller type. */
@media (max-width: 30rem) {
  .ck > .ttt-switch {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .ck > .ttt-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ck > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-won::after,
  .ck-won .ck-piece {
    animation: none;
  }
}

.ck-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* The Christmas chess (`/puzzles/christmas-chess`, `.chs-`): a board of 8 × 8 in a dark-red frame, its dark squares */


.chs > .chs-stats {
  margin: 0.4rem 0 0;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chs-board {
  --chs: clamp(42px, calc((100vw - 2.75rem - 12px) / 8), 64px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, var(--chs));
  width: max-content;
  margin: 0 auto;
  border: 6px solid #6e1424;
  border-radius: 8px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.chs-row,
.chs-cell {
  display: contents;
}

.chs-sq {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--chs);
  height: var(--chs);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f3ead2;
  color: #2f6b45;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chs-sq.chs-dark {
  background: #2f6b45;
  color: #f3ead2;
}

.chs-sq:focus-visible {
  z-index: 2;
  outline: 3px solid #ffffff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px #1f3150;
}

.chs-rank,
.chs-file {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.chs-rank {
  top: 2px;
  left: 3px;
}

.chs-file {
  right: 3px;
  bottom: 2px;
}

.chs-piece {
  position: relative;
  z-index: 1;
  display: block;
  width: 92%;
  height: 92%;
  pointer-events: none;
}

.chs-sq.chs-last {
  background: #e8d27a;
}

.chs-sq.chs-dark.chs-last {
  background: #8a9a3c;
}

.chs-sq.chs-check {
  background: radial-gradient(circle, #ff4d4d 0 35%, #b3001b 75%);
}

.chs-sel {
  box-shadow: inset 0 0 0 4px #ffd23f;
}

.chs-goal::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 28%;
  height: 28%;
  border: 2px solid #6b4100;
  border-radius: 50%;
  background: #ffd23f;
}

.chs-hit::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 3px;
  border: 4px solid #ffd23f;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #6b4100, inset 0 0 0 2px #6b4100;
  pointer-events: none;
}

.chs-won::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle, #ffffffcc 0 1.5px, transparent 2.5px);
  background-size: 60px 60px, 37px 37px;
  background-position: 0 0, 18px 11px;
  animation: chs-snow 4s linear infinite;
}

@keyframes chs-snow {
  to {
    background-position: 0 240px, 18px 159px;
  }
}

.chs > .chs-said {
  min-height: 1.5em;
  margin: 0 0 0.5rem;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.chs > .chs-lost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 2px;
  min-height: 26px;
  margin: 0.25rem 0;
  font-size: 0.85rem;
  text-align: center;
}

.chs-mini {
  width: 22px;
  height: 22px;
}

.chs-lost > .chs-mini:first-of-type {
  margin-left: 0.4rem;
}

.chs > .chs-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.chs > .chs-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  max-width: 34rem;
  max-height: 7.5rem;
  margin: 0.6rem auto 0;
  padding: 0.4rem 0.6rem 0.4rem 2.2rem;
  overflow-y: auto;
  font-variant-numeric: tabular-nums;
}

.chs-moves > li {
  min-width: 6.5rem;
}

.chs-promo {
  padding: 1rem;
  border: 3px solid #ffd23f;
  border-radius: 12px;
  background: #fffaf0;
  color: #2a1a10;
}

.chs-promo::backdrop {
  background: rgb(0 0 0 / 55%);
}

.chs-promo-title {
  margin: 0 0 0.75rem;
  font-weight: 700;
  text-align: center;
}

.chs-promo-row {
  display: flex;
  gap: 0.5rem;
}

.chs-promo-pick {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 64px;
  padding: 0.4rem;
  border: 2px solid #2f6b45;
  border-radius: 8px;
  background: #2f6b45;
  color: #f3ead2;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  touch-action: manipulation;
}

.chs-promo-pick:focus-visible {
  outline: 3px solid #1f3150;
  outline-offset: 2px;
}

.chs-promo-pick .chs-piece {
  width: 48px;
  height: 48px;
}

.chs-shared {
  font-weight: 700;
  text-align: center;
}

.chs-rules {
  padding-left: 1.2rem;
}

.chs-picture {
  display: block;
  width: min(100%, 340px);
  margin: 0 auto;
}

.chs-note {
  margin: 0.5rem 0 0;
  text-align: center;
}

.chs-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* On a phone the modes and the colours on one line each: their labels for a screen reader only, smaller type. */
@media (max-width: 30rem) {
  .chs > .ttt-switch {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .chs > .ttt-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .chs > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .chs-promo-pick {
    min-width: 0;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chs-won::after {
    animation: none;
  }
}
/* The Christmas piano (`/puzzles/christmas-piano` and its songs, `.piano-`): 17 keys from C4 to E5, the white ones */


.piano-bar,
.piano-tools,
.piano-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.piano-pick {
  display: flex;
  flex: 1 1 16rem;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
}

.piano-pick > select {
  flex: 1;
  min-width: 0;
  width: auto;
}

.piano-said {
  margin: 0;
  font-weight: 700;
  min-height: 1.5em;
}

.piano-count {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.piano-progress {
  flex: 1;
  max-width: 280px;
  height: 0.75rem;
  accent-color: #e53935;
}

.piano-keys {
  --w: min(8.8vw, 56px);
  --bw: calc(var(--w) * 0.62);
  position: relative;
  display: flex;
  width: calc(var(--w) * 10);
  height: calc(var(--w) * 4);
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.piano-key {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0.45rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 60ms ease-out, background-color 60ms ease-out;
}

.piano-key:disabled {
  cursor: default;
  opacity: 1;
}

.piano-white {
  flex: 0 0 var(--w);
  height: 100%;
  background: #fffdf6;
  color: #3a2f25;
  border: 1px solid #8a7d6a;
  border-radius: 0 0 7px 7px;
  font-size: clamp(0.62rem, 2.6vw, 0.95rem);
}

.piano-black {
  position: absolute;
  top: 0;
  z-index: 1;
  width: var(--bw);
  height: 60%;
  left: calc(var(--w) * var(--at) - var(--bw) / 2);
  background: #1d1d24;
  color: #f3ead2;
  border: 1px solid #000;
  border-radius: 0 0 5px 5px;
  font-size: clamp(0.45rem, 1.9vw, 0.7rem);
  padding-bottom: 0.3rem;
}

.piano-name {
  overflow-wrap: anywhere;
  text-align: center;
}

.piano-bare .piano-name {
  visibility: hidden;
}

/* The computer's key, where there is a mouse (and likely a keyboard). */
.piano-key::after {
  display: none;
  content: attr(data-pc);
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 0.2rem;
}

@media (hover: hover) and (pointer: fine) {
  .piano-key::after {
    display: block;
  }
}

.piano-key:focus-visible {
  outline: 3px solid #f2b705;
  outline-offset: -5px;
}

.piano-white.piano-down {
  background: #ffe28a;
  transform: translateY(2px);
}

.piano-black.piano-down {
  background: #5a4b1a;
  transform: translateY(2px);
}

.piano-key.piano-lit {
  background: #7fd18b;
  color: #10351a;
}

.piano-key.piano-next {
  background: #e53935;
  color: #fff;
}

/* The dot of the next key. */
.piano-key.piano-next::before {
  content: "";
  position: absolute;
  top: 34%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #7d1717;
}

.piano-black.piano-next::before {
  top: 20%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-width: 2px;
}

.piano-songs {
  columns: 2 14rem;
}

.piano-lines {
  font-size: 1.15rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@media (orientation: landscape) and (max-height: 500px) {
  .piano-keys {
    height: min(calc(var(--w) * 4), 52vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .piano-key {
    transition: none;
  }

  .piano-white.piano-down,
  .piano-black.piano-down {
    transform: none;
  }
}
/* The Christmas reversi (`/puzzles/christmas-reversi`, `.rv-`): a board of 8 × 8 on a dark-green table with a faint */


.rv > .rv-said {
  min-height: 1.5em;
  margin: 0 0 0.4rem;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.rv > .rv-count {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.rv-board {
  --rv: clamp(42px, calc((100vw - 2.75rem - 10px) / 8), 60px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, var(--rv));
  width: max-content;
  margin: 0 auto;
  border: 5px solid #6e1424;
  border-radius: 8px;
  overflow: hidden;
  background: #1f5c3a;
  box-shadow: inset 1px 1px 0 #c9a54a;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.rv-row,
.rv-cell {
  display: contents;
}

.rv-sq {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--rv);
  height: var(--rv);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0 5px, transparent 5px 10px), #1f5c3a;
  box-shadow: inset -1px -1px 0 #c9a54a;
  color: #f6e7bb;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.rv-sq:focus-visible {
  z-index: 2;
  outline: 3px solid #ffffff;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 6px #10301e;
}

.rv-rank,
.rv-file {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.rv-rank {
  top: 2px;
  left: 3px;
}

.rv-file {
  right: 4px;
  bottom: 3px;
}

.rv-disc {
  position: relative;
  z-index: 1;
  display: block;
  width: 86%;
  height: 86%;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 45%));
}

.rv-goal::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 26%;
  height: 26%;
  border: 2px solid #5b3a00;
  border-radius: 50%;
  background: #ffd23f;
  pointer-events: none;
}

.rv-hide .rv-goal::after {
  display: none;
}

.rv-last::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #e3262f;
  pointer-events: none;
}

.rv-won {
  animation: rv-twinkle 1.2s ease-in-out infinite alternate;
}

.rv-won::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle, #ffffffcc 0 1.5px, transparent 2.5px);
  background-size: 60px 60px, 37px 37px;
  background-position: 0 0, 18px 11px;
  animation: rv-snow 4s linear infinite;
}

@keyframes rv-snow {
  to {
    background-position: 0 240px, 18px 159px;
  }
}

@keyframes rv-twinkle {
  to {
    border-color: #c9a54a;
    box-shadow: 0 0 18px 4px rgb(255 210 63 / 60%);
  }
}

.rv > .rv-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.rv > .rv-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.rv-hints {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  cursor: pointer;
}

.rv-hints > input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #c9a54a;
}

.rv-shared {
  font-weight: 700;
  text-align: center;
}

.rv-rules {
  padding-left: 1.2rem;
}

.rv-picture {
  display: block;
  width: min(100%, 340px);
  margin: 0 auto;
}

.rv-note {
  margin: 0.5rem 0 0;
  text-align: center;
}

.rv-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* On a phone the modes and the sides on one line each: their labels for a screen reader only, smaller type. */
@media (max-width: 30rem) {
  .rv > .ttt-switch {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .rv > .ttt-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rv > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-won,
  .rv-won::after {
    animation: none;
  }
}
/* The Christmas sea battle (`/puzzles/christmas-sea-battle`, `.sb-`): two boards of 10 × 10 squares on a winter sea – */


.sb > .sb-said {
  min-height: 1.5em;
  margin: 0 0 0.4rem;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.sb-place > .sb-bad {
  margin: 0 0 0.4rem;
  color: #ffb4b4;
  font-weight: 700;
  text-align: center;
}

.sb > .sb-tools,
.sb-place > .sb-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.sb-arrow {
  min-width: 44px;
  font-size: 1.1rem;
}

.sb > .sb-view {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
}

.sb-view > [aria-pressed="true"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.sb-seas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem 1.25rem;
}

.sb-placing > [data-sb-side="sea"] {
  display: none;
}

.sb-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sb-side > .sb-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.sb-board {
  --sb: clamp(32px, calc((100vw - 34px) / 10.4), 36px);
  --lab: 18px;
  position: relative;
  display: grid;
  grid-template-columns: var(--lab) repeat(10, var(--sb));
  grid-template-rows: var(--lab) repeat(10, var(--sb));
  border: 3px solid #0b2342;
  border-radius: 8px;
  background: #0b2342;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.sb-board::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--lab);
  left: var(--lab);
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 20px 7px at 18% 82%, rgb(220 236 255 / 45%) 96%, transparent),
    radial-gradient(ellipse 15px 6px at 84% 14%, rgb(220 236 255 / 40%) 96%, transparent),
    radial-gradient(ellipse 24px 8px at 62% 56%, rgb(220 236 255 / 22%) 96%, transparent),
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 75%) 0 1px, transparent 1.6px) 0 0 / 47px 47px,
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 55%) 0 1px, transparent 1.6px) 0 0 / 31px 31px,
    linear-gradient(#14406e, #0b2342);
}

.sb-head,
.sb-row,
.sb-cell {
  display: contents;
}

.sb-head > span,
.sb-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #e9f3ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.sb-sq {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--sb);
  height: var(--sb);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset -1px -1px 0 rgb(233 243 255 / 24%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sb-sq:hover {
  background: rgb(255 255 255 / 8%);
}

.sb-sq:focus-visible {
  z-index: 4;
  outline: 3px solid #ffd23f;
  outline-offset: -3px;
}

.sb-sq.sb-sunk {
  background: rgb(4 10 24 / 42%);
}

.sb-sq[data-mark="dot"] {
  background: rgb(207 227 247 / 16%);
}

.sb-layer {
  position: absolute;
  z-index: 1;
  top: var(--lab);
  left: var(--lab);
  display: grid;
  grid-template-columns: repeat(10, var(--sb));
  grid-template-rows: repeat(10, var(--sb));
  pointer-events: none;
}

.sb-ship {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1px;
  box-sizing: border-box;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 55%));
}

.sb-ship.sb-ghost {
  opacity: 0.55;
}

.sb-ship.sb-picked {
  border-radius: 10px;
  outline: 3px solid #ffd23f;
  outline-offset: -1px;
  background: rgb(255 210 63 / 22%);
}

.sb-ship.sb-bad {
  border-radius: 10px;
  outline: 3px dashed #ff4b4b;
  outline-offset: -1px;
  background: rgb(255 75 75 / 40%);
}

.sb-mark {
  position: relative;
  width: 78%;
  height: 78%;
  pointer-events: none;
}

.sb-mark.sb-dot {
  width: 60%;
  height: 60%;
}

/* A sunk ship's picture stays visible under a smaller cross. */
.sb-mark.sb-wreck {
  width: 56%;
  height: 56%;
}

.sb-fresh > .sb-mark {
  animation: sb-pop 0.45s ease-out;
}

.sb-fresh::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 3px dotted #ffd23f;
  border-radius: 50%;
  pointer-events: none;
  animation: sb-burst 0.6s ease-out forwards;
}

@keyframes sb-pop {
  from {
    transform: scale(0.2) rotate(-40deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.25);
  }
}

@keyframes sb-burst {
  from {
    transform: scale(0.3);
    opacity: 1;
  }

  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

.sb-side > .sb-left {
  margin: 0.6rem 0 0.2rem;
  font-weight: 700;
}

.sb-side > .sb-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.8rem;
  max-width: 24rem;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  list-style: none;
}

.sb-list > .sb-gone > .sb-name {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.65;
}

.sb-len {
  color: #5fb4ff;
  font-size: 0.6rem;
  letter-spacing: 1px;
}

.sb-gone > .sb-len {
  color: #ff7a59;
}

.sb > .sb-curtain {
  display: block;
  width: 100%;
  min-height: 18rem;
  margin: 0.5rem 0;
  padding: 2rem 1rem;
  border: 3px solid #e9f3ff;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 70%) 0 1.5px, transparent 2.2px) 0 0 / 38px 38px,
    linear-gradient(#14406e, #0b2342);
  color: #ffffff;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.sb > .sb-curtain:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 3px;
}

.sb-won::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle, #ffffffcc 0 1.5px, transparent 2.5px);
  background-size: 60px 60px, 37px 37px;
  background-position: 0 0, 18px 11px;
  animation: sb-snow 4s linear infinite;
}

@keyframes sb-snow {
  to {
    background-position: 0 240px, 18px 159px;
  }
}

.sb > .sb-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.sb-around {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  cursor: pointer;
}

.sb-around > input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #5fb4ff;
}

.sb-shared {
  font-weight: 700;
  text-align: center;
}

.sb-rules {
  padding-left: 1.2rem;
}

.sb-picture {
  display: block;
  width: min(100%, 380px);
  margin: 0 auto;
}

.sb-note {
  margin: 0.5rem 0 0;
  text-align: center;
}

.sb-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Both boards side by side where the screen is wide enough: out of the text column, centred on it. */
@media (min-width: 52rem) {
  .sb-seas {
    width: min(calc(100vw - 3rem), 50rem);
    margin-left: 50%;
    translate: -50% 0;
  }
}
/* The switch of the boards only on a phone; there one board at a time, out over the page's padding. */


@media (prefers-reduced-motion: reduce) {
  .sb-won::after,
  .sb-fresh > .sb-mark,
  .sb-fresh::after {
    animation: none;
  }

  .sb-fresh::after {
    display: none;
  }
}
/* The Christmas snakes and ladders (`/puzzles/christmas-snakes-and-ladders`, `.snl-`): one board of 10 × 10 squares in */


.snl {
  gap: 0.75rem;
}

.snl > .snl-said {
  min-height: 3em;
  margin: 0;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.snl > .snl-shared {
  margin: 0;
  font-weight: 700;
  text-align: center;
}

.snl-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.snl-seat {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--night-up);
}

.snl-seat.snl-now {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(232 182 76 / 25%);
}

.snl-pawn {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
}

.snl-who {
  min-width: 0;
  line-height: 1.25;
}

.snl-at {
  font-variant-numeric: tabular-nums;
  color: var(--muted-night);
  font-size: 0.9rem;
  white-space: nowrap;
}

.snl-seat > .snl-cpu {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  font-size: 0.9rem;
}

.snl-cpu > input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
}

.snl-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
}

.snl-die {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
}

.snl-rolling {
  animation: snl-shake 0.42s linear;
}

@keyframes snl-shake {
  25% {
    transform: rotate(-18deg) scale(1.08);
  }

  50% {
    transform: rotate(14deg) translateY(-4px);
  }

  75% {
    transform: rotate(-8deg) scale(1.05);
  }
}

.snl-controls > .snl-roll {
  min-width: 12rem;
  min-height: 3.5rem;
  font-size: 1.2rem;
  touch-action: manipulation;
}

.snl-roll[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.snl-roll:focus-visible,
.snl-cpu > input:focus-visible,
.snl-sixes > input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.snl-sixes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
}

.snl-board {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  touch-action: manipulation;
}

.snl-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
}

.snl-piece {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%));
}

.snl-won::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffffff 0 2.5px, transparent 3.5px),
    radial-gradient(circle, #ffffffcc 0 1.5px, transparent 2.5px);
  background-size: 64px 64px, 39px 39px;
  background-position: 0 0, 19px 11px;
  animation: snl-snow 4s linear infinite;
}

@keyframes snl-snow {
  to {
    background-position: 0 256px, 19px 156px;
  }
}

.snl > .snl-print {
  margin: 0;
  color: var(--muted-night);
  font-size: 0.95rem;
  text-align: center;
}

.snl > .snl-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.snl-stats {
  color: var(--muted-night);
  font-size: 0.9rem;
}

.snl-rules {
  display: grid;
  gap: 0.5rem;
}

@media (max-width: 30rem) {
  .snl > .snl-board {
    width: auto;
    margin: 0 -1rem;
  }

  .snl > .ttt-switch {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .snl > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.45rem;
    font-size: 0.8rem;
    touch-action: manipulation;
  }

  .snl-players {
    grid-template-columns: 1fr 1fr;
  }

  .snl-seat {
    grid-template-columns: 2rem 1fr;
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
  }

  .snl-pawn {
    width: 2rem;
    height: 2rem;
  }

  .snl-at {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snl-rolling,
  .snl-won::after {
    animation: none;
  }
}
/* The Christmas Ludo (`/puzzles/christmas-ludo`, `.ld-`): one board of 15 × 15 squares shaped as a cross in a dark-green */


.ld > .ld-said {
  min-height: 3em;
  margin: 0;
  color: var(--gold-text);
  font-weight: 700;
  text-align: center;
}

.ld > .ld-shared {
  margin: 0;
  font-weight: 700;
  text-align: center;
}

.ld-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ld-seat {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: 0 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--night-up);
}

.ld-seat.ld-now {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(232 182 76 / 25%);
}

.ld-seat > span:first-child {
  grid-row: span 2;
}

.ld-pawn {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.ld-who {
  min-width: 0;
  line-height: 1.25;
}

.ld-at {
  grid-column: 2;
  font-variant-numeric: tabular-nums;
  color: var(--muted-night);
  font-size: 0.9rem;
  white-space: nowrap;
}

.ld-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
}

.ld-die {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
}

.ld-rolling {
  animation: ld-shake 0.42s linear;
}

@keyframes ld-shake {
  25% {
    transform: rotate(-18deg) scale(1.08);
  }

  50% {
    transform: rotate(14deg) translateY(-4px);
  }

  75% {
    transform: rotate(-8deg) scale(1.05);
  }
}

.ld-controls > .ld-roll {
  min-width: 12rem;
  min-height: 3.5rem;
  font-size: 1.2rem;
  touch-action: manipulation;
}

.ld-roll[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.ld-roll:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.ld-board {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  touch-action: manipulation;
}

.ld-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}

.ld-token {
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%));
}

.ld-ring {
  opacity: 0;
}

.ld-token.ld-can {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}

.ld-can .ld-ring {
  opacity: 1;
  animation: ld-pulse 0.9s ease-in-out infinite alternate;
}

.ld-can:focus-visible .ld-ring {
  stroke: #ffffff;
  stroke-width: 9px;
  animation: none;
}

@keyframes ld-pulse {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

.ld-dest {
  cursor: pointer;
  stroke: #e8a400;
  stroke-width: 7px;
}

.ld-won::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffffff 0 2.5px, transparent 3.5px),
    radial-gradient(circle, #ffffffcc 0 1.5px, transparent 2.5px);
  background-size: 64px 64px, 39px 39px;
  background-position: 0 0, 19px 11px;
  animation: ld-snow 4s linear infinite;
}

@keyframes ld-snow {
  to {
    background-position: 0 256px, 19px 156px;
  }
}

.ld > .ld-print {
  margin: 0;
  color: var(--muted-night);
  font-size: 0.95rem;
  text-align: center;
}

.ld > .ld-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.ld-stats {
  color: var(--muted-night);
  font-size: 0.9rem;
}

.ld-rules {
  display: grid;
  gap: 0.5rem;
}

@media (max-width: 30rem) {
  .ld > .ld-board {
    width: auto;
    margin: 0 -1rem;
  }

  .ld > .ttt-switch {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .ld > .ttt-switch a {
    min-height: 40px;
    padding: 0.5rem 0.45rem;
    font-size: 0.8rem;
    touch-action: manipulation;
  }

  .ld-players {
    grid-template-columns: 1fr 1fr;
  }

  .ld-seat {
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
  }

  .ld-pawn {
    width: 2rem;
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ld-rolling,
  .ld-won::after,
  .ld-can .ld-ring {
    animation: none;
  }
}