/* ==================== 战斗人物立绘系统 ==================== */

/* 人物容器 - 调整高度和底部间距，让人物更贴近地面 */
.character-sprite {
    width: 200px;
    height: 280px;
    position: relative;
    margin: 10px auto 0;
    transition: transform 0.3s ease;
    /* 添加阴影效果 */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    /* 底部对齐 */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.character-sprite:hover {
    transform: scale(1.02);
}

/* 玩家形象 - 面向右（翻转图片） */
.player-sprite {
    filter: drop-shadow(0 0 15px rgba(78, 205, 196, 0.4));
}

/* 玩家图片 - 原图朝右，面向敌人，不需要翻转 */
.player-sprite .character-img,
.player-img {
    /* 原图方向正确，无需翻转 */
}

/* 敌人形象 - 面向左 */
.enemy-sprite {
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.4));
}

/* 人物SVG样式 */
.character-svg {
    width: 100%;
    height: 100%;
}

/* 角色图片样式 */
.character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    animation: fadeIn 0.5s ease-out;
    /* 透明背景，让相框显示 */
    background-color: transparent;
}

/* 尝试：如果图片有白底，应用这个类 */
.character-img.has-bg {
    /* 尝试用 darken 模式过滤白色，但需要底下垫一层浅色 */
    mix-blend-mode: multiply; 
}

/* 
   真正的解决方案：
   我们无法用 CSS 完美去除白底。
   建议使用在线工具 (如 remove.bg) 处理图片。
   
   或者，我们可以给图片加一个稍微亮一点的背景框，让白底不那么突兀。
*/
.character-sprite {
    /* 给整个人物容器加一点光晕，掩盖白底的尴尬 */
    /* filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); */
}

/* 敌人图片不翻转（素材本来就是面向左的） */
.enemy-img {
    /* transform: scaleX(-1); */
}

.character-svg-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

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

/* 少林派 - 武僧形象 */
.sprite-shaolin {
    --robe-color: #c4a35a;
    --robe-dark: #8b7355;
    --skin-color: #fdbf60;
    --sash-color: #8b0000;
}

/* 武当派 - 道士形象 */
.sprite-wudang {
    --robe-color: #4a5568;
    --robe-dark: #2d3748;
    --skin-color: #fdbf60;
    --sash-color: #4ecdc4;
}

/* 丐帮 - 乞丐形象 */
.sprite-gaibang {
    --robe-color: #8b7355;
    --robe-dark: #5d4e37;
    --skin-color: #fdbf60;
    --sash-color: #2d5016;
}

/* 峨眉派 - 女侠形象 */
.sprite-emei {
    --robe-color: #e6e6fa;
    --robe-dark: #b8b8d1;
    --skin-color: #ffe4c4;
    --sash-color: #ff69b4;
}

/* 华山派 - 剑客形象 */
.sprite-huashan {
    --robe-color: #f7f7f7;
    --robe-dark: #c0c0c0;
    --skin-color: #fdbf60;
    --sash-color: #4169e1;
}

/* 嵩山派 - 壮汉形象 */
.sprite-songshan {
    --robe-color: #4a4a4a;
    --robe-dark: #2a2a2a;
    --skin-color: #fdbf60;
    --sash-color: #8b0000;
}

/* 衡山派 - 琴师形象 */
.sprite-hengshan {
    --robe-color: #2f4f4f;
    --robe-dark: #1a2f2f;
    --skin-color: #fdbf60;
    --sash-color: #daa520;
}

/* 泰山派 - 道士形象 */
.sprite-taishan {
    --robe-color: #8b4513;
    --robe-dark: #5d2f0d;
    --skin-color: #fdbf60;
    --sash-color: #ffd700;
}

/* 恒山派 - 尼姑形象 */
.sprite-hengshan2 {
    --robe-color: #f5f5dc;
    --robe-dark: #d2d2a8;
    --skin-color: #ffe4c4;
    --sash-color: #808080;
}

/* 明教 - 异域形象 */
.sprite-mingjiao {
    --robe-color: #8b0000;
    --robe-dark: #5d0000;
    --skin-color: #fdbf60;
    --sash-color: #ffd700;
}

/* 日月神教 - 魔教形象 */
.sprite-riyue {
    --robe-color: #4b0082;
    --robe-dark: #2d0050;
    --skin-color: #fdbf60;
    --sash-color: #ff0000;
}

/* 古墓派 - 白衣形象 */
.sprite-gumu {
    --robe-color: #ffffff;
    --robe-dark: #e0e0e0;
    --skin-color: #ffe4c4;
    --sash-color: #87ceeb;
}

/* 全真教 - 道士形象 */
.sprite-quanzhen {
    --robe-color: #228b22;
    --robe-dark: #165c16;
    --skin-color: #fdbf60;
    --sash-color: #ffd700;
}

/* 桃花岛 - 书生形象 */
.sprite-taohua {
    --robe-color: #ffb6c1;
    --robe-dark: #ff69b4;
    --skin-color: #ffe4c4;
    --sash-color: #32cd32;
}

/* 大理段氏 - 贵族形象 */
.sprite-dali {
    --robe-color: #ffd700;
    --robe-dark: #daa520;
    --skin-color: #fdbf60;
    --sash-color: #4169e1;
}

/* 星宿派 - 邪派形象 */
.sprite-xingxiu {
    --robe-color: #2f4f4f;
    --robe-dark: #1a2f2f;
    --skin-color: #98fb98;
    --sash-color: #9400d3;
}

/* 逍遥派 - 仙风道骨 */
.sprite-xiaoyao {
    --robe-color: #e0ffff;
    --robe-dark: #b0e0e6;
    --skin-color: #ffe4c4;
    --sash-color: #4682b4;
}

/* 灵鹫宫 - 神秘形象 */
.sprite-lingjiu {
    --robe-color: #4a0080;
    --robe-dark: #2d0050;
    --skin-color: #ffe4c4;
    --sash-color: #9370db;
}

/* 慕容世家 - 世家子弟 */
.sprite-murong {
    --robe-color: #f0f8ff;
    --robe-dark: #c0d6e4;
    --skin-color: #ffe4c4;
    --sash-color: #dc143c;
}

/* 默认形象 */
.sprite-default {
    --robe-color: #808080;
    --robe-dark: #606060;
    --skin-color: #fdbf60;
    --sash-color: #ffd700;
}

/* ==================== 敌人类型形象 ==================== */

/* 山贼 */
.sprite-bandit {
    --robe-color: #8b4513;
    --robe-dark: #5d2f0d;
    --skin-color: #cd853f;
    --sash-color: #654321;
}

/* 强盗 */
.sprite-robber {
    --robe-color: #2f2f2f;
    --robe-dark: #1a1a1a;
    --skin-color: #cd853f;
    --sash-color: #8b0000;
}

/* 野兽 */
.sprite-beast {
    --robe-color: #8b7355;
    --robe-dark: #5d4e37;
    --skin-color: #a0522d;
    --sash-color: #654321;
}

/* 武林人士 */
.sprite-martial {
    --robe-color: #4169e1;
    --robe-dark: #27408b;
    --skin-color: #fdbf60;
    --sash-color: #ffd700;
}

/* 魔教弟子 */
.sprite-devil {
    --robe-color: #4b0082;
    --robe-dark: #2d0050;
    --skin-color: #98fb98;
    --sash-color: #ff0000;
}

/* 官兵 */
.sprite-soldier {
    --robe-color: #2f4f4f;
    --robe-dark: #1a2f2f;
    --skin-color: #fdbf60;
    --sash-color: #ffd700;
}

/* 恶霸 */
.sprite-bully {
    --robe-color: #8b0000;
    --robe-dark: #5d0000;
    --skin-color: #cd853f;
    --sash-color: #ffd700;
}

/* 人物动画 */
@keyframes characterIdle {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(0, -2px, 0) scale(1.006); }
    50% { transform: translate3d(0, -4px, 0) scale(1.012); }
    75% { transform: translate3d(0, -2px, 0) scale(1.006); }
}

@keyframes characterShadowIdle {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.34; }
    50% { transform: translateX(-50%) scale(0.9); opacity: 0.24; }
}

@keyframes characterAttack {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    30% { transform: translate3d(30px, -3px, 0) rotate(-2deg) scale(1.06); }
    60% { transform: translate3d(12px, -1px, 0) rotate(0deg) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@keyframes characterAttackEnemy {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    30% { transform: translate3d(-30px, -3px, 0) rotate(2deg) scale(1.06); }
    60% { transform: translate3d(-12px, -1px, 0) rotate(0deg) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@keyframes characterCast {
    0% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
    35% { transform: translate3d(0, -8px, 0) scale(1.05); filter: brightness(1.3); }
    70% { transform: translate3d(0, -3px, 0) scale(1.02); filter: brightness(1.15); }
    100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes characterHit {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); filter: brightness(1); }
    20% { transform: translate3d(-12px, 0, 0) rotate(-5deg); filter: brightness(1.6); }
    45% { transform: translate3d(8px, 0, 0) rotate(3deg); filter: brightness(1.2); }
    70% { transform: translate3d(-4px, 0, 0) rotate(-2deg); filter: brightness(1.1); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); filter: brightness(1); }
}

@keyframes characterDodge {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    35% { transform: translate3d(-22px, -8px, 0) scale(0.94); opacity: 0.7; }
    65% { transform: translate3d(8px, -3px, 0) scale(0.98); opacity: 0.85; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

.character-sprite.idle {
    animation: characterIdle 2.8s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform, filter;
}

.character-sprite.idle .character-shadow {
    animation: characterShadowIdle 2.8s ease-in-out infinite;
}

.character-sprite.action-attack {
    animation: characterAttack 0.34s ease-out;
}

.character-sprite.enemy-sprite.action-attack {
    animation: characterAttackEnemy 0.34s ease-out;
}

.character-sprite.action-cast {
    animation: characterCast 0.48s ease-out;
}

.character-sprite.action-hit {
    animation: characterHit 0.36s ease-out;
}

.character-sprite.action-dodge {
    animation: characterDodge 0.4s ease-out;
}

.character-sprite.attack {
    animation: characterAttack 0.3s ease-out;
}

.character-sprite.hit {
    animation: characterHit 0.4s ease-out;
}

/* 人物状态效果 */
.character-sprite.defeated {
    filter: grayscale(100%) brightness(50%);
    transform: rotate(90deg);
    transition: all 0.5s ease;
}

/* 武器显示 */
.weapon-sword {
    display: block;
}

.weapon-staff {
    display: block;
}

.weapon-blade {
    display: block;
}

.weapon-none {
    display: none;
}

/* 人物阴影 - 增强地面效果 */
.character-shadow {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 15px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, transparent 70%);
    border-radius: 50%;
    /* 添加模糊效果让阴影更自然 */
    filter: blur(2px);
}

/* ==================== 特效层样式 ==================== */
.effect-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

/* 人物名称标签 */