.vector-map-shell {
  max-width: 1024px;
  margin: 24px auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
}
.vector-map-canvas {
  position: relative;
  margin-top: 4px;
  width: 100%;
  padding-top: 60%;
  border-radius: 18px;
  background-color: #020617;
  background-size: 100% 100%;
  background-position: center center;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15,23,42,0.5);
}
.vector-map-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 0;
}
.vector-spot-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 8px rgba(248,113,113,0.4);
  display: block;
  margin: 0 auto 4px auto;
  animation: vector-pulse 1.8s ease-out infinite;
}
.vector-map-spot:hover .vector-spot-dot,
.vector-map-spot.is-active .vector-spot-dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 11px rgba(248,113,113,0.55);
}
.vector-spot-label {
  display: inline-block;
  background: rgba(15,23,42,0.96);
  color: #e5e7eb;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid rgba(148,163,184,0.6);
}
.vector-map-player-shell {
  margin-top: 14px;
  background: #020617;
  border-radius: 16px;
  padding: 12px 14px 10px;
  border: 1px solid rgba(148,163,184,0.5);
  color: #e5e7eb;
  box-shadow: 0 12px 30px rgba(15,23,42,0.5);
}
.vector-player-title {
  font-size: 14px;
  margin-bottom: 6px;
}
#vector-map-player {
  width: 100%;
}
@keyframes vector-pulse {
  0% { box-shadow: 0 0 0 0 rgba(248,113,113,0.75); }
  70% { box-shadow: 0 0 0 15px rgba(248,113,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}
@media (max-width: 640px) {
  .vector-spot-label {
    font-size: 10px;
  }
  .vector-map-player-shell {
    padding: 10px 10px 8px;
  }
}