body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: system-ui, sans-serif;
}

.background-container {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    animation: float linear infinite;
}

@keyframes float {
    from { 
        transform: translateY(0) scale(0.5);
        opacity: 0.7;
    }
    
    50% { 
        transform: translateY(-100vh) scale(1.2);
        opacity: 0.5;
    }
    
    to { 
        transform: translateY(-200vh) scale(0.7);
        opacity: 0.3;
    }
}

body {
    background: linear-gradient(135deg, #1a365d 0%, #2563eb 100%);
    min-height: 100vh;
}

.game-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center;
    cursor: pointer;
}

.game-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
}

.emoji-btn {
    font-size: 4.5rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    padding: 1.5rem;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.05);
    }
    
    to {
        transform: scale(1);
    }
}

.result-container {
    animation: pulse 1.2s infinite;
}

.game-container {
    position: relative;
    z-index: 1;
    padding: 2rem;
}