/* 村民馆壳页 —— 篝火态（第一视角场景 + 发光热点）与页签态（磨砂面板 + iframe）。
   场景设定：本页就是主页地图正中央篝火广场「坐下来之后看到的景象」，
   三个功能对应场景三个叙事位：篝火=围炉夜话(广场)、火边的人=认识村民(档案)、自己的座位=我的村民证。
   热点坐标层按背景图 4096×2313 的 cover 数学同步缩放（同 village-home 地图算法）：
   宽 = max(100vw, 100vh×宽高比 177.09vh)，底部居中锚定，百分比坐标在任意视口比例下钉在画面上。 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--xh-text);
  font-family: var(--xh-font-serif);
  background:
    var(--progressive-bg-image, url("./assets/hall-bg-low.webp")) center bottom / cover no-repeat,
    var(--xh-night-1);
}

.hall-page {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* ---------- 篝火态：标题区 ---------- */

.hall-intro {
  position: relative;
  z-index: 6;
  margin-top: clamp(6px, 2vh, 28px);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(5, 8, 13, 0.85);
}

.hall-intro h1 {
  margin: 0;
  color: var(--xh-cream);
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 10px;
  text-indent: 10px;
}

.hall-kicker {
  margin: 10px 0 0;
  color: var(--xh-muted);
  font-family: var(--xh-font-kai);
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 4px;
}

/* ---------- 篝火态：热点层（cover 数学） ---------- */

.hall-layer {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: max(100vw, 177.09vh);
  aspect-ratio: 4096 / 2313;
  transform: translateX(-50%);
  pointer-events: none;
}

.hall-spot {
  position: absolute;
  pointer-events: auto;
  text-decoration: none;
}

/* 感应区坐标：图面百分比（left/top/width/height） */
.spot-plaza          { left: 41%;   top: 45%; width: 20%; height: 42%; }
.spot-archive-left   { left: 18.5%; top: 47%; width: 21%; height: 42%; }
.spot-archive-right  { left: 62%;   top: 45%; width: 22%; height: 46%; }
.spot-passport       { left: 33%;   top: 87%; width: 34%; height: 13%; }

/* 悬停光晕：整块感应区一层柔和的火光提亮 */
.hall-spot::before {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 179, 71, 0.16), transparent 72%);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.hall-spot:is(:hover, :focus-visible)::before {
  opacity: 1;
}

/* 标签牌：常亮微光的金边玻璃小牌，悬停增亮上浮 */
.spot-label {
  position: absolute;
  left: 50%;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--xh-border);
  border-radius: 999px;
  background: var(--xh-panel-strong);
  backdrop-filter: blur(var(--xh-glass-blur-soft));
  -webkit-backdrop-filter: blur(var(--xh-glass-blur-soft));
  box-shadow: var(--xh-shadow-md), var(--xh-glow-gold), var(--xh-glass-sheen);
  color: var(--xh-gold-bright);
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 3px;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, color 200ms ease-out;
  animation: spot-breathe 3.6s ease-in-out infinite;
}

/* 各标签在感应区内的锚位微调 */
.spot-plaza .spot-label         { top: 14%; }
.spot-archive-left .spot-label  { top: -10%; }
.spot-archive-right .spot-label { top: -10%; }
.spot-passport .spot-label      { top: -46%; }

.hall-spot:is(:hover, :focus-visible) .spot-label {
  border-color: var(--xh-border-hot);
  box-shadow: var(--xh-shadow-md), var(--xh-glow-gold-strong), var(--xh-glass-sheen);
  color: var(--xh-cream);
  transform: translateX(-50%) translateY(-3px);
  animation-play-state: paused;
}

.spot-flame {
  width: 15px;
  height: 15px;
  fill: var(--xh-gold-hot);
  filter: drop-shadow(0 0 5px rgba(255, 179, 71, 0.6));
}

@keyframes spot-breathe {
  0%, 100% { box-shadow: var(--xh-shadow-md), var(--xh-glow-gold), var(--xh-glass-sheen); }
  50%      { box-shadow: var(--xh-shadow-md), 0 0 24px rgba(255, 205, 112, 0.42), var(--xh-glass-sheen); }
}

/* ---------- 页签态：压暗 + 磨砂面板 ---------- */

.hall-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 8, 13, 0.58);
  animation: hall-fade-in 240ms ease-out;
}

/* 页签态全屏化（2026-09，Owner 要求）：整视口铺满，连顶部导航一起盖掉，
   页签态的唯一导航就是页签条（回到篝火可退回场景，导航栏随之恢复） */
.hall-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 100vw;
  border-top: 1px solid var(--xh-line);
  background: var(--xh-panel-strong);
  backdrop-filter: blur(var(--xh-glass-blur));
  -webkit-backdrop-filter: blur(var(--xh-glass-blur));
  overflow: hidden;
  animation: hall-rise-in 240ms ease-out;
}

@keyframes hall-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hall-rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hall-tabbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xh-line);
  flex-shrink: 0;
}

.hall-back {
  padding: 8px 16px;
  border: 1px solid var(--xh-border);
  border-radius: 999px;
  background: transparent;
  color: var(--xh-gold);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: border-color 160ms ease-out, color 160ms ease-out, background 160ms ease-out;
}

.hall-back:is(:hover, :focus-visible) {
  border-color: var(--xh-border-hot);
  background: rgba(244, 200, 121, 0.08);
  color: var(--xh-gold-bright);
}

.hall-tab {
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--xh-muted);
  font-size: 14px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: color 160ms ease-out, background 160ms ease-out, border-color 160ms ease-out;
}

.hall-tab:is(:hover, :focus-visible) {
  color: var(--xh-gold-bright);
}

.hall-tab.is-active {
  border-color: var(--xh-border);
  background: rgba(244, 200, 121, 0.12);
  color: var(--xh-gold-bright);
}

.hall-frames {
  position: relative;
  flex: 1;
  min-height: 0;
}

.frame-slot {
  position: absolute;
  inset: 0;
}

.frame-slot iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.frame-slot.is-loaded iframe {
  opacity: 1;
}

.frame-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--xh-gold);
  font-family: var(--xh-font-kai);
  font-size: 15px;
  letter-spacing: 3px;
}

.frame-slot.is-loaded .frame-loading {
  display: none;
}

/* ---------- 手机入口（桌面隐藏） ---------- */

.hall-mobile-entries {
  display: none;
}

@media (max-width: 760px) {
  .hall-layer {
    display: none;
  }

  .hall-mobile-entries {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 28px auto 0;
    width: min(320px, calc(100vw - 48px));
  }

  .hall-mobile-entries a {
    padding: 13px 20px;
    border: 1px solid var(--xh-border);
    border-radius: 999px;
    background: var(--xh-panel-strong);
    color: var(--xh-gold-bright);
    font-size: 15px;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: none;
  }

  .hall-tabbar {
    gap: 6px;
    padding: 10px;
    overflow-x: auto;
  }

  .hall-tab,
  .hall-back {
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spot-label { animation: none; }
  .hall-scrim,
  .hall-panel { animation: none; }
  .frame-slot iframe { transition: none; }
}

/* ---------- 游客态：村民专属入口上锁 ----------
   游客能进村民馆与「认识村民」页签；围炉夜话与我的村民证保持村民专属，
   在这里降亮度 + 挂锁标，点击由 script.js 拦成登录框（不加载 iframe）。 */

.hall-guest-note {
  margin: 14px auto 0;
  max-width: 34em;
  padding: 10px 18px;
  border: 1px solid var(--xh-line);
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(var(--xh-glass-blur-soft));
  font-size: 14px;
  line-height: 1.7;
  color: var(--xh-text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.hall-guest-note b {
  color: var(--xh-gold);
  font-weight: 600;
}

.hall-guest-login {
  padding: 2px 12px;
  border: 1px solid var(--xh-border);
  border-radius: 999px;
  background: rgba(244, 200, 121, 0.12);
  color: var(--xh-gold-bright);
  font: inherit;
  cursor: pointer;
}

.hall-guest-login:hover {
  border-color: var(--xh-border-hot);
  background: rgba(244, 200, 121, 0.2);
}

.hall-spot.is-locked .spot-label::after,
.hall-tab.is-locked::after,
.hall-mobile-entries a.is-locked::after {
  content: " 🔒";
  font-size: 0.85em;
}

.hall-tab.is-locked,
.hall-mobile-entries a.is-locked {
  opacity: 0.55;
}

.hall-spot.is-locked .spot-label {
  opacity: 0.6;
}