/* 战斗回放样式：保证面板固定覆盖全屏，结果对话框 z-index 更高，避免被页面其他样式遮挡 */

/* 最外层面板：固定覆盖全屏，最高默认堆叠 */
.battle-plane {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(0,0,0,0.85);
    -webkit-font-smoothing: antialiased;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    z-index: 110000 !important; /* 强制高于普通页面层级 */
    pointer-events: auto !important;
}

/* 内容区：占用大部分高度，内部相对定位用于绝对定位英雄元素 */
.battle-content {
    flex: 1 1 auto;
    padding: 6% 2%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative; /* 用于子元素绝对定位参考 */
}

/* 控制区固定在底部，避免被外部布局影响 */
.battle-ctrl {
    height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg_bg_q);
    color: var(--btn_color_s);
    border-top: 1px solid rgba(255,255,255,0.04);
    z-index: 110010; /* 高于 plane 内部元素，但低于结果对话框 */
}

/* 控制按钮样式 */
.battle-ctrl-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.battle-ctrl-right {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.battle-ctrl .btn-speed,
.battle-ctrl .btn-skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    border: 1px solid var(--btn_color_q);
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
}

    .battle-ctrl .btn-speed.active {
        background: var(--btn_bg_q);
        color: var(--btn_color_s);
        border: 1px solid var(--btn_color_s);
    }

    .battle-ctrl .btn-skip img {
        width: 60%;
        height: 60%;
        object-fit: contain;
        display: block;
        pointer-events: none;
    }

/* 列布局 */
.battle-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

    .battle-col.center {
        flex: 1.2 1 0;
    }

/* 子容器 */
.sub-row {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.sub-col {
    flex: 1 1 0;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .sub-col::-webkit-scrollbar {
        display: none;
    }

.sub-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    box-sizing: border-box;
}

/* 英雄容器与圆形图标 */
.hero-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 220ms ease;
    z-index: 110020;
}

.hero-circle-wrap {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0,0,0,0.06);
}

    .hero-circle-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 4px var(--hp-border, rgb(182 182 182 / 70%));
        pointer-events: none;
    }

    .hero-circle-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        pointer-events: none;
        transition: opacity 200ms ease;
    }

.hero-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 徘徊动画（非旋转）*/
@keyframes wander {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    15% {
        transform: translate(12px, -14px) scale(1.03);
    }
    30% {
        transform: translate(12px, 16px) scale(0.97);
    }
    45% {
        transform: translate(-12px, 16px) scale(1);
    }
    58% {
        transform: translate(12px, -16px) scale(1.02);
    }
    78% {
        transform: translate(-16px, -16px) scale(0.98);
    }

    89% {
        transform: translate(14px, -14px) scale(1.01);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.hero-circle-wrap.orbiting {
    animation: wander 2.6s ease-in-out infinite;
}

/* 死亡样式 */
.hero-wrap.dead .hero-circle-wrap {
    opacity: 0.85;
    filter: grayscale(0.5);
    transform: scale(0.98);
}
/* 默认攻守边框颜色（优先级较低，可被 JS 的 --hp-border 覆盖）*/
.hero-wrap.attacker .hero-circle-wrap {
    --hp-border: rgba(231,76,60,0.9);
}
/* 红 */
.hero-wrap.defender .hero-circle-wrap {
    --hp-border: rgba(52,152,219,0.9);
}
/* 蓝 */

/* 阵亡覆盖：强制灰色边框并降低可视（与 grayOut JS 相配合） */
.hero-wrap.dead .hero-circle-wrap {
    --hp-border: rgb(153 153 153 / 90%) !important;
    opacity: 0.85;
    filter: grayscale(0.5);
    transform: scale(0.98);
}

/* 结果对话框：固定定位，最高 z-index，避免被其他页面元素遮挡 */
.battle-result-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 360px;
    max-width: 860px;
    border-radius: 8px;
    background: var(--btn_bg_s);
    color: var(--btn_color_q);
    padding: 12px;
    display: none;
    z-index: 120000 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    text-align: center;
    pointer-events: auto;
}

    .battle-result-dialog .result-img {
        width: 160px;
        height: auto;
        display: block;
        margin: 8px auto;
    }

    .battle-result-dialog .title {
        font-weight: 700;
        font-size: 17px;
        margin-bottom: 6px;
        color: var(--btn_color_q);
    }

    .battle-result-dialog .tips {
        color: #ddd;
        font-size: 13px;
        margin-top: 8px;
        padding: 8px;
    }

    .battle-result-dialog .reward-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        margin: 8px;
    }

    .battle-result-dialog .reward-item {
        display: flex;
        gap: 8px;
        align-items: center;
        background: rgba(255,255,255,0.03);
        padding: 6px;
        border-radius: 6px;
    }

    .battle-result-dialog .reward-icon {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 6px;
    }

    .battle-result-dialog .result-ok {
        margin: 12px;
        padding: 8px 20px;
        border-radius: 6px;
        cursor: pointer;
        background: var(--btn_bg_s);
        border: var(--btn_bg_q);
        border: 1px solid var(--btn_border_q);
        color: #f9ebd0;
        font-weight: 600;
    }

/* 响应式 */
@media (max-width:720px) {
    .battle-result-dialog {
        width: 92%;
        min-width: auto;
    }

    .battle-ctrl {
        padding: 6px;
        height: 64px;
    }

    .hero-circle-wrap {
        width: 48px;
        height: 48px;
    }
}