@layer components {
  .map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
  }

  .map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: var(--cursor-hand, pointer);
  }

  .map__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .map__me {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    transform-origin: 50% 50%;
    will-change: transform;
  }

  .map__pin {
    position: relative;
    display: grid;
    justify-items: center;
    animation: mm-float 1.8s ease-in-out infinite;
  }

  .map__pin .cos-av {
    filter: drop-shadow(0 6px 6px rgba(20, 0, 30, 0.45));
  }

  .map__pin .cos-av__photo {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff4fae, 0 6px 16px rgba(0, 0, 0, 0.5);
  }

  .map__pin-tail {
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #ff4fae;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
  }

  .map__pin[data-side] {
    grid-auto-flow: column;
    align-items: center;
  }

  .map__pin[data-side='l'] .map__pin-tail {
    margin: 0 0 0 -2px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 14px solid #ff4fae;
  }

  .map__pin[data-side='r'] .map__pin-tail {
    order: -1;
    margin: 0 -2px 0 0;
    border: 10px solid transparent;
    border-left: 0;
    border-right: 14px solid #ff4fae;
  }

  .map__friend {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    transform-origin: 50% 100%;
    pointer-events: auto;
    filter: drop-shadow(0 4px 4px rgba(20, 0, 30, 0.45));
  }

  .map__friend .cos-av__photo {
    box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, 0.4);
  }

  .map__episode {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: calc(var(--safe-top) + 80px);
    translate: -50% -30px;
    display: grid;
    justify-items: center;
    padding: 12px 28px 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff7fc, #ffd9ef);
    border: 4px solid #d6278f;
    box-shadow: 0 0 0 3px #fff, 0 12px 28px rgba(30, 0, 40, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, translate 0.45s var(--ease-pop);
  }

  .map__episode.is-on {
    opacity: 1;
    translate: -50% 0;
  }

  .map__ep-kicker {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #d6278f;
    text-transform: uppercase;
  }

  .map__episode b {
    font-size: 30px;
    --ol: #8e0f5c;
    white-space: nowrap;
  }

  .map__flystar {
    position: fixed;
    z-index: 160;
    width: 46px;
    height: 46px;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 220, 80, 0.9));
  }

  .map__flystar .ico {
    width: 100%;
    height: 100%;
  }

  .map__fallback {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 18px;
    padding: calc(var(--safe-top) + 90px) 20px calc(var(--nav-h) + 110px);
    background: linear-gradient(180deg, #6fc8ff, #d9f2ff 40%, #78d25a 40%, #5fbd46);
  }

  .map__fnode {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #ffc0e6, #ff4fae 55%, #a3127a);
    border: 4px solid #fff;
    box-shadow: 0 6px 0 #6a0a4f;
    color: #fff;
  }

  .map__fnode:nth-child(odd) {
    translate: -60px 0;
  }

  .map__fnode:nth-child(even) {
    translate: 60px 0;
  }

  .map__fnode.is-current {
    background: radial-gradient(circle at 40% 30%, #fff6c0, #ffc21a 55%, #e07b00);
    animation: mm-pulse 1.4s ease-in-out infinite;
  }

  .map__fnode.is-locked {
    background: radial-gradient(circle at 40% 30%, #e0e6f7, #8e98bd 55%, #565f82);
  }

  .map__fnode b {
    font-size: 26px;
  }

  .map__fnode span {
    font-size: 12px;
    color: #ffe45c;
  }
}