/* Uvodni rozcestnik stezek — layout a dekorace. Stavi na promennych z custom.css. */

body.rozc{justify-content:flex-start;min-height:100svh;width:100%}
.scena{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100svh;width:100%;padding:calc(0.9rem + env(safe-area-inset-top)) 0.75rem env(safe-area-inset-bottom)}

/* hlavicka */
.rozc-hlava{margin-top:0.4rem;padding:0 2.6rem}
.rozc-brand{font-family:var(--font-primary);font-size:clamp(1.45rem,5.6vw,2.3rem);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;line-height:1.2;margin:0;padding:0;animation:none;text-shadow:none;color:#ff8b00}
.rozc-brand .b1,.rozc-brand .b2{color:#ff8b00;text-shadow:0 0 26px rgba(16,185,129,0.55)}
.tagline{font-family:var(--font-primary);font-weight:300;font-size:clamp(0.72rem,3vw,0.86rem);color:var(--text-muted);padding:0.4rem 0 0;letter-spacing:0.09em;text-transform:uppercase}
.vyzva{display:none;font-family:var(--font-primary);font-style:italic;font-weight:500;font-size:clamp(1.05rem,4.2vw,1.4rem);color:var(--primary);text-shadow:0 0 18px rgba(255,207,9,0.45);padding:0.9rem 0 0}
@media(min-height:760px) and (orientation:portrait){.vyzva{display:block}}

/* rozcestnik: sloupek, dve sipkove smerovky a mensi doplnkova tabulka O projektu */
.rozcestnik{--drevo:linear-gradient(180deg,rgba(255,235,200,0.09),rgba(255,235,200,0) 16%),linear-gradient(0deg,rgba(0,0,0,0.28),rgba(0,0,0,0) 18%),repeating-linear-gradient(94deg,rgba(0,0,0,0.13) 0 2px,rgba(255,255,255,0.016) 2px 5px,transparent 5px 11px),linear-gradient(180deg,#3e2d23,#372820 55%,#2d201a);position:relative;display:flex;flex-direction:column;align-items:center;gap:3.15rem;width:100%;max-width:34rem;margin:auto auto 0;padding:1.5rem 0 clamp(2rem,calc(100svh - 38rem),6.5rem)}
.sloup{position:absolute;left:50%;top:0.2rem;bottom:0;width:1.05rem;margin-left:-0.55rem;background:linear-gradient(90deg,#1f130d,#3b2a20 45%,#241710);border-radius:0.55rem 0.55rem 0 0;box-shadow:0 0 16px rgba(0,0,0,0.6),inset 0 0 6px rgba(0,0,0,0.5);z-index:0}
.sloup::before{content:'';position:absolute;top:-0.5rem;left:50%;width:1.75rem;height:0.9rem;margin-left:-0.875rem;background:radial-gradient(ellipse at 50% 30%,#4a352a,#241710);border-radius:50% 50% 40% 40%;box-shadow:0 2px 8px rgba(0,0,0,0.5)}

/* Smerovka = obdelnik (.drevo) + hrot pres celou vysku (.spice) se spolecnymi
   prechody, takze mezi nimi nevznika viditelny sev. Obsah lezi nad tim (z-index 1). */
.smerovka{--tx:0rem;--rot:0deg;--tip:2.3rem;--padx:0.85rem;position:relative;left:var(--tx);z-index:1;display:flex;align-items:center;gap:0.5rem;width:min(96%,28rem);min-height:6.6rem;padding:0.95rem var(--padx);text-decoration:none;border-bottom:0;transform:rotate(var(--rot))}
.telo{position:absolute;inset:0;z-index:0}
.drevo{position:absolute;inset:0;background:var(--drevo)}
.spice{position:absolute;top:0;bottom:0;background:var(--drevo)}
.smer-poklad{--tx:-0.7rem;--rot:-1.4deg;padding-right:calc(var(--padx) + var(--tip));filter:drop-shadow(0 10px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 9px rgba(255,207,9,0.16));transition:filter 0.35s ease}
.smer-poklad .drevo{right:var(--tip)}
.smer-poklad .spice{right:0;width:calc(var(--tip) + 1px);clip-path:polygon(0 0,100% 50%,0 100%)}
.smer-jezirko{--tx:0.7rem;--rot:1.4deg;flex-direction:row-reverse;padding-left:calc(var(--padx) + var(--tip));filter:drop-shadow(0 10px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 9px rgba(16,185,129,0.18));transition:filter 0.35s ease}
.smer-jezirko .drevo{left:var(--tip)}
.smer-jezirko .spice{left:0;width:calc(var(--tip) + 1px);clip-path:polygon(100% 0,0 50%,100% 100%)}
.smer-poklad:hover,.smer-poklad:focus-visible{filter:brightness(1.06) drop-shadow(0 12px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 14px rgba(255,207,9,0.42));border-bottom:0}
.smer-jezirko:hover,.smer-jezirko:focus-visible{filter:brightness(1.06) drop-shadow(0 12px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 14px rgba(16,185,129,0.45));border-bottom:0}
.smerovka:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* O projektu: doplnkova tabulka — jen obdelnik bez spicky, mensi, rovne na sloupku */
.smer-projekt{--tx:0rem;--rot:0deg;width:min(72%,19.5rem);min-height:4.9rem;padding:0.6rem 0.9rem;margin-top:0.3rem;box-shadow:0 10px 24px rgba(0,0,0,0.5),0 0 20px rgba(107,78,157,0.22);transition:box-shadow 0.35s ease}
.smer-projekt .drevo{border-radius:0.4rem}
.smer-projekt:hover,.smer-projekt:focus-visible{box-shadow:0 14px 30px rgba(0,0,0,0.5),0 0 28px rgba(123,104,238,0.34);filter:brightness(1.06)}

/* Kroužek, text a dostupný prostor rostou společně: kroužek je nejméně tak
   vysoký jako blok textu (ověřeno 320–1920 px). */
.medailon{position:relative;z-index:1;flex:0 0 auto;width:clamp(4.5rem,calc(1.85rem + 13vw),5.6rem);height:clamp(4.5rem,calc(1.85rem + 13vw),5.6rem);border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 42%,#2e1c4a,#140a24 78%)}
.smer-poklad .medailon{margin:0 0.45rem 0 0.4rem;box-shadow:0 6px 18px rgba(0,0,0,0.55),0 0 0 2px rgba(255, 157, 9, 0.6),0 0 26px rgba(255, 140, 9, 0.3)}
.smer-jezirko .medailon{margin:0 0.45rem 0 0.4rem;box-shadow:0 6px 18px rgba(0,0,0,0.55),0 0 0 2px rgba(255,207,9,0.6),0 0 26px rgba(255,207,9,0.3)}
.smer-projekt .medailon{width:4rem;height:4rem;margin:0 0.55rem 0 0;box-shadow:0 6px 18px rgba(0,0,0,0.55),0 0 0 2px rgba(123,104,238,0.55),0 0 24px rgba(123,104,238,0.3)}
.medailon img{width:100%;height:100%;object-fit:cover;display:block}
.smer-poklad .medailon img{height:91%;}
.medailon img.cely{object-fit:contain;padding:5%;box-sizing:border-box}

.smerovka-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:0.3rem;flex:1 1 auto;padding:0.1rem 0;text-align:left}
.smer-jezirko .smerovka-text{align-items:flex-end;text-align:right}
.smerovka-nazev{font-family:var(--font-primary);font-weight:700;text-transform:uppercase;letter-spacing:0.03em;font-size:clamp(0.86rem,3.65vw,1.26rem);line-height:1.15}
.smer-poklad .smerovka-nazev{color:var(--primary);text-shadow:0 0 14px rgba(255,207,9,0.45)}
.smer-jezirko .smerovka-nazev{color:rgb(229, 187, 0);text-shadow:0 0 14px rgba(185, 162, 16, 0.5)}
.smer-projekt .smerovka-nazev{color:var(--text-light);text-shadow:0 0 12px rgba(232,245,232,0.4);font-size:0.9rem}
.smerovka-popis{font-family:var(--font-primary);font-weight:300;font-size:clamp(0.68rem,calc(3.4vw - 0.1rem),0.94rem);color:var(--text-muted);letter-spacing:0.01em;line-height:1.35}
.badge{display:inline-flex;font-family:var(--font-primary);font-size:clamp(0.62rem,2.6vw,0.75rem);font-weight:600;letter-spacing:0.09em;text-transform:uppercase;padding:0.24rem 0.62rem;border-radius:999px;margin-top:0.12rem;white-space:nowrap}
.badge-open{color:#ac825c;background:rgba(123, 99, 53, 0.13);border:1px solid rgba(175, 140, 76, 0.45);box-shadow:0 0 12px rgba(175, 135, 76, 0.16)}
.badge-brzy{color:#10b981;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.4)}

/* dekorace nocni oblohy a lesa */
.hvezdy{position:fixed;inset:0;z-index:0;pointer-events:none;background:url('/images/rozcestnik-hvezdy.svg') top center/cover no-repeat;opacity:0.85}
.mesic{position:fixed;top:clamp(0.3rem,2.5vh,2.4rem);right:clamp(0.3rem,5vw,4.5rem);width:clamp(3.4rem,11vw,7.5rem);height:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 0 26px rgba(244,236,210,0.22));animation:float 7s ease-in-out infinite}
.les{position:fixed;left:0;right:0;bottom:0;height:clamp(6.5rem,20vh,12rem);z-index:2;pointer-events:none;background:url('/images/rozcestnik-les.svg') bottom center/auto 100% repeat-x}
.les::before{content:'';position:absolute;left:0;right:0;bottom:32%;height:50%;background:linear-gradient(180deg,rgba(157,134,204,0) 0%,rgba(157,134,204,0.07) 60%,rgba(157,134,204,0) 100%);filter:blur(6px)}

/* siroke telefony a tablety: cedule nerostou pres celou sirku, kompozice
   drzi u sloupku a kolecka nekonci u okraje displeje */
@media(min-width:480px) and (max-width:768px){
.rozcestnik{max-width:30rem}
.smerovka{width:min(84%,23.5rem)}
.smer-projekt{width:min(62%,16.5rem)}
.medailon{width:5.5rem;height:5.5rem}
.smer-projekt .smerovka-nazev{font-size:1rem}
.smerovka-popis{font-size:0.85rem}
}

@media(min-width:769px){
.rozc-hlava{margin-top:1.4rem;padding:0}
.rozcestnik{max-width:44rem;gap:3.7rem;padding:2.6rem 0 clamp(3rem,10vh,7rem)}
.sloup{width:1.25rem;margin-left:-0.625rem}
.smerovka{--tip:3.2rem;--padx:1.5rem;width:29.5rem;min-height:8.4rem;padding-top:1rem;padding-bottom:1rem;gap:0.7rem}
.smer-poklad{--tx:-1.2rem}
.smer-jezirko{--tx:1.2rem}
.smer-projekt{--tx:0rem;width:20rem;min-height:5.6rem;padding:0.8rem 1.1rem;margin-top:0.5rem}
.medailon{width:6rem;height:6rem}
.smer-poklad .medailon{margin:0 0.4rem 0 0.7rem}
.smer-jezirko .medailon{margin:0 0.7rem 0 0.4rem}
.smer-projekt .medailon{width:4.8rem;height:4.8rem;margin:0 0.4rem 0 0}
.smer-projekt .smerovka-nazev{font-size:1.1rem}
.smerovka-popis{font-size:0.88rem}
.badge{font-size:0.68rem}
}

@media(max-width:360px){
.rozc-hlava{margin-top:0.1rem;padding:0 2.3rem}
.rozc-brand{font-size:1.32rem}
.tagline{font-size:0.66rem;padding-top:0.3rem}
.rozcestnik{gap:2.7rem;padding:1.15rem 0 clamp(1.5rem,calc(100svh - 36rem),5rem)}
.smerovka{--tip:2.2rem;--padx:0.85rem;width:96%;min-height:6rem;padding-top:0.75rem;padding-bottom:0.75rem}
.smer-projekt{width:82%;min-height:4.4rem;padding:0.5rem 0.8rem}
.medailon{width:4.35rem;height:4.35rem}
.smer-poklad .medailon{margin:0 0.4rem 0 0.25rem}
.smer-jezirko .medailon{margin:0 0.25rem 0 0.4rem}
.smer-projekt .medailon{width:3.4rem;height:3.4rem}
.smer-projekt .smerovka-nazev{font-size:0.82rem}
.smerovka-popis{font-size:0.64rem}
.badge{font-size:0.58rem;padding:0.2rem 0.5rem}
}

/* velke monitory (QHD, 4K): kompozice je cela v rem, skaluje se korenem */
@media(min-width:1900px){html{font-size:20px}}
@media(min-width:2800px){html{font-size:27px}}

/* nizke displeje (telefon nasirku): zhustit, at se scrolluje co nejmene */
@media(max-height:560px){
.rozc-hlava{margin-top:0.1rem}
.rozcestnik{gap:2rem;padding:1rem 0 1.2rem}
.smerovka{min-height:5.8rem}
.smer-projekt{min-height:4.2rem}
.les{height:4.5rem}
}

/* nejuzsi telefony: popisek o stupen mensi, at zustane na jednom radku */
@media(max-width:335px){
.smerovka-popis{font-size:0.6rem}
.smerovka-nazev{font-size:0.82rem}
.medailon{width:4.1rem;height:4.1rem}
}

@media print{.hvezdy,.mesic,.les,.sloup{display:none!important}.smerovka{filter:none!important}.drevo,.spice{background:#fff}.smer-projekt{background:#fff;box-shadow:none}}
body.rozc .scena{padding-bottom:calc(3.4rem + env(safe-area-inset-bottom))}
body.rozc .sloup{bottom:calc(-3.4rem - env(safe-area-inset-bottom))}
body.rozc .ps-paticka{position:fixed;left:0;right:0;bottom:0;z-index:20;width:100%;max-width:none;margin:0;padding:0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));border-top:0;background:linear-gradient(to top,rgba(13,6,18,0.92) 55%,rgba(13,6,18,0));gap:0.15rem 0.7rem;font-size:0.85rem;line-height:1.4}
body.rozc .ps-paticka>*:not(:last-child)::after{margin-left:0.7rem}
@media(max-width:480px){body.rozc .ps-paticka{padding:0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));gap:0.1rem 0.55rem;font-size:0.78rem;line-height:1.3}body.rozc .ps-paticka>*:not(:last-child)::after{margin-left:0.55rem}}
@media print{body.rozc .ps-paticka{position:static;background:none}}

/* Dyne zavesena na vetvi v pravem dolnim rohu — odkaz na halloweensky special.
   Spolecny kotevni bod: --dyne-cx je vodorovna osa zavesu od praveho okraje. */
body.rozc{--dyne-w:2.2rem;--dyne-cx:2.5rem;--dyne-b:calc(3.4rem + env(safe-area-inset-bottom));--vetev-w:7rem}
.vetev{position:fixed;z-index:3;pointer-events:none;width:var(--vetev-w);height:auto;right:calc(var(--dyne-cx) - var(--vetev-w)/2);bottom:calc(var(--dyne-b) + var(--dyne-w)*0.5);opacity:0.92}
.dyne{position:fixed;z-index:15;width:var(--dyne-w);right:calc(var(--dyne-cx) - var(--dyne-w)/2);bottom:var(--dyne-b);padding:0.25rem;border-bottom:0;filter:saturate(0.7) brightness(0.78) drop-shadow(0 3px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 7px rgba(255,145,30,0.22));transition:filter 0.45s ease}
.dyne::before{content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,150,40,0.2),rgba(255,150,40,0) 62%);animation:dyne-zar 7s ease-in-out infinite}
.dyne img{display:block;width:100%;height:auto}
.dyne:hover,.dyne:focus-visible{border-bottom:0;filter:saturate(1) brightness(1.05) drop-shadow(0 3px 8px rgba(0,0,0,0.5)) drop-shadow(0 0 14px rgba(255,155,45,0.65))}
.dyne:focus-visible{outline:2px solid #ff9a2e;outline-offset:2px;border-radius:50%}
@keyframes dyne-zar{0%,100%{opacity:0.3}12%{opacity:0.6}22%{opacity:0.38}47%{opacity:0.75}58%{opacity:0.34}76%{opacity:0.65}}
@media(min-width:769px){body.rozc{--dyne-w:2.8rem;--dyne-cx:4rem;--dyne-b:calc(3rem + env(safe-area-inset-bottom));--vetev-w:9rem}}
/* Siroky desktop: paticka do rohu nedosahne, dyne sedi na spodni hrane (bez vetve) */
@media(min-width:1000px){
body.rozc{--dyne-b:calc(0.4rem + env(safe-area-inset-bottom))}
.vetev{display:none}
.dyne{z-index:25}
}
@media(max-width:480px){body.rozc{--dyne-b:calc(3.9rem + env(safe-area-inset-bottom))}}
@media(max-width:360px){body.rozc{--dyne-w:2rem;--dyne-cx:1.35rem;--dyne-b:calc(3.05rem + env(safe-area-inset-bottom));--vetev-w:6rem}}
@media(max-height:560px){.dyne,.vetev{display:none}}
@media(prefers-reduced-motion:reduce){.dyne::before{animation:none;opacity:0.4}}
@media print{.dyne,.vetev{display:none!important}}