/* AktuálněTeď — rozcestník. Záměrně jeden tmavý svět (film, střižna), barvy jen z tokenů. */
:root {
  --zem: #0a0b0d;
  --plocha: #121317;
  --plocha-2: #191a1f;
  --cara: #26282e;
  --text: #f3f1ec;
  --tlumene: #9b9ea6;
  --cervena: #ff3b30;
  --cervena-tma: #3a1412;
  --dobre: #3ddc84;
  --dobre-tma: #10291b;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --r: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zem);
  color: var(--text);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cervena); outline-offset: 3px; border-radius: 8px; }

.zrno {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.plocha {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 40px 16px 24px;
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .plocha {
    padding: 64px 32px 32px;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 40px; row-gap: 20px;
    align-items: start;
  }
  .identita { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 32px; }
  .panel { grid-column: 2; }
}

/* ---------- identita + odkazy ---------- */
.identita { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.avatar { width: 88px; height: 88px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--cara), 0 10px 40px rgba(255, 59, 48, .18); }
.stitek {
  margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tlumene); display: flex; align-items: center; gap: 8px;
}
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--cervena); display: inline-block; flex: none; animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .25; } }
h1 {
  margin: 0; font: 400 clamp(52px, 13vw, 76px)/.92 var(--serif); letter-spacing: -.01em;
}
h1 em { font-style: italic; color: var(--cervena); }
.claim { margin: 0; color: var(--tlumene); font-size: 17px; max-width: 34ch; text-wrap: pretty; }

.odkazy { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.odkaz {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 68px; padding: 10px 18px 10px 12px;
  background: var(--plocha); border: 1px solid var(--cara); border-radius: var(--r);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.odkaz:hover { transform: translateY(-2px); border-color: #3a3c44; background: var(--plocha-2); }
.odkaz:active { transform: translateY(0) scale(.99); }
.ik { width: 44px; height: 44px; border-radius: 11px; background: var(--plocha-2); display: grid; place-items: center; }
.ik svg { width: 22px; height: 22px; fill: var(--text); }
.tx { display: flex; flex-direction: column; min-width: 0; }
.tx b { font-weight: 600; font-size: 16px; }
.tx small { color: var(--tlumene); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sip { color: var(--tlumene); font-size: 18px; transition: transform .18s ease, color .18s ease; }
.odkaz:hover .sip { transform: translateX(3px); color: var(--text); }
.odkaz.hlavni { background: var(--cervena); border-color: var(--cervena); color: #fff; min-height: 76px; }
.odkaz.hlavni:hover { background: #ff5147; border-color: #ff5147; }
.odkaz.hlavni .ik { background: rgba(0, 0, 0, .18); }
.odkaz.hlavni .ik svg { fill: #fff; }
.odkaz.hlavni .tx small, .odkaz.hlavni .sip { color: rgba(255, 255, 255, .86); }
.odkaz.hlavni .tx b { font-size: 17px; }
.odkaz.tichy { background: transparent; }

.sdileni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- tlačítka ---------- */
.tl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--cara); background: var(--plocha); cursor: pointer;
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tl:hover { background: var(--plocha-2); border-color: #3a3c44; }
.tl:active { transform: scale(.97); }
.tl svg { width: 18px; height: 18px; fill: currentColor; }
.tl-hlavni { background: var(--text); color: var(--zem); border-color: var(--text); }
.tl-hlavni:hover { background: #fff; border-color: #fff; }
.tl-sdilet { background: var(--plocha-2); }
.tl-kruh { width: 44px; padding: 0; font-size: 18px; }
.skryte { display: none; }

/* ---------- panely ---------- */
.panel {
  background: var(--plocha); border: 1px solid var(--cara); border-radius: 20px;
  padding: 22px 18px; display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 600px) { .panel { padding: 26px 28px; } }
.panel-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h2 { margin: 0; font: italic 400 32px/1.05 var(--serif); display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.mala { color: var(--tlumene); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.radek { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pozn { margin: 0; color: var(--tlumene); font-size: 14px; }

/* premiéra */
.premiera-karta { display: grid; gap: 12px; text-decoration: none; }
@media (min-width: 600px) { .premiera-karta { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 20px; } }
.nahled { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--plocha-2); }
.nahled img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.premiera-karta:hover .nahled img { transform: scale(1.03); }
.premiera-nazev { font: 400 24px/1.2 var(--serif); text-wrap: balance; }
.odpocet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.odpocet div {
  background: var(--zem); border: 1px solid var(--cara); border-radius: 12px;
  padding: 12px 6px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.odpocet b { font: 600 clamp(26px, 7vw, 40px)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.odpocet span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tlumene); }
.odpocet.zive div { border-color: var(--cervena); }

/* náhodný díl */
.buben {
  background: var(--zem); border: 1px solid var(--cara); border-radius: 14px;
  min-height: 112px; display: grid; place-items: center; padding: 16px; overflow: hidden; position: relative;
}
.buben::before, .buben::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; pointer-events: none;
}
.buben::before { top: 0; background: linear-gradient(var(--zem), transparent); }
.buben::after { bottom: 0; background: linear-gradient(transparent, var(--zem)); }
.buben-okno { text-align: center; font: 400 26px/1.15 var(--serif); text-wrap: balance; max-width: 30ch; }
.buben-okno span { display: inline-block; }
.buben.toci .buben-okno span { animation: blik .09s linear infinite; color: var(--tlumene); }
@keyframes blik { from { transform: translateY(-6px); opacity: .4; } to { transform: translateY(6px); opacity: .9; } }
.buben-okno .rok { display: block; margin-top: 8px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cervena); }
.filtr { display: flex; flex-wrap: wrap; gap: 6px; }
.cip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cara); background: transparent; color: var(--tlumene); font-size: 14px; font-weight: 500;
}
.cip.aktivni { color: var(--text); border-color: var(--text); }

/* kvíz */
.kviz-karta { display: flex; flex-direction: column; gap: 16px; }
.kviz-tvrzeni { margin: 0; font: 400 clamp(24px, 5.4vw, 30px)/1.2 var(--serif); text-wrap: balance; min-height: 3.6em; }
.kviz-volby .volba { flex: 1 1 0; min-height: 52px; font-size: 16px; }
.volba[data-v="1"]:hover { border-color: var(--dobre); }
.volba[data-v="0"]:hover { border-color: var(--cervena); }
.volba[disabled] { cursor: default; opacity: .45; }
.volba.zvoleno { opacity: 1; border-color: var(--text); }
.kviz-vysledek { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--zem); border: 1px solid var(--cara); }
.kviz-vysledek[hidden] { display: none; }
.kviz-vysledek.ano { border-color: var(--dobre); background: var(--dobre-tma); }
.kviz-vysledek.ne { border-color: var(--cervena); background: var(--cervena-tma); }
.verdikt { margin: 0; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.vysv { margin: 0; color: var(--text); max-width: 62ch; }
.skore { color: var(--tlumene); font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skore span:first-child { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tecky { display: inline-flex; gap: 5px; }
.tecky i { width: 9px; height: 9px; border-radius: 50%; background: var(--cara); display: block; }
.tecky i.ok { background: var(--dobre); }
.tecky i.chyba { background: var(--cervena); }

/* časová osa */
.osa-ram { position: relative; margin: 0 -18px; }
@media (min-width: 600px) { .osa-ram { margin: 0 -28px; } }
.osa-pas {
  list-style: none; margin: 0; padding: 30px 18px 6px; display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; position: relative;
  background-image: linear-gradient(var(--cara), var(--cara));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 14px;
  background-attachment: local;
}
@media (min-width: 600px) { .osa-pas { padding-left: 28px; padding-right: 28px; scroll-padding-inline: 28px; } }
.osa-pas::-webkit-scrollbar { display: none; }
.osa-pas li { flex: 0 0 214px; scroll-snap-align: start; position: relative; }
.osa-pas li::before {
  content: ""; position: absolute; top: -20px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--zem); border: 2px solid var(--cervena);
}
.osa-pas a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.osa-rok { font: 400 34px/1 var(--serif); font-variant-numeric: lining-nums; }
.osa-rok small { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tlumene); display: block; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osa-pas .nahled { border-radius: 10px; }
.osa-pas a:hover .nahled img { transform: scale(1.04); }
.osa-nazev { font-size: 14px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.osa-pas .brzy { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cervena); }
.osa-ovl { justify-content: space-between; }

/* pata */
.pata {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px;
  color: var(--tlumene); font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
}
@media (min-width: 960px) { .pata { padding: 24px 32px 48px; } }
.pata p { margin: 0; }
.pravni { display: flex; gap: 18px; flex-wrap: wrap; }
.pravni a { color: var(--tlumene); text-decoration: none; }
.pravni a:hover { color: var(--text); text-decoration: underline; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 10;
  background: var(--text); color: var(--zem); font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.videt { opacity: 1; transform: translate(-50%, 0); }

/* nástup */
.plocha > * { animation: nastup .6s cubic-bezier(.2, .7, .2, 1) both; }
.plocha > *:nth-child(2) { animation-delay: .06s; }
.plocha > *:nth-child(3) { animation-delay: .12s; }
.plocha > *:nth-child(4) { animation-delay: .18s; }
.plocha > *:nth-child(5) { animation-delay: .24s; }
@keyframes nastup { from { opacity: 0; transform: translateY(14px); } }

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