/* SNOWMAN ISOLATION */
#snowman,
#snowman * {
    box-sizing: content-box;
    /* Prevent global border-box interference */
    margin: 0;
    padding: 0;
    position: relative;
    /* Default relative for children unless specified */
}

#snowman.snowman-container {
    position: fixed;
    /* Keep fixed for main container */
    bottom: 20px;
    right: 20px;
    width: 200px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 50;
    transition: all 0.5s;
}

/* PARTS */
#snowman .ball,
#snowman .hat,
#snowman .eyes,
#snowman .nose,
#snowman .arm {
    opacity: 0;
    transition: opacity 1s, transform 0.5s;
    position: absolute;
    /* Enforce absolute */
}

/* --- VISUALS --- */
#snowman .ball {
    background: radial-gradient(circle at 30% 30%, #fff, #ddd);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1;
    position: relative;
    /* Override to relative for balls in stack */
}

#snowman .base {
    width: 120px;
    height: 120px;
    z-index: 1;
}

#snowman .body {
    width: 90px;
    height: 90px;
    margin-bottom: -20px;
    z-index: 2;
    position: relative;
}

#snowman .head {
    width: 70px;
    height: 70px;
    margin-bottom: -15px;
    z-index: 3;
    position: relative;
    transform-origin: center bottom;
}

/* DETAILS */
#snowman .nose {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 25px solid #e67e22;
    border-radius: 3px;
}

/* EYES - The Critical Part */
#snowman .eyes {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 10px;
    /* border: 1px solid lime; debug */
}

#snowman .eye {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #2c3e50;
    border-radius: 50%;
    overflow: hidden;
    /* Essential for pupils */
}

/* Signs moved to Advanced Features */

#snowman .eye.left {
    left: 0 !important;
    right: auto !important;
}

#snowman .eye.right {
    right: 0 !important;
    left: auto !important;
}

/* Pupil moved to Advanced Features */

#snowman .hat {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 40px;
    background: #2c3e50;
    border-bottom: 5px solid #c0392b;
}

#snowman .hat::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: -10px;
    width: 70px;
    height: 5px;
    background: #2c3e50;
    border-radius: 2px;
}

#snowman .arm {
    position: absolute;
    top: 30px;
    width: 60px;
    height: 5px;
    background: #795548;
    border-radius: 5px;
}

#snowman .arm.left {
    left: -50px;
    transform: rotate(-20deg);
    transform-origin: 100% 50%;
}

#snowman .arm.right {
    right: -50px;
    transform: rotate(20deg);
    transform-origin: 0% 50%;
}

/* --- ADVANCED FEATURES --- */

/* 1. Stare (Pupils) */
#snowman .eye {
    /* Base inherited from above, adding interaction specific overrides if need be */
    overflow: hidden;
    /* Essential for pupils */
}

#snowman .pupil {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
    /* Smooth tracking */
}

/* 2. Signs (RIP / Troll) */
#snowman .sign-container {
    position: absolute;
    left: -80px;
    /* Hold to left */
    bottom: 0px;
    width: 60px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-10deg);
    transform-origin: bottom center;
    opacity: 0;
    transition: opacity 0.5s;
}

#snowman .sign-container.visible {
    opacity: 1;
}

#snowman .sign-stick {
    width: 4px;
    height: 40px;
    background: #8B4513;
    /* Wood */
}

#snowman .sign-board {
    background: #D2B48C;
    /* Tan wood */
    border: 2px solid #8B4513;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    color: #4B0082;
    /* Ink color */
    text-align: center;
    width: 100%;
}

/* --- STAGES (Applied via JS) --- */
/* --- STAGES (Applied via JS) --- */
/* State 1: Base */
#snowman.state-1 .base {
    opacity: 1;
    animation: popIn 0.5s;
}

#snowman.state-2 .base,
#snowman.state-2 .body {
    opacity: 1;
    animation: popIn 0.5s;
}

#snowman.state-3 .base,
#snowman.state-3 .body,
#snowman.state-3 .head {
    opacity: 1;
}

#snowman.state-4 .base,
#snowman.state-4 .body,
#snowman.state-4 .head,
#snowman.state-4 .eyes,
#snowman.state-4 .eye.right {
    opacity: 1;
}

#snowman.state-5 .base,
#snowman.state-5 .body,
#snowman.state-5 .head,
#snowman.state-5 .eyes,
#snowman.state-5 .eye.right,
#snowman.state-5 .eye.left {
    opacity: 1;
}

#snowman.state-6 .base,
#snowman.state-6 .body,
#snowman.state-6 .head,
#snowman.state-6 .eyes,
#snowman.state-6 .nose {
    opacity: 1;
}

#snowman.state-7 .base,
#snowman.state-7 .body,
#snowman.state-7 .head,
#snowman.state-7 .eyes,
#snowman.state-7 .nose,
#snowman.state-7 .arm.right {
    opacity: 1;
}

#snowman.state-8 .base,
#snowman.state-8 .body,
#snowman.state-8 .head,
#snowman.state-8 .eyes,
#snowman.state-8 .nose,
#snowman.state-8 .arm.right,
#snowman.state-8 .arm.left {
    opacity: 1;
}

#snowman.state-9 .base,
#snowman.state-9 .body,
#snowman.state-9 .head,
#snowman.state-9 .eyes,
#snowman.state-9 .nose,
#snowman.state-9 .arm.right,
#snowman.state-9 .arm.left,
#snowman.state-9 .hat {
    opacity: 1;
}

/* State 10: Full */
#snowman.state-10 .ball,
#snowman.state-10 .details,
#snowman.state-10 .hat,
#snowman.state-10 .eyes,
#snowman.state-10 .nose,
#snowman.state-10 .arm {
    opacity: 1;
}

#snowman.state-10 {
    pointer-events: auto;
    cursor: pointer;
}

/* Enable interactions */

/* --- ANIMATIONS (Shared) --- */
@keyframes popIn {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-5deg);
    }

    75% {
        transform: translateX(5px) rotate(5deg);
    }
}

@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes noseDrop {
    0% {
        transform: translateX(-50%) translateY(0) rotate(0);
    }

    100% {
        transform: translateX(-50%) translateY(100px) rotate(180deg);
        opacity: 0;
    }
}

/* --- INTERACTIVE CLASSES --- */
/* --- INTERACTIVE CLASSES --- */
#snowman.shaking {
    animation: shake 0.5s infinite;
}

#snowman.jumping {
    animation: jump 0.5s infinite;
}

#snowman .nose.dropped {
    animation: noseDrop 0.5s forwards;
}

/* --- SPEECH BUBBLE --- */
#snowman .bubble {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    padding: 10px;
    border-radius: 10px;
    width: 140px;
    text-align: center;
    font-size: 16px;
    /* Increased by ~30% */
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 100;
}

#snowman .bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #fff transparent;
}

#snowman .bubble.visible {
    opacity: 1;
}

/* ... (Pupils/Sign are structural, assumed safe inside #snowman due to previous catch-all) */

/* 3. Boxing Gloves */
#snowman .glove {
    position: absolute;
    width: 25px;
    height: 25px;
    background: red;
    border-radius: 50%;
    display: none;
}

#snowman .glove.left {
    left: -10px;
    top: 30%;
}

#snowman .glove.right {
    right: -10px;
    top: 30%;
}

#snowman.boxer .arm {
    display: none;
}

#snowman.boxer .glove {
    display: block;
}

#snowman.boxer .glove.left {
    animation: punchLeft 0.5s infinite;
}

#snowman.boxer .glove.right {
    animation: punchRight 0.5s infinite;
}


/* 4. Rocket Man */
#snowman.rocket-mode {
    animation: rocketLaunch 4s forwards;
}

#snowman.soot {
    filter: brightness(0.2) sepia(1) hue-rotate(0deg) saturate(0);
}

/* 5. Hiding Eyes */
#snowman.hiding-eyes .arm.left {
    transform: rotate(130deg) translateX(30px) translateY(-40px);
}

#snowman.hiding-eyes .arm.right {
    transform: rotate(-130deg) translateX(-30px) translateY(-40px);
}

/* 6. Allergy */
#snowman.sneezing .head {
    animation: sneezeJump 0.5s;
}

/* 7. Glitch */
#snowman.glitch-mode {
    animation: glitch-anim 0.2s infinite;
    filter: contrast(200%) hue-rotate(90deg);
}

/* --- RESTORED KEYFRAMES --- */
@keyframes punchLeft {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }
}

@keyframes punchRight {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }
}

@keyframes rocketLaunch {
    0% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(10px);
    }

    /* Compress */
    40% {
        transform: translateY(-300px);
        opacity: 1;
    }

    /* Fly up */
    45% {
        transform: translateY(-300px);
        opacity: 0;
    }

    50% {
        transform: translateY(0);
        opacity: 0;
    }

    /* Reset pos hidden */
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sneezeJump {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(5px) rotate(-10deg);
    }

    /* Inhale */
    50% {
        transform: translateY(-50px) rotate(10deg);
    }

    /* ACHOO */
    100% {
        transform: translateY(0);
    }
}

@keyframes glitch-anim {
    0% {
        transform: translate(0) skew(0deg);
        clip-path: inset(0 0 0 0);
    }

    20% {
        transform: translate(-2px, 2px) skew(10deg);
        clip-path: inset(10% 0 80% 0);
    }

    40% {
        transform: translate(2px, -2px) skew(-10deg);
        clip-path: inset(80% 0 10% 0);
    }

    60% {
        transform: translate(-2px, 2px) skew(5deg);
        clip-path: inset(40% 0 40% 0);
    }

    80% {
        transform: translate(2px, -2px) skew(-5deg);
        clip-path: inset(0 0 0 0);
    }

    100% {
        transform: translate(0) skew(0deg);
    }
}

/* 8. Balloon Head */
@keyframes bloat {
    0% {
        transform: scale(1);
    }

    95% {
        transform: scale(3);
    }

    /* Enormous */
    100% {
        transform: scale(0);
        opacity: 0;
    }

    /* POP */
}

#snowman.balloon-mode .head {
    animation: bloat 10s forwards;
    /* Duration controlled by JS logic really, but generic 10s base */
    transform-origin: bottom center;
}

/* 9. Zombified */
#snowman.zombie-mode .ball {
    background: #90EE90 !important;
    /* Pale green */
    box-shadow: inset -10px -10px 20px #2E8B57;
}

#snowman.zombie-mode .eye {
    background: #000;
}

#snowman.zombie-mode .pupil {
    background: #FF0000;
    box-shadow: 0 0 5px red;
}

#snowman.zombie-mode .arm {
    transform: rotate(160deg) !important;
    /* Droopy */
}

/* 10. Zero Gravity */
@keyframes floatUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-150px) rotate(5deg);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes kickLegs {

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

    50% {
        transform: scale(1.1) skewX(10deg);
    }
}

#snowman.zero-g-mode {
    animation: floatUp 30s ease-in-out;
}

#snowman.zero-g-mode .base {
    animation: kickLegs 0.5s infinite;
}

/* 11. Disco Mode */
@keyframes discoColor {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

#snowman.disco-mode {
    animation: discoColor 1s infinite, jump 0.4s infinite;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 800px) {
    #snowman.snowman-container {
        transform: scale(0.6) !important;
        transform-origin: bottom right !important;
        right: 10px !important;
        bottom: 10px !important;
    }
}