/* ============================================================
   MincoMise – Kouzelné pohádky
   Karty v knihovně, čtečka, kvíz, usínání, správa.
   ============================================================ */

/* ---------- hlavička a knihovna ---------- */
.poh-hlava{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.poh-hlava h2{margin:0;font-size:22px;background:linear-gradient(90deg,var(--zlata),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.poh-hlava-text p{margin:2px 0 0}
.poh-hlava-akce{display:flex;gap:6px;flex-wrap:wrap}
.poh-prokoho{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 10px;font-size:13px;color:var(--txt-dim)}
.poh-hledani{margin:4px 0 12px}
.poh-hledani input{width:100%;margin-bottom:8px}
.poh-sekce{margin-bottom:16px}
.poh-sekce .section-title{display:flex;align-items:center;justify-content:space-between}
.poh-rada{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.poh-rada::-webkit-scrollbar{height:6px}
.poh-rada::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.poh-rada.mrizka{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible}
.poh-karta{
  position:relative;flex:0 0 150px;scroll-snap-align:start;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);padding:0;overflow:hidden;color:var(--txt);
  background:var(--card);box-shadow:var(--lesk),0 10px 24px -14px rgba(0,0,0,.7);
  display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;font:inherit
}
.poh-karta:hover,.poh-karta:focus-visible{transform:translateY(-3px);box-shadow:var(--lesk),0 16px 30px -14px rgba(0,0,0,.8)}
.poh-obr{
  display:grid;place-items:center;height:92px;font-size:46px;line-height:1;
  background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.22),transparent 60%),linear-gradient(145deg,#6a4cff,#b36bff);
  text-shadow:0 6px 14px rgba(0,0,0,.35)
}
.poh-obr img{height:76px;width:76px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.poh-obr.velky img{height:72px;width:72px}
.poh-obr.maly img{height:32px;width:32px}
.poh-obr.velky{height:auto;width:88px;height:88px;border-radius:22px;font-size:48px;flex:0 0 88px}
.poh-obr.maly{width:40px;height:40px;border-radius:12px;font-size:22px;flex:0 0 40px;margin-right:10px}
.tema-zvirata .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#f59e0b,#ef6c3a)}
.tema-princezna .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#ec4899,#8b5cf6)}
.tema-drak .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#dc2626,#7c2d12)}
.tema-kouzla .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#6366f1,#a855f7)}
.tema-les .poh-obr,.tema-voda .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#059669,#0ea5e9)}
.tema-zima .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.3),transparent 60%),linear-gradient(145deg,#38bdf8,#6366f1)}
.tema-chytrost .poh-obr,.tema-chudoba .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#d97706,#78350f)}
.tema-rodina .poh-obr,.tema-nadobrounoc .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.25),transparent 60%),linear-gradient(145deg,#f472b6,#fb923c)}
.tema-cert .poh-obr,.tema-smutek .poh-obr{background:radial-gradient(circle at 50% 110%,rgba(255,255,255,.2),transparent 60%),linear-gradient(145deg,#334155,#7c3aed)}
.poh-karta-telo{display:flex;flex-direction:column;gap:3px;padding:8px 10px 10px;min-height:92px}
.poh-karta-telo b{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poh-karta-telo small{color:var(--txt-dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poh-znacky{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.poh-znacka{font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt-dim);white-space:nowrap}
.poh-pokrok{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px}
.poh-pokrok i{display:block;height:100%;background:linear-gradient(90deg,var(--zlata),var(--zlata-2));border-radius:3px}
.poh-srdce{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);font-size:15px;cursor:pointer;border:0;color:#fff;transition:transform .15s}
.poh-srdce.je{transform:scale(1.15)}
.poh-srdce.velky{position:static;width:44px;height:44px;font-size:22px;background:rgba(255,255,255,.08);flex:0 0 44px}
.poh-pata{text-align:center;margin:18px 0 8px;font-size:12px}
.poh-pata a{color:var(--info)}

/* ---------- detail ---------- */
.poh-detail-hlava{display:flex;gap:14px;align-items:flex-start}
.poh-detail-hlava h2{margin:0 0 4px;font-size:22px;line-height:1.2}
.poh-detail-hlava>div{flex:1;min-width:0}
.poh-shrnuti{margin:14px 0 10px;line-height:1.55;color:var(--txt)}
.poh-akce{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.poh-akce .btn-big{flex:1 1 44%;padding:14px 12px;font-size:15px}
.poh-mini-akce{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.poh-nahravka-akce{display:flex;gap:6px;align-items:center}
.poh-nahravka small{display:block}

/* ---------- čtečka ---------- */
body.poh-ctecka-otevrena .tabbar{display:none}
.poh-ctecka{--poh-pismo:1;--poh-radky:1.6;margin:-8px -4px 0;padding:0 4px 24px;border-radius:var(--radius);min-height:70vh}
.poh-ctecka-lista{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 4px;backdrop-filter:blur(14px);background:rgba(15,18,38,.75);border-bottom:1px solid var(--line);border-radius:0 0 14px 14px}
.poh-ctecka-nazev{flex:1;min-width:0;text-align:center}
.poh-ctecka-nazev b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.poh-ctecka-nazev small{display:block;color:var(--txt-dim);font-size:11px}
.poh-rezim{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 8px;margin:8px 0;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.poh-mic-stav{font-size:13px;color:var(--txt-dim);display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.poh-mic-stav i{width:10px;height:10px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 rgba(255,92,122,.6);animation:pohPuls 1.2s infinite}
@keyframes pohPuls{0%{box-shadow:0 0 0 0 rgba(255,92,122,.6)}70%{box-shadow:0 0 0 10px rgba(255,92,122,0)}100%{box-shadow:0 0 0 0 rgba(255,92,122,0)}}
.poh-prehravac{justify-content:center}
.poh-prehravac audio{width:100%}
.poh-rychlost{display:flex;align-items:center;gap:6px;font-size:14px;flex-basis:100%;justify-content:center}
.poh-rychlost input{width:150px}
.poh-text{padding:10px 10px 6px;font-size:calc(18px * var(--poh-pismo));line-height:var(--poh-radky);border-radius:16px}
.poh-text h3{margin:6px 0 12px;font-size:1.15em}
.poh-odst{margin:0 0 .95em;padding:4px 8px;border-radius:10px;transition:background .25s;cursor:pointer;text-indent:0}
.poh-odst.aktualni{background:rgba(255,201,60,.14);box-shadow:inset 3px 0 0 var(--zlata)}
.poh-slovo{
  display:inline;border:0;background:rgba(255,201,60,.16);color:inherit;font:inherit;padding:0 .25em;border-radius:6px;
  border-bottom:2px dotted var(--zlata);cursor:pointer;transition:background .2s
}
.poh-slovo i{font-style:normal;font-size:.75em;opacity:.8}
.poh-slovo.jen-ikona{padding:0 .3em}
.poh-slovo.hraje{background:var(--zlata);color:#2a1b00;animation:pohHraje .5s}
@keyframes pohHraje{0%{transform:scale(1.15)}100%{transform:scale(1)}}
.poh-konec{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.chip.chip-sm{padding:3px 9px;font-size:12px}

/* motivy čtečky – text je vždy na vlastním pozadí, ať je čitelný */
.poh-ctecka.motiv-svetly .poh-text{background:#fbf5e6;color:#2b2416}
.poh-ctecka.motiv-svetly .poh-odst.aktualni{background:rgba(255,170,0,.16)}
.poh-ctecka.motiv-svetly .poh-slovo{background:rgba(255,160,0,.18);color:#5a3a00}
.poh-ctecka.motiv-tmavy .poh-text{background:#171a35;color:#e9ebff}
.poh-ctecka.motiv-nocni .poh-text{background:#0b0a12;color:#c9b99a}
.poh-ctecka.motiv-nocni .poh-odst.aktualni{background:rgba(255,170,60,.08)}
.poh-ctecka.motiv-nocni .poh-slovo{background:rgba(255,170,60,.12);border-bottom-color:#a67c3a}

/* nahrávání */
.poh-nahr{flex-direction:column;align-items:stretch}
.poh-nahr.bezi{flex-direction:row;align-items:center}
.poh-rec-tecka{width:14px;height:14px;border-radius:50%;background:var(--txt-dim)}
.poh-rec-tecka.bezi{background:var(--bad);animation:pohPuls 1s infinite}
.poh-nahr-uloz{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.poh-nahr-tl{display:flex;gap:8px}
.poh-nast-radek{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:8px 0}
.poh-nast-radek b{min-width:48px;text-align:center}
.poh-nast-radek input[type=range]{flex:1;max-width:180px}

/* ---------- kvíz ---------- */
.poh-kviz h3{font-size:20px;margin:6px 0 14px;line-height:1.3}
.poh-moznosti{display:grid;gap:10px}
.poh-moznosti.obrazky{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.poh-moznost{
  border:2px solid var(--line);border-radius:18px;background:var(--card-2);color:var(--txt);font:inherit;font-size:16px;font-weight:700;
  padding:14px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--lesk);transition:transform .12s,border-color .2s
}
.poh-moznost:active{transform:scale(.97)}
.poh-moznost-obr{font-size:44px;line-height:1}
.poh-moznost.spravne{border-color:var(--good);background:rgba(47,208,122,.18);animation:pohHraje .4s}
.poh-moznost.spatne{border-color:var(--bad);animation:pohTres .4s}
@keyframes pohTres{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.poh-kviz-zprava{min-height:1.4em;text-align:center;font-weight:700;margin:12px 0 0}
.poh-kviz-konec{text-align:center}
.poh-kviz-konec h2{margin:6px 0}
.poh-odmena{font-size:20px;font-weight:900;color:var(--zlata)}
.poh-odmena .coin-icon{vertical-align:-3px}

/* ---------- usínání ---------- */
.poh-usinani{padding-bottom:20px}
.poh-usinani-hlava h2{margin:6px 0 2px}
.poh-usinani-mrizka{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.poh-usinani-dlazdice{border-radius:18px;background:var(--card);border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:6px;transition:background .3s}
.poh-usinani-dlazdice.on{background:linear-gradient(160deg,#2b2365,#3d2b86);border-color:rgba(255,201,60,.5);box-shadow:0 0 0 1px rgba(255,201,60,.3),0 12px 26px -16px rgba(0,0,0,.8)}
.poh-usinani-dlazdice button{border:0;background:none;color:var(--txt);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}
.poh-usinani-dlazdice button span{font-size:34px;line-height:1}
.poh-usinani-dlazdice button b{font-size:12px}
.poh-usinani-dlazdice input[type=range]{width:100%;margin:0}
.poh-usinani-ovladani{display:flex;flex-direction:column;gap:10px}
.poh-usinani-radek{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.poh-usinani-radek>span{color:var(--txt-dim)}
body.poh-noc{background:#07060d}
body.poh-noc .topbar,body.poh-noc .tabbar{opacity:.35;transition:opacity .4s}
body.poh-noc .topbar:hover,body.poh-noc .tabbar:hover{opacity:1}
body.poh-noc .poh-usinani-dlazdice{background:#0f0d1c}
body.poh-noc .card{background:#0f0d1c}
.poh-vyber{max-height:50vh;overflow:auto}
.poh-vyber .row{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer}

/* ---------- moje / správa ---------- */
.poh-karty{margin:8px 0 12px}
.poh-hist{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center}
.vl-kap{display:flex;flex-direction:column;gap:6px;margin:8px 0;padding:8px;border:1px dashed var(--line);border-radius:12px}
.vl-kap textarea{width:100%;min-height:120px;font:inherit;font-size:14px;line-height:1.5}
.poh-admin-radek{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.poh-admin-stav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.poh-admin-dva{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.poh-admin-zvuk{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.poh-admin-zvuk input{width:110px}
.poh-admin-zvuk select{max-width:130px}
.poh-admin-sbirka summary{cursor:pointer;display:flex;align-items:center;gap:8px}
.poh-admin-kand{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:14px}
.ad-moznosti{display:flex;flex-direction:column;gap:4px}
.ad-moznost{display:flex;gap:6px;align-items:center}
.ad-moznost input[data-pole=obr]{width:60px}
.ad-moznost input[data-pole=text]{flex:1}

@media (min-width:700px){
  .poh-karta{flex-basis:170px}
  .poh-usinani-mrizka{grid-template-columns:repeat(5,1fr)}
  .poh-text{padding:16px 22px}
}
@media (prefers-reduced-motion:reduce){
  .poh-mic-stav i,.poh-rec-tecka.bezi{animation:none}
  .poh-karta{transition:none}
}