/* FC Career Tracker - a match-night broadcast look: near-black, chalk
   white, one club colour (--club, set per season), Anton for numbers. */
:root{
  --bg:#0c0d0f; --bg2:#121316; --panel:#16181b; --panel2:#1c1f23;
  --line:#25282d; --line2:#33373d;
  --text:#f1efe9; --mute:#8d9097; --dim:#5f636b;
  --club:#e9e6dd; --club-ink:#0c0d0f;
  --W:#2fbf71; --D:#8d9097; --L:#e5484d;
  --elite:#39b8ff; --great:#2fbf71; --good:#9fd36a; --ok:#f2c94c; --poor:#ef6b4a;
  --display:Anton, "Arial Narrow", Impact, sans-serif;
  --body:Archivo, "Helvetica Neue", Arial, sans-serif;
  --r:6px;
  --tabs:64px;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font:15px/1.45 var(--body); font-stretch:100%; min-height:100vh; overflow-x:hidden; }
body.sheet-open{ overflow:hidden; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled{ opacity:.4; cursor:default; }
input, select, textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--club); outline-offset:2px; }
h1, h2, h3{ margin:0; font-weight:400; }
.ic{ width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
.muted{ color:var(--mute); }
.fine{ color:var(--dim); font-size:12.5px; margin:8px 0 0; }
.err{ color:var(--L); font-size:13.5px; }
.warn{ color:var(--ok); font-size:13.5px; margin:8px 0 0; }
.pad{ padding:10px 0; margin:0; }
.center{ text-align:center; }
.kicker{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:600; }

/* ---------- buttons, inputs, chips ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r);
  font-weight:700; font-size:14.5px; letter-spacing:.01em; border:1px solid var(--line2); background:var(--panel2); }
.btn.primary{ background:var(--club); color:var(--club-ink); border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn.big{ min-height:52px; font-size:16px; padding:0 24px; }
.btn.small{ min-height:34px; padding:0 12px; font-size:13px; }
.btn.block{ width:100%; }
.btn.danger{ background:var(--L); color:#fff; border-color:transparent; }
.btn.danger-ghost{ background:transparent; color:var(--L); border-color:rgba(229,72,77,.35); margin-top:18px; }
label.btn{ cursor:pointer; }
.link{ color:var(--club); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.link.danger{ color:var(--L); }
.icon-btn{ width:40px; height:40px; display:inline-grid; place-items:center; border-radius:var(--r); color:var(--text); }
.icon-btn:hover{ background:var(--panel2); }
.icon-btn.small{ width:32px; height:32px; color:var(--mute); }
.inp{ width:100%; min-height:44px; padding:10px 12px; font-size:16px; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r); outline:none; }
.inp:focus{ border-color:var(--club); }
.inp.big{ font-size:18px; min-height:52px; }
.inp.bad{ border-color:var(--L); }
textarea.inp{ resize:vertical; min-height:64px; }
.fld{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--mute); }
.fld input{ width:100%; min-height:46px; padding:10px 12px; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r); color:var(--text); font-size:16px; outline:none; }
.fld input:focus{ border-color:var(--club); }
.sel{ position:relative; display:inline-flex; align-items:center; }
.sel select{ appearance:none; -webkit-appearance:none; background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r); min-height:38px; padding:0 34px 0 12px; font-weight:600; font-size:16px; max-width:58vw; text-overflow:ellipsis; }
.sel .ic{ position:absolute; right:10px; pointer-events:none; color:var(--mute); }
.sel.small select{ min-height:32px; font-size:13px; }
.chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.chips::-webkit-scrollbar{ display:none; }
.chips.wrap{ flex-wrap:wrap; overflow:visible; }
.chip{ flex:none; min-height:34px; padding:0 13px; border-radius:999px; border:1px solid var(--line2); color:#c9c7c0; font-size:13.5px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.chip.big{ min-height:42px; padding:0 16px; font-size:14.5px; border-radius:var(--r); }
.chip.on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.seg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r); padding:3px; gap:3px; background:var(--bg); }
.seg button{ min-height:38px; padding:0 14px; border-radius:4px; font-weight:700; font-size:14px; color:var(--mute); }
.seg button.on{ background:var(--text); color:var(--bg); }
.seg.small button{ min-height:30px; padding:0 10px; font-size:12.5px; }
.tog{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--line2); border-radius:var(--r); font-weight:700; color:var(--mute); }
.tog.on{ color:var(--club-ink); background:var(--club); border-color:transparent; }
.tog.small{ min-height:30px; padding:0 10px; font-size:12.5px; }
.ctag{ display:inline-block; min-width:38px; padding:1px 5px; margin-right:8px; border:1px solid var(--line2); border-radius:3px; font-size:11px; font-weight:700; letter-spacing:.06em; text-align:center; color:var(--mute); }
.search{ display:flex; align-items:center; gap:8px; border:1px solid var(--line2); border-radius:var(--r); padding:0 12px; background:var(--bg); }
.search .ic{ color:var(--mute); }
.search input{ flex:1; min-height:44px; background:none; border:0; outline:none; font-size:16px; }

/* ---------- boot, auth, welcome ---------- */
.boot{ min-height:80vh; display:grid; place-content:center; text-align:center; }
.boot-mark, .auth-mark, .w-mark{ font:44px/1 var(--display); letter-spacing:.06em; }
.boot-sub{ color:var(--mute); margin-top:10px; }
.auth{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:28px; padding:32px 16px 80px; max-width:440px; margin:0 auto; }
.auth-tag{ color:var(--mute); margin-top:8px; font-size:16px; }
.auth-card{ display:flex; flex-direction:column; gap:14px; }
.auth-seg{ align-self:flex-start; }
.welcome{ max-width:560px; margin:0 auto; padding:16vh 20px 40px; }
.welcome h1{ font:52px/1.02 var(--display); text-transform:uppercase; margin:20px 0 16px; }
.welcome p{ color:#bdbbb4; font-size:16.5px; margin:0 0 28px; }
.w-mark{ font-size:22px; color:var(--mute); }

/* ---------- shell ---------- */
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:rgba(12,13,15,.94); border-bottom:1px solid var(--line); }
.who{ display:flex; align-items:center; gap:12px; text-align:left; min-width:0; }
.crest{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:4px; font:15px/1 var(--display); letter-spacing:.04em; }
.crest.big{ width:64px; height:64px; font-size:20px; }
.who-txt{ display:flex; flex-direction:column; min-width:0; }
.who-name{ font:22px/1.05 var(--display); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who-sub{ color:var(--mute); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who-sub .ic{ width:14px; height:14px; }
.top-r{ display:flex; align-items:center; gap:4px; }
.sync{ font-size:11.5px; color:var(--dim); letter-spacing:.04em; }
.sync.bad{ color:var(--ok); }
.main{ max-width:820px; margin:0 auto; padding:16px 16px calc(var(--tabs) + 40px + env(safe-area-inset-bottom)); }
.tabs{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; background:#0a0b0d; border-top:1px solid var(--line);
  padding:0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom); }
.tab{ flex:1; max-width:150px; height:var(--tabs); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--dim); font-size:11.5px; font-weight:700; letter-spacing:.02em; }
.tab .ic{ width:22px; height:22px; }
.tab.on{ color:var(--text); }
.tab.on .ic{ color:var(--club); }
.add-dot{ width:40px; height:30px; display:grid; place-items:center; background:var(--club); color:var(--club-ink); border-radius:5px; }
.tab.add{ color:var(--text); }
.page-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 14px; }
.page-h h2{ font:30px/1 var(--display); text-transform:uppercase; }
.empty, .hero-empty{ text-align:center; padding:12vh 12px; }
.empty h2, .hero-empty h2{ font:30px/1.05 var(--display); text-transform:uppercase; margin:10px 0; }
.empty p, .hero-empty p{ color:var(--mute); max-width:400px; margin:0 auto 22px; }

/* ---------- dashboard ---------- */
.strip{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:3px solid var(--club); background:var(--panel); border-radius:0 0 var(--r) var(--r); }
.big{ padding:16px 12px 14px; border-right:1px solid var(--line); min-width:0; }
.big:last-child{ border-right:0; }
.big-v{ font:52px/1 var(--display); letter-spacing:.01em; }
.big-l{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:6px; }
.big-s{ font-size:12px; color:var(--dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.big.rt-elite .big-v{ color:var(--elite); } .big.rt-great .big-v{ color:var(--great); } .big.rt-good .big-v{ color:var(--good); }
.big.rt-ok .big-v{ color:var(--ok); } .big.rt-poor .big-v{ color:var(--poor); }
.minis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:12px 0 16px; }
.mini{ background:var(--bg2); padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.mini span{ font-size:11.5px; color:var(--mute); letter-spacing:.04em; }
.mini b{ font:22px/1.1 var(--display); letter-spacing:.02em; white-space:nowrap; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 16px; margin-bottom:14px; min-width:0; }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-h h3{ white-space:nowrap; font:19px/1 var(--display); text-transform:uppercase; letter-spacing:.03em; }
.card-h .muted{ font-size:12.5px; }
.two{ display:grid; grid-template-columns:1fr; gap:0 14px; }
@media (min-width:720px){ .two{ grid-template-columns:1fr 1fr; } }
.form{ display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:4px; }
.fc{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.fc-r{ width:100%; height:34px; display:grid; place-items:center; font:17px/1 var(--display); border-radius:3px; color:#0c0d0f; }
.fc-W .fc-r{ background:var(--W); } .fc-D .fc-r{ background:var(--D); } .fc-L .fc-r{ background:var(--L); color:#fff; }
.fc-x{ font-size:10.5px; font-weight:700; color:var(--mute); white-space:nowrap; }
.fc-rt{ font-size:12px; font-weight:700; }
.rt-elite{ color:var(--elite); } .rt-great{ color:var(--great); } .rt-good{ color:var(--good); } .rt-ok{ color:var(--ok); } .rt-poor{ color:var(--poor); } .rt-none{ color:var(--dim); }
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart .g{ stroke:var(--line); stroke-width:1; }
.chart .ax{ fill:var(--dim); font:12px var(--body); }
.chart .avg{ stroke:var(--mute); stroke-width:1; stroke-dasharray:4 4; }
.chart .avg-t{ fill:var(--mute); }
.chart .ln{ fill:none; stroke:var(--club); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.chart .mk{ fill:var(--club); stroke:var(--panel); stroke-width:2; }
.chart .hit{ fill:transparent; cursor:pointer; }
.chart .hit:hover{ fill:rgba(255,255,255,.04); }
.hbars{ display:flex; flex-direction:column; gap:8px; }
.hb{ display:grid; grid-template-columns:118px 1fr 26px; align-items:center; gap:10px; font-size:13.5px; }
.hb-l{ color:#cfcdc6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-t{ height:12px; }
.hb-b{ display:block; height:100%; background:var(--club); border-radius:0 4px 4px 0; min-width:4px; }
.hb-v{ font:17px/1 var(--display); text-align:right; }
.vcols{ display:flex; gap:6px; align-items:flex-end; height:150px; }
.vc{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.vc-v{ font:15px/1 var(--display); height:18px; }
.vc-t{ flex:1; width:100%; display:flex; align-items:flex-end; }
.vc-b{ display:block; width:100%; background:var(--club); border-radius:4px 4px 0 0; min-height:2px; }
.vc-l{ font-size:10.5px; color:var(--mute); margin-top:6px; white-space:nowrap; }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:700; text-align:right; padding:0 6px 8px; }
.tbl th:first-child, .tbl td:first-child{ text-align:left; padding-left:0; }
.tbl td{ border-top:1px solid var(--line); padding:10px 6px; text-align:right; font-variant-numeric:tabular-nums; }
.tbl tr.dim td{ color:var(--dim); }
.tbl .won{ color:var(--ok); }
.tbl.seasons tr{ cursor:pointer; }
.tbl.seasons tr.cur td{ background:var(--panel2); }
.sw{ display:inline-block; width:14px; height:14px; border-radius:2px; vertical-align:-2px; margin-right:8px; }
.recs{ display:flex; flex-direction:column; }
.rec{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:12px; text-align:left; padding:10px 0; border-top:1px solid var(--line); }
.rec:first-child{ border-top:0; padding-top:0; }
.rec-l{ color:var(--mute); font-size:13px; }
.rec-v{ grid-row:1 / 3; grid-column:2; align-self:center; font:21px/1 var(--display); text-align:right; }
.rec-s{ font-size:13.5px; color:#d4d2cb; }

/* ---------- match rows ---------- */
.mlist{ display:flex; flex-direction:column; }
.mrow{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-top:1px solid var(--line); text-align:left; width:100%; }
.mrow:first-child{ border-top:0; }
.mrow:hover{ background:var(--panel2); }
.res{ flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:3px; font:15px/1 var(--display); color:#0c0d0f; }
.res-W{ background:var(--W); } .res-D{ background:var(--D); } .res-L{ background:var(--L); color:#fff; }
.mrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mrow-opp{ font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow-meta{ font-size:12.5px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow-meta .ic{ width:13px; height:13px; }
.rt{ flex:none; min-width:40px; padding:4px 0; text-align:center; font:16px/1 var(--display); border-radius:3px; background:var(--panel2); }

/* ---------- filters ---------- */
.filters{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.ftog{ min-height:46px; }
.ftog.open .ic{ transform:rotate(180deg); }
.fn{ display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:10px; background:var(--club); color:var(--club-ink); font-size:12px; }
.frow{ display:grid; grid-template-columns:92px 1fr; align-items:center; gap:8px; min-width:0; }
.fsum{ display:grid; grid-template-columns:repeat(6, 1fr); background:var(--panel); border-top:3px solid var(--club); border-radius:0 0 var(--r) var(--r); margin-bottom:8px; }
.fs{ padding:10px 8px; display:flex; flex-direction:column; border-right:1px solid var(--line); min-width:0; }
.fs:last-child{ border-right:0; }
.fs b{ font:24px/1 var(--display); font-weight:400; white-space:nowrap; }
.fs span{ font-size:11px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- career ---------- */
.pcard{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:18px 16px; background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--club); border-radius:var(--r); margin-bottom:12px; overflow:hidden; }
.pc-num{ position:absolute; right:56px; top:-18px; font:150px/1 var(--display); color:rgba(255,255,255,.05); pointer-events:none; }
.pc-main{ flex:1; min-width:0; }
.pc-main h2{ font:40px/1 var(--display); text-transform:uppercase; margin:6px 0 6px; }
.row-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.trophies{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.tro{ display:flex; flex-direction:column; gap:2px; padding:12px; border:1px solid var(--line2); border-radius:var(--r); }
.tro .ic{ color:var(--ok); width:24px; height:24px; margin-bottom:4px; }
.tro b{ font-size:14px; }
.tro span{ font-size:12px; color:var(--mute); }
.clist{ display:flex; flex-direction:column; }
.crow{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-top:1px solid var(--line); text-align:left; }
.crow:first-child{ border-top:0; }
.crow span{ color:var(--mute); font-size:13px; }
.crow.on b{ color:var(--club); }

/* ---------- match page ---------- */
.mp-bar{ display:flex; align-items:center; gap:8px; margin:-4px 0 10px; }
.mp-t{ flex:1; text-align:center; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.score{ background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--club); border-radius:var(--r); padding:14px 14px 18px; margin-bottom:14px; }
.sc-meta{ text-align:center; color:var(--mute); font-size:12.5px; margin-bottom:10px; }
.sc-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.sc-team{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font:20px/1.05 var(--display); text-transform:uppercase; letter-spacing:.02em; min-width:0; word-break:break-word; }
.sc-chip{ width:34px; height:34px; border-radius:3px; }
.sc-num{ font:60px/1 var(--display); padding:0 6px; background:none; color:var(--text); white-space:nowrap; }
.sc-goals{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:#cfcdc6; }
.sc-goals ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; text-align:center; }
.sc-goals b{ font-weight:700; color:var(--text); }
.sc-ball{ padding-top:1px; }
.sc-pens{ text-align:center; color:var(--mute); font-size:13px; margin-top:10px; }
.motm{ white-space:nowrap; flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--club-ink); background:var(--club); padding:4px 8px; border-radius:3px; }
.perf{ display:flex; align-items:center; gap:12px; color:var(--mute); font-size:14px; margin-bottom:12px; }
.perf .rt{ font-size:22px; min-width:56px; padding:8px 0; }
.tl{ list-style:none; margin:0 0 6px; padding:0; }
.tl li{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.tl li:first-child{ border-top:0; }
.tl-m{ font:20px/1 var(--display); min-width:52px; }
.tl .ic{ width:20px; height:20px; }
.tl-a .ic{ color:var(--club); }
.tl-x{ flex:1; font-size:14.5px; }
.mstats{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:1px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:12px; }
.mstats:empty{ display:none; }
.ms{ background:var(--bg2); padding:9px 11px; display:flex; flex-direction:column; }
.ms span{ font-size:11.5px; color:var(--mute); }
.ms b{ font:20px/1.1 var(--display); font-weight:400; }
.note{ color:#cfcdc6; font-size:14px; border-left:2px solid var(--line2); padding-left:10px; margin:14px 0 0; white-space:pre-wrap; }
.gfx-wrap{ display:flex; justify-content:center; background:#000; border-radius:4px; padding:10px; }
.gfx-wrap canvas{ width:100%; max-width:440px; height:auto; display:block; }
.gfx-wrap canvas.movable{ cursor:grab; touch-action:none; }
.gfx-wrap canvas.movable:active{ cursor:grabbing; }
.gfx-zoom{ display:flex; align-items:center; gap:12px; margin-top:10px; font-size:13px; color:var(--mute); }
.gfx-zoom input{ flex:1; accent-color:var(--club); height:28px; }
.gfx-wrap.story canvas{ max-width:330px; }

/* ---------- sheets ---------- */
.sheet{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.sheet[hidden]{ display:none; }
.sh-back{ position:absolute; inset:0; background:rgba(0,0,0,.66); }
.sh-panel{ position:relative; width:100%; max-width:640px; max-height:94vh; max-height:94dvh; display:flex; flex-direction:column; background:var(--bg2);
  border:1px solid var(--line2); border-bottom:0; border-radius:10px 10px 0 0; }
.sheet.anim .sh-panel{ animation:up .22s cubic-bezier(.2,.8,.3,1); }
.sh-match .sh-panel, .sh-season .sh-panel{ height:94vh; height:94dvh; }
@keyframes up{ from{ transform:translateY(40px); opacity:.4; } }
@media (prefers-reduced-motion:reduce){ .sh-panel{ animation:none; } }
@media (min-width:700px){ .sheet{ align-items:center; } .sh-panel{ border-radius:10px; border-bottom:1px solid var(--line2); max-height:90vh; } .sh-match .sh-panel, .sh-season .sh-panel{ height:90vh; } }
.sh-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 12px; border-bottom:1px solid var(--line); }
.sh-h h2{ font:26px/1 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.sh-sub{ color:var(--mute); font-size:13px; margin-top:4px; }
.sh-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 16px 24px; }
.sh-ask{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--panel2); border-top:1px solid var(--line2); font-weight:700; font-size:14px; }
.sh-ask span{ flex:1; min-width:150px; }
.sh-foot{ display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg2); }
.sh-foot .err{ flex:1; }
.sh-foot .btn.big{ min-width:170px; }
.sec{ padding:16px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.sec:last-child{ border-bottom:0; }
.sec-l{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:8px; }
.sec-l .cnt{ color:var(--text); font:15px/1 var(--display); letter-spacing:.04em; }
.sec-l.fold{ width:100%; justify-content:flex-start; text-align:left; }
.sec-l.fold .muted{ text-transform:none; letter-spacing:0; font-weight:500; font-size:12.5px; }
.sec-l.fold .ic{ margin-left:auto; }
.sec-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sec-row2{ display:grid; grid-template-columns:1fr 120px; gap:10px; }
.inp.date{ width:auto; flex:1; min-width:150px; }
.round{ display:flex; flex-direction:column; gap:8px; }
.sb{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:8px; }
.sb-side{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.sb-name{ font:16px/1.1 var(--display); text-transform:uppercase; letter-spacing:.03em; text-align:center; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-dash{ font:40px/1 var(--display); color:var(--dim); padding-bottom:20px; }
.stp{ display:inline-flex; align-items:center; border:1px solid var(--line2); border-radius:var(--r); background:var(--bg); }
.stp button{ width:40px; height:40px; display:grid; place-items:center; color:var(--mute); }
.stp button:active{ background:var(--panel2); color:var(--text); }
.stp-v{ min-width:36px; text-align:center; font:20px/1 var(--display); }
.stp.huge{ flex-direction:row; }
.stp.huge button{ width:48px; height:72px; }
.stp.huge .stp-v{ font-size:56px; min-width:56px; }
.pens{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.pens-row{ display:flex; align-items:center; gap:10px; color:var(--mute); font-size:13px; }
.ev{ border:1px solid var(--line2); border-radius:var(--r); padding:10px 10px 12px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.ev-top{ display:flex; align-items:center; gap:10px; }
.ev-top .ic{ width:20px; height:20px; }
.ev-top b{ flex:1; font-size:14.5px; }
.mins{ display:inline-flex; align-items:center; gap:6px; }
.inp.min{ width:64px; min-height:42px; text-align:center; font:22px/1 var(--display); letter-spacing:.03em; padding:6px; }
.add-wrap{ display:none; align-items:center; gap:4px; }
.mins.add-on .add-wrap{ display:inline-flex; }
.plus{ font:20px/1 var(--display); color:var(--mute); }
.inp.add{ width:48px; min-height:42px; text-align:center; font:20px/1 var(--display); padding:6px; }
.ev-sp{ flex:1; }
.side-tag{ flex:none; max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:3px; background:var(--panel2); color:var(--mute); }
.side-tag.us{ background:var(--club); color:var(--club-ink); }
.inp.oname{ flex:1; min-width:0; min-height:42px; }
.row-btns.tight{ margin-top:0; }
.ev-q{ font:22px/1 var(--display); color:var(--mute); margin-left:-4px; }
.gts{ margin:0 -10px; padding:2px 10px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
.gts .chip{ min-height:36px; font-size:13.5px; }
.gts .chip:last-child{ margin-right:30px; }
.add-ev{ align-self:flex-start; border-style:dashed; background:transparent; }
.lab-stp{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:#cfcdc6; }
.lab-stp .stp button{ width:36px; height:36px; }
.sec-row .lab-stp{ flex:1; justify-content:flex-end; }
.inp.num{ width:90px; text-align:center; font:18px/1 var(--display); }
.rating{ border:1px solid var(--line2); border-radius:var(--r); padding:12px 14px 10px; background:var(--bg); }
.rating-top{ display:flex; align-items:baseline; justify-content:space-between; font-size:14px; color:#cfcdc6; }
.rating-top b{ font:44px/1 var(--display); font-weight:400; color:inherit; }
.rating.rt-elite .rating-top b{ color:var(--elite); } .rating.rt-great .rating-top b{ color:var(--great); } .rating.rt-good .rating-top b{ color:var(--good); }
.rating.rt-ok .rating-top b{ color:var(--ok); } .rating.rt-poor .rating-top b{ color:var(--poor); }
.rating input[type=range]{ width:100%; margin:10px 0 4px; accent-color:var(--club); height:28px; }
.rating-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); }
.more{ display:flex; flex-direction:column; gap:10px; }
/* season form */
.clubs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:6px; max-height:300px; overflow-y:auto; }
.club{ display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r); text-align:left; font-size:14px; font-weight:600; min-width:0; }
.club span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.club:hover{ border-color:var(--line2); background:var(--panel2); }
.club-sw{ flex:none; width:22px; height:22px; border-radius:3px; }
.team-card{ display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line2); border-radius:var(--r); background:var(--bg); }
.tc-f{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.tc-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.inp.short{ width:76px; text-transform:uppercase; }
.col{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mute); }
.col input{ width:34px; height:34px; border:1px solid var(--line2); border-radius:4px; padding:0; background:none; }
.cgroup{ display:flex; flex-direction:column; gap:6px; }
.cgroup > span{ font-size:12.5px; color:var(--dim); }
.custom-row{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.picked{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.pk{ display:flex; align-items:center; gap:4px; font-size:14px; padding:6px 0; border-top:1px solid var(--line); }
.pk span:nth-child(2){ flex:1; }
/* switcher, settings */
.sw-c{ padding:14px 0; border-bottom:1px solid var(--line); }
.sw-h{ display:flex; gap:8px; align-items:baseline; margin-bottom:8px; }
.sw-h b{ font:20px/1 var(--display); text-transform:uppercase; }
.sw-s{ display:flex; align-items:center; gap:10px; width:100%; padding:10px; border-radius:var(--r); text-align:left; font-size:14px; }
.sw-s span:nth-child(3){ flex:1; }
.sw-s.on{ background:var(--panel2); outline:1px solid var(--line2); }
.set{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.set > div{ display:flex; flex-direction:column; }
.set .muted{ font-size:13px; }

/* ---------- toast, tooltip ---------- */
.toast{ position:fixed; left:50%; bottom:calc(var(--tabs) + 18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:200; max-width:min(92vw, 460px);
  background:var(--text); color:var(--bg); padding:11px 16px; border-radius:var(--r); font-weight:700; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
body.sheet-open .toast{ bottom:calc(88px + env(safe-area-inset-bottom)); }
.tip{ position:fixed; z-index:300; display:none; pointer-events:none; background:#f1efe9; color:#0c0d0f; font-size:12.5px; font-weight:600; padding:6px 9px; border-radius:4px; max-width:280px; }

/* ---------- phones ---------- */
@media (max-width:520px){
  .big{ padding:13px 8px 12px; }
  .big-v{ font-size:40px; }
  .big-l{ font-size:10.5px; letter-spacing:.1em; }
  .big-s{ font-size:11px; }
  .fsum{ grid-template-columns:repeat(3, 1fr); }
  .fs:nth-child(3){ border-right:0; }
  .fs:nth-child(-n+3){ border-bottom:1px solid var(--line); }
  .frow{ grid-template-columns:1fr; gap:4px; }
  .hb{ grid-template-columns:100px 1fr 22px; }
  .form{ grid-template-columns:repeat(5, minmax(0, 1fr)); row-gap:10px; }
  .mrow{ gap:9px; }
  .sc-num{ font-size:50px; }
  .sc-team{ font-size:17px; }
  .stp.huge button{ width:42px; height:64px; }
  .stp.huge .stp-v{ font-size:48px; min-width:44px; }
  .welcome h1{ font-size:42px; }
  .pc-main h2{ font-size:32px; }
}

/* ============================================================
   PLAY MODE
   ============================================================ */
.modes{ display:grid; gap:10px; margin:0 0 18px; }
.mode{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line2); border-left:3px solid var(--text); border-radius:var(--r); background:var(--panel); }
.mode b{ font:20px/1.1 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.mode span{ color:#bdbbb4; font-size:14.5px; }
.modepick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mp{ text-align:left; display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid var(--line2); border-radius:var(--r); background:var(--bg); }
.mp b{ font:17px/1.1 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.mp span{ font-size:12.5px; color:var(--mute); line-height:1.35; }
.mp.on{ border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }
.ovr{ color:var(--text); }
.mp-pl{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 6px; }

/* the next fixture */
.next{ background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--club); border-radius:var(--r); padding:14px 14px 16px; margin-bottom:14px; }
.next-k{ font-size:12.5px; color:var(--mute); display:flex; align-items:center; gap:2px; margin-bottom:12px; }
.next-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.next-team{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-width:0; }
.next-team b{ font:19px/1.05 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.next-v{ font:16px/1 var(--display); color:var(--dim); text-transform:uppercase; }
.next-meta{ text-align:center; color:var(--mute); font-size:13px; margin:12px 0 14px; }
.next-btns{ display:flex; gap:8px; }
.next-btns .btn.big{ flex:1; }
.next.done h3{ font:28px/1.1 var(--display); text-transform:uppercase; margin:0 0 14px; }
.md-crest{ display:inline-grid; place-items:center; width:46px; height:52px; border-radius:6px 6px 22px 22px; font:15px/1 var(--display); letter-spacing:.03em; flex:none; }
.md-crest.big{ width:72px; height:82px; font-size:22px; border-radius:8px 8px 34px 34px; }
.comps{ display:flex; flex-direction:column; }
.cs{ display:flex; align-items:center; gap:4px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.cs:first-child{ border-top:0; padding-top:0; }
.cs span:nth-child(2){ flex:1; }
.cs b{ font-size:13px; }
.cs b.won{ color:var(--ok); } .cs b.out{ color:var(--dim); font-weight:600; }
.tbl.lt td, .tbl.lt th{ padding-left:4px; padding-right:4px; }
.tbl.lt td:nth-child(2), .tbl.lt th:nth-child(2){ text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.tbl.lt td:first-child{ color:var(--mute); width:26px; }
.tbl.lt tr.me td{ background:var(--panel2); color:var(--text); font-weight:700; }
.tbl.lt tr.me td:first-child{ box-shadow:inset 3px 0 0 var(--club); }
.tbl.full tr.z-ucl td:first-child{ box-shadow:inset 3px 0 0 #3f7cff; }
.tbl.full tr.z-uel td:first-child{ box-shadow:inset 3px 0 0 #f28c28; }
.tbl.full tr.z-uecl td:first-child{ box-shadow:inset 3px 0 0 #2fbf71; }
.tbl.full tr.z-rel td:first-child{ box-shadow:inset 3px 0 0 var(--L); }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:12px; color:var(--mute); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend span::before{ content:""; width:10px; height:10px; border-radius:2px; background:#3f7cff; }
.legend .z-uel::before{ background:#f28c28; } .legend .z-uecl::before{ background:#2fbf71; } .legend .z-rel::before{ background:var(--L); }
.sh-tabs{ display:flex; gap:4px; padding:10px 16px 0; overflow-x:auto; scrollbar-width:none; }
.sh-tabs button{ flex:none; padding:8px 12px; border-radius:var(--r) var(--r) 0 0; font-weight:700; font-size:13.5px; color:var(--mute); border-bottom:2px solid transparent; }
.sh-tabs button.on{ color:var(--text); border-bottom-color:var(--club); }
.fixl{ display:flex; flex-direction:column; padding-top:8px; }
.fx{ display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; text-align:left; width:100%; }
.fx-d{ width:52px; color:var(--mute); font-size:12.5px; flex:none; }
.fx-o{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx .res{ width:22px; height:22px; font-size:12px; }
.fx b{ font:16px/1 var(--display); min-width:34px; text-align:right; }
.fx .muted{ font-size:12px; white-space:nowrap; }
.ko{ padding-top:12px; display:flex; flex-direction:column; gap:6px; }
.tie{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); font-size:14px; }
.tie span:last-child{ text-align:right; }
.tie em{ color:var(--dim); font-style:normal; }
.tie.me{ border-color:var(--club); }
.review{ display:flex; flex-direction:column; gap:14px; padding:14px 0; }
.rv-pos{ display:flex; align-items:baseline; gap:12px; }
.rv-pos b{ font:56px/1 var(--display); }
.rv-pos span{ color:var(--mute); font-size:15px; }
.club.stay{ border-color:var(--club); }
.clubs.tall{ max-height:none; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-top:10px; }
.club .md-crest{ width:34px; height:38px; font-size:12px; border-radius:4px 4px 16px 16px; }
.club span{ display:flex; flex-direction:column; min-width:0; }
.club small{ color:var(--mute); font-weight:500; font-size:12px; }
.sec .club{ margin-top:6px; width:100%; }

/* ---------- the matchday overlay ---------- */
.md{ position:fixed; inset:0; z-index:150; background:#08090b; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.md[hidden]{ display:none; }
body.md-open{ overflow:hidden; }
.md-wrap{ max-width:620px; margin:0 auto; padding:calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; min-height:100%; }
.md-head{ display:flex; justify-content:space-between; gap:12px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.md-board{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:18px 0 6px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.md-side{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-width:0; }
.md-side b{ font:20px/1.05 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.md-side small{ color:var(--dim); font-size:12px; }
.md-score{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.md-score > .md-num, .md-score > .md-dash{ display:inline; }
.md-score{ flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:150px; }
.md-num{ font:64px/1 var(--display); }
.md-dash{ font:40px/1 var(--display); color:var(--dim); margin:0 6px; }
.md-min{ flex-basis:100%; text-align:center; font:700 13px var(--body); color:var(--club); letter-spacing:.06em; margin-top:4px; }
.md-vs{ font:600 13px var(--body); color:var(--mute); text-align:center; }
.md-pre, .md-live, .md-ft{ display:flex; flex-direction:column; gap:14px; }
.md-info{ text-align:center; color:var(--mute); font-size:13.5px; }
.md-bars{ display:flex; flex-direction:column; gap:8px; }
.md-rb{ display:grid; grid-template-columns:130px 1fr 28px; align-items:center; gap:10px; font-size:13.5px; }
.md-rb span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#cfcdc6; }
.md-rb i{ height:8px; background:var(--panel2); border-radius:4px; overflow:hidden; }
.md-rb i b{ display:block; height:100%; background:var(--text); border-radius:0 4px 4px 0; }
.md-rb em{ font:17px/1 var(--display); font-style:normal; text-align:right; }
.md-note{ color:var(--dim); font-size:13px; text-align:center; margin:0; }
.md-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.md-actions .btn.big{ flex:1; max-width:320px; }
.md-actions.slim{ justify-content:flex-end; }
.md-leave{ align-self:center; color:var(--mute); }
.md-bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.md-bar span{ display:block; height:100%; background:var(--club); transition:width .1s linear; }
.md-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.md-log li{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.md-log li .ic{ width:16px; height:16px; margin-right:4px; }
.md-log li.dim{ color:var(--mute); }
.md-log li.them{ color:#cfcdc6; }
.md-log li.mine{ color:var(--text); }
.md-log li.mine b{ color:var(--club); }
.md-lm{ font:17px/1 var(--display); min-width:34px; color:var(--mute); }
.md-log.short li{ padding:7px 0; }
.md-chance{ border:1px solid var(--club); border-radius:var(--r); padding:16px; background:var(--panel); display:flex; flex-direction:column; gap:10px; animation:up .25s ease; }
.md-ck{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--club); }
.md-chance h3{ font:30px/1 var(--display); text-transform:uppercase; margin:0; }
.md-you{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.md-you > div{ display:flex; flex-direction:column; gap:3px; }
.md-you b{ font:24px/1 var(--display); text-transform:uppercase; }
.md-you span:last-child{ color:var(--mute); font-size:13.5px; }
.md-rt{ font-size:32px; min-width:72px; padding:12px 0; }
.md-motm{ align-self:flex-start; }

/* ---------- the 3D stadium ---------- */
.m3d{ position:fixed; inset:0; z-index:180; background:#05070b; display:none; }
.m3d.on{ display:block; }
.m3d[hidden]{ display:none !important; }
.m3d-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.m3d-hud{ position:absolute; inset:0; user-select:none; -webkit-user-select:none; touch-action:none; font-family:var(--body); color:#fff; }
.m3d-hud ::selection{ background:transparent; }
.m3d-bug{ position:absolute; top:calc(12px + env(safe-area-inset-top)); left:12px; display:flex; align-items:stretch; background:rgba(8,9,11,.82); border-radius:4px; overflow:hidden; font-weight:800; font-size:14px; letter-spacing:.04em; }
.m3d-bug span, .m3d-bug b, .m3d-bug em{ padding:7px 10px; }
.m3d-bug b{ background:#f1efe9; color:#0b0b0c; font:17px/1 var(--display); display:flex; align-items:center; letter-spacing:.06em; }
.m3d-bug em{ font-style:normal; color:var(--club); }
.m3d-prompt{ position:absolute; top:calc(58px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); max-width:min(88vw, 520px); text-align:center; background:rgba(8,9,11,.72); padding:8px 14px; border-radius:4px; font-size:14px; font-weight:600; opacity:0; transition:opacity .3s; pointer-events:none; }
.m3d-prompt.show{ opacity:1; }
.m3d-splash{ position:absolute; left:0; right:0; top:38%; text-align:center; font:64px/1 var(--display); text-transform:uppercase; letter-spacing:.03em; opacity:0; transform:scale(.9); transition:opacity .25s, transform .25s; pointer-events:none; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.m3d-splash.show{ opacity:1; transform:scale(1); }
.m3d-splash.goal{ font-size:110px; color:#fff; }
.m3d-splash.miss{ font-size:44px; color:#e9e6dd; }
.m3d-stick{ position:absolute; width:110px; height:110px; margin:-55px 0 0 -55px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); display:none; pointer-events:none; }
.m3d-stick.on{ display:block; }
.m3d-knob{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:rgba(255,255,255,.75); }
.m3d-btns{ position:absolute; right:calc(18px + env(safe-area-inset-right)); bottom:calc(22px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:76px 76px; grid-template-rows:76px 76px; gap:14px; }
.m3d-btn{ width:76px; height:76px; border-radius:50%; background:rgba(12,13,15,.62); border:2px solid rgba(255,255,255,.4); color:#fff; font:800 11.5px var(--body); letter-spacing:.08em; touch-action:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0; }
.m3d-btn.on{ background:rgba(255,255,255,.25); }
.m3d-btn.sprint{ grid-column:1; grid-row:1; }
.m3d-btn.chip{ grid-column:2; grid-row:1; }
.m3d-btn.pass{ grid-column:1; grid-row:2; }
.m3d-btn.shoot{ grid-column:2; grid-row:2; background:var(--club); color:var(--club-ink); border-color:transparent; position:relative; font-size:13px; }
/* v5.19: the power bar above CHIP */
.m3d-power{ position:absolute; right:-8px; bottom:calc(100% + 12px); width:92px; padding:6px 8px 8px; border-radius:12px; background:rgba(12,13,15,.7); border:1px solid rgba(255,255,255,.18); color:#fff; opacity:0; transform:translateY(6px); transition:opacity .15s, transform .15s; pointer-events:none; display:grid; grid-template-columns:1fr auto; align-items:baseline; row-gap:5px; }
.m3d-power.on{ opacity:1; transform:none; }
.m3d-powl{ font:800 9.5px var(--body); letter-spacing:.14em; color:rgba(255,255,255,.65); }
.m3d-powv{ font:400 15px/1 var(--display); font-variant-numeric:tabular-nums; }
.m3d-powt{ grid-column:1 / -1; position:relative; height:10px; border-radius:5px; background:rgba(255,255,255,.14); overflow:hidden; }
.m3d-powt b{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:5px; background:#57d36a; }
.m3d-power[data-z="hi"] .m3d-powt b{ background:#f0c64a; }
.m3d-power[data-z="over"] .m3d-powt b{ background:#ff5a4a; }
.m3d-power[data-z="over"] .m3d-powv{ color:#ff7a6a; }
.m3d-powt i{ position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:#fff; opacity:.85; }
.m3d-hud.setpiece .sprint, .m3d-hud.setpiece .pass, .m3d-hud.setpiece .chip{ opacity:.25; }
.m3d-keys{ position:absolute; left:12px; bottom:10px; font-size:12px; color:rgba(255,255,255,.55); display:none; }
@media (hover:hover) and (pointer:fine){ .m3d-keys{ display:block; } .m3d-btns{ opacity:.85; } }
@media (max-width:520px){
  .modepick{ grid-template-columns:1fr; }
  .md-num{ font-size:52px; }
  .md-crest.big{ width:58px; height:66px; font-size:18px; }
  .m3d-splash.goal{ font-size:76px; }
  .md-rb{ grid-template-columns:100px 1fr 26px; }
}
.m3d-ballptr{ position:absolute; left:-17px; top:-17px; width:34px; height:34px; display:none; pointer-events:none; }
.m3d-ballptr.on{ display:block; }
.m3d-ballptr i{ position:absolute; inset:5px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(8,9,11,.6); }
.m3d-ballptr::after{ content:""; position:absolute; right:-9px; top:50%; margin-top:-7px; border:7px solid transparent; border-left:10px solid #fff; border-right:0; }

/* ============================================================
   THEME (v2.4): matchday at night - a cooler near-black, rounder
   cards, the club colour as the one accent, shield badges.
   ============================================================ */
:root{
  --bg:#090b0f; --bg2:#0e1117; --panel:#12161d; --panel2:#1a1f28;
  --line:#1e242e; --line2:#2a323e;
  --text:#f3f1ea; --mute:#8b93a1; --dim:#5c6472;
  --r:12px; --rs:9px;
}
body{ background:var(--bg); }
.btn{ border-radius:var(--rs); }
.btn.small{ border-radius:8px; }
.seg{ border-radius:var(--rs); }
.seg button{ border-radius:7px; }
.inp, .fld input, .search, .sel select{ border-radius:var(--rs); }
.card, .next, .score, .pcard, .md-you, .md-chance{ border-radius:14px; }
.card{ background:var(--panel); border-color:var(--line); padding:16px 16px 18px; }
.card.flush{ padding:6px 12px 12px; }
.card-h h3{ display:flex; align-items:center; gap:9px; font-size:18px; }
.card-h h3::before{ content:""; width:4px; height:16px; border-radius:2px; background:var(--club); flex:none; }
.strip{ border-radius:14px; border:1px solid var(--line); border-top:3px solid var(--club); overflow:hidden; }
.minis{ border-radius:14px; }
.mini{ background:var(--panel); }
.fsum{ border-radius:14px; border:1px solid var(--line); border-top:3px solid var(--club); overflow:hidden; }

/* header: the club's badge and a hairline in its colour */
.top{ background:rgba(9,11,15,.92); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:0; box-shadow:0 1px 0 var(--line), inset 0 -2px 0 var(--club); }
svg.crest{ width:38px; height:44px; flex:none; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
svg.crest.big{ width:56px; height:65px; }
.top-r .icon-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line2); }
.top-r .icon-btn .ic{ width:21px; height:21px; }

/* tab bar: an accent bar over the active tab */
.tabs{ background:rgba(9,11,15,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
.tab{ position:relative; color:var(--dim); }
.tab::before{ content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:transparent; }
.tab.on::before{ background:var(--club); }
.tab.on{ color:var(--text); }
.add-dot{ border-radius:10px; width:44px; }

/* sub-tabs (Tables) */
.subtabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 12px; }
.subtabs::-webkit-scrollbar{ display:none; }
.subtabs button{ flex:none; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--line2); font-weight:700; font-size:13.5px; color:var(--mute); }
.subtabs button.on{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* next fixture */
.next{ background:var(--panel); border-color:var(--line); padding:16px 16px 18px; }
.next .md-crest{ width:56px; height:65px; }
.next-team b{ font-size:18px; }
.next-v{ font-size:15px; padding:6px 10px; border:1px solid var(--line2); border-radius:999px; }

/* shield badges */
svg.md-crest{ width:46px; height:54px; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
svg.md-crest.big{ width:76px; height:88px; }
.club svg.md-crest{ width:32px; height:37px; }
.club{ border-radius:var(--rs); }

/* settings sheet (the same tabs as the other games) */
.sheet{ z-index:200; }
.sh-tabs.scroll{ border-bottom:1px solid var(--line); padding-bottom:0; }
.srow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.srow:last-child{ border-bottom:0; }
.srow-t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.srow-t b{ font-size:15px; }
.srow-t small{ color:var(--mute); font-size:12.5px; line-height:1.35; }
.srow .seg{ flex:none; }
.srange{ flex:none; width:150px; accent-color:var(--club); }
.keymap{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; padding:14px 0 4px; }
.keymap div{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--rs); }
.keymap b{ font-size:13px; } .keymap span{ color:var(--mute); font-size:12.5px; }
.keymap.skills{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); padding-top:4px; }
.about{ padding:18px 0; }
.about-mark{ font:34px/1 var(--display); letter-spacing:.05em; }
.about p{ margin:8px 0; color:#c9c7c0; }
@media (max-width:520px){ .srow{ flex-direction:column; align-items:stretch; } .srow .seg{ align-self:flex-start; } .srange{ width:100%; } }

/* the matchday overlay */
.md{ background:#07090c; }
.md-head{ display:grid; grid-template-columns:42px 1fr 42px; align-items:center; letter-spacing:normal; text-transform:none; }
.md-sp{ width:42px; }
.md-ttl{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.md-ttl b{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text); }
.md-ttl span{ font-size:12px; color:var(--mute); }
.md-head .icon-btn{ border-radius:50%; border:1px solid var(--line2); }
.md-board{ border-bottom:0; padding:20px 12px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px; }
.md-score{ background:#05070a; border:1px solid var(--line2); border-radius:12px; padding:8px 14px 10px; }
.md-min{ color:var(--text); }
.md-live .md-actions.slim{ position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); justify-content:center; padding:8px; background:rgba(9,11,15,.92); border:1px solid var(--line); border-radius:12px; }
.md-chance{ box-shadow:0 0 0 1px var(--club) inset; border:0; }

/* the 3D match: pause button and card */
.m3d-pause{ position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(8,9,11,.7); border:1px solid rgba(255,255,255,.18); color:#fff; }
.m3d-pause svg{ width:20px; height:20px; }
.m3d-paused{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(4,5,8,.62); z-index:5; }
.m3d-paused[hidden]{ display:none; }
.m3d-pcard{ width:min(320px, 86vw); display:flex; flex-direction:column; gap:10px; padding:20px; background:#0e1117; border:1px solid #2a323e; border-radius:16px; text-align:center; }
.m3d-pk{ font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--club); }
.m3d-pt{ font-size:14px; color:#c9c7c0; margin-bottom:6px; min-height:1em; }
.m3d-pbtn{ min-height:46px; border-radius:10px; border:1px solid #2a323e; background:#1a1f28; color:#fff; font-weight:700; font-size:15px; }
.m3d-pbtn.gold{ background:var(--club); color:var(--club-ink); border-color:transparent; }
.m3d-hud{ --btn:1; }
.m3d-btn{ transform:scale(var(--btn)); transform-origin:bottom right; }
.m3d-hud.lefty .m3d-btns{ right:auto; left:calc(16px + env(safe-area-inset-left)); }
.m3d-hud.lefty .m3d-btn{ transform-origin:bottom left; }
.m3d-hud.nokeys .m3d-keys{ display:none !important; }

/* a soft vignette over the stadium (the camera, not the app UI) */
.m3d::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); }
.m3d-hud{ z-index:1; }

/* ---------- match rows: a fixed grid (v2.5) ----------
   result | match | score | goals | assists | rating - the same columns in
   every row, so a 0-goal game and a hat-trick line up and read down. */
.mlist{ --mcols:30px minmax(0, 1fr) 44px 44px 50px; }
.mhead, .mrow{ display:grid; grid-template-columns:var(--mcols); column-gap:10px; align-items:center; }
.mhead{ padding:0 2px 8px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.mhead span{ text-align:center; display:flex; justify-content:center; }
.mhead span:nth-child(2){ justify-content:flex-start; }
.mhead .ic{ width:14px; height:14px; color:var(--mute); }
.mhead + .mrow{ border-top:1px solid var(--line); }
.mrow{ padding:11px 2px; gap:0 10px; }
.mrow .res{ width:30px; height:30px; }
.mrow-n{ display:flex; align-items:center; justify-content:center; gap:4px; font:20px/1 var(--display); font-variant-numeric:tabular-nums; }
.mrow-n .ic{ width:16px; height:16px; flex:none; }
.mrow-n.a .ic{ color:#e5484d; }
.mrow-n.g, .mrow-n.a{ color:var(--text); }
.mrow-n.zero{ opacity:.38; }
.mrow-rt{ position:relative; display:flex; justify-content:center; }
.mrow-rt .rt{ min-width:46px; }
.mrow-motm{ position:absolute; top:-7px; right:-5px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:var(--ok); color:#0c0d0f; }
.mrow-motm .ic{ width:11px; height:11px; }
@media (max-width:520px){
  .mlist{ --mcols:28px minmax(0, 1fr) 38px 38px 44px; }
  .mhead, .mrow{ column-gap:7px; }
  .mrow .res{ width:28px; height:28px; }
  .mrow-rt .rt{ min-width:42px; }
  .mrow-n{ font-size:18px; }
  .mrow-n{ gap:3px; } .mrow-n .ic{ width:14px; height:14px; }
}

/* the result line, one compact row per match: "Home 1-0 Away" reading
   left to right, the details under it, the numbers beside it (v2.8) */
.mrow-main{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.mrow-opp{ display:flex; align-items:baseline; gap:6px; min-width:0; font-size:15px; }
.mrow-opp .mt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#bdbbb4; font-weight:600; }
.mrow-opp .mt.h{ flex:0 1 auto; } .mrow-opp .mt.a{ flex:0 1 auto; }
.mrow-opp .mt.me{ color:var(--text); font-weight:700; flex:0 0 auto; }
.mrow-opp .msc{ flex:none; font:18px/1 var(--display); letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.mrow-opp .short{ display:none; }
@media (max-width:520px){ .mrow-opp{ font-size:14.5px; gap:5px; } .mrow-opp .msc{ font-size:17px; } .mrow-opp .full{ display:none; } .mrow-opp .short{ display:inline; letter-spacing:.03em; } }

/* v3.1: after a goal - celebration, then the replay (tap Skip, Space or Esc) */
.m3d-replay{ position:absolute; top:calc(54px + env(safe-area-inset-top)); left:12px; display:none; align-items:center; gap:7px; padding:6px 11px 6px 9px; border-radius:6px; background:rgba(8,9,11,.82); border:1px solid rgba(255,255,255,.16); color:#fff; font:600 12px/1 var(--body, system-ui); letter-spacing:.14em; pointer-events:none; }
.m3d-replay i{ width:8px; height:8px; border-radius:50%; background:#e5484d; animation:m3dRec 1s steps(2) infinite; }
@keyframes m3dRec{ 50%{ opacity:.25; } }
.m3d-skipr{ position:absolute; z-index:5; right:calc(14px + env(safe-area-inset-right)); bottom:calc(5vh + 12px + env(safe-area-inset-bottom)); display:none; padding:10px 18px; border-radius:999px; background:rgba(8,9,11,.82); border:1px solid rgba(255,255,255,.22); color:#fff; font:600 14px/1 var(--body, system-ui); letter-spacing:.04em; }
.m3d-hud.post .m3d-skipr{ display:block; }
/* v5.25: watching a goal again - no controls, Skip from the start */
.m3d-hud.watch .m3d-skipr{ display:block; }
.m3d-hud.watch .m3d-btns, .m3d-hud.watch .m3d-stick, .m3d-hud.watch .m3d-keys, .m3d-hud.watch .m3d-pause, .m3d-hud.watch .m3d-prompt, .m3d-hud.watch .m3d-ballptr{ display:none !important; }
.m3d-hud.replay .m3d-replay{ display:flex; }
.m3d-hud.post .m3d-btns, .m3d-hud.post .m3d-stick, .m3d-hud.post .m3d-keys, .m3d-hud.post .m3d-pause, .m3d-hud.post .m3d-prompt, .m3d-hud.post .m3d-ballptr{ display:none !important; }
.m3d-hud.replay::before, .m3d-hud.replay::after{ content:""; position:absolute; left:0; right:0; height:5vh; background:#000; pointer-events:none; }
.m3d-hud.replay::before{ top:0; } .m3d-hud.replay::after{ bottom:0; }

/* ---------- v3.3: Social - leaderboard, friends, shared careers ---------- */
.subtabs button{ position:relative; }
.subtabs .dot{ position:absolute; top:6px; right:2px; width:7px; height:7px; border-radius:50%; background:var(--L); }
.lb-card{ padding:0; overflow:hidden; }
.lb-ctl{ padding:12px 12px 10px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.lb-ctl2{ display:flex; gap:8px; flex-wrap:wrap; }
.lb{ display:flex; flex-direction:column; }
.lb-row{ display:grid; grid-template-columns:28px 30px minmax(0,1fr) 40px 40px 40px; align-items:center; gap:8px; padding:9px 12px; border-top:1px solid var(--line); }
.lb-row:first-child{ border-top:0; }
.lb-head{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; padding-top:10px; padding-bottom:8px; }
.lb-head span:nth-child(n+4){ text-align:right; }
.lb-head span.on{ color:var(--text); }
.lb-row.me{ background:var(--panel2); box-shadow:inset 3px 0 0 var(--club); }
.lb-n{ font:17px/1 var(--display); color:var(--mute); text-align:center; }
.lb-row:nth-child(2) .lb-n, .lb-row:nth-child(3) .lb-n, .lb-row:nth-child(4) .lb-n{ color:var(--text); }
.crest.lb-crest{ width:28px; height:32px; }
.lb-who{ min-width:0; display:flex; flex-direction:column; }
.lb-who b, .lb-who small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-who small{ color:var(--mute); font-size:12px; }
.lb-v{ font:18px/1 var(--display); text-align:right; color:var(--mute); letter-spacing:.02em; }
.lb-v.on{ color:var(--text); }
.addf{ display:flex; gap:8px; }
.addf .inp{ flex:1; min-width:0; }
.fmsg{ min-height:18px; font-size:13px; color:var(--mute); margin-top:8px; }
.frow, .mgr{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); min-width:0; }
.card-h + .frow, .mgrs > .mgr:first-child{ border-top:0; }
.frow.dim{ opacity:.6; }
.frow .nm, .mgr .nm{ flex:1; min-width:0; display:flex; flex-direction:column; }
.frow .nm b, .frow .nm small, .mgr .nm b, .mgr .nm small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow .nm small, .mgr .nm small{ color:var(--mute); font-size:12.5px; }
.av{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--panel2); border:1px solid var(--line2); display:grid; place-items:center; font:16px/1 var(--display); }
.fst{ display:flex; flex-direction:column; align-items:center; min-width:30px; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--dim); }
.fst b{ font:17px/1.1 var(--display); color:var(--text); letter-spacing:.02em; }
.empty.small{ padding:6vh 12px; }
.uni .sec-l{ margin:16px 0 4px; }
.uni-code{ display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r); }
.uni-code span{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.uni-code b{ flex:1; font:28px/1 var(--display); letter-spacing:.16em; }
.crest.mgr-crest{ flex:none; width:30px; height:34px; }
.mgr.me .nm b{ color:var(--club); }
.mgr-p{ font-size:13px; color:var(--mute); white-space:nowrap; }
.mgr-p b{ font:17px/1 var(--display); color:var(--text); }
.mgr-p.done b{ color:var(--W); }
.mgr-on{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); white-space:nowrap; }
.mgr-on i, .h2h-st i, .h2h-chip i, .next-h2h i{ width:8px; height:8px; border-radius:50%; background:var(--line2); flex:none; }
.mgr-on.on i, .h2h-st.on i, .h2h-chip i.on, .next-h2h.hot i{ background:var(--W); }
.mgr-on.on{ color:var(--W); }
.share-seg{ display:flex; width:100%; }
.share-seg button{ flex:1; padding:0 6px; }
.inp.code{ text-transform:uppercase; letter-spacing:.2em; font-family:var(--display); font-size:22px; }
.club.taken{ opacity:.45; }
.club.busy{ opacity:.6; pointer-events:none; }
.w-join{ display:block; margin:16px auto 0; }
.next-h2h{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--mute); margin:-4px 0 14px; }
.next-h2h b{ color:var(--text); }
.next-h2h.hot{ color:var(--W); }
.next-h2h.hot b{ color:var(--W); }
/* the head-to-head lobby in the matchday overlay */
.md-pre.h2h{ align-items:center; text-align:center; }
.md-pre.h2h h3{ font:26px/1.05 var(--display); text-transform:uppercase; }
.h2h-vs{ display:flex; align-items:center; gap:16px; }
.h2h-vs div{ display:flex; flex-direction:column; min-width:0; }
.h2h-vs b{ font:20px/1.1 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.h2h-vs span{ color:var(--mute); font-size:12.5px; }
.h2h-vs em{ font-style:normal; color:var(--dim); font-weight:800; }
.h2h-st{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--mute); }
.h2h-st.on{ color:var(--W); }
.h2h-dots{ display:flex; gap:6px; }
.h2h-dots i{ width:7px; height:7px; border-radius:50%; background:var(--club); opacity:.25; animation:h2hDot 1.2s infinite; }
.h2h-dots i:nth-child(2){ animation-delay:.2s; } .h2h-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes h2hDot{ 0%, 60%, 100%{ opacity:.25; } 30%{ opacity:1; } }
.h2h-count{ display:flex; flex-direction:column; align-items:center; }
.h2h-count span{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.h2h-count b{ font:84px/1 var(--display); }
.h2h-chip{ align-self:center; display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid var(--line2); border-radius:999px; font-size:12.5px; color:var(--mute); }
.h2h-chip b{ color:var(--text); font:15px/1 var(--display); letter-spacing:.03em; }
@media (prefers-reduced-motion: reduce){ .h2h-dots i{ animation:none; opacity:.6; } }
@media (max-width:420px){
  .lb-row{ grid-template-columns:24px 26px minmax(0,1fr) 32px 32px 32px; gap:6px; padding:9px 10px; }
  .crest.lb-crest{ width:24px; height:28px; }
  .tab{ font-size:10.5px; }
}

/* v3.4: delete any career from the Careers list and the switcher */
.crow-w{ display:flex; align-items:center; gap:6px; border-top:1px solid var(--line); }
.crow-w:first-child{ border-top:0; }
.crow-w .crow{ flex:1; min-width:0; border-top:0; }
.icon-btn.del{ flex:none; color:var(--dim); }
.icon-btn.del:hover{ color:var(--L); }
.sw-h .icon-btn.del{ margin-left:auto; align-self:center; }

/* v3.5: divisions, play-offs and wages */
.tbl.full tr.z-up td:first-child{ box-shadow:inset 3px 0 0 #2fbf71; }
.tbl.full tr.z-po td:first-child{ box-shadow:inset 3px 0 0 #f2c94c; }
.legend .z-up::before{ background:#2fbf71; } .legend .z-po::before{ background:#f2c94c; }
.rv-move{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line2); margin:12px 0; }
.rv-move b{ font:22px/1 var(--display); text-transform:uppercase; letter-spacing:.03em; }
.rv-move span{ color:var(--mute); font-size:13.5px; }
.rv-move.up b{ color:var(--W); } .rv-move.down b{ color:var(--L); }
.pay{ margin:14px 0 4px; }
.pay .sec-l{ margin-bottom:6px; }
.pay-r{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line); font-size:14px; }
.pay-r b{ font:16px/1.2 var(--display); letter-spacing:.03em; }
.pay-r.tot b{ color:var(--club); font-size:19px; }
.club span.deal{ display:block; font-size:12.5px; color:var(--mute); margin-top:2px; font-weight:500; white-space:normal; }
.club span.deal b{ color:var(--text); }
.ct-main{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ct-main .md-crest{ width:40px; height:46px; }
.ct-main div{ display:flex; flex-direction:column; }
.ct-main b{ font:24px/1.05 var(--display); letter-spacing:.02em; }
.ct-main span{ color:var(--mute); font-size:13px; }
.contract .minis{ margin-bottom:10px; }
@media (max-width:480px){ .tbl.lt.full td:nth-child(2), .tbl.lt.full th:nth-child(2){ max-width:128px; } .tbl.lt.full td, .tbl.lt.full th{ padding-left:3px; padding-right:3px; } }

/* v3.7: teammates in shared careers */
.mate-tag{ display:inline-block; padding:1px 6px; border-radius:4px; background:var(--club); color:var(--club-ink); font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:1px; }
.club.mates{ border-color:var(--club); }
.club.confirm-mate{ grid-column:1 / -1; align-items:flex-start; border-color:var(--club); background:var(--panel2); }
.club.confirm-mate span{ white-space:normal; gap:6px; }
.club.confirm-mate small{ font-size:12.5px; line-height:1.4; }
.cm-btns{ display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:8px; margin-top:4px; }
.pst-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lb.pst .lb-row{ grid-template-columns:30px minmax(0,1fr) 36px 36px 36px 40px; }
.lb.pst .lb-head span{ font-size:11px; }
.md-chance.joint{ text-align:center; align-items:center; }
.md-chance.joint .jw-t{ font-weight:800; color:var(--text); }
.md-live .h2h-chip + .h2h-chip{ margin-top:-4px; }
.lb.pst .lb-head span:nth-child(n+3){ text-align:right; }

/* v3.9: the shoot-out, the captain, the shop */
.md-pre.so{ align-items:center; text-align:center; gap:14px; }
.so-score{ display:flex; align-items:center; gap:14px; font:64px/1 var(--display); }
.so-score em{ font-style:normal; color:var(--dim); }
.so-row{ display:grid; grid-template-columns:44px 1fr; align-items:center; gap:10px; width:100%; max-width:340px; }
.so-row b{ font:800 13px var(--body); letter-spacing:.06em; text-align:left; }
.so-dots{ display:flex; gap:7px; flex-wrap:wrap; }
.so-d{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line2); display:grid; place-items:center; }
.so-d svg{ width:14px; height:14px; }
.so-d.in{ background:var(--club); border-color:var(--club); color:var(--club-ink); }
.so-d.out{ border-color:var(--L); background:transparent; position:relative; }
.so-d.out::after{ content:""; width:12px; height:2px; background:var(--L); transform:rotate(45deg); }
.so-d.now{ border-color:var(--text); animation:h2hDot 1s infinite; }
.so-line{ min-height:22px; font-size:15px; color:var(--mute); margin:0; }
.so-line.in{ color:var(--W); } .so-line.out{ color:var(--L); }
.capt{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; background:var(--club); color:var(--club-ink); font:800 11px var(--body); vertical-align:1px; }
.ct-shop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0 2px; font-size:13.5px; color:var(--mute); }
.ct-life{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-top:8px; font-size:13px; }
.ct-life .tag{ padding:3px 8px; border:1px solid var(--line2); border-radius:999px; font-size:12px; }
.shop-tabs{ margin-bottom:12px; }
.shop-list{ display:flex; flex-direction:column; }
.shop-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.shop-row:first-child{ border-top:0; }
.shop-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.shop-t small{ color:var(--mute); font-size:12.5px; }
.shop-own{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.shop-row.owned b{ color:var(--mute); }
.pips{ display:flex; gap:4px; margin-top:3px; }
.pips i{ width:16px; height:5px; border-radius:2px; background:var(--line2); }
.pips i.on{ background:var(--club); }
.boot-cols{ display:flex; flex-wrap:wrap; gap:10px; padding:6px 0; }
.boot-c{ width:34px; height:34px; border-radius:50%; border:2px solid var(--line2); }
.boot-c.on{ border-color:var(--text); box-shadow:0 0 0 2px var(--bg); }
.next-shop{ margin-left:auto; font-size:12.5px; }
/* v4.0: the players table's season and competition pickers */
.pst-seg{ display:flex; width:fit-content; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 0 8px; max-width:100%; }
.pst-seg::-webkit-scrollbar{ display:none; }
.pst-seg button{ flex:0 0 auto; white-space:nowrap; }
.pst-h .pst-seg{ margin:0; }
.pst-none{ padding:12px 4px; font-size:13px; }
/* v4.1: the stats' competition bar, head to head, fixtures by competition, real players' clubs */
.scomp-bar{ margin:4px 0 12px; }
.scomp-bar button small{ margin-left:6px; font-size:11px; opacity:.6; font-weight:700; }
.scomp-h{ display:flex; align-items:center; gap:4px; margin:-4px 0 12px; font-weight:700; font-size:14px; }
.scomp-h .link{ margin-left:auto; }
.tbl.pick tr[data-act]{ cursor:pointer; }
.tbl.pick tr[data-act]:hover td{ background:var(--panel2); }
.hum-tag{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:0 6px 0 4px; height:18px; border:1px solid var(--text); border-radius:9px; font-size:10.5px; font-weight:800; color:var(--text); vertical-align:1px; white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.hum-tag .ic{ width:11px; height:11px; flex:none; }
.tbl tr.hum:not(.me) td:first-child{ box-shadow:inset 3px 0 0 var(--text); }
.tbl tr.hum:not(.me) td{ color:var(--text); }
.fx.hum{ box-shadow:inset 3px 0 0 var(--text); padding-left:8px; }
.fx-o{ display:flex; flex-direction:column; gap:2px; }
.fx-t{ overflow:hidden; text-overflow:ellipsis; }
.fx-r{ color:var(--mute); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; }
.fx-r .hum-tag{ margin-left:2px; height:16px; }
.fx-comps{ display:flex; flex-direction:column; gap:6px; padding:12px 0 4px; }
.fx-comp{ display:flex; align-items:center; gap:4px; width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r); text-align:left; }
.fx-comp.on{ border-color:var(--club); box-shadow:inset 3px 0 0 var(--club); }
.fx-cn{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fx-cn b{ font-size:14px; }
.fx-cn small{ color:var(--mute); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-cc{ color:var(--dim); font-size:12px; font-weight:700; }
.fx-filter{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; font-weight:700; }
.cmp .card-h{ align-items:center; }
.cmp-pick{ margin:0 0 10px; }
.cmp-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:4px; }
.cmp-who{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.cmp-who.r{ align-items:flex-end; text-align:right; }
.cmp-who b{ font-size:15px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-who small{ color:var(--mute); font-size:11.5px; }
.crest.cmp-crest{ width:26px; height:30px; margin-bottom:4px; }
.cmp-score{ display:flex; align-items:baseline; gap:6px; font:28px/1 var(--display); }
.cmp-score em{ font-style:normal; color:var(--dim); font-size:20px; }
.cmp-scope{ margin:0 0 10px; text-align:center; color:var(--mute); font-size:12px; }
.cmp-rows{ display:flex; flex-direction:column; gap:10px; }
.cmp-row{ display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:10px; }
.cmp-v{ font:18px/1 var(--display); color:var(--mute); }
.cmp-v.r{ text-align:right; }
.cmp-v.win{ color:var(--text); }
.cmp-mid{ display:flex; flex-direction:column; gap:4px; }
.cmp-l{ text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
.cmp-bar{ display:flex; gap:2px; height:6px; }
.cmp-bar i{ display:block; height:100%; background:var(--line2); border-radius:3px; min-width:2px; }
.cmp-bar i.a.win{ background:var(--club); }
.cmp-bar i.b.win{ background:var(--text); }
@media (max-width:520px){ .fx.done .fx-cname{ display:none; } }
/* v4.2: the dip to black between replay angles */
.m3d-cut{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; }
.m3d-cut.on{ animation:m3dCut .32s ease-out; }
/* v5.27: a play that broke down fades out while it runs on */
.m3d-cut.fade{ animation:m3dFade .3s ease-in forwards; }
@keyframes m3dFade{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes m3dCut{ 0%{ opacity:1; } 100%{ opacity:0; } }
/* v4.2: head to head - games, goals and assists first; your meetings */
.cmp-row.big .cmp-v{ font-size:24px; }
.cmp-row.big .cmp-l{ color:var(--text); }
.cmp-note{ margin:10px 0 0; text-align:center; }
.cmp-meet{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.cmp-mtot{ display:flex; justify-content:space-between; font-size:13px; color:var(--mute); margin:2px 0 8px; }
.cmp-mtot b{ font:18px/1 var(--display); color:var(--text); margin:0 3px 0 0; }
.cmp-mtot .r{ text-align:right; }
.cmp-mlist{ display:flex; flex-direction:column; }
.cmp-m{ display:grid; grid-template-columns:24px 1fr auto 44px; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); text-align:left; width:100%; font-size:13.5px; }
.cmp-m .res{ width:22px; height:22px; font-size:12px; }
.cmp-mo{ min-width:0; display:flex; flex-direction:column; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cmp-mo b{ font-weight:800; margin-left:4px; }
.cmp-mo small{ color:var(--mute); font-size:11.5px; }
.cmp-mg{ font-weight:800; font-size:12.5px; color:var(--text); }
.cmp-mg.r{ text-align:right; color:var(--mute); }
/* v4.4: the leaderboard groups each shared career by colour */
.lb-row.grp{ --g:#4f8ef7; background:color-mix(in srgb, var(--g) 15%, transparent); box-shadow:inset 3px 0 0 var(--g); }
.lb-row.grp.me{ box-shadow:inset 3px 0 0 var(--g), inset 6px 0 0 var(--club); }
.g0{ --g:#4f8ef7; } .g1{ --g:#2fbf9b; } .g2{ --g:#a67cf5; } .g3{ --g:#e8a33d; }
.g4{ --g:#e5687a; } .g5{ --g:#62c46a; } .g6{ --g:#3fb4d9; } .g7{ --g:#d97bd0; }
.lb-key{ display:flex; align-items:center; gap:4px; }
.lb-sw{ display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--g); flex:none; }
.lb-sw:last-of-type{ margin-right:6px; }
/* v4.6: on the leaderboard colour only means a shared career; your own rows get a "You" tag instead */
.lb-card .lb-row.me:not(.grp){ background:none; box-shadow:none; }
.lb-card .lb-row.grp.me{ box-shadow:inset 3px 0 0 var(--g); }
.you-tag{ display:inline-block; margin-left:4px; padding:0 5px; border:1px solid var(--line2); border-radius:4px; font:700 10px/16px var(--body, system-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); vertical-align:2px; }

/* v4.9: the competition's colour, the season so far, and a fixed dock */
.md-head{ border-top:4px solid var(--comp, var(--club)); padding-top:10px; margin-top:-6px; }
.md-ttl b.md-comp{ display:inline-block; background:var(--comp, var(--club)); color:var(--comp-ink, #0c0d0f); padding:4px 10px; border-radius:6px; letter-spacing:.12em; }
.md-board{ border-color:color-mix(in srgb, var(--comp, #25282d) 45%, #25282d); }
.md-season{ border:1px solid var(--line); border-left:3px solid var(--comp, var(--club)); border-radius:12px; background:rgba(5,7,10,.55); padding:10px 12px 12px; }
.md-season-h{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.md-season-g{ display:grid; grid-template-columns:repeat(4, 1fr); text-align:center; }
.md-season-g b{ display:block; font:26px/1.05 var(--display); }
.md-season-g span{ font-size:11px; color:var(--mute); text-transform:uppercase; letter-spacing:.08em; }
.md-wrap{ padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
.md-dock{ position:fixed; left:0; right:0; bottom:0; z-index:5; background:rgba(7,9,12,.94); border-top:1px solid var(--line); padding:12px 16px calc(10px + env(safe-area-inset-bottom)); }
.md-dock-in{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; }
.md-dock-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.md-dock-btns .btn{ width:100%; min-height:54px; border-color:transparent; font-weight:800; }
.md-dock .md-leave{ min-height:32px; }
.btn.md-kick{ background:var(--club); color:var(--club-ink); }
.btn.md-sim{ background:var(--md-sim); color:var(--md-sim-ink); }
.btn.md-next{ background:var(--md-next); color:var(--md-next-ink); }
.btn.md-det{ background:transparent; color:var(--text); border:1px solid var(--line2); }

/* career: every season under the career totals */
.cstats .strip{ border-radius:14px 14px 0 0; }
.cstats .strip:last-child{ border-radius:14px; }
.strip-rows{ border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; background:var(--panel); overflow:hidden; }
.sr{ display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:auto auto; width:100%; padding:8px 0 10px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--text); text-align:center; cursor:pointer; font:inherit; }
.sr.cur{ background:rgba(255,255,255,.035); }
.sr-l{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:0 14px 4px; font-size:12px; color:var(--mute); text-align:left; }
.sr-l b{ color:var(--text); }
.sr-l .sw{ width:10px; height:10px; border-radius:2px; flex:none; }
.sr-v{ font:20px/1.1 var(--display); }
.gtl{ list-style:none; margin:0; padding:0; }
.gtl li{ display:grid; grid-template-columns:44px 18px 1fr auto; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--line); font-size:14px; }
.gtl li:first-child{ border-top:0; }
.gtl li .ic{ width:15px; height:15px; }
.gtl li.them{ color:#bdbab2; }
.gtl li.mine b{ color:var(--club); }
.gtl-x small{ display:block; font-size:11.5px; color:var(--mute); }
.gtl-s{ font:17px/1 var(--display); color:var(--mute); }
.sr{ text-align:left; }
.sr-v{ padding:0 12px; border-right:1px solid var(--line); }
.sr-v:last-child{ border-right:0; }
.md-dock-btns .btn{ white-space:nowrap; font-size:16px; padding-left:10px; padding-right:10px; }

/* v5.0: the match filters as a grid of pickers (native lists on phones; nothing scrolls off the edge) */
.fgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
@media (min-width:720px){ .fgrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.fsel{ position:relative; display:block; min-width:0; }
.fsel span{ position:absolute; left:12px; top:7px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); pointer-events:none; }
.fsel select{ appearance:none; -webkit-appearance:none; width:100%; min-height:54px; padding:20px 30px 6px 12px; background:var(--panel); border:1px solid var(--line2); border-radius:var(--rs, 10px); color:var(--text); font:600 15px var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsel .ic{ position:absolute; right:10px; top:50%; margin-top:-8px; pointer-events:none; color:var(--mute); }
.fsel.on select{ border-color:var(--club); box-shadow:inset 0 0 0 1px var(--club); }
.fsel.on span{ color:var(--club); }
.fclear{ min-height:54px; border-radius:var(--rs, 10px); border:1px dashed var(--line2); background:transparent; color:var(--text); font:700 14px var(--body); }
.fclear:disabled{ color:var(--dim); border-style:solid; border-color:var(--line); }

/* v5.1: match rows wear their competition's colour */
.mrow.cc{ border-top:0; border-radius:10px; margin-top:5px; padding-left:10px; padding-right:8px; box-shadow:inset 4px 0 0 var(--cc); }
.mhead + .mrow.cc{ border-top:0; }
.mrow.cc:hover{ filter:brightness(1.15); }
.mrow-cc{ color:var(--cct, var(--cc)); font-weight:800; letter-spacing:.04em; }

/* v5.11: the chance's two-line context card, the first-time coaching card, and the card after a chance */
.m3d-ctx{ position:absolute; left:50%; top:calc(env(safe-area-inset-top, 0px) + 64px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 16px; max-width:88vw; text-align:center; background:rgba(8,9,12,.72); border:1px solid #2a323e; border-top:2px solid var(--club); border-radius:10px; opacity:0; pointer-events:none; z-index:4; }
.m3d-ctx b{ font:600 13px/1.2 var(--body); letter-spacing:.06em; color:#fff; }
.m3d-ctx span{ font:500 12px/1.25 var(--body); color:#c9c7c0; }
.m3d-ctx.on{ animation:m3dCtx 3.4s ease both; }
@keyframes m3dCtx{ 0%{ opacity:0; transform:translate(-50%, -8px); } 10%,78%{ opacity:1; transform:translate(-50%, 0); } 100%{ opacity:0; transform:translate(-50%, -4px); } }
.m3d-coach{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(4,5,8,.7); z-index:6; }
.m3d-coach[hidden]{ display:none; }
.m3d-tips{ list-style:none; margin:2px 0 6px; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left; font-size:14px; line-height:1.35; color:#c9c7c0; }
.m3d-tips b{ color:#fff; }
.md-post{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 96px); transform:translateX(-50%); display:flex; gap:12px; align-items:center; padding:10px 14px 10px 10px; width:min(340px, 90vw); background:#0e1117; border:1px solid #2a323e; border-top:2px solid var(--club); border-radius:12px; z-index:160; animation:mdPostIn .28s ease both; }
.md-post.out{ opacity:0; transition:opacity .35s; }
@keyframes mdPostIn{ from{ opacity:0; transform:translate(-50%, 10px); } to{ opacity:1; transform:translate(-50%, 0); } }
.mp-map{ flex:none; width:96px; border-radius:8px; overflow:hidden; background:#143a1a; }
.mp-map svg{ display:block; width:100%; height:auto; }
.mp-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mp-txt b{ font:22px/1 var(--display); text-transform:uppercase; letter-spacing:.03em; }
.mp-txt span{ font-size:12.5px; color:#c9c7c0; }
.mp-r i{ font-style:normal; font-weight:800; }
.mp-r i.up{ color:#2fbf71; } .mp-r i.dn{ color:#ef6b4a; }
.ldots::after{ content:""; display:inline-block; width:1.2em; text-align:left; animation:ldots 1.2s steps(4, end) infinite; }
@keyframes ldots{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } }

/* v5.25: the Goals view (every goal, who against) and watching a goal again */
.seg.mview{ display:flex; margin:0 0 10px; }
.seg.mview button{ flex:1; }
.gvs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 8px; }
.gvs .muted{ font-size:12.5px; margin-right:2px; }
.gvs .chip b{ font-family:Anton, sans-serif; font-weight:400; margin-left:2px; }
.grow{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border-radius:10px; margin-top:5px; padding:11px 8px 11px 10px; box-shadow:inset 4px 0 0 var(--cc); }
.grow:hover{ filter:brightness(1.15); }
.grow-min{ flex:none; min-width:44px; font-family:Anton, sans-serif; font-size:20px; color:var(--cct); }
.grow .mrow-opp{ display:flex; align-items:center; gap:6px; }
.grow .sc-chip{ flex:none; width:12px; height:14px; border-radius:2px 2px 6px 6px; }
.grow-w{ flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text); }
.grow-w .ic{ width:22px; height:22px; }
.grow-w small{ font-size:10.5px; color:var(--mute); letter-spacing:.04em; text-transform:uppercase; }
.watch-b{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line2); font-size:13px; font-weight:700; color:var(--text); }
.watch-b .ic{ width:14px; height:14px; }
.fs.txt{ min-width:0; }
.fs.txt b{ font-family:Archivo, sans-serif; font-weight:800; font-size:15px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; padding-top:6px; }

/* v5.26: Your player - the look editor and its live preview */
.pc-look{ margin-top:10px; }
.lk-nudge{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border-left:3px solid var(--club); }
.lk-nudge b{ display:block; font-size:16px; }
.lk-nudge .muted{ font-size:13px; }
.lk-nudge .row-btns{ margin:0; }
.lk-prev{ position:relative; height:min(46vh, 340px); margin:0 -4px 8px; border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at 50% 85%, rgba(255,255,255,.07), transparent 60%), #0b0d12; border:1px solid var(--line); }
.lk-canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
.lk-load{ position:absolute; inset:0; display:grid; place-items:center; font-size:13px; }
.lk-prev.ready .lk-load{ display:none; }
.lk-view{ position:absolute; top:10px; left:10px; z-index:1; }
.lk-hint{ position:absolute; bottom:8px; right:10px; font-size:11px; color:var(--mute); pointer-events:none; }
.lk-sw{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.lk-c{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.14); }
.lk-c.on{ border-color:var(--text); box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--club); }
.lk-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.lk .sec-l b{ margin-left:auto; color:var(--text); font-weight:700; letter-spacing:0; text-transform:none; font-size:13px; }
.lk-range{ width:100%; margin:4px 0 10px; accent-color:var(--club); }
.lk-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lk-two .seg{ display:flex; } .lk-two .seg button{ flex:1; padding:0 8px; font-size:13px; }

/* v5.28: full time - one fixed layout, the same buttons in the same place every match */
.md-wrap:has(.md-dock){ padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
.md-links{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
.md-links .link{ min-height:32px; }
.md-dock-btns .btn.md-kick,.md-dock-btns .btn.md-sim,.md-dock-btns .btn.md-next,.md-dock-btns .btn.md-det{ height:54px; }
.ft-info{ min-height:18px; text-align:center; color:var(--mute); font-size:13.5px; }
.ft-card{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.ft-h{ display:flex; justify-content:center; align-items:center; gap:10px; height:40px; font:22px/1 var(--display); text-transform:uppercase; border-bottom:1px solid var(--line); }
.ft-motm{ font:700 11px var(--body); letter-spacing:.1em; color:var(--great); display:inline-flex; align-items:center; gap:4px; }
.ft-motm .ic{ width:13px; height:13px; }
.ft-r{ display:grid; grid-template-columns:1fr 1fr; align-items:center; height:36px; border-bottom:1px solid var(--line); }
.ft-r span{ text-align:center; color:var(--mute); font-size:14px; }
.ft-r b{ text-align:center; font:24px/1 var(--display); border-left:1px solid var(--line); line-height:36px; background:rgba(0,0,0,.18); }
.ft-rate{ display:grid; grid-template-columns:1fr 1fr; align-items:center; height:56px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line); }
.ft-rate span{ text-align:center; font-weight:800; font-size:14px; color:var(--text); }
.ft-rate b{ text-align:center; font:34px/1 var(--display); }
.ft-ovr{ display:grid; grid-template-columns:44px 44px 64px 1fr; align-items:center; gap:6px; height:42px; padding:0 14px 0 12px; font-size:13px; }
.ft-ovr span{ color:var(--mute); } .ft-ovr b{ font:20px/1 var(--display); }
.ft-ovr em{ font-style:normal; font-weight:800; color:var(--dim); } .ft-ovr em.up{ color:#3ddc84; } .ft-ovr em.dn{ color:#ff6b6b; }
.ft-ovr i{ height:6px; background:var(--panel2); border-radius:3px; overflow:hidden; } .ft-ovr u{ display:block; height:100%; background:var(--club); text-decoration:none; }
.ft-goals{ height:58px; overflow-y:auto; border-top:1px solid var(--line); }
.md-wrap:has(.ft-card){ gap:12px; }
.md-wrap:has(.ft-card) .md-board{ padding:12px; }
.md-wrap:has(.ft-card) .md-num{ font-size:48px; }
.ft-ovr{ height:38px; }
.ft-rate{ height:50px; }

/* v5.29: condensed full time, and the chance card always in the dock */
.md-ck{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--club); min-height:16px; text-align:center; }
.md-ck b{ font-weight:800; }
.md-wrap:has(.ft-card){ gap:8px; padding-top:calc(8px + env(safe-area-inset-top)); }
.md-wrap:has(.ft-card) .md-head{ margin-top:-2px; }
.md-wrap:has(.ft-card) svg.md-crest.big{ width:46px; height:54px; }
.md-wrap:has(.ft-card) .md-side b{ font-size:15px; }
.md-wrap:has(.ft-card) .md-side{ gap:4px; }
.md-wrap:has(.ft-card) .md-board{ padding:10px 10px; }
.md-wrap:has(.ft-card) .md-num{ font-size:40px; }
.md-wrap:has(.ft-card) .md-score{ padding:4px 12px 6px; }
.md-wrap:has(.ft-card) .md-side small{ font-size:11px; }
.ft-card .ft-h{ height:34px; font-size:19px; }
.ft-stats{ display:grid; grid-template-columns:repeat(4, 1fr); border-bottom:1px solid var(--line); }
.ft-stats div{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:58px; gap:2px; border-left:1px solid var(--line); }
.ft-stats div:first-child{ border-left:0; }
.ft-stats b{ font:26px/1 var(--display); }
.ft-stats span{ font-size:11px; color:var(--mute); letter-spacing:.06em; text-transform:uppercase; }
.ft-card .ft-rate{ display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:10px; height:48px; padding:0 14px; border-bottom:0; background:rgba(255,255,255,.04); }
.ft-card .ft-rate span{ text-align:left; font-size:13px; color:var(--mute); font-weight:700; }
.ft-card .ft-rate b{ font:32px/1 var(--display); text-align:left; }
.ft-card .ft-rate em{ font-style:normal; font-weight:800; font-size:13px; color:var(--dim); min-width:44px; text-align:right; }
.ft-card .ft-rate em.up{ color:#3ddc84; } .ft-card .ft-rate em.dn{ color:#ff6b6b; }
.ft-goals{ height:92px !important; overflow-y:auto; border-top:0 !important; }
.ft-goals li{ padding:5px 0 !important; font-size:13.5px; }
.ft-season{ display:grid; grid-template-columns:auto repeat(4, auto); gap:12px; align-items:baseline; justify-content:space-between; padding:9px 12px; border:1px solid var(--line); border-left:3px solid var(--comp, var(--club)); border-radius:12px; background:rgba(5,7,10,.55); font-size:12px; color:var(--mute); }
.ft-season > span{ font-weight:800; letter-spacing:.06em; color:var(--text); }
.ft-season b{ font:19px/1 var(--display); color:var(--text); margin-right:2px; }
.md-dock .md-ck + .md-dock-btns{ margin-top:0; }
.md-dock .md-note{ font-size:11.5px; text-align:left; min-height:16px; }
.md-wrap:has(.ft-card){ padding-bottom:calc(138px + env(safe-area-inset-bottom)); }

/* ---------- shop v5.35: player card, stats, training packs ---------- */
.scard{ position:relative; margin-bottom:14px; padding:14px; border-radius:14px; background:var(--panel2); border:1px solid var(--line2); overflow:hidden; --tc:#8d9097; }
.scard.tier1{ --tc:#c9cfd8; } .scard.tier2{ --tc:#e8c22c; } .scard.tier3{ --tc:#39b8ff; } .scard.tier4{ --tc:#f0abfc; }
.scard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--tc); }
.scard.tier2::after,.scard.tier3::after,.scard.tier4::after{ content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px; background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent); animation:pcsweep 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes pcsweep{ 0%,55%{ left:-80px; } 100%{ left:110%; } }
.scard-top{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.scard-ovr{ display:flex; flex-direction:column; align-items:center; min-width:56px; }
.scard-ovr b{ font:400 44px/1 var(--display); color:var(--tc); }
.scard-ovr span{ font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--mute); }
.scard-who{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.scard-who b{ font:400 22px/1.1 var(--display); text-transform:uppercase; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scard-tier{ align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--bg); background:var(--tc); padding:2px 8px; border-radius:20px; }
.scard-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.sst{ position:relative; display:grid; grid-template-columns:34px 28px 1fr auto; align-items:center; gap:6px; --sc:var(--ok); }
.sst.elite{ --sc:var(--elite); } .sst.great{ --sc:var(--great); } .sst.good{ --sc:var(--good); } .sst.ok{ --sc:var(--ok); } .sst.poor{ --sc:var(--poor); }
.sst-l{ font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--mute); }
.sst b{ font:400 20px/1 var(--display); color:var(--sc); text-align:right; }
.sst i{ position:relative; height:6px; border-radius:3px; background:var(--line2); overflow:hidden; }
.sst i::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--sc); border-radius:3px; transform-origin:left; animation:sstgrow .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sstgrow{ from{ transform:scaleX(0); } }
.sst em{ font-style:normal; font-size:11px; font-weight:800; color:var(--great); min-width:22px; }
.sst.flash b{ animation:sstpop .9s ease-out; } .sst.flash i{ animation:sstflash .9s ease-out; }
@keyframes sstpop{ 30%{ transform:scale(1.5); color:#fff; } }
@keyframes sstflash{ 30%{ background:var(--sc); } }
.scard-prog{ margin-top:12px; display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--mute); }
.scard-prog i{ flex:1; height:4px; border-radius:2px; background:var(--line2); overflow:hidden; }
.scard-prog u{ display:block; height:100%; background:var(--tc); }
.pk,.pk-free{ display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:10px; border-radius:12px; background:var(--panel2); border:1px solid var(--line2); }
.pk-free{ border-color:var(--great); justify-content:space-between; animation:pkpulse 1.8s ease-in-out infinite; }
@keyframes pkpulse{ 50%{ box-shadow:0 0 0 3px rgba(47,191,113,.18); } }
.pk-art{ flex:none; width:54px; height:70px; border-radius:8px; display:grid; place-items:center; background:var(--pc); color:#111; transform:rotate(-4deg); box-shadow:inset 0 0 0 3px rgba(0,0,0,.18); }
.pk-art b{ font:400 13px var(--display); letter-spacing:.06em; writing-mode:vertical-rl; transform:rotate(180deg); }
.pk:hover .pk-art{ transform:rotate(3deg) scale(1.05); transition:transform .2s; }
.pk-reveal{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:rgba(5,6,8,.94); padding:24px; animation:pkfade .25s both; }
@keyframes pkfade{ from{ opacity:0; } }
.pk-rv-t{ font:400 28px var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--pc); }
.pk-rv-list{ width:min(340px,100%); display:flex; flex-direction:column; gap:10px; }
.pk-rv{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:14px; border-radius:12px; background:var(--panel2); border:1px solid var(--pc); animation:pkcard .55s cubic-bezier(.2,1.2,.3,1) both; animation-delay:calc(var(--i) * .45s + .2s); }
@keyframes pkcard{ from{ opacity:0; transform:translateY(24px) scale(.85) rotateX(60deg); } }
.pk-rv span{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:13px; }
.pk-rv b{ font:400 24px var(--display); } .pk-rv u{ text-decoration:none; color:var(--mute); margin:0 6px; }
.pk-rv em{ font-style:normal; font:400 22px var(--display); color:var(--great); }
.pk-rv.rare{ background:var(--pc); color:#111; } .pk-rv.rare em,.pk-rv.rare u{ color:#111; }
.pk-reveal .btn{ animation:pkfade .4s 1.9s both; }
.life-fx{ color:var(--great) !important; }

/* ---------- World (v5.40): other leagues, top scorers, brackets ---------- */
.wbar{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.wsel{ width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--line2); border-radius:10px; padding:11px 12px; font:inherit; font-weight:700; }
.wgo{ margin-bottom:10px; }
.wprog{ position:relative; height:22px; background:var(--panel2); border-bottom:1px solid var(--line); overflow:hidden; }
.wprog i{ position:absolute; inset:0 auto 0 0; background:var(--club); opacity:.16; }
.wprog span{ position:relative; display:block; padding:3px 12px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.wform{ display:inline-flex; gap:2px; }
.wform i{ width:15px; height:15px; border-radius:3px; display:grid; place-items:center; font:800 9px/1 var(--body); font-style:normal; color:#0c0d0f; background:var(--D); }
.wform i.W{ background:var(--W); } .wform i.L{ background:var(--L); color:#fff; }
.wt td{ vertical-align:middle; } .wt .tn{ margin-left:6px; } .wt .tn small{ color:var(--mute); font-weight:600; }
.gbar{ display:inline-block; height:4px; margin-left:6px; border-radius:2px; background:var(--club); vertical-align:middle; }
.wgb{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--panel2); border-bottom:1px solid var(--line); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.wgb b{ font:400 18px var(--display); color:var(--text); letter-spacing:.02em; }
.wgb.me b,.wgb.me{ color:#e8c22c; }
.wreal .wr-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.wreal .wr-row:first-of-type{ border-top:0; } .wr-row>span:nth-child(2){ flex:1; min-width:0; } .wr-row small{ color:var(--mute); } .wr-n{ font-size:12px; font-weight:800; color:var(--mute); }
/* brackets */
.wbk{ padding:14px 0 8px; }
.bk{ display:flex; gap:26px; overflow-x:auto; padding:6px 16px 14px; scroll-snap-type:x proximity; min-height:260px; }
.bk-col{ flex:none; width:150px; display:flex; flex-direction:column; justify-content:space-around; gap:10px; scroll-snap-align:start; }
.bk-h{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); text-align:center; padding-bottom:4px; }
.bk-t{ position:relative; border:1px solid var(--line2); border-radius:9px; background:var(--panel2); overflow:visible; }
.bk-col:not(:last-child) .bk-t::after{ content:""; position:absolute; top:50%; left:100%; width:13px; height:2px; background:var(--line2); }
.bk-col:not(:first-child) .bk-t::before{ content:""; position:absolute; top:50%; right:100%; width:13px; height:2px; background:var(--line2); }
.bk-t.mine{ border-color:var(--club); box-shadow:0 0 0 1px var(--club); }
.bk-t.mine::after,.bk-t.mine::before{ background:var(--club) !important; }
.bk-r{ display:flex; align-items:center; gap:7px; padding:6px 8px; font-size:12.5px; font-weight:700; }
.bk-r+.bk-r{ border-top:1px solid var(--line); }
.bk-r .sw{ width:10px; height:14px; flex:none; border-radius:2px; }
.bk-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-r b{ font:400 15px var(--display); }
.bk-r.won{ color:var(--text); } .bk-r.won b{ color:var(--W); } .bk-r.lost{ color:var(--dim); } .bk-r.me .bk-n{ color:var(--club); }
.bk-p{ text-align:center; font-size:10.5px; color:var(--mute); padding:2px 0 4px; border-top:1px solid var(--line); }
.bk-end{ justify-content:center; width:170px; }
.bk-champ{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:18px 10px; border-radius:14px; border:1px solid #e8c22c; background:var(--panel2); }
.bk-champ>span{ color:#e8c22c; } .bk-champ>span svg{ width:34px; height:34px; } .bk-champ b{ font:400 20px/1.1 var(--display); text-transform:uppercase; } .bk-champ small{ color:var(--mute); }
.bk-champ.me{ background:#e8c22c; color:#111; } .bk-champ.me small,.bk-champ.me>span{ color:#111; }
.bk-early{ margin:0 16px 8px; } .bk-early summary{ cursor:pointer; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); padding:6px 0; }
.bk-eh{ margin:10px 0 4px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.bk-lr{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; padding:5px 0; font-size:12.5px; border-top:1px solid var(--line); }
.bk-lr span:last-child{ text-align:right; } .bk-lr em{ font-style:normal; font-weight:800; color:var(--text); } .bk-lr .won{ font-weight:800; } .bk-lr.mine{ color:var(--club); }

/* ---------- match speed toggle (v5.41) ---------- */
.md-spd{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin:0 0 10px; }
.md-spd-l{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.md-spd-seg{ flex:1; max-width:300px; display:grid; grid-template-columns:1fr 1fr; }
.md-spd-seg button{ display:grid; grid-template-columns:auto auto; grid-template-areas:"a b" "c c"; column-gap:6px; justify-content:center; align-items:baseline; padding:7px 6px; line-height:1.1; }
.md-spd-seg button em{ font-style:normal; font-weight:800; opacity:.8; }
.md-spd-seg button small{ grid-area:c; font-size:10.5px; font-weight:600; opacity:.7; text-align:center; }
.md-spd-seg button.on{ box-shadow:inset 0 0 0 2px var(--club); }
.md-dock-btns .btn.md-wide{ grid-column:1/-1; }
/* v5.45: the matchday dock - one main action and a compact secondary */
.md-dock-row{ display:grid; grid-template-columns:1fr auto; gap:8px; width:100%; }
.btn.md-go{ justify-content:flex-start; gap:12px; height:58px; padding:0 18px 0 8px; border-radius:12px; border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.35);
  transition:transform .08s ease, filter .12s ease; text-align:left; min-width:0; }
.btn.md-go.md-kick{ background:var(--club); color:var(--club-ink); }
.btn.md-go.md-next{ background:var(--md-next); color:var(--md-next-ink); }
.md-go-ic{ flex:none; width:42px; height:42px; border-radius:9px; display:grid; place-items:center; background:rgba(0,0,0,.16); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.md-go-ic .ic{ width:18px; height:18px; margin-left:2px; }
.md-go-t{ display:flex; flex-direction:column; min-width:0; line-height:1.05; }
.md-go-t small{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.68; }
.md-go-t b{ font-family:Anton, Archivo, sans-serif; font-weight:400; font-size:21px; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.btn.md-alt{ height:58px; min-width:92px; padding:0 14px; border-radius:12px; gap:6px; flex-direction:column; background:rgba(255,255,255,.04);
  color:var(--text); border:1px solid var(--line2); font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:transform .08s ease, background .12s ease; }
.btn.md-alt .ic{ width:17px; height:17px; opacity:.85; }
.btn.md-go:active,.btn.md-alt:active{ transform:scale(.97); }
.btn.md-go:active{ filter:brightness(.93); }
.btn.md-alt:active{ background:rgba(255,255,255,.09); }
@media (hover:hover){ .btn.md-go:hover{ filter:brightness(1.06); } .btn.md-alt:hover{ background:rgba(255,255,255,.08); border-color:var(--mute); } }
.btn.md-go[disabled]{ opacity:.7; }
.md-skip{ justify-self:end; display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0 11px; border-radius:15px; border:1px solid var(--line2);
  color:var(--mute); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:transparent; }
.md-skip .ic{ width:12px; height:12px; }
.md-skip:active{ background:rgba(255,255,255,.08); }
/* v5.46: top scorers (rank, badge, player, goals); real players in their club's colour */
.tsb-card{ overflow:hidden; }
.tsb-lead{ position:relative; display:flex; align-items:center; gap:14px; padding:16px 16px 14px; background:linear-gradient(0deg, var(--panel), var(--panel)); border-bottom:1px solid var(--line); overflow:hidden; }
.tsb-lead::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--tc); }
.tsb-lead::after{ content:""; position:absolute; right:-40px; top:-60px; width:180px; height:180px; border-radius:50%; background:var(--tc); opacity:.12; pointer-events:none; }
.tsb-lcrest{ width:52px; height:58px; flex:none; }
.tsb-lp{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tsb-lp small{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.tsb-lp b{ font:400 24px/1.05 var(--display); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tsb-lp span{ font-size:12.5px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tsb-lg{ display:flex; flex-direction:column; align-items:flex-end; flex:none; position:relative; z-index:1; }
.tsb-lg b{ font:400 44px/1 var(--display); }
.tsb-lg small{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.tsb-lead.real .tsb-lp b{ color:#e8c22c; }
.tsb{ list-style:none; margin:0; padding:0; }
.tsb-r{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 14px 9px 12px; border-top:1px solid var(--line); min-height:54px; }
.tsb-r:first-child{ border-top:0; }
.tsb-n{ flex:none; width:24px; text-align:center; font:400 17px var(--display); color:var(--mute); }
.tsb-r.t1 .tsb-n{ color:#e8c22c; } .tsb-r.t2 .tsb-n{ color:#c9ccd2; } .tsb-r.t3 .tsb-n{ color:#c98a4b; }
.tsb-crest{ width:28px; height:32px; flex:none; }
.tsb-p{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tsb-p b{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tsb-p small{ font-size:12px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tsb-g{ flex:none; display:flex; flex-direction:column; align-items:flex-end; min-width:54px; }
.tsb-g b{ font:400 24px/1 var(--display); }
.tsb-g small{ font-size:11px; color:var(--mute); white-space:nowrap; }
.tsb-tag{ flex:none; display:inline-flex; align-items:center; gap:4px; max-width:96px; padding:3px 7px; border-radius:20px; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--tc); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.tsb-tag .ic{ width:12px; height:12px; flex:none; }
.tsb-tag.me{ background:#e8c22c; color:#141414; }
.tsb-r.real{ background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), transparent 75%); }
.tsb-r.real::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tc); }
.tsb-r.real .tsb-p b{ color:var(--text); }
.tsb-r.me .tsb-g b{ color:#e8c22c; }
.rv-esm{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); font-size:13px; color:var(--mute); }
.rv-esm .ic{ width:22px; height:22px; color:#e8c22c; flex:none; }
.rv-esm small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rv-esm b{ color:var(--text); }
.rv-esm.me{ border-color:#e8c22c; }
.next-h2h.wait{ color:#e8c22c; }
.next-h2h.wait i{ background:#e8c22c; }
.next-h2h.wait{ display:block; text-align:center; line-height:1.45; }
.next-h2h.wait i{ display:inline-block; vertical-align:middle; margin-right:6px; }
/* v5.47: every competition's fixtures */
.wfx .fx-sec{ border-top:1px solid var(--line); }
.wfx .fx-sec:first-child{ border-top:0; }
.wfx summary{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; font-size:13px; }
.wfx summary::-webkit-details-marker{ display:none; }
.wfx summary b{ font-weight:800; }
.wfx summary span{ color:var(--mute); font-size:12px; white-space:nowrap; }
.wfx .fx-sec[open] summary{ border-bottom:1px solid var(--line); }
.wfx .bk-list{ padding:2px 14px 8px; }
.wfx .fx-r{ padding:8px 0; font-size:13px; }
.wfx .fx-r:first-child{ border-top:0; }
.wfx .fx-r span{ display:flex; align-items:center; gap:6px; min-width:0; }
.wfx .fx-r span:last-child{ justify-content:flex-end; }
.wfx .fx-r em{ min-width:44px; text-align:center; }
.wfx .fx-r em.fx-v{ color:var(--mute); font-weight:600; }
.wfx .bk-champ{ margin:12px 14px 4px; }
/* v5.48: links from your fixtures to every competition's fixtures and bracket */
.fx-world{ margin:4px 0 12px; }
.fx-world>span{ display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 2px 8px; }
.fxw-row{ display:flex; flex-wrap:wrap; gap:8px; }
.fxw{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--line2); border-radius:20px; background:var(--panel2); color:var(--text); font-weight:700; font-size:13px; cursor:pointer; }
.fxw .ctag{ font-size:10px; padding:1px 5px; }
.fxw.all{ border-color:var(--club); color:var(--club); }
/* ============================================================
   POLISH (v5.50): one visual pass over every screen - a tidier
   header with the MDT phone in it, tab rows that fit a phone,
   filters behind one button, fixed-size matchday boards.
   ============================================================ */
/* header: sync status as a small pill, the phone beside Settings */
.top-r{ gap:8px; }
.sync{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:13px; border:1px solid var(--line2); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.sync:empty{ display:none; }
.sync i{ width:6px; height:6px; border-radius:50%; background:var(--dim); flex:none; }
.sync.ok i{ background:var(--W); }
.sync.busy i{ background:var(--ok); animation:syncPulse .8s ease-in-out infinite alternate; }
.sync.bad{ color:var(--ok); border-color:rgba(242,201,76,.35); }
.sync.bad i{ background:var(--ok); }
@keyframes syncPulse{ to{ opacity:.25; } }
@media (max-width:400px){ .sync{ width:26px; padding:0; justify-content:center; font-size:0; gap:0; } }
.mph-mini.mdtn-ph.top-ph{ --mw:21px; width:21px; height:43px; margin:0 3px; }
.top{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }

/* page titles and section labels */
.page-h{ margin:6px 0 16px; }
.page-h h2{ font-size:32px; letter-spacing:.01em; }
.page-h > .muted{ font-size:13px; font-weight:700; letter-spacing:.06em; }

/* the next fixture: one line of info, the bank as a pill */
.next-k{ display:flex; align-items:center; gap:8px; min-height:30px; margin-bottom:14px; }
.next-k .ctag{ margin-right:0; }
.next-when{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:var(--mute); font-weight:600; }
.next-shop{ flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px 0 10px; border-radius:15px; border:1px solid var(--line2); background:var(--panel2); font-size:12.5px; font-weight:800; color:var(--text); }
.next-shop .ic{ width:15px; height:15px; color:var(--club); }
.next-shop:active{ transform:scale(.96); }

/* Tables: one segmented row that always fits */
.seg.ttabs{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); width:100%; margin:0 0 14px; }
.seg.ttabs button{ padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; min-height:38px; }
.tt-bar b{ font:19px/1.1 var(--display); text-transform:uppercase; letter-spacing:.03em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; }
.tt-bar .wgo{ flex:none; margin:0; }

/* your fixtures: each competition carries its own links */
.fx-comp{ display:flex; align-items:center; gap:8px; padding:0 10px 0 0; }
.fx-cm{ flex:1; min-width:0; display:flex; align-items:center; gap:4px; padding:10px 0 10px 10px; text-align:left; }
.fx-cm .fx-cn b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-ca{ flex:none; display:flex; gap:6px; }
.fx-ca .fxw{ padding:0 11px; height:30px; font-size:12px; border-radius:15px; background:transparent; }
.fx-ca .fxw:active{ background:var(--panel2); }
.fx-all{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:2px 2px 12px; font-size:12.5px; color:var(--mute); }

/* Matches: search plus one Filters button; the grid opens on demand */
.frow{ display:flex; gap:8px; }
.frow .search{ flex:1; min-width:0; }
.ftog{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:46px; padding:0 14px; border:1px solid var(--line2); border-radius:var(--rs); background:var(--bg); font-weight:700; font-size:14px; color:var(--text); }
.ftog .ic{ width:17px; height:17px; color:var(--mute); }
.ftog.on{ border-color:var(--mute); background:var(--panel2); }
.ftog.has .ic{ color:var(--club); }
.ftog b{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--club); color:var(--club-ink); font-size:11.5px; font-weight:800; display:grid; place-items:center; }
.fgrid[hidden]{ display:none; }
.fs b{ white-space:normal; overflow-wrap:anywhere; line-height:1.05; }
.fs span{ white-space:normal; }

/* match page: shield badges, the round once */
svg.crest.sc-crest{ width:54px; height:63px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.mp-t{ font-size:12.5px; }

/* sheets: tab rows that fit, segmented choices that don't wrap */
.sh-tabs button{ padding:8px 10px; font-size:13.5px; }
.share-seg button{ font-size:13.5px; line-height:1.15; white-space:normal; }

/* matchday: speed toggle like every other switch */
.md-spd{ margin:0 0 8px; }
.md-spd-seg button{ display:flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:0 10px; }
.md-spd-seg button.on{ box-shadow:none; }
.md-spd-seg button em{ opacity:.6; font-weight:700; }
.md-links .md-leave{ display:inline-flex; align-items:center; gap:6px; color:var(--mute); font-weight:700; }
.md-links .md-leave .ic{ width:15px; height:15px; }
.md-links .md-home{ justify-self:end; }
/* the score board keeps one size from kick-off to full time on a normal phone (it only shrinks on short screens) */
@media (min-height:760px){
  .md-wrap:has(.ft-card){ gap:14px; padding-top:calc(16px + env(safe-area-inset-top)); }
  .md-wrap:has(.ft-card) .md-head{ margin-top:0; }
  .md-wrap:has(.ft-card) svg.md-crest.big{ width:76px; height:88px; }
  .md-wrap:has(.ft-card) .md-side{ gap:8px; }
  .md-wrap:has(.ft-card) .md-side b{ font-size:20px; }
  .md-wrap:has(.ft-card) .md-side small{ font-size:12px; }
  .md-wrap:has(.ft-card) .md-board{ padding:20px 12px; }
  .md-wrap:has(.ft-card) .md-score{ padding:8px 14px 10px; }
  .md-wrap:has(.ft-card) .md-num{ font-size:64px; }
}
@media (min-height:760px) and (max-width:560px){ .md-wrap:has(.ft-card) .md-num{ font-size:52px; } }
/* the dock's top line is one height in every state, so the buttons under it never jump */
.md-dock .md-ck{ min-height:42px; margin:0 0 8px; display:block; line-height:42px; text-align:center; width:100%; }
/* both badges on one line, two-line names under them */
.md-board{ align-items:start; }
.md-side b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.md-score{ align-self:center; }
@media (max-width:400px){ .sync{ border:0; width:12px; } }
.sh-tabs{ gap:2px; }
.sh-tabs button{ padding:8px 8px; font-size:13px; }
@media (max-width:520px){
  .fx-comp{ flex-wrap:wrap; padding:0; }
  .fx-cm{ flex-basis:100%; padding:10px 10px 4px; }
  .fx-ca{ padding:0 10px 10px 52px; }
}
.md-dock .md-links{ min-height:32px; align-items:center; }
/* a goal row's result is text, not the fixture list's result block */
.grow .mrow-meta [class^="res-"]{ display:inline; width:auto; height:auto; padding:0; background:none; border-radius:0; font-weight:800; }
.grow .mrow-meta .res-W{ color:var(--W); } .grow .mrow-meta .res-D{ color:var(--mute); } .grow .mrow-meta .res-L{ color:var(--L); }
/* wide screens: the header lines up with the page column */
@media (min-width:852px){ .top{ padding-left:calc((100% - 820px) / 2 + 16px); padding-right:calc((100% - 820px) / 2 + 16px); } }
/* a season's award: the winner on one line, the label above it */
.wgb{ flex-direction:column; align-items:flex-start; gap:4px; padding:12px 14px; }
.wgb span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--mute); }
.wgb span .ic{ width:14px; height:14px; color:#e8c22c; }
.wgb b{ font-size:22px; line-height:1.05; }
/* on the matchday screen a toast sits above the dock, never on its buttons */
body.md-open .toast{ bottom:calc(150px + env(safe-area-inset-bottom)); }
/* contrast: the faintest grey is a step lighter, so small labels read on the near-black */
:root{ --dim:#6c7482; }
.tab{ color:#7a8290; }
.fs.txt b{ white-space:normal; overflow:visible; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.15; }
/* ---------- highlights reel (v5.51, reel.js) ---------- */
.hl-cta{ margin:2px 0 12px; }
.btn.hl-go{ width:100%; min-height:58px; justify-content:flex-start; gap:12px; padding:0 16px; border-radius:14px; text-align:left; }
.btn.hl-go .ic{ width:22px; height:22px; flex:none; }
.hl-go span{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.hl-go b{ font:400 20px/1.05 var(--display); text-transform:uppercase; letter-spacing:.03em; }
.hl-go small{ font-size:12.5px; font-weight:700; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.reel-open{ overflow:hidden; }
.reel{ position:fixed; inset:0; z-index:400; background:#000; display:grid; place-items:center; }
.reel-cv{ width:100%; height:100%; object-fit:contain; display:block; }
.reel-top{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); pointer-events:none; }
.reel-top > *{ pointer-events:auto; }
.reel-x{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(8,9,11,.7); border:1px solid rgba(255,255,255,.18); color:#fff; }
.reel-x .ic{ width:20px; height:20px; }
.reel-st{ flex:1; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.reel-st.rec::before{ content:""; display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:#ff3b3b; vertical-align:0; animation:syncPulse .7s ease-in-out infinite alternate; }
.reel-skip{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:18px; background:rgba(8,9,11,.7); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.reel-skip .ic{ width:13px; height:13px; }
.reel-skip[hidden]{ display:none; }
.reel-panel{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(440px, calc(100% - 32px)); max-height:calc(100% - 100px); overflow:auto; padding:24px 22px 20px; border-radius:18px; background:#0e1117; border:1px solid #2a323e; box-shadow:0 20px 60px rgba(0,0,0,.6); text-align:center; }
.reel-panel[hidden]{ display:none; }
.reel-k{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--club); }
.reel-panel h2{ font:400 34px/1.05 var(--display); text-transform:uppercase; margin:8px 0 4px; }
.reel-l{ margin:0 0 14px; color:var(--mute); font-weight:600; }
.reel-n{ display:grid; grid-template-columns:auto auto auto auto; justify-content:center; align-items:baseline; gap:6px 6px; margin:0 0 18px; }
.reel-n b{ font:400 30px/1 var(--display); }
.reel-n span{ color:var(--mute); font-size:13px; margin-right:14px; }
.reel-btns{ display:flex; flex-direction:column; gap:10px; }
.reel-btns .btn{ width:100%; }
.reel-vid{ width:100%; max-height:42vh; border-radius:12px; background:#000; margin:0 0 14px; display:block; }
.reel .fine{ margin-top:12px; }
.reel-btns a.btn{ color:var(--text); text-decoration:none; }
.reel-st{ display:flex; align-items:center; gap:7px; }
.reel-st.rec::before{ margin-right:0; }