/* Author: Nesynov David Viktorovich (Несынов Давид Викторович). (c) 2026 GranaDzyak. All rights reserved. */
/* ГранаДзяк ТВ — экран «10 футов» (?app=tv) и подтверждение входа на телефоне (#/tv-link) */

html.tv-on,
html.tv-on body {
  overflow: hidden !important;
  background: #070706 !important;
}
html.tv-on body > *:not(#tv-root):not(.tvl) {
  display: none !important;
}

.tv {
  --a: #f28a2d;
  --a2: #f8b45a;
  --ivory: #f6e6c5;
  --muted: #a89a80;
  --card: rgba(255, 244, 222, 0.06);
  --ring: 0 0 0 0.22em #fff3dc, 0 0 2.4em rgba(242, 138, 45, 0.55);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  font-size: min(calc(100vw / 120), calc(100vh / 67.5));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ivory);
  background:
    radial-gradient(70em 40em at 85% -10%, rgba(242, 138, 45, 0.16), transparent 60%),
    radial-gradient(60em 40em at -10% 110%, rgba(168, 67, 36, 0.18), transparent 60%),
    #070706;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.tv *,
.tv *::before,
.tv *::after { box-sizing: border-box; }
:where(.tv) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.tv [data-f]:focus, .tv [data-f]:focus-visible, .tv [data-s]:focus, .tv [data-s]:focus-visible { outline: none !important; }
.tv svg { width: 1em; height: 1em; flex: none; }
.tv h1, .tv h2, .tv p { margin: 0; }
.tv-muted { color: var(--muted); }
.tv-kicker {
  font-size: 1.05em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--a2);
  font-weight: 700;
  margin-bottom: 0.6em;
}

.tv-dot { display: inline-block; width: 0.32em; height: 0.32em; border-radius: 50%; background: currentColor; opacity: 0.55; margin: 0 0.7em; vertical-align: 0.22em; }
.tv-top {
  position: absolute; top: 1.6em; right: 2.4em; z-index: 3;
  display: flex; align-items: center; gap: 1em;
  pointer-events: none;
}
.tv-clock {
  font-size: 1.5em; font-variant-numeric: tabular-nums; color: rgba(246, 230, 197, 0.9);
  padding: 0.3em 0.75em; border-radius: 99em;
  background: rgba(7, 7, 6, 0.6);
}
.tv-top__me {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 1.25em; padding: 0.25em 0.9em 0.25em 0.25em; border-radius: 99em;
  background: rgba(7, 7, 6, 0.6); color: var(--ivory);
}
.tv-top__me:empty { display: none; }
.tv-top__me b { font-weight: 600; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-top__me.is-guest { color: var(--muted); padding-left: 0.8em; }
.tv-top__me.is-guest svg { width: 1.3em; height: 1.3em; }
.tv-ava {
  display: inline-grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--a2), var(--a) 55%, #c4521c);
  color: #1a0f04; font-style: normal; font-weight: 800; font-size: 1em; letter-spacing: 0.02em;
}
.tv-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-si .tv-ava { width: 2em; height: 2em; font-size: 0.78em; }
.tv-login__ava .tv-ava { width: 100%; height: 100%; font-size: 3.2em; }
.tv.is-full .tv-top, .tv.is-full .tv-side { display: none; }
.tv-spin {
  width: 4em; height: 4em; border-radius: 50%;
  border: 0.35em solid rgba(246, 230, 197, 0.18); border-top-color: var(--a);
  animation: tv-rot 0.9s linear infinite;
}
@keyframes tv-rot { to { transform: rotate(360deg); } }

/* ---------- боковая панель ---------- */
.tv-side {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 6;
  width: 7em;
  display: flex; flex-direction: column;
  padding: 2.2em 1.1em 2.4em;
  background: linear-gradient(90deg, rgba(7, 7, 6, 0.96), rgba(7, 7, 6, 0.82));
  border-right: 0.06em solid rgba(212, 161, 75, 0.12);
  transition: width 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.24s ease, background 0.24s ease;
  overflow: hidden;
}
.tv.side-open .tv-side {
  width: 25em;
  background: linear-gradient(90deg, #0c0b09 0%, rgba(12, 11, 9, 0.98) 75%, rgba(12, 11, 9, 0.94));
  box-shadow: 4em 0 8em rgba(0, 0, 0, 0.75);
}
.tv-side__logo { display: flex; align-items: center; gap: 1em; height: 4.8em; padding-left: 0.1em; margin-bottom: 2.6em; white-space: nowrap; }
.tv-side__logo img { width: 4.6em; height: 4.6em; flex: none; filter: drop-shadow(0 0 1em rgba(242, 138, 45, 0.35)); }
.tv-side__logo b {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 2.1em; font-weight: 700; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffe2a8, var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transition: opacity 0.18s ease;
}
.tv-side__nav { display: flex; flex-direction: column; gap: 0.7em; }
.tv-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.7em; }
.tv-si {
  position: relative;
  display: flex !important; align-items: center; gap: 1.1em;
  width: 100%; height: 3.3em;
  padding: 0 0.95em;
  font-size: 1.3em; font-weight: 650;
  border-radius: 0.9em;
  color: rgba(246, 230, 197, 0.72);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tv-si[hidden] { display: none !important; }
.tv-si svg { width: 1.55em; height: 1.55em; }
.tv-si span { opacity: 0; transition: opacity 0.16s ease; overflow: hidden; text-overflow: ellipsis; }
.tv.side-open .tv-si span, .tv.side-open .tv-side__logo b { opacity: 1; }
.tv-si.is-cur { color: var(--a2); }
.tv-si.is-cur::before {
  content: ""; position: absolute; left: -0.85em; top: 0.75em; bottom: 0.75em; width: 0.28em; border-radius: 0.2em;
  background: linear-gradient(180deg, var(--a2), var(--a));
}
.tv-si.is-f { background: var(--ivory); color: #120c05; box-shadow: 0 0 1.8em rgba(242, 138, 45, 0.45); }
.tv-si--now { color: var(--a2); }
.tv-eq { display: inline-flex; gap: 0.17em; align-items: flex-end; width: 1.55em; height: 1.1em; justify-content: center; flex: none; }
.tv-eq i { width: 0.22em; background: currentColor; border-radius: 0.1em; animation: tv-eq 0.9s ease-in-out infinite; height: 40%; }
.tv-eq i:nth-child(2) { animation-delay: -0.3s; }
.tv-eq i:nth-child(3) { animation-delay: -0.6s; }
.tv:not(.is-playing) .tv-eq i { animation: none; }
@keyframes tv-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* ---------- кнопки ---------- */
.tv-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 1.35em; font-weight: 650;
  padding: 0.85em 1.7em;
  border-radius: 99em;
  background: rgba(255, 244, 222, 0.09);
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}
.tv-btn svg { width: 1.3em; height: 1.3em; }
.tv-btn--ghost { background: transparent; font-size: 1.2em; padding: 0.7em 1.3em; }
.tv-btn--cta { background: linear-gradient(135deg, var(--a2), var(--a) 50%, #e65f1e); color: #160d04; }
.tv-btn.is-f { background: var(--ivory); color: #120c05; transform: scale(1.07); box-shadow: var(--ring); }
.tv-btn--cta.is-f { background: linear-gradient(135deg, #ffd690, var(--a2) 50%, var(--a)); }

/* ---------- экраны ---------- */
.tv-scr { position: absolute; inset: 0 0 0 7em; }
.tv-scr[hidden] { display: none !important; }
.tv-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 3.2em 4.5em 6em;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 1.6em);
  mask-image: linear-gradient(180deg, transparent, #000 1.6em);
}
.tv-scroll::-webkit-scrollbar { display: none; }

/* ---------- главная ---------- */
.tv-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3em;
  min-height: 22em;
  padding: 2.4em;
  border-radius: 2em;
  background: linear-gradient(110deg, rgba(42, 36, 29, 0.95), rgba(21, 18, 15, 0.7) 60%, rgba(242, 138, 45, 0.12));
  border: 0.1em solid rgba(212, 161, 75, 0.22);
  overflow: hidden;
}
.tv-hero--wait { min-height: 16em; }
.tv-hero__cover {
  width: 17em; height: 17em; flex: none;
  border-radius: 1.3em; overflow: hidden;
  box-shadow: 0 1.6em 3em rgba(0, 0, 0, 0.55);
  background: #1a1612;
}
.tv-hero__cover img, .tv-tile__cover img, .tv-player__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-hero__txt { min-width: 0; }
.tv-hero h1 {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: 4em; line-height: 1.05; margin-bottom: 0.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-hero p { font-size: 1.6em; color: var(--muted); }
.tv-hero__acts { display: flex; gap: 1.2em; margin-top: 2em; flex-wrap: wrap; }

.tv-row { margin-top: 2em; }
.tv-row__title { font-size: 1.9em; font-weight: 700; margin-bottom: 0.1em; }
.tv-row__track {
  display: flex;
  gap: 1.8em;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1.3em 1em 1.1em;
  margin: 0 -1em;
}
.tv-row__track::-webkit-scrollbar { display: none; }
.tv-row__note { font-size: 1.35em; color: var(--muted); padding: 0.8em 0; max-width: 46em; }

.tv-tile {
  flex: none;
  width: 15em;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em;
  text-align: left;
  transition: transform 0.16s ease;
}
.tv-tile__cover {
  width: 15em; height: 15em;
  border-radius: 1.1em; overflow: hidden;
  background: linear-gradient(135deg, #2a241d, #15120f);
  box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.16s ease;
  margin-bottom: 0.45em;
}
.tv-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(248, 180, 90, 0.55); }
.tv-ph svg { width: 38%; height: 38%; }
.tv-tile b, .tv-tile > span:not(.tv-tile__cover) {
  width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-tile b { font-size: 1.3em; font-weight: 650; }
.tv-tile > span:not(.tv-tile__cover) { font-size: 1.1em; color: var(--muted); }
.tv-tile.is-f { transform: scale(1.08); }
.tv-tile.is-f .tv-tile__cover { box-shadow: var(--ring), 0 1.2em 2.4em rgba(0, 0, 0, 0.6); }
.tv-tile.is-f b { color: #fff; }

/* ---------- плейлист и поиск ---------- */
.tv-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin: 1em 0 1.4em; }
.tv-page-head h1 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 3.6em; line-height: 1.1; }
.tv-page-head p { font-size: 1.4em; color: var(--muted); margin-top: 0.3em; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, 15em); gap: 2.2em 1.8em; padding: 1em 0.5em; }

.tv-search { display: grid; grid-template-columns: 48em 1fr; gap: 3em; height: 100%; padding: 3.2em 0 0 4.5em; }
.tv-search__res { padding-top: 3.2em !important; }
.tv-search__q {
  font-size: 2.2em; font-weight: 650;
  padding: 0.55em 0.8em; border-radius: 0.5em;
  background: rgba(255, 244, 222, 0.08);
  border: 0.06em solid rgba(212, 161, 75, 0.35);
  min-height: 2.3em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-search__q i { display: inline-block; width: 0.08em; height: 1em; background: var(--a2); vertical-align: -0.15em; margin-left: 0.08em; animation: tv-blink 1s steps(1) infinite; }
@keyframes tv-blink { 50% { opacity: 0; } }
.tv-search__q .tv-muted { font-weight: 400; font-size: 0.8em; }
.tv-kb { margin-top: 1.6em; display: flex; flex-direction: column; gap: 0.7em; }
.tv-kb__row { display: flex; gap: 0.55em; }
.tv-key {
  width: 3.6em; height: 3.6em; flex: none;
  border-radius: 0.7em;
  background: rgba(255, 244, 222, 0.08);
  font-size: 1.05em; font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  transition: transform 0.12s ease, background 0.12s ease;
}
.tv-key svg { width: 1.4em; height: 1.4em; }
.tv-kb__row--fn .tv-key { width: auto; padding: 0 1em; font-size: 1.05em; }
.tv-key--wide { min-width: 9em; }
.tv-key--voice { color: var(--a2); }
.tv-key.is-f { background: var(--ivory); color: #120c05; transform: scale(1.12); box-shadow: var(--ring); }
.tv-search__res { padding: 0 3em 6em 0.5em; }
.tv-grid--res { grid-template-columns: repeat(auto-fill, 13em); }
.tv-grid--res .tv-tile, .tv-grid--res .tv-tile__cover { width: 13em; }
.tv-grid--res .tv-tile__cover { height: 13em; }

/* ---------- вход ---------- */
.tv-login { height: 100%; display: grid; place-items: center; padding: 0 4.5em 4em; }
.tv-login__card {
  display: flex; align-items: center; gap: 4em;
  padding: 3.4em 4em;
  border-radius: 2em;
  background: linear-gradient(120deg, rgba(42, 36, 29, 0.95), rgba(21, 18, 15, 0.85));
  border: 0.1em solid rgba(212, 161, 75, 0.25);
  max-width: 100em;
}
.tv-login__qr {
  width: 22em; height: 22em; flex: none;
  background: #fff; border-radius: 1.4em; padding: 1em;
  display: grid; place-items: center; text-align: center; font-size: 1em;
}
.tv-login__qr svg { width: 100%; height: 100%; }
.tv-login__qr .tv-muted { color: #6b6152; font-size: 1.2em; }
.tv-login__txt h1, .tv-login__card--me h1 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 3em; line-height: 1.1; margin-bottom: 0.4em; }
.tv-login__txt p, .tv-login__card--me p { font-size: 1.4em; line-height: 1.45; max-width: 34em; }
.tv-login__txt b { color: var(--a2); }
.tv-code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 5em; font-weight: 800; letter-spacing: 0.18em;
  margin: 0.25em 0 0.15em;
  color: #fff;
}
.tv-login__ava { width: 9em; height: 9em; border-radius: 50%; background: rgba(242, 138, 45, 0.15); color: var(--a2); display: grid; place-items: center; flex: none; }
.tv-login__ava svg { width: 55%; height: 55%; }

/* ---------- плеер ---------- */
.tv-player { padding: 0; z-index: 3; background: #070706; }
.tv-player__bg {
  position: absolute; inset: -10%;
  background: #15120f center / cover no-repeat;
  filter: blur(70px) brightness(0.42) saturate(1.2);
  transform: scale(1.1);
}
.tv-player::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 7, 6, 0.2), rgba(7, 7, 6, 0.75));
}
.tv-player__body {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; align-items: center; gap: 5em;
  padding: 4em 6em;
}
.tv-player__cover {
  width: 36em; height: 36em; flex: none;
  border-radius: 1.6em; overflow: hidden;
  background: linear-gradient(135deg, #2a241d, #15120f);
  box-shadow: 0 2.4em 5em rgba(0, 0, 0, 0.6);
}
.tv-player__info { flex: 1; min-width: 0; }
.tv-player__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: 4.6em; line-height: 1.05;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-player__artist { font-size: 2em; color: var(--muted); margin-top: 0.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-seek { display: block; width: 100%; margin-top: 2.6em; padding: 0.8em 0; border-radius: 0.8em; }
.tv-bar { display: block; height: 0.5em; border-radius: 1em; background: rgba(255, 244, 222, 0.18); overflow: hidden; transition: height 0.15s ease; }
.tv-bar i { display: block; height: 100%; width: var(--tv-p, 0%); background: linear-gradient(90deg, var(--a2), var(--a)); border-radius: inherit; }
.tv-seek.is-f .tv-bar { height: 0.9em; box-shadow: 0 0 0 0.18em #fff3dc, 0 0 1.6em rgba(242, 138, 45, 0.6); }
.tv-times { display: flex; justify-content: space-between; font-size: 1.3em; color: var(--muted); margin-top: 0.6em; font-variant-numeric: tabular-nums; }
.tv-player__ctl { display: flex; align-items: center; gap: 1.6em; margin-top: 1.6em; }
.tv-round {
  width: 5.4em; height: 5.4em; border-radius: 50%;
  display: grid !important; place-items: center;
  background: rgba(255, 244, 222, 0.1);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tv-round svg { width: 2.2em; height: 2.2em; }
.tv-round--big { width: 7em; height: 7em; background: rgba(255, 244, 222, 0.16); }
.tv-round--big svg { width: 3em; height: 3em; }
.tv-round.is-f { background: var(--ivory); color: #120c05; transform: scale(1.1); box-shadow: var(--ring); }
.tv-btn--kara {
  margin-left: 1.4em;
  font-size: 1.9em;
  padding: 0.85em 1.6em;
  background: linear-gradient(135deg, var(--a2), var(--a) 50%, #e65f1e);
  color: #160d04;
  font-weight: 800;
}
.tv-btn--kara svg { width: 1.35em; height: 1.35em; }
.tv-btn--kara.is-f { background: linear-gradient(135deg, #ffe0a6, var(--a2) 45%, var(--a)); color: #160d04; }
.tv-btn--kara.is-off { background: rgba(255, 244, 222, 0.1); color: var(--muted); font-size: 1.5em; }
.tv-btn--kara.is-off.is-f { background: rgba(255, 244, 222, 0.22); color: var(--ivory); }
.tv-player__next { font-size: 1.35em; color: var(--muted); margin-top: 2.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-player__next b { color: var(--ivory); font-weight: 600; }

/* ---------- караоке ---------- */
.tv-kara { padding: 0; z-index: 4; background: #070706; overflow: hidden; }
.tv-kara__bg {
  position: absolute; inset: -10%;
  background: #15120f center / cover no-repeat;
  filter: blur(50px) brightness(0.5) saturate(1.3);
  animation: tv-drift 30s ease-in-out infinite alternate;
}
@keyframes tv-drift { from { transform: scale(1.1) translate(-2%, -1%); } to { transform: scale(1.2) translate(2%, 1%); } }
.tv-kara__scenes { position: absolute; inset: 0; }
.tv-kara__scene {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0; transition: opacity 1.4s ease;
  animation: tv-kb 26s ease-in-out infinite alternate;
}
.tv-kara__scene.is-on { opacity: 1; }
@keyframes tv-kb { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.tv-kara__shade {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(7, 7, 6, 0.35), rgba(7, 7, 6, 0.8) 75%), linear-gradient(180deg, rgba(7, 7, 6, 0.7), transparent 25%, transparent 70%, rgba(7, 7, 6, 0.85));
}
.tv-kara__top { position: absolute; top: 3em; left: 5em; right: 5em; display: flex; align-items: center; gap: 1.2em; z-index: 1; }
.tv-kara__mic { width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--a2), var(--a)); color: #160d04; }
.tv-kara__mic svg { width: 1.8em; height: 1.8em; }
.tv-kara__top b { display: block; font-size: 1.8em; font-weight: 700; }
.tv-kara__top span { font-size: 1.3em; color: var(--muted); }
.tv-kara__stage {
  position: absolute; left: 6em; right: 6em; top: 50%;
  transform: translateY(-50%);
  text-align: center; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.9em;
}
.tv-kara__line { line-height: 1.2; font-weight: 800; text-wrap: balance; text-shadow: 0 0.08em 0.6em rgba(0, 0, 0, 0.5); }
.tv-kara__line.is-now { font-size: 5em; }
.tv-kara__line.is-next { font-size: 3.1em; color: rgba(246, 230, 197, 0.62); font-weight: 700; }
.tv-kara__line.is-later { font-size: 2.5em; color: rgba(246, 230, 197, 0.32); font-weight: 650; }
.tv-kw {
  --p: 0;
  color: transparent;
  background: linear-gradient(90deg, #ffc65c calc(var(--p) * 100%), rgba(255, 246, 230, 0.92) calc(var(--p) * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
.tv-kara__wait { font-size: 4em; color: var(--a2); letter-spacing: 0.2em; font-weight: 800; }
.tv-kara__foot { position: absolute; left: 5em; right: 5em; bottom: 5.2em; display: flex; align-items: center; gap: 1.2em; z-index: 1; font-size: 1.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tv-kara__foot .tv-bar { flex: 1; height: 0.4em; }
.tv-kara__hint { position: absolute; left: 0; right: 0; bottom: 2.2em; text-align: center; font-size: 1.2em; color: rgba(246, 230, 197, 0.5); z-index: 1; }
.tv-kara__paused {
  position: absolute; top: 3em; right: 5em; z-index: 2;
  display: none; align-items: center; gap: 0.6em;
  font-size: 1.6em; font-weight: 700;
  padding: 0.6em 1.2em; border-radius: 99em;
  background: rgba(7, 7, 6, 0.7); border: 0.08em solid rgba(248, 180, 90, 0.5);
}
.tv-kara__paused svg { width: 1.2em; height: 1.2em; }
.tv-kara.is-paused .tv-kara__paused { display: inline-flex; }
.tv-kara__focus { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- полноэкранные экраны ---------- */
.tv-scr.tv-player, .tv-scr.tv-kara, .tv-scr.tv-vp, .tv-scr.tv-game { inset: 0; z-index: 7; }

/* ---------- Видео: витрина ---------- */
.tv-video { overflow: hidden; }
.tv-vhero {
  position: absolute; inset: 0 0 auto 0; height: 36em;
  padding: 4.4em 4.5em 2.2em;
  display: flex; flex-direction: column; align-items: flex-start;
}
.tv-vhero__bg { position: absolute; top: 0; right: 0; width: 80%; height: 67.5em; z-index: -2; }
.tv-vhero__img {
  position: absolute; inset: 0;
  background: #15120f center 25% / cover no-repeat;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.7s ease, transform 6s ease-out;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 42%, transparent 82%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 42%, transparent 82%);
  mask-composite: intersect;
}
.tv-vhero__img.is-on { opacity: 1; transform: none; }
.tv-vhero__shade {
  position: absolute; top: 0; left: 0; right: 0; height: 67.5em; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 7, 6, 0.94) 0%, rgba(7, 7, 6, 0.62) 34%, rgba(7, 7, 6, 0.08) 66%, transparent 80%),
    linear-gradient(180deg, rgba(7, 7, 6, 0.35) 0%, transparent 16%, transparent 38%, rgba(7, 7, 6, 0.72) 56%, rgba(7, 7, 6, 0.96) 74%);
}
.tv-vhero__box { max-width: 56em; }
.tv-vhero__box.is-in { animation: tv-hero-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes tv-hero-in { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }
.tv-vhero__chan { color: var(--a2); font-weight: 650; }
.tv-vhero__acts { margin-top: auto; display: flex; align-items: center; gap: 1.1em; }
.tv-vhero__dots { display: flex; gap: 0.55em; margin-left: 1.6em; }
.tv-vhero__dots i { width: 0.65em; height: 0.65em; border-radius: 99em; background: rgba(246, 230, 197, 0.3); transition: width 0.3s ease, background 0.3s ease; }
.tv-vhero__dots i.is-on { width: 2em; background: var(--a2); }

/* «Нравится» / «Не нравится» */
.tv-vote em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.75; }
.tv-vote em:empty { display: none; }
.tv-vote.is-on { background: rgba(242, 138, 45, 0.22); color: var(--a2); box-shadow: inset 0 0 0 0.1em rgba(248, 180, 90, 0.6); }
.tv-vote[data-vote="dislike"].is-on { background: rgba(246, 230, 197, 0.16); color: var(--ivory); box-shadow: inset 0 0 0 0.1em rgba(246, 230, 197, 0.5); }
.tv-vote.is-on svg { fill: currentColor; fill-opacity: 0.25; }
.tv-vote.is-f { color: #120c05; }
.tv-vote.is-on.is-f { background: var(--ivory); }
.tv-vote:not(.is-f) { -webkit-backdrop-filter: blur(0.6em); backdrop-filter: blur(0.6em); }

/* окно «войдите, чтобы оценить» */
.tv-ask { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(5, 4, 3, 0.78); animation: tv-fade 0.2s ease; }
@keyframes tv-fade { from { opacity: 0; } }
.tv-ask__card {
  width: 54em; padding: 3.4em 3.6em; border-radius: 2em; text-align: center;
  background: linear-gradient(160deg, #221b14, #120f0c 70%);
  border: 0.1em solid rgba(212, 161, 75, 0.28); box-shadow: 0 3em 7em rgba(0, 0, 0, 0.7);
}
.tv-ask__ic { display: inline-grid; place-items: center; width: 5.4em; height: 5.4em; border-radius: 50%; background: rgba(242, 138, 45, 0.16); color: var(--a2); margin-bottom: 1.4em; }
.tv-ask__ic svg { width: 2.8em; height: 2.8em; }
.tv-ask h2 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 2.8em; line-height: 1.15; }
.tv-ask p { font-size: 1.45em; line-height: 1.5; color: var(--muted); margin: 0.8em auto 0; max-width: 32em; }
.tv-ask .tv-hero__acts { justify-content: center; margin-top: 2.2em; }
.tv-vhero h1 {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: 4.2em; line-height: 1.06; margin-bottom: 0.25em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 0.06em 0.5em rgba(0, 0, 0, 0.55);
}
.tv-vhero__meta { font-size: 1.4em; color: rgba(246, 230, 197, 0.82); }
.tv-vhero__ex {
  font-size: 1.35em; line-height: 1.5; color: var(--muted); margin-top: 0.8em; max-width: 40em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-vrows {
  position: absolute; top: 34.5em; left: 0; right: 0; bottom: 0; height: auto;
  padding-top: 1em;
}
.tv-vrows .tv-row { margin-top: 0; margin-bottom: 1.2em; }
.tv-row__title { font-size: 1.7em; }
.tv-vcard {
  flex: none; width: 23em;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em;
  text-align: left;
  transition: transform 0.16s ease;
}
.tv-vcard__pic {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 1em; overflow: hidden;
  background: linear-gradient(135deg, #2a241d, #15120f);
  box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.45);
  margin-bottom: 0.5em;
  transition: box-shadow 0.16s ease;
}
.tv-vcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-vcard__pic em {
  position: absolute; right: 0.6em; bottom: 0.6em;
  font-style: normal; font-size: 1.05em; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0.2em 0.5em; border-radius: 0.4em;
  background: rgba(7, 7, 6, 0.78); color: #fff3dc;
}
.tv-vcard b, .tv-vcard > span:not(.tv-vcard__pic) { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-vcard b { font-size: 1.3em; font-weight: 650; }
.tv-vcard > span:not(.tv-vcard__pic) { font-size: 1.1em; color: var(--muted); }
.tv-vcard--v { width: 12.5em; }
.tv-vcard--v .tv-vcard__pic { aspect-ratio: 3 / 4; }
.tv-vcard--ghost { height: 15em; border-radius: 1em; background: rgba(255, 244, 222, 0.05); animation: tv-pulse 1.4s ease-in-out infinite; }
@keyframes tv-pulse { 50% { opacity: 0.45; } }
.tv-vcard.is-f { transform: scale(1.07); }
.tv-vcard.is-f .tv-vcard__pic { box-shadow: var(--ring), 0 1.2em 2.4em rgba(0, 0, 0, 0.6); }
.tv-vcard.is-f b { color: #fff; }

/* ---------- Видео: плеер ---------- */
.tv-vp { background: #000; overflow: hidden; }
.tv-vp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tv-vp__shade, .tv-vp__top, .tv-vp__bot { opacity: 0; transition: opacity 0.3s ease; }
.tv-vp.is-ui .tv-vp__shade, .tv-vp.is-ui .tv-vp__top, .tv-vp.is-ui .tv-vp__bot { opacity: 1; }
.tv-vp__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 28%, transparent 62%, rgba(0, 0, 0, 0.85));
}
.tv-vp__top { position: absolute; top: 3.4em; left: 5em; right: 12em; }
.tv-vp__title {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700; font-size: 3.2em; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-vp__chan { font-size: 1.4em; color: rgba(246, 230, 197, 0.8); margin-top: 0.4em; }
.tv-vp__mid { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tv-vp__mid > * { grid-area: 1 / 1; }
.tv-vp__big {
  width: 8em; height: 8em; border-radius: 50%;
  display: none; place-items: center;
  background: rgba(7, 7, 6, 0.6); border: 0.15em solid rgba(248, 180, 90, 0.7); color: #fff3dc;
}
.tv-vp__big svg { width: 3.6em; height: 3.6em; margin-left: 0.3em; }
.tv-vp.is-paused .tv-vp__big { display: grid; }
.tv-vp .tv-spin { display: none; }
.tv-vp.is-wait:not(.is-paused) .tv-spin { display: block; }
.tv-vp__bot { position: absolute; left: 5em; right: 5em; bottom: 3em; }
.tv-vp__row { display: flex; align-items: center; gap: 1.2em; font-size: 1.35em; font-variant-numeric: tabular-nums; color: rgba(246, 230, 197, 0.85); }
.tv-vp__bar { flex: 1; height: 0.45em; border-radius: 1em; background: rgba(255, 244, 222, 0.22); overflow: hidden; }
.tv-vp__bar i { display: block; height: 100%; width: var(--vp, 0%); background: linear-gradient(90deg, var(--a2), var(--a)); border-radius: inherit; }
.tv-vp__row--meta { justify-content: space-between; margin-top: 0.9em; font-size: 1.15em; color: rgba(246, 230, 197, 0.6); }
.tv-vp__q { color: var(--a2); font-weight: 700; }
.tv-vp__next { font-size: 1.15em; color: rgba(246, 230, 197, 0.6); margin-top: 0.6em; }
.tv-vp__next b { color: var(--ivory); font-weight: 600; }
.tv-vp__pos { color: rgba(246, 230, 197, 0.6); margin-left: 0.6em; letter-spacing: 0.08em; }
.tv-vp__pos:empty { display: none; }
.tv-vp__pill {
  position: absolute; top: 3.6em; right: 5em;
  display: flex; align-items: center; gap: 0.5em;
  font-size: 1.4em; padding: 0.5em 0.9em; border-radius: 99em;
  background: rgba(7, 7, 6, 0.6); color: rgba(246, 230, 197, 0.85);
  opacity: 0; transition: opacity 0.3s ease;
}
.tv-vp__pill svg { width: 1.3em; height: 1.3em; }
.tv-vp__pill em { font-style: normal; font-variant-numeric: tabular-nums; }
.tv-vp__pill em:empty { display: none; }
.tv-vp__pill.is-on { color: var(--a2); }
.tv-vp__pill.is-on svg { fill: currentColor; fill-opacity: 0.3; }
.tv-vp.is-ui .tv-vp__pill { opacity: 1; }
.tv-vp__acts { display: none; gap: 1.1em; margin-bottom: 2em; }
.tv-vp.is-paused .tv-vp__acts { display: flex; }
.tv-vp.is-next video, .tv-vp.is-next .tv-vp__top { animation: tv-vp-next 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tv-vp.is-prev video, .tv-vp.is-prev .tv-vp__top { animation: tv-vp-prev 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes tv-vp-next { from { transform: translateY(12%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tv-vp-prev { from { transform: translateY(-12%); opacity: 0; } to { transform: none; opacity: 1; } }
.tv-vp__focus, .tv-sk__focus, .tv-read__focus, .tv-game__focus { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tv-sk__focus { inset: 0; width: auto; height: auto; }
.tv.is-full .tv-toast { bottom: auto; top: 2.6em; }

/* ---------- ГранаСкоп ---------- */
.tv-sk { display: flex; align-items: center; justify-content: center; gap: 4em; padding: 3em 4em; overflow: hidden; }
.tv-sk::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40em 30em at 50% 50%, rgba(242, 138, 45, 0.14), transparent 70%);
}
.tv-sk__info { flex: 0 1 36em; min-width: 0; align-self: center; }
.tv-sk__info h1 {
  font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 3.2em; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-sk__chan { font-size: 1.5em; color: var(--a2); font-weight: 650; margin-top: 0.6em; }
.tv-sk__ex { font-size: 1.3em; line-height: 1.5; color: var(--muted); margin-top: 0.8em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tv-sk__meta { font-size: 1.2em; color: var(--muted); margin-top: 1em; }
.tv-sk__count { font-size: 1.3em; color: var(--muted); margin-top: 2em; }
.tv-sk__acts { display: flex; gap: 1em; margin-top: 2.2em; }
.tv-sk__count b { font-size: 2em; color: var(--ivory); font-family: "Oswald", "Arial Narrow", sans-serif; margin-right: 0.15em; }
.tv-sk__stage {
  position: relative; flex: none;
  height: 61em; aspect-ratio: 9 / 16;
  border-radius: 1.8em; overflow: hidden;
  background: #000;
  box-shadow: 0 2em 5em rgba(0, 0, 0, 0.65), 0 0 0 0.1em rgba(212, 161, 75, 0.25);
  transition: box-shadow 0.18s ease;
}
.tv-sk__stage:has(.is-f) { box-shadow: 0 2em 5em rgba(0, 0, 0, 0.65), 0 0 0 0.22em #fff3dc, 0 0 3em rgba(242, 138, 45, 0.5); }
.tv-sk__stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.tv-sk__stage.is-up { animation: tv-sk-up 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tv-sk__stage.is-down { animation: tv-sk-down 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes tv-sk-up { from { transform: translateY(14%); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes tv-sk-down { from { transform: translateY(-14%); opacity: 0.2; } to { transform: none; opacity: 1; } }
.tv-sk__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.35em; background: rgba(255, 244, 222, 0.2); }
.tv-sk__bar i { display: block; height: 100%; width: var(--sp, 0%); background: linear-gradient(90deg, var(--a2), var(--a)); }
.tv-sk__paused {
  position: absolute; left: 50%; top: 50%; width: 7em; height: 7em; margin: -3.5em 0 0 -3.5em; border-radius: 50%;
  display: none; place-items: center; background: rgba(7, 7, 6, 0.6); border: 0.15em solid rgba(248, 180, 90, 0.7);
}
.tv-sk__paused svg { width: 3em; height: 3em; margin-left: 0.3em; }
.tv-sk.is-paused .tv-sk__paused { display: grid; }
.tv-sk__navs { flex: 0 0 12em; display: flex; flex-direction: column; align-items: center; gap: 0.8em; }
.tv-sk__nav {
  width: 5em; height: 5em; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 244, 222, 0.1); color: var(--ivory);
}
.tv-sk__nav svg { width: 2.4em; height: 2.4em; }
.tv-sk__nav.is-off { opacity: 0.3; }
.tv-sk__hint { font-size: 1.15em; color: var(--muted); text-align: center; }
.tv-sk__hint:last-child { margin-top: 1.6em; }

/* ---------- Игры ---------- */
.tv-grid--games { grid-template-columns: repeat(auto-fill, 21em); gap: 2.6em 2em; }
.tv-gcard, .tv-acard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em;
  text-align: left; transition: transform 0.16s ease;
}
.tv-gcard__pic, .tv-acard__pic {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 1.1em; overflow: hidden;
  background: linear-gradient(135deg, #2a241d, #15120f);
  box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.45);
  margin-bottom: 0.5em;
  transition: box-shadow 0.16s ease;
}
.tv-gcard__pic img, .tv-acard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-gcard b { font-size: 1.35em; font-weight: 700; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-gcard > span:not(.tv-gcard__pic) { font-size: 1.1em; color: var(--muted); }
.tv-gcard.is-f, .tv-acard.is-f { transform: scale(1.06); }
.tv-gcard.is-f .tv-gcard__pic, .tv-acard.is-f .tv-acard__pic { box-shadow: var(--ring), 0 1.2em 2.4em rgba(0, 0, 0, 0.6); }
.tv-game { background: #000; }
.tv-game iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tv-game__wait {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6em;
  background: #070706; font-size: 1.5em; transition: opacity 0.3s ease;
}
.tv-game__wait .tv-spin { font-size: 0.67em; }
.tv-game.is-ready .tv-game__wait { opacity: 0; pointer-events: none; }
.tv-game__hint {
  position: absolute; left: 50%; top: 2em; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.7em; white-space: nowrap;
  font-size: 1.3em; font-weight: 600;
  padding: 0.7em 1.3em; border-radius: 99em;
  background: rgba(7, 7, 6, 0.85); border: 0.08em solid rgba(248, 180, 90, 0.45);
  transition: opacity 0.5s ease; pointer-events: none;
}
.tv-game__hint svg { width: 1.5em; height: 1.5em; color: var(--a2); }
.tv-game.is-hintoff .tv-game__hint { opacity: 0; }
/* «Как играть» перед игрой */
.tv-how {
  position: absolute; inset: 0; z-index: 4;
  display: grid; grid-template-columns: 1fr 50em; align-items: center; gap: 4em;
  padding: 5em 7em 5em 8em;
  background:
    radial-gradient(60em 40em at 20% 30%, rgba(242, 138, 45, 0.18), transparent 65%),
    radial-gradient(50em 40em at 100% 110%, rgba(168, 67, 36, 0.22), transparent 60%),
    #0b0a08;
}
.tv-how__pic { display: grid; place-items: center; min-height: 0; height: 100%; }
.tv-how__duo { display: grid; grid-template-columns: 0.42fr 1fr; align-items: center; gap: 3em; width: 100%; }
.tv svg.tv-hw { width: 100%; height: auto; max-height: 52em; overflow: visible; }
.tv svg.tv-hw--remote { max-width: 22em; }
.tv .tv-how__duo svg.tv-hw--remote { max-width: 14em; justify-self: end; }
.tv svg.tv-hw--pad { max-width: 66em; }
.tv-hw .hw-body { fill: #1d1914; stroke: rgba(248, 180, 90, 0.35); stroke-width: 2.5; }
.tv-hw .hw-ring { fill: #14110d; stroke: rgba(255, 244, 222, 0.14); stroke-width: 2; }
.tv-hw .hw-deco { fill: #2a251e; stroke: rgba(255, 244, 222, 0.1); stroke-width: 1.5; }
.tv-hw .hw-k { fill: #3a332a; stroke: rgba(255, 244, 222, 0.22); stroke-width: 2; }
.tv-hw .hw-k.is-on { fill: var(--a); stroke: #fff3dc; stroke-width: 3; filter: drop-shadow(0 0 10px rgba(242, 138, 45, 0.9)); }
.tv-hw .hw-ico { fill: none; stroke: rgba(255, 244, 222, 0.6); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tv-hw text { fill: var(--ivory); font: 700 20px system-ui, "Segoe UI", Roboto, Arial, sans-serif; text-anchor: middle; pointer-events: none; }
.tv-hw text.hw-sm { font-size: 15px; }
.tv-how__side { display: flex; flex-direction: column; min-width: 0; }
.tv-how__side h1 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 4.2em; line-height: 1.05; }
.tv-how__goal { font-size: 1.5em; line-height: 1.45; color: var(--muted); margin-top: 0.6em !important; }
.tv-how__list { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; gap: 0.9em; }
.tv-how__list li {
  display: flex; align-items: center; gap: 1.2em;
  padding: 0.9em 1.2em; border-radius: 1em; background: rgba(255, 244, 222, 0.05);
}
.tv-how__list b { font-size: 1.45em; font-weight: 600; line-height: 1.3; }
.tv-how__keys { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em; flex: none; max-width: 24em; }
.tv-hk {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; padding: 0 0.7em;
  border-radius: 0.6em; font: 700 1.25em/1 system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: #170d03;
  background: linear-gradient(135deg, var(--a2), var(--a)); white-space: nowrap;
}
.tv-hk--round { border-radius: 50%; padding: 0; width: 2.2em; }
.tv-hk__or { font-size: 1.05em; color: var(--muted); margin: 0 0.1em; }
.tv-hk__sep { width: 0.12em; height: 1.8em; background: rgba(255, 244, 222, 0.2); margin: 0 0.5em; }
.tv-how__note { font-size: 1.3em; color: var(--a2); margin-top: 1em !important; }
.tv-how__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; margin-top: 2.2em; }
.tv-how__acts .tv-btn { min-width: 19em; justify-content: center; }
.tv-how__foot { display: flex; align-items: center; gap: 1.4em; margin-top: 2em; font-size: 1.25em; color: var(--muted); }
.tv-how__dots { display: flex; gap: 0.5em; }
.tv-how__dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgba(255, 244, 222, 0.25); transition: all 0.25s ease; }
.tv-how__dots i.is-on { width: 2em; border-radius: 1em; background: var(--a); }
.tv-how__arr {
  position: absolute; top: 50%; width: 3.6em; height: 3.6em; margin-top: -1.8em; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 244, 222, 0.08); color: var(--ivory); transition: opacity 0.2s ease;
}
.tv-how__arr svg { width: 1.8em; height: 1.8em; }
.tv-how__arr--l { left: 2em; }
.tv-how__arr--r { right: 2em; transform: scaleX(-1); }
.tv-how.is-first .tv-how__arr--l, .tv-how.is-last .tv-how__arr--r { opacity: 0.15; }
.is-in-r { animation: tvHowR 0.35s ease both; }
.is-in-l { animation: tvHowL 0.35s ease both; }
@keyframes tvHowR { from { opacity: 0; transform: translateX(3em); } to { opacity: 1; transform: none; } }
@keyframes tvHowL { from { opacity: 0; transform: translateX(-3em); } to { opacity: 1; transform: none; } }

.tv-gbuy { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(7, 7, 6, 0.78); }
.tv-gbuy__card {
  width: 62em; padding: 3em 3.4em; border-radius: 1.8em;
  background: linear-gradient(120deg, rgba(42, 36, 29, 0.98), rgba(21, 18, 15, 0.98));
  border: 0.1em solid rgba(212, 161, 75, 0.35);
}
.tv-gbuy__card h2 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 3em; line-height: 1.1; margin-bottom: 0.4em; }
.tv-gbuy__card p { font-size: 1.4em; line-height: 1.5; color: var(--muted); }
.tv-gbuy__msg { color: #ff9b7a !important; min-height: 1.5em; margin-top: 0.6em !important; }

/* ---------- Статьи ---------- */
.tv-grid--arts { grid-template-columns: repeat(auto-fill, 31em); gap: 2.8em 2.2em; }
.tv-acard__pic { aspect-ratio: 16 / 9; }
.tv-acard__txt { display: flex; flex-direction: column; gap: 0.45em; width: 100%; }
.tv-acard b {
  font-size: 1.45em; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-acard em {
  font-style: normal; font-size: 1.1em; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-acard small { font-size: 1em; color: rgba(248, 180, 90, 0.85); }
.tv-acard.is-f b { color: #fff; }
.tv-readscr { overflow: hidden; }
.tv-read { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding: 4.5em 0 12em; }
.tv-read::-webkit-scrollbar { display: none; }
.tv-read__art { width: min(66em, calc(100% - 10em)); margin: 0 auto; }
.tv-read__cover { margin: 0 0 2.4em; border-radius: 1.4em; overflow: hidden; max-height: 34em; }
.tv-read__cover img { width: 100%; max-height: 34em; object-fit: cover; display: block; }
.tv-read h1 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 4.2em; line-height: 1.1; }
.tv-read__meta { font-size: 1.35em; color: var(--muted); margin: 0.8em 0 2em !important; }
.tv-read__body { font-size: 2em; line-height: 1.62; color: #f3e7cf; }
.tv-read__body p { margin: 0 0 0.85em; }
.tv-read__body h2 { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1.5em; line-height: 1.2; margin: 1.2em 0 0.5em; color: #fff3dc; }
.tv-read__body figure { margin: 1em 0 1.2em; }
.tv-read__body figure img { max-width: 100%; max-height: 18em; border-radius: 0.6em; display: block; margin: 0 auto; }
.tv-read__body blockquote { margin: 0 0 0.85em; padding-left: 0.9em; border-left: 0.15em solid var(--a); color: var(--ivory); font-style: italic; }
.tv-read__body hr { border: 0; height: 0.06em; background: rgba(212, 161, 75, 0.35); margin: 1.2em 0; }
.tv-read__end { font-size: 1.3em; color: var(--muted); text-align: center; margin-top: 3em !important; }
.tv-read__rail { position: absolute; right: 2.4em; top: 6em; bottom: 6em; width: 0.4em; border-radius: 1em; background: rgba(255, 244, 222, 0.1); }
.tv-read__rail i { display: block; width: 100%; height: var(--rp, 0%); border-radius: inherit; background: linear-gradient(180deg, var(--a2), var(--a)); }
.tv-read__hint {
  position: absolute; right: 4em; bottom: 2.4em;
  display: flex; align-items: center; gap: 0.6em;
  font-size: 1.2em; padding: 0.6em 1.1em; border-radius: 99em;
  background: rgba(21, 18, 15, 0.92); border: 0.08em solid rgba(212, 161, 75, 0.35); color: var(--muted);
}
.tv-read__hint span { display: inline-flex; color: var(--a2); }
.tv-read__hint svg { width: 1.4em; height: 1.4em; }

/* ---------- уведомление ---------- */
.tv-toast {
  position: absolute; left: 50%; bottom: 3.5em; z-index: 10;
  transform: translate(-50%, 1em);
  font-size: 1.45em; font-weight: 600;
  padding: 0.9em 1.6em; border-radius: 1em;
  background: rgba(21, 18, 15, 0.95);
  border: 0.08em solid rgba(212, 161, 75, 0.4);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 70%;
  text-align: center;
}
.tv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .tv *, .tv *::before, .tv *::after { animation: none !important; transition: none !important; }
}

/* ---------- телефон: подтверждение входа на телевизоре ---------- */
.tvl {
  position: fixed; inset: 0; z-index: 2147483600;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(7, 7, 6, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.tvl__card {
  width: 100%; max-width: 420px;
  padding: 24px 22px 20px;
  border-radius: 20px;
  background: #15120f;
  border: 1px solid rgba(212, 161, 75, 0.3);
  color: #f6e6c5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.tvl__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #f8b45a; font-weight: 700; margin-bottom: 14px; }
.tvl__brand img { width: 30px; height: 30px; }
.tvl__card h2 { font-size: 22px; line-height: 1.25; margin: 0 0 10px; color: #fff3dc; }
.tvl__card p { font-size: 15px; line-height: 1.5; margin: 0 0 14px; color: #beb096; }
.tvl__card p b { color: #f6e6c5; }
.tvl__code {
  display: block; width: 100%;
  font: 800 32px/1.2 ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.24em; text-align: center; text-transform: uppercase;
  padding: 12px 8px; margin: 4px 0 12px;
  border-radius: 12px; border: 1px solid rgba(212, 161, 75, 0.45);
  background: #0b0a08; color: #fff3dc;
}
.tvl__code:focus { outline: 2px solid #f28a2d; outline-offset: 1px; }
.tvl__msg { font-size: 14px !important; color: #9fd7a8 !important; }
.tvl__msg.is-err { color: #ff9b7a !important; }
.tvl__btn {
  display: block; width: 100%;
  font: 650 16px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 15px 16px; margin-top: 10px;
  border-radius: 12px; border: 1px solid rgba(212, 161, 75, 0.3);
  background: transparent; color: #f6e6c5; cursor: pointer;
}
.tvl__btn--cta { border: 0; background: linear-gradient(135deg, #f8b45a, #f28a2d 50%, #e65f1e); color: #160d04; }
.tvl__btn:disabled { opacity: 0.6; }
.tvl__note { font-size: 12.5px !important; margin: 14px 0 0 !important; color: #948873 !important; }
.tvl__ok { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 800; background: rgba(120, 200, 140, 0.15); color: #9fd7a8; }