.park-map-stage {
    position: relative;
    width: 1200px;
    height: 2200px;
    overflow: hidden;
    border: 2px solid #1ba3df;
    border-radius: 18px;
    background-color: #b9df63;
    background-image:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.15) 0 1px, transparent 1.5px),
        radial-gradient(circle at 76% 62%, rgba(75,126,45,.11) 0 1px, transparent 1.6px),
        linear-gradient(118deg, rgba(119,181,70,.18), rgba(220,241,126,.22));
    background-size: 23px 21px, 31px 29px, 100% 100%;
    transform-origin: top left;
}

.park-map-base {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 10%, rgba(250,255,211,.24) 0 10%, rgba(244,255,194,.1) 26%, transparent 48%),
        radial-gradient(ellipse at 88% 48%, rgba(61,111,43,.14) 0 8%, rgba(61,111,43,.06) 30%, transparent 58%),
        radial-gradient(ellipse at 30% 80%, rgba(235,248,157,.11) 0 12%, transparent 44%),
        linear-gradient(145deg, rgba(255,255,255,.07) 0, transparent 42%, rgba(48,94,35,.11) 100%);
    box-shadow:
        inset 0 0 110px rgba(48,91,36,.12),
        inset 0 -100px 150px rgba(44,84,33,.08);
}

.map-item {
    position: absolute;
    display: block;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0b3039;
    font-weight: 900;
    text-align: center;
    user-select: none;
    transform: translate(var(--map-x), var(--map-y)) rotate(var(--map-rotation));
    z-index: 2;
}

.map-item-static { pointer-events:none; }
.map-item[data-type="road"],.map-item[data-type="road-bend"],.map-item[data-type="footpath"],.map-item[data-type="fence"] { z-index:1; }

.map-item[data-type="road"] {
    border: 0;
    border-radius: 0;
    background-color: var(--map-item-color);
    background-image:
        radial-gradient(circle at 18% 34%, rgba(110,101,80,.27) 0 1px, transparent 1.4px),
        radial-gradient(circle at 72% 65%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
        linear-gradient(90deg, rgba(255,255,255,.24), rgba(131,122,99,.08), rgba(255,255,255,.24));
    background-size: 19px 17px, 25px 23px, 100% 100%;
    box-shadow: none;
}

.map-item[data-type="road-bend"]::before {
    position:absolute; inset:0; border-radius:0;
    background-color:var(--map-item-color);
    background-image:
        radial-gradient(circle at 18% 34%, rgba(110,101,80,.27) 0 1px, transparent 1.4px),
        radial-gradient(circle at 72% 65%, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
        linear-gradient(90deg, rgba(255,255,255,.24), rgba(131,122,99,.08), rgba(255,255,255,.24));
    background-size:19px 17px,25px 23px,100% 100%; content:"";
    -webkit-mask:radial-gradient(circle at 0 0,transparent 0 43%,#000 44% 68%,transparent 69%);
    mask:radial-gradient(circle at 0 0,transparent 0 43%,#000 44% 68%,transparent 69%);
}

.map-item[data-type="footpath"] {
    border:1px dashed rgba(114,98,67,.38); border-radius:999px; background-color:var(--map-item-color);
    background-image:radial-gradient(circle,rgba(113,96,67,.28) 0 1px,transparent 1.5px); background-size:13px 11px;
    box-shadow:0 2px 6px rgba(61,88,48,.13);
}

.map-item[data-type="fence"] {
    border: 1px solid rgba(62,40,24,.34);
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, transparent 0 38px, #573a25 38px 42px),
        repeating-linear-gradient(90deg, #896447 0 7px, #745238 7px 8px);
    box-shadow: 0 2px 4px rgba(55,37,24,.2);
}

.map-item[data-type="map-key"] { z-index:4; border:1px solid rgba(16,64,68,.18); border-radius:18px; background:rgba(255,255,255,.93); box-shadow:0 14px 35px rgba(24,60,57,.15); }
.map-key-content { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:.55em 1em; padding:1.1em; color:#123f44; font-size:clamp(8px,var(--map-label-size,12px),14px); overflow:hidden; text-align:left; }
.map-key-content[hidden] { display:none; }
.map-key-content strong { grid-column:1/-1; margin-bottom:.15em; font:800 1.65em/1.1 Georgia,serif; }
.map-key-content span { display:flex; align-items:center; gap:.6em; font-size:.78em; font-weight:800; line-height:1.2; }
.map-key-content i { display:grid; flex:0 0 1.6em; width:1.6em; height:1.6em; place-items:center; border:1px solid rgba(18,63,68,.18); border-radius:5px; background:var(--key-colour); color:#fff; font:normal 800 .8em/1 Arial,sans-serif; }

.map-item[data-type="custom-building"] { --workshop-door:#dbe2dc; border:3px solid #163b32; border-radius:6px; background:linear-gradient(145deg,rgba(255,255,255,.13),transparent 42%),linear-gradient(rgba(7,35,29,.34),rgba(7,35,29,.58)),var(--map-item-color); box-shadow:0 7px 12px rgba(21,55,44,.24),inset 0 0 0 2px rgba(255,255,255,.08); }
.map-item[data-type="custom-building"] .map-item-art { display:none; }
.map-item[data-type="custom-building"]::before { position:absolute; inset:7% 5% 50%; border-bottom:2px solid rgba(9,37,31,.58); background:linear-gradient(160deg,rgba(255,255,255,.15),transparent 38%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,rgba(0,0,0,.04) 2px 4px); content:""; }
.map-item[data-type="custom-building"]::after { position:absolute; inset:48% 7% 8%; border:2px solid #173c34; background:repeating-linear-gradient(0deg,rgba(44,70,61,.16) 0 2px,transparent 2px 8px),linear-gradient(var(--workshop-door),#adbcb3) left center/30% 100% no-repeat,linear-gradient(var(--workshop-door),#adbcb3) center/30% 100% no-repeat,linear-gradient(var(--workshop-door),#adbcb3) right center/30% 100% no-repeat; content:""; }

.map-item-art { position:absolute; left:50%; top:50%; display:block; width:100%; height:auto; aspect-ratio:1; background-image:url("images/map/park-map-sprites.png"); background-position:var(--map-sprite-x,0%) var(--map-sprite-y,0%); background-repeat:no-repeat; background-size:400% 400%; transform:translate(-50%,-50%); }
.map-item[data-type$="caravan"] .map-item-art { width:auto; height:100%; }
.map-item[data-type="lodge"] .map-item-art { filter:hue-rotate(205deg) saturate(1.2); }
.map-item-art[hidden] { display:none; }

.map-item-label { position:absolute; left:50%; bottom:-.95em; z-index:2; max-width:88%; padding:.12em .2em; overflow:hidden; border:0; background:transparent; color:#123f44; font-size:var(--map-label-size,12px); line-height:1.05; text-overflow:ellipsis; text-shadow:0 1px 2px #fff,0 0 5px rgba(255,255,255,.9); white-space:nowrap; transform:translateX(-50%); }
.map-floor-note { display:none; }
.map-item[data-type="office"] .map-item-label { display:none; }
.map-item[data-type="office"] .map-floor-note { position:absolute; left:50%; bottom:-.9em; z-index:3; display:grid; min-width:78%; padding:.12em .2em; color:#123f44; text-shadow:0 1px 2px #fff,0 0 5px rgba(255,255,255,.9); font-size:var(--map-label-size,12px); line-height:1.05; transform:translateX(-50%); }
.map-floor-note b,.map-floor-note small { display:block; white-space:nowrap; }
.map-floor-note small { margin-top:.18em; color:#557377; font-size:.68em; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.map-item.hide-label .map-item-label,.map-item.hide-label .map-floor-note { display:none; }
.map-item[data-type="label"] { border:1px dashed rgba(11,48,57,.3); background:rgba(255,255,255,.82); }
.map-item[data-type="label"] .map-item-label { top:50%; bottom:auto; max-width:96%; color:#123f44; text-shadow:none; transform:translate(-50%,-50%); }