.map-page{padding:4px 2px 20px}
.map-header h1{margin:0 0 6px;font:700 30px Rajdhani,sans-serif;text-transform:uppercase}
.map-header p{margin:0 0 16px;color:var(--muted);max-width:640px}
.map-stats{display:flex;gap:14px;margin-bottom:18px}
.map-stats div{flex:1;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(19,36,59,.65);text-align:center}
.map-stats strong{display:block;font:700 22px Rajdhani,sans-serif;color:#fff}
.map-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

.map-search-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.map-search-box{flex:1;min-width:220px;display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#081425}
.map-search-box input{flex:1;padding:11px 12px;background:none;border:0;outline:0;color:#fff;font:500 14px Montserrat,sans-serif}
.map-search-box span{padding-right:12px;color:var(--muted)}
.map-floor-tabs{display:flex;flex-wrap:wrap;gap:6px}
.map-floor-tabs button{padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:#0c1a2b;color:#b7c9dc;font:600 12px Montserrat,sans-serif;cursor:pointer}
.map-floor-tabs button:hover{border-color:var(--cyan);color:#fff}
.map-floor-tabs button.active{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border-color:transparent}

.map-scatter-wrap{border:1px solid var(--line);border-radius:16px;background:rgba(7,16,31,.75);padding:10px;margin-bottom:20px}
.map-scatter-outer{position:relative}
.map-scatter-inner{position:relative;height:72vh;min-height:460px;max-height:820px;overflow:auto;border-radius:10px;background:#040a14;cursor:grab;overscroll-behavior:contain}
.map-scatter-inner.map-scatter-dragging{cursor:grabbing;user-select:none}
.map-scatter-canvas{position:relative;transform-origin:top left}
.map-scatter-canvas img{display:block;width:100%;height:100%;image-rendering:pixelated;-webkit-user-drag:none;user-select:none;pointer-events:none}
#mapScatter{position:absolute;left:0;top:0;width:100%;height:100%}
.map-scatter-dot{cursor:pointer;transition:opacity .15s}
.map-scatter-dot:hover{opacity:.7}
.map-scatter-hint{margin:8px 2px 0;font-size:11px;color:var(--muted);text-align:center}
.map-zoom-controls{position:absolute;right:20px;bottom:20px;z-index:5;display:flex;flex-direction:column;gap:4px}
.map-zoom-controls button{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:rgba(8,20,37,.92);color:#fff;font:700 18px Montserrat,sans-serif;cursor:pointer;line-height:1}
.map-zoom-controls button:hover{border-color:var(--cyan);color:var(--cyan)}

.map-zone-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.map-zone-card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(19,36,59,.9),rgba(10,23,40,.92));padding:14px;scroll-margin-top:100px}
.map-zone-card.map-zone-highlight{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(84,207,255,.25)}
.map-zone-card h3{margin:0 0 4px;display:flex;align-items:center;gap:8px;font:700 15px Rajdhani,sans-serif;color:#fff}
.map-zone-card-icon{width:26px;height:26px;object-fit:contain;flex:none}
.map-zone-card .map-zone-meta{margin:0 0 10px;font-size:11px;color:var(--muted)}
.map-zone-monsters{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto}
.map-zone-monsters div{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.03)}
.map-zone-monsters img{width:20px;height:20px;object-fit:contain;flex:none}
.map-zone-monsters b{flex:1;color:#e7f0f8;font-weight:600}
.map-zone-monsters span{color:var(--cyan);font-weight:700}
.map-empty-state{padding:40px 20px;text-align:center;color:var(--muted);grid-column:1/-1}

.map-pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:18px}
.map-pagination button{min-width:34px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#0c1a2b;color:#b7c9dc;font:600 12px Montserrat,sans-serif;cursor:pointer}
.map-pagination button:hover{border-color:var(--cyan);color:#fff}
.map-pagination button.active{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border-color:transparent}

@media(max-width:700px){.map-stats{flex-wrap:wrap}.map-stats div{min-width:45%}}