mobile: rules + game pages responsive at 640px and 480px

game.html

@@ -738,6 +738,75 @@
       .entry { grid-template-columns: 1fr; }
       .entry-actions { justify-content: flex-start; }
     }
+
+    /* ── Mobile ─────────────────────────────────────────────────── */
+    @media (max-width: 640px) {
+
+      /* Nav: keep two groups, wrap if needed, larger tap areas */
+      nav .shell { flex-wrap: wrap; gap: 0; }
+      nav .nav-left { gap: .9rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
+      nav .nav-left a { padding: .8rem 0; font-size: .65rem; }
+      .nav-right { gap: .4rem; flex-shrink: 0; }
+      .edit-toggle { padding: .5rem .8rem; font-size: .6rem; }
+
+      /* Timeline: horizontal scroll instead of hidden overflow */
+      .timeline-section { overflow: hidden; }
+      .tl-wrap {
+        overflow-x: auto;
+        overflow-y: visible;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior-x: contain;
+      }
+
+      /* Chronicle: tighter vertical rhythm */
+      .chronicle-section { margin-bottom: 3rem; }
+      .chronicle-header-row { padding-bottom: 1.5rem; }
+      .chronicle-title { font-size: clamp(1.8rem, 8vw, 3.2rem); }
+      .entry { padding: 1.4rem 0; gap: 0 1rem; }
+      .entry-title { font-size: clamp(1.2rem, 5vw, 1.9rem); }
+
+      /* Entry side images: break earlier (was 700px, now caught here too) */
+      .entry-body.env-left,
+      .entry-body.env-right { display: block; }
+      .entry-body.env-left .entry-env,
+      .entry-body.env-right .entry-env {
+        position: relative; top: auto; margin-top: 1rem;
+      }
+
+      /* Modal: less padding, date fields stack */
+      .modal { padding: 1.2rem 1rem 1.6rem; }
+      .date-row { grid-template-columns: 1fr; }
+
+      /* Minimum touch target height on all buttons */
+      .btn { min-height: 42px; }
+      .btn.sm { min-height: 36px; padding: .45rem .8rem; }
+
+      /* Game header actions stack naturally */
+      .game-header-top { align-items: flex-start; }
+
+      /* Section label + button row */
+      .section-header { flex-wrap: wrap; }
+
+      /* Truth items full width */
+      .truth-list { gap: .35rem; }
+    }
+
+    @media (max-width: 480px) {
+      /* Modal rises from bottom, full width */
+      .modal-overlay { padding: 0; align-items: flex-end; }
+      .modal {
+        width: 100%;
+        max-height: 88vh;
+        padding: 1rem 1rem 2rem;
+      }
+
+      /* Smaller eyebrow text */
+      .chronicle-eyebrow { font-size: .6rem; }
+      .entry-eyebrow { font-size: .62rem; }
+
+      /* Game header meta tighter */
+      .game-meta-row { gap: .5rem; flex-wrap: wrap; }
+    }
     [x-cloak] { display: none !important; }
 
     /* ── Animation ──────────────────────────────────────────────────── */
@@ -820,7 +889,7 @@
         <a href="games.html">Sessions</a>
         <a x-show="game" x-text="game && game.title" style="color:var(--paper);pointer-events:none;"></a>
       </div>
-      <div style="display:flex;align-items:center;gap:.6rem">
+      <div class="nav-right" style="display:flex;align-items:center;gap:.6rem">
         <select x-show="game && (cards.length || customDecks.length)"
           x-model="activeDeckId"
           style="background:transparent;border:1px solid var(--line);color:var(--muted);

index.html

@@ -283,6 +283,48 @@
         filter: opacity(0.9) blur(0px);
       }
     }
+
+    /* ── Mobile ─────────────────────────────────────────────────── */
+    @media (max-width: 640px) {
+
+      /* Hero: less top padding, tighter leading */
+      .hero-copy { padding: 4rem 0 2.5rem; }
+      h1 { line-height: 1; }
+
+      /* Nav links: slightly smaller gap, still scrollable */
+      nav .shell { gap: 1rem; }
+
+      /* Reduce section spacing */
+      main { padding: 3rem 0 5rem; }
+      .project { margin: 0 0 4rem; }
+
+      /* Intro lead text: smaller on very narrow */
+      .intro .lead { font-size: 1.15rem; }
+
+      /* Meta grid: single column below 480px */
+      .meta { grid-template-columns: 1fr; }
+
+      /* Document: less padding */
+      .document { padding: 1.4rem; }
+      .document::before { display: none; }
+      .document::after { display: none; }
+
+      /* Blockquote: tighter */
+      blockquote { margin: 1.2rem 0 0; font-size: .88rem; }
+
+      /* Touch targets for nav */
+      nav a { padding: .9rem 0; }
+    }
+
+    @media (max-width: 480px) {
+      /* Masthead: less height on very small screens */
+      .masthead { min-height: 55vh; }
+      .masthead::after { display: none; }
+      .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
+
+      /* Hide extra nav items, show only essentials */
+      nav .shell { gap: .8rem; }
+    }
   </style>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>