/* GRIPLINE TV (/tv): башня тайминга, карта трассы и панель пилота в духе F1 TV. Всегда тёмная, как живой тайминг. */
.gl-tv-page { gap: 0; }
.tv { --tv-bg: #0a0b0e; --tv-bg2: #121419; --tv-bg3: #181b22; --tv-line: rgba(255, 255, 255, .07); --tv-mute: #8a93a3;
  --tv-row: 40px; --tv-green: #2fd27a; --tv-purple: #b14bff; --tv-yellow: #ffd23f;
  background: var(--tv-bg); color: #fff; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28); font-variant-numeric: tabular-nums; }
.tv [hidden] { display: none !important; }

.tv-head { display: flex; align-items: center; gap: 20px; padding: 12px 18px; flex-wrap: wrap;
  background: linear-gradient(100deg, #050506 0 60%, #1a0607); border-bottom: 3px solid var(--acc, #e8202a); }
.tv-brand { display: flex; align-items: baseline; gap: 6px; font-style: italic; font-weight: 900; letter-spacing: .02em; flex: none; }
.tv-brand b { font-size: 1.15rem; }
.tv-brand span { background: var(--acc, #e8202a); padding: 2px 8px; border-radius: 3px; font-size: .9rem; letter-spacing: .12em; }
.tv-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 4px; background: rgba(232, 32, 42, .18);
  color: #ff6b70; font-size: .7rem; font-weight: 900; letter-spacing: .18em; }
.tv-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tv-blink 1.3s infinite; }
@keyframes tv-blink { 50% { opacity: .25; } }
.tv-ev { flex: 1 1 220px; min-width: 0; }
.tv-ev b { display: block; font-size: 1.05rem; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-ev small, .tv-sess small, .tv-laps small { display: block; color: var(--tv-mute); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tv-sess, .tv-laps { text-align: right; }
.tv-sess b, .tv-laps b { font-size: 1.35rem; font-weight: 900; }
.tv-laps b i { font-style: normal; color: var(--tv-mute); font-size: .95rem; }

.tv-flag { padding: 8px 18px; font-weight: 900; letter-spacing: .14em; text-align: center; color: #111; background: var(--tv-yellow); }
.tv-flag.red { background: #e8202a; color: #fff; }
.tv-flag.green { background: var(--tv-green); }
.tv-flag.sc, .tv-flag.vsc { background: #ffb020; }

.tv-wait { display: grid; gap: 8px; padding: 46px 22px; text-align: center; color: var(--tv-mute); }
.tv-wait b { color: #fff; font-size: 1.15rem; }

.tv-grid { display: grid; grid-template-columns: minmax(420px, 540px) minmax(0, 1fr); }
.tv-tower { border-right: 1px solid var(--tv-line); background: var(--tv-bg); min-width: 0; }
.tv-tower-mode { display: flex; gap: 4px; padding: 10px 12px 6px; }
.tv-tower-mode button { flex: 1; padding: 6px 8px; border: 1px solid var(--tv-line); border-radius: 5px; background: var(--tv-bg2);
  color: var(--tv-mute); font: inherit; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.tv-tower-mode button.on { color: #fff; border-color: var(--acc, #e8202a); background: rgba(232, 32, 42, .14); }
.tv-cols, .tv-row { display: grid; grid-template-columns: 26px 4px minmax(0, 1fr) 58px 68px 68px 20px; align-items: center; gap: 0 8px; padding: 0 12px; }
.tv-cols { height: 26px; color: var(--tv-mute); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tv-cols span:nth-child(n+4) { text-align: right; }
.tv-rows { position: relative; }
.tv-row { position: absolute; left: 0; right: 0; top: 0; height: var(--tv-row); cursor: pointer; border-bottom: 1px solid var(--tv-line);
  transition: transform .65s cubic-bezier(.3, .7, .2, 1), opacity .6s, background-color .4s; will-change: transform; font-size: .84rem; }
.tv-row:nth-child(odd) { background-color: rgba(255, 255, 255, .012); }
.tv-row:hover { background-color: rgba(255, 255, 255, .05); }
.tv-row.sel { background-color: rgba(232, 32, 42, .16); box-shadow: inset 3px 0 0 var(--acc, #e8202a); }
.tv-row.gone { opacity: 0; pointer-events: none; }
.tv-row.stale .tv-who, .tv-row.stale .tv-g { opacity: .5; }
.tv-row.up .tv-p { animation: tv-up 1.6s; }
.tv-row.down .tv-p { animation: tv-down 1.6s; }
@keyframes tv-up { 0%, 40% { color: var(--tv-green); } }
@keyframes tv-down { 0%, 40% { color: #ff5a5f; } }
.tv-p { font-weight: 900; text-align: center; font-size: .95rem; }
.tv-cls { height: 24px; border-radius: 2px; background: #888; }
.tv-who { display: flex; align-items: center; gap: 8px; min-width: 0; transition: opacity .6s; }
.tv-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tv-bg3); }
.tv-av-txt { display: inline-grid; place-items: center; font-size: .62rem; font-weight: 800; color: var(--tv-mute); }
.tv-num { color: var(--tv-mute); font-size: .74rem; font-weight: 700; flex: none; min-width: 26px; }
.tv-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; text-transform: uppercase; }
.tv-nm i { font-style: normal; font-weight: 500; text-transform: none; color: #c9d0db; }
.tv-g, .tv-last, .tv-best { text-align: right; font-weight: 700; transition: opacity .6s; }
.tv-g.close { color: var(--tv-green); }
.tv-last.inv { color: #ff5a5f; text-decoration: line-through; }
.tv-best { color: #c9d0db; }
.tv-best.purple, .tv-sec td.purple { color: var(--tv-purple); }
.tv-pit { text-align: center; color: var(--tv-mute); font-size: .76rem; }
.tv-tag { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: .6rem; font-weight: 900; letter-spacing: .06em; flex: none; }
.tv-tag.pit { background: #fff; color: #111; }
.tv-tag.fin { background: #fff; color: #111; background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .18) 3px 6px); }
.tv-tag.off { background: #3a3f4a; color: #c9d0db; }

.tv-side { display: grid; grid-template-rows: auto auto; align-content: start; min-width: 0; }
.tv-map { position: relative; padding: 10px 14px; border-bottom: 1px solid var(--tv-line);
  background: radial-gradient(120% 90% at 50% 40%, #13161d, var(--tv-bg) 70%); }
.tv-map svg { display: block; width: 100%; height: auto; max-height: 56vh; aspect-ratio: 10 / 7; }
.tv-track-b { fill: none; stroke: #2a2f3a; stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; }
.tv-track { fill: none; stroke: #6c7486; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.tv-start { fill: #fff; stroke: #0a0b0e; stroke-width: 3; }
.tv-dot { cursor: pointer; transition: opacity .5s; }
.tv-dot circle { stroke: #0a0b0e; stroke-width: 2.5; }
.tv-dot text { fill: #fff; font-size: 17px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: #0a0b0e; stroke-width: 4px; pointer-events: none; }
.tv-dot.pit { opacity: .55; }
.tv-dot.stale { opacity: .4; }
.tv-dot.hide { opacity: 0; }
.tv-dot.sel circle { stroke: #fff; stroke-width: 4; }
.tv-map-empty { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: var(--tv-mute); font-size: .8rem; }

.tv-drv { padding: 14px 16px 18px; display: grid; gap: 14px; }
.tv-drv-top { display: flex; align-items: center; gap: 12px; }
.tv-drv-av .tv-av { width: 54px; height: 54px; font-size: .9rem; }
.tv-drv-nm { flex: 1; min-width: 0; }
.tv-drv-nm small { color: var(--tv-mute); font-weight: 800; }
.tv-drv-nm b { display: block; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-drv-nm span { display: block; color: var(--tv-mute); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-drv-pos { text-align: center; background: var(--tv-bg3); border-radius: 6px; padding: 4px 12px; }
.tv-drv-pos small { color: var(--tv-mute); font-size: .66rem; font-weight: 800; }
.tv-drv-pos b { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1; }
.tv-drv-speed, .tv-drv-cur, .tv-drv-laps, .tv-drv-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.tv-drv-speed > div, .tv-drv-cur > div, .tv-drv-laps > div, .tv-drv-gaps > div { background: var(--tv-bg2); border: 1px solid var(--tv-line); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.tv-drv small { display: block; color: var(--tv-mute); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.tv-drv-speed b { display: block; font-size: 2rem; font-weight: 900; line-height: 1.05; }
.tv-drv-cur b, .tv-drv-laps b, .tv-drv-gaps b { display: block; font-size: 1.15rem; font-weight: 800; }
.tv-drv-gaps span { display: block; color: var(--tv-mute); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
b.tv-pos-d { color: #ff5a5f; }
b.tv-neg-d { color: var(--tv-green); }
.tv-sec { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tv-sec th, .tv-sec td { padding: 5px 6px; border-bottom: 1px solid var(--tv-line); text-align: right; font-weight: 700; }
.tv-sec thead th { color: var(--tv-mute); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.tv-sec tbody th { text-align: left; color: var(--tv-mute); font-weight: 600; }
.tv-sec td.faster { color: var(--tv-green); }
.tv-sec td.slower { color: var(--tv-yellow); }

@media (max-width: 1100px) {
  .tv-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-tower { border-right: 0; border-top: 1px solid var(--tv-line); order: 2; }
  .tv-side { order: 1; }
}
@media (max-width: 560px) {
  .tv-head { gap: 10px 14px; padding: 10px 12px; }
  .tv-ev { flex-basis: 100%; order: 3; }
  .tv-cols, .tv-row { grid-template-columns: 24px 4px minmax(0, 1fr) 66px 20px; padding: 0 8px; gap: 0 6px; }
  .tv-c-last, .tv-c-best, .tv-last, .tv-best { display: none; }
  .tv-num { display: none; }
  .tv-drv-speed b { font-size: 1.6rem; }
  .tv-map { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tv-row { transition: opacity .3s; } }