/* ═══════════════════════════════════════════════════════════════════════════════════
   СТИЛИ ЛИГ ДЛЯ «НЕБА» (игра, этап 2 «15 лиг», 12.10.2026, правка ревью).
   Раньше светлый блок vl-* был дописан РУКАМИ в хвост static/css/sky_light.css — файла-генерации (_tools/build_sky_light.py):
   следующая сборка стёрла бы его. Генератора в репозитории нет, поэтому блок вынесен сюда и подключён в base.html СРАЗУ ПОСЛЕ
   sky_light.css (светлые правила обязаны идти последними: они перебивают тёмные правила vv-sky-glass с !important).
   Основная раскладка лиг (vl-*, окно повышения) живёт в premium.css, блок «ИГРА, ЭТАП 2». Здесь только цвета на стекле:
     1) светлое стекло днём:   html.vv-sky-live.vv-sky-glass.vv-sky-light
     2) тёмное стекло / ночь:  html.vv-sky-live.vv-sky-glass:not(.vv-sky-light)
   Рисуется только когда сервер прислал `league` в /api/game/me; выключено — этих блоков в разметке нет.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. светлое стекло ── */
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-pick { background: rgba(35,48,42,.07); }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-bar,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-dots i { background: rgba(35,48,42,.12); }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-dots i.is-on { background: #0A6139; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-quiet { background: rgba(10,97,57,.10); color: var(--ink); }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-hero-s,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-path-fast,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-path-fc,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-pick-a,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-shadow-t,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-rules-l { color: var(--ink) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-path.is-met .vl-path-t,
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-shadow-d.is-up { color: #0A6139 !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-lad-st.is-cur { box-shadow: inset 0 0 0 2px #0A6139; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-seal { border-color: #0A6139; }

/* ── 2. тёмное стекло («небо» без vv-sky-light, ночь) ──
   Замер по снимку 390×844 (12.10.2026, учётка 9066, ночное небо): все подписи вкладки «Лига» от 8:1 и выше, кроме тихой строки
   «Лига качается…» (4,4:1 при 13,5 px: фон строки — прозрачный зелёный прямо на небе) и мелкой подписи лиги у имени (12 px). Поэтому:
   тихая строка получает тёмную подложку и зелёную черту слева (спокойно, без значка тревоги), подпись лиги — светлее и чуть крупнее,
   в своей строке «Рядом с тобой» — белая и жирнее. */
html.vv-theme-night #screen-game .vl-quiet,
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) #screen-game .vl-quiet { background: rgba(14,28,30,.70); box-shadow: inset 3px 0 0 #7FE9BC; color: #E9F1EC; }
html.vv-theme-night .vl-tag,
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-tag { color: #DDE5DF; font-size: 12.5px; }
html.vv-theme-night .vl-nb.is-me .vl-tag,
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-nb.is-me .vl-tag { color: #FFFFFF; font-weight: 800; }

/* ── 3. ВЕРХ ВКЛАДКИ «СЕРИЯ»: компактная строка с щитом и лист с каруселью всех 15 лиг (12–13.10.2026, слова владельца) ──
   Разметку рисует vv_game.js (lgTopHtml — строка, lgSheetOpen — лист); пока этап 2 выключен, её нет. Лист — общий `.vv-sheet-card` приложения,
   поэтому правила карусели `.vlt-*` не привязаны к #screen-game. Живой (двигается) щит в строке и в центре карусели: это делает модуль
   vv_leagues.js, при «уменьшить движение» его анимации гасит сам модуль, здесь отключаются ещё и переходы. Цвета — переменные карточки/листа
   (день / ночь / «небо»). */
.vlt { padding: 4px 0 0; overflow: hidden; }
.vlt-stage { position: relative; padding: 0 38px; }
.vlt-track { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 16px 0 18px; outline: none; touch-action: pan-x pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.vlt-track::-webkit-scrollbar { display: none; }
.vlt-track::before, .vlt-track::after { content: ''; flex: none; width: calc(50% - 59px); }
.vlt-slide { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; flex: none; width: 118px; display: grid; place-items: center;
  scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 16px; }
.vlt-slide:focus-visible { outline: 2px solid var(--vv-green, #2E9E5B); outline-offset: 2px; }
.vlt-fig { position: relative; display: block; width: 144px; height: 173px; transform: scale(.66); transform-origin: 50% 62%;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s, filter .28s; }
.vlt-slide.is-center .vlt-fig { transform: scale(1); }
.vlt-ic { display: block; width: 144px; height: 173px; }
.vlt-ic svg { display: block; width: 144px; height: 173px; overflow: visible; }
/* будущие лиги слегка приглушены, но полностью видны; в центре любая лига показана без приглушения */
.vlt-slide.is-far:not(.is-center) .vlt-fig { opacity: .66; filter: saturate(.62); }
.vlt-mark { position: absolute; right: -2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vv-green-dark, #177652); color: #fff; box-shadow: 0 0 0 2px var(--paper, #fff); }
.vlt-mark svg { display: block; width: 15px; height: 15px; }
.vlt-slide.is-cur .vlt-fig::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -9px; height: 8px; border-radius: 50%;
  border: 2px solid var(--vv-green-dark, #177652); opacity: .9; }
.vlt-nav { position: absolute; top: calc(50% - 4px); transform: translateY(-50%); z-index: 2; width: 36px; height: 44px; border-radius: 50%; appearance: none; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line-soft, rgba(0,0,0,.12)); background: color-mix(in srgb, var(--paper, #fff) 86%, transparent); color: var(--ink, #22302A); font: inherit; font-size: 28px; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.vlt-nav span { display: block; transform: translateY(-2px); }
.vlt-nav.is-prev { left: 0; }
.vlt-nav.is-next { right: 0; }
.vlt-nav:disabled { opacity: .3; cursor: default; }
.vlt-nav:focus-visible { outline: 2px solid var(--vv-green, #2E9E5B); outline-offset: 2px; }
.vlt-dots { display: flex; justify-content: center; margin: 0 4px; }
.vlt-dot { appearance: none; border: 0; background: none; padding: 0; margin: 0; flex: 1 1 0; max-width: 24px; height: 28px; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vlt-dot i { display: block; width: 7px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink, #22302A) 24%, transparent); transition: width .2s, background .2s; }
.vlt-dot.is-done i { background: color-mix(in srgb, var(--vv-green-dark, #177652) 62%, transparent); }
.vlt-dot.is-cur i { box-shadow: 0 0 0 2px color-mix(in srgb, var(--vv-green-dark, #177652) 55%, transparent); }
.vlt-dot.is-sel i { width: 18px; background: var(--ink, #22302A); }
.vlt-dot:focus-visible { outline: 2px solid var(--vv-green, #2E9E5B); outline-offset: 0; border-radius: 6px; }
.vlt-info { text-align: center; padding: 6px 10px 0; }
.vlt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 26px; }
.vlt-chips:empty { display: none; }
.vlt-chip { font-size: 12px; font-weight: 800; line-height: 1; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #22302A) 9%, transparent); color: var(--ink, #22302A); }
.vlt-chip.is-cur { background: var(--vv-green-dark, #177652); color: #fff; }
.vlt-chip.is-done { background: color-mix(in srgb, var(--vv-green-dark, #177652) 14%, transparent); color: var(--vv-green-dark, #177652); }
.vlt-chip.is-peak { background: #F6E3A6; color: #5E4300; }
.vlt-name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin-top: 8px; overflow-wrap: anywhere; }
.vlt-gap { font-size: 15px; font-weight: 700; line-height: 1.35; margin-top: 6px; }
.vlt-need { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2, var(--ink)); margin-top: 8px; }
.vlt-peak { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2, var(--ink)); }
.vlt-peak svg { display: block; width: 16px; height: 19px; flex: none; }
.vlt-open { appearance: none; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 800; color: var(--vv-green-dark, #177652); display: block; margin: 4px auto 0; min-height: 40px; padding: 0 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { .vlt-fig, .vlt-dot i { transition: none; } }
/* «Кто в лиге» под подписью листа (13.10.2026): топ-10 выбранной лиги и твоё место */
.vlt-who { margin: 14px 2px 4px; padding-top: 12px; border-top: 1px solid var(--line-soft, rgba(0,0,0,.1)); }
.vlt-who-h { font-size: 15px; font-weight: 800; color: var(--ink, #22302A); }
.vlt-who-h span { font-weight: 600; color: var(--ink-2, var(--ink)); }
.vlt-who-s { font-size: 12.5px; line-height: 1.4; color: var(--ink-2, var(--ink)); margin-top: 2px; }
.vlt-who-list { list-style: none; margin: 8px 0 0; padding: 0; }
.vlt-who-r { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 12px; }
.vlt-who-r .vg-rank { flex: none; width: 22px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2, var(--ink)); }
.vlt-who-r .vg-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #22302A); }
.vlt-who-r .vg-pts { flex: none; font-variant-numeric: tabular-nums; color: var(--ink, #22302A); }
.vlt-who-r.is-me { background: color-mix(in srgb, var(--vv-green-dark, #177652) 12%, transparent); }
.vlt-who-r.is-me .vg-name { font-weight: 800; }
.vlt-who-gap { text-align: center; color: var(--ink-2, var(--ink)); line-height: 1; padding: 2px 0; }

/* свёрнутая строка: небольшой щит, название и шеврон; вся строка — одна кнопка */
#screen-game .vlt-row { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; color: inherit;
  padding: 10px 14px 10px 12px; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#screen-game .vlt-row:focus-visible { outline: 2px solid var(--vv-green, #2E9E5B); outline-offset: 2px; }
#screen-game .vlt-row-ic { flex: none; display: block; width: 80px; height: 96px; }
#screen-game .vlt-row-ic svg { display: block; width: 80px; height: 96px; overflow: visible; }
#screen-game .vlt-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#screen-game .vlt-row-t { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; color: var(--ink, #22302A); }
#screen-game .vlt-row-s { font-size: 13.5px; line-height: 1.4; color: var(--ink-2, var(--ink)); }
#screen-game .vlt-row-go { flex: none; font-size: 30px; line-height: 1; color: var(--ink-2, var(--ink)); }
/* лист: полоса под ручкой и шапкой уже есть у .vv-sheet-card; карусель ровно по ширине листа */
.vlt-sheet-card { outline: none; }
.vlt-sheet-card .vv-sheet-head { padding: 0 2px; }

/* ── 4. КАРТОЧКА ПУТИ «ЛИГИ ПО ОПОРАМ» (13.10.2026, слова владельца «должна быть логика влияния по показателям здоровья, трекания еды, шагов»): вместо одной полосы очков —
   по строке на каждое дело недели (еда, хорошая еда, движение, сон или овощи) с точкой на каждый нужный день, отдельно корзина и доля хорошей еды.
   Разметку рисует vv_game.js (lgPathHtml). Точки и полоса переиспользуют .vl-dots / .vl-bar из premium.css (там же их цвета на ночном стекле). ── */
#screen-game .vl-pils { display: grid; gap: 12px; margin: 14px 0 8px; }
#screen-game .vl-pil { display: grid; gap: 6px; }
#screen-game .vl-pil-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.25; }
#screen-game .vl-pil-h span { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
#screen-game .vl-pil-h b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2, var(--ink)); }
#screen-game .vl-pil.is-ok .vl-pil-h b { color: var(--vv-green-dark, #1F6B45); }
/* дело, которое для следующей лиги брать не обязательно (хватит других): чуть тише, но читается */
#screen-game .vl-pil.is-spare { opacity: .72; }
#screen-game .vl-pil .vl-dots i { max-width: none; height: 9px; }
#screen-game .vl-pil .vl-bar { height: 9px; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-pil-h span { color: var(--ink) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-pil-h b { color: var(--ink-2, var(--ink)) !important; }
html.vv-sky-live.vv-sky-glass.vv-sky-light .vl-pil.is-ok .vl-pil-h b { color: #0A6139 !important; }
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-pil-h span { color: #F3F7F4; }
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-pil-h b { color: #DDE5DF; }
html.vv-sky-live.vv-sky-glass:not(.vv-sky-light) .vl-pil.is-ok .vl-pil-h b { color: #7FE9BC; }