/* Pohádkobot – noční vzhled (spec 7.6).
   Vždy tmavý, nikdy čistá bílá; tlumená jantarová jako noční lampička.
   Jediný výrazný prvek: „lampička“ – záře kolem právě čtené volby. Všechno ostatní je tiché. */

:root {
  color-scheme: dark;
  --bg: #0d0f14;
  --bg-raised: #151922;
  --bg-sunk: #08090c;
  --line: #262b36;
  --text: #cfc6b8;
  --text-muted: #8c857a;
  --accent: #c79a52;
  --accent-ink: #e3c189;
  --accent-deep: #33260f;
  --accent-edge: #5c4421;
  --accent-glow: rgba(199, 154, 82, 0.32);
  --sun: #3b2a17;
  --sun-edge: #6a4a22;
  --moon: #141d33;
  --moon-edge: #2c3d63;
  --moon-ink: #b9c3dd;
  --danger: #c98f86;
  --tap: 64px;
  --radius: 22px;
  --radius-small: 12px;
  --gutter: 20px;
  --dim: 0;
  --font-ui: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-story: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 112.5%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
}

img {
  display: block;
  max-width: 100%;
  filter: brightness(.85);
}

a { color: var(--accent-ink); text-underline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-story);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

code { color: var(--accent-ink); font-size: .9em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ztmavení: černá vrstva přes celou stránku, 0–60 %, pamatuje se v zařízení */
.dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  opacity: var(--dim);
  pointer-events: none;
}

/* Horní lišta */
.topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 calc(var(--gutter) - 8px);
}

.topbar__home {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-right: auto;
  padding: 0 8px;
  color: var(--text);
  font-family: var(--font-story);
  font-size: 1.15rem;
  text-decoration: none;
}

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  color: var(--text-muted);
  text-decoration: none;
}

/* Ikonové ovládání – vizuálně malé, dotyková plocha 64 px */
.ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.3rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.ctrl:active { background: var(--bg-raised); }

/* Stránka */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 8px var(--gutter) 56px;
}

.page--narrow { max-width: 28rem; }

.empty {
  padding: 40px 0;
  color: var(--text-muted);
  text-align: center;
}

/* Tlačítka */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }

.btn--primary {
  border-color: var(--accent-edge);
  background: var(--accent-deep);
  color: var(--accent-ink);
}

.btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
}

.btn--big { min-height: 72px; padding: 0 32px; font-size: 1.1rem; }
.btn--huge { width: min(100%, 22rem); min-height: 96px; padding: 0 40px; font-size: 1.35rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn-row--start { justify-content: flex-start; }

/* Formuláře a nastavení */
.field {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: .95rem;
}

.field input[type="password"] {
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg-sunk);
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
}

input[type="range"] {
  width: 100%;
  min-height: var(--tap);
  accent-color: var(--accent);
}

.toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap);
}

.toggle input { width: 26px; height: 26px; accent-color: var(--accent); }

.form-error { color: var(--danger); }

.sheet {
  width: min(100% - 2 * var(--gutter), 28rem);
  padding: 22px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
}

.sheet::backdrop { background: rgba(0, 0, 0, .6); }
.sheet__title { margin-bottom: 18px; font-size: 1.3rem; }
.sheet__close { position: absolute; top: 4px; right: 4px; margin: 0; }
.sheet .field, .sheet .toggle { margin-bottom: 14px; }

.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 900;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 14px 22px;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--accent-ink);
  transform: translateX(-50%);
}

/* Přihlášení a chybová stránka */
.login, .error {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-top: 14vh;
  text-align: center;
}

.login__moon, .error__moon, .end__moon {
  color: var(--accent);
  font-size: 3.2rem;
  line-height: 1;
}

.login__title { font-size: 1.8rem; }

.login__form {
  display: grid;
  gap: 16px;
  width: 100%;
  text-align: left;
}

.error__title { font-size: 1.9rem; }
.error__message { color: var(--text-muted); }

/* Obálka, která se dole rozplyne do noci (dnešní pohádka, detail) */
.fade-cover {
  display: block;
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

.fade-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Domů */
.home { display: grid; gap: 44px; }

.hero {
  display: grid;
  gap: 14px;
  text-align: center;
}

.hero__label { color: var(--text-muted); }
.hero__title { position: relative; font-size: clamp(1.9rem, 7vw, 2.6rem); }
.fade-cover + .hero__title { margin-top: -56px; }
.hero__meta { color: var(--text-muted); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.hero--empty { justify-items: center; padding-top: 48px; }

.slot {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.slot__label {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 1rem;
}

.slot__tale {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
}

.slot__cover {
  flex: none;
  width: 84px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--bg-raised);
}

.slot__cover img { width: 100%; height: 100%; object-fit: cover; }
.slot__title { flex: 1; font-family: var(--font-story); font-size: 1.25rem; }
.home__more { text-align: center; }

/* Mřížka obálek (výběr, knihovna) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 24px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: grid;
  align-content: start;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.tile__cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: radial-gradient(circle at 70% 25%, #222837, var(--bg-raised));
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: outline-color .2s, box-shadow .2s;
}

.tile__cover img { width: 100%; height: 100%; object-fit: cover; }
.tile__title { font-family: var(--font-story); font-size: 1.02rem; line-height: 1.25; }

.tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text-muted);
  font-size: .85rem;
}

.tile.is-selected .tile__cover {
  outline-color: var(--accent);
  box-shadow: 0 0 28px 4px var(--accent-glow);
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(8, 9, 12, .78);
  color: var(--accent-ink);
  font-size: .85rem;
  font-weight: 600;
}

.status { filter: grayscale(.4) brightness(.85); }

/* Výběr na zítra */
.picker { padding-bottom: 220px; }

.picker__heading, .library__heading {
  margin: 8px 0 24px;
  font-size: 1.7rem;
}

.picker__heading { text-align: center; }

.picker__bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, rgba(13, 15, 20, 0));
  text-align: center;
}

.picker__title { font-family: var(--font-story); font-size: 1.3rem; }
.picker__perex { max-width: 32rem; color: var(--text-muted); }

/* Detail pohádky */
.detail { display: grid; gap: 18px; }
.detail__title { position: relative; font-size: clamp(1.8rem, 6vw, 2.4rem); }
.fade-cover + .detail__title { margin-top: -48px; }
.detail__meta, .detail__note { color: var(--text-muted); }
.detail__perex { font-family: var(--font-story); font-size: 1.15rem; line-height: 1.6; }
.detail__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.offline {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.offline progress { width: 100%; height: 10px; accent-color: var(--accent); }
.offline__status { color: var(--text-muted); font-size: .95rem; }

/* Přehrávač */
.player {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100dvh;
  padding: 72px var(--gutter) 28px;
  overflow: hidden;
}

.player[data-mode="cteni"] { align-content: start; }

.player__corner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}

.player__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.22) blur(3px) saturate(.8);
  transform: scale(1.06);
}

.player[data-mode="cteni"] .player__backdrop { display: none; }

.player__screen {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.player__title {
  max-width: 20em;
  font-family: var(--font-story);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
}

.player__hint, .player__note { color: var(--text-muted); }
.player__narration { gap: 36px; }
.player__textnext { padding-top: 8px; }

.dots {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dots li {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
}

.dots li.is-done { border-color: var(--accent); background: var(--accent); }

.controls { display: flex; gap: 28px; opacity: .6; }

/* Volby: dva velké obrázky (na výšku pod sebou, na šířku vedle sebe) */
.player__choices { width: 100%; gap: 14px; }

.choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  max-width: 36rem;
}

.choice {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 40dvh;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .4s ease;
}

.choice__img { width: 100%; height: 100%; object-fit: cover; }

.choice__label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(8, 9, 12, .85), rgba(8, 9, 12, 0));
  font-family: var(--font-story);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* V Poslechu volí dítě obrázkem – text volby čte vypravěč (čtečkám obrazovky zůstává) */
.player[data-mode="poslech"] .choice--image .choice__label {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.choice--sun { background: radial-gradient(circle at 50% 36%, var(--sun-edge), var(--sun) 70%); }
.choice--moon { background: radial-gradient(circle at 50% 36%, var(--moon-edge), var(--moon) 70%); }

.choice__symbol {
  margin-bottom: 44px;
  color: var(--accent-ink);
  font-size: 3.4rem;
  line-height: 1;
}

.choice--moon .choice__symbol { color: var(--moon-ink); }

/* Lampička: právě čtená volba jemně dýchá, druhá ustoupí */
.choice--active {
  box-shadow: 0 0 0 3px var(--accent), 0 0 44px 10px var(--accent-glow);
  animation: nightlight 2.4s ease-in-out infinite;
}

.choices:has(.choice--active) .choice:not(.choice--active) { opacity: .5; }

@keyframes nightlight {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 28px 4px var(--accent-glow); transform: scale(1); }
  50% { box-shadow: 0 0 0 3px var(--accent), 0 0 60px 16px var(--accent-glow); transform: scale(1.015); }
}

.replay { font-size: 1.4rem; }

@media (orientation: landscape) and (min-width: 600px) {
  .choices { grid-template-columns: 1fr 1fr; max-width: 64rem; }
  .choice { max-height: 70dvh; }
}

/* Čtení (a text části bez nahrávky v Poslechu) */
.player__text { justify-items: stretch; width: 100%; text-align: left; }

.fontsize { display: flex; justify-content: flex-end; gap: 4px; }

.fontsize button {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-story);
  cursor: pointer;
}

.fontsize [data-font-size="s"] { font-size: .85rem; }
.fontsize [data-font-size="m"] { font-size: 1.05rem; }
.fontsize [data-font-size="l"] { font-size: 1.35rem; }
.fontsize [aria-pressed="true"] { background: var(--bg-raised); color: var(--accent-ink); }

.player__title--story { justify-self: center; margin-bottom: 8px; text-align: center; }

.story {
  max-width: 38ch;
  margin: 0 auto;
  font-family: var(--font-story);
  font-size: 1.35rem;
  line-height: 1.7;
  hyphens: auto;
}

.story[data-font="s"] { font-size: 1.15rem; }
.story[data-font="l"] { font-size: 1.65rem; }
.story p + p { margin-top: .9em; }
.story__part { scroll-margin-top: 72px; }

.story__part + .story__part {
  margin-top: 1.6em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
}

/* Konec */
.player__end { padding: 24px 0; }
.end__title { font-size: clamp(2rem, 8vw, 2.8rem); }
.end__next { color: var(--text-muted); }
.end__next strong { color: var(--text); font-family: var(--font-story); font-weight: 600; }

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