/* Buzzrparty Dual V3.7
   1) Mobile header: BUZZRPARTY left, controls/language right on same row.
   2) Replay competition dropdown always above slideshow.
   3) Empty competition container has an honest hero state instead of stale previous data.
*/

/* =========================================================
   REPLAY COMPETITION DROPDOWN STACKING
   ========================================================= */

#bpDualReplays,
#bpDualReplays .cards-grid{
  overflow:visible !important;
}

#bpDualReplays .bp-v27-replay-nav{
  position:relative !important;
  z-index:50000 !important;
  overflow:visible !important;
  isolation:isolate;
}

#bpDualReplays .bp-v31-comp-wrap{
  position:relative !important;
  z-index:50020 !important;
  overflow:visible !important;
}

#bpDualReplays .bp-v31-comp-menu{
  position:absolute !important;
  z-index:50040 !important;
  overflow:auto !important;
  pointer-events:auto !important;
  box-shadow:0 18px 42px rgba(0,0,0,.72) !important;
}

#bpDualReplays .bp-v31-host{
  position:relative !important;
  z-index:1 !important;
}

/* =========================================================
   EMPTY CATEGORY HERO
   ========================================================= */

#bpDualReplays .bp-v31-stage.bp-v37-empty-category .bp-v31-player{
  display:none !important;
}

#bpDualReplays .bp-v31-stage.bp-v37-empty-category .bp-v31-playlist-controls,
#bpDualReplays .bp-v31-stage.bp-v37-empty-category .bp-v31-buzzers{
  display:none !important;
}

#bpDualReplays .bp-v31-stage.bp-v37-empty-category .bp-v31-open{
  pointer-events:none !important;
  opacity:.58 !important;
}

#bpDualReplays .bp-v31-stage.bp-v37-empty-category .bp-v31-shade{
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.46) 44%,rgba(0,0,0,.14) 75%,rgba(0,0,0,.34) 100%),
    linear-gradient(0deg,rgba(0,0,0,.68),transparent 58%) !important;
}

/* =========================================================
   MOBILE HEADER
   User request: BUZZRPARTY on the left, FR/EN on the right,
   same row; REPLAYS/LIVE below.
   ========================================================= */

@media (max-width:720px){
  .topbar{
    position:relative !important;
    min-height:58px !important;
    height:58px !important;

    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;

    padding:0 10px !important;
    overflow:visible !important;
  }

  .topbar .brand{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    margin:0 auto 0 0 !important;
    max-width:none !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    flex:0 1 auto !important;
    z-index:auto !important;
  }

  .topbar .brand-title{
    display:block !important;
    max-width:150px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .topbar .brand img,
  .topbar .brand-logo{
    flex:0 0 auto !important;
  }

  /* Profile/menu/language remain on the right. */
  #magAccountChip{
    flex:0 0 38px !important;
    margin-left:0 !important;
  }

  .topbar [class*="lang"],
  .topbar [id*="lang"],
  .topbar [aria-label*="lang" i],
  .topbar [aria-label*="fr" i],
  .topbar [aria-label*="en" i]{
    flex:0 0 auto !important;
  }

  /* Mode switch gets a clean second row. */
  .bp-dual-rail{
    position:absolute !important;
    top:64px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:164px !important;
    grid-template-columns:1fr 1fr !important;
    z-index:30000 !important;
  }

  #homeView.bp-dual-ready{
    padding-top:44px !important;
  }

  #bpDualReplays{
    padding-top:52px !important;
  }

  #bpDualReplays .bp-v27-replay-nav{
    margin-top:0 !important;
  }

  #bpDualReplays .bp-v31-comp-menu{
    top:calc(100% + 7px) !important;
    max-height:min(54vh,360px) !important;
  }
}

@media (max-width:390px){
  .topbar{
    gap:5px !important;
    padding:0 7px !important;
  }

  .topbar .brand-title{
    max-width:118px !important;
    font-size:16px !important;
  }

  #magAccountChip{
    flex-basis:36px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  .bp-dual-rail{
    width:156px !important;
  }

  #bpDualReplays{
    padding-top:50px !important;
  }
}