diff --git a/public/index.html b/public/index.html
index 2295305..37c8f73 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,27 +11,38 @@
   #gl  { position:fixed; inset:0; width:100%; height:100%; }
   .hidden { display:none !important; }
 
-  #startScreen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
-    text-align:center; padding:24px; z-index:10; background-size:cover; background-position:center; }
-  #startScreen::before { content:''; position:absolute; inset:0; background:#06080f; opacity:var(--ov,.55); }
-  #startScreen > * { position:relative; }
-  #logo { max-width:min(78vw, 460px); max-height:34vh; margin-bottom:18px; }
-  #title { font-size:clamp(1.8rem,7vw,2.8rem); margin:0 0 10px; letter-spacing:.06em; }
-  #subtitle { opacity:.85; margin:0 0 30px; max-width:34rem; line-height:1.5; }
-  .btn { font-size:1.15rem; padding:14px 40px; border-radius:999px; border:0; cursor:pointer;
+  /* Flow layout, not absolute positioning: the disclaimer is a normal flex child pinned
+     to the bottom by margin-top:auto, so it can never overlap the buttons on short
+     screens. Content scrolls if the viewport is too small for it. */
+  #startScreen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
+    text-align:center; z-index:10; background-size:cover; background-position:center;
+    padding:max(18px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
+    overflow-y:auto; overscroll-behavior:contain; }
+  #startScreen::before { content:''; position:fixed; inset:0; background:#06080f; opacity:var(--ov,.55); }
+  #startScreen > * { position:relative; flex:none; }
+  /* centres the block when there's room, without ever squashing the disclaimer */
+  #startInner { margin:auto 0; display:flex; flex-direction:column; align-items:center; width:100%; }
+  #logo { max-width:min(78vw, 420px); max-height:min(28vh, 240px); margin-bottom:16px; object-fit:contain; }
+  #title { font-size:clamp(1.6rem,6.5vw,2.8rem); margin:0 0 10px; letter-spacing:.06em; }
+  #subtitle { opacity:.85; margin:0 0 26px; max-width:34rem; line-height:1.5; font-size:clamp(.9rem,3.6vw,1rem); }
+  .btn { font-size:1.1rem; padding:14px 38px; border-radius:999px; border:0; cursor:pointer;
     background:linear-gradient(135deg, var(--accent), #529eff); color:#04121a; font-weight:700; }
   .btn.ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.35);
-    font-size:.92rem; padding:9px 22px; font-weight:500; margin-top:14px; }
-  .disclaimer { position:absolute; bottom:14px; left:16px; right:16px; font-size:.68rem; opacity:.55; line-height:1.4; }
+    font-size:.92rem; padding:9px 22px; font-weight:500; margin-top:12px; }
+  .disclaimer { font-size:.66rem; opacity:.55; line-height:1.4; max-width:36rem;
+    margin-top:auto; padding-top:22px; }
 
   /* details page */
-  #details { position:fixed; inset:0; z-index:20; overflow:auto; background:#080b16; padding:0 0 90px; }
-  #details .inner { max-width:44rem; margin:0 auto; padding:24px 20px 0; }
+  #details { position:fixed; inset:0; z-index:20; overflow:auto; background:#080b16;
+    padding:0 0 calc(90px + env(safe-area-inset-bottom)); }
+  #details .inner { max-width:44rem; margin:0 auto;
+    padding:max(24px, env(safe-area-inset-top)) 20px 0; }
   #details h1 { font-size:1.6rem; color:var(--accent); }
   #details h2, #details h3 { color:var(--accent); margin-top:1.4em; }
   #details p, #details li { line-height:1.65; opacity:.9; }
   #details a { color:var(--accent); }
-  #backBtn { position:fixed; bottom:0; left:0; right:0; padding:14px; border:0; font-size:1rem;
+  #backBtn { position:fixed; bottom:0; left:0; right:0; border:0; font-size:1rem;
+    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
     background:#111730; color:var(--text); cursor:pointer; border-top:1px solid #1e2748; }
 
   #hud { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:10px 14px;
@@ -40,7 +51,8 @@
   #trk.warn { color:#ffd166; }
 
   /* shutter */
-  #shutter { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:6;
+  #shutter { position:fixed; bottom:calc(28px + env(safe-area-inset-bottom)); left:50%;
+    transform:translateX(-50%); z-index:6;
     width:68px; height:68px; border-radius:50%; border:4px solid rgba(255,255,255,.85);
     background:rgba(255,255,255,.22); cursor:pointer; backdrop-filter:blur(2px); }
   #shutter:active { transform:translateX(-50%) scale(.92); background:rgba(255,255,255,.5); }
@@ -57,11 +69,13 @@
 <canvas id="gl"></canvas>
 
 <div id="startScreen">
-  <img id="logo" class="hidden" alt="">
-  <h1 id="title"></h1>
-  <p id="subtitle"></p>
-  <button id="start" class="btn"></button>
-  <button id="detailsBtn" class="btn ghost"></button>
+  <div id="startInner">
+    <img id="logo" class="hidden" alt="">
+    <h1 id="title"></h1>
+    <p id="subtitle"></p>
+    <button id="start" class="btn"></button>
+    <button id="detailsBtn" class="btn ghost"></button>
+  </div>
   <div class="disclaimer" id="disc1"></div>
 </div>