/* ==========================================================================
   freeShorts Liquid Glass skin (ported from ShortsAPI liquid glass).
   Translucent surfaces + reflective rims + animated scene blobs + SVG
   refraction filter (#fs-liquid-glass, injected by liquid-glass.js).
   Freeshorts typography stays untouched — this file only re-skins surfaces.
   ========================================================================== */

:root{
  --fslg-tint:rgba(16,19,31,.46);
  --fslg-border:rgba(255,255,255,.16);
  --fslg-border-soft:rgba(255,255,255,.085);
  --fslg-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(255,255,255,.035);
  --fslg-shadow-float:0 24px 72px rgba(0,0,0,.42),0 0 36px hsl(var(--primary) / .08),inset 0 1px 0 rgba(255,255,255,.2);
  --fslg-blur:blur(18px) saturate(145%);
}

html{background:#060811}

body{
  position:relative;
  background:
    radial-gradient(circle at 12% 10%,hsl(var(--secondary) / .12),transparent 26%),
    radial-gradient(circle at 86% 12%,hsl(var(--primary) / .11),transparent 28%),
    radial-gradient(circle at 70% 84%,hsl(var(--accent) / .08),transparent 30%),
    #070910;
}

/* ---------------------------------------------------------------- scene */
.fslg-scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%,rgba(17,28,46,.84),transparent 34%),
    linear-gradient(145deg,#070910 0%,#0c101a 44%,#090a11 100%);
}
.fslg-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(82px);
  opacity:.40;
  animation:fslgBlob var(--fslg-dur,22s) ease-in-out infinite alternate;
}
.fslg-blob--1{width:620px;height:620px;background:radial-gradient(circle,#31b8e8,#3157ff 68%);top:-260px;left:-180px;--fslg-dur:23s}
.fslg-blob--2{width:580px;height:580px;background:radial-gradient(circle,hsl(342 72% 64%),#8b4cff 70%);right:-190px;bottom:-250px;--fslg-dur:18s;animation-delay:-7s}
.fslg-blob--3{width:360px;height:360px;background:radial-gradient(circle,hsl(42 93% 66%),hsl(342 72% 64%) 72%);left:46%;top:38%;opacity:.26;--fslg-dur:26s;animation-delay:-12s}
.fslg-blob--4{width:480px;height:480px;background:radial-gradient(circle,hsl(342 72% 64%),hsl(42 93% 66%) 68%);left:6%;top:46%;opacity:.34;--fslg-dur:21s;animation-delay:-4s}
.fslg-blob--5{width:440px;height:440px;background:radial-gradient(circle,#31b8e8,#8b4cff 70%);right:12%;top:28%;opacity:.30;--fslg-dur:25s;animation-delay:-15s}
@keyframes fslgBlob{
  0%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(55px,-35px,0) scale(1.08)}
  75%{transform:translate3d(-38px,48px,0) scale(.95)}
  100%{transform:translate3d(28px,26px,0) scale(1.04)}
}
.app-shell{position:relative;z-index:1}

/* ------------------------------------------------------- glass surfaces */
.glass,
.topbar,
.bottom-nav,
.ro-featured-card{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 48%,rgba(10,13,20,.18));
  border-color:var(--fslg-border);
  box-shadow:var(--fslg-shadow);
  -webkit-backdrop-filter:var(--fslg-blur);
  backdrop-filter:var(--fslg-blur);
}

.topbar{
  background:rgba(9,11,19,.52);
  box-shadow:0 10px 36px rgba(0,0,0,.22),inset 0 -1px 0 rgba(255,255,255,.05);
}

.bottom-nav{
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 55%,rgba(10,13,20,.42));
  box-shadow:0 22px 65px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);
}
.bottom-nav-item.is-active{
  background:linear-gradient(145deg,hsl(var(--primary) / .30),hsl(var(--primary) / .14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* Story posters get a glass rim + lift instead of flat cards */
article.group .poster{
  border:1px solid var(--fslg-border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 42px rgba(0,0,0,.30);
  transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease;
}
article.group:hover .poster{
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--fslg-shadow-float);
  transform:translateY(-3px);
}

/* Real SVG refraction where supported; frost fallback elsewhere. */
@supports (backdrop-filter: url("#fs-liquid-glass")){
  .glass,
  .topbar,
  .bottom-nav,
  .ro-featured-card{
    -webkit-backdrop-filter:url("#fs-liquid-glass") blur(6px) saturate(160%) brightness(1.04);
    backdrop-filter:url("#fs-liquid-glass") blur(6px) saturate(160%) brightness(1.04);
  }
}

/* ---------------------------------------------------------- controls */
.control-button,
.episode-selector-button,
.episode-grid-button,
.player-icon-button{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:var(--fslg-border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 18px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
}
.control-button:hover,
.episode-selector-button:hover,
.episode-grid-button:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.18);
}
.episode-grid-button.is-active,
.episode-selector-button.is-active{
  background:linear-gradient(145deg,hsl(var(--primary) / .28),hsl(var(--primary) / .10));
  border-color:hsl(var(--primary) / .55);
}

/* ==============================================================
   POPUPS / OVERLAYS — deliberately NEARLY OPAQUE.
   Episode lists, selectors, quality menus and player controls must
   stay readable over video + animated scene, so they keep solid
   surfaces and only a light blur.
   ============================================================== */
.episode-overlay{
  background:linear-gradient(180deg,rgba(13,16,27,.97),rgba(9,11,20,.97));
  border-color:rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 70px rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
}
.episode-overlay-head{
  background:linear-gradient(180deg,rgba(13,16,27,.99),rgba(13,16,27,.92));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.episode-selectors{
  background:linear-gradient(180deg,rgba(13,16,27,.98),rgba(13,16,27,.94));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.episode-selector-button,
.episode-grid-button{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
}

/* Source/quality dropdowns must open DOWNWARD — the selectors are sticky
   near the top of a scrollable overlay, so the stock `bottom: calc(100%)`
   anchoring rendered them above the panel where they get clipped. */
.selector-dropdown{
  inset:calc(100% + .4rem) 0 auto !important;
  max-height:min(46dvh,16rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:rgba(13,16,27,.98);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 46px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.10);
}
.selector-option:hover{background:hsl(var(--primary) / .18)}

/* Player rail / icon / center buttons — solid enough to read on any frame */
.player-square-button,
.player-icon-button,
.player-center-toggle{
  background:linear-gradient(145deg,rgba(18,21,34,.92),rgba(10,12,21,.88));
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
}
.player-square-button:hover,
.player-icon-button:hover{
  border-color:rgba(255,255,255,.40);
  background:linear-gradient(145deg,rgba(30,34,52,.94),rgba(14,16,27,.92));
}
.player-square-button.is-active{
  border-color:hsl(var(--primary) / .65);
  background:linear-gradient(145deg,hsl(var(--primary) / .32),rgba(14,16,27,.9));
}
.player-center-toggle{
  background:linear-gradient(145deg,rgba(20,23,37,.94),rgba(10,12,21,.9));
}

/* ------------------------------------------------------- update banner */
.fslg-update{
  position:fixed;
  z-index:80;
  left:50%;
  bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 4.4rem);
  transform:translate(-50%,140%);
  width:min(94vw,430px);
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.8rem .95rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(18,21,34,.96),rgba(10,12,21,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.fslg-update.is-visible{transform:translate(-50%,0)}
.fslg-update-dot{
  flex:none;width:10px;height:10px;border-radius:50%;
  background:hsl(var(--accent));
  box-shadow:0 0 14px hsl(var(--accent) / .9);
  animation:fslgPulse 1.6s ease-in-out infinite;
}
@keyframes fslgPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
.fslg-update-text{flex:1;min-width:0}
.fslg-update-text strong{display:block;font-size:.8rem;font-weight:800;color:hsl(var(--foreground))}
.fslg-update-text span{display:block;font-size:.66rem;color:hsl(var(--muted-foreground));margin-top:1px}
.fslg-update-btn{
  flex:none;border:0;cursor:pointer;
  padding:.55rem .95rem;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(var(--primary-foreground));
  background:linear-gradient(145deg,hsl(var(--primary)),hsl(var(--primary) / .78));
  box-shadow:0 10px 26px hsl(var(--primary) / .35),inset 0 1px 0 rgba(255,255,255,.25);
}
.fslg-update-btn:active{transform:scale(.95)}
.fslg-update-close{
  flex:none;border:0;cursor:pointer;background:transparent;
  color:hsl(var(--muted-foreground));font-size:1.05rem;line-height:1;padding:.3rem;
}
.fslg-update-close:hover{color:hsl(var(--foreground))}

@media(prefers-reduced-motion:reduce){
  .fslg-blob,.fslg-update-dot{animation:none}
  .fslg-update{transition:none}
  article.group .poster{transition:none}
}

/* --------------------------------- 3 equal cards featured slider (coverflow) */
.fs3{position:relative;display:flex;gap:14px;align-items:stretch}
.fs3>[data-testid="featured-carousel"],
.fs3>.ro-featured-card,
.fs3>[data-testid="ro-featured"]{
  flex:1 1 0;
  min-width:0;
  position:relative;
  z-index:2;
}
.fs3-side{
  flex:1 1 0;
  min-width:0;
  position:relative;
  border:1px solid rgba(255,255,255,.16);
  padding:0;
  border-radius:1.1rem;
  overflow:hidden;
  cursor:pointer;
  background:#141824;
  box-shadow:0 16px 40px rgba(0,0,0,.38);
  transition:transform .2s ease;
}
.fs3-side:hover{transform:translateY(-3px)}
.fs3-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs3-side::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,16,.04),rgba(8,10,16,.58));
}
/* Poster-only cards: kill the text/badge bar + any scrim inside the featured
   card so all three tiles are pure poster. Counter pill + arrows stay. */
.fs3 [data-testid="button-featured-story"]>div,
.fs3 [data-testid="ro-button-featured"]>div{display:none}
.fs3 [data-testid="featured-carousel"] img,
.fs3 .ro-featured-card img{inset:0 !important;width:100%;height:100%;object-fit:cover}
.fs3-cap{
  position:absolute;left:.65rem;right:.65rem;bottom:.6rem;z-index:2;
  font-size:.62rem;font-weight:700;color:#fff;text-align:left;
  text-shadow:0 1px 4px rgba(0,0,0,.65);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:640px){
  .fs3{gap:8px}
  .fs3-side{border-radius:.8rem}
  .fs3-cap{display:none}
  /* Cards are ~1/3-width on phones: in-card controls overflow, so hide them.
     Side-card taps still drive prev/next programmatically. */
  .fs3>[data-testid="featured-carousel"]>div,
  .fs3 .ro-featured-card>div{display:none}
}