/* ==========================================================================
   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 .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 .game-player {
    padding: 0 !important;
    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;
  }

  .bd-host-dock {
    display: none !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);
  }
}