/* ==========================================================================
   BeatDesk Mobile — touch-first layout, no horizontal scroll, clean controls
   Load last. Overrides earlier layers on small screens only.
   ========================================================================== */

:root {
  --bd-mobile-gutter: max(1rem, env(safe-area-inset-left, 0px));
  --bd-mobile-gutter-right: max(1rem, env(safe-area-inset-right, 0px));
  --bd-mobile-dock-h: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

/* ── Global: stop sideways page scroll ── */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}

#root,
main.flex-1,
.min-h-screen {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* Better taps — no double-tap zoom delay on controls */
button,
a,
[role="button"],
.sp-ctrl,
.sp-queue-row,
.action-chip,
.filter-pill,
.bd-host-dock-btn,
.bd-acc-btn,
.ui-icon-btn,
.sp-pill,
.sp-autodj-btn {
  touch-action: manipulation;
}

/* ── Site header ── */

@media (max-width: 767px) {
  .site-header > div {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    min-width: 0;
    padding-inline: var(--bd-mobile-gutter) var(--bd-mobile-gutter-right) !important;
  }

  .site-header .logo-mark {
    flex-shrink: 0;
  }

  .site-header a[href="/"],
  .site-header .font-display {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bd-nav-userbar {
    flex-shrink: 1;
    min-width: 0;
    max-width: calc(100vw - 8.5rem);
  }

  .bd-nav-user-menu {
    max-width: 100%;
  }

  .site-header nav.border-t.md\:hidden {
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-header nav.border-t.md\:hidden .flex.flex-col {
    gap: 0.25rem;
  }

  .site-header .btn-primary {
    min-height: 2.5rem !important;
    padding-inline: 0.875rem !important;
    font-size: 0.8125rem !important;
  }
}

/* ── Page containers ── */

@media (max-width: 767px) {
  .mx-auto.max-w-7xl,
  .mx-auto.max-w-6xl,
  .mx-auto.max-w-4xl,
  .mx-auto.max-w-3xl,
  .mx-auto.max-w-2xl,
  .mx-auto.max-w-xl,
  .pb-16 > .mx-auto.max-w-6xl,
  .bd-party .mx-auto.max-w-7xl,
  .bd-party .mx-auto.max-w-6xl,
  .bd-party .mx-auto.max-w-4xl {
    padding-inline: var(--bd-mobile-gutter) var(--bd-mobile-gutter-right) !important;
    box-sizing: border-box;
  }

  .pb-16,
  .pb-20 {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  /* Party button shadows can nudge layout on tiny screens */
  .bd-party .btn-primary,
  .bd-party .btn-secondary {
    max-width: 100%;
  }
}

/* ── Playlist hero + print actions ── */

@media (max-width: 767px) {
  .game-hero--detail {
    min-height: 0 !important;
    padding-inline: 0 !important;
  }

  .game-hero--detail .relative.mx-auto > a.inline-flex {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .game-hero--detail .game-hero-bg {
    width: min(56vw, 200px) !important;
    margin-inline: var(--bd-mobile-gutter) !important;
  }

  .game-hero--detail .mt-5.flex {
    margin-inline: var(--bd-mobile-gutter) !important;
    width: auto !important;
  }

  .game-hero--detail .mt-5.flex > div:last-child,
  .ui-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .game-hero--detail .action-chip {
    flex: none !important;
    width: 100% !important;
    min-height: 2.75rem !important;
    padding-inline: 0.625rem !important;
    font-size: 0.6875rem !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.2;
  }

  .game-hero--detail .action-chip:first-of-type {
    grid-column: 1 / -1;
    min-height: 3rem !important;
  }

  .game-hero--detail .ui-icon-btn {
    width: 2.75rem !important;
    height: 2.75rem !important;
    justify-self: center;
  }

  .bd-host-page .game-hero--detail .mt-5.flex > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bd-host-page .game-hero--detail .action-chip {
    flex: none !important;
  }
}

/* ── Game player (all pages) ── */

@media (max-width: 767px) {
  .game-player {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    gap: 0.75rem !important;
    box-sizing: border-box;
  }

  .sp-player,
  .sp-queue {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  .sp-player {
    padding: 1rem !important;
    gap: 0.875rem !important;
  }

  .sp-queue {
    padding: 0.875rem !important;
    max-height: min(38vh, 16rem) !important;
  }

  .sp-queue-list {
    max-height: min(32vh, 14rem) !important;
  }

  .sp-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
    flex-wrap: nowrap;
  }

  .sp-ctrl--ghost {
    width: 2.625rem !important;
    height: 2.625rem !important;
    flex-shrink: 0;
  }

  .sp-ctrl--play {
    width: 3.25rem !important;
    height: 3.25rem !important;
    flex-shrink: 0;
  }

  .sp-ctrl--labeled,
  .sp-ctrl-play-wrap {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  .sp-ctrl-label,
  .sp-ctrl-label--play {
    display: none !important;
  }

  .sp-player-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    width: 100% !important;
  }

  .sp-autodj,
  .sp-volume {
    width: 100% !important;
    max-width: none !important;
  }

  .sp-autodj-btn {
    min-height: 2.75rem !important;
  }

  .sp-vol-slider {
    min-height: 1.75rem;
  }

  .sp-vol-slider::-webkit-slider-thumb {
    width: 1.125rem;
    height: 1.125rem;
  }

  .sp-vol-slider::-moz-range-thumb {
    width: 1.125rem;
    height: 1.125rem;
  }

  .sp-track,
  .sp-title,
  .sp-artist {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .sp-upnext {
    max-width: 100% !important;
  }

  .sp-options {
    margin-top: 0.25rem !important;
  }

  .sp-options-body {
    gap: 0.875rem !important;
  }

  .sp-pills {
    gap: 0.5rem !important;
  }

  .sp-pill {
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem !important;
  }
}

@media (max-width: 380px) {
  .sp-controls {
    gap: 0.5rem !important;
    padding-inline: 0 !important;
  }

  .sp-ctrl--ghost {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  .sp-ctrl--play {
    width: 3.25rem !important;
    height: 3.25rem !important;
  }
}

/* ── Host booth: inline controls, full-width rows on phone ── */

@media (max-width: 767px) {
  .bd-host-page {
    --booth-card-pad: 1rem;
  }

  .bd-host-page .pb-16 {
    max-width: 100% !important;
    padding-inline: var(--bd-mobile-gutter) var(--bd-mobile-gutter-right) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  .bd-host-page .pb-16 > .mx-auto.max-w-6xl,
  .bd-host-page .mx-auto.max-w-6xl {
    padding: var(--booth-card-pad) !important;
  }

  .bd-host-page .bd-mix-header {
    margin-bottom: 0.875rem !important;
  }

  .bd-host-page .bd-mix-header-inner {
    gap: 0.375rem;
  }

  .bd-host-page .bd-mix-header-copy h1 {
    font-size: clamp(1.375rem, 7vw, 1.75rem) !important;
    margin-bottom: 0.25rem !important;
  }

  .bd-host-page .bd-mix-meta {
    font-size: 0.75rem !important;
  }

  .bd-host-page .bd-mix-header-icons .ui-icon-btn {
    width: 2.125rem !important;
    height: 2.125rem !important;
    flex-basis: 2.125rem !important;
  }

  .bd-host-page .game-player {
    min-width: 0;
  }

  .bd-host-page .sp-player {
    min-width: 0;
    overflow: hidden;
  }

  /* Hero print row — single column on narrow screens */
  .bd-host-page .game-hero--detail .mt-5.flex > div:last-child {
    grid-template-columns: 1fr !important;
  }

  .bd-host-page .game-hero--detail .action-chip {
    font-size: 0.625rem !important;
    padding-inline: 0.5rem !important;
  }

  .bd-host-page .game-hero--detail .ui-icon-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Sticky thumb-zone playback dock */
  .bd-host-dock {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding: 0.5rem var(--bd-mobile-gutter) calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(8, 5, 15, 0.96);
    border-top: 2px solid rgba(157, 78, 221, 0.45);
    backdrop-filter: blur(14px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  }

  .bd-host-dock-btn {
    min-height: 3.25rem;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .bd-host-dock-btn--play {
    min-height: 3.5rem;
    background: linear-gradient(135deg, #9d4edd, #7b2cbf) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  .bd-host-page .pb-16 {
    padding-bottom: calc(var(--bd-mobile-dock-h) + 1rem) !important;
  }

  .bd-host-page .sp-ctrl--play {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  .bd-host-page .sp-ctrl--ghost {
    width: 3rem !important;
    height: 3rem !important;
  }

  .bd-host-page .sp-autodj-btn {
    min-height: 3rem !important;
    font-size: 0.75rem !important;
  }

  /* Compact hero — music first */
  .bd-host-page .game-hero--detail .mt-5.flex > div:first-child p {
    display: none !important;
  }

  .bd-host-page .game-hero--detail h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .bd-host-page .game-hero--detail .mt-5.flex > div:last-child {
    display: grid !important;
    grid-template-columns: auto 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .bd-host-page .game-hero--detail .ui-icon-btn {
    grid-row: span 2;
    width: 3rem !important;
    height: 3rem !important;
  }

  .bd-host-page .game-hero--detail .action-chip {
    min-height: 3rem !important;
    font-size: 0.6875rem !important;
  }

  /* Host console — stacked control deck */
  .bd-host-console {
    padding-inline: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .bd-control-header,
  .bd-control-group,
  .bd-host-console-panel {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-control-group .bd-host-console-actions,
  .bd-host-console-actions--lobby {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem !important;
  }

  .bd-host-btn {
    width: 100% !important;
    min-height: 3rem !important;
    font-size: 0.75rem !important;
    flex: none !important;
  }

  .bd-host-toolbar-hint {
    font-size: 0.75rem !important;
  }

  .bd-host-pattern-btn {
    min-height: 2.75rem !important;
  }

  .bd-sponsor-select {
    min-height: 3rem !important;
    font-size: 1rem !important;
  }
}

/* ── Modals (print cards, call lists) ── */

@media (max-width: 767px) {
  .modal-root {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-backdrop {
    backdrop-filter: blur(4px);
  }

  .modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 92vh) !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .modal-header {
    flex-shrink: 0;
    padding: 1rem 1.125rem !important;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.125rem calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  .panel-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .panel-toolbar label,
  .panel-toolbar p {
    margin: 0 !important;
  }

  .panel-toolbar select,
  .panel-toolbar input,
  .panel-toolbar button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.75rem;
  }

  .bingo-preview-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .bingo-card-preview-wrap {
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Welcome / account pages ── */

@media (max-width: 767px) {
  .bd-welcome-hero {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-welcome-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .bd-welcome-copy h1 {
    font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
  }

  .bd-welcome-showcase--split {
    max-width: 100% !important;
  }

  .bd-mock-dash--premium {
    transform: none !important;
  }

  .bd-welcome-demo {
    gap: 1rem !important;
  }

  .bd-welcome-paper-cell {
    font-size: 0.375rem !important;
  }

  .bd-welcome-cta {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-welcome-cta--premium .bd-welcome-cta-inner {
    padding: 1.5rem 1rem !important;
  }

  .bd-acc-section {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-dash-header {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-dash-header-inner {
    flex-direction: column;
    align-items: stretch !important;
  }

  .bd-dash-header-inner .bd-acc-btn {
    width: 100%;
  }

  .bd-dash-shortcuts {
    grid-template-columns: 1fr !important;
  }

  .bd-dash-upgrade-btn {
    width: 100%;
    min-width: 0 !important;
  }

  .bd-auth-page {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-upgrade-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .bd-upgrade-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 1.5rem 1.125rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }

  .bd-upgrade-actions {
    flex-direction: column;
  }

  .bd-upgrade-actions .bd-acc-btn {
    width: 100%;
  }
}

/* ── Library / browse ── */

@media (max-width: 767px) {
  .page-hero .relative.mx-auto {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .page-hero + section .flex.flex-wrap,
  .pb-20 .flex.flex-wrap.gap-2 {
    gap: 0.5rem !important;
  }

  input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  .filter-pill {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .stagger-children,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }

  .ui-recent-scroll {
    margin-inline: calc(var(--bd-mobile-gutter) * -0.5) !important;
    padding-inline: var(--bd-mobile-gutter) !important;
    scroll-padding-inline: var(--bd-mobile-gutter);
  }
}

@media (max-width: 380px) {
  .stagger-children,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Toasts ── */

@media (max-width: 767px) {
  .ui-toast,
  .bd-acc-toast {
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    left: var(--bd-mobile-gutter) !important;
    right: var(--bd-mobile-gutter-right) !important;
    transform: translateY(80px) !important;
    max-width: none;
    width: auto;
  }

  .ui-toast.is-visible,
  .bd-acc-toast.is-visible {
    transform: translateY(0) !important;
  }
}

/* ── Loader ── */

@media (max-width: 767px) {
  .bd-page-loader-card {
    margin-inline: 1rem;
    max-width: calc(100vw - 2rem);
  }
}

/* ==========================================================================
   Mobile UX pass — bigger taps, less scroll, thumb-friendly flows
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --bd-touch-min: 2.75rem;
  }

  /* Minimum comfortable tap targets */
  button,
  .bd-acc-btn,
  .bd-host-btn,
  .bd-event-mode-btn,
  .bd-join-btn,
  .filter-pill,
  .site-header nav a,
  .site-header .btn-primary {
    min-height: var(--bd-touch-min);
  }

  /* Favorites — always visible, easy to hit */
  .ui-fav-btn {
    opacity: 1 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  .ui-fav-btn svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* Playlist browse — readable cards */
  .playlist-card {
    border-radius: 12px !important;
  }

  .playlist-card p,
  .playlist-card h3 {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  /* Mode picker — bottom sheet */
  .bd-event-mode-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .bd-event-mode-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }

  .bd-event-mode-btn {
    min-height: 4.25rem !important;
    padding: 1rem 1.125rem !important;
  }

  .bd-event-mode-btn strong {
    font-size: 1.0625rem !important;
  }

  .bd-event-mode-btn span {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }

  /* Guest join — full-screen card game */
  .bd-join-welcome,
  .bd-join-msg,
  .bd-join-error {
    padding-inline: var(--bd-mobile-gutter) !important;
  }

  .bd-join-field input {
    min-height: 3rem !important;
    font-size: 1rem !important;
  }

  .bd-join-btn {
    width: 100%;
    min-height: 3.25rem !important;
    font-size: 1rem !important;
  }

  .bd-join-head {
    padding: 0.625rem var(--bd-mobile-gutter) !important;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .bd-join-win-pattern {
    padding-inline: var(--bd-mobile-gutter) !important;
    font-size: 0.8125rem !important;
  }

  .bd-join-hint {
    padding: 0.5rem var(--bd-mobile-gutter) calc(0.5rem + env(safe-area-inset-bottom)) !important;
    font-size: 0.8125rem !important;
  }

  .bd-join-bingo-card {
    margin: var(--bd-mobile-gutter) !important;
    padding: 1.5rem 1.25rem !important;
  }

  .bd-join-bingo-dismiss,
  .bd-join-bingo-close {
    min-width: var(--bd-touch-min);
    min-height: var(--bd-touch-min);
  }

  /* Shorter song queue on phone — reach controls faster */
  .bd-host-page .sp-queue {
    max-height: min(28vh, 11rem) !important;
  }

  .bd-host-page .sp-queue-list {
    max-height: min(24vh, 9.5rem) !important;
  }

  .sp-queue-row {
    min-height: 2.75rem;
    padding-block: 0.625rem !important;
  }

  /* Account / dashboard */
  .bd-plans-grid,
  .bd-dash-grid {
    grid-template-columns: 1fr !important;
  }

  .bd-acc-section-head h2 {
    font-size: 1.125rem !important;
  }

  .bd-welcome-price-grid {
    grid-template-columns: 1fr !important;
  }

  .bd-welcome-price-card.is-featured {
    transform: none !important;
    order: -1;
  }

  .bd-welcome-vs-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bd-welcome-vs-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }

  .bd-welcome-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .stagger-children,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.gap-4.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .game-hero--detail .mt-5.flex > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }

  .game-hero--detail .ui-icon-btn {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* ==========================================================================
   Mobile UX v3 — thumb-first redesign (June 2026)
   Larger taps, clearer hierarchy, sheet nav, sticky search, readable type
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --bd-mobile-header-h: 3.75rem;
    --bd-mobile-touch: 3rem;
    --bd-mobile-touch-lg: 3.25rem;
    --bd-mobile-radius: 14px;
    --bd-mobile-gap: 0.875rem;
    --bd-mobile-section: 1.75rem;
  }

  /* ── Readable type + no iOS input zoom ── */

  body.bd-app {
    font-size: 1rem;
    line-height: 1.55;
  }

  input,
  select,
  textarea,
  .bd-auth-field input,
  .bd-home-search,
  .bd-acc-input,
  .admin-input {
    font-size: 16px !important;
  }

  h1 {
    line-height: 1.1 !important;
  }

  /* ── Sticky header bar ── */

  .site-header {
    position: relative !important;
    top: auto !important;
    z-index: 40 !important;
    min-height: var(--bd-mobile-header-h);
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(8, 5, 15, 0.94) !important;
    border-bottom: 1px solid rgba(167, 139, 250, 0.22) !important;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
  }

  .site-header > div {
    min-height: var(--bd-mobile-header-h);
    align-items: center !important;
  }

  .site-header .lb-brand-logo {
    max-height: 1.75rem;
    width: auto;
  }

  .site-header button.md\:hidden,
  .site-header .btn-primary {
    min-width: var(--bd-mobile-touch) !important;
    min-height: var(--bd-mobile-touch) !important;
    border-radius: 12px !important;
  }

  .site-header button.md\:hidden {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(157, 78, 221, 0.14) !important;
    border: 1px solid rgba(157, 78, 221, 0.28) !important;
    color: #fff8f0 !important;
    flex-shrink: 0;
  }

  .site-header button.md\:hidden:active {
    transform: scale(0.96);
  }

  .bd-nav-userbar {
    max-width: none;
    margin-left: auto;
  }

  .bd-nav-user-link {
    min-height: var(--bd-mobile-touch);
    padding: 0.35rem 0.75rem 0.35rem 0.35rem !important;
  }

  .bd-nav-user-avatar {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.9375rem !important;
  }

  .bd-nav-user-name {
    max-width: 6.5rem !important;
    font-size: 0.8125rem !important;
  }

  .bd-nav-logout {
    min-width: var(--bd-mobile-touch) !important;
    min-height: var(--bd-mobile-touch) !important;
  }

  /* ── Full-screen mobile nav sheet ── */

  html.bd-mobile-nav-open {
    overflow: hidden;
  }

  html.bd-mobile-nav-open body {
    overflow: hidden;
    touch-action: none;
  }

  html.bd-mobile-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 2, 10, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: bd-mobile-fade-in 0.2s ease;
    pointer-events: auto;
  }

  @keyframes bd-mobile-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden {
    position: fixed !important;
    top: calc(var(--bd-mobile-header-h) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 130 !important;
    display: block !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.75rem var(--bd-mobile-gutter) calc(1.25rem + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #110a1f 0%, #08050f 100%) !important;
    border-top: 2px solid rgba(157, 78, 221, 0.35) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: bd-mobile-sheet-in 0.22s ease;
  }

  html:not(.bd-mobile-nav-open) .site-header nav.border-t.md\:hidden {
    display: none !important;
  }

  @keyframes bd-mobile-sheet-in {
    from {
      opacity: 0;
      transform: translateY(-0.75rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden .flex.flex-col {
    gap: 0.5rem !important;
  }

  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden .nav-link,
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a,
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden button,
  html.bd-mobile-nav-open .bd-nav-auth-menu a,
  html.bd-mobile-nav-open .bd-nav-auth-menu button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: var(--bd-mobile-touch-lg) !important;
    padding: 0.875rem 1rem !important;
    border-radius: var(--bd-mobile-radius) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box;
  }

  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden .btn-primary,
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a.btn-primary {
    justify-content: center !important;
    background: var(--party-lime, #b8ff3c) !important;
    color: #0a0612 !important;
    border-color: #0a0612 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    margin-top: 0.5rem;
  }

  .bd-nav-auth-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* ── Page rhythm ── */

  main.flex-1 {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }

  footer.border-t {
    padding: 1.5rem var(--bd-mobile-gutter) calc(1.5rem + env(safe-area-inset-bottom)) !important;
    text-align: center;
  }

  footer.border-t .flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  footer.border-t a {
    min-height: var(--bd-mobile-touch);
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
  }

  /* ── Logged-in home ── */

  .bd-home-vault .page-hero.bd-home-hero {
    padding: 1.25rem var(--bd-mobile-gutter) 1rem !important;
  }

  .bd-home-vault .page-hero h1 {
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
  }

  .bd-home-vault #bd-home-toolbar,
  .bd-home-vault .bd-host-toolbar-wrap {
    position: relative !important;
    top: auto !important;
    z-index: auto;
    margin: 0 calc(var(--bd-mobile-gutter) * -1);
    padding: 0.75rem var(--bd-mobile-gutter);
    background: rgba(8, 5, 15, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  #bd-home-search,
  .bd-host-search input {
    min-height: var(--bd-mobile-touch-lg) !important;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    border-radius: var(--bd-mobile-radius) !important;
    font-size: 16px !important;
  }

  .bd-host-search-clear {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  .bd-host-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.25rem;
    margin-inline: calc(var(--bd-mobile-gutter) * -1);
    padding-inline: var(--bd-mobile-gutter);
    scrollbar-width: none;
  }

  .bd-host-filters::-webkit-scrollbar {
    display: none;
  }

  .bd-host-filter {
    flex: 0 0 auto;
    min-height: 2.5rem !important;
    padding: 0.5rem 1rem !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .bd-home-vault .bd-host-toolbar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .bd-home-vault .bd-host-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .bd-home-vault .bd-host-search {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--bd-mobile-touch-lg);
    padding: 0 0.875rem;
    border-radius: var(--bd-mobile-radius);
    border: 2px solid rgba(157, 78, 221, 0.28);
    background: rgba(18, 10, 30, 0.88);
  }

  .bd-home-vault .bd-host-search svg {
    flex-shrink: 0;
    color: var(--party-hot, #ff2d95);
  }

  .bd-home-vault .bd-host-search input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    padding: 0.75rem 0 !important;
    box-shadow: none !important;
  }

  .bd-home-vault .bd-host-search input:focus {
    outline: none;
  }

  .bd-home-vault .bd-host-results-pill {
    flex-shrink: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(184, 255, 60, 0.12);
    border: 1px solid rgba(184, 255, 60, 0.3);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--party-lime, #b8ff3c);
    white-space: nowrap;
  }

  .bd-home-vault .bd-host-filters {
    display: flex;
    gap: 0.5rem;
  }

  .bd-home-vault .bd-host-filter {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--party-text, #fff8f0);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }

  .bd-home-vault .bd-host-filter.is-active {
    background: rgba(157, 78, 221, 0.25);
    border-color: rgba(157, 78, 221, 0.55);
    color: #fff8f0;
  }

  .bd-home-section {
    margin-bottom: var(--bd-mobile-section);
    padding-inline: var(--bd-mobile-gutter);
  }

  .bd-home-section-head h2 {
    font-size: 1.5rem !important;
  }

  .bd-home-vault .bd-home-row.stagger-children {
    margin-inline: calc(var(--bd-mobile-gutter) * -1);
    padding-inline: var(--bd-mobile-gutter);
    scroll-padding-inline: var(--bd-mobile-gutter);
    gap: 0.875rem !important;
  }

  .bd-home-vault .bd-home-row .bd-host-pl-item {
    flex: 0 0 min(148px, 44vw);
  }

  .bd-home-vault .stagger-children:not(.bd-home-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.875rem !important;
  }

  .bd-home-browse {
    padding-inline: var(--bd-mobile-gutter);
  }

  .bd-home-browse a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--bd-mobile-touch-lg) !important;
    width: 100%;
    font-size: 0.9375rem !important;
    border-radius: var(--bd-mobile-radius) !important;
  }

  .bd-home-drop {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem !important;
    font-size: 0.9375rem !important;
  }

  /* ── Auth pages ── */

  .bd-auth-page {
    padding: 1.25rem var(--bd-mobile-gutter) 2rem !important;
    min-height: calc(100dvh - var(--bd-mobile-header-h) - 5rem);
  }

  .bd-auth-card {
    max-width: none !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: var(--bd-mobile-radius) !important;
  }

  .bd-auth-card h1 {
    font-size: 1.75rem !important;
  }

  .bd-auth-submit {
    min-height: var(--bd-mobile-touch-lg) !important;
    width: 100%;
    font-size: 0.9375rem !important;
  }

  .bd-auth-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.25rem 0;
  }

  /* ── Welcome / marketing ── */

  .bd-welcome-hero {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }

  .bd-welcome-copy h1 {
    font-size: clamp(2.5rem, 12vw, 3.5rem) !important;
    line-height: 0.95 !important;
  }

  .bd-welcome-cta-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .bd-welcome-cta-inner .bd-acc-btn {
    width: 100% !important;
    min-height: var(--bd-mobile-touch-lg) !important;
  }

  .bd-welcome-feature-pills {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }

  .bd-welcome-feature-pill {
    width: 100%;
    min-height: var(--bd-mobile-touch);
    padding: 0.75rem 1rem !important;
  }

  /* ── Playlist library ── */

  .page-hero {
    padding-top: 1.25rem !important;
    padding-bottom: 1rem !important;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
  }

  .filter-pill {
    min-height: 2.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 999px !important;
  }

  .pb-20 .flex.flex-wrap.gap-2,
  .page-hero + section .flex.flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    margin-inline: calc(var(--bd-mobile-gutter) * -1);
    padding-inline: var(--bd-mobile-gutter);
    scrollbar-width: none;
  }

  .pb-20 .flex.flex-wrap.gap-2::-webkit-scrollbar,
  .page-hero + section .flex.flex-wrap::-webkit-scrollbar {
    display: none;
  }

  .playlist-card {
    border-radius: var(--bd-mobile-radius) !important;
  }

  .playlist-card-body {
    padding: 0.75rem !important;
  }

  .playlist-card h3,
  .playlist-card .font-semibold {
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
  }

  .playlist-card p {
    font-size: 0.8125rem !important;
  }

  /* ── Host / mix detail — simplified thumb layout ── */

  .bd-host-page .game-hero--detail h1 {
    font-size: clamp(1.625rem, 8vw, 2.25rem) !important;
    margin-bottom: 0.5rem !important;
  }

  .bd-host-page .game-hero--detail .mt-5.flex {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .bd-host-page .game-hero--detail .mt-5.flex > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
    width: 100% !important;
  }

  .bd-host-page .game-hero--detail .action-chip {
    min-height: var(--bd-mobile-touch-lg) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  .bd-host-page .game-hero--detail .action-chip:first-of-type {
    grid-column: 1 / -1;
  }

  .bd-host-page .game-hero--detail .ui-icon-btn {
    grid-column: 1 / -1;
    width: var(--bd-mobile-touch-lg) !important;
    height: var(--bd-mobile-touch-lg) !important;
    justify-self: start;
  }

  .bd-host-dock {
    gap: 0.625rem !important;
    padding-top: 0.625rem !important;
  }

  .bd-host-dock-btn {
    min-height: 3.5rem !important;
    font-size: 0.6875rem !important;
    border-radius: 12px !important;
  }

  .bd-host-dock-btn--play {
    min-height: 3.75rem !important;
  }

  .bd-host-page .pb-16 {
    padding-bottom: calc(var(--bd-mobile-dock-h) + 1.25rem) !important;
  }

  /* ── Dashboard ── */

  .bd-dash-header {
    padding-top: 1.25rem !important;
    padding-bottom: 1rem !important;
  }

  .bd-dash-shortcuts a,
  .bd-dash-card,
  .bd-quick-start a {
    min-height: var(--bd-mobile-touch-lg) !important;
    border-radius: var(--bd-mobile-radius) !important;
  }

  /* ── Touch feedback ── */

  .bd-acc-btn:active,
  .action-chip:active,
  .filter-pill:active,
  .bd-host-dock-btn:active,
  .playlist-card:active {
    transform: scale(0.98);
  }

  /* ── Toasts above dock ── */

  body.bd-host-page .ui-toast.is-visible,
  body.bd-host-page .bd-acc-toast.is-visible {
    bottom: calc(var(--bd-mobile-dock-h) + 0.75rem) !important;
  }
}

@media (max-width: 380px) {
  .bd-home-vault .stagger-children:not(.bd-home-row) {
    grid-template-columns: 1fr !important;
  }

  .bd-host-page .game-hero--detail .mt-5.flex > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.bd-mobile-nav-open::before,
  .site-header nav.border-t.md\:hidden {
    animation: none !important;
  }
}

/* ==========================================================================
   Mobile Host v4 — inline controls, no sticky dock, cleaner booth deck
   ========================================================================== */

@media (max-width: 767px) {
  /* Remove fixed bottom playback dock — controls live in the player card */
  .bd-host-dock {
    display: none !important;
  }

  body.bd-host-page .ui-toast.is-visible,
  body.bd-host-page .bd-acc-toast.is-visible {
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  .bd-host-page .pb-16 {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  /* ── Mix header: compact, scrolls with page ── */

  .bd-host-page .game-hero--detail.bd-mix-header,
  .bd-host-page .game-hero--detail {
    padding-bottom: 0.75rem !important;
  }

  .bd-host-page .bd-mix-header-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .bd-host-page .bd-mix-header-nav > a.inline-flex {
    min-height: 2.75rem;
    padding: 0.5rem 0 !important;
    font-size: 0.875rem !important;
  }

  .bd-host-page .bd-mix-header-icons {
    justify-content: flex-start !important;
    gap: 0.5rem !important;
  }

  .bd-host-page .bd-mix-header-icons .ui-icon-btn {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  /* Print / share actions — full-width stack */
  .bd-host-page .game-hero--detail .mt-5.flex {
    flex-direction: column !important;
    gap: 0.875rem !important;
    margin-top: 1rem !important;
  }

  .bd-host-page .game-hero--detail .mt-5.flex > div:first-child p {
    display: block !important;
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    margin-top: 0.35rem !important;
  }

  .bd-host-page .game-hero--detail .mt-5.flex > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    width: 100% !important;
  }

  .bd-host-page .game-hero--detail .action-chip {
    width: 100% !important;
    min-height: 3.25rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    border-radius: 12px !important;
    grid-column: auto !important;
  }

  .bd-host-page .game-hero--detail .ui-icon-btn {
    width: 3.25rem !important;
    height: 3.25rem !important;
    align-self: flex-start;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* ── Player card — primary control surface ── */

  .bd-host-page .game-player {
    gap: 1rem !important;
  }

  .bd-host-page .sp-player {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: linear-gradient(165deg, rgba(22, 16, 42, 0.98), rgba(10, 6, 18, 0.98)) !important;
    border: 1px solid rgba(157, 78, 221, 0.32) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
  }

  .bd-host-page .sp-player-body {
    gap: 0.875rem !important;
  }

  .bd-host-page .sp-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
  }

  .bd-host-page .sp-artist {
    font-size: 0.875rem !important;
    opacity: 0.85;
  }

  .bd-host-page .sp-status {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Playback row — large, centered, easy thumbs */
  .bd-host-page .sp-controls {
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    padding: 0.875rem 0.5rem !important;
    margin-top: 0.25rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box;
  }

  .bd-host-page .sp-ctrl--ghost {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .bd-host-page .sp-ctrl--play {
    width: 4.5rem !important;
    height: 4.5rem !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 28px rgba(157, 78, 221, 0.4) !important;
  }

  .bd-host-page .sp-ctrl-icon {
    width: 1.375rem !important;
    height: 1.375rem !important;
  }

  .bd-host-page .sp-ctrl-play-icon {
    width: 1.625rem !important;
    height: 1.625rem !important;
  }

  .bd-host-page .sp-player-actions {
    gap: 0.75rem !important;
  }

  .bd-host-page .sp-autodj-btn {
    min-height: 3.375rem !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase;
    border-radius: 12px !important;
    white-space: normal !important;
  }

  .bd-host-page .sp-volume {
    padding: 0.75rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .bd-host-page .sp-vol-btn {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  .bd-host-page .sp-vol-slider {
    min-height: 2rem;
  }

  .bd-host-page .sp-scrubber {
    padding-top: 0.25rem !important;
  }

  .bd-host-page .sp-options summary {
    min-height: 2.75rem !important;
    padding: 0.75rem 0 !important;
    font-size: 0.875rem !important;
    font-weight: 600;
  }

  /* Song queue — readable list, not cramped */
  .bd-host-page .sp-queue {
    max-height: none !important;
    padding: 1rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .bd-host-page .sp-queue-list {
    max-height: min(42vh, 18rem) !important;
  }

  .bd-host-page .sp-queue-row {
    min-height: 3rem !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 8px;
  }

  .bd-host-page .sp-queue-row--now {
    background: rgba(255, 45, 149, 0.14) !important;
  }

  /* ── Host console — clear action cards ── */

  .bd-host-page .bd-host-console {
    margin-top: 1.25rem !important;
    padding-inline: 0 !important;
  }

  .bd-host-page .bd-host-console-shell {
    border-radius: 18px !important;
    border-color: rgba(157, 78, 221, 0.4) !important;
  }

  .bd-host-page .bd-control-header--deck {
    padding: 1.125rem !important;
  }

  .bd-host-page .bd-control-steps {
    grid-template-columns: 1fr !important;
  }

  .bd-host-page .bd-control-step {
    padding: 1.125rem !important;
  }

  .bd-host-page .bd-control-step-head h4 {
    font-size: 0.875rem !important;
  }

  .bd-host-page .bd-control-step-head p {
    font-size: 0.8125rem !important;
  }

  .bd-host-page .bd-host-action {
    min-height: 3.75rem !important;
    padding: 0.875rem 0.65rem !important;
    border-radius: 14px !important;
  }

  .bd-host-page .bd-host-action__text {
    font-size: 0.6875rem !important;
  }

  .bd-host-page .bd-host-action-grid--2 {
    grid-template-columns: 1fr !important;
  }

  .bd-host-page .bd-host-console-shell.is-live .bd-host-action-grid--lobby {
    grid-template-columns: 1fr !important;
  }

  .bd-host-page .bd-host-btn {
    min-height: 3.25rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    letter-spacing: 0.03em;
  }

  .bd-host-page .bd-host-pattern-board {
    padding: 0.875rem !important;
    border-radius: 14px !important;
  }

  .bd-host-page .bd-host-pattern-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }

  .bd-host-page .bd-host-pattern-tile {
    min-height: 5.5rem !important;
    padding: 0.625rem 0.5rem !important;
    border-radius: 12px !important;
  }

  .bd-host-page .bd-host-pattern-tile__viz {
    max-width: 5rem !important;
  }

  .bd-host-page .bd-host-pattern-tile__label {
    font-size: 0.625rem !important;
  }

  .bd-host-page .bd-host-pattern-hint {
    font-size: 0.8125rem !important;
  }

  .bd-host-page .bd-host-console-badge-code {
    font-size: 1.75rem !important;
  }

  .bd-host-page .bd-sponsor-select {
    min-height: 3.25rem !important;
    border-radius: 12px !important;
  }

  .bd-host-page .bd-host-console-panel-title {
    font-size: 0.9375rem !important;
  }

  .bd-host-page .bd-host-players-summary {
    font-size: 0.75rem !important;
    padding: 0.5rem 0 !important;
  }
}

/* ==========================================================================
   Mobile v5 — clean header, working nav sheet, airy dashboard hero
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --bd-mobile-header-h: 3.5rem;
  }

  /* ── Header: logo + menu only (account lives in the sheet) ── */

  .site-header > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding-block: 0.5rem !important;
  }

  .site-header .lb-brand-link {
    min-width: 0;
    justify-self: start;
  }

  .site-header .lb-brand-logo {
    max-height: 1.5rem !important;
    width: auto;
  }

  .site-header nav.hidden,
  .site-header a.btn-primary.hidden,
  .site-header .btn-primary.hidden {
    display: none !important;
  }

  .site-header .bd-nav-userbar {
    display: none !important;
  }

  .site-header button.md\:hidden {
    grid-column: 2;
    justify-self: end;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(184, 255, 60, 0.35) !important;
    background: rgba(184, 255, 60, 0.1) !important;
    color: #eaffb8 !important;
    flex-shrink: 0;
    z-index: 2;
  }

  /* React only mounts this nav while the menu is open — never force-hide it */
  html:not(.bd-mobile-nav-open) .site-header > nav.border-t,
  html:not(.bd-mobile-nav-open) .site-header nav.border-t.md\:hidden {
    display: revert !important;
  }

  .site-header > nav.border-t {
    position: fixed !important;
    top: calc(var(--bd-mobile-header-h) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 140 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0.75rem var(--bd-mobile-gutter) calc(1.25rem + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #120a20 0%, #08050f 100%) !important;
    border-top: 2px solid rgba(157, 78, 221, 0.35) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: bd-mobile-sheet-in 0.2s ease;
  }

  .site-header > nav.border-t .flex.flex-col {
    gap: 0.5rem !important;
  }

  .site-header > nav.border-t .nav-link,
  .site-header > nav.border-t a,
  .site-header > nav.border-t button,
  .bd-nav-auth-menu a,
  .bd-nav-auth-menu button,
  .bd-nav-validate {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 3rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box;
    color: #fff8f0 !important;
  }

  .site-header > nav.border-t a.btn-primary,
  .site-header > nav.border-t .btn-primary {
    justify-content: center !important;
    background: var(--party-lime, #b8ff3c) !important;
    color: #0a0612 !important;
    border-color: #0a0612 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    margin-top: 0.35rem;
  }

  html.bd-mobile-nav-open::before {
    z-index: 90 !important;
    background: rgba(4, 2, 10, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.bd-mobile-nav-open .site-header {
    z-index: 200 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 5, 15, 0.98) !important;
  }

  .site-header > nav.border-t {
    z-index: 201 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* ── Dashboard hero (/dashboard) ── */

  .bd-dash-header {
    padding: 1rem var(--bd-mobile-gutter) 0.875rem !important;
  }

  .bd-dash-header-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.875rem !important;
  }

  .bd-dash-intro h1 {
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
    line-height: 1 !important;
  }

  .bd-dash-intro p {
    font-size: 0.875rem !important;
    margin-top: 0.35rem !important;
    max-width: none !important;
  }

  .bd-dash-header .bd-acc-btn {
    width: 100%;
    min-height: 3rem;
    justify-content: center;
  }

  .bd-dash-body {
    padding-top: 1rem !important;
  }

  .bd-dash-top {
    margin-bottom: 1.25rem !important;
  }

  .bd-dash-plan-card {
    padding: 1rem !important;
  }

  .bd-dash-shortcuts {
    grid-template-columns: 1fr !important;
  }

  /* ── Logged-in home hero ── */

  .bd-home-vault .page-hero.bd-home-hero {
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .bd-home-vault .page-hero.bd-home-hero .relative.mx-auto {
    padding: 1rem var(--bd-mobile-gutter) 0.875rem !important;
  }

  .bd-home-vault .page-hero.bd-home-hero .section-kicker {
    font-size: 0.6875rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 0.25rem !important;
  }

  .bd-home-vault .page-hero.bd-home-hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.1rem) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  .bd-home-vault .page-hero.bd-home-hero .text-cream-muted {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    margin-top: 0.5rem !important;
  }

  .bd-home-vault .page-hero.bd-home-hero .mt-4 {
    margin-top: 0.625rem !important;
  }

  .bd-home-vault .page-hero.bd-home-hero .bd-home-drop {
    margin-top: 0.75rem !important;
    padding: 0.625rem 0.75rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    font-size: 0.8125rem !important;
  }

  .bd-home-vault .mx-auto.max-w-7xl.px-6 {
    padding-inline: var(--bd-mobile-gutter) !important;
    padding-top: 1rem !important;
  }

  .bd-home-browse {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .bd-home-browse a.btn-primary {
    width: 100%;
    min-height: 3rem;
    justify-content: center;
  }
}

/* ==========================================================================
   Mobile v6 — reliable nav sheet (no blur overlay blocking taps)
   ========================================================================== */

@media (max-width: 767px) {
  /* Never hide the nav while React has it mounted */
  html:not(.bd-mobile-nav-open) .site-header > nav.border-t,
  html:not(.bd-mobile-nav-open) .site-header nav.border-t.md\:hidden {
    display: block !important;
  }

  html.bd-mobile-nav-open::before {
    z-index: 80 !important;
    background: rgba(4, 2, 10, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  html.bd-mobile-nav-open .site-header {
    position: relative !important;
    z-index: 200 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 5, 15, 0.98) !important;
  }

  .site-header > nav.border-t {
    position: fixed !important;
    top: calc(var(--bd-mobile-header-h) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 210 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0.75rem var(--bd-mobile-gutter) calc(1.25rem + env(safe-area-inset-bottom)) !important;
    background: #0f0818 !important;
    border-top: 2px solid rgba(157, 78, 221, 0.35) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .site-header button.md\:hidden {
    position: relative !important;
    z-index: 220 !important;
    pointer-events: auto !important;
  }
}

/* ── Mobile nav v7: slim menu (Home, Playlists, Account, Validate card) ── */

@media (max-width: 767px) {
  .site-header > nav.border-t a[href="/how-to-play"],
  .site-header > nav.border-t a[href="/login"],
  .site-header > nav.border-t a[href="/register"],
  .site-header > nav.border-t a[href="/admin"],
  .site-header > nav.border-t a[href="/admin/login"],
  .site-header > nav.border-t a.btn-primary {
    display: none !important;
  }

  body:not(.bd-user-logged-in) .site-header > nav.border-t a[href="/dashboard"],
  body:not(.bd-user-logged-in) .site-header > nav.border-t .bd-nav-validate {
    display: none !important;
  }

  body.bd-user-logged-in .site-header > nav.border-t a[href="/dashboard"] {
    display: flex !important;
  }

  body.bd-user-logged-in .site-header > nav.border-t .bd-nav-validate,
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden .bd-nav-validate,
  html.bd-mobile-nav-open .site-header > nav.border-t .bd-nav-validate {
    display: flex !important;
  }

  .bd-nav-auth-menu {
    display: none !important;
  }

  .site-header > nav.border-t .bd-mobile-nav-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 3rem !important;
    margin-top: 0.35rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #ffb4b4 !important;
    background: rgba(255, 80, 80, 0.08) !important;
    border: 1px solid rgba(255, 120, 120, 0.22) !important;
    box-sizing: border-box;
    cursor: pointer;
  }

  .site-header > nav.border-t .bd-mobile-nav-logout:active {
    background: rgba(255, 80, 80, 0.14) !important;
  }

  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a[href="/how-to-play"],
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a[href="/login"],
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a[href="/register"],
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a[href="/admin"],
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a[href="/admin/login"],
  html.bd-mobile-nav-open .site-header nav.border-t.md\:hidden a.btn-primary,
  html.bd-mobile-nav-open .site-header > nav.border-t a[href="/how-to-play"],
  html.bd-mobile-nav-open .site-header > nav.border-t a[href="/login"],
  html.bd-mobile-nav-open .site-header > nav.border-t a[href="/register"],
  html.bd-mobile-nav-open .site-header > nav.border-t a[href="/admin"],
  html.bd-mobile-nav-open .site-header > nav.border-t a[href="/admin/login"],
  html.bd-mobile-nav-open .site-header > nav.border-t a.btn-primary {
    display: none !important;
  }

  html.bd-mobile-nav-open .bd-nav-auth-menu {
    display: none !important;
  }
}