/* Live sports shares MovieBox's ink, ivory, and copper palette. */
.sports-page { padding-bottom:70px; }
.sports-server-meta { display:block; margin-top:5px; font-size:10px; font-weight:400; opacity:.8; }
.server-button:has(.sports-server-meta) { min-width:118px; padding:11px 15px; }
@media(min-width:951px) and (max-width:1180px) { .nav-links { gap:17px; } .header-inner { gap:27px; } }
@media(max-width:720px) { .mobile-nav { gap:0; } .mobile-nav a { flex:1; min-width:0; padding:3px 2px; font-size:9px; } }
.sports-hero { position:relative; min-height:570px; overflow:hidden; background:#08121d; isolation:isolate; }
.sports-hero::before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(90deg,#08121d 5%,#08121de8 36%,#08121d50 85%),linear-gradient(0deg,var(--bg) 0%,#08121d00 50%); }
.sports-hero::after { position:absolute; z-index:-2; inset:0; content:""; background:radial-gradient(ellipse at 78% 40%,#294451 0%,#102937 42%,#08121d 78%); }
.sports-hero-backdrop { position:absolute; z-index:-2; inset:0 0 0 32%; opacity:.44; }
.sports-hero-backdrop img { width:100%; height:100%; object-fit:cover; filter:saturate(.65); }
.sports-hero-inner { display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:70px; width:min(100%,var(--max)); min-height:570px; margin:0 auto; padding:145px var(--gutter) 90px; }
.sports-intro .section-kicker { display:block; margin-bottom:22px; letter-spacing:1.6px; }
.sports-intro h1 { margin:0 0 23px; color:var(--text); font-family:var(--sans); font-size:clamp(44px,4.7vw,76px); font-weight:800; line-height:1.02; letter-spacing:-3px; }
.sports-intro>p { max-width:340px; margin:0 0 27px; color:#aabec8; font-size:14px; line-height:1.8; }
.sports-overview { display:flex; flex-wrap:wrap; align-items:center; gap:14px 23px; min-height:26px; color:#9eb3be; font-size:12px; }
.sports-overview strong { color:var(--text); font-weight:650; }
.sports-overview-live { display:inline-flex; align-items:center; gap:5px; }
.sports-overview-live i,.sports-status-live i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--accent); }
.sports-feature { max-width:530px; padding-top:22px; }
.sports-feature-label { display:block; margin-bottom:27px; color:#b6c2c4; font-size:10px; font-weight:600; line-height:1.8; letter-spacing:1.2px; text-transform:uppercase; }
.sports-feature-label>span { margin:0 10px; color:var(--accent); }
.sports-feature h2 { margin:0 0 19px; color:var(--text); font-size:clamp(24px,2.7vw,40px); font-weight:700; line-height:1.12; letter-spacing:-1.1px; text-wrap:balance; }
.sports-feature-meta { margin-bottom:22px; }
.sports-feature .button { min-width:150px; gap:9px; }
.sports-feature-empty { color:#97adba; font-size:21px; line-height:1.5; letter-spacing:-.5px; }
.sports-feature-teams { display:flex; align-items:center; justify-content:flex-start; gap:30px; margin-bottom:23px; }
.sports-feature-teams .sports-team { display:flex; flex-direction:column; gap:10px; max-width:130px; color:#c9d3d6; font-size:11px; }
.sports-feature-teams .sports-team img,.sports-feature-teams .sports-team-initials { width:64px; height:64px; }
.sports-content { width:min(100%,var(--max)); margin:0 auto; padding:22px var(--gutter) 0; }
.sports-toolbar { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.sports-toolbar-title { margin-right:auto; }
.sports-toolbar-title .section-kicker { display:block; margin-bottom:9px; }
.sports-toolbar h2 { margin:0; font-size:30px; font-weight:700; line-height:1.15; letter-spacing:-.8px; }
.sports-search { display:flex; align-items:center; gap:10px; width:285px; min-height:43px; padding:0 13px; border:1px solid #c0d1dc30; border-radius:3px; color:var(--muted); background:#142332; }
.sports-search:focus-within { border-color:var(--accent); }
.sports-search svg { flex-shrink:0; }
.sports-search input { width:100%; min-width:0; padding:12px 0; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.sports-search input:focus-visible { outline:0; }
.sports-search input::placeholder { color:#8ca0af; }
.sports-refresh { flex-shrink:0; gap:9px; min-height:43px; }
.sports-refresh.is-refreshing svg { animation:sports-turn 1.3s linear infinite; }
@keyframes sports-turn { to { transform:rotate(360deg); } }
.sports-categories { display:flex; align-items:center; gap:9px; max-width:100%; margin-bottom:25px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:thin; scrollbar-color:#45606d transparent; }
.sports-categories button { flex:0 0 auto; min-height:38px; padding:9px 16px; border:1px solid #c9d7df26; border-radius:3px; background:transparent; color:#b7c5ce; font-size:12px; font-weight:500; }
.sports-categories button:hover { border-color:#c9d7df60; color:var(--text); }
.sports-categories button.active { border-color:var(--text); background:var(--text); color:var(--bg-deep); }
.sports-list-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:13px 20px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.sports-time-filters { display:flex; flex-wrap:wrap; gap:22px; }
.sports-time-filters button { position:relative; display:inline-flex; align-items:center; gap:7px; min-height:31px; padding:3px 0; border:0; background:transparent; color:#8fa7b7; font-size:12px; }
.sports-time-filters button:hover,.sports-time-filters button.active { color:var(--text); }
.sports-time-filters button.active::after { position:absolute; bottom:-19px; left:0; right:0; height:2px; content:""; background:var(--accent); }
.sports-time-filters button>span { min-width:18px; padding:2px 4px; border-radius:2px; background:#c9896220; color:var(--accent-bright); font-size:10px; }
.sports-timezone { margin:0; color:#7892a4; font-family:var(--mono); font-size:10px; }
.sports-results-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:18px; }
.sports-results-heading h3 { margin:0; color:#dce1df; font-size:20px; font-weight:600; letter-spacing:-.4px; }
.sports-results-heading>span { color:#8ca4b4; font-size:11px; }
.sports-events { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; }
.sports-event { display:block; min-width:0; padding:0; border:0; border-radius:4px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.sports-event-art { position:relative; display:block; aspect-ratio:1.72; overflow:hidden; border:1px solid #c8d7df12; border-radius:4px; background:#162d3b; isolation:isolate; }
.sports-event-poster { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; opacity:.65; filter:saturate(.8); transition:transform .3s,opacity .3s; }
.sports-event-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,#08121dbf,transparent 80%); }
.sports-event-art.has-poster .sports-event-shade { background:linear-gradient(0deg,#08121dd9,#08121d15 85%); }
.sports-art-lines { position:absolute; z-index:-2; inset:0; background:linear-gradient(125deg,transparent 45%,#c9896210 45.2%,transparent 45.6%),linear-gradient(18deg,#1f3a48,transparent 75%),linear-gradient(125deg,transparent 58%,#49636a35 58.2%,transparent 58.6%); }
.sports-event-category { position:absolute; top:13px; left:14px; max-width:calc(100% - 28px); overflow:hidden; color:#c8d4d7; font-size:9px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; text-overflow:ellipsis; white-space:nowrap; }
.sports-matchup { position:absolute; inset:37px 12px 16px; display:flex; align-items:center; justify-content:center; gap:15px; }
.sports-team { display:flex; flex-direction:column; align-items:center; gap:8px; width:38%; min-width:0; color:#e2e6e2; font-size:10px; line-height:1.25; text-align:center; }
.sports-team>span:last-child { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sports-team img { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 2px 7px #0005); }
.sports-team-initials { display:grid; place-items:center; width:43px; height:43px; border:1px solid #aec0c54d; border-radius:50%; color:#c6d3d5; background:#08121d45; font-size:15px; font-weight:650; }
.sports-versus { color:#7f9aa8; font-family:var(--mono); font-size:10px; letter-spacing:1px; }
.sports-art-title { position:absolute; left:17px; right:17px; bottom:20px; display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; color:#d4dfdf; font-size:clamp(17px,1.6vw,24px); font-weight:700; line-height:1.1; letter-spacing:-.7px; text-wrap:balance; }
.sports-card-play { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:42px; height:42px; border-radius:3px; background:var(--text); color:var(--bg-deep); opacity:0; transform:translate(-50%,-40%); transition:opacity .2s,transform .2s; }
.sports-event:hover .sports-card-play,.sports-event:focus-visible .sports-card-play { opacity:1; transform:translate(-50%,-50%); }
.sports-event:hover .sports-event-poster { opacity:.4; transform:scale(1.035); }
.sports-event:hover .sports-event-title { color:var(--accent-bright); }
.sports-event-body { display:block; padding-top:12px; }
.sports-status { display:flex; align-items:center; min-height:17px; color:#8fa9b8; font-family:var(--mono); font-size:10px; line-height:1.5; }
.sports-status-live { color:var(--accent-bright); font-family:var(--sans); font-size:11px; font-weight:650; }
.sports-event-title { display:-webkit-box; overflow:hidden; min-height:38px; margin:7px 0 10px; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#e0e5e4; font-size:13px; font-weight:550; line-height:1.45; transition:color .2s; }
.sports-event-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; color:#7795a6; font-size:10px; line-height:1.5; }
.sports-event-bottom>span:last-child { color:#b0c0c9; }
.sports-event-bottom>span:last-child>span { margin-left:4px; color:var(--accent); }
.sports-event-skeleton { min-width:0; aspect-ratio:1.15; }
.sports-empty { grid-column:1 / -1; padding:55px 25px; border:1px solid var(--line); border-radius:4px; text-align:center; }
.sports-empty-mark { display:block; margin-bottom:15px; color:var(--accent); font-size:32px; font-weight:300; }
.sports-empty h3 { margin:0 0 13px; font-size:25px; font-weight:650; letter-spacing:-.7px; }
.sports-empty p { max-width:420px; margin:0 auto 24px; color:var(--muted); font-size:13px; line-height:1.8; }
.sports-refresh-message { margin:0 0 22px; padding:13px 16px; border-left:2px solid var(--accent); background:#c989620c; color:#c8b8a6; font-size:12px; line-height:1.7; }
.sports-load-more { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:35px; }
.sports-load-more>span { color:#7692a4; font-size:11px; }
.sports-feed-note { max-width:780px; margin:31px 0 0; color:#738e9e; font-size:10px; line-height:1.9; }
@media(min-width:1500px) { .sports-events { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1100px) { .sports-events { grid-template-columns:repeat(3,minmax(0,1fr)); } .sports-hero-inner { gap:45px; } .sports-intro h1 { font-size:56px; } .sports-matchup { gap:10px; } }
@media(max-width:800px) { .sports-hero,.sports-hero-inner { min-height:530px; } .sports-hero-inner { gap:30px; grid-template-columns:1fr .9fr; padding-top:135px; padding-bottom:65px; } .sports-intro h1 { font-size:43px; letter-spacing:-2px; } .sports-feature h2 { font-size:26px; } .sports-feature-teams { gap:20px; } .sports-feature-teams .sports-team img,.sports-feature-teams .sports-team-initials { width:49px; height:49px; } .sports-search { width:240px; } .sports-toolbar { flex-wrap:wrap; } .sports-toolbar-title { flex-basis:100%; margin-bottom:9px; } .sports-search { flex:1; } .sports-time-filters { gap:18px; } .sports-art-title { font-size:19px; } }
@media(max-width:600px) { .sports-page { padding-bottom:45px; } .sports-hero,.sports-hero-inner { min-height:0; } .sports-hero-inner { display:block; padding-top:119px; padding-bottom:45px; } .sports-intro h1 { font-size:47px; letter-spacing:-2.2px; } .sports-intro>p { max-width:320px; margin-bottom:22px; font-size:13px; } .sports-intro .section-kicker { margin-bottom:19px; font-size:9px; } .sports-feature { max-width:none; margin-top:31px; padding:23px 0 0; border-top:1px solid #bac8ce30; } .sports-feature-label { margin-bottom:15px; font-size:9px; } .sports-feature h2 { max-width:400px; margin-bottom:15px; font-size:29px; } .sports-feature-teams { display:none; } .sports-feature-meta { margin-bottom:18px; } .sports-hero-backdrop { inset:0; opacity:.25; } .sports-hero::before { background:linear-gradient(90deg,#08121dee,#08121da0),linear-gradient(0deg,var(--bg),transparent 80%); } .sports-content { padding-top:14px; } .sports-toolbar { gap:10px; margin-bottom:22px; } .sports-toolbar h2 { font-size:28px; } .sports-search { min-width:0; } .sports-refresh { padding:0 12px!important; } .sports-refresh>span { display:none; } .sports-categories { margin-bottom:17px; } .sports-categories button { padding:9px 13px; font-size:11px; } .sports-list-toolbar { gap:13px; margin-bottom:22px; padding-bottom:15px; } .sports-time-filters { flex-wrap:nowrap; width:100%; gap:17px; overflow-x:auto; padding:0 0 7px; } .sports-time-filters button { flex-shrink:0; font-size:11px; } .sports-time-filters button.active::after { bottom:0; } .sports-timezone { font-size:9px; } .sports-events { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 13px; } .sports-event-art { aspect-ratio:1.36; } .sports-event-category { top:10px; left:10px; font-size:8px; letter-spacing:.7px; } .sports-matchup { inset:31px 5px 13px; gap:6px; } .sports-team { gap:7px; font-size:9px; width:40%; } .sports-team img,.sports-team-initials { width:33px; height:33px; font-size:12px; } .sports-versus { font-size:8px; } .sports-art-title { left:11px; right:11px; bottom:14px; font-size:17px; letter-spacing:-.4px; } .sports-event-title { min-height:36px; margin-top:6px; font-size:12px; } .sports-status { font-size:9px; } .sports-event-bottom { font-size:9px; gap:4px; } .sports-event-bottom>span:first-child { display:none; } .sports-results-heading h3 { font-size:19px; } .sports-results-heading>span { font-size:10px; } .sports-empty { padding:40px 20px; } .sports-empty h3 { font-size:23px; } .sports-feed-note { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .sports-page *, .sports-page *::before, .sports-page *::after { animation:none!important; transition:none!important; } }