/* ─── Media Queries ─────────────────────────────── */

/* 1. Large screens (up to 1250px) */
@media screen and (max-width: 1250px) {
    .game-players {
        flex-direction: column;
        text-align: center;
    }

    .player-white,
    .player-black {
        margin-top: var(--border);

        text-align: center;
    }

    .game-result {
        position: absolute;
        right: 10%;
        left: auto;

        max-width: fit-content;

        transform: translate(0, -75%) !important; /* specificity-override */
    }

    #theme-toggle-btn {
        right: 0 !important; /* specificity-override */

        max-width: fit-content;
    }

    .game-meta {
        display: flex;
        align-items: center !important; /* specificity-override */
        justify-content: center !important; /* specificity-override */
        gap: var(--small);

        margin-bottom: 5px !important; /* specificity-override */
    }

    .game-meta-right {
        justify-content: center;
    }
}

/* 2. Confirmation modal width (up to 1150px) */
@media screen and (max-width: 1150px) {
    .confirmation {
        width: 60vw;
    }
}

/* 2. Confirmation modal width (up to 950px) */
@media screen and (max-width: 950px) {
    .confirmation {
        width: 90vw;
    }
}

/* 3. Container and form elements (up to 875px) */
@media screen and (max-width: 875px) {
    .container {
        width: 100%;
        padding: 35px;
    }

    .inlineForm {
        gap: var(--border);
    }

    input,
    select,
    button {
        width: 100%;
    }

    .confirmation i.warning-big {
        font-size: 4rem;
    }

    .confirmation .options {
        flex-direction: column;
    }
}

/* 4. Player details and game details (up to 600px) */
@media screen and (max-width: 600px) {
    .game-players {
        width: 100%;
    }

    .player-white,
    .player-black {
        width: 100%;

        text-align: left !important; /* specificity-override */
    }

    .game-meta {
        gap: 0;
    }

    .game-tournament strong,
    .game-meta .timecontrol-category,
    .game-meta .round-label {
        display: none;
    }
}

/* 5. Heading font size (up to 515px) */
@media screen and (max-width: 515px) {
    .container h1 {
        font-size: 6vw;
    }
}