/* =========================================================================
   Egoia — veřejný web
   Tmavý editorial styl: papír je světlý, obrazovka tmavá, aby se to nepletlo.
   Světlý režim je od 28. 8. 2026 alternativa, ne rovnocenná varianta — tmavá
   zůstává tím, jak produkt vypadá, když si člověk nic nezvolí.
   ========================================================================= */

/* Tvar, písmo a časování jsou pro obě schémata stejné — mění se jen barvy.
   Proto jsou tady, mimo blok schématu: kdyby byly uvnitř, musely by se
   v každém režimu opakovat a při první úpravě by se rozešly. */
:root{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap: 940px;

  /* Zaoblení má tři stupně, ať se to nedrolí po jednotlivých pravidlech:
     --r drobné ovládací prvky, --r-card plochy a panely, --r-pill tlačítka.
     Karty sad (.deck) mají vlastní 8 px a do téhle škály nespadají. */
  --r: 10px;
  --r-card: 20px;
  --r-pill: 999px;

  --ease-soft: cubic-bezier(.34,1.3,.64,1);
  --playful-blue: #7fa3c9;
}

/* ---------- tmavé schéma (výchozí) ---------- */
:root,
[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0f0f13;
  --bg-soft:   #15151b;
  --bg-card:   #17171e;
  --line:      #26262f;
  --line-soft: #1e1e26;

  --tx:   #ece9df;
  --tx-2: #a49e90;
  --tx-3: #8b857b;
  /* odstín odstavcového textu — dřív napsaný napřímo jako #cec9bc */
  --tx-body: #cec9bc;

  --acc:      #c9a24a;
  --acc-soft: #dab558;
  --acc-2:    #e08a4f;   /* oranžová pro nadočka a drobné akcenty */
  --acc-2-dim:#8a5836;
  --ok:       #7fae8e;
  --warn:     #c98a72;

  /* text na zlaté ploše (tlačítko, skip-link) — ve světlém režimu se nemění
     na bílou, zlatá je světlá barva a bílý text by na ní zmizel */
  --on-acc: #15130c;

  /* zlatá v průsvitných výplních a rámečcích; jako složky, aby šlo psát
     rgb(var(--acc-rgb) / .13) místo natvrdo rozepsané rgba() */
  --acc-rgb: 201 162 74;
  --acc-2-rgb: 224 138 79;
  /* podklad lišty a překryv videa — v obou schématech barva plochy stránky */
  --bg-rgb: 15 15 19;

  /* jediný povolený stín, jen na hover — ne na klidový stav */
  --lift: 0 6px 20px rgba(0,0,0,.35);
}

/* ---------- světlé schéma ----------
   Není to tmavé převrácené. Plocha je teplý papír, ne bílá: čistě bílé pozadí
   pod patkovými nadpisy a zlatou vypadá jako nedodělaný wireframe, kdežto
   produkt je karton. Zlatá musela ztmavnout (#c9a24a má na světlém podkladu
   kontrast 2,1:1), oranžová taky — obě si drží roli, jen jiný odstín. */
[data-theme="light"]{
  color-scheme: light;

  --bg:        #f7f4ec;
  --bg-soft:   #f1ede2;
  --bg-card:   #fbf9f3;
  --line:      #ddd6c5;
  --line-soft: #e8e2d5;

  --tx:   #1c1b18;
  --tx-2: #57534a;
  --tx-3: #6e685c;
  --tx-body: #3a3830;

  --acc:      #8a6a1c;
  --acc-soft: #6f5414;
  --acc-2:    #a4551f;
  --acc-2-dim:#c08a5c;
  --ok:       #3f6b4e;
  --warn:     #9a4a2c;

  --on-acc: #fdfbf4;

  --acc-rgb: 138 106 28;
  --acc-2-rgb: 164 85 31;
  --bg-rgb: 247 244 236;

  --lift: 0 6px 20px rgba(60,50,25,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* jemné zrno, aby plocha nebyla plochá.
   Zrno je světlý šum: na tmavé ploše přisvětluje, na světlé by ji vybělil do
   mléčna. Ve světlém režimu se proto překlápí na násobení, aby stejná textura
   naopak tónovala — a slabší, papír je jemnější než tma. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::before{opacity:.05;mix-blend-mode:multiply}
main,header,footer{position:relative;z-index:2}

a{color:var(--tx);text-decoration:none}
a:hover{color:var(--acc)}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(34px,5.4vw,56px);line-height:1.08;letter-spacing:-.022em}
h2{font-size:clamp(23px,3.6vw,33px);line-height:1.22;margin-bottom:14px}
h3{font-size:18px;line-height:1.35;margin-bottom:6px}
p{margin:0 0 16px;color:var(--tx-body)}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--tx)}
hr{border:none;border-top:1px solid var(--line);margin:40px 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:700px;margin:0 auto;padding:0 24px}
section{padding:84px 0;border-bottom:1px solid var(--line-soft)}
section.tight{padding:56px 0}
section:last-of-type{border-bottom:none}

.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc-2);margin-bottom:18px}
.kicker::before{content:"";width:18px;height:2px;background:var(--acc-2);border-radius:2px;flex:0 0 auto}
.lede{font-size:clamp(15.5px,2vw,18px);color:var(--tx-2);max-width:600px}
.caption{font-size:13px;color:var(--tx-3);line-height:1.6}
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}

/* ---------- návrat z podstránky ----------
   Detail sady je slepá větev — bez viditelného návratu člověk neví, že někam
   odbočil. Kroužek se šipkou drží pozornost líp než podtržený řádek textu. */
.back .ico{
  display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;color:var(--tx-2);
  transition:border-color .16s,color .16s,transform .22s var(--ease-soft);
}
.back:hover{color:var(--tx)}
.back:hover .ico{border-color:var(--tx-3);color:var(--tx);transform:translateX(-3px)}
.back:focus-visible .ico{outline:2px solid var(--acc);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.back:hover .ico{transform:none}}

/* ---------- tlačítka ---------- */
.btn{
  display:inline-block;background:var(--acc);color:var(--on-acc);border:1px solid var(--acc);
  padding:13px 30px;border-radius:var(--r-pill);font:600 14px/1.2 var(--sans);
  letter-spacing:.02em;cursor:pointer;transition:background .16s,transform .2s var(--ease-soft),border-color .16s;
}
.btn:hover{background:var(--acc-soft);border-color:var(--acc-soft);color:var(--on-acc);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:none;color:var(--tx);border-color:var(--line)}
.btn.ghost:hover{background:none;color:var(--tx);border-color:var(--tx-3)}
.btn.sm{padding:9px 18px;font-size:12.5px}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- horní lišta ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgb(var(--bg-rgb) / .92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.bar .nm{font-family:var(--serif);font-size:16px;letter-spacing:.04em}
.bar .nm span{color:var(--tx-3);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans);margin-left:10px}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13.5px}
.bar nav a:not(.btn){color:var(--tx-2)}
.bar nav a:not(.btn):hover{color:var(--tx)}
@media(max-width:720px){.bar .nm span,.bar nav a:not(.btn){display:none}}

/* počet kusů v topbaru — jediné trvale viditelné místo, kde je vidět,
   že už je něco vybrané; odkaz sám vede na #order */
.bar-order{position:relative}
.bar-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:8px;padding:0 5px;border-radius:9px;background:rgba(0,0,0,.28);font-family:var(--mono);font-size:11px;line-height:1;font-variant-numeric:tabular-nums}
.bar-count[hidden]{display:none}
.bar-order.pulse{animation:barpulse .45s ease}
@keyframes barpulse{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-1px) scale(1.07)}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.bar-order.pulse{animation:none}}

/* ---------- hero ---------- */
.hero{padding-top:78px;padding-bottom:70px}
.hero h1{margin-bottom:24px;font-weight:500;text-wrap:balance}

/* velký nadpis jen na úvodní stránce — na detailu sady nebo v podmínkách
   by 84 px křičelo, tam zůstává běžná velikost */
.hero.xl h1{font-size:clamp(42px,7.6vw,71px);line-height:1.02;letter-spacing:-.032em;margin-bottom:30px}
.hero.xl .lede{font-size:clamp(16px,2.2vw,19px);max-width:620px}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{margin-bottom:34px}

/* hero jako dva sloupce: text vlevo, video vpravo.
   Video je ilustrace, ne ovládací prvek — proto autoplay, muted, loop a bez
   ovládacích prvků prohlížeče. Jediné tlačítko je pauza, aby šel pohyb vypnout. */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero-text{position:relative;padding-top:70px}
.hero-text .lede{margin-bottom:0}

/* Drobné značky fungují jako papírové samolepky: přidají lehkost, ale
   nezasahují do obsahu ani navigace. */
.hero-sparkles{position:absolute;right:7%;top:8px;width:88px;height:52px;pointer-events:none}
.hero-sparkles i{position:absolute;display:block;border:2px solid var(--acc);border-radius:50%;opacity:.78}
.hero-sparkles i:nth-child(1){width:12px;height:12px;left:7px;top:22px;background:rgb(var(--acc-rgb) / .16)}
.hero-sparkles i:nth-child(2){width:20px;height:20px;left:36px;top:1px;border-color:var(--acc-2);transform:rotate(18deg);border-radius:7px}
.hero-sparkles i:nth-child(3){width:9px;height:9px;right:5px;bottom:2px;border-color:var(--playful-blue);background:var(--playful-blue)}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:1%;right:-3%;bottom:-6px;height:7px;
  background:rgb(var(--acc-rgb) / .22);border-radius:60% 40% 55% 45%;transform:rotate(-1.5deg);z-index:-1}

.hero-film{margin:0;position:relative;transform:rotate(1.1deg)}
.hero-film video{
  /* zdroj je 911 × 480 (nečtvercové pixely), 16/10 ořezává nejmíň */
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);
}
/* teplý nádech přes video, aby sedělo k papírové paletě a nesvítilo ze stránky */
.hero-film::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-card);pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .10),rgb(var(--bg-rgb) / .34));
  mix-blend-mode:multiply;
}
.hero-film figcaption{
  margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);
  transform:rotate(-1.1deg);
}

.film-toggle{
  position:absolute;right:12px;top:12px;z-index:2;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgb(var(--bg-rgb) / .62);border:1px solid var(--line);border-radius:50%;
  color:var(--tx-2);cursor:pointer;opacity:0;transition:opacity .18s,color .18s,border-color .18s;
}
.hero-film:hover .film-toggle,.film-toggle:focus-visible{opacity:1}
.film-toggle:hover{color:var(--tx);border-color:var(--tx-3)}
.film-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ico-pause{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.film-toggle.paused .ico-pause{
  width:0;height:0;border:none;
  border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;
  margin-left:2px;
}

/* pod 900 px se sloupce nevejdou vedle sebe; video jde nad text, protože
   na mobilu je první dojem obrázek, ne odstavec */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-film{order:-1}
  .hero-text{padding-top:64px}
  .hero-sparkles{right:0;top:5px}
  .film-toggle{opacity:1}
  /* přes celou šířku by 16/10 sebralo půl obrazovky dřív, než se dojde
     k nadpisu — proto je nad textem pás, ne obraz */
  .hero-film video{aspect-ratio:auto;height:min(46vw,260px)}
}
@media(prefers-reduced-motion:reduce){.hero-film video{display:none}}

.demo{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;
  transition:border-color .18s,box-shadow .22s}
.demo:hover{border-color:var(--tx-3);box-shadow:var(--lift)}
.demo .hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:22px}

/* osa s jezdcem */
.axis{margin-bottom:26px}
.axis:last-child{margin-bottom:0}
.axis .labels{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;color:var(--tx-3);margin-bottom:10px}
.track{position:relative;height:1px;background:var(--line);margin:9px 0}
.track .mid{position:absolute;left:50%;top:-4px;width:1px;height:9px;background:var(--line)}
.knob{
  position:absolute;top:50%;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--tx-2);transform:translate(-50%,-50%);
  transition:left .5s cubic-bezier(.4,0,.2,1),border-color .2s,background .2s;
}
.knob.on{background:var(--acc);border-color:var(--acc)}
.axis.live .track{cursor:pointer;height:1px}
.axis.live .track::after{content:"";position:absolute;inset:-11px 0;}

/* ---------- kroky ---------- */
/* Dřív to byly čtyři pole slepené 1px mřížkou v jednom rámečku. Zaoblení
   se s tím pralo, tak jsou z toho samostatné dlaždice s mezerou. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.steps .step{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 20px;transition:border-color .18s}
.steps .step:hover{border-color:var(--tx-3)}
/* Číslice je jen tichý ukazatel pořadí: bez kroužku, bez barvy na každou dlaždici jinak.
   Barevné bubliny a rotace na hover dělaly z postupu pravidla stolní hry (5. 9. 2026). */
.steps .n{font-family:var(--serif);font-size:15px;color:var(--tx-3);margin-bottom:14px;line-height:1;letter-spacing:.04em}
.steps .n::after{content:"";display:inline-block;width:22px;height:1px;background:var(--line);vertical-align:middle;margin-left:10px}
.steps p{font-size:13.5px;color:var(--tx-2);margin:0}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}

/* ---------- filtr témat ---------- */
.filter{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;margin-top:36px}
.tgroup{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.tgroup:first-child{padding-top:0}
.tgroup:last-child,
.tgroup:has(+ .filter-foot){border-bottom:none;padding-bottom:0}
.tgroup > h3{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:9px}

.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 13px;
  font-size:13.5px;color:var(--tx-2);background:var(--bg);transition:all .15s;
}
.chip span::before{
  content:"";width:13px;height:13px;border:1px solid var(--tx-3);border-radius:5px;
  flex:0 0 auto;transition:all .15s;
}
.chip span:hover{border-color:var(--tx-3);color:var(--tx)}
.chip input:checked + span{border-color:var(--acc);color:var(--tx);background:rgb(var(--acc-rgb) / .09)}
.chip input:checked + span::before{
  background:var(--acc);border-color:var(--acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2315130c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}
.chip input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}

.filter-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.filter-foot .count{font-size:13px;color:var(--tx-2);margin-right:auto}
.filter-foot .count b{color:var(--acc)}
.linkbtn{background:none;border:none;color:var(--tx-3);font:inherit;font-size:13px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--tx)}

/* ---------- mřížka sad ---------- */
.section-block{margin-top:44px}
.section-block:first-of-type{margin-top:36px}
.section-title{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-size:11px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);margin:0 0 4px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* auto-fill, ne auto-fit: sekce s jedinou sadou nechá zbytek řady prázdný.
   auto-fit tu kartu roztáhl přes celou šířku a ta pak vypadala jako jiný,
   důležitější produkt — což byla nechtěná hierarchie, ne záměr. */
/* align-items:start je podmínka rozbalování: bez něj grid natáhne všechny karty
   v řadě na výšku té nejvyšší, takže rozbalení jedné sady vyrobí v sousedních
   kartách prázdné místo. Daň je, že karty s dvouřádkovým nadpisem jsou o řádek
   vyšší než ostatní — to je menší zlo. */
.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:18px;margin-top:20px;align-items:start}
@media(max-width:760px){.decks{grid-template-columns:1fr}}

.deck{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--line);border-radius:8px;
  padding:28px 26px 22px 30px;transition:border-color .18s,transform .18s;overflow:hidden;
}
/* barevná hrana podle sady — jediné, co odlišuje karty mezi sebou */
.deck::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc-line,var(--acc))}
.deck::after{content:"";position:absolute;left:0;top:0;right:0;height:110px;pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%,var(--acc-line,var(--acc)) 0%,transparent 70%);opacity:.07}
.deck:hover{border-color:var(--tx-3);transform:translateY(-3px) rotate(-.25deg)}
.deck:hover::after{opacity:.13}

/* .aud se na kartě ve výpisu už nepoužívá — cílovka se přesunula do .deck-meta pod
   nadpis. Pravidlo zůstává kvůli detailu sady, kde .aud pořád je. */
.deck .aud{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:13px}
.deck .aud::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--acc-line,var(--acc-2));flex:0 0 auto}
/* Nadpis přestal být odkaz 28. 8. 2026 — stránka sady zanikla, veškerý obsah
   je v rozbalení. */
.deck h3{font-size:23px;margin-bottom:5px}

/* Cílovka a cena na jednom řádku. Barevná tečka tu není schválně: barvu už nese
   svislý pruh u hrany karty a dva signály pro jednu informaci dělaly na kartě
   dvě rovnoběžné svislice. Počet otázek odsud odešel 5. 9. 2026 — viz komentář
   v _DeckCard.cshtml. */
.deck .deck-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  font-size:12px;color:var(--tx-3);margin-bottom:8px}
.deck .deck-meta .sep{color:var(--line)}

/* Témata karet místo počtu. Menší a světlejší než meta — je to obsah k přečtení,
   ne parametr k porovnání. */
.deck .deck-topics{font-size:12.5px;line-height:1.5;color:var(--tx-2);
  margin-bottom:15px}

/* ---------- sbalitelné tělo karty ----------
   Výšku obsahu nejde animovat přímo (auto není interpolovatelná hodnota), takže
   se animuje řádek mřížky z 0fr na 1fr. Vnitřní vrstva musí mít overflow:hidden
   a min-height:0, jinak se obsah z nulového řádku vyleje ven.

   Výchozí stav je ROZBALENO. Sbalení zapíná až site.js atributem
   data-collapsible — bez JavaScriptu tak zůstane celý obsah čitelný.
   data-anim se přidá až po prvním překreslení, aby se karty při načtení stránky
   nezavíraly animací. */
.deck-body{display:grid;grid-template-rows:1fr}
.deck-body-in{overflow:hidden;min-height:0}
.deck[data-collapsible] .deck-body{grid-template-rows:0fr}
.deck[data-collapsible][data-open] .deck-body{grid-template-rows:1fr}

/* Vlastní časování, ne --ease-soft: ten má mírný překmit, a překmit u výšky
   znamená, že se karta na okamžik roztáhne za obsah a nechá pod ním mezeru. */
.deck[data-anim] .deck-body{transition:grid-template-rows .34s cubic-bezier(.33,.1,.24,1)}
.deck[data-anim] .deck-body-in{transition:opacity .2s ease .04s}
.deck[data-collapsible]:not([data-open]) .deck-body-in{opacity:0}

.deck-toggle{display:inline-flex;align-items:center;gap:7px;margin-right:auto;
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:12.5px;color:var(--tx-3);transition:color .15s}
/* Povinné: display:inline-flex výš by jinak přebilo [hidden]{display:none}
   z prohlížeče a tlačítko by svítilo i bez JavaScriptu. Stejná past už jednou
   spadla u .picked .line, viz zmeny.md 27. 8. */
.deck-toggle[hidden]{display:none}
.deck-toggle:hover{color:var(--tx)}
.deck-toggle .chev{width:15px;height:15px;flex:0 0 auto;
  transition:transform .3s cubic-bezier(.33,.1,.24,1)}
.deck[data-open] .deck-toggle .chev{transform:rotate(180deg)}

@media(prefers-reduced-motion:reduce){
  .deck[data-anim] .deck-body,.deck[data-anim] .deck-body-in,
  .deck-toggle .chev{transition:none}
}

/* Popis nese sdělení karty — proto je největší z textů pod nadpisem. */
.deck .perex{font-size:14.5px;line-height:1.6;color:var(--tx-2);margin-bottom:0}

/* Dvě ukázkové otázky v rozbalené kartě: oddělené linkou, odsazené odrážkou,
   menší a tlumené. Jsou to příklady, ne obsah karty — proto nesmí přebít popis
   nad sebou.

   28. 8. 2026 tu chvíli stál výpis os jako dvojice pólů (přesunutý ze zrušeného
   modalu) a byl to krok vedle: zákazníka nezajímá, z jakých pólů se osa skládá,
   zajímá ho, na co se ho někdo zeptá. Póly sem nevracej — viz „Navenek otázky,
   uvnitř osy“ v CLAUDE.md. Kdyby se ukázalo, že je čtenář přeskakuje úplně, první
   zásah je zvětšit .ex-item o 1 px, ne přidat rámeček. */
.deck .deck-ex{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.deck .ex-note{font-size:10.5px;font-style:italic;color:var(--tx-3);margin-bottom:8px}
.deck .ex-item{position:relative;padding-left:14px;font-size:12.5px;line-height:1.5;
  color:var(--tx-3);margin-bottom:4px}
.deck .ex-item::before{content:"–";position:absolute;left:0;color:var(--line)}
.deck .ex-item:last-child{margin-bottom:0}

.deck .more{font-size:12.5px;color:var(--tx-3)}
.deck .more a{color:var(--tx-3);text-decoration:underline;text-underline-offset:3px}
.deck .more a:hover{color:var(--acc)}

.deck .foot{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.deck .price{font-family:var(--serif);font-size:21px;color:var(--tx)}
.deck .foot .btn{margin-left:auto}
.deck.is-hidden{display:none}

.empty{border:1px dashed var(--line);border-radius:var(--r-card);padding:36px 26px;text-align:center;color:var(--tx-2);margin-top:32px}
.empty.is-hidden{display:none}

/* ---------- poznámkové bloky ---------- */
.note{background:var(--bg-soft);border-left:2px solid var(--acc);border-radius:0 var(--r-card) var(--r-card) 0;padding:22px 24px;margin-top:26px}
.note.warn{border-left-color:var(--warn)}
.note p{font-size:14.5px;color:var(--tx-2)}
.note p:last-child{margin-bottom:0}

.axlist{margin-top:30px;border-top:1px solid var(--line)}
.axitem{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--tx-2)}
.axitem em{font-style:normal;color:var(--tx-3);font-family:var(--mono);font-size:12px;margin-right:12px}
.axitem span:last-child{text-align:right;color:var(--tx-2)}

.box{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.box li{display:flex;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.box li b{flex:0 0 190px;color:var(--tx)}
.box li span{color:var(--tx-2)}
@media(max-width:560px){.box li{flex-direction:column;gap:3px}.box li b{flex:none}}

/* ---------- archivní karta (ukázka) ---------- */
.arch{margin-top:34px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px}
.arch .row{position:relative;height:30px;display:flex;align-items:center}
.arch .no{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);width:26px;flex:0 0 26px}
.arch .tr{position:relative;flex:1;height:1px;background:var(--line)}
.arch .me{position:absolute;top:-6px;width:2px;height:13px;background:var(--tx)}
.arch .dot{position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%}

/* ---------- objednávka ---------- */
.order{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;margin-top:34px;scroll-margin-top:92px}
.order h3{margin-bottom:18px}

.picked{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:26px;overflow:hidden}
.picked .line{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.picked .line:last-child{border-bottom:none}
/* hidden na .line by jinak prohrál s display:flex výše — řádky sad jsou
   předrenderované pro všechny sady a JS je odkrývá až po přidání */
.picked .line[hidden]{display:none}
.picked .line .nm{flex:1;min-width:0}
.picked .line .nm small{display:block;color:var(--tx-3);font-size:12px}
.picked .line .pr{font-family:var(--mono);font-size:13px;color:var(--tx-2);white-space:nowrap}
.picked .empty-line{padding:18px 16px;color:var(--tx-3);font-size:13.5px}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{background:var(--bg);border:none;color:var(--tx-2);width:30px;height:30px;cursor:pointer;font-size:15px;line-height:1}
.qty button:hover{color:var(--tx);background:var(--bg-card)}
.qty input{width:34px;height:30px;text-align:center;background:var(--bg);border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--tx);font:inherit;font-size:13px;padding:0}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}

/* Postupné odkrývání formuláře. Stejná mechanika jako .deck-body: výška se
   animuje přes grid-template-rows 0fr→1fr, protože height:auto animovat nejde.
   Sbalení zapíná až site.js atributem data-collapsible — bez JavaScriptu tak
   zůstane celý formulář vyplnitelný. */
.reveal{display:grid;grid-template-rows:1fr}
.reveal-in{overflow:hidden;min-height:0}
.reveal[data-collapsible]{grid-template-rows:0fr}
.reveal[data-collapsible][data-open]{grid-template-rows:1fr}
.reveal[data-anim]{transition:grid-template-rows .34s cubic-bezier(.33,.1,.24,1)}
.reveal[data-anim] .reveal-in{transition:opacity .2s ease .04s}
/* visibility navíc oproti .deck-body: ve sbalené části jsou formulářová pole
   a ta by jinak zůstala dosažitelná tabulátorem a odrolila by stránku k ničemu. */
.reveal[data-collapsible]:not([data-open]) .reveal-in{opacity:0;visibility:hidden}

.more-fields{margin-top:6px}
.more-toggle{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
.more-toggle .chev{font-size:12px;color:var(--tx-3)}
.more-toggle[aria-expanded=true] .chev{transform:rotate(45deg)}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields .full{grid-column:1/-1}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
.f label{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:7px}
.f label .opt{text-transform:none;letter-spacing:0;color:var(--tx-3)}
.hint-inline{font-size:12.5px;color:var(--tx-3);margin-top:7px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],textarea,select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  padding:11px 13px;border-radius:var(--r);font:inherit;font-size:14.5px;
}
textarea{resize:vertical;min-height:74px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--tx-3)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6660' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:10px;padding-right:34px}

.sum{margin-top:26px;border-top:1px solid var(--line);padding-top:8px}
.sumline{display:flex;justify-content:space-between;gap:20px;font-size:14px;color:var(--tx-2);padding:9px 0;border-bottom:1px solid var(--line-soft)}
.sumline.tot{color:var(--tx);font-size:17px;border-bottom:none;padding-top:14px;font-family:var(--serif)}

.validation{color:var(--warn);font-size:13px;margin-top:14px}
.validation ul{margin:0;padding-left:18px}

/* ---------- platební panel ---------- */
.pay{display:grid;grid-template-columns:184px 1fr;gap:30px;align-items:start;margin-top:30px}
@media(max-width:620px){.pay{grid-template-columns:1fr}}
.pay .qr{background:#fff;padding:11px;border-radius:var(--r);width:184px;height:184px}
.pay .qr img{width:100%;height:100%;image-rendering:pixelated}
.pd{font-size:14px}
.pd .r{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.pd .r:last-child{border-bottom:none}
.pd .k{color:var(--tx-3)}
.pd .v{font-family:var(--mono);font-size:13.5px;color:var(--tx);text-align:right;word-break:break-all}
.pd .v.big{color:var(--acc);font-size:16px}

.states{display:flex;gap:0;margin:34px 0 0;list-style:none;padding:0;counter-reset:s}
.states li{flex:1;font-size:12px;color:var(--tx-3);padding-top:14px;border-top:2px solid var(--line);position:relative}
.states li.done{color:var(--tx);border-top-color:var(--acc)}
@media(max-width:560px){.states{flex-direction:column;gap:2px}.states li{border-top:none;border-left:2px solid var(--line);padding:6px 0 6px 14px}.states li.done{border-left-color:var(--acc)}}

/* ---------- patička ---------- */
footer{padding:46px 0 60px;color:var(--tx-3);font-size:12.5px;border-top:1px solid var(--line)}
footer a{color:var(--tx-3)}
footer .fl{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
footer .foot-bottom{display:flex;align-items:center;gap:14px}
footer .foot-bottom span{flex:1;min-width:0}
.admin-link{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--line-soft);border-radius:50%;
  color:var(--tx-3);opacity:.5;transition:opacity .15s,color .15s,border-color .15s;flex:0 0 auto}
.admin-link:hover{opacity:1;color:var(--acc);border-color:rgb(var(--acc-rgb) / .4)}
.admin-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px;opacity:1}

/* ---------- drobnosti ---------- */
.badge{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid rgb(var(--acc-rgb) / .4);border-radius:999px;padding:3px 11px}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:34px}}
/* Pohyb je ozdoba, ne informace — kdo si ho vypnul, přijde jen o něj. */
@media(prefers-reduced-motion:reduce){
  .btn:hover,.deck:hover{transform:none}
  *{transition-duration:.01ms !important}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--acc);color:var(--on-acc);padding:10px 16px;z-index:99;border-radius:var(--r)}


/* =========================================================================
   Katalog sad — hlavička nad mřížkou a útlá karta
   Cena i věta o schovaných osách byly na každé kartě stejné. Osmkrát tentýž
   řádek není informace, je to šum — proto stojí jednou nad mřížkou a karta
   nese jen to, čím se jedna sada liší od druhé.
   ========================================================================= */
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.catalog-head .lede{margin:0;flex:1 1 380px}
.catalog-facts{flex:0 0 auto;text-align:right;font-size:13.5px;color:var(--tx-2);line-height:1.9;max-width:340px}
.catalog-facts .cf-price b{font-family:var(--serif);font-size:19px;color:var(--tx);font-weight:400}
@media(max-width:760px){
  .catalog-head{gap:18px}
  .catalog-facts{text-align:left;max-width:none}
}

/* vysvětlivka u pojmu „osa“ — jediné místo, kde se něco schovává za hover.
   Bez ní se dá koupit, takže mobil o nic nepřijde; přesto reaguje i na tap. */
.hint{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;padding:0;
  margin-left:6px;border:1px solid var(--tx-3);border-radius:50%;background:none;color:var(--tx-3);
  font:inherit;font-size:10.5px;line-height:1;cursor:help;position:relative;vertical-align:1px;
  transition:border-color .15s,color .15s}
.hint:hover,.hint:focus-visible{border-color:var(--acc);color:var(--acc);outline:none}
.hint .tip{position:absolute;bottom:calc(100% + 10px);right:-10px;width:262px;padding:12px 14px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  color:var(--tx-2);font-size:12.5px;line-height:1.6;text-align:left;white-space:normal;
  box-shadow:var(--lift);z-index:40;opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .15s,transform .15s,visibility .15s}
.hint:hover .tip,.hint:focus-visible .tip{opacity:1;visibility:visible;transform:none}
.hint .tip::after{content:"";position:absolute;top:100%;right:14px;border:6px solid transparent;
  border-top-color:var(--line)}
@media(max-width:760px){.hint .tip{right:auto;left:-10px}.hint .tip::after{right:auto;left:14px}}

.deck .foot{gap:12px}
.deck .foot .btn{margin-left:auto}


/* =========================================================================
   Přepínač světlé / tmavé
   Je to jedno tlačítko, ne trojice tmavá / světlá / podle systému. Tři stavy
   znamenají tři ikony a vysvětlování, co znamená ta třetí — a přitom stav
   „podle systému“ je jen výchozí nastavení, dokud si člověk nevybere, ne
   volba, ke které by se potřeboval vracet.

   Ikona ukazuje CÍL, ne současný stav: v tmavém režimu svítí sluníčko, protože
   po kliknutí bude světlo. Popisek to říká i slovy, takže se nedá splést.
   ========================================================================= */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;padding:0;
  background:none;border:1px solid var(--line);border-radius:50%;
  color:var(--tx-2);cursor:pointer;
  transition:color .15s,border-color .15s;
}
/* Bez JS by tlačítko nic nedělalo, proto ho site.js teprve odkrývá.
   display:inline-flex výš by jinak přebilo [hidden] — stejná past jako
   u .deck-toggle a .picked .line. */
.theme-toggle[hidden]{display:none}
.theme-toggle:hover{color:var(--tx);border-color:var(--tx-3)}
.theme-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.theme-toggle svg{width:15px;height:15px;display:block}

/* Vidí se vždycky jen jedna ikona — ta druhá je ta, do které se přepíná. */
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
[data-theme="dark"] .theme-toggle .ico-sun{display:block}
[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* Na úzkém displeji mizí navigační odkazy, ale přepínač zůstává — je to
   ovládací prvek, ne odkaz, a na mobilu se hodí stejně. */
@media(max-width:720px){.theme-toggle{margin-left:auto}}

/* Přebarvení celé plochy naráz vypadá jako překliknutí zdroje světla, ne jako
   změna nastavení. Krátký prolnutí to zjemní; jen na barvách, ne na `all`,
   aby se nerozjelo rozbalování karet a posun jezdců. */
@media(prefers-reduced-motion:no-preference){
  body,.bar,.deck,.demo,.steps .step,.order,.filter,.note,.arch{
    transition:background-color .22s ease,border-color .22s ease,color .22s ease;
  }
}

/* =========================================================================
   Odvážnější rytmus úvodní stránky
   Jednotlivé kapitoly mají vlastní náladu, jako kdyby člověk postupně otáčel
   listy malé autorské brožury. Obsah zůstává v klidné ose, hravost se děje
   kolem něj a nestrhává čtení.
   ========================================================================= */
.chapter-intro,.chapter-how,.chapter-insight,.chapter-sets,.chapter-rules,
.chapter-caution,.chapter-gift,.chapter-order,.chapter-about{position:relative;isolation:isolate;overflow:hidden}
.chapter-intro > .wrap,.chapter-how > .wrap,.chapter-insight > .wrap,.chapter-sets > .wrap,
.chapter-rules > .wrap,.chapter-caution > .wrap,.chapter-gift > .wrap,.chapter-order > .wrap,
.chapter-about > .wrap{position:relative;z-index:1}

.chapter-intro{background:radial-gradient(circle at 88% 15%,rgb(var(--acc-rgb) / .15),transparent 24%),
  radial-gradient(circle at 57% 86%,rgb(var(--acc-2-rgb) / .11),transparent 22%)}
.chapter-how{background:linear-gradient(118deg,rgb(var(--acc-rgb) / .09),transparent 39%),var(--bg)}
.chapter-how::before{content:"";position:absolute;width:185px;height:185px;left:-76px;bottom:-92px;
  border:24px dotted rgb(var(--acc-rgb) / .2);border-radius:50%;transform:rotate(14deg)}

.chapter-insight{background:linear-gradient(132deg,rgb(127 163 201 / .13),transparent 46%),var(--bg-soft)}
.chapter-insight::after{content:"";position:absolute;width:250px;height:250px;right:-112px;top:44px;
  border:2px solid rgb(127 163 201 / .34);border-radius:46% 54% 63% 37%;transform:rotate(24deg)}
.chapter-insight .arch{background:var(--bg-card);border-radius:28px 9px 28px 9px;box-shadow:14px 14px 0 rgb(127 163 201 / .11)}
.chapter-insight .dot{width:9px;height:9px;top:-4px;box-shadow:0 0 0 3px rgb(var(--bg-rgb) / .72)}
.chapter-insight .me{height:19px;top:-9px;width:3px}

.chapter-sets{background:radial-gradient(circle at 4% 15%,rgb(var(--acc-2-rgb) / .12),transparent 20%),var(--bg)}
.chapter-sets::before{content:"✦  ·  ✦";position:absolute;right:5vw;top:74px;color:rgb(var(--acc-rgb) / .38);
  font:32px/1 var(--serif);letter-spacing:.35em;transform:rotate(9deg)}
.chapter-sets .catalog-head{border-bottom-style:dashed}
.chapter-sets .section-title::after{height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 15px)}
.deck{border-radius:22px 7px 19px 10px;border-color:rgb(var(--acc-rgb) / .2)}
.deck:nth-child(even){border-radius:8px 22px 10px 19px}
.deck::before{width:6px}
.deck:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:10px 12px 0 rgb(var(--acc-rgb) / .13)}
.deck:nth-child(even):hover{transform:translateY(-7px) rotate(1deg)}

.chapter-rules{background:linear-gradient(118deg,rgb(var(--acc-rgb) / .15),transparent 38%),var(--bg-soft)}
.chapter-rules .note{border:0;border-radius:8px 26px 12px 24px;background:var(--bg-card);
  box-shadow:11px 11px 0 rgb(var(--acc-rgb) / .18);transform:rotate(-.55deg)}
.chapter-rules .note p:first-child::before{content:"✦";color:var(--acc);margin-right:10px}
.chapter-rules::after{content:"✦";position:absolute;right:9%;bottom:25px;color:var(--acc);font:42px/1 var(--serif);opacity:.7}

.chapter-caution{background:linear-gradient(135deg,rgb(var(--acc-2-rgb) / .14),transparent 52%),var(--bg)}
.chapter-caution .note.warn{border:1px dashed rgb(var(--acc-2-rgb) / .58);border-left:8px solid var(--warn);
  border-radius:24px 8px 24px 8px;background:rgb(var(--acc-2-rgb) / .06)}
.chapter-caution::after{content:"?";position:absolute;right:8%;bottom:20px;width:48px;height:48px;display:grid;place-items:center;
  border:2px solid rgb(var(--acc-2-rgb) / .45);border-radius:45% 55% 42% 58%;color:var(--acc-2);font:28px/1 var(--serif)}

.chapter-gift{background:radial-gradient(circle at 6% 18%,rgb(var(--acc-2-rgb) / .15),transparent 26%),var(--bg)}
.chapter-gift .note{border:1px dashed rgb(var(--acc-rgb) / .5);border-radius:26px 8px 24px 10px;background:var(--bg-card)}
.chapter-gift .gift-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.chapter-gift .gift-points li{background:var(--bg-card);border:1px solid var(--line);border-radius:7px 17px 7px 17px;padding:18px 20px}
.chapter-gift .gift-points b{display:block;margin-bottom:6px}
.chapter-gift .gift-points span{display:block;font-size:14px;line-height:1.5}
.chapter-gift::after{content:"✦  ✧  ✦";position:absolute;right:7%;bottom:28px;color:var(--acc-2);font:30px/1 var(--serif);letter-spacing:.14em}
.chapter-order{background:linear-gradient(125deg,rgb(var(--acc-rgb) / .13),transparent 43%),var(--bg)}
.chapter-order .order{border-radius:28px 9px 28px 9px;border-color:rgb(var(--acc-rgb) / .36);
  box-shadow:14px 14px 0 rgb(var(--acc-rgb) / .1)}
.chapter-order .picked{border-radius:16px 6px 16px 6px}
.chapter-order::after{content:"";position:absolute;right:9%;bottom:25px;width:46px;height:46px;
  border:2px dashed rgb(var(--acc-rgb) / .72);border-radius:50%;box-shadow:inset 0 0 0 7px rgb(var(--acc-rgb) / .08)}

.chapter-about{background:radial-gradient(circle at 12% 90%,rgb(127 163 201 / .13),transparent 24%),var(--bg-soft)}
.chapter-about .lede:first-of-type{font-size:clamp(18px,2.4vw,22px);line-height:1.55;color:var(--tx)}
.chapter-about::after{content:"";position:absolute;right:8%;bottom:26px;width:62px;height:28px;border:2px solid rgb(127 163 201 / .48);
  border-radius:60% 40% 58% 42%;transform:rotate(-13deg)}

.btn:hover{transform:translateY(-3px) rotate(-.8deg);box-shadow:5px 6px 0 rgb(var(--acc-rgb) / .22)}
.btn.ghost:hover{box-shadow:none;transform:translateY(-2px) rotate(.6deg)}

@media(max-width:700px){
  .chapter-sets::before{display:none}
  .chapter-gift .gift-points{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .deck:hover,.deck:nth-child(even):hover,.btn:hover,.btn.ghost:hover,.hero-film:hover,
  .chapter-gift .gift-points li:hover{transform:none}
}

/* ---------- pohyb, který reaguje na člověka ---------- */
@media(prefers-reduced-motion:no-preference){
  @keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-18px,0) rotate(8deg)}}
  @keyframes orbit{0%,100%{transform:translate3d(0,0,0) rotate(24deg) scale(1)}50%{transform:translate3d(-18px,12px,0) rotate(39deg) scale(1.08)}}
  @keyframes dotpop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.28)}}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  @keyframes twinkle{0%,100%{transform:scale(.75) rotate(0);opacity:.42}50%{transform:scale(1.25) rotate(22deg);opacity:1}}
  @keyframes hop{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-17px) rotate(9deg)}}
  @keyframes swing{0%,100%{transform:rotate(-13deg) translateX(0)}50%{transform:rotate(12deg) translateX(12px)}}
  @keyframes stamp{0%,100%{transform:rotate(-10deg) scale(.9);opacity:.58}50%{transform:rotate(14deg) scale(1.08);opacity:1}}

  /* Pohybují se jen dekorace; informace a formuláře zůstávají na místě. */
  .hero-sparkles i:nth-child(1){animation:drift 5s ease-in-out infinite .4s}
  .hero-sparkles i:nth-child(2){animation:drift 6.5s ease-in-out infinite}
  .hero-sparkles i:nth-child(3){animation:drift 4.4s ease-in-out infinite 1s}
  .chapter-how::before{animation:drift 3.8s ease-in-out infinite}
  .chapter-insight::after{animation:orbit 4.8s ease-in-out infinite}
  .chapter-sets::before{animation:drift 4.3s ease-in-out infinite}
  .chapter-rules::after{animation:twinkle 1.8s ease-in-out infinite}
  .chapter-caution::after{animation:hop 2.7s var(--ease-soft) infinite}
  .chapter-gift::after{animation:twinkle 2.2s ease-in-out infinite .2s}
  .chapter-order::after{animation:stamp 2.8s ease-in-out infinite .6s}
  .chapter-about::after{animation:swing 3.4s ease-in-out infinite}

  .bar .nm{transition:color .2s,transform .3s var(--ease-soft)}
  .bar .nm:hover{color:var(--acc);transform:rotate(-1deg) translateY(-1px)}
  .bar nav a:not(.btn){position:relative;transition:color .2s}
  .bar nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
    background:var(--acc-2);transform:scaleX(0);transition:transform .25s var(--ease-soft)}
  .bar nav a:not(.btn):hover::after{transform:scaleX(1)}
  .theme-toggle svg{transition:transform .3s var(--ease-soft)}
  .theme-toggle:hover svg{transform:rotate(24deg) scale(1.12)}

  .hero-film{transition:transform .45s var(--ease-soft),filter .3s}
  .hero-film:hover{transform:rotate(-.5deg) translateY(-5px);filter:saturate(1.08)}
  .hero h1 em{transition:color .25s}
  .hero-text:hover h1 em{color:var(--acc-soft)}
  .chapter-intro .kicker::before,.chapter-how .kicker::before,.chapter-insight .kicker::before,
  .chapter-sets .kicker::before,.chapter-rules .kicker::before,.chapter-caution .kicker::before,
  .chapter-gift .kicker::before,.chapter-order .kicker::before,
  .chapter-about .kicker::before{transition:width .35s var(--ease-soft),transform .35s var(--ease-soft)}
  .chapter-intro:hover .kicker::before,.chapter-how:hover .kicker::before,.chapter-insight:hover .kicker::before,
  .chapter-sets:hover .kicker::before,.chapter-rules:hover .kicker::before,.chapter-caution:hover .kicker::before,
  .chapter-gift:hover .kicker::before,.chapter-order:hover .kicker::before,
  .chapter-about:hover .kicker::before{width:34px;transform:rotate(-3deg)}


  .chapter-insight .arch{transition:transform .36s var(--ease-soft),box-shadow .3s}
  .chapter-insight .arch:hover{transform:translateY(-5px) rotate(-.35deg);box-shadow:18px 18px 0 rgb(127 163 201 / .14)}
  .chapter-insight .arch:hover .dot{animation:dotpop .8s var(--ease-soft) both}
  .chapter-insight .arch:hover .dot:nth-of-type(2){animation-delay:.08s}
  .chapter-insight .arch:hover .dot:nth-of-type(3){animation-delay:.16s}
  .chapter-insight .arch:hover .dot:nth-of-type(4){animation-delay:.24s}

  .chapter-rules .note,.chapter-caution .note.warn{transition:transform .35s var(--ease-soft),box-shadow .3s,border-color .25s}
  .chapter-rules .note:hover{transform:translateY(-4px) rotate(.35deg);box-shadow:15px 16px 0 rgb(var(--acc-rgb) / .2)}
  .chapter-caution .note.warn:hover{transform:translateY(-4px) rotate(-.35deg);box-shadow:10px 12px 0 rgb(var(--acc-2-rgb) / .13)}


  .chapter-gift .gift-points li{transition:transform .3s var(--ease-soft),box-shadow .25s,border-color .2s}
  .chapter-gift .gift-points li:hover{transform:translateY(-6px) rotate(-.7deg);border-color:var(--acc);box-shadow:7px 8px 0 rgb(var(--acc-rgb) / .13)}
  .chapter-gift .gift-points li:nth-child(2):hover{transform:translateY(-7px) rotate(.6deg)}
  .chapter-gift .gift-points li:nth-child(3):hover{transform:translateY(-5px) rotate(-.35deg)}

  .chapter-order .order{transition:transform .35s var(--ease-soft),box-shadow .3s,border-color .25s}
  .chapter-order .order:hover{transform:translateY(-4px);box-shadow:18px 19px 0 rgb(var(--acc-rgb) / .14)}
  .picked .line{transition:background-color .2s,transform .25s var(--ease-soft)}
  .picked .line:hover{background:rgb(var(--acc-rgb) / .08);transform:translateX(4px)}
  .qty button{transition:background-color .16s,color .16s,transform .22s var(--ease-soft)}
  .qty button:hover{transform:scale(1.13)}
  input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{transition:transform .22s var(--ease-soft),border-color .2s,box-shadow .2s,background-color .2s}
  input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,textarea:focus,select:focus{transform:translateY(-2px);border-color:var(--acc);box-shadow:4px 5px 0 rgb(var(--acc-rgb) / .12);background:var(--bg-card)}

  footer a{position:relative;transition:color .2s}
  footer .fl a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--acc);
    transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-soft)}
  footer .fl a:hover::after{transform:scaleX(1)}
  footer .fl a:hover{color:var(--acc)}
  .chapter-about .btn:hover{animation:nudge .55s ease-in-out 1}

  /* Vstup kapitol je krátký a jednorázový; bez JavaScriptu se nic neschovává. */
  html.motion-ready .chapter-intro,html.motion-ready .chapter-how,html.motion-ready .chapter-insight,
  html.motion-ready .chapter-sets,html.motion-ready .chapter-rules,html.motion-ready .chapter-caution,
  html.motion-ready .chapter-gift,html.motion-ready .chapter-order,html.motion-ready .chapter-about{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s var(--ease-soft)}
  html.motion-ready .chapter-in{opacity:1;transform:none}
}

/* =========================================================================
   Sady, které se teprve chystají (5. 9. 2026)

   Vypadají jako prodejné, protože to sady jsou — jen ještě neexistují. Rozdíl
   nese štítek místo ceny a pole na e-mail místo tlačítka do objednávky, ne
   jiná barva nebo ztlumená karta: „připravujeme“ není vada, je to stav.
   Ztlumit je by zároveň znamenalo ztlumit obsah, podle kterého se člověk
   rozhoduje, jestli e-mail nechat.
   ========================================================================= */
.soon-head{margin:52px 0 20px;padding-top:26px;border-top:1px solid var(--line)}
.soon-head h3{font-family:var(--serif);font-size:19px;font-weight:400;margin:0 0 6px}
.soon-head .caption{max-width:52ch;margin:0}

.tag-soon{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:rgb(var(--acc-2-rgb) / .14);color:var(--acc-2)}

/* Formulář zájmu sedí v patičce karty na místě tlačítka. Pole a tlačítko na
   jednom řádku; na úzké kartě se zalomí pod sebe, protože e-mailové pole má
   svoje minimum a mačkat ho pod ně je horší než zalomení. */
.deck .interest{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.deck .interest input[type=email]{flex:1 1 150px;min-width:0;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  color:var(--tx);font:13px/1.3 var(--sans)}
.deck .interest input[type=email]:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.deck .interest .btn{flex:0 0 auto}
.interest-done{font-size:13px;color:var(--ok);margin:0}
.interest-error{flex:1 0 100%;font-size:12.5px;color:var(--warn);margin:4px 0 0}

/* Honeypot: pro člověka neviditelný, pro robota lákavý. Ne display:none —
   část robotů skrytá pole přeskakuje, tohle je pořád „v layoutu“. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Termín pod nadpisem sekce „Jako dárek“ — jedna věta, ne panel. */
.deadline{margin:10px 0 0;font-size:14px;color:var(--acc)}

/* Formulář „chci vyzkoušet prototyp“ používá stejné .fields jako objednávka,
   jen se nesbalí — jsou v něm dvě pole a odkrývat je po jednom nemá co skrýt. */
.try-form{max-width:620px}

/* Popisek jen pro odečítač obrazovky. Stejná mechanika jako .skip, bez
   fokusového vynoření: tenhle text se ukázat nemá nikdy. */
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   NÁHLED PRVNÍ KARTY V DLAŽDICI SADY (5. 9. 2026)

   Karta se vykresluje TÝMŽ markupem jako tisk (partial `_Board`) — proto tady
   nejsou žádné rozměry os, sloupců ani dráhy. Ty jsou v `print.css`
   v milimetrech a jsou zdrojem pravdy; kdyby je web měl podruhé, obě verze by
   se postupně rozešly a poznalo by se to až na vytištěné kartě.

   Co dělá tenhle blok: obalí kartu (148 × 105 mm), zmenší ji na šířku dlaždice
   a přebarví na webové tokeny. `print.css` se kvůli webu NEMĚNÍ — jeho `@page`
   a šedé pozadí patří tiskovému listu, ne stránce.
   ========================================================================= */

/* Poměr 148 : 105 drží padding-bottom, ne pevná výška: šířka dlaždice se mění
   s mřížkou a karta se musí zmenšovat s ní. */
.board-preview{position:relative;width:100%;padding-bottom:70.95%;margin-top:18px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-soft)}

/* Vlastní zmenšení. Karta má vnitřně 148 mm, což je při 96 dpi 559,37 px —
   `calc(100cqw / 148mm)` nefunguje, protože dělit délku délkou CSS neumí.
   Poměr se proto počítá proti té pixelové hodnotě: 100cqw je šířka obalu.

   Číslo 559.37px je 148 mm v CSS pixelech (1 mm = 96/25.4 px) a je to jediné
   místo, kde se tiskový rozměr převádí na obrazovkový. Kdyby se šířka karty
   v `board.css` změnila, musí se změnit i tady.

   Jednotka `px` u dělitele je povinná: `calc(100cqw / 559.37)` je neplatné,
   protože výsledkem by byla délka, a `scale()` chce bezrozměrné číslo. Teprve
   délka dělená délkou dá poměr. */
.board-preview{container-type:inline-size}
.board-scale{position:absolute;left:0;top:0;width:148mm;height:105mm;
  transform-origin:0 0;transform:scale(calc(100cqw / 559.37px))}

/* Barvy z webu, ne z tisku. `print.css` má napevno #111 na bílé — na tmavém
   webu by karta byla černý obdélník. Geometrie zůstává, mění se jen barvy. */
.board-preview .board{background:var(--bg-card);color:var(--tx)}
.board-preview .board .title{color:var(--tx)}
.board-preview .board .overline{color:var(--tx-3)}
.board-preview .board .subtitle,
.board-preview .board .code,
.board-preview .board .brand{color:var(--tx-3)}
.board-preview .ax .q{color:var(--tx)}
.board-preview .ax .no{color:var(--tx-3)}
.board-preview .ax .lbl{color:var(--tx-2)}
.board-preview .ax .num{color:var(--tx-3)}
.board-preview .ax .band{background:rgb(var(--acc-rgb) / .12);border-color:rgb(var(--acc-rgb) / .28)}

/* Seznam karet sady v rozbalení: pořadí, název, případně poznámka o vynechání. */
.board-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.board-list li{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px}
.board-list .bl-no{font-family:var(--mono);font-size:11px;color:var(--tx-3);flex:0 0 auto}
.board-list .bl-title{color:var(--tx-body)}
.board-list .bl-opt{margin-left:auto;font-size:11px;color:var(--tx-3);font-style:italic}

/* Otázky pod náhledem. Na širokém displeji jsou skryté (čtou se z karty),
   na mobilu je to naopak: 9,5pt text zmenšený na 390 px nepřečte nikdo, takže
   se karta stane obrázkem a text se čte odsud. */
.preview-questions{list-style:none;margin:14px 0 0;padding:0;display:none}
.preview-questions li{position:relative;padding-left:14px;font-size:13px;line-height:1.55;
  color:var(--tx-body);margin-bottom:6px}
.preview-questions li::before{content:"–";position:absolute;left:0;color:var(--line)}

.preview-note{margin:14px 0 0;font-size:12.5px;color:var(--tx-3);font-style:italic}

@media (max-width:560px){
  .preview-questions{display:block}
}