/* Cestovatelské kvízy — rozcestník i jedna hra.
 *
 * Staví na proměnných z vyprava.css (--papir, --akcent, --display…), takže se
 * kvíz obarví s webem a v nočním režimu se nemusí nic dopisovat.
 *
 * Barva se nikde nepoužívá jako jediný nositel informace: u správné odpovědi
 * stojí „Správně.", u špatné „Správně je: …", takže to dává smysl i tomu, kdo
 * zelenou od červené nerozezná.
 */

.kviz-obal{padding-block:clamp(22px,3vw,38px)}

/* ---- rozcestník ----------------------------------------------------- */

.kviz-prehled{display:grid;gap:clamp(16px,2.2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  margin-bottom:clamp(34px,5vw,60px)}
.kviz-karta{display:flex;flex-direction:column;background:var(--karta);
  border:1px solid var(--linka);border-radius:3px;overflow:hidden;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.kviz-karta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,27,26,.1)}
.kviz-karta:active{transform:scale(.99)}
.kviz-karta__ram{display:block;overflow:hidden;background:var(--plocha)}
.kviz-karta__ram img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.kviz-karta__telo{display:flex;flex-direction:column;gap:7px;padding:16px 18px 20px;flex:1}
.kviz-karta__u{font-size:13px;letter-spacing:.22em;color:var(--akcent)}
.kviz-karta b{font-family:var(--display);font-weight:800;font-size:21px;
  letter-spacing:-.02em;color:var(--inkoust)}
.kviz-karta__popis{font-size:13.5px;line-height:1.55;color:var(--tichy)}
.kviz-karta__cta{margin-top:auto;padding-top:10px;font-family:var(--display);
  font-weight:700;font-size:13.5px;color:var(--akcent)}

.kviz-text{max-width:var(--cteni)}
.kviz-text h2{font-family:var(--display);font-weight:800;font-size:clamp(19px,2.2vw,24px);
  letter-spacing:-.02em;margin:clamp(22px,3vw,30px) 0 8px}
.kviz-text p{margin:0 0 12px;font-size:15.5px;line-height:1.65}
/* Pás odznaků pod vysvětlením, o co se hraje. Na mobilu se zalomí sám,
   od 560 px má pevných pět sloupců: `auto-fit` jich v 720px textovém
   sloupci spočítá šest, takže by za pátým odznakem zbylo prázdné místo. */
.kviz-odznaky{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:14px;margin:0 0 16px;padding:0;list-style:none}
@media (min-width:560px){.kviz-odznaky{grid-template-columns:repeat(5,1fr)}}
/* Odznak Znalce je nižší než ostatní (1080x1184 proti 1080x1350). Bez
   tohohle by jeho popisek vyskočil nad řádek ostatních — sloupec je flex
   a popisek se odsadí dolů, takže popisky drží jednu linku. */
.kviz-odznaky li{margin:0;text-align:center;display:flex;flex-direction:column}
.kviz-odznaky img{display:block;width:100%;height:auto;border-radius:3px;
  box-shadow:0 6px 18px rgba(20,27,26,.14)}
.kviz-odznaky span{display:block;margin-top:auto;padding-top:6px;font-family:var(--display);
  font-weight:800;font-size:12.5px;letter-spacing:-.01em;color:var(--tichy)}

/* ---- hra ------------------------------------------------------------ */

.kviz{max-width:var(--cteni);margin:clamp(14px,2vw,22px) 0 clamp(30px,4vw,48px);
  background:var(--karta);border:1px solid var(--linka);border-radius:3px;
  padding:clamp(18px,2.6vw,30px)}
.kviz__uvod{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kviz__pocet{margin:0;font-size:14px;color:var(--tichy)}

.kviz__hlava{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tichy)}
.kviz__body{color:var(--akcent)}
.kviz__pruh{height:4px;border-radius:999px;background:var(--plocha);margin:10px 0 18px;overflow:hidden}
.kviz__pruh span{display:block;height:100%;background:var(--akcent);
  transition:width .3s cubic-bezier(.22,1,.36,1)}

.kviz__zadani{font-family:var(--display);font-weight:800;margin:0 0 16px;
  font-size:clamp(19px,2.4vw,25px);line-height:1.25;letter-spacing:-.02em}

.kviz__moznosti{display:grid;gap:9px}
.kviz__m{display:block;width:100%;text-align:left;font:inherit;font-size:15.5px;
  padding:13px 16px;border:1px solid var(--linka);border-radius:3px;
  background:var(--papir);color:var(--inkoust);cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s}
.kviz__m:hover:not(:disabled){border-color:var(--akcent);background:var(--plocha)}
.kviz__m:active:not(:disabled){transform:scale(.995)}
.kviz__m:disabled{cursor:default;opacity:.75}
/* Vedle barvy nese výsledek i značka, aby to nestálo jen na rozlišení odstínů. */
.kviz__m.je-spravne{border-color:#1f7a4d;background:rgba(31,122,77,.1);opacity:1}
.kviz__m.je-spravne::after{content:" ✓";color:#1f7a4d;font-weight:700}
.kviz__m.je-spatne{border-color:#b3261e;background:rgba(179,38,30,.08);opacity:1}
.kviz__m.je-spatne::after{content:" ✕";color:#b3261e;font-weight:700}

.kviz__reakce{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kviz__reakce:not(:empty){margin-top:16px;padding-top:16px;border-top:1px solid var(--linka)}
.kviz__reakce b{font-family:var(--display)}
.kviz__reakce span{font-size:14.5px;line-height:1.6;color:var(--tichy)}
.kviz__reakce.je-spravne b{color:#1f7a4d}
.kviz__reakce.je-spatne b{color:#b3261e}

.kviz__konec{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
/* Odznak je odměna, takže dostane prostor — ale ne přes celou šířku čtecího
   sloupce, aby se pod ním vešlo skóre i sdílení bez rolování. */
.kviz__odznak{width:min(100%,310px);margin:0 0 4px;border-radius:3px;overflow:hidden;
  box-shadow:0 12px 32px rgba(20,27,26,.18)}
.kviz__odznak img{display:block;width:100%;height:auto}
.kviz__ziskano{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,2.2vw,21px);letter-spacing:-.02em;color:var(--akcent)}
.kviz__chybi{margin:0;font-size:14.5px;line-height:1.55;color:var(--tichy);max-width:46ch}
/* Osobní rekord — na úvodní obrazovce i ve výsledku, proto vlastní třída. */
.kviz__rekord{margin:0;font-size:14px;line-height:1.5;color:var(--tichy)}
.kviz__skore{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(40px,7vw,62px);line-height:1;letter-spacing:-.04em;color:var(--akcent)}
.kviz__titul{margin:0 0 6px;font-size:16.5px;line-height:1.5}
.kviz__odkaz{font-size:14px;color:var(--tichy);border-bottom:1px solid var(--linka)}
.kviz__odkaz:hover{color:var(--akcent)}

.kviz__sdileni{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  margin:6px 0 14px;padding:14px;background:var(--plocha);border-radius:3px;width:100%}
.kviz__sdileni-popis{flex:1 0 100%;font-family:var(--display);font-weight:700;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tichy)}
.kviz__s{font:inherit;font-size:14px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--linka);background:var(--papir);color:var(--inkoust);cursor:pointer}
.kviz__s:hover{border-color:var(--akcent);color:var(--akcent)}

.kviz-vyzva{max-width:var(--cteni);margin:0 0 4px;padding:13px 16px;
  background:var(--plocha);border-left:3px solid var(--akcent);border-radius:0 3px 3px 0;
  font-size:15px;line-height:1.55}

/* ---- odkazy na ostatní kvízy pod hrou -------------------------------- */

.kviz-dlazdice{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.kviz-dlazdice__k{display:flex;flex-direction:column;gap:3px;padding:13px 15px;
  background:var(--karta);border:1px solid var(--linka);border-radius:3px}
.kviz-dlazdice__k:hover{border-color:var(--akcent)}
.kviz-dlazdice__u{font-size:11px;letter-spacing:.2em;color:var(--akcent)}
.kviz-dlazdice__k b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--inkoust)}
.kviz-dlazdice__k span:last-child{font-size:12.5px;color:var(--tichy)}

@media (prefers-reduced-motion:reduce){
  .kviz-karta,.kviz-karta:hover,.kviz-karta:active,.kviz__m,.kviz__pruh span{transition:none;transform:none}
}