:root {
    --bg-color: #0f0f1a;
    --card-bg: #1a1a2e;
    --gold: #d4b166;
    --gold-glow: rgba(212, 177, 102, 0.4);
    --text-main: #fff;
    --text-sub: #a0a0a0;
    --accent-blue: #4a90e2;
}

/* 展厅大屏触控优化：防止长按选中和双指乱放大 */
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y; 
    transition: background-color 0.6s ease, background-image 0.6s ease;
}

/* 保持输入框正常可用 */
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

header {
    background: linear-gradient(180deg, #161625 0%, #0f0f1a 100%);
    padding: 30px 20px;
    text-align: center;
    border-bottom: 1px solid #333;
}

h1 { color: var(--gold); font-size: 2.5em; margin: 0; text-shadow: 0 0 15px var(--gold-glow); letter-spacing: 2px; }
.subtitle { color: var(--text-sub); font-size: 0.9em; margin-top: 5px; letter-spacing: 1px; }

.nav-links { margin-top: 15px; }
.nav-links a { color: var(--gold); text-decoration: none; margin: 0 15px; font-size: 1.1em; border-bottom: 1px dashed var(--gold); padding-bottom: 2px; }
.nav-links a:hover { color: #fff; border-color: #fff; }

.search-bar { margin: 20px auto; max-width: 400px; position: relative; }
.search-bar input { width: 100%; padding: 10px 40px 10px 15px; border-radius: 20px; border: 1px solid #444; background: #222; color: #fff; outline: none; transition: 0.3s; }
.search-bar input:focus { border-color: var(--gold); background: #000; }
.search-bar button { position: absolute; right: 5px; top: 2px; background: none; border: none; color: #888; cursor: pointer; padding: 8px; }

.filters { margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; align-items: center;}
.filters button { background: transparent; border: 1px solid #444; color: #888; padding: 6px 18px; cursor: pointer; border-radius: 4px; transition: 0.3s; }
.filters button.active, .filters button:hover { border-color: var(--gold); color: var(--gold); background: rgba(212, 177, 102, 0.1); }

.admin-link { font-size: 12px; color: #444; text-decoration: none; margin-left: 20px; }
.admin-link:hover { color: #888; }

/* =========================================
   懒加载渐显动画优化
========================================= */
.lazy-image {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.lazy-image.loaded {
    opacity: 1;
}

/* =========================================
   大厅：画廊级相框卡片设计
========================================= */
.container { max-width: 1400px; margin: 0 auto; padding: 40px 20px; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 25px; }

.card { 
    background: linear-gradient(to bottom, #1a1a2e, #101018); 
    border: 1px solid #2a2a35; 
    border-radius: 8px; 
    overflow: hidden; 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.card:hover { 
    transform: translateY(-8px); 
    border-color: #444; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 20px rgba(212, 177, 102, 0.2); 
}

.card .img-wrapper { 
    height: 220px; 
    margin: 12px 12px 10px 12px; 
    background: #000;
    border: 4px solid #111; 
    outline: 1px solid var(--gold); 
    outline-offset: -1px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.6); 
    border-radius: 2px;
    overflow: hidden; 
    position: relative;
}

.card img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.6s ease, opacity 0.6s ease; 
    opacity: 0.85; 
}

.card:hover img { 
    transform: scale(1.08); 
    opacity: 1; 
}

.card-info { 
    padding: 0 12px 18px 12px; 
    text-align: center; 
}

.card .name { 
    font-weight: bold; 
    font-size: 0.95rem; 
    color: #fff; 
    letter-spacing: 1.5px; 
    margin-bottom: 4px;
}

.hero-title { 
    font-size: 0.75rem; 
    color: var(--gold); 
    margin: 0 0 8px 0; 
    letter-spacing: 1px; 
    opacity: 0.8;
}

/* =========================================
   大厅：悬浮按钮群 (盲盒与连播)
========================================= */
.floating-random-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #555; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 1000;
    text-decoration: none;
}
.floating-random-btn:hover {
    background: rgba(212, 177, 102, 0.15); 
    color: var(--gold);
    border-color: var(--gold);
    transform: rotate(180deg) scale(1.1); 
}

.floating-play-btn {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: rgba(212, 177, 102, 0.15);
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 1000;
    outline: none;
}
.floating-play-btn:hover {
    background: var(--gold);
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--gold-glow);
}

/* =========================================
   时间轴通用容器与 Tab 控制
========================================= */
.timeline-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 25px; }
.timeline-tabs a { padding: 8px 22px; border: 1px solid #444; border-radius: 20px; color: #aaa; text-decoration: none; transition: 0.3s; font-size: 0.95em;}
.timeline-tabs a:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,177,102,0.05);}
.timeline-tabs a.active { background: rgba(212, 177, 102, 0.15); border-color: var(--gold); color: var(--gold); font-weight: bold; box-shadow: 0 0 15px rgba(212,177,102,0.1);}
.timeline-desc { text-align: center; color: #888; font-style: italic; max-width: 800px; margin: 0 auto 30px auto; line-height: 1.6; }


/* =========================================
   修复版：高密度 S型折线 蛇形时间轴展示
========================================= */
.snake-timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 60px 0; 
    padding: 30px 0 80px 0;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    /* 【核心修复】：强制致密填充，防止跨行反向排列时换行断层 */
    grid-auto-flow: dense; 
}

.snake-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.snake-item:hover {
    transform: scale(1.15) translateY(-5px);
    z-index: 10;
}

/* 圆形头像锚点 */
.snake-point {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: #111;
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: 0.3s;
}
.snake-item:hover .snake-point {
    box-shadow: 0 0 20px var(--gold-glow);
    border-color: #fff;
}

/* 【核心修复】：彻底隐藏加载失败图片的 alt 文本，回退为优雅黑金空心圆 */
.snake-point img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent; 
    font-size: 0; 
}

/* 下方的信息小卡片 */
.snake-info {
    margin-top: 12px;
    text-align: center;
    background: rgba(212, 177, 102, 0.08);
    border: 1px solid rgba(212, 177, 102, 0.2);
    padding: 6px 10px;
    border-radius: 6px;
    width: 85%;
    box-sizing: border-box;
    transition: 0.3s;
}
.snake-item:hover .snake-info {
    background: rgba(212, 177, 102, 0.2);
    border-color: var(--gold);
}
.snake-year { 
    color: var(--gold); 
    font-size: 0.75em; 
    font-family: 'Courier New', Courier, monospace; 
    display: block; 
    margin-bottom: 2px;
}
.snake-name { 
    color: #fff; 
    font-size: 0.9em; 
    font-weight: bold; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    letter-spacing: 1px;
}

/* 核心连线绘制 */
.snake-item::after {
    content: '';
    position: absolute;
    background: rgba(212, 177, 102, 0.4);
    z-index: 1;
    transition: background 0.3s, box-shadow 0.3s;
}
.snake-item:hover::after {
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold-glow);
}

/* 隐藏整个列表中最后一个元素的连线 */
.snake-item:last-child::after {
    display: none !important;
}

/* ==== 桌面端 6 列布局引擎 ==== */
@media (min-width: 1001px) {
    /* 奇数行：向右连线 */
    .snake-item:nth-child(12n+1)::after,
    .snake-item:nth-child(12n+2)::after,
    .snake-item:nth-child(12n+3)::after,
    .snake-item:nth-child(12n+4)::after,
    .snake-item:nth-child(12n+5)::after {
        top: 24px; left: 50%; right: auto; width: 100%; height: 2px;
    }
    /* 右边缘：向下折返连线 */
    .snake-item:nth-child(12n+6)::after {
        top: 24px; left: calc(50% - 1px); right: auto; width: 2px; height: calc(100% + 60px);
    }
    /* 偶数行：向左连线 */
    .snake-item:nth-child(12n+7)::after,
    .snake-item:nth-child(12n+8)::after,
    .snake-item:nth-child(12n+9)::after,
    .snake-item:nth-child(12n+10)::after,
    .snake-item:nth-child(12n+11)::after {
        top: 24px; right: 50%; left: auto; width: 100%; height: 2px;
    }
    /* 左边缘：向下折返连线 */
    .snake-item:nth-child(12n+12)::after {
        top: 24px; right: calc(50% - 1px); left: auto; width: 2px; height: calc(100% + 60px);
    }
    
    /* 偶数行倒序视觉排列注入 */
    .snake-item:nth-child(12n+7) { grid-column: 6; }
    .snake-item:nth-child(12n+8) { grid-column: 5; }
    .snake-item:nth-child(12n+9) { grid-column: 4; }
    .snake-item:nth-child(12n+10) { grid-column: 3; }
    .snake-item:nth-child(12n+11) { grid-column: 2; }
    .snake-item:nth-child(12n+12) { grid-column: 1; }
}

/* ==== 平板端 4 列布局引擎 ==== */
@media (max-width: 1000px) and (min-width: 601px) {
    .snake-timeline { grid-template-columns: repeat(4, 1fr); gap: 50px 0; max-width: 800px;}
    .snake-item:nth-child(8n+1)::after, .snake-item:nth-child(8n+2)::after, .snake-item:nth-child(8n+3)::after {
        top: 24px; left: 50%; right: auto; width: 100%; height: 2px;
    }
    .snake-item:nth-child(8n+4)::after {
        top: 24px; left: calc(50% - 1px); right: auto; width: 2px; height: calc(100% + 50px);
    }
    .snake-item:nth-child(8n+5)::after, .snake-item:nth-child(8n+6)::after, .snake-item:nth-child(8n+7)::after {
        top: 24px; right: 50%; left: auto; width: 100%; height: 2px;
    }
    .snake-item:nth-child(8n+8)::after {
        top: 24px; right: calc(50% - 1px); left: auto; width: 2px; height: calc(100% + 50px);
    }
    .snake-item:nth-child(8n+5) { grid-column: 4; }
    .snake-item:nth-child(8n+6) { grid-column: 3; }
    .snake-item:nth-child(8n+7) { grid-column: 2; }
    .snake-item:nth-child(8n+8) { grid-column: 1; }
}

/* ==== 手机端 2 列布局引擎 ==== */
@media (max-width: 600px) {
    .snake-timeline { grid-template-columns: repeat(2, 1fr); gap: 40px 0; padding-top: 10px;}
    .snake-item:nth-child(4n+1)::after { top: 24px; left: 50%; right: auto; width: 100%; height: 2px; }
    .snake-item:nth-child(4n+2)::after { top: 24px; left: calc(50% - 1px); right: auto; width: 2px; height: calc(100% + 40px); }
    .snake-item:nth-child(4n+3)::after { top: 24px; right: 50%; left: auto; width: 100%; height: 2px; }
    .snake-item:nth-child(4n+4)::after { top: 24px; right: calc(50% - 1px); left: auto; width: 2px; height: calc(100% + 40px); }
    .snake-item:nth-child(4n+3) { grid-column: 2; }
    .snake-item:nth-child(4n+4) { grid-column: 1; }
}


/* =========================================
   详情页容器与控制台
========================================= */
.detail-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; height: calc(100vh - 80px); display: flex; flex-direction: column; }
.back-link { color: var(--text-sub); text-decoration: none; display: inline-block; transition: 0.3s; }
.back-link:hover { color: var(--gold); }
.presentation-link { float: right; color: var(--accent-blue); text-decoration: none; border: 1px solid var(--accent-blue); padding: 5px 15px; border-radius: 20px; transition: 0.3s;}
.presentation-link:hover { background: var(--accent-blue); color: #fff; }

.hero-showcase { flex: 1; min-height: 0; display: flex; align-items: stretch; background: #151520; border: 1px solid #333; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); overflow: hidden; transition: all 0.5s ease; }
.hero-left-col { flex: 1; display: flex; flex-direction: column; background: #0f0f16; border-right: 1px solid #2a2a35; height: 100%; box-sizing: border-box; transition: background 0.5s ease;}
.hero-img-box { width: 100%; flex: 3; display: flex; flex-direction: column; background: #000; position: relative; overflow: hidden; }
.gallery-carousel { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 0; margin: 0; scrollbar-width: none; }
.gallery-carousel::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; position: relative; border-radius: 0; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; background: #000; transition: transform 0.3s; }
.gallery-slide img:hover { transform: scale(1.02); }

.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 25px; padding: 12px 0; background: #0a0a0f; border-top: 1px solid #1a1a25; border-bottom: 1px solid #1a1a25; flex-shrink: 0; box-shadow: 0 -5px 15px rgba(0,0,0,0.5); z-index: 10; transition: background 0.5s ease;}
.nav-btn { background: transparent; border: 1px solid #333; color: var(--gold); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; outline: none; }
.nav-btn:hover { background: rgba(212, 177, 102, 0.1); border-color: var(--gold); transform: scale(1.1); box-shadow: 0 0 10px rgba(212, 177, 102, 0.2); }
.nav-btn:active { transform: scale(0.95); }
.slide-counter { color: var(--gold); font-size: 0.95rem; font-family: 'Courier New', Courier, monospace; letter-spacing: 2px; user-select: none; }
.slide-counter #currentSlide { font-size: 1.1rem; font-weight: bold; color: #fff; }

.quote-section { flex: 1; padding: 20px 30px; background: linear-gradient(to bottom, #151520, #0f0f16); display: flex; flex-direction: column; justify-content: center; overflow: hidden; transition: background 0.5s ease;}
.quote-section .section-title { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; font-size: 0.95rem; color: #888;}
.quote-block { line-height: 1.5; color: var(--gold); font-style: italic; border-left: 4px solid var(--gold); padding-left: 15px; background: transparent; margin: 0; }
.quote-block p { margin: 0 0 6px 0; }
.quote-block p:last-child { margin-bottom: 0; }

.hero-right-col { flex: 1; padding: 30px 40px; display: flex; flex-direction: column; font-size: 0.95em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212, 177, 102, 0.4) transparent; }
.hero-right-col::-webkit-scrollbar { width: 6px; }
.hero-right-col::-webkit-scrollbar-track { background: transparent; }
.hero-right-col::-webkit-scrollbar-thumb { background: rgba(212, 177, 102, 0.4); border-radius: 4px; }
.hero-right-col::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.section-title { color: var(--gold); font-size: 1.1em; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px dashed #333; font-weight: bold; letter-spacing: 1px; transition: color 0.5s ease; }
.hero-header { border-bottom: 1px solid #333; margin-bottom: 20px; padding-bottom: 10px; }
.detail-title { color: var(--gold); font-size: 1.2em; letter-spacing: 1px; }
.detail-name { font-size: 2.2em; margin: 5px 0 15px 0; line-height: 1.1; font-weight: bold; color: #fff;}
.meta-tags { margin-bottom: 5px; }
.badge { display: inline-block; background: #333; color: #ccc; padding: 4px 10px; border-radius: 4px; font-size: 0.85em; margin-right: 10px; margin-bottom: 5px; transition: all 0.5s ease;}
.badge.lifespan { background: transparent; border: 1px solid #444; }
.indent-para { text-indent: 2em; margin: 0 0 12px 0; text-align: justify; line-height: 1.7; color: #ddd; }
.indent-para:last-child { margin-bottom: 0; }
.desc-section, .fact-section { margin-bottom: 25px; }
.fun-fact-card { background: rgba(212, 177, 102, 0.05); padding: 15px; border-radius: 4px; }
.video-container a { display: block; background: #c4302b; color: #fff; padding: 10px 15px; border-radius: 4px; text-decoration: none; font-size: 0.9em;}
.video-container a:hover { background: #a62824; }

/* 扫码与语音工具栏 */
.tools-bar { display: flex; gap: 10px; margin-bottom: 15px; }
.tool-btn { flex: 1; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid #444; color: #ccc; padding: 10px; border-radius: 4px; cursor: pointer; transition: 0.3s; }
.tool-btn:hover { background: rgba(212, 177, 102, 0.1); color: var(--gold); border-color: var(--gold); }

.worship-btn { background: linear-gradient(45deg, #d4b166, #b8860b); border: none; padding: 12px 25px; color: #000; font-weight: bold; font-size: 1em; border-radius: 30px; cursor: pointer; box-shadow: 0 5px 15px rgba(212, 177, 102, 0.3); transition: 0.3s; width: 100%; }
.worship-btn:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(212, 177, 102, 0.5); }
.worship-btn.liked { background: #333; color: var(--gold); cursor: default; transform: none; }

.lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.92); z-index: 9999; display: none; align-items: center; justify-content: center; cursor: zoom-out; backdrop-filter: blur(5px); }
.lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: rgba(255,255,255,0.6); font-size: 50px; font-weight: 300; cursor: pointer; transition: 0.3s; }
.lightbox-close:hover { color: var(--gold); transform: scale(1.1); }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* =========================================
   课标/学科导航页：高密度紧凑排版设计
========================================= */
.subject-group-header {
    margin: 40px 0 15px 0;
    border-bottom: 2px solid rgba(39, 174, 96, 0.4);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.subject-group-header h2 {
    margin: 0;
    color: #2ecc71;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(39, 174, 96, 0.2);
}

.btn-play-sm {
    background: rgba(39, 174, 96, 0.15);
    color: #2ecc71;
    border: 1px solid #2ecc71;
    padding: 6px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.btn-play-sm:hover {
    background: #2ecc71;
    color: #fff;
    transform: scale(1.05);
}

.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 15px;
    padding-bottom: 10px;
}

.subject-card {
    background: linear-gradient(135deg, #1e293b, #111827);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex; 
    align-items: center;
    gap: 15px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.subject-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 4px;
    background: #27ae60;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    transform-origin: bottom;
}

.subject-card:hover {
    transform: translateY(-4px);
    border-color: #27ae60;
    box-shadow: 0 10px 20px rgba(39, 174, 96, 0.15);
}

.subject-card:hover::before {
    transform: scaleY(1);
}

.subject-icon {
    font-size: 1.8rem; 
    color: #27ae60;
    transition: transform 0.4s ease;
    flex-shrink: 0;
}

.subject-card:hover .subject-icon {
    transform: scale(1.1) rotate(-5deg);
}

.subject-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subject-card h3 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    letter-spacing: 1px;
    color: #f8fafc;
}

.subject-count {
    display: inline-block;
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid rgba(39, 174, 96, 0.3);
    padding: 2px 10px;
    border-radius: 20px;
    color: #2ecc71;
    font-size: 0.75rem;
    width: max-content;
}

/* =========================================
   异世神格 (游戏化) 沉浸式主题切换覆写
========================================= */
body.alter-theme-active {
    --bg-color: #0d0814; 
    --card-bg: #160a22;
    --gold: #00f0ff; 
    --gold-glow: rgba(0, 240, 255, 0.5);
    --text-main: #e2d1f0;
    --accent-blue: #9b59b6; 
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(155, 89, 182, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.06) 0%, transparent 40%);
    background-color: var(--bg-color);
}
body.alter-theme-active .hero-showcase {
    border-color: #4b0082;
    box-shadow: 0 20px 60px rgba(75, 0, 130, 0.4), inset 0 0 30px rgba(155, 89, 182, 0.1);
    background: #0f0816;
}
body.alter-theme-active .hero-left-col {
    background: rgba(11, 5, 16, 0.8);
    border-right-color: #2a153d;
}
body.alter-theme-active .quote-section {
    background: linear-gradient(to bottom, #160a22, #0d0814);
}
body.alter-theme-active .gallery-controls {
    background: #0d0814; border-color: #2a153d;
}
body.alter-theme-active .badge {
    background: rgba(155, 89, 182, 0.15);
    color: #f3a6ff;
    border: 1px solid rgba(155, 89, 182, 0.5);
}
body.alter-theme-active .alter-badge {
    background: rgba(0, 240, 255, 0.15) !important;
    color: #00f0ff !important;
    border: 1px solid rgba(0, 240, 255, 0.5) !important;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 6px 15px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}
body.alter-theme-active .worship-btn {
    background: linear-gradient(45deg, #9b59b6, #4b0082);
    color: #fff;
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
}
body.alter-theme-active .worship-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6);
    background: linear-gradient(45deg, #00f0ff, #9b59b6);
}
body.alter-theme-active .worship-btn.liked {
    background: #1a0f2e; color: #00f0ff;
}
body.alter-theme-active .desc-section .section-title {
    color: #e056fd !important;
    border-bottom-color: rgba(224, 86, 253, 0.3) !important;
    text-shadow: 0 0 10px rgba(224, 86, 253, 0.4);
}

/* =========================================
   右下角专属浮动切换按钮
========================================= */
.dimensional-switch-container {
    position: fixed;
    bottom: 20px; 
    right: 20px;
    z-index: 9999;
}
.dim-checkbox { display: none; }
.dim-label {
    display: flex; align-items: center; gap: 8px; 
    background: linear-gradient(135deg, #1f1c2c, #000000);
    border: 2px solid #9b59b6;
    padding: 8px 18px; 
    border-radius: 30px; 
    color: #e056fd; 
    font-weight: bold; 
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.9em; 
    letter-spacing: 1px;
    user-select: none;
}
.dim-label:hover { 
    transform: scale(1.05) translateY(-3px); 
    box-shadow: 0 10px 25px rgba(155, 89, 182, 0.6); 
    border-color: #00f0ff;
}
.icon-alter { display: none; }
.dim-checkbox:checked + .dim-label {
    background: linear-gradient(135deg, #2a0845, #6441A5);
    border-color: #00f0ff; color: #fff;
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.5);
}
.dim-checkbox:checked + .dim-label .icon-normal { display: none; }
.dim-checkbox:checked + .dim-label .icon-alter { display: inline-block; color: #00f0ff; }

@media (max-width: 768px) {
    .subject-group-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-showcase { flex-direction: column; overflow: visible; }
    .hero-left-col { height: auto; border-right: none; border-bottom: 1px solid #333; }
    .hero-right-col { overflow-y: visible; padding: 20px; }
    .dimensional-switch-container { bottom: 15px; right: 15px; transform: scale(0.85); transform-origin: right bottom;}
}

.home-battle-nav {
    color: #f0cf82 !important;
    border-color: rgba(240, 207, 130, 0.7) !important;
}

.home-battle-entry {
    width: min(1180px, calc(100% - 40px));
    min-height: 150px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    margin: 34px auto 12px;
    padding: 25px 30px;
    border: 1px solid rgba(212, 177, 102, 0.42);
    background:
        radial-gradient(circle at 12% 50%, rgba(74, 144, 226, 0.18), transparent 28%),
        linear-gradient(125deg, rgba(29, 32, 58, 0.98), rgba(10, 25, 24, 0.98));
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24), inset 0 0 50px rgba(212, 177, 102, 0.04);
    box-sizing: border-box;
}
.home-battle-emblem { position: relative; width: 78px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); box-shadow: 0 0 30px rgba(212, 177, 102, 0.12); }
.home-battle-emblem::before { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(212, 177, 102, 0.45); border-radius: 50%; }
.home-battle-emblem span { font: 1rem Georgia, serif; letter-spacing: 0.12em; }
.home-battle-emblem i { position: absolute; right: -5px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #121726; background: var(--gold); font-size: 0.7rem; }
.home-battle-entry p { margin: 0 0 4px; color: var(--gold); font: 0.66rem Georgia, serif; letter-spacing: 0.22em; }
.home-battle-entry h2 { margin: 0 0 7px; color: #fff; font: 500 2rem Georgia, 'Songti SC', serif; letter-spacing: 0.08em; }
.home-battle-entry > div:nth-child(2) > span { color: var(--text-sub); font-size: 0.82rem; line-height: 1.7; }
.home-battle-entry > a { min-width: 172px; min-height: 64px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 0 20px; border: 1px solid var(--gold); color: #151522; background: linear-gradient(135deg, #f0d28a, var(--gold)); text-decoration: none; box-sizing: border-box; }
.home-battle-entry > a strong { font-size: 0.9rem; }
.home-battle-entry > a small { font: 0.48rem Georgia, serif; letter-spacing: 0.1em; }
.home-battle-entry > a:hover { filter: brightness(1.08); transform: translateY(-2px); }

@media (max-width: 760px) {
    .home-battle-entry { grid-template-columns: auto 1fr; gap: 18px; padding: 22px; }
    .home-battle-entry > a { grid-column: 1 / -1; width: 100%; }
}

/* =========================================
   次元神格 3.0：独立英雄档案界面
========================================= */
.alter-experience { display: none; }

.alter-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    overflow: hidden;
    background: #030806;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.32s ease 1.15s, visibility 0s linear 1.5s;
}
body.alter-theme-active .alter-gate { visibility: visible; }
.alter-gate.is-opening,
.alter-gate.is-open { pointer-events: none; }
.alter-gate.is-open { opacity: 0; visibility: hidden; }
.alter-gate:focus-visible { outline: 2px solid #f0d89a; outline-offset: -8px; }

.alter-gate-leaf {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% + 2px);
    overflow: hidden;
    background: #09110e;
    transition: transform 1.3s cubic-bezier(0.78, 0, 0.18, 1);
    will-change: transform;
}
.alter-gate-left { left: 0; border-right: 2px solid #e4c681; }
.alter-gate-right { right: 0; border-left: 2px solid #e4c681; }
.alter-gate-left::before,
.alter-gate-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(201, 167, 101, 0.12), transparent 36%),
        repeating-linear-gradient(90deg, transparent 0 82px, rgba(201, 167, 101, 0.055) 83px 84px),
        repeating-linear-gradient(0deg, transparent 0 82px, rgba(201, 167, 101, 0.045) 83px 84px),
        linear-gradient(135deg, #14241d 0%, #08110d 52%, #101e18 100%);
    box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.72);
}
.alter-gate-left::before { left: 0; }
.alter-gate-right::before { right: 0; transform: scaleX(-1); }
.alter-gate-leaf::after {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(239, 211, 149, 0.62);
    box-shadow:
        inset 0 0 0 8px rgba(6, 14, 10, 0.62),
        inset 0 0 0 9px rgba(201, 167, 101, 0.22),
        0 0 60px rgba(0, 0, 0, 0.65);
}
.alter-gate-panel {
    position: absolute;
    z-index: 2;
    inset: 48px;
    border: 1px solid rgba(201, 167, 101, 0.24);
    box-shadow:
        inset 0 0 0 10px rgba(5, 13, 9, 0.58),
        inset 0 0 0 11px rgba(201, 167, 101, 0.12);
}
.alter-gate-panel::before,
.alter-gate-panel::after {
    content: '';
    position: absolute;
    top: 50%;
    width: min(23vw, 360px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 216, 154, 0.4), transparent);
}
.alter-gate-panel::before { left: 5%; transform: rotate(32deg); }
.alter-gate-panel::after { right: 5%; transform: rotate(-32deg); }

.alter-gate-plaque-half {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: min(22vw, 32vh);
    height: min(66vw, 96vh);
    transform: translateY(-50%);
    background-image:
        linear-gradient(rgba(5, 12, 8, 0.03), rgba(5, 12, 8, 0.08)),
        var(--alter-gate-image);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    filter: saturate(0.92) contrast(1.04) brightness(0.9);
    box-shadow: 0 0 0 1px rgba(240, 216, 154, 0.74), 0 0 48px rgba(0, 0, 0, 0.68);
}
.alter-gate-left .alter-gate-plaque-half {
    right: 0;
    background-position: left center;
    border-left: 9px solid rgba(7, 15, 11, 0.88);
}
.alter-gate-right .alter-gate-plaque-half {
    left: 0;
    background-position: right center;
    border-right: 9px solid rgba(7, 15, 11, 0.88);
}
.alter-gate.is-opening .alter-gate-left { transform: translateX(-101%); }
.alter-gate.is-opening .alter-gate-right { transform: translateX(101%); }

.alter-gate-axis {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, #f0d89a 18%, #f9e9b9 50%, #f0d89a 82%, transparent);
    box-shadow: 0 0 22px rgba(240, 216, 154, 0.8), 0 0 70px rgba(201, 167, 101, 0.48);
    transition: opacity 0.35s ease 0.25s;
}
.alter-gate.is-opening .alter-gate-axis { opacity: 0; }

.alter-gate-lock {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    width: min(390px, 72vw);
    display: grid;
    justify-items: center;
    transform: translate(-50%, -50%);
    color: #efe7d4;
    text-align: center;
    text-shadow: 0 2px 14px #000;
    transition: opacity 0.42s ease, transform 0.58s cubic-bezier(0.55, 0, 1, 0.45);
}
.alter-gate.is-opening .alter-gate-lock { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
.alter-gate-rings {
    position: relative;
    width: 230px;
    height: 230px;
    display: grid;
    place-items: center;
    margin-bottom: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 13, 9, 0.76) 0 36%, rgba(135, 99, 54, 0.3) 37% 39%, rgba(6, 13, 9, 0.48) 40% 100%);
    box-shadow: 0 0 0 1px rgba(214, 184, 115, 0.84), 0 0 38px rgba(0, 0, 0, 0.62), inset 0 0 32px rgba(201, 167, 101, 0.16);
}
.alter-gate-rings i {
    position: absolute;
    border: 1px solid rgba(240, 216, 154, 0.8);
    border-radius: 50%;
    animation: alterGateOrbit 6s linear infinite;
}
.alter-gate-rings i:nth-child(1) { inset: 16px; border-style: dashed; }
.alter-gate-rings i:nth-child(2) { inset: 38px; animation-duration: 4.5s; animation-direction: reverse; }
.alter-gate-rings i:nth-child(3) { inset: 61px; border-color: rgba(240, 216, 154, 0.45); animation-duration: 3s; }
.alter-gate-rings b { color: #f3dda5; font: 1.1rem Georgia, serif; letter-spacing: 0.22em; }
.alter-gate-lock p { margin: 0 0 10px; color: #c9a765; font: 0.64rem 'Courier New', monospace; letter-spacing: 0.3em; }
.alter-gate-lock strong {
    max-width: min(72vw, 440px);
    color: rgba(239, 231, 212, 0.58);
    font: 500 clamp(1.45rem, 2.75vw, 2.35rem) Georgia, 'Songti SC', serif;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58), 0 0 20px rgba(231, 214, 176, 0.12);
    transform: translateY(clamp(58px, 9vh, 92px));
}
.alter-gate-lock small {
    margin-top: 12px;
    color: rgba(202, 213, 207, 0.62);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    transform: translateY(clamp(58px, 9vh, 92px));
}

.alter-gate-status {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 5vh;
    width: min(680px, 82vw);
    display: flex;
    align-items: center;
    gap: 16px;
    transform: translateX(-50%);
    color: rgba(239, 225, 190, 0.72);
    font: 0.58rem 'Courier New', monospace;
    letter-spacing: 0.2em;
    transition: opacity 0.25s ease;
}
.alter-gate-status span { flex: 1; height: 1px; background: rgba(201, 167, 101, 0.4); }
.alter-gate.is-opening .alter-gate-status { opacity: 0; }

@keyframes alterGateOrbit { to { transform: rotate(360deg); } }

body.alter-entering .alter-topbar,
body.alter-entering .alter-hero-shell,
body.alter-entering .alter-section,
body.alter-entering .alter-footer { opacity: 0; transform: translateY(20px); }
body.alter-entered .alter-topbar,
body.alter-entered .alter-hero-shell,
body.alter-entered .alter-section,
body.alter-entered .alter-footer {
    animation: alterContentReveal 0.7s ease both;
}
body.alter-entered .alter-hero-shell { animation-delay: 0.08s; }
@keyframes alterContentReveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

body.alter-theme-active {
    --alter-ink: #07100d;
    --alter-panel: #0d1915;
    --alter-panel-soft: #13221c;
    --alter-brass: #c9a765;
    --alter-brass-bright: #f0d89a;
    --alter-ivory: #eee8d7;
    --alter-muted: #97a59d;
    --alter-copper: #8e6845;
    background:
        linear-gradient(rgba(201, 167, 101, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 167, 101, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 72% 10%, rgba(121, 153, 124, 0.15), transparent 34%),
        #07100d;
    background-size: 44px 44px, 44px 44px, auto, auto;
    color: var(--alter-ivory);
}

body.alter-theme-active .detail-container { display: none; }
body.alter-theme-active .alter-experience {
    display: block;
    min-height: 100vh;
    overflow: hidden;
}

.alter-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    min-height: 70px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 0 36px;
    border-bottom: 1px solid rgba(201, 167, 101, 0.26);
    background: rgba(7, 16, 13, 0.88);
    backdrop-filter: blur(18px);
}

.alter-brand {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 12px;
    color: var(--alter-ivory);
    text-decoration: none;
    letter-spacing: 0.08em;
}

.alter-brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--alter-brass);
    color: var(--alter-brass-bright);
    font-family: Georgia, serif;
    font-size: 0.8rem;
    transform: rotate(45deg);
}

.alter-brand-mark::first-line { transform: rotate(-45deg); }
.alter-brand > span:last-child { display: grid; line-height: 1.05; }
.alter-brand strong { font-size: 0.9rem; }
.alter-brand small { margin-top: 5px; color: var(--alter-muted); font-size: 0.55rem; letter-spacing: 0.18em; }

.alter-topbar-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--alter-muted);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.alter-record-id {
    padding: 5px 10px;
    border: 1px solid rgba(201, 167, 101, 0.3);
    border-radius: 999px;
    color: var(--alter-brass-bright);
    font-family: 'Courier New', monospace;
}

.alter-return-btn {
    border: 0;
    background: transparent;
    color: var(--alter-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
}
.alter-return-btn:hover { color: var(--alter-brass-bright); }

.alter-topbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
}

.alter-battle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid rgba(201, 167, 101, 0.55);
    color: var(--alter-brass-bright);
    background: rgba(201, 167, 101, 0.08);
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.alter-battle-btn:hover {
    border-color: var(--alter-brass-bright);
    color: var(--alter-ink);
    background: var(--alter-brass-bright);
}

.alter-hero-shell,
.alter-section,
.alter-footer {
    width: min(1420px, calc(100% - 72px));
    margin-inline: auto;
}

.alter-hero-shell {
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: minmax(360px, 0.86fr) minmax(500px, 1.14fr);
    gap: clamp(54px, 7vw, 112px);
    align-items: center;
    padding: 58px 0 72px;
    box-sizing: border-box;
}

.alter-art-column { min-width: 0; }
.alter-game-card {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 2 / 3;
    margin-inline: auto;
    perspective: 1800px;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.46));
}
.alter-game-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.2, 0.72, 0.18, 1);
}
.alter-game-card.is-flipped .alter-game-card-inner { transform: rotateY(180deg); }
.alter-card-face {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(240, 216, 154, 0.58);
    background: #050906;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: inset 0 0 0 11px rgba(6, 13, 9, 0.75), inset 0 0 0 12px rgba(201, 167, 101, 0.32);
}
.alter-card-face::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 12px;
    border: 1px solid rgba(240, 216, 154, 0.22);
    pointer-events: none;
}
.alter-card-face > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #050906;
}
.alter-card-front::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(3, 8, 6, 0.8) 100%);
    pointer-events: none;
}
.alter-card-front figcaption {
    position: absolute;
    z-index: 3;
    left: 34px;
    right: 34px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--alter-ivory);
    font-size: 0.76rem;
    letter-spacing: 0.15em;
}
.alter-card-front figcaption span { color: var(--alter-brass-bright); font-family: 'Courier New', monospace; }
.alter-card-back { transform: rotateY(180deg); }
.alter-card-back.has-baked-copy .alter-card-dossier-overlay { opacity: 0; }
.alter-card-dossier-overlay { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.alter-card-bio {
    position: absolute;
    top: 45.2%;
    left: 24%;
    right: 5.5%;
    height: 10.5%;
    overflow: hidden;
    color: #eee7d5;
}
.alter-card-bio > span { display: block; margin-bottom: 5px; color: #d6b873; font: 600 clamp(0.5rem, 0.75vw, 0.68rem) 'Courier New', monospace; letter-spacing: 0.14em; }
.alter-card-bio p { margin: 0; font-size: clamp(0.48rem, 0.78vw, 0.7rem); line-height: 1.55; text-align: justify; text-shadow: 0 1px 4px #000; }
.alter-card-stats {
    position: absolute;
    top: 59.4%;
    left: 24.2%;
    right: 5.8%;
    height: 20.6%;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
}
.alter-card-stats > div {
    display: grid;
    grid-template-columns: 42px 1fr 26px;
    gap: 8px;
    align-items: center;
    color: #e8dfca;
    font-size: clamp(0.48rem, 0.72vw, 0.66rem);
}
.alter-card-stats span { letter-spacing: 0.08em; }
.alter-card-stats i { position: relative; height: 3px; overflow: hidden; background: rgba(238, 231, 213, 0.15); }
.alter-card-stats i::after { content: ''; position: absolute; inset: 0; width: var(--score); background: linear-gradient(90deg, #8e6845, #f0d89a); box-shadow: 0 0 8px rgba(240, 216, 154, 0.5); }
.alter-card-stats strong { color: #f0d89a; font: 700 clamp(0.52rem, 0.78vw, 0.7rem) 'Courier New', monospace; text-align: right; }
.alter-card-medallions {
    position: absolute;
    left: 23%;
    right: 5.5%;
    bottom: 4.5%;
    height: 13.5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4%;
}
.alter-card-medallions > div { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #e8dfca; text-align: center; }
.alter-card-medallions strong { font: 500 clamp(0.52rem, 0.84vw, 0.72rem) Georgia, 'Songti SC', serif; }
.alter-card-medallions span { margin-top: 4px; color: #b9aa8b; font-size: clamp(0.38rem, 0.62vw, 0.55rem); }

.alter-art-frame {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 2 / 3;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(201, 167, 101, 0.5);
    background: #050906;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.alter-art-frame::before,
.alter-art-frame::after {
    content: '';
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
.alter-art-frame::before {
    inset: 12px;
    border: 1px solid rgba(240, 216, 154, 0.32);
}
.alter-art-frame::after {
    inset: 0;
    background: linear-gradient(180deg, transparent 54%, rgba(3, 8, 6, 0.74) 100%);
}

.alter-plate {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.8s ease;
}
.alter-plate.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.alter-plate img { width: 100%; height: 100%; object-fit: contain; object-position: center; cursor: zoom-in; }
.alter-plate figcaption {
    position: absolute;
    z-index: 4;
    left: 34px;
    right: 34px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--alter-ivory);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
}
.alter-plate figcaption span { color: var(--alter-brass-bright); font-family: 'Courier New', monospace; }
.alter-art-index {
    position: absolute;
    z-index: 4;
    top: 28px;
    right: 28px;
    color: rgba(240, 216, 154, 0.6);
    font: 0.68rem/1 'Courier New', monospace;
    letter-spacing: 0.22em;
}

.alter-plate-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border: 1px solid rgba(201, 167, 101, 0.22); }
.alter-plate-switch button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    border: 0;
    border-right: 1px solid rgba(201, 167, 101, 0.22);
    background: rgba(13, 25, 21, 0.7);
    color: var(--alter-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}
.alter-plate-switch button:last-child { border-right: 0; }
.alter-plate-switch button span { color: var(--alter-copper); font-family: 'Courier New', monospace; }
.alter-plate-switch button.is-active { background: var(--alter-brass); color: #142018; font-weight: 700; }
.alter-plate-switch button.is-active span { color: #142018; }
.alter-card-flip-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px solid rgba(201, 167, 101, 0.22);
    background: transparent;
    color: var(--alter-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.alter-card-flip-trigger:hover { border-color: var(--alter-brass); color: var(--alter-brass-bright); background: rgba(201, 167, 101, 0.07); }
.alter-card-flip-trigger i { transition: transform 0.65s ease; }
.alter-game-card.is-flipped ~ .alter-plate-switch + .alter-card-flip-trigger i { transform: rotate(180deg); }

.alter-identity-panel { position: relative; }
.alter-identity-panel::before {
    content: '';
    position: absolute;
    top: -36px;
    left: 0;
    width: 74px;
    height: 2px;
    background: var(--alter-brass);
    box-shadow: 86px 0 0 rgba(201, 167, 101, 0.2);
}
.alter-kicker,
.alter-eyebrow {
    margin: 0;
    color: var(--alter-brass);
    font: 0.72rem/1.4 'Courier New', monospace;
    letter-spacing: 0.25em;
}
.alter-class-row { margin: 22px 0 12px; display: flex; gap: 12px; align-items: center; color: var(--alter-muted); font-size: 0.8rem; }
.alter-class-row span:first-child { padding: 5px 9px; border: 1px solid rgba(201, 167, 101, 0.36); color: var(--alter-brass-bright); }
.alter-identity-panel h1 {
    margin: 0;
    max-width: 760px;
    color: var(--alter-ivory);
    font-family: Georgia, 'Songti SC', 'SimSun', serif;
    font-size: clamp(3rem, 5.3vw, 6.2rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-shadow: none;
}
.alter-identity-panel h2 { margin: 24px 0 0; color: var(--alter-ivory); font-size: 1.25rem; letter-spacing: 0.18em; }
.alter-identity-panel h2 small { margin-left: 12px; color: var(--alter-muted); font: 0.68rem 'Courier New', monospace; letter-spacing: 0.16em; }
.alter-manifesto {
    margin: 34px 0;
    padding: 0 0 0 22px;
    border-left: 2px solid var(--alter-brass);
    color: #d9d2bf;
    font-family: 'Songti SC', 'SimSun', serif;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.75;
}

.alter-role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid rgba(201, 167, 101, 0.2); }
.alter-role-grid > div { padding: 18px 16px; border-right: 1px solid rgba(201, 167, 101, 0.18); }
.alter-role-grid > div:first-child { padding-left: 0; }
.alter-role-grid > div:last-child { border-right: 0; }
.alter-role-grid span { display: block; color: var(--alter-muted); font-size: 0.68rem; letter-spacing: 0.16em; }
.alter-role-grid strong { display: block; margin-top: 6px; color: var(--alter-ivory); font-size: 0.88rem; font-weight: 500; }

.alter-thesis { display: grid; grid-template-columns: 78px 1fr; gap: 22px; align-items: start; margin: 32px 0; }
.alter-thesis-number { padding-top: 4px; color: var(--alter-brass); font: 0.62rem/1.5 'Courier New', monospace; letter-spacing: 0.14em; }
.alter-thesis p { margin: 0; color: var(--alter-muted); line-height: 1.9; }
.alter-primary-link {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 13px 20px;
    border: 1px solid var(--alter-brass);
    color: var(--alter-brass-bright);
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    transition: background 0.2s ease, color 0.2s ease;
}
.alter-primary-link:hover { background: var(--alter-brass); color: var(--alter-ink); }

.alter-section { padding: 96px 0; border-top: 1px solid rgba(201, 167, 101, 0.18); }
.alter-section-heading { display: grid; grid-template-columns: 150px 1fr; gap: 42px; margin-bottom: 48px; }
.alter-section-heading > div:first-child { display: flex; gap: 14px; color: var(--alter-brass); }
.alter-section-heading > div:first-child span { font: 2.4rem/1 Georgia, serif; }
.alter-section-heading > div:first-child p { margin: 4px 0 0; color: var(--alter-muted); font-size: 0.72rem; letter-spacing: 0.14em; }
.alter-section-heading h2 { max-width: 850px; margin: 10px 0 0; color: var(--alter-ivory); font: 500 clamp(1.7rem, 3vw, 3rem)/1.25 Georgia, 'Songti SC', serif; letter-spacing: -0.02em; }

.alter-skill-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.alter-skill-card {
    grid-column: span 2;
    position: relative;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(201, 167, 101, 0.2);
    background: linear-gradient(145deg, rgba(19, 34, 28, 0.92), rgba(8, 18, 14, 0.96));
    box-sizing: border-box;
}
.alter-skill-card:nth-last-child(2):first-child,
.alter-skill-card:nth-last-child(2):first-child ~ .alter-skill-card { grid-column: span 3; }
.alter-skill-card:nth-child(4):nth-last-child(2),
.alter-skill-card:nth-child(5):last-child { grid-column: span 3; }
.alter-skill-orbit {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 167, 101, 0.18);
    border-radius: 50%;
}
.alter-skill-orbit::before { content: ''; width: 82px; height: 82px; border: 1px dashed rgba(201, 167, 101, 0.18); border-radius: 50%; }
.alter-skill-orbit span { position: absolute; color: rgba(240, 216, 154, 0.38); font: 0.75rem 'Courier New', monospace; }
.alter-skill-type { margin: 0 0 30px; color: var(--alter-brass); font: 0.68rem 'Courier New', monospace; letter-spacing: 0.2em; }
.alter-skill-card h3 { margin: 0 0 14px; color: var(--alter-ivory); font: 500 1.35rem Georgia, 'Songti SC', serif; }
.alter-skill-copy { margin: 0; color: var(--alter-muted); font-size: 0.9rem; line-height: 1.8; }
.alter-skill-origin {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(201, 167, 101, 0.2);
}
.alter-skill-origin span {
    display: block;
    margin-bottom: 9px;
    color: var(--alter-brass);
    font: 0.62rem 'Courier New', monospace;
    letter-spacing: 0.16em;
}
.alter-skill-origin p { margin: 0; color: #c3cdc6; font-size: 0.82rem; line-height: 1.72; }
.alter-skill-card:hover { border-color: rgba(240, 216, 154, 0.5); transform: translateY(-3px); transition: 0.25s ease; }

.alter-science-layout { display: grid; grid-template-columns: minmax(320px, 0.76fr) minmax(460px, 1.24fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.alter-archive-art {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(201, 167, 101, 0.38);
    background: #050906;
    color: var(--alter-ivory);
    cursor: zoom-in;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.38);
}
.alter-archive-art img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: contain; object-position: center; background: #050906; transition: transform 0.65s ease; }
.alter-archive-art:hover img { transform: scale(1.025); }
.alter-archive-art > span { position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 11px 14px; background: rgba(7, 16, 13, 0.82); border: 1px solid rgba(201, 167, 101, 0.28); font-size: 0.72rem; letter-spacing: 0.12em; backdrop-filter: blur(8px); }
.alter-achievement-list { border-top: 1px solid rgba(201, 167, 101, 0.22); }
.alter-achievement-list article { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid rgba(201, 167, 101, 0.18); }
.alter-achievement-list article > span { color: var(--alter-brass); font: 1rem 'Courier New', monospace; }
.alter-achievement-list h3 { margin: 0 0 9px; color: var(--alter-ivory); font: 500 1.2rem Georgia, 'Songti SC', serif; }
.alter-achievement-list p { margin: 0; color: var(--alter-muted); line-height: 1.8; }

.alter-footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 42px 0 92px; border-top: 1px solid rgba(201, 167, 101, 0.2); }
.alter-footer > div { display: grid; gap: 8px; }
.alter-footer span { color: var(--alter-muted); font: 0.65rem 'Courier New', monospace; letter-spacing: 0.16em; }
.alter-footer strong { color: var(--alter-ivory); font: 500 1.05rem Georgia, 'Songti SC', serif; }
body.alter-theme-active .alter-worship-btn {
    width: auto;
    min-width: 240px;
    border: 1px solid var(--alter-brass);
    border-radius: 0;
    background: transparent;
    color: var(--alter-brass-bright);
    box-shadow: none;
}
body.alter-theme-active .alter-worship-btn:hover { background: var(--alter-brass); color: var(--alter-ink); transform: none; box-shadow: none; }

body.alter-theme-active .dim-label {
    border-color: var(--alter-brass);
    background: rgba(7, 16, 13, 0.94);
    color: var(--alter-brass-bright);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
body.alter-theme-active .dim-checkbox:checked + .dim-label {
    border-color: var(--alter-brass);
    background: var(--alter-brass);
    color: var(--alter-ink);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
body.alter-theme-active .dim-checkbox:checked + .dim-label .icon-alter { color: var(--alter-ink); }

@media (max-width: 1050px) {
    .alter-topbar { grid-template-columns: 1fr auto; }
    .alter-topbar-meta { display: none; }
    .alter-hero-shell { grid-template-columns: minmax(320px, 0.9fr) minmax(390px, 1.1fr); gap: 48px; }
    .alter-role-grid { grid-template-columns: repeat(2, 1fr); }
    .alter-role-grid > div:nth-child(2) { border-right: 0; }
    .alter-role-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(201, 167, 101, 0.18); }
    .alter-skill-card { grid-column: span 3; }
}

@media (max-width: 760px) {
    .alter-gate-plaque-half {
        width: min(45vw, 30.66vh);
        height: min(135vw, 92vh);
    }
    .alter-gate-rings { width: min(190px, 49vw); height: min(190px, 49vw); }
    .alter-gate-lock strong,
    .alter-gate-lock small { transform: translateY(clamp(48px, 8vh, 72px)); }
    .alter-gate-panel { inset: 18px; }
    .alter-gate-leaf::after { inset: 9px; }
    .alter-topbar { min-height: 62px; padding: 0 18px; }
    .alter-brand small { display: none; }
    .alter-topbar-actions { gap: 10px; }
    .alter-battle-btn { min-height: 34px; padding: 0 10px; font-size: 0.7rem; }
    .alter-return-btn { font-size: 0; }
    .alter-return-btn i { font-size: 1rem; }
    .alter-hero-shell,
    .alter-section,
    .alter-footer { width: min(100% - 32px, 560px); }
    .alter-hero-shell { display: flex; min-height: 0; flex-direction: column; gap: 62px; padding: 28px 0 70px; }
    .alter-art-column { width: 100%; }
    .alter-game-card { max-height: none; }
    .alter-art-frame { max-height: none; }
    .alter-identity-panel::before { top: -28px; }
    .alter-identity-panel h1 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
    .alter-identity-panel h2 { display: grid; gap: 8px; }
    .alter-identity-panel h2 small { margin-left: 0; }
    .alter-manifesto { margin: 26px 0; }
    .alter-role-grid { grid-template-columns: repeat(2, 1fr); }
    .alter-role-grid > div { padding: 15px 10px; }
    .alter-role-grid > div:first-child { padding-left: 10px; }
    .alter-thesis { grid-template-columns: 58px 1fr; gap: 14px; }
    .alter-section { padding: 68px 0; }
    .alter-section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 34px; }
    .alter-skill-grid { grid-template-columns: 1fr; }
    .alter-skill-card { grid-column: auto; min-height: 210px; }
    .alter-skill-card:nth-child(4):nth-last-child(2),
    .alter-skill-card:nth-child(5):last-child { grid-column: auto; }
    .alter-science-layout { grid-template-columns: 1fr; gap: 42px; }
    .alter-archive-art { width: min(100%, 460px); margin-inline: auto; }
    .alter-achievement-list article { grid-template-columns: 48px 1fr; gap: 10px; }
    .alter-footer { flex-direction: column; align-items: stretch; padding-bottom: 110px; }
    body.alter-theme-active .alter-worship-btn { width: 100%; min-width: 0; }
    .dimensional-switch-container { right: 14px; bottom: 14px; transform: none; }
    .dim-label {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        box-sizing: border-box;
    }
    .dim-label .dim-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .alter-gate-leaf,
    .alter-gate-lock,
    .alter-gate-axis,
    .alter-plate,
    .alter-archive-art img { transition-duration: 0.01ms !important; }
    .alter-gate-rings i { animation: none !important; }
    body.alter-entered .alter-topbar,
    body.alter-entered .alter-hero-shell,
    body.alter-entered .alter-section,
    body.alter-entered .alter-footer { animation-duration: 0.01ms !important; }
}