/* ══════════════════════════════════════════════════════════════
   MůjFlix — Fixes patch (dock hover/size + active state)
   Načteno jako PŘEDPOSLEDNÍ stylesheet (po něm jde ještě
   mobile.css, který má poslední slovo na mobilu).
   Selektor #mfDock .dock-btn má vyšší specificitu (ID) než staré
   .dock-btn / .dock-btn:hover / .dock-btn.active pravidla, takže
   tady definované chování vyhrává nad staršími soubory.
   ══════════════════════════════════════════════════════════════ */

/* Výchozí stav — mírně zmenšeno */
#mfDock .dock-btn {
  transform: scale(0.92) !important;
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.18s ease, color 0.18s ease !important;
  will-change: transform !important;
}

/* Aktivní položka — normální velikost v klidu (ne zmenšená) */
#mfDock .dock-btn.active {
  transform: scale(1) !important;
}

/* Hover — ZVĚTŠENÍ (opak původního chování) */
#mfDock .dock-btn:hover {
  transform: scale(1.14) translateY(-3px) !important;
}
#mfDock .dock-btn.active:hover {
  transform: scale(1.16) translateY(-3px) !important;
}

/* Klik — jemné stisknutí */
#mfDock .dock-btn:active {
  transform: scale(0.86) !important;
  transition: transform 80ms ease !important;
}

/* Ikony a popisek uvnitř — necháváme přirozeně škálovat s rodičem,
   takže žádné vlastní protichůdné transformace na SVG */
#mfDock .dock-btn svg {
  transition: none !important;
  transform: none !important;
}

/* AI tlačítko v docku má jiné rozměry — hover chování stejné, jen jemnější škála */
#mfDock .dock-btn.dock-ai {
  transform: scale(0.95) !important;
}
#mfDock .dock-btn.dock-ai:hover {
  transform: scale(1.08) translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════
   SJEDNOCENÝ VZHLED DOCKU (jedna finální vrstva)
   Barvy/pozadí/velikosti ikon pro .dock-btn jsou jinak rozeseté
   po 6 CSS souborech (styles.css, premium, apple-tv, glass,
   discover-redesign) — každý s vlastními !important pravidly.
   Výsledek je náhodná směs vlastností podle toho, které pravidlo
   zrovna "vyhraje". Tady je to sjednocené na jedno čisté, konzistentní
   chování; tenhle soubor je poslední v pořadí, takže platí vždy.
   ══════════════════════════════════════════════════════════════ */
/* Kontejner docku — dřív splýval s pozadím appky (obojí skoro černé),
   takže i přes blur/border/shadow definované jinde nebylo na první
   pohled poznat, že jde o samostatnou plovoucí plochu. Zesvětleno a
   přidán jemný horní lesk pro reálný pocit skla nad obsahem. */
#mfDock {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%),
    rgba(30, 30, 36, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4) !important;
}
/* Na domovské obrazovce (html.mfh-home-on) a jen mimo mobil (nad 640px,
   viz mobile.css breakpoint) ať dock sedí vpravo nahoře místo
   dole na střed — přesně tam, kde dřív byl skrytý odznak profilu. */
@media (min-width: 641px) {
  html.mfh-home-on #mfDock {
    top: max(18px, env(safe-area-inset-top, 18px)) !important;
    bottom: auto !important;
    left: auto !important;
    right: max(24px, env(safe-area-inset-right, 24px)) !important;
    transform: none !important;
  }
}
#mfDock .dock-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 58px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
}
#mfDock .dock-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8px !important;
}
#mfDock .dock-btn .dock-label {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: currentColor !important;
}
#mfDock .dock-btn:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
#mfDock .dock-btn.active {
  color: var(--accent, #0a84ff) !important;
  background: rgba(10, 132, 255, 0.16) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 16%, transparent) !important;
}
#mfDock .dock-btn.active:hover {
  background: rgba(10, 132, 255, 0.22) !important;
  background: color-mix(in srgb, var(--accent, #0a84ff) 22%, transparent) !important;
}

/* ══════════════════════════════════════════════════════════════
   Dock v režimu Objevování — má úplně ZMIZET (ne jen ztlumit).
   Původní pravidla ve styles-discover-redesign.css jen snižují
   opacity na .55 a nechávají pointer-events: auto, takže lišta
   zůstává neviditelně/matoucně klikatelná přes celou obrazovku.
   Tady ji schováme úplně a zablokujeme jí kliky — zpátky domů se
   jde přes ✕ / Esc, což už funguje (volá closeUniverse()).
   Selektory jsou schválně identické s originálem (stejná specificita,
   tenhle soubor se načítá jako poslední → vyhrává), včetně varianty
   pro :hover / :focus-within, aby lišta nevyskočila zpět, když na ni
   uživatel omylem najede myší dole na obrazovce.
   ══════════════════════════════════════════════════════════════ */
body.discover-open #mfDock,
body.discover-open #mfDock:hover,
body.discover-open #mfDock:focus-within {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(40px) scale(0.8) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
}

/* ══════════════════════════════════════════════════════════════
   Cinema Player v2 — zdroje, TV navigace, výběr epizody
   ══════════════════════════════════════════════════════════════ */

.mf-cin-sourcebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(14, 16, 22, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.mf-cin-src-info {
  display: flex;
  flex-direction: column;
  min-width: 140px;
  flex: 1 1 auto;
}
.mf-cin-src-label { font-size: 0.82rem; font-weight: 600; color: #fff; }
.mf-cin-src-counter { font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); margin-top: 1px; }
.mf-cin-switch-btn {
  flex: none;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(10, 132, 255, 0.4);
  background: rgba(10, 132, 255, 0.16);
  color: #7cc0ff;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.mf-cin-switch-btn:hover { background: rgba(10, 132, 255, 0.3); }

.mf-cin-external-btn {
  flex: none;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mf-cin-external-btn:hover { background: rgba(255, 255, 255, 0.15); }

.mf-cin-tvbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(10, 11, 16, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}
.mf-cin-ep-btn {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}
.mf-cin-ep-btn:hover { background: rgba(255, 255, 255, 0.14); }
.mf-cin-ep-btn.mf-cin-next-series {
  margin-left: auto;
  border-color: rgba(48, 170, 255, 0.4);
  background: rgba(48, 170, 255, 0.14);
  color: #7cc0ff;
}
.mf-cin-ep-btn.mf-cin-next-series:hover { background: rgba(48, 170, 255, 0.26); }
.mf-cin-ep-current {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  padding: 0 4px;
  white-space: nowrap;
}

.mf-cin-epgrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 12px 16px;
  background: rgba(8, 9, 13, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mf-cin-epgrid-seasons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mf-cin-season-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.mf-cin-season-chip.active {
  background: rgba(10, 132, 255, 0.28);
  border-color: rgba(10, 132, 255, 0.55);
  color: #fff;
  font-weight: 700;
}
.mf-cin-epgrid-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 7px;
}
.mf-cin-ep-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.mf-cin-ep-chip:hover { background: rgba(255, 255, 255, 0.12); }
.mf-cin-ep-chip.watched {
  border-color: rgba(48, 209, 88, 0.4);
  background: rgba(48, 209, 88, 0.1);
  color: rgba(140, 235, 165, 0.9);
}
.mf-cin-ep-chip.current {
  border-color: rgba(10, 132, 255, 0.65);
  background: rgba(10, 132, 255, 0.24);
  color: #fff;
  font-weight: 700;
}
.mf-cin-ep-chip-num { font-weight: 700; }
.mf-cin-ep-chip-mark { font-size: 0.78rem; color: #30d158; }

@media (max-width: 560px) {
  .mf-cin-sourcebar { padding: 8px 10px; }
  .mf-cin-switch-btn { font-size: 0.68rem; padding: 6px 10px; }
  .mf-cin-tvbar { padding: 8px 10px; gap: 6px; }
  .mf-cin-ep-btn { font-size: 0.66rem; padding: 6px 9px; }
  .mf-cin-ep-btn.mf-cin-next-series { margin-left: 0; }
  .mf-cin-epgrid { padding: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   Hezčí GUI pro PIN při vytváření profilu (.pc-pin-row/.pc-pin-digit)
   ══════════════════════════════════════════════════════════════ */
.pc-pin-row {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 4px 0 26px !important;
}
.pc-pin-digit {
  width: 56px !important;
  height: 62px !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  -webkit-text-security: disc;
  text-security: disc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
.pc-pin-digit:focus {
  border-color: rgba(10, 132, 255, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18), 0 4px 18px rgba(10, 132, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.04) !important;
  outline: none !important;
}
.pc-pin-digit:not(:placeholder-shown) {
  border-color: rgba(48, 209, 88, 0.5) !important;
  background: linear-gradient(160deg, rgba(48, 209, 88, 0.12), rgba(48, 209, 88, 0.04)) !important;
}
.pc-hint {
  text-align: center !important;
}

/* Plovoucí odznak profilu vpravo nahoře — dřív jediná cesta k
   výběru profilu, teď duplicitní s tlačítkem "Profil" v docku. */
#mfProfileBadge {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SJEDNOCENÝ VZHLED — výběr profilu ("Kdo se dívá?") + PIN
   .pg-avatar/.pg-profile-item apod. byly předtím definované 7×
   napříč soubory (ploché tmavé čtverce, nic moc). Sjednoceno na
   jeden kruhový styl s barevným prstencem podle vlastní barvy
   profilu (--pg-color, kterou appka už beztak posílá inline) —
   stejná řeč jako zbytek appky (modrý accent), jen konečně
   konzistentní a bez duplicitního tlačítka "Přidat profil".
   ══════════════════════════════════════════════════════════════ */
.pg-title {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
.pg-subtitle {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.92rem !important;
  margin-top: 4px !important;
}
.pg-profiles {
  gap: 26px !important;
}
.pg-profile-item {
  gap: 10px !important;
}
.pg-avatar {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--pg-color, #0a84ff) 28%, #16161d), #101014) !important;
  border: 2px solid color-mix(in srgb, var(--pg-color, #0a84ff) 55%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 30px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.1rem !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease !important;
  overflow: hidden !important;
}
.pg-avatar-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.pg-profile-item:hover .pg-avatar {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 0 22px color-mix(in srgb, var(--pg-color, #0a84ff) 45%, transparent) !important;
}
.pg-name {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.pg-add-btn {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  border: 2px dashed rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
.pg-profile-item:hover .pg-add-btn {
  border-color: rgba(10, 132, 255, 0.55) !important;
  color: rgba(10, 132, 255, 0.85) !important;
  transform: translateY(-3px) !important;
}
.pg-manage-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.18) !important;
  text-underline-offset: 3px !important;
}
.pg-manage-btn:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}
.pg-manage-btn.active {
  color: var(--accent, #0a84ff) !important;
  text-decoration-color: color-mix(in srgb, var(--accent, #0a84ff) 50%, transparent) !important;
}
.pg-remove-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid #0b0b0f !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* PIN obrazovka — stejná kruhová avatar-řeč + o trochu víc hloubky
   na numerické klávesnici, ať to nepůsobí jako ploché tlačítka. */
#mfPinModal .pm-avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  background: linear-gradient(160deg, rgba(10, 132, 255, 0.28), #101014) !important;
  border: 2px solid rgba(10, 132, 255, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}
.pm-num {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: background 0.12s ease, transform 0.08s ease !important;
}
.pm-num:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.pm-num:active {
  transform: scale(0.94) !important;
  background: rgba(10, 132, 255, 0.18) !important;
}
.pm-dot {
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.pm-dot.filled {
  background: var(--accent, #0a84ff) !important;
  transform: scale(1.15) !important;
}
.pm-dot.error {
  background: #ff453a !important;
}

/* ══════════════════════════════════════════════════════════════════
   SÉRIE A EPIZODY — sjednocený vzhled výběru sezóny/epizod
   ──────────────────────────────────────────────────────────────────
   Tlačítka "Pokračovat / Náhodná / Hodnotit / Otevřít na externím
   webu" a nadpis "Vyber si sezónu" měly v souboru styles.css několik
   po sobě jdoucích, vzájemně si konkurujících definic (řádky ~3961,
   ~13400 a mediální varianty) — funkčně z toho vždy "vyhrála" jen ta
   poslední, zbytek byl mrtvý kód. Tady je jedna čistá, finální verze,
   plus pár úprav čitelnosti (kontrast, hierarchie nadpisu), aby to víc
   sedělo k modré MujFlix barvě a bylo to na první pohled jasnější, ale
   beze ztráty prosklo-prémiového stylu zbytku appky. */

/* Nadpis "Vyber si sezónu" — dřív skoro neviditelný (0.4rem, šedá),
   teď skutečný sekční nadpis s modrým akcentem jako jinde v appce. */
#seriesModal .ssv-label {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  color: #fff !important;
  position: relative !important;
  padding-left: 14px !important;
  margin-bottom: 4px !important;
}
#seriesModal .ssv-label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  bottom: 2px !important;
  width: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #0a84ff, #34aadc) !important;
}
#seriesModal .ssv-help {
  padding-left: 14px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.78rem !important;
  margin-bottom: 18px !important;
}

/* Hlavní akční tlačítko — jedna finální modrá verze */
#seriesModal .btn-continue {
  background: linear-gradient(140deg, #0a84ff, #34aadc) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 13px 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.1px !important;
  box-shadow:
    0 8px 28px rgba(10, 132, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}
#seriesModal .btn-continue:hover {
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(10, 132, 255, 0.55) !important;
}

/* Vedlejší tlačítka (Náhodná / Hodnotit / Otevřít na externím webu) —
   dřív byla stejně velká a barevně "hlasitá" jako hlavní tlačítko
   Pokračovat (obzvlášť zelené "Otevřít na externím webu"), takže
   vypadala jako tři rovnocenné výzvy k akci místo jedné hlavní.
   Teď jsou to menší, klidnější skleněné "chipy" — jasně vedlejší
   vedle modrého Pokračovat — a svou barvu (modrá / zelená) ukážou
   výrazněji až při najetí myší. */
#seriesModal .panel-btns {
  gap: 8px !important;
}
#seriesModal .btn-shuffle {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.68) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}
#seriesModal .btn-shuffle:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
/* "Hodnotit" a "Otevřít na externím webu" si dál nesou vlastní
   odlišující barvu (modrá / zelená), ale klidně — jen jako jemný
   nádech, plně se probarví až při hoveru. ID selektor má vyšší váhu
   než starší obecné pravidlo pro .btn-shuffle v styles.css, které
   dřív obě tlačítka omylem přebarvovalo na univerzální bílou. */
#seriesModal #modalRateBtn {
  color: rgba(10, 132, 255, 0.8) !important;
}
#seriesModal #modalRateBtn:hover {
  background: rgba(10, 132, 255, 0.14) !important;
  border-color: rgba(10, 132, 255, 0.4) !important;
  color: #fff !important;
}
#seriesModal #modalFindBtn {
  color: rgba(48, 209, 88, 0.8) !important;
}
#seriesModal #modalFindBtn:hover {
  background: rgba(48, 209, 88, 0.14) !important;
  border-color: rgba(48, 209, 88, 0.4) !important;
  color: #fff !important;
}

/* Lišta "Zpět na sezóny" nad seznamem epizod — lepší kontrast na
   tlačítku "Všechny epizody", které bylo skoro nečitelné (0.3 opacity). */
#seriesModal .season-all-btn {
  color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
#seriesModal .season-all-btn.active,
#seriesModal .season-all-btn:hover {
  background: rgba(10, 132, 255, 0.14) !important;
  border-color: rgba(10, 132, 255, 0.35) !important;
  color: #fff !important;
}
#seriesModal .ep-view-back:hover {
  border-color: rgba(10, 132, 255, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   Níže: bývalý mobile.css (sloučeno sem, viz index.html link tagy)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   MůjFlix — mobile.css
   ──────────────────────────────────────────────────────────────
   Doplňkové úpravy jen pro menší obrazovky (telefony). Necháno
   jako samostatný soubor a načtený jako úplně poslední <link>,
   takže bezpečně vyhraje nad vším ostatním, ale nezasahuje do
   desktopové verze (vše je v @media max-width: 640px).
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Modály (Můj seznam, detail, apod.) — na telefonu ať
     zabírají rozumnou šířku obrazovky, ne malý plovoucí box
     uprostřed s velkými prázdnými okraji. ── */
  .watchlist-box,
  .pm-box {
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
  }

  /* ── Discover filtry (Trending/Filmy/Seriály/Žánr…) — řádek
     jde odscrollovat, ale nic to nenaznačuje, takže to na
     telefonu vypadá jako "uříznuté". Jemný fade na okraji jako
     vizuální nápověda. ── */
  .disco-nav {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 92%, transparent 100%) !important;
  }

  /* ── Nadpisy na domovské obrazovce — o kousek menší, ať se
     na malé obrazovce nepere víc textu o řádek navíc. ── */
  #mfSectionHome h1,
  .mfh-greeting {
    font-size: 1.5rem !important;
  }

  /* ── Dock — na hodně úzkých telefonech (do ~360px) trochu
     zúžit odstup od okrajů a mezery mezi ikonami, ať je jistota
     že se čtyři položky vejdou s rezervou i na nejmenší displeje. ── */
  #mfDock {
    gap: 0 !important;
  }
  #mfDock .dock-btn {
    min-width: 0 !important;
    padding: 7px 8px !important;
  }
  #mfDock .dock-btn .dock-label {
    font-size: 0.58rem !important;
  }

  /* ── Karty v řádkových seznamech (Nedávno sledováno apod.) —
     ať je jasně vidět, že jde o horizontální scroll, ne že je
     obsah "uříznutý". ── */
  .row-scroll,
  .mfh-row {
    -webkit-mask-image: linear-gradient(to right, #000 94%, transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 94%, transparent 100%) !important;
  }
}