/* Зібрано з src/css командою node tools/build.js — правте модулі там, а не цей файл. */
/* ===== src/css/00-base.css ===== */
/* ---------- Font: Fixel від MacPaw (SIL OFL, див. fonts/OFL-Fixel.txt) ----------
   Один змінний файл на дві осі: насиченість 400–800 і ширина.
   Ширина 87.5% — Fixel Text (текст і таблиці), 100% — Fixel Display (великі заголовки). */
@font-face {
  font-family: "Fixel";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  font-stretch: 87.5% 100%;
  src: url(fonts/fixel-cyrillic-var.woff2) format("woff2-variations"), url(fonts/fixel-cyrillic-var.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Fixel";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  font-stretch: 87.5% 100%;
  src: url(fonts/fixel-latin-var.woff2) format("woff2-variations"), url(fonts/fixel-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+25B2, U+25BC, U+FEFF, U+FFFD;
}

/* ---------- Tokens (усі пари тексту й фону проходять WCAG AA) ---------- */
:root {
  --page: #f4f6f8;
  --surface: #ffffff;
  --zebra: #f3f5f8;
  --head: #e9edf2;
  --head-top: #bddcef;
  --head-top-ink: #0b1d2b;
  --head-line: #7fb3d4;
  --hover: #e9edf2;
  --border: #dde2e8;
  --border-strong: #c3cad4;
  --nav: #080808;

  --text: #0b1220;
  --text-2: #1f2937;
  --text-3: #344054;
  --text-4: #475467;

  --brand: #76b11d;        /* лише декоративно: крапки, смужки */
  --brand-ink: #3f7d0f;    /* текст і фокус, 5:1 на білому */
  --selected: #eef6e3;

  --win-bg: #ecfdf3;  --win: #067647;
  --loss-bg: #fef3f2; --loss: #b42318;
  --draw-bg: #eff8ff; --draw: #175cd3;
  --zero-bg: #f2f4f7; --zero: #475467;

  --flash: #fef7c3;
  --radius: 4px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --font: "Fixel", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Темний колір під статус-баром і при «відтягуванні» сторінки вгорі */
  background: var(--nav);
}
/* Смуга кольору навбару під статус-баром (iPhone з вирізом, PWA, повноекранний режим) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--nav);
  z-index: 50;
  pointer-events: none;
}

/* Telegram Mini App на весь екран: вміст нижче кнопок Telegram (лише в Telegram) */
.tg {
  --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}
.tg body::before { height: var(--tg-top); }
.tg .topbar { padding-top: var(--tg-top); }
.tg .topbar__inner { padding-top: 0; }   /* відступ уже враховано в --tg-top */
/* Прилипла шапка таблиці — з таким самим зазором від чорної панелі, як таблиця від країв екрана */
.tg { --tg-gap: 12px; }
.tg .board:has(.bh) { overflow: visible; }
.tg .bh {
  top: calc(var(--tg-top) + var(--tg-gap));
  box-shadow: 0 calc(3px - var(--tg-gap)) 0 3px var(--page);
}
.tg .main { padding-bottom: calc(32px + var(--tg-safe-area-inset-bottom, 0px)); }

/* Telegram на телефоні: світла частина — «аркуш» із заокругленими верхніми кутами на чорному */
@media (max-width: 640px) {
  .tg body { background: var(--nav); display: flex; flex-direction: column; min-height: 100vh; }
  .tg .main { flex: 1; background: var(--page); border-radius: 8px 8px 0 0; }
  .tg .bh { box-shadow: none; }
  /* Коли сторінку прокручено: кути лишаються під панеллю Telegram, над шапкою таблиці */
  .tg.tg-stuck body::before { height: calc(var(--tg-top) + 8px); }
  .tg.tg-stuck body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--tg-top);
    height: var(--tg-gap);
    background: var(--page);
    border-radius: 8px 8px 0 0;
    z-index: 51;
    pointer-events: none;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-stretch: 87.5%;      /* Fixel Text */
  font-size: 15px;
  line-height: 1.5;
  /* Звичайні цифри Fixel: табличні у нього «технічні» (перекреслений 0, 7 з рисочкою) */
  -webkit-font-smoothing: antialiased;
}
.wrap {
  width: 100%;
  max-width: calc(980px + 32px);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ===== src/css/10-topbar-tabs.css ===== */
/* ---------- Top bar ---------- */
.topbar { background: var(--nav); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-top: env(safe-area-inset-top);
}
.logo { display: block; height: 36px; width: auto; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 500;
  color: #d0d5dd;
  white-space: nowrap;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; flex: none; }
.status[data-state="live"] .status__dot { background: #17b26a; }
.status[data-state="stale"] .status__dot,
.status[data-state="error"] .status__dot { background: #f79009; }
.status.is-pulse .status__dot { animation: pulse 1.2s ease-out 1; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(23, 178, 106, 0); }
}

/* ---------- Intro ---------- */
.main { padding-top: 28px; padding-bottom: 24px; }
.intro { margin-bottom: 20px; }
.title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.subtitle {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--text-3);
}

.notice {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text-2);
}
.notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--head);
}

/* ---------- Tabs (segmented control) ---------- */
.tabs {
  display: inline-flex;
  gap: 2px;
  height: 44px;
  padding: 3px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--head);
}
.tabs:empty { display: none; }
.tab {
  appearance: none;
  border: 0;
  border-radius: 4px;
  height: 36px;
  padding: 0 18px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* ===== src/css/20-table.css ===== */
/* ---------- Table card ---------- */
.board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: clip;
}
.bh {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  overflow: hidden;
}
/* Рамка навколо шапки — блакитна, як лінії всередині; навколо тіла — сіра */
.board:has(.bh) { border: 0; }
.bh {
  border: 1px solid var(--head-line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.bs {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.bs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td {
  height: 40px;
  padding: 0 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
thead th {
  background: var(--head);
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
thead tr.h1 th { background: var(--head-top); color: var(--head-top-ink); font-size: 13px; font-weight: 650; }
thead tr.h2 th { background: var(--head-top); color: var(--head-top-ink); border-bottom-color: var(--head-line); }
thead tr.h1 th { border-bottom-color: var(--head-line); }
td.gstart { border-left: 1px solid var(--border-strong); }
th.gstart { border-left: 1px solid var(--head-line); }
th.c-name, td.c-name { text-align: left; }
th.c-place, td.c-place { width: 1%; padding-left: 16px; padding-right: 8px; }

tbody td { height: 39px; font-size: 14px; color: var(--text-2); background: var(--surface); }
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
@media (hover: hover) {
  tbody tr:hover td { background: var(--hover); }
}
tbody tr.is-sel td { background: var(--selected); color: var(--text); }
tbody tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--brand-ink); }

td.c-place { font-weight: 650; color: var(--text-2); }
td.c-name { padding: 0; min-width: 180px; }
.nm {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 39px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
}
tr.is-sel .nm { font-weight: 650; }

/* Призери на вкладці «Результат»: смужка зліва й кружечок з номером медального кольору */
:root { --gold: #d4a017; --silver: #98a2b3; --bronze: #c27c3e; }
tr.medal-1 { --medal: var(--gold); --medal-bg: #fbefc6; --medal-ink: #6b4d00; }
tr.medal-2 { --medal: var(--silver); --medal-bg: #e9edf2; --medal-ink: #344054; }
tr.medal-3 { --medal: var(--bronze); --medal-bg: #f6e3d2; --medal-ink: #7a3f12; }
tbody tr.medal:not(.is-sel) td:first-child { box-shadow: inset 4px 0 0 var(--medal); }
.board.is-wide tbody tr.medal:not(.is-sel) td.c-place { box-shadow: inset 4px 0 0 var(--medal), 1px 0 0 var(--border); }
tr.medal .pn {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--medal-bg);
  color: var(--medal-ink);
  font-weight: 750;
}

/* Зміна місця після оновлення */
.mv { margin-left: 6px; font-size: 11.5px; font-weight: 600; }
.mv.up { color: var(--win); }
.mv.down { color: var(--loss); }

/* Результат туру: В / П / РН / БН */
.code {
  display: inline-block;
  min-width: 30px;
  padding: 2px 7px;
  text-align: center;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.code-w { background: var(--win-bg); color: var(--win); }
.code-l { background: var(--loss-bg); color: var(--loss); }
.code-d { background: var(--draw-bg); color: var(--draw); }
.code-z { background: var(--zero-bg); color: var(--zero); }

/* Короткий підсвіт змінених клітинок */
td.flash { animation: flash 3s ease-out 1; }
@keyframes flash {
  0%, 30% { box-shadow: inset 0 0 0 999px var(--flash); }
  100% { box-shadow: inset 0 0 0 999px transparent; }
}

/* Широка таблиця: номер (і на вебі ім'я) закріплені зліва */
.board.is-wide td.c-place, .board.is-wide th.c-place { position: sticky; left: 0; z-index: 1; }
.board.is-wide td.c-place { box-shadow: 1px 0 0 var(--border); }
.board.is-wide th.c-place { box-shadow: 1px 0 0 var(--head-line); }
.board.is-wide tbody tr.is-sel td.c-place { box-shadow: inset 3px 0 0 var(--brand-ink), 1px 0 0 var(--border); }
@media (min-width: 641px) {
  .board.is-wide td.c-place, .board.is-wide th.c-place { box-shadow: none; }
  .board.is-wide tbody tr.is-sel td.c-place { box-shadow: inset 3px 0 0 var(--brand-ink); }
  .board.is-wide td.c-name, .board.is-wide th.c-name { position: sticky; left: var(--pw, 48px); z-index: 1; }
  .board.is-wide td.c-name { box-shadow: 1px 0 0 var(--border); }
  .board.is-wide th.c-name { box-shadow: 1px 0 0 var(--head-line); }
}

.empty { padding: 40px 20px; text-align: center; color: var(--text-3); white-space: normal; }
.empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
/* Екран завантаження: рибка над текстом, легко «пливе» */
.empty.is-loading { padding: 48px 20px 44px; }
.loader-fish {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 14px;
  animation: fish-swim 2.4s ease-in-out infinite;
}
@keyframes fish-swim {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -4px) rotate(-2deg); }
  50% { transform: translate(6px, 0) rotate(0deg); }
  75% { transform: translate(3px, 3px) rotate(2deg); }
}

.main { padding-bottom: max(32px, env(safe-area-inset-bottom)); }

/* Плашка «Триває реєстрація» з пульсуючою крапкою */
.reg-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0 0 16px;
  padding: 0 14px 0 12px;
  border: 1px solid #abefc6;
  border-radius: 999px;
  background: var(--win-bg);
  color: var(--win);
  font-size: 14px;
  font-weight: 650;
}
.reg-live__dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #17b26a;
}
.reg-live__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #17b26a;
  animation: reg-pulse 1.6s ease-out infinite;
}
@keyframes reg-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}
.view-reg .reg-live { display: none !important; }
.reg-live { flex-wrap: wrap; row-gap: 2px; }
.reg-live__timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  white-space: nowrap;
}
/* Кожна цифра таймера в комірці однакової ширини — плашка не «смикається» щосекунди */
.reg-live__timer .dg { display: inline-block; width: 0.62em; text-align: center; }
.reg-live__timer::before { content: ""; width: 1px; height: 14px; background: #abefc6; }

/* Роздільник «Резерв» у списку учасників */
tbody tr.reserve-sep { cursor: default; }
tbody tr.reserve-sep th {
  height: 30px;
  padding: 0 16px;
  border-top: 1px solid #fedf89;
  border-bottom: 1px solid #fedf89;
  background: #fffaeb;
  color: #93370d;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
@media (hover: hover) { tbody tr.reserve-sep:hover th { background: #fffaeb; } }

/* Інфо-бейдж над таблицею */
.info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid #c5def0;
  border-radius: 4px;
  background: #eef6fc;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.info svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #2e6f9e; stroke-width: 1.6; stroke-linecap: round; }
.info svg .dot { fill: #2e6f9e; stroke: none; }

/* ===== src/css/30-mobile-reg.css ===== */
/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .topbar__inner { min-height: 56px; }
  .logo { height: 30px; }
  .main { padding-top: 20px; }
  .title { font-size: 24px; }
  .subtitle { font-size: 15px; }
  .tabs { display: flex; }
  .tab { flex: 1; }
  .board { margin-left: -4px; margin-right: -4px; }
  th, td { padding: 0 6px; }
  thead th { white-space: normal; }
  th.c-place, td.c-place { padding-left: 12px; padding-right: 4px; }
  tbody td { height: 39px; }   /* + лінія 1px = 40px, як на вебі */
  td.c-name { min-width: 0; }
  .nm { min-height: 39px; padding: 0 6px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  td.flash, .status.is-pulse .status__dot, .loader-fish, .reg-live__dot::after { animation: none; }
}

/* Великі заголовки — Fixel Display */
.title, .done__title { font-stretch: 100%; }

/* ---------- Реєстрація ---------- */
:root {
  --accent: #1764a8;        /* білий текст 6.1:1 */
  --accent-hover: #12528b;
  --accent-pressed: #0d3f6b;   /* натиснута кнопка */
  --accent-ring: rgba(23, 100, 168, 0.22);
  --field-line: #8a94a6;    /* рамка поля 3:1 на білому */
  --btn-radius: 999px;     /* кнопки повністю заокруглені (пігулка) */
}
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:not(:disabled):active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 3px; border-radius: var(--btn-radius); outline-color: var(--accent); }
.btn-primary { background: var(--accent); color: #fff; }
@media (hover: hover) { .btn-primary:hover { background: var(--accent-hover); } }
.btn-primary:not(:disabled):active { background: var(--accent-pressed); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
@media (hover: hover) { .btn-secondary:hover { background: var(--head); } }
.btn-secondary:not(:disabled):active { background: var(--border); }
/* Неактивна кнопка: блідіша, не реагує на натискання */
.btn:disabled { cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; }
.btn.is-loading:disabled { cursor: progress; opacity: 0.85; }   /* текст «Надсилаємо…» має читатися */
.btn .spinner { display: none; }
.btn.is-loading .spinner {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Плаваюча кнопка внизу екрана */
.regbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 24px max(16px, env(safe-area-inset-right)) calc(24px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, var(--page) 55%, rgba(244, 246, 248, 0));
  pointer-events: none;
}
.regbar .btn {
  display: flex;
  max-width: 420px;
  margin: 0 auto;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(23, 100, 168, 0.28), 0 2px 4px rgba(16, 24, 40, 0.08);
}
.has-regbar .main { padding-bottom: calc(112px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }

/* Дві кнопки внизу: «Картка гравця» і «Зареєструватися» */
.regbar { display: flex; justify-content: center; gap: 10px; }
.regbar .btn { flex: 1 1 0; min-width: 0; margin: 0; }
.regbar.two .btn { max-width: 280px; }
@media (max-width: 640px) {
  /* Дві кнопки поруч на телефоні: без іконки й трохи менший шрифт, щоб текст не обрізався */
  .regbar.two .btn { font-size: 15px; padding: 0 12px; gap: 0; }
  .regbar.two .btn__icon { display: none; }
}
.regbar .btn-secondary { box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.06); }
.regbar .btn__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== src/css/40-card.css ===== */
/* ---------- Картка гравця ---------- */
.view-card .intro, .view-card .notice, .view-card .tabs, .view-card .info:not(.pc-note), .view-card .board,
.view-card .reg-live,
.view-stats .intro, .view-stats .notice, .view-stats .tabs, .view-stats .info, .view-stats .board,
.view-stats .reg-live { display: none !important; }
.pcard { max-width: 640px; }
/* Колонки статистики й картки: на телефоні одна (порядок через order), на широкому екрані дві */
.pc-cols { display: flex; flex-direction: column; }
.pc-col { display: contents; }
@media (min-width: 980px) {
  .pcard { max-width: none; }
  .pc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .pc-cols.is-single { grid-template-columns: minmax(0, 640px); }
  .pc-col { display: block; min-width: 0; }
  .pcard .pc-chart { max-width: none; }
  /* Плитки статистики в половині ширини: компактніше, щоб підписи не ламалися */
  .pc-col .pc-tiles { gap: 8px; }
  .pc-col .pc-tile { padding: 12px 10px; align-content: start; }
  .pc-col .pc-tile__label { white-space: nowrap; }
  .tstats .pc-col .pc-tile__val small { font-size: 11px; }
}
.pcard .title:focus { outline: none; }
.pc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pc-head .subtitle { margin-top: 4px; }
.pc-place {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--head);
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  font-stretch: 100%;
}
.pc-place.medal-1 { background: #fbefc6; color: #6b4d00; box-shadow: inset 0 0 0 2px var(--gold); }
.pc-place.medal-2 { background: #e9edf2; color: #344054; box-shadow: inset 0 0 0 2px var(--silver); }
.pc-place.medal-3 { background: #f6e3d2; color: #7a3f12; box-shadow: inset 0 0 0 2px var(--bronze); }

.pc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.pc-tile {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.pc-tile__label { font-size: 12.5px; font-weight: 600; color: var(--text-4); }
.pc-tile__val { font-size: 24px; font-weight: 750; color: var(--text); line-height: 1.2; white-space: nowrap; }
.pc-tile__val small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.pc-tile--wdl .pc-tile__val { display: flex; align-items: baseline; gap: 4px; font-size: 20px; }
.pc-tile--wdl i { font-style: normal; color: var(--border-strong); font-weight: 500; }
.c-w { color: var(--win); } .c-d { color: var(--draw); } .c-z { color: var(--zero); } .c-l { color: var(--loss); }
.pc-note { margin-bottom: 14px; }

.pc-block { padding: 16px; margin-bottom: 14px; }
.pc-h2 { margin: 0 0 10px; font-size: 16px; font-weight: 750; }

.pc-tours { list-style: none; margin: 0; padding: 0; }
.pc-tour {
  display: grid;
  grid-template-columns: 36px 52px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.pc-tour:first-child { border-top: 0; }
.pc-tour--head { min-height: 0; padding: 0 0 6px; border-top: 0; font-size: 11.5px; font-weight: 650; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-tour__sec { text-align: center; }
.pc-side { margin-left: 1px; font-weight: 700; color: var(--text-3); }
.pc-tour--head span:nth-child(2) { text-align: center; }

.pc-tour__n { display: flex; align-items: center; }
.pc-tour__sec { color: var(--text-3); white-space: nowrap; }
.pc-tour__sec b { color: var(--text); font-weight: 750; }
.pc-tour__opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.pc-num { color: var(--text-4); font-weight: 600; }
.pc-tour__res { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.pc-score { min-width: 40px; text-align: right; font-weight: 750; color: var(--text); white-space: nowrap; }
.pc-wait { font-size: 12.5px; color: var(--text-4); }
.pc-tour.is-wait .pc-tour__opp { color: var(--text-2); font-weight: 550; }
.pc-tour.is-next { background: #eef6fc; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.pc-tour.is-next .pc-wait { color: #2e6f9e; font-weight: 700; }

.pc-chart { display: block; width: 100%; max-width: 480px; height: auto; }
.pc-chart .ax { stroke: var(--border-strong); stroke-width: 1; }
.pc-chart .bar-w { fill: #32a467; } .pc-chart .bar-l { fill: #e0675c; } .pc-chart .bar-d { fill: #4f8fe0; } .pc-chart .bar-z { fill: #98a2b3; }
.pc-chart .bar-wait { fill: none; stroke: var(--border-strong); stroke-dasharray: 2 2; }
.pc-chart .avg-line { fill: none; stroke: #0b1220; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pc-chart .val { font-size: 9px; font-weight: 700; fill: var(--text-2); text-anchor: middle; }
.pc-chart .lbl { font-size: 9px; fill: var(--text-4); text-anchor: middle; }
.pc-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--text-4); }
.lg-bar { width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #32a467 50%, #e0675c 50%); }
.lg-line { width: 14px; height: 0; border-top: 1.6px solid #0b1220; margin-left: 6px; }

.pc-h3 { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.pc-stat { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--zebra); }
.pc-stat dt { font-size: 12.5px; font-weight: 600; color: var(--text-4); }
.pc-stat dd { margin: 0; display: grid; align-content: start; gap: 1px; }
.pc-stat dd b { font-size: 17px; font-weight: 750; color: var(--text); }
.pc-stat dd span { font-size: 12.5px; color: var(--text-3); }
.pc-stat dd .pc-stat__me { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text); font-weight: 650; }

.pc-meet { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); }
.pc-meet:first-of-type { border-top: 0; padding-top: 0; }
.pc-meet__k { font-size: 13px; font-weight: 700; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-chips li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text); }
.pc-chips li span { color: var(--text-4); font-weight: 600; margin-left: 2px; }

/* Графік місця по турах */
.pc-chart .grid { stroke: var(--border); stroke-width: 1; }
.pc-chart .lbl-y { text-anchor: end; }
.pc-chart .place-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-chart .place-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; }
.pc-chart .val-last { font-size: 10.5px; fill: var(--accent); }
.pc-chart .bar-t { fill: #6fa8dc; }

/* ===== src/css/50-stats-regform.css ===== */
/* ---------- Статистика турніру ---------- */
.tstats .pc-tile__val small { display: block; font-size: 12px; font-weight: 550; color: var(--text-4); white-space: normal; }

/* Карта водойми */
.pond-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.pond-chips::-webkit-scrollbar { display: none; }
.pond-chip {
  appearance: none; flex: none; min-width: 36px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--text-2); cursor: pointer;
}
.pond-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pond-chip:disabled { opacity: 0.4; cursor: default; }
.pond { display: grid; gap: 8px; padding: 14px 12px; border-radius: var(--radius); background: #eef1f4; }
.pond-row { display: grid; grid-template-columns: repeat(var(--pond-n, 7), 1fr); gap: 4px; }
.pond-sec {
  display: grid; place-items: center; align-content: center; gap: 0;
  min-height: 46px; border-radius: 6px; background: var(--surface); text-align: center; line-height: 1.1;
}
.pond-sec b { font-size: 15px; font-weight: 800; }
.pond-sec span { font-size: 11px; font-weight: 650; opacity: 0.9; }
.pond-sec.is-empty { background: var(--surface); color: var(--text-4); box-shadow: inset 0 0 0 1px var(--border); }
.pond-sec.is-top { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #32a467; }
.pond-sec.is-low { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #e0675c; }
.pond-water {
  position: relative; overflow: hidden;
  display: grid; place-items: center; min-height: 120px; border-radius: 6px;
  /* Хвильки: два рідкі шари різного розміру, що повільно рухаються */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='80' viewBox='0 0 140 80'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.6'%3E%3Cpath stroke-opacity='.55' d='M12 18c4-4 8-4 12 0s8 4 12 0'/%3E%3Cpath stroke-opacity='.4' d='M78 34c4-4 8-4 12 0s8 4 12 0s8 4 12 0'/%3E%3Cpath stroke-opacity='.5' d='M30 62c4-4 8-4 12 0s8 4 12 0'/%3E%3Cpath stroke-opacity='.35' d='M104 70c3-3 6-3 9 0s6 3 9 0'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='110' viewBox='0 0 190 110'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.3' stroke-opacity='.25'%3E%3Cpath d='M40 30c5-5 10-5 15 0s10 5 15 0'/%3E%3Cpath d='M120 82c5-5 10-5 15 0s10 5 15 0s10 5 15 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 90% at 30% 20%, #8fdcf3 0%, #5cc5e8 55%, #43b3dc 100%);
  background-size: 140px 80px, 190px 110px, auto;
  background-position: 0 0, 60px 30px, 0 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(11, 79, 120, 0.35);
  animation: pond-waves 14s linear infinite;
}
.pond-water span { padding: 2px 10px; border-radius: 999px; background: rgba(41, 150, 199, 0.4); }
@keyframes pond-waves {
  from { background-position: 0 0, 60px 30px, 0 0; }
  to { background-position: 140px 0, -130px 30px, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .pond-water { animation: none; } }
.pond-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; white-space: nowrap; }
.pond-key i { width: 10px; height: 10px; border-radius: 3px; border: 2px solid; }
.pond-key i.is-top { border-color: #32a467; } .pond-key i.is-low { border-color: #e0675c; margin-left: 6px; }
@media (min-width: 641px) { .pond-sec { min-height: 58px; } .pond-sec b { font-size: 18px; } .pond-sec span { font-size: 12.5px; } .pond-water { min-height: 180px; } }

/* Карта секторів */
.hm { display: grid; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
.hm-row { display: grid; grid-template-columns: 22px repeat(var(--hm-n, 14), minmax(14px, 1fr)) 30px; gap: 2px; align-items: center; }
@media (min-width: 641px) { .hm-row { grid-template-columns: 34px repeat(var(--hm-n, 14), minmax(22px, 1fr)) 44px; gap: 3px; } .hm-cell { height: 28px; font-size: 12px; } }
.hm-sec { font-size: 12px; font-weight: 700; color: var(--text-2); text-align: center; }
.hm-sec__b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; background: var(--head); color: var(--text); font-size: 11px; font-weight: 750; }
.hm-sec--h { font-size: 9.5px !important; letter-spacing: -0.01em; }
.hm-axis { margin-bottom: -2px; }
.hm-axis__t { font-size: 11px; font-weight: 700; color: var(--text-3); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.hm-cell { display: grid; place-items: center; height: 24px; border-radius: 3px; font-size: 10.5px; font-weight: 650; background: var(--zebra); }
.hm-th { background: none; height: auto; color: var(--text-3); font-weight: 700; }
.hm-empty { background: none; box-shadow: inset 0 0 0 1px var(--border); }
.hm-avg { font-size: 12px; font-weight: 700; text-align: right; color: var(--text-2); padding-right: 2px; }
.hm-head .hm-sec, .hm-head .hm-avg { font-size: 10.5px; font-weight: 600; color: var(--text-4); }
.hm-avg.hm-best { color: var(--win); }
.hm-avg.hm-worst { color: var(--loss); }
.hm-note { margin: 0 0 10px; display: block; }
.hm-note b { color: var(--text-2); }
/* Рекорди: усі власники рекорду */
.ts-who { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ts-who li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; }
.ts-who__n { font-weight: 650; color: var(--text); }
.ts-who__m { font-size: 12.5px; color: var(--text-3); }
.hm-scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-4); }
.hm-scale i { flex: 0 1 160px; height: 8px; border-radius: 4px; }

/* Топ за уловом */
.ts-top { list-style: none; margin: 0; padding: 0; }
.ts-top li { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center; min-height: 44px; border-top: 1px solid var(--border); font-size: 14px; }
.ts-top li:first-child { border-top: 0; }
.ts-top__n { font-weight: 750; color: var(--text-3); }
.ts-top__name { font-weight: 650; color: var(--text); min-width: 0; }
.ts-top__fish { font-weight: 750; white-space: nowrap; }
.ts-top__fish small { font-weight: 600; color: var(--text-3); }
.ts-top__place { font-size: 12px; font-weight: 600; color: var(--text-4); white-space: nowrap; }

/* Частки результатів */
.ts-share__note { margin: 0 0 10px; }
.ts-share { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.ts-share__seg { min-width: 4px; }
.seg-w { background: #32a467; } .seg-l { background: #e0675c; } .seg-d { background: #4f8fe0; } .seg-z { background: #98a2b3; }
.ts-share__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-2); }
.ts-share__legend li { display: flex; align-items: center; gap: 6px; }
.ts-share__legend b { color: var(--text); }
.ts-share__legend small { color: var(--text-4); }
.ts-share__legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }

@media (max-width: 640px) {
  .pc-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pc-tile { padding: 10px 12px; }
  .pc-tile__val { font-size: 22px; }
  .pc-block { padding: 14px 12px; }
  /* Тур на телефоні — один рядок: Т1 · сектор · суперник · результат */
  .pc-tour { grid-template-columns: 28px 50px minmax(0, 1fr) auto; gap: 6px; font-size: 14px; }
  .pc-tour--head { font-size: 10.5px; letter-spacing: 0.02em; }
  .pc-tour__opp { white-space: normal; line-height: 1.3; }   /* довге ім'я переноситься, а не обрізається */
  .pc-tour__res { gap: 6px; }
  .pc-score { min-width: 34px; }
  .pc-tour.is-next { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .pc-stats { grid-template-columns: 1fr; gap: 8px; }
}

/* Сторінка форми: замість таблиці */
.view-reg .intro, .view-reg .notice, .view-reg .tabs, .view-reg .info, .view-reg .board { display: none !important; }
.reg { max-width: 520px; }
.reg .title:focus { outline: none; }
.reg .subtitle { margin-bottom: 20px; }
.back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -8px 0 8px -10px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
@media (hover: hover) { .back:hover { background: var(--head); } }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 24px;
}
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 650; color: var(--text); }
.field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 16px;          /* iOS не збільшує сторінку при фокусі */
  font-weight: 550;
  color: var(--text);
  letter-spacing: 0.01em;
}
.field input::placeholder { color: #667085; font-weight: 450; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field input[aria-invalid="true"] { border-color: var(--loss); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18); }
.hint { margin: 0; font-size: 13px; color: var(--text-4); }
.err {
  display: flex;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--loss);
}
.err::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--loss); color: #fff; font-size: 11px; font-weight: 800; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert {
  padding: 12px 14px;
  border: 1px solid #fecdca;
  border-radius: var(--radius);
  background: var(--loss-bg);
  color: var(--loss);
  font-size: 14px;
  font-weight: 600;
}
.form .btn { margin-top: 4px; }

.done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 32px 24px; }
.done:focus { outline: none; }
.done__icon { width: 56px; height: 56px; margin-bottom: 4px; }
.done__icon circle { fill: var(--win-bg); stroke: #abefc6; stroke-width: 1.5; }
.done__icon path { fill: none; stroke: var(--win); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.done__icon--late circle { fill: #fffaeb; stroke: #fedf89; }
.done__icon--late .face { fill: none; stroke: #b54708; stroke-width: 2.5; }
.done__icon--late path { stroke: #b54708; stroke-width: 2.5; }
.done__title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
/* Банер «Приєднуйтесь до Telegram-чату» на екрані успішної реєстрації */
.tgjoin {
  justify-self: stretch; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px;
  margin: 10px 0 4px; padding: 16px; border-radius: 18px; text-align: left; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #40B3E0 0%, #229ED9 100%); box-shadow: 0 6px 16px rgba(34, 158, 217, 0.28);
  -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.tgjoin__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.tgjoin__ic svg { width: 26px; height: 26px; margin-left: -2px; }
.tgjoin__txt { display: grid; gap: 3px; min-width: 0; }
.tgjoin__txt b { font-size: 16px; font-weight: 750; line-height: 1.25; }
.tgjoin__txt span { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
.tgjoin__btn {
  grid-column: 1 / -1; display: grid; place-items: center; height: 44px; border-radius: 999px;
  background: #fff; color: #1b8ec5; font-size: 15px; font-weight: 700;
}
@media (min-width: 640px) {
  .tgjoin { grid-template-columns: auto 1fr auto; padding: 16px 18px; }
  .tgjoin__btn { grid-column: auto; padding: 0 20px; height: 40px; }
}
@media (hover: hover) { .tgjoin:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(34, 158, 217, 0.34); } }
.tgjoin:active { transform: scale(0.98); }
.tgjoin:focus-visible { outline: 3px solid rgba(34, 158, 217, 0.45); outline-offset: 3px; }
.done__text { margin: 0 0 12px; color: var(--text-3); }
.done__text strong { color: var(--text); }

/* Пропозиція сповіщень після реєстрації (лише в Telegram) */
.notify {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 4px 0 4px;
  padding: 16px;
  border: 1px solid #c5def0;
  border-radius: 18px;
  background: #eef6fc;
}
.notify__text { margin: 0; color: var(--text-2); font-weight: 600; }
.notify__ok {
  margin: 0 0 4px;
  padding: 10px 14px;
  border: 1px solid #abefc6;
  border-radius: 14px;
  background: var(--win-bg);
  color: var(--win);
  font-weight: 650;
}
.btn__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .card { padding: 20px 16px; }
  .done { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:not(:disabled):active { transform: none; }
  .btn.is-loading .spinner { animation-duration: 1.6s; }   /* спінер крутиться й тут, бо показує процес */
}

/* Супереліпс (squircle, як «згладжування кутів» в iOS) для ВСІХ заокруглень.
   Підтримують браузери на Chromium (Chrome, Edge, Android, Telegram на Android);
   в інших (Safari, Telegram на iPhone) лишаються звичайні заокруглення.
   Кружечки й «пігулки» (радіус 50% / 999px) лишаються круглими, як і в iOS. */
@supports (corner-shape: squircle) {
  *, *::before, *::after { corner-shape: superellipse(1.5); }
  /* кнопки-«пігулки» (.btn, .btn2, «Назад», «Поділитися», меню) навмисно лишаються супереліпсом */
  .av, .btn.is-loading .spinner, .chip, .err::before, .hm-sec__b,
  .pc, .pc-chips li, .pc-hero .pc-place, .pc-place, .pc-share--m,
  .pcard .pc-chips li, .pcard .pc-tour__n .hm-sec__b, .pill, .pill i, .pk__badge, .pond-chip,
  .pond-water span, .pt__new, .reg-live, .reg-live__dot, .reg-live__dot::after, .selbar__place,
  .selbar__x, .status, .status__dot, .swipe-back, .toast, .tr-head .t-c b {
    corner-shape: round;
  }
}

/* ===== src/css/60-v2-layout.css ===== */
/* =====================================================================
   НОВИЙ ДИЗАЙН (beta): шапка, плитки, залік, по турах, список учасників
   Телефон — до 979px (темна шапка, світлий «аркуш»), комп'ютер — від 980px.
   ===================================================================== */
:root {
  --page: #f3f4f6;
  --nav: #0a0a0a;
  --card-line: #e4e7ec;
  --row-line: #f0f2f5;
  --zebra2: #f8f9fb;
  --muted: #5b6474;
  --sel-bg: #eef6e3;
  --sel-ring: #76b11d;
  --accent: #0a0a0a;
  --accent-hover: #262626;
  --accent-pressed: #000;
  --accent-ring: rgba(10, 10, 10, 0.16);
  --r-card: 20px;
}
@media (max-width: 979px) { .d-only { display: none !important; } .l-d { display: none; } }
@media (min-width: 980px) { .m-only { display: none !important; } .l-m { display: none; } }

/* ----- Верхня панель ----- */
.topbar__inner { min-height: 60px; gap: 24px; }
.logo { height: 24px; }
.topnav { display: none; }
.status { border-radius: 999px; border-color: #2b2b2b; background: transparent; min-height: 30px; padding: 0 12px; }
.status[data-state="live"] .status__dot { background: #8bd34a; box-shadow: 0 0 0 4px rgba(139, 211, 74, 0.18); }
@media (min-width: 980px) {
  .wrap { max-width: calc(1240px + 64px); padding-left: 32px; padding-right: 32px; }
  .topbar__inner { min-height: 68px; justify-content: flex-start; gap: 32px; }
  .logo { height: 30px; }
  .topnav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #1a1a1a; }
  .topnav[hidden] { display: none; }
  .topnav button {
    border: 0; background: transparent; color: #d0d5dd; padding: 8px 16px; border-radius: 999px;
    font-size: 14px; font-weight: 550; cursor: pointer;
  }
  .topnav button[aria-current="page"] { background: #fff; color: #0a0a0a; font-weight: 650; }
  @media (hover: hover) { .topnav button:not([aria-current="page"]):hover { color: #fff; } }
  .status { margin-left: auto; }
}

/* ----- Шапка турніру ----- */
.hero { background: var(--nav); color: #fff; }
.hero__inner { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; padding-bottom: 32px; }
.hero__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero .title { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; font-stretch: 100%; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #b8bfca; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }
.pill.is-live { color: #b9e58f; }
.pill.is-live i { background: #8bd34a; }
.meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: #b8bfca; }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero__actions { display: none; }

/* Плитки підсумків */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis:empty { display: none; }
.kpi { min-width: 0; padding: 10px 12px; border-radius: 14px; background: #1a1a1a; display: flex; flex-direction: column; gap: 2px; }
.kpi__l { font-size: 11.5px; color: #b8bfca; }
.kpi__v { font-size: 18px; font-weight: 750; font-stretch: 100%; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__v small { font-size: 13px; font-weight: 600; color: #8a919c; }
.kpi__s { font-size: 12.5px; color: #b8bfca; }
.kpi.k-green .kpi__v { color: #b9e58f; }
.kpi__bar { display: block; height: 5px; border-radius: 3px; background: #2b2b2b; margin-top: 6px; overflow: hidden; }
.kpi__bar span { display: block; height: 100%; border-radius: 3px; background: #8bd34a; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.spark i { width: 5px; border-radius: 2px; background: #6fa8dc; }
.tt { display: inline-flex; align-items: baseline; gap: 1px; margin-right: 4px; }
.tt b { font-weight: 750; }
.tt span { font-size: 11px; color: #b8bfca; font-weight: 600; }
.tt-3 { display: none; }

@media (min-width: 980px) {
  .hero { background: transparent; color: var(--text); }
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; padding-top: 36px; padding-bottom: 0; }
  .hero .title { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; color: var(--text); }
  .hero__txt { gap: 10px; }
  .pill { padding: 4px 10px; border-radius: 999px; background: #eef1f5; color: #344054; font-weight: 650; }
  .pill.is-live { background: #e8f5d9; color: #2f6b0a; }
  .pill.is-live i { background: #4c9a12; }
  .meta { font-size: 14px; color: #475467; gap: 6px 18px; }
  .hero__actions { display: flex; gap: 10px; }
  .kpis { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .kpi { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--card-line); gap: 8px; }
  .kpi__l { font-size: 13px; color: var(--muted); font-weight: 550; }
  .kpi__v { font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
  .kpi__v small { font-size: 16px; color: #98a2b3; }
  .kpi__s { font-size: 13px; color: var(--muted); }
  .kpi.k-green .kpi__v { color: #2f6b0a; }
  .kpi.k-dark { background: #0a0a0a; border-color: #0a0a0a; }
  .kpi.k-dark .kpi__l, .kpi.k-dark .kpi__s { color: #b8bfca; }
  .kpi.k-dark .kpi__v { color: #fff; font-size: 22px; line-height: 1.15; white-space: normal; }
  .kpi__bar { background: #eef1f5; height: 6px; }
  .kpi__bar span { background: #4c9a12; }
  .kpi.k-spark { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 12px; }
  .kpi.k-spark .kpi__l { flex-basis: 100%; }
  .tt { padding: 5px 9px; border-radius: 8px; background: #1a1a1a; margin-right: 6px; }
  .tt b { font-size: 22px; color: #fff; }
  .tt span { font-size: 12px; }
  .tt-3 { display: inline-flex; }
  .kpi.k-dark .kpi__v:has(.tt) { overflow: visible; }
}

/* Кнопки нового дизайну */
.btn2 {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn2:active { transform: scale(0.97); }
.btn2 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn2-dark { background: #0a0a0a; color: #fff; padding: 0 20px; }
@media (hover: hover) { .btn2-dark:hover { background: #262626; } }
.btn2-light { background: #fff; color: var(--text); border-color: #d0d5dd; }
.btn2 svg.tg-ic { width: 20px; height: 20px; stroke: none; fill: initial; margin-left: -2px; }
.btn2-tg { text-decoration: none; color: #fff; border: 0; background: linear-gradient(180deg, #40B3E0 0%, #229ED9 100%); box-shadow: 0 4px 12px rgba(34, 158, 217, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
@media (hover: hover) { .btn2-tg:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(34, 158, 217, 0.36); } }
.btn2-tg:active { transform: scale(0.97); }
.btn2-tg:focus-visible { outline: 3px solid rgba(34, 158, 217, 0.45); outline-offset: 3px; }
@media (hover: hover) { .btn2-light:hover { background: #f2f4f7; } }
.btn2-white { background: #fff; color: #0a0a0a; height: 40px; padding: 0 16px; font-weight: 650; }

/* ----- Світлий «аркуш» (телефон) ----- */
html, body { background: var(--nav); }
.main { background: var(--page); border-radius: 24px 24px 0 0; padding-top: 16px; min-height: 60vh; }
.tg .main { border-radius: 24px 24px 0 0; }
.tg.tg-stuck body::before { height: var(--tg-top); }
.tg.tg-stuck body::after { content: none; }
@media (min-width: 980px) {
  html, body { background: var(--page); }
  .main { background: transparent; border-radius: 0; padding-top: 24px; min-height: 0; }
}
/* Аркуш тягнеться до низу екрана, щоб унизу не було чорної смуги */
@media (max-width: 979px) {
  body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .main { flex: 1 0 auto; width: 100%; }
}
/* У картці й статистиці шапки турніру немає; у реєстрації — є, але без плиток і кнопок */
.view-card .hero, .view-stats .hero,
.view-reg .layout, .view-card .layout, .view-stats .layout { display: none !important; }
.view-card .main, .view-stats .main { border-radius: 0; }
.view-reg .kpis, .view-reg .hero__actions { display: none !important; }
.hero-back { display: none; }
.view-reg .hero-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 8px; margin-bottom: 10px;
  border: 0; border-radius: 999px; background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.hero-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 980px) {
  .view-reg .hero-back { background: transparent; color: #344054; padding: 0; height: auto; margin-bottom: 6px; }
  .view-reg .hero__inner { grid-template-columns: minmax(0, 1fr); }
}
#regBack, #regEvent { display: none !important; }
.reg #regTitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ----- Реєстрація ----- */
.reg { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.card2 { background: #fff; border: 1px solid var(--card-line); border-radius: 18px; padding: 16px; }
.seats { display: flex; flex-direction: column; gap: 10px; }
.seats__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.seats__row b { font-weight: 650; }
.seats__row .ok { color: #067647; font-weight: 650; font-size: 13px; }
.seats__row .warn { color: #b54708; font-weight: 650; font-size: 13px; }
.sbar { display: block; height: 8px; border-radius: 4px; background: #eef1f5; overflow: hidden; }
.sbar span { display: block; height: 100%; border-radius: 4px; background: #4c9a12; }
.seats__timer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--row-line); font-size: 13px; color: var(--muted); font-weight: 550; }
.ttiles { display: flex; gap: 6px; }
.ttiles .tt { display: inline-flex; align-items: baseline; gap: 2px; margin: 0; padding: 5px 8px; border-radius: 8px; background: #0a0a0a; color: #fff; }
.ttiles .tt b { font-size: 16px; font-weight: 750; font-stretch: 100%; color: #fff; }
.ttiles .tt span { font-size: 11px; color: #b8bfca; }
.ttiles .tt .l-d { display: inline; } .ttiles .tt .l-m { display: none; }
.reg .card { border: 1px solid var(--card-line); border-radius: 18px; box-shadow: none; padding: 16px; }
.reg .form { gap: 16px; }
.reg .field label { font-size: 13.5px; }
.reg .field input { height: 50px; min-height: 50px; border-radius: 12px; border: 1px solid #d0d5dd; font-size: 16px; padding: 0 14px; }
.reg .field input:focus { border-color: #0a0a0a; border-width: 1.5px; box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.08); }
.reg .hint { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--muted); }
.reg .fee-hint { margin-top: -4px; }
.reg .hint svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.reg .form .btn { min-height: 54px; margin-top: 0; }
.botnote { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #e8f5d9; color: #2f6b0a; font-size: 13px; }
.botnote svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reg .done { border-radius: 18px; }
@media (min-width: 980px) { .reg { margin: 0; } .view-reg .main { padding-top: 24px; } }

/* ----- Заповненість (телефон, список учасників) ----- */
.fillcard { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--card-line); }
.fillcard[hidden] { display: none; }
.fillcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.fillcard__row b { font-weight: 650; }
.fillcard__row span { color: var(--muted); white-space: nowrap; }
.fillcard { display: none !important; } /* лічильник місць є в плитках шапки */
.reg-live, .info { display: none !important; }

/* ----- Розкладка: таблиця + бічна панель ----- */
.layout { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 980px) {
  .layout { flex-direction: row; align-items: flex-start; gap: 24px; }
  .bcard { flex: 1 1 0; min-width: 0; }
  .side { flex: 0 0 300px; }
}

/* Картка таблиці */
.bcard { display: flex; flex-direction: column; gap: 12px; }
.btools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.btools__title { display: none; }
.legend { display: flex; gap: 10px; font-size: 12px; color: #344054; order: 2; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.lg-w { background: #d6f3e2; box-shadow: inset 0 0 0 1px #9fd8b8; }
.lg-d { background: #dcebff; box-shadow: inset 0 0 0 1px #a8c8f5; }
.lg-z { background: #eceff3; box-shadow: inset 0 0 0 1px #c9d0d9; }
.lg-l { background: #fde4e1; box-shadow: inset 0 0 0 1px #f2b5ad; }
.btools .tabs {
  order: 1; flex: 1 1 100%; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 4px; border-radius: 12px; background: #e4e7ec; border: 0; gap: 0; height: auto; align-items: center;
}
.btools .tab {
  height: 36px; border: 0; border-radius: 9px; background: transparent; color: #344054;
  font-size: 14px; font-weight: 550; box-shadow: none; padding: 0 14px;
}
.btools .tab[aria-selected="true"] { background: #fff; color: var(--text); font-weight: 650; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.search { display: none; }
.btools .tabs:empty { display: none; }

.board.v2 { background: #fff; border: 1px solid var(--card-line); border-radius: 18px; box-shadow: none; overflow: hidden; overflow: clip; }
.selbar { display: none !important; }

@media (min-width: 980px) {
  .bcard { gap: 0; background: #fff; border: 1px solid var(--card-line); border-radius: var(--r-card); overflow: hidden; }
  .btools { padding: 20px 24px; border-bottom: 1px solid #eef0f3; }
  .btools__title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
  .btools__title h2 { margin: 0; font-size: 18px; font-weight: 700; font-stretch: 100%; }
  .btools__title span { font-size: 13px; color: var(--muted); }
  .btools .tabs { order: 3; flex: 0 0 auto; padding: 3px; border-radius: 10px; background: #f2f4f7; }
  .btools .tab { height: 34px; font-size: 13.5px; border-radius: 8px; }
  .legend { order: 2; font-size: 12.5px; gap: 12px; }
  .legend i { width: 12px; height: 12px; }
  .search {
    order: 4; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; width: 240px;
    border: 1px solid #d0d5dd; border-radius: 10px; color: var(--muted); background: #fff;
  }
  .search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: transparent; }
  .search input::-webkit-search-cancel-button { cursor: pointer; }
  .search:focus-within { border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08); }
  .board.v2 { border: 0; border-radius: 0; }
  .selbar:not([hidden]) {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; background: #0a0a0a; color: #fff;
  }
  .selbar__place { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2b2b2b; font-size: 13px; font-weight: 800; }
  .selbar__place.medal-1 { background: #fbf1d0; color: #6b4d00; }
  .selbar__place.medal-2 { background: #eef1f5; color: #344054; }
  .selbar__place.medal-3 { background: #f6e3d2; color: #7a3f12; }
  .selbar__txt { display: flex; flex-direction: column; margin-right: auto; line-height: 1.3; }
  .selbar__txt small { font-size: 12px; color: #b8bfca; }
  .selbar__txt b { font-size: 15px; font-weight: 650; }
  .selbar__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #1a1a1a; color: #d0d5dd; display: grid; place-items: center; cursor: pointer; }
  .selbar__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
}

/* Спільне для рядків */
.r { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.r:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; border-radius: 6px; }
.av { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef1f5; color: #344054; font-size: 12px; font-weight: 700; }
.pc {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: 750; font-stretch: 100%; color: #344054;
}
.medal-1 .pc, .pc.medal-1 { background: #fbf1d0; color: #6b4d00; box-shadow: inset 0 0 0 1.5px #e8b931; }
.medal-2 .pc, .pc.medal-2 { background: #eef1f5; color: #344054; box-shadow: inset 0 0 0 1.5px #a3adba; }
.medal-3 .pc, .pc.medal-3 { background: #f6e3d2; color: #7a3f12; box-shadow: inset 0 0 0 1.5px #d08b4f; }
.board.v2 .mv { font-size: 11.5px; font-weight: 700; margin-left: 4px; }
.board.v2 .empty { padding: 32px 16px; }

/* ----- Залік ----- */
.rk-row {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 62px; padding: 0 14px; border-bottom: 1px solid var(--row-line); background: #fff;
}
.rk-row.z { background: var(--zebra2); }
.rk-row.is-sel { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel-ring); }
.rk-row.flash { animation: rowflash 2.4s ease-out 1; }
@keyframes rowflash { 0%, 30% { background: var(--flash); } 100% { background: inherit; } }
.rk-head {
  min-height: 0; padding-top: 10px; padding-bottom: 10px; background: #f9fafb; border-bottom-color: #eef0f3;
  font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); cursor: default;
}
.rk-head .c-pl { visibility: hidden; }
.rk-head .c-pts { text-align: right; }
.c-pl { display: flex; align-items: center; white-space: nowrap; }
.rk-row .c-pl .mv { display: none; }
.c-nm { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-row .av { display: none; }
.nmw { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-nm { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { font-size: 12.5px; color: var(--muted); }
.msub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.fls { display: inline-flex; gap: 3px; }
.fl { width: 14px; height: 4px; border-radius: 2px; }
.fl-w { background: #32a467; } .fl-d { background: #4f8fe0; } .fl-z { background: #98a2b3; } .fl-l { background: #e0675c; }
.c-pts { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.c-pts b { font-size: 17px; font-weight: 750; font-stretch: 100%; line-height: 1.15; }
.c-pts small { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (min-width: 980px) {
  .rk-row { grid-template-columns: 64px minmax(160px, 1fr) 126px 104px 52px 76px 96px; min-height: 60px; padding: 0 24px; }
  .rk.no-t .rk-row { grid-template-columns: 64px minmax(160px, 1fr) 52px 76px 96px; }
  .rk-head { font-size: 11.5px; padding-top: 10px; padding-bottom: 10px; }
  .rk-head .c-pl { visibility: visible; }
  .rk-row .c-pl .mv { display: inline; }
  .rk-row .av { display: inline-grid; width: 36px; height: 36px; }
  .c-form { display: flex; gap: 4px; }
  .fb { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 750; }
  .fb-w { background: var(--win-bg); color: var(--win); } .fb-d { background: var(--draw-bg); color: var(--draw); }
  .fb-z { background: var(--zero-bg); color: var(--zero); } .fb-l { background: var(--loss-bg); color: var(--loss); }
  .c-wdl { font-size: 14px; color: #475467; white-space: nowrap; }
  .c-wdl .c-w { color: #067647; } .c-wdl .c-d { color: #175cd3; } .c-wdl .c-z { color: #475467; } .c-wdl .c-l { color: #b42318; }
  .c-win, .c-fish { text-align: right; font-size: 15px; font-weight: 600; color: #344054; }
  .rk-head .c-win, .rk-head .c-fish { font-size: inherit; font-weight: inherit; color: inherit; white-space: nowrap; }
  .c-pts b { font-size: 17px; }
}
@media (hover: hover) { .rk-row.r:not(.is-sel):hover, .tr-row.r:not(.is-sel):hover, .pt.r:not(.is-sel):hover { background: #f2f4f7; } }

/* ----- По турах ----- */
.tgrid-hint { margin: 0; padding: 8px 14px 0; text-align: right; font-size: 12px; color: var(--muted); }
.tgrid { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tgrid:focus-visible { outline-offset: -2px; }
.tgrid__in { width: max-content; min-width: 100%; }
.tr-row { display: flex; align-items: center; gap: 4px; min-height: 48px; padding-right: 12px; border-bottom: 1px solid var(--row-line); background: #fff; }
.tr-row.z { background: var(--zebra2); }
.tr-row.is-sel { background: var(--sel-bg); }
.tr-row > span { flex: none; }
.t-pl {
  position: sticky; left: 0; z-index: 1; width: 46px; align-self: stretch; display: flex; align-items: center;
  padding-left: 12px; background: inherit; box-shadow: 6px 0 8px -6px rgba(16, 24, 40, 0.18);
}
.t-pl .pc { width: 24px; height: 24px; font-size: 11.5px; }
.t-nm { width: 160px; padding-left: 4px; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-c { width: 34px; display: flex; justify-content: center; }
.tc {
  width: 34px; height: 34px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.tc small { font-size: 8.5px; font-weight: 700; opacity: 0.8; }
.tc b { font-size: 13px; font-weight: 750; margin-top: 1px; }
.tc-w { background: #d6f3e2; box-shadow: inset 0 0 0 1px #9fd8b8; color: #05603a; }
.tc-d { background: #dcebff; box-shadow: inset 0 0 0 1px #a8c8f5; color: #1849a9; }
.tc-z { background: #eceff3; box-shadow: inset 0 0 0 1px #c9d0d9; color: #344054; }
.tc-l { background: #fde4e1; box-shadow: inset 0 0 0 1px #f2b5ad; color: #912018; }
.tc-none { color: #98a2b3; font-weight: 600; }
.tr-head { min-height: 0; padding-top: 10px; padding-bottom: 8px; align-items: flex-end; background: #fff; border-bottom-color: #eef0f3; font-size: 11px; font-weight: 650; color: var(--muted); }
.tr-head .t-pl { align-items: flex-end; }
.tr-head .t-nm { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; font-weight: 650; }
.tr-head .t-c { flex-direction: column; align-items: center; gap: 1px; }
.tr-head .t-c b { color: #344054; font-weight: 750; }
.tr-head .t-c small { font-size: 9.5px; font-weight: 550; }
.t-s { width: 52px; text-align: right; font-size: 14.5px; font-weight: 600; color: #344054; }
.t-s b { font-size: 16px; font-weight: 750; color: var(--text); }
@media (min-width: 980px) {
  .tgrid__in { padding: 0 24px 8px; }
  .tr-row { gap: 6px; min-height: 52px; padding-right: 0; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .tr-row.is-sel { box-shadow: inset 0 0 0 2px var(--sel-ring); border-radius: 12px; }
  .t-pl { position: static; width: 40px; padding-left: 0; box-shadow: none; background: transparent; }
  .t-pl .pc { width: 28px; height: 28px; font-size: 13px; }
  .t-nm { flex: 1 1 170px !important; min-width: 170px; font-size: 14.5px; }
  .t-c, .tc { width: 44px; }
  .tc { height: 38px; border-radius: 8px; }
  .tc small { font-size: 9.5px; } .tc b { font-size: 14px; }
  .tr-head .t-c b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef1f5; }
  .tr-head .t-c small { font-size: 10.5px; }
  .tr-head .t-s { font-size: 11.5px; font-weight: 650; color: var(--muted); }
}

/* ----- Список учасників ----- */
.plist { list-style: none; margin: 0; padding: 0; }
.plist-head { display: flex; justify-content: space-between; padding: 10px 14px; background: #f9fafb; border-bottom: 1px solid #eef0f3; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 979px) {
  .pt__n { order: 4; width: auto; min-width: 24px; text-align: right; }
  .pt .av { order: 0; }
  .pt__nm { order: 1; }
  .pt__new { order: 2; }
  .pt__paid { order: 3; }
}
.pt__paid { flex: none; width: 28px; height: 28px; margin: -2px 0; object-fit: contain; }
.pt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-bottom: 1px solid var(--row-line); background: #fff; }
.pt.z1 { background: var(--zebra2); }
.pt.is-sel { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--sel-ring); }
.pt__n { flex: none; width: 26px; font-size: 14px; font-weight: 650; color: var(--muted); }
.pt__nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt__new { flex: none; padding: 2px 8px; border-radius: 999px; background: #e8f5d9; color: #2f6b0a; font-size: 11.5px; font-weight: 650; }
.pt .av { width: 32px; height: 32px; }
.av--free { background: transparent; border: 1.5px dashed #c3cad4; }
.pt--free { color: var(--muted); cursor: default; }
.pt--free .pt__nm { font-weight: 550; color: var(--muted); }
.plist-sep { margin: 0; padding: 10px 14px; background: #fffaeb; border-bottom: 1px solid #fedf89; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #93370d; }
@media (min-width: 980px) {
  .plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: column; column-gap: 24px; padding: 8px 24px 16px; }
  .pt { min-height: 56px; padding: 0 10px; }
  .pt.z1 { background: #fff; }
  .pt.z2 { background: var(--zebra2); }
  .pt .av { width: 34px; height: 34px; }
  .plist-sep { padding: 10px 24px; }
}

/* ----- Бічна панель ----- */
.side { display: none; }
@media (min-width: 980px) {
  .side:not([hidden]) { display: flex; flex-direction: column; gap: 16px; }
  .scard { background: #fff; border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .scard h3 { margin: 0; font-size: 16px; font-weight: 700; font-stretch: 100%; }
  .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
  .podium__col { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .podium__name { font-size: 12.5px; font-weight: 650; line-height: 1.25; }
  .podium__bar { width: 100%; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-size: 26px; font-weight: 800; font-stretch: 100%; }
  .p1 .podium__bar { height: 116px; background: #fbf1d0; color: #6b4d00; font-size: 30px; }
  .p2 .podium__bar { height: 84px; background: #eef1f5; color: #475467; }
  .p3 .podium__bar { height: 64px; background: #f6e3d2; color: #7a3f12; font-size: 24px; }
  .podium__pts { font-size: 12px; color: var(--muted); }
  .ftop { display: flex; flex-direction: column; gap: 6px; }
  .ftop__row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
  .ftop__row b { font-weight: 600; }
  .ftop__row span { font-weight: 700; white-space: nowrap; }
  .ftop__row small { font-weight: 500; color: var(--muted); font-size: 14px; }
  .ftop__bar { display: block; height: 6px; border-radius: 3px; background: #eef1f5; }
  .ftop__bar span { display: block; height: 6px; border-radius: 3px; background: #2f74c0; }
  .pts-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
  .pts-legend li { display: flex; align-items: center; gap: 8px; }
  .pts-legend .code { min-width: 28px; }
}

/* ----- Нижні кнопки (телефон); на комп'ютері — у шапці й смужці вибору ----- */
.regbar { background: linear-gradient(to top, var(--page) 55%, rgba(243, 244, 246, 0)); }
.regbar .btn { min-height: 52px; font-size: 15px; font-weight: 650; }
.regbar .btn-secondary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(16, 24, 40, 0.22); }
.regbar .btn-primary { box-shadow: 0 8px 20px rgba(16, 24, 40, 0.22); }
@media (min-width: 980px) { .view-list .regbar, html:not(.view-reg):not(.view-card):not(.view-stats) .regbar { display: none !important; } }

/* Повідомлення «Посилання скопійовано» */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 60;
  padding: 10px 16px; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.24);
}

/* ===== src/css/65-v2-card.css ===== */
/* =====================================================================
   НОВИЙ ДИЗАЙН: картка учасника (і загальні блоки картки/статистики)
   ===================================================================== */
#pcBack { display: none !important; }
.pcard { max-width: none; }
@media (max-width: 979px) {
  .view-card .main { background: var(--nav); padding: 0; border-radius: 0; }
}
.pc-hero { color: #fff; padding: 4px 16px 32px; }
.pc-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.pc-back {
  display: inline-flex !important; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 8px; margin: 0 !important;
  border: 0; border-radius: 999px; background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pc-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-hero__acts { display: flex; gap: 8px; }
.pc-share, .pc-ibtn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: #1a1a1a; color: #fff; cursor: pointer;
}
.pc-share svg, .pc-ibtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pc-hero__main { display: flex; align-items: center; gap: 14px; }
.pc-hero .pc-place { width: 60px; height: 60px; font-size: 26px; flex: none; }
.pc-hero .pc-place:not([class*="medal"]) { background: #1a1a1a; color: #fff; }
.pc-hero .title { color: #fff; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.pc-sub { margin: 4px 0 0; font-size: 13px; color: #b8bfca; }
.pc-sheet { background: var(--page); border-radius: 24px 24px 0 0; padding: 16px; min-height: 60vh; }
@media (max-width: 979px) { .pc-sheet { min-height: calc(100vh - 160px); } }

@media (min-width: 980px) {
  .pc-hero { color: var(--text); padding: 28px 0 24px; }
  .pc-hero__bar { margin-bottom: 20px; }
  .pc-back { background: transparent !important; color: #344054 !important; padding: 0 !important; height: auto !important; font-weight: 600; }
  .pc-ibtn { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid #d0d5dd; color: #344054; }
  .pc-share { width: auto; height: 44px; padding: 0 18px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; background: #0a0a0a; font-size: 14px; font-weight: 600; }
  .pc-share svg { width: 16px; height: 16px; }
  .pc-hero__main { gap: 20px; }
  .pc-hero .pc-place { width: 76px; height: 76px; font-size: 32px; }
  .pc-hero .pc-place:not([class*="medal"]) { background: #eef1f5; color: #344054; }
  .pc-hero .pc-place.medal-1 { box-shadow: inset 0 0 0 3px #e8b931; }
  .pc-hero .title { color: var(--text); font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; }
  .pc-chips { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--card-line); font-size: 13px; font-weight: 600; }
  .chip-place { background: #eef1f5; border-color: transparent; }
  .chip-place.medal-1 { background: #fbf1d0; color: #6b4d00; }
  .chip-place.medal-2 { background: #eef1f5; color: #344054; }
  .chip-place.medal-3 { background: #f6e3d2; color: #7a3f12; }
  .chip-plain { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
  .pc-sheet { background: transparent; border-radius: 0; padding: 0 0 48px; min-height: 0; }
}

/* Плитки картки */
.pc-k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pk { min-width: 0; background: #fff; border: 1px solid var(--card-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.pk__l { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.pk__v { font-size: 26px; font-weight: 750; font-stretch: 100%; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.pk__v--sm { font-size: 22px; }
.pk__v small { font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.pk__s { font-size: 12px; color: var(--muted); }
.pk__wdl { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; }
.pk__wdl i { display: block; height: 100%; }
.pk__badge { align-self: flex-start; padding: 1px 7px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 12px; font-weight: 650; }
.pk__badge.is-up { background: #ecfdf3; color: #067647; }
.pk__badge.is-down { background: #fef3f2; color: #b42318; }
@media (min-width: 980px) {
  .pc-k { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
  .pk { padding: 18px 20px; gap: 10px; }
  .pk__l { font-size: 13px; }
  .pk__v, .pk__v--sm { font-size: 32px; letter-spacing: -0.02em; }
  .pk__v small { font-size: 16px; }
  .pk__s { font-size: 12.5px; }
  .pk__wdl { height: 6px; }
  .pk__badge { font-size: 12.5px; padding: 2px 8px; }
}

/* Блоки картки й статистики */
.pcard .pc-cols { gap: 12px; }
.pcard .pc-block { background: #fff; border: 1px solid var(--card-line); border-radius: 18px; box-shadow: none; padding: 16px; margin-bottom: 12px; }
.pcard .pc-h2 { font-size: 16px; font-weight: 700; font-stretch: 100%; margin: 0 0 12px; }
@media (min-width: 980px) {
  .pcard .pc-cols { column-gap: 24px; }
  .pcard .pc-block { border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 16px; }
  .pcard .pc-h2 { font-size: 18px; margin-bottom: 14px; }
}
/* Тури: зебра і рядки на всю ширину блоку */
.pcard .pc-tour { margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-top-color: var(--row-line); }
.pcard .pc-tours .pc-tour:nth-child(even):not(.is-next) { background: var(--zebra2); }
.pcard .pc-tour--head { margin: 0 -16px; padding: 8px 16px; background: #f9fafb; border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
@media (min-width: 980px) {
  .pcard .pc-tour, .pcard .pc-tour--head { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .pcard .pc-tour { min-height: 52px; }
}
.pcard .pc-tour__n .hm-sec__b { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #eef1f5; color: #344054; }
/* Статистика в картці */
.pcard .pc-stat { border-radius: 12px; background: #f6f7f9; padding: 14px; }
.pcard .pc-stat dd b { font-size: 18px; font-stretch: 100%; }
.pcard .pc-stats { gap: 10px; }
.pcard .pc-chips li { border-radius: 999px; border-color: var(--card-line); }

/* ===== src/css/70-v2-polish.css ===== */
/* =====================================================================
   НОВИЙ ДИЗАЙН: статистика
   ===================================================================== */
#tsBack { display: none !important; }
@media (max-width: 979px) {
  .view-stats .main { background: var(--nav); padding: 0; border-radius: 0; }
}
.ts-hero__main { display: flex; flex-direction: column; gap: 4px; }
.ts-hero .title { font-size: 30px; }
.kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.kpis--2 .kpi { padding: 12px; }
.kpis--2 .kpi__v { font-size: 22px; }
@media (min-width: 980px) {
  .ts-hero { padding-top: 36px; }
  .ts-hero__main { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
  .ts-hero .title { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; }
  .ts-hero .pc-sub { font-size: 15px; color: #475467; margin-top: 8px; }
  .kpis--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
  .kpis--2 .kpi { padding: 18px 20px; }
  .kpis--2 .kpi__v { font-size: 30px; }
  .kpis--2 .kpi__v small { font-size: 15px; color: var(--muted); }
}
/* Топ за уловом: зебра */
.tstats .ts-top li { margin: 0 -16px; padding: 0 16px; border-top-color: var(--row-line); }
.tstats .ts-top li:nth-child(even) { background: var(--zebra2); }
@media (min-width: 980px) { .tstats .ts-top li { margin: 0 -24px; padding: 0 24px; } }
.tstats .ts-who li { font-size: 13px; }
.tstats .ts-share { height: 12px; border-radius: 6px; }

/* Завантаження, помилка, повідомлення — у тому ж стилі */
.board { border-radius: 18px; border-color: var(--card-line); box-shadow: none; }
@media (min-width: 980px) { .bcard .board { border-radius: 0; border: 0; } }
.notice { border-radius: 14px; border-color: var(--card-line); }
.board .empty strong { font-size: 16px; }

/* Відступ від навбару в картці й статистиці — як на головній */
@media (min-width: 980px) {
  .view-card .main, .view-stats .main { padding-top: 0; }
  .view-card .pc-hero { padding-top: 32px; }
  .view-stats .ts-hero { padding-top: 36px; }
  .view-reg .main { padding-top: 24px; }
  .pc-k { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* Кнопки «Назад»: кругле підсвічування при наведенні */
.pc-back, .view-reg .hero-back { transition: background-color 0.15s ease; }
@media (hover: hover) {
  .pc-back:hover, .view-reg .hero-back:hover { background: #2b2b2b; }
  .pc-ibtn:hover { background: #2b2b2b; }
  .pc-share:hover { background: #2b2b2b; }
}
@media (min-width: 980px) {
  .pc-back, .view-reg .hero-back {
    height: 36px !important; padding: 0 14px 0 8px !important; margin-left: -8px !important; border-radius: 999px !important;
  }
  .view-reg .hero-back { background: transparent; color: #344054; }
}
@media (min-width: 980px) and (hover: hover) {
  .pc-back:hover, .view-reg .hero-back:hover { background: #e4e7ec !important; }
  .pc-ibtn:hover { background: #f2f4f7; }
}

/* Список учасників: вибраний рядок — заокруглений, з відступом від рамки */
.plist .pt.is-sel { border-radius: 12px; border-bottom-color: transparent; background: var(--sel-bg); }
@media (min-width: 980px) {
  .pt { padding: 0 16px; }
}

/* Телефон, список учасників: без порожнього рядка інструментів таблиця стоїть від верху аркуша на тій самій відстані, що й від боків */
@media (max-width: 979px) {
  .bcard:has(.tabs:empty) > .btools { display: none; }
  .bcard:has(.tabs:empty) > #selbar[hidden] + .board { margin-top: -4px; }
}

/* Telegram на телефоні: при прокручуванні заокруглений верх аркуша лишається під панеллю Telegram,
   а шапка таблиці прилипає на 12 px нижче (як відступ таблиці від країв екрана) */
@media (max-width: 979px) {
  .tg .rk-head, .tg .plist-head {
    position: sticky;
    top: calc(var(--tg-top) + 12px);
    z-index: 6;
    border-radius: 17px 17px 0 0;
  }
  .tg.tg-stuck body::before { height: calc(var(--tg-top) + 24px); }
  .tg.tg-stuck body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--tg-top);
    height: 24px;
    background: var(--page);
    border-radius: 24px 24px 0 0;
    z-index: 51;
    pointer-events: none;
  }
  /* шапка таблиці — над «кришкою» аркуша */
  .tg.tg-stuck .rk-head.over-cap, .tg.tg-stuck .plist-head.over-cap { z-index: 52; }
}

/* «По турах»: у Telegram на телефоні прилипає копія шапки, бо справжня сидить у горизонтальному скролі */
.tgrid-hd { display: none; }
@media (max-width: 979px) {
  .tg .tgrid-hd {
    display: block;
    position: sticky;
    top: calc(var(--tg-top) + 12px);
    z-index: 6;
    overflow: hidden;
    background: #fff;
    border-radius: 17px 17px 0 0;
    pointer-events: none;
  }
  .tg.tg-stuck .tgrid-hd.over-cap { z-index: 52; }
  .tg .tgrid .tr-head { display: none; }
}

/* Telegram на телефоні: «Назад» — системна кнопка Telegram угорі, тому своєї кнопки «Назад» не показуємо */
@media (max-width: 979px) {
  .tg-back .hero-back { display: none !important; }
  .tg-back .ts-hero .pc-hero__bar { display: none; }
  .tg-back .pc-hero__acts { margin-left: auto; }
}

/* Реєстрація на телефоні: картку «Зареєстровано N з M · До закриття» не показуємо (лічильник і таймер є в шапці) */
@media (max-width: 979px) { #regSeats { display: none !important; } }

/* Telegram: стрілка жесту «свайп від краю — назад» */
.swipe-back {
  position: fixed; left: 0; top: 50%; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.72); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translate(-44px, -50%) scale(0.6);
  pointer-events: none;
  transition: background-color 0.15s ease;
}
.swipe-back.is-armed { background: #0a0a0a; }
.swipe-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .swipe-back:not(.is-dragging) { transition: background-color 0.15s ease, opacity 0.2s ease, transform 0.2s ease; }
}

/* Картка учасника: менший кружечок місця; на телефоні «Поділитися» праворуч від імені */
.pc-hero .pc-place { width: 44px; height: 44px; font-size: 19px; }
.pc-hero .pc-place.medal-1 { box-shadow: inset 0 0 0 2px #e8b931; }
@media (min-width: 980px) { .pc-hero .pc-place { width: 56px; height: 56px; font-size: 24px; } }
.pc-hero__main .pc-head__txt { flex: 1 1 auto; min-width: 0; }
.pc-share--m { flex: none; align-self: flex-start; margin-top: 2px; }
@media (max-width: 979px) {
  /* у Telegram верхній рядок картки тепер порожній (Назад — системна, Поділитися — біля імені) */
  .tg-back .pc-hero:not(.ts-hero) .pc-hero__bar { display: none; }
}

/* ===== src/css/75-card-sticky-tg.css ===== */
/* Картка учасника: шапка таблиці «Тури» прилипає до верху, поки гортається таблиця */
.pcard .pc-tour--head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 6;
}
.tg .pcard .pc-tour--head { top: calc(var(--tg-top) + 12px); }
.tg.tg-stuck .pcard .pc-tour--head.over-cap { z-index: 52; }

/* Telegram на телефоні: чорна смуга під панеллю Telegram — найвищий шар, тому прилиплі шапки таблиць,
   коли таблиця закінчується і вони їдуть угору, ховаються під неї, а не налазять на кнопки Telegram.
   «Кришка» аркуша сама малює чорні кути (без прозорих місць), тож смуга потрібна лише до --tg-top. */
@media (max-width: 979px) {
  .tg.tg-stuck body::before { height: var(--tg-top); z-index: 60; }
  /* чорна підкладка під кути «кришки» (сама кришка — body::after із заокругленням-супереліпсом) */
  .tg.tg-stuck::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--tg-top);
    height: 24px;
    background: var(--nav);
    z-index: 51;
    pointer-events: none;
  }
}

/* Реєстрація на телефоні: картки на 12 px від країв і від верху аркуша, як таблиця на головній */
@media (max-width: 979px) {
  .view-reg .main { padding-left: 12px; padding-right: 12px; padding-top: 12px; }
}
@media (max-width: 979px) { .tg.tg-stuck #regForm.over-cap { position: relative; z-index: 52; } }

/* Картка учасника: коли шапка «Тури» прилипла, у неї заокруглені верхні кути й рамка — як у самої картки */
.pcard .pc-tour--head { transition: border-radius 0.12s ease; }
.pcard .pc-tour--head.is-stuck {
  border-radius: 17px 17px 0 0;
  border-top-color: transparent;
  box-shadow: 0 0 0 1px var(--card-line);
}
@media (min-width: 980px) { .pcard .pc-tour--head.is-stuck { border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; } }
@media (prefers-reduced-motion: reduce) { .pcard .pc-tour--head { transition: none; } }
/* Telegram на телефоні: прилипла шапка таблиці — з лінією зверху, як верхня рамка таблиці */
@media (max-width: 979px) {
  .tg .rk-head, .tg .plist-head, .tg .tgrid-hd { border-top: 1px solid transparent; }
  .tg .rk-head.is-stuck, .tg .plist-head.is-stuck, .tg .tgrid-hd.is-stuck { border-top-color: var(--card-line); }
}
/* Прилиплі шапки таблиць — звичайне заокруглення: супереліпс на них Chrome малює з артефактом (світлий клин) */
@supports (corner-shape: squircle) {
  .rk-head, .plist-head, .tgrid-hd, .pc-tour--head { corner-shape: round; }
}

/* Телефон: компактніші рядки таблиць (було: учасники 52, залік 62, по турах 48, тури в картці 44) */
@media (max-width: 979px) {
  .plist .pt { min-height: 44px; }
  .rk-row:not(.rk-head) { min-height: 52px; }
  .tgrid .tr-row:not(.tr-head) { min-height: 40px; }
  .pcard .pc-tour:not(.pc-tour--head) { min-height: 40px; }
}

/* Курсор у полях введення — чорний, як навбар (на світлому полі білий курсор не видно) */
input, textarea, select { caret-color: var(--nav); }

/* Telegram: «потягни вниз — оновити» */
.ptr {
  position: fixed; left: 50%; top: calc(var(--tg-top, 0px) + 8px); z-index: 64;   /* поверх навбару (.topbar — 62) */
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--nav);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0; transform: translate(-50%, -44px);
  pointer-events: none;
}
.ptr__arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.15s ease; }
.ptr.is-armed .ptr__arrow { color: #3f7d0f; }
.ptr__spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.4px solid #e4e7ec; border-top-color: var(--nav); }
.ptr.is-busy .ptr__arrow { display: none; }
.ptr.is-busy .ptr__spin { display: block; animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .ptr:not(.is-dragging) { transition: opacity 0.2s ease, transform 0.25s ease; }
}
@supports (corner-shape: squircle) { .ptr, .ptr__spin, .swipe-back { corner-shape: round; } }

/* Форма реєстрації: «неактивна» кнопка, поки поля не заповнені правильно (але клікабельна — покаже помилки) */
#regSubmit.is-idle { background: #e4e7ec; color: #98a2b3; box-shadow: none; }
@media (hover: hover) { #regSubmit.is-idle:hover { background: #dde1e7; } }
#regSubmit.is-idle:not(:disabled):active { background: #d0d5dd; box-shadow: none; }
#regSubmit { transition: background-color 0.18s ease, color 0.18s ease; }
@media (prefers-reduced-motion: reduce) { #regSubmit { transition: none; } }

/* ===== src/css/80-photos-story.css ===== */
/* Фото учасника в кружечку замість ініціалів */
.av--ph { position: relative; overflow: hidden; color: transparent; }
.av--ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@supports (corner-shape: squircle) { .av--ph img { corner-shape: round; } }

/* Фото учасника: «Підсумок» на телефоні (на комп'ютері вже було) і шапка картки */
@media (max-width: 979px) {
  .rk-row .av { display: inline-grid; width: 32px; height: 32px; font-size: 11px; }
  .rk-row .c-nm { gap: 10px; }
}
.pc-ava { position: relative; flex: none; width: 56px; height: 56px; }
.pc-ava > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14); }
.pc-hero .pc-place.pc-place--badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; font-size: 13px;
  border: 2px solid var(--nav);
}
.pc-hero .pc-place.pc-place--badge.medal-1 { box-shadow: inset 0 0 0 2px #e8b931; }
@media (min-width: 980px) {
  .pc-ava { width: 76px; height: 76px; }
  .pc-ava > img { box-shadow: 0 0 0 1px var(--card-line); }
  .pc-hero .pc-place.pc-place--badge { width: 30px; height: 30px; font-size: 15px; border-color: var(--page); right: -2px; bottom: -2px; }
}
@supports (corner-shape: squircle) { .pc-ava > img, .pc-place--badge { corner-shape: round; } }

/* Подіум: фото (або ініціали) над іменем, з обідком кольору місця */
.podium__av { width: 48px; height: 48px; font-size: 14px; margin-bottom: -2px; }
.p1 .podium__av { width: 56px; height: 56px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.p2 .podium__av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--silver); }
.p3 .podium__av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bronze); }

/* Кнопка «Картка учасника» — насичений зелений градієнт бренду, білий текст (контраст ≥ 5:1) */
#cardOpen, .regbar #cardOpen, #selCard {
  background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(43, 102, 10, 0.30);
}
#selCard svg { stroke: currentColor; }
@media (hover: hover) {
  #cardOpen:hover, #selCard:hover { background: linear-gradient(135deg, #52a014 0%, #30720b 100%); }
}
#cardOpen:not(:disabled):active, #selCard:not(:disabled):active { background: linear-gradient(135deg, #3f7d0f 0%, #245708 100%); }

/* Картка: «Поділитися результатом» (картинка для сторіс) */
.pc-story {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  width: 100%; margin: 12px 0 0; padding: 14px 18px; text-align: left; cursor: pointer;
  border: 0; border-radius: 16px; color: #fff; font: inherit;
  background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%);
  box-shadow: 0 8px 20px rgba(43, 102, 10, 0.25);
}
.pc-story svg { grid-row: 1 / 3; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-story span { font-weight: 700; font-size: 16px; line-height: 1.2; }
.pc-story small { font-size: 12.5px; opacity: 0.85; }
@media (hover: hover) { .pc-story:hover { background: linear-gradient(135deg, #52a014 0%, #30720b 100%); } }
.pc-story:active { background: linear-gradient(135deg, #3f7d0f 0%, #245708 100%); }
@media (min-width: 980px) { .pc-story { max-width: 360px; } }

/* Перегляд картинки перед тим, як поділитися */
.story { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: calc(var(--tg-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: rgba(0, 0, 0, 0.88); }
.story[hidden] { display: none; }
.story__box { width: min(100%, 420px); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.story__img { position: relative; aspect-ratio: 9 / 16; max-height: calc(100dvh - var(--tg-top, 0px) - 180px); margin: 0 auto; width: auto; height: 100%; border-radius: 18px; overflow: hidden; background: #111; display: grid; place-items: center; }
.story__img img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-touch-callout: default; user-select: auto; }
.story__spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.15); border-top-color: #9bd83a; animation: ptr-spin 0.8s linear infinite; }
.story__hint { margin: 0; text-align: center; color: #d0d5dd; font-size: 14px; }
.story__acts { display: flex; gap: 8px; }
.story__acts > * { flex: 1; }
.story__acts [hidden] { display: none; }
.story__share { background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%); color: #fff; border-color: transparent; }
.story-open body { overflow: hidden; }
@supports (corner-shape: squircle) { .story, .story__box, .story__img, .story__img img, .story__spin { corner-shape: round; } }   /* супереліпс тут ламає малювання затемнення в Chrome */
.story__acts a.btn { text-decoration: none; }
/* відступи кнопки «Поділитися результатом» — як між іншими блоками картки */
.pc-story { margin: 0 0 12px; }
@media (min-width: 980px) { .pc-story { margin: 0 0 24px; } }
/* Градієнт під прозорою рамкою: малюємо від краю рамки, інакше на боках видно «шов» повторення градієнта */
#cardOpen, #selCard, .pc-story, .story__share { background-origin: border-box; background-repeat: no-repeat; }

/* «Поділитися результатом»: на комп'ютері — у шапці картки поруч із «Поділитися карткою» */
.pc-sharestory {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 650; color: #fff;
  background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%);
  box-shadow: 0 6px 16px rgba(43, 102, 10, 0.25);
}
.pc-sharestory svg, .pc-storybtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (hover: hover) { .pc-sharestory:hover { background: linear-gradient(135deg, #52a014 0%, #30720b 100%); } }
.pc-sharestory:active { background: linear-gradient(135deg, #3f7d0f 0%, #245708 100%); }
/* …а на телефоні — закріплена внизу, як «Зареєструватися» */
.pc-storybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
  padding: 24px max(16px, env(safe-area-inset-right)) calc(24px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, var(--page) 55%, rgba(243, 244, 246, 0));
  pointer-events: none;
}
.pc-storybtn {
  display: flex; width: 100%; max-width: 420px; pointer-events: auto; gap: 8px;
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%); background-origin: border-box; background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(43, 102, 10, 0.30);
}
.pc-storybtn:not(:disabled):active { background: linear-gradient(135deg, #3f7d0f 0%, #245708 100%); }
@media (max-width: 979px) {
  .pcard:has(.pc-storybar) .pc-sheet { padding-bottom: calc(112px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }
}
@media (min-width: 980px) { .pc-storybar { display: none !important; } }
/* Стрілки ‹ › у шапці картки — повністю заокруглені, як інші кнопки (супереліпс) */
.pc-ibtn { border-radius: 999px; }
/* Формат картинки: «Сторіс 9:16» / «Допис 4:3» */
.story__img.is-wide { aspect-ratio: 4 / 3; width: 100%; height: auto; }
.story__fmt { display: flex; gap: 4px; padding: 4px; margin: 0 auto; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.story__fmt button { flex: 1; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #d0d5dd; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.story__fmt button[aria-checked="true"] { background: #fff; color: #0a0a0a; }
.story__fmt { width: max-content; }
.story__fmt button { flex: none; white-space: nowrap; }

/* Перегляд картинки: прев'ю саме зменшується, щоб перемикач формату й кнопки завжди вміщались на екрані */
.story { display: flex; align-items: center; justify-content: center; }
.story__box { height: 100%; max-height: 100%; min-height: 0; }
.story__img, .story__img.is-wide {
  flex: 1 1 auto; min-height: 120px; width: 100%; height: auto; max-height: none; aspect-ratio: auto;
  background: transparent; border-radius: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.story__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.story__fmt, .story__acts, .story__hint { flex: none; }

/* Веб/десктоп: прев'ю картинки велике — займає майже всю висоту екрана; перемикач і кнопки лишаються компактними по центру */
@media (min-width: 720px) {
  .story { padding: 32px 32px 28px; }
  .story__box { width: min(100%, 1200px); gap: 16px; }
  .story__fmt { margin: 0 auto; }
  .story__acts { width: min(100%, 480px); margin: 0 auto; }
  .story__img { min-height: 0; }
  .story__img img { max-height: calc(100dvh - 216px); border-radius: 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); }
}
/* Ховер «Поділитися» у перегляді: лишається зеленим, лише трохи світлішає (а не сіріє, як звичайна кнопка) */
@media (hover: hover) { .story__share:hover { background: linear-gradient(135deg, #52a014 0%, #30720b 100%); color: #fff; border-color: transparent; } }
.story__share:active { background: linear-gradient(135deg, #3f7d0f 0%, #245708 100%); color: #fff; }

/* ===== src/css/85-banners-partner-lang.css ===== */
/* Плашка «Результати — у Telegram» над таблицею (лише в ТГ, поки бот не може писати) */
.nbar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 12px; padding: 14px 12px 14px 14px; border-radius: 20px; background: linear-gradient(135deg, #f1f8e6 0%, #e6f2d6 100%); border: 1px solid #d5e8bd; }
.nbar[hidden] { display: none; }
.nbar__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%); color: #fff; }
.nbar__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nbar__txt b { display: block; font-size: 15px; line-height: 1.25; color: var(--text); }
.nbar__txt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--text-4); }
.nbar__x { align-self: start; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #667085; display: grid; place-items: center; cursor: pointer; }
.nbar__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nbar__go { grid-column: 1 / -1; height: 44px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #4a9112 0%, #2b660a 100%); background-origin: border-box; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.nbar__go:active { background: linear-gradient(135deg, #3f7d0f 0%, #245708 100%); }
@media (hover: hover) { .nbar__go:hover { background: linear-gradient(135deg, #52a014 0%, #30720b 100%); } }
.nbar.is-done .nbar__go, .nbar.is-done .nbar__x { display: none; }
@supports (corner-shape: squircle) { .nbar__ic, .nbar__x { corner-shape: round; } }
@media (min-width: 980px) { .nbar { margin: 16px 24px; grid-template-columns: auto 1fr auto auto; } .nbar__go { grid-column: auto; grid-row: 1; grid-column-start: 3; padding: 0 22px; } .nbar__x { grid-column-start: 4; align-self: center; } }

/* Сегментед-контроли й пошук — «пігулки» з кутами-супереліпсом, як кнопки */
.tabs, .btools .tabs, .tab, .btools .tab, .tab[aria-selected="true"], .btools .tab[aria-selected="true"], .search { border-radius: 999px; }
@media (min-width: 980px) {
  .btools .tabs, .btools .tab, .search { border-radius: 999px; }
  .search { padding: 0 16px; }
}

/* Партнер FISH.ME.FISH: кругла кнопка, що «левітує» над нижньою кнопкою — лише в ТГ на телефоні, на головному екрані */
.partner { display: none; }
@media (max-width: 979px) {
  html.tg:not(.view-reg):not(.view-card):not(.view-stats) .partner {
    position: absolute; right: calc(max(16px, env(safe-area-inset-right)) + 8px); bottom: calc(100% - 6px);
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(120% 120% at 25% 15%, #86aeea 0%, #5b8fe0 45%, #3a72d4 100%);
    box-shadow: 0 10px 24px rgba(37, 88, 184, 0.35), 0 2px 6px rgba(16, 24, 40, 0.12);
    pointer-events: auto; -webkit-tap-highlight-color: transparent;
    animation: partner-float 2s ease-in-out infinite alternate;
  }
}
.partner img { width: 78%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); pointer-events: none; }
.partner:active { animation-play-state: paused; transform: scale(0.94); }
@keyframes partner-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .partner { animation: none !important; } }
@supports (corner-shape: squircle) { .partner { corner-shape: round; } }

/* Партнер на вебі/компʼютері: кругла кнопка поруч із «Поділитися» */
.partner-web {
  flex: none; display: grid; place-items: center; width: 76px; height: 44px; border-radius: 999px;
  background: radial-gradient(120% 120% at 25% 15%, #86aeea 0%, #5b8fe0 45%, #3a72d4 100%);
  box-shadow: 0 4px 12px rgba(37, 88, 184, 0.28); -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.partner-web img { width: auto; height: 40px; display: block; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
@media (hover: hover) { .partner-web:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 88, 184, 0.36); } .partner-web:hover img { transform: rotate(-5deg) scale(1.06); } }
.partner-web img { transition: transform 0.2s ease; }
.partner-web:active { transform: scale(0.94); }
.partner-web:focus-visible { outline: 3px solid rgba(58, 114, 212, 0.45); outline-offset: 3px; }

/* Зелені градієнтні кнопки: градієнт від зовнішнього краю рамки й без повторів — інакше по краях
   видно тонку смужку «протилежного» кольору (шорткат background у станах :hover/:active скидав це) */
#cardOpen, .regbar #cardOpen, #selCard, .pc-story, .pc-storybtn, .story__share, .pc-sharestory,
#cardOpen:hover, #cardOpen:active, .regbar #cardOpen:hover, .regbar #cardOpen:active, #selCard:hover, #selCard:active,
.story__share:hover, .story__share:active, .pc-storybtn:hover, .pc-storybtn:active, .pc-sharestory:hover, .pc-sharestory:active {
  background-origin: border-box !important; background-repeat: no-repeat !important; background-clip: border-box !important;
  border-width: 0 !important;   /* без рамки взагалі — Safari/Telegram на iPhone не малює смужку на краю */
}

/* Перемикач мови УКР / ENG у шапці */
.topbar__inner .status { margin-left: auto; }
.lang { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: #1a1a1a; }
.lang button {
  appearance: none; border: 0; background: transparent; color: #98a2b3; min-width: 40px; height: 26px; padding: 0 9px;
  border-radius: 999px; font: inherit; font-size: 12px; font-weight: 650; letter-spacing: 0.02em; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lang button[aria-pressed="true"] { background: #fff; color: #0a0a0a; }
@media (hover: hover) { .lang button:not([aria-pressed="true"]):hover { color: #fff; } }
@media (max-width: 979px) { .topbar__inner { gap: 8px; } .lang button { min-width: 36px; padding: 0 7px; } }
@media (min-width: 980px) { .lang button { height: 30px; min-width: 46px; font-size: 13px; } }
@media (max-width: 979px) {
  .topbar__inner .status { min-width: 0; flex: 0 1 auto; }
  #statusText { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 374px) { .lang button { min-width: 32px; padding: 0 6px; font-size: 11px; } .topbar__inner .status { padding: 0 9px; font-size: 12px; } }
@media (max-width: 419px) { .st-w { display: none; } }
/* Телефон: у відліку три плитки (дні · години · хвилини), трохи щільніше */
@media (max-width: 979px) {
  .tt-3 { display: inline-flex; }
  .kpi .tt { margin-right: 3px; }
  .kpi .tt:last-child { margin-right: 0; }
  .kpi .tt span { font-size: 10px; }
}
@media (max-width: 979px) {
  .kpi__v:has(.tt) { font-size: 17px; letter-spacing: -0.01em; }
  .kpi .tt { gap: 0; margin-right: 4px; }
}
@media (max-width: 374px) { .kpi__v:has(.tt) { font-size: 15px; } }

/* Перегляд картинки на телефоні: кнопки на тій самій висоті, що й нижня кнопка сторінки;
   нижні кнопки сторінки й кнопку партнера під затемненням ховаємо, щоб нічого не накладалось */
@media (max-width: 719px) {
  .story { padding-bottom: calc(24px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }
}
.story-open .regbar, .story-open .pc-storybar, .story-open .partner { visibility: hidden; }


/* Пошук: своя кнопка «очистити» замість системного синього хрестика */
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search__clear {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%;
  background: #eaecf0; color: #475467; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, color 0.15s ease;
}
.search__clear[hidden] { display: none; }
.search .search__clear svg { width: 14px; height: 14px; stroke-width: 2.2; }
@media (hover: hover) { .search__clear:hover { background: #d0d5dd; color: #101828; } }
.search__clear:active { transform: scale(0.92); }
@supports (corner-shape: squircle) { .search__clear { corner-shape: round; } }
/* Картка учасника на телефоні: більше повітря між шапкою і фото */
@media (max-width: 979px) { .pc-hero { padding-top: 18px; } }
/* Карта водойми: береги можуть мати різну кількість секторів (напр. 6 і 8) — кожен берег на всю ширину водойми */
.pond-row { display: flex; }
.pond-row .pond-sec { flex: 1 1 0; min-width: 0; }

/* ===== src/css/90-motion.css ===== */
/* Скелетони завантаження: м'який перелив, мінімум деталей */
.skel { padding: 8px 16px 16px; }
.skel__row { display: flex; align-items: center; gap: 12px; height: 52px; border-bottom: 1px solid #f2f4f7; }
.skel__row:last-child { border-bottom: 0; }
.skel__dot, .skel__bar, .skel__num { display: block; border-radius: 999px; background: #eef0f3; position: relative; overflow: hidden; }
.skel__dot { width: 32px; height: 32px; flex: none; border-radius: 50%; }
.skel__bar { height: 12px; }
.skel__bar--lg { height: 22px; margin-top: 12px; border-radius: 8px; }
.skel__num { width: 28px; height: 12px; margin-left: auto; flex: none; }
.skel__dot::after, .skel__bar::after, .skel__num::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: skel-shine 1.4s ease-in-out infinite;
}
.skel-kpi { min-height: 96px; }
/* на телефоні плитки в темній шапці — скелетон ледь світліший за фон */
@media (max-width: 979px) {
  .skel-kpi .skel__bar { background: rgba(255, 255, 255, 0.07); }
  .skel-kpi .skel__bar::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
}
@keyframes skel-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel__dot::after, .skel__bar::after, .skel__num::after { animation: none; } }
@supports (corner-shape: squircle) { .skel__dot, .skel__bar, .skel__num { corner-shape: round; } }
@media (min-width: 980px) { .skel { padding: 8px 24px 20px; } .skel__row { height: 60px; } }

/* Перемикачі з «таблеткою», що їде до вибраного пункту */
.has-seg { position: relative; }
.seg-ind {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s ease;
}
.has-seg > button { position: relative; z-index: 1; transition: color 0.2s ease; }
.has-seg > .tab[aria-selected="true"], .has-seg > button[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; }
.lang .seg-ind { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .seg-ind { transition: none; } }

/* Фінал: конфеті поверх усього і коротке сяйво медалі */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; }
.is-glow { animation: medal-glow 0.85s ease-in-out 3; }
@keyframes medal-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 185, 49, 0); filter: brightness(1); }
  50% { box-shadow: 0 0 0 6px rgba(232, 185, 49, 0.35), 0 0 26px 6px rgba(245, 197, 66, 0.55); filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) { .is-glow { animation: none; } }

/* Живі оновлення: рядок, що «переїжджає», трохи піднятий над іншими; стрілка місця коротко пульсує */
[data-key].is-moving { position: relative; z-index: 2; box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12); }
.rk-row.flash .mv { display: inline-block; animation: mv-pop 0.6s ease-out 3; }
@keyframes mv-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .rk-row.flash .mv { animation: none; } }

/* Графіки: стовпчики виростають знизу, числа й лінія середнього з'являються слідом */
.pc-chart.grow rect.bar, .pc-chart.grow rect.bar-t { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pc-chart.grow text.val { animation: fade-in 0.4s ease both; }
.pc-chart.grow .avg-line { animation: fade-in 0.6s ease 0.6s both; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc-chart.grow * { animation: none !important; } }

/* Кнопка «Оновити» в шапці — лише на комп'ютері */
.refresh { display: none; }
@media (min-width: 980px) {
  .refresh {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px; border: 1px solid #2a2a2a; border-radius: 999px;
    background: transparent; color: #d0d5dd; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  }
  .refresh svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .refresh:hover { color: #fff; border-color: #3a3a3a; background: #141414; }
  /* Під час оновлення іконка й текст зникають (ширина кнопки та сама), по центру крутиться спіннер */
  .refresh { position: relative; }
  .refresh > span { transition: opacity 0.15s ease; }
  .refresh.is-spin > span { opacity: 0; }
  .refresh__spin {
    position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #fff; opacity: 0; transition: opacity 0.15s ease;
  }
  .refresh.is-spin .refresh__spin { opacity: 1; animation: spin 0.7s linear infinite; }
  .refresh.is-spin { cursor: default; }
  @supports (corner-shape: squircle) { .refresh__spin { corner-shape: round; } }
  .refresh:focus-visible { outline: 2px solid #76b12d; outline-offset: 2px; }
}

/* Картка без фото: ініціали в такому самому кружечку */
.pc-ava--ini { display: grid; place-items: center; border-radius: 50%; background: #1f1f1f; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14); }
.pc-ini { font-size: 20px; font-weight: 750; letter-spacing: 0.02em; color: #e4e7ec; }
@media (min-width: 980px) {
  .pc-ava--ini { background: #eef0f3; box-shadow: 0 0 0 1px var(--card-line); }
  .pc-ini { font-size: 26px; color: #344054; }
}
@supports (corner-shape: squircle) { .pc-ava--ini { corner-shape: round; } }
@media (min-width: 980px) {
  .pc-ava--ini .pc-place--badge:not([class*="medal"]) { background: #fff; color: var(--text); box-shadow: 0 0 0 2px #f2f4f7, 0 1px 3px rgba(16, 24, 40, 0.12); }
}
/* Шапка на компʼютері: статус, «Оновити» й мови — з тим самим кроком 10px, що й кнопки під заголовком */
@media (min-width: 980px) { .topbar__inner .refresh, .topbar__inner .lang { margin-left: -22px; } }
.has-seg > button[aria-current="page"] { background: transparent !important; box-shadow: none !important; }
.topnav .seg-ind { box-shadow: none; }
/* Телефон: якщо сторінку «перетягнути» вгору, під світлим аркушем не видно темної смужки фону */
@media (max-width: 979px) { .main { box-shadow: 0 120px 0 0 var(--page); } }

/* Перемикання «Підсумок ↔ По турах»: плавний перехід (View Transitions; де не підтримується — як раніше, миттєво) */
.vt-tabs #bcard { view-transition-name: board-card; }
.vt-tabs #side { view-transition-name: side-panel; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(board-card), ::view-transition-group(side-panel) {
  animation-duration: 0.22s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);   /* усе разом і швидко */
}
::view-transition-image-pair(board-card) { overflow: hidden; border-radius: var(--r-card, 20px); }
::view-transition-old(board-card), ::view-transition-new(board-card) {
  width: 100%; height: 100%; object-fit: none; object-position: left top; animation-duration: 0.16s;
}
/* Бічна панель просто швидко зникає / з'являється, без руху вбік */
::view-transition-old(side-panel) { animation: vt-fade-out 0.12s linear both; }
::view-transition-new(side-panel) { animation: vt-fade-in 0.2s ease 0.06s both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* Мобайл: перемикання Підсумок ↔ По турах — нова таблиця м'яко проявляється, кнопки лишаються на місці */
.tab-in { animation: tab-in 0.22s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes tab-in { from { opacity: 0.2; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .tab-in { animation: none; } }

/* Тост «Оновлено» — зверху: виїжджає з-під навбару і тікає назад */
.topbar { position: relative; z-index: 62; }
.toast.toast--top {
  bottom: auto; z-index: 61;
  transform: translate(-50%, calc(-100% - 16px)); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.18s ease;
}
.toast.toast--top.is-in { transform: translate(-50%, 0); opacity: 1; }
.toast.toast--top.is-out {
  transform: translate(-50%, calc(-100% - 16px)); opacity: 0;
  transition: transform 0.32s cubic-bezier(0.55, 0, 0.7, 0.2), opacity 0.1s linear 0.24s;
}
@media (prefers-reduced-motion: reduce) { .toast.toast--top, .toast.toast--top.is-out { transition: opacity 0.2s; transform: translate(-50%, 0); } }

/* ===== src/css/95-desktop-selbar.css ===== */
/* ===== Комп: верх таблиці прилипає при прокручуванні, вибраний учасник — плаваюча таблетка внизу ===== */
@media (min-width: 980px) {
  .bcard { overflow: clip; }   /* clip, а не hidden — інакше sticky всередині не працює */
  .bcard > .btools { position: sticky; top: 0; z-index: 8; background: #fff; }
  .bcard .rk-head { position: sticky; top: var(--bt-h, 81px); z-index: 7; }
  /* «По турах»: справжня шапка сидить у горизонтальному скролі, тому прилипає її копія */
  .bcard .tgrid-hd {
    display: block; position: sticky; top: var(--bt-h, 81px); z-index: 7;
    overflow: hidden; background: #fff; pointer-events: none;
  }
  .bcard .tgrid .tr-head { display: none; }
  .bcard .rk-row, .bcard .tr-row, .bcard .plist > li { scroll-margin-top: calc(var(--bt-h, 81px) + 56px); scroll-margin-bottom: 110px; }

  .selbar:not([hidden]) {
    position: fixed; left: 50%; bottom: 24px; z-index: 55;
    flex-wrap: nowrap; gap: 14px; width: max-content; max-width: calc(100vw - 48px);
    padding: 10px 10px 10px 12px; border-radius: 999px;
    box-shadow: 0 18px 44px rgba(10, 10, 10, 0.28), 0 2px 6px rgba(10, 10, 10, 0.16);
    transform: translate(-50%, calc(100% + 32px)); opacity: 0;
    transition: transform 0.26s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.2s ease;
  }
  .selbar.is-on:not([hidden]) {
    transform: translate(-50%, 0); opacity: 1;
    transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity 0.16s ease;
  }
  .selbar .selbar__place { width: 36px; height: 36px; font-size: 14px; flex: none; }
  .selbar .selbar__txt { margin-right: 14px; min-width: 0; }
  .selbar .selbar__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .selbar #selCard { border-radius: 999px; }
  .selbar .selbar__x { flex: none; }
  .sel-on .main { padding-bottom: 104px; }
}
@media (min-width: 980px) and (prefers-reduced-motion: reduce) {
  .selbar:not([hidden]), .selbar.is-on:not([hidden]) { transition: opacity 0.2s; transform: translate(-50%, 0); }
}

/* Скелетон картки: відкрили посилання …/#p9, а дані ще вантажаться */
.pc-skel .pc-ava.skel__dot { width: 56px; height: 56px; }
.pc-skel .pc-head__txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pc-skel .pc-sheet .pc-block { padding: 4px 0; }
@media (min-width: 980px) { .pc-skel .pc-ava.skel__dot { width: 76px; height: 76px; } }
@media (max-width: 979px) {
  .pc-skel .pc-hero .skel__bar, .pc-skel .pc-hero .skel__dot { background: rgba(255, 255, 255, 0.12); }
  .pc-skel .pc-hero .skel__bar::after, .pc-skel .pc-hero .skel__dot::after { opacity: 0.12; }
}

/* Посилання на картку: поки app.js не відкрив картку, порожній «аркуш» картки замість головної */
.deep-wait #pcard[hidden] { display: block !important; min-height: 60vh; }
/* ===== src/css/97-compare.css ===== */
/* Порівняння двох учасників («Двобій») — у контейнері картки (.pcard) */

/* Кнопки: іконка картки ↔ іконка порівняння */
.ic-cmp { display: none; }
#cardOpen.is-cmp .ic-card, .selbar.is-cmp .ic-card { display: none; }
#cardOpen.is-cmp .ic-cmp, .selbar.is-cmp .ic-cmp { display: block; }
#selCard svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Таблетка на комп'ютері: два кружечки місць внахлест */
@media (min-width: 980px) {
  .selbar .selbar__place--2 { margin-left: -22px; box-shadow: 0 0 0 3px var(--nav); }
  .selbar.is-cmp .selbar__txt b { max-width: 46vw; }
}
@supports (corner-shape: squircle) { .cmp-vs, .cmp-ava > img { corner-shape: round; } }

/* Шапка: двоє з фото, між ними «VS» */
.cmp-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 6px; padding: 6px 0 4px; text-align: center; }
.cmp-p { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.cmp-hero .pc-ava.cmp-ava { width: 76px; height: 76px; }
.cmp-hero .pc-ava--ini .pc-ini { font-size: 24px; }
.cmp-nm { font-size: 17px; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cmp-sub { font-size: 13px; font-weight: 550; color: rgba(255, 255, 255, 0.62); }
.cmp-vs {
  align-self: start; margin-top: 22px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
@media (min-width: 980px) {
  .cmp-hero .pc-hero__bar { margin-bottom: 8px; }
  .cmp-duel { max-width: 880px; margin: 0 auto; gap: 24px; }
  .cmp-hero .pc-ava.cmp-ava { width: 104px; height: 104px; }
  .cmp-hero .pc-ava--ini .pc-ini { font-size: 32px; }
  .cmp-nm { font-size: 24px; }
  .cmp-sub { color: var(--muted); font-size: 14px; }
  .cmp-vs { margin-top: 32px; width: 44px; height: 44px; font-size: 13px; background: #eef1f5; color: var(--text); }
}

/* Підсумок: «рахунок» кращих показників */
.cmp-wrap { max-width: 880px; margin: 0 auto; }
.pcard .cmp-sum { text-align: center; padding: 18px 16px; }
.cmp-score { display: flex; justify-content: center; align-items: baseline; gap: 14px; font-size: 44px; font-weight: 800; font-stretch: 100%; line-height: 1; letter-spacing: -0.02em; }
.cmp-score b { color: var(--text); min-width: 1.2ch; }
.cmp-score b.is-win { color: var(--brand-ink); }
.cmp-score span { color: #c3c9d3; font-weight: 700; }
.cmp-sum__t { margin: 10px 0 0; font-size: 15px; font-weight: 650; }
.cmp-sum__s { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cmp-sum__note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 14px auto 0; padding-top: 12px; border-top: 1px solid var(--border); max-width: 560px; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: left; }
.cmp-sum__note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Показники: значення зліва й справа, назва по центру, смужка-шкала під ними */
.cmp-cols { display: grid; gap: 0; }
@media (min-width: 980px) { .cmp-cols { grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } }
.pcard .cmp-cols .pc-block { padding-bottom: 6px; }
.cmp-rows { margin: 0 -16px; }
.cmp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: start;
  column-gap: 10px; padding: 11px 16px 12px; border-top: 1px solid var(--row-line);
}
.cmp-row:first-child { border-top: 0; padding-top: 4px; }
.cmp-l { align-self: center; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.2; max-width: 150px; }
.cmp-v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-v--a { align-items: flex-start; text-align: left; }
.cmp-v--b { align-items: flex-end; text-align: right; }
.cmp-v b { font-size: 19px; font-weight: 750; line-height: 1.15; font-stretch: 100%; white-space: nowrap; color: var(--text); }
.cmp-v small { font-size: 12px; font-weight: 550; color: var(--muted); white-space: nowrap; }
.cmp-v.is-win b { color: var(--brand-ink); }
.cmp-v.is-win b { display: inline-flex; align-items: center; gap: 6px; }
.cmp-v.is-win b::after { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.cmp-v--b.is-win b { flex-direction: row-reverse; }
.cmp-row.is-info .cmp-v b { font-size: 16px; font-weight: 650; }
.cmp-bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 6px; margin-top: 9px; }
.cmp-bar i { min-width: 4px; border-radius: 3px; background: #e4e7ec; }
.cmp-bar i.is-win { background: var(--brand); }
.cmp-bar i.is-neutral { background: #d5dbe3; }
.cmp-bar__a { transform-origin: right center; }
.cmp-bar__b { transform-origin: left center; }
@media (min-width: 980px) {
  .cmp-rows { margin: 0 -24px; }
  .cmp-row { padding: 12px 24px 13px; }
  .cmp-v b { font-size: 20px; }
  .cmp-l { max-width: 180px; }
}

/* Поява: смужки виростають від центру */
@keyframes cmp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cmp-anim .cmp-bar i { animation: cmp-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cmp-anim .cmp-cols .pc-block:last-child .cmp-bar i { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .cmp-anim .cmp-bar i { animation: none; } }

/* Особисті зустрічі: тур по центру, улов кожного по боках, переможець зеленим */
.cmp-h2h .pc-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cmp-h2h__tally { font-size: 16px; font-weight: 750; font-stretch: 100%; color: #c3c9d3; white-space: nowrap; }
.cmp-h2h__tally b { color: var(--text); }
.cmp-h2h__tally b.is-win { color: var(--brand-ink); }
.cmp-meet .cmp-l { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cmp-meet__t { font-size: 14px; font-weight: 700; color: var(--text); }
.cmp-meet .cmp-l small { font-size: 12px; font-weight: 550; color: var(--muted); }
.cmp-meet .cmp-v b { font-size: 22px; }
.cmp-meet.is-wait .cmp-v b { color: #c3c9d3; font-weight: 650; }
@media (min-width: 980px) { .cmp-meet .cmp-v b { font-size: 24px; } }
/* ===== src/css/98-empty-logo.css ===== */
/* Логотип у навбарі — посилання на головну */
.logo-link { display: block; flex: none; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.logo-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
@media (hover: hover) { .logo-link:hover .logo { opacity: 0.85; } }
.logo-link .logo { transition: opacity 0.15s ease; }

/* Порожній стан екрана (статистики ще немає, учасника не знайдено) */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px 28px; text-align: center; }
.empty-sheet { margin-top: 8px; }
@media (max-width: 979px) { .empty-sheet { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); } }
.empty-state { margin: 0; border-radius: var(--r-card, 20px); }
.empty-state__fish { width: 168px; height: auto; margin-bottom: 10px; opacity: 0.95; }
.empty-state strong { font-size: 18px; font-weight: 750; color: var(--text); margin: 0; }
.empty-state span { max-width: 340px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.empty-state__btn.btn { margin-top: 16px; width: auto; min-width: 200px; flex: none; padding-left: 28px; padding-right: 28px; }
@media (min-width: 980px) { .empty-sheet { margin-top: 32px; } .empty-state { padding: 56px 24px 44px; } .empty-state__fish { width: 200px; } }