/*
 * 30 Second Genius — additions shared by the game pages (step 1a.5).
 * Plain CSS on purpose: each game ships a prebuilt Tailwind file, so new
 * Tailwind classes would not work there.
 * 4d: colors only from the tokens in theme.css (made from src/ui/theme.css);
 * the header and footer look like the main page's.
 */

/* ---- Page frame: paper background, system fonts, footer at the bottom ---- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-wrap: anywhere;
}

body > main {
  flex: 1 0 auto;
  /* 5b (R7): game text at least 18 px, like the app (its root is 18 px). */
  font-size: 1.125rem;
}

/*
 * 5b (R7): the prebuilt Tailwind sizes text-sm (14 px) and text-base (16 px)
 * become 18 px in the games. Their files sit in a CSS layer, so these win.
 */
:root {
  --text-sm: 1.125rem;
  --text-sm--line-height: 1.5;
  --text-base: 1.125rem;
  --text-base--line-height: 1.5;
}

h1,
h2 {
  font-family: var(--font-serif);
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}


/* ---- Buttons: at least 48 px tall, 14 px corners, like the app ---- */
main button[class*="min-h-11"],
main button[class*="min-h-12"],
#restart-button,
#reset-button {
  min-height: 48px;
  border-radius: 14px;
  font-size: 1.125rem;
}

/*
 * 5b (R7): everything you tap or choose in a game is at least 48 px tall.
 * The cards and letters have their own sizes: Solitaire cards fit 7 columns,
 * Word Search letters (below) and Memory cards (at least 64 px).
 */
main select,
main button:not(.playing-card, .card-slot, .tsg-ws-board button, .tsg-memory-board button) {
  min-height: 48px;
}

/*
 * 5b (R6, WCAG 1.4.11): the edge of everything you can tap or type in is the
 * control color, 2 px like the app (slate-300 in the prebuilt files points at
 * it, see scripts/make-games-theme.mjs). The light rule is for decoration only.
 */
main select {
  border-width: 2px;
  border-color: var(--color-control);
  border-radius: 14px;
  font-size: 1.125rem;
}

main button.border {
  border-width: 2px;
  border-color: var(--color-control);
}

/*
 * "← Back to 30 Second Genius" at the top of every game. P15 (3, docs/source/design/szkic_powrot_*.png):
 * a red outlined button (no red fill: in the games only Snake's "Start" is filled), in the middle as before.
 */
.tsg-back {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem 0;
}

.tsg-back a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-card);
  border: 2px solid var(--color-primary);
  border-radius: 14px;
}

.tsg-back a:hover {
  color: var(--color-deep);
  border-color: var(--color-deep);
}

.tsg-back a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* Snake: on-screen controls under the board. */
.tsg-snake-pad {
  max-width: 680px;
  margin: 1rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* A finger sliding over the arrows never scrolls the page or selects text. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tsg-snake-pad button {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--color-text);
  background: var(--color-card);
  border: 2px solid var(--color-control);
  border-radius: 0.75rem;
  cursor: pointer;
}

.tsg-snake-pad button:active {
  background: var(--color-page);
}

.tsg-snake-pad button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.tsg-pause {
  min-width: 10rem;
  min-height: 56px;
  padding: 0 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* A cross: up on top, left and right in the middle, down below. */
.tsg-arrows {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  grid-template-rows: repeat(3, 72px);
  gap: 0.5rem;
}

.tsg-arrow {
  width: 72px;
  height: 72px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.tsg-up { grid-column: 2; grid-row: 1; }
.tsg-left { grid-column: 1; grid-row: 2; }
.tsg-right { grid-column: 3; grid-row: 2; }
.tsg-down { grid-column: 2; grid-row: 3; }

/* Read by screen readers, not shown. */
.tsg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Word Search: cells at least 32 px, the whole board without sideways
 * scrolling from 320 px (gap and padding = cellGapPx and boardPaddingPx
 * in word_search/src/js/config.js).
 */
.tsg-ws-board {
  gap: 2px;
  padding: 4px;
}

.tsg-ws-board button {
  min-width: 32px;
  font-size: 1.125rem;
  line-height: 1;
}

/* The first letter picked: deep red, so it never looks like a found word. */
.tsg-ws-board button.tsg-ws-selected {
  background-color: var(--color-deep);
  color: var(--color-card);
}

.tsg-ws-board button.tsg-ws-found {
  font-weight: 900;
}

/*
 * One light color per found word (word_search/src/js/config.js), all made from
 * palette A2; dark text on each one at least 4.5:1 (src/ui/wordSearch.test.ts).
 */
:root {
  --tsg-word-1: var(--color-highlight);
  --tsg-word-2: var(--color-ok-bg);
  --tsg-word-3: color-mix(in srgb, var(--color-primary) 25%, var(--color-card));
  --tsg-word-4: var(--color-rule);
  --tsg-word-5: color-mix(in srgb, var(--color-ok) 30%, var(--color-card));
  --tsg-word-6: color-mix(in srgb, var(--color-highlight) 55%, var(--color-primary));
  --tsg-word-7: color-mix(in srgb, var(--color-muted) 25%, var(--color-card));
  --tsg-word-8: color-mix(in srgb, var(--color-ok) 15%, var(--color-highlight));
}

/* Words to find: found ones keep the word's color and are crossed out. */
.tsg-ws-word,
.tsg-ws-found-word {
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}

.tsg-ws-found-word {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/*
 * 5b (R6): the letters sit on the control color, so the edge of every letter
 * you can tap shows (at least 3:1), not only the letter itself.
 */
.tsg-ws .tsg-ws-board {
  background-color: var(--color-control);
}

/* Narrow phones: less padding around the board, so the cells stay large. */
@media (max-width: 479px) {
  .tsg-ws main,
  .tsg-memory main {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tsg-ws main {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .tsg-ws main > section {
    padding: 0.75rem;
  }

  .tsg-memory main > section {
    padding: 0.5rem;
  }

  /*
   * 5b: Word Search on a phone is the Easy 8 × 8 board (word_search/src/js/
   * game.js, boardSizeForScreen). It reaches into the card's padding, so at
   * 390 px every letter is at least 44 px (at 320 px about 35 px).
   */
  .tsg-ws .tsg-ws-board {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
  }

  .tsg-ws-board button {
    font-size: 1.375rem;
  }

  /* P3 (H3): Hard is 9 × 9 on a phone; a thinner gap keeps every letter at least 32 px from 320 px. */
  .tsg-ws .tsg-ws-board[data-size="9"] {
    gap: 1px;
  }
}


/*
 * P14 (3; docs/source/design/szkic_p14_gry_*_v2.png): one look for every choice under the links —
 * Word Search and Memory (Easy · Medium · Hard), Snake (Board, Speed). Separate outlined buttons,
 * at least 48 px; on a computer as wide as their words and on the left, on a phone three equal
 * buttons across the whole width. The words never break.
 */
.tsg-choice {
  margin-top: 0.75rem;
}

.tsg-level-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.tsg-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.375rem 0.5rem;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-card);
  border: 2px solid var(--color-control);
  border-radius: 14px;
  cursor: pointer;
}

.tsg-level:not([aria-pressed="true"]):hover {
  border-color: var(--color-primary);
}

@media (min-width: 640px) {
  .tsg-level-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .tsg-level {
    padding: 0.375rem 1.25rem;
  }
}

/*
 * D25 (P12, docs/source/design/szkic_wybrane_opcje.png, variant A): one look for a chosen
 * option, as in the app (src/style.css, .tsg-pick): the level and the Timer's "On" are filled
 * in the ink color with white bold letters; red is only for Snake's "Start".
 */
.tsg-level[aria-pressed="true"],
.tsg-timer-switch[aria-checked="true"] .tsg-timer-state {
  color: var(--color-card);
  background: var(--color-text);
  border-color: var(--color-text);
  font-weight: 700;
}

.tsg-level:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/*
 * Memory board: 4 columns, every card at least 64 px (5 columns for 20 cards
 * on a larger screen). 5b: 12 cards are 3 rows of 4, so the whole Easy board
 * fits on a 390 × 844 phone screen.
 */
.tsg-memory-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.tsg-memory-board button {
  min-height: 64px;
}

@media (min-width: 640px) {
  .tsg-memory-board,
  .tsg-memory-board[data-pairs="8"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .tsg-memory-board[data-pairs="10"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
}

/*
 * "Timer [On]" next to the game buttons, and the small stopwatch above the
 * board (stage 3e). 5b: it looks like the app's switch (src/ui/timerSwitch.ts):
 * 14 px corners, 2 px edge, white, 48 px, a stopwatch, bold "Timer" and a pill
 * that is red with white text when On. The app's sizes are in px here, because
 * the app's root is 18 px and the games' 16 px.
 */
.tsg-timer-switch {
  display: inline-flex;
  align-items: center;
  gap: 13.5px;
  min-height: 48px;
  padding: 9px 18px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-card);
  border: 2px solid var(--color-control);
  border-radius: 14px;
  cursor: pointer;
}

/* The app's stopwatch icon (src/ui/icons.ts, "clock"), drawn in the text color. */
.tsg-timer-switch::before {
  content: "";
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  background-color: currentColor;
  -webkit-mask: var(--tsg-clock) center / contain no-repeat;
  mask: var(--tsg-clock) center / contain no-repeat;
}

:root {
  --tsg-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M10 2h4M12 2v3'/%3E%3C/svg%3E");
}

/* D25 (P12, 2): "Hint" in every game with the app's bulb (src/ui/icons.ts, "bulb") in front of its words. */
.tsg-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.tsg-hint::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--tsg-bulb) center / contain no-repeat;
  mask: var(--tsg-bulb) center / contain no-repeat;
}

:root {
  --tsg-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
}

.tsg-timer-switch:hover {
  border-color: var(--color-primary);
}

.tsg-timer-switch:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.tsg-timer-label {
  font-weight: 700;
}

.tsg-timer-state {
  padding: 4.5px 13.5px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
  border: 2px solid var(--color-muted);
  border-radius: 999px;
}


/* One short line, so the board keeps its room. */
.tsg-timer {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-muted);
}

.tsg-timer[hidden] {
  display: none;
}

/* 5a: Word Search and Memory — Found / Moves · Pairs, the time and the switch in one line over the board. */
.tsg-game-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.tsg-timer-slot:empty,
.tsg-timer-slot:has(> .tsg-timer[hidden]) {
  display: none;
}

.tsg-timer-slot .tsg-timer {
  margin: 0;
  color: var(--color-text);
}

/* Word Search and Memory: "New game", centered under the board. */
.tsg-game-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* P3 (H4): Word Search — "Hint (1 left)" and "New game", both the same size. */
.tsg-ws-action {
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-card);
  border: 2px solid var(--color-control);
  border-radius: 14px;
  cursor: pointer;
}

.tsg-ws-action:not([aria-disabled="true"]):hover {
  border-color: var(--color-primary);
}

.tsg-ws-action:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* "Hint (0 left)": calm paper grey until a new game. */
.tsg-ws-action[aria-disabled="true"] {
  color: var(--color-muted);
  background: var(--color-page);
  border-color: var(--color-rule);
  cursor: default;
}

/* The hint: a yellow ring with a red edge on the first letter of a word, for about 3 seconds. */
.tsg-ws-board button.tsg-ws-hint {
  background-color: var(--color-highlight) !important;
  color: var(--color-text) !important;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 3px var(--color-primary);
}

/*
 * P4 (D23): Word Search, layout C (docs/source/design/szkic_ws_*.png).
 * Under the title one line: "Theme: … · Change topic · How to play ▸"; the two
 * links open a panel under it. Phone: the levels under that line, full width;
 * "Hint" and "New game" in one row over the board; "Found 1 of 6" and the Timer
 * under it; "Words to find" last, in 3 columns. From 768 px: the levels to the
 * right of the title, one tool row between thin lines (Timer on the right) and
 * the words in one column next to the board.
 */
.tsg-ws-top {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tsg-ws-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 1.125rem;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.tsg-ws-link {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.tsg-ws-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* "How to play ▸", "▾" when open (as Snake's); the arrow is not read and not underlined. */
.tsg-ws-more::after {
  content: "▸";
  content: "▸" / "";
  display: inline-block;
  margin-left: 0.25rem;
}

.tsg-ws-more[aria-expanded="true"]::after {
  content: "▾";
  content: "▾" / "";
}

.tsg-ws-panel {
  margin-bottom: 0.25rem;
  padding: 0.75rem 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
  background: var(--color-page);
  border-radius: 14px;
}

.tsg-ws-panel[hidden] {
  display: none;
}

.tsg-ws-panel p + p {
  margin-top: 0.5rem;
}

.tsg-ws-game {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "toolbar toolbar"
    "message message"
    "board board"
    "words words";
  align-items: center;
  column-gap: 0.75rem;
  margin-top: 0.75rem;
}

.tsg-ws-toolbar {
  display: contents;
}

.tsg-ws-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tsg-ws-timer {
  grid-area: timer;
  justify-content: flex-start;
  margin: 0;
}


.tsg-ws-game .tsg-ws-board {
  grid-area: board;
}


.tsg-ws-words {
  grid-area: words;
  margin-top: 0.75rem;
  padding: 0.5rem 0.5rem 0.75rem;
}

.tsg-ws-words h2 {
  font-size: 1.125rem;
}

.tsg-ws-words #word-list {
  margin-top: 0.25rem;
  display: grid;
  /* 3 columns from 375 px, 2 on narrower phones: a word of 8 letters (at most 99 px) is never split. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
  gap: 0.25rem;
}

.tsg-ws-words .tsg-ws-word,
.tsg-ws-words .tsg-ws-found-word {
  padding: 0.125rem;
  overflow-wrap: anywhere;
}

/*
 * On a phone: the Timer moves under the board, next to "Found"; a smaller title;
 * "Change topic · How to play ▸" without the theme (it is in the title, and still
 * read aloud), so the line never wraps; less room around. From the title to the
 * bottom of the board the game fits on a 375 × 667 screen also with the longest
 * theme, "Weather & Nature" (scripts/check-layout.mjs).
 */
@media (max-width: 767px) {
  .tsg-ws-toolbar > .tsg-ws-timer {
    margin-top: 0.5rem;
  }

  .tsg-ws-head #game-title {
    margin-top: 0;
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  .tsg-ws-theme-dot {
    display: none;
  }

  .tsg-ws-theme {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .tsg-ws-meta {
    column-gap: 0.375rem;
  }

  .tsg-ws-top {
    gap: 0.25rem;
  }

  .tsg-ws-game {
    margin-top: 0.5rem;
  }

}

@media (min-width: 768px) {
  .tsg-ws-game {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-areas:
      "toolbar toolbar"
      "message message"
      "board words";
    align-items: start;
    column-gap: 1.75rem;
    margin-top: 1rem;
  }

  .tsg-ws-toolbar {
    grid-area: toolbar;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
  }

  .tsg-ws-actions {
    display: flex;
    gap: 0.75rem;
  }

  .tsg-ws-actions .tsg-ws-action {
    padding: 0.5rem 1.25rem;
  }

  .tsg-ws-timer {
    justify-content: flex-end;
  }

  .tsg-ws-words {
    margin-top: 0;
    padding: 1.25rem;
  }

  .tsg-ws-words h2 {
    font-size: 1.25rem;
  }

  .tsg-ws-words #word-list {
    margin-top: 0.75rem;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* P5: "· How to play" stays together, so the dot never hangs at the end of a line. */
.tsg-ws-keep {
  display: inline-flex;
  align-items: center;
  column-gap: inherit;
  white-space: nowrap;
}


/*
 * P5: on a computer the card is as wide as the main page's (960 px), closer to
 * "Back"; a lower tool row; square cells of a fixed size (--ws-cell, used by
 * word_search/src/js/app.js): 52 px at 8 × 8, 40 px at 12 × 12, bold letters of
 * 22–24 px. At 1280 × 800 the whole 8 × 8 board is on screen (scripts/check-layout.mjs).
 */
@media (min-width: 1024px) {
  .tsg-ws-game {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2rem;
    margin-top: 0.5rem;
  }

  .tsg-ws .tsg-ws-board {
    --ws-cell: 40px;
    grid-auto-rows: var(--ws-cell);
  }

  .tsg-ws .tsg-ws-board[data-size="8"] {
    --ws-cell: 52px;
  }

  .tsg-ws-board button {
    font-size: 1.375rem;
    font-weight: 800;
  }

  .tsg-ws-board[data-size="8"] button {
    font-size: 1.5rem;
  }
}

/*
 * 4d: the games' green text became the app's red; red stays for the small
 * labels (CLASSIC CARD GAME) only. Messages and tips are calm ink, and the
 * Word Search "How to play" box is paper, not the green of "Correct".
 */
.text-emerald-700:not(.uppercase) {
  color: var(--color-text);
}

.tsg-ws .bg-emerald-50 {
  background-color: var(--color-page);
}

/*
 * 5a: Snake's "How to play ▸", folded away. Only one of the two lines shows:
 * a phone or tablet gets "Tap Start…", a computer the keyboard.
 * 5b (R8): a touch screen is found in two ways — a coarse pointer (CSS) or
 * the class tsg-touch, set by ../shared/touch.js before the page shows
 * (some phones and browsers report a fine pointer).
 */
.tsg-howto {
  margin-top: 0.75rem;
}

.tsg-howto summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  list-style: none;
}

.tsg-howto summary::-webkit-details-marker {
  display: none;
}

.tsg-howto summary::after {
  content: "▸";
  content: "▸" / "";
  /* inline-block: the arrow is not underlined with the words. */
  display: inline-block;
}

.tsg-howto[open] summary::after {
  content: "▾";
  content: "▾" / "";
}

.tsg-howto summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.tsg-howto p {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (pointer: coarse) {
  .tsg-only-mouse {
    display: none !important;
  }
}

.tsg-touch .tsg-only-mouse {
  display: none !important;
}

@media not (pointer: coarse) {
  html:not(.tsg-touch) .tsg-only-touch {
    display: none !important;
  }
}

/*
 * P6 (variant A, docs/source/design/szkic_gry_zolte.png): in the games yellow means "you did it".
 * The yellow tag at the end of a game (shared/winTag.js): dark bold words on the highlight,
 * 15:1; it wraps inside the card at 320 px.
 */
.tsg-win-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: var(--color-highlight);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center;
}

.tsg-win-tag svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
}

/* Solitaire: the tag and "New game" in the middle of the dark win box. */
.winner-banner .tsg-win-tag {
  font-size: 1.5rem;
}

.winner-banner .tsg-win-new {
  min-height: 3rem;
  margin-top: 1.25rem;
  padding: 0.5rem 1.5rem;
}

/* Memory: a pair just found gets a yellow edge for about a second (memory_game/src/js/app.js). */
.tsg-pair-found {
  outline: 4px solid var(--color-highlight);
  outline-offset: 2px;
  animation: tsg-pair-found 1s ease-out;
}

@keyframes tsg-pair-found {
  from { outline-color: transparent; }
  20% { outline-color: var(--color-highlight); }
}

@media (prefers-reduced-motion: reduce) {
  .tsg-pair-found {
    animation: none;
  }
}

/* Word Search: a found word on the list is crossed out on a yellow marker under its letters only. */
.tsg-ws-words .tsg-ws-found-word {
  background: none;
}

.tsg-ws-marker {
  background: linear-gradient(to top, var(--color-highlight) 45%, transparent 45%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/*
 * D25 (P12, 3; docs/source/design/szkic_uklady_p12.png, 4): one tool bar in every game, right over
 * the board between thin lines: the tools on the left (Undo · Hint · New game — only the ones a
 * game has), the Timer (and Moves or Score) on the right. On a phone the right part moves to a
 * second line, still on the right, when the row is full; words never break inside. "New game" is
 * always an outlined button; the only red button in the games is Snake's "Start".
 */
.tsg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.tsg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tsg-toolbar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

main .tsg-tool {
  min-height: 48px;
  padding: 0.5rem 0.875rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-card);
  border: 2px solid var(--color-control);
  border-radius: 14px;
  box-shadow: none;
  cursor: pointer;
}

main .tsg-tool:not(:disabled, [aria-disabled="true"]):hover {
  border-color: var(--color-primary);
}

main .tsg-tool:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* Not usable yet ("Undo" before a move, "Hint (0 left)"): calm paper grey. */
main .tsg-tool:disabled,
main .tsg-tool[aria-disabled="true"] {
  color: var(--color-muted);
  background: var(--color-page);
  border-color: var(--color-rule);
  opacity: 1;
  cursor: default;
}

/* Snake's "Start": the one main button of a game page. */
main .tsg-tool.tsg-tool-main {
  color: var(--color-card);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

main .tsg-tool.tsg-tool-main:hover {
  background: var(--color-deep);
  border-color: var(--color-deep);
}

.tsg-toolbar .tsg-timer-slot .tsg-timer {
  margin: 0;
  color: var(--color-text);
}

/* Word Search: the bar over the message line and the board on a phone too ("Found 2 of 8" stays under it). */
.tsg-ws-game .tsg-ws-toolbar {
  grid-area: toolbar;
  display: flex;
}

.tsg-ws-game .tsg-ws-actions {
  display: flex;
}

.tsg-ws-game .tsg-ws-timer {
  grid-area: auto;
  margin: 0 0 0 auto;
}

@media (max-width: 767px) {
  .tsg-ws-game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "toolbar"
      "message"
      "board"
      "words";
  }

  .tsg-ws-game .tsg-ws-toolbar > .tsg-ws-timer {
    margin-top: 0;
  }

  /* Phones: a little less inside the buttons and the switch (no stopwatch picture), so more fits on the first line. */
  main .tsg-tool {
    padding: 0.5rem 0.625rem;
  }

  .tsg-toolbar,
  .tsg-toolbar-end {
    column-gap: 0.5rem;
  }

  .tsg-toolbar .tsg-timer-switch {
    gap: 8px;
    padding: 6px 8px 6px 12px;
  }

  .tsg-toolbar .tsg-timer-switch::before {
    display: none;
  }

  .tsg-toolbar .tsg-timer-state {
    padding: 2px 10px;
  }
}

/* The small red label over a game's title ("CLASSIC GAME"), for the games whose own CSS has no capitals. */
.tsg-game-label {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
}



/* P12: Snake's "Start / Pause / Resume" keeps one width, so "New game" never jumps. */
main .tsg-tool.tsg-pause {
  min-width: 5.75rem;
  min-height: 48px;
  font-size: 1.125rem;
}

.tsg-snake-score {
  font-size: 1.25rem;
  font-weight: 700;
}


.tsg-snake-canvas {
  border: 3px solid var(--color-rule);
}

.tsg-snake-canvas:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.tsg-snake-pad {
  margin-top: 0.5rem;
}

.tsg-arrows {
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 8px;
}

.tsg-arrow {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

.tsg-arrows .tsg-up { grid-column: 2; grid-row: 1; }
.tsg-arrows .tsg-left { grid-column: 1; grid-row: 2; }
.tsg-arrows .tsg-down { grid-column: 2; grid-row: 2; }
.tsg-arrows .tsg-right { grid-column: 3; grid-row: 2; }

@media (min-width: 768px) {
  .tsg-snake-board {
    max-width: 480px;
  }
}

/*
 * P14 (3): Snake's board size and speed as buttons — "Board" and "Speed" on the left of their three
 * buttons; one under the other on a phone (at 320 px the word goes over the buttons), side by side
 * on a computer.
 */
.tsg-snake-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tsg-snake-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.tsg-snake-option-label {
  flex: 0 0 auto;
  min-width: 3.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

.tsg-snake-option .tsg-level-buttons {
  flex: 1 1 12.5rem;
}

@media (min-width: 640px) {
  .tsg-snake-options {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2rem;
  }

  .tsg-snake-option-label {
    flex-basis: auto;
  }

  .tsg-snake-option .tsg-level-buttons {
    flex: 0 0 auto;
  }
}

/*
 * P14 (7): Snake on a phone — the board (at most 300 px) with the arrows under it; on a computer
 * (from 1024 px) a 360 px board with the arrows on its right, both in the middle, so at 1440 × 900
 * the whole board and the arrows are on the first screen.
 */
.tsg-snake-board {
  max-width: 300px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .tsg-snake-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }

  .tsg-snake-play .tsg-snake-board {
    flex: 0 0 360px;
    max-width: 360px;
    margin: 0;
  }

  .tsg-snake-play .tsg-snake-pad {
    margin: 0;
  }
}

/* P12: on a computer the Timer switch is no taller than the tool buttons, so the bar keeps one line height. */
@media (min-width: 768px) {
  .tsg-toolbar .tsg-timer-switch {
    min-height: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/*
 * P14 (docs/source/design/szkic_p14_gry_telefon_v2.png, szkic_p14_gry_komputer_v2.png): one layout in
 * the four games, from the top: the red label, the title, one line of red links ("How to play ▸"),
 * the choice, the tool bar, the message, the board.
 */

/* 1: every game's card the same width on a computer (1024 px) and the same room over it. */
.tsg-game-main {
  max-width: calc(64rem + 2rem);
  /* P15 (3): 12 px under the Back button, on a phone and a computer (was 32 / 48 px under the link). */
  padding-top: 0.75rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .tsg-game-main {
    max-width: calc(64rem + 3rem);
    padding-bottom: 3rem;
  }
}

/* 2: the line of links right under the title (or under "Every game can be won."). */
.tsg-game-links {
  margin-top: 0.25rem;
}

/* 4: the tool bar under the choice; the counters ("Moves: 3", "Found 2 of 6", "Score 4") on the right. */
.tsg-toolbar {
  margin-top: 1rem;
  padding: 0.5rem 0;
}

.tsg-ws .tsg-ws-game {
  margin-top: 1rem;
}

.tsg-ws-game .tsg-game-message {
  grid-column: 1 / -1;
}

.tsg-ws .tsg-ws-game .tsg-ws-toolbar {
  margin-top: 0;
  padding: 0.5rem 0;
}

.tsg-counter {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text);
}

/*
 * 4 (phone): 1st row only the buttons (never a second line), 2nd row the counter on the left and the
 * Timer on the right. Snake has no Timer: its Score stays on the right of the 1st row.
 */
@media (max-width: 639px) {
  .tsg-toolbar:not(.tsg-toolbar-one) {
    flex-direction: column;
    align-items: stretch;
  }

  .tsg-toolbar .tsg-tools,
  .tsg-toolbar-one {
    flex-wrap: nowrap;
  }

  .tsg-toolbar:not(.tsg-toolbar-one) .tsg-toolbar-end {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5rem;
    margin: 0;
  }

  .tsg-toolbar .tsg-counter {
    margin-right: auto;
  }

  /*
   * P15 (1, the owner's choice 28.10): Memory's counter never breaks. It is in the 1st row on the right of
   * "New game" (16 px), the time and the Timer in the 2nd row on the right.
   */
  .tsg-toolbar:has(.tsg-counter-pair) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.25rem;
  }

  .tsg-toolbar:has(.tsg-counter-pair) .tsg-toolbar-end {
    display: contents;
  }

  .tsg-toolbar .tsg-counter-pair {
    grid-column: 2 / -1;
    justify-self: end;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    text-align: right;
    white-space: normal;
  }

  .tsg-toolbar:has(.tsg-counter-pair) .tsg-timer-slot {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    margin-right: 0.25rem;
  }

  .tsg-toolbar:has(.tsg-counter-pair) #timer-control {
    grid-row: 2;
    grid-column: 3;
  }
}

/* P15 (1): under 400 px Memory's counter is short, "12 moves · 6/10 pairs"; screen readers hear the long words. */
@media (max-width: 399px) {
  .tsg-counter-pair .tsg-wide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* At 320 px "99 moves · 10/10 pairs" next to "New game": letters and words a hair closer, as the Challenge title (P13). */
@media (max-width: 359px) {
  .tsg-counter-pair {
    letter-spacing: -0.02em;
    word-spacing: -0.08em;
  }
}

@media (min-width: 400px) {
  .tsg-counter-pair .tsg-narrow {
    display: none;
  }
}

/*
 * 5, 6: the message over the board, in the middle, in every game. The line keeps room for two lines
 * of words or the yellow tag, at least 12 px over the board, so the board never jumps.
 */
.tsg-game-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
  color: var(--color-text);
}

/* From 1024 px a message fits one line: the line is just as tall as the yellow tag (Snake's board and arrows stay inside 1440 × 900). */
@media (min-width: 1024px) {
  .tsg-game-message {
    min-height: 2.75rem;
    margin-top: 0.25rem;
  }
}

/* 3 (phone): Snake's card a little wider inside (as Memory's), so "Board" and its three buttons fit one row from 375 px. */
@media (max-width: 479px) {
  .tsg-snake main {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tsg-snake main > section {
    padding: 1.25rem 0.75rem;
  }

  .tsg-snake-option .tsg-level {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }

  .tsg-snake-option-label {
    min-width: 0;
  }
}