/* Phone layout — loaded last so the desktop composition stays untouched. */
@media (max-width: 700px) {
  :root { --mobile-nav-height: 74px; }

  html, body { width: 100%; overflow-x: hidden; }
  body { padding-bottom: var(--mobile-nav-height); }
  * { min-width: 0; }

  .app-shell { display: block !important; min-height: 100dvh; }
  .stage { width: 100%; min-width: 0; }

  /* Bottom navigation keeps the content at full phone width. */
  .rail {
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 60;
    width: 100% !important;
    height: var(--mobile-nav-height) !important;
    padding: 6px 7px env(safe-area-inset-bottom) !important;
    border: 0 !important;
    border-top: 1px solid #405172 !important;
    background: #0f0b27f7 !important;
    box-shadow: 0 -12px 32px #06051499 !important;
    backdrop-filter: blur(14px);
  }
  .mark { display: none !important; }
  .rail-nav {
    display: flex !important;
    align-items: stretch;
    gap: 4px !important;
    height: 100%;
    margin: 0 !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 0 0 61px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px !important;
    padding: 4px 2px !important;
    border: 1px solid transparent !important;
    font-size: 7px !important;
    line-height: 1;
    letter-spacing: .12em;
    scroll-snap-align: start;
  }
  .nav-item i {
    display: grid !important;
    width: 24px;
    height: 24px !important;
    margin: 0 !important;
    place-items: center;
    font-size: 20px !important;
    font-style: normal;
    line-height: 1;
  }
  .nav-item[data-view="voting"] i {
    border: 1.5px solid currentColor;
    border-radius: 2px;
    font-size: 0 !important;
  }
  .nav-item[data-view="voting"] i::before {
    content: "✓";
    font: 700 16px/1 'Space Mono', monospace;
  }
  .nav-item.active { border-color: var(--lime) !important; }

  /* Compact mobile masthead. */
  .topbar {
    min-height: 0 !important;
    padding: 17px 15px 14px !important;
    gap: 14px !important;
    background: linear-gradient(135deg, #120d2d, #111735) !important;
  }
  .topbar > div:first-child { display: block !important; }
  .topbar h1 {
    font-size: clamp(23px, 7.2vw, 29px) !important;
    line-height: .95 !important;
    white-space: normal !important;
  }
  .topbar p {
    margin-top: 9px !important;
    font-size: 8px !important;
    line-height: 1.5;
    letter-spacing: .22em !important;
    white-space: normal !important;
  }
  .channel {
    display: grid !important;
    grid-template-columns: 7px 38px minmax(0, 1fr) 38px;
    align-items: center;
    width: 100% !important;
    gap: 8px !important;
  }
  .channel::before { width: 7px; height: 7px; }
  .channel .square { width: 38px !important; height: 38px !important; }
  .channel span { text-align: center; font-size: 10px; }
  .channel em { display: none !important; }

  .app {
    width: 100%;
    min-height: calc(100dvh - 160px);
    padding: 16px 12px 24px !important;
    overflow: hidden;
  }
  footer { display: none !important; }
  .panel { max-width: 100%; }
  .button, .mini-button, button, a { touch-action: manipulation; }
  .button { min-height: 46px; }
  input, select, textarea { font-size: 16px !important; }
  .toast { left: 12px; right: 12px; bottom: calc(var(--mobile-nav-height) + 12px); z-index: 110; max-width: none; }

  .section-title { margin-bottom: 14px; }
  .section-title h2 { margin: 5px 0 7px !important; font-size: 36px !important; line-height: .95; }
  .section-title .eyebrow { font-size: 9px; }
  .page-copy { max-width: none; font-size: 12px !important; line-height: 1.6; }

  /* Home: art first, copy second, never text over a poster. */
  .home-view, .home-grid, .home-main-column, .home-view .side { display: block !important; width: 100%; height: auto !important; }
  .home-grid { min-height: 0 !important; }
  .home-main-column > * + *, .home-view .side > * + * { margin-top: 13px; }
  .home-view .feature,
  .home-view .has-home-art {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden;
    background: #172142 !important;
  }
  .feature::after { display: none !important; }
  .feature .home-feature-art {
    position: relative !important;
    inset: auto !important;
    order: 0;
    width: 100% !important;
    height: 245px !important;
    min-height: 245px !important;
    object-fit: cover !important;
    object-position: center 24% !important;
    opacity: .9 !important;
    filter: saturate(.82) contrast(1.04) !important;
    border: 0 !important;
    border-bottom: 1px solid #405372 !important;
    mask-image: none !important;
  }
  .has-home-art .home-feature-copy,
  .home-feature-copy {
    position: relative !important;
    order: 1;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 20px 18px 18px !important;
    background: linear-gradient(145deg, #19264a, #18203e) !important;
    animation: none !important;
  }
  .home-feature-upper, .home-feature-heading, .home-feature-controls { display: block !important; }
  .home-feature-heading .eyebrow { font-size: 8px; line-height: 1.5; }
  .home-feature-heading .eyebrow { color: var(--lime) !important; }
  .home-view .feature h2 { margin: 8px 0 7px !important; color: #e2e2eb !important; font-size: 38px !important; line-height: .92 !important; }
  .home-feature-heading .meta { color: #aeb4c8 !important; font-size: 11px !important; line-height: 1.5; }
  .home-feature-summary,
  .home-view .feature p {
    display: -webkit-box !important;
    margin: 13px 0 16px !important;
    overflow: hidden;
    color: #b7bbcc !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  .home-view .feature-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-view .feature-actions .button { width: 100%; padding: 10px 7px; font-size: 9px; }
  .home-view .pager { margin-top: 15px; padding-top: 12px; gap: 8px; }
  .home-view .pager span { color: #9da5ba !important; font-size: 9px; }
  .home-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .home-route-card { min-height: 94px !important; padding: 13px 10px !important; }
  .home-route-card i { font-size: 19px; }
  .home-route-card b { font-size: 15px !important; }
  .home-route-card small { font-size: 7px !important; }
  .home-route-card > strong { font-size: 23px !important; }

  .home-view .home-side-date {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .home-side-date .home-date-poster { width: 72px !important; height: 104px !important; }
  .home-side-date .home-date-movie { min-height: 104px; padding: 15px 13px !important; }
  .home-side-date .home-date-movie strong { font-size: 21px !important; white-space: normal !important; }
  .home-side-date .home-date-movie em { font-size: 8px !important; }
  .home-side-date .home-date-day { grid-column: 1 / 3 !important; min-height: 76px; padding: 12px 14px !important; }
  .home-side-date .home-date-day strong { font-size: 25px !important; }
  .home-side-date .home-date-arrow { display: none !important; }
  .home-feature-vitals { min-height: 0 !important; padding: 18px !important; }
  .home-feature-vitals .ledger-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px 8px; }
  .home-feature-vitals .ledger-grid strong { font-size: 27px !important; }

  .home-event-control { min-height: 0 !important; }
  .home-event-control > header { min-height: 48px; padding: 12px 14px !important; }
  .home-event-control .home-event-slide { display: block !important; min-height: 0 !important; }
  .home-event-image { width: 100% !important; height: 230px !important; }
  .home-event-caption { position: relative !important; inset: auto !important; width: 100% !important; min-height: 135px; padding: 17px !important; background: #15142f !important; }
  .home-event-caption > strong { font-size: 26px !important; }
  .home-event-caption > p { font-size: 11px !important; line-height: 1.55 !important; }
  .home-event-control > footer { position: relative !important; min-height: 54px !important; padding: 9px 12px !important; }
  .home-event-control > footer button { position: static !important; width: auto !important; min-height: 36px !important; padding: 8px 10px !important; font-size: 8px !important; }

  /* Movies: one readable card per row. */
  .link-only-form { grid-template-columns: 1fr !important; padding: 15px !important; gap: 10px !important; }
  .link-only-form .button { width: 100%; }
  .link-policy { font-size: 10px; line-height: 1.55; }
  .library-tools { margin: 13px 0 !important; padding: 12px !important; }
  .library-tools .movie-search { display: block !important; }
  .library-tools .movie-search input { width: 100%; }
  .library-tools .movie-search span { display: block; margin-top: 8px; text-align: right; }
  .movie-filters { display: flex !important; gap: 7px !important; overflow-x: auto; scrollbar-width: none; }
  .movie-filters::-webkit-scrollbar { display: none; }
  .library-tools .movie-filters button { flex: 0 0 auto; min-height: 40px; padding: 9px 13px !important; }
  .movie-banners { grid-template-columns: 1fr !important; gap: 15px !important; }
  .movie-banner {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .movie-banner > .banner-art {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: #111735 !important;
  }
  .movie-banner .movie-poster {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }
  .movie-banner > .movie-card-body { padding: 19px 16px !important; }
  .movie-banner .catalog-index { font-size: 42px !important; }
  .movie-banner .eyebrow { font-size: 9px !important; }
  .movie-banner .movie-card-body h3 { margin-top: 19px !important; font-size: 32px !important; }
  .movie-banner .movie-card-body > p { font-size: 11px !important; line-height: 1.6 !important; }
  .watch-panel .watch-status { min-height: 46px; font-size: 10px !important; }
  .movie-banner .review-button { min-height: 50px; font-size: 9px !important; }
  .movie-banner .route-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .movie-banner .route-boxes span { min-height: 46px !important; font-size: 9px !important; }
  .movie-banner .movie-links { grid-template-columns: 1fr 1fr !important; }
  .movie-banner .movie-links [data-refresh-movie] { display: none !important; }
  .movie-banner .movie-links a,
  .movie-banner .movie-links button { min-width: 0 !important; min-height: 44px !important; width: 100% !important; }

  /* Ballot and wheel. */
  .ballot-row {
    grid-template-columns: 62px minmax(0, 1fr) 48px !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .ballot-row .num { display: none; }
  .ballot-poster { width: 62px !important; height: 88px !important; }
  .ballot-movie-copy > strong { font-size: 22px !important; line-height: 1; }
  .ballot-movie-copy > small { font-size: 8px !important; line-height: 1.45; }
  .ballot-row .votes { font-size: 24px !important; }
  .ballot-actions { grid-column: 1 / 4 !important; grid-template-columns: 1fr 1fr !important; }
  .ballot-actions .mini-button { display: block !important; min-height: 42px; }
  .ballot-actions .mini-button:only-child { grid-column: 1 / -1; }
  .standalone-wheel { display: block !important; }
  .wheel-stage { min-height: 390px !important; padding: 25px 16px; }
  .wheel-copy { min-height: 0 !important; margin-top: 13px; padding: 24px 18px !important; }
  .wheel-pool { width: 100%; }

  /* Leaderboard and tier board. */
  .top-movie-row { grid-template-columns: 46px 78px minmax(0, 1fr) !important; min-height: 126px; }
  .top-rank { font-size: 25px !important; }
  .top-movie-poster { width: 78px !important; height: 126px !important; }
  .top-movie-copy { padding: 13px 11px !important; }
  .top-movie-copy h3 { font-size: 24px !important; }
  .top-movie-copy p { display: none !important; }
  .top-movie-copy .mini-button { min-width: 0; width: 100%; font-size: 8px; }
  .top-movie-score { grid-column: 1 / 4 !important; min-height: 66px; padding: 12px !important; }
  .top-movie-score strong { font-size: 42px !important; }
  .tier-workspace { display: block !important; }
  .tier-movie-column { display: block !important; }
  .tier-picker { max-height: none !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px !important; padding: 8px !important; overflow: visible !important; }
  .tier-picker button { display: grid !important; grid-template-columns: 50px minmax(0, 1fr) !important; min-height: 72px !important; padding: 6px !important; }
  .tier-picker img { width: 50px !important; height: 68px !important; }
  .tier-picker span { font-size: 14px !important; }
  .tier-picker small { font-size: 7px !important; }
  .clear-tier { width: 100%; min-height: 42px; margin: 8px 0 13px; }
  .tier-board { min-height: 0 !important; }
  .interactive-tier { grid-template-columns: 48px minmax(0, 1fr) !important; min-height: 86px !important; }
  .interactive-tier > b { font-size: 25px !important; }
  .tier-movie-art { width: 50px !important; height: 70px !important; }

  /* Events, recap, profiles and reviews. */
  .event-form { grid-template-columns: 1fr !important; padding: 15px !important; }
  .event-form .event-words, .event-form .event-picture, .event-form .button { grid-column: auto !important; }
  .event-form .button { width: 100%; }
  .event-grid { grid-template-columns: 1fr !important; }
  .event-card > img, .event-art-fallback { height: 240px !important; object-fit: contain !important; background: #111735; }
  .event-card-copy { padding: 18px !important; }
  .event-card-copy h3 { font-size: 30px !important; }
  .live-recap, .recap-bottom { grid-template-columns: 1fr !important; }
  .live-recap .recap-lead, .recap-notes, .recap-ranking, .recap-schedule { padding: 18px !important; }
  .live-recap .recap-lead h3 { font-size: 36px !important; }
  .profile-grid { grid-template-columns: 1fr !important; }
  .identity { flex-direction: row !important; align-items: center !important; padding: 18px !important; }
  .identity .profile-mark { flex: 0 0 66px !important; width: 66px; height: 66px; }
  .identity h3 { font-size: 28px !important; }
  .profile-stats { grid-template-columns: repeat(2, 1fr) !important; padding: 18px !important; gap: 15px; }
  .profile-stats strong { font-size: 31px !important; }
  .settings { padding: 18px !important; }
  .review-modal { z-index: 100 !important; padding: 8px !important; }
  .review-card { width: 100%; max-height: calc(100dvh - 16px); padding: 22px 15px !important; }
  .review-card > header { align-items: flex-start; gap: 12px; }
  .review-card > header img { width: 62px; height: 88px; }
  .review-card > header h2 { font-size: 27px !important; }
  .review-heading { gap: 9px !important; }
  .review-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }

  /* Weekly calendar without desktop-width horizontal scrolling. */
  .dates-view .screening-form { grid-template-columns: 1fr !important; padding: 15px !important; }
  .dates-view .screening-form > * { grid-column: auto !important; }
  .dates-view .calendar-layout { grid-template-columns: 1fr !important; }
  .dates-view .calendar-panel { overflow: hidden !important; }
  .dates-view .calendar-header,
  .dates-view .weekday-row,
  .dates-view .calendar-grid { min-width: 0 !important; width: 100%; }
  .dates-view .calendar-header { grid-template-columns: 38px minmax(0, 1fr) auto 38px; padding: 11px 9px !important; gap: 7px; }
  .dates-view .calendar-header .square { width: 38px; height: 38px; }
  .dates-view .calendar-header h3 { font-size: 21px !important; }
  .dates-view .weekday-row span { padding: 8px 1px !important; font-size: 7px !important; overflow: hidden; }
  .dates-view .calendar-day { height: 62px !important; padding: 5px !important; }
  .dates-view .calendar-day > span { margin-bottom: 4px; font-size: 9px !important; }
  .dates-view .calendar-day i { width: 7px; height: 7px; margin: 2px 0; padding: 0; border: 0; border-radius: 50%; background: var(--pink); font-size: 0; }
  .dates-view .upcoming { min-height: 0 !important; padding: 15px !important; }
  .dates-view .upcoming-list > article { grid-template-columns: 62px minmax(0, 1fr) !important; padding: 12px 0 !important; }
  .dates-view .upcoming-list > article > img,
  .dates-view .upcoming-poster-empty { width: 62px !important; height: 88px !important; }
  .dates-view .upcoming-list .mini-button { grid-column: 1 / 3; width: 100%; min-height: 40px; }

  /* Login and image preview respect dynamic phone height. */
  .auth-gate { z-index: 100 !important; align-items: start; padding: 10px !important; overflow-y: auto; }
  .auth-card { width: 100% !important; max-height: none !important; margin: auto 0; }
  .auth-brand { min-height: 96px !important; padding: 20px !important; }
  .auth-brand span { font-size: 28px !important; line-height: 24px !important; }
  .auth-card > section { padding: 23px 18px !important; }
  .auth-card h2 { font-size: 32px !important; line-height: 1; }
  .auth-card > section > p { font-size: 12px; }
  .auth-form { gap: 13px; }
  .auth-form input { min-height: 50px; }
  .event-preview-modal { z-index: 100 !important; padding: 10px !important; }
  .event-preview-modal > img { max-width: 100% !important; max-height: 76dvh !important; }
}

@media (max-width: 380px) {
  .app { padding-inline: 10px !important; }
  .nav-item { flex-basis: 58px; }
  .home-view .feature h2 { font-size: 34px !important; }
  .home-view .feature-actions { grid-template-columns: 1fr; }
  .tier-picker { grid-template-columns: 1fr; }
  .movie-banner .movie-links { grid-template-columns: 1fr !important; }
}