/* ============================================
   CHRISTMAS SCENE - Cozy Fireplace with Candles
   Replaces campfire-scene during Christmas period
   Integration-ready with matching dimensions
   ============================================ */

/* CSS Variables for Christmas Theme */
:root {
    /* Warm cozy palette */
    --xmas-bg-dark: #1a0f0a;
    --xmas-bg-mid: #2d1810;
    --xmas-bg-light: #3d2218;

    /* Fire colors */
    --xmas-fire-core: #fff4e0;
    --xmas-fire-bright: #ffb347;
    --xmas-fire-mid: #ff6b35;
    --xmas-fire-dark: #c41e3a;
    --xmas-ember: #8b0000;

    /* Candle colors */
    --xmas-candle-1: #ff9f43;
    --xmas-candle-2: #ee5a24;
    --xmas-candle-3: #f8b739;
    --xmas-candle-4: #ffc048;

    /* Wood */
    --xmas-wood-dark: #2c1810;
    --xmas-wood-mid: #4a2c20;
    --xmas-wood-light: #6b4030;

    /* Snow outside */
    --xmas-night-sky: #0c1929;
    --xmas-snow: #e8f0f8;
}

/* ============================================
   SCENE WRAPPER - matches campfire-scene-wrapper
   ============================================ */
.christmas-scene-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
}

.christmas-scene-wrapper .scene {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--xmas-bg-dark);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.8),
        inset 0 0 100px rgba(255, 107, 53, 0.05);
}

/* ============================================
   BEAUTIFUL WALL - Wood panels + Wallpaper
   ============================================ */
.christmas-scene-wrapper .wall-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Vertical wood planks */
.christmas-scene-wrapper .wood-planks {
    position: absolute;
    inset: 0;
    background:
        /* Wood grain texture */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 20px
        ),
        /* Individual planks with gaps */
        repeating-linear-gradient(
            90deg,
            #3d2216 0px,
            #4a2a1a 2px,
            #3a2015 4px,
            #452618 20px,
            #3d2216 40px,
            #2d1810 42px,
            #3d2216 44px,
            #4a2a1a 60px,
            #3a2015 80px,
            #2d1810 82px
        );
    opacity: 0.9;
}

/* Decorative wallpaper pattern (damask style) */
.christmas-scene-wrapper .wallpaper-pattern {
    position: absolute;
    inset: 0;
    background-image:
        /* Diamond pattern */
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 10px,
            rgba(139, 90, 43, 0.08) 10px,
            rgba(139, 90, 43, 0.08) 11px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 10px,
            rgba(139, 90, 43, 0.08) 10px,
            rgba(139, 90, 43, 0.08) 11px
        ),
        /* Subtle dots */
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 200, 100, 0.05) 2px,
            transparent 2px
        );
    background-size: 20px 20px, 20px 20px, 40px 40px;
    opacity: 0.7;
}

/* Wainscoting (wood panel on bottom half) */
.christmas-scene-wrapper .wainscoting {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background:
        /* Top trim */
        linear-gradient(180deg,
            #5a3a22 0px,
            #4a2a18 4px,
            #3d2214 6px,
            transparent 6px
        ),
        /* Panel grooves */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 48px,
            #2a1a10 48px,
            #1a0f08 50px,
            #2a1a10 52px,
            transparent 52px
        ),
        /* Panel base color with depth */
        linear-gradient(180deg,
            #3d2518 0%,
            #4a2d1c 20%,
            #3a2214 80%,
            #2d1810 100%
        );
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Chair rail molding */
.christmas-scene-wrapper .chair-rail {
    position: absolute;
    bottom: 45%;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg,
        #6b4528 0%,
        #8b5a32 30%,
        #5a3820 70%,
        #4a2a18 100%
    );
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 1;
}

/* Crown molding at top */
.christmas-scene-wrapper .crown-molding {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(180deg,
        #5a3820 0%,
        #7a4a2a 40%,
        #6b4025 60%,
        #4a2a18 100%
    );
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    z-index: 1;
}

/* Warm ambient light from fire */
.christmas-scene-wrapper .wall-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 60%;
    background: radial-gradient(
        ellipse 80% 100% at 50% 100%,
        rgba(255, 140, 50, 0.15) 0%,
        rgba(255, 100, 30, 0.08) 40%,
        transparent 70%
    );
    pointer-events: none;
    transition: opacity 0.8s ease;
    opacity: 0.3;
}

.christmas-scene-wrapper .scene[data-fire="1"] .wall-glow { opacity: 0.5; }
.christmas-scene-wrapper .scene[data-fire="2"] .wall-glow { opacity: 0.7; }
.christmas-scene-wrapper .scene[data-fire="3"] .wall-glow { opacity: 0.85; }
.christmas-scene-wrapper .scene[data-fire="4"] .wall-glow { opacity: 1; }

/* ============================================
   WINDOW - Classic Cabin Window
   ============================================ */
.christmas-scene-wrapper .window {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 150px;
    background: linear-gradient(180deg,
        #061525 0%,
        #0c2240 20%,
        #153050 40%,
        #1e4065 60%,
        #3a6a90 80%,
        var(--xmas-snow) 97%
    );
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.6),
        inset 0 0 80px rgba(80, 150, 220, 0.1);
}

/* Thick wooden frame */
.christmas-scene-wrapper .window-frame {
    position: absolute;
    inset: 0;
    border: 12px solid;
    border-color: #5a3a22;
    border-image: linear-gradient(180deg,
        #7a5535 0%,
        #5a3a22 30%,
        #4a2a18 70%,
        #3a2010 100%
    ) 1;
    border-radius: 8px;
    pointer-events: none;
    z-index: 5;
    box-shadow:
        inset 2px 2px 4px rgba(0,0,0,0.4),
        inset -2px -2px 4px rgba(0,0,0,0.2);
}

/* Center vertical divider */
.christmas-scene-wrapper .window-frame::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -12px;
    bottom: -12px;
    width: 10px;
    background: linear-gradient(90deg,
        #3a2010 0%,
        #5a3a22 20%,
        #6a4a30 50%,
        #5a3a22 80%,
        #3a2010 100%
    );
    transform: translateX(-50%);
    box-shadow:
        2px 0 4px rgba(0,0,0,0.3),
        -2px 0 4px rgba(0,0,0,0.3);
}

/* Horizontal crossbar */
.christmas-scene-wrapper .window-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    right: -12px;
    height: 10px;
    background: linear-gradient(180deg,
        #3a2010 0%,
        #5a3a22 20%,
        #6a4a30 50%,
        #5a3a22 80%,
        #3a2010 100%
    );
    transform: translateY(-50%);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        0 -2px 4px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Decorative corner blocks */
.christmas-scene-wrapper .window-keystone {
    display: none;
}

/* Window sill - solid wood */
.christmas-scene-wrapper .window-sill {
    position: absolute;
    bottom: -14px;
    left: -16px;
    right: -16px;
    height: 18px;
    background: linear-gradient(180deg,
        #6a4a30 0%,
        #5a3a22 30%,
        #4a2a18 70%,
        #3a2010 100%
    );
    border-radius: 2px 2px 4px 4px;
    z-index: 6;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.5),
        inset 0 2px 2px rgba(255,255,255,0.08);
}

/* Sill edge detail */
.christmas-scene-wrapper .window-sill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #4a2a18 0%,
        #7a5a40 50%,
        #4a2a18 100%
    );
}

/* Moon - beautiful glowing */
.christmas-scene-wrapper .window-moon {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 35% 35%,
        #fffef8 0%,
        #fff8e0 40%,
        #f5e8a0 70%,
        #e8d080 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 12px rgba(255, 250, 200, 0.9),
        0 0 30px rgba(255, 250, 200, 0.5),
        0 0 50px rgba(255, 250, 200, 0.25);
}

/* Moon glow halo */
.christmas-scene-wrapper .window-moon::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle,
        rgba(255, 250, 200, 0.2) 0%,
        transparent 70%
    );
    border-radius: 50%;
}

/* Stars */
.christmas-scene-wrapper .window-stars {
    position: absolute;
    inset: 0;
}

.christmas-scene-wrapper .window-star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: xmasTwinkle 2s ease-in-out infinite;
}

.christmas-scene-wrapper .window-star:nth-child(1) { width: 2px; height: 2px; top: 10%; left: 12%; }
.christmas-scene-wrapper .window-star:nth-child(2) { width: 2px; height: 2px; top: 18%; left: 32%; animation-delay: 0.5s; }
.christmas-scene-wrapper .window-star:nth-child(3) { width: 2px; height: 2px; top: 8%; left: 48%; animation-delay: 1s; }
.christmas-scene-wrapper .window-star:nth-child(4) { width: 1px; height: 1px; top: 25%; left: 22%; animation-delay: 0.3s; }
.christmas-scene-wrapper .window-star:nth-child(5) { width: 2px; height: 2px; top: 15%; left: 70%; animation-delay: 0.7s; }
.christmas-scene-wrapper .window-star:nth-child(6) { width: 1px; height: 1px; top: 30%; left: 58%; animation-delay: 1.2s; }
.christmas-scene-wrapper .window-star:nth-child(7) { width: 2px; height: 2px; top: 22%; left: 42%; animation-delay: 0.9s; }
.christmas-scene-wrapper .window-star:nth-child(8) { width: 1px; height: 1px; top: 6%; left: 38%; animation-delay: 1.5s; }

@keyframes xmasTwinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Distant pine forest */
.christmas-scene-wrapper .window-landscape {
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    height: 28%;
}

/* Far trees */
.christmas-scene-wrapper .distant-trees {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: #15303d;
    clip-path: polygon(
        0% 100%,
        0% 70%, 4% 50%, 8% 72%,
        12% 40%, 16% 65%, 20% 45%, 24% 70%,
        28% 38%, 32% 62%, 36% 42%, 40% 68%,
        44% 35%, 48% 60%, 52% 40%, 56% 65%,
        60% 38%, 64% 58%, 68% 45%, 72% 70%,
        76% 42%, 80% 65%, 84% 48%, 88% 72%,
        92% 50%, 96% 68%, 100% 55%, 100% 100%
    );
    opacity: 0.6;
}

/* Near trees (darker) */
.christmas-scene-wrapper .distant-trees::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: #0c1c25;
    clip-path: polygon(
        0% 100%,
        0% 75%, 10% 45%, 20% 78%,
        30% 40%, 40% 72%, 50% 35%, 60% 70%,
        70% 42%, 80% 75%, 90% 50%, 100% 70%, 100% 100%
    );
    opacity: 0.85;
}

/* Snow ground */
.christmas-scene-wrapper .window-snow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(180deg,
        #c0d8e8 0%,
        #dceaf5 40%,
        var(--xmas-snow) 100%
    );
}

/* Snow drifts */
.christmas-scene-wrapper .window-snow::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--xmas-snow);
    clip-path: polygon(
        0% 100%, 0% 70%, 8% 45%, 18% 80%, 28% 50%,
        40% 75%, 52% 40%, 65% 70%, 78% 55%,
        88% 75%, 100% 60%, 100% 100%
    );
}

/* Frost on window corners */
.christmas-scene-wrapper .window-frost {
    position: absolute;
    inset: 0;
    background:
        /* Corner frost */
        radial-gradient(ellipse 40% 35% at 0% 0%, rgba(255,255,255,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 35% 30% at 100% 0%, rgba(255,255,255,0.3) 0%, transparent 55%),
        radial-gradient(ellipse 35% 40% at 0% 100%, rgba(255,255,255,0.25) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 100%, rgba(255,255,255,0.3) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 6px;
}

/* Frost crystal patterns */
.christmas-scene-wrapper .window-frost::before {
    content: '';
    position: absolute;
    bottom: 8%;
    left: 5%;
    width: 25px;
    height: 25px;
    background:
        linear-gradient(0deg, rgba(255,255,255,0.25) 0%, transparent 50%),
        linear-gradient(60deg, rgba(255,255,255,0.2) 0%, transparent 50%),
        linear-gradient(-60deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0.5;
}

.christmas-scene-wrapper .window-frost::after {
    content: '';
    position: absolute;
    bottom: 12%;
    right: 6%;
    width: 20px;
    height: 20px;
    background:
        linear-gradient(0deg, rgba(255,255,255,0.2) 0%, transparent 50%),
        linear-gradient(72deg, rgba(255,255,255,0.15) 0%, transparent 50%),
        linear-gradient(-72deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    opacity: 0.4;
}

/* ============================================
   FROST NICKNAMES - Written on frozen glass
   4 panes for 4 nicknames
   ============================================ */
.christmas-scene-wrapper .frost-nicknames {
    position: absolute;
    inset: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    pointer-events: none;
    z-index: 4;
}

.christmas-scene-wrapper .frost-name {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 13px;
    font-weight: 700;
    color: #d0e8ff;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.5);
}

/* Show names when someone is checked in */
.christmas-scene-wrapper .frost-name.visible {
    opacity: 1;
    transform: scale(1);
    text-shadow: 1px 1px 2px rgba(0, 30, 60, 0.5);
}

/* Different animation delays for each pane */
.christmas-scene-wrapper .frost-name:nth-child(1) { animation-delay: 0s; }
.christmas-scene-wrapper .frost-name:nth-child(2) { animation-delay: 0.75s; }
.christmas-scene-wrapper .frost-name:nth-child(3) { animation-delay: 1.5s; }
.christmas-scene-wrapper .frost-name:nth-child(4) { animation-delay: 2.25s; }

/* ============================================
   FIREPLACE - Beautiful Stone Design
   ============================================ */
.christmas-scene-wrapper .fireplace {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 160px;
    z-index: 3;
}

/* Stone surround */
.christmas-scene-wrapper .fireplace-surround {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
}

/* Main stone frame */
.christmas-scene-wrapper .stone-frame {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        /* Stone texture pattern */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0,0,0,0.1) 1px,
            transparent 2px,
            transparent 30px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0,0,0,0.08) 1px,
            transparent 2px,
            transparent 20px
        ),
        /* Base stone color */
        linear-gradient(180deg,
            #6b5d52 0%,
            #5a4d42 30%,
            #4a3d32 70%,
            #3a2d22 100%
        );
    clip-path: polygon(
        0% 100%,
        0% 25%,
        8% 20%,
        8% 0%,
        92% 0%,
        92% 20%,
        100% 25%,
        100% 100%,
        75% 100%,
        75% 45%,
        70% 40%,
        30% 40%,
        25% 45%,
        25% 100%
    );
    box-shadow:
        inset 2px 2px 4px rgba(255,255,255,0.1),
        inset -2px -2px 4px rgba(0,0,0,0.3);
}

/* Mantle shelf */
.christmas-scene-wrapper .mantle-shelf {
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 18px;
    background: linear-gradient(180deg,
        #7a6a5a 0%,
        #5a4a3a 40%,
        #4a3a2a 100%
    );
    border-radius: 4px 4px 0 0;
    box-shadow:
        0 4px 8px rgba(0,0,0,0.4),
        inset 0 2px 2px rgba(255,255,255,0.1);
}

/* Decorative keystone */
.christmas-scene-wrapper .keystone {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 25px;
    background: linear-gradient(180deg, #7a6a5a 0%, #5a4a3a 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Fire opening arch */
.christmas-scene-wrapper .fire-opening {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 95px;
    background: #0a0502;
    border-radius: 60px 60px 0 0;
    box-shadow:
        inset 0 10px 30px rgba(0,0,0,0.8),
        inset 0 -5px 15px rgba(255,100,30,0.2);
    overflow: hidden;
}

/* Inner brick lining */
.christmas-scene-wrapper .brick-lining {
    position: absolute;
    inset: 5px;
    border-radius: 55px 55px 0 0;
    background:
        repeating-linear-gradient(
            90deg,
            #2a1a10 0px,
            #2a1a10 18px,
            #1a0a05 18px,
            #1a0a05 20px
        ),
        repeating-linear-gradient(
            0deg,
            #2a1a10 0px,
            #2a1a10 10px,
            #1a0a05 10px,
            #1a0a05 12px
        );
    opacity: 0.5;
}

/* Hearth base */
.christmas-scene-wrapper .hearth {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 15px;
    background: linear-gradient(180deg, #5a4a3a 0%, #3a2a1a 100%);
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

/* Logs */
.christmas-scene-wrapper .logs {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 30px;
    z-index: 1;
}

.christmas-scene-wrapper .log {
    position: absolute;
    background: linear-gradient(90deg,
        #3d2518 0%,
        #5a3a25 30%,
        #4a2a18 70%,
        #3d2518 100%
    );
    border-radius: 50%;
    box-shadow: inset -3px -2px 5px rgba(0,0,0,0.5);
}

.christmas-scene-wrapper .log:nth-child(1) {
    width: 70px;
    height: 14px;
    bottom: 0;
    left: 10px;
    transform: rotate(-8deg);
}

.christmas-scene-wrapper .log:nth-child(2) {
    width: 60px;
    height: 12px;
    bottom: 10px;
    left: 15px;
    transform: rotate(12deg);
}

.christmas-scene-wrapper .log:nth-child(3) {
    width: 50px;
    height: 10px;
    bottom: 5px;
    left: 25px;
    transform: rotate(-3deg);
}

/* Embers under logs */
.christmas-scene-wrapper .embers {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(255,100,20,0.8) 0%, rgba(200,50,0,0.4) 50%, transparent 70%);
    filter: blur(3px);
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

.christmas-scene-wrapper .scene[data-fire="1"] .embers { opacity: 0.5; }
.christmas-scene-wrapper .scene[data-fire="2"] .embers { opacity: 0.7; }
.christmas-scene-wrapper .scene[data-fire="3"] .embers { opacity: 0.85; }
.christmas-scene-wrapper .scene[data-fire="4"] .embers { opacity: 1; }

/* ============================================
   FIRE - Realistic Layered Flames
   ============================================ */
.christmas-scene-wrapper .fire {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 75px;
    z-index: 2;
    opacity: 0.15;
    transition: opacity 0.8s ease, transform 0.8s ease;
    filter: blur(0.5px);
}

.christmas-scene-wrapper .scene[data-fire="1"] .fire { opacity: 0.4; transform: translateX(-50%) scale(0.5); }
.christmas-scene-wrapper .scene[data-fire="2"] .fire { opacity: 0.65; transform: translateX(-50%) scale(0.7); }
.christmas-scene-wrapper .scene[data-fire="3"] .fire { opacity: 0.85; transform: translateX(-50%) scale(0.85); }
.christmas-scene-wrapper .scene[data-fire="4"] .fire { opacity: 1; transform: translateX(-50%) scale(1); }

/* Main flame layers */
.christmas-scene-wrapper .flame {
    position: absolute;
    bottom: 0;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* Core white flame */
.christmas-scene-wrapper .flame-core {
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 45px;
    background: linear-gradient(0deg,
        rgba(255,200,100,0) 0%,
        #fffaf0 30%,
        #fff8e0 60%,
        rgba(255,250,240,0) 100%
    );
    animation: xmasFlameCore 0.3s ease-in-out infinite alternate;
    filter: blur(2px);
    z-index: 5;
}

/* Inner yellow flame */
.christmas-scene-wrapper .flame-inner {
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 55px;
    background: linear-gradient(0deg,
        rgba(255,180,50,0) 0%,
        #ffcc33 20%,
        #ffaa22 50%,
        #ff8800 80%,
        rgba(255,100,0,0) 100%
    );
    animation: xmasFlameInner 0.4s ease-in-out infinite alternate;
    z-index: 4;
}

/* Middle orange flame */
.christmas-scene-wrapper .flame-middle {
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 65px;
    background: linear-gradient(0deg,
        rgba(255,100,20,0) 0%,
        #ff6b22 15%,
        #ff5511 40%,
        #ee3300 70%,
        rgba(200,30,0,0) 100%
    );
    animation: xmasFlameMiddle 0.5s ease-in-out infinite alternate;
    z-index: 3;
}

/* Outer red flame */
.christmas-scene-wrapper .flame-outer {
    left: 50%;
    transform: translateX(-50%);
    width: 75px;
    height: 70px;
    background: linear-gradient(0deg,
        rgba(180,30,0,0) 0%,
        #cc2200 10%,
        #aa1100 30%,
        #880000 60%,
        rgba(100,0,0,0) 100%
    );
    animation: xmasFlameOuter 0.6s ease-in-out infinite alternate;
    z-index: 2;
}

/* Side flames */
.christmas-scene-wrapper .flame-left,
.christmas-scene-wrapper .flame-right {
    width: 25px;
    height: 40px;
    background: linear-gradient(0deg,
        rgba(255,100,20,0) 0%,
        #ff6622 30%,
        #ee4400 70%,
        rgba(200,30,0,0) 100%
    );
    z-index: 3;
}

.christmas-scene-wrapper .flame-left {
    left: 10%;
    animation: xmasFlameSideLeft 0.45s ease-in-out infinite alternate;
}

.christmas-scene-wrapper .flame-right {
    right: 10%;
    animation: xmasFlameSideRight 0.5s ease-in-out infinite alternate;
}

/* Flame animations */
@keyframes xmasFlameCore {
    0% { height: 40px; opacity: 0.9; }
    100% { height: 48px; opacity: 1; }
}

@keyframes xmasFlameInner {
    0% { height: 50px; transform: translateX(-50%) scaleX(1); }
    100% { height: 58px; transform: translateX(-50%) scaleX(0.9); }
}

@keyframes xmasFlameMiddle {
    0% { height: 60px; transform: translateX(-50%) scaleX(1) rotate(-1deg); }
    100% { height: 68px; transform: translateX(-50%) scaleX(0.92) rotate(1deg); }
}

@keyframes xmasFlameOuter {
    0% { height: 65px; transform: translateX(-50%) scaleX(1); opacity: 0.8; }
    100% { height: 72px; transform: translateX(-50%) scaleX(0.95); opacity: 0.9; }
}

@keyframes xmasFlameSideLeft {
    0% { height: 35px; transform: rotate(-8deg); }
    100% { height: 42px; transform: rotate(-3deg); }
}

@keyframes xmasFlameSideRight {
    0% { height: 38px; transform: rotate(8deg); }
    100% { height: 44px; transform: rotate(3deg); }
}

/* Fire glow */
.christmas-scene-wrapper .fire-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 220px;
    background:
        radial-gradient(ellipse 60% 80% at 50% 100%,
            rgba(255, 150, 50, 0.4) 0%,
            rgba(255, 100, 30, 0.2) 30%,
            transparent 60%
        ),
        radial-gradient(ellipse 80% 60% at 50% 100%,
            rgba(255, 80, 20, 0.15) 0%,
            transparent 50%
        );
    pointer-events: none;
    opacity: 0.2;
    transition: opacity 0.8s ease;
    z-index: 1;
}

.christmas-scene-wrapper .scene[data-fire="1"] .fire-glow { opacity: 0.35; }
.christmas-scene-wrapper .scene[data-fire="2"] .fire-glow { opacity: 0.55; }
.christmas-scene-wrapper .scene[data-fire="3"] .fire-glow { opacity: 0.75; }
.christmas-scene-wrapper .scene[data-fire="4"] .fire-glow { opacity: 1; }

/* ============================================
   MANTLE with candles
   ============================================ */
.christmas-scene-wrapper .mantle {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 15px;
    background: linear-gradient(180deg, var(--xmas-wood-light) 0%, var(--xmas-wood-mid) 100%);
    border-radius: 3px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* ============================================
   CANDLES on mantle
   ============================================ */
.christmas-scene-wrapper .candles {
    position: absolute;
    bottom: 145px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.christmas-scene-wrapper .candle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.christmas-scene-wrapper .candle:hover {
    transform: scale(1.05);
}

.christmas-scene-wrapper .candle-body {
    width: 18px;
    height: 45px;
    background: linear-gradient(90deg, #f5e6d3 0%, #fff8f0 50%, #f5e6d3 100%);
    border-radius: 3px 3px 0 0;
    position: relative;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.christmas-scene-wrapper .candle:nth-child(1) .candle-body { height: 50px; }
.christmas-scene-wrapper .candle:nth-child(2) .candle-body { height: 42px; }
.christmas-scene-wrapper .candle:nth-child(3) .candle-body { height: 48px; }
.christmas-scene-wrapper .candle:nth-child(4) .candle-body { height: 44px; }

/* Wick */
.christmas-scene-wrapper .candle-body::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: #333;
    border-radius: 1px;
}

/* Candle holder */
.christmas-scene-wrapper .candle-holder {
    width: 28px;
    height: 10px;
    background: linear-gradient(180deg, #c9a227 0%, #8b6914 100%);
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Candle flame */
.christmas-scene-wrapper .candle-flame {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 20px;
    background: linear-gradient(0deg, var(--xmas-fire-bright) 0%, var(--xmas-fire-core) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(1px);
    box-shadow: 0 0 15px var(--xmas-fire-bright), 0 0 30px rgba(255, 179, 71, 0.5);
}

.christmas-scene-wrapper .candle.lit .candle-flame {
    opacity: 1;
    animation: xmasCandleFlicker 0.3s ease-in-out infinite alternate;
}

@keyframes xmasCandleFlicker {
    0% { transform: translateX(-50%) scaleY(1) rotate(-2deg); }
    100% { transform: translateX(-50%) scaleY(1.1) rotate(2deg); }
}

/* Candle glow */
.christmas-scene-wrapper .candle.lit::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(255, 179, 71, 0.4) 0%, transparent 70%);
    pointer-events: none;
}

/* ============================================
   BEAUTIFUL STRING LIGHTS - Left & Right walls
   Realistic bulbs with wire, caps, and glow
   ============================================ */

/* Wire that connects the lights */
.christmas-scene-wrapper .string-lights {
    position: absolute;
    z-index: 6;
}

.christmas-scene-wrapper .string-lights-left {
    top: 44%;
    left: 0;
    width: 25px;
    height: 100px;
}

.christmas-scene-wrapper .string-lights-right {
    top: 44%;
    right: 0;
    width: 25px;
    height: 100px;
}

/* Mounting bracket/hook at top */
.christmas-scene-wrapper .lights-mount {
    position: absolute;
    top: -8px;
    width: 18px;
    height: 12px;
    background: linear-gradient(180deg,
        #5a4030 0%,
        #4a3020 50%,
        #3a2515 100%
    );
    border-radius: 3px 3px 0 0;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 1px rgba(255,255,255,0.1);
}

.christmas-scene-wrapper .string-lights-left .lights-mount { left: 0; }
.christmas-scene-wrapper .string-lights-right .lights-mount { right: 0; }

/* Nail/hook detail */
.christmas-scene-wrapper .lights-mount::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 35% 35%, #888 0%, #555 50%, #333 100%);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Small hook curve */
.christmas-scene-wrapper .lights-mount::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 6px;
    border: 2px solid #3a3a3a;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* The wire/cord */
.christmas-scene-wrapper .lights-wire {
    position: absolute;
    top: 8px;
    width: 3px;
    height: calc(100% - 8px);
    background: linear-gradient(180deg,
        #1a1a1a 0%,
        #2a2a2a 50%,
        #1a1a1a 100%
    );
    border-radius: 2px;
    box-shadow: 1px 0 2px rgba(0,0,0,0.3);
}

.christmas-scene-wrapper .string-lights-left .lights-wire { left: 8px; }
.christmas-scene-wrapper .string-lights-right .lights-wire { right: 8px; }

/* Individual light bulb */
.christmas-scene-wrapper .bulb {
    position: absolute;
    width: 10px;
    height: 14px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    animation: xmasBulbGlow 2s ease-in-out infinite;
}

/* Bulb cap/socket */
.christmas-scene-wrapper .bulb::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 5px;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 50%, #3a3a3a 100%);
    border-radius: 2px 2px 1px 1px;
}

/* Wire connection from cap */
.christmas-scene-wrapper .bulb::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 3px;
    background: #1a1a1a;
}

/* Left side bulbs */
.christmas-scene-wrapper .string-lights-left .bulb { left: 4px; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(2) { top: 8px; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(3) { top: 30px; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(4) { top: 52px; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(5) { top: 74px; }

/* Right side bulbs */
.christmas-scene-wrapper .string-lights-right .bulb { right: 4px; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(2) { top: 8px; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(3) { top: 30px; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(4) { top: 52px; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(5) { top: 74px; }

/* Bulb colors with beautiful glow */
.christmas-scene-wrapper .bulb-red {
    background: radial-gradient(ellipse at 30% 20%, #ff8888 0%, #ff4444 40%, #cc2222 100%);
    box-shadow: 0 0 8px 2px rgba(255, 68, 68, 0.8), 0 0 20px 4px rgba(255, 68, 68, 0.4);
}
.christmas-scene-wrapper .bulb-gold {
    background: radial-gradient(ellipse at 30% 20%, #ffee88 0%, #ffd700 40%, #cc9900 100%);
    box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.8), 0 0 20px 4px rgba(255, 215, 0, 0.4);
}
.christmas-scene-wrapper .bulb-green {
    background: radial-gradient(ellipse at 30% 20%, #88ff88 0%, #44ff44 40%, #22aa22 100%);
    box-shadow: 0 0 8px 2px rgba(68, 255, 68, 0.8), 0 0 20px 4px rgba(68, 255, 68, 0.4);
}
.christmas-scene-wrapper .bulb-blue {
    background: radial-gradient(ellipse at 30% 20%, #88aaff 0%, #4488ff 40%, #2255cc 100%);
    box-shadow: 0 0 8px 2px rgba(68, 136, 255, 0.8), 0 0 20px 4px rgba(68, 136, 255, 0.4);
}
.christmas-scene-wrapper .bulb-pink {
    background: radial-gradient(ellipse at 30% 20%, #ffaaff 0%, #ff66ff 40%, #cc44cc 100%);
    box-shadow: 0 0 8px 2px rgba(255, 102, 255, 0.8), 0 0 20px 4px rgba(255, 102, 255, 0.4);
}
.christmas-scene-wrapper .bulb-cyan {
    background: radial-gradient(ellipse at 30% 20%, #88ffff 0%, #44ffff 40%, #22cccc 100%);
    box-shadow: 0 0 8px 2px rgba(68, 255, 255, 0.8), 0 0 20px 4px rgba(68, 255, 255, 0.4);
}
.christmas-scene-wrapper .bulb-orange {
    background: radial-gradient(ellipse at 30% 20%, #ffcc88 0%, #ff8800 40%, #cc5500 100%);
    box-shadow: 0 0 8px 2px rgba(255, 136, 0, 0.8), 0 0 20px 4px rgba(255, 136, 0, 0.4);
}
.christmas-scene-wrapper .bulb-white {
    background: radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f0f0f0 40%, #cccccc 100%);
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9), 0 0 20px 4px rgba(255, 255, 255, 0.5);
}

/* Staggered animation delays */
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(2) { animation-delay: 0s; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(3) { animation-delay: 0.4s; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(4) { animation-delay: 0.8s; }
.christmas-scene-wrapper .string-lights-left .bulb:nth-child(5) { animation-delay: 1.2s; }

.christmas-scene-wrapper .string-lights-right .bulb:nth-child(2) { animation-delay: 0.2s; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(3) { animation-delay: 0.6s; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(4) { animation-delay: 1.0s; }
.christmas-scene-wrapper .string-lights-right .bulb:nth-child(5) { animation-delay: 1.4s; }

@keyframes xmasBulbGlow {
    0%, 100% {
        filter: brightness(0.7);
        transform: scale(0.95);
    }
    50% {
        filter: brightness(1.3);
        transform: scale(1.05);
    }
}

/* ============================================
   SPARKS - Fly up at 4/4
   ============================================ */
.christmas-scene-wrapper .sparks-container {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.christmas-scene-wrapper .scene[data-fire="4"] .sparks-container {
    opacity: 1;
}

.christmas-scene-wrapper .spark {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    background: var(--xmas-fire-bright);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--xmas-fire-bright);
    animation: xmasSparkRise 2s ease-out infinite;
}

.christmas-scene-wrapper .spark:nth-child(1) { left: 20%; animation-delay: 0s; }
.christmas-scene-wrapper .spark:nth-child(2) { left: 40%; animation-delay: 0.3s; }
.christmas-scene-wrapper .spark:nth-child(3) { left: 60%; animation-delay: 0.6s; }
.christmas-scene-wrapper .spark:nth-child(4) { left: 80%; animation-delay: 0.9s; }
.christmas-scene-wrapper .spark:nth-child(5) { left: 30%; animation-delay: 1.2s; }
.christmas-scene-wrapper .spark:nth-child(6) { left: 70%; animation-delay: 1.5s; }

@keyframes xmasSparkRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-180px) scale(0);
        opacity: 0;
    }
}

/* ============================================
   SLEIGH - Lottie passing through window
   Now positioned INSIDE window with proper clipping
   ============================================ */
.christmas-scene-wrapper .sleigh-container {
    position: absolute;
    inset: 12px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.christmas-scene-wrapper .sleigh-window {
    position: absolute;
    top: 15%;
    left: -100px;
    width: 100px;
    height: 60px;
    opacity: 0;
    pointer-events: none;
}

.christmas-scene-wrapper .scene[data-fire="4"] .sleigh-window {
    animation: xmasSleighPass 10s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes xmasSleighPass {
    0% {
        left: -100px;
        top: 8%;
        opacity: 0;
        transform: scale(1);
    }
    8% {
        opacity: 1;
    }
    20% {
        top: 15%;
        transform: scale(1.05);
    }
    40% {
        top: 5%;
        transform: scale(1.1);
    }
    60% {
        left: calc(50% - 50px);
        top: 12%;
        transform: scale(1.05);
    }
    80% {
        top: 8%;
        transform: scale(1);
    }
    92% {
        opacity: 1;
    }
    100% {
        left: calc(100% + 20px);
        top: 10%;
        opacity: 0;
        transform: scale(0.95);
    }
}

.christmas-scene-wrapper .sleigh-window lottie-player {
    width: 100%;
    height: 100%;
    /* Colorful sleigh with slight glow */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* ============================================
   WALL DECORATIONS - Picture & Christmas Tree
   ============================================ */

/* Framed Deer Painting with Emoji/Twemoji */
.christmas-scene-wrapper .wall-painting {
    position: absolute;
    top: 12%;
    left: 2%;
    width: 70px;
    height: 70px;
    z-index: 2;
}

/* Wooden rustic frame */
.christmas-scene-wrapper .painting-frame {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        #6a4a30 0%,
        #5a3a22 25%,
        #4a2a18 50%,
        #5a3a22 75%,
        #6a4a30 100%
    );
    border-radius: 6px;
    box-shadow:
        0 5px 15px rgba(0,0,0,0.6),
        inset 2px 2px 4px rgba(255,255,255,0.1),
        inset -2px -2px 4px rgba(0,0,0,0.3);
}

/* Inner frame detail */
.christmas-scene-wrapper .painting-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid #7a5a40;
    border-radius: 4px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4);
}

.christmas-scene-wrapper .painting-inner {
    position: absolute;
    inset: 8px;
    background: linear-gradient(180deg,
        #2a3a30 0%,
        #1a2a20 50%,
        #0a1a10 100%
    );
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Deer emoji image */
.christmas-scene-wrapper .painting-emoji {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

/* ============================================
   FIREWOOD PILE (left of fireplace) - XL
   ============================================ */
.christmas-scene-wrapper .firewood-pile {
    position: absolute;
    bottom: 0;
    left: 2%;
    width: 95px;
    height: 95px;
    z-index: 4;
}

.christmas-scene-wrapper .firewood-log {
    position: absolute;
    background: linear-gradient(90deg, #3a2518 0%, #5a3a28 30%, #6a4a35 50%, #5a3a28 70%, #3a2518 100%);
    border-radius: 50%;
    box-shadow:
        inset -4px -3px 6px rgba(0,0,0,0.5),
        0 3px 5px rgba(0,0,0,0.4);
}

/* Bottom row - 3 logs */
.christmas-scene-wrapper .firewood-log:nth-child(1) { width: 85px; height: 22px; bottom: 0; left: 0; }
.christmas-scene-wrapper .firewood-log:nth-child(2) { width: 78px; height: 21px; bottom: 0; left: 14px; }
.christmas-scene-wrapper .firewood-log:nth-child(3) { width: 72px; height: 20px; bottom: 2px; left: 6px; transform: rotate(3deg); }
/* Middle row - 2 logs */
.christmas-scene-wrapper .firewood-log:nth-child(4) { width: 75px; height: 20px; bottom: 20px; left: 10px; }
.christmas-scene-wrapper .firewood-log:nth-child(5) { width: 68px; height: 19px; bottom: 22px; left: 22px; transform: rotate(-2deg); }
/* Top row */
.christmas-scene-wrapper .firewood-log:nth-child(6) { width: 62px; height: 18px; bottom: 40px; left: 18px; transform: rotate(2deg); }

/* Log end circles (cut ends) - visible rings */
.christmas-scene-wrapper .firewood-log::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 100%;
    background:
        radial-gradient(ellipse, #d4b890 0%, #b89870 20%, #a08060 40%, #806040 60%, #604020 80%, #3a2010 100%);
    border-radius: 50%;
    box-shadow: inset 2px 0 4px rgba(0,0,0,0.4);
}

/* Second end on some logs */
.christmas-scene-wrapper .firewood-log:nth-child(1)::after,
.christmas-scene-wrapper .firewood-log:nth-child(3)::after,
.christmas-scene-wrapper .firewood-log:nth-child(5)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 90%;
    background:
        radial-gradient(ellipse, #c9a880 0%, #a08060 30%, #705030 60%, #503020 100%);
    border-radius: 50%;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.4);
}

/* ============================================
   CABINET WITH TEAPOT (right of fireplace) - XL
   ============================================ */
.christmas-scene-wrapper .tea-cabinet {
    position: absolute;
    bottom: 0;
    right: 2%;
    width: 80px;
    height: 115px;
    z-index: 4;
}

.christmas-scene-wrapper .cabinet-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background: linear-gradient(180deg,
        #5a4030 0%,
        #4a3525 20%,
        #4a3020 50%,
        #3a2515 80%,
        #3a2010 100%
    );
    border-radius: 5px;
    box-shadow:
        0 5px 15px rgba(0,0,0,0.6),
        inset 2px 2px 3px rgba(255,255,255,0.1);
}

/* Cabinet door panel */
.christmas-scene-wrapper .cabinet-body::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: linear-gradient(180deg, #4a3525 0%, #3a2515 50%, #2a1a0a 100%);
    border-radius: 4px;
    border: 3px solid #5a4535;
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.4);
}

/* Door knob */
.christmas-scene-wrapper .cabinet-body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, #d4af37 0%, #c9a227 40%, #8b6914 100%);
    border-radius: 50%;
    box-shadow:
        0 3px 5px rgba(0,0,0,0.5),
        inset 2px 2px 3px rgba(255,255,255,0.3);
}

/* Cabinet top surface */
.christmas-scene-wrapper .cabinet-top {
    position: absolute;
    bottom: 88px;
    left: -4px;
    width: 88px;
    height: 10px;
    background: linear-gradient(180deg, #7a6050 0%, #5a4030 50%, #4a3020 100%);
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

/* Teapot - XL */
.christmas-scene-wrapper .teapot {
    position: absolute;
    bottom: 97px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 38px;
}

/* Teapot Counter - shows number of people INSIDE the teapot body */
.christmas-scene-wrapper .teapot-counter {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 20px;
    height: 16px;
    padding: 0 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    color: #5a3a25;
    text-shadow:
        0 0 3px rgba(255,255,255,0.5),
        0 1px 1px rgba(255,255,255,0.3);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show counter when there are people */
.christmas-scene-wrapper .teapot-counter.visible {
    opacity: 1;
}

/* Pulse animation when count changes */
.christmas-scene-wrapper .teapot-counter.pulse {
    animation: xmasCounterPulse 0.4s ease;
}

@keyframes xmasCounterPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.3); }
}

/* Steam from teapot when people are there */
.christmas-scene-wrapper .teapot-steam {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    pointer-events: none;
}

.christmas-scene-wrapper .scene[data-fire="1"] .teapot-steam,
.christmas-scene-wrapper .scene[data-fire="2"] .teapot-steam,
.christmas-scene-wrapper .scene[data-fire="3"] .teapot-steam,
.christmas-scene-wrapper .scene[data-fire="4"] .teapot-steam {
    opacity: 1;
}

.christmas-scene-wrapper .steam-puff {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: xmasSteamRise 2s ease-out infinite;
}

.christmas-scene-wrapper .steam-puff:nth-child(1) { left: 2px; animation-delay: 0s; }
.christmas-scene-wrapper .steam-puff:nth-child(2) { left: 7px; animation-delay: 0.5s; }
.christmas-scene-wrapper .steam-puff:nth-child(3) { left: 12px; animation-delay: 1s; }

@keyframes xmasSteamRise {
    0% {
        opacity: 0.6;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(1.2);
    }
}

.christmas-scene-wrapper .teapot-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 28px;
    background: linear-gradient(180deg,
        #f0e0d0 0%,
        #e0d0c0 20%,
        #d4c4b0 50%,
        #c0b0a0 80%,
        #a09080 100%
    );
    border-radius: 45% 45% 48% 48%;
    box-shadow:
        0 4px 8px rgba(0,0,0,0.4),
        inset 3px 3px 6px rgba(255,255,255,0.4),
        inset -3px -3px 6px rgba(0,0,0,0.15);
}

/* Teapot lid */
.christmas-scene-wrapper .teapot-body::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 8px;
    background: linear-gradient(180deg, #f5e5d5 0%, #e0d0c0 50%, #c0b0a0 100%);
    border-radius: 50% 50% 35% 35%;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

/* Lid knob */
.christmas-scene-wrapper .teapot-body::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 7px;
    background: radial-gradient(circle at 40% 30%, #d0c0b0 0%, #a09080 100%);
    border-radius: 50%;
}

/* Teapot spout */
.christmas-scene-wrapper .teapot-spout {
    position: absolute;
    bottom: 14px;
    right: -8px;
    width: 18px;
    height: 10px;
    background: linear-gradient(180deg, #e0d0c0 0%, #c0b0a0 100%);
    border-radius: 0 60% 60% 0;
    transform: rotate(-20deg);
    box-shadow: 0 2px 3px rgba(0,0,0,0.25);
}

/* Teapot handle */
.christmas-scene-wrapper .teapot-handle {
    position: absolute;
    bottom: 8px;
    left: -7px;
    width: 14px;
    height: 22px;
    border: 4px solid #b0a090;
    border-right: none;
    border-radius: 50% 0 0 50%;
    box-shadow: -2px 0 3px rgba(0,0,0,0.25);
}

/* Small Christmas Tree on shelf (right side) */
.christmas-scene-wrapper .mini-tree {
    position: absolute;
    top: 6%;
    right: 5%;
    width: 55px;
    height: 90px;
    z-index: 2;
}

/* Shelf for the tree */
.christmas-scene-wrapper .tree-shelf {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 10px;
    background: linear-gradient(180deg,
        #7a5535 0%,
        #5a3a22 50%,
        #4a2a18 100%
    );
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Shelf brackets */
.christmas-scene-wrapper .tree-shelf::before,
.christmas-scene-wrapper .tree-shelf::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 8px;
    height: 14px;
    background: linear-gradient(90deg, #5a3a22 0%, #4a2a18 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

.christmas-scene-wrapper .tree-shelf::before { left: 8px; }
.christmas-scene-wrapper .tree-shelf::after { right: 8px; transform: scaleX(-1); }

.christmas-scene-wrapper .tree-pot {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 14px;
    background: linear-gradient(180deg, #a05030 0%, #8b4513 50%, #6a3010 100%);
    border-radius: 2px 2px 5px 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Pot rim */
.christmas-scene-wrapper .tree-pot::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    height: 4px;
    background: linear-gradient(180deg, #b06040 0%, #8b4513 100%);
    border-radius: 2px;
}

.christmas-scene-wrapper .tree-trunk {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 8px;
    background: linear-gradient(90deg, #4a2a10 0%, #6a4020 50%, #4a2a10 100%);
}

.christmas-scene-wrapper .tree-body {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 48px;
}

/* Tree layers */
.christmas-scene-wrapper .tree-layer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #1a5c32 0%, #0d3d1f 100%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.christmas-scene-wrapper .tree-layer:nth-child(1) {
    bottom: 32px;
    width: 22px;
    height: 18px;
}

.christmas-scene-wrapper .tree-layer:nth-child(2) {
    bottom: 18px;
    width: 30px;
    height: 20px;
}

.christmas-scene-wrapper .tree-layer:nth-child(3) {
    bottom: 0;
    width: 40px;
    height: 24px;
}

/* Tree star */
.christmas-scene-wrapper .tree-star {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #ffd700;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
    box-shadow: 0 0 8px rgba(255,215,0,0.8);
    animation: xmasStarGlow 1.5s ease-in-out infinite;
}

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

/* Tree ornaments */
.christmas-scene-wrapper .tree-ornament {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 4px currentColor;
}

.christmas-scene-wrapper .tree-ornament:nth-child(5) {
    bottom: 8px;
    left: 8px;
    background: #ff4444;
    color: #ff4444;
}

.christmas-scene-wrapper .tree-ornament:nth-child(6) {
    bottom: 14px;
    right: 10px;
    background: #4488ff;
    color: #4488ff;
}

.christmas-scene-wrapper .tree-ornament:nth-child(7) {
    bottom: 26px;
    left: 12px;
    background: #ffd700;
    color: #ffd700;
}

.christmas-scene-wrapper .tree-ornament:nth-child(8) {
    bottom: 20px;
    right: 14px;
    background: #44ff44;
    color: #44ff44;
}

.christmas-scene-wrapper .tree-ornament:nth-child(9) {
    bottom: 36px;
    left: 16px;
    background: #ff44ff;
    color: #ff44ff;
}

/* Tree lights */
.christmas-scene-wrapper .tree-light {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: xmasTreeLight 1s ease-in-out infinite;
}

.christmas-scene-wrapper .tree-light:nth-child(10) {
    bottom: 5px;
    left: 18px;
    background: #ffff00;
    animation-delay: 0s;
}

.christmas-scene-wrapper .tree-light:nth-child(11) {
    bottom: 22px;
    left: 6px;
    background: #ff8800;
    animation-delay: 0.2s;
}

.christmas-scene-wrapper .tree-light:nth-child(12) {
    bottom: 30px;
    right: 8px;
    background: #00ffff;
    animation-delay: 0.4s;
}

.christmas-scene-wrapper .tree-light:nth-child(13) {
    bottom: 12px;
    right: 6px;
    background: #ff00ff;
    animation-delay: 0.6s;
}

@keyframes xmasTreeLight {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Wall shelf with decorations */
.christmas-scene-wrapper .wall-shelf {
    position: absolute;
    top: 38%;
    right: 4%;
    width: 55px;
    z-index: 2;
}

.christmas-scene-wrapper .shelf-board {
    width: 100%;
    height: 8px;
    background: linear-gradient(180deg,
        #7a5535 0%,
        #5a3a22 50%,
        #4a2a18 100%
    );
    border-radius: 2px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.christmas-scene-wrapper .shelf-bracket {
    position: absolute;
    top: 8px;
    width: 8px;
    height: 12px;
    background: linear-gradient(90deg, #5a3a22 0%, #4a2a18 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

.christmas-scene-wrapper .shelf-bracket:first-of-type { left: 8px; }
.christmas-scene-wrapper .shelf-bracket:last-of-type { right: 8px; transform: scaleX(-1); }

/* Snowglobe on shelf */
.christmas-scene-wrapper .snowglobe {
    position: absolute;
    bottom: 8px;
    left: 5px;
    width: 22px;
    height: 26px;
}

.christmas-scene-wrapper .globe-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 6px;
    background: linear-gradient(180deg, #5a3a22 0%, #3a2010 100%);
    border-radius: 2px;
}

.christmas-scene-wrapper .globe-glass {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%,
        rgba(255,255,255,0.3) 0%,
        rgba(200,230,255,0.15) 50%,
        rgba(150,200,230,0.1) 100%
    );
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    overflow: hidden;
}

.christmas-scene-wrapper .globe-tree {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 10px;
    background: #1a5c32;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.christmas-scene-wrapper .globe-snow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #fff;
    border-radius: 0 0 10px 10px;
}

/* Small nutcracker on shelf */
.christmas-scene-wrapper .nutcracker {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 12px;
    height: 24px;
}

.christmas-scene-wrapper .nutcracker-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #f5d0a0;
    border-radius: 2px;
}

.christmas-scene-wrapper .nutcracker-hat {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 6px;
    background: #c41e3a;
    border-radius: 2px 2px 0 0;
}

.christmas-scene-wrapper .nutcracker-body {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 12px;
    background: linear-gradient(180deg, #c41e3a 0%, #8b1528 100%);
    border-radius: 1px;
}

.christmas-scene-wrapper .nutcracker-legs {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 5px;
    background: #1a1a1a;
}

/* ============================================
   SANTA PEEKING AT WINDOW - Fun surprise!
   ============================================ */
.christmas-scene-wrapper .santa-peek {
    position: absolute;
    bottom: 12%;
    left: 72%;
    transform: translateX(-50%) translateY(100%);
    width: 70px;
    height: 75px;
    z-index: 4;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    pointer-events: none;
}

/* Show Santa when all 4 candles lit */
.christmas-scene-wrapper .scene[data-fire="4"] .santa-peek {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    animation: xmasSantaBob 2s ease-in-out infinite 1s;
}

@keyframes xmasSantaBob {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    25% { transform: translateX(-50%) translateY(-3px) rotate(-2deg); }
    75% { transform: translateX(-50%) translateY(-3px) rotate(2deg); }
}

/* Santa's Face */
.christmas-scene-wrapper .santa-face {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: radial-gradient(circle at 50% 40%, #ffe4c4 0%, #ffd4a4 60%, #ecc090 100%);
    border-radius: 50% 50% 48% 48%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Rosy cheeks */
.christmas-scene-wrapper .santa-face::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 10px;
    height: 8px;
    background: rgba(255, 120, 120, 0.5);
    border-radius: 50%;
    box-shadow: 25px 0 0 rgba(255, 120, 120, 0.5);
}

/* Nose */
.christmas-scene-wrapper .santa-face::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 40% 40%, #ffb090 0%, #e89070 100%);
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

/* Santa's Eyes */
.christmas-scene-wrapper .santa-eyes {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 8px;
}

.christmas-scene-wrapper .santa-eye {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #2a1a0a;
    border-radius: 50%;
    animation: xmasSantaBlink 4s ease-in-out infinite;
}

.christmas-scene-wrapper .santa-eye:first-child { left: 0; }
.christmas-scene-wrapper .santa-eye:last-child { right: 0; }

/* Eye shine */
.christmas-scene-wrapper .santa-eye::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
}

@keyframes xmasSantaBlink {
    0%, 45%, 55%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Santa's Beard - Fluffy layers */
.christmas-scene-wrapper .santa-beard {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 28px;
    background: #fff;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    box-shadow:
        inset 0 -5px 10px rgba(200, 200, 200, 0.3),
        0 3px 5px rgba(0,0,0,0.15);
}

/* Beard fluffy edges */
.christmas-scene-wrapper .santa-beard::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -3px;
    right: -3px;
    height: 15px;
    background:
        radial-gradient(circle at 10% 50%, #fff 8px, transparent 8px),
        radial-gradient(circle at 30% 40%, #fff 7px, transparent 7px),
        radial-gradient(circle at 50% 50%, #fff 8px, transparent 8px),
        radial-gradient(circle at 70% 40%, #fff 7px, transparent 7px),
        radial-gradient(circle at 90% 50%, #fff 8px, transparent 8px);
}

/* Mustache */
.christmas-scene-wrapper .santa-mustache {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 8px;
}

.christmas-scene-wrapper .santa-mustache::before,
.christmas-scene-wrapper .santa-mustache::after {
    content: '';
    position: absolute;
    top: 0;
    width: 16px;
    height: 8px;
    background: #fff;
    border-radius: 50% 50% 0 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.christmas-scene-wrapper .santa-mustache::before {
    left: 0;
    transform: rotate(-10deg);
}

.christmas-scene-wrapper .santa-mustache::after {
    right: 0;
    transform: rotate(10deg) scaleX(-1);
}

/* Santa's Hat */
.christmas-scene-wrapper .santa-hat {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 35px;
}

/* Hat main part */
.christmas-scene-wrapper .santa-hat-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background: linear-gradient(135deg, #e83030 0%, #c41e1e 50%, #a01515 100%);
    border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    box-shadow: inset 2px 2px 4px rgba(255,255,255,0.2);
    transform-origin: bottom center;
    animation: xmasHatWobble 3s ease-in-out infinite;
}

@keyframes xmasHatWobble {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(3deg); }
    60% { transform: rotate(-3deg); }
}

/* Hat tip - droopy and cute */
.christmas-scene-wrapper .santa-hat-tip {
    position: absolute;
    top: -5px;
    right: -8px;
    width: 25px;
    height: 20px;
    background: linear-gradient(135deg, #e83030 0%, #c41e1e 100%);
    border-radius: 50% 50% 70% 30%;
    transform: rotate(45deg);
    animation: xmasTipSwing 3s ease-in-out infinite;
}

@keyframes xmasTipSwing {
    0%, 100% { transform: rotate(45deg); }
    50% { transform: rotate(55deg) translateX(2px); }
}

/* Pompom on hat */
.christmas-scene-wrapper .santa-hat-pompom {
    position: absolute;
    top: -2px;
    right: -15px;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 40% 40%, #fff 0%, #e8e8e8 50%, #d0d0d0 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: xmasPompomBounce 3s ease-in-out infinite;
}

@keyframes xmasPompomBounce {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, 2px); }
}

/* Hat fur trim */
.christmas-scene-wrapper .santa-hat-trim {
    position: absolute;
    bottom: -2px;
    left: -4px;
    right: -4px;
    height: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow:
        inset 0 -2px 4px rgba(200,200,200,0.4),
        0 2px 4px rgba(0,0,0,0.15);
}

/* Fluffy trim texture */
.christmas-scene-wrapper .santa-hat-trim::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 8px;
    background:
        radial-gradient(circle at 15% 60%, #fff 5px, transparent 5px),
        radial-gradient(circle at 35% 50%, #fff 4px, transparent 4px),
        radial-gradient(circle at 55% 60%, #fff 5px, transparent 5px),
        radial-gradient(circle at 75% 50%, #fff 4px, transparent 4px),
        radial-gradient(circle at 95% 60%, #fff 5px, transparent 5px);
}

/* Santa's Waving Hand */
.christmas-scene-wrapper .santa-hand {
    position: absolute;
    bottom: 15px;
    right: -18px;
    width: 18px;
    height: 22px;
    transform-origin: bottom center;
    animation: xmasSantaWave 1s ease-in-out infinite;
}

@keyframes xmasSantaWave {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(20deg); }
}

/* Hand/mitten */
.christmas-scene-wrapper .santa-hand::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 16px;
    background: linear-gradient(135deg, #c41e1e 0%, #a01515 100%);
    border-radius: 40% 40% 45% 45%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Mitten cuff */
.christmas-scene-wrapper .santa-hand::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 6px;
    background: #fff;
    border-radius: 3px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 420px) {
    .christmas-scene-wrapper {
        height: 380px;
    }

    .christmas-scene-wrapper .scene {
        height: 380px;
    }

    .christmas-scene-wrapper .window {
        width: 185px;
        height: 125px;
        border-radius: 6px;
    }

    .christmas-scene-wrapper .window-frame {
        border-width: 10px;
        border-radius: 6px;
    }

    .christmas-scene-wrapper .window-frame::before {
        width: 8px;
        top: -10px;
        bottom: -10px;
    }

    .christmas-scene-wrapper .window-frame::after {
        height: 8px;
        left: -10px;
        right: -10px;
    }

    .christmas-scene-wrapper .window-frost {
        border-radius: 4px;
    }

    .christmas-scene-wrapper .frost-nicknames {
        inset: 12px;
        gap: 10px;
    }

    .christmas-scene-wrapper .frost-name {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .christmas-scene-wrapper .window-sill {
        height: 14px;
        left: -12px;
        right: -12px;
        bottom: -12px;
    }

    .christmas-scene-wrapper .window-moon {
        width: 22px;
        height: 22px;
        top: 4%;
        right: 4%;
    }

    /* Teapot counter mobile */
    .christmas-scene-wrapper .teapot-counter {
        min-width: 16px;
        height: 14px;
        font-size: 11px;
        bottom: 6px;
    }

    .christmas-scene-wrapper .teapot-steam {
        top: -12px;
        width: 16px;
    }

    .christmas-scene-wrapper .steam-puff {
        width: 6px;
        height: 6px;
    }

    .christmas-scene-wrapper .sleigh-container {
        inset: 10px;
    }

    .christmas-scene-wrapper .sleigh-window {
        width: 75px;
        height: 45px;
    }

    /* String lights mobile */
    .christmas-scene-wrapper .string-lights-left,
    .christmas-scene-wrapper .string-lights-right {
        width: 20px;
        height: 80px;
        top: 42%;
    }

    .christmas-scene-wrapper .lights-mount {
        width: 14px;
        height: 10px;
        top: -6px;
    }

    .christmas-scene-wrapper .lights-mount::before {
        width: 5px;
        height: 5px;
        top: -3px;
    }

    .christmas-scene-wrapper .lights-mount::after {
        width: 6px;
        height: 5px;
    }

    .christmas-scene-wrapper .lights-wire {
        width: 2px;
        top: 6px;
        height: calc(100% - 6px);
    }

    .christmas-scene-wrapper .string-lights-left .lights-wire { left: 6px; }
    .christmas-scene-wrapper .string-lights-right .lights-wire { right: 6px; }

    .christmas-scene-wrapper .bulb {
        width: 8px;
        height: 11px;
    }

    .christmas-scene-wrapper .bulb::before {
        width: 5px;
        height: 4px;
        top: -3px;
    }

    .christmas-scene-wrapper .string-lights-left .bulb { left: 3px; }
    .christmas-scene-wrapper .string-lights-right .bulb { right: 3px; }

    .christmas-scene-wrapper .string-lights-left .bulb:nth-child(2),
    .christmas-scene-wrapper .string-lights-right .bulb:nth-child(2) { top: 6px; }
    .christmas-scene-wrapper .string-lights-left .bulb:nth-child(3),
    .christmas-scene-wrapper .string-lights-right .bulb:nth-child(3) { top: 24px; }
    .christmas-scene-wrapper .string-lights-left .bulb:nth-child(4),
    .christmas-scene-wrapper .string-lights-right .bulb:nth-child(4) { top: 42px; }
    .christmas-scene-wrapper .string-lights-left .bulb:nth-child(5),
    .christmas-scene-wrapper .string-lights-right .bulb:nth-child(5) { top: 60px; }

    .christmas-scene-wrapper .candle-body {
        width: 14px;
        height: 35px;
    }

    .christmas-scene-wrapper .fireplace {
        width: 180px;
        height: 130px;
    }

    .christmas-scene-wrapper .fire-opening {
        width: 100px;
        height: 80px;
    }

    .christmas-scene-wrapper .fire {
        width: 85px;
        height: 65px;
    }

    .christmas-scene-wrapper .mantle {
        width: 200px;
        bottom: 120px;
    }

    .christmas-scene-wrapper .candles {
        bottom: 135px;
        width: 170px;
    }

    /* Wall decorations mobile */
    .christmas-scene-wrapper .wall-painting {
        width: 55px;
        height: 55px;
        top: 10%;
        left: 3%;
    }

    .christmas-scene-wrapper .painting-inner {
        inset: 6px;
    }

    .christmas-scene-wrapper .painting-emoji {
        width: 30px;
        height: 30px;
    }

    .christmas-scene-wrapper .mini-tree {
        width: 45px;
        height: 75px;
        top: 4%;
        right: 3%;
    }

    .christmas-scene-wrapper .tree-body {
        width: 32px;
        height: 38px;
        bottom: 24px;
    }

    .christmas-scene-wrapper .tree-layer:nth-child(1) { width: 18px; height: 14px; bottom: 26px; }
    .christmas-scene-wrapper .tree-layer:nth-child(2) { width: 24px; height: 16px; bottom: 14px; }
    .christmas-scene-wrapper .tree-layer:nth-child(3) { width: 32px; height: 18px; }

    .christmas-scene-wrapper .tree-pot {
        width: 16px;
        height: 10px;
        bottom: 8px;
    }

    .christmas-scene-wrapper .tree-trunk {
        bottom: 16px;
    }

    .christmas-scene-wrapper .tree-shelf {
        width: 45px;
        height: 8px;
    }

    .christmas-scene-wrapper .tree-ornament { width: 4px; height: 4px; }
    .christmas-scene-wrapper .tree-light { width: 3px; height: 3px; }
    .christmas-scene-wrapper .tree-star { width: 8px; height: 8px; }

    .christmas-scene-wrapper .wall-shelf {
        display: none;
    }

    /* Firewood and cabinet mobile - XL proportional */
    .christmas-scene-wrapper .firewood-pile {
        width: 75px;
        height: 75px;
        left: 2%;
    }

    .christmas-scene-wrapper .firewood-log:nth-child(1) { width: 68px; height: 18px; }
    .christmas-scene-wrapper .firewood-log:nth-child(2) { width: 62px; height: 17px; left: 10px; }
    .christmas-scene-wrapper .firewood-log:nth-child(3) { width: 58px; height: 16px; left: 5px; }
    .christmas-scene-wrapper .firewood-log:nth-child(4) { width: 60px; height: 16px; bottom: 16px; left: 8px; }
    .christmas-scene-wrapper .firewood-log:nth-child(5) { width: 54px; height: 15px; bottom: 18px; left: 16px; }
    .christmas-scene-wrapper .firewood-log:nth-child(6) { width: 50px; height: 14px; bottom: 32px; left: 14px; }

    .christmas-scene-wrapper .firewood-log::before {
        width: 16px;
    }

    .christmas-scene-wrapper .firewood-log:nth-child(1)::after,
    .christmas-scene-wrapper .firewood-log:nth-child(3)::after,
    .christmas-scene-wrapper .firewood-log:nth-child(5)::after {
        width: 14px;
    }

    .christmas-scene-wrapper .tea-cabinet {
        width: 65px;
        height: 92px;
        right: 2%;
    }

    .christmas-scene-wrapper .cabinet-body {
        height: 70px;
    }

    .christmas-scene-wrapper .cabinet-top {
        bottom: 70px;
        width: 72px;
        height: 8px;
        left: -3px;
    }

    .christmas-scene-wrapper .teapot {
        bottom: 77px;
        width: 40px;
        height: 30px;
    }

    .christmas-scene-wrapper .teapot-body {
        width: 30px;
        height: 22px;
    }

    .christmas-scene-wrapper .teapot-body::before {
        width: 18px;
        height: 6px;
        top: -5px;
    }

    .christmas-scene-wrapper .teapot-body::after {
        width: 6px;
        height: 5px;
        top: -9px;
    }

    .christmas-scene-wrapper .teapot-spout {
        width: 14px;
        height: 8px;
        right: -6px;
        bottom: 11px;
    }

    .christmas-scene-wrapper .teapot-handle {
        width: 11px;
        height: 17px;
        left: -5px;
        bottom: 6px;
        border-width: 3px;
    }

    /* Santa mobile - smaller but still cute! */
    .christmas-scene-wrapper .santa-peek {
        width: 55px;
        height: 60px;
        bottom: 10%;
        left: 70%;
    }

    .christmas-scene-wrapper .santa-face {
        width: 36px;
        height: 36px;
    }

    .christmas-scene-wrapper .santa-face::before {
        width: 8px;
        height: 6px;
        box-shadow: 20px 0 0 rgba(255, 120, 120, 0.5);
    }

    .christmas-scene-wrapper .santa-face::after {
        width: 8px;
        height: 8px;
    }

    .christmas-scene-wrapper .santa-eyes {
        width: 20px;
        height: 6px;
    }

    .christmas-scene-wrapper .santa-eye {
        width: 5px;
        height: 5px;
    }

    .christmas-scene-wrapper .santa-beard {
        width: 40px;
        height: 22px;
    }

    .christmas-scene-wrapper .santa-mustache {
        width: 22px;
        height: 6px;
    }

    .christmas-scene-wrapper .santa-mustache::before,
    .christmas-scene-wrapper .santa-mustache::after {
        width: 12px;
        height: 6px;
    }

    .christmas-scene-wrapper .santa-hat {
        width: 38px;
        height: 28px;
    }

    .christmas-scene-wrapper .santa-hat-main {
        height: 22px;
    }

    .christmas-scene-wrapper .santa-hat-tip {
        width: 20px;
        height: 16px;
        right: -6px;
    }

    .christmas-scene-wrapper .santa-hat-pompom {
        width: 11px;
        height: 11px;
        right: -12px;
    }

    .christmas-scene-wrapper .santa-hat-trim {
        height: 8px;
        left: -3px;
        right: -3px;
    }

    .christmas-scene-wrapper .santa-hand {
        width: 14px;
        height: 18px;
        right: -14px;
        bottom: 12px;
    }

    .christmas-scene-wrapper .santa-hand::before {
        width: 11px;
        height: 13px;
    }

    .christmas-scene-wrapper .santa-hand::after {
        width: 13px;
        height: 5px;
        bottom: 10px;
    }
}

/* ============================================
   🚀 MOBILE PERFORMANCE - Lighter optimizations
   Keep animations but simplify heavy effects
   ============================================ */
@media (max-width: 768px) {
    /* Hide only the Lottie sleigh (very heavy) */
    .christmas-scene-wrapper .sleigh-container {
        display: none !important;
    }

    /* Simplify Santa animations (keep visible but simpler) */
    .christmas-scene-wrapper .santa-peek {
        animation: none !important;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .christmas-scene-wrapper * {
        animation: none !important;
    }
}