/* ============================================================
   傩舞.css —— 石邮傩舞数字博物馆 全局样式表（优化版）
   按功能模块组织：变量 → 基础 → 首页 → 神龛 → 详情通用 →
   面具馆 → 历史馆 → 舞蹈馆 → 文创馆 → 互动馆 → AI助手 → 响应式
   ============================================================ */

/* -------------------- 1. 全局变量 -------------------- */
:root {
  --color-wood: #3E2723;
  --color-gold: #FFD700;
  --color-red: #8B0000;
  --color-bronze: #8a603c;
  --color-bg-page: #F5F5DC;
  --font-art: "Ma Shan Zheng", cursive;
  --font-body: "Noto Sans SC", sans-serif;
  --font-serif: "Noto Serif SC", serif;

  /* 面具馆 */
  --f1-color-bg: #0a0a0a;
  --f1-color-card-bg: #141414;
  --f1-color-gold: #D4AF37;
  --f1-color-text: #e0e0e0;
  --f1-color-text-dim: #888;
  --f1-font-title: "Ma Shan Zheng", cursive;

  /* 文创馆 */
  --f4-bg-color: #F4EFE6;
  --f4-text-main: #2C2C2C;
  --f4-text-light: #5D5D5D;
  --f4-accent-red: #8E2323;
  --f4-accent-gold: #D4AF37;
  --f4-shadow: 0 4px 12px rgba(0,0,0,0.08);
  --f4-transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);

  /* 互动馆 */
  --f2-vermilion: #8E2323;
  --f2-gold: #D4AF37;
  --f2-ink: #2C2C2C;
  --f2-wood: #5D4037;
  --f2-shadow: 0 10px 30px rgba(0,0,0,0.15);

  /* 传送门 */
  --color-portal-core: #e0ffff;
  --color-portal-glow: #00bfff;
  --color-portal-dim: #191970;

  /* 神龛 */
  --space-dark: #050202;
  --base-wood-light: #7c4a4a;
  --base-wood-dark: #3e2020;
  --base-border: #a05a2c;
  --fire-light: #ffaa33;
  --lantern-glow: rgba(255,160,60,0.8);
}

/* -------------------- 2. 基础重置 -------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  font-family: var(--font-body);
  background-color: #000;
  color: #333;
  overflow-x: hidden;
}

body.locked {
  overflow: hidden;
  height: 100vh;
}

button { cursor: pointer; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #eee; }
::-webkit-scrollbar-thumb { background: var(--color-wood); border-radius: 4px; }


/* ==================== 3. 首页 & 传送门 ==================== */
#gate-container {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9000; display: flex; justify-content: center; align-items: center;
  perspective: 1500px; background: transparent;
  transition: opacity 2s, z-index 0s 2s; pointer-events: auto;
}

#galaxy-bg {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 1; background: none; opacity: 1; transition: opacity 3s;
}
#galaxy-bg::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(62,39,35,0.4) 0%, #000 90%);
  z-index: 2; pointer-events: none;
}
#galaxy-bg .bg-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
#galaxy-bg .star { z-index: 1; }
#galaxy-bg.active { opacity: 1; }

.star {
  position: absolute; border-radius: 50%; background: #FFD700;
  box-shadow: 0 0 10px #FFD700; animation: twinkle 3s infinite ease-in-out;
  z-index: 2; opacity: 0;
}
@keyframes twinkle {
  0%,100% { opacity:0.2; transform:scale(0.8); }
  50%     { opacity:1;   transform:scale(1.2); }
}

.door-wrapper {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; z-index: 5;
}

.door {
  width: 50%; height: 100%; position: relative;
  background-color: #000 !important; background-image: none !important;
  border: none !important; transform-style: preserve-3d;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.5) !important;
  transition: transform 3.5s cubic-bezier(0.3,1,0.3,1), filter 3s;
  display: flex; align-items: center; z-index: 10;
}
.door::before { display: none !important; }
.door-left {
  transform-origin: left center; border-right: 2px solid #3e1f18; justify-content: flex-end;
  background: url('../../首页/视频/大门.jpg') no-repeat left center / 200% 100% !important;
}
.door-right {
  transform-origin: right center; border-left: 2px solid #3e1f18; justify-content: flex-start;
  background: url('../../首页/视频/大门.jpg') no-repeat right center / 200% 100% !important;
}
.door-open .door-left  { transform: rotateY(-100deg); filter: brightness(0.4); }
.door-open .door-right { transform: rotateY(100deg);  filter: brightness(0.4); }

.door-ring-base {
  width: 140px; height: 140px; margin: 0 40px; z-index: 5;
  background: rgba(62,39,35,0.6) !important; border: 2px solid rgba(212,175,55,0.8) !important;
  border-radius: 50%; position: relative; cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 2px 5px rgba(255,255,255,0.1);
  transition: transform 0.2s; display: flex; justify-content: center;
}
.door-ring-base::after {
  content:"◈"; color:#3e2723; font-size:60px;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-60%);
  text-shadow:0 1px 1px rgba(255,255,255,0.1);
}
.door-ring-base:hover { transform: scale(1.05); filter: brightness(1.2); }

.door-ring-handle {
  width: 100px; height: 100px; border: 10px solid #8a603c;
  border-radius: 50%; position: absolute; bottom: -50px; transform-origin: top center;
  background: linear-gradient(145deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.knocking { animation: knock-single 0.5s ease-out; }
@keyframes knock-single {
  0%  { transform:rotateX(0deg); }
  20% { transform:rotateX(-50deg); }
  40% { transform:rotateX(0deg); }
  55% { transform:rotateX(-30deg); }
  70% { transform:rotateX(0deg); }
  100%{ transform:rotateX(0deg); }
}

/* 传送门特效 */
#portal-fx {
  position: absolute; width: 0; height: 0; top: 50%; left: 50%;
  transform: translate(-50%,-50%); z-index: 2; opacity: 0;
  pointer-events: none; display: flex; justify-content: center; align-items: center;
  transition: opacity 2s ease-in-out;
}
#portal-fx::before {
  content: ''; position: absolute; width: 0; height: 2px;
  background: linear-gradient(90deg,transparent 0%,var(--color-portal-dim) 20%,var(--color-portal-glow) 50%,var(--color-portal-dim) 80%,transparent 100%);
  box-shadow: 0 0 20px var(--color-portal-glow); border-radius: 50%;
  opacity: 0; transition: all 2s cubic-bezier(0.22,1,0.36,1);
}
#portal-fx::after {
  content: ''; position: absolute; width:0; height:0;
  background: radial-gradient(ellipse at center, rgba(0,191,255,0) 0%,rgba(0,191,255,0.1) 30%,rgba(0,191,255,0.3) 50%,rgba(25,25,112,0.4) 70%,transparent 80%);
  opacity: 0; transform: scale(0.5); transition: all 2.5s ease-out; filter: blur(10px);
}
#portal-fx.active { width: 100vw; height: 100vh; opacity: 1; }
#portal-fx.active::before {
  width: 120%; height: 300px; opacity: 0.6;
  background: linear-gradient(90deg,transparent 0%,rgba(0,191,255,0.2) 50%,transparent 100%);
  box-shadow: 0 0 60px rgba(0,191,255,0.3); animation: riftPulse 6s infinite ease-in-out;
}
#portal-fx.active::after {
  width: 800px; height: 600px; opacity: 0.8; transform: scale(1.2);
  animation: nebulaFlow 10s infinite alternate;
}

@keyframes riftPulse {
  0%,100% { height:200px; opacity:0.4; filter:blur(20px); }
  50%     { height:350px; opacity:0.7; filter:blur(15px); }
}
@keyframes nebulaFlow {
  0%   { transform:scale(1) rotate(0deg); opacity:0.5; }
  100% { transform:scale(1.1) rotate(5deg); opacity:0.8; }
}

#start-text-btn {
  position: absolute; z-index: 10; font-family: var(--font-art);
  font-size: 110px; color: #fff;
  text-shadow: 0 0 10px #fff,0 0 20px #e0ffff,0 0 40px var(--color-portal-glow),0 0 80px var(--color-portal-glow);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 1s, transform 0.3s; background: transparent; border: none;
  animation: textFloatBright 3s ease-in-out infinite alternate;
}
#start-text-btn:hover {
  transform: scale(1.15);
  text-shadow: 0 0 15px #fff,0 0 30px #fff,0 0 60px var(--color-portal-glow),0 0 100px var(--color-portal-core);
  letter-spacing: 10px;
}
@keyframes textFloatBright {
  from { transform:translateY(0);   filter:brightness(1); }
  to   { transform:translateY(-15px); filter:brightness(1.3); }
}


/* ==================== 4. 神龛页面 ==================== */
body {
  margin: 0; padding: 0; background-color: #000;
  display: flex; justify-content: center; align-items: center; min-height: 100vh;
}

.shrine-container {
  position: relative; width: 100%; max-width: 1200px; display: inline-block;
}
.bg-base {
  width: 100%; display: block; pointer-events: none;
}
.reveal-visual {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('../../点亮神龛/神龛.jpg');
  background-size: 100% 100%; opacity: 0; transition: opacity 0.8s ease;
  pointer-events: none; z-index: 5;
}
.reveal-visual.active { opacity: 1; }

/* 每个区域的径向镂空蒙版 */
#vis-masks       { -webkit-mask-image: radial-gradient(ellipse at 50% 32.5%, black 0%,black 8%, transparent 20%); }
#vis-plaque      { -webkit-mask-image: radial-gradient(ellipse at 49% 14%, black 0%,black 10%, transparent 25%); }
#vis-statue      { -webkit-mask-image: radial-gradient(ellipse at 48.5% 55%, black 0%,black 10%, transparent 22%); }
#vis-burner      { -webkit-mask-image: radial-gradient(ellipse at 50% 70%, black 0%,black 4%, transparent 12%); }
#vis-sides-left  { -webkit-mask-image: radial-gradient(ellipse at 15.5% 55.5%, black 0%,black 10%, transparent 25%); }
#vis-sides-right { -webkit-mask-image: radial-gradient(ellipse at 82.5% 57.5%, black 0%,black 10%, transparent 25%); }

/* 点击热区 */
.click-spot { position: absolute; pointer-events: none; z-index: 20; }
.click-spot.active { pointer-events: auto; cursor: pointer; }

#link-masks       { top:25%; left:35%; width:30%; height:15%; }
#link-plaque      { top:5%;  left:35%; width:28%; height:18%; }
#link-statue      { top:40%; left:41%; width:15%; height:30%; }
#link-burner      { top:65%; left:45%; width:10%; height:10%; }
#link-sides-left  { top:38%; left:3%;  width:25%; height:35%; }
#link-sides-right { top:40%; right:5%; width:25%; height:35%; }

/* 蜡烛 */
.candle {
  position: absolute; width: 3%; height: 22%; bottom: 4%;
  transform: translateX(-50%); cursor: pointer; z-index: 30;
}
#candle-1 { left:14.5%; } #candle-2 { left:31.6%; } #candle-3 { left:48.6%; }
#candle-4 { left:65.6%; } #candle-5 { left:82.7%; }

.flame {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 1.5vw; height: 3vw; max-width: 18px; max-height: 36px;
  background: radial-gradient(ellipse at bottom, #fffddd 0%,#ffc000 40%,#ff3300 80%,transparent 100%);
  border-radius: 50% 50% 30% 30%;
  box-shadow: 0 -5px 20px 5px rgba(255,100,0,0.7);
  filter: blur(1px); opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none; z-index: 10;
}
.candle.lit .flame { opacity: 1; animation: flicker 0.12s infinite alternate; }
@keyframes flicker {
  0%   { transform:translateX(-50%) scale(1) rotate(-1deg); opacity:0.9; }
  100% { transform:translateX(-50%) scale(1.05) rotate(1deg); opacity:1; }
}

/* ==================== 蜡烛文字书法与书写特效 ==================== */
.candle-text {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFD700; /* 保持你偏爱的华丽金色 */
  font-size: 50px;

  /* 1. 更换字体：优先使用行书感与动感极强的 Zhi Mang Xing（智莽行书） */
  font-family: 'Zhi Mang Xing', 'Ma Shan Zheng', 'KaiTi', serif;

  /* 2. 核心隐藏：初始状态下将文字裁剪为 0，完全不可见，准备做一笔一画出来的特效 */
  white-space: nowrap;
  display: inline-block;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

  /* 基础立体阴影与古风烘托 */
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6), 2px 2px 4px #000;
  pointer-events: none;
  transition: text-shadow 0.5s ease;
}

/* 3. 当蜡烛被点击激活，JS 为其注入 .lit 类时，立刻触发 2 秒的书写动画 */
.candle.lit .candle-text {
  /* cubic-bezier 贝塞尔曲线让运笔产生“快慢顿挫”的顿笔节奏感，严格限制在 2 秒内 */
  animation: writeTextStroke 2s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}

/* 4. 模拟毛笔运笔动画：从左到右、顺着字宽一笔一划切入展露 */
@keyframes writeTextStroke {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  30% {
    /* 约 0.6 秒：第一个字（如“面”）基本挥毫完毕 */
    clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%);
  }
  65% {
    /* 约 1.3 秒：第二个字（如“具”）行书完毕 */
    clip-path: polygon(0 0, 70% 0, 70% 100%, 0 100%);
  }
  100% {
    /* 2.0 秒：三个字全套一气呵成展露，并瞬间激发一层神龛的金色外发光 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.95), 2px 2px 4px #000;
  }
}

/* ==================== 5. 详情页通用组件 ==================== */
.main-wrapper {
  position: relative; z-index: 50; display: none;
  background: var(--color-bg-page); min-height: 100vh; width: 100%; color: #444;
  background-image: url('https://www.transparenttextures.com/patterns/aged-paper.png');
}
.main-wrapper.active { display: block; }

.page-content {
  max-width: 1100px; margin: 0 auto; padding: 80px 30px 40px 30px;
  display: none; animation: fadeIn 0.8s ease; min-height: 100vh; flex-direction: column;
}
.page-content.active { display: flex; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

.page-title {
  text-align: center; font-family: var(--font-art); font-size: 56px;
  color: var(--color-red); margin-bottom: 50px;
  border-bottom: 4px double #8B4513; padding-bottom: 20px;
}
.section-box {
  background: rgba(255,255,255,0.7); padding: 40px; margin-bottom: 40px;
  border-radius: 8px; border: 1px solid #d7c7a5; box-shadow: 8px 8px 0px rgba(62,39,35,0.1);
}

h3 { font-size:28px; color:var(--color-wood); margin-bottom:20px; border-left:6px solid var(--color-red); padding-left:15px; font-family:var(--font-art); }
p  { line-height:2; font-size:18px; margin-bottom:15px; text-align:justify; color:#2c1e1a; }

.footer-nav {
  position: relative; width: 100%; background: transparent;
  padding: 80px 0 120px 0; text-align: center; margin-top: auto;
  border-top: 2px dashed #8B4513;
}
#page-mask .footer-nav { border-top-color: rgba(212,175,55,0.3); }

.back-btn {
  background: var(--color-wood); color:#FFD700; border:2px solid var(--color-gold);
  padding:15px 60px; font-size:24px; font-family:var(--font-art); border-radius:50px;
  transition:0.3s; cursor:pointer; box-shadow:0 5px 15px rgba(62,39,35,0.4); display:inline-block;
}
.back-btn:hover { background: var(--color-red); transform: scale(1.05); }


/* ==================== 6. 面具馆 ==================== */
#page-mask {
  background-color: var(--f1-color-bg);
  background-image: radial-gradient(circle at 50% 0%, #2a1b15 0%, #000 60%);
  color: var(--f1-color-text); max-width: 100%; padding: 0; display: none;
}
#page-mask.active { display: block; }
#page-mask header {
  text-align: center; padding: 80px 20px 40px;
  border-bottom: 1px solid rgba(212,175,55,0.2); position: relative;
}
#page-mask h1 {
  font-family: var(--f1-font-title); font-size: 64px;
  background: linear-gradient(to bottom, #fffdb8, var(--f1-color-gold));
  -webkit-background-clip: text; color: transparent; margin-bottom: 20px;
  text-shadow: 0 5px 15px rgba(0,0,0,0.8);
}
#page-mask .subtitle {
  font-size: 18px; color: var(--f1-color-text-dim); letter-spacing: 4px;
  max-width: 600px; margin: 0 auto; line-height: 1.6; text-align: center;
}

.color-code-section {
  display: flex; justify-content: center; gap: 30px; margin: 40px auto;
  flex-wrap: wrap; max-width: 1000px; padding: 0 20px;
}
.color-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05); padding: 10px 20px;
  border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
  color: #ccc; font-size: 14px;
}
.dot { width: 12px; height: 12px; border-radius: 50%; }

.filter-nav { display: flex; justify-content: center; gap: 20px; margin: 40px 0; flex-wrap: wrap; }
.filter-btn {
  background: transparent; border: 1px solid var(--f1-color-gold);
  color: var(--f1-color-gold); padding: 10px 30px; font-family: var(--f1-font-title);
  font-size: 20px; cursor: pointer; transition: 0.3s; border-radius: 4px;
}
.filter-btn:hover, .filter-btn.active { background: var(--f1-color-gold); color: #000; box-shadow: 0 0 15px rgba(212,175,55,0.4); }

.gallery-container {
  max-width: 1200px; margin: 0 auto; padding: 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;
}

.mask-card {
  background: var(--f1-color-card-bg); border: 1px solid #333;
  border-radius: 8px; overflow: hidden; position: relative;
  transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
  opacity: 0; transform: translateY(20px); animation: fadeInCard 0.6s forwards;
  height: 400px; display: block; box-shadow: none;
}
@keyframes fadeInCard { to { opacity:1; transform:translateY(0); } }
.mask-card:hover { border-color: var(--f1-color-gold); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }

.img-wrapper {
  width: 100%; height: 100%; background: radial-gradient(circle, #2a2a2a, #000);
  display: flex; align-items: center; justify-content: center;
  position: absolute; top:0; left:0; z-index:1;
}
.mask-img-f1 {
  max-width: 85%; max-height: 85%;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.mask-card:hover .mask-img-f1 { transform: scale(1.15) translateY(-10px); filter: blur(2px) brightness(0.7); }

.role-tag {
  position: absolute; top:15px; right:15px; z-index:5;
  padding:4px 12px; font-size:12px; border-radius:4px; color:#fff;
  font-weight:bold; letter-spacing:1px; box-shadow:0 2px 5px rgba(0,0,0,0.5); pointer-events:none;
}
.tag-fierce { background: linear-gradient(45deg, #8B0000, #ff4d4d); }
.tag-bless  { background: linear-gradient(45deg, #B8860B, #FFD700); }
.tag-comic  { background: linear-gradient(45deg, #2E8B57, #90EE90); }

.card-content {
  position: absolute; top:0; left:0; width:100%; height:100%; z-index:10;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:30px; text-align:center; opacity:0; transform:translateY(20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
  background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
}
.mask-card:hover .card-content { opacity:1; transform:translateY(0) scale(1); }

.mask-name {
  font-family: var(--f1-font-title); font-size:32px; color:var(--f1-color-gold);
  margin-bottom:15px; border-left:none; padding-left:0; text-shadow:0 2px 10px rgba(0,0,0,0.8); line-height:1.2;
}
.mask-desc { font-size:14px; color:#fff; line-height:1.8; margin-bottom:20px; text-shadow:0 1px 3px rgba(0,0,0,1); }
.features { margin-top:0; padding-top:15px; border-top:1px solid rgba(212,175,55,0.5); font-size:13px; color:var(--f1-color-gold); font-weight:bold; }
#page-mask .footer-nav-dark { text-align:center; padding:60px 0; margin-top:40px; }


/* ==================== 7. 历史馆 ==================== */
.chapter-title {
  font-family: var(--font-art); font-size: 36px; color: var(--color-wood);
  margin-bottom: 30px; display: flex; align-items: center;
}
.chapter-title::before {
  content: ''; display: inline-block; width: 8px; height: 36px;
  background: var(--color-red); margin-right: 15px; border-radius: 2px;
}

.timeline-f1 { position: relative; padding-left: 40px; margin: 40px 0; }
.timeline-f1::before {
  content: ''; position: absolute; left:13px; top:0; bottom:0; width:4px;
  background: rgba(62,39,35,0.2); border-radius:2px;
}
.time-card {
  position: relative; margin-bottom: 50px; background: #fff; padding: 25px;
  border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border: 1px solid rgba(184,134,11,0.2); transition: transform 0.3s;
}
.time-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.time-card::before {
  content: ''; position: absolute; left:-33px; top:25px; width:18px; height:18px;
  background: var(--color-red); border:4px solid var(--color-bg-page); border-radius:50%;
  box-shadow: 0 0 0 2px var(--color-red);
}
.period { font-family: var(--font-art); font-size:24px; color:#D4AF37; margin-bottom:10px; display:block; }
.event-title { font-weight:bold; font-size:18px; margin-bottom:10px; color:#333; }

.grid-box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.grid-item { border:1px solid rgba(62,39,35,0.1); padding:15px; background:rgba(255,255,255,0.3); border-radius:4px; }

.img-box { width:100%; height:300px; background:#ddd; margin:20px 0; overflow:hidden; border-radius:4px; position:relative; }
.img-placeholder { width:100%; height:100%; object-fit:cover; filter:sepia(0.3) contrast(0.9); transition:transform 0.5s; }
.img-box:hover .img-placeholder { transform: scale(1.05); }
.caption { font-size:14px; color:#888; text-align:center; margin-top:-15px; margin-bottom:30px; font-style:italic; }

.intro-box {
  background: rgba(255,255,255,0.6); padding:40px; border-left:5px solid var(--color-red);
  border-radius:4px; margin-bottom:60px; box-shadow:5px 5px 15px rgba(62,39,35,0.05);
  font-family:var(--font-serif); font-size:18px; text-align:justify;
}
.quote { display:block; margin-top:20px; font-size:16px; color:#666; text-align:right; font-style:italic; }


/* ==================== 8. 舞蹈馆 ==================== */
.nuo-table { width:100%; border-collapse:collapse; margin-top:20px; background:rgba(255,255,255,0.6); border:1px solid #dcd6cc; }
.nuo-table th, .nuo-table td { padding:20px; border-bottom:1px solid rgba(62,39,35,0.1); vertical-align:top; }
.nuo-table th { background-color:rgba(62,39,35,0.05); width:20%; font-weight:bold; color:var(--color-red); border-right:1px solid rgba(62,39,35,0.1); font-family:var(--font-art); font-size:22px; }

.step-card-f2 { background:rgba(255,255,255,0.6); padding:30px; border:1px solid rgba(139,69,19,0.2); margin-bottom:30px; border-left:4px solid var(--color-red); box-shadow:0 4px 10px rgba(0,0,0,0.03); border-radius:4px; }
.highlight-box-f2 { background-color:rgba(143,58,58,0.08); padding:20px; border-radius:4px; margin:20px 0; font-style:italic; color:#555; border-left:2px solid var(--color-red); }


/* ==================== 9. 文创馆 ==================== */
.shop-hero {
  height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden; margin-bottom: 40px;
}
.shop-hero::before {
  content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(circle at center, transparent 0%, var(--f4-bg-color) 70%),
              linear-gradient(45deg, #e6dace 0%, #f4efe6 100%);
  z-index: -2;
}
.hero-circle {
  width: 400px; height: 400px; border: 1px solid rgba(142,35,35,0.1);
  border-radius: 50%; position: absolute; animation: rotate 60s linear infinite; z-index: -1;
}
@keyframes rotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.shop-hero h1 { font-size:3.5rem; margin-bottom:20px; color:var(--f4-text-main); text-shadow:2px 2px 0px rgba(0,0,0,0.1); }
.shop-hero p  { font-size:1.2rem; color:var(--f4-text-light); margin-bottom:40px; letter-spacing:5px; }

.shop-btn {
  display: inline-block; padding:12px 36px; border:1px solid var(--f4-text-main);
  background: transparent; color:var(--f4-text-main); font-size:1rem;
  cursor: pointer; transition: var(--f4-transition); position: relative; overflow: hidden;
}
.shop-btn:hover { background:var(--f4-accent-red); color:#fff; border-color:var(--f4-accent-red); }

.shop-showcase { padding: 2rem 5%; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { font-size:2.5rem; margin-bottom:1rem; position:relative; display:inline-block; }
.section-header h2::before, .section-header h2::after { content:'—'; color:var(--f4-accent-red); margin:0 15px; font-weight:300; }

.shop-filters { display: flex; justify-content: center; gap: 20px; margin-bottom: 3rem; }
.shop-filter-btn { padding:8px 24px; border:none; background:#E8E2D2; cursor:pointer; font-family:'Noto Serif SC',serif; transition:var(--f4-transition); border-radius:20px; }
.shop-filter-btn.active, .shop-filter-btn:hover { background:var(--f4-accent-red); color:#fff; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:2rem; padding-bottom:40px; }
.product-card { background:#fff; padding:15px; border:1px solid rgba(0,0,0,0.03); transition:var(--f4-transition); cursor:pointer; position:relative; }
.product-card:hover { transform:translateY(-10px); box-shadow:var(--f4-shadow); border-color:var(--f4-accent-gold); }
.card-img { width:100%; height:250px; background-color:#f0f0f0; margin-bottom:15px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#ccc; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.product-card:hover .card-img img { transform:scale(1.05); }
.card-info h3 { font-size:1.2rem; margin-bottom:5px; color:var(--f4-text-main); }
.card-info .category { font-size:0.8rem; color:var(--f4-accent-red); border:1px solid var(--f4-accent-red); padding:1px 6px; display:inline-block; margin-bottom:10px; border-radius:2px; }
.card-info .price { float:right; font-weight:bold; color:var(--f4-text-main); }

.shop-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; z-index:10000; opacity:0; visibility:hidden; transition:var(--f4-transition); }
.shop-modal.open { opacity:1; visibility:visible; }
.shop-modal-content { background:var(--f4-bg-color); width:80%; max-width:900px; display:flex; box-shadow:0 10px 30px rgba(0,0,0,0.3); position:relative; overflow:hidden; }
.shop-modal-img { flex:1; background:#ddd; min-height:400px; }
.shop-modal-img img { width:100%; height:100%; object-fit:cover; }
.shop-modal-details { flex:1; padding:3rem; display:flex; flex-direction:column; justify-content:center; position:relative; }
.shop-modal-details::before { content:'石邮傩舞'; position:absolute; right:20px; top:20px; writing-mode:vertical-rl; color:rgba(0,0,0,0.05); font-size:3rem; font-weight:bold; pointer-events:none; }
.shop-close-btn { position:absolute; top:15px; right:20px; font-size:2rem; cursor:pointer; color:var(--f4-text-light); z-index:10; }
.shop-close-btn:hover { color:var(--f4-accent-red); }


/* ==================== 10. 互动馆 ==================== */
#page-interact {
  position: relative; background-color: var(--f4-bg-color);
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  overflow: hidden;
}
#page-interact.active { display: block !important; opacity: 1 !important; }

.bg-ink { position:absolute; top:-10%; right:-10%; width:600px; height:600px; background:radial-gradient(circle, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 70%); border-radius:50%; z-index:0; filter:blur(50px); pointer-events:none; }
.bg-cloud { position:absolute; bottom:0; left:0; width:100%; height:200px; background:url('https://img.alicdn.com/tfs/TB1..5.bQT2gK0jSZFvXXXnFXXa-200-200.png') repeat-x bottom; opacity:0.3; z-index:0; animation:cloudMove 60s linear infinite; pointer-events:none; }
@keyframes cloudMove { from{background-position:0 0;} to{background-position:1000px 0;} }

.interact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:2rem; position:relative; z-index:5; padding-bottom:40px; }
.interact-card { background:rgba(255,255,255,0.6); backdrop-filter:blur(10px); border:1px solid rgba(212,175,55,0.3); border-radius:12px; padding:2rem; box-shadow:var(--f2-shadow); transition:transform 0.3s ease; position:relative; overflow:hidden; }
.interact-card:hover { transform:translateY(-5px); border-color:var(--f2-gold); }
.interact-card-title { font-family:'Ma Shan Zheng',cursive; font-size:2rem; color:var(--f2-vermilion); margin-bottom:1.5rem; text-align:center; border-bottom:1px dashed #ccc; padding-bottom:10px; }

.drum-container { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.drum { width:200px; height:200px; background:radial-gradient(circle, #5D4037 40%, #3E2723 100%); border-radius:50%; border:8px solid #D4AF37; position:relative; box-shadow:inset 0 0 20px rgba(0,0,0,0.5),0 10px 20px rgba(0,0,0,0.3); transition:transform 0.1s; display:flex; justify-content:center; align-items:center; }
.drum::before { content:'傩'; font-family:'Ma Shan Zheng',cursive; font-size:5rem; color:rgba(255,255,255,0.2); pointer-events:none; }
.drum.active { transform:scale(0.9); transition:transform 0.1s; }
.ripple { position:absolute; border-radius:50%; border:2px solid var(--f2-gold); width:100%; height:100%; opacity:0; pointer-events:none; }
.drum.active .ripple { animation:rippleEffect 0.6s linear; }
@keyframes rippleEffect { 0%{transform:scale(1); opacity:0.8; border-width:5px;} 100%{transform:scale(2); opacity:0; border-width:0px;} }
.drum-text { margin-top:1.5rem; font-size:0.9rem; color:#888; text-align:center; }

.lot-container { text-align:center; position:relative; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; }
.lot-box { width:100px; height:160px; background:linear-gradient(to right, #5D4037, #795548, #5D4037); margin:0 auto; border-radius:4px; position:relative; display:flex; justify-content:center; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,0.3); }
.lot-stick { width:10px; height:140px; background:#E0C38C; position:absolute; bottom:10px; transition:transform 0.3s; border-radius:2px; z-index:1; }
.lot-box:hover .lot-stick { transform:translateY(-20px); }
.lot-box.shaking { animation: shake 0.5s infinite; }
@keyframes shake {
  0%{transform:rotate(0deg);} 25%{transform:rotate(5deg);} 50%{transform:rotate(0deg);} 75%{transform:rotate(-5deg);} 100%{transform:rotate(0deg);}
}
.result-text { margin-top:20px; font-weight:bold; color:var(--f2-vermilion); font-size:1.2rem; opacity:0; transition:opacity 0.5s; font-family:'Ma Shan Zheng',cursive; }
.btn-style { background:var(--f2-vermilion); color:white; border:none; padding:8px 20px; border-radius:20px; cursor:pointer; font-family:'Noto Serif SC',serif; margin-top:10px; transition:background 0.3s; }
.btn-style:hover { background:#681818; }

.wish-section { grid-column:1 / -1; background:url('https://www.transparenttextures.com/patterns/wood-pattern.png'), #5D4037; color:#F4EFE6; min-height:400px; position:relative; }
.wish-tree { width:100%; height:300px; border-bottom:1px solid rgba(255,255,255,0.1); position:relative; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:center; padding-top:20px; }
.wish-tag { background:var(--f2-vermilion); color:#FFD700; padding:10px 4px; width:40px; min-height:120px; writing-mode:vertical-rl; font-family:'Ma Shan Zheng',cursive; margin:0 15px; border-radius:4px; box-shadow:2px 2px 5px rgba(0,0,0,0.5); position:relative; transform-origin:top center; animation:swing 3s ease-in-out infinite alternate; cursor:default; }
.wish-tag::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:2px; height:10px; background:#FFD700; }
@keyframes swing { from{transform:rotate(-3deg);} to{transform:rotate(3deg);} }
.wish-input-area { display:flex; justify-content:center; align-items:center; padding:20px; gap:10px; }
.wish-input { padding:10px; border:none; border-radius:4px; width:300px; background:rgba(255,255,255,0.9); font-family:'Noto Serif SC',serif; }

/* 互动弹窗 */
.interact-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; z-index:10000; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.interact-modal.show { display:flex !important; opacity:1 !important; visibility:visible !important; pointer-events: all; }
.interact-modal-content { background:var(--f4-bg-color); padding:40px; border:2px solid var(--f2-vermilion); text-align:center; position:relative; max-width:400px; }
.modal-corner { position:absolute; width:20px; height:20px; border:2px solid var(--f2-gold); }
.tl{top:5px; left:5px; border-right:none; border-bottom:none;}
.tr{top:5px; right:5px; border-left:none; border-bottom:none;}
.bl{bottom:5px; left:5px; border-right:none; border-top:none;}
.br{bottom:5px; right:5px; border-left:none; border-top:none;}
.close-interact-modal { margin-top:20px; background:transparent; border:1px solid var(--f2-ink); padding:5px 15px; cursor:pointer; }


/* ==================== 11. AI 助手（优化并排等大布局） ==================== */
/* 首页锁定时（大门开启阶段），容器保持基础尺寸，但等比缩小避免阻挡视线 */
body.locked #ai-container {
  position: fixed; z-index: 8999;
  width: 380px; height: 500px; /* 调整为与聊天窗口完全等大 */
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.55);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; cursor: grab;
}

/* 其他页面非锁定时，作为母体固定在右下角，为左侧对话框做并排基准 */
body:not(.locked) #ai-container {
  position: fixed; z-index: 8999;
  width: 380px; height: 500px; /* 调整为与聊天窗口完全等大 */
  top: auto; left: auto; bottom: 20px; right: 20px;
  transform: scale(1); display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: grab;
}
#ai-container:active { cursor: grabbing; }
#ai-container.intro-mode { transform: translate(-50%, -50%) scale(1.1); pointer-events: none; }
#ai-container.corner-mode { transform: scale(1); bottom: 20px; right: 20px; top: auto; left: auto; }

/* AI 导游形象外壳：完全填满 380x500 的容器，使其与聊天框大小完美吻合 */
#ai-avatar-wrapper {
  width: 100%; height: 100%;
  background-image: url('../../媒体/页面公共文件/ai闭嘴.png');
  background-size: contain; background-position: center bottom;
  background-repeat: no-repeat; cursor: grab;
  transition: transform 0.3s cubic-bezier(0.18,0.89,0.32,1.28);
  position: relative; pointer-events: auto;
}
#ai-avatar-wrapper.talking { animation: warrior-talking 1.5s steps(1) infinite; }
@keyframes warrior-talking {
  /* 0% ~ 15%: 初始闭嘴静止状态 */
  0%, 10% {
    background-image: url('../../媒体/页面公共文件/ai闭嘴.png');
  }

  /* 20% ~ 35%: 第一次张嘴说话 */
  20%, 35% {
    background-image: url('../../媒体/页面公共文件/ai张嘴.png');
  }

  /* 45% ~ 60%: 闭上嘴的同时，把手挥起来！(进入挥手帧) */
  45%, 60% {
    background-image: url('../../媒体/页面公共文件/ai挥手.png');
  }

  /* 70% ~ 85%: 放下手，继续张嘴巴高频说话 */
  70%, 85% {
    background-image: url('../../媒体/页面公共文件/ai张嘴.png');
  }

  /* 90% ~ 100%: 说话间歇，回归闭嘴状态，等待下一轮循环 */
  90%, 100% {
    background-image: url('../../媒体/页面公共文件/ai闭嘴.png');
  }
}

/* 提示文本气泡位置微调 */
#ai-bubble {
  position: absolute; background: rgba(0,0,0,0.9); color: #fff;
  padding: 15px 20px; border-radius: 12px; width: 320px;
  font-size: 18px; line-height: 1.6; opacity: 0; transition: opacity 0.5s;
  pointer-events: none; border: 2px solid var(--color-gold);
  bottom: 105%; left: 50%; transform: translateX(-50%);
  white-space: normal; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  font-family: var(--font-body);
}
#ai-bubble.show { opacity: 1; }
#ai-bubble::after {
  content: ''; position: absolute; bottom: -10px; left: 50%; margin-left: -10px;
  border-width: 10px 10px 0; border-style: solid;
  border-color: var(--color-gold) transparent transparent transparent;
}

/* 对话窗口核心重构 —— 相对母体向左侧撑开，达成 AI 在右、窗口在左的完美并排布局 */
#chat-window {
  position: absolute;
  bottom: 0;
  right: calc(100% + 20px); /* 关键核心：将对话框向左偏移出整整一个容器宽度，加 20px 间距 */
  width: 380px; height: 500px; /* 维持原有尺寸大小 */
  background: #fff; border: 4px solid var(--color-wood); border-radius: 16px;
  display: none; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  overflow: hidden; font-family: var(--font-body);
  transform-origin: bottom right; /* 改变缩放动画原点为右下角，更加连贯 */
  animation: popUp 0.3s cubic-bezier(0.18,0.89,0.32,1.28);
}
#chat-window.active { display: flex; pointer-events: auto; }

.chat-header {
  background: var(--color-wood); color: #FFD700; padding: 15px;
  font-size: 20px; font-weight: bold; display: flex;
  justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--color-gold);
}
.chat-history {
  flex: 1; padding: 20px; overflow-y: auto; background: #fff8f0;
  display: flex; flex-direction: column; gap: 15px;
}
.msg-row { display: flex; width: 100%; }
.msg-row.ai { justify-content: flex-start; }
.msg-row.user { justify-content: flex-end; }
.msg-bubble {
  max-width: 85%; padding: 12px 16px; border-radius: 12px;
  line-height: 1.6; font-size: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ai .msg-bubble { background: #fff; border: 1px solid #ddd; color: #333; border-bottom-left-radius: 2px; }
.user .msg-bubble { background: var(--color-red); color: #fff; border-bottom-right-radius: 2px; }

.chat-input-area { padding: 15px; background: #eee; display: flex; gap: 10px; }
.chat-input-area input { flex: 1; padding: 10px; font-size: 16px; border-radius: 6px; border: 1px solid #ccc; outline: none; }
.chat-input-area button { padding: 10px 20px; background: var(--color-wood); color: #fff; border: none; border-radius: 6px; font-weight: bold; font-size: 16px; }


/* ==================== 12. 响应式设计 ==================== */
@media (max-width: 768px) {
  #start-text-btn { font-size:60px; text-shadow:0 0 8px #fff,0 0 15px #e0ffff,0 0 30px var(--color-portal-glow),0 0 60px var(--color-portal-glow); }
  #start-text-btn:hover { font-size:65px; letter-spacing:5px; }
  .door-ring-base { width:100px; height:100px; margin:0 20px; }
  .door-ring-base::after { font-size:40px; }
  .door-ring-handle { width:70px; height:70px; border:7px solid #8a603c; bottom:-35px; }
  .page-title { font-size:36px; margin-bottom:30px; padding-bottom:15px; }
  .section-box { padding:20px; margin-bottom:20px; }
  h3 { font-size:22px; margin-bottom:15px; }
  p { font-size:16px; line-height:1.8; }
  .page-content { padding:40px 20px 30px 20px; }
  #page-mask h1 { font-size:48px; }
  .gallery-container { grid-template-columns:1fr; gap:20px; padding:10px; }
  .mask-card { height:350px; }
  .mask-name { font-size:24px; }
  .shop-hero { height:40vh; }
  .shop-hero h1 { font-size:2.5rem; }
  .shop-hero p { font-size:1rem; letter-spacing:2px; }
  .product-grid { grid-template-columns:1fr; gap:1.5rem; }
  .shop-modal-content { width:95%; flex-direction:column; }
  .shop-modal-details { padding:2rem; }
  .interact-grid { grid-template-columns:1fr; gap:1.5rem; }
  .wish-input { width:200px; }
  .grid-box { grid-template-columns:1fr; gap:15px; }
  .chapter-title { font-size:28px; }
  .timeline-f1 { padding-left:30px; }
  .time-card { padding:20px; margin-bottom:30px; }
  .time-card::before { left:-28px; width:14px; height:14px; }
  .period { font-size:20px; }

  /* 移动端并排防止溢出处理 */
  body:not(.locked) #ai-container,
  body.locked #ai-container { width: 140px; height: 180px; transform: none; bottom: 10px; right: 10px; }
  #chat-window { width: 220px; height: 320px; right: calc(100% + 10px); }
  #ai-bubble { width: 180px; font-size: 14px; }
  .nuo-table th, .nuo-table td { padding:15px; }
  .nuo-table th { font-size:18px; }
  .step-card-f2 { padding:20px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #start-text-btn { font-size:80px; }
  .gallery-container { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .interact-grid { grid-template-columns:repeat(2,1fr); }
  .grid-box { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  html { font-size:14px; }
  .page-title { font-size:28px; }
  h3 { font-size:20px; }
  p { font-size:15px; }
  #start-text-btn { font-size:48px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  #start-text-btn { font-size:50px; }
  .door-ring-base { width:80px; height:80px; }
  .door-ring-handle { width:50px; height:50px; bottom:-25px; }
}

/* 语音监听提示状态 */
#voice-indicator {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    animation: pulse 1.5s infinite;
    pointer-events: none;
    z-index: 100;
}

@keyframes pulse {
    0% { opacity: 0.7; transform: translateX(-50%) scale(0.95); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    100% { opacity: 0.7; transform: translateX(-50%) scale(0.95); }
}