/* ---------- carte des niveaux ---------- */
.map-view { max-width: 560px; margin: 0 auto 16px; padding: 4px 14px 0; }
.map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.map-head .eyebrow { display: block; margin-bottom: 3px; }
.map-head .map-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.4rem; }
.map-head .chip { align-self: center; }

.map-frame {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--map-ar, 41 / 60);
  /* tient entièrement dans la fenêtre : la plus petite des deux contraintes
     (largeur de colonne / hauteur visible convertie en largeur via le ratio) */
  width: min(100%, (100svh - 232px) * var(--map-ar-num, 0.6833));
  height: auto;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  background: var(--surface-2);
}
.map-frame .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-foot { text-align: center; }
.map-frame .map-missing { padding: 46px 26px; text-align: center; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.map-frame .map-missing code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }

.map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 15cqw; height: 15cqw;
  border: 0; background: transparent; padding: 0;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.map-node.locked { cursor: not-allowed; }

/* seuls les états « terminé » et « verrouillé » recouvrent la pastille dessinée */
.map-node .fill {
  position: absolute; inset: 6%;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 7cqw; line-height: 1;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
}
.map-node.done .fill { background: var(--good); color: #fff; box-shadow: 0 2px 9px -1px rgba(0,0,0,.35); }
.map-node.locked .fill { background: rgba(20, 15, 12, .66); color: #fff; font-size: 5.5cqw; }

/* survol / appui : la pastille grossit ou s'enfonce, sans cercle */
.map-node:not(.locked):hover { transform: translate(-50%, -50%) scale(1.12); }
.map-node:not(.locked):active,
.map-node.clicked { transform: translate(-50%, -50%) scale(.9); }
.map-node:focus-visible { outline: none; }
.map-node:focus-visible::after {
  content: ""; position: absolute; inset: -8%;
  border-radius: 50%; box-shadow: 0 0 0 3px var(--accent);
}

/* onde au clic */
.map-ripple {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, var(--accent) 38%, rgba(207,75,18,.35) 62%, transparent 74%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.3);
  animation: mapRipple .52s ease-out forwards;
}
@keyframes mapRipple {
  from { transform: translate(-50%, -50%) scale(.3); opacity: .8; }
  to   { transform: translate(-50%, -50%) scale(2.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-node, .map-node:hover, .map-node:active { transition: none; transform: translate(-50%, -50%); }
  .map-ripple { animation: none; opacity: 0; }
}

.map-ferris {
  position: absolute;
  width: 22cqw;
  transform: translate(-50%, -108%);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
}
.map-ferris .ferris-svg { display: block; width: 100%; height: auto; }