/* Cantondle: a plate from a Swiss school atlas. Engraved roman for titles (Old Standard TT), a plain sans for text and
   tables (Fira Sans), condensed capitals for map-style labels (Fira Sans Condensed). Black print, hypsometric tints,
   one red (the boundary red of political maps) as the only accent. Symbols mean the same thing everywhere:
   solid green = correct, ochre hatching = close; in the table a wrong value stays plain paper, on the map a wrong guess is stippled. */
@font-face { font-family: "Old Standard"; src: url("/fonts/old-standard-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("/fonts/old-standard-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("/fonts/old-standard-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans Condensed"; src: url("/fonts/fira-sans-condensed-600.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  --paper: #f8f6f0;      /* page */
  --sheet: #ffffff;      /* map field, panels */
  --ink: #1d1b17;
  --ink-soft: #4f493c;   /* 8:1 on paper */
  --rule: #9a8d70;
  --rule-soft: #d5cbb3;
  --accent: #a3301f;     /* boundary red, 6.3:1 on paper */
  --btn: #1d1b17; --on-btn: #faf8f1;
  --ok: #2f6a39;  --on-ok: #ffffff;                           /* 6.4:1 */
  --near: #dc9450; --near-2: #b8702f; --on-near: #24150a;   /* muted orange (not fruit-bright), 6:1 with its text */
  --miss: #e2ded4; --miss-dot: #bab4a6; --on-miss: #1d1b17;
  --t1: #f1ebd5; --t2: #e8ddbb; --t3: #ddcaa0; --t4: #cfb489; --t5: #bf9d74;   /* hypsometric tints by highest point */
  --map-line: #7d705a;
  --grat: rgba(29, 27, 23, .32);
  --stip-bg: #b4b1a8; --stip-fg: #85827a;
  --halo: #faf8f1;
  --lake: #bcd3db; --lake-ink: #2d5866;
  --serif: var(--sans);
  --sans: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --cond: "Fira Sans Condensed", "Fira Sans", "Arial Narrow", system-ui, sans-serif;
  --sc: var(--cond);

  --dg-ink: var(--ink); --dg-bg: var(--paper); --dg-surface: var(--sheet);
  --dg-accent: var(--btn); --dg-accent-ink: var(--on-btn); --dg-current: var(--accent); --dg-focus: var(--accent);
  --dg-muted: var(--ink-soft); --dg-line: var(--rule-soft); --dg-rule-strong: 2px solid var(--ink);
  --dg-radius: 8px; --dg-font: var(--sans); --dg-font-label: var(--cond); --dg-font-num: var(--sans);
  --dg-label-size: .74rem; --dg-label-track: .09em;
  --dg-flame-outer: var(--ink); --dg-flame-inner: var(--paper); --dg-shadow: 0 1px 0 var(--rule);
  --dg-bar: var(--rule-soft); --dg-bar-ink: var(--ink); --dg-bar-me: var(--ok); --dg-bar-me-ink: #fff;
  --dg-col: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15130f; --sheet: #1d1a15; --ink: #ece4d1; --ink-soft: #b9ae95; --rule: #74684f; --rule-soft: #39332a;
    --accent: #e8826b; --btn: #ece4d1; --on-btn: #15130f;
    --ok: #3d7f46; --on-ok: #ffffff;
    --near: #c47a3c; --near-2: #9a5a26; --on-near: #150a03;
    --miss: #2c2a26; --miss-dot: #46433d; --on-miss: #ece4d1;
    --t1: #25221c; --t2: #342e24; --t3: #463c2e; --t4: #5b4c38; --t5: #735f45;   /* warm, never greenish (green means correct); each step >= 1.2:1 */
    --map-line: #85785f; --grat: rgba(236, 228, 209, .22);
    --stip-bg: #5d5b55; --stip-fg: #3f3d39; --halo: #1d1a15;
    --lake: #22353c; --lake-ink: #8fb7c4;
  }
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.55; background: var(--paper); color: var(--ink); font-variant-numeric: lining-nums; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-cap { font-family: var(--cond); font-weight: 600; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; }

/* ---------- masthead: running head of an atlas plate ---------- */
.c-mast { padding-top: 14px; }
.c-mast-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.c-logo-mark { width: 40px; height: 40px; flex: none; }
.c-logo-mark .c-lm-land { fill: var(--t1); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.c-logo-mark .c-lm-cap { fill: var(--accent); }
.c-word { font-family: var(--sans); font-weight: 700; font-size: clamp(1.45rem, 4.4vw, 1.85rem); letter-spacing: -.02em; line-height: 1; }
.c-mast { padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
.c-tools { display: flex; align-items: center; gap: 4px; }
.c-tools .dg-langs { margin-right: 6px; }
.c-tools .dg-flame { min-height: 44px; padding: 0 6px; }
.c-kicker {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 5px 0 4px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--cond); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.c-kicker #sheetNo { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-navs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 2px; border-bottom: 1px solid var(--rule-soft); }
/* modes: one segmented control, as on Swissdle */
.dg-modes { display: inline-flex; margin-top: 18px; padding: 3px; gap: 2px; border: 0; border-radius: 10px; background: var(--miss); }
.dg-modes a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 7px; background: none;
  color: var(--ink-soft); font-family: var(--sans); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.dg-modes a:hover { color: var(--ink); }
.dg-modes a[aria-current] { background: var(--btn); color: var(--on-btn); }
.dg-langs { gap: 0; border: 0; }
.dg-langs a { border: 0; background: none; color: var(--ink-soft); font-family: var(--sans); font-weight: 600; font-size: .8rem; min-width: 0; padding: 0 5px; border-radius: 4px; }
.dg-langs a:hover { color: var(--ink); }
.dg-langs a[aria-current] { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 480px) { .dg-modes a { padding: 0 12px; font-size: .9rem; } .dg-langs a { padding: 0 3px; } .c-tools .dg-langs { margin-right: 0; } }

/* ---------- title block ---------- */
.c-title { margin: 4px 0 0; }
.c-meta { margin: 0 0 6px; font-weight: 600; font-size: .92rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.c-q { margin: 0 0 10px; font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.c-intro { margin: 0; max-width: 32em; font-size: 1.05rem; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--btn); border-radius: 8px; background: var(--btn); color: var(--on-btn);
  font-family: var(--sans); font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap;
}
.c-btn:disabled { opacity: .5; cursor: default; }
.c-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-soft); padding: 0 12px; }
.c-btn-ghost:hover { border-color: var(--ink); }
.c-x { min-width: 44px; padding: 0; border-color: transparent; }
.c-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* ---------- first-visit note ---------- */
.c-howto { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); max-width: 46em; }
.c-howto-title { margin: 0 0 2px; color: var(--accent); }
.c-howto p { margin: 0 0 6px; }
.c-howto .c-btn { min-height: 40px; padding: 0 12px; background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---------- plate layout ---------- */
.c-game { margin: 28px 0 48px; }
.c-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.c-side { display: contents; }
/* below 900 px the newest guess sits right under the input; the map follows the board */
.c-title, .c-howto { order: 0; } .c-sil { order: 1; } .c-play { order: 2; } .c-end { order: 3; } .c-board { order: 4; } .c-plate { order: 5; }
@media (min-width: 900px) {
  .c-sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
  .c-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .c-plate { position: sticky; top: 14px; margin-top: 6px; }
}
.c-noscript { padding: 12px 0; border-top: 1px solid var(--ink); }

/* ---------- silhouette (impossible) ---------- */
.c-sil { margin: 0; padding: 10px 0 0; border-top: 1px solid var(--ink); }
.c-sil-svg { display: block; width: 100%; height: 250px; }
.c-sil-bg { fill: var(--t2); }
.c-sil-line { fill: var(--rule); opacity: .5; }
.c-sil-shape { stroke: var(--ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.c-sil-scale rect { fill: var(--ink); }
.c-sil-scale .c-scale-w, .c-scale .c-scale-w { fill: var(--sheet); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.c-sil-scale text, .c-north text { fill: var(--ink); font-family: var(--cond); font-weight: 600; }
.c-north path { fill: var(--ink); }
.c-sil figcaption { margin-top: 6px; font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .92rem; }

/* ---------- search ---------- */
.c-label { display: block; margin-bottom: 6px; font-family: var(--cond); font-weight: 600; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.c-search { position: relative; display: flex; scroll-margin-top: 12px; }
#guess {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; font: 1.1rem/1 var(--sans); color: var(--ink);
  border: 2px solid var(--ink); border-right: 0; border-radius: 10px 0 0 10px; background: var(--sheet);
}
#guess::placeholder { color: var(--ink-soft); opacity: 1; }
#guess:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 0; }
#guess:disabled { opacity: .7; }
.c-go { min-height: 56px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 0 10px 10px 0; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) { .c-go.c-pulse { animation: c-pulse .9s ease-out; } }
@keyframes c-pulse { 0% { outline: 2px solid var(--accent); outline-offset: 0; } 100% { outline: 2px solid transparent; outline-offset: 8px; } }
.c-opts {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: min(330px, 52vh); overflow: auto; margin: 0; padding: 0;
  list-style: none; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.c-opts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.c-opts li small { font-weight: 600; color: var(--ink-soft); font-size: .8rem; }
.c-opts li[aria-selected="true"], .c-opts li:hover { background: var(--ink); color: var(--paper); }
.c-opts li[aria-selected="true"] small, .c-opts li:hover small { color: var(--paper); }
.c-opts .c-none { color: var(--ink-soft); cursor: default; }
.c-opts .c-none:hover { background: none; color: var(--ink-soft); }

/* hints: two numbered notes under the input, like footnotes; the give-up link sits at the right */
.c-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
.c-hints { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.c-hint-btn, .c-hint {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--ink); border-radius: 8px; background: var(--sheet); text-align: left; line-height: 1.3;
  font: inherit; font-size: .88rem; color: var(--ink); max-width: 100%;
}
.c-hint-btn small { display: none; }
.c-hint small { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }
.c-hint b { font-weight: 600; }
.c-hint-btn { cursor: pointer; font-weight: 600; }
.c-hint-btn:not(:disabled):hover { background: var(--ink); color: var(--paper); }
.c-hint-btn:disabled { cursor: default; color: var(--ink-soft); border-color: var(--rule); border-style: dashed; background: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.c-hint-btn:disabled::before { content: ""; width: 9px; height: 10px; margin-right: 2px; align-self: center; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M1 4.5h7v5H1zM2.5 4.5V3a2 2 0 0 1 4 0v1.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M1 4.5h7v5H1zM2.5 4.5V3a2 2 0 0 1 4 0v1.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat; }
.c-link { flex: none; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .95rem; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
.c-link:hover { color: var(--ink); }
.c-link:disabled { opacity: .5; cursor: default; }
.c-link.c-armed { color: var(--accent); text-decoration-color: var(--accent); font-weight: 600; }
.c-msg { min-height: 1.5em; margin: 8px 0 0; }
.c-error { color: var(--accent); font-weight: 600; }

/* ---------- board: one table row per guess ---------- */
.c-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.c-row { overflow: clip; padding: 12px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule-soft); }
.c-row-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; min-width: 0; }
.c-row-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 50%; font-family: var(--sans); font-weight: 600; font-size: .8rem; line-height: 1; transform: translateY(-1px); font-variant-numeric: tabular-nums; }
.c-row-name { font-family: var(--serif); font-weight: 700; font-size: 1.22rem; line-height: 1.2; min-width: 0; }
.c-row-sub { margin-left: auto; font-family: var(--cond); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.c-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr); gap: 5px; }
.c-tiles.c-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 400px) { .c-tiles.c-n4 { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, 1.2fr); } }
.c-tile { position: relative; display: grid; align-content: start; gap: 2px; min-height: 58px; padding: 7px 9px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.c-tile-k { font-family: var(--sans); font-weight: 400; font-size: .74rem; line-height: 1.15; opacity: .85; }
.c-tile-v { display: flex; flex-wrap: wrap; align-items: center; column-gap: 3px; font-weight: 600; font-size: .98rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.c-tile-v small { font-family: var(--sans); font-weight: 600; font-size: .74rem; letter-spacing: .04em; }
.c-arr { font-style: normal; font-weight: 600; font-family: var(--sans); }
.c-compass { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.c-tile.st-correct { background: var(--ok); color: var(--on-ok); }
.c-tile.st-partial { background: repeating-linear-gradient(135deg, var(--near) 0 6px, var(--near-2) 6px 8px); color: var(--on-near); }
.c-tile.st-partial .c-tile-v { text-shadow: 0 0 3px var(--near), 0 0 3px var(--near); }
.c-tile.st-wrong { background: var(--miss); color: var(--ink); }
.c-tile.st-wrong .c-tile-k { color: var(--ink-soft); }
.c-col-region .c-tile-v { font-size: .88rem; }
@media (prefers-reduced-motion: no-preference) {
  .c-new .c-tile { animation: c-print .45s ease-out both; animation-delay: calc(var(--i) * 70ms); }
  .c-new .c-row-head { animation: c-print .3s ease-out both; }
}
@keyframes c-print { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the map plate ---------- */
.c-plate { margin: 0; }
.c-plate-off { display: none; }
.c-map-wrap { position: relative; background: var(--sheet); border-radius: 14px; overflow: hidden; }
.c-map .c-grat, .c-map .c-frame, .c-map .c-scale, .c-map .c-north { display: none; }
.c-map { display: block; width: 100%; height: auto; aspect-ratio: 18782 / 12094; }
.c-u { stroke: var(--map-line); stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .35s; }
.c-u.t1 { fill: var(--t1); } .c-u.t2 { fill: var(--t2); } .c-u.t3 { fill: var(--t3); } .c-u.t4 { fill: var(--t4); } .c-u.t5 { fill: var(--t5); }
@media (hover: hover) { .c-u:not(.c-g):hover { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.4px; } }
.mode-normal .c-u { stroke: var(--ink); stroke-width: .9px; }
.c-u.st-correct { fill: var(--ok); }
.c-u.st-partial { fill: url(#hatch); }
.c-u.st-wrong { fill: url(#stipple); }
.c-hatch-bg { fill: var(--near); } .c-hatch-fg { fill: var(--near-2); }
.c-stip-bg { fill: var(--stip-bg); } .c-stip-fg { fill: var(--stip-fg); }
.c-borders path { fill: none; stroke: var(--ink); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.c-frame-field { fill: var(--sheet); }
.c-grat path { fill: none; stroke: var(--grat); stroke-width: .6px; vector-effect: non-scaling-stroke; pointer-events: none; }
.c-frame { pointer-events: none; }
.c-frame .c-neat { fill: none; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.c-frame .c-band { fill: none; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.c-frame .c-band-b { fill: var(--ink); }
.c-frame text { font-family: var(--sans); font-size: 300px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.c-labels text {
  font-family: var(--cond); font-weight: 600; font-size: 330px; letter-spacing: 30px; fill: var(--ink-soft); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: var(--halo); stroke-width: 60px; stroke-linejoin: round; pointer-events: none;
}
.mode-hard .c-labels text, .mode-impossible .c-labels text { font-size: 300px; font-weight: 500; fill: color-mix(in srgb, var(--ink-soft) 85%, var(--paper)); }
.c-labels text.on { fill: var(--ink); opacity: 1; font-size: 400px; }
.c-labels text.on.st-correct { fill: #fff; stroke: var(--ok); }
.c-mark circle { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.c-mark.st-correct circle { fill: var(--ok); stroke: #fff; }
.c-mark text { font-family: var(--serif); font-style: italic; font-size: 270px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.c-mark.st-correct text { fill: #fff; }
.c-mark { pointer-events: none; }
.c-scale rect { fill: var(--ink); }
.c-scale text, .c-map .c-north text { font-family: var(--cond); font-weight: 600; font-size: 280px; fill: var(--ink); letter-spacing: 20px; }
.c-map .c-north text { font-size: 300px; }
.c-u.c-answer { stroke: var(--accent); stroke-width: 3px; }
.c-over .c-u { cursor: default; }
@media (hover: hover) { .c-over .c-u:not(.c-g):hover { fill: inherit; } }
@media (prefers-reduced-motion: no-preference) {
  .c-u.c-answer { stroke-dasharray: 10 4 2 4; animation: c-march 1.6s linear infinite; }
  .c-u.c-flash { animation: c-flash 1s ease-out; }
}
@keyframes c-march { to { stroke-dashoffset: -40; } }
@keyframes c-flash { 0% { stroke: var(--accent); stroke-width: 4px; } 100% { stroke-width: 1px; } }
@media (max-width: 600px) {
  .c-labels text { font-size: 470px; stroke-width: 80px; letter-spacing: 16px; }
  .mode-hard .c-labels text, .mode-impossible .c-labels text { font-size: 420px; }
  .c-labels text.on { font-size: 540px; }
  .c-mark circle { r: 330px; }
  .c-mark text { font-size: 380px; }
  .c-scale text, .c-map .c-north text { font-size: 440px; }
  .c-frame text { font-size: 420px; }
}
@media (min-width: 900px) {
  .c-labels text { font-size: 380px; }
  .mode-hard .c-labels text, .mode-impossible .c-labels text { font-size: 340px; }
  .c-labels text.on { font-size: 460px; }
}
.c-lakes path { fill: var(--lake); stroke: none; pointer-events: none; }

/* legend below the map: a tint scale and the three symbols, set like an atlas key */
.c-plate figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 10px; font-size: .84rem; color: var(--ink-soft); }
.c-map-cap { grid-column: 1 / -1; font-family: var(--serif); font-style: italic; font-size: .98rem; color: var(--ink); }
.c-key { display: block; }
.c-key-h { display: block; margin-bottom: 4px; color: var(--ink-soft); }
.c-ramp { display: grid; grid-template-columns: repeat(5, 34px); }
.c-ramp i { height: 11px; border: 1px solid var(--ink); border-left-width: 0; }
.c-ramp i:first-child { border-left-width: 1px; }
.c-ramp i:nth-child(1) { background: var(--t1); } .c-ramp i:nth-child(2) { background: var(--t2); } .c-ramp i:nth-child(3) { background: var(--t3); }
.c-ramp i:nth-child(4) { background: var(--t4); } .c-ramp i:nth-child(5) { background: var(--t5); }
.c-ramp-n { display: block; position: relative; height: 1.3em; width: 170px; font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--ink-soft); }
.c-ramp-n span { position: absolute; top: 2px; transform: translateX(-50%); }
.c-ramp-n span:nth-child(1) { left: 34px; } .c-ramp-n span:nth-child(2) { left: 68px; } .c-ramp-n span:nth-child(3) { left: 102px; } .c-ramp-n span:nth-child(4) { left: 136px; }
.c-ramp-n span:nth-child(5) { left: 170px; transform: none; padding-left: 4px; }
.c-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink); }
.c-legend > span { display: flex; align-items: center; gap: 8px; }
.c-sw { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--rule); }
.c-sw.st-correct { background: var(--ok); }
.c-sw.st-partial { background: repeating-linear-gradient(135deg, var(--near) 0 3px, var(--near-2) 3px 5px); }
.c-sw.st-wrong { background: radial-gradient(circle, var(--stip-fg) 1.1px, transparent 1.5px) 0 0 / 4px 4px, var(--stip-bg); }
.c-credit { font-size: .76rem; }
.c-yesterday { margin: 18px 0 0; font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.c-yesterday:empty { display: none; }

/* ---------- end panel: a gazetteer entry ---------- */
.c-end { padding: 10px 0 0; border-top: 2px solid var(--ink); }
.c-end:focus, .c-end:focus-visible { outline: none; }
.c-result:focus { outline: none; }
.c-end-head { padding-bottom: 6px; }
.c-result { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3.4vw, 1.6rem); line-height: 1.2; }
.is-won .c-result { color: var(--ok); }
@media (prefers-color-scheme: dark) { .is-won .c-result { color: #8fc596; } }
.c-answer-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px 0 14px; border-bottom: 1px solid var(--ink); }
.c-card-fig { display: grid; place-items: start; }
.c-card-svg { width: 100%; max-width: 200px; height: 140px; }
.c-card-svg .c-sil-bg { fill: var(--t2); }
.c-card-svg .c-sil-shape { stroke-width: 1.3px; }
@media (min-width: 520px) { .c-card { grid-template-columns: 140px minmax(0, 1fr); align-items: start; } .c-card-svg { height: 160px; } }
@media (min-width: 900px) and (max-width: 1100px) { .c-card { grid-template-columns: minmax(0, 1fr); } }
.c-card-name { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.85rem; line-height: 1.1; }
.c-card-sub { margin: 2px 0 10px; font-family: var(--cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-size: .8rem; }
.c-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--rule-soft); }
@media (min-width: 560px) and (max-width: 899px) { .c-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
.c-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--rule-soft); }
.c-facts dt { font-family: var(--cond); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; color: var(--ink-soft); flex: none; max-width: 48%; }
.c-facts dd { margin: 0; text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; min-width: 0; }
.c-facts dd small { display: block; color: var(--ink-soft); font-size: .76rem; }
.c-end-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.c-end-h { margin: 14px 0 8px; font-family: var(--cond); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.c-share-preview { margin: 0 0 12px; padding: 2px 0 2px 12px; white-space: pre-wrap; word-break: break-word; font: .9rem/1.45 var(--sans); background: none; border-left: 1px solid var(--rule); color: var(--ink); }
.c-end .dg-next { margin-top: 22px; }
.c-end .dg-next-title, .dg-next-done { font-family: var(--serif); font-weight: 700; }
.c-end .dg-next-go { color: var(--accent); }
.c-end-stats { margin-top: 8px; padding: 0; }
.dg-share-btn { border-radius: 8px; }
.dg-share-main { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: .95rem; }
.dg-share-main.dg-primary { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.dg-card-name { font-family: var(--serif); font-weight: 700; }
.dg-suggest .dg-card { grid-template-columns: minmax(0, 1fr) auto; }
.dg-suggest .dg-card-mark { display: none; }
.dg-howto { border-left-color: var(--accent); }

/* ---------- text pages: marginal heads, like the text pages of an atlas ---------- */
.c-texts { display: grid; gap: 0; margin-top: 8px; }
.c-text { padding: 8px 0 20px; border-top: 1px solid var(--ink); }
.c-text h2 { margin: 2px 0 12px; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.c-texts { max-width: 760px; }
.c-text { border-top: 1px solid var(--rule-soft); padding: 10px 0 14px; }
.c-text h2 { font-size: 1.15rem; }
.c-how > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.c-how > summary::-webkit-details-marker { display: none; }
.c-how > summary h2 { margin: 0; }
.c-how > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.c-how[open] > summary::after { content: "\2013"; }
.c-how-body { padding-top: 8px; }
#how.c-faq summary::before { content: none; }

.c-intro { text-wrap: pretty; }
/* phones: the language switch stays at the top, as a small row above the logo line (like Swissdle) */
@media (max-width: 600px) {
  .c-mast { position: relative; padding-top: 30px; }
  .c-tools .dg-langs { position: absolute; top: 2px; right: 0; margin: 0; }
  .c-tools .dg-langs a { min-height: 30px; padding: 0 7px; }
}
.c-text p, .c-text li { max-width: 40em; }
.c-text p { margin: 0 0 12px; }
.c-text ul { padding-left: 0; list-style: none; margin: 0 0 14px; }
.c-text li { position: relative; margin: 0; padding: 6px 0 6px 0; border-top: 1px solid var(--rule-soft); }
.c-text li:last-child { border-bottom: 1px solid var(--rule-soft); }
.c-faq details { border-bottom: 1px solid var(--rule-soft); max-width: 44em; }
.c-faq details:first-of-type { border-top: 1px solid var(--rule-soft); }
.c-faq summary { display: flex; align-items: baseline; gap: 10px; min-height: 46px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 600; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::before { content: "+"; flex: none; width: 14px; color: var(--accent); font-weight: 400; font-size: 1.15rem; line-height: 1; }
.c-faq details[open] summary::before { content: "\2013"; }
.c-faq details p { margin: 0 0 14px 24px; }

/* ---------- stats dialog ---------- */
.c-dialog { width: min(92vw, 440px); padding: 14px 18px 18px; border: 0; border-radius: 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--dg-shadow); }
.c-dialog::backdrop { background: rgba(25, 20, 10, .45); }
.c-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.c-dialog-head h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; }
.dg-stats-tiles b { font-weight: 600; }

/* ---------- footer and ad slots ---------- */
.dg-footer { border-top: 1px solid var(--rule-soft); }
.dg-footer-home { font-family: var(--serif); font-weight: 700; }

/* ---------- odds and ends ---------- */
@media (min-width: 1600px) and (max-width: 1759px) { :root { --dg-col: 960px; } }
.c-ok { font-style: normal; font-weight: 600; margin-left: 2px; }
/* map pick: a confirm button that stays in view under the map (mostly for touch screens) */
.c-map-go { position: sticky; bottom: 12px; z-index: 3; display: flex; width: 100%; justify-content: center; margin-top: 10px; box-shadow: var(--dg-shadow); }
.c-map-go[hidden] { display: none; }
/* static per-mode intro: the body class picks the visible one */
body:not(.mode-normal) .q-normal, body:not(.mode-hard) .q-hard, body:not(.mode-impossible) .q-impossible { display: none; }
@media (max-width: 600px) {
  .c-sil-svg { height: 170px; }
  .c-sil figcaption { margin-top: 4px; font-size: .84rem; }
}
/* narrow phones: the canton under a long district name gets its own line instead of an ellipsis */
@media (max-width: 400px) {
  .c-row-head { flex-wrap: wrap; row-gap: 0; }
  .c-row-name { flex: 1 1 0; min-width: 0; }
  .c-row-sub { max-width: none; margin-left: 34px; flex-basis: 100%; white-space: normal; }
  .c-kicker { font-size: .7rem; letter-spacing: .07em; }
}
@media (max-width: 899px) { .c-msg:empty { min-height: 0; margin: 0; } }
.c-tv { min-width: 0; overflow-wrap: break-word; }

/* data-fold:start */
.data-fold > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 32px; min-height: 44px; padding-bottom: 4px; cursor: pointer; }
.data-fold > summary::-webkit-details-marker { display: none; }
.data-fold > summary h2 { margin: 2px 0 6px; }
.data-fold-line { display: flex; align-items: baseline; gap: 10px; }
.data-fold-tog { position: relative; top: 1px; flex: none; width: 14px; height: 14px; color: var(--accent); }
.data-fold-tog::before, .data-fold-tog::after { left: 1px; right: 1px; top: 6px; height: 1.5px; }
.data-credit { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.data-fold > summary:hover .data-credit { color: var(--ink); }

.data-fold-body { padding: 10px 0 6px; }
/* data-fold:end */

/* streak: a static one-colour glyph */
.dg-flame.lit .dg-flame-inner { animation: none; }
.dg-flame.warm .dg-flame-outer { stroke: var(--ink); }
.dg-flame.warm .dg-flame-inner { fill: var(--ink); opacity: .35; }
/* the house notice / ad box sits on the left edge of the text, like everything else on the plate */
.dg-slot-bottom { margin-inline: 0 auto; }

/* simple layout: the texts below the game are three closed rows (rules, data, FAQ), all with the same + toggle */
.c-texts .c-faq > details.c-how { border: 0; max-width: none; }
.c-texts .c-faq > details.c-how > summary { font-weight: inherit; padding: 0; }
.c-texts .c-faq > details.c-how > summary::before { content: none; }
.c-texts .c-how > summary h2, .c-texts .data-fold > summary h2 { margin: 0; font-size: 1.15rem; }
.c-texts .data-fold > summary { display: flex; align-items: center; min-height: 44px; padding: 0; }
.c-texts .data-fold-line { display: none; }
.c-texts .data-fold > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.c-texts .data-fold[open] > summary::after { content: "3"; }
.c-text { padding: 8px 0; }
.c-text:last-child { border-bottom: 1px solid var(--rule-soft); }
/* impossible: the outline sits on a white card like the map */
.c-sil { padding: 12px; border: 0; border-radius: 14px; background: var(--sheet); }
.c-sil figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* desktop: input and map side by side on top, then the guesses (and the end panel) across the full width, one
   line per guess as on Swissdle, so nothing leaves a hole under the map */
@media (min-width: 900px) {
  .c-side { grid-column: 1; grid-row: 1; }
  .c-plate { grid-column: 2; grid-row: 1; position: static; margin-top: 0; }
  .c-sheet { row-gap: 0; }
  .c-end { grid-column: 1 / -1; grid-row: 2; margin-top: 32px; }
  .c-board { grid-column: 1 / -1; grid-row: 3; margin-top: 32px; }
  .c-board:empty { margin-top: 0; }
  .c-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 14px; }
  .c-row-head { flex-wrap: wrap; row-gap: 0; margin: 0; }
  .c-row-name { flex: 1 1 0; }
  .c-row-sub { flex-basis: 100%; max-width: none; margin-left: 34px; }
  .c-tiles, .c-tiles.c-n4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .c-card { grid-template-columns: 160px minmax(0, 1fr); }
  .c-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}
.dg-promo-done { grid-template-areas: "kick" "name" "tag"; grid-template-columns: 1fr; }
/* header buttons: icon + label, icon only on phones (as on Swissdle) */
.c-nav { gap: 7px; text-decoration: none; }
.c-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 480px) { .c-nav { min-width: 44px; padding: 0 10px; } .c-nav-l { display: none; } .c-tools { gap: 2px; } }
/* rules, data and FAQ rows run the full width of the page, like the guess rows */
.c-texts { max-width: none; }
.c-faq details, .c-text p, .c-text li { max-width: none; }
.c-text p, .c-text li, .c-faq details p { max-width: 80ch; }
.c-water path { fill: var(--lake); stroke: color-mix(in srgb, var(--lake-ink) 55%, transparent); stroke-width: .6px; vector-effect: non-scaling-stroke; pointer-events: none; }
/* the three closed rows below the game (rules, data, FAQ) look exactly alike: same height, text centred */
.c-texts .c-text > details > summary { display: flex; align-items: center; min-height: 52px; padding: 0; margin: 0; }
.c-texts .c-text { padding: 4px 0; }