/* ========== 店铺等级场景：优先精绘整图背景 ========== */

/* 使用精绘大图时，关掉 CSS 拼装装饰 */
#shop-floor.shop-bg-art .scene-decor {
    display: none !important;
}
#shop-floor.shop-bg-art {
    background-color: #ffe8f0;
    transition: background-image 0.45s ease, filter 0.5s ease, box-shadow 0.5s ease;
}

/* 以下为无图时的 CSS 回退（保留，默认被 .shop-bg-art 隐藏） */
#shop-floor {
    --wall-a: #fff5f8;
    --wall-b: #ffe8f0;
    --floor-a: #fff0e8;
    --floor-b: #ffd9c8;
    --accent: #ffb6c1;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

#shop-floor.branch-seaside {
    --wall-a: #e8f7ff;
    --wall-b: #cfefff;
    --floor-a: #e0f4ff;
    --floor-b: #b8e0f6;
    --accent: #7ec8e8;
}

/* 装饰层 */
.scene-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.sd {
    position: absolute;
    pointer-events: none;
}

/* 默认隐藏高等级装饰，按 shop-lv-N 解锁 */
.sd-window,
.sd-curtain-l,
.sd-curtain-r,
.sd-plant-l,
.sd-plant-r,
.sd-shelf-l,
.sd-shelf-r,
.sd-banner,
.sd-lights,
.sd-sparkles,
.sd-carpet {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ----- 墙与地面（1 级起就有，随等级更精致） ----- */
.sd-wall {
    inset: 0 0 38% 0;
    background:
        linear-gradient(180deg, var(--wall-a) 0%, var(--wall-b) 100%);
    border-bottom: 3px solid rgba(255, 182, 193, 0.35);
}

.sd-floor {
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background:
        linear-gradient(180deg, var(--floor-a) 0%, var(--floor-b) 100%);
    box-shadow: inset 0 12px 24px rgba(255, 255, 255, 0.35);
}

.sd-counter-base {
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    width: min(72%, 260px);
    height: 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f5dcc8, #e0b898);
    box-shadow: 0 6px 0 #c9a07e, 0 8px 16px rgba(0, 0, 0, 0.1);
    opacity: 0.85;
    z-index: 2;
}

/* Lv1：简朴小摊 */
.shop-lv-1 .sd-wall {
    background:
        linear-gradient(180deg, #fff8f5 0%, #ffe8e0 100%);
}
.shop-lv-1 .sd-floor {
    background: linear-gradient(180deg, #fff0ea 0%, #f0d8c8 100%);
}

/* Lv2：小窗 + 绿植 + 地毯 + 小灯 */
.shop-lv-2 .sd-window,
.shop-lv-3 .sd-window,
.shop-lv-4 .sd-window,
.shop-lv-5 .sd-window {
    opacity: 1;
    transform: scale(1);
}
.shop-lv-2 .sd-plant-l,
.shop-lv-2 .sd-plant-r,
.shop-lv-3 .sd-plant-l,
.shop-lv-3 .sd-plant-r,
.shop-lv-4 .sd-plant-l,
.shop-lv-4 .sd-plant-r,
.shop-lv-5 .sd-plant-l,
.shop-lv-5 .sd-plant-r {
    opacity: 1;
    transform: scale(1);
}
.shop-lv-2 .sd-carpet,
.shop-lv-3 .sd-carpet,
.shop-lv-4 .sd-carpet,
.shop-lv-5 .sd-carpet {
    opacity: 1;
    transform: scale(1);
}
.shop-lv-2 .sd-lights,
.shop-lv-3 .sd-lights,
.shop-lv-4 .sd-lights,
.shop-lv-5 .sd-lights {
    opacity: 1;
    transform: scale(1);
}

.sd-window {
    top: 12%;
    left: 50%;
    transform: translateX(-50%) scale(0.92);
    width: 28%;
    height: 18%;
    border-radius: 12px 12px 6px 6px;
    background: linear-gradient(160deg, #c8ecff 0%, #e8f8ff 50%, #fff 100%);
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(126, 200, 232, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.8);
}
.sd-window::before {
    content: '';
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.7);
    transform: translateX(-50%);
}
.sd-window::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-50%);
}

.sd-plant-l,
.sd-plant-r {
    bottom: 28%;
    width: 28px;
    height: 40px;
}
.sd-plant-l { left: 6%; }
.sd-plant-r { right: 6%; }
.sd-plant-l::before,
.sd-plant-r::before {
    content: '🌿';
    font-size: 1.6rem;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}
.sd-plant-l::after,
.sd-plant-r::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 14px;
    border-radius: 4px 4px 8px 8px;
    background: linear-gradient(180deg, #e8a090, #c87868);
}

.sd-carpet {
    left: 18%;
    right: 18%;
    bottom: 22%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 182, 193, 0.45) 0%, rgba(255, 182, 193, 0.12) 70%, transparent 100%);
}

.sd-lights {
    top: 4%;
    left: 10%;
    right: 10%;
    height: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.sd-lights i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffe08a;
    box-shadow: 0 0 8px #ffc94a, 0 0 14px rgba(255, 201, 74, 0.6);
    animation: lightTwinkle 2.2s ease-in-out infinite;
}
.sd-lights i:nth-child(2) { animation-delay: 0.3s; background: #ffb6c1; box-shadow: 0 0 8px #ff8fab; }
.sd-lights i:nth-child(3) { animation-delay: 0.6s; background: #a8e6cf; box-shadow: 0 0 8px #6bc4a6; }
.sd-lights i:nth-child(4) { animation-delay: 0.9s; background: #b8e0f6; box-shadow: 0 0 8px #7ec8e8; }
.sd-lights i:nth-child(5) { animation-delay: 1.2s; }

/* Lv3：窗帘 + 货架 + 招牌条 */
.shop-lv-3 .sd-curtain-l,
.shop-lv-3 .sd-curtain-r,
.shop-lv-4 .sd-curtain-l,
.shop-lv-4 .sd-curtain-r,
.shop-lv-5 .sd-curtain-l,
.shop-lv-5 .sd-curtain-r,
.shop-lv-3 .sd-shelf-l,
.shop-lv-3 .sd-shelf-r,
.shop-lv-4 .sd-shelf-l,
.shop-lv-4 .sd-shelf-r,
.shop-lv-5 .sd-shelf-l,
.shop-lv-5 .sd-shelf-r,
.shop-lv-3 .sd-banner,
.shop-lv-4 .sd-banner,
.shop-lv-5 .sd-banner {
    opacity: 1;
    transform: none;
}

.sd-curtain-l,
.sd-curtain-r {
    top: 0;
    width: 12%;
    height: 48%;
    background: linear-gradient(90deg, rgba(255, 150, 180, 0.55), rgba(255, 200, 210, 0.25));
    border-radius: 0 0 40% 40%;
}
.sd-curtain-l { left: 0; }
.sd-curtain-r {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 150, 180, 0.55), rgba(255, 200, 210, 0.25));
}
.branch-seaside .sd-curtain-l {
    background: linear-gradient(90deg, rgba(100, 180, 220, 0.45), rgba(180, 220, 240, 0.2));
}
.branch-seaside .sd-curtain-r {
    background: linear-gradient(270deg, rgba(100, 180, 220, 0.45), rgba(180, 220, 240, 0.2));
}

.sd-shelf-l,
.sd-shelf-r {
    top: 28%;
    width: 12%;
    height: 22%;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff6e9, #f0d8c0);
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.8);
}
.sd-shelf-l { left: 3%; }
.sd-shelf-r { right: 3%; }
.sd-shelf-l::before,
.sd-shelf-r::before {
    content: '🎁';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    opacity: 0.85;
}
.sd-shelf-l::after,
.sd-shelf-r::after {
    content: '⭐';
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    opacity: 0.75;
}

.sd-banner {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ffb6c1, #ffc94a, #a8e6cf);
    box-shadow: 0 3px 8px rgba(255, 105, 180, 0.25);
    min-width: 36%;
    height: 10px;
}
.sd-banner::after {
    content: '';
    position: absolute;
    left: 10%; right: 10%;
    top: 100%;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        #ff8fab 0 8px,
        transparent 8px 12px
    );
    opacity: 0.7;
}

/* Lv4：更亮的墙 + 反光 */
.shop-lv-4 .sd-wall,
.shop-lv-5 .sd-wall {
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 40%),
        linear-gradient(180deg, #fff8fc 0%, #ffe4f0 55%, #ffd6e8 100%);
}
.shop-lv-4 .sd-floor,
.shop-lv-5 .sd-floor {
    background:
        linear-gradient(180deg, #fff5ee 0%, #ffdcc8 100%);
}
.shop-lv-4 #shop-floor,
#shop-floor.shop-lv-4 {
    box-shadow: inset 0 0 40px rgba(255, 182, 193, 0.25);
}

/* Lv5：星光粒子 */
.shop-lv-5 .sd-sparkles {
    opacity: 1;
    transform: scale(1);
}
.sd-sparkles {
    inset: 0;
}
.sd-sparkles i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px #ffc94a;
    animation: sparkFloat 3s ease-in-out infinite;
}
.sd-sparkles i:nth-child(1) { left: 12%; top: 30%; animation-delay: 0s; }
.sd-sparkles i:nth-child(2) { left: 28%; top: 18%; animation-delay: 0.4s; background: #ffb6c1; }
.sd-sparkles i:nth-child(3) { left: 55%; top: 22%; animation-delay: 0.8s; }
.sd-sparkles i:nth-child(4) { left: 72%; top: 35%; animation-delay: 1.2s; background: #a8e6cf; }
.sd-sparkles i:nth-child(5) { left: 40%; top: 40%; animation-delay: 1.6s; }
.sd-sparkles i:nth-child(6) { left: 85%; top: 25%; animation-delay: 2s; background: #b8e0f6; }

#shop-floor.shop-lv-5 {
    box-shadow:
        inset 0 0 50px rgba(255, 201, 74, 0.2),
        0 0 24px rgba(255, 182, 193, 0.35);
}

/* 升级瞬间闪一下 */
#shop-floor.shop-level-up-fx {
    animation: shopLevelFlash 1.1s ease;
}
@keyframes shopLevelFlash {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.25) saturate(1.2); }
    100% { filter: brightness(1); }
}
@keyframes lightTwinkle {
    0%, 100% { opacity: 0.65; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
}
@keyframes sparkFloat {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-8px); }
}

/* 保证场景元素在装饰之上 */
#shop-floor .stage-chips,
#shop-floor .stage-slots,
#shop-floor #actors-layer,
#shop-floor #counter-area,
#shop-floor #shop-closed-veil {
    position: relative;
    z-index: 5;
}
#shop-floor .stage-chips,
#shop-floor .stage-slots {
    position: absolute;
    z-index: 15;
}
#shop-floor #actors-layer { z-index: 8; }
/* 事件层必须绝对铺满可点区域：若 relative + 子元素 absolute，高度≈0，彩虹/浪花会被挤到收银台附近裁切 */
#shop-floor #event-layer {
    position: absolute !important;
    top: 44px;
    left: 4px;
    right: 4px;
    bottom: 108px;
    z-index: 14 !important;
    pointer-events: none;
    overflow: visible;
}
#shop-floor #counter-area { z-index: 9; }
#shop-floor #shop-closed-veil { z-index: 40; }
/* 小费/表情气泡：铺满场景，不能用 relative（会被挤到收银台下方且坐标错位） */
#shop-floor #speech-bubbles {
    position: absolute !important;
    inset: 0;
    pointer-events: none;
    z-index: 12;
    overflow: visible;
}