/* SJR TV — V5 / Full material treatment. The feed and artist hierarchy stay V5.
   The artwork is the lighting source. Glass lives in the scene depth, image transition,
   media, typography backing, actions, and tab bar as one coherent system. */
:root {
 --sjr-black:#07080a;
 --sjr-fg:#fafafc;
 --sjr-sub:rgba(248,248,251,.76);
 --sjr-edge:rgba(255,255,255,.14);
 --sjr-hair:rgba(255,255,255,.09);
 --sjr-glass:rgba(17,19,24,.23);
 --sjr-hot:#ff5158;
}
html,body {background:#07080a}
#app {background:#090a0d;isolation:isolate;box-shadow:0 0 0 1px rgba(255,255,255,.055),0 22px 110px rgba(0,0,0,.5)}
/* Full-screen cinematic artwork, rather than a dark poster behind a video. */
.scene-photo {isolation:isolate;background:#0b0b0e}
.scene-photo img {
 filter:brightness(1.01) contrast(1.04) saturate(1.02);
 object-position:center 31%;transform:scale(1.058);
 will-change:transform;
 transition:filter .7s ease,opacity .7s ease;
}
.scene-photo.photo-syamali img{object-position:78% 42%;transform:scale(1.46)}
.scene-photo::before{
 content:"";position:absolute;z-index:1;inset:-7% -30%;pointer-events:none;
 background-image:var(--scene-art,var(--current-poster,none));
 background-size:cover;background-position:center;
 filter:blur(56px) saturate(1.3);transform:scale(1.12);
 opacity:.33;mix-blend-mode:screen;
 -webkit-mask-image:linear-gradient(180deg,#000,transparent 31%,transparent 65%,#000);
 mask-image:linear-gradient(180deg,#000,transparent 31%,transparent 65%,#000);
}
.scene-photo:after{
 z-index:2;
 background:linear-gradient(180deg,
   rgba(0,0,0,.35) 0%,rgba(0,0,0,.07) 15%,rgba(0,0,0,.015) 31%,
   rgba(0,0,0,.09) 42%,rgba(0,0,0,.14) 59%,
   rgba(0,0,0,.38) 76%,rgba(7,8,11,.77) 97%);
}
/* A seamless frosted lower atmosphere: never a floating text card. */
/* The scene itself becomes a single curved optical surface below the cinema frame. */
.scene-glass {
 position:absolute;z-index:1;pointer-events:none;
 inset:auto 0 0;
 top:calc(clamp(117px,26.6dvh,247px) + min(56.25vw,315px) + 10px);
 height:auto;border-radius:34px 34px 0 0;
 border-top:1px solid rgba(255,255,255,.13);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 -12px 28px rgba(0,0,0,.1);
 background:linear-gradient(180deg,rgba(226,232,241,.028),rgba(24,26,33,.18) 19%,rgba(8,10,15,.46) 65%,rgba(4,5,10,.76) 100%);
 backdrop-filter:blur(32px) saturate(147%);
 -webkit-backdrop-filter:blur(32px) saturate(147%);
 -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.18),#000 17%);
 mask-image:linear-gradient(180deg,rgba(0,0,0,.18),#000 17%);
}
/* Highlights are faint reflections across the lower glass atmosphere, not a card. */
.scene-glass::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 35% 18% at 13% 23%,rgba(255,255,255,.12),transparent 100%),radial-gradient(ellipse 36% 24% at 95% 41%,rgba(255,255,255,.075),transparent 100%);
 opacity:.5;mix-blend-mode:screen;
}
/* A soft optical highlight where the photographic stage meets the media; not an ambient gradient. */
.frame-atmosphere{
 position:absolute;left:-8%;right:-8%;z-index:0;top:calc(clamp(117px,26.6dvh,247px) - 24px);
 height:calc((100vw * .5625) + 48px);max-height:360px;
 pointer-events:none;overflow:hidden;opacity:.73;
 background-image:var(--scene-art,var(--current-poster,none));background-position:center;background-size:cover;
 filter:blur(27px) saturate(120%);
 -webkit-mask-image:radial-gradient(ellipse 62% 53% at 50% 49%,rgba(0,0,0,.7),transparent 100%);
 mask-image:radial-gradient(ellipse 62% 53% at 50% 49%,rgba(0,0,0,.7),transparent 100%);
}
/* Keep the ORIGINAL V5 video geometry: edge to edge, genuine 16:9. */
.player-area {
 top:clamp(117px,26.6dvh,247px);left:0;right:0;margin:0;
 width:100%;height:auto;min-height:0;aspect-ratio:16/9;
 border:0;border-radius:0;overflow:hidden;background:#020203;
 box-shadow:0 1px 0 rgba(255,255,255,.18),0 -1px 0 rgba(255,255,255,.09),
   0 18px 48px rgba(0,0,0,.44),0 35px 70px rgba(0,0,0,.25);
 isolation:isolate;
}
.player-area::before,.player-area::after{height:1px;z-index:4;pointer-events:none}
.player-area::before{top:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 22%,rgba(255,255,255,.17) 72%,transparent)}
.player-area::after{bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 30%,rgba(255,255,255,.10) 75%,transparent)}
.poster-button{background:#030306}
.poster-button img{filter:brightness(.95) contrast(1.035) saturate(.98)}
.poster-button:after{background:radial-gradient(ellipse 80% 88% at 50% 45%,transparent 48%,rgba(0,0,0,.26) 100%)}
/* Real glass play control: specular rim and translucent fill without a fake UI badge. */
.play-mark {
 width:62px;height:62px;border-radius:50%;
 background:radial-gradient(ellipse at 26% 7%,rgba(255,255,255,.19),transparent 47%),linear-gradient(155deg,rgba(41,43,51,.36),rgba(5,6,10,.54));
 border:1px solid rgba(255,255,255,.35);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.07),0 12px 38px rgba(0,0,0,.32);
 backdrop-filter:blur(17px) saturate(170%);
 -webkit-backdrop-filter:blur(17px) saturate(170%);
 transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease;
}
.play-mark svg{width:26px;height:26px;margin-left:3px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.poster-button:active .play-mark{transform:translate(-50%,-50%) scale(.92)}
/* Brand sits in a quiet top glass veil, not in a pill or a black banner. */
.topbar{
 padding:calc(14px + env(safe-area-inset-top,0px)) 18px 22px;
 background:linear-gradient(180deg,rgba(9,10,14,.48),rgba(9,10,14,.15) 52%,transparent);
 filter:none;
}
.topbar::before{
 content:"";position:absolute;z-index:-1;inset:0 0 10px;
 backdrop-filter:blur(11px) saturate(140%);
 -webkit-backdrop-filter:blur(11px) saturate(140%);
 -webkit-mask-image:linear-gradient(180deg,#000,transparent 95%);
 mask-image:linear-gradient(180deg,#000,transparent 95%);
 pointer-events:none;
}
.topbar a{border:0;background:transparent;padding:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar img{width:129px;max-height:44px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.27))}
/* Editorial text stays open, carefully anchored, never boxed. */
.scene-meta{
 z-index:5;bottom:calc(var(--nav) + 25px);
 grid-template-columns:minmax(0,1fr) 48px;gap:15px;
 padding:0 18px;align-items:end;
}
.scene-copy{padding:0!important;margin:0;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.scene-copy::before{display:none}
.scene-artist{margin:0 0 9px}
.artist-chip{gap:11px;min-height:40px}
.artist-chip strong{
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
 font-size:clamp(22px,6vw,28px);line-height:1.08;font-weight:760;
 letter-spacing:-.053em;text-shadow:0 3px 18px rgba(0,0,0,.38);
}
.scene-artist.long .artist-chip strong{font-size:clamp(17px,4.7vw,22px);letter-spacing:-.035em}
.artist-avatar{
 width:39px;height:39px;flex-basis:39px;border-radius:50%;object-fit:cover;
 border:1px solid rgba(255,255,255,.44);
 box-shadow:0 0 0 3px rgba(255,255,255,.075),0 5px 16px rgba(0,0,0,.33);
}
.scene-title{font-size:14.5px;font-weight:675;letter-spacing:-.013em;margin-bottom:7px;color:#fafafb;line-height:1.27}
.scene-description{
 font-size:12.7px;line-height:1.49;max-width:44ch;-webkit-line-clamp:3;
 color:rgba(242,243,249,.77);font-weight:410;letter-spacing:0;
 text-shadow:0 2px 14px rgba(0,0,0,.28);text-wrap:pretty;
}
.story-link{
 margin-top:11px;min-height:28px;padding:0;gap:6px;
 font-size:12px;font-weight:610;letter-spacing:-.01em;color:rgba(255,255,255,.94);
 border:0;background:transparent;box-shadow:none;text-shadow:0 1px 13px rgba(0,0,0,.3)
}
.story-link svg{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.story-link:hover svg{transform:translateX(4px)}
/* One vertical liquid rail: tiny refraction, no competing floating circles. */
.meta-actions{
 position:relative;gap:2px;padding:5px 3px;border-radius:29px;
 background:linear-gradient(130deg,rgba(255,255,255,.12) 0%,rgba(35,37,45,.24) 20%,rgba(9,10,17,.38) 79%,rgba(26,29,36,.28) 100%);
 border:1px solid rgba(255,255,255,.20);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.24);
 backdrop-filter:blur(19px) saturate(162%);
 -webkit-backdrop-filter:blur(19px) saturate(162%);
}
.meta-actions::before{
 content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
 background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 42%);
 -webkit-mask-image:linear-gradient(180deg,#000,transparent 74%);mask-image:linear-gradient(180deg,#000,transparent 74%);
}
.meta-action{width:42px;height:44px;padding:10px;border-radius:50%;background:transparent;border:0;box-shadow:none;transition:background .18s ease,transform .18s ease,color .18s ease}
.meta-action svg{width:23px;height:23px;stroke-width:1.8;filter:none}
.meta-action:hover{background:rgba(255,255,255,.10)}
.meta-action:active{transform:scale(.86);background:rgba(255,255,255,.14)}
.meta-action.is-liked{color:var(--sjr-hot)}
/* The navigation is part of the same optical material, not a separate block. */
#sjr-app-nav {
 z-index:70;
 background:linear-gradient(180deg,rgba(17,18,24,.55),rgba(6,7,12,.82));
 border-top:1px solid rgba(255,255,255,.135);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 -18px 45px rgba(2,2,4,.19);
 backdrop-filter:blur(27px) saturate(165%);
 -webkit-backdrop-filter:blur(27px) saturate(165%);
}
#sjr-app-nav a{color:rgba(247,247,250,.60);transition:color .2s ease,transform .2s ease}
#sjr-app-nav .current{color:#fff}
#sjr-app-nav .current:after{width:16px;height:2px;background:var(--sjr-hot);box-shadow:0 0 8px rgba(255,81,88,.27)}
#sjr-app-nav a:active{transform:scale(.92)}
.toast{
 border-radius:15px;background:rgba(24,25,30,.50);
 border:1px solid rgba(255,255,255,.17);
 box-shadow:inset 0 1px rgba(255,255,255,.12),0 16px 48px rgba(0,0,0,.3);
 backdrop-filter:blur(23px) saturate(165%);
 -webkit-backdrop-filter:blur(23px) saturate(165%);
}
/* Active playback gives room to the actual clip. */
.scene.is-playing .scene-photo img{filter:brightness(.58) saturate(.83);transition:filter .7s ease}
.scene.is-playing .scene-photo:after{background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.22) 39%,rgba(0,0,0,.64) 75%,#07080b 100%)}
.scene.is-playing .scene-glass{background:linear-gradient(180deg,transparent,rgba(6,7,10,.45) 66%,rgba(5,6,9,.8));backdrop-filter:blur(20px) saturate(110%);-webkit-backdrop-filter:blur(20px) saturate(110%)}
/* Motion has meaning: the artwork settles as each new clip becomes active. */
@media (prefers-reduced-motion:no-preference){
 .scene.is-current .scene-photo img:not(.ignore-motion){animation:sjr-photo-arrive .62s cubic-bezier(.2,.6,.2,1) both}
 .scene.is-current .scene-meta{animation:sjr-info-arrive .48s cubic-bezier(.2,.75,.24,1) both}
 @keyframes sjr-photo-arrive {from{opacity:.74;filter:brightness(.78) saturate(.83)}to{opacity:1;filter:brightness(1.01) contrast(1.04) saturate(1.02)}}
 @keyframes sjr-info-arrive {from{opacity:.18;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
}
/* Small devices: native YouTube minimum 200px high means tiny letterbox at 320px.
   No width overflow, no forced text overlap. */
@media(max-width:355px){
 .topbar{padding:calc(10px + env(safe-area-inset-top,0px)) 13px 16px}
 .topbar img{width:116px}
 .player-area{top:clamp(108px,25dvh,172px);height:200px;min-height:200px;aspect-ratio:auto;left:0;right:0;margin:0;width:100%;border-radius:0}
 .frame-atmosphere{top:calc(clamp(108px,25dvh,172px) - 18px);height:235px}
 .scene-meta{bottom:calc(var(--nav) + 11px);padding:0 12px;grid-template-columns:minmax(0,1fr) 42px;gap:8px}
 .artist-chip{min-height:32px;gap:8px}.artist-avatar{width:31px;height:31px;flex-basis:31px}
 .artist-chip strong{font-size:21px}.scene-artist.long .artist-chip strong{font-size:16px}
 .scene-artist{margin-bottom:6px}.scene-title{font-size:12.7px;margin-bottom:5px}
 .scene-description{font-size:11.15px;line-height:1.38;-webkit-line-clamp:3}
 .meta-actions{padding:3px 1px;gap:1px}.meta-action{width:39px;height:39px;padding:9px}.meta-action svg{width:20px;height:20px}
 .story-link{margin-top:6px;min-height:22px;font-size:11.1px}
 .scene-glass{height:50%;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
@media(max-height:690px) and (min-width:356px){
 .player-area{top:clamp(107px,23.5dvh,178px)}
 .frame-atmosphere{top:calc(clamp(107px,23.5dvh,178px) - 22px)}
 .scene-meta{bottom:calc(var(--nav) + 12px)}
 .artist-avatar{width:34px;height:34px;flex-basis:34px}
 .artist-chip strong{font-size:22px}
 .scene-description{font-size:11.7px;line-height:1.38;-webkit-line-clamp:3}
 .scene-title{margin-bottom:5px}.story-link{margin-top:6px}
 .meta-actions{padding:3px 2px}.meta-action{width:40px;height:40px}
}
@media(max-height:605px){
 .player-area{top:clamp(90px,23dvh,129px)}
 .frame-atmosphere{top:calc(clamp(90px,23dvh,129px) - 15px)}
 .scene-meta{bottom:calc(var(--nav) + 8px)}
 .scene-artist{margin-bottom:5px}
 .scene-description{font-size:10.6px;line-height:1.30;-webkit-line-clamp:3}
 .meta-action{width:37px;height:37px}
 .story-link{margin-top:3px}
}
@media(min-width:560px){
 .player-area{top:clamp(200px,26dvh,285px)}
 .frame-atmosphere{top:calc(clamp(200px,26dvh,285px) - 26px);height:365px}
 .scene-meta{bottom:calc(var(--nav) + 28px);padding:0 23px}
 .artist-chip strong{font-size:27px}.scene-description{font-size:13.5px}
}
@media(min-width:700px){
 body::before{
 content:"";position:fixed;inset:-12%;z-index:0;pointer-events:none;
 background-image:var(--current-poster,none);background-size:cover;background-position:center;
 filter:blur(75px) brightness(.30) saturate(1.08);opacity:.65;transform:scale(1.05);
 }
 #app{position:relative;z-index:1;box-shadow:0 0 0 1px rgba(255,255,255,.065),0 25px 110px rgba(0,0,0,.7)}
}
@media(prefers-reduced-transparency:reduce){
 .scene-glass{background:linear-gradient(180deg,transparent,rgba(8,9,13,.70));backdrop-filter:none;-webkit-backdrop-filter:none}
 .meta-actions,#sjr-app-nav,.play-mark,.topbar::before,.toast{backdrop-filter:none;-webkit-backdrop-filter:none}
 .meta-actions{background:rgba(25,25,30,.84)}
 #sjr-app-nav{background:rgba(10,10,13,.96)}
}
@media(prefers-reduced-motion:reduce){
 .scene.is-current .scene-photo img,.scene.is-current .scene-meta{animation:none!important}
}

@media(max-width:355px) and (max-height:605px){.scene-meta{bottom:calc(var(--nav) + 15px)}}

@media(max-width:355px){.scene-glass{top:calc(clamp(108px,25dvh,172px) + 210px);height:auto}}
@media(max-height:690px) and (min-width:356px){.scene-glass{top:calc(clamp(107px,23.5dvh,178px) + 56.25vw + 10px)}}
@media(max-height:605px){.scene-glass{top:calc(clamp(90px,23dvh,129px) + 200px + 9px)}}
@media(min-width:560px){.scene-glass{top:calc(clamp(200px,26dvh,285px) + 315px + 12px)}}

/* YouTube embed failure must stay inside TV. This appears only on failure. */
.player-area .sjr-inline-error{z-index:12;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:22px 20px;background:rgba(7,7,10,.94);color:#fff;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);text-align:center;border:0;border-radius:inherit}
.sjr-inline-error .inline-error-title{font-size:13px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.sjr-inline-error .inline-error-detail{margin:0;color:rgba(255,255,255,.68);font-size:11px;line-height:1.4;max-width:30ch}
.sjr-inline-error .inline-retry{margin-top:4px;padding:8px 15px;min-height:33px;font-size:11px;font-weight:650;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;backdrop-filter:blur(12px);cursor:pointer}
.sjr-inline-error .inline-retry[hidden]{display:none}
.sjr-inline-error .inline-retry:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:360px){.player-area .sjr-inline-error{gap:5px;padding:12px 16px}.sjr-inline-error .inline-error-title{font-size:11.5px}.sjr-inline-error .inline-error-detail{font-size:10px}}