/* Screen "map": adventure map (inline SVG) + side panel. Only base.css
   variables are used so the three themes restyle it automatically. All
   selectors are flat .map-* classes. */

.map-screen { display: flex; flex-direction: column; gap: 4px; }
.map-head { align-items: flex-start; margin-bottom: 8px; }
.map-head .section-title { margin-bottom: 4px; }
.map-lead { margin: 0; }
.map-head-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.map-week-tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-color: var(--warn); }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.map-board { padding: 0; overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.map-svg { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; }
.map-side { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* ---------- terrain ---------- */
.map-terrain-bg { fill: url(#map-grad); stroke: var(--line); stroke-width: 2; }
.map-forest polygon { fill: var(--accent-2); opacity: 0.16; }
.map-lake { fill: var(--accent-2); opacity: 0.22; }
.map-hill { fill: var(--ink-soft); opacity: 0.09; }
.map-peak { fill: var(--ink-soft); opacity: 0.22; }
.map-peak-snow { fill: var(--bg-elev); opacity: 0.8; }

/* ---------- edges ---------- */
.map-edge { stroke: var(--ink-soft); stroke-width: 5; stroke-linecap: round; opacity: 0.45; stroke-dasharray: 1 11; }
.map-edge.is-walked { stroke-dasharray: none; opacity: 0.35; }
.map-edge.is-dim { opacity: 0.2; }
.map-edge.is-active { stroke: var(--accent); opacity: 0.9; stroke-dasharray: 10 8; animation: map-march 1.2s linear infinite; }
@keyframes map-march { to { stroke-dashoffset: -18; } }

/* ---------- nodes ---------- */
.map-node { cursor: pointer; outline: none; }
.map-node:focus-visible .map-node-bg { stroke: var(--accent); stroke-width: 5; }
.map-node-bg { fill: var(--bg-elev); stroke: var(--line); stroke-width: 3; transition: stroke 0.15s, fill 0.15s; }
.map-node:hover .map-node-bg { stroke: var(--accent-2); }
.map-node-ring { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map-node.is-reachable .map-node-ring { opacity: 0.8; animation: map-pulse 1.6s ease-in-out infinite; }
.map-node.is-reachable .map-node-bg { stroke: var(--accent-2); }
.map-node.is-selected .map-node-bg { stroke: var(--accent); stroke-width: 5; }
.map-node.is-current .map-node-bg { fill: var(--bg-sunken); stroke: var(--accent); stroke-width: 4; }
.map-node.is-cleared .map-node-bg { fill: var(--bg-sunken); }
.map-node.is-cleared .map-node-icon { opacity: 0.55; }
.map-node.is-captured .map-node-icon { opacity: 1; }
.map-node.is-locked .map-node-bg { stroke-dasharray: 4 4; }
.map-node-glow { fill: url(#map-glow); animation: map-glow 2.4s ease-in-out infinite; }
.map-node-icon { font-size: 28px; pointer-events: none; user-select: none; }
.map-node-sub { font-size: 14px; pointer-events: none; }
.map-node-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--bg-elev); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; user-select: none; }
.map-node.is-cleared .map-node-label { fill: var(--ink-soft); }
.map-node-badge circle { fill: var(--good); stroke: var(--bg-elev); stroke-width: 2; }
.map-node-badge text { font-size: 13px; font-weight: 700; fill: #fff; pointer-events: none; }
.map-node-flag circle { fill: var(--warn); }
.map-node-flag text { font-size: 12px; }
@keyframes map-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 0.35; } }
@keyframes map-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* fog */
.map-fog circle { fill: var(--bg-sunken); stroke: var(--line); stroke-width: 2; opacity: 0.9; }
.map-fog .map-fog-hit { fill: transparent; stroke: none; opacity: 0; }
.map-fog-mark { font-size: 20px; font-weight: 700; fill: var(--ink-soft); pointer-events: none; }
.map-node.is-fog:hover .map-fog circle { stroke: var(--ink-soft); }
.map-node.is-fog.is-selected .map-fog circle { stroke: var(--accent); }

/* hero marker */
.map-hero { pointer-events: none; }
.map-hero-bg { fill: var(--accent); stroke: var(--bg-elev); stroke-width: 3; }
.map-hero-icon { font-size: 22px; }

/* ---------- side panel ---------- */
.map-hero-panel, .map-info, .map-grail-panel, .map-legend { padding: 14px 16px; }
.map-hero-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.map-hero-portrait { font-size: 2rem; line-height: 1; }
.map-hero-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.map-hero-rank { font-size: 0.85rem; }
.map-hero-moves { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.map-moves { display: inline-flex; gap: 4px; }
.map-move-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-sunken); border: 1px solid var(--line); }
.map-move-dot.is-on { background: var(--accent); border-color: var(--accent); }
.map-hero-army { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.map-hero-power { font-size: 0.85rem; }
.map-note { font-size: 0.9rem; margin: 8px 0 0; }
.map-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.map-info-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.map-info-icon { font-size: 2rem; line-height: 1; }
.map-info-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.map-info-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.map-facts { margin: 0 0 10px; padding-left: 0; list-style: none; font-size: 0.92rem; display: flex; flex-direction: column; gap: 4px; }
.map-info-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-info-actions .btn { min-height: 44px; }

.map-grail-panel h3 { margin-bottom: 8px; }
.map-pieces { display: block; width: 100%; max-width: 220px; height: auto; margin-bottom: 6px; }
.map-pieces-bg { fill: var(--bg-elev); stroke: var(--line); }
.map-pieces-grail { font-size: 48px; }
.map-pieces-x { font-size: 16px; font-weight: 700; fill: var(--bad); }
.map-piece { fill: var(--bg-sunken); stroke: var(--line); stroke-width: 1; transition: opacity 0.4s; }
.map-piece.is-open { opacity: 0; }

.map-legend summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.map-legend-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.map-legend-list li { display: flex; align-items: center; gap: 8px; }
.map-legend-icon { width: 24px; text-align: center; }

.map-battle-intro p { margin-bottom: 0.5em; }
.map-victory-body { text-align: center; }
.map-victory-icon { font-size: 4rem; line-height: 1; margin-bottom: 8px; animation: map-glow 1.6s ease-in-out infinite; }

@media (max-width: 860px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-head { flex-direction: column; }
  .map-head-tags { justify-content: flex-start; }
  .map-svg { min-width: 820px; }
  .map-node-icon { font-size: 30px; }
  .map-hero-actions .btn, .map-info-actions .btn { flex: 1 1 auto; }
}