/* De Kaart van Examnië (verzameling aardrijkskunde, js/kaart.js). Via de thema-tokens; Malachai-paars is vast. */
.km-paneel .km-stand { margin: 0 0 10px; }
.km-paneel .km-uitleg { margin: 10px 0 0; }
.km-zoom { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; gap: 4px; }
.km-zoom .btn { min-width: 34px; background: var(--panel-solid); }
.km-venster {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: min(78vh, 900px); margin: 0 auto; border-radius: var(--radius);
  border: 1px solid rgba(var(--gold-rgb), .35); background: #1d2340; touch-action: none; cursor: grab;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.km-venster.sleept { cursor: grabbing; }
.km-wereld { position: absolute; left: 0; top: 0; width: 1400px; height: 1050px; transform-origin: 0 0; }
.km-kaart, .km-laag { position: absolute; left: 0; top: 0; width: 1400px; height: 1050px; image-rendering: pixelated; user-select: none; }
.km-laag { pointer-events: none; }
.km-gloed { animation: km-puls 1.6s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), .9)) drop-shadow(0 0 8px rgba(var(--gold-rgb), .6)); }
@keyframes km-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.km-mist.weg { transition: opacity 2.5s ease; opacity: 0; }

/* hints in de mist */
.km-hints, .km-anim, .km-npcs { position: absolute; inset: 0; pointer-events: none; }
.km-hint { position: absolute; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; mix-blend-mode: screen; opacity: 0; }
.km-hint.bliksem { background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(190, 215, 255, .5) 35%, transparent 70%); animation: km-flits .9s steps(1) forwards; }
.km-hint.gloed { background: radial-gradient(circle, rgba(var(--kl), .75), rgba(var(--kl), .25) 40%, transparent 70%); animation: km-gloei 3s ease-in-out forwards; }
@keyframes km-flits { 0% { opacity: 0; } 10% { opacity: .9; } 20% { opacity: .1; } 32% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes km-gloei { 0% { opacity: 0; } 45% { opacity: .9; } 100% { opacity: 0; } }

/* leven op ontdekte plekken */
.km-bel { position: absolute; border-radius: 50%; background-image: url(../assets/kaart/kaart.png); background-size: 1400px 1050px;
  image-rendering: pixelated; animation: km-wiebel 3.2s ease-in-out infinite; }
@keyframes km-wiebel { 0%, 100% { transform: scale(1, 1) translateY(0); } 30% { transform: scale(1.04, .97) translateY(-1px); } 60% { transform: scale(.97, 1.03) translateY(-3px); } }
.km-rook { position: absolute; width: 6px; height: 6px; background: rgba(170, 120, 230, .85); box-shadow: 2px 2px 0 rgba(110, 70, 170, .7);
  animation: km-stijg 3s linear forwards; }
.km-rook.groen { background: rgba(120, 230, 140, .85); box-shadow: 2px 2px 0 rgba(60, 150, 80, .7); }
@keyframes km-stijg { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -46px) scale(1.6); opacity: 0; } }
.km-flits { position: absolute; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(220, 235, 255, .85), transparent 65%); animation: km-flits .9s steps(1) forwards; }
.km-paars { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(181, 140, 255, .8), transparent 70%); animation: km-puls 2.4s ease-in-out infinite; }

/* NPC-plekken: klein fonkelend ster-ruitje */
.km-npc { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: auto; cursor: var(--wijs, pointer); border: 0; padding: 0;
  background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: km-fonkel 1.8s ease-in-out infinite; }
@keyframes km-fonkel { 0%, 100% { transform: scale(.7) rotate(0); opacity: .7; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

/* held als pionnetje */
.km-held { position: absolute; width: 32px; height: 37px; margin: -35px 0 0 -16px; pointer-events: none;
  transition: left 1.3s ease-in-out, top 1.3s ease-in-out; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.km-held::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -2px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .35); z-index: -1; }
.km-held canvas { width: 32px; height: 37px; display: block; }
.km-held.loopt canvas { animation: km-hup .26s ease-in-out infinite alternate; }
@keyframes km-hup { from { transform: translateY(0); } to { transform: translateY(-4px); } }

.km-veer { position: absolute; width: 40px; height: 40px; image-rendering: pixelated; margin: -38px 0 0 -4px;   /* punt van de veer (4,38) op het schrijfpunt */ pointer-events: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .5)); transition: left .12s linear, top .12s linear; }

/* hoverkaartje */
.km-kaartje { position: absolute; z-index: 5; max-width: 300px; padding: 10px 14px; pointer-events: none;
  background: var(--panel-solid); border: 1px solid rgba(var(--gold-rgb), .45); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 14px; line-height: 1.45; }
.km-kaartje h3 { margin: 0 0 2px; font-family: var(--display); color: var(--gold); font-size: 16px; }
.km-kaartje .rijk { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.km-kaartje p { margin: 0; color: var(--text); }
.km-kaartje .bord { margin-top: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(120, 80, 40, .45); border: 1px dashed rgba(230, 190, 130, .6); color: #f3dcb4; font-size: 12px; }

/* cartouche bij een ontdekking */
.km-cartouche { position: absolute; left: 50%; top: 18px; z-index: 6; transform: translateX(-50%); min-width: 280px; max-width: 90%; text-align: center; pointer-events: none;
  padding: 14px 28px; background: linear-gradient(#f3e3bf, #e2cb98); color: #3b2610; border: 3px double #7a5424; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: km-rol .5s ease-out; }
.km-cartouche h2 { margin: 0; font-family: var(--display); font-size: 22px; }
.km-cartouche p { margin: 4px 0 0; font-size: 14px; }
.km-cartouche .bord { margin-top: 6px; font-size: 12px; opacity: .8; }
@keyframes km-rol { from { transform: translateX(-50%) scaleY(.1); opacity: 0; } to { transform: translateX(-50%) scaleY(1); opacity: 1; } }

/* NPC-praatwolk */
.km-praat { position: absolute; left: 50%; bottom: 18px; z-index: 7; transform: translateX(-50%); width: min(560px, 92%); display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: var(--panel-solid); border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius-sm); box-shadow: var(--shadow); cursor: var(--wijs, pointer); }
.km-praat img { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 8px; background: rgba(0, 0, 0, .25); flex: none; }
.km-praat b { color: var(--gold); display: block; margin-bottom: 2px; }
.km-praat p { margin: 0; line-height: 1.45; }

@media (max-width: 700px) {
  .km { padding: 8px; }
  .km-venster { max-height: 70vh; }
  .km-kaartje { max-width: 240px; }
}
/* geen prefers-reduced-motion: in een verzameling is de animatie het doel (keuze gebruiker 2026-10-05) */