/* =========================================
   DIFFICULTÉ — COMPACT TACTICAL
========================================= */

#difficulty-selector {
    width: 100%;
    margin: 18px 0 20px;
}

.difficulty-title {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #aeb99a;
}

/* GRILLE */

.difficulty-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 6px;
}


/* BOUTONS */

.difficulty-buttons button {
    position: relative;

    height: 42px;

    padding: 0 10px;

    border: 1px solid #4d5b43;

    background:
        linear-gradient(
            180deg,
            #293225,
            #20271d
        );

    color: #aeb59f;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        .15s background,
        .15s border-color,
        .1s transform;
}


/* PETIT MARQUEUR À GAUCHE */

.difficulty-buttons button::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #66745b;

    opacity: .5;
}


/* HOVER */

.difficulty-buttons button:hover {
    background:
        linear-gradient(
            180deg,
            #35402f,
            #283123
        );

    border-color: #758669;

    color: #fff;
}


/* CLIC */

.difficulty-buttons button:active {
    transform: scale(.97);
}


/* =========================================
   SÉLECTION
========================================= */

.difficulty-buttons button.selected {
    color: #fff;

    border-color: #9bab79;

    background:
        linear-gradient(
            180deg,
            #526344,
            #394832
        );

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.35),
        0 0 8px rgba(140,160,110,.15);
}


.difficulty-buttons button.selected::before {
    background: #d8e5a8;

    opacity: 1;
}


/* PETITE FLÈCHE */

.difficulty-buttons button.selected::after {
    content: "▶";

    position: absolute;

    left: 9px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 8px;

    color: #d8e5a8;
}


/* =========================================
   DIFFICULTÉS ÉLEVÉES
========================================= */

.difficulty-buttons button[data-difficulty="extreme"] {
    border-color: #625a42;
}

.difficulty-buttons button[data-difficulty="apocalypse"] {
    border-color: #67493f;
}

.difficulty-buttons button[data-difficulty="ultimate"] {
    border-color: #70423d;
}


/* =========================================
   IMPOSSIBLE
========================================= */

.difficulty-buttons button[data-difficulty="impossible"] {
    grid-column: 1 / -1;

    height: 42px !important;
    min-height: 42px !important;

    color: #c79a91;

    border-color: #713f3b;

    background:
        linear-gradient(
            180deg,
            #352523,
            #261b1a
        );

    letter-spacing: 2px;
}


.difficulty-buttons button[data-difficulty="impossible"]::before {
    background: #9c4e46;
}


.difficulty-buttons button[data-difficulty="impossible"]:hover {
    color: #ffd4ce;

    border-color: #a65a51;

    background:
        linear-gradient(
            180deg,
            #4b2b28,
            #30201e
        );
}


.difficulty-buttons button[data-difficulty="impossible"].selected {
    color: #fff0ed;

    border-color: #b45b52;

    background:
        linear-gradient(
            180deg,
            #63332e,
            #3e2421
        );
}

/* =========================================
   DIFFICULTÉS — OVERRIDE FINAL
========================================= */

#difficulty-selector {
    width: 100%;
    margin: 16px 0 12px;
}

#difficulty-selector .difficulty-title {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;

    color: #aeb99a;
}


/* FORCE LA GRILLE */

#difficulty-selector .difficulty-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 6px !important;

    width: 100%;
}


/* FORCE LA TAILLE DES BOUTONS */

#difficulty-selector .difficulty-buttons button {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    box-sizing: border-box;

    background: #283123 !important;

    border: 1px solid #536149 !important;
    border-left: 3px solid #718363 !important;

    color: #c5cbb8 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;

    box-shadow: none !important;
}


/* SÉLECTION */

#difficulty-selector
.difficulty-buttons
button.selected {

    background: #46563a !important;

    border-color: #9baa7b !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.35) !important;
}


/* IMPOSSIBLE = LIGNE COMPLÈTE */

#difficulty-selector
.difficulty-buttons
button[data-difficulty="impossible"] {

    grid-column: 1 / -1 !important;

    background: #33211f !important;

    border-color: #75453f !important;
    border-left-color: #a65349 !important;

    color: #d8aaa3 !important;
}


/* IMPOSSIBLE SÉLECTIONNÉ */

#difficulty-selector
.difficulty-buttons
button[data-difficulty="impossible"].selected {

    background: #5a302b !important;

    border-color: #b65b51 !important;

    color: #fff !important;
}

/* =========================================
   DESCRIPTION DIFFICULTÉ
========================================= */

#difficulty-info {
    margin-top: 8px;
    padding: 8px 10px;

    background: rgba(0, 0, 0, .18);

    border-left: 3px solid #82916c;
}

#difficulty-info-name {
    margin-bottom: 3px;

    color: #d6dfbf;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

#difficulty-info-description {
    color: #899480;

    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .3px;
}

/* ==========================================
   VERSION / PATCH NOTES
   ========================================== */

#version-info {
    width: min(90%, 360px);

    margin: 12px auto 16px;
    padding: 10px 12px;

    background: rgba(10, 14, 10, 0.82);

    border: 1px solid #3c4935;
    border-radius: 5px;

    text-align: left;
}

.version-number {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;

    color: #d9e2c7;

    text-align: center;
}

.patch-notes {
    display: flex;
    flex-direction: column;

    gap: 3px;

    font-size: 9px;

    color: #aeb99d;
}

.patch-notes strong {
    margin-bottom: 3px;

    font-size: 10px;

    color: #ffffff;
}

.patch-notes span {
    line-height: 1.3;
}

/* ==========================================
   SCROLL DU MENU PRINCIPAL
========================================== */

#main-menu {
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================
   BOUTON PATCH NOTES
========================================== */

#patch-toggle {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;

    background: rgba(0, 0, 0, 0.35);
    color: white;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


/* ==========================================
   PATCH NOTES
========================================== */

#patch-notes {
    margin-top: 10px;
}

#patch-notes.hidden {
    display: none;
}

.patch-section {
    margin-bottom: 14px;
}

.patch-section h3 {
    margin-bottom: 6px;
}

.patch-section p {
    margin: 4px 0;
}

/* ==========================================
   MENU TACTIQUE — FENÊTRE DÉPLAÇABLE v0.2.3
========================================== */

#tactical-panel {
    position: fixed !important;

    width: min(520px, calc(100vw - 20px)) !important;
    max-width: 520px !important;

    height: auto !important;
    max-height: 55vh !important;

    left: 50%;
    top: 70px;
    right: auto;
    bottom: auto;

    transform: translateX(-50%);

    overflow: hidden !important;

    box-sizing: border-box !important;

    border: 1px solid #65705a;

    z-index: 1000 !important;
}

.tactical-header {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.tactical-header:active {
    cursor: grabbing;
}

.tactical-header h2 {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    flex: 1;
}

#tactical-content {
    width: 100% !important;
    max-height: calc(55vh - 36px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.tactical-option {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.tactical-icon {
    width: 30px !important;
    min-width: 30px !important;
    font-size: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.tactical-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1.1 !important;
}

.tactical-info strong {
    font-size: 11px !important;
    line-height: 1 !important;
}

.tactical-info small {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    opacity: 0.75;
}

.tactical-cost {
    margin-left: auto !important;
    min-width: 30px !important;
    font-size: 11px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

#close-tactical {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 600px) {
    #tactical-panel {
        width: calc(100vw - 12px) !important;
        max-width: none !important;
        top: 50px !important;
        max-height: 55vh !important;
    }

    #tactical-content {
        max-height: calc(55vh - 34px) !important;
    }

    .tactical-header {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 8px !important;
    }

    .tactical-option {
        min-height: 40px !important;
        height: 40px !important;
        padding: 4px 8px !important;
        gap: 7px !important;
    }

    .tactical-icon {
        width: 26px !important;
        min-width: 26px !important;
        font-size: 14px !important;
    }

    .tactical-info strong {
        font-size: 10px !important;
    }

    .tactical-info small {
        font-size: 7px !important;
    }

    .tactical-cost {
        font-size: 10px !important;
    }
}

/* =========================================
   SÉLECTEUR MODE DE JEU
========================================= */

#gamemode-selector {
    width: 100%;
    margin-bottom: 18px;
}

.gamemode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.gamemode-buttons button {
    padding: 12px 8px;

    border: 1px solid #555;
    border-radius: 4px;

    background: #181818;
    color: #aaa;

    font-weight: bold;
    font-size: 12px;

    cursor: pointer;
}

.gamemode-buttons button.selected {
    background: #3d4938;
    border-color: #899b7e;
    color: #fff;
}

.gamemode-buttons button:active {
    transform: scale(0.97);
}

/* ==========================================
   PATCH NOTES — HISTORIQUE DES VERSIONS
========================================== */

#patch-notes {
    width: 100%;
    max-width: 520px;
    max-height: 55vh;

    margin-top: 12px;

    overflow-y: auto;
    overflow-x: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;

    background: rgba(8, 12, 10, 0.96);

    box-sizing: border-box;
}


/* ==========================================
   UNE VERSION
========================================== */

.patch-entry {
    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.patch-entry:last-child {
    border-bottom: none;
}


/* ==========================================
   BOUTON DE VERSION
========================================== */

.patch-version-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 16px;

    border: none;

    background: rgba(255, 255, 255, 0.04);

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;
}

.patch-version-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.patch-version-toggle:active {
    background: rgba(255, 255, 255, 0.12);
}


/* ==========================================
   FLÈCHE
========================================== */

.patch-arrow {
    margin-left: 15px;

    font-size: 12px;

    opacity: 0.8;

    transition: transform 0.15s ease;
}


/* ==========================================
   CONTENU D'UNE VERSION
========================================== */

.patch-version-content {
    padding: 4px 14px 14px 14px;

    background: rgba(0, 0, 0, 0.18);
}


/* ==========================================
   SECTIONS DU PATCH
========================================== */

.patch-version-content .patch-section {
    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.patch-version-content .patch-section:last-child {
    border-bottom: none;
}

.patch-version-content .patch-section h3 {
    margin: 0 0 9px 0;

    font-size: 13px;

    letter-spacing: 0.5px;

    color: #ffffff;
}

.patch-version-content .patch-section p {
    margin: 6px 0;

    font-size: 12px;
    line-height: 1.45;

    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================
   SCROLLBAR
========================================== */

#patch-notes::-webkit-scrollbar {
    width: 6px;
}

#patch-notes::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

#patch-notes::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 10px;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    #patch-notes {
        max-height: 50vh;
    }

    .patch-version-toggle {
        padding: 13px 12px;

        font-size: 12px;
    }

    .patch-version-content {
        padding:
            4px
            12px
            12px
            12px;
    }

    .patch-version-content .patch-section h3 {
        font-size: 12px;
    }

    .patch-version-content .patch-section p {
        font-size: 11px;
    }
}

        /* ==========================================
           SÉLECTION DE LA CARTE
        ========================================== */

        #map-selector {
            width: 100%;
            margin-top: 16px;
        }


        .map-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 8px;
        }


        .map-buttons button {
            min-height: 52px;
            padding: 10px 8px;

            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 4px;

            background: rgba(0, 0, 0, 0.35);

            color: #c8c8c8;

            font-family: inherit;
            font-size: 12px;
            font-weight: bold;

            cursor: pointer;

            transition:
                background 0.15s ease,
                border-color 0.15s ease,
                transform 0.15s ease;
        }


        .map-buttons button:hover {
            background: rgba(255, 255, 255, 0.08);
        }


        .map-buttons button:active {
            transform: scale(0.97);
        }


        .map-buttons button.selected {
            background: rgba(255, 255, 255, 0.12);

            border-color: rgba(
                255,
                255,
                255,
                0.45
            );

            color: #ffffff;
        }


        /* ==========================================
           MOBILE
        ========================================== */

        @media (
            max-width: 600px
        ) {

            .map-buttons {
                grid-template-columns:
                    repeat(2, 1fr);
            }


            .map-buttons button {
                min-height: 48px;
                font-size: 11px;
                padding: 8px 5px;
            }

        }

        
        .main-game-logo {
            display: block;

            width: 550px;
            max-width: 92vw;

            height: auto;

            margin:
                -60px auto
                -70px auto;

            object-fit: contain;

            user-select: none;
            pointer-events: none;

            transform:
                translateX(-50px);

            filter:
                drop-shadow(
                    0 8px 10px
                    rgba(0, 0, 0, 0.45)
                );
        }