#places-map {
height: 40vh;
    position: relative; /* Important: makes fact box position relative to map */
  border-radius: 10px;
  overflow: hidden;
 box-shadow: 0 0 15px rgba(0,0,0,0.1);
  }
.places-card {
    transition: transform 0.2s ease;
  }
  
/* Jump animation */
@keyframes jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.places-card-wrapper {
  border-radius: 0; /* no rounding for icons */
  transition: background-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
  /* background and shadow will be toggled on highlight/correct */
}

.places-highlight img {
  background: #6699cc; 
  border-radius: 4px;

  box-shadow:
  0 0 0 4px #6699cc;
  
/*  filter:
    drop-shadow(0 0 0.5px blue)
    drop-shadow(0 0 0.5px blue)
    drop-shadow(0 0 0.5px blue)
    drop-shadow(0 0 0.5px blue);*/
}

.places-correct img {
background: #696;
border: 4px solid #696;
border-radius: 10px;
  pointer-events: none;
}

#floating-indicator {
  position: absolute;
  pointer-events: none;
  display: none;
}

#floating-indicator img {
  width: 32px;
  height: 32px;
}

#indicator-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #6699cc;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: 50% 50%;
}

#floatingIndicator,
#indicatorArrow {
  pointer-events: none;
  user-select: none;
}

#floating-indicator.active img {
  background: #6699cc;
  border-radius: 4px;
  box-shadow: 0 0 0 4px #6699cc;
}


.sparkle {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff, #ffe, #fffa00aa, #fff0);
  pointer-events: none;
  z-index: 1000;
  transform-origin: center;
  animation: sparkle-pop 0.8s ease forwards;
  filter: drop-shadow(0 0 8px #ffff77);
}

/* sparkle-pop keyframes */
@keyframes sparkle-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Fact box styling and animation */
.places-fact-box {
  background: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  max-width: 300px;
  font-family: sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  text-align: center;
  user-select: none;
  /*transform-origin: center;*/
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  cursor: pointer;
  display: none;
}

.places-fact-success {
  background: gold;
}

.fact-visible {
  animation: fact-pop 0.5s ease forwards;
}

.fact-hide {
  animation: fact-fadeout 0.4s ease forwards;
}

@keyframes fact-pop {
  0%   { transform: translateX(-50%) scale(0.8); opacity: 0; }
  50%  { transform: translateX(-50%) scale(1.05); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes fact-fadeout {
  0%   { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.8); opacity: 0; }
}

.leaflet-popup-content-wrapper.fact-popup {
  background: #fff8dc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-family: sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  color: #333;
  text-align: center;
}

.leaflet-popup-tip.fact-popup {
  background: #fff8dc;
}