/* ============================================================
   battle.css —— 战斗场景 / 玩家 UI / 按钮基础 / 摇杆 / 训练菜单
   ============================================================ */

#battleScene { position: absolute; inset: 0; display: none; z-index: 15; }
#threeCanvas { display: block; width: 100%; height: 100%; }
.splitLine {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 3px; transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 12px rgba(192, 57, 43, 0.6);
    pointer-events: none; z-index: 16;
}

/* ---- 玩家 UI（左半屏 / 右半屏） ---- */
.playerUI {
    position: absolute; top: 0;
    width: 50%; height: 100%;
    z-index: 16;
    pointer-events: none;
}
#p1UI { left: 0; }
#p2UI { left: 50%; }

.topPanel {
    position: absolute; top: 12px; left: 12px; right: 12px;
    pointer-events: none;
}
.nameRow { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

/* ★ 战斗中的角色名（13px，小号）—— 覆盖 menu.css 的 28px */
.charName {
    color: #fff; font-size: 13px; font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    min-width: 42px; max-width: 52px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.barLabel {
    font-size: 10px; font-weight: bold; color: #ccc;
    text-shadow: 1px 1px 2px #000; letter-spacing: 1px;
}
.barLabel.hpLabel { color: #4ade80; }
.barLabel.ceLabel { color: #4ea8ff; }
.barLabel.domLabel { color: #c084fc; }
.barLabel.mahoLabel { color: #ffdd44; }

.hpBar { width: 68px; height: 11px; background: rgba(20,20,20,0.85); border: 1px solid #444; border-radius: 3px; overflow: hidden; }
.hpFill { height: 100%; width: 100%; background: linear-gradient(180deg, #4ade80, #22c55e); transition: width 0.15s; }
.hpText { color: #fff; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 2px #000; min-width: 24px; }

.ceBar { width: 58px; height: 11px; background: rgba(20,20,20,0.85); border: 1px solid #444; border-radius: 3px; overflow: hidden; }
.ceFill { height: 100%; width: 100%; background: #4ade80; transition: width 0.15s, background 0.2s; }
.ceText { color: #fff; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 2px #000; min-width: 24px; }

.mahoBar {
    position: relative;
    width: 48px; height: 11px;
    background: rgba(20,20,20,0.85);
    border: 1px solid #444;
    border-radius: 3px;
    overflow: hidden;
}
.mahoFill {
    position: absolute; top: 0;
    height: 100%; width: 0%;
    background: linear-gradient(180deg, #ffdd44, #ffaa00);
    transition: width 0.15s;
}
.mahoFillLeft { left: 0; }
.mahoFillRight { right: 0; }
.mahoText { color: #fff; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 2px #000; min-width: 22px; }

.domBar { width: 46px; height: 11px; background: rgba(20,20,20,0.85); border: 1px solid #444; border-radius: 3px; overflow: hidden; }
.domFill { height: 100%; width: 0%; background: #ef4444; transition: width 0.15s, background 0.2s; }
.domText { color: #fff; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 2px #000; min-width: 20px; }

.staminaRow { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.staminaLabel { color: #4ea8ff; font-size: 10px; font-weight: bold; min-width: 42px; text-shadow: 1px 1px 2px #000; letter-spacing: 1px; }
.staminaBar { width: 100px; height: 6px; background: #333; border: 1px solid #444; border-radius: 3px; overflow: hidden; }
.staminaFill { height: 100%; width: 100%; background: linear-gradient(180deg, #4ea8ff, #2a6dff); transition: width 0.1s, background 0.2s; }
.staminaFill.exhausted { background: linear-gradient(180deg, #ff6b6b, #c0392b); }

/* ══ 嗜血剑心：死条 ══ */
.barLabel.deathLabel {
    color: #ff2020;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow:
        0 0 6px #ff0000,
        0 0 12px #ff0000,
        1px 1px 2px #000;
}

/* ---- 圆形按钮（基础样式，状态类在 effects.css） ---- */
.sprintBtn, .actionBtn {
    --accent: #4ea8ff;
    position: absolute;
    width: 68px; height: 68px;
    border-radius: 50%;
    background: rgba(50, 50, 50, 0.7);
    border: 3px solid #555;
    color: #aaa;
    font-size: 12px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; pointer-events: auto;
    transition: all 0.15s;
    font-family: inherit; overflow: hidden; padding: 0;
}
.actionBtn.small { font-size: 11px; }
.actionBtn .actionLabel { position: relative; z-index: 2; pointer-events: none; text-align: center; line-height: 1; }
.actionBtn .actionCdText {
    position: absolute; z-index: 4; color: #fff; font-size: 20px;
    text-shadow: 1px 1px 3px #000, 0 0 6px #000;
    pointer-events: none; font-weight: 900;
}
.actionBtn .actionCooldown {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 0%; background: rgba(30, 30, 30, 0.88);
    z-index: 3; pointer-events: none;
}

/* ---- 训练菜单 ---- */
#trainingMenu {
    position: absolute; top: 12px; right: 12px;
    background: #000; border: 2px solid #444;
    padding: 8px; display: none; flex-direction: column; gap: 6px;
    z-index: 18; pointer-events: auto; min-width: 110px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}
.trainingBtn {
    background: #0f0f0f; border: 2px solid #444;
    color: #aaa; padding: 6px 10px;
    font-size: 13px; font-weight: bold;
    cursor: pointer; font-family: inherit; letter-spacing: 2px;
    transition: all 0.15s; text-align: center;
}
.trainingBtn:hover { border-color: #888; color: #fff; }
.trainingBtn.active { background: #0f2a0f; border-color: #4ade80; color: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.6), inset 0 0 6px rgba(74, 222, 128, 0.3); }

/* ---- 虚拟摇杆 ---- */
.joystick {
    position: absolute;
    width: 0; height: 0;
    display: none;
    pointer-events: none;
    z-index: 17;
}
.joystickBase {
    position: absolute;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(78, 168, 255, 0.5);
    transform: translate(-50%, -50%);
}
.joystickKnob {
    position: absolute;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(78, 168, 255, 0.55);
    border: 2px solid #4ea8ff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(78, 168, 255, 0.6);
}

#battleBackBtn {
    position: absolute; top: 12px; left: 50%;
    transform: translateX(-50%); z-index: 17;
    width: 100px; height: 36px;
    font-size: 13px; letter-spacing: 2px;
}