/* map.css — 2.5D wereldkaart: zwevende eilanden in een lucht die van
   ochtendgoud naar avondblauw verloopt naarmate de reis afdaalt.
   Alleen transform/opacity animeren; prefers-reduced-motion zet alles uit. */

/* Doorbreek de smalle #screen-padding: de lucht mag full-bleed vullen. */
.map-root {
  position: relative;
  margin: -16px;
  margin-top: -16px;
  margin-bottom: calc(-1 * max(24px, env(safe-area-inset-bottom)));
  padding: 8px 0 90px;
  min-height: 100vh;
  overflow-x: clip;
  isolation: isolate;
  /* Reis-lucht: goud → hemelsblauw → schemer-indigo. */
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255, 240, 200, 0.9), transparent 60%),
    radial-gradient(90% 30% at 80% 100%, rgba(255, 180, 120, 0.28), transparent 70%),
    linear-gradient(
      180deg,
      #ffe7b8 0%,
      #ffd7a1 6%,
      #a9e0f5 26%,
      #7cc6ef 48%,
      #6aa8e6 66%,
      #5f79c9 82%,
      #46508f 100%
    );
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------- Sfeerlaag: losse wolken + sterren ---------------- */
.sky-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.deco-cloud {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(90, 120, 170, 0.18));
}
.deco-cloud .cloud-svg { display: block; height: auto; }
.deco-star {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  animation: twinkle var(--tw, 3s) ease-in-out var(--twd, 0s) infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}
.deco-star svg { display: block; width: 100%; height: 100%; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 0.95; transform: scale(1.05); }
}

/* ---------------- Kop / voet ---------------- */
.map-head {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 6px 16px 2px;
  color: #7a5a12;
}
.map-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #fff;
  text-shadow: 0 2px 0 #e6a23a, 0 4px 0 rgba(180, 120, 20, 0.35),
    0 6px 14px rgba(120, 80, 10, 0.3);
}
.map-sub {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #7c5a1c;
  opacity: 0.85;
}
.map-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  color: #eaf2ff;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(20, 30, 70, 0.5);
}
.foot-flag { font-size: 1.4rem; }

/* ---------------- Pad met werelden ---------------- */
.world-path {
  position: relative;
  z-index: 1;
  /* 2.5D: lichte diepte-perspectief voor de hele reeks eilanden. */
  perspective: 1400px;
  perspective-origin: 50% 30%;
}

.world {
  position: relative;
  z-index: 1;
  /* Reveal-startstand (pop-in bij scrollen). */
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.world.in-view {
  opacity: 1;
  transform: none;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 480px;
  margin: 0 auto;
}

/* ---------------- Het zwevende eiland ---------------- */
.island-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  width: 84%;
  max-width: 320px;
  height: 100%;
  transform: translateX(-50%);
  z-index: 1;
  /* Zachte, gelaagde slagschaduw onder het eiland = drijfgevoel. */
  filter:
    drop-shadow(0 18px 10px rgba(40, 60, 110, 0.22))
    drop-shadow(0 40px 26px rgba(40, 60, 110, 0.16));
  /* Trage zweef-loop; per eiland een andere fase via --i. */
  animation: float 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
  will-change: transform;
}
.island-wrap .island {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-14px); }
}

/* ---------------- Slingerend pad (trail) ---------------- */
.trail {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.trail svg { width: 100%; height: 100%; display: block; }

/* ---------------- Level-nodes ---------------- */
.node {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.node-disc {
  position: relative;
  width: 60px;
  height: 60px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, var(--w-light), var(--w) 72%);
  border: 4px solid #fff;
  color: #fff;
  /* "Drukbare" 3D-onderrand in de donkere wereldkleur. */
  box-shadow:
    0 6px 0 var(--w-dark),
    0 10px 14px rgba(30, 45, 90, 0.28);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.node-face {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.node:active .node-disc {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--w-dark), 0 4px 8px rgba(30, 45, 90, 0.25);
}
.node-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 0.8rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.mini-star { color: rgba(255, 255, 255, 0.55); }
.mini-star.on { color: var(--kleur-goud, #ffc800); }

/* Voltooid: groene vinkjes-disc. */
.node--done .node-disc {
  background: radial-gradient(circle at 34% 28%, #8fe45a, #58cc02 72%);
  box-shadow: 0 6px 0 #3a8a00, 0 10px 14px rgba(30, 45, 90, 0.28);
}
.node--done:active .node-disc {
  box-shadow: 0 0 0 #3a8a00, 0 4px 8px rgba(30, 45, 90, 0.25);
}

/* Actief: groter, glansring + zachte wiebel/pulse. */
.node--active { z-index: 5; }
.node--active .node-disc {
  width: 74px;
  height: 74px;
  border-width: 5px;
  animation: wiggle 2.4s ease-in-out infinite;
}
.node--active .node-disc::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.75);
  animation: halo 2s ease-out infinite;
}
.node--active .node-face { font-size: 1.7rem; }
.node-shout {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--w-dark);
  font-weight: 900;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(30, 45, 90, 0.25);
  animation: bob 1.4s ease-in-out infinite;
}
.node-shout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}

@keyframes wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-2px) rotate(-4deg) scale(1.03); }
  60% { transform: translateY(-2px) rotate(4deg) scale(1.03); }
}
@keyframes halo {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* Vergrendelde nodes. */
.node--locked { cursor: default; }
.node--locked .node-disc {
  background: radial-gradient(circle at 34% 28%, #d7d2c8, #b3ab9d 72%);
  box-shadow: 0 6px 0 #8f887b, 0 10px 14px rgba(30, 45, 90, 0.2);
  border-color: #f0ece4;
}
.node--locked .node-face { font-size: 1.2rem; opacity: 0.85; }

/* ---------------- Wereld-banner (signpost) ---------------- */
.world-banner {
  position: absolute;
  top: -6px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  border: 2px solid var(--w);
  box-shadow: 0 8px 18px rgba(30, 45, 90, 0.22);
  max-width: 62%;
}
.banner-left { left: 2%; }
.banner-right { right: 2%; }
.banner-emoji {
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}
.banner-text { display: flex; flex-direction: column; line-height: 1.15; }
.banner-title {
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--w-dark);
}
.banner-sub {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6a6a6a;
}

/* ---------------- Wolkendek + slot (vergrendeld) ---------------- */
.world--locked .island-wrap { filter:
    grayscale(0.9) brightness(1.03)
    drop-shadow(0 18px 10px rgba(40, 60, 110, 0.2)); }
.world--locked .world-banner {
  border-color: #cfc8bc;
  color: #8b8b8b;
}
.world--locked .banner-title { color: #7c7c7c; }

.cloud-cover {
  position: absolute;
  inset: -6% -4%;
  z-index: 6;
  pointer-events: none;
}
.cloud-cover .cc {
  position: absolute;
  filter: drop-shadow(0 8px 12px rgba(90, 120, 170, 0.2));
}
.cloud-cover .cc svg { display: block; height: auto; }
.cc-1 { top: 18%; left: 4%; opacity: 0.96; }
.cc-2 { top: 46%; right: 2%; opacity: 0.92; }
.cc-3 { top: 66%; left: 16%; opacity: 0.9; }

.lock-badge {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(30, 45, 90, 0.28);
}
.lock-glyph { font-size: 1.9rem; }

/* ---------------- Unlock-animatie ---------------- */
.world--unlocking .island-wrap {
  animation:
    island-rise 1200ms cubic-bezier(0.16, 0.9, 0.3, 1) both,
    unlock-color 1400ms ease both;
}
.world--unlocking .cloud-cover .cc-1 { animation: cloud-away-l 1000ms ease both; }
.world--unlocking .cloud-cover .cc-2 { animation: cloud-away-r 1000ms 80ms ease both; }
.world--unlocking .cloud-cover .cc-3 { animation: cloud-away-l 1000ms 160ms ease both; }
.world--unlocking .lock-badge {
  animation: lock-break 800ms 260ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

@keyframes island-rise {
  0% { transform: translateX(-50%) translateY(70px); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes unlock-color {
  0% { filter: grayscale(1) brightness(1.12) drop-shadow(0 18px 10px rgba(40, 60, 110, 0.2)); }
  100% { filter: grayscale(0) brightness(1) drop-shadow(0 18px 10px rgba(40, 60, 110, 0.22)) drop-shadow(0 40px 26px rgba(40, 60, 110, 0.16)); }
}
@keyframes cloud-away-l {
  to { transform: translate(-60px, -14px); opacity: 0; }
}
@keyframes cloud-away-r {
  to { transform: translate(60px, -14px); opacity: 0; }
}
@keyframes lock-break {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  35% { transform: translate(-50%, -60%) scale(1.15) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, 20%) scale(0.6) rotate(24deg); opacity: 0; }
}

/* ---------------- Zwevende instellingen-knop ---------------- */
.map-gear {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  z-index: 40;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(30, 45, 90, 0.3);
  transition: transform 0.08s ease;
}
.map-gear:active { transform: scale(0.92); }

/* ---------------- Reduced motion: alle loops/parallax uit ---------------- */
@media (prefers-reduced-motion: reduce) {
  .island-wrap,
  .node--active .node-disc,
  .node--active .node-disc::before,
  .node-shout,
  .deco-star,
  .world--unlocking .island-wrap,
  .world--unlocking .cloud-cover .cc-1,
  .world--unlocking .cloud-cover .cc-2,
  .world--unlocking .cloud-cover .cc-3,
  .world--unlocking .lock-badge {
    animation: none !important;
  }
  .island-wrap { transform: translateX(-50%); }
  .deco-star { opacity: 0.6; }
  .world {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .deco-cloud { transform: none !important; }
}