/* =========================================================
   FISTY V135
   RESPONSIVE ROOM + DISCOVERY PRODUCTION REPAIR
   ========================================================= */

html.f135Ready,
body.f135Ready{
  overflow-x:hidden;
}


/* =========================================================
   REMOVE LEGACY DESKTOP DASHBOARD SIDEBAR
   TOP NAV REMAINS PRIMARY
   ========================================================= */

@media(min-width:1000px){

  .f135LegacySidebar{
    display:none!important;
  }

}


/* =========================================================
   ONE CANONICAL ROOM SIZE
   ========================================================= */

body.roomActive #room,
body.roomActive #room.screen,
body.roomActive #room.screen.active{

  width:min(
    100%,
    1180px
  )!important;

  max-width:1180px!important;

  min-width:0!important;

  margin:
    10px
    auto!important;

  padding:0!important;

  box-sizing:
    border-box!important;

}


body.roomActive #room .card,
body.roomActive #room .roomCard,
body.roomActive #room .roomShell{

  min-width:0!important;

  max-width:100%!important;

}


/* DESKTOP */

@media(min-width:1300px){

  body.roomActive #room .stage,
  body.roomActive #room .f135Stage{

    width:100%!important;

    height:
      clamp(
        500px,
        64vh,
        760px
      )!important;

    min-height:
      500px!important;

    max-height:
      760px!important;

    aspect-ratio:
      auto!important;

    margin:0!important;

  }

}


/* SMALL DESKTOP */

@media(
  min-width:1000px
)
and
(
  max-width:1299px
){

  body.roomActive #room .stage,
  body.roomActive #room .f135Stage{

    width:100%!important;

    height:
      clamp(
        420px,
        58vh,
        640px
      )!important;

    min-height:
      420px!important;

    max-height:
      640px!important;

    aspect-ratio:
      auto!important;

    margin:0!important;

  }

}


/* TABLET / MOBILE */

@media(max-width:999px){

  body.roomActive #room,
  body.roomActive #room.screen,
  body.roomActive #room.screen.active{

    width:100%!important;

    max-width:none!important;

    margin:0!important;

  }


  body.roomActive #room .stage,
  body.roomActive #room .f135Stage{

    width:100%!important;

    height:
      clamp(
        320px,
        54svh,
        620px
      )!important;

    min-height:
      320px!important;

    max-height:
      620px!important;

    margin:0!important;

    aspect-ratio:
      auto!important;

  }

}


@media(max-width:600px){

  body.roomActive #room .stage,
  body.roomActive #room .f135Stage{

    height:
      clamp(
        300px,
        50svh,
        560px
      )!important;

    min-height:
      300px!important;

  }

}


/* =========================================================
   PLAYER ALWAYS FITS ROOM
   ========================================================= */

body.roomActive #room #yt,
body.roomActive #room #yt > div,
body.roomActive #room #yt iframe,
body.roomActive #room #massMediaVideo,
body.roomActive #room #togetherStage,
body.roomActive #room #togetherStageInner,
body.roomActive #room .f135Stage > video{

  width:100%!important;

  height:100%!important;

  min-width:100%!important;

  min-height:100%!important;

  max-width:none!important;

  max-height:none!important;

}


body.roomActive #room #yt,
body.roomActive #room #yt > div,
body.roomActive #room #yt iframe{

  position:absolute!important;

  inset:0!important;

}


/* FISTY owns shared playback controls */

body.roomActive #room #yt iframe{

  pointer-events:none!important;

}


/* =========================================================
   CONTROLS — DESKTOP WHEEL + TOUCH SWIPE
   ========================================================= */

body.roomActive #room #simpleRoomActions,
body.roomActive #room #fistyV134IIHRoomActions,
body.roomActive #room .liveControlRail,
body.roomActive #room .roomUtilityRail,
body.roomActive #room .hostQuickRow,
body.roomActive #room .hostCompactControls{

  display:flex!important;

  flex-flow:
    row
    nowrap!important;

  width:100%!important;

  min-width:0!important;

  max-width:100%!important;

  gap:8px!important;

  overflow-x:auto!important;

  overflow-y:hidden!important;

  overscroll-behavior-inline:
    contain!important;

  scrollbar-width:
    thin!important;

  -webkit-overflow-scrolling:
    touch!important;

  touch-action:
    pan-x!important;

}


body.roomActive #room #simpleRoomActions > *,
body.roomActive #room #fistyV134IIHRoomActions > *,
body.roomActive #room .liveControlRail > *,
body.roomActive #room .roomUtilityRail > *,
body.roomActive #room .hostQuickRow > *,
body.roomActive #room .hostCompactControls > *{

  flex:
    0
    0
    auto!important;

}


/* =========================================================
   INLINE ROOM PANELS
   ========================================================= */

body.roomActive
#fistyV134IIGInlinePanel,

body.roomActive
#fistyV134IIGHostWrap{

  width:100%!important;

  max-width:100%!important;

  min-width:0!important;

  box-sizing:
    border-box!important;

}


body.roomActive
#fistyV134IIGInlinePanel.hasContent,

body.roomActive
#fistyV134IIGHostWrap.open{

  max-height:
    min(
      44vh,
      460px
    )!important;

  overflow-y:auto!important;

  overflow-x:hidden!important;

}


/* =========================================================
   COMMENT OVERLAY
   ========================================================= */

.f135Stage{

  position:relative!important;

  overflow:hidden!important;

}


#f135CommentBurstLayer{

  position:absolute!important;

  left:18px!important;

  right:90px!important;

  bottom:58px!important;

  z-index:96!important;

  max-width:
    min(
      720px,
      calc(
        100% - 116px
      )
    )!important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .15
    )!important;

  border-radius:
    16px!important;

  padding:
    10px
    13px!important;

  background:
    rgba(
      5,
      7,
      13,
      .76
    )!important;

  color:#fff!important;

  font:
    700
    14px/1.35
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif!important;

  text-align:left!important;

  box-shadow:
    0
    10px
    34px
    rgba(
      0,
      0,
      0,
      .34
    )!important;

  backdrop-filter:
    blur(
      10px
    )!important;

  -webkit-backdrop-filter:
    blur(
      10px
    )!important;

  opacity:0!important;

  transform:
    translateY(
      8px
    )!important;

  transition:
    opacity
    .24s
    ease,
    transform
    .24s
    ease!important;

  cursor:pointer!important;

}


#f135CommentBurstLayer.show{

  opacity:1!important;

  transform:
    translateY(
      0
    )!important;

}


#f135CommentBurstLayer[hidden]{

  display:none!important;

}


#f135CommentsChip{

  position:absolute!important;

  right:12px!important;

  bottom:12px!important;

  z-index:97!important;

  min-height:
    36px!important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .17
    )!important;

  border-radius:
    999px!important;

  padding:
    7px
    10px!important;

  background:
    rgba(
      7,
      9,
      16,
      .80
    )!important;

  color:#fff!important;

  display:flex!important;

  align-items:center!important;

  gap:6px!important;

  box-shadow:
    0
    8px
    24px
    rgba(
      0,
      0,
      0,
      .34
    )!important;

  backdrop-filter:
    blur(
      9px
    )!important;

  -webkit-backdrop-filter:
    blur(
      9px
    )!important;

  cursor:pointer!important;

}


#f135CommentsChip span{

  font-size:
    14px!important;

  line-height:
    1!important;

}


#f135CommentsChip b{

  font-size:
    10px!important;

  font-weight:
    900!important;

}


@media(max-width:600px){

  #f135CommentBurstLayer{

    left:10px!important;

    right:62px!important;

    bottom:50px!important;

    max-width:
      calc(
        100% - 72px
      )!important;

    padding:
      8px
      10px!important;

    border-radius:
      13px!important;

    font-size:
      12px!important;

  }


  #f135CommentsChip{

    right:8px!important;

    bottom:8px!important;

    min-height:
      32px!important;

    padding:
      6px
      8px!important;

  }


  #f135CommentsChip b{

    display:none!important;

  }

}


/* =========================================================
   FISTY PLAYER FALLBACK
   ========================================================= */

#f135PlayGate{

  position:absolute!important;

  left:50%!important;

  top:50%!important;

  z-index:94!important;

  transform:
    translate(
      -50%,
      -50%
    )!important;

  border:
    1px solid
    rgba(
      191,
      113,
      255,
      .74
    )!important;

  border-radius:
    18px!important;

  padding:
    12px
    16px!important;

  background:
    rgba(
      8,
      10,
      18,
      .88
    )!important;

  color:#fff!important;

  display:flex!important;

  align-items:center!important;

  gap:10px!important;

  box-shadow:
    0
    14px
    42px
    rgba(
      0,
      0,
      0,
      .48
    ),
    0
    0
    28px
    rgba(
      175,
      67,
      255,
      .22
    )!important;

  backdrop-filter:
    blur(
      10px
    )!important;

  -webkit-backdrop-filter:
    blur(
      10px
    )!important;

  cursor:pointer!important;

}


#f135PlayGate[hidden]{

  display:none!important;

}


#f135PlayGate
.f135PlayIcon{

  width:42px!important;

  height:42px!important;

  display:grid!important;

  place-items:center!important;

  border-radius:
    50%!important;

  background:
    linear-gradient(
      135deg,
      #ff2d87,
      #8e4dff
    )!important;

  font-size:
    18px!important;

}


#f135PlayGate b,
#f135PlayGate small{

  display:block!important;

}


#f135PlayGate b{

  font-size:
    13px!important;

}


#f135PlayGate small{

  margin-top:
    2px!important;

  color:
    #aeb3c4!important;

  font-size:
    9px!important;

}


/* =========================================================
   ROOM THEME OVERLAY
   ========================================================= */

#f135ThemeOverlay{

  position:absolute!important;

  inset:0!important;

  z-index:70!important;

  pointer-events:none!important;

  border-radius:
    inherit!important;

  background-position:
    center!important;

  background-repeat:
    no-repeat!important;

  background-size:
    cover!important;

  opacity:
    .72!important;

}


#f135ThemeOverlay.hasImage{

  opacity:
    .58!important;

  box-shadow:
    inset
    0
    0
    0
    3px
    rgba(
      198,
      95,
      255,
      .30
    ),

    inset
    0
    0
    90px
    20px
    rgba(
      0,
      0,
      0,
      .20
    )!important;

}


#f135ThemeOverlay.themeY2K{

  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(
        0,
        231,
        255,
        .20
      ),
      transparent 24%
    ),

    radial-gradient(
      circle at 88% 18%,
      rgba(
        255,
        52,
        192,
        .20
      ),
      transparent 24%
    ),

    linear-gradient(
      135deg,
      rgba(
        60,
        63,
        255,
        .10
      ),
      transparent 34%,
      rgba(
        255,
        66,
        179,
        .10
      )
    )!important;

  box-shadow:
    inset
    0
    0
    0
    3px
    rgba(
      111,
      89,
      255,
      .34
    ),

    inset
    0
    0
    70px
    rgba(
      253,
      65,
      198,
      .13
    )!important;

}


#f135ThemeOverlay.theme90s{

  background:
    linear-gradient(
      135deg,
      rgba(
        69,
        240,
        203,
        .10
      ),
      transparent 35%,
      rgba(
        180,
        77,
        255,
        .10
      )
    )!important;

  box-shadow:
    inset
    0
    0
    0
    3px
    rgba(
      81,
      217,
      191,
      .30
    ),

    inset
    0
    0
    74px
    rgba(
      141,
      67,
      255,
      .14
    )!important;

}


#f135ThemeOverlay.theme80s{

  background:
    radial-gradient(
      circle at 50% 110%,
      rgba(
        255,
        39,
        147,
        .20
      ),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      rgba(
        44,
        48,
        255,
        .08
      ),
      transparent 55%
    )!important;

  box-shadow:
    inset
    0
    0
    0
    3px
    rgba(
      255,
      49,
      170,
      .30
    ),

    inset
    0
    0
    80px
    rgba(
      93,
      73,
      255,
      .14
    )!important;

}


#f135ThemeOverlay.themeBusiness{

  background:
    linear-gradient(
      135deg,
      rgba(
        61,
        182,
        255,
        .08
      ),
      transparent 38%,
      rgba(
        103,
        80,
        255,
        .08
      )
    )!important;

  box-shadow:
    inset
    0
    0
    0
    2px
    rgba(
      105,
      170,
      255,
      .26
    ),

    inset
    0
    0
    68px
    rgba(
      58,
      96,
      180,
      .13
    )!important;

}


#f135ThemeOverlay.themeGeneric{

  background:
    linear-gradient(
      135deg,
      rgba(
        178,
        73,
        255,
        .10
      ),
      transparent 45%,
      rgba(
        255,
        54,
        145,
        .08
      )
    )!important;

  box-shadow:
    inset
    0
    0
    0
    2px
    rgba(
      181,
      91,
      255,
      .28
    )!important;

}


/* =========================================================
   CURATOR / DISCOVERY UI
   ========================================================= */

.f135CuratorSurface{

  min-width:0!important;

  max-width:100%!important;

  overflow-x:hidden!important;

  overflow-y:auto!important;

  scroll-snap-type:
    y
    proximity!important;

  scrollbar-width:
    thin!important;

}


#curatorPlaylist.f135CuratorSurface,
#liveCuratorGrid.f135CuratorSurface{

  display:flex!important;

  flex-direction:
    column!important;

  gap:10px!important;

}


#curatorPlaylist
.curatorVideo,

#liveCuratorGrid
.curatorCard{

  scroll-snap-align:
    start!important;

  width:100%!important;

  max-width:100%!important;

  box-sizing:
    border-box!important;

}


#curatorPlaylist
.curatorVideo{

  display:grid!important;

  grid-template-columns:
    minmax(
      120px,
      34%
    )
    minmax(
      0,
      1fr
    )!important;

  gap:10px!important;

  align-items:
    center!important;

}


#curatorPlaylist
.curatorVideo
img{

  width:100%!important;

  aspect-ratio:
    16 / 9!important;

  object-fit:
    cover!important;

  border-radius:
    12px!important;

}


#forYouCuratorRail.f135CuratorSurface{

  display:flex!important;

  flex-flow:
    row
    nowrap!important;

  gap:10px!important;

  overflow-x:auto!important;

  overflow-y:hidden!important;

  scroll-snap-type:
    x
    proximity!important;

  -webkit-overflow-scrolling:
    touch!important;

}


#forYouCuratorRail
.curatorCard{

  flex:
    0
    0
    min(
      300px,
      82vw
    )!important;

  scroll-snap-align:
    start!important;

}


/* =========================================================
   REDUCE DASHBOARD FEEL
   ========================================================= */

@media(min-width:1000px){

  #home.screen.active,
  #live.screen.active,
  #room.screen.active{

    padding-left:
      clamp(
        12px,
        2vw,
        28px
      )!important;

    padding-right:
      clamp(
        12px,
        2vw,
        28px
      )!important;

  }

}


#curatorPlaylist
.curatorVideo
b,

#forYouCuratorRail
.curatorCard
h4{

  line-height:
    1.2!important;

}


@media(max-width:700px){

  #curatorPlaylist
  .curatorVideo{

    grid-template-columns:
      108px
      minmax(
        0,
        1fr
      )!important;

  }

}