/* ═══════════════════════════════════════════════════════════════
   MujFlix — DISCOVER GLASS THEME v6
   Port JellyfinGlassTheme → MujFlix selektory.
   Zachovava PRESNE hodnoty: barvy, blur, shadow, transition.
═══════════════════════════════════════════════════════════════ */

/* Inter + SF Pro stack — stejne jako Jellyfin Glass */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ── TOKENY — 1:1 z :root JellyfinGlassTheme ── */
:root {
  /* Barvy */
  --jg-bg:          #000000;
  --jg-surface:     #0a0a0a;
  --jg-dark-a:      rgba(17,24,39,0.85);
  --jg-mid-a:       rgba(29,38,53,0.85);
  --jg-grad-a:      rgba(29,38,53,0.3);
  --jg-border:      hsl(214,13%,32%);
  --jg-border-d:    hsl(214,13%,22%);
  --jg-border-l:    hsla(0,0%,100%,0.2);
  --jg-selector:    rgb(55,65,81);
  --jg-selector-a:  rgba(55,65,81,0.5);
  --jg-active-a:    rgba(255,255,255,0.1);
  --jg-active:      #e0e0e0;
  --jg-text:        #dedede;
  --jg-dim:         #777777;

  /* Gradienty — prenesene 1:1 */
  --jg-header-grad: linear-gradient(180deg, rgba(30,40,54,0.95) 30%, 55%, transparent 90%);
  --jg-card-footer: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
  --jg-hover-v:     linear-gradient(0deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent);
  --jg-shadow:      0 20px 50px rgba(0,0,0,0.9);

  /* Blur — prenesene 1:1 */
  --jg-blur-xs:     blur(2px);
  --jg-blur-sm:     blur(5px);
  --jg-blur-md:     blur(10px);
  --jg-blur-lg:     blur(20px);

  /* Radii — prenesene 1:1 */
  --jg-r-xl:        1.25em;
  --jg-r-lg:        14px;
  --jg-r-sm:        8px;
  --jg-r-xs:        0.375em;

  /* MujFlix specificke */
  --dr-blue:        #4a9eff;
  --dr-gold:        #f0c94a;
  --dr-font:        'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;

  /* Card dimensions */
  --cw:  172px;
  --ch:  258px;
  --cr:  var(--jg-r-lg);
  --px:  52px;
  --hh:  70px;
}

/* ── FONT — Apple system stack z Jellyfin Glass ── */
.universe-overlay,
.universe-overlay * {
  font-family: var(--dr-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.015em !important;
}

/* ═══════════════════════════════════════════════════════════════
   OVERLAY
═══════════════════════════════════════════════════════════════ */
.universe-overlay {
  background: var(--jg-bg) !important;
  flex-direction: column !important;
  height: 100dvh !important;
  overflow: hidden !important;
}
.universe-overlay.open { display: flex !important; }

/* Ambient gradient — iz backdrop overlay */
.universe-overlay.open::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    linear-gradient(0deg, var(--jg-bg), 45%, rgba(17,24,39,0.25)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — skinHeader-blurred portovany
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  height: var(--hh) !important;
  padding: 0 var(--px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  /* --headerColorGradient 1:1 */
  background: var(--jg-header-grad) !important;
  backdrop-filter: var(--jg-blur-md) !important;
  -webkit-backdrop-filter: var(--jg-blur-md) !important;
  border-bottom: 0px solid var(--jg-border) !important;
  flex-shrink: 0 !important;
}

.universe-overlay .disco-header-left {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.universe-overlay .disco-logo {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--jg-dim) !important;
}
.universe-overlay .disco-title {
  font-size: 1.55rem !important;
  font-weight: 200 !important; /* itemName h1 font-weight:200 */
  color: white !important;
  letter-spacing: -0.8px !important;
  line-height: 1 !important;
}

/* Search — searchfields-txtSearch portovany */
.universe-overlay .uni-search-wrap {
  flex: 1 !important;
  max-width: 460px !important;
  position: relative !important;
}
.universe-overlay .uni-search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--jg-dim) !important;
  pointer-events: none !important;
}
.universe-overlay .uni-input {
  width: 100% !important;
  background: rgba(0,0,0,0.5) !important;
  border: 0px solid var(--jg-border-l) !important;
  border-radius: 4em !important; /* searchfields-txtSearch */
  padding: 0.75em 1.5em 0.75em 2.5em !important;
  font-family: var(--dr-font) !important;
  font-size: 0.875rem !important;
  color: white !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  backdrop-filter: blur(10px) !important;
}
.universe-overlay .uni-input::placeholder { color: var(--jg-dim) !important; }
.universe-overlay .uni-input:focus {
  border-color: var(--jg-dim) !important;
}
.universe-overlay .uni-clear-btn {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.5) !important;
  cursor: pointer !important;
  padding: 0.25em !important;
}

/* Header prava strana */
.universe-overlay .disco-header > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
/* AI btn — detailButton.btnPlay portovany */
.universe-overlay .disco-header > div:last-child > button:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0.5em 0.5em !important;
  border-radius: 3em !important;
  background: rgba(224,224,224,0.12) !important;
  border: 0px solid var(--jg-border-l) !important;
  color: var(--jg-active) !important;
  font-family: var(--dr-font) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.125s !important;
  white-space: nowrap !important;
  min-width: 10em !important;
  height: 3em !important;
  justify-content: center !important;
}
.universe-overlay .disco-header > div:last-child > button:first-child:hover {
  background: var(--jg-active) !important;
  color: black !important;
}
.universe-overlay .disco-close {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 0px solid var(--jg-border-l) !important;
  color: var(--jg-text) !important;
  cursor: pointer !important;
  transition: all 0.125s !important;
  flex-shrink: 0 !important;
  font-size: 1rem !important;
}
.universe-overlay .disco-close:hover {
  background: rgba(255,255,255,0.2) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════════
   GENRE NAV — emby-tab-button portovany
═══════════════════════════════════════════════════════════════ */
#discoNav,
.universe-overlay .disco-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 var(--px) !important;
  height: 56px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
  /* sectionTabs s backdrop */
  background: rgba(0,0,0,0.6) !important;
  border-bottom: 0px solid var(--jg-border-d) !important;
  position: sticky !important;
  top: var(--hh) !important;
  z-index: 100 !important;
  backdrop-filter: var(--jg-blur-md) !important;
  -webkit-backdrop-filter: var(--jg-blur-md) !important;
}
#discoNav::-webkit-scrollbar,
.universe-overlay .disco-nav::-webkit-scrollbar { display: none !important; }

/* emby-tab-button 1:1 */
.universe-overlay .disco-nav-item,
#discoNav .disco-nav-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0.25em 0.5em !important;
  padding: 0 1.25em !important;
  height: 2.5em !important;
  border-radius: var(--jg-r-lg) !important;
  border: none !important;
  background: var(--jg-dark-a) !important;
  color: var(--jg-text) !important;
  font-family: var(--dr-font) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.125s !important;
  user-select: none !important;
}
.universe-overlay .disco-nav-item::before { display: none !important; }
.universe-overlay .disco-nav-item svg,
#discoNav .disco-nav-item svg {
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
}

/* emby-tab-button-active 1:1 */
.universe-overlay .disco-nav-item.active,
.universe-overlay .disco-nav-item.mf-chip-optimistic,
#discoNav .disco-nav-item.active,
#discoNav .disco-nav-item.mf-chip-optimistic {
  background: var(--jg-active) !important;
  color: black !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.universe-overlay .disco-nav-item.active svg,
.universe-overlay .disco-nav-item.mf-chip-optimistic svg,
#discoNav .disco-nav-item.active svg,
#discoNav .disco-nav-item.mf-chip-optimistic svg {
  opacity: 1 !important;
  stroke: black !important;
}
.universe-overlay .disco-nav-item:hover:not(.active),
#discoNav .disco-nav-item:hover:not(.active) {
  color: white !important;
  background: rgba(255,255,255,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════════════════════ */
#discoBody,
.universe-overlay .disco-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--jg-border-d) transparent !important;
  padding-bottom: 100px !important;
  position: relative !important;
  z-index: 1 !important;
}
#discoBody::-webkit-scrollbar { width: 3px !important; }
#discoBody::-webkit-scrollbar-thumb {
  background: var(--jg-border-d) !important;
  border-radius: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — editorsChoiceItemBanner portovany
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-hero {
  position: relative !important;
  height: 85vh !important;
  max-height: 520px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #000000 !important;
}
.universe-overlay .disco-hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform 8s ease !important;
  transform: scale(1.02) !important;
}
.universe-overlay .disco-hero:hover .disco-hero-img {
  transform: scale(1.06) translateY(-6px) !important;
}

/* editorsChoiceItemBanner > div gradient 1:1 */
.universe-overlay .disco-hero-grad {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.6)  0%,
    rgba(0,0,0,0.0)  20%,
    rgba(0,0,0,0.4)  60%,
    #000000          98%,
    #000000          100%) !important;
  z-index: 2 !important;
}

/* Levy gradient — ako Jellyfin item detail page */
.universe-overlay .disco-hero-grad::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to right,
    rgba(0,0,0,0.9)  0%,
    rgba(0,0,0,0.5)  35%,
    transparent      70%) !important;
  z-index: 1 !important;
}

/* editorsChoiceItemBanner padding */
.universe-overlay .disco-hero-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 55% !important;
  padding: 60px 4% !important;
  z-index: 5 !important;
}

.universe-overlay .disco-hero-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
.universe-overlay .disco-hero-badge-type {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--jg-dim) !important;
  background: rgba(255,255,255,0.07) !important;
  border: 0px solid var(--jg-border-l) !important;
  padding: 4px 11px !important;
  border-radius: var(--jg-r-lg) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.universe-overlay .disco-hero-badge-rating {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: var(--dr-gold) !important;
}
.universe-overlay .disco-hero-badge-year {
  font-size: 0.7rem !important;
  color: var(--jg-dim) !important;
}

/* editorsChoiceItemOverview portovany */
.universe-overlay .disco-hero-title {
  font-size: clamp(2rem,5vw,4em) !important;
  font-weight: 200 !important; /* nameContainer h1 font-weight:200 */
  color: white !important;
  letter-spacing: -1px !important;
  line-height: 1.05 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 4px 40px rgba(0,0,0,0.8) !important;
}
.universe-overlay .disco-hero-desc {
  /* editorsChoiceItemOverview */
  font-size: 1.1rem !important;
  color: #dcdcdc !important;
  line-height: 1.5 !important;
  max-width: 45% !important;
  margin-bottom: 25px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-shadow: 2px 2px 5px rgba(0,0,0,1) !important;
}
.universe-overlay .disco-hero-btns {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}
/* editorsChoiceItemButton 1:1 */
.universe-overlay .disco-hero-btn.primary {
  background: #e0e0e0 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 35px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.125s !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.universe-overlay .disco-hero-btn.primary:hover {
  background: #ffffff !important;
  transform: scale(1.05) !important;
}
/* detailButton:not(.btnPlay) portovany */
.universe-overlay .disco-hero-btn.secondary {
  color: var(--jg-text) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  padding: 0.6em !important;
  width: 3em !important;
  height: 3em !important;
  justify-content: center !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.125s !important;
}
.universe-overlay .disco-hero-btn.secondary:hover {
  background: white !important;
  color: black !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROW HEADERS — sectionTitleContainer portovany
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-row-header,
#discoBody .disco-row-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25em var(--px) 0 !important;
  margin-bottom: -0.5em !important;
  gap: 16px !important;
}
/* sectionTitle 1.5rem */
.universe-overlay .disco-row-title,
#discoBody .disco-row-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--jg-text) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.universe-overlay .drt-tag,
#discoBody .drt-tag {
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--dr-blue) !important;
  background: rgba(74,158,255,0.12) !important;
  border: 1px solid rgba(74,158,255,0.22) !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
}
.universe-overlay .disco-row-nav { display: flex !important; align-items: center !important; gap: 4px !important; }
/* emby-scrollbuttons-button portovany */
.universe-overlay .disco-row-nav-btn,
#discoBody .disco-row-nav-btn {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 0px solid var(--jg-border-l) !important;
  color: var(--jg-text) !important;
  cursor: pointer !important;
  transition: all 0.125s !important;
}
.universe-overlay .disco-row-nav-btn:hover { background: rgba(255,255,255,0.15) !important; color: white !important; }
#discoBody button[onclick*="refreshPersonalisedRow"],
.universe-overlay button[onclick*="refreshPersonalisedRow"] {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--jg-active) !important;
  background: rgba(224,224,224,0.1) !important;
  border: 0px solid var(--jg-border-l) !important;
  border-radius: var(--jg-r-lg) !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.125s !important;
  white-space: nowrap !important;
}
#discoBody button[onclick*="refreshPersonalisedRow"]:hover {
  background: var(--jg-active) !important;
  color: black !important;
}
.universe-overlay .disco-row-scroll,
#discoBody .disco-row-scroll {
  display: flex !important;
  gap: 1em !important;  /* --itemColumnGap 1em */
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 1.25em var(--px) 1.25em !important;
  scroll-behavior: smooth !important;
}
.universe-overlay .disco-row-scroll::-webkit-scrollbar,
#discoBody .disco-row-scroll::-webkit-scrollbar { display: none !important; }
.universe-overlay .disco-row + .disco-row {
  border-top: 0px solid var(--jg-border-d) !important;
}

/* ═══════════════════════════════════════════════════════════════
   KARTY — .cardScalable + .card-hoverable portovany 1:1
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-card,
#discoBody .disco-card {
  position: relative !important;
  width: var(--cw) !important;
  min-width: var(--cw) !important;
  height: var(--ch) !important;
  flex-shrink: 0 !important;

  /* .cardScalable 1:1 */
  border-radius: var(--jg-r-lg) !important;
  border: none !important;
  /* overflow:visible kvuli expand panelu, img klipovani resi pseudo */
  overflow: visible !important;
  box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.4) !important;
  background: var(--jg-surface) !important;

  /* .card-hoverable transition 1:1 */
  transition: transform 125ms ease,
              box-shadow 0.2s ease,
              filter 0.2s ease,
              opacity 0.2s ease !important;
  transform-origin: bottom center !important;
  cursor: pointer !important;
  outline: none !important;
}

/* Klipovaci wrapper — obaluje POUZE poster obsah */
.universe-overlay .disco-card::after,
#discoBody .disco-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--jg-r-lg) !important;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* .card-hoverable:hover .cardScalable 1:1 */
.universe-overlay .disco-card:hover,
#discoBody .disco-card:hover {
  transform: scale(1.05) !important;
  z-index: 9999 !important;
  border-radius: var(--jg-r-lg) !important;
  border: none !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.9) !important;
  filter: brightness(1.1) !important;
}

/* disco-card-inner neexistuje v app.js — skryt */
.universe-overlay .disco-card-inner,
#discoBody .disco-card-inner {
  display: none !important;
}

/* Image — primo v .disco-card, border-radius klipuje na zaoblene rohy */
.universe-overlay .disco-card-img,
#discoBody .disco-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: var(--jg-r-lg) !important;
  z-index: 1 !important;
  transition: transform 0.375s ease, filter 0.3s ease !important;
}
.universe-overlay .disco-card:hover .disco-card-img,
#discoBody .disco-card:hover .disco-card-img {
  transform: scale(1.025) !important;
  filter: brightness(0.5) !important;
}

/* Shimmer overlay — musi byt nad img ale neblokovano */
.universe-overlay .disco-card::before,
#discoBody .disco-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--jg-r-lg) !important;
  background: var(--jg-hover-v) !important;
  opacity: 0 !important;
  mix-blend-mode: overlay !important;
  transition: opacity 0.5s, transform 0.5s !important;
  z-index: 6 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}
.universe-overlay .disco-card:hover::before,
#discoBody .disco-card:hover::before {
  transform: translateY(50%) !important;
  opacity: 0 !important;
}

/* Overlay gradient — --cardFooterGradient 1:1 */
.universe-overlay .disco-card-overlay,
#discoBody .disco-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 35%, transparent 70%) !important;
  z-index: 2 !important;
  opacity: 1 !important;
  border-radius: var(--jg-r-lg) !important;
  pointer-events: none !important;
}
.universe-overlay .disco-card-glow,
#discoBody .disco-card-glow { display: none !important; }

/* INFO — vzdy viditelny */
.universe-overlay .disco-card-info,
#discoBody .disco-card-info {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 9px 11px 12px !important;
  z-index: 5 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  pointer-events: none !important;
}
/* .card-hoverable:hover .cardText color */
.universe-overlay .disco-card-name,
#discoBody .disco-card-name {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: var(--jg-text) !important;
  letter-spacing: -0.1px !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,1) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: 3px !important;
  transition: color 0.125s !important;
}
.universe-overlay .disco-card:hover .disco-card-name,
#discoBody .disco-card:hover .disco-card-name {
  color: #ffffff !important;
}
.universe-overlay .disco-card-meta,
#discoBody .disco-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.universe-overlay .disco-card-type,
#discoBody .disco-card-type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.07) !important;
  border: 0px solid rgba(255,255,255,0.1) !important;
  padding: 2px 7px !important;
  border-radius: var(--jg-r-sm) !important;
}
.universe-overlay .disco-card-rating,
#discoBody .disco-card-rating { display: none !important; }

/* Play button — .cardOverlayFab-primary portovany */
.universe-overlay .disco-play-btn,
#discoBody .disco-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-56%) scale(0.55) !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  /* --btnMiniPlayColor: rgba(0,0,0,0.7) */
  background: rgba(0,0,0,0.7) !important;
  color: white !important;
  border: 0px solid rgba(255,255,255,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34,1.44,0.64,1) !important;
  z-index: 6 !important;
  box-shadow: var(--jg-shadow) !important;
}
.universe-overlay .disco-play-btn svg,
#discoBody .disco-play-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: white !important;
  margin-left: 3px !important;
}
.universe-overlay .disco-card:hover .disco-play-btn,
#discoBody .disco-card:hover .disco-play-btn {
  opacity: 1 !important;
  transform: translate(-50%,-56%) scale(1) !important;
}

/* Finder button */
.universe-overlay .disco-card-finder-btn,
#discoBody .disco-card-finder-btn {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.7) !important;
  border: 0px solid rgba(255,255,255,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  cursor: pointer !important;
  z-index: 8 !important;
  backdrop-filter: var(--jg-blur-sm) !important;
  opacity: 0 !important;
  transform: scale(0.7) translateY(-4px) !important;
  transition: all 0.2s cubic-bezier(0.34,1.44,0.64,1) !important;
  pointer-events: auto !important;
}
.universe-overlay .disco-card-finder-btn svg { width: 12px !important; height: 12px !important; }
.universe-overlay .disco-card:hover .disco-card-finder-btn,
#discoBody .disco-card:hover .disco-card-finder-btn {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}
.universe-overlay .disco-card-finder-btn:hover { background: rgba(255,255,255,0.2) !important; }

/* AI badge */
.universe-overlay .ai-match-badge,
#discoBody .ai-match-badge {
  position: absolute !important;
  top: 9px !important;
  left: 9px !important;
  font-size: 0.49rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.38) !important;
  background: rgba(0,0,0,0.7) !important;
  border: 0px solid rgba(255,255,255,0.1) !important;
  padding: 2px 6px !important;
  border-radius: var(--jg-r-lg) !important;
  z-index: 9 !important;
}

/* Rating top badge (JS prida) */
.dr-rating-top {
  position: absolute !important;
  z-index: 9 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  color: var(--dr-gold) !important;
  background: rgba(0,0,0,0.72) !important;
  border: 0px solid rgba(240,201,74,0.22) !important;
  padding: 2px 8px !important;
  border-radius: var(--jg-r-lg) !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* Spotlight sousednich karet */
.disco-row-scroll:has(.disco-card:hover) .disco-card:not(:hover) {
  opacity: 0.45 !important;
  filter: brightness(0.7) !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

/* Loader bar */
.dr-loader-bar {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--jg-active);
  border-radius: 0 2px 2px 0;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
}
.disco-card:hover .dr-loader-bar {
  opacity: 1;
  animation: dr-load 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes dr-load {
  0%   { width:0%;   opacity:1; }
  65%  { width:88%;  opacity:1; }
  95%  { width:97%;  opacity:1; }
  100% { width:100%; opacity:0; }
}

/* Skeletons */
.mf-skeleton-tile,
.mf-disco-skel-card {
  width: var(--cw) !important;
  min-width: var(--cw) !important;
  height: var(--ch) !important;
  border-radius: var(--cr) !important;
  background: var(--jg-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   POPUP BUBBLE — dialog portovany
═══════════════════════════════════════════════════════════════ */
body { position: relative; }

#dr-popup {
  position: fixed;
  z-index: 9999999;
  width: 220px;
  /* .dialog: backdrop-filter + --drawerColor */
  background: rgba(10,10,10,0.95);
  border: 0px solid var(--jg-border);
  border-radius: var(--jg-r-lg);
  padding: 14px;
  box-shadow: var(--jg-shadow);
  backdrop-filter: var(--jg-blur-sm);
  -webkit-backdrop-filter: var(--jg-blur-sm);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.44,0.64,1);
}
#dr-popup.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#dr-popup::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: rgba(10,10,10,0.95);
  rotate: 45deg;
}
#dr-popup.arrow-down::after { bottom: -5px; left: 50%; transform: translateX(-50%); }
#dr-popup.arrow-up::after   { top: -5px; left: 50%; transform: translateX(-50%) rotate(180deg); }

#dr-popup .dr-pop-thumb {
  width: 100%; height: 88px;
  border-radius: var(--jg-r-sm);
  object-fit: cover; object-position: center 18%;
}
#dr-popup .dr-pop-title {
  font-size: 0.9rem; font-weight: 600;
  color: var(--jg-text);
  letter-spacing: -0.3px; line-height: 1.2;
}
#dr-popup .dr-pop-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#dr-popup .dr-pop-type {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--jg-dim);
  background: rgba(55,65,81,0.5);
  padding: 2px 7px; border-radius: var(--jg-r-sm);
}
#dr-popup .dr-pop-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--jg-dim); flex-shrink: 0; }
#dr-popup .dr-pop-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 0.65rem; font-weight: 700; color: var(--dr-gold); }
#dr-popup .dr-pop-year { font-size: 0.6rem; font-weight: 500; color: var(--jg-dim); }
#dr-popup .dr-pop-desc {
  font-size: 0.68rem; color: var(--jg-dim);
  line-height: 1.55; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
#dr-popup .dr-pop-genres { display: flex; gap: 4px; flex-wrap: wrap; }
#dr-popup .dr-pop-genre {
  font-size: 0.52rem; font-weight: 600; color: var(--jg-dim);
  background: rgba(55,65,81,0.4);
  padding: 3px 8px; border-radius: var(--jg-r-lg);
}
#dr-popup .dr-pop-btns { display: flex; gap: 7px; }
#dr-popup .dr-pop-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--dr-font); font-size: 0.72rem; font-weight: 700;
  cursor: pointer; transition: all 0.125s;
}
/* btnPlay.detailButton 1:1 */
#dr-popup .dr-pop-btn.play {
  flex: 1;
  background: var(--jg-active) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 3em !important;
  height: 3em !important;
  font-weight: 700 !important;
  box-shadow: 0 0 30px rgba(255,255,255,0.1) !important;
}
#dr-popup .dr-pop-btn.play:hover {
  background: white !important;
  transform: scale(1.05) !important;
}
/* detailButton:not(.btnPlay) */
#dr-popup .dr-pop-btn.wl {
  color: var(--jg-active) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  width: 3em !important;
  height: 3em !important;
  padding: 0 !important;
}
#dr-popup .dr-pop-btn.wl:hover {
  background: white !important;
  color: black !important;
}

/* KB focus */
.mf-disco-kb-focus {
  transform: scale(1.05) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 0 2px white !important;
  z-index: 10 !important;
}

/* Animace */
@keyframes dr-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes dr-bounce { 0%,100% { transform:translateX(-50%) translateY(0); } 55% { transform:translateX(-50%) translateY(6px); } }
.universe-overlay .disco-row { animation: dr-enter 0.24s ease both !important; }

/* Responsive */
@media (max-width: 960px) { :root { --cw:152px; --ch:228px; --px:28px; } }
@media (max-width: 700px) {
  :root { --cw:136px; --ch:204px; --px:16px; }
  .universe-overlay .disco-hero { height:320px !important; max-height:320px !important; }
  .universe-overlay .disco-hero-desc { display:none !important; }
  .universe-overlay .disco-hero-content { right:5% !important; }
  .universe-overlay .disco-row-nav-btn { display:none !important; }
}
@media (max-width: 480px) {
  :root { --cw:118px; --ch:177px; --px:12px; --hh:auto; }
  .universe-overlay .disco-header { height:auto !important; padding:max(14px,env(safe-area-inset-top,14px)) 14px 12px !important; flex-wrap:wrap !important; gap:10px !important; }
  .universe-overlay .uni-search-wrap { flex:0 0 100% !important; max-width:100% !important; order:3 !important; }
  .universe-overlay .disco-hero { height:240px !important; max-height:240px !important; }
  .universe-overlay .disco-hero-title { font-size:1.8rem !important; }
}
@media (hover: none) {
  .disco-card .disco-card-info { opacity:1 !important; transform:none !important; }
  .disco-card-finder-btn { opacity:1 !important; transform:scale(1) translateY(0) !important; }
  .disco-row-scroll:has(.disco-card:hover) .disco-card:not(:hover) { opacity:1 !important; filter:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CARD EXPAND HOVER — info panel vyjede dole z karty
   Karta se zvýší o ~90px, panel se zobrazí pod posterem.
   Žádný popup, žádné oříznutí — rozšíření samotné karty.
═══════════════════════════════════════════════════════════════ */

/* Wrapper karty musí mit overflow:visible aby expand panel byl videt */
.universe-overlay .disco-card,
#discoBody .disco-card {
  overflow: visible !important;
}

/* Ale vnitrni obsah (poster) overflow:hidden */
.universe-overlay .disco-card-inner,
#discoBody .disco-card-inner {
  overflow: hidden !important;
  border-radius: var(--jg-r-lg) !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Expand panel — vyjede pod kartou */
.dr-expand {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(10,10,10,0.97) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-top: none !important;
  border-radius: 0 0 var(--jg-r-lg) var(--jg-r-lg) !important;
  padding: 10px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34,1.44,0.64,1) !important;
  pointer-events: none !important;
  z-index: 100 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.9) !important;
}

.disco-card:hover .dr-expand {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Expand — titulek */
.dr-expand-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #dedede !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Expand — meta řádek */
.dr-expand-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.dr-expand-type {
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.07) !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
}
.dr-expand-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #f0c94a !important;
}
.dr-expand-year {
  font-size: 0.6rem !important;
  color: #777777 !important;
}
.dr-expand-dot {
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  background: #555 !important;
  flex-shrink: 0 !important;
}

/* Expand — tlačítka */
.dr-expand-btns {
  display: flex !important;
  gap: 6px !important;
}
/* btnPlay.detailButton 1:1 */
.dr-expand-btn-play {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 3em !important;
  background: #e0e0e0 !important;
  color: #000 !important;
  border: none !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.125s !important;
  letter-spacing: 0.3px !important;
}
.dr-expand-btn-play:hover {
  background: #fff !important;
  transform: scale(1.03) !important;
}
/* detailButton:not(.btnPlay) 1:1 */
.dr-expand-btn-wl {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #dedede !important;
  cursor: pointer !important;
  transition: all 0.125s !important;
  flex-shrink: 0 !important;
}
.dr-expand-btn-wl:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Loader bar — bílý jako Jellyfin --osdSeekBarPlayedColor */
.dr-loader-bar {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: #e0e0e0;
  border-radius: 0 2px 2px 0;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
}
.disco-card:hover .dr-loader-bar {
  opacity: 1;
  animation: dr-load 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* Spotlight na sousedy */
.disco-row-scroll:has(.disco-card:hover) .disco-card:not(:hover) {
  opacity: 0.45 !important;
  filter: brightness(0.65) !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

/* Karta pri hover — posun nahoru (expand panel vyjede dole) */
.universe-overlay .disco-card:hover,
#discoBody .disco-card:hover {
  transform: translateY(-8px) scale(1.04) !important;
  z-index: 50 !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.9) !important;
  filter: brightness(1.05) !important;
}

/* Responsivni — mensi expand na mobilu */
@media (max-width: 700px) {
  .dr-expand { display: none !important; }
  .universe-overlay .disco-card:hover,
  #discoBody .disco-card:hover {
    transform: scale(1.03) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON SHIMMER — animace při načítání karet
═══════════════════════════════════════════════════════════════ */
@keyframes jg-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}

.mf-skeleton-tile,
.mf-disco-skel-card {
  background:
    linear-gradient(
      105deg,
      rgba(255,255,255,0.02) 20%,
      rgba(255,255,255,0.06) 48%,
      rgba(255,255,255,0.09) 50%,
      rgba(255,255,255,0.06) 52%,
      rgba(255,255,255,0.02) 80%
    ) !important;
  background-size: 800px 100% !important;
  animation: jg-shimmer 1.8s ease-in-out infinite !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD IMAGE LOAD — plynulý fade-in posterů
═══════════════════════════════════════════════════════════════ */
@keyframes jg-img-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.universe-overlay .disco-card-img[src],
#discoBody .disco-card-img[src] {
  animation: jg-img-fade 0.4s ease both !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — vylepšení
═══════════════════════════════════════════════════════════════ */

/* Fade-in hero při načtení */
@keyframes jg-hero-enter {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1.02); }
}
.universe-overlay .disco-hero-img {
  animation: jg-hero-enter 0.8s cubic-bezier(0.25,1,0.5,1) both !important;
}

/* Hero badge — FILM/SERIÁL pill */
.universe-overlay .disco-hero-badge-type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Hero rating — zlate hvezdicky */
.universe-overlay .disco-hero-badge-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROW TITLES — animace při vstupu nové řady
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-row {
  animation: dr-enter 0.3s cubic-bezier(0.25,1,0.5,1) both !important;
}
.universe-overlay .disco-row:nth-child(2) { animation-delay: 0.05s !important; }
.universe-overlay .disco-row:nth-child(3) { animation-delay: 0.1s !important; }
.universe-overlay .disco-row:nth-child(4) { animation-delay: 0.15s !important; }

/* ═══════════════════════════════════════════════════════════════
   NAV — aktivní chip šipka dolů
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-nav-item.active::after,
#discoNav .disco-nav-item.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--jg-active) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD INFO — info sekce vždy viditelná (lepší čitelnost)
═══════════════════════════════════════════════════════════════ */

/* Silnejší gradient aby byl text vždy čitelný */
.universe-overlay .disco-card-overlay,
#discoBody .disco-card-overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.7)  28%,
    rgba(0,0,0,0.15) 60%,
    transparent      85%
  ) !important;
  border-radius: var(--jg-r-lg) !important;
}

/* Card name vždy viditelny */
.universe-overlay .disco-card-name,
#discoBody .disco-card-name {
  color: #ffffff !important;
}

/* Expand panel — lepší pozicování kvůli z-indexu row scroll */
.dr-expand {
  z-index: 9999 !important;
}

/* Expand panel border-radius navazuje na kartu */
.disco-card:hover .dr-expand {
  box-shadow:
    0 20px 50px rgba(0,0,0,0.9),
    0 0 0 0.5px rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROW SCROLL — fade edges (Jellyfin styl)
═══════════════════════════════════════════════════════════════ */
.universe-overlay .disco-row-scroll,
#discoBody .disco-row-scroll {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black calc(var(--px) * 0.5),
    black calc(100% - calc(var(--px) * 0.5)),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black calc(var(--px) * 0.5),
    black calc(100% - calc(var(--px) * 0.5)),
    transparent 100%
  ) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — tenký, Jellyfin styl
═══════════════════════════════════════════════════════════════ */
#discoBody::-webkit-scrollbar {
  width: 4px !important;
}
#discoBody::-webkit-scrollbar-track {
  background: transparent !important;
}
#discoBody::-webkit-scrollbar-thumb {
  background: var(--jg-border-d) !important;
  border-radius: 4px !important;
}
#discoBody::-webkit-scrollbar-thumb:hover {
  background: var(--jg-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL HINT animace
═══════════════════════════════════════════════════════════════ */
.dr-sh {
  animation: dr-bounce 2.5s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════════════════════════
   "PRO TEBE" ROW — jemné zvýraznění pozadí
═══════════════════════════════════════════════════════════════ */
#discoBody .disco-row:first-child .disco-row-title {
  font-size: 1.6rem !important;
}

/* AI VÝBĚR badge */
.universe-overlay .drt-tag,
#discoBody .drt-tag {
  font-size: 0.5rem !important;
  letter-spacing: 2px !important;
}

/* Card count badge (JS přidá) */
.dr-cnt {
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.05) !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
}