/* MOBILE — phones + portrait iPad (< 1024px).
   This file is loaded AFTER every other stylesheet so its overrides win.
   Desktop layout is at >= 1024px (landscape iPad and up).
   Touch this file for any mobile-specific change; do not touch the
   desktop CSS files. The whole file lives inside one media query so a
   single class swap can lift the entire mobile mode. */
@media (max-width: 1023px) {

  /* ----- TOKENS specific to mobile chrome ----- */
  :root {
    --m-nav-h: 64px;          /* bottom nav bar height */
    --m-drawer-w: 320px;      /* slide-out drawer width */
    --m-tap: 48px;            /* minimum touch target */
  }

  /* ----- HIDE desktop-only chrome on mobile ----- */
  .friends-rail { display: none !important; }
  .mini-board   { display: none !important; }
  .userchip     { display: none !important; }
  .back-link    { display: none !important; }
  .chat-widget  { display: none !important; }   /* chat moves into drawer */

  /* On mobile, BODY is the scroll container, not main. Main flows
     naturally with content; the fixed app-bar and bottom-nav float
     above. This way the entire page is scrollable, not just main's
     internal viewport (which was the cause of "can only scroll a tiny
     bit" reports — main's height capped at 100dvh meant content past
     viewport was unreachable). */
  html, body {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden;
  }
  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  main {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh - 56px - var(--m-nav-h));
    overflow: visible !important;
    padding-right: 0 !important;
    padding-bottom: 0.6rem;
  }
  body.has-m-appbar main { padding-top: 0.6rem; }
  body.in-game main { padding-bottom: 0 !important; padding-top: 0 !important; }

  /* Every page-level container has its own desktop padding-right that
     reserves the friends-rail strip — kill that on mobile so content
     centers properly. Without this, panels look pushed-right. */
  .menu-page,
  .lobby-list-page,
  .lobby-page,
  .options-page,
  .about-page,
  .sb-page,
  .admin-page,
  .auth-page {
    padding-right: clamp(0.9rem, 4vw, 1.4rem) !important;
    padding-left: clamp(0.9rem, 4vw, 1.4rem) !important;
  }

  /* Bar-clearing padding for every flow-content page. Set directly on
     the page class (not body or main) so a page's own `padding: ...`
     shorthand can't silently shrink the bottom value below the nav
     height. The app-bar variant is keyed on body.has-m-appbar so the
     /auth page (no app-bar) isn't pushed. Excludes .lobby-page during
     a live round (body.in-game) — that uses the full screen. */
  body:not(.in-game) .menu-page,
  body:not(.in-game) .lobby-list-page,
  body:not(.in-game) .lobby-page,
  body:not(.in-game) .options-page,
  body:not(.in-game) .about-page,
  body:not(.in-game) .sb-page,
  body:not(.in-game) .admin-page {
    padding-bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
  body.has-m-appbar:not(.in-game) .menu-page,
  body.has-m-appbar:not(.in-game) .lobby-list-page,
  body.has-m-appbar:not(.in-game) .lobby-page,
  body.has-m-appbar:not(.in-game) .options-page,
  body.has-m-appbar:not(.in-game) .about-page,
  body.has-m-appbar:not(.in-game) .sb-page,
  body.has-m-appbar:not(.in-game) .admin-page {
    padding-top: calc(56px + env(safe-area-inset-top, 0px) + 0.8rem) !important;
  }

  /* ----- BIGGER TOUCH TARGETS everywhere ----- */
  button, .btn, a.btn, input[type="button"], input[type="submit"], .auth-tab, .menu-cta {
    min-height: var(--m-tap);
  }
  /* …except the round/square fixed-size icon buttons in the app bar.
     Those have explicit width+height and the min-height rule above
     would stretch them vertically into ovals. */
  .m-appbar-avatar, .m-appbar-back {
    min-height: 0 !important;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
    min-height: var(--m-tap);
    font-size: 16px;            /* prevents iOS Safari zoom-on-focus */
  }

  /* prevent the OS double-tap-to-zoom that makes mobile games feel laggy */
  body { touch-action: manipulation; }

  /* ----- TOP APP-BAR (replaces back-link / userchip / mini-board on every page) ----- */
  .m-appbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 88;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0 0.9rem;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--surface-pop);
    border-bottom: 1.5px solid var(--line);
    box-shadow: var(--lift-1);
  }
  .m-appbar-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-tile);
    background: var(--surface-1);
    border: 1.5px solid var(--line);
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
    user-select: none;
  }
  .m-appbar-title {
    flex: 1;
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-appbar-avatar {
    box-sizing: border-box;
    position: relative;
    width: 40px; height: 40px;
    aspect-ratio: 1 / 1;          /* defeats button line-height growing the box vertically */
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--pop-pink);
    background: var(--surface-1);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  /* Inner avatar fills the button completely. Whether it's a real
     avatar (background-image) or the placeholder (display:grid +
     placeItems:center text), this sizing keeps the letter centered and
     the circle perfect. */
  .m-appbar-avatar .avatar {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1;
  }
  .m-appbar-avatar-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    background: var(--pop-coral);
    color: oklch(99% 0.01 80);
    border: 2px solid var(--surface-pop);
    border-radius: 999px;
    font-size: 0.65rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  /* Signed-out trailing pill that replaces the avatar in the app-bar. */
  .m-appbar-signin {
    display: inline-flex; align-items: center;
    padding: 0.5em 1em;
    background: var(--pop-pink);
    color: oklch(99% 0.01 80);
    border: 1.5px solid var(--pop-pink);
    border-radius: var(--r-chip);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--lift-1);
  }

  /* Hide app-bar during live game rounds — landscape gameplay needs every pixel */
  body.in-game .m-appbar { display: none; }

  /* ----- BOTTOM NAV ----- */
  .m-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--m-nav-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 89;
    background: var(--surface-pop);
    border-top: 1.5px solid var(--line);
    box-shadow: 0 -4px 18px oklch(20% 0.04 295 / .12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .m-bottomnav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem;
    padding: 0.45rem 0.3rem 0.2rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: color 160ms var(--tx, ease), transform 220ms cubic-bezier(.2,1.5,.35,1);
  }
  .m-bottomnav-item:active { transform: scale(0.94); }
  .m-bottomnav-item.active { color: var(--pop-pink); }
  .m-bottomnav-item .m-bottomnav-icon {
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 240ms cubic-bezier(.2,1.5,.35,1);
  }
  .m-bottomnav-item.active .m-bottomnav-icon { transform: translateY(-2px) scale(1.08); }

  /* Hide bottom nav during live game */
  body.in-game .m-bottomnav { display: none; }

  /* ----- SLIDE-OUT DRAWER (Friends + Chat tabs) ----- */
  .m-drawer-scrim {
    position: fixed; inset: 0;
    background: oklch(15% 0.04 295 / 0.55);
    backdrop-filter: blur(2px);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(.16,1,.3,1);
  }
  .m-drawer-scrim.open { opacity: 1; pointer-events: auto; }

  .m-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(var(--m-drawer-w), 88vw);
    z-index: 96;
    background: var(--surface-1);
    border-left: 1.5px solid var(--line);
    box-shadow: -12px 0 32px oklch(20% 0.04 295 / .25);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.2,1,.3,1);
    display: flex; flex-direction: column;
  }
  .m-drawer.open { transform: translateX(0); }

  .m-drawer-head {
    display: grid; grid-template-columns: 1fr 1fr;
    border-bottom: 1.5px solid var(--line);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .m-drawer-tab {
    padding: 0.95rem 0.6rem 0.85rem;
    background: transparent;
    border: 0;
    font-weight: 800;
    color: var(--ink-soft);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .m-drawer-tab.active {
    color: var(--pop-pink);
    border-bottom-color: var(--pop-pink);
  }
  .m-drawer-tab .m-drawer-tab-badge {
    margin-left: 0.4em;
    padding: 0.05em 0.45em;
    background: var(--pop-coral);
    color: oklch(99% 0.01 80);
    border-radius: 999px;
    font-size: 0.7em;
  }
  .m-drawer-pane { flex: 1; min-height: 0; overflow: hidden; }
  .m-drawer-pane.hidden { display: none; }

  /* Friends pane is a flex column so the search input stays pinned to
     the top while the list below it scrolls. Both elements are
     relocated from .friends-rail at mount time by mobile.js. */
  .m-drawer-pane:not(.chat-pane):not(.hidden) {
    display: flex !important; flex-direction: column;
    height: 100%;
  }
  /* Hidden tabs collapse fully — keep this !important to defeat the
     display: flex above. */
  .m-drawer-pane.hidden { display: none !important; }
  .m-drawer-pane > input[type="text"] {
    flex-shrink: 0;
    width: calc(100% - 1.4rem);
    margin: 0.7rem 0.7rem 0.4rem;
    padding: 0.7em 0.95em;
    font-size: 16px;            /* iOS no-zoom */
    border-radius: var(--r-tile);
    border: 1.5px solid var(--line);
    background: var(--surface-pop);
    color: var(--ink);
  }
  .m-drawer-pane .list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem; }
  .m-drawer-pane .friend-item {
    padding: 0.7rem 0.6rem;
    min-height: var(--m-tap);
  }
  .m-drawer-pane .friend-item .name { font-size: 0.95rem; }
  .m-drawer-pane .friend-actions .btn { padding: 0.5em 0.85em; font-size: 0.8rem; }

  /* Chat pane structure — full-height column inside drawer */
  .m-drawer-pane.chat-pane { display: flex; flex-direction: column; height: 100%; }
  .m-drawer-pane.chat-pane.hidden { display: none; }
  .m-drawer-pane.chat-pane .chat-messages {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 0.7rem 0.7rem 0.4rem;
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  .m-drawer-pane.chat-pane .chat-input {
    flex-shrink: 0;
    padding: 0.7rem;
    border-top: 1.5px solid var(--line);
    display: flex; gap: 0.5rem;
    background: var(--surface-pop);
  }
  .m-drawer-pane.chat-pane .chat-input input {
    flex: 1; padding: 0.7em 1em; font-size: 16px;
  }

  /* ----- ROTATE-TO-LANDSCAPE OVERLAY (only fires during live round) ----- */
  .m-rotate-overlay {
    position: fixed; inset: 0;
    z-index: 99998;
    background: oklch(14% 0.025 295 / 0.96);
    backdrop-filter: blur(8px);
    color: var(--ink, #fff);
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.4rem;
    padding: 2rem;
    text-align: center;
  }
  body.m-needs-rotate .m-rotate-overlay { display: flex; }
  .m-rotate-icon {
    font-size: 4rem;
    animation: mRotateNudge 2.4s ease-in-out infinite;
    color: var(--pop-yellow);
  }
  .m-rotate-title { font-size: 1.4rem; font-weight: 800; color: oklch(96% 0.01 80); }
  .m-rotate-body  { font-size: 0.95rem; color: oklch(80% 0.02 280); max-width: 360px; line-height: 1.4; }
  @keyframes mRotateNudge {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(90deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .m-rotate-icon { animation: none; transform: rotate(45deg); }
  }

  /* ----- GLOBAL — full-bleed mobile pages ----- */
  main {
    padding-left: clamp(0.9rem, 4vw, 1.4rem);
    padding-right: clamp(0.9rem, 4vw, 1.4rem);
  }
  .panel, .options-section { padding: 1rem 1.1rem; }

  /* Make all dialogs/modals respect safe area + take full width on phones */
  .friend-profile-card,
  .me-profile-card,
  .requests-card {
    width: min(440px, 96vw);
    max-height: min(86vh, 720px);
  }

  /* Toggle buttons need bigger thumbs */
  .toggle { width: 56px; height: 32px; }
  .toggle::after { width: 28px; height: 28px; }
  .toggle.on::after { transform: translateX(24px); }

  /* ----- HOME ----- */
  .menu-page {
    /* min-height: 100vh + grid:center pulls content up under the
       fixed app-bar; flip to start-aligned + auto so content stacks
       naturally and main can scroll past the about block. */
    min-height: 0 !important;
    align-items: start !important;
    padding: 1.6rem 1rem 1rem !important;
    gap: 1.2rem !important;
  }
  .menu-hero { margin-top: 0.4rem; }
  .menu-title { font-size: clamp(2.6rem, 12vw, 4.4rem) !important; }
  /* The bottom nav covers Play / Leaderboard / Profile — keep the home
     page's action stack hidden on mobile so we don't double up. The
     inline About section below remains visible on every device. */
  .menu-actions { display: none !important; }
  .menu-signin-nudge { width: 100%; max-width: none !important; }

  .menu-about-inline {
    display: block;
    padding: 1.1rem 1.2rem 1.4rem;
    background: var(--surface-1);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sticker);
    box-shadow: var(--lift-1);
    color: var(--ink);
    line-height: 1.5;
  }
  .menu-about-inline .lead {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
  }
  .menu-about-inline section { margin-top: 1rem; }
  .menu-about-inline h3 {
    font-size: 0.95rem;
    color: var(--pop-grape);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.4rem;
  }
  .menu-about-inline ol {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--ink);
    font-size: 0.92rem;
  }
  .menu-about-inline ol li { margin-bottom: 0.45rem; }
  .menu-about-inline p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink);
  }
  .menu-about-inline kbd {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.78rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.05em 0.35em;
  }

  /* ----- LOBBIES BROWSER ----- */
  .lobby-list-page { padding: 0.6rem 0 !important; }
  .lobby-list-grid { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
  .lobby-card { padding: 1rem !important; }
  .lobby-card .lc-actions .btn { min-height: var(--m-tap); flex: 1; }

  /* Code entry input — make it the centerpiece of the page on mobile */
  .lobby-join-row { flex-direction: column !important; gap: 0.6rem !important; align-items: stretch !important; }
  .lobby-join-row input { font-size: 1.4rem !important; letter-spacing: 0.3em !important; text-align: center; padding: 0.9em 0.8em !important; }
  .lobby-join-row .btn { width: 100%; }

  /* ----- LOBBY (waiting room) ----- */
  .lobby-page { padding: 0.4rem 0 !important; gap: 1rem !important; }
  .lobby-header { flex-direction: column; align-items: stretch !important; gap: 0.8rem !important; }
  .lobby-header-left, .lobby-header-right { width: 100%; }
  .lobby-header-right { justify-content: space-between; }
  .players-grid { grid-template-columns: 1fr !important; gap: 0.55rem !important; }
  .player-card { padding: 0.7rem !important; }
  .invite-code-box { padding: 1.3rem 1rem !important; }
  .invite-code-value { font-size: clamp(2rem, 8vw, 3rem) !important; letter-spacing: 0.25em !important; }
  .lobby-controls { flex-direction: column !important; gap: 0.7rem !important; align-items: stretch !important; }
  .start-btn { width: 100%; min-height: 56px; font-size: 1.05rem !important; }

  /* ----- LEADERBOARD ----- */
  .sb-page { padding: 0.4rem 0 !important; }
  .sb-search-bar input { font-size: 16px !important; min-height: var(--m-tap); }

  /* Podium stacks vertically: gold first (most important), silver, bronze */
  .sb-top-podium {
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    width: 100% !important;
  }
  .sb-podium-1 { order: 1 !important; padding: 1.4rem 1rem !important; }
  .sb-podium-2 { order: 2 !important; padding: 1.1rem 1rem !important; }
  .sb-podium-3 { order: 3 !important; padding: 1rem 1rem !important; }
  .sb-podium-1 .avatar { width: 72px !important; height: 72px !important; }
  .sb-podium-2 .avatar { width: 60px !important; height: 60px !important; }
  .sb-podium-3 .avatar { width: 48px !important; height: 48px !important; }

  .sb-row {
    grid-template-columns: 44px 28px 32px 1fr auto !important;
    padding: 0.6rem 0.7rem !important;
    gap: 0.5rem !important;
  }
  .sb-row .sb-name { font-size: 0.9rem; }
  .sb-row .sb-points { font-size: 0.85rem; }
  .sb-row .lvl-badge { display: none; }   /* save space; level shown in profile modal */

  /* ----- OPTIONS ----- */
  .options-page { padding: 0.4rem 0 1rem !important; }
  /* Tabs stretch to fill the panel width — no leftover empty strip.
     menu.css's smaller-screen breakpoint switches this to flex with
     horizontal scroll; we explicitly switch back to grid so all five
     tabs share the bar width evenly. */
  .options-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    gap: 2px !important;
    overflow: visible !important;
  }
  .options-tabs .auth-tab {
    flex: initial !important;        /* defeats menu.css `flex: 0 0 auto` */
    width: 100% !important;
  }
  .auth-tab {
    font-size: 0.72rem !important;
    padding: 0.7em 0.2em !important;
    min-height: var(--m-tap);
    min-width: 0 !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .options-grid { grid-template-columns: 1fr !important; gap: 0.5rem 0 !important; }
  .options-section { padding: 1rem 1.05rem !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ----- ABOUT ----- */
  .about-page { padding: 1rem 0 !important; }

  /* ----- AUTH (sign-in) ----- */
  .auth-page { padding: 1rem !important; min-height: 100dvh; }
  .auth-card { padding: 1.6rem 1.4rem !important; }
  .auth-cta-stack .btn { min-height: 56px; font-size: 1.05rem; }

  /* ----- ADMIN ----- */
  .admin-page { padding: 0.4rem 0 1rem !important; }
  .admin-tabs {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { white-space: nowrap; flex-shrink: 0; min-height: var(--m-tap); }
  .admin-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .admin-history-row { grid-template-columns: auto 1fr !important; }
  .admin-history-row .admin-history-time { grid-column: 1 / -1; }
  .admin-history-row .admin-history-resolution { padding-left: 0; }

  /* ----- IN-GAME (live round) -----
     Square stage so the canvas (an internal 720×720) doesn't get
     stretched into a rectangle — that distorts every note's apparent
     position and makes hit feel off. We use the smaller of the two
     viewport dimensions so the stage always fits on-screen, then center
     it via the existing flex layout in .game-page. */
  body.in-game .game-stage {
    width: min(100vw, 100dvh) !important;
    height: min(100vw, 100dvh) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  body.in-game main { padding: 0 !important; }
  /* Lock both axes during gameplay — body became the scroll container
     above, so during a live round we have to pin it. */
  body.in-game { overflow: hidden !important; height: 100dvh !important; }

  /* HUD overlays during live — bigger on phones, prevent finger-cover */
  body.in-game .game-hud-top { padding: 0.5rem 0.7rem !important; }
  body.in-game .player-board { gap: 0.4rem; padding: 0.4rem !important; }
  body.in-game .pb-row { padding: 0.35rem 0.5rem !important; font-size: 0.8rem; }
}

/* ----- TABLET landscape (>= 1024px) gets desktop layout, untouched ----- */