/* One card language across TV, on-demand, events, YouTube and Arcade.
   Original artwork, logos and action elements remain in their own renderers. */
:root{
  --sm-copy:linear-gradient(180deg,rgba(19,20,24,.88),rgba(8,9,12,.97));
  --sm-text:#f4f4f6;--sm-muted:#c1c7cf;--sm-base:#14161b;
  --sm-line:var(--line,rgba(255,255,255,.2));
  --sm-accent:var(--accent,var(--primary,#ff5955));
  --sm-rgb:var(--accent-rgb,var(--tv-accent-rgb,255,89,85));
}
:root[data-theme="light"]{
  --sm-copy:linear-gradient(180deg,rgba(246,248,251,.9),rgba(233,239,245,.98));
  --sm-text:#202b33;--sm-muted:#52616c;--sm-base:#e5ebf1;
  --sm-line:var(--line,rgba(19,36,52,.2));
}
html:root body :is(.channel-tile.sl-media-tile,.tmdb-discovery-card,.embedded-event-card,.youtube-card,.game-card.cover-only){
  position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--sm-line);border-radius:18px!important;
  background:var(--sm-base)!important;color:var(--sm-text);box-shadow:inset 0 1px 0 #ffffff20,0 8px 24px #0002;
}
html:root body :is(.sl-media-tile,.embedded-event-card,.youtube-card,.game-card.cover-only):is(:hover,:focus-within){border-color:var(--sm-accent)}
html:root body .channel-tile.sl-media-tile{display:flex;flex-direction:column;justify-content:flex-end;padding:0!important;min-width:0;min-height:320px;aspect-ratio:2/3}
html:root body .sl-media-tile>.tile-art{position:absolute!important;inset:0!important;aspect-ratio:auto!important;width:100%!important;height:100%!important;margin:0!important;border:0!important;border-radius:inherit!important;background:radial-gradient(ellipse at 50% 25%,rgba(var(--sm-rgb),.24),transparent 80%),var(--sm-base)!important}
html:root body .sl-vod-tile>.tile-art>img.loaded{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:top center!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
html:root body .sl-media-copy{position:relative;z-index:3;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px;background:var(--sm-copy);color:var(--sm-text);border-top:1px solid var(--sm-line);box-shadow:inset 0 1px 0 #ffffff0d}
html:root body .sl-media-tile>.sl-media-copy{pointer-events:none;margin-top:155px;min-height:110px}
html:root body .sl-media-copy>strong{margin:0!important;font-size:15px!important;line-height:1.3!important;font-weight:750;color:inherit!important;white-space:normal!important;max-height:2.6em!important;min-height:2.6em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
html:root body .sl-media-copy>:is(small,.youtube-card-type){margin:0!important;font-size:9px!important;line-height:1.35!important;letter-spacing:.08em;color:var(--sm-muted)!important;font-weight:700}
html:root body .sl-media-copy>.tile-description{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal!important;margin:0!important;max-height:2.8em;font-size:11px!important;line-height:1.4!important;color:var(--sm-muted)!important}
html:root body .sl-media-tile .tile-initials{position:absolute;inset:20px 10px auto;min-height:100px;display:grid;place-items:center;color:var(--sm-text)}
html:root body .sl-media-tile .tile-art>.tile-more{z-index:5;opacity:1;transform:none}
html:root body .sl-media-tile .tile-art>.tile-play{top:42%;bottom:auto;z-index:4}
html:root body .sl-media-tile .tile-art>:is(.favorite-star,.collection-count,.new-item-badge){z-index:4}
html:root body .home-team-row .sl-hometeam-tile{width:100%;height:auto;aspect-ratio:auto;min-height:260px}
html:root body .sl-hometeam-tile>.tile-art>img.loaded{position:absolute!important;inset:12px 8% auto!important;width:84%!important;height:120px!important;max-width:none!important;max-height:none!important;object-fit:contain!important;padding:4px!important;margin:0!important;aspect-ratio:auto!important;transform:none!important;border-radius:0!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 2px 3px #0005)!important}
html:root body .sl-hometeam-tile>.sl-media-copy{margin-top:145px;padding:12px 10px;min-height:115px}
html:root body .sl-hometeam-tile .sl-media-copy>strong{font-size:13px!important}
html:root body .sl-hometeam-tile .sl-media-copy>small{font-size:8px!important}
/* Event posters extend underneath the schedule and action strip. */
html:root body .embedded-event-card{display:flex;flex-direction:column;min-height:350px}
html:root body .embedded-event-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:radial-gradient(ellipse at top,rgba(var(--sm-rgb),.3),transparent 75%),var(--sm-base)}
html:root body .embedded-event-art img{position:absolute;inset:30px 10px auto;width:calc(100% - 20px);height:120px;box-sizing:border-box;padding:8px;object-fit:contain;object-position:center}
html:root body .embedded-event-art>strong{align-self:start;margin-top:50px;color:var(--sm-text)}
html:root body .embedded-event-art:has(img)>strong{visibility:hidden}
html:root body .embedded-event-card-copy{position:relative;z-index:1;margin-top:160px;flex:1;background:var(--sm-copy);color:var(--sm-text);border-top:1px solid var(--sm-line);padding:14px;gap:8px}
html:root body .embedded-event-card-copy h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;color:inherit}
html:root body .embedded-event-card-copy>:is(small,p){color:var(--sm-muted)}
html:root body .embedded-event-card-actions{position:relative;z-index:1;background:var(--sm-copy);padding:10px 14px 14px}
/* YouTube retains its native play button, channel links and management actions. */
html:root body .youtube-card-play{position:relative;isolation:isolate;padding:0;min-height:265px;justify-content:flex-end;color:var(--sm-text)}
html:root body .youtube-card-play>.youtube-thumbnail{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto;background:radial-gradient(ellipse at top,rgba(var(--sm-rgb),.24),transparent),var(--sm-base)}
html:root body .youtube-thumbnail .youtube-play-mark{position:absolute;top:52px;left:calc(50% - 25px)}
html:root body .youtube-card-play>.sl-media-copy{margin-top:155px;min-height:110px;width:100%;pointer-events:none}
html:root body .youtube-card>:is(.youtube-remove,.youtube-channel-link,.youtube-follow){position:relative;z-index:3;color:var(--sm-muted)}
html:root body .youtube-channel-card .youtube-card-play{min-height:130px;padding:20px 0;background:radial-gradient(ellipse at top,rgba(var(--sm-rgb),.2),transparent),var(--sm-copy)}
/* Arcade keeps complete cover art and exposes the selected game's name. */
html:root body .game-card.cover-only{aspect-ratio:auto;min-height:220px}
html:root body .game-card.cover-only .game-cover-button{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;padding:0;border-radius:inherit;color:var(--sm-text)}
html:root body .game-card.cover-only .game-artwork-small{position:absolute;inset:0;height:100%;padding:8px 8px 78px;background:radial-gradient(ellipse at top,rgba(var(--tv-accent-rgb,255,89,85),.18),transparent),var(--sm-base)}
html:root body .game-card.cover-only .game-cover-image{object-fit:contain}
html:root body .sl-game-copy{position:relative;display:grid;gap:5px;width:100%;min-height:78px;padding:10px;text-align:left;background:var(--sm-copy);border-top:1px solid var(--sm-line);color:var(--sm-text)}
.sl-game-copy strong{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-game-copy small{font-size:9px;line-height:1.3;color:var(--sm-muted)}
html:root body .game-card.cover-only.is-selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),0 8px 24px #0002}
@media(max-width:600px){
 html:root body .channel-tile.sl-media-tile{min-height:280px}
 html:root body .sl-media-copy{padding:12px 10px}
 html:root body .sl-media-copy>strong{font-size:13px!important}
 html:root body .home-team-row .sl-hometeam-tile{min-height:250px}
 html:root body .sl-hometeam-tile>.sl-media-copy{margin-top:130px;min-height:120px}
 html:root body .sl-hometeam-tile>.tile-art>img.loaded{height:105px!important}
}
@media(prefers-reduced-transparency:reduce){:root{--sm-copy:#101216}:root[data-theme="light"]{--sm-copy:#f1f4f7}}

html:root body .sl-vod-tile .collection-count{top:10px;bottom:auto;right:10px}

/* Cards stay inside their tracks; leave breathing room even with long titles. */
html:root body .channel-tile.sl-media-tile{width:100%;max-width:100%;box-sizing:border-box}
html:root body.movies-view .channel-area.tiles{gap:26px 22px}
html:root body .vod-landing-grid{gap:22px;padding-block:8px 16px}
html:root body .home-media-grid:has(>.sl-vod-tile){gap:20px}
@media(max-width:600px){
 html:root body.movies-view .channel-area.tiles{gap:20px 14px;padding-inline:12px}
 html:root body .vod-landing-grid{gap:14px}
 html:root body .home-media-grid:has(>.sl-vod-tile){gap:14px}
}

/* Discover has its own renderer, but uses the same full-art glass card. */
html:root body .tmdb-discovery-card.channel-tile{display:flex;flex-direction:column;justify-content:flex-end;width:100%;max-width:100%;min-height:320px;aspect-ratio:2/3;padding:0;box-sizing:border-box}
html:root body .tmdb-discovery-card .tmdb-discovery-poster{overflow:clip!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;margin:0;border-radius:inherit;background:radial-gradient(ellipse at top,rgba(var(--sm-rgb),.24),transparent),var(--sm-base)}
html:root body .tmdb-discovery-card .tmdb-discovery-poster>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;object-fit:cover!important;object-position:top center!important;box-shadow:none!important}
html:root body .tmdb-discovery-card .tmdb-discovery-poster>span:not(.tile-play):not(.tmdb-tile-initials){top:12px;bottom:auto;left:10px;max-width:calc(100% - 58px)}
html:root body .tmdb-discovery-card .tmdb-discovery-copy{position:relative;z-index:3;flex:0 0 auto;margin-top:auto;padding:14px;gap:8px;border-top:1px solid var(--sm-line);background:var(--sm-copy);color:var(--sm-text)}
html:root body .tmdb-discovery-copy h3{color:inherit;font-size:15px;line-height:1.3}
html:root body .tmdb-discovery-copy small{color:var(--sm-muted);white-space:normal;line-height:1.4}
html:root body .tmdb-discovery-copy p{color:var(--sm-muted);-webkit-line-clamp:2;line-height:1.4}
html:root body .tmdb-discovery-card .tmdb-discovery-actions{position:relative;gap:7px;padding-top:8px}
html:root body .tmdb-discovery-grid{gap:26px 22px}
@media(max-width:600px){
 html:root body .tmdb-discovery-grid{gap:20px 14px}
 html:root body .tmdb-discovery-card.channel-tile{min-height:280px}
 html:root body .tmdb-discovery-card .tmdb-discovery-copy{padding:12px 10px}
 html:root body .tmdb-discovery-copy h3{font-size:13px}
}

/* Keep every VOD category reachable when the complete row exceeds the page. */
html:root body.movies-view .movie-discovery{min-width:0}
html:root body.movies-view .movie-tabs{width:100%;min-width:0;flex-wrap:wrap;gap:20px 28px}
html:root body.movies-view .movie-genres{width:100%;max-width:1040px;min-width:0;flex-wrap:wrap;justify-content:center;overflow:visible;box-sizing:border-box;padding:5px}
@media(max-width:800px){
 html:root body.movies-view .movie-tabs,html:root body.movies-view .movie-genres{max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain}
 html:root body.movies-view .movie-tabs button,html:root body.movies-view .movie-genres button{flex:0 0 auto}
}

/* The full Discover card opens playback; avoid a duplicate Play/Episodes CTA. */
html:root body .tmdb-discovery-card .tmdb-online-play{display:none!important}
html:root body .tmdb-discovery-card .tmdb-discovery-actions{justify-content:flex-end}

/* Discover opens from its card; omit the extra external-site link. */
html:root body .tmdb-discovery-card .tmdb-discovery-actions>a{display:none!important}
/* Collapse the former button row when no My VOD action remains. */
html:root body .tmdb-discovery-card .tmdb-discovery-actions:not(:has(>button:not(.tmdb-online-play):not([hidden]))){display:none}

/* Provider artwork fills the rounded top section of each event card. */
html:root body .embedded-event-card.is-provider-managed .embedded-event-art img{
 inset:0 0 auto;width:100%;height:160px;padding:0;object-fit:cover;object-position:center;
}

/* CDN marks stay complete over a bounded wash of their own artwork colors. */
html:root body .embedded-event-card.sl-cdn-event .embedded-event-art{background:var(--sm-base)}
html:root body .sl-event-color-wash{position:absolute;inset:0 0 auto;height:160px;overflow:hidden;pointer-events:none}
html:root body .sl-event-color-source{position:absolute;inset:-28px;background-size:cover;background-position:center;filter:blur(28px);opacity:.65}
html:root body .embedded-event-card.sl-cdn-event .embedded-event-art img{
 inset:26px 8% auto;width:84%;height:124px;padding:6px;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 3px #0005);
}
html:root body .sl-event-tile:not([aria-disabled="true"]){cursor:pointer}
html:root body .sl-event-tile:is(:hover,:focus-visible){border-color:var(--sm-accent)}
html:root body .sl-event-tile:focus-visible{outline:2px solid var(--sm-accent);outline-offset:3px}
html:root body .sl-event-tile[aria-disabled="true"]{cursor:default}

html:root body .embedded-event-art>:is(.embedded-event-state,.embedded-event-audience-note){color:#fff}