/* ==========================================
   Boiling Harmonies — Mobile & Tablet Styles
   Applies up to 991.98px (Bootstrap md/lg cutoff)
   ========================================== */
@media (max-width: 991.98px){

  /* Make the collapsed navbar a panel (not full-width) + stripes */
  .navbar .navbar-collapse{
    position: absolute;
    top: calc(var(--nav-bottom, 56px) + 8px);
    right: 8px; left: auto;

    flex-basis: auto !important;
    flex-grow: 0 !important;

    width: min(86vw, 420px);
    min-width: 260px;
    max-height: calc(100dvh - var(--nav-bottom, 56px) - 24px);
    overflow-y: auto;
    border-radius: 16px;
    padding: 12px 8px;
    z-index: 1050;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);

    background-color:#000;
    background-image: repeating-linear-gradient(
      45deg, rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 2px,
      transparent 2px, transparent 6px
    );
    background-size: 8px 8px;
  }
  .navbar .navbar-collapse.collapse      { display: none !important; }
  .navbar .navbar-collapse.collapse.show { display: block !important; }
  .navbar .navbar-nav { flex-direction: column; gap: 8px; }
  .navbar .dropdown-menu { position: static; margin: 4px 0 0; border-radius: 12px; background: transparent; box-shadow: none; }

  /* Optional offcanvas theming, if used */
  .offcanvas {
    --bs-offcanvas-width: min(86vw, 220px);
    --bs-offcanvas-bg: #000;
    --bs-offcanvas-color: #fff;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;

    background-image: repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 2px,
      transparent 2px,
      transparent 6px
    );
    background-size: 8px 8px;
    border-radius: 16px 0 0 16px;
  }

  /* Profile page tweaks on mobile */
  .profile-page .profile-header h2 { font-size: 1.25rem; }
  .profile-page .avatar-action {
    width: 36px;
    height: 36px;
    right: 58px;  /* keep near edge on small screens */
    bottom: 1px;
  }

  /* Keep the floating/min player from covering bottom buttons */
  #site-player.min { bottom: 70px; }
  body:not(.popout):not(.no-player){
    padding-bottom: calc(max(var(--bh-player-h), 70px) + env(safe-area-inset-bottom, 6px));
    scroll-padding-bottom: calc(max(var(--bh-player-h), 70px) + env(safe-area-inset-bottom, 6px));
  }

  /* Slightly tighter containers to avoid edge collisions */
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* Phone-focused refinements (<= 768px) */
@media (max-width: 768px){
  body { font-size: 15px; line-height: 1.5; }

  /* Avatar block */
  .avatar-stack { width: 150px; height: 150px; }
  .profile-page .avatar-action { width: 34px; height: 34px; }

  /* Extra gentle bottom offset for very small phones */
  #site-player.min { bottom: 76px; }
  body:not(.popout):not(.no-player){
    padding-bottom: calc(max(var(--bh-player-h), 76px) + env(safe-area-inset-bottom, 8px));
    scroll-padding-bottom: calc(max(var(--bh-player-h), 76px) + env(safe-area-inset-bottom, 8px));
  }
    .profile-page .avatar-action {
    width: 36px;
    height: 36px;
    right: 58px;  /* keep near edge on small screens */
    bottom: 1px;
  }

}