#scene-map{display:flex;flex-direction:column;padding:0;background:radial-gradient(ellipse at 50% 20%,rgba(20,30,60,0.4) 0%,transparent 50%),var(--bg-dark)}
.map-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(0,0,0,0.4);border-bottom:1px solid #222;flex-shrink:0;z-index:5}
.map-player-info{display:flex;align-items:center;gap:12px}
.map-player-name{font-family:var(--font-heading);font-size:0.85rem;color:var(--gold);letter-spacing:1px}
.map-player-hp{font-size:0.8rem;display:flex;align-items:center;gap:4px}
.map-player-hp img{width:14px;height:14px;image-rendering:pixelated}
.map-floor-title{font-family:var(--font-heading);font-size:1rem;color:var(--text-main);letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,0.6)}
.map-floor-title .act-label{color:var(--gold)}
.map-resources{display:flex;gap:16px;font-size:0.85rem}
.map-resource{display:flex;align-items:center;gap:4px}
.map-resource img{width:16px;height:16px;image-rendering:pixelated}
.map-resource .gold-val{color:var(--gold);font-weight:700}

/* Map body with connecting paths */
.map-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column-reverse;align-items:center;gap:0;position:relative}

/* SVG paths layer */
.map-paths-svg{position:absolute;inset:0;pointer-events:none;z-index:1}
.map-path-line{stroke:#333;stroke-width:2;fill:none;stroke-dasharray:6,4}
.map-path-line.active{stroke:var(--gold-dark);stroke-width:2.5;stroke-dasharray:none;filter:drop-shadow(0 0 4px rgba(255,215,0,0.3))}
.map-path-line.completed{stroke:#444;stroke-width:1.5;stroke-dasharray:none;opacity:0.4}

.map-row{display:flex;align-items:center;justify-content:center;gap:30px;padding:16px 0;position:relative;z-index:2}

/* Map nodes with distinct styling per type */
.map-node{width:64px;height:64px;background:var(--bg-card);border:2px solid #444;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-med);position:relative;font-size:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.map-node:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,0.3);transform:scale(1.1)}
.map-node.available{border-color:#4a4;box-shadow:0 0 10px rgba(68,170,68,0.3);animation:nodePulse 2s ease-in-out infinite}
.map-node.completed{opacity:0.35;pointer-events:none;border-color:#333;box-shadow:none}
.map-node.current{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,0.5)}
.map-node.locked{opacity:0.2;pointer-events:none;cursor:default;box-shadow:none}
.map-node-icon{pointer-events:none}
.map-node-label{position:absolute;bottom:-18px;font-size:0.6rem;color:var(--text-dim);white-space:nowrap;letter-spacing:0.5px;font-family:var(--font-heading)}

/* Node type colors */
.map-node.type-battle{border-color:#8B0000;background:linear-gradient(135deg,#1a0a0a,#1a1a2e)}
.map-node.type-battle.available{border-color:#cc3333;box-shadow:0 0 12px rgba(200,50,50,0.4)}
.map-node.type-elite{border-color:#9b59b6;background:linear-gradient(135deg,#1a0a2a,#1a1a2e)}
.map-node.type-elite.available{border-color:#bb6bd9;box-shadow:0 0 12px rgba(155,89,182,0.4)}
.map-node.type-boss{border-color:var(--gold-dark);background:linear-gradient(135deg,#2a1a00,#1a1a2e);width:72px;height:72px;font-size:1.8rem}
.map-node.type-boss.available{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,0.5);animation:nodePulseBoss 1.5s ease-in-out infinite}
.map-node.type-tavern{border-color:#8B6914;background:linear-gradient(135deg,#1a1400,#1a1a2e)}
.map-node.type-tavern.available{border-color:#DAA520;box-shadow:0 0 12px rgba(218,165,32,0.4)}
.map-node.type-event{border-color:#2471A3;background:linear-gradient(135deg,#0a1a2a,#1a1a2e)}
.map-node.type-event.available{border-color:#3498db;box-shadow:0 0 12px rgba(52,152,219,0.4)}
.map-node.type-treasure{border-color:#D4AC0D;background:linear-gradient(135deg,#2a2000,#1a1a2e)}
.map-node.type-treasure.available{border-color:var(--gold);box-shadow:0 0 15px rgba(255,215,0,0.5)}

/* Map bottom buttons */
.map-deck-preview,.map-relic-btn{position:absolute;bottom:20px;display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg-card);border:1px solid #444;border-radius:8px;cursor:pointer;font-family:var(--font-heading);font-size:0.75rem;color:var(--text-dim);letter-spacing:1px;transition:all var(--transition-fast);z-index:20;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.map-deck-preview{left:20px}
.map-relic-btn{right:20px}
.map-deck-preview:hover,.map-relic-btn:hover{border-color:var(--gold);color:var(--gold);box-shadow:var(--glow-gold)}
.map-deck-preview img,.map-relic-btn img{width:20px;height:20px;image-rendering:pixelated}

@keyframes nodePulse{0%,100%{box-shadow:0 0 10px rgba(68,170,68,0.3)}50%{box-shadow:0 0 20px rgba(68,170,68,0.6)}}
@keyframes nodePulseBoss{0%,100%{box-shadow:0 0 15px rgba(255,215,0,0.3)}50%{box-shadow:0 0 30px rgba(255,215,0,0.6)}}

@media(max-width:640px){
    .map-header{flex-wrap:wrap;gap:6px;padding:8px 12px}
    .map-player-info{gap:8px}
    .map-player-name{font-size:0.75rem}
    .map-floor-title{font-size:0.85rem}
    .map-resources{gap:10px;font-size:0.75rem}
    .map-body{padding:12px}
    .map-row{gap:16px;padding:12px 0}
    .map-node{width:52px;height:52px;font-size:1.2rem}
    .map-node.type-boss{width:60px;height:60px;font-size:1.4rem}
    .map-node-label{font-size:0.5rem;bottom:-14px}
    .map-deck-preview,.map-relic-btn{bottom:12px;padding:6px 12px;font-size:0.65rem}
    .map-deck-preview img,.map-relic-btn img{width:16px;height:16px}
    .map-deck-preview{left:10px}
    .map-relic-btn{right:10px}
}