/* Les deux backgrounds vivent sur UNE SEULE piste GPU.
   IMPORTANT : les adaptations du conteneur principal sont limitées au monde
   Tours. En mode normal, styles.css reste seul propriétaire du background,
   des bordures et des pseudo-éléments du stage. */
.gameContainer.tower-world-active {
    background-image: none !important;
    isolation: isolate;
}

/* Pendant le slide/monde Tours uniquement, les voiles latéraux du stage normal
   sont neutralisés afin de ne pas recouvrir le décor de la Tour. Ils sont
   automatiquement restaurés dès que tower-world-active disparaît. */
.gameContainer.tower-world-active::before,
.gameContainer.tower-world-active::after {
    content: none !important;
    display: none !important;
}

.worldBackgroundTrack {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    display: flex;
    width: 200%;
    height: 100%;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: transform .42s cubic-bezier(.2, .78, .25, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.gameContainer.tower-bg-shifted .worldBackgroundTrack {
    transform: translate3d(-50%, 0, 0);
}
.worldBackgroundPane {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    background-color: #17242d;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.normalWorldBackground {
    background-image:
        linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .2)),
        var(--game-battle-background, url('/img/bg/bg2026v3.png'));
}
.towerWorldBackground {
    position: relative;
    background-image: var(--tower-world-background, url('/img/bg/chapters/bg1.webp'));
}

/* Le hub conserve un ciel lumineux en haut, avec un voile noir discret au
   centre puis plus soutenu vers le bas pour détacher les Tours et le HUD.
   L'overlay ne s'applique pas aux backgrounds intérieurs des Tours. */
.gameContainer.tower-world-hub .towerWorldBackground::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .01) 0%,
        rgba(0, 0, 0, .04) 30%,
        rgba(0, 0, 0, .08) 52%,
        rgba(0, 0, 0, .15) 72%,
        rgba(0, 0, 0, .30) 100%
    );
}

/* =========================================================
   Tours / Donjons — monde alternatif intégré au HUD principal
   Le combat normal est suspendu côté serveur, mais le header et les
   raccourcis latéraux restent utilisables. Aucun modal plein écran.
   ========================================================= */

.towerWorldPortal {
    position: absolute;
    left: 7px;
    bottom: 246px;
    z-index: 25;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    filter:
        drop-shadow(0 4px 3px rgba(0, 0, 0, .96))
        drop-shadow(0 0 5px rgba(0, 0, 0, .82));
}
.towerWorldPortal[hidden] { display: none !important; }
.towerWorldPortal > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    animation: towerPortalFloat 3.6s ease-in-out infinite;
    will-change: transform;
}
@keyframes towerPortalFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.towerWorldPortal:hover,
.towerWorldPortal:focus-visible {
    outline: 0;
    transform: translateY(-2px) scale(1.035);
    filter:
        drop-shadow(0 5px 4px rgba(0, 0, 0, 1))
        drop-shadow(0 0 7px rgba(0, 0, 0, .92))
        brightness(1.08);
}
.towerWorldPortal:active { transform: translateY(0) scale(.95); }
.gameContainer.tower-world-active .towerWorldPortal {
    top: 72px;
    bottom: auto;
    left: 8px;
    filter:
        drop-shadow(0 4px 3px rgba(0, 0, 0, 1))
        drop-shadow(0 0 7px rgba(0, 0, 0, .95));
}

.towerWorldLayer {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    overflow: hidden;
    pointer-events: none;
    color: #fff;
}
.towerWorldLayer[hidden] { display: none !important; }
.towerWorldLayer.is-active { pointer-events: auto; }

/* Les éléments économiques/globaux restent au-dessus du monde alternatif. */
.gameContainer.tower-world-active .headerBar { z-index: 20; }
.gameContainer.tower-world-active .gameSideActions,
.gameContainer.tower-world-active .leaderboardSideButton { z-index: 21; }

/* Le monde normal reste dans le DOM pour conserver la hauteur et éviter un
   remontage du moteur, mais il devient non interactif et invisible. */
.gameContainer.tower-world-active #levelUIContainer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.gameContainer.tower-world-active #enemyZone {
    visibility: hidden;
    pointer-events: none;
}
.gameContainer.tower-world-hub .battleRewardTray {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Dans une Tour sélectionnée le Reward Tray redevient le composant commun
   du combat : aucune variante Tour n'est créée. */
.gameContainer.tower-world-detail .battleRewardTray {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Le bas du HUD reste strictement identique au mode normal dans le monde Tours.
   Le hub affiche l'équipe normale ; une Tour sélectionnée projette ensuite son
   équipe dédiée dans le même composant via setTeamUiOverride(). */
.gameContainer.tower-world-active #uiLvlContainer {
    position: absolute;
    z-index: 22;
    pointer-events: auto;
}
.gameContainer.tower-world-active .playerDpsInfos {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.gameContainer.tower-world-active #uiBtnContainer {
    z-index: 23 !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.towerHubView,
.towerDetailView {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
}
.towerHubView[hidden],
.towerDetailView[hidden] { display: none !important; }

.towerHubHeading {
    position: absolute;
    top: calc(max(14px, env(safe-area-inset-top)) + 58px);
    left: 50%;
    z-index: 5;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 5px;
    width: min(244px, calc(100% - 128px));
    min-width: 210px;
    padding: 6px 7px 7px;
    border: 1px solid rgba(209, 232, 249, .36);
    border-radius: 14px;
    background: rgba(4, 22, 39, .72);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .08);
    transform: translateX(-50%);
    text-align: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.towerHubHeadingText { min-width: 0; }
.towerHubHeadingSpacer { width: 30px; height: 30px; }
.towerHubLeaderboardButton {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 231, 137, .56);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(52, 104, 139, .96), rgba(19, 55, 82, .96));
    color: #ffe486;
    font-size: 13px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.3);
}
.towerHubLeaderboardButton:hover,
.towerHubLeaderboardButton:focus-visible { outline: 0; filter: brightness(1.12); }
.towerHubHeading small,
.towerFloorHudTitle small {
    display: block;
    color: #9edfff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1.1;
}
.towerHubHeading strong,
.towerFloorHudTitle strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.1;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}

.towerHubScene {
    position: absolute;
    top: calc(max(14px, env(safe-area-inset-top)) + 105px);
    right: 56px;
    bottom: 178px;
    left: 2px;
    z-index: 3;
}
.towerIslandButton {
    --tower-x: 50%;
    --tower-y: 50%;
    --tower-size: 102px;
    position: absolute;
    left: var(--tower-x);
    top: var(--tower-y);
    width: var(--tower-size);
    height: calc(var(--tower-size) + 25px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    transform: translate(-50%, -50%);
    cursor: pointer;
    animation: towerIslandFloat 4.8s ease-in-out infinite;
    animation-delay: var(--tower-delay, 0s);
}
.towerIslandButton:hover,
.towerIslandButton:focus-visible {
    outline: 0;
    filter: brightness(1.1);
}
.towerIslandButton:active { transform: translate(-50%, -50%) scale(.96); }
.towerIslandButton img {
    display: block;
    width: 100%;
    height: var(--tower-size);
    object-fit: contain;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .82));
    pointer-events: none;
}
.towerIslandButton strong {
    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
    min-width: 84px;
    padding: 2px 6px;
    border: 1px solid rgba(205, 231, 248, .38);
    border-radius: 999px;
    background: rgba(3, 17, 32, .8);
    color: #f7fcff;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .42);
}
.towerIslandFloor {
    position: absolute;
    top: 4px;
    right: 2px;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid rgba(255, 238, 171, .7);
    border-radius: 999px;
    background: rgba(8, 23, 39, .9);
    color: #ffe98d;
    font-size: 8px;
    font-weight: 950;
}
.towerIslandButton[data-tower="rainbow"] { --tower-size: 122px; z-index: 4; }
.towerIslandButton.is-complete .towerIslandFloor { color: #9ff7bf; border-color: rgba(159, 247, 191, .7); }
.towerIslandButton.is-locked { filter: grayscale(.88) brightness(.58); cursor: not-allowed; }
.towerIslandButton.is-locked::after {
    content: "\f023";
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .95);
}
@keyframes towerIslandFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -6px; }
}

.towerStatus {
    margin: 0;
    color: #ffe4b5;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .85);
}
.towerHubView > .towerStatus {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 190px;
    z-index: 5;
}

.towerFloorHud {
    position: absolute;
    top: calc(max(14px, env(safe-area-inset-top)) + 58px);
    left: 50%;
    z-index: 6;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 7px;
    width: min(340px, calc(100% - 28px));
    min-height: 52px;
    padding: 5px 8px;
    border: 1px solid rgba(205, 229, 248, .42);
    border-radius: 16px;
    background: rgba(5, 28, 54, .84);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateX(-50%);
}
/* Le popover des règles doit passer au-dessus du HUD de niveau, des boutons
   latéraux et du Reward Tray sans garder tout le header au premier plan en permanence. */
.towerFloorHud.is-rules-open { z-index: 90; }
.towerBackToHub {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(225, 239, 252, .72);
    border-radius: 11px;
    background: linear-gradient(180deg, #256fa4, #174c78);
    color: #fff;
    cursor: pointer;
}
.towerBackToHub:hover,
.towerBackToHub:focus-visible { outline: 0; filter: brightness(1.1); }
.towerFloorHudTitle { min-width: 0; text-align: center; }
.towerFloorHudTitleLine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}
.towerFloorHudTitleLine > strong { margin-top: 0; }
.towerRulesInfoButton {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(158, 223, 255, .72);
    border-radius: 999px;
    background: rgba(7, 29, 52, .9);
    color: #bceaff;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .08);
}
.towerRulesInfoButton:hover,
.towerRulesInfoButton:focus-visible,
.towerRulesInfoButton[aria-expanded="true"] {
    outline: 0;
    border-color: #fff;
    background: rgba(30, 78, 113, .98);
    color: #fff;
}
.towerRulesPopover {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    z-index: 12;
    width: min(300px, calc(100vw - 46px));
    padding: 9px 11px;
    border: 1px solid rgba(180, 222, 247, .42);
    border-radius: 11px;
    background: rgba(4, 20, 36, .97);
    color: #eaf7ff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .06);
    transform: translateX(-50%);
    text-align: left;
}
.towerRulesPopover[hidden] { display: none !important; }
.towerRulesPopover > strong {
    display: block;
    margin-bottom: 5px;
    color: #9edfff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}
.towerRulesPopover p {
    margin: 0 0 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
}
.towerRulesPopover p:last-child { margin-bottom: 0; }
.towerFloorHud::after {
    content: "";
    grid-column: 3;
    display: block;
    width: 30px;
    height: 30px;
    justify-self: center;
    background-image: var(--tower-header-element-icon, url("/img/ui/creature-meta/Element-dark.png"));
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
    pointer-events: none;
}
.towerFloorBadge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(255, 232, 148, .62);
    border-radius: 999px;
    background: rgba(4, 19, 34, .78);
    color: #ffe58f;
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
}

/* Badge du niveau courant : réutilise les traits du composant
   .difficultyModeBadge existant. Seuls le positionnement et le nombre sont
   spécifiques aux Tours, sans modifier le badge du mode normal. */
.towerLevelBadge {
    position: absolute;
    top: calc(max(14px, env(safe-area-inset-top)) + 118px);
    left: 50%;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(24px, 1fr) 86px minmax(24px, 1fr);
    align-items: center;
    width: min(300px, 66vw);
    margin: 0;
    opacity: .94;
    pointer-events: none;
    transform: translateX(-50%);
    filter: drop-shadow(1px 1px 0 #000);
}
.towerLevelBadgeCenter {
    display: grid;
    width: 86px;
    justify-items: center;
    align-content: center;
    gap: 1px;
}
.towerLevelBadge strong {
    display: grid;
    width: 86px;
    height: 34px;
    place-items: center;
    color: #f3f8ff;
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .95), 0 0 9px rgba(177, 215, 255, .28);
}
.towerLevelWave {
    display: block;
    width: 86px;
    color: rgba(238, 246, 255, .98);
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: .035em;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 0 7px rgba(177, 215, 255, .24);
}
.towerLevelWave[hidden] { display: none !important; }

/* Transition de niveau strictement limitée au monde Tours. Pendant ce court
   interlude, le HUD du monstre est masque : seul le résultat de l'étage puis
   le nouveau niveau restent visibles au centre de l'arène. */
.towerLevelBadge.is-transition-hidden {
    opacity: 0;
    visibility: hidden;
}
.towerLevelTransition {
    position: absolute;
    top: 48%;
    left: 50%;
    z-index: 8;
    display: grid;
    min-width: min(260px, 72vw);
    justify-items: center;
    gap: 2px;
    padding: 10px 24px 12px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    text-align: center;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .72));
}
.towerLevelTransition[hidden] { display: none !important; }
.towerLevelTransition::before,
.towerLevelTransition::after {
    content: "";
    position: absolute;
    top: 22px;
    width: 74px;
    height: 1px;
    opacity: .78;
    background: linear-gradient(90deg, transparent, rgba(235, 246, 255, .9));
}
.towerLevelTransition::before { right: calc(50% + 64px); }
.towerLevelTransition::after {
    left: calc(50% + 64px);
    transform: scaleX(-1);
}
.towerLevelTransitionKicker {
    color: rgba(240, 248, 255, .96);
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .92);
}
.towerLevelTransitionMain {
    color: #fff1a8;
    font-family: "Poppins", sans-serif;
    font-size: clamp(26px, 7vw, 36px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: .025em;
    text-shadow: 0 3px 0 rgba(76, 41, 4, .72), 0 0 16px rgba(255, 216, 91, .34), 0 4px 10px rgba(0, 0, 0, .9);
}
.towerLevelTransition.is-visible.is-cleared-level {
    animation: towerLevelClearedOverlay .62s ease-out both;
}
.towerLevelTransition.is-visible.is-next-level {
    animation: towerLevelNextOverlay .52s cubic-bezier(.2, .92, .28, 1.16) both;
}
.towerLevelTransition.is-visible.is-failed-level {
    animation: towerLevelFailedOverlay .42s cubic-bezier(.2, .85, .28, 1.08) both;
}
.towerLevelTransition.is-failed-level .towerLevelTransitionKicker {
    color: rgba(255, 228, 208, .98);
}
.towerLevelTransition.is-failed-level .towerLevelTransitionMain {
    color: #ffd2ba;
    font-size: clamp(24px, 6.6vw, 34px);
    text-shadow: 0 3px 0 rgba(86, 24, 8, .78), 0 0 18px rgba(255, 103, 56, .38), 0 4px 10px rgba(0, 0, 0, .9);
}
.towerLevelTransition.is-next-level .towerLevelTransitionKicker {
    color: rgba(211, 234, 255, .98);
}
.towerLevelTransition.is-next-level .towerLevelTransitionMain {
    color: #f5fbff;
    font-size: clamp(38px, 10vw, 52px);
    text-shadow: 0 3px 0 rgba(10, 40, 67, .76), 0 0 18px rgba(167, 220, 255, .52), 0 4px 10px rgba(0, 0, 0, .9);
}
@keyframes towerLevelClearedOverlay {
    0% { opacity: 0; transform: translate(-50%, -46%) scale(.9); }
    24%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -53%) scale(.97); }
}
@keyframes towerLevelNextOverlay {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); filter: brightness(1.8) drop-shadow(0 4px 10px rgba(0, 0, 0, .72)); }
    45% { opacity: 1; transform: translate(-50%, -50%) scale(.94); filter: brightness(1.25) drop-shadow(0 4px 10px rgba(0, 0, 0, .72)); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1) drop-shadow(0 4px 10px rgba(0, 0, 0, .72)); }
}
@keyframes towerLevelFailedOverlay {
    0% { opacity: 0; transform: translate(-50%, -47%) scale(.9); filter: brightness(1.35) drop-shadow(0 4px 10px rgba(0, 0, 0, .72)); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1) drop-shadow(0 4px 10px rgba(0, 0, 0, .72)); }
}
@media (prefers-reduced-motion: reduce) {
    .towerLevelTransition.is-visible.is-cleared-level,
    .towerLevelTransition.is-visible.is-next-level,
    .towerLevelTransition.is-visible.is-failed-level {
        animation: none;
        opacity: 1;
    }
}
.towerTeamStatus {
    position: absolute;
    left: 88px;
    right: 12px;
    bottom: 181px;
    z-index: 6;
    display: none;
}
.towerLaunchButton {
    position: absolute;
    left: 50%;
    bottom: 208px;
    z-index: 6;
    min-width: 138px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid rgba(255, 221, 117, .7);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(72, 84, 94, .94), rgba(41, 50, 58, .96));
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    transform: translateX(-50%);
    cursor: not-allowed;
}

@media (max-width: 520px) {
    .towerWorldPortal {
        left: 4px;
        bottom: 240px;
        width: 68px;
        height: 68px;
    }
    .gameContainer.tower-world-active .towerWorldPortal {
        top: 132px;
        left: 6px;
        bottom: auto;
    }
    .towerHubScene {
        right: 52px;
        bottom: 174px;
        left: 0;
    }
    .towerIslandButton { --tower-size: 96px; }
    .towerIslandButton[data-tower="rainbow"] { --tower-size: 114px; }
}

@media (max-width: 390px) {
    .towerWorldPortal { width: 62px; height: 62px; }
    .towerHubScene { right: 48px; }
    .towerIslandButton { --tower-size: 88px; }
    .towerIslandButton[data-tower="rainbow"] { --tower-size: 106px; }
    .towerHubHeading { width: min(224px, calc(100% - 112px)); min-width: 190px; }
}

/* Les réglages Performance / FX sont globaux au client : le monde Tours
   doit respecter le même hard-stop d'ambiance que le mode normal. */
html.fx-ambient-off .towerIslandButton,
html.fx-ambient-off .towerWorldPortal > img {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .gameContainer.tower-world-active .worldBackgroundTrack { transition-duration: .01ms; }
    .towerIslandButton { animation: none; }
    .towerWorldPortal > img { animation: none; }
}

.towerLaunchButton:not(:disabled) {
    background: linear-gradient(180deg, #dba949, #91581a);
    color: #fff;
    cursor: pointer;
}
.towerLaunchButton:not(:disabled):hover { filter: brightness(1.12); }
/* Le combat Tour consomme les mêmes classes génériques que le combat normal.
   Seuls les sélecteurs ID du HUD normal ont ici un alias STRICTEMENT scoppé
   à .towerBattleHud ; aucune règle de ce bloc ne peut modifier le monde normal. */
.towerBattleHud.enemyMonsterHud,
.gameContainer.monster-panel-open .towerBattleHud.enemyMonsterHud {
    top: clamp(270px, 36.5dvh, 420px) !important;
    z-index: 6 !important;
    pointer-events: none;
}
.towerBattleHud[hidden] { display: none !important; }
/* Après un échec, aucun preview ni drawer d'équipe ne doit pouvoir révéler
   le HUD du combat perdu avant le prochain battle/start. */
.towerDetailView.is-failure-retry .towerBattleHud { display: none !important; }
.towerBattleHud .towerBattleTimer {
    order: 0;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 auto 4px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 188, 188, .58) !important;
    border-radius: 999px !important;
    background: rgba(112, 24, 30, .82) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .09) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}
.towerBattleHud .towerBattleInfo {
    order: 1;
    width: min(236px, calc(100vw - 90px)) !important;
    max-width: 236px !important;
    margin: 0 auto 7px !important;
}
.towerBattleHud .towerEnemyName {
    display: block;
    max-width: 100%;
    margin: 0 0 4px !important;
    overflow: hidden;
    color: #fff0c7 !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: .1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(65, 28, 0, .42), 0 2px 4px rgba(0, 0, 0, .96), 0 0 10px rgba(0, 0, 0, .62), 0 0 18px rgba(66, 29, 2, .32);
}
.towerBattleHud .towerBattleHp.progress {
    width: 100% !important;
    height: 9px !important;
    margin: 0 !important;
    border: 1px solid rgba(245, 250, 255, .96) !important;
    border-radius: 999px !important;
    background: rgba(1, 10, 20, .90) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .78), 0 0 0 2px rgba(0, 0, 0, .20), 0 4px 12px rgba(0, 0, 0, .55), 0 0 16px rgba(0, 0, 0, .22) !important;
}
.towerBattleHp .progress-bar {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .25);
    transition: width 90ms linear !important;
}
.towerBattleHp .progress-bar.is-hp-instant { transition: none !important; }
.towerBattleHud .towerBattleHpText {
    margin: 3px 0 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .96), 0 0 10px rgba(0, 0, 0, .34);
}
.towerBattleHud .towerBattlePortrait { order: 2; }

@media (prefers-reduced-motion: reduce) {
    .towerBattleHp .progress-bar { transition: none !important; }
}

/* enemy-hit et enemy-death restent ceux de styles.css : la Tour ne possède
   aucune animation de portrait parallèle. */


/* Butin Tour : réutilise le composant .enemyLootControls / modal du combat normal.
   Seuls l'ancrage et l'interactivité sont adaptés au HUD Tour. */
.towerBattleHud .towerBattleInfo {
    position: relative;
}
.towerBattleHud .enemyLootControls {
    top: 8px;
    right: -5px;
    pointer-events: auto;
}

/* Reuse the normal zone rail inside the existing Tower block. */
.towerFloorHud { display:block; padding:12px 8px 5px; }
.towerFloorHudTitleLine { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:0 8px; background:#051c36; border-radius:9px; white-space:nowrap; }
.towerFloorHud::after { content:none; display:none; }
.towerFloorNavigation { display:flex; align-items:center; gap:4px; min-width:0; }
.towerFloorNavigation .level-selector-track { display:flex; flex:1; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; touch-action:pan-x; cursor:grab; }
.towerFloorNavigation .level-selector-track::-webkit-scrollbar { display:none; }
.towerFloorNavigation .level-selector { flex:0 0 46px; width:46px; height:46px; margin:0; padding:0; line-height:42px; font-size:20px; cursor:pointer; }
.towerFloorNavigation .level-selector-jump-max { flex:0 0 28px; width:28px; height:46px; padding:0; }
.towerFloorNavigation .level-selector-search { flex:0 0 30px; width:30px; height:46px; }
.towerFloorHud { width:min(370px, calc(100% - 28px)); }
.towerLevelBadge { top:calc(max(14px, env(safe-area-inset-top)) + 134px); }
.towerFloorNavigation button:disabled { opacity:.35; cursor:default; }

/* Same death animation, shorter Tower transition. */
.towerBattleHud.enemy-death .towerBattlePortrait { animation-duration: .25s !important; }

.towerBattleHud.enemy-death .towerBattleInfo { animation-duration: .25s !important; }