/* ---------- 地图原型 ---------- */

:root {
  --map-sky-top: #f7f5f1;
  --map-sky-bottom: #ece8e1;
}

body {
  overflow: hidden;
  background: var(--map-sky-top);
}

.map-sky {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, var(--map-sky-top) 0%, var(--map-sky-bottom) 100%);
}

.map-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  /* 触屏上拖动 / 双指缩放全部交给地图自己处理，否则浏览器会接管手势并取消指针事件 */
  touch-action: none;
}

.map-texture {
  position: fixed;
  inset: 0;
  background: url('../public/texture/wall_texture.webp') center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 物件：锚点在图片底部中心（落在竖线顶端） */
.map-items {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.map-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: pointer;

  img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 8px rgba(40, 32, 24, 0.18));
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  }

  &:hover img {
    transform: translateY(-6%);
  }
}

.map-item__label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -0.6rem);
  white-space: nowrap;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  font-size: 1.2rem;
  color: #1a1a1a;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.map-item:hover .map-item__label,
.map-item.--is-active .map-item__label {
  opacity: 1;
}

.map-caption {
  position: fixed;
  left: var(--page-padding);
  bottom: var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  color: #1a1a1a;
  pointer-events: none;
}

.map-caption__place {
  font-size: 2rem;
  letter-spacing: 0.1em;
}

.map-caption__hint {
  font-size: 1rem;
  opacity: 0.45;
}

@media (max-width: 640px) {
  .map-item {
    width: 76px;
  }

  /* 调参面板收起时只包住标题文字，点开后恢复原宽度 */
  .lil-gui.root.closed {
    width: auto;
  }
}

/* ---------- 英文界面（js/i18n.js 把 <html lang> 设为 en） ---------- */

:root:lang(en) {
  .map-item__label,
  .map-caption__place {
    font-family: 'EB Garamond', 'Noto Serif SC', 'Songti SC', serif;
    font-weight: 500;
    letter-spacing: 0;
  }

  /* 英文名字较长：物件上方的名字限制宽度、居中换行，往上长 */
  .map-item__label {
    width: max-content;
    max-width: 14em;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .map-caption__place {
    max-width: calc(100vw - 2 * var(--page-padding));
    font-size: 1.8rem;
    line-height: 1.2;
  }
}