/* UI buttons sit outside the transformed terrain canvas, so SVGs/text
   rasterize at native screen size instead of being enlarged 300-400%. */
#dmzViewport .dmz-crisp-pin-overlay{
 position:absolute;inset:0;z-index:25;pointer-events:none;
 overflow:hidden;isolation:isolate;
}
#dmzViewport .dmz-crisp-pin-overlay[hidden],
#dmzViewport .dmz-crisp-pin[hidden]{display:none!important}
#dmzViewport.dmz-crisp-active #dmzCanvas .dmz-marker,
#dmzViewport.dmz-crisp-active #dmzCanvas .dmz-extra-point,
#dmzViewport.dmz-crisp-active #dmzCanvas .dmz-service-pin,
#dmzViewport.dmz-crisp-active #dmzCanvas .dmz-spawn-pin,
#dmzViewport.dmz-crisp-active #dmzCanvas .dmz-my-pin{
 opacity:0!important;
}
#dmzViewport .dmz-crisp-pin{
 position:absolute;transform:translate(-50%,-50%);
 width:32px;height:32px;min-width:32px;min-height:32px;
 display:grid;place-items:center;padding:5px;margin:0;
 border:2px solid #e1ebec;border-radius:9px;
 background:#112b35;color:#fff;
 box-shadow:0 2px 8px #000b,0 0 0 2px #0d1a25b8;
 pointer-events:none;outline-offset:3px;
}
#dmzViewport .dmz-crisp-pin img,
#dmzViewport .dmz-crisp-pin svg{
 width:19px;height:19px;min-width:0;min-height:0;display:block;
 image-rendering:auto;fill:none;stroke:currentColor;
}
#dmzViewport .dmz-crisp-pin[data-kind="service"]{border-color:#75dbbd;background:#173c40}
#dmzViewport .dmz-crisp-pin[data-kind="fortress"]{border-color:#e7bf78;background:#503722}
#dmzViewport .dmz-crisp-pin[data-kind="minor"]{width:26px;height:26px;min-width:26px;min-height:26px;padding:4px;border-color:#b3cad4}
#dmzViewport .dmz-crisp-pin[data-kind="spawn"]{border-color:#ffa45f;background:#49311d}
#dmzViewport .dmz-crisp-pin[data-kind="personal"]{border-color:#cfb0fa;background:#593780}
#dmzViewport .dmz-crisp-pin.is-selected,
#dmzViewport .dmz-crisp-pin:is(:hover,:focus-visible){
 border-color:#fff;box-shadow:0 0 0 4px #f4dca2a8,0 2px 12px #000d;z-index:2;
}

/* Give the untransformed hit-test layer an honest pointer affordance. The
   original POI remains the keyboard target, so mirror focus in this layer. */
#dmzViewport.dmz-crisp-hover-hit:not(.is-dragging){cursor:pointer}
#dmzViewport .dmz-crisp-pin.is-focused{
 border-color:#fff;box-shadow:0 0 0 4px #f4dca2a8,0 2px 12px #000d;z-index:3;
}


/* V7: click the actual on-screen SVG target, not a transparent upscaled marker.
   Overlay background still passes drag/wheel through to the real map. */
#dmzViewport.dmz-crisp-active .dmz-crisp-pin-overlay{pointer-events:none}
#dmzViewport.dmz-crisp-active .dmz-crisp-pin:not([hidden]){
 pointer-events:auto;cursor:pointer;touch-action:manipulation;
 width:38px;height:38px;min-width:38px;min-height:38px;
 border-radius:8px;
 transition:border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
#dmzViewport.dmz-crisp-active .dmz-crisp-pin[data-kind="minor"]:not([hidden]){
 width:33px;height:33px;min-width:33px;min-height:33px;
}
#dmzViewport.dmz-crisp-active .dmz-crisp-pin:is(:hover,:focus-visible){
 border-color:#f4f9de;
 background:#34514a;
 box-shadow:0 0 0 4px #d9f06c80,0 5px 16px #000b;
 outline:2px solid #d9f06c;outline-offset:3px;
 z-index:9;
}
#dmzViewport.dmz-crisp-active .dmz-crisp-pin.is-selected{
 border-color:#f5d77c;
 background:#403520;
 box-shadow:0 0 0 4px #f7c96f7d,0 2px 16px #000c;
 z-index:10;
}
@media(prefers-reduced-motion:reduce){
 #dmzViewport.dmz-crisp-active .dmz-crisp-pin{transition:none!important}
}