.map-layout { display: grid; grid-template-columns: 1fr; align-items: start; gap: 28px; }
.map-column { min-width: 0; }
.map-board { position: relative; padding: 13px 15px 12px; border: 1px solid #756049; background: #171514; color: #ddd0bd; box-shadow: 0 25px 55px rgba(53, 42, 30, .2); overflow: hidden; transform-style: preserve-3d; transition: transform .3s, box-shadow .3s; }
.map-board-top, .map-board-bottom { display: flex; justify-content: space-between; align-items: center; color: #c8b08b; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.map-board-top { min-height: 28px; }
.map-board-bottom { min-height: 34px; }
.map-stage { position: relative; isolation: isolate; height: clamp(420px, 44vw, 540px); margin: 5px 0 3px; perspective: 1200px; transform-style: preserve-3d; overflow: hidden; background: radial-gradient(ellipse at 52% 48%, rgba(201, 162, 103, .16), transparent 62%), #211d1a; }
.map-stage::before { display: none; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.92) contrast(1.04); transform: translateZ(0); }
.map-road-label { position: absolute; z-index: 2; padding: 7px 10px; border: 1px solid rgba(235, 210, 163, .22); border-radius: 2px; color: #fff0d1; background: rgba(28, 24, 21, .92); box-shadow: 0 5px 14px rgba(0, 0, 0, .26); font-size: 11px; font-weight: 700; letter-spacing: .035em; white-space: nowrap; }
.road-label-bombeiros { left: 80%; top: 26%; transform: translate(-50%, -50%); }
.road-label-one { left: 40%; top: 77%; transform: translate(-50%, -50%); }
.road-label-two { left: 63%; top: 74%; transform: translate(-50%, -50%) rotate(90deg); }
.map-pin { position: absolute; z-index: 4; left: 73%; top: 43%; display: grid; justify-items: center; transform: translate(-50%, -50%) translateZ(38px); }
.pin-dot { position: relative; width: 48px; height: 48px; border: 1px solid #f4d995; border-radius: 50% 50% 50% 4px; display: grid; place-items: center; color: #1d1712; background: var(--gold-bright); box-shadow: 0 8px 0 rgba(83, 64, 38, .7), 0 0 34px rgba(239, 208, 140, .5); transform: rotate(-45deg); }
.pin-dot::after { position: absolute; inset: -11px; border: 1px solid rgba(240, 217, 159, .58); border-radius: 50%; content: ""; animation: pin-pulse 2.8s ease-out infinite; }
.pin-dot span { font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: -1px; transform: rotate(45deg); }
.pin-label { position: absolute; left: calc(100% + 15px); top: 50%; display: grid; gap: 4px; min-width: 172px; padding: 10px 12px; border: 1px solid rgba(234, 208, 153, .55); border-radius: 2px; color: #f4eadb; background: rgba(18, 16, 15, .96); box-shadow: 0 9px 24px rgba(0, 0, 0, .42); transform: translateY(-50%); }
.pin-label b { font-size: 12px; }
.pin-label small { color: #c8b899; font-size: 10px; }
.map-place { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; color: #f2e7d8; transition: filter .2s, transform .2s; }
.map-place:hover { filter: brightness(1.3); }
.place-dot { flex: 0 0 25px; width: 25px; height: 25px; border: 1px solid rgba(243, 216, 164, .9); border-radius: 50%; display: grid; place-items: center; color: #201a15; background: #f0d99f; box-shadow: 0 6px 0 rgba(64, 49, 30, .7), 0 0 22px rgba(239, 208, 140, .3); font-size: 10px; font-weight: 800; }
.place-name { max-width: 150px; padding: 6px 8px; border: 1px solid rgba(234, 208, 153, .36); border-radius: 2px; color: #f4e7d2; background: rgba(24, 21, 19, .95); box-shadow: 0 5px 16px rgba(0, 0, 0, .3); font-size: 10px; font-weight: 700; line-height: 1.25; }
.place-school { left: 6%; top: 65%; }
.place-church { left: 52%; top: 60%; flex-direction: row-reverse; transform: translateX(-100%); }
.place-church:hover { transform: translateX(-100%) translateY(-3px); }
.place-dog { left: 92%; top: 87%; flex-direction: row-reverse; transform: translateX(-100%); }
.place-dog:hover { transform: translateX(-100%) translateY(-3px); }
.place-gift { left: 73%; top: 58%; }
.map-compass { position: absolute; z-index: 2; right: 18px; top: 16px; width: 34px; height: 46px; display: grid; justify-items: center; align-content: center; color: #f0dfbb; border-top: 1px solid rgba(228, 202, 153, .65); font-size: 10px; font-weight: 700; }
.map-compass b { font-size: 22px; font-weight: 400; }
.map-disclaimer { display: flex; gap: 8px; margin: 14px 1px 0; color: #655b50; font-size: 13px; line-height: 1.65; }
.map-disclaimer span { color: #9c7c48; }
.location-details { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; }
.address-card { display: flex; gap: 16px; padding: 20px; border: 1px solid var(--line-light); background: #f8f4ee; }
.address-icon { flex: 0 0 39px; width: 39px; height: 39px; border: 1px solid #b08b4f; border-radius: 50%; display: grid; place-items: center; color: #92703a; font-size: 23px; }
.address-label { margin: 0 0 12px; color: #806038; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.address-card address { margin: 0; color: #322a23; font-family: var(--serif); font-size: 22px; font-style: normal; line-height: 1.55; }
.directions-link { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; margin-top: 14px; padding-bottom: 4px; border-bottom: 1px solid #ad8a50; color: #775a2d; font-size: 15px; font-weight: 700; }
.directions-link:hover { color: #2d241a; }
.landmarks-card { padding: 18px 20px 13px; border: 1px solid var(--line-light); background: #e9e0d6; }
.landmarks-intro { margin: -1px 0 13px; color: #695d50; font-size: 14px; line-height: 1.65; }
.landmark-list { margin: 0; padding: 0; list-style: none; }
.landmark-list li + li { border-top: 1px solid rgba(37, 30, 25, .1); }
.landmark-list a { display: grid; grid-template-columns: 29px 1fr 16px; align-items: center; min-height: 57px; gap: 10px; padding: 11px 0; }
.landmark-icon { width: 28px; height: 28px; border: 1px solid rgba(143, 111, 60, .43); border-radius: 50%; display: grid; place-items: center; color: #806338; font-size: 14px; }
.landmark-icon.street { font-size: 12px; }
.landmark-list a > span:nth-child(2) { display: grid; gap: 3px; }
.landmark-list b { color: #3d3329; font-size: 15px; font-weight: 700; }
.landmark-list small { color: #74685b; font-size: 12px; }
.landmark-arrow { color: #937241; font-size: 13px; transition: transform .2s; }
.landmark-list a:hover .landmark-arrow { transform: translate(2px, -2px); }
.landmark-list a:hover b { color: #8c6330; }
.map-embed-wrap { margin-top: 37px; padding: 13px; border: 1px solid var(--line-light); background: #e8dfd5; }
.map-embed-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 3px 18px; color: #735a37; font-size: 13px; font-weight: 700; }
.map-embed-heading a { color: #74562c; letter-spacing: normal; }
.map-embed-heading a:hover { color: #261f19; }
.google-map { display: block; width: 100%; height: 340px; border: 0; background: #dcd2c6; }

/* Geographic positions match the owner's reference. */
.map-viewport { max-width: 100%; overflow: hidden; }
.map-mobile-hint { display: none; }
.map-board[data-tilt] { transform: perspective(1450px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.map-art .map-route-dashes { animation: route-glide 24s linear infinite; }
.map-place .place-dot { transition: transform .25s; }
.map-place:hover .place-dot { transform: translateZ(15px) scale(1.08); }
.place-dot-cross, .place-dot-paw { border-color: #d5f2ff; color: #17628f; background: #a9dff8; box-shadow: 0 5px 0 #23577580; }
.place-dot-paw { color: #26769e; background: #bde9fb; }
.place-gift .place-dot { color: #fff4eb; border-color: #f6ada9; background: #c64850; box-shadow: 0 5px 0 #652c31; }
.place-gift .place-name { border-color: #b65b5e; }
.pin-label { border-color: #efcf8b; }
.map-motion-kids { filter: drop-shadow(0 3px 3px #0008); }
.animated-car { pointer-events: none; }
.is-paused .map-route-dashes, .is-paused .pin-dot::after { animation-play-state: paused; }
.map-embed-wrap > summary { padding: 8px 6px; color: #463728; font-size: 15px; font-weight: 700; }
@media (max-width: 900px) {
  .location-details { grid-template-columns: 1fr 1.1fr; }
  .address-card { padding: 20px 17px; gap: 12px; }
  .address-card address { font-size: 20px; }
}
@media (max-width: 760px) {
  .map-board { padding: 11px; }
  .map-board[data-tilt] { transform: none; }
  .map-board-top { font-size: 9px; letter-spacing: .06em; }
  .map-viewport { overflow:hidden; container-type:inline-size; }
  .map-stage { width:100%; min-width:0; height:auto; aspect-ratio:4/3; min-height:240px; }
  .pin-label { left: 50%; top: auto; bottom: calc(100% + 18px); min-width: 184px; transform: translateX(-50%); text-align: center; }
  .map-mobile-hint { display:none; }
  .map-board-bottom { flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; padding-top: 7px; font-size: 9px; letter-spacing: .06em; }
  .location-details { grid-template-columns: 1fr; gap: 14px; }
  .address-card { padding: 24px; }
  .address-card address { font-size: 22px; }
  .map-disclaimer { font-size: 12px; }
  .landmarks-card { padding: 22px; }
  .map-embed-wrap { margin-top: 25px; }
  .google-map { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-motion-kids, .animated-car { display: none; }
  .map-board[data-tilt] { transform: none; }
}


.bath-bubbles { animation: bath-bubbles 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bath-bubbles { 0%,100% { transform: translateY(0); opacity:.6; } 50% { transform: translateY(-5px); opacity:1; } }
.is-paused .bath-bubbles { animation-play-state:paused; }
/* Compact map shell; the street geometry and landmark positions are preserved. */
.map-board { padding:10px 12px 7px; box-shadow:0 8px 24px #33281c12; }
.map-stage { height:clamp(340px,37vw,430px); }
.map-board-top,.map-board-bottom { font-size:9px; }
.map-disclaimer { margin-top:9px; font-size:11px; }
@media(max-width:760px) { .map-board { padding:9px; } }

@media(max-width:760px) {
 .map-stage { height:auto; }
 .map-place .place-name { display:block; position:absolute; left:50%; bottom:calc(100% + 3px); width:86px; max-width:none; padding:3px 5px; transform:translateX(-50%); border-color:#dec79b66; background:#181513f5; color:#fff0d8; box-shadow:0 2px 5px #0005; font-size:10px; line-height:1.2; text-align:center; white-space:normal; }
 .place-school .place-name { left:0; transform:none; }
 .place-gift .place-name { top:calc(100% + 1px); bottom:auto; width:78px; border-color:#b65b5e; }
 .place-dog .place-name { width:56px; left:auto; right:calc(100% + 4px); top:6px; bottom:auto; transform:none; }
 .map-place { gap:0; min-width:30px; min-height:30px; justify-content:center; }
 .place-dot { width:19px; height:19px; flex-basis:19px; font-size:9px; box-shadow:0 3px 0 #31251980; }
 .pin-dot { width:30px; height:30px; box-shadow:0 5px 0 #534026b3,0 0 20px #efd08c66; }
 .pin-dot span { font-size:11px; }
 .pin-label { min-width:0; width:132px; padding:6px; bottom:calc(100% + max(28px, 32cqw - 70px)); }
 .pin-label b { font-size:10px; } .pin-label small { font-size:9px; }
 .map-road-label { font-size:8px; padding:4px; letter-spacing:0; }
 .road-label-two { left:64%; top:77%; }
 .map-compass { left:9px; right:auto; top:7px; width:22px; height:32px; font-size:8px; } .map-compass b { font-size:16px; }
}

/* Studio marker uses the same silent character animation as the introduction. */
.pin-character { display:block; width:64px; height:64px; border:2px solid #efd8a3; border-radius:50%; overflow:hidden; background:#15130f; box-shadow:0 5px 0 #53402699,0 0 24px #efd8a355; }
.map-character-video { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; pointer-events:none; }
@media(max-width:760px) { .pin-character { width:44px; height:44px; border-width:1px; } }