/* 风月宝鉴 overlay + 画壁封尘锁格 + 镜花叠层 */

.illusion-mirror-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 65px));
    width: 56%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    z-index: 25;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.illusion-mirror-overlay:not(.hidden) {
    pointer-events: auto;
    cursor: help;
}

.illusion-mirror-overlay.hidden {
    display: none;
}

.illusion-mirror-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(255, 200, 220, 0.35));
}

.dust-seal-marker {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 12;
    pointer-events: none;
    animation: dust-seal-pulse 1.2s ease-in-out infinite;
}

@keyframes dust-seal-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* 幻璃【镜花】：右上角 3 格竖向槽位，自顶向下填充 */
.mirror-flower-container {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 22;
    pointer-events: none;
}

.mirror-flower-slot {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mirror-flower-sprite {
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
}

.mirror-flower-sprite.empty {
    background-image: url('../images/icons/icon_mirror_flower_empty.png');
}

.mirror-flower-sprite.animated {
    background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00000.png');
    animation: mirror-flower-cycle 1.6s steps(1) infinite;
}

@keyframes mirror-flower-cycle {
    0%   { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00000.png'); }
    6.25%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00001.png'); }
    12.5%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00002.png'); }
    18.75% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00003.png'); }
    25%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00004.png'); }
    31.25% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00005.png'); }
    37.5%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00006.png'); }
    43.75% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00007.png'); }
    50%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00008.png'); }
    56.25% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00009.png'); }
    62.5%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00010.png'); }
    68.75% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00011.png'); }
    75%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00012.png'); }
    81.25% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00013.png'); }
    87.5%  { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00014.png'); }
    93.75% { background-image: url('../images/icons/icon_mirror_flower/icon_mirror_flower_00015.png'); }
}