/* ============================================================
   ТВ-табло расписания (?tv=1)
   Минимализм: тёмный фон, типографика, один акцентный цвет —
   красный, и только для групп, где мест нет.
   Всё табло масштабируется от --fs, который подбирает tv.js,
   поэтому внутренние размеры заданы в em.
   ============================================================ */
:root {
  --ink-0: #0A0C11;
  --ink-1: #12161E;
  --tx-1: #F3F6FA;                       /* основной текст */
  --tx-2: rgba(243, 246, 250, .58);      /* второстепенный */
  --tx-3: rgba(243, 246, 250, .34);      /* подписи */
  --line: rgba(255, 255, 255, .09);
  --accent: #FF6A5C;                     /* единственный цвет на экране */
  --font-head: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body.tv-mode {
  margin: 0; height: 100vh; overflow: hidden; cursor: none;
  display: flex; flex-direction: column;
  font-family: var(--font-body); color: var(--tx-1);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
}

.tv-bg { position: fixed; inset: 0; z-index: -1; }
.tv-bg::before {                          /* мягкий свет сверху и виньетка */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -25%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 55%);
}

/* ============================ ШАПКА ============================ */
.tv-head {
  flex: none; display: flex; align-items: flex-end; gap: 3vw;
  padding: 3.2vh 3vw 1.8vh; border-bottom: 1px solid var(--line);
}
.tv-brand { display: flex; align-items: center; gap: 1vw; min-width: 0; }
.tv-logo { width: 3.4vh; height: 3.4vh; flex: none; opacity: .9; }
.tv-logo svg { width: 100%; height: 100%; }
.tv-brand b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(17px, 1.7vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: #fff;
}
.tv-brand i {
  display: block; margin-top: .45em; font-style: normal; font-weight: 600;
  font-size: clamp(10px, .78vw, 16px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3);
}

.tv-stats { display: flex; align-items: baseline; gap: 1.8vw; margin-left: auto; }
.tv-stat {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-size: clamp(10px, .78vw, 16px); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3); white-space: nowrap;
}
.tv-stat b {
  font-family: var(--font-head); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(16px, 1.5vw, 30px); color: var(--tx-1); font-variant-numeric: tabular-nums;
}
.tv-stat.no b { color: var(--accent); }

.tv-clock { text-align: right; flex: none; }
.tv-clock b {
  display: block; font-family: var(--font-head); font-weight: 300;
  font-size: clamp(26px, 2.9vw, 58px); line-height: .95; letter-spacing: -.03em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.tv-clock span {
  display: block; margin-top: .5em; font-weight: 600;
  font-size: clamp(10px, .78vw, 16px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
}

/* ============================ ТАБЛО ============================ */
.tv-board { position: relative; flex: 1; min-height: 0; margin: 2.2vh 3vw 0; font-size: var(--fs, 16px); }
.tv-page {
  position: absolute; inset: 0; display: flex; gap: 2em; align-items: flex-start;
  opacity: 0; visibility: hidden; transform: translateY(.4em);
  transition: opacity .6s ease, transform .6s ease;
}
.tv-page.on { opacity: 1; visibility: visible; transform: none; }
.tv-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.3em; }

/* --------- направление --------- */
.tvc { padding-top: .6em; border-top: 1px solid var(--line); }
.tvc-head { display: flex; align-items: baseline; gap: .6em; margin-bottom: .45em; }
.tvc-head h3 {
  margin: 0; font-family: var(--font-head); font-weight: 500;
  font-size: .96em; line-height: 1.25; letter-spacing: -.01em; color: #fff;
}
.tvc-cnt {
  margin-left: auto; flex: none; white-space: nowrap;
  font-size: .62em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3);
}
.tvc-cnt.no { color: var(--accent); }
.tvc.is-closed .tvc-head h3 { color: var(--tx-2); }

/* --------- строка группы: код | возраст | дни и время --------- */
/* Линия слева проходит через всю строку: если время переносится на вторую
   строку, сразу видно, что она относится к той же группе. */
.tvg {
  display: grid; grid-template-columns: 3.6em 4.9em 1fr;
  align-items: baseline; column-gap: .8em; row-gap: 0;
  padding: .2em 0 .2em .6em; font-size: .84em; line-height: 1.45;
  border-left: 1px solid var(--line);
}
.tvg + .tvg { margin-top: .22em; }
.tvg-code { font-weight: 700; color: var(--tx-1); white-space: nowrap; }
.tvg-age { color: var(--tx-3); font-weight: 500; white-space: nowrap; }
.tvg-slots { display: flex; flex-wrap: wrap; column-gap: 1.1em; }
.tvg-slot { display: inline-flex; align-items: baseline; gap: .55em; white-space: nowrap; }
.tvg-slot .dd { display: inline-flex; gap: .4em; min-width: 3.3em; font-style: normal; }
.tvg-slot .d { font-style: normal; font-weight: 600; color: var(--tx-3); letter-spacing: .03em; }
.tvg-slot b { font-weight: 500; color: var(--tx-2); font-variant-numeric: tabular-nums; }

/* занятая группа: остаётся на табло, но гаснет и зачёркивается красным */
.tvg.is-full {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(255, 106, 92, .08), transparent 70%);
}
.tvg.is-full .tvg-code {
  color: var(--accent); text-decoration: line-through;
  text-decoration-thickness: .07em; text-underline-offset: .1em;
}
.tvg.is-full .tvg-age,
.tvg.is-full .tvg-slot .d,
.tvg.is-full .tvg-slot b { color: rgba(243, 246, 250, .28); }

/* только что изменилось — тихо подсвечиваем */
@keyframes tvFlash {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(255, 255, 255, .10); }
}
.tvg.changed { animation: tvFlash 2s ease-in-out 4; }

.tv-empty { display: grid; place-content: center; height: 100%; font-size: 1.4em; color: var(--tx-3); }
.tv-measure { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }

/* ============================ ПОДВАЛ ============================ */
.tv-foot { flex: none; padding: 1.8vh 3vw 2.4vh; }
.tv-foot-top {
  display: flex; align-items: center; gap: 2.4vw;
  padding-top: 1.6vh; border-top: 1px solid var(--line);
  font-size: clamp(10px, .76vw, 16px); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
}
.tv-legend { display: flex; align-items: center; gap: 2vw; }
.tv-legend span { display: inline-flex; align-items: center; gap: .7em; }
.tv-legend i.sw { width: 1px; height: 1.15em; flex: none; background: currentColor; }
.tv-legend i.sw.no { background: var(--accent); }
.tv-legend s { color: var(--accent); text-decoration-thickness: .07em; }

.tv-pages { display: flex; gap: .55em; margin: 0 auto; }
.tv-page-dot { width: 1.7em; height: 2px; background: rgba(255, 255, 255, .16); transition: background .4s; }
.tv-page-dot.on { background: var(--tx-1); }

.tv-live { display: inline-flex; align-items: center; gap: .7em; white-space: nowrap; }
.tv-live::before {
  content: ''; width: .45em; height: .45em; border-radius: 50%; background: var(--tx-2);
  animation: tvPulse 3s ease-in-out infinite;
}
@keyframes tvPulse { 0%, 100% { opacity: .85; } 50% { opacity: .2; } }
.tv-live.err { color: var(--accent); }
.tv-live.err::before { background: var(--accent); animation: none; }

.tv-ticker { overflow: hidden; margin-top: 1.4vh; }
.tv-ticker-track {
  display: inline-block; white-space: nowrap; font-weight: 600;
  font-size: clamp(11px, .86vw, 18px); letter-spacing: .06em; color: var(--tx-3);
  padding-left: 100%; animation: tvMarquee 48s linear infinite;
}
@keyframes tvMarquee { to { transform: translateX(-100%); } }

/* На телефоне/планшете — обычная прокрутка, без подгонки под экран */
@media (max-width: 900px) {
  body.tv-mode { height: auto; overflow: auto; cursor: auto; }
  .tv-head { flex-wrap: wrap; gap: 14px; align-items: center; }
  .tv-stats { margin-left: 0; }
  .tv-board { font-size: 15px; margin: 18px 16px 0; }
  .tv-page { position: static; display: block; visibility: visible; opacity: 1; transform: none; }
  .tv-page:not(.on) { display: none; }
  .tv-col { display: block; }
  .tvc { margin-bottom: 18px; }
  .tvg-slots { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-ticker-track, .tvg.changed, .tv-live::before { animation: none; }
}