/* Container-Optimierung */
.game {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hintergrund & Rahmen */
    background: var(--panel-soft);
    border: 2px solid var(--muted); /* Akzentfarbe als Rahmen */
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); /* Leichter Glow-Effekt */
    
    margin: 20px auto;
    overflow: hidden;
    
    /* Festes Seitenverhältnis für Desktop */
    width: 100%;
    max-width: 400px;
    height: 600px;
}

/* Canvas-Styling */
#flappyCanvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated; /* Erhält die Schärfe der Bilder */
    cursor: pointer;
}

/* Start-Button Feinheiten */
.startgame {
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
}

/* --- MOBILE OPTIMIERUNG --- */

@media (max-width: 600px) {
    main {
        margin: 120px 20px 20px 20px; /* Weniger Abstand oben auf Mobile */
    }

    .game {
        height: 70vh; /* Nutzt mehr vertikalen Platz auf Smartphones */
        max-width: 100%;
        border-radius: 10px;
        margin-top: 20px;
    }

    .game-description .description {
        font-size: 1.1rem;
        padding: 0 10px;
    }

    /* Verhindert das lästige "Blau-Aufleuchten" beim Tippen auf Smartphones */
    canvas {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Animation für den "Ready"-Zustand (Optionaler Bonus) */
@keyframes pulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

#flappyCanvas.waiting {
    animation: pulse 2s infinite ease-in-out;
}