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

body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    overflow: hidden;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="0" y="24" font-size="24">👋</text></svg>') 16 16, crosshair;
    user-select: none;
    position: relative;
}

#game-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Clock styling */
#clock-container {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 10;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: clock-pulse 2s ease-in-out infinite;
}

@keyframes clock-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.01); }
}

#clock-time {
    font-size: 1.8em;
    font-weight: 200;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #fff, #f0f0f0, #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

#clock-date {
    font-size: 0.85em;
    font-weight: 300;
    opacity: 0.8;
    letter-spacing: 1px;
    margin-top: 3px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#score-container {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    font-size: 1.1em;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

#message {
    font-size: 0.9em;
    color: #ffd700;
    min-height: 25px;
    animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.cat {
    position: absolute;
    width: 80px;
    height: 80px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 100;
    pointer-events: none;
}

.cat-emoji {
    font-size: 60px;
    animation: wiggle 0.5s ease-in-out infinite;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

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

.cat.jumping {
    animation: jump 0.5s ease-out;
}

@keyframes jump {
    0% { transform: scale(1); }
    50% { transform: scale(1.2) translateY(-20px); }
    100% { transform: scale(1); }
}

.treat, .toy {
    position: absolute;
    font-size: 40px;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.treat.show, .toy.show {
    opacity: 1;
    animation: spin 2s linear infinite;
}

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

#instructions {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: white;
    text-align: center;
    font-size: 1em;
    background: rgba(0,0,0,0.3);
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Particle effects */
.particle {
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    animation: float-up 1s ease-out forwards;
    z-index: 200;
}

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

/* Firework effects for mobile */
.firework {
    position: absolute;
    pointer-events: none;
    z-index: 300;
}

.firework-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

.firework-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 2px currentColor);
    will-change: transform, opacity; /* GPU acceleration */
}

.firework-particle {
    will-change: transform, opacity; /* GPU acceleration */
}

/* Simple CSS-only firework for mobile */
.firework-burst {
    position: absolute;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.simple-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: explode-simple 1s ease-out forwards;
    transform-origin: center;
}

@keyframes explode-simple {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(cos(var(--angle)) * 60px),
            calc(sin(var(--angle)) * 60px)
        ) scale(0);
        opacity: 0;
    }
}

/* Simpler version for iOS */
@supports (-webkit-touch-callout: none) {
    .simple-particle {
        animation: explode-ios 1s linear forwards;
    }

    @keyframes explode-ios {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(8);
            opacity: 0;
        }
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    body {
        cursor: default;
        background: #001a3d; /* Solid color instead of gradient for performance */
        position: relative;
    }

    #game-container {
        z-index: 2;
        position: relative;
    }

    /* Enhanced clock for mobile wallpaper */
    #clock-container {
        top: 40px;
        animation: clock-float 4s ease-in-out infinite;
    }

    #clock-time {
        font-size: 2.5em;
        font-weight: 100;
        letter-spacing: 2px;
    }

    #clock-date {
        font-size: 0.9em;
        opacity: 0.9;
    }

    @keyframes clock-float {
        0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
        50% { transform: translateX(-50%) translateY(-3px) scale(1.01); }
    }

    /* Night scene container */
    #night-scene {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* Moon */
    #moon {
        position: absolute;
        width: 60px;
        height: 60px;
        background: radial-gradient(circle at 30% 30%, #ffffd0, #f0e68c);
        border-radius: 50%;
        top: 10%;
        right: 15%;
        box-shadow: 0 0 30px rgba(255, 255, 200, 0.5);
        animation: moon-glow 3s ease-in-out infinite alternate;
    }

    @keyframes moon-glow {
        from { box-shadow: 0 0 30px rgba(255, 255, 200, 0.5); }
        to { box-shadow: 0 0 50px rgba(255, 255, 200, 0.8); }
    }

    /* Twinkling stars - simplified for performance */
    #stars-container::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 70%;
        background-image:
            radial-gradient(1px 1px at 10% 20%, white, transparent),
            radial-gradient(1px 1px at 30% 10%, white, transparent),
            radial-gradient(1px 1px at 50% 30%, white, transparent),
            radial-gradient(1px 1px at 70% 20%, white, transparent),
            radial-gradient(1px 1px at 90% 40%, white, transparent);
        opacity: 0.6; /* No animation for better performance */
    }

    /* City skyline */
    #city-skyline {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 150px;
        background: linear-gradient(to top, #1a1a2e 0%, transparent 100%);
    }

    #city-skyline::before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        background-image:
            linear-gradient(to top, #0f0f1e, transparent),
            repeating-linear-gradient(90deg,
                #1a1a2e 0px, #1a1a2e 30px,
                #222236 30px, #222236 50px,
                #1a1a2e 50px, #1a1a2e 80px,
                #2a2a3e 80px, #2a2a3e 100px);
        -webkit-mask-image:
            linear-gradient(to top,
                black 0px, black 20px,
                transparent 20px, transparent 25px,
                black 25px, black 45px,
                transparent 45px, transparent 50px,
                black 50px, black 65px,
                transparent 65px, transparent 70px,
                black 70px, black 85px,
                transparent 85px);
        mask-image:
            linear-gradient(to top,
                black 0px, black 20px,
                transparent 20px, transparent 25px,
                black 25px, black 45px,
                transparent 45px, transparent 50px,
                black 50px, black 65px,
                transparent 65px, transparent 70px,
                black 70px, black 85px,
                transparent 85px);
        opacity: 0.4;
    }

    /* Tiny building lights */
    #city-skyline::after {
        content: '';
        position: absolute;
        bottom: 20px;
        width: 100%;
        height: 80px;
        background-image:
            radial-gradient(2px 2px at 10% 80%, #ffff88, transparent),
            radial-gradient(2px 2px at 15% 60%, #ffff88, transparent),
            radial-gradient(2px 2px at 25% 70%, #ffff88, transparent),
            radial-gradient(2px 2px at 35% 85%, #ffff88, transparent),
            radial-gradient(2px 2px at 45% 65%, #ffff88, transparent),
            radial-gradient(2px 2px at 55% 75%, #ffff88, transparent),
            radial-gradient(2px 2px at 65% 80%, #ffff88, transparent),
            radial-gradient(2px 2px at 75% 60%, #ffff88, transparent),
            radial-gradient(2px 2px at 85% 70%, #ffff88, transparent),
            radial-gradient(2px 2px at 90% 85%, #ffff88, transparent);
        animation: city-lights 10s ease-in-out infinite;
    }

    @keyframes city-lights {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    #instructions {
        display: none; /* Hide instructions on mobile */
    }
}

/* Fun hover effect for desktop */
@media (min-width: 769px) {
    body:hover .cat-emoji {
        animation-duration: 0.2s;
    }
}

/* Rainbow text effect for high scores */
.rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-shift 3s linear infinite;
}

@keyframes rainbow-shift {
    to { background-position: 200% 0; }
}