/* Sports discovery is isolated from the video controls and channel browser. */
.sports-nav { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.sports-nav button { font:inherit; font-weight:700; font-size:13px; background:transparent; color:#9aa8b9; border:0; padding:12px; border-radius:8px; cursor:pointer; }
.sports-nav button[aria-pressed="true"] { color:#f5f7fc; background:#16202e; box-shadow:inset 0 -2px #09cce9; }
#app.sports-mode { grid-template-columns:1fr; background:#090e16; }
.sports-mode > .sidebar,.sports-mode #menuBtn,.sports-mode .channels { display:none; }
.sports-mode .main { grid-column:1/-1; padding:26px clamp(16px,3vw,48px); }
.sports-mode:not(.sports-playing) .hero-layout { display:none; }
.sports-mode.sports-playing .hero-layout { max-width:1280px; margin:0 auto 28px; position:relative; top:auto; z-index:auto; }
.sp-close-player { display:none; }
.sports-mode.sports-playing .sp-close-player { display:block; margin:0 auto 12px; background:#16202e; color:#f5f7fc; border:1px solid #344156; padding:9px 16px; border-radius:8px; cursor:pointer; }
.sports-mode .topbar { border-top:3px solid transparent; background:linear-gradient(#090e16,#090e16) padding-box,linear-gradient(90deg,#09cce9,#9333ea,#d92b82) border-box; }
#sportsHome { --sp-panel:#101824; --sp-line:#263042; --sp-muted:#9aa8b9; --sp-cyan:#09cce9; max-width:1440px; margin:auto; color:#f5f7fc; font-size:14px; line-height:1.45; }
#sportsHome [hidden] { display:none!important; }
#sportsHome *,#sportsHome *::before,#sportsHome *::after { box-sizing:border-box; }
#sportsHome button,#sportsHome select,#sportsHome input { font:inherit; color:inherit; }
#sportsHome button { cursor:pointer; }
#sportsHome button:disabled { cursor:default; opacity:.55; }
#sportsHome button:focus-visible,#sportsHome select:focus-visible,#sportsHome input:focus-visible,.sports-nav button:focus-visible { outline:2px solid #09cce9; outline-offset:3px; }
#sportsHome button,#sportsHome select { min-height:38px; }
.sp-heading,.sp-section-head,.sp-controls,.sp-selects,.sp-card-footer,.sp-follow-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sp-heading { margin-bottom:23px; }
.sp-kicker { color:#09cce9; font-size:10px; letter-spacing:2px; font-weight:800; }
#sportsHome h1 { font-size:clamp(28px,3vw,40px); letter-spacing:-1.3px; line-height:1.2; margin:6px 0 0; }
#sportsHome h2 { font-size:21px; letter-spacing:-.4px; margin:0; }
#sportsHome h3 { margin:0; font-size:14px; }
.sp-note { color:var(--sp-muted); font-size:12px; margin:8px 0; }
.sp-date { font-size:12px; color:var(--sp-muted); text-align:right; }
.sp-leagues { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; padding:3px; margin:0 auto 26px; }
#sportsHome .sp-chip { background:var(--sp-panel); border:1px solid var(--sp-line); border-radius:9px; padding:9px 15px; font-size:12px; font-weight:700; white-space:nowrap; }
#sportsHome .sp-chip[aria-pressed="true"] { background:#0d2b36; border-color:#16879a; color:#74eafa; }
#sportsHome .sp-chip[data-league="NFL"], #sportsHome .sp-chip[data-league="Premier League"], #sportsHome .sp-has-league-logo { display:inline-flex; align-items:center; gap:7px; padding-block:4px; }
.sp-league-logo { width:24px; height:28px; object-fit:contain; flex-shrink:0; }
#sportsHome .sp-leagues .sp-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:110px; padding:14px 8px; border-radius:14px; font-size:14px; text-align:center; white-space:normal; }
.sp-leagues .sp-league-logo { width:40px; height:42px; }
#sportsHome .sp-leagues .sp-chip:hover { border-color:#16879a; background:#142633; }
@media(max-width:1200px) { .sp-leagues { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:800px; } }
@media(max-width:480px) {
  .sp-leagues { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #sportsHome .sp-leagues .sp-chip { min-height:98px; padding:12px 8px; }
}
.sp-section-head { margin:0 0 14px; flex-wrap:wrap; }
.sp-live-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.sp-card { background:radial-gradient(ellipse at 100% 0%,#09cce912,transparent 65%),var(--sp-panel); border:1px solid var(--sp-line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.sp-card:first-child { background:radial-gradient(ellipse at 0% 0%,#9333ea25,transparent 65%),var(--sp-panel); border-color:#594071; }
.sp-card-head { display:flex; justify-content:space-between; gap:10px; padding:15px 18px 0; font-size:11px; color:#c3cede; font-weight:700; }
.sp-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:5px; background:#183245; color:#8ce6f4; font-size:10px; white-space:nowrap; font-weight:800; }
.sp-badge.live { background:#43233a; color:#ff9dca; }
.sp-duel { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:start; gap:8px; padding:25px 15px; flex:1; }
.sp-team { display:flex; align-items:center; gap:9px; min-width:0; }
.sp-duel .sp-team { flex-direction:column; text-align:center; }
.sp-team strong { font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.sp-logo { width:32px; height:32px; display:inline-grid; place-items:center; flex-shrink:0; position:relative; }
.sp-logo img { position:absolute; width:100%; height:100%; object-fit:contain; background:transparent; }
.sp-logo span { font-size:10px; font-weight:800; width:100%; height:100%; display:grid; place-items:center; }
.sp-logo:has(> img:not([hidden])) > span { visibility:hidden; }
.sp-duel .sp-logo { width:62px; height:62px; }
.sp-duel .sp-team-with-feed { display:grid; grid-template-rows:62px minmax(2.6em,1fr) auto; justify-items:center; align-items:start; align-self:stretch; }
.sp-team-with-feed strong { align-self:center; }
#sportsHome .sp-button.sp-team-feed, #sportsHome .sp-button.sp-event-watch { max-width:100%; padding:8px 10px; color:#bef5ff; border-color:#36576a; background:#172f3d; font-size:12px; }
#sportsHome .sp-button.sp-team-feed:hover, #sportsHome .sp-button.sp-event-watch:hover { background:#23495b; border-color:#5bd7ed; }
.sp-team-feed-unavailable { align-self:center; }
.sp-vs { font-size:10px; color:var(--sp-muted); text-align:center; }
.sp-duel > .sp-vs { align-self:start; padding-top:24px; }
.sp-programme { padding:25px 18px; min-height:135px; display:flex; align-items:center; gap:15px; flex:1; }
.sp-programme .sp-logo { width:54px; height:54px; }
.sp-programme strong { font-size:17px; line-height:1.35; }
.sp-card-footer { border-top:1px solid var(--sp-line); padding:13px 16px; background:#080d1633; }
.sp-network { font-size:11px; color:var(--sp-muted); overflow-wrap:anywhere; }
#sportsHome .sp-watch { border:0; border-radius:8px; background:linear-gradient(110deg,#9333ea,#d92b82); font-weight:750; font-size:12px; padding:9px 17px; color:white; white-space:nowrap; }
#sportsHome .sp-button { border:1px solid #344156; border-radius:8px; background:#16202e; padding:8px 12px; font-size:12px; }
.sp-slate,.sp-networks,.sp-follow { margin-top:30px; }
.sp-controls { flex-wrap:wrap; margin:17px 0; }
.sp-status { display:flex; gap:4px; background:#0e1622; border:1px solid var(--sp-line); border-radius:9px; padding:4px; }
#sportsHome .sp-status button { border:0; background:transparent; color:var(--sp-muted); border-radius:5px; font-size:12px; padding:7px 12px; }
#sportsHome .sp-status button[aria-pressed="true"] { background:#223045; color:#f5f7fc; }
.sp-selects { flex-wrap:wrap; justify-content:flex-end; }
.sp-selects label { display:flex; gap:8px; align-items:center; font-size:11px; color:var(--sp-muted); }
#sportsHome select,#sportsHome input { background:#101824; border:1px solid var(--sp-line); border-radius:8px; padding:8px 10px; max-width:100%; }
.sp-group { margin-top:22px; }
.sp-group-head { display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.sp-group-head:after { content:''; height:1px; background:var(--sp-line); flex:1; }
.sp-group-head small { color:var(--sp-muted); font-size:10px; }
.sp-match-list { border:1px solid var(--sp-line); border-radius:13px; overflow:hidden; background:var(--sp-panel); }
.sp-match { display:grid; grid-template-columns:80px minmax(0,1fr) 135px 80px; align-items:center; gap:18px; padding:16px 18px; border-bottom:1px solid var(--sp-line); }
.sp-match:last-child { border-bottom:0; }
.sp-match.is-now { box-shadow:inset 2px 0 #09cce9; }
.sp-time { font-size:12px; font-weight:700; }
.sp-time small { display:block; font-size:10px; color:var(--sp-muted); font-weight:400; margin-top:5px; }
.sp-opponents { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:center; gap:10px; }
.sp-title { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.sp-empty { border:1px dashed #344156; border-radius:13px; padding:25px; color:var(--sp-muted); line-height:1.7; }
.sp-guide-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; }
.sp-guide-actions { display:flex; gap:8px; }
.sp-network-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
#sportsHome .sp-network-card { display:flex; align-items:center; gap:12px; text-align:left; min-height:76px; background:var(--sp-panel); border:1px solid var(--sp-line); border-radius:12px; padding:12px; }
.sp-network-card .sp-logo { width:38px; height:38px; }
.sp-network-card strong { font-size:12px; overflow-wrap:anywhere; }
.sp-network-card small { color:var(--sp-muted); display:block; font-size:10px; margin-top:3px; }
#sportsHome .sp-network-card:hover { border-color:#09cce9; }
.sp-network-tools { display:flex; gap:8px; flex-wrap:wrap; }
.sp-follow { background:linear-gradient(110deg,#161323,#101c28); border:1px solid #342b46; border-radius:14px; padding:20px; }
.sp-team-picker { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
#sportsHome .sp-team-choice { display:flex; gap:7px; align-items:center; border:1px solid var(--sp-line); border-radius:9px; padding:8px 10px; background:#101824; font-size:12px; }
#sportsHome .sp-team-choice[aria-pressed="true"] { border-color:#09cce9; background:#0d2b36; }
.sp-follow-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.sp-follow-controls select { flex:1; min-width:180px; }
.sp-toast { min-height:20px; color:#8ce6f4; margin:12px 0 0; font-size:12px; }
.sp-footer { color:var(--sp-muted); font-size:11px; margin:25px 0 4px; }
.sp-nfl { margin:0 0 32px; }
.sp-nfl[hidden], #spOnNow[hidden], #spEPG[hidden] { display:none; }
#spNFLGames, #spEPLGames, .sp-league-games { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
#spNFLGames > .sp-empty, #spNFLGames > button, #spEPLGames > .sp-empty, #spEPLGames > button, .sp-league-games > .sp-empty, .sp-league-games > button { grid-column:1/-1; }
.sp-nfl-game .sp-card-head { align-items:flex-start; }
.sp-nfl-kickoff { display:block; margin-top:5px; color:var(--sp-muted); font-weight:400; }
.sp-nfl-actions { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:7px; min-height:93px; }
.sp-nfl-buttons { display:flex; flex-wrap:wrap; align-items:flex-start; gap:7px; max-width:100%; }
.sp-event-actions, #spNFLGames .sp-nfl-actions { align-items:center; text-align:center; }
#spNFLGames .sp-nfl-buttons { justify-content:center; }
#sportsHome .sp-nfl-buttons button { padding:8px 11px; max-width:100%; overflow-wrap:anywhere; color:#bef5ff; border-color:#36576a; background:#172f3d; }
#sportsHome .sp-nfl-buttons button:hover { background:#23495b; border-color:#5bd7ed; }
.sp-nfl-regional { font-size:10px; }
.sp-nfl .sp-controls label { display:flex; align-items:center; gap:10px; font-size:12px; }
/* Share section heights within each card row, including wrapped channel lists. */
@supports (grid-template-rows:subgrid) {
  :is(#spNFLGames,#spEPLGames,.sp-league-games) > .sp-card {
    display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0;
  }
  @media(min-width:801px) {
    .sp-live-grid > .sp-card {
      display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0;
    }
  }
}
@media(max-width:1100px) {
  #spNFLGames, #spEPLGames, .sp-league-games { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  #spNFLGames, #spEPLGames, .sp-league-games { grid-template-columns:minmax(0,1fr); }
  .sp-nfl-buttons { gap:6px; }
  #sportsHome .sp-nfl-buttons button { padding:8px; font-size:11px; }
  .sp-nfl .sp-section-head { flex-wrap:wrap; gap:10px; }
}
@media(max-width:1100px) { .sp-match { grid-template-columns:70px minmax(0,1fr) 100px 75px; gap:12px; } .topbar .search { flex:1; } .sp-live-grid { gap:10px; } }
@media(max-width:800px) {
  #app.sports-mode { grid-template-rows:64px minmax(0,1fr); }
  .sports-mode .main { padding:20px 14px; }
  .sports-mode .hero-layout { position:relative; }
  .sports-nav button { padding:9px; font-size:12px; }
  .topbar:has(.sports-nav:not(.hidden)) { gap:9px; padding-inline:12px; }
  .sp-live-grid { display:flex; overflow:auto; padding-bottom:9px; scroll-snap-type:x mandatory; }
  .sp-card { flex:0 0 min(320px,85vw); scroll-snap-align:start; }
  .sp-match { grid-template-columns:65px minmax(0,1fr) 72px; gap:10px; padding:14px 12px; }
  .sp-match > .sp-network { grid-column:2; grid-row:2; }
  .sp-match > button { grid-column:3; grid-row:1/3; }
  .sp-opponents { display:flex; flex-direction:column; align-items:stretch; gap:7px; }
  .sp-opponents .sp-vs { display:none; }
  .sp-team strong { font-size:12px; }
  .sp-controls { align-items:flex-start; }
  .sp-heading { align-items:flex-start; }
  .sp-date { max-width:100px; font-size:10px; }
  #sportsHome h2 { font-size:19px; }
  .sp-network-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-network-card .sp-logo { width:28px; height:28px; }
  #sportsHome .sp-network-card { gap:8px; padding:10px; }
}
@media(max-width:520px) {
  .sports-mode .topbar .search { display:none; }
  .sports-mode .topbar .user { margin-left:auto; }
  .sports-mode .topbar .brand b { display:block; font-size:15px; }
  .sports-mode .topbar .brand { display:inline-flex; min-width:0; }
  .sports-mode .topbar .brand-mark { display:none; }
  .sp-selects { gap:8px; }
  .sp-selects label { font-size:10px; gap:4px; }
  #sportsHome select { font-size:11px; }
  #sportsHome .sp-watch { padding:9px; }
}