/* ===================== VĚDOMOSTNÍ HRA — malovaný svět =====================
   Samostatná appka (hra.html). Sdílí s glóbem jen data (localStorage), ne kód. */
@font-face{ font-family:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url('assets/fonts/nunito-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:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url('assets/fonts/nunito-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
#quiz-root {
  --paper:#ffffff; --paper2:#fffaf0; --ink:#3d3229; --muted:#7a6a56;
  --teal:#2a7f7f; --coral:#e2725b; --ochre:#d9a441; --leaf:#7ba05b; --ok:#4e9e6f; --bad:#cf5f4e;
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  /* fixed = gradient se mapuje na OKNO, ne na výšku dokumentu. Díky tomu je barva
     u spodní hrany vždy stejná a sticky lišta .qz-sec-confirm se dá trefit přesně. */
  background: linear-gradient(180deg, #ffffff 0%, #fdf6e8 100%) fixed;
  color: var(--ink); font-family: 'Nunito', system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center; padding: 0;
}
#quiz-root.qz-hidden, .qz-hidden { display: none !important; }
/* Shell je celá stránka, ne plovoucí karta: bez rámečku, zakulacení a stínu.
   Ten rámeček byl pozůstatek doby, kdy se kvíz otevíral jako překryv nad Glóbem —
   na samostatné hra.html už jen předstíral okno, které nad ničím neplave.
   Roluje jen STRÁNKA (#quiz-root): shell nemá max-height ani vlastní overflow-y,
   takže roste do výšky obsahu a šoupátko je jedno, u kraje okna. `overflow: clip`
   (ne hidden) nedělá ze shellu scroll kontejner — díky tomu se sticky „Pokračuj"
   (.qz-sec-confirm) chytá stránky a drží se u spodní hrany okna.
   Šířku obsahu drží #qz-body; shell je přes celé okno, aby křížek a hostitel
   seděli v rozích okna, ne uprostřed na hraně textového sloupce. */
.qz-shell {
  width: 100%; box-sizing: border-box; position: relative; overflow: clip;
  /* fixed = gradient se mapuje na OKNO, ne na výšku dokumentu. Díky tomu je barva
     u spodní hrany vždy stejná a sticky lišta .qz-sec-confirm se dá trefit přesně. */
  background: linear-gradient(180deg, #ffffff 0%, #fdf6e8 100%) fixed;
  /* flex-shrink: 0 — #quiz-root je flex sloupec, bez toho se shell na nízkém okně
     smrskne na min-height a obsah pod ním se kvůli `clip` uřízne (nedostupný) */
  min-height: 100%; flex-shrink: 0; display: flex; flex-direction: column;
}
/* obsah zůstává v čitelném sloupci uprostřed, i když shell sahá přes celé okno */
#qz-body { width: min(980px, 100%); margin: 0 auto; box-sizing: border-box; padding-bottom: 28px; }
/* Papírová textura z opakovaných linek je pryč: na malé kartě byla nenápadná,
   přes celé okno z ní byl viditelný tečkovaný rastr. Zůstává čistý gradient výše. */
.qz-close {
  position: absolute; top: 12px; right: 14px; z-index: 8; width: 34px; height: 34px; border-radius: 50%;
  border: 1.6px solid #d8c9ad; background: var(--paper2); color: var(--ink); font-size: 18px; cursor: pointer;
  box-shadow: 0 2px 0 #d8c9ad;
}

/* postava hostitele */
.qz-host { position: absolute; left: 14px; top: 12px; z-index: 8; display: flex; align-items: center; gap: 12px; max-width: 72%; }
.qz-host-av { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; border: 2.5px solid #fffdf6; outline: 2px solid #d8c9ad;
  background: radial-gradient(circle at 40% 34%, #f6d789, #d9a441 70%); display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 6px 14px rgba(120,90,40,.3); overflow: hidden; }
.qz-host-av img { width: 100%; height: 100%; object-fit: cover; }
/* Bublina zvětšena na přání hráče (2026-09-24) — 12,5px na 46px avatarovi vedle sebe
   působilo jako drobná poznámka pod čarou, ne jako hláška maskota. Ať roste podle textu
   (`width: max-content` s `max-width` stropem), ne aby byla pořád stejně široká bez ohledu
   na délku věty. */
.qz-host-bubble { background: var(--paper2); border: 1.8px solid #dccdb0; border-radius: 16px 16px 16px 5px;
  padding: 10px 16px; font-size: 14.5px; line-height: 1.35; font-style: italic; font-weight: 600;
  color: var(--muted); box-shadow: 0 4px 0 #e3d5b8; width: max-content; max-width: 100%; }

.qz-screen { display: flex; flex-direction: column; flex: 1; }

/* ---- start ---- */
.qz-start { align-items: center; justify-content: flex-start; text-align: center; gap: 16px; padding: 70px 24px 40px; }
.qz-start h2 { font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: 650; color: var(--teal); }
.qz-start p { color: var(--muted); font-size: 14px; max-width: 460px; }
/* Popisek volby na obrazovkách nastavení („Kdo dnes cestuje?", „Kolik otázek?", „Časový limit").
   Dřív inline font-size:12px na čtyřech místech — tedy nejmenší text na stránce, menší než chipy
   pod ním (13px) i než shrnutí (14px), přestože jde o otázku na hráče, ne o mikropopisek. */
.qz-fieldlabel { display: block; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 650;
  color: var(--muted); margin-bottom: 8px; }
.qz-bands { display: flex; gap: 10px; width: 100%; }
.qz-chip { background: var(--paper2); border: 1.6px solid #d8c9ad; border-radius: 20px; font-size: 13px; padding: 8px 18px;
  color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 #d8c9ad; font-family: inherit; }
.qz-bands .qz-chip { flex: 1; text-align: center; }
.qz-chip.on { background: var(--teal); border-color: var(--teal); color: #fffdf6; box-shadow: 0 2px 0 #1f5f5c; }
.qz-go { background: var(--coral); color: #fffdf6; font-family: 'Nunito', sans-serif; font-size: 19px; font-weight: 650;
  border: none; border-radius: 16px; padding: 14px 40px; cursor: pointer; box-shadow: 0 4px 0 #b1543f, 0 10px 24px rgba(226,114,91,.35); }
.qz-go:disabled { opacity: .38; cursor: not-allowed; box-shadow: 0 3px 0 #cca090; }

/* ---- play ---- */
.qz-play { position: relative; padding-bottom: 16px; }
/* 58px stačilo, dokud byla bublina hostitele (`.qz-host-bubble`) drobná — po jejím
   zvětšení 2026-09-24 (12,5→14,5px, víc paddingu) host reálně sahá do ~70px a 58px
   nechávalo nulovou mezeru (ověřeno měřením: spodní hrana bubliny a horní hrana řádku
   pod ní na stejném pixelu). U `.qz-top` to bije do očí míň (skórový praporek je vpravo,
   host vlevo), ale u `.qz-scoreboard` (párty, viz níž) jsou obě věci u LEVÉHO okraje. */
.qz-top { display: flex; gap: 8px; padding: 76px 16px 0; position: relative; z-index: 2; align-items: center; flex-wrap: wrap; }
.qz-progress { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 650; color: var(--ink); }
.qz-scorepill { margin-left: auto; background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 13px;
  padding: 6px 14px; font-family: 'Nunito', sans-serif; font-weight: 650; box-shadow: 0 3px 0 #e3d5b8; display: flex; gap: 8px; align-items: center; }
.qz-scorepill b { font-size: 17px; }

/* rám = jedno okno: u otázky v něm žije glóbus, u odpovědi se odhalí fotka */
.qz-picframe { position: relative; margin: 12px 16px 0; height: 320px; border-radius: 18px; overflow: hidden;
  border: 3px solid #fffdf6; outline: 2px solid #d8c9ad; box-shadow: 0 10px 26px rgba(120,90,50,.28);
  background: radial-gradient(120% 130% at 50% 18%, #e6f1ed 0%, #c6ddd6 50%, #a7c6bd 100%);
  transition: height .45s cubic-bezier(.22,.9,.3,1); }
.qz-picframe.revealed { height: clamp(200px, 26vh, 280px); }
/* `contain`, ne `cover` — ilustrace se NIKDY neořízne. Do 2026-09-01 tu bylo `cover`
   a ve vysokém rámu 4:5 se ze 16:9 obrázku ztrácelo 54 % ŠÍŘKY: u hasičského bálu
   zůstala mimo záběr celá třetí postava. Ořez byl důsledek dvou nezávislých rozhodnutí,
   která se nikdy nepotkala — rám na výšku (2026-08-14) a generátor na šířku.
   Prázdný pruh kolem obrázku vyplní `.qz-picbg` — rozmazaná kopie TÉŽE ilustrace. */
/* `max-width/max-height` + `inset: 0; margin: auto` (klasické centrování) místo
   `width:100%; object-fit: contain`. Vypadá to stejně, ale JSOU V TOM DVA ROZDÍLY:
   1. Při `object-fit` má element pořád velikost celého rámu a obrázek je jen vykreslený
      dovnitř, takže maska níž by změkčovala okraje RÁMU, tedy prázdno — a šev by zůstal.
      Takhle se element velikostí kryje s obrázkem a maska sedí na jeho hraně.
   2. `position: absolute` je NUTNÉ, ne kosmetika. Rám se na desktopu roztahuje podle
      řádku mřížky, takže jeho výška nesmí záviset na obsahu — obrázek v toku by do ní
      vnesl svou přirozenou výšku (686 px) a řádek by se na ni nafoukl. */
.qz-pic { position: absolute; inset: 0; margin: auto; z-index: 1;
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  /* Změkčený přechod do rozmazaného podkladu. Bez něj je mezi ostrým obrázkem a `.qz-picbg`
     vidět ostrá vodorovná linka — pruh sice barvou sedí, ale hrana ho prozradí. 10 px na
     obrázku širokém 464 px je pod prahem, kdy by to působilo jako rozostření. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
                      linear-gradient(to right,  transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%),
              linear-gradient(to right,  transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Podklad pruhu: rozmazaná kopie obrázku, ne pevná barva. Důvod je změřený — u dvanácti
   namátkových ilustrací má okraj obvykle krém rgb(223,203,170), ale `cz-a-trabant-ekologie`
   má rgb(69,95,89) a `cz-k-kromeriz-kvetna-zahrada` rgb(146,142,107): scény, které jdou
   do krajů, nemají s papírem společného nic. Jedna pevná barva by u nich byla vidět víc
   než dnešní pruh. Takhle pruh navazuje na obrázek vždycky, u 16:9 i u budoucích 4:5.
   `inset: -8%` je nutné — bez přesahu by se na okrajích ukázalo, jak blur vytahuje
   průhlednost zpoza hrany, a vznikl by světlý lem. */
.qz-picbg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  filter: blur(24px) saturate(1.15); transform: scale(1.06); z-index: 0; display: block; }
/* Fotka je bez popisku schválně — zemi i téma říká řádek .qz-meta nad otázkou. */
/* fallback, dokud otázka nemá fotku: razítko země místo snímku */
.qz-pic-fallback { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, #f4d9a6 0%, #e6b98a 55%, #cf9f77 100%); }
.qz-pic-fallback .sec { font-family: 'Nunito', sans-serif; font-style: italic; font-size: 16px; color: #6b5030; }
.qz-pic-fb-text { display: flex; flex-direction: column; gap: 2px; }
.qz-picframe.revealed .qz-pic-fallback { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 22px; }
.qz-picframe.revealed .qz-pic-fallback .qz-flagbig { width: 76px; height: 76px; border-radius: 13px; }
.qz-picframe.revealed .qz-pic-fb-text .country { font-family: 'Nunito', sans-serif; font-weight: 750; font-size: 16px; color: var(--ink); }
.qz-picframe.revealed .qz-pic-fallback .sec { font-size: 13px; }

/* Obal pravého sloupce: rám a pod ním blok, kam se po odpovědi stěhuje zisk bodů,
   vysvětlení a obě tlačítka (`presunPodObrazek` v quiz.js, nápad hráče 2026-09-06).
   MUSÍ to být JEDEN OBAL, ne dva řádky mřížky — to se 2026-09-06 zkoušelo třikrát
   a pokaždé selhalo na tom, že řádek s rámem neměl co by ho před odpovědí roztáhlo:
   `aspect-ratio` srazil glóbus z 256 na 56 px, `min-height: 100%` se počítá z výšky
   rodiče (`auto`, tedy nic) a `1fr` naopak nechal rám přerůst kartu o 74 px.
   S obalem lícuje s kartou obal a rám si uvnitř bere zbytek výšky — glóbus tak
   před odpovědí zůstává velký a po odpovědi se rám stáhne na obrázek. */
.qz-picwrap { display: flex; flex-direction: column; }
/* `:empty` je nutné: před odpovědí je blok prázdný a jeho margin by rám o 18 px zkrátil. */
.qz-extra { margin: 18px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.qz-extra:empty { display: none; }
/* Odsazení uvnitř bloku řeší `gap`, ne vlastní marginy dětí — jinak se obojí sčítá
   (naměřeno na mobilu: 6px gap + 10px margin vysvětlení = 16 místo zamýšlených 6)
   a odstupňovaný rytmus se rozpadne zpátky na jednu velikost mezery. */
.qz-extra > .qz-hl.points,
.qz-extra .qz-expl { margin: 0; }
/* SEKUNDÁRNÍ TLAČÍTKO JE ODLEHČENÉ, ať dvojice pod sebou nevypadá jako dvě stejně
   důležité věci. Mezera je oddělila, ale obě byly pořád stejně silné obdélníky.
   Místo slabší barvy (ta by ubrala kontrast) se ubírá VÁHA: rámeček 1 px místo 1,5,
   písmo 600 místo 700, menší rádius a jemný tyrkysový podklad — plocha zůstane, obrys
   zeslábne, takže „Další otázka" je plná a „Více o…" jen naznačená.
   SCOPED na blok pod ilustrací schválně: třídu `.qz-more` používá i online část
   („Zpět do turnaje", „Odveta"), kde jsou to samostatná tlačítka, ne druhá housle. */
.qz-picwrap > .qz-extra .qz-more { border-width: 1px; border-radius: 11px;
  background: rgba(47, 125, 120, .07); font-weight: 600; }

/* glóbus (malovaný 3D) — u otázky hrdina uprostřed, u odpovědi malý odznak v rohu */
.qz-globewrap { position: absolute; inset: 0; z-index: 6; display: flex;
  align-items: center; justify-content: center; }
/* velikost se odvíjí od výšky rámu, ne pevných px — jinak se orbit (110 %)
   a záře (128 %) v nižším rámu ořežou o horní a spodní hranu */
.qz-globe-stage { position: relative; display: flex; align-items: center; justify-content: center;
  height: min(68%, 290px); aspect-ratio: 1; }
/* atmosférická záře za glóbem */
.qz-globe-stage::before { content: ""; position: absolute; width: 128%; height: 128%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(126,206,224,.55) 0%, rgba(126,206,224,.18) 55%, rgba(126,206,224,0) 72%);
  filter: blur(4px); animation: qz-breathe 5.5s ease-in-out infinite; }
/* pulzující značka „tady jsi" na zemi (glóbus je natočen zemí k pozorovateli) */
.qz-beacon { position: absolute; z-index: 7; width: 13px; height: 13px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 3px #fffdf6, 0 2px 6px rgba(0,0,0,.35); }
.qz-beacon::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--coral);
  animation: qz-ping 3.4s ease-out infinite; }
/* zpomaleno a zjemněno (2026-08-29) — původní 1,9s/scale(2,8)/opacity .85 působilo při čtení otázky rušivě */
@keyframes qz-ping { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes qz-breathe { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
/* Vlajka zapíchnutá do glóbu (2026-09-24, přání hráče "ten glóbus je nudnej", pak
   "je to málo vtipné, málo animace", pak "co kdyby ta vlajka přeletěla v hezké
   animaci přes glóbus zleva doprava"). Nahrazuje holou tečku `.qz-beacon` na
   otázkách, které mají `cc` — tečka žije dál jako záložní stav pro velmi staré
   uložené hry (`flagPinHtml` bez cc). Stejné centrování jako mělo `.qz-beacon`
   (žádný top/left, jen `inset:0` a děti centrované přes transform), ať vlajka
   PŘISTANE přesně na místě, kam se glóbus natočil — na tom se nesmí hnout nic,
   ať je let sebehezčí.
   TŘETÍ KOLO, PŘEPSÁNO CELÉ: vlajka už nepadá seshora na místě, ale PŘELÉTÁ CELÝ
   GLÓBUS ZLEVA DOPRAVA (`.qz-flagpin-fly`, proměnná `--flagfly` = odkud start —
   viz `mountGlobeMedal()` v quiz.js, počítá se ze skutečné šířky rámu, aby na
   úzkém mobilu let nevylétl mimo zaoblený `.qz-picframe` a neuřízl se). Cestou
   se vlní jako praporek ve větru (`.qz-flagpin-flag`, běží po celou dobu letu,
   ne až po dosednutí), houpe se nahoru/dolů a naklápí (banking), u přistání
   maličko přestřelí a vrátí se. Přesně v tu chvíli blikne rázová vlna
   (`.qz-flagpin-impact`) a glóbus pod ní lehce trkne (`.qz-medal` níž). */
.qz-flagpin { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.qz-flagpin-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 3px #fffdf6, 0 2px 6px rgba(0,0,0,.35); }
.qz-flagpin-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--coral); animation: qz-ping 3.4s ease-out infinite; }
/* Rázová vlna při dosednutí — VĚTŠÍ a RYCHLEJŠÍ než klidová `qz-ping` na tečce výš
   (ta pulzuje pořád, tahle blikne jednou přesně v okamžiku, kdy vlajka doletí). */
.qz-flagpin-impact { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; border-radius: 50%; border: 2.5px solid var(--coral);
  opacity: 0; animation: qz-flagimpact .5s ease-out 1s both; }
@keyframes qz-flagimpact { 0% { transform: scale(.3); opacity: .95; }
  100% { transform: scale(2.6); opacity: 0; } }
/* Žerď čeká na místě od začátku (jemný fade), vlajka na ni dosedne až na konci letu —
   proto žádná vlastní dramatická animace, tu nese let (`.qz-flagpin-fly` níž). */
.qz-flagpin-pole { position: absolute; left: 50%; top: 50%; width: 2.4px; height: 30px;
  background: linear-gradient(#cdb98d, #a3875c); border-radius: 1px;
  transform: translate(-50%,-100%); transform-origin: bottom center;
  opacity: 0; animation: qz-poleup .25s ease .05s both; }
@keyframes qz-poleup { to { opacity: 1; } }
/* LET ZLEVA DOPRAVA: start je `calc(var(--flagfly) * -1)` od cílového bodu (proměnná
   v px, dopočítaná v JS), cestou se houpe nahoru/dolů a naklápí, u dosednutí (94–100 %)
   maličko přestřelí. `--flagfly` má záložní hodnotu 140px, kdyby JS nestihlo doběhnout. */
.qz-flagpin-fly { position: absolute; left: 1px; top: -1px;
  animation: qz-flagfly 1.1s cubic-bezier(.22,.61,.36,1) both; }
@keyframes qz-flagfly {
  0%   { transform: translate(calc(var(--flagfly, 140px) * -1), 18px) rotate(-18deg) scale(.85); opacity: 0; }
  9%   { opacity: 1; }
  38%  { transform: translate(calc(var(--flagfly, 140px) * -0.55), -18px) rotate(10deg) scale(1); }
  64%  { transform: translate(calc(var(--flagfly, 140px) * -0.22), 13px) rotate(-8deg) scale(1); }
  84%  { transform: translate(calc(var(--flagfly, 140px) * -0.05), -6px) rotate(5deg) scale(1); }
  94%  { transform: translate(2px, 2px) rotate(-4deg) scale(1.06); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
}
.qz-flagpin-flag { display: block; width: 24px; height: 16px; object-fit: cover;
  border-radius: 1px 6px 6px 1px; border: 1.3px solid #fffdf6;
  box-shadow: 0 2px 5px rgba(0,0,0,.3); background: var(--coral);
  transform-origin: left center; animation: qz-flagwave 1.1s ease-in-out infinite; }
/* Vlnění je skew + jemný scaleX, ne obyčejný posun — žerď/let se nehýbe, mává jen
   látka. Běží OD ZAČÁTKU (žádný delay), takže se vlajka vlní i za letu, ne až po
   dosednutí — jako praporek tažený proti větru. Nezávislé na `.qz-flagpin-fly`
   (jiný element), takže se dvě transformace neperou o tutéž vlastnost. */
@keyframes qz-flagwave { 0%,100% { transform: skewY(-8deg) scaleX(1); }
  50% { transform: skewY(8deg) scaleX(.94); } }
.qz-globecap { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: 'Nunito', sans-serif; font-style: italic; font-size: 16px; color: #4a6b64; font-weight: 700;
  letter-spacing: .02em; }
.qz-medal { position: relative; flex: none; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 36% 30%, #9fd0c6 0%, #5aa79e 45%, #2f7d78 78%, #1f5f5c 100%);
  border: 3px solid #fffdf6; outline: 2px solid #d8c9ad;
  box-shadow: inset -10px -8px 20px rgba(20,60,55,.35), 0 10px 22px rgba(60,90,80,.35);
  /* Glóbus lehce "trkne", přesně v okamžiku, kdy na něj dosedne přeletující vlajka
     (stejný čas jako .qz-flagpin-impact výš, 1s = konec letu `.qz-flagpin-fly`) —
     prodává to dopad jako skutečný náraz, ne jen dekoraci vedle. Element je čerstvý
     při každé otázce, takže se přehraje znovu pokaždé, stejně jako zbytek vlajky. */
  animation: qz-medalthump .3s ease-out 1s; }
@keyframes qz-medalthump { 0%,100% { transform: scale(1); } 50% { transform: scale(.96); } }
/* Dobarvení glóbu u otázky (2026-09-15, přání hráče „trochu dobarvi ten globus"). Filtrem
   na plátně, NE přemalováním assets/earth.jpg: textura je ověřená proti skutečným obrysům
   zemí a sdílí ji i glóbus na rozcestníku — tady se dá síla doladit jedním číslem. */
.qz-medal canvas { filter: saturate(2.15) contrast(1.13); }
.qz-medal .land { position: absolute; background: #a9bf77; border-radius: 52% 48% 60% 40%/58% 46% 54% 42%;
  box-shadow: inset -3px -4px 8px rgba(90,110,50,.45); }
.qz-medal .land.a { width: 34%; height: 24%; left: 12%; top: 26%; transform: rotate(-10deg); }
.qz-medal .land.b { width: 46%; height: 30%; left: 40%; top: 18%; background: var(--coral);
  box-shadow: inset -3px -4px 8px rgba(150,50,30,.4), 0 0 0 3px #fffdf6, 0 0 18px rgba(226,114,91,.5); }
/* u otázky: fotka schovaná (žádný spoiler), glóbus vyplní rám */
.qz-picframe:not(.revealed) .qz-pic,
.qz-picframe:not(.revealed) .qz-picbg,
.qz-picframe:not(.revealed) .qz-pic-fallback { opacity: 0; pointer-events: none; }
/* u odpovědi je hrdinou fotka: dojede zblízka a glóbus se odklidí */
@keyframes qz-picin { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
.qz-picframe.revealed .qz-pic { animation: qz-picin .6s cubic-bezier(.22,.9,.3,1) both; }
/* Podklad naskakuje se stejným náběhem, ale bez posunu — `transform` má vlastní
   (scale 1.06), takže ho animace `qz-picin` nesmí přebít. */
.qz-picframe.revealed .qz-picbg { animation: qz-picbgin .6s ease both; }
@keyframes qz-picbgin { from { opacity: 0; } to { opacity: 1; } }
.qz-picframe.revealed .qz-globewrap { opacity: 0; pointer-events: none; transition: opacity .3s ease; }

.qz-box { margin: 14px 16px 2px; position: relative; z-index: 2; background: var(--paper2);
  border: 2px solid #dccdb0; border-radius: 20px; padding: 18px 20px; box-shadow: 0 5px 0 #e3d5b8, 0 16px 34px rgba(120,90,50,.18);
  display: flex; flex-direction: column; gap: 12px; }
.qz-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.qz-q { font-family: 'Nunito', sans-serif; font-size: clamp(19px, 2.5vw, 25px); font-weight: 650; line-height: 1.3; }
/* minmax(0,1fr), ne 1fr: `1fr` je zkratka za `minmax(auto,1fr)` a `auto` u dlouhého slova
   znamená jeho celou šířku, takže stopa mřížky nejde srazit a sloupce přetečou z karty ven.
   `.qz-shell` má `overflow: clip`, takže se to nedá ani doscrollovat — text prostě zmizí.
   Táž past, na kterou 2026-09-03 doplatil výběr pásma a témat, jen na hrací obrazovce.
   Měřeno na 320 px: odpovědi končily 8 px za okrajem, u nejdelšího slova ve fondu 167 px.
   `overflow-wrap` k tomu patří: bez něj se dlouhé slovo nezalomí a stopa je pořád široká. */
.qz-ans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qz-ans.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* uhodnutá odpověď stojí sama — ať zabere celou šířku karty, ne půlku s dírou vedle */
/* min-height + vertikální centrování: krátká odpověď ("Pět") a dlouhá, co se zalomí na
   dva řádky ("Byla postavena teprve ve 20. století"), musí dát tlačítku stejnou výšku —
   jinak se karta otázku od otázky nekonzistentně natahovala a zmenšovala. */
.qz-a { background: #fff; border: 1.8px solid #dccdb0; border-radius: 14px; text-align: center; padding: 14px 8px 12px;
  min-height: 64px; display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 650; box-shadow: 0 3px 0 #e3d5b8; cursor: pointer;
  transition: transform .1s, box-shadow .1s; color: var(--ink); position: relative; overflow: visible;
  min-width: 0; overflow-wrap: anywhere; }
.qz-a:hover:not(.locked) { transform: translateY(-2px); box-shadow: 0 5px 0 #e3d5b8; }
.qz-a small { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-size: 13px;
  color: #fffdf6; font-weight: 800; background: var(--teal); box-shadow: 0 2px 6px rgba(42,127,127,.4); }
/* u odpovědi nese `small` celé slovo („SPRÁVNĚ", „TVŮJ TIP"), ne písmeno A–D —
   do kolečka se nevejde a přetékalo přes sousední dlaždici; proto z něj udělej štítek nad textem */
.qz-a.locked { cursor: default; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.qz-a.locked small { position: static; width: auto; height: auto; border-radius: 0; background: none;
  box-shadow: none; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qz-a.ok { border-color: var(--ok); background: #eef6ee; box-shadow: 0 3px 0 var(--ok); }
.qz-a.ok small { color: var(--ok); }
.qz-a.bad { border-color: var(--bad); background: #fbeeec; box-shadow: 0 3px 0 var(--bad); }
.qz-a.bad small { color: var(--bad); }
/* Štítek je 10px verzálky, tedy „malý text" — WCAG na něj chce 4,5:1, a to samotné --ok
   (2,96:1) ani --bad (3,43:1) na vlastním světlém podkladu nesplňují. Rámeček, stín a pozadí
   dlaždice zůstávají v původních barvách, tmavne JEN ten drobný popisek. Změřeno: 5,76:1 a 5,39:1. */
.qz-a.locked.ok small { color: #2f6b45; }
.qz-a.locked.bad small { color: #a8402f; }

/* Souboj se soupeřem po odpovědi (online duel). Dva řádky pod sebou, ne box: hláška
   a vysvětlení pod tím už boxy mají a tři rámečky nad sebou dělají z karty seznam
   přihrádek (viz komentář u .qz-quipbox). Drží je pohromadě jen linka nahoře.
   Jména jsou vlevo a výsledky za nimi, takže se dvojice čte jako výsledková listina. */
.zk-duel { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 9px;
  border-top: 1.5px dashed #e0d2b4; font-size: 13.5px; font-family: 'Nunito', sans-serif; }
.zk-duel b { font-weight: 800; }
.zk-duel b.ok { color: #2f6b45; }     /* stejné odstíny jako štítky odpovědí — 4,5:1 na papíru */
.zk-duel b.bad { color: #a8402f; }
.zk-duel i { color: var(--muted); font-style: italic; }
.zk-duel-opp { color: var(--ink); }

/* hláška (hvězda revealu) */
.qz-hlaska { background: linear-gradient(135deg, #fdf3d7, #fbe9d2); border: 2px solid var(--ochre); border-radius: 16px;
  padding: 14px 18px; box-shadow: 0 4px 0 #c78f35; }
.qz-hl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #a8752a; margin-bottom: 5px; font-family: 'Nunito', sans-serif; font-weight: 700; }
/* ZISK BODŮ JE ODMĚNA, ne popisek. Do 2026-09-07 to byl řádek o 12,5 px v téže ochrové
   barvě jako štítky, takže mezi obrázkem a vysvětlením zanikl — hráč dostal body a nebylo
   to na obrazovce znát („text získáváš 100 bodů je málo výrazné"). Číslo je proto velké
   a před ním stojí tatáž malovaná hvězda jako v bodovém praporku nahoře, ať se to čte
   jako totéž skóre. Rámeček to nedostává schválně: v pravém sloupci jsou dvě tlačítka
   a ohraničený obrázek, třetí orámovaná věc by z toho udělala změť.
   Hvězda tu NENÍ schválně (hráč ji tu 2026-09-07 nechtěl): patří k praporku nahoře,
   který drží celkové skóre, kdežto tady jde o přírůstek. U zlaté odpovědi hvězda
   zůstává, ale nese ji ta hláška, ne číslo. */
.qz-hl.points { text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 700;
  color: #a8752a; margin: 10px 0 0; }
.qz-hl.points b { font-family: 'Nunito', sans-serif; font-size: 27px; font-weight: 800;
  line-height: 1; color: #b07d18; }
.qz-ht { font-family: 'Nunito', sans-serif; font-size: clamp(16px, 2.1vw, 20px); line-height: 1.45; font-weight: 560; }
/* citace po odpovědi: vědomě bez rámečku/stínu (starý .qz-hlaska box na kartě po odpovědi
   působil rozbitě — moc oddělených boxů). Jen seskupuje qz-ht + qz-hl.points, aby jim
   fungovalo vzájemné odsazení bez kolize s .qz-box gapem. Timeout/vyhlášení dál používají
   původní .qz-hlaska box beze změny.

   Odsazení nahoru je NAVÍC k `gap: 12px` z .qz-box: hláška i vysvětlení se na kartě
   po odpovědi lepily na box s výsledkem a četly se jako jeden blok. (2026-09-01) */
.qz-quipbox { margin-top: 10px; }

/* Po odpovědi zůstávají všechny možnosti vidět (jako online): správná dostane .qz-a.ok
   (zeleně), tvůj špatný tip .qz-a.bad (červeně) — viz answer()/timeoutReveal v quiz.js.
   Dřív tu byl kompaktní box .qz-result „Správná / Tvoje", který dvě nevybrané možnosti
   skryl; hráč pak neviděl všechny odpovědi (sjednoceno s online 2026-09-03). */

/* Text a tlačítka pod sebou, ne vedle sebe — v užší kartě (poměr 3:2 s obrázkem)
   by se vysvětlení vedle tlačítek mačkalo do úzkého, zalamovaného sloupce. */
/* `flex: 1` + `margin-top: auto` u tlačítek drží akci u SPODNÍ hrany karty. Na širokém
   displeji je .qz-box roztažený na výšku obrázku (align-items: stretch), takže tlačítko
   dřív viselo hned pod textem a pod ním zůstal prázdný pruh. Na mobilu je výška karty
   daná obsahem, takže tam `auto` nemá co rozdělit a nic se nemění. (2026-09-01) */
.qz-frow { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.qz-fbtns { margin-top: auto; }
.qz-expl { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.qz-expl a { color: var(--teal); text-decoration: none; font-weight: 600; }
/* obě tlačítka stejně široká — flex: 1 1 0 je rozdělí napůl bez ohledu na délku textu */
.qz-fbtns { display: flex; gap: 8px; align-items: stretch; width: 100%; }
/* box-sizing: bez něj by se rámeček „Více" přičetl k šířce a tlačítka by se lišila o 3 px.
   min-width: 0: výchozí `auto` nedovolí zúžit pod šířku textu, takže by delší popisek
   („Více o časových pásmech Ruska") ukradl místo sousedovi a půlky by nebyly stejné. */
.qz-fbtns > button { flex: 1 1 0; min-width: 0; box-sizing: border-box; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* žárovka je samostatná flex položka vedle textu, takže se centruje na výšku
   celého popisku i když se zalomí na dva řádky — ne jen na první řádek */
.qz-more-ico { flex-shrink: 0; font-size: 15px; line-height: 1; }
.qz-more { background: none; border: 1.5px solid var(--teal); color: var(--teal); border-radius: 13px; padding: 11px 16px;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; }
/* průhledný rámeček stejné tloušťky jako u „Více" — jinak se obě tlačítka liší o jeho šířku */
.qz-next { background: var(--teal); color: #fffdf6; font-family: 'Nunito', sans-serif; font-weight: 650;
  border: 1.5px solid transparent; border-radius: 13px; padding: 11px 16px; font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 0 #1f5f5c; }

/* zlatý blik */
.qz-goldflash { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: radial-gradient(circle, rgba(255,215,0,.55), transparent 70%);
  animation: qzGold .9s ease-out forwards; }
@keyframes qzGold { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* karta „Víc o tom" */
/* `fixed`, ne `absolute`: absolutní pozice se počítá vůči #qz-shell, a ten je při dlouhé
   otázce vyšší než okno — karta se pak centrovala do jeho středu, tedy mimo obraz. Změřeno
   na 375×500 po odpovědi a doscrollování: `top: -162px`, nadpis nad horní hranou.
   V PÁRTY to funguje dál správně, i když se karta „přilepí" k shellu místo k oknu: párty
   dává shellu `transform` (rotace ke hráči), a ten vytvoří containing block, takže se karta
   otočí a naškáluje spolu se hrou — přesně jak to hráč u stolu potřebuje. Mimo párty je
   transform prázdný (applyRotation), takže se karta drží okna. */
.qz-cardov { position: fixed; inset: 0; z-index: 12; background: rgba(61,50,41,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.qz-cardbox { width: min(440px, 94%); max-height: 88%; overflow-y: auto; background: var(--paper2); border-radius: 18px; border: 2px solid #dccdb0;
  box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.qz-cardbody { padding: 16px 18px 18px; }
.qz-cardbody h3 { font-family: 'Nunito', sans-serif; font-size: 19px; margin-bottom: 8px; }
.qz-cardbody p { font-size: 14px; line-height: 1.5; color: var(--ink); }
.qz-cardvoice { font-family: 'Nunito', sans-serif; font-style: italic; color: var(--muted); margin-top: 10px; }
.qz-cardclose { margin-top: 14px; background: var(--coral); color: #fffdf6; border: none; border-radius: 12px; padding: 10px 20px;
  font-family: 'Nunito', sans-serif; font-weight: 650; cursor: pointer; box-shadow: 0 3px 0 #b1543f; }

/* Vysvětlení, proč je hlavní akce zablokovaná (2026-09-07). Hráč nahlásil „nefunguje
   tlačítko Pokračuj" — ono fungovalo, jen čekalo na výběr, a nikde to nebylo napsané.
   Ztlumené tlačítko samo o sobě nestačí: pořád vypadá jako tlačítko, takže klik a nic
   se nestane. Text stojí NAD tlačítkem, ať se čte dřív, než na něj hráč klikne podruhé. */
.qz-actionhint { font-size: 13.5px; color: var(--muted); text-align: center;
  margin: 0 0 10px; max-width: 44ch; margin-inline: auto; line-height: 1.5; }

/* konec sóla */
.qz-end { align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 46px 24px; }
.qz-end h2 { font-family: 'Nunito', sans-serif; font-size: 30px; color: var(--teal); }
/* z holého čísla je věta — 52 px by přeteklo, korálová zůstává jako akcent proti tyrkysovému nadpisu */
.qz-endscore { font-family: 'Nunito', sans-serif; font-size: clamp(24px, 4vw, 34px); font-weight: 700; color: var(--coral); }
.qz-endrow { display: flex; gap: 12px; }
/* Výsledek sóla (2026-10-13): hlavní je počet správných, body jen tichý řádek pod tím.
   Mezery dělají skupiny: skóre + body těsně, srovnání a výzva jako samostatné bloky. */
.qz-endscore b { font-weight: 800; }
.qz-endbody { margin-top: -10px; color: var(--muted); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.qz-vyzvasrov { display: flex; gap: 14px; margin-top: 14px; }
.qz-vyzvasrov > div { min-width: 132px; padding: 12px 18px; border-radius: 14px; background: #fffaf0; border: 1.5px solid #e6d7b8;
  display: flex; flex-direction: column; gap: 2px; }
.qz-vyzvasrov > div.lepsi { border-color: var(--teal); background: #eef6f3; }
.qz-vyzvasrov span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.qz-vyzvasrov b { font-family: 'Nunito', sans-serif; font-size: 24px; color: var(--ink); }
.qz-vyzvaverdikt { margin-top: -4px; font-weight: 700; color: var(--teal); }
.qz-vyzvabox { width: min(520px, 100%); margin: 22px 0 30px; display: flex; flex-direction: column; align-items: center; gap: 0; }
/* Rytmus bloku: nadpis → text 10, text → profil 22, profil → tlačítko 18, → sdílení 20.
   Profil (přezdívka + PIN) se vyplňuje přímo tady — hráč nechtěl odcházet na obrazovku ligy. */
.qz-vyzvabox > .qz-vyzvap { margin: 10px 0 0; }
.qz-vyzvabox > .qz-vyzvaform { margin-top: 22px; }
.qz-vyzvabox > .qz-vyzvapos { margin-top: 18px; }
.qz-vyzvabox > #qz-vyzvakde { margin-top: 20px; }
.qz-vyzvah { font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); }
.qz-vyzvap { color: var(--muted); line-height: 1.6; max-width: 440px; }
.qz-vyzvaform { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 440px; }
.qz-vyzvaform:empty { display: none; }
.qz-vyzvapole { display: flex; gap: 10px; width: 100%; }
.qz-vyzvapole .qz-pname-in { flex: 1; min-width: 0; font-size: 15px; padding: 10px 12px; }
.qz-vyzvasouhlas { font-size: 14px; color: var(--ink); line-height: 1.5; text-align: left; }
.qz-vyzvasouhlas input { margin-right: 6px; vertical-align: -2px; }
.qz-vyzvasouhlas a { color: var(--teal); }
.qz-vyzvatiche { margin: 0; font-size: 13px; color: var(--muted); }
.qz-vyzvachyba { margin: 0; font-size: 14px; color: var(--bad); font-weight: 700; }
.qz-vyzvachyba:empty { display: none; }
.qz-vyzvapos { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.qz-vyzvapos:disabled { opacity: .45; cursor: not-allowed; }
.qz-vyzvaintro .qz-vyzvaform { margin: 4px 0 6px; }
#qz-vyzvakde:empty { display: none; }
.qz-vyzvatext { max-width: 460px; line-height: 1.6; color: var(--ink); font-size: 17px; }
@media (max-width: 520px) {
  .qz-vyzvapole { flex-direction: column; }
  .qz-vyzvasrov > div { min-width: 0; flex: 1; }
}
/* Ilustrace nad výsledkem — rámeček jako u dlaždic rozcestníku (.qz-mode .ic-img), jen větší.
   Margin navíc dělá z obrázku vlastní skupinu nad nadpisem (pravidlo o vzdušnosti). */
.qz-endimg { width: min(220px, 52vw); height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 18px; border: 3px solid #fffdf6; outline: 2px solid #e3d5b8;
  box-shadow: 0 6px 16px rgba(120, 90, 50, .18); margin-bottom: 8px; }

@media (max-width: 767px) {
  /* Obrázek na telefonu NAHOŘE, karta pod ním (přání 2026-09-01). DOM pořadí se
     neobrací — desktop ho nepotřebuje (grid-template-areas řadí podle jména oblasti,
     ne podle pořadí v HTML), takže by přehazování DOM struktury bylo riziko bez
     přínosu. Řeší to `order` na flex položkách, jen tady na mobilu. */
  .qz-play { display: flex; flex-direction: column; }
  /* `display: contents` rozpustí obal pravého sloupce, aby se rám a blok pod ním daly
     seřadit samostatně: na mobilu je totiž všechno pod sebou a „Další otázka" by hned
     pod obrázkem skončila NAD odpověďmi — hráč by se proklikal dál, než by výsledek
     vůbec uviděl. Obal zůstává v DOMu, takže selektory musí být potomkové (` > ` by
     přestalo platit — `display: contents` mění rozvržení, ne strom). */
  .qz-play > .qz-picwrap { display: contents; }
  .qz-play .qz-top { order: 1; }
  .qz-play .qz-picframe { order: 2; }
  .qz-play .qz-box { order: 3; }
  .qz-play .qz-extra { order: 4; }
  .qz-ans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Pevná výška (210/190 px) nahrazena poměrem skutečné fotky — ZMĚŘENÝ DŮVOD, ne
     kosmetika. Při 375 px šířky vycházela pevná výška téměř identicky (343×190 ≈ 16:9),
     ale appka „mobil" počítá až do 767 px (phablety, telefon naležato) a tam už rám
     rostl do šířky, zatímco výška zůstávala stejná — při 700 px vyšel pruh 168 px na
     stranu, horší než na tabletu těsně nad touhle hranicí. Poměr škáluje s šířkou vždy
     správně; obě stejná (revealed i ne), takže mezi otázkou a odpovědí rám neposkočí. */
  .qz-picframe,
  .qz-picframe.revealed { height: auto; aspect-ratio: 16 / 9; }
  /* Bublina hostitele se do 2026-09-24 na mobilu schovávala úplně (`display:none`) —
     ztrácely se tak i verdikty a hlášky během hry, ne jen uvítání na rozcestníku
     (`say()` nese oboje stejnou bublinou). Teď zůstává vidět, jen užší a s menším
     písmem, aby se do 767px vešla na víc řádků místo do jednoho širokého. Šířku
     hostitele (avatar+bublina) srážíme na to, co zbyde vedle křížku „Domů"
     (34px + 14px odstup + 14px levý okraj hostitele ≈ 62px). */
  .qz-host { max-width: calc(100% - 74px); }
  .qz-host-bubble { font-size: 13px; padding: 8px 12px; line-height: 1.3; }
  /* `positionPickHead()` (quiz.js) dopočítá drobečkovou lištu podle SKUTEČNÉ výšky
     bubliny za běhu, takže víceřádkovou bublinu sama obejde. Padding obrazovek pod
     ní je ale pevné číslo — muselo se zvednout tam, kde bylo tuze na jednořádkovou
     bublinu (44px na rozcestníku, 58px nad otázkou), aby delší hláška nezajela do
     nadpisu/mřížky pod sebou. `.qz-pick`/`.qz-start`/`.qz-setup` (124/112px) mají
     rezervu už teď dost i na dva řádky. */
  .qz-modepick { padding-top: 108px; }
  .qz-top { padding-top: 96px; }
  /* Párty verze `.qz-top` — na tuhle třídu se při mobilní opravě 2026-09-24
     zapomnělo, protože se jí tehdy netestovalo (zkouška byla v sólu). Stejná
     hodnota, stejný důvod: víceřádková bublina nesmí zajet do praporků hráčů. */
  .qz-scoreboard { padding-top: 96px; }
  /* Vyhlášení (`say(vic)` z fondu `victory`/`tie`) umí mít i dvouřádkovou větu —
     46px stačilo jen na jednořádkovou bublinu. `.zk-wrap` verze (online výsledek,
     řádek 1166) je specifičtější a tohle nepřebije, zůstává na svých 76px. */
  .qz-end { padding-top: 108px; }
  /* Tlačítka „Více o…" a „Další otázka" pod sebe, ne vedle sebe (přání 2026-09-01) —
     na úzké obrazovce dělal delší popisek „Více o…" dvouřádkový text v půlce šířky.
     `flex: 0 1 auto` ruší `flex: 1 1 0` ze základního pravidla (tam dávalo tlačítkům
     stejnou ŠÍŘKU vedle sebe; ve sloupci by to dávalo stejnou VÝŠKU, ne to, co chceme). */
  .qz-fbtns { flex-direction: column; }
  /* `min-height` + sražené řádkování srovnají výšku obou tlačítek stejně jako na desktopu
     (dřív 62 vs 44 px, protože delší popisek se láme na dva řádky) — a 52 px je zároveň
     nad 44px minimem pro dotyk, takže se tím spraví i velikost cíle. */
  .qz-fbtns > button { flex: 0 1 auto; width: 100%; min-height: 52px; line-height: 1.25; }
  /* Týž rytmus jako na desktopu, jen o stupeň sražený (18 / 6 / 14 / 24). Mezera mezi
     tlačítky tu byla dokonce 8 px, tedy 0,15 násobku jejich výšky — pod sebou se to
     četlo jako jeden dvouřádkový přepínač, ne jako dvě různá rozhodnutí. */
  .qz-extra .qz-frow { gap: 14px; }
  .qz-extra .qz-fbtns { gap: 24px; }
}

/* MEZERA MEZI MOBILEM A DESKTOPEM (768–899 px, typicky tablet na výšku) — objevena
   2026-09-01 při kontrole „zkontroluj to i na mobilu a tabletu", stará od založení
   appky (2026-07-21), netýká se dnešní práce. Karta v tomhle pásmu zdědí ze základního
   pravidla `height: 320px` / `clamp(200px, 26vh, 280px)`, což je výška počítaná z výšky
   OKNA, ne ze skutečné šířky karty (ta v tomhle pásmu roste na 700–870 px). Naměřeno na
   768 px: rám 736×272, fotka uvnitř 466×266 — pruh 135 px NA STRANU, přes třetinu rámu.

   Řešení kopíruje dnešní poznatek ze stacked layoutu: v jednosloupcovém rozložení (a
   tohle pásmo jím je stejně jako mobil) rám nemusí s ničím lícovat, takže může mít
   prostě poměr skutečné fotky — 16:9 pro celý dnešní fond (appka dnes negenerovala
   žádnou čtvercovou ilustraci, viz zápis „VYZKOUŠENO A ZAMÍTNUTO" výš). Na rozdíl od
   zamítnutého desktopového pokusu tu neplatí důvod zamítnutí („zbytečně velké") —
   tablety na výšku mají dost výšky okna (typicky 1024 px), takže i rám 400+ px vysoký
   nenutí ke scrollování tak, jak to dělal na nízkém okně notebooku. */
@media (min-width: 768px) and (max-width: 899px) {
  .qz-picframe,
  .qz-picframe.revealed { height: auto; aspect-ratio: 16 / 9; }
}

/* Otázka BEZ vlastní ilustrace (většina fondu) — rám pak nese jen vlajku a název země,
   takže poměr 16/9 z něj dělá poloprázdnou plochu: na tabletu 768×432 px, tedy skoro
   půl obrazovky pod otázkou. Fallback je v odhaleném stavu vodorovný řádek (viz
   `.qz-picframe.revealed .qz-pic-fallback`), na který stačí ~116 px.
   JEN pod 900 px: na desktopu se rám záměrně táhne podle výšky textové karty
   (`align-self: stretch`, rozhodnutí 2026-09-01) a pevná výška by to lícování rozbila.
   Platí až po odhalení — do té doby je v rámu glóbus a ten velký být má.
   Dvě třídy navíc dávají vyšší specificitu než pravidla výš, takže na pořadí nezáleží. */
@media (max-width: 899px) {
  .qz-picframe.revealed.qz-pic-broken { aspect-ratio: auto; height: 116px; }
}

/* výběr režimu / setup párty / scoreboard / steal / ceremoniál */
.qz-shell { transition: transform .4s ease; }
.qz-modepick { align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 44px 24px; }
.qz-modepick h2 { font-family: 'Nunito', sans-serif; font-size: 44px; font-weight: 800; color: var(--teal); }
/* Čtyři režimy ve 2×2, ne 3+1. Ve flexu se čtvrtá karta zalamovala sama pod trojici,
   takže online vypadal jako přílepek, ne jako rovnocenný režim. Mřížka je proto
   natvrdo dvousloupcová; na úzkém displeji jeden sloupec, protože 2 × 220 + 16 mezera
   = 456 px se na telefon nevejde. (2026-08-31) */
.qz-modes { display: grid; grid-template-columns: 1fr; gap: 16px; justify-content: center; }
@media (min-width: 560px) { .qz-modes { grid-template-columns: repeat(2, auto); } }
/* Od 2026-10-13 dvě skupiny: nahoře Rychlá hra + Online souboj, pod nimi 2×2 (Turnaj pro partu, Sólo,
   Párty, Škola). Mezi skupinami víc místa než uvnitř (18 + 16 = 34 proti 16). */
.qz-modes-offline { margin-top: 16px; }
.qz-onlinerow { position: relative; z-index: 1; margin-top: -6px; font-size: 14px; color: var(--muted); }
.qz-onlinerow:empty { display: none; }
.qz-onlinerow button { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--teal); font-weight: 700; cursor: pointer; }
.qz-onlinerow button:hover { text-decoration: underline; }
.qz-mode { width: 220px; background: var(--paper2); border: 2px solid #dccdb0; border-radius: 18px; padding: 22px 18px; cursor: pointer;
  box-shadow: 0 4px 0 #e3d5b8; font-family: inherit; text-align: center; transition: transform .12s, box-shadow .12s; }
.qz-mode:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #e3d5b8; }
/* Obsah karty odshora: tlačítko jinak centruje svisle, a u sousedních karet s různě
   dlouhým popiskem pak obrázky i nadpisy nesedí v jedné řadě. */
.qz-mode { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; }
/* box-sizing: tlačítka ho mají výchozí, karta Rychlé hry je div — bez toho vyšla o okraje a odsazení širší (338 proti 290 px). */
.qz-mode .ic { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.qz-mode .ic-img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; border: 3px solid #fffdf6; outline: 2px solid #e3d5b8;
  box-shadow: 0 5px 14px rgba(120,90,50,.28); display: block; transition: transform .15s; }
.qz-mode:hover .ic-img { transform: translateY(-2px) rotate(-1.5deg); }
.qz-mode .ic-fb { align-items: center; justify-content: center; }
.qz-mode .ic svg { width: 58px; height: 58px; display: block; filter: drop-shadow(0 3px 4px rgba(120,90,50,.22)); }
.qz-mode:hover .ic svg { transform: translateY(-1px) rotate(-2deg); transition: transform .15s; }
.qz-mode .t { font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 650; margin: 6px 0 4px; }
.qz-mode .d { font-size: 12.5px; color: var(--muted); }
/* na desktopu je po zrušení rámečku místo — karty režimů můžou být větší.
   Práh 1000 px je dědictví po flexovém řádku tří karet (3 × 290 + 2 × 16 = 902 px).
   Od 2026-08-31 je mřížka 2×2, takže se sem vejdou i dřív (2 × 290 + 16 = 596 px);
   práh ale zůstává, protože nejde jen o šířku karet — na menším plátně by 132px
   obrázky a 24px nadpisy vytlačily rozcestník mimo obrazovku. */
@media (min-width: 1000px) {
  .qz-mode { width: 290px; padding: 26px 22px; }
  .qz-mode .ic-img { width: 132px; height: 132px; border-radius: 18px; }
  .qz-mode .ic svg { width: 74px; height: 74px; }
  .qz-mode .t { font-size: 24px; }
  .qz-mode .d { font-size: 14px; }
  /* totéž pro dlaždice kontinentů/zemí — :not(.qz-tiles-sec), aby to nezvětšilo
     i drobné dlaždice témat, které mají vlastní (menší) rozměry */
  .qz-tiles:not(.qz-tiles-sec) { max-width: 940px; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .qz-tiles:not(.qz-tiles-sec) .qz-tile { padding: 22px 14px 18px; }
  .qz-tiles:not(.qz-tiles-sec) .ic-img { width: 128px; height: 128px; border-radius: 18px; }
  .qz-tiles:not(.qz-tiles-sec) .qz-tile-t { font-size: 18px; }
  .qz-tiles:not(.qz-tiles-sec) .qz-tile-sub { font-size: 13px; }
}
/* ŽÁDNÁ OBRAZOVKA SE NA ŠIROKÉM MONITORU NEROZŠIŘUJE. Všechno drží ve sloupci
   980 px (#qz-body). (2026-09-01)

   ZAMÍTNUTO A NEZKOUŠEJ ZNOVU: tenhle den tu byl blok `@media (min-width: 1300px)`,
   který roztahoval `.qz-pick` na 1460 px (a od 1700 px na 1720), k tomu rušil strop
   940 px u dlaždic zemí a přepínal kontinenty i témata na pevné čtyři sloupce.
   Vzniklo to na přání „chtěl bych takto na šířku vše" a týmž hráčem to bylo týž den
   zrušeno, nejdřív u hry a pak i tady. Prázdné pruhy po stranách jsou menší zlo než
   obrazovka roztažená přes celý monitor.

   Kdyby to někdo otevíral potřetí: samotné rozšíření `#qz-body` nestačí a je to past.
   `.qz-tiles:not(.qz-tiles-sec)` má strop 940 px a STEJNOU specificitu jako
   `.qz-tiles-cc`, takže se přebije jen dvojicí tříd `.qz-tiles.qz-tiles-cc`. */
/* Úvodní obrazovka: točící se glóbus ZA NADPISEM, ne za dlaždicemi.
   Do 2026-09-03 byl vycentrovaný na střed obrazovky a měl 500 px — jenže nad dlaždicemi
   je jen ~195 px místa, takže se schoval skoro celý za karty a koukal jen okrajem.
   Nově je menší a posunutý nahoru, aby ho nesl nadpis a dlaždice mu podebíraly patu.

   GLÓBUS JE UVNITŘ `.qz-titlewrap` SPOLU S NADPISEM, ne volně v obrazovce — a to je
   ten podstatný detail. Zkusil jsem napřed obojí volnou cestou a obě selhaly:
   `top: -40px` (kotva k hornímu okraji) se rozešla na vysokém okně, protože obsah se
   centruje svisle a klesl doprostřed, zatímco glóbus zůstal nahoře. `translateY(-317px)`
   od středu obsahu vydrželo změny výšky okna, ale spadlo na TELEFONU: tam jsou dlaždice
   pod sebou, obsah je dvakrát vyšší a pevný posun nestačil — glóbus skončil za první
   kartou. Obojí byla magická čísla vázaná na výšku obsahu. Uvnitř obalu se glóbus
   centruje přímo na nadpis (`inset: 0; margin: auto` vůči jeho boxu), takže drží
   při jakékoli šířce i výšce a ladit není co. */
.qz-modepick { position: relative; }
.qz-titlewrap { position: relative; display: flex; align-items: center; justify-content: center; }
.qz-titlewrap h2 { position: relative; z-index: 1; }
/* Centruje se přes `left/top: 50%` + `translate(-50%, -50%)`, NE přes `inset: 0; margin: auto`.
   Glóbus je totiž ŠIRŠÍ než jeho obal (obal má šířku nadpisu, ~194 px, glóbus 300),
   a v takovém případě se `margin: auto` vodorovně vzdá a zarovná prvek doleva — svisle
   přitom vycentruje, takže to vypadalo jako záhadný posun jen v jedné ose. */
/* Svisle NENÍ přesně na středu nadpisu, ale o kousek níž (−35 % místo −50 %). Přesný
   střed vyčníval nad horní okraj obrazovky o 39 px a `#qz-shell` má skryté přetečení,
   takže se glóbus ořezával — nahoře je totiž jen 44 px odsazení, kdežto glóbus sahá
   150 px nad střed nadpisu. Zvětšit odsazení nejde: na okně vysokém 700 px už se obsah
   sotva vejde. Posun je v procentech VLASTNÍ velikosti glóbu, takže drží i po jeho změně. */
.qz-globebg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -35%);
  width: min(300px, 70vw); height: min(300px, 70vw);
  border-radius: 50%; overflow: hidden; opacity: .28; pointer-events: none; z-index: 0;
  box-shadow: inset -18px -14px 40px rgba(20,50,60,.35); }
.qz-globebg canvas { width: 100% !important; height: 100% !important; display: block; }
.qz-modepick h2, .qz-modes, .qz-resume-open, .qz-modesub { position: relative; z-index: 1; }
/* Podtitulek patří k nadpisu (užší mezera nad ním), od dlaždic ho dělí víc vzduchu —
   jedna hodnota gap (18 px) by nadpis, podtitulek a karty slila do jednoho bloku.
   Záporný okraj −44 px NENÍ magické číslo: h2 má výchozí okraj prohlížeče 0,83 em
   (36,5 px při 44 px písma) a ten leží UVNITŘ .qz-titlewrap, takže mezi písmem nadpisu
   a podtitulkem by bylo 36 + 18 px. Nadpisu okraj ubrat nejde — glóbus se centruje
   na obal a po jeho zmenšení by vyjel nad horní okraj obrazovky. Výsledek: nadpis →
   podtitulek ~10 px, podtitulek → dlaždice 34 px (rytmus jako v lobby). */
.qz-modesub { margin: -44px 0 16px; max-width: 30em; font-size: 16px; line-height: 1.5; color: var(--muted); }
/* Rychlá hra je od 2026-10-13 karta mezi režimy; pásmo a „Změnit“ jsou její spodní řádek. */
.qz-quicknote { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.qz-mode-quick .qz-quickbands { margin-top: 8px; }
/* Barva písma jako u tlačítek (ButtonText): div by jinak zdědil hnědou stránky a nadpis by byl světlejší než u sousedních karet. */
.qz-mode-quick { color: ButtonText; }
.qz-quicknote b { color: var(--ink); font-weight: 700; }
.qz-quickchange { background: none; border: 0; padding: 2px 0; font: inherit; font-weight: 700; color: var(--teal);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(42,127,127,.35); }
.qz-quickchange:hover { text-decoration-color: var(--teal); }
.qz-quickbands { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.qz-quickbands[hidden] { display: none; }

/* výběr tématu: kontinent → země → sekce */
.qz-pick { align-items: center; text-align: center; gap: 12px; padding: 70px 22px 20px; }
.qz-pick h2 { font-family: 'Nunito', sans-serif; font-size: 26px; font-weight: 800; color: var(--teal); }
/* Návod k obrazovce jako podtitulek pod nadpisem (přání hráče 2026-09-08). Proti
   .qz-actionhint se liší dvěma věcmi, a obě jsou důvod, proč to není tatáž třída:
   je natrvalo v DOMu (nemizí po výběru, jinak by uskočila celá mřížka dlaždic) a
   hintAkce() si svoji hlášku hledá i maže právě podle .qz-actionhint.
   .qz-pick má gap 12px, takže odsazení od nadpisu řeší mřížka — vlastní margin ne. */
.qz-pickhint { font-size: 13.5px; color: var(--muted); text-align: center;
  margin: 0; max-width: 52ch; line-height: 1.5; }
/* Hostitel (.qz-host) je ukotvený k celé šířce shellu (position:absolute), ale obsah
   obrazovky žije ve vystředěném sloupci #qz-body — na širokém plátně (nad 980px) se
   proto levé okraje rozjedou, kdyby lišta byla jen margin-left v běžném toku. Proto je
   i ona ukotvená k shellu stejně jako hostitel a JS (positionPickHead() v quiz.js) jí
   podle skutečného rozměru bubliny nastaví left/top tak, aby seděla přímo pod ní. */
.qz-pickhead { position: absolute; z-index: 7; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qz-pick, .qz-start { padding-top: 124px; }
.qz-setup { padding-top: 112px; }
.qz-back { background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 12px; padding: 7px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: 0 3px 0 #e3d5b8;
  display: inline-flex; align-items: center; gap: 5px; }
.qz-back:hover { transform: translateY(-1px); }
.qz-mode-tag { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fffdf6;
  background: var(--teal); padding: 5px 11px; border-radius: 999px; }
.qz-crumbs { font-size: 13px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.qz-crumbs b { color: var(--teal); }
.qz-crumb { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qz-crumb:hover { color: var(--teal); }
.qz-crumb-sep { color: var(--muted); opacity: .6; }
.qz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; width: 100%; max-width: 760px; }
.qz-tile { position: relative; background: var(--paper2); border: 2px solid #dccdb0; border-radius: 16px; padding: 18px 12px 14px; cursor: pointer;
  box-shadow: 0 4px 0 #e3d5b8; font-family: inherit; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .12s, box-shadow .12s; color: var(--ink); }
.qz-tile:hover:not(.soon) { transform: translateY(-2px); box-shadow: 0 6px 0 #e3d5b8; border-color: var(--teal); }
.qz-tile-ic { font-size: 40px; line-height: 1; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; position: relative; }
.qz-tile-ic .ic-img { width: 92px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block;
  border: 3px solid #fffdf6; outline: 2px solid #e3d5b8; box-shadow: 0 6px 16px rgba(120,90,50,.24); transition: transform .12s; }
/* Dlaždice pásem („Kdo dnes hraje?") jsou jen tři a jsou to portréty lidí — tam na
   obrázku záleží víc než u zemí, kde nese informaci hlavně vlajka. Dostávají proto
   větší rozměr než obecných 128 px.
   MIMO media query schválně: uvnitř bloku od 1000 px zůstávaly dlaždice na tabletu
   drobné (naměřeno 98 px při 768 px šířky), i když tam místa je dost. Takhle platí
   všude a `max-width: 100%` je na úzkém telefonu sám srazí (78 px).
   `height: auto` + `aspect-ratio` místo pevné výšky drží čtverec i po tom sražení —
   s pevnou výškou z něj byl na telefonu vysoký obdélník (naměřeno 78×166).
   Stojí AŽ ZA blokem s obecným pravidlem: obě mají skoro stejnou specificitu, takže
   o vítězi rozhoduje pořadí v souboru. */
.qz-tiles .qz-tile[data-band] .ic-img { width: 160px; height: auto; aspect-ratio: 1 / 1; }
.qz-tile:hover:not(.soon) .ic-img { transform: translateY(-2px) rotate(-1.5deg); }
.qz-tile-ic .ic-fb { font-size: 40px; line-height: 1; align-items: center; justify-content: center; }
.qz-tile-t { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; }
.qz-tile-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.qz-tile.soon { opacity: .55; cursor: not-allowed; box-shadow: 0 4px 0 #e8ddc6; }
.qz-tile.soon .qz-tile-ic { filter: grayscale(.5); }
.qz-tbadge { position: absolute; top: 8px; right: 8px; z-index: 3; background: var(--ochre); color: #fffdf6; font-size: 9px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.qz-tile.sel { border-color: var(--teal); box-shadow: 0 4px 0 #1d6060; }
.qz-tile-check { display: none; position: absolute; inset: 0; border-radius: 14px;
  background: rgba(42,127,127,.62); align-items: center; justify-content: center; color: #fff; }
.qz-tile.sel .qz-tile-check { display: flex; }
.qz-tile-check svg { width: 46px; height: 36px; }
/* „Pokračuj“ PLAVE u spodní hrany okna, ale JEN KDYŽ JE CO POTVRDIT (2026-10-03, hráč: „nevidím
   tlačítko pokračuj a musím sjet“ — výběr zemí má 23–56 dlaždic a tlačítko bylo pod nimi).
   Dokud je zašedlé, sedí v toku pod dlaždicemi jako dřív — na zablokované tlačítko nemá
   smysl upozorňovat přes celou obrazovku. 13. 8. se plovoucí lišta ZRUŠILA, protože měla
   bílý podklad přes celou šířku a karty se o ni při rolování ostře usekávaly; tady místo
   podkladu běží PŘECHOD do barvy papíru u spodní hrany (#fdf6e8, konec gradientu stránky),
   takže karty pod tlačítkem vyblednou. Na konci stránky sticky prvek stojí na svém místě
   v toku, takže poslední řadu karet nezakryje. `:has()` bez podpory = chování jako dřív. */
.qz-sec-confirm { width: 100%; max-width: 760px; display: flex; justify-content: center; padding: 18px 0 8px; }
.qz-sec-confirm:has(.qz-btn-start:not(:disabled)) { position: sticky; bottom: 0; z-index: 2;
  padding: 34px 0 calc(14px + env(safe-area-inset-bottom, 0px)); max-width: none; pointer-events: none;
  background: linear-gradient(180deg, rgba(253,246,232,0) 0%, rgba(253,246,232,.92) 48%, #fdf6e8 100%); }
/* pointer-events: přechod je průhledný nahoře, takže by bez toho kradl kliknutí kartám pod ním */
.qz-sec-confirm .qz-btn-start { pointer-events: auto; }
.qz-btn-start { background: var(--coral); color: #fffdf6; border: none; border-radius: 16px; padding: 12px 28px;
  font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 0 #b1543f, 0 8px 18px rgba(226,114,91,.3); transition: transform .14s, box-shadow .14s; }
.qz-btn-start:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 #b1543f, 0 12px 24px rgba(226,114,91,.35); }
.qz-btn-start:disabled { opacity: .38; cursor: not-allowed; box-shadow: 0 3px 0 #cca090; }
/* 10 dlaždic (9 témat + Vybrat vše) — 5 a 5 pod sebou. max-width dědí z .qz-tiles
   (760px); na tomhle základě je 5 sloupců únosné až od ~640px, pod tím 2 sloupce. */
.qz-tiles-sec { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1040px; }
@media (min-width:640px) { .qz-tiles-sec { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.qz-tiles-sec .qz-tile { padding: 16px 10px 12px; gap: 6px; }
.qz-tiles-sec .qz-tile-ic { font-size: 36px; margin-bottom: 0; }
.qz-tiles-sec .ic-img { width: 112px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; }
.qz-tiles-sec .ic-fb { font-size: 36px; }
.qz-tiles-sec .qz-tile-t { font-size: 15px; }
.qz-tiles-sec .qz-tile-sub { font-size: 10px; }
.qz-pick-empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 26px; }

/* `padding-left/right/bottom`, NE zkratka `padding` — ta by přepsala `padding-top: 112px`
   z pravidla výš (2026-07-31), které rezervuje místo pro absolutně pozicovanou lištu
   .qz-pickhead. Přesně to se stalo: zkratka tu byla donedávna a lišta na obrazovce
   „Nová výprava" přesahovala 34 px do nadpisu (`Nastavení hry` bylo pod „Vše").
   Ověřeno mutací: vrácení zkratky `padding: 58px 22px 20px` reprodukuje překryv. */
.qz-setup { padding-left: 22px; padding-right: 22px; padding-bottom: 20px; gap: 12px; overflow-y: auto; }
.qz-setup h2 { font-family: 'Nunito', sans-serif; font-size: 24px; text-align: center; margin-bottom: 2px; color: var(--teal); }
.qz-setcard { background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 14px; padding: 12px 14px; box-shadow: 0 3px 0 #e3d5b8; }
.qz-setcard h3 { font-family: 'Nunito', sans-serif; font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.qz-setcard h3 .n { width: 22px; height: 22px; border-radius: 50%; background: var(--ochre); color: #fffdf6; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.qz-prow { display: flex; align-items: center; gap: 8px; padding: 5px 0; flex-wrap: wrap; }
.qz-pav { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fffdf6; font-size: 13px; flex-shrink: 0; box-shadow: inset -2px -3px 5px rgba(0,0,0,.2); }
.qz-pname-in { flex: 1; min-width: 90px; font-family: inherit; font-size: 14px; padding: 6px 10px; border-radius: 9px; border: 1.4px solid #dccdb0; background: #fff; color: var(--ink); }
/* chybějící jméno: bublina hostitele je nahoře stránky, u dlouhého formuláře snadno mimo
   viditelnou oblast — proto chyba musí být vidět přímo na poli, kam se scrolluje */
.qz-pname-in.err { border-color: var(--bad); background: #fbeeec; animation: qz-shake .35s; }
@keyframes qz-shake { 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
/* přímý přepínač děti/dospělí — nahrazuje dřívější číselný vstup věku, ten appka
   stejně nikde nepoužívala k ničemu jinému než k odvození tohohle binárního pásma */
.qz-bandtoggle { display: flex; border-radius: 12px; overflow: hidden; border: 1.4px solid #dccdb0; flex-shrink: 0; }
.qz-bandbtn { font-size: 11px; color: var(--muted); background: #fff; border: none; padding: 5px 10px; cursor: pointer; font-family: inherit; }
.qz-bandbtn.deti.on { background: var(--leaf); color: #fffdf6; }
.qz-bandbtn.starsi.on { background: var(--ochre); color: #fffdf6; }
.qz-bandbtn.dospeli.on { background: var(--teal); color: #fffdf6; }
.qz-prem { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 16px; padding: 2px 6px; }
.qz-addp { color: var(--teal); font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 6px 0 0; font-family: inherit; }
.qz-setrow { display: flex; gap: 10px; flex-wrap: wrap; }
.qz-setrow .qz-setcard { flex: 1; min-width: 150px; }
.qz-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 3px 0; }
.qz-sw { width: 44px; height: 24px; border-radius: 14px; background: #cdbfa2; position: relative; transition: background .15s; flex-shrink: 0; }
.qz-sw.on { background: var(--teal); }
.qz-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fffdf6; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.qz-sw.on::after { left: 23px; }
.qz-setnote { font-size: 11.5px; color: var(--muted); font-style: italic; text-align: center; }

/* Nastavení párty — VZDUŠNOST (2026-09-15, výtka hráče „boxy i texty jsou nalepené na
   sebe"). Naměřeno předtím: nadpis → karta 20, mezi kartami 12–14, karty → poznámka 12,
   poznámka → tlačítko 12, uvnitř karty 12 px odsazení a 8 px pod nadpisem — jedna plochá
   mezera všude, takže obrazovka splynula v blok. Nově odstupňováno: mezi skupinami víc
   (nadpis → karty 34, karta ↔ karta 18, karty → poznámka 30), uvnitř míň (poznámka patří
   k tlačítku, 12). Scoped na .qz-partysetup: .qz-setup/.qz-setcard sdílí i online část. */
.qz-partysetup { gap: 18px; }
.qz-partysetup > h2 { margin-bottom: 16px; }
.qz-partysetup .qz-setrow { gap: 18px; }
.qz-partysetup .qz-setcard { padding: 20px 22px; }
.qz-partysetup .qz-setcard h3 { margin-bottom: 16px; }
.qz-partysetup .qz-prow { padding: 7px 0; }
.qz-partysetup .qz-addp { padding-top: 12px; }
.qz-partysetup .qz-fieldlabel { margin-bottom: 10px; }
.qz-partysetup > .qz-setnote { margin-top: 12px; margin-bottom: -6px; }
@media (max-width: 520px) {
  .qz-partysetup .qz-setcard { padding: 16px; }
  .qz-partysetup > h2 { margin-bottom: 8px; }
}

/* Stejný nedostatek jako `.qz-top` (58px), ale tady je to VIDĚT: hráčský praporek 1
   začíná u LEVÉHO okraje, přesně tam, kde je i hostitel — takže se bublina a praporek
   reálně dotýkaly (nahlášeno hráčem přes screenshot, změřeno 0px mezera). */
/* Mřížka, ne flex-wrap: praporky musí být STEJNĚ ŠIROKÉ i v neúplném řádku (5 hráčů = 3+2),
   jinak se poslední řádek roztáhne a čte se, jako by ti dva byli důležitější. --cols nastaví
   topHtml(); na telefonu jsou vždy dva sloupce (tři by měly ~100 px a jméno by se nevešlo). */
.qz-scoreboard { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; padding: 76px 16px 0; position: relative; z-index: 3; }
@media (max-width: 520px) { .qz-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qz-pl { min-width: 0; background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 13px; padding: 7px 10px;
  display: flex; align-items: center; gap: 8px; opacity: .72; box-shadow: 0 3px 0 #e3d5b8; font-family: inherit; color: var(--ink); }
.qz-pl.active { opacity: 1; border-color: var(--coral); box-shadow: 0 3px 0 var(--coral); }
/* min-width: 0 je tu nutnost, ne kosmetika: flex položka se defaultně nesmrskne pod šířku
   svého obsahu, takže dlouhé jméno hráče roztlačilo řádek a kreslilo se přes praporek
   souseda (naměřeno na 375 px se šesti hráči: jméno končilo na x 245, sousedův praporek
   začínal na 191). Vstup jména má nově maxlength=20, ale i tak musí řádek umět zalomit. */
.qz-plmeta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; min-width: 0; }
.qz-plname { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.qz-plturn { font-size: 10px; color: var(--coral); font-weight: 700; }
.qz-plscore { margin-left: auto; font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 650; }
.qz-subtop { display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; position: relative; z-index: 3; }
/* „Otoč obrazovku" — jen párty a JEN NA TABLETU (2026-09-15, přání hráče). Tablet se
   pozná jako dotykové zařízení, jehož okno má aspoň 600 px na šířku I na výšku: podmínka
   na výšku vyřadí telefon naležato (šířka 844, výška ~390), který jinak projde šířkou.
   Na počítači i telefonu tlačítko není vůbec — tam se u stolu obrazovka neotáčí. */
.qz-rotbtn { display: none; margin-left: auto; background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 10px;
  padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 650; color: var(--ink);
  box-shadow: 0 2px 0 #e3d5b8; min-height: 36px; }
@media (pointer: coarse) and (min-width: 600px) and (min-height: 600px) {
  .qz-rotbtn { display: inline-flex; align-items: center; }
}
.qz-mute { background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 10px; padding: 5px 10px; cursor: pointer; font-size: 15px; box-shadow: 0 2px 0 #e3d5b8; display: inline-flex; align-items: center; }

/* razítko vlajky = malá ilustrace země (nahrazuje vlajkové emoji) */
.qz-stamp { width: 1.5em; height: 1.5em; border-radius: 5px; object-fit: cover; vertical-align: -0.42em;
  border: 1.5px solid #fffdf6; outline: 1px solid #d8c9ad; box-shadow: 0 1px 3px rgba(120,90,50,.28); }
.qz-flagbig { width: 92px; height: 92px; border-radius: 16px; object-fit: cover;
  border: 3px solid #fffdf6; outline: 2px solid #d8c9ad; box-shadow: 0 8px 20px rgba(120,90,50,.26); }
/* obtížnost = ilustrované hvězdičky (ne text/emoji) + slovní popisek, ať je jasné, co znamenají */
.qz-diff { display: inline-flex; align-items: center; gap: 2px; letter-spacing: 0; cursor: help; }
/* shrnutí voleb nad tlačítkem Jdeme na to — drží šířku bloku voleb nad ním */
.qz-start-sum { width: min(100%, 460px); margin: 16px 0 0; text-align: center; }
.qz-diff i { font-style: normal; margin-left: 4px; color: var(--muted); }
/* dětský fond nemá hvězdičky, takže odsazení za nimi by tu dělalo osamocenou mezeru */
.qz-diff-kids i { margin-left: 0; }
.qz-meta .qz-stamp { vertical-align: middle; }

.qz-steal { border-top: 1.5px dashed #cdbfa2; margin-top: 4px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.qz-standings { display: flex; flex-direction: column; gap: 8px; width: min(520px, 92%); }
.qz-standrow { display: flex; align-items: center; gap: 10px; background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 12px; padding: 8px 12px; box-shadow: 0 3px 0 #e3d5b8; }
.qz-standrow.win { border-color: var(--ochre); box-shadow: 0 3px 0 var(--ochre); }
.qz-rank { font-size: 18px; width: 30px; text-align: center; }
/* Totéž jako u .qz-plmeta: bez min-width:0 se jméno nesmrskne a odsune „✕ odebrat"
   za okraj obrazovky — při 320 px a dvacetiznakové přezdívce (maxlength v online.js)
   naměřeno 13 px mimo, a `.qz-shell{overflow:clip}` to ořízne. */
.qz-standname { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 650;
  min-width: 0; overflow-wrap: anywhere; }
.qz-standscore { margin-left: auto; font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 700; }

/* režim Škola / projektor — velké písmo na plátno */
.qz-school .qz-q { font-size: clamp(26px, 4vw, 40px); line-height: 1.25; }
.qz-school .qz-a { font-size: clamp(20px, 2.6vw, 26px); padding: 20px 10px 18px; }
.qz-school .qz-ht { font-size: clamp(20px, 2.6vw, 28px); }
.qz-school .qz-meta { font-size: 14px; }
.qz-school .qz-picframe { height: clamp(280px, 40vh, 380px); }
/* na plátně je fotka odměna pro celou třídu — ať zůstane velká */
.qz-school .qz-picframe.revealed { height: clamp(260px, 38vh, 360px); }

/* časomíra + rozehrané výpravy */
.qz-timerbar { height: 8px; border-radius: 5px; background: #e7dcc2; overflow: hidden; margin-bottom: 6px; }
.qz-timerbar > div { height: 100%; width: 100%; background: linear-gradient(90deg, var(--leaf), var(--ochre), var(--coral)); }
/* Položka seznamu rozehraných her. Dva řádky, ne jeden: do jednoho se vešel jen režim
   a postup, takže hráč u čtyř sólo her viděl čtyřikrát skoro totéž a nepoznal je od sebe.
   Nahoře je to, co hru identifikuje (kde a jaký režim), dole upřesnění (téma, pásmo nebo
   počet hráčů, jak je to staré) a vpravo postup jako odznak. */
.qz-resume-item { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--paper2); border: 1.6px solid #dccdb0;
  border-radius: 14px; padding: 10px 12px; box-shadow: 0 3px 0 #e3d5b8; cursor: pointer; margin-bottom: 10px;
  font-family: inherit; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.qz-resume-item:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #e3d5b8; }
.qz-resume-img { width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; object-fit: cover; border: 1.6px solid #dccdb0; }
/* min-width: 0 je nutné — bez něj se flex položka nesmrští pod obsah a dlouhý řádek
   by místo zalomení roztáhl celou položku ven z pop-upu. */
.qz-resume-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Řádky se schválně ZALAMUJÍ, neořezávají — u popsaného údaje je useknutý konec horší
   než o řádek vyšší karta („Úroveň obtížnosti: pu…" nikomu nepomůže). */
.qz-resume-row { font-size: 13px; line-height: 1.35; color: var(--ink); font-weight: 600; }
.qz-resume-row i { font-style: normal; color: var(--muted); font-weight: 400; }
.qz-resume-faces { display: flex; flex-shrink: 0; padding-right: 6px; }
.qz-face { width: 24px; height: 24px; border-radius: 50%; color: #fffdf6; font-size: 12px; display: inline-flex; align-items: center;
  justify-content: center; margin-right: -6px; border: 2px solid var(--paper2); }
.qz-resume-prog { flex-shrink: 0; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 12px; color: var(--teal);
  background: #fffdf6; border: 1.5px solid #dccdb0; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.qz-resume-del { flex-shrink: 0; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; }
.qz-resume-del:hover { color: var(--bad); }
/* Na úzkém telefonu zbude na text vedle odznaku sotva 90 px, takže se ellipsis ukousne
   i režim z titulku („Japonsko · …"). Odznak proto slézá pod text do vlastního řádku
   mřížky; obrázek přes oba řádky drží. Avatary jdou pryč — počet hráčů je stejně
   napsaný na druhém řádku, takže se tím žádná informace neztratí. */
@media (max-width: 520px) {
  /* `align-items: start` schválně: řádky se tu zalamují, takže karta je vysoká
     a vycentrovaný obrázek by plaval uprostřed textu bez vztahu k němu. */
  .qz-resume-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "img text del" "img prog del"; align-items: start;
    column-gap: 9px; row-gap: 6px; padding: 10px; }
  .qz-resume-img { grid-area: img; width: 40px; height: 40px; }
  .qz-resume-text { grid-area: text; }
  .qz-resume-row { font-size: 12.5px; line-height: 1.3; }
  .qz-resume-prog { grid-area: prog; justify-self: start; font-size: 11px; padding: 3px 8px; }
  .qz-resume-del { grid-area: del; }
  .qz-resume-faces { display: none; }
}

/* Rozehrané hry: tlačítko + pop-up (modal) */
.qz-resume-open { margin-top: 18px; background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 14px;
  padding: 8px 22px 8px 14px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink);
  cursor: pointer; box-shadow: 0 3px 0 #e3d5b8; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s, box-shadow .12s; }
.qz-ico-resume { width: 30px; height: 30px; object-fit: contain; display: block; flex-shrink: 0; }
.qz-modal-head .qz-ico-resume { width: 26px; height: 26px; }
.qz-resume-open:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #e3d5b8; }
.qz-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qz-modal[hidden] { display: none; }
.qz-modal-backdrop { position: absolute; inset: 0; background: rgba(60,45,25,.45); backdrop-filter: blur(2px); }
.qz-modal-panel { position: relative; z-index: 1; width: min(600px, 94vw); max-height: 80vh; overflow-y: auto; overflow-x: hidden;
  background: var(--paper2); border: 2px solid #d8c9ad; border-radius: 18px; padding: 16px 16px 8px;
  box-shadow: 0 22px 54px rgba(90,70,40,.42), inset 0 0 0 6px #fffdf6; text-align: left; }
.qz-modal-body .qz-resume-item { box-sizing: border-box; }
.qz-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px; color: var(--teal); }
.qz-modal-close { flex-shrink: 0; background: var(--paper2); border: 1.6px solid #d8c9ad; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; color: var(--ink); font-size: 15px; box-shadow: 0 2px 0 #d8c9ad; }
.qz-modal-close:hover { color: var(--bad); }

/* ---- široká obrazovka: text vlevo, okno (glóbus → fotka) vpravo ----
   Fotky nejsou ve vysokém rozlišení — na půlce šířky zůstanou ostré.
   Rám drží 16:9 (= poměr fotek), takže se nic neořezává a mezi otázkou
   a odpovědí se layout ani nehne: jen se glóbus prolne do fotky.
   Musí být na konci souboru — přebíjí .qz-school i .revealed výšky. */
@media (min-width: 900px) {
  /* align-content: start — .qz-play dědí flex:1, bez toho se řádky roztáhnou do zbylé výšky */
  /* align-items: stretch — obě karty musí být stejně vysoké, ať je vedle sebe nerozhodí obsah */
  .qz-play { display: grid; align-items: stretch; align-content: start; column-gap: 18px; padding: 0 18px 18px;
    /* 5:4 zůstává. Zkoušel jsem 4:5 ve prospěch rámu (obrázek by byl o 56 % větší), ale
       platí se to šířkou karty — 514 → 412 px, a tam už se otázka i tlačítko „Více o…"
       lámou na příliš mnoho řádků. Hráč to zamítl: „nechtěl jsem zmenšit ten box".
       Prostor pro ilustraci se tedy bere ze zbytečného prázdna kolem ní (viz strop
       výšky rámu níž), ne z karty. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    grid-template-areas: "top top" "box pic"; }
  .qz-play > .qz-top { grid-area: top; padding-left: 0; padding-right: 0; }
  .qz-play > .qz-box { grid-area: box; margin: 68px 0 0; }
  /* ONLINE SOUBOJ NEMÁ ILUSTRACI VŮBEC — objeveno 2026-09-01 při kontrole „i online
     obrazovky". `online.js` si otázku kreslí VLASTNÍ funkcí (`nextQuestion()`, ne
     `renderQuestion()` z quiz.js) a recykluje jen CSS třídy `.qz-play`/`.qz-box`, nikdy
     nevolá `picframeHtml()`. Pravý sloupec mřížky (2fr, rezervovaný pro `.qz-picframe`)
     tak zůstává od 900 px prázdný — na 1024 px je to skoro 300 px nevyužité plochy
     vedle úzké karty. Stará vada (dvousloupcová mřížka je tu od 2026-07-31), ne dnešní
     regrese, ale `:has()` ji umí opravit bez zásahu do online.js: když `.qz-play` nemá
     potomka `.qz-picframe`, karta dostane obě sloupce mřížky.
     `:has()` v nepodporujícím prohlížeči jen neuplatní a karta zůstane úzká — nerozbije
     se nic, jen se neopraví (stejná záchranná síť jako jinde v souboru). */
  .qz-play:not(:has(.qz-picframe)) > .qz-box { grid-column: 1 / -1; }
  /* OBA OBDÉLNÍKY LÍCUJÍ ZVRCHU I ZESPODU, protože je táhne týž řádek mřížky
     (`align-items: stretch`). Rám proto nemá `aspect-ratio` ani pevnou výšku a bere
     si ji z řádku — tedy z toho vyššího z dvojice, v praxi z textové karty.

     PEVNÝ POMĚR SE PŘES DEN ZKOUŠEL PĚTKRÁT (4:5, 1:1, 16:9, 4:3, 5:4) a pokaždé
     skončil stejně: rám a karta se o pár desítek pixelů míjely. Nemůže to vyjít —
     karta měří podle počtu řádků otázky jednou 381 px a jindy 478, takže žádné jedno
     číslo nesedí na všechny otázky. Řádek mřížky to řeší sám a zadarmo.

     PODMÍNKA: rám nesmí mít obsah v toku, jinak by do řádku vnesl přirozenou výšku
     obrázku (686 px) a nafoukl ho. Proto je `.qz-pic` i `.qz-picbg` absolutně
     pozicovaný — viz komentář u `.qz-pic`.

     Výška se mezi otázkou a odpovědí mění, ale ILUSTRACE TÍM NEPOSKAKUJE: u otázky
     v rámu žije glóbus a obrázek se objeví teprve po odpovědi. Pravidlo z 2026-07-31
     říká, že se nesmí hnout snímek, ne že se nesmí hnout karta. */
  .qz-play > .qz-picframe,
  .qz-play > .qz-picframe.revealed,
  .qz-play > .qz-picwrap { grid-area: pic; align-self: stretch; margin: 68px 0 0;
    width: 100%; height: auto; }
  /* Rám uvnitř obalu si bere ZBYTEK výšky po bloku pod ním (`flex: 1`), takže obal dál
     lícuje s kartou. `min-height: 0` je nutné — výchozí `auto` u flex položky nedovolí
     smrsknout se pod obsah a rám by obal přerostl. Sám rám drží obsah absolutně
     pozicovaný (viz komentář u `.qz-pic`), takže se nemá o co opřít a poslušně se stáhne.
     Selektor je záměrně na obal, ne `.qz-play > …`: online souboj obal nemá (kreslí si
     otázku vlastní funkcí a bere jen `ZKPicframe.html`), takže mu dál platí pravidlo výš. */
  .qz-picwrap > .qz-picframe,
  .qz-picwrap > .qz-picframe.revealed { margin: 0; height: auto; flex: 1 1 auto; min-height: 0; }
  /* PO ODPOVĚDI se rám naopak smrskne PŘESNĚ NA OBRÁZEK — tím zmizí rozmazané pruhy,
     kvůli kterým se do toho celého šlo (2026-09-05: obrázek zabíral 35 % rámu).
     Dělá to obrázek POSTAVENÝ DO TOKU, ne pevný poměr: `aspect-ratio: 16/9` by platil
     jen pro dnešní fond a u čtvercových ilustrací (generátor je dělá od 2026-09-01)
     by pruhy jen otočil o 90°. Takhle si rám vezme výšku toho, co v něm doopravdy je.
     Komentář u `.qz-pic` varuje, že obrázek v toku vnese do řádku svou přirozenou
     výšku (686 px) — to platí pro NEODHALENÝ rám, který se táhne podle karty; tady
     je šířka omezená na 412 px, takže se výška dopočte na ~235 a nic se nenafoukne. */
  .qz-picwrap > .qz-picframe.revealed { flex: 0 0 auto; }
  .qz-picwrap > .qz-picframe.revealed .qz-pic { position: relative; inset: auto;
    width: 100%; max-height: none; height: auto; }
  /* Otázka bez ilustrace: v toku není nic (razítko země je absolutní), takže by se rám
     smrskl na nulu. Stejná hodnota jako u téhož případu pod 900 px. */
  .qz-picwrap > .qz-picframe.revealed.qz-pic-broken { height: 116px; }
  /* Blok pod obrázkem se drží OBRÁZKU, ne spodní hrany karty. První verze ho roztahovala
     na zbytek sloupce a akce lepila dolů — bottom edge sice lícovala s kartou, jenže mezi
     vysvětlením a tlačítky vznikla **naměřená díra 214 px** a dvojice tlačítek se četla
     jako něco, co s textem nad ní nesouvisí. Blízkost je tu důležitější než zarovnaná
     spodní hrana: obrázek, vysvětlení a akce jsou jedna věc (výsledek odpovědi), tak
     drží pohromadě. Prázdno pod nimi je vzduch, ne díra — nic se v něm nekreslí. */
  /* RYTMUS MEZER 22 / 8 / 16 / 28 (obrázek → body → vysvětlení → „Více o…" → „Další
     otázka"). Čtyři jasně rozlišitelné stupně, ne jedna hodnota na všechno; sousední
     hodnoty se neperou (past „24 vs 18 žádnou skupinu netvoří").
     22 px pod obrázkem je opticky ~18 — bílý rám a stín přidávají ke spodní hraně vzduch.
     8 px u bodů je schválně NEJTĚSNĚJŠÍ: „Získáváš 100 bodů" je nadpis výsledku
     a vysvětlení jeho tělo, při 12 px z nich byly dvě nesouvisející věty. */
  .qz-picwrap > .qz-extra { margin: 22px 0 0; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
  /* Musí to být tři třídy: `.qz-play .qz-expl { margin-top: 6px }` o kus níž má stejnou
     specificitu jako základní reset marginů a stojí v souboru později, takže by vyhrálo
     a k 8px mezeře by se přičetlo 6 (naměřeno 14 místo 8). */
  .qz-picwrap > .qz-extra .qz-expl { margin: 0; }
  /* Vysvětlení je teď v širokém sloupci pod obrázkem, ne v úzké kartě — 1,55 místo
     výchozího řádkování, jinak je to při 12,5 px a 405 px šířky zeď (viz VZDUŠNOST). */
  .qz-picwrap > .qz-extra .qz-expl { line-height: 1.55; }
  /* 16 px váže „Více o…" k vysvětlení: čteš text → nabídne se ti víc téhož. HRANICE
     SKUPINY VEDE AŽ MEZI TLAČÍTKY (28 px níž), ne tady — první verze to měla obráceně
     (20 nad dvojicí, 10 uvnitř ní) a dvojice se proto četla jako jeden slepený blok. */
  .qz-picwrap > .qz-extra .qz-frow { gap: 16px; flex: 0 0 auto; }
  .qz-picwrap > .qz-extra .qz-fbtns { margin-top: 0; }
  /* TLAČÍTKA POD SEBOU, každé přes celou šířku sloupce (přání hráče 2026-09-06).
     Vedle sebe měla v 405px sloupci jen 199 px, takže dlouhý popisek („Více o králi
     Janu Lucemburském") se lámal na tři řádky a natáhl OBĚ tlačítka na 75 px —
     dvojice pak vypadala jako chyba sazby. Pod sebou mají obě šířku obrázku, takže
     pravý sloupec drží jednu svislou linku: obrázek, text, tlačítko, tlačítko.
     `flex: 0 1 auto` ruší `flex: 1 1 0` ze základu (to dělá stejnou ŠÍŘKU vedle sebe;
     ve sloupci by z toho byla stejná VÝŠKA) — stejný postup jako na mobilu. */
  /* 28 px, ne 14 ani 16 — a je to spočítané, ne odhad. Mezera pod ~25 % výšky prvku
     slepí dva bloky v jeden: při tlačítku vysokém 52 px bylo dosavadních 10 px **0,19×**
     a oko to četlo jako segmentovaný přepínač, tedy jednu věc o dvou řádcích. Na
     oddělení je potřeba aspoň 0,5×. Nediferencovaný přírůstek (10 → 14) je past:
     jen povolí, skupinu nevytvoří. „Více o…" patří k vysvětlení téhle otázky,
     „Další otázka" je odchod ze scény — hranice tedy vede TADY. */
  .qz-picwrap > .qz-extra .qz-fbtns { flex-direction: column; gap: 28px; }
  /* `min-height` + sražené řádkování drží tlačítka v rozumné výšce i s dvouřádkovým
     popiskem — bez toho bylo jednořádkové 38 px a dvouřádkové 56 a vypadalo to jako
     nedodělek (vedle sebe to dřív zakrývalo `align-items: stretch`). */
  .qz-picwrap > .qz-extra .qz-fbtns > button { flex: 0 1 auto; width: 100%;
    min-height: 52px; line-height: 1.25; }
  /* Sekundární je o osm pixelů nižší — hierarchie, ne symetrie: ty dvě tlačítka MAJÍ
     vypadat nerovnocenně. Platí jen na desktopu; na mobilu zůstává 52, protože 44 px
     je přesně dotykové minimum a pod ně se nesmí. U dvouřádkového popisku výška stejně
     vyjde vyšší a odlišení pak nese podklad a tenčí rámeček.
     Selektor musí být přes `button.qz-more`: pravidlo o řádek výš má díky elementu
     `button` vyšší specificitu (0,3,1) než samotná třída (0,3,0) a 44 px by přebilo. */
  .qz-picwrap > .qz-extra .qz-fbtns > button.qz-more { min-height: 44px; }
  /* O krok větší než 12,5 px v kartě: text tu stojí sám na papíře, bez rámečku a bez
     sousedů, takže drobné šedé písmo vedle silného obrázku a plného tlačítka mizí. */
  .qz-picwrap > .qz-extra .qz-expl { font-size: 13.5px; }
  /* PŘED odpovědí je blok prázdný a MUSÍ zmizet i tady. Základní `.qz-extra:empty` má
     stejnou specificitu jako pravidlo o řádek výš, takže by ho pozdější `display: flex`
     přebilo — prázdný blok by si vzal `flex: 1` a rám by se s ním o sloupec podělil
     (naměřeno: rám 225 px proti kartě 454, glóbus srazený na 149). */
  .qz-picwrap > .qz-extra:empty { display: none; }
  /* ŽÁDNÝ strop výšky rámu. Zkoušel jsem ho (320 i 250 px), aby kolem ilustrace nebylo
     tolik prázdna, jenže tím se rám přestal rovnat výšce karty — a oba obdélníky vedle
     sebe mají zůstat stejně vysoké (hráč 2026-09-05: „ty obdélníky měly zůstat stejně
     vysoké"). Lícování drží `align-self: stretch` výš; nesahat na to. */
  /* odpovědi pod sebou, ne 2×2 (přání 2026-08-14) — větší mezery mezi nimi a text
     zarovnaný doleva. Odsazení musí jít přes padding, ne mezery v textu — mezery v
     obsahu odsadí jen první řádek, zalomený druhý řádek pak začínal víc vlevo (bug). */
  /* Sevřenější odpovědi, aby se textová karta VEŠLA DO VÝŠKY RÁMU (2026-09-01).
     Řádek mřížky má `align-items: stretch`, takže kartu na výšku rámu dotáhne sám —
     ale jen když je jejího obsahu míň. S mezerou 20 px a tlačítky 64 px měřila karta
     u otázky 441 px proti rámu 348 a sloupce vypadaly rozhozeně. Nově 4×52 + 3×12
     = 244 px, takže se běžná otázka vejde a oba obdélníky vyjdou stejně vysoké.
     52 px je pořád nad 44px minimem pro dotyk (WCAG), a mobil se tohohle netýká —
     celý blok platí až od 900 px. Sražený je i vnitřní okraj karty (18 → 14 px),
     protože posledních pár pixelů rozhoduje o tom, jestli se dvouřádková otázka
     do rámu vejde, nebo ho o kousek přeroste. */
  .qz-play > .qz-box { padding: 14px 20px; }
  .qz-play .qz-ans { grid-template-columns: 1fr; gap: 12px; }
  .qz-play .qz-ans .qz-a { text-align: left; justify-content: flex-start; padding: 9px 8px 9px 32px;
    min-height: 52px; }
  /* Karta po odpovědi sevřená ještě víc, ať je frame (co ji lícuje) blíž skutečné výšce
     obrázku — méně rozmazaného pruhu kolem, aniž by se muselo zase sahat na rám (ten
     drží align-self: stretch, viz výš). Nejde o kosmetiku bez čísla: na 90 vzorcích
     karta u odpovědi měřila medián 350 px, ale tenhle blok samotný o něm nerozhoduje
     z poloviny — tu drží délka hlášky a vysvětlení (obsah appky, ne CSS). Odsazení tu
     jde stlačit na dotykové minimum a níž ne. (2026-09-01) */
  .qz-play .qz-box { gap: 8px; }
  .qz-play .qz-quipbox { margin-top: 6px; }
  .qz-play .qz-ht { line-height: 1.32; }
  .qz-play .qz-frow { gap: 8px; }
  .qz-play .qz-expl { margin-top: 6px; }
  .qz-play .qz-fbtns > button { padding: 8px 14px; }
}

/* POZN. k pokusu, který se NEOSVĚDČIL: mezitím tu bylo pravidlo, že od 1400 px dostane
   ilustrace půlku plátna (1fr 1fr). Fungovalo jen dokud měla hrací plocha 1460 px —
   po zúžení na 1200 px (viz níž) by ze stejného pravidla vyšla textová karta ~570 px
   a odpověď by se lámala do sedmi řádků, tedy přesně to, čemu se ten práh vyhýbal.
   Poměr 3:2 platí proto na všech šířkách; obrázek zvětšila už samotná změna rámu
   na 16:9, protože zmizely prázdné pruhy. (2026-09-01) */

/* HRACÍ OBRAZOVKA SE NA ŠIROKÉM MONITORU NEROZŠIŘUJE. Zůstává ve sloupci 980 px
   jako všechno ostatní kromě výběrových obrazovek. (2026-09-01)

   ZAMÍTNUTO A NEZKOUŠEJ ZNOVU: tentýž den to tu bylo postupně na 1460 a pak na
   1200 px. Vypadalo to na širokém monitoru zaplněněji, ale hráč to shrnul jasně —
   „rozhodnutí dát to na celou šířku obrazovky nebyl dobrý nápad". Důvod je věcný:
   při 1200 px má rám 464 px a při 1460 dokonce ~570, jenže ilustrace jsou široké
   1000 px (nové) a 1200 px (staré), takže se na retině (DPR 2 potřebuje dvojnásobek)
   začaly roztahovat nad svoje rozlišení. Zvětšený rám navíc nutil zvětšovat i textovou
   kartu, aby sloupce vypadaly souměrně, a celá obrazovka se rozjela do stran.

   Ve sloupci 980 px má otázka ~65 znaků na řádek, což je pásmo nejlepší čitelnosti —
   a u kvízu, kde se čte pod časovým limitem, to není kosmetika.

   Výběrové obrazovky (.qz-pick) se rozšiřují dál a je to v pořádku: tam jde o počet
   dlaždic na řádek, ne o čtení textu ani o rozlišení jedné ilustrace. */

/* ---- přístupnost ----
   Viditelný fokus: bez něj hráč na klávesnici (a projektor ve třídě) neví, kde stojí.
   :focus-visible = jen při ovládání klávesnicí, myš rámeček nerozsvítí. */
#quiz-root :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

/* Kdo má v systému „omezit pohyb", nemá se mu nic samo točit ani přijíždět.
   Rotaci 3D glóbu vypíná zvlášť quiz.js (konstanta REDUCED_MOTION). */
@media (prefers-reduced-motion: reduce) {
  #quiz-root *, #quiz-root *::before, #quiz-root *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- online režim (online.js) ----------------------------------------------
   Online recykluje offline třídy, ale formulářové prvky jsou stavěné do flex
   řádku (.qz-pname-in má flex:1), takže samy o sobě tečou inline. Tohle je
   srovná do sloupce a dá online obrazovkám čitelnou šířku. */
.zk-form { display: flex; flex-direction: column; gap: 10px; }
.zk-form .qz-pname-in { flex: none; width: 100%; box-sizing: border-box; }
.zk-form .qz-go, .zk-form .qz-back { width: 100%; justify-content: center; text-align: center; }
/* box-sizing: bez něj se k `width:100%` přičte ještě odsazení z .qz-modepick/.qz-setup
   (2×24 px) a online obrazovky na 375px mobilu vyčnívají o 48 px mimo displej. Offline
   obrazovky to nepotkalo, protože šířku nemají nastavenou a zmenší se i s odsazením. */
.zk-wrap { max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }

/* ---- online rozcestník ---------------------------------------------------
   Tři úrovně důležitosti místo sedmi stejných dlaždic: jedna hlavní akce
   (Hrát teď), pod ní tři další způsoby hry a nakonec tichý proužek utilit.
   Dřív měl „Účet" stejnou váhu jako „Hrát teď" a nic z toho nemělo obrázek.

   Mřížka je VLASTNÍ, ne .qz-modes. To není kosmetika: .qz-modes je flex
   s pevně širokými dlaždicemi (290 px na desktopu), jenže .zk-wrap má
   640 px mínus 2×24 px odsazení = 592 px obsahu, zatímco dvě dlaždice
   potřebují 290+16+290 = 596 px. Kvůli čtyřem pixelům se lobby lámalo
   po jedné dlaždici na řádek a přetékalo přes celou obrazovku. */
/* Svislý rytmus lobby. Mezera NENÍ všude stejná, a to je celý trik: jedno `gap: 12px`
   na všechno slepilo obrazovku do jednoho hustého sloupce, kde nic netvořilo skupinu.
   Základ je 18 px, a kde končí jedna vrstva hierarchie a začíná další, se přidá víc
   (uvítání → hlavní akce, hraní → utility). */
.zk-lobby { gap: 18px; }
/* Uvítání SCHVÁLNĚ NENÍ box. Je to próza, ne akce — kdyby mělo rámeček a podklad,
   soupeřilo by s kartami pod sebou a na obrazovce by byly čtyři rámečky nad sebou.
   Bez boxu se plocha otevře a „Hrát teď" zůstane jediná silná věc nahoře.
   Text je vlevo, ne na střed: jsou to celé věty a ty se na střed čtou hůř. */
/* margin-bottom navíc k základní mezeře: přechod „čti" → „klikni" je největší hranice
   na téhle obrazovce, takže musí být větší než mezera mezi dvěma kartami hraní. */
/* Na střed od 2026-10-05: nadpis nad ním je vycentrovaný a uvítání vlevo pod ním
   vypadalo jako odtržené. Jsou to dvě krátké věty, takže čtení na střed nevadí. */
.zk-welcome { width: 100%; max-width: 34em; box-sizing: border-box; text-align: center; padding: 2px 4px; margin: 0 auto 16px; }
.zk-wel-hi { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px; color: var(--teal);
  margin: 0 0 12px; line-height: 1.35; }
.zk-wel-l { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 9px; }
.zk-wel-l:last-child { margin-bottom: 0; }
.zk-wel-l b { color: var(--ink); font-weight: 700; }

/* hlavní akce: vodorovná karta přes celou šířku, ať je jasné, kam se kliká */
.zk-hero { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: var(--paper2); border: 2px solid var(--teal); border-radius: 18px; padding: 18px 20px;
  cursor: pointer; font: inherit; color: inherit; box-shadow: 0 4px 0 #bcd8d4; transition: transform .12s, box-shadow .12s; }
.zk-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #bcd8d4; }
/* Ilustrace 120 px (bylo 72): na rozcestníku mají karty obrázek ~130 px a lobby
   s poloviční velikostí vypadalo proti nim chudě. Soubor má 512 px, takže stačí i retině. */
/* margin: 0 je nutné: společné .zk-ic má `margin: 0 auto` (centrování v dlaždicích)
   a ve vodorovném flexu by si auto okraje rozebraly volné místo — obrázek pak stál
   odtržený uprostřed karty, daleko od textu. */
.zk-hero .zk-ic { width: 120px; height: 120px; flex: none; margin: 0; }
.zk-herotext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zk-herotext .t { font-family: 'Nunito', sans-serif; font-size: 28px; font-weight: 800; color: var(--teal); }
.zk-herotext .d { font-size: 14.5px; color: var(--muted); line-height: 1.4; }
.zk-heroarrow { margin-left: auto; font-size: 22px; color: var(--teal); flex: none; }

/* tři další způsoby hry — auto-fit, takže na úzkém displeji spadnou pod sebe samy */
/* width:100% je nutnost, ne pojistka: rodič (.qz-modepick) je svislý flex s align-items:center,
   takže se potomek bez šířky smrskne na obsah. U proužku utilit to bylo vidět — tlačítka
   vyšla nestejně široká (57/50/36 px) podle délky slova místo na třetiny. */
/* Čtyři dlaždice od 2026-10-05 (přibyl Turnaj pro partu). Na užším displeji 2×2 —
   čtyři vedle sebe by na telefonu měly po ~75 px a název by se lámal po slovech. */
.zk-plays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
@media (max-width: 720px) { .zk-plays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zk-play { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 10px 14px;
  background: var(--paper2); border: 2px solid #dccdb0; border-radius: 16px; cursor: pointer;
  font: inherit; color: inherit; text-align: center; box-shadow: 0 4px 0 #e3d5b8; transition: transform .12s, box-shadow .12s; }
.zk-play:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #e3d5b8; }
.zk-play .zk-ic { width: 100px; height: 100px; }
.zk-play .t { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; line-height: 1.2; margin-top: 3px; }
.zk-play .d { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

/* společný rám ilustrace (stejný „nalepený obrázek" jako u offline dlaždic) */
.zk-ic { display: block; position: relative; border-radius: 14px; overflow: hidden; margin: 0 auto;
  border: 3px solid #fffdf6; outline: 2px solid #e3d5b8; box-shadow: 0 4px 12px rgba(120,90,50,.24); }
.zk-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zk-ic-fb { position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 26px; background: #fdf7ea; }

/* utility: ikona + slovo, žádné popisky — nemají soupeřit s hraním */
/* margin-top navíc k základní mezeře: tady končí hraní a začínají utility, což je jiná
   vrstva — bez toho by „Žebříček" vypadal jako čtvrtý způsob hry. */
/* Od 2026-10-05 TICHÝ ŘÁDEK, ne tři rámečky: rámečky pod dlaždicemi hraní vypadaly jako
   čtvrtý až šestý způsob hry. (Alternativa: malované ikony z Gemini — zatím nevybráno.) */
.zk-utils { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; width: 100%; }
.zk-util { display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  background: none; border: none; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--teal); transition: background .12s; }
.zk-util:hover { background: var(--paper2); }
.zk-util svg { width: 18px; height: 18px; display: block; }
/* Na desktopu širší sloupec (bylo 640 px všude): tři dlaždice se stovkovými obrázky
   a popisky by se do 592 px obsahu tlačily. Na mobilu se nic nemění. */
@media (min-width: 900px) {
  .zk-wrap.zk-lobby { max-width: 860px; }
}

/* ---- turnaj pro partu (2026-10-05) ----------------------------------------
   Rytmus podle pravidla o vzdušnosti: titulek turnaje patří k nadpisu (těsně),
   čas pod ním taky, k hlavní akci je větší skok a k pořadí ještě větší. */
.zk-partalead { font-size: 14.5px; line-height: 1.6; color: var(--muted); text-align: center;
  max-width: 34em; margin: 0 auto 10px; }
.zk-partaform { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.zk-partaform .qz-fieldlabel { margin: 8px 0 0; }
.zk-partaform .qz-pname-in { flex: none; width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; }
.zk-partaform .qz-bands { flex-wrap: wrap; }
.zk-partaform .qz-go { align-self: center; margin-top: 8px; }
.zk-pshrnuti { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); text-align: center; }
.zk-pshrnuti b { color: var(--ink); }
.zk-parta { gap: 0; }
.zk-ptitle { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-top: 6px; }
.zk-parta h2 { margin: 4px 0 8px; }
.zk-pcas { font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; }
.zk-pcas b { color: var(--ink); }
.zk-pakce { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 30px; }
.zk-pinvite { min-width: 220px; }
.zk-pguest { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; text-align: left; }
.zk-pguest .qz-pname-in { flex: none; width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; }
.zk-pguest .qz-go { align-self: center; }
.zk-pguest .zk-agree { margin: 4px 0 4px; }
.zk-psharebox { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.zk-psharebox .qz-chip { text-decoration: none; font-weight: 700; font-size: 14px; }
.zk-plink { margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; word-break: break-all; }
.zk-parta .zk-vnadpis { margin-top: 38px; text-align: center; }
.zk-parta .zk-rowlist { width: 100%; }
.zk-ptag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e8f2f0;
  color: var(--teal); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.zk-pwait { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Čekání na soupeře: tři tepající tečky. Bez nich byla čekárna statický text s rostoucím
   číslem a působila, jako by se appka zasekla. */
.zk-radar { display: flex; justify-content: center; gap: 7px; margin: 2px 0 10px; }
.zk-radar span { width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
  animation: zk-pulse 1.25s ease-in-out infinite; }
.zk-radar span:nth-child(2) { animation-delay: .18s; }
.zk-radar span:nth-child(3) { animation-delay: .36s; }
@keyframes zk-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Akce v řádku výzvy — Přijmout, Hrát, Vyzvat. Od 2026-09-26 slouží výzvám podle
   přezdívky; dřív to bylo „Vyzvat" u přítele, a přátelé zmizeli. */
.zk-challenge { margin-left: auto; flex: none; background: none; border: 1.5px solid var(--teal);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--teal); cursor: pointer; transition: background .12s; }
.zk-challenge:hover { background: #e8f2f0; }
.zk-challenge:disabled { opacity: .5; cursor: default; }
/* Odmítnutí / zrušení výzvy. Schválně tiché a menší než hlavní akce — je to výjimečná
   volba, ne rovnocenná nabídka. `margin-left` NEmá auto: to si bere .zk-challenge, která
   tím odsune obě tlačítka doprava jako dvojici. V řádku bez .zk-challenge (odchozí
   výzva má jen „✕") se odsune samo přes `margin-left: auto` níž. */
.zk-vsmazat { flex: none; margin-left: 6px; background: none; border: 1.5px solid transparent;
  border-radius: 999px; width: 26px; height: 26px; line-height: 1; padding: 0; font: inherit;
  font-size: 13px; color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s; }
.zk-vsmazat:hover { color: var(--bad); border-color: #eec7bf; }
.zk-vsmazat:disabled { opacity: .5; cursor: default; }
.qz-standname + .zk-vsmazat { margin-left: auto; }

/* Nadpisy skupin na obrazovce Výzvy. Mezera NAD nadpisem je větší než mezera mezi
   nadpisem a jeho seznamem (.zk-rowlist má margin-top 10 px), takže nadpis se čte
   jako součást skupiny pod sebou, ne té nad sebou — pravidlo o vzdušnosti v CLAUDE.md. */
.zk-vnadpis { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800; color: var(--teal);
  margin: 22px 0 0; text-align: left; width: 100%; }

/* Příchozí výzvy a hry na tahu v lobby. PRÁZDNÝ blok musí z toku ÚPLNĚ VYPADNOUT:
   lobby je sloupec s `gap: 18px`, takže i prázdný <div> by přidal mezeru navíc a hráči
   bez výzev by se „Hrát teď" posunulo dolů — rozbilo by to změřený rytmus uvítání →
   hlavní akce (34 px). Plný blok patří na stranu akcí („klikni"), ne k uvítání. */
#zk-social:empty { display: none; }
.zk-social { width: 100%; }
.zk-social > .zk-rowlist:first-child { margin-top: 0; }

/* Vlastní řádek v žebříčku. */
.qz-standrow.zk-me { border-color: var(--teal); background: #eef6f4; }

@media (max-width: 480px) {
  .zk-hero { gap: 11px; padding: 12px 13px; }
  .zk-hero .zk-ic { width: 80px; height: 80px; }
  .zk-herotext .t { font-size: 21px; }
  .zk-play .zk-ic { width: 66px; height: 66px; }
  /* Popisek dlaždic na mobilu zůstává: od 2026-10-05 jsou dlaždice 2×2 (~160 px), ne 3 vedle sebe. */
}
.zk-rowlist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.zk-rowlist .qz-standrow { background: var(--paper2); border: 1.4px solid #dccdb0; border-radius: 11px;
  padding: 8px 11px; display: flex; align-items: center; gap: 10px; }
/* Rozbor po online hře (2026-09-26): karta na otázku s ilustrací vlevo, textem vpravo.
   Dřív odstavec vystředěného textu na otázku — u deseti otázek zeď, kterou nikdo nečetl.
   Text je zarovnaný VLEVO, i když `.qz-end` jinak centruje: víceřádkový text na střed
   se čte špatně a štítky by pod sebou skákaly. Rytmus: nadpis → první karta 14, karta ↔
   karta 12, uvnitř karty otázka → štítky 8, štítky → „Proč?" 6. */
.zk-revlist { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; text-align: left; }
.zk-revlist > h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: 'Nunito', sans-serif; font-size: 20px; color: var(--ink); margin: 0 0 2px; }
.zk-revsum { font-size: 14px; font-weight: 700; color: var(--teal); }
.zk-rev { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start;
  background: var(--paper2); border: 1.4px solid #dccdb0; border-radius: 12px; padding: 10px;
  box-shadow: 0 3px 0 #e3d5b8; }
.zk-revpic { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #efe3cc; }
.zk-revpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Odznak správně/špatně sedí na rohu ilustrace — barva karty tak nemusí nést výsledek sama. */
.zk-revno { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.zk-rev.ok .zk-revno { background: var(--ok); }
.zk-rev.miss .zk-revno { background: var(--bad); }
.zk-revtxt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zk-revq { margin: 0; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
  line-height: 1.35; color: var(--ink); }
.zk-revn { color: var(--muted); font-weight: 700; }
.zk-revtags { display: flex; flex-wrap: wrap; gap: 6px; }
.zk-tag { font-size: 12.5px; font-weight: 700; line-height: 1.3; padding: 3px 9px; border-radius: 999px;
  border: 1.2px solid; overflow-wrap: anywhere; }
.zk-tag.ok { color: #2f6e4b; border-color: #9fcaaf; background: #eef7f1; }
.zk-tag.miss { color: #a4402f; border-color: #e6ada2; background: #fcefec; }
.zk-tag.soft { color: var(--muted); border-color: #dccdb0; background: transparent; font-weight: 600; }
/* Zlatá odpověď (párty/sólo) = špatně, ale za polovic bodů — okrová, ne červená. */
.zk-tag.gold { color: #8a6418; border-color: #e3c47e; background: #fbf3de; }
.zk-rev.gold .zk-revno { background: var(--ochre); }
/* Tečka s barvou hráče u jména v párty — tatáž barva jako jeho praporek během hry. */
.zk-tagdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px;
  vertical-align: 0; }
/* Offline výsledek (.qz-end) nemá strop šířky jako online .zk-wrap — bez něj by se karty
   na širokém monitoru roztáhly přes celou obrazovku a otázka by měla 150 znaků na řádek. */
.qz-end > .zk-revlist { max-width: 640px; }
.zk-revwhy { font-size: 13px; color: var(--muted); margin-top: -2px; }
.zk-revwhy summary { cursor: pointer; font-weight: 700; color: var(--teal); width: fit-content; }
.zk-revwhy p { margin: 6px 0 0; line-height: 1.55; }
@media (max-width: 520px) {
  .zk-rev { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .zk-revq { font-size: 14px; }
}

/* Řádek turnaje v seznamu je klikací <button>, ne <div> — potřebuje reset UA vzhledu. */
.zk-trow { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }

/* `.zk-picframe` (vlastní ilustrace online uvnitř karty) je pryč od 2026-09-03 —
   online používá stejný rám `.qz-picframe` jako offline, takže by se obrázek kreslil
   dvakrát vedle sebe. Pravidla smazána, ať se nedědí mrtvá plocha. */
.zk-oppbar { font-size: 12px; color: var(--muted); }

/* ---- přihlašovací obrazovka online režimu -------------------------------
   Vzor je převzatý z běžných přihlašovacích obrazovek (Duolingo, chess.com,
   Scratch): JEDNA úzká karta uprostřed a v ní odshora dolů obrázek → nadpis →
   pole → JEDNA barevná primární akce → tiché textové odkazy. Předtím tu byl
   svislý flex přes celých 640 px .zk-wrap, kde měly „Zpět", „Přihlásit se"
   i „Nemám hráče" stejnou vizuální váhu a „Zpět" navíc stálo nad nadpisem
   jako hlavní akce. Šířka 460 px (po odečtení odsazení .qz-setup karta ~416 px)
   je horní hranice, po kterou formulář o dvou polích ještě drží pohromadě.
   Pozor: .qz-setup je svislý flex, takže cokoli uvnitř se bez align-self
   roztáhne na plnou šířku — proto to má „Zpět" nastavené natvrdo. */
/* Vlastní padding-top, ne dědění ze `.qz-setup` (dnes 112 px, rezervováno pro lištu
   .qz-pickhead — tu ale přihlašovací obrazovka nemá, jen hostitele a „Zpět"). 76 px je
   vyladěno tak, aby se hostitelova hlava (.qz-host, absolutně ukotvená k shellu, sahá
   do 62 px) nepodlézala pod „Zpět". Zbytek appky to má stejně, tady to ale bije do očí,
   protože pod tlačítkem nezačíná mřížka dlaždic, ale jediná karta. */
.zk-auth { max-width: 460px; padding-top: 76px; }
/* Navigace zpět je navigace, ne hlavní akce. .qz-setup/.qz-modepick je svislý flex,
   takže bez align-self se „Zpět" roztáhne přes celou šířku obrazovky a vypadá
   důležitěji než primární tlačítko — to byla původní výtka k přihlašovací stránce
   a platila i pro Přátele, Souboj na odkaz a čekání na soupeře. */
.zk-wrap > .qz-back { align-self: flex-start; width: auto; margin-bottom: 2px; }
/* Místo pro hostitelovu hlavu. `.qz-host` je absolutně ukotvená k shellu a sahá do 62 px,
   takže obrazovka, která začíná tlačítkem „Zpět", ho schová pod ni — na telefonu se
   překrývaly o 40×18 px. `.zk-auth` má tuhle rezervu vyladěnou na 76 px od 2026-08-25
   a `.zk-acc` taky; lobby (44 px z `.qz-modepick`) a výsledkové obrazovky online
   (46 px z `.qz-end`) na ni zapomněly.
   Scoped SCHVÁLNĚ jen na tyhle dvě, ne na `.zk-wrap:has(> .qz-back)` obecně: takový
   selektor má vyšší specificitu než `.qz-setup` a srazil by mu 112 px na 76, což jsou
   další obrazovky, kterých se problém netýká. A `.qz-pick` potřebuje dokonce 124 px
   kvůli liště `.qz-pickhead`.
   `:has()` u výsledků je nutné — jedna ze čtyř výsledkových obrazovek „Zpět" nemá
   (sólo výsledek má akce dole) a odsazovat ji by bylo zbytečné. */
.zk-lobby,
.qz-end.zk-wrap:has(> .qz-back) { padding-top: 76px; }

.zk-authcard { background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 18px;
  padding: 16px 16px 14px; box-shadow: 0 4px 0 #e3d5b8, 0 16px 34px rgba(120,90,50,.12); }
/* Kotva obrazovky. Bez obrázku to byl jen text na papíře — a logo appky sem
   nepatří, hostitelova žárovka už kouká z levého horního rohu (.qz-host-av),
   takže by tu byla dvakrát. landing-hero.jpg je jinak osiřelý (landing.html
   jen přesměrovává) a „lidi kolem glóbu" je přesně to, co online režim je.
   Rám = stejná nalepená fotka jako u ilustrací dlaždic (.qz-tile-ic .ic-img).

   Výška 210 px (dřív 128) je kvůli ČTVERCOVÉ ilustraci auth-hero.jpg: starý
   landing-hero.jpg byl na šířku, takže mu úzký proužek nevadil, ale ze čtverce
   `cover` vyřízne jen prostřední pás — a na tom zbyla deka místo lidí, kvůli
   kterým ten obrázek je. `object-position` je proto výš (34 %), ne na středu. */
.zk-authhero { display: block; box-sizing: border-box; width: 100%; height: 210px; object-fit: cover; object-position: 50% 20%;
  border-radius: 12px; border: 3px solid #fffdf6; outline: 2px solid #e3d5b8;
  box-shadow: 0 6px 16px rgba(120,90,50,.22); }
/* Štítek přes spodní hranu fotky říká, do jaké části appky hráč vlezl —
   stejný idiom jako .qz-mode-tag a .qz-tbadge, jen jediné barevné místo nahoře. */
.zk-authtag { position: relative; z-index: 1; width: max-content; margin: -13px auto 0;
  background: var(--teal); color: #fffdf6; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 0 #1f5f5c; }
.zk-authcard h2 { font-family: 'Nunito', sans-serif; font-size: 25px; font-weight: 800;
  color: var(--teal); text-align: center; margin: 10px 0 3px; }
.zk-authcard .zk-sub { font-size: 13px; color: var(--muted); text-align: center;
  line-height: 1.4; margin: 0 auto 14px; max-width: 32ch; }

/* Chyba se musí přečíst dřív, než hráč klikne znovu — samotný .qz-setnote je
   kurzíva 11,5 px na střed, což je na „špatný PIN" příliš tiché. */
.zk-autherr { background: #fbeeec; border: 1.5px solid #eec7bf; border-left: 4px solid var(--bad);
  border-radius: 10px; padding: 8px 11px; margin-bottom: 12px; }
.zk-autherr .qz-setnote { font-style: normal; font-size: 13px; text-align: left; line-height: 1.35; }

.zk-authcard .zk-form { gap: 12px; }
.zk-field .qz-fieldlabel { margin-bottom: 6px; }
/* „Zapomenutý PIN?" patří k poli s PINem, ne mezi hlavní akce dole (vzor
   Google/GitHub/chess.com: odkaz sedí na řádku s popiskem pole). */
.zk-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.zk-labelrow .qz-fieldlabel { margin-bottom: 0; }
/* 16 px: pod tuhle velikost si iOS při kliknutí do pole sám přizoomuje stránku.
   Platí i pro sekce Účtu (.zk-sect) — je to táž appka a týž mobil. */
.zk-authcard .qz-pname-in, .zk-sect .qz-pname-in { font-size: 16px; padding: 10px 12px; border-radius: 10px; border-width: 1.6px; }
.zk-authcard .qz-pname-in::placeholder, .zk-sect .qz-pname-in::placeholder { color: #b9a98f; }
.zk-authcard .qz-pname-in:focus, .zk-sect .qz-pname-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,127,127,.16); }
.zk-authcard .qz-go { font-size: 17px; padding: 12px 20px; margin-top: 2px; }

/* Pásmo se vybírá stejnými malovanými dlaždicemi jako v sólo hře (renderStart),
   jen zmenšenými — jinak by online působil jako cizí formulář přilepený k appce. */
.zk-bandpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zk-bandtile { background: var(--paper); border: 2px solid #dccdb0; border-radius: 14px;
  padding: 8px 4px 7px; cursor: pointer; font-family: inherit; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 3px 0 #e3d5b8; transition: transform .12s, box-shadow .12s; }
.zk-bandtile img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px;
  border: 2.5px solid #fffdf6; outline: 1.5px solid #e3d5b8; display: block; }
.zk-bandtile .zk-fb { font-size: 30px; line-height: 56px; }
.zk-bandtile .t { font-size: 12.5px; font-weight: 800; }
.zk-bandtile:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #e3d5b8; }
.zk-bandtile.on { border-color: var(--teal); background: #f1faf8; box-shadow: 0 3px 0 #1d6060; }
.zk-nicknote { text-align: left; font-size: 12px; margin-top: 8px; }
.zk-mailnote { text-align: left; font-size: 12px; margin-top: 6px; }
/* „nepovinný" u popisku, ať se hráč nemusí ptát, jestli bez něj projde dál. */
.zk-opt { font-weight: 600; font-size: 11.5px; color: var(--muted); text-transform: none;
  letter-spacing: 0; margin-left: 6px; }

/* Registrace na širokém displeji ------------------------------------------
   .zk-wrap má strop 640 px, což je správně pro lobby s dlaždicemi, ale na
   registraci to znamenalo úzký proužek uprostřed monitoru — obrazovka
   vypadala jako mobilní appka omylem otevřená na desktopu. Karta se proto
   od 900 px rozloží do dvou sloupců: vlevo obrázek s nadpisem, vpravo
   formulář. Je to táž hranice, na které se překlápí i hrací obrazovka.

   Dělá to VÝHRADNĚ CSS. V HTML jde pořadí za sebou stejně jako dřív
   (obrázek → nadpis → formulář), takže na mobilu se nezměnilo nic. */
@media (min-width: 900px) {
  .zk-wrap.zk-auth { max-width: 900px; }
  .zk-authcard { padding: 22px 22px 18px; }
  .zk-authgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 26px; align-items: stretch; }
  /* Obrázek je čtvercová ilustrace (512×512) — necháme ho blízko svého
     přirozeného tvaru místo roztažení na celou výšku sloupce (ta se řídí
     vyšším formulářem u registrace). Oba sloupce začínají NAHOŘE (2026-09-15, přání
     hráče): horní hrana obrázku lícuje s polem „Přezdívka". Vycentrované sloupce
     se míjely o 40 px, protože formulář je vyšší než obrázek s nadpisem. */
  .zk-authside { display: flex; flex-direction: column; justify-content: flex-start; }
  .zk-authhero { height: auto; flex: 0 0 auto; max-height: 320px; min-height: 220px; object-position: 50% 42%; }
  .zk-authcard h2 { font-size: 28px; margin-top: 12px; }
  .zk-authcard .zk-sub { margin-bottom: 0; }
  .zk-authmain { display: flex; flex-direction: column; justify-content: flex-start; }
  /* Pole nemá cenu roztahovat přes celý sloupec — dlouhá řádka se hůř čte
     a e-mail ani PIN tolik místa nepotřebují. */
  .zk-authmain .zk-form, .zk-authmain .zk-autherr { max-width: 420px; width: 100%; }
  .zk-authfoot { max-width: 420px; }
}

/* Tichý textový odkaz — vedlejší akce nemá konkurovat primárnímu tlačítku. */
.zk-linkbtn { background: none; border: 0; padding: 4px 2px; margin: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 650; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: #d8c9ad; }
.zk-linkbtn:hover { color: var(--teal); text-decoration-color: var(--teal); }
.zk-forgot { font-size: 12.5px; flex-shrink: 0; padding: 0; }
/* Obnova PINu přímo pod hláškou o nepovedeném přihlášení — čitelnější než odkaz u pole. */
.zk-errforgot { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700; padding: 0; }

.zk-authfoot { margin-top: 14px; padding-top: 12px; border-top: 1.5px solid #ecdfc7;
  text-align: center; font-size: 13px; color: var(--muted); }
.zk-authfoot .zk-linkbtn { font-size: 13px; color: var(--teal); text-decoration-color: #a9cfcb; }
/* Právní odkazy pod přihlášením a v profilu (2026-09-10). Drobné a tlumené — jsou tu,
   protože je zákon i obchody chtějí mít na dosah, ne aby soupeřily s hlavní akcí. */
.zk-legal { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.zk-legal a { color: var(--teal); text-decoration-color: #a9cfcb; text-underline-offset: 2px; }
/* Potvrzení věku a podmínek u registrace (2026-09-10). Klikací je celý řádek (label),
   zaškrtávátko v barvě appky, text drobný — je to podmínka, ne nabídka. */
.zk-agree { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.zk-agree input { width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  accent-color: var(--teal); cursor: pointer; }
/* Totéž na rozcestníku, pro hráče bez profilu. Odstup od dlaždic je větší než mezi nimi,
   ať se to čte jako patička obrazovky, ne jako další volba (pravidlo o vzdušnosti). */
.qz-legalfoot { margin-top: 30px; font-size: 12.5px; color: var(--muted); text-align: center; }
.qz-legalfoot a { color: var(--teal); text-decoration-color: #a9cfcb; text-underline-offset: 2px; }

@media (max-width: 480px) {
  .zk-authhero { height: 175px; }
  .zk-authcard { padding: 14px 13px 12px; }
  .zk-authcard h2 { font-size: 22px; }
  .zk-bandtile img { width: 48px; height: 48px; }
  .zk-bandtile .t { font-size: 11.5px; }
}

/* ---- obnova PINu (renderForgot, renderResetPin) --------------------------
   Obojí je plnohodnotný krok TÉHOŽ toku — na „Zapomenutý PIN?" se kliká přímo
   z přihlašovací karty —, takže obě obrazovky berou stejnou kartu i štítek.
   Hero fotku má ale jen „Nový PIN": tam hráč přistane rovnou z odkazu v e-mailu,
   bez jakéhokoli kontextu, a obrazovka mu musí sama říct, kde je. Do „Zapomenutého
   PINu" se naopak proklikne z karty, která tutéž fotku ukázala před vteřinou —
   druhá kopie by jen odsunula jediné pole formuláře pod okraj displeje. */
.zk-authcard.zk-nohero { padding-top: 18px; }
/* Štítek si bez fotky nemá co podlézat, takže padá záporný odsazovací trik. */
.zk-authcard.zk-nohero .zk-authtag { margin: 0 auto; }

/* Po odeslání odkazu formulář mizí a zůstane potvrzení — teal, ne šedý .qz-setnote,
   ať je na první pohled poznat „prošlo to" a ne „tady se ještě něco vyplňuje". */
.zk-donebox { display: flex; gap: 10px; align-items: flex-start; text-align: left;
  background: #eef7f4; border: 1.5px solid #bcded6; border-left: 4px solid var(--teal);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.zk-doneico { color: var(--teal); font-weight: 800; font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.zk-donetext { font-size: 13px; line-height: 1.4; color: var(--ink); }
.zk-authnote { font-size: 11.5px; color: var(--muted); font-style: italic; text-align: center;
  margin-top: 10px; line-height: 1.4; }

/* ---- účet (renderAccount) ------------------------------------------------
   Vědomě NENÍ auth karta. Auth karta je vstupní bod: jedna úloha, jedna barevná
   akce, obrázek jako kotva. Účet je nastavení uvnitř lobby a má dvě nezávislé
   věci (e-mail / odhlášení) — v jedné kartě by se slily a hero fotka by nad
   nastavením působila jako reklama. Společné zůstává všechno ostatní: papír,
   rámečky, velikost polí, chybová lišta. Širší (560 px) než login, protože sekce
   nesou i vysvětlující text, ne jen dvě pole. */
.zk-acc { max-width: 560px; padding-top: 76px; }
.zk-acc > .qz-back { align-self: flex-start; width: auto; margin-bottom: 2px; }
.zk-acc h2 { margin: 0; }
.zk-idrow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.zk-idnick { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); }

.zk-sect { background: var(--paper2); border: 1.6px solid #dccdb0; border-radius: 16px;
  padding: 14px 15px 13px; box-shadow: 0 4px 0 #e3d5b8, 0 12px 26px rgba(120,90,50,.08); }
.zk-sect h3 { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; color: var(--teal);
  margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zk-h3note { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: #f2e9d6; border-radius: 999px; padding: 3px 9px; }
.zk-sectnote { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 5px 0 11px; }
.zk-sect .qz-setnote { text-align: left; font-size: 11.5px; margin-top: 6px; line-height: 1.4; }
.zk-sect .qz-go { font-size: 16px; padding: 11px 18px; margin-top: 2px; }
.zk-sect .qz-back { width: 100%; justify-content: center; text-align: center; }

/* Stav e-mailu je první, co má být v sekci vidět: účet bez adresy je jednosměrka,
   a to se nedá říct jen popiskem pole. Okrová varianta záměrně nekřičí červeně —
   není to chyba hráče, jen věc, kterou má smysl dodělat. */
.zk-status { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid;
  border-radius: 12px; padding: 9px 11px; margin-bottom: 12px; }
.zk-status b { display: block; font-size: 13.5px; font-weight: 800; word-break: break-word; }
.zk-status .d { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.zk-statusico { font-weight: 800; font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.zk-status.on { background: #eef7f4; border-color: #bcded6; }
.zk-status.on .zk-statusico { color: var(--teal); }
.zk-status.off { background: #fdf4e7; border-color: #ecd6ab; }
.zk-status.off .zk-statusico { color: var(--ochre); }

/* Smazání e-mailu je tichý odkaz, ne druhé tlačítko. Dřív to bylo full-width
   .qz-back hned pod „Uložit", takže obě akce vypadaly jako rovnocenná nabídka. */
.zk-dangerlink { display: block; margin: 11px auto 0; background: none; border: 0; padding: 4px 2px;
  font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--bad); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: #e9c3ba; }
.zk-dangerlink:hover { text-decoration-color: var(--bad); }

/* Potvrzení uložení: po překreslení se jinak změní jen maskovaná adresa ve stavu. */
.zk-okbox { background: #eef7f4; border: 1.5px solid #bcded6; border-left: 4px solid var(--teal);
  border-radius: 10px; padding: 8px 11px; font-size: 13px; color: var(--ink); line-height: 1.35; }

@media (max-width: 480px) {
  .zk-sect { padding: 12px 12px 11px; }
  .zk-sect h3 { font-size: 15px; }
  .zk-sectnote { font-size: 12px; }
}

/* Žebříček: „Jak se sem dostaneš“ nad seznamem (2026-10-14). Próza bez rámečku,
   tlačítko je jediná silná věc; seznam pod tím odsazený jako další skupina. */
.zk-boardhow { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 6px auto 30px; max-width: 520px; }
.zk-boardhow p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); text-align: center; }