:root {
  color-scheme: light dark;
  /* Teplý papír místo studené šedi: ladí s malovanými videi. */
  --bg: #f8f4ec;
  --surface: #fffdf8;
  --fg: #221d17;
  --muted: #6f675c;
  --line: #e3dbcc;
  --accent: #4a45c4;
  --accent-soft: #e7e3f7;
  --on-accent: #ffffff;
  --good: #1f8a4c;
  --good-soft: #dff3e6;
  --bad: #c43d4b;
  --bad-soft: #fbe3e6;
  --shadow: 0 1px 2px rgb(30 20 80 / 0.06), 0 4px 16px rgb(30 20 80 / 0.06);
  --radius: 18px;
  /*
   * Systémové patkové písmo, nic se nestahuje (do 25. 10. 2026 Fraunces
   * a Literata, ~400 kB). iPhone: New York (ui-serif), Android: Noto Serif,
   * Windows a starší systémy: Georgia. Stejný zásobník má common.js.
   */
  --font-display: ui-serif, 'Iowan Old Style', 'Apple Garamond', Georgia, 'Noto Serif', 'Times New Roman', serif;
  --font-text: ui-serif, 'Iowan Old Style', 'Apple Garamond', Georgia, 'Noto Serif', 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15131b;
    --surface: #201d29;
    --fg: #efeae0;
    --muted: #a8a095;
    --line: #36313f;
    --accent: #9d93ff;
    --accent-soft: #2f2a52;
    --on-accent: #16141f;
    --good: #5fd18e;
    --good-soft: #193527;
    --bad: #ff8a97;
    --bad-soft: #3d1f25;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--bg); color: var(--fg); }

/*
 * Japonština: systémové mincho za latinkovými písmy (latinka a číslice
 * zůstávají z nich), kurzíva jen jako barva (japonské písmo kurzívu nemá,
 * prohlížeč by znaky jen naklonil), zalamování podle frází (Chrome 119+)
 * a přísná pravidla začátku řádku (。、 ani malé kany na začátku).
 */
:root:lang(ja) {
  --font-display: ui-serif, 'Iowan Old Style', 'Apple Garamond', Georgia, 'Noto Serif', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  --font-text: var(--font-display);
}
:lang(ja) body { line-break: strict; word-break: auto-phrase; }
:lang(ja) * { font-style: normal !important; letter-spacing: normal !important; }

body {
  font: 18px/1.55 var(--font-text);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body.is-playing { overflow: hidden; overscroll-behavior: none; }

button { font: inherit; color: inherit; }

h1, h2,
.button,
.choice,
.verdict__title {
  font-family: var(--font-display);
}

h1, h2 { font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }

p, .card__body { text-wrap: pretty; hanging-punctuation: first; }

/* ------------------------------------------------------------ přehled */

/* Stejně široké jako příběh (.card), karty po dvou vedle sebe. */
.home {
  max-width: 520px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 28px) 16px calc(env(safe-area-inset-bottom) + 32px);
}

/* Stránka 404 (404.php). */
.home__brand { margin: 0; color: var(--accent); font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.home h1 { margin: 6px 0 12px; font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; }
.home__lead { margin: 0 0 28px; color: var(--muted); font-size: 1.05rem; }
.home__lead a { color: var(--accent); }

.home .home__title { margin: 0 0 20px; font-size: clamp(2.2rem, 10vw, 2.8rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; text-align: center; }

.stories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Odkazy na jazykové verze pod přehledem. */
.langs { margin: 28px 0 8px; text-align: center; font-size: 0.95rem; color: var(--muted, inherit); }
.langs a { color: inherit; }
.langs span { font-weight: 600; }

/* Zmenšená první karta příběhu: vesmír z plakátu, nahoře nadpis. Text je
   světlý i ve světlém režimu, protože pozadí je vždycky tmavé. */
.story {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius);
  background: #090c26;
  box-shadow: var(--shadow);
  color: #f4f1ff;
  text-decoration: none;
  transition: transform 0.12s;
}

.story:active { transform: scale(0.97); }
.story:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.story__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.story__title {
  position: relative;
  padding: 30px 12px 40px;
  background: linear-gradient(#090c26e6 45%, #090c2600);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

/* Rozpracovaný příběh, jen v lokálním buildu (DRAFTS=1). */
.story__draft {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffd27a;
  color: #221d17;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Texty lekce pod přehrávačem (pro vyhledávače a bez JavaScriptu). */
.story-text { max-width: 520px; margin: 0 auto; padding: 32px 16px; }
.story-text section { margin-top: 24px; }

/*
 * S JavaScriptem (třída js z index.html) se lekce rovnou otevře
 * v přehrávači; statický text by v Safari na chvilku probleskl, než se
 * app.js spustí. Kdyby se přehrávač do 3 s neotevřel (chyba skriptu), text
 * se přece jen ukáže -- pod otevřeným přehrávačem nevadí.
 */
.js body[data-story] .story-text {
  visibility: hidden;
  animation: story-text-fallback 0s 3s forwards;
}

@keyframes story-text-fallback { to { visibility: visible; } }

.js body.starts-dark { background: #090c26; }

/* ------------------------------------------------------------ přehrávač */

.player {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
}

/*
 * Pruh s postupem leží přes obsah, ne nad ním: na telefonu s lištou
 * prohlížeče dole každý pixel výšky chybí kresbě ve videu.
 */
.player__top {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, var(--card-w));
  translate: -50% 0;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 0 16px;
  pointer-events: none;
}

.player__top > * { pointer-events: auto; }

/* Dole vpravo sdílení, jako na Instagramu; stejně široké jako karta. */
.player__bottom {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  left: 50%;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  /* Bublina „Odkaz zkopírován" u spodního tlačítka (sdílení), ne u srdce. */
  align-items: flex-end;
  gap: 8px;
  width: min(100%, var(--card-w));
  translate: -50% 0;
  padding: 0 14px;
  pointer-events: none;
}

.player__bottom > * { pointer-events: auto; }

/* Srdce nad sdílením jako na Instagramu. */
.player__actions { display: flex; flex-direction: column; gap: 2px; }

.player__like,
.player__share {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.player__like svg,
.player__share svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.player__like svg { width: 28px; height: 28px; }

.player__like:active,
.player__share:active { transform: scale(0.92); }
.player.is-dark :is(.player__like, .player__share) { color: #f4f1ff; filter: drop-shadow(0 1px 3px #0008); }

/* Lajknutý příběh: plné červené srdce na světlé i tmavé kartě. */
.player .player__like.is-liked { color: #ed4956; }
.player__like.is-liked svg { fill: currentColor; }
.player__like.is-popping svg { animation: like-pop 0.35s ease-out; }

@keyframes like-pop {
  40% { scale: 1.3; }
}

.player__toast {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #16142ee6;
  color: #f4f1ff;
  font-size: 0.85rem;
}

.progress { display: flex; flex: 1; gap: 3px; }
.progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.2s; }
.progress i.done { background: var(--accent); }

/*
 * Na širší obrazovce (tablet, počítač) je karta užší než okno. U tmavé
 * karty je proto tmavé i pozadí vedle ní, ať kolem ní nesvítí papír.
 */
/*
 * Karta je aspoň 520 px široká, na vysokém okně (tablet) tak široká, aby se
 * video 9:16 vešlo celé a neořízlo se po stranách.
 */
.player { --card-w: max(520px, 100dvh * 9 / 16); transition: background-color 0.3s; }
.player.is-dark { background: #090c26; }

/* Nad tmavým videem světlý pruh; `is-dark` přepíná přehrávač podle karty. */
.player.is-dark .progress i { background: #ffffff38; }
.player.is-dark .progress i.done { background: #ffffffd9; }
.player.is-dark .player__close { color: #e8e4f7; }

.player__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}

/* ------------------------------------------------------------ karty */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: var(--card-w);
  min-height: 100%;
  margin: 0 auto;
  /* Nahoře místo pro pruh s postupem, který leží přes kartu. */
  padding: calc(env(safe-area-inset-top) + 44px) 24px calc(env(safe-area-inset-bottom) + 24px);
  scroll-snap-align: start;
  /* Jedno švihnutí = jedna karta, jako v TikToku. */
  scroll-snap-stop: always;
}

.card__title { margin: 0; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; }
.card__question { margin: 0; font-size: clamp(1.5rem, 6.5vw, 1.9rem); line-height: 1.2; text-align: center; text-wrap: balance; }
.card__body { font-size: 1.25rem; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; }
.card__body b { color: var(--accent); font-weight: 650; }
/* Víc odstavců v textu karty: body s <p>…</p><p>…</p>. */
.card__body p { margin: 0; }
.card__body p + p { margin-top: 0.8em; }

.card__hint {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  display: grid;
  justify-items: center;
  translate: -50% 0;
  color: var(--muted);
  pointer-events: none;
}

.card__hint svg {
  width: 46px;
  height: 13px;
  margin-top: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hint-pulse 1.6s ease-in-out infinite;
}

/* Druhá šipka o chvilku později: vlnka, která táhne oko dolů. */
.card__hint svg + svg { animation-delay: 0.18s; }

@keyframes hint-pulse {
  0%, 100% { opacity: 0.25; transform: translateY(-3px); }
  50% { opacity: 1; transform: translateY(4px); }
}

/* Video je vždycky temný vesmír, takže text na něm je světlý i ve světlém režimu. */
.card--video {
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  background: #090c26;
  color: #f4f1ff;
}

.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Když je karta nižší než video, ořízne se shora: nahoře je pod textem
     stejně prázdný vesmír, kresba je dole. */
  object-position: center bottom;
}


.card__video.is-hidden { visibility: hidden; }

/* Video posunuté nahoru (viz fitUnder) nechá dole pás bez hvězd; spodní
   okraj se proto rozplyne do stejně tmavého pozadí karty. */
.card--video.is-lifted .card__video {
  mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
}

/* Kde je okno širší než karta (tablet), video se u bočních okrajů rozplyne
   do tmavého pozadí přehrávače; u posunutého videa spolu se spodkem. */
@media (min-width: 560px) {
  .card__video {
    --sides: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);

    mask-image: var(--sides);
    -webkit-mask-image: var(--sides);
  }

  .card--video.is-lifted .card__video {
    mask-image: var(--sides), linear-gradient(#000 calc(100% - 48px), transparent);
    mask-composite: intersect;
    -webkit-mask-image: var(--sides), linear-gradient(#000 calc(100% - 48px), transparent);
    -webkit-mask-composite: source-in;
  }
}

.card__overlay {
  position: relative;
  display: grid;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 40px) 24px 56px;
  background: linear-gradient(#090c26e6 30%, #090c2600);
}

.card--video .card__title { font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; }
.card--video .card__subtitle { margin: -2px 0 0; color: #d8d2f3; font-size: 1.3rem; font-style: italic; line-height: 1.35; }
/* Krátký odstavec přes video: rozdělené slovo tu ruší víc, než pomůže. */
.card--video .card__body { color: #e9e5f8; font-size: 1.15rem; line-height: 1.5; hyphens: manual; -webkit-hyphens: manual; }
.card--video .card__body b { color: #ffd27a; }
.card--video.card--small .card__body { font-size: 1rem; line-height: 1.45; }
.card--video .card__note { margin: 0; color: #b9b2dc; font-size: 0.9rem; font-style: italic; }
.card--video .card__hint { color: #e4dff7; }

.card__play {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 72px);
  translate: -50% 0;
  padding: 12px 22px;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  background: #090c26b3;
  color: #f4f1ff;
  font-weight: 700;
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* Tmavá textová karta: stejný malovaný vesmír jako ve videích, jen jako obrázek. */
.card--dark {
  background: #090c26 center bottom / cover no-repeat;
  color: #f4f1ff;
}

.card--dark .card__body { color: #e9e5f8; hyphens: manual; -webkit-hyphens: manual; }
.card--dark .card__body b { color: #ffd27a; }
.card--dark .card__hint { color: #e4dff7; }

/* Šipky na poslední kartě příběhu i s názvem dalšího. */
.card__hint--next { width: calc(100% - 128px); text-align: center; }
.card__hint-label { margin-bottom: 6px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; text-wrap: balance; }

/* Karta s dalším příběhem: plakát jeho prvního videa, nadpis dole. */
.card--next { justify-content: flex-end; gap: 6px; background-position: center; }
.card__next-label { margin: 0; color: #ffd27a; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.card__fact {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid #ffd27a59;
  border-radius: var(--radius);
  background: #ffd27a1f;
  backdrop-filter: blur(4px);
}

.card__fact-label {
  margin: 0;
  color: #ffd27a;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card__fact-text { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.card__outro { margin: 0; color: #c9c3ea; font-size: 1.05rem; font-style: italic; }

/* Otázka na tmavé kartě: tlačítka jako průsvitné sklo nad vesmírem. */
.card--dark .card__question { color: #f4f1ff; }
.card--dark .choice { border-color: #ffffff38; background: #ffffff14; color: #f4f1ff; }
.card--dark .choice.is-correct { border-color: #5fd18e; background: #5fd18e2e; }
.card--dark .choice.is-wrong { border-color: #ff8a97; background: #ff8a972e; }
.card--dark .card__wait { color: #c9c3ea; }
.card--dark .verdict { background: #5fd18e24; color: #f4f1ff; }
.card--dark .verdict.is-wrong { background: #ff8a9724; }
.card--dark .verdict__title { color: #7fe3a8; }
.card--dark .verdict.is-wrong .verdict__title { color: #ffa3ae; }

/* ------------------------------------------------------------ otázky */

.choices { display: grid; gap: 10px; }

.choice {
  min-height: 60px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.35rem;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s, border-color 0.2s;
}

.choice:active:not(:disabled) { transform: scale(0.97); }

.choice:disabled { cursor: default; }

.choice.is-correct { border-color: var(--good); background: var(--good-soft); }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice:disabled:not(.is-correct, .is-wrong) { opacity: 0.5; }

/* ------------------------------------------------------------ tlačítka */

.button {
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
}

.button--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.button:disabled { opacity: 0.45; cursor: default; }

/*
 * Klávesy na první kartě: jen na počítači s myší. Na telefonu se nikdo
 * šipkami neposouvá a ikonka by jen mátla.
 */
.keys { display: none; }

@media (hover: hover) and (pointer: fine) {
  .keys {
    position: absolute;
    /* Vlevo: vpravo dole je tlačítko sdílení. */
    left: 22px;
    bottom: calc(env(safe-area-inset-bottom) + 18px);
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: 30px 30px auto;
    gap: 4px;
    justify-items: center;
    align-items: center;
  }
}

.keys span,
.keys button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid #ffffff4d;
  border-radius: 7px;
  background: #ffffff0f;
  color: #e4dff7;
  font-size: 0.85rem;
  line-height: 1;
}

.keys span { opacity: 0.55; }
.keys__up { grid-column: 2; grid-row: 1; }
.keys__left { grid-column: 1; grid-row: 2; }
.keys__right { grid-column: 3; grid-row: 2; }

.keys__down {
  grid-column: 2;
  grid-row: 2;
  border-color: #ffd27a !important;
  background: #ffd27a33 !important;
  color: #ffd27a !important;
  cursor: pointer;
  animation: key-press 1.6s ease-in-out infinite;
}

@keyframes key-press {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 #ffd27a00; }
  50% { transform: translateY(2px); box-shadow: 0 0 0 6px #ffd27a26; }
}

.keys .keys__label {
  grid-column: 1 / -1;
  width: auto;
  height: auto;
  margin-top: 4px;
  border: 0;
  background: none;
  opacity: 1;
  color: #c9c3ea;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------ feed */

.feed {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  outline: none;
}

.card__wait { margin: 0; color: var(--muted); text-align: center; font-size: 0.9rem; }

.verdict {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--good-soft);
}

.verdict.is-wrong { background: var(--bad-soft); }
.verdict__title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--good); }
.verdict.is-wrong .verdict__title { color: var(--bad); }
.verdict__why { margin: 0 0 8px; }
.verdict .button { border-color: var(--good); background: var(--good); }
.verdict.is-wrong .button { border-color: var(--bad); background: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* Nekonečná animace se zkrácenou délkou by blikala; šipky prostě stojí. */
  .card__hint svg { animation: none !important; opacity: 0.9; }
  .keys__down { animation: none !important; }
}