@import url('./src/css/variables.css');
@import url('./src/css/layout.css');
@import url('./src/css/auth.css');
@import url('./src/css/lobby.css');
@import url('./src/css/onboarding.css');

@media (max-width: 600px) {
    /* --- 1. Login/Registrierungs-Formular skalieren --- */
    #register-form {
        transform: translate(-50%, -50%) scale(0.7);
    }

    /* --- 2. Top-Bar in der Lobby optimieren --- */
    #top-bar {
        padding: 0 10px; 
    }
    
    .top-bar-left .lobby-logo {
        font-size: 16px; 
    }

    #user-info {
        gap: 10px; 
    }

    #lobby-username {
        font-size: 14px;
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #btn-logout {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* --- 3. Footer aufräumen --- */
    #game-footer {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
        gap: 8px;
        background: rgba(0, 0, 0, 0.7); 
    }

    .footer-left, .footer-center, .footer-right {
        text-align: center;
        width: 100%;
    }

    #discord-link {
        left: 125px;
        top: 520px;
    }
}

@media (max-height: 1050px) and (min-width: 601px) {
    #register-form {
        /* Wir schieben das HTML-Formular aus der exakten Mitte um 80px nach unten. 
           So hat das Logo (das in PixiJS darüber liegt) genug Luft zum Atmen. */
        top: calc(50% + 80px);
    } 
}

@media (max-height: 500px) {
    /* --- Formular noch kleiner machen, damit es vertikal passt --- */
    #register-form {
        /* scale(0.5) macht das Formular klein genug für Handys im Querformat */
        transform: translate(-50%, -50%) scale(0.4);
        top: 50%;
    }

    /* --- Discord-Button wie im normalen Handy-Modus nach unten klappen --- */
    #discord-link {
        left: -420px;
        top: 350px;
    }

    /* --- Footer extrem flach machen --- */
    /* Im Querformat haben wir in der Breite Platz, aber in der Höhe nicht. 
       Daher ordnen wir den Text wieder als Reihe (row) an. */
    #game-footer {
        flex-direction: row;
        height: 30px;
        padding: 0 20px;
        background: rgba(0, 0, 0, 0.7);
    }

    .footer-left, .footer-center, .footer-right {
        text-align: center;
        width: 33%;
        font-size: 10px; /* Schrift minimal verkleinern */
    }
}

@media (max-width: 800px) and (orientation: portrait) {
    #sector-list-container {
        /* Erzwingt 2 Spalten auf dem Handy */
        grid-template-columns: repeat(2, 270px) !important;
        justify-content: center !important;
    }
}