/* ============================================================
   AISay 小镇地图 V5 · 静态一屏总览
   移动端优先 / 完整底图 / 地标点击 / 失败降级。
   ============================================================ */

:root {
  /* —— 手绘水彩纸色系 —— */
  --tm-paper: #F4EDDA;
  --tm-paper-dim: #EAE0C6;
  --tm-card: #FCF7EA;
  --tm-ink: #4A3B2E;
  --tm-ink-soft: #7A6A55;
  --tm-wood: #8A6248;
  --tm-wood-deep: #6B4A36;
  --tm-water: #7FB8C9;
  --tm-grass: #A8C68A;
  --tm-accent: #C05A3A;        /* 山楂红（手绘感主强调） */
  --tm-accent-deep: #A03E28;
  --tm-on-accent: #FFFBF0;
  --tm-new: #D83A2E;

  --tm-fs-title: 17px;
  --tm-fs-body: 14px;
  --tm-fs-small: 12px;
  --tm-fs-tiny: 10px;

  --tm-r-card: 14px;
  --tm-r-pill: 999px;

  --tm-shadow: 0 3px 12px rgba(74, 59, 46, .18);

  --tm-font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --tm-font-note: "Kaiti SC", "STKaiti", "KaiTi", var(--tm-font);
}

.tm-page, .tm-page *, .tm-page *::before, .tm-page *::after { box-sizing: border-box; }

.tm-page {
  margin: 0;
  font-family: var(--tm-font);
  font-size: var(--tm-fs-body);
  color: var(--tm-ink);
  background: var(--tm-paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏 ---------- */
.tm-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--tm-sp, 8px);
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--tm-card), rgba(252, 247, 234, .92));
  border-bottom: 1.5px dashed rgba(138, 98, 72, .4);
}
.tm-topbar .home {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(138, 98, 72, .5);
  border-radius: 12px;
  background: var(--tm-card);
  font-size: 18px; cursor: pointer;
}
.tm-topbar .title { font-family: var(--tm-font-note); font-size: var(--tm-fs-title); font-weight: 800; letter-spacing: 2px; }
.tm-topbar .sub { font-size: var(--tm-fs-tiny); color: var(--tm-ink-soft); margin-top: 1px; }
/* ---------- 地图视口与世界 ---------- */
.tm-viewport {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
  display: block;
  overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 20% 15%, rgba(168, 198, 138, .25), transparent 40%),
    var(--tm-paper);
}

/* V5 底图始终完整显示：按可用高度与宽度共同约束，不裁切。 */
.tm-world {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 2 / 3;
  margin: 0 auto;
}

.tm-art {
  position: absolute; inset: 0;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.tm-art img, .tm-art svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.tm-art [hidden] { display: none !important; }

/* ---------- 点位（徽章 pin + 虚线标签牌） ---------- */
.tm-poi-layer { position: absolute; inset: 0; }
.tm-poi {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.tm-poi .pin-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--tm-card);
  border: 2px solid var(--tm-wood);
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: var(--tm-shadow);
  transition: transform .15s ease;
}
.tm-poi .pin-icon span { transform: rotate(45deg); display: block; }
.tm-poi:active .pin-icon { transform: rotate(-45deg) scale(.92); }
.tm-poi .pin-label {
  font-family: var(--tm-font-note);
  font-size: 11px; font-weight: 800;
  color: var(--tm-ink);
  background: rgba(252, 247, 234, .92);
  border: 1.5px dashed rgba(138, 98, 72, .6);
  border-radius: var(--tm-r-pill);
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(74, 59, 46, .15);
}
.tm-poi .pin-new {
  position: absolute; top: -6px; right: -10px;
  font-size: 8px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: var(--tm-new);
  border-radius: var(--tm-r-pill);
  padding: 1px 5px;
  box-shadow: 0 1px 3px rgba(216, 58, 46, .5);
  animation: tmNewPulse 1.6s ease-in-out infinite;
}
@keyframes tmNewPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.tm-poi .pin-status {
  position: absolute; top: -2px; left: -4px;
  min-width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--tm-card);
  background: var(--tm-grass);
}
.tm-poi .pin-status.busy { background: var(--tm-new); }

.tm-poi:focus-visible { outline: none; }
.tm-poi:focus-visible .pin-icon { outline: 2.5px solid var(--tm-accent); outline-offset: 2px; }
.tm-poi:focus-visible .pin-label { border-color: var(--tm-accent); border-style: solid; }

/* 未来设施预留地：克制占位，不可点击 */
.tm-reserved {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tm-reserved .rsv-tag {
  font-family: var(--tm-font-note);
  font-size: 11px; font-weight: 700;
  color: var(--tm-ink-soft);
  background: rgba(252, 247, 234, .55);
  border: 1.5px dashed rgba(138, 98, 72, .45);
  border-radius: var(--tm-r-pill);
  padding: 3px 12px;
  white-space: nowrap;
}

.tm-poi:focus-visible { outline: none; }

/* 次级入口 chips（不孤立旧功能） */
.tm-poi-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; flex: 1 1 100%; }
.tm-poi-sub[hidden] { display: none; }
.tm-poi-sub-link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px;
  font-size: 11px; font-weight: 700;
  color: var(--tm-ink);
  background: rgba(138, 98, 72, .1);
  border: 1px solid rgba(138, 98, 72, .4);
  border-radius: var(--tm-r-pill);
  padding: 2px 10px;
  text-decoration: none;
}
.tm-poi-sub-link:focus-visible { outline: 2.5px solid var(--tm-accent); outline-offset: 2px; }

.tm-poi:focus-visible { outline: none; }
.tm-poi:focus-visible .pin-icon { outline: 2.5px solid var(--tm-accent); outline-offset: 2px; }
.tm-poi:focus-visible .pin-label { border-color: var(--tm-accent); border-style: solid; }

/* 点位底部信息条（点选后） */
.tm-poi-card {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 15;
  display: flex; align-items: center; gap: 10px;
  background: var(--tm-card);
  border: 1.5px solid rgba(138, 98, 72, .5);
  border-radius: var(--tm-r-card);
  padding: 10px 12px;
  box-shadow: var(--tm-shadow);
}
.tm-poi-card .ico { font-size: 26px; }
.tm-poi-card .nm { font-weight: 800; font-size: var(--tm-fs-body); }
.tm-poi-card .ds { font-size: var(--tm-fs-tiny); color: var(--tm-ink-soft); margin-top: 1px; }
.tm-poi-card .go {
  margin-left: auto; flex: 0 0 auto;
  min-height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px;
  background: linear-gradient(160deg, var(--tm-accent), var(--tm-accent-deep));
  color: var(--tm-on-accent);
  font-family: inherit; font-size: var(--tm-fs-small); font-weight: 800;
  cursor: pointer; text-decoration: none;
}
.tm-poi-card .close {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--tm-ink-soft);
  font-size: 16px; cursor: pointer;
}
.tm-poi-card[hidden] { display: none; }

/* ---------- 降级导航（底图加载失败） ---------- */
.tm-fallback { display: none; }
.tm-page.map-failed .tm-fallback {
  display: block;
  padding: 16px;
}
.tm-page.map-failed .tm-viewport { display: none; }
.tm-fallback h2 { font-family: var(--tm-font-note); font-size: var(--tm-fs-title); margin: 8px 0 4px; }
.tm-fallback p { font-size: var(--tm-fs-small); color: var(--tm-ink-soft); margin: 0 0 12px; }
.tm-fallback-list { display: grid; gap: 8px; }
.tm-fallback-list a {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  background: var(--tm-card);
  border: 1.5px solid rgba(138, 98, 72, .45);
  border-radius: var(--tm-r-card);
  padding: 8px 12px;
  color: var(--tm-ink); text-decoration: none;
  font-weight: 700;
}
.tm-fallback-list a .go2 { margin-left: auto; color: var(--tm-ink-soft); font-weight: 400; }

/* 操作提示 */
.tm-hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 10;
  transform: translateX(-50%);
  font-size: var(--tm-fs-tiny);
  color: var(--tm-ink-soft);
  background: rgba(252, 247, 234, .85);
  border: 1px dashed rgba(138, 98, 72, .45);
  border-radius: var(--tm-r-pill);
  padding: 4px 12px;
  pointer-events: none;
  transition: opacity .6s;
}
.tm-hint.gone { opacity: 0; }

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tm-poi .pin-new { animation: none; }
  .tm-poi .pin-icon { transition: none; }
}

/* 桌面端：视口限宽居中，地图仍保持一屏完整。 */
@media (min-width: 720px) {
  .tm-page { align-items: center; }
  .tm-topbar, .tm-viewport { width: 100%; max-width: 860px; }
  .tm-viewport {
    border: 1.5px solid rgba(138, 98, 72, .5);
    border-top: none;
    border-radius: 0 0 16px 16px;
  }
}