/* KINGDOM FLASH — Dawn Realm isometric game-world map (DOC Chapter 03).
   Standalone artwork; interactive inspector is a DOC feature, not a game client. */
.realm-map-shell{
  --map-gold:#f4c46b;--map-ink:#0f2039;--map-ice:#c7e5f8;
  width:100%;margin:25px auto 11px;border:5px solid #6a4b32;border-radius:17px;
  background:#12233e;overflow:hidden;position:relative;isolation:isolate;
  box-shadow:inset 0 0 0 3px #d6a14f,0 4px 0 #0b1428,0 14px 32px #0008
}
.realm-map-shell::before{
  content:"";position:absolute;inset:0;z-index:10;border:2px solid #f1c57663;border-radius:11px;pointer-events:none
}
.realm-map-topbar{
  position:relative;z-index:3;min-height:69px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px clamp(13px,2.4vw,22px);
  background:linear-gradient(90deg,#1a304c 0%,#203a5d 50%,#1a273f 100%);
  border-bottom:2px solid #b88746;
  box-shadow:0 4px 14px #07121b77
}
.realm-map-title{display:flex;flex-direction:column;gap:0;min-width:0}
.realm-map-title .map-eyebrow{font:800 9px/1.4 'Baloo 2',sans-serif;color:#e1bb77;letter-spacing:1.8px}
.realm-map-title strong{
  color:#fff0c9;font:700 clamp(17px,2vw,25px)/1.05 'Fredoka',sans-serif;letter-spacing:.3px;
  text-shadow:0 2px #73482c
}
.realm-map-title small{color:#a7c5db;letter-spacing:1px;font-size:9px;font-weight:700}
.realm-map-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.realm-map-actions button{
  border-radius:8px;padding:9px 13px;min-height:38px;border:1px solid #7a93b6;
  background:linear-gradient(#33557c,#1a3155);color:#ddecff;
  font:800 10px 'Baloo 2',sans-serif;letter-spacing:.5px;white-space:nowrap;
  box-shadow:inset 0 1px #acd2ef52,0 3px #101a31;cursor:pointer;
  transition:transform .15s,filter .15s
}
.realm-map-actions button:hover{transform:translateY(-1px);filter:brightness(1.12)}
.realm-map-actions button:focus-visible{outline:3px solid #ffcc68;outline-offset:3px}
.realm-map-actions button[aria-pressed="true"]{color:#19324e;border-color:#fdcc72;background:linear-gradient(#f9e8a7,#dba450)}
.realm-map-actions button.map-action-gold{
  border-color:#bd853e;color:#41280e;background:linear-gradient(#ffe7a6,#edac3c);
  box-shadow:inset 0 1px #fff8cf,0 3px #774828
}
.realm-map-canvas{position:relative;width:100%;background:#3b704d;overflow:hidden;aspect-ratio:16 / 9}
.realm-map-canvas::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px #0819319e;
  z-index:1;pointer-events:none
}
.realm-map-image{width:100%;height:100%;object-fit:contain;object-position:center;display:block;user-select:none}
.realm-map-shimmer{
  position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(109deg,#eae6b700, #ffffff08 34%,#d1f8ff00 53%),
    linear-gradient(0deg,#09213a30 0%,transparent 25%);
}
.realm-map-pin{
  --pin-x:50%;--pin-y:50%;
  position:absolute;z-index:3;left:var(--pin-x);top:var(--pin-y);
  width:29px;height:29px;display:grid;place-items:center;cursor:pointer;
  border:2px solid #ffdf88;border-radius:50%;padding:0;
  color:#ffeab8;font:700 15px/1 'Fredoka',sans-serif;
  background:radial-gradient(circle at 30% 15%,#5b89a4,#142b4b 75%);
  box-shadow:inset 0 1px #d2f7ff90,0 3px #0b1528d4,0 2px 15px #081226b3;
  transform:translate(-50%,-50%);transition:transform .17s,background .17s,box-shadow .17s;
  touch-action:manipulation
}
.realm-map-pin:focus-visible{outline:3px solid #fff6a0;outline-offset:4px}
.realm-map-pin.selected{
  background:radial-gradient(circle at 30% 20%,#ffefb3,#df9b40 82%);
  border-color:#fff4b9;color:#45240d;transform:translate(-50%,-50%) scale(1.16);
  box-shadow:0 0 0 5px #ffc85748,0 0 16px #ffca57a8,0 3px #7c4f21
}
.realm-map-pin:hover{transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 0 5px #ffe49b52,0 4px 12px #050c20a3}
.realm-map-pin .pin-glyph{pointer-events:none;text-shadow:0 1px #141f3180}
.realm-map-pin .pin-label{
  pointer-events:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#102543e8;color:#fff1cf;font:800 9px/1.1 'Baloo 2',sans-serif;letter-spacing:.7px;
  border:1px solid #e7bd69;border-radius:5px;white-space:nowrap;padding:5px 7px;box-shadow:0 3px 6px #071427a3;
  opacity:0;transition:opacity .15s
}
.realm-map-pin:hover .pin-label,.realm-map-pin:focus-visible .pin-label,.realm-map-pin.selected .pin-label{opacity:1}
.realm-map-pin .pin-label::after{content:"";position:absolute;top:100%;left:calc(50% - 4px);border:4px solid transparent;border-top-color:#d2a76a}
.realm-defense-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;transition:opacity .22s}
.realm-defense-overlay circle{fill:rgba(78,187,239,.045);stroke:#a6eaff;stroke-width:1.5;stroke-dasharray:7 8;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #0b4f80)}
.realm-map-shell.defense-view .realm-defense-overlay{opacity:1}
.realm-map-shell.defense-view .realm-map-image{filter:saturate(.83) brightness(.89)}
.realm-map-shell.defense-view .realm-map-pin[data-map-point="towers"],
.realm-map-shell.defense-view .realm-map-pin[data-map-point="gate"]{box-shadow:0 0 0 5px #79ddff81,0 0 22px #75dfff}
.realm-map-footer{
  display:flex;align-items:center;gap:14px;padding:13px clamp(13px,2vw,20px);min-height:105px;
  background:linear-gradient(118deg,#203b5c,#162844 75%);border-top:3px solid #d2a460
}
.realm-map-selected-icon{
  width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;
  background:linear-gradient(#375b88,#192943);border:2px solid #e0b467;border-radius:12px;
  box-shadow:inset 0 0 0 2px #7ba1bf44,0 3px #0e1b32;
  color:#ffe0a5;text-shadow:0 2px #805027;font:800 31px 'Fredoka',sans-serif
}
.realm-map-selected-copy{flex:1;min-width:0}
.realm-map-selected-copy>span{display:block;color:#9dd4ec;font:800 9px 'Baloo 2',sans-serif;letter-spacing:1.2px}
.realm-map-selected-copy h3{font:700 clamp(16px,1.8vw,22px) 'Fredoka',sans-serif;color:#ffe4a5;margin:4px 0 3px}
.realm-map-selected-copy p{color:#cbdcf0!important;font-size:12px!important;line-height:1.5!important;margin:0!important;max-width:560px}
.realm-map-zoom-dialog{
  padding:0;border:5px solid #bb9158;border-radius:13px;color:#eaf2ff;
  background:#0e1e36;width:min(96vw,1450px);max-width:96vw;
  max-height:95vh;box-shadow:0 18px 60px #020916d6;overflow:hidden
}
.realm-map-zoom-dialog::backdrop{background:#040a17cf;backdrop-filter:blur(5px)}
.realm-map-zoom-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 16px;color:#ffe1a1;letter-spacing:1px;font-size:12px;font-weight:800;
  background:#1c324e;border-bottom:2px solid #e1ae5d
}
.realm-map-zoom-toolbar button{
  flex:none;border:1px solid #b88951;border-radius:6px;background:#294365;color:#ffe2a8;
  font:800 12px 'Baloo 2',sans-serif;padding:6px 12px;cursor:pointer
}
.realm-map-zoom-toolbar button:hover{background:#416388}
.realm-map-zoom-dialog>img{display:block;width:100%;height:auto;max-height:calc(95vh - 110px);object-fit:contain}
.realm-map-zoom-dialog>p{
  text-align:center;color:#b7cfe9!important;font-size:11px!important;line-height:1.4!important;margin:7px auto 11px!important;padding:0 12px
}
@media(max-width:850px){
  .realm-map-topbar{padding:10px 13px}
  .realm-map-title strong{font-size:19px}
  .realm-map-footer{gap:11px}
}
@media(max-width:630px){
  .realm-map-shell{margin:20px auto 10px;border-width:3px;border-radius:13px}
  .realm-map-topbar{flex-wrap:wrap;gap:10px}
  .realm-map-title strong{font-size:18px}
  .realm-map-actions{width:100%;justify-content:flex-start}
  .realm-map-actions button{padding:7px 9px;font-size:10px;min-height:34px}
  .realm-map-pin{width:22px;height:22px;font-size:12px;border-width:1.5px}
  .realm-map-pin .pin-label{font-size:7px;bottom:calc(100% + 5px);padding:3px 5px}
  .realm-map-footer{padding:12px 11px;min-height:100px}
  .realm-map-selected-icon{width:44px;height:44px;flex-basis:44px;font-size:25px}
  .realm-map-selected-copy h3{font-size:17px}
  .realm-map-selected-copy p{font-size:11px!important}
  .realm-map-zoom-toolbar{padding:8px;font-size:10px}
  .realm-map-zoom-toolbar button{font-size:10px;padding:5px 7px}
}
@media(prefers-reduced-motion:reduce){.realm-map-pin,.realm-defense-overlay,.realm-map-image{transition:none!important}}
@media print{
  .realm-map-actions,.realm-map-pin,.realm-defense-overlay{display:none!important}
  .realm-map-shell{break-inside:avoid;box-shadow:none;border:1px solid #888}
  .realm-map-image{filter:none!important}
  .realm-map-footer{background:#fff;color:#14253f}
  .realm-map-selected-copy h3,.realm-map-selected-icon{color:#3b2617}
  .realm-map-selected-copy p{color:#23344d!important}
}

/* Source-image calibration: hotspots use percentage coordinates against an
   uncropped 1600 × 900 image. Edge pins keep their labels inside the map. */
.realm-map-pin[data-map-point="towers"] .pin-label,
.realm-map-pin[data-map-point="farms"] .pin-label,
.realm-map-pin[data-map-point="workshops"] .pin-label{
  left:auto;right:0;transform:none
}
.realm-map-pin[data-map-point="quarry"] .pin-label{
  left:0;transform:none
}