/* ==========================================================================
   Svatba u Větrné Víly — styly

   Paleta je navzorkovaná z fotky květnaté louky, kterou vybral klient:
   medián sytých pixelů v každém pásmu odstínu. Nic není odhadnuté od oka.
   Všechny dvojice text/pozadí jsou ověřené na WCAG AA (≥4.5:1).

   Hero je vždycky tmavý, i ve světlém režimu — je to les za loukou.
   ========================================================================== */

/* Fraunces: old-style serif s měkkými tahy. Dva subsety kvůli české
   diakritice; prohlížeč si stáhne jen ten, který na stránce potřebuje. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}

:root {
  /* Navzorkováno z fotky */
  --les: #0C1A06;
  --mak: #CC030E;
  --chrpa: #175ACA;
  --pryskyrnik: #D2BB31;
  --kopretina: #ECEEE7;
  --trava: #99B949;
  --trava-tmava: #496E16;

  /* Mimo louku: barva "kemp" na mapce ubytování (tools/mapa.py). Není
     z fotky ani odvozená — vybraná tak, aby jako plocha (≥3:1) obstála
     v obou motivech zároveň, --pryskyrnik na to nejde (1.75:1 na světlém). */
  --kemp: #8F740C;

  /* Obloha v heru — mění se podle denní doby návštěvníka, přepisuje je
     assets/obloha.js (tam i výpočet kontrastu). Tady je polední obloha
     pro případ bez JS. Nezávislé na přepínači světlý/tmavý motiv, proto
     i text v heru má vlastní barvy — var(--text) by se s přepínačem
     měnilo a na obloze mohlo zmizet. */
  --hero-bg: #6FB2EC;        /* vrch oblohy, i pod navigací */
  --hero-stred: #A0CEF2;     /* u horní hrany louky */
  --hero-obzor: #D2EAF8;     /* za loukou, bez textu */
  --hero-text: #0C1A06;
  --hero-text-tlumeny: #2E480F;
  --hero-akcent: #403E08;
  --hero-aktivni: #7F0C0B;

  /* Odvozené pro text a plochy */
  --pozadi: #F3F5EC;
  --text: #0C1A06;
  --text-tlumeny: #4F5A47;
  --odkaz: #CC030E;
  --odkaz-aktivni: #A5060F;
  --linka: #D3DAC3;
  --linka-silna: #B9C4A3;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --text-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sirka: 74rem;
  --okraj: 1.25rem;
  --sloupec-nadpisu: 13rem;

  /* Sytost vzoru na pozadí sekcí (assets/vzor.svg). Dřív to bylo jen
     0.05 jako fallback přímo v opacity: var(--sytost-vzoru, 0.05) níž,
     na bílém pozadí to bylo skoro neviditelné. Deklarované tady jako
     skutečná proměnná, ať se to příště hledá snáz. */
  --sytost-vzoru: 0.1;

  /* Výška louky. Vázat ji jen na šířku okna nestačilo: na širokém a nízkém
     okně notebooku pak louka i s textem přerostla obrazovku a spodek okna
     ji uřízl. Proto i strop podle výšky.

     Zmenšování je bezpečné — nižší rámeček je v poměru UŽŠÍ než 10:1
     samotného SVG, takže object-fit dál ořezává boky a ne hlavy rostlin.
     Nebezpečné by bylo jen zvyšování šířky bez výšky. */
  --vyska-louky: clamp(9rem, min(20vw, 38vh), 22rem);
}

:root[data-theme="dark"] {
  --pozadi: #0C1A06;
  --text: #F3F5EC;
  --text-tlumeny: #A8B69C;
  --odkaz: #F2564F;
  --odkaz-aktivni: #F5776F;
  --chrpa: #7FA5F0;
  --linka: #24391C;
  --linka-silna: #3A5230;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pozadi: #0C1A06;
    --text: #F3F5EC;
    --text-tlumeny: #A8B69C;
    --odkaz: #F2564F;
    --odkaz-aktivni: #F5776F;
    --chrpa: #7FA5F0;
    --linka: #24391C;
    --linka-silna: #3A5230;
  }
}

* { box-sizing: border-box; }

/* Atribut hidden musí přebít i vlastní pravidla. Prohlížeč ho řeší
   výchozím display: none, jenže to má nejnižší prioritu — stačí kdekoli
   .neco { display: grid } a hidden přestane fungovat. Přesně na tohle
   jsem najel u formuláře potvrzení účasti. */
[hidden] { display: none !important; }

/* Přepínač jazyka CZ/EN. Každý překládaný kus obsahu existuje na
   stránce dvakrát (.jazyk-cs a .jazyk-en jako sourozenci, nebo jako
   dvojice <span> uvnitř jednoho nadpisu/odkazu) a tohle přepíná, který
   z nich je vidět. Bez data-jazyk (výchozí stav, i bez JS) vyhrává
   čeština — schválně přes :not(), ne jen [data-jazyk="cs"], ať to
   funguje i dřív, než main.js stačí proběhnout. */
:root[data-jazyk="en"] .jazyk-cs { display: none; }
:root:not([data-jazyk="en"]) .jazyk-en { display: none; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font-family: var(--text-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Obrysy lučních rostlin za obsahem, jako doodle pozadí ve WhatsAppu.

   Jeden černobílý soubor (assets/vzor.svg) funguje pro oba motivy díky
   masce: barvu dodává background-color na tomhle pseudoprvku, masku jen
   tvar. Proto žádné druhé vygenerování pro tmavý režim.

   Hero a patička mají vlastní neprůhledné pozadí (var(--les)), takže
   ho tenhle vzor sám od sebe nepřekryje — je vidět jen za obsahem sekcí
   mezi nimi, ne za loukou.

   position: fixed drží vzor jako papírovou texturu ukotvenou k oknu,
   ne ke scrollované stránce — při rolování se tak netahá spolu s textem. */
/* Bez podpory masky se prvek vůbec nevytvoří — jinak by se bez ní
   vykreslila plná barevná vrstva přes celou stránku místo textury,
   což je horší než žádný vzor. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--text);
    opacity: var(--sytost-vzoru);
    -webkit-mask-image: url("vzor.svg");
    mask-image: url("vzor.svg");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 640px 640px;
    mask-size: 640px 640px;
  }
}

:root[data-theme="dark"] { --sytost-vzoru: 0.07; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sytost-vzoru: 0.07; }
}

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.015em;
}

h3 {
  font-family: var(--text-font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.25rem;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--odkaz);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--odkaz-aktivni); text-decoration-thickness: 2px; }

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

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mak);
  color: #fff;
  padding: 0.75rem 1rem;
}
.preskocit:focus { left: 0; }

.obsah-sirka {
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--okraj);
}

/* ================= Navigace =================
   Nad heroem splývá s tmou, po odscrollování se z ní stane světlý pruh.
   Třídu .odscrollovano přepíná main.js. */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Pevná barva, ne transparent. Hero pod navigací začíná kvůli
     zápornému margin-top o pár px výš, ale ne přesně o tolik, kolik
     navigace sama měří na výšku — zbyde škvíra pár px, kterou by
     transparent nechal prosvítat holým pozadím <body>. S dřívějším
     tmavým heroem to splývalo (skoro stejná barva), na pevné pastelové
     zelené už ne — proto pevná barva místo spoléhání na přesnou
     aritmetiku výšky. */
  background: var(--hero-bg);
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}

.nav-vnitrek {
  max-width: var(--sirka);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem var(--okraj);
}

.nav-odkazy {
  display: flex;
  flex: 1;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  /* Vyblednutí okraje, za kterým lišta pokračuje — jinak na telefonu
     useknuté „Ubytován“ nenaznačuje, že jde posunout. Třídy přepíná
     assets/main.js podle polohy posunu; bez nich je maska neviditelná. */
  --vybledni-l: 0px;
  --vybledni-p: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--vybledni-l), #000 calc(100% - var(--vybledni-p)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--vybledni-l), #000 calc(100% - var(--vybledni-p)), transparent);
}
.nav-odkazy::-webkit-scrollbar { display: none; }
.nav-odkazy.dal-vlevo { --vybledni-l: 1.5rem; }
.nav-odkazy.dal-vpravo { --vybledni-p: 2.5rem; }

/* Dokud nav sedí nad heroem (žádné .odscrollovano), prosvítá jeho
   pozadí — barvy tu proto musí číst na var(--hero-bg), ne na --pozadi.
   Obloha se mění s denní dobou, takže barvy jsou var(--hero-text) /
   var(--hero-aktivni) z assets/obloha.js, který kontrast hlídá i
   s touhle opacitou započítanou (0.75 → AA 4,5:1, 0.6 → 3:1). */
.nav-odkazy a {
  display: block;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--hero-text);
  opacity: 0.75;
  transition: opacity 0.15s, color 0.15s;
}
.nav-odkazy a:hover { opacity: 1; color: var(--hero-text); }
.nav-odkazy a[aria-current="true"] { opacity: 1; color: var(--hero-aktivni); }

.prepinac {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--hero-text);
  opacity: 0.6;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.prepinac:hover { opacity: 1; }

/* Přepínač jazyka — sdílí vzhled s .prepinac (motiv), jen širší kvůli
   dvěma písmenům místo ikony. Text tlačítka je CÍLOVÝ jazyk (na co
   klik přepne), ne aktuální — proto ho assets/main.js po každém
   přepnutí přepisuje na opačnou zkratku. */
.prepinac-jazyk {
  width: auto;
  min-width: 2.25rem;
  padding-inline: 0.35rem;
  font-family: var(--text-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav.odscrollovano {
  background: var(--pozadi);
  border-bottom-color: var(--linka);
}
.nav.odscrollovano .nav-odkazy a,
.nav.odscrollovano .prepinac { color: var(--text); }
.nav.odscrollovano .nav-odkazy a[aria-current="true"] { color: var(--odkaz); opacity: 1; }

/* ================= Hero =================
   Obloha podle denní doby, ze spodní hrany vyrůstá louka. Barva obzoru
   začíná až u horní hrany louky — za textem je jen vrch a střed, se
   kterými obloha.js hlídá kontrast.

   Hero je vysoký přesně na obrazovku (svh kvůli mobilním lištám), takže
   louka je vidět hned po otevření a nemusí se k ní scrollovat. Text je
   svisle vystředěný ve zbytku po odečtení louky. */

.hero {
  position: relative;
  background-color: var(--hero-bg);
  background-image: linear-gradient(to bottom,
    var(--hero-bg) 0%,
    var(--hero-stred) calc(100% - var(--vyska-louky)),
    var(--hero-obzor) 100%);
  color: var(--hero-text);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -3rem;
  padding-top: 3rem;
  overflow: hidden;
}

.hero-text {
  position: relative;
  z-index: 1;  /* nad plátnem světlušek */
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding: 1rem var(--okraj) calc(var(--vyska-louky) + 1rem);
}

.hero h1 {
  /* Jedno jméno vedle druhého na jednom řádku (dřív bylo druhé jméno
     odsazené na nový řádek jako dva stonky vedle sebe) — proto tu teď
     musí být i min() proti vw, ne jen proti vh, ať "Ája a Daník" jako
     jeden dlouhý řádek nepřeteče úzké okno. */
  font-size: clamp(2rem, min(7.5vw, 13vh), 6rem);
  font-weight: 300;
  color: var(--hero-text);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.hero-udaje {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--hero-text);
  max-width: 30rem;
}
.hero-udaje .misto {
  display: block;
  color: var(--hero-text-tlumeny);
  margin-top: 0.35rem;
}

.odpocet {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-size: 0.9375rem;
  color: var(--hero-text-tlumeny);
}
.odpocet strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--hero-akcent);
  font-variant-numeric: tabular-nums;
  padding-inline: 0.1em;
}

/* Louka je samostatný soubor, ne inline SVG: definice rostlin jsou velké
   a takhle se cachují zvlášť místo aby zdržovaly první vykreslení stránky.

   object-fit: cover s ukotvením dolů ořízne boky, ne vršky. Aby to tak
   zůstalo, nesmí být rámeček širší v poměru než samotné SVG (10:1) —
   o to se stará --vyska-louky, která se váže na šířku okna. */
.louka {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--vyska-louky);
  object-fit: cover;
  object-position: 50% 100%;
  pointer-events: none;
  animation: louka-nastup 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Když se obrázek vymění za živé SVG (assets/vitr.js), nástup už proběhl
   — nesmí se přehrát znovu. Velikost řeší preserveAspectRatio uvnitř SVG,
   které dělá totéž co object-fit: cover s ukotvením dolů. */
.louka-ziva {
  display: block;
  animation: none;
}

/* Živá louka je pokaždé jinak rozsázená, takže výchozí obrázek se do
   výměny neukazuje (jinak by louka přeskočila) a nástup přehraje až ona. */
.louka-ceka img.louka { visibility: hidden; }
.louka-ziva.louka-nastup {
  animation: louka-nastup 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Hvězdy svatební noci (tools/hvezdy.py) — skutečné polohy 15. 5. 2027
   ve 23:30 nad Žibřidicemi. Spodní hrana obrázku je obzor, louka ho
   překryje; ořezávají se boky, ne obzor. Viditelné jen s data-noc
   z assets/obloha.js; bez JS zůstanou skryté s denní oblohou. */
.hvezdy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s;
}
[data-noc] .hvezdy { opacity: 1; }

/* Měsíc (assets/mesic.js) — za loukou, polohu a velikost nastavuje skript. */
.mesic {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

/* Světlušky v noci a vlaštovky ve dne (assets/svetlusky.js,
   assets/vlastovky.js) — nad loukou, pod textem. */
.svetlusky,
.vlastovky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Obal, za který se rostlina naklání. Otáčí se kolem paty, ne kolem
   středu — jinak by ve větru poskakovala nahoru a dolů. */
.kytka {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Nízká okna (notebook s velkým prohlížečem, telefon na šířku). Text
   a louka se tam do obrazovky nevejdou v běžných rozměrech, takže se
   utáhne odsazení a zmenší jména. Odsazení hera nahoře se nesahá — drží
   překryv s navigací a bez něj by nad heroem probleskl světlý pruh. */
@media (max-height: 700px) {
  :root { --vyska-louky: clamp(6rem, min(20vw, 30vh), 14rem); }
  .hero-text {
    padding-top: 0.25rem;
    padding-bottom: calc(var(--vyska-louky) + 0.5rem);
  }
  .hero h1 {
    font-size: clamp(1.9rem, min(9vw, 12vh), 4rem);
    margin-bottom: 0.6rem;
  }
  .odpocet { margin-top: 0.6rem; }
}

/* Telefon na šířku. I po utažení se sem jména, datum, odpočet a louka
   nevejdou — odpočet jde pryč jako to nejmíň podstatné, ať zbyde místo
   na to, kvůli čemu tu lidi jsou: kdo, kdy a kde. */
@media (max-height: 450px) {
  :root { --vyska-louky: clamp(4.5rem, min(20vw, 26vh), 10rem); }
  .hero h1 { font-size: clamp(1.6rem, min(8vw, 14vh), 3rem); }
  .odpocet { display: none; }
}

/* Jediná animace na stránce. Louka jednou najede zespodu na místo.
   Schválně je to pohyb celé louky, ne růst jednotlivých rostlin zevnitř
   SVG: kdyby animace neproběhla, louka je prostě na místě, místo aby
   zůstala slisovaná u země. */
@keyframes louka-nastup {
  from { transform: translateY(14%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .louka { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ================= Sekce =================
   Nadpis vlevo v užším sloupci, obsah vpravo. Text zarovnaný vlevo,
   nikde nic vycentrovaného. */

.sekce {
  position: relative;
  border-top: 1px solid var(--linka);
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.sekce:first-of-type { border-top: 0; }

/* Kytky u kraje — Andrein požadavek na růžové prvky (tools/kytky-okraj.py).
   Sedí jen v okraji mimo sloupec obsahu (--sirka), takže text nikdy
   nepřekryjí — proto se objeví, teprve když je ten okraj dost široký. */
.sekce::after {
  content: "";
  display: none;
  position: absolute;
  bottom: 2rem;
  width: 3.7rem;
  height: 9rem;
  background: url("kytky-okraj.svg") no-repeat center / contain;
  pointer-events: none;
}
@media (min-width: 90rem) {
  .sekce::after { display: block; }
  .sekce:nth-of-type(odd)::after {
    right: calc(50% - (var(--sirka) / 2) - 2rem - 3.7rem);
  }
  .sekce:nth-of-type(even)::after {
    left: calc(50% - (var(--sirka) / 2) - 2rem - 3.7rem);
    transform: scaleX(-1);
  }
}

.sekce-mrizka {
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--okraj);
}

@media (min-width: 60rem) {
  .sekce-mrizka {
    display: grid;
    grid-template-columns: var(--sloupec-nadpisu) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

.sekce h2 {
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  margin-bottom: 1.25rem;
}
@media (min-width: 60rem) {
  .sekce h2 {
    font-size: 1.75rem;
    margin-bottom: 0;
    position: sticky;
    top: 4.5rem;
  }
}

.telo { max-width: 40rem; }
.telo > * + * { margin-top: 1.1em; }

.uvodni {
  font-size: 1.1875rem;
  line-height: 1.55;
}

.tlumene { color: var(--text-tlumeny); }

/* Místo konání */

.misto-nazev {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.35rem;
}
.adresa {
  font-style: normal;
  color: var(--text-tlumeny);
  margin-bottom: 0.75rem;
}

/* Program — skutečná posloupnost, proto časová osa. */

.program {
  margin: 0;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0 1.5rem;
}
.program dt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--odkaz);
  padding-top: 0.2rem;
}
.program dd {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--linka-silna);
  position: relative;
}
.program dd::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--odkaz);
}
.program dd:last-of-type { margin-bottom: 0; padding-bottom: 0.25rem; }
.program dd p {
  margin: 0;
  color: var(--text-tlumeny);
  font-size: 0.9375rem;
}

/* Galerie */

.galerie {
  columns: 3 13rem;
  column-gap: 0.5rem;
}
.galerie button {
  all: unset;
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  cursor: zoom-in;
  break-inside: avoid;
  background: var(--linka);
}
.galerie img {
  width: 100%;
  height: auto;
  display: block;
}
.galerie button:focus-visible { outline: 2px solid var(--odkaz); outline-offset: 2px; }

.galerie-prazdno {
  color: var(--text-tlumeny);
  border-left: 2px solid var(--pryskyrnik);
  padding-left: 1.25rem;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 26, 6, 0.96);
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem 4rem;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.lb-tlacitko {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: rgba(236, 238, 231, 0.12);
  border: 0;
  border-radius: 50%;
  color: var(--kopretina);
  font-size: 1.25rem;
  cursor: pointer;
}
.lb-tlacitko:hover { background: rgba(236, 238, 231, 0.26); }
.lb-zavrit { top: 1rem; right: 1rem; }
.lb-predchozi { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-dalsi { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-pocet {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--trava);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* Potvrzení účasti */

.potvrzeni {
  max-width: 34rem;
}
.termin {
  color: var(--text-tlumeny);
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
.tlacitko {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--mak);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.tlacitko:hover { background: var(--odkaz-aktivni); color: #fff; }

/* Formulář potvrzení účasti */

.formular {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.1rem;
}

.formular fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.pole {
  display: grid;
  gap: 0.3rem;
}
.pole > span {
  font-size: 0.9375rem;
  font-weight: 600;
}
.pole .napoveda {
  font-weight: 400;
  color: var(--text-tlumeny);
}

.formular input[type="text"],
.formular input[type="number"],
.formular textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--linka-silna);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
  width: 100%;
}
.formular textarea {
  resize: vertical;
  min-height: 3.5rem;
}
.formular input:focus-visible,
.formular textarea:focus-visible {
  border-color: var(--odkaz);
  outline: 1px solid var(--odkaz);
  outline-offset: 0;
}

/* Přepínače ano/ne. Radio je schované, ale zůstává v tabulátoru
   a ovládá se šipkami — proto jen průhledné, ne display: none. */
.volby {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.volba {
  position: relative;
}
.volba input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.volba span {
  display: block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--linka-silna);
  border-radius: 999px;
  font-size: 0.9375rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.volba input:checked + span {
  background: var(--mak);
  border-color: var(--mak);
  color: #fff;
}
.volba input:focus-visible + span {
  outline: 2px solid var(--odkaz);
  outline-offset: 2px;
}

.formular button {
  font: inherit;
  justify-self: start;
  background: var(--mak);
  color: #fff;
  border: 0;
  padding: 0.75rem 1.75rem;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.formular button:hover { background: var(--odkaz-aktivni); }
.formular button[disabled] { opacity: 0.6; cursor: default; }

.dekujeme {
  border-left: 3px solid var(--mak);
  padding-left: 1.5rem;
}
.dekujeme h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.chyba {
  color: var(--odkaz);
  font-size: 0.9375rem;
}

.jinak {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-tlumeny);
}

/* Patička */

.paticka {
  background: var(--les);
  color: var(--trava);
  padding: clamp(3rem, 7vw, 4.5rem) var(--okraj);
  text-align: center;
  font-size: 0.9375rem;
}
.paticka .jmena {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  color: var(--kopretina);
  margin-bottom: 0.4rem;
}


/* ================= Hra: Cesta na vrchol =================
   assets/hra.js. Plátno 160 × 144 px, na počítači zvětšené celým
   násobkem, na mobilu na šířku displeje (velikost nastavuje JS). Okno se
   ukáže, až když hra naběhne. Na dotykových zařízeních je pod plátnem
   řada tlačítek .hra-ovladac (výška --hra-ovladac). */

.hra {
  display: none;
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-top: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--linka-silna);
  outline: none;
}
.hra.pripravena { display: block; }
.hra:focus-visible { box-shadow: 0 0 0 2px var(--odkaz); }
.hra [hidden] { display: none !important; }

.hra canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Nápověda k ovládání: klávesnice, nebo dotyk */
.jen-dotyk { display: none; }

/* Tlačítka na dotyk: levý palec ◀ ▲, pravý palec A ▶ (pořadí v HTML).
   Držení nesmí rolovat stránkou, zvětšovat ani vyvolat menu. */
.hra-ovladac { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hra { --hra-ovladac: 5rem; }
  .hra:focus-visible { box-shadow: 0 0 0 1px var(--linka-silna); }   /* rámeček fokusu je pro klávesnici */
  .jen-klavesnice { display: none; }
  .jen-dotyk { display: block; }
  .hra-ovladac {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--hra-ovladac);
    padding: 0 0.5rem;
    background: var(--les);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  /* Na úzkém telefonu (320 px) se tlačítka zmenší, ať se vejdou všechna
     čtyři — aspect-ratio drží kolečko, i když se zúží. */
  .hra-ovladac button {
    flex: 0 1 3.75rem;
    min-width: 2.75rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: rgba(243, 245, 236, 0.16);
    color: #F3F5EC;
    font: 600 1.25rem/1 var(--text-font);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .hra-ovladac button.drzi { background: rgba(243, 245, 236, 0.38); }
  .hra-ovladac .hra-ovladac-a { background: var(--mak); }
  .hra-ovladac .hra-ovladac-a.drzi { background: var(--odkaz-aktivni); }
  .hra-ovladac-mezera { flex: 1; }
}

/* Panel přes plátno: úvod, pauza, konec. Text vlevo dole, jako jinde na webu.
   Tlačítka na dotyk (pod plátnem) nepřekrývá. */
.hra-panel {
  position: absolute;
  inset: 0 0 var(--hra-ovladac, 0px) 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 4%, 1.75rem);
  background: linear-gradient(to bottom, rgba(12, 26, 6, 0) 25%, rgba(12, 26, 6, 0.82));
  color: #F3F5EC;
}
.hra-panel > div { display: none; }
.hra-panel[data-typ="uvod"] .hra-panel-uvod,
.hra-panel[data-typ="pauza"] .hra-panel-pauza,
.hra-panel[data-typ="konec"] .hra-panel-konec { display: block; }
.hra-panel p { max-width: 26rem; font-size: 0.9375rem; line-height: 1.45; }
.hra-panel p + p { margin-top: 0.4rem; }
.hra-panel .hra-nadpis {
  font-family: var(--display);
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  line-height: 1.15;
  color: #fff;
}
.hra-panel .tlacitko { margin-top: 1rem; border: 0; cursor: pointer; font-family: inherit; }
.hra-panel .tlacitko:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bublina nad postavou — pozici počítá JS, tady jen vzhled. */
.hra-bublina {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #fff;
  color: #0C1A06;
  border: 2px solid #0C1A06;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.hra-bublina::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 8px;
  height: 8px;
  background: #fff;
  border: solid #0C1A06;
  border-width: 0 2px 2px 0;
  transform: translateX(-50%) rotate(45deg);
}

.hra-hud {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  width: max-content;
  max-width: calc(100% - 1rem);
  background: rgba(243, 245, 236, 0.9);
  color: #0C1A06;
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.hra-hud .mam { text-decoration: line-through; opacity: 0.55; }

.hra-titulek {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  padding-left: 1.25rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: #fff;
  text-shadow: 0 2px 0 #0C1A06, 0 0 12px rgba(12, 26, 6, 0.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}
.hra-titulek.videt { opacity: 1; transform: none; }
.hra-hud:not([hidden]) ~ .hra-titulek { top: 18%; }
.hra-titulek small {
  display: block;
  font-family: var(--text-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}