/* 3D map view (js/map3d.js). It lies over the map's own box: the svg stays in the layout, hidden,
   so the frame keeps whatever height the current layout gives the map. */
#m3-view { position:absolute; inset:0; z-index:2; background:black; overflow:hidden; }
#m3-view .m3cv { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; -webkit-tap-highlight-color:transparent; }
/* The prototype's grade over every 3D view: its vignette (.lm-fx) and, under it, the zone's colour in soft-light (--m3grade,
   set per floor by map3d-look.js lookLights; GRADE.sewer on F1). Low graphics never reaches a 3D view. */
.m3ov { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%); }
.m3ov::before { content:''; position:absolute; inset:0; background:var(--m3grade, transparent); mix-blend-mode:soft-light; }
.m3ov .fpmini { left:auto; right:8px; }   /* top-left is the STEADY / % mapped chips */
.m3load { position:absolute; left:0; right:0; top:46%; text-align:center; font:700 calc(11px*var(--tscale))/1 ui-monospace,Menlo,monospace;
  letter-spacing:.14em; color:var(--amber); }
/* The step pad: one cluster in the bottom-right corner, where a right thumb rests. 52px targets. */
.m3pad { position:absolute; right:10px; bottom:calc(10px + var(--fp-bot,0px)); z-index:7; pointer-events:auto;
  display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:2px; }
.m3b { margin:0; padding:0; border:1.5px solid var(--line-strong); border-radius:11px; background:rgba(12,16,24,.85); color:var(--title-gold);
  font-size:20px; line-height:1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.m3b.n { grid-area:1/2; } .m3b.w { grid-area:2/1; } .m3b.e { grid-area:2/3; } .m3b.s { grid-area:3/2; }
.m3b.hot { border-color:var(--st-aggressive); color:var(--amber); }   /* a fight or a roamer that way */
.m3b:disabled { opacity:.28; cursor:default; }
.m3b:active:not(:disabled) { background:var(--raised); }
/* First person keeps its labelled hall buttons on a mouse; on a touch screen the pad replaces them. */
#fp-view .m3pad { display:none; }
@media (pointer:coarse) { #fp-view .fpnav { display:none; } #fp-view .m3pad { display:grid; } }
/* Phone layout where the map fills the CRAWL tab: first person fills the same box instead of a 220px
   strip over black (the reference's framing). _fpFov already caps a wide box; a tall one just narrows. */
@media (max-width:1079px) and (min-height:700px) {
  body:not(.mapfs):has(#game:not(.hide) > #tab-dungeon.active) #fp-view { height:100%; max-width:none; border-radius:0; }
  body:not(.mapfs):has(#game:not(.hide) > #tab-dungeon.active) #fp-view .fpmini { left:auto; right:8px; }
}
/* First and third person (js/map3d-fp.js), framed as the Living Map prototype's tabs: its vignette, its minimap
   corner with your facing as a green arrow, its pad buttons (52x48, slate) gathered under the right thumb. */
.m3ov.fp3 .fpgrid i.p { position:relative; background:transparent; box-shadow:none; }
.m3ov.fp3 .fpgrid i.p::after { content:''; position:absolute; inset:-25%; background:var(--neon-text); transform:rotate(var(--fh,0deg));
  clip-path:polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
.fp3pad { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,48px); gap:6px; }
.fp3pad .m3b { border:1px solid var(--line-strong); border-radius:8px; background:rgba(35,44,62,.9); color:var(--txt); font:700 20px/1 system-ui,sans-serif; }
.fp3pad .m3b:active:not(:disabled) { background:rgba(123,248,106,.16); }
.fp3pad .m3b.hot { border-color:var(--st-aggressive); color:var(--amber); }
.m3ov .fpfoe { left:10px; right:188px; text-align:left; bottom:calc(14px + var(--fp-bot,0px)); }
/* Free walk (js/map3d-walk.js): the prototype's .lm-stick, mirrored to the bottom right for the right thumb; first and
   third person's two turn buttons sit just above it. */
.fwstick { position:absolute; right:14px; bottom:calc(14px + var(--fp-bot,0px)); width:108px; height:108px; z-index:7; border-radius:50%;
  touch-action:none; cursor:pointer; background:rgba(35,44,62,.42); border:1px solid var(--line-strong); -webkit-user-select:none; user-select:none; }
.fwstick i { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; pointer-events:none;
  background:rgba(230,236,245,.32); border:1px solid rgba(230,236,245,.45); }
.m3pad.fwturns { right:14px; bottom:calc(132px + var(--fp-bot,0px)); display:flex; gap:6px; }
.m3pad.fwturns .m3b { width:52px; height:48px; border:1px solid var(--line-strong); border-radius:8px; background:rgba(35,44,62,.9); color:var(--txt); font:700 20px/1 system-ui,sans-serif; }
/* The perf probe (js/map3d-perf.js): admin only, with ?perf3d=1. */
.p3panel { position:absolute; left:8px; top:40px; z-index:8; max-width:min(330px, calc(100% - 150px)); padding:5px 6px; pointer-events:auto;
  background:rgba(5,7,10,.84); border:1px solid var(--line-strong); border-radius:6px; color:var(--txt); font:10px/1.3 var(--mono); }
.p3panel b { cursor:pointer; padding:0 4px; }
.p3panel.min > :not(.p3row:first-child), .p3panel.min .p3row > :not(b) { display:none; }   /* tap PERF to fold it away */
.p3panel .p3row { display:flex; flex-wrap:wrap; gap:3px; align-items:center; margin-bottom:3px; }
.p3panel button { min-height:28px; margin:0; padding:2px 7px; font:700 10px/1 var(--mono); }
.p3panel pre { margin:2px 0 0; white-space:pre-wrap; word-break:break-word; max-height:40vh; overflow:auto; font:inherit; }
.p3panel textarea { display:none; width:100%; height:110px; margin-top:4px; font:inherit; }