:root {
  --bg: #0b1410; --panel: #12201a; --panel2: #18291f; --line: #24382d;
  --text: #e9f2ec; --muted: #8aa496; --accent: #c6f432; --danger: #ff5a5a;
  --A: #f97316; --B: #2563eb;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: rgba(11,20,16,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font: 800 22px var(--display); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.brand b { color: var(--accent); }
.ball { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
nav { display: flex; gap: 4px; }
nav a { padding: 6px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; }
nav a.on, nav a:hover { color: var(--text); background: var(--panel2); }

main { max-width: 980px; margin: 0 auto; padding: 16px 16px 80px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .02em; margin: 0 0 12px; text-transform: uppercase; }
h1 { font-size: 30px; } h2 { font-size: 22px; margin-top: 28px; } h3 { font-size: 17px; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 13px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

.btn { border: 1px solid var(--line); background: var(--panel2); padding: 10px 14px; border-radius: 10px;
  cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: #0b1410; border-color: var(--accent); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: default; }
input, select { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
input[type=color] { padding: 2px; height: 42px; width: 56px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 12px; }

.badge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.badge.live { background: var(--danger); color: #fff; animation: pulse 1.6s infinite; }
.badge.ok { background: rgba(198,244,50,.15); color: var(--accent); }
@keyframes pulse { 50% { opacity: .55; } }

/* список матчей */
.mrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mrow .t { font-weight: 600; } .mrow .t.b { text-align: right; }
.score { font: 800 30px var(--display); letter-spacing: .04em; white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* табло */
.board { text-align: center; padding: 22px 16px; background: radial-gradient(120% 120% at 50% 0%, #1d3a2a 0%, var(--panel) 60%); }
.board .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.board .name { font: 800 22px var(--display); text-transform: uppercase; }
.board .big { font: 800 64px/1 var(--display); }
.bib { width: 34px; height: 40px; margin: 0 auto 6px; border-radius: 8px 8px 4px 4px; }

/* сравнение команд */
.cmp { display: grid; grid-template-columns: 56px 1fr 56px; gap: 6px 10px; align-items: center; }
.cmp .v { font: 800 20px var(--display); } .cmp .v.b { text-align: right; }
.cmp .lbl { text-align: center; font-size: 13px; color: var(--muted); }
.bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; display: flex; overflow: hidden; background: var(--line); margin-bottom: 8px; }

/* MVP */
.mvp { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, rgba(198,244,50,.18), transparent 70%); border-color: rgba(198,244,50,.4); }
.mvp .num { font: 800 48px/1 var(--display); color: var(--accent); min-width: 64px; text-align: center; }
.mvp .rt { margin-left: auto; font: 800 36px var(--display); }

/* таблица */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tbl th { color: var(--muted); font-weight: 500; font-size: 12px; cursor: pointer; user-select: none; }
.tbl th:first-child, .tbl td:first-child, .tbl th:nth-child(2), .tbl td:nth-child(2) { text-align: left; }
.tbl tr.sel td { background: var(--panel2); }
.scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.rt-pill { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 700; }

/* таймлайн */
.tl { list-style: none; padding: 0; margin: 0; }
.tl li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tl .min { font: 800 18px var(--display); width: 40px; color: var(--muted); }

/* поле / тепловая карта */
.pitch { width: 100%; height: auto; display: block; border-radius: 10px; }

/* live-кнопки */
.clock { font: 800 44px var(--display); letter-spacing: .05em; }
.evbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 520px) { .evbtns { grid-template-columns: repeat(2, 1fr); } }
.evbtns .btn { justify-content: center; padding: 16px 8px; font-size: 15px; }
.evbtns .btn.on { background: var(--accent); color: #0b1410; }
.nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.nums .btn { flex-direction: column; justify-content: center; padding: 10px 4px; gap: 0; }
.nums .btn b { font: 800 26px/1 var(--display); }
.nums .btn span { font-size: 11px; color: var(--muted); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* прогресс */
.prog { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.prog > div { height: 100%; background: var(--accent); transition: width .4s; }

/* калибровка */
.calib { position: relative; user-select: none; }
.calib img { width: 100%; display: block; border-radius: 10px; cursor: crosshair; }
.calib svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* треки */
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.trk { background: var(--panel2); border-radius: 10px; padding: 8px; border: 2px solid transparent; }
.trk img { width: 100%; height: 130px; object-fit: contain; background: #000; border-radius: 6px; }
.trk.done { opacity: .55; }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(100px); background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: transform .25s; z-index: 50; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--danger); color: #fff; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }

/* вкладки «Загрузка / Трансляция» */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tabs button { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; cursor: pointer;
  font: 800 18px var(--display); text-transform: uppercase; letter-spacing: .02em; text-align: left; }
.tabs button span { display: block; font: 400 12px Inter, sans-serif; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.tabs button.on { border-color: var(--accent); background: linear-gradient(120deg, rgba(198,244,50,.14), transparent 70%); }

.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.swatch:hover { border-color: var(--accent); }

.calnum { font: 800 18px var(--display); color: var(--accent); width: 22px; text-align: center; }

/* ===================== составы: майки, стороны, доска ===================== */
.shirt { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; }
.shirt svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shirt path { fill: var(--sc); stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-linejoin: round; }
.shirt .num { position: relative; z-index: 1; width: 30px; margin-top: 6px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--si); font: 800 17px/1 var(--display); text-align: center; }
.shirt input.num:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.shirt .num.ghost { color: var(--muted); }
.shirt.big { width: 64px; height: 64px; }

.setuphead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.setuphead h1 { margin: 0; }

.teamsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tside { display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 22%, var(--panel)) 0%, var(--panel) 70%); }
.tside + .tside { border-left: 1px solid var(--line); }
.tbody { flex: 1; min-width: 0; }
.tname { background: transparent; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; padding: 2px 0 6px;
  font: 800 26px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tname:focus { outline: none; border-bottom-color: var(--accent); }
.sw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); padding: 0; cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch.more { position: relative; overflow: hidden; background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); }
.swatch.more input { position: absolute; inset: -6px; width: 40px; height: 40px; opacity: 0; cursor: pointer; }
.nobib { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.nobib input { width: auto; }
.tcount { font: 800 40px/1 var(--display); color: var(--tc); min-width: 34px; text-align: right; }

.lboard { display: grid; grid-template-columns: 1fr minmax(240px, .85fr) 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.bcol { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; min-height: 120px; }
.bcol.ca, .bcol.cb { border-top: 3px solid var(--tc); }
.bcol.cbench { background: transparent; border-style: dashed; }
.bcol h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 18px; text-transform: none; }
.bcol h2 span { color: var(--muted); font-size: 16px; }
.empty-col { color: var(--muted); font-size: 13px; margin: 8px 2px; }

.pchip { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 4px; border-radius: 10px; }
.pchip + .pchip { border-top: 1px solid var(--line); }
.pchip.bad .shirt path { stroke: var(--danger); stroke-width: 2.5; }
.pchip .pn { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .pn small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.mv { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--muted); cursor: pointer; font-weight: 700; }
.mv:hover { color: var(--text); border-color: var(--muted); }
.mv.to { min-width: 34px; padding: 0; border-color: transparent; background: var(--tc); color: var(--ti); font: 800 20px/1 var(--display); }
.mv.to:hover { color: var(--ti); filter: brightness(1.1); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--tc); }

.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11,20,16,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.setupfoot { margin-top: 16px; }

@media (max-width: 820px) {
  .lboard { grid-template-columns: 1fr; }
  .bcol.cbench { order: 3; }
}
@media (max-width: 640px) {
  .teamsplit { grid-template-columns: 1fr; }
  .tside + .tside { border-left: 0; border-top: 1px solid var(--line); }
  .tname { font-size: 22px; }
  .savebar .grow { flex-basis: 100%; }
}

/* шапка на телефоне: не вылезать за экран */
@media (max-width: 520px) {
  .top { flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; }
  .brand { font-size: 19px; }
  nav { gap: 0; margin-left: auto; }
  nav a { padding: 6px 7px; font-size: 14px; }
}
.shirt .num { font-size: 15px; letter-spacing: -.02em; }
.shirt.big .num { font-size: 20px; }

/* фото игроков */
.ava { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--panel2); color: var(--muted); font-family: var(--display); font-weight: 800; border: 1px solid var(--line); }
.avapick { position: relative; display: inline-block; cursor: pointer; margin: 0; }
.avapick .avacam { position: absolute; right: -4px; bottom: -2px; font-size: 13px; background: var(--panel); border-radius: 50%; padding: 1px 2px; }
.avapick:hover .ava { border-color: var(--accent); }
.pcell { display: inline-flex; align-items: center; gap: 8px; }
.mvp .mvpava { border: 2px solid var(--accent); }

/* список игроков */
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.prow + .prow { border-top: 1px solid var(--line); }
.pnum { font: 800 22px var(--display); width: 30px; text-align: center; }
.pname { flex: 1; min-width: 140px; font-weight: 600; }
.pname small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.pacts { display: flex; gap: 6px; margin-left: auto; }
.addrow .f-num { width: 90px; }
@media (max-width: 520px) {
  .addrow .f-name { flex-basis: 100%; order: -1; }
  .addrow .f-num { flex: 1; }
  .pacts { width: 100%; justify-content: flex-end; }
}
#toast:not(.show) { visibility: hidden; }

/* MVP матча: фото в золотой рамке */
.mvp { gap: 18px; padding: 18px; background: linear-gradient(120deg, rgba(250,204,21,.14), rgba(198,244,50,.06) 45%, transparent 75%); border-color: rgba(250,204,21,.45); }
.mvpframe { position: relative; flex: none; }
.mvpframe .mvpimg { display: block; width: 104px; height: 104px; border-radius: 50%; border: 3px solid #facc15; box-shadow: 0 0 0 4px rgba(250,204,21,.18); }
.mvpstar { position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: #facc15; color: #3a2a00; font-size: 18px; box-shadow: 0 0 0 3px var(--panel); }
.mvptext { flex: 1; min-width: 0; }
.mvplabel { color: #facc15; font-size: 13px; font-weight: 600; }
.mvpname { font: 800 30px/1.05 var(--display); text-transform: uppercase; margin: 2px 0 4px; overflow-wrap: break-word; }
.mvp .rt { color: #facc15; }
.mvpmini { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
@media (max-width: 520px) {
  .mvp { flex-wrap: wrap; justify-content: space-between; }
  .mvpframe .mvpimg { width: 88px; height: 88px; }
  .mvp .rt { order: 2; font-size: 44px; align-self: center; }
  .mvptext { order: 3; flex-basis: 100%; }
  .mvpname { font-size: 26px; }
}

/* ссылки на профиль */
.plink { color: inherit; text-decoration: none; }
.plink:hover { text-decoration: underline; text-underline-offset: 3px; }
a.mvpname { display: block; }

/* лидеры сезона */
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lead h3 { margin-bottom: 8px; }
.leadrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: inherit; text-decoration: none; }
.leadrow + .leadrow { border-top: 1px solid var(--line); }
.leadrow.first span { font-weight: 700; font-size: 16px; }
.leadrow.first b { color: var(--accent); }
.leadrow b { font-family: var(--display); font-size: 18px; white-space: nowrap; }
.leadrow:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .leaders { grid-template-columns: 1fr; } }

/* профиль игрока */
.phead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.phead .pbig { width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--line); }
.pnameb { font: 800 34px/1.05 var(--display); text-transform: uppercase; overflow-wrap: break-word; }
.form { display: flex; gap: 4px; margin-top: 10px; }
.fr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 800 14px var(--display); color: #0b1410; }
.fr.W { background: #4ade80; } .fr.D { background: #9ca3af; } .fr.L { background: #f87171; }
.pavg { text-align: center; }
.pavg b { display: block; font: 800 46px/1 var(--display); }
.pavg span { font-size: 12px; color: var(--muted); }
.ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.ptile { background: var(--panel); padding: 14px 16px; }
.ptile b { display: block; font: 800 30px/1 var(--display); }
.ptile span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.ptile small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.star { color: #facc15; }
@media (max-width: 640px) { .ptiles { grid-template-columns: repeat(2, 1fr); } .pnameb { font-size: 28px; } }

/* поделиться */
.sharetxt { font: 14px/1.5 Inter, sans-serif; resize: vertical; }

/* нарезка голов */
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.clip { margin: 0; }
.clip video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; display: block; }
.clip figcaption { font-size: 13px; margin-top: 6px; }
.clip figcaption b { font-family: var(--display); font-size: 16px; color: var(--accent); margin-right: 4px; }
.ptile b .star { display: inline; margin-left: 6px; font-size: 24px; color: #facc15; }
.sharetxt { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.clipbar { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.clipbar .btn { padding: 5px 9px; font-size: 12px; }
.cliphelp { margin-top: 10px; }
.cliphelp summary { cursor: pointer; }
.cliphelp ul { margin: 6px 0 0; padding-left: 18px; }
.cliphelp li { margin-bottom: 4px; }

/* помощник установки камеры */
.camwrap { position: relative; width: min(100%, calc(72vh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto;
  background: #000; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.camwrap video, .camwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camwrap video { object-fit: fill; }
.camwrap .zone { fill: rgba(255,90,90,.16); }
.camwrap .guide { stroke: #ff5a5a; stroke-width: 3; stroke-dasharray: 14 10; }
.camwrap .band { fill: rgba(56,189,248,.12); stroke: #38bdf8; stroke-width: 2; stroke-dasharray: 10 8; }
.camwrap .center { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 18 12; }
.camwrap .lbl { fill: #fff; font: 600 28px Inter, sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 6px; }
.camwrap .det { stroke: #facc15; stroke-width: 4; }
.camwrap .det-t { fill: #facc15; }
.camoff { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 16px;
  background: rgba(11,20,16,.86); }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; }
.checks li + li { border-top: 1px solid var(--line); }
.checks li span { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: 13px; }
.checks li.ok span { background: #4ade80; color: #0b1410; }
.checks li.bad span { background: #f87171; color: #0b1410; }
.checks li.na span { background: var(--panel2); color: var(--muted); }
.checks li.bad { color: var(--text); }