/* ============================================
   天坛祈年殿 - 外部样式表
   文件名: css/style.css
   ============================================ */

/* CSS变量定义 */
/* 全局颜色变量 - 适配图一红金古风（核心修改） */
:root {
    /* 红墙主色（匹配图一背景） */
    --red-wall-1: #8B1A1A;
    --red-wall-2: #A52A2A;
    --red-wall-3: #CD5C5C;
    --red-wall-4: #E67E22;
    
    /* 金色装饰（匹配图一金饰） */
    --gold-1: #F5DEB3;
    --gold-2: #F9DC5C;
    --gold-3: #F1C40F;
    --gold-4: #D4AC0D;
    --gold-light: #F9DC5C; /* 兼容原有变量 */
    
    /* 柱子配色（适配红金） */
    --pillar-red-1: #7B241C;
    --pillar-red-2: #922B21;
    --pillar-red-3: #C0392B;
    
    /* 台基/石头色（适配红金） */
    --stone-1: #8B1A1A;
    --stone-2: #A52A2A;
    
    /* 屋顶色（替换原蓝色为红金） */
    --roof-red-1: #7B241C;
    --roof-red-2: #922B21;
    --roof-red-3: #C0392B;
    
    /* 文字色（适配红金背景） */
    --text-gold: #F9DC5C;
    --text-red: #E74C3C;
    --text-light: #F8F9FA;
    --paper-yellow: #F5DEB3; /* 兼容原有变量 */
    --wall-red-dark: #8B1A1A; /* 兼容原有变量 */
    --wall-red: #A52A2A; /* 兼容原有变量 */
    
    /* 废弃原有蓝天变量，替换为红金 */
    --sky-1: #8B1A1A;
    --sky-2: #A52A2A;
    --sky-3: #CD5C5C;
    --roof-blue-1: #7B241C;
    --roof-blue-2: #922B21;
    --roof-blue-3: #C0392B;
}

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

body {
    font-family: 'Noto Serif SC', 'SimSun', serif;
    background: var(--red-wall-1); /* 替换原蓝天背景为红墙主色 */
    color: var(--gold-1); /* 文字默认金色 */
    overflow-x: hidden;
    line-height: 1.6;
}

/* 书法字体 */
.font-calligraphy {
    font-family: 'Ma Shan Zheng', 'KaiTi', cursive;
}

/* ============================================
   启动遮罩 - 多层视差古风效果
   ============================================ */
#curtain {
    background: linear-gradient(135deg, var(--red-wall-1) 0%, var(--red-wall-2) 50%, #2d1810 100%);
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
}

/* 视差层基础 */
.parallax-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* 第一层：红墙纹理背景（最底层，移动最慢） */
.layer-back {
    z-index: 1;
    animation: driftSlow 60s linear infinite;
}

.red-wall-texture {
    width: 120%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -10%;
    background: 
        linear-gradient(135deg, var(--red-wall-1) 0%, var(--red-wall-2) 50%, #3d1515 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(0,0,0,0.15) 50px,
            rgba(0,0,0,0.15) 52px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(0,0,0,0.1) 100px,
            rgba(0,0,0,0.1) 102px
        );
    background-blend-mode: multiply;
    opacity: 0.9;
}

/* 第二层：祈年殿主体（图片版） */
.layer-middle {
    z-index: 2;
    animation: driftMedium 40s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 全屏覆盖、居中、不遮挡文字 */
.temple-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.temple-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    /* 强化红金调，匹配图一 */
    filter: 
        saturate(1.1)
        brightness(0.95)
        sepia(20%)
        hue-rotate(-15deg);

    animation: templeFadeIn 1.5s ease-out forwards;
}
@keyframes templeFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 0.9; transform: translateY(0); }
}

/* 隐藏原来的CSS绘制祈年殿 */
.temple-silhouette,
.temple-outline {
    display: none !important;
}

/* 第三层：祥云、飞鸟、光晕（最上层，移动最快） */
.layer-front {
    z-index: 3;
    animation: driftFast 25s ease-in-out infinite;
    pointer-events: none;
}

/* 图片祥云样式（修改为金色） */
.cloud {
    position: absolute;
    width: 250px;
    height: auto;
    opacity: 0.7;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(249, 220, 92, 0.4)); /* 强化金色光晕 */
    animation: cloudFloat 12s ease-in-out infinite;
}
.cloud-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}
.cloud-2 {
    top: 20%;
    right: 8%;
    animation-delay: 2s;
    transform: scaleX(-1);
}
.cloud-3 {
    bottom: 15%;
    left: 15%;
    animation-delay: 4s;
}
.cloud-4,
.cloud-5 {
    display: none;
}

/* 图片飞鸟样式（修改为金色调） */
.bird {
    position: absolute;
    width: 360px;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(249, 220, 92, 0.5)); /* 金色阴影 */
}
.bird-1 {
    top: 15%;
    left: -180px;
    animation: birdFlyRight 16s linear infinite;
}
.bird-2 {
    top: 25%;
    right: -180px;
    animation: birdFlyLeft 19s linear infinite;
    transform: scaleX(-1);
}
.bird-3 {
    top: 45%;
    right: -180px;
    animation: birdFlyLeft 21s linear infinite;
    transform: scaleX(1);
}
.bird-4 {
    top: 5%;
    right: -180px;
    animation: birdFlyLeft 10s linear infinite;
}

@keyframes birdFlyRight {
    0% { left: -180px; opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { left: 110%; opacity: 0; }
}
@keyframes birdFlyLeft {
    0% { right: -180px; opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { right: 110%; opacity: 0; }
}
@keyframes birdFlyLeft {
    0% { right: -180px; opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { right: 110%; opacity: 0; }
}
@keyframes birdFlyLeft {
    0% { right: -180px; opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { right: 110%; opacity: 0; }
}

/* 光晕效果（强化金色） */
.light-glow {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, 
        rgba(249, 220, 92, 0.25) 0%, 
        transparent 70%
    );
    filter: blur(40px);
    animation: pulseGlow 8s ease-in-out infinite;
}

.light-ray {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(249, 220, 92, 0.4),
        transparent 30%,
        transparent 70%,
        rgba(249, 220, 92, 0.2)
    );
    filter: blur(1px);
    animation: rayShimmer 6s ease-in-out infinite;
}

/* 内容层：文字（固定居中，不随视差移动） */
.content-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

/* 印章式Logo（强化红金） */
.seal-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 4px solid var(--gold-2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 26, 26, 0.5); /* 加深红底 */
    box-shadow: 
        0 0 30px rgba(249, 220, 92, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    animation: sealPulse 4s ease-in-out infinite;
}

.seal-inner {
    width: 80%;
    height: 80%;
    border: 2px solid var(--gold-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal-text {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 36px;
    color: var(--gold-2);
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 8px;
}

/* 主标题（强化金色） */
.main-title {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 5rem;
    color: var(--gold-2);
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(249, 220, 92, 0.4);
    letter-spacing: 0.3em;
    animation: titleFadeIn 2s ease-out forwards;
    opacity: 0;
}

/* 副标题（适配红金） */
.subtitle {
    font-size: 1.25rem;
    color: rgba(245, 222, 179, 0.9);
    letter-spacing: 0.5em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: subtitleFadeIn 2s ease-out 0.5s forwards;
    opacity: 0;
}

/* 装饰线（强化金色） */
.decoration-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 2rem;
    animation: lineExpand 1.5s ease-out 1s forwards;
    opacity: 0;
}

.decoration-line .dot {
    width: 8px;
    height: 8px;
    background: var(--gold-2);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold-2);
}

.decoration-line .line {
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        var(--gold-2), 
        transparent
    );
}

/* 进入按钮（红金适配） */
.enter-btn {
    position: relative;
    padding: 1rem 3rem;
    background: rgba(139, 26, 26, 0.3);
    border: 2px solid var(--gold-2);
    color: var(--gold-1);
    font-size: 1.125rem;
    letter-spacing: 0.3em;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    animation: btnFadeIn 1.5s ease-out 1.5s forwards;
    opacity: 0;
}

.enter-btn:hover {
    background: rgba(139, 26, 26, 0.6);
    box-shadow: 0 0 30px rgba(249, 220, 92, 0.5);
    transform: translateY(-2px);
}

.btn-text {
    position: relative;
    z-index: 2;
}

.btn-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold-2);
    transition: width 0.4s ease;
}

.enter-btn:hover .btn-line {
    width: 100%;
}

/* 提示文字（适配红金） */
.hint-text {
    font-size: 0.875rem;
    color: rgba(245, 222, 179, 0.7);
    letter-spacing: 0.2em;
    animation: hintFadeIn 1.5s ease-out 2s forwards;
    opacity: 0;
}

/* ============================================
   视差动画关键帧
   ============================================ */

/* 三层不同速度的漂移 */
@keyframes driftSlow {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(2%) translateY(-1%); }
    50% { transform: translateX(-1%) translateY(1%); }
    75% { transform: translateX(1%) translateY(-2%); }
}

@keyframes driftMedium {
    0%, 100% { transform: translateX(0) translateY(0); }
    33% { transform: translateX(-3%) translateY(2%); }
    66% { transform: translateX(2%) translateY(-1%); }
}

@keyframes driftFast {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(5%) translateY(-3%); }
}

/* 祥云飘动 */
@keyframes floatCloud {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-15px) translateX(10px); }
}

/* 飞鸟翅膀动画（已废弃，保留兼容） */
@keyframes flyBird {}
@keyframes wingFlap {}

/* 光晕（强化金色） */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.9; transform: translateX(-50%) scale(1.1); }
}

@keyframes rayShimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* 印章脉动（强化金色） */
@keyframes sealPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(249, 220, 92, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 0 50px rgba(249, 220, 92, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.3); }
}

/* 文字淡入 */
@keyframes titleFadeIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes subtitleFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes lineExpand {
    0% { opacity: 0; width: 0; }
    100% { opacity: 1; width: auto; }
}

@keyframes btnFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes hintFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================================
   主界面建筑动画（保持原有）
   ============================================ */
@keyframes buildUp {
    0% { transform: translateY(80px) scale(0.9); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes columnGrow {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}

@keyframes roofLayer {
    0% { transform: translateY(-40px) scale(0.85); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes shimmer {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(249, 220, 92, 0.4)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 20px rgba(249, 220, 92, 0.9)); }
}

@keyframes riseFromGround {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.build-layer { animation: buildUp 1.5s ease-out forwards; opacity: 0; }
.column-layer { 
    animation: columnGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
    transform-origin: bottom center;
    opacity: 0;
}
.roof-layer { animation: roofLayer 1.2s ease-out forwards; opacity: 0; }
.shimmer-effect { animation: shimmer 3s ease-in-out infinite; }
.float-anim { animation: float 6s ease-in-out infinite; }

/* ============================================
   天空背景（替换为红金渐变）
   ============================================ */
.sky-gradient {
    background: linear-gradient(to bottom, 
        var(--red-wall-1) 0%, 
        var(--red-wall-2) 40%, 
        var(--red-wall-3) 100%
    );
    min-height: 100vh;
    /* 新增：居中展示柱子，替代俯视图容器的居中作用 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   柱子系统
   ============================================ */
/* 柱体光点样式 */
.dot-group {
  position: absolute;
  inset: 0;
}
.dot-group [class^='dot-'] {
  position: absolute;
  border-radius: 50%;
  transition: all 0.5s ease;
  opacity: 0.3;
  transform: scale(0.7);
  box-shadow: 0 0 0 transparent;
}
.dot-group.active [class^='dot-'] {
  opacity: 1;
  transform: scale(1.3);
  box-shadow: 0 0 20px currentColor;
}

/* 内环4红 */
.dot-inner {
  width: 16px;
  height: 16px;
  background: #ef4444;
  color: #ef4444;
}
/* 中环12橙 */
.dot-middle {
  width: 14px;
  height: 14px;
  background: #f97316;
  color: #f97316;
}
/* 外环12蓝 */
.dot-outer {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  color: #3b82f6;
}

/* 柱体系统整体居中容器 */
#pillar-system {
  position: absolute;
  bottom: 28%;    /* 从 15% 改为 28% → 整体上移 */
  left: 1/2;
  transform: translateX(-50%);
  width: 420px;
  height: 420px;
  pointer-events: none;
  z-index: 20;
}

/* 柱体组通用动画 */
.pillar-group {
  position: absolute;
  inset: 0;
}
.pillar {
  position: absolute;
  border-radius: 999px;
  transform-origin: bottom center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
}

/* 未选中状态：偏暗 */
.pillar {
  opacity: 0.4;
  filter: grayscale(0.6);
  transform: scaleY(0.92);
}
/* 选中组：高亮发光 */
.pillar-group.active .pillar {
  opacity: 1;
  filter: none;
  transform: scaleY(1) scaleX(1.05);
  box-shadow: 0 0 22px currentColor;
}

/* 内环 4 根 · 龙井柱（红金最高）—— 宝相花/龙纹 专属纹样 */
.pillar-inner {
  width: 22px;
  height: 170px;
  background: linear-gradient(to top, #7B241C, #C0392B 60%, #F5DEB3 100%);
  border: 2px solid #F9DC5C;
  color: #ef4444;
  box-shadow: inset 0 0 20px rgba(249,220,92,0.3);
  position: absolute;
  transform-origin: bottom center;
  pointer-events: auto;
  overflow: visible;
}
.pillar-inner::before {
  content: "龍 ❀ 龍 ❀";
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  transform: translateX(-50%);
  font-size: 5px;
  color: rgba(255, 215, 0, 0.45);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 11px;
  pointer-events: none;
  z-index: 1;
}

/* 中环 12 根 · 金柱（橙红中等）—— 节气回纹 专属纹样 */
.pillar-middle {
  width: 16px;
  height: 140px;
  background: linear-gradient(to top, #7B241C, #922B21 60%, #F9DC5C 100%);
  border: 1px solid #f97316;
  color: #f97316;
  position: absolute;
  transform-origin: bottom center;
  pointer-events: auto;
  overflow: visible;
}
.pillar-middle::before {
  content: "〓 ◆ 〓 ◆";
  position: absolute;
  left: 50%;
  top: 12%;
  bottom: 12%;
  transform: translateX(-50%);
  font-size: 5px;
  color: rgba(255, 165, 0, 0.45);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 10px;
  pointer-events: none;
  z-index: 1;
}

/* 外环 12 根 · 檐柱（暗红较矮）—— 保留原版所有效果 + 新增华丽动漫纹样 */
.pillar-outer {
  width: 12px;
  height: 110px;
  background: linear-gradient(to top, #7B241C, #922B21 60%, #F9DC5C 100%);
  border: 1px solid #f97316;
  color: #f97316;
  position: absolute;
  transform-origin: bottom center;
  pointer-events: auto;
  overflow: visible;
}

/* 华丽动漫古风纹样：竖向祥云符号（不影响任何原有效果） */
.pillar-outer::before {
  content: "❂❂❂❂❂";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 4px;
  color: rgba(249, 220, 92, 0.4);
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0;
  line-height: 8px;
  white-space: pre;
  z-index: 1;
  pointer-events: none;
}
.pillar-outer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(249, 220, 92, 0.35);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   屋顶系统（替换原蓝色为红金）
   ============================================ */
.roof-tier {
    border-radius: 50%;
    position: relative;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), inset 0 5px 30px rgba(249, 220, 92, 0.1);
}

.roof-outer {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 30% 30%, 
        var(--roof-red-2), 
        var(--roof-red-1) 60%, 
        #450a0a 100%
    );
    border: 16px solid var(--roof-red-1);
    z-index: 5;
}

.roof-middle {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at 30% 30%, 
        var(--roof-red-3), 
        var(--roof-red-2) 60%, 
        var(--roof-red-1) 100%
    );
    border: 14px solid var(--roof-red-2);
    z-index: 15;
}

.roof-inner {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 30% 30%, 
        var(--red-wall-3), 
        var(--roof-red-3) 50%, 
        var(--roof-red-2) 100%
    );
    border: 12px solid var(--roof-red-3);
    z-index: 25;
}

.roof-tier::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(249, 220, 92, 0.5);
    pointer-events: none;
}

/* ============================================
   台基系统（红金适配）
   ============================================ */
.terrace-tier {
    background: linear-gradient(to top, 
        var(--red-wall-1), 
        var(--gold-1) 80%
    );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(249, 220, 92, 0.2);
    position: relative;
}

.terrace-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(90deg, 
        transparent, 
        transparent 30px, 
        rgba(249, 220, 92, 0.2) 30px, 
        rgba(249, 220, 92, 0.2) 32px
    );
}

.caicai-pattern {
    background: repeating-linear-gradient(90deg,
        transparent,
        transparent 30px,
        rgba(249, 220, 92, 0.2) 30px,
        rgba(249, 220, 92, 0.2) 32px
    );
}

.dragon-pattern {
    background: radial-gradient(circle at 30% 50%, rgba(249, 220, 92, 0.6) 0%, transparent 50%);
}

/* ============================================
   鎏金宝顶（强化金色）
   ============================================ */
.golden-apex {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        #fef3c7, 
        var(--gold-3) 30%, 
        var(--gold-2) 60%, 
        var(--gold-1) 100%
    );
    box-shadow: 0 0 60px rgba(249, 220, 92, 0.7), inset 0 -10px 20px rgba(180, 83, 9, 0.4);
    border: 4px solid var(--gold-2);
    z-index: 35;
}

.apex-spire {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 40px solid var(--gold-2);
    position: relative;
    filter: drop-shadow(0 0 10px rgba(249, 220, 92, 0.6));
}

.apex-spire::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -8px;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #fff, var(--gold-3));
    border-radius: 50%;
    box-shadow: 0 0 20px var(--gold-3);
}

/* ============================================
   龙凤石（红金适配）
   ============================================ */
.dragon-phoenix-stone {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.8) 0%, transparent 50%),
        linear-gradient(135deg, var(--red-wall-1), var(--red-wall-2) 50%, var(--gold-1) 100%);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), inset 0 2px 10px rgba(249, 220, 92, 0.3);
    border: 3px solid rgba(249, 220, 92, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dragon-phoenix-stone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 60% 30% at 30% 40%, rgba(0,0,0,0.3) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 70% 60%, rgba(249, 220, 92, 0.5) 0%, transparent 60%);
    filter: blur(2px);
}

.dragon-phoenix-stone:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(249, 220, 92, 0.5);
}

/* ============================================
   UI组件（红金适配）
   ============================================ */
.glass-panel {
    background: rgba(139, 26, 26, 0.4); /* 红墙半透明 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(249, 220, 92, 0.4); /* 金边 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.glass-footer {
    background: rgba(139, 26, 26, 0.9); /* 深红底 */
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(249, 220, 92, 0.3); /* 金边 */
}

.text-gilded {
    background: linear-gradient(to bottom, 
        #fef3c7, 
        var(--gold-3) 50%, 
        var(--gold-2)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.cloud-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(249, 220, 92, 0.8) 0%, 
        rgba(249, 220, 92, 0.4) 40%,
        transparent 70%
    );
    filter: blur(3px);
    pointer-events: none;
}

@keyframes cloudFloat {
    0% { transform: translateY(100vh) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.2; }
    100% { transform: translateY(-100px) scale(0.5); opacity: 0; }
}

.info-panel {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    background: rgba(139, 26, 26, 0.85) !important;
    border-left: 1px solid var(--gold-2) !important;
}

.info-panel.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.season-block {
    border-radius: 12px;
    padding: 16px;
    margin: 8px 0;
    border-left: 4px solid;
}

/* 季节块适配红金主调 */
.season-spring { 
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.2), rgba(165, 42, 42, 0.1)); 
    border-color: var(--gold-2); 
    color: var(--gold-1);
}

.season-summer { 
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.3), rgba(165, 42, 42, 0.2)); 
    border-color: var(--gold-3); 
    color: var(--gold-1);
}

.season-autumn { 
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.25), rgba(165, 42, 42, 0.15)); 
    border-color: var(--gold-2); 
    color: var(--gold-1);
}

.season-winter { 
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.2), rgba(165, 42, 42, 0.1)); 
    border-color: var(--gold-1); 
    color: var(--gold-1);
}

.btn-imperial {
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.6), rgba(165, 42, 42, 0.4));
    border: 1px solid var(--gold-2);
    color: var(--gold-1);
    transition: all 0.3s ease;
}

.btn-imperial:hover {
    background: rgba(139, 26, 26, 0.8);
    border-color: var(--gold-3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(249, 220, 92, 0.4);
}

.btn-active {
    background: rgba(249, 220, 92, 0.2);
    border-color: var(--gold-2);
    box-shadow: 0 0 15px rgba(249, 220, 92, 0.5);
}

/* 响应式（删除俯视图相关适配） */
@media (max-width: 768px) {
    .main-title { font-size: 3rem; }
    .cloud { opacity: 0.5; }
    
    /* 仅保留柱子响应式，删除俯视图容器适配 */
    
    .roof-outer { width: 280px; height: 280px; border-width: 12px; }
    .roof-middle { width: 220px; height: 220px; border-width: 10px; }
    .roof-inner { width: 160px; height: 160px; border-width: 8px; }
}

/* 新增小屏适配（手机）- 删除俯视图容器适配 */
@media (max-width: 480px) {
    
}

/* 精准隐藏"祈年殿俯视"显示区域，不影响其他效果 */
.temple-top-view-text,
.temple-top-view-img,
.temple-top-view-label {
    display: none !important;
}