:root { color-scheme: dark; --bg:#070b16; --panel:#10182b; --line:#22304d; --text:#f8fafc; --muted:#94a3b8; --blue:#2563eb; --orange:#f97316; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top right,#172554 0,transparent 35%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
header,main { width:min(760px,100%); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:calc(18px + env(safe-area-inset-top)) 18px 16px; }
.eyebrow { color:#60a5fa; font-weight:800; font-size:.7rem; letter-spacing:.18em; margin:0 0 4px; }
h1 { font-size:1.8rem; margin:0; }
.icon-button { width:44px; height:44px; border:1px solid var(--line); border-radius:14px; color:white; background:#111a2e; font-size:1.5rem; }
main { padding:0 14px 40px; }
.days { display:grid; grid-template-columns:repeat(3,1fr) 48px; gap:7px; padding:6px; background:#0c1324cc; border:1px solid var(--line); border-radius:17px; position:sticky; top:8px; z-index:5; backdrop-filter:blur(14px); }
.days button,.calendar { border:0; border-radius:12px; color:var(--muted); background:transparent; padding:11px 5px; font-weight:700; text-align:center; cursor:pointer; }
.days button.active { color:white; background:var(--blue); box-shadow:0 5px 18px #2563eb55; }
.calendar { position:relative; overflow:hidden; font-size:1.1rem; }
.calendar input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.date-heading { min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px 2px; }
#full-date { font-weight:750; text-transform:capitalize; }
.favorites-toggle { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.status { padding:34px 10px; color:var(--muted); text-align:center; }
.games { display:grid; gap:12px; }
.game-card { background:linear-gradient(145deg,#131d33,#0d1425); border:1px solid var(--line); border-radius:22px; padding:14px; box-shadow:0 15px 30px #0004; }
.game-meta { min-height:23px; display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; font-weight:700; }
.game-state.live { color:#fb7185; }
.matchup { display:grid; grid-template-columns:1fr 104px 1fr; align-items:center; gap:8px; }
.team { min-width:0; text-align:center; position:relative; }
.team img { width:70px; height:70px; object-fit:contain; filter:drop-shadow(0 7px 9px #0008); }
.team-name { font-weight:800; font-size:.9rem; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-abbr { color:var(--muted); font-size:.7rem; }
.favorite { position:absolute; top:-5px; right:2px; border:0; background:transparent; color:#475569; font-size:1.25rem; cursor:pointer; }
.favorite.selected { color:#fbbf24; }
.score-zone { text-align:center; }
.time { font-size:1.3rem; font-weight:900; }
.versus { color:var(--muted); font-size:.7rem; margin-top:4px; }
.score { font-size:1.8rem; font-weight:900; white-space:nowrap; }
.winner { color:#86efac; }
.venue { margin:13px 0 0; padding-top:10px; border-top:1px solid #ffffff10; color:#64748b; text-align:center; font-size:.7rem; }
@media (max-width:420px) { .matchup{grid-template-columns:1fr 82px 1fr}.team img{width:58px;height:58px}.team-name{font-size:.78rem}.score{font-size:1.45rem} }