/* ========================================================================== */
/* SUPREM CONQUEST — RESPONSIVE GLOBAL DESKTOP                                */
/* V32.5 — 2026-08-10                                                        */
/*                                                                            */
/* Objectif :                                                                */
/* - 1920x1080 et moins : rendu actuel strictement conservé.                  */
/* - 2560x1440 / écrans 2K : interface plus lisible et zones de jeu élargies. */
/* - Ultrawide 21:9 / 32:9 : interface centrée avec plafond de lecture.       */
/* - 4K : troisième palier, sans étirer les panneaux sur toute la dalle.      */
/*                                                                            */
/* Ce fichier doit rester chargé EN DERNIER dans les pages HTML.              */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 2560 x 1080 / ultrawide bas : on profite de la largeur sans prendre trop   */
/* de hauteur. Ce palier ne touche jamais au 1920x1080.                       */
/* -------------------------------------------------------------------------- */
@media (min-width: 2400px) and (max-height: 1099px) {
    html { font-size: 16.5px; }

    body {
        --suprem-shell-max: 1880px;
        --suprem-shell-narrow: 1700px;
        --suprem-shell-wide: 2140px;
        --suprem-gutter: 34px;
    }

    body:not(.pixi-page) :is(
        .ultra-hero,
        .village-layout,
        .academy-layout,
        .caserne-layout,
        .forge-layout,
        .architecte-page,
        .alliance-shell,
        .alliance-public-shell,
        .friends-shell,
        .chief-center-layout,
        .tavern-layout,
        .market-shell,
        .messaging-layout,
        .walls-layout,
        .kingdom-layout,
        .wiki-shell,
        .account-shell,
        .landing-shell,
        .admin-layout,
        .shared-report-shell
    ) {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-max)) !important;
        max-width: var(--suprem-shell-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.pixi-page #main-content.pixi-layout,
    body.pixi-page .pixi-layout {
        width: min(calc(100vw - 24px), var(--suprem-shell-wide)) !important;
        max-width: var(--suprem-shell-wide) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.account-dashboard-v2 #main-content.account-shell,
    body.account-management-v2 .account-shell {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
    }

    #main-content.messaging-layout,
    .messaging-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
        grid-template-columns: 420px minmax(0, 1fr) !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 2K / 2560x1440. Le seuil 2040 permet aussi de fonctionner quand Windows    */
/* applique une légère mise à l'échelle et réduit la largeur CSS disponible.  */
/* -------------------------------------------------------------------------- */
@media (min-width: 2040px) and (min-height: 1100px) {
    html { font-size: 17.5px; }

    body {
        --suprem-shell-max: 2020px;
        --suprem-shell-narrow: 1780px;
        --suprem-shell-wide: 2380px;
        --suprem-gutter: 48px;
    }

    /* Tous les grands conteneurs du jeu utilisent désormais le même langage. */
    body:not(.pixi-page) :is(
        .ultra-hero,
        .village-layout,
        .academy-layout,
        .caserne-layout,
        .forge-layout,
        .architecte-page,
        .alliance-shell,
        .alliance-command-shell,
        .alliance-public-shell,
        .friends-shell,
        .chief-center-layout,
        .tavern-layout,
        .hero-center-layout,
        .market-shell,
        .messaging-layout,
        .walls-layout,
        .kingdom-layout,
        .wiki-shell,
        .account-shell,
        .landing-shell,
        .admin-layout,
        .shared-report-shell
    ) {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-max)) !important;
        max-width: var(--suprem-shell-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Les pages naturellement plus étroites restent confortables à lire. */
    body.account-dashboard-v2 #main-content.account-shell,
    body.account-management-v2 .account-shell,
    body.shared-report-page .shared-report-shell,
    body.ultra-page #main-content.walls-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
    }

    /* La carte peut utiliser beaucoup plus de dalle : elle n'est pas un texte. */
    body.pixi-page #main-content.pixi-layout,
    body.pixi-page .pixi-layout {
        width: min(calc(100vw - 28px), var(--suprem-shell-wide)) !important;
        max-width: var(--suprem-shell-wide) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Académie / bâtiments : la colonne latérale gagne elle aussi en lisibilité. */
    body.academy-page #main-content.academy-layout {
        grid-template-columns: 260px minmax(0, 1fr) 360px !important;
        gap: 22px !important;
    }

    body.building-workspace-page #main-content.caserne-layout,
    body.building-workspace-page #main-content.forge-layout {
        gap: 22px !important;
    }

    /* Messagerie : le panneau de conversations n'est plus minuscule en 1440p. */
    #main-content.messaging-layout,
    .messaging-layout,
    .premium-messaging-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
        grid-template-columns: 450px minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    /* Chefs / héros : agrandissement contrôlé de la liste latérale. */
    .chief-command-shell {
        grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    /* Profil alliance : donne un peu plus d'espace aux informations latérales. */
    .alliance-public-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(380px, .78fr) !important;
        gap: 18px !important;
    }

    /* Compte / admin / royaume / marché : espaces plus respirants sans zoom. */
    body.account-dashboard-v2 #main-content.account-shell,
    body.account-management-v2 .account-shell,
    .admin-layout,
    .kingdom-layout,
    .market-shell,
    .friends-shell,
    .chief-center-layout,
    .tavern-layout,
    .wiki-shell,
    .alliance-shell,
    .alliance-public-shell,
    .architecte-page {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    /* Carte : les contrôles sont majoritairement en px dans son CSS historique. */
    body.pixi-page :is(
        .pixi-toolbar-controls button,
        .pixi-insights-grid button,
        .pixi-map-footer button,
        .map-village-select,
        .territory-filter-select,
        .pixi-select-wrap select,
        .pixi-nearby-filters select,
        .coordinates-input input
    ) {
        min-height: 44px !important;
    }

    body.pixi-page :is(
        .pixi-village-switch > label,
        .territory-filter-group > label,
        .pixi-select-wrap > span,
        .world-chip > span,
        .world-chip small
    ) {
        font-size: 10.5px !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Ultrawide 3440x1440 / 3200+ : plus gros, mais toujours centré.             */
/* -------------------------------------------------------------------------- */
@media (min-width: 3000px) and (min-height: 1200px) {
    html { font-size: 18.5px; }

    body {
        --suprem-shell-max: 2380px;
        --suprem-shell-narrow: 2050px;
        --suprem-shell-wide: 3180px;
        --suprem-gutter: 72px;
    }

    body:not(.pixi-page) :is(
        .ultra-hero,
        .village-layout,
        .academy-layout,
        .caserne-layout,
        .forge-layout,
        .architecte-page,
        .alliance-shell,
        .alliance-command-shell,
        .alliance-public-shell,
        .friends-shell,
        .chief-center-layout,
        .tavern-layout,
        .hero-center-layout,
        .market-shell,
        .messaging-layout,
        .walls-layout,
        .kingdom-layout,
        .wiki-shell,
        .account-shell,
        .landing-shell,
        .admin-layout,
        .shared-report-shell
    ) {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-max)) !important;
        max-width: var(--suprem-shell-max) !important;
    }

    body.account-dashboard-v2 #main-content.account-shell,
    body.account-management-v2 .account-shell,
    body.shared-report-page .shared-report-shell,
    body.ultra-page #main-content.walls-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
    }

    body.pixi-page #main-content.pixi-layout,
    body.pixi-page .pixi-layout {
        width: min(calc(100vw - 36px), var(--suprem-shell-wide)) !important;
        max-width: var(--suprem-shell-wide) !important;
    }

    body.academy-page #main-content.academy-layout {
        grid-template-columns: 280px minmax(0, 1fr) 390px !important;
        gap: 26px !important;
    }

    #main-content.messaging-layout,
    .messaging-layout,
    .premium-messaging-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
        grid-template-columns: 500px minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .chief-command-shell {
        grid-template-columns: minmax(330px, 420px) minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .alliance-public-grid {
        grid-template-columns: minmax(0, 1.75fr) minmax(420px, .8fr) !important;
        gap: 22px !important;
    }

    body.pixi-page :is(
        .pixi-toolbar-controls button,
        .pixi-insights-grid button,
        .pixi-map-footer button,
        .map-village-select,
        .territory-filter-select,
        .pixi-select-wrap select,
        .pixi-nearby-filters select,
        .coordinates-input input
    ) {
        min-height: 48px !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 4K / grands écrans de bureau.                                             */
/* -------------------------------------------------------------------------- */
@media (min-width: 3700px) and (min-height: 1550px) {
    html { font-size: 20px; }

    body {
        --suprem-shell-max: 2680px;
        --suprem-shell-narrow: 2280px;
        --suprem-shell-wide: 3600px;
        --suprem-gutter: 96px;
    }

    body:not(.pixi-page) :is(
        .ultra-hero,
        .village-layout,
        .academy-layout,
        .caserne-layout,
        .forge-layout,
        .architecte-page,
        .alliance-shell,
        .alliance-command-shell,
        .alliance-public-shell,
        .friends-shell,
        .chief-center-layout,
        .tavern-layout,
        .hero-center-layout,
        .market-shell,
        .messaging-layout,
        .walls-layout,
        .kingdom-layout,
        .wiki-shell,
        .account-shell,
        .landing-shell,
        .admin-layout,
        .shared-report-shell
    ) {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-max)) !important;
        max-width: var(--suprem-shell-max) !important;
    }

    body.account-dashboard-v2 #main-content.account-shell,
    body.account-management-v2 .account-shell,
    body.shared-report-page .shared-report-shell,
    body.ultra-page #main-content.walls-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
    }

    body.pixi-page #main-content.pixi-layout,
    body.pixi-page .pixi-layout {
        width: min(calc(100vw - 48px), var(--suprem-shell-wide)) !important;
        max-width: var(--suprem-shell-wide) !important;
    }

    body.academy-page #main-content.academy-layout {
        grid-template-columns: 300px minmax(0, 1fr) 430px !important;
    }

    #main-content.messaging-layout,
    .messaging-layout,
    .premium-messaging-layout {
        width: min(calc(100vw - var(--suprem-gutter)), var(--suprem-shell-narrow)) !important;
        max-width: var(--suprem-shell-narrow) !important;
        grid-template-columns: 550px minmax(0, 1fr) !important;
    }

    .chief-command-shell {
        grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 21:9 / 32:9 : les pages de gestion restent regroupées au centre.           */
/* La carte reste volontairement plus large.                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 2800px) and (min-aspect-ratio: 21/9) {
    body:not(.pixi-page) :is(
        .ultra-hero,
        .village-layout,
        .academy-layout,
        .caserne-layout,
        .forge-layout,
        .architecte-page,
        .alliance-shell,
        .alliance-command-shell,
        .alliance-public-shell,
        .friends-shell,
        .chief-center-layout,
        .tavern-layout,
        .hero-center-layout,
        .market-shell,
        .messaging-layout,
        .walls-layout,
        .kingdom-layout,
        .wiki-shell,
        .account-shell,
        .landing-shell,
        .admin-layout,
        .shared-report-shell
    ) {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.pixi-page) :is(.panel, .kingdom-panel, .academy-panel) {
        min-width: 0;
    }
}


/* -------------------------------------------------------------------------- */
/* Pages avec #main-content sans classe de shell dédiée.                      */
/* -------------------------------------------------------------------------- */
@media (min-width: 2400px) and (max-height: 1099px) {
    /* Le classement reste proportionné à la nav (.top-bar va jusqu'à ~1480-1880px selon
       le palier, cf. nav-unified.css) plutôt que de monter jusqu'à 1880-2680px comme avant :
       ce n'était pas la cause du décentrage rapporté (voir le vrai correctif dans
       nav-unified.css, .main-header oubliait margin:auto au-delà de 2200px), mais un contenu
       presque deux fois plus large que la nav restait disproportionné une fois recentré. */
    body.ranking-page #main-content {
        width: min(calc(100vw - 34px), 1480px) !important;
        max-width: 1480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.registration-page #main-content,
    body.registration-page .ultra-hero {
        width: min(calc(100vw - 34px), 1240px) !important;
        max-width: 1240px !important;
    }
}

@media (min-width: 2040px) and (min-height: 1100px) {
    body.ranking-page #main-content {
        width: min(calc(100vw - 48px), 1560px) !important;
        max-width: 1560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.registration-page #main-content,
    body.registration-page .ultra-hero {
        width: min(calc(100vw - 48px), 1320px) !important;
        max-width: 1320px !important;
    }
}

@media (min-width: 3000px) and (min-height: 1200px) {
    body.ranking-page #main-content {
        width: min(calc(100vw - 72px), 1680px) !important;
        max-width: 1680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.registration-page #main-content,
    body.registration-page .ultra-hero {
        width: min(calc(100vw - 72px), 1460px) !important;
        max-width: 1460px !important;
    }
}

@media (min-width: 3700px) and (min-height: 1550px) {
    body.ranking-page #main-content {
        width: min(calc(100vw - 96px), 1800px) !important;
        max-width: 1800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.registration-page #main-content,
    body.registration-page .ultra-hero {
        width: min(calc(100vw - 96px), 1600px) !important;
        max-width: 1600px !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Carte WebGL : son CSS historique contient beaucoup de tailles en pixels.   */
/* On agrandit donc les commandes importantes sans toucher au canvas.         */
/* -------------------------------------------------------------------------- */
@media (min-width: 2040px) and (min-height: 1100px) {
    body.pixi-page .ultra-hero-sub { font-size: 14px !important; }
    body.pixi-page .ultra-chip { min-height: 40px !important; padding: 9px 13px !important; font-size: 12px !important; }
    body.pixi-page .ultra-chip-ico { font-size: 16px !important; }
    body.pixi-page .world-chip > span,
    body.pixi-page .world-chip small { font-size: 10.5px !important; }
    body.pixi-page .pixi-toolbar-controls { max-width: 1600px !important; }
}

@media (min-width: 3000px) and (min-height: 1200px) {
    body.pixi-page .ultra-hero-sub { font-size: 15px !important; }
    body.pixi-page .ultra-chip { min-height: 44px !important; padding: 10px 14px !important; font-size: 13px !important; }
    body.pixi-page .ultra-chip-ico { font-size: 17px !important; }
    body.pixi-page .pixi-toolbar-controls { max-width: 1900px !important; }
}

/* -------------------------------------------------------------------------- */
/* Galaxie WebGL : panneaux HUD en px, adaptation explicite.                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 2040px) and (min-height: 1100px) {
    .galaxy-topbar { top:22px !important; left:22px !important; right:22px !important; padding:14px 16px !important; }
    .galaxy-brand p { font-size:11px !important; }
    .galaxy-brand h1 { font-size:25px !important; }
    .brand-orbit { width:40px !important; height:40px !important; }
    .dev-badge { font-size:11px !important; padding:7px 10px !important; }
    .world-picker span { font-size:10px !important; }
    .world-picker select, .top-action { min-height:44px !important; padding:9px 13px !important; }

    .galaxy-summary { top:108px !important; left:22px !important; width:400px !important; padding:20px !important; }
    .galaxy-inspector { top:108px !important; right:22px !important; bottom:88px !important; width:440px !important; padding:20px !important; }
    .panel-kicker { font-size:11px !important; }
    .galaxy-summary h2, .galaxy-inspector h2 { font-size:24px !important; }
    .panel-copy { font-size:14px !important; }
    .galaxy-stat-grid strong { font-size:19px !important; }
    .galaxy-stat-grid span { font-size:10px !important; }
    .galaxy-label { font-size:12px !important; }
    .galaxy-label.compact { font-size:10px !important; }
    .galaxy-tooltip { min-width:190px !important; max-width:290px !important; font-size:12px !important; }
    .galaxy-controls { left:22px !important; bottom:88px !important; }
    .galaxy-controls button { width:42px !important; height:42px !important; font-size:22px !important; }
    .galaxy-legend { left:82px !important; bottom:88px !important; max-width:620px !important; font-size:11px !important; }
    .galaxy-bottom-bar { left:22px !important; right:22px !important; bottom:18px !important; min-height:54px !important; }
    .coordinate-readout { font-size:11px !important; }
    .travel-readout { font-size:12px !important; }
}

@media (min-width: 3000px) and (min-height: 1200px) {
    .galaxy-topbar { top:26px !important; left:26px !important; right:26px !important; padding:16px 18px !important; }
    .galaxy-brand p { font-size:12px !important; }
    .galaxy-brand h1 { font-size:28px !important; }
    .brand-orbit { width:44px !important; height:44px !important; }
    .world-picker select, .top-action { min-height:48px !important; }
    .galaxy-summary { top:120px !important; left:26px !important; width:440px !important; padding:22px !important; }
    .galaxy-inspector { top:120px !important; right:26px !important; bottom:96px !important; width:480px !important; padding:22px !important; }
    .galaxy-summary h2, .galaxy-inspector h2 { font-size:27px !important; }
    .panel-copy { font-size:15px !important; }
    .galaxy-label { font-size:13px !important; padding:6px 10px !important; }
    .galaxy-label.compact { font-size:11px !important; }
    .galaxy-tooltip { min-width:210px !important; max-width:320px !important; font-size:13px !important; }
    .galaxy-controls { left:26px !important; bottom:96px !important; }
    .galaxy-controls button { width:46px !important; height:46px !important; font-size:24px !important; }
    .galaxy-legend { left:90px !important; bottom:96px !important; max-width:720px !important; font-size:12px !important; }
    .galaxy-bottom-bar { left:26px !important; right:26px !important; bottom:20px !important; min-height:58px !important; }
}

@media (min-width: 3700px) and (min-height: 1550px) {
    .galaxy-topbar { top:30px !important; left:30px !important; right:30px !important; padding:18px 20px !important; }
    .galaxy-brand p { font-size:13px !important; }
    .galaxy-brand h1 { font-size:31px !important; }
    .brand-orbit { width:48px !important; height:48px !important; }
    .dev-badge { font-size:12px !important; }
    .world-picker select, .top-action { min-height:52px !important; padding:10px 15px !important; }
    .galaxy-summary { top:134px !important; left:30px !important; width:480px !important; padding:24px !important; }
    .galaxy-inspector { top:134px !important; right:30px !important; bottom:106px !important; width:530px !important; padding:24px !important; }
    .galaxy-summary h2, .galaxy-inspector h2 { font-size:30px !important; }
    .panel-copy { font-size:16px !important; }
    .galaxy-stat-grid strong { font-size:22px !important; }
    .galaxy-stat-grid span { font-size:11px !important; }
    .galaxy-label { font-size:14px !important; }
    .galaxy-label.compact { font-size:12px !important; }
    .galaxy-tooltip { min-width:230px !important; max-width:350px !important; font-size:14px !important; }
    .galaxy-controls { left:30px !important; bottom:106px !important; }
    .galaxy-controls button { width:50px !important; height:50px !important; font-size:26px !important; }
    .galaxy-legend { left:98px !important; bottom:106px !important; max-width:800px !important; font-size:13px !important; }
    .galaxy-bottom-bar { left:30px !important; right:30px !important; bottom:22px !important; min-height:64px !important; }
}

/* ========================================================================== */
/* Compatibilité Brave / Safari / WebKit - barres de progression globales    */
/* ========================================================================== */
/* Les couleurs solides restent valides même si un ancien WebKit ignore       */
/* color-mix(), certains gradients ou une transition CSS.                     */
.construction-bar,
.movement-progress,
.caserne-progress,
.forge-progress,
.academy-progress,
.architecte-progress,
.research-progress,
.rw-progress,
.progress-bar,
.challenge-progress,
.referral-progress,
.prestige-bar,
.chief-progress,
.chief-status-meter,
.chief-roster-progress,
.hero-roster-progress,
.tavern-xp,
.kingdom-progress,
.profile-prestige-bar,
.speed-ranked-mini-progress {
    position: relative;
    overflow: hidden;
    background-color: rgba(255,255,255,.08);
}

.construction-progress,
.movement-progress > span,
.caserne-progress > span,
.forge-progress-bar,
.academy-progress-bar,
.architecte-progress > i,
.research-progress > span,
.research-progress > i,
.rw-progress > span,
.progress-fill,
.challenge-progress > span,
.referral-progress > span,
.prestige-bar > span,
.chief-progress > span,
.chief-status-meter > i,
.chief-roster-progress > i,
.hero-roster-progress > i,
.tavern-xp > span,
.kingdom-progress > span,
.profile-prestige-bar > span,
.speed-ranked-mini-progress > i {
    display: block;
    height: 100%;
    min-width: 2px;
    background-color: #579ad8;
    -webkit-transition: width .28s linear;
    transition: width .28s linear;
}

/* Le navigateur natif <progress> reste lisible si une future page l'utilise. */
progress {
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255,255,255,.08);
}
progress::-webkit-progress-bar { background-color: rgba(255,255,255,.08); border-radius: 999px; }
progress::-webkit-progress-value { background-color: #579ad8; border-radius: 999px; }
progress::-moz-progress-bar { background-color: #579ad8; border-radius: 999px; }

@supports (-webkit-touch-callout: none) {
    /* Les gros flous + fonds fixes sont coûteux dans les WebView iOS. */
    .page-overlay,
    .pixi-page-bg {
        background-attachment: scroll !important;
    }
    .construction-progress,
    .movement-progress > span,
    .caserne-progress > span,
    .forge-progress-bar,
    .academy-progress-bar,
    .architecte-progress > i,
    .research-progress > span,
    .research-progress > i,
    .rw-progress > span,
    .progress-fill {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}