/* TableMimic v4 „Punchboard" — globální vrstva: tokeny, základ, komponenty, layouty (DESIGN.md → v4).
   Platí JEN pro stránky s <html data-ui="v4">. Stránka si píše jen layout (mřížka, pozice, šířky);
   barvy, písmo, velikosti textu, tlačítka, pole, stíny a radiusy bere odsud (hlídá tools/v4/lint.mjs).

   Kaskáda:
   - tokeny a pár sporných základních pravidel (body, scrollbary, focus) jsou MIMO vrstvy se selektorem
     html[data-ui="v4"][data-theme] — musí přebít starý sdílený CSS (theme.css, browser.css), který je
     taky mimo vrstvy;
   - komponenty, layouty a utility jsou ve vrstvách v4.* — inline CSS stránky (mimo vrstvy) tak vždy
     vyhraje, takže stránka může cokoli lokálně posunout bez boje o specificitu.
   Režim (tmavý default / světlý) dál nastavuje theme.js přes data-theme, bez prefers-color-scheme.
   Hlasitost: výchozí tichý hlas (nástroje); [data-voice="loud"] na kontejneru = marketing. */

@layer v4.base, v4.components, v4.layouts, v4.utilities;

/* ════════════════════════ 1. TOKENY ════════════════════════ */

/* 1a. primitiva — paleta Ostružina; JEDINÉ místo s hex kódy v celém v4 */
html[data-ui="v4"] {
  --o-plum-950: #120D18; --o-plum-900: #1A1422; --o-plum-850: #1E1828; --o-plum-800: #2A2135;
  --o-plum-750: #2E2240; --o-plum-700: #352A43; --o-plum-650: #3E3150; --o-plum-500: #857799;
  --o-plum-400: #A99CB8; --o-plum-100: #EEE8F2;
  --o-lav-50: #FFFFFF; --o-lav-100: #F3EDF8; --o-lav-200: #DED3EA; --o-lav-250: #D3C6E1;
  --o-lav-300: #BFAFD3; --o-lav-400: #A996C0; --o-lav-600: #7A6A92; --o-lav-800: #55466A;
  --o-lav-950: #1F1729; --o-lav-900: #2A1E3A;
  --o-violet-300: #B9A3E6; --o-violet-600: #6A4EAE; --o-violet-700: #55339A;
  --o-violet-900: #3A2270;
  --o-ochre-400: #D9A646; --o-ochre-600: #A87A22; --o-ochre-800: #7A4F00;
  --o-parch-100: #F6E7C1;
  --o-red-400: #E8695F; --o-red-700: #A3271F; --o-green-400: #5FB98A; --o-green-700: #1F6B45;
  --o-amber-400: #E8B040; --o-amber-700: #8A5A00;
  --o-lilac-300: #D7B3E8; --o-lilac-700: #7A4FA0; --o-fog-200: #E6DFD0; --o-fog-700: #6B5E78;
}

/* 1b. sémantika — tmavý režim (výchozí) */
html[data-ui="v4"] {
  color-scheme: dark;
  --bg: var(--o-plum-900); --surface: var(--o-plum-800); --raised: var(--o-plum-700); --sunken: var(--o-plum-850);
  --edge: var(--o-plum-950); --line: var(--o-plum-650); --ctl: var(--o-plum-500);
  --text: var(--o-plum-100); --muted: var(--o-plum-400);
  --dm: var(--o-violet-300); --dm-fill: var(--o-violet-600); --dm-on: var(--o-lav-50);
  --player: var(--o-ochre-400); --player-text: var(--o-ochre-400); --player-on: var(--o-plum-900); --player-edge: var(--o-ochre-600);
  --cta: var(--o-ochre-400); --cta-text: var(--o-plum-900);
  --cut-color: var(--o-lav-50);
  --accent: var(--o-parch-100);
  --danger: var(--o-red-400); --danger-on: var(--o-plum-900); --ok: var(--o-green-400); --warn: var(--o-amber-400);
  --conc: var(--o-violet-300);   /* koncentrace (kouzlo drží) — fialová jako DM, ale jako stav */
  --ring-blessed: var(--o-ochre-400); --ring-poisoned: var(--o-green-400); --ring-frightened: var(--o-lilac-300);
  --ring-baned: var(--o-red-400); --ring-other: var(--o-fog-200);
  --sheet: var(--o-plum-750); --sheet-text: var(--o-lav-100);
  --dm-edge: var(--o-violet-900); --hole: var(--o-plum-950); --hole-text: var(--o-lav-100);   /* prázdná díra v listu žetonů */
  --shadow-rgb: 0, 0, 0; --shadow-a: .4;
  --scroll-thumb: var(--o-plum-650);
}
/* 1b'. sémantika — světlý režim = Levandulový karton */
html[data-ui="v4"][data-theme="light"] {
  color-scheme: light;
  --bg: var(--o-lav-200); --surface: var(--o-lav-100); --raised: var(--o-lav-50); --sunken: var(--o-lav-250);
  --edge: var(--o-lav-400); --line: var(--o-lav-300); --ctl: var(--o-lav-600);
  --text: var(--o-lav-950); --muted: var(--o-lav-800);
  --dm: var(--o-violet-700); --dm-fill: var(--o-violet-700); --dm-on: var(--o-lav-50);
  --player: var(--o-ochre-400); --player-text: var(--o-ochre-800); --player-on: var(--o-lav-950); --player-edge: var(--o-ochre-600);
  --cta: var(--o-violet-700); --cta-text: var(--o-lav-50);
  --cut-color: var(--o-lav-50);
  --accent: var(--o-lav-900);
  --danger: var(--o-red-700); --danger-on: var(--o-lav-50); --ok: var(--o-green-700); --warn: var(--o-amber-700);
  --conc: var(--o-violet-700);
  --ring-blessed: var(--o-ochre-600); --ring-poisoned: var(--o-green-700); --ring-frightened: var(--o-lilac-700);
  --ring-baned: var(--o-red-700); --ring-other: var(--o-fog-700);
  --sheet: var(--o-plum-750); --sheet-text: var(--o-lav-100);
  --dm-edge: var(--o-violet-900); --hole: var(--o-lav-250); --hole-text: var(--o-lav-950);   /* světlá díra = tmavý text */
  --shadow-rgb: 31, 23, 41; --shadow-a: .18;
  --scroll-thumb: var(--o-lav-400);
}

/* 1c. komponentové tokeny, typografie, prostor, tvar, pohyb, šířky (nezávislé na režimu) */
html[data-ui="v4"] {
  --ff-ui: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --ff-display: "Unbounded", "Rubik", "Segoe UI", system-ui, sans-serif;

  /* textové stupně — plynulé (Utopia 360 → 1600 px), marketing; nástroje mají pevné (níž, [data-app]) */
  --step--2: clamp(.75rem, .73rem + .09vw, .8125rem);
  --step--1: clamp(.8125rem, .79rem + .11vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + .24vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.25rem + .5vw, 1.625rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --step-5:  clamp(2.5rem, 1.6rem + 4vw, 5.25rem);
  --lh-tight: 1.05; --lh-head: 1.2; --lh-body: 1.5;

  --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-s: 16px; --space-m: 24px;
  --space-l: 32px; --space-xl: 48px; --space-2xl: 72px; --space-3xl: 112px;

  --r-btn: 14px; --r-field: 12px; --r-tok: 16px; --r-chip: 999px; --r-sm: 8px; --r-xs: 4px; --r-sheet: 24px;
  --thick: 1px;          /* tloušťka kartonu (spodní pás --edge); hlasitě 3px */
  --cut: 0px;            /* bílý výsekový okraj žetonu; hlasitě 3px */
  --lift: none;          /* měkký tónovaný stín; hlasitě zapnutý */
  --tilt: 0deg;          /* náklon žetonů; hlasitě ±3° po prvcích přes --tilt */
  --tap: 44px;           /* minimální dotyková plocha */

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --t-press: 100ms; --t-fast: 160ms; --t-panel: 240ms;
  --press: scale(.97);

  /* stíny jako tokeny (stránka nepíše box-shadow): tloušťka kartonu, žeton na tahu, popover, modal */
  --sh-tok: 0 var(--thick) 0 var(--edge);
  --sh-turn: 0 var(--thick) 0 var(--edge), 0 6px 14px rgba(var(--shadow-rgb), var(--shadow-a));
  --sh-pop: 0 12px 32px rgba(var(--shadow-rgb), calc(var(--shadow-a) + .1));
  --sh-modal: 0 24px 60px rgba(var(--shadow-rgb), calc(var(--shadow-a) + .2));
  --sh-win: 0 8px 24px rgba(var(--shadow-rgb), var(--shadow-a));          /* okno na ploše dashboardu */
  --sh-sel-b: inset 0 -2px 0 var(--player);                               /* vybraná záložka / položka lišty */
  --sh-sel-l: inset 2px 0 0 var(--player);                                /* vybraná položka seznamu / menu */
  --sh-ring: 0 0 0 2px var(--surface);                                    /* tečka na podkladu (odznak) */
  --sh-ul: 0 1px 0 var(--cta);                                            /* editovaný text v řádku */
  --sh-err: inset 0 0 0 1px var(--danger);                                /* pole s chybou, výstraha */
  --scrim: rgba(var(--shadow-rgb), .55);                                  /* pozadí za dialogem a šuplíkem */
  --sh-sel: inset 0 0 0 1px var(--player);                                /* zapnutý segment, aktivní nástroj */
  --sh-sel-2: inset 0 0 0 2px var(--player);                              /* vybraná karta / dlaždice */
  --sh-ring-sel: 0 0 0 2px var(--player);                                 /* vybraný vzorek barvy, fokus karty */
  --sh-ring-1: 0 0 0 1px var(--player);                                   /* drobný vybraný prvek */
  --sh-line: 0 0 0 1px var(--line);                                       /* tichý obrys zapnutého přepínače */
  --sh-line-in: inset 0 0 0 1px var(--line);                              /* obrys vzorku nebo čísla */
  --sh-gap: inset 0 0 0 2px var(--surface);                               /* mezera uvnitř vybraného vzorku */
  --sh-sel-l3: inset 3px 0 0 var(--player);                               /* aktuální položka v seznamu (silnější) */
  --sh-sel-t: inset 0 2px 0 var(--player);                                /* aktivní záložka dole na mobilu */

  --w-page: 1280px; --w-read: 70ch; --w-panel: 340px;
  --calc-cols: minmax(0, 7fr) minmax(0, 5fr);   /* kalkulačky ≥ 900 px: vstupy | přilepený výsledek (šablona .l-calc) */
  --zoom-1: .93; --zoom-2: .89; --zoom-3: .85;   /* stupně hustoty (framework škálování, DESIGN.md Responsive) */

  --z-bar: 40; --z-pop: 60; --z-modal: 80; --z-toast: 90;
}
/* nástroje (okna dashboardu = iframe): písmo neroste s viewportem */
html[data-ui="v4"][data-app] {
  --step--2: .75rem; --step--1: .8125rem; --step-0: .9375rem; --step-1: 1.0625rem;
  --step-2: 1.25rem; --step-3: 1.5rem; --step-4: 2rem; --step-5: 2.5rem;
  --lh-body: 1.35;
}
/* hlasitý hlas (marketing): stejné komponenty, víc kartonu */
html[data-ui="v4"] [data-voice="loud"] {
  --thick: 3px; --cut: 3px;
  --lift: 0 6px 14px rgba(var(--shadow-rgb), var(--shadow-a));
}

/* 1d. staré názvy → v4 (sdílené prvky účtu, ⚙, nápovědy, tipů a lišty jdou s sebou bez úprav) */
html[data-ui="v4"], html[data-ui="v4"][data-theme="light"] {
  --bg-soft: var(--sunken); --bg2: var(--sunken);
  --card: var(--surface); --card2: var(--raised); --panel: var(--surface); --panel2: var(--raised);
  --card-border: var(--line); --border: var(--line); --border-soft: var(--line); --line-2: var(--ctl);
  --field: var(--sunken);
  --text-dim: var(--muted); --text-3: var(--muted);
  --accent-2: var(--player-text); --accent: var(--player-text); --accent2: var(--player-text);
  --accent-1: var(--cta); --accent-1-light: var(--player-text); --accent-dim: var(--muted); --accent-1-dim: var(--muted);
  --brass: var(--accent); --btn: var(--cta); --btn-ink: var(--cta-text); --btn-hover: var(--cta);
  --brass-tint: var(--raised); --brass-line: var(--ctl);
  --pc: var(--player-text); --foe: var(--danger); --bad: var(--danger);
  --enemy: var(--danger); --red: var(--danger); --accent-3: var(--warn);
  --tm-r: var(--r-sm);
  --serif: var(--ff-display); --sans: var(--ff-ui); --ui: var(--ff-ui); --num: var(--ff-display);
}

/* ════════════════════════ 2. SPORNÝ ZÁKLAD (mimo vrstvy, přebíjí theme.css / browser.css) ════════════════════════ */

html[data-ui="v4"][data-theme] body {
  background: var(--bg); color: var(--text);
  font: 400 var(--step-0) / var(--lh-body) var(--ff-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* hlavní tlačítko appek (.primary z v3: výplň --accent-2, text --btn-ink / theme.css natvrdo tmavý) — ve světlém
   režimu je --accent-2 tmavě okrová barva TEXTU, jako výplň dávala 2,5:1 → výplň i text z CTA páru (komplet kontrola 31. 10.) */
html[data-ui="v4"][data-theme] :is(button, .btn, a, label).primary { background: var(--cta); color: var(--cta-text); border-color: var(--cta); }
/* nadpis právních stránek (legal.css, sdílené s jonbarson.cz): přechod do skoro bílé byl ve světlém režimu neviditelný */
html[data-ui="v4"][data-theme]:has(link[href*="legal.css"]) h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--text); font-family: var(--ff-display); font-weight: 800; letter-spacing: -.02em; }
/* štítky changelogu (changelog.js, barvy natvrdo pro tmavé pozadí) — ve světlém režimu ztmavit (měřeno 1,7:1) */
html[data-ui="v4"][data-theme="light"] .jbcl-chip { color: color-mix(in srgb, var(--tc) 50%, black); border-color: color-mix(in srgb, var(--tc) 65%, black); }
/* html zvlášť: hlavní scrollbar stránky patří kořeni, na který samotné `*` nedosáhne */
html[data-ui="v4"][data-theme], html[data-ui="v4"][data-theme] * { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
html[data-ui="v4"][data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-ui="v4"][data-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-ui="v4"][data-theme] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html[data-ui="v4"][data-theme] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
html[data-ui="v4"][data-theme] ::selection { background: var(--dm-fill); color: var(--dm-on); }
html[data-ui="v4"] :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--cta); }

/* ════════════════════════ 2b. SDÍLENÉ PRVKY (mimo vrstvy) ════════════════════════
   Lišta nástroje, účet, nápověda, ⚙, zpětná vazba, „What's new", tipy, cookies lišta, bubliny a SEO
   článek. Jejich CSS vkládají skripty natvrdo (auth.js, help.js, settings.js, feedback.js, changelog.js,
   tips.js, analytics.js, tm-tip.js, tool-seo.css, tm-topbar.css), proto silné selektory; tady jen
   písmo, barvy a tvary z tokenů, struktura a chování zůstávají ve skriptech. (Převzato z v3.) */
html[data-ui="v4"][data-theme] .tm-topbar {
  background: var(--surface); border-bottom-color: var(--line); box-shadow: var(--sh-tok);
  font-family: var(--ff-ui); padding-top: 8px; padding-bottom: 8px;
}
html[data-ui="v4"][data-theme] .tm-topbar .tm-home { color: var(--muted); font-weight: 500; }
html[data-ui="v4"][data-theme] .tm-topbar .tm-home:hover { color: var(--text); }
html[data-ui="v4"][data-theme] .tm-topbar .tm-title {
  font-family: var(--ff-display); font-weight: 700; font-size: var(--step-0); color: var(--text); letter-spacing: -.01em;
}
html[data-ui="v4"][data-theme] :is(.tm-topbar .tm-title span, .tm-topbar .tm-title small, .tm-topbar .tm-crumb) { color: var(--muted); font-family: var(--ff-ui); font-weight: 500; }
html[data-ui="v4"][data-theme] :is(.tm-topbar .tm-crumb::before, .tm-topbar .tm-crumb + .tm-title::before) { color: var(--ctl); font-family: var(--ff-ui); }
html[data-ui="v4"][data-theme] .tm-topbar .tm-crumb:hover { color: var(--text); }
html[data-ui="v4"][data-theme] .tm-topbar .tm-dash { color: var(--muted); border-color: var(--line); border-radius: var(--r-btn); }
html[data-ui="v4"][data-theme] .tm-topbar .tm-dash:hover { color: var(--text); border-color: var(--ctl); }
html[data-ui="v4"][data-theme] .tm-tagline { font-family: var(--ff-ui); font-style: normal; font-size: var(--step--1); color: var(--muted); margin: 0 auto 16px; }
html[data-ui="v4"][data-theme] .tm-tagline::before { content: none; }
html[data-ui="v4"]:not(.embedded) main:has(> .tm-tagline:first-child) { padding-top: 0; }
html[data-ui="v4"][data-theme]:not(.embedded) :is(main > .tm-tagline:first-child, .tm-topbar + .tm-tagline) { margin-top: 28px; }

html[data-ui="v4"][data-theme] :is(.jb-chip, .jbset-btn, .jbhelp-btn, .jbfb-float) {
  font-family: var(--ff-ui); background: var(--surface); border-color: var(--line); color: var(--text); border-radius: var(--r-btn);
}
html[data-ui="v4"][data-theme] :is(.jb-chip, .jbset-btn, .jbhelp-btn, .jbfb-float):hover { border-color: var(--ctl); color: var(--text); }
/* ikonová tlačítka lišty mají jednu velikost — Ko-fi je <a>, takže ho automatika tlačítek v .tm-app nezvětší */
html[data-ui="v4"][data-theme] .jbset-cluster :is(.jbset-btn, .jbhelp-btn:not(.jbhelp-float)) { width: var(--tap); height: var(--tap); min-width: 0; padding: 0; }
html[data-ui="v4"][data-theme] .jbset-cluster :is(.jbset-btn, .jbhelp-btn) svg { width: 17px; height: 17px; }
html[data-ui="v4"][data-theme] .site-nav-right > .jbset-cluster { display: contents; } /* settings.js vkládá nevrstvené inline-flex; pořadí lišty viz .site-nav-right v marketingovém rámci */
html[data-ui="v4"][data-theme] .jb-ava { background: var(--raised); color: var(--muted); }
html[data-ui="v4"][data-theme] .jb-chip { height: var(--tap); padding: 0 14px 0 7px; gap: 9px; } /* účet stejně vysoký jako ikony vedle */
html[data-ui="v4"][data-theme] .jb-chip .jb-ava { width: 30px; height: 30px; }
@media (max-width: 520px) { html[data-ui="v4"][data-theme] .site-nav .jb-chip { width: var(--tap); padding: 0; justify-content: center; font-size: 0; } } /* na telefonu jen avatar, ať zbude místo na logo */
html[data-ui="v4"][data-theme] :is(.jb-panel, .jbhelp-panel, .jbfb-panel, .jbset-pop, .jbcl-toast) {
  font-family: var(--ff-ui); background: var(--surface); border-color: var(--line); color: var(--text); border-radius: var(--r-tok); box-shadow: var(--sh-pop);
}
html[data-ui="v4"][data-theme] :is(.jb-overlay, .jbhelp-overlay, .jbfb-overlay) { background: color-mix(in srgb, var(--bg) 70%, transparent); }
html[data-ui="v4"][data-theme] :is(.jb-panel h2, .jbhelp-head h2, .jbcl-title, .jbfb-panel h2) { font-family: var(--ff-display); font-weight: 700; color: var(--text); letter-spacing: -.01em; }
html[data-ui="v4"][data-theme] .jbfb-panel h2 { font-size: var(--step-2); margin-bottom: 6px; }
/* zpětná vazba: typ hlášení jako segment v4 (jedna kolejnice, zapnutá položka zvednutá) */
html[data-ui="v4"][data-theme] .jbfb-seg { gap: 3px; padding: 3px; border: 1px solid var(--ctl); border-radius: var(--r-btn); background: var(--sunken); }
html[data-ui="v4"][data-theme] .jbfb-seg button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: 500 var(--step--1) / 1 var(--ff-ui); box-shadow: none; }
html[data-ui="v4"][data-theme] .jbfb-seg button:hover { color: var(--text); }
html[data-ui="v4"][data-theme] .jbfb-seg button.on { background: var(--raised); color: var(--text); box-shadow: var(--sh-tok); font-weight: 600; }
html[data-ui="v4"][data-theme] .jbfb-ta:focus-visible { outline: 2px solid var(--player); outline-offset: 2px; }
html[data-ui="v4"][data-theme] .jbhelp-head { background: var(--surface); border-color: var(--line); }
html[data-ui="v4"][data-theme] .jbhelp-body { color: var(--text); }
html[data-ui="v4"][data-theme] .jbhelp-body h4 { font-family: var(--ff-ui); font-weight: 600; color: var(--text); }
html[data-ui="v4"][data-theme] .jbhelp-body :is(kbd, code) { background: var(--sunken); border-color: var(--line); color: var(--text); }
html[data-ui="v4"][data-theme] .jbhelp-foot { background: var(--surface); border-color: var(--line); }
html[data-ui="v4"][data-theme] :is(.jbhelp-foot a, .jbcl-fb, .jbcl-all) { color: var(--dm); }
html[data-ui="v4"][data-theme] .jbhelp-lang { border-color: var(--line); }
html[data-ui="v4"][data-theme] .jbhelp-lang button { background: var(--sunken); color: var(--muted); }
html[data-ui="v4"][data-theme] :is(.jbhelp-lang button.on, .jbfb-seg button.on, .jbset-seg button.on) { background: var(--raised); color: var(--text); border-color: var(--ctl); }
html[data-ui="v4"][data-theme] :is(.jb-btn, .jbfb-btn2) { border-radius: var(--r-btn); }
html[data-ui="v4"][data-theme] :is(.jb-btn.jb-primary, .jbfb-btn2.pri) { background: var(--cta); color: var(--cta-text); border: 1px solid var(--cta); filter: none; box-shadow: var(--sh-tok); }
html[data-ui="v4"][data-theme] :is(.jbfb-ta, .jb-panel input) { background: var(--sunken); border-color: var(--ctl); color: var(--text); border-radius: var(--r-field); }
html[data-ui="v4"][data-theme] :is(.jbfb-ta, .jb-panel input):focus { border-color: var(--text); }
html[data-ui="v4"][data-theme] :is(.jbfb-dim, .jbhelp-x, .jbfb-close, .jbcl-x) { color: var(--muted); }
html[data-ui="v4"][data-theme] .jbfb-err { color: var(--danger); }
/* rozbalovací nabídka <select> ve vzhledu v4 (Chromium s base-select; jinde zůstane nativní). Mimo vrstvy,
   aby ji nepřebil stránkový `select { appearance: none }`; stránka s vlastní nabídkou (plánovač) má vyšší specificitu. */
@supports (appearance: base-select) {
  html[data-ui="v4"][data-theme] select:not([multiple]), html[data-ui="v4"][data-theme] select:not([multiple])::picker(select) { appearance: base-select; }
  /* jedna šipka pro všechny: vestavěnou ikonu skrýt (stránky mívají vlastní šipku v pozadí → byly by dvě) a kreslit tu z .select */
  html[data-ui="v4"][data-theme] select:not([multiple])::picker-icon { display: none; }
  html[data-ui="v4"][data-theme] select:not([multiple]) {
    padding-right: 34px; background-repeat: no-repeat;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px;
  }
  html[data-ui="v4"][data-theme] select:not([multiple])::picker(select) {
    margin-top: 4px; padding: 4px; min-width: anchor-size(width);
    background: var(--raised); color: var(--text); border: 1px solid var(--ctl); border-radius: var(--r-field); box-shadow: var(--sh-pop);
  }
  html[data-ui="v4"][data-theme] select:not([multiple]) option { padding: 8px 10px; border-radius: var(--r-sm); background: transparent; color: var(--text); font: 400 var(--step--1) / 1.3 var(--ff-ui); }
  html[data-ui="v4"][data-theme] select:not([multiple]) option::checkmark { display: none; }
  html[data-ui="v4"][data-theme] select:not([multiple]) option:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 9%, transparent); outline: none; }
  html[data-ui="v4"][data-theme] select:not([multiple]) option:checked { background: color-mix(in srgb, var(--player) 22%, transparent); font-weight: 600; }
}
html[data-ui="v4"][data-theme] :is(.jbset-pop .lbl, .jbset-kick, .jbcl-kicker, .tm-tip-lbl) {
  text-transform: none; letter-spacing: 0; font-size: var(--step--1); font-weight: 600; color: var(--muted); opacity: 1;
}
html[data-ui="v4"][data-theme] .jbset-sw:checked { background: var(--cta); border-color: var(--cta); }
html[data-ui="v4"][data-theme] .jbcl-chip { text-transform: none; letter-spacing: 0; font-size: var(--step--2); border-radius: var(--r-chip); }
html[data-ui="v4"][data-theme] .tm-tip { font-family: var(--ff-ui); }
html[data-ui="v4"][data-theme] .tm-atc-btn { border-radius: var(--r-btn); font-weight: 500; background: var(--surface); color: var(--text); }
html[data-ui="v4"][data-theme] .tm-atc-btn:not(:disabled):hover { border-color: var(--ctl); }

html[data-ui="v4"][data-theme] .tm-seo { font-family: var(--ff-ui); color: var(--muted); border-top-color: var(--line); }
html[data-ui="v4"][data-theme] .tm-seo::before { font-family: var(--ff-ui); text-transform: none; letter-spacing: 0; font-size: var(--step--1); color: var(--muted); }
html[data-ui="v4"][data-theme] :is(.tm-seo h1, .tm-seo h2) { font-family: var(--ff-display); font-weight: 800; color: var(--text); letter-spacing: -.02em; }
html[data-ui="v4"][data-theme] .tm-seo .tm-intro { color: var(--text); }
html[data-ui="v4"][data-theme] .tm-seo .tm-feat li { color: var(--muted); }
html[data-ui="v4"][data-theme] .tm-seo .tm-feat li::before { color: var(--player-text); }
html[data-ui="v4"][data-theme] .tm-seo .tm-faq details { background: var(--surface); border-color: var(--line); border-radius: var(--r-field); }
html[data-ui="v4"][data-theme] :is(.tm-seo .tm-faq summary, .tm-seo .tm-faq details[open] summary) { color: var(--text); }
html[data-ui="v4"][data-theme] .tm-seo .tm-faq summary::after { color: var(--muted); }
html[data-ui="v4"][data-theme] .tm-seo .tm-faq .tm-a { color: var(--muted); }
html[data-ui="v4"][data-theme] :is(.tm-seo .tm-part, .tm-seo .tm-related) { color: var(--muted); border-color: var(--line); }
html[data-ui="v4"][data-theme] :is(.tm-seo .tm-part a, .tm-seo .tm-related a) { color: var(--dm); }
html[data-ui="v4"][data-theme] .tm-foot { font-family: var(--ff-ui); color: var(--muted); }
html[data-ui="v4"][data-theme] #tm-relbar { font-family: var(--ff-ui); }

/* cookies lišta: analytics.js nastavuje inline style → jen barvy, písmo a tvar přes !important */
html[data-ui="v4"][data-theme] #jb-cookie-bar {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important;
  border-radius: var(--r-tok) !important; font-family: var(--ff-ui) !important; box-shadow: var(--sh-pop) !important;
}
html[data-ui="v4"][data-theme] #jb-cookie-bar > div:first-child { color: var(--muted) !important; }
html[data-ui="v4"][data-theme] #jb-cookie-bar a { color: var(--dm) !important; }
html[data-ui="v4"][data-theme] #jb-cookie-bar button {
  border-radius: var(--r-btn) !important; background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--ctl) !important; box-shadow: var(--sh-tok) !important;
}
html[data-ui="v4"][data-theme] #jb-cookie-bar button:last-child { background: var(--cta) !important; color: var(--cta-text) !important; border-color: var(--cta) !important; font-weight: 600 !important; }

/* bublina místo nativního title (tm-tip.js): tmavý režim zvednutý panel, světlý obrácená tmavá bublina */
html[data-ui="v4"] .tm-tt {
  --tt-bg: var(--raised); --tt-ink: var(--text); --tt-line: var(--ctl);
  position: fixed; z-index: 2147483000; max-width: min(280px, calc(100vw - 12px));
  padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--tt-line);
  background: var(--tt-bg); color: var(--tt-ink);
  font: 500 var(--step--1) / 1.4 var(--ff-ui); text-align: left; white-space: pre-line; overflow-wrap: anywhere;
  box-shadow: var(--sh-pop);
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); visibility: hidden;
}
html[data-ui="v4"][data-theme="light"] .tm-tt { --tt-bg: var(--text); --tt-ink: var(--surface); --tt-line: var(--text); }
html[data-ui="v4"] .tm-tt.on { opacity: 1; transform: none; visibility: visible; }
html[data-ui="v4"] .tm-tt.below { transform: translateY(-3px); }
html[data-ui="v4"] .tm-tt.below.on { transform: none; }
html[data-ui="v4"] .tm-tt::after {
  content: ""; position: absolute; left: var(--ax, 50%); top: 100%; width: 8px; height: 8px;
  background: var(--tt-bg); border: 1px solid var(--tt-line); border-top: 0; border-left: 0;
  transform: translate(-50%, -4px) rotate(45deg);
}
html[data-ui="v4"] .tm-tt.below::after { top: auto; bottom: 100%; transform: translate(-50%, 4px) rotate(225deg); }
html[data-ui="v4"] :is([title], [data-tm-tip]):not(a, button, input, select, textarea, label, summary, [role="button"], [role="tab"], a *, button *):is([tabindex], .rs-info, [style*="cursor:help"]) { cursor: help; }

/* pozadí nástrojů: zatím bez bojové podložky (DESIGN.md v4, otevřené) — čistý podklad */
html[data-ui="v4"][data-theme] :is(.bg-grid, .glow, #particles) { display: none; }

/* ════════════════════════ 3. ZÁKLAD ════════════════════════ */
@layer v4.base {
  html[data-ui="v4"] *, html[data-ui="v4"] *::before, html[data-ui="v4"] *::after { box-sizing: border-box; }
  html[data-ui="v4"] :where(body) { margin: 0; }   /* jinak 8 px od prohlížeče — lišta by se nelepila k vršku */
  html[data-ui="v4"] :where(h1, h2, h3, h4) { margin: 0; color: inherit; text-wrap: balance; }
  html[data-ui="v4"] :where(h1) { font: 800 var(--step-4) / var(--lh-tight) var(--ff-display); letter-spacing: -.03em; }
  html[data-ui="v4"] :where(h2) { font: 800 var(--step-3) / 1.1 var(--ff-display); letter-spacing: -.02em; }
  html[data-ui="v4"] :where(h3) { font: 700 var(--step-1) / var(--lh-head) var(--ff-ui); }
  html[data-ui="v4"] :where(h4) { font: 600 var(--step-0) / var(--lh-head) var(--ff-ui); }
  html[data-ui="v4"] :where(p) { margin: 0; text-wrap: pretty; }
  html[data-ui="v4"] :where(a) { color: var(--dm); text-underline-offset: 3px; }
  html[data-ui="v4"] :where(a:hover) { text-decoration-thickness: 2px; }
  html[data-ui="v4"] :where(small) { font-size: var(--step--1); color: var(--muted); }
  html[data-ui="v4"] :where(button, input, select, textarea) { font: inherit; color: inherit; }
  html[data-ui="v4"] :where(hr) { border: 0; border-top: 1px solid var(--line); margin: var(--space-m) 0; }
  html[data-ui="v4"] :where(img, svg, video, canvas) { max-width: 100%; }
  html[data-ui="v4"] :where([hidden]) { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html[data-ui="v4"] *, html[data-ui="v4"] *::before, html[data-ui="v4"] *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
  }
}

/* ════════════════════════ 4. KOMPONENTY ════════════════════════ */
@layer v4.components {

  /* — textové stupně (stránka nepíše font-size) — */
  .t-display { font: 800 var(--step-5) / 1 var(--ff-display); letter-spacing: -.03em; text-wrap: balance; }
  .t-h1 { font: 800 var(--step-4) / var(--lh-tight) var(--ff-display); letter-spacing: -.03em; text-wrap: balance; }
  .t-h2 { font: 800 var(--step-3) / 1.1 var(--ff-display); letter-spacing: -.02em; text-wrap: balance; }
  .t-h3 { font: 700 var(--step-1) / var(--lh-head) var(--ff-ui); }
  .t-body { font: 400 var(--step-0) / var(--lh-body) var(--ff-ui); }
  .t-small { font: 400 var(--step--1) / 1.4 var(--ff-ui); }
  .t-micro { font: 500 var(--step--2) / 1.3 var(--ff-ui); color: var(--muted); }
  .t-num { font-family: var(--ff-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .t-muted { color: var(--muted); }
  .t-dm { color: var(--dm); } .t-player { color: var(--player-text); }
  .t-danger { color: var(--danger); } .t-ok { color: var(--ok); }

  /* — tlačítko: karton s tloušťkou, stisk = zmáčknutí tloušťky —
     Uvnitř nástroje (.tm-app) má tenhle vzhled každý <button> i bez třídy (nulová specificita přes
     :where), takže tlačítka generovaná JS appek jsou v4 bez zásahu do skriptu. Sdílená lišta, ⚙
     a nápověda leží mimo .tm-app a nemění se. Třída stránky přebije cokoli (je mimo vrstvy). */
  .btn, :where(html[data-ui="v4"] .tm-app) button {
    --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--ctl); --b-edge: var(--edge);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); min-width: var(--tap); padding: 0 16px;
    border: 1px solid var(--b-bd); border-radius: var(--r-btn);
    background: var(--b-bg); color: var(--b-fg);
    box-shadow: 0 var(--thick) 0 var(--b-edge);
    font: 500 var(--step-0) / 1.1 var(--ff-ui); text-decoration: none; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out), background-color var(--t-fast) var(--ease-out);
  }
  /* automatická tlačítka v nástroji (bez .btn) dostávají jen VZHLED v4 (barvy, rámeček, písmo), rozměry nechávají
     stránce jako ve v3: husté appky mají vlastní steppery, kulaté vzorky, čipy kostek a „údaj jako text"
     a vnucená výška, šířka a vnitřní okraj jim rozbíjely řádky (ovály místo koleček, text u okraje) */
  :where(html[data-ui="v4"] .tm-app) button { min-height: 0; min-width: 0; padding: 1px 6px; box-shadow: none; }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover, :where(html[data-ui="v4"] .tm-app) button:hover { background: color-mix(in srgb, var(--b-bg) 88%, var(--text)); }
  }
  .btn:active { transform: translateY(var(--thick)) var(--press); box-shadow: 0 0 0 var(--b-edge); }
  :where(html[data-ui="v4"] .tm-app) button:active { transform: var(--press); }
  .btn:disabled, .btn[aria-disabled="true"], :where(html[data-ui="v4"] .tm-app) button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  .btn:disabled, .btn[aria-disabled="true"] { box-shadow: 0 var(--thick) 0 var(--b-edge); }
  .btn[aria-busy="true"] { cursor: progress; opacity: .8; }
  .btn > svg, :where(html[data-ui="v4"] .tm-app) button > svg { width: 1.15em; height: 1.15em; flex: none; }
  .btn--primary { --b-bg: var(--cta); --b-fg: var(--cta-text); --b-bd: var(--cta); --b-edge: color-mix(in srgb, var(--cta) 55%, black); font-weight: 600; }
  .btn--player { --b-bg: var(--player); --b-fg: var(--player-on); --b-bd: var(--player); --b-edge: var(--player-edge); font-weight: 600; }
  .btn--dm { --b-bg: var(--dm-fill); --b-fg: var(--dm-on); --b-bd: var(--dm-fill); --b-edge: color-mix(in srgb, var(--dm-fill) 60%, black); font-weight: 600; }
  .btn--danger { --b-fg: var(--danger); --b-bd: var(--danger); }
  .btn--quiet { --b-bg: transparent; --b-bd: transparent; --b-edge: transparent; }
  .btn--sm { min-height: 36px; min-width: 36px; padding: 0 12px; font-size: var(--step--1); }   /* drobné akce v řádku (WCAG 2.5.8: ≥ 24 px) */
  .btn--lg { min-height: 56px; padding: 0 28px; font-size: var(--step-1); border-radius: var(--r-tok); }
  .btn--icon { padding: 0; width: var(--tap); }
  .btn--block { display: flex; width: 100%; }

  /* — pole — (uvnitř .tm-app i holé <input>/<textarea>/<select>, stejně jako tlačítka).
     .field/.select jen na ovládacím prvku: appky mají „.field" jako obal popisku a pole (kompendium, spell-dc…) */
  :is(input, textarea, select).field, select.select,
  :where(html[data-ui="v4"] .tm-app) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select) {
    width: 100%; min-height: var(--tap); padding: 10px 12px;
    border: 1px solid var(--ctl); border-radius: var(--r-field);
    background: var(--sunken); color: var(--text); font: 400 var(--step-0) / 1.3 var(--ff-ui);
    transition: border-color var(--t-fast) var(--ease-out);
  }
  .field::placeholder, :where(html[data-ui="v4"] .tm-app) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
  .field:hover, .select:hover, :where(html[data-ui="v4"] .tm-app) :is(input, textarea, select):hover { border-color: var(--text); }
  .field:focus-visible, .select:focus-visible, :where(html[data-ui="v4"] .tm-app) :is(input, textarea, select):focus-visible {
    outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--text);
  }
  .field[aria-invalid="true"] { border-color: var(--danger); }
  .field--num { font-family: var(--ff-display); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
  .select { appearance: none; padding-right: 36px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
  .label { display: block; margin-bottom: 6px; font: 500 var(--step--1) / 1.3 var(--ff-ui); color: var(--muted); }
  .hint { margin-top: 6px; font-size: var(--step--1); color: var(--muted); }
  .hint--error { color: var(--danger); }

  /* zaškrtávátko a přepínač */
  .check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
  .check input { appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border: 2px solid var(--ctl); border-radius: 6px; background: var(--sunken); display: grid; place-items: center; cursor: pointer; }
  .check input::after { content: ""; width: 10px; height: 6px; border: solid var(--cta-text); border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
  .check input:checked { background: var(--cta); border-color: var(--cta); }
  .check input:checked::after { opacity: 1; }
  .switch { appearance: none; position: relative; width: 46px; height: 28px; margin: 0; flex: none; border-radius: 999px; border: 2px solid var(--ctl); background: var(--sunken); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out); }
  .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
  .switch:checked { background: var(--cta); border-color: var(--cta); }
  .switch:checked::after { transform: translateX(18px); background: var(--cta-text); }

  /* segment (přepínač voleb) */
  .seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--ctl); border-radius: var(--r-btn); background: var(--sunken); }
  .seg > button, .seg > label { min-height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: 500 var(--step--1) / 1 var(--ff-ui); cursor: pointer; display: inline-flex; align-items: center; }
  .seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > :has(input:checked) { background: var(--raised); color: var(--text); box-shadow: 0 var(--thick) 0 var(--edge); }

  /* záložky */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .tabs > [role="tab"] { min-height: var(--tap); padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: 500 var(--step--1) / 1 var(--ff-ui); cursor: pointer; white-space: nowrap; }
  .tabs > [aria-selected="true"] { color: var(--text); border-bottom-color: var(--dm); }

  /* — plochy z kartonu — */
  .card {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-tok);
    box-shadow: 0 var(--thick) 0 var(--edge), var(--lift);
    padding: var(--space-s);
    rotate: var(--tilt);
  }
  [data-voice="loud"] .card, .card[data-voice="loud"] { border: var(--cut) solid var(--cut-color); }
  .card--raised { background: var(--raised); }
  .card--dm { background: var(--dm-fill); color: var(--dm-on); border-color: var(--dm-fill); }
  .card--player { background: var(--player); color: var(--player-on); border-color: var(--player); }
  .sheet { background: var(--sheet); color: var(--sheet-text); border-radius: var(--r-sheet); padding: var(--space-m); }

  /* — list výsekových žetonů (podpis Punchboardu) —
     .punch > .punch-slots > li.slot[--big|--wide|--round] > a.ptok[--player|--dm]  nebo  > span.hole (prázdná díra).
     Žeton sedí v listu zamáčknutý a vyskočí, když dostane list .is-out (nebo .rv-in z odhalení);
     bez JS a s omezeným pohybem je rovnou venku. Náklon žetonu: style="--tilt:…", pořadí dojezdu: style="--i:…". */
  .punch {
    position: relative; background: var(--sheet); color: var(--sheet-text);
    border: var(--cut) solid var(--cut-color); border-radius: var(--r-sheet);
    box-shadow: 0 var(--thick) 0 var(--edge), var(--sh-pop); padding: var(--space-m);
  }
  .punch-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--space-m); text-align: left; }
  .punch-head :is(h2, h3) { font: 700 var(--step-1) / 1.2 var(--ff-ui); letter-spacing: 0; }
  .punch-head p { color: color-mix(in srgb, var(--sheet-text) 75%, transparent); font-size: var(--step--1); }
  .punch-head a { color: var(--sheet-text); font-weight: 600; }
  .punch-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(116px, auto); grid-auto-flow: dense; gap: 22px; }
  .punch .slot { position: relative; min-width: 0; border-radius: var(--r-tok); }
  /* vyražená drážka kolem žetonu + čtyři můstky, které ho drží v listu */
  .punch .slot::before { content: ""; position: absolute; inset: -7px; border: 1.5px solid color-mix(in srgb, var(--sheet-text) 40%, transparent); border-radius: calc(var(--r-tok) + 6px); pointer-events: none; }
  .punch .slot::after { content: ""; position: absolute; inset: -8px; border-radius: calc(var(--r-tok) + 7px); pointer-events: none;
    background: linear-gradient(var(--sheet), var(--sheet)) 30% 0 / 9px 4px no-repeat, linear-gradient(var(--sheet), var(--sheet)) 70% 100% / 9px 4px no-repeat,
                linear-gradient(var(--sheet), var(--sheet)) 0 60% / 4px 9px no-repeat, linear-gradient(var(--sheet), var(--sheet)) 100% 40% / 4px 9px no-repeat; }
  .punch .slot--big { grid-column: span 2; grid-row: span 2; }
  .punch .slot--wide { grid-column: span 2; }
  .punch .slot--round { aspect-ratio: 1; align-self: center; justify-self: center; width: 100%; max-width: 140px; }
  .punch .slot--round, .punch .slot--round::before, .punch .slot--round::after, .punch .slot--round .ptok { border-radius: 50%; }
  .punch .hole { position: absolute; inset: 0; border-radius: inherit; background: var(--hole); box-shadow: inset 0 5px 10px rgba(var(--shadow-rgb), calc(var(--shadow-a) + .15)); }
  /* vylomená díra jako tlačítko: „tady si vyrazíš nový žeton" (nová kampaň, nová postava) */
  .hole-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px;
    background: var(--hole); color: var(--hole-text); border: 2px dashed color-mix(in srgb, var(--hole-text) 35%, transparent);
    border-radius: var(--r-tok); box-shadow: inset 0 5px 10px rgba(var(--shadow-rgb), calc(var(--shadow-a) + .15));
    font: 600 var(--step-0) / 1.3 var(--ff-ui); text-align: center; cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .hole-btn:hover { border-color: var(--player); color: var(--text); }
  .hole-btn:focus-visible { outline: 2px solid var(--player); outline-offset: 3px; }
  .hole-btn:active { scale: .98; }
  .ptok {
    --pt-edge: var(--edge);
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; padding: 14px 16px;
    background: var(--surface); color: var(--text); border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok);
    text-decoration: none; text-align: left;
    translate: 0 -6px; scale: 1; rotate: var(--tilt, 0deg);
    box-shadow: 0 var(--thick) 0 var(--pt-edge), 0 12px 20px rgba(var(--shadow-rgb), calc(var(--shadow-a) + .1));
    transition: translate 220ms var(--ease-out) calc(250ms + var(--i, 0) * 40ms), scale 220ms var(--ease-out) calc(250ms + var(--i, 0) * 40ms),
                rotate 220ms var(--ease-out) calc(250ms + var(--i, 0) * 40ms), box-shadow 220ms var(--ease-out) calc(250ms + var(--i, 0) * 40ms);
  }
  html.reveal-ready .punch:not(.is-out, .rv-in) .ptok { translate: 0 0; scale: .97; rotate: 0deg; box-shadow: 0 1px 0 var(--pt-edge), 0 1px 2px rgba(var(--shadow-rgb), .2); }
  @media (hover: hover) and (pointer: fine) { .ptok:hover { translate: 0 -9px; transition-delay: 0ms; transition-duration: 160ms; } }
  .ptok:focus-visible { outline-color: var(--sheet-text); }
  .ptok--player { --pt-edge: var(--player-edge); background: var(--player); color: var(--player-on); }
  .ptok--dm { --pt-edge: var(--dm-edge); background: var(--dm-fill); color: var(--dm-on); }
  .ptok svg { width: 28px; height: 28px; flex: none; }
  .ptok .pt-name { font: 700 var(--step-0) / 1.2 var(--ff-ui); }
  .ptok .pt-line { display: block; font-size: var(--step--1); line-height: 1.35; color: var(--muted); }
  .ptok:is(.ptok--player, .ptok--dm) .pt-line { color: inherit; opacity: .8; }
  .punch .slot--round .ptok { align-items: center; justify-content: center; text-align: center; padding: 10px; gap: 6px; }
  .punch .slot--big .ptok { padding: var(--space-m); }
  .punch .slot--big .ptok svg { width: 52px; height: 52px; }
  .punch .slot--big .pt-name { font: 800 var(--step-3) / 1.05 var(--ff-display); letter-spacing: -.03em; }
  .punch .slot--big .pt-line { font-size: var(--step-0); font-weight: 500; }
  .punch .slot--big .pt-go { font-weight: 600; }
  @media (max-width: 1080px) { .punch-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .punch { padding: var(--space-s); }
    .punch-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(108px, auto); gap: 20px; }
    .punch .slot--big { grid-row: span 1; } .punch .slot--wide { grid-column: span 1; }
    .punch .slot:not(.slot--big) .pt-line { display: none; }
    .slot--round { max-width: 128px; }
  }
  /* proužek listu s výzvami (hero): žetony v řadě, jen na obsah, ikona + jeden řádek; .slot--dot = malá prázdná díra */
  .punch--strip { display: inline-block; max-width: 100%; padding: 16px 18px; }
  .punch--strip .punch-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
  .punch--strip .slot { flex: none; }
  .punch--strip .ptok { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 10px 20px; }
  .punch--strip .ptok svg { width: 22px; height: 22px; }
  .punch--strip .slot--dot { width: 30px; aspect-ratio: 1; max-width: none; }
  @media (max-width: 640px) {
    .punch--strip { display: block; padding: 14px; }
    .punch--strip .slot:not(.slot--dot) { flex: 1 1 100%; }
    .punch--strip .slot--dot { display: none; }
  }

  /* velký fialový žeton jako podklad výzvy (závěr landingu): výsekový okraj, tloušťka kartonu, mírný náklon */
  .plate { background: var(--dm-fill); color: var(--dm-on); border: var(--cut) solid var(--cut-color); border-radius: var(--r-sheet); box-shadow: 0 var(--thick) 0 var(--dm-edge), var(--sh-pop); rotate: var(--tilt, -.6deg); }

  /* — otočný žeton: <button class="flip" aria-pressed> > .flip-in > .flip-face.flip-front + .flip-face.flip-back —
     dvě strany téže věci (DM / hráč); s omezeným pohybem se místo otočení prolnou */
  .flip { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; perspective: 1100px; border-radius: var(--r-tok); -webkit-tap-highlight-color: transparent; rotate: var(--tilt, 0deg); }
  .flip:focus-visible { outline: 3px dashed var(--text); outline-offset: 6px; }
  .flip-in { display: grid; transform-style: preserve-3d; transition: transform 420ms var(--ease-io); }
  .flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
  .flip-face {
    grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 18px 20px 16px; text-align: left;
    border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok);
    box-shadow: 0 var(--thick) 0 var(--edge), var(--lift);
  }
  .flip-front { background: var(--dm-fill); color: var(--dm-on); box-shadow: 0 var(--thick) 0 var(--dm-edge), var(--lift); }
  .flip-back { background: var(--player); color: var(--player-on); box-shadow: 0 var(--thick) 0 var(--player-edge), var(--lift); transform: rotateY(180deg); }
  .flip-face .fl-side { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; }
  .flip-face .fl-head { font: 700 var(--step-1) / 1.25 var(--ff-ui); text-wrap: balance; }
  .flip-face .fl-text { font-size: var(--step--1); line-height: 1.45; opacity: .85; }
  .flip-face .fl-turn { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; opacity: .85; }
  .flip-face svg { width: 18px; height: 18px; flex: none; }
  @media (prefers-reduced-motion: reduce) {
    .flip-in { transform: none !important; transition: none; }
    .flip-face { backface-visibility: visible; transition: opacity 120ms linear; }
    .flip-back { transform: none; opacity: 0; }
    .flip[aria-pressed="true"] .flip-front { opacity: 0; }
    .flip[aria-pressed="true"] .flip-back { opacity: 1; }
  }

  /* žeton (kulatý) — iniciativa, role, počty */
  .token {
    --t-size: 48px; --t-bg: var(--surface); --t-fg: var(--text); --t-ring: var(--ctl);
    display: inline-grid; place-items: center; flex: none;
    width: var(--t-size); height: var(--t-size); border-radius: 50%;
    background: var(--t-bg); color: var(--t-fg); border: 3px solid var(--t-ring);
    box-shadow: 0 var(--thick) 0 var(--edge);
    font: 700 calc(var(--t-size) * .36) / 1 var(--ff-display); font-variant-numeric: tabular-nums;
  }
  .token--lg { --t-size: 64px; }
  .token--sm { --t-size: 32px; border-width: 2px; }
  .token--dm { --t-bg: var(--dm-fill); --t-fg: var(--dm-on); --t-ring: var(--dm-fill); }
  .token--player { --t-bg: var(--player); --t-fg: var(--player-on); --t-ring: var(--player); }
  .token--turn { --t-ring: var(--accent); box-shadow: 0 var(--thick) 0 var(--edge), 0 6px 14px rgba(var(--shadow-rgb), var(--shadow-a)); }

  /* čip a kroužek stavu (s počtem kol) */
  .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--r-chip); border: 1px solid var(--ctl); background: var(--sunken); color: var(--text); font: 500 var(--step--1) / 1.2 var(--ff-ui); white-space: nowrap; }
  .chip--dm { border-color: var(--dm); color: var(--dm); }
  .chip--player { border-color: var(--player-text); color: var(--player-text); }
  .ring { --rc: var(--ring-other); display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 4px; border-radius: var(--r-chip); background: var(--sunken); color: var(--text); font: 500 var(--step--1) / 1.2 var(--ff-ui); white-space: nowrap; }
  .ring::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--rc); flex: none; }
  .ring b { font-family: var(--ff-display); font-weight: 700; font-variant-numeric: tabular-nums; }
  .ring--blessed { --rc: var(--ring-blessed); } .ring--poisoned { --rc: var(--ring-poisoned); }
  .ring--frightened { --rc: var(--ring-frightened); } .ring--baned { --rc: var(--ring-baned); }

  /* klávesa */
  .kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--ctl); border-radius: 6px; box-shadow: 0 2px 0 var(--edge); background: var(--sunken); font: 500 var(--step--2) / 1.4 var(--ff-ui); text-align: center; }

  /* plovoucí vrstvy: bublina, toast, modal */
  .v4-tip { position: absolute; z-index: var(--z-pop); max-width: 280px; padding: 8px 12px; border-radius: 10px; background: var(--raised); color: var(--text); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(var(--shadow-rgb), var(--shadow-a)); font-size: var(--step--1); transform-origin: var(--transform-origin, top center); }
  .toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-tok); background: var(--raised); color: var(--text); border: 1px solid var(--line); box-shadow: 0 var(--thick) 0 var(--edge), 0 10px 24px rgba(var(--shadow-rgb), var(--shadow-a)); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .toast[data-state="enter"] { opacity: 0; transform: translateY(8px) scale(.97); }
  .modal { border: 0; padding: 0; max-width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 var(--thick) 0 var(--edge), 0 24px 60px rgba(0, 0, 0, .55); }
  .modal::backdrop { background: rgba(var(--shadow-rgb), .55); }
  .modal__body { padding: var(--space-m); }
  .modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2xs); padding: var(--space-s) var(--space-m); border-top: 1px solid var(--line); }
}

/* ════════════════════════ 4b. MARKETINGOVÝ RÁMEC (lišta, patička, odhalení, mimik z rohu) ════════════════════════
   Nahrazuje tm-site.css na stránkách v4; třídy zůstávají, protože na ně sahá tm-site.js
   (jazyk .lang-toggle, menu .nav-burger/.site-links.open, odhalení .rv → .rv-in, mimik .mimic-peek). */
@layer v4.components {
  :where([data-voice="loud"], .site-nav, .site-foot, .docs-page) .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: 20px; position: relative; }

  .site-nav {
    position: sticky; top: 0; z-index: var(--z-bar);
    display: flex; align-items: center; gap: 18px; padding: 10px 20px;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-tok);
  }
  .site-logo { display: inline-flex; flex: none; align-items: center; gap: 10px; text-decoration: none; color: var(--text); white-space: nowrap; font: 800 var(--step-0) / 1 var(--ff-display); letter-spacing: -.02em; }
  .site-logo img { width: 30px; height: 30px; }
  .site-links { display: flex; gap: 4px; margin-left: 8px; flex: 1; }
  .site-links a { text-decoration: none; color: var(--muted); font: 500 var(--step--1) / 1 var(--ff-ui); padding: 10px 12px; border-radius: var(--r-btn); transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
  .site-links a:hover, .site-links a.on { color: var(--text); background: var(--sunken); }
  .site-links a[href="/dm/"], .site-links a[href="/player/"] { border: 2px solid; padding: 8px 12px; border-radius: var(--r-chip); color: var(--text); }
  .site-links a[href="/dm/"] { border-color: var(--dm); }
  .site-links a[href="/player/"] { border-color: var(--player); }
  .site-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .site-nav .btn { min-height: 40px; }
  .nav-burger { display: none; width: var(--tap); height: var(--tap); padding: 0; }
  .nav-burger svg { width: 20px; height: 20px; }
  .lang-toggle { min-height: 36px; padding: 0 10px; font-size: var(--step--2); font-weight: 600; }
  .nav-kofi { display: inline-flex; align-items: center; gap: 6px; height: var(--tap); padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--muted); font-size: var(--step--1); text-decoration: none; }
  .nav-kofi:hover { color: var(--text); border-color: var(--ctl); }
  .site-links .nav-kofi-menu { display: none; }
  /* pořadí lišty od nejméně důležitého: Ko-fi · pomoc (zpětná vazba, nápověda) · ⚙ · HQ · účet · hlavní výzva · menu.
     Tlačítka vkládá víc skriptů v různém pořadí (settings.js, feedback.js, help.js, HQ až po přihlášení),
     proto pořadí drží CSS; na marketingu se cluster rozpustí do lišty, ať jde řadit i Ko-fi a výzvu. */
  :is(.site-nav-right, .jbset-cluster) > :is(.nav-kofi, .jbset-kofi) { order: 1; }
  :is(.site-nav-right, .jbset-cluster) > #jbfb-btn { order: 2; }
  :is(.site-nav-right, .jbset-cluster) > #jbhelp-btn { order: 3; }
  :is(.site-nav-right, .jbset-cluster) > #btn-settings { order: 4; }
  :is(.site-nav-right, .jbset-cluster) > #jbset-hq { order: 5; }
  :is(.site-nav-right, .jbset-cluster) > #jb-account-slot { order: 6; }
  .site-nav-right > .btn--primary { order: 7; min-height: var(--tap); }
  .site-nav-right > .nav-burger { order: 8; }
  .btn .cta-ic { display: none; width: 18px; height: 18px; }
  @media (max-width: 1120px) {
    .site-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-pop); padding: 10px 16px; }
    .site-links.open { display: flex; }
    .site-links a { padding: 12px; }
    .nav-burger { display: inline-flex; }
    .nav-kofi { width: var(--tap); padding: 0; justify-content: center; } .nav-kofi span { display: none; }
  }
  @media (max-width: 520px) {
    .site-logo b { display: none; } .site-nav-right { gap: 6px; }
    .site-nav-right .nav-kofi { display: none; } .site-links .nav-kofi-menu { display: block; }
    .site-nav .cta-txt { display: none; } .site-nav .cta-ic { display: block; } .site-nav .btn--primary { padding: 0 12px; }
  }

  .site-foot { margin-top: var(--space-2xl); padding: var(--space-xl) 0; background: var(--sunken); border-top: 1px solid var(--line); }
  .foot-top { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
  .foot-brand { max-width: 320px; }
  .foot-brand .site-logo { margin-bottom: 12px; }
  .foot-brand p { color: var(--muted); font-size: var(--step--1); }
  .foot-cols { display: flex; flex-wrap: wrap; gap: 40px; }
  .foot-col h3 { font: 600 var(--step--1) / 1.2 var(--ff-ui); color: var(--muted); margin-bottom: 10px; }
  .foot-col a { display: block; padding: 5px 0; color: var(--text); text-decoration: none; font-size: var(--step--1); }
  .foot-col a:hover { color: var(--dm); }
  .foot-social { display: flex; gap: 8px; margin-top: 14px; }
  .foot-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--muted); background: var(--surface); box-shadow: var(--sh-tok); }
  .foot-social a:hover { color: var(--text); border-color: var(--ctl); }
  .foot-social svg { width: 18px; height: 18px; }
  .foot-kofi { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--muted); font-size: var(--step--1); text-decoration: none; }
  .foot-kofi:hover { color: var(--text); border-color: var(--ctl); }
  .foot-legal { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--2); line-height: 1.6; }
  .foot-legal a { color: var(--dm); }

  /* sdílené marketingové vzory (landing, about, features, pricing …) */
  :where([data-voice="loud"]) .center { text-align: center; }
  :where([data-voice="loud"]) .sec { font: 800 var(--step-3) / 1.1 var(--ff-display); letter-spacing: -.02em; text-wrap: balance; }
  :where([data-voice="loud"]) :is(.center .sec, .sec.center) { margin-inline: auto; max-width: 24ch; }
  :where([data-voice="loud"]) .sec-lead { max-width: 62ch; margin: var(--space-s) auto 0; color: var(--muted); font-size: var(--step-1); text-wrap: pretty; }
  :where([data-voice="loud"]) .section-tag { display: inline-block; margin-bottom: var(--space-xs); color: var(--player-text); font: 600 var(--step--1) / 1 var(--ff-ui); }
  :where([data-voice="loud"]) .split2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
  .split2 .s2-text p { margin-top: var(--space-s); color: var(--muted); font-size: var(--step-1); }
  @media (max-width: 820px) { .split2 { grid-template-columns: 1fr; gap: var(--space-l); } }
  .lp-band { background: var(--sunken); padding-block: var(--space-xl); }
  .teeth { display: block; width: 100%; height: 22px; }
  .teeth path { fill: var(--sunken); }
  .teeth-flip { transform: scaleY(-1); }
  .ghost-link { color: var(--text); font-weight: 600; text-decoration-color: var(--player); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .whisper { margin-top: var(--space-s); color: var(--muted); font-size: var(--step--1); }
  :where([data-voice="loud"]) .media { border-radius: var(--r-tok); overflow: hidden; border: var(--cut) solid var(--cut-color); background: var(--surface); box-shadow: var(--sh-turn); }
  :where([data-voice="loud"]) .media :is(video, img) { display: block; width: 100%; height: auto; }
  .cta-band { padding-block: var(--space-2xl); }
  /* závěrečná výzva: fialový žeton .plate s proužkem listu a vylamovacím okrovým žetonem */
  .cta-band .wrap.plate { padding: var(--space-xl) var(--space-m); }
  .cta-band .sec-lead { color: var(--dm-on); opacity: .85; }
  .cta-band .punch--strip { margin-top: var(--space-m); }
  .cta-band .ptok { min-height: 62px; padding: 12px 28px; }
  .cta-band .ptok .pt-name { font-size: var(--step-1); }
  @media (max-width: 640px) { .cta-band .wrap.plate { width: auto; margin-inline: 16px; padding: var(--space-l) var(--space-s); } }
  .center .m-actions { justify-content: center; }

  /* odhalení při scrollu (bez JS je vše vidět): krátké a jen jednou */
  html.reveal-ready .rv { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
  html.reveal-ready .rv.rv-in { opacity: 1; transform: none; }

  /* mimik vykukující z rohu (tm-site.js) a jeho bublina */
  .mimic-bubble {
    position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px) scale(.95);
    padding: 6px 12px; border-radius: var(--r-field); background: var(--raised); color: var(--text); border: 1px solid var(--line);
    box-shadow: var(--sh-pop); font: 600 var(--step--1) / 1.2 var(--ff-ui); white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); z-index: 5;
  }
  .mimic-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  .mimic-peek { position: fixed; left: 20px; bottom: -96px; width: 82px; height: 82px; z-index: var(--z-pop); cursor: pointer; transition: bottom 500ms var(--ease-out); }
  .mimic-peek.up { bottom: -18px; }
  .mimic-peek img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: 50% 100%; }
  .mimic-peek img.chomp { animation: v4-chomp 450ms var(--ease-out); }
  .mimic-peek .mimic-bubble { bottom: calc(100% - 10px); }
  @keyframes v4-chomp { 0% { transform: scale(1); } 20% { transform: scale(.88) rotate(-4deg); } 50% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .mimic-peek { display: none; } }
}

/* ════════════════════════ 4c. MARKETINGOVÉ PODSTRÁNKY (about, faq, contact, pricing, features, onboarding, changelog) ════════════════════════
   Hlasitý hlas jako landing: kartonové žetony s výsekovým okrajem, tloušťkou a lehkým náklonem.
   Stránka má jen markup s třídami, žádné inline styly. */
@layer v4.components {
  .wrap-narrow { max-width: calc(var(--w-read) + 120px); }
  /* rytmus sekcí (landing má vlastní); obsah hned pod záhlavím se k němu přimkne */
  main > section.wrap:not(.page-hero, .m-prose) { padding-block: var(--space-xl); }
  main > .page-hero + section.wrap { padding-top: var(--space-s); }
  .price-grid + .sec-lead { margin-top: var(--space-l); }
  @media (min-width: 861px) and (max-height: 900px) { main > section.wrap:not(.page-hero, .m-prose) { padding-block: var(--space-l); } }
  /* záhlaví podstránky: titulek s okrovým kousancem pod slovem (.bite) */
  .page-hero { padding-block: var(--space-2xl) var(--space-l); text-align: center; }
  .page-hero h1 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
  .page-hero .sub { max-width: 60ch; margin: var(--space-m) auto 0; color: var(--muted); font-size: var(--step-1); text-wrap: pretty; }
  .bite { position: relative; white-space: nowrap; }
  .bite > span { color: var(--player-text); }
  .bite svg { position: absolute; left: 0; right: 0; bottom: -.2em; width: 100%; height: .3em; overflow: visible; }
  .bite svg path { stroke: var(--player); }

  /* textová stránka (about, contact) */
  .m-prose { padding-block: var(--space-2xl) var(--space-xl); }
  .m-prose h1 { margin-bottom: var(--space-m); }
  .m-prose h2 { font: 700 var(--step-2) / 1.2 var(--ff-display); letter-spacing: -.02em; margin: var(--space-xl) 0 var(--space-s); }
  .m-prose > p, .m-prose > ul { max-width: 66ch; color: var(--muted); line-height: 1.65; margin-bottom: var(--space-xs); }
  .m-prose > .lead { color: var(--text); font-size: var(--step-1); line-height: 1.55; }
  .m-prose > ul { padding-left: 20px; } .m-prose li + li { margin-top: 8px; }
  .m-prose a:not(.btn) { color: var(--player-text); text-decoration-color: color-mix(in srgb, var(--player) 55%, transparent); text-underline-offset: 3px; }
  .m-prose > .fine { margin-top: var(--space-l); font-size: var(--step--1); }
  .m-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-l); }
  /* dlouhý text (podmínky): kapitoly, odstavce, seznamy */
  .prose { color: var(--muted); line-height: 1.7; }
  .prose h2 { font: 700 var(--step-2) / 1.25 var(--ff-display); letter-spacing: -.01em; color: var(--text); margin: var(--space-l) 0 var(--space-xs); }
  .prose h3 { font: 700 var(--step-0) / 1.3 var(--ff-ui); color: var(--text); margin: var(--space-m) 0 var(--space-xs); }
  .prose :is(p, ul, ol) { margin-bottom: var(--space-xs); }
  .prose :is(ul, ol) { padding-left: 22px; } .prose li + li { margin-top: 6px; }
  .prose :is(b, strong) { color: var(--text); }
  .prose a { color: var(--player-text); text-underline-offset: 3px; }
  .updated { margin: var(--space-xs) 0 var(--space-m); color: var(--muted); font-size: var(--step--1); }

  /* kartonový žeton jako karta (about: tři části, contact: kanály) */
  .m-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: var(--space-s) 0 var(--space-m); }
  .m-card {
    padding: 20px 22px; background: var(--surface); color: var(--text);
    border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok); box-shadow: var(--sh-tok), var(--sh-pop); rotate: var(--tilt, 0deg);
  }
  .m-card:nth-child(3n+1) { --tilt: -.7deg; } .m-card:nth-child(3n+3) { --tilt: .6deg; }
  .m-card :is(h2, h3) { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 var(--step-0) / 1.3 var(--ff-ui); letter-spacing: 0; color: var(--player-text); }
  .m-card :is(h2, h3) svg { width: 18px; height: 18px; flex: none; }
  .m-card :is(h2, h3) a { color: inherit; text-decoration: none; }
  .m-card p { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.55; }
  .m-card p + p, .m-card .m-social + p { margin-top: 10px; }
  .m-card .m-mail { font-size: var(--step-0); font-weight: 600; }
  .m-social { display: flex; flex-direction: column; gap: 4px; }
  .m-social a { display: flex; align-items: center; gap: 11px; min-height: var(--tap); color: var(--text); text-decoration: none; }
  .m-social a > span:first-child { display: inline-flex; flex: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--muted); }
  .m-social a > span:last-child:not(:first-child) { color: var(--muted); }
  .m-social svg { width: 18px; height: 18px; }

  /* ceník: tři žetony, plán DM je fialový */
  .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: var(--space-s); align-items: stretch; }
  .price {
    display: flex; flex-direction: column; gap: 8px; padding: var(--space-m); background: var(--surface); color: var(--text);
    border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok); box-shadow: var(--sh-tok), var(--sh-pop); rotate: var(--tilt, 0deg);
  }
  .price:nth-child(1) { --tilt: -.6deg; } .price:nth-child(2) { --tilt: .5deg; }
  .price.featured { --tilt: -.8deg; background: var(--dm-fill); color: var(--dm-on); box-shadow: 0 var(--thick) 0 var(--dm-edge), var(--sh-pop); }
  .price .p-name { font: 800 var(--step-2) / 1.1 var(--ff-display); letter-spacing: -.02em; }
  .price :is(.p-for, .p-soon) { color: var(--muted); font-size: var(--step--1); }
  .price .p-amount { margin-top: 8px; font: 700 var(--step-1) / 1.2 var(--ff-ui); color: var(--player-text); }
  .price ul { list-style: none; margin: 10px 0 var(--space-s); padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .price li, .feat-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
  .price li b, .feat-list b { color: var(--text); font-weight: 600; }
  .price .btn { margin-top: auto; }
  .price.featured :is(.p-for, .p-soon, li, .p-amount, li b) { color: var(--dm-on); }
  .price.featured li { opacity: .9; }
  .fi { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ok); }
  .price.featured .fi { color: var(--player); }
  @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

  /* FAQ: otázky jako žetony, odpověď se rozbalí */
  .faq-list { display: flex; flex-direction: column; gap: 16px; margin-top: var(--space-s); text-align: left; }
  .faq-list details { padding: 0 20px; background: var(--surface); border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok); box-shadow: var(--sh-tok); }
  .faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; font: 600 var(--step-0) / 1.35 var(--ff-ui); }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after {
    content: "+"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--player); color: var(--player-on); font: 700 var(--step-1) / 1 var(--ff-ui); transition: rotate 200ms var(--ease-out);
  }
  .faq-list details[open] summary::after { rotate: 45deg; }
  .faq-list summary:focus-visible { outline: 2px solid var(--focus, var(--player)); outline-offset: 4px; border-radius: var(--r-xs); }
  .faq-list .a { padding-bottom: 18px; color: var(--muted); line-height: 1.65; }
  .faq-list .a a { color: var(--player-text); }

  /* kroky (onboarding): žeton se screenshotem, číslo jako kulatý žeton přes horní hranu */
  .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; margin-top: var(--space-l); text-align: left; }
  .step {
    position: relative; display: flex; flex-direction: column; padding: 26px 22px 0; background: var(--surface); color: var(--text);
    border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok); box-shadow: var(--sh-tok), var(--sh-pop);
  }
  .step .num {
    position: absolute; top: -20px; left: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--player); color: var(--player-on); border: 3px solid var(--cut-color); box-shadow: var(--sh-tok);
    font: 800 var(--step-1) / 1 var(--ff-display); rotate: -6deg;
  }
  .step:nth-child(2n) .num { background: var(--dm-fill); color: var(--dm-on); rotate: 5deg; }
  .step h3 { margin: 6px 0 6px; font: 700 var(--step-1) / 1.25 var(--ff-ui); }
  .step p { color: var(--muted); }
  .step .media { margin: var(--space-s) -22px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-tok) - var(--cut)) calc(var(--r-tok) - var(--cut)); box-shadow: none; margin-top: auto; }
  .step p + .media { margin-top: var(--space-s); }
  .step .media :is(img, video) { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
  @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

  /* funkce: obrázek a text vedle sebe (.rev = obrázek vpravo), sloupce DM / hráč */
  .split2.rev > :first-child { order: 2; }
  @media (max-width: 820px) { .split2.rev > :first-child { order: 0; } }
  .m-soon { margin-top: var(--space-s); color: var(--muted); font-size: var(--step--1); }
  .m-badge { display: inline-flex; align-items: center; min-height: 24px; margin-right: 8px; padding: 0 10px; border-radius: var(--r-chip); background: var(--player); color: var(--player-on); font: 700 var(--step--2) / 1 var(--ff-ui); vertical-align: middle; }
  .feat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--space-l); text-align: left; }
  .feat-col {
    padding: var(--space-m); background: var(--surface); color: var(--text); border: var(--cut) solid var(--cut-color); border-radius: var(--r-tok);
    box-shadow: var(--sh-tok), var(--sh-pop); rotate: var(--tilt, 0deg);
  }
  .feat-col.dm { --tilt: -.5deg; } .feat-col.pl { --tilt: .5deg; }
  .feat-col > h3 { margin: 6px 0 4px; font: 800 var(--step-2) / 1.15 var(--ff-display); letter-spacing: -.02em; }
  .fc-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-chip); font: 700 var(--step--1) / 1 var(--ff-ui); }
  .feat-col.dm .fc-tag { background: var(--dm-fill); color: var(--dm-on); } .feat-col.pl .fc-tag { background: var(--player); color: var(--player-on); }
  .feat-list { list-style: none; margin: var(--space-s) 0 0; padding: 0; }
  .feat-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--step-0); }
  .feat-list li:first-child { border-top: 0; }
  .feat-col.dm .fi { color: var(--dm); } .feat-col.pl .fi { color: var(--player); }
  .m-note { margin-top: var(--space-m); color: var(--muted); font-size: var(--step--1); text-align: center; }
  .m-note a { color: inherit; }
  @media (max-width: 820px) { .feat-cols { grid-template-columns: 1fr; } }
}

/* ════════════════════════ 5. LAYOUTY (šířky jen z tokenů — DESIGN.md v4 „Šířky a layoutové šablony") ════════════════════════ */
@layer v4.layouts {
  .l-page { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--space-s); }
  .l-read { max-width: var(--w-read); }
  .l-canvas { width: 100%; min-height: 100%; }

  /* pracovní stůl (vzor Iniciativa): plocha + panel 340 px; reaguje na svůj kontejner */
  .l-bench { container: bench / inline-size; }
  .l-bench > .l-bench__in { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-panel); gap: var(--space-s); align-items: start; }
  @container bench (max-width: 760px) { .l-bench > .l-bench__in { grid-template-columns: minmax(0, 1fr); } }

  /* kalkulačky a generátory: ≥ 900 px kontejneru vstupy | přilepený výsledek */
  .l-calc { container: calc / inline-size; }
  .l-calc > .l-calc__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-items: start; }
  @container calc (min-width: 900px) {
    .l-calc > .l-calc__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .l-calc .l-calc__result { position: sticky; top: var(--space-s); }
  }

  /* katalogy: karty přes celou šířku stránky */
  .l-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-s); }
}

/* ════════════════════════ 6. UTILITY ════════════════════════ */
@layer v4.utilities {
  .u-stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-s)); }
  .u-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-2xs)); }
  .u-split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); flex-wrap: wrap; }
  .num { font-variant-numeric: tabular-nums; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* hustota (framework škálování): zoom po stupních na tělo komponenty, ne na celý layout */
  .dense-1 { zoom: var(--zoom-1); } .dense-2 { zoom: var(--zoom-2); } .dense-3 { zoom: var(--zoom-3); }
}