/* ==========================================================================
   WIKI — js/wiki.js + js/wiki-data.js
   --------------------------------------------------------------------------
   ÚVOD (bez pravého panelu):
     filmový hero s ozdobným hledáním → Začni tady (cesta o 4 krocích) →
     kapitoly = široký obrazový pás + velké obrazové dlaždice kategorií →
     „Věděl jsi?" na pergamenu
   ČLÁNEK: stránka knihy — světlý pergamen, tmavé písmo, iniciála, karmínové
     nadpisy s ornamentem; vpravo tmavý panel (obsah článku se lepí).

   ŠÍŘKY (obsahová plocha hry, ne okno):
     ≥ 1280 px okna  strom | článek | panel  (úvod: strom | obsah)
     768–1279 px     strom | článek, panel pod článkem
     < 768 px        jeden sloupec, strom jako vysouvací zásuvka (≡ Kategorie)
   Zásuvka je position:fixed — proto .wk NESMÍ mít container-type (dělal by
   z ní obal i pro fixed potomky, viz safíry v thelyon-ui.css).

   SPECIFICITA: game.css barví obecně `#centerContent p / h2 / h3 / li / td /
   em / i` a `.parchment button`. Pravidla s textem proto začínají
   `:is(#centerContent,body)` — váha ID, a přitom platí kdekoli.
   ========================================================================== */

.wk{
  --wk-kamen:linear-gradient(180deg,rgba(18,16,15,.95),rgba(9,8,8,.97));
  --wk-kamen-plny:linear-gradient(180deg,#141210,#0a0908);
  --wk-okraj:rgba(196,150,72,.5);
  --wk-okraj-silny:rgba(214,168,71,.8);
  --wk-karmin:linear-gradient(180deg,#7a1414 0%,#5a0c0c 55%,#3d0707 100%);
  --wk-text:#ddd0b4;
  --wk-tlumeny:#a99a7c;
  --wk-mezera:14px;
  /* pergamen (články) */
  --pg-text:#2e2012;
  --pg-tlumeny:#6b5434;
  --pg-nadpis:#701313;
  --pg-okraj:rgba(120,82,28,.45);
  --pg-odkaz:#8a1c12;

  display:grid;
  grid-template-columns:214px minmax(0,1fr) 256px;
  grid-template-areas:
    "strom obsah hledat"
    "strom obsah bok";
  grid-template-rows:auto 1fr;
  gap:var(--wk-mezera);
  align-items:start;
  color:var(--wk-text);
  font:400 16px/1.5 var(--tl-pismo-text);font-size-adjust:none;
}
.wk.wk-uvod{
  grid-template-columns:214px minmax(0,1fr);
  grid-template-areas:
    "strom hero"
    "strom obsah";
  grid-template-rows:auto 1fr;
}
.wk-lista,.wk-clona{display:none}

/* sticky strom a obsah článku: overflow-x:hidden na body z něj dělá scroll
   kontejner a sticky by se lepil k němu, ne k oknu (recept ze Zásilek .zs) */
body:has(.wk){overflow-x:hidden;overflow-x:clip}
body.nav-open:has(.wk){overflow:clip}
@media (min-width:768px){body:has(.wk) .left-banner{position:relative}}
.wk-strom{grid-area:strom}
.wk-hero{grid-area:hero}
.wk > .wk-hledat{grid-area:hledat}
.wk-obsah{grid-area:obsah;min-width:0}
.wk-bok{grid-area:bok;min-width:0}

.wk :is(a,button):focus-visible,
.wk .wk-tab-obal:focus-visible{outline:2px solid var(--tl-zlato-300);outline-offset:2px}

/* společný rám tmavého panelu: kámen, mosazná linka */
.wk-strom,.wk-panel,.wk-hledat-box,.wk-vysl-pol,.wk-toc{
  background:var(--wk-kamen);
  border:1px solid var(--wk-okraj);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,225,160,.06),0 4px 14px rgba(0,0,0,.5);
}
.wk-h2 .tl-ik,.wk-panel-titul .tl-ik,.wk-toc-titul .tl-ik{width:20px;height:20px;flex:0 0 auto}

/* ============================================================ STROM === */
.wk-strom{
  position:sticky;top:10px;
  max-height:calc(100vh - 20px);overflow-y:auto;overscroll-behavior:contain;
  padding:8px 0 10px;box-sizing:border-box;
  scrollbar-width:thin;scrollbar-color:#8a6a2a transparent;
}
:is(#centerContent,body) .wk-strom a{text-decoration:none}
.wk-strom .tl-ik{width:19px;height:19px;flex:0 0 auto}
.wk-strom-txt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

:is(#centerContent,body) .wk-strom-uvod,
:is(#centerContent,body) .wk-strom-odkaz{
  display:flex;align-items:center;gap:9px;
  min-height:32px;padding:4px 8px 4px 10px;box-sizing:border-box;
  color:#e6dcc6;text-shadow:0 1px 2px #000;
  font:500 14.5px/1.15 var(--tl-pismo-text);
}
:is(#centerContent,body) .wk-strom-uvod{margin:0 8px 4px;border:1px solid transparent}

.wk-strom-skup{margin-top:10px}
:is(#centerContent,body) .wk-strom-skup-titul{
  display:flex;align-items:center;gap:8px;
  margin:0;padding:6px 14px 5px;
  color:#c9a45c;font:700 11px/1.2 var(--tl-pismo-nadpis);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 2px #000;
}
.wk-strom-skup-titul::after{content:'';flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(214,168,71,.45),rgba(214,168,71,0))}

.wk-strom-radek{display:flex;align-items:stretch;margin:0 8px;border-radius:2px}
:is(#centerContent,body) .wk-strom-odkaz{flex:1 1 auto;min-width:0}
:is(#centerContent,body) .wk-strom-uvod:hover,
:is(#centerContent,body) .wk-strom-radek:hover .wk-strom-odkaz{color:#fff3d0}
.wk-strom-radek:hover,.wk-strom-uvod:hover{background:rgba(255,215,140,.06)}

:is(#centerContent,body) .wk-strom-uvod.active,
.wk-strom-kat.active > .wk-strom-radek{
  background:var(--wk-karmin);
  box-shadow:inset 0 0 0 1px var(--wk-okraj-silny),inset 0 1px 0 rgba(255,200,160,.25),0 2px 6px rgba(0,0,0,.5);
}
:is(#centerContent,body) .wk-strom-uvod.active,
:is(#centerContent,body) .wk-strom-kat.active .wk-strom-odkaz{color:#fff1cf}

:is(#centerContent,body) .wk-strom-sipka{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  margin:0;padding:0 8px 0 4px;min-height:0;
  background:none;border:none;box-shadow:none;border-radius:0;
  cursor:pointer;filter:none;
}
.wk-strom-sipka::after{
  content:'';width:6px;height:6px;
  border-right:2px solid var(--tl-zlato-500);border-bottom:2px solid var(--tl-zlato-500);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;
}
.wk-strom-kat.otevrena .wk-strom-sipka::after{transform:translateY(2px) rotate(-135deg)}
:is(#centerContent,body) .wk-strom-sipka:hover{background:rgba(255,215,140,.08)}
:is(#centerContent,body) .wk-pocet{
  min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.45);border:1px solid rgba(214,168,71,.35);
  color:#d8bd7e;font:600 11px/1 var(--tl-pismo-text);text-shadow:none;
}
.wk-strom-pod{
  display:grid;margin:2px 8px 6px 26px;padding-left:10px;
  border-left:1px solid rgba(214,168,71,.35);
}
:is(#centerContent,body) .wk-strom-clanek{
  display:block;padding:5px 8px;
  color:#cdbf9f;font:400 14px/1.25 var(--tl-pismo-text);text-shadow:0 1px 2px #000;
}
:is(#centerContent,body) .wk-strom-clanek:hover{color:#fff3d0;background:rgba(255,215,140,.05)}
:is(#centerContent,body) .wk-strom-clanek.active{
  color:var(--tl-text-zlaty);
  background:linear-gradient(90deg,rgba(166,28,28,.45),transparent);
  box-shadow:inset 2px 0 0 var(--tl-zlato-500);
}

/* ============================================================= HERO === */
.wk-hero{
  container-type:inline-size;
  position:relative;overflow:hidden;
  min-height:400px;aspect-ratio:1536/620;max-height:480px;
  border:1px solid var(--wk-okraj-silny);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 0 5px rgba(10,8,6,.55),inset 0 0 0 6px rgba(214,168,71,.35),0 10px 30px rgba(0,0,0,.65);
  background:#0c0906;
  display:flex;align-items:flex-end;justify-content:center;
}
.wk-hero-obr{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;display:block;
  animation:wk-dech 24s ease-in-out infinite alternate;
}
@keyframes wk-dech{from{transform:scale(1)}to{transform:scale(1.06)}}
.wk-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(8,6,4,.97) 0%,rgba(8,6,4,.78) 34%,rgba(8,6,4,.1) 72%,rgba(8,6,4,.35) 100%),
    radial-gradient(ellipse 55% 60% at 50% 88%,rgba(8,6,4,.6),rgba(8,6,4,0));
}
.wk-hero-txt{
  position:relative;z-index:1;
  width:min(660px,92%);margin:0 auto;padding:0 0 30px;
  display:grid;gap:8px;justify-items:center;text-align:center;
}
:is(#centerContent,body) .wk-hero-nad{
  display:flex;align-items:center;gap:12px;margin:0;color:#e0bf74;
  font:700 clamp(11px,1.3cqw,14px)/1.2 var(--tl-pismo-nadpis);letter-spacing:.3em;
  text-transform:uppercase;text-shadow:0 2px 4px #000;
}
.wk-hero-nad::before,.wk-hero-nad::after{
  content:'';width:clamp(30px,7cqw,80px);height:1px;
  background:linear-gradient(90deg,rgba(224,191,116,0),#e0bf74);
}
.wk-hero-nad::after{transform:scaleX(-1)}
:is(#centerContent,body) .wk-hero-titul{
  margin:0;
  font:900 clamp(38px,7.6cqw,82px)/.95 var(--tl-pismo-nadpis);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#fff6d6 0%,#f3d489 38%,#c8902e 62%,#f6dc93 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #3a2305) drop-shadow(0 6px 16px rgba(0,0,0,.9));
  text-shadow:none;
}
:is(#centerContent,body) .wk-hero-popis{
  margin:0 0 10px;max-width:36em;color:#eadfc4;
  font:400 clamp(14px,1.7cqw,17px)/1.45 var(--tl-pismo-text);text-shadow:0 1px 4px #000;
}
.wk-hledat-hero{width:100%}
:is(#centerContent,body) .wk-hledat-hero .wk-hledat-box{
  padding:6px 8px 6px 18px;border-radius:999px;
  background:rgba(8,7,6,.88);border:1px solid var(--wk-okraj-silny);
  box-shadow:0 0 0 4px rgba(214,168,71,.12),0 0 28px rgba(241,205,114,.18),0 8px 22px rgba(0,0,0,.7);
}
:is(#centerContent,body) .wk-hledat-hero .wk-hledat-box:focus-within{box-shadow:0 0 0 4px rgba(214,168,71,.28),0 0 36px rgba(241,205,114,.35),0 8px 22px rgba(0,0,0,.7)}
:is(#centerContent,body) .wk-hledat-hero .wk-hledat-box input{
  height:46px;font-size:17px;background:transparent;border:none;box-shadow:none;padding:0 6px;
}
:is(#centerContent,body) .wk-hledat-hero .wk-hledat-box input:focus{box-shadow:none}
.wk-hledat-hero .wk-hledat-box > .tl-ik{width:24px;height:24px}
:is(#centerContent,body) .wk-hledat-hero .wk-kbd{margin-right:8px}

.wk-oblibene{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:4px}
:is(#centerContent,body) .wk-oblibene > span{color:#cbbb98;font:400 13.5px/1 var(--tl-pismo-text);text-shadow:0 1px 2px #000;margin-right:2px}
:is(#centerContent,body) .wk-stitek{
  margin:0;padding:6px 13px;min-height:0;border-radius:999px;
  background:rgba(20,16,12,.8);border:1px solid rgba(214,168,71,.5);box-shadow:none;filter:none;
  color:#ecd9a8;font:500 13.5px/1 var(--tl-pismo-text);text-shadow:0 1px 2px #000;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
:is(#centerContent,body) .wk-stitek:hover{border-color:var(--tl-zlato-300);background:rgba(122,20,20,.8);color:#fff3d0;transform:translateY(-1px)}

.wk-uvod.wk-hleda .wk-hero{min-height:0;aspect-ratio:auto;padding-top:24px}
.wk-uvod.wk-hleda :is(.wk-hero-nad,.wk-hero-popis,.wk-oblibene){display:none}
:is(#centerContent,body) .wk-uvod.wk-hleda .wk-hero-titul{font-size:34px}
.wk-uvod.wk-hleda .wk-hero-txt{padding-bottom:20px}

/* ========================================================== HLEDÁNÍ === */
.wk-hledat{position:relative;z-index:2}
.wk-hledat-box{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;box-sizing:border-box;cursor:text;
}
.wk-hledat-box > .tl-ik{width:20px;height:20px;flex:0 0 auto}
:is(#centerContent,body) .wk-hledat-box input{
  flex:1 1 auto;min-width:0;height:34px;margin:0;padding:0 10px;box-sizing:border-box;
  background:#0b0a09;border:1px solid rgba(160,125,65,.5);border-radius:2px;
  color:#f1e6cc;font:400 15px/1 var(--tl-pismo-text);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
}
:is(#centerContent,body) .wk-hledat-box input::placeholder{color:#8f8168}
:is(#centerContent,body) .wk-hledat-box input:focus{outline:none;border-color:var(--tl-zlato-300);box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 0 1px rgba(241,205,114,.35)}
:is(#centerContent,body) .wk-kbd{
  flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;
  display:grid;place-items:center;border-radius:3px;
  background:linear-gradient(180deg,#2a241c,#15120e);border:1px solid rgba(214,168,71,.45);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.6);
  color:#d8bd7e;font:600 12px/1 var(--tl-pismo-text);
}

/* ======================================================= PRAVÝ PANEL === */
.wk-bok{display:grid;gap:var(--wk-mezera);align-content:start}
.wk:not(.wk-uvod) .wk-bok{align-self:stretch}
.wk-panel{padding:10px 12px 12px;box-sizing:border-box;min-width:0}
:is(#centerContent,body) .wk-panel-titul{
  display:flex;align-items:center;gap:8px;
  margin:0 0 6px;padding:0 0 7px;
  border-bottom:1px solid rgba(214,168,71,.35);
  color:var(--tl-text-zlaty);font:600 16.5px/1.2 var(--tl-pismo-nadpis);letter-spacing:.02em;
  text-shadow:0 1px 3px #000;
}
.wk-odkazy{display:grid}
:is(#centerContent,body) .wk-odkazy-pol{
  display:flex;align-items:center;gap:9px;
  padding:6px 4px;border-bottom:1px solid rgba(160,125,65,.16);
  color:#d6c9ab;text-decoration:none;font:400 14.5px/1.25 var(--tl-pismo-text);
}
:is(#centerContent,body) .wk-odkazy-pol:last-child{border-bottom:none}
.wk-odkazy-pol .tl-ik{width:18px;height:18px;flex:0 0 auto}
.wk-odkazy-pol > span:last-child{flex:1 1 auto;min-width:0}
.wk-odkazy-pol::after{
  content:'';flex:0 0 auto;width:6px;height:6px;margin-right:3px;
  border-right:1.5px solid #cfa65a;border-top:1.5px solid #cfa65a;transform:rotate(45deg);
}
:is(#centerContent,body) .wk-odkazy-pol:hover{color:#fff3d0;background:rgba(255,215,140,.05)}

/* pergamenový podklad — tip v panelu, Věděl jsi?, článek */
.wk-panel.wk-tipy,.wk-vedel,.wk-clanek{
  background:
    radial-gradient(ellipse at 18% 0%,rgba(255,251,236,.75),transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(150,105,40,.28),transparent 60%),
    linear-gradient(180deg,#f2e6c8 0%,#e8d6ac 55%,#dcc596 100%);
  border:1px solid #6f5122;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,225,.55),
    inset 0 0 70px rgba(125,85,25,.38),
    0 0 0 3px #1a140d,0 0 0 4px rgba(214,168,71,.5),
    0 10px 28px rgba(0,0,0,.6);
}
.wk-panel.wk-tipy{padding:0 0 12px;margin:4px}
:is(#centerContent,body) .wk-tipy .wk-panel-titul{
  margin:0 0 8px;padding:8px 12px;border-bottom:1px solid #8a6424;
  background:var(--wk-karmin);color:#f6dfa0;
}
:is(#centerContent,body) .wk-tipy p{
  margin:0;padding:0 12px;color:var(--pg-text);font:500 14.5px/1.42 var(--tl-pismo-text);text-shadow:none;
}

/* ================================================== OBSAH ČLÁNKU (TOC) === */
.wk-toc{padding:10px 12px 10px;box-sizing:border-box;min-width:0}
.wk-toc-bok{position:sticky;top:10px;z-index:3;background:var(--wk-kamen-plny)}
.wk-toc-clanek{display:none;margin:0 0 16px}
:is(#centerContent,body) .wk-toc-titul{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0 0 7px;
  border-bottom:1px solid rgba(214,168,71,.35);
  color:var(--tl-text-zlaty);font:600 16.5px/1.2 var(--tl-pismo-nadpis);text-shadow:0 1px 3px #000;
}
.wk-toc-seznam{margin:0;padding:0;list-style:none;display:grid;counter-reset:wk-toc}
.wk-toc-seznam li{counter-increment:wk-toc}
:is(#centerContent,body) .wk-toc-pol{
  position:relative;display:flex;gap:8px;width:100%;
  margin:0;padding:5px 6px 5px 10px;min-height:0;box-sizing:border-box;
  background:none;border:none;border-left:2px solid rgba(214,168,71,.18);border-radius:0;box-shadow:none;filter:none;
  color:#cdbf9f;font:400 14px/1.3 var(--tl-pismo-text);text-align:left;text-shadow:0 1px 2px #000;cursor:pointer;
}
.wk-toc-pol::before{content:counter(wk-toc) '.';flex:0 0 auto;min-width:1.3em;color:#a8884a;font-weight:600}
:is(#centerContent,body) .wk-toc-pol:hover{color:#fff3d0;background:rgba(255,215,140,.05)}
:is(#centerContent,body) .wk-toc-pol.active{
  color:var(--tl-text-zlaty);border-left-color:var(--tl-zlato-500);
  background:linear-gradient(90deg,rgba(166,28,28,.4),transparent);
}

/* ====================================================== ÚVOD === */
.wk-uvod .wk-obsah{display:grid;gap:34px;padding-top:8px}
.wk-sekce + .wk-sekce{margin-top:22px}
.wk-uvod .wk-sekce + .wk-sekce{margin-top:0}
:is(#centerContent,body) .wk-h2{
  position:relative;display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:0 0 7px;
  color:var(--tl-text-zlaty);font:600 22px/1.2 var(--tl-pismo-nadpis);letter-spacing:.01em;
  text-shadow:0 2px 4px #000;
}
:is(#centerContent,body) .wk-h2::after{
  content:'';position:absolute;left:0;bottom:0;width:min(280px,70%);height:1px;
  background:linear-gradient(90deg,var(--tl-zlato-500),rgba(214,168,71,0));
}

/* nadpis s ornamentem na obě strany ─── ◆ Začni tady ◆ ─── */
:is(#centerContent,body) .wk-nadpis-orn{
  display:flex;align-items:center;gap:16px;margin:0 0 18px;
  color:var(--tl-text-zlaty);font:700 clamp(20px,2.2vw,26px)/1.1 var(--tl-pismo-nadpis);
  letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 6px #000;
}
.wk-nadpis-orn::before,.wk-nadpis-orn::after{
  content:'';flex:1 1 auto;height:9px;
  background:
    linear-gradient(var(--tl-zlato-500),var(--tl-zlato-500)) center/100% 1px no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%);
}
.wk-nadpis-orn::after{transform:scaleX(-1)}
.wk-nadpis-orn span{display:flex;align-items:center;gap:14px}
.wk-nadpis-orn span::before,.wk-nadpis-orn span::after{
  content:'';width:9px;height:9px;transform:rotate(45deg);
  background:var(--tl-zlato-gradient);box-shadow:0 0 0 1px #3a2305,0 0 10px rgba(241,205,114,.5);
}

/* --- Začni tady: cesta o čtyřech zastaveních --- */
.wk-kroky-mriz{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wk-kroky-mriz::before{
  content:'';position:absolute;left:12%;right:12%;top:31px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(214,168,71,.75) 0 10px,transparent 10px 18px);
}
:is(#centerContent,body) .wk-krok{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:0 10px 16px;text-decoration:none;
}
.wk-krok-cislo{
  position:relative;z-index:1;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a32020,#5a0c0c 60%,#2d0505);
  color:#f6dfa0;font:700 21px/1 var(--tl-pismo-nadpis);text-shadow:0 2px 3px #000;
  box-shadow:0 0 0 2px #d6a847,0 0 0 5px #120d08,0 0 0 6px rgba(214,168,71,.55),0 6px 16px rgba(0,0,0,.7);
  transition:transform .2s ease,box-shadow .2s ease;
}
:is(#centerContent,body) .wk-krok-titul{margin-top:8px;color:#f3d489;font:700 17px/1.15 var(--tl-pismo-nadpis);text-shadow:0 1px 3px #000}
:is(#centerContent,body) .wk-krok-popis{color:#cdbf9f;font:400 14px/1.35 var(--tl-pismo-text)}
:is(#centerContent,body) .wk-krok-cas{display:inline-flex;align-items:center;gap:5px;color:var(--wk-tlumeny);font:400 12.5px/1 var(--tl-pismo-text)}
.wk-krok-cas .tl-ik{width:14px;height:14px}
.wk-krok:hover .wk-krok-cislo{transform:translateY(-3px) scale(1.05);box-shadow:0 0 0 2px #f1cd72,0 0 0 5px #120d08,0 0 0 6px rgba(241,205,114,.8),0 0 24px rgba(241,205,114,.45),0 8px 18px rgba(0,0,0,.7)}
:is(#centerContent,body) .wk-krok:hover .wk-krok-titul{color:#fff3d0}

/* --- kapitola: široký obrazový pás --- */
.wk-skup-pas{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;
  min-height:118px;margin:0 0 14px;padding:18px 22px;box-sizing:border-box;
  border:1px solid var(--wk-okraj-silny);background:#0c0906;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),0 6px 18px rgba(0,0,0,.55);
}
.wk-skup-obr{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 35%;filter:saturate(1.1);
}
.wk-skup-pas::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,6,4,.96) 0%,rgba(8,6,4,.85) 38%,rgba(8,6,4,.25) 75%,rgba(8,6,4,.55) 100%);
}
.wk-skup-pas > :not(img){position:relative;z-index:1}
.wk-skup-ik{
  flex:0 0 64px;height:64px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a32020,#5a0c0c 60%,#2d0505);
  box-shadow:0 0 0 2px #d6a847,0 0 0 5px rgba(0,0,0,.7),0 0 0 6px rgba(214,168,71,.45),0 6px 14px rgba(0,0,0,.7);
}
.wk-skup-ik .tl-ik{width:32px;height:32px}
.wk-skup-txt{display:grid;gap:3px;min-width:0}
:is(#centerContent,body) .wk-skup-nad{color:#d4b26a;font:700 12px/1 var(--tl-pismo-nadpis);letter-spacing:.28em;text-transform:uppercase;text-shadow:0 1px 3px #000}
:is(#centerContent,body) .wk-skup-titul{
  margin:0;font:700 clamp(22px,2.4vw,30px)/1.1 var(--tl-pismo-nadpis);letter-spacing:.03em;
  background:var(--tl-zlato-gradient);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #3a2305) drop-shadow(0 3px 8px rgba(0,0,0,.9));text-shadow:none;
}
:is(#centerContent,body) .wk-skup-popis{color:#e2d6ba;font:400 15px/1.35 var(--tl-pismo-text);text-shadow:0 1px 3px #000}

/* --- dlaždice kategorie: celá je obrázek --- */
.wk-kat-mriz{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
:is(#centerContent,body) .wk-kat{
  position:relative;display:block;overflow:hidden;aspect-ratio:4/4.6;
  border:1px solid rgba(214,168,71,.65);background:#0c0906;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),0 6px 16px rgba(0,0,0,.6);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.wk-kat-obr{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 30%;transition:transform .5s ease,filter .3s ease;
}
.wk-kat::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,4,3,.97) 0%,rgba(6,4,3,.82) 30%,rgba(6,4,3,.15) 62%,rgba(6,4,3,.35) 100%);
  box-shadow:inset 0 0 0 4px rgba(10,8,6,.5),inset 0 0 0 5px rgba(214,168,71,.25);
}
.wk-kat > :not(img){position:absolute;z-index:1}
.wk-kat-ik{
  top:10px;left:10px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,8,6,.82);box-shadow:0 0 0 1px rgba(214,168,71,.7),0 3px 8px rgba(0,0,0,.6);
}
.wk-kat-ik .tl-ik{width:20px;height:20px}
:is(#centerContent,body) .wk-kat-pocet{
  top:12px;right:10px;padding:4px 9px;border-radius:999px;
  background:rgba(8,6,4,.82);border:1px solid rgba(214,168,71,.5);
  color:#e3cf9c;font:600 11.5px/1 var(--tl-pismo-text);
}
.wk-kat-txt{left:14px;right:14px;bottom:12px;display:grid;gap:4px}
:is(#centerContent,body) .wk-kat-nazev{color:#f3d489;font:700 19px/1.1 var(--tl-pismo-nadpis);text-shadow:0 2px 4px #000}
:is(#centerContent,body) .wk-kat-popis{
  color:#ddd0b0;font:400 13.5px/1.32 var(--tl-pismo-text);text-shadow:0 1px 2px #000;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
:is(#centerContent,body) .wk-kat-dal{
  max-height:0;opacity:0;overflow:hidden;
  color:var(--wk-zlaty,#f1cd72);font:700 12px/1.4 var(--tl-pismo-nadpis);letter-spacing:.14em;text-transform:uppercase;
  transition:max-height .22s ease,opacity .22s ease;
}
:is(#centerContent,body) .wk-kat:hover{
  transform:translateY(-4px);border-color:#f1cd72;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),0 0 22px rgba(241,205,114,.35),0 14px 26px rgba(0,0,0,.7);
}
.wk-kat:hover .wk-kat-obr{transform:scale(1.08);filter:brightness(1.12)}
:is(#centerContent,body) .wk-kat:hover .wk-kat-dal{max-height:20px;opacity:1}

/* --- Věděl jsi? (pergamen) --- */
.wk-vedel{padding:18px 22px 20px;margin:4px}
.wk-vedel-hlava{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--pg-okraj)}
.wk-vedel-hlava .tl-ik{width:26px;height:26px;background:linear-gradient(180deg,#b3261e,#5a0c0c)}
:is(#centerContent,body) .wk-vedel-titul{margin:0;color:var(--pg-nadpis);font:700 22px/1.1 var(--tl-pismo-nadpis);letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,250,235,.7)}
.wk-vedel-seznam{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 26px}
:is(#centerContent,body) .wk-vedel-seznam li{
  position:relative;margin:0;padding-left:20px;
  color:var(--pg-text);font:500 15px/1.45 var(--tl-pismo-text);text-shadow:none;
}
.wk-vedel-seznam li::before{content:'';position:absolute;left:2px;top:.5em;width:8px;height:8px;background:#7a1414;transform:rotate(45deg)}

/* ========================================================== ČLÁNEK === */
/* stránka knihy: pergamen, tmavé písmo */
.wk-clanek{padding:14px 30px 22px;box-sizing:border-box;min-width:0;margin:4px;color:var(--pg-text)}
:is(#centerContent,body) .wk-drobky{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;
  color:var(--pg-tlumeny);font:400 13.5px/1.3 var(--tl-pismo-text);text-shadow:none;
}
:is(#centerContent,body) .wk-drobky a{color:var(--pg-odkaz);text-decoration:none}
:is(#centerContent,body) .wk-drobky a:hover{text-decoration:underline}
:is(#centerContent,body) .wk-drobky b{color:var(--pg-text);font-weight:700}

.wk-banner{
  position:relative;overflow:hidden;min-height:210px;margin:0 -14px 18px;
  display:flex;align-items:flex-end;
  border:1px solid #3a2a12;
  box-shadow:0 0 0 3px #e8d6ac,0 0 0 4px #8a6424,0 8px 18px rgba(60,35,10,.45);
  background:#0c0906;
}
.wk-banner-obr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;filter:brightness(1.15) saturate(1.05)}
.wk-banner::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,6,4,.9) 0%,rgba(8,6,4,.62) 45%,rgba(8,6,4,0) 82%),
    linear-gradient(0deg,rgba(8,6,4,.65),rgba(8,6,4,0) 55%);
}
.wk-banner-txt{position:relative;z-index:1;display:grid;gap:6px;padding:18px 22px 16px;max-width:min(600px,100%)}
:is(#centerContent,body) .wk-banner-kat{
  display:inline-flex;align-items:center;gap:6px;
  color:#d4b26a;font:600 12.5px/1 var(--tl-pismo-nadpis);letter-spacing:.14em;text-transform:uppercase;
}
.wk-banner-kat .tl-ik{width:16px;height:16px}
:is(#centerContent,body) .wk-h1{
  margin:0;
  font:700 38px/1.05 var(--tl-pismo-nadpis);letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6d6 0%,#f3d489 40%,#c8902e 65%,#f6dc93 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #3a2305) drop-shadow(0 3px 8px rgba(0,0,0,.85));
  text-shadow:none;
}
:is(#centerContent,body) .wk-perex{margin:2px 0 0;color:#eee3c8;font:400 17px/1.42 var(--tl-pismo-text);text-shadow:0 1px 3px #000}
:is(#centerContent,body) .wk-meta{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;
  color:#d4c4a0;font:400 13px/1.2 var(--tl-pismo-text);text-shadow:0 1px 2px #000;
}
.wk-meta > span{display:inline-flex;align-items:center;gap:5px}
.wk-meta .tl-ik{width:15px;height:15px}

:is(#centerContent,body) .wk-stitek-prip{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:6px 12px;
  background:linear-gradient(180deg,#3a2a0a,#241906);border:1px solid rgba(214,168,71,.7);
  color:#f1cd72;font:600 13px/1 var(--tl-pismo-nadpis);letter-spacing:.08em;text-transform:uppercase;
}
.wk-stitek-prip .tl-ik{width:16px;height:16px}

/* záložky článků kategorie — kartičky na papíře */
.wk-zalozky{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--pg-okraj)}
:is(#centerContent,body) .wk-zalozka{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px 6px 7px;border-radius:2px;
  background:rgba(255,250,235,.45);border:1px solid var(--pg-okraj);
  color:#4a3216;text-decoration:none;font:600 14px/1.1 var(--tl-pismo-text);text-shadow:none;
}
.wk-zalozka-c{
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:rgba(120,82,28,.15);border:1px solid var(--pg-okraj);
  color:#6b4a1c;font:700 11.5px/1 var(--tl-pismo-text);
}
:is(#centerContent,body) .wk-zalozka:hover{background:rgba(255,250,235,.8);border-color:#8a6424}
:is(#centerContent,body) .wk-zalozka.active{
  background:var(--wk-karmin);border-color:#4a0a0a;color:#fff1cf;text-shadow:0 1px 2px #000;
  box-shadow:inset 0 1px 0 rgba(255,200,160,.25),0 2px 5px rgba(60,20,10,.35);
}
.wk-zalozka.active .wk-zalozka-c{background:var(--tl-zlato-plocha);border-color:#6a4608;color:var(--tl-text-na-zlate)}

/* obsah článku uvnitř papíru (tablet) */
.wk-clanek .wk-toc-clanek{background:rgba(255,250,235,.4);border:1px solid var(--pg-okraj);box-shadow:none}
:is(#centerContent,body) .wk-clanek .wk-toc-titul{color:var(--pg-nadpis);border-bottom-color:var(--pg-okraj);text-shadow:none}
:is(#centerContent,body) .wk-clanek .wk-toc-pol{color:#4a3216;text-shadow:none;border-left-color:var(--pg-okraj)}
:is(#centerContent,body) .wk-clanek .wk-toc-pol:hover{color:var(--pg-odkaz);background:rgba(255,250,235,.5)}
:is(#centerContent,body) .wk-clanek .wk-toc-pol.active{color:var(--pg-nadpis);border-left-color:#7a1414;background:rgba(122,20,20,.08)}
.wk-clanek .wk-toc-pol::before{color:#8a6424}

/* --- tělo článku --- */
.wk-telo{display:grid;gap:13px;max-width:76ch}
:is(#centerContent,body) .wk-clanek .wk-telo > .wk-h2{
  margin:22px 0 2px;padding:0 0 9px 22px;scroll-margin-top:14px;
  color:var(--pg-nadpis);font:700 23px/1.2 var(--tl-pismo-nadpis);letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,250,235,.8);
}
:is(#centerContent,body) .wk-clanek .wk-telo > .wk-h2::after{
  width:100%;height:7px;
  background:
    linear-gradient(90deg,#7a1414,rgba(122,20,20,.0)) left bottom/100% 1px no-repeat,
    linear-gradient(90deg,rgba(138,100,36,.6),rgba(138,100,36,0)) left 3px/70% 1px no-repeat;
}
.wk-telo > .wk-h2::before{
  content:'';position:absolute;left:2px;top:.36em;width:10px;height:10px;
  background:linear-gradient(135deg,#c0392b,#5a0c0c);transform:rotate(45deg);box-shadow:0 0 0 1px #f2e6c8,0 0 0 2px #8a6424;
}
:is(#centerContent,body) .wk-clanek .wk-telo > .wk-h2:first-child{margin-top:0}
:is(#centerContent,body) .wk-p{margin:0;color:var(--wk-text);font:400 16px/1.6 var(--tl-pismo-text);text-shadow:none}
:is(#centerContent,body) .wk-clanek .wk-p{color:var(--pg-text);font-size:16.5px;line-height:1.65}
/* iniciála prvního odstavce */
:is(#centerContent,body) .wk-p-prvni::first-letter{
  float:left;margin:6px 10px 0 0;padding:0 2px;
  color:#7a1414;font:700 3.5em/.82 var(--tl-pismo-nadpis);
  text-shadow:1px 1px 0 #e2b65a,2px 2px 0 rgba(90,20,10,.35);
}
:is(#centerContent,body) .wk strong{color:#f3dc9c;font-weight:700}
:is(#centerContent,body) .wk-clanek strong{color:#5a0c0c}
:is(#centerContent,body) .wk-odkaz{
  color:#f1cd72;text-decoration:none;border-bottom:1px solid rgba(241,205,114,.4);
}
:is(#centerContent,body) .wk-odkaz:hover{color:#fff3d0;border-bottom-color:#fff3d0}
:is(#centerContent,body) .wk-clanek .wk-odkaz,
:is(#centerContent,body) .wk-tipy .wk-odkaz,
:is(#centerContent,body) .wk-vedel .wk-odkaz{color:var(--pg-odkaz);font-weight:600;border-bottom:1px solid rgba(138,28,18,.4)}
:is(#centerContent,body) .wk-clanek .wk-odkaz:hover{color:#b3261e;border-bottom-color:#b3261e}

.wk-seznam,.wk-kroky{margin:0;padding:0;list-style:none;display:grid;gap:7px}
:is(#centerContent,body) .wk-seznam li,
:is(#centerContent,body) .wk-kroky li{
  position:relative;color:var(--wk-text);font:400 16px/1.55 var(--tl-pismo-text);
}
:is(#centerContent,body) .wk-clanek :is(.wk-seznam,.wk-kroky) li{color:var(--pg-text);font-size:16.5px;text-shadow:none}
:is(#centerContent,body) .wk-seznam li{padding-left:22px}
.wk-seznam li::before{
  content:'';position:absolute;left:4px;top:.62em;width:7px;height:7px;
  background:#7a1414;transform:rotate(45deg);box-shadow:0 0 0 1px rgba(255,240,200,.6);
}
.wk-kroky{counter-reset:wk-krok}
:is(#centerContent,body) .wk-kroky li{counter-increment:wk-krok;padding:3px 0 3px 40px;min-height:30px}
.wk-kroky li::before{
  content:counter(wk-krok);position:absolute;left:0;top:1px;
  width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a32020,#5a0c0c 70%);color:#f6dfa0;
  font:700 14px/1 var(--tl-pismo-nadpis);
  box-shadow:0 0 0 1.5px #c89a3e,0 2px 4px rgba(60,20,10,.4);
}

/* --- tabulky: vodorovný posuv uvnitř obalu, stránka se nehýbe --- */
.wk-tab-obal{
  max-width:100%;overflow-x:auto;
  border:1px solid #6f5122;
  box-shadow:0 3px 10px rgba(60,35,10,.3);
  scrollbar-width:thin;scrollbar-color:#8a6a2a transparent;
}
.wk-tab{width:100%;border-collapse:collapse;min-width:420px;background:rgba(255,250,235,.35)}
:is(#centerContent,body) .wk-tab th{
  padding:9px 12px;text-align:left;white-space:nowrap;
  background:var(--wk-karmin);color:#f6dfa0;
  font:600 14px/1.2 var(--tl-pismo-nadpis);letter-spacing:.04em;text-shadow:0 1px 2px #000;
  border-bottom:2px solid #c89a3e;
}
:is(#centerContent,body) .wk-tab td{
  padding:8px 12px;vertical-align:top;
  color:var(--pg-text);font:400 15px/1.4 var(--tl-pismo-text);text-shadow:none;
  border-top:1px solid rgba(120,82,28,.22);
}
:is(#centerContent,body) .wk-tab td:first-child{color:#3a220c;font-weight:700}
.wk-tab tbody tr:nth-child(even){background:rgba(120,82,28,.08)}
.wk-tab tbody tr:hover{background:rgba(214,168,71,.2)}
:is(#centerContent,body) .wk-tab-popis{margin:-6px 0 0;color:var(--pg-tlumeny);font:italic 400 14px/1.4 var(--tl-pismo-text)}

/* --- rámečky tip / pozor / příklad (na papíře) --- */
.wk-ram{
  position:relative;display:grid;gap:5px;padding:12px 16px 13px 18px;
  border:1px solid;border-left-width:5px;border-radius:2px;
  box-shadow:0 3px 8px rgba(60,35,10,.18);
}
:is(#centerContent,body) .wk-ram-hlava{
  display:inline-flex;align-items:center;gap:7px;
  font:700 13.5px/1.2 var(--tl-pismo-nadpis);letter-spacing:.1em;text-transform:uppercase;
}
.wk-ram-hlava .tl-ik{width:18px;height:18px}
:is(#centerContent,body) .wk-ram .wk-p{font-size:15.5px;line-height:1.55}
.wk-ram-tip{background:linear-gradient(180deg,rgba(214,168,71,.24),rgba(214,168,71,.12));border-color:rgba(160,115,35,.5);border-left-color:#b8862a}
:is(#centerContent,body) .wk-ram-tip .wk-ram-hlava{color:#7a5410}
.wk-ram-tip .wk-ram-hlava .tl-ik{background:linear-gradient(180deg,#d6a847,#7a5410)}
.wk-ram-pozor{background:linear-gradient(180deg,rgba(170,40,25,.14),rgba(170,40,25,.07));border-color:rgba(150,40,30,.4);border-left-color:#a3241a}
:is(#centerContent,body) .wk-ram-pozor .wk-ram-hlava{color:#8a1c12}
.wk-ram-pozor .wk-ram-hlava .tl-ik{background:linear-gradient(180deg,#d0453a,#7a1410)}
.wk-ram-priklad{background:linear-gradient(180deg,rgba(40,80,150,.13),rgba(40,80,150,.06));border-color:rgba(40,80,150,.35);border-left-color:#2f5fa8}
:is(#centerContent,body) .wk-ram-priklad .wk-ram-hlava{color:#24467c}
.wk-ram-priklad .wk-ram-hlava .tl-ik{background:linear-gradient(180deg,#4a7cc8,#1e3d70)}

/* --- obrázek --- */
.wk-obr{margin:4px 0;display:grid;gap:6px;justify-items:start}
.wk-obr img{
  display:block;max-width:100%;max-height:360px;height:auto;
  border:1px solid #6f5122;box-shadow:0 0 0 3px #f2e6c8,0 0 0 4px #8a6424,0 6px 14px rgba(60,35,10,.4);
}
:is(#centerContent,body) .wk-obr figcaption{color:var(--pg-tlumeny);font:italic 400 14px/1.35 var(--tl-pismo-text)}

/* --- FAQ --- */
.wk-faq{display:grid;gap:7px}
.wk-faq-pol{background:rgba(255,250,235,.45);border:1px solid var(--pg-okraj);border-radius:2px}
.wk-faq-pol[open]{background:rgba(255,250,235,.7);border-color:#8a6424}
:is(#centerContent,body) .wk-faq-pol summary{
  position:relative;list-style:none;cursor:pointer;
  padding:11px 36px 11px 14px;
  color:#5a1a0c;font:700 15.5px/1.3 var(--tl-pismo-text);text-shadow:none;
}
.wk-faq-pol summary::-webkit-details-marker{display:none}
.wk-faq-pol summary::after{
  content:'';position:absolute;right:15px;top:50%;width:7px;height:7px;
  border-right:2px solid #7a1414;border-bottom:2px solid #7a1414;
  transform:translateY(-70%) rotate(45deg);transition:transform .15s ease;
}
.wk-faq-pol[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.wk-faq-pol summary:hover{background:rgba(255,250,235,.5)}
.wk-faq-pol .wk-p{padding:0 14px 12px}

/* --- předchozí / další --- */
.wk-dalsi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
:is(#centerContent,body) .wk-dalsi-pol{
  display:grid;gap:3px;padding:12px 16px;text-decoration:none;min-width:0;border-radius:2px;
  background:var(--wk-kamen);border:1px solid #3a2a12;
  box-shadow:0 0 0 2px rgba(214,168,71,.35),0 6px 14px rgba(60,35,10,.35);
  transition:transform .15s ease,box-shadow .15s ease;
}
:is(#centerContent,body) .wk-dalsi-dal{text-align:right}
:is(#centerContent,body) .wk-dalsi-smer{color:#c9a45c;font:700 11.5px/1.2 var(--tl-pismo-nadpis);letter-spacing:.14em;text-transform:uppercase}
:is(#centerContent,body) .wk-dalsi-titul{color:#f3d489;font:700 18px/1.2 var(--tl-pismo-nadpis);text-shadow:0 1px 2px #000}
:is(#centerContent,body) .wk-dalsi-kat{color:var(--wk-tlumeny);font:400 13px/1.2 var(--tl-pismo-text)}
:is(#centerContent,body) .wk-dalsi-pol:hover{transform:translateY(-2px);box-shadow:0 0 0 2px #f1cd72,0 0 18px rgba(241,205,114,.3),0 8px 16px rgba(60,35,10,.4)}

:is(#centerContent,body) .wk-pata{
  margin-top:20px;padding-top:12px;border-top:1px solid var(--pg-okraj);
  color:var(--pg-tlumeny);font:italic 400 13.5px/1.4 var(--tl-pismo-text);text-shadow:none;
}

/* --- barvy rarit (js/game.js RARITY): na tmavém světlé, na papíře syté --- */
:is(#centerContent,body) .wk-r{font-weight:700;text-shadow:0 1px 2px #000}
:is(#centerContent,body) .wk-r1{color:#b8b8b8}
:is(#centerContent,body) .wk-r2{color:#5fd062}
:is(#centerContent,body) .wk-r3{color:#5d9bff}
:is(#centerContent,body) .wk-r4{color:#ff9a33}
:is(#centerContent,body) .wk-r5{color:#ff5a4e}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) .wk-r{text-shadow:none}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) .wk-r1{color:#5c5c5c}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) .wk-r2{color:#1f7a2a}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) .wk-r3{color:#1b4fa8}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) .wk-r4{color:#b05a00}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) .wk-r5{color:#a3120e}
:is(#centerContent,body) .wk-r6{
  padding:0 .4em;border-radius:3px;
  background:#050505;border:1px solid #8c7ca8;color:#e8e2f2;text-shadow:none;
}
:is(#centerContent,body) :is(.wk-clanek,.wk-tipy,.wk-vedel) strong{color:#5a0c0c}

/* ======================================================= VÝSLEDKY === */
.wk-vysl-hlava{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 14px}
.wk-vysl-hlava .wk-h2{margin:0 0 4px}
:is(#centerContent,body) .wk-vysl-pocet{margin:0;color:var(--wk-tlumeny);font:400 14px/1.3 var(--tl-pismo-text)}
:is(#centerContent,body) .wk-btn{
  display:inline-flex;align-items:center;min-height:32px;padding:0 14px;margin:0;
  background:linear-gradient(180deg,#1b1714,#0f0d0b);border:1px solid rgba(214,168,71,.6);border-radius:2px;
  color:var(--tl-text-zlaty);font:600 14px/1 var(--tl-pismo-text);text-shadow:0 1px 2px #000;
  box-shadow:inset 0 1px 0 rgba(255,230,160,.1),0 2px 6px rgba(0,0,0,.5);cursor:pointer;filter:none;
}
:is(#centerContent,body) .wk-btn:hover{border-color:var(--tl-zlato-300);filter:brightness(1.15)}
.wk-vysl{display:grid;gap:8px;margin-top:12px}
:is(#centerContent,body) .wk-vysl-pol{
  display:flex;align-items:flex-start;gap:14px;padding:12px 14px;text-decoration:none;
  transition:border-color .15s ease,transform .15s ease;
}
.wk-vysl-ik{
  flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:50%;margin-top:2px;
  background:radial-gradient(circle at 35% 30%,#a32020,#5a0c0c 60%,#2d0505);box-shadow:0 0 0 1.5px #d6a847,0 3px 8px rgba(0,0,0,.6);
}
.wk-vysl-ik .tl-ik{width:21px;height:21px}
.wk-vysl-txt{display:grid;gap:2px;min-width:0}
:is(#centerContent,body) .wk-vysl-kat{color:#cfae6a;font:600 11.5px/1.2 var(--tl-pismo-nadpis);letter-spacing:.1em;text-transform:uppercase}
:is(#centerContent,body) .wk-vysl-titul{color:#f3d489;font:700 18px/1.2 var(--tl-pismo-nadpis);text-shadow:0 1px 2px #000}
:is(#centerContent,body) .wk-vysl-ukazka{color:#cdbf9f;font:400 14.5px/1.4 var(--tl-pismo-text)}
.wk-vysl-ukazka mark{background:rgba(214,168,71,.28);color:#fff3d0;padding:0 1px;border-radius:2px}
:is(#centerContent,body) .wk-vysl-pol:hover{border-color:var(--tl-zlato-300);transform:translateX(3px)}
:is(#centerContent,body) .wk-prazdne{margin-top:12px;color:var(--wk-tlumeny)}

/* ============================================ STŘEDNÍ ŠÍŘKA (tablet) === */
@media (max-width:1279px){
  .wk{
    grid-template-columns:200px minmax(0,1fr);
    grid-template-areas:
      "strom hledat"
      "strom obsah"
      "strom bok";
    grid-template-rows:auto auto 1fr;
  }
  .wk.wk-uvod{
    grid-template-columns:200px minmax(0,1fr);
    grid-template-areas:"strom hero" "strom obsah";
    grid-template-rows:auto 1fr;
  }
  .wk-bok{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:start}
  .wk-toc-clanek{display:block}
  .wk-toc-bok{display:none}
  .wk-kroky-mriz{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .wk-kroky-mriz::before{display:none}
  .wk-clanek{padding:14px 22px 20px}
}

/* ============================================ ÚZKÁ ŠÍŘKA (mobil) === */
@media (max-width:767px){
  .wk{
    --wk-mezera:12px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"lista" "hledat" "obsah" "bok";
    grid-template-rows:none;
  }
  .wk.wk-uvod{grid-template-columns:minmax(0,1fr);grid-template-areas:"lista" "hero" "obsah";grid-template-rows:none}
  .wk-bok{grid-template-columns:minmax(0,1fr)}

  .wk-lista{
    grid-area:lista;display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:60;
    padding:6px;background:var(--wk-kamen);border:1px solid var(--wk-okraj);
    box-shadow:0 4px 12px rgba(0,0,0,.55);
  }
  :is(#centerContent,body) .wk-menu-btn{
    display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;margin:0;
    background:var(--wk-karmin);border:1px solid var(--wk-okraj-silny);border-radius:2px;
    color:#fff1cf;font:600 15px/1 var(--tl-pismo-text);text-shadow:0 1px 2px #000;
    box-shadow:inset 0 1px 0 rgba(255,200,160,.25);filter:none;cursor:pointer;
  }
  .wk-menu-btn .tl-ik{width:20px;height:20px}
  :is(#centerContent,body) .wk-lista-titul{
    color:var(--tl-text-zlaty);text-decoration:none;
    font:700 17px/1 var(--tl-pismo-nadpis);letter-spacing:.03em;text-shadow:0 1px 3px #000;
  }

  /* strom = zásuvka zleva; .game-container má na mobilu z-index:auto,
     takže fixed vrstva jde přes navigaci hry (--z-nav 900) */
  .wk-strom{
    position:fixed;top:0;left:0;bottom:0;z-index:961;
    width:min(84vw,310px);max-height:none;height:100vh;height:100dvh;
    padding:10px 0 calc(16px + env(safe-area-inset-bottom));
    transform:translateX(-105%);visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s;
    background:linear-gradient(180deg,#15120f,#0a0908);
  }
  .wk-menu-otevrene .wk-strom{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .wk-clona{
    position:fixed;inset:0;z-index:959;background:rgba(4,3,2,.62);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .wk-menu-otevrene .wk-clona{display:block;opacity:1;pointer-events:auto}
  :is(#centerContent,body) .wk-strom-uvod,
  :is(#centerContent,body) .wk-strom-odkaz{min-height:42px}
  :is(#centerContent,body) .wk-strom-sipka{padding:0 12px 0 8px}
  :is(#centerContent,body) .wk-strom-clanek{padding:9px 8px}

  .wk-hero{aspect-ratio:auto;min-height:360px}
  .wk-hero-obr{object-position:30% 40%}
  .wk-hero-txt{width:auto;padding:0 12px 18px}
  :is(#centerContent,body) .wk-hero-titul{font-size:clamp(34px,11cqw,48px);white-space:normal}
  :is(#centerContent,body) .wk-hero-popis{font-size:14px}
  :is(#centerContent,body) .wk-kbd{display:none}
  .wk-oblibene > span{display:none}

  .wk-uvod .wk-obsah{gap:26px}
  .wk-kroky-mriz{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 10px}
  .wk-krok-cislo{width:52px;height:52px;font-size:18px}
  .wk-skup-pas{min-height:96px;padding:14px;gap:12px}
  .wk-skup-ik{flex-basis:50px;height:50px}
  .wk-skup-ik .tl-ik{width:26px;height:26px}
  :is(#centerContent,body) .wk-skup-popis{font-size:13.5px}
  .wk-kat-mriz{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :is(#centerContent,body) .wk-kat{aspect-ratio:4/4.4}
  :is(#centerContent,body) .wk-kat-nazev{font-size:16px}
  :is(#centerContent,body) .wk-kat-popis{display:none}
  .wk-vedel{padding:14px 16px 16px}

  .wk-clanek{padding:10px 14px 16px}
  .wk-banner{margin:0 -6px 14px;min-height:170px}
  .wk-banner::after{background:linear-gradient(0deg,rgba(8,6,4,.95) 0%,rgba(8,6,4,.7) 50%,rgba(8,6,4,.25) 100%)}
  .wk-banner-txt{padding:14px}
  :is(#centerContent,body) .wk-h1{font-size:29px}
  :is(#centerContent,body) .wk-perex{font-size:15.5px}
  .wk-zalozky{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}
  .wk-zalozky::-webkit-scrollbar{display:none}
  :is(#centerContent,body) .wk-zalozka{white-space:nowrap;padding:9px 12px 9px 8px}
  :is(#centerContent,body) .wk-toc-pol{padding:8px 6px 8px 10px}
  .wk-dalsi{grid-template-columns:minmax(0,1fr)}
  :is(#centerContent,body) .wk-dalsi-dal{text-align:left}
  :is(#centerContent,body) .wk-odkazy-pol{padding:9px 4px}
}

@media (prefers-reduced-motion:reduce){
  .wk-hero-obr{animation:none}
  .wk-strom,.wk-clona,.wk-kat,.wk-kat-obr,.wk-kat-dal,.wk-krok-cislo,.wk-strom-sipka::after,.wk-faq-pol summary::after,.wk-dalsi-pol,.wk-vysl-pol{transition:none}
}