/* Wins.gr — shared styles (athletic.com.cy tokens, LIVESCORES-CON-CY-PLAN.md §7). */
/* Dark by default, light on request (data-theme="light", remembered per browser): the betfox.ai scheme — its navy
   board and ink for dark — with this site's own sky accent, live red and teal. The light theme is the original look. */
:root {
  --navy:#002855; --sky:#38bdf8; --sky-dark:#7dd3fc; --sky-light:#38bdf8; --dark:#111833;
  --ink:#E8ECF5; --text:#C9D0E0; --muted:#A9B3CC; --muted-2:#8A94B3;
  --line:#1C2440; --line-soft:#161E38; --soft:#1C2440; --soft-2:#141B36;
  --live:#ef4444; --live-bg:rgba(239,68,68,.16); --teal:#3DBB85; --teal-bg:rgba(61,187,133,.16); --gold:#f59e0b;
  --bg:#0B1020; --surface:#111833; --hdr:#111833; --foot:#080C18; --heading:#FFFFFF; --chip-on:#0284c7; --hl:rgba(56,189,248,.14); --goal-bg:rgba(255,255,255,.12); --goal-line:rgba(255,255,255,.75);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --sky:#0284c7; --sky-dark:#0369a1; --dark:#0a192f;
  --ink:#0f172a; --text:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f6; --soft:#f1f5f9; --soft-2:#f8fafc;
  --live:#dc2626; --live-bg:#fee2e2; --teal:#0d9488; --teal-bg:#ccfbf1; --gold:#b45309;
  --bg:#fff; --surface:#fff; --hdr:#002855; --foot:#00132e; --heading:#002855; --chip-on:#002855; --hl:#e0f2fe; --goal-bg:#f1f5f9; --goal-line:#94a3b8;
  color-scheme:light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* search filter hides cards and groups */
html { -webkit-text-size-adjust:100%; touch-action:pan-x pan-y; }   /* no pinch/double-tap zoom (iOS ignores user-scalable=no) */
body { margin:0; font:14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg);
       min-height:100vh; display:flex; flex-direction:column; }   /* footer stays at the bottom on short pages */
a { color:var(--sky); text-decoration:none; }
img { max-width:100%; }

/* --- header + burger drawer --------------------------------------------------------------- */
.hdr { position:sticky; top:0; z-index:20; height:48px; background:var(--hdr); color:#fff; padding:0 12px;
       display:flex; gap:10px; align-items:center; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.hdr .brand { line-height:0; }
.hdr .brand img { height:30px; }
.hdr nav { display:flex; gap:2px; margin-left:12px; }
.hdr nav a { color:#cbd5e1; font-weight:600; font-size:13px; padding:6px 10px; border-radius:4px; white-space:nowrap; }
.hdr nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.hdr nav a.on { color:#fff; }
#stat { margin-left:auto; color:#cbd5e1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.burger { flex:none; width:36px; height:36px; display:grid; place-content:center; gap:4px; padding:0; border:0; border-radius:4px; background:transparent; cursor:pointer; }
.burger span { display:block; width:20px; height:2px; background:#fff; border-radius:1px; transition:transform .2s, opacity .2s; }
.burger:focus { outline:none; }
.burger:focus-visible { outline:2px solid var(--sky-light); outline-offset:2px; }   /* keyboard only; no background on tap or hover */
body.menu .burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.menu .burger span:nth-child(2) { opacity:0; }
body.menu .burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
#shade { position:fixed; inset:48px 0 0; background:rgba(15,23,42,.45); z-index:15; display:none; }
#drawer { position:fixed; top:48px; left:0; bottom:0; width:100%; background:var(--surface); z-index:16; overflow-y:auto;
          transform:translateX(-100%); transition:transform .2s; box-shadow:2px 0 12px rgba(15,23,42,.2); }
body.menu #drawer { transform:none; }
body.menu #shade { display:block; }
#drawer h3 { margin:0; padding:12px 16px 6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
#drawer a { display:flex; gap:8px; align-items:center; padding:9px 16px; color:var(--ink); border-bottom:1px solid var(--line); font-size:13px; }
#drawer a:hover { background:var(--soft); }
#drawer a.on { color:var(--sky); font-weight:700; }
#drawer a img { width:16px; height:16px; flex:none; object-fit:contain; }
#drawer a em { margin-left:auto; font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--live); border-radius:9px; padding:0 6px; }
@media (max-width:820px) { .hdr nav { display:none; } }
/* Phones and tablets: the header scrolls away with the page; while the menu is open it is pinned so it can be closed. */
@media (max-width:1023px) {
  .hdr { position:relative; }
  body.menu .hdr { position:fixed; left:0; right:0; }
}

/* Theme switch (betfox.ai's): moon knob on the right = dark, sun on the left = light. Shown only with JS. */
.theme { flex:none; display:none; align-items:center; height:36px; padding:0 2px; border:0; background:transparent; color:#cbd5e1; cursor:pointer; }
.js .theme { display:inline-flex; }
.theme .track { position:relative; width:52px; height:26px; border-radius:13px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); }
.theme .track > svg { position:absolute; top:6px; width:12px; height:12px; }
.theme .track > svg:first-child { left:7px; } .theme .track > svg:nth-child(2) { right:7px; }
.theme .knob { position:absolute; top:2px; left:28px; width:20px; height:20px; border-radius:50%; background:var(--sky-light); color:#0B1020;
               display:inline-flex; align-items:center; justify-content:center; transition:left .15s; }
.theme .knob svg { width:12px; height:12px; }
.theme .sun { display:none; }
[data-theme="light"] .theme .knob { left:2px; }
[data-theme="light"] .theme .knob .sun { display:block; } [data-theme="light"] .theme .knob .moon { display:none; }
.theme svg { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.theme:focus-visible { outline:2px solid var(--sky-light); outline-offset:2px; border-radius:15px; }
@media (prefers-reduced-motion:reduce) { .theme .knob { transition:none; } }

/* Language toggle in the drawer: EL | EN, the active one on the accent pill. */
.langs { padding:6px 16px 14px; }
.lang { padding:0; border:0; background:none; cursor:pointer; }
.lang .track { display:inline-flex; padding:2px; border-radius:15px; background:var(--soft); border:1px solid var(--line); }
.lang .track span { min-width:40px; padding:4px 10px; border-radius:13px; font:700 12px/1.2 inherit; color:var(--muted); text-align:center; }
.lang .track span.on { background:var(--chip-on); color:#fff; }
.lang:focus-visible { outline:2px solid var(--sky); outline-offset:2px; border-radius:15px; }

/* --- layout -------------------------------------------------------------------------------- */
/* Desktop: sidebar of popular competitions + the page; below 1024 px the sidebar is hidden (burger menu instead). */
.layout { flex:1 0 auto; display:flex; width:100%; }
.side { display:none; }
@media (min-width:1024px) {
  .layout { max-width:1240px; margin:0 auto; gap:24px; padding-left:16px; }
  .side { display:block; flex:none; width:230px; position:sticky; top:48px; align-self:flex-start; max-height:calc(100vh - 48px);
          overflow-y:auto; padding:14px 0 24px; scrollbar-width:thin; }
  .side h3 { margin:10px 0 4px; padding:0 10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .side a { display:flex; gap:8px; align-items:center; padding:7px 10px; border-radius:6px; color:var(--ink); font-size:13px; }
  .side a:hover { background:var(--soft); }
  .side a.on { background:var(--soft); color:var(--sky); font-weight:700; }
  .side a img { width:18px; height:18px; flex:none; object-fit:contain; }
  .layout main { flex:1; min-width:0; margin:0; }
  /* The header's contents line up with the 1240 px layout below (the bar itself stays full width). */
  .hdr { padding-inline:max(12px, calc((100% - 1240px) / 2 + 16px)); }
}
main { max-width:1000px; width:100%; margin:0 auto; padding:6px 10px 40px; flex:1 0 auto; }
.crumbs { font-size:12px; color:var(--muted); margin:10px 0 2px; }
.crumbs a { color:var(--muted); }
.title { display:flex; gap:12px; align-items:center; margin:8px 0 12px; }
.title img { width:80px; height:80px; object-fit:contain; }   /* the league page's logo */
.title h1 { margin:0; font-size:22px; line-height:1.15; }
.title small { display:block; color:var(--muted); font-size:13px; font-weight:400; }
.empty { color:var(--muted); padding:24px 0; text-align:center; }
.err { color:var(--live); padding:24px 0; text-align:center; }
.foot { margin-top:32px; padding:16px; background:var(--foot); color:#8193b0; font-size:12px; text-align:center; }
.foot b { color:#cbd5e1; }
.foot p { margin:0; }
/* Age line and regulator by market (Layout.Regulator): ΕΕΕΠ banner, 21+ and ΕΟΠΑΕ on wins.gr, 18+ and the NBA (ΕΑΣ) on win.com.cy. */
.foot-icons { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:12px; }
.foot-icons .age { color:#fff; font-size:48px; font-weight:700; line-height:1; letter-spacing:-.11rem; }
.foot-icons img { display:block; height:50px; width:auto; }
.foot-icons { flex-wrap:wrap; }
.foot-icons .eopae img { height:45px; max-width:100%; }
/* wins.gr: the blue ΕΕΕΠ banner, as on stoixima.com (its .stx-eeep). */
.eeep { display:flex; align-items:center; justify-content:center; gap:22px; max-width:900px; margin:8px auto 20px; padding:18px 24px; background:#324268; color:#fff; text-align:left; }
.eeep-mark { flex:none; }
.eeep-mark img { display:block; width:56px; height:56px; }
.eeep p { margin:0; max-width:680px; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:16px; line-height:1.5; letter-spacing:.01em; text-wrap:balance; }
@media (max-width:640px) {
  .eeep { align-items:flex-start; gap:14px; padding:14px 16px; }
  .eeep-mark img { width:42px; height:42px; }
  .eeep p { font-size:12.5px; text-wrap:pretty; }
}
/* Popular competitions above the 21+ line: Cyprus and the popular list side by side (stacked on phones), each in two
   columns, left-aligned within the footer's centred block. */
.foot-lg { display:grid; grid-template-columns:1fr 1fr; gap:4px 32px; max-width:720px; margin:0 auto 16px; text-align:left; }
.foot-lg h4 { margin:0 0 6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#cbd5e1; }
.foot-lg a { display:block; padding:4px 0; color:#8193b0; font-size:13px; }
.foot-lg a:hover { color:#fff; }
.foot-lg div { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; align-content:start; }
.foot-lg h4 { grid-column:1 / -1; }
@media (max-width:640px) { .foot-lg { grid-template-columns:1fr; gap:14px; } }

/* chips / tabs */
.search { display:block; position:relative; margin:0; padding:4px 0; }
.search::before { content:""; position:absolute; left:12px; top:50%; width:12px; height:12px; margin-top:-8px; border:2px solid var(--muted-2); border-radius:50%; }
.search::after { content:""; position:absolute; left:23px; top:50%; width:2px; height:6px; margin-top:3px; background:var(--muted-2); transform:rotate(-45deg); }
.search input { width:100%; height:40px; padding:0 12px 0 36px; border:1px solid var(--line); border-radius:20px; background:var(--soft-2);
                font:16px/1 inherit; color:var(--ink); outline:none; -webkit-appearance:none; appearance:none; }
.search input:focus { border-color:var(--sky); background:var(--surface); box-shadow:0 0 0 3px rgba(2,132,199,.15); }
/* Our own clear button, shown whenever there is text (the browser's appears only with focus). */
.search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.search input { padding-right:40px; }
.qclear { display:none; position:absolute; right:5px; top:50%; width:32px; height:32px; margin-top:-16px; padding:7px; border:0; border-radius:50%;
          background:none; color:var(--muted); cursor:pointer; }
.qclear svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.qclear:hover { color:var(--ink); background:var(--soft); }
.search:has(input:not(:placeholder-shown)) .qclear { display:block; }
/* Back to top: a round button bottom right on phones and tablets (desktop has the sticky header and sidebar). */
#totop { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30; width:44px; height:44px; padding:0;
         display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--muted-2) 45%, transparent); border-radius:50%; background:var(--surface); color:var(--ink);
         box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; }
#totop svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#totop[hidden], body.menu #totop, body.sheet-open #totop { display:none; }
@media (min-width:1024px) { #totop { display:none; } }
/* Day list filters. Desktop, as skroutz.gr's listing bar: outlined dropdown pills («Κατάσταση αγώνα ⌄», «Διοργανώσεις ⌄»),
   the «⇅» sort dropdown, then the search; a pill turns filled when its filter is on. Phones: a
   «Φίλτρα» button left of the search opens all of them in a bottom sheet. Counts come from app.js. */
.tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tools .search { flex:1 1 220px; min-width:0; }
.fpills .chip small { display:inline; margin-left:4px; font-size:inherit; font-weight:500; opacity:.75; }
.qp { display:inline-flex; align-items:center; gap:8px; flex:none; height:40px; padding:0 18px; border:1px solid color-mix(in srgb, var(--muted-2) 55%, transparent);
      border-radius:20px; background:transparent; color:var(--ink); font:500 14px/1 inherit; white-space:nowrap; cursor:pointer; }
.qp:hover { border-color:var(--muted); }
.qp small { font-size:inherit; font-weight:700; }
.qp.on { background:var(--chip-on); border-color:var(--chip-on); color:#fff; }
.qp svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qp .chev { width:16px; height:16px; transition:transform .15s; }
.qp[aria-expanded="true"] .chev { transform:rotate(180deg); }
.qp.sort { font-weight:700; }
.dd { position:relative; flex:none; }
.dd-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:35; min-width:220px; padding:6px; border:1px solid var(--line); border-radius:12px;
           background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.dd-menu[hidden] { display:none; }
.dd-menu .chip { display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; height:40px; padding:0 12px; border:0; border-radius:8px;
                 background:none; color:var(--ink); font:500 14px/1 inherit; text-align:left; }
.dd-menu .chip:hover { background:var(--soft); }
.dd-menu .chip.on, .dd-menu .chip.all.on, .dd-menu .chip.live.on { background:var(--hl); color:var(--sky); font-weight:700; }
.dd-menu .chip.live { justify-content:flex-start; } .dd-menu .chip.live small { margin-left:auto; }
.dd-menu .chip small { opacity:.7; }
.dd-menu .fset { display:block; margin:4px 0 2px; padding:8px 12px; border-top:1px solid var(--line); font-size:13px; }
.mc-lg { display:none; }   /* a card's competition, shown only when the day list is sorted by time */
.bytime .mc-lg { display:block; order:-1; padding:2px 0 3px calc(54px + 8px + 20px + 8px);   /* under the team names: star column, gap, logo, gap */ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:1024px) {
  .bytime .mc > .mc-lg { grid-column:1 / -1; grid-row:1; padding-top:0; padding-bottom:0; }
  .bytime .mc > .mc-tm:first-child { grid-row:2; } .bytime .mc > .mc-tm:nth-child(2) { grid-row:3; } .bytime .mc > .od { grid-row:2 / 4; }
}
.fset { flex:none; align-self:center; font-size:12px; color:var(--sky); white-space:nowrap; }
.sheet .fset { display:inline-block; margin-top:10px; font-size:14px; }
.fbtn { display:none; flex:none; align-items:center; gap:6px; height:40px; padding:0 16px; border:1px solid var(--line); border-radius:20px;
        background:var(--surface); color:var(--text); font:700 14px/1 inherit; cursor:pointer; }   /* as the day chips */
.fbtn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.fbtn svg circle { fill:var(--surface); }
.fbtn b { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--chip-on); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.fbtn b[hidden] { display:none; }
@media (max-width:820px) { .fbtn { display:inline-flex; } .tools > .qp, .tools > .dd { display:none; } .tools .search { flex-basis:0; } }
.sheet { position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; background:rgba(5,10,25,.55); }
.sheet[hidden] { display:none; }
.sheet-in { width:100%; max-height:85vh; overflow-y:auto; padding:0 16px calc(16px + env(safe-area-inset-bottom));
            background:var(--surface); color:var(--ink); border-radius:16px 16px 0 0; animation:sheet .2s ease-out; }
@keyframes sheet { from { transform:translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sheet-in { animation:none; } }
.sheet-hd { position:relative; display:flex; align-items:center; justify-content:center; height:56px; margin:0 -16px; border-bottom:1px solid var(--line); font-size:17px; }
.sheet-hd .x { position:absolute; left:8px; top:8px; width:40px; height:40px; border:0; background:none; color:var(--ink); font-size:28px; line-height:1; cursor:pointer; }
/* Bin (top right): every filter back to its default, then the sheet closes. */
.sheet-hd .bin { position:absolute; right:8px; top:8px; width:40px; height:40px; display:grid; place-items:center; border:0; background:none; color:var(--ink); cursor:pointer; }
.sheet-hd .bin svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sheet h3 { margin:18px 0 10px; font-size:15px; }
.sheet .fpills { display:flex; flex-wrap:wrap; gap:8px; }
.sheet .chip { padding:8px 14px; font-size:14px; }
.sheet .go { display:block; width:100%; height:48px; margin-top:24px; border:0; border-radius:24px; background:var(--chip-on); color:#fff; font:700 15px/1 inherit; cursor:pointer; }
body.sheet-open { overflow:hidden; }
/* Text size (A− / A / A+): the content column (days, filters and the page's region) scales, text and rows together;
   three steps each way, set on <html> by the <head> snippet and app.js. The stylesheet is in px, so zoom, not a root
   font-size, is what scales it. */
:root[data-fz="-3"] { --fz:.85; } :root[data-fz="-2"] { --fz:.9; } :root[data-fz="-1"] { --fz:.95; }
:root[data-fz="1"] { --fz:1.1; } :root[data-fz="2"] { --fz:1.2; } :root[data-fz="3"] { --fz:1.3; }
main { zoom:var(--fz, 1); }
.fz { display:inline-flex; flex:none; height:40px; border:1px solid color-mix(in srgb, var(--muted-2) 55%, transparent); border-radius:20px; overflow:hidden; }
.fz button { min-width:40px; padding:0 10px; border:0; background:transparent; color:var(--ink); font:600 14px/1 inherit; cursor:pointer; }
.fz button + button { border-left:1px solid var(--line); }
.fz button:hover:not(:disabled) { background:var(--soft); }
.fz button:disabled { opacity:.35; cursor:default; }
.fz button[data-fz="-1"] { font-size:12px; } .fz button[data-fz="1"] { font-size:17px; }
.fz sup { font-size:.7em; margin-left:1px; }
:root:not([data-fz]) .fz button[data-fz="0"] { color:var(--sky); }
.sheet .fz { height:44px; }
.sheet .fz button { min-width:64px; }
@media (max-width:820px) { .tools > .fz { display:none; } }
.chips { display:flex; gap:6px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:16px; padding:5px 12px; font:600 12px/1.2 inherit; cursor:pointer; white-space:nowrap; }
.chip.on { background:var(--chip-on); border-color:var(--chip-on); color:#fff; }
.chip.live.on { background:var(--live); border-color:var(--live); }
.chip.all.on { background:var(--soft); border-color:var(--soft); color:var(--ink); }   /* same light grey as the odds cells */
.chip.live { display:inline-flex; align-items:center; gap:6px; }
.chip.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--live); }
.chip.live.on::before { background:#fff; }
.chip small { display:block; font-weight:400; font-size:10px; opacity:.8; }
#days .chip { display:inline-flex; align-items:baseline; gap:5px; }   /* the date right of the day, same small font */
#days .chip small { display:inline; }
.tabs { display:flex; gap:0; border-bottom:2px solid var(--line); overflow-x:auto; margin:4px 0 12px; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:none; padding:9px 14px; font-weight:700; font-size:13px; color:var(--muted); border:0; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab.on { color:var(--sky); border-bottom-color:var(--sky); }

/* league group heading */
h2.grp { scroll-margin-top:112px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
         margin:10px 0 0; display:flex; gap:6px; align-items:center; }
h2.grp img { width:16px; height:16px; object-fit:contain; }
h2.grp a { color:inherit; }
h2.grp a:hover { color:var(--sky); }

/* match card: star | home + score / minute | away + score / 1X2 (desktop: one row per match, 1X2 on the right) */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:6px; margin:4px 0 2px; }
.mc { display:flex; flex-direction:column; gap:1px; min-width:0; padding:4px 10px 6px; background:var(--surface); border:1px solid var(--line); border-radius:10px; color:inherit; }
.mc { -webkit-tap-highlight-color:transparent; }
.mc:focus { outline:none; }
.mc:focus-visible { outline:2px solid var(--sky-light); outline-offset:2px; }   /* keyboard only */
/* Pointer devices only: on touch screens :hover sticks to the last tapped card after going back. */
@media (hover:hover) { a.mc:hover { border-color:var(--sky); } }
.mc-tm { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; }
.mc-l { flex:none; width:54px; display:flex; align-items:center; justify-content:center; }
.mc-l .star { width:22px; height:22px; font-size:20px; line-height:22px; }
.mc-tm img { width:20px; height:20px; flex:none; object-fit:contain; }
.mc-tm img + span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-tm b { flex:none; min-width:20px; text-align:right; font-weight:800; font-size:15px; color:var(--ink); }
.mc-tm.win span { font-weight:700; }
.mc-tm + .mc-tm { margin-top:1px; }   /* 1 px more between home and away */
/* Phones and tablets: card text 1 px smaller. */
@media (max-width:1023px) {
  .mc-tm { font-size:13px; } .mc-tm b { font-size:14px; } .mc .min { font-size:10px; }
  .mc .od b .k { font-size:11px; } .mc .od b .p { font-size:13px; } .mc .od b .p i { font-size:10px; }
  .mc .ev { font-size:9px; } .mc .od.none .no { font-size:10px; }
}
@media (min-width:1024px) {
  .cards { grid-template-columns:1fr; gap:6px; }
  .mc { display:grid; grid-template-columns:minmax(0, 1fr) 270px; column-gap:24px; row-gap:4px; align-items:center; padding:8px 12px; }
  .mc > .mc-tm:first-child { grid-column:1; grid-row:1; }
  .mc > .mc-tm:nth-child(2) { grid-column:1; grid-row:2; }
  .mc > .od { grid-column:2; grid-row:1 / 3; margin:0; }
  .mc > .ev { grid-column:1 / -1; }
  .mc-l .star, .lg .star { width:20px; height:20px; font-size:16px; line-height:20px; }   /* smaller on desktop */
}
.min { font-weight:700; font-size:11px; color:var(--muted); }
.min.live { color:var(--live); display:flex; align-items:center; gap:5px; }
/* Pulsating red dot next to the minute of a match in play (rows and the match-centre pill). */
.min.live::before, .pill.live::before {
  content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 rgba(220,38,38,.6); animation:pulse 1.4s ease-out infinite;
}
.pill.live::before { display:inline-block; background:#fff; margin-right:5px; vertical-align:1px; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation-name:pulse-w; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(220,38,38,.6); opacity:1; } 70% { box-shadow:0 0 0 6px rgba(220,38,38,0); opacity:.55; } 100% { box-shadow:0 0 0 0 rgba(220,38,38,0); opacity:1; } }
@keyframes pulse-w { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow:0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .min.live::before, .pill.live::before { animation:none; } }
/* a goal since the last refresh (app.js goals()): the card flashes once in white (grey on the light theme) */
.mc.goal { animation:goal 1.2s ease-in-out; }
@keyframes goal { 35% { background:var(--goal-bg); border-color:var(--goal-line); } }
@media (prefers-reduced-motion: reduce) { .mc.goal { animation:none; } }
/* Every odds button looks the same (no favourite or live colouring): grey cell, accent price. */
.od { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:4px; font-size:14px; }
.od b { position:relative; display:flex; align-items:baseline; justify-content:space-between; min-width:0; padding:5px 10px; border-radius:6px; background:var(--soft); color:var(--sky); font-weight:700; line-height:1.2; }
.od b .k { font-size:12px; font-weight:500; color:var(--muted); }   /* 1 / X / 2 at the left, price at the right, one baseline */
.od b .p { position:relative; font-size:14px; }
/* Latest live price change: a small arrow just left of the price. */
.od b .p i { position:absolute; right:100%; top:50%; transform:translateY(-50%); margin-right:3px; font-size:11px; font-style:normal; }
.od b .p i.up { color:#22c55e; } .od b .p i.dn { color:var(--live); }
.od.off b { opacity:.4; }   /* suspended: the button looks disabled */
.od.none { position:relative; }
.od.none b { visibility:hidden; }
.od.none .no { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:6px;
               background:var(--soft-2); color:var(--muted); font-size:11px; text-align:center; }
.od b.na { color:var(--muted-2); font-weight:400; }
.star { width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer; font-size:18px; line-height:22px; color:var(--muted-2); }
.star:hover { color:var(--gold); }
.star.on { color:#f59e0b; }
.hero .star { vertical-align:-3px; margin-left:4px; }
h2.grp.fav, .cty.fav { color:var(--gold); }
.lg .star { flex:none; margin:-4px -4px -4px -6px; width:26px; height:26px; font-size:22px; line-height:26px; }   /* same size as on the match cards */
.title h1 .star { display:inline-block; vertical-align:2px; }
.ev { font-size:10px; color:var(--muted); }

/* tables */
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:center; font-size:11px; color:var(--muted); font-weight:700; background:var(--soft); padding:6px 4px; }
.tbl td { text-align:center; padding:6px 4px; border-bottom:1px solid var(--line-soft); }
.tbl td.l, .tbl th.l { text-align:left; }
.tbl tr.hl td { background:var(--hl); }
.tbl .tm { display:flex; gap:6px; align-items:center; }
.tbl .tm img { width:18px; height:18px; object-fit:contain; }
.tbl .pts { font-weight:800; }
.tbl .rk { width:28px; font-weight:700; border-left:3px solid transparent; }
.tbl .rk.z0 { border-left-color:var(--sky); }
.tbl .rk.z1 { border-left-color:var(--live); }
.tbl .rk.z2 { border-left-color:var(--gold); }
.wrap-x { overflow-x:auto; }
.form { display:inline-flex; gap:2px; }
.form b { width:16px; height:16px; border-radius:3px; color:#fff; font-size:10px; line-height:16px; text-align:center; }
.form .W { background:#16a34a; } .form .D { background:#94a3b8; } .form .L { background:var(--live); }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--muted); margin-top:8px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:4px; }
@media (max-width:640px) { .tbl .xs-hide { display:none; } }

/* round picker */
.rp { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 6px; }
.rp .rpb { display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); border-radius:4px; width:32px; height:32px; font-size:16px; color:var(--heading); }
.rp .rpb.off { opacity:.35; }
.rp b { font-size:14px; }
.day { font-size:12px; font-weight:700; color:var(--muted); background:var(--soft); padding:5px 8px; margin-top:10px; border-radius:4px; }

/* match centre */
.hero { background:var(--dark); color:#fff; border-radius:6px; padding:16px; margin:8px 0 10px; }
.hero .meta { font-size:12px; color:#94a3b8; text-align:center; }
.hero .meta a { color:#94a3b8; }
.hero .teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:12px 0 6px; }
.hero .tm { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-weight:700; font-size:15px; }
.hero .tm img { width:56px; height:56px; object-fit:contain; }
.hero .bookings { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; }   /* one card icon per booking */
.hero .bookings .ico { margin:0; }
.hero .score { font-size:38px; font-weight:800; letter-spacing:2px; text-align:center; }
.hero .score small { display:block; font-size:12px; font-weight:400; color:#94a3b8; letter-spacing:0; }
.hero .state { text-align:center; }
.pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:#334155; color:#fff; }
.pill.live { background:var(--live); }
.hero .meta.ko { margin-top:8px; }   /* kick-off above the odds, not started or finished */
.hero .od { max-width:360px; margin:10px auto 0; }   /* 1X2 buttons under the score, as on the board */
.hero .scorers { display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; font-size:12px; color:#cbd5e1; margin-top:8px; }
.hero .scorers div:first-child { text-align:right; }
.sec { margin:18px 0 6px; font-size:13px; font-weight:800; color:var(--heading); text-transform:uppercase; letter-spacing:.03em; }
h2.lsec { margin:28px 0 10px; font-size:16px; }   /* the league page's three sections */
.tl { list-style:none; margin:0; padding:0; }
.tl li { display:grid; grid-template-columns:1fr 44px 1fr; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.tl .m { text-align:center; font-weight:700; color:var(--muted); font-size:12px; }
.tl .a { text-align:left; }
.tl .h { text-align:right; }
.tl small { color:var(--muted); }
.ico { display:inline-block; width:10px; height:13px; border-radius:2px; vertical-align:-2px; margin:0 4px; }
.ico.y { background:#facc15; } .ico.r { background:var(--live); }
.bar { display:grid; grid-template-columns:44px 1fr 44px; gap:8px; align-items:center; font-size:13px; margin:8px 0; }
.bar .lbl { grid-column:1 / 4; text-align:center; font-size:12px; color:var(--muted); margin-bottom:-4px; }
.bar .v { font-weight:700; }
.bar .v:last-child { text-align:right; }
.bar .track { display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--soft); }
.bar .track i { display:block; height:100%; }
.bar .track i:first-child { background:var(--heading); }
.bar .track i:last-child { background:var(--sky); }
.lu { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lu h4 { margin:0 0 4px; font-size:13px; }
.lu ol { list-style:none; margin:0; padding:0; font-size:13px; }
.lu li { padding:3px 0; border-bottom:1px solid var(--line-soft); display:flex; gap:8px; }
.lu li b { width:22px; color:var(--muted); text-align:right; }
.lu li i { margin-left:auto; color:var(--muted); font-style:normal; font-size:11px; }
.lu .sub { margin-top:10px; font-size:12px; color:var(--muted); }
.note { font-size:12px; color:var(--muted); }
.best { background:var(--teal-bg); color:var(--teal); font-weight:800; border-radius:3px; padding:0 4px; }
@media (max-width:640px) { .lu { grid-template-columns:1fr; } .hero .score { font-size:30px; } .hero .tm img { width:42px; height:42px; } }

/* competitions index */
.cty { scroll-margin-top:112px; margin:14px 0 4px; font-size:12px; font-weight:800; text-transform:uppercase; color:var(--muted); display:flex; gap:6px; align-items:center; }
.cty img { width:18px; height:13px; object-fit:cover; border-radius:2px; }
.lgs { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px; }
.lg { display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); }
.lg:hover { border-color:var(--sky); }
.lg img { width:26px; height:26px; object-fit:contain; }
.lg small { display:block; color:var(--muted); font-size:11px; }

/* odds tools */
.ot { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:9px 0; border-bottom:1px solid var(--line-soft); color:inherit; }
.ot .who { font-weight:700; font-size:13px; }
.ot .who small { display:block; font-weight:400; color:var(--muted); font-size:11px; }
.ot .px { text-align:right; font-size:13px; white-space:nowrap; }
.ot .px s { color:var(--muted); }
.ot .px b { color:var(--teal); }
.ot .px .dn { color:var(--live); font-weight:800; }
.bk { display:inline-block; font-size:10px; font-weight:700; color:var(--sky-dark); background:var(--hl); border-radius:3px; padding:0 4px; }