/*
 * 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 gives way to a top bar with a size menu.
 */
.app { display: grid; grid-template-columns: 264px 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; }
.topbar { 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; }
}

/* ===================================================================== narrow screens */
@media (max-width: 820px) {
  .app { display: block; }
  .side { display: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 12px; padding: 8px 12px; background: var(--side); border-bottom: 1px solid var(--side-line); }
  .topbar .brand { font-size: 17px; }
  .topbar .logo { width: 26px; height: 26px; }
  .topbar-link { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
  /* the size menu takes the room the bar has left, not a fixed share: with max-width 50vw "Fortgeschrittene 16×16"
     and even "Intermediate 16×16" were cut on a phone (31.10.2026) */
  .topbar select { font-weight: 600; background: var(--side-hl); border: 0; border-radius: 8px; padding: 6px 8px; min-width: 0; flex: 0 1 auto; }
  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: 400px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .topbar select { font-size: 14px; padding: 6px 4px; }
}
@media (max-width: 340px) { .topbar { gap: 6px; padding-inline: 8px; } }
@media (max-width: 360px) {
  .topbar .brand span { display: none; }
  .tool span { display: none; }
  .tool { padding: 0 10px; }
}

/* ===================================================================== site frame */
/* The phone's top bar: the brand, How to play and the size menu must fit 375 px in every language.
   "Minesweeper" is twice as long as "Сапер", so below 440 px only the logo stays (it still leads home) */
@media (max-width: 440px) {
  .topbar .brand span { display: 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: the system font, no tracking (docs/plan.md, section 8) */
body:lang(ja) { font-family: system-ui, 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif; line-height: 1.75; line-break: strict; word-break: auto-phrase; }

/* /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; }