/* O8A CITY pixel-map presentation. Existing controls and events remain intact. */
.city-bg{image-rendering:pixelated;filter:saturate(.9) contrast(1.08);object-position:center center}
.city:after{background:linear-gradient(180deg,rgba(8,10,24,.08),transparent 58%,rgba(4,7,17,.3))}
.grain{opacity:.07}
.wordmark,.dock,.spot,.panel,.toast{border-radius:0;image-rendering:pixelated}
.wordmark{border:3px solid #101522;box-shadow:4px 4px 0 #c65d5d}
.spot{padding:.35rem .5rem;background:rgba(12,16,28,.86);border:2px solid #fff0c8;box-shadow:3px 3px 0 #101522;backdrop-filter:none}
.spot b{font:800 .68rem ui-monospace,monospace}.spot small{font-size:.52rem}
.spot.nearby{outline:0!important;border-color:#ffd05f;box-shadow:0 0 0 3px #101522,0 0 0 5px #ffd05f!important}
.panel{border:4px double #17192d}.panel .close{border-radius:0}.panel .screen{border-radius:0;border:5px double #d8d0ae}
.dock{border:3px double #efe5c9;background:#101522;box-shadow:4px 4px 0 #060912;backdrop-filter:none}
.player{width:28px;height:38px;filter:drop-shadow(3px 3px 0 #0008);image-rendering:pixelated}
.player-head{left:7px;top:2px;width:16px;height:14px;background:linear-gradient(#382938 0 35%,#efb48c 35%);border-color:#171324;border-radius:0;box-shadow:inset 3px 0 #d68b70}
.player-body{left:5px;top:14px;width:20px;height:17px;background:#c94f59;border-color:#171324;box-shadow:inset 0 -6px #34466d}
.player:after,.player:before{top:29px;width:8px;height:9px;background:#28324f;border-color:#171324}
.player:before{left:4px}.player:after{right:2px}
.player em{top:-18px;padding:2px 5px;border:2px solid #fff3ce;background:#101522;box-shadow:2px 2px 0 #101522;font-size:8px}
.player.walking{animation:playerBob .16s steps(2,end) infinite alternate}
.rpg-message,.dpad button,.action-btn{border-radius:0;image-rendering:pixelated}
.rpg-message{border:4px double #fff3ce;background:#101522;box-shadow:5px 5px 0 #060912}
.dpad button,.action-btn{border-width:3px;box-shadow:3px 3px 0 #060912}
@media(max-width:650px){.city-bg{width:100%;height:100%;object-fit:cover}.spot{max-width:116px}.spot b{font-size:.62rem}}

/* Exploration-first village: labels appear only when approached or focused. */
.spot{opacity:0;pointer-events:auto;transition:opacity .12s,transform .12s}
.spot.nearby,.spot:focus-visible,.spot:hover{opacity:1}

/* Real sprite artwork replaces the temporary CSS-block avatar. */
.player{width:38px;height:52px;background-image:url('./assets/o8a-character-strip.png');background-repeat:no-repeat;background-size:400% 100%;background-position:0 0}
.player-head,.player-body,.player:before,.player:after{display:none}
.player em{top:-15px}
.npc{position:absolute;z-index:7;width:34px;height:47px;padding:0;border:0;background-color:transparent;background-image:url('./assets/o8a-character-strip.png');background-repeat:no-repeat;background-size:400% 100%;filter:drop-shadow(2px 3px 0 #0008);image-rendering:pixelated;cursor:pointer}
.npc-old{left:41%;top:63%;background-position:33.333% 0}
.npc-child{left:75%;top:69%;background-position:66.666% 0}
.npc-ai{left:61%;top:43%;background-position:100% 0}
.npc.nearby,.npc:focus-visible{filter:drop-shadow(0 0 3px #ffe16b) drop-shadow(2px 3px 0 #0008);outline:2px solid #ffe16b;outline-offset:3px}

/* The large RPG window is contextual, not permanent. */
.rpg-message{display:none;pointer-events:auto;padding-right:3rem}
.rpg-message.visible{display:block}
.message-close{position:absolute;right:.45rem;top:.35rem;width:34px;height:34px;border:2px solid #fff3ce;background:#101522;color:#fff3ce;font:900 1.2rem/1 ui-monospace,monospace;cursor:pointer}
.message-close:active{transform:translate(2px,2px)}
@media(max-width:650px){.player{width:34px;height:47px}.npc{width:31px;height:43px}.spot:hover:not(.nearby){opacity:0}.rpg-message{bottom:calc(9.4rem + env(safe-area-inset-bottom))}}

/* Three connected RPG screens made from the city master map. */
.city-bg{transition:transform .28s steps(4,end),filter .28s}
.city[data-area="north"] .city-bg{transform:scale(1.42);transform-origin:50% 20%}
.city[data-area="central"] .city-bg{transform:scale(1.32);transform-origin:50% 55%}
.city[data-area="south"] .city-bg{transform:scale(1.42);transform-origin:50% 88%}
.area-name{position:absolute;z-index:11;left:50%;top:calc(.75rem + env(safe-area-inset-top));transform:translateX(-50%);padding:.35rem .65rem;border:2px solid #fff0c8;background:#101522;color:#fff0c8;box-shadow:3px 3px 0 #060912;font:800 .68rem ui-monospace,monospace;letter-spacing:.08em;white-space:nowrap}
.city.area-changing:before{content:"";position:absolute;z-index:40;inset:0;background:#080b14;pointer-events:none;animation:mapFade .36s steps(3,end) both}
[hidden]{display:none!important}
@keyframes mapFade{0%,100%{opacity:0}45%,60%{opacity:1}}
@media(max-width:650px){.area-name{top:calc(4.1rem + env(safe-area-inset-top));font-size:.62rem}.city[data-area="north"] .city-bg{transform:scale(1.55);transform-origin:50% 18%}.city[data-area="central"] .city-bg{transform:scale(1.45);transform-origin:50% 56%}.city[data-area="south"] .city-bg{transform:scale(1.55);transform-origin:50% 88%}}