:root{
  --bg:#0d0803; --bg2:#1b1006; --paper:#fff1ca; --paper2:#f4d998;
  --gold:#ffc857; --gold2:#ff9f1c; --teal:#005a63; --teal2:#003e46;
  --ink:#20160a; --cream:#fff4d2; --purple:#8c59d9;
  --phone:480px; --nav-h:96px;
}
*{box-sizing:border-box} html{background:#120d08;color:var(--cream);scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;width:100%;max-width:100%;overflow-x:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at top,#3d2b14,#0d0803 68%);}
a{color:inherit} img{max-width:100%;height:auto}.app-shell{width:100%;max-width:var(--phone);min-height:100svh;margin:0 auto;background:#130c05;box-shadow:0 0 40px rgba(0,0,0,.65);position:relative;overflow:hidden;isolation:isolate}.visual{position:relative;width:100%;max-width:100%;background:#130c05;overflow:hidden}.visual__image{display:block;width:100%;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}.visual__shade{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav-h) + 74px);z-index:4;background:linear-gradient(to bottom,rgba(9,5,2,0),rgba(8,8,6,.88) 28%,#003940 52%,#003940 100%);pointer-events:none}.visual--character .visual__shade{height:calc(var(--nav-h) + 150px);background:linear-gradient(to bottom,rgba(9,5,2,0),rgba(8,8,6,.9) 38%,#003940 62%,#003940 100%)}.visual--home .visual__shade{height:calc(var(--nav-h) + 92px)}.visual--menu .visual__shade,.visual--zapisnik .visual__shade,.visual--sbirka .visual__shade,.visual--locked .visual__shade,.visual--artifact .visual__shade{height:calc(var(--nav-h) + 88px)}
.top-button{position:absolute;top:1.15%;z-index:24;width:10.5%;aspect-ratio:1/1;border-radius:999px;display:grid;place-items:center;background:rgba(0,64,72,.8);border:2px solid rgba(255,200,87,.85);box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 0 12px rgba(255,200,87,.12);backdrop-filter:blur(4px)}.top-button--profile{left:3.2%}.top-button--menu{right:3.2%}.top-button svg{width:58%;height:58%;fill:none;stroke:#ffd15a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.bottom-nav{position:absolute;z-index:30;left:3.3%;right:3.3%;bottom:10px;min-height:calc(var(--nav-h) - 10px);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:24px;background:linear-gradient(180deg,rgba(0,101,111,.97),rgba(0,54,62,.98));border:1.5px solid rgba(255,200,87,.38);box-shadow:0 -8px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.1);overflow:visible}.bottom-nav__item{position:relative;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#ffe7a5;font-weight:800;font-size:clamp(.69rem,2.7vw,.86rem);line-height:1;text-align:center;padding:9px 4px 7px}.bottom-nav__item:not(:first-child)::before{content:"";position:absolute;left:0;top:21%;bottom:21%;width:1px;background:rgba(255,255,255,.13)}.bottom-nav__item svg{width:26px;height:26px;fill:none;stroke:#ffe7a5;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}.bottom-nav__item.is-active{transform:translateY(-14px);background:linear-gradient(180deg,rgba(0,97,108,1),rgba(0,64,73,1));border:1.5px solid rgba(255,200,87,.55);border-radius:20px;color:#ffd159;box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 18px rgba(255,200,87,.08)}.bottom-nav__item.is-active svg{stroke:#ffd159}.player-chip{position:absolute;left:50%;top:10.2%;transform:translateX(-50%);z-index:23;display:none;max-width:74%;padding:.42rem .72rem;border-radius:999px;background:rgba(0,64,72,.88);border:1px solid rgba(255,200,87,.62);color:#ffe7a5;font-weight:900;font-size:clamp(.72rem,2.7vw,.88rem);line-height:1;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.25);backdrop-filter:blur(5px)}.player-chip.is-visible{display:block}.hotspot{position:absolute;z-index:26;display:block;border:0;background:transparent;color:transparent;text-indent:-9999px;border-radius:20px;cursor:pointer;touch-action:manipulation}.hotspot:focus-visible{outline:3px solid var(--gold);outline-offset:2px;background:rgba(255,200,87,.16);color:#111;text-indent:0;font-size:10px;overflow:hidden}.show-hotspots .hotspot{box-shadow:0 0 0 2px rgba(255,200,87,.8),0 0 18px rgba(255,200,87,.55);background:rgba(255,200,87,.08)}button.hotspot{font:inherit}.toast{position:fixed;z-index:999;left:50%;bottom:110px;width:min(92vw,410px);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.22s ease;padding:.85rem 1rem;text-align:center;border-radius:22px;background:rgba(0,60,67,.96);border:1px solid rgba(255,200,87,.42);box-shadow:0 14px 30px rgba(0,0,0,.45);color:#fff0bd;font-weight:850;line-height:1.25}.toast.show{opacity:1;transform:translate(-50%,0)}.seo{padding:1.3rem 1.15rem 7rem;background:linear-gradient(180deg,#150e06,#241709 100%);color:#f8e6b7}.seo h1{font-size:1.42rem;line-height:1.14;margin:.1rem 0 .65rem;color:#ffd166;text-wrap:balance}.seo h2{font-size:1.05rem;margin:1.2rem 0 .42rem;color:#ffe399}.seo p,.seo li{font-size:.98rem;line-height:1.55;color:#f8e6b7}.seo ul{padding-left:1.2rem}.seo a{color:#ffd166;font-weight:900}.cards{display:grid;gap:.74rem}.card-link,.choice{display:flex;gap:.85rem;align-items:center;text-decoration:none;padding:.9rem;border-radius:20px;border:1px solid rgba(255,200,87,.32);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.choice img{width:74px;height:74px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,200,87,.34)}.choice strong,.card-link strong{display:block;color:#ffd166;font-size:1.1rem}.choice span,.card-link span{display:block;color:#f7e7ba}.mission{padding:1.05rem}.mission-panel{border-radius:28px;padding:1.1rem;background:linear-gradient(180deg,#ffeabd,#dfb86e);color:#20160a;border:2px solid rgba(255,200,87,.55);box-shadow:0 18px 32px rgba(0,0,0,.35)}.mission-panel h1{margin:.2rem 0 .55rem;font-size:1.55rem}.task-list{display:grid;gap:.65rem;margin:1rem 0}.task{display:flex;align-items:center;gap:.65rem;padding:.75rem;border-radius:16px;background:rgba(255,255,255,.42);border:1px solid rgba(68,40,11,.17)}.task input{width:22px;height:22px}.button-row{display:grid;gap:.65rem;margin-top:1rem}.game-button{border:0;border-radius:18px;padding:.88rem 1rem;background:linear-gradient(180deg,#ffd76a,#f3a51b);color:#241607;font-weight:950;font-size:1.05rem;box-shadow:0 8px 18px rgba(0,0,0,.22);text-decoration:none;text-align:center}.game-button.secondary{background:linear-gradient(180deg,#0a6771,#00434b);color:#ffe7a5;border:1px solid rgba(255,200,87,.36)}.state-box{margin-top:1rem;padding:.8rem;border-radius:18px;background:rgba(0,65,73,.55);border:1px solid rgba(255,200,87,.25);color:#fff0bd;font-size:.95rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (min-width:700px){.app-shell{margin:18px auto;border-radius:28px}.visual:first-child,.visual__image{border-radius:28px 28px 0 0}.seo:last-child{border-radius:0 0 28px 28px}}


/* v0.3 layout safety: never let 9:16 artwork render at natural 820px width inside a 460px mobile viewport. */
@media (max-width:699px){
  .app-shell{width:100vw;max-width:100vw;margin:0;border-radius:0;box-shadow:none;}
  .visual:first-child,.visual__image{border-radius:0;}
  .bottom-nav{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));}
}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* v0.4 patch: character cards must stay fully visible and selectable.
   The previous dark shade for character screens covered the in-image CTA button.
   Keep artwork full-width, do not crop, and keep the HTML nav low enough not to hide selection. */
:root{--phone:460px;--nav-h:82px;}
.app-shell{width:min(100vw,var(--phone));max-width:var(--phone);overflow:visible;}
.visual{overflow:visible;}
.visual__image{width:100%;height:auto;object-fit:contain;object-position:center top;}
.visual__shade{height:calc(var(--nav-h) + 36px);background:linear-gradient(to bottom,rgba(9,5,2,0),rgba(8,8,6,.62) 44%,rgba(0,57,64,.92) 76%,rgba(0,57,64,.98) 100%);}
.visual--character .visual__shade{display:none !important;}
.bottom-nav{min-height:var(--nav-h);bottom:8px;border-radius:20px;}
.bottom-nav__item{padding:8px 3px 6px;font-size:clamp(.64rem,2.45vw,.8rem);gap:4px;}
.bottom-nav__item svg{width:24px;height:24px;}
.bottom-nav__item.is-active{transform:translateY(-7px);border-radius:17px;}
.visual--character .bottom-nav{bottom:8px;background:linear-gradient(180deg,rgba(0,101,111,.96),rgba(0,54,62,.98));}
.visual--character .hotspot[data-action="select-character"]{z-index:45;}
@media (max-width:699px){.app-shell{width:100vw;max-width:100vw;margin:0;border-radius:0;box-shadow:none;}.visual{border-radius:0}.visual__image{border-radius:0}.bottom-nav{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));}}
/* v0.4b: hide the old in-image "Mrknout na další" strip on character screens, but keep the real selection button visible/clickable. */
.visual--character::after{content:"";position:absolute;left:0;right:0;top:83.2%;height:5.6%;z-index:6;pointer-events:none;background:linear-gradient(to bottom,rgba(19,12,5,0),rgba(19,12,5,.72) 42%,rgba(0,57,64,.82) 100%);}
.visual--character .bottom-nav{z-index:30;}
.visual--character .hotspot[data-action="select-character"]{z-index:46;}


/* v0.5 overlay fixes: selected player icon in top-left, stronger hamburger cover. */
.top-button{
  width:13.6%;
  top:.82%;
  background:linear-gradient(180deg,rgba(0,93,104,.98),rgba(0,57,64,.99));
  border:2.8px solid rgba(255,203,86,.96);
  box-shadow:0 9px 24px rgba(0,0,0,.42), inset 0 0 0 2px rgba(0,30,34,.35), inset 0 0 18px rgba(255,210,90,.14);
}
.top-button--profile{left:2.25%;}
.top-button--menu{right:2.25%; width:14.6%; background:linear-gradient(180deg,#006d78,#00434b);}
.top-button--menu svg{width:62%;height:62%;stroke-width:2.65;filter:drop-shadow(0 1px 2px rgba(0,0,0,.42));}
.top-button--profile.has-player{overflow:visible;}
.top-button--profile.has-player svg{display:none;}
.top-button__avatar{position:absolute;left:50%;top:50%;width:136%;height:136%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 6px rgba(0,0,0,.42));}
.top-button--profile.has-player::after{content:"";position:absolute;inset:-5%;border-radius:999px;box-shadow:0 0 0 2px rgba(255,211,92,.28),0 0 16px rgba(255,211,92,.32);pointer-events:none;}
@media (max-width:699px){
  .top-button{width:14.2%;top:.78%;}
  .top-button--menu{width:15%;right:2%;}
  .top-button--profile{left:2%;}
}

/* v0.6 hotfix: remove the ugly dark strip on character cards and make the in-image selection CTA fully clickable. */
.visual--character::after{display:none !important;content:none !important;background:none !important;}
.visual--character .visual__shade{display:none !important;}
.visual--character .bottom-nav{bottom:8px;z-index:36;}
.visual--character .hotspot[data-action="select-character"]{
  z-index:80 !important;
  border-radius:999px;
  touch-action:manipulation;
}
.show-hotspots .visual--character .hotspot[data-action="select-character"]{
  background:rgba(255,200,87,.14);
  box-shadow:0 0 0 2px rgba(255,200,87,.95),0 0 20px rgba(255,200,87,.55);
}

/* v0.7: Larger selected-player badge to cover generated-image text cleanly. */
.player-chip{
  top:8.35%;
  z-index:29;
  display:none;
  min-width:44%;
  max-width:82%;
  padding:.58rem 1.05rem .62rem;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(0,112,96,.98),rgba(0,62,69,.99));
  border:2.5px solid rgba(255,211,92,.95);
  color:#fff1ad;
  font-weight:1000;
  font-size:clamp(.92rem,4.3vw,1.18rem);
  letter-spacing:.01em;
  line-height:1.05;
  text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.48);
  box-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -8px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(4px);
}
.player-chip.is-visible{display:block;}
.visual--character .player-chip{top:8.25%; min-width:45%;}
.visual--mapa .player-chip{top:8.55%; min-width:43%;}
@media (max-width:420px){
  .player-chip{font-size:clamp(.85rem,4vw,1.05rem);padding:.52rem .9rem .56rem;min-width:46%;}
}

/* v0.9.2 Příběhy + komiksový reader */
.visual--pribehy .visual__shade{
  height:calc(var(--nav-h) + 88px);
  background:linear-gradient(to bottom,rgba(9,5,2,0),rgba(8,8,6,.66) 44%,rgba(0,57,64,.9) 78%,rgba(0,57,64,.98) 100%);
}
.visual--comic .visual__shade{
  height:calc(var(--nav-h) + 138px);
  background:linear-gradient(to bottom,rgba(9,5,2,0),rgba(8,8,6,.18) 18%,rgba(8,8,6,.64) 54%,rgba(0,57,64,.94) 83%,rgba(0,57,64,.98) 100%);
}
.comic-pager{
  position:absolute;
  z-index:34;
  left:5.2%;
  right:5.2%;
  bottom:calc(var(--nav-h) + 20px);
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr;
  gap:8px;
  align-items:center;
}
.comic-pager__btn{
  min-height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  padding:.48rem .52rem;
  background:linear-gradient(180deg,rgba(0,98,110,.98),rgba(0,58,66,.99));
  border:1.5px solid rgba(255,200,87,.62);
  color:#ffe6a3;
  font-weight:950;
  font-size:clamp(.73rem,2.9vw,.9rem);
  line-height:1;
  box-shadow:0 9px 20px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow:0 2px 2px rgba(0,0,0,.38);
}
.comic-pager__btn--primary{
  background:linear-gradient(180deg,#ffd566,#f3a51b);
  color:#251506;
  border-color:rgba(255,231,154,.74);
  text-shadow:none;
}
.comic-pager__btn.is-disabled{
  opacity:.42;
  filter:saturate(.55);
  pointer-events:none;
}
.comic-counter{
  position:absolute;
  z-index:34;
  left:50%;
  bottom:calc(var(--nav-h) + 72px);
  transform:translateX(-50%);
  padding:.28rem .66rem;
  border-radius:999px;
  background:rgba(22,13,5,.62);
  border:1px solid rgba(255,200,87,.28);
  color:#ffe8ad;
  font-weight:850;
  font-size:clamp(.66rem,2.5vw,.78rem);
  line-height:1;
  backdrop-filter:blur(4px);
}
.story-soon{cursor:not-allowed;}
@media (max-width:380px){
  .comic-pager{gap:5px;left:4%;right:4%;bottom:calc(var(--nav-h) + 16px)}
  .comic-pager__btn{min-height:39px;font-size:.68rem;padding:.42rem .38rem}
}


/* v0.9.3: komiksovy rezim - bez leveho hracskeho badge, mene prazdneho pergamenu, ovladani pod obrazem. */
.visual--comic{
  background:linear-gradient(180deg,#130c05 0%,#211407 58%,#003940 100%);
  padding-bottom:10px;
}
.visual--comic .visual__shade{display:none !important;}
.visual--comic .top-button--profile{display:none !important;}
.visual--comic .visual__image{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}
.visual--comic .comic-counter{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  z-index:20;
  width:max-content;
  margin:8px auto 6px;
  background:rgba(22,13,5,.72);
}
.visual--comic .comic-pager{
  position:relative;
  z-index:21;
  left:auto;
  right:auto;
  bottom:auto;
  margin:0 5.2% 8px;
}
.visual--comic .bottom-nav{
  position:relative;
  z-index:22;
  left:auto;
  right:auto;
  bottom:auto;
  margin:8px 3.3% 0;
}
.visual--comic .bottom-nav__item.is-active{
  transform:translateY(-7px);
}
@media (max-width:380px){
  .visual--comic .comic-pager{margin-left:4%;margin-right:4%;margin-bottom:7px;}
}


/* v0.9.4: comic image fit fix. The comic art is pre-cropped so the empty parchment strip is minimal; keep controls outside the image and avoid extra visual padding. */
.visual--comic{padding-bottom:8px;background:linear-gradient(180deg,#130c05 0%,#1f1307 60%,#003940 100%);}
.visual--comic .visual__image{display:block;width:100%;height:auto;object-fit:contain;object-position:center top;}
.visual--comic .comic-counter{margin:6px auto 5px;}
.visual--comic .comic-pager{margin:0 5.2% 6px;}
.visual--comic .bottom-nav{margin:6px 3.3% 0;}


/* v2.0.1 mobile-first SEO/AI content layer */
.seo{padding:1rem 1rem 1.35rem;background:linear-gradient(180deg,#130c05,#201207);color:#fff1c8;}
.seo h1,.seo h2,.seo h3{color:#ffd66b;line-height:1.1;margin:.35rem 0 .55rem;}
.seo p{line-height:1.55;margin:.65rem 0;color:#fff0c7;}
.seo strong{color:#ffe28a}.seo a{color:#ffd66b;text-decoration-thickness:2px;text-underline-offset:3px}
.zaf-note{border:1px solid rgba(255,200,87,.35);background:rgba(0,78,86,.35);border-radius:18px;padding:.85rem;margin:1rem 0;}
.zaf-faq details{border:1px solid rgba(255,200,87,.24);background:rgba(255,241,202,.07);border-radius:16px;margin:.55rem 0;padding:.65rem .78rem;}
.zaf-faq summary{cursor:pointer;color:#ffd66b;font-weight:850;line-height:1.25}.zaf-faq p{margin:.55rem 0 0}.route-list{display:grid;gap:.65rem;margin:1rem 0}.route-card{display:block;text-decoration:none;border:1px solid rgba(255,200,87,.3);border-radius:18px;padding:.78rem;background:linear-gradient(180deg,rgba(0,95,105,.33),rgba(25,14,7,.62));box-shadow:0 8px 20px rgba(0,0,0,.14)}.route-card strong{display:block;font-size:1.04rem}.route-card span{display:block;color:#ffe7a5;font-size:.92rem;margin-top:.25rem}.legal-small{font-size:.82rem;opacity:.86;border-top:1px solid rgba(255,200,87,.22);margin-top:1rem;padding-top:.8rem}.mission-meta{display:grid;gap:.55rem;margin:.85rem 0}.mission-meta div{border-radius:14px;background:rgba(0,72,80,.22);border:1px solid rgba(255,200,87,.18);padding:.65rem}.mission-panel h2{margin-top:1rem}.level-status{display:inline-flex;border-radius:999px;padding:.28rem .6rem;background:#ffd35f;color:#251506;font-weight:900;font-size:.82rem;margin:.2rem 0 .5rem}.mini-nav{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1rem}.mini-nav a{border-radius:14px;padding:.7rem;text-align:center;text-decoration:none;background:linear-gradient(180deg,#0a6771,#00434b);color:#ffe8ad;border:1px solid rgba(255,200,87,.34);font-weight:850}.mini-nav a.primary{background:linear-gradient(180deg,#ffd566,#f3a51b);color:#251506}


/* v2.0.1 public footer and readable adventure copy */
.site-footer{padding:1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,#201207,#120a04);border-top:1px solid rgba(255,200,87,.22);color:#ffe9b2;font-size:.78rem;line-height:1.45;}
.site-footer p{margin:.35rem 0;color:#ffe9b2;opacity:.88;}
.site-footer strong{color:#ffd66b;}
.mission-panel ul li{margin:.22rem 0;}