/* Mapa ilustrado original dos cinco reinos: pontos navegáveis e acessíveis. */
.world-map{width:100%;margin:14px auto 10px;min-width:0}
.realm-map-art{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  aspect-ratio:3/2;border:3px solid #c7f2e4;border-radius:24px;
  background:linear-gradient(135deg,#afedfb,#2d7bb5 48%,#45b6a5);
  box-shadow:0 16px 35px #001c3463,inset 0 0 0 4px #ffffff4d;
}
.realm-map-art>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.realm-map-shine{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 4px #fff9cd70,inset 0 0 70px #0b344b48;
  background:linear-gradient(0deg,#071a331a,transparent 31%,#ffffff12 76%,transparent);
}
.realm-map-pin{
  position:absolute;z-index:2;display:grid;justify-items:center;gap:4px;
  transform:translate(-50%,-50%);width:clamp(110px,19%,202px);
  padding:10px 9px 8px;border-radius:16px;
  border:2px solid #e3ffe9;box-shadow:0 8px 20px #062b45aa,0 0 0 4px #ffffff3d;
  background:linear-gradient(145deg,#092c49eb,#075f68e6);
  color:#fffaf0;cursor:pointer;text-align:center;line-height:1.16;
  font-family:inherit;text-shadow:0 2px 3px #071e33;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  backdrop-filter:blur(5px);
}
.realm-map-pin .realm-pin-number{
  position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:15px;color:#184c46;text-shadow:none;
  border:2px solid #fcffe6;background:linear-gradient(140deg,#f9ffa4,#64e4c1);
  box-shadow:0 2px 9px #102b46b3;
}
.realm-pin-title{font-weight:900;font-size:clamp(10px,1.24vw,16px);letter-spacing:.15px}
.realm-pin-meta{font-size:clamp(8px,.82vw,11px);font-weight:800;color:#e2ffe8;opacity:.94;white-space:nowrap}
.realm-map-pin.realm-unlocked{animation:realmPulse 3.5s ease-in-out infinite}
.realm-map-pin.realm-unlocked:hover,.realm-map-pin.realm-unlocked:focus-visible{
  transform:translate(-50%,-50%) scale(1.09);
  border-color:#fff6a3;outline:3px solid #fdffa7;outline-offset:4px;
  box-shadow:0 10px 30px #062b45,0 0 30px #f4e891a1;
}
.realm-map-pin.realm-cleared{background:linear-gradient(135deg,#135241e9,#269664e0);border-color:#f0efaa}
.realm-map-pin.realm-locked{
  cursor:not-allowed;opacity:.82;filter:saturate(.42);
  background:linear-gradient(145deg,#2d3551e8,#3f4155e9);border-color:#c4c6df;
}
.realm-map-pin.realm-locked .realm-pin-number{background:#a7aebe;color:#35425b}
.realm-map-pin.realm-pos-0{left:24%;top:67%}
.realm-map-pin.realm-pos-1{left:22%;top:28%}
.realm-map-pin.realm-pos-2{left:54%;top:17%}
.realm-map-pin.realm-pos-3{left:82%;top:30%}
.realm-map-pin.realm-pos-4{left:76%;top:72%}
.map-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:13px;margin:13px 0 0;color:#dcf7ff;font-size:12px}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend strong{color:#fff3a4;font-size:12px}
.map-key-dot{display:inline-block;width:12px;height:12px;border:2px solid #ffffffd3;border-radius:50%}
.map-key-dot.unlocked{background:#55eeae}
.map-key-dot.cleared{background:#f6e278}
.map-key-dot.locked{background:#77819a}
@keyframes realmPulse{0%,100%{box-shadow:0 8px 20px #062b45aa,0 0 0 4px #ffffff3d}50%{box-shadow:0 8px 20px #062b45aa,0 0 0 7px #ecffab7d}}
@media(max-width:860px){
  .realm-map-pin{padding:8px 4px 6px;width:clamp(92px,20%,138px);border-radius:12px;gap:2px}
  .realm-map-pin .realm-pin-number{top:-15px;width:25px;height:25px;font-size:12px}
  .realm-pin-meta{font-size:9px;white-space:normal}
}
@media(max-width:490px){
  .realm-map-art{aspect-ratio:1.35;border-radius:16px}
  .realm-map-art>img{object-fit:fill}
  .realm-map-pin{width:30%;max-width:118px;padding:10px 4px 4px;border-width:1px}
  .realm-pin-title{font-size:10px}
  .realm-pin-meta{font-size:8px}
  .realm-map-pin.realm-pos-0{left:22%;top:67%}
  .realm-map-pin.realm-pos-1{left:23%;top:27%}
  .realm-map-pin.realm-pos-2{left:54%;top:15%}
  .realm-map-pin.realm-pos-3{left:81%;top:31%}
  .realm-map-pin.realm-pos-4{left:76%;top:75%}
  .map-legend{font-size:10px;gap:8px}
}
@media(prefers-reduced-motion:reduce){.realm-map-pin{animation:none;transition:none}}