@media (max-width: 600px) {
    .cloud {
        font-size: 3rem;
    }

    .game-title {
        font-size: 1.8rem;
    }

    .theme-grid {
        grid-template-columns: 1fr;
        /* Stack cards on very small screens? Actually 1fr 1fr is usually fine on mobile unless very narrow. Let's keep 1fr 1fr but reduce padding */
        gap: 15px;
    }

    .theme-card h3 {
        font-size: 0.9rem;
    }

    .glossy-btn {
        padding: 12px 15px;
        font-size: 1rem;
    }

    .question-card {
        padding: 20px;
    }

    .question-card h2 {
        font-size: 1.1rem;
    }

    .mascot-decoration {
        font-size: 4rem;
    }

    .game-mascot {
        width: 100px;
    }
}