:root{
  --bg:#0b0b0d; --bg-alt:#08080a; --card:#161618; --card-hover:#1c1c1f; --border:#2a2a2e;
  --red:#e10600; --red-dark:#8f0500; --amber:#f5a524; --text:#f5f5f5; --muted:#a1a1aa; --muted2:#71717a;
  --maxw:1280px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ===== Header ===== */
header.site-header{background:rgba(11,11,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
.topbar{background:var(--red);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;font-size:11px;font-weight:600;color:#fff;letter-spacing:.03em;}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-badge{width:42px;height:42px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:17px;letter-spacing:-0.02em;}
.logo-text{font-weight:900;font-size:19px;letter-spacing:-0.03em;line-height:1;white-space:nowrap;}
.logo-text .red{color:var(--red);}
.logo-sub{font-size:9px;color:var(--muted2);text-transform:uppercase;letter-spacing:.18em;margin-top:3px;}
.navlinks{display:flex;gap:2px;align-items:center;}
.navlinks a{padding:9px 16px;font-size:14px;font-weight:600;color:#c4c4c8;border-radius:7px;transition:background .15s, color .15s;white-space:nowrap;}
.navlinks a:hover{color:#fff;background:var(--card);}
.navlinks a.active{color:#fff;background:var(--card);}
.navlinks a.active .navdot{background:var(--red);}
.navdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:transparent;margin-right:6px;vertical-align:middle;}
@media (max-width:760px){ .navlinks{display:none;} .logo-sub{display:none;} }

/* ===== Breadcrumb / page header ===== */
main{max-width:var(--maxw);margin:0 auto;padding:28px 20px 0;min-height:60vh;}
.crumb{font-size:12px;color:var(--muted2);margin-bottom:14px;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:#fff;}
h1.page-title{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-0.02em;margin:0;}
.subtitle{color:var(--muted);margin:6px 0 0;font-size:15px;}

/* ===== Hero ===== */
.hero-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:24px 0 44px;}
@media (min-width:1024px){ .hero-grid{grid-template-columns:2fr 1fr;} }
.hero-card{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--card);isolation:isolate;}
.hero-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.hero-card:hover img{transform:scale(1.04);}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.05) 75%);}
.hero-content{position:absolute;left:0;right:0;bottom:0;padding:28px;}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:5px;}
.tag.pl{background:var(--red);color:#fff;}
.tag.ll{background:var(--amber);color:#1a1200;}
.hero-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.time{color:#d4d4d8;font-size:12px;}
.hero-title{font-size:clamp(20px,3vw,30px);font-weight:900;line-height:1.2;margin:0;letter-spacing:-0.01em;}
.hero-source{color:var(--muted);font-size:12px;margin-top:10px;}

.sidebar{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;}
.sidebar h2{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;}
.compact-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.compact-item:first-child{padding-top:0;}
.compact-item:last-child{border-bottom:none;padding-bottom:0;}
.compact-thumb{width:76px;height:60px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#111;}
.compact-thumb img{width:100%;height:100%;object-fit:cover;}
.compact-title{font-size:13px;font-weight:700;line-height:1.35;margin:0 0 4px;}
.compact-item:hover .compact-title{color:var(--red);}
.compact-time{font-size:11px;color:var(--muted2);margin:0;}
.mini-tag{display:inline-flex;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px;margin-bottom:5px;}
.mini-tag.pl{background:rgba(225,6,0,.16);color:#ff6b63;}
.mini-tag.ll{background:rgba(245,165,36,.16);color:var(--amber);}

/* ===== League sections ===== */
section.league{margin-bottom:52px;}
.league-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.league-head .left{display:flex;align-items:center;gap:12px;}
.bar{width:5px;height:26px;border-radius:4px;}
.bar.pl{background:var(--red);}
.bar.ll{background:var(--amber);}
.league-head h2{font-size:21px;font-weight:900;text-transform:uppercase;letter-spacing:-0.01em;margin:0;}
.league-head .viewall{font-size:13px;font-weight:700;padding:6px 12px;border-radius:7px;border:1px solid var(--border);}
.league-head .viewall.pl{color:#ff6b63;}
.league-head .viewall.ll{color:var(--amber);}
.league-head .viewall:hover{border-color:currentColor;}

.grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1024px){ .grid{grid-template-columns:1fr 1fr 1fr 1fr;} }
.grid.grid-wide{grid-template-columns:1fr;}
@media (min-width:640px){ .grid-wide{grid-template-columns:1fr 1fr;} }
@media (min-width:1024px){ .grid-wide{grid-template-columns:1fr 1fr 1fr;} }

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease, border-color .18s ease, background .18s ease;}
.card:hover{transform:translateY(-3px);border-color:rgba(225,6,0,.45);background:var(--card-hover);}
.card-img{aspect-ratio:16/9;background:#111;overflow:hidden;}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-img img{transform:scale(1.06);}
.card-body{padding:16px;flex:1;display:flex;flex-direction:column;}
.card-meta{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.card-meta .time{color:var(--muted2);}
.card-title{font-size:14.5px;font-weight:700;line-height:1.4;margin:0;flex:1;}
.card:hover .card-title{color:#ff6b63;}
.card-desc{font-size:12.5px;color:var(--muted);margin:9px 0 0;line-height:1.55;}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;}
.card-foot .source{color:var(--muted2);font-weight:600;}
.card-foot .read{color:var(--red);font-weight:700;}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg, var(--red), var(--red-dark));border-radius:16px;padding:36px 28px;text-align:center;margin-bottom:52px;}
.cta h2{font-size:26px;font-weight:900;margin:0 0 8px;}
.cta p{color:#fecaca;font-size:14px;margin:0 0 22px;}
.cta form{display:flex;flex-direction:column;gap:10px;max-width:420px;margin:0 auto;}
@media (min-width:600px){ .cta form{flex-direction:row;} }
.cta input{flex:1;padding:13px 16px;border-radius:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:14px;}
.cta input::placeholder{color:#fbcfcf;}
.cta input:focus{outline:2px solid #fff;outline-offset:1px;}
.cta button{padding:13px 26px;background:#fff;color:var(--red);font-weight:800;font-size:14px;border:none;border-radius:9px;cursor:pointer;white-space:nowrap;}
.cta button:hover{background:#ffe8e8;}

/* ===== Fixtures ===== */
.fixtures-note{color:var(--muted2);font-size:12.5px;margin:0 0 28px;}
.fixtures-note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.fixture-group{margin-bottom:30px;}
.fixture-date{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.fixture-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;transition:border-color .15s, background .15s;}
.fixture-row:hover{background:var(--card-hover);}
.fixture-bar{width:4px;align-self:stretch;border-radius:4px;flex-shrink:0;}
.fixture-bar.pl{background:var(--red);}
.fixture-bar.ll{background:var(--amber);}
.fixture-time{font-size:13px;font-weight:700;color:var(--muted);width:52px;flex-shrink:0;}
.fixture-teams{flex:1;font-size:14.5px;font-weight:700;}
.fixture-teams .vs{color:var(--muted2);font-weight:500;margin:0 8px;}
.fixture-comp{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);flex-shrink:0;}
@media (max-width:560px){ .fixture-comp{display:none;} }

/* ===== Legal / static content pages ===== */
.legal{max-width:820px;margin:0 auto;padding-bottom:64px;}
.legal h1{font-size:32px;font-weight:900;margin:8px 0 4px;letter-spacing:-0.01em;}
.legal .updated{color:var(--muted2);font-size:13px;margin-bottom:32px;}
.legal h2{font-size:19px;font-weight:800;margin:32px 0 10px;}
.legal p, .legal li{color:#d4d4d8;font-size:14.5px;line-height:1.75;}
.legal ul{padding-left:20px;}
.legal a{color:#ff8a83;text-decoration:underline;text-underline-offset:2px;}

/* ===== 404-ish / empty state ===== */
.empty{text-align:center;padding:80px 20px;color:var(--muted2);}
.empty .icon{font-size:48px;margin-bottom:16px;}

/* ===== Footer ===== */
footer.site-footer{background:var(--bg-alt);border-top:1px solid var(--border);margin-top:64px;}
.foot-grid{display:grid;grid-template-columns:1fr;gap:32px;padding:44px 20px 32px;max-width:var(--maxw);margin:0 auto;}
@media (min-width:768px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} }
.foot-grid h3{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;margin:0 0 16px;color:#e4e4e7;}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.foot-grid a{color:var(--muted);font-size:13.5px;}
.foot-grid a:hover{color:#fff;}
.foot-desc{color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:10px;max-width:320px;}
.foot-bottom{border-top:1px solid var(--border);padding:20px 20px;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted2);}
@media (min-width:640px){ .foot-bottom{flex-direction:row;} }
.foot-bottom a{color:var(--muted2);}
.foot-bottom a:hover{color:#fff;}