/* ════════════════════════════════════════════════════════════════
   PATHFINDER TOUR — "Walk the Decks" overlay
   Uses the page's :root design tokens (--void, --gold, --bone, …).
   ════════════════════════════════════════════════════════════════ */

/* ── launch CTA on the scroll page ── */
.walk-cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:28px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  border:1px solid var(--gold); padding:14px 22px;
  background:rgba(232,200,117,0.06);
  transition:background 200ms, color 200ms;
}
.walk-cta:hover{ background:rgba(232,200,117,0.14); }
.walk-cta .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:pf-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes pf-cta-pulse{ 0%,100%{opacity:0.35;} 50%{opacity:1;} }

/* ── overlay shell ── */
#pf-tour{
  position:fixed; inset:0; z-index:1000;
  background:var(--void);
  font-family:var(--sans);
  opacity:0; transition:opacity 400ms ease;
}
#pf-tour.pf-open{ opacity:1; }
body.pf-lock{ overflow:hidden; }

/* ── stage: two stacked image layers ── */
.pf-stage{ position:absolute; inset:0; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
.pf-stage img{ -webkit-user-drag:none; user-drag:none; }
.pf-layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity 600ms ease;
  /* the hidden layer must never intercept clicks or hover meant for
     the visible one (it sits on top in DOM order half the time) */
  pointer-events:none;
}
.pf-layer.pf-active{ opacity:1; pointer-events:auto; }
/* stale hotspots on the hidden layer must not be tabbable/clickable */
.pf-layer:not(.pf-active) .pf-hs{ visibility:hidden; }
.pf-layer img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform-origin:center;
}

/* Ken Burns variants — slow drift, stable per room.
   The hotspot wrapper gets the same animation so dots stay glued
   to the drifting image. */
.kb-a img, .kb-a .pf-hs-wrap{ animation:kb-a 38s ease-in-out infinite alternate; }
.kb-b img, .kb-b .pf-hs-wrap{ animation:kb-b 38s ease-in-out infinite alternate; }
.kb-c img, .kb-c .pf-hs-wrap{ animation:kb-c 38s ease-in-out infinite alternate; }
.kb-d img, .kb-d .pf-hs-wrap{ animation:kb-d 38s ease-in-out infinite alternate; }
@keyframes kb-a{ from{transform:scale(1.05) translate(0,0);}        to{transform:scale(1.12) translate(-1.5%,0.8%);} }
@keyframes kb-b{ from{transform:scale(1.06) translate(1%,0.5%);}    to{transform:scale(1.12) translate(-0.8%,-0.8%);} }
@keyframes kb-c{ from{transform:scale(1.05) translate(-1%,0.6%);}   to{transform:scale(1.11) translate(1.2%,-0.5%);} }
@keyframes kb-d{ from{transform:scale(1.07) translate(0.5%,-0.8%);} to{transform:scale(1.12) translate(-1%,1%);} }

/* ── in-picture hotspots ── */
.pf-hs-wrap{ position:absolute; inset:0; pointer-events:none; transform-origin:center; }
.pf-hs{
  position:absolute; transform:translate(-50%,-50%);
  background:none; border:none; padding:0; cursor:pointer;
  pointer-events:auto;
}
.pf-hs .pf-hs-dot{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--gold); background:rgba(10,7,16,0.45);
  box-shadow:0 0 14px rgba(232,200,117,0.35);
  color:var(--gold); font-family:var(--mono); font-size:11px; line-height:1;
  transition:background 200ms, transform 200ms;
  animation:pf-hs-pulse 2.6s ease-in-out infinite;
}
.pf-hs:hover .pf-hs-dot, .pf-hs:focus-visible .pf-hs-dot{
  background:rgba(232,200,117,0.25); transform:scale(1.15); animation:none;
}
@keyframes pf-hs-pulse{
  0%,100%{ box-shadow:0 0 10px rgba(232,200,117,0.25); }
  50%{ box-shadow:0 0 18px rgba(232,200,117,0.55); }
}
/* floor "walk here" arrows — wider, Google-Street-View-ish chevron */
.pf-hs.pf-hs-move .pf-hs-dot{
  width:40px; height:24px; border-radius:12px;
  font-size:14px; letter-spacing:0;
}
.pf-hs-label{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bone); background:rgba(10,7,16,0.78); border:1px solid var(--gold-soft);
  padding:6px 11px; opacity:0; transition:opacity 200ms; pointer-events:none;
}
.pf-hs:hover .pf-hs-label, .pf-hs:focus-visible .pf-hs-label, .pf-hs.pf-hs-active .pf-hs-label{ opacity:1; }

/* ── POI zoom viewer ── */
.pf-zoom{
  position:absolute; inset:0; z-index:70;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  background:rgba(10,7,16,0.88); padding:5vmin;
}
.pf-zoom.pf-show{ display:flex; }
.pf-zoom img{
  max-width:88vw; max-height:68vh; display:block;
  border:1px solid var(--bone-4); background:var(--surface);
}
.pf-zoom figcaption{
  max-width:60ch; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.6;
  color:var(--bone-2);
}
.pf-zoom .pf-zoom-close{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bone-2); background:none; border:1px solid var(--bone-4);
  min-height:44px; padding:0 18px; cursor:pointer; transition:color 160ms, border-color 160ms;
}
.pf-zoom .pf-zoom-close:hover{ color:var(--gold); border-color:var(--gold); }

/* ── full ship plan: 30-level wayfinding kiosk (click the mini-map) ── */
.pf-plan{
  position:absolute; inset:0; z-index:65;
  display:none; flex-direction:column; align-items:center;
  background:rgba(10,7,16,0.96); padding:clamp(14px,3vh,32px) clamp(12px,3vw,36px);
}
.pf-plan.pf-show{ display:flex; }
.pf-plan-head{
  width:100%; max-width:900px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.pf-plan-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(17px,2vw,23px);
  color:var(--bone); margin:0 auto 0 0; white-space:nowrap;
}
.pf-plan-search{ position:relative; flex:1 1 220px; max-width:340px; }
.pf-plan-search input{
  width:100%; box-sizing:border-box;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  color:var(--bone); background:rgba(232,221,215,0.05);
  border:1px solid var(--bone-4); padding:11px 14px; outline:none;
  transition:border-color 160ms;
}
.pf-plan-search input::placeholder{ color:var(--bone-3); }
.pf-plan-search input:focus{ border-color:var(--gold-soft); }
.pf-plan-results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5;
  background:var(--dusk); border:1px solid var(--bone-4);
  max-height:260px; overflow-y:auto; display:none;
}
.pf-plan-results.pf-show{ display:block; }
.pf-result{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--bone-4);
  padding:10px 13px; cursor:pointer;
}
.pf-result:last-child{ border-bottom:none; }
.pf-result:hover{ background:rgba(232,200,117,0.08); }
.pf-result .pf-result-name{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--bone);
}
.pf-result .pf-result-name .pf-walkable{ color:var(--gold); }
.pf-result .pf-result-deck{
  font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-3);
}
.pf-plan-close{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--bone-2); background:none; border:1px solid var(--bone-4);
  min-height:40px; padding:0 12px; cursor:pointer; transition:color 160ms, border-color 160ms;
}
.pf-plan-close:hover{ color:var(--gold); border-color:var(--gold); }

.pf-plan-main{
  width:100%; max-width:900px; flex:1; min-height:0;
  display:flex; gap:14px; align-items:stretch;
}
.pf-plan-rail{
  display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex-shrink:0;
  padding-right:6px; scrollbar-width:thin;
}
.pf-deck-btn{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  color:var(--bone-3); background:none; border:1px solid transparent;
  min-width:46px; min-height:26px; padding:2px 8px; cursor:pointer; position:relative;
  text-align:left; transition:color 140ms, border-color 140ms;
}
.pf-deck-btn:hover{ color:var(--bone); border-color:var(--bone-4); }
.pf-deck-btn.pf-on{ color:var(--gold); border-color:var(--gold-soft); background:rgba(232,200,117,0.07); }
.pf-deck-btn .pf-live-dot{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--gold); margin-left:6px; vertical-align:2px;
}
.pf-plan-body{ flex:1; min-width:0; min-height:0; display:flex; align-items:stretch; position:relative; }
.pf-plan-body svg{ width:100%; height:100%; display:block; cursor:grab; }
.pf-plan-body svg:active{ cursor:grabbing; }

.pf-plan-hull{ stroke:var(--gold); stroke-opacity:0.3; fill:none; stroke-width:1.6; }
.pf-plan-wall{ stroke:rgba(232,221,215,0.35); stroke-width:1; fill:none; }
.pf-corridor-fill{ fill:rgba(232,221,215,0.06); stroke:rgba(232,221,215,0.16); stroke-width:0.4; }
.pf-corridor-ring{ fill:none; stroke:rgba(232,221,215,0.16); stroke-width:4; }
.pf-corridor-label{
  font-family:"JetBrains Mono",monospace; letter-spacing:0.3em;
  fill:rgba(232,221,215,0.22); pointer-events:none;
}
/* unnamed compartments: walls only, fainter than named rooms */
.pf-comp .pf-room-shape{ fill:rgba(232,221,215,0.02); stroke:rgba(232,221,215,0.28); stroke-width:0.7; }

/* ship locator — where this deck sits in the 6 km hull */
.pf-plan-locator{
  position:absolute; top:8px; left:8px; z-index:3;
  width:220px; padding:7px 9px 5px;
  background:rgba(10,7,16,0.78); border:1px solid var(--bone-4);
  pointer-events:none;
}
.pf-plan-locator svg{ width:100%; height:auto; display:block; cursor:default; }
.pf-loc-stage{ position:relative; width:100%; line-height:0; }
.pf-loc-img{ width:100%; height:auto; display:block; }
/* the drawn silhouette is only a fallback — shown solely when the real
   ship picture fails to load (.pf-loc-noimg). Scoped under .pf-plan-locator
   so it outranks the generic `.pf-plan-locator svg { display:block }` rule. */
.pf-plan-locator .pf-loc-fallback{ display:none; }
.pf-loc-noimg .pf-loc-img{ display:none; }
.pf-loc-noimg .pf-loc-hl{ display:none; }
.pf-loc-noimg .pf-loc-fallback{ display:block; }
/* the lit section over the real ship image */
.pf-loc-hl{
  position:absolute; top:0; bottom:0;
  background:rgba(232,200,117,0.26);
  border-left:1px solid var(--gold); border-right:1px solid var(--gold);
  box-shadow:0 0 8px rgba(232,200,117,0.4) inset;
}
.pf-loc-hull{ stroke:rgba(232,221,215,0.3); stroke-width:1.2; fill:none; }
.pf-loc-region{ fill:rgba(232,200,117,0.3); stroke:var(--gold); stroke-width:1.2; stroke-opacity:0.55; }
.pf-loc-label{
  display:block; margin-top:4px;
  font-family:"JetBrains Mono",monospace; font-size:7.5px; letter-spacing:0.1em;
  color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* rooms: hull-following polygons on the spine, annular sectors on
   the ring — drawn like a naval architect's plan */
.pf-space .pf-room-shape{
  fill:rgba(232,221,215,0.03); stroke:rgba(232,221,215,0.45); stroke-width:1;
}
.pf-room-div{ stroke:rgba(232,221,215,0.16); stroke-width:0.6; fill:none; }
/* small-room labels are hidden until zoomed in (revealLabels shows them) */
.pf-label-zoom{ display:none; }
.pf-space text{
  font-family:"JetBrains Mono",monospace; letter-spacing:0.04em;
  fill:var(--bone-2); text-anchor:middle; pointer-events:none;
}
.pf-space-icon{
  stroke:rgba(232,221,215,0.5); fill:none;
  stroke-width:0.9; stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;
}
.pf-door-gap{ stroke:#0A0710; stroke-width:2.4; fill:none; }
.pf-door-swing{ stroke:rgba(232,221,215,0.35); stroke-width:0.7; fill:none; }
.pf-lift-box{
  fill:rgba(232,200,117,0.12); stroke:var(--gold); stroke-opacity:0.5; stroke-width:0.8;
}

.pf-space-live{ cursor:pointer; }
.pf-space-live:focus{ outline:none; }
.pf-space-live:focus-visible .pf-room-shape{ stroke:var(--gold); stroke-opacity:1; stroke-width:2; }
.pf-space-live .pf-room-shape{
  fill:rgba(232,200,117,0.10); stroke:var(--gold); stroke-opacity:0.7;
  transition:fill 160ms, stroke-opacity 160ms;
}
.pf-space-live:hover .pf-room-shape{
  fill:rgba(232,200,117,0.22); stroke-opacity:1;
}
.pf-space-live text{ fill:var(--bone); }
.pf-space-live .pf-space-icon{ stroke:var(--gold); stroke-opacity:0.8; }
.pf-space-here .pf-room-shape{
  fill:rgba(232,200,117,0.26); stroke:var(--gold); stroke-opacity:1;
  animation:pf-here 2.4s ease-in-out infinite;
}
.pf-space-here text{ fill:var(--gold); }
@keyframes pf-here{
  0%,100%{ stroke-width:1; } 50%{ stroke-width:2.5; }
}
.pf-space.pf-flash .pf-room-shape{
  animation:pf-flash 0.65s ease-in-out 4;
}
@keyframes pf-flash{
  0%,100%{ fill:rgba(232,221,215,0.03); }
  50%{ fill:rgba(232,200,117,0.4); }
}

/* zoom controls, floating over the plan */
.pf-plan-zoom{
  position:absolute; right:10px; bottom:10px;
  display:flex; flex-direction:column; gap:4px;
}
.pf-plan-zoom button{
  width:34px; height:34px;
  font-family:var(--mono); font-size:15px; line-height:1;
  color:var(--bone-2); background:rgba(10,7,16,0.8); border:1px solid var(--bone-4);
  cursor:pointer; transition:color 140ms, border-color 140ms;
}
.pf-plan-zoom button:hover{ color:var(--gold); border-color:var(--gold-soft); }
.pf-plan-note{
  width:100%; max-width:900px;
  font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--bone-3); margin-top:10px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-map svg{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  .pf-space-here .pf-room-shape{ animation:none; stroke-width:2; }
  .pf-space.pf-flash .pf-room-shape{ animation:none; fill:rgba(232,200,117,0.3); }
}

@media (max-width: 640px){
  .pf-plan-main{ flex-direction:column; }
  .pf-plan-rail{
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
    padding-right:0; padding-bottom:6px;
  }
  .pf-deck-btn{ min-width:40px; text-align:center; flex-shrink:0; }
  .pf-plan-title{ display:none; }
}

/* ── reader (books, letters, logs) ── */
.pf-reader{
  position:absolute; inset:0; z-index:72;
  display:none; align-items:center; justify-content:center;
  background:rgba(10,7,16,0.92); padding:clamp(12px,3vmin,32px);
}
.pf-reader.pf-show{ display:flex; }
.pf-reader-card{
  width:min(720px, 94vw); max-height:88vh; display:flex; flex-direction:column;
  background:var(--dusk); border:1px solid var(--bone-4);
}
.pf-reader-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:18px 26px 14px; border-bottom:1px solid var(--bone-4);
}
.pf-reader-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(18px,2vw,24px);
  color:var(--bone); margin:0;
}
.pf-reader-close{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bone-2); background:none; border:1px solid var(--bone-4);
  min-height:38px; padding:0 12px; cursor:pointer; flex-shrink:0;
  transition:color 160ms, border-color 160ms;
}
.pf-reader-close:hover{ color:var(--gold); border-color:var(--gold); }
.pf-reader-body{
  overflow-y:auto; padding:24px 28px 36px;
  font-family:var(--serif); font-size:16.5px; line-height:1.75; color:var(--bone-2);
}
.pf-reader-body h1, .pf-reader-body h2, .pf-reader-body h3{
  font-family:var(--serif); font-weight:500; color:var(--bone); line-height:1.2;
}
.pf-reader-body p{ margin:0 0 1em; }
.pf-reader-body em{ color:var(--bone); }
.pf-reader-body hr{ border:none; border-top:1px solid var(--bone-4); margin:2em auto; width:80px; }

/* ── "drag to look around" hint ── */
.pf-hint{
  position:absolute; top:calc(78px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:40; pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bone-2); background:rgba(10,7,16,0.6); border:1px solid var(--bone-4);
  padding:8px 14px; opacity:0; transition:opacity 600ms;
}
.pf-hint.pf-show{ opacity:1; }

/* panoramic rooms: drift off, dragging on */
.pf-layer.pf-pano img, .pf-layer.pf-pano .pf-hs-wrap{ animation:none !important; transform:none !important; }
.pf-layer.pf-pano{ cursor:grab; }
.pf-layer.pf-pano.pf-grabbing{ cursor:grabbing; }
/* desktop mouse-look: the image glides toward where you point */
.pf-stage.pf-follow .pf-layer.pf-pano{ cursor:default; }
.pf-stage.pf-follow .pf-layer.pf-pano img{ transition:object-position 240ms ease-out; }
@media (prefers-reduced-motion: reduce){
  .pf-stage.pf-follow .pf-layer.pf-pano img{ transition:object-position 90ms linear; }
}

/* ── atmosphere ── */
.pf-tint{
  position:absolute; inset:0; pointer-events:none;
  opacity:0.5; transition:background 1200ms ease;
}
.pf-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 45%, transparent 50%, rgba(10,7,16,0.55) 100%);
}
.pf-grain{
  position:absolute; inset:0; pointer-events:none; opacity:0.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.87  0 0 0 0 0.84  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── door-wipe panels ── */
.pf-door{
  position:absolute; top:0; bottom:0; width:51%;
  background:var(--void); z-index:30;
  transition:transform 450ms cubic-bezier(0.7,0,0.3,1);
  pointer-events:none;
}
.pf-door.pf-door-l{ left:0;  transform:translateX(-101%); border-right:1px solid var(--gold-soft); }
.pf-door.pf-door-r{ right:0; transform:translateX(101%);  border-left:1px solid var(--gold-soft); }
#pf-tour.pf-doors-shut .pf-door-l{ transform:translateX(0); transition-duration:350ms; }
#pf-tour.pf-doors-shut .pf-door-r{ transform:translateX(0); transition-duration:350ms; }

/* ── transition video ── */
.pf-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:25; display:none;
  opacity:1; transition:opacity 500ms ease;
}
.pf-video.pf-show{ display:block; }
.pf-video.pf-fading{ opacity:0; }

/* ── top chrome ── */
.pf-top{
  position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:calc(18px + env(safe-area-inset-top)) clamp(18px,3vw,32px) 14px;
  background:linear-gradient(180deg, rgba(10,7,16,0.6) 0%, transparent 100%);
}
.pf-stamp-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bone-2); border:1px solid var(--bone-4); padding:6px 10px;
  background:rgba(10,7,16,0.55);
}
.pf-angle-ctl{
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--bone-3); background:none; border:1px solid var(--bone-4);
  padding:6px 10px; cursor:pointer; transition:color 160ms, border-color 160ms;
  display:none;
}
.pf-angle-ctl.pf-show{ display:inline-block; }
.pf-angle-ctl:hover{ color:var(--gold); border-color:var(--gold-soft); }
.pf-spacer{ flex:1; }
.pf-logchip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.pf-logchip .pf-done{ color:var(--gold); }
.pf-close{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bone-2); background:none; border:1px solid var(--bone-4);
  min-height:44px; padding:0 16px; cursor:pointer;
  transition:color 160ms, border-color 160ms;
}
.pf-close:hover{ color:var(--gold); border-color:var(--gold); }

/* ── completion line ── */
.pf-complete{
  position:absolute; top:calc(76px + env(safe-area-inset-top)); right:clamp(18px,3vw,32px);
  z-index:40; max-width:340px; text-align:right;
  font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.55;
  color:var(--gold); text-shadow:0 1px 10px rgba(10,7,16,0.8);
  opacity:0; transition:opacity 1200ms ease;
}
.pf-complete.pf-show{ opacity:1; }
.pf-complete a{
  display:inline-block; margin-top:10px;
  font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--bone-2); text-decoration:none;
  border-bottom:1px solid var(--gold-soft); padding-bottom:2px;
}
.pf-complete a:hover{ color:var(--gold); }

/* ── copy panel (bottom-left) ── */
.pf-panel{
  position:absolute; left:clamp(18px,3vw,32px); bottom:clamp(18px,3vh,32px); z-index:40;
  width:min(420px, calc(100vw - 36px));
  background:rgba(10,7,16,0.72); border:1px solid var(--bone-4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform 400ms cubic-bezier(0.3,0,0.2,1);
}
.pf-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:16px 18px; cursor:pointer;
  background:none; border:none; text-align:left; color:inherit;
}
.pf-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:12px;
}
.pf-kicker::before{ content:""; width:20px; height:1px; background:var(--gold); }
.pf-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.2vw,26px);
  line-height:1.1; color:var(--bone); margin:6px 0 0;
}
.pf-fold{
  font-family:var(--mono); font-size:12px; color:var(--bone-3); flex-shrink:0;
  transition:transform 300ms;
}
.pf-panel.pf-collapsed .pf-fold{ transform:rotate(180deg); }
.pf-panel-body{
  padding:0 18px 18px; overflow:hidden;
  max-height:42vh; overflow-y:auto;
}
.pf-panel.pf-collapsed .pf-panel-body{ display:none; }
.pf-copy{
  font-family:var(--sans); font-weight:300; font-size:14px; line-height:1.6;
  color:var(--bone-2); margin:0;
}
.pf-aside{
  margin:12px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:0.03em; line-height:1.7;
  color:var(--bone-3); border-left:1px solid var(--gold-soft); padding-left:14px;
}
.pf-aside em{ font-style:normal; color:var(--bone-2); }

/* crew chips */
.pf-crew{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.pf-crew-label{
  flex-basis:100%;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--bone-3); margin-bottom:-2px;
}
.pf-chip{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; border:1px solid var(--bone-4); padding:5px 12px 5px 5px;
  transition:border-color 160ms, background 160ms;
}
.pf-chip:hover{ border-color:var(--gold-soft); background:rgba(232,200,117,0.06); }
.pf-chip img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.pf-chip .pf-chip-name{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bone);
}
.pf-chip .pf-chip-role{
  font-family:var(--sans); font-weight:300; font-size:11px; color:var(--bone-3); display:block;
}

/* ── exits ── */
.pf-exits{
  position:absolute; left:50%; bottom:clamp(18px,3vh,32px); transform:translateX(-50%);
  z-index:45; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  /* stay clear of the copy panel (left) and the minimap (right) */
  max-width:max(320px, calc(100vw - 780px));
}
.pf-exit{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--bone); background:rgba(10,7,16,0.6); border:1px solid var(--gold-soft);
  min-height:44px; padding:0 18px; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background 200ms, border-color 200ms, color 200ms;
}
.pf-exit:hover{ background:rgba(232,200,117,0.12); border-color:var(--gold); color:var(--gold); }
.pf-exit .pf-arrow{ font-size:13px; color:var(--gold); }

/* ── mini-map (bottom-right) ── */
.pf-map{
  position:absolute; right:clamp(18px,3vw,32px); bottom:clamp(18px,3vh,32px); z-index:40;
  width:240px; padding:14px 16px 12px;
  background:rgba(10,7,16,0.72); border:1px solid var(--bone-4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pf-map svg{ display:block; width:100%; height:auto; }
.pf-map .pf-hull{ stroke:var(--gold); stroke-opacity:0.5; fill:none; stroke-width:1; }
.pf-dot{ cursor:pointer; }
.pf-dot circle.pf-dot-core{
  fill:transparent; stroke:var(--gold); stroke-opacity:0.4; stroke-width:1;
  transition:fill 400ms;
}
.pf-dot.pf-visited circle.pf-dot-core{ fill:rgba(232,200,117,0.35); stroke-opacity:0.6; }
.pf-dot.pf-current circle.pf-dot-core{ fill:var(--gold); stroke-opacity:1; }
.pf-dot circle.pf-halo{
  fill:none; stroke:var(--gold); stroke-width:1; opacity:0;
}
.pf-dot.pf-current circle.pf-halo{ animation:pf-halo 2.2s ease-out infinite; }
@keyframes pf-halo{
  0%{ opacity:0.7; r:4; }
  100%{ opacity:0; r:10; }
}
.pf-dot:hover circle.pf-dot-core{ stroke:var(--gold); stroke-opacity:1; }
.pf-map-caption{
  display:flex; justify-content:space-between; align-items:baseline; margin-top:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--bone-3);
}
.pf-map-caption .pf-reset{
  color:var(--bone-4); background:none; border:none; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit; padding:0;
}
.pf-map-caption .pf-reset:hover{ color:var(--gold); }
.pf-map-btn{ display:none; }
.pf-map-scrim{ display:none; }

/* ── visit stamp fx ── */
.pf-stampfx{
  position:absolute; top:38%; left:50%; z-index:50; pointer-events:none;
  transform:translate(-50%,-50%) rotate(-4deg) scale(1.6);
  font-family:var(--mono); font-size:clamp(13px,1.6vw,17px); letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); border:2px solid var(--gold); padding:12px 20px;
  background:rgba(10,7,16,0.4);
  opacity:0;
}
.pf-stampfx.pf-stamping{ animation:pf-stamp 1.8s ease-out forwards; }
@keyframes pf-stamp{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(-4deg) scale(1.6); }
  14%{ opacity:0.9; transform:translate(-50%,-50%) rotate(-4deg) scale(1); }
  70%{ opacity:0.9; }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(-4deg) scale(1); }
}

/* ════════════════ MOBILE ≤ 640px ════════════════ */
@media (max-width: 640px){

  .pf-top{ gap:10px; padding-left:14px; padding-right:14px; }
  .pf-stamp-label{
    font-size:9px; padding:5px 7px; letter-spacing:0.18em;
    max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pf-logchip{ font-size:9.5px; letter-spacing:0.18em; }
  .pf-close{ padding:0 12px; }

  .pf-complete{ right:14px; left:14px; max-width:none; font-size:13.5px; }

  /* panel becomes a bottom sheet */
  .pf-panel{
    left:0; right:0; bottom:0; width:100%;
    border-left:none; border-right:none; border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pf-panel-body{ max-height:55vh; }

  /* exits sit just above the bottom sheet (height set by the engine) */
  .pf-exits{
    left:0; right:0; transform:none; top:auto;
    bottom:calc(var(--pf-sheet, 80px) + 10px);
    max-width:none; padding:0 10px; gap:8px;
  }
  .pf-exit{ font-size:9.5px; padding:0 12px; letter-spacing:0.14em; }

  /* map hides behind a MAP button (in the exits row) */
  .pf-map{
    display:none;
    position:fixed; left:50%; top:50%; right:auto; bottom:auto;
    transform:translate(-50%,-50%);
    width:min(90vw, 360px); z-index:60;
  }
  .pf-map.pf-show{ display:block; }
  .pf-map-btn{
    display:inline-flex; align-items:center;
    font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold); background:rgba(10,7,16,0.6); border:1px solid var(--gold-soft);
    min-height:44px; padding:0 14px; cursor:pointer;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .pf-map-scrim.pf-show{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(10,7,16,0.6);
  }

  /* gentler drift on small screens */
  @keyframes kb-a{ from{transform:scale(1.04);} to{transform:scale(1.08) translate(-1%,0.5%);} }
  @keyframes kb-b{ from{transform:scale(1.04);} to{transform:scale(1.08) translate(0.8%,-0.5%);} }
  @keyframes kb-c{ from{transform:scale(1.04);} to{transform:scale(1.08) translate(-0.8%,-0.5%);} }
  @keyframes kb-d{ from{transform:scale(1.04);} to{transform:scale(1.08) translate(0.6%,0.6%);} }
}

/* ════════════════ REDUCED MOTION ════════════════ */
@media (prefers-reduced-motion: reduce){
  .kb-a img, .kb-b img, .kb-c img, .kb-d img,
  .kb-a .pf-hs-wrap, .kb-b .pf-hs-wrap, .kb-c .pf-hs-wrap, .kb-d .pf-hs-wrap{
    animation:none; transform:scale(1.04);
  }
  .pf-hs .pf-hs-dot{ animation:none; }
  .pf-door{ transition:none; }
  .pf-layer{ transition:opacity 200ms ease; }
  .pf-dot.pf-current circle.pf-halo{ animation:none; opacity:0.5; }
  .pf-stampfx.pf-stamping{ animation:pf-stamp-rm 1.8s ease-out forwards; }
  @keyframes pf-stamp-rm{
    0%{ opacity:0; transform:translate(-50%,-50%) rotate(-4deg) scale(1); }
    14%{ opacity:0.9; }
    70%{ opacity:0.9; }
    100%{ opacity:0; transform:translate(-50%,-50%) rotate(-4deg) scale(1); }
  }
  .walk-cta .pulse{ animation:none; opacity:0.8; }
}