@property --tilt-x { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --tilt-y { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.map-world { perspective: 1200px; }
.diorama-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: --tilt-x .65s ease-out, --tilt-y .65s ease-out; animation: island-breathe 9s ease-in-out infinite; }
@keyframes island-breathe { 0%, 100% { transform: translateY(2px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); } 50% { transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); } }
.map-world.is-dragging .diorama-stage { transition: none; }
.map-section { background: radial-gradient(ellipse at 50% 40%, #24b3bd, #108a9e 85%); }
.map-image { filter: saturate(1.05) contrast(1.015); }
.diorama-stage > .map-pins { transform: translateZ(2px); z-index: 9; }
.rail-layer { transform: translateZ(6px); }
.train { filter: drop-shadow(3px 7px 3px #10334080); }
.steam-puff { opacity: 0; transform-box: fill-box; transform-origin: center; animation: engine-puff 3s ease-out infinite; }
@keyframes engine-puff { 0% { opacity: .75; transform: translate(0, 0) scale(.4); } 80%, 100% { opacity: 0; transform: translate(16px, 47px) scale(2.5); } }

.express-layer, .flight-route-layer, .cloud-layer, .ocean-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.express-layer { overflow: visible; }
.express-track-shadow { fill: none; stroke: #133d4150; stroke-width: 15; transform: translate(4px, 9px); }
.express-track { fill: none; stroke: #f7edcf; stroke-width: 12; stroke-linecap: round; }
.express-track-center { fill: none; stroke: #ad956c; stroke-width: 2; stroke-dasharray: 3 8; }
.flight-route-layer { visibility: hidden; }
.express-button, .plane-button { position: absolute; display: block; margin: 0; padding: 0; background: transparent; z-index: 8; min-width: 48px; min-height: 48px; transform: translate(-50%, -50%); border-radius: 50%; }
.express-button { width: 56px; height: 44px; min-height: 44px; min-width: 44px; }
.express-button > svg { width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(var(--heading, 0deg)); filter: drop-shadow(0 4px 2px #133d4140); transition: filter .2s; }
.plane-button { width: 48px; height: 48px; transform: translate(-50%, -50%); }
.plane-button > svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; transform: rotate(var(--heading, 0deg)); filter: drop-shadow(2px 8px 3px #11374b55); }
.plane-button::before { content: ''; position: absolute; inset: 60px 10px -1px 16px; border-radius: 50%; background: #0b475830; filter: blur(6px); transform: translate(18px, 10px); }
.plane-trail { position: absolute; z-index: -1; width: 64px; height: 4px; left: -42px; top: calc(50% - 2px); background: linear-gradient(90deg, transparent, #fff8de90); border-radius: 50%; transform: rotate(var(--heading, 0deg)); transform-origin: 66px 50%; opacity: .7; }
.vehicle-caption { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 5px); border-radius: 16px; padding: 7px 12px; background: #fffaf0; color: var(--navy); font-size: 16px; white-space: nowrap; box-shadow: 0 5px 15px #123c4833; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.plane-button:hover .vehicle-caption, .plane-button:focus-visible .vehicle-caption, .express-button:hover .vehicle-caption, .express-button:focus-visible .vehicle-caption { opacity: 1; transform: translate(-50%, -6px); }
.express-button:hover > svg { filter: drop-shadow(0 0 7px #fff2ac); }

.cloud-layer { transform: translateZ(40px); z-index: 5; }
.island-cloud { position: absolute; width: 118px; height: 33px; border-radius: 60% 50% 45% 55%; background: linear-gradient(#fffdf1e6, #e4f5efb3); box-shadow: 11px 36px 15px #114f6018, inset -8px -6px 9px #b0dadd44; animation: cloud-drift 17s ease-in-out infinite alternate; }
.island-cloud::before, .island-cloud::after { content: ''; position: absolute; bottom: 10px; background: inherit; border-radius: 50%; }
.island-cloud::before { left: 16px; width: 48px; height: 42px; }
.island-cloud::after { right: 18px; width: 56px; height: 54px; }
.cloud-one { left: 24%; top: 17%; opacity: .7; }
.cloud-two { left: 88%; top: 61%; width: 88px; height: 26px; opacity: .5; animation-delay: -7s; animation-duration: 22s; }
.cloud-three { left: 22%; top: 76%; width: 80px; height: 25px; opacity: .65; animation-delay: -12s; animation-duration: 19s; }
@keyframes cloud-drift { from { transform: translate3d(-18px, 0, 0); } to { transform: translate3d(26px, -9px, 0); } }
.ocean-rings i { position: absolute; width: 60px; height: 23px; border: 2px solid #e5fff487; border-radius: 50%; animation: ocean-spread 6s ease-out infinite; }
@keyframes ocean-spread { from { opacity: 0; transform: scale(.5); } 20% { opacity: .6; } to { opacity: 0; transform: scale(2.5); } }

.village-houses { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.village-house { position: absolute; left: var(--house-x); top: var(--house-y); transform: translate(-50%, -85%); width: 78px; height: 88px; background: transparent; padding: 0; pointer-events: auto; border-radius: 18px; filter: drop-shadow(0 5px 3px #1d4c3b40); }
.village-house > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.house-model { transition: transform .4s cubic-bezier(.2,.9,.3,1.4); }
.house-shadow { transition: opacity .3s; }
.house-roof { transition: transform .4s ease; }
.house-windows { opacity: 0; transition: opacity .5s; }
.house-door { transform-box: fill-box; transform-origin: left center; transition: transform .5s; }
.house-person { opacity: 0; transform: translateY(9px); transition: opacity .4s, transform .4s; }
.house-hearts { opacity: 0; transform: translateY(15px); transition: opacity .4s, transform .5s; }
.house-beacon { position: absolute; right: 0; bottom: 22%; background: var(--navy); color: #fff7d5; border: 2px solid #fff6d9; font-size: 17px; width: 26px; height: 26px; line-height: 22px; border-radius: 50%; box-shadow: 0 3px 6px #163a4640; transition: transform .3s, background .3s; }
.house-tip { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; background: #fffaf0; border: 1px solid #f2dca5; color: var(--navy); font-weight: 700; font-size: 16px; padding: 5px 10px; white-space: nowrap; border-radius: 12px; transition: opacity .2s, transform .2s; box-shadow: 0 6px 12px #163a4626; }
.village-house:is(:hover, :focus-visible, .is-open) { z-index: 5; }
.village-house:is(:hover, :focus-visible, .is-open) .house-tip { opacity: 1; transform: translate(-50%, 0); }
.village-house:is(:hover, :focus-visible, .is-open) .house-model { transform: translateY(-6px); }
.village-house:is(:hover, :focus-visible, .is-open) .house-roof { transform: translateY(-5px); }
.village-house:is(:hover, :focus-visible, .is-open) .house-windows { opacity: 1; }
.village-house.is-open .house-door { transform: scaleX(.18) skewY(-15deg); }
.village-house.is-open .house-person, .village-house.is-open .house-hearts { opacity: 1; transform: translateY(0); }
.village-house.is-open .house-beacon { background: #c28421; transform: rotate(45deg); }
.village-house.is-open .house-hearts { animation: house-welcome 3s ease-in-out infinite; }
@keyframes house-welcome { 50% { transform: translateY(-9px); } }
.village-card { position: absolute; left: 18px; top: 245px; width: 245px; padding: 20px; border-radius: 18px; background: #fffaf0f5; border: 1px solid #f3dfb4; color: var(--navy); box-shadow: 0 12px 30px #12445926; z-index: 11; }
.village-eyebrow { font-size: 16px; color: #8d662b; }
.village-card h2 { font-size: 25px; margin: 6px 24px 8px 0; }
.village-card p { font-size: 18px; line-height: 1.8; color: #42565d; margin: 0 0 16px; }
.village-card .primary-button { width: 100%; justify-content: center; padding: 10px; }
.village-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 50%; background: transparent; font-size: 28px; color: var(--navy); }
.has-house-open .map-caption { visibility: hidden; }
.is-motion-paused .steam-puff, .is-motion-paused .island-cloud, .is-motion-paused .ocean-rings i, .is-motion-paused .house-hearts,
.is-offscreen .steam-puff, .is-offscreen .island-cloud, .is-offscreen .ocean-rings i, .is-offscreen .house-hearts { animation-play-state: paused; }
.is-motion-paused .diorama-stage, .is-offscreen .diorama-stage, .is-motion-paused .pin:before { animation-play-state: paused; }
.is-motion-paused .diorama-stage { transition: none; }
body.geo-mode #village-card { display: none; }

@media (min-width: 1451px) { .village-card { top: 205px; left: 24px; width: 270px; } }
@media (max-width: 820px) {
  .map-world { perspective: 900px; }
  .village-house { width: 66px; height: 74px; }
  .house-beacon { width: 23px; height: 23px; line-height: 19px; font-size: 16px; }
  .plane-button { width: 48px; height: 48px; }
  .express-button { width: 48px; }
  .island-cloud { width: 75px; height: 22px; }
  .island-cloud::before { width: 32px; height: 29px; left: 10px; }
  .island-cloud::after { width: 36px; height: 35px; right: 10px; }
  .village-card { position: relative; top: auto; left: auto; width: auto; margin: 14px; padding: 20px; }
  .village-card .primary-button { width: auto; padding: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .diorama-stage, .steam-puff, .island-cloud, .ocean-rings i, .house-hearts { animation: none !important; }
  .diorama-stage, .house-model, .house-roof, .house-door { transition: none; }
}

.live-model-canvas { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.has-3d > .live-model-canvas { display: block; }
.has-3d #train, .has-3d .plane-button > svg, .has-3d .plane-button::before,
.has-3d .plane-trail, .has-3d .express-button > svg { visibility: hidden; }
.train-button { display: none; position: absolute; width: 48px; height: 44px; padding: 0; background: transparent; transform: translate(-50%,-50%); z-index: 8; border-radius: 35px; }
.has-3d .train-button { display: block; }
.train-button:is(:hover,:focus-visible) .vehicle-caption { opacity: 1; transform: translate(-50%,-6px); }
.actor-controls { position: absolute; inset: 0; pointer-events: none; z-index: 8; display: none; }
.has-3d > .actor-controls { display: block; }
.actor-hotspot { position: absolute; width: 38px; height: 48px; min-height: 44px; padding: 0; border-radius: 40%; background: transparent; pointer-events: auto; transform: translate(-50%,-92%); }
.actor-name { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,5px); padding: 6px 10px; color: var(--navy); background: #fffaf0; font-size: 16px; line-height: 1.5; border-radius: 12px; width: max-content; max-width: 200px; box-shadow: 0 5px 12px #153f4933; opacity: 0; pointer-events: none; transition: opacity .2s; }
.actor-hotspot:is(:hover,:focus-visible) .actor-name { opacity: 1; }
.has-3d .village-houses { z-index: 9; }
.has-3d .village-house, .has-3d .village-house > svg { pointer-events: none; }
.has-3d .house-beacon { pointer-events: auto; }
.has-3d .house-beacon::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.vehicle-dialog { padding: 0; border: 1px solid #eadfc5; border-radius: 24px; background: var(--cream); color: var(--navy); width: min(760px,calc(100vw - 28px)); max-height: 92svh; overflow-y: auto; box-shadow: 0 30px 90px #092e4d66; }
.vehicle-dialog::backdrop { background: #082a41a6; backdrop-filter: blur(6px); }
.vehicle-dialog header { padding: 28px 32px 18px; }
.vehicle-dialog h2 { font-size: 32px; margin: 5px 44px 6px 0; line-height: 1.5; }
.vehicle-dialog header p { font-size: 18px; color: #48626a; margin: 0; }
.vehicle-dialog .eyebrow { font-size: 16px; color: #8b682b; }
.vehicle-viewer { position: relative; height: clamp(210px,36svh,340px); background: radial-gradient(ellipse at 50% 40%,#eaf2e6,#d2e3de); overflow: hidden; }
#vehicle-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#vehicle-canvas:active { cursor: grabbing; }
.viewer-hint { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; pointer-events: none; font-size: 16px; color: #406262; }
.model-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.model-controls button { min-height: 48px; padding: 8px 16px; background: #eeeadf; border: 1px solid #d9d6c9; color: var(--navy); border-radius: 30px; font-size: 18px; }
.model-controls button:hover { background: #e2e8dd; }
.model-controls [aria-pressed=true] { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.vehicle-dialog footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 24px 24px; }
.vehicle-dialog footer > span { font-size: 16px; color: #5d6d61; max-width: 320px; }
@media (max-width:820px) {
  .has-3d .village-house[data-house=learning] .house-beacon { top: -2px; bottom: auto; }
  .has-3d .village-house[data-house=care] .house-beacon { left: -8px; right: auto; }
  .vehicle-dialog header { padding: 24px 20px 16px; }
  .vehicle-dialog h2 { font-size: 28px; }
  .vehicle-viewer { height: clamp(200px,32svh,280px); }
  .model-controls { padding: 14px 18px; gap: 8px; }
  .model-controls button { font-size: 16px; padding: 8px 13px; }
  .vehicle-dialog footer { padding: 16px 18px 22px; }
  .actor-hotspot { width: 32px; height: 44px; }
  .train-button { width: 44px; height: 44px; }
}

/* Enlarge the island itself; the geographic view and large-text controls keep their sizes. */
@media (min-width:821px) {
  .map-world { height: 114%; left: 90px; top: 14px; }
  .focus-tray { width: 220px; padding: 14px; }
  .focus-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .map-caption { display: none; }
}
@media (max-width:820px) {
  .map-viewport { aspect-ratio: 1122 / 1598; }
}
@media (min-width:1241px) {
  .map-world { max-height: calc((100vw - clamp(360px,30vw,480px) - 220px) * 1402 / 1122 / .85); }
}