/* Rinconcito Familiar — Mobile Integrity Root Repair R1.2
   Purpose: restore native vertical scrolling and prevent shared room shells from
   creating horizontal cut-off on phones. Additive only; no auth/data logic. */

@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }

  body {
    position: static !important;
    touch-action: pan-y;
  }

  #app,
  .scene,
  .room,
  .subscene,
  .roomcard,
  .subcard,
  .roombody,
  .subbody,
  .experience,
  .experience-top,
  .experience-deck,
  .stage-card,
  .empty-stage,
  .social-post,
  .memory-library,
  .memory-grid,
  .memory-feature,
  .profile-world,
  .member-page-mount,
  .real-calendar,
  .member-directory {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ROOT SCROLL FIX:
     ordinary rooms do not own a second vertical scroll surface. */
  .scene,
  .room,
  .subscene,
  .roomcard,
  .subcard,
  .roombody,
  .subbody,
  .experience,
  .experience-deck,
  .stage-card,
  .social-post {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .room,
  .subscene {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    place-items: stretch !important;
  }

  .roomcard,
  .subcard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 0;
    border-right-width: 0;
  }

  .roombody,
  .subbody,
  .experience {
    width: 100% !important;
    padding-left: clamp(12px, 4vw, 18px);
    padding-right: clamp(12px, 4vw, 18px);
    overflow-x: clip !important;
  }

  /* Shared hero/action rows: buttons must stay inside the phone. */
  .experience-top {
    width: 100% !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .experience-top > *,
  .experience-top > div,
  .experience-top p,
  .experience-top button,
  .experience-top .primary {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .experience-top .primary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center;
  }

  /* "Explore this space": on phones it is a real three-column grid,
     not an oversized horizontal rail leaking beyond the viewport. */
  .room-organizer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .room-organizer > div {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .room-organizer button {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 10px 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .room-organizer button span {
    font-size: 1.15rem;
  }

  /* Content cards and text cannot enlarge the room. */
  .stage-card,
  .empty-stage,
  .social-post,
  .recipe-feed-card,
  .mailbox-feed-card,
  .memory-library,
  .memory-grid,
  .memory-grid article,
  .movie-night-feature,
  .profile-showcase,
  .profile-featured {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  :is(.stage-card,.social-post,.recipe-feed-card,.mailbox-feed-card,.memory-library,.movie-night-feature)
  :is(p,h1,h2,h3,h4,span,strong,small,a,button) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  img, video, iframe, canvas, svg {
    max-width: 100% !important;
  }

  .stage-card img,
  .stage-card video,
  .movie-night-feature img,
  .movie-night-feature video,
  .memory-library img,
  .social-post img,
  .social-post video {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Memory Library: controls belong in flow, never over the photograph/copy. */
  .memory-shelves {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  .memory-shelves button {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .deck-controls,
  .feed-action-row,
  .profile-actions,
  .vault-actions {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }

  .deck-controls > *,
  .feed-action-row > *,
  .profile-actions > *,
  .vault-actions > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Mobile bottom navigation must never crowd or widen the document. */
  .mobile-bottom-nav {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
  }

  .mobile-bottom-nav button {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .mobile-bottom-nav small {
    max-width: 100%;
    font-size: 8.5px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  /* Horizontal tool strips that truly need many actions scroll internally
     without taking the page with them. */
  .rf-learning-modes,
  .gift-tabs,
  .study-tabs,
  .bible-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed helpers stay inside safe edges and never affect layout width. */
  .house-steward-dock,
  #rfFounderPalette {
    max-width: calc(100vw - 12px) !important;
  }

  .steward-drawer,
  .rf-founder-panel {
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 430px) {
  .room-organizer > div {
    gap: 6px !important;
  }

  .room-organizer button {
    min-height: 74px !important;
    font-size: .92rem;
  }

  .room-organizer button span {
    font-size: 1.05rem;
  }
}