* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ocean: #bfe6f7;
  --ocean-deep: #a4d8f0;
  --card: #ffffff;
  --ink: #3d3d3d;
  --accent: #ff9f45;
  --meat: #ff6b6b;
  --plant: #6bcb77;
  --special: #4d96ff;
  --radius: 22px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.hidden { display: none !important; }

/* ========== 地图模式 ========== */
#mapScreen {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #cdeefb 0%, var(--ocean) 40%, var(--ocean-deep) 100%);
}

#topBar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  pointer-events: none;
}

#appTitle {
  font-size: 26px; font-weight: 800; letter-spacing: 1px;
  color: #2c6e49;
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
  pointer-events: auto;
}

#filters { display: flex; gap: 10px; flex-wrap: wrap; pointer-events: auto; }

.chip {
  border: none; outline: none; cursor: pointer;
  font-size: 17px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #666;
  box-shadow: 0 3px 8px rgba(30,80,120,.15);
  transition: transform .15s, background .2s, color .2s;
}
.chip:active { transform: scale(.93); }
.chip.active { background: var(--accent); color: #fff; }

#mapViewport {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
}

#mapWorld {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

#mapImage {
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* 标记层不参与地图缩放，屏幕坐标由 JS 计算，保证文字图片清晰 */
#markers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* 被推开的标记指回真实化石产地的引线 */
#leaders {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  stroke: #6f9bb5; stroke-width: 1.4; stroke-dasharray: 3 3;
  fill: #6f9bb5; opacity: .5;
}

.marker {
  position: absolute;
  left: 0; top: 0;
  width: 64px;
  pointer-events: auto;
  will-change: transform;
  display: flex; flex-direction: column; align-items: center;
  border: none; background: none; cursor: pointer;
  transition: opacity .25s, filter .25s;
}
.marker.dimmed { opacity: .25; filter: grayscale(1); pointer-events: none; }

.marker .bubble {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 10px rgba(30,80,120,.25);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .15s;
}
.marker:active .bubble { transform: scale(1.15); }
.marker.diet-meat .bubble { border-color: var(--meat); }
.marker.diet-plant .bubble { border-color: var(--plant); }
.marker.special .bubble { border-color: var(--special); }

.marker .bubble img {
  width: 88%; height: 88%;
  object-fit: contain;
  pointer-events: none;
}

.marker .label {
  margin-top: 2px;
  font-size: 13px; font-weight: 800;
  color: #2c5777;
  background: rgba(255,255,255,.85);
  padding: 1px 8px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(30,80,120,.2);
}

#zoomControls {
  position: absolute; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; z-index: 20;
}
#zoomControls button {
  width: 54px; height: 54px; border-radius: 50%;
  border: none; font-size: 28px; font-weight: 700; color: #2c6e49;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 10px rgba(30,80,120,.2);
  cursor: pointer;
}
#zoomControls button:active { transform: scale(.9); }

#aboutBtn {
  position: absolute; left: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 40px; height: 40px; border-radius: 50%;
  border: none; font-size: 20px; color: #7ba7c2;
  background: rgba(255,255,255,.8);
  cursor: pointer; z-index: 20;
}

/* ========== 详情 ========== */
#detailScreen { position: fixed; inset: 0; z-index: 50; }

#habitat { position: absolute; inset: 0; }
#habitat svg { position: absolute; inset: 0; width: 100%; height: 100%; }

#stage { position: absolute; inset: 0; touch-action: none; }
#stage canvas { display: block; }

#stage .heroWrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#stage .heroWrap img {
  max-width: 92%; max-height: 70%;
  transform-origin: center;
  will-change: transform;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.28));
  pointer-events: none;
}

#closeBtn {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; font-size: 26px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  cursor: pointer; z-index: 60;
}
#closeBtn:active { transform: scale(.9); }

#infoCard {
  position: absolute; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 340px; z-index: 55;
  background: rgba(255,255,255,.94);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

#infoHeader { display: flex; align-items: center; gap: 10px; }
#dinoName { font-size: 30px; font-weight: 900; color: #2c5777; }
#speakBtn {
  border: none; background: #eef7fc; border-radius: 50%;
  width: 42px; height: 42px; font-size: 20px; cursor: pointer;
}
#speakBtn:active { transform: scale(.88); }
/* 朗读中：轻轻脉动，再点一次可停止 */
#speakBtn.playing {
  background: var(--accent);
  animation: speakPulse 1.1s ease-in-out infinite;
}
@keyframes speakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 159, 69, .55); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 159, 69, 0); }
}
#dinoEn { font-size: 14px; color: #8aa8bb; font-style: italic; margin: 2px 0 10px; }

#infoBadges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.badge {
  font-size: 14px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; color: #fff;
}
.badge.meat { background: var(--meat); }
.badge.plant { background: var(--plant); }
.badge.era { background: #b085d6; }
.badge.len { background: #58b5e0; }
.badge.home { background: #e8b04b; }
.badge.site { background: #96836b; }

#dinoFact { font-size: 17px; line-height: 1.6; }

#hint {
  margin-top: 10px; font-size: 14px; color: #9ab5c6;
}

/* ========== 关于 ========== */
#aboutModal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
#aboutCard {
  background: #fff; border-radius: var(--radius);
  padding: 26px 30px; max-width: 420px; margin: 20px;
}
#aboutCard h3 { font-size: 22px; margin-bottom: 10px; color: #2c5777; }
#aboutCard p { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
#aboutCard .credits { font-size: 12px; color: #999; }
#aboutClose {
  margin-top: 6px; border: none; cursor: pointer;
  background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 700;
  padding: 10px 26px; border-radius: 999px;
}

/* 手机竖屏时信息卡收窄 */
@media (max-width: 640px) {
  #infoCard { right: 16px; max-width: none; }
  #dinoName { font-size: 24px; }
  #appTitle { font-size: 20px; }
  .chip { font-size: 14px; padding: 8px 13px; }
}