/* =========================================================================
   Nalejvárna: Hájek, krok 1 — styl
   Světlý motiv, jeden token systém, žádná knihovna. Nikde `transition: all`.
   ========================================================================= */

:root {
  /* barvy */
  --papir:          #F5F6F8;
  --karta:          #FFFFFF;
  --inkoust:        #16213A;
  --sedy:           #5B6478;
  --linka:          #E3E6EC;
  --modra:          #2454E0;
  --modra-svetla:   #E9EFFF;
  --razitko-barva:  #C8322B;
  --zelena:         #1E9E5A;
  --zelena-svetla:  #E6F6EC;
  --cervena-svetla: #FDECEA;
  --zluta:          #FFF4D6;

  /* písmo */
  --pismo-nadpis: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --pismo-text:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* tvary */
  --r-karta:    20px;
  --r-dlazdice: 12px;
  --r-chip:     8px;
  --r-pill:     999px;
  --stin: 0 1px 2px rgba(22, 33, 58, .06), 0 8px 24px rgba(22, 33, 58, .06);
  --stin-zvednuty: 0 1px 2px rgba(22, 33, 58, .08), 0 12px 32px rgba(22, 33, 58, .10);

  /* rozměry */
  --sloupec: 720px;
  --text-sirka: 62ch;
  --gutter: 72px;      /* levý pruh mapy, ve kterém sedí kolečka */
  --kolecko: 56px;
  --krivka: cubic-bezier(.2, 0, 0, 1);
}

* { box-sizing: border-box; }

/* Atribut hidden musí přebít i vlastní `display: flex` u konkrétních prvků
   (jinak zůstane vidět razítková vrstva, pruh pokroku i šipka zpět). */
[hidden] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  background: var(--papir);
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font-family: var(--pismo-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 {
  font-family: var(--pismo-nadpis);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

p, li { text-wrap: pretty; overflow-wrap: break-word; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--modra); }

:focus-visible {
  outline: 2px solid var(--modra);
  outline-offset: 2px;
  border-radius: 4px;
}

.preskoc {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--karta);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-dlazdice) 0;
  font-weight: 600;
  text-decoration: none;
}
.preskoc:focus { left: 0; }

/* ---------- pruh „bez klíče“ ---------------------------------------------- */

.pruh {
  background: var(--zluta);
  color: #6B4E00;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
  line-height: 1.35;
}

/* ---------- hlavička ------------------------------------------------------ */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 246, 248, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  box-shadow: 0 1px 0 rgba(22, 33, 58, .06);
}

.hlavicka-radek {
  max-width: var(--sloupec);
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}

.hlavicka-titul {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-ikona {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--inkoust);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 120ms var(--krivka), background-color 120ms linear;
}
.tl-ikona:hover { background: rgba(22, 33, 58, .05); }
.tl-ikona:active { transform: scale(.96); }

.pill {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sedy);
  background: var(--karta);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  box-shadow: 0 1px 2px rgba(22, 33, 58, .06);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 160ms linear, background-color 160ms linear;
}
.pill[data-stav="ulozeno"] { color: var(--zelena); }
.pill[data-stav="chyba"]   { color: var(--razitko-barva); background: var(--cervena-svetla); }
.pill[data-stav="hotovo"]  { color: var(--modra); background: var(--modra-svetla); }
.pill:empty { display: none; }

/* progres lekce — segmenty = karty */
.progres {
  max-width: var(--sloupec);
  margin: 0 auto;
  padding: 0 16px 8px;
}
.progres-pruh {
  display: flex;
  gap: 4px;
}
/* Proužek je tlačítko: bar zůstává 4px, ale klepací plocha je vysoká,
   ať se do ní dá trefit prstem na telefonu. */
.progres .segment {
  flex: 1 1 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 9px 0;
  margin: -9px 0;
  cursor: pointer;
  min-width: 0;
}
.progres .segment[disabled] { cursor: default; }
.progres .drah {
  display: block;
  height: 4px;
  background: var(--linka);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 180ms var(--krivka);
}
.progres .drah > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--modra);
  border-radius: 2px;
  transition: width 240ms var(--krivka);
}
.progres .segment[data-plny] .drah > i { width: 100%; }

/* kde právě stojím — proužek ztloustne (přes transform, ať nic neposkočí) */
.progres .segment[data-tam] .drah {
  transform: scaleY(2.25);
}
.progres .segment[data-tam] .drah > i {
  background: var(--inkoust);
}
.progres .segment:not([disabled]):hover .drah { transform: scaleY(1.75); }
.progres .segment:not([disabled])[data-tam]:hover .drah { transform: scaleY(2.25); }
.progres .segment:focus-visible .drah {
  outline: 2px solid var(--modra);
  outline-offset: 3px;
}

.progres-popis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--sedy);
}
.progres-popis > b { font-weight: 600; color: inherit; }
.progres-popis > span { opacity: .8; text-align: right; }
@media (max-width: 380px) {
  .progres-popis > span { display: none; }
}

/* ---------- společné plochy ---------------------------------------------- */

.hlavni {
  max-width: var(--sloupec);
  margin: 0 auto;
  padding: 20px 16px 32px;
}
.hlavni:focus { outline: none; }

.karta {
  background: var(--karta);
  border-radius: var(--r-karta);
  box-shadow: var(--stin);
  padding: 20px;
}
@media (min-width: 640px) { .karta { padding: 24px; } }

.uzsi { max-width: var(--text-sirka); }

/* ---------- tlačítka ------------------------------------------------------ */

.tl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-family: var(--pismo-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms var(--krivka), background-color 140ms linear;
}
.tl:active { transform: scale(.96); }
.tl-primarni { background: var(--modra); color: #fff; }
.tl-primarni:hover { background: #1E48C6; }
.tl-ghost {
  background: var(--karta);
  color: var(--inkoust);
  box-shadow: inset 0 0 0 1px var(--linka), 0 1px 2px rgba(22, 33, 58, .05);
}
.tl-ghost:hover { background: #FAFBFC; }
.tl-siroke { width: 100%; }
.tl[disabled] { opacity: .5; cursor: default; }
.tl[disabled]:active { transform: none; }

/* ---------- mapa ---------------------------------------------------------- */

.uvod-nazev {
  font-size: 28px;
  font-weight: 800;
  margin: 4px 0 8px;
}
.uvod-veta {
  color: var(--sedy);
  font-size: 16px;
  max-width: var(--text-sirka);
  margin-bottom: 16px;
}
.pokrok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 16px;
}
.pokrok-udaj {
  font-size: 14.5px;
  color: var(--sedy);
  margin: 0;
}
.pokrok-udaj b {
  color: var(--inkoust);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mapa {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.uzel-radek {
  position: relative;
  padding-bottom: 22px;
}
.uzel-radek:last-child { padding-bottom: 0; }

.spojnice {
  position: absolute;
  left: 0;
  top: var(--kolecko);
  bottom: 0;
  width: var(--gutter);
  pointer-events: none;
}
.spojnice svg { display: block; width: 100%; height: 100%; }

.uzel {
  position: relative;
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0 0 2px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r-dlazdice);
  transition: transform 140ms var(--krivka);
}
.uzel:active { transform: scale(.985); }

.uzel-kolecko {
  width: var(--kolecko);
  height: var(--kolecko);
  margin-left: calc((var(--gutter) - var(--kolecko)) / 2 + var(--posun, 0px));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  background: var(--karta);
  box-shadow: inset 0 0 0 2px var(--linka), 0 1px 2px rgba(22, 33, 58, .06),
              0 0 0 6px var(--papir);
  transition: background-color 180ms linear, box-shadow 180ms linear;
}
.uzel[data-stav="rozpracovano"] .uzel-kolecko {
  box-shadow: inset 0 0 0 2px var(--modra), 0 1px 2px rgba(22, 33, 58, .06),
              0 0 0 6px var(--papir);
}
.uzel[data-stav="hotovo"] .uzel-kolecko {
  background: var(--modra);
  box-shadow: inset 0 0 0 2px var(--modra), 0 2px 6px rgba(36, 84, 224, .3),
              0 0 0 6px var(--papir);
}
.uzel[data-stav="hotovo"] .uzel-kolecko svg { color: #fff; }
.uzel-souhrn .uzel-kolecko { background: var(--modra-svetla); }
.uzel-souhrn[data-stav="hotovo"] .uzel-kolecko { background: var(--modra); }

.uzel-popis { min-width: 0; padding-top: 4px; }
.uzel-nazev {
  display: block;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.uzel-podtitul {
  display: block;
  color: var(--sedy);
  font-size: 14.5px;
  line-height: 1.45;
  margin-top: 3px;
  text-wrap: pretty;
}
.uzel-stav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sedy);
  font-variant-numeric: tabular-nums;
}
.uzel[data-stav="hotovo"] .uzel-stav { color: var(--zelena); }
.uzel[data-stav="rozpracovano"] .uzel-stav { color: var(--modra); }

/* ---------- karta lekce --------------------------------------------------- */

.nadpis-karty {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
@media (min-width: 640px) { .nadpis-karty { font-size: 26px; } }

.telo { max-width: var(--text-sirka); }
.telo ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.telo li { margin-bottom: 6px; }
.telo strong { font-weight: 600; }

.stitek {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sedy);
  margin-bottom: 6px;
}

/* diagram */
.diagram {
  margin: 18px 0;
  display: flex;
  justify-content: center;
}
.diagram svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  font-family: var(--pismo-text);
}
/* Na úzkých displejích si diagram půjčí kus vnitřního okraje karty (zůstává uvnitř
   bílé plochy), aby se texty nemusely zmenšovat pod čitelnou hranici. */
@media (max-width: 639px) {
  .diagram { margin-left: -12px; margin-right: -12px; }
}

/* citace */
.citace {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--papir);
  border-radius: var(--r-dlazdice);
  box-shadow: inset 3px 0 0 var(--modra);
}
.citace p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
}
.citace footer {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sedy);
}

/* rozbalovací bloky */
.rozbal {
  margin-top: 12px;
  background: var(--papir);
  border-radius: var(--r-dlazdice);
  overflow: hidden;
}
.rozbal > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--inkoust);
  transition: background-color 140ms linear;
}
.rozbal > summary::-webkit-details-marker { display: none; }
.rozbal > summary:hover { background: rgba(22, 33, 58, .035); }
.rozbal > summary .sipka {
  flex: 0 0 auto;
  color: var(--sedy);
  transition: transform 160ms var(--krivka);
}
.rozbal[open] > summary .sipka { transform: rotate(90deg); }
.rozbal-telo {
  padding: 0 14px 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--sedy);
  animation: prolnuti 120ms linear both;
}
.rozbal-telo p { margin-bottom: 10px; }

/* ---------- rozhodnutí ---------------------------------------------------- */

.kontext {
  color: var(--sedy);
  max-width: var(--text-sirka);
  margin-bottom: 16px;
}
.napoveda-vice {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--modra);
  background: var(--modra-svetla);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin-bottom: 12px;
}

.moznosti { display: grid; gap: 12px; margin-bottom: 18px; }

.moznost {
  display: flow-root;
  background: var(--karta);
  border-radius: var(--r-dlazdice);
  box-shadow: inset 0 0 0 2px var(--linka);
  transition: box-shadow 160ms linear, background-color 160ms linear;
}
.moznost[data-vybrano] {
  background: var(--modra-svetla);
  box-shadow: inset 0 0 0 2px var(--modra);
}
.moznost:has(:focus-visible) { outline: 2px solid var(--modra); outline-offset: 2px; }

.dlazdice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  min-height: 56px;
  cursor: pointer;
  position: relative;
}
.dlazdice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.znacka {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--karta);
  box-shadow: inset 0 0 0 2px var(--linka);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color 160ms linear, box-shadow 160ms linear;
}
.znacka-ctverec { border-radius: 7px; }
.znacka svg { opacity: 0; transition: opacity 140ms linear; }
.moznost[data-vybrano] .znacka {
  background: var(--modra);
  box-shadow: inset 0 0 0 2px var(--modra);
}
.moznost[data-vybrano] .znacka svg { opacity: 1; }

.dlazdice-telo { min-width: 0; }
.dlazdice-nazev {
  display: inline;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}
.dlazdice-popis {
  display: block;
  margin: 5px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--sedy);
}

.razitko {
  display: inline-block;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  color: var(--razitko-barva);
  border: 2px solid var(--razitko-barva);
  border-radius: 6px;
  opacity: .9;
  transform: rotate(-6deg);
  line-height: 1.15;
  white-space: nowrap;
}
.razitko-maly {
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* „plus a minus“ uvnitř dlaždice — nativní <details>, ale bez vlastní plochy */
.rozbal-pm {
  margin: 0 14px 6px 46px;
  background: transparent;
  border-radius: var(--r-chip);
}
.rozbal-pm > summary {
  padding: 4px 0;
  min-height: 36px;
  font-size: 14px;
  color: var(--modra);
}
.rozbal-pm > summary:hover { background: transparent; text-decoration: underline; }
.rozbal-pm > summary .sipka { color: var(--modra); }

.pm-mrizka {
  display: grid;
  gap: 6px;
  padding: 2px 0 10px;
  animation: prolnuti 120ms linear both;
}
.pm-radek {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sedy);
}
.tecka {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
}
.tecka-plus { background: var(--zelena); }
.tecka-minus { background: var(--razitko-barva); }

.dop-proc {
  margin: 0 14px 12px 48px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sedy);
}
.dop-proc b { color: var(--inkoust); font-weight: 600; }

/* ---------- poznámka / volný text ----------------------------------------- */

.pole { margin-top: 4px; }
.pole-popisek {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sedy);
  margin-bottom: 6px;
}
textarea {
  display: block;
  width: 100%;
  font-family: var(--pismo-text);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--inkoust);
  background: var(--karta);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--linka);
  border-radius: var(--r-dlazdice);
  padding: 12px 14px;
  resize: none;
  overflow: hidden;
  min-height: 52px;
  transition: box-shadow 160ms linear;
}
textarea::placeholder { color: #97A0B2; }
textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--modra);
}
textarea.velke { min-height: 118px; }

.prepinac-poznamky {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--modra);
  cursor: pointer;
  border-radius: var(--r-chip);
}
.prepinac-poznamky .sipka { transition: transform 160ms var(--krivka); }
.prepinac-poznamky[aria-expanded="true"] .sipka { transform: rotate(90deg); }

/* ---------- kvíz ---------------------------------------------------------- */

.kviz-moznosti { display: grid; gap: 10px; margin-bottom: 14px; }
.kviz-moznost {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-height: 56px;
  padding: 14px;
  background: var(--karta);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--linka);
  border-radius: var(--r-dlazdice);
  font: inherit;
  font-size: 16.5px;
  color: inherit;
  cursor: pointer;
  transition: transform 120ms var(--krivka), box-shadow 160ms linear, background-color 160ms linear;
}
.kviz-moznost:active { transform: scale(.985); }
.kviz-moznost[data-vysledek="spravne"] {
  background: var(--zelena-svetla);
  box-shadow: inset 0 0 0 2px var(--zelena);
}
.kviz-moznost[data-vysledek="spatne"] {
  background: var(--cervena-svetla);
  box-shadow: inset 0 0 0 2px var(--razitko-barva);
}
.kviz-znacka {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: var(--sedy);
  background: var(--papir);
}
.kviz-moznost[data-vysledek="spravne"] .kviz-znacka { background: var(--zelena); color: #fff; }
.kviz-moznost[data-vysledek="spatne"] .kviz-znacka { background: var(--razitko-barva); color: #fff; }

.kviz-vysvetleni {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-dlazdice);
  background: var(--papir);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--sedy);
  animation: prolnuti 140ms linear both;
}

/* ---------- spodní lišta karty -------------------------------------------- */

.lista {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(245, 246, 248, 0), var(--papir) 32%);
}
.lista .tl { flex: 1 1 0; }
@media (min-width: 640px) {
  .lista .tl { flex: 0 0 auto; }
  .lista .tl-ghost { min-width: 128px; margin-right: auto; }
  .lista .tl-primarni { min-width: 208px; }
}

/* ---------- souhrn -------------------------------------------------------- */

.souhrn-hlavicka { margin-bottom: 18px; }
.souhrn-pocet {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  background: var(--modra-svetla);
  color: var(--modra);
  font-variant-numeric: tabular-nums;
}
.souhrn-pocet[data-chybi] { background: var(--zluta); color: #6B4E00; }

.souhrn-skupina { margin-bottom: 12px; }
.souhrn-lekce {
  font-size: 13px;
  font-weight: 600;
  color: var(--sedy);
  margin: 18px 0 8px;
}
.souhrn-radek {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--karta);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--linka);
  border-radius: var(--r-dlazdice);
  padding: 14px;
  margin-bottom: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 120ms var(--krivka), box-shadow 160ms linear;
}
.souhrn-radek:hover { box-shadow: inset 0 0 0 1px var(--linka), var(--stin); }
.souhrn-radek:active { transform: scale(.99); }
.souhrn-otazka { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; }
.souhrn-odpoved {
  display: block;
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--inkoust);
}
.souhrn-odpoved.chybi { color: var(--razitko-barva); font-weight: 600; }
.souhrn-poznamka {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sedy);
}

.souhrn-akce { margin-top: 24px; display: grid; gap: 10px; }
.souhrn-hlaska {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--sedy);
  animation: prolnuti 140ms linear both;
}
.souhrn-hlaska.varovani { color: var(--razitko-barva); font-weight: 600; }

.pod-souhrnem { margin-top: 28px; display: grid; gap: 16px; }

/* ---------- razítko přes obrazovku ---------------------------------------- */

.razitko-vrstva {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 246, 248, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  animation: prolnuti 140ms linear both;
}
.razitko-velke {
  font-size: clamp(34px, 11vw, 56px);
  padding: 10px 26px;
  border-radius: 10px;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .55);
  animation: razitko-dopad 260ms var(--krivka) both;
}

@keyframes razitko-dopad {
  from { transform: rotate(-10deg) scale(1.6); opacity: 0; }
  to   { transform: rotate(-6deg) scale(1);   opacity: .92; }
}
@keyframes prolnuti {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes karta-vstup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.anim-vstup { animation: karta-vstup 180ms var(--krivka) both; }

/* ---------- desktop ------------------------------------------------------- */

@media (min-width: 640px) {
  body { font-size: 17px; }
  .uvod-nazev { font-size: 32px; }
  .hlavicka-titul { font-size: 16px; }
  .mapa { --gutter: 88px; }
  .uzel-nazev { font-size: 19px; }
}

/* ---------- klid pro ty, co nechtějí pohyb -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .anim-vstup { animation: none; }
  .razitko-velke {
    animation: prolnuti 160ms linear both;
    transform: rotate(-6deg);
    opacity: .92;
  }
}