:root {
  --bg: #0b1220; --bg2: #0f1830; --card: #131d33; --card2: #18243f; --line: #24324f;
  --text: #e8eefb; --muted: #8d9bb8; --accent: #b6f23a; --accent-ink: #142000;
  --gold: #ffd54a; --red: #ff5d5d; --blue: #59b7ff; --cyan: #8fe3ff; --green: #4bd47b;
  --radius: 14px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); min-height: 100%; }
body { background: radial-gradient(1200px 600px at 20% -10%, #17305a 0%, transparent 60%), var(--bg); background-attachment: fixed; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input, select { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.mt { margin-top: 12px; }

.btn { background: var(--card2); border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; font-weight: 600; transition: transform .08s, background .15s; }
.btn:hover { background: #1f2d4e; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { background: #c6ff52; }
.btn.danger { background: transparent; color: var(--red); border-color: #5a2a33; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.big { padding: 14px 20px; font-size: 17px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.on { background: var(--accent); color: var(--accent-ink); }

/* layout */
.shell { max-width: 1180px; margin: 0 auto; padding: 14px 16px 90px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.logo { font-weight: 800; letter-spacing: .3px; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.logo b { color: var(--accent); }
.calendar { font-size: 13px; color: var(--muted); text-align: right; }
.calendar b { color: var(--text); }

.hero { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: linear-gradient(120deg, var(--card) 0%, var(--card2) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 22px; border: 3px solid; box-shadow: 0 0 0 3px rgba(255,213,74,.35); }
.hero .name { font-size: 20px; font-weight: 800; }
.ovr { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 26px; line-height: 1; }
.ovr small { display: block; font-size: 10px; font-weight: 700; opacity: .7; }
.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.meter { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.meter .lbl { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; }
.meter .val { font-weight: 700; }
.bar { height: 6px; background: #0a1222; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

.tabs { display: flex; gap: 6px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
.tab { background: transparent; padding: 9px 14px; border-radius: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tab.active { background: var(--card2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tab .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-left: 5px; vertical-align: middle; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
/* колонки не розпирає широкий вміст (3D-полотно, довгі підписи) — інакше на телефоні сторінка їде вбік */
.grid2 > *, .grid3 > *, .col > * { min-width: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.card h3 { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card + .card { margin-top: 14px; }
.col > .card + .card { margin-top: 14px; }

.next-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; padding: 8px 0; }
.crest { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 6px; display: grid; place-items: center; font-weight: 800; font-size: 13px; border: 3px solid; }
.vs { font-weight: 900; font-size: 22px; color: var(--muted); }
.daydots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.daydots i { width: 26px; height: 6px; border-radius: 3px; background: var(--line); }
.daydots i.done { background: var(--accent); }
.daydots i.md { background: var(--gold); }

.train-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.train { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.train:hover:not(:disabled) { border-color: var(--accent); }
.train .t { font-weight: 700; font-size: 13.5px; }
.train .v { font-size: 12px; color: var(--muted); margin-top: 2px; }
.train.key { box-shadow: inset 3px 0 0 var(--accent); }

.news { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.news li { padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.35; }
.news li:last-child { border-bottom: 0; }
.news .when { color: var(--muted); font-size: 11px; margin-right: 6px; }
.news li.big { color: var(--gold); }
.news li.chat { color: var(--cyan); }
.news li.coach { color: #d7c2ff; }
.news li.offer { color: var(--accent); }
.news li.bad { color: var(--red); }

.coach-msg { background: var(--bg2); border-left: 3px solid #a68bff; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.45; }
.coach-msg p { margin: 0 0 4px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 6px; border-bottom: 1px solid var(--line); }
td { padding: 7px 6px; border-bottom: 1px solid rgba(36,50,79,.6); }
tr.me td { background: rgba(255,213,74,.08); }
tr.me td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: var(--card2); }
.pill.GK { background: #3d3410; color: #ffd76a; } .pill.DEF { background: #10324a; color: #7ccfff; }
.pill.MID { background: #173d22; color: #8ef0a8; } .pill.FWD { background: #46171b; color: #ff9aa2; }
.pill.xi { background: var(--accent); color: var(--accent-ink); } .pill.bench { background: #3a3f55; } .pill.out { background: #2a2030; color: var(--muted); }
.pill.rest { background: #1d3a55; color: var(--cyan); cursor: help; }
.formdots { display: inline-flex; gap: 3px; }
.formdots i { width: 16px; height: 16px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.formdots .W { background: var(--green); color: #052; } .formdots .D { background: #6b7590; } .formdots .L { background: var(--red); color: #300; }
.rating { font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.r-hi { background: #1f6b3a; } .r-mid { background: #5a5520; } .r-lo { background: #6b2525; }

.attr { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 10px; padding: 6px 0; }
.attr .nm { font-size: 13.5px; }
.attr .nm.key { font-weight: 700; }
.attr .bar { height: 9px; margin: 0; position: relative; }
.attr .bar .prog { position: absolute; top: 0; height: 100%; background: rgba(182,242,58,.35); }
.attr .vv { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.shop .item { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.offer { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.offer + .offer { margin-top: 8px; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); } .status-dot.off { background: #50607d; }
.chat-input { display: flex; gap: 8px; margin-top: 10px; }
.chat-input input { flex: 1; }
/* чат: кімнати за мовами, скарга на повідомлення, перемикач мови */
.seg.chat-rooms, .seg.lang-pick { display: inline-flex; margin: 0; padding: 3px; vertical-align: middle; }
.seg.chat-rooms button, .seg.lang-pick button { flex: none; padding: 5px 9px; font-size: 12px; min-height: 0; white-space: nowrap; }
h3 .seg.chat-rooms { float: right; margin-top: -4px; }
.chat-rep { background: none; border: 0; color: var(--muted); opacity: .45; padding: 0 4px; font-size: 13px; cursor: pointer; }
.chat-rep:hover, .chat-rep:focus-visible { opacity: 1; color: var(--red); }
.chat-rep.done { opacity: 1; color: var(--red); cursor: default; }

/* онлайн: таймери, слоти, навички */
.slots { display: grid; gap: 8px; }
.slot { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.slot.empty { border-style: dashed; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slot .bar { height: 8px; margin-top: 8px; }
.slot .bar i { background: linear-gradient(90deg, #59b7ff, var(--accent)); transition: width 1s linear; }
.sgroup + .sgroup { margin-top: 12px; }
.sg-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 4px; }
.skill { display: grid; grid-template-columns: 170px 1fr 34px 150px 104px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(36,50,79,.5); }
.skill .nm { font-size: 13.5px; }
.skill.key .nm { font-weight: 700; }
.skill .star { color: var(--accent); }
.skill .bar { height: 8px; margin: 0; position: relative; }
.skill .bar .prog { position: absolute; top: 0; height: 100%; background: rgba(182,242,58,.35); }
.skill .vv { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pos-btn { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.pos-btn b { font-size: 20px; }
.pos-btn.sel { border-color: var(--accent); background: #1d2b12; }
.pos-btn:disabled { opacity: .45; cursor: not-allowed; }
.pill.CB, .pill.FB { background: #10324a; color: #7ccfff; } .pill.DM, .pill.CM, .pill.AM { background: #173d22; color: #8ef0a8; }
.pill.W, .pill.ST { background: #46171b; color: #ff9aa2; }
.pill.live { background: var(--red); color: #fff; }
.mrow { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(36,50,79,.6); font-size: 13.5px; }
.mrow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrow .t.r { text-align: right; }
.mrow.me { background: rgba(255,213,74,.08); border-radius: 8px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,93,93,.7); animation: livep 1.4s infinite; vertical-align: middle; }
@keyframes livep { 70% { box-shadow: 0 0 0 8px rgba(255,93,93,0); } 100% { box-shadow: 0 0 0 0 rgba(255,93,93,0); } }
.live-card { border-color: #5a2a33; }
.countdown { text-align: center; font-size: 15px; margin-top: 4px; }
.forecast { text-align: center; margin: 0 0 4px; }
.press { border-top: 1px solid var(--line, rgba(255,255,255,.08)); padding-top: 8px; margin-top: 8px; }
.press.card { border: 1px solid var(--gold, #ffd54a); }
.press-q { font-style: italic; margin: 4px 0 8px; }
.press-a { display: grid; gap: 6px; margin-bottom: 6px; }
.press-a .btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; white-space: normal; }
.press-a .btn small { opacity: .75; white-space: nowrap; font-size: 11px; }
.wx-tag { color: var(--muted, #9aa); font-weight: 600; }
.countdown b { color: var(--accent); font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 14px 0 4px; }
.seg button { flex: 1; background: transparent; border: 0; color: var(--muted); padding: 9px 6px; border-radius: 9px; font-weight: 600; }
.seg button.on { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.row.pw { gap: 6px; align-items: stretch; }
.row.pw input { min-width: 0; }
.create a { color: var(--accent); }
/* вхід через Google */
.or-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted); font-size: 12.5px; }
.or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; }
.g-btn:hover:not(:disabled) { background: #f4f6f8; }
.btn.big.g-btn { width: 100%; }
.btn.small.g-btn { gap: 6px; }
.btn.small.g-btn .g-logo { width: 14px; height: 14px; }
.g-logo { flex: none; vertical-align: -3px; }
/* живе зʼєднання */
.net { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--muted); }
.net.on { background: #4bd47b; box-shadow: 0 0 0 3px rgba(75, 212, 123, .18); }
.net.poll { background: var(--gold, #f5c84b); }
/* дивізіони */
.lg-seg { margin: 0 0 12px; flex-wrap: wrap; }
.lg-seg button { flex: 1 1 auto; white-space: nowrap; }
.ltable tr.zone-up td:first-child { box-shadow: inset 3px 0 0 #4bd47b; }
.ltable tr.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend i.zone-up { background: #4bd47b; }
.legend i.zone-down { background: var(--red); }
/* країни й єврокубки */
.cc-seg { margin-bottom: 8px; }
.cc-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.cc-seg .tl-sm { display: none; }
@media (max-width: 600px) { .cc-seg .tl { display: none; } .cc-seg .tl-sm { display: inline; } .cc-seg button { padding: 8px 4px; } }
.ltable tr.zone-cc td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.ltable tr.zone-ec td:first-child { box-shadow: inset 3px 0 0 #59b7ff; }
.legend i.zone-cc { background: var(--gold); }
.legend i.zone-ec { background: #59b7ff; }
/* світові рейтинги */
.rk-seg { margin-bottom: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .rk-seg .tl { display: none; } .rk-seg button { font-size: 18px; padding: 8px 4px; } }
/* меню рейтингів: розділи + підрозділи-чипи */
.rk-groups { margin: 0 0 8px; }
.rk-groups button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.rk-groups button .gi { font-size: 20px; line-height: 1; }
.rk-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rk-sub button { background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rk-sub button:hover { color: var(--text); }
.rk-sub button.on { background: var(--card2); color: var(--text); border-color: var(--gold); }
@media (max-width: 640px) { .rk-groups button { font-size: 11px; padding: 7px 2px; } .rk-groups button .gi { font-size: 18px; } }
/* календар сезону */
.cal-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.cal-row:last-child { border-bottom: 0; }
.cal-ic { width: 26px; text-align: center; font-size: 17px; flex: none; }
.cal-main { flex: 1; min-width: 0; }
.cal-lbl { font-size: 13px; font-weight: 600; }
.cal-res { text-align: right; flex: none; white-space: nowrap; }
.cal-row.free { opacity: .55; }
.cal-row.done .cal-lbl { color: var(--muted); }
.cal-row.live { background: rgba(255, 93, 93, .08); border-radius: 8px; }
.cal-row.next.has:not(.live) .cal-lbl { color: var(--text); }
/* рейтинг збірних */
.nt-form { display: inline-flex; gap: 2px; vertical-align: middle; }
.nt-form i { width: 15px; height: 15px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; color: #0b1220; }
.nt-form i.w { background: var(--green); } .nt-form i.d { background: #8d9bb8; } .nt-form i.l { background: var(--red); }
.nt-mv { font-size: 11px; font-weight: 700; margin-left: 4px; }
.nt-mv.up { color: var(--green); } .nt-mv.down { color: var(--red); }
.rk-table td { vertical-align: middle; padding-top: 7px; padding-bottom: 7px; }
.rk-table .rk-pos { width: 34px; text-align: center; font-weight: 800; color: var(--muted); font-size: 15px; }
.rk-table tr.rk-top .rk-pos { font-size: 20px; }
.rk-table tr.rk-top .rk-v { color: var(--gold); }
.rk-v { font-size: 18px; }
.rk-leader { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, rgba(212,160,23,.16), rgba(89,183,255,.08)), var(--card); }
.rk-big { font-size: 42px; filter: drop-shadow(0 4px 12px rgba(212,160,23,.5)); }
/* континенти й суперкубки */
.cont-seg { margin-bottom: 8px; flex-wrap: wrap; }
.cont-seg .tl-sm { display: none; }
@media (max-width: 600px) { .cont-seg .tl { display: none; } .cont-seg .tl-sm { display: inline; font-size: 12px; } .cont-seg button { padding: 8px 4px; } }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sup-one { padding: 8px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.sup-one.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.sup-one .ct { margin: 0; }
.sup-ic { background: linear-gradient(135deg, rgba(89, 183, 255, .10), rgba(212, 160, 23, .10)), var(--card); }
.cup-bracket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 6px; }
.cb-title { grid-row: 1; grid-column: var(--r); margin: 0 !important; }
.cb-col { grid-row: 2; grid-column: var(--r); display: flex; flex-direction: column; gap: 8px; justify-content: space-around; }
.cc-mini { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.ct { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.ct.mine { border-color: var(--gold); }
.ct-side { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 0; }
.ct-side .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-side.win { font-weight: 700; }
.ct-side.win b { color: var(--accent); }
.ct-side.lose { opacity: .55; }
.ct-side.me .t a, .ct-side.me .t { color: var(--gold); }
.ct-dot { display: inline-block; width: 8px; height: 11px; border-radius: 2px; border: 2px solid; margin-right: 6px; vertical-align: -1px; }
.ct-leg { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 4px; }
.ct-leg .btn.small { padding: 2px 7px; font-size: 11px; }
.cup-win { background: linear-gradient(90deg, rgba(255, 200, 60, .16), transparent); border: 1px solid rgba(255, 200, 60, .4); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cup-card { border-color: rgba(255, 200, 60, .45); }
button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
button.link:hover { color: var(--accent); text-decoration: underline; }
.cup-line { padding: 3px 0; }
@media (max-width: 720px) { .cup-bracket { grid-template-columns: 1fr !important; } .cb-title, .cb-col { grid-row: auto; grid-column: 1; } .cb-title { margin-top: 6px !important; } }
.seek { width: 100%; margin-top: 8px; accent-color: var(--accent); }
.news li.mine { color: var(--gold); } .news li.train { color: var(--accent); } .news li.match { color: #cfe0ff; } .news li.live { color: var(--red); }
[data-until] { font-variant-numeric: tabular-nums; }

/* create */
.create { max-width: 560px; margin: 6vh auto; padding: 0 16px; }
.create .card { padding: 22px; }
.create h1 { font-size: 30px; line-height: 1.15; }
.create h1 span { color: var(--accent); }
.pos-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.create { max-width: 680px; }
.pos-pick button { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; text-align: center; }
.pos-pick button.sel { border-color: var(--accent); background: #1d2b12; }
.pos-pick .ic { font-size: 22px; }
label.f { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.feature-list { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* match */
.match { max-width: 1280px; margin: 0 auto; padding: 10px 16px 30px; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #070d18; border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; }
.scoreboard .team { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; }
.scoreboard .team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard .team.away { justify-content: flex-end; }
.scoreboard .kit { width: 16px; height: 22px; border-radius: 4px; border: 2px solid; flex: none; }
.scoreboard .score { font-size: 30px; font-weight: 900; padding: 0 16px; text-align: center; font-variant-numeric: tabular-nums; }
.scoreboard .min { font-size: 12px; color: var(--accent); font-weight: 700; display: block; }
.match-body { display: grid; grid-template-columns: 1fr 300px; gap: 12px; margin-top: 10px; }
.pitch-wrap { position: relative; background: #133d1d; border-radius: 14px; overflow: hidden; aspect-ratio: 113 / 76; border: 1px solid var(--line); }
.pitch-wrap canvas { width: 100%; height: 100%; display: block; }
/* телефон вертикально — поле стоїть вертикально й влазить у висоту екрана (перемикається саме при повороті) */
@media (max-width: 640px) and (orientation: portrait) {
  .pitch-wrap { aspect-ratio: 76 / 113; width: min(100%, calc((100svh - 190px) * 76 / 113)); margin: 0 auto; }
}
/* телефон горизонтально — поле на всю висоту екрана, шапка трансляції компактна */
@media (orientation: landscape) and (max-height: 560px) {
  .match { padding: 6px 10px 20px; }
  .match > .row.between { margin-bottom: 4px !important; }
  .match .comp-line { display: none; }
  .scoreboard { padding: 4px 10px; }
  .scoreboard .score { font-size: 20px; }
  .match-body { margin-top: 6px; }
  .pitch-wrap { width: min(100%, calc((100svh - 16px) * 113 / 76)); margin: 0 auto; }
  .pitch-ctl { display: flex; }
}
/* кнопки поверх поля — лише на телефоні горизонтально (нижні кнопки тоді за межами екрана) */
.pitch-ctl { display: none; position: absolute; top: 6px; left: 6px; z-index: 4; gap: 6px; }
.pitch-ctl .btn { background: rgba(7,13,24,.62); backdrop-filter: blur(4px); min-width: 40px; }
.pitch-wrap { touch-action: manipulation; }
@media (orientation: landscape) and (max-height: 560px) { .pitch-ctl { display: flex; } }
.goal-flash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: clamp(36px, 9vw, 96px); font-weight: 900; letter-spacing: 2px; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.goal-flash.show { opacity: 1; animation: pop .6s ease-out; }
/* твій гол: 3D-фігурка святкує в кутку поля */
.cel-pop { position: absolute; left: 10px; bottom: 10px; width: clamp(104px, 22%, 200px); aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 35%, #2c3c55, #141c29 75%); border: 2px solid #ffd54a; box-shadow: 0 8px 26px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(24px) scale(.9); transition: opacity .3s, transform .4s cubic-bezier(.2,1.4,.4,1); z-index: 3; }
.cel-pop.show { opacity: 1; transform: none; }
.cel-pop canvas { width: 100%; height: 100%; display: block; }
@keyframes pop { from { transform: scale(.6); } to { transform: scale(1); } }
.controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.side .card { padding: 12px; }
.commentary { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow: auto; font-size: 13px; }
.commentary li { padding: 6px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.commentary li b { color: var(--accent); }
.commentary li.goal { color: var(--gold); font-weight: 700; }
.commentary li.added { color: #7fc8ff; font-style: italic; }
.commentary li.me { color: var(--gold); }
.statline { display: grid; grid-template-columns: 34px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; margin: 5px 0; }
.statline .split { height: 6px; display: flex; border-radius: 4px; overflow: hidden; background: var(--line); }
.statline .lbl { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 11px; margin-bottom: -4px; }
.me-live { display: flex; gap: 10px; align-items: center; }

.modal-bg { position: fixed; inset: 0; background: rgba(3,7,15,.72); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; }
/* «Ще»: на телефоні панель виїжджає знизу над меню; на ПК — розгортається під рядком вкладок */
.tab.more-btn { position: relative; }
.tab.more-btn.open { box-shadow: inset 0 0 0 1px var(--accent); }
.tab.more-btn.m-act { box-shadow: inset 0 2px 0 var(--accent); }
.more-h { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 10px 2px 6px; }
.more-h:first-of-type { margin-top: 2px; }
@media (min-width: 641px) { .tab.more-btn, .more-bg { display: none; } } /* на ПК видно все — «Ще» не потрібне */
.more-bg { position: fixed; inset: 0; z-index: 18; background: rgba(3,7,15,.55); animation: fadeIn .2s; }
.more-sheet { position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); margin: 0 8px; background: linear-gradient(180deg, #16263a, #0f1b2a); border: 1px solid var(--line); border-radius: 18px; padding: 8px 12px 14px; box-shadow: 0 -10px 40px rgba(0,0,0,.5); animation: sheetUp .25s cubic-bezier(.2,1.2,.4,1); touch-action: pan-x; }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 0 auto 10px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; color: var(--text); font-weight: 600; font-size: 13px; }
.more-item .ti { font-size: 24px; }
.more-item.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.more-bg.settled, .more-bg.settled .more-sheet { animation: none; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* сенсорні екрани: цілі під палець ≥ 40–44 px, без затримки й підсвітки тапу */
@media (hover: none), (pointer: coarse) {
  button, a, [data-act], input, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .ct-leg .btn.small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  .seg button { min-height: 40px; }
  .seg.wd-filter button, .seg.wd-view button { padding: 8px 12px; font-size: 13px; }
  .prem-card .chip { padding: 8px 12px; font-size: 13px; }
  .controls { gap: 8px; }
  .controls .btn.small { min-height: 44px; min-width: 44px; }
  .mo-opt { min-height: 76px; padding: 12px; }
  .live-bar .btn { min-height: 40px; }
}
/* модалку перемальовано оновленням стану — без повторних анімацій появи */
.modal.settled, .modal.settled * { animation: none !important; }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: #0a1222; border: 1px solid var(--accent); color: var(--text); padding: 10px 16px; border-radius: 12px; opacity: 0; transition: all .25s; pointer-events: none; z-index: 50; font-weight: 600; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .match-body { grid-template-columns: 1fr; }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commentary { max-height: 220px; }
}
@media (max-width: 640px) {
  .shell { padding: 10px 12px 96px; }
  .hero { grid-template-columns: auto 1fr; }
  .hero .ovr { grid-column: 2; justify-self: start; width: auto; height: auto; padding: 6px 10px; font-size: 18px; display: inline-flex; gap: 6px; align-items: baseline; }
  .tabs { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; background: rgba(9,15,28,.96); border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 10; backdrop-filter: blur(8px); }
  /* 5 головних вкладок + «Ще» — усе влазить без прокрутки, кожна кнопка — широка ціль під палець */
  .tabs { display: flex; flex-wrap: nowrap; gap: 2px; padding-left: 4px; padding-right: 4px; }
  .tab { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 0; font-size: 10px; letter-spacing: -.1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .tab .dot { position: absolute; top: 5px; right: calc(50% - 17px); margin: 0; } /* крапка біля іконки — не забирає ширину підпису */
  .tab.sec { display: none; }
  .tab.more-btn { display: flex; order: 9; }
  .tab[data-arg="home"] { order: 1; } .tab[data-arg="train"] { order: 2; } .tab[data-arg="league"] { order: 3; } .tab[data-arg="profile"] { order: 4; } .tab[data-arg="transfers"] { order: 5; }
  .tab .ti { font-size: 20px; line-height: 1; }
  .tab .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab.active { box-shadow: inset 0 2px 0 var(--accent); }
  .scoreboard .score { font-size: 24px; padding: 0 8px; }
  .scoreboard .team span { font-size: 13px; }
  .attr { grid-template-columns: 100px 1fr 34px; }
  .pos-pick { grid-template-columns: repeat(2, 1fr); }
  .skill { grid-template-columns: 1fr 34px auto; grid-template-areas: "nm vv btn" "bar bar bar" "meta meta meta"; row-gap: 4px; }
  .skill .nm { grid-area: nm; } .skill .vv { grid-area: vv; } .skill .btn { grid-area: btn; } .skill .bar { grid-area: bar; } .skill .meta { grid-area: meta; }
  .pos-grid { grid-template-columns: repeat(2, 1fr); }
  .hide-sm { display: none; }
}

/* ---------- ключовий момент ---------- */
#moment { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 12px; pointer-events: none; }
#moment.show { display: flex; justify-content: center; }
.mo-card { pointer-events: auto; width: min(560px, 100%); background: var(--panel, #12202b); border: 2px solid var(--accent); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.55); animation: moIn .25s ease-out; display: grid; gap: 8px; }
@keyframes moIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.mo-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1.05rem; }
.mo-left { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.mo-bar { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.mo-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: moBar linear forwards; }
@keyframes moBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mo-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mo-opt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px; min-height: 64px; }
.mo-opt b { font-size: 1rem; }
.mo-sk { font-size: .75rem; color: var(--cyan, #5ee); margin-top: auto; }
.freeze { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: none; background: rgba(0,0,0,.72); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: .9rem; white-space: nowrap; border: 1px solid var(--accent); }
.freeze.show { display: block; animation: moIn .2s ease-out; }

/* ---------- гардероб ---------- */
.avatar.av-btn { padding: 0; overflow: hidden; cursor: pointer; place-items: end center; }
.avatar.av-btn svg { display: block; }
.wd-stage { text-align: left; }
.wd-figure { display: grid; place-items: center; padding: 10px 0 4px; border-radius: 12px; margin: 4px 0 10px;
  background: radial-gradient(ellipse at 50% 92%, rgba(0,0,0,.35) 0 22%, transparent 23%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(75,212,123,.10)); }
.wd-figure svg { filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.center { text-align: center; }
.wd-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wd-cats button { background: var(--card2); color: var(--muted); border-radius: 18px; padding: 6px 11px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.wd-cats button.on { color: var(--text); border-color: var(--accent); }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.wd-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 10px 8px; border-radius: 12px; background: var(--card2); border: 2px solid transparent; cursor: pointer; transition: border-color .15s, transform .15s; }
.wd-item:hover { transform: translateY(-2px); }
.wd-item.tried { border-color: #59b7ff; }
.wd-item.on { border-color: var(--accent); }
.wd-item.locked { opacity: .75; }
.wd-item b { font-size: 13px; }
.wd-item .sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: block; }
.wd-item .sw.none { background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.15) 5px 7px); }
.wd-item .sw-av { display: block; height: 44px; overflow: hidden; }
.wd-item .sw-av svg { display: block; }
.mini-av { display: inline-block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 6px; background: var(--card2); }
.mini-av svg { display: block; }

/* ---------- гардероб v2: розділи, рідкість, мініпревʼю ---------- */
.wd-item { position: relative; border: 2px solid transparent; box-shadow: inset 0 3px 0 var(--rc, #8a96ad); padding-top: 18px; }
.wd-item .rar { position: absolute; top: 5px; left: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--rc); }
.wd-item .own { position: absolute; top: 4px; right: 7px; font-size: 11px; color: var(--accent); }
.wd-item .sw-av { height: auto; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.07), rgba(0,0,0,.15)); padding: 2px; }
.wd-item .sw-av svg { display: block; }
.wd-item .wd-d { font-size: 11px; line-height: 1.25; }
.wd-item .lock { color: var(--gold); font-size: 11.5px; }
.wd-item .cel-ic { font-size: 34px; line-height: 1; padding: 8px 0; }
.wd-item.tried { border-color: #59b7ff; }
.wd-item.on { border-color: var(--accent); }
.wd-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.wd-secs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.wd-secs button { background: transparent; color: var(--muted); padding: 7px 10px; font-weight: 700; font-size: 13px; white-space: nowrap; border-bottom: 2px solid transparent; border-radius: 0; }
.wd-secs button.on { color: var(--text); border-bottom-color: var(--accent); }
.seg.wd-filter, .seg.wd-view { display: inline-flex; margin: 0; }
.seg.wd-filter button, .seg.wd-view button { padding: 4px 9px; font-size: 12px; }
.seg.wd-view { margin-bottom: 4px; }
.seg.wd-view button, .seg.wd-filter button { white-space: nowrap; }
.wd-figure.face, .wd-figure.legs { padding: 6px 0; }
.wd-figure.face svg, .wd-figure.legs svg { max-width: 100%; height: auto; }
/* ---------- сезонна стеля OVR ---------- */
.skill .bar { position: relative; }
.skill .bar .capmark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--gold); border-radius: 1px; box-shadow: 0 0 4px rgba(255,213,74,.6); }
.cap-box { border-left: 3px solid var(--gold); }

/* ---------- контракти ---------- */
.modal.wide { max-width: 860px; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ch-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--card2); border-top: 4px solid var(--cc); }
.ch-card .row { gap: 10px; align-items: center; }
.ch-card .pill { align-self: flex-start; }
.ch-card table { width: 100%; }
.ch-card p { margin: 0; flex: 1; }
.renewal { border-left: 3px solid var(--accent); }

/* ---------- 3D-фігурка ---------- */
.wd-figure.is3d { display: block; padding: 0; overflow: hidden; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 35%, #3b4a5e 0%, #1c2533 70%); }
.wd-figure canvas.fig3d { display: block; width: 100%; height: auto; cursor: grab; }
.wd-figure canvas.fig3d:active { cursor: grabbing; }
.wd-figure.is3d::after { content: attr(data-hint); /* підпис — з data-hint (перекладається в JS) */ display: block; text-align: center; font-size: 11px; color: var(--muted); margin: -22px 0 6px; position: relative; pointer-events: none; }
.wd-item .sw-av img { display: block; width: 92px; height: 92px; object-fit: cover; }
.wd-item .snap-wait { display: block; width: 92px; height: 92px; border-radius: 8px; background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.03) 70%) 0 0 / 200% 100%; animation: snapShim 1.1s linear infinite; }
@keyframes snapShim { to { background-position: -200% 0; } }
.wd-item .sw-av { background: radial-gradient(circle at 50% 35%, #3b4a5e, #1c2533 75%); }
.snap { display: contents; }
.mini-av img { display: block; width: 26px; height: 26px; }
.avatar.av-btn img { display: block; width: 58px; height: 58px; }
.wd-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wd-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.wd-prog .bar { margin-top: 5px; }
@media (max-width: 720px) { .card h3 .seg.wd-filter { margin-top: 6px; } .card h3:has(.wd-filter) { flex-wrap: wrap; } }
.skill .vv .pp { display: block; font-size: 10px; font-weight: 600; color: var(--accent); line-height: 1; }

/* ---- Новачку ---- */
.guide-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 4px; }
.guide-tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 4px 6px; }
.guide-tbl td { padding: 6px; border-top: 1px solid var(--card2); vertical-align: top; }
.guide-tbl tr.best td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.guide-tbl tr.best td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.guide-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.guide-list li { margin-bottom: 8px; }
.guide-tip { background: var(--bg2); border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 8px; }
.guide-tip a { color: var(--accent); }

/* ---- Профіль клубу ---- */
.club-link { color: inherit; text-decoration: none; }
.club-link:hover { color: var(--accent); text-decoration: underline; }
.club-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 4px solid var(--cc);
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 22%, var(--card)) 0%, var(--card) 60%); }
.club-hero h2 { margin: 0 0 4px; font-size: 22px; }
.club-hero .ch-info { flex: 1; min-width: 200px; }
.ch-stats, .ch-season { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-stats > div, .ch-season > div { background: var(--bg2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 78px; }
.ch-stats b, .ch-season b { font-size: 16px; }
.ch-stats span, .ch-season span { font-size: 11px; color: var(--muted); }
.res-W { color: var(--accent); } .res-D { color: var(--gold); } .res-L { color: var(--red); }
@media (max-width: 700px) { .ch-stats > div { flex: 1 1 40%; } .club-hero h2 { font-size: 19px; } }

/* ---- Профіль гравця ---- */
.pl-hero .pl-av { width: 84px; height: 84px; flex: none; display: grid; place-items: center; overflow: hidden; }
.pl-hero .pl-av img, .pl-hero .pl-av svg { width: 100%; height: 100%; object-fit: cover; }
.pl-hero .pl-num { font-size: 30px; font-weight: 800; }
.pl-hero .crest { display: inline-grid; vertical-align: middle; font-size: 8px; border-width: 2px; }
.pl-hero .ovr { margin-left: auto; }
.pl-hero .ch-stats { flex-basis: 100%; }
.pl-skill { display: grid; grid-template-columns: minmax(130px, 1.3fr) 2fr 34px 34px; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.pl-skill .bar { height: 7px; }
.pl-skill b { text-align: right; }
.pl-skill small { font-size: 11.5px; font-weight: 700; text-align: right; }
.pl-pos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pl-pos > div { background: var(--bg2); border-radius: 8px; padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; }
.pl-pos > div.sel { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 700px) { .pl-skill { grid-template-columns: 1.4fr 1.2fr 30px 30px; font-size: 12.5px; } .pl-hero .pl-av { width: 64px; height: 64px; } }

/* ---- Трофеї гравця ---- */
.tro-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tro { background: linear-gradient(160deg, #3a2f0f, var(--bg2)); border: 1px solid #6b5520; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; min-width: 78px; }
.tro .ti { font-size: 26px; line-height: 1.1; }
.tro b { color: var(--gold); font-size: 15px; }
.tro span:last-child { font-size: 11px; color: var(--muted); text-align: center; }
.tro-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.tro-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--card2); font-size: 13.5px; }
.tro-list .ti { font-size: 20px; width: 26px; text-align: center; }

/* ===================== Анімації та ефекти (v2) ===================== */
@media (prefers-reduced-motion: no-preference) {
  /* поява вкладки — лише при зміні вкладки */
  #view.view-enter > * { animation: viewIn .32s cubic-bezier(.2,.8,.2,1) both; }
  #view.view-enter > * > .card, #view.view-enter > * > .col > .card { animation: viewIn .38s cubic-bezier(.2,.8,.2,1) both; }
  #view.view-enter > * > :nth-child(2), #view.view-enter > * > .col:nth-child(2) > .card { animation-delay: .05s; }
  #view.view-enter > * > :nth-child(3) { animation-delay: .1s; }
  #view.view-enter > * > :nth-child(4) { animation-delay: .15s; }
  .modal.modal-enter { animation: modalIn .28s cubic-bezier(.2,.9,.25,1.2) both; }
  .modal-bg:has(.modal-enter) { animation: fadeIn .2s ease-out both; }
}
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* кнопки, вкладки, картки: живіший відгук */
.btn { transition: transform .12s cubic-bezier(.3,1.6,.5,1), background .15s, box-shadow .2s, border-color .2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.96); box-shadow: none; }
.btn.primary { box-shadow: 0 0 0 0 rgba(182,255,59,0); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 4px 18px rgba(182,255,59,.28); }
.tab { position: relative; transition: color .2s, background .2s; }
.tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.tab .ti { display: inline-block; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.tab:hover .ti, .tab.active .ti { transform: scale(1.18) rotate(-6deg); }
.tab .dot { animation: dotPulse 1.6s infinite; }
@keyframes dotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(255,93,93,.15); } }
.card { transition: border-color .2s, box-shadow .25s; }
.card:hover { border-color: #2a3c63; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.meter .bar i { transition: width .6s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; }
.meter .bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: translateX(-100%); animation: shimmer 3.2s infinite; }
@keyframes shimmer { 60%,100% { transform: translateX(100%); } }
.slot [data-prog-start] { background-image: linear-gradient(45deg, rgba(255,255,255,.14) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.14) 75%, transparent 75%); background-size: 16px 16px; animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 16px 0; } }
.toast { transition: opacity .25s, transform .35s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.snd-btn { margin-left: 6px; padding: 3px 8px !important; font-size: 14px !important; vertical-align: middle; }
.av-btn { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.av-btn:hover { transform: scale(1.06) rotate(-2deg); }
/* значок OVR: щит із кольором рівня, блиск і смужка до стелі сезону */
.ovr { --t1: #c98a4b; --t2: #7a4a22; --ti: #fff4e6; --tg: rgba(201,138,75,.45);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 64px; height: 72px; padding: 0 0 8px; border-radius: 0; background: none; color: var(--ti); font-weight: 900; line-height: 1; isolation: isolate;
  filter: drop-shadow(0 4px 10px var(--tg)); }
.ovr::before { content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(50% 0, 100% 13%, 100% 70%, 50% 100%, 0 70%, 0 13%);
  background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.45), transparent 45%), linear-gradient(160deg, var(--t1), var(--t2)); }
.ovr::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: polygon(50% 0, 100% 13%, 100% 70%, 50% 100%, 0 70%, 0 13%);
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 160% 0;
  animation: ovrShine 6s ease-in-out infinite; }
@keyframes ovrShine { 0%, 70% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
.ovr .ovr-n { font-size: 27px; letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.ovr small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; opacity: .85; margin-top: 2px; }
.ovr .ovr-cap { position: absolute; left: 14px; right: 14px; bottom: 15px; height: 3px; border-radius: 3px; background: rgba(0,0,0,.3); overflow: hidden; }
.ovr .ovr-cap b { display: block; height: 100%; background: var(--ti); border-radius: 3px; }
.ovr-bronze { --t1: #d39457; --t2: #6e4020; --ti: #fff1e0; --tg: rgba(211,148,87,.4); }
.ovr-silver { --t1: #e4ebf2; --t2: #7d8b99; --ti: #17202b; --tg: rgba(200,214,228,.35); }
.ovr-gold { --t1: #ffe27a; --t2: #b8860b; --ti: #2a1d00; --tg: rgba(255,210,70,.45); }
.ovr-elite { --t1: #b6ff3b; --t2: #1f8f4e; --ti: #06210f; --tg: rgba(182,255,59,.45); }
.ovr-legend { --t1: #d9a7ff; --t2: #5a2bb5; --ti: #fff; --tg: rgba(170,110,255,.55); }
.ovr-silver .ovr-cap, .ovr-gold .ovr-cap, .ovr-elite .ovr-cap { background: rgba(0,0,0,.18); }
@media (max-width: 640px) {
  .hero .ovr { grid-column: 2; justify-self: start; width: 50px; height: 56px; padding: 0 0 6px; display: flex; gap: 0; align-items: center; }
  .hero .ovr .ovr-n { font-size: 21px; }
  .hero .ovr small { font-size: 8px; }
  .hero .ovr .ovr-cap { left: 11px; right: 11px; bottom: 12px; }
}
/* шар плаваючих підказок і спалах при рості OVR (поза сторінкою — перемальовування їх не обриває) */
#cueLayer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.float-cue { position: fixed; transform: translate(-50%, -100%); pointer-events: none; font-weight: 900; font-size: 15px; color: var(--accent); text-shadow: 0 2px 10px rgba(0,0,0,.7); white-space: nowrap; animation: floatUp 2.4s ease-out forwards; }
.float-cue.neg { color: var(--red); }
.float-cue.cue-lvl { color: var(--gold); font-size: 16px; }
.float-cue.cue-ovr { font-size: 17px; color: #eaffc2; }
@keyframes floatUp { 0% { opacity: 0; translate: 0 10px; } 15% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -28px; } }
.ovr-burst { position: fixed; display: grid; place-items: center; }
.ovr-burst .ovr { position: absolute; inset: 0; width: 100%; height: 100%; animation: ovrBurst 1.2s cubic-bezier(.3,1.5,.5,1) forwards; }
.ovr-burst .ob-ring { position: absolute; left: 50%; top: 45%; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--accent); transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: obRing 1s ease-out forwards; }
.ovr-burst .ob-ring.r2 { animation-delay: .18s; border-color: var(--gold); }
@keyframes ovrBurst { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.4); filter: brightness(1.6) drop-shadow(0 0 18px var(--tg)); } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes obRing { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } }

/* ----- матч ----- */
.pitch-wrap { box-shadow: 0 10px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04); background: #0d1a24; }
.scoreboard { background: linear-gradient(180deg, #0b1424, #060b15); box-shadow: 0 6px 24px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.scoreboard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%); animation: sweep 6s infinite; pointer-events: none; }
@keyframes sweep { 0% { transform: translateX(-100%); } 40%,100% { transform: translateX(100%); } }
.scoreboard .kit { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#sc { display: inline-block; }
#sc.bump { animation: scBump .9s cubic-bezier(.3,1.6,.5,1); }
@keyframes scBump { 0% { transform: scale(1); } 25% { transform: scale(1.45); color: var(--gold); text-shadow: 0 0 24px rgba(255,213,74,.7); } 100% { transform: scale(1); } }
.goal-flash { flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 4px; }
.goal-flash span { display: block; letter-spacing: 6px; }
.goal-flash small { font-size: clamp(14px, 2.4vw, 22px); letter-spacing: 3px; opacity: .9; font-weight: 800; }
.goal-flash.show span { animation: goalText 2.4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes goalText { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 18% { transform: scale(1.15) rotate(2deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 85% { opacity: 1; letter-spacing: 6px; } 100% { opacity: 0; letter-spacing: 18px; } }
.board4 { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; min-width: 74px; padding: 6px 10px 4px; background: #111; border: 2px solid #333; border-radius: 6px; font-family: ui-monospace, Consolas, monospace; color: #ff3b30; text-shadow: 0 0 10px rgba(255,59,48,.7); transform: translateY(130%) rotate(-4deg); opacity: 0; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .3s; pointer-events: none; }
.board4 small { font-size: 9px; color: #9aa; text-shadow: none; letter-spacing: 1px; font-family: system-ui; }
.board4 b { font-size: 30px; line-height: 1; animation: ledBlink 1s steps(2) infinite; }
.board4.show { transform: none; opacity: 1; }
@keyframes ledBlink { 50% { opacity: .55; } }
.ev-banner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(0); display: flex; flex-direction: column; align-items: center; padding: 10px; background: linear-gradient(90deg, transparent, rgba(5,10,20,.82) 20%, rgba(5,10,20,.82) 80%, transparent); color: #fff; pointer-events: none; opacity: 0; transition: transform .3s cubic-bezier(.2,1.2,.4,1), opacity .25s; }
.ev-banner b { font-size: clamp(18px, 3.4vw, 32px); letter-spacing: 4px; font-weight: 900; }
.ev-banner span { font-size: clamp(14px, 2.4vw, 22px); color: var(--accent); font-weight: 800; }
.ev-banner.show { transform: translateY(-50%) scaleY(1); opacity: 1; }
.commentary li.new { animation: commIn .4s cubic-bezier(.2,1.2,.4,1); }
.commentary li.goal.new { animation: commIn .4s cubic-bezier(.2,1.2,.4,1), goalRow 1.6s ease-out; }
@keyframes commIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes goalRow { 0%,40% { background: rgba(255,213,74,.18); } 100% { background: transparent; } }
.commentary li.red { color: #ff7a72; }
.commentary li.yel span { color: #ffe680; }
.commentary li.var span { color: #8fd3ff; }
.ev-ic { font-style: normal; margin-right: 6px; }
.freeze { backdrop-filter: blur(4px); box-shadow: 0 0 0 0 rgba(182,255,59,.5); }
.freeze.show { animation: moIn .2s ease-out, freezePulse 1.4s infinite; }
@keyframes freezePulse { 70% { box-shadow: 0 0 0 10px rgba(182,255,59,0); } 100% { box-shadow: 0 0 0 0 rgba(182,255,59,0); } }
.statline .split i { transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ----- ключовий момент ----- */
#moment.show::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at bottom, rgba(182,255,59,.10), transparent 60%); pointer-events: none; animation: fadeIn .3s; }
.mo-card { position: relative; animation: moIn2 .42s cubic-bezier(.2,1.3,.4,1) both; background: linear-gradient(180deg, #16263a, #0f1b2a); }
@keyframes moIn2 { 0% { transform: translateY(60px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mo-card::before { content: ''; position: absolute; inset: -2px; border-radius: 15px; padding: 2px; background: conic-gradient(from var(--ang, 0deg), var(--accent), transparent 30%, transparent 70%, var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 2s linear infinite; pointer-events: none; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --ang: 360deg; } }
.mo-opts .mo-opt { animation: optIn .35s cubic-bezier(.2,1.3,.4,1) both; transition: transform .12s, border-color .15s, background .15s; }
.mo-opts .mo-opt:nth-child(2) { animation-delay: .05s; } .mo-opts .mo-opt:nth-child(3) { animation-delay: .1s; } .mo-opts .mo-opt:nth-child(4) { animation-delay: .15s; }
@keyframes optIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mo-opt:hover { border-color: var(--accent); background: #1f3350; transform: translateY(-2px); }
.mo-opt.chosen { background: var(--accent); color: var(--accent-ink); transform: scale(1.05); }
.mo-opt.chosen .muted, .mo-opt.chosen .mo-sk { color: var(--accent-ink); }
.mo-card.done .mo-opt:not(.chosen) { opacity: .35; transform: scale(.96); }
.mo-card.urgent { border-color: var(--red); animation: urgent .5s ease-in-out infinite alternate; }
.mo-card.urgent .mo-left { color: var(--red); animation: tickPop 1s infinite; }
.mo-card.urgent .mo-bar i { background: var(--red); }
@keyframes urgent { from { box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 0 rgba(255,93,93,.0); } to { box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 22px 2px rgba(255,93,93,.45); } }
@keyframes tickPop { 0% { transform: scale(1.35); } 30%,100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ===================== Тренування (v2) ===================== */
.slot.active { display: flex; gap: 12px; align-items: flex-start; position: relative; overflow: hidden; }
.slot.active::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(182,255,59,.06) 50%, transparent 60%); animation: sweep 3.5s infinite; pointer-events: none; }
.slot.slot-new { animation: slotIn .55s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes slotIn { 0% { opacity: 0; transform: scale(.85) translateY(10px); box-shadow: 0 0 0 0 rgba(182,255,59,.6); } 60% { box-shadow: 0 0 0 10px rgba(182,255,59,0); } 100% { opacity: 1; transform: none; } }
.slot.ready { border-color: var(--accent); box-shadow: 0 0 18px rgba(182,255,59,.25); }
.slot.ready .ring-ic { animation: readyBounce .8s infinite; }
@keyframes readyBounce { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-60%) scale(1.15); } }
.ring { position: relative; width: 58px; height: 58px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .rb { stroke: rgba(255,255,255,.08); }
.ring .rf { stroke: url(#none); stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 4px rgba(182,255,59,.5)); }
.ring-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 22px; animation: workout 1.1s ease-in-out infinite; }
@keyframes workout { 0%,100% { transform: translate(-50%,-50%) scale(1) rotate(0); } 30% { transform: translate(-50%,-56%) scale(1.08) rotate(-8deg); } 60% { transform: translate(-50%,-48%) scale(.96) rotate(6deg); } }
.slot .lvl { display: inline-block; min-width: 26px; padding: 0 6px; border-radius: 6px; background: rgba(182,255,59,.14); color: var(--accent); font-variant-numeric: tabular-nums; text-align: center; }
.slot-left { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cyan, #8fe3ff); }
.gain-bar { position: relative; height: 9px; margin: 8px 0 4px; background: rgba(255,255,255,.07); border-radius: 5px; overflow: visible; }
.gain-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px; }
.gain-bar .now { background: linear-gradient(90deg, #59b7ff, var(--accent)); }
.gain-bar .exp { background: rgba(182,255,59,.55); border-radius: 0; animation: expPulse 1.6s ease-in-out infinite; }
.gain-bar .exp2 { background: repeating-linear-gradient(45deg, rgba(182,255,59,.35) 0 4px, rgba(182,255,59,.12) 4px 8px); border-radius: 0 5px 5px 0; }
@keyframes expPulse { 50% { opacity: .55; } }
.lvlup-mark { position: absolute; right: -4px; top: -9px; font-size: 12px; color: var(--gold); animation: readyBounce2 1s infinite; }
@keyframes readyBounce2 { 50% { transform: translateY(-3px); } }
.slot.empty { gap: 12px; justify-content: flex-start; }
.slot-plus { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font-size: 24px; color: var(--muted); animation: plusPulse 2.2s ease-in-out infinite; }
@keyframes plusPulse { 50% { border-color: var(--accent); color: var(--accent); transform: scale(1.06); } }
/* список навичок */
.skill { transition: background .15s; border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.skill:hover { background: rgba(255,255,255,.03); }
.skill .sk-ic { display: inline-block; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.skill:hover .sk-ic { transform: scale(1.25) rotate(-8deg); }
.skill .bar i { transition: width .7s cubic-bezier(.2,.8,.2,1); }
#view.view-enter .skill .bar i { animation: barGrow .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes barGrow { from { width: 0; } }
.skill.busy { background: linear-gradient(90deg, rgba(89,183,255,.10), transparent 70%); }
.skill.busy .sk-ic { animation: workout2 1.1s ease-in-out infinite; }
@keyframes workout2 { 30% { transform: translateY(-3px) rotate(-8deg); } 60% { transform: translateY(1px) rotate(6deg); } }
.skill.capped { opacity: .6; }
.best-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 10px; background: rgba(255,213,74,.15); color: var(--gold); margin-left: 4px; vertical-align: middle; animation: dotPulse 2.4s infinite; }
.busy-btn { color: var(--cyan, #8fe3ff) !important; opacity: 1 !important; border-color: rgba(89,183,255,.4) !important; }
.btn.launch { animation: launch .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes launch { 30% { transform: scale(.88); } 70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(182,255,59,.2); } }
/* результат заняття */
#trainRes { position: fixed; left: 0; right: 0; top: 18px; z-index: 70; display: flex; justify-content: center; pointer-events: none; padding: 0 12px; }
#trainRes .tr-card { pointer-events: auto; position: relative; display: flex; gap: 12px; align-items: center; width: min(420px, 100%); padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #16263a, #0f1b2a); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.5); transform: translateY(-140%); opacity: 0; transition: transform .5s cubic-bezier(.2,1.3,.4,1), opacity .3s; cursor: pointer; }
#trainRes.show .tr-card { transform: none; opacity: 1; }
#trainRes .tr-card.up { border-color: var(--gold); box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,213,74,.35); }
.tr-ic { font-size: 30px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; background: rgba(182,255,59,.12); flex: none; }
.tr-card.up .tr-ic { background: rgba(255,213,74,.18); animation: ovrPop 1s cubic-bezier(.3,1.6,.5,1) .3s; }
.tr-t { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 800; }
.tr-card.up .tr-t { color: var(--gold); }
.tr-lvl b { color: var(--gold); font-size: 1.15em; }
.gain-bar.big { height: 11px; }
.gain-bar .now.anim { width: var(--to); animation: gainFill 1.2s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes gainFill { from { width: var(--from); } to { width: var(--to); } }
.confetti { position: absolute; left: 50%; top: 50%; width: 8px; height: 5px; border-radius: 1px; pointer-events: none; animation: confetti 1.3s cubic-bezier(.15,.7,.3,1) both; }
@keyframes confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--r)); opacity: 0; } }

/* ===================== Підсумок матчу ===================== */
.msum h4 { margin: 14px 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ms-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.ms-team { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; }
.ms-score { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ms-score b { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; animation: scBump .8s cubic-bezier(.3,1.6,.5,1) .15s both; }
.ms-res { font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 2px 10px; border-radius: 10px; }
.ms-res.win { background: rgba(75,212,123,.18); color: #4bd47b; } .ms-res.draw { background: rgba(255,213,74,.15); color: var(--gold); } .ms-res.loss { background: rgba(255,93,93,.15); color: var(--red); }
.ms-rate { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
.ms-ring { position: relative; width: 78px; height: 78px; flex: none; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(var(--rc) var(--deg), rgba(255,255,255,.08) 0); animation: ringIn 1s cubic-bezier(.2,.8,.2,1) both; }
.ms-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.ms-ring b, .ms-ring small { position: relative; line-height: 1; }
.ms-ring b { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--rc); }
.ms-ring small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ms-ring.r-hi { --rc: #4bd47b; } .ms-ring.r-mid { --rc: var(--gold); } .ms-ring.r-lo { --rc: var(--red); }
@property --deg { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ringIn { from { --deg: 0deg; transform: scale(.7); opacity: 0; } }
.ms-motm { display: inline-block; font-weight: 900; color: #1a1300; background: var(--gold); padding: 3px 10px; border-radius: 10px; margin-bottom: 4px; animation: ovrPop 1s cubic-bezier(.3,1.6,.5,1) .4s both; }
.ms-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.ms-stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; animation: viewIn .35s cubic-bezier(.2,1.2,.4,1) both; }
.ms-stat:nth-child(n+4) { animation-delay: .08s; } .ms-stat:nth-child(n+7) { animation-delay: .16s; }
.ms-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ms-stat span { font-size: 11px; color: var(--muted); }
.ms-ovr { font-size: 13px; color: var(--muted); } .ms-ovr b { color: var(--accent); font-size: 16px; }
.ms-xps { display: grid; gap: 6px; }
.ms-xp { display: grid; grid-template-columns: minmax(150px, 1.2fr) 1fr 52px; gap: 8px; align-items: center; font-size: 13px; animation: viewIn .35s ease-out both; animation-delay: calc(var(--i) * 70ms + .2s); }
.ms-xp .ms-bar { height: 8px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.ms-xp .ms-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #59b7ff, var(--accent)); border-radius: 4px; animation: xpFill .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + .35s); }
@keyframes xpFill { from { width: 0; } }
.ms-d { text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.ms-xp.up { background: rgba(255,213,74,.08); border-radius: 8px; padding: 3px 6px; margin: 0 -6px; }
.ms-xp.up .ms-bar i { background: linear-gradient(90deg, var(--gold), #fff3b0); }
.ms-lvl { color: var(--gold); font-weight: 900; font-size: 12px; }
.ms-rew { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; margin-top: 12px; }
.ms-rew div { display: flex; justify-content: space-between; gap: 8px; background: var(--bg2); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ms-rew b { font-variant-numeric: tabular-nums; color: var(--accent); }
.ms-rew b.neg { color: #ff8a80; } .ms-rew b.pos { color: #4bd47b; }
.ms-coach { margin: 12px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--bg2); border-radius: 8px; font-style: italic; }
@media (max-width: 520px) { .ms-xp { grid-template-columns: 1fr 52px; } .ms-xp .ms-bar { grid-column: 1 / -1; grid-row: 2; } }
.ms-team.mine span::after { content: ' (' attr(data-you) ')'; color: var(--gold); font-size: 11px; } /* підпис — з data-you (перекладається в JS) */

/* ===================== Панель звуку ===================== */
#sndPanel { position: fixed; z-index: 80; width: 280px; background: linear-gradient(180deg, #16263a, #0f1b2a); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5); display: none; gap: 10px; }
#sndPanel.show { display: grid; animation: modalIn .22s cubic-bezier(.2,1.2,.4,1); }
.snd-mute { width: 100%; }
.snd-row { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; }
.snd-row output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.snd-row input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255,255,255,.12) var(--p)); outline: none; }
.snd-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.snd-row input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: pointer; }
.snd-row input:disabled { opacity: .4; }

/* журнал матчів у профілі гравця */
.pm-list { display: flex; flex-direction: column; gap: 4px; }
.pm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--card2); font-size: 13px; }
.pm-res { min-width: 38px; text-align: center; font-weight: 800; border-radius: 6px; padding: 3px 0; font-size: 12px; }
.pm-res.w { background: rgba(70,200,120,.22); color: #6fe39b; }
.pm-res.d { background: rgba(200,200,200,.15); color: #cfd6e2; }
.pm-res.l { background: rgba(240,90,90,.2); color: #ff8a8a; }
.pm-mid { flex: 1; min-width: 0; }
.pm-mid > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.pm-st { font-size: 12px; white-space: nowrap; }
.comp-line { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--gold, #ffd54a); margin: -2px 0 6px; min-height: 18px; }

/* трансферні пропозиції */
.offer2 { border-radius: 12px; padding: 12px; margin: 10px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--oc) 18%, var(--card2)), var(--card2) 60%); border: 1px solid color-mix(in srgb, var(--oc) 45%, transparent); }
.o2-head { display: flex; align-items: center; gap: 10px; }
.o2-title { flex: 1; min-width: 0; }
.o2-title b { font-size: 15px; }
.o2-role { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); white-space: nowrap; }
.o2-role.star { background: rgba(120,220,120,.18); color: #8ff0a4; }
.o2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.o2-grid > div { background: rgba(0,0,0,.18); border-radius: 9px; padding: 7px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.o2-grid span { font-size: 10.5px; color: var(--muted, #8b97ab); text-transform: uppercase; letter-spacing: .03em; }
.o2-grid b { font-size: 15px; }
.o2-grid i { font-style: normal; font-size: 11px; color: var(--muted, #8b97ab); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o2-grid i.up { color: #6fe39b; } .o2-grid i.down { color: #ff8a8a; }
.o2-comp { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; padding: 6px 9px; border-radius: 9px; background: rgba(0,0,0,.18); border-left: 3px solid #999; }
.o2-comp.good { border-color: #4fd17d; } .o2-comp.mid { border-color: #f0c040; } .o2-comp.bad { border-color: #ff7070; }
@media (max-width: 520px) { .o2-grid { grid-template-columns: 1fr 1fr; } }
.offer-banner { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 12px; border: 1px solid rgba(120,200,255,.45); background: linear-gradient(90deg, rgba(60,140,255,.18), var(--card)); animation: obPulse 2.4s ease-in-out infinite; }
.offer-banner .crest { display: inline-flex; vertical-align: middle; margin-right: 3px; font-size: 8px; }
.ob-ic { font-size: 30px; }
@keyframes obPulse { 50% { box-shadow: 0 0 0 3px rgba(90,170,255,.25); } }
.offer-pop { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(320px, calc(100vw - 32px)); padding: 12px; border-radius: 14px; background: var(--card, #1b2333); border: 1px solid rgba(120,200,255,.55); box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: auto; animation: opIn .35s ease-out; }
.op-top { font-size: 12px; font-weight: 800; color: #8fd0ff; margin-bottom: 8px; padding-right: 22px; cursor: pointer; }
.op-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #2f7fd0; color: #fff; text-align: center; }
.op-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: inherit; opacity: .6; font-size: 14px; cursor: pointer; padding: 2px 4px; }
.op-x:hover { opacity: 1; }
.op-list { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.offer-pop { cursor: pointer; }
@keyframes opIn { from { transform: translateY(30px); opacity: 0; } }
.ltable tr.zone-tc td:first-child { box-shadow: inset 3px 0 0 #b98cff; }
.legend i.zone-tc { background: #b98cff; }
.coef-table td, .coef-table th { padding: 5px 6px; }
.coef-table .q { display: inline-block; min-width: 22px; text-align: center; border-radius: 6px; padding: 1px 5px; font-weight: 700; font-size: 12px; background: rgba(255,255,255,.06); }

/* ---------- паки гардеробу ---------- */
.wd-item .sw-av.full img, .pk-card .sw-av.full img { height: 120px; object-fit: contain; }
.wd-packs .pk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: var(--card2); border: 2px solid color-mix(in srgb, var(--pk) 55%, transparent); }
.pk.empty { opacity: .5; border-color: transparent; }
.pk b { font-size: 12.5px; }
.pk .small { font-size: 11px; line-height: 1.25; }
.pk-box { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; font-size: 28px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pk) 70%, #fff), color-mix(in srgb, var(--pk) 60%, #000)); box-shadow: 0 4px 14px color-mix(in srgb, var(--pk) 40%, transparent); }
.pk:not(.empty) .pk-box { animation: pkWiggle 2.4s ease-in-out infinite; }
.pk-box i { position: absolute; right: -6px; top: -6px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--red, #e5484d); color: #fff; border-radius: 9px; padding: 1px 5px; }
.pk-box.sm { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; flex: none; }
.pk-note { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 10px 0; border-radius: 10px; background: color-mix(in srgb, var(--pk) 14%, var(--card2)); font-size: 13px; }
@keyframes pkWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(7deg); } 95% { transform: rotate(-4deg); } }
.pk-reveal { text-align: center; }
.pk-reveal h3 { justify-content: center; }
.pk-burst { font-size: 54px; line-height: 1; margin: 4px auto 6px; animation: pkPop .6s cubic-bezier(.2, 1.6, .4, 1) both; filter: drop-shadow(0 0 18px var(--pk)); }
.pk-cards { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pk-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 150px; padding: 22px 10px 12px; border-radius: 14px; background: var(--card2); border: 2px solid var(--rc); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 35%, transparent); animation: pkFlip .55s ease-out both; }
.pk-card .rar { position: absolute; top: 6px; left: 0; right: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rc); }
.pk-card .sw-av { display: block; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3b4a5e, #1c2533 75%); }
.pk-card .sw-av img { display: block; width: 112px; height: 112px; object-fit: cover; }
.pk-card .cel-ic { font-size: 44px; padding: 14px 0; }
@keyframes pkPop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pkFlip { from { transform: perspective(500px) rotateY(90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) { .wd-packs .pk-row { gap: 5px; } .pk-box { width: 42px; height: 42px; font-size: 22px; } .pk-card { width: 132px; } }
.pk-burst .pk-box { width: 84px; height: 84px; font-size: 46px; border-radius: 18px; margin: 0 auto; }

/* прапори */
.flag { display: inline-block; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); flex: none; }
.flag-txt { padding: 0 3px; line-height: 1.5; background: var(--card2); color: var(--muted); font-weight: 700; }

/* емблеми клубів */
.crest { border: none !important; background: none !important; border-radius: 0; padding: 0; overflow: visible; font-size: 0 !important; }
.crest .badge { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.mini-badge { display: inline-flex; vertical-align: -3px; margin-right: 5px; flex: none; }
.mini-badge .badge { display: block; }
.mini-badge.r { margin: 0 0 0 5px; }

/* тренери: рейтинг і довіра керівництва */
.coach-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 8px; }
.coach-stats > div { background: var(--card2); border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; gap: 1px; }
.coach-stats span { font-size: 11px; color: var(--muted); }
.coach-stats b { font-size: 16px; }
.coach-stats i { font-style: normal; font-size: 11px; color: var(--muted); }
.board-line { margin: 4px 0 10px; }
.board-line .bar, .hot-row .bar { position: relative; margin-top: 4px; }
.board-line .bar s { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--red); opacity: .8; text-decoration: none; }
.hot-row { margin-bottom: 9px; }
.sack-row { padding: 5px 0; border-bottom: 1px solid var(--line); }
.sack-row s { color: var(--muted); }

/* плашка «наживо» на будь-якій вкладці */
.live-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 15; /* над нижнім меню (10), але під модалками (20) */ display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; max-width: calc(100vw - 24px); width: max-content;
  background: color-mix(in srgb, var(--card) 92%, #ff3b3b); border: 1px solid rgba(255, 80, 80, .55); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 3px rgba(255,60,60,.12); cursor: pointer; animation: lbIn .35s ease-out; }
.live-bar.slim { cursor: default; background: var(--card); border-color: var(--line); }
.live-bar .lb-teams { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.live-bar .lb-what, .live-bar .lb-left { white-space: nowrap; }
.live-bar:hover { box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 3px rgba(255,60,60,.25); }
.live-bar.settled, .live-bar.settled * { animation: none !important; }
.live-bar.settled .live-dot { animation: livep 1.4s infinite !important; }
@keyframes lbIn { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.live-bar .lb-min { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 14px; }
@media (max-width: 560px) { .live-bar .lb-what { display: none; } .live-bar { bottom: 10px; } }
/* на телефоні меню закріплене внизу — плашка стоїть над ним, а не на підписах вкладок */
@media (max-width: 640px) { .live-bar { bottom: calc(78px + env(safe-area-inset-bottom)); } .shell { padding-bottom: 150px; } }
.co-tr, .co-st { padding: 5px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.co-hero h2 { font-size: 20px; }

/* 💠 Персональний тренер (підписка) */
.prem-card .gems { font-weight: 700; color: #7fd8ff; }
.prem-card.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prem-card .switch-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.prem-card .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prem-card .chip { border: 1px solid var(--line, #2a3550); background: transparent; color: inherit; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.prem-card .chip.sel { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
.prem-card .chip b { color: var(--accent); }
.live-bar .lb-min { color: var(--accent); }

/* 📰 Газета */
.paper { background: linear-gradient(180deg, color-mix(in srgb, #f3ead7 6%, var(--card, #141c2e)), var(--card, #141c2e)); }
.paper-mast { text-align: center; border-bottom: 3px double color-mix(in srgb, var(--text, #e8eefc) 45%, transparent); padding-bottom: 8px; margin-bottom: 12px; }
.paper-mast .pm-title { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 700; letter-spacing: .5px; }
.paper-mast .pm-sub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
.paper-hl { border-left: 4px solid var(--accent); padding: 4px 0 4px 12px; margin: 6px 0 12px; }
.paper-hl.upset, .paper-hl.rout { border-left-color: var(--red, #ff5d5d); }
.paper-hl.hat { border-left-color: var(--gold, #ffd54a); }
.paper-hl .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.paper-hl h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 1.2; margin: 4px 0 0; }
.paper-lead { font-family: Georgia, serif; font-size: 15px; margin: 0 0 8px; }
.paper-blurbs p { margin: 2px 0; font-size: 13px; }
.paper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 22px; margin-top: 12px; }
.paper-col h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line, #2a3550); padding-bottom: 4px; }
.paper-res { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line, #2a3550); font-size: 13px; }
.paper-res > span:nth-child(3) { text-align: right; }
.paper-res > div.small { grid-column: 1 / -1; }
.paper-tbl { width: 100%; font-size: 13px; border-collapse: collapse; }
.paper-tbl td { padding: 3px 4px; }
.paper-list { margin: 0; padding-left: 18px; font-size: 13px; }
.paper-list li { margin: 3px 0; }
.paper-list li.bad { color: var(--red, #ff7a7a); }
@media (max-width: 560px) { .paper-mast .pm-title { font-size: 22px; } .paper-hl h2 { font-size: 19px; } }
.paper-col.wide { grid-column: span 2; }
@media (max-width: 760px) { .paper-col.wide { grid-column: auto; } }
.paper-res > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* тренування на паузі під час матчу */
.slot.paused { opacity: .75; }
.slot.paused .rf { stroke: var(--gold, #ffd54a); }
.slot-left.paused-lbl { color: var(--gold, #ffd54a); }
.match-pause { margin: 0 0 6px; color: var(--gold, #ffd54a); }

/* ЕЛО клубів */
.elo-tag { font-size: 10px; padding: 0 4px; border-radius: 4px; background: var(--panel2, rgba(127,127,127,.15)); color: var(--muted, #888); margin-left: 3px; font-variant-numeric: tabular-nums; }
.coef-table td.pos { color: #3fb950; } .coef-table td.neg { color: #f85149; }

/* ---------- Цілі: щоденні завдання й досягнення ---------- */
.quest { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.quest:last-of-type { border-bottom: 0; }
.quest .q-main { flex: 1; min-width: 0; }
.quest .q-text { font-weight: 600; }
.quest.done .q-text { color: var(--accent); }
.quest.done .bar > i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.quest.claimed { opacity: .55; }
.quest.claimed .bar > i { background: var(--green); }
.q-bonus { margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: var(--bg2); border: 1px dashed var(--line); font-size: 13px; }
.q-bonus.got { border-style: solid; border-color: var(--gold); color: var(--gold); }
.ach-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ach { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.ach-ic { font-size: 26px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--card2); flex: none; filter: grayscale(1); opacity: .6; }
.ach.ready .ach-ic, .ach.claimed .ach-ic { filter: none; opacity: 1; }
.ach.ready { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ach.claimed { opacity: .7; }
.ach-main { flex: 1; min-width: 0; }
.ach-rw { margin-top: 3px; color: var(--gold); }

/* ---------- Агент і спонсори ---------- */
.agent-tier { padding: 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 10px; }
.agent-tier.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.agent-tier.locked { opacity: .6; }
.agent-cut { font-weight: 700; color: var(--gold); }
.agent-perks { margin: 0 0 8px; padding-left: 18px; line-height: 1.6; }
.sponsor { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sponsor:last-child { border-bottom: 0; }
.sponsor .sp-ic { font-size: 24px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--card2); border-radius: 10px; flex: none; }
.sponsor-offer { border-color: var(--gold); }
.agent-cons { margin: -4px 0 8px; padding-left: 18px; line-height: 1.5; color: var(--gold); list-style: none; padding-left: 0; }

/* 🏆 Володарі нагород: ім'я в один рядок (обрізається), деталі — під ним */
.aw-table { table-layout: fixed; width: 100%; }
.aw-table th { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-table th:first-child, .aw-table .aw-s { width: 34px; }
.aw-table td { vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
.aw-table .aw-name { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-table .aw-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Меню на ПК: прилипає до верху під час прокрутки; усі розділи одним рядком, у групах,
   кожна вкладка — іконка над підписом (нічого не сховано ні за «Ще», ні в підказках) */
@media (min-width: 641px) {
  .tabs { position: sticky; top: 0; z-index: 12; margin: 10px -6px 12px; padding: 6px; gap: 6px; overflow: visible; flex-wrap: nowrap; align-items: stretch;
    background: rgba(9, 15, 28, .9); backdrop-filter: blur(8px); border-radius: 0 0 14px 14px; }
  .tab-grp { display: flex; gap: 2px; min-width: 0; flex: 1 1 auto; }
  .tab-sep { flex: 0 0 1px; background: var(--line); margin: 6px 0; }
  /* ширина за підписом: «Тренування» отримує більше місця, ніж «Ліга» */
  .tab { flex: 1 1 auto; min-width: 0; padding: 7px 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; }
  .tab .ti { font-size: 19px; line-height: 1; }
  .tab .tl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab .dot { position: absolute; top: 5px; right: calc(50% - 18px); margin: 0; }
  .tab:hover .ti, .tab.active .ti { transform: scale(1.12); }
}
@media (min-width: 641px) and (max-width: 820px) { .tab { font-size: 11px; padding-left: 2px; padding-right: 2px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  .meters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 640px) { .tab-grp { display: contents; } .tab-sep { display: none; } }