/* ============================================================
   Бильярд — турнирная сетка
   Дизайн-система: токены → примитивы → компоненты → адаптив
   ============================================================ */

/* ---------- сброс ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* ============================================================
   1. ТОКЕНЫ
   ============================================================ */
:root{
  /* тема для системных элементов: полос прокрутки и выпадающих списков */
  color-scheme:dark;

  /* поверхности — сплошные, без полупрозрачности: так предсказуемее и быстрее */
  --bg:#0a0e0d;
  --bg-elev:#0f1513;
  --surface:#131a18;
  --surface-2:#1a2320;
  --surface-3:#232e2b;
  --border:#212b28;
  --border-2:#32403c;

  --text:#e9efec;
  --text-2:#a3b2ac;
  --text-3:#6d7d78;

  /* акцент — сукно: всё, что можно нажать */
  --accent:#1fa872;
  --accent-hi:#27c286;
  --accent-lo:#178a5d;
  --accent-ink:#04120c;
  --accent-soft:#12261f;

  /* золото — только победа: чемпион, 1-е место, выигранная сторона */
  --gold:#e0b84e;
  --gold-lo:#bd9634;
  --gold-ink:#1a1305;
  --gold-soft:#241d0c;

  --red:#e05f52;
  --red-soft:#2a1614;
  --blue:#5b95dd;
  --blue-soft:#12203a;
  --amber:#e3a83f;
  --amber-soft:#271d0b;

  --up:#35b880;
  --down:#e05f52;

  --line:#2c3a36;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 14px rgba(0,0,0,.35);
  --shadow-3:0 18px 48px rgba(0,0,0,.55);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);

  /* шкала отступов, 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:44px;
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --r-pill:999px;

  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --wrap:1180px;
  --wrap-wide:1500px;
  --topbar-h:58px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6f5;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#eef2f0;
  --surface-3:#e2e8e6;
  --border:#e2e8e6;
  --border-2:#c6d1cd;

  --text:#0e1817;
  --text-2:#566360;
  --text-3:#87948f;

  --accent:#0f8a5b;
  --accent-hi:#0b7a4f;
  --accent-lo:#0b6a45;
  --accent-ink:#ffffff;
  --accent-soft:#e2f2ea;

  --gold:#9a7519;
  --gold-lo:#7f6013;
  --gold-ink:#ffffff;
  --gold-soft:#f7edd4;

  --red:#c8443a;
  --red-soft:#fbe7e5;
  --blue:#2f6fc4;
  --blue-soft:#e6eefa;
  --amber:#a9761a;
  --amber-soft:#faf0da;

  --up:#0f8a5b;
  --down:#c8443a;

  --line:#c6d1cd;
  --shadow-1:0 1px 2px rgba(20,40,34,.06);
  --shadow-2:0 4px 14px rgba(20,40,34,.08);
  --shadow-3:0 18px 48px rgba(20,40,34,.18);
}

/* ============================================================
   2. БАЗА
   ============================================================ */
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* мягкое свечение сукна — единственное декоративное пятно на странице */
.felt{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -8%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 62%),
    radial-gradient(700px 420px at 92% -6%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 60%);
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
.wrap.wide{max-width:var(--wrap-wide)}

::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}

:where(a){color:var(--accent);text-underline-offset:2px}

/* фокус виден только с клавиатуры */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* инлайновый svg без размеров растягивается до 300×150 — задаём умолчание */
button svg,label svg,a svg,li svg,span svg{width:16px;height:16px;flex:none}

/* ============================================================
   3. ТИПОГРАФИКА
   ============================================================ */
.t-h1{font:700 clamp(20px,2.4vw,26px)/1.2 var(--font);letter-spacing:-.5px}
.t-h2{font:650 18px/1.25 var(--font);letter-spacing:-.3px}
.t-h3{font:650 15px/1.3 var(--font);letter-spacing:-.15px}
.t-lbl{font:700 11px/1 var(--font);letter-spacing:.9px;text-transform:uppercase;color:var(--text-3)}
.t-sub{font-size:13px;color:var(--text-2);line-height:1.55}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.muted{color:var(--text-2)}
.dim{color:var(--text-3)}

/* ============================================================
   4. КАРКАС: шапка, навигация, страницы
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.topbar-in{display:flex;align-items:center;gap:var(--s3);justify-content:space-between;height:var(--topbar-h)}

.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none}
.logo{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#4c4c4c,#0d0d0d 64%);
  display:grid;place-items:center;
  box-shadow:inset -3px -4px 8px rgba(0,0,0,.6),inset 3px 3px 6px rgba(255,255,255,.22),var(--shadow-1);
}
.logo i{width:18px;height:18px;border-radius:50%;background:#fff;color:#111;font:700 10px/18px var(--font);text-align:center;font-style:normal}
.brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.brand-txt strong{font-size:15px;font-weight:650;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt span{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:var(--s2);flex:none}

.progress{height:2px;background:var(--surface-2);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* --- главная навигация --- */
.nav{position:sticky;top:var(--topbar-h);z-index:55;background:var(--bg);border-bottom:1px solid var(--border)}
.nav-in{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.tab{
  display:inline-flex;align-items:center;gap:8px;flex:none;text-decoration:none;
  padding:13px 14px;border:0;background:transparent;color:var(--text-3);
  font:600 14px/1 var(--font);cursor:pointer;position:relative;transition:color .15s;
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;
}
.tab svg{width:17px;height:17px}
.tab:hover{color:var(--text-2)}
.tab.on{color:var(--text);border-bottom-color:var(--accent)}
.tab-badge{
  min-width:19px;height:19px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font:700 11px/19px var(--mono);text-align:center;
}

/* --- разделы управления: список сбоку, а не вторая полоса меню --- */
.mgr{display:grid;gap:var(--s5);align-items:start}
@media(min-width:960px){.mgr{grid-template-columns:212px minmax(0,1fr);gap:var(--s6)}}

.mgr-nav{display:flex;flex-direction:column;gap:2px}
@media(min-width:960px){
  .mgr-nav{position:sticky;top:calc(var(--topbar-h) + 58px)}
}
.mgr-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  border:1px solid transparent;border-radius:var(--r2);background:transparent;
  color:var(--text-3);font:600 13.5px/1.2 var(--font);cursor:pointer;transition:.15s;
  text-align:left;white-space:nowrap;text-decoration:none;
}
.mgr-item > svg{width:16px;height:16px;opacity:.85}
.mgr-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mgr-item .n{font:600 11.5px/1 var(--mono);color:var(--text-3);opacity:.8}
.mgr-item:hover{color:var(--text);background:var(--surface-2)}
.mgr-item.on{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.mgr-item.on .n{color:var(--accent)}

/* колонка со списком разделов забирает ширину — парные карточки складываем,
   пока места на две колонки по-настоящему не хватит */
@media(min-width:960px) and (max-width:1200px){
  .mgr-body .grid.two,.mgr-body .grid.aside{grid-template-columns:minmax(0,1fr)}
}

/* на телефоне — одна строка чипов: главное меню там внизу, стопки не получается */
@media(max-width:959px){
  .mgr-nav{
    flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding-bottom:var(--s3);border-bottom:1px solid var(--border);
  }
  .mgr-nav::-webkit-scrollbar{display:none}
  .mgr-item{width:auto;flex:none;border-radius:var(--r-pill);border-color:var(--border);background:var(--surface-2);padding:8px 13px}
  .mgr-item .n{margin-left:2px}
}

/* --- страница --- */
main{padding:var(--s5) 0 var(--s8);min-height:60vh}
.view{display:none}
.view.on{display:block;animation:rise .26s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.phead-txt{min-width:0}
.phead h1{font:700 clamp(19px,2.2vw,24px)/1.2 var(--font);letter-spacing:-.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phead p{margin-top:6px;font-size:13.5px;color:var(--text-2);max-width:62ch;line-height:1.55}
.phead-act{display:flex;gap:var(--s2);flex-wrap:wrap;flex:none}

/* ============================================================
   5. ПРИМИТИВЫ
   ============================================================ */

/* --- карточка --- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--shadow-1)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.card-head h2{font:650 15.5px/1.3 var(--font);letter-spacing:-.2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-head p{margin-top:4px;font-size:12.5px;color:var(--text-3);line-height:1.5;max-width:60ch}
.card-head .ha{display:flex;gap:var(--s2);flex:none;align-items:center}
.card-body{padding:var(--s5)}
.card-body.tight{padding:var(--s3)}
.card-body.flush{padding:0}
.card-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--border);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.card-foot.end{justify-content:flex-end}

.stack{display:flex;flex-direction:column;gap:var(--s4)}
.grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  /* модификатор назван .aside, а не .side: имя .side занято стороной матча в сетке */
  .grid.aside{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
}
@media(min-width:1080px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}

/* --- кнопки --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--r2);border:1px solid var(--border-2);
  background:var(--surface-2);color:var(--text);font:600 13.5px/1 var(--font);
  cursor:pointer;transition:.15s ease;white-space:nowrap;text-decoration:none;
}
.btn svg{width:16px;height:16px}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:650}
.btn.primary:hover{background:var(--accent-hi)}
.btn.gold{background:var(--gold);border-color:transparent;color:var(--gold-ink);font-weight:650}
.btn.gold:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.outline{background:transparent}
.btn.danger{background:transparent;color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:var(--r1);gap:6px}
.btn.sm svg{width:14px;height:14px}
.btn.lg{padding:14px 22px;font-size:15px}
.btn.block{width:100%}

.icon-btn{
  width:36px;height:36px;flex:none;border-radius:var(--r2);border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-2)}
.icon-btn.on{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
:root[data-theme="dark"] .ic-light{display:none}
:root[data-theme="light"] .ic-dark{display:none}

.mini{
  width:30px;height:30px;padding:0;border-radius:var(--r1);border:1px solid transparent;
  background:transparent;color:var(--text-3);cursor:pointer;
  display:inline-grid;place-items:center;flex:none;transition:.15s;vertical-align:middle;
}
.mini:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}
.mini.del:hover{color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.mini svg{width:15px;height:15px}

/* --- поля --- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font:600 12.5px/1 var(--font);color:var(--text-2);letter-spacing:.1px}
.field small{font-size:12px;color:var(--text-3);line-height:1.5}
.fields{display:flex;flex-direction:column;gap:var(--s4)}
.fields .row > *{flex:1;min-width:130px}

input[type=text],input[type=number],input[type=password],input[type=search],select,textarea{
  width:100%;padding:10px 13px;border-radius:var(--r2);border:1px solid var(--border-2);
  background:var(--bg-elev);color:var(--text);font:inherit;font-size:14.5px;transition:.15s;
}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
textarea{resize:vertical;min-height:110px;line-height:1.6}
select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%238b9995%22 stroke-width=%222%22 stroke-linecap=%22round%22><path d=%22M6 9l6 6 6-6%22/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px;padding-right:36px;
}
.row{display:flex;gap:var(--s2);flex-wrap:wrap}
.row > *{flex:1;min-width:0}
.row .none{flex:none}

.search{position:relative;flex:1;min-width:150px}
.search > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none}
.search input{padding-left:36px}

/* ============================================================
   6. КОМПОНЕНТЫ
   ============================================================ */

/* --- метки и чипы --- */
.tag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r1);
  font:650 11px/1.6 var(--font);border:1px solid var(--border);color:var(--text-3);background:var(--surface-2);
  white-space:nowrap;
}
.tag.gold{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:var(--gold-soft)}
.tag.green{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft)}
.tag.red{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);background:var(--red-soft)}
.tag.blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,transparent);background:var(--blue-soft)}
.tag.amber{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:var(--amber-soft)}
.tag.count{font-family:var(--mono);font-weight:700}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-2);font:600 12.5px/1 var(--font);cursor:pointer;transition:.15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{color:var(--text);border-color:var(--border-2)}
.chip.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.chip .n{font-family:var(--mono);font-size:11.5px;opacity:.75}

/* --- переключатель-сегмент --- */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2)}
.seg button{
  padding:7px 14px;border:0;border-radius:9px;background:transparent;color:var(--text-3);
  font:600 13px/1 var(--font);cursor:pointer;transition:.15s;white-space:nowrap;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

/* --- плитки-показатели --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:13px 15px}
.stat b{display:block;font:700 22px/1.2 var(--font);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:2px;font:600 11px/1.3 var(--font);color:var(--text-3);text-transform:uppercase;letter-spacing:.7px}
.stat.accent b{color:var(--accent)}
.stat.gold b{color:var(--gold)}

/* --- пустое состояние --- */
.empty{text-align:center;padding:var(--s7) var(--s5);color:var(--text-3)}
.empty > svg{width:36px;height:36px;opacity:.4;margin-bottom:var(--s3)}
.empty b{display:block;font:650 16px/1.3 var(--font);color:var(--text);margin-bottom:6px}
.empty p{font-size:13.5px;max-width:44ch;margin:0 auto;line-height:1.6}
.empty .btn{margin-top:var(--s4)}

/* --- уведомление-полоса --- */
.banner{
  display:flex;gap:var(--s3);align-items:flex-start;padding:14px 16px;
  border-radius:var(--r2);border:1px solid var(--border);background:var(--surface);margin-bottom:var(--s4);
}
.banner > svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--text-3)}
.banner > div{flex:1;min-width:0}
.banner b{display:block;font:650 14px/1.35 var(--font)}
.banner p{margin-top:3px;font-size:12.5px;color:var(--text-2);line-height:1.55}
.banner .btn{flex:none;align-self:center}
.banner.warn{border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:var(--amber-soft)}
.banner.warn > svg{color:var(--amber)}
.banner.gold{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:var(--gold-soft)}
.banner.gold > svg{color:var(--gold)}
.banner.info{border-color:color-mix(in srgb,var(--blue) 40%,transparent);background:var(--blue-soft)}
.banner.info > svg{color:var(--blue)}

/* --- пояснение, свёрнутое по умолчанию --- */
details.help{border:1px solid var(--border);border-radius:var(--r2);background:var(--surface-2);margin-top:var(--s3)}
details.help > summary{
  padding:9px 13px;cursor:pointer;font:600 12.5px/1.4 var(--font);color:var(--text-2);
  list-style:none;display:flex;align-items:center;gap:7px;
}
details.help > summary::-webkit-details-marker{display:none}
details.help > summary::before{content:"?";width:17px;height:17px;flex:none;border-radius:50%;border:1px solid var(--border-2);font:700 11px/15px var(--mono);text-align:center;color:var(--text-3)}
details.help > summary:hover{color:var(--text)}
details.help[open] > summary{border-bottom:1px solid var(--border)}
details.help .help-body{padding:12px 13px;font-size:12.5px;color:var(--text-2);line-height:1.65}
details.help .help-body p + p{margin-top:8px}

/* --- пары «ключ — значение» --- */
.kv{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv > span{color:var(--text-2)}
.kv > b{font-weight:650;text-align:right}

/* --- таблица --- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{
  text-align:left;padding:10px 14px;font:700 11px/1 var(--font);letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-3);background:var(--surface-2);white-space:nowrap;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;
}
table.tbl th.s{cursor:pointer;user-select:none}
table.tbl th.s:hover{color:var(--text)}
table.tbl th .dir{margin-left:4px;opacity:.55;font-size:9px}
table.tbl th.num,table.tbl td.num{text-align:right}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr.click{cursor:pointer}
table.tbl tbody tr.click:hover{background:var(--surface-2)}
table.tbl tbody tr.on{background:var(--accent-soft)}
table.tbl td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
table.tbl td.act{text-align:right;white-space:nowrap;width:1%}

.pcell{display:flex;align-items:center;gap:9px;min-width:0}
.pcell b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcell .sub{display:block;font-size:12px;color:var(--text-3);font-weight:400;margin-top:1px}

.place{
  display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 7px;border-radius:var(--r1);
  background:var(--surface-2);font:700 12.5px/1 var(--mono);color:var(--text-2);border:1px solid var(--border);
}
.place.p1{background:var(--gold);color:var(--gold-ink);border-color:transparent}
.place.p2{background:#c3c9cd;color:#1c1f22;border-color:transparent}
.place.p3{background:#c98a55;color:#231508;border-color:transparent}

/* --- шар с номером посева --- */
.ball{
  width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--ball,#333);position:relative;
  box-shadow:inset -2px -3px 5px rgba(0,0,0,.5),inset 2px 2px 4px rgba(255,255,255,.35),var(--shadow-1);
}
.ball.stripe{background:linear-gradient(180deg,#f4f4f4 0 24%,var(--ball) 24% 76%,#f4f4f4 76% 100%)}
.ball i{width:13px;height:13px;border-radius:50%;background:#fbfbfb;color:#15181a;font:700 8.5px/13px var(--font);font-style:normal;text-align:center;letter-spacing:-.3px}
.ball.sm{width:19px;height:19px}
.ball.sm i{width:11px;height:11px;font-size:8px;line-height:11px}
.ball.lg{width:32px;height:32px}
.ball.lg i{width:19px;height:19px;font-size:11px;line-height:19px}
.ball-gap{width:19px;flex:none}

/* --- список строк (игроки, города, группы) --- */
.rows{display:flex;flex-direction:column}
.rows > li{display:flex;align-items:center;gap:var(--s3);padding:11px 15px;border-bottom:1px solid var(--border)}
.rows > li:last-child{border-bottom:0}
.rows > li:hover{background:var(--surface-2)}
.rows .grow{flex:1;min-width:0}
.rows .nm{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .sub{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .acts{display:flex;gap:2px;flex:none}

/* --- список выбора участников --- */
.plist{
  display:flex;flex-direction:column;max-height:min(58vh,560px);overflow:auto;
  border:1px solid var(--border);border-radius:var(--r2);background:var(--bg-elev);
}
.plist li{border-bottom:1px solid var(--border)}
.plist li:last-child{border-bottom:0}
.plist li.ghead{
  position:sticky;top:0;z-index:2;background:var(--surface-2);
  display:flex;align-items:center;gap:var(--s2);padding:7px 12px;border-bottom:1px solid var(--border);
}
.plist li.ghead .gname{flex:1;min-width:0;font:700 11px/1.4 var(--font);letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;min-width:0;padding:9px 12px}
.pickrow:hover{background:var(--surface-2)}
.pickrow .pn{flex:1;min-width:0;font-size:14px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow .pc{font-size:12px;color:var(--text-3);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}

input[type=checkbox].cb{
  appearance:none;width:20px;height:20px;flex:none;border-radius:6px;margin:0;
  border:1.5px solid var(--border-2);background:var(--bg-elev);cursor:pointer;transition:.14s;position:relative;
}
input[type=checkbox].cb:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox].cb:checked::after{
  content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}
input[type=checkbox].cb:focus-visible{box-shadow:var(--ring)}

/* --- переключатель --- */
.switch{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r2);background:var(--surface-2);cursor:pointer}
.switch:hover{border-color:var(--border-2)}
.switch input{
  appearance:none;width:38px;height:22px;border-radius:var(--r-pill);background:var(--surface-3);
  position:relative;cursor:pointer;transition:.18s;flex:none;border:1px solid var(--border-2);margin:0;
}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:.18s}
.switch input:checked{background:var(--accent);border-color:transparent}
.switch input:checked::after{transform:translateX(16px);background:var(--accent-ink)}
.switch .sw-txt{font-size:13.5px;font-weight:550;flex:1;min-width:0}
.switch .sw-txt small{display:block;color:var(--text-3);font-size:12px;font-weight:400;margin-top:1px}

/* --- карточки-варианты --- */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.choice{position:relative;border:1px solid var(--border);border-radius:var(--r2);padding:13px 15px;background:var(--surface-2);cursor:pointer;transition:.15s;display:block}
.choice:hover{border-color:var(--border-2)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice b{display:block;font-size:14px;font-weight:650;margin-bottom:3px}
.choice small{display:block;color:var(--text-3);font-size:12px;line-height:1.45}
.choice.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}

/* --- счётчик --- */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border-2);border-radius:var(--r2);overflow:hidden;background:var(--bg-elev)}
.stepper button{width:40px;height:42px;border:0;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.15s}
.stepper button:hover{background:var(--surface-2)}
.stepper .val{min-width:50px;text-align:center;font:700 17px/1 var(--mono)}

/* --- мастер: шаги --- */
.steps{display:flex;gap:var(--s2);margin-bottom:var(--s5);flex-wrap:wrap}
.step{
  flex:1;min-width:130px;display:flex;align-items:center;gap:10px;padding:11px 14px;
  border:1px solid var(--border);border-radius:var(--r2);background:var(--surface);
  color:var(--text-3);font:600 13px/1.25 var(--font);cursor:pointer;text-align:left;transition:.15s;
}
.step:hover{border-color:var(--border-2);color:var(--text-2)}
.step .n{
  width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-3);font:700 12px/1 var(--mono);
}
.step span{flex:1;min-width:0}
.step small{display:block;font-weight:400;font-size:11.5px;color:var(--text-3);margin-top:2px}
.step.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.step.on .n{background:var(--accent);color:var(--accent-ink)}
.step.done .n{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.step.done{color:var(--text-2)}

/* --- группы разведения --- */
.agroup{border:1px solid var(--border);border-radius:var(--r2);background:var(--surface-2);padding:12px 14px;transition:.15s}
.agroup:hover{border-color:var(--border-2)}
.agroup-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.agroup-head b{flex:1;min-width:0;font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agroup-body{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:550}
.pchip i{font-style:normal;font-size:11px;color:var(--text-3)}

/* --- модальное окно --- */
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(3,7,6,.6);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:460px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column;
  background:var(--bg-elev);border:1px solid var(--border-2);border-radius:var(--r4);
  box-shadow:var(--shadow-3);animation:pop .2s cubic-bezier(.2,.9,.3,1.15);overflow:hidden;
}
.modal.wide{max-width:640px}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal > header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3);flex:none}
.modal > header h3{font:650 17px/1.25 var(--font);letter-spacing:-.3px}
.modal > header p{margin-top:4px;font-size:12.5px;color:var(--text-3);line-height:1.5}
.modal .body{padding:0 var(--s5) var(--s4);overflow:auto;flex:1}
.modal > footer{display:flex;gap:var(--s2);padding:var(--s4) var(--s5) var(--s5);flex:none;flex-wrap:wrap;border-top:1px solid var(--border)}
.modal > footer .btn{flex:1;min-width:120px}
.modal > footer.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.modal > footer.grid2 .btn{flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis}
.modal > footer .wide{grid-column:1 / -1}

/* --- ввод счёта --- */
.scorer{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.srow{display:flex;align-items:center;gap:12px;padding:13px;border-radius:var(--r2);border:1px solid var(--border);background:var(--surface);transition:.15s}
.srow.lead{border-color:var(--gold);background:var(--gold-soft)}
.srow .who{flex:1;min-width:0}
.srow .who b{display:block;font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .who small{color:var(--text-3);font-size:11.5px}
.sctrl{display:flex;align-items:center;gap:5px;flex:none}
.sctrl button{width:34px;height:34px;border-radius:var(--r1);border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.14s}
.sctrl button:hover{background:var(--surface-3)}
.sctrl .v{min-width:36px;text-align:center;font:700 22px/1 var(--mono)}
.rdots{display:flex;gap:3px;margin-top:6px}
.rdots i{flex:1;max-width:18px;height:4px;border-radius:2px;background:var(--surface-3)}
.rdots i.on{background:var(--gold)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s4)}
.quick button{padding:7px 11px;border-radius:var(--r1);border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);font:600 12.5px/1 var(--mono);cursor:pointer;transition:.14s}
.quick button:hover{background:var(--surface-3);color:var(--text)}
.note{font-size:12.5px;color:var(--text-2);padding:10px 13px;border-radius:var(--r2);background:var(--surface-2);border:1px solid var(--border);line-height:1.55}
.note.warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:var(--amber-soft)}
.note.gold{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:var(--gold-soft)}

/* --- всплывающее сообщение --- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:200;
  padding:11px 18px;border-radius:var(--r2);background:var(--surface-3);color:var(--text);
  border:1px solid var(--border-2);font-size:13.5px;box-shadow:var(--shadow-3);
  opacity:0;pointer-events:none;transition:.22s ease;max-width:calc(100vw - 32px);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

code{font-family:var(--mono);font-size:.92em;padding:2px 6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border)}

/* ============================================================
   7. СЕТКА ТУРНИРА
   ============================================================ */
.bracket-scroll{
  overflow:auto;border:1px solid var(--border);border-radius:var(--r3);
  background:var(--surface);padding:0 0 var(--s4);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
.bracket-scroll:not(.wide){overflow-x:hidden}
/* сетку возят мышью, как лист бумаги: курсор-ладонь и запрет выделения на время протяжки */
.bracket-scroll.grab{cursor:grab}
.bracket-scroll.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.bracket-scroll.dragging *{cursor:grabbing !important}
.bracket-canvas{--col-w:232px;--col-gap:36px;position:relative;width:max-content;min-width:100%;padding:0 12px 10px}

.links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.links path{fill:none;stroke:var(--line);stroke-width:1}
.links path.done{stroke:color-mix(in srgb,var(--accent) 55%,var(--line))}
.links path.drop{stroke:color-mix(in srgb,var(--blue) 45%,transparent);stroke-dasharray:3 4}

.bgroup{position:static;margin-bottom:22px}
.bgroup:last-child{margin-bottom:0}

/* Нижний ряд двойного выбывания: гранд-финал слева, нижняя сетка идёт к нему справа налево */
.brow{display:flex;align-items:stretch;gap:var(--col-gap,36px);position:static}
.brow .bgroup{margin-bottom:0;display:flex;flex-direction:column}
.brow .bgroup > .rounds{flex:1}

.rounds{display:flex;align-items:stretch;gap:var(--col-gap,36px);position:static}
.round{display:flex;flex-direction:column;position:static;min-width:var(--col-w,232px);width:var(--col-w,232px)}

/* Шапки колонок смыкаются в сплошную полосу: отрицательные поля съедают промежуток */
.round > .rname{
  /* когда сетку листают внутри рамки (полный экран, узкий экран) — шапка
     колонки остаётся на виду: без неё непонятно, какой это круг */
  flex:none;position:sticky;top:0;z-index:4;text-align:center;
  margin:0 calc(var(--col-gap,36px) / -2) 18px;padding:9px 10px 10px;
  background:var(--surface-2);border-bottom:1px solid var(--border-2);
  box-shadow:inset 1px 0 0 var(--border);
}
.round > .rname small,.round > .rname b{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.round > .rname small{font:600 9px/1 var(--font);letter-spacing:1.3px;text-transform:uppercase;color:var(--text-3)}
.round > .rname b{margin-top:6px;font:700 12.5px/1 var(--font);letter-spacing:.7px;text-transform:uppercase;color:var(--text)}
.round > .rname i{font-style:normal;color:var(--accent);margin-left:7px;letter-spacing:.3px}
/* нижняя сетка идёт справа налево — и подписи в её шапке переворачиваются следом */
.bgroup.lower .round > .rname{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.bgroup.lower .round > .rname b{margin:0 0 6px}

.rbody{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:16px;position:static}

/* Карточка матча: номер и стол над рамкой, посев слева от неё, судьба проигравшего под ней */
.match{position:relative;z-index:2;cursor:pointer}
.match.ro{cursor:default}
.match.pending{opacity:.5}

.mhead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px 4px 19px;min-height:13px}
.mhead .mno{font:700 10px/1 var(--mono);color:var(--text-3);flex:none}
.mhead .mmeta{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
.mhead .mtable{font:600 9.5px/1 var(--font);color:var(--text-3);white-space:nowrap}
.mhead .mtable.on{color:var(--accent)}
.mhead .mtime{font:600 9.5px/1 var(--mono);color:var(--text-3);white-space:nowrap}

/* посев стоит слева от рамки — как в турнирных ведомостях */
.mbox{display:grid;grid-template-columns:17px 1fr;align-items:stretch}
.sd{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font:600 10px/1 var(--mono);color:var(--text-3)}

.side{
  display:flex;align-items:center;gap:7px;padding:5px 9px;min-height:27px;position:relative;
  background:var(--bg-elev);border:1px solid var(--border);border-bottom-width:0;transition:.12s ease;
}
.side:last-child{border-bottom-width:1px}
.side .nm{
  flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side .club{font-size:10px;color:var(--text-3);white-space:nowrap;max-width:62px;overflow:hidden;text-overflow:ellipsis;opacity:.72}
.side .sc{font:700 13px/1 var(--mono);min-width:12px;text-align:right;color:var(--text-3)}
.side.has .nm{color:var(--text-2)}
.side.win .nm{color:var(--text);font-weight:650}
.side.win .sc{color:var(--accent-hi)}
.side.lose .nm{color:var(--text-3)}
.side.lose .sc{color:var(--red)}
.side.bye .nm{font-style:italic}

.mfoot{
  min-height:14px;padding:5px 2px 0 19px;text-align:center;
  font:600 9.5px/1.2 var(--font);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.match.ready .side{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.match.inplay .side{border-color:color-mix(in srgb,var(--gold) 50%,var(--border))}
.match.inplay .sc{color:var(--gold)}
.match.champ .side{border-color:color-mix(in srgb,var(--gold) 70%,transparent)}
.match.champ .side.win{background:var(--gold-soft)}
.match:not(.ro):hover .side{border-color:var(--border-2);background:var(--surface-2)}

/* путь игрока: наводим курсор — и видно все его матчи и переходы между ними */
.side.hl{
  border-color:var(--accent-hi) !important;box-shadow:inset 0 0 0 1px var(--accent-hi);z-index:3;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg-elev));
}
.side.hl .nm{color:var(--text)}
.links path.hl{stroke:var(--accent-hi);stroke-width:2}

.bracket-canvas.tight .side{padding:4px 7px;min-height:24px}
.bracket-canvas.tight .side .club{display:none}
.bracket-canvas.tight .side .nm{font-size:12px}
.bracket-canvas.tight .mhead .mtime{display:none}
.bracket-canvas.tight .round > .rname b{font-size:11.5px}

/* --- на весь экран: остаётся только турнир --- */
body.fs .topbar,body.fs .nav,body.fs .archbar,body.fs .legend,body.fs .phead p{display:none !important}
body.fs main{padding:10px 0 0;min-height:0}
body.fs .wrap{max-width:none;padding:0 10px}
body.fs .phead{margin-bottom:10px}
body.fs .phead h1{font-size:17px}
body.fs .stats{margin:0 0 10px}
body.fs .champbox{margin-bottom:10px;padding:var(--s3) var(--s4)}
body.fs #view-bracket.view.on{display:flex;flex-direction:column;height:calc(100vh - 20px);animation:none}
body.fs #view-bracket .bracket-scroll{flex:1;min-height:0}

.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--text-3);font-size:12px;margin-top:var(--s3)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
/* на широком экране прокрутка видна по полосе, подсказка была бы шумом */
.legend .swipe{display:none}

/* --- итог турнира: чемпион и призёры --- */
.champbox{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);border-radius:var(--r3);
  background:
    radial-gradient(130% 180% at 0% 0%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 60%),
    var(--gold-soft);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4);position:relative;overflow:hidden;
}
.cwin{display:flex;align-items:center;gap:var(--s4);min-width:0}
.ctrophy{
  flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
}
.ctrophy svg{width:25px;height:25px;color:var(--gold)}
.champbox .ctxt{min-width:0}
.champbox small{display:block;font:700 10px/1 var(--font);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.champbox b{
  display:block;margin-top:7px;font:700 clamp(20px,2.5vw,26px)/1.15 var(--font);letter-spacing:-.6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.champbox p{margin-top:5px;color:var(--text-2);font-size:12.5px}

/* призёры: серебро и бронза стоят рядом с чемпионом, а не строкой мелкого текста */
.cprize{display:flex;gap:var(--s2);flex:none;min-width:0}
.crow{
  display:flex;align-items:center;gap:9px;min-width:0;padding:9px 13px;border-radius:var(--r2);
  background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border);
}
.crow i{
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:700 11px/1 var(--mono);font-style:normal;color:#141414;
}
.crow.s2 i{background:#cbd4d2}
.crow.s3 i{background:#c8945c}
.crow .pn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow em{font-style:normal;font-size:11px;color:var(--text-3);white-space:nowrap}

@media(max-width:900px){
  .champbox{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s4)}
  .cprize{flex-wrap:wrap}
  .crow{flex:1 1 auto}
}

/* --- полоса «архив» --- */
.archbar{
  display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 0;padding:11px 15px;border-radius:var(--r2);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);background:var(--gold-soft);
}
.archbar > svg{width:19px;height:19px;color:var(--gold);flex:none}
.archbar > div{flex:1;min-width:0}
.archbar b{display:block;font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archbar span{display:block;font-size:12px;color:var(--text-2)}
.archbar .btn{flex:none}

/* ============================================================
   8. АДАПТИВ
   ============================================================ */

/* таблица превращается в карточки: горизонтальной прокрутки на телефоне не будет */
@media(max-width:760px){
  table.tbl.cards,table.tbl.cards thead,table.tbl.cards tbody,table.tbl.cards th,table.tbl.cards td,table.tbl.cards tr{display:block}
  table.tbl.cards thead{display:none}
  table.tbl.cards tbody tr{
    padding:12px 14px;border-bottom:1px solid var(--border);
    display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;
  }
  table.tbl.cards td{padding:0;border:0}
  table.tbl.cards td.c-lead{grid-column:1;grid-row:1 / span 2}
  table.tbl.cards td.c-main{grid-column:2;grid-row:1}
  table.tbl.cards td.c-meta{grid-column:2;grid-row:2;display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-3)}
  table.tbl.cards td.c-side{grid-column:3;grid-row:1 / span 2;text-align:right}
  table.tbl.cards td.c-hide{display:none}
  table.tbl.cards td.c-mob{display:block;grid-column:3;grid-row:1 / span 2;text-align:right;align-self:center}
  table.tbl.cards td.c-meta .m{display:inline-flex;gap:4px;align-items:baseline;white-space:nowrap}
  table.tbl.cards td.c-meta .m b{font-family:var(--mono);color:var(--text-2);font-weight:600}
}

@media(max-width:900px){
  .champbox{padding:var(--s4);gap:var(--s3)}
  .champbox > svg{width:32px;height:32px}
}

@media(max-width:760px){
  :root{--topbar-h:54px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .wrap{padding:0 var(--s3)}
  main{padding:var(--s4) 0 var(--s6)}

  /* главная навигация уезжает вниз — до неё дотягивается большой палец */
  .nav{
    position:fixed;top:auto;bottom:0;left:0;right:0;z-index:70;border-bottom:0;border-top:1px solid var(--border);
    background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);
  }
  .nav .wrap{padding:0 var(--s2)}
  .nav-in{gap:0;padding-bottom:env(safe-area-inset-bottom)}
  .tab{
    flex:1;min-width:0;flex-direction:column;gap:4px;padding:9px 2px;font-size:10.5px;letter-spacing:0;
    border-bottom:0;margin-bottom:0;border-top:2px solid transparent;
  }
  .tab svg{width:21px;height:21px}
  /* пять разделов делят ширину поровну: длинная подпись обрезается, а не ломает полосу */
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab.on{color:var(--accent);border-top-color:transparent}
  .tab .tab-badge{position:absolute;top:4px;left:calc(50% + 4px);min-width:16px;height:16px;font-size:10px;line-height:16px;padding:0 4px}

  .card-head{padding:var(--s4)}
  .card-body{padding:var(--s4)}
  .card-foot{padding:var(--s3) var(--s4)}
  .phead{margin-bottom:var(--s4)}
  .stats{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s2)}
  .stat{padding:10px 12px}
  .stat b{font-size:19px}
  .stat span{font-size:10px}

  .bracket-canvas{--col-w:196px;--col-gap:30px}
  .plist{max-height:min(52vh,440px)}

  /* пальцем полосы прокрутки не видно — говорим словами, и только когда есть о чём */
  .bracket-scroll.wide + .legend .swipe{display:block;color:var(--accent)}

  /* Поле мельче 16px — и Safari при фокусе приближает страницу, сбивая вёрстку.
     Размер шрифта поля на телефоне не косметика, а способ этого избежать. */
  input[type=text],input[type=number],input[type=password],input[type=search],select,textarea{font-size:16px}

  /* Поля в строке не жмутся до неузнаваемости: не влезли — переносятся.
     Кнопкам (.none) ширина по содержимому, они и так читаются. */
  .row > *,.fields .row > *{min-width:min(150px,100%)}
  .row > .none,.fields .row > .none{min-width:0}
  .toolbar .search{max-width:none}

  /* модалка — снизу, как лист */
  .overlay{align-items:flex-end;padding:0}
  .modal{
    max-width:100%;border-radius:var(--r4) var(--r4) 0 0;border-bottom:0;
    max-height:92dvh;animation:sheet .24s cubic-bezier(.2,.9,.3,1.05);
  }
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .modal > footer{padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
  .steps{gap:var(--s1)}
  .step{min-width:0;flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px;font-size:12px}
  .step small{display:none}
}

@media(max-width:420px){
  .bracket-canvas{--col-w:172px;--col-gap:22px}
  .side{padding:7px 8px}
  .side .nm{font-size:12.5px}
  .side .club{display:none}
  .tab span{font-size:10px}
}

/* --- строки-списки на узком экране ---
   Три колонки в строке (название, победитель, кнопка) на телефоне режут название
   до неразборчивого огрызка. Раскладываем в два ряда: сверху — о чём строка,
   снизу — итог и действие. */
@media(max-width:560px){
  .rows > li{flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:12px 14px}
  /* перенос нужен там, где колонок три (история турниров); строке из названия
     и кнопок — города, группы — второй ряд ни к чему */
  .rows > li:has(> .right) > .grow{flex:1 1 100%}
  .rows > li > .right{flex:1 1 auto;text-align:left}
  .rows > li > .right .nm{justify-content:flex-start !important}
  .rows > li > .acts{margin-left:auto}
  .rows .nm{white-space:normal}
  .rows .sub{white-space:normal}

  /* пара «ключ — значение»: длинному значению нужна своя строка */
  .kv{flex-wrap:wrap;row-gap:2px}
  .kv > b{text-align:left}

  /* таблицы внутри модалки узкие по определению — ужимаем поля, а не текст */
  .modal table.tbl{font-size:13px}
  .modal table.tbl th,.modal table.tbl td{padding:8px 7px}
  .modal .tbl-wrap{margin:0 calc(var(--s5) * -1);padding:0 var(--s5)}

  /* итог турнира: призёры в столбик, иначе имена не помещаются */
  .cprize{flex-direction:column}
  .champbox{padding:var(--s3) var(--s4)}

  /* полоса «архив»: кнопка возврата уезжает под текст */
  .archbar{flex-wrap:wrap}
  .archbar > div{flex:1 1 100%}
  .archbar .btn{flex:1 1 auto}
}

/* --- размер под палец ---
   На сенсорном экране нет курсора: промахнуться легко, а «навести и посмотреть»
   нельзя. Всё, что нажимают, поднимаем до пальца — примерно 44px. */
@media(hover:none) and (pointer:coarse){
  .btn{padding:12px 16px}
  .btn.sm{padding:11px 14px;font-size:13px}
  .btn.sm svg{width:16px;height:16px}
  .icon-btn{width:42px;height:42px}
  .mini{width:40px;height:40px}
  .mini svg{width:17px;height:17px}
  .chip{padding:12px 15px}
  .seg button{padding:13px 16px}
  .mgr-item{padding:11px 15px}

  /* счёт в матче вводят пальцем на ходу — это главная кнопка турнира */
  .sctrl{gap:8px}
  .sctrl button{width:46px;height:46px}
  .sctrl button svg{width:20px;height:20px}
  .sctrl .v{min-width:44px;font-size:26px}
  .quick button{padding:11px 14px;font-size:13px}
  .srow{padding:14px 13px}

  /* отметить игрока в списке — самое частое действие на жеребьёвке */
  input[type=checkbox].cb{width:24px;height:24px}
  input[type=checkbox].cb:checked::after{left:8px;top:3.5px;width:6px;height:12px}
  .pickrow{padding:12px}
  .switch{padding:13px 14px}
  .modal > footer .btn{padding:13px 16px}
  .plist li.ghead{padding:9px 12px}

  /* подсказка при наведении на телефоне недоступна — линии подсвечиваем по касанию */
  .match:not(.ro):active .side{border-color:var(--accent-hi)}
}

/* --- телефон, повёрнутый набок ---
   Экран высотой 375px: шапка с меню съедали бы почти треть. Ужимаем всё,
   что стоит сверху, — сетке нужна высота. */
@media(max-height:520px) and (orientation:landscape){
  :root{--topbar-h:46px}
  .logo{width:28px;height:28px}
  .brand-txt span{display:none}
  .tab{padding:10px 12px}
  main{padding:var(--s3) 0 var(--s5)}
  .phead{margin-bottom:var(--s3)}
  .phead p{display:none}
  .stats{margin-bottom:var(--s3)}
  .plist{max-height:min(60vh,320px)}
  .modal{max-height:96dvh}
}

/* нижнее меню в этой же ориентации: подпись встаёт рядом со значком,
   полоса становится вдвое ниже — высоты на экране и так нет */
@media(max-width:760px) and (max-height:520px) and (orientation:landscape){
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .tab{flex-direction:row;gap:7px;padding:9px 10px;font-size:12px}
  .tab svg{width:18px;height:18px}
  .tab .tab-badge{position:static;top:auto;left:auto}
  .toast{bottom:calc(58px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   9. ПЕЧАТЬ
   ============================================================ */
@media print{
  .topbar,.nav,.mgr-nav,.toolbar,.top-actions,.overlay,.toast,.phead-act,.legend,.stats{display:none !important}
  body{background:#fff;color:#000;padding:0}
  .felt{display:none}
  .view{display:none !important}
  .view.on{display:block !important}
  .bracket-scroll{overflow:visible;border:0;background:#fff;padding:0}
  .bracket-canvas{width:auto}
  .side{background:#fff;border-color:#999}
  .round > .rname{background:#eee;border-color:#999;box-shadow:none}
  .side .nm,.side .sc{color:#000}
  .mhead .mno,.mhead .mtable,.mhead .mtime,.mfoot,.sd{color:#444}
  .links path{stroke:#999}
  .card{border-color:#ccc;box-shadow:none}
  .champbox{background:#fff;border-color:#caa}
  .ctrophy{background:#fff;border-color:#caa}
  .crow{background:#fff;border-color:#ccc}
}

/* ============================================================
   10. ДОБАВКИ
   ============================================================ */
/* подзаголовок внутри карточки */
.sect{display:flex;align-items:center;gap:10px;margin:var(--s5) 0 var(--s3);font:700 11px/1 var(--font);letter-spacing:.9px;text-transform:uppercase;color:var(--text-3)}
.sect:first-child{margin-top:0}
.sect::after{content:"";flex:1;height:1px;background:var(--border)}

.toolbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.toolbar .search{max-width:320px}

/* колонки только для телефона: на широком экране их нет */
table.tbl th.c-meta,table.tbl td.c-meta,table.tbl th.c-mob,table.tbl td.c-mob{display:none}

.sep{height:1px;background:var(--border);margin:var(--s4) 0}
.nowrap{white-space:nowrap}
.right{text-align:right}
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}

/* ---------- полосы прокрутки ----------
   Системная полоса в тёмной теме светлая и бьёт по глазам. Красим её сами:
   дорожка прозрачная, ползунок — тонкий, в цвет рамок, с полями по краям. */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--border-2);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* полоса не должна отъедать содержимое там, где список и так узкий */
.plist{scrollbar-gutter:stable}

/* --- ссылки-элементы интерфейса ---
   Меню и кнопки сделаны ссылками: их можно открыть в новой вкладке и
   скопировать адрес. Браузер красит посещённые ссылки по своим правилам и
   берёт цвет только из правил с :visited — поэтому цвета повторены здесь. */
.brand:visited{color:inherit}
.tab:visited{color:var(--text-3)}
.tab:hover:visited{color:var(--text-2)}
.tab.on:visited{color:var(--text)}
.mgr-item:visited{color:var(--text-3)}
.mgr-item:hover:visited{color:var(--text)}
.mgr-item.on:visited{color:var(--accent)}
.btn:visited{color:var(--text)}
.btn.primary:visited{color:var(--accent-ink)}
.btn.gold:visited{color:var(--gold-ink)}
@media(max-width:760px){
  .tab.on:visited{color:var(--accent)}
}