/* IT League Lviv — MVP. Темна тема в дусі Ліги чемпіонів. */
:root {
  --bg: #050b24; --bg2: #0b1a4a;
  --card: rgba(255,255,255,.045); --card2: rgba(255,255,255,.07);
  --line: rgba(130,170,255,.18);
  --text: #eef3ff; --muted: #9db0de;
  --accent: #3fb6ff; --accent2: #6d7dff; --acc-rgb: 63,182,255; --acc2-rgb: 109,125,255; --acc-light: #9bd8ff;
  --win: #2ee59d; --loss: #ff5d73; --draw: #8fa3d6; --gold: #f2c96b;
  --head: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --body: Inter, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.45 var(--body); overflow-x: hidden;
  background:
    linear-gradient(180deg, var(--bg2), var(--bg) 560px) var(--bg);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 3rem; }

/* ---------- шапка ---------- */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(5,11,36,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { max-width: 1120px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; gap: 1.2rem; }
.brand img { display: block; height: 42px; width: auto; }
.nav { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; padding: .45rem .9rem; border-radius: 999px; font: 600 15px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: .15s; }
.nav a:hover { color: var(--text); background: var(--card); }
.nav a.on { color: #04112f; background: linear-gradient(90deg, #fff, var(--acc-light)); box-shadow: 0 0 16px rgba(var(--acc-rgb),.45); }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); opacity: .85; }
.tsel { flex: none; }
.tsel select {
  font: 600 14px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .9rem; cursor: pointer;
}
.tsel select option { color: #111; text-transform: none; letter-spacing: 0; }

/* ---------- загальні блоки ---------- */
.hero { padding: 1.6rem 0 1.2rem; }
.eyebrow { font: 600 13px var(--head); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
h1 { margin: .15rem 0 .2rem; font: 700 clamp(30px, 6vw, 52px)/1 var(--head); letter-spacing: .05em; text-transform: uppercase; }
h1 span { background: linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.pill { padding: .25rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 600 13px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pill b { color: var(--text); margin-left: .35rem; font-size: 15px; }
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); margin-top: 1.1rem; }
.grid.two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.05rem 1.2rem 1.2rem; backdrop-filter: blur(6px); min-width: 0; }
.card h2 { margin: 0 0 .7rem; font: 700 21px var(--head); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.card h2::before { content: ""; width: 4px; height: .9em; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent2)); }
.card h2 a { margin-left: auto; font: 600 13px var(--head); letter-spacing: .14em; color: var(--accent); }
.page-title { margin: 1.4rem 0 .2rem; font: 700 clamp(26px, 5vw, 40px)/1.05 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.page-sub { margin: 0 0 1rem; color: var(--muted); }
.empty { color: var(--muted); padding: .8rem 0; }

/* ---------- таблиці ---------- */
table { width: 100%; border-collapse: collapse; }
th { font: 600 12.5px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .35rem .5rem; white-space: nowrap; }
td { padding: .45rem .5rem; border-top: 1px solid rgba(130,170,255,.1); vertical-align: middle; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.c, th.c { text-align: center; }
tr:hover td { background: rgba(255,255,255,.035); }
.pos { width: 2.4rem; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #1a1400; font-weight: 700; }
.pos .g1 { background: #f2c96b; } .pos .g2 { background: #c9d3ea; } .pos .g3 { background: #d99a6c; }
.tm { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; min-width: 0; }
.tm img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts { font: 700 18px var(--head); letter-spacing: .04em; }
.gd.up { color: var(--win); } .gd.down { color: var(--loss); }
.tbl-scroll { overflow-x: auto; }

/* ---------- матчі ---------- */
.m { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 4.6rem minmax(0, 1fr) 6.6rem; align-items: center; gap: .5rem; padding: .55rem .2rem; border-top: 1px solid rgba(130,170,255,.1); }
.m:first-of-type { border-top: 0; }
.m:hover { background: rgba(255,255,255,.035); }
.m .when { font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.m .when b { display: block; color: var(--text); font: 700 15px var(--head); letter-spacing: .06em; }
.m .side { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 600; }
.m .side.home { justify-content: flex-end; text-align: right; }
.m .side img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.m .side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .where { font-size: 12.5px; color: var(--muted); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.m .where svg { width: 13px; height: 13px; fill: rgba(var(--acc-rgb),.18); stroke: var(--accent); stroke-width: 1.8; flex: none; }
.score { text-align: center; padding: .12rem .2rem; border-radius: 8px; background: rgba(255,255,255,.08); font: 700 18px var(--head); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.score.tbd { color: var(--muted); }
.score.win { background: rgba(46,229,157,.18); color: var(--win); }
.score.loss { background: rgba(255,93,115,.18); color: var(--loss); }
.round-h { margin: 1rem 0 .1rem; padding: .3rem .2rem; font: 700 14px var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: flex; gap: .8rem; }
.round-h:first-child { margin-top: 0; }
.round-h small { color: var(--muted); font-weight: 600; letter-spacing: .12em; }
.day-h { margin: .3rem 0 0; padding: .2rem .2rem; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- фільтри ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); }
.seg button { font: 700 14px var(--head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: .35rem 1rem; }
.seg button.on { color: #04112f; background: linear-gradient(90deg, #fff, var(--acc-light)); }
select.f { font: 600 14px var(--body); color: var(--text); background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .7rem; }
select.f option { color: #111; }

/* ---------- команди ---------- */
.teams-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.tcard { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.2rem .8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); text-align: center; transition: .15s; }
.tcard:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 26px rgba(0,0,0,.35); color: var(--text); }
.tcard img { width: 84px; height: 84px; object-fit: contain; }
.tcard h3 { margin: 0; font: 700 20px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.tcard .meta { font-size: 13px; color: var(--muted); }
.tcard .meta b { color: var(--text); }
.team-head { display: flex; align-items: center; gap: 1.2rem; margin: 1.4rem 0 .6rem; }
.team-head img { width: 96px; height: 96px; object-fit: contain; }
.team-head h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
.stat { padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.stat small { display: block; font: 600 12px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stat b { font: 700 28px/1.1 var(--head); }
.stat.win b { color: var(--win); } .stat.loss b { color: var(--loss); }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1b2a5e; border: 1px solid var(--line); font: 600 11px var(--head); letter-spacing: .04em; color: var(--muted); flex: none; }
.avatar.big { width: 88px; height: 88px; font-size: 30px; }
.note { margin-top: .8rem; font-size: 13px; color: var(--muted); }

footer { max-width: 1120px; margin: 2rem auto 0; padding: 1rem 1.25rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }

/* ---------- мобільна версія ---------- */
@media (max-width: 860px) { .grid.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  body { font-size: 14px; }
  .wrap { padding: 0 .75rem 2rem; }
  .bar { padding: .45rem .75rem; gap: .6rem; flex-wrap: wrap; }
  .brand img { height: 34px; }
  .tsel { order: 2; margin-left: auto; }
  .tsel select { font-size: 13px; padding: .35rem .7rem; max-width: 190px; }
  .nav { order: 3; flex-basis: 100%; margin: 0 -.75rem; padding: 0 .75rem .15rem; }
  .nav a { padding: .4rem .8rem; font-size: 14px; }
  .card { padding: .8rem .7rem 1rem; border-radius: 14px; }
  .card h2 { font-size: 18px; }
  .m { grid-template-columns: 3.6rem minmax(0, 1fr) 3.5rem minmax(0, 1fr); gap: .35rem; }
  .m .where { display: none; }
  .m .when { font-size: 11.5px; }
  .m .when b { font-size: 14px; }
  .m .side { font-size: 13px; gap: .4rem; }
  .m .side img { width: 22px; height: 22px; }
  .score { font-size: 16px; }
  th, td { padding: .4rem .3rem; }
  .hide-m { display: none; }
  .tm img { width: 22px; height: 22px; }
  .team-head img { width: 64px; height: 64px; }
  .team-head { gap: .8rem; }
}

/* місце проведення біля дати (лише на телефоні) */
.m .when .v { display: none; }
@media (max-width: 640px) { .m .when .v { display: block; margin-top: 1px; color: var(--accent); font-size: 11.5px; letter-spacing: .03em; } }

/* компактний рядок матчу (вузькі картки): без колонки залу, зал під датою */
.m.c { grid-template-columns: 4.6rem minmax(0, 1fr) 4rem minmax(0, 1fr); gap: .4rem; }
.m.c .where { display: none; }
.m.c .when .v { display: block; margin-top: 1px; color: var(--accent); font-size: 11.5px; letter-spacing: .03em; }
.m.c .side { font-size: 14px; }

/* світла підкладка під логотипи: частина логотипів темна й зникає на темному фоні */
.tm img, .m .side img { background: #f4f7ff; border-radius: 7px; padding: 2px; }
.tcard img, .team-head img { background: #f4f7ff; border-radius: 16px; padding: 8px; }
.tcard img { width: 92px; height: 92px; }
.team-head img { width: 104px; height: 104px; padding: 10px; }
@media (max-width: 640px) { .team-head img { width: 72px; height: 72px; padding: 6px; border-radius: 12px; } }

/* білі логотипи (наприклад, CharStudio) — на темній плашці */
.tm img.lg-l, .m .side img.lg-l, .tcard img.lg-l, .team-head img.lg-l { background: #1d2a5c; }

/* логотип команди в підписі гравця — малий */
.team-head .tm img { width: 28px; height: 28px; padding: 2px; border-radius: 7px; }

/* ---------- власний випадаючий список ---------- */
.dd { position: relative; display: inline-block; }
.dd-btn { display: inline-flex; align-items: center; gap: .6rem; min-width: 11rem; max-width: 100%; padding: .5rem .8rem; cursor: pointer;
  font: 600 14px var(--body); color: var(--text); background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 10px; text-align: left; transition: .15s; }
.dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color: var(--accent); background: rgba(var(--acc-rgb),.1); }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-cur { display: inline-flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.dd-cur span, .dd-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { width: 11px; height: 8px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.dd-btn[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 1.5rem)); max-height: min(60vh, 360px); overflow-y: auto;
  margin: 0; padding: 5px; list-style: none; background: #0b1740; border: 1px solid rgba(130,170,255,.32); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.55); scrollbar-width: thin; scrollbar-color: #2b4a8a transparent; }
.dd-list[hidden] { display: none; }
.dd-list li { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: 8px; font: 500 14px var(--body); color: var(--text); cursor: pointer; }
.dd-list li:hover, .dd-list li.hi { background: rgba(var(--acc-rgb),.16); }
.dd-list li.sel { color: var(--accent); font-weight: 600; }
.dd-list li.sel::after { content: ""; margin-left: auto; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -1px); flex: none; }
.dd img { width: 22px; height: 22px; object-fit: contain; flex: none; background: #f4f7ff; border-radius: 6px; padding: 2px; }
.dd img.lg-l { background: #1d2a5c; }
/* вибір турніру в шапці — у формі «пігулки», список вирівняно праворуч */
#tsel.dd .dd-btn { min-width: 0; border-radius: 999px; padding: .4rem .9rem; font: 600 14px var(--head); letter-spacing: .08em; text-transform: uppercase; background: var(--card); }
#tsel.dd .dd-list { left: auto; right: 0; min-width: 14rem; }
#tsel.dd .dd-list li { font: 600 14px var(--head); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 640px) { #tsel.dd .dd-btn { font-size: 13px; max-width: 260px; padding: .4rem .75rem; } .dd-btn { min-width: 9rem; } }

/* ---------- клікабельний рахунок ---------- */
a.score { display: block; cursor: pointer; transition: .15s; }
a.score:hover { color: var(--text); box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); }
a.score.win:hover, a.score.loss:hover { color: inherit; }

/* ---------- сторінка матчу ---------- */
.crumbs { margin: 1.2rem 0 .7rem; font: 600 14px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.crumbs a { color: var(--accent); }
.match-head { text-align: center; }
.match-head .eyebrow { margin-bottom: .6rem; }
.mh { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.mh-team { display: flex; flex-direction: column; align-items: center; gap: .6rem; font: 700 clamp(18px, 3vw, 26px) var(--head); letter-spacing: .07em; text-transform: uppercase; min-width: 0; }
.mh-team img { width: 92px; height: 92px; padding: 8px; border-radius: 16px; background: #f4f7ff; object-fit: contain; }
.mh-team span { overflow-wrap: anywhere; }
.mh-score { font: 700 clamp(44px, 9vw, 76px)/1 var(--head); letter-spacing: .06em; font-variant-numeric: tabular-nums; padding: 0 .4rem; }
.mh-score.tbd { color: var(--muted); }
.mh-meta { margin-top: .9rem; color: var(--muted); font-size: 13.5px; }

.tl { display: flex; flex-direction: column; }
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem minmax(0, 1fr); align-items: center; gap: .4rem; padding: .5rem 0; border-top: 1px solid rgba(130,170,255,.1); }
.tl-row:first-child { border-top: 0; }
.tl-min { text-align: center; line-height: 1.15; }
.tl-min b { display: block; font: 700 17px var(--head); letter-spacing: .06em; }
.tl-min small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ev { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 600; }
.ev.home { justify-content: flex-end; text-align: right; }
.ev-name { min-width: 0; overflow-wrap: anywhere; }
.ev-name small { color: var(--muted); font-weight: 500; }
.ev-ic { position: relative; flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; }
.ev-ic svg { width: 22px; height: 22px; }
.ev-tag { position: absolute; right: -5px; bottom: -4px; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 6px; background: #fff; color: #04112f; font: 700 9px/12px var(--head); font-style: normal; text-align: center; }
.ev-tag.red { background: var(--loss); color: #fff; } .ev-tag.x { background: #5b6b97; color: #fff; }
.cd { display: inline-block; width: 12px; height: 17px; border-radius: 2px; }
i.cd.y { background: #ffd23f; } i.cd.r { background: #ff4b5c; }
i.cd.second { position: absolute; margin-left: 8px; margin-top: 2px; }
.ev-ic i.cd + i.cd.second { left: 7px; }
@media (max-width: 640px) {
  .mh { gap: .5rem; }
  .mh-team img { width: 60px; height: 60px; padding: 5px; border-radius: 12px; }
  .tl-row { grid-template-columns: minmax(0, 1fr) 3.4rem minmax(0, 1fr); }
  .ev { font-size: 13px; gap: .4rem; }
}

/* ---------- сторінка матчу: більші шрифти на комп'ютері, шапка з окремими мітками ---------- */
.mh-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 1.1rem; }
.mh-meta .chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 600 14px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.mh-meta .chip b { color: var(--accent); font-size: 16px; }
.mh-meta .chip.venue { color: var(--accent); border-color: rgba(var(--acc-rgb),.45); background: rgba(var(--acc-rgb),.08); }
.mh-meta .chip.venue svg { width: 14px; height: 14px; fill: rgba(var(--acc-rgb),.2); stroke: var(--accent); stroke-width: 1.8; flex: none; }
@media (min-width: 641px) {
  .tl-row { padding: .75rem 0; grid-template-columns: minmax(0, 1fr) 5.6rem minmax(0, 1fr); }
  .tl-min b { font-size: 22px; }
  .tl-min small { font-size: 14px; }
  .ev { font-size: 18px; gap: .75rem; }
  .ev-name small { font-size: 14px; }
  .ev-ic { width: 32px; height: 32px; }
  .ev-ic svg { width: 30px; height: 30px; }
  .ev-tag { right: -6px; bottom: -5px; min-width: 15px; height: 15px; font-size: 11px; line-height: 15px; }
  i.cd.y, i.cd.r { width: 16px; height: 22px; border-radius: 3px; }
  i.cd.second { margin-left: 11px; margin-top: 3px; }
  .match-head .eyebrow { font-size: 14px; }
  .mh-team img { width: 108px; height: 108px; }
  .mh-score { font-size: clamp(60px, 8vw, 92px); }
}
@media (max-width: 640px) { .ev-ic svg { width: 22px; height: 22px; } .mh-meta .chip { font-size: 12.5px; padding: .25rem .65rem; } }

/* ---------- сучасні значки подій: кольорові кола з контурним м'ячем; компактніші рядки ---------- */
.ev-ic { width: 30px; height: 30px; border-radius: 50%; color: #fff; }
.ev-ic svg { width: 19px; height: 19px; }
.ev-ic.t-goal { background: linear-gradient(135deg, #3fb6ff, #6d7dff); box-shadow: 0 3px 10px rgba(var(--acc-rgb),.38); }
.ev-ic.t-penalty { background: linear-gradient(135deg, #ffd66b, #f29a38); color: #2a1a00; box-shadow: 0 3px 10px rgba(242,154,56,.38); }
.ev-ic.t-owngoal { background: linear-gradient(135deg, #ff7a8a, #e0364f); box-shadow: 0 3px 10px rgba(224,54,79,.38); }
.ev-ic.t-missedpenalty { background: linear-gradient(135deg, #6a7aa6, #44527a); }
.ev-ic.t-yellow, .ev-ic.t-red, .ev-ic.t-yellowred { background: rgba(255,255,255,.07); border-radius: 8px; }
.ev-tag { right: -5px; bottom: -4px; border: 1.5px solid var(--bg); box-sizing: content-box; }
.tl-row { padding: .38rem 0; }
@media (min-width: 641px) {
  .tl-row { padding: .42rem 0; }
  .ev-ic { width: 34px; height: 34px; }
  .ev-ic svg { width: 22px; height: 22px; }
  .tl-min b { font-size: 20px; }
  .ev { font-size: 17px; gap: .7rem; }
}
@media (max-width: 640px) { .tl-row { padding: .3rem 0; } .ev-ic { width: 26px; height: 26px; } .ev-ic svg { width: 17px; height: 17px; } }

/* ---------- м'яч у колі з білим кільцем (колір кільця залежить від події) ---------- */
.ev-ic.t-goal, .ev-ic.t-penalty, .ev-ic.t-owngoal, .ev-ic.t-missedpenalty { background: #0b1740; color: inherit; }
.ev-ic.t-goal { box-shadow: 0 0 0 2px #fff, 0 3px 12px rgba(255,255,255,.22); }
.ev-ic.t-penalty { box-shadow: 0 0 0 2px #f2c96b, 0 3px 12px rgba(242,201,107,.35); }
.ev-ic.t-owngoal { box-shadow: 0 0 0 2px #ff5d73, 0 3px 12px rgba(255,93,115,.35); }
.ev-ic.t-missedpenalty { box-shadow: 0 0 0 2px #8fa3d6; }
.ev-ic.t-missedpenalty svg { opacity: .55; }
.ev-ic svg { width: 100%; height: 100%; padding: 3px; }
.ev-ic { margin: 0 3px; }
@media (min-width: 641px) { .ev-ic { width: 32px; height: 32px; } .ev-ic svg { padding: 3.5px; } }
@media (max-width: 640px) { .ev-ic { width: 25px; height: 25px; } .ev-ic svg { padding: 2.5px; } }

/* ---------- хід матчу: шапка колонок, значок ⚽, компактні рядки ---------- */
.ev-ic.t-goal, .ev-ic.t-penalty, .ev-ic.t-owngoal, .ev-ic.t-missedpenalty { background: none; box-shadow: none; border-radius: 0; margin: 0; }
.ev-ic.t-missedpenalty .ball { opacity: .45; filter: grayscale(.7); }
.ev-ic .ball { font: 20px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.ev-ic svg { padding: 0; }
.tl-row { padding: .14rem 0; }
.tl-row:first-of-type { border-top: 0; }
.ev-ic { width: 26px; height: 26px; }
@media (min-width: 641px) {
  .tl-row { grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr); padding: .16rem 0; }
  .tl-min { display: flex; align-items: baseline; justify-content: center; gap: .5rem; }
  .tl-min b { display: inline; font-size: 18px; }
  .tl-min small { display: inline; font-size: 13px; }
  .ev { font-size: 16.5px; gap: .6rem; }
  .ev-ic { width: 28px; height: 28px; }
  .ev-ic .ball { font-size: 21px; }
}
@media (max-width: 640px) {
  .tl-row { padding: .1rem 0; }
  .ev-ic { width: 24px; height: 24px; }
  .ev-ic .ball { font-size: 18px; }
}

/* ---------- чорні п'ятикутники на ⚽ та довідник значків подій ---------- */
/* на деяких системах емодзі має сині плями: переводимо в чорно-біле з підвищеним контрастом, щоб плями були чорними */
.ev-ic .ball { filter: grayscale(1) contrast(2.6) brightness(.96); }

/* ---------- хід матчу: заголовок поза блоком, усі рядки однакової висоти ---------- */
.sec-title { margin: 1.5rem 0 .55rem; font: 700 22px var(--head); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.sec-title::before { content: ""; width: 4px; height: .9em; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent2)); }
.tl-row { min-height: 40px; padding: 0; border-top: 0; border-bottom: 1px solid rgba(130,170,255,.1); box-sizing: border-box; }
.tl-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .tl-row { min-height: 38px; } .sec-title { font-size: 19px; } }

/* ---------- хід матчу: однакові відступи зверху/знизу та нерухома хвилина ---------- */
.match-tl { padding-top: 0; padding-bottom: 0; }
@media (min-width: 641px) {
  .tl-min { display: grid; grid-template-columns: 2.7rem 3.1rem; justify-content: center; align-items: baseline; column-gap: .5rem; }
  .tl-min b { text-align: right; }
  .tl-min small { text-align: left; }
}

/* ---------- головна: правий стовпчик із двох карток, перемикачі, таблиця фіксованої розкладки ---------- */
.stack { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.seg.mini { margin: 0 0 .7rem; }
.seg.mini button { padding: .25rem .85rem; font-size: 13px; }
table.tfix { table-layout: fixed; }
table.tfix th.pos, table.tfix td.pos { width: 2.4rem; }
table.tfix th.n, table.tfix td.n { width: 3.4rem; }
table.tfix th.tcol { width: 38%; }
table.tfix td { overflow: hidden; text-overflow: ellipsis; }
table.tfix td .tm { max-width: 100%; }

/* міні-таблиці головної: колонка команди — лише логотип */
table.tfix.lo th.tcol { width: 3.4rem; }
table.tfix.lo td.hide-m .tm span { display: none; }
table.tfix.lo td.hide-m { text-align: center; }

/* значки карток у заголовках таблиць */
th .cd { width: 12px; height: 17px; vertical-align: middle; }

/* м'яч у заголовках колонок «Голи» (чорні плями, як у ході матчу) */
th .ball { display: inline-block; font: 17px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; filter: grayscale(1) contrast(2.6) brightness(.96); vertical-align: middle; letter-spacing: 0; }

/* групи турнірів у списку, посилання-«пігулки», підзаголовок групи */
.dd-list li.dd-h { cursor: default; pointer-events: none; padding: .55rem .65rem .2rem; font: 700 12px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dd-list li.dd-h:not(:first-child) { margin-top: .25rem; border-top: 1px solid var(--line); border-radius: 0; }
a.pill { text-decoration: none; transition: border-color .15s, color .15s; }
a.pill:hover { border-color: var(--accent); color: var(--text); }
a.pill.on { border-color: var(--accent); color: var(--accent); }
.sub-h { font: 700 12px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: -.2rem 0 .5rem; }

/* фото гравця в круглій плитці; ініціали лишаються, поки фото немає */
.avatar { position: relative; overflow: hidden; }
.avatar b { font: inherit; letter-spacing: inherit; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #1b2a5e; }

/* телефон: довгі назви команд переносяться на 2 рядки замість «…» (висота рядка визначається колонкою дати, тож не зростає) */
@media (max-width: 640px) {
  .m .side span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; overflow-wrap: anywhere; }
  .m .side.home span { text-align: right; }
}
@media (max-width: 640px) { .m .side span.w10 { font-size: 12px; } .m .side span.w11 { font-size: 11px; } }
@media (max-width: 640px) {
  .m.c { grid-template-columns: 3.3rem minmax(0, 1fr) 3.4rem minmax(0, 1fr); gap: .3rem; }
  .m.c .side { font-size: 12px; gap: .3rem; }
  .m.c .side img { width: 20px; height: 20px; }
  .m.c .side span.w10 { font-size: 11px; }
  .m.c .side span.w11 { font-size: 10.5px; }
}
@media (max-width: 640px) { .m .side span.w12 { font-size: 10.5px; } .m.c .side span.w12 { font-size: 9.5px; } }

/* історія ліги */
.champs td { padding: .5rem .5rem; vertical-align: middle; }
.champs td:first-child a { color: var(--text); font-weight: 600; text-decoration: none; }
.champs td:first-child a:hover { color: var(--accent); }
.champs .tm { font-weight: 600; }
.champs .live { color: var(--accent); font: 700 12px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.pen-n { color: var(--muted); font-size: 12px; margin-left: .3rem; }
.empty-cell { color: var(--muted); }
.rec { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) 3.8rem minmax(0, 1fr); align-items: center; gap: .4rem; padding: .5rem 0; border-top: 1px solid rgba(130,170,255,.1); }
.rec:first-of-type { border-top: 0; }
.rec-when { font-size: 12px; color: var(--text); line-height: 1.25; }
.rec-when small { display: block; color: var(--muted); font-size: 11.5px; }
.rec-side { display: flex; align-items: center; gap: .4rem; min-width: 0; font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; }
.rec-side.home { justify-content: flex-end; text-align: right; }
.rec-side img { width: 22px; height: 22px; object-fit: contain; flex: none; background: #f4f7ff; border-radius: 6px; padding: 2px; }
.rec-side span { overflow-wrap: anywhere; line-height: 1.15; }
.rec-score { text-align: center; font: 700 16px var(--head); letter-spacing: .08em; background: rgba(255,255,255,.06); border-radius: 8px; padding: .25rem 0; color: var(--text); text-decoration: none; }
.rec-score:hover { background: rgba(var(--acc-rgb),.2); }
.mh-score .pen { display: block; font: 600 13px var(--body); letter-spacing: .04em; color: var(--muted); margin-top: .35rem; text-align: center; }
.pen-m { font-size: 9px; color: var(--muted); margin-left: 1px; }
@media (max-width: 640px) { .rec { grid-template-columns: 4.4rem minmax(0, 1fr) 3.2rem minmax(0, 1fr); } .rec-side { font-size: 12px; } }
@media (max-width: 640px) { .rec { grid-template-columns: 4.2rem minmax(0, 1fr) 3rem minmax(0, 1fr); gap: .3rem; } .rec-side { font-size: 11.5px; gap: .3rem; } .rec-side span { overflow-wrap: break-word; } .rec-score { font-size: 15px; letter-spacing: .04em; } }

/* соцмережі в підвалі */
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.social { display: flex; gap: .5rem; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); transition: color .15s, border-color .15s, background .15s; }
.social a:hover { color: var(--text); border-color: var(--accent); background: rgba(var(--acc-rgb),.14); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* відео матчу (YouTube) */
.vids { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1rem; }
.vid { display: flex; align-items: center; gap: .7rem; padding: .45rem .8rem .45rem .45rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--text); text-decoration: none; max-width: 100%; transition: border-color .15s, background .15s; }
.vid:hover { border-color: var(--accent); background: rgba(var(--acc-rgb),.1); }
.vid-th { position: relative; width: 96px; aspect-ratio: 16 / 9; flex: none; border-radius: 8px; overflow: hidden; background: #0b1530; }
.vid-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-th i { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,0,0,.9); }
.vid-th i::after { content: ""; position: absolute; left: 11px; top: 8px; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: #fff; }
.vid-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.vid-t b { font: 700 13px var(--head); letter-spacing: .1em; text-transform: uppercase; }
.vid-t small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* колір сторінок залежить від ліги: Мастер — золото, Перша — синій, решта (Друга, Третя, кубки) — фіолетовий */
body[data-league="master"] { --accent: #f2c96b; --accent2: #d9a441; --acc-rgb: 242,201,107; --acc2-rgb: 196,134,38; --acc-light: #ffe6a3; }
body[data-league="one"] { --accent: #22e3ff; --accent2: #3a8bff; --acc-rgb: 34,227,255; --acc2-rgb: 58,139,255; --acc-light: #a6f3ff; }
body:not([data-league="master"]):not([data-league="one"]) { --accent: #b49bff; --accent2: #7c6dff; --acc-rgb: 180,155,255; --acc2-rgb: 124,109,255; --acc-light: #d6c8ff; }
body { transition: background-color .2s; }
.league-chip { display: inline-block; margin-left: .6rem; padding: .12rem .6rem; border: 1px solid rgba(var(--acc-rgb), .55); border-radius: 999px; background: rgba(var(--acc-rgb), .12); color: var(--accent); font: 700 11px var(--head); letter-spacing: .16em; text-transform: uppercase; vertical-align: 2px; }

/* фото гравця заповнює коло повністю (перебиває загальні правила для логотипів .tm img / .team-head img) */
span.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 50%; object-fit: cover; object-position: center 20%; background: #1b2a5e; }
span.avatar.big { width: 96px; height: 96px; }
@media (max-width: 640px) { span.avatar.big { width: 72px; height: 72px; font-size: 24px; } }

/* шапка: швидкий перехід між актуальними лігами + архів */
.tsel { display: flex; align-items: center; gap: .45rem; }
.lsw { display: flex; gap: .25rem; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.lq { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .85rem; border-radius: 999px; font: 700 14px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: .15s; }
.lq::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.lq:hover { color: var(--text); }
.lq-master::before { background: #f2c96b; opacity: 1; }
.lq-one::before { background: #22e3ff; opacity: 1; }
.lq-master.on { color: #2a1d00; background: linear-gradient(90deg, #fff1c4, #f2c96b); box-shadow: 0 0 14px rgba(242,201,107,.4); }
.lq-one.on { color: #021a24; background: linear-gradient(90deg, #fff, #a6f3ff); box-shadow: 0 0 14px rgba(34,227,255,.45); }
.lq.on::before { background: currentColor; opacity: .55; }
#tsel.dd.on .dd-btn { border-color: rgba(var(--acc-rgb), .7); }
#tsel.dd .dd-btn { min-width: 0; }
@media (max-width: 640px) {
  .tsel { gap: .3rem; }
  .lq { padding: .28rem .6rem; font-size: 12.5px; letter-spacing: .06em; gap: .3rem; }
  .lq::before { width: 6px; height: 6px; }
  #tsel.dd .dd-btn { font-size: 12.5px; padding: .35rem .6rem; min-width: 0; max-width: 150px; }
}
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; }
  .tsel { margin-left: auto; order: 2; }
  .lq::before { display: none; }
  .lq { padding: .28rem .55rem; }
  #tsel.dd .dd-btn { max-width: 92px; padding: .35rem .5rem; }
  #tsel.dd .dd-btn .dd-cur { overflow: hidden; }
}
@media (max-width: 640px) {
  .brand img { height: 30px; }
  .lq { padding: .26rem .5rem; font-size: 12px; }
  #tsel.dd .dd-btn { max-width: 80px; font-size: 12px; }
}
@media (max-width: 640px) { #tsel.dd .dd-btn { max-width: 96px; gap: .3rem; } #tsel.dd .dd-caret { width: 10px; flex: none; } }

/* меню не обрізається: на середніх екранах пункти стискаються, на вузьких (≤ 900px) меню переходить у другий рядок */
.nav a { padding: .45rem .62rem; letter-spacing: .07em; font-size: 14.5px; }
.bar { gap: .9rem; }
@media (max-width: 1080px) {
  .bar { padding: .45rem .75rem; gap: .6rem; flex-wrap: wrap; }
  .tsel { order: 2; margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; margin: 0 -.75rem; padding: 0 .75rem .15rem; }
}

/* підказка, що меню прокручується: край затухає */
@media (max-width: 1080px) { .nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
@media (min-width: 1081px) { .nav { -webkit-mask-image: none; mask-image: none; } }

/* телефон: рядок чемпіонів — картка: назва турніру зверху, чемпіон і друге місце поруч */
@media (max-width: 640px) {
  .champs, .champs tbody { display: block; }
  .champs tr:first-child { display: none; }
  .champs tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .15rem .6rem; padding: .55rem 0; border-top: 1px solid rgba(130,170,255,.1); }
  .champs td { padding: 0; border: 0; }
  .champs td:first-child { grid-column: 1 / -1; font: 700 14px var(--head); letter-spacing: .08em; text-transform: uppercase; }
  .champs td[data-l]::before { content: attr(data-l); display: block; font: 600 11.5px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .champs .tm { font-size: 13px; }
}

/* регламент */
.rules-list { list-style: none; margin: .4rem 0 0; padding: 0; counter-reset: r; }
.rules-list li { counter-increment: r; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .7rem; padding: .8rem 0; border-top: 1px solid rgba(130,170,255,.1); }
.rules-list li:first-child { border-top: 0; }
.rules-list li::before { content: counter(r); grid-row: 1 / span 2; align-self: start; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), .55); background: rgba(var(--acc-rgb), .12); color: var(--accent); font: 700 15px var(--head); }
.rules-list b { font: 700 16px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.rules-list span { color: var(--muted); line-height: 1.4; }
.council { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.council li { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); font: 600 16px var(--body); }
.council .avatar { width: 34px; height: 34px; }
.hero-link { display: inline-block; margin-top: .9rem; padding: .4rem 1rem; border: 1px solid rgba(var(--acc-rgb), .6); border-radius: 999px; background: rgba(var(--acc-rgb), .12); color: var(--accent); font: 700 13px var(--head); letter-spacing: .14em; text-transform: uppercase; transition: .15s; }
.hero-link:hover { background: rgba(var(--acc-rgb), .24); color: var(--text); }

.fmt-h { margin: .2rem 0 .3rem; font: 700 18px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
ul.fmt { margin: .2rem 0 0; padding-left: 1.2rem; list-style: none; }
ul.fmt li { position: relative; padding: .2rem 0; line-height: 1.45; }
ul.fmt li::before { content: ""; position: absolute; left: -1rem; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
ul.fmt ul.fmt { margin-top: .1rem; }
ul.fmt ul.fmt li::before { background: transparent; border: 1.5px solid var(--accent); }
ul.fmt b { color: var(--text); }

.council li { justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.council .cn a { color: var(--text); }
.council .cn a:hover { color: var(--accent); }
.council .cteam { font-size: 14px; font-weight: 600; color: var(--muted); }
.council .cteam:hover { color: var(--text); }

/* заголовки колонок «значок + слово» */
.hd { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.hd .ball { font-size: 13px; }
th.n:has(.hd) { width: 4.6rem; }
table.tfix th.n:has(.hd) { width: 4.6rem; }
@media (max-width: 640px) { .hd { gap: .2rem; font-size: 11.5px; letter-spacing: .05em; } .hd .cd { transform: scale(.85); } th.n:has(.hd), table.tfix th.n:has(.hd) { width: 3.9rem; } }
.hd { flex-direction: row; }
.hd .cd, .hd .ball { display: inline-block; margin: 0; flex: none; }

/* компактна шапка турніру на головній: назва зліва, лічильники справа в одному рядку */
.hero.hc { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.4rem; padding: .85rem 0 .35rem; }
.hc h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); }
.hc .eyebrow { font-size: 12px; letter-spacing: .24em; display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .7rem; margin-bottom: .1rem; }
.hc-en { color: var(--muted); letter-spacing: .04em; text-transform: none; font: 500 12.5px var(--body); }
.hc-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; padding-bottom: .15rem; }
.hc-side .pills { margin: 0; gap: .35rem; }
.hc-side .pill { padding: .15rem .6rem; font-size: 12px; letter-spacing: .1em; }
.hc-side .pill b { font-size: 14px; margin-left: .3rem; }
.hc-side .hero-link { margin: 0; padding: .25rem .8rem; font-size: 12px; }
.hc + .grid { margin-top: .6rem; }
@media (max-width: 640px) {
  .hero.hc { padding: .6rem 0 .2rem; gap: .35rem; }
  .hc-en { display: none; }
  .hc-side { justify-content: flex-start; }
  .hc-side .pill { padding: .12rem .5rem; font-size: 11.5px; }
  .hc-side .hero-link { font-size: 11.5px; padding: .2rem .65rem; }
}

/* ієрархія головної: таблиця — головна картка, календар/бомбардири/команди — другорядні */
.grid { gap: 1.4rem; }
.stack { gap: 1.4rem; }
.grid.two > section.card:first-child { border-top: 2px solid rgba(var(--acc-rgb), .75); background: var(--card2); }
.stack .card h2 { font-size: 18px; }
.stack .card { background: rgba(255,255,255,.035); }
#scCard h2, #calCard h2 { margin-bottom: .6rem; }
.hc + .grid + .card h2 { font-size: 18px; }
.hc + .grid + .card .tcard { border-color: transparent; background: rgba(255,255,255,.03); }
.hc + .grid + .card .tcard:hover { border-color: var(--accent); }

/* примітка до матчу (наприклад, можливий перенос) */
.mnote { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: .35rem; border-radius: 50%; background: rgba(var(--acc-rgb), .2); border: 1px solid rgba(var(--acc-rgb), .7); color: var(--accent); font: 700 10px var(--head); font-style: normal; vertical-align: 1px; cursor: help; }
.chip.note-chip { color: var(--accent); border-color: rgba(var(--acc-rgb), .55); background: rgba(var(--acc-rgb), .1); }

/* позначка відео в рядках матчів: крапка біля рахунку (скрізь) і мітки «Огляд / Ефір» праворуч (лише комп'ютер) */
.m .score { position: relative; }
.vid-m { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #ff2a2a; margin-left: .35rem; position: relative; vertical-align: -1px; }
.vid-m::after { content: ""; position: absolute; left: 4px; top: 2.5px; border: solid transparent; border-width: 3px 0 3px 5px; border-left-color: #fff; }
.vchips { display: none; gap: .35rem; margin-left: .5rem; }
.vchip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid rgba(255,42,42,.5); background: rgba(255,42,42,.1); color: #ff8a8a; font: 700 11.5px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.vchip i { display: inline-block; width: 0; height: 0; border: solid transparent; border-width: 4px 0 4px 7px; border-left-color: #ff4a4a; }
.vchip:hover { background: #ff2a2a; color: #fff; }
.vchip:hover i { border-left-color: #fff; }
@media (min-width: 641px) { .m:not(.c) .vchips { display: inline-flex; } }
.m.c .where { display: none; }
@media (min-width: 641px) { #tsel.dd .dd-btn { max-width: 150px; } #tsel .dd-cur { overflow: hidden; min-width: 0; } #tsel .dd-cur span { max-width: 100%; } }

/* телефон: крапка відео не переносить рахунок на другий рядок; шапка знову в один рядок */
@media (max-width: 640px) {
  .m .score { white-space: nowrap; padding-left: .3rem; padding-right: .3rem; }
  .vid-m { margin-left: .2rem; width: 9px; height: 9px; }
  .vid-m::after { left: 3px; top: 2px; border-width: 2.5px 0 2.5px 4px; }
  .lq { padding: .26rem .45rem; }
  #tsel.dd .dd-btn { max-width: 84px; }
}

/* рахунок завжди в один рядок: позначки «п» (пенальті) і відео не переносяться */
.m .score { white-space: nowrap; }
.m.c { grid-template-columns: 4.6rem minmax(0, 1fr) 4.7rem minmax(0, 1fr); }
@media (max-width: 640px) {
  .m.c { grid-template-columns: 3.3rem minmax(0, 1fr) 3.4rem minmax(0, 1fr); }
  .m.c .pen-m { display: none; }
}

/* серія пенальті: помітно й у рядках, і на сторінці матчу */
.m .score { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.m .score .sc1 { white-space: nowrap; }
.m .score.has-pen { line-height: 1.05; padding-top: .18rem; padding-bottom: .18rem; }
.sc2 { margin-top: 1px; font: 700 11.5px var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.sc2 b { color: var(--muted); font-weight: 700; }
.sc2 b.w { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.mh-score { display: flex; flex-direction: column; align-items: center; }
.mh-pen { margin-top: .5rem; padding: .3rem 1rem; border: 1px solid rgba(var(--acc-rgb), .7); border-radius: 999px; background: rgba(var(--acc-rgb), .14); color: var(--accent); font: 700 18px/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.mh-pen b { color: var(--muted); font-size: 22px; }
.mh-pen b.w { color: #fff; }
.mh-team.win-pen span { color: var(--accent); }
.mh-won { display: block; margin-top: .25rem; color: var(--accent); font: 700 11.5px var(--head); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 640px) { .mh-pen { font-size: 14px; padding: .25rem .7rem; } .mh-pen b { font-size: 17px; } .mh-won { font-size: 10.5px; letter-spacing: .08em; } }

.mh-penrow { display: flex; justify-content: center; margin-top: .9rem; }
.mh-penrow .mh-pen { margin-top: 0; }

/* пенальті: один колір (акцент ліги); переможця видно за жирністю й підкресленням */
.sc2 b, .sc2 b.w, .mh-pen b, .mh-pen b.w { color: inherit; font-weight: 500; text-decoration: none; opacity: .8; }
.sc2 b.w, .mh-pen b.w { font-weight: 800; opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mh-pen b { font-size: inherit; }

/* пенальті, спрощено: однаковий шрифт без підкреслень; підпис дрібніший і іншого кольору, ніж рахунок серії */
.sc2 { color: var(--accent); font: 700 11.5px var(--head); letter-spacing: .06em; }
.sc2 i { font-style: normal; color: var(--muted); font-weight: 600; }
.mh-pen { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: .3rem 1.1rem .4rem; border: 1px solid rgba(var(--acc-rgb), .45); border-radius: 16px; background: rgba(var(--acc-rgb), .1); text-transform: uppercase; white-space: nowrap; }
.mh-pen-l { color: var(--muted); font: 600 11.5px/1.3 var(--head); letter-spacing: .16em; }
.mh-pen-s { color: var(--accent); font: 700 24px/1.1 var(--head); letter-spacing: .1em; }
@media (max-width: 640px) { .mh-pen-l { font-size: 11px; letter-spacing: .12em; } .mh-pen-s { font-size: 20px; } }

/* рахунок і серія пенальті центруються по плашці; червона крапка відео окремо — збоку, на центрування не впливає */
.m .score .sc1 { align-self: stretch; position: relative; text-align: center; }
.m .score .vid-m { position: absolute; right: .4rem; top: 50%; margin: 0; transform: translateY(-50%); vertical-align: baseline; }
.m .score .sc2 { align-self: center; text-align: center; }
@media (max-width: 640px) { .m .score .vid-m { right: .3rem; } }
/* телефон: плашка вузька — крапка відео на її верхньому куті, щоб не перекривати цифри */
@media (max-width: 640px) { .m .score .vid-m { right: -3px; top: -2px; transform: none; box-shadow: 0 0 0 2px #0f1c4a; width: 10px; height: 10px; } .m .score .vid-m::after { left: 3.5px; top: 2.5px; } }

/* крапка відео — на верхньому куті плашки, поза цифрами (на всіх екранах) */
.m .score .vid-m, .m .score .vid-m { right: -5px; top: -6px; transform: none; width: 13px; height: 13px; box-shadow: 0 0 0 2px #0f1c4a; }
.m .score .vid-m::after { left: 4.5px; top: 3px; border-width: 3.5px 0 3.5px 5.5px; }
@media (max-width: 640px) { .m .score .vid-m { right: -4px; top: -5px; width: 12px; height: 12px; } .m .score .vid-m::after { left: 4px; top: 2.5px; border-width: 3.5px 0 3.5px 5px; } }

/* колонки з довшими підписами («Турнірів», «⚽ Голи») мають вміщати заголовок повністю */
table.tfix th.n.w2, table.tfix td.n.w2 { width: 5.8rem; }
table.tfix th.n:has(.hd) { width: 5.2rem; }
th { overflow: hidden; text-overflow: clip; }
@media (max-width: 640px) { table.tfix th.n:has(.hd) { width: 4.4rem; } }

/* історія: бомбардирам більше місця (дві колонки чисел) */
.grid.two.hist { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); }
@media (max-width: 860px) { .grid.two.hist { grid-template-columns: minmax(0, 1fr); } }
table.tfix th.n.w2, table.tfix td.n.w2 { width: 4.9rem; }
table.tfix th.n:has(.hd) { width: 4.6rem; }
.grid.two.hist { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 860px) { .grid.two.hist { grid-template-columns: minmax(0, 1fr); } }
table.tfix th.n.w2, table.tfix td.n.w2 { width: 4.4rem; }

/* зона плей-оф у таблиці: ледь помітна смужка зліва й легкий фон; пунктир під останнім місцем зони */
tr.q { background: rgba(var(--acc-rgb), .05); }
tr.q td:first-child { box-shadow: inset 3px 0 0 rgba(var(--acc-rgb), .6); }
tr.qlast td { border-bottom: 1px dashed rgba(var(--acc-rgb), .4); }
.qleg { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; color: var(--muted); font-size: 12.5px; }
.qleg i { width: 12px; height: 12px; border-radius: 3px; background: rgba(var(--acc-rgb), .12); box-shadow: inset 3px 0 0 rgba(var(--acc-rgb), .6); }

tr.q1 { background: rgba(var(--acc-rgb), .03); }
tr.q1 td:first-child { box-shadow: inset 3px 0 0 rgba(var(--acc-rgb), .35); }
.qleg { flex-wrap: wrap; gap: .3rem 1.2rem; }
.qleg span { display: inline-flex; align-items: center; gap: .45rem; }
.qleg i.q1 { background: rgba(var(--acc-rgb), .06); box-shadow: inset 3px 0 0 rgba(var(--acc-rgb), .35); }

/* сітка плей-оф */
.po-bracket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.po-col { display: flex; flex-direction: column; min-width: 0; }
.po-col h3 { margin: 0 0 .7rem; font: 700 14px var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); text-align: center; }
.po-ties { display: flex; flex-direction: column; justify-content: space-around; gap: .8rem; flex: 1; }
.po-tie { position: relative; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); padding: .35rem .6rem .45rem; }
.po-col:not(:last-child) .po-tie::after { content: ""; position: absolute; right: -1.4rem; top: 50%; width: 1.4rem; border-top: 1px solid rgba(var(--acc-rgb), .35); }
.po-t { display: flex; align-items: center; gap: .5rem; min-height: 34px; padding: .15rem 0; border-bottom: 1px solid rgba(130,170,255,.1); }
.po-t:last-of-type { border-bottom: 0; }
.po-t .tm { min-width: 0; flex: 1; font-size: 14px; }
.po-t .tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-seed { width: 1.1rem; color: var(--muted); font: 700 12px var(--head); text-align: center; flex: none; }
.po-ph { color: var(--muted); font-size: 13px; font-style: italic; flex: 1; }
.po-t.prov .tm { opacity: .6; }
.po-t.w .tm { color: var(--accent); }
.po-sc { font: 700 16px var(--head); min-width: 1.2rem; text-align: right; }
.po-when { padding-top: .25rem; color: var(--muted); font-size: 11.5px; text-align: right; }
.po-when a { color: var(--accent); }
.po-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin-top: .3rem; }
.po-mini .po-t { border: 1px solid var(--line); border-radius: 12px; padding: .3rem .7rem; background: rgba(255,255,255,.035); }
.qleg-link { margin-left: auto; color: var(--accent); font: 700 12.5px var(--head); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 860px) { .po-bracket { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } .po-col:not(:last-child) .po-tie::after { display: none; } }

/* стиковий матч */
.po-trans-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: .3rem; }
.po-trans { max-width: 460px; }
.po-up { border: 1px dashed rgba(var(--acc-rgb), .4); border-radius: 12px; padding: .5rem .7rem .4rem; }
.po-up > span { display: block; color: var(--muted); font: 600 12px var(--head); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2rem; }
.po-up .po-t { border-bottom: 0; }
@media (max-width: 860px) { .po-trans-wrap { grid-template-columns: minmax(0, 1fr); } }

/* попередній характер сітки: банер із прогресом, блідіші команди, пунктир */
.po-draft-note { position: relative; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .6rem .9rem .8rem; border: 1px dashed rgba(var(--acc-rgb), .55); border-radius: 12px; background: rgba(var(--acc-rgb), .07); }
.po-draft-note b { padding: .1rem .7rem; border-radius: 999px; background: rgba(var(--acc-rgb), .2); color: var(--accent); font: 700 13px var(--head); letter-spacing: .16em; text-transform: uppercase; }
.po-draft-note span { flex: 1; min-width: 220px; color: var(--text); font-size: 13.5px; }
.po-prog { position: absolute; left: .9rem; right: .9rem; bottom: .3rem; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.po-prog u { display: block; height: 100%; background: var(--accent); text-decoration: none; }
.po-draft .po-t.prov .tm { opacity: var(--po-op, .5); filter: saturate(.5); }
.po-draft .po-tie, .po-draft .po-mini .po-t, .po-draft.po-trans-wrap .po-tie { border-style: dashed; }
.po-draft .po-t.prov .po-seed { opacity: var(--po-op, .5); }

/* переможець Першої ліги — вихід до Мастер-ліги */
.po-up { border: 1px solid rgba(var(--acc-rgb), .5); border-style: solid; background: rgba(var(--acc-rgb), .06); padding: .7rem .9rem .5rem; }
.po-draft .po-up { border-style: dashed; }
.po-up-h { color: var(--accent); font: 700 17px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.po-up-s { margin: .1rem 0 .45rem; color: var(--muted); font-size: 13px; }
.po-up .po-t { border-bottom: 0; }
.po-tag { margin-left: auto; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font: 600 11.5px var(--head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

/* стиковий матч: наочно «хто з ким» */
.po-trans-wrap { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.po-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .7rem; }
.po-side { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); padding: .5rem .7rem .4rem; min-width: 0; }
.po-draft .po-side { border-style: dashed; }
.po-side > small { display: block; color: var(--muted); font: 600 11.5px var(--head); letter-spacing: .16em; text-transform: uppercase; }
.po-side > b { display: block; margin: .1rem 0 .3rem; color: var(--accent); font: 700 15px var(--head); letter-spacing: .06em; text-transform: uppercase; }
.po-side .po-t { border-bottom: 0; }
.po-vs-mark { padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font: 700 14px var(--head); letter-spacing: .14em; }
.po-vs-mark.sc { color: var(--text); font-size: 20px; letter-spacing: .08em; }
@media (max-width: 1000px) { .po-trans-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .po-vs { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .po-vs-mark { justify-self: center; } }

/* «Перехід між лігами»: мінігрупа → стиковий матч → автоматичний вихід в одній картці */
.po-flow { display: grid; gap: 1rem; margin-top: .2rem; }
.po-step + .po-step { border-top: 1px dashed var(--line); padding-top: 1rem; }
.po-step h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; color: var(--accent); font: 700 15px var(--head); letter-spacing: .14em; text-transform: uppercase; }
.po-step h3 i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), .6); background: rgba(var(--acc-rgb), .12); font-style: normal; font-size: 13px; }
.po-step .note { margin-top: .6rem; }
.po-step .po-up { max-width: 560px; }

/* три окремі блоки: мінігрупа, стиковий матч, автоматичний вихід */
.po-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; align-items: stretch; }
.po-blocks .po-step { display: flex; flex-direction: column; margin: 0; }
.po-blocks .po-step + .po-step { border-top: 1px solid var(--line); padding-top: 1.05rem; }
.po-blocks .po-step h3 { margin-bottom: .8rem; }
.po-blocks .po-step .note { margin-top: auto; padding-top: .8rem; }
.po-blocks .po-mini { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.po-blocks .po-vs { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: .5rem; }
.po-blocks .po-vs-mark { justify-self: center; }
.po-blocks .po-up { max-width: none; border: 0; background: none; padding: 0; }
.po-blocks .po-up-h { font-size: 18px; }
@media (max-width: 1000px) { .po-blocks { grid-template-columns: minmax(0, 1fr); } }
.po-blocks .po-step .note { margin-top: .8rem; padding-top: 0; }

.po-draft-note { display: none; }

/* підписи зон — кожен в окремому рядку, посилання справа */
.qleg { justify-content: space-between; align-items: flex-end; }
.qleg-items { display: flex; flex-direction: column; gap: .35rem; }
.qleg-link { margin-left: auto; white-space: nowrap; }

/* графіки: коли команда забиває й пропускає */
.mc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.mc-h { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mc-h b { font: 700 16px var(--head); letter-spacing: .1em; text-transform: uppercase; }
.mc-h span { color: var(--muted); font-size: 12.5px; }
.mc-plot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mc-half { min-width: 0; padding: .5rem .6rem .4rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.mc-half > small { display: block; margin-bottom: .3rem; color: var(--muted); font: 600 11.5px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.mc-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.mc-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.mc-col b { min-height: 1em; font: 700 14px var(--head); color: var(--text); }
.mc-col i { display: block; width: 100%; min-height: 2px; border-radius: 5px 5px 0 0; opacity: .55; }
.mc-col.peak i { opacity: 1; }
.mc-col i.sc { background: var(--win); }
.mc-col i.cn { background: var(--loss); }
.mc-col u { text-decoration: none; color: var(--muted); font-size: 10.5px; white-space: nowrap; letter-spacing: 0; }
@media (max-width: 860px) { .mc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .mc-col u { font-size: 9.5px; } .mc-bars { gap: 4px; } }

/* два тайми — в одному блоці, розділені тонкою лінією */
.mc-plot { gap: 0; padding: .55rem .4rem .45rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.mc-half { border: 0; background: none; border-radius: 0; padding: 0 .55rem; }
.mc-half + .mc-half { border-left: 1px dashed rgba(130,170,255,.28); }

/* один графік з перемикачем «Забиває / Пропускає» */
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mc-top > span { color: var(--muted); font-size: 13px; }

/* по кожній хвилині: тонкі стовпчики, підписи кожних 5 хвилин */
.mc-bars { gap: 3px; }
.mc-col b { font-size: 11px; }
.mc-col u { font-size: 10.5px; min-height: 1em; }
.mc-col i { border-radius: 3px 3px 0 0; }
@media (max-width: 640px) { .mc-bars { gap: 1.5px; } .mc-col b { font-size: 9.5px; } .mc-col u { font-size: 9px; } }

/* однакова висота підписів: стовпчики всіх хвилин стоять на одній лінії */
.mc-col b, .mc-col u { display: block; height: 14px; line-height: 14px; min-height: 0; }
.mc-col u { overflow: visible; }

/* два перемикача: «Забиває / Пропускає» і «1 хв / 5 хв» */
.mc-ctl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mc-plot.g5 .mc-bars { gap: 8px; }
.mc-plot.g5 .mc-col u { font-size: 10.5px; }
.mc-plot.g5 .mc-col b { font-size: 13px; }
@media (max-width: 640px) { .mc-plot.g5 .mc-bars { gap: 5px; } .mc-plot.g5 .mc-col u { font-size: 9.5px; } }

/* таблиця гравців на сторінці команди: не виходить за картку на вузьких екранах */
table.tfix.pl td:first-child, table.tfix.pl th:first-child { width: auto; }
@media (max-width: 640px) {
  table.tfix.pl th.n:has(.hd), table.tfix.pl td.n { width: 3.5rem; padding-left: .2rem; padding-right: .2rem; }
  table.tfix.pl th.n:has(.hd) .hd { gap: .15rem; font-size: 10.5px; letter-spacing: .02em; }
  table.tfix.pl td .tm span { overflow: hidden; text-overflow: ellipsis; }
}
/* телефон: прізвище гравця переноситься на два рядки замість «…» */
@media (max-width: 640px) { table.tfix.pl td .tm span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; } table.tfix.pl td { overflow: visible; } }

/* сітка плей-оф із довільною кількістю колонок, серії й матч за 3 місце */
.po-bracket { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 860px) { .po-bracket { grid-template-columns: minmax(0, 1fr); } }
.po-col .po-sub { margin-top: 1.4rem; }
.po-ties.po-ties3 { flex: 0 0 auto; }
.po-games { display: flex; flex-wrap: wrap; gap: .3rem .5rem; justify-content: flex-end; padding-top: .3rem; }
.po-g { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 11.5px; }
.po-g b { color: var(--text); font: 700 12.5px var(--head); letter-spacing: .04em; }
.po-g:hover { border-color: var(--accent); }
.po-pen { padding-top: .2rem; color: var(--accent); font: 700 11.5px var(--head); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.po-pts { margin-left: auto; color: var(--muted); font-size: 12px; }

.po-note { padding-top: .25rem; color: var(--muted); font-size: 11.5px; text-align: right; line-height: 1.3; }
.po-g i { font-style: normal; color: var(--accent); font-weight: 600; }
.po-tag.ok { border-color: rgba(var(--acc-rgb), .6); color: var(--accent); }
.po-mini .po-t .po-tag { margin-left: .5rem; }
.po-mini .po-pts { margin-left: auto; }

/* група вильоту / Кубок підтримки — повна таблиця у ширшій картці */
.po-blocks .po-step.po-wide { grid-column: span 2; }
.po-step td.st { text-align: right; white-space: nowrap; }
.po-step td.st .po-tag { margin-left: 0; }
@media (max-width: 1000px) { .po-blocks .po-step.po-wide { grid-column: auto; } }
/* телефон: статус групи вильоту — кольорова крапка замість довгого підпису (пояснення — під таблицею) */
@media (max-width: 640px) {
  .po-step td.st { width: 1.6rem; padding-left: .2rem; }
  .po-step td.st .po-tag { display: inline-block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; font-size: 0; background: var(--loss); }
  .po-step td.st .po-tag.ok { background: var(--accent); }
}

/* сітка плей-оф: розкладка по центрах і лінії-з'єднання (старі короткі риски вимкнено) */
.po-col:not(:last-child) .po-tie::after { display: none; }
.po-bracket { position: relative; }
.po-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.po-lines path { fill: none; stroke: rgba(var(--acc-rgb), .5); stroke-width: 1.5; }
.po-abs .po-col { position: relative; }
.po-abs .po-ties { position: relative; display: block; }
.po-abs .po-tie { position: absolute; left: 0; right: 0; }
.po-abs .po-sub { position: absolute; left: 0; right: 0; margin: 0; text-align: center; }
.po-abs .po-ties3 { position: absolute; left: 0; right: 0; display: block; }
.po-abs .po-ties3 .po-tie { position: static; }

.po-sum { align-self: center; color: var(--muted); font: 600 11.5px var(--head); letter-spacing: .12em; text-transform: uppercase; }

/* підсумки турніру на головній */
.fin { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; padding: 1rem 1.4rem; margin-top: .6rem; }
.fin:has(.fin-col:only-child) { grid-template-columns: 1fr; }
.fin + .grid { margin-top: 1.1rem; }
.fin-col { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.fin-col small { font: 700 11.5px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fin-col.out { padding-left: 2rem; border-left: 1px solid var(--line); }
.fin-col.out small { color: var(--loss); } .fin-col.up small { color: var(--win); }
.fin-r { display: flex; align-items: center; gap: .8rem; min-height: 42px; }
.fin-ic { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.fin-r.g1 { min-height: 52px; } .fin-r.g1 .fin-ic { width: 52px; height: 52px; filter: drop-shadow(0 3px 8px rgba(242,201,107,.35)); }
.fin-r.g1 .tm { font-size: 20px; }
@media (max-width: 700px) {
  .fin { grid-template-columns: 1fr; padding: .8rem 1rem; }
  .fin-col.out { padding-left: 0; border-left: 0; padding-top: .8rem; border-top: 1px solid var(--line); }
}
.fin-r, .fin-r.g1 { min-height: 46px; }
.fin-ic, .fin-r.g1 .fin-ic { width: 44px; height: 44px; }
.fin-r.g1 .fin-ic { filter: drop-shadow(0 2px 6px rgba(242,201,107,.35)); }
.fin-r.g1 .tm { font-size: inherit; }

/* вибір змагання: завжди повна назва, без обрізання (на вузьких екранах шапка переносить рядок) */
#tsel.dd .dd-btn, #tsel.dd .dd-btn .dd-cur, #tsel .dd-cur span { max-width: none; }
#tsel.dd .dd-btn { flex: none; }
#tsel.dd .dd-btn .dd-cur, #tsel.dd .dd-btn .dd-cur span { overflow: visible; text-overflow: clip; white-space: nowrap; }

.fin-col.side { padding-left: 2rem; border-left: 1px solid var(--line); }
.fin-col.out { padding-left: 0; border-left: 0; }
.fin-col small.out { color: var(--loss); } .fin-col small.up { color: var(--win); }
.fin-col small.gap { margin-top: .5rem; }
@media (max-width: 700px) { .fin-col.side { padding-left: 0; border-left: 0; padding-top: .8rem; border-top: 1px solid var(--line); } }

.fin:has(.fin-col:nth-child(3)) { grid-template-columns: 1.1fr 1fr 1fr; gap: 1rem 1.6rem; }
.fin:has(.fin-col:nth-child(3)) .fin-col.side { padding-left: 1.6rem; }
@media (max-width: 700px) { .fin:has(.fin-col:nth-child(3)) { grid-template-columns: 1fr; } .fin:has(.fin-col:nth-child(3)) .fin-col.side { padding-left: 0; } }

/* пошук */
.sbtn { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text); cursor: pointer; transition: .15s; padding: 0; }
.sbtn:hover, .sbtn:focus-visible { border-color: var(--accent); color: var(--accent); }
.sbtn svg, .sp-in svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#sp { position: fixed; inset: 0; z-index: 60; background: rgba(2,6,22,.72); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 1rem 1rem; }
#sp[hidden] { display: none; }
body.sp-open { overflow: hidden; }
.sp-box { width: min(620px, 100%); max-height: 78vh; display: flex; flex-direction: column; border: 1px solid rgba(var(--acc-rgb), .5); border-radius: 18px; background: #0b1637; box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
.sp-in { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.sp-in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 600 18px var(--body, inherit); }
.sp-in input::placeholder { color: var(--muted); font-weight: 500; }
.sp-in input::-webkit-search-cancel-button { display: none; }
.sp-x { border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); font: 600 11px var(--head); letter-spacing: .08em; padding: .2rem .45rem; cursor: pointer; }
.sp-res { overflow-y: auto; padding: .3rem .5rem .7rem; }
.sp-h { padding: .7rem .6rem .25rem; font: 700 11.5px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sp-i { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; border-radius: 10px; color: var(--text); min-height: 44px; }
.sp-i.on, .sp-i:hover { background: rgba(var(--acc-rgb), .16); }
.sp-n { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-n mark { background: none; color: var(--accent); }
.sp-i small { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.sp-lg { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.sp-lg img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.sp-av { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; background: #1b2a57; display: grid; place-items: center; }
.sp-av b { font: 700 12px var(--head); color: var(--muted); }
.sp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--accent); }
.sp-empty { padding: 1.4rem .8rem; color: var(--muted); text-align: center; }
@media (max-width: 640px) { #sp { padding-top: 4.5vh; } .sp-in input { font-size: 16px; } .sbtn { width: 32px; height: 32px; } }

.lq small { margin-left: .15rem; font: 700 .82em var(--head); letter-spacing: .04em; opacity: .7; }
.lq small { margin-left: .3rem; padding: .05rem .38rem; border-radius: 999px; background: rgba(255,255,255,.14); font: 700 12px var(--head); letter-spacing: .04em; opacity: 1; }
.lq-master.on small, .lq-one.on small { background: rgba(0,0,0,.14); }
@media (max-width: 640px) { .lq small { font-size: 11.5px; padding: .03rem .32rem; margin-left: .2rem; } }
.lq small, .lq-master.on small, .lq-one.on small { margin-left: .25em; padding: 0; border-radius: 0; background: none; font: inherit; letter-spacing: inherit; opacity: .8; }
@media (max-width: 640px) { .lq small { font-size: inherit; padding: 0; margin-left: .22em; } }

/* форма команди */
.frm { display: inline-flex; gap: 4px; vertical-align: middle; }
.frm i { width: 10px; height: 10px; border-radius: 50%; background: #5b6b97; }
.frm i.w { background: var(--win); } .frm i.l { background: var(--loss); } .frm i.d { background: #8fa3d6; opacity: .75; }
th.frm-h { text-align: left; } td.frm-c { padding-left: .8rem; }

/* шапка на середніх екранах: ширша смуга й щільніші пункти, щоб усе меню було видно без прокрутки */
.bar { max-width: 1280px; }
@media (min-width: 1081px) and (max-width: 1260px) {
  .bar { gap: .5rem; padding-left: .9rem; padding-right: .9rem; }
  .brand img { height: 36px; }
  .nav { gap: 0; }
  .nav a { padding: .45rem .5rem; letter-spacing: .03em; font-size: 14px; }
  .tsel { gap: .3rem; }
  .lq { padding: .28rem .6rem; letter-spacing: .04em; }
  #tsel.dd .dd-btn { padding: .38rem .7rem; letter-spacing: .04em; font-size: 13px; }
}

/* додати в календар */
.btn-cal { display: inline-block; padding: .35rem .9rem; border: 1px solid rgba(var(--acc-rgb), .55); border-radius: 999px; background: rgba(var(--acc-rgb), .1); color: var(--accent); font: 700 13px var(--head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn-cal:hover { background: rgba(var(--acc-rgb), .22); color: var(--text); }
.btn-cal[hidden] { display: none; }
.filters #icsAll { margin-left: auto; }
.mh-cal { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.cal-sub { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.cal-sub[hidden] { display: none; }

/* значок «додати матч у календар» */
.cal-i { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: .15s; }
.cal-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-i:hover, .cal-i:focus-visible { color: var(--accent); border-color: var(--accent); background: rgba(var(--acc-rgb), .14); }
.m .where .cal-i { margin-left: .5rem; }
.m .when .cal-i.p { display: none; }
@media (max-width: 640px) {
  .m .when { position: relative; }
  .m .when .cal-i.p { display: inline-grid; width: 24px; height: 24px; margin-top: .25rem; }
  .m .when .cal-i.p svg { width: 13px; height: 13px; }
}
.cal-i.sp { visibility: hidden; border-color: transparent; }

.cal-i { width: 32px; height: 32px; color: var(--accent); border-color: rgba(var(--acc-rgb), .55); background: rgba(var(--acc-rgb), .08); }
.cal-i svg { width: 19px; height: 19px; }
.cal-i svg .cb { stroke-width: 1.7; } .cal-i svg .cp { stroke-width: 2.4; }
.cal-i:hover, .cal-i:focus-visible { color: #04112f; background: var(--accent); border-color: var(--accent); }
.cal-i.sp { background: none; }
@media (max-width: 640px) { .m .when .cal-i.p { width: 28px; height: 28px; } .m .when .cal-i.p svg { width: 17px; height: 17px; } }
.m .where .vchips { margin-left: 0; margin-right: .5rem; }

a.score.tbd:hover, a.score.tbd:focus-visible { background: rgba(var(--acc-rgb), .2); color: var(--accent); }
.mh-count { margin-top: 1rem; text-align: center; }
.mh-count small { display: block; font: 700 12px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mh-count b { display: block; margin-top: .2rem; font: 700 clamp(26px, 5vw, 38px)/1.1 var(--head); letter-spacing: .06em; color: var(--accent); font-variant-numeric: tabular-nums; }
.mh-count b i { font-style: normal; font-size: .5em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: .15em; }

.vid-ph { border-style: dashed; background: transparent; cursor: default; }
.vid-ph .vid-th i { background: rgba(255,255,255,.14); }
.vid-ph .vid-th i::after { border-left-color: rgba(255,255,255,.55); }
.vid-ph .vid-t small { max-width: 260px; white-space: normal; }
.vid-ph { border: 1.5px dashed rgba(var(--acc-rgb), .6); background: rgba(var(--acc-rgb), .08); padding: .6rem 1rem .6rem .6rem; }
.vid-ph .vid-th { background: rgba(255,255,255,.06); }
.vid-ph .vid-th i { background: rgba(255,42,42,.75); }
.vid-ph .vid-th i::after { border-left-color: #fff; }
.vid-ph .vid-t b { color: var(--accent); font-size: 17px; letter-spacing: .1em; }
.vid-ph .vid-t small { color: var(--text); opacity: .85; font-size: 13.5px; }

/* огляд і трансляція — однакові за розміром картки */
.vids .vid { box-sizing: border-box; width: 300px; max-width: 100%; height: 72px; }
.vid-ph { padding: .45rem .8rem .45rem .45rem; border-width: 1px; }
.vid-ph .vid-t b { font-size: 13px; letter-spacing: .1em; }
.vid-ph .vid-t small { font-size: 11.5px; line-height: 1.3; max-width: none; white-space: normal; opacity: .9; }
.vids .vid-t small { max-width: none; }

/* статистика зустрічі */
.match-tl.h2h-card { padding: 1.1rem 1.3rem 1.3rem; }
.h2h-top { display: flex; justify-content: space-between; gap: 1rem; font: 700 clamp(15px, 2.4vw, 19px) var(--head); letter-spacing: .06em; text-transform: uppercase; }
.h2h-t { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.h2h-t.r { flex-direction: row; text-align: right; }
.h2h-t img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.h2h-nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; margin-top: .6rem; font-family: var(--head); }
.h2h-nums > b { font-size: clamp(40px, 8vw, 62px); line-height: 1; }
.h2h-nums > b.a { color: var(--accent); text-align: left; } .h2h-nums > b.b { color: #dfe7fb; text-align: right; }
.h2h-nums span { text-align: center; padding: 0 1rem; } .h2h-nums span b { display: block; font-size: 28px; color: var(--muted); line-height: 1; }
.h2h-nums small { font: 700 11px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.h2h-bar { display: flex; gap: 3px; height: 8px; margin-top: .6rem; border-radius: 99px; overflow: hidden; }
.h2h-bar i { display: block; min-width: 0; } .h2h-bar i[style*="flex:0"] { display: none; }
.h2h-bar .a { background: var(--accent); } .h2h-bar .d { background: #5b6b97; } .h2h-bar .b { background: #dfe7fb; }
.h2h-meta { margin-top: .5rem; text-align: center; color: var(--muted); font-size: 13.5px; }
.h2h-h { margin: 1.3rem 0 .4rem; font: 700 12px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.h2h-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem .2rem; border-top: 1px solid rgba(130,170,255,.1); color: var(--text); }
.h2h-row:hover { background: rgba(var(--acc-rgb), .08); }
.h2h-d { color: var(--muted); font-size: 13px; }
.h2h-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13.5px; }
.h2h-row b { font: 700 17px var(--head); letter-spacing: .06em; white-space: nowrap; padding: .1rem .6rem; border-radius: 8px; background: rgba(255,255,255,.08); }
.h2h-row.w b { color: var(--win); } .h2h-row.l b { color: var(--loss); }
.h2h-row b i { font: 600 12px var(--body, inherit); font-style: normal; color: var(--muted); }
.h2h-form { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.h2h-form .r { text-align: right; } .h2h-form small { color: var(--muted); font-size: 12px; text-align: center; }
.h2h-form .frm i { width: 14px; height: 14px; } .h2h-form .frm { gap: 6px; }
.h2h-none { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .match-tl.h2h-card { padding: .9rem 1rem 1.1rem; } .h2h-row { grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: .5rem; } .h2h-t img { width: 26px; height: 26px; } }

/* зал — посилання на маршрут у Google Maps */
a.vl { color: inherit; text-decoration: none; }
.m .where a.wv { display: inline-flex; align-items: center; gap: .3rem; }
.m .where a.wv:hover, .m .when a.v:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.mh-meta a.chip.venue:hover { background: rgba(var(--acc-rgb), .2); border-color: var(--accent); color: var(--text); }

/* статистика зустрічі: блоки */
.h2h-grid { display: grid; grid-template-columns: 1fr minmax(96px, .55fr) 1fr; gap: .8rem; align-items: stretch; }
.h2h-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: 1rem .8rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); text-align: center; min-width: 0; }
.h2h-tile .h2h-logo { width: 54px; height: 54px; display: grid; place-items: center; padding: 6px; border-radius: 14px; background: #f4f7ff; margin-bottom: .45rem; }
.h2h-tile .h2h-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.h2h-name { font: 700 clamp(14px, 2.2vw, 18px) var(--head); letter-spacing: .07em; text-transform: uppercase; overflow-wrap: anywhere; line-height: 1.15; }
.h2h-tile b { font: 700 clamp(44px, 8vw, 68px)/1 var(--head); margin-top: .25rem; }
.h2h-tile small { font: 700 11.5px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.h2h-tile.a { border-color: rgba(var(--acc-rgb), .55); background: rgba(var(--acc-rgb), .1); } .h2h-tile.a b { color: var(--accent); }
.h2h-tile.b b { color: #eef3ff; }
.h2h-tile.d { background: rgba(255,255,255,.025); } .h2h-tile.d b { color: var(--muted); font-size: clamp(34px, 6vw, 48px); }
.h2h-bar { margin-top: .9rem; height: 10px; }
.h2h-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .9rem; }
.h2h-chips .chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 600 14px var(--head); letter-spacing: .1em; text-transform: uppercase; }
.h2h-chips .chip b { color: var(--accent); }
@media (max-width: 640px) {
  .h2h-grid { grid-template-columns: 1fr .62fr 1fr; gap: .5rem; }
  .h2h-tile { padding: .8rem .4rem .9rem; border-radius: 14px; }
  .h2h-tile .h2h-logo { width: 42px; height: 42px; padding: 5px; }
  .h2h-chips .chip { font-size: 12.5px; padding: .25rem .65rem; }
}

/* статистика зустрічі: компактніші блоки */
.h2h-grid { grid-template-columns: 1fr minmax(84px, .32fr) 1fr; gap: .6rem; }
.h2h-tile { padding: .6rem .9rem; border-radius: 14px; }
.h2h-tile.a, .h2h-tile.b { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo name num" "logo small num"; column-gap: .75rem; row-gap: 0; align-items: center; text-align: left; }
.h2h-tile .h2h-logo { grid-area: logo; width: 40px; height: 40px; padding: 4px; margin: 0; border-radius: 11px; }
.h2h-tile .h2h-name { grid-area: name; align-self: end; font-size: 15px; }
.h2h-tile.a small, .h2h-tile.b small { grid-area: small; align-self: start; }
.h2h-tile.a b, .h2h-tile.b b { grid-area: num; margin: 0; font-size: 40px; }
.h2h-tile.d b { font-size: 30px; margin: 0; }
.h2h-tile.d small { margin-top: .1rem; }
.h2h-bar { margin-top: .7rem; height: 8px; }
.h2h-chips { margin-top: .7rem; }
@media (max-width: 640px) {
  .h2h-grid { grid-template-columns: 1fr .6fr 1fr; gap: .4rem; }
  .h2h-tile { padding: .55rem .3rem; }
  .h2h-tile.a, .h2h-tile.b { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; }
  .h2h-tile .h2h-logo { width: 34px; height: 34px; padding: 4px; }
  .h2h-tile.a b, .h2h-tile.b b { font-size: 32px; }
  .h2h-tile .h2h-name { font-size: 13px; }
  .h2h-tile.d b { font-size: 26px; }
}
@media (max-width: 640px) { .h2h-tile .h2h-name, .h2h-tile.a small, .h2h-tile.b small { align-self: center; } }

/* стисла довідка про особисті зустрічі під ходом матчу */
.h2h-mini { margin-top: 1rem; padding: .8rem 1.1rem 1rem; background: rgba(255,255,255,.025); }
.h2h-mini[hidden] { display: none; }
.h2h-mini .h2h-h { margin: 0 0 .5rem; }
.hm-line { display: flex; justify-content: space-between; gap: .6rem; font: 600 13.5px var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hm-line b { font-size: 17px; color: var(--text); margin-right: .25rem; }
.hm-line .a b { color: var(--accent); }
.hm-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-mini .h2h-bar { height: 5px; margin-top: .5rem; }
.hm-meta { margin-top: .4rem; font-size: 12.5px; color: var(--muted); }
.h2h-mini details { margin-top: .5rem; }
.h2h-mini summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.h2h-mini .h2h-rows { margin-top: .3rem; }
.h2h-row.cur { background: rgba(var(--acc-rgb), .1); }

.hm-line { align-items: flex-start; }
.hm-line span { display: flex; flex-direction: column; gap: .1rem; }
.hm-line .b { text-align: right; align-items: flex-end; } .hm-line .d { text-align: center; align-items: center; }
.hm-line b { font-size: 16px; margin: 0; letter-spacing: .06em; }
.hm-line small { font: 600 12px var(--head); letter-spacing: .1em; color: var(--muted); }
.hm-line .a small { color: var(--accent); opacity: .85; }

.hm-line b { display: flex; align-items: baseline; gap: .4rem; font: 700 22px/1 var(--head); letter-spacing: .02em; text-transform: none; }
.hm-line .b b { flex-direction: row-reverse; } .hm-line .d b { justify-content: center; }
.hm-line b i { font: 600 12.5px var(--head); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hm-line small { text-transform: uppercase; }

/* зустрічі: нейтральні рядки (без червоного/зеленого рахунку) */
.h2h-row { grid-template-columns: 5.6rem minmax(0, .9fr) minmax(0, 1.6fr); }
.h2h-m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; font-weight: 600; font-size: 14px; }
.h2h-th, .h2h-ta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.h2h-th { text-align: right; } .h2h-ta { text-align: left; }
.h2h-th.w, .h2h-ta.w { color: var(--text); font-weight: 700; }
.h2h-row b, .h2h-row.w b, .h2h-row.l b { color: var(--text); text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.h2h-pen { font: 600 11px var(--body, inherit); font-style: normal; color: var(--muted); letter-spacing: .02em; }
@media (max-width: 640px) {
  .h2h-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .55rem .2rem; }
  .h2h-d, .h2h-tn { display: inline; font-size: 12px; }
  .h2h-row .h2h-d { margin-right: .5rem; }
  .h2h-row { display: block; }
  .h2h-m { margin-top: .3rem; }
}

/* назви команд не скорочуються «…»: у вузьких рядках переносяться на другий рядок */
.m.c .side span, .m.c .side span.w10 { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.15; overflow-wrap: break-word; }
@media (max-width: 640px) { .m .side span, .m .side span.w10 { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.15; overflow-wrap: break-word; } }

/* телефон: логотип і перемикачі ліг в одному рядку, меню — другим */
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; gap: .35rem .4rem; padding: .45rem .6rem; }
  .brand { flex: none; }
  .brand img { height: 26px; }
  .tsel { order: 2; flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: .25rem; margin-left: 0; }
  .sbtn { width: 30px; height: 30px; }
  .lq { padding: .22rem .42rem; font-size: 11.5px; letter-spacing: .02em; }
  .lq small { margin-left: .18em; }
  #tsel.dd .dd-btn { padding: .3rem .45rem; font-size: 11.5px; letter-spacing: .02em; gap: .25rem; }
  .nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .bar { padding-left: .5rem; padding-right: .5rem; gap: .35rem .3rem; }
  .brand img { height: 22px; }
  .tsel { gap: .2rem; }
  .sbtn { width: 28px; height: 28px; }
  .sbtn svg { width: 16px; height: 16px; }
  .lq { padding: .2rem .32rem; font-size: 11px; letter-spacing: 0; gap: .2rem; }
  .lq small { margin-left: .12em; }
  #tsel.dd .dd-btn { padding: .26rem .38rem; font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 370px) { .lq small { display: none; } }
@media (max-width: 640px) { .brand img { height: 28px; } }
@media (max-width: 640px) { .tsel { flex: 1 1 auto; min-width: max-content; } }
@media (max-width: 640px) {
  .brand img { height: 24px; }
  .tsel { flex: 1 1 0; min-width: 0; }
  /* коли відкрито архівний турнір, у швидких кнопках сезон не потрібен: місце для назви архіву */
  .tsel:has(#tsel.on) .lq small { display: none; }
  #tsel.dd { min-width: 0; flex: 0 1 auto; }
  #tsel.dd .dd-btn { max-width: 100%; }
  #tsel.dd .dd-btn .dd-cur span { overflow: hidden; text-overflow: ellipsis; }
}

/* білий логотип без підкладки займає менше місця — робимо його більшим */
.brand img { height: 46px; }
@media (min-width: 1081px) and (max-width: 1260px) { .brand img { height: 40px; } }
@media (max-width: 1080px) { .brand img { height: 40px; } }
@media (max-width: 640px) { .brand img { height: 34px; } }


/* шапка: на комп'ютері пошук стоїть перед перемикачами, соцмережі приховані (вони внизу сторінки) */
.hact { display: flex; align-items: center; gap: .4rem; flex: none; }
.hact .hs { display: none; }

/* телефон — три рядки: 1) логотип, пошук і соцмережі; 2) Мастер / Перша / Архів; 3) меню */
@media (max-width: 640px) {
  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; padding: .5rem .75rem .35rem; }
  .brand { order: 1; flex: none; }
  .brand img { height: 36px; }
  .hact { order: 2; margin-left: auto; gap: .35rem; }
  .hact .hs { display: flex; gap: .35rem; }
  .hact .hs a, .sbtn { width: 34px; height: 34px; }
  .hact .hs svg { width: 17px; height: 17px; }
  .sbtn svg { width: 17px; height: 17px; }
  .tsel { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  #lsw { flex: none; }
  .lq { padding: .3rem .7rem; font-size: 13px; letter-spacing: .05em; }
  .lq small { display: inline; margin-left: .25em; }
  .tsel:has(#tsel.on) .lq small { display: inline; }
  #tsel.dd { flex: 0 1 auto; min-width: 0; margin-left: auto; }
  #tsel.dd .dd-btn { max-width: none; padding: .35rem .75rem; font-size: 13px; letter-spacing: .05em; gap: .4rem; }
  #tsel.dd .dd-btn .dd-cur span { overflow: visible; text-overflow: clip; }
  .nav { order: 4; flex: 1 1 100%; margin: 0 -.75rem; padding: 0 .75rem .15rem; }
}
@media (max-width: 370px) { .lq small { display: inline; } }

/* телефон: ліворуч лише час і дата; зал — окремим рядком під командами, значок календаря — на правому краї */
@media (max-width: 640px) {
  .m:not(.c) { grid-template-columns: 3.3rem minmax(0, 1fr) 3.4rem minmax(0, 1fr) 30px; column-gap: .35rem; row-gap: .1rem; }
  .m:not(.c) .when .v, .m:not(.c) .when .cal-i.p { display: none; }
  .m:not(.c) .where { display: contents; }
  .m:not(.c) .where .vchips { display: none; }
  .m:not(.c) .where a.wv, .m:not(.c) .where span.wv { grid-column: 2 / 5; grid-row: 2; justify-self: center; font-size: 12px; color: var(--muted); gap: .25rem; }
  .m:not(.c) .where .cal-i { grid-column: 5; grid-row: 1; justify-self: end; width: 30px; height: 30px; margin: 0; }
}
@media (max-width: 640px) {
  .m:not(.c) { grid-template-columns: 3.6rem minmax(0, 1fr) 3.5rem minmax(0, 1fr); column-gap: .35rem; }
  .m:not(.c) .where .cal-i { grid-column: 4; grid-row: 2; justify-self: end; width: 28px; height: 28px; margin-top: -.1rem; }
  .m:not(.c) .where .cal-i.sp { display: none; }
  .m:not(.c) .where a.wv, .m:not(.c) .where span.wv { align-self: center; }
}

/* календар: кожен тур — окремий блок */
.rounds { display: grid; gap: 1rem; }
.card.round { padding: .85rem 1.1rem .5rem; }
.card.round .round-h { margin: 0 0 .2rem; padding: 0 0 .65rem; border-bottom: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.card.round .round-h small { font-size: 12.5px; }
.card.round .round-h + .m { border-top: 0; }
@media (max-width: 640px) { .rounds { gap: .8rem; } .card.round { padding: .75rem .85rem .4rem; } }

/* ---- календар: матчі згруповані за днем; у рядку — час, команди, рахунок і зал (на телефоні зал праворуч у тому ж рядку) ---- */
.m .where a.wv, .m .where span.wv, .m .where a.wv:hover { color: var(--accent); }
.round .day-h { display: block; margin: .6rem 0 .05rem; padding: .65rem .2rem .1rem; border-top: 1px solid var(--line); font: 700 12.5px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.round .round-h + .day-h { margin-top: .2rem; border-top: 0; padding-top: .2rem; }
.round .day-h + .m { border-top: 0; }
.round .m:not(.c) { grid-template-columns: 3.2rem minmax(0, 1fr) 4.6rem minmax(0, 1fr) 11rem; }
.round .m:not(.c) .when .wd, .round .m:not(.c) .when .v { display: none; }
.round .m.pl:not(.c) .when { visibility: hidden; }
@media (max-width: 640px) {
  .round .day-h { padding-top: .55rem; }
  .round .round-h + .day-h { padding-top: 0; }
  .round .m:not(.c) { grid-template-columns: 2.6rem minmax(0, 1fr) 3.1rem minmax(0, 1fr) 3.6rem; column-gap: .3rem; }
  .round .m:not(.c) .side { font-size: 12.5px; gap: .35rem; }
  .round .m:not(.c) .where a.wv, .round .m:not(.c) .where span.wv { grid-column: 5; grid-row: 1; justify-self: end; align-self: center; font-size: 10.5px; color: var(--accent); }
  .round .m:not(.c) .where svg { display: none; }
}

/* примітка до матчу (перенос тощо) — видима під рядком */
.m .m-note { grid-column: 1 / -1; margin-top: .1rem; padding: .25rem .6rem; border-radius: 8px; background: rgba(240,179,90,.1); color: #f0b35a; font-size: 12.5px; line-height: 1.3; }
.m .m-note::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: .45rem; border-radius: 50%; border: 1px solid currentColor; font: 700 10px var(--head); vertical-align: 1px; }
.round .m:not(.c) .when .mnote { display: none; }

/* телефон: команди по дві в ряд */
@media (max-width: 640px) {
  .teams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .teams-grid .tcard { padding: .9rem .5rem; gap: .45rem; border-radius: 14px; }
  .teams-grid .tcard img { width: 72px; height: 72px; padding: 6px; border-radius: 14px; }
  .teams-grid .tcard h3 { font-size: 15px; letter-spacing: .06em; line-height: 1.2; overflow-wrap: anywhere; }
  .teams-grid .tcard .meta { font-size: 12px; line-height: 1.35; }
}

/* склад команди */
.sq .sq-n { width: 2.4rem; text-align: center; color: var(--muted); font: 700 14px var(--head); letter-spacing: .04em; }
.sq td:nth-child(2) { display: table-cell; }
.sq-cnt { margin-left: .4rem; color: var(--muted); font: 600 14px var(--head); letter-spacing: .08em; }
.sq-tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: .55rem; vertical-align: middle; }
.sq-t { font: 700 10.5px var(--head); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: .08rem .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sq-t.cap { color: var(--accent); border-color: rgba(var(--acc-rgb), .6); background: rgba(var(--acc-rgb), .1); }
.sq-t.gk { color: #8fd0ff; border-color: rgba(143,208,255,.5); }
.sq-t.lg { color: #c9b6ff; border-color: rgba(201,182,255,.5); }
@media (max-width: 640px) { .sq-tags { display: flex; margin: .25rem 0 0 0; } }

/* тренери й інші представники команди */
.sq-p { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: 14px; }
.sq-p + .sq-p { margin-top: .4rem; padding-top: 0; border-top: 0; }
.sq-p small { flex: none; min-width: 9.5rem; color: var(--muted); font: 700 11.5px var(--head); letter-spacing: .14em; text-transform: uppercase; padding-top: .15rem; }
@media (max-width: 640px) { .sq-p small { min-width: 100%; } }
table.tfix.pl.sq th.sq-n, table.tfix.pl.sq td.sq-n { width: 2.6rem; padding-left: .2rem; padding-right: .2rem; }
table.tfix.pl.sq td:nth-child(2) { overflow: visible; }
table.tfix.pl.sq td:nth-child(2) .tm span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
table.tfix.pl.sq th.n, table.tfix.pl.sq td.n { width: 3.6rem; padding-left: .2rem; padding-right: .2rem; }
table.tfix.pl.sq th.n .hd { gap: .15rem; font-size: 11px; letter-spacing: .02em; }

/* іконки ролей у складі */
.sq-tags { gap: .15rem; margin-left: .2rem; }
.sq-ico { display: inline-block; width: 18px; height: 18px; margin-left: .4rem; vertical-align: -4px; flex: none; }
.sq-ico svg, .sq-ico img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sq-leg { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .7rem; font-size: 12.5px; color: var(--muted); }
.sq-leg .sq-ico { margin: 0 .4rem 0 0; vertical-align: -4px; }
@media (max-width: 640px) { .sq-ico { width: 16px; height: 16px; } }

/* склад: іконки в рядку з іменем, номер ближче до краю */
.tm .sq-ico { flex: none; align-self: center; margin-left: .35rem; }
table.tfix.pl.sq th.sq-n, table.tfix.pl.sq td.sq-n { width: 1.7rem; text-align: left; padding-left: 0; padding-right: .1rem; }
.tm .sq-ico img { width: 100%; height: 100%; padding: 0; background: none; border-radius: 0; object-fit: contain; }
table.tfix.pl.sq td:nth-child(2) { padding-right: .5rem; }

/* іконки ролей йдуть одразу за останнім словом імені, навіть коли ім'я у два рядки */
.sq .tm span .sq-ico { display: inline-block; margin: 0 0 0 .35rem; vertical-align: -3px; }
.sq .tm span .sq-ico + .sq-ico { margin-left: .2rem; }

/* сортування складу: активний стовпець підсвічено кольором і підкресленням (без стрілок, щоб не налазили на значки) */
.sq-h th.srt { cursor: pointer; user-select: none; white-space: nowrap; }
.sq-h th.srt:hover { color: var(--text); }
.sq-h th.srt.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

/* Кубок підтримки на сторінці плей-оф */
.po-cup { margin-top: 1.1rem; }
.po-cup-h { margin: 0 0 .8rem; font: 700 18px var(--head); letter-spacing: .14em; text-transform: uppercase; }
.po-cup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.po-cup-col h4 { margin: 0 0 .5rem; font: 700 12.5px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.po-cup-col .po-ties { display: grid; gap: .7rem; }

/* трофеї команди */
.tr-logo { width: 84px; height: 84px; padding: 8px; border-radius: 16px; background: #f4f7ff; object-fit: contain; }
.tr-list { display: grid; }
.tr-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .2rem; border-top: 1px solid rgba(130,170,255,.1); color: var(--text); }
.tr-row:first-child { border-top: 0; }
.tr-row:hover { background: rgba(var(--acc-rgb), .08); }
.tr-ic { width: 34px; height: 34px; flex: none; }
.tr-ic svg { width: 100%; height: 100%; display: block; }
.tr-t { display: flex; flex-direction: column; min-width: 0; }
.tr-t b { font: 700 16px var(--head); letter-spacing: .06em; text-transform: uppercase; }
.tr-t small { color: var(--muted); font-size: 13px; }


/* команди гравця */
.pt-list { display: grid; }
.pt-row { display: flex; align-items: center; gap: .9rem; padding: .65rem .2rem; border-top: 1px solid rgba(130,170,255,.1); }
.pt-row:first-child { border-top: 0; }
.pt-row img { width: 40px; height: 40px; padding: 4px; border-radius: 10px; background: #f4f7ff; object-fit: contain; flex: none; }
.pt-n { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pt-n b { font: 700 16px var(--head); letter-spacing: .06em; text-transform: uppercase; }
.pt-n small { color: var(--muted); font-size: 13px; }
.pt-s { display: flex; align-items: center; gap: 1rem; flex: none; }
.pt-g { font: 700 24px var(--head); display: flex; align-items: baseline; gap: .3rem; }
.pt-g i { font: 600 11px var(--head); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pt-c { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: 14px; }
.pt-c em { display: inline-block; width: 9px; height: 13px; border-radius: 2px; margin-left: .3rem; }
.pt-c em.y { background: #ffd23f; } .pt-c em.r { background: #ff4d5e; }

/* команди гравця: праворуч три стовпчики фіксованої ширини, щоб усе вирівнювалось */
.pt-s { display: grid; grid-template-columns: 5.2rem 2.8rem 2.8rem; align-items: center; gap: 0; flex: none; }
.pt-g { display: grid; grid-template-columns: 2.2rem 2.6rem; align-items: baseline; column-gap: .3rem; justify-content: end; }
.pt-g b { font: 700 24px var(--head); text-align: right; }
.pt-g i { text-align: left; }
.pt-c { display: flex; align-items: center; justify-content: flex-start; gap: .3rem; padding-left: .4rem; color: var(--muted); font-size: 14px; min-height: 1px; }
.pt-c em { margin-left: 0; }
@media (max-width: 640px) { .pt-s { grid-template-columns: 4.6rem 2.4rem 2.4rem; } .pt-g { grid-template-columns: 1.9rem 2.4rem; } }

.ev.miss .ev-name { color: var(--muted); }

.var-b { display: inline-block; padding: 2px 5px; border: 1px solid #fff; border-radius: 5px; background: rgba(255,255,255,.14); color: #fff; font: 700 11px/1 var(--head); font-style: normal; letter-spacing: .08em; }
.ev-ic.t-var { width: auto; }

/* серія пенальті — компактніша за ігрові події */
.sec-title.so-t { margin-top: 1rem; font-size: 15px; color: var(--muted); }
.match-tl.so { padding: .35rem 1rem; }
.match-tl.so .tl-row { padding: .2rem 0; gap: .3rem; grid-template-columns: minmax(0, 1fr) 3.2rem minmax(0, 1fr); }
.match-tl.so .tl-min b { font-size: 13px; color: var(--muted); letter-spacing: 0; }
.match-tl.so .tl-min small { font-size: 11px; }
.match-tl.so .ev-name { font-size: 13px; font-weight: 500; }
.match-tl.so .ev-name small { font-size: 11px; }
.match-tl.so .ev-ic { width: 18px; height: 18px; }
.match-tl.so .ball { font-size: 14px; }
.match-tl.so .ev-tag { transform: scale(.8); }

/* гол, скасований VAR: перекреслений м'яч і прізвище */
.ball-x { position: relative; display: inline-block; opacity: .5; }
.ball-x::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; background: var(--loss); transform: rotate(-35deg); border-radius: 1px; box-shadow: 0 0 0 1px rgba(5,11,36,.6); }

/* VAR: рішення змінено — акцентний значок; залишено — приглушений */
.var-b { box-shadow: 0 0 8px rgba(255,255,255,.3); }
.ev.v-keep .var-b { background: transparent; border-color: rgba(157,176,222,.55); color: var(--muted); box-shadow: none; }
/* хрестик «не забито»: маленький червоний у правому верхньому куті, без тла */
.ev-tag.x { top: -3px; bottom: auto; right: -5px; width: 10px; min-width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--loss); color: #fff; z-index: 2; font: 700 7px/10px var(--body); text-align: center; }
.match-tl.so .ev-tag.x { transform: none; }
.match-tl.so .tl-row { min-height: 26px; padding: 0; }
.match-tl.so { padding: .2rem 1rem; }

.match-tl.so .tl-row { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); }
.match-tl.so .ev-name small { white-space: nowrap; }

.match-tl.so .tl-row { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); }
.match-tl.so .tl-min small { display: block; white-space: nowrap; font-size: 12px; color: var(--muted); }
.match-tl.so .tl-min { display: block; text-align: center; }
.match-tl.so .tl-min small { text-align: center; }

/* статистика гравця по командах: однакове оформлення для голів і карток (значок + число) */
.pt-s { display: grid; grid-template-columns: repeat(3, 3.6rem); align-items: center; gap: 0; flex: none; }
.pt-i { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; font: 600 16px var(--body); font-variant-numeric: tabular-nums; color: var(--text); min-height: 1px; }
.pt-i .ball { font: 16px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; filter: grayscale(1) contrast(2.6) brightness(.96); }
.pt-i em { display: inline-block; width: 10px; height: 14px; border-radius: 2px; margin: 0; }
@media (max-width: 640px) { .pt-s { grid-template-columns: repeat(3, 3rem); } .pt-i { font-size: 15px; gap: .3rem; } }
.pt-i em.y { background: #ffd23f; } .pt-i em.r { background: #ff4d5e; }
.pt-i em { margin: 0 3px; flex: none; } .pt-i .ball { display: inline-block; width: 16px; text-align: center; flex: none; }
.pt-i em { margin: 0 0 0 6px; } .pt-i .ball { text-align: right; }
.pt-i .ball { font-size: 12px; width: 16px; text-align: center; overflow: hidden; line-height: 1; }

/* підсумок під усіма командами гравця */
.pt-total { border-top: 1px solid rgba(130,170,255,.32); margin-top: .2rem; }
.pt-sum { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.06); color: var(--muted); font: 700 20px var(--head); }
.pt-total .pt-n b { color: var(--text); }

/* комп'ютер (від 1100 px): шапка у два рядки — 1) логотип, поле пошуку, «Контакти» і соцмережі; 2) меню ліворуч, ліги й архів праворуч */
.hact .hs a.cbtn { display: none; }
@media (min-width: 1100px) {
  .bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .3rem; align-items: center; max-width: 1120px; padding: .55rem 1.25rem .5rem; }
  .brand { grid-area: 1 / 1; } .brand img { height: 46px; }
  .hact { display: contents; }
  .sbtn { grid-area: 1 / 2; justify-self: center; width: 100%; max-width: 400px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; padding: 0 .85rem 0 1rem; gap: .6rem; color: var(--muted); }
  .sbtn::before { content: "Пошук команди чи гравця…"; font: 500 14px var(--body); white-space: nowrap; }
  .sbtn svg { order: 2; width: 17px; height: 17px; flex: none; }
  .hact .hs { grid-area: 1 / 3; display: flex; align-items: center; gap: .4rem; }
  .hact .hs a { width: 36px; height: 36px; }
  .hact .hs a.cbtn { width: auto; height: 32px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .8rem; margin-right: .2rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #aebbdd; font: 500 13px var(--body); letter-spacing: 0; text-transform: none; }
  .hact .hs a.cbtn:hover { color: #fff; border-color: rgba(255,255,255,.45); }
  .cbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav { grid-area: 2 / 1 / 3 / 3; gap: .1rem; min-width: 0; }
  .nav a { padding: .5rem .9rem; letter-spacing: .1em; font-size: 15px; }
  .tsel { grid-area: 2 / 3; justify-self: end; gap: .45rem; }
}

/* сторінка «Контакти» */
.ct-list { display: grid; gap: .6rem; }
.ct-row { display: flex; align-items: center; gap: .9rem; padding: .7rem .2rem; border-top: 1px solid rgba(130,170,255,.1); }
.ct-row:first-child { border-top: 0; }
.ct-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--line); background: var(--card); }
.ct-ic svg { width: 18px; height: 18px; fill: currentColor; }
.ct-n { display: flex; flex-direction: column; min-width: 0; }
.ct-n b { font: 700 16px var(--head); letter-spacing: .06em; text-transform: uppercase; }
.ct-n small { color: var(--muted); font-size: 13px; }

/* форма на сторінці «Контакти» */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; margin-top: 1rem; }
.ct-side { display: grid; gap: 1.1rem; }
@media (max-width: 860px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.cf { display: grid; gap: .9rem; }
.cf label { display: grid; gap: .35rem; font: 600 13px var(--body); color: var(--muted); }
.cf input, .cf select, .cf textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.25); color: var(--text); font: 15px var(--body); }
.cf textarea { resize: vertical; min-height: 130px; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .18); }
.cf select option { color: #111; }
.cf-two { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .cf-two { grid-template-columns: 1fr; } }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.cf-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.cf-send { padding: .65rem 1.6rem; border: 1px solid rgba(var(--acc-rgb), .7); border-radius: 999px; background: rgba(var(--acc-rgb), .14); color: var(--accent); font: 700 15px var(--head); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cf-send:hover { background: rgba(var(--acc-rgb), .26); color: var(--text); }
.cf-send:disabled { opacity: .55; cursor: default; }
.cf-msg { font-size: 14px; color: var(--muted); }
.cf-msg.ok { color: var(--win); } .cf-msg.err { color: var(--loss); }

/* тренер: результати команди */
.pc-s { display: grid; grid-template-columns: repeat(5, 3.9rem); text-align: center; flex: none; }
.pc-s span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.pc-s b { font: 700 16px var(--body); font-variant-numeric: tabular-nums; }
.pc-s small { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .pc-s { grid-template-columns: repeat(5, 3.1rem); } .pc-s small { font-size: 10px; } }
@media (max-width: 560px) { .pt-row:has(.pc-s) { flex-wrap: wrap; } .pc-s { width: 100%; grid-template-columns: repeat(5, 1fr); margin-top: .3rem; } }
/* підряд розташовані блоки на сторінці мають відступ */
.wrap > .card + .card { margin-top: 1.1rem; }

.sub-h { margin: 1.1rem 0 .3rem; font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card > h2 + .sub-h { margin-top: .2rem; }
.hist-t { width: 100%; }
.hist-t th:first-child, .hist-t td:first-child { width: 2.4rem; text-align: left; color: var(--muted); }
.hist-t th.n, .hist-t td.n { width: 4.6rem; }
.hist-t td.n:first-child { text-align: left; }
.hist-tot { column-gap: 1.6rem; }
.hist-tot span { white-space: nowrap; }
.hist-tot { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; color: var(--muted); font-size: 14px; }
.hist-tot span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.hist-tot b { color: var(--text); font: 700 17px var(--body); }
.hist-tot em { display: inline-block; width: 10px; height: 14px; border-radius: 2px; }
.hist-tot em.y { background: #ffd23f; } .hist-tot em.r { background: #ff4d5e; }
#histBox { margin-top: .4rem; }
.hist-tot .ball { filter: grayscale(1) contrast(2.6) brightness(.96); }
.hist-h th.srt { cursor: pointer; user-select: none; }
.hist-h th.srt:hover { color: var(--text); }
.hist-h th.srt.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.hist-h th.srt.on { color: var(--accent); }

/* на телефоні кнопка регламенту не стоїть на головній: посилання є внизу сторінки */
@media (max-width: 640px) { .hero-link { display: none; } }

/* посилання в підвалі — помітні, окремим рядком */
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; }
.foot-links a { color: var(--accent); font-weight: 600; font-size: 13.5px; }
.foot-links a:hover { text-decoration: underline; }

/* посилання на регламент під таблицею — лише на телефоні (на комп'ютері кнопка в кутку заголовка) */
.rules-under { display: none; }
@media (max-width: 640px) { .rules-under { display: inline-block; margin-top: .8rem; color: var(--accent); font: 700 13px var(--head); letter-spacing: .1em; text-transform: uppercase; } }

/* головна: календар згрупований за днями, як у повному календарі; у рядку лише час */
.cal-days .day-h { display: block; margin: .5rem 0 .05rem; padding: .6rem .2rem .1rem; border-top: 1px solid var(--line); font: 700 12.5px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cal-days .seg + .day-h, .cal-days h2 + .day-h { margin-top: .3rem; border-top: 0; padding-top: .3rem; }
.cal-days .day-h + .m { border-top: 0; }
.cal-days .m.c .when .wd { display: none; }
.cal-days .m.c.pl .when b { display: none; }

/* трохи помітніший розділ між днями: більший відступ і ледь яскравіша лінія */
.cal-days .day-h, .round .day-h { margin-top: .9rem; padding-top: .8rem; border-top-color: rgba(var(--acc-rgb), .32); font-size: 13px; }
.cal-days .seg + .day-h, .cal-days h2 + .day-h, .round .round-h + .day-h { margin-top: .3rem; padding-top: .3rem; border-top: 0; }

/* прогноз рахунку на табло майбутнього матчу */
.mh-pred { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .7rem; }
.mh-pred[hidden] { display: none; }
.mh-pred-l { font: 600 11px var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mh-pred-s { padding: .2rem 1.1rem; border: 1px dashed rgba(255,255,255,.35); border-radius: 999px; font: 700 20px/1.2 var(--head); letter-spacing: .14em; color: #dbe4fb; }
.mh-pred small { color: var(--muted); font-size: 12.5px; text-align: center; }
.mh-pred-n { max-width: 24rem; }
@media (max-width: 640px) { .mh-pred small { font-size: 11.5px; } }

.mh-beta { display: inline-block; margin-left: .4rem; padding: 1px 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 5px; font: 600 10px var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: 1px; }
.mh-pred .mh-pred-src { max-width: 30rem; font-size: 11.5px; opacity: .85; }

/* табло майбутнього матчу: відлік і прогноз поруч, дії — в одному рядку плашок */
.mh-info { display: grid; grid-template-columns: repeat(2, minmax(0, 19rem)); gap: .9rem; justify-content: center; margin-top: 1.1rem; }
.mh-info .mh-box { margin-top: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); text-align: center; }
.mh-info .mh-count b { font-size: clamp(24px, 4vw, 32px); }
.mh-info .mh-pred { align-items: center; justify-content: center; gap: .25rem; }
.mh-info .mh-pred[hidden] { display: none; }
.mh-info .mh-pred-s { font-size: 19px; padding: .1rem 1rem; }
.mh-info .mh-pred small { line-height: 1.3; }
.mh-info .mh-pred .mh-pred-src { font-size: 11px; max-width: none; }
@media (max-width: 640px) { .mh-info { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }
.mh-meta .chip-act { color: var(--accent); border-color: rgba(var(--acc-rgb), .55); background: rgba(var(--acc-rgb), .1); }
.mh-meta .chip-act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mh-meta .chip-act:hover { background: rgba(var(--acc-rgb), .22); color: var(--text); }
.mh-meta .chip-dash { border-style: dashed; color: var(--muted); background: transparent; }
.mh-info { grid-template-columns: repeat(2, minmax(0, 20.5rem)); }
.mh-info .mh-count { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) { .mh-info { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }

/* майбутній матч: табло, а нижче три рівні картки — «Коли і де», «Прогноз», «Трансляція» */
.mh-mid { text-align: center; }
.mh-mid .mh-count { margin-top: .5rem; }
.mh-mid .mh-count small:has(+ b) { display: none; }
.mh-mid .mh-count b { margin-top: 0; font-size: clamp(20px, 3.4vw, 26px); }
.mh-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.mh-three .box { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: center; }
.mh-three .lbl { font: 700 11.5px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mh-three .b-day { font-weight: 600; }
.mh-three .b-time { font: 700 24px/1.1 var(--head); letter-spacing: .06em; }
.mh-three .b-venue { color: var(--accent); font-size: 13.5px; }
.mh-three .b-note { color: var(--muted); font-size: 13px; line-height: 1.35; }
.mh-when .b-note { color: var(--accent); }
.mh-three .tbtn { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding: .35rem .95rem; border: 1px solid rgba(var(--acc-rgb), .55); border-radius: 999px; background: rgba(var(--acc-rgb), .1); color: var(--accent); font: 700 14px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.mh-three .tbtn:hover { background: rgba(var(--acc-rgb), .22); color: var(--text); }
.mh-three .tbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-three .pill-s { padding: .15rem 1.1rem; border: 1px dashed rgba(255,255,255,.35); border-radius: 999px; font: 700 20px/1.2 var(--head); letter-spacing: .14em; color: #dbe4fb; }
.mh-three .pbar { display: flex; width: 100%; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.08); }
.mh-three .pbar i { display: block; height: 100%; }
.mh-three .pbar .p1 { background: #f2c96b; } .mh-three .pbar .p2 { background: #5b6b97; } .mh-three .pbar .p3 { background: #eef3ff; }
.mh-three .pr { display: flex; justify-content: space-between; width: 100%; font-size: 12.5px; color: var(--muted); }
.mh-three .pr b { color: var(--text); }
.mh-three .pr-n { margin-top: -.3rem; font-size: 10.5px; gap: .4rem; }
.mh-three .pr-n span:first-child { text-align: left; } .mh-three .pr-n span:last-child { text-align: right; }
.mh-three .src { font-size: 11px; color: var(--muted); }
@media (max-width: 860px) { .mh-three { grid-template-columns: minmax(0, 1fr); gap: .7rem; } }
.mh-three .b-venue { display: inline-flex; align-items: center; gap: .35rem; }
.mh-three .b-venue svg { width: 14px; height: 14px; fill: rgba(var(--acc-rgb), .2); stroke: var(--accent); stroke-width: 1.8; flex: none; }
/* кнопка «Календар» у картці матчу — компактніша */
.mh-three .tbtn { padding: .22rem .7rem; font-size: 12px; letter-spacing: .1em; gap: .3rem; }
.mh-three .tbtn svg { width: 12px; height: 12px; }

/* картки «Коли і де / Прогноз / Трансляція»: підпис зверху з лінією, вміст по центру, дія знизу */
.mh-three .box { gap: 0; padding: .8rem 1rem .9rem; }
.mh-three .lbl { width: 100%; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.mh-three .b-main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .75rem 0 .6rem; }
.mh-three .b-foot { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-height: 1.9rem; }
.mh-three .b-day { font-size: 15px; font-weight: 600; color: #cfd8f0; }
.mh-three .b-time { font-size: 28px; line-height: 1; }
.mh-three .b-main .tbtn { margin-top: 0; }

/* текстова сторінка (конфіденційність) */
.prose { display: grid; gap: 1rem; max-width: 760px; }
.prose p { margin: .5rem 0 0; line-height: 1.6; color: var(--muted); }
.prose p:first-of-type { margin-top: .6rem; }
.prose a { color: var(--accent); }

/* довгі адреси в контактах не вилазять за картку */
.ct-n small { overflow-wrap: anywhere; }
.ct-n { flex: 1 1 0; }