/* =====================================================================
   Městské hry – vzhled (mobile-first, světlý i tmavý režim)
   Tmavý režim: třída .dark na <html> (nastavuje assets/js/theme.js).

   PRAVIDLO: barvy se píšou JEN do proměnných v :root (světlý) a :root.dark (tmavý)
   hned níže. Nikde jinde v CSS ani v HTML nejsou natvrdo – změna barevnosti celé
   aplikace = úprava těchto dvou bloků.
   ===================================================================== */

:root, .tym-menu-panel {   /* panel týmu leží v tmavé herní liště – vrací se mu běžné barvy */
  /* H33-2a „Čistý modrý“: modrá = hlavní (tlačítka, odkazy, logo), téměř černá = doplňková (štítky, zvýraznění) */
  --pozadi: #f4f6f7;
  --plocha: #ffffff;
  --text: #17202a;
  --text-tlumeny: #4d5966;
  --text-drobny: #5d6d7e;
  --okraj: #d5dadd;
  --primarni: #1f618d;            /* modrá (tlačítka, odkazy) */
  --primarni-hover: #174a6c;
  --na-primarni: #ffffff;         /* text na modrém tlačítku */
  --primarni-svetla: #e8f0f6;
  --akcent: #17202a;              /* štítky a zvýraznění – bez další barvy */
  --akcent-svetla: #e5e8e8;
  --logo: #1f618d;
  --na-logu: #ffffff;             /* text na logu a avataru */
  --zluta: #fef3c7;
  --zluta-text: #92400e;
  --uspech: #047857;
  --uspech-svetla: #ecfdf5;
  --chyba: #b03a2e;
  --chyba-svetla: #fbeeed;
  --stin: none;                   /* H33-2a: bez měkkých stínů, plochy odděluje obrys */
  --qr-pozadi: #ffffff;           /* QR kód musí být vždy černý na bílé (i v tmavém režimu) */
  --voda: #1d4ed8;                /* H8 horko–zima: studené pásmo */
  --voda-svetla: #e0ecff;
  --ohen: #c2410c;                /* H8 horko–zima: horké pásmo */
  --ohen-svetla: #ffedd5;
  --pozice: #2563eb;              /* H8 poloha hráče na mapě */
  --stin-kotouc: inset 0 6px 8px -6px rgb(0 0 0 / .25), inset 0 -6px 8px -6px rgb(0 0 0 / .25);   /* H9 zámek */
  --ztmaveni: rgb(0 0 0 / .25);   /* H9 okolí rámečku čtečky QR */
  --lightbox-pozadi: rgb(0 0 0 / .88);   /* H31 zvětšený obrázek (stejné ve světlém i tmavém režimu) */
  --lightbox-text: #ffffff;
  --lightbox-tlacitko: rgb(255 255 255 / .16);
  --vzor-obd-vypln: rgb(255 255 255 / .55);   /* H32 obdélník v editoru vzoru (na pozadí obrázku) */
  --vzor-obd-text: #17202a;
  --tlacitko-neaktivni: #dde2e5; /* H11: šedé tlačítko, na které zatím nejde klepnout */
  --na-neaktivni: #4d5966;
  --tlacitko-hotovo: #15803d;     /* H11: zelené tlačítko „můžete pokračovat“ */
  --tlacitko-hotovo-hover: #166534;
  --na-hotovo: #ffffff;
  --mh-1: #e11d48; --mh-2: #2563eb; --mh-3: #16a34a; --mh-4: #f59e0b; --mh-5: #9333ea;   /* H12 barvy miniher */
  --mh-6: #0891b2; --mh-7: #ea580c; --mh-8: #65a30d; --mh-9: #db2777;
  --mh-pole: #eef1f3; --mh-mrizka: #c8d0d6; --mh-text: #ffffff;
  --zaobleni: 4px;                /* H33-2a: skoro hranaté rohy (dříve 18 px) */
  --r: 4px;                       /* tlačítka, pole, karty */
  --r-maly: 2px;                  /* štítky, čipy, malé prvky */
  /* H33-2a: tmavá lišta (záhlaví a herní lišta) – uvnitř lišty se přemapují běžné proměnné, viz konec souboru */
  --lista: #17202a;
  --lista-text: #ffffff;
  --lista-tlumeny: #c5cdd5;
  --lista-okraj: #4a5562;
  --lista-hover: #24303c;
  --lista-akcent: #8cc4ea;
  /* H33-2a: písma (Oswald a Open Sans z assets/fonty, viz @font-face níže; ostatní jsou záložní) */
  --rodina-nadpis: "Oswald", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --rodina-text: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rodina-cisla: var(--rodina-nadpis);   /* H33-2b: čas a skóre (styl Sci-fi má vlastní) */
  /* H33-2b: hlavní tlačítko může mít jinou barvu než odkazy (např. žluté tlačítko, odkazy tmavě zlaté); vzhled hry je přepíše */
  --tlacitko: var(--primarni);
  --tlacitko-hover: var(--primarni-hover);
  --na-tlacitku: var(--na-primarni);
  --plocha-ukol: var(--plocha);
  color-scheme: light;
}
:root.dark, :root.dark .tym-menu-panel {
  --pozadi: #0e1419;
  --plocha: #151d24;
  --text: #e6eaf0;
  --text-tlumeny: #aab4c0;
  --text-drobny: #8e9aa8;
  --okraj: #2a3642;
  --primarni: #6cb4e4;
  --primarni-hover: #93c8ec;
  --na-primarni: #0b1a26;
  --primarni-svetla: #16293a;
  --akcent: #e6eaf0;
  --akcent-svetla: #24303c;
  --logo: #1f618d;
  --na-logu: #ffffff;
  --zluta: #3a2e12;
  --zluta-text: #fcd34d;
  --uspech: #6ee7b7;
  --uspech-svetla: #0c2a22;
  --chyba: #f1948a;
  --chyba-svetla: #3a1a17;
  --stin: none;
  --qr-pozadi: #ffffff;
  --tlacitko-neaktivni: #24303c;
  --na-neaktivni: #8e9aa8;
  --tlacitko-hotovo: #4ade80;
  --tlacitko-hotovo-hover: #86efac;
  --na-hotovo: #052e16;
  --mh-1: #fb7185; --mh-2: #60a5fa; --mh-3: #4ade80; --mh-4: #fbbf24; --mh-5: #c084fc;
  --mh-6: #22d3ee; --mh-7: #fb923c; --mh-8: #a3e635; --mh-9: #f472b6;
  --mh-pole: #18222b; --mh-mrizka: #2e3b47; --mh-text: #0e1419;
  --lista: #0a0f14;
  --lista-okraj: #2a3642;
  --lista-hover: #18222b;
  --voda: #93c5fd;
  --voda-svetla: #10233f;
  --ohen: #fdba74;
  --ohen-svetla: #3a1d0c;
  --pozice: #60a5fa;
  --stin-kotouc: inset 0 6px 8px -6px rgb(0 0 0 / .6), inset 0 -6px 8px -6px rgb(0 0 0 / .6);
  --ztmaveni: rgb(0 0 0 / .35);
  color-scheme: dark;
}

/* H33-2a: písma rámu aplikace – uložená na našem serveru (ne Google Fonts: nepředáváme IP adresy návštěvníků třetí straně).
   Proměnná písma (tloušťka 400–700), jen latinka + čeština; licence SIL OFL v assets/fonty/OFL-*.txt. */
@font-face { font-family: "Oswald"; src: url("../fonty/oswald.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonty/open-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonty/open-sans-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pozadi);
  color: var(--text);
  font: 16px/1.55 var(--rodina-text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primarni); text-underline-offset: 2px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .25em 0 .4em; }
[hidden] { display: none !important; }

/* Přístupnost: odkaz „Přeskočit na obsah“ */
.preskocit { position: absolute; left: -9999px; }
.preskocit:focus { left: 12px; top: 12px; z-index: 10; background: var(--plocha); padding: 8px 12px; border-radius: var(--r); }

.pruh-test {
  background: var(--zluta); color: var(--zluta-text);
  text-align: center; font-size: .8rem; font-weight: 600; padding: 4px 12px;
}

/* Hlavička */
.hlavicka {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--plocha); border-bottom: 1px solid var(--okraj);
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.logo-znak {
  width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--logo); color: var(--na-logu); font-weight: 700;
}
.prepinac-motivu {
  width: 42px; height: 42px; border-radius: var(--r); border: 1px solid var(--okraj);
  background: var(--plocha); color: var(--text-tlumeny); display: grid; place-items: center; cursor: pointer;
}
.prepinac-motivu svg { width: 20px; height: 20px; }
.ikona-mesic { display: none; }
:root.dark .ikona-slunce { display: none; }
:root.dark .ikona-mesic { display: block; }

/* Obsah */
.obsah { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
.karta {
  background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--zaobleni);
  box-shadow: var(--stin); padding: 28px 20px;
}
.karta-stred { text-align: center; }
.ikona-velka {
  width: 64px; height: 64px; margin: 0 auto 8px; border-radius: var(--r);
  display: grid; place-items: center; background: var(--primarni-svetla); color: var(--akcent);
}
.ikona-velka svg { width: 34px; height: 34px; }
.perex { font-size: 1.1rem; color: var(--text); margin: 0 0 12px; }
.tlumene { color: var(--text-tlumeny); }
.drobne { color: var(--text-drobny); font-size: .85rem; }
.stitek {
  display: inline-block; margin: 4px 0 8px; padding: 4px 12px; border-radius: var(--r-maly);
  background: var(--akcent-svetla); color: var(--akcent); font-size: .8rem; font-weight: 600;
}

/* Tlačítka – velká, dobře trefitelná prstem v terénu */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--r); border: 1px solid transparent;
  background: var(--tlacitko); color: var(--na-tlacitku); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.tlacitko:hover { background: var(--tlacitko-hover); }
.tlacitko-vedlejsi { background: var(--plocha); color: var(--text); border-color: var(--okraj); }
.tlacitko-vedlejsi:hover { background: var(--pozadi); }
:focus-visible { outline: 3px solid var(--primarni); outline-offset: 2px; }

/* Patička */
.paticka {
  text-align: center; font-size: .8rem; color: var(--text-drobny);
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.paticka a { color: inherit; }

/* Hlavička – akce vpravo */
.hlavicka-akce { display: flex; align-items: center; gap: 10px; }
.hrac {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--okraj); border-radius: var(--r-maly); color: var(--text); text-decoration: none; font-weight: 600;
}
.hrac:hover { background: var(--pozadi); }
.hrac-nick { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--logo); color: var(--na-logu); font-weight: 700; font-size: 1.4rem;
}
.avatar-maly { width: 32px; height: 32px; font-size: .95rem; }
.tlacitko-maly { min-height: 42px; padding: 8px 16px; border-radius: var(--r); }
.ikona { width: 1em; height: 1em; }
.ikona-velka .ikona { width: 34px; height: 34px; }

/* Obsah */
.karta + .karta { margin-top: 16px; }
h2 { font-size: 1.15rem; margin: 0 0 .6em; }
.bez-okraje { margin: 0; }
.odkaz-tichy { color: var(--text-tlumeny); font-size: .9rem; }

/* Zprávy po akci */
.zprava {
  margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r); font-weight: 500;
  background: var(--primarni-svetla); color: var(--text);
}
.zprava-ok { background: var(--uspech-svetla); color: var(--uspech); }
.zprava-chyba { background: var(--chyba-svetla); color: var(--chyba); }

/* Formuláře */
.formular { display: grid; gap: 12px; margin-top: 16px; }
.formular .tlacitko { justify-self: start; }
.pole { display: grid; gap: 6px; }
.pole-popis { font-weight: 600; }
.vstup {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r);
  border: 1.5px solid var(--okraj); background: var(--plocha); color: var(--text); font: inherit; font-size: 1.05rem;
}
.vstup:focus { outline: none; border-color: var(--primarni); box-shadow: 0 0 0 3px var(--primarni-svetla); }
.vstup-ok { border-color: var(--uspech); }
.vstup-chyba { border-color: var(--chyba); }
.pole-stav { min-height: 1.4em; margin: -4px 0 0; font-size: .9rem; color: var(--text-tlumeny); }
.pole-stav-ok { color: var(--uspech); }
.pole-stav-chyba { color: var(--chyba); }
.volby { display: flex; flex-wrap: wrap; gap: 8px; }
.volba {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 14px;
  border: 1.5px solid var(--okraj); border-radius: var(--r); cursor: pointer;
}
.volba:has(input:checked) { border-color: var(--primarni); background: var(--primarni-svetla); }
.volba input { accent-color: var(--primarni); width: 18px; height: 18px; }

/* Přihlášení */
.tlacitko-siroke { width: 100%; }
.oddelovac { display: flex; align-items: center; gap: 12px; margin: 24px 0 4px; color: var(--text-drobny); font-size: .85rem; }
.oddelovac::before, .oddelovac::after { content: ""; flex: 1; height: 1px; background: var(--okraj); }
.vstup-kod { font-size: 1.6rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; max-width: 12ch; }
.radek-akci { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.odkaz-tlacitko {
  padding: 0; border: 0; background: none; font: inherit; color: var(--primarni);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* Profil */
.profil-hlava { display: flex; align-items: center; gap: 14px; }
.udaje { display: grid; gap: 10px; margin: 20px 0 8px; }
.udaje div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--okraj); }
.udaje dt { color: var(--text-tlumeny); font-size: .9rem; }
.udaje dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .obsah { padding-top: 48px; }
  .karta { padding: 40px 36px; }
  h1 { font-size: 2rem; }
}

/* =====================================================================
   H3 – katalog her, detail hry, správa her (barvy jen z proměnných výše)
   ===================================================================== */
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
.text p { margin: 0 0 .8em; }
.drobecky { margin: 0 0 12px; font-size: .95rem; }
.drobecky a { color: var(--text-tlumeny); text-decoration: none; }
.drobecky a:hover { color: var(--primarni); text-decoration: underline; }
.uvod-pozdrav { margin: 0 4px 20px; }
.uvod-pozdrav .tlacitko { margin-top: 4px; }
.zprava-info { background: var(--zluta); color: var(--zluta-text); }
.zprava-info a { color: inherit; font-weight: 600; }

/* Katalog */
.katalog { margin: 24px 0; }
.katalog-nadpis { margin: 0 4px 12px; }
.seznam-her { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.karta-hry {
  display: grid; gap: 6px; align-content: start; padding: 20px; color: var(--text); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.karta-hry:hover { border-color: var(--primarni); }
.karta-hry:active { transform: scale(.995); }
.karta-hry-mesto { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--akcent); font-size: .85rem; font-weight: 600; }
.karta-hry-nazev { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.karta-hry-perex { color: var(--text-tlumeny); }
.cipy { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.cip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-maly);
  background: var(--pozadi); border: 1px solid var(--okraj); color: var(--text-tlumeny); font-size: .82rem; font-weight: 600;
}
.cip-lehka { background: var(--uspech-svetla); color: var(--uspech); border-color: transparent; }
.cip-stredni { background: var(--primarni-svetla); color: var(--primarni); border-color: transparent; }
.cip-narocna { background: var(--akcent-svetla); color: var(--akcent); border-color: transparent; }
article.karta h2 { margin-top: 1.6em; }
.tlacitko[disabled] { opacity: .55; cursor: not-allowed; }
.tlacitko[disabled]:hover { background: var(--primarni); }

/* Správa her */
.hlava-sekce { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.hlava-sekce h1 { margin: 0; }
.seznam-sprava { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.karta-radek { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.karta + .karta-radek, .seznam-sprava .karta + .karta { margin-top: 0; }
.radek-odkaz { flex: 1; min-width: 0; display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.radek-odkaz:hover .radek-nazev { color: var(--primarni); text-decoration: underline; }
.radek-nazev { font-weight: 600; overflow-wrap: anywhere; }
.stav { flex: none; padding: 3px 10px; border-radius: var(--r-maly); font-size: .8rem; font-weight: 600; }
.stav-koncept { background: var(--zluta); color: var(--zluta-text); }
.stav-publikovana { background: var(--uspech-svetla); color: var(--uspech); }
.stav-skryta { background: var(--pozadi); color: var(--text-tlumeny); border: 1px solid var(--okraj); }
.radek-akci form { margin: 0; }
.seznam-stanovist { list-style: none; margin: 0; padding: 0; }
.stanoviste-radek { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--okraj); }
.poradi {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-maly); display: grid; place-items: center;
  background: var(--primarni-svetla); color: var(--primarni); font-weight: 700;
}
.posun { flex: none; display: flex; gap: 6px; }
.posun form { margin: 0; }
.tlacitko-ikona {
  width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--okraj); background: var(--plocha);
  color: var(--text); font: inherit; font-size: 1.1rem; cursor: pointer;
}
.tlacitko-ikona:hover { border-color: var(--primarni); color: var(--primarni); }
.formular h2 { margin: 16px 0 0; }
.formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vstup-text { min-height: 0; line-height: 1.5; resize: vertical; }
.pole-napoveda { color: var(--text-drobny); font-size: .85rem; }
.pole-stav:empty { display: none; }
.povinne { color: var(--chyba); }
.radek-poli { display: grid; gap: 12px; }
.karta-nebezpeci { border-color: var(--chyba-svetla); }
.tlacitko-nebezpeci { background: var(--chyba); color: var(--plocha); }
.tlacitko-nebezpeci:hover { background: var(--chyba); filter: brightness(.92); }
.formular .volba { justify-self: start; }

@media (min-width: 640px) {
  .radek-poli { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   H4 – hraní (barvy jen z proměnných výše)
   ===================================================================== */
.hra-lista { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 8px; }
.hra-nazev { font-weight: 600; color: var(--text-tlumeny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stopky {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-maly);
  background: var(--plocha); border: 1px solid var(--okraj); font-weight: 700; font-variant-numeric: tabular-nums;
}
.prubeh { display: flex; gap: 4px; margin: 0 4px 16px; }
.prubeh-krok { flex: 1; height: 6px; border-radius: var(--r-maly); background: var(--okraj); }
.prubeh-krok.hotovo { background: var(--primarni); }
.prubeh-krok.ted { background: var(--akcent); }
.perex .ikona { vertical-align: -2px; color: var(--akcent); }
.mapa {
  height: 260px; margin: 16px 0 12px; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--okraj); background: var(--pozadi); z-index: 0;
}
.mapa-spendlik span {
  display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--akcent); border: 3px solid var(--plocha); box-shadow: var(--stin);
}
:root.dark .leaflet-tile-pane { filter: brightness(.8) contrast(1.1); }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: .8rem; }
.pribeh { margin: 4px 0 16px; }
.ukol {
  margin: 16px 0 4px; padding: 16px; border-radius: var(--r);
  background: var(--primarni-svetla); border-left: 4px solid var(--primarni);
}
.ukol p { margin: 0 0 .5em; }
.ukol p:last-child { margin-bottom: 0; }
.ukol-nadpis { margin: 0 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primarni); }
.vstup-odpoved { font-size: 1.2rem; }
.vzdat { padding: 0; }
.vzdat summary { padding: 16px 20px; cursor: pointer; color: var(--text-tlumeny); font-weight: 600; }
.vzdat[open] summary { border-bottom: 1px solid var(--okraj); }
.vzdat form { padding: 0 20px 20px; }
.vysledny-cas { font-size: 2.6rem; font-weight: 800; margin: 4px 0; font-variant-numeric: tabular-nums; color: var(--primarni); }
.mezicasy, .seznam-historie, .seznam-rozehranych { list-style: none; margin: 0; padding: 0; }
.mezicasy li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--okraj); }
.mezicas-nazev { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mezicas-cas { font-weight: 700; font-variant-numeric: tabular-nums; }
.seznam-historie li { padding: 10px 0; border-top: 1px solid var(--okraj); }
.seznam-rozehranych { display: grid; gap: 8px; }
.rozehrane { margin-bottom: 8px; }
.mapa-logo { display: block; line-height: 0; }
.mapa-logo img { height: 24px; width: auto; }

/* =====================================================================
   H6 – týmy (barvy jen z proměnných výše)
   ===================================================================== */
.tym { padding: 0; }
.tym > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; font-weight: 700; list-style: none;
}
.tym > summary::-webkit-details-marker { display: none; }
.tym > summary::after { content: "▾"; color: var(--text-tlumeny); margin-left: 4px; }
.tym[open] > summary::after { content: "▴"; }
.tym[open] > summary { border-bottom: 1px solid var(--okraj); }
.tym > summary .cip { margin-left: auto; }
.tym-nazev { overflow-wrap: anywhere; }
.tym-obsah { padding: 8px 20px 20px; }
.tym-clenove { list-style: none; margin: 0; padding: 0; }
.tym-clenove li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--okraj); position: relative; }
.tym-nick { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tym-akce > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--okraj); border-radius: var(--r); font-weight: 700;
}
.tym-akce > summary::-webkit-details-marker { display: none; }
.tym-akce-menu {
  position: absolute; right: 0; top: 52px; z-index: 5; display: grid; gap: 8px; padding: 12px;
  background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--r); box-shadow: var(--stin);
}
.tym-akce-menu form { margin: 0; }
.pozvanka { margin-top: 16px; text-align: center; }
.pozvanka h3 { margin-top: 0; }
.kod-tymu {
  margin: 12px 0; font-size: 2rem; font-weight: 800; letter-spacing: .15em;
  font-variant-numeric: tabular-nums; color: var(--primarni);
}
.qr-obal { width: min(220px, 70vw); margin: 0 auto 8px; padding: 8px; border-radius: var(--r); background: var(--qr-pozadi); }
.qr-obal .qr { display: block; width: 100%; height: auto; }
.tym-prejmenovat { margin-top: 16px; }
.tym-sestava { margin: 4px 0 0; }
.tym-zmena { margin: 0 4px 12px; }

/* H6.1 – volba sólo/tým, čekárna, menu týmu v liště */
.volby-hrani { display: grid; gap: 10px; margin: 16px 0 8px; }
.volby-hrani form { margin: 0; }
.cekarna-start { margin-top: 20px; }
.cekarna-ceka { margin: 20px 0 0; }
.hra-lista { position: relative; }
.hra-nazev { flex: 1; min-width: 0; }
.tym-menu { flex: none; }
.tym-menu > summary { list-style: none; }
.tym-menu > summary::-webkit-details-marker { display: none; }
.tym-menu-tlacitko {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 36px; border-radius: var(--r-maly); cursor: pointer;
  background: var(--plocha); border: 1px solid var(--okraj); font-weight: 700; font-size: .9rem; color: var(--text);
}
.tym-menu[open] .tym-menu-tlacitko { border-color: var(--primarni); color: var(--primarni); }
.tym-menu-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 75vh; overflow: auto;
  padding: 16px; background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--zaobleni); box-shadow: var(--stin);
}
.tym-menu-nadpis { margin: 0 0 4px; font-weight: 700; }
.tym-sekce { border-top: 1px solid var(--okraj); padding: 4px 0; }
.tym-sekce > summary { display: flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.tym-sekce .pozvanka { margin-top: 4px; }
.tym-sekce .formular { margin-top: 4px; }
.tym-clenove li:last-child { border-bottom: 0; }

/* H7 – pauza, žebříček, připojení kódem */
.pripojit-kodem { margin: 0 0 8px; }
.stopky-stoji { color: var(--akcent); border-color: var(--akcent); }
.umisteni { margin: 8px 0 0; font-size: 1.2rem; font-weight: 700; }
.zebricek { list-style: none; margin: 0 0 8px; padding: 0; }
.zebricek li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--okraj); }
.zebricek-tym { flex: 1; min-width: 0; display: grid; gap: 2px; }
.medaile-1 .poradi { background: var(--akcent-svetla); color: var(--akcent); }

/* =====================================================================
   H8 – GPS navigace (barvy jen z proměnných výše)
   ===================================================================== */
.nav { margin: 12px 0 16px; }
.nav-stav { margin: 8px 0 0; font-size: .9rem; color: var(--text-tlumeny); min-height: 1.4em; }
.nav-stav:empty { display: none; }
.nav-povoleni {
  margin: 0 0 12px; padding: 16px; border-radius: var(--r);
  background: var(--primarni-svetla); border: 1px solid var(--okraj);
}
.nav-povoleni p { margin: 0 0 12px; }
.nav-info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--r); background: var(--pozadi); }
.nav-info .ikona { flex: none; width: 22px; height: 22px; color: var(--akcent); margin-top: 1px; }
.nav-vzdalenost { margin: 0 0 8px; font-weight: 600; }
.nav-vzdalenost:empty { display: none; }
.nav-zaloha { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--okraj); }
.nav-zaloha p { margin: 0 0 8px; }
.nav-bez, .nav-zpet { margin: 16px 0 0; text-align: center; font-size: .9rem; }
.nav-bez .odkaz-tlacitko, .nav-zpet .odkaz-tlacitko { color: var(--text-tlumeny); }

/* Mapa: poloha hráče */
.mapa-ja { fill: var(--pozice); fill-opacity: 1; stroke: var(--plocha); stroke-width: 3; }
.mapa-ja-presnost { fill: var(--pozice); fill-opacity: .12; stroke: var(--pozice); stroke-opacity: .35; stroke-width: 1; }

/* Horko–zima: velká plaketa s pásmem + „teploměr“ */
.horko {
  display: grid; justify-items: center; gap: 8px; padding: 24px 16px; border-radius: var(--zaobleni);
  background: var(--pozadi); border: 2px solid var(--okraj); text-align: center; transition: background .4s, border-color .4s;
}
.horko-ikona { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--plocha); color: var(--text-tlumeny); }
.horko-ikona .ikona { width: 32px; height: 32px; }
.horko-ohen { display: none; }
.horko-text { font-size: 1.8rem; line-height: 1.2; }
.horko-teplomer { display: flex; gap: 4px; width: min(240px, 80%); }
.horko-teplomer span { flex: 1; height: 8px; border-radius: var(--r-maly); background: var(--okraj); transition: background .4s; }
.horko[data-pasmo="ocean"], .horko[data-pasmo="sama_voda"], .horko[data-pasmo="voda"] { background: var(--voda-svetla); border-color: var(--voda); }
.horko[data-pasmo="ocean"] .horko-ikona, .horko[data-pasmo="sama_voda"] .horko-ikona, .horko[data-pasmo="voda"] .horko-ikona { color: var(--voda); }
.horko[data-pasmo="ocean"] .horko-text, .horko[data-pasmo="sama_voda"] .horko-text, .horko[data-pasmo="voda"] .horko-text { color: var(--voda); }
.horko[data-pasmo="prihoriva"], .horko[data-pasmo="skoro_hori"], .horko[data-pasmo="hori"] { background: var(--ohen-svetla); border-color: var(--ohen); }
.horko[data-pasmo="prihoriva"] .horko-voda, .horko[data-pasmo="skoro_hori"] .horko-voda, .horko[data-pasmo="hori"] .horko-voda { display: none; }
.horko[data-pasmo="prihoriva"] .horko-ohen, .horko[data-pasmo="skoro_hori"] .horko-ohen, .horko[data-pasmo="hori"] .horko-ohen { display: block; color: var(--ohen); }
.horko[data-pasmo="prihoriva"] .horko-text, .horko[data-pasmo="skoro_hori"] .horko-text, .horko[data-pasmo="hori"] .horko-text { color: var(--ohen); }
.horko[data-pasmo="hori"] .horko-text { font-size: 2.4rem; }
.horko[data-pasmo="sama_voda"] .horko-teplomer span:nth-child(-n+1),
.horko[data-pasmo="voda"] .horko-teplomer span:nth-child(-n+1) { background: var(--voda); }
.horko[data-pasmo="prihoriva"] .horko-teplomer span:nth-child(-n+3) { background: var(--ohen); }
.horko[data-pasmo="skoro_hori"] .horko-teplomer span:nth-child(-n+4) { background: var(--ohen); }
.horko[data-pasmo="hori"] .horko-teplomer span { background: var(--ohen); }
.horko[data-pasmo="voda"] .horko-teplomer span:nth-child(2) { background: var(--voda); }
@media (prefers-reduced-motion: no-preference) {
  .horko[data-pasmo="hori"] .horko-ikona { animation: hori 1.2s ease-in-out infinite; }
}
@keyframes hori { 50% { transform: scale(1.12); } }

/* Kompas */
.kompas { display: grid; place-items: center; margin: 4px 0 8px; }
.kompas-ruzice { width: min(240px, 70vw); height: auto; }
.kompas-kruh { fill: var(--pozadi); stroke: var(--okraj); stroke-width: 3; }
.kompas-sever { fill: var(--chyba); }
.kompas-s { fill: var(--text-tlumeny); font: 700 14px system-ui, sans-serif; }
.kompas-sipka { fill: var(--akcent); stroke: var(--plocha); stroke-width: 3; stroke-linejoin: round; }
.kompas-stred { fill: var(--plocha); stroke: var(--akcent); stroke-width: 3; }
.kompas-udaje { margin: 0 0 4px; text-align: center; font-size: 1.1rem; }
.kompas-udaje strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.kompas-bod { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 4px; }
[data-kompas-zdroj] { text-align: center; margin: 0 0 8px; }
.nav-compass [data-kompas-zapnout] { display: flex; margin: 0 auto 8px; }

/* Správa: volby navigace s popisem */
.volby-pod-sebou { flex-direction: column; }
.volba-s-popisem { align-items: flex-start; }
.volba-s-popisem input { margin-top: 3px; flex: none; }
.volba-s-popisem > span { display: grid; gap: 2px; }

/* =====================================================================
   H9 – odpovědní moduly (barvy jen z proměnných výše)
   ===================================================================== */
/* Číselný zámek */
.zamek { border: 0; margin: 0; padding: 0; min-width: 0; }
.zamek-kotouce {                     /* H23: kotouče vedle sebe, 3–6 podle délky kódu, vejdou se i na úzký telefon */
  display: grid; grid-template-columns: repeat(4, minmax(0, 58px)); justify-content: center; gap: 8px; margin: 10px 0 4px; padding: 12px 10px;
  border-radius: var(--zaobleni); background: var(--pozadi); border: 1px solid var(--okraj);
}
.zamek-3 { grid-template-columns: repeat(3, minmax(0, 58px)); }
.zamek-5 { grid-template-columns: repeat(5, minmax(0, 54px)); gap: 6px; }
.zamek-6 { grid-template-columns: repeat(6, minmax(0, 50px)); gap: 5px; padding-inline: 6px; }
.kotouc {
  display: grid; justify-items: stretch; gap: 2px; padding: 4px 0; border-radius: var(--r); background: var(--plocha);
  box-shadow: var(--stin-kotouc); touch-action: none; user-select: none; -webkit-user-select: none;
}
.kotouc-cislo {
  width: 100%; height: 64px; box-sizing: border-box; border: 2px solid var(--okraj); border-radius: var(--r); background: var(--plocha); color: var(--text);
  font: 800 2.1rem/1 system-ui, sans-serif; text-align: center; font-variant-numeric: tabular-nums; caret-color: transparent; padding: 0;
}
.kotouc-cislo:focus { outline: none; border-color: var(--primarni); }
.kotouc-soused {                     /* sousední číslice nad a pod aktuální – klepnutím se na ni kotouč otočí */
  height: 38px; border: 0; background: none; color: var(--text-drobny); font: 700 1.25rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; cursor: pointer; border-radius: var(--r);
}
.kotouc-soused:active, .kotouc-soused:focus-visible { background: var(--primarni-svetla); color: var(--primarni); }
.kotouc-tazeny .kotouc-cislo { border-color: var(--primarni); }
@media (prefers-reduced-motion: no-preference) {
  .kotouc-toc { animation: kotouc .18s ease-out; }
}
@keyframes kotouc { from { transform: translateY(-6px); opacity: .5; } }

/* Řazení dlaždic */
.dlazdice { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: dl; }
.dlazdice-polozka {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 4px; border-radius: var(--r);
  background: var(--plocha); border: 1.5px solid var(--okraj); counter-increment: dl;
}
.dlazdice-polozka::before {
  content: counter(dl); flex: none; width: 28px; height: 28px; border-radius: var(--r-maly); display: grid; place-items: center;
  background: var(--primarni-svetla); color: var(--primarni); font-weight: 700; font-size: .9rem; margin-left: 4px;
}
.dlazdice-uchyt { display: none; }
.dlazdice-js .dlazdice-uchyt {
  display: grid; place-items: center; flex: none; width: 36px; height: 44px; margin-left: -6px; cursor: grab;
  color: var(--text-drobny); font-size: 1.3rem; touch-action: none; user-select: none;
}
.dlazdice-text { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dlazdice-posun { flex: none; display: flex; gap: 4px; }
.dlazdice-posun .tlacitko-ikona { width: 38px; height: 38px; }
.dlazdice-tazena { border-color: var(--primarni); box-shadow: var(--stin); background: var(--primarni-svetla); }
.dlazdice-polozka:first-child [data-posun="-1"], .dlazdice-polozka:last-child [data-posun="1"] { visibility: hidden; }

/* Spojování dvojic */
.parovani { display: grid; gap: 10px; }
.par { display: grid; gap: 6px; }
.par-leva { font-weight: 600; }
.parovani-deska { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.parovani-sloupec { display: grid; gap: 8px; align-content: start; }
.par-dlazdice {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border-radius: var(--r); text-align: left;
  background: var(--plocha); border: 1.5px solid var(--okraj); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.par-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.par-cislo {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-maly); display: grid; place-items: center;
  font-size: .85rem; font-weight: 800; border: 1.5px dashed var(--okraj); color: transparent;
}
.par-spojeno { border-color: var(--primarni); }
.par-spojeno .par-cislo { background: var(--primarni); border: 0; color: var(--na-primarni); }
.par-aktivni { border-color: var(--akcent); background: var(--akcent-svetla); box-shadow: 0 0 0 3px var(--akcent-svetla); }

/* Čtečka QR */
.qr-ctecka { display: grid; gap: 8px; }
.qr-ctecka .pole-stav:empty { display: none; }
.qr-video { position: relative; border-radius: var(--r); overflow: hidden; background: var(--text); aspect-ratio: 1; max-height: 60vh; }
.qr-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-ramecek { position: absolute; inset: 18%; border: 3px solid var(--na-logu); border-radius: var(--r); box-shadow: 0 0 0 999px var(--ztmaveni); }
.qr-ctecka [data-qr-vypnout] { justify-self: center; }

/* Správa: typy odpovědí ve dvou sloupcích (na širším displeji), QR k tisku */
.radek-poli-2 { display: grid; gap: 12px; }
.qr-seznam { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 12px; }
.qr-tisk { margin: 0; text-align: center; }
.qr-tisk figcaption { display: grid; gap: 2px; margin-top: 4px; }
.qr-tisk figcaption strong { font-size: 1.2rem; letter-spacing: .05em; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .volby-dve { display: grid; grid-template-columns: 1fr 1fr; }
  .radek-poli-2 { grid-template-columns: auto 1fr; align-items: start; }
}
@media print {
  .hlavicka, .paticka, .drobecky, .pruh-test, .zprava, main > .karta:not(.tisk-qr), .tisk-qr .hlava-sekce, .tisk-qr > p { display: none !important; }
  .tisk-qr { border: 0; box-shadow: none; padding: 0; }
  .qr-tisk { break-inside: avoid; padding: 16px; border: 1px dashed var(--okraj); }
}

/* =====================================================================
   H10 – ABCD, nápravné úkoly (barvy jen z proměnných výše)
   ===================================================================== */
.abcd { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.abcd-moznost {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: var(--r); text-align: left;
  background: var(--plocha); border: 1.5px solid var(--okraj); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.abcd-moznost:hover:not([disabled]) { border-color: var(--primarni); background: var(--primarni-svetla); }
.abcd-pismeno {
  flex: none; width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--primarni-svetla); color: var(--primarni); font-weight: 800;
}
.abcd-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.abcd-spatne { border-color: var(--chyba); }
.abcd-spatne .abcd-pismeno { background: var(--chyba-svetla); color: var(--chyba); }
.abcd[disabled] .abcd-moznost, .abcd-moznost[disabled] { opacity: .55; cursor: not-allowed; }
.stitek-chyba { background: var(--chyba-svetla); color: var(--chyba); }
.naprava { border-color: var(--chyba); }
.priklady { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.priklad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r); background: var(--pozadi); }
.priklad-zadani { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.priklad-vysledek { width: 9em; min-height: 46px; font-size: 1.15rem; }
.priklad-spatne { background: var(--chyba-svetla); }
.zlomek { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .85em; line-height: 1.1; margin: 0 2px; }
.zlomek-c { border-bottom: 1.5px solid currentColor; padding: 0 2px; }
.zlomek-j { padding: 0 2px; }
.vypocty { display: grid; gap: 8px; }
.vypocet {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--okraj); font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
.vypocet input { width: 20px; height: 20px; accent-color: var(--chyba); flex: none; }
.vypocet:has(input:checked) { border-color: var(--chyba); background: var(--chyba-svetla); }
.veta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 1.15rem; line-height: 1.3; }
.slovo { cursor: pointer; }
.slovo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slovo span { display: inline-block; padding: 6px 10px; border-radius: var(--r); border: 1.5px solid var(--okraj); background: var(--plocha); }
.slovo input:checked + span { border-color: var(--chyba); background: var(--chyba-svetla); color: var(--chyba); text-decoration: line-through; }
.slovo input:focus-visible + span { outline: 3px solid var(--primarni); outline-offset: 2px; }
.skupina-poli { display: grid; gap: 12px; }
.radek-poli-2c { display: grid; gap: 12px; }
.vstup-kratky { max-width: 22em; }
.ukazka-prikladu { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .radek-poli-2c { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   H11 – obtížnost hvězdičkami, nápovědy, epilog, stav tlačítek (barvy jen z proměnných výše)
   ===================================================================== */
.hvezdy { display: inline-flex; gap: 1px; letter-spacing: 0; line-height: 1; }
.hvezda { color: var(--okraj); font-size: 1.05em; }
.hvezda-plna { color: var(--akcent); }
.hvezdy-text { margin-left: 6px; }
.cip-obtiznost { gap: 0; }

/* Neaktivní tlačítko je šedé, „můžete pokračovat“ zelené */
.tlacitko[disabled], .tlacitko[disabled]:hover { background: var(--tlacitko-neaktivni); color: var(--na-neaktivni); border-color: transparent; opacity: 1; }
.tlacitko-hotovo:not([disabled]) { background: var(--tlacitko-hotovo); color: var(--na-hotovo); box-shadow: 0 0 0 4px var(--uspech-svetla); }
.tlacitko-hotovo:not([disabled]):hover { background: var(--tlacitko-hotovo-hover); }
@media (prefers-reduced-motion: no-preference) {
  .tlacitko-hotovo:not([disabled]) { animation: hotovo 1.6s ease-in-out 3; }
}
@keyframes hotovo { 50% { box-shadow: 0 0 0 10px var(--uspech-svetla); } }

/* Horko–zima: vzdálenost v pásmech Přihořívá / Skoro hoří */
.horko-vzdalenost { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ohen); }

/* Kompas: průchozí body a jejich projití */
.kompas-trasa { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; margin: 4px 0 6px; padding: 0; }
.kompas-trasa li { display: flex; align-items: center; gap: 4px; }
.kompas-trasa li + li::before { content: ""; width: 14px; height: 2px; background: var(--okraj); }
.kompas-znacka {
  width: 30px; height: 30px; border-radius: var(--r-maly); display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  border: 2px solid var(--okraj); color: var(--text-drobny); background: var(--plocha);
}
.kompas-znacka .ikona { width: 16px; height: 16px; }
.kompas-prosly .kompas-znacka { background: var(--uspech); border-color: var(--uspech); color: var(--plocha); }
.kompas-ted .kompas-znacka { border-color: var(--akcent); color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-svetla); }
.kompas-popis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ABCD: trest za špatnou odpověď předem */
.abcd-trest { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 10px 12px; border-radius: var(--r);
  background: var(--chyba-svetla); color: var(--chyba); font-size: .92rem; }
.abcd-trest .ikona { flex: none; margin-top: 3px; }

/* Epilog po dohrání */
.epilog { margin: 20px 0 0; padding: 16px; border-radius: var(--r); text-align: left; background: var(--akcent-svetla); border-left: 4px solid var(--akcent); }
.epilog .ukol-nadpis { color: var(--akcent); }
.epilog p:last-child { margin-bottom: 0; }

/* Nápovědy */
.napovedy { display: grid; gap: 10px; margin: 12px 0 4px; }
.napoveda { padding: 12px 14px; border-radius: var(--r); background: var(--zluta); color: var(--zluta-text); }
.napoveda p { margin: 0 0 .4em; }
.napoveda p:last-child { margin-bottom: 0; }
.napoveda-nadpis { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.napoveda-nadpis .drobne { color: inherit; font-weight: 500; }
.napoveda-vzit { border: 1.5px dashed var(--okraj); border-radius: var(--r); }
.napoveda-vzit > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.napoveda-vzit > summary::-webkit-details-marker { display: none; }
.napoveda-vzit[open] > summary { border-bottom: 1px dashed var(--okraj); }
.napoveda-vzit > p, .napoveda-vzit > form { margin: 0; padding: 10px 14px 14px; }
.napoveda-form { display: grid; gap: 10px; justify-items: start; }
.napovedy .ikona { width: 1.15em; height: 1.15em; color: var(--akcent); flex: none; }
.napoveda .ikona { color: inherit; }
.napovedy-sprava { display: grid; gap: 12px; }
.napoveda-radek { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); border: 1px solid var(--okraj); }
.napoveda-radek .radek-poli { grid-template-columns: 1fr 1fr; }
.napoveda-radek .pole-popis { font-size: .9rem; }

/* =====================================================================
   H12 – QR kód stanoviště, minihry k nápovědám (barvy jen z proměnných výše)
   ===================================================================== */
.pole-s-tlacitkem { display: grid; gap: 6px; }
.pole-s-tlacitkem > .tlacitko { justify-self: start; }
/* Minihry: SVG desky */
.minihra { display: grid; gap: 8px; justify-items: center; margin: 4px 0; }
.mh-svg { display: block; touch-action: none; user-select: none; }
.mh-hraci { width: min(100%, 360px); height: auto; }
.mh-pole { fill: var(--mh-pole); stroke: var(--mh-mrizka); stroke-width: .4; }
.mh-cil { fill: var(--mh-pole); stroke: var(--mh-mrizka); stroke-width: .5; }
.mh-bod { stroke: var(--plocha); stroke-width: .6; }
.mh-cislo { fill: var(--mh-text); font: 700 4px system-ui, sans-serif; pointer-events: none; }
.mh-vypln { opacity: .22; }
.mh-cara { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mh-kus { stroke: var(--plocha); stroke-width: .8; }
.mh-stav { margin: 0; text-align: center; }
.mh-ovladani { display: flex; gap: 8px; justify-content: center; }
.mh-zasobnik { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mh-zasobnik-dilek {
  display: grid; place-items: center; min-width: 56px; min-height: 56px; padding: 6px; border-radius: var(--r); cursor: pointer;
  background: var(--plocha); border: 1.5px solid var(--okraj);
}
.mh-vybrany { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-svetla); }
.minihra-nahled { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r); background: var(--pozadi); }
.minihra-nahled > div { display: grid; gap: 8px; justify-items: start; flex: 1; min-width: 160px; }
.mh-nahled { width: 140px; height: auto; }
.mh-dilky-nahled { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.mh-nahled-tetris, .mh-dilek { max-width: 100%; height: auto; }   /* #037: velikost dává width/height podle počtu políček */
.napoveda-form .parovani-deska { width: 100%; }
.radek-poli-3 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.radek-poli-3 > :last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .radek-poli-3 { grid-template-columns: 1fr 1fr 2fr; } .radek-poli-3 > :last-child { grid-column: auto; } }
.mh-b1 { fill: var(--mh-1); stroke: var(--mh-1); }
.mh-b2 { fill: var(--mh-2); stroke: var(--mh-2); }
.mh-b3 { fill: var(--mh-3); stroke: var(--mh-3); }
.mh-b4 { fill: var(--mh-4); stroke: var(--mh-4); }
.mh-b5 { fill: var(--mh-5); stroke: var(--mh-5); }
.mh-b6 { fill: var(--mh-6); stroke: var(--mh-6); }
.mh-b7 { fill: var(--mh-7); stroke: var(--mh-7); }
.mh-b8 { fill: var(--mh-8); stroke: var(--mh-8); }
.mh-b9 { fill: var(--mh-9); stroke: var(--mh-9); }
.mh-bod.mh-b1, .mh-bod.mh-b2, .mh-bod.mh-b3, .mh-bod.mh-b4, .mh-bod.mh-b5, .mh-bod.mh-b6, .mh-bod.mh-b7, .mh-bod.mh-b8, .mh-bod.mh-b9 { stroke: var(--plocha); }
.mh-cara.mh-b1, .mh-cara.mh-b2, .mh-cara.mh-b3, .mh-cara.mh-b4, .mh-cara.mh-b5, .mh-cara.mh-b6, .mh-cara.mh-b7, .mh-cara.mh-b8, .mh-cara.mh-b9 { fill: none; }
.mh-vypln { stroke: none !important; }
.mh-kus.mh-b1, .mh-kus.mh-b2, .mh-kus.mh-b3, .mh-kus.mh-b4, .mh-kus.mh-b5, .mh-kus.mh-b6, .mh-kus.mh-b7, .mh-kus.mh-b8, .mh-kus.mh-b9 { stroke: var(--plocha); }

/* =====================================================================
   H13 – body a časový limit (barvy jen z proměnných výše)
   ===================================================================== */
.skore {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-maly);
  background: var(--akcent-svetla); color: var(--akcent); font-weight: 700; font-variant-numeric: tabular-nums;
}
.stopky-malo { color: var(--chyba); border-color: var(--chyba); background: var(--chyba-svetla); }
.vysledny-jednotka { font-size: 1.1rem; font-weight: 600; color: var(--text-tlumeny); }
.rozpis-bodu { list-style: none; margin: 8px auto 12px; padding: 0; max-width: 320px; text-align: left; }
.rozpis-bodu li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--okraj); }
.rozpis-bodu strong { font-variant-numeric: tabular-nums; }
.body-stanoviste { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r);
  background: var(--akcent-svetla); color: var(--text); font-size: .92rem; }
.body-stanoviste .ikona { flex: none; margin-top: 3px; color: var(--akcent); }
.hra-lista { flex-wrap: wrap; }
/* Výsledky ve správě */
.tabulka-obal { overflow-x: auto; margin: 0 -4px; }
.tabulka { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tabulka th, .tabulka td { padding: 8px 10px; border-bottom: 1px solid var(--okraj); text-align: right; white-space: nowrap; }
.tabulka th:first-child, .tabulka td:first-child { text-align: left; white-space: normal; min-width: 9em; }
.tabulka thead th { color: var(--text-tlumeny); font-weight: 600; vertical-align: bottom; }
.tabulka .nejlepsi { color: var(--uspech); font-weight: 700; }
.hra-lista:has(.skore) .hra-nazev { flex-basis: 100%; }
.legenda-stanovist { margin: 12px 0 0; padding: 0; list-style: none; }

/* =====================================================================
   H14 – výběr cesty, volné pořadí, bonusová stanoviště (barvy jen z proměnných výše)
   ===================================================================== */
.ikona-velka-vlevo { margin: 0 0 8px; }
.volby-cesty { display: grid; gap: 10px; margin-top: 16px; }
.volby-cesty form { margin: 0; }
.volba-cesty {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; min-height: 56px;
  border: 1.5px solid var(--primarni); border-radius: var(--r); background: var(--primarni-svetla); color: var(--text);
  font: inherit; font-size: 1.05rem; font-weight: 600; text-align: left; cursor: pointer;
}
.volba-cesty:hover, .volba-cesty:focus-visible { background: var(--primarni); color: var(--na-primarni); }
.volba-cesty:hover .drobne, .volba-cesty:focus-visible .drobne { color: inherit; }
.volba-cesty-text { flex: 1; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.volba-cesty-text .drobne { font-weight: 400; }
.volba-cesty-sipka { flex: none; transform: rotate(90deg); color: var(--primarni); }
.volba-cesty:hover .volba-cesty-sipka, .volba-cesty:focus-visible .volba-cesty-sipka { color: inherit; }
.nadpis-s-ikonou { display: flex; align-items: center; gap: 8px; }
.nadpis-s-ikonou .ikona { color: var(--akcent); }
.bonusy { list-style: none; margin: 8px 0 0; padding: 0; }
.bonus { border-top: 1px solid var(--okraj); }
.bonus-odkaz, .bonus-hotovo { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--text); text-decoration: none; }
.bonus-odkaz:hover strong { color: var(--primarni); text-decoration: underline; }
.bonus-nazev { flex: 1; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bonus-sipka { flex: none; transform: rotate(90deg); color: var(--primarni); }
.bonus-stav { flex: none; width: 28px; height: 28px; border-radius: var(--r-maly); display: grid; place-items: center;
  background: var(--uspech-svetla); color: var(--uspech); font-weight: 700; }
.bonus-hotovo strong { color: var(--text-tlumeny); }
.mezicasy .poradi .ikona { width: 16px; height: 16px; }
.stitky-trasy { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.stitek-trasy { display: inline-block; padding: 1px 8px; border-radius: var(--r-maly); font-size: .8rem; font-weight: 600;
  background: var(--primarni-svetla); color: var(--primarni); }
.stitek-trasy.stitek-bonus { background: var(--akcent-svetla); color: var(--akcent); }

/* =====================================================================
   H15 – vizuální editor trasy (barvy jen z proměnných výše)
   ===================================================================== */
.obsah-siroka { max-width: none; padding-left: 16px; padding-right: 16px; }
.ed-odkaz .ikona { width: 18px; height: 18px; }
.editor { display: grid; gap: 12px; }
.ed-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ed-titulek { flex: 1; min-width: 12em; display: grid; gap: 2px; }
.ed-nadpis { margin: 0; font-size: 1rem; line-height: 1.3; }   /* H21: nadpis stránky editoru (přístupnost) */
.ed-stav-chyba { color: var(--chyba); }
.ed-stav-info { color: var(--akcent); }
.ed-akce { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-telo { display: grid; grid-template-columns: 1fr 340px; gap: 12px; min-height: 480px; height: calc(100vh - 210px); }
.ed-platno-obal { position: relative; min-height: 0; border: 1px solid var(--okraj); border-radius: var(--zaobleni); background: var(--plocha); overflow: hidden; }
.ed-platno { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.ed-platno:active { cursor: grabbing; }
.ed-panel { overflow-y: auto; border: 1px solid var(--okraj); border-radius: var(--zaobleni); background: var(--plocha); box-shadow: var(--stin);
  padding: 18px 16px; position: relative; display: grid; gap: 10px; align-content: start; }
.ed-panel h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.ed-panel h3 { margin: 8px 0 0; font-size: 1rem; }
.ed-panel .pole { margin: 0; }
.ed-panel .stitek { margin: 0; justify-self: start; }
.ed-zavrit { position: absolute; top: 8px; right: 8px; }
.ed-zoom { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; }
.ed-zoom .tlacitko-ikona { background: var(--plocha); border: 1px solid var(--okraj); }
.ed-kontrola { position: absolute; left: 10px; bottom: 10px; max-width: min(460px, calc(100% - 20px)); }
.ed-kontrola-box { background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--r); box-shadow: var(--stin); font-size: .88rem; }
.ed-kontrola-box > summary { padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--uspech); }
.ed-kontrola-box.ed-ma-chyby > summary { color: var(--chyba); }
.ed-kontrola-box ul { margin: 0; padding: 0 12px 10px 28px; max-height: 220px; overflow-y: auto; }
.ed-kontrola-box li { margin: 4px 0; }
.ed-k-chyba, .ed-k-chyby li { color: var(--chyba); }
.ed-k-upoz { color: var(--zluta-text); }
.ed-kontrola-box .odkaz-tlacitko { text-align: left; color: inherit; }
.ed-problemy { margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--r); background: var(--chyba-svetla); color: var(--chyba); font-size: .88rem; }
.ed-vetve { display: grid; gap: 8px; }
.ed-vetev { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.ed-vetev .vstup { min-width: 0; padding-left: 10px; padding-right: 10px; }
.ed-smazat { justify-self: start; margin-top: 8px; }
.ed-smazane { margin: 0; padding-left: 1.2em; }
.ed-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-legenda li { display: flex; align-items: center; gap: 8px; }
.ed-leg { width: 34px; height: 0; border-top: 2px dashed var(--text-drobny); }
.ed-leg-skok { border-top-style: solid; border-color: var(--text); }
.ed-leg-volba { border-top-style: solid; border-color: var(--primarni); }
.ed-leg-odpoved { border-top-style: solid; border-color: var(--akcent); }
.ed-dialog { border: 1px solid var(--okraj); border-radius: var(--zaobleni); background: var(--plocha); color: var(--text); padding: 20px; max-width: min(480px, 92vw); box-shadow: var(--stin); }
.ed-dialog::backdrop { background: var(--ztmaveni); }
.ed-dialog h2 { margin-top: 0; }
.ed-k-seznam { padding-left: 1.2em; }
/* SVG (skupiny mají barvy miniher od 2. – červená by vypadala jako chyba) */
.ed-uzel { cursor: pointer; }
.ed-uzel-rect { fill: var(--plocha); stroke: var(--okraj); stroke-width: 1.5; }
.ed-druh-trasa .ed-uzel-rect { stroke: var(--primarni); }
.ed-druh-bonus .ed-uzel-rect { fill: var(--akcent-svetla); stroke: var(--akcent); }
.ed-novy .ed-uzel-rect { stroke-dasharray: 6 4; }
.ed-vybrany .ed-uzel-rect { stroke-width: 3.5; }
.ed-uzel:focus { outline: none; }
.ed-uzel:focus-visible .ed-uzel-rect { stroke-width: 3.5; stroke: var(--text); }
.ed-chyba .ed-uzel-rect { stroke: var(--chyba); }
.ed-cislo { fill: var(--primarni-svetla); stroke: var(--primarni); }
.ed-druh-bonus .ed-cislo { fill: var(--plocha); stroke: var(--akcent); }
.ed-cislo-text { fill: var(--primarni); font-weight: 700; font-size: 13px; }
.ed-druh-bonus .ed-cislo-text { fill: var(--akcent); }
.ed-nazev { fill: var(--text); font-weight: 700; font-size: 14px; }
.ed-pod { fill: var(--text-drobny); font-size: 12px; }
.ed-znacka { fill: var(--akcent); }
.ed-chyba .ed-znacka { fill: var(--chyba); }
.ed-znacka-text { fill: var(--plocha); font-weight: 800; font-size: 12px; }
.ed-port { cursor: crosshair; }
.ed-port circle { fill: var(--plocha); stroke: var(--primarni); stroke-width: 2; }
.ed-port path { stroke: var(--primarni); stroke-width: 2; }
.ed-port:hover circle { fill: var(--primarni); }
.ed-port:hover path { stroke: var(--na-primarni); }
.ed-koncovy rect { fill: var(--primarni); }
.ed-koncovy text { fill: var(--na-primarni); font-weight: 700; font-size: 14px; }
.ed-konec rect { fill: var(--text); }
.ed-konec text { fill: var(--plocha); }
.ed-hrana { fill: none; stroke-width: 2; stroke: var(--text-drobny); }
.ed-h-poradi { stroke-dasharray: 6 5; }
.ed-h-skok { stroke: var(--text); }
.ed-h-volba { stroke: var(--primarni); stroke-width: 2.5; }
.ed-h-odpoved { stroke: var(--akcent); stroke-width: 2.5; }
.ed-hrot { fill: var(--text-drobny); }
.ed-hrot-sipka-skok { fill: var(--text); }
.ed-hrot-sipka-volba { fill: var(--primarni); }
.ed-hrot-sipka-odpoved { fill: var(--akcent); }
.ed-popis rect { fill: var(--plocha); stroke: var(--okraj); }
.ed-popis text { fill: var(--text); font-size: 12px; font-weight: 600; }
.ed-popis-volba text { fill: var(--primarni); }
.ed-popis-odpoved text { fill: var(--akcent); }
.ed-tazena { fill: none; stroke: var(--primarni); stroke-width: 2.5; stroke-dasharray: 4 4; pointer-events: none; }
.ed-skupina rect { fill-opacity: .07; stroke-width: 2; stroke-dasharray: 8 5; }
.ed-skupina-popis { font-size: 12px; font-weight: 700; }
.ed-sk-1 rect, .ed-skp-1 { fill: var(--mh-2); stroke: var(--mh-2); } .ed-sk-1 text { fill: var(--mh-2); }
.ed-sk-2 rect, .ed-skp-2 { fill: var(--mh-3); stroke: var(--mh-3); } .ed-sk-2 text { fill: var(--mh-3); }
.ed-sk-3 rect, .ed-skp-3 { fill: var(--mh-4); stroke: var(--mh-4); } .ed-sk-3 text { fill: var(--mh-4); }
.ed-sk-4 rect, .ed-skp-4 { fill: var(--mh-5); stroke: var(--mh-5); } .ed-sk-4 text { fill: var(--mh-5); }
.ed-sk-5 rect, .ed-skp-5 { fill: var(--mh-6); stroke: var(--mh-6); } .ed-sk-5 text { fill: var(--mh-6); }
.ed-skp-1, .ed-skp-2, .ed-skp-3, .ed-skp-4, .ed-skp-5 { stroke: none; }
@media (max-width: 1023px) {
  .ed-telo { grid-template-columns: 1fr; height: auto; }
  .ed-platno-obal { height: 70vh; }
}
.ed-panel p { margin: 0; }
.ed-panel fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ed-panel .radek-akci { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-panel > .tlacitko { justify-self: start; }
.ed-panel .volba { padding-top: 8px; padding-bottom: 8px; }

/* =====================================================================
   H16 – tvorba her, schvalování, mapa her (barvy jen z proměnných výše)
   ===================================================================== */
.stav-ke_schvaleni { background: var(--akcent-svetla); color: var(--akcent); }
.stav-pripominky { background: var(--chyba-svetla); color: var(--chyba); }
.stav-k_testu { background: var(--primarni-svetla); color: var(--primarni); }
.hra-nazev .stav { font-size: .8rem; padding: 1px 8px; vertical-align: middle; }
.schvaleni-kroky { list-style: none; display: flex; gap: 4px; margin: 0 0 12px; padding: 0; counter-reset: krok; }
.schvaleni-kroky li { flex: 1; counter-increment: krok; padding: 6px 8px; border-radius: var(--r); background: var(--pozadi); color: var(--text-drobny);
  font-size: .8rem; font-weight: 600; text-align: center; border: 1px solid var(--okraj); }
.schvaleni-kroky li::before { content: counter(krok) ". "; }
.schvaleni-kroky li.hotovo { background: var(--uspech-svetla); color: var(--uspech); border-color: transparent; }
.schvaleni-kroky li.ted { background: var(--primarni); color: var(--na-primarni); border-color: transparent; }
.pripominky { margin: 0 0 12px; padding: 12px 14px; border-left: 4px solid var(--akcent); border-radius: var(--r); background: var(--akcent-svetla); }
.schvaleni-admin { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--okraj); display: grid; gap: 10px; }
.test-odkaz { margin-top: 16px; display: grid; gap: 6px; }
.test-odkaz .vstup { font-size: .85rem; }
.historie-schvaleni { margin-top: 12px; }
.historie-schvaleni ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.tvurce-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tvurce-form .vstup { width: auto; }
.mapa-her-obal { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-bottom: 16px; }
.mapa-her { height: min(70vh, 640px); min-height: 380px; border-radius: var(--zaobleni); }
.mapa-her-filtr h1 { margin-top: 0; }
.seznam-mapa { list-style: none; margin: 0; padding: 0; }
.seznam-mapa li { padding: 10px 0; border-top: 1px solid var(--okraj); }
.mapa-bublina a { font-weight: 700; color: var(--primarni); }
.mapa-bublina p { margin: 4px 0 0; color: var(--text-drobny); }
@media (max-width: 1023px) {
  .mapa-her-obal { grid-template-columns: 1fr; }
  .mapa-her { height: 60vh; }
}
.mapa-her .leaflet-popup-content-wrapper, .mapa-her .leaflet-popup-tip { background: var(--plocha); color: var(--text); }
.volby-obtiznost { display: grid; gap: 6px; }
.volby-obtiznost .volba { padding-top: 6px; padding-bottom: 6px; }
.test-odkaz { padding-top: 12px; border-top: 1px dashed var(--okraj); }

/* =====================================================================
   H17 – soukromé hry, sdílení, výsledky ven (barvy jen z proměnných výše)
   ===================================================================== */
.sdileni { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; margin-bottom: 12px; }
.sdileni-text { display: grid; gap: 8px; }
.sdileni-text p { margin: 0; }
.qr-obal.qr-obal-maly { width: 100%; margin: 0; box-sizing: border-box; background: var(--qr-pozadi); padding: 8px; border-radius: var(--r); border: 1px solid var(--okraj); }
.qr-obal-maly svg { display: block; width: 100%; height: auto; }
.vstup-cislo { width: 4.5em; }
@media (max-width: 639px) { .sdileni { grid-template-columns: 1fr; } .qr-obal-maly { max-width: 200px; } }
.tisk-nazev { display: none; }
@media print {
  #soukroma > h2, #soukroma > p, #soukroma details, #soukroma .sdileni-text > :not(.tisk-nazev) { display: none !important; }
  #soukroma .sdileni { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #soukroma .qr-obal.qr-obal-maly { width: 9cm; border: 0; }
  .tisk-nazev { display: grid; gap: 4px; font-size: 1.2rem; }
}

/* =====================================================================
   H18 – pamětní list
   ===================================================================== */
.vizualne-skryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seznam-historie li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.seznam-historie .radek-odkaz { flex: 1 1 16em; }
.odkaz-pdf { white-space: nowrap; }

/* =====================================================================
   H19 – průvodce „Jak to funguje“ a pískoviště (barvy jen z proměnných výše)
   ===================================================================== */
.radek-akci-stred { justify-content: center; gap: 10px; }
.seznam-odrazky { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.pruvodce-kroky { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 0; counter-reset: krok; }
.pruvodce-krok { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 0 4px 22px; counter-increment: krok; }
.pruvodce-krok::before {                     /* svislá čára mezi kroky */
  content: ""; position: absolute; left: 29px; top: 52px; bottom: 0; width: 2px; background: var(--okraj);
}
.pruvodce-krok:last-child::before { display: none; }
.pruvodce-znak {
  position: relative; width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--primarni-svetla); color: var(--primarni); border: 1px solid var(--okraj);
}
.pruvodce-znak .ikona { width: 26px; height: 26px; }
.pruvodce-znak::after {                      /* číslo kroku v rohu */
  content: counter(krok); position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: var(--r-maly); background: var(--akcent); color: var(--plocha); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center; box-sizing: border-box;
}
.pruvodce-obsah h2 { margin: 12px 0 4px; font-size: 1.1rem; }
.pruvodce-obsah p { margin: 0 0 8px; color: var(--text-tlumeny); }
.pruvodce-boxy { display: grid; gap: 16px; }
.pruvodce-boxy .karta + .karta { margin-top: 0; }
.pruvodce-boxy h2 { margin-top: 0; font-size: 1.1rem; }
.pruvodce-vyzva { margin-top: 16px; }
.pruvodce-vyzva h2 { margin-top: 0; }
@media (min-width: 640px) { .pruvodce-boxy { grid-template-columns: 1fr 1fr; } }

.pisek-postup { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 16px 0 0; }
.seznam-pisek { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.pisek-karta {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 16px; color: var(--text);
  text-decoration: none; transition: border-color .15s;
}
.pisek-karta:hover, .pisek-karta:focus-visible { border-color: var(--primarni); }
.pisek-cislo {
  width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; font-weight: 700;
  background: var(--primarni-svetla); color: var(--primarni);
}
.pisek-karta-hotovo .pisek-cislo { background: var(--uspech-svetla); color: var(--uspech); }
.pisek-text { display: grid; gap: 2px; }
.pisek-nazev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; }
.pisek-popis { color: var(--text-tlumeny); font-size: .95rem; }
.pisek-hotovo-cip { padding: 1px 8px; border-radius: var(--r-maly); font-size: .8rem; font-weight: 600; background: var(--uspech-svetla); color: var(--uspech); }
.pisek-hotovo-cip[hidden] { display: none; }
.pisek-vysvetleni { display: flex; gap: 8px; margin: 0; color: var(--text-tlumeny); }
.pisek-vysvetleni .ikona { flex: none; margin-top: 4px; color: var(--akcent); }
.pisek-stanoviste { margin-top: 16px; }
.pisek-splneno { border-color: var(--uspech); }
.pisek-hotovo { display: grid; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--uspech-svetla); color: var(--text); }
.pisek-hotovo-nadpis { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--uspech); }
.pisek-navigace { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 0; }

/* =====================================================================
   H20 – jednoty a spoluautoři
   ===================================================================== */
.karta-hry-jednota { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--primarni); font-size: .85rem; font-weight: 600; }
.karta-hry-jednota .ikona { flex: none; }
.karta-hry-mesto-stred { justify-content: center; margin-bottom: 8px; }
.jednota-popis { text-align: left; margin: 12px 0; }
.seznam-autoru { list-style: none; margin: 0 0 12px; padding: 0; }
.seznam-autoru li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--okraj); }
.seznam-autoru li:first-child { border-top: 0; }
.autor-jmeno { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.autor-jmeno .ikona { color: var(--akcent); }
.seznam-autoru form { margin: 0 0 0 auto; display: flex; gap: 12px; }
.tlacitko-odkaz {
  border: 0; background: none; padding: 6px 2px; min-height: 32px; font: inherit; font-size: .9rem; color: var(--primarni);
  text-decoration: underline; cursor: pointer;
}
.tlacitko-odkaz:hover { color: var(--primarni-hover); }
.jednota-radek { padding: 16px 20px; }
.jednota-radek .hlava-sekce { margin: 0; }
.formular-stred { justify-items: center; }

/* =====================================================================
   H23 – požadavky z testování (Tetris tažením, vzdání minihry)
   ===================================================================== */
.mh-tetris .mh-hraci, .mh-tetris .mh-zasobnik-dilek { touch-action: none; user-select: none; -webkit-user-select: none; }
.mh-dilek-deska { cursor: grab; }
.mh-zasobnik-dilek { cursor: grab; }
.mh-duch { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: .85; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .25)); }
.napoveda-vzdat { margin-top: 10px; }
.napoveda-vzdat summary { cursor: pointer; }
.napoveda-vzdat .volba { margin: 6px 0; }


/* =====================================================================
   H24 – karty při úpravě hry a stanoviště (barvy jen z proměnných výše)
   ===================================================================== */
.obsah-karty { max-width: 980px; }
.karta-hlavicka { padding-top: 20px; padding-bottom: 18px; }
.karta-hlavicka h1 { font-size: 1.5rem; }
.karty-lista {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px;
  margin: 12px -16px 14px; padding: 8px 16px; background: var(--pozadi); border-bottom: 1px solid var(--okraj);
}
.karty-pruh { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.karta-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--r);
  border: 1px solid transparent; background: none; color: var(--text-tlumeny); font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.karta-tab:hover { color: var(--text); background: var(--plocha); }
.karta-tab[aria-selected="true"] { color: var(--primarni); background: var(--plocha); border-color: var(--okraj); box-shadow: var(--stin); }
.karta-tab:focus-visible { outline: 2px solid var(--primarni); outline-offset: 2px; }
.karta-tab-odkaz { color: var(--primarni); border: 1px dashed var(--okraj); }
.karta-tab-odkaz .ikona { width: 16px; height: 16px; }
.karta-tab-chyba {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-maly); background: var(--chyba); color: var(--plocha);
  font-size: .75rem; font-weight: 800;
}
.karta-tab-chyba[hidden] { display: none; }
.karta-tab-s-chybou { color: var(--chyba); }
.karty-ulozeni { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.karty-stav { font-size: .85rem; color: var(--text-drobny); text-align: right; }
.karty-stav-ok { color: var(--uspech); }
.karty-stav-zmena { color: var(--akcent); }
.karty-stav-chyba { color: var(--chyba); font-weight: 600; }
.karty-chyby { grid-column: 1 / -1; padding: 10px 14px; border-radius: var(--r); background: var(--chyba-svetla); color: var(--chyba); }
.karty-chyby ul { margin: 6px 0 0; padding-left: 1.2em; }
.karty-chyby .odkaz-tlacitko { color: var(--chyba); text-align: left; }
.karty-aktivni .jen-bez-js, .karty-aktivni .karta-panel-nadpis { display: none; }
.karta-panel + .karta-panel { margin-top: 0; }
.karta-panel-nadpis { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--okraj); }
.karty-aktivni [data-karta-panel] + [data-karta-panel] { margin-top: 0; }
.karty-aktivni section[data-karta-panel]:not([hidden]) ~ section[data-karta-panel]:not([hidden]) { margin-top: 16px; }
.formular-karty > section.karta + section.karta { margin-top: 16px; }
.shrnuti-ukolu { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r); background: var(--primarni-svetla); }
.shrnuti-ukolu summary { cursor: pointer; font-weight: 600; color: var(--primarni); }
.text-radky { white-space: pre-line; }
.smazat-sbalene { margin-top: 16px; padding-top: 16px; padding-bottom: 16px; }
.smazat-sbalene summary { cursor: pointer; font-weight: 600; color: var(--chyba); }
@media (max-width: 639px) {
  .karty-lista { grid-template-columns: 1fr; }
  .karty-ulozeni { justify-content: space-between; }
  .karty-stav { text-align: left; }
}
@media (min-width: 640px) {
  .obsah-karty .karta { padding: 28px 32px; }
  .obsah-karty .karta-hlavicka { padding-top: 20px; padding-bottom: 18px; }
  .obsah-karty .smazat-sbalene { padding-top: 16px; padding-bottom: 16px; }
}
.hlava-sekce .radek-akci { margin-top: 0; gap: 8px; }

/* =====================================================================
   H25 – editor na počítači: celá šířka, přehledový sloupec, drobečky v záhlaví, přechod mezi stanovišti
   ===================================================================== */
/* Drobečková navigace v záhlaví (na telefonu skrytá – tam je odkaz zpět nad obsahem) */
.hlavicka-drobecky { display: none; flex: 1; min-width: 0; }
.hlavicka-drobecky ol { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .92rem; white-space: nowrap; }
.hlavicka-drobecky li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hlavicka-drobecky li:first-child, .hlavicka-drobecky li:last-child { flex: none; }
.hlavicka-drobecky li:last-child { flex: 0 1 auto; }
.hlavicka-drobecky li + li::before { content: "›"; color: var(--text-drobny); }
.hlavicka-drobecky a, .hlavicka-drobecky span { overflow: hidden; text-overflow: ellipsis; }
.hlavicka-drobecky a { color: var(--text-tlumeny); text-decoration: none; }
.hlavicka-drobecky a:hover { color: var(--primarni); text-decoration: underline; }
.hlavicka-drobecky [aria-current] span { color: var(--text); font-weight: 600; }
@media (min-width: 640px) {
  .hlavicka-drobecky { display: block; margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--okraj); }
  .obsah-s-drobecky > .drobecky { display: none; }
}

/* Výběr konkrétního stanoviště u karty „Stanoviště“ */
.karta-tab-menu { padding: 8px 8px; margin-left: -4px; min-width: 32px; justify-content: center; }
.karty-menu {
  position: fixed; inset: auto; margin: 0; padding: 6px; max-height: min(60vh, 420px); overflow: auto;
  border: 1px solid var(--okraj); border-radius: var(--r); background: var(--plocha); color: var(--text); box-shadow: var(--stin);
}
.karty-menu ul { margin: 0; padding: 0; list-style: none; }
.karty-menu a, .st-menu-seznam a {
  display: block; padding: 8px 12px; border-radius: var(--r); color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karty-menu a:hover, .st-menu-seznam a:hover { background: var(--pozadi); color: var(--primarni); }
.karty-menu li:last-child a[href$="/stanoviste"], .st-menu-pridat a { color: var(--primarni); font-weight: 600; }

/* Přechod mezi stanovišti v hlavičce stanoviště */
.st-navigace { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.st-nav-zpet { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .92rem; }
.st-nav-zpet a { font-weight: 600; }
.st-nav-krok { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.st-nav-sipka {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--okraj);
  background: var(--plocha); color: var(--primarni); font-size: 1.4rem; line-height: 1; text-decoration: none;
}
a.st-nav-sipka:hover { border-color: var(--primarni); background: var(--primarni-svetla); }
span.st-nav-sipka { color: var(--text-drobny); opacity: .5; }
.st-menu { position: relative; }
.st-menu summary {
  list-style: none; cursor: pointer; min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border: 1px solid var(--okraj); border-radius: var(--r); font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.st-menu summary::-webkit-details-marker { display: none; }
.st-menu summary::after { content: "▾"; color: var(--text-drobny); }
.st-menu[open] summary { border-color: var(--primarni); }
.st-menu-seznam {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(320px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow: auto;
  margin: 0; padding: 6px; list-style: none; border: 1px solid var(--okraj); border-radius: var(--r); background: var(--plocha); box-shadow: var(--stin);
}
.st-menu-seznam a[aria-current] { background: var(--primarni-svetla); color: var(--primarni); font-weight: 600; }

/* =====================================================================
   H26 – jednotné záhlaví na všech stránkách, menu hry a stanovišť (připnuté vlevo / rozbalovací z horní lišty)
   ===================================================================== */
:root { --vyska-hlavicky: 67px; }
.hlavicka { min-height: var(--vyska-hlavicky); box-sizing: border-box; }
.hlavicka-mezera { flex: 1; }
.obsah-stredni { max-width: 1200px; }
@media (min-width: 640px) {
  .hlavicka { padding-left: 24px; padding-right: 24px; }
  .hlavicka-editor { position: sticky; top: 0; z-index: 50; }
  .hlavicka-editor ~ main .karty-lista { top: var(--vyska-hlavicky); }
}
@media (min-width: 1440px) { .hlavicka { padding-left: 32px; padding-right: 32px; } }

/* Tlačítko „Hra a stanoviště ▾“ v horní liště (ukazuje se na telefonu a při skrytém panelu) */
.hlavicka-menu {
  display: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; margin-left: 4px;
  border: 1px solid var(--okraj); border-radius: var(--r); background: var(--plocha); color: var(--text);
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap;
}
.hlavicka-menu svg { width: 18px; height: 18px; color: var(--primarni); }
.hlavicka-menu:hover, .hlavicka-menu[aria-expanded="true"] { border-color: var(--primarni); color: var(--primarni); }
.hlavicka-menu-sipka { color: var(--text-drobny); transition: transform .15s; }
.hlavicka-menu[aria-expanded="true"] .hlavicka-menu-sipka { transform: rotate(180deg); }
.js-bok .hlavicka-menu { display: inline-flex; }
@media (max-width: 639px) {
  .hlavicka-menu span:not(.hlavicka-menu-sipka) { display: none; }       /* na telefonu jen ikona ☰ ▾ */
  .hlavicka-menu { padding: 0 10px; margin-left: auto; }
  .hlavicka-editor .logo-text { display: none; }
}

/* Menu – společný vzhled */
.editor-bok {
  display: none; flex-direction: column; min-height: 0;
  border: 1px solid var(--okraj); border-radius: var(--zaobleni); background: var(--plocha); box-shadow: var(--stin);
}
.bok-hra { display: grid; gap: 8px; padding: 16px 14px 14px; border-bottom: 1px solid var(--okraj); }
.bok-hra-radek { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bok-hra-info { align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 6px 12px; }
.bok-nazev { padding-left: 4px; color: var(--text); font-size: 1.08rem; font-weight: 700; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.bok-nazev:hover { color: var(--primarni); }
.bok-hra-info .stav { margin-left: 4px; }
.bok-nahled { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; }
.bok-nahled .ikona { width: 16px; height: 16px; }
.bok-skryt {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: -4px -4px 0 0; border-radius: var(--r);
  border: 1px solid transparent; background: none; color: var(--text-tlumeny); cursor: pointer;
}
.bok-skryt svg { width: 20px; height: 20px; }
.bok-skryt:hover { border-color: var(--okraj); color: var(--primarni); background: var(--pozadi); }
.bok-skryt[hidden] { display: none; }
.bok-telo { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px 8px; overscroll-behavior: contain; }
.bok-sekce { padding-top: 10px; }
.bok-sekce + .bok-sekce { margin-top: 6px; border-top: 1px solid var(--okraj); }
.bok-nadpis { margin: 0 0 4px; padding: 0 10px; color: var(--text-drobny); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bok-seznam { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bok-polozka {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: var(--r);
  color: var(--text); font-size: .94rem; text-decoration: none;
}
a.bok-polozka:hover, .bok-rozbal:hover { background: var(--pozadi); color: var(--primarni); }
.bok-polozka[aria-current] { background: var(--primarni-svetla); color: var(--primarni); font-weight: 600; }
.bok-rozbal { cursor: pointer; list-style: none; font-weight: 600; }
.bok-rozbal::-webkit-details-marker { display: none; }
.bok-pocet { flex: none; min-width: 24px; padding: 1px 7px; border-radius: var(--r-maly); background: var(--primarni-svetla); color: var(--primarni); font-size: .8rem; font-weight: 700; text-align: center; }
.bok-sipka { flex: none; width: 18px; height: 18px; color: var(--text-tlumeny); transition: transform .15s; }
.bok-stanoviste-obal[open] .bok-sipka { transform: rotate(180deg); }
.bok-stanoviste-obal .bok-seznam { margin-top: 2px; padding-left: 6px; }
.bok-prehled, .bok-prubeh { color: var(--text-tlumeny); font-size: .88rem; }
.bok-cislo {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-maly);
  background: var(--pozadi); color: var(--text-tlumeny); font-size: .8rem; font-weight: 700;
}
.bok-polozka[aria-current] .bok-cislo { background: var(--primarni); color: var(--na-primarni); }
.bok-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bok-stitek { flex: none; padding: 1px 7px; border-radius: var(--r-maly); background: var(--akcent-svetla); color: var(--akcent); font-size: .8rem; font-weight: 700; }
.bok-prazdne { margin: 4px 0 0; padding: 0 16px; }
.bok-akce { flex: none; display: grid; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--okraj); }
.bok-akce .tlacitko { justify-content: center; }

/* Rozbalovací menu z horní lišty */
html.bok-otevreny .editor-bok {
  display: flex; position: fixed; z-index: 60; top: calc(var(--vyska-hlavicky) + 8px); left: 12px;
  width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - var(--vyska-hlavicky) - 20px);
}
.bok-zastena { position: fixed; inset: 0; z-index: 55; background: var(--ztmaveni); }
.bok-zastena[hidden] { display: none; }
@media (min-width: 640px) { .bok-zastena { background: transparent; } }

/* Na počítači: připnutý panel vlevo (pokud ho autor neskryl) */
@media (min-width: 1024px) {
  .obsah-editor {
    max-width: none; display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 28px; align-items: start;
    padding: 20px 24px 40px;
  }
  .obsah-editor > .zprava { grid-column: 1 / -1; }
  .obsah-editor > .editor-hlavni { grid-column: 2; min-width: 0; }
  html:not(.bok-skryty) .obsah-editor > .editor-bok {
    display: flex; grid-column: 1; grid-row: span 20; position: sticky; top: calc(var(--vyska-hlavicky) + 16px);
    max-height: calc(100vh - var(--vyska-hlavicky) - 64px);
  }
  html.bok-skryty .obsah-editor { grid-template-columns: minmax(0, 1fr); }
  html.bok-skryty .obsah-editor > .editor-hlavni { grid-column: 1; }
  html.js-bok:not(.bok-skryty) .hlavicka-menu { display: none; }
  .obsah-editor .karty-lista { margin-left: 0; margin-right: 0; margin-top: 0; padding-left: 0; padding-right: 0; }
  html:not(.bok-skryty) .karta-hlavicka-hry:not(:has(.zprava)) { display: none; }   /* název a stav jsou v panelu */
  html:not(.bok-skryty) .st-nav-zpet { display: none; }                             /* zpět je v panelu a v drobečcích */
  .obsah-editor .karta-hlavicka:has(.st-navigace) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .obsah-editor .karta-hlavicka:has(.st-navigace) > h1 { order: -1; flex: 1; min-width: 0; }
  .obsah-editor .karta-hlavicka:has(.st-navigace) > .st-navigace { margin: 0; }
  .obsah-editor .karta-hlavicka:has(.st-navigace) > :not(h1):not(.st-navigace) { flex-basis: 100%; }
}
@media (max-width: 1023px) {
  .bok-skryt { display: none !important; }      /* na menší obrazovce je menu vždy rozbalovací */
}
@media (min-width: 1440px) {
  .obsah-editor { grid-template-columns: 310px minmax(0, 1fr); column-gap: 32px; padding-left: 32px; padding-right: 32px; }
  .obsah-editor .radek-siroky { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
  .obsah-editor .editor-hlavni > .karta { padding-left: 40px; padding-right: 40px; }
  .obsah-editor .volby-pod-sebou { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 12px; }
}
.vstup-uzky { max-width: 16rem; }   /* H27: krátký výběr (délka pauzy) */
.ed-upravit-obsah { display: flex; width: 100%; justify-content: center; margin: 10px 0 4px; }   /* #024 (H27) */

/* =====================================================================
   H28 – uzavření výsledků akce (#023) a průběh akce (#032)
   ===================================================================== */
.stitek-ok { background: var(--uspech-svetla); color: var(--uspech); }
.formular-radek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.formular-radek .pole { flex: 1 1 260px; margin: 0; }
.prubeh-souhrn { margin: 0 0 12px; }
.tabulka-prubeh td { vertical-align: top; }
.tabulka-prubeh tr.prubeh-dokoncena td, .tabulka-prubeh tr.prubeh-vzdana td { color: var(--text-tlumeny); }
.tabulka-prubeh tr.prubeh-pauza td:first-child { box-shadow: inset 3px 0 0 var(--akcent); }
.stitek-pauza { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: var(--r-maly); background: var(--akcent-svetla); color: var(--akcent); font-size: .8rem; font-weight: 700; }
.formular-radek > .tlacitko { margin-bottom: 30px; }
.tabulka-prubeh th:nth-child(2), .tabulka-prubeh td:nth-child(2), .tabulka-prubeh th:nth-child(3), .tabulka-prubeh td:nth-child(3) { text-align: left; }

/* =====================================================================
   H29 – jednotná šířka na notebooku a větším: všechny stránky jako editor (do 1240 px),
   úzké (jako v telefonu) zůstává jen hraní, přihlášení a podobné jednoúčelové obrazovky (.obsah-uzka)
   ===================================================================== */
@media (min-width: 640px) {
  .seznam-her { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .seznam-her > li { display: grid; }                   /* karty v řádku stejně vysoké */
}
@media (min-width: 1024px) {
  .obsah { max-width: 1240px; padding: 28px 32px 48px; }
  .obsah-uzka { max-width: 720px; padding-left: 16px; padding-right: 16px; }
  .obsah-stredni { max-width: 1240px; }
  .karta .text, .karta > p { max-width: 80ch; }        /* čitelná délka řádku i na široké stránce */
  .karta-stred > p { margin-left: auto; margin-right: auto; }
  /* úvod: představení a přihlášení vedle sebe, katalog pod nimi v mřížce */
  .obsah-uvod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .obsah-uvod > * { grid-column: 1 / -1; }
  .obsah-uvod > .uvod-intro { grid-column: 1; grid-row: 2; margin-top: 0; }
  .obsah-uvod > #prihlaseni { grid-column: 2; grid-row: 2; margin-top: 0; }
  .obsah-uvod > .uvod-pozdrav { grid-column: 1; }
  .obsah-uvod > .rozehrane { grid-column: 2; grid-row: span 2; margin-top: 0; }
  .obsah-uvod > .pripojit-kodem { grid-column: 1; align-self: end; }
  .obsah-uvod > .pripojit-kodem .tlacitko-siroke { width: auto; }
  /* detail hry: popis vlevo, žebříček vpravo */
  .obsah-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 24px; align-items: start; }
  .obsah-detail > * { grid-column: 1 / -1; }
  .obsah-detail > article.karta { grid-column: 1; }
  .obsah-detail > #zebricek { grid-column: 2; grid-row: span 3; margin-top: 0; position: sticky; top: 16px; }
  .obsah-detail .volby-hrani { max-width: 640px; }
  /* profil a podobné stránky s mnoha kartami: dva sloupce */
  .obsah-sloupce { columns: 2; column-gap: 24px; }
  .obsah-sloupce > .karta { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 16px; }
  .obsah-sloupce > .drobecky, .obsah-sloupce > .zprava { column-span: all; }
  /* správa her, pískoviště, průvodce: seznamy do mřížky */
  .seznam-sprava { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  .seznam-pisek { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
}
@media (min-width: 1024px) {
  .obsah-uvod > .uvod-intro ~ .katalog { grid-row: 3; }
  .obsah-uvod > .uvod-intro ~ .karta-stred:last-child { grid-row: 4; }
}
@media (min-width: 1024px) {
  .obsah.obsah-editor, .obsah.obsah-siroka { max-width: none; }   /* editor, mapa a editor trasy přes celou šířku */
  .obsah.obsah-siroka { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .obsah-uvod > .uvod-pozdrav + .pripojit-kodem { grid-column: 2; grid-row: auto; justify-self: end; align-self: end; margin-bottom: 20px; }
  .obsah:not(.obsah-editor) .karta > .formular { max-width: 820px; }   /* formuláře mimo editor nepřetahovat přes celou šířku */
}

/* H30 (#027) – víc konců hry v editoru trasy */
.ed-konec { cursor: pointer; }
.ed-konec:hover rect, .ed-konec:focus-visible rect { stroke: var(--akcent); stroke-width: 2; }
.ed-konec.ed-vybrany rect { stroke: var(--akcent); stroke-width: 4; }
.ed-konec:focus { outline: none; }

/* =====================================================================
   H31 – výběr „Jak hráč odpoví“: dlaždice stejné velikosti se značkou typu
   ===================================================================== */
.pole:has(> .volby-typy) { margin-bottom: 10px; }
.pole:has(> .volby-typy) > legend { margin-bottom: 8px; }
.volby-typy { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.volba-typ {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 4px 12px;
  justify-self: stretch; min-height: 96px; padding: 14px 14px 14px 14px; background: var(--plocha);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.volba-typ:hover { border-color: var(--primarni); }
.volba-typ input { position: absolute; opacity: 0; pointer-events: none; }   /* stav ukazuje celá dlaždice */
.volba-typ:has(input:focus-visible) { outline: 2px solid var(--primarni); outline-offset: 2px; }
.volba-typ:has(input:checked) { box-shadow: 0 0 0 1px var(--primarni) inset, var(--stin); }
.volba-typ-znacka {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r);
  background: var(--pozadi); color: var(--primarni); font-weight: 800; font-size: .85rem; letter-spacing: .02em; white-space: nowrap;
}
.volba-typ:has(input:checked) .volba-typ-znacka { background: var(--primarni); color: var(--na-primarni); }
.volba-typ-text { display: grid; gap: 3px; }
.volba-typ-text strong { font-size: 1rem; }
.volba-typ-text .drobne { line-height: 1.4; }
.volby-pod-sebou > .volba { justify-self: stretch; }   /* volby v mřížce vždy přes celou buňku */
.volba-typ-znacka { font-size: .8rem; }
@media (max-width: 639px) { .volba-typ { min-height: 0; } }

/* =====================================================================
   H31 (#029) – obrázky, zvuky a videa u stanovišť
   ===================================================================== */
.media { display: grid; gap: 14px; margin: 14px 0; }
.media figure { margin: 0; }
.media figcaption { margin-top: 6px; font-size: .9rem; color: var(--text-tlumeny); }
.media-obrazek a { display: block; width: fit-content; max-width: 100%; border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.media-obrazek img { display: block; max-width: 100%; height: auto; max-height: 70vh; width: auto; object-fit: contain; background: var(--pozadi); }
.media-zvuk audio { display: block; width: 100%; max-width: 520px; }
.media-video-plocha {
  display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 16 / 9; width: 100%; max-width: 720px; padding: 16px;
  border: 1px solid var(--okraj); border-radius: var(--r); background: var(--pozadi); text-align: center;
}
.media-video-plocha .drobne { max-width: 46ch; margin: 0; }
.media-video-plocha.media-video-hraje { padding: 0; border: 0; background: transparent; }
.media-video-spustit {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 0; border-radius: var(--r-maly);
  background: var(--primarni); color: var(--na-primarni); font: inherit; font-weight: 700; cursor: pointer;
}
.media-video-spustit:focus-visible { outline: 2px solid var(--primarni); outline-offset: 3px; }
.media-video-ikona { font-size: 1.1rem; line-height: 1; }
.media-video-ramec { width: 100%; height: 100%; border: 0; border-radius: var(--r); }
.napoveda .media { margin-bottom: 4px; }
/* zvětšený obrázek */
.lightbox { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; padding: 16px; border: 0; background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 8px; }
.lightbox::backdrop { background: var(--lightbox-pozadi); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r); }
.lightbox-popis { margin: 0; color: var(--lightbox-text); text-align: center; }
.lightbox-zavrit {
  position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--lightbox-tlacitko); color: var(--lightbox-text); font-size: 1.2rem; cursor: pointer;
}
/* správa: karta médií u stanoviště */
.media-sprava .media-misto { margin: 18px 0 8px; font-size: 1rem; }
.media-seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.media-polozka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 12px; border: 1px solid var(--okraj); border-radius: var(--r); }
.media-polozka .media { margin: 0; }
.media-polozka .media-obrazek img { max-height: 180px; }
.media-polozka .media-video-plocha { max-width: 360px; }
.media-udaje { display: grid; gap: 6px; justify-items: end; text-align: right; }
.media-smazat summary { cursor: pointer; color: var(--text-tlumeny); }
.media-smazat form { margin-top: 6px; }
.media-pridat { margin-top: 16px; }
.media-pridat > summary { cursor: pointer; font-weight: 700; color: var(--primarni); }
.media-pridat[open] > summary { margin-bottom: 12px; }
.volba-potvrzeni { align-items: start; }
.volba-potvrzeni span { line-height: 1.45; }
.media-prehled { margin: 8px 0 14px; }
.media-prehled > summary { cursor: pointer; font-weight: 700; }
@media (max-width: 639px) {
  .media-polozka { grid-template-columns: 1fr; }
  .media-udaje { justify-items: start; text-align: left; }
}

/* =====================================================================
   H32 (#031) – vzory pamětních listů
   ===================================================================== */
.radek-poli-4 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .radek-poli-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* seznam vzorů (správa) */
.vzory-mrizka { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vzor-karta { display: grid; gap: 6px; }
.vzor-nahled-odkaz { display: grid; gap: 6px; color: var(--text); text-decoration: none; }
.vzor-nahled-odkaz img { width: 100%; height: auto; aspect-ratio: 297 / 210; object-fit: cover; border: 1px solid var(--okraj); border-radius: var(--r); background: var(--pozadi); }
.vzor-nahled-odkaz:hover img, .vzor-nahled-odkaz:focus-visible img { border-color: var(--primarni); }
.vzor-nazev { font-weight: 700; }
/* editor vzoru */
.vzor-plocha { position: relative; width: 100%; max-width: 900px; aspect-ratio: 297 / 210; margin: 8px 0 16px; border: 1px solid var(--okraj); border-radius: var(--r); overflow: hidden; background: var(--pozadi); user-select: none; touch-action: none; }
.vzor-plocha > img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vzor-obd { position: absolute; display: none; box-sizing: border-box; padding: 4px 6px; border: 2px dashed var(--primarni); border-radius: 4px;
  background: var(--vzor-obd-vypln); color: var(--vzor-obd-text); font-size: .8rem; font-weight: 700; cursor: move; }
.vzor-plocha-js .vzor-obd:not([hidden]) { display: block; }
.vzor-obd-obr { border-color: var(--akcent); }
.vzor-obd-tah { box-shadow: 0 0 0 3px var(--primarni); }
.vzor-uchop { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; background: var(--primarni); border-radius: 3px 0 4px 0; cursor: nwse-resize; }
.vzor-obd-obr .vzor-uchop { background: var(--akcent); }
.vzor-pole { display: grid; gap: 4px; }
.vzor-skupina legend .volba { padding: 0; border: 0; background: none; }
.vstup-barva { width: 100%; max-width: 160px; height: 44px; padding: 4px; }
/* výběr vzoru v kartě Výsledky */
.vzory-volby { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vzor-volba { position: relative; display: grid; gap: 8px; align-content: start; justify-self: stretch; padding: 10px; }
.vzor-volba input { position: absolute; opacity: 0; pointer-events: none; }
.vzor-volba:has(input:focus-visible) { outline: 2px solid var(--primarni); outline-offset: 2px; }
.vzor-volba:has(input:checked) { box-shadow: 0 0 0 1px var(--primarni) inset, var(--stin); border-color: var(--primarni); }
.vzor-volba-nahled { display: block; width: 100%; height: auto; aspect-ratio: 297 / 210; object-fit: cover; border-radius: var(--r); border: 1px solid var(--okraj); background: var(--plocha); }
.vzor-volba-vychozi { display: grid; place-items: center; box-shadow: inset 0 0 0 5px var(--plocha), inset 0 0 0 7px var(--primarni); color: var(--primarni); font-weight: 700; }
.vzor-volba-nazev { display: grid; gap: 2px; font-weight: 700; }
.list-obrazek { margin: 0; }
.list-obrazek img { display: block; max-width: 200px; max-height: 140px; width: auto; height: auto; object-fit: contain;
  background: repeating-conic-gradient(var(--okraj) 0% 25%, var(--plocha) 0% 50%) 0 0 / 16px 16px; border-radius: var(--r); }

/* =====================================================================
   UX audit 10/2026 – úpravy rozvržení a ovládání (viz navrhy/2026-10-29-ux-audit-hry.md)
   ===================================================================== */

/* --- Herní režim: místo záhlaví kompaktní lepící lišta (název, menu, čas, průběh) --- */
.obsah-hra { padding-top: 0; }
.hra-hlava {
  position: sticky; top: 0; z-index: 30; margin: 0 -16px 16px; padding: max(8px, env(safe-area-inset-top)) 12px 0;
  background: var(--plocha); border-bottom: 1px solid var(--okraj);
}
.hra-hlava .hra-lista { margin: 0; min-height: 48px; gap: 8px; flex-wrap: nowrap; }
.hra-hlava .hra-lista:has(.skore) { flex-wrap: wrap; }
/* režim na body: logo a název na 1. řádku, menu, body a čas na 2. (jinak by logo zůstalo samo na řádku – starší pravidlo dává názvu flex-basis 100 %) */
.hra-hlava .hra-lista:has(.skore) .hra-nazev { flex-basis: calc(100% - 40px); }
/* lepící herní lišta nesmí zakrýt začátek sekce, na kterou se skáče (#ukol, #naprava, #napovedy) */
html:has(.hra-hlava) { scroll-padding-top: 88px; }
html:has(.hra-hlava .skore) { scroll-padding-top: 132px; }
.hra-hlava .hra-nazev { color: var(--text); font-size: .95rem; }
.hra-hlava .prubeh { margin: 8px -12px 0; gap: 3px; }
.hra-hlava .prubeh-krok { height: 4px; border-radius: 0; }
.hra-logo { width: 32px; height: 32px; border-radius: var(--r); flex: none; font-size: .9rem; text-decoration: none; }
.hra-test { flex: none; display: inline-block; margin-left: -4px; padding: 1px 6px; border-radius: var(--r); background: var(--zluta); color: var(--zluta-text);
  font-size: .8rem; font-weight: 700; vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; }
.hra-hlava .tym-menu-tlacitko, .hra-hlava .stopky { min-height: 40px; }
.obsah-hra > .zprava { margin-top: 0; }
@media (min-width: 640px) {
  .hra-hlava { margin: 12px 0 16px; top: 8px; border: 1px solid var(--okraj); border-radius: var(--r); overflow: visible; box-shadow: var(--stin); }
  .hra-hlava .prubeh { margin: 8px -12px 0; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
}
.tym-menu-ostatni { display: grid; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--okraj); }
.tym-menu-odkaz {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: none;
  color: var(--text); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.tym-menu-odkaz:hover { color: var(--primarni); }
.tym-menu-odkaz .ikona { width: 18px; height: 18px; }
.tym-menu-odkaz .drobne { font-weight: 400; }

/* --- Zpráva ke špatné odpovědi přímo u políčka --- */
.odpoved-hlaska:empty { display: none; }
.odpoved-hlaska { margin: -4px 0 12px; }
.odpoved-hlaska .zprava { margin: 0; padding: 10px 14px; font-size: .95rem; border-radius: var(--r); }
.odpoved-hlaska .zprava-chyba { border-left: 4px solid var(--chyba); }
.vstup.vstup-chyba { border-width: 2px; background: var(--chyba-svetla); }

/* --- Hraní: větší mapa, hlavní tlačítko v dosahu palce --- */
.obsah-hra .mapa { height: clamp(260px, 42vh, 420px); }
@media (max-width: 639px) {
  .obsah-hra .karta form > .tlacitko-siroke:not([hidden]), .obsah-hra .karta > form > .tlacitko-siroke {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5;
    box-shadow: 0 6px 18px rgb(16 42 43 / .18);
  }
}

/* --- Čekárna týmu --- */
.cekarna { display: grid; gap: 16px; }
.cekarna > *, .cekarna > .karta + .karta { margin: 0; }
.cekarna-tym .tym-clenove { margin-bottom: 0; }
.cekarna-start { padding-top: 20px; padding-bottom: 20px; }

@media (min-width: 1024px) {
  .obsah-cekarna { max-width: 1120px; }
  .cekarna { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .cekarna > * { grid-column: 1; }
  .cekarna > .cekarna-pozvanka { grid-column: 2; grid-row: 1 / span 5; }
}

/* --- Konec hry: na notebooku výsledek vlevo, mezičasy vpravo --- */
.konec-vysledek .radek-akci { margin-bottom: 12px; gap: 10px; }
@media (min-width: 1024px) {
  .obsah-konec { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .obsah-konec > * { grid-column: 1 / -1; }
  .obsah-konec > .konec-vysledek { grid-column: 1; grid-row: span 6; }
  .obsah-konec > .konec-vysledek ~ .karta { grid-column: 2; margin-top: 0; }
}

/* --- Úvod --- */
.uvod-akce { margin-top: 12px; gap: 10px; }
.uvod-akce .tlacitko { margin-top: 0; }
@media (max-width: 639px) {
  .uvod-intro { padding: 20px 18px; }
  .uvod-intro .ikona-velka { display: none; }
  .uvod-intro h1 { margin-top: 0; }
  .uvod-intro .radek-akci { margin-top: 12px; }
}
@media (min-width: 1024px) {
  /* nepřihlášený: představení a katalog vlevo, přihlášení vpravo (katalog je vidět hned na první obrazovce) */
  .obsah-uvod.obsah-uvod-host { grid-template-columns: minmax(0, 1fr) 400px; }
  .obsah-uvod-host > .zprava { grid-row: 1; }
  .obsah-uvod-host > .uvod-intro { grid-column: 1; grid-row: 2; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; padding: 28px 32px; }
  .obsah-uvod-host > .uvod-intro > * { grid-column: 2; margin-left: 0; }
  .obsah-uvod-host > .uvod-intro > .ikona-velka { grid-column: 1; grid-row: 1 / span 4; margin: 4px 0 0; }
  .obsah-uvod-host > .uvod-intro h1 { margin-top: 0; }
  .obsah-uvod-host > .uvod-intro .radek-akci-stred { justify-content: flex-start; }
  .obsah-uvod-host > .uvod-intro ~ .katalog { grid-column: 1; grid-row: 3; }
  .obsah-uvod-host > #prihlaseni { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 16px; }
  .obsah-uvod-host > .uvod-intro ~ .karta-stred:last-child { grid-column: 1 / -1; grid-row: 4; }
  .obsah-uvod-host .seznam-her { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* --- Tabulky na telefonu jako karty (popisky doplní hry.js do data-label) --- */
@media (max-width: 639px) {
  .tabulka-obal:has(.tabulka-karty) { overflow: visible; margin: 0; }
  .tabulka-karty, .tabulka-karty tbody, .tabulka-karty tr, .tabulka-karty td { display: block; width: 100%; }
  .tabulka-karty thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabulka-karty tr { padding: 12px 0; border-bottom: 1px solid var(--okraj); }
  .tabulka-karty td, .tabulka-karty td:first-child {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0;
    text-align: right; white-space: normal; min-width: 0;
  }
  .tabulka-karty td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--text-tlumeny); font-size: .85rem; text-align: left; }
  .tabulka-karty td:first-child { display: block; text-align: left; font-size: 1rem; padding-bottom: 6px; }
  .tabulka-karty td:first-child::before { content: none; }
  .tabulka-karty td:empty { display: none; }
  .tabulka-karty .tvurce-form { justify-content: flex-end; }
  .tabulka-karty td:has(.tvurce-form) { display: block; }
  .tabulka-karty td:has(.tvurce-form)::before { display: block; max-width: none; margin-bottom: 6px; }
}
.radek-hledani { margin-bottom: 16px; }
.radek-hledani-pole { display: flex; gap: 8px; }
.radek-hledani-pole .vstup { flex: 1; min-width: 0; }
.radek-hledani-pole .tlacitko { flex: none; }
.tabulka-karty .tvurce-form .vstup-cislo { width: 5em; flex: none; }

/* --- Editor trasy: plátno na celou výšku okna, jeden odkaz zpět, kontrola trasy nahoře --- */
main:has(> .editor) > .drobecky { display: none; }            /* „← Zpět“ je v liště editoru */
body:has(.editor) .paticka { display: none; }
@media (min-width: 1024px) {
  .ed-telo { height: calc(100dvh - var(--vyska-hlavicky) - 120px); min-height: 520px; }
  body:has(.pruh-test) .ed-telo { height: calc(100dvh - var(--vyska-hlavicky) - 148px); }
}
.ed-kontrola { top: 10px; bottom: auto; max-width: min(460px, calc(100% - 70px)); }
.ed-kontrola-box ul { max-height: 40vh; }

/* --- Správa hry: jedna navigace, výrazné Uložit jen při změnách, na telefonu lišta Uložit dole --- */
@media (min-width: 1024px) {
  html:not(.bok-skryty) .editor-bok .bok-sekce-hra[data-na-hre] { display: none; }   /* části hry jsou v kartách nahoře */
}
.karty-ulozeni:not(:has(.karty-stav-zmena, .karty-stav-chyba)) [data-ulozit] {
  background: var(--plocha); color: var(--text-tlumeny); border-color: var(--okraj);
}
.karty-pruh[data-pretece] { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.karty-pruh[data-pretece="vlevo"] { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
.karty-pruh[data-pretece="obe"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
@media (max-width: 639px) {
  .karty-lista { grid-template-columns: 1fr; }
  .karty-ulozeni {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-between;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: var(--plocha); border-top: 1px solid var(--okraj);
    box-shadow: 0 -4px 16px rgb(16 42 43 / .08);
  }
  .karty-ulozeni [data-ulozit] { min-width: 120px; }
  .karty-aktivni .obsah-karty { padding-bottom: 96px; }
  .karty-aktivni .paticka { padding-bottom: 80px; }
}
.hlavicka-menu-kratce { display: none; }
@media (max-width: 639px) {
  .hlavicka-menu span.hlavicka-menu-kratce { display: inline; }
}

/* --- Správa her: odkazy administrace oddělené od seznamu her --- */
.sprava-admin { margin: 4px 0 20px; padding: 10px 14px; gap: 8px 10px; border: 1px dashed var(--okraj); border-radius: var(--r); }
.sprava-admin-nadpis { width: 100%; color: var(--text-drobny); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 640px) { .sprava-admin-nadpis { width: auto; margin-right: 4px; } }

/* --- Rytmus formulářů: popisek → pole 6 px, pole → další popisek 20 px --- */
.karta-panel > * + *:not(.karta-panel-nadpis) { margin-top: 20px; }
.karta-panel > .karta-panel-nadpis + * { margin-top: 0; }
.radek-siroky > .pole + .pole { margin-top: 20px; }
@media (min-width: 1440px) { .obsah-editor .radek-siroky > .pole + .pole { margin-top: 0; } }   /* tam jsou pole vedle sebe */
.pole > .pole-napoveda, .pole > .pole-stav { margin-top: 0; }

/* --- Mapa her: na telefonu kompaktní filtr nad mapou, obtížnost jako čipy --- */
.mapa-filtry-vice > summary { list-style: none; }
.mapa-filtry-vice > summary::-webkit-details-marker { display: none; }
.mapa-filtry-souhrn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--okraj); border-radius: var(--r);
  font-weight: 600; cursor: pointer; background: var(--plocha);
}
.mapa-filtry-souhrn .ikona { width: 18px; height: 18px; color: var(--primarni); }
.mapa-filtry-vice[open] > .mapa-filtry-souhrn { border-color: var(--primarni); color: var(--primarni); }
.mapa-filtry-pocet { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-maly); background: var(--primarni); color: var(--na-primarni); font-size: .8rem; }
.mapa-filtry-telo { display: grid; gap: 16px; margin-top: 14px; }
.volby-obtiznost { display: flex; flex-wrap: wrap; gap: 6px; }
.volby-obtiznost .volba { min-height: 40px; padding: 4px 10px; gap: 6px; }
@media (max-width: 1023px) {
  .mapa-her-filtr { padding: 16px; }
  .mapa-her-filtr h1 { font-size: 1.3rem; margin-bottom: 2px; }
  .mapa-her-filtr .formular { margin-top: 10px; gap: 10px; }
  .mapa-her-filtr .formular > label.pole:first-child > .pole-popis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mapa-her { height: 62vh; }
}
@media (min-width: 1024px) {
  .mapa-filtry-souhrn { display: none; }
  .mapa-filtry-telo { margin-top: 0; }
}

/* --- Profil --- */
.profil-hlava > div { flex: 1; min-width: 0; }
.profil-odhlasit { flex: none; margin: 0; }
.karta-sbalena > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.karta-sbalena > summary::-webkit-details-marker { display: none; }
.karta-sbalena > summary h2 { margin: 0; }
.karta-sbalena > summary::after { content: "▾"; color: var(--text-drobny); transition: transform .15s; }
.karta-sbalena[open] > summary::after { transform: rotate(180deg); }
.karta-sbalena[open] > summary { margin-bottom: 12px; }
.karta-sbalena:not([open]) { padding-top: 18px; padding-bottom: 18px; }
#smazat > summary h2 { color: var(--chyba); font-size: 1rem; }

/* --- Detail hry: volby Založit tým / Hrát sólo --- */
.volba-hrani-popis { margin: 6px 2px 0; }
@media (min-width: 640px) {
  .volby-hrani-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  .obsah-detail .volby-hrani-2 { max-width: none; }
}
.karta-hry .hvezdy-text { display: none; }   /* UX 10/2026: v katalogu stačí hvězdy (název obtížnosti čte čtečka z aria-label) */

/* --- Formulář stanoviště: kompaktní výběr typu odpovědi (popis jen u vybraného), pole rostou s textem --- */
.volby-typy { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: row dense; gap: 8px; }
.volba-typ { justify-self: stretch; width: 100%; min-height: 0; padding: 10px 12px; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.volba-typ-znacka { width: 36px; height: 36px; border-radius: var(--r); font-size: .8rem; }
.volba-typ-text .drobne { display: none; }
.volba-typ:has(input:checked) { grid-column: span 2; background: var(--primarni-svetla); }
.volba-typ:has(input:checked) .volba-typ-text .drobne { display: block; }
@media (max-width: 359px) { .volba-typ:has(input:checked) { grid-column: 1 / -1; } }
.vstup-text { field-sizing: content; min-height: 5.5em; max-height: 60vh; resize: vertical; }
.media-pridat > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; list-style: none;
  border: 1.5px dashed var(--okraj); border-radius: var(--r);
}
.media-pridat > summary::-webkit-details-marker { display: none; }
.media-pridat > summary::before { content: "+"; font-size: 1.2rem; line-height: 1; }
.media-pridat[open] > summary::before { content: "−"; }

/* =====================================================================
   UX 10/2026 – designové tokeny pro další úpravy (rozměry, písmo, zlomy).
   Nové styly používejte jen tyto hodnoty; zlomy: 640 px (telefon → tablet), 1024 px (tablet → notebook), 1440 px (velký monitor).
   CSS proměnné v @media použít nejdou – zlomy proto pište jako čísla 640 / 1024 / 1440.
   ===================================================================== */
:root {
  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 24px; --m-6: 32px; --m-7: 48px;
  --pismo-meta: .8125rem;     /* 13 px – štítky, čipy, metadata */
  --pismo-napoveda: .875rem;  /* 14 px – nápověda k poli */
  --pismo-text: 1rem;         /* 16 px */
  --pismo-podnadpis: 1.125rem;/* 18 px */
  --pismo-sekce: 1.375rem;    /* 22 px */
  --pismo-stranka: 1.75rem;   /* 28 px (na notebooku 32 px) */
  --dotyk-min: 44px;
}
.pole-napoveda, .drobne { font-size: max(var(--pismo-meta), .85rem); }

/* =====================================================================
   H33 – připomínky 29. 10. 2026
   ===================================================================== */
/* text v kartách vyplní celou šířku karty (dřív končil u 80 znaků a vpravo zbývalo prázdno); omezení zůstává jen u dlouhých textů pro hráče */
.karta > p { max-width: none; }
.uvod-pozdrav { margin-bottom: 16px; }
.radek-hledani > .pole-popis { display: block; margin-bottom: 6px; }
/* schéma trasy: panel vlevo jako postranní panel ve správě hry */
@media (min-width: 1024px) {
  .ed-telo { grid-template-columns: 340px minmax(0, 1fr); }
  .ed-panel { order: -1; }
  .ed-telo { height: calc(100dvh - var(--vyska-hlavicky) - 132px); }
  body:has(.pruh-test) .ed-telo { height: calc(100dvh - var(--vyska-hlavicky) - 160px); }
}
/* pauza: lepicí tlačítko se nesmí dotýkat odpočtu */
.obsah-hra .karta-stred > form > .tlacitko-siroke { position: static; box-shadow: none; }
.obsah-hra .karta-stred .pole-stav { margin-bottom: 12px; }
/* štítek TEST na úzkém telefonu skrýt, ať se vejde název hry */
@media (max-width: 399px) { .hra-test { display: none; } }

/* H33-3: Průběh akce – tři velká čísla */
.prubeh-cisla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.prubeh-cislo { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 12px 14px; border: 1px solid var(--okraj); border-radius: var(--r); background: var(--plocha); }
.prubeh-cislo dd { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prubeh-cislo dt { color: var(--text-tlumeny); font-size: .85rem; font-weight: 600; }
.prubeh-cislo-hraje dd { color: var(--primarni); }
@media (max-width: 399px) { .prubeh-cislo { padding: 10px; } .prubeh-cislo dd { font-size: 1.6rem; } }
/* H33-3: „Jsem na místě“ daleko od cíle je jen obrysové (tlačítko dál funguje) */
.obsah-hra form[data-prichod="gps"] > .tlacitko-vedlejsi { box-shadow: none; }
.bok-stitek-neuplne { background: var(--zluta); color: var(--zluta-text); }   /* H33 */

/* =====================================================================
   H33-2a – rám aplikace ve stylu „Čistý modrý“ (návrhy vizuálů 30. 10. 2026)
   Barvy jsou dál jen v proměnných nahoře; tady je typografie a tmavá lišta.
   ===================================================================== */
/* Nadpisy: úzké bezpatkové písmo, tlačítka hlavní akce velkými písmeny */
h1, h2, .hra-nazev, .logo-text, .tym-menu-nadpis, .prubeh-cislo dd {
  font-family: var(--rodina-nadpis); font-weight: 600; letter-spacing: .01em;
}
h1 { line-height: 1.15; }
h2 { font-weight: 500; font-size: 1.25rem; }
.logo-znak { font-family: var(--rodina-nadpis); font-weight: 700; font-size: 1.15rem; }
/* jen tlačítka formulářů (Odeslat, Uložit, Začít hru…) – odkazy jako „Pokračovat: …“ by velkými písmeny byly špatně čitelné */
button.tlacitko:not(.tlacitko-vedlejsi):not(.tlacitko-maly) {
  font-family: var(--rodina-nadpis); font-weight: 500; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase;
}
/* úkol, epilog a připomínky: celý obrys místo barevného pruhu vlevo */
.ukol { background: var(--plocha-ukol); border: 2px solid var(--text); }
.ukol-nadpis { display: flex; align-items: center; gap: 8px; font-family: var(--rodina-nadpis); font-weight: 600; font-size: .95rem; letter-spacing: .12em; color: var(--text); }
.ukol-nadpis::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--primarni); }
.epilog, .pripominky { border: 1px solid var(--okraj); border-left-width: 1px; }
.odpoved-hlaska .zprava-chyba { border: 1px solid var(--chyba); }
.stitek, .stav { letter-spacing: .02em; }
/* pole a volby: výraznější obrys, zaostření bez měkkého „halo“ */
.vstup { border-width: 1px; border-color: var(--text-drobny); }
.vstup:focus { border-color: var(--primarni); box-shadow: 0 0 0 1px var(--primarni); }
.volba { border-width: 1px; }
.volba:has(input:checked) { box-shadow: 0 0 0 1px var(--primarni) inset; }

/* Tmavá lišta: záhlaví aplikace a herní lišta. Uvnitř se běžné proměnné přemapují,
   takže tlačítka, drobečky, čas a průběh hry se samy obarví pro tmavý podklad. */
.hlavicka, .hra-hlava {
  --plocha: var(--lista); --pozadi: var(--lista-hover);
  --text: var(--lista-text); --text-tlumeny: var(--lista-tlumeny); --text-drobny: var(--lista-tlumeny);
  --okraj: var(--lista-okraj);
  --primarni: var(--lista-akcent); --primarni-hover: var(--lista-text); --na-primarni: var(--lista);
  --primarni-svetla: var(--lista-hover); --akcent: var(--lista-text); --akcent-svetla: var(--lista-hover);
  --tlacitko: var(--lista-akcent); --tlacitko-hover: var(--lista-text); --na-tlacitku: var(--lista); --plocha-ukol: var(--lista);
  background: var(--lista); color: var(--text); border-bottom-color: var(--lista);
}
.hlavicka .logo-znak, .hra-hlava .hra-logo { background: var(--logo); color: var(--na-logu); }
.hlavicka .prepinac-motivu { background: transparent; color: var(--text); }
.tym-menu-panel { color: var(--text); }
@media (min-width: 640px) {
  .hra-hlava { border-color: var(--lista); }
}

/* 11/2026 – pravidla týmu: kdo smí co (app/lib/Rizeni.php) */
.napoveda-kapitan { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--okraj); border-radius: var(--r); }
.napoveda-kapitan .ikona { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.odpoved-kapitan { margin-top: 16px; }
.nav-kapitan { margin: 12px 0 0; }
.pravidla-tymu { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.zastupce-radek { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.zastupce-radek .pole { flex: 1; min-width: 0; margin: 0; }
.volba-cesty[disabled] { cursor: default; opacity: .75; }

/* Uzavřený režim (11/2026) – správa přístupu */
.pristup-rezim { margin: 4px 0 12px; }

/* H34-1: úvodní obrázek hry – karta v katalogu (náhled 16 : 9 přes celou šířku karty) a detail hry */
.karta-hry-obrazek { display: block; margin: -20px -20px 8px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--zaobleni) var(--zaobleni) 0 0; background: var(--primarni-svetla); }
.karta-hry-obrazek img, .hra-obrazek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hra-obrazek { margin: 0 0 16px; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; overflow: hidden; border: 1px solid var(--okraj);
  border-radius: var(--zaobleni); background: var(--primarni-svetla); }
.obrazek-hry-nahled { margin: 0; max-width: 360px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--okraj); border-radius: var(--r); }
.obrazek-hry-nahled img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   11/2026 – výpadky signálu a opakované dotazy na polohu (zpětná vazba z testování)
   ===================================================================== */
.nav-rada { margin: 8px 0 0; }
.nav-rada > summary { cursor: pointer; color: var(--text-tlumeny); font-size: .9rem; }
.nav-rada[open] > summary { margin-bottom: 4px; }
.bez-signalu-pruh { margin-bottom: 12px; }
.offline [data-offline-stav] { font-weight: 600; }