:root{
  --navy:#0a2540; --navy2:#103a5f; --bg:#f2f5f9; --card:#ffffff; --ink:#10233b;
  --muted:#5b6b80; --line:#e2e8f0; --green:#0e9f6e; --red:#e03131; --gold:#ffb020;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.5}
h1,h2,h3,.display{font-family:'Archivo',system-ui,sans-serif}
a{color:var(--navy2)}
img{max-width:100%}

/* nav */
nav{position:sticky; top:0; z-index:50; background:rgba(10,37,64,.97); color:#fff}
.nav-inner{max-width:1100px; margin:0 auto; padding:.8rem 1.25rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.brand{font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:.5px; font-size:1.05rem; text-decoration:none; color:#fff}
.brand span{color:var(--green)}
.nav-links{margin-left:auto; display:flex; gap:1.1rem; font-size:.85rem; font-weight:600; align-items:center}
.nav-links a{color:#cfe0f2; text-decoration:none}
.nav-links a:hover{color:#fff}
.nav-links .soon{color:#7e97b3}
.asof{font-size:.72rem; font-weight:600; background:rgba(255,255,255,.14); padding:.3rem .7rem; border-radius:999px; white-space:nowrap}

/* hero */
.hero{background:radial-gradient(1200px 500px at 50% -10%, #17598f 0%, var(--navy) 62%); color:#fff; text-align:center; padding:3.5rem 1.25rem 3rem}
.hero .kicker{font-size:.8rem; font-weight:700; letter-spacing:3px; color:#9fc6ec; text-transform:uppercase; margin-bottom:.9rem}
.hero h1{font-size:clamp(1.7rem,4.5vw,2.6rem); font-weight:800; letter-spacing:-.5px}
.verdict{font-size:clamp(4.5rem,14vw,8.5rem); font-weight:900; line-height:1.05; letter-spacing:-2px}
.verdict.yes{color:#2fe08f; text-shadow:0 6px 40px rgba(14,159,110,.55)}
.verdict.no{color:#ff7a70; text-shadow:0 6px 40px rgba(224,49,49,.45)}
.hero-meta{font-size:1rem; color:#d7e6f7; margin-top:.4rem; font-weight:600}
.hero-factors{max-width:640px; margin:1.1rem auto 0; font-size:.98rem; color:#d7e6f7; text-align:left}
.hero-factors li{margin:.3rem 0 .3rem 1.2rem}
.meter{max-width:520px; margin:1.6rem auto 0}
.meter-bar{height:12px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden}
.meter-fill{height:100%; background:linear-gradient(90deg,var(--red),var(--gold),var(--green)); border-radius:999px}
.meter-labels{display:flex; justify-content:space-between; font-size:.72rem; color:#9fc6ec; margin-top:.4rem; font-weight:600}
.picker{margin:1.8rem auto 0; max-width:520px}
.picker label{display:block; font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#9fc6ec; margin-bottom:.5rem}
.picker select{width:100%; padding:.8rem 1rem; font-size:1rem; font-weight:600; border-radius:12px; border:none; color:var(--ink); background:#fff}
.hero-link{display:inline-block; margin-top:1.4rem; color:#fff; font-weight:700; text-decoration:none; border:1px solid rgba(255,255,255,.4); padding:.55rem 1.1rem; border-radius:999px}
.hero-link:hover{background:rgba(255,255,255,.12)}

/* team color band (team pages) */
.band{color:#fff; padding:2.6rem 1.25rem 2.2rem; text-align:center}
.band .logo-badge{display:inline-flex; background:var(--navy); border-radius:50%; padding:14px; margin-bottom:.8rem}
.band .logo-badge img{width:74px; height:74px; display:block}
.band h1{font-size:clamp(1.9rem,5vw,3rem); font-weight:900; letter-spacing:-.5px}
.band .sub{font-weight:600; opacity:.92; margin-top:.3rem}

/* layout + sections */
.wrap{max-width:1100px; margin:0 auto; padding:0 1.25rem}
section{padding:2.6rem 0 0}
.sec-head{display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.1rem; flex-wrap:wrap}
.sec-head h2{font-size:1.45rem; font-weight:800; letter-spacing:-.5px}
.sec-head p{color:var(--muted); font-size:.9rem}

/* cards + grids */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.2rem; box-shadow:0 1px 3px rgba(16,35,59,.06)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem}
.team-card{display:flex; gap:.9rem; align-items:center; text-decoration:none; color:var(--ink)}
.team-card:hover{border-color:#b9c9dd}
.logo-badge-sm{flex:none; background:var(--navy); border-radius:50%; padding:8px; display:inline-flex}
.logo-badge-sm img{width:40px; height:40px; display:block}
.team-card .nm{font-weight:800; font-family:'Archivo',sans-serif; line-height:1.25}
.team-card .rc{font-size:.8rem; color:var(--muted); font-weight:600}
.team-card .nx{font-size:.82rem; font-weight:700; margin-top:.15rem}

/* game rows + chips */
.games{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:.9rem}
.game-card .when{font-size:.75rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem}
.matchup{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.mu-team{display:flex; align-items:center; gap:.55rem; font-weight:700}
.mu-team .logo-badge-sm{padding:6px}
.mu-team .logo-badge-sm img{width:30px; height:30px}
.mu-at{color:var(--muted); font-weight:800}
.chips{display:flex; gap:.5rem; margin-top:.8rem}
.chip{flex:1; text-align:center; font-weight:800; font-family:'Archivo',sans-serif; font-size:.9rem; padding:.45rem .3rem; border-radius:999px; background:#eef2f7; color:var(--muted)}
.chip.yes{background:#e2f6ec; color:#087a4b}
.chip.no{background:#fdecec; color:#b3261e}
.score{font-family:'Archivo',sans-serif; font-weight:900; font-size:1.3rem}

/* kpis */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem}
.kpi .k{font-size:.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem}
.kpi .v{font-family:'Archivo',sans-serif; font-weight:800; font-size:1.55rem; letter-spacing:-.5px}
.kpi .s{font-size:.8rem; color:var(--muted); margin-top:.2rem}

/* lists */
.rows{display:flex; flex-direction:column; gap:.55rem}
.row{display:flex; align-items:center; gap:.8rem; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; box-shadow:0 1px 3px rgba(16,35,59,.05)}
.row .dt{flex:none; width:118px; font-size:.82rem; font-weight:700; color:var(--muted)}
.row .opp{flex:1; font-weight:700; display:flex; align-items:center; gap:.55rem}
.row .opp .logo-badge-sm{padding:5px}
.row .opp .logo-badge-sm img{width:24px; height:24px}
.row .rs{font-weight:800; font-family:'Archivo',sans-serif}
.badge{flex:none; font-size:.72rem; font-weight:800; letter-spacing:.5px; padding:.28rem .6rem; border-radius:999px; background:#eef2f7; color:var(--muted)}
.badge.w{background:#e2f6ec; color:#087a4b}
.badge.l{background:#fdecec; color:#b3261e}
.badge.otl{background:#fdf3e0; color:#9a6a00}
.chip-inline{flex:none; font-weight:800; font-family:'Archivo',sans-serif; font-size:.85rem; padding:.4rem .7rem; border-radius:999px; background:#eef2f7; color:var(--muted)}
.chip-inline.yes{background:#e2f6ec; color:#087a4b}
.chip-inline.no{background:#fdecec; color:#b3261e}

/* verdict card on team pages */
.vcard{margin-top:-1.2rem}
.vcard .q{font-size:1.05rem; font-weight:700; color:var(--muted)}
.vcard .big{font-size:clamp(3.4rem,10vw,6rem); font-weight:900; line-height:1.05; letter-spacing:-2px; font-family:'Archivo',sans-serif}
.vcard .big.yes{color:var(--green)}
.vcard .big.no{color:var(--red)}
.vcard .prob{font-family:'Archivo',sans-serif; font-weight:800; font-size:1.3rem}
.vcard ul{margin:.7rem 0 0 1.2rem; color:#33465e}
.vcard li{margin:.25rem 0}
.meter2{height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; margin-top:.8rem}
.meter2 .meter-fill{background:linear-gradient(90deg,var(--red),var(--gold),var(--green))}

/* report card + sports soon */
.report{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem}
.report .v{font-family:'Archivo',sans-serif; font-weight:900; font-size:2rem}
.report .k{font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted)}
.soon-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem; margin-top:.9rem}
.soon{opacity:.75}
.soon .tag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; background:#eef2f7; border-radius:999px; padding:.25rem .6rem; color:var(--muted); margin-top:.4rem}

footer{margin-top:3.5rem; background:var(--navy); color:#b9cddd; padding:2.2rem 1.25rem; font-size:.85rem}
.foot-inner{max-width:1100px; margin:0 auto}
footer .fb{font-family:'Archivo',sans-serif; font-weight:900; color:#fff; margin-bottom:.5rem}
footer .fb span{color:var(--green)}
@media (max-width:560px){ .row .dt{width:92px} .hero{padding:2.6rem 1rem 2.2rem} }