/*
 * minesweeper-online.games — colours, the frame (variant 5 of docs/design/), the board, the result row,
 * dialogs, "How to play" and the privacy page. Taken from the prototype (prototype/css/style.css) on
 * 31.10.2026; the frame pieces that came with the PHP templates are at the end ("site frame").
 * Themes: the system chooses (prefers-color-scheme) unless the visitor picks one (data-theme on <html>).
 * Skins: "modern" (default) and "retro" (data-skin="retro" on <html>): the retro skin keeps its own
 * grey palette in both themes, only the page around it follows the theme.
 * js/game.js writes no colours: cells get classes (.o open, .n1….n8, .f flag, .q mark, .m mine, .x wrong flag).
 * The font faces are in the page (font_faces() in www/t/head.php), because their addresses come from asset().
 * Spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48.
 */
:root {
  --mine-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5v19M2.5 12h19M5.3 5.3l13.4 13.4M18.7 5.3 5.3 18.7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='6.2'/%3E%3C/svg%3E");
  --page: #f4f5f7;
  --card: #ffffff;
  --ink: #1c2230;
  --muted: #626b7d;
  --line: #e2e5eb;
  --accent: #2346a0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(35, 70, 160, 0.09);
  --ok: #1f8a4c;
  --ok-soft: rgba(31, 138, 76, 0.12);
  --danger: #cf3a2d;
  --danger-soft: rgba(207, 58, 45, 0.1);
  --shadow: 0 1px 2px rgba(20, 30, 50, 0.06), 0 8px 24px rgba(20, 30, 50, 0.07);
  --side: #e6e9ef; --side-hl: #dbe0e8; --side-line: #d3d9e3;

  /* the board */
  --gridline: #c7d0de;
  --tile-top: #e9eef6;
  --tile: #d5deeb;
  --tile-hover: #e2e9f4;
  --tile-edge: #b2bdd0;
  --open: #f5f7fa;
  --n1: #2059d8; --n2: #1c7d42; --n3: #d0362a; --n4: #3a2ca6;
  --n5: #a13a10; --n6: #0e7883; --n7: #1c2230; --n8: #6c7486;
  --mine: #1c2230;
  --flag: #d93a2b;
  --pole: #39404d;
  --boom: #ff7366;
  --wrong: #ffd6d0;
  --hint: #f2a900;
  --start: #1f8a4c;
  --face: #ffcd3c;
  --face-ink: #3d2f05;

  --r: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121418; --side: #1b1e24; --side-hl: #252931; --side-line: #2a2e36; --card: #1a1d23; --ink: #e6e8ec; --muted: #9aa1ad; --line: #2a2e36;
    --accent: #8fb0ff; --accent-ink: #0f1420; --accent-soft: rgba(143, 176, 255, 0.13);
    --ok: #74cf95; --ok-soft: rgba(116, 207, 149, 0.13); --danger: #ff8a7d; --danger-soft: rgba(255, 138, 125, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --gridline: #111318; --tile-top: #48505f; --tile: #3a414e; --tile-hover: #4a5262; --tile-edge: #2a2f38; --open: #23272e;
    --n1: #7ea9ff; --n2: #6fd08f; --n3: #ff8576; --n4: #bda9ff; --n5: #ffad78; --n6: #5ad3dc; --n7: #e6e8ec; --n8: #a5acb8;
    --mine: #e6e8ec; --flag: #ff6a5c; --pole: #c9ced6; --boom: #b8372c; --wrong: #5a2a26; --hint: #ffc53d; --start: #74cf95;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #121418; --side: #1b1e24; --side-hl: #252931; --side-line: #2a2e36; --card: #1a1d23; --ink: #e6e8ec; --muted: #9aa1ad; --line: #2a2e36;
  --accent: #8fb0ff; --accent-ink: #0f1420; --accent-soft: rgba(143, 176, 255, 0.13);
  --ok: #74cf95; --ok-soft: rgba(116, 207, 149, 0.13); --danger: #ff8a7d; --danger-soft: rgba(255, 138, 125, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --gridline: #111318; --tile-top: #48505f; --tile: #3a414e; --tile-hover: #4a5262; --tile-edge: #2a2f38; --open: #23272e;
  --n1: #7ea9ff; --n2: #6fd08f; --n3: #ff8576; --n4: #bda9ff; --n5: #ffad78; --n6: #5ad3dc; --n7: #e6e8ec; --n8: #a5acb8;
  --mine: #e6e8ec; --flag: #ff6a5c; --pole: #c9ced6; --boom: #b8372c; --wrong: #5a2a26; --hint: #ffc53d; --start: #74cf95;
  color-scheme: dark;
}

/* ===================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
[hidden] { display: none !important; }

/* ===================================================================== frame */
/*
 * A light sidebar (the brand, the six sizes with your record on each, the links) beside the main column;
 * the game card in the middle of the first screen, the text below it (docs/design/v5-light.html,
 * moved into the game 31.10.2026). On phones the sidebar is a drawer opened by ☰ of a thin top bar.
 */
.app { display: grid; grid-template-columns: 284px minmax(0, 1fr); min-height: 100vh; }
main { min-width: 0; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.logo { width: 30px; height: 30px; flex: none; }
.logo-bg { fill: var(--accent); }
.logo-mine { fill: var(--accent-ink); stroke: var(--accent-ink); }

.side { position: sticky; top: 0; height: 100vh; background: var(--side); border-right: 1px solid var(--side-line); padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.side .brand { padding: 0 8px; }
.side-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; padding: 0 10px; margin-bottom: 6px; }
.sizes { display: flex; flex-direction: column; gap: 2px; }
.sizes :is(button, a) { color: var(--ink); text-decoration: none; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 8px; padding: 8px 10px; border-radius: 10px; text-align: left; line-height: 1.35; }
.sizes :is(button, a) b { font-weight: 600; }
.sizes :is(button, a) small { color: var(--muted); font-size: 12.5px; grid-column: 1; }
.sizes :is(button, a) em { font-style: normal; color: var(--muted); font-size: 13px; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.sizes :is(button, a):hover { background: var(--side-hl); }
.sizes button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.sizes button[aria-checked="true"] small, .sizes button[aria-checked="true"] em { color: inherit; opacity: 0.75; }
.sizes.disabled { opacity: 0.45; pointer-events: none; }
.links { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.links a, .links button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; text-align: left; }
.links a:hover, .links button:hover, .links [aria-current] { color: var(--ink); background: var(--side-hl); }
.links svg { width: 20px; height: 20px; flex: none; }
/* ☰ of the phone's top bar and ✕ of its drawer (layout.php); the bar, ✕ and the dimmed page only below 820 px */
.icon-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); }
.icon-btn:hover { background: var(--side-hl); }
.icon-btn svg { width: 22px; height: 22px; }
.topbar, .drawer-close, .scrim { display: none; }

/* the stage: the card in the middle of the first screen */
.stage { min-height: 100vh; display: flex; align-items: center; padding: 24px 0; }
.stage-in { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }

.daily-bar { display: flex; align-items: center; gap: 12px; font-weight: 500; flex-wrap: wrap; justify-content: center; }
.daily-tag { padding: 3px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 650; font-size: 14px; }
.link-btn { color: var(--accent); font-weight: 500; padding: 0; text-align: left; }
.link-btn:hover { text-decoration: underline; }

/* ===================================================================== card */
/*
 * Nested corners are concentric: each outer radius is the inner one plus the space between them.
 *   cell --cr  →  board --cr + --gap (its padding)  →  card + --pad.
 * app.js sets --cs and --gap on the card when it fits the board, so all three follow the cell size.
 */
.card {
  --cs: 32px;
  --gap: 2px;
  --pad: 12px;
  --cr: calc(var(--cs) * 0.14);
  position: relative;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--cr) + var(--gap) + var(--pad) + 1px);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.card-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.counter { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 20px; letter-spacing: 0.01em; min-width: 0; }
.counter svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
#timer { justify-self: end; }
.counter.neg b { color: var(--danger); }

.face { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; transition: transform .08s; }
.face:hover { background: var(--accent-soft); }
.face:active { transform: scale(0.93); }
.face svg { width: 36px; height: 36px; }
.face-skin { fill: var(--face); stroke: color-mix(in srgb, var(--face-ink) 35%, transparent); stroke-width: 1.2; }
.face .f-eyes, .face .f-press, .face .f-won path:first-child { fill: var(--face-ink); }
.face .f-mouth, .face .f-won path + path, .face .f-lost { stroke: var(--face-ink); }
.face .f-press, .face .f-won, .face .f-lost { display: none; }
.face.press .f-mouth.f-normal { display: none; }
.face.press .f-press { display: block; }
.face.won .f-normal, .face.lost .f-normal, .face.won .f-press, .face.lost .f-press { display: none; }
.face.won .f-won, .face.lost .f-lost { display: block; }

.board-scroll {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: calc(var(--cr) + var(--gap)); /* same as the board, so clipping follows its corners */
  scrollbar-width: thin;
}
.board {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cs));
  grid-auto-rows: var(--cs);
  gap: var(--gap);
  width: max-content;
  padding: var(--gap);
  background: var(--gridline);
  border-radius: calc(var(--cr) + var(--gap));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  outline: none;
}
.board:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* a cell */
.c {
  position: relative;
  display: grid; place-items: center;
  border-radius: var(--cr);
  background: linear-gradient(var(--tile-top), var(--tile));
  box-shadow: inset 0 calc(var(--cs) * -0.07) 0 var(--tile-edge);
  font-weight: 800;
  font-size: calc(var(--cs) * 0.6);
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  .board:not(.over) .c:not(.o):hover { background: linear-gradient(var(--tile-hover), var(--tile-hover)); }
}
.c.o, .c.p {
  background: var(--open);
  box-shadow: none;
  cursor: default;
}
.c.o.n1 { color: var(--n1); } .c.o.n2 { color: var(--n2); } .c.o.n3 { color: var(--n3); } .c.o.n4 { color: var(--n4); }
.c.o.n5 { color: var(--n5); } .c.o.n6 { color: var(--n6); } .c.o.n7 { color: var(--n7); } .c.o.n8 { color: var(--n8); }
.c.o[class*=" n"] { cursor: pointer; }

/* flag, mark, mine: drawn with CSS so they follow the theme */
.c.f::before, .c.f::after, .c.m::before, .c.m::after { content: ''; position: absolute; pointer-events: none; }
.c.f::before { /* pole and base */
  left: 34%; top: 20%; width: 9%; height: 58%; background: var(--pole); border-radius: 2px;
  box-shadow: calc(var(--cs) * -0.08) calc(var(--cs) * 0.25) 0 calc(var(--cs) * -0.0) transparent;
}
.c.f::after { /* cloth */
  left: 40%; top: 20%; width: 34%; height: 34%; background: var(--flag);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.c.f { background-image: linear-gradient(var(--tile-top), var(--tile)); }
.c.f > i { position: absolute; left: 24%; right: 34%; bottom: 20%; height: 8%; background: var(--pole); border-radius: 2px; }
.c.q { color: var(--muted); font-weight: 700; }

/* mine: the same drawing as the mine counter's icon (#i-mine in index.html) and the logo — eight equal
   rays and a round body — used as a mask, so its colour follows the theme */
.c.m::before {
  width: 80%; height: 80%; background: var(--mine);
  -webkit-mask: var(--mine-shape) center / contain no-repeat; mask: var(--mine-shape) center / contain no-repeat;
}
.c.m::after { display: none; }
.c.boom { background: var(--boom) !important; }
.c.x { background: var(--wrong); box-shadow: none; }
.c.x::before, .c.x::after { opacity: 0.45; }
.c.x > b { position: absolute; inset: 18%; background:
    linear-gradient(45deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%); }

.c.start:not(.o)::before {
  content: ''; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: var(--start);
  animation: breathe 1.6s ease-in-out infinite;
}
.c.hint { box-shadow: 0 0 0 calc(var(--gap) + 1px) var(--hint), inset 0 0 0 2px var(--hint); z-index: 1; animation: hint-pulse 1s ease-in-out 2; }
.c.hint-mine { --hint: var(--danger); }
/* the numbers a hint follows from */
.c.hint-src { background: color-mix(in srgb, var(--accent) 14%, var(--open)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.c.cur { box-shadow: 0 0 0 2px var(--accent); z-index: 2; }

/* animations */
.c.pop { animation: pop .22s ease-out backwards; }
.c.drop { animation: drop .3s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.board.won .c.f { animation: cheer .5s ease-out backwards; }
@keyframes pop { from { transform: scale(0.55); opacity: 0.2; } }
@keyframes drop { from { transform: scale(0.2); opacity: 0; } }
/* the flags jump up on a win: up only, since a cell that moves right or down, or grows, goes past the board
   and makes it scroll for a moment (as .c.nope below did) */
@keyframes cheer { 50% { transform: translateY(-18%); } }
@keyframes breathe { 50% { transform: scale(1.35); opacity: 0.55; } }
@keyframes hint-pulse { 50% { box-shadow: 0 0 0 calc(var(--gap) + 4px) color-mix(in srgb, var(--hint) 40%, transparent), inset 0 0 0 2px var(--hint); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.card.shake { animation: shake .32s ease-in-out; }
/* a number clicked without enough flags: a small wiggle instead of opening (game.js nudge). It shrinks as it
   moves, so it never leaves its own square: a cell of the last column going past the board made the board
   scroll for a moment, and macOS showed a scrollbar under it (31.10.2026) */
.c.nope { animation: nope .28s ease-in-out; }
@keyframes nope { 25% { transform: translateX(-10%) scale(0.8); } 50% { transform: translateX(8%) scale(0.84); } 75% { transform: translateX(-5%) scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
  .c.pop, .c.drop, .board.won .c.f, .c.start:not(.o)::before, .c.hint, .card.shake, .c.nope { animation: none !important; }
}

.card-foot { display: flex; align-items: center; gap: 6px; padding: 12px 0 0; }
.foot-gap { flex: 1; }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: 15px; }
.tool:hover { background: var(--accent-soft); color: var(--ink); }
.tool svg { width: 20px; height: 20px; flex: none; }
.tool-sq { width: 36px; padding: 0; justify-content: center; }
.tool[aria-pressed="true"] { background: var(--danger-soft); color: var(--danger); }
.tool:disabled { opacity: 0.4; pointer-events: none; }

/*
 * The result takes the place of the foot (the hint and flag buttons mean nothing once a game is over),
 * so the whole board stays visible. width 0 + min-width 100%: it never makes the card wider than the
 * board, its text wraps instead. Its corners match the board's: both sit inside the card's padding.
 */
.result {
  width: 0; min-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 12px; padding: 12px 14px;
  border-radius: calc(var(--cr) + var(--gap));
  background: var(--ok-soft);
  animation: rise .25s ease-out;
}
.result.lost { background: var(--danger-soft); }
.result:not([hidden]) ~ .card-foot { display: none; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }
.result .r-main { flex: 1 1 240px; min-width: 0; }
.result .r-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.result h3 { font-size: 18px; line-height: 1.25; }
.result.won h3 { color: var(--ok); }
.result.lost h3 { color: var(--danger); }
.result .r-time { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.result .badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 650; background: var(--card); color: var(--ok); }
.result .badge.gold { background: color-mix(in srgb, var(--hint) 22%, var(--card)); color: color-mix(in srgb, var(--hint) 55%, var(--ink)); }
.result .facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.result .facts b { color: var(--ink); font-weight: 650; }
.result p { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.result .row { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }

.toast {
  position: absolute; left: 50%; top: 64px; z-index: 6; transform: translate(-50%, -6px);
  max-width: min(460px, calc(100% - 24px)); width: max-content;
  padding: 9px 14px; border-radius: 10px;
  background: var(--ink); color: var(--page); font-size: 14.5px; line-height: 1.45; font-weight: 500; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* when the hinted cell is in the upper half of the card, the toast sits over the bottom of the board */
.toast.low { top: auto; bottom: 60px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: 15px;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger-ghost { color: var(--danger); border-color: transparent; background: none; }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: transparent; }

kbd { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; font: 600 12px/20px inherit; color: var(--ink); text-align: center; background: var(--page); }

/* ===================================================================== content */
.content { max-width: 860px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 40px; }
.content h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 12px; }
.content h3 { font-size: 17px; margin-bottom: 6px; }
.content p + p { margin-top: 10px; }
.content ul { padding-left: 20px; display: grid; gap: 6px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.defs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.defs dt { font-weight: 700; }
.legend { display: inline-flex; gap: 6px 16px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-left: 4px; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; } /* square and label sit together in a span; the gap of .legend / .ex-legend is between the pairs */
.lg-mine { background: var(--danger-soft); box-shadow: inset 0 0 0 2px var(--danger); }
.lg-safe { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.patterns figure { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.patterns figcaption { font-size: 14.5px; color: var(--muted); }
.patterns figcaption b { color: var(--ink); }
.content .more { margin-top: 16px; font-weight: 600; }
.mini.board { --cs: 34px; --gap: 2px; --cr: calc(var(--cs) * 0.14); cursor: default; }
.mini .c { cursor: default; }
.mini .c.ded-mine { box-shadow: inset 0 0 0 2px var(--danger); }
.mini .c.ded-safe { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.mini .c.ded-safe::before { content: ''; width: 34%; height: 18%; border: solid var(--ok); border-width: 0 0 3px 3px; transform: translateY(-20%) rotate(-45deg); }

.foot { max-width: 860px; margin: 56px auto 0; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; }

/* ===================================================================== dialogs */
.dlg {
  margin: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25); padding: 24px;
}
.dlg-wide { width: min(640px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(10, 14, 22, 0.45); backdrop-filter: blur(2px); }
.dlg[open] { animation: rise .22s ease-out; }
.dlg h2 { font-size: 20px; margin-bottom: 16px; }
.dlg fieldset { border: 0; display: grid; gap: 10px; margin-bottom: 20px; min-inline-size: 0; grid-template-columns: minmax(0, 1fr); } /* without these a fieldset and its grid column are never narrower than their content, and the radios of a long press pushed the dialog wider on a 320px phone */
.dlg legend { font-size: 13px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.radios { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; width: max-content; max-width: 100%; }
.radios label { position: relative; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 15px; }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.radios label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.dlg .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 15px; }
select, .fields input { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.fields label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.fields input { width: 100%; font-size: 17px; font-weight: 600; color: var(--ink); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.stats-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table td { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table td:first-child { font-weight: 600; }
.stats-table .pct { color: var(--muted); font-size: 13px; }

/* ===================================================================== retro skin */
:root[data-skin="retro"] .card {
  --gridline: #808080; --tile-top: #c0c0c0; --tile: #c0c0c0; --open: #c0c0c0; --tile-hover: #c8c8c8;
  --n1: #0000f0; --n2: #007b00; --n3: #f00000; --n4: #00007b; --n5: #7b0000; --n6: #007b7b; --n7: #000; --n8: #7b7b7b;
  --mine: #000; --flag: #f00000; --pole: #000; --boom: #f00000; --wrong: #c0c0c0; --hint: #f0c000; --start: #007b00;
  --ink: #000; --muted: #333; --accent-soft: rgba(0, 0, 0, 0.08);
  background: #c0c0c0; color: #000; border-radius: 0; border: 3px solid; border-color: #fff #7b7b7b #7b7b7b #fff; box-shadow: none; padding: 8px;
}
:root[data-skin="retro"] .card-head { margin-bottom: 8px; padding: 6px; border: 2px solid; border-color: #7b7b7b #fff #fff #7b7b7b; }
:root[data-skin="retro"] .counter { background: #000; color: #f00000; font-family: 'Courier New', monospace; font-size: 24px; font-weight: 700; padding: 0 6px; border: 1px solid; border-color: #7b7b7b #fff #fff #7b7b7b; line-height: 34px; }
:root[data-skin="retro"] .counter svg { display: none; }
:root[data-skin="retro"] .face {
  border-radius: 0; background: #c0c0c0; width: 40px; height: 40px;
  border: 1px solid; border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px #7b7b7b, inset 1px 1px #dfdfdf;
}
:root[data-skin="retro"] .face:hover { background: #c0c0c0; }
:root[data-skin="retro"] .face:active {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px #7b7b7b, inset -1px -1px #dfdfdf;
  transform: none;
}
:root[data-skin="retro"] .face:active svg { transform: translate(1px, 1px); }
:root[data-skin="retro"] .face svg { width: 30px; height: 30px; }
:root[data-skin="retro"] .face-skin { fill: #ff0; stroke: #000; }
:root[data-skin="retro"] .face .f-eyes, :root[data-skin="retro"] .face .f-press, :root[data-skin="retro"] .face .f-won path:first-child { fill: #000; }
:root[data-skin="retro"] .face .f-mouth, :root[data-skin="retro"] .face .f-won path + path, :root[data-skin="retro"] .face .f-lost { stroke: #000; }
:root[data-skin="retro"] .board-scroll { border-radius: 0; border: 3px solid; border-color: #7b7b7b #fff #fff #7b7b7b; }
:root[data-skin="retro"] .card .board { --gap: 0px !important; gap: 0; padding: 0; border-radius: 0; background: #c0c0c0; }
:root[data-skin="retro"] .mini.board { border-radius: 0; gap: 0; padding: 0; background: #c0c0c0; border: 3px solid; border-color: #7b7b7b #fff #fff #7b7b7b; }
:root[data-skin="retro"] .card .c,
:root[data-skin="retro"] .mini .c {
  border-radius: 0; background: #c0c0c0; box-shadow: none;
  border: calc(var(--cs) * 0.12) solid; border-color: #fff #7b7b7b #7b7b7b #fff;
}
:root[data-skin="retro"] .card .c.o, :root[data-skin="retro"] .card .c.p, :root[data-skin="retro"] .card .c.x, :root[data-skin="retro"] .mini .c.o {
  border: 0; border-left: 1px solid #7b7b7b; border-top: 1px solid #7b7b7b; border-radius: 0;
}
:root[data-skin="retro"] .mini .c.ded-mine { box-shadow: inset 0 0 0 2px #f00000; }
:root[data-skin="retro"] .mini .c.ded-safe { box-shadow: inset 0 0 0 2px #007b00; background: #c0c0c0; }
:root[data-skin="retro"] .card .c.boom { background: #f00000 !important; }
:root[data-skin="retro"] .card .tool { color: #000; }
:root[data-skin="retro"] .card .result { border-radius: 0; background: #c0c0c0; border: 2px solid; border-color: #7b7b7b #fff #fff #7b7b7b; color: #000; }
:root[data-skin="retro"] .card .result h3, :root[data-skin="retro"] .card .result .facts, :root[data-skin="retro"] .card .result p { color: #000; }
/* Retro buttons: a two-step bevel (light outer + lighter inner edge, dark outer + grey inner edge) that
   sinks when pressed, the label moving 1px down-right; hover changes nothing; keyboard focus is a
   dotted frame inside the button */
:root[data-skin="retro"] .card .result .btn {
  border-radius: 0; background: #c0c0c0; color: #000; filter: none;
  border: 1px solid; border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px #7b7b7b, inset 1px 1px #dfdfdf;
  padding: 0 16px;
}
:root[data-skin="retro"] .card .result .btn:hover { border-color: #fff #000 #000 #fff; filter: none; }
:root[data-skin="retro"] .card .result .btn:active {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px #7b7b7b, inset -1px -1px #dfdfdf;
  padding: 2px 15px 0 17px;
}
:root[data-skin="retro"] .card .result .btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }

/* ===================================================================== how-to-play/ */
.prose { max-width: 760px; margin: 0 auto; padding-top: 32px; }
.prose h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin-top: 16px; }
.prose .tagline { font-size: 18px; color: var(--muted); margin: 8px 0 24px; }
.prose h2 { font-size: 25px; line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 12px; scroll-margin-top: 72px; }
.prose h3 { font-size: 19px; line-height: 1.3; margin: 32px 0 8px; scroll-margin-top: 72px; }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 22px; display: grid; gap: 8px; margin: 0 0 14px; }
.prose a { color: var(--accent); }
.toc { margin: 8px 0 8px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.ex-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 14.5px; }
.lg-src { background: color-mix(in srgb, var(--accent) 14%, var(--open)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
figure.ex {
  margin: 20px 0 24px; padding: 20px 16px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
figure.ex figcaption { font-size: 15px; color: var(--ink-2, var(--muted)); max-width: 600px; text-align: center; }
.ex-board { --fade: 26px; display: inline-block; }
.ex-board .board { margin: 0 auto; }
.ex-counter { margin: 0 !important; font-weight: 700; font-size: 15px; }
.ex-play { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.ex-play:hover { text-decoration: underline; }
.mini .c.ex-pair { color: color-mix(in srgb, var(--hint) 60%, var(--ink)); font-weight: 800; box-shadow: inset 0 0 0 2px var(--hint); background: color-mix(in srgb, var(--hint) 16%, var(--tile)); }
.mini .c.ex-start { box-shadow: inset 0 0 0 2px var(--start); }
.mini .c.ex-start::before { content: ''; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: var(--start); }
.mini .c.o.m.ded-mine { box-shadow: inset 0 0 0 2px var(--danger); }
.prose .cta { margin-top: 40px; text-align: center; }
.prose .cta .btn { height: 48px; padding: 0 28px; font-size: 17px; text-decoration: none; }
.prose .cta .btn-primary { color: var(--accent-ink); }
@media (max-width: 760px) {
  .prose h1 { font-size: 27px; }
  .prose h2 { font-size: 21px; margin-top: 36px; }
  .prose h3 { font-size: 17px; }
  figure.ex { padding: 16px 8px 12px; margin-inline: -4px; }
}

/* ===================================================================== tutorial/ (from prototype/puzzles/puzzles.css) */
/* the list of lessons: a group title, then the lessons as cards; one not made yet is dimmed, without a link */
.prose h2.lx-group { margin: 32px 0 8px; font-size: 13px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; }
.lx-ladder { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.prose .lx-ladder { padding: 0; }
/* under the list: the way on to the hard logic puzzles (tutorial.json more_html) */
.prose .lx-more { margin-top: 32px; }
.lx-ladder li a, .lx-ladder li > div { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 2px 10px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.lx-ladder li a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lx-ladder li > div { opacity: 0.6; }
.lx-ladder .num { grid-row: span 2; font-weight: 700; color: var(--muted); font-size: 18px; }
.lx-ladder b { font-weight: 650; }
.lx-ladder small { grid-column: 2; color: var(--muted); font-size: 14px; }
.lx-ladder em { grid-column: 3; grid-row: 1; font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.lx-ladder em.live { color: var(--accent); }
.lx-ladder em.done { color: var(--ok); }
.lx-note { color: var(--muted); font-size: 14px; }
/* a lesson: the way back, the worked example in steps, the exercise in a card like the game's */
.lx-crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lx-crumbs a { text-decoration: none; font-weight: 500; }
.lx-crumbs a:hover { text-decoration: underline; }
.lx-crumbs + h1 { margin-top: 8px; }
.lx-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 14px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.prose .lx-text { min-height: 4.6em; max-width: 560px; margin: 0; text-align: center; font-size: 15.5px; }
.lx-steps { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.lx-steps button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 18px; color: var(--ink); }
.lx-steps button:disabled { opacity: 0.35; cursor: default; }
.lx-board { display: inline-block; }
.lx-board .board { margin: 0 auto; }
.mini .c.lx-shared { box-shadow: inset 0 0 0 2px var(--hint); background: color-mix(in srgb, var(--hint) 16%, var(--tile)); }
.lx-ex .board .c:not(.o) { cursor: pointer; }
.lx-ex .card { margin: 0 auto; width: max-content; max-width: 100%; }
.lx-ex .lx-board { display: flex; justify-content: center; } /* in the middle when the task line is wider */
.lx-ex .card-head { grid-template-columns: 1fr auto; }
.lx-dots { display: inline-flex; gap: 6px; justify-self: end; }
.lx-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.lx-dots i.done { background: var(--ok); }
.lx-dots i.now { background: var(--accent); }
.lx-task { font-weight: 600; font-size: 15px; }
.prose .lx-feedback { width: 0; min-width: 100%; min-height: 3.2em; display: flex; align-items: center; margin: 12px 0 0; padding: 10px 14px; border-radius: calc(var(--cr) + var(--gap)); background: var(--accent-soft); font-size: 14.5px; line-height: 1.45; }
.prose .lx-feedback.ok { background: var(--ok-soft); }
.prose .lx-feedback.no { background: var(--danger-soft); }
.lx-next { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.prose .lx-next .btn { text-decoration: none; color: var(--ink); }
.prose .lx-next .btn-primary { color: var(--accent-ink); }
/* the mine counter of the lessons on the end of a game, the chances of the guessing lesson, the last words */
.lx-left { margin: 0 0 10px; text-align: center; font-weight: 700; font-size: 15px; }
.lx-figure .lx-left { margin: 0; }
.mini .c.lx-pct { font-size: calc(var(--cs) * 0.3); font-weight: 700; color: var(--muted); letter-spacing: -0.02em; }
.mini .c.lx-best { box-shadow: inset 0 0 0 3px var(--ok); color: var(--ok); }
.prose .lx-done { margin: 12px auto 0; max-width: 560px; text-align: center; font-weight: 600; }
/* a layout of mines the numbers also allow, shown for a moment after a move they do not prove */
.c.ce { box-shadow: inset 0 0 0 2px var(--hint); }
.c.ce::before { content: ''; position: absolute; width: 62%; height: 62%; background: var(--mine); opacity: 0.55; pointer-events: none;
  -webkit-mask: var(--mine-shape) center / contain no-repeat; mask: var(--mine-shape) center / contain no-repeat; }
@media (max-width: 760px) {
  .lx-figure { padding: 14px 8px 12px; }
}

/* ===================================================================== pictures/ (from prototype/puzzles/puzzles.css) */
/* the sidebar: after "Picture boards" how many there are, "solved/total" once some are solved (as matchstick-puzzles.games) */
.links .cnt { margin-left: auto; padding-left: 8px; font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); }
/* the gallery: a size, then its boards as cards; a preview is the board right after its first click, an SVG
   of one unit per cell (t/pictures.php): hidden tiles (#pic-tile), the opened cells, the picture tinted */
.prose.pictures { max-width: 880px; }
.pic-progress { color: var(--muted); font-size: 15px; font-weight: 600; }
.pic-defs { position: absolute; }
#pic-tile rect { fill: var(--tile); }
.pic-size h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; scroll-margin-top: 72px; }
.pic-size h2 small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--w) * 12px + 34px)), 1fr)); gap: 12px; }
.pic-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; text-align: center; }
.prose .pic-card .btn { color: var(--ink); }
.prose .pic-card .btn-primary { color: var(--accent-ink); }
.prose a.pic-card { color: var(--ink); }
.pic-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pic-card b { font-weight: 650; line-height: 1.3; }
.pic-card .btn { pointer-events: none; height: 36px; }
.pic-card .btn[hidden], .pic-done[hidden] { display: none; }
.pic-done { margin-top: -6px; font-style: normal; font-size: 13px; font-weight: 650; color: var(--ok); }
.pic-thumb { display: block; width: min(100%, calc(var(--w) * 12px)); height: auto; background: var(--gridline); border-radius: 4px; }
.pic-thumb .pt-open { fill: var(--open); }
.pic-thumb .pt-pic { fill: color-mix(in srgb, var(--accent) 22%, var(--open)); }
.pic-thumb .pt-start { fill: var(--start); }
.pic-thumb text { font-size: 0.66px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.pic-thumb .n1 { fill: var(--n1); } .pic-thumb .n2 { fill: var(--n2); } .pic-thumb .n3 { fill: var(--n3); } .pic-thumb .n4 { fill: var(--n4); }
.pic-thumb .n5 { fill: var(--n5); } .pic-thumb .n6 { fill: var(--n6); } .pic-thumb .n7 { fill: var(--n7); } .pic-thumb .n8 { fill: var(--n8); }
/* a board: the way back and the name over the game's card; the empty cells of the picture stay tinted */
.pic-stage { min-height: 0; padding: 32px 0 8px; }
.pic-head { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pic-head h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.pic-head p { color: var(--muted); font-size: 15.5px; }
.pic-crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.pic-crumbs a { text-decoration: none; font-weight: 500; }
.pic-crumbs a:hover { text-decoration: underline; }
.pic-size-tag { justify-self: center; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.pic-nav { justify-self: end; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pic-nav a, .pic-nav > span[aria-hidden] { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 18px; }
.pic-nav > span[aria-hidden] { opacity: 0.35; }
.pic-nav a:hover { background: var(--accent-soft); color: var(--ink); }
.c.o.pic { background: color-mix(in srgb, var(--accent) 16%, var(--open)); }
.result a.btn { text-decoration: none; color: var(--ink); }
.result a.btn-primary { color: var(--accent-ink); }
@media (max-width: 820px) {
  .pic-stage { padding-top: 12px; }
  .pic-head h1 { font-size: 24px; }
  .pic-head p { font-size: 14.5px; }
  .pic-grid { gap: 10px; }
}

/* ===================================================================== the hard logic puzzles
   (t/hard.php, t/hard-puzzle.php): the list and the card of the picture boards, a dot for a cell marked
   safe, the difficulty in words, the warning for players new to the game */
.hd-warning { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
.prose .hd-warning { margin: 0 0 16px; font-size: 15.5px; }
.pic-head .hd-warning { font-size: 14px; }
.pic-head .hd-sub { font-size: 14.5px; }
.hd-tier { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.hd-tier.hd-very-hard { color: var(--danger); }
.pic-head .hd-tier { font-size: inherit; }
.c.dot::after { content: ''; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: var(--ok); pointer-events: none; }
.board.won .c.dot::after { opacity: 0.45; }
.tool.hd-check { color: var(--accent); font-weight: 650; }
.tool.hd-check[aria-disabled="true"] { color: var(--muted); font-weight: 500; opacity: 0.55; }

/* ===================================================================== narrow screens */
@media (max-width: 820px) {
  .app { display: block; }
  /* the sidebar is a drawer from the left (as on matchstick-puzzles.games): js/site.js adds .open; hidden it
     is out of the tab order too (visibility) */
  .side { position: fixed; inset: 0 auto 0 0; z-index: 100; width: min(300px, 86vw); height: auto;
    visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility 0s linear .2s; }
  .side.open { visibility: visible; transform: none; transition: transform .2s ease; box-shadow: 0 0 32px rgba(0, 0, 0, 0.25); }
  .side.open + .scrim { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.35); }
  .drawer-open, .drawer-open body { overflow: hidden; }
  .drawer-close { display: inline-flex; position: absolute; top: 14px; right: 8px; color: var(--muted); }
  .side .brand { padding-right: 48px; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 4px; padding: 6px 12px 6px 6px; background: var(--side); border-bottom: 1px solid var(--side-line); }
  .topbar .brand { font-size: 17px; }
  .topbar .logo { width: 26px; height: 26px; }
  html { scroll-padding-top: 60px; }
  main { padding: 0 8px; }
  .stage { min-height: 0; padding: 8px 0; align-items: flex-start; }
  .card { --pad: 6px; }
  .card-head { padding: 2px 4px 8px; }
  .result { margin-top: 8px; padding: 10px 12px; }
  .result .row { flex: 1 1 100%; }
  .result .row .btn { flex: 1; }
  .content { padding-inline: 4px; margin-top: 32px; gap: 32px; }
  .cols, .patterns { grid-template-columns: 1fr; }
  .content h2 { font-size: 21px; }
  .defs { grid-template-columns: 1fr; gap: 2px; }
  .defs dd { margin-bottom: 8px; }
}
@media (max-width: 360px) {
  .tool span { display: none; }
  .tool { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .side, .side.open { transition: none; } }

/* the sizes are links to their pages now; the current one is marked like the checked button was */
.sizes a[aria-current] { background: var(--accent); color: var(--accent-ink); }
.sizes a[aria-current] small, .sizes a[aria-current] em { color: inherit; opacity: 0.75; }

/* The footer under the content, as on matchstick-puzzles.games: languages and the theme switch, the
   description, then privacy and "Made in Ukraine" (layout.php site_footer()) */
.foot { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.foot p { margin: 0; }
.langs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.langs [aria-current] { color: var(--ink); font-weight: 600; }
/* the cell size in the settings: a slider, its value and the way back to 100% */
.scale-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; font-size: 15px; }
.scale-row input[type="range"] { width: 100%; min-width: 0; accent-color: var(--accent); }
.scale-row output { min-width: 4ch; text-align: right; font-weight: 600; }
.btn-small { height: 30px; padding: 0 10px; font-size: 14px; }
.btn:disabled { opacity: 0.45; cursor: default; }
#scale-note { margin-top: -4px; }
@media (max-width: 420px) { .scale-row { grid-template-columns: 1fr auto auto; } .scale-row label { grid-column: 1 / -1; } }

/* The banner asking for GA4 cookies (layout.php consent_banner(), js/analytics.js): only for visitors
   from the EEA, UK and Switzerland who have not chosen yet; both buttons alike, as on matchstick-puzzles.games */
.consent {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(420px, calc(100vw - 32px));
  padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); font-size: 14px; line-height: 1.45;
}
.consent p { margin: 0 0 12px; }
.consent-buttons { display: flex; gap: 8px; }
.consent .consent-buttons .btn { flex: 1; }
.consent-open body { padding-bottom: 180px; }
@media (max-width: 820px) { .consent { right: 16px; bottom: 16px; } }

/* the theme switch: three small buttons in one pill, the chosen one filled */
.theme-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.theme-btn { padding: 4px 12px; border-radius: 999px; color: var(--muted); }
.theme-btn:hover { color: var(--ink); }
.theme-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.made-in { display: inline-flex; align-items: center; gap: 8px; }
.ua-heart { flex: none; }

/* text pages without the game (privacy, 404) */
.page-text { max-width: 760px; margin: 0 auto; padding: 48px 0 0; }
.page-text h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.page-text .lead { font-size: 18px; color: var(--muted); margin-bottom: 24px; }
.page-text h2 { font-size: 21px; line-height: 1.3; margin: 32px 0 8px; }
.page-text p { margin: 0 0 12px; }
.page-text .meta { color: var(--muted); font-size: 14px; margin-top: 32px; }
@media (max-width: 760px) { .page-text { padding-top: 24px; } .page-text h1 { font-size: 27px; } }

/* ===================================================================== the daily boards */
.daily-head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.daily-when { display: flex; align-items: center; gap: 10px; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.daily-sizes { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--side); border: 1px solid var(--side-line); }
.daily-sizes button { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; padding: 6px 14px; border-radius: 9px; line-height: 1.25; text-align: left; }
.daily-sizes button b { font-weight: 600; }
.daily-sizes button small { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.daily-sizes button i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; min-width: 1ch; }
.daily-sizes button i.won { color: var(--ok); }
.daily-sizes button i.later { color: var(--muted); }
.daily-sizes button i.lost { color: var(--danger); }
.daily-sizes button:hover { background: var(--side-hl); }
.daily-sizes button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.daily-sizes button[aria-selected="true"] small, .daily-sizes button[aria-selected="true"] i { color: inherit; opacity: 0.85; }
.content .note { color: var(--muted); margin-bottom: 12px; }

.daily-summary { margin-top: 12px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.daily-summary h2 { font-size: 18px; margin-bottom: 6px; }
.daily-summary .pct { color: var(--muted); font-size: 14px; font-weight: 500; }
.daily-summary .mine { margin-top: 8px; font-weight: 600; }
/* the histogram of the winning times: one colour, thin bars with a gap, the player's own bar marked */
.hist { margin: 12px 0 0; }
.hist .bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid var(--line); }
.hist .bar { flex: 1; height: calc(var(--h) * 100%); min-height: 2px; background: color-mix(in srgb, var(--accent) 45%, var(--card)); border-radius: 4px 4px 0 0; }
.hist .bar.own { background: var(--accent); }
.hist figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }

.calendar { border-collapse: separate; border-spacing: 4px; margin: 4px -4px 8px; }
.calendar caption { text-align: left; font-weight: 600; padding: 0 4px 4px; }
.calendar th { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 2px; text-transform: capitalize; }
.calendar td { text-align: center; width: 40px; height: 36px; padding: 0; }
.calendar td > * { display: grid; place-items: center; height: 100%; border-radius: 8px; }
.calendar a { color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); }
.calendar a:hover { border-color: var(--accent); }
.calendar span { color: var(--muted); opacity: 0.6; }
.calendar .today a { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.calendar .current a { box-shadow: 0 0 0 2px var(--accent); }
.month-nav { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
/* on a phone the three tabs share the width and drop the size under the name (the board shows it) */
@media (max-width: 420px) {
  .daily-head { width: 100%; }
  .daily-sizes { width: 100%; }
  .daily-sizes button { flex: 1 1 auto; min-width: 0; padding: 6px 4px; justify-content: center; font-size: 14.5px; }
  .daily-sizes button b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .daily-sizes button small { display: none; }
  .calendar td { width: 36px; }
}
@media (max-width: 370px) { .daily-sizes button { font-size: 13px; padding: 6px 2px; column-gap: 3px; } }

/* Japanese (/ja/), as on matchstick-puzzles.games: no web font, since a Japanese one weighs megabytes, so
   the system Gothic of macOS/iOS, Windows and Android (not system-ui first: on a Windows that is not
   Japanese it is Segoe UI, without kana). lang="ja" on <html> makes the browser pick the Japanese forms
   of the kanji shared with Chinese. Kanji need more room between lines; line-break: strict keeps small
   kana and ー off the start of a line; headings break between phrases where the browser can
   (word-break: auto-phrase). Latin tracking and uppercase only spread kana apart, so they are off */
body:lang(ja) {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
  line-height: 1.75;
  line-break: strict;
}
:lang(ja) :is(h1, h2, h3) { line-height: 1.45; word-break: auto-phrase; }
:lang(ja) :is(.brand, .side-title, .dlg legend, .content h2, .prose h1, .prose h2, .page-text h1) { letter-spacing: normal; text-transform: none; }

/* /stats/: three totals in a row, then the tables and the bars of the daily boards */
.stat-totals { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.stat-totals li { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.stat-totals b { display: block; font-size: 28px; line-height: 1.2; color: var(--ink); }
.stats-page .stats-table { margin-bottom: 8px; }
.stats-page h3 { font-size: 17px; margin: 24px 0 8px; }