/* The approved artwork is one scene; overlays share its coordinate system. */
.map-page{margin:0;background:#161326;overflow:hidden;color:#fff1d7;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.map-header{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;background:linear-gradient(#171126bb,transparent);pointer-events:none}
.map-header a,.map-header button{pointer-events:auto}
.map-brand{display:flex;align-items:center;gap:0;font:700 30px 'Space Grotesk',sans-serif;color:#fff4dd;text-decoration:none;text-shadow:0 2px 8px #201422}
.map-brand>span{color:#f2aa6a}.map-brand small{font:10px ui-monospace,monospace;letter-spacing:3px;margin-left:20px;color:#ffe0b6}
.map-controls{display:flex;gap:10px;align-items:center}
.map-controls button{min-height:40px;border:1px solid #ebc1a54d;background:#201a31cc;border-radius:5px;padding:8px 12px;color:#ffe0be;font:11px ui-monospace,monospace}
.map-controls .sound-toggle{display:flex;gap:8px;align-items:center}
.neighborhood{height:100dvh;display:flex;align-items:center;position:relative;background:radial-gradient(ellipse at center,#4a2b4f,#161326 80%)}
.map-scroll{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#bc7965 #231d32;overscroll-behavior-x:contain}
.map-stage{position:relative;width:100%;max-width:calc(100dvh * 1672 / 941);aspect-ratio:1672/941;margin:auto;isolation:isolate;overflow:hidden}
.map-background{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.shop-marker{position:absolute;top:48%;transform:translate(-50%,-100%);display:flex;gap:8px;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;background:#221a2eee;border:1px solid #ffc784a6;border-radius:3px;color:#ffe6b6;box-shadow:0 4px 0 #17111dcc,0 7px 22px #110e2490;font:600 clamp(9px,1vw,14px) ui-monospace,monospace;white-space:nowrap;transition:background .18s,box-shadow .18s}
.shop-marker:after{content:'';position:absolute;top:100%;left:50%;height:17px;border-left:1px solid #ffcf85}
.shop-marker span{color:#bb8d70;font-size:9px}.shop-marker i{font-style:normal;color:#ffbe76}
.shop-marker:hover,.shop-marker:focus-visible{background:#654252;box-shadow:0 4px 0 #17111dcc,0 0 25px #ffb56555}
.portfolio-shop{left:37%;top:47%}.contact-shop{left:83%;top:30%}.about-shop{left:68%;top:48%}.services-shop{left:20%;top:24%}
.boat-lane{position:absolute;left:0;right:0;top:83.5%;height:13%;pointer-events:none}
.boat-traveler{position:absolute;left:0;bottom:0;width:24%;animation:boat-crossing 36s ease-in-out infinite alternate;will-change:transform}
.boat-play{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:#382033;pointer-events:auto;animation:boat-bob 3s ease-in-out infinite;filter:drop-shadow(0 7px 4px #150e2655)}
.boat-art{display:block;width:100%;height:auto;pointer-events:none}
/* Flipping the SVG creates a stacking context; keep the action sign above it in both directions. */
.boat-sign{position:absolute;z-index:2;left:50%;top:59%;transform:translateX(-50%);width:34%;min-width:54px;min-height:0;display:flex;align-items:center;justify-content:center;gap:4px;background:#ffe0a0;border:2px solid #73475b;box-shadow:inset 0 0 0 2px #efad63,0 2px 0 #2b2335;font:bold clamp(8px,.85vw,14px)/1.35 ui-monospace,monospace;letter-spacing:1px;white-space:nowrap}
.boat-sign span{font-size:.8em}.boat-play:hover .boat-sign,.boat-play:focus-visible .boat-sign{background:#fff2c6;box-shadow:inset 0 0 0 2px #efad63,0 0 22px #ffcf7b99}
.boat-traveler:has(:hover),.boat-traveler:has(:focus-visible),.motion-paused .boat-traveler,.dialog-active .boat-traveler{animation-play-state:paused}
.motion-paused .boat-play,.dialog-active .boat-play{animation-play-state:paused}
@keyframes boat-crossing{from{transform:translateX(0)}to{transform:translateX(316.666667%)}}
/* Start in view rather than making visitors wait for the first pass. */
.boat-traveler{animation-delay:-15s}
@keyframes boat-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.map-caption{position:absolute;left:32px;bottom:22px;padding:10px 14px;background:#1d1729d9;border:1px solid #e4b19330;border-radius:4px;font-size:11px;letter-spacing:.3px;pointer-events:none}
.map-caption small{display:block;color:#c1a4b8;font-size:9px;margin:5px 0 0 12px}.map-status-dot{display:inline-block;width:5px;height:5px;background:#ffc27c;margin-right:8px;box-shadow:0 0 8px #ffc27c}
.mobile-hint{display:none}.map-page .ako-launcher{right:26px;bottom:25px;min-height:44px;background:#241c34ed;border:1px solid #e2b58666;border-radius:5px;color:#ffdfb0;padding:10px 16px;box-shadow:0 5px 25px #130c2444}.map-page .ai-badge{color:#eaca9c;border-color:#eaca9c66}.map-page .chat-spark{display:none}.map-page .ako-panel{z-index:15}.map-page dialog{font-family:ui-monospace,monospace;background:#251f33;border-color:#a87568}.map-page dialog h2{font-size:26px;letter-spacing:-.5px;color:#ffe0b0}.map-page dialog .eyebrow{color:#f3b777}.map-page :focus-visible{outline:3px solid #ffe3a8;outline-offset:5px}
@media(max-width:700px) and (orientation:portrait){.map-stage{width:100%;max-width:none;margin:0}.map-header{padding:20px 18px}.map-brand small{font-size:8px;letter-spacing:1px;margin-left:12px}.map-controls{gap:5px}.map-controls button{font-size:10px;padding:7px 9px}.map-controls .sound-label{display:none}.map-caption{left:18px;bottom:85px;font-size:10px}.mobile-hint{display:block;margin-top:8px;color:#ffd29d}.map-page .ako-launcher{right:18px;bottom:23px}.shop-marker{font-size:11px;min-height:44px}.boat-sign{font-size:9px}}
@media(max-height:500px){.map-header{padding:10px 18px}.map-brand small{display:none}.map-caption{left:15px;bottom:10px;font-size:9px;padding:6px 9px}.map-caption small{display:none}.map-page .ako-launcher{bottom:10px;right:15px;min-height:36px}.shop-marker{min-height:30px;padding:5px 7px;font-size:9px;gap:4px}.shop-marker span{display:none}.boat-sign{min-height:0;font-size:8px}.map-page .ako-panel{bottom:58px;max-height:calc(100svh - 70px)}}
@media(prefers-reduced-motion:reduce){.boat-traveler{animation:none;left:40%;transform:none}.boat-play{animation:none}}

/* Pixel-art identity, drawn on an integer grid. */
.map-brand .pixel-badge{width:32px;height:32px;margin-right:12px;image-rendering:pixelated;flex-shrink:0}
.map-brand .pixel-name{display:block;width:100px;height:32px;color:#fff4dd;filter:drop-shadow(0 3px 0 #382741);flex-shrink:0}
.map-brand:hover .pixel-name{color:#d7f58d}
@media(max-width:560px){.map-brand .pixel-badge{width:24px;height:24px;margin-right:8px}.map-brand .pixel-name{width:75px;height:24px}}

/* Whole-store links sample the same scene, so roofs, windows and displays light together. */
.shop-signs{display:contents}
.shop-sign{position:absolute;display:block;z-index:3;cursor:pointer;isolation:isolate;background-repeat:no-repeat}
.shop-sign::before{content:'';position:absolute;inset:0;background-image:url('/assets/neighborhood-map.png');background-size:inherit;background-position:inherit;background-repeat:no-repeat;image-rendering:auto;filter:brightness(1.10);opacity:0;transition:opacity .24s ease;pointer-events:none}
.shop-sign:hover::before,.shop-sign:focus-visible::before{opacity:1}
.shop-sign:focus-visible{outline:3px solid #fff0b5;outline-offset:3px}
.shop-sign:focus-visible::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 3px #fff0b5;pointer-events:none}
.portfolio-sign{left:25.2%;top:47.1%;width:24.3%;height:21.1%;background-size:411.5226337% 473.9336493%;background-position:33.2892999% 59.6958175%;clip-path:polygon(0 0,97% 0,100% 7%,100% 100%,0 100%)}
.about-sign{left:57.6%;top:49.3%;width:22.9%;height:19.0%;background-size:436.6812227% 526.3157895%;background-position:74.7081712% 60.8641975%;clip-path:polygon(3% 0,98% 0,100% 100%,0 100%,0 9%)}
.services-sign{left:11.2%;top:24.1%;width:18.2%;height:17.1%;background-size:549.4505495% 584.7953216%;background-position:13.6919315% 29.0711701%;clip-path:polygon(10% 0,87% 0,100% 22%,94% 100%,0 100%,0 20%)}
.contact-sign{left:71.1%;top:29.6%;width:24.9%;height:15.4%;background-size:401.6064257% 649.3506494%;background-position:94.6737683% 34.9881797%;clip-path:polygon(23% 0,91% 0,100% 15%,98% 100%,0 100%,0 68%,22% 68%)}
@media(prefers-reduced-motion:reduce){.shop-sign::before{transition:none}}

/* Optional authoring overlay: /?routes. Uses the same coordinates as future collisions. */
.route-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

/* Decorative NPCs never intercept storefront navigation. */
.npc-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;image-rendering:auto}
/* Illustrated cast shares map coordinates and never intercepts navigation. */
.scene-cast{position:absolute;inset:0;pointer-events:none;z-index:4;image-rendering:auto}
.cast-character{position:absolute;transform:translate(-50%,-100%);pointer-events:none}
.cast-character svg{display:block;width:100%;height:100%;overflow:visible}

/* Keep the physical deck still whenever the combat simulation is paused. */
.fight-frozen .boat-traveler,.fight-frozen .boat-play{animation-play-state:paused}

/* Bow faces the travel direction; the PLAY label stays readable. */
.boat-facing-left .boat-art{transform:scaleX(-1)}
.boat-smoke{position:absolute;left:19%;top:2%;width:1px;height:1px;pointer-events:none;z-index:1}
.boat-facing-left .boat-smoke{left:81%;transform:scaleX(-1)}
.boat-smoke i{position:absolute;left:0;bottom:0;width:12px;height:10px;background:#e9e4dc;border-radius:45%;box-shadow:3px 2px 0 #a9a5b4;opacity:0;animation:chimney-puff 3.2s linear infinite}
.boat-smoke i:nth-child(2){animation-delay:-.8s}.boat-smoke i:nth-child(3){animation-delay:-1.6s}.boat-smoke i:nth-child(4){animation-delay:-2.4s}
@keyframes chimney-puff{0%{transform:translate(0,0) scale(.45);opacity:0}12%{opacity:.85}75%{opacity:.45}100%{transform:translate(-30px,-55px) scale(1.9);opacity:0}}
.motion-paused .boat-smoke i,.dialog-active .boat-smoke i,.fight-frozen .boat-smoke i,.boat-traveler:has(:hover) .boat-smoke i,.boat-traveler:has(:focus-visible) .boat-smoke i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.boat-smoke i{animation:none}.boat-smoke i:first-child{opacity:.5;transform:translate(-5px,-12px)}}

/* Secret wardrobe target follows the lantern when the ferry turns. */
.boat-lantern{position:absolute;left:89%;top:33%;translate:-50% -50%;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;cursor:pointer;animation:boat-bob 3s ease-in-out infinite}
.boat-facing-left .boat-lantern{left:11%}
.boat-lantern:hover,.boat-lantern:focus-visible{background:#ffe6a83a;box-shadow:0 0 15px #ffd58988}
.motion-paused .boat-lantern,.dialog-active .boat-lantern,.fight-frozen .boat-lantern{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.boat-lantern{animation:none}}
.skin-picker{position:fixed;inset:0;margin:auto;width:min(480px,calc(100vw - 40px));max-height:calc(100svh - 40px);box-sizing:border-box;overflow:auto;padding:26px;border:2px solid #be906a;border-radius:8px;color:#ffe5bb;box-shadow:0 20px 80px #0008}
.skin-picker::backdrop{background:#100b1bba}
.skin-picker h2{margin:6px 0 10px}.skin-picker p{font-size:12px;line-height:1.6}
.skin-close{position:absolute;right:10px;top:8px;background:none;border:0;color:#ffe5bb;font-size:26px;width:36px;height:36px;cursor:pointer}
.skin-preview{display:block;width:240px;max-width:100%;height:auto;margin:12px auto;background:linear-gradient(#312a43 85%,#52404c 85% 88%,#261f34 88%);image-rendering:pixelated;border-radius:4px}
.skin-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.skin-options fieldset{min-width:0;margin:0;padding:10px;border:1px solid #866477}.skin-options legend{font-size:12px;padding:0 5px}
.skin-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 6px;min-height:44px;margin:4px 0;border:1px solid #6f566c;background:#31283f;color:#e8d4bd;text-align:left;font:11px ui-monospace,monospace;cursor:pointer}
.skin-option[aria-pressed=true]{border-color:#ffdb92;background:#5d4255;color:#fff0cb;box-shadow:inset 3px 0 #ffdb92}
.skin-swatch{display:block;width:24px;height:24px;flex-shrink:0;box-shadow:0 2px #161322}
.skin-done{width:100%;padding:12px;border:1px solid #e1b782;background:#e1b782;color:#2d2239;font:12px ui-monospace,monospace;cursor:pointer}.skin-status{min-height:20px}
@media(max-width:380px){.skin-picker{padding:20px 14px}.skin-options{gap:6px}.skin-options fieldset{padding:5px}.skin-option{font-size:10px;gap:5px}}

/* Rick's flying saucer is the character selector in the neighborhood sky. */
.character-spaceship{position:absolute;z-index:4;top:3%;left:50%;width:clamp(72px,15vw,220px);padding:0;border:0;background:none;color:#fff1d7;cursor:pointer;translate:-50% 0;animation:spaceship-cruise 14s ease-in-out infinite alternate,spaceship-hover 3.6s ease-in-out infinite;filter:drop-shadow(0 8px 9px #18162b88)}
.character-spaceship img{display:block;width:100%;height:auto}
.character-spaceship span{display:inline-block;padding:6px 10px;border:1px solid #a7d6b4;border-radius:4px;background:#17292ee8;font:700 11px/1.3 ui-monospace,monospace;white-space:nowrap}
.character-spaceship:hover span,.character-spaceship:focus-visible span{background:#315344;color:#e4ffbb}
.character-spaceship:focus-visible{outline:2px solid #d7f58d;outline-offset:5px;border-radius:15px}
@keyframes spaceship-hover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.motion-paused .character-spaceship,.dialog-active .character-spaceship,.fight-frozen .character-spaceship{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.character-spaceship{animation:none}}

/* Keep the entire neighborhood visible, including on portrait phones. */
.map-scroll{overflow:hidden}
.portrait-shops{display:none}
@media(orientation:portrait){
  .map-stage{width:100%;max-width:none}
  .map-scroll{overflow:visible}
  .portrait-shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 18px 0;font:12px ui-monospace,monospace}
  .portrait-shops a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px;border:1px solid #bc8a6880;border-radius:5px;background:#241c34ed;color:#ffe0b0}
  .portrait-shops a:hover{background:#654252}
  .map-brand small{display:none}
  .character-spaceship{top:0}
  .character-spaceship span{font-size:8px;padding:3px 5px}
  .map-caption{bottom:85px}
}
@keyframes spaceship-cruise{from{left:34%}to{left:65%}}
.character-spaceship:hover,.character-spaceship:focus-visible{animation-play-state:paused}
@media(max-width:700px) and (orientation:portrait){#map-fullscreen{display:none}}

@media(orientation:portrait) and (max-height:700px){.map-caption{display:none}}

/* Fill landscape displays with the complete scene, including ultrawide screens. */
@media(orientation:landscape){
  .map-scroll{height:100%}
  .map-stage{width:100%;max-width:none;height:100%;aspect-ratio:auto;margin:0}
  .map-background{object-fit:fill}
}

.boat-play.is-rematch .boat-sign{width:74%;min-width:80px;gap:2px;font-size:clamp(8px,.75vw,12px);letter-spacing:0}

/* Keep the downloadable résumé in the global header, including on phones. */
.map-controls .resume-link{display:inline-flex;align-items:center;min-height:40px;border:1px solid #ebc1a54d;background:#201a31cc;border-radius:5px;padding:8px 12px;color:#ffe0be;font:11px ui-monospace,monospace;text-decoration:none;white-space:nowrap}
.map-controls .resume-link:hover{background:#392c45}
.map-controls .resume-link:focus-visible{outline:3px solid #efb865;outline-offset:3px}
@media(max-width:700px){.map-header .map-brand small{display:none}.map-controls .resume-link{padding:7px 9px;font-size:10px}}

/* A recognizable street-food cart doubles as the in-world résumé pickup. */
.resume-cart{position:absolute;left:13.5%;bottom:31.5%;width:9%;z-index:4;display:block;text-decoration:none;cursor:pointer;filter:drop-shadow(0 5px 3px #17112688)}
.resume-cart>img{display:block;width:100%;height:auto;image-rendering:auto;transition:filter .2s,transform .2s;transform-origin:bottom center}
.resume-cart>img{animation:vendor-idle 3s ease-in-out infinite}
.vendor-shout{position:absolute;left:65%;bottom:101%;white-space:nowrap;pointer-events:none;background:#21172eee;border:1.5px solid #ffe2a8;color:#ffe2a8;padding:4px 7px;font:bold clamp(9px,.85vw,14px)/1.2 ui-monospace,monospace;transform:translateX(-50%);animation:vendor-call 3.6s ease-in-out infinite}
.vendor-shout::after{content:'';position:absolute;top:100%;left:50%;border:5px solid transparent;border-top-color:#ffe2a8}
.resume-cart.is-startled>img{animation:vendor-startle .2s ease-in-out infinite}
.resume-cart.is-startled .vendor-shout{animation:none}
@keyframes vendor-idle{0%,100%{rotate:-.4deg}50%{rotate:.4deg}}
@keyframes vendor-call{0%,72%,100%{opacity:1;translate:0 0}80%,94%{opacity:0;translate:0 -3px}}
@keyframes vendor-startle{0%,100%{translate:-2px 0}50%{translate:2px -2px}}
.motion-paused .resume-cart>img,.motion-paused .vendor-shout,.dialog-active .resume-cart>img,.dialog-active .vendor-shout{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.resume-cart>img,.vendor-shout,.resume-cart.is-startled>img{animation:none}}
.resume-cart:hover>img,.resume-cart:focus-visible>img{filter:brightness(1.12);transform:scale(1.035)}
.resume-cart:focus-visible{outline:3px solid #ffe3a8;outline-offset:4px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.resume-cart>img{transition:none}.resume-cart:hover>img,.resume-cart:focus-visible>img{transform:none}}

.character-sizes{position:fixed;z-index:16;right:18px;top:84px;width:min(330px,calc(100vw - 36px));max-height:calc(100dvh - 110px);overflow:auto;padding:16px;background:#211a2cf5;border:1px solid #d7af79;border-radius:8px;box-shadow:0 8px 30px #0008;font:12px/1.4 system-ui;color:#fff1d7}
.character-sizes h2{font-size:16px;margin:0 0 10px}.character-sizes label{display:grid;grid-template-columns:110px 1fr 40px;gap:8px;align-items:center;margin:12px 0}.character-sizes input{width:100%;accent-color:#ffd18d}.character-sizes button{padding:6px 9px;margin:0 5px 5px 0;border:1px solid #987957;border-radius:4px}.character-sizes textarea{width:100%;height:85px;margin-top:10px;background:#15101e;color:#eee;border:1px solid #715a7e;font:10px monospace}.map-controls{flex-wrap:wrap;justify-content:flex-end}

.character-sizes .scene-edit-field{grid-template-columns:1fr 110px}.scene-edit-field input,.character-sizes select{background:#15101e;color:#fff1d7;border:1px solid #987957;padding:5px;border-radius:3px}.character-sizes select{width:100%;margin-bottom:8px}.character-sizes h2:not(:first-child){margin-top:20px}

/* Scale the restaurant separately from its original-size raster lettering. */
.services-sign{transform-origin:50% 100%}
.services-sign::before{background-image:url('/assets/services-blank-sign.png');opacity:1;filter:none}
.services-sign:hover::before,.services-sign:focus-visible::before{filter:brightness(1.1)}
.services-lettering{position:absolute;left:19.72%;top:25.47%;width:55.92%;height:19.87%;background-image:url('/assets/neighborhood-map.png');background-size:983.5294% 2940.625%;background-position:16.4447% 29.48295%;transform:scale(var(--services-label-scale,1));transform-origin:center;pointer-events:none}