/* ==========================================================================
   Komponenty sdílené všemi stránkami

   Sekce: ikony → tlačítka → lišta → přepínač motivů → rozcestník
          → dialogy → hlášky → drobnosti
   ========================================================================== */

/* ------------------------------------------------------------------ ikony */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* --------------------------------------------------------------- tlačítka */
/* Tlačítko podle .btn_main_wrap z anthropic.com: min-height 2.25rem,
   padding .5rem 1rem, font-size 1rem, line-height 1, letter-spacing
   -0.005em, přechod 0,2 s. Posun při stisku tu není, plochému designu
   stačí ztmavení. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7px * var(--ui));
  min-height: 2.25rem;
  padding: var(--sp-2) var(--sp-4);
  border: var(--hairline) solid var(--btn-bg);
  border-radius: var(--r-btn);
  background-color: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms,
    transform var(--t-fast), opacity var(--t-fast);
}

.btn .icon {
  width: 1.15em;
  height: 1.15em;
}

.btn:hover:not(:disabled) {
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* Sekundární tlačítko v liště = .chip_layout: obrys v barvě textu,
   padding .375rem 1rem, plný oblouk. Při najetí se invertuje. */
.btn--ghost {
  min-height: 0;
  background-color: transparent;
  border-color: var(--border-heavy);
  color: var(--text);
  font-weight: 500;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--r-pill);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--text);
  border-color: var(--text);
  color: var(--inverse-ink);
}

/* Tiché tlačítko = --button-tertiary: průhledné, výrazný obrys, při najetí
   ztmavne až na barvu textu. */
.btn--quiet {
  background-color: transparent;
  border-color: var(--border-heavy);
  color: var(--text);
}

/* Pozadí a barvu je nutné zopakovat: .btn:hover:not(:disabled) výš má
   stejnou specificitu jako samotná .btn--quiet, takže by tichému tlačítku
   při najetí nalil tmavou výplň --btn-bg-hover pod nezměněný tmavý text. */
.btn--quiet:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--text);
  color: var(--text);
}

/* Inkoust na barevné výplni nese --inverse-ink: ve světlém režimu ivory,
   v tmavém břidlice, protože stavové barvy jsou tam světlé a bílý text
   by na nich nedosáhl na kontrast (bílá na červené 3,2 : 1, břidlice
   5,5 : 1). */
.btn--danger {
  background-color: var(--bad);
  border-color: var(--bad);
  color: var(--inverse-ink);
}

.btn--danger:hover:not(:disabled) {
  background-color: var(--bad);
  /* bez tohohle by rámeček převzal --btn-bg-hover z .btn:hover výš */
  border-color: var(--bad);
  filter: brightness(1.08);
}

/* ------------------------------------------------------------------ lišta */
/* Lišta se při rolování přilepí k hornímu okraji. Podklad nekreslí sama, ale
   pseudoprvek: ten sahá nahoru o padding shellu a do stran až k okrajům okna,
   takže obsah neprosvítá rohy a pruh nekončí svislou hranou na kraji shellu.
   Šířka obsahu se přitom nehne. */
.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Svislé odsazení drží obsah stránky od přilepené lišty. Vodorovné zůstává
     nulové, drobečky mají vlastní vnitřní odsazení a musí lícovat s kartou
     i hracím polem pod sebou. Výška lišty vstupuje do --chrome v base.css. */
  padding-block: var(--rail-pad-y);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-height: calc(34px * var(--ui));
}

.rail::before {
  content: "";
  position: absolute;
  /* 12px = padding-top shellu .app, dole končí podklad na hraně padding boxu */
  top: calc(-12px * var(--ui));
  bottom: 0;
  /* Přes celou šířku okna, ne jen po hranu shellu (max-width 1180px): na
     širokém displeji by jinak pruh i jeho stín končily svislým řezem uvnitř
     plochy. 100vw počítá i se svislým posuvníkem, proto html přesah ořízne. */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-color: var(--bg);
  pointer-events: none;
}

/* Tam, kde backdrop-filter funguje, zůstane podklad průsvitný, jinak by
   neprůhledný pruh uřízl tónovací přechody, které má body u horní hrany.
   Barva je --rail-bg (literál --bg při 72 %, definuje motiv), ne color-mix:
   ten Chromium při přelivu motivu interpoluje v oklab, plné barvy v sRGB,
   a lišta by se uprostřed přechodu barevně odlepila od pozadí pod sebou. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .rail::before {
    background-color: var(--rail-bg);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  min-width: 0;
}

.crumbs a,
.crumbs .crumb-current {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui));
  padding: calc(5px * var(--ui)) calc(9px * var(--ui));
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.crumbs a {
  color: var(--text-muted);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.crumbs a:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.crumbs .crumb-sep {
  color: var(--text-faint);
  user-select: none;
  font-size: 0.75rem;
}

.crumbs .crumb-current {
  color: var(--text);
  font-weight: 700;
}

.rail-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Přepínače motivu a jazyka staví až JS do prázdných divů, takže lišta
     bez rezervy vyroste dodatečně a odtlačí celou stránku (CLS). Rezerva
     odpovídá výšce spouštěče (text 0.75rem + 2×5px + linky); na úzkém
     displeji ji zvedá burger, viz responsive.css. */
  min-height: calc(32px * var(--ui));
}

/* ------------------------------------------------- hamburgerová nabídka */
/* Odkaz a přepínač motivů se na úzkém displeji vedle drobečků nevejdou.
   js/nav.js proto obsah .rail-actions rozdělí do pojmenovaných skupin
   (.rail-group), zabalí je do .rail-panel a přidá hamburger.

   Skupina = nadpis + řada položek. Na široké liště se nadpisy nekreslí
   a všechno leží v jedné řadě jako dřív; ve sbalené nabídce (responsive.css)
   je z každé skupiny sekce s popiskem. Nová položka do lišty se tím pádem
   nemusí nikde zvlášť řešit: dostane v HTML data-rail-group="Název"
   a v nabídce si sama založí (nebo rozšíří) svou sekci. */
.rail-panel,
.rail-group,
.rail-group-items {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.rail-burger,
.rail-group-label {
  display: none;
}

/* Tlačítko Nainstalovat aplikaci (js/install.js) stojí v DOM první, aby ve
   sbalené nabídce bylo nahoře, v řadě široké lišty ho ale `order` posílá
   úplně doprava, za účet: je to výzva navíc, ne navigace, a nemá odstrkovat
   zbytek řady. Ve sbalené nabídce vrací pořadí responsive.css. */
.rail-group--install {
  order: 1;
}

/* Odkazy na ostatní stránky doplňuje js/nav.js a patří jen do sbalené
   nabídky, v liště by z nich byla řada přes celou obrazovku. Nesou
   data-rail-narrow (položka i celá sekce, když v ní nic jiného není).
   Protějšek data-rail-wide by byl rychlý odkaz z HTML, který se v nabídce
   schová, protože stejnou stránku nabízí i seznam; v lištách žádný není,
   všechny stránky mají vpravo jen přepínače. */
.rail-actions [data-rail-narrow] {
  display: none;
}

/* ------------------------------------------- přepínač režimu a rozbalovače */
/* Třídy .theme-trigger, .theme-list a .theme-option se narodily u dřívějšího
   rozbalovacího seznamu motivů; ten nahradil vypínač světlý/tmavý
   (js/theme.js, .theme-toggle níž), ale seznamové třídy dál používá přepínač
   jazyka (js/lang.js) a rozbalovací selecty (js/select.js), proto zůstávají. */
.theme-menu {
  position: relative;
}

.theme-trigger,
.theme-option {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui));
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

/* Obrys místo výplně: plochý design nemá stín, zvolený stav nese linka.
   Linka drží --border-strong, tentýž stupeň jako dráha vypínače režimu
   (.theme-track) vedle: tři prvky lišty vedle sebe musí mít stejně silný
   obrys, jinak jeden z nich vystoupí. */
.theme-trigger {
  padding: calc(5px * var(--ui)) calc(10px * var(--ui));
  border: var(--hairline) solid var(--border-strong);
  background-color: transparent;
  color: var(--text);
}

/* Stejné chování jako tiché tlačítko: obrys při najetí zesílí do plné
   barvy textu. Dřívější --border-strong byl stejný jako klidový stav
   a najetí nebylo vidět. */
.theme-trigger:hover {
  border-color: var(--text);
}

/* Šipka se při rozbalení otočí, jediné vodítko, že se seznam otevřel,
   protože samotný spouštěč zůstává stejný. */
.theme-caret {
  color: var(--text-faint);
  transition: transform var(--t-fast), color var(--t-fast);
}

.theme-trigger[aria-expanded="true"] .theme-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Seznam visí na pravé hraně spouštěče: v liště je vpravo od něj málo
   místa, doleva se rozbalí vždycky. z-index nad panelem nabídky (30). */
.theme-list {
  position: absolute;
  top: calc(100% + 6px * var(--ui));
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100%;
  padding: calc(4px * var(--ui));
  background-color: var(--surface);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.theme-list[data-open="false"] {
  display: none;
}

.theme-list[data-open="true"] {
  animation: theme-list-in var(--t-fast) both;
}

@keyframes theme-list-in {
  from {
    opacity: 0;
    transform: translateY(calc(-4px * var(--ui)));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.theme-option {
  width: 100%;
  padding: calc(6px * var(--ui)) calc(10px * var(--ui));
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  white-space: nowrap;
}

/* Zaškrtnutí drží pravou hranu, název se roztáhne přes zbytek řádku. */
.theme-option .theme-name {
  margin-right: auto;
}

.theme-option:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

.theme-option[aria-selected="true"] {
  color: var(--text);
  background-color: var(--surface-2);
}

/* Fajfka je v seznamu vždycky, jen neviditelná, kdyby se přidávala až
   zvolené položce, řádky by se při přepnutí motivu o její šířku posunuly. */
.theme-check {
  color: var(--accent);
  opacity: 0;
}

.theme-option[aria-selected="true"] .theme-check {
  opacity: 1;
}

/* Přepínač světlého a tmavého režimu je vypínač (role="switch",
   js/theme.js): dráha s jezdcem. Ikony sedí na dráze, každá ve svém konci
   (sluníčko vlevo, měsíc vpravo), jezdec je holé kolečko a stojí vždy na
   opačném konci, než je ikona platného režimu: ve světlém režimu vpravo
   (vidět je sluníčko), v tmavém vlevo (vidět je měsíc). Ikonu druhého
   režimu jezdec zakrývá a opacity ji dorovná i během jízdy.

   Vzhled drží řeč lišty: dráha je obrys bez výplně jako spouštěče vedle
   (.btn--ghost, .theme-trigger) a jezdec je obrys s tichou výplní, aby lišta
   zůstala bez syté barvy. Výška 30 px drží řádek se spouštěči vedle.

   Značka nese i .theme-item-icon a .theme-text pro řádek ve sbalené
   nabídce; v liště jsou schované, kreslí je až responsive.css. */
.theme-toggle {
  /* flex, ne inline-flex: tlačítko beze slova nemá baseline z textu,
     v řádku by sedělo spodkem na účaří a stálo o pár pixelů výš než
     spouštěče vedle */
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.theme-item-icon,
.theme-text {
  display: none;
}

.theme-track {
  position: relative;
  flex: none;
  display: inline-block;
  width: calc(54px * var(--ui));
  height: calc(30px * var(--ui));
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  background-color: transparent;
  transition: background-color var(--t-med), border-color var(--t-med);
}

/* Najetí zesílí obrys do barvy textu jako u ostatních prvků lišty
   (.theme-trigger, .btn--quiet, .account-chip), akcent by tu vyčníval. */
.theme-toggle:hover .theme-track {
  border-color: var(--text);
}

/* Jezdec je neutrální kolečko, obrys s tichou výplní jako dráha kolem něj:
   plný jíl byl v liště jediná sytá barva a přetahoval pozornost ze spouštěčů
   vedle. Výplň drží --toggle-thumb, protože každý motiv potřebuje jiný
   stupeň: ve světlém stačí --surface, ve tmavém by se kolečko v černé liště
   ztratilo. Jízda i přeliv barev jedou přes --t-slide, ať je přepnutí
   plynulé. */
.theme-thumb {
  position: absolute;
  top: 50%;
  left: calc(3px * var(--ui));
  width: calc(22px * var(--ui));
  height: calc(22px * var(--ui));
  border: var(--hairline) solid var(--border-strong);
  border-radius: 50%;
  background-color: var(--toggle-thumb);
  transform: translateY(-50%);
  transition: transform var(--t-slide), background-color var(--t-slide),
    border-color var(--t-med);
}

/* Obrys jezdce zesílí zároveň s dráhou, aby vypínač při najetí ztmavl celý
   a nezůstal v něm světlý kroužek. */
.theme-toggle:hover .theme-thumb {
  border-color: var(--text);
}

.theme-toggle[aria-checked="false"] .theme-thumb {
  transform: translate(calc(24px * var(--ui)), -50%);
}

/* Ikony na dráze: sluníčko v levém konci, měsíc v pravém. */
.theme-track .icon {
  position: absolute;
  top: 50%;
  width: calc(14px * var(--ui));
  height: calc(14px * var(--ui));
  color: var(--text-muted);
  transform: translateY(-50%);
  transition: color var(--t-slide), opacity var(--t-slide);
}

.theme-sun {
  left: calc(7px * var(--ui));
}

.theme-moon {
  right: calc(7px * var(--ui));
}

/* Ikonu druhého režimu zakrývá jezdec, opacity ji utlumí i během jízdy. */
.theme-toggle[aria-checked="true"] .theme-sun,
.theme-toggle[aria-checked="false"] .theme-moon {
  opacity: 0;
}

/* Přepínač jazyka je tentýž seznam, jaký míval přepínač motivů, proto stejné
   třídy. Liší se spouštěčem: místo ikony nese kulatou vlajku zvoleného
   jazyka, ta řekne, čeho se volba týká, líp než zeměkoule se zkratkou.

   Vlajka je plnobarevné SVG z js/lang.js, kruh dělá border-radius
   s overflow: hidden, takže SVG nepotřebuje clipPath s unikátními id.
   Lem z --border odděluje bílé plochy vlajek od světlého podkladu, barvy
   vlajek se s motivem schválně nemění, jsou to poznávací znaky. */
.lang-flag {
  flex: none;
  display: inline-block;
  width: calc(18px * var(--ui));
  height: calc(18px * var(--ui));
  border: var(--hairline) solid var(--border);
  border-radius: 50%;
  overflow: hidden;
}

.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Nabídka překladu pro cizí prohlížeč (js/lang.js). Je to pozvánka, ne
   oznámení: proto tenký pruh nad lištou v barvě podkladu, ne dialog přes
   stránku a ne barevný pás. Kdo si jí nevšimne, o nic nepřijde, jazyk se dá
   přepnout i v liště pod ním. */

/* Kolik místa nad lištou pruh zabere. Rezervuje se ještě před prvním
   vykreslením: atribut nasazuje js/boot.js podle stejného pravidla, podle
   jakého se pruh ukazuje, a dokud pruh nedostaví js/lang.js, drží místo
   prázdná značka níž. Bez toho se celá stránka po dostavení pruhu odsunula
   o padesát pixelů dolů, tedy asi půl vteřiny po načtení (na Chromu dobře
   viditelné cuknutí; Safari kreslí první snímek později a schovalo to).

   Míra je zároveň výškou pruhu (min-height níž), takže se v okamžiku
   výměny prázdné značky za pruh nemá co pohnout. Užší displeje mají vlastní
   míru v responsive.css, tam se text láme do víc řádků. */
:root[data-lang-hint] {
  --lang-hint-space: calc(44px * var(--ui));
}

:root[data-lang-hint="ask"] .app::before {
  content: '';
  display: block;
  height: var(--lang-hint-space);
}

.lang-hint {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: calc(10px * var(--ui));
  /* zbytek rezervy nad ním je odsazení, viz --lang-hint-space */
  min-height: calc(var(--lang-hint-space, 0px) - 10px * var(--ui));
  /* Vpravo se nechává místo na křížek: ten stojí mimo tok, aby při zalomení
     na úzkém displeji nespadl sám na třetí řádek. */
  padding: calc(7px * var(--ui)) calc(36px * var(--ui)) calc(7px * var(--ui)) calc(12px * var(--ui));
  background-color: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.lang-hint-icon {
  width: calc(16px * var(--ui));
  height: calc(16px * var(--ui));
  color: var(--text-faint);
  flex: none;
}

.lang-hint-text {
  flex: 1 1 calc(200px * var(--ui));
  text-wrap: pretty;
}

/* Přepnutí je odkaz, ne tlačítko: tlačítko by z tichého pruhu udělalo výzvu
   k akci a přetlačilo by nabídku hry pod ním. */
.lang-hint-switch {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.lang-hint-switch:hover {
  color: var(--accent-hover);
}

.lang-hint-close {
  position: absolute;
  top: 50%;
  right: calc(6px * var(--ui));
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: calc(24px * var(--ui));
  height: calc(24px * var(--ui));
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.lang-hint-close:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.lang-hint-close .icon {
  width: calc(15px * var(--ui));
  height: calc(15px * var(--ui));
}

/* ----------------------------------------------------- rozbalovací výběr */
/* Formulářová obdoba obou přepínačů: <select> zůstává v dokumentu jako
   nositel hodnoty, ale kreslí se tenhle seznam (js/select.js). Rozbalený
   nativní seznam si kreslí operační systém a CSS na něj nedosáhne, uprostřed
   stránky pak stál jediný prvek, který o motivu nikdy neslyšel.

   Seznam i položky jsou tytéž třídy jako u přepínače motivů (.theme-list,
   .theme-option), takže je všechny motivy umí nakreslit bez druhé kopie
   stejného CSS. Spouštěč vlastní třídu má: v liště je to pilulka, tady je to
   pole formuláře a stojí v řadě vedle <input>, se kterým musí ladit. */
.select-menu {
  position: relative;
}

.select-trigger {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui));
  width: 100%;
  padding: calc(7px * var(--ui)) calc(8px * var(--ui));
  background-color: var(--surface-inset);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  /* Popiska nad polem sází verzálky a prostrkání (.lobby-field), hodnota
     ve spouštěči je text, ne popiska, a dědit to po ní nemá. */
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.select-trigger:hover,
.select-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.select-value {
  flex: 1;
  min-width: 0;
}

.select-trigger[aria-expanded="true"] .theme-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Seznam drží levou hranu spouštěče, pole se čtou zleva, na rozdíl od lišty,
   kde se vpravo nevejde. Strop šířky je kvůli delším popiskům obtížnosti:
   na úzkém displeji se zalomí do dvou řádků místo vylezení z obrazovky. */
.select-list {
  left: 0;
  right: auto;
  max-width: min(calc(340px * var(--ui)), calc(100vw - 32px));
}

.select-list .theme-option {
  padding: calc(8px * var(--ui)) calc(10px * var(--ui));
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
  white-space: normal;
}

/* ------------------------------------------------------------ rozcestník */
/* Nadpis i perex stojí na ose sloupce, stejně jako rozcestník pod nimi. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* nadpis a perex patří k sobě těsněji než perex k rozcestníku pod ním */
  gap: clamp(8px, 1.4vh, calc(14px * var(--ui)));
  width: 100%;
  max-width: var(--stack-w);
  /* aby se nadpis mohl měřit sloupcem, ne oknem, viz .hero-title */
  container-type: inline-size;
}

/* Mono popisky (tady i níž): medium stupeň a mírnější prostrkání, verzálky
   v monu nepotřebují tolik vzduchu jako grotesk. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui));
  font-family: var(--label-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow::before {
  content: "";
  width: calc(22px * var(--ui));
  height: 1px;
  background-color: var(--border-strong);
}

/* Stupeň nadpisu se odvozuje od šířky sloupce (cqi), ne od šířky okna (vw).
   Každý motiv má jinak široké písmo, Archivo v 700 je o poznání širší než
   serif v regularu, a při měření oknem se jeden motiv do řádku vejde
   a druhý ne. Sloupec je pro všechny stejný, takže nadpis drží na jednom
   řádku ve všech třech. Řádek s vw zůstává jako fallback. */
.hero-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  font-size: clamp(2.2rem, 8.6cqi, 4.2rem);
  /* serif v regularu snese víc řádkování než grotesk v extra bold */
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  /* Barvu nese slovo, které o stránce něco říká: „režim“, „Poker“, „skupině“.
     Akcent proto sedí na nadpisu jako celku a .quiet ho z druhé poloviny
     zase sundává. Obráceně to fungovat nemůže: která polovina je nosná,
     se liší jazyk od jazyka, a značkování je jenom jedno. */
  color: var(--accent);
  /* když se to na úzkém displeji přece jen zlomí, ať jsou řádky vyrovnané */
  text-wrap: balance;
}

/* dvoutónový nadpis, jedna část ustupuje, druhá nese důraz.

   Ustupující polovina bere --text-muted, ne --text-faint: nejtišší stupeň
   textu je v motivu Ivory jílový (viz theme-ivory.css), takže by
   akcentem svítilo právě to slovo, které má couvnout.

   Mezeru mezi oběma polovinami dělá obyčejná mezera ve značkování, ne
   margin: nadpis je jedno souvětí a odečítač obrazovky i vyhledávač berou
   text bez ohledu na styl, bez ní by četly „MatematickýPoker“ jako jedno
   slovo. Odsazení marginem by se s ní jenom sečetlo. */
.hero-title .quiet {
  color: var(--text-muted);
}

/* Perex smí až na hranu sloupce, o šířce rozhoduje --stack-w, ne míra v `ch`.
   Jinak končí řádek jinde než rozcestník pod ním a blok vypadá uříznutě. */
/* Dolní mez clamp() platí až někam k 640 px šířky, takže o velikosti perexu
   na mobilu rozhoduje jenom ona, ne prostřední člen. Proto je nízko: 14 px
   drží perex nad popiskem v rozcestníku a pod nadpisem, kam patří. */
.hero-sub {
  color: var(--text-muted);
  /* perex jde do serifu jako odstavce, --font--paragraph-text */
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 2.2vw, 1.12rem);
  line-height: 1.5;
  max-width: 100%;
  margin-inline: auto;
  text-wrap: pretty;
}

/* Bez stínu potřebují dlaždice zřetelnější dělicí linku, mřížku mezi nimi
   kreslí podklad v --border-strong prosvítající 1px mezerou. */
.menu {
  display: grid;
  gap: 1px;
  width: 100%;
  max-width: var(--stack-w);
  background-color: var(--border-strong);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.menu-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(13px, 2.2vh, calc(18px * var(--ui)))
           clamp(14px, 2.4vw, calc(20px * var(--ui)));
  background-color: var(--surface);
  color: var(--text);
  transition: background-color var(--t-fast);
}

.menu-item:hover {
  background-color: var(--surface-2);
}

/* Ikony nesou jíl už v klidu, na rozcestníku jinak žádná barva není
   a stránka by byla celá v šedi. Najetí přidá výplň. */
.menu-icon {
  display: grid;
  place-items: center;
  width: calc(38px * var(--ui));
  height: calc(38px * var(--ui));
  border-radius: var(--r-sm);
  background-color: transparent;
  border: var(--hairline) solid var(--border-strong);
  color: var(--accent);
  font-size: 1.1875rem;
  transition: color var(--t-fast), background-color var(--t-fast),
    border-color var(--t-fast);
}

.menu-item:hover .menu-icon {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.menu-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight-sm);
  font-size: clamp(1rem, 2.8vw, 1.22rem);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
}

/* Řádek s názvem dlaždice. Stojí jen tam, kde k názvu patří štítek, ostatní
   dlaždice mají .menu-label rovnou v obalu jako dřív. Na úzkém displeji se
   štítek zalomí pod název, ať se nezačne krátit popisek pod ním. */
.menu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4px * var(--ui)) calc(9px * var(--ui));
}

/* Štítek „Začni tady“ (js/starthere.js). Bez výplně a jen s jílovým
   rámečkem: dlaždice se od sousedů odliší, ale štítek nepřekřičí název,
   pod kterým stojí. Velká písmena schválně nejsou, sázela by je i písma
   z ořezané podmnožiny (tools/fonts.mjs). */
.menu-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(2px * var(--ui)) calc(8px * var(--ui));
  border: var(--hairline) solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}

.menu-desc {
  display: block;
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-top: 1px;
  text-wrap: pretty;
}

.menu-arrow {
  color: var(--text-faint);
  font-size: 1.0625rem;
  transition: transform var(--t-fast), color var(--t-fast);
}

.menu-item:hover .menu-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Dlaždice, která bez připojení nikam nevede (js/offline.js ji offline
   označí aria-disabled a vymění popisek). Ztlumení nesmí být pouhá
   průhlednost: popisek říká, proč se tam nedá, a musí zůstat čitelný.
   Vypíná se proto barva, ne kontrast — akcent zmizí z ikony i šipky
   a dlaždice přestane odpovídat na najetí, takže vypadá tak, jak se
   chová. */
.menu-item[aria-disabled="true"],
.menu-item[aria-disabled="true"]:hover {
  background-color: var(--surface);
  color: var(--text-muted);
  cursor: default;
}

.menu-item[aria-disabled="true"] .menu-icon,
.menu-item[aria-disabled="true"]:hover .menu-icon {
  color: var(--text-faint);
  border-color: var(--border);
  background-color: transparent;
}

.menu-item[aria-disabled="true"] .menu-arrow,
.menu-item[aria-disabled="true"]:hover .menu-arrow {
  color: var(--text-faint);
  transform: none;
}

/* ----------------------------------------------------- hlavička sekce */
/* Nadnadpis sekce i jeho počitadlo drží společně na ose, ne na krajích,
   stejná osa jako .hero a .prose h2. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: calc(9px * var(--ui));
  padding-bottom: calc(7px * var(--ui));
  border-bottom: var(--hairline) solid var(--border);
}

.section-title {
  font-family: var(--label-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- řádek odkazů dál */
/* Výběr čísel a Tabulka jsou konce cesty: z celého dokumentu vedl jediný
   odkaz, drobeček zpátky na úvod. Kdo na ně přijde z vyhledávače na
   papírovou hru, potřebuje odsud dojít na pravidla, do školy i k hracímu
   plánu. Řádek stojí pod obsahem a drží stejnou osu i šířku sloupce jako on;
   vzhled si bere po drobečkách, ať se čte jako navigace, ne jako text. */
.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: var(--stack-w);
  font-size: 0.8125rem;
  font-weight: 500;
}

.page-links a {
  display: inline-flex;
  align-items: center;
  padding: calc(5px * var(--ui)) calc(9px * var(--ui));
  border-radius: var(--r-sm);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.page-links a:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.page-links .page-links-sep {
  color: var(--text-faint);
  user-select: none;
  font-size: 0.75rem;
}

/* --------------------------------------------------------------- dialogy */
/* Překryv se nekotví k oknu, ale k tomu, co je z okna vidět: proměnné --vv-*
   plní js/ui.js z visualViewport, aby vysunutá klávesnice na mobilu dialog
   nepřekryla. Bez JS (a než se poprvé změří) platí záložní hodnoty, které
   vyjdou na celé okno. */
.overlay {
  position: fixed;
  top: var(--vv-top, 0px);
  left: var(--vv-left, 0px);
  z-index: 50;
  width: var(--vv-width, 100%);
  height: var(--vv-height, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background-color: var(--overlay);
  backdrop-filter: blur(2px);
  animation: fadeIn 140ms ease;
}

/* S vysunutou klávesnicí zbude na dialog nízký pruh. Středění by ho ořízlo
   nahoře i dole naráz, u horní hrany zůstane vidět nadpis i pole a zbytek
   se v dialogu doroluje. */
.overlay.is-keyboard {
  align-items: flex-start;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.overlay[hidden] {
  display: none !important;
}

/* Stránka pod otevřeným dialogem se nemá rolovat, na mobilu se jinak při
   otevření klávesnice odjede pryč i podklad. Jen na dotykových zařízeních:
   na desktopu by zmizel posuvník a stránka pod dialogem by o jeho šířku
   poskočila. */
@media (pointer: coarse) {
  body.has-dialog {
    overflow: hidden;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.dialog {
  /* Vycpávka i podklad jsou proměnné, protože je potřebuje i lepivá lišta
     tlačítek (.dialog--sticky-actions): musí dorovnat okraj dialogu a
     překrýt obsah stejnou barvou, jakou má dialog v daném motivu. */
  --dialog-pad: clamp(20px, 4vw, calc(28px * var(--ui)));
  --dialog-bg: var(--surface);
  width: 100%;
  max-width: calc(480px * var(--ui));
  /* strop je viditelná výška překryvu, ne výška okna, viz .overlay */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--dialog-pad);
  background-color: var(--dialog-bg);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: dialogIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialogIn {
  from {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
  }
}

.dialog-icon {
  display: grid;
  place-items: center;
  width: calc(38px * var(--ui));
  height: calc(38px * var(--ui));
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.dialog-icon .icon {
  width: calc(20px * var(--ui));
  height: calc(20px * var(--ui));
}

.dialog-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.2vw, 1.6rem);
  font-weight: var(--display-weight-sm);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
  margin-bottom: calc(7px * var(--ui));
  text-wrap: balance;
}

.dialog-text {
  color: var(--text-muted);
  /* stejný serif jako odstavce, --font--paragraph-text */
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}

/* Mezeru mezi obsahem dialogu a jeho tlačítky drží tělo, ne to, co je v něm.
   Dřív si ji nesl každý vložený prvek zvlášť (.dialog-note, .picker-list,
   .value-grid…), takže obsah, který ji neměl, končil nalepený na tlačítkách:
   konečná tabulka na konci duelu i skupinové hry, zvětšený QR na plátno, samo
   stojící skóre po sólo partii. Poslední prvek v těle proto svoje odsazení
   zahodí (uvnitř těla se pořád uplatní, jen ne na konci) a stejnou mezeru
   vrátí tělo pod sebou. Ať se do dialogu vloží cokoli, odstup od tlačítek je
   stejný a nový obsah na něj nemusí myslet.
   Prázdné tělo (dialog jen s otázkou) i tělo bez tlačítek pod sebou mezeru
   nedostanou, jinak by dialogu přebývala vycpávka dole. */
.dialog-body:not(:empty):not(:last-child) {
  margin-bottom: var(--sp-4);
}

.dialog-body > :last-child {
  margin-bottom: 0;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.dialog-actions .btn {
  flex: 1 1 calc(140px * var(--ui));
}

/* Kroky ručního přidání na plochu v dialogu tlačítka „Nainstalovat
   aplikaci" (js/install.js). Globální reset maže odsazení seznamů,
   bez padding-left by čísla vypadla z dialogu. */
.install-steps {
  margin: 0 0 var(--sp-4);
  padding-left: 1.5em;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-wrap: pretty;
}

.install-steps li + li {
  margin-top: calc(6px * var(--ui));
}

.install-steps li::marker {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Snímky obrazovky k prvním dvěma krokům, dvojice vedle sebe jako
   reprodukce v učebnici: tenký rám s paspartou. Zvýraznění kroků je
   nakreslené přímo v obrázcích (js/install.js je jen vkládá). */
.install-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12px * var(--ui));
  margin-bottom: var(--sp-4);
}

.install-shot {
  margin: 0;
  padding: calc(6px * var(--ui));
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}

.install-shot-frame {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--r-sm) / 2);
}

.install-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* mřížka pro volbu hodnoty žolíka */
.value-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(6px * var(--ui));
  margin-bottom: var(--sp-4);
}

.value-btn {
  padding: clamp(9px, 2.2vw, calc(12px * var(--ui))) 0;
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: clamp(1rem, 4vw, 1.1875rem);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

.value-btn:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Bodovací tabulka v dialogu (js/combos.js). Sazbu tabulky nese
   .score-table v css/prose.css, tatáž jako na stránce Pravidla; tady
   zbývá jen odsadit ji od tlačítek dialogu, ta si vlastní mezeru nedělají. */
.combos-sheet {
  margin-bottom: var(--sp-4);
}

/* Patník pod tabulkou: věta o liniích a odkaz na celá pravidla (js/combos.js).
   Sazba je stejná jako popisek dialogu (.dialog-text), ať se to čte jako
   poznámka pod čarou, ne jako druhá polovina okna. */
.combos-more {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Odkaz drží šipku na svém řádku: zalomení mezi slovem a šipkou by z ní
   udělalo osiřelý znak nad tlačítkem Zavřít. */
.combos-more-link {
  display: inline-flex;
  align-items: center;
  gap: calc(3px * var(--ui));
  white-space: nowrap;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.combos-more-link:hover {
  color: var(--accent-hover);
}

.combos-more-link .icon {
  width: calc(14px * var(--ui));
  height: calc(14px * var(--ui));
}

/* Tabulka je vyšší než dialog, takže se v něm roluje. Tlačítko Zavřít proto
   drží u spodní hrany: jinak ho rozjeté řádky vytlačí z dohledu a dialog
   uprostřed tabulky vypadá jako bez východu. Záporné okraje dorovnají
   vycpávku dialogu, aby lišta sahala až k jeho hraně a řádky pod ní
   neprosvítaly. */
.dialog--sticky-actions .dialog-actions {
  position: sticky;
  /* Lepivý okraj měří prohlížeč od obsahové plochy, ne od hrany dialogu,
     takže bez posunu o vycpávku by pod lištou prosvítal pruh řádků. */
  bottom: calc(-1 * var(--dialog-pad));
  margin: 0 calc(-1 * var(--dialog-pad)) calc(-1 * var(--dialog-pad));
  padding: var(--sp-3) var(--dialog-pad) var(--dialog-pad);
  background-color: var(--dialog-bg);
  border-top: var(--hairline) solid var(--border);
}

.dialog-score {
  display: flex;
  align-items: baseline;
  gap: calc(10px * var(--ui));
  padding: var(--sp-3) 0 var(--sp-4);
  margin-bottom: var(--sp-2);
  border-top: var(--hairline) solid var(--border);
  border-bottom: var(--hairline) solid var(--border);
}

/* velké číslo v serifu, stejná role jako tažené číslo v konzoli */
.dialog-score-value {
  font-family: var(--font-display);
  font-weight: var(--num-weight);
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dialog-score-label {
  font-family: var(--label-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Řádek pod skóre, komu se partie zapsala a jestli něco překonala. */
.dialog-note {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui));
  margin-bottom: var(--sp-4);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-wrap: pretty;
}

.dialog-note .icon {
  width: calc(16px * var(--ui));
  height: calc(16px * var(--ui));
  color: var(--text-faint);
}

.dialog-note.is-record,
.dialog-note.is-record .icon {
  color: var(--good);
}

/* Výčet překonaných rekordů pod řádkem „Nové rekordy“: každý na vlastním
   řádku, aby se tři položky nemusely číst jako jedna dlouhá věta. */
.dialog-records {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
  padding-left: calc(24px * var(--ui));
  list-style: disc;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--good);
}

.dialog-records li {
  margin-bottom: calc(2px * var(--ui));
}

/* Umístění v žebříčku po dohrané partii o žebříček: jeden štítek na období
   („1. dnes“, „3. za týden“), místo věty s výčtem přes čárky. */
.dialog-places {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6px * var(--ui));
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.place-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui));
  padding: calc(4px * var(--ui)) calc(10px * var(--ui));
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.place-chip .icon {
  width: calc(13px * var(--ui));
  height: calc(13px * var(--ui));
  color: var(--text-faint);
}

.place-rank {
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* První místo se od ostatních liší barvou, stejnou jako rekordy (is-record). */
.place-chip.is-first {
  border-color: var(--good);
  color: var(--good);
}

.place-chip.is-first .icon,
.place-chip.is-first .place-rank {
  color: var(--good);
}

.dialog-note.is-warn,
.dialog-note.is-warn .icon {
  color: var(--warn);
}

/* ---------------------------------------------------------------- hlášky */
/* Dokud je vidět lišta souhlasu, hlášky se zvednou nad ni (--consent-space
   měří js/consent.js), jinak by toast ležel přes její tlačítka. */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(16px * var(--ui) + var(--consent-space, 0px));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7px * var(--ui));
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.toast {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui));
  padding: calc(9px * var(--ui)) calc(15px * var(--ui));
  background-color: var(--surface);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--text);
  animation: toastIn 200ms ease;
}

.toast .icon {
  width: calc(16px * var(--ui));
  height: calc(16px * var(--ui));
}

.toast--warn {
  border-color: var(--warn);
  color: var(--warn);
}

.toast--joker {
  border-color: var(--joker);
  color: var(--joker);
}

.toast.is-leaving {
  animation: toastOut 240ms ease forwards;
}

@keyframes toastIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}

@keyframes toastOut {
  to {
    transform: translateY(8px);
    opacity: 0;
  }
}

/* ------------------------------------------------------------- drobnosti */
.note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
}

.note .icon {
  width: calc(19px * var(--ui));
  height: calc(19px * var(--ui));
  color: var(--text-muted);
  margin-top: 2px;
}

.note p:last-child {
  margin-bottom: 0;
}

.kbd {
  display: inline-block;
  min-width: calc(22px * var(--ui));
  padding: 1px calc(6px * var(--ui));
  background-color: var(--surface-2);
  border: var(--hairline) solid var(--border-strong);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}