/* ==========================================================================
   Kino Premium Theme for Lampa
   Dark glass UI · gradient accents · focus-driven motion (TV remote first)
   --------------------------------------------------------------------------
   Lampa navigates with a D-pad: the active element gets `.focus` (remote) or
   `.hover` (mouse). All interaction states therefore key off those classes,
   not :hover alone.
   body.kino-lite  → disables backdrop blur for weak TV SoCs (toggle in settings)
   ========================================================================== */

:root {
  /* palette */
  --kp-bg-0: #07080c;
  --kp-bg-1: #0d0f16;
  --kp-bg-2: #141722;
  --kp-glass: rgba(22, 25, 36, 0.55);
  --kp-glass-strong: rgba(18, 20, 30, 0.82);
  --kp-glass-border: rgba(255, 255, 255, 0.08);
  --kp-glass-highlight: rgba(255, 255, 255, 0.14);
  --kp-text: #eef0f6;
  --kp-text-dim: rgba(238, 240, 246, 0.62);
  --kp-text-mute: rgba(238, 240, 246, 0.38);

  /* accents: violet → magenta → amber, used sparingly */
  --kp-accent: #8b5cf6;
  --kp-accent-2: #ec4899;
  --kp-accent-3: #f59e0b;
  --kp-gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 50%, #f97316 100%);
  --kp-gradient-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.14));
  --kp-glow: 0 0 0 2px rgba(167, 139, 250, 0.9), 0 12px 40px -8px rgba(139, 92, 246, 0.55);

  /* shape & motion */
  --kp-radius-s: 10px;
  --kp-radius: 16px;
  --kp-radius-l: 24px;
  --kp-blur: saturate(160%) blur(18px);
  --kp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kp-fast: 180ms;
  --kp-med: 320ms;
  --kp-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------ base */
body {
  background: radial-gradient(1200px 800px at 85% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
              radial-gradient(900px 700px at -10% 110%, rgba(236, 72, 153, 0.10), transparent 60%),
              var(--kp-bg-0) !important;
  color: var(--kp-text);
  /* font-family deliberately not overridden: Lampa ships its own webfont with full
     Cyrillic coverage, and TVs have no fonts beyond it and the system default. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(139, 92, 246, 0.45); }

/* Lampa's full-screen backdrop: deepen and vignette it so glass reads well */
.background {
  filter: saturate(115%) brightness(0.55);
}
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 12, 0.2) 0%, rgba(7, 8, 12, 0.85) 75%, var(--kp-bg-0) 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------ glass mixin */
.head__body,
.menu__list,
.selectbox__content,
.settings__content,
.modal__content,
.noty,
.player-panel,
.player-info,
.navigation-bar__body {
  background: var(--kp-glass) !important;
  -webkit-backdrop-filter: var(--kp-blur);
  backdrop-filter: var(--kp-blur);
  border: 1px solid var(--kp-glass-border);
  box-shadow: inset 0 1px 0 var(--kp-glass-highlight), var(--kp-shadow);
}

/* ------------------------------------------------------------------ header */
.head__body {
  border-radius: 0 0 var(--kp-radius-l) var(--kp-radius-l);
  border-top: 0;
}
.head__action,
.head__settings {
  border-radius: 12px;
  transition: background var(--kp-fast) var(--kp-ease), transform var(--kp-fast) var(--kp-ease);
}
.head__action.focus,
.head__action.hover,
.head__settings.focus {
  background: var(--kp-gradient) !important;
  color: #fff !important;
  transform: scale(1.08);
}

/* -------------------------------------------------------------- side menu */
.menu__list {
  border-radius: var(--kp-radius-l);
  padding: 0.6em 0.4em;
}
.menu__item {
  border-radius: 14px;
  margin: 0.15em 0;
  transition: background var(--kp-fast) var(--kp-ease), transform var(--kp-med) var(--kp-ease),
              color var(--kp-fast) var(--kp-ease);
}
.menu__item.focus,
.menu__item.hover {
  background: var(--kp-gradient) !important;
  color: #fff !important;
  transform: translateX(6px);
  box-shadow: 0 10px 30px -10px rgba(217, 70, 239, 0.6);
}
.menu__item.focus .menu__ico,
.menu__item.hover .menu__ico { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); }
.menu__item.active:not(.focus) {
  background: var(--kp-gradient-soft);
}

/* ----------------------------------------------------------- row headings */
.items-line__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.items-line__more {
  border-radius: 999px;
  background: var(--kp-glass);
  border: 1px solid var(--kp-glass-border);
}
.items-line__more.focus { background: var(--kp-gradient); color: #fff; }

/* -------------------------------------------------------------------- cards */
.card__view {
  border-radius: var(--kp-radius) !important;
  overflow: hidden;
  background: var(--kp-bg-2);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  transition: transform var(--kp-med) var(--kp-ease), box-shadow var(--kp-med) var(--kp-ease);
  /* no will-change here: on dozens of cards it pins a GPU layer per poster,
     which makes TV WebViews (webOS/Tizen) sluggish */
}
.card__img {
  border-radius: var(--kp-radius) !important;
  transition: filter var(--kp-med) var(--kp-ease);
}
/* inner sheen that sweeps on focus */
.card__view::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kp-fast) linear;
}
.card.focus .card__view,
.card.hover .card__view {
  transform: translateY(-6px) scale(1.06);
  box-shadow: var(--kp-glow);
}
.card.focus .card__view::after,
.card.hover .card__view::after {
  opacity: 1;
  animation: kp-sheen 900ms var(--kp-ease) forwards;
}
.card.focus .card__img { filter: saturate(115%) contrast(105%); }

/* Lampa draws its own white focus frame — replace it with our glow */
.card.focus .card__view::before,
.card.hover .card__view::before { display: none !important; }

.card__title {
  font-weight: 600;
  color: var(--kp-text);
  transition: color var(--kp-fast) var(--kp-ease);
}
.card.focus .card__title { color: #fff; }
.card__age { color: var(--kp-text-mute); }

.card__vote,
.card__quality,
.card__type {
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(8, 9, 14, 0.62) !important;
  border: 1px solid var(--kp-glass-border);
  font-weight: 700;
}
.card__quality {
  background: var(--kp-gradient) !important;
  color: #fff !important;
  border: 0;
}

/* --------------------------------------------------------- movie detail page */
.full-start-new__background,
.full-start__background {
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  opacity: 0.55 !important;
}
.full-start-new__title,
.full-start__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}
.full-start-new__tagline { color: var(--kp-text-dim); font-style: italic; }
.full-start-new__details,
.full-start__details { color: var(--kp-text-dim); }

.full-start-new__rate-line .full-start__rate,
.full-start__rate {
  border-radius: 10px;
  background: var(--kp-glass);
  border: 1px solid var(--kp-glass-border);
  -webkit-backdrop-filter: var(--kp-blur);
  backdrop-filter: var(--kp-blur);
}

.full-start-new__buttons,
.full-start__buttons { gap: 0.6em; }

.full-start__button {
  border-radius: 999px !important;
  background: var(--kp-glass) !important;
  border: 1px solid var(--kp-glass-border);
  -webkit-backdrop-filter: var(--kp-blur);
  backdrop-filter: var(--kp-blur);
  color: var(--kp-text) !important;
  transition: transform var(--kp-fast) var(--kp-ease), background var(--kp-fast) var(--kp-ease),
              box-shadow var(--kp-med) var(--kp-ease);
}
.full-start__button svg { transition: transform var(--kp-med) var(--kp-ease); }
.full-start__button.focus,
.full-start__button.hover {
  background: #fff !important;
  color: #0b0c12 !important;
  transform: scale(1.06);
  box-shadow: 0 12px 36px -10px rgba(255, 255, 255, 0.45);
}
.full-start__button.focus svg { transform: scale(1.12); }

/* Our hybrid buttons get signature gradients */
.kino-btn--watch {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(139, 92, 246, 0.35)) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
}
.kino-btn--4k {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.32), rgba(249, 115, 22, 0.32)) !important;
  border-color: rgba(251, 146, 60, 0.35) !important;
}
.kino-btn--watch.focus,
.kino-btn--watch.hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px -10px rgba(139, 92, 246, 0.75);
}
.kino-btn--4k.focus,
.kino-btn--4k.hover {
  background: linear-gradient(135deg, #ec4899, #f97316) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px -10px rgba(249, 115, 22, 0.75);
  animation: kp-pulse 1.8s ease-in-out infinite;
}

/* ---------------------------------------------------- select / context menus */
.selectbox__content {
  border-radius: var(--kp-radius-l) 0 0 var(--kp-radius-l);
  border-right: 0;
}
.selectbox__head,
.settings__head {
  border-bottom: 1px solid var(--kp-glass-border);
}
.selectbox__title,
.settings__title { font-weight: 700; letter-spacing: -0.01em; }

.selectbox-item,
.settings-folder,
.settings-param {
  border-radius: 12px;
  margin: 0.15em 0.4em;
  transition: background var(--kp-fast) var(--kp-ease), transform var(--kp-fast) var(--kp-ease);
}
.selectbox-item.focus,
.selectbox-item.hover,
.settings-folder.focus,
.settings-param.focus {
  background: var(--kp-gradient) !important;
  color: #fff !important;
  transform: translateX(-4px);
}
.selectbox-item__subtitle,
.settings-param__descr { color: var(--kp-text-mute); }
.selectbox-item.focus .selectbox-item__subtitle,
.settings-param.focus .settings-param__descr { color: rgba(255, 255, 255, 0.8); }

.settings__content {
  border-radius: var(--kp-radius-l) 0 0 var(--kp-radius-l);
  border-right: 0;
}

/* ------------------------------------------------------------ modal & toasts */
.modal__content { border-radius: var(--kp-radius-l); }
.noty {
  border-radius: 999px !important;
  padding-left: 1.4em !important;
  padding-right: 1.4em !important;
  animation: kp-rise var(--kp-med) var(--kp-ease);
}

/* ------------------------------------------ Kino metadata (ratings/quality) */
/* rating colours — shared by card votes and the movie-page rate line */
.kino-vote--great { --kv: #22c55e; }
.kino-vote--good  { --kv: #a3e635; }
.kino-vote--mid   { --kv: #f59e0b; }
.kino-vote--bad   { --kv: #ef4444; }

/* card: rating (bottom-right, Lampa's own slot) */
.card__vote.kino-vote {
  color: var(--kv) !important;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 0.25em;
}
.card__vote.kino-vote::after {
  content: attr(data-src);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--kp-text-dim);
  letter-spacing: 0.02em;
}

/* card: quality badge (top-right; top-left belongs to Lampa's "TV" type label)
   — replaces Lampa's CUB quality label */
.kino-has-q .card__quality { display: none !important; }
.kino-cq {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.28em 0.55em;
  border-radius: 8px;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(8, 9, 14, 0.72);
  border: 1px solid var(--kp-glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kino-cq span {
  font-size: 0.78em;
  padding: 0.05em 0.35em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
}
.kino-cq--4k { background: var(--kp-gradient); border: 0; box-shadow: 0 4px 16px -4px rgba(217, 70, 239, 0.7); }
.kino-cq--cam { background: rgba(239, 68, 68, 0.9); border: 0; }

/* movie page: KP / IMDb / TMDB boxes coloured, vote count under the source */
.full-start__rate.kino-rate > div:first-child { color: var(--kv); font-weight: 800; }
.full-start__rate.kino-rate[data-votes]:not([data-votes=""])::after {
  content: attr(data-votes);
  margin-left: 0.45em;
  font-size: 0.7em;
  color: var(--kp-text-mute);
}

/* movie page: quality chips */
.kino-chip {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5em;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9em;
  background: var(--kp-glass);
  border: 1px solid var(--kp-glass-border);
}
.kino-chip--4k { background: var(--kp-gradient); border: 0; color: #fff; }
.kino-chip--hdr { color: #fcd34d; border-color: rgba(252, 211, 77, 0.4); }
.kino-chip--dv { color: #fff; background: linear-gradient(135deg, #111827, #374151); border-color: rgba(255, 255, 255, 0.25); }
.kino-chip--cam { background: rgba(239, 68, 68, 0.9); border: 0; color: #fff; }

/* movie page: logo instead of text title */
.full-start-new__title.kino-has-logo { line-height: 0; }
.kino-logo {
  display: block;
  /* A fixed box, in the title's own em (Lampa sets the title at ~4× body text):
     wide wordmarks (500×47) are capped by width, tall/square logos (500×280)
     by height — neither pushes the Watch buttons below the fold.
     object-fit keeps the aspect ratio inside the box. */
  height: 1.1em;               /* = the text title it replaces → Lampa layout unchanged */
  width: auto;
  max-width: 70%;              /* fallback for old TV WebViews without min() */
  max-width: min(70%, 12em);
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.65));
  animation: kp-rise var(--kp-med) var(--kp-ease);
}
/* black-on-transparent logos would vanish on the dark theme → render them white */
.kino-logo--dark { filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.65)); }
/* mid-grey / metallic logos: lift them without losing their texture */
.kino-logo--dim { filter: brightness(1.9) contrast(1.1) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.65)); }

/* movie page: Time2End */
.kino-t2e {
  margin-top: 0.6em;
  color: var(--kp-text-dim);
  font-size: 1.05em;
}
.kino-t2e b { color: var(--kp-text); }
.kino-t2e__icon { margin-right: 0.4em; }

/* ---------------------------------- Lampac online list (voices / episodes) */
.online-prestige {
  border-radius: var(--kp-radius) !important;
  background: var(--kp-glass) !important;
  border: 1px solid var(--kp-glass-border);
  -webkit-backdrop-filter: var(--kp-blur);
  backdrop-filter: var(--kp-blur);
  transition: transform var(--kp-fast) var(--kp-ease), box-shadow var(--kp-med) var(--kp-ease);
}
/* TV-first: the focused row must be obvious from across the room */
.online-prestige.focus,
.online-prestige.hover {
  transform: scale(1.02);
  background: rgba(139, 92, 246, 0.24) !important;
  box-shadow: 0 0 0 3px #c4b5fd, 0 16px 44px -10px rgba(139, 92, 246, 0.75);
}
.online-prestige.focus::after { display: none !important; } /* Lampac's white frame */
.online-prestige__img { border-radius: 12px !important; overflow: hidden; }
.online-prestige__quality { color: #f0abfc; font-weight: 700; }
.online-prestige-split { color: var(--kp-accent) !important; }

/* filter bar ("Источник", "Перевод", "Сезон") above the list */
.filter--sort,
.filter--filter,
.filter--search,
.filter--back {
  border-radius: 999px !important;
  background: var(--kp-glass) !important;
  border: 1px solid var(--kp-glass-border);
}
.filter--sort.focus,
.filter--filter.focus,
.filter--search.focus,
.filter--back.focus { background: var(--kp-gradient) !important; color: #fff !important; }

/* ----------------------------------------------------------- torrents list */
.torrent-item {
  border-radius: var(--kp-radius);
  background: var(--kp-glass) !important;
  border: 1px solid var(--kp-glass-border);
  transition: transform var(--kp-fast) var(--kp-ease), box-shadow var(--kp-med) var(--kp-ease);
}
.torrent-item.focus,
.torrent-item.hover {
  transform: scale(1.015);
  box-shadow: var(--kp-glow);
  background: var(--kp-glass-strong) !important;
}
.torrent-item__size {
  background: var(--kp-gradient) !important;
  color: #fff !important;
  border-radius: 8px;
}

/* -------------------------------------------------- buttons, inputs, misc */
.simple-button,
.button {
  border-radius: 999px !important;
  transition: background var(--kp-fast) var(--kp-ease), transform var(--kp-fast) var(--kp-ease);
}
.simple-button.focus,
.button.focus,
.simple-button.hover { background: var(--kp-gradient) !important; color: #fff !important; transform: scale(1.04); }

.search__input,
.settings-input__input,
input[type="text"] {
  background: var(--kp-glass-strong) !important;
  border: 1px solid var(--kp-glass-border) !important;
  border-radius: var(--kp-radius-s) !important;
  color: var(--kp-text) !important;
}
.search__input.focus,
.settings-input__input:focus { box-shadow: var(--kp-glow); }

/* player chrome */
.player-panel { border-radius: var(--kp-radius-l) var(--kp-radius-l) 0 0; }
.player-panel__position > div,
.player-panel__timeline .player-panel__position { background: var(--kp-gradient) !important; }
.player-panel .button.focus { background: #fff !important; color: #0b0c12 !important; }

/* thin, subtle scrollbars (desktop browsers) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------- keyframes */
@keyframes kp-sheen {
  from { background-position: 120% 0; }
  to   { background-position: -40% 0; }
}
@keyframes kp-pulse {
  0%, 100% { box-shadow: 0 14px 40px -10px rgba(249, 115, 22, 0.75); }
  50%      { box-shadow: 0 14px 50px -6px rgba(236, 72, 153, 0.9); }
}
@keyframes kp-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------- performance / accessibility */
/* Lite mode for weak TV boxes: solid glass, no blur, no sheen */
body.kino-lite * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.kino-lite .head__body,
body.kino-lite .menu__list,
body.kino-lite .selectbox__content,
body.kino-lite .settings__content,
body.kino-lite .modal__content,
body.kino-lite .full-start__button,
body.kino-lite .online-prestige,
body.kino-lite .torrent-item { background: var(--kp-glass-strong) !important; }
body.kino-lite .modal__content { background: #12131c !important; }
body.kino-lite .card__view::after { display: none; }
body.kino-lite .kino-btn--4k.focus { animation: none; }

/* TV performance: the expensive paints on a TV SoC are blurred shadows and
   filters. Focus states keep their look, but with a crisp ring instead of a
   40px-blur glow, and the full-screen backdrop (swapped by Lampa on every card
   move) is darkened by its overlay instead of a filter. */
body.kino-lite .background { filter: none; }
body.kino-lite .background::after { background: rgba(7, 8, 12, 0.72); }
body.kino-lite .card__view { box-shadow: none; }
body.kino-lite .card.focus .card__view,
body.kino-lite .card.hover .card__view { box-shadow: 0 0 0 3px #a78bfa; transform: scale(1.05); }
body.kino-lite .menu__item.focus,
body.kino-lite .menu__item.hover,
body.kino-lite .full-start__button.focus,
body.kino-lite .full-start__button.hover,
body.kino-lite .kino-btn--watch.focus,
body.kino-lite .kino-btn--4k.focus,
body.kino-lite .torrent-item.focus,
body.kino-lite .items-line__more.focus { box-shadow: none !important; }
body.kino-lite .online-prestige.focus,
body.kino-lite .online-prestige.hover { box-shadow: 0 0 0 3px #c4b5fd !important; }
body.kino-lite .head__body,
body.kino-lite .menu__list,
body.kino-lite .selectbox__content,
body.kino-lite .settings__content,
body.kino-lite .noty,
body.kino-lite .player-panel,
body.kino-lite .kino-cq { box-shadow: none !important; }
body.kino-lite .kino-logo,
body.kino-lite .kino-logo--dark,
body.kino-lite .kino-logo--dim { filter: none; }
body.kino-lite .kino-logo--dark { filter: brightness(0) invert(1); }
body.kino-lite .kino-logo--dim { filter: brightness(1.9); }
body.kino-lite .full-start-new__background,
body.kino-lite .full-start__background { -webkit-mask-image: none; mask-image: none; }
body.kino-lite * { transition-duration: 120ms !important; }

/* Browsers without backdrop-filter get opaque glass instead of see-through mush */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .head__body, .menu__list, .selectbox__content, .settings__content,
  .modal__content, .noty, .player-panel, .full-start__button, .torrent-item, .online-prestige {
    background: var(--kp-glass-strong) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}