/* V23 - Navigation principale harmonisee sur le style du menu Compte */
.top-bar {
    position: relative !important;
    z-index: 90 !important;
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 8px auto 0 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    overflow: visible !important;
    /* V24 : les anciens thèmes appliquent un clip-path sur .top-bar.
       Il coupait totalement le menu Compte dès qu'il dépassait de la barre. */
    clip-path: none !important;
    font-family: Inter, Arial, sans-serif !important;
    background: linear-gradient(180deg, rgba(8, 17, 32, .92), rgba(5, 12, 24, .96)) !important;
    border: 1px solid rgba(95, 166, 255, .18) !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(125, 210, 255, .09) !important;
}

.top-bar::before,
.top-bar::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    width: 74px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(104, 213, 255, .95)) !important;
    pointer-events: none !important;
}
.top-bar::before { left: 52px !important; }
.top-bar::after { right: 52px !important; transform: scaleX(-1) !important; }

.top-bar > button,
.top-bar > a,
.top-bar > .player-menu-nav > summary {
    box-sizing: border-box !important;
    position: relative !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(105, 164, 255, .20) !important;
    border-radius: 0 !important;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%) !important;
    background: linear-gradient(180deg, rgba(23, 40, 72, .94), rgba(8, 18, 34, .96)) !important;
    color: #eef5ff !important;
    box-shadow: inset 0 1px 0 rgba(159, 219, 255, .08), 0 10px 24px rgba(0,0,0,.18) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.top-bar > button:hover,
.top-bar > a:hover,
.top-bar > .player-menu-nav > summary:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(115, 204, 255, .55) !important;
    box-shadow: 0 0 0 1px rgba(69, 154, 255, .18), 0 0 22px rgba(39, 142, 255, .22), inset 0 1px 0 rgba(188, 237, 255, .14) !important;
}

.top-bar > button.active,
.top-bar > button.is-active,
.top-bar > a.active,
.top-bar > a.is-active,
.top-bar > .player-menu-nav.is-active > summary,
.top-bar > .player-menu-nav[open] > summary {
    background: linear-gradient(180deg, rgba(37, 115, 235, .96), rgba(18, 58, 128, .98)) !important;
    border-color: rgba(126, 207, 255, .62) !important;
    box-shadow: 0 0 0 1px rgba(76, 160, 255, .20), 0 0 26px rgba(37, 119, 255, .32), inset 0 1px 0 rgba(213, 244, 255, .18) !important;
}

.top-bar > button:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.player-menu-nav {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    z-index: 130;
}
.player-menu-nav > summary { list-style: none; }
.player-menu-nav > summary::-webkit-details-marker { display: none; }
.player-menu-nav > summary::marker { display: none; content: ""; }
.nav-menu-chevron {
    margin-left: 2px;
    font-size: 10px;
    opacity: .72;
    transition: transform .18s ease;
}
.player-menu-nav[open] .nav-menu-chevron { transform: rotate(180deg); }

.player-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 228px;
    padding: 8px;
    display: grid;
    gap: 6px;
    background: linear-gradient(180deg, rgba(10, 22, 42, .99), rgba(5, 12, 24, .99));
    border: 1px solid rgba(104, 192, 255, .27);
    box-shadow: 0 22px 50px rgba(0,0,0,.48), inset 0 1px 0 rgba(160,220,255,.07);
    z-index: 500;
}
.player-menu-panel::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(10, 22, 42, .99);
    border-left: 1px solid rgba(104, 192, 255, .27);
    border-top: 1px solid rgba(104, 192, 255, .27);
}
.top-bar .player-menu-panel a {
    min-height: 42px !important;
    padding: 0 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    color: #dcecff !important;
    background: rgba(24, 42, 72, .52) !important;
    border: 1px solid rgba(112, 174, 255, .12) !important;
    border-radius: 8px !important;
    clip-path: none !important;
    box-shadow: none !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.top-bar .player-menu-panel a:hover,
.top-bar .player-menu-panel a.is-active {
    transform: none !important;
    color: #fff !important;
    border-color: rgba(100, 207, 255, .42) !important;
    background: linear-gradient(180deg, rgba(38, 107, 195, .68), rgba(22, 55, 108, .72)) !important;
}

.admin-only-nav[hidden] { display: none !important; }

@media (max-width: 760px) {
    .top-bar {
        width: calc(100% - 18px) !important;
        padding: 10px !important;
        gap: 8px !important;
    }
    .top-bar > button,
    .top-bar > a,
    .top-bar > .player-menu-nav {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 124px !important;
    }
    .top-bar > .player-menu-lang-switch {
        flex: 1 1 100% !important;
        border-top: none !important;
    }
    .top-bar > .player-menu-nav > summary {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    .top-bar > button,
    .top-bar > a {
        min-height: 44px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    .player-menu-panel {
        left: 0;
        right: auto;
        transform: none;
        width: min(260px, calc(100vw - 36px));
    }
    .player-menu-panel::before { left: 34%; }
}


/* V24 - menu Compte toujours visible au-dessus du contenu */
.main-header,
.account-header {
    overflow: visible !important;
}
.main-header:has(.player-menu-nav[open]),
.account-header:has(.player-menu-nav[open]) {
    z-index: 10000 !important;
}
.player-menu-nav[open] {
    z-index: 10001 !important;
}
.player-menu-nav[open] > .player-menu-panel {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10002 !important;
}
.player-menu-nav:not([open]) > .player-menu-panel {
    display: none !important;
}

/* =========================================================
   V30 - Navigation joueur canonique
   La page Village est la reference visuelle sur toutes les
   pages de jeu, sauf la page Compte (.account-body).
   ========================================================= */
body:not(.account-body) .top-bar,
body.pixi-page:not(.account-body) .top-bar.pixi-nav {
    position: relative !important;
    top: auto !important;
    z-index: 10020 !important;
    box-sizing: border-box !important;
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 8px auto 0 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    overflow: visible !important;
    clip-path: none !important;
    border: 1px solid rgba(95, 166, 255, .18) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(8, 17, 32, .92), rgba(5, 12, 24, .96)) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(125, 210, 255, .09) !important;
    backdrop-filter: none !important;
    font-family: Inter, Arial, sans-serif !important;
}

/* Neutralise les anciens cadres specifiques de la WebGL. */
body.pixi-page:not(.account-body) .top-bar.pixi-nav::before,
body.pixi-page:not(.account-body) .top-bar.pixi-nav::after,
body:not(.account-body) .top-bar::before,
body:not(.account-body) .top-bar::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    width: 74px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(104, 213, 255, .95)) !important;
    pointer-events: none !important;
}
body:not(.account-body) .top-bar::before,
body.pixi-page:not(.account-body) .top-bar.pixi-nav::before {
    left: 52px !important;
    right: auto !important;
}
body:not(.account-body) .top-bar::after,
body.pixi-page:not(.account-body) .top-bar.pixi-nav::after {
    right: 52px !important;
    left: auto !important;
    transform: scaleX(-1) !important;
}

body:not(.account-body) .top-bar > button,
body:not(.account-body) .top-bar > a,
body:not(.account-body) .top-bar > .player-menu-nav > summary,
body.pixi-page:not(.account-body) .top-bar.pixi-nav > button,
body.pixi-page:not(.account-body) .top-bar.pixi-nav > a,
body.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav > summary {
    box-sizing: border-box !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(105, 164, 255, .20) !important;
    border-radius: 0 !important;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%) !important;
    background: linear-gradient(180deg, rgba(23, 40, 72, .94), rgba(8, 18, 34, .96)) !important;
    color: #eef5ff !important;
    box-shadow: inset 0 1px 0 rgba(159, 219, 255, .08), 0 10px 24px rgba(0,0,0,.18) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

body:not(.account-body) .top-bar > button::before,
body:not(.account-body) .top-bar > a::before,
body.pixi-page:not(.account-body) .top-bar.pixi-nav > button::before {
    content: none !important;
}

body:not(.account-body) .top-bar > button:hover,
body:not(.account-body) .top-bar > a:hover,
body:not(.account-body) .top-bar > .player-menu-nav > summary:hover,
body:not(.account-body) .top-bar > button.active,
body:not(.account-body) .top-bar > button.is-active,
body:not(.account-body) .top-bar > a.active,
body:not(.account-body) .top-bar > a.is-active,
body:not(.account-body) .top-bar > .player-menu-nav.is-active > summary,
body:not(.account-body) .top-bar > .player-menu-nav[open] > summary {
    transform: translateY(-1px) !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(37, 115, 235, .96), rgba(18, 58, 128, .98)) !important;
    border-color: rgba(126, 207, 255, .62) !important;
    box-shadow: 0 0 0 1px rgba(76, 160, 255, .20), 0 0 26px rgba(37, 119, 255, .32), inset 0 1px 0 rgba(213, 244, 255, .18) !important;
}

body:not(.account-body) .top-bar > button:disabled,
body.pixi-page:not(.account-body) .top-bar.pixi-nav > button:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Le menu Compte ne doit jamais etre coupe par la carte/canvas. */
body:not(.account-body) .main-header,
body.pixi-page:not(.account-body) .main-header,
body:not(.account-body) .wiki-main-header,
body:not(.account-body) .academy-premium-header {
    position: relative !important;
    overflow: visible !important;
    z-index: 10010 !important;
}
body:not(.account-body) .top-bar .player-menu-nav {
    position: relative !important;
    overflow: visible !important;
    z-index: 10030 !important;
}
body:not(.account-body) .top-bar .player-menu-nav[open] {
    z-index: 10050 !important;
}
body:not(.account-body) .top-bar .player-menu-panel,
body.pixi-page:not(.account-body) .top-bar.pixi-nav .player-menu-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 228px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px !important;
    overflow: visible !important;
    clip-path: none !important;
    z-index: 10060 !important;
}
body:not(.account-body) .top-bar .player-menu-nav[open] > .player-menu-panel {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (max-width: 820px) {
    body:not(.account-body) .top-bar,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav {
        display: flex !important;
        grid-template-columns: none !important;
        width: calc(100% - 18px) !important;
        max-width: none !important;
        padding: 10px !important;
        gap: 8px !important;
        overflow: visible !important;
        clip-path: none !important;
    }

    body:not(.account-body) .top-bar > button,
    body:not(.account-body) .top-bar > a,
    body:not(.account-body) .top-bar > .player-menu-nav,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > button,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > a,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav {
        flex: 1 1 calc(50% - 8px) !important;
        width: auto !important;
        min-width: 124px !important;
        max-width: none !important;
    }

    body:not(.account-body) .top-bar > button,
    body:not(.account-body) .top-bar > a,
    body:not(.account-body) .top-bar > .player-menu-nav > summary,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > button,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > a,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav > summary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    body:not(.account-body) .top-bar .player-menu-panel,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav .player-menu-panel {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        width: min(260px, calc(100vw - 36px)) !important;
    }
}


/* V31 — Royaume intégré à la navigation principale */
body:not(.account-body) .top-bar > .kingdom-menu-nav > summary {
    min-width: 128px !important;
}

.kingdom-menu-panel {
    width: 270px !important;
    gap: 5px !important;
    max-height: min(72vh, 560px);
    overflow-y: auto;
}

.kingdom-menu-caption {
    padding: 5px 8px 7px;
    color: rgba(159, 213, 255, .68);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(110, 177, 255, .12);
    margin-bottom: 2px;
}

.top-bar .kingdom-menu-panel a {
    position: relative;
    min-height: 44px !important;
}


.top-bar .kingdom-menu-panel a[data-kingdom-entry="arena"],
.top-bar .kingdom-menu-panel a[data-kingdom-entry="crafting"] {
    border-color: rgba(218, 173, 72, .34);
    background: linear-gradient(135deg, rgba(117, 74, 18, .28), rgba(41, 87, 141, .24));
}

.top-bar .kingdom-menu-panel a.is-active::after {
    content: "";
    position: absolute;
    right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #73d9ff;
    box-shadow: 0 0 10px rgba(77, 195, 255, .85);
}

@media (max-width: 760px) {
    .kingdom-menu-panel {
        width: min(280px, calc(100vw - 36px)) !important;
    }
}

/* Notifications alliance disponibles sur toutes les pages, y compris la carte WebGL. */
.top-bar .nav-badge {
    position: absolute;
    top: 3px;
    right: 7px;
    z-index: 3;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: linear-gradient(180deg, #438df4, #2258b4);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(31, 94, 190, .34);
    pointer-events: none;
}
.top-bar .nav-badge.forum {
    background: linear-gradient(180deg, #35b98d, #176e58);
    box-shadow: 0 5px 14px rgba(30, 155, 113, .32);
}
.top-bar .nav-badge.danger {
    background: linear-gradient(180deg, #ef5b61, #a91f2c);
    box-shadow: 0 5px 15px rgba(210, 42, 55, .42);
}

/* Le badge Alliance ouvre un panneau de notifications au clic (les autres badges de la nav
   restent purement décoratifs, cf. pointer-events:none ci-dessus). */
.top-bar [data-nav-role="alliance"] .nav-badge {
    pointer-events: auto;
    cursor: pointer;
}
.top-bar [data-nav-role="alliance"] .nav-badge:hover {
    filter: brightness(1.15);
    transform: scale(1.08);
}

.alliance-notif-panel {
    position: fixed;
    z-index: 400;
    width: min(340px, calc(100vw - 16px));
    max-height: min(480px, calc(100vh - 120px));
    overflow-y: auto;
    border: 1px solid rgba(95, 166, 255, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(8, 16, 30, .98), rgba(5, 11, 20, .98));
    box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
    color: #edf6ff;
    font-family: Inter, Arial, sans-serif;
    backdrop-filter: blur(10px);
}
.alliance-notif-panel-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148,163,184,.16);
    background: inherit;
}
.alliance-notif-panel-head strong { font-size: .92rem; }
.alliance-notif-mark-all {
    border: 1px solid rgba(103,232,249,.28);
    background: rgba(8,47,73,.4);
    color: #cdeeff;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
}
.alliance-notif-mark-all:hover { background: rgba(14,116,144,.5); }
.alliance-notif-panel-body { padding: 8px; display: grid; gap: 10px; }
.alliance-notif-loading, .alliance-notif-empty {
    padding: 18px 10px;
    text-align: center;
    color: #8fa8c1;
    font-size: .82rem;
}
.alliance-notif-category h4 {
    margin: 4px 6px 6px;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8fa8c1;
}
.alliance-notif-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(20,37,64,.4);
    border-radius: 10px;
    padding: 9px 11px;
    margin-bottom: 6px;
    color: #edf6ff;
    cursor: pointer;
}
.alliance-notif-item:hover { border-color: rgba(103,232,249,.4); background: rgba(20,37,64,.65); }
.alliance-notif-item strong { display: block; font-size: .85rem; margin-bottom: 2px; }
.alliance-notif-item p { margin: 0 0 4px; font-size: .78rem; color: #c7d8e8; line-height: 1.4; }
.alliance-notif-item small { color: #7690a6; font-size: .7rem; }

/* Navigation rapide persistante des bâtiments du village */
.building-quick-rail {
    position: fixed;
    z-index: 1450;
    left: 14px;
    top: 50%;
    transform: translateY(-42%);
    width: 150px;
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(125, 174, 255, .18);
    border-radius: 16px;
    background: rgba(7, 13, 24, .94);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(15px);
}
.building-quick-rail-title { padding: 2px 5px 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.building-quick-rail-title small { display:block; color:rgba(210,224,247,.5); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }
.building-quick-rail-title strong { display:block; margin-top:2px; color:#eef5ff; font-size:.78rem; }
.building-quick-rail-btn {
    min-height: 40px; padding: 7px 8px; border: 1px solid rgba(129,170,230,.10); border-radius: 10px;
    background: rgba(255,255,255,.025); color: rgba(230,239,253,.78); cursor: pointer;
    display:flex; align-items:center; gap:7px; text-align:left; font-size:.74rem; font-weight:750;
}
.building-quick-rail-btn:hover { border-color:rgba(108,191,255,.38); background:rgba(70,145,230,.10); color:#fff; }
.building-quick-rail-btn.is-active { border-color:rgba(87,199,255,.52); background:linear-gradient(135deg,rgba(36,143,218,.22),rgba(39,86,167,.13)); color:#fff; box-shadow:inset 3px 0 0 rgba(96,206,255,.88); }
.building-quick-rail-icon { width:18px; text-align:center; font-size:.86rem; }
.building-switcher.building-switcher-replaced { display:none !important; }
@media (min-width: 1051px) {
    body.has-building-quick-rail { padding-left: 174px !important; box-sizing: border-box; }
}
@media (max-width: 1050px) {
    .building-quick-rail {
        position: fixed; left:10px; right:10px; bottom:10px; top:auto; transform:none; width:auto; margin:0; padding:7px;
        grid-template-columns: repeat(6, minmax(70px, 1fr)); overflow-x:auto; border-radius:12px;
    }
    .building-quick-rail-title { display:none; }
    .building-quick-rail-btn { justify-content:center; min-width:82px; }
    body.has-building-quick-rail { padding-left:0 !important; padding-bottom:74px !important; }
}
@media (max-width: 620px) {
    .building-quick-rail-btn span:last-child { display:none; }
    .building-quick-rail { grid-template-columns: repeat(6, minmax(46px, 1fr)); }
    .building-quick-rail-btn { min-width:46px; padding:8px 5px; }
}

/* Alerte globale d'attaque détectée par une tour de guet. */
.top-bar [data-nav-role="village"].has-incoming-attack {
    border-color: rgba(239, 91, 97, .62) !important;
    box-shadow: inset 0 0 0 1px rgba(239, 91, 97, .16), 0 0 18px rgba(210, 42, 55, .16);
}

.top-bar .nav-badge.nav-badge-attack {
    animation: omegaAttackBadgePulse 1.8s ease-in-out infinite;
}

@keyframes omegaAttackBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(210, 42, 55, .42); }
    50% { transform: scale(1.08); box-shadow: 0 5px 20px rgba(239, 91, 97, .68); }
}

.global-incoming-attack-alert {
    position: relative;
    z-index: 1250;
    width: min(1180px, calc(100% - 28px));
    margin: 10px auto 0;
    border: 1px solid rgba(239, 91, 97, .46);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(83, 17, 27, .96), rgba(32, 11, 18, .97));
    box-shadow: 0 14px 35px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.05);
    color: #fff;
    overflow: hidden;
}

.global-incoming-attack-alert.hidden {
    display: none !important;
}

.global-incoming-attack-alert::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #ff7a80, #c72d3a);
}

.global-incoming-attack-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
}

.global-incoming-attack-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 190, 193, .46);
    background: rgba(239, 91, 97, .18);
    color: #ffd9db;
    font-size: 20px;
    font-weight: 950;
    box-shadow: 0 0 20px rgba(239, 91, 97, .14);
}

.global-incoming-attack-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    cursor: pointer;
}

.global-incoming-attack-copy strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.global-incoming-attack-copy span {
    color: rgba(255,255,255,.76);
    font-size: 12px;
}

.global-incoming-attack-copy b {
    color: #ffd7a0;
    font-variant-numeric: tabular-nums;
}

.global-incoming-attack-open {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: linear-gradient(180deg, #ef5b61, #b62836);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(183, 40, 54, .22);
}

.global-incoming-attack-open:hover {
    filter: brightness(1.08);
}

@media (max-width: 720px) {
    .global-incoming-attack-alert {
        width: min(100% - 16px, 1180px);
        margin-top: 7px;
        border-radius: 12px;
    }
    .global-incoming-attack-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px 10px;
    }
    .global-incoming-attack-copy {
        min-width: calc(100% - 48px);
    }
    .global-incoming-attack-open {
        width: 100%;
        margin-left: 44px;
    }
}

/* V32 — HUD global : village courant + ressources + changement rapide */
/* V33 — reste visible au défilement (position:sticky) : c'est la barre qui affiche l'état des
   ressources en direct, elle doit rester consultable même en bas d'une longue page (marché,
   académie, forge...) sans avoir à remonter. */
.global-village-hud {
    position: sticky;
    top: 6px;
    z-index: 82;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 10px;
    font-family: Inter, Arial, sans-serif;
}
.global-village-hud[hidden] { display: none !important; }
.global-village-hud-inner {
    min-height: 56px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(95, 166, 255, .14);
    border-top: 0;
    background: linear-gradient(180deg, rgba(6, 14, 27, .97), rgba(4, 10, 20, .98));
    box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}
.global-village-switcher {
    flex: 0 1 365px;
    min-width: 260px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: stretch;
    gap: 4px;
}
.global-village-cycle,
.global-village-trigger {
    border: 1px solid rgba(111, 175, 255, .14);
    background: rgba(20, 37, 64, .48);
    color: #edf6ff;
    cursor: pointer;
}
.global-village-cycle {
    min-width: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    color: rgba(182, 220, 255, .82);
    font-size: 23px;
    line-height: 1;
}
.global-village-cycle:hover:not(:disabled),
.global-village-trigger:hover {
    border-color: rgba(98, 201, 255, .42);
    background: rgba(30, 66, 112, .58);
}
.global-village-cycle:disabled { opacity: .28; cursor: default; }
.global-village-trigger {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    text-align: left;
}
.global-village-castle {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(109, 195, 255, .18);
    background: rgba(52, 116, 190, .12);
    font-size: 17px;
}
.global-village-title-wrap { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.global-village-title-wrap small {
    color: #75bbf6;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.global-village-title-wrap strong {
    overflow: hidden;
    color: #f2f7ff;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.global-village-title-wrap span { color: rgba(207, 224, 246, .55); font-size: 9px; font-weight: 650; }
.global-village-chevron { color: rgba(132, 198, 255, .72); font-size: 10px; transition: transform .18s ease; }
.global-village-trigger[aria-expanded="true"] .global-village-chevron { transform: rotate(180deg); }
.global-village-hud-resources {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(76px, 1fr));
    gap: 5px;
}
.global-village-resource {
    min-width: 0;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: 14px 19px;
    align-items: center;
    column-gap: 6px;
    padding: 4px 7px;
    border: 1px solid rgba(112, 168, 237, .09);
    background: rgba(255,255,255,.022);
}
.global-village-resource img {
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.global-village-resource-label {
    min-width: 0;
    overflow: hidden;
    color: rgba(191, 213, 239, .58);
    font-size: 8px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.global-village-resource strong { color: #edf5ff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.global-village-resource.is-population,
.global-village-resource.is-points { grid-template-columns: minmax(0, 1fr); }
.global-village-resource.is-population .global-village-resource-label,
.global-village-resource.is-points .global-village-resource-label,
.global-village-resource.is-population strong,
.global-village-resource.is-points strong { grid-column: 1; }
.global-village-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: min(780px, calc(100vw - 32px));
    max-height: min(570px, 72vh);
    display: none;
    overflow: hidden;
    border: 1px solid rgba(89, 183, 255, .30);
    background: linear-gradient(180deg, rgba(9, 20, 38, .995), rgba(4, 10, 21, .995));
    box-shadow: 0 24px 65px rgba(0,0,0,.52), inset 0 1px 0 rgba(150,218,255,.06);
}
.global-village-popover.is-open { display: block; }
.global-village-popover-head {
    min-height: 54px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(116, 177, 247, .12);
    background: rgba(23, 48, 81, .26);
}
.global-village-popover-head > div { display: grid; gap: 2px; }
.global-village-popover-head small { color: #73bdfb; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.global-village-popover-head strong { color: #f4f8ff; font-size: 14px; }
.global-village-popover-head > span { color: rgba(201, 220, 242, .58); font-size: 10px; font-weight: 750; }
.global-village-list { max-height: min(500px, 64vh); padding: 6px; overflow: auto; }
.global-village-option {
    width: 100%;
    min-height: 56px;
    margin: 0 0 5px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 30px minmax(140px, 1fr) auto 26px 58px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(112, 170, 241, .09);
    background: rgba(255,255,255,.022);
    color: #eaf4ff;
    text-align: left;
    cursor: pointer;
}
.global-village-option:last-child { margin-bottom: 0; }
.global-village-option:hover { border-color: rgba(91, 195, 255, .36); background: rgba(39, 99, 164, .16); }
.global-village-option.is-active {
    border-color: rgba(91, 195, 255, .46);
    background: linear-gradient(90deg, rgba(35, 121, 191, .18), rgba(24, 57, 102, .08));
    box-shadow: inset 3px 0 0 #63ceff;
}
.global-village-option-index { color: rgba(125, 195, 248, .46); font-size: 10px; font-weight: 900; text-align: center; }
.global-village-option-main { min-width: 0; display: grid; gap: 3px; }
.global-village-option-main strong { overflow: hidden; color: #eef7ff; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.global-village-option-main small { color: rgba(196, 216, 240, .52); font-size: 9px; }
.global-village-option-resources { display: flex; align-items: center; gap: 7px; }
.global-village-option-resources span { display: inline-flex; align-items: center; gap: 3px; color: rgba(220, 234, 249, .76); font-size: 9px; font-weight: 750; }
.global-village-option-resources img { width: 14px; height: 14px; object-fit: contain; }
.global-village-option-action {
    justify-self: end;
    padding: 5px 7px;
    border: 1px solid rgba(91, 195, 255, .18);
    color: #81ceff;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

/* Le sélecteur de la barre WebGL est désormais remplacé par le HUD commun. */
body.pixi-page .pixi-village-switch { display: none !important; }

@media (max-width: 980px) {
    .global-village-hud-inner { flex-direction: column; }
    .global-village-switcher { flex: 0 0 auto; width: 100%; }
    .global-village-hud-resources { grid-template-columns: repeat(6, minmax(70px, 1fr)); width: 100%; }
}
@media (max-width: 700px) {
    .global-village-hud { width: calc(100% - 18px); margin-bottom: 8px; }
    .global-village-hud-inner { padding: 5px; gap: 5px; }
    .global-village-switcher { min-width: 0; grid-template-columns: 28px minmax(0, 1fr) 28px; }
    .global-village-castle { display: none; }
    .global-village-trigger { padding: 5px 7px; }
    .global-village-title-wrap span { display: none; }
    .global-village-hud-resources { display: flex; overflow-x: auto; scrollbar-width: thin; padding-bottom: 1px; }
    .global-village-resource { flex: 0 0 84px; min-height: 38px; }
    .global-village-resource-label { font-size: 7px; }
    .global-village-resource strong { font-size: 11px; }
    .global-village-popover { width: 100%; max-height: 68vh; }
    .global-village-option { grid-template-columns: 24px minmax(0, 1fr) 50px; }
    .global-village-option-resources { grid-column: 2 / -1; flex-wrap: wrap; margin-top: -2px; }
    .global-village-option-action { grid-column: 3; grid-row: 1; }
}


/* V32.1 — Page Village : alignement visuel plus équilibré du HUD ressources. */
@media (min-width: 981px) {
    .global-village-hud[data-page="village.html"] .global-village-hud-inner {
        align-items: center;
    }

    .global-village-hud[data-page="village.html"] .global-village-switcher {
        flex: 0 1 350px;
    }

    .global-village-hud[data-page="village.html"] .global-village-hud-resources {
        align-self: center;
        justify-content: center;
        margin-block: auto;
    }

    .global-village-hud[data-page="village.html"] .global-village-resource {
        grid-template-columns: 20px auto;
        justify-content: center;
        align-content: center;
    }

    .global-village-hud[data-page="village.html"] .global-village-resource.is-population,
    .global-village-hud[data-page="village.html"] .global-village-resource.is-points {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

.global-village-option-resources b {
    color: inherit;
    font: inherit;
}


/* V32.2 — Correctif page Village : isolation du HUD et contenu réellement contenu dans les cartes. */
.global-village-hud .global-village-hud-resources {
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch;
    align-items: stretch;
}
.global-village-hud .global-village-resource {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 !important;
    clip-path: none !important;
    align-content: center;
    overflow: hidden;
}
.global-village-hud .global-village-resource > * {
    min-width: 0;
}
.global-village-hud .global-village-resource strong {
    line-height: 1.05;
}
.global-village-resource-cap {
    color: rgba(237, 246, 255, .5);
    font-size: .74em;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 2px;
}
@media (min-width: 981px) {
    .global-village-hud[data-page="village.html"] .global-village-hud-inner {
        display: grid;
        grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
        align-items: stretch;
    }
    .global-village-hud[data-page="village.html"] .global-village-switcher {
        width: auto;
        min-width: 0;
    }
    .global-village-hud[data-page="village.html"] .global-village-hud-resources {
        width: 100%;
        grid-template-columns: repeat(6, minmax(78px, 1fr));
    }
}

/* V32.3 — HUD légèrement agrandi sur écran large (+~10 %), sans modifier le responsive. */
@media (min-width: 1200px) {
    .global-village-hud-inner {
        min-height: 61px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .global-village-trigger {
        gap: 10px;
        padding: 7px 11px;
    }

    .global-village-castle {
        flex-basis: 37px;
        width: 37px;
        height: 37px;
        font-size: 19px;
    }

    .global-village-title-wrap small {
        font-size: 8.5px;
    }

    .global-village-title-wrap strong {
        font-size: 14px;
    }

    .global-village-title-wrap span {
        font-size: 9.5px;
    }

    .global-village-resource {
        min-height: 48px;
        grid-template-columns: 22px minmax(0, 1fr);
        grid-template-rows: 15px 21px;
        column-gap: 7px;
        padding: 5px 8px;
    }

    .global-village-resource img {
        width: 22px;
        height: 22px;
    }

    .global-village-resource-label {
        font-size: 8.5px;
    }

    .global-village-resource strong {
        font-size: 13.25px;
        line-height: 1.08;
    }

    .global-village-hud[data-page="village.html"] .global-village-resource {
        grid-template-columns: 22px auto;
    }
}

/* =========================================================
   V32.4 — Responsive grands écrans / ultrawide
   ---------------------------------------------------------
   Objectifs :
   - 1920x1080 et inférieur : rendu V32.3 inchangé.
   - 2560x1440 : HUD/navigation plus larges et plus lisibles.
   - 3440x1440 / 4K : seconde montée en taille, avec plafond.
   - Pas de transform/zoom : la mise en page reste native.
   ========================================================= */

/* 2560x1440 et écrans desktop larges */
@media (min-width: 2200px) and (min-height: 1100px) {
    body:not(.account-body) {
        /* Beaucoup de panneaux du jeu utilisent des rem : +~7 % à 2560px,
           avec plafond pour éviter de casser les composants. */
        font-size: clamp(16px, 0.67vw, 18px);
    }

    body:not(.account-body) .main-header,
    body.pixi-page:not(.account-body) .main-header,
    body:not(.account-body) .wiki-main-header,
    body:not(.account-body) .academy-premium-header {
        width: min(94vw, 2100px) !important;
        max-width: 2100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.account-body) .banner-image {
        width: min(100%, 1480px) !important;
        max-width: 1480px !important;
    }

    body:not(.account-body) .top-bar,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav {
        width: min(1480px, calc(100% - 56px)) !important;
        max-width: 1480px !important;
        gap: 12px !important;
        padding: 14px 22px !important;
    }

    body:not(.account-body) .top-bar > button,
    body:not(.account-body) .top-bar > a,
    body:not(.account-body) .top-bar > .player-menu-nav > summary,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > button,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > a,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav > summary {
        min-height: 50px !important;
        height: 50px !important;
        padding-inline: 22px !important;
        gap: 9px !important;
        font-size: 15px !important;
    }

    .global-village-hud,
    .global-incoming-attack-alert {
        width: min(1480px, calc(100% - 56px));
    }

    .global-village-hud-inner {
        min-height: 68px;
        gap: 10px;
        padding: 8px 10px;
    }

    .global-village-switcher {
        flex-basis: 420px;
        min-width: 340px;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 6px;
    }

    .global-village-cycle {
        min-width: 38px;
        font-size: 26px;
    }

    .global-village-trigger {
        gap: 11px;
        padding: 8px 12px;
    }

    .global-village-castle {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 21px;
    }

    .global-village-title-wrap small { font-size: 9px; }
    .global-village-title-wrap strong { font-size: 15px; }
    .global-village-title-wrap span { font-size: 10px; }
    .global-village-chevron { font-size: 11px; }

    .global-village-hud-resources {
        grid-template-columns: repeat(6, minmax(105px, 1fr));
        gap: 7px;
    }

    .global-village-resource {
        min-height: 55px;
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-rows: 17px 23px;
        column-gap: 8px;
        padding: 6px 10px;
    }

    .global-village-resource img {
        width: 24px;
        height: 24px;
    }

    .global-village-resource-label { font-size: 9.5px; }
    .global-village-resource strong { font-size: 15px; }

    .global-village-hud[data-page="village.html"] .global-village-hud-inner {
        grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    }

    .global-village-hud[data-page="village.html"] .global-village-resource {
        grid-template-columns: 24px auto;
    }

    .global-village-popover {
        width: min(900px, calc(100vw - 56px));
    }

    /* La page Village profite aussi de l'espace supplémentaire sans toucher
       à sa structure trois colonnes. */
    body.ultra-page .village-layout {
        width: min(92vw, 2020px) !important;
        max-width: 2020px !important;
    }
}

/* Ultrawide 3440x1440, 3200px+ et assimilés */
@media (min-width: 3000px) and (min-height: 1200px) {
    body:not(.account-body) {
        font-size: 18px;
    }

    body:not(.account-body) .main-header,
    body.pixi-page:not(.account-body) .main-header,
    body:not(.account-body) .wiki-main-header,
    body:not(.account-body) .academy-premium-header {
        width: min(92vw, 2350px) !important;
        max-width: 2350px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.account-body) .banner-image {
        width: min(100%, 1680px) !important;
        max-width: 1680px !important;
    }

    body:not(.account-body) .top-bar,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav {
        width: min(1680px, calc(100% - 72px)) !important;
        max-width: 1680px !important;
        gap: 13px !important;
        padding: 15px 24px !important;
    }

    body:not(.account-body) .top-bar > button,
    body:not(.account-body) .top-bar > a,
    body:not(.account-body) .top-bar > .player-menu-nav > summary,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > button,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > a,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav > summary {
        min-height: 54px !important;
        height: 54px !important;
        padding-inline: 25px !important;
        font-size: 16px !important;
    }

    .global-village-hud,
    .global-incoming-attack-alert {
        width: min(1680px, calc(100% - 72px));
    }

    .global-village-hud-inner {
        min-height: 74px;
        gap: 11px;
        padding: 9px 11px;
    }

    .global-village-switcher {
        flex-basis: 470px;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .global-village-cycle { font-size: 28px; }
    .global-village-castle {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 23px;
    }
    .global-village-title-wrap small { font-size: 9.5px; }
    .global-village-title-wrap strong { font-size: 16px; }
    .global-village-title-wrap span { font-size: 11px; }

    .global-village-hud-resources { gap: 8px; }
    .global-village-resource {
        min-height: 60px;
        grid-template-columns: 27px minmax(0, 1fr);
        grid-template-rows: 18px 25px;
        column-gap: 9px;
        padding: 7px 11px;
    }
    .global-village-resource img { width: 27px; height: 27px; }
    .global-village-resource-label { font-size: 10px; }
    .global-village-resource strong { font-size: 16.5px; }

    .global-village-hud[data-page="village.html"] .global-village-hud-inner {
        grid-template-columns: minmax(410px, 470px) minmax(0, 1fr);
    }
    .global-village-hud[data-page="village.html"] .global-village-resource {
        grid-template-columns: 27px auto;
    }

    .global-village-popover {
        width: min(980px, calc(100vw - 72px));
    }

    body.ultra-page .village-layout {
        width: min(90vw, 2200px) !important;
        max-width: 2200px !important;
    }
}

/* 4K / très grands écrans : dernier palier volontairement plafonné. */
@media (min-width: 3800px) and (min-height: 1500px) {
    body:not(.account-body) .main-header,
    body.pixi-page:not(.account-body) .main-header,
    body:not(.account-body) .wiki-main-header,
    body:not(.account-body) .academy-premium-header {
        width: min(90vw, 2600px) !important;
        max-width: 2600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.account-body) .banner-image {
        width: min(100%, 1880px) !important;
        max-width: 1880px !important;
    }

    body:not(.account-body) .top-bar,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav {
        width: min(1880px, calc(100% - 96px)) !important;
        max-width: 1880px !important;
    }

    body:not(.account-body) .top-bar > button,
    body:not(.account-body) .top-bar > a,
    body:not(.account-body) .top-bar > .player-menu-nav > summary,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > button,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > a,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav > summary {
        min-height: 58px !important;
        height: 58px !important;
        padding-inline: 28px !important;
        font-size: 17px !important;
    }

    .global-village-hud,
    .global-incoming-attack-alert {
        width: min(1880px, calc(100% - 96px));
    }

    .global-village-hud-inner { min-height: 80px; }
    .global-village-switcher { flex-basis: 520px; }
    .global-village-resource { min-height: 64px; }
    .global-village-resource img { width: 29px; height: 29px; }
    .global-village-resource-label { font-size: 10.5px; }
    .global-village-resource strong { font-size: 17.5px; }

    .global-village-hud[data-page="village.html"] .global-village-hud-inner {
        grid-template-columns: minmax(450px, 520px) minmax(0, 1fr);
    }

    body.ultra-page .village-layout {
        width: min(88vw, 2380px) !important;
        max-width: 2380px !important;
    }
}

/* Sur les formats très larges (21:9 / 32:9), on garde un plafond de lecture :
   le HUD grandit mais ne s'étale jamais sur toute la dalle. */
@media (min-width: 2800px) and (min-aspect-ratio: 21/9) {
    .global-village-hud-inner,
    body:not(.account-body) .top-bar,
    body.pixi-page:not(.account-body) .top-bar.pixi-nav {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Monde Speed — chrono global dans le HUD de village. */
.global-village-hud.has-speed-world .global-village-hud-resources {
    grid-template-columns: repeat(7, minmax(70px, 1fr));
}
.global-village-resource.is-speed-world {
    grid-template-columns: minmax(0, 1fr);
    border-color: rgba(251, 191, 36, .30);
    background: linear-gradient(180deg, rgba(245, 158, 11, .12), rgba(255,255,255,.025));
    box-shadow: inset 0 0 18px rgba(245, 158, 11, .05);
}
.global-village-resource.is-speed-world .global-village-resource-label,
.global-village-resource.is-speed-world strong {
    grid-column: 1;
}
.global-village-resource.is-speed-world strong {
    color: #fde68a;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 980px) {
    .global-village-hud.has-speed-world .global-village-hud-resources {
        grid-template-columns: repeat(7, minmax(64px, 1fr));
    }
}
@media (max-width: 700px) {
    .global-village-hud.has-speed-world .global-village-hud-resources { display: flex; }
    .global-village-resource.is-speed-world { flex-basis: 104px; }
}


/* =========================================================
   V33 — Accès rapide global personnalisable
   ========================================================= */
.building-quick-rail.is-empty { display: none !important; }

body[data-ui-rail-position="right"] .building-quick-rail {
    left: auto;
    right: 14px;
}

body[data-ui-rail-sticky="off"] .building-quick-rail {
    position: absolute;
    top: 330px;
    transform: none;
}

body[data-ui-rail-style="compact"] .building-quick-rail {
    width: 94px;
    padding: 8px;
    gap: 5px;
}
body[data-ui-rail-style="compact"] .building-quick-rail-title strong { font-size: .70rem; }
body[data-ui-rail-style="compact"] .building-quick-rail-btn {
    min-height: 34px;
    padding: 5px 6px;
    font-size: .66rem;
}
body[data-ui-rail-style="compact"] .building-quick-rail-icon { width: 16px; }

body[data-ui-rail-style="icons"] .building-quick-rail {
    width: 54px;
    padding: 7px 6px;
    gap: 6px;
}
body[data-ui-rail-style="icons"] .building-quick-rail-title { display: none; }
body[data-ui-rail-style="icons"] .building-quick-rail-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 5px;
    justify-content: center;
}
body[data-ui-rail-style="icons"] .building-quick-rail-label { display: none; }
body[data-ui-rail-style="icons"] .building-quick-rail-icon {
    width: auto;
    font-size: 1rem;
}

body.user-ui-hide-quick-rail .building-quick-rail {
    display: none !important;
}

@media (min-width: 1051px) {
    body.has-building-quick-rail[data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail) {
        padding-left: 174px !important;
        padding-right: 0 !important;
    }
    body.has-building-quick-rail[data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail) {
        padding-left: 0 !important;
        padding-right: 174px !important;
    }
    body.has-building-quick-rail[data-ui-rail-style="compact"][data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail) {
        padding-left: 116px !important;
    }
    body.has-building-quick-rail[data-ui-rail-style="compact"][data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail) {
        padding-right: 116px !important;
    }
    body.has-building-quick-rail[data-ui-rail-style="icons"][data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail) {
        padding-left: 76px !important;
    }
    body.has-building-quick-rail[data-ui-rail-style="icons"][data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail) {
        padding-right: 76px !important;
    }
}

@media (max-width: 1050px) {
    body[data-ui-rail-sticky="off"] .building-quick-rail {
        position: static;
        transform: none;
        margin: 10px;
    }
    body[data-ui-rail-style="icons"] .building-quick-rail,
    body[data-ui-rail-style="compact"] .building-quick-rail,
    .building-quick-rail {
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    }
}

/* V47 — notifications raccordées au rail Accès rapide */
.building-quick-rail-btn { position: relative; }
.building-quick-rail-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #d94b5e, #a92339);
    border: 1px solid rgba(255,190,199,.45);
    color: #fff;
    font-size: .58rem;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,.34), 0 0 12px rgba(217,75,94,.18);
    z-index: 5;
    pointer-events: none;
}
.building-quick-rail-badge.hidden { display: none !important; }
body[data-ui-rail-style="icons"] .building-quick-rail-badge { top: 2px; right: 1px; }

/* V35 — rail rapide toujours contenu dans le viewport. */
@media (min-width: 1051px) {
    .building-quick-rail {
        top: 50%;
        bottom: auto;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(103, 181, 255, .42) transparent;
        transform: translateY(-50%);
        box-sizing: border-box;
    }
    .building-quick-rail::-webkit-scrollbar { width: 5px; }
    .building-quick-rail::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(103, 181, 255, .38); }
    body.has-building-quick-rail {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
        overflow-x: clip;
    }
}

@media (max-width: 1050px) {
    .building-quick-rail {
        max-width: calc(100vw - 20px);
        max-height: min(74px, calc(100vh - 20px));
        max-height: min(74px, calc(100dvh - 20px));
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        box-sizing: border-box;
        scrollbar-width: none;
    }
    .building-quick-rail::-webkit-scrollbar { display: none; }
}

@media (max-height: 620px) and (min-width: 1051px) {
    .building-quick-rail { gap: 4px; padding: 7px; }
    .building-quick-rail-title { padding-bottom: 4px; }
    .building-quick-rail-btn { min-height: 34px; padding-block: 5px; }
}

/* V85 — Accès rapide adaptatif : aucune compression sur laptop, mobile ou faible hauteur. */
.building-quick-rail {
    align-content: start;
    grid-auto-rows: max-content;
    min-width: 0;
}
.building-quick-rail-btn,
.building-quick-rail-copy,
.building-quick-rail-label {
    min-width: 0;
}
@media (min-width: 1181px) and (max-height: 900px) {
    .building-quick-rail {
        width: 122px !important;
        grid-template-columns: repeat(2, minmax(44px, 1fr)) !important;
        gap: 6px !important;
        padding: 8px !important;
        transform: translateY(-50%) !important;
    }
    .building-quick-rail-title {
        grid-column: 1 / -1;
        padding: 2px 3px 6px;
        text-align: center;
    }
    .building-quick-rail-btn {
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 6px !important;
        justify-content: center !important;
    }
    .building-quick-rail-copy { display: none !important; }
    .building-quick-rail-icon { width: auto !important; font-size: 1rem; }
    body.has-building-quick-rail[data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail) {
        padding-left: 146px !important;
        padding-right: 0 !important;
    }
    body.has-building-quick-rail[data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail) {
        padding-right: 146px !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 1180px) {
    .building-quick-rail,
    body[data-ui-rail-style="compact"] .building-quick-rail,
    body[data-ui-rail-style="icons"] .building-quick-rail,
    body[data-ui-rail-sticky="off"] .building-quick-rail {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: 76px !important;
        margin: 0 !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(58px, max-content) !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        transform: none !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .building-quick-rail-title { display: none !important; }
    .building-quick-rail-btn {
        min-width: 58px !important;
        min-height: 52px !important;
        padding: 6px 8px !important;
        justify-content: center !important;
        scroll-snap-align: start;
    }
    .building-quick-rail-copy { flex: 0 1 auto; }
    .building-quick-rail-label { font-size: .65rem; }
    .building-quick-rail-meta { display: none !important; }
    body.has-building-quick-rail,
    body.has-building-quick-rail[data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-style="compact"][data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-style="compact"][data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-style="icons"][data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-style="icons"][data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
    }
}
@media (max-width: 680px) {
    .building-quick-rail,
    body[data-ui-rail-style="compact"] .building-quick-rail,
    body[data-ui-rail-style="icons"] .building-quick-rail {
        grid-auto-columns: 52px !important;
    }
    .building-quick-rail-btn { min-width: 52px !important; }
    .building-quick-rail-copy { display: none !important; }
    .building-quick-rail-icon { width: auto !important; font-size: 1rem; }
}
@media (max-height: 520px) and (min-width: 1181px) {
    .building-quick-rail {
        width: 174px !important;
        grid-template-columns: repeat(4, minmax(34px, 1fr)) !important;
    }
    .building-quick-rail-title { display: none !important; }
    body.has-building-quick-rail[data-ui-rail-position="left"]:not(.user-ui-hide-quick-rail) { padding-left: 198px !important; }
    body.has-building-quick-rail[data-ui-rail-position="right"]:not(.user-ui-hide-quick-rail) { padding-right: 198px !important; }
}


/* ========================================================================== */
/* V86 — Rapports x Accès rapide : anti-chevauchement responsive             */
/* ========================================================================== */

/* Le rail global est volontairement très haut dans la pile (z-index 1450).
   Une modale de rapport doit toujours le recouvrir, quelle que soit la taille
   de l'écran. */
#report-modal.modal-overlay {
    z-index: 3600 !important;
    isolation: isolate;
}
#report-modal .modal-card-large {
    position: relative;
    z-index: 1;
}

/* Les écrans laptop / 1366 / 1440 / 1536 sont trop étroits pour conserver
   simultanément le rail vertical et le centre de rapports confortable (jusqu'aux écrans 1680 px).
   Uniquement quand l'onglet Rapports est visible, le rail devient horizontal
   en bas, comme sur tablette. Les autres onglets gardent leur disposition. */
@media (min-width: 1181px) and (max-width: 1750px) {
    body.has-building-quick-rail:has(#reports-panel:not(.hidden)):not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-position="left"]:has(#reports-panel:not(.hidden)):not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-position="right"]:has(#reports-panel:not(.hidden)):not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-style="compact"]:has(#reports-panel:not(.hidden)):not(.user-ui-hide-quick-rail),
    body.has-building-quick-rail[data-ui-rail-style="icons"]:has(#reports-panel:not(.hidden)):not(.user-ui-hide-quick-rail) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
    }

    body:has(#reports-panel:not(.hidden)) .building-quick-rail,
    body[data-ui-rail-style="compact"]:has(#reports-panel:not(.hidden)) .building-quick-rail,
    body[data-ui-rail-style="icons"]:has(#reports-panel:not(.hidden)) .building-quick-rail,
    body[data-ui-rail-sticky="off"]:has(#reports-panel:not(.hidden)) .building-quick-rail {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: 76px !important;
        margin: 0 !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(58px, max-content) !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        box-sizing: border-box !important;
    }

    body:has(#reports-panel:not(.hidden)) .building-quick-rail-title {
        display: none !important;
    }
    body:has(#reports-panel:not(.hidden)) .building-quick-rail-btn {
        min-width: 58px !important;
        min-height: 52px !important;
        padding: 6px 8px !important;
        justify-content: center !important;
        scroll-snap-align: start;
    }
    body:has(#reports-panel:not(.hidden)) .building-quick-rail-meta {
        display: none !important;
    }

    /* Les cartes de rapports ont toujours le droit de rétrécir dans la grille. */
    body:has(#reports-panel:not(.hidden)) .village-main-column,
    body:has(#reports-panel:not(.hidden)) #reports-panel,
    body:has(#reports-panel:not(.hidden)) #reports-list,
    body:has(#reports-panel:not(.hidden)) .report-card-main,
    body:has(#reports-panel:not(.hidden)) .report-compact-row {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Support multi-langue (2026-09) : sélecteur de langue dans le menu Compte. */
.player-menu-lang-switch {
    display: flex;
    gap: 6px;
    padding: 6px 4px 2px;
    margin-top: 2px;
    border-top: 1px solid rgba(112, 174, 255, .18);
}
.player-menu-lang-switch .lang-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 30px !important;
    max-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800;
    letter-spacing: normal !important;
    color: #9fd5ff !important;
    background: rgba(24, 42, 72, .52) !important;
    border: 1px solid rgba(112, 174, 255, .18) !important;
    border-radius: 6px;
    cursor: pointer;
    filter: grayscale(35%);
    opacity: .82;
}
.player-menu-lang-switch .lang-btn:hover {
    color: #fff !important;
    border-color: rgba(100, 207, 255, .42) !important;
    filter: none;
    opacity: 1;
}
.player-menu-lang-switch .lang-btn.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(38, 107, 195, .68), rgba(22, 55, 108, .72)) !important;
    border-color: rgba(100, 207, 255, .42) !important;
    filter: none;
    opacity: 1;
}

/* V35 - Les fenetres applicatives passent toujours devant la navigation globale. */
body:not(.account-body) > .modal-overlay,
body:not(.account-body) > [id*="modal"],
body:not(.account-body) > [class*="modal"],
body:not(.account-body) > .kingdom-drawer,
body:not(.account-body) > .village-inventory-modal,
body:not(.account-body) > dialog[open] {
    z-index: 30000 !important;
}
body:not(.account-body) > [id*="modal-backdrop"],
body:not(.account-body) > [class*="modal-backdrop"] {
    z-index: 29990 !important;
}
/* Les anciens rapports avaient une exception à 3600 qui les remettait sous le HUD. */
body:not(.account-body) > #report-modal.modal-overlay,
body:not(.account-body) > #speed-sim-modal.modal-overlay,
body:not(.account-body) > #pixi-action-modal,
body:not(.account-body) > #player-profile-modal,
body:not(.account-body) > #compose-modal {
    z-index: 30000 !important;
}