/* Afterfog v2 — оболонка ПК за напрямом E (лендінг E у продакшні з 25.10.2026): токени, рух, базові компоненти.
   Опис і точка підключення — docs/design-v2.md. Поточний вигляд (design.css + стилі сторінок) цей файл не змінює:
   УСІ правила — лише під класом ui-v2 на <html> і лише від 1200 px (рішення aYo 25.10: v2 — ПК від 1200 px, нижче й на телефоні — нинішній сайт).
   Клас ставить сервер (прапорець AFTERFOG_UI_V2 / кука перегляду ?ui=v2 — робить dev2), рух — web/src/motion.ts (initMotion).
   Пресети руху: data-motion="calm|medium|vivid" на <html> (без атрибута — medium); prefers-reduced-motion — розділ «Без руху» внизу. */

@media (min-width: 1200px) {

  /* ---------- Токени v2 ---------- */
  html.ui-v2 {
    /* кольори E — поверх базових з design.css (--bg, --text…, --good / --bad лишаються ті самі: блакитний — добре, помаранчевий — проблема) */
    --v2-surface: rgba(19, 24, 29, 0.94);       /* вікно / картка E */
    --v2-surface-2: rgba(27, 34, 41, 0.75);     /* рядок усередині картки («Головне») */
    --v2-glass: rgba(14, 17, 20, 0.72);         /* шапка: напівпрозора, з розмиттям */
    --v2-line: #2a343d;                         /* рамка картки */
    --v2-line-soft: #1f262d;
    --v2-line-hover: #4b7f9c;                   /* рамка під курсором */
    --v2-line-accent: #24404f;                  /* рамка пігулки / мітки */
    --v2-pill-bg: rgba(24, 37, 45, 0.75);
    --v2-toast-bg: rgba(24, 37, 45, 0.97);
    --v2-toast-line: #2f5367;
    --v2-grad-text: linear-gradient(90deg, #a9d2e6, #7fb8d6 60%, #d4ebf5);
    --v2-glow: rgba(127, 184, 214, 0.20);       /* світіння акценту (за вікнами E) */
    --v2-glow-warm: rgba(232, 160, 92, 0.13);
    --v2-dot: rgba(127, 184, 214, 0.10);        /* крапкова сітка 28 px */

    /* типографіка: Manrope — текст, Space Grotesk — цифри; розміри — як на лендінгу E */
    --v2-fs-display: 66px; --v2-lh-display: 1.04; --v2-ls-display: -0.03em;   /* заголовок лендінгу */
    --v2-fs-h1: 38px; --v2-lh-h1: 1.1; --v2-ls-h1: -0.02em;                   /* заголовок сторінки / секції */
    --v2-fs-h2: 28px; --v2-lh-h2: 1.15; --v2-ls-h2: -0.015em;
    --v2-fs-h3: 21px; --v2-lh-h3: 1.25; --v2-ls-h3: -0.01em;                  /* заголовок картки */
    --v2-fs-lead: 19px; --v2-lh-lead: 1.55;
    --v2-fs-body: 15px; --v2-lh-body: 1.5;
    --v2-fs-small: 13px;
    --v2-fs-label: 11.5px; --v2-ls-label: 0.05em;                             /* мітка ВЕЛИКИМИ */
    --v2-fs-num-xl: 54px; --v2-fs-num-l: 30px; --v2-fs-num-m: 22px;           /* цифри: оцінка, KPI, табло */

    /* відступи (крок 4 px) і ширина */
    --v2-sp-1: 4px; --v2-sp-2: 8px; --v2-sp-3: 12px; --v2-sp-4: 16px; --v2-sp-5: 20px; --v2-sp-6: 24px;
    --v2-sp-7: 32px; --v2-sp-8: 40px; --v2-sp-9: 56px; --v2-sp-10: 72px; --v2-sp-11: 96px;
    --v2-gutter: clamp(32px, 5vw, 96px);        /* поле сторінки: 96 px на 1920, як у E */
    --v2-max: 1440px;                           /* ширина вмісту */

    /* форми */
    --v2-r-card: 16px; --v2-r-btn: 12px; --v2-r-ctl: 10px; --v2-r-sm: 8px; --v2-r-pill: 999px;
    --v2-btn-h: 52px; --v2-btn-h-sm: 40px;

    /* тіні: 1 — картка в спокої, 2 — піднята / спливна, 3 — «вікно» E; акцентне світіння — головна кнопка */
    --v2-sh-1: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.25);
    --v2-sh-2: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px rgba(0, 0, 0, 0.5);
    --v2-sh-3: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --v2-sh-ring: 0 0 0 1px rgba(127, 184, 214, 0.35), 0 0 60px rgba(127, 184, 214, 0.18);
    --v2-sh-accent: 0 10px 32px rgba(127, 184, 214, 0.28);
    --v2-sh-accent-hover: 0 14px 40px rgba(127, 184, 214, 0.4);

    /* рух: тривалості (docs/research/redesign.md, 3.1) множаться на --m-k пресета */
    --dur-1: calc(120ms * var(--m-k));          /* колір, рамка, натискання */
    --dur-2: calc(200ms * var(--m-k));          /* вкладка, підказка, перемикач */
    --dur-3: calc(320ms * var(--m-k));          /* поява картки, розкриття панелі */
    --dur-4: calc(480ms * var(--m-k));          /* секція при прокрутці, перехід розділу */
    --dur-5: calc(1000ms * var(--m-k));         /* графік малюється, «туман розходиться» */
    --dur-out: calc(var(--dur-3) * 0.7);        /* зникнення — на 30 % коротше за появу */
    --ease-out: cubic-bezier(.2, .8, .2, 1);    /* усе, що з'являється */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);/* переміщення, перетікання (FLIP) */
    --ease-in: cubic-bezier(.4, 0, 1, 1);       /* зникнення */

    /* пресет «середньо» (рекомендація research) — типовий */
    --m-k: 1;            /* множник тривалостей */
    --m-shift: 12px;     /* зсув при появі */
    --m-scale: .98;      /* масштаб на старті появи */
    --m-blur: 0px;       /* розмиття на старті (лише великі елементи) */
    --m-stagger: 50ms;   /* сходинка між елементами групи */
    --m-lift: 2px;       /* підйом картки й кнопки під курсором */
    --m-spot: .09;       /* яскравість прожектора під курсором */
    --m-count: 900ms;    /* лічильник числа */
    --m-pulse: 2.2;      /* масштаб кільця-імпульсу */
    --m-parallax: .6;    /* сила паралаксу */
    --ease-spring: linear(0, .25 8%, .64 19%, .93 30%, 1.04 41%, 1.06 49%, 1.03 62%, 1 76%, .995 88%, 1);
  }
  html.ui-v2[data-motion="calm"] {
    --m-k: .8; --m-shift: 6px; --m-scale: .995; --m-blur: 0px; --m-stagger: 30ms; --m-lift: 1px; --m-spot: .05;
    --m-count: 600ms; --m-pulse: 1.6; --m-parallax: .3;
    --ease-spring: var(--ease-out);
  }
  html.ui-v2[data-motion="vivid"] {
    --m-k: 1.3; --m-shift: 22px; --m-scale: .94; --m-blur: 8px; --m-stagger: 75ms; --m-lift: 4px; --m-spot: .16;
    --m-count: 1300ms; --m-pulse: 3; --m-parallax: 1;
    --ease-spring: linear(0, .3 7%, .82 18%, 1.12 29%, 1.17 37%, 1.09 50%, .97 64%, 1.01 79%, .995 90%, 1);
  }

  /* ---------- Основа ---------- */
  html.ui-v2 { scroll-behavior: smooth; }
  html.ui-v2 body { text-rendering: optimizeLegibility; }
  html.ui-v2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; transition: outline-offset var(--dur-1) var(--ease-out); }
  html.ui-v2 .num, html.ui-v2 .v2-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

  /* ---------- Шапка: скло, липка; лого й шапка лишаються на місці при переході сторінок (view-transition-name) ---------- */
  html.ui-v2 .af-top { position: sticky; top: 0; background: var(--v2-glass); border-bottom-color: var(--v2-line-soft);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); view-transition-name: af-top; }
  html.ui-v2 .af-top-in { padding: 12px 24px; } /* поле як у меню сторінки матчу й профілю (24 px): лого над пунктами меню */
  /* «Помилка в перекладі?» і «Відгук» ✎ — у шапці (web/src/ui-v2.ts), кружки 40 px без підпису (назва — у підказці й aria-label), не плавають над текстом */
  html.ui-v2 .v2-top-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  html.ui-v2 .v2-top-tools ~ .af-user { margin-left: 0; }
  html.ui-v2 .v2-top-tools :is(.fb-open, .af-i18n-report) { position: static; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0;
    border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--muted); box-shadow: none; opacity: 1; transform: none; pointer-events: auto;
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .v2-top-tools :is(.fb-open, .af-i18n-report):hover { color: var(--text); border-color: var(--v2-line-hover); background: var(--accent-bg); }
  html.ui-v2 .v2-top-tools .fb-lbl, html.ui-v2 .v2-top-tools .af-i18n-lbl { display: none; }
  html.ui-v2 .v2-top-tools .af-i18n-ico { display: block; }
  html.ui-v2 .af-logo { view-transition-name: af-logo; }
  html.ui-v2 .af-search { background: rgba(19, 24, 29, 0.7); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .af-search:focus-within { box-shadow: 0 0 0 4px rgba(127, 184, 214, 0.12); }
  /* пункти меню: підкреслення під активним і під курсором (масштаб від центру) */
  html.ui-v2 .af-nav a { position: relative; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .af-nav a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--accent);
    transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
  html.ui-v2 .af-nav a:hover { background: transparent; }
  html.ui-v2 .af-nav a:hover::after { transform: scaleX(.5); }
  html.ui-v2 .af-nav a[aria-current=page] { background: transparent; }
  html.ui-v2 .af-nav a[aria-current=page]::after { transform: scaleX(1); }
  html.ui-v2 .af-me, html.ui-v2 .af-login { transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .af-menu { box-shadow: var(--v2-sh-2); transform-origin: 100% 0; animation: v2-pop var(--dur-2) var(--ease-out); }
  html.ui-v2 .af-me svg { transition: transform var(--dur-2) var(--ease-spring); }

  /* ---------- Кнопки ---------- */
  html.ui-v2 button, html.ui-v2 .btn { transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out); }
  html.ui-v2 button:active:not(:disabled), html.ui-v2 .btn:active { transform: scale(.98); }
  html.ui-v2 .v2-btn { display: inline-flex; align-items: center; gap: 10px; height: var(--v2-btn-h); padding: 0 26px; border-radius: var(--v2-r-btn);
    font: 700 16px/1 var(--font); border: 1px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; }
  html.ui-v2 .v2-btn:hover { transform: translateY(calc(-1 * var(--m-lift))); }
  html.ui-v2 .v2-btn:active { transform: translateY(0) scale(.98); }
  html.ui-v2 .v2-btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--v2-sh-accent); }
  html.ui-v2 .v2-btn.primary:hover { color: var(--on-accent); box-shadow: var(--v2-sh-accent-hover); }
  html.ui-v2 .v2-btn.ghost { background: rgba(19, 24, 29, 0.7); color: var(--text); border-color: var(--border-strong); }
  html.ui-v2 .v2-btn.ghost:hover { color: var(--text); background: var(--panel-2); }
  html.ui-v2 .v2-btn.sm { height: var(--v2-btn-h-sm); padding: 0 16px; font-size: 14px; border-radius: var(--v2-r-ctl); }
  html.ui-v2 .v2-btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-2) var(--ease-spring); }
  html.ui-v2 .v2-btn:hover svg.go { transform: translateX(3px); }

  /* ---------- Типографіка ---------- */
  html.ui-v2 .v2-display { margin: 0; font: 800 var(--v2-fs-display)/var(--v2-lh-display) var(--font); letter-spacing: var(--v2-ls-display); }
  html.ui-v2 .v2-h1 { margin: 0; font: 800 var(--v2-fs-h1)/var(--v2-lh-h1) var(--font); letter-spacing: var(--v2-ls-h1); }
  html.ui-v2 .v2-h2 { margin: 0; font: 800 var(--v2-fs-h2)/var(--v2-lh-h2) var(--font); letter-spacing: var(--v2-ls-h2); }
  html.ui-v2 .v2-h3 { margin: 0; font: 800 var(--v2-fs-h3)/var(--v2-lh-h3) var(--font); letter-spacing: var(--v2-ls-h3); }
  html.ui-v2 .v2-lead { margin: 0; font-size: var(--v2-fs-lead); line-height: var(--v2-lh-lead); color: var(--text-2); }
  html.ui-v2 .v2-grad { background: var(--v2-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
  html.ui-v2 .v2-muted { color: var(--muted); }

  /* ---------- Пігулка, мітка, чип ---------- */
  html.ui-v2 .v2-pill { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 8px; border-radius: var(--v2-r-pill);
    background: var(--v2-pill-bg); border: 1px solid var(--v2-line-accent); color: var(--good-text); font: 600 14px/1 var(--font); }
  html.ui-v2 .v2-live { width: 20px; height: 20px; border-radius: 50%; background: rgba(127, 184, 214, 0.18); display: grid; place-items: center; }
  html.ui-v2 .v2-live::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent);
    animation: v2-breathe calc(2s * var(--m-k)) ease-in-out infinite; }
  html.ui-v2 .v2-lbl { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--v2-r-pill); border: 1px solid var(--v2-line-accent);
    background: rgba(24, 37, 45, 0.7); color: var(--good-text); font: 700 var(--v2-fs-label)/1 var(--font); letter-spacing: var(--v2-ls-label); text-transform: uppercase; }
  html.ui-v2 .v2-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--v2-r-pill); border: 1px solid var(--border-strong);
    background: var(--panel); color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer;
    transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  html.ui-v2 .v2-chip[aria-pressed=true] { background: var(--good-bg); border-color: var(--v2-line-hover); color: var(--good-text); }
  html.ui-v2 .v2-chip.m-pop { animation: v2-pop-chip calc(var(--dur-3) * 1.2) var(--ease-spring); }

  /* ---------- Картка: рамка E, підйом і прожектор під курсором (--mx/--my ставить motion.ts spotlight) ---------- */
  html.ui-v2 .v2-card { position: relative; border-radius: var(--v2-r-card); background: var(--v2-surface); border: 1px solid var(--v2-line); box-shadow: var(--v2-sh-1);
    transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
  html.ui-v2 .v2-card.lift:hover { transform: translateY(calc(-1 * var(--m-lift))); border-color: var(--v2-line-hover); box-shadow: var(--v2-sh-2), var(--v2-sh-ring); }
  /* прожектор — під вмістом (isolation + z-index −1), щоб не тонувати текст */
  html.ui-v2 :is([data-spot], .mp-card) { --mx: 50%; --my: 50%; isolation: isolate; }
  html.ui-v2 [data-spot]::before, html.ui-v2 .mp-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(127, 184, 214, var(--m-spot)), transparent 60%); transition: opacity var(--dur-3) var(--ease-out); }
  html.ui-v2 [data-spot]:hover::before, html.ui-v2 .mp-card:hover::before { opacity: 1; }
  html.ui-v2 .v2-win-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--border); font: 700 13px/1 var(--font); }
  html.ui-v2 .v2-win-bar .go { margin-left: auto; color: var(--accent); font-size: 12px; opacity: 0; transform: translateX(-4px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  html.ui-v2 .v2-card:hover .v2-win-bar .go { opacity: 1; transform: none; }

  /* ---------- Вкладки: смужка-індикатор їде під активну (motion.ts slideIndicator) ---------- */
  html.ui-v2 .v2-tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
  html.ui-v2 .v2-tab { min-height: var(--ctl-h); padding: 0 14px; border: 0; border-radius: var(--v2-r-ctl) var(--v2-r-ctl) 0 0; background: none; color: var(--text-2); font-weight: 700; }
  html.ui-v2 .v2-tab:hover { background: none; color: var(--text); }
  html.ui-v2 .v2-tab[aria-selected=true] { color: var(--text); }
  html.ui-v2 .v2-tab-ind { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent);
    transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease-in-out); pointer-events: none; }

  /* ---------- Перемикач з пружиною ---------- */
  html.ui-v2 .v2-switch { position: relative; width: 44px; height: 26px; min-height: 0; padding: 0; border-radius: var(--v2-r-pill); background: var(--panel-2); border: 1px solid var(--border-strong); }
  html.ui-v2 .v2-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2);
    transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .v2-switch[aria-checked=true] { background: var(--accent-bg); border-color: var(--v2-line-hover); }
  html.ui-v2 .v2-switch[aria-checked=true]::after { transform: translateX(18px); background: var(--accent); }

  /* ---------- Поява при прокрутці: data-reveal (і data-reveal="blur" для 1–2 великих елементів); прихований стан — лише коли motion.ts працює (m-ready) ---------- */
  html.ui-v2.m-ready [data-reveal]:not(.in) { opacity: 0; transform: translateY(var(--m-shift)) scale(var(--m-scale)); }
  html.ui-v2.m-ready [data-reveal="blur"]:not(.in) { filter: blur(var(--m-blur)); }
  html.ui-v2.m-ready [data-reveal] { transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out), filter var(--dur-4) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--m-stagger)); }

  /* ---------- Графіки й карта ---------- */
  html.ui-v2 .v2-draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
  html.ui-v2 .v2-draw.in { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-5) var(--ease-out); }
  html.ui-v2 .v2-bar { transform: scaleY(0); transform-origin: 50% 100%; transform-box: fill-box; }
  html.ui-v2 .v2-bar.in { transform: none; transition: transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--m-stagger) * .5); }
  html.ui-v2 .v2-pt { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
  html.ui-v2 .v2-pt.in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
    transition-delay: calc(var(--i, 0) * var(--m-stagger) * .6); }
  html.ui-v2 .v2-ring { animation: v2-ring calc(var(--dur-5) * 1.1) var(--ease-out) forwards; transform-box: fill-box; transform-origin: center; }
  html.ui-v2 .v2-hot { filter: drop-shadow(0 0 6px var(--accent)); }

  /* ---------- Завантаження: скелет без блимання → вміст згасанням; «туман розходиться» над картою ---------- */
  html.ui-v2 .v2-skel { border-radius: var(--v2-r-sm); background: linear-gradient(100deg, #161c22 30%, #1f2830 50%, #161c22 70%) 0 0 / 300% 100%; animation: v2-shimmer 1.6s linear infinite; }
  html.ui-v2 .v2-fadein { animation: v2-fade var(--dur-3) var(--ease-out) both; }
  html.ui-v2 .v2-fog { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, transparent var(--fog-r, 0%), rgba(14, 17, 20, 0.92) calc(var(--fog-r, 0%) + 18%));
    transition: --fog-r var(--dur-5) var(--ease-out), opacity var(--dur-4) var(--ease-out); }
  html.ui-v2 .v2-fog.out { --fog-r: 120%; opacity: 0; }

  /* ---------- Сегменти: підкладка, що їде під вибраною кнопкою (motion.ts segmented: .mp-stabs, .mp-tabs, меню розділів матчу) ---------- */
  html.ui-v2 .v2-seg { position: relative; isolation: isolate; }
  html.ui-v2 .v2-seg-pill { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 9px; background: var(--accent-bg); box-shadow: inset 0 0 0 1px #2c4655, 0 0 18px rgba(127, 184, 214, .10);
    pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
  html.ui-v2 .v2-seg > [aria-selected] { transition: color var(--dur-2) var(--ease-out); }
  html.ui-v2 .v2-seg > [aria-selected=true] { background: transparent; box-shadow: none; }
  html.ui-v2 .v2-seg > [aria-selected=false]:hover { background: transparent; color: var(--text); }

  /* ---------- Поява сходинкою при першому показі (сторінка матчу: табло й блоки розділу; клас v2-rise ставить JS) ---------- */
  html.ui-v2 .v2-rise { animation: v2-rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 14) * var(--m-stagger)); }

  /* головна з лендінгом E: сцена сама липка на весь екран (100vh, масштаб від висоти вікна) — шапка тут звичайна, щоб не закривати верх сцени */
  html.ui-v2 body:has(#home-page:not([hidden]) .le) .af-top { position: relative; }
  /* меню сторінки гравця й налаштувань (.pp-nav) — теж липке: під шапкою v2 */
  html.ui-v2 .pp-nav { top: var(--af-top-h, 69px); max-height: calc(100vh - var(--af-top-h, 69px)); }
  /* рядок контексту під шапкою: у профілі v2 його єдиний вміст (#summary) сховано (рішення aYo 32а) — не лишати порожню смугу ≈ 48 px (огляд seeker) */
  html.ui-v2 .af-ctx:not(:has(> :not([hidden]))) { display: none; }

  /* ================= Профіль v2, етап A (web/src/player-v2.ts, docs/profile-v2-plan.md): ті самі блоки й дані, вигляд E ================= */
  html.ui-v2 .pp-nav.v2-seg { position: sticky; }
  html.ui-v2 .pp-nav a { transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .pp-nav.v2-seg a[aria-current] { background: transparent; }
  html.ui-v2 .pp-nav .v2-seg-pill { border-radius: var(--r-ctl); box-shadow: inset 3px 0 0 var(--accent), 0 0 24px rgba(127, 184, 214, .08); }
  html.ui-v2 .pp-nav a:not([aria-current]):hover { background: rgba(27, 34, 41, .6); }
  /* шапка-вікно: хто + KPI | «Мій MMR» */
  html.ui-v2 .ppv-win { position: relative; border-radius: var(--v2-r-card); background: var(--v2-surface); border: 1px solid #2a343d; box-shadow: var(--v2-sh-3); overflow: hidden;
    background-image: linear-gradient(180deg, rgba(127, 184, 214, .045), transparent 160px); }
  html.ui-v2 .ppv-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--border); }
  html.ui-v2 .ppv-dots { display: flex; gap: 5px; margin-right: 4px; } html.ui-v2 .ppv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2c353e; }
  html.ui-v2 .ppv-bar .pp-kind { margin: 0; font: 700 12px/1 var(--font); letter-spacing: .06em; }
  html.ui-v2 .ppv-body { display: grid; grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .ppv-body:has(> .pp-mmr:not([hidden])) { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); }
  html.ui-v2 .ppv-body > .pp-head { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 24px 26px; }
  html.ui-v2 .ppv-body > .pp-mmr { margin: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none;
    background: radial-gradient(120% 80% at 100% 0%, rgba(127, 184, 214, .07), transparent 60%); padding: 20px 22px; }
  html.ui-v2 .ppv-body > .pp-mmr::before { display: none; }
  html.ui-v2 .pp-head h1 { font-size: 38px; line-height: 1.05; letter-spacing: -.02em; }
  html.ui-v2 .pp-ava { box-shadow: 0 0 0 1px #2f5367, 0 10px 30px rgba(127, 184, 214, .18); }
  html.ui-v2 .pp-chip { background: var(--v2-pill-bg); border: 1px solid var(--v2-line-accent); }
  html.ui-v2 .pp-kpi-v { font-size: 40px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  /* KPI в одному ряду: рівні колонки (4–5 штук), у вікні поруч із MMR — трохи менші цифри */
  html.ui-v2 .pp-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px 22px; }
  html.ui-v2 .pp-kpi-i { min-width: 0; }
  html.ui-v2 .pp-kpi-l { white-space: normal; overflow: visible; text-overflow: clip; } /* підпис з «бета» — у два рядки, а не «…» */
  html.ui-v2 .ppv-body:has(> .pp-mmr:not([hidden])) .pp-kpi-v { font-size: 34px; }
  html.ui-v2 .pp-kpi-v.rt { text-shadow: 0 0 24px rgba(127, 184, 214, .25); }
  /* картки профілю: скло E, прожектор під курсором (ui-v2.ts) */
  html.ui-v2 .pp-card { position: relative; background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-1);
    background-image: linear-gradient(180deg, rgba(127, 184, 214, .035), transparent 140px); transition: border-color var(--dur-3) var(--ease-out); }
  html.ui-v2 .pp-card:hover { border-color: #33414c; }
  html.ui-v2 .pp-card { --mx: 50%; --my: 50%; isolation: isolate; }
  html.ui-v2 .pp-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(127, 184, 214, var(--m-spot)), transparent 60%); transition: opacity var(--dur-3) var(--ease-out); }
  html.ui-v2 .pp-card:hover::before { opacity: 1; }
  html.ui-v2 .pp-gh { font-size: 26px; letter-spacing: -.015em; }

  /* ---------- Короткий профіль чужого гравця (web/src/player-page.ts, strangerMain; рішення aYo 77Б — прототип docs/prototypes/stranger-profile.html, варіант Б) ----------
     Без бокового меню: зліва липка колонка загальної інформації (348 px), праворуч — «Останні матчі», «Герої й позиції» + компактний радар */
  html.ui-v2 .player-page > .ps-page { grid-column: 1 / -1; width: 100%; max-width: 1360px; justify-self: center; padding: 24px 0 0 24px;
    display: grid; grid-template-columns: 348px minmax(0, 1fr); gap: 20px; align-items: start; }
  html.ui-v2 .ps-aside { position: sticky; top: calc(var(--af-top-h, 69px) + 16px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  html.ui-v2 .ps-main { padding-top: 0; max-width: none; gap: 18px; }
  /* шапка-вікно у вузькій колонці: аватар + ім'я, під ними чипи, кнопки й KPI сіткою 2 × 2 */
  html.ui-v2 .ps-aside .ppv-body, html.ui-v2 .ps-aside .ppv-body:has(> .pp-mmr:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .ps-aside .ppv-body > .pp-mmr { border-left: 0; border-top: 1px solid var(--border); }
  html.ui-v2 .ps-aside .ppv-body > .pp-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 18px 18px 0; }
  html.ui-v2 .ps-aside .pp-who { display: contents; }
  html.ui-v2 .ps-aside .pp-ava { grid-column: 1; grid-row: 1; width: 64px; height: 64px; font-size: 22px; }
  html.ui-v2 .ps-aside .pp-head h1 { grid-column: 2; grid-row: 1; margin: 0; font-size: 26px; }
  html.ui-v2 .ps-aside :is(.pp-chips, .pp-head-btns, .pp-kpi) { grid-column: 1 / -1; }
  html.ui-v2 .ps-aside .pp-chips { margin: 0; gap: 6px; font-size: 12px; } html.ui-v2 .ps-aside .pp-ids { flex: 1 1 100%; font-size: 11.5px; }
  html.ui-v2 .ps-aside .pp-head-btns { gap: 8px; }
  html.ui-v2 .ps-aside .pp-head-btns > :is(a, button) { min-height: 34px; padding: 0 12px; font-size: 13px; }
  html.ui-v2 .ps-aside .pp-kpi { grid-template-columns: 1fr 1fr; gap: 1px; margin: 4px -18px 0; padding: 0; border-top: 1px solid var(--border); background: var(--border); }
  html.ui-v2 .ps-aside .pp-kpi[hidden] { display: none; }
  html.ui-v2 .ps-aside .pp-kpi-i { padding: 12px 16px; background: #12171c; }
  html.ui-v2 .ps-aside .pp-kpi-i:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html.ui-v2 .ps-aside .pp-kpi-v { font-size: 28px; }
  /* останні 10, позиції, історія й примітка */
  html.ui-v2 .ps-aside .pp-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
  html.ui-v2 .ps-sub { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  html.ui-v2 .ps-pos-h { margin-top: 6px; }
  html.ui-v2 .ps-streak { display: flex; gap: 4px; }
  html.ui-v2 .ps-streak i { flex: 1; height: 22px; border-radius: 5px; background: var(--bad-bg); border: 1px solid rgba(232, 160, 92, .35); }
  html.ui-v2 .ps-streak i.w { background: var(--good-bg); border-color: rgba(127, 184, 214, .45); }
  html.ui-v2 .ps-pos { display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; gap: 10px; align-items: center; font: 700 13px var(--font-num); }
  html.ui-v2 .ps-pos-t { color: var(--text-2); } html.ui-v2 .ps-pos-n { text-align: right; } html.ui-v2 .ps-pos.none .ps-pos-n { color: var(--faint); }
  html.ui-v2 .ps-bar { height: 8px; border-radius: 999px; background: #1b2229; overflow: hidden; }
  html.ui-v2 .ps-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
  html.ui-v2 .ps-hist p { margin: 0; } html.ui-v2 .ps-hist-t { font-size: 13px; color: var(--text-2); }
  html.ui-v2 .ps-note { padding: 10px 12px; border-radius: 12px; border: 1px dashed #2c353e; font-size: 12px; color: var(--muted); }
  /* «Герої й позиції» + компактний радар: поруч із радаром у таблиці без стовпців «Найкраща» й «Проти 1,00» (варіант Б) */
  html.ui-v2 .ps-duo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  html.ui-v2 .ps-duo.one { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .ps-duo:not(.one) .rt-heroes :is(th, td):nth-child(n+6) { display: none; }
  html.ui-v2 .rd-compact .rd-plot { max-width: 340px; margin: 0 auto; }
  /* радар малюється в 400 × 350 і тут стискається ≈ 0,7: підписи більші, щоб на екрані були ≈ 12 px, як у прототипі */
  html.ui-v2 .rd-compact .rd-lbl { font-size: 17px; } html.ui-v2 .rd-compact .rd-val { font-size: 16px; } html.ui-v2 .rd-compact .rd-val.grey { font-size: 14px; }
  html.ui-v2 .rd-compact .rd-tick { font-size: 13px; }
  html.ui-v2 .rd-compact .rd-axis { cursor: default; } html.ui-v2 .rd-compact .rd-axis:hover .rd-lbl { fill: var(--text); }
  html.ui-v2 .rd-compact > p.hint { margin: 4px 0 0; }

  /* ================= Сторінка матчу v2 (web/src/match-page.ts; v1 — index.html, «Сторінка матчу v2») =================
     Шапка сайту в v2 липка — меню розділів, рядок контексту з табло й панель карти стають під нею (--af-top-h міряє ui-v2.ts / match-page.ts). */
  html.ui-v2 .mp-side { top: var(--af-top-h, 69px); max-height: calc(100vh - var(--af-top-h, 69px)); }
  html.ui-v2 .mp-side.v2-seg { position: sticky; }
  html.ui-v2 .mp-ctx { top: var(--af-top-h, 69px); background: var(--v2-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--v2-line-soft); }
  html.ui-v2 .mp-panel { top: calc(var(--af-top-h, 69px) + var(--mp-ctx-h, 120px) + 12px); max-height: calc(100vh - var(--af-top-h, 69px) - var(--mp-ctx-h, 120px) - 24px); }
  html.ui-v2 .mp-sec { --mp-fit: calc(100vh - var(--af-top-h, 69px) - var(--mp-ctx-h, 150px) - 16px - var(--mp-pnl-x, 110px) - 20px); }
  /* меню розділів: вибраний пункт — підкладка з блакитною рискою, що їде (segmented, вибраний — .mp-it.on) */
  html.ui-v2 .mp-it { transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-side.v2-seg .mp-it.on { background: transparent; box-shadow: none; }
  html.ui-v2 .mp-side .v2-seg-pill { border-radius: var(--r-ctl); box-shadow: inset 3px 0 0 var(--accent), 0 0 24px rgba(127, 184, 214, .08); }
  html.ui-v2 .mp-side .mp-it:not(.on):hover { background: rgba(27, 34, 41, .6); }
  html.ui-v2 .mp-note { border-color: var(--v2-line); background: rgba(19, 24, 29, .5); }
  /* рядок контексту: заголовок розділу, чипи-пігулки, табло */
  html.ui-v2 .mp-mh h1 { font-size: 24px; letter-spacing: -.015em; }
  html.ui-v2 .mp-chip { background: var(--v2-pill-bg); border-color: var(--v2-line-accent); color: var(--text-2);
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 :is(a, button).mp-chip:hover { border-color: var(--v2-line-hover); background: var(--accent-bg); }
  html.ui-v2 .mp-q.q-replay i { box-shadow: 0 0 8px var(--good); }
  html.ui-v2 .mp-sb-c .mp-score { font-size: 34px; letter-spacing: -.02em; }
  html.ui-v2 .mp-pkc { background: var(--v2-surface); border-color: var(--v2-line);
    transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .mp-pkc:hover { transform: translateY(calc(-1 * var(--m-lift))); border-color: var(--v2-line-hover); }
  html.ui-v2 .mp-pkc.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px rgba(127, 184, 214, .35), 0 8px 24px rgba(127, 184, 214, .12); }
  html.ui-v2 .mp-pkc.on.my { box-shadow: inset 0 -2px 0 var(--good), 0 0 0 1px rgba(127, 184, 214, .35), 0 8px 24px rgba(127, 184, 214, .12); }
  html.ui-v2 .mp-pkc.on.en { box-shadow: inset 0 -2px 0 var(--bad), 0 0 0 1px rgba(127, 184, 214, .35), 0 8px 24px rgba(127, 184, 214, .12); }
  /* картки й таблиці: рамка й тінь E, прожектор під курсором (ui-v2.ts spotlight) */
  html.ui-v2 .mp-card, html.ui-v2 .mp-glance { position: relative; background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-1);
    transition: border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
  html.ui-v2 .mp-card:hover { border-color: #33414c; }
  html.ui-v2 .mp-card { background-image: linear-gradient(180deg, rgba(127, 184, 214, .045), transparent 140px); } /* скло E: ледь світліший верх картки */
  html.ui-v2 .mp-card h2 { font-size: 17px; letter-spacing: -.01em; }
  html.ui-v2 .mp-mh h1 { font-size: 26px; }
  html.ui-v2 .mp-score .r { text-shadow: 0 0 22px color-mix(in srgb, var(--radiant) 45%, transparent); }
  html.ui-v2 .mp-score .d { text-shadow: 0 0 22px color-mix(in srgb, var(--dire) 45%, transparent); }
  html.ui-v2 .mp-mvp-rt { font-size: 24px; letter-spacing: -.01em; }
  html.ui-v2 .mp-mvp { padding: 6px 8px; margin: 0 -8px; border-radius: 12px; transition: background-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .mp-mvp:hover { background: rgba(27, 34, 41, .7); }
  html.ui-v2 .mp-mvp:has(.mvp-1) { background: linear-gradient(90deg, rgba(232, 193, 90, .08), transparent 70%); }
  html.ui-v2 .mp-table tbody tr td { transition: background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-table tbody tr:hover td { background: rgba(27, 34, 41, .7); }
  html.ui-v2 .mp-table tr.you td { background: rgba(127, 184, 214, .07); }
  html.ui-v2 .mp-rt { transition: color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mvp-badge.mvp-1 { box-shadow: 0 0 12px rgba(232, 193, 90, .35); }
  html.ui-v2 .v2-rise .mvp-badge.mvp-1 { animation: v2-mvp calc(var(--dur-5) * 1.6) var(--ease-out) calc(var(--dur-4) + 4 * var(--m-stagger)) 1 backwards; }
  /* ---- Огляд: картка-«вікно» E вгорі (web/src/match-window.ts; рішення aYo 25.10 «глибше») ---- */
  html.ui-v2 .mp-ov-v2 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  html.ui-v2 .mpw { gap: 0; padding: 0; overflow: hidden; box-shadow: var(--v2-sh-3); border-color: #2a343d; }
  html.ui-v2 .mpw:hover { border-color: #3a4a56; }
  html.ui-v2 .mpw-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--border); font: 700 13px/1 var(--font); color: var(--text); }
  html.ui-v2 .mpw-dots { display: flex; gap: 5px; margin-right: 4px; } html.ui-v2 .mpw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2c353e; }
  html.ui-v2 .mpw-sp { flex: 1; } html.ui-v2 .mpw-tag { color: var(--muted); font-weight: 600; }
  html.ui-v2 .mpw-body { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); min-height: 236px; }
  html.ui-v2 .mpw-body.no-mvp { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .mpw-body.no-curve { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .mpw-body > * { padding: 20px 22px; min-width: 0; }
  html.ui-v2 .mpw-body > * + * { border-left: 1px solid var(--border); }
  html.ui-v2 .mpw-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 800 13px/1.3 var(--font); color: var(--text); margin-bottom: 12px; }
  html.ui-v2 .mpw-sub { font-weight: 500; font-size: 12px; color: var(--muted); }
  /* MVP */
  html.ui-v2 .mpw-mvp { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(232, 193, 90, .05), transparent 70%); }
  html.ui-v2 .mpw-mvp .mpw-h { margin-bottom: 4px; }
  html.ui-v2 .mpw-mvp1 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  html.ui-v2 .mpw-ring { position: relative; display: inline-grid; border-radius: 12px; box-shadow: 0 0 0 2px #e8c15a, 0 0 22px rgba(232, 193, 90, .35); }
  html.ui-v2 .mpw-hi { width: 84px; height: 47px; border-radius: 10px; object-fit: cover; display: block; }
  html.ui-v2 .v2-rise .mpw-ring, html.ui-v2 .mpw-ring.pulse { animation: v2-mvp calc(var(--dur-5) * 1.6) var(--ease-out) calc(var(--dur-4) + 2 * var(--m-stagger)) 1 backwards; }
  html.ui-v2 .mpw-who { min-width: 0; } html.ui-v2 .mpw-who .linklike { font-weight: 800; font-size: 15px; }
  html.ui-v2 .mpw-who .mp-mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* «нік · pos · K/D/A»: обрізається лише нік, хвіст з цифрами — завжди цілий */
  html.ui-v2 .mpw-who .mpw-nick { display: flex; min-width: 0; }
  html.ui-v2 .mpw-nick .mpw-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.ui-v2 .mpw-nick .mpw-kda { flex: none; white-space: pre; }
  html.ui-v2 .mpw-rt { min-height: 0; padding: 0; border: 0; background: none; font: 700 40px/1 var(--font-num); letter-spacing: -.02em; cursor: pointer; }
  html.ui-v2 .mpw-rt:hover { background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  html.ui-v2 .mpw-mvpn { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; }
  html.ui-v2 .mpw-mvpn .linklike { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  html.ui-v2 .mpw-mvpn .mp-rt { font-size: 17px; }
  /* підсумок матчу, подача Б (рішення aYo 27.10, прототип design/wow-proto): мітка типу гри + речення + стрічка подій */
  html.ui-v2 .mpw-sum { display: flex; flex-direction: column; gap: 10px; background: radial-gradient(120% 100% at 100% 0%, rgba(127, 184, 214, .06), transparent 60%); }
  html.ui-v2 .mpw-kick { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; font: 800 11px/1 var(--font);
    letter-spacing: .09em; text-transform: uppercase; color: var(--good-text); background: var(--accent-bg); box-shadow: inset 0 0 0 1px #2c4655; }
  html.ui-v2 .mpw-kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
  html.ui-v2 .mpw-kick.warm { color: #f3c98f; background: rgba(232, 160, 92, .1); box-shadow: inset 0 0 0 1px rgba(232, 160, 92, .35); }
  html.ui-v2 .mpw-kick.warm i { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
  html.ui-v2 .mpw-sent { margin: 0; font: 700 19px/1.42 var(--font); color: var(--text); letter-spacing: -.005em; text-wrap: pretty; }
  html.ui-v2 .mpw-team.r { color: var(--radiant); } html.ui-v2 .mpw-team.d { color: var(--dire); }
  html.ui-v2 .mpw-tm { color: var(--link); text-decoration: underline dotted rgba(169, 210, 230, .55); text-underline-offset: 4px; font-family: var(--font-num); white-space: nowrap; }
  html.ui-v2 .mpw-tm:hover { color: #d4ebf5; text-decoration-style: solid; }
  html.ui-v2 .mpw-strip { position: relative; height: 74px; margin: 4px 6px 0; }
  html.ui-v2 .mpw-strip::before { content: ''; position: absolute; left: 0; right: 0; top: 35px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #232b33, #2f3b45); }
  html.ui-v2 .mpw-ev { position: absolute; top: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
  html.ui-v2 .mpw-ev.up { top: auto; bottom: 30px; flex-direction: column-reverse; }
  html.ui-v2 .mpw-ev.end { transform: translateX(-100%); align-items: flex-end; } html.ui-v2 .mpw-ev.start { transform: none; align-items: flex-start; }
  html.ui-v2 .mpw-ev i { width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px var(--faint); transition: transform var(--dur-2) var(--ease-spring); }
  html.ui-v2 .mpw-ev.key i { background: var(--accent); box-shadow: 0 0 0 4px rgba(127, 184, 214, .2), 0 0 14px var(--accent); }
  html.ui-v2 .mpw-ev.low i { box-shadow: inset 0 0 0 2px var(--bad); } html.ui-v2 .mpw-ev.rax i { box-shadow: inset 0 0 0 2px var(--accent); }
  html.ui-v2 .mpw-ev:hover { color: var(--text); } html.ui-v2 .mpw-ev:hover i { transform: scale(1.2); }
  html.ui-v2 .mpw-ev span { font: 600 10.5px/1.15 var(--font); white-space: nowrap; }
  html.ui-v2 .mpw-ev b { font: 700 11px var(--font-num); color: var(--text-2); }
  /* «Поділитися»: кнопка в смузі картки і меню з 3 пунктів (меню — всередині картки, тож картка не обрізає його) */
  html.ui-v2 .mpw { position: relative; overflow: visible; }
  html.ui-v2 .mpw-body { border-radius: 0 0 var(--r-card) var(--r-card); overflow: hidden; }
  html.ui-v2 .mpw-share { display: inline-flex; align-items: center; gap: 7px; min-height: 0; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--v2-surface-2); color: var(--text-2); font: 700 12px/1 var(--font); cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
  html.ui-v2 .mpw-share:hover, html.ui-v2 .mpw-share[aria-expanded=true] { border-color: var(--v2-line-hover); color: var(--text); background: var(--accent-bg); }
  html.ui-v2 .mpw-share svg { width: 14px; height: 14px; }
  html.ui-v2 .mpw-menu { position: absolute; z-index: 30; top: 44px; right: 10px; width: 340px; padding: 6px; border-radius: 14px; background: #151b20; border: 1px solid #2a333b;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: none; flex-direction: column; gap: 2px; }
  html.ui-v2 .mpw-menu.on { display: flex; animation: mpw-pop .16s var(--ease-out); }
  @keyframes mpw-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
  html.ui-v2 .mpw-menu button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-items: center; text-align: left; min-height: 0; padding: 9px 10px; border-radius: 10px;
    border: 0; background: none; color: var(--text); cursor: pointer; font: 700 13px/1.3 var(--font); }
  html.ui-v2 .mpw-menu button:hover, html.ui-v2 .mpw-menu button:focus-visible { background: var(--accent-bg); }
  html.ui-v2 .mpw-menu .ic { grid-row: span 3; align-self: start; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); color: var(--accent); }
  html.ui-v2 .mpw-menu small { grid-column: 2; font: 500 11.5px/1.35 var(--font); color: var(--muted); }
  html.ui-v2 .mpw-menu .url { grid-column: 2; font: 500 11px var(--font-num); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-v2 .mpw-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 12px; background: rgba(24, 37, 45, .97);
    border: 1px solid #2f5367; color: var(--text); font: 700 13px var(--font); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; }
  html.ui-v2 .mpw-toast.on { opacity: 1; transform: translate(-50%, 0); }
  html.ui-v2 .mpw-zero { stroke: #2a343d; stroke-width: 1; vector-effect: non-scaling-stroke; }
  html.ui-v2 .mpw-ticks { position: relative; height: 14px; font-size: 10.5px; color: var(--faint); }
  html.ui-v2 .mpw-ticks span { position: absolute; transform: translateX(-50%); } html.ui-v2 .mpw-ticks span:first-child { transform: none; }

  /* «Головне», номінації, події: м'яка підсвітка рядка, ▶ — пружина */
  html.ui-v2 :is(.mp-hl, .mp-nr) { background: var(--v2-surface-2); border-color: transparent; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
  html.ui-v2 :is(.mp-hl, .mp-nr):hover { border-color: var(--v2-line); background: rgba(27, 34, 41, .95); }
  html.ui-v2 .mp-nr.you { background: rgba(23, 33, 41, .9); }
  html.ui-v2 .mp-go a, html.ui-v2 :is(.mp-ev, .mp-evchip) .pl { transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-go a:hover, html.ui-v2 :is(.mp-ev, .mp-evchip):hover .pl { transform: scale(1.1); }
  html.ui-v2 :is(.mp-ev, .mp-evchip) { transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-evchip { background: var(--v2-surface-2); border-color: var(--v2-line); }
  html.ui-v2 .mp-evchip:hover { border-color: var(--v2-line-hover); }
  /* каркас розділу: вкладки-сегменти, «головне одним поглядом», панель карти й шари */
  html.ui-v2 :is(.mp-stabs, .mp-tabs) { background: rgba(14, 17, 20, .6); border-color: var(--v2-line); }
  html.ui-v2 .mp-gl > b { font-size: 28px; letter-spacing: -.01em; }
  html.ui-v2 .rp-layers.side { background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-1); }
  html.ui-v2 .ly { transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
  html.ui-v2 .ly:active { transform: scale(.96); }
  html.ui-v2 .ly.on { border-color: var(--v2-line-hover); background: var(--accent-bg); }
  html.ui-v2 .mp-panel .rp-map, html.ui-v2 .mp-rp .rp-map { border-color: var(--v2-line); box-shadow: var(--v2-sh-2); }
  html.ui-v2 .mp-map-strip { transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }

  /* ================= 2D-повтор v2 (web/src/replay-player.ts — лише вигляд; логіка й розмітка ті самі) =================
     Карта — «вікно» E з віньєткою; при появі «туман розходиться» (один раз, коли карту створено); написи на карті — скло;
     керування — скляна смужка, ▶ зі світінням і пружиною, швидкість і «золото / досвід» — підкладка, що їде; шкала часу — світна голівка й мітки з пружиною. */
  html.ui-v2 .rp-map { border-radius: var(--v2-r-card); border-color: var(--v2-line); box-shadow: var(--v2-sh-2); }
  html.ui-v2 .rp-map::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .03); }
  /* туман: велике коло з «діркою» посередині росте й згасає — лише transform і opacity (композитор), щоб не гальмувало, поки вантажиться повтор */
  html.ui-v2 .rp-map::after { content: ''; position: absolute; inset: -60%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 22%, rgba(14, 17, 20, .96) 42%);
    opacity: 0; animation: v2-fog-clear calc(var(--dur-5) * 1.4) var(--ease-in-out) calc(var(--dur-2)) backwards; }
  html.ui-v2 :is(.rp-clock, .rp-feed, .rp-zoom, .rp-cap, .rp-hint) { z-index: 2; }
  html.ui-v2 :is(.rp-clock, .rp-kill, .rp-cap, .rp-hint) { background: rgba(14, 17, 20, .62); border-color: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html.ui-v2 .rp-clock { padding: 7px 14px 8px; border-radius: 12px; }
  html.ui-v2 .rp-clock-l { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
  html.ui-v2 .rp-clock-t { font-size: 30px; letter-spacing: -.01em; }
  html.ui-v2 .rp-kill { border-radius: 10px; }
  html.ui-v2 .rp-kill:first-child { animation: v2-kill-in var(--dur-3) var(--ease-out) backwards; }
  html.ui-v2 .rp-zoom button { border-radius: 999px; background: rgba(14, 17, 20, .62); border-color: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html.ui-v2 .rp-zoom button:hover { border-color: var(--v2-line-hover); background: rgba(24, 37, 45, .8); }
  html.ui-v2 :is(.rp-ctl, .rp-tl, .rp-card) { background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-1); }
  html.ui-v2 .rp-ctl { border-radius: var(--v2-r-card); }
  html.ui-v2 .rp-play { border-radius: 12px; box-shadow: var(--v2-sh-accent); transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .rp-play:hover { box-shadow: var(--v2-sh-accent-hover); transform: translateY(calc(-1 * var(--m-lift))); }
  html.ui-v2 .rp-play:active { transform: scale(.94); }
  html.ui-v2 .rp-speeds.v2-seg .rp-speed.on, html.ui-v2 .rp-seg.v2-seg button.on { background: transparent; border-color: transparent; }
  html.ui-v2 .rp-speeds .v2-seg-pill { border-radius: var(--r-ctl); }
  html.ui-v2 .rp-seg .v2-seg-pill { border-radius: 0; box-shadow: none; }
  html.ui-v2 .rp-ctl > button:not(.rp-play):hover { border-color: var(--v2-line-hover); }
  html.ui-v2 .rp-tl { border-radius: var(--v2-r-card); }
  html.ui-v2 .rp-head-mark { width: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(127, 184, 214, .25), 0 0 14px rgba(127, 184, 214, .8); border-radius: 2px; }
  html.ui-v2 .rp-ev { transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .rp-ev:not(.rp-ev-rosh):not(.rp-ev-pause):hover { transform: translate(-50%, -50%) scale(1.45); box-shadow: 0 0 10px var(--c); }
  html.ui-v2 .rp-ev-rosh:hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.45); box-shadow: 0 0 10px var(--c); }
  html.ui-v2 .rp-span { background: linear-gradient(180deg, rgba(127, 184, 214, .18), rgba(127, 184, 214, .06)); }
  html.ui-v2 .rp-card { border-radius: var(--v2-r-card); }
  html.ui-v2 .rp-row { transition: background-color var(--dur-1) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
  html.ui-v2 .rp-row:hover { background: rgba(27, 34, 41, .8); }
  html.ui-v2 .rp-ic img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }

  /* ================= Решта сторінок v2: лідерборд, мета, гайд по вардах, налаштування, «Що нового» й інфо, «Матчі» гравця =================
     Розмітка й тексти ті самі (web/src/*-page.ts); рух — web/src/ui-v2.ts (pagesScan): підкладка перемикачів, поява сходинкою при першому показі даних;
     мета й лідерборд — рядки «переїжджають» при сортуванні (motion.ts flip), варди — точки хвилею від центру карти. */
  /* спільне: заголовок сторінки — один розмір на всіх сторінках v2 (34 px, як «Налаштування»), картка — скло E */
  html.ui-v2 :is(.lb-head h2, .st-h1, .ip-in h1) { font-size: 34px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  html.ui-v2 section.lb-page { max-width: 1160px; margin: 32px auto 64px; }
  html.ui-v2 .lb-card { position: relative; padding: 26px 28px 24px; border-radius: var(--v2-r-card); background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-1);
    background-image: linear-gradient(180deg, rgba(127, 184, 214, .045), transparent 160px); }
  html.ui-v2 .lb-head { margin-bottom: 16px; }
  html.ui-v2 .lb-bar { gap: 12px 16px; margin-bottom: 16px; }
  html.ui-v2 :is(.lb-card, .ip-in) .hint { font-size: 13px; }
  html.ui-v2 .lb-card .rule { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v2-line-soft); }
  html.ui-v2 .mta-facts { font-size: 15px; color: var(--text-2); margin-bottom: 16px; }

  /* перемикачі-сегменти (.seg): «пігулка» E, вибране — підкладка, що їде (як вкладки розділів матчу); без підкладки (поки JS не прийшов) — те саме кольором */
  html.ui-v2 .seg { gap: 2px; padding: 3px; border-radius: 12px; background: rgba(14, 17, 20, .6); border-color: var(--v2-line); overflow: visible; }
  html.ui-v2 .seg button { min-height: 36px; padding: 0 13px; border-radius: 9px; font-size: 13px; color: var(--text-2); font-weight: 650;
    transition: color var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .seg button + button { border-left: 0; }
  html.ui-v2 .seg button:hover { background: rgba(27, 34, 41, .7); color: var(--text); }
  html.ui-v2 .seg button.on { background: var(--accent-bg); box-shadow: inset 0 0 0 1px #2c4655; color: var(--text); font-weight: 800; }
  html.ui-v2 .seg.v2-seg button.on { background: transparent; box-shadow: none; }
  html.ui-v2 .seg.v2-seg button:not(.on):hover { background: transparent; }
  html.ui-v2 .seg .v2-seg-pill { border-radius: 9px; }
  html.ui-v2 .pos-select { height: 42px; border-radius: 12px; background: rgba(14, 17, 20, .6); border-color: var(--v2-line); }

  /* таблиці лідерборду, мети й вардів: підписи стовпців — мітки E; рядок підсвічується м'яко; заголовок таблиці липкий під шапкою */
  html.ui-v2 .lb-card .rt-scroll { overflow: clip; } /* clip, а не auto: не створює прокрутку, тож заголовок таблиці може липнути до вікна */
  html.ui-v2 .lb-table { font-size: 14px; }
  html.ui-v2 .lb-table :is(td, th) { padding: 10px 12px; border-bottom-color: var(--v2-line-soft); }
  html.ui-v2 .lb-table th { font: 700 var(--v2-fs-label)/1.2 var(--font); letter-spacing: var(--v2-ls-label); text-transform: uppercase; color: var(--muted);
    padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--v2-line); transition: color var(--dur-1) var(--ease-out); }
  html.ui-v2 :is(#lb-page, #meta-page) .lb-table tr:first-child th { position: sticky; top: var(--af-top-h, 69px); z-index: 2; background: rgba(17, 22, 27, .92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html.ui-v2 .fr-sort.desc, html.ui-v2 .fr-sort.asc { color: var(--text); }
  html.ui-v2 .lb-table tr td { transition: background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .lb-table tr:hover td { background: rgba(27, 34, 41, .7); }
  html.ui-v2 .lb-row.me td { background: rgba(127, 184, 214, .08); }
  html.ui-v2 .lb-row.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  html.ui-v2 .lb-place { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--faint); }
  html.ui-v2 .lb-table tr:nth-child(-n+4) .lb-place { color: var(--text-2); }
  html.ui-v2 .lb-table .rt { font-size: 16px; font-weight: 700; }
  html.ui-v2 .lb-team { border-radius: 6px; border-color: var(--v2-line); background: rgba(27, 34, 41, .6); padding: 1px 5px; }
  html.ui-v2 .md { border-radius: 6px; border-color: var(--v2-line); }
  html.ui-v2 .fr-who .fr-ava { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
  html.ui-v2 .lb-prog { height: 6px; background: rgba(27, 34, 41, .9); } html.ui-v2 .lb-prog span { box-shadow: 0 0 8px rgba(127, 184, 214, .5); }
  /* мета: рядок героя — підйом портрета під курсором; смуги частки позицій і предметів ростуть при першому показі */
  html.ui-v2 .mta-row:hover td { background: rgba(27, 34, 41, .75); }
  html.ui-v2 .mta-hero img { width: 28px; height: 28px; border-radius: 6px; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .mta-row:hover .mta-hero img { transform: scale(1.12); box-shadow: 0 0 0 1px var(--v2-line-hover), 0 6px 16px rgba(0, 0, 0, .4); }
  html.ui-v2 .mta-hero a { font-weight: 700; }
  html.ui-v2 .mta-posbar { width: 84px; height: 8px; border-radius: 4px; }
  html.ui-v2 .v2-rise :is(.mta-posbar, .lb-prog span) { transform-origin: 0 50%; animation: v2-grow var(--dur-5) var(--ease-out) backwards; animation-delay: calc(var(--dur-3) + min(var(--i, 0), 14) * var(--m-stagger)); }
  html.ui-v2 .mta-bar { height: 7px; } html.ui-v2 .mta-bar span { transform-origin: 0 50%; animation: v2-grow var(--dur-4) var(--ease-out) backwards; }
  html.ui-v2 .mta-src.ours { color: var(--good-text); }
  html.ui-v2 .mta-back { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; margin-bottom: 14px; border-radius: 999px; border: 1px solid var(--v2-line); background: rgba(14, 17, 20, .5);
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mta-back:hover { border-color: var(--v2-line-hover); }
  html.ui-v2 .mta-hero-head { gap: 16px; margin-bottom: 10px; }
  html.ui-v2 .mta-hero-head img { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 1px #2f5367, 0 10px 30px rgba(127, 184, 214, .18); }
  html.ui-v2 .mta-hero-head h2 { font-size: 34px; letter-spacing: -.02em; line-height: 1.1; }
  html.ui-v2 :is(.mta-block, .wg-guide, .wg-block) h3 { font-size: var(--v2-fs-label); letter-spacing: var(--v2-ls-label); }
  html.ui-v2 .mta-grid { gap: 20px 28px; }
  html.ui-v2 .mta-block { padding: 16px 18px; border-radius: 14px; background: var(--v2-surface-2); border: 1px solid var(--v2-line-soft); }

  /* гайд по вардах: карта — «вікно» E, картка точки й рядки списку — підсвітка; точки хвилею (wards-page.ts wavePoints) */
  html.ui-v2 .wg-layout { gap: 24px; margin-top: 8px; }
  html.ui-v2 .wg-map { border-radius: var(--v2-r-card); border-color: var(--v2-line); box-shadow: var(--v2-sh-2); }
  html.ui-v2 .wg-pt circle { transition: r var(--dur-2) var(--ease-spring), stroke-width var(--dur-1) var(--ease-out); }
  html.ui-v2 .wg-pt:hover circle { filter: drop-shadow(0 0 6px rgba(127, 184, 214, .8)); }
  html.ui-v2 .wg-pcard { padding: 14px 16px; border-radius: 14px; background: var(--v2-surface-2); border-color: var(--v2-line); animation: v2-fade var(--dur-3) var(--ease-out); }
  html.ui-v2 .wg-pcard.good { border-color: #2f5d8a; box-shadow: inset 3px 0 0 #3987e5; } html.ui-v2 .wg-pcard.bad { border-color: #6a4a2c; box-shadow: inset 3px 0 0 var(--bad); }
  html.ui-v2 .wg-row { transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .wg-row:hover { background: rgba(27, 34, 41, .75); }
  html.ui-v2 .wg-row.on { outline: 0; background: var(--accent-bg); box-shadow: inset 0 0 0 1px #2c4655, inset 3px 0 0 var(--accent); }
  html.ui-v2 .wg-no { transition: transform var(--dur-2) var(--ease-spring); } html.ui-v2 .wg-row:hover .wg-no { transform: scale(1.12); }
  html.ui-v2 .wg-concl a { text-underline-offset: 3px; }

  /* налаштування: заголовки E, рядок налаштування підсвічується, перемикач — з пружиною й світінням */
  html.ui-v2 .st-main { gap: 20px; }
  html.ui-v2 .st-main > .st-h1 { margin-bottom: 4px; }
  html.ui-v2 .st-h2 { font-size: 21px; letter-spacing: -.01em; }
  html.ui-v2 .st-ava { border-radius: 16px; box-shadow: 0 0 0 1px #2f5367, 0 10px 30px rgba(127, 184, 214, .18); }
  html.ui-v2 .st-row { border-top-color: var(--v2-line-soft); margin: 0 -12px; padding: 14px 12px; border-radius: 10px; transition: background-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .st-row:hover { background: rgba(27, 34, 41, .45); }
  html.ui-v2 .st-switch { border-radius: 12px; }
  html.ui-v2 .st-track { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .st-knob { transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .st-switch[aria-checked=true] .st-track { box-shadow: 0 0 12px rgba(127, 184, 214, .45); }
  html.ui-v2 .st-select { border-radius: 12px; background: rgba(14, 17, 20, .6); border-color: var(--v2-line); }
  html.ui-v2 .st-msg.good { animation: v2-fade var(--dur-3) var(--ease-out); }
  html.ui-v2 .st-data { border-color: color-mix(in srgb, var(--bad) 26%, var(--v2-line)); }

  /* «Що нового», конфіденційність, умови: «вікно» E, посилання — перемикач-пігулка, мітки розділів записів — пігулки */
  html.ui-v2 section.ip-page { max-width: 820px; margin: 36px auto 72px; }
  html.ui-v2 .ip-in { padding: 30px 34px; border-radius: var(--v2-r-card); background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-3);
    background-image: linear-gradient(180deg, rgba(127, 184, 214, .05), transparent 220px); }
  html.ui-v2 .ip-links { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(14, 17, 20, .6); border: 1px solid var(--v2-line); font-size: 13px; }
  html.ui-v2 .ip-links > * { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 9px; text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
  html.ui-v2 .ip-links a:hover { color: var(--text); }
  html.ui-v2 .ip-links:not(.v2-seg) [aria-current] { background: var(--accent-bg); box-shadow: inset 0 0 0 1px #2c4655; }
  html.ui-v2 .ip-links .v2-seg-pill { border-radius: 9px; }
  html.ui-v2 .ip-in h1 { margin: 22px 0 8px; }
  html.ui-v2 .ip-lead { font-size: 17px !important; }
  html.ui-v2 .ip-entry + .ip-entry { border-top-color: var(--v2-line-soft); margin-top: 26px; padding-top: 22px; }
  html.ui-v2 .ip-entry header h2 { font: 700 24px/1.2 var(--font-num); letter-spacing: -.01em; }
  html.ui-v2 .ip-kind h3 { display: inline-flex; align-items: center; height: 24px; margin: 16px 0 6px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--v2-line-accent);
    background: rgba(24, 37, 45, .7); font-size: var(--v2-fs-label); letter-spacing: var(--v2-ls-label); }
  html.ui-v2 .ip-fixed h3 { border-color: rgba(232, 160, 92, .35); background: rgba(40, 28, 18, .55); }
  html.ui-v2 .ip-sec h2 { font-size: 21px; letter-spacing: -.01em; }
  /* «Відгук» (/feedback) — те саме «вікно» E, що й інфо-сторінки */
  html.ui-v2 section.fb-page { max-width: 600px; margin: 36px auto 72px; }
  html.ui-v2 .fb-page-in { padding: 28px 30px; border-radius: var(--v2-r-card); background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-3);
    background-image: linear-gradient(180deg, rgba(127, 184, 214, .05), transparent 200px); }
  html.ui-v2 .fb-page-in :is(select, textarea, input) { border-radius: 12px; background: rgba(14, 17, 20, .6); border-color: var(--v2-line);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .fb-page-in :is(select, textarea, input):focus { border-color: var(--v2-line-hover); box-shadow: 0 0 0 4px rgba(127, 184, 214, .12); }
  /* профіль з прихованими матчами: підказка «як відкрити» — картка E, а не плоска рамка v1 */
  html.ui-v2 .pp-hidden { margin: 0; padding: 16px 20px; border-radius: 14px; border-color: var(--v2-line); background: var(--v2-surface-2); box-shadow: inset 3px 0 0 var(--accent);
    font-size: 14px; line-height: 1.55; color: var(--text-2); }
  html.ui-v2 .pp-hidden b { color: var(--text); }
  /* віконце «Що нового» при вході — теж «вікно» E */
  html.ui-v2 :is(.wn-dialog, .fb-dialog) { border-radius: var(--v2-r-card); background: var(--v2-surface); border-color: var(--v2-line); box-shadow: var(--v2-sh-3);
    background-image: linear-gradient(180deg, rgba(127, 184, 214, .06), transparent 200px); }
  html.ui-v2 :is(.wn-dialog, .fb-dialog)[open] { animation: v2-rise var(--dur-4) var(--ease-out); }
  html.ui-v2 .fb-dialog :is(select, textarea, input) { border-radius: 12px; background: rgba(14, 17, 20, .6); border-color: var(--v2-line); }
  html.ui-v2 :is(.wn-dialog, .fb-dialog)::backdrop { background: rgba(5, 8, 10, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  html.ui-v2 .wn-dialog h2 { font-size: 24px; letter-spacing: -.015em; }
  html.ui-v2 .wn-actions { border-top-color: var(--v2-line-soft); }

  /* «Матчі» гравця: результат — перемикач з підкладкою, рядок матчу — м'яка підсвітка */
  html.ui-v2 .mt-seg { gap: 2px; padding: 3px; border-radius: 12px; background: rgba(14, 17, 20, .6); border: 1px solid var(--v2-line); }
  html.ui-v2 .mt-seg button { min-height: 36px; border: 0; border-radius: 9px; background: transparent; transition: color var(--dur-2) var(--ease-out); }
  html.ui-v2 .mt-seg button[aria-pressed="true"] { background: var(--accent-bg); box-shadow: inset 0 0 0 1px #2c4655; }
  html.ui-v2 .mt-seg.v2-seg button[aria-pressed="true"] { background: transparent; box-shadow: none; }
  html.ui-v2 .mt-seg button:not([aria-pressed="true"]):hover { background: transparent; color: var(--text); }
  html.ui-v2 .mt-seg .v2-seg-pill { border-radius: 9px; }
  html.ui-v2 .mt-filters select { border-radius: 12px; background: rgba(14, 17, 20, .6); border-color: var(--v2-line); }
  html.ui-v2 .mt-row { transition: background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mt-row:hover { background: rgba(27, 34, 41, .6); }
  html.ui-v2 .mt-hero img { transition: transform var(--dur-2) var(--ease-spring); }
  html.ui-v2 .mt-row:hover .mt-hero img { transform: scale(1.06); }

  /* стани: завантаження (.is-loading, .pp-loading, «Матчі» без списку) — пульс і скелет рядків; помилка / «ще рахуємо» (.pp-limit) — тепла картка; порожньо (.empty) — пунктир */
  html.ui-v2 :is(p.is-loading, .player-page > p.hint.pp-loading, p.hint.mt-hist) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; color: var(--text-2); }
  /* щось іде просто зараз — кружечок-спінер (af-spin з index.html, рішення aYo 14а, 2.11.2026); без руху — нерухоме кільце з дугою */
  html.ui-v2 :is(p.is-loading, .player-page > p.hint.pp-loading, p.hint.mt-hist)::before { content: ''; flex: none; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(127, 184, 214, .22); border-top-color: var(--accent); animation: af-spin 1s linear infinite; }
  html.ui-v2 :is(p.is-loading, p.hint.mt-hist)::after { content: ''; flex: 1 1 100%; height: 196px; margin-top: 10px; border-radius: 12px;
    background: repeating-linear-gradient(180deg, transparent 0 14px, #1a2128 14px 34px, transparent 34px 48px) 0 0 / 100% 100%,
      linear-gradient(100deg, transparent 30%, rgba(127, 184, 214, .05) 50%, transparent 70%) 0 0 / 300% 100%;
    -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); animation: v2-shimmer 1.6s linear infinite; }
  html.ui-v2 .player-page > p.hint.pp-loading { padding: 40px 24px; }
  html.ui-v2 :is(.lb-card, .pp-main, .player-page, .ip-in) .pp-limit { padding: 11px 14px 11px 16px; border-radius: 12px; border-color: rgba(232, 193, 90, .32); background: rgba(232, 193, 90, .06);
    box-shadow: inset 3px 0 0 #e8c15a; line-height: 1.45; }
  html.ui-v2 :is(.lb-card, .pp-main) > div > p.empty, html.ui-v2 .lb-card p.empty, html.ui-v2 .player-page > p.empty {
    padding: 18px 20px; border-radius: 12px; border: 1px dashed var(--v2-line); color: var(--muted); text-align: center; }

  /* ---------- Пауза поза екраном / у прихованій вкладці (motion.ts pauseOffscreen ставить m-off) ---------- */
  html.ui-v2 .m-off, html.ui-v2 .m-off * { animation-play-state: paused !important; }

  /* ---------- Переходи: між сторінками (повне перезавантаження) і розділами (document.startViewTransition, motion.ts viewTransition) ---------- */
  /* сторінка цілком — лише згасання (без зсуву: у переході розділу незмінна частина сторінки не «стрибає»); шапка й лого стоять */
  ::view-transition-old(root) { animation: v2-fade-out var(--dur-out, 220ms) var(--ease-in, ease-in) both; }
  ::view-transition-new(root) { animation: v2-fade var(--dur-3, 320ms) var(--ease-out, ease-out) both; }
  ::view-transition-group(af-top), ::view-transition-group(af-logo) { animation: none; }
  /* вміст розділу (motion.ts viewTransition дає йому ім'я v2-panel на час переходу): старий іде вгору, новий підіймається */
  ::view-transition-old(v2-panel) { animation: v2-vt-out var(--dur-out, 220ms) var(--ease-in, ease-in) both; }
  ::view-transition-new(v2-panel) { animation: v2-vt-in var(--dur-3, 320ms) var(--ease-out, ease-out) both; }
  ::view-transition-group(v2-panel) { animation-duration: var(--dur-3, 320ms); animation-timing-function: var(--ease-in-out, ease); }
}
/* навігація між сторінками з плавним переходом — лише коли цей файл підключено (тобто з v2) і лише на ПК */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

@property --fog-r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

@keyframes v2-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes v2-pop-chip { 40% { transform: scale(1.08); } }
@keyframes v2-breathe { 50% { opacity: .35; transform: scale(.7); } }
@keyframes v2-shimmer { to { background-position: -150% 0; } }
@keyframes v2-rise { from { opacity: 0; transform: translateY(var(--m-shift, 12px)) scale(var(--m-scale, .98)); } }
@keyframes v2-mvp { 0% { box-shadow: 0 0 0 0 rgba(232, 193, 90, .7); } 70% { box-shadow: 0 0 0 calc(4px * var(--m-pulse, 2.2)) rgba(232, 193, 90, 0); } 100% { box-shadow: 0 0 12px rgba(232, 193, 90, .35); } }
@keyframes v2-fog-clear { from { opacity: 1; transform: scale(.25); } 40% { opacity: 1; transform: scale(.75); } to { opacity: 0; transform: scale(2.2); } }
@keyframes v2-kill-in { from { opacity: 0; transform: translateX(calc(1.5 * var(--m-shift, 12px))); } }
@keyframes v2-fade { from { opacity: 0; } }
@keyframes v2-grow { from { transform: scaleX(0); } }
@keyframes v2-fade-out { to { opacity: 0; } }
@keyframes v2-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(var(--m-pulse, 2.2)); } }
@keyframes v2-vt-out { to { opacity: 0; transform: translateY(calc(-.5 * var(--m-shift, 12px))); } }
@keyframes v2-vt-in { from { opacity: 0; transform: translateY(var(--m-shift, 12px)); } }

/* ---------- Без руху: prefers-reduced-motion (і клас m-reduce — для перевірки на сторінці-демо) ----------
   Одне правило для всього v2: без зсувів, масштабу, розмиття й паралаксу; лишається лише коротке згасання (≤ 150 мс); нескінченні анімації стоять; лічильники — одразу число. */
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  html.ui-v2 { --m-k: .3; --m-shift: 0px; --m-scale: 1; --m-blur: 0px; --m-stagger: 0ms; --m-lift: 0px; --m-count: 0ms; --m-pulse: 1; --m-parallax: 0; --ease-spring: var(--ease-out); scroll-behavior: auto; }
  html.ui-v2 *, html.ui-v2 *::before, html.ui-v2 *::after { animation-iteration-count: 1 !important; animation-duration: 1ms !important; transition-delay: 0s !important; }
  html.ui-v2 .v2-skel { animation: none !important; }
}
@media (min-width: 1200px) {
  html.ui-v2.m-reduce { --m-k: .3; --m-shift: 0px; --m-scale: 1; --m-blur: 0px; --m-stagger: 0ms; --m-lift: 0px; --m-count: 0ms; --m-pulse: 1; --m-parallax: 0; --ease-spring: var(--ease-out); scroll-behavior: auto; }
  html.ui-v2.m-reduce *, html.ui-v2.m-reduce *::before, html.ui-v2.m-reduce *::after { animation-iteration-count: 1 !important; animation-duration: 1ms !important; transition-delay: 0s !important; }
  html.ui-v2.m-reduce .v2-skel { animation: none !important; }
}

/* ================= Профіль v2: «Тренер» і комбінований профіль (web/src/player-coach.ts; прототип prototypes/profile-proto/profile.html у гілці design/profile-proto) =================
   Лише з даними /api/player/<id>/coach (прапорець AFTERFOG_COACH) і лише v2 від 1200 px; без них — профіль v2 як був. */
@media (min-width: 1200px) {
  html.ui-v2 #summary[hidden] { display: none; }
  html.ui-v2 :is(.pc-acc, .pc-win, .pc-heroes, .pc-plan-w) { scroll-margin-top: calc(var(--af-top-h, 69px) + 12px); }
  html.ui-v2 .pc-main { display: flex; flex-direction: column; gap: 18px; }
  html.ui-v2 .pc-main > .pp-overview { display: flex; flex-direction: column; gap: 18px; }
  html.ui-v2 .pc-win .ppv-bar { gap: 8px; }
  html.ui-v2 .pc-wt { font: 800 13px/1 var(--font); letter-spacing: .02em; color: var(--text); }
  html.ui-v2 .pc-wh { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.ui-v2 .pc-pad { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
  html.ui-v2 .pc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  html.ui-v2 .pc-sp { flex: 1; }
  html.ui-v2 .pc-tiny { font-size: 12px; color: var(--muted); }
  html.ui-v2 .pc-h2 { font: 800 22px/1.2 var(--font); letter-spacing: -.01em; }
  html.ui-v2 .pc-h3 { font: 800 16px/1.25 var(--font); }
  html.ui-v2 .pc-sh { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  html.ui-v2 .pc-note { font-size: 11.5px; color: var(--faint); line-height: 1.45; }
  html.ui-v2 .pc-noimg { display: inline-block; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); flex: none; }
  html.ui-v2 .pc-meter { position: relative; display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
  html.ui-v2 .pc-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
  html.ui-v2 .pc-meter > i.b { background: var(--bad); } html.ui-v2 .pc-meter > i.old { background: #5b6772; } html.ui-v2 .pc-meter.dim > i { opacity: .45; }
  html.ui-v2 .pc-tag { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  html.ui-v2 .pc-tag.up { background: var(--good-bg); color: var(--good-text); } html.ui-v2 .pc-tag.down { background: var(--bad-bg); color: var(--bad-text); } html.ui-v2 .pc-tag.eq { background: var(--panel-2); color: var(--text-2); }
  html.ui-v2 .pc-dots { display: inline-flex; gap: 4px; } html.ui-v2 .pc-dots i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-strong); }
  html.ui-v2 .pc-dots i.ok { background: var(--accent); border-color: var(--accent); } html.ui-v2 .pc-dots i.no { background: rgba(232, 160, 92, .35); border-color: var(--bad); }
  /* шапка: останні 10 квадратиками, кнопка «Поділитися карткою» */
  html.ui-v2 .pc-streak { display: flex; gap: 3px; height: 34px; align-items: flex-end; } html.ui-v2 .pc-streak i { width: 11px; height: 26px; border-radius: 3px; background: var(--bad); } html.ui-v2 .pc-streak i.w { background: var(--accent); }
  html.ui-v2 .pp-kpi-v.pc-kpi-streak { font-size: 0; }
  html.ui-v2 .pc-share-btn { height: 28px; min-height: 0; padding: 0 12px; font-size: 12.5px; font-weight: 700; } /* min-height 44 px від .btn виносив кнопку за рядок шапки (38 px) */
  /* «Тренер» */
  html.ui-v2 .pc-lead { margin: 0; font: 600 17px/1.5 var(--font); color: var(--text-2); max-width: 980px; }
  /* 1–3 картки звичок (і пункти плану) — на всю ширину: порожніх колонок справа немає (знахідка seeker 28.10) */
  html.ui-v2 .pc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
  html.ui-v2 .pc-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; background: var(--v2-surface-2); border: 1px solid var(--v2-line); min-width: 0; }
  html.ui-v2 .pc-card h3 { margin: 2px 0 0; font: 800 19px/1.2 var(--font); padding-right: 40px; text-transform: none; letter-spacing: -.01em; color: var(--text); }
  html.ui-v2 :is(.pc-turns, .pc-ev, .pc-acc-link, .pc-form-svg) a, html.ui-v2 :is(.pc-ev, .pc-acc-link) { text-decoration: none; }
  html.ui-v2 .pc-n { position: absolute; top: 12px; right: 16px; font: 700 46px/1 var(--font-num); color: #24303a; }
  html.ui-v2 .pc-fig { font: 700 34px/1.05 var(--font-num); color: var(--bad-text); letter-spacing: -.02em; }
  html.ui-v2 .pc-fig small { font: 700 14px var(--font); color: var(--muted); margin-left: 6px; letter-spacing: 0; }
  html.ui-v2 .pc-sub { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
  html.ui-v2 .pc-blk { display: flex; flex-direction: column; gap: 7px; }
  html.ui-v2 .pc-wr { display: grid; grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
  html.ui-v2 .pc-v { font: 700 13px var(--font-num); text-align: right; white-space: nowrap; }
  html.ui-v2 .pc-prog { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  html.ui-v2 .pc-from { font: 700 20px var(--font-num); color: var(--muted); } html.ui-v2 .pc-to { font: 700 24px var(--font-num); } html.ui-v2 .pc-arrow { color: var(--faint); }
  html.ui-v2 .pc-spark { display: block; width: 100%; height: 40px; color: var(--bad); }
  html.ui-v2 .pc-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(14, 17, 20, .5);
    border: 1px solid transparent; font-size: 12.5px; color: var(--text-2); transition: border-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .pc-ev:hover { border-color: var(--v2-line-hover); color: var(--text-2); } html.ui-v2 .pc-ev b { color: var(--text); }
  html.ui-v2 .pc-ev img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
  html.ui-v2 .pc-play { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 8px; background: var(--accent-bg); border: 1px solid #2f5367; color: var(--good-text); font-weight: 800; font-size: 12px; }
  html.ui-v2 .pc-goal { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
  html.ui-v2 .pc-plan-w { display: flex; flex-direction: column; gap: 10px; }
  html.ui-v2 .pc-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
  html.ui-v2 .pc-plan > div { padding: 14px 16px; border-radius: 12px; background: var(--v2-surface-2); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-2); }
  html.ui-v2 .pc-plan b { color: var(--text); font-size: 14.5px; }
  html.ui-v2 .pc-need { margin: 0; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--v2-line); color: var(--text-2); font-size: 14px; }
  /* пари вікон: зараз / місяць тому | переломні */
  html.ui-v2 .pc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } html.ui-v2 .pc-duo.one { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .pc-pts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } html.ui-v2 .pc-pts .pp-pt { margin: 0; }
  html.ui-v2 .pc-vs { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; font-size: 14px; }
  html.ui-v2 .pc-vs > div { padding: 9px 10px; border-bottom: 1px solid var(--v2-line-soft); min-width: 0; }
  html.ui-v2 .pc-vs-hd { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  html.ui-v2 .pc-vs-v { font: 700 16px var(--font-num); display: flex; align-items: center; gap: 10px; } html.ui-v2 .pc-vs-v.old { color: var(--muted); }
  html.ui-v2 .pc-vs-v .pc-meter { flex: 1; height: 6px; max-width: 110px; }
  html.ui-v2 .pc-turns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.ui-v2 .pc-turn { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--v2-surface-2); border: 1px solid transparent; color: var(--text);
    transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  html.ui-v2 .pc-turn:hover { border-color: var(--v2-line-hover); transform: translateY(calc(-1 * var(--m-lift, 2px))); color: var(--text); }
  html.ui-v2 .pc-turn img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
  html.ui-v2 .pc-k { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } html.ui-v2 .pc-turn.g .pc-k { color: var(--good-text); } html.ui-v2 .pc-turn.b .pc-k { color: var(--bad-text); }
  html.ui-v2 .pc-tt { font-size: 13px; color: var(--text-2); line-height: 1.45; }
  /* стрічка форми й місяці (у «Матчах») */
  html.ui-v2 .pc-form { display: flex; flex-direction: column; gap: 12px; }
  html.ui-v2 .pc-form-card { padding: 18px 20px; }
  html.ui-v2 .pc-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
  html.ui-v2 .pc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
  html.ui-v2 .pc-legend i.w { background: #7fb8d6; } html.ui-v2 .pc-legend i.l { background: #e8a05c; } html.ui-v2 .pc-legend i.avg { background: #f2f4f6; height: 2px; vertical-align: 3px; }
  html.ui-v2 .pc-strip { min-height: 224px; } html.ui-v2 .pc-form-svg { display: block; overflow: visible; }
  html.ui-v2 .pc-bar { cursor: pointer; transition: opacity var(--dur-1, 120ms) var(--ease-out); } html.ui-v2 .pc-bar.w { fill: #7fb8d6; opacity: .9; } html.ui-v2 .pc-bar.l { fill: #e8a05c; opacity: .7; }
  html.ui-v2 .pc-bar:hover { opacity: .5; }
  html.ui-v2 .pc-one { stroke: #6f7a85; stroke-dasharray: 4 4; } html.ui-v2 .pc-ax { font-size: 11px; fill: #8f9aa4; }
  html.ui-v2 .pc-roll { fill: none; stroke: #f2f4f6; stroke-width: 2; stroke-linejoin: round; } html.ui-v2 .pc-star { font-size: 11px; fill: #f2d48a; }
  html.ui-v2 .pc-star.ace { opacity: .7; } /* ACE за v4 (aYo 1.11, 28б): ☆, стриманіше за ★ MVP */
  html.ui-v2 .pc-br { fill: none; stroke-width: 1.5; } html.ui-v2 .pc-br.g { stroke: #a9d2e6; } html.ui-v2 .pc-br.b { stroke: #f0b27a; }
  html.ui-v2 .pc-brt { font-size: 11px; font-weight: 700; } html.ui-v2 .pc-brt.g { fill: #a9d2e6; } html.ui-v2 .pc-brt.b { fill: #f0b27a; }
  html.ui-v2 .pc-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  html.ui-v2 .pc-mo { padding: 10px 12px; border-radius: 12px; background: var(--v2-surface-2); } html.ui-v2 .pc-mo-n { font-size: 13px; }
  html.ui-v2 .pc-mo b.good { color: var(--good-text); } html.ui-v2 .pc-mo b.bad { color: var(--bad-text); } html.ui-v2 .pc-mo .pc-row > b:last-child { font: 700 18px var(--font-num); }
  html.ui-v2 .pc-mo-d { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; } html.ui-v2 .pc-mo-d i { width: 8px; height: 8px; border-radius: 2px; background: var(--bad); opacity: .85; } html.ui-v2 .pc-mo-d i.w { background: var(--accent); }
  /* «Друзі»: з ким виграєш частіше */
  html.ui-v2 .pc-party-w { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  html.ui-v2 .pc-party { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; } html.ui-v2 .pc-party .pc-meter { height: 14px; }
  html.ui-v2 .pc-party.few { color: var(--muted); }
  /* розділи акордеоном (рішення 28) */
  html.ui-v2 .pc-secs-w { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
  html.ui-v2 .pc-secs { display: flex; flex-direction: column; gap: 10px; }
  html.ui-v2 .pc-acc { display: block; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r-card); box-shadow: var(--v2-sh-1); color: var(--text); transition: border-color var(--dur-2) var(--ease-out); }
  html.ui-v2 .pc-acc:hover { border-color: #33414c; color: var(--text); }
  html.ui-v2 .pc-acc-s { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) auto 24px; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--v2-r-card); }
  html.ui-v2 .pc-acc-s::-webkit-details-marker { display: none; }
  html.ui-v2 .pc-acc-s:hover { background: rgba(127, 184, 214, .04); }
  html.ui-v2 .pc-acc-sub { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-v2 .pc-acc-nm { font: 800 17px var(--font); } html.ui-v2 .pc-acc-kv { font: 700 21px var(--font-num); text-align: right; }
  html.ui-v2 .pc-acc-ch { color: var(--faint); text-align: center; transition: transform var(--dur-2) var(--ease-out); } html.ui-v2 details.pc-acc[open] .pc-acc-ch { transform: rotate(180deg); }
  html.ui-v2 details.pc-acc[open] > .pc-acc-s { border-bottom: 1px solid var(--border); border-radius: var(--v2-r-card) var(--v2-r-card) 0 0; }
  html.ui-v2 .pc-acc-pad { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; animation: v2-vt-in var(--dur-3, 320ms) var(--ease-out, ease-out) both; }
  html.ui-v2 .pc-acc-pad > .pp-card, html.ui-v2 .pc-acc-pad > .pp-group, html.ui-v2 .pc-acc-pad > section { margin: 0; }
  /* картка гравця — вікно поверх сторінки */
  html.ui-v2 .pc-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5, 8, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity var(--dur-3, 320ms) var(--ease-out, ease-out); }
  html.ui-v2 .pc-modal.on { opacity: 1; }
  html.ui-v2 .pc-box { width: min(980px, 92vw); container-type: inline-size; padding: 20px; border-radius: 20px; background: var(--v2-surface); border: 1px solid var(--v2-line); box-shadow: var(--v2-sh-3);
    display: flex; flex-direction: column; gap: 14px; transform: translateY(12px) scale(.98); transition: transform var(--dur-3, 320ms) var(--ease-out, ease-out); }
  html.ui-v2 .pc-modal.on .pc-box { transform: none; }
  html.ui-v2 .pc-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
  html.ui-v2 .pc-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer; }
  html.ui-v2 .pc-seg button.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 0 0 0 1px #2f5367; }
  html.ui-v2 .pc-s { position: relative; aspect-ratio: 1200 / 630; border-radius: 2.6cqw; overflow: hidden; padding: 3.6cqw 4cqw 5cqw; display: grid; grid-template-columns: minmax(0, 1fr) 33%; gap: 3cqw; font-size: 1.9cqw;
    background: radial-gradient(60cqw 40cqw at 88% 0%, rgba(127, 184, 214, .28), transparent 70%), radial-gradient(50cqw 36cqw at 0% 100%, rgba(232, 160, 92, .16), transparent 70%), linear-gradient(160deg, #17222a, #0f1418 70%);
    border: 1px solid #2f5367; color: var(--text); }
  /* квадрат (знахідка aYo 30.10: плитки налазили на нижній підпис): шрифт від ширини вікна, а квадрат — 62 % її, тож кегль менший; герої — в один рядок,
     плитки — стільки колонок, скільки плиток; знизу місце під підпис */
  html.ui-v2 .pc-s.sq { aspect-ratio: 1 / 1; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2.2cqw; font-size: 1.6cqw; width: 62%; margin: 0 auto; padding-bottom: 5.5cqw; }
  html.ui-v2 .pc-s.sq .pc-s-main { gap: .9em; } html.ui-v2 .pc-s.sq .pc-s-heroes { flex-wrap: nowrap; } html.ui-v2 .pc-s.sq .pc-s-heroes > div { min-width: 0; }
  html.ui-v2 .pc-s.sq .pc-s-side { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  html.ui-v2 .pc-s-main { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; } html.ui-v2 .pc-s-top { display: flex; align-items: center; gap: 1em; }
  html.ui-v2 .pc-s-ava { width: 3.6em; height: 3.6em; border-radius: 1em; flex: none; display: grid; place-items: center; object-fit: cover; background: linear-gradient(135deg, #2b3f4c, #1c272f); color: var(--accent); font-weight: 800; font-size: 1.3em; box-shadow: 0 0 0 1px #2f5367; }
  html.ui-v2 .pc-s-name { font-weight: 800; font-size: 2.2em; line-height: 1; overflow-wrap: anywhere; } html.ui-v2 .pc-s-sub { margin-top: .3em; color: var(--muted); font-size: .9em; }
  html.ui-v2 .pc-s-arch { font-weight: 800; font-size: 1.7em; line-height: 1.1; background: var(--v2-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
  html.ui-v2 .pc-s-stats { display: flex; gap: 1.8em; flex-wrap: wrap; } html.ui-v2 .pc-s-stats b { display: block; font: 700 2.1em/1 var(--font-num); } html.ui-v2 .pc-s-stats b.good { color: var(--good-text); }
  html.ui-v2 .pc-s-stats span { font-size: .75em; color: var(--muted); }
  html.ui-v2 .pc-s-heroes { display: flex; gap: .6em; margin-top: auto; flex-wrap: wrap; }
  html.ui-v2 .pc-s-heroes > div { display: flex; align-items: center; gap: .5em; padding: .35em .7em .35em .35em; border-radius: .8em; background: rgba(14, 17, 20, .55); border: 1px solid var(--border); font-size: .8em; line-height: 1.25; }
  html.ui-v2 .pc-s-heroes img, html.ui-v2 .pc-s-heroes .pc-noimg { width: 2.4em; height: 2.4em; border-radius: .6em; object-fit: cover; }
  html.ui-v2 .pc-s-dim { color: var(--muted); }
  html.ui-v2 .pc-s-side { display: flex; flex-direction: column; gap: .8em; } html.ui-v2 .pc-s-box { padding: .8em 1em; border-radius: 1em; background: rgba(14, 17, 20, .55); border: 1px solid var(--border); font-size: .9em; }
  html.ui-v2 .pc-s-k { font-size: .7em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } html.ui-v2 .pc-s-mmr { font: 700 2em/1.1 var(--font-num); }
  html.ui-v2 .pc-s-li { font-weight: 800; } html.ui-v2 .pc-s-li .good { color: var(--good-text); } html.ui-v2 .pc-s-li .bad { color: var(--bad-text); }
  html.ui-v2 .pc-s-foot { position: absolute; left: 4cqw; bottom: 1.8cqw; font-size: .7em; color: var(--faint); letter-spacing: .04em; }
}
/* ================= Розділи матчу v2 — рамки (web/src/match-section.ts, V2Frame; прототипи prototypes/match-sections у гілці design/match-sections-proto, рішення aYo 26.10) =================
   Лише html.ui-v2 від 1200 px. story — «Стрічка» (Смерті), grid — «Дуель» 2 × 2 (Лінія). Дані, тексти й порядок блоків — ті самі; змінено розкладку. */
@media (min-width: 1200px) {
  html.ui-v2 .mp-sec.v2f { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  /* «головне одним поглядом» — один рядок рівних клітинок з розділювачами (значення над підписом) */
  html.ui-v2 .v2f .mp-glance { flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 16px; }
  html.ui-v2 .v2f .mp-gl { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; }
  html.ui-v2 .v2f .mp-gl + .mp-gl { border-left: 1px solid var(--border); }
  html.ui-v2 .v2f .mp-gl > b { font-size: 28px; line-height: 1.05; }
  html.ui-v2 .v2f .mp-gl > b .mp-who { font-size: 15px; line-height: 1.6; }
  html.ui-v2 .v2f .mp-gl > span { max-width: none; font-size: 12.5px; line-height: 1.35; }
  /* блоки під рамкою: по три в ряд (6 підколонок: третина / половина залишку / уся ширина) */
  html.ui-v2 .v2c3 .mp-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html.ui-v2 .v2c3 .mp-flow > [data-w=half]:not(.solo) { grid-column: span 2; }
  html.ui-v2 .v2c3 .mp-flow > [data-w=half].pair:not(.solo) { grid-column: span 3; }
  /* шари + карта + міні-програвач */
  html.ui-v2 .v2f .mp-v2-map { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  html.ui-v2 .v2f .mp-v2-map .rp-map { max-width: none; margin: 0; border-color: var(--v2-line); box-shadow: var(--v2-sh-2); }
  html.ui-v2 .mp-v2-evh { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 0 0 10px; }
  html.ui-v2 .mp-v2-evh b { font: 800 14px/1.3 var(--font); color: var(--text); } html.ui-v2 .mp-v2-evh span { font-size: 12px; color: var(--muted); }

  /* ---- story: стрічка | липка карта ---- */
  html.ui-v2 .mp-v2-story { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, var(--mp-fit, 440px), 460px); gap: 22px; align-items: start; }
  html.ui-v2 .mp-v2-mapcol { position: sticky; top: calc(var(--af-top-h, 69px) + var(--mp-ctx-h, 120px) + 12px); min-width: 0; }
  html.ui-v2 .mp-v2-rail { min-width: 0; }
  html.ui-v2 .mp-v2-steps { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 26px; }
  html.ui-v2 .mp-v2-steps::before { content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #2a343d, #1a2127); }
  html.ui-v2 .mp-v2-step { position: relative; border: 1px solid var(--v2-line); border-radius: 14px; background: var(--v2-surface); box-shadow: var(--v2-sh-1);
    scroll-margin-top: calc(var(--af-top-h, 69px) + var(--mp-ctx-h, 120px) + 12px); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .mp-v2-step::before { content: ''; position: absolute; left: -24px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: #0e1114; border: 2px solid #3a4752;
    transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .mp-v2-step.bad::before { border-color: var(--bad); } html.ui-v2 .mp-v2-step.good::before { border-color: var(--good); }
  html.ui-v2 .mp-v2-step.on { border-color: var(--v2-line-hover); box-shadow: 0 0 0 1px rgba(127, 184, 214, .25), 0 16px 40px rgba(0, 0, 0, .35); }
  html.ui-v2 .mp-v2-step.on::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(127, 184, 214, .18); }
  html.ui-v2 .mp-v2-step-h { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 0; padding: 12px 16px;
    border: 0; border-radius: 14px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-v2-step-h:hover { background: rgba(27, 34, 41, .5); }
  html.ui-v2 .mp-v2-step.on > .mp-v2-step-h { border-radius: 14px 14px 0 0; }
  html.ui-v2 .mp-v2-step-h .t { font: 700 16px var(--font-num); }
  html.ui-v2 .mp-v2-step-h .x { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; font-weight: 700; }
  html.ui-v2 .mp-v2-step-h .tg { font-size: 12px; color: var(--muted); }
  html.ui-v2 .mp-v2-step-b { padding: 4px 18px 18px; border-top: 1px solid var(--v2-line-soft); animation: v2-rise var(--dur-3) var(--ease-out) both; }
  /* картка смерті в кроці: рядки | ціна, ульта, обставини; «Що передувало» — двома колонками */
  html.ui-v2 .mp-dc-v2 { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
  html.ui-v2 .mp-dc-v2 .mp-card-h { align-items: center; }
  html.ui-v2 .mp-dc-g2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  html.ui-v2 .mp-dc-v2 .mp-kv { grid-template-columns: 130px minmax(0, 1fr); }
  html.ui-v2 .mp-dc-v2 > .prelude { columns: 2 260px; column-gap: 24px; padding-top: 12px; border-top: 1px solid var(--v2-line-soft); }
  html.ui-v2 .mp-dc-v2 > .prelude > .prelude-title { column-span: all; margin-bottom: 4px; }
  html.ui-v2 .mp-dc-v2 > .prelude .prelude-sec { break-inside: avoid; margin: 0 0 12px; }

  /* ---- grid: вікно 2 × 2 (угорі — top(), унизу — карта | події й картка); колонки однакові в обох рядах ---- */
  html.ui-v2 .mp-v2-win { gap: 0; padding: 0; overflow: hidden; }
  html.ui-v2 .mp-v2-win .mpw-bar .pl-badge { font-size: 11px; }
  html.ui-v2 .mp-v2-grid { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
  html.ui-v2 .mp-v2-grid > * { min-width: 0; padding: 18px 20px; }
  html.ui-v2 .mp-v2-grid > :nth-child(even) { border-left: 1px solid var(--border); }
  html.ui-v2 .mp-v2-grid > :nth-child(n+3) { border-top: 1px solid var(--border); }
  html.ui-v2 .mp-v2-grid > .mp-v2-c:empty { display: none; }
  html.ui-v2 .mp-v2-grid > .mp-v2-c:empty ~ * { border-top: 0; }
  html.ui-v2 .mp-v2-c > .mp-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* картка в клітинці вікна — без власної рамки */
  html.ui-v2 .mp-v2-c .mp-nw { max-height: 300px; } /* графік networth на всю ширину клітинки */
  html.ui-v2 .mp-v2-evs { display: flex; flex-direction: column; gap: 12px; }
  html.ui-v2 .mp-v2-evs .mp-panel-card[hidden] { display: none; }
  html.ui-v2 .mp-v2-rows { display: flex; flex-direction: column; gap: 4px; }
  html.ui-v2 .mp-v2-evcard { display: flex; flex-direction: column; gap: 10px; animation: v2-rise var(--dur-3) var(--ease-out) both; }
  html.ui-v2 .mp-v2-evcard .mp-card-h { align-items: center; }
  html.ui-v2 .mp-v2-evcard .mp-kv { grid-template-columns: 140px minmax(0, 1fr); }
  html.ui-v2 .mp-v2-evcard p { margin: 0; }
  /* «Дуель»: вердикт великим, смуги «гравець / суперник» на 10:00 */
  html.ui-v2 .mp-v2-duel { display: flex; flex-direction: column; gap: 10px; }
  html.ui-v2 .mp-v2-duel p { margin: 0; }
  html.ui-v2 .mp-v2-verdict { font: 800 30px/1.1 var(--font); letter-spacing: -.01em; color: var(--text); }
  html.ui-v2 .mp-v2-verdict.good { color: var(--good); } html.ui-v2 .mp-v2-verdict.bad { color: var(--bad); }
  html.ui-v2 .mp-v2-verdict small { display: block; margin-top: 6px; font: 600 13px var(--font); color: var(--muted); }
  html.ui-v2 .mp-v2-bars { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 2px; }
  html.ui-v2 .mp-v2-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
  html.ui-v2 .mp-v2-leg span:first-child { font: 700 12px var(--font-num); color: var(--text-2); }
  html.ui-v2 .mp-v2-leg i, html.ui-v2 .mp-v2-bar .tr i { display: inline-block; }
  html.ui-v2 .mp-v2-leg i { width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
  html.ui-v2 .mp-v2-leg i.me, html.ui-v2 .mp-v2-bar .tr i.me { background: var(--accent); }
  html.ui-v2 .mp-v2-leg i.op, html.ui-v2 .mp-v2-bar .tr i.op { background: var(--bad); }
  html.ui-v2 .mp-v2-bar .lb { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
  html.ui-v2 .mp-v2-bar .lb b { color: var(--text); font: 700 14px var(--font-num); }
  html.ui-v2 .mp-v2-bar .tr { display: flex; height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: #1a2127; }
  html.ui-v2 .mp-v2-bar .tr i { height: 100%; transform-origin: left; animation: v2-grow var(--dur-4) var(--ease-out) both; }
  html.ui-v2 .mp-v2-bar .tr i.op { opacity: .75; }
  html.ui-v2 .mp-v2-bar .df { margin-top: 4px; }
}
/* ---- Розділи матчу v2, пара 2: scene (Смоуки А) і tiles (Бійки Б) ---- */
@media (min-width: 1200px) {
  html.ui-v2 .mp-v2-win > .mpw-bar .mpw-tag { font-size: 12px; font-weight: 500; }
  html.ui-v2 :is(.mp-v2-scene, .mp-v2-detail) > .mp-panel-card { min-width: 0; overflow: visible; }
  html.ui-v2 :is(.mp-v2-scene, .mp-v2-detail) > .mp-panel-card > .mp-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* картка в клітинці вікна — без власної рамки */
  /* scene: список | шари й карта | картка */
  html.ui-v2 .mp-v2-scene { display: grid; grid-template-columns: clamp(200px, 17vw, 270px) minmax(0, 1fr) clamp(280px, 25vw, 400px); min-height: 520px; }
  html.ui-v2 .mp-v2-scene > * { min-width: 0; } html.ui-v2 .mp-v2-scene > * + * { border-left: 1px solid var(--border); }
  html.ui-v2 .mp-v2-scene > .mp-v2-rail { padding: 10px 8px; max-height: 680px; overflow-y: auto; scrollbar-width: thin; }
  html.ui-v2 .mp-v2-scene > .mp-v2-map { padding: 14px; background: radial-gradient(120% 80% at 50% 0%, rgba(127, 184, 214, .05), transparent 60%); }
  html.ui-v2 .mp-v2-scene > .mp-panel-card { padding: 18px 20px; max-height: 720px; overflow-y: auto; scrollbar-width: thin; }
  html.ui-v2 .mp-v2-scene .mp-v2-map .rp-map { max-width: min(100%, var(--mp-fit, 560px)); margin: 0 auto; }
  html.ui-v2 .mp-v2-scene .mp-ev .x { white-space: normal; }
  /* tiles: крива нагорі, ряд карток бійок, вікно «картка | карта» */
  html.ui-v2 .mp-v2-above[hidden] { display: none; }
  html.ui-v2 .mp-v2-curve .mpw-bar { flex-wrap: nowrap; min-width: 0; } html.ui-v2 .mp-v2-curve .mpw-bar .mpw-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.ui-v2 .mp-v2-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 999px; border: 1px solid var(--v2-line); background: rgba(14, 17, 20, .6); }
  html.ui-v2 .mp-v2-seg button { min-height: 0; padding: 4px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 12px var(--font); cursor: pointer; }
  html.ui-v2 .mp-v2-seg button.on { background: var(--accent-bg); color: var(--text); box-shadow: 0 0 0 1px var(--v2-line-hover); }
  html.ui-v2 .mp-v2-seg button:disabled { opacity: .4; cursor: default; }
  html.ui-v2 .mp-v2-cbody { padding: 14px 18px 12px; }
  html.ui-v2 .mp-v2-cplot { position: relative; height: 180px; }
  html.ui-v2 .mp-v2-csvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  html.ui-v2 .mp-v2-cline { fill: none; stroke: var(--accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  html.ui-v2 .mp-v2-carea { fill: rgba(127, 184, 214, .10); }
  html.ui-v2 .mp-v2-turn { fill: rgba(232, 160, 92, .09); }
  html.ui-v2 .mp-v2-band { fill: rgba(143, 154, 164, .13); cursor: pointer; transition: fill var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-v2-band:hover { fill: rgba(127, 184, 214, .22); } html.ui-v2 .mp-v2-band.on { fill: rgba(127, 184, 214, .32); }
  html.ui-v2 .mp-v2-fnums { position: absolute; inset: 0 0 auto; height: 14px; pointer-events: none; }
  html.ui-v2 .mp-v2-fnums span { position: absolute; top: 0; margin-left: 3px; font: 800 10px var(--font-num); color: var(--text-2); }
  html.ui-v2 .mp-v2-cticks { margin-top: 6px; } html.ui-v2 .mp-v2-cticks .end { transform: translateX(-100%); }
  html.ui-v2 .mp-v2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  html.ui-v2 .s-objectives .mp-v2-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); } /* Рошанів 1–4 — картки не розтягуються на всю ширину */
  html.ui-v2 .mp-v2-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 0; padding: 12px 14px; border: 1px solid var(--v2-line); border-radius: 14px;
    background: var(--v2-surface); color: var(--text-2); font: 600 12.5px/1.3 var(--font); text-align: left; cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  html.ui-v2 .mp-v2-tile:hover { transform: translateY(calc(-1 * var(--m-lift, 2px))); border-color: var(--v2-line-hover); }
  html.ui-v2 .mp-v2-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(127, 184, 214, .35), 0 12px 30px rgba(127, 184, 214, .12);
    background: linear-gradient(180deg, rgba(127, 184, 214, .08), transparent 70%), var(--v2-surface); }
  html.ui-v2 .mp-v2-tile .nn { font: 700 18px var(--font-num); color: var(--text); } html.ui-v2 .mp-v2-tile .nn small { margin-left: 6px; font-size: 12px; color: var(--muted); }
  html.ui-v2 .mp-v2-tile .dd { font: 700 13px var(--font-num); } html.ui-v2 .mp-v2-tile .mp-tg { max-width: 100%; }
  html.ui-v2 .mp-v2-detail { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, var(--mp-fit, 440px), 460px); }
  html.ui-v2 .mp-v2-detail > * { min-width: 0; padding: 18px 20px; } html.ui-v2 .mp-v2-detail > * + * { border-left: 1px solid var(--border); }
  html.ui-v2 .mp-v2-detail > .mp-panel-card[hidden] + .mp-v2-map { border-left: 0; grid-column: 1 / -1; }
  /* «Переломи гри» колонками */
  html.ui-v2 .mp-v2-tcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  html.ui-v2 .mp-v2-tcols > .mp-line { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-top: 0; }
}
/* ---- Розділи матчу v2, пара 3: split (Варди Б), tiles + strip (Рошан Б), aside (Руни й стаки Б) ---- */
@media (min-width: 1200px) {
  /* split: велика карта | час життя, усі варди, картка */
  html.ui-v2 .mp-v2-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
  html.ui-v2 .mp-v2-split > * { min-width: 0; padding: 16px 18px; } html.ui-v2 .mp-v2-split > * + * { border-left: 1px solid var(--border); }
  html.ui-v2 .mp-v2-split .mp-v2-map .rp-map { max-width: min(100%, calc(var(--mp-fit, 600px) + 40px)); margin: 0 auto; }
  html.ui-v2 .mp-v2-side { display: flex; flex-direction: column; gap: 12px; }
  html.ui-v2 .mp-v2-side > .mp-panel-card > .mp-card { padding: 16px 18px; background: var(--v2-surface-2, rgba(23, 29, 35, .9)); box-shadow: none; }
  html.ui-v2 .mp-v2-lh { font: 800 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
  html.ui-v2 .mp-v2-lax { display: grid; grid-template-columns: 112px minmax(0, 1fr); height: 18px; font-size: 11px; color: var(--faint); }
  html.ui-v2 .mp-v2-lax .tk { position: relative; } html.ui-v2 .mp-v2-lax .tk span { position: absolute; transform: translateX(-50%); } html.ui-v2 .mp-v2-lax .tk span:first-child { transform: none; }
  html.ui-v2 .mp-v2-lax .tk .end { transform: translateX(-100%); }
  html.ui-v2 .mp-v2-lifes { display: flex; flex-direction: column; gap: 2px; }
  html.ui-v2 .mp-v2-life { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 0; width: 100%; min-height: 0; padding: 4px 0; border: 0; border-radius: 8px;
    background: none; color: var(--text-2); font: 600 12.5px var(--font); text-align: left; cursor: pointer; }
  html.ui-v2 .mp-v2-life:hover { background: rgba(27, 34, 41, .6); }
  html.ui-v2 .mp-v2-life .lb { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-num); }
  html.ui-v2 .mp-v2-life .lb .x { display: none; } /* назва класу — у підказці й картці */
  html.ui-v2 .mp-v2-life .ic { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--obs, #f2c94c); } html.ui-v2 .mp-v2-life .ic.s { border-radius: 2px; border-color: var(--sentry, #5aaaf5); }
  html.ui-v2 .mp-v2-life .tr { position: relative; height: 14px; border-radius: 7px; background: rgba(42, 52, 61, .45); }
  html.ui-v2 .mp-v2-life .bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: #8f9aa4; transform-origin: left; animation: v2-grow var(--dur-4) var(--ease-out) both; }
  html.ui-v2 .mp-v2-life.good .bar { background: var(--good); } html.ui-v2 .mp-v2-life.bad .bar { background: var(--bad); }
  html.ui-v2 .mp-v2-life.on { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--v2-line-hover); } html.ui-v2 .mp-v2-life.on .lb { color: var(--text); }
  html.ui-v2 .mp-v2-lifes.faint .mp-v2-life { padding: 2px 0; font-size: 11.5px; opacity: .6; } html.ui-v2 .mp-v2-lifes.faint .mp-v2-life:hover { opacity: 1; }
  html.ui-v2 .mp-v2-lifes.faint .lb { font-family: var(--font); } html.ui-v2 .mp-v2-lifes.faint .tr { height: 8px; } html.ui-v2 .mp-v2-lifes.faint .bar { top: 1px; bottom: 1px; }
  html.ui-v2 .mp-v2-lifes.faint .r .bar { background: var(--radiant); } html.ui-v2 .mp-v2-lifes.faint .d .bar { background: var(--dire); }
  html.ui-v2 .mp-v2-allw > summary { cursor: pointer; font: 700 12.5px var(--font); color: var(--muted); margin: 2px 0 8px; }
  html.ui-v2 .mp-v2-allw[open] > .mp-v2-lifes { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
  /* tiles + strip (Рошан): факти рядком, карта ліворуч */
  html.ui-v2 .mp-v2-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-bottom: 1px solid var(--border); }
  html.ui-v2 .mp-v2-kvs > div { padding: 14px 18px; min-width: 0; border-right: 1px solid var(--border); border-top: 1px solid var(--border); margin-top: -1px; }
  html.ui-v2 .mp-v2-kvs .k { font: 800 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  html.ui-v2 .mp-v2-kvs .v { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
  html.ui-v2 .mp-v2-detail.map-first { grid-template-columns: clamp(380px, var(--mp-fit, 480px), 540px) minmax(0, 1fr); }
  html.ui-v2 .mp-v2-nearc h2 { margin: 0 0 12px; font: 800 15px var(--font); }
  html.ui-v2 .mp-v2-near2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  html.ui-v2 .mp-v2-near2 h3 { margin: 0 0 8px; font: 800 12px var(--font); letter-spacing: .06em; text-transform: uppercase; }
  html.ui-v2 .mp-v2-near { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; }
  html.ui-v2 .mp-v2-near.me { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
  html.ui-v2 .mp-v2-near .who { min-width: 0; overflow: hidden; }
  html.ui-v2 .mp-v2-dist { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(42, 52, 61, .5); overflow: hidden; }
  html.ui-v2 .mp-v2-dist i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--good); transform-origin: left; animation: v2-grow var(--dur-4) var(--ease-out) both; }
  html.ui-v2 .mp-v2-dist.far i { background: #5b6670; } html.ui-v2 .mp-v2-dist.near i { background: #8fa3b1; }
  html.ui-v2 .mp-v2-tile { font-weight: 700; } html.ui-v2 .mp-v2-tile .t { font: 700 15px var(--font-num); color: var(--text); }
  /* aside: блоки ліворуч, липка карта з карткою праворуч */
  html.ui-v2 .mp-v2-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  html.ui-v2 .mp-v2-aside .mp-v2-mapcol { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--af-top-h, 69px) - var(--mp-ctx-h, 120px) - 24px); overflow-y: auto; scrollbar-width: thin; }
  html.ui-v2 .mp-v2-aside .mp-panel-card[hidden] { display: none; }
  /* таблиця рун мудрості — клітинками */
  html.ui-v2 .mp-v2-aside .mp-table:has(.mp-click) { border-collapse: separate; border-spacing: 8px; margin: -8px; }
  html.ui-v2 .mp-v2-aside .mp-table:has(.mp-click) td { border: 1px solid var(--v2-line); border-radius: 12px; background: rgba(23, 29, 35, .7); vertical-align: top; transition: border-color var(--dur-1) var(--ease-out); }
  html.ui-v2 .mp-v2-aside .mp-table:has(.mp-click) td:first-child { border: 0; background: none; }
  html.ui-v2 .mp-v2-aside .mp-table:has(.mp-click) tr.mp-click:hover td:not(:first-child) { border-color: var(--v2-line-hover); }
  html.ui-v2 .mp-v2-aside .mp-table:has(.mp-click) tr.sel td:not(:first-child) { border-color: var(--accent); background: var(--accent-bg); }
}
/* ---- Розділи матчу v2, пара 4: «Вміння й сейви» — сцена з карткою рядка ---- */
@media (min-width: 1200px) {
  html.ui-v2 .mp-v2-evcard .mp-v2-sec { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--v2-line-soft); }
  html.ui-v2 .mp-v2-evcard .mp-v2-sec .mp-v2-lh { margin-bottom: 2px; }
  html.ui-v2 .s-abilities .mp-flow .mp-ab-t { font-size: 12.5px; }
}@media (min-width: 1200px) {
  /* вузький список сцени: позначка — другим рядком під назвою, ▶ — праворуч на обидва рядки */
  html.ui-v2 .mp-v2-scene .mp-ev { grid-template-columns: 44px minmax(0, 1fr) 26px; grid-template-areas: "t x pl" "t tg tg"; row-gap: 4px; }
  html.ui-v2 .mp-v2-scene .mp-ev > .t { grid-area: t; } html.ui-v2 .mp-v2-scene .mp-ev > .x { grid-area: x; }
  html.ui-v2 .mp-v2-scene .mp-ev > .tg { grid-area: tg; justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; } html.ui-v2 .mp-v2-scene .mp-ev > .tg > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.ui-v2 .mp-v2-scene .mp-ev > .tg:empty { display: none; }
  html.ui-v2 .mp-v2-scene .mp-ev > .pl { grid-area: pl; align-self: center; }
}