* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    max-height: 100vh;
    background: linear-gradient(135deg, #DC143C 0%, #FFD700 50%, #DC143C 100%);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 215, 0, 0.1) 10px,
            rgba(255, 215, 0, 0.1) 20px
        );
    pointer-events: none;
}

.container {
    text-align: center;
    position: relative;
    z-index: 10;
}

.title {
    font-size: 6.5rem;
    color: #FFD700;
    text-shadow: 
        5px 5px 15px rgba(0,0,0,0.8),
        -2px -2px 0 #DC143C,
        2px -2px 0 #DC143C,
        -2px 2px 0 #DC143C,
        2px 2px 0 #DC143C,
        0 0 30px rgba(255, 215, 0, 0.8);
    margin-bottom: 40px;
    letter-spacing: 3px;
    animation: glow 2s ease-in-out infinite alternate;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: bold;
    white-space: nowrap;
    display: inline-block;
    width: auto;
}

.title-separator {
    color: #FFA500;
    margin: 0 15px;
}

@keyframes glow {
    from { 
        text-shadow: 
            3px 3px 10px rgba(0,0,0,0.5),
            -1px -1px 0 #DC143C,
            1px -1px 0 #DC143C,
            -1px 1px 0 #DC143C,
            1px 1px 0 #DC143C,
            0 0 20px #FFD700;
    }
    to { 
        text-shadow: 
            3px 3px 10px rgba(0,0,0,0.5),
            -1px -1px 0 #DC143C,
            1px -1px 0 #DC143C,
            -1px 1px 0 #DC143C,
            1px 1px 0 #DC143C,
            0 0 30px #FFD700,
            0 0 40px #FF6347;
    }
}

.carrot-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.carrot-container:hover {
    transform: scale(1.1);
}

.carrot {
    position: relative;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.carrot-body {
    width: 80px;
    height: 200px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    clip-path: polygon(50% 100%, 20% 0%, 80% 0%);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.carrot-body::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.1) 10px,
        rgba(0,0,0,0.1) 12px
    );
    clip-path: inherit;
}

.carrot-leaves {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.leaf {
    width: 20px;
    height: 40px;
    background: linear-gradient(135deg, #4caf50, #8bc34a);
    border-radius: 0 100% 0 100%;
    position: relative;
    animation: leafWave 2s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.leaf:nth-child(1) { animation-delay: 0s; }
.leaf:nth-child(2) { animation-delay: 0.2s; transform: rotate(-15deg); }
.leaf:nth-child(3) { animation-delay: 0.4s; transform: rotate(15deg); }

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

.instruction {
    color: #FFD700;
    font-size: 1.2rem;
    margin-top: 30px;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-weight: bold;
}

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall linear;
}

@keyframes confettiFall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.sparkles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: sparkleAnim 1s ease-out forwards;
}

@keyframes sparkleAnim {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0;
    }
}

.party-mode {
    animation: partyBackground 0.5s ease-in-out infinite;
}

@keyframes partyBackground {
    0%, 100% { background: linear-gradient(135deg, #DC143C 0%, #FFD700 50%, #DC143C 100%); }
    25% { background: linear-gradient(135deg, #FFD700 0%, #FF6347 50%, #FFD700 100%); }
    50% { background: linear-gradient(135deg, #FF4500 0%, #FFD700 50%, #FF4500 100%); }
    75% { background: linear-gradient(135deg, #DC143C 0%, #FFA500 50%, #DC143C 100%); }
}

.dancing {
    animation: dance 0.5s ease-in-out infinite !important;
}

@keyframes dance {
    0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
    25% { transform: translateY(-30px) rotate(5deg) scale(1.1); }
    50% { transform: translateY(0) rotate(-5deg) scale(1); }
    75% { transform: translateY(-15px) rotate(5deg) scale(1.05); }
}

.emoji {
    position: absolute;
    font-size: 30px;
    animation: emojiFloat 3s ease-out forwards;
    pointer-events: none;
    z-index: 101;
}

@keyframes emojiFloat {
    0% {
        transform: translateY(0) scale(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-200px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-400px) scale(0.5);
        opacity: 0;
    }
}

.disco-ball {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%, #fff, #silver, #888);
    border-radius: 50%;
    animation: discoBall 2s linear infinite;
    display: none;
    z-index: 5;
}

.party-active .disco-ball {
    display: block;
}

@keyframes discoBall {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

/* Traditional Chinese Hat */
.asian-hat {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hat-top {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 50px solid #8B4513;
    position: relative;
}

.hat-top::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-bottom: 45px solid #A0522D;
    top: 3px;
    left: -55px;
}

.hat-ribbon {
    width: 120px;
    height: 8px;
    background: #DC143C;
    position: absolute;
    bottom: -8px;
    left: -60px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Eyes as thin lines */
.eye {
    position: absolute;
    width: 15px;
    height: 2px;
    background: #000;
    top: 30px;
}

.left-eye {
    left: 20px;
}

.right-eye {
    right: 20px;
}

/* Arms as stick lines */
.arm {
    position: absolute;
    width: 2px;
    height: 40px;
    background: #000;
    top: 80px;
    transform-origin: top center;
}

.left-arm {
    left: -10px;
    transform: rotate(-30deg);
    animation: leftArmWave 2s ease-in-out infinite;
}

.right-arm {
    right: -10px;
    transform: rotate(30deg);
    animation: rightArmWave 2s ease-in-out infinite;
}

@keyframes leftArmWave {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(-50deg); }
}

@keyframes rightArmWave {
    0%, 100% { transform: rotate(30deg); }
    50% { transform: rotate(50deg); }
}

/* Legs as stick lines */
.leg {
    position: absolute;
    width: 2px;
    height: 40px;
    background: #000;
    bottom: -40px;
    transform-origin: top center;
}

.left-leg {
    left: 25px;
    animation: leftLegWalk 1s ease-in-out infinite;
}

.right-leg {
    right: 25px;
    animation: rightLegWalk 1s ease-in-out infinite;
}

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

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

/* Add dancing animation for arms and legs */
.dancing .left-arm {
    animation: danceLeftArm 0.5s ease-in-out infinite !important;
}

.dancing .right-arm {
    animation: danceRightArm 0.5s ease-in-out infinite !important;
}

.dancing .left-leg {
    animation: danceLeftLeg 0.5s ease-in-out infinite !important;
}

.dancing .right-leg {
    animation: danceRightLeg 0.5s ease-in-out infinite !important;
}

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

@keyframes danceRightArm {
    0%, 100% { transform: rotate(60deg); }
    50% { transform: rotate(20deg); }
}

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

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

/* Chinese text styling */
.chinese-text {
    font-size: 1em;
    font-weight: bold;
    display: inline;
}

.english-text {
    font-size: 1em;
    display: inline;
}

/* Chinese decorations - Full screen backdrop layer */
.chinese-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* Chinese Lanterns */
.lantern {
    position: absolute;
    width: 60px;
    height: 80px;
    background: linear-gradient(180deg, #DC143C 0%, #FF6347 50%, #DC143C 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 
        inset 0 0 20px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 0, 0, 0.5);
    animation: floatLantern 15s ease-in-out infinite, driftSlow 12s ease-in-out infinite;
}

.lantern::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 15px;
    background: #FFD700;
    top: -8px;
    left: 0;
    border-radius: 50%;
}

.lantern::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #FFD700;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 50% 50%;
}

.lantern-1 {
    top: 10%;
    left: 5vw;
    animation-delay: 0s;
    animation: floatLantern 15s ease-in-out infinite, gentleWave 8s ease-in-out infinite;
}

.lantern-2 {
    top: 12%;
    left: 62vw;
    animation-delay: 5s;
    animation: floatLantern 15s ease-in-out infinite 5s, floatHorizontal 10s ease-in-out infinite 3s;
}

.lantern-3 {
    top: 60%;
    left: 35vw;
    animation-delay: 10s;
    animation: floatLantern 15s ease-in-out infinite 10s, driftMedium 14s ease-in-out infinite 5s;
}

@keyframes floatLantern {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-30px) rotate(5deg); }
}

/* Chinese Clouds */
.cloud {
    position: absolute;
    width: 100px;
    height: 40px;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 100px;
    opacity: 0.6;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 100px;
}

.cloud::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 10px;
}

.cloud::after {
    width: 60px;
    height: 40px;
    top: -15px;
    right: 10px;
}

.cloud-1 {
    top: 20%;
    left: -10vw;
    animation: driftCloud 30s linear infinite, floatVertical 8s ease-in-out infinite 2s;
}

.cloud-2 {
    top: 65%;
    left: 95vw;
    animation: driftCloudReverse 25s linear infinite, gentleWave 10s ease-in-out infinite 3s;
}

@keyframes driftCloud {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 10vw)); }
}

@keyframes driftCloudReverse {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100vw - 100px)); }
}

/* Yin-Yang Symbol */
.yin-yang {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 8%;
    left: 85vw;
    background: linear-gradient(90deg, #000 50%, #fff 50%);
    border-radius: 50%;
    border: 2px solid #FFD700;
    animation: rotateYinYang 10s linear infinite, floatCircular 18s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.yin-yang::before,
.yin-yang::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.yin-yang::before {
    background: #fff;
    top: 0;
    border: 10px solid #000;
}

.yin-yang::after {
    background: #000;
    bottom: 0;
    border: 10px solid #fff;
}

@keyframes rotateYinYang {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Lucky Character */
.lucky-character {
    position: absolute;
    font-size: 60px;
    color: #FFD700;
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.5),
        0 0 20px rgba(255, 215, 0, 0.5);
    bottom: 10%;
    right: 10%;
    animation: pulseLucky 3s ease-in-out infinite, floatCircular 20s ease-in-out infinite 5s;
    font-weight: bold;
    transform: rotate(15deg);
}

@keyframes pulseLucky {
    0%, 100% { transform: rotate(15deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.2); }
}

/* Additional Chaotic Lanterns */
.lantern-4 {
    top: 25%;
    left: 75%;
    animation-delay: 2s;
    background: linear-gradient(180deg, #228B22 0%, #32CD32 50%, #228B22 100%);
    animation: floatLantern 15s ease-in-out infinite 2s, floatVertical 9s ease-in-out infinite 1s;
}

.lantern-5 {
    top: 68%;
    left: 88vw;
    animation-delay: 7s;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    animation: floatLantern 15s ease-in-out infinite 7s, floatCircular 16s ease-in-out infinite 2s;
}

.lantern-6 {
    top: 40%;
    left: 12vw;
    animation-delay: 12s;
    background: linear-gradient(180deg, #8A2BE2 0%, #9370DB 50%, #8A2BE2 100%);
    animation: floatLantern 15s ease-in-out infinite 12s, driftFast 11s ease-in-out infinite 4s;
}

.lantern-7 {
    top: 82%;
    left: 75vw;
    animation-delay: 4s;
    background: linear-gradient(180deg, #FF69B4 0%, #FF1493 50%, #FF69B4 100%);
    animation: floatLantern 15s ease-in-out infinite 4s, floatElliptical 13s ease-in-out infinite 6s;
}

.lantern-8 {
    top: 5%;
    left: 25vw;
    animation-delay: 9s;
    background: linear-gradient(180deg, #00CED1 0%, #20B2AA 50%, #00CED1 100%);
    animation: floatLantern 15s ease-in-out infinite 9s, gentleWave 7s ease-in-out infinite 3s;
}

/* Dragons */
.dragon {
    position: absolute;
    font-size: 80px;
    color: #FFD700;
    animation: floatDragon 20s linear infinite;
    z-index: 2;
}

.dragon-1 {
    top: 20%;
    left: -8vw;
    animation: floatDragon 20s linear infinite, gentleWave 9s ease-in-out infinite 2s;
}

.dragon-2 {
    top: 72%;
    left: 92vw;
    animation: floatDragonReverse 25s linear infinite, floatVertical 11s ease-in-out infinite 3s;
}

@keyframes floatDragon {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(calc(100vw + 8vw)) rotate(360deg); }
}

@keyframes floatDragonReverse {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(calc(-100vw - 50px)) rotate(-360deg); }
}

.dragon-1::before {
    content: '🐉';
}

.dragon-2::before {
    content: '🐲';
}

/* Phoenix */
.phoenix {
    position: absolute;
    font-size: 60px;
    animation: floatPhoenix 18s ease-in-out infinite;
    z-index: 3;
}

.phoenix-1 {
    top: 30%;
    left: 40vw;
    animation: floatPhoenix 18s ease-in-out infinite, driftMedium 15s ease-in-out infinite 4s;
}

.phoenix-1::before {
    content: '🦅';
    filter: hue-rotate(45deg);
}

@keyframes floatPhoenix {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    25% { transform: translateY(-50px) translateX(100px) rotate(90deg); }
    50% { transform: translateY(-100px) translateX(200px) rotate(180deg); }
    75% { transform: translateY(-50px) translateX(100px) rotate(270deg); }
}

/* Fans */
.fan {
    position: absolute;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #DC143C, #FFD700);
    border-radius: 50%;
    animation: spinFan 5s linear infinite;
}

.fan-1 {
    top: 15%;
    left: 22vw;
    animation-delay: 1s;
    animation: spinFan 5s linear infinite 1s, driftSlow 10s ease-in-out infinite 2s;
}

.fan-2 {
    top: 78%;
    left: 67vw;
    animation-delay: 3s;
    animation: spinFan 5s linear infinite 3s, floatHorizontal 11s ease-in-out infinite 1s;
}

@keyframes spinFan {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Pagoda */
.pagoda {
    position: absolute;
    width: 30px;
    height: 60px;
    background: linear-gradient(180deg, #8B4513 0%, #D2691E 100%);
    animation: swayPagoda 8s ease-in-out infinite;
}

.pagoda-1 {
    top: 40%;
    left: 3vw;
    animation: swayPagoda 8s ease-in-out infinite, floatVertical 12s ease-in-out infinite 2s;
}

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

.pagoda::before {
    content: '🏯';
    position: absolute;
    font-size: 40px;
    top: -10px;
    left: -5px;
}

/* Bamboo */
.bamboo {
    position: absolute;
    width: 8px;
    height: 80px;
    background: linear-gradient(180deg, #228B22 0%, #32CD32 100%);
    animation: swayBamboo 6s ease-in-out infinite;
}

.bamboo-1 {
    top: 18%;
    left: 79vw;
    animation-delay: 2s;
    animation: swayBamboo 6s ease-in-out infinite 2s, gentleWave 10s ease-in-out infinite 1s;
}

.bamboo-2 {
    top: 60%;
    left: 28vw;
    animation-delay: 4s;
    animation: swayBamboo 6s ease-in-out infinite 4s, driftSlow 12s ease-in-out infinite 2s;
}

@keyframes swayBamboo {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Lotus */
.lotus {
    position: absolute;
    font-size: 40px;
    animation: floatLotus 12s ease-in-out infinite;
}

.lotus-1 {
    top: 50%;
    left: 15vw;
    animation: floatLotus 12s ease-in-out infinite, floatVertical 8s ease-in-out infinite 2s;
}

.lotus-2 {
    top: 28%;
    left: 91vw;
    animation-delay: 6s;
    animation: floatLotus 12s ease-in-out infinite 6s, driftMedium 14s ease-in-out infinite 3s;
}

.lotus-1::before,
.lotus-2::before {
    content: '🪷';
}

@keyframes floatLotus {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* More Yin-Yangs */
.yin-yang-2 {
    top: 35%;
    left: 71vw;
    animation-delay: 3s;
    animation: rotateYinYang 10s linear infinite 3s, driftMedium 15s ease-in-out infinite 1s;
}

.yin-yang-3 {
    top: 58%;
    left: 64vw;
    animation-delay: 8s;
    animation: rotateYinYang 10s linear infinite 8s, floatVertical 12s ease-in-out infinite 4s;
}

/* Chinese Characters */
.chinese-character {
    position: absolute;
    font-size: 50px;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: floatCharacter 15s ease-in-out infinite;
    font-weight: bold;
}

.char-1 { top: 15%; left: 8vw; animation-delay: 1s; animation: floatCharacter 15s ease-in-out infinite 1s, gentleWave 9s ease-in-out infinite 3s; }
.char-2 { top: 42%; left: 83vw; animation-delay: 3s; animation: floatCharacter 15s ease-in-out infinite 3s, driftSlow 13s ease-in-out infinite 2s; }
.char-3 { top: 65%; left: 45vw; animation-delay: 5s; animation: floatCharacter 15s ease-in-out infinite 5s, floatVertical 8s ease-in-out infinite 1s; }
.char-4 { top: 38%; left: 69vw; animation-delay: 7s; animation: floatCharacter 15s ease-in-out infinite 7s, floatElliptical 14s ease-in-out infinite 4s; }
.char-5 { top: 80%; left: 18vw; animation-delay: 9s; animation: floatCharacter 15s ease-in-out infinite 9s, driftMedium 11s ease-in-out infinite 2s; }
.char-6 { top: 52%; left: 87vw; animation-delay: 11s; animation: floatCharacter 15s ease-in-out infinite 11s, floatCircular 16s ease-in-out infinite 3s; }

@keyframes floatCharacter {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    33% { transform: translateY(-30px) rotate(120deg) scale(1.1); }
    66% { transform: translateY(-60px) rotate(240deg) scale(0.9); }
}

/* Dumplings */
.dumpling {
    position: absolute;
    font-size: 30px;
    animation: bounceDumpling 4s ease-in-out infinite;
}

.dumpling-1 {
    top: 48%;
    left: 76vw;
    animation-delay: 2s;
    animation: bounceDumpling 4s ease-in-out infinite 2s, gentleWave 7s ease-in-out infinite 1s;
}

.dumpling-2 {
    top: 25%;
    left: 55vw;
    animation-delay: 5s;
    animation: bounceDumpling 4s ease-in-out infinite 5s, driftSlow 12s ease-in-out infinite 2s;
}

.dumpling-1::before,
.dumpling-2::before {
    content: '🥟';
}

@keyframes bounceDumpling {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-40px); }
}

/* Tea Cup */
.teacup {
    position: absolute;
    font-size: 35px;
    animation: steamTea 6s ease-in-out infinite;
}

.teacup-1 {
    top: 22%;
    left: 73vw;
    animation: steamTea 6s ease-in-out infinite, floatVertical 10s ease-in-out infinite 2s;
}

.teacup-1::before {
    content: '🍵';
}

@keyframes steamTea {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Chinese Coins */
.coin {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #FFD700;
    border-radius: 50%;
    animation: spinCoin 3s linear infinite;
}

.coin-1 {
    top: 35%;
    left: 6vw;
    animation-delay: 1s;
    animation: spinCoin 3s linear infinite 1s, floatHorizontal 9s ease-in-out infinite 2s;
}

.coin-2 {
    top: 88%;
    left: 81vw;
    animation-delay: 2s;
    animation: spinCoin 3s linear infinite 2s, driftFast 11s ease-in-out infinite 1s;
}

.coin-3 {
    top: 32%;
    left: 93vw;
    animation-delay: 4s;
    animation: spinCoin 3s linear infinite 4s, floatCircular 15s ease-in-out infinite 3s;
}

@keyframes spinCoin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.coin::before {
    content: '💰';
    position: absolute;
    font-size: 25px;
    top: -5px;
    left: -5px;
}

/* Fireworks */
.firework {
    position: absolute;
    font-size: 40px;
    color: #FFD700;
    animation: explodeFirework 2s ease-out infinite;
}

.firework-1 {
    top: 5%;
    left: 66vw;
    animation-delay: 0s;
    animation: explodeFirework 2s ease-out infinite, driftMedium 13s ease-in-out infinite 1s;
}

.firework-2 {
    top: 30%;
    left: 4vw;
    animation-delay: 1s;
    animation: explodeFirework 2s ease-out infinite 1s, gentleWave 8s ease-in-out infinite 2s;
}

.firework-3 {
    top: 92%;
    left: 78vw;
    animation-delay: 2s;
    animation: explodeFirework 2s ease-out infinite 2s, floatElliptical 16s ease-in-out infinite 4s;
}

@keyframes explodeFirework {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(2) rotate(360deg); opacity: 0; }
}

/* New Movement Animations */
@keyframes driftSlow {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -15px); }
    50% { transform: translate(-10px, -25px); }
    75% { transform: translate(-20px, 10px); }
}

@keyframes driftMedium {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -20px); }
    66% { transform: translate(-25px, 15px); }
}

@keyframes driftFast {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(40px, -30px); }
    40% { transform: translate(-30px, -40px); }
    60% { transform: translate(-40px, 20px); }
    80% { transform: translate(25px, 30px); }
}

@keyframes floatHorizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(60px); }
}

@keyframes floatVertical {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-40px); }
}

@keyframes floatCircular {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(25px, -25px) rotate(90deg); }
    50% { transform: translate(0, -50px) rotate(180deg); }
    75% { transform: translate(-25px, -25px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes floatElliptical {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(35px, -15px); }
    50% { transform: translate(50px, 0); }
    75% { transform: translate(35px, 15px); }
}

@keyframes gentleWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(5deg); }
    66% { transform: translateY(10px) rotate(-3deg); }
}

/* Scroll */
.scroll {
    position: absolute;
    width: 40px;
    height: 60px;
    background: #F5DEB3;
    animation: unfurlScroll 8s ease-in-out infinite;
}

.scroll-1 {
    top: 50%;
    left: 9vw;
    animation: unfurlScroll 8s ease-in-out infinite, driftSlow 14s ease-in-out infinite 3s;
}

@keyframes unfurlScroll {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

.scroll::before {
    content: '📜';
    position: absolute;
    font-size: 35px;
    top: -5px;
    left: -5px;
}

/* Chopsticks */
.chopsticks {
    position: absolute;
    font-size: 30px;
    animation: twirleChopsticks 5s linear infinite;
}

.chopsticks-1 {
    top: 15%;
    left: 89vw;
    animation: twirleChopsticks 5s linear infinite, floatHorizontal 11s ease-in-out infinite 3s;
}

.chopsticks-1::before {
    content: '🥢';
}

@keyframes twirleChopsticks {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Jump Animation */
.super-jump {
    animation: superJump 1.5s ease-out !important;
}

@keyframes superJump {
    0% { 
        transform: translateY(0) scale(1, 1) rotate(0deg); 
    }
    10% { 
        transform: translateY(0) scale(1.1, 0.9) rotate(0deg); 
    }
    30% { 
        transform: translateY(-200px) scale(0.9, 1.1) rotate(180deg); 
    }
    50% { 
        transform: translateY(-250px) scale(1, 1) rotate(360deg); 
    }
    70% { 
        transform: translateY(-150px) scale(0.95, 1.05) rotate(540deg); 
    }
    80% { 
        transform: translateY(0) scale(1.05, 0.95) rotate(720deg); 
    }
    90% { 
        transform: translateY(-30px) scale(0.98, 1.02) rotate(720deg); 
    }
    100% { 
        transform: translateY(0) scale(1, 1) rotate(720deg); 
    }
}

/* Bubble Effects */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3),
        rgba(255, 215, 0, 0.2),
        rgba(255, 255, 255, 0.4)
    );
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: floatBubble 3s ease-out forwards;
    pointer-events: none;
    z-index: 102;
}

.bubble::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
}

@keyframes floatBubble {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    90% {
        transform: translateY(-400px) translateX(50px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-450px) translateX(60px) scale(1.5);
        opacity: 0;
    }
}

/* Confetti Burst */
.confetti-burst {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    animation: confettiBurst 1.5s ease-out forwards;
    z-index: 103;
}

@keyframes confettiBurst {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* Firework Effects */
.firework-trail {
    position: absolute;
    width: 3px;
    height: 30px;
    background: linear-gradient(to top, transparent, #FFD700, #FF6347);
    pointer-events: none;
    transition: transform 0.5s ease-out;
    z-index: 104;
}

.firework-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    animation: fireworkSpark 2s ease-out forwards;
    box-shadow: 0 0 6px currentColor;
    z-index: 105;
}

@keyframes fireworkSpark {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(var(--fx), var(--fy)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--fx), calc(var(--fy) + 100px)) scale(0.3);
        opacity: 0;
    }
}

/* Ripple Effect */
.ripple {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 3px solid #FFD700;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rippleExpand 1s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes rippleExpand {
    0% {
        width: 50px;
        height: 50px;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Score Popup */
.score-popup {
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.5),
        0 0 10px rgba(255, 215, 0, 0.5);
    animation: scoreFloat 1.5s ease-out forwards;
    pointer-events: none;
    z-index: 106;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

@keyframes scoreFloat {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.5) rotate(10deg);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1) rotate(-5deg);
    }
    100% {
        transform: translate(-50%, -150%) scale(0.8) rotate(0deg);
        opacity: 0;
    }
}

/* Screen Shake */
.shake {
    animation: screenShake 0.5s ease-in-out;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-10px) rotate(0.5deg); }
    20% { transform: translateX(10px) rotate(-0.5deg); }
    30% { transform: translateX(-8px) rotate(0.3deg); }
    40% { transform: translateX(8px) rotate(-0.3deg); }
    50% { transform: translateX(-6px) rotate(0.2deg); }
    60% { transform: translateX(6px) rotate(-0.2deg); }
    70% { transform: translateX(-4px) rotate(0.1deg); }
    80% { transform: translateX(4px) rotate(-0.1deg); }
    90% { transform: translateX(-2px); }
}

/* CLICKER GAME STYLES */

/* Top Action Bar */
.top-action-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 3px solid #FFD700;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    z-index: 1001;
}

.copy-section-only {
    display: flex;
    align-items: center;
    gap: 10px;
}

#copy-text {
    background: rgba(255, 215, 0, 0.15);
    border: 3px solid #FFD700;
    color: #FFD700;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1.2rem;
    font-weight: bold;
    width: 500px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

#copy-text:focus {
    outline: none;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    transform: scale(1.02);
}

.copy-btn {
    background: #FFD700;
    border: none;
    color: #000;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.copy-btn:hover {
    background: #FFA500;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

.copy-notification {
    position: fixed;
    top: 60px;
    right: 20px;
    background: #00FF00;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    z-index: 1002;
    animation: slideInNotification 0.3s ease-out;
}

@keyframes slideInNotification {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Game Container */
.game-container {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding-top: 20px;
}

/* Left Panel - Decorations */
.left-decorations {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    z-index: 10;
}

/* Center Panel - Carrot Area */
.center-panel {
    flex: 1;
    min-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    z-index: 50;
}

.click-power {
    color: #FFD700;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Right Panel - Shop */
.right-panel {
    width: 400px;
    background: rgba(0, 0, 0, 0.7);
    border-left: 3px solid #FFD700;
    overflow-y: auto;
    height: calc(100vh - 40px);
    padding: 20px;
    position: relative;
    z-index: 1500;
    pointer-events: auto;
}

.shop-header {
    margin-bottom: 20px;
}

.shop-header h2 {
    color: #FFD700;
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-align: center;
}

.shop-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.shop-content {
    display: block;
    min-height: 200px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    pointer-events: auto;
    position: relative;
    z-index: 1600;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid #FFD700;
    color: #FFD700;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn:hover {
    background: rgba(255, 215, 0, 0.3);
}

.tab-btn.active {
    background: #FFD700;
    color: #000;
}

/* Shop Items */
.shop-item {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    pointer-events: auto;
    z-index: 1700;
}

.shop-item:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #FFD700;
    transform: translateX(-5px);
}

.shop-item.affordable {
    border-color: #00FF00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.item-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 1.1rem;
}

.item-owned {
    color: #FFA500;
    font-weight: bold;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 5px;
}

.item-cost {
    color: #FF6347;
    margin-bottom: 5px;
}

.item-production {
    color: #90EE90;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.item-description {
    color: #DDD;
    font-size: 0.85rem;
    font-style: italic;
}

/* Golden Carrot */
.golden-carrot {
    position: fixed;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 999;
    animation: goldenPulse 1s ease-in-out infinite;
}

.golden-carrot img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px #FFD700);
}

@keyframes goldenPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(10deg); }
}

/* Floating Numbers */
.floating-number {
    position: fixed;
    color: #FFD700;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    animation: floatUp 2s ease-out forwards;
    z-index: 1001;
}

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

/* Achievement Popup */
.achievement-popup {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: 3px solid #000;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 1002;
    animation: achievementSlide 0.5s ease-out;
}

.achievement-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.achievement-icon {
    font-size: 2rem;
}

.achievement-text {
    color: #000;
    font-weight: bold;
    font-size: 1.2rem;
}

@keyframes achievementSlide {
    from {
        transform: translateX(-50%) translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Scrollbar Styling */
.right-panel::-webkit-scrollbar {
    width: 10px;
}

.right-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
}

.right-panel::-webkit-scrollbar-thumb {
    background: #FFD700;
    border-radius: 5px;
}

.right-panel::-webkit-scrollbar-thumb:hover {
    background: #FFA500;
}

/* Main Display Above Carrot */
.main-display {
    text-align: center;
    margin-bottom: 40px;
    z-index: 100;
}

/* Copy Section in Main Display */
.main-copy-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.main-carrot-count {
    font-size: 5rem;
    color: #FFD700;
    font-weight: bold;
    text-shadow: 
        4px 4px 8px rgba(0,0,0,0.8),
        0 0 20px rgba(255, 215, 0, 0.6);
    margin-bottom: 15px;
    animation: mainCountGlow 2s ease-in-out infinite alternate;
}

.main-cps-count {
    font-size: 2rem;
    color: #FFA500;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    margin-bottom: 20px;
}

/* Bottom Stats Area */
.bottom-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 20px;
    gap: 40px;
    flex-wrap: wrap;
}

.total-farmed-display {
    font-size: 1.2rem;
    color: #90EE90;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

/* Twitter Arrow in Main Display */
.twitter-arrow-main {
    font-size: 6rem;
    color: #FF0000;
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    animation: mainArrowBounce 1.2s ease-in-out infinite;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.8);
    z-index: 102;
}

@keyframes mainArrowBounce {
    0%, 100% { 
        transform: translateY(-50%) rotate(45deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.6));
    }
    50% { 
        transform: translateY(-55%) rotate(40deg) scale(1.1);
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 1));
    }
}

/* Twitter Carrot Circle in Main Display */
.twitter-carrot-circle {
    font-size: 5rem;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    transition: all 0.3s ease;
    user-select: none;
    background: rgba(255, 0, 0, 0.2);
    border: 6px solid #FF0000;
    animation: mainRedCirclePulse 2s ease-in-out infinite;
    position: relative;
    display: inline-block;
    margin-left: 20px;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
}

.twitter-carrot-circle:hover {
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.9);
}

@keyframes mainRedCirclePulse {
    0%, 100% { 
        border-color: #FF0000;
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
        background: rgba(255, 0, 0, 0.2);
    }
    50% { 
        border-color: #FF4444;
        box-shadow: 0 0 50px rgba(255, 0, 0, 0.8);
        background: rgba(255, 0, 0, 0.3);
    }
}

@keyframes mainCountGlow {
    from { 
        text-shadow: 
            4px 4px 8px rgba(0,0,0,0.8),
            0 0 20px rgba(255, 215, 0, 0.6);
    }
    to { 
        text-shadow: 
            4px 4px 8px rgba(0,0,0,0.8),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 165, 0, 0.4);
    }
}

/* Building Visuals */
.building-visuals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.building-visual {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    user-select: none;
}

.building-icon {
    font-size: 3rem;
    margin-bottom: 5px;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

.building-count {
    background: rgba(255, 215, 0, 0.9);
    color: #000;
    font-weight: bold;
    font-size: 1rem;
    padding: 2px 8px;
    border-radius: 12px;
    border: 2px solid #000;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Building Animations */
.anim-hop {
    animation: buildingHop 3s ease-in-out infinite;
}

.anim-wave {
    animation: buildingWave 4s ease-in-out infinite;
}

.anim-idle {
    animation: buildingIdle 5s ease-in-out infinite;
}

.anim-glow {
    animation: buildingGlow 2s ease-in-out infinite alternate;
}

.anim-smoke {
    animation: buildingSmoke 3s ease-in-out infinite;
}

.anim-sacred {
    animation: buildingSacred 4s ease-in-out infinite;
}

.anim-fly {
    animation: buildingFly 8s ease-in-out infinite;
}

.anim-spin {
    animation: buildingSpin 2s linear infinite;
}

@keyframes buildingHop {
    0%, 90%, 100% { transform: translateY(0); }
    5% { transform: translateY(-20px); }
}

@keyframes buildingWave {
    0%, 50%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@keyframes buildingIdle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes buildingGlow {
    from { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
    to { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
}

@keyframes buildingSmoke {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

@keyframes buildingSacred {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 15px rgba(255,215,0,0.5)); }
    50% { transform: scale(1.03) rotate(2deg); filter: drop-shadow(0 0 25px rgba(255,215,0,0.8)); }
}

@keyframes buildingFly {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    25% { transform: translateX(30px) translateY(-10px) rotate(5deg); }
    50% { transform: translateX(0) translateY(-20px) rotate(0deg); }
    75% { transform: translateX(-30px) translateY(-10px) rotate(-5deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

@keyframes buildingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* MILESTONE BACKGROUNDS */

/* Traditional Garden - 1,000 carrots */
.bg-garden {
    background: linear-gradient(135deg, 
        #228B22 0%, 
        #32CD32 25%, 
        #98FB98 50%, 
        #FFB6C1 75%, 
        #DDA0DD 100%) !important;
    transition: background 2s ease-in-out;
}

.bg-garden::before {
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 15px,
            rgba(34, 139, 34, 0.1) 15px,
            rgba(34, 139, 34, 0.1) 30px
        ) !important;
}

/* Imperial Palace - 10,000 carrots */
.bg-palace {
    background: linear-gradient(135deg, 
        #8B0000 0%, 
        #DC143C 25%, 
        #FFD700 50%, 
        #FF6347 75%, 
        #8B0000 100%) !important;
    transition: background 2s ease-in-out;
}

.bg-palace::before {
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 20px,
            rgba(255, 215, 0, 0.2) 20px,
            rgba(255, 215, 0, 0.2) 25px
        ) !important;
}

/* Ancient Temple - 100,000 carrots */
.bg-temple {
    background: linear-gradient(135deg, 
        #4B0082 0%, 
        #8A2BE2 25%, 
        #DDA0DD 50%, 
        #FFD700 75%, 
        #4B0082 100%) !important;
    transition: background 2s ease-in-out;
}

.bg-temple::before {
    background: 
        radial-gradient(circle at 50% 50%, 
            rgba(255, 215, 0, 0.1) 0%, 
            transparent 50%
        ),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 30px,
            rgba(138, 43, 226, 0.1) 30px,
            rgba(138, 43, 226, 0.1) 35px
        ) !important;
}

/* Celestial Heaven - 1,000,000 carrots */
.bg-heaven {
    background: linear-gradient(135deg, 
        #F0F8FF 0%, 
        #FFD700 20%, 
        #FFFFFF 40%, 
        #FFE4B5 60%, 
        #F0F8FF 80%, 
        #FFD700 100%) !important;
    transition: background 2s ease-in-out;
    animation: heavenGlow 4s ease-in-out infinite alternate;
}

.bg-heaven::before {
    background: 
        radial-gradient(circle at 25% 25%, 
            rgba(255, 215, 0, 0.3) 0%, 
            transparent 50%
        ),
        radial-gradient(circle at 75% 75%, 
            rgba(255, 255, 255, 0.4) 0%, 
            transparent 50%
        ) !important;
}

@keyframes heavenGlow {
    from { filter: brightness(1) saturate(1); }
    to { filter: brightness(1.1) saturate(1.2); }
}

/* Dragon Realm - 10,000,000+ carrots */
.bg-dragon {
    background: linear-gradient(135deg, 
        #000080 0%, 
        #0000FF 20%, 
        #4169E1 40%, 
        #FFD700 60%, 
        #FF4500 80%, 
        #000080 100%) !important;
    transition: background 2s ease-in-out;
    animation: dragonPower 3s ease-in-out infinite;
}

.bg-dragon::before {
    background: 
        radial-gradient(circle at 30% 70%, 
            rgba(255, 215, 0, 0.4) 0%, 
            transparent 40%
        ),
        radial-gradient(circle at 70% 30%, 
            rgba(0, 0, 255, 0.3) 0%, 
            transparent 40%
        ),
        repeating-linear-gradient(
            120deg,
            transparent,
            transparent 50px,
            rgba(255, 69, 0, 0.1) 50px,
            rgba(255, 69, 0, 0.1) 55px
        ) !important;
}

@keyframes dragonPower {
    0%, 100% { 
        filter: brightness(1) saturate(1) hue-rotate(0deg); 
    }
    33% { 
        filter: brightness(1.2) saturate(1.3) hue-rotate(10deg); 
    }
    66% { 
        filter: brightness(0.9) saturate(1.1) hue-rotate(-10deg); 
    }
}

/* Jade Emperor's Court - 1 billion carrots */
.bg-jade {
    background: linear-gradient(135deg, 
        #006400 0%, 
        #32CD32 20%, 
        #00FF7F 40%, 
        #FFD700 60%, 
        #ADFF2F 80%, 
        #006400 100%) !important;
    transition: background 2s ease-in-out;
    animation: jadeShimmer 5s ease-in-out infinite;
}

.bg-jade::before {
    background: 
        radial-gradient(circle at 20% 80%, 
            rgba(255, 215, 0, 0.4) 0%, 
            transparent 60%
        ),
        radial-gradient(circle at 80% 20%, 
            rgba(0, 255, 127, 0.3) 0%, 
            transparent 60%
        ),
        repeating-linear-gradient(
            30deg,
            transparent,
            transparent 40px,
            rgba(50, 205, 50, 0.2) 40px,
            rgba(50, 205, 50, 0.2) 45px
        ) !important;
}

@keyframes jadeShimmer {
    0%, 100% { filter: brightness(1) saturate(1.2); }
    50% { filter: brightness(1.3) saturate(1.5) hue-rotate(15deg); }
}

/* Cosmic Monastery - 1 trillion carrots */
.bg-cosmic {
    background: linear-gradient(135deg, 
        #0B0B2F 0%, 
        #1E1E3F 20%, 
        #2F2F5F 40%, 
        #FFD700 60%, 
        #800080 80%, 
        #0B0B2F 100%) !important;
    transition: background 2s ease-in-out;
    animation: cosmicPulse 6s ease-in-out infinite;
}

.bg-cosmic::before {
    background: 
        radial-gradient(circle at 10% 10%, rgba(255, 215, 0, 0.3) 0%, transparent 20%),
        radial-gradient(circle at 90% 90%, rgba(128, 0, 128, 0.3) 0%, transparent 20%),
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 10%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 10%),
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 5%) !important;
}

@keyframes cosmicPulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.4) saturate(1.8) hue-rotate(30deg); }
}

/* Time Vortex - 1 quadrillion carrots */
.bg-time {
    background: linear-gradient(135deg, 
        #4B0082 0%, 
        #8A2BE2 15%, 
        #9400D3 30%, 
        #FF1493 45%, 
        #FFD700 60%, 
        #FF6347 75%, 
        #4B0082 100%) !important;
    transition: background 2s ease-in-out;
    animation: timeWarp 4s linear infinite;
}

.bg-time::before {
    background: 
        conic-gradient(from 0deg at 50% 50%, 
            transparent, rgba(255, 215, 0, 0.3), transparent, rgba(138, 43, 226, 0.3), transparent
        ),
        radial-gradient(circle at 50% 50%, 
            transparent 30%, 
            rgba(255, 20, 147, 0.2) 40%, 
            transparent 60%
        ) !important;
}

@keyframes timeWarp {
    0% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
    25% { filter: brightness(1.3) saturate(1.5) hue-rotate(90deg); }
    50% { filter: brightness(1.1) saturate(1.8) hue-rotate(180deg); }
    75% { filter: brightness(1.4) saturate(1.3) hue-rotate(270deg); }
    100% { filter: brightness(1) saturate(1) hue-rotate(360deg); }
}

/* Reality Matrix - 1 quintillion carrots */
.bg-matrix {
    background: linear-gradient(135deg, 
        #001100 0%, 
        #003300 25%, 
        #00FF00 50%, 
        #FFFF00 75%, 
        #001100 100%) !important;
    transition: background 2s ease-in-out;
    animation: matrixFlow 3s ease-in-out infinite;
}

.bg-matrix::before {
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 255, 0, 0.1),
            rgba(0, 255, 0, 0.1) 2px,
            transparent 2px,
            transparent 20px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 255, 0, 0.05),
            rgba(0, 255, 0, 0.05) 2px,
            transparent 2px,
            transparent 20px
        ) !important;
}

@keyframes matrixFlow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.5) saturate(2) contrast(1.2); }
}

/* Infinite Dimension - 10 quintillion carrots */
.bg-infinite {
    background: linear-gradient(135deg, 
        #000000 0%, 
        #1a0033 20%, 
        #330066 40%, 
        #6600cc 60%, 
        #cc00ff 80%, 
        #000000 100%) !important;
    transition: background 2s ease-in-out;
    animation: infiniteExpand 8s ease-in-out infinite;
}

.bg-infinite::before {
    background: 
        radial-gradient(circle at 50% 50%, 
            rgba(204, 0, 255, 0.3) 0%, 
            rgba(102, 0, 204, 0.2) 30%, 
            transparent 60%
        ),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 10%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 10%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 5%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 5%) !important;
}

@keyframes infiniteExpand {
    0%, 100% { 
        filter: brightness(1) saturate(1) scale(1); 
        transform: rotate(0deg); 
    }
    25% { 
        filter: brightness(1.3) saturate(1.5); 
        transform: rotate(90deg) scale(1.02); 
    }
    50% { 
        filter: brightness(1.6) saturate(2); 
        transform: rotate(180deg) scale(1.05); 
    }
    75% { 
        filter: brightness(1.3) saturate(1.5); 
        transform: rotate(270deg) scale(1.02); 
    }
}

/* Singularity Core - 100 quintillion carrots */
.bg-singularity {
    background: radial-gradient(circle at center, 
        #000000 0%, 
        #1a1a1a 10%, 
        #333333 20%, 
        #666666 30%, 
        #999999 40%, 
        #cccccc 50%, 
        #ffffff 60%, 
        #ffff00 70%, 
        #ff0000 80%, 
        #000000 100%) !important;
    transition: background 2s ease-in-out;
    animation: singularityPulse 2s ease-in-out infinite;
}

.bg-singularity::before {
    background: 
        radial-gradient(circle at 50% 50%, 
            rgba(255, 255, 255, 0.8) 0%, 
            rgba(255, 255, 0, 0.6) 20%, 
            rgba(255, 0, 0, 0.4) 40%, 
            transparent 60%
        ) !important;
}

@keyframes singularityPulse {
    0%, 100% { 
        filter: brightness(1) saturate(1) contrast(1); 
        transform: scale(1); 
    }
    50% { 
        filter: brightness(2) saturate(3) contrast(2); 
        transform: scale(1.01); 
    }
}