/* ============================================================
   TAVERNWRIGHT — mobile / small-screen overrides
   Loaded AFTER styles.css. EVERYTHING here lives inside a
   media query, so widths above the breakpoint (desktop) are
   never touched. Safe to disable by removing the <link>.
   ============================================================ */

@media (max-width: 720px) {

  /* ---- Top bar: compact; reWright collapses to its icon ---- */
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .brand span { display: none; }         /* hide the tiny "TAVERNWRIGHT" superlabel */
  .topbar .btn-clay .btn-txt { display: none; }  /* reWright → icon-only (title tooltip kept) */
  .topbar .btn-clay { padding: 0 11px; }
  .toggle button { padding: 0 12px; }

  /* ---- Creation page: pack the controls, roomier taps ---- */
  /* name input flexes so it shares its row with the dice, not a line of its own */
  .gen-bar input { flex: 1 1 160px; width: auto; min-width: 0; }
  .gen-row-cta .dice { flex: 0 0 auto; }
  .gen-dd .dd-btn { min-width: 116px; }
  .open-panel { padding: 16px 14px; }
  .paint-menu { grid-template-columns: repeat(6, 1fr); }

  /* ---- Scene: the identity card stacks vertically ---- */
  .identity { flex-direction: column; }
  .totem { width: 100%; border-right: none; border-bottom: 1px solid var(--border-2); }
  .tav-actions { width: 100%; flex-direction: row; justify-content: center;
    border-left: none; border-top: 1px solid var(--border-2); }
  .remember-box { width: 100%; flex-direction: row; justify-content: center; gap: 8px;
    border-left: none; border-top: 1px solid var(--border-2); }

  /* ---- Modals: stack the side-by-side columns ---- */
  .modal.detail { width: 96vw; }
  .detail-grid { flex-direction: column; }
  .detail-left { width: 100%; border-right: none; border-bottom: 1px solid var(--border-2); }
  .m-cols { grid-template-columns: 1fr; }
  .vibe-cols { grid-template-columns: 1fr; gap: 16px; }

  /* ---- Board: let the big canvas pan by touch; tighter chrome ----
     Nodes keep touch-action:none so dragging a card still works;
     touching empty canvas now scrolls/pans the board. */
  .board-canvas { touch-action: pan-x pan-y; }
  .board-bar, .board-tools { gap: 8px; padding: 8px 12px; }
  .board-zoom { display: inline-flex; }   /* zoom control is mobile-only */
}

/* Extra squeeze for the smallest phones */
@media (max-width: 460px) {
  .topbar .toggle button { padding: 0 10px; font-size: 12.5px; }
  .gen-bar input { flex-basis: 120px; }
  .paint-menu { grid-template-columns: repeat(5, 1fr); }
}