/*
 * Armory responsive mobile - clean paperdoll frame.
 *
 * Objectif :
 * - ne pas toucher au desktop large ;
 * - onglets en scrollbar horizontale quand la largeur baisse ;
 * - en mobile/fenêtre étroite, le viewer + fond + stuff gauche/droite/bas
 *   restent dans une seule frame 820x890, puis la frame entière est scale.
 */

/* Onglets : scrollbar horizontale propre */
@media (max-width: 1180px) {
    .armory-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        padding: 0 !important;
        box-sizing: border-box !important;

        scrollbar-width: auto !important;
        scrollbar-color: rgba(255,255,255,.75) rgba(255,255,255,.18) !important;
    }

    .armory-tabs::-webkit-scrollbar {
        height: 8px !important;
    }

    .armory-tabs::-webkit-scrollbar-track {
        background: rgba(255,255,255,.18) !important;
    }

    .armory-tabs::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.75) !important;
        border-radius: 8px !important;
    }

    .armory-tabs .armory-tab-button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-width: 135px !important;
        max-width: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }
}

/* Frame paperdoll mobile/tablette étroite */

/* ============================================================
   ARMORY CHARACTER RESPONSIVE PAPERDOLL CLEAN
   Objectif :
   - supprimer les conflits des anciens essais ;
   - garder desktop intact ;
   - en mobile, centrer le bloc entier ;
   - mettre gauche/droite en overlay dans le viewer ;
   - garder les armes en bas centrées.
   ============================================================ */

@media (max-width: 980px) and (min-width: 768px) {
    #armory-tab-character .uk-overflow-auto {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #armory-tab-character #armory {
        position: relative !important;
        width: 820px !important;
        min-width: 820px !important;
        max-width: 820px !important;
        margin: 18px auto 36px auto !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    #armory-tab-character .uk-overflow-auto {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #armory-tab-character #armory {
        position: relative !important;
        display: block !important;

        width: min(100%, 520px) !important;
        min-width: 0 !important;
        max-width: 520px !important;

        margin: 18px auto 36px auto !important;
        padding: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        float: none !important;
        clear: both !important;

        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #armory-tab-character #armory_3d_viewer,
    #armory-tab-character #armory_center {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        aspect-ratio: 820 / 795 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        overflow: hidden !important;
        transform: none !important;
        box-sizing: border-box !important;

        background-image: var(--armory-bg-image) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        z-index: 1 !important;
    }

    #armory-tab-character #armory_wmv_container,
    #armory-tab-character #armory_3d_viewer > div:not(.armory-3d-overlay),
    #armory-tab-character #armory_3d_viewer canvas,
    #armory-tab-character #armory_3d_viewer .armory-3d-canvas,
    #armory-tab-character #armory_wmv_container > div,
    #armory-tab-character #armory_wmv_container canvas {
        position: absolute !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;

        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        transform: none !important;
        transform-origin: center center !important;
        box-sizing: border-box !important;

        z-index: 2 !important;
    }

    #armory-tab-character #armory_left,
    #armory-tab-character #armory_right {
        position: absolute !important;
        top: 10px !important;
        bottom: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;

        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        clear: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;

        transform: none !important;
        box-sizing: border-box !important;

        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    #armory-tab-character #armory_left {
        left: 8px !important;
        right: auto !important;
    }

    #armory-tab-character #armory_right {
        right: 8px !important;
        left: auto !important;
    }

    #armory-tab-character #armory_bottom {
        position: relative !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 18px auto 0 auto !important;
        padding: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        float: none !important;
        clear: both !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;

        transform: none !important;
        box-sizing: border-box !important;

        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    #armory-tab-character #armory_left .item,
    #armory-tab-character #armory_right .item,
    #armory-tab-character #armory_bottom .item,
    #armory-tab-character #armory_left .item > a,
    #armory-tab-character #armory_right .item > a,
    #armory-tab-character #armory_bottom .item > a,
    #armory-tab-character #armory_left .item > img,
    #armory-tab-character #armory_right .item > img,
    #armory-tab-character #armory_bottom .item > img,
    #armory-tab-character #armory_left .item a span[class*="icon"],
    #armory-tab-character #armory_right .item a span[class*="icon"],
    #armory-tab-character #armory_bottom .item a span[class*="icon"],
    #armory-tab-character #armory_left .item a span[class*="icon"] ins,
    #armory-tab-character #armory_right .item a span[class*="icon"] ins,
    #armory-tab-character #armory_bottom .item a span[class*="icon"] ins,
    #armory-tab-character #armory_left .item a .iconlarge,
    #armory-tab-character #armory_right .item a .iconlarge,
    #armory-tab-character #armory_bottom .item a .iconlarge,
    #armory-tab-character #armory_left .item a .iconmedium,
    #armory-tab-character #armory_right .item a .iconmedium,
    #armory-tab-character #armory_bottom .item a .iconmedium,
    #armory-tab-character #armory_left .item a .iconsmall,
    #armory-tab-character #armory_right .item a .iconsmall,
    #armory-tab-character #armory_bottom .item a .iconsmall,
    #armory-tab-character #armory_left .item a .icontiny,
    #armory-tab-character #armory_right .item a .icontiny,
    #armory-tab-character #armory_bottom .item a .icontiny,
    #armory-tab-character #armory_left .item a .iconlarge ins,
    #armory-tab-character #armory_right .item a .iconlarge ins,
    #armory-tab-character #armory_bottom .item a .iconlarge ins,
    #armory-tab-character #armory_left .item a .iconmedium ins,
    #armory-tab-character #armory_right .item a .iconmedium ins,
    #armory-tab-character #armory_bottom .item a .iconmedium ins,
    #armory-tab-character #armory_left .item a .iconsmall ins,
    #armory-tab-character #armory_right .item a .iconsmall ins,
    #armory-tab-character #armory_bottom .item a .iconsmall ins,
    #armory-tab-character #armory_left .item a .icontiny ins,
    #armory-tab-character #armory_right .item a .icontiny ins,
    #armory-tab-character #armory_bottom .item a .icontiny ins {
        position: relative !important;

        display: block !important;
        flex: 0 0 52px !important;

        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;

        margin: 0 !important;
        padding: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        float: none !important;
        clear: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        transform: none !important;
        box-sizing: border-box !important;

        z-index: 100000 !important;
        pointer-events: auto !important;
    }

    #armory-tab-character .armory-3d-overlay {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        padding: 6px 8px !important;
        z-index: 30 !important;
    }

    #armory-tab-character .armory-3d-title {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    #armory-tab-character .armory-3d-status,
    #armory-tab-character .armory-3d-debug {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 420px) {
    #armory-tab-character #armory_left,
    #armory-tab-character #armory_right {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        gap: 5px !important;
    }

    #armory-tab-character #armory_left {
        left: 6px !important;
    }

    #armory-tab-character #armory_right {
        right: 6px !important;
    }

    #armory-tab-character #armory_bottom {
        gap: 10px !important;
        margin-top: 14px !important;
    }

    #armory-tab-character #armory_left .item,
    #armory-tab-character #armory_right .item,
    #armory-tab-character #armory_bottom .item,
    #armory-tab-character #armory_left .item > a,
    #armory-tab-character #armory_right .item > a,
    #armory-tab-character #armory_bottom .item > a,
    #armory-tab-character #armory_left .item > img,
    #armory-tab-character #armory_right .item > img,
    #armory-tab-character #armory_bottom .item > img,
    #armory-tab-character #armory_left .item a span[class*="icon"],
    #armory-tab-character #armory_right .item a span[class*="icon"],
    #armory-tab-character #armory_bottom .item a span[class*="icon"],
    #armory-tab-character #armory_left .item a span[class*="icon"] ins,
    #armory-tab-character #armory_right .item a span[class*="icon"] ins,
    #armory-tab-character #armory_bottom .item a span[class*="icon"] ins {
        flex-basis: 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }
}


/* ARMORY 3D BACKGROUND RESTORE - SAFE PATCH
 * Patch minimal : restaure seulement le fond race dans le viewer 3D.
 * Ne change pas le placement des slots gauche/droite/bas.
 */
#armory-tab-character #armory_3d_viewer {
    /* patch-armory-viewer-remove-blue-bg-v1: ne plus afficher de fond bleu derrière le viewer. */
    background-color: transparent !important;
    background-image: var(--armory-bg-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

#armory-tab-character #armory_wmv_container,
#armory-tab-character #armory_wmv_container > div,
#armory-tab-character #armory_wmv_container canvas {
    background: transparent !important;
}


/* ARMORY 3D OVERLAY HIDDEN - DEBUG AVAILABLE
 * Cache la frame "Rendu 3D du personnage / Viewer chargé / pièces équipées".
 * Ne supprime rien : pour réactiver le debug, retirer seulement ce bloc.
 */
#armory-tab-character .armory-3d-overlay,
#armory_3d_viewer .armory-3d-overlay {
    display: none !important;
}

/* ============================================================
   ARMORY PVP RESPONSIVE TABLE SCROLL
   Objectif :
   - ne toucher qu'à l'onglet PvP ;
   - ne pas modifier le desktop ;
   - garder la table lisible en mobile ;
   - permettre le scroll horizontal local du tableau ;
   - éviter que la colonne Winrate soit coupée.
   ============================================================ */

@media (max-width: 767px) {
    #armory-tab-pvp .armory-pvp-box {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #armory-tab-pvp .armory-pvp-table-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        padding-bottom: 8px !important;
    }

    #armory-tab-pvp .armory-pvp-data-table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    #armory-tab-pvp .armory-pvp-bg-table {
        min-width: 560px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    #armory-tab-pvp .armory-pvp-bg-table th,
    #armory-tab-pvp .armory-pvp-bg-table td {
        white-space: nowrap !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #armory-tab-pvp .armory-pvp-bg-table th:first-child,
    #armory-tab-pvp .armory-pvp-bg-table td:first-child {
        min-width: 155px !important;
        white-space: normal !important;
    }

    #armory-tab-pvp .armory-pvp-bg-table th:last-child,
    #armory-tab-pvp .armory-pvp-bg-table td:last-child {
        min-width: 74px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 420px) {
    #armory-tab-pvp .armory-pvp-bg-table {
        min-width: 540px !important;
    }

    #armory-tab-pvp .armory-pvp-bg-table th:first-child,
    #armory-tab-pvp .armory-pvp-bg-table td:first-child {
        min-width: 145px !important;
    }
}

/* ============================================================
   END ARMORY PVP RESPONSIVE TABLE SCROLL
   ============================================================ */


/* patch-armory-mobile-viewer-crop-v1 */
@media (max-width: 760px) {
    /*
     * Mobile only.
     * Réduit la grande réserve verticale du paperdoll 3D.
     * Cause: l'ancien layout mobile conserve une frame 820x890 avec viewer 820x795,
     * ce qui laisse un gros bloc sombre sous le personnage.
     */
    #armory-tab-character #armory {
        min-height: 650px !important;
        margin-bottom: 28px !important;
        background-size: 820px 560px !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    #armory-tab-character #armory_3d_viewer {
        height: 560px !important;
        min-height: 560px !important;
        max-height: 560px !important;
        overflow: hidden !important;
    }

    #armory-tab-character #armory_wmv_container,
    #armory-tab-character #armory_3d_viewer > div:not(.armory-3d-overlay),
    #armory-tab-character #armory_3d_viewer canvas,
    #armory-tab-character #armory_3d_viewer .armory-3d-canvas,
    #armory-tab-character #armory_wmv_container > div,
    #armory-tab-character #armory_wmv_container canvas {
        height: 560px !important;
        min-height: 560px !important;
        max-height: 560px !important;
    }

    #armory-tab-character #armory_bottom {
        margin-top: 8px !important;
        transform: translateY(-4px) !important;
    }
}

@media (max-width: 420px) {
    #armory-tab-character #armory {
        min-height: 620px !important;
        margin-bottom: 22px !important;
    }

    #armory-tab-character #armory_3d_viewer {
        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;
    }

    #armory-tab-character #armory_wmv_container,
    #armory-tab-character #armory_3d_viewer > div:not(.armory-3d-overlay),
    #armory-tab-character #armory_3d_viewer canvas,
    #armory-tab-character #armory_3d_viewer .armory-3d-canvas,
    #armory-tab-character #armory_wmv_container > div,
    #armory-tab-character #armory_wmv_container canvas {
        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;
    }
}
/* /patch-armory-mobile-viewer-crop-v1 */