/* ===== 修仙幸存者 · game.css =====
   复用 main.css :root 规范长变量（--gold/--cyan/--purple/--bg-card/--border-gold/--text-primary）
   类名统一 game- 前缀，避免与其他应用冲突 */

/* ===== 欢迎页：单机游戏开屏菜单 ===== */
#gameWelcomePage { align-items: stretch; overflow-x: hidden; overflow-y: auto; }
.game-welcome {
    position: relative; width: 100%; min-height: 100%; padding: 18px 14px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
}
.game-welcome::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 50% 24%, rgba(212,175,55,.18), transparent 26%),
        radial-gradient(circle at 22% 72%, rgba(34,211,238,.10), transparent 24%),
        linear-gradient(180deg, rgba(10,10,26,.12), rgba(4,5,13,.9));
}
#gameWelcomeRoot { position: relative; z-index: 1; width: 100%; min-height: 100%; }
.game-title-screen {
    min-height: min(760px, calc(100vh - 36px));
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center;
}
.game-title-stage { text-align: center; }
.game-title-brand {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.game-logo {
    width: 82px; height: 82px; display: flex; align-items: center; justify-content: center;
    border-radius: 18px; background: linear-gradient(145deg, rgba(212,175,55,.22), rgba(34,211,238,.09));
    border: 1px solid var(--border-gold); color: var(--gold); font-size: 48px; line-height: 1;
    box-shadow: 0 0 30px rgba(212,175,55,.18), inset 0 0 18px rgba(34,211,238,.08);
    text-shadow: 0 0 22px rgba(212,175,55,.6);
}
.game-hero-title { min-width: 0; }
.game-title-kicker {
    color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: 3px; margin-bottom: 7px;
}
.game-hero-title h2 {
    font-family: var(--font-title); color: var(--gold-light); font-size: 42px; letter-spacing: 5px; margin: 0;
    text-shadow: 0 0 18px rgba(212,175,55,.45);
}
.game-hero-title p { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin-top: 10px; }
.game-title-meta {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 22px auto 18px;
}
.game-title-meta span {
    min-width: 72px; padding: 5px 10px; border-radius: 999px;
    background: rgba(10,10,26,.58); border: 1px solid rgba(212,175,55,.22);
    color: var(--gold-light); font-size: 11px;
}
.game-main-menu {
    width: 100%; max-width: 420px; margin: 0 auto;
    padding: 14px; border: 1px solid rgba(212,175,55,.22); border-radius: 10px;
    background: rgba(8,6,20,.72); backdrop-filter: blur(3px);
}
.game-menu-status { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.game-main-menu .app-status-bar {
    width: 100%; max-width: none; margin: 0; padding: 8px 10px; justify-content: center;
    background: rgba(255,255,255,.025); border-color: rgba(212,175,55,.16); border-radius: 8px;
    font-size: 11px; text-align: center;
}
.game-main-menu .app-status-bar a { padding: 4px 10px; }
.game-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-menu-btn {
    height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--border-gold); border-radius: 8px; background: rgba(15,12,35,.78);
    color: var(--gold-light); cursor: pointer; font-size: 13px; font-weight: 600;
}
.game-menu-btn:hover { border-color: var(--gold); background: rgba(212,175,55,.1); }
.game-menu-btn i { color: var(--cyan); font-size: 13px; }
.game-coins-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    height: 40px;
    padding: 0 12px;
    background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.06));
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    color: var(--gold-light);
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}
.game-coins-pill .fa-coins { color: var(--gold); }

.game-exchange-card,
.game-realm-card {
    width: 100%;
    margin: 0;
    padding: 12px;
    text-align: left;
    border-radius: 8px;
}
.game-exchange-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    align-items: center;
    background: linear-gradient(145deg, rgba(15,12,35,.92), rgba(34,211,238,.05));
    border: 1px solid var(--border-gold);
}
.game-exchange-copy { min-width: 0; text-align: left; }
.game-exchange-copy strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold-light);
    font-size: 13px;
    letter-spacing: 1px;
}
.game-exchange-copy span {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
}
.game-exchange-control { display: flex; gap: 8px; align-items: center; }
.game-exchange-control input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    background: rgba(10,10,26,.72);
    color: var(--text-primary);
    outline: none;
    font-size: 12px;
}
.game-exchange-control input:focus { border-color: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,.12); }
.game-exchange-control button {
    height: 34px;
    padding: 0 12px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold), #b8941f);
    color: #1a1410;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.game-exchange-control button:hover { filter: brightness(1.08); }
.game-exchange-preview {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
}
.game-realm-card { background: linear-gradient(145deg, rgba(20,18,40,.92), rgba(212,175,55,.06)); border: 1px solid rgba(212,175,55,.42); }
.game-realm-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-realm-main strong { color: var(--gold-light); font-family: var(--font-title); font-size: 16px; letter-spacing: 2px; }
.game-realm-main em { color: var(--text-secondary); font-style: normal; font-size: 11px; margin-left: auto; }
.game-realm-badge {
    padding: 2px 7px; border-radius: 999px;
    background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.35);
    color: var(--cyan); font-size: 10px; font-weight: 700;
}
.game-realm-progress {
    height: 7px; margin: 9px 0 6px; border-radius: 999px; overflow: hidden;
    background: rgba(0,0,0,.45); border: 1px solid rgba(212,175,55,.18);
}
.game-realm-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); }
.game-realm-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 11px; }
.game-realm-bonus { margin-top: 5px; color: var(--gold); font-size: 11px; }

@media (max-width: 767px) {
    .game-realm-main { flex-wrap: wrap; }
    .game-realm-main em { margin-left: 0; width: 100%; }
    .game-realm-foot { flex-direction: column; }
}
@media (min-width: 768px) {
    #gameWelcomePage {
        left: 0;
        width: 100%;
    }
    .game-welcome { padding: 24px; }
    .game-title-screen { grid-template-columns: minmax(0, 1fr) 360px; gap: 42px; }
    .game-title-stage { text-align: left; }
    .game-title-brand { align-items: flex-start; }
    .game-title-meta { justify-content: flex-start; margin-left: 0; }
    .game-title-stage .game-start-btn { max-width: 360px; }
    .game-main-menu { margin: 0; }
    .game-hero-title h2 { font-size: 54px; letter-spacing: 7px; }
}
@media (min-width: 1100px) {
    .game-title-screen { grid-template-columns: minmax(0, 1fr) 390px; }
    .game-logo { width: 92px; height: 92px; font-size: 54px; }
    .game-hero-title h2 { font-size: 64px; }
}
@media (min-width: 1440px) {
    #gameWelcomeRoot { width: 100%; }
}

.game-panel-overlay {
    position: fixed; z-index: 210; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 18px; background: rgba(2,3,10,.76); backdrop-filter: blur(4px);
}
.game-panel-shell {
    width: min(920px, 100%); max-height: min(86vh, 820px); display: flex; flex-direction: column;
    background: rgba(8,6,20,.96); border: 1px solid var(--border-gold); border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.game-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid rgba(212,175,55,.16);
}
.game-panel-head h3 { margin: 0; font-family: var(--font-title); color: var(--gold-light); letter-spacing: 3px; font-size: 18px; }
.game-panel-tabs {
    display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; border-bottom: 1px solid rgba(212,175,55,.12);
}
.game-panel-tabs button {
    flex: 0 0 auto; min-width: 66px; height: 32px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid rgba(212,175,55,.18); color: var(--text-secondary);
}
.game-panel-tabs button.active { color: var(--cyan); border-color: var(--cyan); background: rgba(34,211,238,.08); }
.game-panel-body { padding: 0 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.game-panel-section { display: none; }
.game-panel-section.active { display: block; }

.game-section-title {
    display: flex; align-items: center; gap: 8px;
    color: var(--gold-light); font-size: 15px; font-weight: 600; letter-spacing: 2px;
    margin: 18px 0 10px;
}
.game-section-title::before { content: ''; width: 4px; height: 16px; background: linear-gradient(180deg, var(--gold), var(--cyan)); border-radius: 2px; }
.game-col > .game-section-title:first-child { margin-top: 0; }

/* 角色卡 */
.game-char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.game-char-card {
    position: relative; min-height: 188px; padding: 12px 8px; text-align: center; cursor: pointer;
    background: linear-gradient(145deg, var(--bg-card), rgba(139,92,246,.05));
    border: 1px solid var(--border-gold); border-radius: 8px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.game-char-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 20px rgba(212,175,55,.2); }
.game-char-card.selected { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-dim); }
.game-char-card.locked { opacity: .45; cursor: not-allowed; }
.game-char-card.locked:hover { transform: none; }
.game-char-ava {
    width: 54px; height: 54px; margin: 0 auto 7px; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 68%, rgba(212,175,55,.16), rgba(10,8,18,.78) 62%);
    border: 1px solid rgba(212,175,55,.2); border-radius: 7px;
    box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 10px rgba(212,175,55,.14);
}
.game-char-sprite {
    width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(74,240,224,.25)) drop-shadow(0 2px 0 rgba(0,0,0,.75));
}
.game-char-sprite-fallback {
    width: 42px; height: 42px; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1; filter: drop-shadow(0 0 8px rgba(212,175,55,.4));
}
.game-char-name { font-family: var(--font-title); color: var(--gold-light); font-size: 14px; font-weight: 600; }
.game-char-desc { color: var(--text-secondary); font-size: 11px; margin-top: 4px; line-height: 1.35; }
.game-char-lock { position: absolute; top: 6px; right: 8px; color: var(--text-dim); font-size: 12px; }

.game-char-cult-lv { color: var(--cyan); font-size: 11px; font-weight: 700; }
.game-char-cult-btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    min-height: 28px;
}
.game-cultivation-progress {
    height: 6px;
    margin-top: 7px;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 999px;
    overflow: hidden;
}
.game-cultivation-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    transition: width .2s ease;
}
.game-cultivation-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 10px;
}
.game-cultivation-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 商店升级行 */
.game-upgrade-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px;
}
.game-upgrade-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(212,175,55,.12); border-radius: 8px; color: var(--gold); font-size: 18px; }
.game-upgrade-img,
.game-talent-branch-img,
.game-pet-avatar-img,
.game-pet-mat-img,
.game-ach-img,
.game-tag-img,
.game-test-img {
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}
.game-upgrade-img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 5px rgba(212,175,55,.35));
}
.game-tag-img {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(212,175,55,.28));
}
.game-buy-btn .game-tag-img,
.game-pet-bond-row .game-tag-img {
    margin-right: 3px;
}
.game-upgrade-info { flex: 1; min-width: 0; }
.game-upgrade-name { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.game-upgrade-desc { color: var(--text-secondary); font-size: 11px; margin-top: 2px; }
.game-upgrade-lv { display: inline-flex; gap: 2px; margin-top: 5px; }
.game-upgrade-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(212,175,55,.18); }
.game-upgrade-dot.on { background: var(--gold); box-shadow: 0 0 5px var(--gold-dim); }
.game-buy-btn {
    flex-shrink: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
    background: linear-gradient(135deg, rgba(212,175,55,.38), rgba(74,240,224,.16));
    border: 1px solid var(--gold); color: var(--gold-light); white-space: nowrap;
}
.game-buy-btn:hover { filter: brightness(1.15); }
.game-buy-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.game-buy-btn.maxed { background: rgba(255,255,255,.04); border-color: var(--text-dim); color: var(--text-dim); }

/* 主按钮 */
.game-cta {
    display: block; width: 100%; margin-top: 22px; padding: 14px 0;
    font-family: var(--font-title); font-size: 17px; letter-spacing: 6px; font-weight: 600;
    color: #1a1410; cursor: pointer;
    background: linear-gradient(135deg, var(--gold), #b8941f); border: none; border-radius: 10px;
    box-shadow: 0 4px 18px rgba(212,175,55,.3); transition: transform .12s, box-shadow .12s;
}
.game-start-btn { margin-top: 0; height: 40px; padding: 0; }
.game-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(212,175,55,.45); }
.game-cta.secondary { background: transparent; border: 1px solid var(--border-gold); color: var(--gold-light); box-shadow: none; }
.game-cta.secondary:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(212,175,55,.15); }

/* 战绩 */
.game-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px,1fr)); gap: 8px; }
.game-record { text-align: center; min-height: 62px; padding: 10px 4px; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 8px; }
.game-record .v { color: var(--cyan); font-size: 18px; font-weight: 700; }
.game-record .k { color: var(--text-secondary); font-size: 10px; margin-top: 2px; }

/* ===== 欢迎页·单机主菜单重构 ===== */
#gameWelcomePage {
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    background:
        linear-gradient(120deg, #07050b 0%, #12090f 32%, #081319 68%, #050407 100%),
        repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 1px, transparent 1px 120px);
    color: var(--text-primary);
    scroll-behavior: smooth;
}
#gameWelcomePage.active {
    display: block;
}
#gameWelcomePage::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(212,175,55,.08) 50%, transparent 52%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
    opacity: .24;
    mix-blend-mode: screen;
    animation: gameScanDrift 10s linear infinite;
}
.game-welcome {
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    z-index: 1;
}
#gameWelcomeRoot { width: 100%; max-width: none; min-height: 100%; }
.game-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 680px;
    padding: 72px 18px 42px;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(212,175,55,.24);
    background:
        linear-gradient(120deg, #050407 0%, #070a10 44%, #06141a 100%);
}
.game-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(5,4,8,.96) 0%, rgba(5,4,8,.88) 36%, rgba(5,4,8,.42) 58%, rgba(5,4,8,.70) 100%),
        radial-gradient(circle at 42% 49%, transparent 0 18%, rgba(5,4,8,.12) 42%, rgba(5,4,8,.66) 100%),
        linear-gradient(180deg, rgba(212,175,55,.10), transparent 44%, rgba(34,211,238,.08));
    transform: skewY(-4deg);
    opacity: .96;
    z-index: 2;
}
.game-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: auto;
    pointer-events: none;
    background:
        repeating-linear-gradient(115deg, transparent 0 28px, rgba(212,175,55,.045) 29px 30px, transparent 31px 82px),
        repeating-linear-gradient(0deg, transparent 0 58px, rgba(34,211,238,.035) 59px 60px),
        linear-gradient(180deg, rgba(0,0,0,.12), transparent 42%, rgba(5,4,8,.88));
    z-index: 3;
    opacity: .78;
    animation: gameGridSweep 16s linear infinite;
}
.game-hero-content {
    position: relative;
    z-index: 5;
    width: min(720px, 100%);
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(14px, 2.2vw, 28px);
    margin-left: clamp(-14px, -1.2vw, 0px);
    border-radius: 8px;
    background:
        linear-gradient(100deg, rgba(5,4,8,.58), rgba(5,4,8,.28) 72%, transparent);
    box-shadow: -28px 0 60px rgba(5,4,8,.48);
    backdrop-filter: blur(1.5px);
    animation: gameHeroContentIn .7s ease-out both;
    transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}
.game-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.game-hero .game-logo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(212,175,55,.32), rgba(34,211,238,.12)),
        linear-gradient(180deg, rgba(255,255,255,.12), transparent);
    border: 1px solid rgba(253,224,71,.72);
    color: #fef3c7;
    font-family: var(--font-title);
    font-size: 34px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(253,224,71,.72);
    box-shadow: 0 0 34px rgba(212,175,55,.26), inset 0 0 24px rgba(212,175,55,.12);
}
.game-hero-title { min-width: 0; }
.game-kicker {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: .88;
}
.game-hero h2 {
    font-family: var(--font-title);
    color: #fef3c7;
    font-size: 42px;
    line-height: .98;
    letter-spacing: 0;
    margin: 0 0 8px;
    text-shadow: 0 0 22px rgba(212,175,55,.52), 0 4px 18px rgba(0,0,0,.9);
}
.game-hero p {
    color: rgba(237,233,216,.78);
    font-size: 14px;
    line-height: 1.55;
    max-width: 520px;
}
#gameWelcomePage .app-status-bar {
    width: min(560px, 100%);
    max-width: none;
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(8,6,18,.78), rgba(34,211,238,.08));
    border: 1px solid rgba(212,175,55,.26);
    border-radius: 8px;
    font-size: 12px;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.game-command-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    width: min(620px, 100%);
}
.game-command-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 10px;
    min-width: 0;
}
#gameWelcomePage .game-cta {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 14px 0;
    font-family: var(--font-title);
    font-size: 17px;
    letter-spacing: 0;
    font-weight: 700;
    color: #160f08;
    cursor: pointer;
    background: linear-gradient(135deg, #fde68a, var(--gold) 48%, #9a6a12);
    border: 1px solid rgba(253,224,71,.88);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(212,175,55,.28);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
#gameWelcomePage .game-start-btn {
    position: relative;
    height: auto;
    min-height: 76px;
    margin-top: 0;
    padding: 0 22px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 12px;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
}
#gameWelcomePage .game-start-btn::before {
    content: '';
    position: absolute;
    inset: -40% -30%;
    background: linear-gradient(100deg, transparent 0 35%, rgba(255,255,255,.38) 48%, transparent 62% 100%);
    transform: translateX(-55%) skewX(-18deg);
    animation: gameCtaSheen 3.4s ease-in-out infinite;
    z-index: -1;
}
#gameWelcomePage .game-start-btn::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(22,15,8,.28);
    border-radius: 6px;
    pointer-events: none;
}
#gameWelcomePage .game-start-btn i {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(22,15,8,.16);
    font-size: 12px;
}
#gameWelcomePage .game-start-btn span {
    font-size: 22px;
    line-height: 1.05;
}
#gameWelcomePage .game-start-btn small {
    margin-top: 4px;
    color: rgba(22,15,8,.72);
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: 700;
}
#gameWelcomePage .game-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 34px rgba(212,175,55,.42);
}
#gameWelcomePage .game-cta.secondary {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--gold-light);
    box-shadow: none;
}
.game-coins-pill,
.game-icon-action {
    height: 48px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
}
.game-action-img,
.game-menu-img {
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    filter: drop-shadow(0 0 7px rgba(212,175,55,.32));
}
.game-action-img {
    width: 26px;
    height: 26px;
}
.game-action-img.small {
    width: 22px;
    height: 22px;
}
.game-menu-img {
    width: 30px;
    height: 30px;
}
.game-coins-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 0 14px;
    background: linear-gradient(135deg, rgba(212,175,55,.20), rgba(34,211,238,.08));
    border: 1px solid rgba(212,175,55,.42);
    color: #fef3c7;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}
.game-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    border: 1px solid rgba(34,211,238,.36);
    background: rgba(8,6,18,.72);
    color: var(--gold-light);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}
.game-icon-action:hover {
    border-color: var(--cyan);
    background: rgba(34,211,238,.12);
    box-shadow: 0 0 18px rgba(34,211,238,.16);
}
.game-quick-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(720px, 100%);
}
.game-exchange-card,
.game-realm-card {
    width: 100%;
    margin: 0;
    padding: 13px;
    text-align: left;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}
.game-exchange-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
    background: linear-gradient(145deg, rgba(12,9,22,.84), rgba(34,211,238,.07));
    border: 1px solid rgba(212,175,55,.28);
}
.game-exchange-copy { min-width: 0; text-align: left; }
.game-exchange-copy strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--gold-light);
    font-size: 13px;
}
.game-exchange-copy span {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
}
.game-exchange-control {
    display: flex;
    gap: 8px;
    align-items: center;
}
.game-exchange-control input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(212,175,55,.36);
    border-radius: 8px;
    background: rgba(5,4,10,.72);
    color: var(--text-primary);
    outline: none;
    font-size: 12px;
}
.game-exchange-control input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(212,175,55,.16);
}
.game-exchange-control button {
    height: 36px;
    padding: 0 12px;
    flex-shrink: 0;
    border: 1px solid rgba(253,224,71,.72);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold), #9a6a12);
    color: #160f08;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.game-exchange-preview {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
}
.game-realm-card {
    background: linear-gradient(145deg, rgba(22,14,26,.86), rgba(139,92,246,.08));
    border: 1px solid rgba(196,181,253,.34);
}
.game-realm-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.game-realm-main strong {
    color: #fef3c7;
    font-family: var(--font-title);
    font-size: 17px;
    letter-spacing: 0;
}
.game-realm-main em {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 11px;
    margin-left: auto;
}
.game-realm-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(34,211,238,.12);
    border: 1px solid rgba(34,211,238,.35);
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
}
.game-realm-progress {
    height: 7px;
    margin: 9px 0 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,.48);
    border: 1px solid rgba(212,175,55,.18);
}
.game-realm-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--cyan), #c4b5fd);
}
.game-realm-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
}
.game-realm-bonus {
    margin-top: 5px;
    color: var(--gold);
    font-size: 11px;
}
.game-hero-scene {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    pointer-events: none;
    opacity: 1;
    transition: top .82s cubic-bezier(.16, 1, .3, 1), right .82s cubic-bezier(.16, 1, .3, 1), bottom .82s cubic-bezier(.16, 1, .3, 1), left .82s cubic-bezier(.16, 1, .3, 1), width .82s cubic-bezier(.16, 1, .3, 1), opacity .44s ease, transform .82s cubic-bezier(.16, 1, .3, 1);
}
.game-battle-preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #0b1016;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 -120px 160px rgba(0,0,0,.58);
    image-rendering: pixelated;
    transform: scale(1.04);
    transform-origin: 45% 50%;
    animation: gamePreviewDrift 9s ease-in-out infinite;
    transition: transform .82s cubic-bezier(.16, 1, .3, 1), border-color .38s ease, box-shadow .38s ease, filter .5s ease;
}
.game-battle-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: .10;
    mix-blend-mode: screen;
}
.game-battle-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 43% 49%, color-mix(in srgb, var(--preview-weapon, #d4af37) 24%, transparent), transparent 20%),
        linear-gradient(90deg, rgba(5,4,8,.86) 0%, rgba(5,4,8,.56) 35%, rgba(5,4,8,.18) 58%, rgba(5,4,8,.48) 100%),
        radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,0,0,.22) 64%, rgba(0,0,0,.62) 100%),
        linear-gradient(180deg, rgba(34,211,238,.06), transparent 26%, color-mix(in srgb, var(--preview-theme, #d4af37) 14%, transparent));
    transition: opacity .4s ease;
}
.game-preview-map {
    position: absolute;
    inset: -16px;
    background:
        linear-gradient(rgba(4,8,10,.38), rgba(4,8,10,.38)),
        url('/img/game/map_demon_forest.png?v=20260627s') center center / cover no-repeat;
    filter: saturate(.72) contrast(1.08) brightness(.60);
    image-rendering: pixelated;
    animation: gameMapPan 11s linear infinite;
    transition: transform .82s cubic-bezier(.16, 1, .3, 1), filter .5s ease, opacity .38s ease;
}
.game-preview-hud {
    position: absolute;
    z-index: 8;
    top: clamp(58px, 7vw, 88px);
    left: auto;
    right: clamp(18px, 3.5vw, 58px);
    display: flex;
    gap: 8px;
    color: rgba(254,243,199,.86);
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
.game-preview-hud span {
    padding: 3px 7px;
    border: 1px solid rgba(212,175,55,.32);
    border-radius: 5px;
    background: rgba(5,4,8,.68);
}
.game-preview-bars {
    position: absolute;
    z-index: 8;
    left: auto;
    right: clamp(18px, 3.5vw, 58px);
    top: clamp(92px, 10vw, 124px);
    width: min(34vw, 420px);
    display: grid;
    gap: 5px;
}
.game-preview-bars i {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.58);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.game-preview-bars i::before {
    content: '';
    display: block;
    height: 100%;
    border-radius: inherit;
}
.game-preview-bars .hp::before { width: 76%; background: linear-gradient(90deg, #ef4444, #fca5a5); }
.game-preview-bars .xp::before { width: 58%; background: linear-gradient(90deg, #0891b2, #67e8f9); }
.game-preview-player,
.game-preview-boss,
.game-preview-enemy,
.game-preview-skill,
.game-preview-projectile,
.game-preview-loot,
.game-preview-aura,
.game-preview-damage,
.game-preview-slots {
    position: absolute;
    z-index: 5;
}
.game-preview-player {
    left: 56%;
    top: 52%;
    width: clamp(72px, 6vw, 108px);
    height: clamp(72px, 6vw, 108px);
    transform: translate(-50%, -50%) scale(1.24);
    background: url('/img/game/char_sword.png?v=20260627s') center center / contain no-repeat;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--preview-weapon, #fde047) 62%, transparent)) drop-shadow(0 12px 12px rgba(0,0,0,.55));
    image-rendering: pixelated;
    animation: gamePlayerStep 1.1s steps(2) infinite;
    transition: left .82s cubic-bezier(.16, 1, .3, 1), top .82s cubic-bezier(.16, 1, .3, 1), width .82s cubic-bezier(.16, 1, .3, 1), height .82s cubic-bezier(.16, 1, .3, 1), filter .44s ease, opacity .3s ease;
}
.game-preview-aura {
    z-index: 4;
    left: 56%;
    top: 53%;
    width: clamp(190px, 16vw, 260px);
    height: clamp(190px, 16vw, 260px);
    border: 2px solid color-mix(in srgb, var(--preview-weapon, #fde047) 46%, transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 34px color-mix(in srgb, var(--preview-weapon, #fde047) 12%, transparent), 0 0 30px color-mix(in srgb, var(--preview-weapon, #fde047) 24%, transparent);
    animation: gamePreviewAura 1.6s ease-in-out infinite;
    transition: left .82s cubic-bezier(.16, 1, .3, 1), top .82s cubic-bezier(.16, 1, .3, 1), width .82s cubic-bezier(.16, 1, .3, 1), height .82s cubic-bezier(.16, 1, .3, 1), opacity .38s ease;
}
.game-preview-boss {
    right: 11%;
    top: 25%;
    width: clamp(92px, 8vw, 132px);
    height: clamp(112px, 9vw, 156px);
    background: url('/img/game/enemy_boss3.png?v=20260627s') center center / contain no-repeat;
    filter: drop-shadow(0 14px 14px rgba(0,0,0,.56));
    image-rendering: pixelated;
    animation: gameEnemyPush 2.4s ease-in-out infinite;
    transition: opacity .38s ease, filter .38s ease;
}
.game-preview-enemy {
    width: clamp(40px, 3.4vw, 58px);
    height: clamp(40px, 3.4vw, 58px);
    background: center center / contain no-repeat;
    filter: drop-shadow(0 9px 8px rgba(0,0,0,.48));
    image-rendering: pixelated;
    animation: gameEnemyPush 2.1s ease-in-out infinite;
    transition: opacity .38s ease, filter .38s ease;
}
.enemy-a { left: 45%; top: 31%; background-image: url('/img/game/enemy_zombie.png?v=20260627s'); animation-delay: -.2s; }
.enemy-b { left: 48%; bottom: 18%; background-image: url('/img/game/enemy_spider.png?v=20260627s'); animation-delay: -.7s; }
.enemy-c { right: 25%; bottom: 22%; background-image: url('/img/game/enemy_ghost.png?v=20260627s'); animation-delay: -1.1s; }
.enemy-d { right: 32%; top: 21%; background-image: url('/img/game/enemy_wasp.png?v=20260627s'); animation-delay: -.4s; }
.game-preview-skill {
    width: clamp(66px, 5.8vw, 96px);
    height: clamp(66px, 5.8vw, 96px);
    background: center center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 12px currentColor);
    opacity: .92;
    transition: opacity .38s ease, transform .38s ease;
}
.skill-one { left: 46%; top: 34%; color: #67e8f9; background-image: url('/img/game/fx_thunder.png?v=20260627s'); animation: gameSkillStrike 1.35s ease-in-out infinite; }
.skill-two { right: 20%; top: 56%; color: #f97316; background-image: url('/img/game/fx_fireball.png?v=20260627s'); animation: gameSkillPulse 1.7s ease-in-out infinite; }
.skill-three { left: 60%; bottom: 17%; color: #a78bfa; background-image: url('/img/game/fx_heaven_seal.png?v=20260627s'); animation: gameSkillPulse 2.1s ease-in-out infinite reverse; }
.game-preview-projectile {
    width: clamp(44px, 4vw, 68px);
    height: clamp(44px, 4vw, 68px);
    background: url('/img/game/fx_flying_sword.png?v=20260627s') center center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--preview-weapon, #22d3ee) 62%, transparent));
    transition: opacity .38s ease;
}
.projectile-one { left: 45%; top: 55%; animation: gameProjectileOne 1.9s linear infinite; }
.projectile-two { left: 65%; top: 29%; animation: gameProjectileTwo 2.2s linear infinite; }
.projectile-three { left: 58%; bottom: 23%; animation: gameProjectileThree 2.5s linear infinite; }
.game-preview-loot {
    width: 24px;
    height: 24px;
    background: center center / contain no-repeat;
    image-rendering: pixelated;
    animation: gameLootPop 1.8s ease-in-out infinite;
    transition: opacity .38s ease;
}
.loot-xp { left: 49%; top: 63%; background-image: url('/img/game/ui_stat_wisdom.png?v=20260627s'); filter: drop-shadow(0 0 8px rgba(34,211,238,.64)); }
.loot-coin { right: 27%; top: 43%; background-image: url('/img/game/ui_coins.png?v=20260627s'); filter: drop-shadow(0 0 8px rgba(251,191,36,.64)); animation-delay: -.6s; }
.game-preview-damage {
    z-index: 7;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,255,255,.42);
    animation: gameDamageFloat 1.3s ease-out infinite;
    transition: opacity .38s ease;
}
.dmg-one { left: 51%; top: 27%; }
.dmg-two { right: 18%; top: 21%; color: #fde047; animation-delay: -.55s; }
.game-preview-slots {
    z-index: 8;
    right: clamp(18px, 3.5vw, 58px);
    bottom: clamp(24px, 4vw, 54px);
    display: grid;
    grid-template-columns: repeat(4, 30px);
    gap: 5px;
    transition: opacity .38s ease;
}
.game-preview-slots img {
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid rgba(212,175,55,.34);
    border-radius: 5px;
    background: rgba(5,4,8,.72);
    image-rendering: pixelated;
}
#gameWelcomePage.game-start-ready .game-hero-content {
    transform: translateX(-10px);
    filter: saturate(.9);
}
#gameWelcomePage.game-start-ready .game-hero-scene {
    opacity: 1;
    transform: scale(1.025);
}
#gameWelcomePage.game-start-ready .game-battle-preview {
    animation: none;
    transform: scale(1.09) translate3d(-1.5%, 0, 0);
    border-color: color-mix(in srgb, var(--preview-theme, #d4af37) 54%, rgba(255,255,255,.12));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 -80px 120px rgba(0,0,0,.34),
        0 0 46px color-mix(in srgb, var(--preview-theme, #d4af37) 28%, transparent),
        0 34px 86px rgba(0,0,0,.5);
}
#gameWelcomePage.game-start-ready .game-preview-map {
    animation-duration: 7s;
}
#gameWelcomePage.game-start-ready .game-preview-player {
    animation: none;
    transform: translate(-50%, -50%) scale(1.32);
}
#gameWelcomePage.game-start-ready .game-preview-aura {
    opacity: .96;
}
#gameWelcomePage.game-starting {
    overflow: hidden;
}
#gameWelcomePage.game-starting .game-hero {
    min-height: 100dvh;
}
#gameWelcomePage.game-starting .game-hero::after {
    opacity: .42;
}
#gameWelcomePage.game-starting .game-hero-content {
    opacity: 0;
    transform: translateX(-46px) scale(.98);
    filter: blur(8px);
    pointer-events: none;
}
#gameWelcomePage.game-starting .game-hero-scene {
    inset: 0;
    width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    opacity: 1;
    transform: none;
    z-index: 7;
}
#gameWelcomePage.game-starting .game-battle-preview {
    border-color: transparent;
    border-radius: 0;
    animation: none;
    transform: scale(1.42) translate3d(-7%, -2%, 0);
    transform-origin: 56% 52%;
    box-shadow: inset 0 0 160px rgba(0,0,0,.42);
    filter: saturate(1.04) contrast(1.08) brightness(.92);
}
#gameWelcomePage.game-starting .game-battle-preview::before {
    opacity: .08;
}
#gameWelcomePage.game-starting .game-battle-preview::after {
    opacity: .9;
    background:
        radial-gradient(circle at 56% 52%, transparent 0 15%, color-mix(in srgb, var(--preview-weapon, #d4af37) 16%, transparent) 22%, transparent 34%),
        radial-gradient(circle at 56% 52%, transparent 0 34%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.74) 100%);
}
#gameWelcomePage.game-starting .game-preview-map {
    animation: none;
    transform: translate3d(-38px, -18px, 0) scale(1.10);
    filter: saturate(.82) contrast(1.12) brightness(.62);
}
#gameWelcomePage.game-starting .game-preview-hud,
#gameWelcomePage.game-starting .game-preview-bars,
#gameWelcomePage.game-starting .game-preview-slots,
#gameWelcomePage.game-starting .game-preview-loot,
#gameWelcomePage.game-starting .game-preview-damage {
    opacity: 0;
}
#gameWelcomePage.game-starting .game-preview-enemy,
#gameWelcomePage.game-starting .game-preview-boss {
    opacity: .22;
    filter: blur(1px) drop-shadow(0 14px 14px rgba(0,0,0,.56));
}
#gameWelcomePage.game-starting .game-preview-skill,
#gameWelcomePage.game-starting .game-preview-projectile {
    opacity: .38;
}
#gameWelcomePage.game-starting .game-preview-player {
    left: 56%;
    top: 52%;
    width: clamp(92px, 7vw, 128px);
    height: clamp(92px, 7vw, 128px);
    animation: none;
    transform: translate(-50%, -50%) scale(1.88);
    filter:
        drop-shadow(0 0 18px color-mix(in srgb, var(--preview-weapon, #fde047) 86%, transparent))
        drop-shadow(0 26px 18px rgba(0,0,0,.7));
}
#gameWelcomePage.game-starting .game-preview-aura {
    left: 56%;
    top: 52%;
    width: clamp(260px, 20vw, 340px);
    height: clamp(260px, 20vw, 340px);
    opacity: .98;
    animation: none;
}
.game-scene-moon {
    position: absolute;
    right: 18%;
    top: 11%;
    width: 220px;
    height: 220px;
    clip-path: polygon(50% 0, 88% 12%, 100% 50%, 88% 88%, 50% 100%, 12% 88%, 0 50%, 12% 12%);
    background:
        repeating-conic-gradient(from 0deg, rgba(212,175,55,.22) 0 7deg, transparent 7deg 16deg),
        linear-gradient(135deg, rgba(212,175,55,.08), rgba(34,211,238,.12));
    border: 1px solid rgba(212,175,55,.28);
    filter: drop-shadow(0 0 34px rgba(212,175,55,.22));
    animation: gameSigilTurn 28s linear infinite;
}
.game-scene-ring {
    position: absolute;
    left: 42%;
    top: 30%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(212,175,55,.28);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(64deg);
}
.game-scene-ring::before,
.game-scene-ring::after {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px dashed rgba(34,211,238,.28);
    border-radius: 50%;
}
.game-scene-ring::after {
    inset: 64px;
    border-color: rgba(196,181,253,.24);
}
.ring-one { animation: gameRingSpin 18s linear infinite; }
.ring-two {
    width: 520px;
    height: 520px;
    left: 48%;
    top: 42%;
    border-color: rgba(239,68,68,.20);
    animation: gameRingSpin 24s linear infinite reverse;
}
.game-scene-boss {
    position: absolute;
    right: 19%;
    top: 23%;
    width: 132px;
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/img/game/enemy_boss3.png?v=20260627s') center center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.46));
    animation: gameBossFloat 4.2s ease-in-out infinite;
}
.game-scene-character {
    position: absolute;
    left: 30%;
    bottom: 18%;
    width: 190px;
    height: 220px;
    transform: translateX(-50%);
}
.game-character-aura {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -50%) rotate(45deg);
    background:
        linear-gradient(90deg, transparent 46%, rgba(34,211,238,.26) 49% 51%, transparent 54%),
        linear-gradient(0deg, transparent 46%, rgba(212,175,55,.30) 49% 51%, transparent 54%);
    border: 1px solid rgba(212,175,55,.22);
    box-shadow: 0 0 38px rgba(34,211,238,.12);
    animation: gameAuraPulse 2.8s ease-in-out infinite;
}
.game-character-glyph {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    background: url('/img/game/fx_tai_chi.png?v=20260627s') center center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 30px rgba(253,224,71,.36));
    animation: gameGlyphRise 3.8s ease-in-out infinite;
}
.game-character-body {
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 96px;
    height: 96px;
    transform: translateX(-50%) scale(1.6);
    image-rendering: pixelated;
    background: url('/img/game/char_sword.png?v=20260627s') center center / contain no-repeat;
    filter: drop-shadow(0 0 18px rgba(253,224,71,.55)) drop-shadow(0 22px 24px rgba(0,0,0,.42));
    animation: gameHeroFloat 3.4s ease-in-out infinite;
}
.game-scene-sword {
    position: absolute;
    width: 54px;
    height: 54px;
    background: url('/img/game/fx_flying_sword.png?v=20260627s') center center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(34,211,238,.4));
}
.sword-one { left: 18%; top: 31%; animation: gameSwordOne 4.6s ease-in-out infinite; }
.sword-two { left: 55%; top: 60%; animation: gameSwordTwo 5s ease-in-out infinite; }
.sword-three { left: 66%; top: 18%; animation: gameSwordThree 4.2s ease-in-out infinite; }
.game-scene-ground {
    position: absolute;
    left: 2%;
    right: 0;
    bottom: 8%;
    height: 32%;
    background:
        linear-gradient(100deg, transparent 0 18%, rgba(212,175,55,.20) 18% 19%, transparent 20% 44%, rgba(34,211,238,.18) 44% 45%, transparent 46%),
        linear-gradient(180deg, transparent, rgba(5,4,8,.82));
    clip-path: polygon(0 62%, 22% 42%, 42% 58%, 66% 32%, 100% 50%, 100% 100%, 0 100%);
    opacity: .92;
}
.game-scene-particles span {
    position: absolute;
    width: 2px;
    height: 18px;
    background: linear-gradient(180deg, transparent, rgba(253,224,71,.78), transparent);
    opacity: 0;
    animation: gameParticleRise 3.8s linear infinite;
}
.game-scene-particles span:nth-child(1) { left: 8%; bottom: 20%; animation-delay: .1s; }
.game-scene-particles span:nth-child(2) { left: 18%; bottom: 11%; animation-delay: .9s; }
.game-scene-particles span:nth-child(3) { left: 28%; bottom: 26%; animation-delay: 1.7s; }
.game-scene-particles span:nth-child(4) { left: 38%; bottom: 16%; animation-delay: .5s; }
.game-scene-particles span:nth-child(5) { left: 49%; bottom: 22%; animation-delay: 2.2s; }
.game-scene-particles span:nth-child(6) { left: 58%; bottom: 12%; animation-delay: 1.2s; }
.game-scene-particles span:nth-child(7) { left: 67%; bottom: 24%; animation-delay: 2.8s; }
.game-scene-particles span:nth-child(8) { left: 76%; bottom: 15%; animation-delay: .3s; }
.game-scene-particles span:nth-child(9) { left: 84%; bottom: 28%; animation-delay: 1.5s; }
.game-scene-particles span:nth-child(10) { left: 92%; bottom: 18%; animation-delay: 2.4s; }
.game-scene-particles span:nth-child(11) { left: 34%; bottom: 7%; animation-delay: 3s; }
.game-scene-particles span:nth-child(12) { left: 72%; bottom: 8%; animation-delay: 3.4s; }
.game-dashboard-shell {
    position: relative;
    z-index: 2;
    width: min(1420px, calc(100% - 28px));
    margin: 0 auto;
    padding: 18px 0 44px;
}
.game-system-nav {
    position: sticky;
    top: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 0 14px;
    background: linear-gradient(180deg, rgba(5,4,8,.96), rgba(5,4,8,.72), transparent);
    backdrop-filter: blur(8px);
}
.game-system-nav a {
    min-width: 0;
    padding: 9px 8px;
    text-align: center;
    border: 1px solid rgba(212,175,55,.22);
    border-radius: 8px;
    background: rgba(8,6,18,.58);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.game-system-nav a:hover {
    color: var(--gold-light);
    border-color: rgba(212,175,55,.62);
    background: rgba(212,175,55,.08);
}
.game-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
.game-col {
    min-width: 0;
    animation: gamePanelIn .54s ease-out both;
}
.game-col-left { animation-delay: .04s; }
.game-col-mid { animation-delay: .1s; }
.game-col-right { animation-delay: .16s; }
.game-col-pet { animation-delay: .22s; }
.game-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fef3c7;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 22px 0 10px;
}
.game-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, var(--gold), var(--cyan));
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(34,211,238,.22);
}
.game-col > .game-section-title:first-child { margin-top: 0; }

@media (max-width: 767px) {
    .game-hero {
        min-height: 720px;
        padding-top: 64px;
    }
    .game-hero h2 { font-size: 42px; }
    .game-hero-scene {
        inset: 0;
        width: 100%;
        min-width: 0;
        aspect-ratio: auto;
        opacity: 1;
    }
    .game-battle-preview {
        transform: scale(1.12) translateX(8%);
        border-color: transparent;
        box-shadow: inset 0 -90px 130px rgba(0,0,0,.58);
    }
    .game-preview-hud,
    .game-preview-bars,
    .game-preview-slots {
        display: none;
    }
    .game-hero-content {
        align-self: start;
    }
    .game-preview-player {
        left: 68%;
        top: 57%;
    }
    .game-preview-aura {
        left: 68%;
        top: 58%;
    }
    .game-preview-boss {
        right: 6%;
        top: 29%;
    }
    .game-quick-grid {
        margin-top: 4px;
    }
    .game-realm-main { flex-wrap: wrap; }
    .game-realm-main em { margin-left: 0; width: 100%; }
    .game-realm-foot { flex-direction: column; }
    .game-system-nav {
        top: 44px;
        overflow-x: auto;
        grid-template-columns: repeat(5, minmax(70px, 1fr));
    }
}
@media (min-width: 768px) {
    #gameWelcomePage {
        left: 0;
        width: 100%;
    }
    .game-hero {
        padding: 78px 34px 50px;
    }
    .game-command-row {
        grid-template-columns: minmax(280px, 360px) minmax(220px, 1fr);
    }
    .game-quick-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
    }
    .game-dashboard {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        grid-template-areas:
            "left right"
            "mid mid"
            "pet pet";
        gap: 20px;
    }
    .game-col-left { grid-area: left; }
    .game-col-right { grid-area: right; }
    .game-col-mid { grid-area: mid; }
    .game-col-pet { grid-area: pet; }
    #gameTalents {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .game-talent-meta,
    .game-talent-branch.branch-support {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1100px) {
    .game-hero {
        min-height: 700px;
        grid-template-columns: minmax(540px, 720px) minmax(420px, 1fr);
        align-items: center;
        padding: 76px 56px 58px;
    }
    .game-hero h2 { font-size: 76px; }
    .game-hero-content {
        grid-column: 1;
    }
    .game-hero-scene {
        position: absolute;
        grid-column: auto;
    }
    .game-dashboard {
        grid-template-columns: minmax(250px, 300px) minmax(430px, 1fr) minmax(320px, 360px);
        grid-template-areas:
            "left mid right"
            "pet mid right";
        gap: 22px;
    }
    #gameTalents { display: block; }
}
@media (min-width: 1440px) {
    .game-hero { min-height: 720px; padding-left: 76px; padding-right: 76px; }
    .game-hero h2 { font-size: 86px; }
    .game-dashboard {
        grid-template-columns: 310px minmax(500px, 1fr) 370px;
        gap: 24px;
    }
}
@keyframes gameHeroContentIn {
    from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes gamePanelIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes gameScanDrift {
    from { transform: translateY(0); }
    to { transform: translateY(24px); }
}
@keyframes gameGridSweep {
    from { background-position: 0 0, 0 0; }
    to { background-position: 240px 0, 0 180px; }
}
@keyframes gameCtaSheen {
    0%, 45% { transform: translateX(-65%) skewX(-18deg); }
    70%, 100% { transform: translateX(65%) skewX(-18deg); }
}
@keyframes gameSigilTurn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes gameRingSpin {
    from { transform: translate(-50%, -50%) rotateX(64deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(64deg) rotateZ(360deg); }
}
@keyframes gameBossFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.03); }
}
@keyframes gameAuraPulse {
    0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(.92); opacity: .62; }
    50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.06); opacity: 1; }
}
@keyframes gameGlyphRise {
    0%, 100% { transform: translate(-50%, -46%); opacity: .34; }
    50% { transform: translate(-50%, -58%); opacity: .72; }
}
@keyframes gameHeroFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}
@keyframes gameSwordOne {
    0%, 100% { transform: translate(0,0) rotate(18deg); }
    50% { transform: translate(38px,-34px) rotate(58deg); }
}
@keyframes gameSwordTwo {
    0%, 100% { transform: translate(0,0) rotate(-20deg); }
    50% { transform: translate(-42px,-22px) rotate(-62deg); }
}
@keyframes gameSwordThree {
    0%, 100% { transform: translate(0,0) rotate(40deg); }
    50% { transform: translate(22px,36px) rotate(88deg); }
}
@keyframes gameParticleRise {
    0% { opacity: 0; transform: translateY(36px) scaleY(.5); }
    20% { opacity: .75; }
    100% { opacity: 0; transform: translateY(-120px) scaleY(1.2); }
}
@keyframes gamePreviewDrift {
    0%, 100% { transform: perspective(980px) rotateY(-6deg) rotateX(2deg) translateY(0); }
    50% { transform: perspective(980px) rotateY(-4deg) rotateX(3deg) translateY(-8px); }
}
@keyframes gameMapPan {
    from { transform: translate3d(0, 0, 0) scale(1.04); }
    to { transform: translate3d(-32px, -32px, 0) scale(1.04); }
}
@keyframes gamePlayerStep {
    0%, 100% { transform: translate(-50%, -50%) scale(1.18); }
    50% { transform: translate(-50%, -54%) scale(1.18); }
}
@keyframes gamePreviewAura {
    0%, 100% { transform: translate(-50%, -50%) scale(.82); opacity: .42; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: .88; }
}
@keyframes gameEnemyPush {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10px, 7px); }
}
@keyframes gameSkillStrike {
    0%, 100% { transform: translate(0, -4px) scale(.82); opacity: .28; }
    38% { transform: translate(8px, 14px) scale(1.18); opacity: 1; }
    62% { transform: translate(10px, 16px) scale(.92); opacity: .55; }
}
@keyframes gameSkillPulse {
    0%, 100% { transform: scale(.72) rotate(0deg); opacity: .36; }
    48% { transform: scale(1.12) rotate(18deg); opacity: .95; }
}
@keyframes gameProjectileOne {
    from { transform: translate(0, 0) rotate(18deg); opacity: .2; }
    20%, 82% { opacity: 1; }
    to { transform: translate(235px, -84px) rotate(34deg); opacity: .08; }
}
@keyframes gameProjectileTwo {
    from { transform: translate(0, 0) rotate(132deg); opacity: .2; }
    18%, 80% { opacity: 1; }
    to { transform: translate(-210px, 108px) rotate(148deg); opacity: .08; }
}
@keyframes gameProjectileThree {
    from { transform: translate(0, 0) rotate(-22deg); opacity: .2; }
    18%, 82% { opacity: 1; }
    to { transform: translate(190px, -36px) rotate(-4deg); opacity: .08; }
}
@keyframes gameLootPop {
    0%, 100% { transform: translateY(0) scale(.9); opacity: .72; }
    50% { transform: translateY(-8px) scale(1.05); opacity: 1; }
}
@keyframes gameDamageFloat {
    0% { transform: translateY(10px); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-28px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #gameWelcomePage::before,
    .game-hero::before,
    .game-hero-content,
    .game-start-btn::before,
    .game-scene-moon,
    .game-scene-ring,
    .game-scene-boss,
    .game-character-aura,
    .game-character-glyph,
    .game-character-body,
    .game-scene-sword,
    .game-battle-preview,
    .game-preview-map,
    .game-preview-player,
    .game-preview-aura,
    .game-preview-boss,
    .game-preview-enemy,
    .game-preview-skill,
    .game-preview-projectile,
    .game-preview-loot,
    .game-preview-damage,
    .game-scene-particles span,
    .game-col {
        animation: none !important;
    }
}

/* ===== 战斗页 ===== */
/* 战斗页全屏覆盖：脱离 flex 布局，铺满整个视口，避免被左侧应用列/侧栏挤压遮挡 */
#gamePlayPage { padding: 0 !important; overflow: hidden; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; z-index: 100 !important; }
#gameCanvasWrap { position: absolute; inset: 0; }
#gameCanvas { display: block; width: 100%; height: 100%; background: #05060e; image-rendering: pixelated; touch-action: none; }

/* HUD */
.game-hud { position: absolute; top: 0; left: 0; right: 0; padding: 8px 10px; pointer-events: none; z-index: 50; background: linear-gradient(180deg, rgba(5,6,14,.85), rgba(5,6,14,0)); }
/* 移动端：避开顶部 mobileNavBar(44px) */
@media (max-width: 767px) {
    .game-hud { top: 44px; }
}
.game-hud-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.game-hud-bars { flex: 1; min-width: 140px; max-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.game-bar { height: 14px; border-radius: 7px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15); overflow: hidden; position: relative; }
.game-bar-fill { height: 100%; transition: width .15s; }
.game-hp-fill { background: linear-gradient(90deg, #dc2626, #f87171); }
.game-xp-fill { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.game-bar-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; top: 0; line-height: 14px; pointer-events: none; }
.game-bar-wrap { position: relative; }

/* 局内临时加成（经验条下方，显示当前叠加的攻/暴伤/回血） */
.game-run-buffs { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 3px; max-width: 240px; }
.game-run-buffs:empty { display: none; }
.game-run-buff { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 8px;
    font-size: 10px; font-weight: 700; line-height: 14px; border: 1px solid; text-shadow: 0 1px 2px #000; }
.game-run-buff.dmg { color: #fca5a5; background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.5); }
.game-run-buff.critdmg { color: #fde047; background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.5); }
.game-run-buff.regen { color: #86efac; background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.5); }

.game-hud-stats { display: flex; gap: 10px; color: var(--gold-light); font-size: 13px; font-weight: 600;
    text-shadow: 0 1px 3px #000; pointer-events: auto; }
.game-hud-stats span { display: inline-flex; align-items: center; gap: 4px; }
.game-pause-btn {
    pointer-events: auto; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
    background: rgba(0,0,0,.5); border: 1px solid var(--border-gold); color: var(--gold-light); font-size: 14px;
}

/* 虚拟摇杆 */
.game-joystick {
    position: absolute; left: 24px; bottom: 28px; width: 120px; height: 120px; z-index: 6;
    touch-action: none; user-select: none;
}
.game-joystick-base {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,.1), rgba(0,0,0,.35));
    border: 2px solid rgba(212,175,55,.3);
}
.game-joystick-knob {
    position: absolute; width: 52px; height: 52px; left: 34px; top: 34px; border-radius: 50%;
    background: radial-gradient(circle, var(--gold-light), var(--gold));
    border: 2px solid var(--gold); box-shadow: 0 2px 10px rgba(0,0,0,.5);
    transition: left .05s, top .05s;
}

/* 武器/被动槽位栏（右下角，6 武器槽 + 6 被动槽骨架） */
.game-weapons-bar {
    position: absolute; right: 14px; bottom: 20px; z-index: 50;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
    pointer-events: none;
}

/* 角色专属技能 CD 栏（左下角，置于虚拟摇杆右侧，避免与摇杆/武器栏三方重叠）。
   摇杆 left:24px + 宽120px = 右边缘 144px，技能栏 left:158px 留 14px 间距 */
.game-skill-bar {
    position: absolute; left: 158px; bottom: 36px; z-index: 50; pointer-events: none;
}
/* 窄屏（<360px，小手机）：摇杆缩窄后仍可能贴近，技能栏下移并收窄 */
@media (max-width: 359px) {
    .game-skill-bar { left: 150px; bottom: 24px; }
    .game-skill-chip { min-width: 110px; padding: 5px 9px; }
    .game-skill-name { font-size: 11px; }
}
.game-skill-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; min-width: 150px;
    background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.12));
    border: 1px solid var(--border-gold); border-radius: 999px;
    backdrop-filter: blur(2px); position: relative; overflow: hidden;
    box-shadow: 0 2px 12px rgba(124,58,237,.2);
}
.game-skill-chip.ready { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34,211,238,.4); }
.game-skill-ic { font-size: 18px; line-height: 1; filter: drop-shadow(0 0 4px var(--gold-dim)); }
.game-skill-name { font-family: var(--font-title); color: var(--gold-light); font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.game-skill-cd { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.game-skill-chip.ready .game-skill-cd { color: var(--cyan); }
.game-skill-pbar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(0,0,0,.4); border-radius: 0 0 999px 999px; }
.game-skill-pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); transition: width .2s; }
.game-slot-grid {
    display: grid; grid-template-columns: repeat(6, 34px); gap: 4px;
}
.game-slot {
    position: relative; width: 34px; height: 34px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(8,6,20,.82); border: 1px solid var(--border-gold); border-radius: 7px;
    backdrop-filter: blur(2px); overflow: visible; cursor: help; pointer-events: auto;
}
/* 冷却条裁剪由自身负责（slot 改 overflow:visible 以容纳 tooltip） */
.game-slot-cd { overflow: hidden; border-radius: 7px 7px 0 0; }
/* hover 提示：武器/被动名称+描述，从槽位上方弹出 */
.game-slot-tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    min-width: 130px; max-width: 200px; padding: 7px 10px; border-radius: 8px;
    background: rgba(8,6,20,.96); border: 1px solid var(--border-gold);
    color: var(--gold-light); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: normal; text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.6); z-index: 60; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s;
}
.game-slot-tip i { display: block; font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.game-slot-tip b { display: block; font-size: 11px; font-weight: 600; color: #c4b5fd; margin-top: 3px; }
.game-slot.passive .game-slot-tip { border-color: rgba(139,92,246,.5); }
.game-slot:hover .game-slot-tip,
.game-slot:focus-visible .game-slot-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.game-slot.empty { background: rgba(8,6,20,.45); border: 1px dashed rgba(212,175,55,.25); opacity: .5; }
.game-slot.passive { border-color: rgba(139,92,246,.55); }
.game-slot.passive-empty { border-color: rgba(139,92,246,.25); }
.game-slot.evolved { border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,.4); }
.game-slot-bonus-wrap {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 5px; border: 1px solid rgba(34,211,238,.28); border-radius: 7px;
    background: rgba(8,6,20,.42);
}
.game-slot-bonus-title {
    width: 24px; color: var(--cyan); font-size: 10px; font-weight: 800; line-height: 12px;
    text-align: center; text-shadow: 0 0 6px rgba(34,211,238,.55);
}
.game-slot-extra { grid-template-columns: repeat(6, 30px); gap: 3px; }
.game-slot-extra .game-slot { width: 30px; height: 30px; }
.game-slot.bonus { border-color: rgba(34,211,238,.62); box-shadow: 0 0 8px rgba(34,211,238,.22); }
.game-slot.bonus.passive { border-color: rgba(196,181,253,.62); box-shadow: 0 0 8px rgba(139,92,246,.22); }
.game-slot-ic { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 3px rgba(212,175,55,.3)); }
.game-slot-img {
    width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; display: block;
}
.game-slot-img-fallback {
    width: 24px; height: 24px; align-items: center; justify-content: center;
    color: var(--gold); font-size: 13px; line-height: 1;
}
.game-slot.empty .game-slot-ic { color: var(--text-dim); font-size: 12px; filter: none; }
.game-slot-lv {
    position: absolute; bottom: 0; left: 0; right: 0;
    font-size: 8px; font-weight: 700; color: var(--cyan); text-align: center;
    background: rgba(0,0,0,.5); line-height: 11px;
}
.game-slot-affix {
    position: absolute; top: 3px; right: 3px; width: 11px; height: 11px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(0,0,0,.68);
    font-size: 9px; line-height: 1; box-shadow: 0 0 6px currentColor;
}
.game-slot-catalyst {
    position: absolute; top: 3px; left: 3px; width: 11px; height: 11px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(124,58,237,.76);
    color: #fef3c7; font-size: 9px; line-height: 1; font-weight: 800;
    box-shadow: 0 0 6px rgba(196,181,253,.7);
}
.game-slot.passive .game-slot-lv { color: #c4b5fd; }
.game-slot-cd { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,.5); }
.game-slot-cd i { display: block; height: 100%; background: var(--cyan); transition: width .05s; }

/* 当前地图名 / BOSS 血条（顶部居中，独立一行置于 HP/EXP 条下方，避免与统计信息重叠；
   BOSS 出现时由 JS 隐藏地图名让位给血条） */
.game-map-bar {
    position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
    color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-shadow: 0 1px 3px #000; z-index: 51; pointer-events: none;
    padding: 3px 14px; border-radius: 999px;
    background: rgba(8,6,20,.6); border: 1px solid var(--border-gold);
}
/* 移动端：HUD 已下移到 44px，地图名/BOSS 条同步下移避免被 mobileNavBar 遮挡 */
@media (max-width: 767px) {
    .game-map-bar { top: 122px; }
}

/* BOSS/精英血条（顶部居中，与地图名同位；BOSS 出现时 JS 隐藏地图名腾位） */
.game-boss-bar {
    position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
    width: min(280px, 64vw); text-align: center; z-index: 51;
}
@media (max-width: 767px) {
    .game-boss-bar { top: 122px; }
}

/* 挑战进度条（满级后激活，与地图名/BOSS条同位轮换显示） */
.game-challenge-bar {
    position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
    width: min(260px, 60vw); z-index: 51; display: flex; align-items: center; gap: 8px;
    padding: 5px 14px; border-radius: 999px;
    background: rgba(8,6,20,.7); border: 1px solid #fde047;
    box-shadow: 0 0 10px rgba(253,224,71,.2);
}
@media (max-width: 767px) {
    .game-challenge-bar { top: 122px; }
}
.game-challenge-bar .gc-name { color: #fde047; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.game-challenge-bar .gc-time { color: #f87171; font-size: 11px; font-weight: 700; white-space: nowrap; }
.game-challenge-bar .gc-pbar { position: relative; flex: 1; height: 6px; background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; }
.game-challenge-bar .gc-pbar i { display: block; height: 100%; background: linear-gradient(90deg, #fbbf24, #fde047); transition: width .15s; }
.game-boss-name {
    display: block; color: var(--gold-light); font-size: 12px; font-weight: 700;
    text-shadow: 0 1px 3px #000; margin-bottom: 3px; letter-spacing: 1px;
}
.game-boss-track {
    height: 8px; background: rgba(0,0,0,.7); border: 1px solid var(--border-gold); border-radius: 4px; overflow: hidden;
    box-shadow: 0 0 8px rgba(220,38,38,.4);
}
.game-boss-fill {
    height: 100%; background: linear-gradient(90deg, #7c3aed, #dc2626); transition: width .15s;
}

/* 升级选择弹窗 / 暂停 / 结算 通用遮罩 */
.game-overlay {
    position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
    background: rgba(5,6,14,.82); backdrop-filter: blur(3px); padding: 20px;
}
#gameDestinyOverlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
    overflow-x: hidden;
    overflow-y: auto;
}
#gameDestinyOverlay .game-modal {
    margin: auto;
    max-height: min(86dvh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.game-modal {
    width: 100%; max-width: 420px; padding: 22px 18px; text-align: center;
    background: linear-gradient(160deg, rgba(20,18,40,.98), rgba(12,10,26,.98));
    border: 1px solid var(--border-gold); border-radius: 16px;
    box-shadow: 0 12px 50px rgba(0,0,0,.7);
}
.game-modal h3 { font-family: var(--font-title); color: var(--gold-light); font-size: 20px; letter-spacing: 3px; margin-bottom: 4px; }
.game-title-icon {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    margin-right: 8px; vertical-align: middle; letter-spacing: 0;
}
.game-title-img {
    width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; display: block;
}
.game-title-img-fallback {
    width: 28px; height: 28px; align-items: center; justify-content: center; font-size: 18px;
}
.game-modal .sub { color: var(--text-secondary); font-size: 12px; margin-bottom: 16px; }

.game-levelup-cards { display: flex; flex-direction: column; gap: 10px; }
.game-levelup-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
.game-levelup-card:hover { transform: translateX(4px); border-color: var(--cyan); box-shadow: 0 4px 16px rgba(74,240,224,.18); }
.game-levelup-card .ic { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(74,240,224,.12); border-radius: 8px; color: var(--cyan); font-size: 20px; }
.game-card-img {
    width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; display: block;
    filter: drop-shadow(0 0 5px rgba(212,175,55,.32));
}
.game-card-img-fallback {
    width: 32px; height: 32px; align-items: center; justify-content: center;
    color: var(--cyan); font-size: 18px; line-height: 1;
}
.game-levelup-card .nm { color: var(--gold-light); font-size: 14px; font-weight: 600; }
.game-levelup-card .ds { color: var(--text-secondary); font-size: 11px; margin-top: 2px; line-height: 1.4; }
.game-levelup-card .new { margin-left: auto; color: var(--gold); font-size: 10px; }
.game-levelup-card .new.evo { color: #fde047; text-shadow: 0 0 6px rgba(253,224,71,.6); }
/* 进化项：金色发光描边 */
.game-levelup-card.rarity-evolve {
    border-color: var(--gold); box-shadow: 0 0 16px rgba(212,175,55,.4);
    background: linear-gradient(135deg, rgba(212,175,55,.15), var(--bg-card));
}
.game-levelup-card.rarity-evolve .ic { background: rgba(212,175,55,.25); color: var(--gold-light); }
/* 稀有项（新武器）：紫色描边 */
.game-levelup-card.rarity-rare { border-color: var(--purple); box-shadow: 0 0 10px rgba(139,92,246,.25); }
.game-levelup-card.rarity-rare .ic { background: rgba(139,92,246,.18); color: #c4b5fd; }
.game-destiny-cards, .game-adventure-cards { display: flex; flex-direction: column; gap: 10px; }
.game-destiny-card { border-color: rgba(34,211,238,.45); }
.game-destiny-card .ic { background: rgba(34,211,238,.12); color: var(--cyan); }
.game-adventure-card { border-color: rgba(212,175,55,.45); }
.game-adventure-card .ic { background: rgba(212,175,55,.16); color: var(--gold-light); }
.game-run-buff.destiny {
    color: var(--cyan); border-color: rgba(34,211,238,.35);
    background: rgba(34,211,238,.12);
}
/* 宝箱选择环节卡片（领取/丢弃双按钮） */
.game-chest-choice { display: flex; align-items: center; gap: 10px; }
.game-chest-choice > div:nth-child(2) { flex: 1; min-width: 0; }
.game-chest-take, .game-chest-drop {
    flex-shrink: 0; padding: 6px 14px; border-radius: 8px; cursor: pointer;
    font-family: var(--font-title); font-size: 12px; font-weight: 600; letter-spacing: 1px;
    border: 1px solid; transition: transform .12s, box-shadow .12s;
}
.game-chest-take { background: linear-gradient(135deg, var(--gold), #b8941f); border-color: var(--gold); color: #1a1410; }
.game-chest-take:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,175,55,.4); }
.game-chest-drop { background: transparent; border-color: var(--text-dim); color: var(--text-dim); }
.game-chest-drop:hover { border-color: #f87171; color: #f87171; }
.game-chest-take:disabled, .game-chest-drop:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* 境界提升刷新按钮（局内花金币重掷三选一，费用翻倍递增） */
.game-levelup-refresh {
    padding: 9px 20px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(103,232,249,.18), rgba(212,175,55,.12));
    border: 1px solid var(--cyan); color: var(--gold-light);
    font-family: var(--font-title); font-size: 13px; font-weight: 600; letter-spacing: 1px;
    transition: transform .12s, box-shadow .12s, opacity .12s;
}
.game-levelup-refresh:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(103,232,249,.3); }
.game-levelup-refresh:disabled { cursor: not-allowed; }
.game-levelup-refresh .cost { color: var(--gold); font-size: 12px; }
.game-levelup-refresh .fa-sync-alt { color: var(--cyan); transition: transform .4s; }
.game-levelup-refresh:hover:not(:disabled) .fa-sync-alt { transform: rotate(180deg); }

/* 境界提升底部操作区（刷新按钮 + 自动加点勾选框） */
.game-levelup-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
/* 自动加点勾选框（仅满级后临时加成卡时显示） */
.game-levelup-autobuff { display: flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 14px; border-radius: 999px; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4);
    color: #fca5a5; font-size: 12px; font-weight: 600; user-select: none; transition: background .12s; }
.game-levelup-autobuff:hover { background: rgba(248,113,113,.18); }
.game-levelup-autobuff input { accent-color: #f87171; cursor: pointer; }

.game-result-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 14px 0; }
.game-result-stat { padding: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border-gold); border-radius: 8px; }
.game-result-stat .v { color: var(--cyan); font-size: 20px; font-weight: 700; }
.game-result-stat .k { color: var(--text-secondary); font-size: 11px; }
.game-result-coins { color: var(--gold-light); font-size: 22px; font-weight: 700; margin: 6px 0 14px; }
.game-result-newrec { color: var(--gold); font-size: 12px; margin-bottom: 10px; }
.game-modal-btns { display: flex; gap: 10px; }
.game-modal-btns .game-cta { margin-top: 0; }

/* 复活弹窗 */
.game-revive-modal { border-color: var(--gold); box-shadow: 0 0 30px rgba(212,175,55,.3), 0 12px 50px rgba(0,0,0,.7); }
.game-revive-cost { color: var(--gold-light); font-size: 26px; font-weight: 700; margin: 10px 0 4px; text-shadow: 0 0 12px rgba(212,175,55,.4); }
.game-revive-balance { color: var(--text-secondary); font-size: 12px; margin-bottom: 14px; }

/* ===== 开箱动画 ===== */
#gameChestOverlay { overflow: hidden; }
#gameChestOverlay.super-chest { background: radial-gradient(ellipse at center, rgba(139,92,246,.25), rgba(0,0,0,.88)); }
.game-chest-content { position: relative; z-index: 3; text-align: center; animation: gameChestContentIn .5s ease both .3s; }
.game-chest-content h3 { font-family: var(--font-title); font-size: 28px; color: var(--gold-light); letter-spacing: 4px; text-shadow: 0 0 18px rgba(212,175,55,.6); margin-bottom: 4px; }
#gameChestOverlay.super-chest .game-chest-content h3 { color: #e9d5ff; text-shadow: 0 0 22px rgba(192,132,252,.7); }
.game-chest-content .sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 18px; }
.game-chest-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 520px; margin: 0 auto 16px; }
.game-chest-cards.super { max-width: 640px; }

/* 光柱爆裂层：放射状光线 + 中心闪光 */
.game-chest-rays { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.game-chest-rays.burst {
    animation: gameRaysBurst 1.2s ease-out both;
    background:
        conic-gradient(from 0deg, transparent 0 8deg, rgba(212,175,55,.55) 8deg 12deg, transparent 12deg 28deg,
            rgba(212,175,55,.45) 28deg 32deg, transparent 32deg 48deg, rgba(212,175,55,.55) 48deg 52deg,
            transparent 52deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 8%, #000 9%, #000 60%, transparent 75%);
            mask: radial-gradient(circle, transparent 8%, #000 9%, #000 60%, transparent 75%);
}
.game-chest-rays.super {
    background:
        conic-gradient(from 0deg, transparent 0 6deg, rgba(192,132,252,.6) 6deg 10deg, transparent 10deg 24deg,
            rgba(192,132,252,.5) 24deg 28deg, transparent 28deg 42deg, rgba(192,132,252,.6) 42deg 46deg,
            transparent 46deg 60deg, rgba(192,132,252,.5) 60deg 64deg, transparent 64deg 360deg);
}
@keyframes gameRaysBurst {
    0% { opacity: 0; transform: scale(.3) rotate(0); }
    30% { opacity: 1; transform: scale(1) rotate(40deg); }
    100% { opacity: .35; transform: scale(1.4) rotate(120deg); }
}

/* 宝箱开启动画：中央宝箱图标 震动→爆开 */
.game-chest-anim {
    position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
    width: 90px; height: 90px; pointer-events: none; opacity: 0;
    background:
        radial-gradient(circle at 50% 60%, rgba(212,175,55,.4), transparent 60%),
        linear-gradient(180deg, #d4af37 0 35%, #8b5a2b 35% 100%);
    border-radius: 10px 10px 6px 6px; border: 3px solid #fde047;
    box-shadow: 0 0 40px rgba(212,175,55,.7);
    animation: gameChestOpen .9s ease-in both;
}
.game-chest-anim.super {
    background:
        radial-gradient(circle at 50% 60%, rgba(192,132,252,.5), transparent 60%),
        linear-gradient(180deg, #c084fc 0 35%, #6b21a8 35% 100%);
    border-color: #e9d5ff; box-shadow: 0 0 55px rgba(192,132,252,.8);
}
.game-chest-anim.opening { animation: gameChestOpen .9s ease-in both; }
.game-chest-anim::after {
    content: ''; position: absolute; top: 33%; left: 50%; width: 6px; height: 14px; transform: translateX(-50%);
    background: #fde047; border-radius: 2px;
}
@keyframes gameChestOpen {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    25% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
    35% { transform: translate(-50%,-52%) scale(1.05) rotate(-3deg); }
    45% { transform: translate(-50%,-48%) scale(1.1) rotate(3deg); }
    55% { transform: translate(-50%,-52%) scale(1.05) rotate(-2deg); }
    70% { opacity: 1; transform: translate(-50%,-50%) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.2); }
}

/* 道具卡：从下方弹出 + 缩放 + 发光，带级联延迟（animationDelay 由 JS 设置） */
.game-chest-card {
    display: flex; align-items: center; gap: 10px; width: 230px; padding: 12px;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px;
    opacity: 0; animation: gameChestCardPop .5s cubic-bezier(.2,1.4,.4,1) both;
    box-shadow: 0 0 16px rgba(212,175,55,.2);
}
.game-chest-card .ic {
    width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center;
    background: rgba(74,240,224,.10); border-radius: 8px;
    font-size: 30px; filter: drop-shadow(0 0 6px rgba(212,175,55,.4));
}
.game-chest-card .nm { font-family: var(--font-title); color: var(--gold-light); font-size: 14px; font-weight: 600; }
.game-chest-card .ds { color: var(--text-secondary); font-size: 11px; margin-top: 2px; }
.game-chest-card .new { margin-left: auto; font-size: 10px; color: var(--cyan); border: 1px solid var(--cyan); padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.game-chest-card.rarity-rare { border-color: var(--cyan); box-shadow: 0 0 18px rgba(74,240,224,.3); }
.game-chest-card.rarity-rare .new { color: var(--cyan); border-color: var(--cyan); }
.game-chest-card.rarity-evolve { border-color: var(--purple); box-shadow: 0 0 22px rgba(139,92,246,.45); }
.game-chest-card.rarity-evolve .new { color: #c4b5fd; border-color: var(--purple); }
.game-chest-card.rarity-evolve .new.evo { background: rgba(139,92,246,.15); }
@keyframes gameChestCardPop {
    0% { opacity: 0; transform: translateY(40px) scale(.6); }
    60% { opacity: 1; transform: translateY(-6px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 通关宝箱揭晓特效（情绪价值拉满） ===== */
/* 通关宝箱卡片：可点击、悬停浮起、金色光晕 */
.game-chest-card.clear-chest { cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .3s; }
.game-chest-card.clear-chest:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 8px 28px rgba(212,175,55,.45); border-color: var(--gold); }
/* 阶段1：选中后抖动蓄势（0.5s） */
.game-chest-card.reveal-shake { animation: gameClearChestShake .5s ease-in-out both; z-index: 5; box-shadow: 0 0 30px rgba(253,224,71,.6); border-color: #fde047; }
@keyframes gameClearChestShake {
    0%,100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-8px) rotate(-3deg); }
    30% { transform: translateX(8px) rotate(3deg); }
    45% { transform: translateX(-6px) rotate(-2deg); }
    60% { transform: translateX(6px) rotate(2deg); }
    75% { transform: translateX(-3px) rotate(-1deg); }
}
/* 阶段2：揭晓爆裂——卡片放大 + 金光爆开 */
.game-chest-card.reveal-burst { animation: gameClearChestBurst .6s cubic-bezier(.2,1.6,.4,1) both; z-index: 6; }
@keyframes gameClearChestBurst {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); box-shadow: 0 0 40px rgba(253,224,71,.8); }
    70% { transform: scale(1.18); }
    100% { transform: scale(1.2); box-shadow: 0 0 28px rgba(253,224,71,.5); }
}
/* 揭晓的大倍率数字（×N）—— 金色描边 + 发光 + 脉冲 */
.game-chest-card .reveal-ic { font-size: 38px; animation: gameClearIcPulse 1s ease-in-out infinite; }
@keyframes gameClearIcPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.game-chest-card .reveal-mult {
    font-family: var(--font-title); font-size: 32px; font-weight: 800; letter-spacing: 2px;
    text-shadow: 0 0 12px currentColor, 0 2px 4px #000;
    animation: gameClearMultIn .5s cubic-bezier(.2,1.8,.4,1) both;
}
@keyframes gameClearMultIn {
    0% { opacity: 0; transform: scale(.3) rotate(-10deg); }
    60% { opacity: 1; transform: scale(1.3) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* jackpot 背景金光脉冲（×10 专属） */
#gameChestOverlay.jackpot-bg { background: radial-gradient(ellipse at center, rgba(253,224,71,.35), rgba(139,92,246,.2), rgba(0,0,0,.9)); animation: gameJackpotBg 1.2s ease-in-out infinite; }
@keyframes gameJackpotBg { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
/* 光柱 jackpot 加固态金光 */
.game-chest-rays.jackpot { opacity: 1 !important; filter: hue-rotate(-30deg) brightness(1.4); }
@keyframes gameChestContentIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.game-chest-continue { margin-top: 8px; animation: gameChestContentIn .4s ease both; }

/* ===== 渡劫飞升动画（撑满20分钟） ===== */
.game-ascend { background: radial-gradient(ellipse at center, rgba(212,175,55,.2), rgba(5,6,14,.95)); overflow: hidden; }
/* 金光放射爆裂层 */
.game-ascend-rays { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
    background: conic-gradient(from 0deg, transparent 0 5deg, rgba(253,224,71,.5) 5deg 9deg, transparent 9deg 24deg,
        rgba(251,191,36,.4) 24deg 28deg, transparent 28deg 42deg, rgba(253,224,71,.5) 42deg 46deg,
        transparent 46deg 60deg, rgba(251,191,36,.4) 60deg 64deg, transparent 64deg 78deg,
        rgba(253,224,71,.5) 78deg 82deg, transparent 82deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 6%, #000 7%, #000 70%, transparent 85%);
            mask: radial-gradient(circle, transparent 6%, #000 7%, #000 70%, transparent 85%);
}
.game-ascend.show .game-ascend-rays { animation: ascendRays 4s ease-out both; }
@keyframes ascendRays {
    0% { opacity: 0; transform: scale(.2) rotate(0); }
    15% { opacity: 1; transform: scale(1.1) rotate(30deg); }
    100% { opacity: .4; transform: scale(1.6) rotate(360deg); }
}
/* 道家符文环（旋转太极/八卦感） */
.game-ascend-rune { position: absolute; top: 50%; left: 50%; z-index: 2; width: 280px; height: 280px;
    transform: translate(-50%,-50%) scale(0); opacity: 0; pointer-events: none;
    border: 2px solid rgba(253,224,71,.6); border-radius: 50%;
    box-shadow: 0 0 40px rgba(253,224,71,.5), inset 0 0 40px rgba(253,224,71,.3); }
.game-ascend-rune::before, .game-ascend-rune::after {
    content: ''; position: absolute; inset: 30px; border-radius: 50%;
    border: 1px dashed rgba(212,175,55,.5);
}
.game-ascend-rune::after { inset: 60px; border-style: solid; border-color: rgba(253,224,71,.4); }
.game-ascend.show .game-ascend-rune { animation: ascendRune 4s ease-out both; }
@keyframes ascendRune {
    0% { transform: translate(-50%,-50%) scale(0) rotate(0); opacity: 0; }
    20% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(180deg); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.5) rotate(720deg); }
}
/* 垂直金光柱（从中心向上冲天） */
.game-ascend-pillar { position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleY(0); z-index: 2;
    width: 120px; height: 100%; transform-origin: bottom center; pointer-events: none;
    background: linear-gradient(180deg, rgba(253,224,71,0) 0%, rgba(253,224,71,.85) 40%, rgba(253,224,71,.95) 70%, rgba(212,175,55,0) 100%);
    filter: blur(8px); opacity: 0;
}
.game-ascend.show .game-ascend-pillar { animation: ascendPillar 4s ease-out both; }
@keyframes ascendPillar {
    0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
    25% { transform: translateX(-50%) scaleY(1); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(1.1); opacity: .6; }
}
/* 飞升角色（向上飘升） */
.game-ascend-figure { position: absolute; top: 55%; left: 50%; z-index: 3; font-size: 56px;
    transform: translate(-50%,-50%) scale(.5); opacity: 0; pointer-events: none;
    filter: drop-shadow(0 0 16px rgba(253,224,71,.9)); }
.game-ascend.show .game-ascend-figure { animation: ascendFigure 4s ease-out both; }
@keyframes ascendFigure {
    0% { transform: translate(-50%,-30%) scale(.5); opacity: 0; }
    20% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-160%) scale(.7); }
}
/* "渡劫成功"文字爆裂 */
.game-ascend-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4;
    text-align: center; opacity: 0; pointer-events: none; }
.game-ascend-title { font-family: var(--font-title); font-size: 64px; font-weight: 900; letter-spacing: 12px;
    color: #fde047; text-shadow: 0 0 30px rgba(253,224,71,.9), 0 0 60px rgba(251,191,36,.6), 0 4px 8px #000; }
.game-ascend-sub { font-family: var(--font-title); font-size: 20px; letter-spacing: 6px; margin-top: 10px;
    color: #fef3c7; text-shadow: 0 0 16px rgba(253,224,71,.7); }
.game-ascend.show .game-ascend-text { animation: ascendText 4s ease-out both; }
@keyframes ascendText {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(3); filter: blur(20px); }
    25% { opacity: 0; transform: translate(-50%,-50%) scale(3); filter: blur(20px); }
    40% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
    85% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
/* 移动端字号缩小 */
@media (max-width: 600px) {
    .game-ascend-title { font-size: 40px; letter-spacing: 6px; }
    .game-ascend-sub { font-size: 14px; letter-spacing: 3px; }
    .game-ascend-figure { font-size: 40px; }
    .game-ascend-rune { width: 200px; height: 200px; }
}

/* 提示 */
.game-empty { text-align: center; color: var(--text-secondary); font-size: 12px; padding: 30px 0; }
.game-locked-tip { color: var(--text-dim); font-size: 11px; text-align: center; padding: 8px; }

/* 成就墙 */
.game-ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.game-ach-card {
    position: relative; padding: 10px 8px; text-align: center;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px;
    transition: border-color .15s;
}
.game-ach-card.locked { opacity: .5; }
.game-ach-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 0 6px rgba(212,175,55,.4)); display: flex; justify-content: center; }
.game-ach-icon.dim { filter: grayscale(1) opacity(.4); }
.game-ach-img {
    width: 28px;
    height: 28px;
}
.game-ach-name { color: var(--gold-light); font-size: 12px; font-weight: 600; }
.game-ach-desc { color: var(--text-secondary); font-size: 10px; margin-top: 2px; line-height: 1.3; }
.game-ach-lock { color: var(--text-dim); font-size: 9px; margin-top: 3px; }

/* ===== 天赋系统 ===== */
/* 天赋头部：累计投入 + 重置按钮 */
.game-talent-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(212,175,55,.14), rgba(139,92,246,.06));
    border: 1px solid var(--border-gold); border-radius: 10px;
    color: var(--text-secondary); font-size: 12px;
}
.game-talent-meta b { color: var(--gold-light); font-weight: 600; }
.game-talent-reset {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
    background: transparent; border: 1px solid var(--purple); color: #c4b5fd;
    transition: border-color .12s, box-shadow .12s;
}
.game-talent-reset:hover:not(:disabled) { border-color: var(--purple); box-shadow: 0 0 10px rgba(139,92,246,.3); }
.game-talent-reset:disabled { opacity: .35; cursor: not-allowed; }

/* 天赋分支块 */
.game-talent-branch {
    padding: 12px; margin-bottom: 12px;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px;
}
.game-talent-branch.branch-body    { border-left: 3px solid var(--gold); }
.game-talent-branch.branch-magic   { border-left: 3px solid #ef4444; }
.game-talent-branch.branch-support { border-left: 3px solid var(--cyan); }
.game-talent-branch-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(212,175,55,.12);
}
.game-talent-branch-ic { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 6px rgba(212,175,55,.35)); }
.game-talent-branch-img {
    width: 24px;
    height: 24px;
}
.game-talent-branch-name { font-family: var(--font-title); color: var(--gold-light); font-size: 15px; font-weight: 600; letter-spacing: 2px; }
.game-talent-branch-desc { color: var(--text-secondary); font-size: 11px; margin-left: auto; }
.game-talent-lvnum { color: var(--gold-light); font-size: 12px; font-weight: 700; }
.game-talent-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(212,175,55,.18); }
.game-talent-dot.on { background: var(--gold); box-shadow: 0 0 5px var(--gold-dim); }
/* 天赋行复用 .game-upgrade-row，但分支内更紧凑 */
.game-talent-branch .game-upgrade-row { margin-bottom: 7px; }

/* ===== 武器修炼 ===== */
.game-weapon-cultivation-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 11px;
}
.game-weapon-cultivation-summary span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 8px;
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
}
.game-weapon-cultivation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}
.game-weapon-cultivation-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(15,12,35,.82), rgba(34,211,238,.04));
}
.game-weapon-cultivation-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-weapon-cultivation-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(212,175,55,.28));
}
.game-weapon-cultivation-info { min-width: 0; }
.game-weapon-cultivation-name {
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 700;
}
.game-weapon-cultivation-name span {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 600;
}
.game-weapon-cultivation-desc {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-weapon-cultivation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.game-weapon-cultivation-tags span {
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(34,211,238,.22);
    background: rgba(34,211,238,.06);
    color: var(--text-secondary);
    font-size: 10px;
}
.game-weapon-cultivation-card .game-buy-btn {
    min-width: 82px;
}

/* ===== 地图进度卡片 ===== */
.game-map-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .game-map-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .game-map-grid { grid-template-columns: 1fr; } }
.game-map-card {
    position: relative; padding: 10px 12px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.game-map-card:hover:not(.locked) { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 4px 16px rgba(212,175,55,.18); }
.game-map-card.current { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-dim); }
.game-map-card.locked { opacity: .5; cursor: not-allowed; }
.game-map-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.game-map-ic { font-size: 20px; filter: drop-shadow(0 0 6px rgba(212,175,55,.35)); }
.game-map-thumb {
    width: 54px; height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 6px; border: 1px solid rgba(212,175,55,.24);
    background: rgba(7,6,12,.85); box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 0 8px rgba(212,175,55,.12);
}
.game-map-thumb-img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.game-map-thumb-img-fallback {
    width: 100%; height: 100%; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; filter: drop-shadow(0 0 6px rgba(212,175,55,.35));
}
.game-map-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.game-map-titleline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.game-map-name { min-width: 0; font-family: var(--font-title); color: var(--gold-light); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.game-map-tag { margin-left: auto; flex-shrink: 0; font-size: 10px; padding: 2px 7px; border-radius: 5px; font-weight: 600; }
.game-map-tag.cur { color: var(--cyan); border: 1px solid var(--cyan); background: rgba(74,240,224,.08); }
.game-map-tag.lock { color: var(--text-dim); }
.game-map-desc { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.game-map-stats { margin-top: 6px; }
.game-map-cond { color: var(--text-dim); font-size: 10px; margin-top: 6px; }

/* 地图难度 tier 按钮（每图 5 档，已解锁可点选，当前难度高亮，未解锁灰锁） */
.game-map-tiers { display: flex; gap: 5px; margin-top: 8px; }
.game-tier-btn {
    flex: 1; min-width: 0; padding: 6px 0; border-radius: 7px; cursor: pointer; text-align: center;
    background: rgba(8,6,20,.6); border: 1px solid var(--border-gold);
    color: var(--gold-light); font-family: var(--font-title); font-size: 12px; font-weight: 600;
    transition: transform .12s, border-color .12s, box-shadow .12s; position: relative;
}
.game-tier-btn:hover:not(.locked) { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 2px 8px rgba(212,175,55,.2); }
.game-tier-btn.cur { border-color: var(--cyan); background: rgba(74,240,224,.12); box-shadow: 0 0 8px rgba(74,240,224,.3); color: var(--cyan); }
.game-tier-btn.locked { opacity: .35; cursor: not-allowed; border-style: dashed; }
.game-tier-btn .game-tier-star { position: absolute; top: 1px; right: 3px; color: var(--gold); font-size: 9px; }
.game-tier-name { display: block; }
.game-map-tierhint { color: var(--text-dim); font-size: 10px; margin-top: 6px; text-align: center; }
/* 难度 V（噩梦）按钮金色描边高亮，强化"终极挑战"感 */
.game-tier-btn[data-tier="5"]:not(.locked) { border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,.25); }
.game-tier-btn[data-tier="5"].cur { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,.4); }

/* ===== 赏金模式卡片（金色高亮，区别于普通地图） ===== */
.game-map-card.bounty {
    border-color: var(--gold); background: linear-gradient(145deg, var(--bg-card), rgba(212,175,55,.1));
    box-shadow: 0 0 14px rgba(212,175,55,.2);
}
.game-map-card.bounty.current { border-color: #fde047; box-shadow: 0 0 0 2px rgba(253,224,71,.4), 0 0 16px rgba(253,224,71,.3); }
.game-map-card.bounty .game-map-ic { filter: drop-shadow(0 0 8px rgba(253,224,71,.6)); }
.game-map-card.bounty .game-map-name { color: #fde047; }
.game-map-bounty-info { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.game-map-bounty-info .game-codex-tag { background: rgba(253,224,71,.08); border-color: rgba(253,224,71,.4); color: #fde047; }
.game-bounty-enter {
    display: block; width: 100%; margin-top: 12px; padding: 10px 0; border-radius: 8px; cursor: pointer;
    font-family: var(--font-title); font-size: 14px; font-weight: 600; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--gold), #b8941f); border: none; color: #1a1410;
    box-shadow: 0 3px 12px rgba(212,175,55,.3); transition: transform .12s, box-shadow .12s;
}
.game-bounty-enter:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(212,175,55,.45); }
.game-bounty-enter:disabled { background: rgba(255,255,255,.06); border: 1px solid var(--text-dim); color: var(--text-dim); cursor: not-allowed; box-shadow: none; }

/* ===== 无尽之塔卡片（紫色高亮，区别于赏金金色与普通地图） ===== */
.game-map-card.tower {
    border-color: #a78bfa; background: linear-gradient(145deg, var(--bg-card), rgba(167,139,250,.12));
    box-shadow: 0 0 14px rgba(167,139,250,.22);
}
.game-map-card.tower.current { border-color: #c4b5fd; box-shadow: 0 0 0 2px rgba(196,181,253,.4), 0 0 16px rgba(167,139,250,.3); }
.game-map-card.tower .game-map-ic { filter: drop-shadow(0 0 8px rgba(167,139,250,.6)); }
.game-map-card.tower .game-map-name { color: #c4b5fd; }
.game-map-card.tower .game-map-bounty-info .game-codex-tag { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.4); color: #c4b5fd; }
.game-tower-enter {
    display: block; width: 100%; margin-top: 12px; padding: 10px 0; border-radius: 8px; cursor: pointer;
    font-family: var(--font-title); font-size: 14px; font-weight: 600; letter-spacing: 2px;
    background: linear-gradient(135deg, #a78bfa, #7c3aed); border: none; color: #fff;
    box-shadow: 0 3px 12px rgba(124,58,237,.3); transition: transform .12s, box-shadow .12s;
}
.game-tower-enter:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(124,58,237,.45); }

/* ===== 赏金测试配置 ===== */
.game-test-card {
    padding: 12px;
    background: linear-gradient(145deg, var(--bg-card), rgba(253,224,71,.07));
    border: 1px solid rgba(253,224,71,.35);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(212,175,55,.12);
}
.game-test-card.active {
    border-color: #fde047;
    box-shadow: 0 0 0 2px rgba(253,224,71,.18), 0 0 18px rgba(253,224,71,.18);
}
.game-test-toggle, .game-test-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    color: var(--gold-light); font-size: 13px; font-weight: 600;
}
.game-test-check { margin-top: 8px; color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.game-test-toggle input, .game-test-check input { accent-color: #fbbf24; cursor: pointer; }
.game-test-desc { color: var(--text-secondary); font-size: 11px; line-height: 1.45; margin-top: 5px; }
.game-test-levels {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.game-test-levels label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--text-secondary); font-size: 11px;
}
.game-test-levels input {
    width: 48px; padding: 5px 6px; border-radius: 7px;
    background: rgba(8,6,20,.72); border: 1px solid var(--border-gold);
    color: var(--gold-light); text-align: center;
}
.game-test-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.game-test-actions .game-buy-btn { flex: 1; min-width: 82px; }
.game-test-list { display: grid; gap: 6px; }
.game-test-row {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) 42px 22px; align-items: center; gap: 6px;
    padding: 6px; background: rgba(255,255,255,.025); border: 1px solid rgba(212,175,55,.14); border-radius: 8px;
}
.game-test-slot {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 6px; background: rgba(212,175,55,.12); color: var(--gold-light); font-size: 10px; font-weight: 700;
}
.game-test-select {
    min-width: 0; width: 100%; padding: 5px 6px; border-radius: 7px;
    background: rgba(8,6,20,.72); border: 1px solid rgba(212,175,55,.28);
    color: var(--text-primary); font-size: 11px;
}
.game-test-level { color: var(--cyan); font-size: 10px; text-align: right; white-space: nowrap; }
.game-test-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 5px rgba(212,175,55,.35));
}
.game-test-img {
    width: 24px;
    height: 24px;
}

/* 天赋"不可重置"提示（取代原重置按钮） */
.game-talent-noreet { color: var(--text-dim); font-size: 12px; opacity: .8; }

/* 三栏布局下角色卡竖排（左栏窄） */
@media (min-width: 1280px) {
    .game-char-grid { grid-template-columns: 1fr 1fr; }
    .game-records { grid-template-columns: 1fr 1fr; }
    .game-ach-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== 灵兽（宠物）面板 ===== */
.game-section-subtitle { font-size: 11px; color: var(--text-secondary); margin: 12px 0 6px; font-weight: 600; }
/* 形态展示卡 */
.game-pet-card {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 12px;
}
.game-pet-card.form-cub      { border-left: 3px solid #a3e635; }
.game-pet-card.form-grown    { border-left: 3px solid var(--cyan); }
.game-pet-card.form-ultimate { border-left: 3px solid var(--gold); box-shadow: 0 0 16px rgba(212,175,55,.18); }
.game-pet-avatar { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 8px rgba(212,175,55,.4)); }
.game-pet-avatar-img {
    width: 40px;
    height: 40px;
}
.game-pet-info { flex: 1; min-width: 0; }
.game-pet-name { font-family: var(--font-title); color: var(--gold-light); font-size: 14px; font-weight: 600; }
.game-pet-lv { color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.game-pet-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--text-secondary); }
.game-pet-stats span { display: inline-flex; align-items: center; gap: 2px; }
/* 操作按钮行 */
.game-pet-action { margin-top: 8px; }
.game-pet-action .game-buy-btn { width: 100%; }
/* 进化 */
.game-pet-evolve {
    margin-top: 10px; padding: 10px;
    background: rgba(139,92,246,.06); border: 1px dashed rgba(139,92,246,.3); border-radius: 10px;
}
.game-pet-evolve-head { font-size: 12px; color: var(--gold-light); margin-bottom: 6px; }
.game-pet-lock { color: var(--text-dim); font-size: 10px; }
.game-pet-evolve-mats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.game-pet-evolve-mats .game-codex-tag.need { color: #f87171; border-color: rgba(248,113,113,.4); }
.game-pet-evolve .game-buy-btn.evolve { width: 100%; }
.game-buy-btn.evolve:not(:disabled) { border-color: var(--purple); color: #c4b5fd; }
.game-buy-btn.small { padding: 4px 10px; font-size: 11px; width: auto; margin-top: 0; }
/* 材料栏 */
.game-pet-mats { display: flex; flex-direction: column; gap: 5px; }
.game-pet-mat {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: rgba(255,255,255,.02); border-radius: 8px;
}
.game-pet-mat.rare { background: rgba(139,92,246,.06); }
.game-pet-mat-ic { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; }
.game-pet-mat-img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(212,175,55,.25));
}
.game-pet-mat-info { flex: 1; min-width: 0; }
.game-pet-mat-name { font-size: 12px; color: var(--text-primary); }
.game-pet-mat-desc { font-size: 10px; color: var(--text-secondary); }
.game-pet-mat-rare { font-size: 10px; color: var(--purple); }
/* 好感度 */
.game-pet-passive { color: #a3e635; font-size: 10px; }
.game-pet-passive.soon { color: var(--text-dim); }
.game-pet-affbar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin: 4px 0 0; }
.game-pet-afffill { height: 100%; background: linear-gradient(90deg, #f87171, #fbbf24); transition: width .3s; }
.game-pet-action-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.game-pet-action-grid .game-buy-btn { width: 100%; min-height: 32px; white-space: normal; line-height: 1.25; }
.game-buy-btn.rare:not(:disabled) { border-color: rgba(251,191,36,.55); color: #fde68a; background: rgba(251,191,36,.08); }
.game-pet-bond {
    display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 10px; padding: 8px;
    background: rgba(74,240,224,.05); border: 1px solid rgba(74,240,224,.18); border-radius: 8px;
}
.game-pet-bond-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-secondary); }
.game-pet-bond-row strong { color: var(--gold-light); font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ===== 万物图鉴 ===== */
/* 图鉴遮罩用 fixed，确保覆盖整个视口（welcome 内容受 max-width 限制，absolute 会被裁切） */
.game-codex-overlay {
    position: fixed;
    z-index: 200;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(5,4,8,.98), rgba(13,8,16,.96) 46%, rgba(5,18,22,.96)),
        repeating-linear-gradient(90deg, rgba(212,175,55,.06) 0 1px, transparent 1px 96px);
    backdrop-filter: blur(0);
}
/* welcome 入口按钮：行内、不全宽、字距收窄，区别于主 CTA */
.game-codex-btn {
    display: inline-block; width: auto; margin: 4px 0 0; padding: 8px 16px;
    font-size: 13px; letter-spacing: 3px;
}
/* 弹窗加宽 + 可滚动，适配图鉴内容量 */
.game-codex-modal {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    padding: 26px min(5vw, 64px) 34px;
    display: flex;
    flex-direction: column;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(212,175,55,.06), transparent 28%),
        transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.game-codex-modal::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 72% 18%, rgba(34,211,238,.14), transparent 34%),
                radial-gradient(circle at 18% 76%, rgba(212,175,55,.12), transparent 30%);
}
.game-codex-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212,175,55,.22);
}
.game-codex-head h3 {
    margin-bottom: 0;
    font-size: 32px;
    letter-spacing: 0;
}
/* 关闭按钮：金边圆角，与 secondary 按钮同语言 */
.game-codex-close {
    width: 42px; height: 42px; flex-shrink: 0; cursor: pointer;
    background: rgba(8,6,18,.7); border: 1px solid var(--border-gold); border-radius: 8px;
    color: var(--gold-light); font-size: 13px; transition: border-color .12s, box-shadow .12s;
}
.game-codex-close:hover { border-color: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,.25); }
/* 主体滚动区（移动端顺滑滚动） */
.game-codex-body {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 6px 8px 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.game-codex-body::-webkit-scrollbar { width: 5px; }
.game-codex-body::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 3px; }
.game-codex-section {
    min-width: 0;
    margin-bottom: 0;
    padding: 14px;
    background: rgba(8,6,18,.56);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 8px;
}
.game-codex-section .game-section-title { margin-bottom: 8px; }
/* 卡片：复用 levelup-card 布局，但不可点击、可换行展示配方 */
.game-codex-card {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 7px;
    background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px; text-align: left;
}
.game-codex-card .ic {
    width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(74,240,224,.12); border-radius: 8px; color: var(--cyan); font-size: 19px;
}
.game-codex-card .info { flex: 1; min-width: 0; }
.game-codex-card .nm { color: var(--gold-light); font-size: 13px; font-weight: 600; }
.game-codex-card .ds { color: var(--text-secondary); font-size: 11px; margin-top: 2px; line-height: 1.4; }
/* 数值/配方标签 */
.game-codex-tag {
    display: inline-block; margin: 4px 4px 0 0; padding: 2px 7px;
    background: rgba(255,255,255,.04); border: 1px solid var(--border-gold); border-radius: 5px;
    color: var(--cyan); font-size: 10px;
}
/* 进化配方：高亮金色 */
.game-codex-tag.recipe { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,.08); }
/* 进化卡：金色描边（复用 evolve 视觉） */
.game-codex-card.evo { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,.3); background: linear-gradient(135deg, rgba(212,175,55,.12), var(--bg-card)); }
.game-codex-card.evo .ic { background: rgba(212,175,55,.22); color: var(--gold-light); }
/* 被动卡：紫色描边（复用 rare 视觉） */
.game-codex-card.passive { border-color: var(--purple); }
.game-codex-card.passive .ic { background: rgba(139,92,246,.16); color: #c4b5fd; }
/* 起始武器角标 */
.game-codex-starter { color: var(--gold); font-size: 9px; margin-left: 6px; opacity: .8; }

/* ===== Final title-screen shell: page section, not modal ===== */
#gameWelcomePage .game-hero {
    width: 100%;
    min-height: max(720px, 100dvh);
}
#gameWelcomePage .game-hero-content {
    width: min(680px, 100%);
}
#gameWelcomePage .game-hero-scene { inset: 0; }
#gameWelcomePage .game-character-body {
    width: 112px;
    height: 112px;
    transform: translateX(-50%) scale(1.72);
}
#gameWelcomePage .game-menu-grid {
    width: min(620px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
#gameWelcomePage .game-menu-btn {
    height: 48px;
    border-color: rgba(212,175,55,.42);
    background: linear-gradient(135deg, rgba(15,12,35,.86), rgba(34,211,238,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.18);
}
#gameWelcomePage .game-menu-btn:hover {
    border-color: var(--cyan);
    background: linear-gradient(135deg, rgba(212,175,55,.13), rgba(34,211,238,.1));
}
#gameWelcomePage .game-panel-overlay.inline {
    position: relative;
    inset: auto;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: min(680px, 100%);
    padding: 18px clamp(14px, 2.5vw, 38px) 40px;
    background:
        linear-gradient(180deg, rgba(5,4,8,.96), rgba(5,8,13,.98)),
        radial-gradient(circle at 20% 0%, rgba(34,211,238,.1), transparent 34%);
    backdrop-filter: none;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-shell {
    width: min(1320px, 100%);
    margin: 0 auto;
    max-height: min(820px, calc(100vh - 92px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-head {
    padding: 0 0 10px;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-head .sidebar-icon-btn {
    display: none;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-tabs {
    flex-shrink: 0;
    padding: 0 0 6px;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-body {
    flex: 1;
    min-height: 0;
    padding: 8px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-section > .game-section-title:first-child {
    margin-top: 0;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-section.active {
    animation: none;
}
@media (min-width: 768px) {
    #gameWelcomePage .game-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) {
    #gameWelcomePage .game-panel-section[data-game-panel="character"].active,
    #gameWelcomePage .game-panel-section[data-game-panel="record"].active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        gap: 18px;
        align-items: start;
    }
    #gameWelcomePage .game-panel-section[data-game-panel="character"] .game-section-title:first-child,
    #gameWelcomePage .game-panel-section[data-game-panel="record"] #gameRecordsPanel,
    #gameWelcomePage .game-panel-section[data-game-panel="record"] .game-section-title:first-child {
        grid-column: 1;
        grid-row: 1;
    }
    #gameWelcomePage .game-panel-section[data-game-panel="character"] #gameCharGrid,
    #gameWelcomePage .game-panel-section[data-game-panel="record"] #gameRecords {
        grid-column: 1;
        grid-row: 2;
    }
    #gameWelcomePage .game-panel-section[data-game-panel="character"] .game-section-title:nth-of-type(2),
    #gameWelcomePage .game-panel-section[data-game-panel="record"] .game-section-title:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }
    #gameWelcomePage .game-panel-section[data-game-panel="character"] #gameAchievements,
    #gameWelcomePage .game-panel-section[data-game-panel="record"] #gameAchievementsPanel {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ===== Welcome Responsive QA Overrides ===== */
#gameWelcomePage,
#gameWelcomePage * {
    min-width: 0;
}
#app.is-game-app {
    max-width: 100%;
    border-left: 0;
    border-right: 0;
}
#gameWelcomePage {
    overscroll-behavior: contain;
}
#gameWelcomePage .game-hero {
    box-sizing: border-box;
    width: 100%;
}
#gameWelcomePage .game-hero-main {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    max-width: 100%;
}
#gameWelcomePage .game-hero-title,
#gameWelcomePage .game-kicker,
#gameWelcomePage .game-hero h2,
#gameWelcomePage .game-hero p,
#gameWelcomePage .game-title-meta,
#gameWelcomePage .app-status-bar,
#gameWelcomePage .game-command-row,
#gameWelcomePage .game-menu-grid,
#gameWelcomePage .game-quick-grid {
    max-width: 100%;
}
#gameWelcomePage .game-kicker,
#gameWelcomePage .game-hero h2,
#gameWelcomePage .game-panel-head h3,
#gameWelcomePage .game-section-title,
#gameWelcomePage .game-talent-branch-name,
#gameWelcomePage .game-bounty-enter,
#gameWelcomePage .game-tower-enter {
    letter-spacing: 0;
}
#gameWelcomePage .game-hero h2 {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
#gameWelcomePage .game-title-meta {
    justify-content: flex-start;
}
#gameWelcomePage .game-title-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#gameWelcomePage .game-command-row,
#gameWelcomePage .game-command-actions {
    min-width: 0;
}
#gameWelcomePage .game-start-btn {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    background-image:
        linear-gradient(100deg, transparent 0 36%, rgba(255,255,255,.36) 48%, transparent 60%),
        linear-gradient(135deg, #fde68a, var(--gold) 48%, #9a6a12);
    background-size: 220% 100%, 100% 100%;
    background-position: -160% 0, 0 0;
    animation: gameCtaSheenBg 3.4s ease-in-out infinite;
}
#gameWelcomePage .game-start-btn::before {
    content: none;
    display: none;
}
#gameWelcomePage .game-start-btn .game-action-img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    align-self: center;
    justify-self: center;
}
#gameWelcomePage .game-start-btn span {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#gameWelcomePage .game-start-btn small {
    grid-column: 2;
    grid-row: 2;
    display: block;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#gameWelcomePage .game-coins-pill,
#gameWelcomePage .game-icon-action,
#gameWelcomePage .game-menu-btn {
    min-width: 0;
    overflow: hidden;
}
#gameWelcomePage .game-coins-pill,
#gameWelcomePage .game-icon-action {
    white-space: nowrap;
}
#gameWelcomePage .game-icon-action span,
#gameWelcomePage .game-menu-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#gameWelcomePage .game-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#gameWelcomePage .game-menu-img {
    flex: 0 0 auto;
}
#gameWelcomePage .game-panel-overlay.inline {
    box-sizing: border-box;
    scroll-margin-top: 12px;
}
#gameWelcomePage .game-panel-overlay.inline .game-panel-shell,
#gameWelcomePage .game-panel-overlay.inline .game-panel-body,
#gameWelcomePage .game-panel-section.active {
    min-width: 0;
}
#gameWelcomePage .game-panel-tabs {
    min-width: 0;
    scrollbar-gutter: stable;
}
#gameWelcomePage .game-panel-tabs button {
    min-width: 64px;
    min-height: 36px;
    letter-spacing: 0;
    white-space: nowrap;
}
#gameWelcomePage .game-section-title {
    flex-wrap: wrap;
    line-height: 1.35;
}
#gameWelcomePage .game-char-grid,
#gameWelcomePage .game-ach-grid,
#gameWelcomePage .game-records,
#gameWelcomePage .game-map-grid {
    min-width: 0;
}
#gameWelcomePage .game-char-name,
#gameWelcomePage .game-char-desc,
#gameWelcomePage .game-ach-name,
#gameWelcomePage .game-ach-desc,
#gameWelcomePage .game-upgrade-name,
#gameWelcomePage .game-upgrade-desc,
#gameWelcomePage .game-weapon-cultivation-name,
#gameWelcomePage .game-weapon-cultivation-desc,
#gameWelcomePage .game-map-name,
#gameWelcomePage .game-map-desc,
#gameWelcomePage .game-pet-name,
#gameWelcomePage .game-pet-mat-name,
#gameWelcomePage .game-pet-mat-desc,
#gameWelcomePage .game-exchange-copy,
#gameWelcomePage .game-exchange-preview,
#gameWelcomePage .game-realm-card {
    overflow-wrap: anywhere;
}
#gameWelcomePage .game-exchange-control input,
#gameWelcomePage .game-exchange-control button,
#gameWelcomePage .game-buy-btn {
    min-width: 0;
}
#gameWelcomePage .game-buy-btn.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 32px;
    padding: 6px 10px;
}
@media (max-width: 767px) {
    #gameWelcomePage .game-hero {
        min-height: max(760px, calc(100dvh - 44px));
        padding: 56px 18px 34px;
    }
    #gameWelcomePage .game-hero-main {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
    }
    #gameWelcomePage .game-hero .game-logo {
        width: 58px;
        height: 58px;
        font-size: 31px;
    }
    #gameWelcomePage .game-kicker {
        font-size: 10px;
        line-height: 1.2;
    }
    #gameWelcomePage .game-hero h2 {
        font-size: 36px;
        line-height: 1.04;
    }
    #gameWelcomePage .game-hero p {
        font-size: 13px;
        line-height: 1.5;
    }
    #gameWelcomePage .game-command-row {
        gap: 10px;
    }
    #gameWelcomePage .game-command-actions {
        grid-template-columns: minmax(0, 1fr) minmax(84px, 104px);
    }
    #gameWelcomePage .game-start-btn {
        min-height: 80px;
        padding: 0 18px;
    }
    #gameWelcomePage .game-start-btn span {
        font-size: 22px;
        line-height: 1.05;
    }
    #gameWelcomePage .game-start-btn small {
        font-size: 11px;
        line-height: 1.15;
    }
    #gameWelcomePage .app-status-bar {
        margin-left: 0;
        margin-right: 0;
    }
    #gameWelcomePage .game-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
    #gameWelcomePage .game-menu-btn {
        height: 48px;
        gap: 7px;
        padding: 0 8px;
    }
    #gameWelcomePage .game-menu-img {
        width: 28px;
        height: 28px;
    }
    #gameWelcomePage .game-panel-overlay.inline {
        padding: 14px 12px 32px;
    }
    #gameWelcomePage .game-panel-overlay.inline .game-panel-shell {
        max-height: none;
    }
    #gameWelcomePage .game-panel-overlay.inline .game-panel-body {
        overflow-y: visible;
        padding-right: 0;
    }
    #gameWelcomePage .game-panel-tabs {
        gap: 6px;
        overflow-x: auto;
    }
    #gameWelcomePage .game-panel-tabs button {
        min-width: 58px;
        padding: 0 9px;
        font-size: 12px;
    }
}
@media (min-width: 768px) and (max-width: 1279px) {
    #gameWelcomePage .game-hero {
        padding: clamp(70px, 8vw, 92px) clamp(28px, 5vw, 52px) 48px;
    }
    #gameWelcomePage .game-hero-content {
        width: min(920px, 100%);
        padding-right: clamp(18px, 3vw, 32px);
    }
    #gameWelcomePage .game-hero p {
        max-width: min(760px, 100%);
    }
    #gameWelcomePage .app-status-bar,
    #gameWelcomePage .game-command-row,
    #gameWelcomePage .game-menu-grid,
    #gameWelcomePage .game-quick-grid {
        width: 100%;
    }
    #gameWelcomePage .app-status-bar {
        justify-content: space-between;
    }
    #gameWelcomePage .game-command-row {
        grid-template-columns: minmax(320px, 1.2fr) minmax(240px, .8fr);
    }
    #gameWelcomePage .game-command-actions {
        grid-template-columns: minmax(0, 1fr) minmax(98px, 132px);
    }
    #gameWelcomePage .game-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #gameWelcomePage .game-quick-grid {
        grid-template-columns: minmax(320px, .58fr) minmax(0, 1fr);
    }
    #gameWelcomePage .game-realm-card {
        max-width: 430px;
    }
}
@media (max-width: 420px) {
    #gameWelcomePage .game-upgrade-row {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 8px 10px;
    }
    #gameWelcomePage .game-upgrade-row .game-buy-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    #gameWelcomePage .game-weapon-cultivation-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    #gameWelcomePage .game-weapon-cultivation-card .game-buy-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
    #gameWelcomePage .game-talent-branch-head {
        flex-wrap: wrap;
    }
    #gameWelcomePage .game-talent-branch-desc {
        flex-basis: 100%;
        margin-left: 32px;
    }
    #gameWelcomePage .game-exchange-control {
        flex-direction: column;
        align-items: stretch;
    }
    #gameWelcomePage .game-exchange-control button {
        width: 100%;
    }
}
@media (max-width: 340px) {
    #gameWelcomePage .game-hero {
        padding: 54px 16px 32px;
    }
    #gameWelcomePage .game-hero-main {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
    }
    #gameWelcomePage .game-hero .game-logo {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
    #gameWelcomePage .game-kicker {
        font-size: 9px;
    }
    #gameWelcomePage .game-hero h2 {
        font-size: 30px;
    }
    #gameWelcomePage .game-start-btn {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        padding: 0 16px;
        column-gap: 10px;
    }
    #gameWelcomePage .game-start-btn .game-action-img {
        width: 27px;
        height: 27px;
    }
    #gameWelcomePage .game-start-btn span {
        font-size: 20px;
    }
}

@keyframes gameCtaSheenBg {
    0%, 45% { background-position: -160% 0, 0 0; }
    70%, 100% { background-position: 160% 0, 0 0; }
}