diff --git a/web/app.css b/web/app.css
index e36d19d..c782386 100644
--- a/web/app.css
+++ b/web/app.css
@@ -500,8 +500,22 @@ a{color:var(--accent)}
 }
 .iconbtn:hover{background:var(--raise);color:var(--fg)}
 /* One toolbar across the window, as the original had: grouped buttons, search on the right. */
+/* The display's own intrusions -- the home indicator along the bottom, the notch at one side in
+   landscape. viewport-fit=cover hands the page the whole screen, which is what a standalone
+   shell and an iOS home-screen app both give it, so the bars along the edges pay for them in
+   padding. A browser with its own chrome reports nought and nothing moves. */
+:root{
+  --safe-b:env(safe-area-inset-bottom,0px);
+  --safe-l:env(safe-area-inset-left,0px);
+  --safe-r:env(safe-area-inset-right,0px);
+}
 #topbar{
-  display:flex;align-items:center;gap:10px;padding:7px 12px;min-width:0;overflow:hidden;
+  display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;
+  /* Longhand, and it has to stay longhand: the minifier runs a calc() in a padding shorthand
+     into the value after it -- `calc(12px + var(--safe-r))7px` -- and the browser then throws
+     the whole declaration away, leaving the bar with no padding at all. */
+  padding-top:7px;padding-bottom:7px;
+  padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r));
   background:var(--panel);border-bottom:1px solid var(--line);
 }
 #topbar .grow{flex:1}
@@ -830,7 +844,9 @@ body.playing .eq i:nth-child(3){animation-delay:-.6s}
 #player{
   border-top:1px solid var(--line);background:var(--panel);
   display:none;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
-  padding:9px 16px;box-shadow:0 -6px 24px rgba(6,10,16,.4);
+  padding-top:9px;padding-bottom:calc(9px + var(--safe-b));
+  padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r));
+  box-shadow:0 -6px 24px rgba(6,10,16,.4);
 }
 #player.on{display:grid}
 /* #audio is a <video> playing double duty as the audio element (see its tag). Only a video
@@ -918,9 +934,14 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 #burger,#dback{display:none}
 /* Totals for what is showing, along the bottom, as the original's status bar. */
 #status{
-  padding:3px 14px;min-height:22px;font-size:12px;color:var(--faint);background:var(--panel);
+  padding-top:3px;padding-bottom:calc(3px + var(--safe-b));
+  padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r));
+  min-height:22px;font-size:12px;color:var(--faint);background:var(--panel);
   border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
+/* Only the last bar along the bottom owes the indicator anything, and with a player open that
+   is the player, not this. Without :has() the worst of it is a gap above the player bar. */
+body:has(#player.on) #status{padding-bottom:3px}
 /* The feed's own header, kept to one line so the table starts high, as it did. */
 .fhead.slim{align-items:center;gap:8px 12px;margin-bottom:10px;flex-wrap:wrap}
 .fhead.slim .art{width:44px;height:44px;font-size:15px;box-shadow:none}
@@ -944,7 +965,11 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
   #sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:42;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
   #sidebar.open{transform:none}
   #scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:41}
-  #player{position:relative;z-index:39;padding:7px 10px;gap:8px}
+  #player{
+    position:relative;z-index:39;gap:8px;
+    padding-top:7px;padding-bottom:calc(7px + var(--safe-b));
+    padding-left:calc(10px + var(--safe-l));padding-right:calc(10px + var(--safe-r));
+  }
 
   /* The feed list is reachable whether or not anything is playing. */
   #burger{display:grid}
diff --git a/web/build.mjs b/web/build.mjs
index 4e05076..957f11d 100644
--- a/web/build.mjs
+++ b/web/build.mjs
@@ -38,7 +38,14 @@ export function buildStyle({ minify = true } = {}) {
   const r = html.minifySync(`<!doctype html><style>${css}</style>`, { minifyCss: true, removeComments: true });
   const bad = (r.errors || []).filter(e => e.level === 'error' || e.level === 'Error');
   if (bad.length) throw new Error(`${STYLE}: ${bad.map(e => e.message).join('; ')}`);
-  return r.code.slice(r.code.indexOf('<style>') + 7, r.code.lastIndexOf('</style>'));
+  const out = r.code.slice(r.code.indexOf('<style>') + 7, r.code.lastIndexOf('</style>'));
+  // The minifier drops the space between a calc() and the value after it in a shorthand --
+  // `padding:7px calc(12px + var(--safe-r))7px ...` -- and a browser throws the whole
+  // declaration away, so the element silently loses its padding. It reports no error and the
+  // page still loads, which is why this is checked rather than trusted. Longhands avoid it.
+  const run = out.match(/calc\([^()]*(?:\([^()]*\)[^()]*)*\)(?=[0-9a-zA-Z.])/);
+  if (run) throw new Error(`${STYLE}: minifying ran ${run[0]} into the value after it; use longhand properties`);
+  return out;
 }
 
 /// The page and its script, built: { html, js, script }, where script is the file's name.
diff --git a/web/index.html b/web/index.html
index 38060e9..ffeab3e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="color-scheme" content="dark light">
 <title>iPodderX</title>
 <link rel="icon" type="image/png" sizes="128x128" href="/favicon.png">