/* =========================================
   抽卡结果动画样式 - 极致性能优化版
   移除所有性能杀手，使用最简化的CSS
   ========================================= */

/* 结果动画容器 */
#gacha-result-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: none;
    background-color: #000;
}

#gacha-result-stage.active {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-15vh);
    padding-bottom: 0;
    box-sizing: border-box;
}

/* 单列容器 - 移除反射效果 */
.gacha-col {
    position: relative;
    height: min(85vh, calc((100vw - 112px) / 2));
    width: calc(min(85vh, calc((100vw - 112px) / 2)) / 5);
    flex-shrink: 0;
    /* 性能优化：启用GPU加速 */
    transform: translate3d(0, 0, 0);
    will-change: auto; /* 移除 will-change，让浏览器自己决定 */
}

/* 背景长条 - 移除 box-shadow */
.bg-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-color: #0a0a0a;
    overflow: hidden;
    z-index: 1;
    transform: translate3d(0, 0, 0);
}

/* 颜色光柱层 - 使用 opacity 代替 scaleY */
.strip-color-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 1;
}

/* 背景纹理大图 - 降低质量 */
.bg-portrait {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* 调整为80%透明度，移除叠加模式 */
    mix-blend-mode: normal;
    filter: grayscale(10%) brightness(0); /* 初始全黑 */
    transition: filter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2;
    transform: translate3d(0, 0, 0) scale(0.7);
    transform-origin: center center;
    image-rendering: -webkit-optimize-contrast; /* 优化图片渲染 */
}

/* 前景剪影 - 简化滤镜 */
.foreground-char {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0) scale(0.7);
    transform-origin: bottom center;
    width: 160%;
    height: 40%;
    z-index: 10;
    pointer-events: none;
    filter: brightness(0);
    transition: filter 0.3s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.foreground-char img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform: translate3d(0, 0, 0);
    image-rendering: -webkit-optimize-contrast;
}

/* 配色配置 - 使用纯色代替渐变 */
.rarity-purple .strip-color-layer {
    background: #6a5acd;
}

.rarity-yellow .strip-color-layer {
    background: #f1c40f;
}

.rarity-orange .strip-color-layer {
    background: #ff4500;
}

/* 点亮状态 - 使用 opacity */
.gacha-col.lit .strip-color-layer {
    opacity: 1;
}

.gacha-col.lit .foreground-char {
    filter: brightness(0);
}

/* 点亮时背景图变亮 */
.gacha-col.lit .bg-portrait {
    filter: grayscale(10%) brightness(1);
}

/* 闪烁动画 - 极简版，只改变亮度 */
@keyframes flashAnim {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

@keyframes flashAnimHigh {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(2); }
}

.gacha-col.flash .bg-strip {
    animation: flashAnim 0.5s ease-out forwards;
}

.gacha-col.rarity-orange.flash .bg-strip {
    animation: flashAnimHigh 0.7s ease-out forwards;
}

/* 简化的反射层 - 使用伪元素 */
.gacha-col::after {
    content: '';
    position: absolute;
    bottom: -85%;
    left: 0;
    width: 100%;
    height: 85%;
    background: linear-gradient(to bottom, 
        rgba(10, 10, 10, 0.3) 0%, 
        rgba(10, 10, 10, 0.1) 50%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
    transform: scaleY(-1);
    opacity: 0.5;
}

/* 高分辨率下完全禁用反射 */
@media (min-width: 2560px), (min-height: 1440px) {
    .gacha-col::after {
        display: none;
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .gacha-col::after {
        display: none;
    }
    
    .bg-portrait {
        opacity: 0.45; /* 提高透明度30%: 0.15 -> 0.45 */
    }
}