/* ═══════════════════════════════════════════════════════════
   Mobile / phone (portrait)
   Collapses the fixed 16:9 grids into one scrollable column.
   Relies on your existing DOM order, so things stack sensibly.
   Load this LAST (the name sorts after your other css under
   require_tree, or just paste it at the bottom of base.css).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── unlock the two big cards ───────────────────────────── */
  .show,
  .adventurer-show {
    grid-template-columns: 1fr;
    grid-template-rows: none;   /* drop explicit rows, let flow stack */
    grid-auto-rows: auto;
    height: auto;               /* was calc(90vh - 18px) */
    width: 100%;                /* was 96vw */
    margin: 0;
  }

  /* ─── base show / form (quest · skill · post) ────────────── */
  .base-show-toolbar,
  .form-toolbar {
    grid-column: 1;
    grid-row: auto;
    border-left: none;
  }
  .base-left {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;          /* was hidden */
  }
  .base-right {
    grid-column: 1;
    grid-row: auto;
    overflow: visible;          /* was overflow-y: auto */
  }
  .shared-bellow {
    grid-column: 1;
    grid-row: auto;
  }

  /* ─── adventurer show / form ─────────────────────────────── */
  .show-toolbar {
    grid-column: 1;
    grid-row: auto;
    border-left: none;
  }
  .adventurer-left,
  .adventurer-form-left {
    grid-column: 1;
    grid-row: auto;             /* was 1 / 3 (column span) */
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .adventurer-middle,
  .adventurer-form-middle {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
    overflow: visible;
  }
  .adventurer-right,
  .adventurer-form-right {
    grid-column: 1;
    grid-row: auto;
    overflow: visible;
  }

  /* the inner scroll-boxes don't need their own scrollbar now  */
  .adventurer-stats,
  .adventurer-special-links,
  .adventurer-form-stats,
  .adventurer-form-special-links {
    overflow-y: visible;
    max-height: none;
  }

  /* rank was pinned bottom-right of a tall panel — put it in flow
     so it can't overlap the role / class meta when stacked       */
  .adventurer-rank-row,
  .adventurer-form-rank-row {
    position: static;
    justify-content: flex-start;
    margin-top: 0.5rem;
  }

  /* ─── nav: links wrap, user drops below instead of overlapping ─ */
  .nav {
    height: auto;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    row-gap: 0.4rem;
  }
  .nav-bar {
    flex: 1 1 100%;             /* full width → wraps onto its own line */
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }
  .nav-user {
    position: static;          /* was absolute right:0 (overlapped links) */
    margin: 0 auto;
    height: 40px;
    border-right: 1px solid var(--green-dim);
  }

  /* ─── index toolbars (search + filters) ──────────────────── */
  .toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .search-bar.filter-open { width: 100%; }

  /* ─── form toolbar (password / email / confirm / delete) ──── */
  .form-toolbar {
    flex-wrap: wrap;
    overflow: visible;         /* was hidden — fields were getting clipped */
    gap: 0.4rem 0.6rem;
  }
  .form-toolbar-input {
    width: auto;               /* was fixed 10rem */
    flex: 1 1 45%;
  }

  /* ─── intro / landing ────────────────────────────────────── */
  .intro-logo    { height: 80vh; }     /* hint there's content below */
  .intro-content { height: auto; }     /* was 94.5vh */
  .intro-desc {
    margin: 0 1rem;
    max-width: none;
    text-align: left;          /* right-align reads oddly on narrow screens */
  }
  .nav-grid     { margin: 0 1rem; }
  .recent-posts { margin: 0 1rem 1rem; }

  /* ─── quest participants: 3-up is unreadable on a phone ───── */
  .participants-grid {
    grid-template-columns: 1fr;
    height: auto;
    max-height: 16rem;
  }

  /* ─── index cards: 2-up instead of one giant column ──────── */
  .index-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
  }
}