/* Freight Empire – mapa strategiczna */
.map-wrap { position: absolute; inset: 0; background: #d7e6ee; }
.map-svg { display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.map-svg:active { cursor: grabbing; }

.m-sea { fill: #d3e4ed; }
.m-land { stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.m-play { fill: #e7e5da; }
.m-off { fill: #dcdcd5; }
.m-kgd { fill: #c4c4bf; }
/* podpisy krajów rosną przy oddaleniu (--ls ustawia mapa), żeby były czytelne na widoku całej Europy */
.m-country-label, .m-foreign-label, .m-kgd-label { font-size: calc(var(--ls, 1) * 13px); font-weight: 700; letter-spacing: 0.18em; pointer-events: none; paint-order: stroke; stroke-linejoin: round; }
.m-country-label { fill: #a3ab9c; stroke: rgba(231, 229, 218, 0.8); stroke-width: calc(var(--ls, 1) * 3px); }
.m-foreign-label { fill: #b9bdb6; stroke: rgba(220, 220, 213, 0.8); stroke-width: calc(var(--ls, 1) * 3px); }
.m-kgd-label { fill: #8b8d88; font-size: calc(var(--ls, 1) * 9px); letter-spacing: 0.05em; }
.map-svg.mid .m-kgd-label { display: none; }
.map-svg.far .city.minor .c-label, .map-svg.far .city:not(.major):not(.unlocked) .c-label, .map-svg.mid .city.minor.locked .c-label { display: none; }
.map-svg.far .lane.locked { display: none; }

.region { stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill 0.6s; }
.region.locked { fill: #e7e5da; }
.region.open.tone0 { fill: #cfe1c4; }
.region.open.tone1 { fill: #d9e8cb; }
.region.open.tone2 { fill: #c4dcbf; }
.m-outline { fill: none; stroke: #9aa892; stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }

.lane { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; pointer-events: none; transition: stroke 0.4s; }
.lane.locked { stroke: #c4c2b4; stroke-width: 1.2px; stroke-dasharray: 1.5 6; opacity: 0.75; }
.lane.potential { stroke: #8997a6; stroke-width: 1.5px; stroke-dasharray: 6 6; opacity: 0.85; }
.lane.relation { stroke: var(--route); stroke-width: 2.6px; opacity: 0.95; }
.lane.sea.locked, .lane.sea.potential { stroke: #6f9fbd; stroke-dasharray: 2 5; opacity: 0.9; }
.lane.active { stroke: var(--route-d); stroke-width: 3.6px; stroke-dasharray: 10 7; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -17; } }

.city { cursor: pointer; outline: none; }
.c-hit { fill: transparent; }
.c-halo { fill: rgba(14, 143, 176, 0.22); opacity: 0; transition: opacity 0.2s; }
.city.selected .c-halo, .city:focus-visible .c-halo { opacity: 1; }
.c-ring { fill: #fff; stroke: rgba(22, 48, 74, 0.28); stroke-width: 1px; }
.c-base { fill: var(--navy); transition: fill 0.3s; }
.city.locked .c-base { fill: #a9aba1; }
.city.locked.affordable .c-base { fill: #6f8aa6; }
.city.branch .c-ring { fill: #f0b54a; }
.c-bld { fill: #fff; }
.c-lock { display: none; }
.city.locked .c-lock { display: block; }
.city.locked .c-icon { display: none; }
.c-lockfill { fill: #fff; }
.c-lockline { stroke: #fff; stroke-width: 2.2px; }
.c-star { fill: #f2b84b; stroke: #fff; stroke-width: 1.2px; }
.c-label { font-size: 15px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.city.locked .c-label { fill: #7b8086; font-weight: 600; }
.badge circle { stroke: #fff; stroke-width: 1.6px; }
.b-active circle { fill: var(--route); }
.b-offer circle { fill: var(--warn); }
.b-rival circle { fill: #7a5cc7; }
.badge text { fill: #fff; font-size: 11.5px; font-weight: 700; pointer-events: none; }

.t-body { fill: var(--route-d); stroke: #fff; stroke-width: 1.3px; }
.t-cab { fill: #0e8fb0; }
.t-wheel { fill: var(--navy); }
.truck { pointer-events: none; }
.t-ship, .truck.ship .t-lorry { display: none; }
.truck.ship .t-ship { display: inline; }
.t-hull { fill: var(--navy); stroke: #fff; stroke-width: 1.3px; }
.t-deck { fill: #fff; }
.truck.delayed .t-hull { fill: var(--warn); }
.truck.delayed .t-body { fill: var(--warn); }
.truck.delayed .t-cab { fill: #f3a35f; }
.truck.waiting { opacity: 0.7; }

/* nakładki na mapie */
.hud { position: absolute; top: 10px; left: 10px; z-index: 5; }
.hud-card {
  all: unset; box-sizing: border-box; cursor: pointer; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); border-radius: 14px; padding: 9px 14px; min-width: 150px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1px; border: 1px solid rgba(255, 255, 255, 0.8);
}
.hud-card .hud-day { font-size: 11.5px; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.hud-card b { font-size: 20px; letter-spacing: -0.01em; }
.hud-card small { color: var(--ink-3); font-size: 11.5px; }
.hud-card.warn b { color: var(--warn); }
.hud-card.neg b { color: var(--neg); }
.map-ctrl { position: absolute; right: 10px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.map-ctrl button {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.map-ctrl button:active { transform: scale(0.95); }
.legend-map {
  position: absolute; left: 10px; bottom: 12px; z-index: 4; display: flex; gap: 12px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(6px);
  padding: 7px 11px; border-radius: 12px; font-size: 11.5px; color: var(--ink-2); box-shadow: var(--shadow); max-width: calc(100% - 80px);
}
.legend-map span { display: inline-flex; align-items: center; gap: 6px; }
.legend-map i { width: 20px; }
@media (max-width: 899px) {
  #app[data-section='map'][data-city='1'] .legend-map, #app[data-section='map'][data-city='1'] .map-ctrl { display: none; }
  .legend-map { gap: 8px; font-size: 10.5px; }
}

/* tryb oszczędny */
[data-perf='lite'] .lane.sea.locked, .lane.sea.potential { stroke: #6f9fbd; stroke-dasharray: 2 5; opacity: 0.9; }
.lane.active { animation: none; stroke-dasharray: 10 7; }
[data-perf='lite'] .region { transition: none; }
[data-perf='lite'] .lane { transition: none; }
[data-perf='lite'] .hud-card, [data-perf='lite'] .legend-map { backdrop-filter: none; background: #fff; }
[data-perf='lite'] .map-ctrl button, [data-perf='lite'] .hud-card, [data-perf='lite'] .legend-map { box-shadow: 0 1px 3px rgba(22, 48, 74, 0.25); }

[data-perf='lite'] .region, [data-perf='lite'] .m-outline, [data-perf='lite'] .lane { vector-effect: none; }
[data-perf='lite'] .region { stroke-width: 1px; }
[data-perf='lite'] .c-label { paint-order: normal; stroke: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
[data-perf='lite'] .map-svg.moving .c-label, [data-perf='lite'] .map-svg.moving .lane.potential, [data-perf='lite'] .map-svg.moving .lane.locked { display: none; }