/* 主题变量统一由 ../shared/tokens.css 提供 */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--bg);
}

body {
  overflow: hidden;
  color: var(--cream);
  background: var(--bg);
  font-family: var(--xh-font-sans);
}

a,
button {
  color: inherit;
  font: inherit;
}

.home-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--progressive-bg-image, url("./assets/xinhuocun-village-hero-20260901-low.webp")) center bottom / cover no-repeat;
}

.home-page::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 17% 35%, rgba(34, 19, 10, 0.34) 0%, rgba(34, 19, 10, 0.18) 24%, transparent 46%),
    linear-gradient(180deg, rgba(4, 6, 10, 0.18) 0%, transparent 15%, transparent 84%, rgba(28, 14, 4, 0.16) 100%);
}

.site-header,
.map-intro,
.hotspot-layer,
.map-hud {
  position: relative;
  z-index: 2;
}

.site-header {
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  height: 92px;
  padding: 0 clamp(38px, 4.7vw, 82px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(244, 200, 121, 0.68);
  border-radius: 50%;
  background: rgba(255, 236, 184, 0.18);
  box-shadow: 0 0 18px rgba(255, 179, 71, 0.22), inset 0 0 10px rgba(255, 246, 207, 0.18);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand-name {
  font-family: var(--xh-font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold);
}

.brand-line {
  width: 1px;
  height: 17px;
  background: rgba(244, 200, 121, 0.32);
}

.brand-tagline {
  font-size: 14px;
  color: rgba(255, 228, 177, 0.82);
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4vw, 62px);
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  padding: 10px 0 18px;
  font-size: 17px;
  text-decoration: none;
  color: rgba(255, 241, 210, 0.72);
  transition: color 180ms ease, text-shadow 180ms ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(244, 200, 121, 0.24);
}

.main-nav a.active::before,
.main-nav a.active::after {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
}

.main-nav a.active::before {
  bottom: 6px;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.main-nav a.active::after {
  bottom: 1px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 15px rgba(244, 200, 121, 0.86);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}

.search-button {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.search-button::before {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 15px;
  height: 15px;
  content: "";
  border: 2px solid rgba(255, 246, 224, 0.92);
  border-radius: 50%;
}

.search-button::after {
  position: absolute;
  top: 23px;
  left: 23px;
  width: 11px;
  height: 2px;
  content: "";
  background: rgba(255, 246, 224, 0.92);
  border-radius: 99px;
  transform: rotate(45deg);
  transform-origin: left center;
}

.login-button {
  min-width: 132px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--gold);
  border: 1px solid rgba(244, 200, 121, 0.52);
  border-radius: 13px;
  background: rgba(106, 68, 33, 0.14);
  box-shadow: 0 8px 22px rgba(94, 53, 14, 0.12), inset 0 0 16px rgba(255, 235, 179, 0.05);
}

.map-intro {
  z-index: 4;
  width: min(610px, 43vw);
  margin-top: 14px; /* 与栏顶 padding 合计 24px,固定值不随视口变化 */
  margin-left: clamp(52px, 5vw, 84px);
  padding: 10px 18px 18px 0;
  animation: fade-up 740ms ease both;
}

.map-intro::before {
  position: absolute;
  inset: -18px -32px -20px -24px;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 28% 45%, rgba(37, 21, 10, 0.26) 0%, rgba(37, 21, 10, 0.13) 38%, transparent 72%);
}

.map-intro h1 {
  margin: 0 0 16px;
  font-family: var(--xh-font-serif);
  font-size: clamp(44px, 4vw, 60px); /* 60/30/15 模数阶梯之首 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff0cb; /* 回退色 */
  background: linear-gradient(176deg, #fff6e0 0%, #ffe6b0 52%, var(--xh-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(42, 19, 3, 0.55)) drop-shadow(0 0 16px rgba(244, 200, 121, 0.22));
}

.map-kicker {
  margin: 0;
  font-family: var(--xh-font-brush, var(--xh-font-kai)); /* 手写声部 */
  font-size: clamp(26px, 2vw, 30px);
  line-height: 1.4;
  color: var(--xh-gold); /* 最亮的金只属于主标题:副标降回主金,靠明度让位 */
  letter-spacing: 0.06em;
  text-shadow: 0 2px 12px rgba(42, 19, 3, 0.56);
}

.map-rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: 32px 0 16px;
  background: var(--xh-grad-rule);
  box-shadow: 0 0 12px rgba(244, 200, 121, 0.5);
}

.map-copy {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: rgba(247, 229, 195, 0.82);
  text-shadow: 0 2px 11px rgba(42, 19, 3, 0.56);
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: auto;
  max-width: 100%;
  margin-top: 40px;
}

.map-button {
  border: 1px solid rgba(255, 218, 143, 0.42);
  background: linear-gradient(180deg, rgba(255, 236, 184, 0.22), rgba(96, 60, 26, 0.34));
  box-shadow: 0 10px 24px var(--shadow), 0 0 18px rgba(255, 181, 73, 0.06), inset 0 0 18px rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(12px);
}

.map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  min-height: 52px;
  padding: 0 17px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 15px;
  color: rgba(255, 241, 210, 0.9);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.map-button.is-primary {
  min-width: 192px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px; /* 归入场景内招牌(hotspot 药丸)一族 */
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff6df;
  text-shadow: 0 1px 6px rgba(120, 60, 10, 0.35);
  border-color: rgba(255, 220, 145, 0.7);
  background: var(--xh-grad-gold);
  box-shadow:
    0 12px 30px rgba(255, 150, 40, 0.28),
    0 0 28px rgba(255, 190, 90, 0.22),          /* 外 bloom,向灯笼看齐 */
    inset 0 1px 0 rgba(255, 238, 190, 0.35),
    inset 0 -1px 0 rgba(120, 60, 10, 0.30);     /* 下缘暗边:从色块到铸件 */
}

.map-button.is-primary .entry-logo {
  width: 22px;
  height: 22px;
  border: none;
  box-shadow: none;
}

/* 次级入口:深色玻璃药丸 + 光点,与地图热点标签同一材质族 */
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(244, 200, 121, 0.34);
  background: linear-gradient(180deg, rgba(24, 14, 6, 0.58), rgba(18, 10, 4, 0.62));
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 0 14px rgba(255, 255, 255, 0.04);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: rgba(255, 241, 210, 0.9);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.map-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe1a0;
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.75);
}

/* 手机专属入口：桌面端彻底不出现（连布局都不占），
   只在下方 max-width: 760px 的手机分支里放出来。 */
.map-link--phone-only { display: none; }

.map-link:hover {
  color: var(--xh-gold-bright);
  border-color: rgba(255, 218, 143, 0.6);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 190, 90, 0.16), inset 0 0 14px rgba(255, 255, 255, 0.05);
}

.entry-logo,
.stat-logo {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid rgba(244, 200, 121, 0.48);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 9px rgba(255, 179, 71, 0.18);
}

/* ==== 指引层（Ground Decal 箭头 + 五层悬停高亮 + 招牌标签 + 木牌路口）====
   按《芯火村首页地图交互整改规格书》重建。
   坐标层按背景图 4096×2307 的 cover 数学同步缩放：
   宽 = max(100vw, 100vh×宽高比)，底部居中锚定，
   使百分比坐标在任意视口比例下都精确钉在画面地物上。
   --u = 1600 宽基准截图中的 1px，随层缩放。
   色板纪律：#FFF3D6 芯 / #FFD25E 亮 / #FFC845 主 / #FFAE3C 晕 / #4A2E12 描边 / #E8B55F 标签金。
   调试开关：.hotspot-layer 加 off-scrim / off-cut / off-edge / off-under / off-breathe
   可独立关闭高亮五层（1 scrim / 2 抠图 / 3 边缘光 / 4 underglow+光池 / 5 呼吸）。 */
.hotspot-layer {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: max(100vw, 177.55vh);
  aspect-ratio: 4096 / 2307;
  transform: translateX(-50%);
  pointer-events: none;
  --u: calc(max(100vw, 177.55vh) / 1600);
}

.guide-defs {
  position: absolute;
}

/* 每个入口 = 覆盖建筑区域的感应区（left/top/width/height 为层坐标百分比） */
.hotspot {
  position: absolute;
  color: #fff1d7;
  text-decoration: none;
  pointer-events: auto;
}

.map-button:hover,
.map-button:focus-visible,
.login-button:hover,
.login-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-hot);
  background: linear-gradient(180deg, rgba(255, 239, 194, 0.22), rgba(132, 82, 34, 0.26));
  box-shadow: 0 13px 30px rgba(255, 166, 49, 0.18), 0 0 20px rgba(255, 190, 90, 0.1), inset 0 0 22px rgba(255, 238, 190, 0.09);
}

.map-button.is-primary:hover,
.map-button.is-primary:focus-visible {
  color: #fff6df;
  border-color: rgba(255, 224, 150, 0.9);
  background: linear-gradient(180deg, #f6c96e, #c67c2c);
  box-shadow: 0 14px 32px rgba(255, 158, 40, 0.32), inset 0 1px 0 rgba(255, 244, 205, 0.42);
}

/* 感应区 = 抠图贴片的包围盒（层坐标百分比，由生成脚本给出） */
.hotspot-plaza {
  left: 41.72%;
  top: 64.11%;
  width: 20.56%;
  height: 18.29%;
}

.hotspot-archive {
  left: 6.45%;
  top: 57.3%;
  width: 23%;
  height: 26.4%;
}

.hotspot-workshop {
  left: 65.92%;
  top: 55.05%;
  width: 11.23%;
  height: 13.87%;
}

.hotspot-workshop:focus-visible { outline: 3px solid #ffe1a3; outline-offset: 4px; }

.hotspot-projects {
  left: 77.86%;
  top: 53.84%;
  width: 18.29%;
  height: 21.67%;
}

/* ---- 高亮堆栈（每个入口一组：scrim / 抠图 / 边缘光 / underglow+光池，第 5 层=呼吸动画） ---- */
.fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 第 1 层 Focus scrim：全画布 rgba(10,14,26,.22)，目标多边形羽化挖空（羽化 40px@1600w），200ms 淡入 */
.fx-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 200ms ease;
}

/* 第 2 层 抠图提亮贴片：brightness/saturate/contrast 已烘焙，边缘羽化 2px@1600w */
.fx-cut-w {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.fx-cut {
  display: block;
  width: 100%;
  height: 100%;
}

/* 第 4 层 Underglow：剪影 #FFAE3C blur 28px@1600w，向下偏移 6px（已并入 top），进场 scale 1.03→1 */
.fx-under-w {
  position: absolute;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.fx-under {
  display: block;
  width: 100%;
  height: 100%;
  animation: fx-breathe 2.2s ease-in-out infinite;
}

/* 第 4 层附属·地面光池：径向渐变 #FFC24D→透明，宽≈建筑宽×0.83，压扁 0.36，screen 混合 */
.fx-pool-w {
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease-out;
}

.fx-pool {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, #ffc24d 0%, rgba(255, 194, 77, 0) 70%);
  mix-blend-mode: screen;
  animation: fx-breathe 2.2s ease-in-out infinite;
}

/* 第 3 层 边缘光：轮廓膨胀 6px 减原形的边缘带，#FFD98F blur 3px（已烘焙） */
.fx-edge-w {
  position: absolute;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.fx-edge {
  display: block;
  width: 100%;
  height: 100%;
  animation: fx-breathe 2.2s ease-in-out infinite;
}

/* ↓↓↓ 以下四组层坐标由 scripts/build_hotspot_fx.py 按背景图算出，勿手改；换背景图重跑该脚本 ↓↓↓ */

/* archive */
.fx-cut-archive   { left: 5.566%; top: 55.743%; width: 23.608%; height: 28.955%; }
.fx-edge-archive  { left: 5.005%; top: 54.746%; width: 24.731%; height: 30.949%; }
.fx-under-archive { left: 2.075%; top: 50.211%; width: 30.591%; height: 41.352%; }
.fx-pool-archive  { left: 25.354%; top: 83.702%; width: calc(304 * var(--u)); height: calc(109 * var(--u)); }

/* plaza */
.fx-cut-plaza   { left: 45.508%; top: 66.103%; width: 13.599%; height: 12.094%; }
.fx-edge-plaza  { left: 44.946%; top: 65.106%; width: 14.722%; height: 14.088%; }
.fx-under-plaza { left: 42.017%; top: 60.57%; width: 20.581%; height: 24.491%; }
.fx-pool-plaza  { left: 52.295%; top: 77.2%; width: calc(171 * var(--u)); height: calc(62 * var(--u)); }

/* workshop */
.fx-cut-workshop   { left: 66.187%; top: 54.66%; width: 10.059%; height: 13.004%; }
.fx-edge-workshop  { left: 65.625%; top: 53.663%; width: 11.182%; height: 14.998%; }
.fx-under-workshop { left: 62.695%; top: 49.127%; width: 17.041%; height: 25.401%; }
.fx-pool-workshop  { left: 70.679%; top: 66.667%; width: calc(124 * var(--u)); height: calc(45 * var(--u)); }

/* projects */
.fx-cut-projects   { left: 77.466%; top: 48.938%; width: 18.823%; height: 27.352%; }
.fx-edge-projects  { left: 76.904%; top: 47.941%; width: 19.946%; height: 29.345%; }
.fx-under-projects { left: 73.975%; top: 43.405%; width: 25.806%; height: 39.749%; }
.fx-pool-projects  { left: 79.98%; top: 75.293%; width: calc(240 * var(--u)); height: calc(86 * var(--u)); }

/* 广场特例·地面选中环：椭圆环 中心(52.3%,74.7%层) 半径 152×30.6@1600w，
   描边 6 #FFD25E 虚线 24/16，外发光 16px #FF9E2C，dashoffset 6s 线性循环 */
.fx-ring-w {
  position: absolute;
  left: 52.3%;
  top: 74.7%;
  z-index: 3;
  width: calc(400 * var(--u));
  height: calc(128 * var(--u));
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease-out;
}

.fx-ring {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fx-ring ellipse {
  fill: none;
  stroke: #ffd25e;
  stroke-width: 6;
  stroke-dasharray: 24 16;
  filter: drop-shadow(0 0 16px #ff9e2c);
  animation: ring-dash 6s linear infinite;
}

@keyframes ring-dash {
  to { stroke-dashoffset: -400; }
}

/* 第 5 层 呼吸：第 3、4 层 opacity 0.75↔1.0，周期 2.2s */
@keyframes fx-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* 各入口激活（hover / focus / is-active）点亮自己的堆栈 */
.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .fx-archive .fx-scrim,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .fx-plaza .fx-scrim,
.hotspot-layer:has(.hotspot-workshop:is(:hover, :focus-visible, .is-active)) .fx-workshop .fx-scrim,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .fx-projects .fx-scrim {
  opacity: 1;
}

.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .fx-archive .fx-cut-w,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .fx-plaza .fx-cut-w,
.hotspot-layer:has(.hotspot-workshop:is(:hover, :focus-visible, .is-active)) .fx-workshop .fx-cut-w,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .fx-projects .fx-cut-w {
  opacity: 1;
}

.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .fx-archive .fx-under-w,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .fx-plaza .fx-under-w,
.hotspot-layer:has(.hotspot-workshop:is(:hover, :focus-visible, .is-active)) .fx-workshop .fx-under-w,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .fx-projects .fx-under-w {
  opacity: 0.5;
  transform: scale(1);
}

.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .fx-archive .fx-pool-w,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .fx-plaza .fx-pool-w,
.hotspot-layer:has(.hotspot-workshop:is(:hover, :focus-visible, .is-active)) .fx-workshop .fx-pool-w,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .fx-projects .fx-pool-w {
  opacity: 1;
}

.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .fx-archive .fx-edge-w,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .fx-plaza .fx-edge-w,
.hotspot-layer:has(.hotspot-workshop:is(:hover, :focus-visible, .is-active)) .fx-workshop .fx-edge-w,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .fx-projects .fx-edge-w {
  opacity: 0.9;
}

.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .fx-ring-w {
  opacity: 1;
}

/* 调试开关 */
.hotspot-layer.off-scrim .fx-scrim { display: none; }
.hotspot-layer.off-cut .fx-cut-w { display: none; }
.hotspot-layer.off-edge .fx-edge-w { display: none; }
.hotspot-layer.off-under .fx-under-w,
.hotspot-layer.off-under .fx-pool-w { display: none; }
.hotspot-layer.off-breathe .fx-under,
.hotspot-layer.off-breathe .fx-pool,
.hotspot-layer.off-breathe .fx-edge,
.hotspot-layer.off-breathe .fx-ring ellipse { animation: none; }

/* ---- 地面箭头系统（单一 SVG 几何四处复用） ----
   容器：translate(-50%,-50%) scaleY(.55) rotate(θ)（先转后压）；
   nudge 位移动画加在 rotate 内层子元素 .ga-n / .gc-n 上。 */
.ga,
.gc {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  pointer-events: none;
}

/* 接地投影：箭头正下方椭圆 rgba(0,0,0,.35) blur 10px，尺寸=压扁后包围盒×(1.1,0.5) */
.ga-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--shw) * var(--u));
  height: calc(var(--shh) * var(--u));
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
}

/* chevron 半透明波谷时投影减淡,避免自身阴影透出发灰 */
.gc .ga-shadow {
  background: rgba(0, 0, 0, 0.22);
}

.ga-tilt,
.gc-tilt {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(var(--w) * var(--u));
  height: calc(var(--l) * var(--u));
  transform: translate(-50%, -50%) scaleY(0.55) rotate(var(--rot));
}

.gc-tilt {
  transform: translate(-50%, -50%) scaleY(0.5) rotate(var(--rot));
}

.ga-n,
.gc-n {
  display: block;
  width: 100%;
  height: 100%;
}

/* 常态：沿指向 nudge 8px 往复 + opacity .85↔1，1.6s，cubic-bezier(.45,0,.55,1)，相位错开 */
.ga-n {
  animation: ga-nudge var(--per, 1.6s) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: var(--ph, 0s);
  --amp: calc(-8 * var(--u));
}

@keyframes ga-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(var(--amp, -8px)); opacity: 1; }
}

/* chevron 流：顺序波动 opacity .65→1（P2-6：波谷抬高防灰蓝芯），周期 1.6s，相位差 0/.25s（日志 hover 加速至 .9s） */
.gc-n {
  animation: gc-wave var(--cper, 1.6s) ease-in-out infinite;
  animation-delay: var(--ph, 0s);
}

@keyframes gc-wave {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(calc(-4 * var(--u))); }
}

/* P2-6：chevron 内芯改暖 #FFE9B8，任意相位芯部色相保持 30°–55° 暖金域（箭头芯仍为 #FFF3D6） */
.gc .ga-corefill {
  fill: #ffe9b8;
}

.ga-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 图层自内向外：芯 #FFF3D6（0.62 同形）/ 主体 #FFC845 / 描边 #4A2E12 宽9 /
   内发光 #FFD25E blur6 op.9 / 外发光 #FF9E2C blur18 op.45（blur 值换算至 viewBox 单位） */
.ga-glow-o {
  fill: #ff9e2c;
  filter: blur(24px);
  opacity: 0.45;
  transition: opacity 160ms ease-out;
}

.ga-glow-i {
  fill: #ffd25e;
  filter: blur(8px);
  opacity: 0.9;
}

.ga-body {
  fill: #ffc845;
  stroke: #4a2e12;
  stroke-width: 18;
  stroke-linejoin: round;
  paint-order: stroke;
}

.ga-corefill {
  fill: #fff3d6;
}

/* 对应入口 hover：振幅 12px、周期 0.9s、外发光 ×1.5 */
.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .ga-archive .ga-n,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .ga-plaza .ga-n,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .ga-projects .ga-n {
  --amp: calc(-12 * var(--u));
  --per: 0.9s;
}

.hotspot-layer:has(.hotspot-archive:is(:hover, :focus-visible, .is-active)) .ga-archive .ga-glow-o,
.hotspot-layer:has(.hotspot-plaza:is(:hover, :focus-visible, .is-active)) .ga-plaza .ga-glow-o,
.hotspot-layer:has(.hotspot-projects:is(:hover, :focus-visible, .is-active)) .ga-projects .ga-glow-o {
  opacity: 0.675;
}

/* ---- 标签系统（招牌样式 + 强制锚定） ---- */
.hotspot-label {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 10px 20px;
  border: 1.5px solid #e8b55f;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(46, 30, 14, 0.92), rgba(30, 18, 8, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: #ffe9be;
  transform: translate(-50%, -50%);
  transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, opacity 150ms ease-out;
}

.label-flame {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: #ffc94d;
}

/* 锚定：引线 1.5px #E8B55F(60%) 收于 4px 圆点；档案用 8px 三角尾扎进屋脊 */
.label-line {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: calc(27.5 * var(--u));
  background: rgba(232, 181, 95, 0.6);
  /* 1px 暗描边：引线穿行火花粒子区仍可读 */
  box-shadow: -1px 0 0 rgba(30, 16, 4, 0.55), 1px 0 0 rgba(30, 16, 4, 0.55);
  transform: translateX(-50%);
}

.label-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8b55f;
  transform: translateX(-50%);
}

.label-tail {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #e8b55f;
  border-bottom: 0;
  transform: translateX(-50%);
}

/* 标签落位（相对各自感应区换算）
   左屋「加入我们」标签（2026-09）：横置于屋右侧、label-tail-left 箭头朝左指向屋身，
   不再从上方垂挂，避免与文案区冲突。 */
.hotspot-archive .hotspot-label {
  left: 116%;
  top: 42%;
}

/* 横向锚定：左指三角尾，扎向屋身 */
.label-tail-left {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #e8b55f;
  border-left: 0;
  transform: translateY(-50%);
}

.hotspot-plaza .hotspot-label {
  left: 51.459%;
  top: -37.692%;
}

.hotspot-workshop .hotspot-label {
  left: 50%;
  top: -22%;
}

.hotspot-projects .hotspot-label {
  left: 33.57%;
  top: -16.677%;
}

/* 交互：本标签 scale1.06/描边转亮/辉光 + 火苗微闪；其余标签（含木牌板字）降至 0.55 */
.hotspot-layer:has([data-hotspot]:is(:hover, :focus-visible, .is-active)) .hotspot-label,
.hotspot-layer:has([data-hotspot]:is(:hover, :focus-visible, .is-active)) 
.hotspot:is(:hover, :focus-visible, .is-active) .hotspot-label {
  opacity: 1;
  border-color: #ffd98f;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 190, 80, 0.45);
  transform: translate(-50%, -50%) scale(1.06);
}

.hotspot:is(:hover, :focus-visible, .is-active) .hotspot-label .label-flame {
  animation: flame-flicker 0.6s ease-in-out infinite;
}

@keyframes flame-flicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88) translateY(-1px); opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .ga-n,
  .gc-n,
  .fx-under,
  .fx-pool,
  .fx-edge,
  .fx-ring ellipse,
  .hotspot-label .label-flame {
    animation: none !important;
  }
}

/* 数据未返回（或读取失败）时整体隐藏，不留空玻璃面板 */
.stats-bar:empty {
  display: none;
}

.stats-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 4.5vh, 48px);
  z-index: 6;
  /* 按实际条目数自适应宽度（0 值项会被 main.js 过滤隐藏，列数不固定） */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, auto);
  width: fit-content;
  max-width: calc(100% - 160px);
  min-height: 54px;
  padding: 7px 18px;
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-pill);
  background: linear-gradient(180deg, rgba(111, 70, 33, 0.16), rgba(64, 40, 21, 0.15));
  box-shadow: 0 8px 24px rgba(82, 45, 13, 0.14), 0 0 16px rgba(255, 181, 73, 0.04), inset 0 1px 0 rgba(255, 238, 190, 0.14), inset 0 0 18px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
  animation: float-in 880ms 160ms ease both;
}

.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}

.stat + .stat {
  border-left: 1px solid rgba(244, 200, 121, 0.13);
}

.stat-logo {
  width: 24px;
  height: 24px;
}

.stat-content {
  display: grid;
  gap: 3px;
}

.stat-content span {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(244, 200, 121, 0.82);
}

.stat-content strong {
  font-family: var(--xh-font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--xh-gold-bright);
  text-shadow: 0 0 12px rgba(255, 216, 135, 0.28);
  font-variant-numeric: tabular-nums;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 1220px) {
  .site-header {
    grid-template-columns: 1fr auto;
    height: 82px;
  }

  .main-nav {
    display: none;
  }

  .map-intro {
    width: min(560px, calc(100% - 58px));
    margin-top: 14px;
    margin-left: 30px;
  }

  .map-intro h1 {
    font-size: clamp(38px, 5vw, 52px);
  }
}

@media (max-width: 760px) {
  body {
    overflow-y: auto;
  }

  .home-page {
    min-height: 100svh;
    padding-bottom: 24px;
    overflow: hidden auto;
    background-position: center bottom;
  }

  .home-page::before {
    background:
      radial-gradient(ellipse at 50% 22%, rgba(34, 19, 10, 0.22) 0%, transparent 54%),
      linear-gradient(180deg, rgba(4, 6, 10, 0.14) 0%, transparent 32%, rgba(28, 14, 4, 0.14) 100%);
  }

  .site-header {
    height: 70px;
    padding: 0 18px;
  }

  .brand-line,
  .brand-tagline,
  .search-button {
    display: none;
  }

  .brand-name {
    font-size: 22px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .login-button {
    min-width: auto;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  .map-intro {
    width: calc(100% - 36px);
    margin: 24px 18px 0;
  }

  .map-intro h1 {
    font-size: 38px;
  }

  .map-kicker {
    font-size: 18px;
  }

  .map-copy {
    font-size: 13px;
  }

  .map-actions {
    width: 100%;
    gap: 10px;
    margin-top: 20px;
  }

  .map-button {
    width: 100%;
    min-height: 48px;
  }

  /* 手机上顶部导航（.main-nav）已被隐藏、地图热区也不适合触屏，
     这里放出灵感大厅入口，否则从首页没有路径进去。 */
  .map-link--phone-only {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .stats-bar {
    position: relative;
    left: auto;
    bottom: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 36px);
    min-height: auto;
    margin: 16px auto 0;
    padding: 10px;
    transform: none;
    animation: none;
  }

  .stat {
    justify-content: flex-start;
    gap: 10px;
    padding: 8px;
  }

  .stat + .stat {
    border-left: 0;
  }

  .stat-logo {
    width: 22px;
    height: 22px;
  }

  .stat-content span {
    font-size: 12px;
  }

  .stat-content strong {
    font-size: 19px;
  }
}

/* 2026-09-01 换写实版背景（hero-20260901）后，五层高亮资产已按新图重制
   （scripts/build_hotspot_fx.py），此处不再需要临时停用段。 */