/* QU3 mobile app shell — presentation only; intentionally does not touch playback. */
html{background:#060816;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none}
body{min-height:100dvh;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
a,button,[role="button"],input,textarea,select{touch-action:manipulation}
img{-webkit-user-drag:none}
@media(max-width:760px){
  body{padding-top:env(safe-area-inset-top)}
  input,textarea,select{font-size:16px}
  .activity-nav,.nav{padding-top:env(safe-area-inset-top)}
  .activity-dock{bottom:max(9px,env(safe-area-inset-bottom))!important}
}
@media(display-mode:standalone){
  html,body{background:#060816}
  body{user-select:none;-webkit-user-select:none}
  input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
  .activity-dock{bottom:max(8px,env(safe-area-inset-bottom))!important}
}

/* QU3 App Feel v2 — standalone iPhone polish */
@media(max-width:760px){
  /* Discover dock now mirrors the room bottom navbar: pinned to the viewport edge,
     with the iPhone safe area handled inside the bar rather than floating the bar upward. */
  .activity-dock{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
  .qu3-activity-page,
  .qu3-find-party-v40{
    padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }

  /* Compact profile badges: four clean badges per view without oversized/cropped art. */
  .qu3-profile-card .qu3-badge-slider{
    overflow:hidden!important;
    padding:1px 0!important;
  }
  .qu3-profile-card .qu3-badge-list{
    gap:6px!important;
    padding:3px 1px 6px!important;
    align-items:stretch!important;
  }
  .qu3-profile-card .qu3-badge{
    flex:0 0 calc((100% - 18px)/4)!important;
    width:auto!important;
    min-width:0!important;
    min-height:58px!important;
    aspect-ratio:auto!important;
    padding:7px 3px!important;
    border-radius:11px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .qu3-profile-card .qu3-badge i{
    width:28px!important;
    height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
    margin:0 auto!important;
    font-size:15px!important;
    overflow:visible!important;
  }
  .qu3-profile-card .qu3-badge i svg{
    width:28px!important;
    height:28px!important;
    max-width:100%!important;
    max-height:100%!important;
    display:block!important;
    overflow:visible!important;
  }
  .qu3-profile-card .qu3-badge-detail{
    margin-top:7px!important;
    padding:8px 9px!important;
    font-size:10px!important;
  }
}

@media(display-mode:standalone) and (max-width:760px){
  .activity-dock{
    bottom:0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
}


/* QU3 App Feel v4 — Discover nav uses the room playlist navbar shell, not a floating pill. */
@media(max-width:760px){
  html body .activity-dock{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    position:fixed!important;
    inset:auto 0 0 0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:62px!important;
    min-height:62px!important;
    margin:0!important;
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;
    box-sizing:content-box!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    background:rgba(5,8,23,.985)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 -10px 35px rgba(0,0,0,.42)!important;
    transform:none!important;
    z-index:2147482000!important;
    align-items:center!important;
  }
  html body .activity-dock a{
    height:62px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
  }
  html body .activity-dock a span{
    margin:0 0 2px!important;
  }
  .qu3-activity-page,.qu3-find-party-v40{
    padding-bottom:calc(74px + env(safe-area-inset-bottom))!important;
  }
}
@media(display-mode:standalone) and (max-width:760px){
  html body .activity-dock{
    inset:auto 0 0 0!important;
    bottom:0!important;
  }
}


/* QU3 App Feel v5 — compact global legal footer.
   Keep only the clearance actually needed for fixed mobile navigation. */
.qu3-global-legal-footer{
  margin:0!important;
  padding-top:14px!important;
  padding-bottom:14px!important;
}
.qu3-global-legal-footer .qu3-copy{margin-top:4px!important}
@media(max-width:760px){
  body:not(.qup-room-page):not(.host-page) .qu3-global-legal-footer{
    padding-bottom:calc(70px + env(safe-area-inset-bottom))!important;
  }
  body.qup-room-page .qu3-global-legal-footer,
  body.host-page .qu3-global-legal-footer{
    padding-bottom:calc(70px + env(safe-area-inset-bottom))!important;
  }
}


/* QU3 App Feel v6 — remove every remnant of the old purple Discover dock shell. */
@media(max-width:760px){
  html body .activity-dock{
    border:none!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    outline:none!important;
    border-radius:0!important;
    box-shadow:0 -10px 35px rgba(0,0,0,.42)!important;
    background:rgba(5,8,23,.985)!important;
  }
  html body .activity-dock::before,
  html body .activity-dock::after{
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
  }
}


/* QU3 App Feel v7 — badges should not live inside a clipping outer box. */
@media(max-width:760px){
  .qu3-profile-card .qu3-badge-slider,
  .qu3-profile-card .qu3-badge-list{
    background:transparent!important;
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    overflow:visible!important;
  }
  .qu3-profile-card .qu3-badge-slider{
    padding:4px 0 8px!important;
  }
  .qu3-profile-card .qu3-badge-list{
    padding:4px 2px 8px!important;
  }
}


/* QU3 App Feel v8 — Discover bottom nav: room-style rounded shell. */
@media(max-width:760px){
  html body .activity-dock{
    left:8px!important;
    right:8px!important;
    bottom:6px!important;
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    height:62px!important;
    min-height:62px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    border:none!important;
    outline:none!important;
    border-radius:16px!important;
    overflow:hidden!important;
    background:rgba(5,8,23,.985)!important;
    box-shadow:0 -8px 28px rgba(0,0,0,.38)!important;
  }
}
@media(display-mode:standalone) and (max-width:760px){
  html body .activity-dock{
    left:8px!important;
    right:8px!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
}


/* QU3 App Feel v9 — functional badge carousel, no decorative outer box. */
@media(max-width:760px){
  .qu3-profile-card .qu3-achievements{
    min-width:0!important;
    overflow:hidden!important;
  }
  .qu3-profile-card .qu3-badge-slider{
    width:100%!important;
    min-width:0!important;
    background:transparent!important;
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    overflow:hidden!important;
    padding:4px 0 8px!important;
  }
  .qu3-profile-card .qu3-badge-list{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    background:transparent!important;
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    padding:4px 2px 8px!important;
  }
  .qu3-profile-card .qu3-badge{
    scroll-snap-align:start!important;
    flex-shrink:0!important;
  }
}


/* QU3 App Feel v10 — exact room-dock anchoring for Discover.
   This intentionally overrides v8's floating 8px/6px offsets. */
@media(max-width:760px){
  html body .activity-dock{
    position:fixed!important;
    inset:auto 0 0 0!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    margin:0!important;
    transform:none!important;
    translate:none!important;
    padding:0!important;
    box-sizing:border-box!important;
    z-index:2147482000!important;
  }
}
@media(display-mode:standalone) and (max-width:760px){
  html body .activity-dock{
    inset:auto 0 0 0!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
  }
}


/* QU3 App Feel v11 — Discover uses the actual closed room song-dock shell.
   Only the contents/icons differ. */
@media(max-width:760px){
  html body .activity-dock{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    position:fixed!important;
    inset:auto 0 0 0!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    translate:none!important;
    z-index:2147482000!important;

    /* copied from the room .qup-song-dock shell */
    border-top:1px solid rgba(133,68,255,.28)!important;
    border-bottom:1px solid rgba(133,68,255,.18)!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    background:rgba(5,8,23,.985)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 -10px 35px rgba(0,0,0,.42)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body .activity-dock a{
    height:62px!important;
    min-height:62px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
  }
}
@media(display-mode:standalone) and (max-width:760px){
  html body .activity-dock{
    inset:auto 0 0 0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    height:calc(62px + env(safe-area-inset-bottom))!important;
    max-height:none!important;
  }
}


/* QU3 App Feel v12 — room-style bottom nav shape:
   rounded ONLY across the top; bottom stays flush with viewport. */
@media(max-width:760px){
  html body .activity-dock{
    border-radius:18px 18px 0 0!important;
    overflow:hidden!important;
  }
}
@media(display-mode:standalone) and (max-width:760px){
  html body .activity-dock{
    border-radius:18px 18px 0 0!important;
  }
}


/* QU3 App Feel v14 — Discover bottom-nav polish. */
@media(max-width:760px){
  html body .activity-dock{
    border-bottom:0!important;
  }

  /* Slightly stronger/higher labels without moving the nav icons. */
  html body .activity-dock a > span:last-child,
  html body .activity-dock a > small,
  html body .activity-dock .activity-dock-label{
    font-size:calc(1em + 1px)!important;
    transform:translateY(-2px)!important;
  }
}


/* QU3 App Feel v15 — Discover dock matches the room dock's visible shell.
   Canonical final override: centered, same horizontal footprint, no bottom edge. */
@media(max-width:760px){
  html body .activity-dock{
    position:fixed!important;
    inset:auto auto 0 50%!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;

    width:min(1100px,calc(100% - 30px))!important;
    max-width:calc(100% - 30px)!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;

    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    transform:translateX(-50%)!important;
    translate:none!important;

    border:1px solid rgba(133,68,255,.55)!important;
    border-bottom:0!important;
    outline:0!important;
    border-radius:28px 28px 0 0!important;

    background:rgba(7,9,29,.94)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    box-shadow:0 -3px 24px rgba(133,68,255,.22),0 -18px 55px rgba(0,0,0,.30)!important;
    overflow:hidden!important;
  }

  html body .activity-dock::before,
  html body .activity-dock::after{
    content:none!important;
    display:none!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body .activity-dock a{
    height:62px!important;
    min-height:62px!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
}
@media(display-mode:standalone) and (max-width:760px){
  html body .activity-dock{
    bottom:0!important;
    width:min(1100px,calc(100% - 30px))!important;
    max-width:calc(100% - 30px)!important;
    height:calc(62px + env(safe-area-inset-bottom))!important;
    max-height:none!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    border-bottom:0!important;
    border-radius:28px 28px 0 0!important;
  }
}


/* QU3 App Feel v16 — larger Discover nav icons only.
   Keep v15 shell geometry and labels untouched. */
@media(max-width:760px){
  html body .activity-dock a > span:first-child{
    font-size:22px!important;
    line-height:22px!important;
  }

  /* Profile avatar is an icon too; enlarge it proportionally. */
  html body .activity-dock .dock-profile-icon{
    width:34px!important;
    height:34px!important;
    font-size:13px!important;
    line-height:34px!important;
  }
}


/* QU3 App Feel v17 — visually balance the Parties/magnify glyph only. */
@media(max-width:760px){
  html body .activity-dock a[href*="join.html"] > span:first-child{
    font-size:27px!important;
    line-height:22px!important;
    transform:translateY(-1px)!important;
  }
}