/* U365 Cricket — Phase-1 scaffold design system (from the blueprint) */
:root{
--bg:#F4F6FA; --surface:#FFFFFF; --surface2:#FBFCFE;
--ink:#15233B; --body:#3F4A59; --muted:#5B6472; --faint:#63707F;
--line:#E6EAF1; --line2:#EEF2F7; --soft:#EEF2F7; /* G15: --soft was used, never defined */
--navy:#15233B; --navy2:#1E3050;
--accent:#964742; --accent2:#ECD288; /* brand 14 Oct 2026: logo maroon and gold */
--live:#DF2B2B; --live-ink:#B42318; --loss:#B02A20; --win:#1A7C39; --warn:#C77700; --info:#2563EB;
--bd:#0B7A4B; --bd-red:#EE3A43;
--r:12px; --r-sm:9px; --r-lg:16px;
--sh-sm:0 1px 2px rgba(16,26,48,.05),0 1px 3px rgba(16,26,48,.06);
--sh:0 6px 22px rgba(16,26,48,.09);
--wrap:1180px;
/* D7: type scale. Use these for font-size; sizes off the scale are kept as literals until a design pass. */
--fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:26px;
--f-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
--f-disp:'Barlow Semi Condensed','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-body);font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--ink);margin:0;line-height:1.12;font-weight:700;letter-spacing:.2px}
.tnum{font-variant-numeric:tabular-nums}
/* G1: result lines. Neutral unless the page has a side; then a Won/Lost tag carries it, colour backs it up */
.res{font-size:var(--fs-xs);font-weight:600;color:var(--body)}
.res-w{color:var(--win)} .res-l{color:var(--loss)}
.rtag{display:inline-block;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.3px;text-transform:uppercase;line-height:1.5;padding:0 6px;border-radius:4px;margin-right:6px}
.rtag.rt-w{color:var(--win);background:#E7F3EB} .rtag.rt-l{color:var(--loss);background:#FCE8E8}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
/* ---------- demo banner ---------- */
.demo{background:repeating-linear-gradient(45deg,#FFF4D6,#FFF4D6 12px,#FFEFC2 12px,#FFEFC2 24px);color:#7a5a00;font-size:var(--fs-xs);font-weight:700;text-align:center;padding:5px 12px;border-bottom:1px solid #F0DFA6}
/* ---------- header ---------- */
/* ---------- live ticker ---------- */
.ticker{background:var(--navy2);border-top:1px solid rgba(255,255,255,.06);overflow:hidden}
.ticker-in{display:flex;gap:10px;padding:8px 0;overflow-x:auto;scrollbar-width:none}
.ticker-in::-webkit-scrollbar{display:none}
.tk{flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 12px;color:#e6edf6;font-size:12.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.tk b{color:#fff;font-weight:700}
.tk .st{font-size:10px;font-weight:800;letter-spacing:.5px}
/* ---------- breaking ---------- */
.breaking{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px 0}
.breaking .lbl{background:var(--live);color:#fff;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.6px;padding:3px 9px;border-radius:5px;text-transform:uppercase}
.breaking .txt{color:var(--ink);font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
/* ---------- layout ---------- */
main{padding:20px 0 60px}
.grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}
.sec-h h2{font-size:19px;text-transform:uppercase;letter-spacing:.5px}
/* G7: a section title that used to be an h3 keeps its look as an h2 (sizes stay inline) */
.sec-h h2.sh{text-transform:none;letter-spacing:.2px}
.sec-h h1{font-size:19px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;margin:0}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec-h a{color:var(--accent);font-weight:700;font-size:12.5px}
.mt{margin-top:26px}
/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.pill.live{background:#FCE8E8;color:var(--live-ink)}
.pill.up{background:#EAF0FA;color:var(--info)}
.pill.res{background:#E7F3EB;color:var(--win)}
.pill.bd{background:#E4F3EC;color:var(--bd)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;box-shadow:0 0 0 0 rgba(226,61,61,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,61,61,.55)}70%{box-shadow:0 0 0 7px rgba(226,61,61,0)}100%{box-shadow:0 0 0 0 rgba(226,61,61,0)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
/* card base */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.card.pad{padding:16px}
/* ---------- match cards ---------- */
.mrail{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mrail::-webkit-scrollbar{height:6px}.mrail::-webkit-scrollbar-thumb{background:#d4dce6;border-radius:4px}
.mrail-wrap{position:relative}
.mrail-nav{position:absolute;top:calc(50% - 3px);transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:var(--fs-2xl);line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(21,35,59,.16);align-items:center;justify-content:center;display:none}
.mrail-nav.show{display:flex}
.mrail-nav.prev{left:-8px}.mrail-nav.next{right:-8px}
.mrail-wrap.at-start .mrail-nav.prev{display:none}
.mrail-wrap.at-end .mrail-nav.next{display:none}
.mrail-wrap::after{content:"";position:absolute;top:0;right:0;bottom:6px;width:52px;pointer-events:none;background:linear-gradient(90deg,rgba(244,246,249,0),rgba(244,246,249,.95));opacity:0;transition:opacity .2s}
.mrail-wrap:not(.at-end)::after{opacity:1}
@media(max-width:760px){.mrail-nav{display:none!important}.mrail-wrap::after{display:none}}
.mcard{flex:0 0 320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;transition:.15s}
.mcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.mcard .top{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line2);font-size:11.5px;color:var(--muted);font-weight:600}
.mcard .body{padding:12px 13px}
.trow{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.tm{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:14.5px}
.flag{width:24px;height:16px;border-radius:3px;background:var(--line);flex:0 0 auto;overflow:hidden;font-size:0}
/* D1: team short-code chip in match cards (replaces the empty flag box) */
.flag.tcode{width:auto;min-width:36px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font:700 10.5px/1 var(--f-body);letter-spacing:.4px;color:var(--navy);background:var(--line);overflow:visible}
.score{font-family:var(--f-disp);font-weight:700;font-size:19px;color:var(--ink)}
.score small{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.mcard .note{padding:9px 13px;border-top:1px solid var(--line2);font-size:var(--fs-xs);color:var(--ink);font-weight:700;background:var(--surface2)}
.mcard .note.chase{color:var(--info)}
/* ---------- BD next match ---------- */
.bdnext{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden}
/* G22: the decorative circle on the Bangladesh card was removed (it carried no meaning) */
.bdnext .k{font-size:var(--fs-2xs);font-weight:800;letter-spacing:1px;color:var(--accent2);text-transform:uppercase}
.bdnext .vs{display:flex;align-items:center;gap:14px;margin:12px 0;font-family:var(--f-disp);font-size:var(--fs-3xl);font-weight:800}
.bdnext .cd{display:flex;gap:8px;margin-top:6px}
.bdnext .cd div{background:rgba(255,255,255,.1);border-radius:8px;padding:7px 10px;text-align:center;min-width:52px}
.bdnext .cd b{display:block;font-family:var(--f-disp);font-size:var(--fs-2xl)}
.bdnext .cd span{font-size:9.5px;color:#b9c6d8;text-transform:uppercase;letter-spacing:.5px}
.bdnext .cta{display:inline-block;margin-top:14px;background:var(--accent2);color:#15233B;font-weight:800;padding:9px 16px;border-radius:9px;font-size:var(--fs-sm)}
/* ---------- news ---------- */
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ncard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);transition:.15s}
.ncard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.ncard .img{aspect-ratio:16/9;background:linear-gradient(135deg,#dfe6f0,#c9d4e3);position:relative}
.ncard .img .cat{position:absolute;left:10px;top:10px;background:var(--navy);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:5px;text-transform:uppercase}
.ncard .c{padding:12px 13px}
.ncard h3{font-size:15.5px;color:var(--ink);line-height:1.25;margin-bottom:6px}
.ncard .meta{font-size:11.5px;color:var(--faint)}
.nlist .ni{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}
.nlist .ni:last-child{border-bottom:none}
.nlist .ni .th{width:74px;height:52px;border-radius:8px;background:linear-gradient(135deg,#dfe6f0,#c9d4e3);flex:0 0 auto}
.nlist .ni h3,.nlist .ni h4{font-size:var(--fs-base);color:var(--ink);line-height:1.3;font-family:var(--f-body);font-weight:700}
.nlist .ni .meta{font-size:var(--fs-2xs);color:var(--faint);margin-top:3px}
/* ---------- side widgets ---------- */
.w{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);margin-bottom:18px;overflow:hidden}
.w-h{padding:11px 14px;border-bottom:1px solid var(--line2);font-family:var(--f-disp);font-weight:700;font-size:var(--fs-md);color:var(--ink);display:flex;align-items:center;justify-content:space-between}
.w-b{padding:6px 14px 12px}
.rk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.rk:last-child{border-bottom:none}
.rk .n{width:20px;color:var(--faint);font-weight:800;font-family:var(--f-disp)}
.rk .nm{font-weight:700;color:var(--ink)}
.rk .v{margin-left:auto;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.mini{display:flex;gap:6px;margin:-2px 0 10px}
.mini button{flex:1;background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:5px;font-size:var(--fs-2xs);font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.mini button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.otd{font-size:var(--fs-sm);color:var(--body)}
.otd b{color:var(--ink)}
.poll .opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:9px 12px;margin-bottom:7px;font-weight:600;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;position:relative;overflow:hidden}
.poll .opt .bar{position:absolute;inset:0;background:rgba(150,71,66,.12);width:var(--p,0)}
.poll .opt span{position:relative}
.poll .opt .pc{position:absolute;right:10px;top:9px;font-weight:800;color:var(--accent);z-index:1}
/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-family:var(--f-body);text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:800;padding:9px 10px;border-bottom:2px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line2);color:var(--body);font-variant-numeric:tabular-nums}
.tbl td.l,.tbl th.l{text-align:left}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tbody tr:hover{background:var(--surface2)}
.tbl .nm{font-weight:700;color:var(--ink)}
.tbl tr.grp td{background:var(--surface2);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:7px 10px}
.tbl tbody tr.grp:hover{background:none}
.scroll-x{overflow-x:auto}
/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:none;padding:11px 14px;font-family:var(--f-body);font-weight:700;font-size:var(--fs-base);color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tab-p{display:none;padding:16px 0}
.tab-p.on{display:block}
/* ---------- match centre header ---------- */
.mc-hd{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;border-radius:var(--r-lg);padding:18px 20px;position:relative;overflow:hidden}
.mc-hd .meta{font-size:var(--fs-xs);color:#b7c4d6;display:flex;gap:10px;align-items:center}
.mc-hd .teams{margin:14px 0 8px}
.mc-hd .tr{display:flex;align-items:center;gap:12px;padding:6px 0}
.mc-hd .tr .nm{font-family:var(--f-disp);font-size:var(--fs-2xl);font-weight:700;flex:1}
.mc-hd .tr .sc{font-family:var(--f-disp);font-size:24px;font-weight:800}
.mc-hd .tr .sc small{font-size:var(--fs-sm);color:#c3cfdf;font-weight:600}
.mc-hd .eq{font-weight:700;color:var(--accent2);font-size:var(--fs-base);margin-top:4px}
.mc-hd .bat{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:#dbe4ef}
.mc-hd .bat b{color:#fff}
/* ---------- profile header ---------- */
.ph{display:flex;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);flex-wrap:wrap}
.ph .av{width:96px;height:96px;border-radius:16px;background:linear-gradient(135deg,var(--navy),var(--navy2));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-disp);font-size:34px;font-weight:800;flex:0 0 auto}
.ph h1{font-size:30px;margin-bottom:4px}
.ph .sub{color:var(--muted);font-size:var(--fs-base)}
.ph .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.chip{background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:var(--fs-xs);font-weight:700;color:var(--body)}
.ph .follow{margin-left:auto;background:var(--accent);color:#fff;border:none;font-weight:800;padding:10px 18px;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13.5px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800}
.stat .v{font-family:var(--f-disp);font-size:var(--fs-3xl);font-weight:800;color:var(--ink);margin-top:2px}
.stat .s{font-size:var(--fs-2xs);color:var(--faint)}
/* coverage indicator */
.cov{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:700;color:var(--warn);background:#FFF6E5;border:1px solid #F2E2B8;border-radius:20px;padding:3px 10px}
.cov.ok{color:var(--win);background:#E9F5EC;border-color:#CDE7D4}
/* timeline */
.tl{position:relative;padding-left:22px;margin-top:6px}
.tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl .ev{position:relative;padding:6px 0 12px}
.tl .ev::before{content:"";position:absolute;left:-19px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl .ev .y{font-family:var(--f-disp);font-weight:800;color:var(--ink);font-size:var(--fs-base)}
.tl .ev .d{font-size:var(--fs-sm);color:var(--body)}
.tl .ev.ed::before{background:var(--info)}
/* ---------- footer ---------- */
/* H13 (14 Oct 2026, homepage spec 14): footer. Desktop 320 / 288 / 288 / 312 columns, legal row, copyright row;
phones: one column, each group folds behind a 52px heading button, then language/account and the legal links */
footer{background:var(--navy);color:#c3cfdf;margin-top:40px;padding:40px 0 48px}
.ft-grid{display:grid;grid-template-columns:minmax(0,320fr) minmax(0,288fr) minmax(0,288fr) minmax(0,312fr);gap:24px}
.ft-logo{display:inline-flex;align-items:center;min-height:48px}
.ft-logo img{display:block;height:46px;width:auto}
.ft-brand p{color:#a8b6c9;font-size:var(--fs-sm);line-height:20px;max-width:320px;margin:14px 0 0}
.ft-soc{display:flex;gap:4px 16px;flex-wrap:wrap;margin-top:8px}
.ft-soc a,.ft-l a,.ft-legal a{display:flex;align-items:center;min-height:44px;color:#a8b6c9;font-size:var(--fs-sm)}
footer a:hover{color:#fff}
.ft-g h2{margin:0 0 6px}
.ft-t{all:unset;display:block;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.5px;cursor:default}
.ft-acct{display:none}
.ft-legal{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:4px}
footer .cr{border-top:1px solid rgba(255,255,255,.1);margin-top:4px;padding-top:14px;font-size:var(--fs-xs);color:#8394ab;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:767px){
footer{padding:32px 0 calc(32px + env(safe-area-inset-bottom))}
.ft-grid{grid-template-columns:1fr;gap:0}
.ft-logo img{height:37px}
.ft-brand{margin-bottom:24px}
.ft-g{border-top:1px solid rgba(255,255,255,.1)}
.ft-g h2{margin:0}
.ft-t{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;cursor:pointer;box-sizing:border-box}
.ft-t::after{content:"+";font-size:var(--fs-2xl);font-weight:400;color:#9fb0c6}
.ft-t[aria-expanded="true"]::after{content:"\2212"}
.ft-l{padding-bottom:10px}
.ft-l a{min-height:44px}
.ft-acct{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.ft-acct .lang-tog a,.ft-acct a.m-signin{display:inline-flex;align-items:center;min-height:44px;margin-block:0;padding-block:0}
.ft-acct .m-register{min-height:44px}
.ft-legal{flex-direction:column;gap:0;margin-top:24px}
}
.ft-t:focus-visible{outline:2px solid #ECD288;outline-offset:2px}
/* ---------- bottom nav (mobile) ---------- */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:50;justify-content:space-around;padding:6px 0 8px;box-shadow:0 -4px 16px rgba(16,26,48,.06)}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--muted);font-weight:700}
.bnav a i{font-size:var(--fs-xl)}
.bnav a.on{color:var(--accent)}
/* ---------- responsive ---------- */
@media(max-width:960px){
.grid{grid-template-columns:1fr}
.ngrid{grid-template-columns:repeat(2,1fr)}
.statgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.ngrid{grid-template-columns:1fr}
.bnav{display:flex}
main{padding:14px 0 40px}
.ph .follow{margin-left:0}
}
/* simple icons via unicode fallback */
.i{font-style:normal}
/* ===== FINAL UX CONSISTENCY PASS ===== */
/* 2. Form controls — one shared height + button system */
.pp-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pp-filter input:not([type=checkbox]):not([type=radio]),
.pp-filter select{height:40px;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-family:inherit;font-size:var(--fs-base)}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;box-sizing:border-box;padding:0 18px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:9px;font-family:inherit;font-weight:700;font-size:var(--fs-base);line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none}
.cp-btn:hover{filter:brightness(1.06)}
.cp-btn.sec,.cp-btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.cp-btn.sec:hover,.cp-btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.cp-btn.ghost{border-color:transparent;background:transparent}
/* 3. Section-header right labels — one shared style */
.sec-h .cp-sub,.cp-sub{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:0;text-transform:none}
/* 14. Subtle branded image fallback (teal cricket-ball seam on a light ground) */
.ncard .img,.nlist .ni .th,.imgfb{background-color:#eef2f7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='14' fill='none' stroke='%2313B8A6' stroke-opacity='.5' stroke-width='2'/%3E%3Cpath d='M15 24h18' stroke='%2313B8A6' stroke-opacity='.45' stroke-width='1.4' stroke-dasharray='2 3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:42px 42px}
/* 4. Live ticker overflow affordance — single flex row [‹][matches][›] */
.ticker .wrap{position:relative;display:flex;align-items:center;gap:2px}
.ticker .ticker-in{flex:1 1 auto;min-width:0}
.tk-nav{flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
.tk-nav:hover{background:rgba(255,255,255,.2)}
.tk-nav.show{display:inline-flex}
.ticker .wrap.at-start .tk-nav.prev{visibility:hidden}
.ticker .wrap.at-end .tk-nav.next{visibility:hidden}
.ticker .wrap::before,.ticker .wrap::after{content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.ticker .wrap::before{left:34px;background:linear-gradient(90deg,var(--navy2),rgba(30,48,80,0))}
.ticker .wrap::after{right:34px;background:linear-gradient(90deg,rgba(30,48,80,0),var(--navy2))}
.ticker .wrap:not(.at-start)::before{opacity:1}
.ticker .wrap:not(.at-end)::after{opacity:1}
@media(max-width:760px){.tk-nav{display:none!important}.ticker .wrap::before,.ticker .wrap::after{display:none}}
/* Fixture rows (live, home, team, series): the time cell never wraps, so on a phone it squeezed the match name
to ~85px and in Bengali ran off the screen. Below 600px the row stacks: match first, time and status under it. */
@media(max-width:600px){.tbl tr:has(>:is(td.r[style*="nowrap"],td.r.nowrap)){display:flex;flex-direction:column}.tbl tr:has(>:is(td.r[style*="nowrap"],td.r.nowrap))>td{display:block;width:auto}.tbl tr:has(>:is(td.r[style*="nowrap"],td.r.nowrap))>td.l{border-bottom:0;padding-bottom:2px}.tbl :is(td.r[style*="nowrap"],td.r.nowrap){white-space:normal!important;text-align:left;padding-top:2px}}
/* ===== D7 slice 3 (13 Oct 2026): header controls, formerly inline styles in partials/header.php ===== */
.lang-tog{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:800;white-space:nowrap}
.lang-tog a{text-decoration:none;color:rgba(255,255,255,.55)}
.lang-tog a.on{color:#fff}
.lang-tog .sep{color:rgba(255,255,255,.55)}
a.m-signin{font-weight:700;color:var(--accent2);text-decoration:none;font-size:var(--fs-base)}
a.m-register{font-weight:800;color:#15233B;background:var(--accent2);text-decoration:none;font-size:var(--fs-sm);padding:8px 14px;border-radius:9px}
/* ===== D2 (13 Oct 2026): the header fits at every width =====
Measured before: nav label "Live & Fixtures" wrapped at 1280/1440; the header overflowed at 768/1024;
at 320/390 the menu button sat off-screen (right edge 432px). Below 1200px the nav lives behind the
menu button as a drop-down panel; Register is a 44px target everywhere. */
.m-register{display:inline-flex;align-items:center;min-height:44px}
/* ===== D3 (13 Oct 2026): match-card score rows never break mid-figure =====
Each innings is an unbreakable line in the score column; long team names end in an ellipsis
(full name in the title; the team code chip sits before it). Scoped to .mcard. */
.mcard .trow{gap:10px}
.mcard .tm{flex:1;min-width:0}
/* G6: 320px leaves long Bengali names (উত্তরাখণ্ড) room beside a two-innings score; they have no break point */
.mcard .tm .nm{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.mcard .score{flex:0 0 auto;text-align:right;line-height:1.2;font-variant-numeric:tabular-nums}
.mcard .score .inn{display:block;white-space:nowrap}
.mcard .score .inn+.inn::before{content:"& "}
.mcard .score:has(.inn+.inn){font-size:var(--fs-lg)} /* two innings: smaller figures, more room for the name */
/* ===== D4 (13 Oct 2026): tab strips show they scroll =====
app.js sets .more-r / .more-l when tabs are hidden on that side; the edge fades so the strip reads
as scrollable. Snap keeps tabs aligned; focus ring visible for keyboard users. */
.tabs{scroll-snap-type:x proximity;scroll-padding:0 24px}
.tabs button{scroll-snap-align:start}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:6px}
.tabs.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.tabs.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.tabs.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
/* ===== D5 (13 Oct 2026): match preview on phones =====
Head-to-head stays three tiles across (it read 2 + 1 at 390px); each team's last-5 form stays on one
row - below 480px the two form cards stack, since a half-width card is 87px at 320px. */
.statgrid.h2h{grid-template-columns:repeat(3,1fr)}
.mc-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fpills{display:flex;gap:6px;flex-wrap:nowrap}
@media(max-width:480px){.statgrid.h2h{gap:8px}.statgrid.h2h .stat{padding:10px}.statgrid.h2h .stat .v{font-size:var(--fs-2xl)}.mc-form{grid-template-columns:1fr;gap:10px}}
/* ===== D6 (13 Oct 2026): no fake thumbnails =====
Every compact news item (home, article, team, player, series) renders an empty .th, so the slot only
ever showed the placeholder circle. Drop it; the headline takes the full row. If real images arrive,
give the item an ![]()
and a class, and show the slot for that class only. */
.nlist .ni .th{display:none}
/* ===== D7 slice 2 (13 Oct 2026): match page components, formerly inline styles in match.php =====
Values copied exactly; the three heading variants keep their existing spacing until a design pass. */
.mc-hd .tr img.tlogo{width:28px;height:28px;border-radius:6px;object-fit:contain;background:#fff;padding:2px}
.mc-hd .tr a.nm{color:#fff;text-decoration:none}
.mc .mc-h{margin:16px 0 8px;font-size:var(--fs-md)}
.mc .mc-h.inn{margin-top:14px;font-size:var(--fs-lg)}
.mc .mc-h.form{margin-top:18px}
.mc .mc-h .sub{color:var(--muted);font-weight:500;font-size:var(--fs-xs)}
.mc .cm-row{display:flex;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line)}
.mc .cm-ob{flex:none;width:46px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)}
.mc .cm-ob.w{color:#B02A20}
.mc .cm-ob.b{color:var(--accent)}
.mc .cm-tx{font-size:13.5px;line-height:1.5;color:var(--ink)}
/* ===== Match hero score (13 Oct 2026): never runs into the team name =====
Each innings is an unbreakable line in a right-aligned score column (as D3 did for match cards); the name
keeps whole words; when both cannot share a row (BN digits are wide) the score drops to its own line. On phones a row with a two-innings score sets both name and score at 18px. */
.mc-hd .tr{flex-wrap:wrap}
.mc-hd .tr .nm{flex:1 1 auto} /* sized from its text, so when name and score cannot share the row the score wraps to its own line; a word is never split (BN আফগানিস্তান) */
.mc-hd .tr .sc{flex:0 0 auto;margin-left:auto;text-align:right;line-height:1.15}
.mc-hd .tr .sc .inn{display:block;white-space:nowrap}
.mc-hd .tr .sc .inn+.inn::before{content:"& "}
@media(max-width:480px){.mc-hd .tr .sc:has(.inn+.inn){font-size:var(--fs-xl)}.mc-hd .tr:has(.inn+.inn) .nm{font-size:var(--fs-xl)}}
/* ===== D7 utilities (slice 4, team.php): repeated inline styles from the page templates, values copied exactly. !important gives them the precedence the inline style had (e.g. over .tbl .nm). ===== */
.empty{color:var(--muted)!important;padding:14px!important}
.t-acc{color:var(--accent)!important}
.t-win{color:var(--win)!important;font-weight:700!important}
.h-sec{margin:14px 0 8px!important;font-size:var(--fs-md)!important}
.pad-list{padding:4px 16px!important}
.meta-s{font-size:var(--fs-xs)!important;color:var(--muted)!important}
.h-sub{color:var(--muted)!important;font-weight:500!important;font-size:var(--fs-xs)!important}
/* ===== F1 (13 Oct 2026): icon set (partials/icons.php) =====
Line icons in the text colour; always beside a label. The current page in the phone bar gets a heavier stroke. */
.ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.bnav a{min-height:45px;justify-content:center;flex:1 1 0} /* G9: equal-width tabs, so each one is a full fifth of the bar to tap */ /* the emoji line set the height before; keep the 45px target */
.bnav a .ico{width:22px;height:22px}
.bnav a.on .ico{stroke-width:2.25}
/* ===== F5 (13 Oct 2026): page-top rhythm =====
main carries .wrap, and .wrap{padding:0 16px} (a class) overrode main{padding:20px 0 60px} (an element), so
main had no top padding: pages without a breadcrumb started their title 1-5px under the chrome, while
breadcrumb pages got 14px from the breadcrumb's own padding. One gap for every page: main gets it, the
breadcrumb stops adding its own. */
main.wrap{padding-top:14px}
main.wrap .crumbs{padding-top:0}
/* F2 (13 Oct 2026): small icon for meta lines (12-13px text), e.g. the match header's venue, toss, batter, bowler */
.ico.sm{width:15px;height:15px;vertical-align:-3px;margin-right:4px;stroke-width:1.9;opacity:.85}
/* G9: tap targets. A list row opens its main link from anywhere in the row (stretched link); a second link in the row stays on top */
.tbl tr:has(> td.l:first-child > a.nm:first-child),.tbl tr:has(> td.nm > a:first-child){position:relative}
.tbl tr > td.l:first-child > a.nm:first-child::after,.tbl tr > td.nm > a:first-child::after{content:"";position:absolute;inset:0}
.tbl td.nm ~ td a{position:relative;z-index:1;display:inline-block;padding:4px 0;margin:-4px 0}
/* small inline controls get a taller hit area without moving anything (padding offset by negative margin) */
.lang-tog a{padding:12px 5px;margin:-12px -5px}
a.m-signin{padding:11px 4px;margin:-11px -4px}
.breaking .txt{padding:6px 0;margin:-6px 0}
.sec-h a{padding:6px 0;margin:-6px 0}
.crumbs a{display:inline-block;padding:4px 0;margin:-4px 0}
.rk .nm a{display:inline-block;padding:4px 0;margin:-4px 0}
.plk{display:inline-block;padding:3px 0;margin:-3px 0}
/* G10: keyboard. A skip link, and one visible focus ring everywhere: teal on light areas, light teal on the navy bars */
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:#fff;color:var(--ink);font-weight:700;padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--sh)}
.skip:focus{top:10px}
/* FC (15 Oct): the skip link is a flex child of body and took the full width plus its 12px offset, 12px past the window edge */
.skip{width:max-content;max-width:calc(100% - 24px)}
#content{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hd :focus-visible,.ticker :focus-visible,footer :focus-visible{outline-color:#ECD288}
.tbl tr > td.l:first-child > a.nm:first-child:focus-visible,.tbl tr > td.nm > a:first-child:focus-visible{outline:none}
.tbl tr > td.l:first-child > a.nm:first-child:focus-visible::after,.tbl tr > td.nm > a:first-child:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.mcard:focus-visible{outline-offset:3px}
/* G12: light sub-labels inside headings use the body face; Barlow is loaded only at 700/800, so a 500/600 label no longer pulls in a third Barlow file */
.mc-h .sub,.h-sub,.cmt-count,h2 > span[style*="font-weight:500"],h3 > span[style*="font-weight:500"]{font-family:var(--f-body)}
/* G16: utilities for the most repeated inline styles; !important keeps the precedence the inline style had */
.t-muted{color:var(--muted)!important}.t-ink{color:var(--ink)!important}.t-navy{color:var(--navy)!important}
.no-ul{text-decoration:none!important}.minw0{min-width:0!important}.nowrap{white-space:nowrap!important}
.fs-2xs{font-size:var(--fs-2xs)!important}.fs-xs{font-size:var(--fs-xs)!important}.fs-sm{font-size:var(--fs-sm)!important}
.fs-base{font-size:var(--fs-base)!important}.fs-md{font-size:var(--fs-md)!important}.fs-lg{font-size:var(--fs-lg)!important}
.fs-xl{font-size:var(--fs-xl)!important}.fs-2xl{font-size:var(--fs-2xl)!important}.fs-3xl{font-size:var(--fs-3xl)!important}
/* G20: a Bangladesh match in a list gets a green edge in the Bangladesh colour (the team names say it too) */
.tbl tr.bd-row > td:first-child{box-shadow:inset 3px 0 0 var(--bd)}
/* Brand (14 Oct 2026): U365FUN BD crest replaces the ball-and-text mark */
/* ===== H1 (14 Oct 2026, homepage spec 01): container and header =====
Container: 1280 inner at most; side gutters 16 / 24 (768+) / 32 (1200+).
Header: under 1024 a 64px logo row (stays on screen) + a 44px language/account row + a drawer (