/* Kocky sú hodené: the blog of Audamir. The palette is the game's own. */

:root {
  --bg: #eef2f8;
  --panel: #ffffff;
  --panel2: #f3f6fb;
  --line: #cdd7e6;
  --text: #15202f;
  --muted: #55667f;
  --accent: #2457c0;
  --accent-soft: rgba(47, 107, 224, 0.1);
  --good: #0f9f6e;
  --bad: #c13030;
  --warn: #9a6213;
  --code-bg: #e6ecf6;
  --shadow: 0 1px 2px rgba(30, 50, 90, 0.12), 0 10px 28px rgba(30, 50, 90, 0.08);
  --chart-a: #2f6be0;
  --chart-b: #b7791f;
  --chart-grid: #cdd7e6;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --panel: #131c2e;
    --panel2: #1b2740;
    --line: #28385a;
    --text: #e6edf7;
    --muted: #94a3bf;
    --accent: #7aa7ff;
    --accent-soft: rgba(79, 140, 255, 0.14);
    --good: #34d399;
    --bad: #f87171;
    --warn: #facc15;
    --code-bg: #1b2740;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
    --chart-a: #6ea0ff;
    --chart-b: #f0b429;
    --chart-grid: #28385a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --panel: #131c2e;
  --panel2: #1b2740;
  --line: #28385a;
  --text: #e6edf7;
  --muted: #94a3bf;
  --accent: #7aa7ff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --good: #34d399;
  --bad: #f87171;
  --warn: #facc15;
  --code-bg: #1b2740;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
  --chart-a: #6ea0ff;
  --chart-b: #f0b429;
  --chart-grid: #28385a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ------------------------------------------------------------ header */

.site-head {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .bar {
  max-width: 62rem; margin: 0 auto; padding: 0.65rem 16px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: 0.01em; }
.brand img { width: 28px; height: 28px; flex: none; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.brand small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); letter-spacing: 0; }
.site-head nav { display: flex; align-items: center; gap: 1rem; font-size: 0.92rem; }
.site-head nav a { color: var(--muted); text-decoration: none; }
.site-head nav a:hover { color: var(--text); }
.site-head nav.main { margin-left: auto; }
.site-head nav.main a[aria-current="page"] { color: var(--text); font-weight: 600; }
.site-head nav a.play { background: var(--accent); color: var(--bg); font-weight: 600; padding: 0.3rem 0.8rem; border-radius: 8px; }
.site-head nav a.play:hover { color: var(--bg); filter: brightness(1.08); }
.site-head nav button.play { background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; padding: 0.3rem 0.8rem; border: 0; border-radius: 8px; }
.site-head nav.lang { gap: 0.15rem; }
.site-head nav.lang a { padding: 0.2rem 0.5rem; border: 1px solid transparent; border-radius: 6px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; }
.site-head nav.lang a[aria-current="true"] { color: var(--text); border-color: var(--line); background: var(--panel); }
.site-head nav.lang a.nomatch { opacity: 0.6; }
#theme-toggle {
  background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
  width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; line-height: 1;
}
#theme-toggle:hover { color: var(--text); background: var(--accent-soft); }

/* ------------------------------------------------------------ layout */

/* a container, so that the wide blocks of an article (tables, charts, code) can be sized from the width of the page without the scrollbar (cqw) */
main { flex: 1; width: 100%; container-type: inline-size; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------ index */

.hero { padding: 3rem 0 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
.hero p { margin: 0 0 1rem; font-size: 1.12rem; color: var(--muted); max-width: 38rem; font-family: var(--serif); }
.hero .hero-icon { width: clamp(96px, 20vw, 168px); height: auto; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25)); }
.btn {
  display: inline-block; background: var(--accent); color: var(--bg); text-decoration: none; font-family: var(--sans); font-weight: 600;
  padding: 0.6rem 1.1rem; border-radius: 10px; border: 0;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }

#serie { margin: 2.4rem 0; }

.cards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem 1.1rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.35rem; position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card .no { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.08em; }
.card h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; font-family: var(--serif); }
.card .meta { margin-top: auto; padding-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
/* the marks of the author's build with --drafts (the public webs show neither): a draft is written and waits for the approval (warning), a planned card of planned.json is not written yet (danger) */
.card.draft { border: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.card.soon { border: 2px solid var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--panel)); box-shadow: none; }
.card.draft:hover { border-color: var(--warn); }
.card.soon:hover { border-color: var(--bad); }
.card .flag { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warn); }
.card.soon .flag { color: var(--bad); }
.card[hidden] { display: none; }
.card .badges { margin-top: 0.25rem; }

/* badges: the categories of an article are a filled pill, the realms an outline (the same on a card and in the detail, where they are links to the list with the filter set) */
.badges { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
.badge {
  display: inline-block; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; line-height: 1.55; padding: 0 0.65rem; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
}
.badge.cat { background: var(--accent-soft); color: var(--accent); }
.badge.realm { background: transparent; color: var(--muted); border-color: var(--muted); }
a.badge:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
a.badge.cat:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* the filter of the list (assets/blog-filter.js shows it; without the script it stays hidden and every card is shown) */
.filter { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem 0.8rem; margin: 0 0 1.2rem; display: grid; gap: 0.65rem; }
.filter[hidden], .filter [hidden] { display: none; }
.filter-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.3rem 0.8rem; align-items: baseline; }
.filter-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-family: var(--sans); font-size: 0.88rem; line-height: 1.2; padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
}
.chip:hover { border-color: var(--accent); }
.chip .n { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-left: 0.2rem; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.chip[aria-pressed="true"] .n { color: inherit; opacity: 0.85; }
.chip.is-empty:not([aria-pressed="true"]) { opacity: 0.5; }
.filter-lead { margin: 0; font-family: var(--serif); color: var(--muted); }
.filter-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
.filter-status { margin: 0; font-size: 0.88rem; color: var(--muted); }
.filter-reset { font: inherit; font-size: 0.88rem; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.filter-none { margin: 0; font-family: var(--serif); }

.stats { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--muted); }
.stats b { color: var(--text); font-size: 1.2rem; font-family: var(--mono); font-weight: 600; }

/* ------------------------------------------------------------ post */

.post { width: min(50rem, 100% - 32px); margin: 0 auto; padding: 2.4rem 0 1rem; }
.kicker { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.kicker a { color: var(--muted); }
.post h1 { font-size: clamp(1.9rem, 5.2vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.post .lead { font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; color: var(--muted); margin: 0 0 1rem; }
.post .badges { margin: 0 0 1rem; }
.post .meta { font-size: 0.86rem; color: var(--muted); margin: 0 0 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }

.toc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1.1rem; margin: 0 0 2rem; font-size: 0.95rem; }
.toc p { margin: 0 0 0.3rem; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.3rem; }
.toc li { margin: 0.15rem 0; }

.prose { font-family: var(--serif); font-size: 1.14rem; line-height: 1.72; }
.prose p { margin: 0 0 1.15rem; }
.prose h2 { font-family: var(--sans); font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.015em; margin: 2.6rem 0 0.8rem; }
.prose h3 { font-family: var(--sans); font-size: 1.2rem; line-height: 1.25; margin: 2rem 0 0.6rem; }
.prose h4 { font-family: var(--sans); font-size: 1rem; margin: 1.6rem 0 0.4rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin: 0.3rem 0; }
.prose li > ul, .prose li > ol { margin: 0.3rem 0 0.4rem; }
.prose strong { font-weight: 700; }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--code-bg); padding: 0.08em 0.35em; border-radius: 5px; }
.prose pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem; overflow-x: auto; font-size: 0.88rem; line-height: 1.5; margin: 0 0 1.3rem; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote { margin: 0 0 1.3rem; padding: 0.1rem 1.1rem; border-left: 4px solid var(--accent); color: var(--muted); font-style: italic; }
.prose blockquote p:last-child { margin-bottom: 0.6rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem auto; width: 40%; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }

/* tables, charts and code may be wider than the text: up to the width of the header and the list (.wrap: 62rem with the gutters of 16px), and never wider than the window.
   The text keeps its column (.post: 50rem); these blocks only step out of it by the same amount on both sides. */
.prose > .table-wrap, .prose > figure, .prose > pre {
  --out: max(0px, min(6rem - 16px, (100cqw - 50rem - 32px) / 2));
  margin-left: calc(-1 * var(--out)); margin-right: calc(-1 * var(--out));
}

.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: 10px; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 0.9rem; line-height: 1.4; }
.prose th, .prose td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--panel2); font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }

.callout { font-family: var(--sans); font-size: 0.98rem; line-height: 1.55; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.8rem 1.1rem 0.5rem; margin: 1.6rem 0; }
.callout-title { margin: 0 0 0.3rem !important; font-weight: 700; font-size: 0.8rem !important; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.callout p { margin: 0 0 0.7rem; }
.callout ul, .callout ol { margin: 0 0 0.7rem; }
.callout-diary { border-left-color: var(--warn); }
.callout-diary .callout-title { color: var(--warn); }
.callout-warn { border-left-color: var(--bad); }
.callout-warn .callout-title { color: var(--bad); }
.callout-note { border-left-color: var(--muted); }
.callout-note .callout-title { color: var(--muted); }

figure { margin: 1.8rem 0; }
.prose figure > img, .prose figure > video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
figcaption { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; text-align: center; }
.chart { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.8rem 0.6rem; }
.chart { overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 540px; height: auto; }
.chart svg.map { min-width: 0; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: var(--muted); stroke-width: 1; }
.chart .a { fill: var(--chart-a); }
.chart .b { fill: var(--chart-b); }
.chart .a-line { stroke: var(--chart-a); fill: none; stroke-width: 2.5; }
.chart .t { fill: var(--text); font-family: var(--sans); font-size: 13px; }
.chart .m { fill: var(--muted); font-family: var(--sans); font-size: 12px; }
.chart .v { fill: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.chart .ref { stroke: var(--bad); stroke-width: 2; stroke-dasharray: 4 3; }

/* ------------------------------------------------------------ pager and footer */

.pager { width: min(50rem, 100% - 32px); margin: 2rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.pager a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; text-decoration: none; color: var(--text); }
.pager a:hover { border-color: var(--accent); }
.pager small { display: block; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pager .next { text-align: right; grid-column: 2; }
.pager .prev { grid-column: 1; }

.site-foot { margin-top: 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.86rem; }
.site-foot .wrap { padding-top: 1.2rem; padding-bottom: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: space-between; }

@media (max-width: 600px) {
  .hero { grid-template-columns: 1fr; padding-top: 1.6rem; }
  .hero .hero-icon { order: -1; width: 88px; }
  .prose { font-size: 1.06rem; }
  .pager { grid-template-columns: 1fr; }
  .pager .next, .pager .prev { grid-column: 1; text-align: left; }
  .filter-row { grid-template-columns: minmax(0, 1fr); }
  html { scroll-padding-top: 6.5rem; }   /* the header is two rows on a phone */
  .site-head nav a.hide-sm { display: none; }
  .site-head nav.main { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: 0.5rem; }
  .site-head nav.lang { margin-left: auto; }
}

@media print {
  .site-head, .pager, .skip, #theme-toggle { display: none; }
  body { background: #fff; color: #000; }
  .post { width: auto; padding-top: 0; }
  .prose > .table-wrap, .prose > figure, .prose > pre { margin-left: 0; margin-right: 0; }
  .filter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .play-big { transition: none; }
}

.chart .f { fill: var(--muted); opacity: 0.55; }

h1, .card h3 { text-wrap: balance; }
/* the lead of an article fills the column like the paragraphs: `balance` made its lines equal, so the longest one was about two thirds of the width (the lead of 005: 536 of 800 px) */
.prose p, .prose li, .post .lead { text-wrap: pretty; }

/* boards of the 3 x 3 post: a grid, discs of the two players with the number of the move, marks, a framed winning line (the diagrams of the post, assets/charts/lines-*.svg) */
.chart svg.bds { min-width: 0; max-width: 560px; margin: 0 auto; }
.chart .bd { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; fill: none; }
.chart .bdfill { fill: var(--panel2); }
.chart .num { fill: var(--panel); font-family: var(--sans); font-size: 14px; font-weight: 700; text-anchor: middle; }
.chart .win { stroke: var(--good); stroke-width: 5; stroke-linecap: round; fill: none; opacity: 0.95; }
.chart .ok { stroke: var(--good); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.chart .no { stroke: var(--bad); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.chart .thr { stroke: var(--bad); stroke-width: 2.5; stroke-dasharray: 4 3; fill: none; }
.chart .hl { fill: var(--accent-soft); }
.chart .cap { fill: var(--text); font-family: var(--sans); font-size: 12.5px; font-weight: 600; text-anchor: middle; }
.chart .sub { fill: var(--muted); font-family: var(--sans); font-size: 11.5px; text-anchor: middle; }
.chart .cnt { fill: var(--text); font-family: var(--mono); font-size: 17px; font-weight: 700; text-anchor: middle; }
.chart .cntm { fill: var(--muted); font-family: var(--mono); font-size: 13px; font-weight: 600; text-anchor: middle; }
.chart .leg { fill: var(--muted); font-family: var(--sans); font-size: 11.5px; }

/* a long path or command in the text breaks at a slash instead of widening the page on a phone */
.prose code { overflow-wrap: anywhere; }


/* ------------------------------------------------------------ home page */

.home-hero { padding: 2.6rem 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 2rem; align-items: center; }
.home-hero > * { min-width: 0; }
.home-hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; margin: 0 0 0.6rem; letter-spacing: -0.03em; }
.home-hero .tagline { font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.6rem; font-weight: 600; max-width: 30rem; }
.home-hero .lead { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 1.12rem; max-width: 34rem; }

.player {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.player-card { display: flex; align-items: center; gap: 1rem; }
.player .avatar { width: 96px; height: 96px; flex: none; border-radius: 16px; background: var(--panel2); object-fit: contain; box-shadow: 0 0 0 1px var(--line); }
.player .avatar.has-avatar { object-fit: cover; }
.player-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.player-info:empty { display: none; }
.p-name { font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.p-name:empty, .p-level:empty, .p-xp:empty { display: none; }
.p-level { font-family: var(--mono); font-size: 0.95rem; color: var(--accent); }
.p-xp { font-size: 0.8rem; color: var(--muted); }
/* Asgard reputation replaces the level and its bar: the label small, the number large (it has no bar, so it fills the place of the level, the bar and the XP line) */
.p-rep { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.p-rep[hidden] { display: none; }
.p-rep-label { font-size: 0.82rem; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.p-rep-n { font-family: var(--mono); font-size: 2.1rem; line-height: 1.05; font-weight: 700; color: var(--accent); }
.xp { display: block; height: 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.xp[hidden] { display: none; }
.xp > span { display: block; height: 100%; width: 0; background: var(--accent); }
.player:not(.has-card) .player-card { justify-content: center; }
.play-big {
  display: block; text-align: center; background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 800;
  font-size: 1.9rem; letter-spacing: 0.08em; padding: 0.8rem 1rem; border-radius: 14px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.play-big:hover { filter: brightness(1.08); }
.play-big:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.play-hint { margin: 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

.video { margin: 2.2rem 0; }
.video > h2, .news > h2, .latest > h2 { font-size: 1.3rem; margin: 0 0 0.8rem; letter-spacing: -0.01em; }
.video-box {
  position: relative; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; max-width: 52rem;
}
.video-box.placeholder { max-width: 36rem; border-style: dashed; flex-direction: column; gap: 0.6rem; color: var(--muted); text-align: center; padding: 1rem; }
.video-box.placeholder p { margin: 0; font-family: var(--serif); }
.video-box svg { width: 64px; height: 64px; }
.video-box svg circle { fill: none; stroke: currentColor; stroke-width: 3; }
.video-box svg path { fill: currentColor; }
.video-box.placeholder svg { opacity: 0.5; }
button.video-start {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; color: var(--accent); font-weight: 700; text-align: center; padding: 1rem;
}
button.video-start small { color: var(--muted); font-weight: 400; }
button.video-start:hover svg { transform: scale(1.06); }
button.video-start:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }
.video-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
button.video-start[hidden] { display: none; }
/* the player of the video of the site: the poster under a big play button; the box keeps the ratio of the video (inline aspect-ratio), so the page does not move */
.video-box.has-poster { background: #000; }
.video-box.has-poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.has-poster button.video-start {
  position: absolute; inset: 0; width: auto; height: auto; color: #fff; padding: 1rem 1rem 1.2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.12));
}
.has-poster button.video-start svg { width: 88px; height: 88px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.has-poster button.video-start span { font-size: 1.1rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.has-poster button.video-start small { color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.has-poster button.video-start:focus-visible { outline-color: #fff; }
@media (max-width: 480px) { .has-poster button.video-start svg { width: 64px; height: 64px; } }

.news { margin: 2.2rem 0; }
/* the entries stand one under another (the rows differ much in length, three columns looked uneven), as wide as the card of the current challenge above them (no max-width: both fill the column of the page) */
.news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; margin-bottom: 1rem; }
.news-entry { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1.1rem 0.8rem; }
.news-entry h3 { margin: 0 0 0.4rem; font-size: 1rem; display: flex; gap: 0.6rem; align-items: baseline; }
.news-entry h3 a { font-family: var(--mono); font-size: 1.15rem; }
.news-entry h3 time { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.news-entry .more { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }
.changes { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; line-height: 1.45; }
.changes li { margin: 0.4rem 0; overflow-wrap: anywhere; }
.kind { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 5px; padding: 0.05rem 0.4rem; margin-right: 0.25rem; vertical-align: 0.05em; background: var(--accent-soft); color: var(--accent); }
.kind-improved { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.kind-fixed { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.patch { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-right: 0.2rem; }
.note-lang { color: var(--muted); font-size: 0.88rem; margin: -0.3rem 0 0.8rem; }
.latest { margin: 2.2rem 0 0; }
.latest .cards { margin-bottom: 1rem; }

.page-head { padding: 2.2rem 0 0.6rem; }
.page-head h1 { font-size: clamp(1.9rem, 5.2vw, 2.7rem); margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.page-head .lead { font-family: var(--serif); font-size: 1.15rem; color: var(--muted); margin: 0 0 0.6rem; }
.page-head .current { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.9rem; }
.entries { max-width: 52rem; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
details.entry { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 1rem; }
details.entry[open] { padding-bottom: 0.7rem; }
details.entry > summary { cursor: pointer; padding: 0.7rem 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; list-style-position: inside; }
details.entry .v { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; }
details.entry time, details.entry .count { color: var(--muted); font-size: 0.85rem; }
details.entry:target { border-color: var(--accent); }

.empty { background: var(--panel); border: 1px dashed var(--line); border-radius: 14px; padding: 1rem 1.2rem; margin: 0 0 1rem; max-width: 40rem; }
.empty p { margin: 0 0 0.6rem; }

.chooser { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.chooser h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin: 0 0 1rem; }
.lang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.lang-list a { display: inline-block; padding: 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------ 404 */

.not-found { padding-top: 2.4rem; padding-bottom: 3rem; max-width: 40rem; }
.nf-code { font-size: clamp(4.5rem, 22vw, 9rem); line-height: 1; margin: 0 0 1.2rem; letter-spacing: -0.04em; color: var(--accent); }
.nf-lang { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem 1.1rem; margin: 0 0 1rem; box-shadow: var(--shadow); }
.nf-lang h2 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.nf-lang p { margin: 0 0 0.8rem; color: var(--muted); font-family: var(--serif); }
.nf-lang .nf-links { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nf-lang.first { border-color: var(--accent); }

@media (max-width: 720px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); padding-top: 1.4rem; gap: 1.4rem; }
  .play-big { font-size: 1.6rem; }
}

/* hexagon schemes of posts 41 and 42 (assets/charts/tribes-*.svg): the lattice of the original, the core and the ring of a territory, the candidates, the borders */
.chart .hx { stroke: var(--panel); stroke-width: 0.7; }
.chart .hx.free, .chart .hx.sea { fill: var(--panel2); }
.chart .hx.core { fill: var(--chart-a); }
.chart .hx.ring { fill: var(--chart-a); fill-opacity: 0.38; }
.chart .hx.cand { fill: var(--chart-b); fill-opacity: 0.22; }
.chart .hx.next { fill: var(--chart-b); }
.chart .hx.fill { fill: var(--good); }
.chart .hx.gone { fill: var(--muted); fill-opacity: 0.35; stroke: var(--muted); stroke-dasharray: 3 2; }
.chart .bnd { stroke: var(--text); stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.chart .mk { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; }

/* ------------------------------------------------------------ the wiki */

.page-head { padding: 2.2rem 0 0.8rem; }
.page-head h1 { font-size: clamp(1.9rem, 5.2vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.page-head .lead { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; color: var(--muted); margin: 0 0 0.8rem; }
.wiki-review, .wiki-reviewed { font-size: 0.86rem; color: var(--muted); border-left: 3px solid var(--line); padding: 0.1rem 0 0.1rem 0.7rem; margin: 0.6rem 0 0; }
.wiki-reviewed { margin-top: 1.6rem; }
.wiki-groups { display: grid; gap: 1.2rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); padding: 0.6rem 0 2rem; }
.wiki-group { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem 1.1rem; box-shadow: var(--shadow); }
.wiki-group h2 { font-size: 1.25rem; margin: 0 0 0.25rem; }
.wiki-group .group-lead { margin: 0 0 0.7rem; color: var(--muted); font-family: var(--serif); font-size: 0.98rem; }
.wiki-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.wiki-list li { display: grid; gap: 0.05rem; }
.wiki-list a { font-weight: 600; }
.wiki-list span { color: var(--muted); font-size: 0.92rem; font-family: var(--serif); line-height: 1.4; }

.wiki-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem 2.2rem; padding-top: 1rem; padding-bottom: 1.5rem; }
.wiki-nav { font-size: 0.93rem; }
.wiki-menu { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.9rem; }
.wiki-menu > summary { cursor: pointer; font-weight: 600; padding: 0.2rem 0; }
.wiki-menu p { margin: 0.5rem 0 0.2rem; }
.wiki-menu ul { list-style: none; margin: 0 0 0.3rem; padding: 0; }
.wiki-menu li a, .wiki-all a { display: block; padding: 0.18rem 0.5rem; margin: 0 -0.5rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.wiki-menu li a:hover, .wiki-all a:hover { background: var(--panel2); }
.wiki-menu a[aria-current="page"] { background: var(--panel2); font-weight: 700; color: var(--accent); }
.wiki-group-title { margin: 0.8rem 0 0.15rem !important; font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.wiki-page { min-width: 0; padding-bottom: 1rem; }
.wiki-page > header h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.wiki-page .lead { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; color: var(--muted); margin: 0 0 1.2rem; }
.wiki-page .prose { font-size: 1.08rem; }
.wiki-page .prose h2 { font-size: 1.35rem; margin-top: 2.1rem; }
.wiki-page .prose .table-wrap { margin-left: 0; margin-right: 0; }
.crumbs ol { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; font-size: 0.85rem; color: var(--muted); }
.crumbs li + li::before { content: "\203A"; margin-right: 0.5rem; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--text); }
/* the picture at the top of a page: the width of the column, a thin frame like the cards, a caption under it */
.wiki-figure { margin: 0 0 1.6rem; }
.wiki-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.wiki-figure figcaption { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.4; color: var(--muted); }
/* a picture in the text of a page: between the paragraphs; `small` is narrower than the one at the top (never wider than the column, so a phone gets the whole width), a pair stands side by side from 40rem and under each other below it */
.wiki-page .prose > .wiki-figure, .wiki-page .prose > .wiki-figures { margin: 1.4rem 0 1.6rem; }
.wiki-page .prose > .wiki-figure-small { max-width: 30rem; margin-left: auto; margin-right: auto; }
.wiki-figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.wiki-figures .wiki-figure { margin: 0; }
@media (min-width: 40rem) {
  .wiki-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a picture of the game in an article (`[[shot:id]]`): it steps out of the column like a chart (the rule for the figures of .prose above) and is not held to the width of the column of the wiki; `small` is the narrower one of the wiki */
.post .prose > .wiki-figure, .post .prose > .wiki-figures { max-width: none; margin-top: 1.8rem; margin-bottom: 1.8rem; }
.post .prose > .wiki-figures { --out: max(0px, min(6rem - 16px, (100cqw - 50rem - 32px) / 2)); margin-left: calc(-1 * var(--out)); margin-right: calc(-1 * var(--out)); }   /* (a pair is a block, not a figure: it steps out the same way) */
@media print { .post .prose > .wiki-figures { margin-left: 0; margin-right: 0; } }
.post .prose > .wiki-figure-small { max-width: 30rem; margin-left: auto; margin-right: auto; }
.wiki-list-pages { margin: 0 0 1.5rem; }
.wiki-link, .wiki-post { text-decoration-thickness: 1px; }
.wiki-note { color: var(--muted); font-size: 0.88em; }
.wiki-missing { color: #c0392b; text-decoration: wavy underline; }
/* the notes under the line: the mark [1] in the text, the list "Notes" under the text with a way back; the mark of the note that was jumped to is lit */
.fn-ref { font-size: 0.75em; line-height: 0; margin-left: 0.1em; white-space: nowrap; }
.fn-ref a { text-decoration: none; }
.wiki-notes { margin: 2rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.wiki-notes h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.notes { list-style: none; margin: 0; padding: 0; counter-reset: fn; }
.notes li { counter-increment: fn; position: relative; padding: 0.15rem 0.4rem 0.15rem 2.2rem; margin: 0.15rem 0 0.15rem -0.4rem; line-height: 1.5; border-radius: 6px; }
.notes li::before { content: "[" counter(fn) "]"; position: absolute; left: 0.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.notes li:target { background: var(--panel2); }
.fn-back { margin-left: 0.3rem; text-decoration: none; }
.fn-ref a:target { background: var(--panel2); border-radius: 3px; }
.wiki-related, .wiki-backlinks { margin-top: 2rem; }
.wiki-related h2, .wiki-backlinks h2, .in-wiki h2 { font-size: 1.15rem; margin: 0 0 0.7rem; }
.wiki-backlinks ul, .in-wiki ul { margin: 0; padding-left: 1.2rem; }
.wiki-backlinks li, .in-wiki li { margin: 0.25rem 0; }
.in-wiki { width: min(50rem, 100% - 32px); margin: 2rem auto 0; padding: 0.9rem 1.2rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.in-wiki span { color: var(--muted); font-size: 0.92rem; }
.wiki-pager { width: auto; margin-top: 2rem; }
/* a chart in the text of a page (`[[chart:name]]`): the figure of the articles (.chart: the frame, the scheme that follows the theme, a caption), kept to the column of the wiki; it does not step out of it like in an article */
.wiki-page .prose > figure.chart { margin: 1.4rem 0 1.6rem; }
/* a group that belongs to games (the strategy): the count of pages, the folds of the games in the navigation, the row of the games and the sections of the realms and the games on the page of the group,
   the sections "Strategy" and "Articles" at the end of the page of a game, and the game under the sentence of a page */
.wiki-count { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.wiki-group-title .wiki-count { font-size: 0.72rem; background: var(--panel2); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.3rem; }
.wiki-group .group-count { margin: -0.4rem 0 0.6rem; font-size: 0.88rem; color: var(--muted); }
.wiki-menu ul.wiki-games { margin: 0 0 0.3rem; }
.wiki-game > summary { cursor: pointer; padding: 0.18rem 0.5rem; margin: 0 -0.5rem; border-radius: 6px; }
.wiki-game > summary:hover { background: var(--panel2); }
.wiki-game[open] > summary { font-weight: 600; }
.wiki-menu .wiki-game ul { margin: 0.05rem 0 0.4rem 0.4rem; padding-left: 0.5rem; border-left: 1px solid var(--line); }
.wiki-jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin: 0 0 1.2rem; padding: 0; }
.wiki-jump a { display: inline-block; padding: 0.25rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 0.92rem; text-decoration: none; }
.wiki-jump a:hover { background: var(--panel2); }
.wiki-realm h2 { font-size: 1.45rem; margin: 2rem 0 0.4rem; }
.wiki-game-section { margin: 1.3rem 0 1.8rem; scroll-margin-top: 5rem; }
.wiki-game-section h3 { font-size: 1.15rem; margin: 0 0 0.1rem; }
.wiki-game-section .wiki-count { margin: 0 0 0.6rem; }
.wiki-strategy { margin-top: 2rem; }
.wiki-strategy h2 { font-size: 1.15rem; margin: 0 0 0.3rem; }
.wiki-related .section-lead { margin-bottom: 0.8rem; }
.section-lead { margin: 0 0 0.8rem; color: var(--muted); font-family: var(--serif); font-size: 0.98rem; }
.wiki-game-link { margin: -0.7rem 0 1.2rem; font-size: 0.92rem; color: var(--muted); }

@media (min-width: 60rem) {
  .wiki-layout { grid-template-columns: 16.5rem minmax(0, 1fr); align-items: start; }
  .wiki-nav { position: sticky; top: 4.6rem; max-height: calc(100vh - 5.4rem); overflow-y: auto; }
  .wiki-menu > summary { pointer-events: none; cursor: default; }
  .wiki-page > header, .wiki-page .prose, .wiki-page .wiki-notes, .wiki-figure, .wiki-list-pages, .wiki-jump, .wiki-realm, .wiki-strategy { max-width: 46rem; }
}

/* ------------------------------------------------------------ "what you find in the game" on the home page: cards with a shot of the game (the card also works without the picture) */

.showcase { margin: 2.2rem 0; }
.showcase > h2 { font-size: 1.3rem; margin: 0 0 0.8rem; letter-spacing: -0.01em; }
.shot-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.shot-card {
  position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.12s ease, border-color 0.12s ease;
}
.shot-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.shot-card .shot { background: var(--panel2); border-bottom: 1px solid var(--line); }
.shot-card .shot img { display: block; width: 100%; height: auto; }
.shot-card h3 { margin: 0.8rem 1rem 0.25rem; font-size: 1.1rem; line-height: 1.25; }
.shot-card h3 a { color: var(--text); text-decoration: none; }
.shot-card h3 a::after { content: ""; position: absolute; inset: 0; }
.shot-card h3 a:focus-visible { outline: none; }
.shot-card:has(h3 a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.shot-card p { margin: 0 1rem 1rem; color: var(--muted); font-family: var(--serif); font-size: 0.95rem; line-height: 1.45; }
.shot-card.no-shot h3 { margin-top: 1rem; }

/* challenges: the list, the page of a challenge, the card on the home page, the block at the end of an article */
.challenge-page, .challenges-index { padding-bottom: 2.5rem; }
.ch-head { max-width: 46rem; }
.ch-head .lead { max-width: 44rem; }
.ch-head .kicker { margin: 0 0 0.3rem; }
.ch-chips { list-style: none; margin: 0.5rem 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ch-chip { font-size: 0.82rem; line-height: 1.3; padding: 0.22rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); }
.ch-chip.ch-realm { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.ch-chip.ch-difficulty { border-color: var(--warn); color: var(--warn); font-weight: 600; }
.ch-chip.ch-time { display: inline-flex; flex-wrap: wrap; gap: 0.05rem 0.5rem; align-items: baseline; }
.ch-state { font-weight: 700; }
.ch-state.is-open { color: var(--good); }
.ch-state.is-upcoming { color: var(--warn); }
.ch-state.is-closed { color: var(--muted); }
.ch-when { display: inline-flex; flex-wrap: wrap; gap: 0 0.5rem; }
.ch-days { font-weight: 600; }
.ch-days[hidden] { display: none; }
.ch-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0 1rem; }
/* on a phone the buttons stand one under another, as wide as the column (the main button first) */
@media (max-width: 30rem) { .ch-actions { flex-direction: column; align-items: stretch; } .ch-actions .btn { text-align: center; } }
.ch-section { margin: 2.2rem 0 0; max-width: 46rem; }
.ch-section > h2, .ch-group > h2 { font-size: 1.35rem; margin: 0 0 0.8rem; letter-spacing: -0.01em; }
.ch-section .wiki-figure { margin: 0 0 1.2rem; }
.ch-section .prose p:last-child { margin-bottom: 0; }
.ch-note { font-size: 0.86rem; line-height: 1.45; color: var(--muted); border-left: 3px solid var(--line); padding: 0.1rem 0 0.1rem 0.7rem; margin: 0.9rem 0 0; }
.ch-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 0 0 0.4rem; }
.ch-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; line-height: 1.4; }
.ch-table th, .ch-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ch-table thead th { background: var(--panel2); font-weight: 600; white-space: nowrap; }
.ch-table tbody tr:last-child > * { border-bottom: 0; }
.ch-table tbody th { font-weight: 600; }
.ch-levels .ch-table tbody th { min-width: 9rem; }
.ch-lvl { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; font-weight: 700; margin-right: 0.35rem; }
.ch-pct { white-space: nowrap; }
.ch-bar { display: inline-block; vertical-align: middle; width: 3.5rem; height: 0.5rem; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); margin-right: 0.5rem; overflow: hidden; }
.ch-bar > span { display: block; height: 100%; background: var(--accent); }
.ch-tracks { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: 0.9rem; }
.ch-track { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem 1rem; }
.ch-track h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.ch-track p { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--muted); }
.ch-track p:last-child { margin-bottom: 0; }
.ch-big { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; }
.ch-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.ch-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: 6px; padding: 0 0.35rem; color: var(--muted); vertical-align: middle; }
.ch-steps { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.ch-steps li { margin: 0.3rem 0; }
.ch-board h3 { font-size: 1.05rem; margin: 1.4rem 0 0.6rem; }
.ch-group + .ch-group { margin-top: 2rem; }
.ch-card .ch-chips { margin: 0.3rem 0 0; }
.ch-card .no .ch-state { font-family: var(--sans); letter-spacing: 0; }
.current-challenge { margin: 2.2rem 0; }
.current-challenge > h2 { font-size: 1.3rem; margin: 0 0 0.8rem; letter-spacing: -0.01em; }
.ch-home { display: grid; gap: 1rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow); }
.ch-home-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.ch-home h3 { margin: 0 0 0.3rem; font-size: 1.3rem; }
.ch-home h3 a { color: var(--text); }   /* underlined as a link: the title is the way to the page of the challenge */
.ch-home p { margin: 0 0 0.5rem; color: var(--muted); font-family: var(--serif); }
.ch-home .ch-chips { margin: 0.6rem 0 0.6rem; }
@media (min-width: 46rem) { .ch-home.has-shot { grid-template-columns: minmax(0, 20rem) 1fr; align-items: center; } }
.in-challenge { width: min(50rem, 100% - 32px); margin: 2rem auto 0; padding: 0.9rem 1.2rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.in-challenge h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.in-challenge p { margin: 0.25rem 0; }
.in-challenge .ch-in-line { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 30rem) { .ch-bar { display: none; } .ch-table th, .ch-table td { padding: 0.5rem 0.6rem; } }

/* a game that is not there yet (the beta): the buttons into the game are inactive, and /game/ is a page "coming soon" */
.is-disabled, .is-disabled:hover, .is-disabled:active { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }
.play-big.is-disabled { box-shadow: none; }
button.play-big, button.btn { font: inherit; border: 0; }
button.btn { font-family: var(--sans); }   /* (font: inherit above would give a button the serif of the text around it) */
button.play-big { width: 100%; font-size: 1.9rem; font-weight: 800; letter-spacing: 0.08em; }
button.btn.ghost { border: 1px solid var(--line); }
.player.is-soon { gap: 0.8rem; }

/* the closed beta: the ribbon above the header of a browser that holds an invitation, and the page of the gate (/beta/): a form in the block of a language, one message for the state it is in */
.beta-ribbon { background: var(--accent-soft); border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--sans); font-size: 0.82rem; line-height: 1.3; padding: 0.3rem 1rem; text-align: center; }
.beta-ribbon a { color: var(--accent); font-weight: 600; }
.beta-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; }
.beta-form label { flex: 1 0 100%; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; }
.beta-form input { flex: 1 1 12rem; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 1.1rem var(--mono); letter-spacing: 0.06em; padding: 0.55rem 0.7rem; text-transform: uppercase; }
.beta-form input::placeholder { color: var(--muted); opacity: 0.7; }
.beta-form input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.beta-form button:disabled { opacity: 0.55; cursor: progress; }
.beta-msg, .beta-done { display: none; }
.nf-lang[data-state="checking"] .beta-msg[data-for="checking"], .nf-lang[data-state="offline"] .beta-msg[data-for="offline"],
.nf-lang[data-state="unsupported"] .beta-msg[data-for="unsupported"] { display: block; }
.nf-lang[data-state="wrong"] .beta-msg[data-for="wrong"], .nf-lang[data-state="expired"] .beta-msg[data-for="expired"] { display: block; color: var(--bad); font-weight: 600; }
.nf-lang[data-state="done"] .beta-form { display: none; }
.nf-lang[data-state="done"] .beta-done, .nf-lang[data-state="done"] .beta-done .beta-msg { display: block; }
.nf-lang[data-state="done"] .beta-done .beta-msg strong { color: var(--good); }
.beta-done .nf-links { margin-top: 0.8rem; }
.game-soon h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.1; margin: 0 0 1.2rem; letter-spacing: -0.02em; }

/* a notice at the top of a page of the wiki (front matter notice:): under the title and the sentence, before the picture */
.wiki-notice { font-family: var(--sans); font-size: 0.98rem; line-height: 1.5; background: color-mix(in srgb, var(--warn) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-left: 4px solid var(--warn); border-radius: 10px; padding: 0.7rem 1rem; margin: 0.9rem 0 1.2rem; }
.wiki-notice p { margin: 0; }

/* the page "Operator and privacy": a narrow column of text, the facts of the operator as terms and values, and the marked placeholder of a web that is only for looking at (local) */
.page-privacy .page-head, .page-privacy .prose { max-width: 46rem; }
.page-privacy .prose { font-size: 1.08rem; }
.page-privacy .prose h2 { font-size: 1.35rem; margin-top: 2.1rem; }
.page-privacy .prose li { margin: 0.55rem 0; }
dl.operator { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.2rem; margin: 0 0 1.2rem; font-family: var(--sans); font-size: 1rem; }
dl.operator dt { color: var(--muted); }
dl.operator dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
mark.missing { background: color-mix(in srgb, var(--warn) 30%, var(--panel)); color: var(--text); border: 1px dashed var(--warn); border-radius: 5px; padding: 0.04rem 0.4rem; font-family: var(--mono); font-size: 0.86em; font-weight: 700; }

/* schemes of post 13 (assets/charts/testy-*.svg): cards of the six layers of protection, a terminal with the output of one whole check */
.chart .sc { fill: var(--panel2); stroke: var(--line); stroke-width: 1; }
.chart .sn { fill: var(--text); font-family: var(--sans); font-size: 14.5px; font-weight: 700; }
.chart .sd { fill: var(--muted); font-family: var(--sans); font-size: 12.5px; }
.chart .bl { fill: var(--panel); font-family: var(--sans); font-size: 12.5px; font-weight: 700; }
.chart .cb { fill: var(--code-bg); }
.chart .code { fill: var(--text); font-family: var(--mono); font-size: 14px; }
.chart .code .mut { fill: var(--bad); font-weight: 700; text-decoration: underline; }
.chart .code .orig { font-weight: 700; }
.chart .sc.real { stroke: var(--chart-a); stroke-width: 2; }
.chart .sc.alt { stroke: var(--chart-b); stroke-width: 2; stroke-dasharray: 5 4; }
.chart .ic-a, .chart .ic-b { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .ic-a { stroke: var(--chart-a); }
.chart .ic-b { stroke: var(--chart-b); }
/* the terminal of post 13 is dark in both themes, like a window of a terminal */
.chart .tm-bg { fill: #0e1627; stroke: #2a3a5c; stroke-width: 1; }
.chart .tm-dot { fill: #3a4a6c; }
.chart .tm { fill: #d6e0f2; font-family: var(--mono); font-size: 11.5px; white-space: pre; }
.chart .tm .tm-ok { fill: #4ade80; font-weight: 700; }
.chart .tm .tm-h { fill: #8fb2ff; }
.chart .tm .tm-k { fill: #ffffff; font-weight: 700; }
.chart .tm .tm-m { fill: #8b9ab8; }
.chart .f2 { fill: var(--text); opacity: 0.8; }
.chart .sc-line { fill: none; stroke: var(--line); stroke-width: 1; }

/* schemes of post 15 (assets/charts/zaznam-anatomia.svg, analyza-sanca.svg): a record cut into coloured parts (the colours of the parts and of the two sides are fixed, they are not the colours of the theme),
   boards of one game, the bars of luck and decision */
.chart .rec { fill: var(--text); font-family: var(--mono); font-size: 11px; white-space: pre; }
.chart .rs { fill-opacity: 0.34; }
.chart .c-wrap { fill: #8b97ab; }
.chart .c-set { fill: #d97706; }
.chart .c-seed { fill: #16a34a; }
.chart .c-salt { fill: #8b5cf6; }
.chart .c-me { fill: #dc2626; }
.chart .c-opp { fill: #3b82f6; }
.chart .tl { stroke: var(--panel2); stroke-width: 0.08; stroke-linejoin: round; }
.chart .band { fill: var(--chart-a); opacity: 0.16; }
.chart .b-line { stroke: var(--chart-b); stroke-width: 5; stroke-linecap: round; fill: none; }
.chart .wh { stroke: var(--text); stroke-width: 1.5; }

/* the piano roll of post 52 (assets/charts/skladba-*.svg): the notes are in the colours of the players of the game (the standard palette of js/core/palettes.js: red, blue, green, yellow; the yellow is darker on the light page) */
:root { --pl0: #dc2626; --pl1: #3b82f6; --pl2: #16a34a; --pl3: #ca8a04; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pl3: #facc15; } }
:root[data-theme="dark"] { --pl3: #facc15; }
.chart .pn0 { fill: var(--pl0); }
.chart .pn1 { fill: var(--pl1); }
.chart .pn2 { fill: var(--pl2); }
.chart .pn3 { fill: var(--pl3); }
.chart .pk, .chart .pc { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.chart .pk { stroke-dasharray: 2 2.5; opacity: 0.7; }
.chart .pk0, .chart .pc0 { stroke: var(--pl0); }
.chart .pk1, .chart .pc1 { stroke: var(--pl1); }
.chart .pk2, .chart .pc2 { stroke: var(--pl2); }
.chart .pk3, .chart .pc3 { stroke: var(--pl3); }
.chart .kc { stroke: var(--text); stroke-width: 1.3; stroke-dasharray: 1 3; stroke-linecap: round; opacity: 0.65; }
.chart .hl2 { fill: var(--chart-b); fill-opacity: 0.2; }
.chart circle.a { fill: var(--chart-a); }
.chart circle.b { fill: var(--chart-b); }
.chart circle.hollow { fill: var(--panel); stroke: var(--chart-a); stroke-width: 2.2; stroke-dasharray: 3 2; }