/* 约定之日 - 1920px 设计稿 */
:root {
    --canvas-w: 1920px;
    --canvas-h: 1080px;
    --canvas-scale: 1;
    --header-scale: 1;
    --app-vw: 100vw;
    --app-vh: 100vh;
    --header-h: 110px;
    --header-pad-left: 50px;
    --header-pad-right: 50px;
    --color-gold: #d7b36a;
    --c-primary: #e8a045;
    --c-primary-dark: #c8842a;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    color: #3b2f24;
    background: #000;
}

/* 首页全屏滚动：仅非子页锁定 overflow */
html:not(.subpage-root),
html:not(.subpage-root) body {
    height: 100%;
    overflow: hidden;
}

html.subpage-root,
html.subpage-root body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

img { display: block; max-width: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ========== 1920 容器 ========== */
.container {
    position: relative;
    width: var(--canvas-w);
    height: var(--canvas-h);
    margin: 0 auto;
}

/* ========== 滚动区 ========== */
.scroll-container {
    width: 100%;
    height: var(--app-vh);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar { display: none; }

.scroll-container.modal-open {
    pointer-events: none;
}

/* ========== 区块 ========== */
.section {
    position: relative;
    width: 100%;
    height: var(--app-vh);
    min-height: 0;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.section-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
}

.hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 超宽屏：背景铺满网页可用区域 */
@media (min-width: 1921px) {
    .section-bg {
        background-size: max(var(--app-vw), calc(var(--app-vh) * 1920 / 1080)) max(calc(var(--app-vw) * 1080 / 1920), var(--app-vh));
    }
}

/* ========== 顶栏（1920 内居中） ========== */
.site-header {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 900;
    width: var(--canvas-w);
    height: var(--header-h);
    margin-left: calc(var(--canvas-w) / -2);
    display: flex;
    align-items: center;
    padding: 0 var(--header-pad-right) 0 var(--header-pad-left);
    background: rgb(24 21 37 / 78%);    
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.site-header-logo {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
}

.site-header-logo img {
    width: 215px;
    height: 61px;
    object-fit: contain;
}

.site-header-logo img.logo-home {
    width: 215px;
    height: 61px;
    object-fit: contain;
    margin-left: 30px;
}

body:not([data-section="0"]) .site-header-logo img:not(.logo-home) {
    width: auto;
    height: var(--header-h);
}

.site-header-logo img.logo-section-title {
    width: auto;
    height: var(--header-h);
    max-width: 400px;
    object-fit: contain;
    object-position: left center;
}

.site-header-section {
    flex-shrink: 0;
    min-width: 120px;
    margin-left: 22px;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.1;
}

.site-header-section span {
    display: block;
}

.site-header-section small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    line-height: 1;
}

body[data-section="0"] .site-header-section { visibility: hidden; }

body[data-section-label="帝兰秘传"] .site-header-section { display: none; }

.site-top-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(24px, 4vw, 80px);
    margin-left: auto;
    height: 100%;
    flex-shrink: 1;
    min-width: 0;
}

.site-top-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 100%;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(16px, 1.35vw, 26px);
    font-weight: 500;
    line-height: 1.16;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.site-top-nav-item:hover,
.site-top-nav-item.active { color: #fff; }

.site-top-nav-label {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.site-top-nav-label small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
}

.site-top-nav-item.active .site-top-nav-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 3px;
    background: var(--color-gold);
}

.site-header-actions {
    display: flex;
    align-items: center;
    margin-left: 50px;
    height: 100%;
}

.site-login-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}

.site-login-btn:hover { color: #fff; }

.btn-login-img {
    width: 22px;
    height: 23px;
    object-fit: contain;
}

.btn-login-text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 13px;
}

.user-pill .logout-btn {
    cursor: pointer;
    opacity: .75;
    font-size: 12px;
}

.user-pill .logout-btn:hover { opacity: 1; }

.site-side-nav {
    position: fixed;
    left: 50%;
    z-index: 850;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 220px;
    margin-left: calc(var(--canvas-w) / -2 + 70px);
    top: 50%;
    margin-top: -220px;
    padding: 0;
    background: transparent;
    border: 0;
    overflow: visible;
}

body[data-section="0"] .site-side-nav,
body[data-on-footer="1"] .site-side-nav { display: none; }

/* 魔女档案屏：左侧导航黑色文字 */
body[data-section-label="魔女档案"] .site-side-nav .side-nav-item {
    color: #1d2433;
    text-shadow: none;
}

body[data-section-label="魔女档案"] .site-side-nav .side-nav-item:hover:not(.active) {
    color: #2f3a52;
}

body[data-section-label="魔女档案"] .site-side-nav .side-nav-item.active {
    color: #3b5cff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

body[data-section-label="魔女档案"] .site-side-nav .side-nav-item::before {
    background: #6e9bff;
}

/* 帝兰秘传屏：左侧导航黑色文字 */
body[data-section-label="帝兰秘传"] .site-side-nav .side-nav-item {
    color: #1d2433;
    text-shadow: none;
}

body[data-section-label="帝兰秘传"] .site-side-nav .side-nav-item:hover:not(.active) {
    color: #2f3a52;
}

body[data-section-label="帝兰秘传"] .site-side-nav .side-nav-item.active {
    color: #3b5cff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

body[data-section-label="帝兰秘传"] .site-side-nav .side-nav-item::before {
    background: #6e9bff;
}

/* 游戏特色屏：浅色背景，左侧导航改深色文字 */
body[data-section-label="游戏特色"] .site-side-nav .side-nav-item {
    color: #1d2433;
    text-shadow: none;
}

body[data-section-label="游戏特色"] .site-side-nav .side-nav-item:hover:not(.active) {
    color: #2f3a52;
}

body[data-section-label="游戏特色"] .site-side-nav .side-nav-item.active {
    color: #3b5cff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

body[data-section-label="游戏特色"] .site-side-nav .side-nav-item::before {
    background: #6e9bff;
}

.site-side-nav .side-nav-item {
    position: relative;
    min-height: 40px;
    padding: 0 0 0 76px;
    color: #fff;
    font-size: 25px;
    font-weight: 400;
    line-height: 40px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .22);
    cursor: pointer;
    user-select: none;
    background: transparent;
}

.site-side-nav .side-nav-item:hover:not(.active) {
    color: rgba(255, 255, 255, .92);
}

.site-side-nav .side-nav-item.active {
    color: #3b5cff;
    font-size: 25px;
    font-weight: 500;
    min-height: 75px;
    line-height: 75px;
}

.site-side-nav .side-nav-item::before {
    content: "";
    position: absolute;
    left: 36px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: #6e9bff;
    clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
}

.site-side-nav .side-nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 250px;
    height: 75px;
    margin-top: -37px;
    background: url('/web/img/assets/reward/badge-active.png') left center / 250px 75px no-repeat;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.site-side-nav .side-nav-item.active::before { display: none; }
.site-side-nav .side-nav-item.active::after { opacity: 1; }

.music-float {
    position: fixed;
    right: 0;
    bottom: 86px;
    z-index: 1200;
    width: 86px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 14px;
    border: 0;
    border-radius: 36px 0 0 36px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 24px rgba(52, 73, 142, .22);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.music-float.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.music-float-icon {
    width: 52px;
    height: 52px;
    display: block;
    overflow: visible;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

.music-float-icon circle {
    fill: #5d77dc;
}

.music-float-icon path {
    fill: #fff;
}

.music-float.playing .music-float-icon {
    animation: spinMusic 4s linear infinite;
}

.music-float.paused .music-float-icon {
    animation-play-state: paused;
    opacity: .62;
}

@keyframes spinMusic {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== 首屏 Hero（1920×1080 像素定位） ========== */
.hero-section .section-bg {
    background-image: url('/web/img/assets/home/bg.png');
}

.hero-container {
    z-index: 1;
}

/* slogan.png 1217×171，水平居中，距底 298px */
.hero-slogan {
    position: absolute;
    left: 352px;
    top: 611px;
    width: 1217px;
    height: 171px;
}

.hero-slogan img {
    width: 1217px;
    height: 171px;
    filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .28));
}

/* 下载区：250 + 18 + 301 + 18 + 127 = 714，水平居中 */
.hero-download {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-download > * {
    pointer-events: auto;
}

.hero-qrcode {
    position: absolute;
    left: 603px;
    bottom: 30px;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 10px 22px rgba(18, 28, 58, .28));
}

.hero-qrcode-frame {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #6b8cff 0%, #9b7fd9 48%, #5eb0e8 100%);
    pointer-events: none;
}

.hero-qrcode-frame::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero-qrcode-frame::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35);
}

.hero-qrcode-img {
    position: relative;
    z-index: 1;
    width: 236px;
    height: 236px;
    object-fit: contain;
    border-radius: 10px;
}

.hero-store-btns {
    position: absolute;
    left: 871px;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-store-btns a img {
    width: 301px;
    height: 89px;
}

.hero-play-btn {
    position: absolute;
    left: 1190px;
    bottom: 50px;
    padding: 0;
}

.hero-play-btn img {
    width: 127px;
    height: 128px;
}

.hero-play-btn:hover { opacity: .88; }

.hero-slogan-text { display: none; }

.hero-reserve-bar {
    position: absolute;
    left: 50%;
    top: 920px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.hero-reserve-bar .reserve-count {
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.hero-reserve-bar .reserve-count strong {
    color: #ffd27a;
    font-size: 18px;
}

.hero-reserve-bar .btn-reserve-img {
    width: auto;
    height: 56px;
    padding: 0;
    cursor: pointer;
    transition: transform .2s;
}

.hero-reserve-bar .btn-reserve-img:hover {
    transform: scale(1.04);
}

.hero-reserve-bar .btn-reserve-img:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.hero-reserve-bar .btn-reserve-img img {
    height: 56px;
    width: auto;
}

/* ========== 第二屏：预约奖励（1920×1080 像素定位） ========== */
.reward-section .section-bg {
    background-image: url('/web/img/assets/reward/bg.png');
}

.reward-container {
    z-index: 1;
}

.reward-layout {
    position: absolute;
    left: 727px;
    top: 158px;
    width: 1014px;
}

.reward-section-title {
    display: block;
    width: 250px;
    height: 118px;
    margin: 0 auto 12px;
}

.reward-panel {
    position: relative;
    width: 1014px;
    height: 669px;
}

.reward-board {
    position: absolute;
    left: 0;
    top: 0;
    width: 1014px;
    height: 669px;
    background: url('/web/img/assets/reward/character.png') center / 100% 100% no-repeat;
}

.rewards-grid {
    position: absolute;
    left: 0;
    top: 0;
    width: 1014px;
    height: 669px;
}

.reward-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 1014px;
    height: 669px;
    pointer-events: none;
}

.reward-badge,
.reward-name { display: none; }

.reward-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reward-slot-0 .reward-icon {
    left: 216px;
    top: 351px;
    width: 147px;
    height: 97px;
}

.reward-slot-1 .reward-icon {
    left: 502px;
    top: 257px;
    width: 112px;
    height: 74px;
}

.reward-slot-2 .reward-icon {
    left: 742px;
    top: 253px;
    width: 112px;
    height: 74px;
}

.reward-slot-3 .reward-icon {
    left: 506px;
    top: 474px;
    width: 112px;
    height: 74px;
}

.reward-slot-4 .reward-icon {
    left: 746px;
    top: 470px;
    width: 112px;
    height: 74px;
}

.reward-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .25s, opacity .25s;
}

.reward-icon-mask {
    position: absolute;
    inset: 0;
    background: rgba(18, 22, 38, .62);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}

.reward-item.locked .reward-icon-mask {
    opacity: 1;
}

.reward-item.achieved .reward-icon-mask {
    opacity: 0;
}

.reward-item.locked .reward-icon img {
    opacity: .72;
    filter: grayscale(.25);
}

.reward-item.achieved .reward-icon img {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 210, 90, .65));
}

.reward-action {
    position: absolute;
    left: 303px;
    top: 644px;
    width: 508px;
    height: 90px;
    z-index: 3;
    pointer-events: auto;
}

.reward-action .btn-reserve-img {
    width: 508px;
    height: 90px;
    padding: 0;
    cursor: pointer;
}

.reward-action .btn-reserve-img:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.reward-action .btn-reserve-img img {
    width: 508px;
    height: 90px;
}

/* ========== 帝兰秘传（1920×1080 像素定位） ========== */
.legend-section .section-bg {
    background-image: url('/web/img/assets/legend/bg.png');
}

.legend-container {
    z-index: 1;
}

/* 1224 = 830 + 70 + 526，垂直居中 */
.legend-layout {
    position: absolute;
    left: 348px;
    top: 260px;
    width: 1224px;
    display: flex;
    align-items: stretch;
    gap: 70px;
}

.legend-banner-frame {
    --frame-w: 830px;
    --frame-h: 559px;
    --frame-top: 10px;
    --gray-left: calc(var(--frame-w) * 12 / 922);
    --gray-width: calc(var(--frame-w) * 910 / 922);
    --gray-height: calc(var(--frame-h) * 603 / 621);
    --gray-radius: calc(56px * var(--frame-w) / 922);
    position: relative;
    width: var(--frame-w);
    height: calc(var(--frame-h) + var(--frame-top));
    flex-shrink: 0;
}

.legend-banner-frame::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--frame-top);
    width: var(--frame-w);
    height: var(--frame-h);
    background: url('/web/img/assets/legend/frame.png') center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}

.legend-banner-slides {
    position: absolute;
    left: var(--gray-left);
    top: var(--frame-top);
    width: var(--gray-width);
    height: var(--gray-height);
    overflow: hidden;
    border-radius: 0 0 var(--gray-radius) 0;
    z-index: 1;
}

.legend-banner-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.legend-banner-slide.active {
    display: block;
}

.legend-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.legend-banner-dots {
    position: absolute;
    left: var(--gray-left);
    top: calc(var(--frame-top) + var(--gray-height) - 24px);
    width: var(--gray-width);
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}

.legend-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    padding: 0;
}

.legend-banner-dot.active {
    width: 22px;
    border-radius: 4px;
    background: #e8a045;
}

.legend-news-panel {
    width: 526px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 0 0;
    background: transparent;
    min-height: calc(559px + 10px);
}

.legend-news-panel::before {
    content: "NEWS";
    display: block;
    margin-bottom: 4px;
    color: #1d2a42;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.legend-news-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #787E99;
    background: none;
}

.legend-news-tab {
    position: relative;
    z-index: 1;
    padding: 0 0 11px;
    font-size: 15px;
    font-weight: 700;
    color: #21314d;
    background: transparent;
    cursor: pointer;
    border: none;
}

.legend-news-tab.active {
    color: #21314d;
}

.legend-news-tab-indicator {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    background: #5682E1;
    pointer-events: none;
    z-index: 2;
    transition: left .28s ease, width .28s ease;
}

.legend-news-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.legend-news-list {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.legend-news-list.active {
    display: flex;
}

.legend-news-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 6px;
    border-bottom: 1px solid rgba(38, 55, 84, .18);
    color: inherit;
    transition: .2s;
}

.legend-news-item:hover {
    background: rgba(232, 160, 69, .08);
    padding-left: 10px;
}

.legend-news-tag {
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
    font-weight: 500;
}

.legend-news-tag.tag-news {
    background: rgba(115, 150, 232, .2);
    color: #3d66c8;
}

.legend-news-tag.tag-notice {
    background: rgba(232, 160, 69, .2);
    color: #b8741a;
}

.legend-news-tag.tag-event {
    background: rgba(155, 127, 217, .22);
    color: #7a55c4;
}

.legend-news-tag.tag-default {
    background: rgba(120, 130, 150, .16);
    color: #5a6478;
}

.legend-news-title {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legend-news-date {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
}

.legend-news-more {
    margin-top: 12px;
    text-align: right;
    flex-shrink: 0;
}

.legend-news-more a {
    display: inline-block;
    min-width: 136px;
    padding: 7px 16px;
    background: #7396e8;
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.legend-news-empty {
    text-align: center;
    color: #999;
    padding: 40px 0;
    font-size: 14px;
}

/* ========== 魔女档案（1920×1080 像素定位） ========== */
@keyframes characterFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.archive-section .section-bg {
    background-image: url('/web/img/assets/archive/bg.jpg');
}

.archive-container {
    z-index: 1;
}

/* 1180 = 472 + 24 + 684，整体垂直居中 */
.archive-layout {
    --archive-w: 1180px;
    --archive-left: 370px;
    --archive-top: 225px;
    --portrait-w: 472px;
    --portrait-h: 631px;
    position: absolute;
    left: var(--archive-left);
    top: var(--archive-top);
    width: var(--archive-w);
    height: var(--portrait-h);
    display: grid;
    grid-template-columns: var(--portrait-w) 684px;
    gap: 24px;
    align-items: stretch;
}

.archive-portrait-wrap {
    position: relative;
    width: var(--portrait-w);
    height: var(--portrait-h);
    padding: 26px 28px 33px 33px;
    box-sizing: border-box;
    background: url('/web/img/assets/archive/avatar-frame.png') center / 100% 100% no-repeat;
}

.archive-portrait-wrap .character-float-wrap {
    width: 100%;
    height: 100%;
    animation: characterFloat 3.2s ease-in-out infinite;
}

.archive-portrait-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: opacity .3s, transform .3s;
}

.archive-portrait-wrap img.switching {
    opacity: 0;
    transform: scale(.96);
}

.archive-info-panel {
    width: 684px;
    height: var(--portrait-h);
    padding: 10px 0 0;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.archive-panel-title img {
    display: block;
    width: 360px;
    height: auto;
}

.archive-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 420px;
    margin-top: 18px;
}

.archive-meta-item {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: baseline;
    font-size: 15px;
    line-height: 1.6;
}

.archive-meta-label::after {
    content: "：";
}

.archive-meta-label {
    color: #273142;
    font-weight: 700;
}

.archive-meta-value {
    color: #273142;
    font-weight: 700;
}

.archive-desc-label {
    margin-top: 18px;
    color: #273142;
    font-size: 15px;
    font-weight: 700;
}

.archive-desc-label::after {
    content: "：";
}

.archive-desc {
    flex: 1;
    min-height: 0;
    max-height: none;
    margin-top: 8px;
    overflow-y: auto;
    color: #384356;
    font-size: 15px;
    line-height: 1.85;
    text-indent: 2em;
}

.archive-skill-section {
    display: none;
}

.archive-skill-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.archive-skill-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    padding: 10px;
    background: url('/web/img/assets/archive/skill-tab.png') center / 100% 100% no-repeat;
    cursor: pointer;
}

.archive-skill-tab.active {
    width: 94px;
    height: 94px;
    background-image: url('/web/img/assets/archive/skill-tab-active.png');
}

.archive-skill-tab img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.archive-skill-tab-name {
    font-size: 12px;
    font-weight: 600;
    color: #5c4a36;
}

.archive-skill-detail {
    margin-top: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, .65);
    border-radius: 8px;
    overflow-y: auto;
}

.archive-skill-type {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #c8842a, #e8a045);
    color: #fff;
    font-size: 11px;
}

.archive-skill-name {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
}

.archive-skill-desc {
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.archive-nav {
    position: relative;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.archive-nav-arrow {
    width: 31px;
    height: 41px;
    flex-shrink: 0;
    background: url('/web/img/assets/archive/arrow.png') center / contain no-repeat;
    transform: scaleX(-1);
    opacity: .85;
}

.archive-nav-arrow:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.archive-nav-arrow.next {
    transform: none;
}

.archive-avatars {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

/* 头像框：边框作背景，头像为透明 PNG 叠在中心内区 */
.archive-avatar {
    position: relative;
    width: 78px;
    height: 78px;
    padding: 0;
    border: none;
    background: url('/web/img/assets/archive/skill-tab.png') center / 100% 100% no-repeat;
    cursor: pointer;
    flex-shrink: 0;
    transition: width .25s, height .25s;
}

.archive-avatar-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60.9%;
    height: 62.7%;
    transform: translate(-50%, -50%);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.archive-avatar.active {
    width: 100px;
    height: 102px;
    background-image: url('/web/img/assets/archive/skill-tab-active.png');
}

.archive-avatar.active .archive-avatar-photo {
    width: 60.2%;
    height: 60%;
}

.archive-avatar:not(.active) .archive-avatar-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 48, 98, .58);
    pointer-events: none;
}

.archive-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.archive-avatar-placeholder,
.archive-skill-tab-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(115, 150, 232, .22);
    color: #3d5a9e;
    font-size: 14px;
    font-weight: 700;
}

.archive-empty,
.archive-skill-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
    text-align: center;
}

.archive-block-label {
    margin-bottom: 8px;
    color: #273142;
    font-size: 15px;
    font-weight: 700;
}

/* ========== 游戏特色（1920×1080 像素定位） ========== */
.features-section .section-bg {
    background-image: url('/web/img/assets/features/bg.jpg');
}

.features-container {
    z-index: 1;
}

/* 1209 = 64 + 23 + 1035 + 23 + 64；水平居中于扣除左侧导航(320px)后的区域，垂直居中于内容区 */
.features-carousel {
    position: absolute;
    left: 516px;
    top: 276px;
    width: 1209px;
}

.features-carousel-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
}

.features-slide-frame {
    width: 1035px;
    height: 602px;
    padding: 29px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: url('/web/img/assets/features/frame.png') center / 100% 100% no-repeat;
}

.features-slide-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.features-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s;
}

.features-slide.active {
    opacity: 1;
    z-index: 1;
}

.features-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.features-arrow {
    width: 64px;
    height: 85px;
    flex-shrink: 0;
    background: url('/web/img/assets/features/arrow.png') center / contain no-repeat;
    opacity: .88;
    transition: opacity .2s, transform .2s;
}

.features-arrow:hover {
    opacity: 1;
    transform: scale(1.06);
}

.features-arrow.next {
    transform: scaleX(-1);
}

.features-arrow.next:hover {
    transform: scaleX(-1) scale(1.06);
}

.features-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 23px;
}

.features-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(55, 65, 90, .35);
    cursor: pointer;
    transition: width .25s, background .25s;
}

.features-dot.active {
    width: 24px;
    border-radius: 5px;
    background: #5682e1;
}

/* ========== 画布缩放层（背景不缩放，仅容器） ========== */
.canvas-scaler {
    position: relative;
    z-index: 1;
    width: calc(var(--canvas-w) * var(--canvas-scale));
    height: calc(var(--canvas-h) * var(--canvas-scale));
    flex-shrink: 0;
    overflow: hidden;
}

.canvas-scaler > .container {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--canvas-w);
    height: var(--canvas-h);
    margin: 0;
    transform: scale(var(--canvas-scale));
    transform-origin: top left;
}

.site-header {
    transform: scale(var(--header-scale));
    transform-origin: top center;
}

.site-side-nav {
    transform: scale(var(--canvas-scale));
    transform-origin: left center;
    margin-left: calc(var(--canvas-w) / -2 + 70px * var(--canvas-scale));
    margin-top: calc(-220px * var(--canvas-scale));
}

/* 超宽屏：顶栏背景铺满视口，内容区仍按 1920 居中；侧栏贴左 */
@media (min-width: 1921px) {
    .site-header {
        left: 0;
        width: 100vw;
        margin-left: 0;
        padding-left: calc((var(--app-vw) - var(--canvas-w)) / 2 + var(--header-pad-left));
        padding-right: calc((var(--app-vw) - var(--canvas-w)) / 2 + var(--header-pad-right));
        transform: none;
    }

    .site-side-nav {
        left: 70px;
        margin-left: 0;
    }
}

/* ========== 页脚（1920×1080 画布，纯黑底） ========== */
.site-footer-section {
    background: #000;
}

.site-footer-section .section-bg {
    background: #000;
}

.footer-container {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-container .site-footer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 36px;
}

.site-footer-logo img {
    width: 280px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.site-footer-social,
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.site-footer-social-link,
.site-footer-link {
    min-width: 148px;
    padding: 12px 32px;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    transition: border-color .2s, color .2s;
}

.site-footer-social-link:hover,
.site-footer-link:hover {
    border-color: #fff;
    color: #fff;
}

.site-footer-text {
    width: 100%;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 2;
}

.site-footer-text p {
    margin: 0;
}

.site-footer-text .site-footer-age {
    color: rgba(255, 255, 255, .88);
}

.site-footer-text a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

.site-footer-text a:hover {
    color: #fff;
}

/* ========== 登录 / 预约弹窗 ========== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .6);
    justify-content: center;
    align-items: center;
}

.modal-overlay.show { display: flex; }

.login-modal-box {
    position: relative;
    width: min(620px, 86vw);
    aspect-ratio: 762 / 561;
    padding: 0;
    background: url('/web/img/assets/login/modal-bg.png') center / 100% 100% no-repeat;
    border: none;
    box-shadow: none;
}

.login-modal-close {
    position: absolute;
    top: clamp(14px, 2.6vw, 22px);
    right: clamp(14px, 2.6vw, 22px);
    z-index: 3;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #8a8a8a;
    cursor: pointer;
}

.login-modal-inner {
    position: absolute;
    left: 50%;
    top: 15%;
    width: min(367px, 76%);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-welcome {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--c-primary-dark);
    text-align: center;
}

.login-modal-title {
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2b2b2b;
    text-align: center;
    line-height: 1.2;
}

.login-modal-divider {
    position: relative;
    width: 305px;
    max-width: 100%;
    height: 14px;
    margin: 0 auto 16px;
}

.login-modal-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, #d8d8d8 18%, #d8d8d8 82%, transparent);
}

.login-modal-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #c8c8c8;
    border: 1px solid #d8d8d8;
}

.login-form { width: 100%; }

.login-field {
    position: relative;
    width: 100%;
    height: 56px;
    margin-bottom: 14px;
    background: #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}

.login-field.code-field {
    width: 248px;
    max-width: 100%;
    margin-bottom: 0;
}

.login-field input {
    width: 100%;
    height: 100%;
    padding: 0 18px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: #333;
}

.login-field input::placeholder { color: #b0b0b0; }

.login-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 14px;
}

.btn-sms-wrap {
    position: relative;
    flex-shrink: 0;
    min-width: 96px;
    padding: 4px 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1.4;
}

.btn-sms-wrap.disabled { opacity: .5; pointer-events: none; }

.btn-sms-text {
    font-size: 17px;
    font-weight: 500;
    color: var(--c-primary-dark);
    white-space: nowrap;
}

.btn-sms-wrap:hover .btn-sms-text { color: var(--c-primary); }

.btn-sms-countdown {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #888;
    background: rgba(255, 255, 255, .85);
    border-radius: 4px;
}

.btn-sms-wrap.disabled .btn-sms-text { visibility: hidden; }

.btn-sms-wrap.disabled .btn-sms-countdown { display: flex; }

.btn-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    margin: 6px auto 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #f59a4f 0%, #f08030 100%);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer;
    transition: filter .2s, transform .15s;
}

.btn-login-submit:hover { filter: brightness(1.05); }

.btn-login-submit:active { transform: scale(.98); }

.btn-login-submit:disabled {
    opacity: .6;
    cursor: wait;
    filter: none;
    transform: none;
}

.login-agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
}

.login-agreement-check {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    accent-color: var(--c-primary);
    cursor: pointer;
}

.login-agreement-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.6;
    color: #888;
    cursor: pointer;
}

.login-agreement-text a {
    color: var(--c-primary-dark);
    text-decoration: none;
}

.login-agreement-text a:hover {
    color: var(--c-primary);
    text-decoration: underline;
}

.device-option.selected {
    border-color: var(--c-primary) !important;
    background: rgba(232, 160, 69, .08);
}

.notification-close { cursor: pointer; opacity: .5; margin-left: auto; }

.notification-close:hover { opacity: 1; }

.notification-content { flex: 1; }

.notification-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }

.notification-message { font-size: 13px; color: #666; }

.captcha-modal-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    width: 400px;
    max-width: 92vw;
}

.captcha-modal-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
    text-align: center;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.captcha-modal-box .captcha-field {
    flex: 1;
    min-width: 0;
    height: 44px;
    margin-bottom: 0;
}

.captcha-modal-box .captcha-field input {
    font-size: 15px;
    padding: 0 14px;
}

.captcha-img-wrap {
    flex-shrink: 0;
    cursor: pointer;
    line-height: 0;
}

.captcha-img-wrap img {
    height: 44px;
    width: auto;
    border-radius: 4px;
    display: block;
}

.captcha-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.captcha-btn-cancel,
.captcha-btn-confirm {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.captcha-btn-cancel {
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
}

.captcha-btn-confirm {
    border: none;
    background: linear-gradient(135deg, #c8842a, #e8a045);
    color: #fff;
}

.device-modal-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    width: 420px;
    max-width: 92vw;
}

.confirm-modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px;
    width: 360px;
    max-width: 92vw;
    text-align: center;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 4000;
    padding: 14px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(120%);
    transition: transform .3s;
    max-width: 360px;
}

.notification.show { transform: translateX(0); }

.notification.success .notification-icon { color: #52c41a; }

.notification.error .notification-icon { color: #f5576c; }

.scroll-hint {
    position: fixed;
    bottom: 24px;
    left: calc(50% + var(--side-nav-w) / 2);
    transform: translateX(-50%);
    z-index: 700;
    cursor: pointer;
    animation: bounceHint 2s infinite;
    opacity: .7;
}

.scroll-hint.hidden { opacity: 0; pointer-events: none; }

@keyframes bounceHint {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

.scroll-hint svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

/* ========== 子页面：文章列表 / 详情 / 协议 ========== */
.subpage-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
    overflow: auto;
    background: #0a1018;
    color: #3b2f24;
}

.subpage-body--legend {
    background: #0a1018 url('/web/img/assets/legend/bg.png') center top / cover no-repeat fixed;
}

.subpage-header {
    position: sticky;
    top: 0;
    z-index: 900;
    left: auto;
    width: 100%;
    height: var(--header-h);
    margin-left: 0;
    padding: 0 clamp(20px, 4vw, 50px);
    transform: none;
    background: rgb(24 21 37 / 78%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.subpage-header .site-header-logo img.logo-home {
    width: 215px;
    height: 61px;
}

.subpage-header .site-header-logo img.logo-section-title {
    width: auto;
    height: var(--header-h);
    max-width: 400px;
    object-fit: contain;
    object-position: left center;
}

.subpage-header-actions {
    margin-left: auto;
}

.subpage-back-link {
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    white-space: nowrap;
    transition: color .2s;
}

.subpage-back-link:hover {
    color: #fff;
}

.subpage-main {
    flex: 1;
    width: min(920px, calc(100% - 48px));
    margin: 0 auto;
    padding: 40px 0 56px;
}

.subpage-panel {
    /* background: rgba(255, 252, 246, .96); */
    border-radius: 12px;
    padding: 32px 36px 40px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
}

.articles-panel-head {
    margin-bottom: 18px;
}

.articles-panel-title {
    color: #1d2a42;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.articles-panel-subtitle {
    margin-top: 6px;
    color: #21314d;
    font-size: 16px;
    font-weight: 700;
}

.articles-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 8px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(31, 46, 71, .36);
}

.articles-tabs .legend-news-tab {
    display: inline-block;
    padding: 0;
    background: transparent !important;
    color: #21314d;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0;
}

.articles-tabs .legend-news-tab.active {
    color: #c8842a;
}

.articles-list {
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

.articles-item {
    min-height: 52px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(38, 55, 84, .18);
}

.articles-item:hover {
    background: rgba(232, 160, 69, .08);
    padding-left: 10px;
}

.articles-empty {
    padding: 64px 0;
    text-align: center;
    color: #999;
    font-size: 15px;
}

.articles-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(38, 55, 84, .12);
}

.articles-page-btn,
.articles-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    color: #21314d;
    background: rgba(115, 150, 232, .12);
    transition: .2s;
}

.articles-page-btn:hover,
.articles-page-num:hover {
    background: #7396e8;
    color: #fff;
}

.articles-page-btn.disabled {
    opacity: .4;
    pointer-events: none;
}

.articles-page-num.active {
    background: linear-gradient(135deg, #c8842a, #e8a045);
    color: #fff;
}

.articles-page-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.article-detail-panel {
    padding: 36px 40px 48px;
}

.article-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #666;
}

.article-detail-title {
    margin-bottom: 12px;
    color: #1d2a42;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.35;
}

.article-detail-subtitle {
    margin-bottom: 20px;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

.article-detail-cover {
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.article-detail-cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.article-detail-content {
    color: #444;
    font-size: 15px;
    line-height: 1.85;
    word-break: break-word;
}

.article-detail-content img {
    max-width: 100%;
    height: auto;
}

.article-detail-content p {
    margin-bottom: 12px;
}

.legal-panel-title {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(38, 55, 84, .15);
    color: #1d2a42;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.legal-panel-content {
    color: #444;
    font-size: 15px;
    line-height: 1.85;
    word-break: break-word;
}

.legal-panel-content img {
    max-width: 100%;
    height: auto;
}

.legal-panel-content p {
    margin-bottom: 12px;
}

/* 子页页脚 */
.subpage-footer-wrap {
    background: #000;
    margin-top: auto;
}

.subpage-footer {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: auto;
    max-width: 960px;
    margin: 0 auto;
    padding: 72px 24px 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 36px;
}

.subpage-footer .site-footer-logo img {
    width: 280px;
    height: auto;
    filter: brightness(0) invert(1);
}

.subpage-footer .site-footer-links,
.subpage-footer .site-footer-social {
    justify-content: center;
}

@media (max-width: 768px) {
    .subpage-panel,
    .article-detail-panel {
        padding: 24px 18px 32px;
    }

    .articles-tabs {
        gap: 12px;
    }

    .articles-item {
        flex-wrap: wrap;
        gap: 6px;
    }

    .articles-item .legend-news-date {
        width: 100%;
        padding-left: 0;
    }
}

/* ========== 下载页 ========== */
.download-body {
    background: linear-gradient(180deg, #1a2035 0%, #0f1424 100%);
}

.download-panel {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 32px 56px;
    text-align: center;
}

.download-panel-head {
    margin-bottom: 28px;
}

.download-panel-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
}

.download-panel-version {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
}

.download-panel-note {
    margin-bottom: 32px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    text-align: left;
}

.download-panel-note-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #ffd27a;
}

.download-panel-note-content {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
    white-space: pre-wrap;
    word-break: break-word;
}

.download-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.download-btn {
    display: block;
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .2s, transform .15s;
}

.download-btn-android {
    background: linear-gradient(180deg, #3ecf8e 0%, #2aad6f 100%);
    color: #fff;
}

.download-btn-ios {
    background: linear-gradient(180deg, #5b9dff 0%, #3b7fe0 100%);
    color: #fff;
}

.download-btn:hover {
    filter: brightness(1.06);
    color: #fff;
}

.download-btn:active {
    transform: scale(.98);
}

.download-panel-tip {
    margin: 20px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}