/* =========================================================
   xity.quest — 16-bit role-playing cartography
   Palette: #1a1a2e #2e2b4a #7a5c7e #d4a574 #e8c07d
            #5a8a7a #c8a2c8 #f4ecd8
   Fonts:   Press Start 2P, VT323, Silkscreen, Jacquard 12
   Grid:    everything snaps to 8px; no gradients; no radii.
   ========================================================= */

:root {
    --c-night:    #1a1a2e;
    --c-bruise:   #2e2b4a;
    --c-lavender: #7a5c7e;
    --c-gold:     #d4a574;
    --c-cream:    #e8c07d;
    --c-verd:     #5a8a7a;
    --c-orchid:   #c8a2c8;
    --c-bone:     #f4ecd8;

    --px: 8px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
}

html, body {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
    font-smooth: never;
    background: var(--c-night);
    color: var(--c-bone);
    height: 100%;
    overflow: hidden;
    font-family: "VT323", monospace;
}

html * {
    image-rendering: inherit;
    -webkit-font-smoothing: inherit;
    font-smooth: inherit;
}

body {
    font-family: "VT323", monospace;
    font-size: 20px;
    line-height: 1.4;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='6' y='0' width='4' height='2' fill='%23e8c07d'/><rect x='4' y='2' width='8' height='2' fill='%23e8c07d'/><rect x='4' y='4' width='2' height='2' fill='%231a1a2e'/><rect x='10' y='4' width='2' height='2' fill='%231a1a2e'/><rect x='6' y='4' width='4' height='2' fill='%23f4ecd8'/><rect x='4' y='6' width='8' height='2' fill='%23e8c07d'/><rect x='4' y='8' width='8' height='4' fill='%232e2b4a'/><rect x='5' y='12' width='2' height='4' fill='%232e2b4a'/><rect x='9' y='12' width='2' height='4' fill='%232e2b4a'/></svg>") 8 8, auto;
}

.press-start { font-family: "Press Start 2P", monospace; letter-spacing: 0; }
.vt323       { font-family: "VT323", monospace; }
.jacquard    { font-family: "Jacquard 12", serif; }
.silkscreen  { font-family: "Silkscreen", monospace; }

/* =========================================================
   CRT scanlines + phosphor overlay
   ========================================================= */
.crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(26, 26, 46, 0.00) 0px,
            rgba(26, 26, 46, 0.00) 2px,
            rgba(26, 26, 46, 0.18) 3px,
            rgba(26, 26, 46, 0.00) 4px
        );
    mix-blend-mode: multiply;
}

.scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(90, 138, 122, 0.00) 0px,
            rgba(90, 138, 122, 0.00) 3px,
            rgba(90, 138, 122, 0.05) 4px
        );
}

/* =========================================================
   HUD 9-slice frame (fixed, surrounds viewport)
   ========================================================= */
.hud-frame {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    border-top:    32px solid var(--c-night);
    border-right:  32px solid var(--c-night);
    border-bottom: 32px solid var(--c-night);
    border-left:   32px solid var(--c-night);
    background-clip: padding-box;
}

.hud-frame::before,
.hud-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-image:
        linear-gradient(var(--c-bruise), var(--c-bruise)),
        linear-gradient(var(--c-bruise), var(--c-bruise));
    /* Use layered box-shadows inset to paint the dithered border */
}

.hud-frame::before {
    /* top + bottom "granite" band, drawn via inset shadow simulating a pattern */
    inset: -32px;
    border: 32px solid transparent;
    box-shadow:
        inset 0  0  0 8px var(--c-bruise),
        inset 0  0  0 16px var(--c-night),
        inset 0  0  0 24px var(--c-lavender);
    mix-blend-mode: normal;
    opacity: 0;
}

.hud-frame::after {
    /* inner bevel seam */
    inset: 24px;
    border: 8px solid var(--c-bruise);
    box-shadow:
        inset 0 0 0 2px var(--c-lavender),
        inset 0 0 0 10px var(--c-night);
    opacity: 1;
}

/* Dithered granite border painted with repeating conic-like pattern using repeating backgrounds.
   We paint across the 32px border using a pseudo "mask" via inset rects */
.hud-frame {
    background:
        /* granite dither across the whole border area */
        repeating-conic-gradient(var(--c-bruise) 0deg 90deg, var(--c-night) 90deg 180deg) 0 0 / 8px 8px,
        var(--c-night);
}

/* Corner crystals */
.hud-corner {
    position: absolute;
    width: 32px;
    height: 32px;
    background:
        linear-gradient(var(--c-gold), var(--c-gold)) center/8px 8px no-repeat,
        linear-gradient(var(--c-cream), var(--c-cream)) center/16px 16px no-repeat,
        linear-gradient(var(--c-bruise), var(--c-bruise)) center/24px 24px no-repeat,
        var(--c-night);
    pointer-events: none;
    z-index: 1002;
    box-shadow: inset 0 0 0 2px var(--c-lavender);
}
.hud-tl { top: 0; left: 0; }
.hud-tr { top: 0; right: 0; }
.hud-bl { bottom: 0; left: 0; }
.hud-br { bottom: 0; right: 0; }

/* HUD content regions */
.hud-top-left,
.hud-top-right,
.hud-bottom-left,
.hud-bottom-right {
    position: fixed;
    z-index: 1003;
    pointer-events: auto;
    color: var(--c-cream);
    font-family: "Silkscreen", monospace;
    font-size: 8px;
    padding: 8px;
}

.hud-top-left    { top: 0;    left: 40px;  height: 32px; display: flex; align-items: center; gap: 8px; }
.hud-top-right   { top: 0;    right: 40px; height: 32px; display: flex; align-items: center; gap: 8px; }
.hud-bottom-left { bottom: 0; left: 40px;  height: 32px; display: flex; align-items: center; gap: 8px; }
.hud-bottom-right{ bottom: 0; right: 40px; height: 32px; display: flex; align-items: center; gap: 8px; }

.hud-label {
    color: var(--c-gold);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    letter-spacing: 0;
}

.hud-portraits { display: flex; gap: 4px; }
.portrait {
    width: 16px; height: 16px;
    background: var(--c-bruise);
    box-shadow: inset 0 0 0 1px var(--c-lavender);
    position: relative;
}
.portrait::after {
    content: "";
    position: absolute;
    inset: 2px 4px 6px 4px;
    background: var(--c-cream);
}
.portrait::before {
    content: "";
    position: absolute;
    left: 4px; top: 8px;
    width: 2px; height: 2px;
    background: var(--c-night);
    box-shadow: 6px 0 0 0 var(--c-night);
}
.portrait-wanderer::after { background: var(--c-lavender); }
.portrait-scholar::after  { background: var(--c-gold); }
.portrait-cat::after      { background: var(--c-verd); }

.hud-gold {
    color: var(--c-gold);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
}

.hud-music {
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    color: var(--c-bone);
    background: var(--c-bruise);
    border: 2px solid var(--c-lavender);
    padding: 4px 8px;
    cursor: pointer;
    pointer-events: auto;
    margin-left: 8px;
}
.hud-music:hover { background: var(--c-lavender); color: var(--c-night); }
.hud-music.on    { color: var(--c-gold); }

.hud-time {
    color: var(--c-bone);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
}

.minimap {
    width: 120px;
    height: 48px;
    background: var(--c-night);
    box-shadow: inset 0 0 0 1px var(--c-lavender);
    image-rendering: pixelated;
}

.hud-hint {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1003;
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    color: var(--c-lavender);
    pointer-events: none;
    letter-spacing: 0;
}

/* =========================================================
   Viewport + overworld camera
   ========================================================= */
.viewport {
    position: fixed;
    top: 32px;
    left: 32px;
    right: 32px;
    bottom: 32px;
    overflow: hidden;
    background: var(--c-night);
    z-index: 100;
    cursor: grab;
    box-shadow: inset 0 0 0 8px var(--c-night), inset 0 0 0 10px var(--c-lavender);
}
.viewport.grabbing { cursor: grabbing; }

.overworld {
    position: absolute;
    top: 0;
    left: 0;
    width: 8200px;
    height: 100%;
    min-height: 720px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    background:
        /* vertical dithered sky band stack — 8px slabs, darker to lighter */
        linear-gradient(
            to bottom,
            #0f0f1f 0px, #0f0f1f 56px,
            #16162a 56px, #16162a 112px,
            var(--c-night) 112px, var(--c-night) 200px,
            var(--c-bruise) 200px, var(--c-bruise) 320px,
            #3a3658 320px, #3a3658 440px,
            var(--c-lavender) 440px, var(--c-lavender) 560px,
            #8a6e8e 560px, #8a6e8e 640px,
            #45334a 640px
        );
}

/* 2x2 Bayer dither layer applied on top of slab boundaries */
.overworld::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(26, 26, 46, 0) 0px,
            rgba(26, 26, 46, 0) 4px,
            rgba(26, 26, 46, 0.18) 4px,
            rgba(26, 26, 46, 0.18) 8px
        );
    background-size: 4px 8px;
    z-index: 0;
}

/* Sky layer (stars) */
.sky-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px;
    pointer-events: none;
    background-image:
        radial-gradient(var(--c-bone) 1px, transparent 1px),
        radial-gradient(var(--c-cream) 1px, transparent 1px),
        radial-gradient(var(--c-orchid) 1px, transparent 1px);
    background-size: 160px 80px, 240px 120px, 320px 160px;
    background-position: 0 40px, 80px 100px, 160px 60px;
    opacity: 0.8;
    z-index: 1;
    animation: starTwinkle 4s steps(2) infinite;
}
@keyframes starTwinkle {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Far mountains silhouette */
.mountains {
    position: absolute;
    top: 240px;
    left: 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(var(--c-lavender), var(--c-lavender));
    /* Zigzag pixel silhouette via mask */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 800 160' shape-rendering='crispEdges'><polygon fill='black' points='0,160 0,120 40,96 80,104 120,64 160,88 200,72 240,112 280,80 320,96 360,56 400,88 440,72 480,104 520,80 560,96 600,64 640,96 680,72 720,104 760,88 800,112 800,160'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 800 160' shape-rendering='crispEdges'><polygon fill='black' points='0,160 0,120 40,96 80,104 120,64 160,88 200,72 240,112 280,80 320,96 360,56 400,88 440,72 480,104 520,80 560,96 600,64 640,96 680,72 720,104 760,88 800,112 800,160'/></svg>");
    -webkit-mask-size: 1640px 160px;
            mask-size: 1640px 160px;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
    opacity: 0.6;
}

/* =========================================================
   Region scaffolding
   ========================================================= */
.region {
    position: absolute;
    top: 0;
    height: 100%;
    min-height: 720px;
    overflow: visible;
    z-index: 5;
}

.region-title {
    position: absolute;
    top: 72px;
    left: 48px;
    font-family: "Jacquard 12", serif;
    font-size: 32px;
    color: var(--c-cream);
    text-shadow:
        2px 0 0 var(--c-night),
        -2px 0 0 var(--c-night),
        0 2px 0 var(--c-night),
        0 -2px 0 var(--c-night);
    z-index: 30;
    letter-spacing: 2px;
}

/* ground band that every region shares */
.region::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 128px;
    background:
        /* 2x2 bayer dither between bruise and night for a stone floor */
        linear-gradient(to bottom, var(--c-bruise) 0, var(--c-bruise) 8px, var(--c-night) 8px, var(--c-night) 16px),
        var(--c-bruise);
    background-size: 8px 16px, auto;
    z-index: 1;
    box-shadow: inset 0 2px 0 var(--c-lavender);
}

/* =========================================================
   REGION I — THE GATES
   ========================================================= */
.region-gates { }

.wordmark-stamp {
    position: absolute;
    top: 160px;
    left: 240px;
    font-family: "Press Start 2P", monospace;
    font-size: 32px;
    color: var(--c-cream);
    z-index: 20;
    text-shadow: 4px 4px 0 var(--c-night);
    letter-spacing: 0;
}
.wordmark-xity  { color: var(--c-cream); }
.wordmark-dot   { color: var(--c-gold); }
.wordmark-quest { color: var(--c-gold); }

.gate-arch {
    position: absolute;
    left: 240px;
    top: 240px;
    width: 640px;
    height: 400px;
    z-index: 10;
}
.arch-left, .arch-right {
    position: absolute;
    width: 96px;
    height: 320px;
    top: 80px;
    background:
        repeating-linear-gradient(
            0deg,
            var(--c-lavender) 0px, var(--c-lavender) 8px,
            var(--c-bruise) 8px, var(--c-bruise) 16px,
            var(--c-lavender) 16px, var(--c-lavender) 24px,
            #6a4c6e 24px, #6a4c6e 32px
        );
    box-shadow: inset 0 0 0 4px var(--c-bruise);
}
.arch-left  { left: 0; }
.arch-right { right: 0; }
.arch-top {
    position: absolute;
    left: 96px;
    right: 96px;
    top: 80px;
    height: 80px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-lavender) 0px, var(--c-lavender) 16px,
            var(--c-bruise) 16px, var(--c-bruise) 24px
        );
    box-shadow: inset 0 0 0 4px var(--c-bruise);
    /* curve hinted via mask */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 80' shape-rendering='crispEdges' preserveAspectRatio='none'><path fill='black' d='M0,80 L0,40 L8,40 L8,24 L16,24 L16,16 L32,16 L32,8 L64,8 L64,0 L384,0 L384,8 L416,8 L416,16 L432,16 L432,24 L440,24 L440,40 L448,40 L448,80 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 80' shape-rendering='crispEdges' preserveAspectRatio='none'><path fill='black' d='M0,80 L0,40 L8,40 L8,24 L16,24 L16,16 L32,16 L32,8 L64,8 L64,0 L384,0 L384,8 L416,8 L416,16 L432,16 L432,24 L440,24 L440,40 L448,40 L448,80 Z'/></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
.arch-keystone {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 72px;
    width: 48px;
    height: 32px;
    background: var(--c-gold);
    box-shadow: inset 0 0 0 4px var(--c-bruise), 4px 4px 0 var(--c-night);
}
.arch-keystone::after {
    content: "xq";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    color: var(--c-night);
}

/* Signpost */
.signpost {
    position: absolute;
    width: 128px;
    height: 120px;
    z-index: 15;
}
.sign-post {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 8px;
    height: 72px;
    background: var(--c-bruise);
    box-shadow: 0 0 0 2px var(--c-night);
}
.sign-plank {
    position: absolute;
    top: 0;
    left: 0;
    width: 128px;
    min-height: 48px;
    padding: 8px;
    background: var(--c-gold);
    color: var(--c-night);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    line-height: 1.5;
    box-shadow:
        inset 0 0 0 2px var(--c-bruise),
        4px 4px 0 var(--c-night);
    text-align: center;
}
.sign-plank.small {
    width: 72px;
    font-size: 8px;
}

/* Lamppost */
.lamppost {
    position: absolute;
    width: 24px;
    height: 120px;
    z-index: 12;
}
.lamp-pole {
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 4px;
    height: 96px;
    background: var(--c-bruise);
    box-shadow: 0 0 0 2px var(--c-night);
}
.lamp-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--c-lavender);
    box-shadow: inset 0 0 0 2px var(--c-bruise), 2px 2px 0 var(--c-night);
}
.lamp-head.lamp-dead::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--c-night);
}

/* Crows */
.crow {
    position: absolute;
    width: 16px;
    height: 12px;
    background: var(--c-night);
    z-index: 14;
    box-shadow:
        0 2px 0 -2px var(--c-bone),
        inset 4px 0 0 var(--c-bruise);
}
.crow::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 4px;
    width: 8px;
    height: 4px;
    background: var(--c-night);
}
.crow::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 4px;
    width: 4px;
    height: 2px;
    background: var(--c-gold);
}
.crow-perched {
    animation: crowIdle 1200ms steps(2) infinite;
}
@keyframes crowIdle {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

/* Save crystal */
.crystal {
    position: absolute;
    width: 24px;
    height: 32px;
    z-index: 20;
    animation: crystalSpin 800ms steps(4) infinite;
}
.crystal::before {
    content: "";
    position: absolute;
    inset: 4px 4px 8px 4px;
    background: var(--c-verd);
    box-shadow:
        inset 0 0 0 2px var(--c-bone),
        inset -4px 0 0 var(--c-night);
    /* diamond via clip-path */
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.crystal::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 16px;
    height: 8px;
    background:
        radial-gradient(var(--c-orchid) 30%, transparent 32%) center/8px 8px no-repeat;
    opacity: 0.5;
}
@keyframes crystalSpin {
    0%   { filter: brightness(1)   hue-rotate(0deg); }
    25%  { filter: brightness(1.3) hue-rotate(10deg); }
    50%  { filter: brightness(1.5) hue-rotate(20deg); }
    75%  { filter: brightness(1.3) hue-rotate(10deg); }
    100% { filter: brightness(1)   hue-rotate(0deg); }
}
.crystal:hover { transform: scale(1.15); }

/* Cobblestones band */
.cobble-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 128px;
    height: 16px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-lavender) 0px, var(--c-lavender) 8px,
            var(--c-bruise) 8px, var(--c-bruise) 16px,
            #6a4c6e 16px, #6a4c6e 24px,
            var(--c-bruise) 24px, var(--c-bruise) 32px
        );
    z-index: 2;
    box-shadow: inset 0 1px 0 var(--c-bone);
}

/* =========================================================
   REGION II — THE LOW DISTRICT
   ========================================================= */
.building {
    position: absolute;
    width: 152px;
    height: 280px;
    z-index: 10;
    cursor: pointer;
    transition: transform 120ms steps(2);
}
.building.building-a { transform: skewX(-2deg); }
.building.building-b { transform: skewX(1deg); }
.building.building-c { transform: skewX(-1deg); }
.building.building-d { transform: skewX(2deg); }
.building:hover { filter: brightness(1.2); }

.bldg-roof {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    background: var(--c-gold);
    box-shadow: inset 0 0 0 4px var(--c-bruise);
}
.bldg-body {
    position: absolute;
    left: 0;
    top: 16px;
    width: 100%;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            var(--c-lavender) 0px, var(--c-lavender) 16px,
            #6a4c6e 16px, #6a4c6e 24px,
            var(--c-bruise) 24px, var(--c-bruise) 32px
        );
    box-shadow: inset 0 0 0 4px var(--c-bruise);
}
.bldg-body.tall { height: 320px; top: 0; }
.bldg-window {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 16px;
    top: 56px;
    background: var(--c-gold);
    box-shadow:
        inset 0 0 0 2px var(--c-bruise),
        2px 2px 0 var(--c-night);
    animation: windowGlow 2000ms steps(2) infinite;
}
.bldg-window.win2 { left: 80px; top: 56px; }
.bldg-window.win3 { left: 48px; top: 160px; }
@keyframes windowGlow {
    0%, 100% { background: var(--c-gold); }
    50%      { background: var(--c-cream); }
}
.bldg-door {
    position: absolute;
    left: 56px;
    bottom: 16px;
    width: 32px;
    height: 56px;
    background: var(--c-bruise);
    box-shadow: inset 0 0 0 2px var(--c-night);
}
.bldg-door::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--c-gold);
}
.speech-bubble {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 4px 8px;
    background: var(--c-bone);
    color: var(--c-night);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    box-shadow: 2px 2px 0 var(--c-night);
    opacity: 0;
    transition: opacity 120ms steps(2);
    pointer-events: none;
}
.building:hover .speech-bubble { opacity: 1; }

/* Lantern */
.lantern {
    position: absolute;
    width: 16px;
    height: 24px;
    z-index: 16;
    animation: lanternPulse 900ms steps(2) infinite;
}
.lantern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    width: 4px;
    height: 8px;
    background: var(--c-bruise);
}
.lantern::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: var(--c-gold);
    box-shadow:
        inset 0 0 0 2px var(--c-bruise),
        0 0 0 2px rgba(232, 192, 125, 0.3);
}
@keyframes lanternPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.4); }
}

/* Noodle cart */
.noodle-cart {
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 14;
}
.cart-body {
    position: absolute;
    left: 8px;
    top: 48px;
    width: 104px;
    height: 48px;
    background: var(--c-gold);
    box-shadow: inset 0 0 0 2px var(--c-bruise);
}
.cart-roof {
    position: absolute;
    left: 0;
    top: 24px;
    width: 120px;
    height: 24px;
    background: var(--c-verd);
    box-shadow: inset 0 0 0 2px var(--c-bruise);
}
.cart-wheel {
    position: absolute;
    bottom: 0;
    width: 24px;
    height: 24px;
    background: var(--c-bruise);
    box-shadow: inset 4px 4px 0 var(--c-night);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.wheel-l { left: 8px; }
.wheel-r { right: 8px; }
.cart-steam {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    background: var(--c-orchid);
    opacity: 0.6;
    animation: steamRise 1200ms steps(3) infinite;
}
.steam-1 { left: 32px; animation-delay: 0ms; }
.steam-2 { left: 56px; animation-delay: 400ms; }
.steam-3 { left: 80px; animation-delay: 800ms; }
@keyframes steamRise {
    0%   { transform: translateY(24px); opacity: 0; }
    33%  { transform: translateY(16px); opacity: 0.6; }
    66%  { transform: translateY(8px);  opacity: 0.4; }
    100% { transform: translateY(0);    opacity: 0; }
}

/* NPC (generic) + patrol */
.npc {
    position: absolute;
    width: 24px;
    height: 32px;
    z-index: 18;
    background: var(--c-lavender);
    box-shadow:
        inset 0 4px 0 var(--c-bruise),
        inset 0 -4px 0 var(--c-night),
        2px 2px 0 var(--c-night);
}
.npc::before {
    /* head */
    content: "";
    position: absolute;
    top: -8px;
    left: 4px;
    width: 16px;
    height: 12px;
    background: var(--c-cream);
    box-shadow: inset 0 0 0 2px var(--c-bruise);
}
.npc::after {
    /* cloak shadow */
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 24px;
    height: 4px;
    background: rgba(26, 26, 46, 0.6);
}
.npc-patrol {
    animation: patrolWalk 6000ms steps(8) infinite alternate;
}
@keyframes patrolWalk {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(64px) scaleX(1); }
    50%  { transform: translateX(128px); }
    75%  { transform: translateX(64px) scaleX(-1); }
    100% { transform: translateX(0) scaleX(-1); }
}

/* Chest */
.chest {
    position: absolute;
    width: 40px;
    height: 32px;
    z-index: 16;
    background: var(--c-gold);
    box-shadow: inset 0 0 0 2px var(--c-bruise), 2px 2px 0 var(--c-night);
}
.chest::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--c-bruise);
}
.chest::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    width: 6px;
    height: 8px;
    background: var(--c-bruise);
}

/* =========================================================
   REGION III — THE CANAL
   ========================================================= */
.canal-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 128px;
    height: 128px;
    background:
        /* dithered water: verdigris x bruise */
        repeating-linear-gradient(
            90deg,
            var(--c-verd) 0, var(--c-verd) 8px,
            var(--c-bruise) 8px, var(--c-bruise) 16px
        ),
        repeating-linear-gradient(
            0deg,
            var(--c-verd) 0, var(--c-verd) 8px,
            #3a6a5a 8px, #3a6a5a 16px
        );
    background-blend-mode: multiply;
    z-index: 3;
    box-shadow: inset 0 2px 0 var(--c-bone);
}
.ripple {
    position: absolute;
    top: 16px;
    width: 32px;
    height: 4px;
    background: var(--c-bone);
    opacity: 0.4;
    animation: rippleFlow 2000ms steps(4) infinite;
}
.ripple-1 { left: 10%;  top: 24px; animation-delay: 0ms;   }
.ripple-2 { left: 28%;  top: 48px; animation-delay: 400ms; }
.ripple-3 { left: 48%;  top: 72px; animation-delay: 800ms; }
.ripple-4 { left: 68%;  top: 32px; animation-delay: 1200ms; }
.ripple-5 { left: 86%;  top: 64px; animation-delay: 1600ms; }
@keyframes rippleFlow {
    0%   { transform: translateX(0);   opacity: 0.2; }
    50%  { transform: translateX(16px); opacity: 0.6; }
    100% { transform: translateX(32px); opacity: 0;   }
}

.rowboat {
    position: absolute;
    width: 72px;
    height: 24px;
    bottom: 168px;
    left: 120px;
    z-index: 5;
    background: var(--c-gold);
    box-shadow:
        inset 0 -4px 0 var(--c-bruise),
        inset 0 4px 0 var(--c-night);
    clip-path: polygon(8px 0, 64px 0, 72px 100%, 0 100%);
    animation: boatDrift 40s steps(40) infinite;
}
.rowboat::after {
    content: "";
    position: absolute;
    left: 32px;
    top: 4px;
    width: 4px;
    height: 16px;
    background: var(--c-bruise);
}
@keyframes boatDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(1100px); }
}

.bridge {
    position: absolute;
    left: 700px;
    bottom: 200px;
    width: 240px;
    height: 64px;
    z-index: 8;
}
.bridge-plank {
    position: absolute;
    left: 0;
    top: 24px;
    width: 100%;
    height: 16px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-gold) 0, var(--c-gold) 16px,
            var(--c-bruise) 16px, var(--c-bruise) 18px
        );
    box-shadow: inset 0 0 0 2px var(--c-bruise);
}
.bridge-rail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 16px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-bruise) 0, var(--c-bruise) 8px,
            transparent 8px, transparent 32px
        );
}
.bridge-post {
    position: absolute;
    top: 0;
    width: 8px;
    height: 40px;
    background: var(--c-bruise);
}
.bridge-post-l { left: 0; }
.bridge-post-r { right: 0; }

.npc-toll {
    background: var(--c-verd);
    box-shadow:
        inset 0 4px 0 #3a6a5a,
        inset 0 -4px 0 var(--c-night),
        2px 2px 0 var(--c-night);
}
.npc-toll .npc-body, .npc-toll .npc-hat { display: none; }
.npc-toll::before { background: var(--c-cream); }

.reeds {
    position: absolute;
    width: 96px;
    height: 48px;
    z-index: 4;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0, transparent 8px,
            var(--c-verd) 8px, var(--c-verd) 10px,
            transparent 10px, transparent 18px,
            #3a6a5a 18px, #3a6a5a 20px
        );
    animation: reedsSway 2400ms steps(3) infinite alternate;
}
@keyframes reedsSway {
    0%   { transform: skewX(0); }
    100% { transform: skewX(4deg); }
}

/* =========================================================
   REGION IV — THE LIBRARY
   ========================================================= */
.region-library {
    background:
        linear-gradient(
            to bottom,
            var(--c-night) 0, var(--c-night) 120px,
            var(--c-bruise) 120px, var(--c-bruise) 320px,
            #3a3658 320px, #3a3658 480px,
            var(--c-bruise) 480px
        );
}

.vault-ceiling {
    position: absolute;
    left: 0;
    top: 120px;
    width: 100%;
    height: 96px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-bruise) 0, var(--c-bruise) 48px,
            var(--c-lavender) 48px, var(--c-lavender) 52px,
            var(--c-bruise) 52px, var(--c-bruise) 96px
        ),
        repeating-linear-gradient(
            0deg,
            var(--c-bruise) 0, var(--c-bruise) 8px,
            #3a3658 8px, #3a3658 16px
        );
    background-blend-mode: multiply;
    z-index: 2;
    box-shadow: inset 0 -4px 0 var(--c-night);
}

.bookshelf {
    position: absolute;
    width: 240px;
    height: 240px;
    z-index: 6;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-gold) 0, var(--c-gold) 8px,
            var(--c-cream) 8px, var(--c-cream) 16px,
            #a88458 16px, #a88458 20px,
            var(--c-orchid) 20px, var(--c-orchid) 28px,
            var(--c-verd) 28px, var(--c-verd) 36px,
            var(--c-lavender) 36px, var(--c-lavender) 44px,
            var(--c-gold) 44px, var(--c-gold) 52px
        ),
        var(--c-bruise);
    box-shadow:
        inset 0 0 0 4px var(--c-bruise),
        inset 0 -8px 0 var(--c-bruise);
    transform: skewY(-4deg);
    top: 240px;
}
.bookshelf-1 { left: 80px;  }
.bookshelf-2 { left: 360px; }
.bookshelf-3 { left: 720px; top: 220px; }
.bookshelf .shelf {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--c-bruise);
}
.bookshelf .shelf:nth-child(1) { top: 24px; }
.bookshelf .shelf:nth-child(2) { top: 80px; }
.bookshelf .shelf:nth-child(3) { top: 136px; }
.bookshelf .shelf:nth-child(4) { top: 192px; }

.scholar {
    position: absolute;
    width: 20px;
    height: 32px;
    z-index: 10;
    background: var(--c-bruise);
    box-shadow: inset 0 -8px 0 var(--c-night);
}
.scholar::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 2px;
    width: 16px;
    height: 12px;
    background: var(--c-cream);
    box-shadow: inset 0 0 0 2px var(--c-bruise);
}

.desk {
    position: absolute;
    width: 80px;
    height: 24px;
    background: var(--c-gold);
    box-shadow: inset 0 0 0 2px var(--c-bruise), 2px 2px 0 var(--c-night);
    z-index: 8;
}

.opened-book {
    position: absolute;
    width: 160px;
    height: 104px;
    z-index: 12;
}
.book-spine {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--c-bruise);
    z-index: 2;
}
.book-page {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--c-cream);
    box-shadow:
        inset 0 0 0 2px var(--c-bruise),
        2px 2px 0 var(--c-night);
}
.page-l { left: 0; transform: skewY(2deg); }
.page-r { right: 0; transform: skewY(-2deg); }
.book-text {
    position: absolute;
    inset: 16px;
    color: var(--c-bruise);
    font-family: "VT323", monospace;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    z-index: 3;
    pointer-events: none;
}

/* =========================================================
   REGION V — THE CATHEDRAL GARDEN
   ========================================================= */
.region-garden {
    background:
        linear-gradient(
            to bottom,
            var(--c-night) 0, var(--c-night) 96px,
            #2a3a3a 96px, #2a3a3a 200px,
            #3a4a4a 200px, #3a4a4a 320px,
            var(--c-verd) 320px, var(--c-verd) 480px,
            #3a6a5a 480px
        );
}
.garden-wall {
    position: absolute;
    left: 0;
    right: 0;
    height: 96px;
    top: 240px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-lavender) 0, var(--c-lavender) 16px,
            var(--c-bruise) 16px, var(--c-bruise) 24px,
            #6a4c6e 24px, #6a4c6e 32px
        );
    z-index: 2;
    box-shadow: inset 0 -4px 0 var(--c-bruise), inset 0 4px 0 var(--c-lavender);
}

.fountain {
    position: absolute;
    width: 120px;
    height: 160px;
    z-index: 14;
}
.fountain-basin {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 40px;
    background: var(--c-lavender);
    box-shadow:
        inset 0 0 0 4px var(--c-bruise),
        inset 0 -8px 0 var(--c-bruise);
}
.fountain-pillar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 32px;
    width: 24px;
    height: 64px;
    background: var(--c-bone);
    box-shadow: inset 0 0 0 2px var(--c-lavender);
}
.fountain-spray {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 88px;
    width: 16px;
    height: 32px;
    background: var(--c-orchid);
    animation: spray 400ms steps(4) infinite;
    opacity: 0.8;
}
@keyframes spray {
    0%   { transform: translateX(-50%) scale(1,1);   opacity: 0.8; }
    25%  { transform: translateX(-50%) scale(1.2,0.8); opacity: 0.6; }
    50%  { transform: translateX(-50%) scale(0.8,1.2); opacity: 0.9; }
    75%  { transform: translateX(-50%) scale(1.1,0.9); opacity: 0.7; }
    100% { transform: translateX(-50%) scale(1,1);   opacity: 0.8; }
}
.fountain-mist {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 112px;
    width: 40px;
    height: 16px;
    background:
        radial-gradient(var(--c-bone) 20%, transparent 22%) 0 0 / 8px 8px,
        radial-gradient(var(--c-orchid) 20%, transparent 22%) 4px 4px / 8px 8px;
    opacity: 0.5;
    animation: mistDrift 1600ms steps(4) infinite;
}
@keyframes mistDrift {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

.bonsai {
    position: absolute;
    width: 48px;
    height: 72px;
    z-index: 10;
}
.bonsai-pot {
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 40px;
    height: 24px;
    background: var(--c-gold);
    box-shadow: inset 0 0 0 2px var(--c-bruise);
}
.bonsai-trunk {
    position: absolute;
    left: 22px;
    bottom: 20px;
    width: 4px;
    height: 24px;
    background: var(--c-bruise);
}
.bonsai-leaves {
    position: absolute;
    left: 4px;
    top: 0;
    width: 40px;
    height: 32px;
    background: var(--c-verd);
    box-shadow: inset 0 0 0 2px #3a6a5a;
}

.chessboard {
    position: absolute;
    width: 128px;
    height: 128px;
    z-index: 11;
    box-shadow: 4px 4px 0 var(--c-night);
}
.chessboard svg { display: block; image-rendering: pixelated; }

.cypress {
    position: absolute;
    width: 64px;
    height: 256px;
    z-index: 6;
}
.cypress-trunk {
    position: absolute;
    left: 28px;
    bottom: 0;
    width: 8px;
    height: 64px;
    background: var(--c-bruise);
}
.cypress-canopy {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 208px;
    background: #3a6a5a;
    box-shadow: inset 0 0 0 2px var(--c-bruise);
    clip-path: polygon(50% 0, 100% 80%, 80% 100%, 20% 100%, 0 80%);
}

.corkboard {
    position: absolute;
    width: 160px;
    height: 112px;
    z-index: 12;
}
.cork-bg {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            var(--c-gold) 0, var(--c-gold) 4px,
            #a88458 4px, #a88458 8px
        );
    box-shadow: inset 0 0 0 4px var(--c-bruise), 4px 4px 0 var(--c-night);
}
.pinned-note {
    position: absolute;
    width: 48px;
    height: 40px;
    padding: 4px;
    background: var(--c-bone);
    color: var(--c-night);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    line-height: 1.5;
    box-shadow: 2px 2px 0 var(--c-night);
    text-align: center;
}
.pinned-note::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--c-orchid);
}
.note-1 { left: 8px;   top: 16px; transform: rotate(-4deg); }
.note-2 { left: 56px;  top: 32px; transform: rotate(2deg); }
.note-3 { left: 104px; top: 20px; transform: rotate(-2deg); width: 48px; height: 56px; }

.pixel-cat {
    position: absolute;
    width: 24px;
    height: 16px;
    z-index: 14;
    background: var(--c-bruise);
    box-shadow: inset 0 4px 0 var(--c-night);
}
.pixel-cat::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 8px;
    height: 4px;
    background: var(--c-bruise);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.pixel-cat::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 2px;
    width: 10px;
    height: 2px;
    background: var(--c-bruise);
    transform-origin: left center;
    animation: catTail 1200ms steps(6) infinite alternate;
}
@keyframes catTail {
    0%   { transform: rotate(-10deg); }
    100% { transform: rotate(30deg); }
}

/* =========================================================
   REGION VI — THE EDGE OF THE MAP
   ========================================================= */
.region-edge {
    background:
        linear-gradient(
            to bottom,
            #0a0a18 0, #0a0a18 120px,
            var(--c-night) 120px, var(--c-night) 280px,
            var(--c-bruise) 280px, var(--c-bruise) 400px,
            #25223a 400px
        );
}
.degrade-band {
    position: absolute;
    left: 0;
    width: 100%;
    height: 32px;
    z-index: 2;
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-bruise) 0, var(--c-bruise) 8px,
            transparent 8px, transparent 16px
        );
    animation: bandFlicker 800ms steps(4) infinite alternate;
}
.band-1 { top: 300px; }
.band-2 { top: 340px; opacity: 0.7; }
.band-3 { top: 380px; opacity: 0.4; }
.band-4 { top: 420px; opacity: 0.2; }
@keyframes bandFlicker {
    0%   { opacity: 0.8; }
    100% { opacity: 0.3; }
}

.fractal-cliff {
    position: absolute;
    left: 1100px;
    right: 0;
    bottom: 128px;
    height: 320px;
    z-index: 3;
    background:
        repeating-linear-gradient(
            45deg,
            var(--c-night) 0, var(--c-night) 4px,
            var(--c-bruise) 4px, var(--c-bruise) 8px,
            transparent 8px, transparent 16px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0, transparent 8px,
            var(--c-lavender) 8px, var(--c-lavender) 10px,
            transparent 10px, transparent 24px
        );
    opacity: 0.7;
    animation: cliffNoise 400ms steps(3) infinite;
}
@keyframes cliffNoise {
    0%   { transform: translateX(0); }
    33%  { transform: translateX(2px); }
    66%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.npc-unknown {
    background: var(--c-night);
    box-shadow:
        inset 0 0 0 2px var(--c-lavender),
        2px 2px 0 var(--c-orchid);
    animation: unknownFlicker 1200ms steps(3) infinite alternate;
}
.npc-unknown::before {
    background: var(--c-bruise);
    box-shadow: inset 0 0 0 2px var(--c-lavender);
}
.npc-unknown::after { display: none; }
.unk-label {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    color: var(--c-orchid);
    white-space: nowrap;
}
@keyframes unknownFlicker {
    0%   { opacity: 0.6; filter: hue-rotate(0deg); }
    100% { opacity: 1.0; filter: hue-rotate(30deg); }
}

.void-noise {
    position: absolute;
    left: 1000px;
    top: 0;
    width: 500px;
    height: 100%;
    z-index: 1;
    background:
        radial-gradient(var(--c-lavender) 1px, transparent 1px),
        radial-gradient(var(--c-orchid) 1px, transparent 1px);
    background-size: 8px 8px, 16px 16px;
    background-position: 0 0, 4px 4px;
    opacity: 0.3;
    animation: voidPulse 2000ms steps(4) infinite alternate;
}
@keyframes voidPulse {
    0%   { opacity: 0.2; }
    100% { opacity: 0.5; }
}

/* =========================================================
   Wanderer sprite (cursor-follower)
   ========================================================= */
.wanderer {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 32px;
    z-index: 400;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    background: transparent;
    transition: opacity 120ms steps(2);
}
.wanderer::before {
    /* body (cloak) */
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 16px;
    height: 20px;
    background: var(--c-lavender);
    box-shadow:
        inset 0 -4px 0 var(--c-bruise),
        inset 0 4px 0 #8a6e8e,
        2px 2px 0 var(--c-night);
}
.wanderer::after {
    /* head */
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--c-cream);
    box-shadow:
        inset 0 0 0 2px var(--c-bruise),
        inset -4px -2px 0 var(--c-gold);
}
.wanderer.walk::before {
    animation: wandererWalk 400ms steps(3) infinite;
}
@keyframes wandererWalk {
    0%   { transform: translateY(0); }
    33%  { transform: translateY(-1px); }
    66%  { transform: translateY(0); }
    100% { transform: translateY(-1px); }
}

/* =========================================================
   Flying crow across sky
   ========================================================= */
.flying-crow {
    position: absolute;
    top: 80px;
    left: 0;
    width: 16px;
    height: 12px;
    background: var(--c-night);
    z-index: 20;
    box-shadow: inset 0 0 0 2px var(--c-night), 2px -2px 0 var(--c-cream);
    animation: crowFly 28s linear infinite, crowFlap 160ms steps(3) infinite;
}
.flying-crow::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 2px;
    width: 12px;
    height: 4px;
    background: var(--c-night);
}
@keyframes crowFly {
    0%   { transform: translateX(8500px) translateY(0); opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateX(-100px) translateY(24px); opacity: 0; }
}
@keyframes crowFlap {
    0%   { clip-path: polygon(0 50%, 25% 0, 50% 50%, 75% 0, 100% 50%, 100% 100%, 0 100%); }
    50%  { clip-path: polygon(0 0,   25% 50%, 50% 0,   75% 50%, 100% 0,   100% 100%, 0 100%); }
    100% { clip-path: polygon(0 50%, 25% 0, 50% 50%, 75% 0, 100% 50%, 100% 100%, 0 100%); }
}

.scroll-scrap {
    position: absolute;
    top: 120px;
    left: 0;
    width: 8px;
    height: 12px;
    background: var(--c-cream);
    z-index: 19;
    opacity: 0;
    box-shadow: inset 0 0 0 1px var(--c-bruise);
}

/* =========================================================
   Dialog box
   ========================================================= */
.dialog {
    position: fixed;
    left: 50%;
    bottom: 72px;
    transform: translateX(-50%);
    width: 480px;
    min-height: 160px;
    z-index: 2000;
}
.dialog[hidden] { display: none !important; }
.dialog-border {
    width: 100%;
    min-height: 160px;
    background: var(--c-night);
    border: 2px solid var(--c-bone);
    box-shadow:
        2px 2px 0 var(--c-lavender),
        inset 0 0 0 2px var(--c-night);
    padding: 4px;
}
.dialog-inner {
    position: relative;
    padding: 16px;
    min-height: 144px;
    background: var(--c-night);
    border: 1px solid var(--c-lavender);
}
.dialog-title {
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    color: var(--c-gold);
    margin-bottom: 16px;
    letter-spacing: 0;
}
.dialog-text {
    font-family: "VT323", monospace;
    font-size: 20px;
    line-height: 1.4;
    color: var(--c-bone);
    min-height: 80px;
    white-space: pre-wrap;
}
.dialog-prompt {
    position: absolute;
    right: 16px;
    bottom: 8px;
    color: var(--c-gold);
    font-size: 16px;
    animation: blinkPrompt 600ms steps(2) infinite;
}
@keyframes blinkPrompt {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

/* =========================================================
   Misc utility
   ========================================================= */
.clickable {
    cursor: pointer;
}
.clickable:hover {
    filter: brightness(1.2);
}

/* Screen template hidden */
template { display: none !important; }

/* =========================================================
   Small-viewport fallback: shrink frame so map still visible.
   Keep pixel crispness; layout rules identical.
   ========================================================= */
@media (max-width: 720px) {
    .hud-frame { border-width: 16px; }
    .viewport  { top: 16px; left: 16px; right: 16px; bottom: 16px; }
    .hud-top-left    { left: 24px; }
    .hud-top-right   { right: 24px; }
    .hud-bottom-left { left: 24px; }
    .hud-bottom-right{ right: 24px; }
    .dialog { width: 90%; bottom: 48px; }
}