/* ══════════════════════════════════════════════════════════════════
   VARIANTA „PROJEKCE"
   Celá myšlenka: slovo je design. Proto tu nejsou karty, ikony, stíny
   ani přechody na pozadí — jediné, co má na ploše váhu, je jméno toho,
   co se dnes bude učit. Všechno ostatní ustupuje o krok dozadu.

   ── KULISA: PROSTŘEDÍ NAD HORIZONTEM ───────────────────────────────
   V pozadí leží místnost, ve které se ta simulace odehrává — ztlumená pod
   dvěma gradienty a končící na modré čáře. Je to KULISA, ne obsah: nic se
   z ní nemá číst, má jen dýchat za slovem, aby bylo poznat, že za tím
   jménem je místnost.

   PROČ SE SLOVO A OBRAZ MĚNÍ NARÁZ:
   protože k sobě patří. Dokud byly v pozadí snímky z jedné hry, patřit
   k sobě nemohly — „první pomoc" nevypadá jako terminál — a rotace proto
   běžely schválně mimo rytmus, aby netvrdily dvojici, která neexistuje.
   Od chvíle, kdy je v pozadí prostředí, ta dvojice existuje: první pomoc
   má ordinaci, požární poplach stanici, únik dat datacentrum. Běží tedy
   jeden časovač po 7 s a obraz se vymění přesně v okamžiku, kdy staré
   slovo dojde — nikdy tak není vidět místnost pod cizím nadpisem.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Paleta z kitu. Držíme se přesně jí, aby šly varianty porovnat. */
  --pozadi:      #04080d;
  --podklad:     #04101a;   /* neprůhledná deska pod formulářem */
  --chrom:       #3fc0e6;
  --chrom-tlum:  #2b8fae;
  --text:        #ffffff;
  --text-2:      #a8c6d2;
  --text-3:      #8fb0bd;
  --akcent:      #ffc04d;
  --chyba:       #ff6b60;
  --ok:          #5ee08a;

  /* Fonty se zásadně NENAČÍTAJÍ zvenčí — soubor musí fungovat offline.
     Když Rajdhani na stroji není, spadne to na system-ui a to je v pořádku:
     layout je stavěný tak, aby přežil i širší písmo. */
  --sans: "Rajdhani","Titillium Web", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, "Courier New", monospace;

  /* Velikost obřího slova. Dvě řádky si rezervujeme dopředu (viz .slovo-slot),
     aby vlasová linka pod slovem nikdy neposkočila, když přijde delší název. */
  --slovo: clamp(2.2rem, 6.4vw, 7rem);

  --okraj: clamp(1.5rem, 5vw, 5.5rem);
  /* Svislý okraj plochy má jméno, protože ho potřebují dva: plocha si ho
     dává jako odsazení a kulisa si ho odečítá, aby vylezla až k hraně okna. */
  --okraj-svisly: clamp(1.25rem, 3vw, 2.25rem);

  /* Krytí kulisy. Bylo .26, když kulisa ležela přes celé okno včetně
     formuláře a musela hlavně nepřekážet. Od chvíle, kdy končí na horizontu
     a pod čarou je čerň, má opačnou práci: nad vstupem má být z místnosti
     doopravdy VIDĚT. Proto .44 — a clona vpravo (viz .zaves) povolí,
     aby se ta viditelnost sešla přesně nad formulářem. */
  --kryti-kulisy: .44;
}

*{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }

body{
  background: var(--pozadi);          /* plochá čerň, žádný gradient ani vinětace */
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── kulisa: prostředí NAD horizontem ──────────────────────────
   Dřív byla `fixed` přes celé okno a vstup stál uprostřed obrázku.
   Teď je to položka mřížky přes první tři řádky — hlavička, jeviště
   a horizont — takže její spodní hrana JE ta modrá čára. Pod čarou
   zůstane čistá čerň a formulář na ní stojí, místo aby v ní plaval.

   Proč to není jen `height: 60%`: horizont si výšku bere podle obsahu
   (delší slovo, zalomený pás prostředí) a procento by se od něj odlepilo.
   Takhle se čára a hrana obrázku nemůžou rozejít ani o pixel.

   Záporné okraje ji protahují pod odsazení plochy až k hraně okna —
   kulisa má být na celou šířku, obsah ne.

   Pod ní je pořád plná čerň --pozadi, takže když se soubor s obrázkem
   nenajde, nezmizí nic než ta kulisa. Vrstvy jsou dvě, aby se dalo
   prolínat; obě startují na opacity 0 a rozsvítí je až skript, a to
   teprve tehdy, když se obrázek prokazatelně načetl. */
.kulisa{
  grid-row: 1 / 4;              /* hlavička · jeviště · horizont */
  grid-column: 1;
  margin: calc(-1 * var(--okraj-svisly)) calc(-1 * var(--okraj)) 0;
  position: relative;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;         /* kulisa nesmí brát kliknutí formuláři */
  background: var(--pozadi);
}
.kulisa img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;     /* těžiště snímků je nad stolem, ne uprostřed */
  /* Lehké rozostření. Dvě pixely stačí: kompozice místnosti zůstane
     poznat, drobnosti se rozpadnou na dojem — a kulisa se tak nezačne
     chovat jako obsah, který se oko snaží číst místo slova.
     Vedlejší efekt je vítaný: rozostření odsaje z okrajů jas a snímek
     se sám od sebe ztratí do černi u kraje obrazovky.
     Jas se k němu přidává za běhu (`expozice()`), rozostření se nesmí
     přepsat — bez něj by kulisa ostrostí soupeřila se slovem. */
  filter: blur(2px);
  opacity: 0;
  /* Prolnutí 900 ms — nad požadovaným minimem 600 ms. `linear` schválně:
     dvě vrstvy se pak sečtou na skoro konstantní jas a nevznikne propad. */
  transition: opacity .9s linear;
}
.kulisa img.vidno{ opacity: var(--kryti-kulisy); }

/* Závěs: dva gradienty přes snímek. Rozhodují o tom, KDE je z místnosti
   vidět nejvíc — a to není náhoda, je to jediné místo, kde se nic nečte.

   ZLEVA DOPRAVA. Vlevo drží nejsilnější clona (.86), protože tam stojí obří
   slovo, pás prostředí a návěstí. Vpravo clona povolí až na .10: tam je nad
   čarou prázdno a přesně nad ním pak dole stojí vstup. Prostředí se tak
   ukazuje NAD formulářem, ne za písmeny.

   SHORA DOLŮ. Nahoře clona srazí stropní světla, aby značka a odznak BETA
   měly na čem stát. Ke spodní hraně mírně přitvrdí — spodní hrana je ta
   modrá čára a ostrý přechod z jasného snímku do černě by z ní udělal šev.

   Dole už závěs nemá co dělat: kulisa končí na horizontu a pod ním je
   plná čerň. Proto tu není žádné .94 na konci jako dřív. */
.zaves{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(4,8,13,.86) 0%,  rgba(4,8,13,.80) 26%,
      rgba(4,8,13,.62) 48%, rgba(4,8,13,.28) 66%,
      rgba(4,8,13,.06) 82%, rgba(4,8,13,.12) 100%),
    linear-gradient(180deg,
      rgba(4,8,13,.78) 0%,  rgba(4,8,13,.30) 22%,
      rgba(4,8,13,.14) 58%, rgba(4,8,13,.18) 86%,
      rgba(4,8,13,.40) 100%);
}

.plocha{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;   /* hlavička · projekce · horizont · ovládání */
  padding: var(--okraj-svisly) var(--okraj) clamp(1.5rem, 3vw, 2.5rem);
}
/* Řádek si určuje KAŽDÁ položka sama. Kulisa zabírá první tři a kdyby se
   ostatní skládaly automaticky, mřížka by ty buňky považovala za obsazené
   a odsunula hlavičku s jevištěm pod obrázek. */
/* Sloupec taky ručně. Se samotným `grid-row` si mřížka pro každou položku
   založila NOVÝ sloupec vedle kulisy a celý obsah se odsunul doprava. */
.hlavicka{ grid-row: 1; grid-column: 1; }
.jeviste { grid-row: 2; grid-column: 1; }
.horizont{ grid-row: 3; grid-column: 1; }
.pult    { grid-row: 4; grid-column: 1; }
/* A obsah musí nad kulisu. Bez vlastního `z-index` by text zůstal ve vrstvě
   pod ní — kulisa je totiž polohovaná a ta se kreslí až nad běžný tok. */
.hlavicka, .jeviste, .horizont, .pult{ position: relative; z-index: 1; }

/* ─── hlavička ─────────────────────────────────────────────────── */
.hlavicka{
  display: flex;
  align-items: center;
  gap: .9rem;
}
.znacka{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);           /* 20,1 : 1 na pozadí */
  margin: 0;
  line-height: 0;               /* uvnitř jsou jen obrázky — řádek písma by pod nimi nechal mezeru */
  display: flex;
  align-items: center;
  gap: .55rem;                  /* mezera kostka–nápis z originálu: 27 px na 96 px výšky */
}
/* Logo drží výšku řádku hlavičky (tlačítka jazyka 48 px): 40–44 px; kostka
   je skoro čtverec, nápis 3,9 : 1, dohromady ≈ 210–235 px. `width`/`height`
   na `<img>` jsou rozměry souboru, ne zobrazení — drží poměr stran, než se
   obrázek stáhne, aby stránka pod ním neposkočila (`P745` dodatek). Nápis
   sedí o vlásek níž než kostka: má patky písmen „h" a „k" nahoře a
   nic dole, takže optický střed má výš než geometrický. */
.znacka picture, .znacka img{ display: block; }
.znacka img{ height: clamp(2.5rem, 3.2vw, 2.75rem); width: auto; }
.znacka .logo-slovo{ height: clamp(2rem, 2.6vw, 2.2rem); margin-top: .15rem; }
/* Na 400 px širokém okně se logo (176 px) s odznakem BETA a přepínačem jazyka
   do řádku nevešlo o 12 px a vzniklo vodorovné rolování — sada 14 to chytila.
   Slovo „HOLODECK" mělo 130 px; logo se tu proto zmenší na výšku 32 / 26 px
   (celkem ≈ 142 px), nic se nezalamuje a nic se neschovává. */
@media (max-width: 480px){
  .znacka img{ height: 2rem; }
  .znacka .logo-slovo{ height: 1.6rem; margin-top: .1rem; }
}
.beta{
  font-family: var(--mono);
  font-size: .8125rem;          /* 13 px — menší už je jen ozdoba, ne údaj */
  letter-spacing: .22em;
  color: var(--chrom);          /* 9,5 : 1 na pozadí */
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  padding: .22em .6em .18em;
  line-height: 1;
}

/* ─── projekční plocha ─────────────────────────────────────────── */
.jeviste{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;    /* slovo dosedá na horizont, ať je delší nebo kratší */
  padding-bottom: clamp(1.2rem, 2.5vw, 2.4rem);
  min-height: clamp(11rem, 30vh, 22rem);
}
.navesti{
  font-family: var(--mono);
  font-size: .9375rem;          /* 15 px: návěstí je popisek slova, má se dát přečíst */
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-2);         /* 11,2 : 1 */
  margin: 0 0 clamp(.5rem, 1vw, .9rem);
}
.slovo-slot{
  /* Rezerva na dvě řádky slova. Bez ní by se při delším názvu posunul horizont
     i celý formulář — a to je přesně ten druh pohybu, který ruší při čtení.
     Návěstí je uvnitř a odspodu, aby drželo u slova a prázdno zbylo nahoře. */
  min-height: calc(var(--slovo) * 1.86 + 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#slovo{
  font-size: var(--slovo);
  line-height: .93;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--text);           /* velký text, 20,1 : 1 — daleko nad 3 : 1 */
  margin: 0;
  /* Prolnutí a mírný posun. Žádné otáčení, žádné 3D. */
  transition: opacity .62s ease, transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
#slovo.mizi{     opacity: 0; transform: translateY(-14px); }
#slovo.prichazi{ opacity: 0; transform: translateY(14px); transition: none; }

/* Pás prostředí. V pozadí se střídají MÍSTNOSTI, ze kterých se simulace
   staví — a tenhle pás říká, které to jsou a která je zrovna vidět.
   Zároveň je to ten vypínač, který tu musí být: co se mění samo, musí jít
   zastavit (WCAG 2.2.2). Klepnutí na prostředí ho připíchne a tím zastaví
   VŠECHNO, co se hýbe — slovo, kulisu i tepající bod. Druhé klepnutí na
   totéž prostředí rotaci zase pustí.
   Je to lepší než holé „zastavit": člověk nezastaví jen pohyb, ale vybere
   si, na čem chce zůstat stát. A terč je pořád 48 px. */
.ovladani{
  margin-top: 1.6rem;
}
.prostredi{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dlazdice{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* 3rem, ne 48px. Když si člověk zvětší písmo v prohlížeči, roste rem —
     a s ním terč. S pevnými pixely rostly jen popisky kolem a ovládání
     zůstalo stejně malé: stránka vypadala, že na nastavení reaguje, ale
     to, co se ovládá, se nezvětšilo. Při výchozím písmu je 3rem = 48 px,
     tedy přesně dolní mez, kterou si projekt drží. */
  min-height: 3rem;
  padding: 0 .95rem;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--text-2);         /* 11,2 : 1 na pozadí */
  background: transparent;
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
/* `background: transparent` tu NENÍ navíc. Obecné `button:hover` na téhle
   stránce plní tlačítko azurovou (#58cced) a `button:active` tmavší — je to
   stavěné pro velké tlačítko „Vstoupit do lekce". Dlaždice je taky <button>,
   takže si to zdědí: při najetí myší by se rozsvítila celá azurově a světle
   modrý text na ní klesl na 1,0 : 1. Vypadalo by to jako závada a nedalo by
   se to přečíst. Proto se obojí ruší výslovně. */
.dlazdice:hover,
.dlazdice:active{ color: var(--text); background: transparent; border-color: var(--chrom); }
/* Které prostředí je zrovna v pozadí. Nese to OBOJÍ — barva i proužek vlevo —
   aby to nestálo jen na barvě; kdo barvy nerozliší, pozná to podle proužku. */
.dlazdice[aria-current="true"]{
  color: var(--text);
  border-color: var(--chrom);
  box-shadow: inset 3px 0 0 var(--akcent);
}
/* Připíchnuté prostředí: rotace stojí. Plný rámeček říká „tady jsme zůstali". */
.dlazdice[aria-pressed="true"]{
  color: var(--text);
  border-color: var(--akcent);
}
/* Značka pauzy na té dlaždici, která je zrovna v pozadí. Je to JEDINÁ
   viditelná stopa po tom, že se pásem dá střídání zastavit — řádek
   s nápovědou pod slovem už není. Symbol, ne slovo: nezabere řádek,
   nepotřebuje překlad a ⏸/▶ zná i ten, kdo nečte anglicky. */
.dlazdice-znacka{
  font-size: .8125rem;          /* 13 px — značka, ne text ke čtení */
  line-height: 1;
  color: var(--akcent);         /* 12,3 : 1 na pozadí */
}
.dlazdice-znacka:empty{ display: none; }


/* Statický seznam — ukáže se při vypnutých animacích i po ručním zastavení. */
.seznam-slov{
  display: none;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);         /* 11,2 : 1 */
  font-size: 1.05rem;
  max-width: 46rem;
}
.seznam-slov li{ display: inline; }
.seznam-slov li + li::before{ content: " · "; color: var(--chrom-tlum); }
/* Po ručním zastavení platí totéž co při vypnutých animacích: místo jednoho
   slova je vidět celý seznam, takže vypnutí nic neubere. */
/* Pozor na to, co se sem chce dopsat: `body.klid .seznam-slov{display:block}`
   tu bylo a bylo to vada. Při ručním zastavení se seznam objevil, jeviště
   dosedá odspodu, a celý pás dlaždic vyskočil o 66–98 px nahoru — přesně
   zpod prstu, který právě klepl. Druhé klepnutí na totéž místo, jediný
   způsob, jak rotaci zase pustit, pak dopadlo vedle.
   Seznam má smysl jen tehdy, když se rotace NIKDY nespustí (systémově
   vypnuté animace, viz níž) — tam vzniká rovnou a nic se nehýbe. Při
   ručním zastavení je zbytečný: slovo, na kterém se zastavilo, je vidět. */

/* ─── přepínač jazyka ──────────────────────────────────────────────
   Dvě tlačítka, ne rozbalovací seznam. Seznam schová druhou možnost,
   dokud ho člověk neotevře, a stojí klepnutí navíc — u trvalé podmínky
   projektu (ovládání pro staršího člověka) je vidět obojí naráz jediné
   správné řešení. Terč 48 px jako všude jinde.
   Sedí v hlavičce vpravo, tedy co nejdál od obřího slova: je to nastavení
   stránky, ne součást sdělení. */
.jazyk{
  margin-left: auto;
  display: flex;
  gap: .4rem;
}
/* `display: flex` výš přebíjí výchozí pravidlo prohlížeče pro `hidden`, takže
   samotný atribut by skupinu neschoval. Tenhle řádek to vrací — a je tu proto,
   aby se přepínač dal vrátit odebráním `hidden` ve značce (`P951`). */
.jazyk[hidden]{ display: none; }
.jazyk-tlacitko{
  min-width: 3rem;              /* rem, ať terč roste se zvětšeným písmem */
  min-height: 3rem;
  padding: 0 .7rem;
  font-family: var(--mono);
  font-size: .9375rem;          /* 15 px */
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--text-2);         /* 11,2 : 1 na pozadí */
  /* PŘEPÍNAČ SI NESE VLASTNÍ PODKLAD (1. 9. 2026, `P131`).

     Do té doby byl průhledný a spoléhal na to, že za ním je tmavá stránka —
     komentář o řádek výš („11,2 : 1 na pozadí") měřil právě proti ní. Jenže
     přepínač stojí v pravém horním rohu, tedy tam, kde závěs pouští kulisu
     skoro celou, a kulisa se střídá. Jakmile pod ním přistálo něco světlého,
     spadl kontrast na **2,07 : 1** — naměřeno sadou 14 ve chvíli, kdy se na
     první dlaždici dostal snímek uspořádání (`P130`).

     Podklad je proto vlastní a neprůsvitný natolik, aby na tom nezáleželo.
     Není to úprava vzhledu kvůli jednomu obrázku — je to odstranění
     závislosti na tom, co se zrovna střídá vzadu. */
  background: rgba(4, 8, 13, .78);
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  cursor: pointer;
}
/* Obecné `button:hover` plní tlačítko azurovou — je stavěné pro velké
   tlačítko formuláře. Tady se to musí zrušit, jinak by se přepínač při
   najetí myší rozsvítil a text na něm zmizel. Táž past jako u dlaždic. */
.jazyk-tlacitko:hover,
.jazyk-tlacitko:active{ color: var(--text); background: rgba(4, 8, 13, .78); border-color: var(--chrom); }
/* Vybraný jazyk nese OBOJÍ — barvu i proužek — aby to nestálo jen na barvě. */
.jazyk-tlacitko[aria-pressed="true"]{
  color: var(--text);
  border-color: var(--chrom);
  box-shadow: inset 0 -3px 0 var(--akcent);
}

/* ─── horizont: jediná ozdoba, co tu je ────────────────────────── */
.horizont{
  position: relative;
  height: 1px;
  background: linear-gradient(90deg,
      var(--chrom-tlum) 0%, var(--chrom-tlum) 58%, rgba(43,143,174,0) 100%);
}
/* Pomalu pulzující bod. Sedí na lince v prázdnu vlevo — nad ním ani pod ním
   není nic ke čtení, takže neruší žádný text. */
.bod{
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px; height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--chrom);
  animation: dech 4.2s ease-in-out infinite;
}
@keyframes dech{
  0%, 100%{ opacity: .28; transform: scale(.8); }
  50%     { opacity: 1;   transform: scale(1); }
}
/* Když člověk stiskne vypínač, stojí opravdu všechno — i bod. Jinak by
   tlačítko lhalo: „zastavit" má znamenat zastavit, ne zastavit skoro. */
body.klid .bod{ animation: none; opacity: .8; }

/* ─── ovládání pod horizontem ──────────────────────────────────── */
.pult{
  display: grid;
  /* Pravý sloupec má pevnou šířku schválně: kdyby se řídil obsahem („auto"),
     poskočil by celý formulář do strany ve chvíli, kdy pod tlačítkem přibude
     potvrzení. Náhled se nesmí hýbat pod rukou. */
  /* `minmax(0, …)` u OBOU sloupců. S pevným `29rem` vpravo a `1fr` vlevo
     mřížka při zvětšeném písmu prohlížeče přerostla okno a naskočilo
     vodorovné rolování — sloupec se totiž nesmí zmenšit pod svůj obsah,
     dokud mu to `minmax(0, …)` nedovolí. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
  /* KAŽDÁ VĚC MÁ SVOU BUŇKU, ŽÁDNÁ SE NEŘADÍ AUTOMATICKY (11. 9. 2026,
     `P738`). Oddíl „Rozehrané hry" (`P1188`) přibyl do mřížky jako třetí
     položka a mřížka o dvou sloupcích ho posadila do buňky formuláře:
     formulář spadl do druhého řádku vlevo, roztažený na 711 px, a to, co
     stálo od začátku vpravo nahoře vedle věty o platformě (x 834, y 249 na
     1366×768), bylo najednou dole vlevo (x 68, y 796). Návštěvník s uloženou
     hrou tak dostal jinou stránku než ten bez ní. Pojmenované oblasti to
     drží: formulář má pravý sloupec přes oba řádky, oddíl her stojí vlevo
     nad větou o platformě. Řádky `minmax(0, 1fr) auto` — druhý řádek si
     bere jen výšku věty, první všechno ostatní, takže skrytý oddíl
     nezanechá ani mezeru řádku a čistá stránka měří stejně jako dřív. */
  grid-template-areas:
    "hry vstup"
    "rec vstup";
  grid-template-rows: minmax(0, 1fr) auto;
}
.rec{ grid-area: rec; }
.rec p{ margin: 0 0 .55rem; max-width: 34rem; }
.rec .vysvetleni{ color: var(--text-2); font-size: 1rem; }                       /* 11,2 : 1 */
/* Poctiva veta je to nejdulezitejsi, co na strance stoji malym pismem —
   proto 16 px, ne 14. Kdyz uz se rika pravda, ma byt citelna. */
.rec .poctivost{  color: var(--text-3); font-size: 1rem; margin-bottom: 0; }      /* 8,7 : 1 */

/* Formulář je vpravo a nesoupeří se slovem — ale od chvíle, kdy je za ním
   kulisa, potřebuje víc váhy, jinak by v obrázku plaval. Přibyla mu tři
   opatření a všechna jsou z materiálu, který na stránce už byl:
   širší sloupec (29 rem), silnější linka nahoře (stejná barva jako horizont)
   a mono nadpis, aby bylo poznat, kde vstup začíná. Deska zůstává
   NEPRŮHLEDNÁ — kontrast uvnitř formuláře se nesmí opírat o to, co je pod ním.
   Pole 52 px, písmo 18 px, popisky nad poli. */
.formular{
  grid-area: vstup;             /* pravý sloupec, oba řádky — viz `.pult` (`P738`) */
  /* K HORNÍMU OKRAJI, NE KE SPODNÍMU (`P738`, dodatek). `.pult` zarovnává
     ke dnu, aby formulář a věta o platformě měly společnou spodní linku —
     dokud je formulář nejvyšší věc v mřížce, je to totéž jako nahoře. Od
     pěti uložených her je ale levý sloupec vyšší než formulář a zarovnání
     ke dnu ho stáhlo s ním: na 1366×768 s osmi hrami stál na y 678 a
     hlavní tlačítko na y 1037, hluboko pod čarou okna. Nahoře stojí bez
     ohledu na to, kolik her vlevo přibude (změřeno: y 249 s nulou, dvěma
     i osmi hrami). */
  align-self: start;
  position: relative;
  background: var(--podklad);   /* neprůhledná deska — kontrast se nemá o co jiného opřít */
  border: 1px solid rgba(63,192,230,.34);
  border-top: 3px solid var(--chrom-tlum);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.2vw, 1.7rem);
  width: 100%;
}
.formular-nadpis{
  font-family: var(--mono);
  font-size: .875rem;           /* 14 px, ale jen návěstí — čtené texty jsou 16+ */
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-2);         /* 10,7 : 1 na desce */
  margin: 0 0 1rem;
}
.dvojice{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.pole{ display: flex; flex-direction: column; position: relative; }

/* Popisek a otazník v jedné řádce. Otazník patří k POPISKU, ne k poli — kdyby
   seděl u rámečku, dotýkal by se ho a splynul by s ním v jeden útvar. */
.radek-popisku{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .4rem;
}
.radek-popisku label{ margin-bottom: 0; }

/* OTAZNÍK. Kolečko má 28 px, terč 44 — trvalá podmínka projektu platí i pro
   nepovinný prvek. Menší terč by znamenal, že se na něj starší člověk netrefí,
   a nepovedený zásah vypadá jako rozbité tlačítko, ne jako minutí.

   Přepisuje se skoro celé obecné pravidlo pro `button` (to je stavěné pro širokou
   azurovou plochu dole) — proto tolik řádků. */
.otaznik{
  margin: 0;
  /* 48 PX, NE 44 (9. 9. 2026, `T-023`, rozhodnutí 6 přeměřené plochy 1, `P917`).
     Naměřeno 44 × 44 px — přesně na dolní mezi `omezeni.uchop.podlaha_mysi_px`,
     ale jediný terč téhle stránky POD pohodlnými 48 px, které si všechny ostatní
     drží (56 px). Terč na mezi je terč bez rezervy: stačí, aby se řádek popisku
     o pixel posunul, a je pod ní. */
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;             /* podmínka: aspoň 17 px */
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-2);        /* 11,2 : 1 na desce */
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* Kolečko se kreslí obrysem uvnitř terče, ne celým terčem — tak je vidět, kam se
   ukazuje, a přitom se dá trefit i vedle. */
.otaznik::before{
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--chrom-tlum);
}
.otaznik{ position: relative; }
/* Glyf musí zůstat NAD kolečkem. `::before` je sice v DOM dřív, ale absolutní
   pozice ho vynese do vrstvy nad běžný text — bez tohohle by se otazník po
   otevření schoval pod vlastní výplň. */
.otaznik span{ position: relative; z-index: 1; }
.otaznik:hover{ color: var(--text); background: transparent; }
.otaznik:hover::before{ border-color: var(--chrom); }
.otaznik:active{ background: transparent; }
/* Otevřený otazník vypadá jinak než zavřený. Bez toho by po klepnutí nebylo
   poznat, že se něco stalo — a člověk klepe znovu. */
.otaznik[aria-expanded="true"]{ color: var(--pozadi); }
.otaznik[aria-expanded="true"]::before{ background: var(--chrom); border-color: var(--chrom); }

label{
  font-size: 1.0625rem;        /* 17 px — popisek NAD polem, ne placeholder místo popisku */
  color: var(--text-2);        /* 10,7 : 1 na desce */
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
input{
  height: 3.25rem;             /* 52 px při výchozím písmu; rem, ať roste se zvětšením */
  font-family: var(--sans);
  font-size: 18px;             /* podmínka: aspoň 17 px */
  color: var(--text);
  background: var(--pozadi);
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  padding: 0 .8rem;
  width: 100%;
}
input::placeholder{ color: var(--text-3); opacity: 1; }   /* 8,7 : 1 — nápověda, ne popisek */
input:hover{ border-color: var(--chrom); }
/* Myší klik prsten focus-visible nedostane, proto barvíme i prostý :focus —
   starší člověk musí vidět, kde je, i když si pole naklikal myší. */
input:focus{ border-color: var(--chrom); }
input[aria-invalid="true"]{ border-color: var(--chyba); }

/* Hláška u pole. `aria-live` tu není navíc: když člověk odešle formulář
   Enterem přímo z prázdného pole, ohnisko se nikam nepřesune a odečítač
   by se o chybě nedozvěděl — `aria-describedby` se čte při PŘÍCHODU do
   pole, a to už dávno proběhlo. */
/* Nápověda pod polem. Menší než popisek, ale pořád nad mezí čitelnosti —
   je to text, ne dekorace, takže drží kontrast textu. */
/* NÁPOVĚDA JE PLOVOUCÍ BUBLINA, NE ŘÁDEK V TOKU.

   Když stála v toku, posunula při otevření všechno pod sebou — tlačítko uskočilo
   o dva řádky dolů přesně ve chvíli, kdy na něj člověk mířil. Rozhození stránky
   je horší vada než chybějící nápověda: uskočené tlačítko se netrefí a vypadá to
   jako závada, ne jako nápověda.

   `position: absolute` ji vyndá z toku — otevřená i zavřená zabírá TÉŽ místo,
   totiž žádné. Kreslí se přes mezeru mezi polem a tlačítkem, a proto má vlastní
   desku a rámeček: text bez podkladu by se přes to, co je pod ním, jen rozmazal.

   UKAZUJE SE NA NAJETÍ **I NA FOCUS** (WCAG 1.4.13). Jen na najetí by ji nedostal
   nikdo, kdo jede klávesnicí, a na dotykové obrazovce nikdo. Proto tři cesty:
     · najetí myší na otazník,
     · zaostření otazníku klávesnicí,
     · klepnutí, které ji PŘIPNE (`aria-expanded`) — to je ta cesta pro prst.
   A dá se najet i na samotnou bublinu, aby se z ní dal text opsat, aniž zmizí.
   Zavírá ji Escape. */
.napoveda{
  position: absolute;
  /* NAD polem, ne pod ním. Pod polem bublina padla přesně na tlačítko „Vstoupit
     do lekce" — při najetí myší to nevadí (odjedu a zmizí), ale PŘIPNUTÁ prstem
     by ho zakryla a člověk by neměl čím pokračovat. Nad polem překrývá jen nadpis
     karty, tedy text, na který se neklepe. */
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  margin: 0 0 10px;
  padding: 12px 14px;
  background: var(--podklad);
  border: 1px solid var(--chrom-tlum);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .6);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.otaznik:hover ~ .napoveda,
.otaznik:focus-visible ~ .napoveda,
.otaznik[aria-expanded="true"] ~ .napoveda,
.napoveda:hover{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Kdo si vypnul pohyb, nechce ani probliknutí. */
@media (prefers-reduced-motion: no-preference){
  .napoveda{ transition: opacity .12s ease; }
}

/* ROZEHRANÉ HRY (`T-108` S4, vlna 8, `P1188`). Oddíl se kreslí jen tehdy,
   když má co říct, takže na čisté vstupní stránce nezabírá ani pixel a měření
   ohybu (sada 14, sada 13) se o něj neopírá. Řádek je mřížka o třech
   sloupcích na širokém okně a sloupec pod sebou na úzkém — týž vzor, jaký
   používá `.pult`. Terče drží 48 px, tedy pohodlnou mez sady 14. */
/* VLASTNÍ TŘÍDY, ŽÁDNÉ SDÍLENÍ S `.formular` (`P1188`, změřeno sadou 14).
   První pokus dal oddílu třídy `formular panel pole` „ať vypadá stejně" —
   a `zkontrolujPokracovani()` výš si formulář hledá `querySelector(".formular")`,
   takže si od té chvíle sahala pro tlačítko do SKRYTÉHO oddílu, `mimo` bylo
   vždycky `false` a návěstí „pokračování níž" se přestalo objevovat. Sada 14
   to chytila čtyřmi červenými tvrzeními. Vzhled se tedy kopíruje deklaracemi,
   nikdy třídou, kterou hledá kód. */
/* MÍSTO V MŘÍŽCE MÁ VLASTNÍ, NE PO POŘADÍ (`P738`). Bez `grid-area` oddíl
   obsadil pravý sloupec a vytlačil formulář dolů vlevo — viz `.pult`. Vlevo
   nad větou o platformě je vidět hned, nic nezakrývá a formulář zůstává tam,
   kde ho člověk zná z první návštěvy. */
.pokracovani{
  grid-area: hry;
  position: relative;
  background: var(--podklad);
  border: 1px solid rgba(63,192,230,.34);
  border-top: 3px solid var(--chrom-tlum);
  border-radius: 3px;
  padding: clamp(1.25rem, 2.2vw, 1.7rem);
  width: 100%;
  margin-bottom: clamp(.5rem, 1.2vh, 1.25rem);
}
.pokracovani-nadpis{
  font-family: var(--mono);
  font-size: .875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 1rem;
}
.pokracovani-popis{ margin: 0 0 .6rem; font-size: .95rem; color: var(--text-2); }
.pokracovani-hlaska{ min-height: 1.5rem; font-size: 1rem; color: var(--chyba); line-height: 1.5; margin: .4rem 0 0; }
/* ŘÁDEK HRY JE JEDEN ŘÁDEK (`P738`). Mřížka o třech sloupcích nesla čtyři
   věci — název, režim, „Pokračovat", „Začít znovu" — a čtvrtá padala pod
   název roztažená přes celý sloupec: dva řádky her měřily 483 px a tlačily
   formulář vedle o 71 px níž. Zalamovaný řádek drží všechno na jedné lince,
   dokud se to vejde, a na úzkém okně zalomí jen to, co se nevejde; terče
   zůstávají 48 px. */
.hra{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
}
.hra + .hra{ margin-top: .5rem; }
.hra-nazev{ flex: 1 1 8rem; margin: 0; align-self: center; overflow-wrap: anywhere; }
.hra-rezim{ display: grid; gap: .15rem; font-size: .9rem; }
.hra-rezim select{ min-height: 48px; }
/* Tlačítka stránky jsou z `button{}` na 100 % šířky s odsazením nahoře —
   to je tvar pro formulář, ne pro řádek; tady se měří obsahem, ať se vedle
   sebe vejdou, a vršek jim dává zarovnání řádku, ne okraj. */
.hra-dal, .hra-znovu{ min-height: 48px; width: auto; flex: 0 0 auto; margin-top: 0; padding: 0 1rem; }
@media (max-width: 34rem){
  .hra > *{ flex-basis: 100%; }
  .hra-dal, .hra-znovu{ width: 100%; }
}

.hlaska{
  min-height: 1.5rem;          /* místo držíme pořád, ať text pod ním neposkakuje */
  font-size: 1rem;             /* 16 px: chybová hláška se čte ve stresu, ne v klidu */
  color: var(--chyba);         /* 6,9 : 1 na desce */
  line-height: 1.5;
  margin: .6rem 0 0;           /* stejný důvod jako u nápovědy: neslepit s textem nad ní */
}

/* VOLBA REŽIMU (`T-023`). Terče jsou celé řádky, ne jen kolečka: kolečko má
   podle prohlížeče 13–16 px a to je pod každou mezí, kterou si projekt dal.
   Řádek má 56 px stejně jako hlavní tlačítko — trvalá podmínka („velké terče")
   platí i tady, a sada 14 to měří na `label[for=rezimVr]`, ne na tom rádiu. */
.volba-rezimu{
  /* `.pole` je flex sloupec kvůli polím s popiskem; `<legend>` uvnitř flexu
     kreslí každý prohlížeč trochu jinak, tak se to tady vrací na blok. */
  display: block;
  border: 0;                   /* výchozí rámeček `fieldset` je z jiné doby */
  margin: 1rem 0 0;
  padding: 0;
  min-width: 0;                /* jinak `fieldset` odmítá zúžit pod obsah */
}
.volba-rezimu legend{
  padding: 0;
  font-size: 1.0625rem;        /* 17 px, stejně jako `label` u pole */
  color: var(--text-2);        /* 10,7 : 1 na desce */
  letter-spacing: .02em;
}
/* Věta o volbě stojí V TOKU a je vidět pořád. Bublina k otazníku (`.napoveda`)
   je tu k nepotřebě: k volbě se nedá „přijít pro nápovědu", buď se rozhoduju
   teď, nebo vůbec. */
.veta-rezimu{
  margin: .35rem 0 .6rem;
  /* 17 PX, NE 16 (8. 9. 2026, `T-229`). Sada 14 má vlastní dolní mez 17 px
     pro věty ke čtení; tahle věta na ni o pixel nedosáhla a test ji zapsal
     jako `--` (neověřeno) s naměřeným číslem v hlášení, ne červeně — takže
     řádek v `PARITA.md` byl odškrtnutý nad neměřeným tvrzením. Buď mez platí,
     nebo neplatí; věta je na vstupní cestě a čte ji ten, kdo se právě
     rozhoduje, takže platí. */
  font-size: 1.0625rem;        /* 17 px — je to věta ke čtení, ne popisek */
  line-height: 1.5;
  color: var(--text-3);        /* 8,7 : 1 na desce */
}
.volba{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;            /* podmínka: aspoň 44, pohodlí 48 */
  margin: 0 0 8px;             /* rozestup terčů: 8 px + rámečky, ať se neslepí */
  padding: 0 .8rem;
  font-size: 18px;             /* podmínka: aspoň 17 px */
  color: var(--text);
  background: var(--pozadi);
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0;
}
.volba:last-of-type{ margin-bottom: 0; }
.volba:hover{ border-color: var(--chrom); }
/* Vybraná možnost se pozná i bez barvy koleček — obrys nese chrom a text
   zbělá. Kdo rozlišuje barvy hůř, pozná ji podle síly obrysu. */
.volba:has(input:checked){ border-color: var(--chrom); border-width: 2px; padding: 0 calc(.8rem - 1px); }
.volba input{
  width: 22px;                 /* `dotykova_plocha_mm: 22` z kitu; terč je ale celý řádek */
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  accent-color: var(--chrom);
}
/* Prsten focusu patří na CELÝ řádek, ne na kolečko uvnitř: kdo jede
   klávesnicí, musí vidět terč, na který mačká mezerník. */
.volba:focus-within{ outline: 2px solid var(--chrom); outline-offset: 2px; }

button{
  margin-top: 1rem;
  width: 100%;
  height: 56px;                /* podmínka: aspoň 48 px */
  font-family: var(--sans);
  font-size: 18px;             /* podmínka: aspoň 17 px */
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--pozadi);        /* tmavý text na azurové: 9,5 : 1 */
  background: var(--chrom);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
button:hover{ background: #58cced; }
/* Stisk jen ztmaví plochu — text zůstává tmavý. Bílá na #2b8fae dává jen 3,7 : 1. */
button:active{ background: var(--chrom-tlum); }

/* Vedlejší tlačítko „Přihlásit se jako ADMIN": odkaz, který vypadá jako tlačítko.
   Táž výška (56 px) a velikost písma (18 px) jako hlavní tlačítko — podmínka
   snadného ovládání platí i pro lektora — ale jen obrys, ne plná plocha: hlavní
   cesta hráče musí zůstat na první pohled ta azurová. */
.admin-odkaz{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: .75rem;           /* 12 px pod hlavním tlačítkem — těsně, ale zvlášť */
  width: 100%;
  height: 56px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-2);         /* 10,7 : 1 na desce */
  background: transparent;
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.admin-odkaz:hover,
.admin-odkaz:active{ color: var(--text); border-color: var(--chrom); }

/* Viditelný focus pro klávesnici — akcentová žlutá je vidět na černi
   i na azurovém tlačítku (12,3 : 1 na pozadí). */
:focus-visible{
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}

.potvrzeni{
  margin: .9rem 0 0;
  font-size: 1rem;
  color: var(--ok);            /* 11,4 : 1 na desce */
  min-height: 3rem;            /* místo na dvě řádky držíme i naprázdno — bez skoku */
  overflow-wrap: anywhere;     /* dlouhý kód nesmí roztáhnout desku */
}

/* Jen pro odečítače: rotující slovo je pro ně schované a místo něj dostanou
   celý seznam naráz. Živý region blikající každé 4 s by je jen přerušoval. */
.jen-pro-odecitac{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── úzká obrazovka: formulář pod text, nic se neschovává ─────── */
/* Zpráva, že obsah pokračuje. Ukáže se JEN tehdy, když se stránka
   doopravdy roluje, ještě se nerolovalo a hlavní tlačítko je mimo obraz —
   jinak by strašila tam, kde není co řešit.
   Bez ní je na nízkém okně rolování skryté gesto: pod čarou je čerň,
   stránka vypadá dokončeně a hlavní tlačítko není vidět.
   Je to tlačítko, ne šipka k ozdobě: klepnutí sjede rovnou na formulář,
   takže to není jen upozornění, ale i cesta. */
.pokracuje{
  position: fixed;
  left: 50%;
  bottom: clamp(.6rem, 2vh, 1.4rem);
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  width: auto;
  padding: 0 1rem;
  font-family: var(--mono);
  /* 17 PX, NE 13 (8. 9. 2026, `T-229`, nález 22 nezávislého posudku plochy 1).
     „Návěstí, ne text ke čtení" byla výmluva na vlastní mez: je to JEDINÁ
     věta, která na krátkém okně řekne, že dole ještě něco je, a kdo ji
     nepřečte, formulář nenajde. Mez sady 14 pro věty ke čtení je 17 px. */
  font-size: 1.0625rem;         /* 17 px — věta, která ukazuje cestu dolů */
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--text);           /* 16,6 : 1 na desce */
  background: var(--podklad);   /* neprůhledná deska — leží nad kulisou */
  border: 1px solid var(--chrom-tlum);
  border-radius: 2px;
  cursor: pointer;
}
.pokracuje.vidno{ display: inline-flex; }
.pokracuje:hover,
.pokracuje:active{ color: var(--text); background: var(--podklad); border-color: var(--chrom); }
.pokracuje .sipka{ color: var(--akcent); font-size: 1rem; line-height: 1; }

/* ─── nízké okno: aby hlavní tlačítko bylo VIDĚT ───────────────────
   Všechno nad čarou se počítalo jen ze ŠÍŘKY okna: velikost slova ze
   6,4 vw, rezerva na dvě řádky z té velikosti, okraje z 5 vw. Jeviště
   se tedy při ztrátě výšky nezmenšilo ani o pixel a pult se vytlačil
   pod hranu — na 1280×720 skončilo hlavní tlačítko 112 px mimo okno
   a s vypnutými animacemi 184 px. Pod čarou je čerň, takže stránka
   vypadala dokončeně a o pokračování neřekla nic.

   Rolování je v tu chvíli SKRYTÉ GESTO, a to trvalá podmínka projektu
   zakazuje. Proto se od téhle výšky měří i výškou. Slovo je pak menší,
   ale menší slovo je pořád lepší než neviditelné tlačítko. */
@media (max-height: 920px){
  :root{
    --slovo: clamp(1.9rem, min(6.4vw, 8.6vh), 7rem);
    --okraj-svisly: clamp(.85rem, 2vh, 2.25rem);
  }
  /* Rezerva na dvě řádky slova se ruší. Držela horizont na místě, když
     se slovo zalomilo — ale při slovu odvozeném z výšky se v žádném
     z měřených oken nezalomí, a nehybný horizont za neviditelné tlačítko
     nestojí. */
  .slovo-slot{ min-height: 0; }
  .jeviste{ min-height: 0; padding-bottom: clamp(.5rem, 1.4vh, 2.4rem); }
  .ovladani{ margin-top: clamp(.7rem, 1.8vh, 1.6rem); }
  .pult{ padding-top: clamp(.8rem, 1.8vh, 2.4rem); }
  .formular{ padding: clamp(.85rem, 1.9vh, 1.7rem); }
  .rec p{ margin-bottom: .4rem; }
}
/* ─── 1366×768 a 1280×720: HLAVNÍ TLAČÍTKO ZŮSTANE V OKNĚ ──────────
   (8. 9. 2026, `T-023`, nález 5 nezávislého posudku plochy 1, `P761`.)

   Blok o dvacet řádků výš (`max-height: 920px`) zmenšil jeviště, ale
   skupina volby režimu přibyla AŽ POTOM a je vysoká 212 px. Změřeno na
   téhle špičce: `#vstoupit` končil 787 px na okně 768 (přetečení 19 px)
   a 778 px na okně 720 (přetečení 58 px); bez té skupiny stránka
   nerolovala vůbec. Blok `max-height: 700px` se na 720 px nespustí,
   takže na nejběžnějším notebookovém okně nepomáhal nikdo.

   Bere se jen SVISLE a jen tam, kde je z čeho: rozestupy a odsazení,
   nikdy písmo (mez 17 px sady 14) a nikdy terč pod 48 px (pohodlná mez
   téže sady). `.volba` klesá z 56 na 48 px, tedy na tu mez, ne pod ni.
   Aritmetika je v hlášení lajny řádek po řádku. */
/* A JEŠTĚ 25 PX NAVÍC, PROTOŽE SE MĚŘILO NA STRÁNCE BEZ HLÁŠKY
   (9. 9. 2026, `T-023`, nález V1 přeměřené plochy 1, `P760`).

   `P761` výš změřilo čistou stránku (691/768, 686/720 ✔) a klientskou
   hlášku o dvou řádcích (715 a 710 px ✔). Nedošlo na tu, kterou člověk
   na téhle stránce vidí nejčastěji: serverovou `lekce.join.neznamy_ucastnik`
   po e-mailu s překlepem. Ta je TŘÍŘÁDKOVÁ a přidá 48 px — naměřeno dnes
   na téhle špičce `#vstoupit` **734 px na okně 720** (cs i en, n = 2),
   tedy 14 px pod čarou, a `#pokracuje` u toho zůstalo skryté (nález V2).

   Bere se pořád jen SVISLE a pořád jen z rozestupů: dvanáct řádků po 1,4–4 px
   dá dohromady 29 px, z nichž 4 px sebere zpátky otazník zvednutý na 48 px
   (rozhodnutí 6). Písmo se nesnížilo ani o desetinu, terče drží 48 px.
   Naměřeno po opravě: 709/720 a 714/768 s třířádkovou hláškou. */
@media (max-height: 800px){
  :root{
    --okraj-svisly: clamp(.6rem, 1.2vh, 2.25rem);
    /* Slovo se zmenší ještě o kus: v anglickém rameni se dvouřádková chybová
       hláška u pole (`.hlaska`, `min-height` 1,5 rem) přičte 24 px a tlačítko
       vyjelo zpátky ven (naměřeno 734 px na okně 720). Menší slovo je pořád
       lepší než neviditelné tlačítko — táž věta, jaká stojí u bloku 920 px. */
    --slovo: clamp(1.8rem, min(6.4vw, 7.4vh), 7rem);
  }
  .navesti{ margin-bottom: .2rem; }
  .jeviste{ padding-bottom: clamp(.3rem, .6vh, 2.4rem); }
  .ovladani{ margin-top: clamp(.3rem, .6vh, 1.6rem); }
  .pult{ padding-top: clamp(.4rem, .8vh, 2.4rem); }
  .formular{ padding: clamp(.5rem, 1vh, 1.7rem); }
  .formular-nadpis{ margin-bottom: .3rem; }
  .radek-popisku{ margin-bottom: .25rem; }
  .hlaska{ margin-top: .2rem; }
  .volba-rezimu{ margin-top: .25rem; }
  .veta-rezimu{ margin: .15rem 0 .25rem; }
  .volba{ min-height: 48px; margin-bottom: 2px; }
  #vstoupit{ margin-top: 6px; }
}

/* Ještě níž se ubere i tomu, co je pod čarou — na 1280×600 už jinak
   není z čeho brát. */
@media (max-height: 700px){
  .navesti{ margin-bottom: .3rem; }
  .varovani{ padding: .6rem .8rem; }
  .formular-nadpis{ margin-bottom: .6rem; }
  .seznam-slov{ margin-top: .8rem; }
  .znacka{ font-size: 1.02rem; }
  .plocha{ padding-bottom: .9rem; }
}

/* FORMULÁŘ NA ŠÍŘKU (11. 9. 2026, `P739`). Pokyn autorky po `P738`: „vstup do
   lekce umísti ještě na šířku pod čáru zprava". Do té chvíle to byl sloupec
   464 × 554 px — vysoký, protože e-mail, volba režimu a obě tlačítka stály
   pod sebou. Na širokém okně teď formulář drží pravý sloupec o 46 rem a uvnitř
   je mřížka o dvou sloupcích: vlevo e-mail, hlavní tlačítko a odkaz na admin,
   vpravo volba režimu přes tytéž tři řádky. Pořadí v dokumentu (a tabulátoru)
   se nemění: e-mail → režim → Vstoupit → ADMIN. Na úzkém okně (≤ 900 px) se
   nic z toho neuplatní a formulář zůstává jeden sloupec pod sebou. */
/* PŘIHLÁŠENÍ VLEVO, VOLBA VPRAVO — A TERČE NA ŘÁDCÍCH TLAČÍTEK (11. 9. 2026,
   `P745`). `P740` četlo pokyn „dej tomu zarovnání i uvnitř, ať sedí ty ikonky
   vedle sebe" jako terče režimu VEDLE SEBE a tlačítka pod nimi: e-mail se
   roztáhl přes celou šířku a přihlášení přestalo být levý sloupec. Autorka to
   vrátila: „mechanics are right but layout… Bring back old positioning of
   login tab to the left." Oblasti jsou tedy zpátky z `P739` — vlevo e-mail,
   „Vstoupit do lekce" a ADMIN, vpravo volba režimu přes tytéž tři řádky — a
   k tomu to, co `P739` chybělo a co `P740` opravovalo: ve `P739` stály terče
   na y 483 a 533 a tlačítka na 533 a 605, nic nesedělo na společné lince.
   Řádky tlačítek mají PEVNOU výšku (56 px terč + 16 px odstup) a volba režimu,
   která přes ně sahá, tlačí oba terče ke svému dnu (`margin-top: auto` na
   prvním) se stejnou výškou a stejným odstupem — „V brýlích" tak stojí na
   řádku „Vstoupit do lekce" a „Na monitoru" na řádku ADMIN, ať je věta nad
   nimi dlouhá jak chce (anglicky má tři řádky). Popisek skupiny drží horní
   hranu s popiskem e-mailu. Bloky pro nízké okno (`max-height: 800px`) jinak
   stlačují terče na 48 px a odstup hlavního tlačítka na 6 px — tady se to
   přebíjí, na šířku se sloupec vejde tak jako tak. */
@media (min-width: 901px){
  .pult{ grid-template-columns: minmax(0, 1fr) minmax(0, 46rem); }
  .formular{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "nadpis    nadpis"
      "email     rezim"
      "vstoupit  rezim"
      "admin     rezim"
      "noscript  noscript"
      "potvrzeni potvrzeni";
    /* Řádky tlačítek jsou pevné schválně: kdyby byly `auto`, rozdělila by si
       mřížka přebytek vysoké volby režimu rovným dílem do všech tří řádků,
       které volba překlenuje, a tlačítka by o ten díl sjela pod terče.
       Takhle jde přebytek jen do řádku e-mailu. */
    grid-template-rows: auto auto calc(56px + 1rem) calc(56px + 1rem) auto auto;
    column-gap: var(--mezera-sloupcu);
    align-content: start;
    --mezera-sloupcu: clamp(1rem, 2.5vw, 2rem);
  }
  .formular-nadpis{ grid-area: nadpis; }
  .formular > .pole:not(.volba-rezimu){ grid-area: email; }
  .volba-rezimu{
    grid-area: rezim;
    display: flex;               /* `.volba-rezimu` je jinak `block` — sloupec kvůli `margin-top: auto` níž */
    flex-direction: column;
    margin-top: 0;               /* horní hrana = popisek e-mailu; blok pro nízké okno dává .25rem */
  }
  /* Popisek e-mailu stojí v řádku s otazníkem 48 px a je v něm svisle
     uprostřed, tedy 12 px pod horní hranou; popisek skupiny dostane týž
     odstup, ať oba stojí na jedné lince. */
  .volba-rezimu legend{ padding-top: 12px; }
  .volba-rezimu > .volba:first-of-type{ margin-top: auto; }   /* oba terče ke dnu = na řádky tlačítek */
  .volba{ margin-bottom: 0; min-height: 56px; }
  .volba + .volba{ margin-top: 1rem; }
  #vstoupit{ grid-area: vstoupit; margin-top: 1rem; }
  .admin-odkaz{ grid-area: admin; margin-top: 1rem; }
  .formular > noscript{ grid-area: noscript; }
  .potvrzeni{ grid-area: potvrzeni; }
}

@media (max-width: 900px){
  /* Jeden sloupec: oblasti se ruší a věci jdou po pořadí v dokumentu —
     věta o platformě, rozehrané hry, formulář (`P738`). Zrušený řádek
     `hry` tu nesmí zůstat, jinak by skrytý oddíl nechal prázdný řádek
     a mezeru navíc nad formulářem. */
  .pult{ grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: none; align-items: start; }
  .rec, .pokracovani, .formular{ grid-area: auto; }
  .formular{ width: 100%; }
  .dvojice{ grid-template-columns: 1fr; }
  .jeviste{ min-height: 0; }
}

/* ─── vypnuté animace: bez výjimky ─────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  #slovo{ transition: none; }
  .bod{ animation: none; opacity: .8; }
  .seznam-slov{ display: block; }   /* místo rotace celý seznam naráz */
  /* Kulisa se nesmí střídat vůbec — zůstane jeden snímek, bez prolnutí. */
  .kulisa img{ transition: none; }
  /* Pás prostředí ZŮSTÁVÁ. Když systém animace vypne, rotace stojí sama,
     ale dlaždice tím neztrácejí smysl — přestanou být vypínačem a stanou se
     výběrem: čí místnost chci mít v pozadí. Skrýt je by znamenalo vzít
     člověku volbu jen proto, že si vypnul pohyb. */
  .dlazdice{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   VZHLED „PUMPEDU" (11. 9. 2026, `P748`)
   Přepis VZHLEDU nad pravidly výš — ta platí dál (terče, písmo, logika,
   stavy), tady se mění jen barvy, tvary a mřížka. Zadání autorky: barvy
   jako pumpedu.cz (navy #030070, cyan #00adeb, bílý akcent místo žluté),
   plocha černá, prostředí jako ZARÁMOVANÝ OBRAZ se slovem přes něj,
   dlaždice prostředí textové pod ním s ukazatelem času, formulář v kartě
   vpravo (27 rem), logo kostka + nápis v hlavičce.

   Písmo zůstává systémové: Poppins (SIL OFL) není na seznamu licencí
   v `ZAVISLOSTI.md` § 2 a rozšířit ho smí jen člověk; stránka navíc musí
   fungovat offline, takže se nic nenačítá zvenčí.

   Pořadí v souboru je záměr: pozdější deklarace vyhrává, takže tenhle blok
   přebíjí i hodnoty z bloků `max-height` a `min-width: 901px` výš, aniž
   by se do nich sahalo. Co se tu NEPŘEPISUJE: výšky terčů (pole 52,
   tlačítka 56, volby 56/48, otazník 48, jazyk 48) a písmo 17/18 px.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --pozadi:       #070708;
  --podklad:      #1b1e26;
  --pole:         #14161c;
  --chrom:        #00adeb;
  --chrom-tlum:   #0a7fb0;
  --chrom-svetly: #33bdf0;
  --oranz:        #f97126;
  --text-2:       #e0d8d0;
  --text-3:       #a19b92;
  --akcent:       #ffffff;
  --kryti-kulisy: 1;
  --slovo: clamp(2rem, 4.6vw, 4.6rem);
  --r-karta: 14px;
  /* MAKETA 1:1 (`P789`, 12. 9. 2026): okraje stránky, linky a rámečky polí
     mají HODNOTY Z `Preview.html` — ne „podobné", stejné. */
  --okraj: clamp(1.25rem, 4.5vw, 4.5rem);
  --linka: rgba(0,173,235,.28);
  --linka-2: rgba(255,255,255,.08);
  --pole-linka: rgba(255,255,255,.2);
  /* PÍSMO PODLE MAKETY (12. 9. 2026, rozhodnutí autorky): Poppins, přiložené
     pod `vendor/poppins/` (SIL OFL 1.1, řádky v `ZAVISLOSTI.md` § 1a a § 2),
     nikdy z CDN — stránka musí fungovat offline. Když se soubor nenačte,
     spadne to na dosavadní zásobník. */
  --sans: "Poppins", "Rajdhani", "Titillium Web", system-ui, "Segoe UI", Arial, sans-serif;
}
@font-face{ font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/poppins/poppins-400-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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/poppins/poppins-400-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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/poppins/poppins-500-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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/poppins/poppins-500-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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/poppins/poppins-600-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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/poppins/poppins-600-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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/poppins/poppins-700-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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/poppins/poppins-700-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; }

/* ─── mřížka a zář v pozadí ─────────────────────────────────────── */
.plocha::before{
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,173,235,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,173,235,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 100%);
}
.plocha::after{
  content: "";
  position: fixed; z-index: -1; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  left: -18vw; top: 30vh;
  background: radial-gradient(circle, rgba(0,173,235,.35) 0%, transparent 60%);
  opacity: .55; filter: blur(30px);
}

/* ─── mřížka stránky: hlavička · jeviště + karta · dlaždice · čára ── */
.plocha{
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 25rem);
  /* MAKETA 1:1 (`P789`): mřížka jako `Preview.html`. Řádek jeviště je `1fr`
     a bere ZBYTEK VÝŠKY OKNA (1920×1080 → obraz 676 px jako v maketě,
     1536×864 → 470 px); pod dlaždicemi je ještě patička. Karta má
     `align-self: start` — když je vyšší než zbytek okna (1366×768), řádek
     jeviště se natáhne na její výšku a stránka o pár desítek px roluje,
     PŘESNĚ jako maketa (`docH` 841 na 768). Dodatek 2 `P748` („jeviště
     neroste s oknem") tím padá: 875 px na 1920×1080 dělala jiná mřížka
     (karta s oddílem her v řádku `1fr`), ne růst s oknem sám o sobě. */
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  align-content: stretch;
  grid-template-areas:
    "hlavicka hlavicka"
    "jeviste  pult"
    "ovladani pult"
    "horizont pult"
    "pata     pata";
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
  padding-top: 14px;                        /* kostka loga na y 14 jako v maketě */
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.hlavicka{ grid-area: hlavicka; }
.jeviste { grid-area: jeviste; align-self: stretch; }
.ovladani{ grid-area: ovladani; position: relative; z-index: 1; }
.horizont{ grid-area: horizont; }
.pult    { grid-area: pult; }
.pata    { grid-area: pata; }

/* ─── hlavička ──────────────────────────────────────────────────── */
/* Logo z `P745` (kostka WebP + nápis PNG), tady VĚTŠÍ podle pokynu autorky
   nad maketou: kostka 92 px, nápis 44 px (polovina výšky kostky), mezera 11 px.
   Záporné svislé okraje, ať kostka nezvedá hlavičku nad 56 px. */
/* DODATEK K `P748` (12. 9. 2026, nález autorky na betě: „logo zasahuje do
   náhledu a zkompaktovalo se to"). Záporné okraje −14 px držely hlavičku na
   56 px, ale kostka 92 px pak SAHALA 14 px do rámu jeviště (y 80–94 na
   1366×768) a 2 px od horní hrany okna. Kostka 84 px, nápis 40 px, hlavička
   má výšku loga a pod ní je 10 px vzduchu; výška se vrací ze vzduchu pod
   dlaždicemi a v kartě, takže 1366×768 dál nerolluje. */
/* velikost loga podle makety (kostka 92, nápis 44, mezera 11) — bez záporných
   okrajů, hlavička má výšku loga a jeviště začíná až pod ní */
.znacka{ gap: 11px; margin: 0; }
.znacka img{ height: 92px; }
.znacka .logo-slovo{ height: 44px; margin-top: 0; filter: drop-shadow(0 0 8px rgba(0,173,235,.35)); }
.hlavicka{ margin-bottom: 18px; }   /* maketa: kostka 14–106, jeviště od 124 */
/* Hlavička se smí zalomit (maketa `.hlava{ flex-wrap: wrap }`): od `P788` je
   nápis loga širší (744×127, na 400 px okně 158 px) a přepínač jazyka za ním
   vyjížděl 35 px za pravý okraj — sada 14 „na 400 px žádné vodorovné rolování"
   byla po `!62` v CI červená (poradní rameno). Na širokém okně se nic nezalomí. */
.hlavicka{ flex-wrap: wrap; }
.znacka .logo-kostka img{ filter: drop-shadow(0 0 6px rgba(0,173,235,.45)) drop-shadow(0 0 18px rgba(0,173,235,.35)); }
@media (max-width: 560px){
  .znacka{ gap: 6px; margin: 0; }
  .znacka img{ height: 56px; }
  .znacka .logo-slovo{ height: 27px; }
}
.beta{
  color: var(--chrom);
  border-color: var(--chrom);
  border-radius: 4rem;
  padding: .3em .8em .25em;
  font-size: .75rem;               /* maketa: 12 px, odznak, ne čtený text */
}
.jazyk{
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(0,173,235,.28);
  border-radius: 4rem;
  background: rgba(7,7,8,.6);
}
/* obecné `button{ height: 56px; margin-top: 1rem; width: 100% }` sem nepatří —
   dřív to nebylo vidět (průhledné pozadí), na pilulce by to byl schod */
.jazyk-tlacitko{ background: transparent; border: 0; border-radius: 4rem; height: auto; min-height: 3rem; width: auto; margin-top: 0; font-size: 1.0625rem; }   /* 17 px (posudek P748 č. 7) */
.jazyk-tlacitko:hover,
.jazyk-tlacitko:active{ color: var(--text); background: transparent; border: 0; }
.jazyk-tlacitko[aria-pressed="true"]{ color: #030070; background: var(--chrom); box-shadow: none; font-weight: 600; }

/* ─── jeviště: kulisa je zarámovaný obraz, slovo leží přes něj ──── */
.kulisa{
  grid-area: jeviste;
  align-self: stretch;
  margin: 0;
  border-radius: var(--r-karta);
  border: 1px solid rgba(0,173,235,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
  background: #0a0a0c;
}
.kulisa img{ filter: none; object-position: 50% 40%; }
.zaves{
  background: linear-gradient(180deg,
    rgba(7,7,8,.05) 0%, rgba(7,7,8,.25) 40%, rgba(7,7,8,.88) 100%);
}
.jeviste{
  padding: clamp(1.25rem, 2.5vw, 2rem);
  /* spodní mez jako maketa; skutečnou výšku dává řádek `1fr` mřížky
     (zbytek okna, nebo výška karty — co je víc) */
  min-height: clamp(16rem, 42vh, 24rem);
  justify-content: flex-end;
}
.slovo-slot{ min-height: 0; }
.navesti{ display: none; }        /* návěstí „Simulace" nad slovem odešlo (pokyn autorky 11. 9.) */
#slovo{ font-weight: 700; letter-spacing: -.025em; line-height: .96; color: #fff; text-wrap: balance; }
#slovo::before{ content: "/ "; color: var(--chrom); font-weight: 400; }
/* pod slovem: „prostředí → Simulace" a věta k pásu (maketa Preview.html) —
   obojí bílé s krytím .82, jak to má maketa nad obrazem */
.mistnost{ font-family: var(--mono); font-size: .95rem; letter-spacing: .06em; color: rgba(255,255,255,.82); margin: .9rem 0 0; }
.mistnost b{ color: var(--chrom); font-weight: 500; }
.jeviste .popis{ color: rgba(255,255,255,.82); max-width: 42rem; margin: .5rem 0 0; font-size: .98rem; line-height: 1.5; }
/* návěstí nad pásem dlaždic (maketa: .75rem, 1rem nad ním je v `.ovladani`) */
.pas-hlava{
  font-family: var(--mono); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 .7rem;
}
/* šipka na hlavním tlačítku — jen kresba, text tlačítka zůstává z tabulky vět */
/* ŠIPKA JE KRESBA, NE SLOVO (`P730`, n-2 recenze `!58`). `content: " →"` se
   započítává do PŘÍSTUPNÉHO JMÉNA tlačítka, takže odečítač četl „Vstoupit do
   lekce →" (en „Join the lesson →"); jméno má říkat, co tlačítko udělá, ne jak
   je nakreslené. Span v HTML to neřeší — `data-t` přepisuje `textContent` celý
   (`app/js/texty.js`), takže by ho první překlad smazal. Maska drží týž obraz,
   `currentColor` týž inkoust v obou motivech a do jména se nezapočítá nic. */
#vstoupit::after{
  content: ""; display: inline-block; width: .58em; height: .58em;
  margin-left: .34rem; vertical-align: -.02em; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─── dlaždice prostředí: textové karty pod jevištěm ────────────── */
/* maketa: mezera řádků mřížky (4 vw) + 1rem nad návěstím; obojí tady, protože
   okraj `.pas-hlava` by se s okrajem rodiče slil do jednoho */
.ovladani{ margin-top: calc(clamp(1.5rem, 4vw, 4rem) + 1rem); }
.prostredi{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
}
.dlazdice{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .1rem;
  width: 100%;
  height: auto;                 /* obecné `button{ height: 56px; margin-top: 1rem }` sem nepatří */
  margin: 0;
  min-height: 4.4rem;
  /* vpravo o 1,9 rem víc: maketa tam drží místo pro značku stavu, text se
     tedy láme na téže šířce a řádek dlaždic má stejnou výšku jako v maketě */
  padding: .7rem calc(.9rem + 1.9rem) .7rem .9rem;
  text-align: left;
  color: var(--text-2);
  font-weight: 400;
  /* MAKETA 1:1 (`P789`): dlaždice jsou tmavé sklo nad plochou (krytí .55 +
     rozostření), rámeček .08, jméno .92rem, obor .74rem, po najetí se zvednou
     o 3 px. Posudek `P748` č. 1 / 4 / 6 (17 px, rámeček ≥ 3 : 1, bez posunu)
     tím autorka VĚDOMĚ přebíjí — chce stránku přesně jako maketu. */
  background: rgba(7,7,8,.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--linka-2);
  border-radius: 12px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dlazdice > span:first-child{ font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.dlazdice-obor{ font-size: .74rem; font-weight: 400; line-height: 1.3; color: var(--text-3); }
.dlazdice-znacka{ display: none; }   /* ⏸/▶ odešly (pokyn autorky); slovy to dál říká popiska tlačítka */
.dlazdice:hover,
.dlazdice:active{ color: var(--text-2); background: rgba(7,7,8,.55); border-color: var(--chrom); transform: translateY(-3px); }
.dlazdice[aria-current="true"]{
  background: var(--podklad);
  border-color: var(--chrom);
  box-shadow: 0 0 0 1px var(--chrom), 0 12px 30px -10px rgba(0,173,235,.35), inset 0 3px 0 var(--akcent);
}
.dlazdice[aria-pressed="true"]{
  border-color: var(--oranz);
  box-shadow: 0 0 0 1px var(--oranz), inset 0 3px 0 var(--oranz);
}

/* ─── čára pod dlaždicemi = ukazatel času ───────────────────────── */
.horizont{
  margin-top: .8rem;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--linka-2);   /* maketa: žlábek .08 (posudek P748 č. 5 přebit autorkou, viz dlaždice) */
}
.horizont .bod{ display: none; }
.prubeh{
  position: absolute; left: 0; top: 0;
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--chrom), #ffffff);
}
.prubeh.bezi{ animation: prubeh var(--prubeh-doba, 7s) linear forwards; }
body.klid .prubeh{ animation-play-state: paused; }
@keyframes prubeh{ from{ width: 0; } to{ width: 100%; } }

/* ─── karta vpravo: oddíl her, formulář, věty o platformě ───────── */
.pult{
  position: relative;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Pořadí v kartě: formulář · rozehrané hry · věty o platformě. Oddíl her
     zůstává v DOM PŘED formulářem (čtecí pořadí, `P1188`), kreslí se ale POD
     ním, aby formulář stál na témž místě s nulou i osmi hrami — to je tvrzení
     `P738`, které sada 13 měří, a tady se drží mřížkou, ne pořadím v DOM. */
  grid-template-rows: auto auto auto;
  grid-template-areas: "vstup" "hry" "rec";
  gap: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);   /* maketa: 28 px */
  background: var(--podklad);
  border: 1px solid rgba(0,173,235,.28);
  border-radius: var(--r-karta);
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
}
/* rohové závorky: „tady začíná ovládání" */
.pult::before,
.pult::after{
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--chrom);
  pointer-events: none;
}
.pult::before{ left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-karta); }
.pult::after{ right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r-karta); }
.formular{ background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.formular-nadpis{ display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; font-size: .8rem; letter-spacing: .24em; }
.formular-nadpis::after{ content: ""; flex: 1; height: 1px; background: var(--linka); }
/* PŘEPÍNAČ JAZYKA V PRAVÉM ROHU FORMULÁŘE (14. 9. 2026, `P976`): pilulka
   CS | EN stojí NAD řádkem nadpisu vpravo (absolutně vůči formuláři, ne
   uvnitř `<h2>` — viz komentář ve značce) a linka nadpisu končí před ní
   (`padding-right`), aby jí neprosvítala. `top: -1rem` středí 48px terče
   na 16px řádek nadpisu. Nic jiného na stránce se nehýbe. */
.formular{ position: relative; }
.formular > .jazyk{ position: absolute; top: -1rem; right: 0; margin: 0; }
.formular-nadpis{ padding-right: 7rem; }
.rec{ margin-top: 0; }
.rec p{ max-width: none; }
/* věty pod formulářem: maketa .85rem s okrajem 1rem nad každou (posudek
   `P748` č. 7 přebit autorkou — maketa 1:1) */
.rec .vysvetleni,
.rec .poctivost{ color: var(--text-3); font-size: .85rem; line-height: 1.5; margin: 1rem 0 0; }
.pokracovani{
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  padding: 1rem 0 0;
  margin: 1rem 0 0;
}

/* ─── pole a tlačítka ───────────────────────────────────────────── */
/* MAKETA 1:1 (`P789`): rozestupy a písmo karty jako `Preview.html`. Co se
   DRŽÍ nad maketou, protože to tvrdí sady 13 a 14: pole, tlačítko, obě volby
   a věta pod volbou 17 px (maketa 16 / 16,8 / 13,6), volby 56 px (maketa 52),
   otazník 48 px (maketa 44), žádný `placeholder`. Rámečky polí .2 (posudek
   `P748` č. 3 přebit autorkou). */
label,
.volba-rezimu legend{ font-weight: 500; font-size: 1rem; letter-spacing: .01em; }
.pole{ margin-bottom: 1rem; }
.radek-popisku{ gap: 8px; margin-bottom: .35rem; }
input{ background: var(--pole); border: 1px solid var(--pole-linka); border-radius: 10px; font-weight: 500; font-size: 1.0625rem; padding: 0 1rem; }
input:hover{ border-color: var(--chrom); }
input:focus{ border-color: var(--chrom); box-shadow: 0 0 0 3px rgba(0,173,235,.25); }
/* Skript při načtení zaostří pole (řádek `email.focus()` níž) a obecný prsten
   `:focus-visible` (3 px bílý s odsazením) pak stojí na stránce hned od
   začátku. Maketa má zaostřené pole azurové s měkkou září — tady 2 px azurový
   obrys na rámečku + tatáž zář; azurová proti desce 5,7 : 1 (sada 14 chce 3 : 1). */
#email:focus-visible{ outline: 2px solid var(--chrom); outline-offset: 0; }
.hlaska{ min-height: 1.4rem; margin: .35rem 0 0; font-size: .9rem; }
.hlaska:empty{ min-height: 0; margin: 0; }   /* maketa: prázdná hláška nedrží místo */
.napoveda{ background: #232733; border-color: rgba(255,255,255,.22); border-radius: 10px; }
.otaznik::before{ border-color: rgba(255,255,255,.22); }
.volba-rezimu{ margin: 0 0 1rem; }
.volba-rezimu legend{ margin-bottom: .35rem; padding: 0; }
.veta-rezimu{ margin: 0 0 .6rem; font-size: 1.0625rem; color: var(--text-3); }
.volba{
  position: relative;
  min-height: 56px;
  background: var(--pole); border-color: var(--pole-linka); border-radius: 10px;
  font-weight: 500; font-size: 1.0625rem; color: var(--text-2);
  /* maketa .9rem / .6rem při 16 px; se 17 px (sada 14) by se „Na monitoru"
     na 166 px zlomilo na dva řádky — o 3 px užší okraje a mezera to drží
     na jednom řádku (změřeno: text 106 px, místo 112 px) */
  padding: 0 .75rem; gap: .5rem;
  transition: border-color .2s, background .2s, color .2s;
}
.volba:hover{ border-color: var(--chrom); color: var(--text); }
.volba:has(input:checked){
  border-width: 1px;
  padding: 0 .75rem;
  border-color: var(--chrom);
  background: rgba(0,173,235,.10);
  box-shadow: inset 0 0 0 1px var(--chrom);
  color: var(--text);
}
/* Kolečko rádia je v maketě nahrazené KRESBOU (brýle / monitor). Přepínač
   v DOM zůstává — je to pořád prvek `input` typu `radio` se svým `label`,
   klávesnice, odečítač i `:focus-within` prsten (blok výš) fungují dál;
   jen je průhledný a roztažený přes celý terč, takže klepnutí kamkoli
   na řádek ho přepne. (Značka se sem nepíše ani do komentáře — sada 08
   počítá vstupní prvky prostým hledáním v textu souboru.) */
.volba input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.volba-ikona{ width: 22px; height: 22px; flex: 0 0 22px; }
#vstoupit{
  margin-top: .5rem;
  color: #030070;
  font-size: 1.0625rem;
  border-radius: 4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 10px 28px -10px rgba(0,173,235,.35);
}
#vstoupit:hover{ background: var(--chrom-svetly); }
#vstoupit:active{ background: var(--chrom-tlum); }
.admin-odkaz{
  margin-top: .7rem;
  height: 52px;
  color: var(--chrom);
  font-size: .95rem;
  font-weight: 500;
  border-color: var(--chrom);
  border-radius: 4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.potvrzeni{ min-height: 1.5rem; margin: .7rem 0 0; font-size: .9rem; text-align: center; }
.admin-odkaz:hover,
.admin-odkaz:active{ color: var(--oranz); border-color: var(--oranz); }
.hra-dal, .hra-znovu{ color: #030070; border-radius: 4rem; }
.hra-dal:hover, .hra-znovu:hover{ background: var(--chrom-svetly); }
.pokracuje{ border-radius: 4rem; }

/* ─── široké okno: formulář zpátky v jednom sloupci (přebíjí `P739`/`P740`) ── */
@media (min-width: 901px){
  .pult{ grid-template-columns: minmax(0, 1fr); }
  .formular{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "nadpis"
      "email"
      "rezim"
      "vstoupit"
      "admin"
      "noscript"
      "potvrzeni";
  }
  #vstoupit{ margin-top: .5rem; }
  .admin-odkaz{ margin-top: .7rem; }
  /* `P745` (blok výš) skládá volbu režimu do sloupce vpravo s terči staženými
     na řádky tlačítek — v kartě `P748` jsou terče VEDLE SEBE nad tlačítky
     a formulář má řádky podle obsahu. */
  .formular{ grid-template-rows: auto; }
  .volba-rezimu{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: .6rem;
    margin: 0 0 1rem;
  }
  .volba-rezimu legend{ padding-top: 0; }
  /* rozestupy pod tlačítky a u vět jsou v bloku `P789` výš (maketa 1:1);
     dřívější dodatek `P748`, který je stahoval kvůli výšce loga, odpadl */
  .veta-rezimu{ grid-column: 1 / -1; }
  .volba-rezimu > .volba:first-of-type{ margin-top: 0; }
  .volba + .volba{ margin-top: 0; }
}

/* ─── užší okna ─────────────────────────────────────────────────── */
@media (max-width: 1200px){
  .prostredi{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .plocha{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: "hlavicka" "jeviste" "ovladani" "horizont" "pult" "pata";
  }
  .jeviste{ min-height: 15rem; }
  .prostredi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pult{ width: 100%; margin-top: 1.25rem; }
  /* blok `max-width: 900px` výš dává těmhle třem `grid-area: auto` a věta
     o platformě (v DOM první) by vyskočila NAD formulář — pořadí karty
     je stejné jako na širokém okně: vstup · hry · věty */
  .pokracovani{ grid-area: hry; }
  .formular{ grid-area: vstup; }
  .rec{ grid-area: rec; }
}
@media (max-width: 560px){
  .prostredi{ grid-template-columns: minmax(0, 1fr); }
  .dlazdice{ min-height: 3.5rem; }
}
/* Nízké okno: dodatek `P748` (rezerva ~35 px na širší písmo CI, nález písaře
   `p-1`) tu už není — od `P788` je písmo přiložené (Poppins i v CI) a maketa
   1:1 (`P789`) na 1366×768 o pár desítek px roluje ZÁMĚRNĚ, jako maketa sama.
   Co sada 13 tvrdí (hlavní tlačítko v okně na 1280×720 s třířádkovou hláškou
   i na 1280×600), platí dál — změřeno v `P789`. */

/* ─── patička: čára se září a tečkou, jako v maketě ─────────────── */
.pata{
  position: relative;
  margin-top: clamp(.75rem, 1.5vw, 1.5rem);
  padding-top: 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
}
.pata::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--chrom) 0%, var(--chrom) 45%, transparent 100%);
  box-shadow: 0 0 14px rgba(0,173,235,.35);
}
.pata-bod{
  position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--chrom); box-shadow: 0 0 10px var(--chrom);
  animation: pata-dech 4.2s ease-in-out infinite;
}
.pata .prvky{ display: flex; gap: 1.2rem; }
@keyframes pata-dech{ 0%, 100%{ opacity: .35; transform: scale(.85); } 50%{ opacity: 1; transform: scale(1); } }
body.klid .pata-bod{ animation: none; opacity: .85; }
@media (prefers-reduced-motion: reduce){
  .prubeh.bezi{ animation: none; width: 100%; }
  .pata-bod{ animation: none; }
  .dlazdice:hover,
  .dlazdice:active{ transform: none; }
}

/* P4942 (T-029, #1942, §7.3): keeps \n in a consent card's section text visible
   without markup — souhlas.js writes text only via nastavText/textContent. */
.souhlas-sekce{ white-space: pre-line; }