/* Station 3 · the Munich map and the place cards */
.karte { display: flex; flex-direction: column; height: 100dvh; background: #EDE5D3; }
.step-link { border: 0; background: none; padding: 0; cursor: pointer; }
.step-link::before { content: '← '; }

.map-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-title {
  position: absolute; left: 0; right: 0; top: 10px;
  margin: 0; text-align: center;
  font: italic 600 26px var(--display); color: var(--ink);
  pointer-events: none;
}
.map-district { font: 600 9px var(--label); letter-spacing: .22em; fill: #9A907E; }
.map-river { font: italic 600 13px var(--display); fill: #5F95B3; }
.map-n { font: 600 7px var(--label); fill: #16244A; }

.pin { cursor: pointer; outline: none; }
.pin .pin-body { fill: var(--navy); stroke: var(--gold); stroke-width: 2; }
.pin .pin-dot { fill: var(--gold-soft); }
.pin .pin-check { stroke: var(--navy); opacity: 0; }
.pin.visited .pin-dot { fill: var(--gold); }
.pin.visited .pin-check { opacity: 1; }
.pin.colour .pin-body { fill: var(--pin); stroke: #fff; }
.pin.colour .pin-dot { fill: #fff; }
.pin .pin-label rect { fill: #FFFDF7; stroke: #D5A8437a; }
.pin .pin-label text { font: 600 10px var(--label); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.pin.locked .pin-body { fill: #8E8A84; stroke: #C9BFA9; }
.pin.locked .pin-label text { fill: #8E8A84; }
.pin:focus-visible .pin-body { stroke: #fff; stroke-width: 3; }
.pin.locked.ready .pin-body { fill: var(--gold); stroke: var(--navy); }
.pin.locked.ready { animation: pin-ready 1.6s ease-in-out infinite; }
@keyframes pin-ready { 50% { translate: 0 -4px; } }
.pin { transform-box: fill-box; }

/* hidden extras on the map */
#mapBmw, #mapEmmi { cursor: pointer; }
.map-emmi-head { transform-box: fill-box; transform-origin: 50% 100%; }
.map-emmi-head.hop { animation: emmi-hop .5s ease; }
@keyframes emmi-hop { 40% { transform: translateY(-10px) rotate(-8deg); } }
.map-toast {
  position: absolute; left: 50%; bottom: calc(66px + env(safe-area-inset-bottom)); translate: -50% 0;
  margin: 0; padding: 7px 14px; border-radius: 999px;
  background: var(--navy); color: var(--gold-soft);
  font: italic 600 15px var(--display);
  box-shadow: 0 6px 16px #0004;
}
.stamp-btn {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--gold); background: #FFFDF7; color: var(--ink);
  font: 600 13px var(--label); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px #0003;
}
.stamp-btn b { margin-left: 6px; color: #9C7521; }
.stamp-btn i { font: italic 600 13px var(--display); letter-spacing: 0; text-transform: none; color: #6E6557; }

/* the stamp booklet */
.book {
  width: min(100%, 420px);
  padding: 16px;
  background: #F6EEDD;
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px #000a;
}
.book h2 { margin: 0 0 12px; font: italic 600 24px var(--display); color: var(--ink); }
.book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.book-stamp { margin: 0; padding: 6px; background: #fff; border: 2px dashed #D8CDB9; border-radius: 4px; rotate: -1deg; }
.book-stamp:nth-child(even) { rotate: 1.5deg; }
.book-stamp svg { display: block; width: 100%; height: auto; background: #EDE5D3; }
.book-stamp:not(.got) svg { background: repeating-linear-gradient(45deg, #EDE5D3 0 8px, #E4DAC6 8px 16px); }
.book-stamp figcaption { margin-top: 4px; text-align: center; font: 600 11px var(--label); letter-spacing: .14em; text-transform: uppercase; color: #6E6557; }
.book-stamp.got { border-style: solid; border-color: #D5A84399; }
.pin.shake { animation: pin-no .4s ease; }
@keyframes pin-no { 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }

/* the place card: a postcard with the scene on top, the words and a stamp below */
.pc-wrap {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 18px;
  background: #16244Acc;
  backdrop-filter: blur(3px);
  animation: pc-in .3s ease;
}
@keyframes pc-in { from { opacity: 0; } }
.pc-card {
  width: min(100%, 440px);
  padding: 8px 8px 0;
  background: #FFFBF3;
  border-radius: 6px;
  box-shadow: 0 18px 40px -12px #000a;
  rotate: -1.5deg;
  animation: pc-drop .45s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pc-drop { from { transform: translateY(18px) rotate(3deg); opacity: 0; } }
.pc-art svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.pc-text {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 8px 14px;
}
.pc-text h2 { margin: 0; font: italic 600 24px/1.1 var(--display); color: var(--ink); }
.pc-text p { margin: 4px 0 0; font: 400 15px/1.35 var(--text); color: #5A5347; text-wrap: pretty; }
.pc-marks { position: relative; flex: none; width: 88px; height: 64px; }
.pc-stamp { position: absolute; right: 0; top: 0; width: 50px; rotate: 4deg; }
.pc-stamp [data-part="emmi-shades"] { display: none; }   /* the shades are Emmi's easter egg */
.pc-stamp-val { font: 700 11px var(--label); fill: var(--navy); }
.pc-stamp-txt { font: 600 7px var(--label); letter-spacing: .2em; fill: var(--navy); }
.pc-postmark {
  position: absolute; left: 0; top: 10px;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid #5A6A8A99;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 600 7.5px/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: #5A6A8Acc;
  rotate: -14deg;
}
.sc-sign { font: 700 9px var(--label); letter-spacing: .16em; fill: #fff; }
.pc-actions { display: flex; gap: 10px; }
.pc-actions button {
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--gold); background: transparent; color: var(--cream);
  font: 600 15px var(--text);
}
.pc-actions button:last-child { background: var(--gold); color: var(--navy); }