/* ==========================================================================
   world-map.css — Mapas de região ilustrados (world-region-XX, 11 faixas)
   ========================================================================== */

.world-map-modal{position:fixed;inset:0;z-index:45;background:#040b08ef;padding:26px;display:grid;place-items:center;backdrop-filter:blur(8px)}
.world-map-modal.hidden{display:none}
.world-map-shell{width:min(1180px,96vw);height:min(780px,92vh);background:#0c1812;border:1px solid #3b5045;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px #000;display:flex;flex-direction:column}

.map-header{height:92px;flex-shrink:0;display:grid;grid-template-columns:1fr auto 40px;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);background:#0c1913;gap:16px}
.map-header h2{font-size:20px;margin:0}
.map-range-wrap{text-align:center}
.map-range-wrap>small{font:500 7px DM Mono;color:#6f8478;letter-spacing:1px;display:block}
.map-range-switch{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;justify-content:center}
.map-range-switch button{border:1px solid var(--line);background:#111f19;color:#72857a;border-radius:5px;padding:7px 10px;font:500 9px DM Mono;cursor:pointer;transition:.18s}
.map-range-switch button:hover{color:#bfe39a;border-color:#5a8050}
.map-range-switch button.active{border-color:var(--map-accent,#f0e5b4);background:color-mix(in srgb,var(--map-accent,#f0e5b4) 18%,#243b29);color:var(--map-accent,#f0e5b4);box-shadow:0 0 15px color-mix(in srgb,var(--map-accent,#f0e5b4) 30%,transparent)}
.map-range-switch button.bosses-tab{border-color:#6a4a3a;color:#c9a090}
.map-range-switch button.bosses-tab:hover{color:#f0c8b0;border-color:#a07050}
.map-range-switch button.bosses-tab.active{border-color:#e5a84e;background:color-mix(in srgb,#e5a84e 16%,#2a1a12);color:#e5a84e;box-shadow:0 0 15px #e5a84e40}
.map-close{justify-self:end;width:34px;height:34px;border:1px solid var(--line);border-radius:7px;background:#14221b;color:#91a198;font-size:20px;cursor:pointer}
.map-close:hover{color:#e8f0e8;border-color:#5a8050}

.world-map-canvas{position:relative;flex:1;min-height:0;overflow:hidden;background:#0a1210;
  --map-sky:#7ea086;--map-deep:#5a8054;--map-abyss:#132a28;--map-accent:#f0e5b4;
  aspect-ratio:1000/620;width:100%;max-height:100%;align-self:center}
.world-map-canvas.mode-bosses{--map-accent:#e5a84e}

.map-biome-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;image-rendering:pixelated;z-index:1;background:#0a1820;transition:opacity .22s ease}
.map-biome-img.map-biome-swapping{opacity:.35}
.map-biome-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 42%,#040a0866 88%,#020605aa 100%)}

.map-paths{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.map-paths .route-path{fill:none;stroke:var(--map-accent,#f0e5b4);stroke-width:2;stroke-dasharray:5 7;opacity:.45;stroke-linecap:round}

.range-0{--map-accent:#f0e5b4}
.range-1{--map-accent:#c8e090}
.range-2{--map-accent:#b6d585}
.range-3{--map-accent:#8aa590}
.range-4{--map-accent:#f0a050}
.range-5{--map-accent:#e0e0f5}
.range-6{--map-accent:#9ec8e0}
.range-7{--map-accent:#a8b4e0}
.range-8{--map-accent:#7ec8d8}
.range-9{--map-accent:#d0b0e8}
.range-10{--map-accent:#f0d080}
.range-11{--map-accent:#ee895f}.range-11 .map-biome-img{filter:sepia(.5) saturate(1.45) hue-rotate(328deg) brightness(.72)}
.range-12{--map-accent:#c1b3d7}.range-12 .map-biome-img{filter:grayscale(.65) contrast(1.3) brightness(.54) hue-rotate(190deg)}
.range-13{--map-accent:#c77cff}.range-13 .map-biome-img{filter:hue-rotate(48deg) saturate(1.55) brightness(.48) contrast(1.25)}
.range-14{--map-accent:#ffd36b}.range-14 .map-biome-img{filter:hue-rotate(175deg) saturate(1.25) brightness(.62) contrast(1.35)}
.world-map-canvas.zone-ashen-spire .map-biome-vignette{background:radial-gradient(circle at 50% 44%,#ff6a2a18,transparent 34%),linear-gradient(18deg,#5e160d66,transparent 48%),radial-gradient(ellipse at 50% 50%,transparent 34%,#160604bb 100%)}
.world-map-canvas.zone-obsidian-court .map-biome-vignette{background:repeating-linear-gradient(112deg,#b7a7cc0b 0 2px,transparent 2px 38px),radial-gradient(ellipse at 50% 50%,transparent 28%,#050409dc 100%)}
.world-map-canvas.zone-eclipse-rift .map-biome-vignette{background:radial-gradient(circle at 50% 44%,#bb57ff20 0 7%,#09020da8 8% 24%,transparent 42%),radial-gradient(ellipse at 50% 50%,transparent 28%,#050208e8 100%)}
.world-map-canvas.zone-final-horizon .map-biome-vignette{background:linear-gradient(135deg,transparent 43%,#ffd66a16 44% 45%,transparent 46%),radial-gradient(circle at 50% 45%,#ffd36b18,transparent 30%),radial-gradient(ellipse at 50% 50%,transparent 26%,#020507e8 100%)}

.map-city-node{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center}
.map-city-node.hidden{display:none}
.map-city-node>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff8d6,#f0e5b4 55%,#c9b873);color:#243626;border:4px solid #fff8d6;box-shadow:0 0 0 5px #273d2e,0 0 22px rgba(240,229,180,.55),0 6px 18px #0008;font-size:22px}
.map-city-node b{font-size:9px;margin-top:7px;background:#0b1611e8;padding:3px 7px;border-radius:3px;letter-spacing:.5px}
.map-city-node small{font:500 6px DM Mono;color:#b6dc83;margin-top:2px}

.map-range-label{position:absolute;z-index:6;top:16px;left:16px;background:#0a1510e0;border:1px solid #2c4639;border-radius:8px;padding:8px 13px;font:700 10px Manrope;color:var(--map-accent,#f0e5b4);letter-spacing:.6px;text-transform:uppercase;box-shadow:0 6px 14px #0006}
.map-range-label::before{content:"◈ ";opacity:.7}

.map-route-nodes{position:absolute;inset:0;z-index:4}
.map-route-nodes:has(.map-route-node:hover),.map-route-nodes:has(.map-route-node:focus-visible){z-index:8}
.map-route-nodes:has(.map-route-node:hover) .map-route-node:not(:hover),.map-route-nodes:has(.map-route-node:focus-visible) .map-route-node:not(:focus-visible){z-index:0}
.map-route-node{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;z-index:4}
.map-route-node .orb{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--node-color) 88%,#fff 22%),var(--node-color) 58%,color-mix(in srgb,var(--node-color) 60%,#000 30%));
  color:#08120d;font-size:16px;font-weight:800;position:relative;
  border:2.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 3px #0a1510aa,0 0 14px color-mix(in srgb,var(--node-color) 55%,transparent),0 7px 14px #0006;
  transition:transform .18s,box-shadow .18s}
.map-route-node:hover .orb{transform:scale(1.22);box-shadow:0 0 0 3px #0a1510,0 0 26px var(--node-color),0 10px 18px #0008}
.map-route-node:hover,.map-route-node:focus-visible{z-index:7}
.map-route-node:active .orb{transform:scale(1.1)}
.map-route-node .orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--node-color) 60%,transparent);opacity:0;animation:nodePulse 2.4s ease-out infinite;pointer-events:none}
.map-route-node:hover .orb::after{opacity:0}
@keyframes nodePulse{0%{transform:scale(.85);opacity:.55}100%{transform:scale(1.55);opacity:0}}

.map-route-node.locked{filter:saturate(.35)}
.map-route-node.locked .orb{background:linear-gradient(145deg,#4a514d,#242a27);color:#d9dedb;border-color:#9b9f9c;box-shadow:0 0 0 3px #0a1510aa,0 7px 14px #0008}
.map-range-switch button.range-locked{color:#7d817e;border-style:dashed}
.route-hover-card{position:absolute;z-index:20;width:220px;max-width:min(220px,80vw);padding:10px;border:1px solid color-mix(in srgb,var(--node-color) 55%,#4b554f);border-radius:7px;background:#08110d;color:#e3eee5;box-shadow:0 15px 35px #000d;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,visibility .14s;transform:none}
.map-route-node.tooltip-down .route-hover-card{top:calc(100% + 10px)}
.map-route-node.tooltip-up .route-hover-card{bottom:calc(100% + 10px)}
.map-route-node.tooltip-center .route-hover-card{left:50%;transform:translateX(-50%)}
.map-route-node.tooltip-left .route-hover-card{left:-4px}
.map-route-node.tooltip-right .route-hover-card{right:-4px}
.map-route-node:hover .route-hover-card,.map-route-node:focus-visible .route-hover-card{opacity:1;visibility:visible}
.route-hover-card>strong{display:block;color:var(--node-color);font:700 10px Manrope;text-transform:uppercase;letter-spacing:.5px}
.route-hover-card>small{display:block;margin:3px 0 8px;color:#93a49b;font:500 7px DM Mono}
.route-encounter-grid{display:grid;grid-template-columns:1fr;gap:4px}
.route-encounter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;min-width:0;padding:4px 6px;border:1px solid #ffffff0d;border-radius:6px;background:#0c1611}
.route-encounter .poke-portrait{width:34px;height:34px}
.route-encounter .poke-portrait img{width:26px;height:26px}
.route-encounter-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.route-encounter b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 9px Manrope;color:#dce7df}
.route-encounter em{color:#d7c675;font:500 8px DM Mono;font-style:normal}
.map-route-node:has(.route-hover-card):after,.map-route-node:has(.route-hover-card):before{display:none}

.map-route-node:after{content:attr(data-label);position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);
  background:#0a1510f5;color:#e3eee5;border:1px solid color-mix(in srgb,var(--node-color) 50%,#2c4639);
  padding:4px 8px;border-radius:5px;font:600 7px DM Mono;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 6px 14px #0007}
.map-route-node:hover:after{opacity:1}
.map-route-node:before{content:"";position:absolute;left:50%;top:calc(100% - 2px);transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:color-mix(in srgb,var(--node-color) 60%,#0a1510);opacity:0;transition:opacity .15s}
.map-route-node:hover:before{opacity:1}

.map-bosses-panel{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none}
.map-bosses-panel.hidden{display:none}
.map-bosses-card{pointer-events:auto;width:min(620px,88%);max-height:88%;overflow:auto;padding:24px 26px;border:1px solid #6d5438;border-radius:12px;
  background:linear-gradient(160deg,#1a1610ee,#0c100de8);box-shadow:0 24px 60px #000c;text-align:center}
.map-bosses-card .eyebrow{display:block;font:600 8px DM Mono;letter-spacing:1.2px;color:#e5a84e;margin-bottom:8px}
.map-bosses-card h3{margin:0 0 10px;font-size:22px;color:#f2e6c8}
.map-bosses-card p{margin:0;color:#a89a82;font-size:12px;line-height:1.55}

.map-legend{position:absolute;z-index:6;left:18px;right:18px;bottom:15px;height:34px;display:flex;align-items:center;gap:18px;
  background:#09140fdd;border:1px solid #33483d;border-radius:6px;padding:0 13px;font:500 7px DM Mono;color:#8da096}
.map-legend span:last-child{margin-left:auto;color:#c9d7ce}
.map-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.safe-dot{background:#eee1a4}
.route-dot{background:var(--map-accent,#f0e5b4)}
.world-map-canvas.mode-bosses .map-city-node,
.world-map-canvas.mode-bosses .map-route-nodes,
.world-map-canvas.mode-bosses .map-paths{opacity:0;pointer-events:none}
.world-map-canvas.mode-bosses .map-legend{display:none}

@media(max-width:900px){
  .map-header{height:auto;min-height:115px;grid-template-columns:1fr 35px;padding:12px 16px}
  .map-range-wrap{grid-column:1/3;grid-row:2}
  .map-close{grid-column:2;grid-row:1}
  .world-map-canvas{height:auto;flex:1;min-height:0}
  .map-range-switch{overflow:auto;flex-wrap:nowrap;justify-content:flex-start}
  .map-range-switch button{padding:7px 10px;flex-shrink:0}
  .map-route-node{width:32px;height:32px}
  .map-route-node .orb{font-size:12px}
  .map-legend span:last-child{display:none}
  .map-range-label{font-size:8px;padding:6px 10px}
}
@media(max-width:720px){
  .world-map-modal{padding:8px 8px 63px}
  .world-map-shell{height:100%;width:100%}
  .map-header h2{font-size:16px}
  .map-route-node:after,.map-route-node:before{display:none}
  .map-city-node>span{width:38px;height:38px;font-size:17px}
}