/* Bazowa oprawa: Bootstrap 5 (motyw ciemny) + kilka reguł dla mapy. */
body {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #1c2a5a 0%, #0b1020 60%) fixed;
  padding-bottom: env(safe-area-inset-bottom);
}
.navbar { backdrop-filter: blur(6px); --bs-bg-opacity: .85; }
.card { --bs-card-bg: rgba(18, 24, 48, .78); }

.map-svg { width: 100%; height: min(70vh, 34rem); display: block; touch-action: manipulation; }
.map-svg .hex { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .10); stroke-width: .6; cursor: pointer; }
.map-svg .hex:hover { fill: rgba(255, 255, 255, .10); }
.map-svg .cloud { stroke: rgba(255, 255, 255, .55); stroke-width: .8; cursor: pointer; }
.map-svg .cloud.mine { stroke: #fff; stroke-width: 1.6; }
.map-svg .other-level { fill: rgba(255, 255, 255, .22); pointer-events: none; }
.map-svg .tower { fill: #fff; stroke: #0b1020; stroke-width: .8; pointer-events: none; }
.map-svg .stream { fill: none; stroke: #8ff0e0; stroke-width: 1.6; stroke-dasharray: 3 2; pointer-events: none; }
.map-svg .stream-fill { fill: rgba(143, 240, 224, .18); pointer-events: none; }
.map-svg .selected { stroke: #ffd166; stroke-width: 2; fill: none; pointer-events: none; }
.map-svg .anchor { fill: #ffd166; font-size: 7px; text-anchor: middle; pointer-events: none; }

.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -1px; margin-right: .3rem; border: 1px solid rgba(255, 255, 255, .5); }
.level-pill { min-width: 2.2rem; }