/* ============================================================
   KNIHOVNA POHÁDEK — Fantasy redesign
   ============================================================ */

/* ── Design tokeny ──────────────────────────────────────── */
:root {
  --bg:           #F5EDD8;
  --bg-alt:       #EDE3C8;
  --bg-card:      #FAF4E6;
  --bg-glass:     rgba(250,244,230,0.88);
  --border:       rgba(160,130,80,0.20);
  --border-med:   rgba(160,130,80,0.38);
  --ink:          #2C1F0E;
  --ink-soft:     #6B5234;
  --ink-faint:    #9C7D55;
  --gold:         #C8922A;
  --gold-lt:      #E8B84B;
  --gold-glow:    rgba(232,184,75,0.35);
  --gold-shine:   rgba(232,184,75,0.10);
  --plum:         #3D1F5C;
  --plum-mid:     #5A2D84;
  --plum-lt:      rgba(90,45,132,0.12);
  --teal:         #1A5C54;
  --teal-lt:      rgba(26,92,84,0.12);
  --terra:        #B85C30;
  --terra-dk:     #8B4020;
  --terra-lt:     rgba(184,92,48,0.12);
  --sh-sm:  0 2px 8px  rgba(44,31,14,0.10);
  --sh-md:  0 6px 24px rgba(44,31,14,0.14);
  --sh-lg:  0 16px 48px rgba(44,31,14,0.18);
  --sh-gold:0 8px 32px rgba(200,146,42,0.25);
  --r-sm:   12px;  --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-full: 999px;
  --font-title:   'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --ease:  .2s cubic-bezier(.4,0,.2,1);
  --spring:.35s cubic-bezier(.34,1.56,.64,1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:           #0D0A1A;  --bg-alt: #150E28; --bg-card: #1B1330;
  --bg-glass:     rgba(27,19,48,0.92);
  --border:       rgba(180,140,255,0.12); --border-med: rgba(180,140,255,0.22);
  --ink:          #EDE8FF;  --ink-soft: #A898CC; --ink-faint: #6B5A8C;
  --gold:         #E8B84B;  --gold-lt: #F5CC6A;
  --gold-glow:    rgba(232,184,75,0.30); --gold-shine: rgba(232,184,75,0.07);
  --plum:         #C4A0FF;  --plum-mid: #9B6FE8; --plum-lt: rgba(155,111,232,0.15);
  --teal:         #2EBDAF;  --teal-lt: rgba(46,189,175,0.12);
  --terra:        #E87845;  --terra-dk: #C05828; --terra-lt: rgba(232,120,69,0.12);
  --sh-sm:  0 2px 8px  rgba(0,0,0,0.30); --sh-md: 0 6px 24px rgba(0,0,0,0.40);
  --sh-lg:  0 16px 48px rgba(0,0,0,0.55); --sh-gold: 0 8px 32px rgba(232,184,75,0.20);
  color-scheme: dark;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); overscroll-behavior:none; user-select:none;
  -webkit-font-smoothing:antialiased; transition:background .3s ease,color .3s ease; }
button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
img    { -webkit-user-drag:none; display:block; }
input  { font-family:inherit; }
input[type="search"]::-webkit-search-cancel-button { display:none; }

/* ── Pozadí ──────────────────────────────────────────────── */
body::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%,  rgba(200,146,42,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 100%, rgba(61,31,92,0.07)  0%, transparent 60%),
    var(--bg);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%,  rgba(155,111,232,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 85% 90%, rgba(46,189,175,0.07)  0%, transparent 55%),
    var(--bg);
}

/* Hvězdičky dark mode */
.star-field { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.star-dot   { position:absolute; border-radius:50%; background:var(--gold-lt);
  animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s); }
@keyframes twinkle { 0%,100%{opacity:.12;transform:scale(.7);} 50%{opacity:.85;transform:scale(1.3);} }

/* ── Ikony ───────────────────────────────────────────────── */
.icon      { width:22px; height:22px; display:block; flex-shrink:0; }
.icon--sm  { width:18px; height:18px; }
.icon--lg  { width:28px; height:28px; }
.icon--xl  { width:48px; height:48px; }
.icon--huge{ width:64px; height:64px; color:var(--ink-faint); }

/* ── Screens ─────────────────────────────────────────────── */
.screen { position:fixed; inset:0; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
.screen--hidden   { display:none !important; }
.screen--centered { align-items:center; justify-content:center; padding:32px 24px; padding-top: max(32px, calc(32px + env(safe-area-inset-top))); padding-bottom: max(32px, calc(32px + env(safe-area-inset-bottom))); text-align:center; }

/* ══════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════ */
.topbar {
  display:flex; align-items:center; gap:8px;
  padding:14px 16px;
  padding-top: max(14px, calc(14px + env(safe-area-inset-top)));
  padding-left:  max(16px, calc(16px + env(safe-area-inset-left)));
  padding-right: max(16px, calc(16px + env(safe-area-inset-right)));
  background:var(--bg-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.topbar__title { font-family:var(--font-display); font-weight:700; font-size:1.12rem;
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar__title--player { text-align:center; font-size:.98rem; }

.icon-btn {
  width:44px; height:44px; min-width:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:1px solid var(--border); color:var(--ink-soft);
  transition:background var(--ease),transform var(--ease),color var(--ease),box-shadow var(--ease);
}
.icon-btn:active { transform:scale(.88); }
.icon-btn:hover  { background:var(--gold-shine); color:var(--gold); border-color:var(--gold-glow); }

/* ══════════════════════════════════════════════════════════
   PŘIHLAŠOVACÍ STRÁNKA
══════════════════════════════════════════════════════════ */
.login-page {
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 28px;
  padding-top:  max(40px, calc(40px + env(safe-area-inset-top)));
  padding-bottom:max(40px, calc(40px + env(safe-area-inset-bottom)));
  position:relative; overflow:hidden;
}

/* Scéna */
.login-scene { position:relative; width:200px; height:200px; margin-bottom:28px; flex-shrink:0; }
.scene-moon {
  position:absolute; top:4px; right:16px; width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, #F8DC8A, #D4A030);
  box-shadow:0 0 28px rgba(232,184,75,.55),0 0 60px rgba(232,184,75,.22);
  animation:moon-glow 4s ease-in-out infinite;
}
@keyframes moon-glow {
  0%,100%{box-shadow:0 0 28px rgba(232,184,75,.55),0 0 60px rgba(232,184,75,.22);}
  50%    {box-shadow:0 0 44px rgba(232,184,75,.75),0 0 90px rgba(232,184,75,.35);}
}
.scene-book {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  animation:book-float 6s ease-in-out infinite;
  filter:drop-shadow(0 14px 22px rgba(44,31,14,.25));
}
@keyframes book-float {
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%    {transform:translateX(-50%) translateY(-14px);}
}
.scene-star {
  position:absolute; font-size:.95rem; line-height:1;
  animation:scene-twinkle var(--d,2.5s) ease-in-out infinite var(--dl,0s);
}
@keyframes scene-twinkle {
  0%,100%{opacity:.25;transform:scale(.7) rotate(0deg);}
  50%    {opacity:1;  transform:scale(1.3) rotate(15deg);}
}
.scene-lantern {
  position:absolute; bottom:18px; left:6px; font-size:1.8rem;
  animation:lantern-swing 5s ease-in-out infinite; transform-origin:top center;
  filter:drop-shadow(0 4px 12px rgba(232,184,75,.5));
}
@keyframes lantern-swing { 0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);} }

.login-title  { font-family:var(--font-title); font-size:clamp(1.65rem,5.5vw,2.2rem);
  font-weight:700; color:var(--ink); margin:0 0 8px; letter-spacing:.02em; line-height:1.2; }
.login-tagline{ font-family:var(--font-display); font-size:.98rem; color:var(--ink-soft);
  font-style:italic; margin:0 0 32px; }

.google-btn {
  display:flex; align-items:center; justify-content:center; gap:13px;
  background:var(--bg-card); color:var(--ink);
  padding:16px 32px; border-radius:var(--r-full);
  font-weight:700; font-size:1rem; font-family:var(--font-display);
  text-decoration:none; border:1.5px solid var(--border-med); box-shadow:var(--sh-md);
  transition:transform var(--spring),box-shadow var(--ease),background var(--ease); min-width:260px;
}
.google-btn:active { transform:scale(.96); box-shadow:var(--sh-sm); }
.google-btn:hover  { background:var(--gold-shine); border-color:var(--gold-glow); box-shadow:var(--sh-gold); }
.login-note { margin:20px 0 0; font-size:.78rem; color:var(--ink-faint); text-align:center; max-width:280px; line-height:1.65; }

.pending-page { min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px 24px; padding-top:max(32px,calc(32px + env(safe-area-inset-top))); padding-bottom:max(32px,calc(32px + env(safe-area-inset-bottom))); text-align:center; gap:16px; }

/* ══════════════════════════════════════════════════════════
   LOADING
══════════════════════════════════════════════════════════ */
.loading-wrap { display:flex; flex-direction:column; align-items:center; gap:28px; }
.loading-orb  {
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, var(--gold-lt), var(--gold));
  box-shadow:0 0 40px var(--gold-glow),0 0 80px var(--gold-glow);
  display:flex; align-items:center; justify-content:center;
  animation:orb-breathe 2.5s ease-in-out infinite; position:relative;
}
.loading-orb::after { content:'✦'; font-size:2.2rem; color:rgba(255,255,255,.85); animation:orb-spin 4s linear infinite; }
@keyframes orb-breathe {
  0%,100%{transform:scale(1);   box-shadow:0 0 40px var(--gold-glow),0 0 80px var(--gold-glow);}
  50%    {transform:scale(1.1); box-shadow:0 0 60px var(--gold-glow),0 0 120px var(--gold-glow);}
}
@keyframes orb-spin { from{transform:rotate(0);} to{transform:rotate(360deg);} }
.loading-text { font-family:var(--font-display); font-size:1.05rem; color:var(--ink-soft);
  animation:text-fade 2s ease-in-out infinite; }
@keyframes text-fade { 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* ══════════════════════════════════════════════════════════
   TLAČÍTKA
══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--r-full);
  font-weight:700; font-size:1rem; font-family:var(--font-display); text-decoration:none; border:none;
  transition:transform var(--spring),box-shadow var(--ease);
}
.btn:active { transform:scale(.95); }
.btn--primary {
  background:linear-gradient(135deg, var(--terra), var(--terra-dk)); color:#fff;
  box-shadow:0 4px 16px rgba(184,92,48,.35),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--ghost { background:var(--bg-card); color:var(--ink-soft); border:1.5px solid var(--border-med); }
.error-emoji  { font-size:3.5rem; margin:0 0 8px; }
.error-title  { font-family:var(--font-display); font-size:1.25rem; font-weight:700; margin:0 0 8px; }
.error-detail { color:var(--ink-soft); font-size:.9rem; margin:0 0 24px; max-width:320px; }

/* ══════════════════════════════════════════════════════════
   DOMOVSKÁ OBRAZOVKA
══════════════════════════════════════════════════════════ */
.home-hero { padding:28px 22px 16px; text-align:center; }
.home-hero__label {
  font-family:var(--font-display); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--gold);
  margin:0 0 8px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.home-hero__label::before,.home-hero__label::after { content:'✦'; font-size:.58rem; opacity:.7; }
.home-hero__q { font-family:var(--font-title); font-size:clamp(1.3rem,4vw,1.8rem);
  font-weight:600; color:var(--ink); margin:0; line-height:1.3; }

.user-welcome { display:flex; align-items:center; gap:8px; padding:12px 22px 0; justify-content:center; }
.user-welcome__avatar { width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold-glow); box-shadow:0 0 10px var(--gold-glow); }
.user-welcome__name { font-size:.82rem; font-weight:600; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }

.home-actions {
  padding:20px 18px 32px; padding-bottom:max(32px, calc(32px + env(safe-area-inset-bottom))); display:flex; flex-direction:column; gap:14px;
  max-width:480px; margin:0 auto; width:100%;
}

/* ── Magické tlačítko ─────────────────────────────────────── */
.magic-btn {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #4A1878 0%, #2A0D52 55%, #180830 100%);
  border-radius:var(--r-lg); padding:26px 24px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  border:1px solid rgba(196,160,255,0.22);
  box-shadow:0 8px 32px rgba(90,45,132,.40),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform var(--spring),box-shadow var(--ease); cursor:pointer;
}
.magic-btn:active { transform:scale(.97); box-shadow:0 4px 16px rgba(90,45,132,.25); }
.magic-btn::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% -20%, rgba(232,184,75,.18) 0%, transparent 60%);
  opacity:0; transition:opacity var(--ease); pointer-events:none;
}
.magic-btn:hover::before { opacity:1; }
.magic-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.magic-star  { position:absolute; border-radius:50%; background:var(--gold-lt);
  animation:magic-twinkle var(--d,3s) ease-in-out infinite var(--dl,0s); }
@keyframes magic-twinkle { 0%,100%{opacity:.15;transform:scale(.5);} 50%{opacity:.9;transform:scale(1.4);} }
.magic-btn__icon {
  font-size:3rem; line-height:1; position:relative; z-index:1;
  isolation: isolate;
  animation:wand-wave 3.5s ease-in-out infinite;
}
@keyframes wand-wave { 0%,100%{transform:rotate(-6deg) scale(1);} 50%{transform:rotate(6deg) scale(1.1);} }
.magic-btn__label { font-family:var(--font-display); font-size:1.25rem; font-weight:800;
  color:#fff; text-align:center; line-height:1.2; position:relative; z-index:1; }
.magic-btn__sub   { font-size:.78rem; color:rgba(255,255,255,.5); font-style:italic; position:relative; z-index:1; }

/* ── Sekundární karta ─────────────────────────────────────── */
.action-card {
  background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:18px 20px; display:flex; align-items:center; gap:16px; cursor:pointer;
  box-shadow:var(--sh-sm);
  transition:transform var(--spring),box-shadow var(--ease),border-color var(--ease);
}
.action-card:active { transform:scale(.97); box-shadow:none; }
.action-card:hover  { border-color:var(--gold-glow); box-shadow:var(--sh-gold); transform:translateY(-2px); }
.action-card__icon  { width:50px; height:50px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; flex-shrink:0; }
.action-card__icon--browse { background:var(--teal-lt); }
.action-card__label { font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin:0 0 2px; }
.action-card__sub   { font-size:.78rem; color:var(--ink-soft); margin:0; }
.action-card__arrow { color:var(--ink-faint); margin-left:auto; }

/* ══════════════════════════════════════════════════════════
   PROCHÁZENÍ
══════════════════════════════════════════════════════════ */
.breadcrumb { flex:1; display:flex; align-items:center; gap:4px; overflow-x:auto; white-space:nowrap; font-size:.88rem; }
.breadcrumb button { color:var(--ink-faint); font-weight:600; padding:4px 6px; border-radius:8px;
  transition:color var(--ease),background var(--ease); }
.breadcrumb button:last-child { color:var(--terra); }
.breadcrumb button:hover      { background:var(--gold-shine); color:var(--gold); }
.breadcrumb__sep { color:var(--ink-faint); opacity:.45; }
.browse-subbar { margin:0; padding:10px 20px 2px; font-size:.78rem; font-weight:600; color:var(--ink-faint);
  display:flex; align-items:center; gap:6px; }
.browse-subbar::before { content:'✦'; color:var(--gold); font-size:.62rem; }

/* Grid */
.grid { display:grid; gap:14px; padding:14px; padding-bottom:max(14px, calc(14px + env(safe-area-inset-bottom))); grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); align-content:start; }

.card {
  display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden;
  background:var(--bg-card); border:1.5px solid var(--border); box-shadow:var(--sh-sm);
  cursor:pointer; position:relative;
  transition:transform var(--spring),box-shadow var(--ease),border-color var(--ease);
}
.card::after { content:''; position:absolute; inset:0; border-radius:var(--r-md);
  background:radial-gradient(ellipse at 50% 0%, var(--gold-shine) 0%, transparent 70%);
  opacity:0; transition:opacity var(--ease); pointer-events:none; }
.card:active { transform:scale(.94); box-shadow:none; }
.card:hover  { transform:translateY(-5px) scale(1.02); box-shadow:var(--sh-md),0 0 0 2px var(--gold-glow); border-color:transparent; }
.card:hover::after { opacity:1; }

.card__art { width:100%; aspect-ratio:1; object-fit:cover; background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.card__art--folder { background:linear-gradient(135deg, var(--teal-lt), var(--bg-alt)); }
.card__art--book   { background:linear-gradient(135deg, var(--plum-lt), var(--bg-alt)); }
.card__art .icon   { width:36%; height:36%; color:var(--ink-faint); }
.card__body  { padding:10px 12px 12px; }
.card__label { font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.35; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.empty-msg { text-align:center; color:var(--ink-soft); padding:40px; font-style:italic; }
.empty-msg--hidden { display:none; }

/* ══════════════════════════════════════════════════════════
   PŘEHRÁVAČ
══════════════════════════════════════════════════════════ */
.player { flex:1; display:flex; flex-direction:column; align-items:center;
  padding:14px 24px 32px; padding-bottom:max(32px, calc(32px + env(safe-area-inset-bottom))); max-width:480px; margin:0 auto; width:100%; }

.player__cover-wrap {
  width:min(65vw,275px); aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  position:relative; flex-shrink:0; margin-bottom:20px;
  background:linear-gradient(135deg, var(--plum), var(--bg-alt));
  box-shadow:0 12px 40px rgba(44,31,14,.2),0 4px 16px rgba(44,31,14,.12);
  display:flex; align-items:center; justify-content:center; transition:box-shadow 1s ease;
}
html[data-theme="dark"] .player__cover-wrap {
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 50px rgba(155,111,232,.12);
}
.player__cover-wrap.is-playing { animation:album-pulse 3.5s ease-in-out infinite; }
@keyframes album-pulse {
  0%,100%{box-shadow:0 12px 40px rgba(44,31,14,.20),0 4px 16px rgba(44,31,14,.12);}
  50%    {box-shadow:0 16px 56px rgba(200,146,42,.28),0 4px 16px rgba(44,31,14,.12);}
}
html[data-theme="dark"] .player__cover-wrap.is-playing { animation:album-pulse-dark 3.5s ease-in-out infinite; }
@keyframes album-pulse-dark {
  0%,100%{box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 50px rgba(155,111,232,.12);}
  50%    {box-shadow:0 16px 60px rgba(0,0,0,.6),0 0 70px rgba(232,184,75,.22);}
}
.player__cover          { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.player__cover-fallback { color:rgba(255,255,255,.55); width:38%; height:38%; }



.player__meta    { text-align:center; margin-bottom:10px; min-height:2.2em; width:100%; }

.player__chapter { font-family:var(--font-display); font-size:.88rem; font-weight:700; color:var(--ink); margin:0;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.player__chapter.marquee-on { text-overflow:clip; }
.player__chapter.marquee-on .marquee-inner {
  display:inline-block;
  animation:marquee-scroll 18s linear infinite;
}
.player__sub { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); margin:0 0 3px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.player__progress { display:flex; align-items:center; gap:10px; width:100%; margin-bottom:8px; position:relative; }
.player__time     { font-size:.75rem; color:var(--ink-faint); width:36px; text-align:center; font-variant-numeric:tabular-nums; }

input[type="range"] { -webkit-appearance:none; appearance:none; background:transparent; height:28px; }
input[type="range"]::-webkit-slider-runnable-track {
  height:5px; border-radius:3px;
  background:linear-gradient(90deg, var(--gold) var(--prog,0%), var(--bg-alt) var(--prog,0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 38% 38%, var(--gold-lt), var(--gold));
  border:2px solid var(--bg-card); box-shadow:0 2px 8px rgba(200,146,42,.4); margin-top:-7.5px; cursor:pointer;
}
input[type="range"]::-moz-range-track    { height:5px; border-radius:3px; background:var(--bg-alt); }
input[type="range"]::-moz-range-progress { background:var(--gold); border-radius:3px; }
input[type="range"]::-moz-range-thumb    { width:16px; height:16px; border-radius:50%; border:2px solid var(--bg-card); background:var(--gold); }
.seek { flex:1; }

.seek-star { position:absolute; font-size:.75rem; pointer-events:none; color:var(--gold-lt);
  filter:drop-shadow(0 0 4px var(--gold)); transform:translateX(-50%) translateY(-55%); top:50%; z-index:2; transition:left .1s linear; }

.player__controls { display:flex; align-items:center; gap:22px; margin:10px 0 14px; }
.ctrl-btn {
  width:54px; height:54px; border-radius:50%; background:var(--bg-card);
  border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); box-shadow:var(--sh-sm);
  transition:transform var(--spring),background var(--ease),box-shadow var(--ease),color var(--ease);
}
.ctrl-btn .icon { width:22px; height:22px; }
.ctrl-btn:active{ transform:scale(.87); box-shadow:none; }
.ctrl-btn:hover { background:var(--gold-shine); border-color:var(--gold-glow); color:var(--gold); }
.ctrl-btn--play {
  width:78px; height:78px;
  background:linear-gradient(135deg, var(--terra), var(--terra-dk));
  border:none; color:#fff; box-shadow:0 6px 24px rgba(184,92,48,.42),inset 0 1px 0 rgba(255,255,255,.15);
}
.ctrl-btn--play .icon  { width:30px; height:30px; }
.ctrl-btn--play:active { transform:scale(.88); box-shadow:0 2px 8px rgba(184,92,48,.25); }
.ctrl-btn--play:hover  { background:linear-gradient(135deg, #CC6A38, #A04020); color:#fff; border-color:transparent; box-shadow:0 8px 28px rgba(184,92,48,.52); }
.ctrl-btn--play.is-playing { background:linear-gradient(135deg, var(--plum-mid), var(--plum)); box-shadow:0 6px 24px rgba(90,45,132,.42); }

.player__volume { display:flex; align-items:center; gap:10px; width:100%; max-width:260px; color:var(--ink-faint); margin-bottom:16px; }
.volume-slider  { flex:1; }
.player__toggles{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.toggle-btn {
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-full);
  background:var(--bg-card); border:1.5px solid var(--border); font-size:.82rem; font-weight:600;
  color:var(--ink-soft); box-shadow:var(--sh-sm); transition:all var(--ease);
}
.toggle-btn[aria-pressed="true"] { background:linear-gradient(135deg, var(--plum-mid), var(--plum));
  color:#fff; border-color:transparent; box-shadow:0 4px 16px rgba(90,45,132,.38); }
.toggle-btn__inf { font-size:1.15rem; line-height:1; }

/* ══════════════════════════════════════════════════════════
   PANELY
══════════════════════════════════════════════════════════ */
.sheet { position:fixed; inset:0; z-index:20; }
.sheet--hidden { display:none; }
.sheet__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sheet__panel {
  position:absolute; left:0; right:0; bottom:0; max-height:78vh;
  background:var(--bg-card); border-radius:26px 26px 0 0;
  padding:10px 20px 28px; display:flex; flex-direction:column;
  box-shadow:0 -8px 40px rgba(44,31,14,.12),0 0 0 1px var(--border);
}
.sheet__panel--small  { max-height:66vh; }
.sheet__panel--center { align-items:center; text-align:center; }
.sheet__panel--full   { top:0; max-height:none; border-radius:0; padding:0; }
.sheet__handle { width:44px; height:5px; border-radius:3px; background:var(--border-med); margin:6px auto 16px; }
.sheet__title  { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin:0 0 4px; }
.sheet__hint   { color:var(--ink-soft); font-size:.82rem; margin:0 0 16px; max-width:280px; }
.sheet__list   { overflow-y:auto; flex:1; }

.chapter-row { display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:var(--r-sm);
  width:100%; text-align:left; transition:background var(--ease); }
.chapter-row:hover   { background:var(--gold-shine); }
.chapter-row--active { background:linear-gradient(135deg, var(--gold-shine), rgba(200,146,42,.15)); }
.chapter-row__num    { width:30px; height:30px; border-radius:50%; flex-shrink:0; background:var(--bg-alt);
  border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.chapter-row--active .chapter-row__num { background:var(--gold); border-color:var(--gold); color:#fff; }
.chapter-row__name { flex:1; font-weight:600; font-size:.91rem; color:var(--ink); }

/* Dial */
.dial { position:relative; width:220px; height:220px; margin:4px auto 8px; touch-action:none; outline:none; cursor:grab; }
.dial:active { cursor:grabbing; }
.dial__svg      { width:100%; height:100%; transform:rotate(-90deg); }
.dial__track    { fill:none; stroke:var(--bg-alt); stroke-width:14; }
.dial__progress { fill:none; stroke:var(--gold); stroke-width:14; stroke-linecap:round; stroke-dasharray:0 578; }
.dial__handle   { fill:var(--bg-card); stroke:var(--gold); stroke-width:3; filter:drop-shadow(0 2px 6px var(--gold-glow)); }
.dial__center   { position:absolute; inset:30px; border-radius:50%; background:var(--bg-card);
  border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.dial__value    { font-family:var(--font-display); font-weight:700; font-size:1.05rem; padding:0 10px; text-align:center; }

/* Hledání */
.search-bar { display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--border); background:var(--bg-card); color:var(--ink-soft); }
.search-input { flex:1; border:none; background:transparent; font-size:1.05rem; color:var(--ink); outline:none; }
.search-results { flex:1; overflow-y:auto; padding:8px 12px 24px; background:var(--bg-card); }
.search-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:10px 8px; border-radius:var(--r-sm); transition:background var(--ease); }
.search-row:hover { background:var(--gold-shine); }
.search-row__art  { width:52px; height:52px; border-radius:var(--r-sm); flex-shrink:0; background:var(--bg-alt); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.search-row__art img   { width:100%; height:100%; object-fit:cover; }
.search-row__art .icon { width:55%; height:55%; }
.search-row__name { font-weight:700; font-size:.91rem; color:var(--ink); }
.search-row__path { font-size:.75rem; color:var(--ink-soft); margin-top:2px; }
.search-hint { text-align:center; color:var(--ink-soft); padding:30px; font-style:italic; }

/* ══════════════════════════════════════════════════════════
   MINI-PŘEHRÁVAČ
══════════════════════════════════════════════════════════ */
.mini-player {
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:15;
  display:flex; align-items:center; gap:12px; padding:10px 12px 10px 10px;
  background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1.5px solid var(--border-med); border-radius:var(--r-lg); box-shadow:var(--sh-lg); cursor:pointer;
}
html[data-theme="dark"] .mini-player { background:rgba(27,19,48,.93); border-color:rgba(180,140,255,.20); }
.mini-player--hidden { display:none; }
.mini-player__art { width:44px; height:44px; border-radius:var(--r-sm); flex-shrink:0; overflow:hidden;
  background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.mini-player__art img   { width:100%; height:100%; object-fit:cover; }
.mini-player__art .icon { width:55%; height:55%; }
.mini-player__info    { flex:1; min-width:0; }
.mini-player__title   { margin:0; font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-player__chapter { margin:2px 0 0; font-size:.72rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-player__play    { flex-shrink:0; background:linear-gradient(135deg, var(--terra), var(--terra-dk));
  color:#fff; border:none; box-shadow:0 2px 8px rgba(184,92,48,.35); }
body.has-miniplayer #browse-grid  { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
body.has-miniplayer .home-actions { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

/* ══════════════════════════════════════════════════════════
   LOSOVÁNÍ
══════════════════════════════════════════════════════════ */
.lottery { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lottery--hidden { display:none; }
.lottery__card {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #3D1070 0%, #220A55 55%, #14062E 100%);
  border:1px solid rgba(196,160,255,.28); padding:40px 32px; border-radius:var(--r-xl);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 70px rgba(155,111,232,.22);
  min-width:260px; max-width:84vw;
}
.lottery__icon        { width:60px; height:60px; color:var(--gold-lt); animation:lottery-spin .45s linear infinite; }
.lottery__icon--settle{ animation:none !important; transform:scale(1.2); }
.lottery__text { font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  text-align:center; min-height:1.5em; margin:0; color:rgba(255,255,255,.82); }
.lottery__text--final { color:var(--gold-lt); }
@keyframes lottery-spin { from{transform:rotate(0);} to{transform:rotate(360deg);} }

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
.toast { position:fixed; left:16px; right:16px; top:16px; z-index:40;
  display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg);
  padding:14px 16px; border-radius:var(--r-md); box-shadow:var(--sh-lg); max-width:480px; margin:0 auto; }
.toast--hidden { display:none; }
.toast .icon   { flex-shrink:0; color:var(--gold); }
.toast__text   { flex:1; font-size:.83rem; font-weight:600; }
.toast__btn    { flex-shrink:0; background:rgba(255,255,255,.15); color:inherit; padding:7px 12px; border-radius:var(--r-full); font-weight:700; font-size:.78rem; }

/* ══════════════════════════════════════════════════════════
   RESPONZIVITA
══════════════════════════════════════════════════════════ */
@media (min-width:480px) { .grid { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); } }
@media (min-width:600px) {
  .home-hero { padding:36px 32px 20px; }
  .home-actions { padding:20px 32px 32px; }
  .player { padding:16px 32px 36px; }
  .player__cover-wrap { width:min(52vw,290px); }
  .grid { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); }
}
@media (min-width:900px) { .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }

/* ══════════════════════════════════════════════════════════
   POHÁDKOVÝ MYŠMAŠ
══════════════════════════════════════════════════════════ */
.action-card--mysmas {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--teal) 15%, var(--bg-card)),
    var(--bg-card));
  border-color: rgba(46,189,175,0.25);
}
.action-card--mysmas:hover {
  border-color: rgba(46,189,175,0.5);
  box-shadow: 0 8px 32px rgba(46,189,175,0.18);
}
.action-card__icon--mysmas { background: var(--teal-lt); }

/* Rolující text v seznamu kapitol (MyšMaš) */
.marquee-wrap {
  overflow: hidden; white-space: nowrap; flex: 1; min-width: 0;
}
.marquee-wrap .marquee-inner {
  display: inline-block;
  animation: marquee-scroll 18s linear infinite;
  padding-right: 48px;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-wrap .marquee-inner.no-anim { animation: none; }

/* Dvojřádek v seznamu kapitol MyšMaše */
.chapter-row__book  { font-size:.72rem; color:var(--gold); font-weight:700; display:block; margin-bottom:1px; }
.chapter-row__title { font-size:.91rem; font-weight:600; color:var(--ink); }

/* ══════════════════════════════════════════════════════════
   DIALOG (Pokračovat? / MyšMaš loading)
══════════════════════════════════════════════════════════ */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 35;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dialog-overlay--hidden { display: none; }

.dialog-card {
  background: var(--bg-card); border-radius: var(--r-xl);
  border: 1.5px solid var(--border-med);
  padding: 32px 28px; width: 100%; max-width: 340px;
  text-align: center;
  box-shadow: var(--sh-lg);
  animation: dialog-pop .3s var(--spring) both;
}
@keyframes dialog-pop {
  from { opacity:0; transform:scale(.88); }
  to   { opacity:1; transform:scale(1); }
}
.dialog-card__icon  { font-size: 2.8rem; margin-bottom: 8px; line-height: 1; }
.dialog-card__title { font-family:var(--font-display); font-size:1.2rem; font-weight:700; margin:0 0 10px; }
.dialog-card__detail{ color:var(--ink-soft); font-size:.88rem; line-height:1.6; margin:0 0 22px; }
.dialog-card__btns  { display:flex; gap:10px; flex-direction:column; }