diff --git a/src/app/components/DebugFooter.js b/src/app/components/DebugFooter.js
index 11f8033..31c1612 100644
--- a/src/app/components/DebugFooter.js
+++ b/src/app/components/DebugFooter.js
@@ -10,6 +10,11 @@ import { useEffect, useRef, useState } from 'react';
 // it never overlaps the game's panorama, map, or action bar, and no layer
 // needs a z-index to win over it. Clicking the sha copies the FULL value
 // (the label shows the short form).
+//
+// Height is --footer-h (36px) rather than the 44px touch floor: this strip is
+// a band taken out of the game's non-scrolling surface, where in landscape
+// 44px is a sixth of the vertical budget. 36px clears the 24px WCAG 2.2 target
+// minimum, and both targets stay wide.
 export default function DebugFooter() {
   const sha = process.env.NEXT_PUBLIC_COMMIT_SHA || 'unknown';
   const [copied, setCopied] = useState(false);
@@ -31,12 +36,12 @@ export default function DebugFooter() {
   };
 
   return (
-    <footer className="flex shrink-0 items-center justify-center gap-1 border-t border-border bg-card pb-[env(safe-area-inset-bottom)]">
+    <footer className="flex shrink-0 items-center justify-center gap-2 border-t border-border bg-card pb-[env(safe-area-inset-bottom)]">
       <a
         href="https://miti99.com"
         target="_blank"
         rel="noopener noreferrer"
-        className="flex min-h-11 items-center rounded-md px-2 text-[11px] leading-none text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+        className="flex min-h-(--footer-h) items-center rounded-md px-3 text-[11px] leading-none text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
       >
         Made by <span className="underline underline-offset-2 mx-1">miti99</span> with{' '}
         <span aria-hidden="true" className="ml-1">❤️</span>
@@ -44,7 +49,7 @@ export default function DebugFooter() {
       </a>
       <span className="text-[11px] leading-none text-muted-foreground" aria-hidden="true">·</span>
       {/* The visual is deliberately tiny, so the tap target comes from
-          padding: ~44px tall, well past the label's own box. min-w in ch
+          padding: --footer-h tall, well past the label's own box. min-w in ch
           keeps the width stable when the 7-char sha swaps for the 7-char
           'copied!', so the click never shifts the thing being clicked.
           aria-live announces that swap to screen readers. */}
@@ -54,7 +59,7 @@ export default function DebugFooter() {
         aria-label="Copy build commit"
         aria-live="polite"
         title={sha}
-        className="flex min-h-11 min-w-[9ch] cursor-pointer select-none items-center justify-center rounded-md px-3 font-mono text-[11px] leading-none text-muted-foreground underline underline-offset-2 transition-colors hover:text-foreground active:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+        className="flex min-h-(--footer-h) min-w-[9ch] cursor-pointer select-none items-center justify-center rounded-md px-3 font-mono text-[11px] leading-none text-muted-foreground underline underline-offset-2 transition-colors hover:text-foreground active:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
       >
         {copied ? 'copied!' : sha.slice(0, 7)}
       </button>
diff --git a/src/app/components/FirstRoundHint.js b/src/app/components/FirstRoundHint.js
index 8a4b182..4836ec9 100644
--- a/src/app/components/FirstRoundHint.js
+++ b/src/app/components/FirstRoundHint.js
@@ -6,18 +6,21 @@ import { X } from 'lucide-react';
 const HINT_STORAGE_KEY = 'vngeoguessr_hint_seen';
 
 /**
- * One-time how-to-play banner over the game screen. All other instruction
- * lives on the homepage, so a player who arrives by shared link would
- * otherwise get a panorama with no hint that it drags or that the map takes
- * a click. Shown until dismissed or until the first guess is placed --
- * placing a pin proves the hint has been understood.
+ * One-time how-to-play banner, rendered into the panorama pane's top row. All
+ * other instruction lives on the homepage, so a player who arrives by shared
+ * link would otherwise get a panorama with no hint that it drags or that the
+ * map takes a click. Shown until dismissed or until the first guess is placed
+ * -- placing a pin proves the hint has been understood.
+ *
+ * A flow item, deliberately: as a free-floating overlay it was centred on the
+ * whole game box, which put it over the guess map's search field on desktop
+ * and over the Mapillary attribution on phones. Sharing a flex row with the
+ * credit is what makes both collisions unrepresentable, so this component owns
+ * no position, no transform and no z-index.
  * @param {Object} props
  * @param {boolean} props.hasGuess True once a guess pin exists this round.
- * @param {boolean} props.mapExpanded True while the phone minimap covers the
- *   screen. The banner yields then: the expanded panel's own controls live in
- *   a z-clamped stacking context the banner would otherwise paint over.
  */
-export default function FirstRoundHint({ hasGuess, mapExpanded }) {
+export default function FirstRoundHint({ hasGuess }) {
   const [visible, setVisible] = useState(false);
 
   // Read in an effect: localStorage does not exist on the server, and the
@@ -44,24 +47,26 @@ export default function FirstRoundHint({ hasGuess, mapExpanded }) {
   if (!visible || hasGuess) return null;
 
   return (
+    // role="status" rather than "note": the banner appears after hydration, so
+    // a screen-reader user already past the header would never meet a note.
     <div
-      role="note"
+      role="status"
       aria-label="How to play"
-      className={`absolute left-1/2 top-3 z-[700] w-max max-w-[calc(100%-1.5rem)] -translate-x-1/2 items-center gap-2 rounded-xl border border-border bg-card/95 py-2 pl-4 pr-2 text-sm text-foreground shadow-lg backdrop-blur animate-fade-in-up ${
-        mapExpanded ? 'hidden lg:flex' : 'flex'
-      }`}
+      className="flex items-start justify-start gap-2 animate-fade-in-up"
     >
-      <span>
+      <span className="pointer-events-auto rounded-xl border border-border bg-card/95 px-3 py-2 text-sm text-foreground shadow-lg backdrop-blur">
         Drag to look around · {' '}
         <span className="lg:hidden">Tap the minimap</span>
         <span className="hidden lg:inline">Click the map</span>
         {' '}to drop your guess · Submit
       </span>
+      {/* size-11, not size-8: a missed tap on the old 32px target started a
+          panorama drag instead of dismissing the hint. */}
       <button
         type="button"
         onClick={dismiss}
         aria-label="Dismiss the how-to-play hint"
-        className="flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+        className="pointer-events-auto flex size-11 shrink-0 items-center justify-center rounded-lg border border-border bg-card/95 text-muted-foreground shadow-lg backdrop-blur transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
       >
         <X className="size-4" aria-hidden="true" />
       </button>
diff --git a/src/app/components/GameClient.js b/src/app/components/GameClient.js
index 23fbdf4..103587a 100644
--- a/src/app/components/GameClient.js
+++ b/src/app/components/GameClient.js
@@ -395,8 +395,10 @@ export default function GameClient() {
 
   return (
     <div className="flex-1 min-h-0 vn-surface flex flex-col overflow-hidden">
-      {/* Compact Header */}
-      <header className="flex items-center justify-between gap-2 px-3 sm:px-4 py-2 pt-[calc(0.5rem+env(safe-area-inset-top))] bg-card border-b border-border shadow-sm">
+      {/* Compact Header. viewportFit:cover hands the layout the display
+          cutout on every axis, not just the top: in landscape the notch takes
+          a 44-59px bite out of one side, which is exactly where Back sits. */}
+      <header className="flex items-center justify-between gap-2 py-2 pl-[calc(0.75rem+env(safe-area-inset-left))] pr-[calc(0.75rem+env(safe-area-inset-right))] pt-[calc(0.5rem+env(safe-area-inset-top))] sm:pl-[calc(1rem+env(safe-area-inset-left))] sm:pr-[calc(1rem+env(safe-area-inset-right))] bg-card border-b border-border shadow-sm">
         <Button
           onClick={handleGoBack}
           variant="ghost"
@@ -426,7 +428,7 @@ export default function GameClient() {
           )}
         </div>
 
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           <ThemeToggle />
           <Button
             onClick={() => setShowDonate(true)}
@@ -443,10 +445,11 @@ export default function GameClient() {
 
       {/* Game Content. Phones get a full-bleed panorama with the guess map
           floating over it; lg and up keeps the original two-column split. */}
-      <div className="relative flex-1 min-h-0 lg:grid lg:grid-cols-2 lg:gap-3 lg:p-3">
-        <FirstRoundHint hasGuess={Boolean(guessCoordinates)} mapExpanded={mapExpanded} />
+      <div className="relative flex-1 min-h-0 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)] lg:grid lg:grid-cols-2 lg:gap-3 lg:py-3 lg:pl-[calc(0.75rem+env(safe-area-inset-left))] lg:pr-[calc(0.75rem+env(safe-area-inset-right))]">
         {/* Panorama Viewer */}
-        <div className="absolute inset-0 bg-neutral-900 overflow-hidden lg:relative lg:rounded-lg">
+        {/* `isolate` traps the panorama library's internal ladder (it reaches
+            9999) inside this pane, so a dialog scrim can still cover it. */}
+        <div className="absolute inset-0 isolate bg-neutral-900 overflow-hidden lg:relative lg:rounded-lg">
           {loadError ? (
             <div className="w-full h-full flex items-center justify-center p-6" role="alert">
               <div className="text-center space-y-4 max-w-sm">
@@ -470,6 +473,7 @@ export default function GameClient() {
               imageUrl={imageData.url}
               onReady={handlePanoramaReady}
               onError={handlePanoramaError}
+              topBarSlot={<FirstRoundHint hasGuess={Boolean(guessCoordinates)} />}
             />
           ) : (
             <div className="w-full h-full flex items-center justify-center" role="status" aria-live="polite">
@@ -506,7 +510,7 @@ export default function GameClient() {
 
           {/* The global footer strip below owns the home-indicator safe area,
               so plain p-3 is enough here. */}
-          <div className="absolute inset-x-0 bottom-0 z-[600] flex gap-2 border-t border-border bg-card/95 p-3 backdrop-blur lg:static lg:border-0 lg:bg-transparent lg:p-0 lg:backdrop-blur-none">
+          <div className="absolute inset-x-0 bottom-0 z-(--z-appbar) flex gap-2 border-t border-border bg-card/95 p-3 backdrop-blur lg:static lg:z-auto lg:border-0 lg:bg-transparent lg:p-0 lg:backdrop-blur-none">
             <Button
               onClick={handleSubmitGuess}
               disabled={!guessCoordinates || !imageData || !sessionId || submitting || roundLoading}
diff --git a/src/app/components/GuessMapPanel.js b/src/app/components/GuessMapPanel.js
index 268c086..6567d69 100644
--- a/src/app/components/GuessMapPanel.js
+++ b/src/app/components/GuessMapPanel.js
@@ -7,7 +7,7 @@ import MapSearchBox from './MapSearchBox';
 
 const LeafletMap = dynamic(() => import('./LeafletMap'), {
   ssr: false,
-  loading: () => <div role="status" aria-live="polite" className="w-full h-full min-h-[400px] bg-muted flex items-center justify-center text-muted-foreground">Loading map...</div>
+  loading: () => <div role="status" aria-live="polite" className="w-full h-full bg-muted flex items-center justify-center text-muted-foreground">Loading map...</div>
 });
 
 // The guess map with its phone minimap behavior. `expanded` stays controlled
@@ -24,12 +24,31 @@ export default function GuessMapPanel({
   const mapRef = useRef(null);
   // Mirrored into state so the search box renders once the map exists.
   const [mapInstance, setMapInstance] = useState(null);
+  const collapseButtonRef = useRef(null);
 
   const handleMapReady = useCallback((map) => {
     mapRef.current = map;
     setMapInstance(map);
   }, []);
 
+  // Expanded, the minimap covers the phone screen like a modal, so it owes
+  // the player the same escape route one gives: Escape collapses it, and focus
+  // moves to the collapse button rather than staying on a cover button that no
+  // longer exists.
+  useEffect(() => {
+    if (!expanded) return undefined;
+    collapseButtonRef.current?.focus();
+    const handleKeyDown = (event) => {
+      if (event.key !== 'Escape') return;
+      // A dialog on top owns Escape; collapsing the map behind it would make
+      // one keypress do two things.
+      if (document.querySelector('[role="dialog"]')) return;
+      onExpandedChange(false);
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [expanded, onExpandedChange]);
+
   // Leaflet caches its container size, so growing or shrinking the minimap
   // leaves it rendering at the old dimensions until it is told to remeasure.
   useEffect(() => {
@@ -44,28 +63,54 @@ export default function GuessMapPanel({
       // Frame the map rather than restyling its tiles: a bright map inset
       // in a padded card with real elevation reads as a lit window on
       // dark chrome, which is how GeoGuessr handles the same problem.
-      // bottom-21 clears the action bar, which no longer grows with the home
-      // indicator: the global footer strip below the game owns that inset.
-      className={`absolute z-[500] overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg transition-all duration-200 ease-out bottom-[5.25rem] lg:relative lg:inset-auto lg:z-auto lg:h-auto lg:w-auto lg:flex-1 lg:min-h-0 lg:p-1.5 ${
-        expanded ? 'inset-x-3 top-3' : 'right-3 h-36 w-36'
+      // Offsets derive from --action-bar-h: the bar no longer grows with the
+      // home indicator (the global footer strip below the game owns that
+      // inset), so one token keeps the collapsed and expanded panels aligned
+      // to the same edge.
+      // `isolate` at every breakpoint, not just where the panel happens to be
+      // absolute: it is what keeps Leaflet's own 200-1000 ladder inside the
+      // panel, so the chrome below can sit on the app-wide scale instead of
+      // out-bidding a third-party stylesheet.
+      className={`absolute isolate z-(--z-floating) overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg transition-all duration-200 ease-out bottom-[calc(var(--action-bar-h)+0.75rem)] lg:relative lg:inset-auto lg:h-auto lg:w-auto lg:flex-1 lg:min-h-0 lg:p-1.5 ${
+        expanded ? 'inset-x-3 top-3' : 'right-3 h-[min(9rem,30vh)] w-[min(9rem,30vh)]'
       }`}
     >
-      <LeafletMap
-        center={center}
-        bbox={bbox}
-        zoom={10}
-        // The search box owns the top-left corner on every breakpoint.
-        zoomPosition="bottomleft"
-        onMapClick={onMapClick}
-        onReady={handleMapReady}
-        className="w-full h-full"
-      />
+      {/* Leaflet's own chrome is sized for a full map, and the phone states
+          are not one, so each gets what fits.
+          Collapsed: a 144px thumbnail behind an opaque "Tap to guess" cover.
+          The tile credit wraps to five lines across it and the zoom buttons
+          land on the cover's label -- both unreadable, and the cover eats
+          every click anyway. Hidden here, shown on the expanded map one tap
+          away; the permanent credit also lives on /credits.
+          Expanded: the map is only ~340px wide, so the credit wraps to two
+          lines and covers the bottom-left zoom control. Lift the control clear
+          rather than dropping either one -- pinch is not the only way to zoom
+          a guess.
+          Both scoped to max-lg: neither state exists from lg up. */}
+      <div
+        className={`isolate h-full w-full ${
+          expanded
+            ? 'max-lg:[&_.leaflet-bottom.leaflet-left]:mb-9'
+            : 'max-lg:[&_.leaflet-control-attribution]:hidden max-lg:[&_.leaflet-control-zoom]:hidden'
+        }`}
+      >
+        <LeafletMap
+          center={center}
+          bbox={bbox}
+          zoom={10}
+          // The search box owns the top-left corner on every breakpoint.
+          zoomPosition="bottomleft"
+          onMapClick={onMapClick}
+          onReady={handleMapReady}
+          className="w-full h-full"
+        />
+      </div>
 
       {/* Search rides above the map (same layer as the expand/collapse
           buttons). On phones it only makes sense once the minimap is
-          expanded; right-14 keeps it clear of the collapse button there. */}
+          expanded; right-16 keeps an 8px gap to the collapse button there. */}
       <div
-        className={`absolute top-2 left-2 z-[1200] right-14 lg:right-auto lg:top-3 lg:left-3 lg:w-72 ${
+        className={`absolute top-2 left-2 z-(--z-pane-chrome) right-16 lg:right-auto lg:top-3 lg:left-3 lg:w-72 ${
           expanded ? '' : 'hidden lg:block'
         }`}
       >
@@ -74,9 +119,12 @@ export default function GuessMapPanel({
 
       {/* Desktop counterpart of the phone cover's "Tap to guess": until a pin
           exists, nothing on a bare map says it is clickable. Non-interactive
-          so it never steals the click it is inviting. */}
+          so it never steals the click it is inviting.
+          bottom-8 clears the attribution bar Leaflet paints along the bottom
+          edge: at bottom-3 this badge's opaque background covered the tile
+          credit, which has to stay legible. */}
       {!hasGuess && (
-        <div className="pointer-events-none absolute inset-x-0 bottom-3 z-[1100] hidden justify-center lg:flex">
+        <div className="pointer-events-none absolute inset-x-0 bottom-8 z-(--z-pane-chrome) hidden justify-center lg:flex">
           <span className="rounded-lg bg-background/80 px-3 py-1.5 text-xs font-medium text-foreground shadow-md backdrop-blur">
             Click to place your guess
           </span>
@@ -91,7 +139,7 @@ export default function GuessMapPanel({
           type="button"
           onClick={() => onExpandedChange(true)}
           aria-label="Expand the guess map"
-          className="absolute inset-0 z-[1200] flex flex-col items-center justify-center gap-1 bg-background/35 text-xs font-semibold text-foreground backdrop-blur-[1px] lg:hidden"
+          className="absolute inset-0 z-(--z-pane-chrome) flex flex-col items-center justify-center gap-1 bg-background/35 text-xs font-semibold text-foreground backdrop-blur-[1px] lg:hidden"
         >
           <Maximize2 className="size-4" aria-hidden="true" />
           {hasGuess ? 'Edit guess' : 'Tap to guess'}
@@ -101,9 +149,10 @@ export default function GuessMapPanel({
       {expanded && (
         <button
           type="button"
+          ref={collapseButtonRef}
           onClick={() => onExpandedChange(false)}
           aria-label="Collapse the guess map"
-          className="absolute top-2 right-2 z-[1200] flex size-11 items-center justify-center rounded-full border border-border bg-card/90 text-foreground shadow-md backdrop-blur lg:hidden"
+          className="absolute top-2 right-2 z-(--z-pane-chrome) flex size-11 items-center justify-center rounded-full border border-border bg-card/90 text-foreground shadow-md backdrop-blur lg:hidden"
         >
           <Minimize2 className="size-4" aria-hidden="true" />
         </button>
diff --git a/src/app/components/PanoramaViewer.js b/src/app/components/PanoramaViewer.js
index 6a6e0da..bddb6bc 100644
--- a/src/app/components/PanoramaViewer.js
+++ b/src/app/components/PanoramaViewer.js
@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { Viewer } from '@photo-sphere-viewer/core';
 import '@photo-sphere-viewer/core/index.css';
 
-function PanoramaViewer({ imageUrl, onReady, onError }) {
+function PanoramaViewer({ imageUrl, onReady, onError, topBarSlot }) {
   const containerRef = useRef(null);
   const onReadyRef = useRef(onReady);
   const onErrorRef = useRef(onError);
@@ -98,30 +98,47 @@ function PanoramaViewer({ imageUrl, onReady, onError }) {
   }, [imageUrl]);
 
   return (
-    <div className="relative w-full h-full bg-neutral-900 overflow-hidden touch-none">
+    // Fills its parent by insets, so the caller must position it. `h-full`
+    // would collapse wherever that parent is a flex item, since a flexed
+    // height is indefinite for percentage resolution.
+    <div className="absolute inset-0 bg-neutral-900 overflow-hidden touch-none">
       <div ref={containerRef} className="w-full h-full" />
-      {/* Imagery attribution required by the Mapillary Terms of Use: the logo,
-          visibly displayed, linking to the Mapillary homepage. Deliberately
-          NOT the per-image page — the image id resolves the round's answer,
-          and the server keeps it secret. Top-left: the navbar owns the bottom
-          edge and the floating guess map owns the bottom-right. */}
-      <div className="absolute top-2 left-2 z-10 flex items-center gap-2 rounded-md bg-black/50 px-2 py-1">
-        <a
-          href="https://www.mapillary.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Imagery from Mapillary"
-        >
-          <Image src="/mapillary-logo.svg" alt="Mapillary" width={61} height={14} className="h-3 w-auto" />
-        </a>
-        <a
-          href="https://creativecommons.org/licenses/by-sa/4.0/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-[10px] leading-none text-white/80 hover:text-white"
-        >
-          CC BY-SA 4.0
-        </a>
+      {/* The pane's top row: the attribution, plus whatever chrome the host
+          wants beside it. One flow row rather than two overlays in the same
+          corner -- that is how the how-to-play banner ended up covering an
+          attribution the Mapillary Terms of Use require to stay visible, and a
+          flex row cannot reach that state at all.
+          The row itself is click-through so it never eats a panorama drag;
+          slot content marks its own opaque parts `pointer-events-auto`. */}
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-(--z-pane-chrome) flex flex-wrap items-start gap-2 p-2">
+        {/* Imagery attribution required by the Mapillary Terms of Use: the
+            logo, visibly displayed, linking to the Mapillary homepage.
+            Deliberately NOT the per-image page — the image id resolves the
+            round's answer, and the server keeps it secret. */}
+        <div className="pointer-events-auto flex shrink-0 items-center gap-2 rounded-md bg-black/50 px-2 py-1">
+          <a
+            href="https://www.mapillary.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Imagery from Mapillary"
+          >
+            <Image src="/mapillary-logo.svg" alt="Mapillary" width={61} height={14} className="h-3 w-auto" />
+          </a>
+          <a
+            href="https://creativecommons.org/licenses/by-sa/4.0/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[10px] leading-none text-white/80 hover:text-white"
+          >
+            CC BY-SA 4.0
+          </a>
+        </div>
+        {topBarSlot ? (
+          // basis-full below lg: sharing a 375px row with the credit left the
+          // slot ~160px, which wrapped a one-sentence hint into five lines. Its
+          // own row keeps the full width and still cannot reach the credit.
+          <div className="min-w-0 basis-full lg:basis-0 lg:flex-1">{topBarSlot}</div>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index c3254c7..ebb8448 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,4 +1,8 @@
-@import "tailwindcss";
+/* Scope class detection to src/. Tailwind 4 otherwise scans the whole repo,
+   so prose that merely quotes a class name becomes a real utility: a report in
+   plans/ citing `pb-[env(...)]` was enough to emit invalid CSS and fail the
+   build. All markup lives under src/. */
+@import "tailwindcss" source("../");
 @import "tw-animate-css";
 
 /* Import Leaflet CSS */
@@ -238,14 +242,36 @@
   }
 }
 
-/* Ensure dialogs appear above Leaflet maps */
-[role="dialog"] {
-  z-index: 9999 !important;
+/* The credit strip and the game action bar are fixed-height bands that other
+   elements have to clear. One definition each, so changing a band moves
+   everything that offsets against it. */
+:root {
+  --footer-h: 2.25rem;
+  --action-bar-h: 4.5rem;
 }
 
-/* Ensure dialog overlay appears above Leaflet maps */
+/* One ladder for every layer that floats. Third-party stacks (Leaflet
+   200-1000, Photo Sphere Viewer 50-9999) are not out-bid, they are contained:
+   every pane that hosts one carries `isolate`, so its internal values stay
+   inside it and the numbers below are the only ones that decide the screen.
+   Ordered low to high; nothing here needs !important. */
+:root {
+  --z-pane-chrome: 10;  /* controls painted over a map or panorama */
+  --z-floating: 20;     /* the phone minimap panel */
+  --z-appbar: 30;       /* the game action bar */
+  --z-fab: 40;          /* the landing debug button */
+  --z-overlay: 50;      /* dialog scrim */
+  --z-modal: 60;        /* dialog content */
+  --z-popover: 70;      /* a select or tooltip opened inside a dialog */
+}
+
+/* Radix portals its popper to <body>, outside the dialog it belongs to, so a
+   select inside a modal needs the ladder value rather than DOM order. Radix
+   also copies the content's own computed z-index onto this wrapper inline
+   (see react-popper), which is why select.jsx carries --z-popover too; this
+   rule is the floor for any popper whose content sets none. */
 [data-radix-popper-content-wrapper] {
-  z-index: 9999 !important;
+  z-index: var(--z-popover);
 }
 
 /* Page ground, one step off --background. Named for what it is: a flat
diff --git a/src/app/layout.js b/src/app/layout.js
index 16dd3b8..ceb3805 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -50,14 +50,19 @@ export default function RootLayout({ children }) {
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
-      {/* Sticky-footer column: pages fill the viewport via flex-1 and the
-          footer keeps its own strip below them, so it can never overlap the
-          game's panorama, map, or action bar — and nothing covers it. */}
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased flex min-h-dvh flex-col`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
-        <DebugFooter />
+        {/* Sticky-footer column: pages fill the viewport via flex-1 and the
+            footer keeps its own strip below them, so it can never overlap the
+            game's panorama, map, or action bar — and nothing covers it. The
+            column is a wrapper rather than <body> itself because Radix portals
+            append to <body>; as flex items they would each become a row under
+            the footer the moment one rendered anything in flow. */}
+        <div className="flex min-h-dvh flex-col">
+          {children}
+          <DebugFooter />
+        </div>
         <Analytics />
         <SpeedInsights />
       </body>
diff --git a/src/app/page.js b/src/app/page.js
index caa8494..ffb43ae 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -214,13 +214,14 @@ export default function Home() {
         />
 
         {/* Debug Button. The bottom offset clears the global footer strip
-            (min-h-11) plus the home indicator; hover/active states give the
-            press the feedback the bare outline variant lacked. z-40 keeps it
-            under dialogs. */}
+            plus the home indicator, derived from --footer-h so it follows a
+            change to the strip; hover/active states give the press the
+            feedback the bare outline variant lacked. --z-fab keeps it under
+            dialogs. */}
         <Button
           asChild
           variant="outline"
-          className="fixed bottom-[calc(3.75rem+env(safe-area-inset-bottom))] right-6 z-40 size-12 rounded-full bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:border-brand/40 hover:text-foreground hover:shadow-md active:scale-95"
+          className="fixed bottom-[calc(var(--footer-h)+1.5rem+env(safe-area-inset-bottom))] right-6 z-(--z-fab) size-12 rounded-full bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:border-brand/40 hover:text-foreground hover:shadow-md active:scale-95"
         >
           <Link
             href="/debug"
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index d174326..3fe0069 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -38,7 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-(--z-overlay) bg-black/50",
         className
       )}
       {...props} />
@@ -57,7 +57,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-(--z-modal) grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className
         )}
         {...props}>
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
index bcd126e..1b07e33 100644
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -58,7 +58,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-(--z-popover) max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className