diff --git a/index.html b/index.html
index 8fc1b40..30354b5 100644
--- a/index.html
+++ b/index.html
@@ -81,19 +81,87 @@
 
     /* ── Sidebar ── */
     aside {
+      width: 0;
+      min-width: 0;
+      background: var(--surface);
+      border-right: 0px solid var(--border);
+      overflow: hidden;
+      flex-shrink: 0;
+      transition: width 0.25s ease, min-width 0.25s ease, border-width 0.25s ease;
+    }
+    aside.open {
       width: 270px;
       min-width: 270px;
-      background: var(--surface);
-      border-right: 1px solid var(--border);
-      overflow-y: auto;
+      border-right-width: 1px;
+    }
+    .aside-inner {
+      width: 270px;
       padding: 16px 14px;
     }
+    .aside-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
     aside h2 {
       color: var(--accent);
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.12em;
-      margin-bottom: 12px;
+      margin-bottom: 0;
+    }
+    .aside-close {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 1.2rem;
+      line-height: 1;
+      padding: 0 2px;
+      transition: color 0.15s;
+    }
+    .aside-close:hover { color: var(--text); }
+
+    .sidebar-toggle-btn {
+      margin-left: auto;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 0.8rem;
+      padding: 5px 12px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      white-space: nowrap;
+      transition: color 0.15s, border-color 0.15s;
+    }
+    .sidebar-toggle-btn:hover { color: var(--text); border-color: var(--text-muted); }
+
+    .sidebar-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      z-index: 99;
+    }
+    .sidebar-overlay.active { display: block; }
+
+    @media (max-width: 640px) {
+      #sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        z-index: 100;
+      }
+      .aside-inner {
+        height: 100%;
+        overflow-y: auto;
+      }
     }
 
     .ccard {
@@ -484,13 +552,20 @@
 <header>
   <h1>PF2e Perception &amp; Stealth</h1>
   <p>Flow of Control Reference &mdash; Player Core</p>
+  <button class="sidebar-toggle-btn" onclick="toggleSidebar()" title="Toggle Detection Conditions">
+    &#9776; Conditions
+  </button>
 </header>
 
 <div class="layout">
 
   <!-- ── Sidebar ── -->
-  <aside>
-    <h2>Detection Conditions</h2>
+  <aside id="sidebar">
+    <div class="aside-inner">
+    <div class="aside-header">
+      <h2>Detection Conditions</h2>
+      <button class="aside-close" onclick="closeSidebar()" title="Close">&times;</button>
+    </div>
 
     <div class="ccard observed">
       <h3>Observed</h3>
@@ -533,7 +608,9 @@
       <strong>Standard Cover:</strong> +2 to Stealth<br>
       <strong>Greater Cover:</strong> +4 to Stealth
     </div>
+    </div>
   </aside>
+  <div class="sidebar-overlay" id="sidebar-overlay" onclick="closeSidebar()"></div>
 
   <!-- ── Main ── -->
   <main>
@@ -967,6 +1044,18 @@ flowchart TD
 
   function simReset() { simSetState('OBSERVED'); }
 
+  function toggleSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.getElementById('sidebar-overlay');
+    sidebar.classList.toggle('open');
+    overlay.classList.toggle('active');
+  }
+
+  function closeSidebar() {
+    document.getElementById('sidebar').classList.remove('open');
+    document.getElementById('sidebar-overlay').classList.remove('active');
+  }
+
   function simSelectAction(id) {
     const action = SIM_ACTIONS[simCurrentState].find(a => a.id === id);
     if (!action) return;