@charset "UTF-8";
/*
Theme Name: BolaKini
Theme URI: https://201990.com/
Author: BolaKini Studio
Description: Portal bola sepak Malaysia — dwibahasa (Bahasa Melayu / English), berasaskan data perlawanan sebenar. Malaysian football portal, bilingual MS/EN, real match data.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: bolakini
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --bg:#f3f6fa;
  --bg-2:#eef3f8;
  --card:#ffffff;
  --ink:#0d1622;
  --ink-2:#4d5e73;
  --ink-3:#8194a8;
  --line:#e2e9f1;
  --line-2:#eef2f7;

  --brand:#0a6b4f;
  --brand-d:#064534;
  --brand-m:#0f8a66;
  --brand-l:#e7f5ef;
  --gold:#f2b01e;
  --gold-l:#fdf3d8;
  --live:#d31f36;
  --live-l:#fdeaec;
  --win:#0f7a4a;
  --loss:#c62d3e;
  --draw:#8b95a3;

  --r:14px;
  --r-sm:10px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(13,22,34,.05), 0 8px 24px -18px rgba(13,22,34,.35);
  --shadow-h:0 2px 6px rgba(13,22,34,.07), 0 18px 34px -22px rgba(13,22,34,.4);
  --wrap:1200px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em;font-weight:800}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand-m);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
/* Page heading that repeats text already shown in the scoreboard block. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   3. Header
   ========================================================================== */
.topline{height:4px;background:linear-gradient(90deg,var(--brand) 0%,var(--brand-m) 42%,var(--gold) 100%)}
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hd-in{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  background:linear-gradient(145deg,var(--brand) 0%,var(--brand-d) 100%);
  display:grid;place-items:center;box-shadow:0 4px 12px -6px rgba(10,107,79,.8);
}
.brand-mark svg{width:22px;height:22px;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-nm{font-size:19px;font-weight:900;letter-spacing:-.02em}
.brand-nm em{font-style:normal;color:var(--brand)}
.brand-tg{font-size:10.5px;color:var(--ink-3);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
.nav a{
  padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:650;color:var(--ink-2);
  white-space:nowrap;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--bg-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brand-l);color:var(--brand-d)}

.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lang{display:flex;align-items:center;background:var(--bg-2);border-radius:9px;padding:3px;gap:2px}
.lang a{
  display:block;padding:5px 10px;border-radius:7px;font-size:12.5px;font-weight:800;
  color:var(--ink-3);letter-spacing:.03em;
}
.lang a.on{background:#fff;color:var(--brand-d);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.hd-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--ink-2);
}
.hd-btn:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none}

/* mobile drawer */
.mnav{display:none}

/* ==========================================================================
   4. Section primitives
   ========================================================================== */
.sec{margin:30px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec-t{font-size:20px;font-weight:850;display:flex;align-items:center;gap:9px;min-width:0}
.sec-t .dot{width:4px;height:19px;border-radius:3px;background:var(--brand);flex:0 0 4px}
.sec-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-more{font-size:13.5px;font-weight:750;color:var(--brand);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.sec-more:hover{color:var(--brand-d)}
.sec-sub{font-size:13.5px;color:var(--ink-3);margin:-6px 0 14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.card-h h2,.card-h h3{font-size:15px;font-weight:800}
.card-b{padding:14px 16px}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;background:var(--bg-2);color:var(--ink-2);
  white-space:nowrap;
}
.pill-live{background:var(--live-l);color:var(--live)}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
.pill-ft{background:#eef2f7;color:var(--ink-2)}
.pill-ns{background:var(--brand-l);color:var(--brand-d)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){
  .pill-live i{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;
  background:radial-gradient(120% 140% at 88% -10%,#12856a 0%,#0a5540 46%,#063c2d 100%);
  box-shadow:0 24px 50px -34px rgba(6,69,52,.9);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(closest-side at 12% 8%,rgba(242,176,30,.18),transparent 70%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 74px);
}
.hero-in{position:relative;z-index:1;padding:24px 26px 26px}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#bfe8d9;margin-bottom:14px;
}
.hero-tag b{color:var(--gold)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center}
.hero-copy{min-width:0}
.hero-lge{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#a9d9c9;margin-bottom:8px}
.hero-lge img{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hero-h1{font-size:27px;line-height:1.22;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.hero-h1 a:hover{text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.hero-sum{font-size:14.5px;color:#cfe9df;max-width:46ch}
.hero-cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:10px 17px;border-radius:11px;
  background:var(--gold);color:#231a00;font-weight:850;font-size:13.5px;
  box-shadow:0 10px 22px -12px rgba(242,176,30,.95);
}
.hero-cta:hover{background:#ffc63a}

/* scoreboard inside hero */
.sb{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:16px 14px;backdrop-filter:blur(4px);
}
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.sb-time{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#bfe8d9}
.sb-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.sb-team{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.sb-team img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.sb-team .mono{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);font-weight:900;font-size:15px;color:#fff;
}
.sb-team b{font-size:12.5px;font-weight:700;text-align:center;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-sc{font-size:30px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-sc.vs{font-size:15px;color:#bfe8d9;padding:5px 9px;border:1px dashed rgba(255,255,255,.35);border-radius:8px;font-weight:800}

/* ==========================================================================
   6. Match rows / strips
   ========================================================================== */
.fxlist{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fxgroup + .fxgroup{border-top:1px solid var(--line)}
.fxg-h{
  display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--bg-2);
  font-size:12.5px;font-weight:800;color:var(--ink-2);
}
.fxg-h img{width:16px;height:16px;object-fit:contain;flex:0 0 16px}
.fxg-h a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxg-h a:hover{color:var(--brand)}
/* Long competition names ("Tercera División - REFF - Group 12") must stay on
   one line and give way to the match count. */
.fxg-h .cn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxg-h .cc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxg-h .ct{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:11.5px;color:var(--ink-3);font-weight:700;letter-spacing:.04em}

.fx{
  display:grid;grid-template-columns:minmax(0,1fr) 78px;align-items:center;gap:10px;
  padding:8px 14px;border-top:1px solid var(--line-2);transition:background .12s;
}
.fxg-b > .fx:first-child{border-top:0}
.fx:hover{background:#f8fbfd}
.fx-l{min-width:0}
.fx-t{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:1px 0}
.fx-t img{width:18px;height:18px;object-fit:contain}
.fx-t .mono{
  width:18px;height:18px;border-radius:50%;background:var(--bg-2);color:var(--ink-3);
  font-size:9px;font-weight:900;display:grid;place-items:center;
}
.fx-t .tn{font-size:13.8px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fx-t .g{font-size:13.8px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--ink);min-width:14px;text-align:right}
.fx-t.win .tn{font-weight:800}
.fx-t.lose .tn{color:var(--ink-3)}
.fx-t.lose .g{color:var(--ink-3);font-weight:700}
.fx-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
.fx-r .st{font-size:10.5px;font-weight:800;letter-spacing:.03em;background:none;padding:0;border:0;border-radius:0;white-space:nowrap}
.fx-r .st--live{color:var(--live)}
.fx-r .st--done{color:var(--ink-3)}
.fx-r .st--ns{color:var(--brand-d)}
.fx-r .ko{font-size:10.5px;color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* horizontal strip */
.strip{display:flex;gap:10px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 94%,transparent 100%)}
.strip::-webkit-scrollbar{display:none}
.mini{
  flex:0 0 214px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 12px;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s,border-color .14s;
}
.mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:#cfe0ec}
.mini-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;min-width:0}
.mini-l{font-size:10.5px;font-weight:750;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px}
.mini-t{min-width:0}
.mini-tr{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:7px;padding:1px 0}
.mini-tr img{width:16px;height:16px;object-fit:contain}
.mini-tr .tn{font-size:12.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-tr .g{font-size:12.5px;font-weight:850;font-variant-numeric:tabular-nums}
.mini-sc{font-size:11px;font-weight:800;color:var(--ink-2);text-align:right}

/* ==========================================================================
   7. Standings table
   ========================================================================== */
.tbl-wrap{overflow-x:auto;scrollbar-width:thin}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:7px 8px;text-align:center;white-space:nowrap}
.tbl th{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.tbl td{border-bottom:1px solid var(--line-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl .tm{text-align:left;min-width:150px}
.tbl .tm a{display:flex;align-items:center;gap:8px;min-width:0}
.tbl .tm img{width:18px;height:18px;object-fit:contain;flex:0 0 18px}
.tbl .tm .tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.tbl tbody tr:hover{background:#f8fbfd}
.tbl .pos{width:26px;font-weight:850;color:var(--ink-2)}
.tbl .pts{font-weight:900}
/* Narrow-card variant: keeps the points column on screen and drops the
   columns nobody reads in a 340px sidebar. */
.tbl.compact th,.tbl.compact td{padding:7px 6px}
.tbl.compact .tm{min-width:0}
.tbl.compact .tm img{width:16px;height:16px;flex-basis:16px}
.tbl.compact .pts{color:var(--brand-d)}
.sec-note{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:0;
  text-transform:none;margin-left:6px;vertical-align:middle}
.tbl .up{box-shadow:inset 3px 0 0 var(--win)}
.tbl .play{box-shadow:inset 3px 0 0 var(--brand-m)}
.tbl .down{box-shadow:inset 3px 0 0 var(--loss)}
.form{display:inline-flex;gap:3px}
.form i{width:16px;height:16px;border-radius:4px;font-size:9px;font-weight:900;font-style:normal;
  display:grid;place-items:center;color:#fff}
.form i.W{background:var(--win)}
.form i.D{background:var(--draw)}
.form i.L{background:var(--loss)}

/* ==========================================================================
   8. Teams / players cards
   ========================================================================== */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(0,1fr));gap:10px}
.tgrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tgrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transition:transform .14s,box-shadow .14s,border-color .14s;min-width:0;
}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:#cfe0ec}
.tcard img{width:40px;height:40px;object-fit:contain}
.tcard .mono{
  width:40px;height:40px;border-radius:50%;background:var(--bg-2);color:var(--ink-3);
  display:grid;place-items:center;font-weight:900;font-size:14px;
}
.tcard b{font-size:12.5px;font-weight:700;line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;width:100%}
.tcard span{font-size:10.5px;color:var(--ink-3);font-weight:650}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(0,1fr));gap:10px}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;
  transition:border-color .14s,box-shadow .14s;min-width:0;
}
.pcard:hover{border-color:#cfe0ec;box-shadow:var(--shadow)}
.pcard-img{
  width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--bg-2);
  display:grid;place-items:center;flex:0 0 44px;
}
.pcard-img img{width:44px;height:44px;object-fit:cover;border-radius:50%}
.pcard-img .mono{font-size:14px;font-weight:900;color:var(--ink-3)}
.pcard-b{min-width:0}
.pcard-b b{display:block;font-size:13px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-b span{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-meta{display:flex;gap:8px;margin-top:3px;font-size:11px;font-weight:700;color:var(--ink-2)}
.pcard-meta i{font-style:normal;color:var(--brand);font-weight:900}

/* ==========================================================================
   9. News
   ========================================================================== */
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ncard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s,border-color .14s;
}
.ncard:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:#cfe0ec}
.ncard-t{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.ncard-k{font-size:10.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.ncard-t h3{font-size:15.5px;font-weight:800;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ncard-t p{font-size:13px;color:var(--ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ncard-m{margin-top:auto;font-size:11.5px;color:var(--ink-3);font-weight:700;display:flex;gap:8px;align-items:center}

/* article */
.art{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.art-h1{font-size:30px;line-height:1.22;letter-spacing:-.02em;margin-bottom:10px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-3);
  font-weight:650;padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:20px}
.art-lead{font-size:17px;line-height:1.65;color:var(--ink-2);margin-bottom:20px}
.art-body{font-size:16.5px;line-height:1.78;color:#1b2734}
.art-body h2{font-size:22px;margin:34px 0 12px;padding-top:6px}
.art-body h3{font-size:18px;margin:26px 0 10px}
.art-body p{margin:0 0 18px}
.art-body a{color:var(--brand-d);font-weight:650;text-decoration:underline;text-decoration-color:rgba(10,107,79,.3);text-underline-offset:3px}
.art-body a:hover{text-decoration-color:currentColor}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px;list-style:disc}
.art-body ol{list-style:decimal}
.art-body li{margin-bottom:8px}
.art-body blockquote{
  margin:22px 0;padding:14px 18px;border-left:3px solid var(--gold);background:var(--gold-l);
  border-radius:0 10px 10px 0;font-size:15.5px;color:#4a3a05;
}
.art-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.art-body th,.art-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.art-body th{background:var(--bg-2);font-weight:800}
.art-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--ink-3)}

/* ==========================================================================
   10. Breadcrumbs, page hero, FAQ, pagination
   ========================================================================== */
.crumbs{font-size:12.5px;color:var(--ink-3);padding:14px 0 6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--ink-2);font-weight:650}
.crumbs a:hover{color:var(--brand)}
.crumbs i{font-style:normal;color:#c3cedb}

.phero{
  background:linear-gradient(135deg,#0a5540 0%,#08402f 100%);color:#fff;border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:20px;position:relative;overflow:hidden;
}
.phero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,176,30,.22),transparent)}
.phero h1{font-size:26px;line-height:1.24;margin-bottom:8px;position:relative;z-index:1}
.phero p{font-size:14px;color:#c9e4da;margin:0;max-width:75ch;position:relative;z-index:1}
.phero-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;position:relative;z-index:1}
.phero-stats div{font-size:12px;color:#a9d3c6;font-weight:700;letter-spacing:.03em}
.phero-stats b{display:block;font-size:19px;color:#fff;font-weight:900;letter-spacing:-.02em}

.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.faq details{border-top:1px solid var(--line-2)}
.faq details:first-child{border-top:0}
.faq summary{padding:13px 16px;font-size:14.5px;font-weight:750;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:18px;font-weight:700;color:var(--ink-3);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 16px 15px;font-size:14px;color:var(--ink-2);line-height:1.7}

.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin:22px 0;flex-wrap:wrap}
.pager a,.pager span{
  min-width:36px;height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--line);
  background:#fff;display:grid;place-items:center;font-size:13px;font-weight:750;color:var(--ink-2);
}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ==========================================================================
   11. Match detail page
   ========================================================================== */
.mh{
  border-radius:var(--r-lg);overflow:hidden;color:#fff;position:relative;
  background:radial-gradient(130% 130% at 50% -20%,#12795f 0%,#0a523d 45%,#06382b 100%);
  padding:22px 24px 24px;
}
.mh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.mh-lge{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:750;color:#bfe6d9;min-width:0}
.mh-lge img{width:22px;height:22px;object-fit:contain}
.mh-lge a:hover{color:#fff}
.mh-board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.mh-side{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0}
.mh-side img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.mh-side .mono{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:22px;font-weight:900}
.mh-side b{font-size:15px;font-weight:800;line-height:1.25;max-width:22ch}
.mh-side a:hover b{text-decoration:underline;text-underline-offset:3px}
.mh-sc{text-align:center;min-width:120px}
.mh-sc .n{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.mh-sc .n.vs{font-size:20px;padding:9px 14px;border:1px dashed rgba(255,255,255,.35);border-radius:10px;display:inline-block}
.mh-sc .st{margin-top:8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#bfe6d9}
.mh-sc .st--live{color:#ffb4bd}
.mh-meta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:18px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#a9d3c6;font-weight:650}
.mh-meta b{color:#fff;font-weight:800}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.panel-h{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:15px;font-weight:800;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.panel-b{padding:16px}

.stat-row{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:10px;margin-bottom:12px;font-size:13px}
.stat-row:last-child{margin-bottom:0}
.stat-row .v{font-weight:850;font-variant-numeric:tabular-nums;text-align:center}
.stat-mid{min-width:0}
.stat-mid .lb{font-size:11.5px;font-weight:750;color:var(--ink-2);text-align:center;margin-bottom:4px}
.stat-bar{height:6px;border-radius:4px;background:var(--bg-2);overflow:hidden;display:flex}
.stat-bar i{display:block;height:100%}
.stat-bar i.h{background:var(--brand)}
.stat-bar i.a{background:#9fb3c6}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}

.evt{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.evt:first-child{border-top:0}
.evt .mn{font-size:11.5px;font-weight:850;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.evt b{font-weight:750}
.evt .sub{font-size:11.5px;color:var(--ink-3)}

/* ==========================================================================
   12. Filter chips / tabs
   ========================================================================== */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:13px;font-weight:750;color:var(--ink-2);white-space:nowrap;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

.dates{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 95%,transparent)}
.dates::-webkit-scrollbar{display:none}
.date{
  flex:0 0 auto;padding:7px 13px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:750;color:var(--ink-2);text-align:center;line-height:1.3;
}
.date small{display:block;font-size:10px;color:var(--ink-3);font-weight:700}
.date.on{background:var(--brand);border-color:var(--brand);color:#fff}
.date.on small{color:#bfe6d9}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.ft{background:#08130f;color:#9fb3ab;margin-top:40px;padding:34px 0 20px;font-size:13.5px}
.ft-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:26px}
.ft h3{color:#fff;font-size:13px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.ft a:hover{color:#fff}
.ft li{margin-bottom:8px}
.ft-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ft-brand .brand-mark{background:linear-gradient(145deg,#12856a,#064534)}
.ft-brand b{color:#fff;font-size:17px;font-weight:900}
.ft p{color:#7d918a;line-height:1.7;max-width:42ch;margin:0}
.ft-bot{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#6d8179}
.ft-bot a{color:#8fa39b}

/* ==========================================================================
   14. Empty states
   ========================================================================== */
.empty{
  padding:22px 18px;text-align:center;color:var(--ink-3);font-size:13.5px;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--r);
}
.empty a{color:var(--brand);font-weight:750}

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tgrid-6{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:grid}
  .hd-in{height:60px;gap:12px}
  .mnav{
    display:none;background:#fff;border-bottom:1px solid var(--line);padding:10px 0 14px;
  }
  .mnav.open{display:block}
  .mnav a{display:block;padding:11px 20px;font-size:15px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
  .mnav a:last-child{border-bottom:0}
}
@media (max-width:720px){
  .wrap{padding:0 14px}
  .hero-in{padding:18px 16px 20px}
  .hero-h1{font-size:21px}
  .hero-sum{font-size:13.5px}
  .sb-team img,.sb-team .mono{width:38px;height:38px}
  .sb-sc{font-size:25px}
  .phero{padding:18px 16px}
  .phero h1{font-size:20px}
  .sec-t{font-size:17px}
  .ngrid{grid-template-columns:minmax(0,1fr)}
  .tgrid-6,.tgrid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .art{padding:18px 16px}
  .art-h1{font-size:23px}
  .art-body{font-size:16px;line-height:1.72}
  .mh{padding:16px 14px 18px}
  .mh-side img,.mh-side .mono{width:48px;height:48px}
  .mh-side b{font-size:12.5px}
  .mh-sc .n{font-size:34px}
  .mh-sc{min-width:92px}
  .ft-grid{grid-template-columns:1fr;gap:22px}
  .fx{padding:7px 12px;grid-template-columns:minmax(0,1fr) 64px}
  .fx-t .tn{font-size:13px}
  /* Standings: drop goals for/against on phones so position, played, goal
     difference and points all stay on screen without sideways scrolling. */
  .tbl .c-gf,.tbl .c-ga,.tbl .c-w,.tbl .c-d,.tbl .c-l,.tbl .c-form{display:none}
  .tbl th,.tbl td{padding:7px 5px;font-size:12.5px}
  .tbl th{font-size:10px}
  .tbl .tm{min-width:0}
}
@media (max-width:420px){
  .brand-tg{display:none}
  .tgrid-6,.tgrid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mh-board{gap:8px}
  .mh-side img,.mh-side .mono{width:40px;height:40px}
  .mh-sc .n{font-size:29px}
}