/* Juego del mapa — provincia de Barcelona v2 */
.fp-mapa {
  position: relative;
  background:
    radial-gradient(ellipse at 70% 10%, rgba(255,193,7,0.08), transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(233,30,99,0.1), transparent 50%),
    linear-gradient(180deg, var(--fp-bg-soft) 0%, #0a0a12 100%);
  padding: 4.5rem 0 5rem;
  overflow: hidden;
}
.fp-mapa::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.fp-mapa__intro { text-align: center; max-width: 680px; margin: 0 auto 2rem; position: relative; }
.fp-mapa__hud {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem;
  margin-bottom: 1.5rem; position: relative;
}
.fp-mapa__badge {
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: rgba(28,28,46,0.9); border: 1px solid var(--fp-border);
}
.fp-mapa__badge--active { border-color: var(--fp-gold); color: var(--fp-gold); box-shadow: 0 0 20px rgba(255,193,7,0.2); }

.fp-mapa__stage {
  display: grid; grid-template-columns: 1.2fr min(360px, 100%); gap: 1.5rem; align-items: stretch;
  position: relative;
}
.fp-mapa__board {
  position: relative; min-height: 420px; aspect-ratio: 5/4;
  background: linear-gradient(160deg, #0d2840 0%, #061525 50%, #0a1e30 100%);
  border-radius: 20px; border: 2px solid rgba(255,255,255,0.15);
  box-shadow: var(--fp-shadow), inset 0 0 100px rgba(26,107,156,0.15);
  overflow: hidden;
}
.fp-mapa__svg { width: 100%; height: 100%; display: block; }
.fp-mapa__legend {
  position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  font-size: 0.75rem; color: var(--fp-muted);
  background: rgba(0,0,0,0.45); padding: 0.6rem 0.85rem; border-radius: 10px;
}
.fp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; }
.fp-dot--pin { background: var(--fp-accent); }
.fp-dot--city { background: var(--fp-gold); }
.fp-dot--found { background: #28a745; }

.fp-mapa__pin {
  position: absolute; transform: translate(-50%, -100%); z-index: 5;
  width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.5); border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, var(--fp-accent), var(--fp-accent-2));
  color: #fff; cursor: pointer; rotate: -45deg;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(233,30,99,0.55);
  transition: transform 0.25s, background 0.25s;
  animation: fp-pin-pulse 2.2s ease-in-out infinite;
}
.fp-mapa__pin span { rotate: 45deg; font-size: 0.72rem; font-weight: 800; }
.fp-mapa__pin:hover, .fp-mapa__pin.is-active {
  transform: translate(-50%, -100%) scale(1.18);
  background: linear-gradient(135deg, var(--fp-gold), #ff9800); color: #1a1a2e;
  border-color: #fff;
}
.fp-mapa__pin.is-found { background: linear-gradient(135deg, #28a745, #5dd879); animation: none; border-color: #fff; }
@keyframes fp-pin-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(233,30,99,0.5); }
  50% { box-shadow: 0 6px 32px rgba(233,30,99,0.9); }
}

.fp-mapa__panel {
  background: var(--fp-surface); border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius); padding: 1.5rem; min-height: 320px;
  box-shadow: var(--fp-shadow);
}
.fp-mapa__panel h3 { margin: 0 0 0.75rem; font-family: var(--fp-serif); font-size: 1.3rem; }
.fp-mapa__panel p { color: var(--fp-muted); font-size: 0.95rem; margin: 0 0 1rem; line-height: 1.65; }
.fp-mapa__panel img {
  width: 100%; border-radius: 12px; margin-bottom: 1rem;
  aspect-ratio: 16/10; object-fit: cover; border: 1px solid var(--fp-border);
}
.fp-mapa__progress {
  height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-bottom: 0.75rem;
}
.fp-mapa__progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fp-accent), var(--fp-gold));
  border-radius: 999px; transition: width 0.45s ease;
}
.fp-mapa__reward {
  display: none; text-align: center; padding: 1.1rem;
  background: rgba(255,193,7,0.12); border: 1px dashed var(--fp-gold);
  border-radius: 12px; margin-top: 1rem;
}
.fp-mapa__reward.is-visible { display: block; animation: fp-reward-pop 0.5s ease; }
@keyframes fp-reward-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.fp-mapa__cities {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-top: 1.5rem; position: relative;
}
.fp-mapa__cities span {
  padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8rem;
  background: rgba(255,255,255,0.06); border: 1px solid var(--fp-border); color: var(--fp-muted);
}

.fp-mapa__confetti { position: absolute; pointer-events: none; inset: 0; overflow: hidden; z-index: 10; }
@keyframes fp-mapa-confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@media (max-width: 991px) {
  .fp-mapa__stage { grid-template-columns: 1fr; }
  .fp-mapa__board { min-height: 300px; }
}