:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #071219; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }

.game-shell {
  position: relative; width: min(100vw, 560px); height: 100svh; min-height: 640px; margin: auto; overflow: hidden;
  background: #061018; isolation: isolate; box-shadow: 0 0 0 1px #18262e, 0 20px 60px #000;
}

/*
  Single source of truth for world geometry.
  The stage dimensions come from WORLD_GEOMETRY.meta; image, NPCs and hotspots are children,
  so crop, scale and centering are shared automatically.
*/
.stage {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--world-width); height: var(--world-height);
  transform: translate(-50%, -50%) scale(var(--stage-scale, .5)); transform-origin: center; overflow: hidden;
}
.world { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; }
.world-actions, .npc-layer, .ambient-layer { position: absolute; inset: 0; }
.world-actions { z-index: 4; }
.npc-layer { z-index: 3; pointer-events: none; }
.ambient-layer { z-index: 2; pointer-events: none; }
.geometry-overlay { display:none; position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.debug .geometry-overlay, .geometry .geometry-overlay { display:block; }
.geometry-overlay .geo-walkable { fill:#33f29a19; stroke:#33f29a; stroke-width:3; stroke-dasharray:12 10; }
.geometry-overlay .geo-obstacle { fill:#ff46551c; stroke:#ff4655; stroke-width:3; stroke-dasharray:8 8; }
.geometry-overlay .geo-stage-bound { fill:none; stroke:#c5d0ff; stroke-width:4; stroke-dasharray:14 8; }
.geometry-overlay .geo-stage-label { fill:#effcff; stroke:#071219; stroke-width:4; paint-order:stroke; font:700 13px ui-monospace, monospace; }
.geometry-overlay .geo-route { fill:none; stroke:#72ff6f; stroke-width:6; stroke-linejoin:round; stroke-dasharray:13 10; }
.geometry-overlay .geo-route-invalid { fill:none; stroke:#ff4655; stroke-width:8; stroke-linecap:round; stroke-dasharray:10 7; }
.geometry-overlay .geo-waypoint { fill:#fff36a; stroke:#222; stroke-width:3; }
.geometry-overlay .geo-entrance { fill:#9c7cff; stroke:#1e153d; stroke-width:3; }
.geometry-overlay .geo-idle { fill:#8dffc2; stroke:#0f4c32; stroke-width:3; }
.geometry-overlay .geo-interaction { fill:#ffb347; stroke:#452600; stroke-width:3; }
.geometry-overlay .geo-spawn { fill:#42e7ff; stroke:#0a3140; stroke-width:3; }
.geometry-overlay .geo-despawn { fill:#f68ee8; stroke:#46133f; stroke-width:3; }
.geometry-overlay .geo-surface-bbox { fill:#ffd84a16; stroke:#ffd84a; stroke-width:3; stroke-dasharray:7 5; }
.geometry-overlay .geo-surface-quad { fill:#27f4f51a; stroke:#31f4f4; stroke-width:3; }
.geometry-overlay .geo-surface-vertex { fill:#fff36a; stroke:#17252b; stroke-width:2; }
.geometry-overlay .geo-label { fill:#effcff; stroke:#071219; stroke-width:4; paint-order:stroke; font:700 13px ui-monospace, monospace; letter-spacing:.02em; }
.geometry-overlay .geo-label-invalid { fill:#ff7f89; }

/* Low-cost ambient life: opacity, scale and stepped color changes only. */
.lamp-glow { position: absolute; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: radial-gradient(circle, #ffeaa4 0 5%, #ffb92877 22%, transparent 67%); mix-blend-mode: screen; animation: lamp-breathe 5.6s steps(4) infinite; }
.glow-bank { left: 483px; top: 535px; animation-delay: -1.7s; }
.glow-lottery { left: 865px; top: 806px; animation-delay: -3.1s; }
.glow-plaza { left: 642px; top: 908px; animation-delay: -.8s; }
.glow-cartorio { left: 272px; top: 1050px; animation-delay: -4.2s; }
.glow-atm { left: 884px; top: 1218px; animation-delay: -2.4s; }
@keyframes lamp-breathe { 0%, 100% { opacity: .28; transform: scale(.9); } 48% { opacity: .7; transform: scale(1.12); } 62% { opacity: .42; transform: scale(.98); } }

.lottery-life { position: absolute; left: 620px; top: 392px; width: 300px; height: 315px; }
.lottery-bulb { position: absolute; width: 9px; height: 9px; border: 2px solid #9c4d12; background: #e78318; box-shadow: inset 2px 2px #ffd65d; animation: bulb-chase 2.4s steps(1) infinite; animation-delay: var(--d); }
.b01 { left:15px; top:85px; --d:0s; } .b02 { left:48px; top:98px; --d:-.16s; }
.b03 { left:78px; top:92px; --d:-.32s; } .b04 { left:111px; top:78px; --d:-.48s; }
.b05 { left:145px; top:83px; --d:-.64s; } .b06 { left:180px; top:98px; --d:-.8s; }
.b07 { left:215px; top:115px; --d:-.96s; } .b08 { left:254px; top:140px; --d:-1.12s; }
.b09 { left:273px; top:185px; --d:-1.28s; } .b10 { left:270px; top:235px; --d:-1.44s; }
.b11 { left:240px; top:277px; --d:-1.6s; } .b12 { left:190px; top:292px; --d:-1.76s; }
.b13 { left:135px; top:288px; --d:-1.92s; } .b14 { left:80px; top:278px; --d:-2.08s; }
.b15 { left:28px; top:255px; --d:-2.24s; }
.clover-glint { position: absolute; width: 5px; height: 5px; background: #d6ff7b; opacity: 0; animation: clover-twinkle 5.4s steps(1) infinite; }
.c01 { left:135px; top:78px; } .c02 { left:165px; top:101px; animation-delay:-1.8s; } .c03 { left:142px; top:130px; animation-delay:-3.6s; }
@keyframes bulb-chase { 0%, 12% { background:#fff7bb; border-color:#ffd14a; box-shadow:0 0 10px #ffbc35, inset 2px 2px #fff; } 13%, 100% { background:#cf6813; border-color:#6d3511; box-shadow:inset 2px 2px #f4a029; } }
@keyframes clover-twinkle { 0%, 42%, 100% { opacity:0; } 44%, 52% { opacity:.95; box-shadow:5px 0 #79e946, 0 5px #79e946; } 54% { opacity:0; } }

.fountain-life { position:absolute; left:397px; top:794px; width:180px; height:205px; overflow:hidden; }
.fountain-water-sprite { position:absolute; left:10px; top:5px; width:160px; height:180px; background:url("assets/fountain-water-frames-v2.png") 0 0 / 400% 100% no-repeat; image-rendering:pixelated; opacity:.62; animation:fountain-frames 1.2s steps(1) infinite; }
@keyframes fountain-frames { 0%,24.99% { background-position:0 0; } 25%,49.99% { background-position:33.333% 0; } 50%,74.99% { background-position:66.667% 0; } 75%,100% { background-position:100% 0; } }

.atm-screen-life { position:absolute; left:var(--atm-screen-left); top:var(--atm-screen-top); width:var(--atm-screen-width); height:var(--atm-screen-height); background:url("assets/atm-screen-emissive-frames.png") 0 0 / 400% 100% no-repeat; image-rendering:pixelated; mix-blend-mode:screen; animation:atm-screen-emissive 8s steps(1) infinite; }
.atm-screen-life::before { content:""; position:absolute; inset:0; background:var(--atm-screen-tint, transparent); clip-path:polygon(var(--atm-screen-tl-x) var(--atm-screen-tl-y), var(--atm-screen-tr-x) var(--atm-screen-tr-y), var(--atm-screen-br-x) var(--atm-screen-br-y), var(--atm-screen-bl-x) var(--atm-screen-bl-y)); opacity:0; mix-blend-mode:normal; transition:opacity .32s steps(2); }
.atm-screen-life.atm-tint-on::before { opacity:.58; }
@keyframes atm-screen-emissive { 0%,49.99% { background-position:0 0; } 50%,64.99% { background-position:33.333% 0; } 65%,79.99% { background-position:66.667% 0; } 80%,100% { background-position:100% 0; } }

.hotspot { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: .8%; color: transparent; }
.hotspot::after { content: ""; position: absolute; inset: .6%; border: 2px solid transparent; border-radius: inherit; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.hotspot span { position: absolute; opacity: 0; pointer-events: none; }
.hotspot:hover::after, .hotspot:focus-visible::after { border-color: #34d8ff; background: rgba(32, 176, 240, .12); box-shadow: 0 0 0 2px rgba(6, 15, 23, .8), 0 0 15px #1cccf3; }
.hotspot:active::after { background: rgba(255, 197, 67, .24); border-color: #ffd15a; transform: scale(.97); }
.hotspot.selected::after { border-color: #ffd15a; background: rgba(255, 189, 51, .18); box-shadow: 0 0 16px #ffb21b; }

/* Coordinates are percentages of the native artwork. */
.banco { left: 3%; top: 8%; width: 63%; height: 36%; }
.loteria { left: 61%; top: 24%; width: 39%; height: 27%; }
.cartorio { left: 0; top: 51%; width: 46%; height: 24%; }
.caixa { left: 66%; top: 68%; width: 29%; height: 15%; }
.sign { z-index: 5; border-radius: 4px; }
.sign-banco { left: 39%; top: 72.5%; width: 19%; height: 2.4%; }
.sign-loteria { left: 41%; top: 74.8%; width: 22%; height: 2.4%; }
.sign-cartorio { left: 39%; top: 77.2%; width: 21%; height: 2.4%; }
.sign-caixa { left: 42%; top: 79.6%; width: 17%; height: 2.4%; }

/* Raster sprites derived from the original NPC style; coordinates use native artwork pixels. */
.npc, .bench-visitor {
  position: absolute; width: 72px; height: 96px; pointer-events: none;
  background-image: url("assets/npc-sprites-v2.png"); background-repeat: no-repeat; background-size: 400% 300%;
  image-rendering: pixelated; filter: drop-shadow(2px 3px 0 #05101899);
}
.npc {
  left: 0; top: 0; offset-rotate: 0deg; offset-anchor: 50% 87.5%;
  will-change: offset-distance, transform, opacity;
  animation-delay: var(--delay), 0s; animation-timing-function: linear, steps(1, jump-none); animation-iteration-count: infinite;
}
.sprite-man { --row-y: 0%; }
.sprite-woman { --row-y: 50%; }
.sprite-cap { --row-y: 100%; }

/* Paths sit on visible paving: bank→left promenade, lottery→right promenade, square→ATM. */
.route-bank {
  animation-name: route-bank, sprite-walk; animation-duration: 36s, .72s;
}
.route-atm {
  animation-name: route-atm, sprite-walk; animation-duration: 36s, .72s;
}
.bench-visitor {
  left: 120px; top: 1158px; z-index: 1; background-position: 0 50%;
  clip-path: inset(0 0 26% 0); transform: scale(.9, .78); transform-origin: bottom;
  opacity: 0; animation: bench-visit 52s steps(1) -17s infinite;
}

@keyframes sprite-walk {
  0%, 24.99% { background-position: 0% var(--row-y); }
  25%, 49.99% { background-position: 33.333% var(--row-y); }
  50%, 74.99% { background-position: 66.667% var(--row-y); }
  75%, 100% { background-position: 100% var(--row-y); }
}
@keyframes route-bank {
  0% { offset-distance:0%; opacity:0; visibility:hidden; transform:scaleX(1) scale(.9); }
  2% { offset-distance:0%; opacity:1; visibility:visible; transform:scaleX(1) scale(.9); }
  42% { offset-distance:100%; opacity:1; visibility:visible; transform:scaleX(1) scale(.98); }
  44%, 100% { offset-distance:100%; opacity:0; visibility:hidden; transform:scaleX(1) scale(.98); }
}
@keyframes route-atm {
  0%, 54% { offset-distance:0%; opacity:0; visibility:hidden; transform:scaleX(1) scale(.98); }
  56% { offset-distance:0%; opacity:1; visibility:visible; transform:scaleX(1) scale(.98); }
  96% { offset-distance:100%; opacity:1; visibility:visible; transform:scaleX(1) scale(1.04); }
  98%, 100% { offset-distance:100%; opacity:0; visibility:hidden; transform:scaleX(1) scale(1.04); }
}
@keyframes bench-visit { 0%, 18% { opacity: 0; } 22%, 67% { opacity: 1; } 72%, 100% { opacity: 0; } }
.world-paused .npc, .world-paused .bench-visitor, .world-paused .ambient-layer *, .world-paused .ambient-layer *::before, .world-paused .ambient-layer *::after { animation-play-state: paused; }

.explore-tip { position: absolute; z-index: 6; top: max(102px, calc(env(safe-area-inset-top) + 94px)); right: 12px; margin: 0; padding: 6px 9px; border: 1px solid rgba(104, 194, 218, .45); border-radius: 4px; background: rgba(5, 16, 23, .78); color: #d9eff5; font-size: clamp(9px, 2.2vw, 11px); text-transform: uppercase; letter-spacing: .04em; text-shadow: 1px 1px #000; }
.quick-nav { position: absolute; z-index: 6; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; right: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 7px; border: 2px solid #1b2e39; border-radius: 13px; background: rgba(5, 14, 20, .92); box-shadow: 0 4px 18px #000b; }
.nav-item { min-height: 68px; border: 1px solid #253b46; border-radius: 9px; background: linear-gradient(#142630, #0a151b); color: #aab5b7; display: grid; place-content: center; gap: 4px; cursor: pointer; text-transform: uppercase; font-size: clamp(8px, 2.5vw, 11px); font-weight: 800; letter-spacing: -.04em; }
.nav-item i { color: #d8ad4b; font-style: normal; font-size: clamp(18px, 5.8vw, 27px); line-height: 1; text-shadow: 2px 2px #402700; }
.nav-item.active, .nav-item:focus-visible { color: #eef9ff; outline: none; border-color: #25c7ef; box-shadow: inset 0 0 12px #006c91, 0 0 9px #139fc2; }

.destination { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: rgba(3, 10, 15, .76); }
.destination[hidden] { display: none; }
.destination-card { width: min(100%, 330px); padding: 25px 20px; border: 3px solid #d89c31; outline: 2px solid #34260e; background: linear-gradient(145deg, #152b39, #07151d); box-shadow: 0 12px 0 #02080c, 0 20px 36px #000c; text-align: center; }
.eyebrow { margin: 0 0 12px; color: #8ce6f5; font-size: 10px; letter-spacing: .13em; }
.destination-icon { color: #ffc047; font-size: 34px; text-shadow: 2px 2px #5f3700; }
.destination h1 { margin: 10px 0 8px; color: #ffca59; font-family: Georgia, serif; font-size: 31px; text-shadow: 2px 2px #1a0e00; }
.destination p:not(.eyebrow) { color: #c8d6d5; font-size: 13px; line-height: 1.5; }
.return { margin-top: 12px; padding: 11px 14px; border: 2px solid #e6b44e; background: #8c5116; color: #fff2bd; font-weight: 800; cursor: pointer; box-shadow: 0 3px #3b1d04; }
.return:active { transform: translateY(2px); box-shadow: 0 1px #3b1d04; }
.toast { position: absolute; z-index: 9; left: 50%; bottom: 114px; transform: translate(-50%, 18px); width: max-content; max-width: calc(100% - 32px); padding: 9px 12px; border-radius: 4px; background: #112834; color: #e7faff; border: 1px solid #3fc9e2; font-size: 12px; opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.debug-panel { display: none; position: absolute; z-index: 8; left: 8px; top: 106px; max-width: calc(100% - 16px); padding: 7px 9px; border: 1px solid #50ecff; background: #041018e8; color: #baf8ff; font: 9px/1.45 ui-monospace, monospace; white-space: pre-line; pointer-events: none; }
.debug .debug-panel { display: block; }
.debug .stage { outline: 2px solid #ffdf52; outline-offset: -2px; }
.debug .hotspot::after { border-color: #38eaff; background: rgba(0, 210, 255, .14); box-shadow: inset 0 0 0 1px #041018; }
.debug .hotspot.sign::after { border-color: #ffcf42; background: rgba(255, 190, 38, .25); }
.debug .hotspot span { left: 4px; top: 4px; opacity: 1; padding: 2px 3px; background: #041018e6; color: white; font-size: clamp(7px, 1.8vw, 10px); white-space: nowrap; }
.debug .npc { outline: 1px solid #ff61d8; }
.debug .ambient-target { outline: 2px dashed #8cff74; outline-offset: -2px; }
.geometry-panel { display:none; position:absolute; z-index:8; left:8px; bottom:104px; max-width:calc(100% - 16px); padding:7px 9px; border:1px solid #b991ff; background:#080b16e8; color:#edf2ff; font:9px/1.45 ui-monospace,monospace; pointer-events:none; }
.geometry .geometry-panel { display:grid; grid-template-columns:auto auto; gap:3px 9px; }
.geometry-panel strong, .geometry-coordinate, .geometry-validation { grid-column:1 / -1; }
.geometry-coordinate { color:#6ffffa; }
.geometry-validation { color:#8dffad; }
.geometry-key { display:inline-block; width:8px; height:8px; margin-right:4px; border:1px solid #fff; vertical-align:middle; }
.geometry-key.walkable { background:#33f29a; }.geometry-key.obstacle { background:#ff4655; }.geometry-key.route { background:#72ff6f; }.geometry-key.point { background:#fff36a; }

@media (max-height: 720px) { .quick-nav { padding: 5px; bottom: 5px; } .nav-item { min-height: 56px; } .explore-tip { top: 88px; } .debug-panel { top: 88px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .npc { offset-distance: 55%; opacity: 1; background-position: 0 var(--row-y); } .bench-visitor { opacity: 1; } }