/* Rýchla pomoc — Whole You by Gabi
   Farby a písma sú tie isté ako na webe, aby appka nepôsobila cudzo.
   Tmavý režim nie je ozdoba: appka sa bude otvárať aj o tretej ráno. */

:root{
  --brown:#795B33; --brown-mid:#85663E; --cream:#ECDFC1; --cream-soft:#F4EBD7;
  --gold:#AB8D59; --ink:#4B3A22; --muted:#8A7658; --paper:#FCF8EF;
  --sand:#D8A77A; --terra:#B4693B;
  --line:rgba(121,91,51,.18);
  --shadow:0 4px 30px rgba(121,91,51,.10);
  --shadow-lg:0 16px 50px rgba(121,91,51,.16);
  --r:18px;
  --sans:'Montserrat',-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --app-bg:var(--cream-soft); --card:var(--paper); --ramik:#E3D3B0;
  /* Text na hnedom pozadí. Nesmie to byť --paper: v tmavom režime
     stmavne na #2A2217 a na hnedej by sa stratil. */
  --na-hnedej:#FCF8EF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetly"]){
    --ink:#F2E7D2; --muted:#B3A185; --paper:#2A2217; --cream:#3A2F20;
    --cream-soft:#1E180F; --line:rgba(236,223,193,.16);
    --app-bg:#1E180F; --card:#2A2217; --ramik:#3A2F20; --gold:#C8AC78;
    --shadow:0 4px 30px rgba(0,0,0,.35); --shadow-lg:0 16px 50px rgba(0,0,0,.5);
  }
}
:root[data-tema="tmavy"]{
  --ink:#F2E7D2; --muted:#B3A185; --paper:#2A2217; --cream:#3A2F20;
  --cream-soft:#1E180F; --line:rgba(236,223,193,.16);
  --app-bg:#1E180F; --card:#2A2217; --ramik:#3A2F20; --gold:#C8AC78;
  --shadow:0 4px 30px rgba(0,0,0,.35); --shadow-lg:0 16px 50px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--app-bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:.01em}

.app{position:relative;width:100%;min-height:100dvh;overflow:hidden}
@media (min-width:760px){
  body{background:radial-gradient(900px 500px at 50% -10%, rgba(171,141,89,.18), transparent 70%), var(--cream);
       display:flex;align-items:center;justify-content:center;padding:28px 16px}
  .app{max-width:400px;height:min(860px,calc(100dvh - 56px));min-height:0;
       border-radius:42px;box-shadow:var(--shadow-lg),0 0 0 10px #2A2217,0 0 0 11px rgba(0,0,0,.25);
       background:var(--app-bg)}
}

.obrazovka{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--app-bg)}
.telo{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---------- hlavička ---------- */
.hlava{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px}
/* Značka webu. Kreslí sa maskou, nie obrázkom — tak ju zafarbí CSS
   a v tmavej téme sa nemusí držať druhý súbor s inou farbou. */
.logo{
  display:block;width:150px;height:36px;flex:0 0 auto;
  background-color:var(--brown);
  -webkit-mask:url(logo.svg) left center/contain no-repeat;
  mask:url(logo.svg) left center/contain no-repeat
}
:root[data-tema="tmavy"] .logo{background-color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .logo{background-color:var(--gold)}}

/* Názov appky vo vlastnom riadku pod logom. V jednom riadku so značkou
   a prihlásením sa na úzkom telefóne nemá kam vojsť. */
.nazov-appky{
  margin:4px 18px 0;text-align:center;
  font-family:var(--serif);font-size:18px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brown-mid)
}
.nazov-appky::after{
  content:"";display:block;width:34px;height:1px;margin:9px auto 0;
  background:var(--line)
}
:root[data-tema="tmavy"] .nazov-appky{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .nazov-appky{color:var(--gold)}}
.vstup{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--brown-mid);background:var(--card)}
.vstup svg{width:15px;height:15px}
:root[data-tema="tmavy"] .vstup{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .vstup{color:var(--gold)}}

/* ---------- úvodná veta ---------- */
.uvod{margin:14px 18px 16px;font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--ink);text-align:center}

/* ---------- výber ---------- */
.vyber-riadok{padding:0 16px 14px}
.vyber{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:var(--card);
  border:1px solid var(--ramik);border-radius:16px;padding:11px 15px;
  transition:border-color .15s ease, transform .14s ease}
.vyber:active{transform:scale(.99);border-color:var(--gold)}
.vyber[aria-expanded="true"]{border-color:var(--gold)}
.vyber .ik{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;color:var(--brown-mid)}
:root[data-tema="tmavy"] .vyber .ik{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .vyber .ik{color:var(--gold)}}
.vyber .ik svg{width:16px;height:16px}
.vyber small{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600}
.vyber b{display:block;font-size:14.5px;margin-top:3px;line-height:1.2}
.vyber .sip{margin-left:auto;color:var(--muted);display:grid;place-items:center;transition:transform .2s ease}
.vyber .sip svg{width:17px;height:17px}
.vyber[aria-expanded="true"] .sip{transform:rotate(180deg)}

.sekcia-nadpis{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:4px 18px 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600}

/* ---------- zoznam ---------- */
.zoznam{list-style:none;margin:0;padding:0 14px 8px;display:flex;flex-direction:column;gap:9px}
.polozka{width:100%;display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:center;
  background:var(--card);border:1px solid var(--ramik);border-radius:var(--r);
  padding:9px 13px 9px 9px;text-align:left;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.polozka:active{transform:scale(.985);box-shadow:var(--shadow);border-color:var(--gold)}
.polozka .obal{width:76px;height:58px;border-radius:12px;overflow:hidden;position:relative;
  background:var(--cream);flex:0 0 auto;display:block}
.polozka .obal img{width:100%;height:100%;object-fit:cover;display:block}
.polozka .obal span{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(42,34,23,.78));
  color:var(--paper);font-size:10.5px;font-weight:600;padding:9px 6px 4px;text-align:right;letter-spacing:.04em}
.polozka strong{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.polozka em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:3px;font-size:12px;font-style:normal;color:var(--muted);line-height:1.35}
.play{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);
  display:grid;place-items:center;flex:0 0 auto;color:var(--brown-mid)}
:root[data-tema="tmavy"] .play{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .play{color:var(--gold)}}
.play svg{width:14px;height:14px;margin-left:2px}

/* ---------- pás prihlásenia ---------- */
.pas{margin:14px;padding:16px 18px;border-radius:var(--r);background:var(--cream);
  border:1px solid var(--ramik);display:flex;align-items:center;gap:14px;width:calc(100% - 28px)}
.pas .ikona{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--card);
  display:grid;place-items:center;color:var(--brown-mid);border:1px solid var(--line)}
.pas .ikona svg{width:17px;height:17px}
.pas b{display:block;font-size:13.5px}
.pas small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}

.pata{padding:6px 18px calc(24px + env(safe-area-inset-bottom));text-align:center}
.na-plochu{
  display:inline-flex;align-items:center;gap:9px;margin:4px auto 0;
  border:1px solid var(--ramik);border-radius:999px;background:var(--card);
  padding:11px 18px;font-size:13.5px;font-weight:600;color:var(--brown-mid);
  box-shadow:var(--shadow);transition:transform .14s ease, border-color .14s ease
}
.na-plochu:active{transform:scale(.98);border-color:var(--gold)}
.na-plochu svg{width:17px;height:17px}
:root[data-tema="tmavy"] .na-plochu{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .na-plochu{color:var(--gold)}}
.pata p{margin:12px 0 0;font-size:11.5px}
.pata p a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ---------- prehrávač ---------- */
#prehravac{background:#17120B;color:#F4EBD7}
.ph-vrch{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 8px;position:relative;z-index:3}
.ph-ikona{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(244,235,215,.1);color:#F4EBD7}
.ph-ikona svg{width:17px;height:17px}
.ph-vrch > span.ph-ikona{background:transparent}
.ph-prepinac{display:flex;background:rgba(244,235,215,.1);border-radius:999px;padding:3px;gap:2px}
.ph-prepinac button{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;color:rgba(244,235,215,.6)}
.ph-prepinac button[aria-pressed="true"]{background:#F4EBD7;color:#2A2217}

.ph-scena{flex:1;position:relative;display:grid;place-items:center;overflow:hidden;min-height:0}
#video{width:100%;height:100%;object-fit:contain;background:#17120B;display:block;
  transition:opacity .35s ease}
#prehravac.len-zvuk #video{opacity:.06}

.ph-stav{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  padding:30px;text-align:center;background:rgba(23,18,11,.86)}
.ph-stav p{margin:0;font-size:14px;color:rgba(244,235,215,.8);line-height:1.55;max-width:280px}
.tocenie{width:34px;height:34px;border-radius:50%;border:2px solid rgba(244,235,215,.2);
  border-top-color:var(--sand);animation:toc 1s linear infinite}
@keyframes toc{to{transform:rotate(360deg)}}
.ph-stav .btn{background:#F4EBD7;color:#2A2217;border-radius:999px;padding:12px 22px;font-size:14px;font-weight:600}

.ph-spodok{padding:14px 20px calc(24px + env(safe-area-inset-bottom));position:relative;z-index:3;display:grid;gap:15px;
  background:linear-gradient(transparent,rgba(23,18,11,.9) 30%)}
.ph-nazov h2{font-size:21px;line-height:1.25}
.ph-nazov p{margin:6px 0 0;font-size:13px;color:rgba(244,235,215,.62);line-height:1.5}
.pruh{position:relative;height:16px;display:flex;align-items:center;cursor:pointer}
.pruh::before{content:'';position:absolute;left:0;right:0;height:3px;border-radius:3px;background:rgba(244,235,215,.16)}
.pruh i{position:relative;display:block;height:3px;width:0%;background:var(--sand);border-radius:3px;transition:width .25s linear}
.cas{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(244,235,215,.55);font-variant-numeric:tabular-nums;margin-top:-6px}
.ovladanie{display:flex;align-items:center;justify-content:center;gap:26px}
.ov{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:rgba(244,235,215,.75)}
.ov svg{width:20px;height:20px}
.ov-hlavne{width:74px;height:74px;background:#F4EBD7;color:#2A2217;box-shadow:0 8px 30px rgba(244,235,215,.22)}
.ov-hlavne svg{width:26px;height:26px}

/* ---------- spodné okná ---------- */
.zatmenie{position:absolute;inset:0;background:rgba(23,18,11,.5);z-index:8;display:flex;align-items:flex-end;
  animation:vstup .22s ease}
@keyframes vstup{from{opacity:0}to{opacity:1}}
.sheet{width:100%;background:var(--app-bg);border-radius:26px 26px 0 0;
  padding:8px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:zdola .28s cubic-bezier(.2,.8,.2,1);
  max-height:86%;overflow-y:auto;overscroll-behavior:contain}
@keyframes zdola{from{transform:translateY(40px)}to{transform:translateY(0)}}
.uchytka{width:38px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 14px}
.sheet h2{font-size:20px;margin-bottom:12px}
.sheet ol{margin:0 0 16px;padding-left:20px;font-size:13.5px;line-height:1.7}
.sheet ol b{color:var(--brown-mid)}
:root[data-tema="tmavy"] .sheet ol b{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .sheet ol b{color:var(--gold)}}
.sheet .zalozky{display:flex;gap:7px;margin-bottom:14px}
.sheet .zalozky button{flex:1;border:1px solid var(--line);border-radius:999px;padding:8px;
  font-size:12.5px;font-weight:600;color:var(--muted);background:var(--card)}
.sheet .zalozky button[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--na-hnedej)}
.ukazka-zdielania{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:2px 0 14px;padding:14px;border-radius:14px;
  background:var(--cream);color:var(--brown-mid)
}
:root[data-tema="tmavy"] .ukazka-zdielania{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .ukazka-zdielania{color:var(--gold)}}
.ukazka-zdielania svg{width:30px;height:30px}
.ukazka-zdielania .sipka{width:20px;height:20px;opacity:.5;animation:dolu 1.6s ease-in-out infinite}
@keyframes dolu{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.ukazka-zdielania .sipka{animation:none}}
.pozn-apple{margin:0 0 14px;font-size:12px;color:var(--muted);line-height:1.5}
.btn{border-radius:999px;padding:14px 20px;font-size:15px;font-weight:600;text-align:center;
  background:var(--brown);color:var(--na-hnedej);width:100%;box-shadow:0 6px 20px rgba(121,91,51,.26);display:block}

.volby{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:3px}
.volba{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;
  border-radius:14px;border:1px solid transparent;transition:background .14s ease}
.volba:active{background:var(--cream)}
.volba[aria-pressed="true"]{background:var(--cream);border-color:var(--ramik)}
.volba .nazov{font-size:14.5px;font-weight:500}
.volba[aria-pressed="true"] .nazov{font-weight:600}
.volba .pocet{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.volba .fajka{width:18px;height:18px;flex:0 0 18px;color:var(--brown-mid);opacity:0}
:root[data-tema="tmavy"] .volba .fajka{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-tema="svetly"]) .volba .fajka{color:var(--gold)}}
.volba[aria-pressed="true"] .fajka{opacity:1}
/* Podkategória je odsadená pod svoju kategóriu — rovnako ako vo filtri
   na stránke so všetkými cvičeniami. */
.volba.podkategoria .nazov{margin-left:16px;font-weight:400}
.volba.podkategoria[aria-pressed="true"] .nazov{font-weight:600}

/* ---------- prepínač témy ---------- */
.tema-prep{position:fixed;right:14px;bottom:14px;z-index:30;width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);box-shadow:var(--shadow);transition:opacity .2s ease}
.tema-prep svg{width:17px;height:17px}
@media (min-width:760px){.tema-prep{right:20px;bottom:20px}}
body.okno-otvorene .tema-prep,body.hra .tema-prep{opacity:0;pointer-events:none}

/* =======================================================
   Návod na pridanie ikonky
   -------------------------------------------------------
   Ukazuje sa vždy len jeden — ten, ktorý sedí na zariadenie.
   Zvyšok je schovaný pod odkazom, keby sme sa pomýlili.
   ======================================================= */

.navod-kde{
  margin:0 0 14px;font-size:.84rem;opacity:.65
}
.navod-tip{
  margin:10px 0 0;font-size:.84rem;line-height:1.5;opacity:.8
}
.navod-ine{
  display:block;width:100%;margin:16px 0 0;padding:10px 0;
  background:none;border:0;border-top:1px solid var(--line);
  color:inherit;opacity:.7;font:inherit;font-size:.84rem;cursor:pointer;text-align:center
}
.navod-ine:hover{opacity:1}
#navod-zalozky{
  display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0
}
#navod-zalozky button{
  flex:0 0 auto;padding:8px 14px;font-size:.78rem;border-radius:100px;
  background:none;border:1px solid var(--line);
  color:inherit;cursor:pointer
}
#navod-zalozky button[aria-pressed="true"]{
  background:var(--brown);border-color:transparent;color:var(--na-hnedej)
}

/* =======================================================
   Strany zoznamu
   ======================================================= */

.strany{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin:18px 0 4px;flex-wrap:wrap
}
.strany button{
  min-width:38px;height:38px;padding:0 10px;border-radius:100px;
  background:none;border:1px solid var(--line);
  color:inherit;font:inherit;font-size:.86rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center
}
.strany button:hover:not(:disabled){border-color:currentColor}
.strany button[aria-current="true"]{
  background:var(--brown);border-color:transparent;color:var(--na-hnedej);font-weight:600
}
.strany button:disabled{opacity:.3;cursor:default}

/* Značka pri zakúpenej nahrávke v spoločnom zozname. */
.zoznam li.odomknuta .znacka{
  display:inline-block;margin:0 0 4px;padding:2px 8px;border-radius:100px;
  background:var(--brown);color:var(--na-hnedej);
  font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase
}

/* Ponuka ďalších nahrávok — v päte, pod tlačidlom na plochu. */
.chcem-viac{
  margin:20px 0 0;padding:18px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);text-align:center
}
.chcem-viac p{margin:0 0 12px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.chcem-viac .btn{display:inline-block;width:auto;padding:12px 26px}