/* =========================================================================
   kuksem — skin / komponenty (řízené tokeny z tokeny.css)
   Portováno z design/mockups/_sablona-shell.html (kanonický rám).
   ZDROJ VZHLEDU. Rebrand/úpravy = sem + tokeny.css. Třídy česky (ASCII).
   ========================================================================= */
*{box-sizing:border-box;margin:0}
/* Vždy rezervuj místo pro svislý posuvník → stránka neposkočí do šířky, když se mezi
   (různě vysokými) fóry posuvník objeví/zmizí. Fallback pro starší prohlížeče: overflow-y. */
html{scrollbar-gutter:stable;overflow-y:scroll}
body{font-family:var(--font-text);background:var(--pozadi);color:var(--barva-inkoust);line-height:1.55}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.lg{font-family:var(--font-logo)}.lg .s{color:var(--barva-magenta)}
a{color:inherit}

/* tlačítka */
.btn{font-family:var(--font-nadpis);font-weight:700;border:none;border-radius:var(--r-pill);padding:9px 18px;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-prim{background:var(--barva-magenta);color:#fff;box-shadow:3px 3px 0 var(--barva-inkoust);transition:transform .12s,box-shadow .12s}
.btn-prim:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--barva-inkoust)}
.btn-duch{background:#fff;color:var(--barva-inkoust);border:2px solid var(--barva-inkoust);box-shadow:2px 2px 0 var(--barva-inkoust)}
/* CTA s mrkajícím Kukíkem (dle komponenty.html „Otevřít článek") — znovupoužitelné kdekoli.
   Najetím: bublina poskočí a smajlík mrkne. Ikonu nes v <svg> s .wrap6/.rc/.ro. */
.btn-cta svg{flex:none}
.btn-cta .wrap6{transform-box:fill-box;transform-origin:center}
.btn-cta:hover .wrap6{animation:hop .6s ease-in-out}
.btn-cta:hover .rc{animation:rwRc .6s ease-in-out}
.btn-cta:hover .ro{animation:rwRo .6s ease-in-out}
@keyframes rwRc{0%,100%{opacity:1}40%,60%{opacity:0}}
@keyframes rwRo{0%,100%{opacity:0}40%,60%{opacity:1}}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}}

/* hlavička */
header{position:sticky;top:0;z-index:50;background:#ffffffe8;backdrop-filter:blur(8px);border-bottom:1px solid var(--seda-100)}
.hl{display:flex;align-items:center;gap:22px;padding:18px 0;transition:padding .2s}
.hl .lg{font-size:31px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:font-size .2s}
.hl .lg svg{transition:width .2s,height .2s}
/* při rolování se hlavička (i s pásem) scvrkne, ale zůstane viditelná */
header.zmenseno .hl{padding:8px 0}
header.zmenseno .hl .lg{font-size:24px}
header.zmenseno .hl .lg svg{width:24px;height:24px}
.nav{display:flex;gap:18px;margin-left:6px}
.nav a{font-family:var(--font-nadpis);font-weight:700;font-size:15px;text-decoration:none;color:var(--seda-700);display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:2.5px solid transparent;transition:color .15s}
.nav a .d{width:8px;height:8px;border-radius:50%;transition:transform .15s}
.nav a:hover{color:var(--barva-inkoust);border-bottom-color:var(--barva-magenta)}.nav a:hover .d{transform:scale(1.7)}
.nav a.akt{color:var(--barva-inkoust);border-bottom-color:var(--barva-inkoust)}
/* --- Varianta hlavičky: ikony (velká hlavička) vs. puntíky (po scrollu / mobil) ---
   Přepínač: třída .nav-ikony na <header>. Bez ní zůstává původní puntíková verze.
   S ní: dokud není zmenšená, ukazuje ikony ve sloupci; po scrollu (.zmenseno) spadne na puntíky. */
.nav a .ni{display:none;line-height:0}
.nav a .ni .ic-obal{width:40px;height:40px;border-radius:12px;background:var(--seda-100);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;transform:rotate(-4deg)}
.nav a .ni .ic-obal svg{width:24px;height:24px}
.nav a:hover .ni .ic-obal,.nav a.akt .ni .ic-obal{background:var(--barva-zluta);transform:rotate(0)}
@media(min-width:821px){
  /* velká hlavička: ikona + popisek VEDLE sebe (v řádku), ikony větší */
  header.nav-ikony:not(.zmenseno) .nav a{flex-direction:row;gap:9px;font-size:14px;color:var(--seda-700);border-bottom:none;padding:0;opacity:.9}
  header.nav-ikony:not(.zmenseno) .nav a:hover,header.nav-ikony:not(.zmenseno) .nav a.akt{opacity:1;border-bottom:none;color:var(--barva-inkoust)}
  header.nav-ikony:not(.zmenseno) .nav a .d{display:none}
  header.nav-ikony:not(.zmenseno) .nav a .ni{display:inline-flex}
  header.nav-ikony:not(.zmenseno) .nav{gap:14px}
  /* v hero stavu není na hledání místo (popisky u ikon) → schová se; po zmenšení lišty se vrátí */
  header.nav-ikony:not(.zmenseno) .search{display:none}
}
.vpravo{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--seda-200);border-radius:var(--r-pill);padding:7px 13px;width:160px;color:var(--seda-400);transition:.2s}
.search:focus-within{border-color:var(--barva-magenta);width:200px}
.search input{border:none;outline:none;font-size:14px;flex:1;background:none;font-family:var(--font-text)}
/* hamburger + mobilní nav (responsivita od začátku) */
.ham{display:none;flex:none;background:none;color:var(--barva-inkoust);border:2px solid var(--barva-inkoust);border-radius:10px;width:40px;height:36px;cursor:pointer;align-items:center;justify-content:center;line-height:0}
@media(max-width:820px){
  .search{display:none}
  .ham{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;padding:8px 24px 14px;margin:0;border-bottom:3px solid var(--barva-inkoust);box-shadow:var(--stin-m)}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--seda-100)}
}
@media(max-width:520px){.vpravo>.btn-prim{display:none}}
@media(max-width:420px){.hl{gap:10px}.hl .lg{font-size:21px}}

/* ticker */
.ticker{background:var(--barva-inkoust);overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-block;font-family:var(--font-nadpis);font-weight:700;font-size:13px;color:#fff;padding:7px 0;will-change:transform}
.ticker .run b{color:var(--barva-zluta);margin:0 6px}
.ticker .run span{margin:0 14px;opacity:.85}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* štouchanec banner */
.stb{background:var(--barva-zluta);border-bottom:3px solid var(--barva-inkoust);overflow:hidden;transition:max-height .3s;max-height:64px}
.stb.hide{max-height:0;border:none}
.stb .in{max-width:1140px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-nadpis);font-weight:700;font-size:14px}
.stb .in button{font-family:var(--font-nadpis);font-weight:700;border:2.5px solid var(--barva-inkoust);background:#fff;border-radius:999px;padding:5px 13px;cursor:pointer;font-size:13px}
.stb .x{margin-left:auto;cursor:pointer;font-size:13px;color:#7a5a00}

/* mrkací symbol / zjevení / lajk pop */
@keyframes rcI{0%,80%,100%{opacity:1}86%,92%{opacity:0}}@keyframes roI{0%,80%,100%{opacity:0}86%,92%{opacity:1}}
.blink .rc{animation:rcI 4s infinite}.blink .ro{animation:roI 4s infinite}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rev{opacity:0;animation:up .55s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}.d5{animation-delay:.38s}.d6{animation-delay:.46s}.d7{animation-delay:.54s}.d8{animation-delay:.62s}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.lajk.pop{animation:pop .3s}

/* nadpis sekce + breadcrumb */
.sekceh{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px}
/* hlavní nadpisy sekcí naším logo-fontem (jako v logu) — výrazné, komiksové */
.sekceh h2{font-family:var(--font-logo);font-weight:400;font-size:30px;letter-spacing:.01em;line-height:1.05}
.sekceh a{font-family:var(--font-nadpis);font-weight:700;font-size:14px;color:var(--barva-magenta);text-decoration:none}
.drobky{font-family:var(--font-nadpis);font-weight:700;font-size:13px;color:var(--seda-400);padding:16px 0 0;display:flex;gap:8px;align-items:center}
.drobky a{text-decoration:none;color:var(--seda-500)}.drobky a:hover{color:var(--barva-magenta)}

/* zvýrazňovač (komiksové klíčové slovo) */
.zvyr{font-family:var(--font-logo);color:var(--barva-zluta);background:var(--barva-inkoust);padding:1px 9px;border-radius:6px;font-size:.85em}
/* varianty zvýraznění (WYSIWYG lišta v Ukládači: [[2:…]] / [[3:…]]) */
.zvyr.zvyr2{color:#fff;background:var(--barva-magenta)}
.zvyr.zvyr3{color:var(--barva-inkoust);background:var(--barva-zluta)}

/* tag / štítek rubriky */
.tag{font-family:var(--font-nadpis);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);align-self:flex-start}

/* filtr-chipy */
/* listva výpisu fórů: rubriky vlevo, řazení (Čerstvé/Vypečené) vpravo */
.fory-listva{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 20px}
.fory-listva .chipy{margin:0}
.razeni{display:inline-flex;gap:6px;align-items:center;flex:none}
.razeni .rz{font-family:var(--font-nadpis);font-weight:700;font-size:13px;text-decoration:none;color:var(--seda-500);border:2px solid var(--seda-200);border-radius:var(--r-pill);padding:5px 13px;white-space:nowrap;transition:.15s}
.razeni .rz:hover{border-color:var(--barva-inkoust);color:var(--barva-inkoust)}
.razeni .rz.akt{background:var(--barva-zluta);color:var(--barva-inkoust);border-color:var(--barva-inkoust)}
.chipy{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 22px}
.chip{font-family:var(--font-nadpis);font-weight:700;font-size:13px;text-decoration:none;color:var(--seda-700);background:#fff;border:1.5px solid var(--seda-200);border-radius:var(--r-pill);padding:6px 14px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.chip:hover{border-color:var(--barva-inkoust)}
.chip.akt{background:var(--barva-inkoust);color:#fff;border-color:var(--barva-inkoust)}
.chip .d{width:8px;height:8px;border-radius:50%}

/* reakční tlačítka */
.lajk{display:inline-flex;align-items:center;gap:6px;color:var(--seda-500);font-family:var(--font-nadpis);font-weight:700;font-size:14px;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--r-pill)}
.lajk:hover{background:var(--seda-50);color:var(--barva-inkoust)}

/* feed + karta fóru */
.feed{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(132px,auto);gap:16px}
@media(max-width:820px){.feed{grid-template-columns:1fr 1fr}}@media(max-width:540px){.feed{grid-template-columns:1fr}}
/* Karta fóru: .kart = obal (mřížková buňka), .kart-in = vizuální box, .kart-plocha = klikatelná
   celá plocha (stretched link → detail; BEZ podtržení textu). Reakce jsou nad plochou (z-index). */
.kart{position:relative;display:flex}
.kart-in{position:relative;flex:1;display:flex;flex-direction:column;border:1.5px solid var(--seda-200);border-radius:16px;padding:18px;background:#fff;transition:transform .15s,box-shadow .15s;overflow:hidden}
.kart:hover .kart-in{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--stin-m)}
.kart-plocha{position:absolute;inset:0;z-index:1;border-radius:16px}
.kart-in .tag,.kart-in .pi,.kart-in .stit-chip{position:relative;z-index:0}
.kart-in .pi{font-size:15.5px;margin:10px 0;flex:1}
.kart-in .patk{position:relative;z-index:2}
/* velikosti boxu podle délky fóru (s/m/l) — liší se šířkou (L) a velikostí písma */
.kart-s .pi{font-size:15px}
.kart-m .pi{font-size:17px}
.kart-l .pi{font-size:20px;line-height:1.45}
/* frčí = zvýrazněný žlutý box */
.kart.frci .kart-in{background:var(--barva-zluta);border-color:var(--barva-inkoust);box-shadow:5px 5px 0 var(--barva-inkoust)}
.kart.frci:hover .kart-in{box-shadow:7px 7px 0 var(--barva-magenta);transform:translate(-2px,-2px)}
/* promo/reklama box (zatím auto-promo — upozorňujeme sami na sebe) */
.kart-rek .kart-in{border:1.5px dashed var(--seda-300);background:repeating-linear-gradient(135deg,#fff,#fff 10px,#fafbfe 10px,#fafbfe 20px);justify-content:center;gap:6px}
.kart-rek .rl{font-family:var(--font-nadpis);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--seda-400)}
.kart-rek .rt{font-family:var(--font-nadpis);font-weight:700;font-size:16px;color:var(--seda-600)}
.kart-rek .rc-akce{font-family:var(--font-nadpis);font-weight:700;font-size:13px;color:var(--barva-magenta)}
/* Náborová promo karta (hledáme redaktory) — výraznější, žlutá jako „frči" */
.kart-nabor .kart-in{border:2px solid var(--barva-inkoust)!important;background:var(--barva-zluta)!important;box-shadow:5px 5px 0 var(--barva-inkoust)}
.kart-nabor .rl{color:var(--barva-inkoust)}
.kart-nabor .rt{color:var(--barva-inkoust)}
.kart-nabor .rc-akce{color:var(--barva-magenta)}
/* Věkové „censored" razítko (18+) — ukáže se místo pikantního textu, dokud není potvrzena plnoletost.
   Text se na klienta vůbec neposílá (gating na serveru); tohle je jen vizuál + výzva k odemčení. */
.cenzura{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:70px;height:100%;padding:16px 12px;border-radius:10px;color:#fff;background:repeating-linear-gradient(-45deg,#1b1b26,#1b1b26 12px,#23232f 12px,#23232f 24px)}
.cz-znak{font-family:var(--font-logo);font-weight:800;font-size:26px;line-height:1;border:3px solid #ff3b6b;border-radius:10px;padding:3px 12px;transform:rotate(-8deg);box-shadow:0 0 0 2px #10101a;letter-spacing:.02em}
.cz-popis{font-family:var(--font-nadpis);font-weight:700;font-size:12.5px;color:#f0cdd8}
.cenzura-detail{min-height:150px;gap:14px;padding:30px 18px}
.cenzura-detail .cz-znak{font-size:44px;padding:5px 20px}
/* nekorektní razítko „DRSNÝ" — tmavé/žluté, odlišené od 18+ */
.cz-znak.cz-nek{border-color:var(--barva-inkoust);background:var(--barva-inkoust);color:var(--barva-zluta);font-size:20px}
.cenzura-detail .cz-znak.cz-nek{font-size:34px}
.cenzura-detail .cz-popis{font-size:15px}
.cz-odhal{margin-top:2px;font-family:var(--font-nadpis);font-weight:700;font-size:14px;cursor:pointer;background:var(--barva-zluta);color:var(--barva-inkoust);border:2px solid var(--barva-inkoust);border-radius:var(--r-pill);padding:9px 18px;box-shadow:2px 2px 0 var(--barva-inkoust);transition:transform .12s,box-shadow .12s}
.cz-odhal:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--barva-magenta)}
/* masonry „zeď" (na střídačku, ne rovná mřížka) — výšky dopočítá JS (grid-row span) */
.feed-zed{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:10px;gap:18px;align-items:start}
.feed-zed .kart-l,.feed-zed .kart.frci{grid-column:span 2}
@media(max-width:560px){.feed-zed{grid-template-columns:1fr}.feed-zed .kart-l,.feed-zed .kart.frci{grid-column:1}}
/* Homepage „Čerstvý fóry" — deterministická skládačka (bez JS): S/M/L různě velké boxy na střídačku */
/* Homepage feed: VELIKOST BOXU = velikost fóru (taxonomie z Ukládače: s/m/l). Krátký fór = malý box,
   nikdy ne XXL! Dense flow proplete různě velké boxy do masonry „na střídačku"; velké navíc rozprostírá
   controller (nedává je k sobě), takže feed je pestrý, ale poctivý k obsahu. */
.feed-domu{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-auto-rows:70px;grid-auto-flow:row dense;gap:16px}
.feed-domu .kart{display:flex}
.feed-domu .kart-in{flex:1;overflow:hidden}
/* Pevné výšky → dlouhý vtip ořízni ČISTĚ (fade jako „je toho víc, mrkni dovnitř") a reakci drž vždy
   viditelnou: ořezává se JEN text (.pi), patička s reakcí je mimo něj (flex:none). */
.feed-domu .kart-in .pi{min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
.feed-domu .kart-in .patk{flex:none;-webkit-mask-image:none;mask-image:none}
.feed-domu .kart-s{grid-column:span 1;grid-row:span 2}
.feed-domu .kart-m{grid-column:span 1;grid-row:span 3}
.feed-domu .kart-l{grid-column:span 2;grid-row:span 3}
.feed-domu .kart.frci{grid-column:span 2;grid-row:span 3}
@media(max-width:560px){.feed-domu{grid-template-columns:1fr}.feed-domu .kart-l,.feed-domu .kart.frci{grid-column:1}}
.nact{display:flex;justify-content:center;margin:26px 0 8px}
.btn-nact{font-family:var(--font-nadpis);font-weight:700;font-size:14px;background:#fff;color:var(--barva-inkoust);border:2px solid var(--barva-inkoust);border-radius:var(--r-pill);box-shadow:2px 2px 0 var(--barva-inkoust);padding:9px 18px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn-nact:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--barva-magenta)}

/* --- Přispívání návštěvníků (CTA na homepage + formulář /prispej) --- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Kompaktní ve výchozím stavu (ať se obrazovka nevyšťaví), rozbalí se při psaní / přetažení obrázku */
.prispej-cta{max-width:720px;margin:26px 0 10px;padding:15px 18px;border:3px solid var(--barva-inkoust);border-radius:16px;background:var(--barva-zluta);box-shadow:5px 5px 0 var(--barva-inkoust);transition:max-width .2s}
.prispej-cta.rozbaleno{max-width:860px}
.prispej-cta .cta-hlava h2{font-family:var(--font-nadpis);font-weight:700;font-size:20px;margin:0}
.prispej-cta .cta-hlava p{margin:2px 0 10px;font-size:13.5px}
/* /prispej = TATÁŽ komponenta jako na homepě, jen rovnou otevřená a o něco větší (žádná jiná struktura) */
.prispej-cta.velke{max-width:840px;padding:24px 28px;box-shadow:7px 7px 0 var(--barva-inkoust)}
.prispej-cta.velke .cta-hlava h2{font-size:26px}
.prispej-cta.velke .cta-hlava p{font-size:15px;margin-bottom:14px}
.prispej-cta.velke textarea{min-height:130px;font-size:16px}
.prispej-cta .cta-radek{display:flex;gap:10px;align-items:flex-start}
.prispej-cta textarea{flex:1;box-sizing:border-box;border:2px solid var(--barva-inkoust);border-radius:10px;padding:9px 10px;font:inherit;resize:none;overflow:hidden}
.prispej-cta .cta-radek .btn{white-space:nowrap}
/* viditelná pozvánka k nahrání obrázku i ve zmenšeném stavu (kdo nechce psát, má vtipný obrázek) */
.prispej-cta .cta-obr{flex:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:2px solid var(--barva-inkoust);background:#fff;border-radius:10px;padding:8px 11px;font-family:var(--font-nadpis);font-weight:700;font-size:13px;color:var(--barva-inkoust);white-space:nowrap;transition:background .12s}
.prispej-cta .cta-obr:hover{background:#fff2c4}
.prispej-cta .cta-obr svg{flex:none}
@media(max-width:520px){.prispej-cta .cta-obr span{display:none}}
.prispej-cta .cta-vic{margin-top:10px}
.prispej-cta .cta-drop{border:2px dashed var(--barva-inkoust);border-radius:10px;padding:12px;text-align:center;font-size:13.5px;background:#fffefa;transition:background .15s}
.prispej-cta .cta-drop.nad{background:#fff2c4}
.prispej-cta .cta-drop b{font-family:var(--font-nadpis)}
.prispej-cta .cta-nahraj{color:var(--barva-magenta);cursor:pointer;text-decoration:underline}
.prispej-cta .cta-drop-stav{font-size:13px;margin-top:6px;min-height:16px;font-weight:700}
.prispej-cta .cta-nahled{position:relative;display:inline-block;margin-top:10px}
.prispej-cta .cta-nahled img{max-width:220px;max-height:160px;border:2px solid var(--barva-inkoust);border-radius:10px;display:block}
.prispej-cta .cta-nahled-x{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;border:2px solid var(--barva-inkoust);background:#fff;cursor:pointer;font-size:12px;line-height:1;box-shadow:2px 2px 0 var(--barva-inkoust)}
.prispej-cta .cta-hotovo h2{font-family:var(--font-nadpis);font-weight:700;font-size:22px;margin:0 0 4px}
.prispej-cta .cta-hotovo p{margin:0;font-size:14px}
.prispej-cta .cta-vic-link{display:inline-block;margin-top:10px;font-size:13px;color:#7a5a00;text-decoration:underline;background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
.prispej-cta .cta-vic-link:hover{color:var(--barva-magenta)}
.prispej-cta .cta-pole{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.prispej-cta .cta-pole label{font-family:var(--font-nadpis);font-weight:700;font-size:13px}
.prispej-cta .cta-pole label span{font-weight:400;color:#7a5a00}
.prispej-cta .cta-pole input{border:2px solid var(--barva-inkoust);border-radius:9px;padding:8px 10px;font:inherit}
.prispej-cta .cta-dvoj{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.prispej-cta .cta-dvoj{grid-template-columns:1fr}}
.prispej{max-width:680px}
.prispej .vph{margin-bottom:10px}
.prispej-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.prispej-form .pole{display:flex;flex-direction:column;gap:5px}
.prispej-form .pole>span{font-family:var(--font-nadpis);font-weight:700;font-size:13px}
.prispej-form .pole>span i{font-weight:400;color:var(--seda-400)}
.prispej-form .pole>span b{color:var(--barva-magenta)}
.prispej-form textarea,.prispej-form input[type=text]{width:100%;box-sizing:border-box;border:1.5px solid var(--seda-300);border-radius:10px;padding:10px;font:inherit}
.prispej-form textarea:focus,.prispej-form input:focus{outline:none;border-color:var(--barva-magenta)}
.prispej-form .dvojice{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.prispej-form .dvojice{grid-template-columns:1fr}}
.prispej-akce{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prispej-chyba{background:#fff0f0;border:1px solid #f3b7b7;color:#c62828;border-radius:8px;padding:9px 12px;margin:10px 0;font-size:14px}
.prispej-hotovo{max-width:600px;margin:20px 0}
.prispej-hotovo h1{font-family:var(--font-nadpis);font-weight:700;font-size:30px}
.prispej-hotovo .btn{margin-right:8px;margin-top:8px}
.kart.siroky{grid-column:span 2}
.kart.frci{border-color:var(--barva-zluta);box-shadow:var(--stin-komiks-s)}
.kart-hl{display:flex;align-items:center;gap:8px}
.dole{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.dole-r{display:flex;justify-content:flex-end;gap:4px}

/* avatar */
.ava{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--barva-inkoust);display:flex;align-items:center;justify-content:center;font-family:var(--font-nadpis);font-weight:800;color:#fff;font-size:14px;flex:none;overflow:hidden}

/* tlačítko „Načíst další" */
.vic{display:flex;justify-content:center;margin:28px 0}
.vic button{font-family:var(--font-nadpis);font-weight:700;font-size:15px;background:#fff;border:2.5px solid var(--barva-inkoust);border-radius:var(--r-pill);padding:11px 26px;cursor:pointer;box-shadow:3px 3px 0 var(--barva-inkoust);transition:transform .12s}
.vic button:hover{transform:translate(-1px,-1px)}

/* patička */
/* Patička = kompaktní černý pruh (dle komponenty.html) */
footer{margin-top:32px;padding:0 0 18px}
.paticka{background:var(--barva-inkoust);color:#cfcfe0;border-radius:14px;padding:14px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.paticka .lg{font-family:var(--font-logo);font-size:24px;color:#fff;display:inline-flex;align-items:center;gap:8px}
.paticka .lg .s{color:var(--barva-zluta)}
.paticka .pat-odkazy a{color:#cfcfe0;text-decoration:none;font-size:14px;margin-left:16px}
.paticka .pat-odkazy a:hover{color:var(--barva-zluta)}
@media(max-width:560px){.paticka{justify-content:center;text-align:center}.paticka .pat-odkazy a{margin:0 8px}}

/* maskot (anti-Clippy) */
.maskot{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:flex-end;gap:9px}
.maskot .mb{background:#fff;border:3px solid var(--barva-inkoust);border-radius:14px 14px 4px 14px;box-shadow:3px 3px 0 var(--barva-inkoust);padding:9px 12px;max-width:220px;font-size:13.5px;position:relative}
.maskot .mb .x{position:absolute;top:3px;right:8px;cursor:pointer;color:var(--seda-400);font-weight:700;font-size:13px}
.maskot .mb .t{font-family:var(--font-nadpis);font-weight:700;padding-right:12px}
.symb{background:none;border:none;cursor:pointer;padding:0}
.maskot.min .mb{display:none}
.maskot.min .symb{background:#fff;border:2.5px solid var(--barva-inkoust);border-radius:50%;box-shadow:2px 2px 0 var(--barva-inkoust);padding:5px;line-height:0}
.maskot.min .symb svg{width:34px;height:34px}
@keyframes toc{0%{transform:rotate(0) scale(1)}40%{transform:rotate(380deg) scale(1.18)}100%{transform:rotate(360deg) scale(1)}}
.symb.toc svg{animation:toc .7s}
@keyframes fall2{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-80px) rotate(40deg);opacity:0}}
.konf2{position:fixed;font-size:20px;animation:fall2 1s ease-out forwards;pointer-events:none;z-index:90}

/* obsah / hero (placeholder homepage) */
.obsah{padding:8px 0 24px;min-height:40vh}
.hero{background:#fff;border:var(--obrys);border-radius:var(--r-xl);box-shadow:var(--stin-komiks);padding:48px 40px;text-align:center;margin:24px 0}
.hero h1{font-family:var(--font-logo);font-size:var(--txt-hero);line-height:1.05}
.hero p{font-size:18px;color:var(--text-tlumeny);max-width:60ch;margin:12px auto 0}
.stitek{display:inline-block;font-family:var(--font-nadpis);font-weight:700;font-size:var(--txt-small);background:var(--barva-zluta);color:var(--barva-inkoust);border:2px solid var(--barva-inkoust);border-radius:var(--r-pill);padding:2px 12px;box-shadow:var(--stin-komiks-s)}
@media(max-width:640px){.hero h1{font-size:var(--txt-h1)}}

/* sticky footer: patička vždy alespoň na spodním okraji okna;
   u delšího obsahu se přirozeně posune až za scrollovatelný obsah. */
body{display:flex;flex-direction:column;min-height:100vh}
main.wrap{flex:1 0 auto}
footer{flex-shrink:0}

/* reakční lišta (ReakcePart se sám vykresluje přes modul Kuksem.Reakce) */
.reakce{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--me-4)}
.reakce .lajk{border:1.5px solid var(--seda-200)}
.reakce .lajk .popis{font-size:13px}
.reakce .lajk i{font-style:normal;font-weight:800}

/* plná reakční lišta (detail fóru): emoji + komiksová „slovní" razítka místo textu */
.reakce-plna{align-items:center}
.reakce-plna .reak{gap:5px;padding:5px 10px}
/* komiksová skupina (HAHA/FUJ) opticky oddělená předělem — ať se nemíchá s hodnotícími emoji */
.reak-komiks-skup{display:inline-flex;align-items:center;gap:8px;padding-left:12px;margin-left:2px;border-left:2px dashed var(--seda-200)}

/* spodní akční lišta pod vtipem: vlevo reakce (emoji + HAHA/FUJ), vpravo sdílení */
.fd-akce{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--seda-100)}
.fd-akce .reakce-plna{margin-top:0}
.reakce-plna .reak .glyf{line-height:1}
.reak-emoji .glyf{font-size:19px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.reak-emoji:hover{background:var(--seda-50)}
/* komiksové razítko — výrazné, mírně nakloněné, komiksová typografie */
.reak-komiks{border:2px solid var(--barva-inkoust) !important;background:var(--barva-zluta);box-shadow:2px 2px 0 var(--barva-inkoust)}
.reak-komiks .glyf{font-family:var(--font-logo);font-weight:400;font-size:15px;letter-spacing:.5px;color:var(--barva-inkoust);transform:rotate(-4deg);display:inline-block}
.reak-komiks[data-druh="fuj"]{background:var(--sekce-chat,#0FB5C9)}
.reak-komiks[data-druh="fuj"] .glyf{color:#fff}
.reak-komiks:hover{transform:translateY(-1px);box-shadow:3px 3px 0 var(--barva-inkoust)}
.reak-komiks:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--barva-inkoust)}

/* komiksová reakce = hravý efekt: vyletí slovo + objekt sebou cukne (nic se nepočítá) */
.komiks-let{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-logo);font-weight:400;font-size:38px;letter-spacing:1px;color:var(--barva-magenta);-webkit-text-stroke:2px var(--barva-inkoust);text-shadow:3px 3px 0 var(--barva-inkoust);pointer-events:none;z-index:9999;white-space:nowrap;animation:komiksLet 1.1s cubic-bezier(.2,.9,.3,1) forwards}
.komiks-let-fuj{color:var(--sekce-chat,#0FB5C9)}
@keyframes komiksLet{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}22%{opacity:1;transform:translate(-50%,-95%) scale(1.15) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-230%) scale(1) rotate(-8deg)}}
.fd-box.wobble{animation:komiksWobble .6s ease-in-out}
@keyframes komiksWobble{0%,100%{transform:rotate(0)}18%{transform:rotate(-1.3deg) scale(1.01)}38%{transform:rotate(1deg)}58%{transform:rotate(-.7deg)}78%{transform:rotate(.4deg)}}
@media (prefers-reduced-motion:reduce){.komiks-let{animation-duration:.6s}.fd-box.wobble{animation:none}}

/* razítka — nalepovací značky na fór (Novinka/Výmysl/Trapné!). Rodina z design-system. */
.razitka{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.razitko{font-family:var(--font-logo);font-weight:400;color:#fff;background:var(--stav-chyba);border:3px solid var(--barva-inkoust);border-radius:8px;padding:3px 11px;transform:rotate(-7deg);box-shadow:3px 3px 0 var(--barva-inkoust);font-size:14px;line-height:1.15;display:inline-block;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.razitko.razitko-info{background:var(--barva-modra)}
.razitko.razitko-vymysl{background:var(--stav-chyba)}
.razitko.razitko-varovani{background:var(--stav-varovani)}
.razitko.razitko-ok{background:#0f8f54}
.razitko.razitko-neutral{background:var(--barva-inkoust);color:var(--barva-zluta)}
.razitko-mini{font-family:var(--font-nadpis);font-weight:700;font-size:10px;border:1.5px solid currentColor;border-radius:6px;padding:1px 6px;transform:rotate(-3deg);display:inline-block;background:#fff;white-space:nowrap}
.raz-trapne{color:var(--stav-varovani)}
/* razítka v hlavičce detailu — vpravo, na úrovni štítků, menší */
.fd-hlava .razitka-hlava{margin-left:auto;margin-bottom:0}
.fd-hlava .razitko{font-size:13px;padding:2px 9px}
.fd-hlava .razitko-mini{font-size:10px}
/* razítka na kartě feedu — vpravo nahoře (naproti rubrice vlevo) */
.kart-in .razitka{position:absolute;top:14px;right:14px;z-index:3;margin:0;justify-content:flex-end;max-width:62%;gap:5px}
.kart-in .razitko{font-size:11px;padding:2px 7px;border-width:2px;box-shadow:2px 2px 0 var(--barva-inkoust)}
/* razítka jako překryv na obrázku v galerii */
.obr-plocha{position:relative}
.razitka-preklad{position:absolute;top:9px;left:9px;margin:0;max-width:calc(100% - 18px)}

/* lightbox — velký náhled obrázku po kliknutí (.zoom) */
img.zoom{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(16,16,26,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px;animation:lbIn .15s ease}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.5)}
.lb-x{position:fixed;top:16px;right:20px;width:42px;height:42px;border:none;border-radius:50%;background:#fff;color:var(--barva-inkoust);font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

/* lupa v rohu dlaždice galerie — zvětšení bez otevření detailu */
.obr-karta{position:relative}
.tile-lupa{position:absolute;top:8px;right:8px;z-index:4;width:32px;height:32px;border-radius:50%;border:2px solid var(--barva-inkoust);background:#fff;color:var(--barva-inkoust);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 var(--barva-inkoust);opacity:.85;transition:.12s}
.tile-lupa:hover{opacity:1;background:var(--barva-zluta);transform:translateY(-1px)}
.komiks-rub{color:var(--seda-500);font-weight:400}

/* komiksy — galerie (dlaždice s prvním panelem) + detail (panely pod sebou) */
.komiks-pocet{position:absolute;bottom:8px;right:8px;background:var(--barva-inkoust);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;font-family:var(--font-nadpis)}
.komiks-box{padding:20px 24px}
.komiks-nadpis{font-family:var(--font-logo);font-weight:400;font-size:32px;line-height:1.05;margin:0 0 8px}
.komiks-uvod{font-size:17px;color:var(--seda-700);margin:0 0 14px}
.komiks-panely{display:flex;flex-direction:column;gap:12px}
.komiks-panel{margin:0;border:2px solid var(--barva-inkoust);border-radius:10px;overflow:hidden;box-shadow:3px 3px 0 var(--barva-inkoust);max-width:100%}
.komiks-panel img{display:block;width:100%;height:auto}
/* šablony rozložení panelů (skládačka) */
.komiks-panely.rozl-rada{flex-direction:row;flex-wrap:wrap}
.komiks-panely.rozl-rada .komiks-panel{flex:1 1 220px;min-width:0}
.komiks-panely.rozl-mrizka{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:560px){.komiks-panely.rozl-rada{flex-direction:column}.komiks-panely.rozl-mrizka{grid-template-columns:1fr}}

/* filtr typu obsahu ve výpisu fórů (druhá .razeni skupina) — odsazení od řazení */
#typ-filtr{margin-left:10px}
#typ-filtr .rz{background:#fff;cursor:pointer}

/* sdílení fóru na sítě (komponenta _Sdilet) */
.sdilet{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}
.sd{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--seda-200);background:#fff;color:var(--barva-inkoust);cursor:pointer;text-decoration:none;transition:transform .12s,background .12s,color .12s,border-color .12s}
.sd:hover{transform:translateY(-1px)}
.sd-fb:hover{background:#1877F2;color:#fff;border-color:#1877F2}
.sd-x:hover{background:#000;color:#fff;border-color:#000}
.sd-wa:hover{background:#25D366;color:#fff;border-color:#25D366}
.sd-mail:hover{background:var(--sekce-chat);color:#fff;border-color:var(--sekce-chat)}
.sd-nativ:hover,.sd-kopir:hover{background:var(--barva-magenta);color:#fff;border-color:var(--barva-magenta)}
.sd-kopir{position:relative}
.sd-kopir-hl{position:absolute;bottom:122%;left:50%;transform:translateX(-50%);background:var(--barva-inkoust);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.sd-kopir.ok .sd-kopir-hl{opacity:1}

/* obrázkové fóry — obrázek v kartě feedu, v detailu a galerie */
.kart-obr{margin:0 0 6px;border-radius:10px;overflow:hidden;border:1.5px solid var(--seda-100)}
.kart-obr img{display:block;width:100%;height:auto}
.fd-obr{margin:0 0 8px;border-radius:12px;overflow:hidden;max-width:100%}
.fd-obr img{display:block;width:100%;height:auto;border-radius:12px}
/* obrázkový fór v detailu: obrázek nahoře, případný text POD ním (ne vedle) */
.fd-telo-obr{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px}
.fd-telo-obr > p{margin:0}

/* galerie /obrazkove — jednoduchá multicol masonry, obrázek „jak je" */
.obr-galerie{columns:4 240px;column-gap:16px;margin-top:16px}
.obr-karta{break-inside:avoid;margin:0 0 16px;border:2px solid var(--barva-inkoust);border-radius:14px;overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--barva-inkoust);transition:transform .12s,box-shadow .12s}
.obr-karta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--barva-inkoust)}
.obr-plocha{display:block}
.obr-plocha img{display:block;width:100%;height:auto}
.obr-pata{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1.5px solid var(--seda-100)}
.obr-tag{font-family:var(--font-nadpis);font-weight:700;font-size:12px;color:var(--seda-500)}
.obr-prazdno{text-align:center;padding:54px 20px;color:var(--seda-500)}
.obr-prazdno h2{font-family:var(--font-logo);font-weight:400;font-size:30px;margin:12px 0 6px;color:var(--barva-inkoust)}
@media(max-width:520px){.obr-galerie{columns:2 150px;column-gap:10px}}

/* Výpis fórů (/fory) — doplněk k homepage kartám */
.vph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:10px 0 4px}
.vph h1{font-family:var(--font-logo);font-weight:400;font-size:40px;line-height:1.02}
.vph .pod{color:var(--seda-500);font-size:15px;margin-top:2px}
.pocet{font-family:var(--font-nadpis);font-weight:700;font-size:13px;color:var(--seda-400);white-space:nowrap}
.stit-chip{align-self:flex-start;font-family:var(--font-nadpis);font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--seda-500);background:var(--seda-50);border:1px solid var(--seda-200);border-radius:var(--r-pill);padding:2px 8px;margin-top:6px}
.patk{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid var(--seda-100)}

/* Kukin (maskot-postavička) — obsah bublin řídí server (kukin.js) */
.kukin{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:flex-end;gap:6px}
.kukin-fig{background:none;border:none;cursor:pointer;padding:0;line-height:0;flex:none}
.kukin-fig svg{filter:drop-shadow(2px 2px 0 rgba(16,16,26,.12));transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
/* Sedící Kukin (turecký sed, dřímá) — jen v minimalizovaném stavu. Přechod stoji↔sedi
   je plynulé „posazení": obě figury sdílí grid buňku a prolnou se (zmenší + poklesne), ne blik. */
.kukin-fig{display:grid}
.kukin-fig>svg{grid-area:1/1;align-self:end;justify-self:center;transition:opacity .4s ease,transform .42s cubic-bezier(.34,1.45,.6,1)}
.kukin-sedi{opacity:0;transform:translateY(12px) scale(.6);transform-origin:bottom center;pointer-events:none}
.kukin.min .kukin-stoji{opacity:0;transform:translateY(10px) scale(.58);pointer-events:none}
.kukin.min .kukin-sedi{opacity:1;transform:none;pointer-events:auto;animation:kukinKlimba 4.5s ease-in-out .5s infinite}
/* Když s ním uživatel interaguje, Kukin se zvětší — parťák, ne titěrná figurka. */
.kukin.aktivni .kukin-fig svg{transform:scale(1.42);transform-origin:bottom center}
.kukin-bub{background:#fff;border:3px solid var(--barva-inkoust);border-radius:16px 16px 4px 16px;box-shadow:4px 4px 0 var(--barva-inkoust);padding:11px 26px 11px 14px;max-width:230px;position:relative;font-size:13.5px;margin-bottom:6px;transition:max-width .3s ease,font-size .3s ease}
.kukin.aktivni .kukin-bub{max-width:290px;font-size:15px}
.kukin-bub .t{font-family:var(--font-nadpis);font-weight:700}
.kukin-bub .x{position:absolute;top:4px;right:8px;cursor:pointer;color:var(--seda-400);font-weight:700;font-size:13px}
.kukin-bub .pryc{position:absolute;top:6px;right:26px;cursor:pointer;color:var(--seda-400);font-family:var(--font-nadpis);font-weight:700;font-size:10px;text-transform:uppercase}
.kukin-bub .pryc:hover,.kukin-bub .x:hover{color:var(--barva-magenta)}
@media(max-width:560px){.kukin{right:10px;bottom:10px}.kukin-bub{max-width:165px;font-size:12px}.kukin-fig svg{width:52px}}
/* Kukinovy komiksové reakce na hlášku (HA!/PFF!) — citátový styl */
.kukin-reakce{display:flex;gap:6px;margin-top:9px}
.kukin-reakce .kr{font-family:var(--font-logo);font-size:13px;line-height:1;border:2.5px solid var(--barva-inkoust);border-radius:8px;padding:4px 9px 5px;cursor:pointer;box-shadow:2px 2px 0 var(--barva-inkoust);transition:transform .1s}
.kukin-reakce .kr:hover{transform:translate(-1px,-1px)}
.kukin-reakce .kr-ha{background:var(--barva-zluta);color:var(--barva-inkoust)}
.kukin-reakce .kr-fuj{background:#fff;color:var(--barva-inkoust)}
/* jemný idle pohyb Kukina (ať „žije") */
@keyframes kukinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.kukin-fig{animation:kukinBob 3.4s ease-in-out infinite}
/* Minimalizovaný = sedí a dřímá: žádné pohupování, jen jemné pomalé „klimbání" hlavou (po dosednutí). */
.kukin.min .kukin-fig{animation:none}
@keyframes kukinKlimba{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.6deg)}}
/* Kukinův odkaz — zábavnou formou (magenta, tečkovaně; na hoveru žlutý zvýrazňovač) */
.kukin-odkaz{color:var(--barva-magenta);font-weight:800;text-decoration:none;border-bottom:2px dotted var(--barva-magenta);padding:0 2px;border-radius:4px;transition:background .12s,color .12s,border-color .12s}
.kukin-odkaz:hover{background:var(--barva-zluta);color:var(--barva-inkoust);border-bottom-color:transparent}
/* Obousměrná komunikace: návštěvník píše Kukinovi. „šeptni mi" = nenásilný spouštěč. */
/* „šeptni mi" = pozvánka napsat Kukinovi. Pilulka s ikonou zprávy a šipkou K NĚMU
   (vpravo sedí figura) → evokuje „napiš a pošli mu to". Jemná pozvací animace láká. */
.kukin-sept{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;cursor:pointer;color:var(--barva-magenta);background:#fff2f7;border:1.5px dashed var(--barva-magenta);border-radius:999px;font-family:var(--font-nadpis);font-weight:700;font-size:11.5px;line-height:1;transition:background .14s,color .14s,transform .14s,box-shadow .14s;animation:kukinSeptLaka 3.6s ease-in-out infinite}
.kukin-sept svg{flex:none}
.kukin-sept-sip{opacity:.7;transition:transform .14s}
.kukin-sept:hover{background:var(--barva-magenta);color:#fff;border-style:solid;transform:translateY(-1px);box-shadow:2px 2px 0 var(--barva-inkoust);animation:none}
.kukin-sept:hover .kukin-sept-sip{transform:translateX(3px);opacity:1}
.kukin-sept[hidden]{display:none}
@keyframes kukinSeptLaka{0%,92%,100%{box-shadow:0 0 0 0 rgba(214,51,132,0)}96%{box-shadow:0 0 0 4px rgba(214,51,132,.14)}}
/* Formulářík od uživatele — vstup v OSOBNÍM ručně psaném fontu (odliší „hlas" uživatele od našeho). */
.kukin-odpov{display:flex;gap:6px;align-items:flex-end;margin-top:9px}
.kukin-odpov[hidden]{display:none}
/* „přemýšlím" — Kukin se tváří, že čte tvou zprávu, než dá odpověď */
.kukin-mysli{display:inline-flex;gap:5px;align-items:center;height:1.1em}
.kukin-mysli i{width:6px;height:6px;border-radius:50%;background:var(--barva-magenta);display:inline-block;animation:kukinMysli 1s ease-in-out infinite}
.kukin-mysli i:nth-child(2){animation-delay:.15s}
.kukin-mysli i:nth-child(3){animation-delay:.3s}
@keyframes kukinMysli{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.kukin-odpov textarea{flex:1;min-width:0;border:2px solid var(--barva-inkoust);border-radius:9px;padding:5px 9px;background:#fffdf3;font-family:'Caveat',cursive;font-size:18px;line-height:1.2;color:var(--barva-inkoust);outline:none;resize:none;overflow-y:auto;max-height:132px;display:block}
.kukin-odpov textarea::placeholder{color:var(--seda-400);font-size:16px}
.kukin-odpov textarea:focus{border-color:var(--barva-magenta);box-shadow:2px 2px 0 var(--barva-magenta)}
.kukin-odpov textarea:disabled{opacity:.6}
/* při psaní se bublina rozšíří, ať je vidět víc textu (nepoškodí rozmístění) */
.kukin.pise .kukin-bub{max-width:300px}
/* Pošli = „uživatelovo" tlačítko (jeho hlas, ne žlutá reakce Kukina). Kolečko se šipkou.
   --kukin-uziv = barva hlasu uživatele (default magenta; později modrá/růžová dle pohlaví). */
.kukin-odpov{--kukin-uziv:var(--barva-magenta)}
.kukin-posli{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--kukin-uziv);color:#fff;border:2px solid var(--barva-inkoust);border-radius:50%;cursor:pointer;box-shadow:2px 2px 0 var(--barva-inkoust);transition:transform .1s,filter .12s}
.kukin-posli svg{flex:none}
.kukin-posli:hover{transform:translate(-1px,-1px) rotate(-8deg);filter:brightness(1.08)}

/* Kukí lišta (cookie souhlas, Kukin styl) */
.kuki-lista{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--barva-inkoust);color:#fff;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:12px 18px;font-size:14px;box-shadow:0 -3px 0 var(--barva-zluta)}
.kuki-lista[hidden]{display:none}/* hidden musí přebít display:flex, jinak lišta nezmizí ani po „Ber to" */
.kuki-lista .kl-txt{max-width:760px}
.kuki-lista .kl-txt b{color:var(--barva-zluta)}
.kuki-lista .kl-ber{font-family:var(--font-nadpis);font-weight:700;background:var(--barva-zluta);color:var(--barva-inkoust);border:none;border-radius:999px;padding:8px 18px;cursor:pointer;box-shadow:2px 2px 0 rgba(0,0,0,.35);transition:transform .12s}
.kuki-lista .kl-ber:hover{transform:translate(-1px,-1px)}
/* když je Kukí lišta vidět, zvedni Kukina, ať ho nepřekrývá */
.kukin.nad-listou{bottom:92px;z-index:130}/* nad cookie lištou (i výškou i vrstvou), ať Kukina nepřekryje */

/* Kukin — režim „představení" (nový návštěvník): vlevo nahoře, zrcadlově, nad obsahem */
.kukin.uvod{left:14px;top:78px;right:auto;bottom:auto;flex-direction:row-reverse;align-items:flex-start;z-index:130}
.kukin.uvod .kukin-fig svg{transform:scaleX(-1)}
.kukin.uvod .kukin-bub{border-radius:16px 16px 16px 4px;max-width:270px;margin-bottom:0}
.uvod-volby{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.uvod-volby button{font-family:var(--font-nadpis);font-weight:700;font-size:13px;border:2px solid var(--barva-inkoust);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer}
.uvod-volby button:hover{background:var(--barva-zluta)}
@media(max-width:560px){.kukin.uvod{top:64px;left:8px}.kukin.uvod .kukin-bub{max-width:210px}}

/* Pás (stadionová stuha) — položky: odkazy do obsahu + highlighty + „probouzeče" */
.ticker .run a,.ticker .run .tk{color:#fff;text-decoration:none;font-family:var(--font-nadpis);font-weight:700;opacity:1}
.ticker .run a:hover{color:var(--barva-zluta)}
.ticker .run .tk-odd{opacity:.45;margin:0 11px}
.ticker .run .tk-frci{color:var(--barva-zluta)}
.ticker .run .tk-hit{color:#ff7bc2}
.ticker .run .tk-rub{color:#8fd3ff}
.ticker .run .tk-cta{color:var(--barva-zluta);text-decoration:underline}
.ticker .run .tk-probud{background:var(--barva-magenta);color:#fff;padding:2px 9px;border-radius:8px;font-family:var(--font-logo);letter-spacing:.02em}
/* při najetí myší pás ZPOMAL na třetinu (ne stop) — dá se kliknout, ale pořád „žije" */
/* pás animuje JS (rAF) — plynulá změna rychlosti při najetí bez cuknutí (viz kuksem.js tickerBeh) */

/* --- Detail fóru: ohraničený velký box + navigace po stranách + komentáře + reklama --- */
.for-detail-top{margin:14px 0 0}
.for-detail-radek{display:flex;align-items:center;gap:14px;margin:12px 0 26px}
/* kruhové šipky (dle prehled-mockupy.html „7 tlačítka") — lehké, nesplývají s boxem vtipu */
.fd-nav{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;text-decoration:none;color:var(--barva-inkoust);background:#fff;border:2.5px solid var(--barva-inkoust);box-shadow:2px 2px 0 var(--barva-inkoust);transition:transform .12s,background .12s}
.fd-nav:hover{background:var(--seda-50);transform:translate(-1px,-1px)}
.fd-nav-off{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--seda-300);border:2.5px solid var(--seda-200);background:#fff;opacity:.55}
.fd-box{flex:1;min-width:0;min-height:230px;display:flex;flex-direction:column;border:2px solid var(--barva-inkoust);border-radius:18px;background:#fff;box-shadow:6px 6px 0 var(--barva-inkoust);padding:24px 30px}
.fd-telo{overflow-wrap:anywhere}
.fd-hlava{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fd-telo{font-size:22px;line-height:1.5;margin:16px 0;flex:1;display:flex;align-items:center}
.fd-pata{padding-top:14px;border-top:1px solid var(--seda-100)}
.fd-pata .reakce{gap:8px}
@media(max-width:640px){.fd-nav,.fd-nav-off{width:40px;height:40px;font-size:18px}.fd-telo{font-size:18px}.fd-box{padding:18px}}

/* komentáře zarovnané VLEVO s boxem vtipu (levé odsazení 60px = šipka 46 + mezera 14),
   vpravo až k okraji stránky → větší reklamní box (dost místa) */
.komentare-sekce{display:grid;grid-template-columns:3fr 2fr;gap:24px;margin:6px 0 44px 60px}
@media(max-width:760px){.komentare-sekce{grid-template-columns:1fr;margin:6px 0 44px}}
.km-hlavni h2{font-family:var(--font-nadpis);font-weight:700;font-size:22px;margin:0 0 10px}
.km-list .km{padding:10px 0;border-bottom:1px solid var(--seda-100)}
.km-hl b{font-family:var(--font-nadpis)}
.km-cas{color:var(--seda-400);font-size:12px;margin-left:6px}
.km-txt{margin-top:2px;white-space:pre-wrap}
.km-prazdno{color:var(--seda-500)}
.km-form{margin-top:16px;display:flex;flex-direction:column;gap:8px;max-width:560px}
.km-form input[type=text],.km-form textarea{border:1.5px solid var(--seda-300);border-radius:10px;padding:9px;font:inherit;width:100%;box-sizing:border-box}
.km-form input:focus,.km-form textarea:focus{outline:none;border-color:var(--barva-magenta)}
.km-akce{display:flex;align-items:center;gap:12px}
/* vkládání smajlíků do komentáře */
.km-text-wrap{position:relative}
.km-text-wrap textarea{padding-right:42px}
.km-emoji{position:absolute;top:7px;right:7px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--barva-inkoust);border-radius:8px;cursor:pointer;padding:0;box-shadow:1px 1px 0 var(--barva-inkoust);transition:background .12s}
.km-emoji:hover{background:var(--barva-zluta)}
.km-emoji-panel{position:absolute;top:42px;right:6px;z-index:20;background:#fff;border:2px solid var(--barva-inkoust);border-radius:10px;box-shadow:3px 3px 0 var(--barva-inkoust);padding:6px;display:flex;flex-wrap:wrap;gap:2px;width:214px}
.km-emoji-panel[hidden]{display:none}
.km-emoji-i{font-size:20px;line-height:1;background:none;border:none;cursor:pointer;padding:4px;border-radius:6px}
.km-emoji-i:hover{background:var(--seda-100)}
.km-stav{font-size:13px;color:var(--seda-500)}
.km-rek .rek-box{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center;min-height:280px;border:2px dashed var(--seda-300);border-radius:16px;padding:28px 24px;background:repeating-linear-gradient(135deg,#fff,#fff 10px,#fafbfe 10px,#fafbfe 20px)}
.km-rek .rl{font-family:var(--font-nadpis);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--seda-400)}
.km-rek .rt{font-size:15px;color:var(--seda-500);max-width:26ch}

/* --- Modál přihlášení / registrace --- */
.modal-prihlaseni{position:fixed;inset:0;z-index:200;background:rgba(16,16,26,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-prihlaseni[hidden]{display:none}/* atribut hidden musí přebít display:flex, jinak nejde zavřít */
.mp-obal{position:relative;width:100%;max-width:400px;background:#fff;border:3px solid var(--barva-inkoust);border-radius:18px;box-shadow:7px 7px 0 var(--barva-inkoust);padding:22px 24px}
/* zavírací ✕ = decentní, v horní liště karty (žádné trčení z rohu ani rotace) */
.mp-top{display:flex;justify-content:flex-end;margin:-6px -6px 4px 0}
.mp-x{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--seda-100);border:none;border-radius:8px;font-size:14px;line-height:1;cursor:pointer;color:var(--seda-500);transition:background .12s,color .12s}
.mp-x:hover{background:var(--barva-magenta);color:#fff}
.mp-vitej{font-family:var(--font-nadpis);font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;margin-bottom:2px}
.mp-vitej svg{flex:none}
.mp-plny{width:100%;justify-content:center;margin-top:2px}
.mp-drobne{font-size:12px;color:var(--seda-400);text-align:center;margin-top:2px}
.mp-drobne a{color:var(--barva-magenta);text-decoration:none;font-weight:700}
.mp-nep{font-weight:400;color:var(--seda-400);font-size:.85em}
/* dvojjazyčné CTA (Přisedni ↔ Vstoupit) — crossfade na hover, obě slova ve stejné grid buňce */
.btn-2jazyk{display:inline-grid}
.btn-2jazyk .slang,.btn-2jazyk .normal{grid-area:1/1;transition:opacity .18s,transform .18s}
.btn-2jazyk .normal{opacity:0;transform:translateY(4px)}
.btn-2jazyk:hover .slang,.btn-2jazyk:focus-visible .slang{opacity:0;transform:translateY(-4px)}
.btn-2jazyk:hover .normal,.btn-2jazyk:focus-visible .normal{opacity:1;transform:translateY(0)}
.mp-taby{display:flex;gap:8px;margin-bottom:14px}
.mp-tab{flex:1;font-family:var(--font-nadpis);font-weight:700;font-size:15px;padding:8px;border:2px solid var(--barva-inkoust);background:#fff;border-radius:10px;cursor:pointer}
.mp-tab.akt{background:var(--barva-inkoust);color:#fff}
.mp-chyba{background:#fff0f0;border:1px solid #f3b7b7;color:#c62828;border-radius:8px;padding:8px 10px;margin-bottom:10px;font-size:14px}
.mp-form{display:flex;flex-direction:column;gap:10px}
.mp-form[hidden]{display:none}/* přepínání login↔registrace: hidden musí přebít display:flex */
.mp-form .btn-cta svg{margin-right:2px}
.mp-form label{display:flex;flex-direction:column;gap:4px;font-family:var(--font-nadpis);font-weight:700;font-size:13px}
.mp-form input[type=text],.mp-form input[type=email],.mp-form input[type=password]{border:1.5px solid var(--seda-300);border-radius:9px;padding:9px;font:inherit;font-weight:400}
.mp-form input:focus{outline:none;border-color:var(--barva-magenta)}
.mp-check{flex-direction:row !important;align-items:center;gap:7px !important;font-weight:400 !important;font-size:13px}
.mp-form .btn{margin-top:4px;justify-content:center}
.mp-social{margin-top:16px;text-align:center}
.mp-oddel{display:block;font-size:12px;color:var(--seda-400);margin-bottom:8px}
.mp-social-btns{display:flex;gap:8px;justify-content:center}
.mp-soc{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-nadpis);font-weight:700;font-size:13px;padding:8px;border:2px solid var(--seda-200);background:#fff;border-radius:10px;cursor:pointer}
.mp-soc img{width:18px;height:18px;flex:none}
.mp-soc:hover{border-color:var(--barva-inkoust)}
.mp-social-pozn{display:block;font-size:11px;color:var(--seda-400);margin-top:8px}

/* ===== overflow guard (nic nepřeteče na mobilu) =====
   POZOR: overflow-x:hidden na html/body dělá z nich scroll-kontejner a rozbíjí
   position:sticky hlavičky → používáme overflow-x:clip (ořízne, ale sticky drží). */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img{max-width:100%;height:auto}

/* ===== označení UKÁZKY (pevný vzor ≠ živá data z CMS) ===== */
.vzor-banner{border:2px dashed var(--barva-magenta);background:#fff6fb;color:var(--barva-inkoust);border-radius:12px;padding:10px 14px;margin:18px 0 0;font-family:var(--font-nadpis);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px}
.vzor-banner .zn{background:var(--barva-magenta);color:#fff;border-radius:6px;padding:1px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;flex:none}
/* Osobní pozdrav na homepage — hlavní (logo) písmo; obsah mění JS podle profilu návštěvníka */
/* Úvodní pozdrav = výrazný nadpis stránky (STATICKÝ, ne rotující bublina — to dělá Kukin). */
.pozdrav{margin:26px 0 20px}
.pozdrav h2{font-family:var(--font-logo);font-weight:400;font-size:48px;line-height:1.0;color:var(--barva-inkoust);margin:0;display:inline-block;position:relative;transition:opacity .25s}
.pozdrav h2::after{content:"";display:block;width:58px;height:5px;border-radius:3px;background:var(--barva-magenta);margin-top:12px}
.pozdrav .pozdrav-pod{font-family:var(--font-nadpis);font-weight:700;font-size:16px;color:var(--seda-600);margin-top:12px;max-width:60ch}
.pozdrav .pozdrav-pod b{color:var(--barva-magenta)}
@media(max-width:560px){.pozdrav h2{font-size:32px}.pozdrav .pozdrav-pod{font-size:14px}}
/* Placeholder „Připravujeme" pro nedodělané sekce */
.pripravujeme{text-align:center;max-width:640px;margin:36px auto 64px;padding:0 16px}
.pripravujeme .pr-oko svg{transform:rotate(-6deg)}
.pripravujeme h1{font-family:var(--font-logo);font-weight:400;font-size:52px;line-height:1;margin:8px 0 12px}
.pripravujeme .pr-vic{font-size:18px;margin:0 0 4px}
.pripravujeme .pr-min{color:var(--seda-500);font-size:14px;margin:2px 0 20px}
.pripravujeme .pr-akce{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.pripravujeme h1{font-size:38px}}
/* štítek „vzor" u sekce/karty, která je zatím pevný text (ne výsledek CMS) */
.vzor{font-family:var(--font-nadpis);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--seda-500);border:1.5px dashed var(--seda-400);border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:middle}
/* vizuální náznak „ukázka" — jemný šrafovaný podklad sekce s pevným obsahem */
.jevzor{position:relative}
.jevzor::before{content:'';position:absolute;inset:-6px;border:2px dashed var(--seda-300);border-radius:16px;pointer-events:none;opacity:.55}

/* ===== HOMEPAGE (dle design/mockups/kuksem-home.html) ===== */
/* Fór dne */
.featured{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin-top:22px}
@media(max-width:760px){.featured{grid-template-columns:1fr}}
.vtipf{border:1.5px solid var(--seda-200);border-radius:18px;padding:26px 28px;display:flex;flex-direction:column;position:relative;background:#fff;box-shadow:var(--stin-m)}
.vtipf .lbl{font-family:var(--font-nadpis);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--barva-magenta)}
/* „Fór dne" jako komiksové RAZÍTKO — první, co uživatel vidí; nakřivo, výrazné, přes roh karty */
.featured .vtipf{padding-top:34px}
.razitko-den{position:absolute;top:-15px;left:18px;z-index:3;display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-logo);line-height:1;color:#fff;background:var(--barva-magenta);border:3px solid var(--barva-inkoust);border-radius:9px;padding:6px 14px 7px;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--barva-inkoust);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.razitko-den span:first-child{font-size:23px}
.razitko-den span:last-child{font-size:23px;color:var(--barva-zluta)}
@media(max-width:560px){.razitko-den{font-size:.9em;left:12px}.razitko-den span{font-size:19px}}
.vtipf .pi{font-size:23px;line-height:1.4;margin:10px 0;max-width:36ch;transition:opacity .16s}
.vtipf .pata{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;border-top:1px solid var(--seda-100)}
.vtipf .sym{position:absolute;top:16px;right:18px}
.dalsi{margin-left:auto;font-family:var(--font-nadpis);font-weight:700;font-size:14px;cursor:pointer;color:var(--barva-inkoust);background:var(--barva-zluta);border:2.5px solid var(--barva-inkoust);border-radius:999px;padding:7px 15px;box-shadow:3px 3px 0 var(--barva-inkoust);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:transform .12s,box-shadow .12s}
.dalsi:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--barva-magenta)}
.sloupec{display:flex;flex-direction:column;gap:18px}
.mini{background:#fff;border:1.5px solid var(--seda-200);border-left:5px solid var(--akc,var(--sekce-pribehy));border-radius:16px;text-decoration:none;color:inherit;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:16px 18px;box-shadow:var(--stin-m);transition:transform .15s,box-shadow .15s}
.mini:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--stin-l)}
.mini .lbl{font-family:var(--font-nadpis);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--akc,var(--sekce-pribehy))}
.mini h3{font-family:var(--font-nadpis);font-weight:700;font-size:18px;color:var(--barva-inkoust)}
.mini .meta{font-family:var(--font-nadpis);font-weight:600;font-size:12px;color:var(--seda-500)}
/* Co tu frčí (rubriky) */
.rubriky{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.rubriky{grid-template-columns:repeat(2,1fr)}}
.rub{border:1.5px solid var(--seda-200);border-radius:14px;padding:15px;text-decoration:none;color:inherit;background:#fff;transition:transform .15s,box-shadow .15s;border-top:4px solid var(--akc,#ccc)}
.rub:hover{transform:translateY(-4px);box-shadow:var(--stin-m)}
.rub .top{display:flex;align-items:center;gap:10px}
.rub .ic{width:42px;height:42px;border-radius:12px;background:#fff;border:2.5px solid var(--barva-inkoust);box-shadow:2px 2px 0 var(--barva-inkoust);display:flex;align-items:center;justify-content:center;flex:none;transform:rotate(-4deg)}
@keyframes treso{0%,100%{transform:rotate(-4deg)}30%{transform:rotate(-13deg)}60%{transform:rotate(4deg)}}
.rub:hover .ic{animation:treso .5s}
.rub h3{font-family:var(--font-nadpis);font-weight:700;font-size:16px}.rub p{font-size:12.5px;color:var(--seda-500);margin-top:8px}
/* Čerstvý fóry (mozaika) — široká/vysoká karta */
.kart.siroky{grid-column:1/3;background:var(--barva-zluta);border-color:var(--barva-inkoust);box-shadow:5px 5px 0 var(--barva-inkoust)}
.kart.siroky:hover{box-shadow:7px 7px 0 var(--barva-magenta);transform:translate(-2px,-2px)}
.kart.siroky .pi{font-size:20px}
.kart.vysoky{grid-column:3;grid-row:1/3;background:#fff}.kart.vysoky .pi{font-size:17px}
@media(max-width:820px){.kart.siroky{grid-column:1/3}.kart.vysoky{grid-column:1/3;grid-row:auto}}
@media(max-width:540px){.kart.siroky,.kart.vysoky{grid-column:1}}