/* ==========================================================================
   PLAYER MAP STYLES
   Extends css/style.css ([data-preview] hover tooltip reused for dots).
   Placeholder terrain art (grid/nebula) stands in for real continent map
   tiles — dot positioning (--x/--y) and counts are already real data shapes,
   sourced from characters.map / position_x / position_y once connected.
   ========================================================================== */

.pmap-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:20px;
  max-width:1300px; margin:0 auto; padding:0 5% 30px;
}
.pmap-panel{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--panel);
}
.pmap-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.pmap-panel-head h2{font-family:var(--font-display); font-size:1rem; letter-spacing:0.5px;}
.pmap-count{
  font-size:0.68rem; font-weight:700; letter-spacing:0.5px;
  color:#8fe0a8; border:1px solid rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);
  padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.pmap-canvas{
  position:relative; aspect-ratio:1/1;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(111,216,255,0.10), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(160,120,255,0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 34px),
    var(--bg);
}
.pmap-canvas.outland{
  background:
    radial-gradient(ellipse at 40% 30%, rgba(163,53,238,0.12), transparent 55%),
    radial-gradient(ellipse at 70% 65%, rgba(111,216,255,0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 34px),
    var(--bg);
}

.pmap-dot{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; cursor:default;
  box-shadow:0 0 0 4px rgba(111,216,255,0.15);
  animation:pmap-pulse 2.4s ease-in-out infinite;
}
.pmap-dot.alliance{background:#69ccf0; box-shadow:0 0 0 5px rgba(105,204,240,0.18), 0 0 10px rgba(105,204,240,0.6);}
.pmap-dot.horde{background:#ff8a8a; box-shadow:0 0 0 5px rgba(255,110,110,0.18), 0 0 10px rgba(255,110,110,0.6);}
.pmap-dot:hover{z-index:10;}
@keyframes pmap-pulse{
  0%,100%{opacity:0.85; transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.3);}
}
@media(prefers-reduced-motion:reduce){
  .pmap-dot{animation:none;}
}

.pmap-legend{
  display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap;
  max-width:1300px; margin:0 auto; padding:20px 5% 150px;
  font-size:0.8rem; color:var(--text-dim);
}
.pmap-legend > span{display:flex; align-items:center; gap:8px;}
.pmap-dot-legend{width:9px; height:9px; border-radius:50%; display:inline-block;}
.pmap-dot-legend.alliance{background:#69ccf0; box-shadow:0 0 8px rgba(105,204,240,0.6);}
.pmap-dot-legend.horde{background:#ff8a8a; box-shadow:0 0 8px rgba(255,110,110,0.6);}
.pmap-legend-note{font-size:0.74rem; opacity:0.75;}

@media(max-width:560px){
  .pmap-legend{flex-direction:column; gap:10px; text-align:center;}
}