/* Space Jam Radio / TV — V5 refined UI.
   The video feed, playback system, schedule and functional controls are unchanged.
   Liquid glass is restricted to the small interactive surfaces.
*/
:root{
  --ui-white:#fff;
  --ui-dim:rgba(255,255,255,.78);
  --ui-glass:rgba(27,28,34,.32);
  --ui-stroke:rgba(255,255,255,.18);
  --ui-red:#f64d50;
}
#app{background:#08090b}
/* Editorial image is still the stage: no extra opaque panels over it. */
.scene-photo img{filter:brightness(.91) contrast(1.04) saturate(.98);transition:filter .35s ease}
.scene-photo:after{
  background:linear-gradient(180deg,
   rgba(0,0,0,.38) 0%,rgba(0,0,0,.03) 18%,
   rgba(0,0,0,.06) 39%,rgba(0,0,0,.19) 55%,
   rgba(0,0,0,.67) 72%,rgba(5,5,8,.985) 96%);
}
.scene.is-playing .scene-photo img{filter:brightness(.53) saturate(.84)}
.scene.is-playing .scene-photo:after{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.17) 32%,rgba(0,0,0,.63) 74%,#08090b 100%)}
/* Brand continues the same visual language as Home / Discover. */
.topbar{padding:calc(12px + env(safe-area-inset-top,0px)) 17px 10px;background:linear-gradient(180deg,rgba(0,0,0,.32),transparent);}
.topbar a{border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;border-radius:0}
.topbar img{width:126px;max-height:42px;filter:drop-shadow(0 2px 9px rgba(0,0,0,.20))}
/* Keep V5's edge-to-edge 16:9 video. Crisp hairlines and a lighter play affordance. */
.player-area{
  top:clamp(117px,26.6dvh,247px);
  left:0;right:0;margin:0;aspect-ratio:16/9;
  min-height:200px;max-height:none;border-radius:0;
  border:0;background:#050506;
  box-shadow:0 12px 28px rgba(0,0,0,.26);
  isolation:isolate;
}
.player-area:before,.player-area:after{content:"";z-index:4;pointer-events:none;position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.13)}
.player-area:before{top:0}.player-area:after{bottom:0;background:rgba(255,255,255,.09)}
.poster-button{touch-action:pan-x}
.poster-button img{filter:brightness(.91);object-position:center}
.poster-button:after{background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.18))}
.play-mark{
  width:56px;height:56px;
  background:linear-gradient(165deg,rgba(46,46,51,.48),rgba(7,7,9,.58));
  border:1px solid rgba(255,255,255,.29);
  border-radius:50%;
  box-shadow:0 8px 22px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(165%);
  -webkit-backdrop-filter:blur(14px) saturate(165%);
}
.play-mark svg{width:26px;height:26px}
/* Metadata has a fixed reading order, and is not enclosed in a fake glass card. */
.scene-meta{
  position:absolute;
  bottom:calc(var(--nav) + 22px);
  padding:0 18px;
  grid-template-columns:minmax(0,1fr) 49px;
  gap:15px;
  align-items:end;
  max-width:100%;
}
.scene-copy{min-width:0;padding:0;margin:0;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.scene-copy:before{display:none}
.scene-artist{margin:0 0 9px;max-width:100%}
.artist-chip{gap:11px;min-height:39px;max-width:100%}
.artist-chip strong{font-size:clamp(22px,5.9vw,27px);font-weight:750;letter-spacing:-.047em;line-height:1.12;text-shadow:0 2px 14px rgba(0,0,0,.30)}
.scene-artist.long .artist-chip strong{font-size:clamp(17px,4.75vw,23px);letter-spacing:-.034em}
.artist-avatar{
  width:38px;height:38px;flex-basis:38px;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 2px 12px rgba(0,0,0,.28);
}
.scene-title{margin:0 0 7px;font-size:14.4px;font-weight:650;color:rgba(255,255,255,.96);letter-spacing:-.014em;line-height:1.3}
.scene-description{
  margin:0;max-width:45ch;
  font-size:12.8px;line-height:1.45;letter-spacing:.001em;
  font-weight:420;color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(0,0,0,.46);
  -webkit-line-clamp:3;
}
.story-link{
  margin:10px 0 0;min-height:28px;
  color:rgba(255,255,255,.94);font-size:12px;font-weight:610;
  text-decoration:none;letter-spacing:-.01em;
  display:inline-flex;gap:7px;align-items:center;
  text-shadow:0 1px 9px rgba(0,0,0,.45);
  border:0;border-radius:0;background:none;padding:0;
}
.story-link svg{width:15px;height:15px;transition:transform .18s ease}
.story-link:hover svg{transform:translateX(3px)}
/* One continuous glass rail, rather than three unrelated floating buttons. */
.meta-actions{
  pointer-events:auto;
  gap:1px;
  padding:4px 2px;
  border-radius:29px;
  background:linear-gradient(165deg,rgba(75,76,86,.29),rgba(15,16,21,.38) 65%,rgba(10,11,14,.30));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.17);
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  align-items:center;justify-content:center;
}
.meta-action{
  width:43px;height:43px;border-radius:22px;
  border:0;background:transparent;box-shadow:none;
  display:grid;place-items:center;padding:10px;
  transition:background .16s ease,transform .16s ease,color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.meta-action svg{width:23px;height:23px;stroke-width:1.85;filter:none}
.meta-action.share-btn svg{width:23px;height:23px}
.meta-action:hover{background:rgba(255,255,255,.09)}
.meta-action:active{transform:scale(.89);background:rgba(255,255,255,.12)}
.meta-action.is-liked{color:#ff5564}
.meta-action.is-liked svg{fill:currentColor}
/* The bottom bar is a restrained liquid-glass surface; layout remains unchanged. */
#sjr-app-nav{
  background:linear-gradient(180deg,rgba(22,22,28,.43),rgba(7,8,12,.66));
  border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 -12px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
#sjr-app-nav a{color:rgba(235,235,243,.61);letter-spacing:.005em}
#sjr-app-nav .current{color:#fff}
#sjr-app-nav .current:after{content:"";width:15px;height:2px;border-radius:999px;background:var(--ui-red);bottom:calc(5px + env(safe-area-inset-bottom,0px))}
#sjr-app-nav .current:before{display:none}
.toast{background:rgba(20,20,26,.68);border:1px solid rgba(255,255,255,.18);border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
@media (max-width:355px){
 .topbar{padding-left:14px}.topbar img{width:118px}
 .player-area{top:clamp(105px,25dvh,171px);left:0;right:0;margin:0;border-radius:0;aspect-ratio:auto;height:200px;min-height:0;width:100%}
 .scene-meta{bottom:calc(var(--nav) + 10px);padding:0 13px;grid-template-columns:minmax(0,1fr) 43px;gap:9px}
 .artist-chip{gap:8px;min-height:31px}
 .artist-chip strong{font-size:21px}
 .scene-artist.long .artist-chip strong{font-size:17px}
 .artist-avatar{width:32px;height:32px;flex-basis:32px}
 .scene-title{font-size:12.8px;margin-bottom:5px}
 .scene-description{font-size:11.2px;line-height:1.39;-webkit-line-clamp:3}
 .story-link{margin-top:6px;min-height:24px;font-size:11.3px}
 .meta-actions{padding:3px 1px;border-radius:24px}
 .meta-action{width:39px;height:39px;padding:9px}
 .meta-action svg{width:21px;height:21px}
}
@media (max-height:690px) and (min-width:356px){
 .player-area{top:clamp(107px,23.5dvh,178px)}
 .scene-meta{bottom:calc(var(--nav) + 12px)}
 .artist-chip strong{font-size:22px}
 .artist-avatar{width:34px;height:34px;flex-basis:34px}
 .scene-description{font-size:11.8px;line-height:1.36;-webkit-line-clamp:3}
 .scene-title{margin-bottom:5px}
 .story-link{margin-top:6px}
 .meta-action{height:40px;width:40px}
}
@media (max-height:605px){
 .player-area{top:clamp(90px,23dvh,129px)}
 .scene-meta{bottom:calc(var(--nav) + 8px)}
 .scene-artist{margin-bottom:5px}
 .scene-description{font-size:10.7px;line-height:1.3;-webkit-line-clamp:2}
 .meta-action{width:37px;height:37px;padding:8px}
 .story-link{margin-top:3px}
}
@media (min-width:560px){
 .scene-meta{padding:0 23px;bottom:calc(var(--nav) + 28px)}
 .player-area{top:clamp(200px,26dvh,285px);margin:0;border-radius:0}
 .artist-chip strong{font-size:28px}
 .scene-description{font-size:13.5px}
}
@media (prefers-reduced-transparency:reduce){
 .meta-actions{background:#202127;backdrop-filter:none;-webkit-backdrop-filter:none}
 #sjr-app-nav{background:#111218;backdrop-filter:none;-webkit-backdrop-filter:none}
 .play-mark{background:#141417;backdrop-filter:none;-webkit-backdrop-filter:none}
}