/* ================================================
   1. CSS变量系统
   ================================================ */
:root {
    /* === 主题色 === */
    --primary-bg: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1020 100%);
    --primary-gold: #ffd700;
    --primary-gold-dark: #daa520;
    --primary-gold-light: #ffed4a;

    /* === 功能色 === */
    --color-blue: #4a9eff;
    --color-green: #4ade80;
    --color-red: #f87171;
    --color-purple: #a855f7;
    --color-orange: #fb923c;
    --color-cyan: #22d3ee;
    --color-pink: #f472b6;

    /* === 品质色 === */
    --quality-common: #9ca3af;
    --quality-uncommon: #22c55e;
    --quality-rare: #3b82f6;
    --quality-epic: #a855f7;
    --quality-legend: #ffd700;
    --quality-mythic: #f472b6;

    /* === 背景色 === */
    --bg-dark: #0a0e1a;
    --bg-card: rgba(20, 25, 45, 0.9);
    --bg-card-hover: rgba(30, 35, 55, 0.95);
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-input: rgba(0, 0, 0, 0.6);

    /* === 文字色 === */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-hint: rgba(255, 255, 255, 0.4);

    /* === 边框色 === */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-highlight: rgba(255, 255, 255, 0.2);
    --border-gold: rgba(255, 215, 0, 0.4);

    /* === 阴影 === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
    --shadow-glow-blue: 0 0 20px rgba(74, 158, 255, 0.3);
    --shadow-glow-green: 0 0 20px rgba(74, 222, 128, 0.3);
    --shadow-glow-red: 0 0 20px rgba(248, 113, 113, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);

    /* === 圆角 === */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* === 间距 === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* === 过渡 === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ==================== 全局样式 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1020 100%);
    min-height: 100vh;
    color: #fff;
}

/* 页面切换控制 */
.page {
    display: none;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.page.active {
    display: flex;
    flex-direction: column;
}

#login-page.active {
    display: block;
    min-height: 100vh;
    height: auto;
}

/* ==================== 登录页面样式 ==================== */

/* 星空背景容器 */
.star-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    animation: starTwinkle 4s ease-in-out infinite;
}
.star-bg:before{
    content: '';
    position: absolute;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    top: 20%;
    left: -100px;
    animation: meteor 8s linear infinite;
    opacity: 0.6;
}
.star-bg:after{
    content: '';
    position: absolute;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    top: 60%;
    left: -80px;
    animation: meteor 12s linear infinite 4s;
    opacity: 0.4;
}

/* 星点动画 */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: starTwinkle 3s ease-in-out infinite;
}

.star::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    filter: blur(1px);
    transform: scale(2);
    opacity: 0.5;
}
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.star-1 { top: 8%; left: 12%; animation-delay: 0s; }
.star-2 { top: 15%; left: 75%; animation-delay: 0.3s; }
.star-3 { top: 25%; left: 30%; animation-delay: 0.6s; }
.star-4 { top: 35%; left: 85%; animation-delay: 0.9s; }
.star-5 { top: 50%; left: 8%; animation-delay: 1.2s; }
.star-6 { top: 65%; left: 68%; animation-delay: 1.5s; }
.star-7 { top: 80%; left: 45%; animation-delay: 1.8s; }
.star-8 { top: 5%; left: 55%; animation-delay: 2.1s; }

@keyframes meteor {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 200px)) translateY(calc(100vh + 200px)) rotate(-45deg);
        opacity: 0;
    }
}

/* 大星球 */
.planet {
    position: absolute;
    bottom: -25%;
    right: -15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at 35% 35%,
    #4a3520 0%,
    #3d2815 25%,
    #2a1810 50%,
    #1a0f0a 75%,
    #0d0505 100%
    );
    border-radius: 50%;
    opacity: 0.6;
    box-shadow:
            0 0 60px rgba(61, 35, 20, 0.4),
            0 0 120px rgba(42, 24, 16, 0.3),
            inset -40px -40px 80px rgba(0, 0, 0, 0.5);
    animation: planetFloat 25s ease-in-out infinite;
}

@keyframes planetFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(3deg);
    }
}

/* 主容器 */
.main-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 顶部信息栏 - 登录页 */
.top-bar {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.login-id {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 公告按钮漂浮动画 */
.btn-notice {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: float 3s ease-in-out infinite;
}

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

.btn-notice:active {
    transform: scale(0.98);
}

.notice-icon {
    font-size: 14px;
}

.age-badge {
    background: rgba(255,255,255,0.15);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
}

/* Logo区域 */
.logo-section {
    text-align: center;
    padding: 10px;
}

.logo-icon {
    font-size: 38px;
    margin-bottom: 2px;
    display: inline-block;
    animation: logoFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
    }
    50% {
        transform: translateY(-15px) rotate(3deg);
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.8));
    }
}

.game-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(135deg, #fff 0%, var(--primary-gold) 50%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShine 4s linear infinite;
    text-shadow: none;
}

@keyframes titleShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.game-slogan {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
}

/* 表单区域 - 登录页 */
.form-section-login {
    flex: 1;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

/* 表单容器 */
.form-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px;
}

/* 表单项 */
.form-item {
    margin-bottom: 12px;
}

.form-item:last-of-type {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.form-input:focus {
    border-color: rgba(255,255,255,0.4);
}

/* 按钮组 */
.btn-group {
    display: flex;
    gap: 12px;
}

.btn-login {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    display: block;
}

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

/* 注册登录按钮 - 高吸引力 */
.btn-register {
    background: linear-gradient(135deg, #ff7b00 0%, #ff5500 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255,123,0,0.4);
}

.btn-register::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 2.5s infinite;
}

/* TapTap登录按钮 */
.btn-taptap {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* 快捷开始按钮 */
.btn-start {
    width: 80%;
    padding: 12px;
    margin-top: 6px;
    left: 10%;
    background: linear-gradient(135deg, #00d4ff 0%, #00a8ff 30%, #0077ff 70%, #7098d8 90%);
    border: none;
    color: #fff;
    border-radius: var(--radius-xl);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 3px;
    box-shadow: 0 6px 30px rgba(0, 153, 255, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.btn-start::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent 30%
    );
    animation: btnRotate 4s linear infinite;
}

@keyframes btnRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-start:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
            0 10px 40px rgba(0, 153, 255, 0.6),
            inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.btn-start:active {
    transform: translateY(0) scale(0.98);
}

/* 游戏下载 */
.download-section {
    margin-top: 20px;
    text-align: center;
}

.btn-download {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

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

/* 底部协议 */
.footer {
    padding: 16px 20px;
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.footer-notice {
    margin: 0 0 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
}

.footer-links {
    margin: 0;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

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

.footer-links span {
    margin: 0 8px;
    color: rgba(255,255,255,0.2);
}

/* ==================== 角色/技能页面通用样式 ==================== */

/* 固定布局 */
html.fixed-layout,
html.fixed-layout body {
    height: 100%;
    overflow: hidden;
}

body.fixed-layout-body {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0a0e1a 0%, #1a1f2e 50%, #0d1020 100%);
    height: 100vh;
    padding-bottom: 0;
}

/* 顶部信息区 */
/* ==================== 通用头部组件 ==================== */
.common-header {
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.98) 0%, rgba(10, 14, 26, 0.85) 100%);
    backdrop-filter: blur(10px);
}

.header {
    padding: 8px 12px 0px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
    flex-shrink: 0;
}

.player-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.player-name {
    font-size: 13px;
    color: #fff;
}

.player-level {
    font-size: 12px;
    color: #ffd700;
}

.player-exp {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

/* 资源栏 */
.resources {
    display: flex;
    justify-content: space-around;
    padding: 4px 12px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.resource-item {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
}

.resource-value {
    color: #ffd700;
    font-weight: bold;
}

/* 实时收益 */
.realtime-notice {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    padding: 6px 12px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.notice-icon-small {
    font-size: 14px;
    margin-top: -2px;
}
/* 主内容区 - 可滚动 */
.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px;
}

/* ==================== 装备区域样式 ==================== */

.equipment-section {
    padding: 15px 10px;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
}

.equipment-container {
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    height: 280px;
}

/* 角色立绘 */
.character-center {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 90px;
    opacity: 0.2;
    z-index: 0;
}

/* 装备槽位基础样式 */
.equip-slot {
    position: absolute;
    width: 70px;
    height: 52px;
    background: rgba(20,20,30,0.8);
    border: 1px solid rgba(127, 125, 122, 0.5);
    /*border: 1px solid rgba(255,140,0,0.5);*/
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.equip-slot.highlight {
    border: 2px solid #ff4444;
    box-shadow: 0 0 12px rgba(255,68,68,0.4);
    background: rgba(148,47,105,0.4);
}
.equip-slot.highlight2 {
    background: rgba(0,80,160,0.4);
    border: 2px solid rgba(0,150,255,0.6);
    box-shadow: 0 0 12px rgba(0,150,255,0.3);
}

.equip-slot.special {
    background: rgba(0,80,160,0.4);
    border: 1px solid rgba(0,150,255,0.6);
    box-shadow: 0 0 12px rgba(0,150,255,0.3);
}

.equipment-container .name {
    font-size: 10px;
    margin-bottom: 2px;
    font-weight: bold;
    width: 100%;
    white-space: nowrap;
    color: #d5e6e0;
}
.equipment-container .tzName,.bag-item .tzName{
    position: absolute;
    left: 2px;
    bottom: 2px;
    color: #00FFFF;
    font-size: 8px;
}
.equipment-container .level{
    position: absolute;
    right: 2px;
    bottom: 2px;
    color:#fff;
}
.equipment-container .equip-name{
    font-size: 18px;
    color: #7f7e79;
    opacity: 0.1;
    position: absolute;
    letter-spacing: 6px;
}


/* 12个装备部位位置布局 */
/* 左侧列 */
.slot-1 { top: 0; left: 0; }
.slot-2 { top: 56px; left: 0; }
.slot-3 { top: 112px; left: 0; }
.slot-4 { top: 168px; left: 0; }

/* 顶部中间 */
.slot-5 { top: 0; left: 50%; transform: translateX(-50%); }

/* 右侧列 */
.slot-6 { top: 0; right: 0; }
.slot-7 { top: 56px; right: 0; }
.slot-8 { top: 112px; right: 0; }
.slot-9 { top: 168px; right: 0; }

/* 底部一排三个 */
.slot-10 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.slot-11 { bottom: 0; left: 0; }
.slot-12 { bottom: 0; right: 0; }

/* 装备辅助功能 */
.equip-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 0 12px;
}

.wardrobe-tabs {
    display: flex;
    gap: 6px;
}

.wardrobe-tab {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.equip-btns {
    display: flex;
    gap: 8px;
}

.btn-action {
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

.btn-auto {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

/* ==================== 属性区域样式 ==================== */

.attributes-section {
    padding: 15px 12px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;

    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    margin: 0 var(--space-md);
}

.attr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.attr-name {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.attr-value {
    font-size: 11px;
    color: var(--color-green);
    font-weight: 600;
}

/* ==================== 技能区域样式 ==================== */

.skill-section {
    padding: 12px;
}

.skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
}

/* 技能条目基础样式 */
.skill-item {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 10px 8px;
    position: relative;
    min-height: 70px;
}

/* 已上阵 - 红色（核心技能） */
.skill-item.active-red {
    background: rgba(139,0,0,0.3);
    border: 2px solid #dc2626;
}

/* 已上阵 - 蓝色（主动攻击） */
.skill-item.active-blue {
    background: rgba(0,50,139,0.3);
    border: 2px solid #3b82f6;
}

/* 已上阵 - 绿色（辅助技能） */
.skill-item.active-green {
    background: rgba(0,100,50,0.3);
    border: 2px solid #22c55e;
}

/* 已上阵 - 普通灰色 */
.skill-item.active-gray {
    background: rgba(50,50,50,0.4);
    border: 1px solid rgba(255,255,255,0.2);
}

/* 未上阵 */
.skill-item.inactive {
    background: rgba(30,30,30,0.4);
    border: 1px solid rgba(100,100,100,0.3);
    opacity: 0.7;
}

/* 技能类型标签 */
.skill-type {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

/* 技能名称 */
.skill-name {
    font-size: 13px;
    font-weight: bold;
    margin-top: 4px;
}

.skill-name.red { color: #f87171; }
.skill-name.blue { color: #60a5fa; }
.skill-name.green { color: #4ade80; }
.skill-name.white { color: #fff; }
.skill-name.gray { color: rgba(255,255,255,0.6); }

/* 上阵状态 */
.skill-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    color: #4ade80;
}

.skill-status.inactive {
    color: rgba(255,255,255,0.4);
}

/* 技能等级 */
.skill-level {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    color: rgba(255,255,255,0.8);
}

/* ==================== 标签切换 ==================== */

.tab-bar {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    display: flex;
    padding: 2px 12px 0px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    z-index: 999;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    background: none;
    border: none;
}

.tab-item.active,.tab2_btn .btnChecked,.toolbar-btn.btnChecked {
    color: #60a5fa;
    background: rgba(96,165,250,0.1);
    border-bottom: 2px solid #60a5fa;
}
.tab2_btn .bg_active,.toolbar-btn.bg_active{
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 165, 0, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.5);
    color: #ffd700;
}

/* ==================== 底部导航 ==================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 6px 6px;
    background: linear-gradient(180deg, rgba(10,14,26,0.98) 0%, rgba(5,8,16,1) 100%);
    border-top: 1px solid rgba(218,165,32,0.3);
    flex-shrink: 0;
    /*z-index: 2;*/
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: transform 0.25s ease, opacity 0.25s ease;;
}
.nav-item:hover { opacity: 0.8; }
.nav-item:active {
    transform: scale(0.9);
}
.nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(139,69,19,0.3);
    border: 2px solid rgba(218,165,32,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}


.nav-item.active .nav-icon {
    background: rgba(218,165,32,0.3);
    border-color: #daa520;
}

.nav-text {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
}

.nav-item.active .nav-text {
    color: #daa520;
}
.nav-item.btnBg .nav-icon {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.3) 0%, rgba(180, 130, 20, 0.3) 100%);
    border-color: var(--primary-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    animation: navPulse 2s ease-in-out infinite;
}
.nav-item.btnBg .nav-text {
    color: var(--primary-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

@keyframes navPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); }
}

/* ==================== 公告弹框样式 ==================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

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

.modal-content {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    width: 90%;
    max-width: 340px;
    max-height: 85vh;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2), 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modalIn 0.3s ease;
}
/* ==================== 装备详情弹窗样式 ==================== */

.modal-content.equip-modal {
    max-width: 380px;
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.2), 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

.modal-content.equip-modal .modal-header {
    border-bottom-color: rgba(74, 222, 128, 0.2);
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.1) 0%, transparent 100%);
}

.modal-content.equip-modal .modal-title {
    color: rgba(74, 222, 128, 0.9);
    min-height: 20px;
}

.modal-content.equip-modal .modal-subtitle {
    color: rgba(255, 200, 100, 0.8);
    font-size: 10px;
}

.modal-equip-body {
    gap: 12px;
    padding: 12px;
    overflow: auto;
    max-height: 70vh;
    margin-bottom: 80px;
}

.modal-equip-info {
    flex: 1;
    min-width: 0;
}

.modal-equip-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    min-width: 60px;
    overflow: auto;
}

.modal-action-btn,.modal-equip-actions>div {
    width: 100%;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.modal-action-btn:active,.modal-equip-actions>div:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.modal-action-btn.primary,.modal-equip-actions .primary-btn {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(34, 197, 94, 0.3) 100%);
    border-color: rgba(74, 222, 128, 0.5);
    color: rgba(74, 222, 128, 1);
}

.modal-action-btn.warning,.modal-equip-actions .warning-btn {
    background: rgba(255, 100, 100, 0.15);
    border-color: rgba(255, 100, 100, 0.4);
    color: rgba(255, 150, 150, 1);
}

.modal-btn-primary {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #0a0e1a;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.modal-btn-secondary,.modal-equip-actions .secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.modal-btn-warning {
    background: linear-gradient(135deg, #ff7b00 0%, #ff5500 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 123, 0, 0.3);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    padding: 16px 16px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin: 0;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-close:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.modal-body {
    padding: 16px;
    max-height: 50vh;
    overflow-y: auto;
}

.modal-version {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    text-align: center;
}

.modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-list li {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    padding-left: 16px;
    position: relative;
}

.modal-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #00ff88;
}

.modal-footer {
    padding: 8px;
    border-top: 1px solid rgba(255, 215, 0, 0.15);
    position: absolute;
    bottom: 0px;
    background: #30374c;
    width: 100%;
}

.modal-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
}

.modal-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
    white-space: nowrap;
}

.modal-btn:active {
    transform: scale(0.98);
}


.modal-contact {
    font-size: 13px;
    color: #ffd700;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
}

/* ==================== 响应式 ==================== */

/*@media (max-width: 375px) {*/
/*    .game-title {*/
/*        font-size: 28px;*/
/*    }*/
/*}*/

/*@media (max-width: 360px) {*/
/*    .equip-slot {*/
/*        width: 46px;*/
/*        height: 46px;*/
/*    }*/
/*    .slot-2 { top: 50px; left: 0; }*/
/*    .slot-3 { top: 100px; left: 0; }*/
/*    .slot-4 { top: 150px; left: 0; }*/
/*    .slot-7 { top: 50px; right: 0; }*/
/*    .slot-8 { top: 100px; right: 0; }*/
/*    .slot-9 { top: 150px; right: 0; }*/
/*    .equipment-container {*/
/*        height: 250px;*/
/*    }*/
/*    .skill-item {*/
/*        padding: 8px 6px;*/
/*        min-height: 60px;*/
/*    }*/
/*    .skill-name {*/
/*        font-size: 12px;*/
/*    }*/
/*    .modal-btn {*/
/*        padding: 8px 10px;*/
/*        font-size: 12px;*/
/*    }*/
/*}*/

/* ==================== 背包页面样式 ==================== */

.bag-section {
    padding: 10px 12px;
}

.bag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 50%, rgba(255, 215, 0, 0.1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.bag-title {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}

.bag-count {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.bag-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.bag-item {
    background: rgba(30,30,40,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 6px 2px;
    text-align: center;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.bag-item .name{
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
    padding: 0 2px;
}

.bag-item .level{
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.bag-item .type{
    position: absolute;
    left: 2px;
    top: 2px;
    color: #fff;
    font-size: 8px;
}

.bag-item:active {
    transform: scale(0.95);
}

.bag-item.selected {
    border-color: #ff4444;
    background: rgba(255,68,68,0.15);
}

/* 品质颜色 - 简化版 */
.bag-item.quality-legend {
    border-color: #ffd700;
}

.bag-item.quality-epic {
    border-color: #a855f7;
}

.bag-item.quality-rare {
    border-color: #3b82f6;
}

.bag-item.quality-uncommon {
    border-color: #22c55e;
}

.bag-item.quality-common {
    border-color: rgba(255,255,255,0.15);
}

.item-name {
    font-size: 9px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 2px;
}

.item-level {
    font-size: 8px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* 背包工具栏 */
.bag-toolbar,.tab2_btn {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    display: flex;
    padding: 2px 12px 0px 12px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: 8px;
    z-index: 999;
    max-height: 40px;
}

.toolbar-btn,.tab2_btn>div {
    flex: 1;
    padding: 8px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.toolbar-btn:active {
    transform: scale(0.95);
}

.toolbar-btn.active,.tab2_btn>div.active {
    background: rgba(59,130,246,0.3);
    border-color: #3b82f6;
    color: #fff;
}

.toolbar-btn.warn {
    color: #fbbf24;
}

/* ==================== 洞府页面样式 ==================== */

.dongfu-section {
    padding: 8px 10px;
    /*padding-bottom: 70px;*/
}
.dongfu_exp_reward{
    border: none;
    display: none;
    bottom: 40px;
    font-size: 18px;
    position: absolute;
    width: 100%;
    text-align: center;
}
/* 洞府总览横幅 */
.dongfu-overview {
    margin-bottom: 10px;
}

.dongfu-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(30,35,50,0.9) 0%, rgba(20,25,40,0.95) 100%);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    overflow: hidden;
}

.banner-bg {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse at 30% 50%, rgba(255,215,0,0.05) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 30%, rgba(100,150,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}

.banner-content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
}

.dongfu-icon {
    font-size: 36px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.dongfu-info {
    flex: 1;
}

.dongfu-name {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-bottom: 2px;
}

.dongfu-level {
    font-size: 12px;
    color: #ffd700;
    font-weight: 500;
}

.btn-upgrade-main {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,180,0,0.1) 100%);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-upgrade-main:active {
    transform: scale(0.95);
}

.upgrade-icon {
    font-size: 14px;
}

/* 房间卡片 - 全新设计 */
.room-card {
    position: relative;
    background: linear-gradient(160deg, rgba(25,30,45,0.95) 0%, rgba(15,18,30,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/*.room-card:active {*/
/*    transform: scale(0.99);*/
/*}*/

/* 主角修炼卡片 - 突出显示 */
.room-card.main-room {
    border-color: rgba(255,215,0,0.25);
    background: linear-gradient(160deg, rgba(35,30,50,0.95) 0%, rgba(20,18,35,0.98) 100%);
}

.room-card.main-room .room-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.room-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-icon {
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.room-name {
    font-size: 14px;
    font-weight: bold;
    color: rgba(255,255,255,0.95);
}

.room-level {
    font-size: 14px;
    color: #60a5fa;
    font-weight: 500;
    margin-left: 4px;
}

.btn-upgrade {
    padding: 5px 12px;
    background: linear-gradient(135deg, rgba(100,150,255,0.15) 0%, rgba(80,120,200,0.1) 100%);
    border: 1px solid rgba(100,150,255,0.3);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #60a5fa;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-upgrade:active {
    transform: scale(0.95);
}

.btn-rank {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}

.room-content {
    padding: 12px 14px;
}

/* 修炼状态区域 */
.cultivation-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.realm-badge {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.realm-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

.realm-value {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.bonus-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,180,0,0.05) 100%);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    font-size: 11px;
    color: #ffd700;
}

.bonus-icon {
    font-size: 12px;
}

/* 修为进度 */
.xiuwei-progress {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.progress-values {
    font-size: 12px;
}

.progress-values .current {
    color: #4ade80;
    font-weight: bold;
}

.progress-values .separator {
    color: rgba(255,255,255,0.3);
    margin: 0 2px;
}

.progress-values .target2 {
    color: rgba(255,255,255,0.6);
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar {
    flex: 1;
    position: relative;
    height: 16px;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
    border-radius: 8px;
    /*transition: width 0.5s ease;*/
    position: relative;
}

.progress-fill.full {
    width: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

.progress-glow {
    position: absolute;
    top: 0;
    right: 40%;
    width: 30px;
    height: 100%;
    font-size: 12px;
    /* background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 100%); */
    /* animation: progressShine 2s infinite; */
}

@keyframes progressShine {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(300%); opacity: 0; }
}

.progress-status {
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.progress-status.breakable {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #0a0e1a;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.5); }
    50% { box-shadow: 0 0 16px rgba(251,191,36,0.8); }
}

/* 效率信息 */
.efficiency-info {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    font-size: 11px;
}

.eff-label {
    color: rgba(255,255,255,0.5);
}

.eff-value {
    color: #28e628;
    font-weight: 500;
}

/* 加成列表 */
.bonus-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
}

.bonus-name {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.bonus-value {
    font-size: 12px;
    font-weight: 600;
    color: #4ade80;
}

/* 房间操作按钮 */
.room-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.room-actions.right {
    justify-content: flex-end;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.action-btn.secondary {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.action-btn.primary {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #0a0e1a;
    box-shadow: 0 2px 12px rgba(74,222,128,0.3);
}

.action-btn.primary.pulse {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 2px 12px rgba(251,191,36,0.4);
    animation: btnPulse 2s infinite;
}

@keyframes btnPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 12px rgba(251,191,36,0.4); }
    50% { transform: scale(1.02); box-shadow: 0 4px 20px rgba(251,191,36,0.6); }
}

.action-btn:active {
    transform: scale(0.96);
}

.action-btn .btn-icon {
    font-size: 14px;
}

/* 兼容旧样式 */
.progress-bar-old {
    position: relative;
    height: 20px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

.progress-fill-old {
    height: 100%;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    transition: width 0.3s;
}

.progress-fill.full {
    width: 100%;
    background: rgba(255,255,255,0.3);
}

@keyframes glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: bold;
    color: #1a1a1a;
    text-shadow: 0 0 2px rgba(255,255,255,0.5);
}

/* 房间操作按钮 */
.room-actions {
    display: flex;
    gap: 10px;
}

.room-actions.right {
    justify-content: flex-end;
}

.room-btn {
    flex: 1;
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.2s;
}

.room-btn:active {
    transform: scale(0.95);
}

.room-btn.primary {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: none;
    color: #0a0e1a;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(74,222,128,0.3);
}
.unlock-condition{
    position: absolute;
    bottom: 16px;
    left: 30%;
    color: #afb8c0;
}

/* ==================== 玩法页面样式 ==================== */

.wanfa-section {
    padding: 10px 12px;
}

.section-title {
    font-size: 13px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
    padding-left: 6px;
    border-left: 2px solid rgba(255,255,255,0.3);
}

.wanfa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.wanfa-grid.small {
    grid-template-columns: repeat(4, 1fr);
}

.wanfa-btn {
    background: rgba(30,30,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wanfa-btn:active {
    transform: scale(0.95);
}

.wanfa-btn.highlight {
    border-color: rgba(255,255,255,0.3);
}

.wanfa-btn.locked {
    opacity: 0.4;
}

.wanfa-icon {
    font-size: 20px;
}

.wanfa-name {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

.wanfa-desc {
    display: none;
}

/* ==================== 战斗页面样式 ==================== */

.battle-page-content {
    padding: 0px 8px;
}

/* 地图信息栏 */
.map-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(25,30,45,0.9) 0%, rgba(15,18,30,0.95) 100%);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 10px;
    margin-bottom: 8px;
}

.map-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(100,150,255,0.15) 0%, rgba(80,120,200,0.1) 100%);
    border: 1px solid rgba(100,150,255,0.3);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #60a5fa;
    cursor: pointer;
    transition: all 0.2s;
}

.map-btn:active {
    transform: scale(0.95);
}

.map-btn .btn-icon {
    font-size: 14px;
}

.current-map {
    display: flex;
    align-items: center;
    gap: 8px;
}

.current-map .map-icon {
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.map-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-details .map-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.map-details .map-level {
    font-size: 11px;
    color: rgba(255,215,0,0.7);
}

/* 战斗状态栏 */
.battle-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #000;
    border-radius: 8px;
    margin-bottom: 8px;
}
.stat-item {
    padding-right: 6px;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    z-index: 12;
}

.status-dot.searching {
    animation: statusPulse 1.5s infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px #4ade80; }
    50% { opacity: 0.5; box-shadow: 0 0 8px #4ade80; }
}

.status-text {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.battle-tabs {
    display: flex;
    gap: 4px;
    z-index: 20;
    background: #000;
}

.battle-tab {
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.battle-tab.active {
    background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(255,180,0,0.15) 100%);
    border-color: rgba(255,215,0,0.4);
    color: #ffd700;
}

/* 战斗场景 */
.battle-scene {
    position: relative;
    background: linear-gradient(180deg, rgba(20,25,40,0.9) 0%, rgba(10,12,25,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    /*overflow: hidden;*/
    /*margin-bottom: 8px;*/
}

.scene-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mountain-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgba(30,35,50,0.3) 100%);
}

.cloud-layer {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    height: 30%;
    background: radial-gradient(ellipse at 30% 50%, rgba(100,150,200,0.05) 0%, transparent 50%);
}

/* 区域标签 */
.area-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.2);
}

.area-label .label-icon {
    font-size: 14px;
}

/* 怪物区域 */
.monster-area {
    position: relative;
    padding: 0;
    background: transparent;
}

.monster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
}

/* 怪物卡片 */
.monster-card {
    position: relative;
    background: linear-gradient(160deg, rgba(40,35,50,0.9) 0%, rgba(25,20,35,0.95) 100%);
    border: 1px solid rgba(255,100,100,0.15);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
    transition: all 0.2s;
}

.monster-card.elite {
    border-color: rgba(168,85,247,0.4);
    background: linear-gradient(160deg, rgba(50,35,60,0.9) 0%, rgba(30,20,40,0.95) 100%);
}

.elite-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: linear-gradient(135deg, rgba(168,85,247,0.3) 0%, rgba(139,69,219,0.2) 100%);
    border-radius: 4px;
    font-size: 8px;
    font-weight: bold;
    color: #c084fc;
}

.monster-avatar {
    width: 36px;
    height: 36px;
    margin: 0 auto 4px;
    background: linear-gradient(135deg, rgba(255,100,100,0.2) 0%, rgba(200,50,50,0.15) 100%);
    border: 2px solid rgba(255,100,100,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monster-avatar .avatar-icon {
    font-size: 18px;
}

.monster-info {
    margin-bottom: 4px;
}

.monster-name {
    font-size: 10px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    margin-bottom: 1px;
}

.monster-level {
    font-size: 8px;
    color: rgba(255,255,255,0.5);
}

.monster-hp-bar {
    height: 2px;
    background: rgba(0,0,0,0.4);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 4px;
}

.monster-hp-bar .hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    border-radius: 2px;
    transition: width 0.3s;
}

.monster-hp-text {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}

/* 战斗分隔线 */
.battle-divider {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    gap: 12px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.3) 50%, transparent 100%);
}

.divider-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
}

/* 人物区域 */
.player-area {
    position: relative;
    padding: 0;
    background: transparent;
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
}

.player-card {
    position: relative;
    background: linear-gradient(160deg, rgba(30,40,60,0.9) 0%, rgba(20,25,45,0.95) 100%);
    border: 1px solid rgba(100,150,255,0.2);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.player-card.role,.monster-card.role {
    border-color: rgba(255,215,0,0.35);
    background: linear-gradient(160deg, rgba(40,35,50,0.9) 0%, rgba(25,20,40,0.95) 100%);
}

.main-badge,.monster-card.role .elite-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 8px;
    background: linear-gradient(135deg, rgba(255,215,0,0.3) 0%, rgba(255,180,0,0.2) 100%);
    border-radius: 4px;
    font-size: 8px;
    font-weight: bold;
    color: #ffd700;
}
.player-card.role .player-avatar,.monster-card.role .monster-avatar {
    border-color: rgba(255,215,0,0.5);
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(200,160,0,0.1) 100%);
}
.monster-card.role2 {
    border-color: rgba(255,215,0,0.35);
    background: linear-gradient(160deg, rgba(40,35,50,0.9) 0%, rgba(25,20,40,0.95) 100%);
}
.monster-card.role2 .monster-avatar{
    background: linear-gradient(160deg, rgba(30, 40, 60, 0.9) 0%, rgba(20, 25, 45, 0.95) 100%);
    border: 1px solid rgba(100, 150, 255, 0.2);
}
.main-badge,.monster-card.role2 .elite-badge {
    background: linear-gradient(135deg, rgba(39, 71, 134, 0.9) 0%, rgba(69,81,129, 0.95) 100%);
    color: #6496FF;
}

.player-avatar {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, rgba(100,150,255,0.2) 0%, rgba(60,100,200,0.15) 100%);
    border: 2px solid rgba(100,150,255,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}



.player-avatar .avatar-icon {
    font-size: 22px;
}

.player-info {
    text-align: center;
    margin-bottom: 6px;
}

.player-name {
    font-size: 11px;
    color: rgba(255,255,255,0.95);
    font-weight: 600;
    margin-bottom: 2px;
}


.player-hp-container {
    width: 100%;
}

.player-hp-bar {
    height: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

.player-hp-bar .hp-fill.ally {
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
}

.player-hp-bar .hp-fill.full {
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 0 8px rgba(74,222,128,0.4);
}

.player-hp-text {
    font-size: 8px;
    color: rgba(255,255,255,0.6);
    text-align: center;
}

/* 战斗统计面板 */
.battle-stats-panel {
    background: linear-gradient(135deg, rgba(25,30,45,0.9) 0%, rgba(15,18,30,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 6px;
}

.stats-row:last-child {
    margin-bottom: 0;
}

.battle-stats-panel .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.battle-stats-panel .stat-icon {
    font-size: 14px;
}

.battle-stats-panel .stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}

.battle-stats-panel .stat-value {
    font-size: 12px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
}

.battle-stats-panel .stat-item.win .stat-value {
    color: #4ade80;
}

.battle-stats-panel .stat-item.lose .stat-value {
    color: #f87171;
}

/* 战斗工具栏 */
.battle-toolbar {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    display: flex;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(10,14,26,0.98) 0%, rgba(5,8,16,1) 100%);
    border-top: 1px solid rgba(255,255,255,0.08);
    gap: 6px;
    z-index: 999;
}

.battle-toolbar .toolbar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.battle-toolbar .toolbar-btn .btn-icon {
    font-size: 16px;
}

.battle-toolbar .toolbar-btn.active {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,180,0,0.1) 100%);
    border-color: rgba(255,215,0,0.3);
    color: #ffd700;
}

.battle-toolbar .toolbar-btn:active {
    transform: scale(0.95);
}

/* 旧样式兼容 */
.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.map-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
}

.battle-toolbar .toolbar-btn.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}

/* ==================== 菜单页面样式 ==================== */

.menu-section {
    padding: 10px 12px;
}

.account-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-bottom: 10px;
}

.account-id {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.id-value {
    color: rgba(255,255,255,0.9);
    font-weight: bold;
}

.btn-notice-small {
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}

/* 礼包兑换 */
.gift-section {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}

.gift-title {
    font-size: 12px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
}

.gift-input-group {
    display: flex;
    gap: 8px;
}

.gift-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    outline: none;
}

.gift-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.btn-redeem {
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
}

/* 菜单网格 */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.menu-btn {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.menu-btn:active {
    transform: scale(0.95);
}

.menu-btn:hover {
    background: rgba(50,50,60,0.6);
    border-color: rgba(255,255,255,0.15);
}

/* 统一按钮样式 */
.menu-btn.yellow,
.menu-btn.red,
.menu-btn.orange,
.menu-btn.green,
.menu-btn.blue {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}

.menu-icon {
    font-size: 22px;
    display: block;
}

.menu-name {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    height: 14px;
    background: rgba(255,100,100,0.9);
    border-radius: 7px;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* 社区信息 */
.community-info {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
}

.qq-group {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: bold;
    margin-bottom: 2px;
}

.community-desc {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
}

.btn-support {
    padding: 6px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}

/* 菜单底部 */
.menu-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-link {
    padding: 4px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
}

.footer-link.warn {
    color: rgba(255,150,150,0.8);
    border-color: rgba(255,150,150,0.2);
}

.footer-link:active {
    transform: scale(0.95);
}

/* ================================================
   15. Toast提示
   ================================================ */

.toastClass {
    background: linear-gradient(135deg, rgba(35, 35, 55, 0.98) 0%, rgba(25, 25, 45, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    animation: toastIn 1s ease !important;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(20px) scale(0.9);
    }
    to {
        opacity: 0.95;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
}
/* ==================== 排行榜页面样式 ==================== */

.rank-section {
    padding: 10px 12px;
}

.rank-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.2);
    padding: 4px;
    border-radius: 6px;
}

.rank-tab {
    flex: 1;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.rank-tab.active {
    background: rgba(255,215,0,0.15);
    color: rgba(255,215,0,0.9);
    font-weight: bold;
}

.rank-list {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}

.rank-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-item.self {
    background: rgba(255,215,0,0.08);
}

.rank-num {
    width: 24px;
    font-size: 12px;
    font-weight: bold;
    color: rgba(255,255,255,0.4);
    text-align: center;
}

.rank-num.top1 { color: #ffd700; }
.rank-num.top2 { color: #c0c0c0; }
.rank-num.top3 { color: #cd7f32; }

.rank-info {
    flex: 1;
    margin-left: 8px;
}

.rank-name {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    font-weight: bold;
}

.rank-id {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
}

.rank-level {
    font-size: 11px;
    color: rgba(255,215,0,0.8);
    font-weight: bold;
}

.rank-footer {
    text-align: center;
    padding: 10px;
    font-size: 10px;
    color: rgba(100,200,150,0.8);
}

.base-section {
    padding: 10px 12px;
}

/* ==================== 世界BOSS页面样式 ==================== */

.boss-section {
    padding: 10px 12px;
}

.boss-card {
    background: linear-gradient(145deg, rgba(30,30,40,0.8) 0%, rgba(20,20,30,0.9) 100%);
    border: 2px solid rgba(255,100,100,0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
}

.boss-visual {
    margin-bottom: 16px;
}

.boss-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, rgba(255,100,100,0.2) 0%, rgba(200,50,50,0.2) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 10px;
}

.boss-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.boss-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.boss-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.boss-stat .stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}

.boss-stat .stat-value {
    font-size: 14px;
    font-weight: bold;
}

.boss-stat .boss-hp {
    color: #f87171;
}

.boss-stat .rank {
    color: rgba(255,215,0,0.9);
}

.boss-hp-bar {
    position: relative;
    height: 24px;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.boss-hp-bar .hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
    border-radius: 12px;
    transition: width 0.3s;
}

.boss-hp-bar .hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.boss-actions {
    display: flex;
    gap: 12px;
}

.boss-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.boss-btn.challenge {
    background: linear-gradient(135deg, rgba(255,215,0,0.9) 0%, rgba(255,180,0,0.9) 100%);
    color: #1a1a2e;
}

.boss-btn.reward {
    background: rgba(74,222,128,0.2);
    border: 1px solid rgba(74,222,128,0.4);
    color: #4ade80;
}

.boss-tips {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 12px;
}

.tip-item {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tip-item:last-child {
    border-bottom: none;
}

/* ==================== 难度地图选择页面样式 ==================== */

.yaowang-section {
    padding: 10px 12px;
}

.yaowang-tip {
    font-size: 10px;
    color: rgba(74,222,128,0.8);
    text-align: center;
    margin-bottom: 12px;
}

.yaowang-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yaowang-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
}
.yaowang-item.active{
    background: rgba(116,165,89,0.5);
}

.yaowang-info {
    flex: 1;
}

.yaowang-name {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.yaowang-bonus {
    font-size: 11px;
    color: rgba(255,215,0,0.8);
    font-weight: bold;
}

.yaowang-btn {
    padding: 8px 16px;
    background: rgba(59,130,246,0.2);
    border: 1px solid rgba(59,130,246,0.4);
    border-radius: 6px;
    color: #60a5fa;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.yaowang-btn:active {
    transform: scale(0.95);
}
.yaowang-btn.noUser{
    background: rgba(72, 85, 87, 0.8);
}


/* ==================== 队伍副本页面样式 ==================== */

.leader-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255,215,0,0.2);
    color: rgba(255,215,0,0.9);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
}

.duiwu-section {
    padding: 10px 12px;
}

.team-info-card {
    background: rgba(30,30,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.team-title {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.exit-team-btn {
    padding: 4px 10px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    color: #f87171;
    font-size: 11px;
    cursor: pointer;
}

.team-members {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.member-slot {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px;
    position: relative;
}

.member-slot.leader {
    border-color: rgba(255,215,0,0.4);
}

.member-slot.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border-style: dashed;
}

.empty-slot {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

.member-avatar {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 6px;
}

.member-info {
    font-size: 10px;
}

.member-name {
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 2px;
}

.member-level {
    color: rgba(255,215,0,0.7);
}

.member-rank {
    color: rgba(59,130,246,0.7);
    font-size: 9px;
    margin-top: 2px;
}

.leader-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255,215,0,0.2);
    color: rgba(255,215,0,0.9);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
}

.team-tip {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.dungeon-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dungeon-card {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
    position: relative;
}

.dungeon-card.locked {
    opacity: 0.6;
}

.dungeon-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
}

.dungeon-info {
    flex: 1;
}

.dungeon-name {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.dungeon-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
}

.dungeon-note {
    font-size: 9px;
    color: rgba(255,150,150,0.8);
}

.dungeon-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.dungeon-btn {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.dungeon-btn.sweep {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
}

.dungeon-btn.start {
    background: rgba(74,222,128,0.2);
    color: #4ade80;
}

.dungeon-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.dungeon-progress .progress-bar {
    flex: 1;
    height: 4px;
}

.dungeon-progress .progress-text {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-overlay .lock-icon {
    font-size: 24px;
}

/* 队伍列表样式 */
.team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-card {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
    position: relative;
}

.team-card.locked {
    opacity: 0.7;
}

.team-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.team-card .team-name {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}

.team-members {
    font-size: 11px;
    color: rgba(74,222,128,0.9);
}

.team-leader {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}

.join-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 14px;
    background: rgba(74,222,128,0.2);
    border: 1px solid rgba(74,222,128,0.4);
    border-radius: 6px;
    color: #4ade80;
    font-size: 11px;
    cursor: pointer;
}

.join-btn:disabled {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
}

.team-list-tip {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 10px 0;
}

.create-team-btn {
    width: 100%;
    padding: 12px;
    background: rgba(255,215,0,0.15);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 8px;
    color: rgba(255,215,0,0.9);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}
/* ==================== 队伍页面V2样式 ==================== */

/* 队伍信息卡片 */
.team-info-card-v2 {
    background: linear-gradient(145deg, rgba(30,30,45,0.9) 0%, rgba(20,20,35,0.95) 100%);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.team-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}

.team-icon-wrap {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(200,160,0,0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.team-basic-info {
    flex: 1;
}

.team-name-row,
.team-desc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.team-name-row .label,
.team-desc-row .label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    width: 36px;
}

.team-name-row .value,
.team-desc-row .value {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
}

.edit-btn {
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

.exit-btn {
    padding: 6px 12px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

/* 队员卡片 */
.team-members-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.member-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    position: relative;
    transition: all 0.2s;
}

.member-card.leader {
    border-color: rgba(255,215,0,0.4);
    background: linear-gradient(160deg, rgba(255,215,0,0.08) 0%, rgba(0,0,0,0.3) 100%);
}

.member-card.empty {
    border-style: dashed;
    border-color: rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.15);
    cursor: pointer;
}

.member-card.empty:active {
    transform: scale(0.98);
}

.member-avatar-v2 {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(30,60,150,0.15) 100%);
    border: 2px solid rgba(59,130,246,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 8px;
    position: relative;
}

.member-card.leader .member-avatar-v2 {
    border-color: rgba(255,215,0,0.5);
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(200,160,0,0.1) 100%);
}

.crown-icon {
    position: absolute;
    top: -8px;
    right: -4px;
    font-size: 14px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.empty-avatar {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.05);
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255,255,255,0.3);
    margin: 0 auto 8px;
}

.member-name-v2 {
    font-size: 11px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-name-v2.highlight {
    color: #ffd700;
}

.member-level-v2 {
    font-size: 10px;
    color: rgba(255,215,0,0.8);
    margin-bottom: 2px;
}

.member-title {
    font-size: 9px;
    color: rgba(100,180,255,0.8);
}

.empty-text {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 2px;
}

.invite-hint {
    font-size: 9px;
    color: rgba(74,222,128,0.7);
}

.team-cost-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}

.tip-icon {
    font-size: 12px;
}

/* 副本选择区 */
.dungeon-section-v2 {
    margin-top: 8px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 12px;
}

.section-icon {
    font-size: 16px;
}

.section-title-v2 {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

/* 副本卡片 */
.dungeon-card-v2 {
    background: linear-gradient(145deg, rgba(35,35,50,0.8) 0%, rgba(25,25,40,0.9) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.dungeon-card-v2.featured {
    border-color: rgba(147,51,234,0.4);
    background: linear-gradient(145deg, rgba(50,35,70,0.8) 0%, rgba(30,20,50,0.9) 100%);
}

.dungeon-card-v2.locked {
    opacity: 0.6;
}

.featured-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(236,72,153,0.8) 0%, rgba(168,85,247,0.8) 100%);
    border-radius: 10px;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
}

.dungeon-left {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.dungeon-icon-v2 {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.dungeon-icon-v2.pill {
    background: linear-gradient(135deg, rgba(34,197,94,0.2) 0%, rgba(22,163,74,0.15) 100%);
    border: 1px solid rgba(34,197,94,0.3);
}

.dungeon-icon-v2.diamond {
    background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(37,99,235,0.15) 100%);
    border: 1px solid rgba(59,130,246,0.3);
}

.dungeon-icon-v2.equip {
    background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(217,119,6,0.15) 100%);
    border: 1px solid rgba(245,158,11,0.3);
}

.dungeon-content {
    flex: 1;
}

.dungeon-name-v2 {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.dungeon-desc-v2 {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}

.dungeon-times {
    display: flex;
    align-items: center;
    gap: 6px;
}

.times-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

.times-value {
    font-size: 11px;
    font-weight: bold;
    color: #4ade80;
}

.dungeon-progress-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-v2 {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill-v2 {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 3px;
}

.progress-text-v2 {
    font-size: 10px;
    font-weight: bold;
    color: #60a5fa;
}

.dungeon-btns-v2 {
    display: flex;
    gap: 8px;
}

.btn-sweep-v2,
.btn-start-v2 {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-sweep-v2 {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
}

.btn-start-v2 {
    background: linear-gradient(135deg, rgba(255,215,0,0.9) 0%, rgba(255,180,0,0.9) 100%);
    border: none;
    color: #1a1a2e;
    box-shadow: 0 4px 12px rgba(255,215,0,0.3);
}

.btn-sweep-v2:active,
.btn-start-v2:active {
    transform: scale(0.98);
}

.btn-sweep-v2:disabled,
.btn-start-v2:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dungeon-note-v2 {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 10px;
    color: rgba(255,150,150,0.8);
}

.locked-overlay-v2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    z-index: 1;
}

.locked-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.lock-icon-v2 {
    font-size: 28px;
}

.lock-text {
    font-size: 12px;
    font-weight: bold;
    color: rgba(255,255,255,0.7);
}

/* 页面标签栏V2 */
.page-tabs-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.tab-item-v2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-item-v2.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

.tab-icon {
    font-size: 14px;
}

.tab-back-v2 {
    padding: 8px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
}

/* ==================== 队伍列表页面V2样式 ==================== */

/* 搜索筛选栏 */
.search-filter-bar {
    margin-bottom: 12px;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.search-icon {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}

.search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.filter-options {
    display: flex;
    gap: 6px;
}

.filter-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn.active {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: #60a5fa;
}

/* 队伍列表 */
.team-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-item-v2 {
    display: flex;
    align-items: center;
    background: linear-gradient(145deg, rgba(35,35,50,0.7) 0%, rgba(25,25,40,0.8) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
    transition: all 0.2s;
}

.team-item-v2:active {
    transform: scale(0.99);
}

.team-item-v2.locked {
    opacity: 0.6;
}

.team-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.team-number {
    font-size: 10px;
    font-weight: bold;
    color: rgba(255,255,255,0.3);
    width: 28px;
}

.team-item-info {
    flex: 1;
}

.team-item-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 3px;
}

.team-item-leader {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.team-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.member-count {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 13px;
}

.count-current {
    font-weight: bold;
    color: #4ade80;
}

.count-sep {
    color: rgba(255,255,255,0.3);
}

.count-max {
    color: rgba(255,255,255,0.5);
}

.member-count.almost-full .count-current {
    color: #fbbf24;
}

.btn-join-v2 {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(74,222,128,0.9) 0%, rgba(34,197,94,0.9) 100%);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(74,222,128,0.3);
}

.btn-join-v2:active {
    transform: scale(0.95);
}

.btn-join-v2.locked {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    box-shadow: none;
}

.locked-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
}

/* 列表底部 */
.list-footer-v2 {
    margin-top: 16px;
    text-align: center;
}

.list-tip-v2 {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
}

.btn-create-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(255,215,0,0.9) 0%, rgba(255,180,0,0.9) 100%);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    color: #1a1a2e;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255,215,0,0.3);
}

.btn-create-v2:active {
    transform: scale(0.98);
}
/* ==================== 关卡选择页面样式 ==================== */

.guanka-section {
    padding: 10px 12px;
}

.guanka-tip {
    font-size: 10px;
    color: rgba(74,222,128,0.8);
    text-align: center;
    margin-bottom: 12px;
}

.guanka-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.guanka-item {
    background: rgba(30,30,40,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.guanka-item:active {
    transform: scale(0.95);
}

.guanka-item.unlocked {
    border-color: rgba(59,130,246,0.4);
    background: rgba(59,130,246,0.1);
}

.guanka-item.locked {
    opacity: 0.5;
}

.guanka-num {
    font-size: 16px;
    font-weight: bold;
    color: rgba(255,255,255,0.8);
    margin-bottom: 4px;
}

.guanka-item.unlocked .guanka-num {
    color: #60a5fa;
}

.guanka-name {
    font-size: 9px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guanka-status {
    font-size: 8px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

.guanka-item.unlocked .guanka-status {
    color: #4ade80;
}

/* ==================== 仙器八卦页面样式 ==================== */
.xianqi-section {
    padding-bottom: 80px;
}

.bagua-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.bagua-circle {
    width: 280px;
    height: 280px;
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,100,0.1) 0%, transparent 70%);
}

.gua {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    cursor: pointer;
}

.gua-qian { top: 10px; left: 50%; transform: translateX(-50%); }
.gua-dui { top: 35px; right: 35px; }
.gua-li { top: 50%; right: 10px; transform: translateY(-50%); }
.gua-zhen { bottom: 35px; right: 35px; }
.gua-xun { bottom: 10px; left: 50%; transform: translateX(-50%); }
.gua-kan { bottom: 35px; left: 35px; }
.gua-gen { top: 50%; left: 10px; transform: translateY(-50%); }
.gua-kun { top: 35px; left: 35px; }

.gua-lv {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}


.taiji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    filter: drop-shadow(0 0 20px rgba(255,200,100,0.5));
}

.bagua-progress {
    margin-top: 20px;
    width: 100%;
    max-width: 250px;
    position: relative;
}

.bagua-progress .progress-bar {
    height: 8px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    overflow: hidden;
}

.bagua-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 4px;
}

.bagua-progress .progress-text {
    display: block;
    text-align: center;
    margin-top: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.treasure-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 16px;
    margin: 20px 15px;
    position: relative;
}

.box-icon {
    font-size: 36px;
}

.box-info {
    flex: 1;
}

.box-qty, .box-level {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    margin-bottom: 4px;
}

.qty-value, .level-value {
    color: #ffd700;
    font-weight: bold;
}

.view-link {
    color: #ffd700;
    text-decoration: none;
    cursor: pointer;
}
.open-box-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(74,222,128,0.8) 0%, rgba(34,197,94,0.8) 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
}

/* 练功操作区 */
.liangong-area {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 6px;
    margin: 0 10px;
}

.liangong-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.liangong-btn {
    padding: 16px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.liangong-btn.active {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.liangong-btn.locked {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    cursor: not-allowed;
}

.liangong-btn:active:not(.locked) {
    transform: scale(0.95);
    background: rgba(255,255,255,0.3);
}

.liangong-count {
    text-align: center;
    color: #22c55e;
    font-size: 13px;
    padding: 8px;
}

.liangong-count .count-value {
    color: #ffd700;
    font-weight: bold;
}

/* ==================== 套装图鉴页面样式 ==================== */
.tujian-section {
    padding: 10px;
    padding-bottom: 100px;
}

.suit-list {
    padding: 0 10px;
}

.suit-module {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.suit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 12px;
}

.suit-name {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.suit-bonus {
    font-size: 12px;
}

.bonus-type {
    color: #ffd700;
}

.bonus-type.cyan {
    color: #00ffd0;
}

.bonus-value {
    color: #ffd700;
    font-weight: bold;
    margin-left: 4px;
}

.suit-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    display: grid;
    /* 关键1：取消自动换行，强制单行显示 */
    grid-auto-flow: column;
    /* 关键2：设置每列固定宽度（替换1fr，否则会自适应容器宽度） */
    grid-template-columns: repeat(6, 60px);
    /* 可选：设置列间距 */
    /* grid-column-gap: 12px; */
    /* 核心：开启横向滚动，纵向不滚动 */
    overflow-x: auto;
    height: 60px;
    white-space: nowrap;
}

.slot-item {
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 4px;
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}

.slot-item.active {
    border-color: rgba(255,140,0,0.6);
    background: rgba(255,140,0,0.1);
}

.slot-item.owned {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.1);
}

.slot-name {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
}

.slot-equip {
    color: #ff9500;
    font-size: 11px;
    line-height: 1.3;
}

.slot-item.owned .slot-equip {
    color: #f87171;
}