/* Procházky s indiciemi – svylety.cz */
:root{
  --bg:#f6f4ee; --panel:#fff; --panel2:#eef2ea; --line:#d9ddd2;
  --zelena:#2f6b3f; --zelena2:#3f8a52; --akcent:#e2963a; --text:#24302a; --muted:#66706a;
  --ok:#2f8a5a; --bad:#c2454f; --radius:14px;
}
*{box-sizing:border-box}
html{overflow-x:hidden} body{overflow-x:clip}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.55}
button,input{font:inherit}
.hidden{display:none!important}
h1,h2,h3{font-weight:800;margin:0 0 .4em;line-height:1.2;color:var(--zelena)}
h1{font-size:1.9rem} h2{font-size:1.3rem} h3{font-size:1.05rem}
p{margin:.4em 0 .8em}
a{color:var(--zelena2)}

.btn{display:block;width:100%;padding:.85em 1em;margin:.5em 0;border:0;border-radius:var(--radius);
  background:var(--zelena);color:#fff;font-weight:700;font-size:1.02rem;cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{background:var(--zelena2)}
.btn.second{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.btn.second:hover{background:var(--panel2)}
.btn.small{display:inline-block;width:auto;padding:.5em .9em;font-size:.9rem;margin:.25em .25em .25em 0}
.btn:disabled{opacity:.5}

/* výběr */
.hlava{background:linear-gradient(160deg,#2f6b3f 0%,#4d9460 60%,#8cbf7a 100%);color:#fff;padding:22px 18px 70px;position:relative;overflow:hidden}
.hlava::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;background:var(--bg);
  clip-path:polygon(0 70%,12% 35%,24% 60%,38% 15%,52% 55%,63% 30%,76% 62%,88% 25%,100% 50%,100% 100%,0 100%)}
.hlava .logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.02em;opacity:.95}
.hlava h1{color:#fff;font-size:clamp(1.8rem,5vw,2.6rem);margin:.6em 0 .2em;max-width:760px}
.hlava p{max-width:640px;font-size:1.08rem;opacity:.95;margin:0}
.obal{max-width:760px;margin:0 auto}
#vyber .obal{padding:0 16px 40px}
.jak{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 10px}
.jak div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.93rem}
.jak b{display:block;color:var(--zelena)}
h2.kraj{margin:1.4em 0 .4em;font-size:1.35rem}
h2.kraj small{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:.4em}
.karta-trasy{display:block;width:100%;text-align:left;margin:10px 0;padding:16px 18px;border-radius:var(--radius);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .12s,box-shadow .12s}
.karta-trasy:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(47,107,63,.12);border-color:#bcd2bf}
.karta-trasy b{display:block;font-size:1.15rem;color:var(--zelena)}
.karta-trasy span{display:block;font-size:.85rem;color:var(--muted);margin-top:.2em}
.karta-trasy small{display:block;margin-top:.45em;font-size:.95rem;color:var(--text)}
.mimo{display:inline-block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:var(--panel2);color:var(--zelena);border-radius:20px;padding:.25em .9em}
.drobne{font-size:.9rem;color:var(--muted);margin-top:1.4em}
.paticka{text-align:center;font-size:.85rem;margin:26px 0 10px}
.paticka a{color:var(--muted)}

/* start a konec */
#start,#konec{max-width:640px;margin:0 auto;padding:24px 18px 60px}
.erb{font-size:2.8rem;text-align:center}
.prolog p{font-size:1.06rem}
.podtitul{color:var(--muted);text-align:center;font-size:.95rem}
label{font-weight:600}

/* procházka */
#hra{display:flex;flex-direction:column;height:100vh;height:100dvh}
.lista{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;
  background:var(--zelena);color:#fff;font-size:.88rem}
#listaNazev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:600}
.lista .stat{display:flex;gap:12px;flex:none}
.lista .stat b{font-size:1.02rem}
#mapa{height:38vh;min-height:220px;flex:none;background:#dfe6da}
#karta{flex:1;overflow-y:auto;padding:16px 16px 90px;background:var(--bg)}
.stitek{display:inline-block;font-size:.8rem;font-weight:700;color:#fff;background:var(--akcent);border-radius:20px;padding:.15em .75em;margin-bottom:.5em}
.kde{color:var(--muted);font-size:.9rem;margin-top:-.3em}
.vzdal{font-size:1.7rem;font-weight:800;color:var(--zelena);margin:.3em 0}
.vzdal small{font-size:.9rem;font-weight:400;color:var(--muted)}
.blizko{background:#e5f3ea;border:1px solid var(--ok);border-radius:var(--radius);padding:.6em .8em;color:var(--ok);font-weight:700}
.fakta{background:var(--panel);border-left:4px solid var(--akcent);border-radius:8px;padding:.6em .9em .6em 1.6em;margin:1em 0}
.fakta li{margin:.35em 0}
.otazka{font-size:1.12rem;margin:.6em 0 .8em;font-weight:600}
.volby button{display:block;width:100%;text-align:left;padding:.75em .9em;margin:.4em 0;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.volby button:hover{border-color:var(--zelena2)}
.volby button.spatne{border-color:var(--bad);opacity:.6}
.volby button.dobre{border-color:var(--ok);background:#e5f3ea}
input[type=text]{width:100%;padding:.8em;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:1.05rem}
.fb{padding:.6em .8em;border-radius:12px;margin:.6em 0}
.fb.ok{background:#e5f3ea;color:#1f6a43}
.fb.bad{background:#fbe8ea;color:var(--bad)}
.fb.info{background:var(--panel2);color:var(--muted)}
.napoveda{color:#9a5a12;font-size:.95rem}
.progress{display:flex;gap:6px;margin:.3em 0 1em}
.progress i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.progress i.done{background:var(--zelena2)}
.spodek{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);z-index:1000}
.spodek .btn{margin:0;padding:.6em;font-size:.9rem}
table.souhrn{width:100%;border-collapse:collapse;font-size:.95rem;margin:1em 0}
table.souhrn td{padding:.45em .3em;border-bottom:1px solid var(--line)}

/* překryv */
#prekryv{position:fixed;inset:0;background:rgba(246,244,238,.98);z-index:2000;overflow-y:auto;padding:20px 16px 80px}
#prekryv .vnitrek{max-width:640px;margin:0 auto}

/* mapa – značky */
.znacka{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:bold 14px system-ui,sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.znacka.cil{background:var(--akcent);color:#fff;animation:pulz 1.6s infinite}
.znacka.hotovo{background:var(--zelena2);color:#fff}
.znacka.lokal{background:#fff;color:var(--zelena);border-color:var(--zelena)}
.ja{width:16px;height:16px;border-radius:50%;background:#3d8bff;border:3px solid #fff;box-shadow:0 0 0 2px rgba(61,139,255,.4)}
@keyframes pulz{0%{box-shadow:0 0 0 0 rgba(226,150,58,.7)}100%{box-shadow:0 0 0 16px rgba(226,150,58,0)}}
.leaflet-container{font-family:system-ui,sans-serif}

/* mapa startů na seznamu */
#mapaStartu{height:clamp(260px,45vh,420px);border-radius:var(--radius);border:1px solid var(--line);margin:4px 0 14px;background:#dfe6da;z-index:1}
.znacka-start{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;
  background:var(--zelena);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.znacka-start.deti{background:var(--akcent)}
.popup-start{display:inline-block;margin-top:.4em;font-weight:700}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:-6px 0 10px}
.legenda i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:var(--zelena)}
.legenda i.deti{background:var(--akcent)}
.karta-trasy em.deti{font-style:normal;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--akcent);color:#fff;border-radius:20px;padding:.15em .6em;vertical-align:3px;margin-left:.3em}

/* filtr, navigace krajů, skupiny */
.filtr{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.filtr button{font:inherit;font-size:.9rem;font-weight:600;padding:.45em .95em;border-radius:30px;border:1px solid var(--line);background:#fff;color:var(--ink,#24302a);cursor:pointer}
.filtr button small{color:var(--muted);font-weight:600;margin-left:.25em}
.filtr button.aktivni{background:var(--zelena);border-color:var(--zelena);color:#fff}
.filtr button.aktivni small{color:rgba(255,255,255,.85)}
.kraje-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px;font-size:.85rem}
.kraje-nav a{padding:.25em .7em;border-radius:20px;background:#eef2ea;color:var(--zelena);text-decoration:none;font-weight:600}
.kraje-nav a:hover{background:#e0e8da}
.kraj-sek{scroll-margin-top:12px}
.skupina h3{font-size:1rem;margin:1em 0 .45em;color:var(--muted);text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line);padding-bottom:.25em}
.karta-trasy.hidden,.skupina.hidden,.kraj-sek.hidden,.kraje-nav a.hidden{display:none}
.shluk-start{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;
  background:var(--zelena);border:3px solid rgba(255,255,255,.9);box-shadow:0 1px 6px rgba(0,0,0,.45)}
.shluk-start.deti{background:var(--akcent)}
.shluk-start.mix{background:linear-gradient(135deg,var(--zelena) 50%,var(--akcent) 50%)}

/* statický obsah stránky trasy (pro vyhledávače a před načtením aplikace) */
.staticky{padding:1.2em 0 2em;line-height:1.55}
.staticky h1{margin:.2em 0 .5em}
.staticky ul{padding-left:1.2em}