/**
 * 永堕轮回 6.9 - 服务器端版本样式表
 */

/* ==================== 原有样式 ==================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Microsoft YaHei', sans-serif;
}

@media (max-width: 768px) {
    .login-tab::before {
        display: none;
    }

    .login-tab:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-panel,
    .login-tab,
    .login-tab::before,
    .login-title,
    .login-subtitle {
        animation: none !important;
        transition: none !important;
    }
}

body {
    background-color: #0c0c0c;
    color: #f0e6d2;
    min-height: 100vh;
    padding: 10px;
}

.container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    max-width: 1600px;
    margin: 0 auto;
    min-width: 0; /* 允许 grid 列收缩，不随内容撑开 */
}

.header {
    grid-column: 1 / span 2;
    background: linear-gradient(to right, #3a0c0c, #5a1c1c, #3a0c0c);
    border: 2px solid #8b4513;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
}

.game-title {
    font-size: 2.5rem;
    color: #ffcc00;
    text-shadow: 2px 2px 4px #000;
}

.game-subtitle {
    font-size: 1.2rem;
    color: #ff9900;
}

.main-content {
    background-color: rgba(20, 15, 10, 0.9);
    border: 2px solid #8b4513;
    border-radius: 5px;
    padding: 15px;
    min-width: 0; /* 防止内部战斗场景等内容把整列撑宽 */
    overflow-x: hidden;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* 允许右侧栏收缩，不因增益/减益/词缀图标栏撑宽整列 */
}

.panel {
    background-color: rgba(30, 20, 15, 0.9);
    border: 2px solid #8b4513;
    border-radius: 5px;
    padding: 15px;
}

.panel-title {
    color: #ff9900;
    border-bottom: 1px solid #8b4513;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px dashed #444;
    font-size: 0.8rem;
}

.stat-value {
    color: #ffcc00;
    font-weight: bold;
}

/* 金币数值：哪位数字变化哪位上下翻牌 */
.gold-digits-container {
    display: inline-flex;
    flex-wrap: nowrap;
    vertical-align: bottom;
}
.gold-digit-wrap {
    display: inline-block;
    perspective: 100px;
    overflow: hidden;
    height: 1.2em;
    line-height: 1.2;
    vertical-align: top;
}
.gold-digit-inner {
    display: inline-block;
    position: relative;
    height: 1.2em;
    transform-style: preserve-3d;
    transition: transform 0.35s ease-in-out;
}
.gold-digit-inner.gold-digit-flip {
    transform: rotateX(-180deg);
}
.gold-digit-front,
.gold-digit-back {
    display: block;
    height: 1.2em;
    line-height: 1.2;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.gold-digit-back {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotateX(180deg);
}

.button {
    background: linear-gradient(to bottom, #5a1c1c, #3a0c0c);
    color: #ffcc00;
    border: 1px solid #8b4513;
    border-radius: 3px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    margin: 3px;
}

.button:hover {
    background: linear-gradient(to bottom, #6a2c2c, #4a1c1c);
    box-shadow: 0 0 8px rgba(255, 100, 0, 0.5);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button.active {
    background: linear-gradient(to bottom, #1c5a1c, #0c3a0c);
    border-color: #00ff00;
}

/* 地图列表：等级不足时的标识 */
#map-list .button.map-level-lock {
    border-width: 1px;
}
#map-list .map-level-badge {
    font-weight: bold;
    letter-spacing: 0.02em;
}

/* 标签按钮 */
.tab-btn {
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #8b4513;
    color: #aaa;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.2s;
}

.tab-btn:hover {
    background: rgba(139,69,19,0.3);
    color: #ffcc00;
}

.tab-btn.active {
    background: rgba(139,69,19,0.6);
    color: #ffcc00;
    border-bottom-color: transparent;
}

/* 操作按钮网格布局 */
.action-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.action-btn {
    background: linear-gradient(to bottom, #5a1c1c, #3a0c0c);
    color: #ffcc00;
    border: 1px solid #8b4513;
    border-radius: 3px;
    padding: 6px 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
    position: relative;
    overflow: visible;
}

.action-btn:hover {
    background: linear-gradient(to bottom, #6a2c2c, #4a1c1c);
    box-shadow: 0 0 8px rgba(255, 100, 0, 0.5);
}

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

/* 锁定的操作按钮 */
.action-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.action-btn.locked:hover {
    background: linear-gradient(to bottom, #5a1c1c, #3a0c0c);
    box-shadow: none;
    transform: none;
}

.action-btn .lock-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #666;
}

/* 商店模块 */
.shop-modal-content {
    max-width: 540px;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(35, 28, 22, 0.98) 0%, rgba(28, 22, 18, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#shop-modal .modal-close {
    top: 14px;
    right: 14px;
}
.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 16px;
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(80, 55, 30, 0.25));
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.shop-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shop-icon {
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.shop-modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: #f0d878;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.shop-gold-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 1px solid rgba(255, 204, 0, 0.2);
}
.shop-gold-label {
    font-size: 0.8rem;
    color: #aaa;
}
.shop-gold-value {
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffcc00;
}
.shop-items-wrap {
    padding: 16px 20px 20px;
    max-height: 60vh;
    overflow-y: auto;
}
.shop-items-wrap::-webkit-scrollbar {
    width: 8px;
}
.shop-items-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.shop-items-wrap::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.5);
    border-radius: 4px;
}

/* 商店物品样式（通用，其他模块也可用） */
.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: rgba(40, 30, 20, 0.8);
    border-radius: 3px;
    margin-bottom: 8px;
    border: 1px solid #444;
}

.shop-item:hover {
    background-color: rgba(60, 40, 25, 0.9);
}

/* 商店弹窗内物品卡片样式 */
#shop-modal .shop-items-wrap .shop-item {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(45, 35, 28, 0.95), rgba(38, 30, 24, 0.95));
    border: 1px solid rgba(139, 90, 43, 0.35);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#shop-modal .shop-items-wrap .shop-item:hover {
    background: linear-gradient(135deg, rgba(55, 42, 32, 0.98), rgba(48, 38, 30, 0.98));
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}
#shop-modal .shop-items-wrap .shop-item > div:first-child {
    flex: 1;
    min-width: 0;
}
#shop-modal .shop-items-wrap .shop-item .button-small {
    margin-left: 6px;
}
#shop-modal .shop-items-loading,
#shop-modal .shop-items-empty {
    text-align: center;
    padding: 36px 20px;
    color: #888;
    font-size: 0.95rem;
}
#shop-modal .shop-items-empty {
    color: #666;
}

/* 副本列表样式 */
.dungeon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(40, 30, 20, 0.8);
    border: 1px solid #5a3a1a;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dungeon-item:hover {
    background: rgba(60, 40, 25, 0.9);
    border-color: #8b4513;
}

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

.dungeon-info {
    flex: 1;
}

.dungeon-name {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 5px;
}

.dungeon-desc {
    color: #aaa;
    font-size: 0.85rem;
}

.dungeon-reward {
    color: #00ff00;
    font-size: 0.8rem;
    margin-top: 3px;
}

.progress-bar {
    width: 100%;
    height: 16px;
    background-color: #333;
    border-radius: 3px;
    overflow: visible;
    position: relative;
}

.progress-bar > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 3px #000;
    white-space: nowrap;
    font-weight: bold;
    font-size: 11px;
}

.progress-fill {
    height: 100%;
    transition: width 0.5s;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 3px;
}

.progress-fill.hp-bar {
    background: linear-gradient(to right, #006600, #00cc00);
}

.progress-fill.mp-bar {
    background: linear-gradient(to right, #000066, #0066cc);
}


/* 战斗场景：宽高固定；顶部多留白，避免头像向上跳动时被上边缘裁掉 */
.battle-scene {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 12px 12px 12px;
    border: 2px solid #8b4513;
    border-radius: 10px;
    margin-bottom: 15px;
    width: 100%;
    height: 240px;
    min-height: 240px;
    max-height: 240px;
    min-width: 0;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
}
/* 电脑端加高战斗区域，避免背景图被裁掉一截（手机端比例已合适，不改） */
@media (min-width: 769px) {
    .battle-scene {
        height: 300px;
        min-height: 300px;
        max-height: 300px;
    }
}
/* 左右单位：头像在上、名字/血条/血量在下；顶部留白避免头像向上跳动时被 overflow 裁掉 */
.battle-scene .player-unit {
    min-width: 120px;
    width: auto;
    flex-shrink: 0;
    min-height: 0;
    margin-left: 52px;
    margin-right: 0;
    padding-top: 10px;
    overflow: visible;
}
.battle-scene .monster-unit {
    min-width: 120px;
    width: auto;
    flex-shrink: 0;
    min-height: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 10px;
    overflow: visible;
}
.battle-scene .battle-center {
    flex: 1;
    min-width: 60px;
    max-width: 100%;
}
/* PNG 背景图层（front_decor 等）必须始终在最底层，绝不遮挡头像与目标圈 */
.battle-scene .battle-bg-layers {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -999;
}
.battle-scene .battle-bg-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.battle-scene .battle-bg-layer .scroll-wrap {
    display: flex;
    width: 200%;
    height: 100%;
    will-change: transform;
    backface-visibility: hidden;
}
.battle-scene .battle-bg-layer .scroll-wrap img {
    display: block;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    flex-shrink: 0;
}
.battle-scene .battle-bg-layer.layer-back-land .scroll-wrap { animation: battle-bg-scroll 20s linear infinite; }
.battle-scene .battle-bg-layer.layer-back-decor .scroll-wrap { animation: battle-bg-scroll 16s linear infinite; }
.battle-scene .battle-bg-layer.layer-battleground .scroll-wrap { animation: battle-bg-scroll 12s linear infinite; }
.battle-scene .battle-bg-layer.layer-ground-decor .scroll-wrap { animation: battle-bg-scroll 10s linear infinite; }
.battle-scene .battle-bg-layer.layer-front-decor .scroll-wrap { animation: battle-bg-scroll 8s linear infinite; }
@keyframes battle-bg-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* 遭遇战时暂停，不抖动 */
.battle-scene.battle-bg-paused .battle-bg-layer .scroll-wrap {
    animation-play-state: paused;
}
.battle-scene .battle-unit,
.battle-scene .battle-center {
    position: relative;
    z-index: 1;
}
.battle-scene .battle-bg-layers + [id] { z-index: 5; }
/* 玩家/怪物单位（含头像+目标圈）必须在所有背景图的最上层 */
.battle-scene .battle-unit.player-unit,
.battle-scene .battle-unit.monster-unit { z-index: 999; }
.battle-scene .battle-center { z-index: 5; }
/* 头像与目标圈（countdown-ring/curse-ring）再提高一层，确保绝对在最上 */
.monster-avatar, .player-avatar {
    position: relative;
    z-index: 100;
    transform: translateZ(0);
}

/* ========== 战斗场景魂环：位置与大小（改下面变量即可） ==========
 * 相对于玩家头像所在容器的定位，支持 % 或 px
 * translateX/Y：-50% 表示以自身中心对齐到 left/top 点，可改为 0 或其它
 */
/* 魂环容器：战斗场景直接子元素，置于天气 UI 下层；top/left 由 JS 按血量文字 #player-battle-stats 实时计算 */
#battle-soul-ring-wrap {
    --battle-soul-ring-width: 288px;
    --battle-soul-ring-height: 288px;
    position: absolute;
    width: var(--battle-soul-ring-width);
    height: var(--battle-soul-ring-height);
    pointer-events: none;
    z-index: 1;
    display: none;
}
#battle-soul-ring-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.battle-weather-marquee {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 24px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(139, 69, 19, 0.75);
    border-radius: 8px;
    overflow: hidden;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    pointer-events: none;
}

.battle-threat-marquee {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 8px;
    height: 26px;
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(139, 69, 19, 0.75);
    border-radius: 8px;
    overflow: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    pointer-events: none;
}

.battle-threat-marquee-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.battle-threat-marquee-center .bt-left,
.battle-threat-marquee-center .bt-right {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-threat-marquee-center .bt-left {
    flex: 1;
    text-align: left;
}

.battle-threat-marquee-center .bt-right {
    flex: 1;
    text-align: right;
}

.battle-threat-marquee-center .bt-threat {
    color: #ffcc00;
}

.battle-threat-marquee-center .bt-env {
    color: #ff6666;
}

.battle-threat-marquee-scroll {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 100%;
    display: none;
    overflow: hidden;
}

.battle-threat-marquee-scroll-left {
    right: auto;
    width: calc(50% - 5px);
}

.battle-threat-marquee-scroll-right {
    left: auto;
    width: calc(50% - 5px);
}

.battle-threat-marquee-scroll.active {
    display: block;
}

.battle-threat-marquee-scroll-inner {
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #c89a00;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}

.battle-threat-marquee-scroll-right .battle-threat-marquee-scroll-inner {
    color: #cc3333;
}

@keyframes battleThreatMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-120%); }
}

.battle-weather-marquee-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.battle-weather-marquee-center .bw-left,
.battle-weather-marquee-center .bw-right {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-weather-marquee-center .bw-left {
    flex: 1;
    text-align: left;
}

.battle-weather-marquee-center .bw-right {
    flex: 1;
    text-align: right;
}

.battle-weather-marquee-center .bw-weather {
    color: #66ccff;
}

.battle-weather-marquee-center .bw-liangyi {
    color: #ffcc00;
}

.battle-weather-marquee-center .bw-yang {
    color: #ffcc00;
}

.battle-weather-marquee-center .bw-yin {
    color: #9999ff;
}

.battle-weather-marquee-center .bw-taiji {
    color: #ffd700;
}

.battle-weather-marquee-center .bw-pos {
    color: #66ff66;
}

.battle-weather-marquee-center .bw-neg {
    color: #ff6666;
}

.battle-weather-marquee-center .bw-countdown {
    color: #ffffff;
    opacity: 0.9;
    font-weight: bold;
}

.battle-weather-marquee-scroll {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    bottom: 0;
    overflow: hidden;
    display: none;
}

.battle-weather-marquee-scroll.active {
    display: block;
}

.battle-weather-marquee-scroll-inner {
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #fff;
    font-size: 0.82rem;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    will-change: transform;
}

@keyframes battleWeatherMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-200%); }
}

@media (max-width: 768px) {
    .battle-weather-marquee {
        left: 8px;
        right: 8px;
        bottom: 6px;
        height: 22px;
        border-radius: 7px;
    }
    .battle-weather-marquee-center,
    .battle-weather-marquee-scroll-inner {
        font-size: 0.75rem;
    }

    .battle-threat-marquee {
        left: 8px;
        right: 8px;
        top: 6px;
        height: 22px;
        border-radius: 7px;
    }
    .battle-threat-marquee-center,
    .battle-threat-marquee-scroll-inner {
        font-size: 0.75rem;
    }
    .battle-threat-progress-bar {
        width: 100px;
    }
}

.battle-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.monster-avatar, .player-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    border-radius: 50%;
    border: 2px solid #8b4513;
}

/* 仙体/诅咒：头像外那一圈金/绿做倒计时，从 12 点顺时针消失（仅此一圈，无内圈）；保证在头像层内最上 */
.avatar-countdown-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.avatar-countdown-ring circle {
    /* 由 JS 设置 --ring-circumference 与 animation */
    will-change: stroke-dashoffset;
}

@keyframes avatar-countdown-drain {
    to { stroke-dashoffset: var(--ring-circumference, 248); }
}

.monster-avatar {
    background: radial-gradient(circle, rgba(80,40,40,0.8), rgba(40,20,20,0.9));
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.3);
    animation: monsterIdle 2s ease-in-out infinite;
}

/* Boss 与普通怪头像尺寸一致，避免切换怪物时战场宽度被撑开 */
.monster-avatar.boss {
    width: 64px;
    height: 64px;
    font-size: 2.4rem;
    border-color: #ff3300;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
}

.player-avatar {
    background: radial-gradient(circle, rgba(40, 60, 80, 0.8), rgba(20, 40, 60, 0.9));
    border-color: #4a90d9;
    box-shadow: 0 0 20px rgba(74, 144, 217, 0.3);
}

.player-avatar.dead {
    background: radial-gradient(circle, rgba(60, 30, 30, 0.9), rgba(40, 20, 20, 0.95));
    border-color: #ff3333;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    animation: deadPulse 2s infinite;
}

/* 仙体：玩家头像外圈金色光环（内蓝圈+外金圈） */
.player-avatar.shenti-ring {
    box-shadow: 0 0 20px rgba(74, 144, 217, 0.3), 0 0 0 5px rgba(255, 215, 0, 0.95);
}

/* 诅咒：怪物头像外圈绿色光环（内圈+外绿圈） */
.monster-avatar.curse-ring {
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.3), 0 0 0 5px rgba(0, 255, 100, 0.85);
}

.monster-avatar.boss.curse-ring {
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5), 0 0 0 5px rgba(0, 255, 100, 0.85);
}

@keyframes deadPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 30px rgba(255, 0, 0, 0.8); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 名字、血量按内容显示，不压缩 */
.monster-name,
.player-battle-name {
    font-size: 1.1rem;
    font-weight: bold;
    white-space: nowrap;
}
.battle-scene .unit-info {
    width: 100%;
    min-width: 0;
}
.battle-scene .unit-hp-text {
    font-size: 0.8rem;
    white-space: nowrap;
}

.monster-name {
    color: #ff3333;
}

.player-battle-name {
    color: #4a90d9;
}

.unit-info {
    min-width: 0;
    width: 100%;
}

.unit-hp-bar {
    width: 100px;
    height: 12px;
    background-color: #333;
    border-radius: 6px;
    overflow: hidden;
}

.unit-hp-bar .hp-fill {
    height: 100%;
    background: linear-gradient(to right, #cc0000, #ff3300);
    transition: width 0.3s;
}

.unit-hp-bar.player-hp .hp-fill {
    background: linear-gradient(to right, #006600, #00cc00);
}

.unit-hp-text {
    font-size: 0.8rem;
    color: #aaa;
    white-space: nowrap;
}

.battle-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.skill-display {
    /* 默认显示，战斗时JavaScript控制隐藏 */
    display: block;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    border: 1px solid #555;
}

.skill-text {
    font-size: 1.2rem;
    color: #ffcc00;
}

.battle-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.log {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #444;
    border-radius: 3px;
    padding: 10px;
    height: 140px;
    overflow: hidden;
    font-size: 0.9rem;
    position: relative;
}

/* 隐藏滚动条 */
.log::-webkit-scrollbar {
    display: none;
}

.log {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 日志时间戳 */
.log-time {
    color: #888;
    font-size: 0.8rem;
}

/* 日志容器包装 */
.log-container {
    position: relative;
}

/* 更多按钮 */
.log-more-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(139, 69, 19, 0.8);
    border: 1px solid #8b4513;
    border-radius: 3px;
    padding: 2px 8px;
    color: #ffcc00;
    font-size: 0.75rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.log-more-btn:hover {
    background: rgba(139, 69, 19, 1);
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
}

.log-tab {
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    border-radius: 5px 5px 0 0;
    color: #aaa;
    cursor: pointer;
}

.log-tab.active {
    background: rgba(139, 69, 19, 0.6);
    border-color: #8b4513;
    color: #ffcc00;
}

.log-entry-system { color: #00ccff; }
.log-entry-combat { color: #ff9900; }
.log-entry-loot { color: #00ff00; }
.log-entry-damage { color: #ff3333; }
.log-entry-sync { color: #66ff66; }

.damage-number, .damage-float {
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff3333;
    text-shadow: 2px 2px 0 #000;
    animation: damageFloat 1s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

.damage-number.crit, .damage-float.crit { font-size: 2rem; color: #ffcc00; }
.damage-number.heal, .damage-float.heal { color: #33ff33; }
.damage-float.normal { color: #ff3333; }

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

/* 战魂伤害浮动动画 */
@keyframes soulDamageFloat {
    0% { 
        opacity: 1; 
        transform: translateY(0) scale(0.8); 
    }
    20% {
        transform: translateY(-10px) scale(1.2);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-60px) scale(1); 
    }
}

/* 神器伤害浮动动画 */
@keyframes artifactDamageFloat {
    0% { 
        opacity: 1; 
        transform: translateY(0) scale(0.8); 
    }
    20% {
        transform: translateY(-10px) scale(1.2);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-60px) scale(1); 
    }
}

/* ==================== 装备栏 ==================== */

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.equipment-slot {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #5a3a1a;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    transition: all 0.2s;
    min-height: 65px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.equipment-slot:hover {
    background: rgba(139, 69, 19, 0.3);
    transform: scale(1.02);
}

.equipment-slot small {
    color: #aaa;
    font-size: 0.75rem;
    display: block;
    margin-bottom: 4px;
}

.equipment-name {
    font-size: 0.85rem;
    color: #666;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    word-break: normal;
}

/* 强化等级图标行：10 个图标同一行、自动压缩、左对齐 */
.equip-enhance-icons,
.item-enhance-icons,
.tooltip-enhance-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    line-height: 0;
    margin-top: 2px;
}
.equip-enhance-icons img,
.item-enhance-icons img,
.tooltip-enhance-icons img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* ==================== 背包系统 ==================== */

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    max-height: 350px;
    overflow-y: auto;
    padding: 8px;
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.95), rgba(30, 20, 15, 0.95));
    border-radius: 5px;
    border: 1px solid #5a3a1a;
}

.inventory-grid::-webkit-scrollbar {
    width: 6px;
}

.inventory-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.inventory-grid::-webkit-scrollbar-thumb {
    background: #8b4513;
    border-radius: 3px;
}

.inventory-item {
    background: linear-gradient(135deg, rgba(40, 30, 20, 0.9), rgba(60, 45, 30, 0.9));
    border: 1px solid #5a4a3a;
    border-radius: 3px;
    padding: 3px 2px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.item-enhance-icons {
    margin-top: auto;
    min-height: 18px;
}

.inventory-item:hover {
    background: linear-gradient(135deg, rgba(60, 45, 30, 0.95), rgba(80, 60, 40, 0.95));
    border-color: #ff9900;
}

/* 背包模块：整体宽度 +20%，行囊/仓库/魂甲展示区与每个装备格 +20% */
#inventory-modal .modal-content {
    max-width: 900px !important;  /* 原 750px * 1.2 */
    width: 100%;
}
#inventory-modal .inventory-grid {
    width: 100%;
    box-sizing: border-box;
}

/* 升级箭头图标 */
.upgrade-arrow {
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -7px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
    font-weight: bold;
    pointer-events: none;
    z-index: 5;
}

@keyframes arrowBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* 背包按钮上的升级提示 */
.has-upgrade-indicator {
    position: relative;
}

.has-upgrade-indicator::after {
    content: '⬆';
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -8px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
}

/* 按钮上的升级箭头 */
.btn-upgrade-arrow {
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -8px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
    pointer-events: none;
}

.item-name {
    font-weight: bold;
    word-break: break-all;
    line-height: 1.15;
    font-size: 0.75rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-count {
    font-size: 0.65rem;
    position: absolute;
    bottom: 1px;
    right: 2px;
    background: rgba(0, 0, 0, 0.85);
    padding: 0 3px;
    border-radius: 2px;
    color: #ffcc00;
}

.item-type {
    font-size: 0.6rem;
    opacity: 0.7;
    color: #aaa;
}

.item-gems {
    font-size: 0.6rem;
    color: #ff66ff;
    position: absolute;
    top: 1px;
    left: 2px;
}

/* 强化等级角标：避免长名字被两行省略号截断后看不到 +x */
.item-enhance {
    font-size: 0.65rem;
    position: absolute;
    bottom: 1px;
    left: 2px;
    background: rgba(0, 0, 0, 0.85);
    padding: 0 3px;
    border-radius: 2px;
    color: #ffd700;
    font-weight: bold;
    pointer-events: none;
}


/* 确认弹窗美化 */
.confirm-dialog {
    background: linear-gradient(180deg, #2a1a0a, #1a120a);
    border: 2px solid #8b4513;
    border-radius: 12px;
    padding: 20px 25px;

    /* 兼容出售弹窗（内容更复杂），同时保证小屏不溢出 */
    width: min(520px, calc(100vw - 24px));
    max-width: 520px;

    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 15px rgba(139, 69, 19, 0.3);
    animation: dialogFadeIn 0.25s ease-out;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirm-dialog-title {
    color: #ff9900;
    font-size: 1.15rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #5a4a3a;
    text-shadow: 0 0 10px rgba(255, 153, 0, 0.3);
}

.confirm-dialog-content {
    color: #ddd;
    margin-bottom: 18px;
    line-height: 1.6;

    /* 出售弹窗内有输入框/多段信息时更易读 */
    text-align: left;
}

.confirm-dialog-info {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(139, 69, 19, 0.3);
}

.confirm-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 5px;
}

.confirm-btn {
    padding: 10px 28px;
    border: 1px solid #8b4513;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    transition: all 0.2s;
    min-width: 90px;
}

.confirm-btn-ok {
    background: linear-gradient(180deg, #5a4020, #3a2810);
    color: #ffcc00;
    border-color: #aa6600;
    box-shadow: 0 2px 8px rgba(170, 102, 0, 0.3);
}

.confirm-btn-ok:hover {
    background: linear-gradient(180deg, #6a5030, #4a3820);
    border-color: #ff9900;
    box-shadow: 0 2px 12px rgba(255, 153, 0, 0.4);
    transform: translateY(-1px);
}

.confirm-btn-cancel {
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
    color: #aaa;
}

.confirm-btn-cancel:hover {
    background: linear-gradient(180deg, #4a4a4a, #3a3a3a);
    color: #fff;
    transform: translateY(-1px);
}

/* 出售弹窗数量选择（复用 confirm-dialog 体系） */
.confirm-dialog-qty {
    margin: 12px 0 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(139, 69, 19, 0.35);
    border-radius: 8px;
}

.confirm-dialog-qty-label {
    color: #aaa;
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-align: center;
}

.confirm-dialog-qty-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.confirm-qty-input {
    width: 92px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(170, 102, 0, 0.5);
    background: rgba(20, 12, 6, 0.9);
    color: #ffcc00;
    text-align: center;
    outline: none;
}

.confirm-qty-input:focus {
    border-color: #ff9900;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.15);
}

.confirm-mini-btn {
    padding: 8px 12px;
    border: 1px solid rgba(139, 69, 19, 0.6);
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(70, 50, 25, 0.95), rgba(45, 30, 15, 0.95));
    color: #ddd;
    transition: all 0.15s;
}

.confirm-mini-btn:hover {
    border-color: #ff9900;
    color: #fff;
    transform: translateY(-1px);
}

.confirm-dialog-qty-hint {
    color: #777;
    font-size: 0.75rem;
    margin-top: 8px;
    text-align: center;
}


/* 背包筛选按钮 */
.inventory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.filter-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: linear-gradient(to bottom, #3a2a1a, #2a1a0a);
    border: 1px solid #5a3a1a;
    border-radius: 3px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.filter-btn:hover {
    color: #ffcc00;
    border-color: #8b4513;
}

.filter-btn.active {
    color: #ffcc00;
    background: linear-gradient(to bottom, #5a4a3a, #4a3a2a);
    border-color: #8b4513;
}

/* 筛选按钮升级指示器 */
.filter-upgrade {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #00cc00;
    color: #fff;
    font-size: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 4px #00ff00;
}

/* 背包选项卡 */
.inventory-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid #5a3a1a;
    padding-bottom: 10px;
}

.inventory-tab {
    padding: 8px 20px;
    background: linear-gradient(to bottom, #3a2a1a, #2a1a0a);
    border: 1px solid #5a3a1a;
    border-radius: 5px 5px 0 0;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
}

.inventory-tab .tab-icon {
    margin-right: 5px;
}

.inventory-tab:hover {
    color: #ffcc00;
    background: linear-gradient(to bottom, #4a3a2a, #3a2a1a);
}

.inventory-tab.active {
    color: #ffcc00;
    background: linear-gradient(to bottom, #5a4a3a, #4a3a2a);
    border-bottom-color: transparent;
}

.inventory-tab .tab-full-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3333;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(255, 51, 51, 0.8);
    pointer-events: none;
}

/* 手机端背包选项卡：图标和文字分两行 */
@media (max-width: 768px) {
    .inventory-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 15px;
        text-align: center;
    }
    
    .inventory-tab .tab-icon {
        display: block;
        margin-right: 0;
        margin-bottom: 3px;
        font-size: 1.2rem;
    }
    
    .inventory-tab .tab-text {
        display: block;
        font-size: 0.8rem;
    }
}

/* 背包操作按钮 */
.inventory-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.inventory-actions .button {
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* ==================== 模态框 ==================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    background: linear-gradient(135deg, rgba(30, 20, 15, 0.98), rgba(50, 30, 20, 0.98));
    border: 2px solid #8b4513;
    border-radius: 10px;
    padding: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    position: relative;
}

#log-history-modal .modal-content {
    max-width: 666px !important;  /* 原 605px 加宽 10% */
}

/* 自定义对话框：按需允许更宽（用于黄金十二宫战斗等复杂界面），避免说明/详情页被意外拉宽 */
#custom-dialog #custom-dialog-content.custom-dialog-wide {
    width: min(1200px, calc(100vw - 40px));
    max-width: 1200px;
}

/* 模态框关闭按钮 */
.modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: rgba(100, 50, 30, 0.8);
    border: 1px solid #8b4513;
    border-radius: 50%;
    color: #ff9900;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.modal-close:hover {
    background: rgba(139, 69, 19, 0.9);
    color: #fff;
    transform: scale(1.1);
}

.modal-title {
    color: #ffcc00;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #8b4513;
    font-size: 1.3rem;
    padding-right: 25px;
}

/* 官阶模态框：提示 + 上左中右三框（名+该阶奖励）+ 下卷轴区；整体与各区域宽度 +30% 防大数值换行 */
.guanjie-modal-content .guanjie-tip {
    margin: -8px 0 12px 0;
    padding: 8px 12px;
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: 6px;
    font-size: 0.9rem;
    color: #e8d4a8;
}
.guanjie-modal-content .guanjie-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 12px;
    gap: 12px;
}
.guanjie-modal-content .guanjie-rank-box {
    flex: 1;
    min-width: 175px;
    border: 2px solid #8b4513;
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(40, 30, 20, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
}
.guanjie-modal-content .guanjie-rank-name {
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.guanjie-modal-content .guanjie-prev .guanjie-rank-name {
    color: #8b9dc3;
    text-shadow: 0 0 8px rgba(139, 157, 195, 0.6), 0 1px 3px rgba(0,0,0,0.8);
}
.guanjie-modal-content .guanjie-current .guanjie-rank-name {
    font-size: 1.1rem;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.7), 0 1px 3px rgba(0,0,0,0.8);
}
.guanjie-modal-content .guanjie-next .guanjie-rank-name {
    color: #7cff7c;
    text-shadow: 0 0 8px rgba(124, 255, 124, 0.5), 0 1px 3px rgba(0,0,0,0.8);
}
.guanjie-modal-content .guanjie-rank-rewards {
    width: 100%;
    text-align: left;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-label {
    color: #e8d4a8;
    margin-right: 4px;
}
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-attack { color: #ff9900; }
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-defense { color: #66ff66; }
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-mdef { color: #9999ff; }
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-cut { color: #ee0808; }
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: nowrap;
}
.guanjie-modal-content .guanjie-rank-rewards .guanjie-rr-label {
    min-width: 3.2em;
    flex-shrink: 0;
}
.guanjie-modal-content .guanjie-bottom {
    width: 720px;
    height: 400px;
    max-width: 100%;
    box-sizing: border-box;
    background-size: 720px 400px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    border-radius: 8px;
    border: 2px solid #8b4513;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.guanjie-modal-content .guanjie-scroll-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px 20px;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.guanjie-modal-content .guanjie-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffd700;
    margin: 0 0 14px 0;
    flex-shrink: 0;
}
.guanjie-modal-content .guanjie-rewards {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    gap: 8px;
    margin-bottom: 16px;
    flex: 1;
    justify-content: center;
    box-sizing: border-box;
}
.guanjie-modal-content .guanjie-reward-item {
    font-size: 1.15rem;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}
.guanjie-modal-content .guanjie-reward-label {
    color: #e8d4a8;
    flex-shrink: 0;
    min-width: 3.2em;
    display: inline-block;
    text-align: left;
}
.guanjie-modal-content .guanjie-reward-val {
    font-weight: bold;
    white-space: nowrap;
}
.guanjie-modal-content .guanjie-val-attack { color: #ff9900; }
.guanjie-modal-content .guanjie-val-defense { color: #66ff66; }
.guanjie-modal-content .guanjie-val-mdef { color: #9999ff; }
.guanjie-modal-content .guanjie-val-cut { color: #ee0808; }
.guanjie-modal-content .guanjie-upgrade-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.guanjie-modal-content .guanjie-cost {
    font-size: 0.9rem;
    color: #e8d4a8;
}
.guanjie-modal-content .guanjie-cost-num {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

/* 魂环模态框：三框 + 当前魂环 11 帧轮播 + 累计奖励 */
.hunhuan-modal-content .hunhuan-tip {
    margin: -8px 0 12px 0;
    padding: 8px 12px;
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: 6px;
    font-size: 0.9rem;
    color: #e8d4a8;
}
.hunhuan-modal-content .hunhuan-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 12px;
    gap: 8px;
}
.hunhuan-modal-content .hunhuan-rank-box {
    flex: 1;
    min-width: 0;
    border: 2px solid #8b4513;
    border-radius: 6px;
    padding: 8px 10px;
    background: rgba(40, 30, 20, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.hunhuan-modal-content .hunhuan-rank-name {
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hunhuan-modal-content .hunhuan-prev .hunhuan-rank-name { color: #8b9dc3; }
.hunhuan-modal-content .hunhuan-current .hunhuan-rank-name {
    font-size: 1.1rem;
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
}
.hunhuan-modal-content .hunhuan-next .hunhuan-rank-name { color: #7cff7c; }
.hunhuan-modal-content .hunhuan-rank-rewards {
    width: 100%;
    text-align: left;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hunhuan-modal-content .hunhuan-rank-rewards .hunhuan-rr-label { color: #e8d4a8; margin-right: 4px; min-width: 3.5em; display: inline-block; text-align: left; }
.hunhuan-modal-content .hunhuan-rank-rewards .hunhuan-rr-damage { color: #ff9900; }
.hunhuan-modal-content .hunhuan-rank-rewards .hunhuan-rr-crit { color: #ff6b6b; }
.hunhuan-modal-content .hunhuan-rank-rewards .hunhuan-rr-cut { color: #ee0808; }
.hunhuan-modal-content .hunhuan-rank-rewards .hunhuan-rr-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.hunhuan-modal-content .hunhuan-animation-wrap {
    text-align: center;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(20, 15, 10, 0.7);
    border: 1px solid #8b4513;
    border-radius: 8px;
}
.hunhuan-modal-content .hunhuan-animation-label {
    font-size: 0.85rem;
    color: #e8d4a8;
    margin-bottom: 8px;
}
.hunhuan-modal-content .hunhuan-animation-box {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hunhuan-modal-content .hunhuan-animation-box img {
    max-height: 240px;
}

/* 炼体/练气：两方框布局（参考魂环），动图铺满展示区 */
.lianti-lianqi-modal-content .lianti-lianqi-tip {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #e8d4a8;
    text-align: center;
}
.lianti-lianqi-modal-content .lianti-card,
.lianti-lianqi-modal-content .lianqi-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lianti-lianqi-modal-content .lianti-lianqi-level-box {
    text-align: center;
    padding: 12px 14px;
    background: rgba(40, 30, 20, 0.6);
    border: 2px solid #8b4513;
    border-radius: 8px;
}
.lianti-lianqi-modal-content .lianti-lianqi-level-row {
    font-weight: bold;
    color: #ffcc00;
    margin-bottom: 8px;
}
.lianti-lianqi-modal-content .lianti-lianqi-cost {
    font-size: 0.9rem;
    color: #e8d4a8;
    margin-bottom: 12px;
}
.lianti-lianqi-modal-content .lianti-lianqi-anim-wrap {
    text-align: center;
    padding: 10px;
    background: rgba(20, 15, 10, 0.7);
    border: 2px solid #8b4513;
    border-radius: 8px;
}
.lianti-lianqi-modal-content .lianti-lianqi-anim-label {
    font-size: 0.85rem;
    color: #e8d4a8;
    margin-bottom: 8px;
}
.lianti-lianqi-modal-content .lianti-lianqi-anim-box {
    min-height: 200px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
}
.lianti-lianqi-modal-content .lianti-lianqi-anim-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hunhuan-modal-content .hunhuan-bottom {
    padding: 12px 16px;
    background: rgba(40, 30, 20, 0.6);
    border: 1px solid #8b4513;
    border-radius: 8px;
}
.hunhuan-modal-content .hunhuan-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffd700;
    margin: 0 0 10px 0;
}
.hunhuan-modal-content .hunhuan-rewards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.hunhuan-modal-content .hunhuan-reward-item {
    font-size: 1rem;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.hunhuan-modal-content .hunhuan-reward-label { color: #e8d4a8; min-width: 4.5em; }
.hunhuan-modal-content .hunhuan-val-damage { color: #ff9900; font-weight: bold; }
.hunhuan-modal-content .hunhuan-val-crit { color: #ff6b6b; font-weight: bold; }
.hunhuan-modal-content .hunhuan-val-cut { color: #ee0808; font-weight: bold; }
.hunhuan-modal-content .hunhuan-upgrade-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hunhuan-modal-content .hunhuan-cost {
    font-size: 0.9rem;
    color: #e8d4a8;
}
.hunhuan-modal-content .hunhuan-cost-num {
    color: #ffd700;
    font-weight: bold;
}

/* 五行模态框：第一行 3 个，第二行 2 个居中；每行一个属性，按属性分色 */
#wuxing-modal .wuxing-tip {
    margin: -8px 0 12px 0;
    padding: 6px 10px;
    font-size: 0.85rem;
    color: #e8d4a8;
}
#wuxing-modal .wuxing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}
#wuxing-modal .wuxing-card {
    width: 200px;
    box-sizing: border-box;
    border: 2px solid #8b4513;
    border-radius: 8px;
    padding: 12px;
    background: rgba(30, 22, 15, 0.9);
    text-align: center;
}
#wuxing-modal .wuxing-card-name { font-size: 1.2rem; font-weight: bold; color: #ffcc00; margin-bottom: 6px; }
#wuxing-modal .wuxing-card-level { font-size: 0.9rem; color: #aaa; margin-bottom: 8px; }
#wuxing-modal .wuxing-card-attrs { font-size: 0.9rem; margin-bottom: 8px; min-height: 2.4em; }
#wuxing-modal .wuxing-card-attrs .wuxing-attr-line { margin-bottom: 2px; }
/* 每种属性一行，颜色区分 */
#wuxing-modal .wuxing-attr-ignore   { color: #ffd54f; }
#wuxing-modal .wuxing-attr-hp       { color: #66bb6a; }
#wuxing-modal .wuxing-attr-lifesteal{ color: #81c784; }
#wuxing-modal .wuxing-attr-reduce   { color: #42a5f5; }
#wuxing-modal .wuxing-attr-monster  { color: #ff7043; }
#wuxing-modal .wuxing-attr-crit    { color: #ef5350; }
#wuxing-modal .wuxing-attr-hit      { color: #ffb74d; }
#wuxing-modal .wuxing-attr-dodge    { color: #8d6e63; }
#wuxing-modal .wuxing-card-cost { font-size: 0.8rem; color: #e8d4a8; margin-bottom: 8px; }
#wuxing-modal .wuxing-card .button { width: 100%; }

/* 物品详情模态框 */
#item-detail-modal .modal-content {
    max-width: 380px;
    padding: 25px;
}

#soul-armor-modal .modal-content {
    width: min(1000px, calc(100vw - 24px)) !important;
    max-width: min(1000px, calc(100vw - 24px)) !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

#soul-armor-content {
    max-width: 100%;
    overflow-x: hidden;
}

#soul-armor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 100%;
}

/* 技能升级模态框 - 拉宽一倍以容纳4列技能 */
#skill-upgrade-modal .modal-content {
    max-width: 900px;
}

#item-detail-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    text-align: center;
}

/* 专业系统配方列表模态框 - 加宽一倍 */
#profession-modal .modal-content {
    max-width: 1000px;
}

/* ==================== 地图选择 ==================== */

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

.map-item {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #555;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.map-item:hover {
    border-color: #8b4513;
    background: rgba(139, 69, 19, 0.3);
}

.map-item.active {
    border-color: #00ff00;
    background: rgba(0, 100, 0, 0.3);
}

/* 地图模块：等级不足时的样式与角标 */
#maps-container .map-item.map-level-lock {
    border-color: rgba(255, 100, 80, 0.65);
    background: linear-gradient(135deg, rgba(45,22,22,0.95) 0%, rgba(65,28,28,0.92) 100%);
}
#maps-container .map-level-badge {
    font-weight: bold;
    letter-spacing: 0.02em;
}

/* ==================== 登录面板传奇风格 ==================== */

/* 装饰龙纹 */
.dragon-icon {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.3;
}

@keyframes dragonPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes flicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.9); }
}

.login-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 460px);
    padding: 34px 30px;
    text-align: center;
    z-index: 100;

    background: rgba(18, 18, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@keyframes legendBorderGlow {
    0%, 100% { 
        background-position: 0 0, 0% 50%;
        box-shadow: 
            0 0 40px rgba(139, 69, 19, 0.6),
            0 0 80px rgba(205, 133, 63, 0.3),
            0 20px 60px rgba(0, 0, 0, 0.9);
    }
    50% { 
        background-position: 0 0, 100% 50%;
        box-shadow: 
            0 0 50px rgba(218, 165, 32, 0.7),
            0 0 100px rgba(205, 133, 63, 0.4),
            0 20px 60px rgba(0, 0, 0, 0.9);
    }
}

/* 登录选项卡 - 底部样式 */
.login-tabs {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-tab {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    color: rgba(240, 230, 210, 0.75);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.login-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.2), transparent);
    transition: left 0.5s;
}

.login-tab:hover::before {
    left: 100%;
}

.login-tab:hover {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(240, 230, 210, 0.92);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.login-tab.active {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.9) 0%, rgba(147, 51, 234, 0.85) 100%);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow:
        0 12px 26px rgba(88, 101, 242, 0.28),
        0 10px 22px rgba(147, 51, 234, 0.18);
}

.login-tab .tab-icon {
    margin-right: 5px;
    font-size: 1.1rem;
}

/* 选项卡内容 */
.tab-content {
    animation: tabFadeIn 0.3s ease-out;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 登录底部按钮区域 */
.login-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 登录标题 - 传奇金色 */
.login-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #daa520;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    white-space: nowrap;
    text-shadow:
        0 0 10px rgba(218, 165, 32, 0.9),
        0 0 20px rgba(205, 133, 63, 0.6),
        0 0 30px rgba(139, 69, 19, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: legendTextGlow 3s ease-in-out infinite alternate;
}

@keyframes legendTextGlow {
    0% {
        color: #daa520;
        text-shadow:
            0 0 10px rgba(218, 165, 32, 0.9),
            0 0 20px rgba(205, 133, 63, 0.6),
            0 0 30px rgba(139, 69, 19, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    100% {
        color: #f4d03f;
        text-shadow:
            0 0 20px rgba(244, 208, 63, 1),
            0 0 40px rgba(218, 165, 32, 0.8),
            0 0 60px rgba(205, 133, 63, 0.6),
            2px 2px 4px rgba(0, 0, 0, 0.8);
    }
}

/* 登录副标题 - 棕橙色 */
.login-subtitle {
    color: #cd853f;
    margin-bottom: 25px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-shadow: 
        0 0 8px rgba(205, 133, 63, 0.6),
        1px 1px 2px rgba(0, 0, 0, 0.8);
    animation: legendSubtextGlow 2s ease-in-out infinite alternate;
}

@keyframes legendSubtextGlow {
    0% { 
        text-shadow: 
            0 0 8px rgba(205, 133, 63, 0.6),
            1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    100% { 
        text-shadow: 
            0 0 15px rgba(218, 165, 32, 0.8),
            0 0 25px rgba(205, 133, 63, 0.5),
            1px 1px 2px rgba(0, 0, 0, 0.8);
    }
}

/* 登录按钮 - 传奇风格 */
.login-button {
    padding: 12px 18px;
    margin: 0;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.95) 0%, rgba(147, 51, 234, 0.9) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 14px 34px rgba(88, 101, 242, 0.22),
        0 10px 26px rgba(147, 51, 234, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 120px;
}

.login-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(244, 208, 63, 0.1), transparent);
    animation: buttonShine 3s infinite;
}

@keyframes buttonShine {
    0% { transform: rotate(0deg) translate(-50%, -50%); }
    100% { transform: rotate(360deg) translate(-50%, -50%); }
}

.login-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow:
        0 16px 42px rgba(88, 101, 242, 0.30),
        0 12px 32px rgba(147, 51, 234, 0.22);
}

.login-button:active {
    transform: translateY(1px);
    filter: brightness(0.98);
}

.login-button.secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(240, 230, 210, 0.92);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.login-button.secondary:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.login-panel h2 {
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.login-panel .pixel-title {
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.4;
    text-shadow: none;
}

.login-panel .pixel-subtitle {
    margin: 0 0 18px 0;
    color: rgba(240, 230, 210, 0.72);
}

.login-panel .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.login-panel .form-group label {
    display: block;
    color: rgba(240, 230, 210, 0.85);
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 700;
}

.login-panel .form-group input,
.login-panel .form-group select {
    width: 100%;
    padding: 12px 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: rgba(240, 230, 210, 0.95);
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.login-panel .form-group input:focus,
.login-panel .form-group select:focus {
    outline: none;
    border-color: rgba(88, 101, 242, 0.65);
    background: rgba(0, 0, 0, 0.36);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}

.login-panel .form-group input::placeholder {
    color: rgba(240, 230, 210, 0.45);
}

.login-panel .login-input {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(240, 230, 210, 0.95);
    border-radius: 12px;
}

/* ==================== 登录页 - 沙城复古主题（灰黑土黄苍凉感） ==================== */

body.login-page {
    background:
        linear-gradient(180deg, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0.82) 55%, rgba(10, 8, 6, 0.90) 100%),
        url('../jpg/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #c4a574;
    overflow: hidden;
    min-height: 100vh;
    padding: 0;
}

body.login-page .sandstorm {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    overflow: hidden;
}

body.login-page .sandstorm-layer {
    position: absolute;
    inset: -20%;
    opacity: 0.55;
    filter: blur(0.6px);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(240, 210, 140, 0.12) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 20%, rgba(210, 170, 110, 0.10) 0 1px, transparent 2px),
        radial-gradient(circle at 40% 70%, rgba(255, 235, 180, 0.08) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 80% 60%, rgba(200, 150, 90, 0.10) 0 2px, transparent 3px);
    background-size: 280px 220px, 240px 200px, 320px 260px, 260px 240px;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

body.login-page .sandstorm-layer-1 {
    animation: sandstormDrift1 12s linear infinite;
}

body.login-page .sandstorm-layer-2 {
    opacity: 0.42;
    filter: blur(1.2px);
    background-size: 360px 280px, 300px 240px, 420px 320px, 340px 300px;
    animation: sandstormDrift2 18s linear infinite;
}

body.login-page .sandstorm-layer-3 {
    opacity: 0.28;
    filter: blur(2.2px);
    mix-blend-mode: overlay;
    background-size: 520px 420px, 460px 380px, 600px 480px, 500px 440px;
    animation: sandstormDrift3 26s linear infinite;
}

body.login-page .login-layout {
    position: relative;
    z-index: 100;
    min-height: 100vh;
    padding: 6vh 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

body.login-page .story-panel {
    flex: 1;
    min-width: 280px;
    max-width: 380px;
    padding: 26px 26px;
    background: rgba(20, 16, 12, 0.35);
    border: 1px solid rgba(139, 115, 85, 0.35);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

body.login-page .story-title {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(232, 212, 168, 0.92);
    text-shadow: 0 0 14px rgba(196, 165, 116, 0.25), 2px 2px 6px rgba(0, 0, 0, 0.85);
    margin-bottom: 14px;
    text-align: center;
}

body.login-page .story-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(232, 212, 168, 0.86);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    min-height: 12.5em;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

body.login-page .story-caret {
    display: inline-block;
    width: 10px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: rgba(232, 212, 168, 0.75);
    animation: storyCaretBlink 0.8s steps(1) infinite;
}

body.login-page .story-text.done .story-caret {
    display: none;
}

@keyframes storyCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes sandstormDrift1 {
    0% { transform: translate3d(-6%, -2%, 0) scale(1.05); }
    100% { transform: translate3d(6%, 2%, 0) scale(1.05); }
}

@keyframes sandstormDrift2 {
    0% { transform: translate3d(8%, -3%, 0) scale(1.10); }
    100% { transform: translate3d(-8%, 3%, 0) scale(1.10); }
}

@keyframes sandstormDrift3 {
    0% { transform: translate3d(-10%, 4%, 0) scale(1.15); }
    100% { transform: translate3d(10%, -4%, 0) scale(1.15); }
}

body.login-page .login-panel {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-left: auto;
    width: min(92vw, 380px);
    padding: 26px 22px;
    background: rgba(35, 30, 24, 0.92);
    border: 2px solid #6b5b4a;
    border-radius: 12px;
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(139, 115, 85, 0.25),
        inset 0 1px 0 rgba(139, 115, 85, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
    body.login-page {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.login-page .login-layout {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
        padding: 5vh 5vw;
    }
    body.login-page .story-panel {
        max-width: none;
    }
    body.login-page .login-panel {
        margin-left: 0;
        width: min(92vw, 460px);
    }
}

body.login-page .login-tabs {
    border-top-color: rgba(107, 91, 74, 0.5);
}

body.login-page .login-tab {
    background: rgba(45, 40, 32, 0.8);
    border-color: #5c4f42;
    color: rgba(196, 165, 116, 0.85);
}

body.login-page .login-tab::before {
    background: linear-gradient(90deg, transparent, rgba(196, 165, 116, 0.15), transparent);
}

body.login-page .login-tab:hover {
    border-color: #8b7355;
    color: #c4a574;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.login-page .login-tab.active {
    background: linear-gradient(135deg, rgba(107, 91, 74, 0.95) 0%, rgba(90, 75, 58, 0.9) 100%);
    border-color: #8b7355;
    color: #e8d4a8;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(196, 165, 116, 0.15);
}

body.login-page .login-title {
    color: #b89868;
    text-shadow:
        0 0 8px rgba(184, 152, 104, 0.5),
        0 0 16px rgba(139, 115, 85, 0.3),
        1px 1px 2px rgba(0, 0, 0, 0.9);
    animation: legendTextGlowSand 3s ease-in-out infinite alternate;
}

@keyframes legendTextGlowSand {
    0% { color: #b89868; text-shadow: 0 0 8px rgba(184, 152, 104, 0.5), 0 0 16px rgba(139, 115, 85, 0.3), 1px 1px 2px rgba(0, 0, 0, 0.9); }
    100% { color: #c4a574; text-shadow: 0 0 12px rgba(196, 165, 116, 0.6), 0 0 24px rgba(139, 115, 85, 0.35), 1px 1px 2px rgba(0, 0, 0, 0.9); }
}

body.login-page .login-subtitle {
    color: #8b7355;
    text-shadow: 0 0 6px rgba(139, 115, 85, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.login-page .login-button {
    background: linear-gradient(135deg, rgba(90, 75, 58, 0.95) 0%, rgba(70, 58, 45, 0.95) 100%);
    color: #e8d4a8;
    border: 1px solid #6b5b4a;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(139, 115, 85, 0.2);
}

body.login-page .login-button::before {
    background: linear-gradient(45deg, transparent, rgba(196, 165, 116, 0.08), transparent);
}

body.login-page .login-button:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 12px rgba(139, 115, 85, 0.2);
    filter: brightness(1.06);
}

body.login-page .login-button.secondary {
    background: rgba(45, 40, 32, 0.9);
    border-color: #5c4f42;
    color: #c4a574;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.login-page .login-button.secondary:hover {
    border-color: #8b7355;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

body.login-page .login-panel .pixel-title {
    color: #d4af37;
    text-shadow:
        1px 1px 0px #8b7355,
        2px 2px 0px #654321,
        3px 3px 4px rgba(0, 0, 0, 0.5),
        0px 0px 8px rgba(139, 115, 85, 0.3);
    font-weight: bold;
    letter-spacing: 2px;
}

body.login-page .login-panel .pixel-subtitle {
    color: rgba(196, 165, 116, 0.75);
}

body.login-page .login-panel .form-group label {
    color: rgba(196, 165, 116, 0.9);
}

body.login-page .login-panel .form-group input,
body.login-page .login-panel .form-group select,
body.login-page .login-panel .login-input {
    background: rgba(20, 18, 14, 0.85);
    border: 1px solid #5c4f42;
    color: #e8d4a8;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

body.login-page .login-panel .form-group input:focus,
body.login-page .login-panel .form-group select:focus {
    border-color: #8b7355;
    background: rgba(28, 24, 18, 0.9);
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.25);
}

body.login-page .login-panel .form-group input::placeholder {
    color: rgba(196, 165, 116, 0.4);
}

/* ==================== 游戏主界面 - 复用登录页沙城复古主题 ==================== */

body.game-page {
    background: linear-gradient(160deg,
        #1a1814 0%,
        #252220 25%,
        #2d2820 50%,
        #3d3528 75%,
        #2a2520 100%);
    background-attachment: fixed;
    color: #c4a574;
}

body.game-page .header {
    background: linear-gradient(135deg, rgba(107, 91, 74, 0.55) 0%, rgba(90, 75, 58, 0.65) 50%, rgba(70, 58, 45, 0.55) 100%);
    border-color: #6b5b4a;
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(196, 165, 116, 0.12);
}

body.game-page .game-title {
    color: #e8d4a8;
    text-shadow:
        0 0 10px rgba(196, 165, 116, 0.35),
        2px 2px 4px rgba(0, 0, 0, 0.9);
}

body.game-page .game-subtitle {
    color: rgba(196, 165, 116, 0.85);
}

body.game-page .main-content,
body.game-page .panel {
    background: rgba(35, 30, 24, 0.9);
    border-color: #6b5b4a;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(139, 115, 85, 0.12);
}

body.game-page .panel-title {
    color: #e8d4a8;
    border-bottom-color: rgba(107, 91, 74, 0.7);
}

body.game-page .stat-item {
    border-bottom-color: rgba(107, 91, 74, 0.55);
}

body.game-page .stat-value {
    color: #e8d4a8;
}

body.game-page #player-level {
    color: #66ccff;
}

body.game-page #player-rebirth {
    color: #ff66ff;
}

body.game-page #player-attack {
    color: #ff9900;
}

body.game-page #player-defense {
    color: #66ff66;
}

body.game-page #player-magic-defense {
    color: #9999ff;
}

body.game-page #player-crit {
    color: #ff6666;
}

body.game-page #player-hit-value {
    color: #fff;
}

body.game-page #player-cut {
    color: #ee0808;
}

body.game-page #player-exp,
body.game-page #player-hp,
body.game-page .progress-bar > span {
    font-size: 0.85rem !important;
}

body.game-page .button,
body.game-page .action-btn {
    background: linear-gradient(135deg, rgba(90, 75, 58, 0.95) 0%, rgba(70, 58, 45, 0.95) 100%);
    color: #e8d4a8;
    border-color: #6b5b4a;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(196, 165, 116, 0.1);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

body.game-page .button::before,
body.game-page .action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 55%);
    opacity: 0.9;
    pointer-events: none;
}

body.game-page .button:focus-visible,
body.game-page .action-btn:focus-visible,
body.game-page .tab-btn:focus-visible,
body.game-page .modal-close:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(139, 115, 85, 0.25),
        0 12px 32px rgba(0, 0, 0, 0.45);
}

body.game-page .button:hover,
body.game-page .action-btn:hover {
    background: linear-gradient(135deg, rgba(107, 91, 74, 0.95) 0%, rgba(90, 75, 58, 0.95) 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 12px rgba(139, 115, 85, 0.18);
    transform: translateY(-1px);
    filter: brightness(1.03);
}

body.game-page .button:active,
body.game-page .action-btn:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.99);
}

body.game-page .button:disabled,
body.game-page .action-btn:disabled {
    opacity: 0.55;
    filter: grayscale(0.35);
    cursor: not-allowed;
    transform: none;
}

body.game-page .action-btn {
    letter-spacing: 0.02em;
}

body.game-page .action-btn.locked {
    opacity: 0.55;
    filter: grayscale(0.55);
}

body.game-page .tab-btn {
    background: rgba(45, 40, 32, 0.8);
    border-color: #5c4f42;
    color: rgba(196, 165, 116, 0.85);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    overflow: hidden;
}

body.game-page .tab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    opacity: 0.7;
    pointer-events: none;
}

body.game-page .tab-btn:hover {
    background: rgba(107, 91, 74, 0.35);
    color: #e8d4a8;
    filter: brightness(1.03);
}

body.game-page .tab-btn.active {
    background: linear-gradient(135deg, rgba(107, 91, 74, 0.95) 0%, rgba(90, 75, 58, 0.9) 100%);
    color: #e8d4a8;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(196, 165, 116, 0.12);
}

body.game-page .battle-scene {
    background: linear-gradient(135deg, rgba(35, 30, 24, 0.92), rgba(26, 20, 16, 0.94));
    border-color: rgba(107, 91, 74, 0.75);
    border-radius: 14px;
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(196, 165, 116, 0.08);
}

body.game-page .skill-display {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(107, 91, 74, 0.75);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.game-page .skill-text {
    color: #e8d4a8;
    text-shadow: 0 0 10px rgba(196, 165, 116, 0.25), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

body.game-page .player-power-card {
    background: linear-gradient(135deg, rgba(107, 91, 74, 0.24), rgba(90, 75, 58, 0.22)) !important;
    border-color: rgba(107, 91, 74, 0.7) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.game-page #player-power {
    color: #e8d4a8 !important;
    text-shadow: 0 0 12px rgba(196, 165, 116, 0.28) !important;
}

body.game-page .current-skill-display {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(107, 91, 74, 0.75) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.game-page .skill-select-dropdown {
    background: rgba(35, 30, 24, 0.98) !important;
    border-color: rgba(107, 91, 74, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6) !important;
}

body.game-page .button.button-small {
    padding: 6px 10px;
    border-radius: 9px;
}

body.game-page .modal-close {
    border-radius: 999px;
    background: rgba(45, 40, 32, 0.9);
    border-color: rgba(107, 91, 74, 0.75);
    color: rgba(232, 212, 168, 0.85);
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

body.game-page .modal-close:hover {
    background: rgba(107, 91, 74, 0.55);
    color: #e8d4a8;
    transform: scale(1.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

body.game-page .notification {
    background: rgba(35, 30, 24, 0.92);
    border-color: rgba(107, 91, 74, 0.65);
    color: rgba(232, 212, 168, 0.95);
}

body.game-page .item-tooltip {
    background: linear-gradient(135deg, rgba(25, 20, 16, 0.98), rgba(35, 30, 24, 0.98));
    border-color: #6b5b4a;
}

/* ==================== 通知 ==================== */

.notification {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 18, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 15px 30px;
    color: rgba(240, 230, 210, 0.92);
    font-weight: bold;
    z-index: 2000;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.item-tooltip {
    display: none;
    position: fixed;
    background: linear-gradient(135deg, rgba(25, 18, 12, 0.98), rgba(35, 25, 18, 0.98));
    border: 2px solid #8b4513;
    border-radius: 8px;
    padding: 12px;
    z-index: 1500;
    /* 对比框加宽 50%：数值变大时减少换行，两列/三列对比不挤压 */
    max-width: 1050px;
    min-width: 630px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.9);
    pointer-events: auto;
}

/* 手机端提示框优化 */
@media (max-width: 768px) {
    .item-tooltip {
        max-width: calc(100vw - 20px);
        min-width: 180px;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
    }
}

.tooltip-name {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 0 0 5px currentColor;
}

.tooltip-type {
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #555;
}

.tooltip-stats {
    margin-bottom: 10px;
}

.tooltip-stat {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.85rem;
}

.tooltip-stat-label {
    color: #aaa;
}

.tooltip-stat-value {
    color: #ffcc00;
}

.tooltip-stat-diff {
    font-size: 0.8rem;
    margin-left: 5px;
}

.tooltip-stat-diff.positive {
    color: #00ff00;
}

.tooltip-stat-diff.negative {
    color: #ff3333;
}

.tooltip-gems {
    background: rgba(100, 0, 100, 0.2);
    border: 1px solid #663366;
    border-radius: 5px;
    padding: 8px;
    margin: 8px 0;
}

.tooltip-gems-title {
    color: #ff66ff;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.tooltip-gem-item {
    font-size: 0.8rem;
    padding: 2px 0;
}

.tooltip-compare {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 8px;
    margin-top: 10px;
    border-top: 1px dashed #555;
}

.tooltip-compare-title {
    color: #ff9900;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.tooltip-compare-item {
    font-size: 0.75rem;
    color: #aaa;
    padding: 2px 0;
}

/* 背包装备对比：左右并排（类似魔兽） */
.tooltip-compare-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

@media (min-width: 900px) {
    /* 桌面端优先不换行，保证三列对齐 */
    .tooltip-compare-grid {
        flex-wrap: nowrap;
    }
}

.tooltip-compare-col {
    flex: 1 1 200px;
    min-width: 200px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px;
}

/* 对比列里的宝石块：紧凑一点 */
.tooltip-gems.tooltip-gems-compare {
    margin: 6px 0 0;
    padding: 6px;
}
.tooltip-gems.tooltip-gems-compare .tooltip-gems-title {
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.tooltip-gems.tooltip-gems-compare .tooltip-gem-item {
    font-size: 0.75rem;
}


.tooltip-compare-name {
    font-size: 0.8rem;
    margin-bottom: 6px;
    opacity: 0.95;
}

.tooltip-desc {
    color: #888;
    font-size: 0.75rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #444;
    font-style: italic;
}

/* ==================== 广播 ==================== */

.broadcast-container {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #8b4513;
    border-radius: 5px;
    padding: 10px;
}

.broadcast-marquee {
    overflow: hidden;
    white-space: nowrap;
}

.broadcast-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

.broadcast-item {
    color: #ffcc00;
    margin-right: 50px;
}

/* ==================== 动画 ==================== */

/* 向上跳动幅度减小，避免固定高度 + overflow:hidden 时头像顶部被裁掉 */
@keyframes monsterIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

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

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.monster-avatar.hit {
    animation: hit 0.3s ease-out;
}

.monster-avatar.dying {
    animation: dying 0.8s ease-out forwards;
}

.player-avatar.attacking {
    animation: attacking 0.3s ease-out;
}

@keyframes hit {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

@keyframes dying {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5) rotate(45deg); }
}

@keyframes attacking {
    0% { transform: translateX(0); }
    50% { transform: translateX(15px); }
    100% { transform: translateX(0); }
}

/* ==================== Buff/Debuff图标 ==================== */

/* 20 个图标均分总宽度，一行铺满；min-width:0 避免撑宽右侧栏 */
.buff-icon, .debuff-icon {
    flex: 0 0 calc((100% - 38px) / 20);
    min-width: 0;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 3px;
    cursor: help;
    margin: 0;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
}

.buff-icon {
    border: 1px solid #00aa00;
    box-shadow: 0 0 3px rgba(0, 255, 0, 0.3);
    color: #00ff00;
}

.buff-icon.empty {
    border: 1px dashed #335533;
    box-shadow: none;
    opacity: 0.4;
    font-size: 1.2em;
}

#mythic-affix-container .buff-icon {
    border: 1px solid #d4af37;
    box-shadow: 0 0 3px rgba(212, 175, 55, 0.35);
    color: #ffd43b;
}

#mythic-affix-container .buff-icon.empty {
    border: 1px dashed rgba(212, 175, 55, 0.45);
    box-shadow: none;
    opacity: 0.4;
    font-size: 1.2em;
}

.debuff-icon {
    border: 1px solid #aa0000;
    box-shadow: 0 0 3px rgba(255, 0, 0, 0.3);
    color: #ff3333;
}

.debuff-icon.empty {
    border: 1px dashed #553333;
    box-shadow: none;
    opacity: 0.4;
    font-size: 1.2em;
}

/* 倒计时不足10秒时：绿色方框边框倒计时（与仙体/诅咒的圆圈倒计时一致，从 12 点顺时针消失） */
.debuff-icon.debuff-icon-with-countdown {
    position: relative;
}
.debuff-icon-inner {
    user-select: none;
}
.debuff-countdown-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 增益/减益/词缀栏容器：占满父级宽度，20 个图标均分；允许收缩不撑宽右侧栏 */
#buff-container,
#debuff-container,
#mythic-affix-container {
    width: 100%;
    min-width: 0;
}

/* 手机端：20 格均分 */
@media (max-width: 768px) {
    .buff-icon, .debuff-icon {
        flex: 0 0 calc((100% - 38px) / 20);
        height: 24px;
        font-size: 10px;
    }
    .buff-icon.empty, .debuff-icon.empty, #mythic-affix-container .buff-icon.empty {
        font-size: 1.2em;
    }
}

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

@media (max-width: 900px) {
    .container {
        grid-template-columns: 1fr;
    }
    
    .header {
        grid-column: 1;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .inventory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .equipment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .map-grid {
        grid-template-columns: 1fr;
    }
    
    .login-panel {
        min-width: auto;
        width: 90%;
        max-width: 350px;
        padding: 25px;
        animation: none !important;
    }
    
    .modal-content {
        max-width: 95% !important;
        margin: 10px;
    }
    
    /* 手机端始终隐藏 VS 文案 */
    .battle-scene .skill-display {
        display: none !important;
    }
    
    /* 左侧 4 个仙术技能图标始终固定左侧垂直居中，不随 JS 切换到中间底部 */
    #taoist-skill-icons-anchor {
        left: 10px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }
    
    /* 战斗场景 - 宽高固定，不随内容拉伸 */
    .battle-scene {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 200px;
        min-height: 200px;
        max-height: 200px;
        padding: 8px 6px;
        gap: 6px;
        overflow: hidden;
    }
    
    .battle-scene .player-unit {
        min-width: 90px;
        width: auto;
        margin-left: 44px;
        margin-right: 0 !important;
    }
    .battle-scene .monster-unit {
        min-width: 90px;
        width: auto;
        margin-left: 0;
        margin-right: 0 !important;
    }
    .battle-scene .unit-hp-text {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .battle-scene .battle-center {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4px 8px;
        gap: 4px;
    }
    
    /* 获得装备提示上移：放在技能区上方，避免与 AOE 目标栏重叠 */
    .battle-scene .battle-center #loot-display {
        order: -1;
        margin-bottom: 2px;
        padding: 4px 6px;
        gap: 4px;
        max-width: 100%;
        font-size: 0.7rem;
    }
    
    .battle-scene .battle-center #loot-display .loot-item-display,
    .battle-scene .battle-center #loot-display .center-message {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
    
    .battle-scene #aoe-monsters-container {
        bottom: 4px;
        padding: 3px 6px;
        font-size: 0.75rem;
    }
    
    #aoe-monsters-list {
        gap: 4px;
    }
    
    .aoe-monster-item {
        width: 28px;
        min-width: 28px;
    }
    
    .aoe-monster-item .aoe-monster-icon {
        font-size: 0.95rem !important;
    }
    
    .aoe-monster-item .aoe-float-damage {
        font-size: 0.6rem;
        top: -10px;
    }
    
    .aoe-monster-item > div:last-child {
        height: 4px !important;
    }
    
    .aoe-monster-item .aoe-hp-bar {
        min-height: 4px;
    }
    
    .aoe-monster-boss .aoe-monster-icon {
        font-size: 1rem !important;
    }
    
    .battle-unit {
        flex-direction: row;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        gap: 6px;
        overflow: hidden;
    }
    
    /* 普通头像与 Boss 头像尺寸一致，避免切换时战场宽度变化 */
    .monster-avatar, .player-avatar,
    .monster-avatar.boss {
        width: 36px;
        height: 36px;
        font-size: 1.35rem;
        flex-shrink: 0;
        animation: none !important;
    }
    
    .unit-info {
        text-align: left;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    
    .unit-hp-bar {
        width: 64px;
        height: 10px;
    }
    
    .unit-hp-text {
        font-size: 0.7rem;
    }
    
    .monster-name, .player-battle-name {
        font-size: 0.8rem;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .skill-display {
        padding: 6px 12px;
    }
    
    .skill-text {
        font-size: 0.95rem;
    }
    
    .battle-weather-marquee {
        height: 20px;
        left: 6px;
        right: 6px;
        bottom: 4px;
        padding: 0 6px;
    }
    
    .battle-weather-marquee-center,
    .battle-weather-marquee-scroll-inner {
        font-size: 0.7rem;
    }
    
    .soul-avatar {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .inventory-item {
        min-height: 75px;
        padding: 8px 5px;
    }
    
    .item-name {
        font-size: 0.75rem;
    }
}


/* ==================== 战斗动画效果 ==================== */

/* 技能显示动画 */
.skill-display.active {
    animation: skillFlash 0.5s ease-out;
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}

@keyframes skillFlash {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* 掉落显示 */
#loot-display {
    display: none; /* 默认隐藏，JavaScript控制显示 */
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    max-width: 300px;
    overflow: visible;
}

/* 中央消息（额外出刀、鞭尸等） */
.center-message {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    animation: centerMessageAppear 0.5s ease-out, centerMessageFloat 1s ease-in-out infinite;
    white-space: nowrap;
}

/* 获得物品：向上浮动并淡出，用 translate3d 避免上升时左右抖动 */
.center-message.loot-float-up {
    animation: lootFloatUp 0.7s ease-out forwards, lootFlip 0.35s ease-out both;
    white-space: nowrap;
    will-change: transform;
    transform: translateZ(0); /* 独立合成层，减少抖动 */
}
@keyframes lootFloatUp {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -50px, 0);
    }
}

@keyframes lootFlip {
    0% {
        transform: perspective(600px) rotateX(70deg) scale(0.92);
        filter: blur(0.2px);
    }
    100% {
        transform: perspective(600px) rotateX(0deg) scale(1);
        filter: none;
    }
}

@keyframes centerMessageAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(-20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) translateY(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
    }
}

@keyframes centerMessageFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.05);
    }
}

.loot-item-display {
    padding: 5px 10px;
    background: rgba(0, 100, 0, 0.3);
    border: 1px solid #00ff00;
    border-radius: 5px;
    color: #00ff00;
    font-size: 0.85rem;
    animation: lootAppear 0.8s ease-out, lootFloat 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.loot-item-display.gold {
    background: rgba(100, 80, 0, 0.3);
    border-color: #ffcc00;
    color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.loot-item-display.potion {
    background: rgba(0, 80, 0, 0.3);
    border-color: #33ff33;
    color: #33ff33;
    box-shadow: 0 0 10px rgba(51, 255, 51, 0.5);
}

.loot-item-display.equipment {
    background: rgba(100, 0, 100, 0.3);
    border-color: #ff66ff;
    color: #ff66ff;
    box-shadow: 0 0 10px rgba(255, 102, 255, 0.5);
}

.loot-item-display.stone {
    background: rgba(0, 50, 100, 0.3);
    border-color: #66ccff;
    color: #66ccff;
    box-shadow: 0 0 10px rgba(102, 204, 255, 0.5);
}

/* 掉落物品出现动画 - 增强旋转效果 */
@keyframes lootAppear {
    0% { 
        opacity: 0; 
        transform: scale(0) rotate(-360deg) translateY(-20px); 
    }
    50% { 
        opacity: 1;
        transform: scale(1.3) rotate(180deg) translateY(0px); 
    }
    70% { 
        transform: scale(0.9) rotate(360deg) translateY(0px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) rotate(720deg) translateY(0px); 
    }
}

/* 掉落物品悬浮动画 */
@keyframes lootFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    50% { 
        transform: translateY(-5px) rotate(5deg); 
    }
}

/* 经验值飘字 - 从玩家头像右上角往上飘 */
.exp-float {
    position: absolute;
    right: -15px;
    top: -5px;
    color: #00ccff;
    font-size: 1.1rem;
    font-weight: bold;
    text-shadow: 0 0 5px #0099ff, 0 0 10px #0066cc;
    animation: expFloat 1.5s ease-out forwards;
    pointer-events: none;
    white-space: nowrap;
    z-index: 100;
}

/* 鞭尸经验飘字 - 紫红色 */
.exp-float.whip-exp {
    color: #ff66ff;
    font-size: 1.3rem;
    text-shadow: 0 0 8px #ff00ff, 0 0 15px #cc00cc;
    animation: whipExpFloat 1.8s ease-out forwards;
}

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

@keyframes whipExpFloat {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1);
    }
}

/* 伤害数字动画 */
@keyframes damageNumber {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0.8);
    }
}

/* 鞭尸效果 */
@keyframes whipEffect {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 玩家攻击动画：向左前冲（朝怪物方向） */
.player-avatar.attacking {
    animation: playerAttack 0.3s ease-out;
}

@keyframes playerAttack {
    0% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

/* 怪物攻击动画：向右前冲（朝玩家方向），与玩家攻击对称，配合法术效果 */
.monster-avatar.attacking {
    animation: monsterAttack 0.3s ease-out;
}

@keyframes monsterAttack {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

/* 怪物受击动画：左右抖动 + 闪白 */
.monster-avatar.hit {
    animation: monsterHit 0.3s ease-out;
}

@keyframes monsterHit {
    0%, 100% { transform: translateX(0); filter: brightness(1); }
    25% { transform: translateX(-8px); filter: brightness(2); }
    75% { transform: translateX(8px); filter: brightness(1.5); }
}

/* 怪物死亡动画 */
.monster-avatar.dying {
    animation: monsterDying 0.8s ease-out forwards;
}

/* 怪物冰冻/麻痹状态：头像视觉效果（冰冻用 box-shadow 避免把角标洗白） */
.monster-avatar.status-frozen {
    box-shadow: 0 0 20px rgba(102, 204, 255, 0.6), 0 0 0 2px rgba(100, 200, 255, 0.4);
    transition: box-shadow 0.3s;
}
.monster-avatar.status-paralyzed {
    filter: hue-rotate(260deg) brightness(1.1);
    transition: filter 0.3s;
}

/* AOE 图标与怪物头像上的冰冻/麻痹角标容器 */
.aoe-monster-icon {
    position: relative;
}
.monster-avatar .status-overlay,
.aoe-monster-icon .status-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 1em;
    text-shadow: 0 0 6px rgba(0,0,0,0.9);
    border-radius: inherit;
    background: rgba(0,0,0,0.25);
}
.status-overlay-frozen { color: #66ccff; }
.status-overlay-paralyzed { color: #cc66ff; }

/* 冰冻/麻痹角标动画（1 秒）：逐渐放大 → 保持 → 结束前放大+淡出 */
.status-overlay-animate {
    animation: statusOverlayScaleIn 0.85s ease-out forwards;
    transform-origin: center center;
}
.status-overlay-out {
    animation: statusOverlayFadeOut 0.15s ease-in forwards;
}
@keyframes statusOverlayScaleIn {
    0%   { transform: scale(0.6);  opacity: 0.85; }
    25%  { transform: scale(1.1);  opacity: 1; }
    90%  { transform: scale(1.2);  opacity: 1; }
    100% { transform: scale(1.2);  opacity: 1; }
}
@keyframes statusOverlayFadeOut {
    0%   { transform: scale(1.2);  opacity: 1; }
    100% { transform: scale(1.5);  opacity: 0; }
}

@keyframes monsterDying {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); filter: brightness(2); }
    100% { opacity: 0; transform: scale(0); }
}


/* ==================== AOE多目标显示 ==================== */
#aoe-monsters-container {
    display: none;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    border: 1px solid #8b4513;
    border-radius: 5px;
    padding: 5px 10px;
    z-index: 50;
}

#aoe-monsters-list {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.aoe-monster-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45px;
    cursor: default;
}

.aoe-monster-item .aoe-float-damage {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.aoe-monster-item .aoe-float-damage.active {
    opacity: 1;
    animation: aoeDamageFloat 0.9s ease-out forwards;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.7);
}

.aoe-hp-bar {
    background: linear-gradient(90deg, #ff3333, #ff6666);
    height: 100%;
    transition: width 0.2s;
}

/* AOE怪物死亡动画 */
.aoe-monster-dying .aoe-monster-icon {
    animation: aoeMonsterDie 0.8s ease-out forwards;
}

.aoe-monster-dead {
    opacity: 0.5;
}

/* AOE Boss怪物样式 */
.aoe-monster-boss {
    position: relative;
    border: 1px solid #ffcc00;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.2), rgba(255, 204, 0, 0.1));
}

.aoe-monster-boss .aoe-monster-icon {
    filter: drop-shadow(0 0 3px #ffcc00);
}

@keyframes aoeMonsterDie {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.5) rotate(-20deg);
        opacity: 0.3;
    }
}

/* AOE伤害飘字动画 */
@keyframes aoeDamageFloat {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}


/* ==================== 世界广播样式 ==================== */

.broadcast-item.epic {
    color: #ff66ff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 102, 255, 0.5);
}

.broadcast-item.supreme {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    animation: supremeGlow 1s ease-in-out infinite alternate;
}

.broadcast-item.boss {
    color: #ff3333;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.8);
}

@keyframes supremeGlow {
    0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    100% { text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 153, 0, 0.5); }
}

/* 魂甲背包提示动画 */
@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

#soul-bag-indicator {
    animation: pulse 1s infinite;
}

/* ==================== 折叠按钮 ==================== */

.collapse-btn {
    background: linear-gradient(to bottom, #3a2a1a, #2a1a0a);
    border: 1px solid #5a3a1a;
    border-radius: 3px;
    color: #888;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.75rem;
    transition: all 0.2s;
    min-width: 24px;
}

.collapse-btn:hover {
    color: #ffcc00;
    border-color: #8b4513;
    background: linear-gradient(to bottom, #4a3a2a, #3a2a1a);
}

.collapse-btn.collapsed {
    transform: rotate(-90deg);
}

/* 折叠内容过渡 */
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, height 0.3s ease-out;
}

.collapsible-content.collapsed {
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 战斗场景作为折叠块时，展开态强制固定尺寸，避免被折叠动画或内容撑开 */
.battle-scene.collapsible-content:not(.collapsed) {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    width: 100% !important;
    max-width: 100% !important;
}
@media (min-width: 769px) {
    .battle-scene.collapsible-content:not(.collapsed) {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
}


/* ==================== 图鉴模块样式 ==================== */

/* 图鉴内容区域 - 隐藏滚动条但保持滚动功能 */
#library-content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#library-content::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* 图鉴：资料片 / 地图选择 */
#library-expansion-tabs,
#library-map-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.library-expansion-tab.active,
.library-map-tab.active {
    background: rgba(255, 204, 0, 0.2);
    border-color: rgba(255, 204, 0, 0.5);
    color: #ffcc00;
}

/* 绿色箭头跳动动画 - 用于可领取奖励提示（与背包一致） */
.library-reward-indicator {
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -8px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
    z-index: 10;
}

/* 图鉴主选项卡按钮 - 有可领取奖励时的动画 */
.library-main-tab.has-reward {
    position: relative;
}

.library-main-tab.has-reward::after {
    content: '⬆';
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -8px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
}

/* 图鉴分类标签 - 有可领取奖励时的动画 */
.library-tab.has-reward {
    position: relative;
}

.library-tab.has-reward::after {
    content: '⬆';
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -8px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
}

/* 操作按钮 - 图鉴按钮有可领取奖励时的动画 */
.action-btn.has-library-reward {
    position: relative;
}

.action-btn.has-library-reward::after {
    content: '⬆';
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -8px;
    background: #00cc00;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 0.8s ease-in-out infinite;
    box-shadow: 0 0 5px #00ff00;
}

/* ==================== 折叠按钮 ==================== */

.collapse-btn {
    cursor: pointer;
    color: #ff9900;
    font-size: 0.8rem;
    padding: 2px 6px;
    transition: transform 0.3s;
    user-select: none;
    float: right;
}

.collapse-btn:hover {
    color: #ffcc00;
}

.collapse-btn.collapsed {
    transform: rotate(-90deg);
}

/* ==================== 资料片选择器 ==================== */

.expansion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.expansion-item {
    background: linear-gradient(135deg, rgba(40, 30, 20, 0.9), rgba(60, 45, 30, 0.9));
    border: 2px solid #5a4a3a;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.expansion-item:hover {
    background: linear-gradient(135deg, rgba(60, 45, 30, 0.95), rgba(80, 60, 40, 0.95));
    border-color: #8b4513;
    transform: scale(1.02);
}

.expansion-item.active {
    background: linear-gradient(135deg, rgba(80, 60, 30, 0.95), rgba(100, 75, 40, 0.95));
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
}

.expansion-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.expansion-item.locked:hover {
    transform: none;
    border-color: #5a4a3a;
}

.expansion-icon {
    font-size: 2rem;
    margin-bottom: 5px;
}

.expansion-name {
    font-size: 1rem;
    font-weight: bold;
}

.expansion-lock {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.8rem;
}

/* 手机端资料片选择器优化 */
@media (max-width: 768px) {
    .expansion-grid {
        gap: 8px;
    }
    
    .expansion-item {
        padding: 12px 8px;
    }
    
    .expansion-icon {
        font-size: 1.5rem;
    }
    
    .expansion-name {
        font-size: 0.85rem;
    }
}

/* ==================== 地图资料片选择器 ==================== */

.map-expansion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.map-expansion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: linear-gradient(135deg, rgba(40, 30, 20, 0.9), rgba(60, 45, 30, 0.9));
    border: 2px solid #5a4a3a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 100px;
    text-align: center;
}

.map-expansion-item:hover {
    background: linear-gradient(135deg, rgba(60, 45, 30, 0.95), rgba(80, 60, 40, 0.95));
    border-color: #8b4513;
    transform: scale(1.02);
}

.map-expansion-item.active {
    background: linear-gradient(135deg, rgba(80, 60, 30, 0.95), rgba(100, 75, 40, 0.95));
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
}

.map-expansion-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.map-expansion-item.locked:hover {
    transform: none;
    border-color: #5a4a3a;
}

.map-expansion-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.map-expansion-info {
    width: 100%;
}

.map-expansion-name {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 3px;
}

.map-expansion-desc {
    font-size: 0.8rem;
    color: #aaa;
}

.map-expansion-count {
    font-size: 0.75rem;
    color: #66ff66;
    margin-top: 3px;
}

.map-expansion-lock {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1rem;
}

/* 手机端地图资料片优化 */
@media (max-width: 768px) {
    .map-expansion-grid {
        gap: 8px;
    }
    
    .map-expansion-item {
        padding: 12px 8px;
        min-height: 80px;
    }
    
    .map-expansion-icon {
        font-size: 2rem;
    }
    
    .map-expansion-name {
        font-size: 1rem;
    }
    
    .map-expansion-desc {
        font-size: 0.7rem;
    }
}


/* ==================== 声望系统样式 ==================== */

/* 资料片四宫格 */
.reputation-expansion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.reputation-expansion-item {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.reputation-expansion-item:hover {
    border-color: #666;
    transform: translateY(-2px);
}

.reputation-expansion-item.active {
    border-color: #ffcc00;
    background: linear-gradient(135deg, #3a3a2a, #2a2a1a);
}

.reputation-expansion-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.reputation-expansion-icon {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.reputation-expansion-name {
    font-size: 0.9rem;
    font-weight: bold;
}

/* 地图列表 */
.reputation-map-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: none;
    overflow: visible;
}

.reputation-map-item {
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
}

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

.reputation-map-name {
    color: #ffcc00;
    font-weight: bold;
}

.reputation-level {
    font-size: 0.85rem;
    font-weight: bold;
}

/* 声望进度条 */
.reputation-progress-bar {
    height: 18px;
    background: #222;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
    margin-bottom: 6px;
}

.reputation-progress-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.3s;
}

.reputation-progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
}

/* 伤害加成和进阶按钮 */
.reputation-bonus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.reputation-upgrade-btn {
    background: linear-gradient(135deg, #4a3a00, #6a5a00);
    border: 1px solid #ffcc00;
    color: #ffcc00;
    padding: 3px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
}

.reputation-upgrade-btn:hover {
    background: linear-gradient(135deg, #6a5a00, #8a7a00);
}

.reputation-empty {
    text-align: center;
    color: #666;
    padding: 30px;
}

/* 转圈动画 - 用于冷却倒计时 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ==================== 天赋系统样式 ==================== */

.talent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
    border: 1px solid #667eea;
    border-radius: 8px;
    margin-bottom: 15px;
    width: fit-content;
    min-width: 100%;
    gap: 15px;
}

.talent-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    display: none; /* 标题移到外面了 */
}

.talent-points {
    font-size: 1em;
    color: #ffd700;
    font-weight: bold;
    white-space: nowrap;
}

.points-value {
    font-size: 1.3em;
    color: #00ff00;
}

.talent-tier {
    margin: 8px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid #444;
    width: fit-content;
    max-width: 100%;
}

.talent-tier.locked {
    opacity: 0.5;
    filter: grayscale(100%);
}

.tier-layout {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tier-info {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #666;
}

.tier-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 5px 10px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 5px;
}

.tier-title {
    font-size: 1em;
    font-weight: bold;
    color: #ffd700;
    line-height: 1.3;
}

.tier-requirement {
    color: #aaa;
    font-size: 0.8em;
    line-height: 1.3;
}

.tier-points {
    color: #4caf50;
    font-weight: bold;
    font-size: 0.85em;
    line-height: 1.3;
}

.talent-row {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    width: fit-content;
}

.talent-placeholder {
    width: 120px;
    flex-shrink: 0;
}

.talent-node {
    position: relative;
    width: 120px;
    padding: 8px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #444;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.talent-node:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
}

.talent-node.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.talent-node.locked:hover {
    transform: none;
    box-shadow: none;
}

.talent-node.available {
    border-color: #ffd700;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

.talent-node.learned {
    border-color: #4caf50;
    background: linear-gradient(135deg, #2d5016 0%, #1a3010 100%);
}

.talent-node.maxed {
    border-color: #ffd700;
    background: linear-gradient(135deg, #5d4a1f 0%, #3d2a0f 100%);
}

.talent-icon {
    font-size: 2em;
    margin-bottom: 5px;
}

.talent-name {
    font-weight: bold;
    color: #fff;
    margin-bottom: 3px;
    font-size: 0.85em;
}

.talent-points {
    color: #4caf50;
    font-size: 0.8em;
}

.talent-tooltip {
    display: none;
    position: fixed;
    padding: 12px;
    background: rgba(0, 0, 0, 0.98);
    border: 2px solid #ffd700;
    border-radius: 8px;
    min-width: 200px;
    max-width: 300px;
    z-index: 10000;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.talent-node:hover .talent-tooltip {
    display: block;
}

.tooltip-title {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
    border-bottom: 1px solid #666;
    padding-bottom: 5px;
}

.tooltip-desc {
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.4;
}

.tooltip-current {
    color: #4caf50;
    margin-bottom: 5px;
}

.tooltip-next {
    color: #ffd700;
    margin-bottom: 5px;
}

.tooltip-requirement {
    color: #f44336;
    font-style: italic;
    margin-top: 10px;
}


/* 无尽试炼伤害数字动画 */
@keyframes damageFloat {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -100%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -150%) scale(1);
        opacity: 0;
    }
}


/* ==================== Battle Soul Avatar Animation ==================== */
@keyframes soulFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

.soul-avatar {
    animation: soulFloat 2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.soul-avatar.soul-mage {
    filter: drop-shadow(0 0 8px rgba(102, 102, 255, 0.8));
}

.soul-avatar.soul-taoist {
    filter: drop-shadow(0 0 8px rgba(255, 102, 153, 0.8));
}

/* 战斗场景四技能（仙体/诅咒/御盾/审判）未修炼时为锁定状态 */
#taoist-skills-bar button.ts-skill-locked {
    cursor: not-allowed;
    filter: grayscale(0.7);
}
#taoist-skills-bar .ts-cd {
    color: #33ff33 !important;
    font-size: 16px !important;
    font-weight: bold;
}

/* 技能动画容器：保证战魂/神器特效始终在最上层可见 */
#skill-animation-container {
    z-index: 2147483647 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#inscription-modal .modal-content {
    max-width: 900px;
}

#inscription-modal .inscription-panel {
    padding: 12px;
}

#inscription-modal .inscription-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(139, 69, 19, 0.55);
    border-radius: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

#inscription-modal .inscription-fragments {
    color: #ffcc00;
    font-weight: bold;
}

#inscription-modal .inscription-fragments-num {
    color: #66ff66;
    padding: 0 6px;
}

#inscription-modal .inscription-top-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#inscription-modal .inscription-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    #inscription-modal .inscription-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    #inscription-modal .inscription-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#inscription-modal .ins-slot {
    cursor: pointer;
    user-select: none;
}

/* 六边形：外层用边框色做整圈“边框”，内层 inset 留出边框宽度，六条边都显色 */
#inscription-modal .ins-hex {
    --hex-border: #8b4513;
    --hex-glow: rgba(139, 69, 19, 0.25);
    width: 100%;
    aspect-ratio: 1 / 1;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
    background: var(--hex-border);
    box-shadow: 0 0 20px var(--hex-glow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
}

/* 未镶嵌：整圈灰色边框 */
#inscription-modal .ins-slot--empty .ins-hex {
    --hex-border: #5a5a5a;
    --hex-glow: rgba(90, 90, 90, 0.2);
    background: #5a5a5a;
    box-shadow: 0 0 14px rgba(90, 90, 90, 0.25);
}

#inscription-modal .ins-slot--empty .ins-hex-inner {
    background: linear-gradient(135deg, rgba(35, 35, 38, 0.98), rgba(22, 22, 25, 0.98));
}

#inscription-modal .ins-slot--empty .ins-slot-sub {
    color: #777;
}

/* 已镶嵌：整圈品质色边框 */
#inscription-modal .ins-slot--filled .ins-hex {
    background: var(--hex-border);
    box-shadow: 0 0 20px var(--hex-glow);
}

#inscription-modal .ins-slot--filled .ins-hex-inner {
    background: linear-gradient(135deg, rgba(28, 22, 14, 0.96), rgba(14, 11, 8, 0.96));
}

#inscription-modal .ins-hex:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 26px var(--hex-glow);
}

#inscription-modal .ins-hex-inner {
    position: absolute;
    inset: 5px;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

#inscription-modal .ins-slot-title {
    color: #ffcc00;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
}

#inscription-modal .ins-slot-sub {
    color: #aaa;
    font-size: 0.82rem;
    margin-top: 6px;
}

#inscription-modal .ins-mini-affixes {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

#inscription-modal .ins-mini-affix {
    font-size: 1.05rem;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

#inscription-modal .inscription-hint {
    margin-top: 10px;
    text-align: center;
    color: #888;
    font-size: 0.85rem;
}

#inscription-modal .ins-detail-header {
    padding: 10px 6px 2px 6px;
    text-align: center;
}

#inscription-modal .ins-detail-title {
    color: #ffcc00;
    font-size: 1.15rem;
    font-weight: 900;
}

#inscription-modal .ins-detail-sub {
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 700;
}

#inscription-modal .ins-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px 0 8px 0;
}

#inscription-modal .ins-empty {
    text-align: center;
    color: #888;
    padding: 18px 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

#inscription-modal .ins-affix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 900px) {
    #inscription-modal .ins-affix-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    #inscription-modal .ins-affix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#inscription-modal .ins-hex.ins-hex-small {
    aspect-ratio: 1 / 1;
}

#inscription-modal .ins-affix-icon {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

#inscription-modal .ins-affix-name {
    color: #eee;
    font-weight: 800;
    font-size: 0.82rem;
    margin-top: 6px;
}

#inscription-modal .ins-affix-val {
    color: #66ff66;
    font-weight: 900;
    font-size: 0.85rem;
    margin-top: 4px;
}