/* app.css — Top Guns 2026 · barvy ANTEE podle logomanuálu 2001 (bordó #8F1E16, tmavě šedá #3C3C3B) */
:root {
  --bordo: #8F1E16; --bordo-tmava: #6E1610; --bordo-svetla: #B8342A;
  --seda: #3C3C3B; --seda-tmava: #262625; --seda-svetla: #6B6B69;
  --krem: #F7F3EF; --bila: #FFFFFF; --zlata: #C9A227; --zelena: #2E7D4F;
  --text: #262625; --text-tlumeny: #5D5D5B;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 14px; --stin: 0 10px 30px rgba(38, 38, 37, .12);
  --lista: 64px;
}
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/fonts/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/fonts/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--font); font-size: clamp(1rem, .35vw + .9rem, 1.2rem); line-height: 1.55; color: var(--text); background: var(--krem); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; }
h3 { font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--zlata); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
kbd { font: inherit; font-size: .85em; padding: .05em .45em; border: 1px solid currentColor; border-radius: 6px; opacity: .85; }

/* lišta */
.lista { position: sticky; top: 0; z-index: 50; height: var(--lista); display: flex; align-items: center; gap: 1rem; padding: 0 1rem; background: var(--bordo); color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.lista__logo img { height: 42px; width: auto; }
.lista__nazev { display: flex; flex-direction: column; line-height: 1.15; }
.lista__nazev strong { font-weight: 800; letter-spacing: .02em; }
.lista__nazev span { font-size: .78rem; opacity: .85; }
.lista__ted { flex: 1; text-align: center; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista__dalsi { opacity: .8; }
.lista__akce { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.lista__hodiny { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; margin-right: .25rem; }
.ikona { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; text-decoration: none; cursor: pointer; font-size: 1.1rem; }
.ikona:hover { background: rgba(255,255,255,.12); }
@media (max-width: 760px) { .lista__ted, .lista__nazev span { display: none; } }

/* obrazovky */
html.js .obrazovka { display: none; }
html.js .obrazovka.je-videt { display: block; animation: vjezd .35s ease-out; }
@keyframes vjezd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.obrazovka { min-height: calc(100vh - var(--lista)); padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) 5rem; position: relative; }
.obrazovka--bordo { background: var(--bordo); color: #fff; }
.obrazovka--tmava { background: var(--seda-tmava); color: #fff; }
.kontejner { max-width: 1180px; margin: 0 auto; }
.kontejner--uzky { max-width: 900px; }
.nadtitulek { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; opacity: .8; margin-bottom: .8rem; }
.velky { font-size: clamp(1.9rem, 3.6vw + .6rem, 3.6rem); font-weight: 800; max-width: 20ch; }
.velky--tmavy { color: var(--seda-tmava); }
.perex-velky { font-size: clamp(1.1rem, 1vw + .9rem, 1.5rem); max-width: 46rem; opacity: .95; }
.perex-velky--tmavy { color: var(--text-tlumeny); }
.zdroj { margin-top: 3rem; font-size: .8rem; opacity: .7; }
.poznamka { font-size: 1.05rem; opacity: .9; max-width: 46rem; }
.poznamka-tmava { color: var(--text-tlumeny); max-width: 52rem; margin-top: 1rem; }
.doplnit { background: #FFF3CD; color: #7A5C00; padding: 0 .3em; border-radius: 4px; }
.sekce { margin-top: 2.5rem; color: var(--bordo); }

/* mapa */
.obrazovka--mapa { background: radial-gradient(1200px 600px at 85% -10%, rgba(143,30,22,.10), transparent 60%), var(--krem); }
.mapa__hlava { max-width: 1180px; margin: 0 auto 2rem; }
.mapa__hlava h1 { font-size: clamp(2.6rem, 6vw + .5rem, 5.5rem); font-weight: 800; color: var(--bordo); letter-spacing: -.01em; margin-bottom: .3em; }
.mapa__podtitulek { font-size: clamp(1.05rem, .8vw + .9rem, 1.35rem); color: var(--text-tlumeny); max-width: 52rem; }
.mapa__podtitulek em { font-style: normal; color: var(--bordo); font-weight: 600; }
.mapa { list-style: none; padding: 0; margin: 0 auto; max-width: 1180px; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); counter-reset: none; }
.dlazdice { position: relative; display: flex; flex-direction: column; gap: .4rem; height: 100%; min-height: 190px; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--r); background: #fff; color: var(--seda-tmava); text-decoration: none; box-shadow: var(--stin); border-top: 6px solid var(--seda); transition: transform .2s ease-out, box-shadow .2s; overflow: hidden; }
.dlazdice:hover, .dlazdice:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(38,38,37,.18); }
.dlazdice__cislo { font-weight: 800; font-size: .9rem; color: var(--bordo); letter-spacing: .1em; }
.dlazdice__ikona { position: absolute; right: 1rem; top: .6rem; font-size: 3rem; line-height: 1; color: rgba(143,30,22,.12); font-weight: 800; }
.dlazdice__nazev { font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.dlazdice__popis { font-size: .92rem; color: var(--text-tlumeny); margin-top: auto; }
.dlazdice--hlavni { background: var(--bordo); color: #fff; border-top-color: var(--bordo-tmava); }
.dlazdice--hlavni .dlazdice__cislo, .dlazdice--hlavni .dlazdice__popis { color: rgba(255,255,255,.85); }
.dlazdice--hlavni .dlazdice__ikona { color: rgba(255,255,255,.18); }
@media (min-width: 900px) { .mapa li:first-child { grid-column: span 2; } .dlazdice--hlavni .dlazdice__nazev { font-size: 2rem; } }
.dlazdice--akce { border-top-color: var(--bordo); }
.dlazdice--vecer { background: var(--seda-tmava); color: #fff; border-top-color: var(--zlata); }
.dlazdice--vecer .dlazdice__popis, .dlazdice--vecer .dlazdice__cislo { color: rgba(255,255,255,.8); }
.dlazdice--vecer .dlazdice__ikona { color: rgba(255,255,255,.12); }
.mapa__napoveda { max-width: 1180px; margin: 2rem auto 0; font-size: .85rem; color: var(--text-tlumeny); }

/* kroky */
html.js [data-kroky] .krok:not(.je-odkryty) { display: none; }
html.js .krok.je-odkryty { animation: vjezd .45s ease-out; }
.dalsi-krok, .vse-kroky { position: fixed; z-index: 40; bottom: 1.2rem; border-radius: 999px; cursor: pointer; font-weight: 700; }
.dalsi-krok { right: 1.2rem; padding: .8rem 1.6rem; border: 0; background: #fff; color: var(--bordo); box-shadow: var(--stin); font-size: 1.05rem; }
.vse-kroky { right: 10rem; padding: .7rem 1.1rem; border: 1px solid currentColor; background: transparent; color: inherit; opacity: .75; font-size: .85rem; }
#logo .dalsi-krok { background: var(--bordo); color: #fff; }
html.js .obrazovka:not(.je-videt) .dalsi-krok, html.js .obrazovka:not(.je-videt) .vse-kroky { display: none; }
@media (max-width: 600px) { .vse-kroky { display: none; } }

/* 01 poselství */
.kruh { display: grid; gap: .8rem; margin: 2rem 0 1rem; max-width: 900px; }
.kruh__vrstva { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.4rem; border-radius: var(--r); background: rgba(255,255,255,.08); border-left: 6px solid rgba(255,255,255,.35); }
.kruh__vrstva b { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.kruh__vrstva p { margin: 0; }
.kruh__vrstva--proc { background: #fff; color: var(--bordo); border-left-color: var(--zlata); }
.kruh__vrstva--proc p { color: var(--seda-tmava); font-weight: 600; }
.slib { margin: 3rem 0 1rem; max-width: 46rem; }
.slib__nadpis { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; opacity: .8; margin: 0; }
.slib__slovo { font-size: clamp(5rem, 16vw, 12rem); font-weight: 800; line-height: .9; margin: 0 0 .2em; letter-spacing: -.03em; }
.archetyp { margin: 3rem 0; padding: 2rem; border-radius: var(--r); background: var(--bordo-tmava); max-width: 900px; }
.archetyp__veta { font-size: clamp(1.6rem, 2.5vw + .8rem, 2.6rem); font-weight: 800; line-height: 1.15; }
.pilire { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 2rem 0; }
.pilir { padding: 1.4rem; border-radius: var(--r); background: #fff; color: var(--seda-tmava); }
.pilir b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--bordo); margin-bottom: .4rem; }
.pilir q { display: block; margin-top: .8rem; font-weight: 600; font-style: italic; color: var(--seda); quotes: "„" "“"; }
.cisla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin: 2.5rem 0; }
.cislo { padding: 1.2rem; border-top: 3px solid rgba(255,255,255,.5); }
.cislo__hodnota { display: block; font-size: clamp(2rem, 3vw + .8rem, 3.2rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cislo span:last-child { opacity: .85; }
.nejsme ul { padding-left: 1.2em; }
.veta-jedna { font-size: 1.25rem; max-width: 46rem; margin-top: 1.5rem; padding: 1.2rem 1.4rem; border-left: 6px solid var(--zlata); background: rgba(0,0,0,.15); border-radius: 0 var(--r) var(--r) 0; }

/* 02 logo */
.dva-sloupce { display: grid; gap: 2rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; margin: 2.5rem 0; }
@media (max-width: 800px) { .dva-sloupce { grid-template-columns: 1fr; } }
.stare-logo { margin: 0; background: #fff; padding: 1.5rem; border-radius: var(--r); box-shadow: var(--stin); }
.stare-logo figcaption { font-size: .85rem; color: var(--text-tlumeny); margin-top: .6rem; }
.seznam-carky { padding-left: 1.1em; } .seznam-carky li { margin-bottom: .45em; }
.seznam-cisla { padding-left: 1.3em; } .seznam-cisla li { margin-bottom: .3em; }
.zachovat { margin-top: 1.2rem; padding: .9rem 1.1rem; background: var(--bordo); color: #fff; border-radius: var(--r); }
.osa { list-style: none; padding: 0; margin: 1rem 0 2.5rem; border-left: 3px solid var(--bordo); }
.osa li { position: relative; padding: .45rem 0 .45rem 1.4rem; }
.osa li::before { content: ""; position: absolute; left: -9px; top: .9rem; width: 15px; height: 15px; border-radius: 50%; background: var(--krem); border: 3px solid var(--bordo); }
.osa span { display: inline-block; min-width: 10.5rem; font-weight: 700; color: var(--bordo); }
.osa__ted { font-weight: 600; } .osa__ted::before { background: var(--bordo) !important; }
.navrhy { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin: 1rem 0 2.5rem; }
.navrh { margin: 0; background: #fff; border-radius: var(--r); box-shadow: var(--stin); overflow: hidden; display: flex; flex-direction: column; }
.navrh img { width: 100%; height: 190px; object-fit: contain; padding: 1rem; background: #fff; }
.navrh--synteza img { height: 95px; padding: .5rem 1rem; }
.navrh figcaption { padding: .9rem 1.1rem 1.1rem; font-size: .92rem; border-top: 1px solid #eee; display: grid; gap: .25rem; }
.plus { color: var(--zelena); } .minus { color: var(--bordo); }
.pouceni { margin: 2rem 0; padding: 2rem; border-radius: var(--r); background: var(--seda-tmava); color: #fff; }
.pouceni__hlavni { font-size: clamp(1.4rem, 2vw + .8rem, 2.2rem); font-weight: 800; line-height: 1.2; }
.pouceni__hlavni em { font-style: normal; color: #F2B8B2; }
.zadani { margin: 2.5rem 0; }
.zadani__veta { font-size: 1.25rem; max-width: 52rem; }
.tri { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.zadani .tri > div { background: #fff; border-radius: var(--r); padding: 1.3rem; box-shadow: var(--stin); }
.zadani h4 { color: var(--bordo); }
.hlasovani { margin: 2.5rem 0; padding: 2rem; border-radius: var(--r); background: #fff; box-shadow: var(--stin); }
.hlasovani__seznam { display: grid; gap: .5rem; margin: 1rem 0; }
.hlas { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr 3rem; gap: 1rem; align-items: center; padding: .6rem .8rem; border: 1px solid #e3dcd6; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.hlas:hover { border-color: var(--bordo); }
.hlas__pruh { height: 14px; background: #f0e9e3; border-radius: 999px; overflow: hidden; }
.hlas__pruh i { display: block; height: 100%; background: var(--bordo); border-radius: 999px; transition: width .3s ease-out; }
.hlas__pocet { font-weight: 800; font-size: 1.3rem; text-align: right; color: var(--bordo); }
@media (max-width: 600px) { .hlas { grid-template-columns: 1fr 2.5rem; } .hlas__pruh { grid-column: 1 / -1; grid-row: 2; } }

/* tlačítka a přepínače */
.tlacitko { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1.3rem; border-radius: 12px; border: 2px solid var(--bordo); background: var(--bordo); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .15s; }
.tlacitko:hover { transform: translateY(-1px); background: var(--bordo-svetla); border-color: var(--bordo-svetla); }
.tlacitko--velke { min-height: 60px; padding: .8rem 2rem; font-size: 1.15rem; }
.tlacitko--obrys { background: transparent; color: var(--bordo); }
.tlacitko--obrys:hover { background: var(--bordo); color: #fff; }
.tlacitko--obrys-svetle { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.tlacitko--obrys-svetle:hover { background: #fff; color: var(--bordo); border-color: #fff; }
.tlacitko--bile { background: #fff; color: var(--bordo); border-color: #fff; }
.tlacitko--bile:hover { background: var(--krem); color: var(--bordo); border-color: var(--krem); }
.tlacitko--text { background: transparent; border-color: transparent; color: inherit; text-decoration: underline; font-weight: 600; }
.tlacitko--text:hover { background: transparent; border-color: transparent; opacity: .8; }
.prepinac { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.prepinac button { padding: .6rem 1.1rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.prepinac button[aria-selected="true"] { background: #fff; color: var(--bordo); border-color: #fff; }

/* 03 losování */
.los__info { opacity: .8; }
.los__sloupce { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }
.los__sloupce ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.los__sloupce li { padding: .55rem 1.4rem; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 600; font-size: 1.15rem; text-align: center; min-width: 9rem; }
.los__vs { font-size: 3rem; font-weight: 800; color: var(--bordo-svetla); }
.los__poradi { list-style: none; padding: 0; margin: 2rem 0 .5rem; display: grid; gap: .8rem; }
.tym { display: grid; grid-template-columns: 3rem 10rem 1fr; gap: 1rem; align-items: center; padding: 1rem 1.4rem; border-radius: var(--r); background: rgba(255,255,255,.07); border-left: 6px solid var(--bordo-svetla); transition: opacity .4s, transform .4s; }
.tym--skryty { opacity: 0; transform: translateX(-20px); }
.tym__poradi { font-size: 2rem; font-weight: 800; color: var(--zlata); }
.tym__nazev { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #F2B8B2; }
.tym__clenove { font-size: clamp(1.3rem, 1.5vw + .9rem, 2rem); font-weight: 700; }
.tym__clenove i { font-style: normal; opacity: .5; margin: 0 .5rem; }
.tym__clenove .je-dopadle { animation: dopad .35s ease-out; display: inline-block; }
@keyframes dopad { 0% { transform: scale(1.4); color: var(--zlata); } 100% { transform: none; } }
@media (max-width: 700px) { .tym { grid-template-columns: 2.5rem 1fr; } .tym__clenove { grid-column: 1 / -1; } }
.los__pozn { opacity: .7; font-size: .9rem; }
.los__akce { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.los__uprava { margin-top: 1.5rem; padding: 1.4rem; border-radius: var(--r); background: rgba(255,255,255,.07); }
.dva-pole { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 1rem; }
.dva-pole label { display: grid; gap: .4rem; font-size: .9rem; }
textarea, input[type=text], select { font: inherit; padding: .6rem .8rem; border-radius: 10px; border: 1px solid #cfc6bf; width: 100%; background: #fff; color: var(--text); }

/* 04 harmonogram */
.har__misto { color: var(--text-tlumeny); }
.har__cast { margin: 2rem 0 .6rem; color: var(--bordo); }
.har__blok { display: grid; grid-template-columns: 4.2rem 1fr minmax(0, 9rem); gap: 1rem; padding: .75rem .9rem; border-radius: 10px; border-bottom: 1px solid #e6dfd9; align-items: start; }
.har__cas { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--seda); }
.har__kdo { text-align: right; font-size: .88rem; color: var(--text-tlumeny); font-weight: 600; }
.har__odkaz { font-size: .85rem; font-weight: 600; color: var(--bordo); white-space: nowrap; }
.har__blok.je-hotovo { opacity: .45; }
.har__blok.je-ted { background: var(--bordo); color: #fff; border-color: transparent; box-shadow: var(--stin); }
.har__blok.je-ted .har__cas, .har__blok.je-ted .har__kdo, .har__blok.je-ted .har__odkaz { color: #fff; }
.har__pruh { display: block; height: 6px; margin-top: .5rem; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.har__pruh i { display: block; height: 100%; background: var(--zlata); }
@media (max-width: 600px) { .har__blok { grid-template-columns: 3.6rem 1fr; } .har__kdo { grid-column: 2; text-align: left; } }

/* 05 bodování */
.body__info { opacity: .85; max-width: 52rem; }
.body { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .body { grid-template-columns: 1fr; } }
.body__blok { display: grid; gap: .4rem; margin-bottom: 1rem; font-size: .9rem; max-width: 22rem; }
.body__tymy { display: grid; gap: .6rem; }
.body__tym { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(255,255,255,.07); }
.body__nazev b { color: #F2B8B2; text-transform: uppercase; letter-spacing: .05em; margin-right: .4rem; }
.body__tlacitka { display: flex; gap: .4rem; }
.body__tlacitka button { min-width: 3.2rem; min-height: 44px; border-radius: 10px; border: 0; background: #fff; color: var(--bordo); font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: transform .15s; }
.body__tlacitka button:hover { background: var(--zlata); }
.body__tlacitka button.je-kliknuto { transform: scale(1.2); background: var(--zlata); }
.body__prazdne a { color: #F2B8B2; }
.body__poradi { padding: 1.5rem; border-radius: var(--r); background: rgba(255,255,255,.06); }
.poradi { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .3rem; }
.poradi li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .6rem; padding: .45rem .3rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.poradi li:nth-child(-n+3) .poradi__misto { color: var(--zlata); }
.poradi__misto { font-weight: 800; } .poradi__jmeno { font-weight: 600; } .poradi__body { font-variant-numeric: tabular-nums; }
.vyhlaseni { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; align-content: center; gap: 2rem; background: radial-gradient(circle at 50% 40%, var(--bordo-svetla), var(--bordo) 45%, var(--bordo-tmava)); color: #fff; text-align: center; overflow: hidden; }
.vyhlaseni[hidden] { display: none; }
.vyhlaseni__obsah { opacity: 0; transform: scale(.85); }
.vyhlaseni__obsah.je-videt { animation: odhal .7s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes odhal { to { opacity: 1; transform: none; } }
.vyhlaseni__misto { font-size: clamp(1.4rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: .2em; color: var(--zlata); font-weight: 700; margin: 0; }
.vyhlaseni__jmeno { font-size: clamp(3.5rem, 12vw, 9rem); font-weight: 800; line-height: 1; margin: .1em 0; }
.vyhlaseni__jmeno--vic { font-size: clamp(2.2rem, 6vw, 5rem); max-width: 90vw; }
.vyhlaseni__body { font-size: clamp(1.4rem, 3vw, 2.2rem); opacity: .9; }
.konfeta { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: pad 3s linear forwards; }
@keyframes pad { to { transform: translateY(110vh) rotate(720deg); } }

/* 06 podklady */
.karty { margin-top: 1rem; }
.karta { background: #fff; border-radius: var(--r); padding: 1.4rem; box-shadow: var(--stin); border-top: 5px solid var(--seda-svetla); }
.karta--hlavni { border-top-color: var(--bordo); }
.karta h4 { font-size: 1.25rem; color: var(--bordo); margin-bottom: .3rem; }
.karta dl { display: grid; grid-template-columns: 6rem 1fr; gap: .3rem .8rem; font-size: .92rem; margin: 1rem 0 0; }
.karta dt { font-weight: 700; color: var(--seda); } .karta dd { margin: 0; }
.stitek { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--krem); color: var(--bordo); padding: .15rem .6rem; border-radius: 999px; margin-bottom: .6rem; }
.persona__kdo { color: var(--text-tlumeny); font-size: .9rem; }
.persona blockquote { margin: .8rem 0; padding-left: 1rem; border-left: 4px solid var(--bordo); font-style: italic; }
.persona p { font-size: .92rem; }
.sdeleni { font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem); font-weight: 800; color: var(--seda-tmava); max-width: 50rem; }
.sdeleni span { display: block; font-size: .55em; color: var(--bordo); margin-top: .4rem; }
.ctyri { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ctyri > div { background: #fff; border-radius: var(--r); padding: 1.2rem; box-shadow: var(--stin); }
.ctyri b { color: var(--bordo); }
.ctyri p { font-size: .92rem; margin: .4rem 0 0; }
.tonalita { display: grid; gap: .6rem; }
.tonalita__radek { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tonalita__radek span { padding: .9rem 1rem; border-radius: 12px; font-size: .95rem; }
.tonalita .ano { background: #E7F2EA; border-left: 5px solid var(--zelena); }
.tonalita .ano::before { content: "Takhle: "; font-weight: 700; color: var(--zelena); }
.tonalita .ne { background: #F8E8E6; border-left: 5px solid var(--bordo); text-decoration: line-through; text-decoration-color: rgba(143,30,22,.4); }
.tonalita .ne::before { content: "Ne: "; font-weight: 700; color: var(--bordo); text-decoration: none; display: inline-block; }
@media (max-width: 700px) { .tonalita__radek { grid-template-columns: 1fr; } }
.zdroj--tmavy { color: var(--text-tlumeny); }

/* 07 stopky */
.stopky { text-align: center; display: grid; justify-items: center; }
.stopky__nazev { font-size: clamp(1.6rem, 3vw + .5rem, 3rem); font-weight: 800; margin-bottom: .2rem; }
.stopky__tym { min-height: 1.6em; font-size: 1.3rem; color: #F2B8B2; font-weight: 700; }
.stopky__cas { font-size: clamp(6rem, 24vw, 18rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin: .1em 0; }
.stopky__cas.je-konec { color: var(--zlata); animation: tep 1s ease-in-out infinite; }
@keyframes tep { 50% { opacity: .55; } }
.stopky__pruh { width: min(100%, 900px); height: 12px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; margin-bottom: 2rem; }
.stopky__pruh span { display: block; height: 100%; background: #fff; transition: width .2s linear; }
.stopky__predvolby, .stopky__ovladani { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1rem; }

/* 08 parkoviště */
.parkoviste__form { display: grid; grid-template-columns: 1fr minmax(0, 14rem) auto; gap: .6rem; margin: 2rem 0 1.5rem; }
@media (max-width: 700px) { .parkoviste__form { grid-template-columns: 1fr; } }
.parkoviste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: p; }
.parkoviste li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: #fff; border-radius: 12px; box-shadow: var(--stin); border-left: 6px solid var(--bordo); font-size: 1.1rem; }
.parkoviste li.je-hotovo { opacity: .5; border-left-color: var(--zelena); }
.parkoviste li.je-hotovo span { text-decoration: line-through; }
.parkoviste label { display: flex; gap: .7rem; align-items: baseline; cursor: pointer; }
.parkoviste input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--bordo); }
.parkoviste em { color: var(--text-tlumeny); font-size: .9rem; }
.parkoviste__prazdne { justify-content: center !important; border-left-color: #ddd !important; color: var(--text-tlumeny); }
.smazat { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--seda-svetla); cursor: pointer; }

/* 09 kvíz */
.kviz__panel { min-height: 50vh; display: grid; align-content: center; }
.kviz__cislo { color: var(--zlata); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kviz__otazka { font-size: clamp(1.8rem, 3vw + .6rem, 3.4rem); font-weight: 800; line-height: 1.15; max-width: 26ch; }
.kviz__moznosti { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 1.5rem 0 0; list-style: none; counter-reset: m; }
.kviz__moznosti li { counter-increment: m; padding: 1.1rem 1.4rem; border-radius: var(--r); background: rgba(255,255,255,.08); font-size: clamp(1.1rem, 1vw + .9rem, 1.6rem); font-weight: 600; transition: background .3s, opacity .3s; }
.kviz__moznosti li::before { content: counter(m, upper-alpha); display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-right: .8rem; border-radius: 50%; background: var(--bordo); font-weight: 800; }
.kviz__moznosti li.je-spravne { background: var(--zelena); }
.kviz__moznosti li.je-spatne { opacity: .35; }
.kviz__zdroj { margin-top: 1rem; opacity: .7; font-size: .9rem; }
.kviz__jmena { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.kviz__jmena li { padding: .6rem 1.2rem; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 700; font-size: 1.2rem; }
.kviz__ovladani { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.kviz__uprava { margin-top: 2rem; padding: 1.2rem; border-radius: var(--r); background: rgba(255,255,255,.06); }
.kviz__uprava summary { cursor: pointer; font-weight: 700; }
.kviz__uprava textarea { margin: .6rem 0; }

.pata { padding: 1.2rem; text-align: center; font-size: .8rem; color: var(--text-tlumeny); }
html.js .obrazovka.je-videt ~ .pata { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .lista, .dalsi-krok, .vse-kroky, .pata { display: none; } html.js .obrazovka { display: block !important; } html.js [data-kroky] .krok { display: block !important; } }
@media (max-width: 700px) { .kviz__moznosti { grid-template-columns: 1fr; } }