/* Adaptateur MMEG Gacha Clicker -> skin du premier clicker.
   Le fichier /styles.css est repris tel quel du clicker #1 ; ce fichier ne contient
   que les composants nouveaux (auth, équipe de 6, collection slider, Gacha). */

[hidden] { display: none !important; }

.authOverlay {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
    padding: 18px; background: rgba(2, 12, 24, .82); backdrop-filter: blur(10px);
    font-family: "Poppins", Arial, sans-serif;
}
.authCard {
    width: min(92vw, 390px); padding: 20px; border: 1px solid rgba(210,235,255,.45);
    border-radius: 15px; color: #fff; background: linear-gradient(180deg, rgba(12,50,80,.98), rgba(4,22,41,.99));
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.authCard small, .drawerHeader small, .gachaDrawerInfo small { color: #8fdcff; font-weight: 900; letter-spacing: 1.1px; }
.authCard h1 { margin: 3px 0 15px; font-size: 25px; font-weight: 900; }
.authForm[hidden] { display:none !important; }
.authCard label { display: block; margin: 10px 0; font-size: 12px; font-weight: 700; }
.authCard input { width: 100%; margin-top: 4px; padding: 10px 11px; border: 1px solid rgba(210,235,255,.35); border-radius: 8px; background: rgba(0,0,0,.26); color:#fff; }
.authCard button { width: 100%; margin: 10px 0 0; min-height:40px; border: 1px solid #8edcff; border-radius: 9px; background:#146b9b; color:#fff; font-weight:900; cursor:pointer; }
.authCard .authSecondaryButton { margin-top:7px; border-color:rgba(210,235,255,.28); background:rgba(6,31,52,.72); color:#cfeeff; }
.authCard .authSecondaryButton:hover,.authCard .authSecondaryButton:focus-visible { filter:brightness(1.15); outline:0; }
.authHint { margin:-4px 0 4px; color:#a9c9db; font:600 10px/1.35 "Poppins",sans-serif; }
.adapterError { min-height: 16px; margin: 6px 0 0; color: #ff9696; font: 700 11px/1.25 "Poppins",sans-serif; text-align:center; }

#playerPortraitButton { margin: 0; padding: 0; border: 0; cursor: pointer; }

/* Découverte du profil joueur : signal purement visuel, affiché une seule fois
   tant que le portrait n'a pas encore été ouvert sur ce navigateur. */
.playerPortraitDiscoveryHint {
    position: absolute;
    left: -6px;
    top: -10px;
    z-index: 3;
    width: 64px;
    height: 64px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#playerPortraitButton:not(.playerPortraitPending) ~ .playerPortraitDiscoveryHint.is-active {
    opacity: 1;
    visibility: visible;
}

.playerPortraitDiscoveryHalo {
    position: absolute;
    inset: 1px;
    border: 2px solid rgba(255, 224, 137, .96);
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(255, 232, 168, .9), 0 0 13px rgba(255, 198, 74, .62);
    animation: playerPortraitDiscoveryPulse 1.15s ease-in-out infinite;
}

.playerPortraitDiscoveryBadge {
    position: absolute;
    right: -4px;
    top: -5px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255, 244, 210, .98);
    border-radius: 50%;
    background: #d89b20;
    color: #fff;
    font: 900 12px/1 "Poppins", sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

@keyframes playerPortraitDiscoveryPulse {
    0%, 100% { transform: scale(1); opacity: .78; }
    50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .playerPortraitDiscoveryHalo { animation: none; }
}
#enemyZone { cursor: pointer; touch-action: manipulation; }
#enemyZone.is-disabled { cursor: default; }

/* Sur écran tactile, la surface de combat est une zone de spam de taps :
   aucun geste navigateur (double-tap zoom, pinch commencé ici, callout ou
   sélection) ne doit interrompre les dégâts. Le reste de l'UI conserve ses
   gestes natifs de scroll/zoom. */
@media (hover: none) and (pointer: coarse) {
    #enemyZone {
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    #enemyZone,
    #enemyZone * {
        -webkit-tap-highlight-color: transparent;
    }
}
.enemyMonsterImg { position: relative; }
.enemyMonsterImg img { user-select:none; -webkit-user-drag:none; }
.enemyMonsterImg.is-fallback::after {
    content: attr(data-fallback); display:grid; place-items:center; width:90px; height:90px; border-radius:50%;
    background:linear-gradient(145deg,#173f5d,#071a30); color:#cceaff; font:900 26px "Poppins",sans-serif;
    border:2px solid rgba(205,234,255,.48); box-shadow:0 8px 18px rgba(0,0,0,.38);
}
.enemyMonsterImg.is-fallback > img { display:none; }
.enemyMonsterImg--medallion.is-fallback .creatureMedallionPortrait { display:none; }


/* Même couronne de rang que les créatures de collection, appliquée aux ennemis.
   Le noyau reste celui de public-teams.php (55 px) et le bloc entier est scalé. */
.creatureMedallion--enemy {
    width:112px;
    height:112px;
    --medallion-scale:1.62;
    --medallion-core-top:11px;
}
.enemyMonsterImg--medallion {
    overflow:visible;
}
.enemyMonsterImg--medallion .creatureMedallionSelectionGlow {
    display:none;
}

/* Le portrait MMEG contient déjà son propre médaillon : ne pas lui ajouter
   un second cercle décoratif autour. Le fallback conserve son cadre. */
.enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.is-boss .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.is-bonus .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.enemy-tier-boss5:not(.is-bonus) .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.enemy-tier-boss10:not(.is-bonus) .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.enemy-tier-boss25:not(.is-bonus) .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.enemy-tier-boss50:not(.is-bonus) .enemyMonsterImg--medallion:not(.is-fallback),
.enemyMonsterHud.enemy-tier-boss100:not(.is-bonus) .enemyMonsterImg--medallion:not(.is-fallback) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    overflow: visible;
}
.gameContainer.monster-panel-open .creatureMedallion--enemy {
    width:88px;
    height:88px;
    --medallion-scale:1.34;
    --medallion-core-top:9px;
}

.battleStatusOverlay {
    position:absolute; z-index:6; left:50%; bottom:177px; transform:translateX(-50%);
    width:min(94%,430px); text-align:center; pointer-events:none;
}
.battleResultText { margin:0; color:#fff; font:900 12px/1.35 "Poppins",sans-serif; text-shadow:0 2px 4px #000; }
.battleStatusOverlay .adapterError { text-shadow:0 2px 4px #000; }
.adapterActionBtn {
    pointer-events:auto; margin:9px 0 0; padding:8px 14px; border:1px solid rgba(255,231,178,.85); border-radius:10px;
    background:linear-gradient(180deg,#1d6e9d,#0b3657); color:#fff; font:900 11px "Poppins",sans-serif;
}
/* Le drawer reste celui du clicker #1, seul son contenu change. */
#monsterContainer {
    --team-drawer-sticky-top: 48px;
    --team-drawer-sticky-gutter: 7px;
    --team-drawer-sticky-overhang: 4px;
    padding: 7px !important;
}
.teamDrawerForm, .gachaDrawerSection { font-family:"Poppins",sans-serif; }

.monsterDrawerHeaderActions { display:flex; align-items:center; gap:6px; }
.teamAutoLevelToggle {
    display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:0 8px;
    border:1px solid rgba(135,196,235,.44); border-radius:9px;
    background:linear-gradient(180deg,rgba(19,73,108,.86),rgba(7,39,66,.92));
    color:#d8efff; font:900 8px/1 "Poppins",sans-serif; letter-spacing:.35px;
    box-shadow:inset 0 1px rgba(255,255,255,.08); cursor:pointer;
}
.teamAutoLevelToggle i { font-size:10px; }
.teamAutoLevelToggle small {
    display:inline-grid; place-items:center; min-width:23px; height:16px; padding:0 4px;
    border-radius:6px; background:rgba(0,0,0,.28); color:#8ea8b9; font:900 7px/1 "Poppins",sans-serif;
}
.teamAutoLevelToggle.is-active {
    border-color:rgba(142,255,180,.72);
    background:linear-gradient(180deg,rgba(24,112,75,.92),rgba(8,62,46,.96));
    color:#e0ffeb;
    box-shadow:0 0 10px rgba(72,220,135,.16),inset 0 1px rgba(255,255,255,.10);
}
.teamAutoLevelToggle.is-active small { background:rgba(123,255,168,.17); color:#aaffc7; }
.teamAutoLevelToggle.is-busy i { animation:teamAutoLevelPulse .75s ease-in-out infinite alternate; }
.teamAutoLevelToggle:hover,.teamAutoLevelToggle:focus-visible { outline:0; filter:brightness(1.12); }
.teamAutoLevelToggle[hidden] { display:none !important; }
@keyframes teamAutoLevelPulse { from { opacity:.48; } to { opacity:1; } }

.teamAutoEquipButton {
    display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; padding:0 9px;
    border:1px solid rgba(255,222,116,.48); border-radius:9px;
    background:linear-gradient(180deg,rgba(112,76,17,.78),rgba(58,37,8,.86));
    color:#ffe8a0; font:900 9px/1 "Poppins",sans-serif; letter-spacing:.45px;
    box-shadow:inset 0 1px rgba(255,255,255,.10); cursor:pointer;
}
.teamAutoEquipButton i { font-size:10px; }
.teamAutoEquipButton:disabled { opacity:.42; cursor:default; filter:grayscale(.35); }
.teamAutoEquipButton:not(:disabled):hover,.teamAutoEquipButton:not(:disabled):focus-visible { outline:0; filter:brightness(1.12); }
/* Les éléments internes des médaillons utilisent plusieurs z-index (étoiles,
   niveau, bouton −). On enferme toute la zone équipe dans un contexte
   d’empilement inférieur au header sticky pour qu’aucun slot ne puisse le
   traverser visuellement pendant le scroll. */
.teamDrawerForm {
    position:relative;
    z-index:1;
    isolation:isolate;
}
.drawerHeader, .gachaDrawerInfo {
    position:sticky; top:-7px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin:-7px -7px 7px; padding:9px 11px; border-bottom:1px solid rgba(206,232,250,.2);
    background:linear-gradient(180deg,rgba(9,46,77,.99),rgba(5,28,51,.98));
}
.drawerHeader strong,.gachaDrawerInfo strong { display:block; color:#fff; font-size:14px; line-height:1.1; }
.drawerDps,.gachaDrawerToken { text-align:right; color:#bcd6e8; font-size:9px; text-transform:uppercase; }
.drawerDps b,.gachaDrawerToken b { display:block; color:#ffe494; font-size:15px; }

/* L'equipe reste visible pendant le scroll vertical des filtres et de la collection.
   Le header du drawer est deja sticky ; les 6 slots viennent se caler juste dessous. */
.teamDrawerSlots {
    position:sticky;
    top:var(--team-drawer-sticky-top);
    z-index:3;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    margin:0 calc(-1 * var(--team-drawer-sticky-gutter)) 7px;
    padding:0 var(--team-drawer-sticky-gutter) var(--team-drawer-sticky-overhang);
    background:linear-gradient(180deg,rgba(8,33,58,.995),rgba(5,27,48,.99));
    box-shadow:0 6px 10px rgba(0,0,0,.16);
}
.teamDrawerSlot {
    position:relative; display:grid; place-items:center; min-width:0; height:102px; margin:0; padding:0;
    border:0; border-radius:0; background:transparent; color:#fff; overflow:visible;
}
.teamDrawerSlot:hover,.teamDrawerSlot:focus-visible { background:transparent; outline:0; }
.teamDrawerSlot.is-selected { box-shadow:none; }
.teamDrawerSlot.is-empty { opacity:.68; overflow:hidden; }
.teamDrawerSlotNumber { position:absolute; top:0; left:2px; z-index:6; color:#b9d6ea; opacity:.7; font:900 7px "Poppins",sans-serif; display: none; }
.teamDrawerSlotEmpty {
    display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
    border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.035);
    color:#d6ecfa; font:900 18px "Poppins",sans-serif;
}


.drawerCollectionHeader { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; margin:5px 1px; }
.drawerCollectionHeader strong { display:block; color:#fff; font-size:12px; }
.drawerCollectionHeader small { display:block; max-width:270px; color:#9fb8ca; font-size:8px; }
#collection-slider-count { color:#a8c8dc; font-size:9px; white-space:nowrap; }
.collectionSliderLegacy {
    display:flex; align-items:flex-start; gap:4px; overflow-x:auto; overflow-y:hidden; min-height:90px; margin-top:4px; padding:7px 5px 6px;
    border:2px solid rgba(214,192,151,.92); border-radius:8px;
    background:linear-gradient(180deg, rgba(41,34,37,.98), rgba(34,28,31,.99));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 -1px 0 rgba(0,0,0,.24);
    scroll-snap-type:none; overscroll-behavior-x:contain; touch-action:pan-x; cursor:grab;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.collectionSliderLegacy::-webkit-scrollbar { display:none; width:0; height:0; }
.collectionSliderLegacy.is-dragging { cursor:grabbing; }
.collectionSliderEmpty { min-width:100%; padding:16px 8px; color:#9fb8ca; font-size:10px; text-align:center; }
.creatureSliderLegacy {
    position:relative; flex:0 0 68px; width:68px; min-width:68px; height:86px; margin:0; padding:0;
    scroll-snap-align:none; border:0; border-radius:0; background:transparent; color:#fff; overflow:visible;
    transition:transform .15s ease;
}
.creatureSliderLegacy:hover,.creatureSliderLegacy:focus-visible { background:transparent; outline:0; transform:translateY(-1px) scale(1.025); }
.creatureSliderLegacy.is-equipped,.creatureSliderLegacy.is-selected { border:0; background:transparent; box-shadow:none; }

/* Médaillon créature commun.
   Géométrie reprise directement de public-teams.php : la couronne est calculée
   sur un noyau canonique de 55 px (`.guild-monster-portrait`) puis le noyau
   complet est mis à l'échelle selon le contexte. Les rotations/positions des
   étoiles ne sont donc pas réinterprétées. */
.creatureMedallion {
    position:relative;
    display:inline-block;
    color:#fff;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
    user-select:none;
    overflow:visible;
}
.creatureMedallion--team {
    width:74px;
    height:100px;
    --medallion-scale:1.28;
    --medallion-core-top:10px;
}
.creatureMedallion--collection {
    width:66px;
    height:94px;
    --medallion-scale:1.02;
    --medallion-core-top:11px;
}

/* Equivalent renommé de `.guild-monster-portrait` (public-teams.php). */
.creatureMedallionCore {
    position:absolute;
    display:inline-block;
    width:55px;
    height:55px;
    left:50%;
    top:var(--medallion-core-top);
    transform:translateX(-50%) scale(var(--medallion-scale));
    transform-origin:top center;
    overflow:visible;
}
.creatureMedallionSelectionGlow {
    position:absolute;
    left:50%;
    top:50%;
    z-index:0;
    width:68px;
    height:69px;
    pointer-events:none;
    background:url('/img/ui/creature-selection-glow.png') center / contain no-repeat;
    opacity:.16;
    transform:translate(-50%,-50%) scale(.9);
    transform-origin:center;
}
.creatureMedallionPortrait {
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    display:block;
}
.creatureMedallionPortrait.is-empty {
    width:55px;
    height:55px;
    border-radius:50%;
    background:#091d30;
}

/* Equivalent renommé de `.container-star`. Les spans restent volontairement
   non positionnés : les images absolues se positionnent par rapport au noyau
   du médaillon, comme sur public-teams.php. */
.creatureMedallionStarContainer { display:inline; }
.creatureMedallionStar {
    position:absolute;
    z-index:3;
    height:auto;
    pointer-events:none;
    user-select:none;
}

/* Port exact des règles `.stars-N` / `.small-star-N` de la source. */
.creatureMedallionStars-1,
.creatureMedallionStars-2,
.creatureMedallionStars-3,
.creatureMedallionStars-4,
.creatureMedallionStars-5 { position:absolute; }

.creatureMedallionStars-4 { width:15px; }

.creatureMedallionStars-4.creatureMedallionSmallStar-1 {
    left:4px;
    top:2px;
    transform:rotate(-45deg);
    width:11px;
}
.creatureMedallionStars-4.creatureMedallionSmallStar-2,
.creatureMedallionStars-2.creatureMedallionSmallStar-1 {
    left:14px;
    top:-5px;
    transform:rotate(-15deg);
    width:13px;
}
.creatureMedallionStars-4.creatureMedallionSmallStar-3,
.creatureMedallionStars-2.creatureMedallionSmallStar-2 {
    right:14px;
    top:-5px;
    transform:rotate(15deg);
    width:13px;
}
.creatureMedallionStars-4.creatureMedallionSmallStar-4 {
    right:4px;
    top:2px;
    transform:rotate(45deg);
    width:11px;
}

.creatureMedallionStars-5.creatureMedallionSmallStar-1 {
    left:2px;
    top:6px;
    transform:rotate(-55deg);
    width:10px;
}
.creatureMedallionStars-5.creatureMedallionSmallStar-2,
.creatureMedallionStars-3.creatureMedallionSmallStar-1 {
    left:10px;
    top:-2px;
    transform:rotate(-28deg);
    width:11px;
}
.creatureMedallionStars-5.creatureMedallionSmallStar-3,
.creatureMedallionStars-3.creatureMedallionSmallStar-2,
.creatureMedallionStars-1.creatureMedallionSmallStar-1 {
    right:21px;
    top:-6px;
    width:13px;
}
.creatureMedallionStars-5.creatureMedallionSmallStar-4,
.creatureMedallionStars-3.creatureMedallionSmallStar-3 {
    right:10px;
    top:-2px;
    transform:rotate(28deg);
    width:11px;
}
.creatureMedallionStars-5.creatureMedallionSmallStar-5 {
    right:2px;
    top:6px;
    transform:rotate(55deg);
    width:10px;
}

/* Equivalent renommé de `.container-star.infiniteSmall::after` et
   `.infiniteSmall .stars-5.small-star-3`. */
.creatureMedallionInfiniteSmall::after {
    display:block;
    position:absolute;
    width:26px;
    height:26px;
    color:#eeca1b;
    text-align:center;
    line-height:26px;
    font-size:10px;
    text-shadow:0 0 4px #000;
    font-weight:bold;
    content:attr(data-infinite);
    left:15px;
    top:-12px;
    z-index:7;
}
.creatureMedallionInfiniteSmall .creatureMedallionStars-5.creatureMedallionSmallStar-3 {
    width:26px;
    right:14px;
    top:-13px;
    z-index:6;
}

/* public-teams utilisait un cercle fixe 25×25 via `:after`. Ici on garde son
   placement/hauteur, mais la largeur s'adapte au texte pour supporter les
   niveaux sans plafond du clicker. */
.creatureMedallionLock {
    position:absolute;
    left:40px;
    bottom:58px;
    z-index:8;
    display:grid;
    place-items:center;
    width:12px;
    height:12px;
    box-sizing:border-box;
    border:1px solid rgba(255,218,118,.9);
    border-radius:50%;
    background:rgba(22,27,35,.94);
    color:#ffd76a;
    font-size:6px;
    line-height:1;
    box-shadow:0 0 5px rgba(0,0,0,.75);
}


.creatureMedallionFavorite {
    position:absolute;
    left:-3px;
    top:18px;
    z-index:8;
    display:grid;
    place-items:center;
    width:15px;
    height:15px;
    box-sizing:border-box;
    border:1px solid rgba(176, 196, 214, .98);
    border-radius:50%;
    background:linear-gradient(180deg, rgba(101, 122, 141, .99) 0%, rgba(51, 68, 82, .99) 100%);
    color:#f0f3f5;
    font-size:8px;
    line-height:1;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .15),
        0 0 0 1px rgba(13, 26, 38, .82),
        0 1px 4px rgba(0, 0, 0, .82);
}

.creatureMedallionFavorite i {
    transform:translateY(.1px);
    text-shadow:none;
    filter:none;
}

.creatureMedallion--collection .creatureMedallionFavorite {
    top:39px;
}

.creatureMedallion--quick .creatureMedallionFavorite,
.creatureMedallion--team .creatureMedallionFavorite {
    top:17px;
}
.creatureMedallionLevel {
    position:absolute;
    display:block;
    min-width:18px;
    width:max-content;
    height:18px;
    box-sizing:border-box;
    padding:0 5px;
    color:white;
    text-align:center;
    line-height:18px;
    font-size:8px;
    font-weight:bold;
    background:rgba(0,0,0,.82);
    border-radius:999px;
    right:1px;
    bottom:0;
    white-space:nowrap;
    z-index:4;
}


/* Puissance individuelle sous le portrait : même largeur visuelle que le
   médaillon, texte nettement plus lisible et icône ATT officielle du prototype. */
.creatureMedallionPower {
    position:absolute;
    left:50%;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    box-sizing:border-box;
    height:17px;
    padding:0 3px;
    border:1px solid rgba(255,226,126,.22);
    border-radius:6px;
    background:rgba(0,0,0,.84);
    color:#ffe9a2;
    font:900 9px/15px "Poppins",sans-serif;
    text-align:center;
    white-space:nowrap;
    text-shadow:0 1px 2px #000;
    box-shadow:0 1px 3px rgba(0,0,0,.42);
    transform:translateX(-50%);
    pointer-events:none;
}
.creatureMedallionPowerIcon {
    display:block;
    flex:0 0 auto;
    width:11px;
    height:11px;
    object-fit:contain;
}
.creatureMedallionPowerValue {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.creatureMedallion--team .creatureMedallionPower {
    top:82px;
    width:70px;
}
.creatureMedallion--collection .creatureMedallionPower {
    top:68px;
    width:56px;
    height:15px;
    border-radius:5px;
    font-size:8px;
    line-height:13px;
}
.creatureMedallion--collection .creatureMedallionPowerIcon {
    width:10px;
    height:10px;
}

@keyframes creatureSelectionPulse {
    0%,100% { opacity:.28; transform:translate(-50%,-50%) scale(.90); }
    50% { opacity:.76; transform:translate(-50%,-50%) scale(1.05); }
}
.teamDrawerSlot .creatureMedallionSelectionGlow { display:none; }
.creatureSliderLegacy.is-equipped .creatureMedallionSelectionGlow {
    animation:creatureSelectionPulse 2.5s ease-in-out infinite;
}
.creatureSliderLegacy:hover .creatureMedallionSelectionGlow,
.creatureSliderLegacy:focus-visible .creatureMedallionSelectionGlow { opacity:.62; }
@media (prefers-reduced-motion: reduce) {
    .creatureSliderLegacy.is-equipped .creatureMedallionSelectionGlow { animation:none; opacity:.48; }
}

.drawerActionRow { display:flex; gap:6px; margin-top:3px; }
.drawerActionRow button,.drawerGachaBtn { margin:0; min-height:34px; padding:6px 9px; border-radius:8px; font:900 10px "Poppins",sans-serif; }
.drawerPrimaryBtn,.drawerGachaBtn { flex:1; border:1px solid rgba(255,222,109,.7); background:linear-gradient(180deg,#b87813,#764807); color:#fff7d6; }
.drawerSecondaryBtn { border:1px solid rgba(161,211,239,.44); background:#124e72; color:#e8f8ff; }

.gachaDrawerSection { margin-top:8px; padding-top:1px; border-top:1px solid rgba(205,232,250,.16); }
.gachaDrawerInfo { position:relative; top:auto; margin:5px -1px 5px; padding:7px 6px; background:rgba(0,0,0,.12); border:0; border-radius:8px; }
.gachaRatesCompact { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 6px; }
.gachaRatesCompact span { padding:3px 5px; border-radius:999px; background:rgba(255,255,255,.07); color:#d4e5f0; font-size:8px; font-weight:800; }
.drawerGachaBtn { width:100%; }
.gachaResultCompact { margin-top:6px; padding:7px; border:1px solid rgba(255,222,109,.4); border-radius:8px; background:rgba(126,80,9,.18); }
.gachaResultCompact div { display:flex; justify-content:space-between; gap:8px; }
.gachaResultCompact strong { font-size:11px; }
.gachaResultCompact p,.gachaResultCompact small { margin:2px 0 0; color:#d9e8f2; font-size:8px; }

@media (max-width:390px) {
    .teamDrawerSlots { gap:2px; }
    .teamDrawerSlot { height:90px; padding:0; }
    .creatureMedallion--team { width:62px; height:88px; --medallion-scale:1.08; --medallion-core-top:10px; }
    .creatureMedallion--team .creatureMedallionPower { top:70px; width:59px; height:15px; font-size:8px; line-height:13px; }
    .creatureSliderLegacy { flex-basis:60px; width:60px; min-width:60px; height:79px; }
    .creatureMedallion--collection { width:58px; height:78px; --medallion-scale:.90; --medallion-core-top:10px; }
    .creatureMedallion--collection .creatureMedallionPower { top:61px; width:50px; height:14px; font-size:7.5px; line-height:12px; }
}


/* Adaptations serveur du panneau V1 : même composant, sans import de save client. */
.serverSaveStatus {
    display:grid; grid-template-columns:auto 1fr; align-items:center; gap:3px 8px;
    padding:10px; border:1px solid rgba(142,220,255,.28); border-radius:9px;
    background:rgba(18,78,114,.24); color:#e9f8ff;
}
.serverSaveStatus i { grid-row:1 / 3; color:#8edcff; font-size:22px; }
.serverSaveStatus strong { font-size:12px; }
.serverSaveStatus span { color:#a9c6d8; font-size:10px; }
#optimalCrystalZone:disabled { opacity:.72; cursor:default; }
#profile-error:empty, #team-error:empty, #gacha-error:empty { min-height:0; margin-top:0; }

/* HP ennemi : interpolation visuelle très courte entre deux dégâts.
   Les changements de rencontre et le passage à 0 HP utilisent .is-hp-instant pour rester immédiats. */
#enemyMonsterHpBar .progress-bar { transition: width 90ms linear !important; }
#enemyMonsterHpBar .progress-bar.is-hp-instant { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    #enemyMonsterHpBar .progress-bar { transition: none !important; }
}

/* V1 profile panel: profile, stats and guide; owned portraits only, account action in profile. */
.playerPanelTabs { grid-template-columns: repeat(4, 1fr); }
.permanentBonusPane { display:grid; gap:10px; }
.permanentBonusHeader { padding:10px 11px; border:1px solid rgba(142,220,255,.22); border-radius:10px; background:linear-gradient(180deg,rgba(25,79,112,.38),rgba(8,31,52,.58)); }
.permanentBonusHeader small { display:block; color:#8edcff; font-size:8px; font-weight:900; letter-spacing:.14em; }
.permanentBonusHeader strong { display:block; margin-top:2px; color:#fff3c8; font-size:16px; letter-spacing:.04em; }
.permanentBonusHeader p { margin:4px 0 0; color:#b8cbd7; font-size:9px; line-height:1.35; }
.permanentBonusEffects { display:grid; gap:8px; }
.permanentBonusEffect { padding:9px 10px; border:1px solid rgba(255,224,145,.24); border-radius:9px; background:rgba(4,24,41,.64); }
.permanentBonusEffectTitle { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08); }
.permanentBonusEffectTitle strong { color:#dff5ff; font-size:11px; }
.permanentBonusEffectTitle b { color:#ffe08c; font-size:13px; }
.permanentBonusSource { display:flex; justify-content:space-between; gap:10px; margin-top:6px; color:#b8cbd7; font-size:9px; }
.permanentBonusSource span { min-width:0; overflow-wrap:anywhere; }
.permanentBonusSource strong { flex:0 0 auto; color:#dff5ff; }
.permanentBonusCodex { display:grid; gap:8px; padding:9px 10px 10px; border:1px solid rgba(255,224,145,.24); border-radius:9px; background:rgba(4,24,41,.64); }
.permanentBonusCodexHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.08); }
.permanentBonusCodexHeader > div { min-width:0; }
.permanentBonusCodexHeader small { display:block; color:#8edcff; font-size:8px; font-weight:900; letter-spacing:.12em; }
.permanentBonusCodexHeader strong { display:block; margin-top:1px; color:#dff5ff; font-size:10px; }
.permanentBonusCodexHeader b { flex:0 0 auto; color:#ffe08c; font-size:13px; }
.permanentBonusCodexRank { display:grid; gap:5px; }
.permanentBonusCodexRank + .permanentBonusCodexRank { margin-top:2px; padding-top:7px; border-top:1px solid rgba(255,255,255,.055); }
.permanentBonusCodexRankHeader { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:14px; }
.permanentBonusCodexRankLabel { color:#8faabd; font-size:8px; font-weight:900; letter-spacing:.12em; }
.permanentBonusCodexRankSubtotal { flex:0 0 auto; color:#ffe08c; font-size:8px; font-weight:1000; letter-spacing:.04em; }
.permanentBonusCodexGrid { display:grid; grid-template-columns:repeat(auto-fill,56px); gap:6px; align-items:start; }
.permanentBonusCodexTile { position:relative; width:56px; aspect-ratio:1; padding:0; overflow:hidden; border:0; border-radius:8px; background:transparent; color:inherit; box-shadow:none; font:inherit; appearance:none; }
.permanentBonusCodexTile.is-actionable { cursor:pointer; touch-action:manipulation; }
.permanentBonusCodexTile.is-actionable:hover,
.permanentBonusCodexTile.is-actionable:focus-visible { outline:1px solid rgba(142,220,255,.72); outline-offset:1px; box-shadow:0 0 9px rgba(142,220,255,.14); }
.permanentBonusCodexTile img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.38) contrast(.95); opacity:.72; transform:scale(1.02); }
.permanentBonusCodexTile.is-complete { border:0; box-shadow:none; }
.permanentBonusCodexTile.is-complete img { filter:none; opacity:1; }
.permanentBonusCodexValue { position:absolute; top:3px; right:3px; z-index:2; padding:2px 4px; border:1px solid rgba(255,224,140,.38); border-radius:999px; background:rgba(0,0,0,.84); color:#ffe08c; font-size:7px; font-weight:1000; line-height:1.05; text-shadow:0 1px 1px #000; }
.permanentBonusCodexCounter { position:absolute; right:3px; bottom:3px; min-width:28px; padding:2px 4px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(0,0,0,.82); color:#dce8ef; font-size:8px; font-weight:1000; line-height:1.05; text-align:center; text-shadow:0 1px 1px #000; }
.permanentBonusCodexTile.is-complete .permanentBonusCodexCounter { border-color:rgba(255,224,140,.45); color:#ffe08c; }
.permanentBonusFamilyOverlay { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:18px; }
.permanentBonusFamilyOverlayBackdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(0,7,14,.68); cursor:pointer; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.permanentBonusFamilyOverlayCard { position:relative; z-index:1; width:min(350px,100%); padding:15px 14px 16px; border:1px solid rgba(142,220,255,.42); border-radius:12px; background:linear-gradient(180deg,rgba(12,53,82,.98),rgba(4,23,40,.99)); box-shadow:0 16px 35px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05); }
.permanentBonusFamilyOverlayCard > small { display:block; color:#8edcff; font-size:8px; font-weight:900; letter-spacing:.13em; }
.permanentBonusFamilyOverlayCard > strong { display:block; margin-top:2px; padding-right:28px; color:#fff1bc; font-size:15px; line-height:1.2; }
.permanentBonusFamilyOverlayClose { position:absolute; top:7px; right:8px; width:28px; height:28px; padding:0; border:0; background:transparent; color:#fff; font-size:24px; line-height:26px; cursor:pointer; }
.permanentBonusFamilyPortraitList { display:flex; align-items:center; gap:7px; margin-top:13px; }
.permanentBonusFamilyPortrait { flex:1 1 0; min-width:0; padding:0; border:0; background:transparent; color:inherit; appearance:none; cursor:pointer; touch-action:manipulation; }
.permanentBonusFamilyPortrait img { display:block; width:100%; aspect-ratio:1; border:0; border-radius:50%; object-fit:cover; background:transparent; box-shadow:none; transition:transform .12s ease,filter .12s ease,opacity .12s ease; }
.permanentBonusFamilyPortrait:hover img,
.permanentBonusFamilyPortrait:focus-visible img { transform:scale(1.06); filter:brightness(1.08); }
.permanentBonusFamilyPortrait:focus-visible { outline:1px solid rgba(142,220,255,.72); outline-offset:2px; border-radius:10px; }
.permanentBonusFamilyPortrait.is-missing img { opacity:.74; filter:grayscale(.42) saturate(.65) brightness(.82); border:1px dashed rgba(220,238,255,.5); border-radius:10px; }
.permanentBonusFamilyPortrait.is-missing:hover img,
.permanentBonusFamilyPortrait.is-missing:focus-visible img { opacity:.95; filter:grayscale(.18) saturate(.8) brightness(.95); }
.permanentBonusEmpty { margin:0; text-align:center; }
.permanentBonusFormula { padding:12px; border:1px solid rgba(142,220,255,.28); border-radius:10px; background:rgba(8,36,59,.78); overflow:hidden; box-shadow:inset 0 0 22px rgba(91,211,255,.035); }
.permanentBonusFormula h3 { margin:0 0 10px; color:#8edcff; font-size:12px; letter-spacing:.09em; }
.permanentBonusFormulaTrack { display:flex; align-items:stretch; gap:4px; min-width:0; }
.permanentPowerFactor { position:relative; display:grid; align-content:center; justify-items:center; min-width:0; flex:1 1 0; min-height:68px; padding:8px 5px 7px; border:1px solid rgba(255,255,255,.15); border-radius:9px; background:rgba(4,24,41,.82); text-align:center; cursor:help; box-shadow:inset 0 0 18px rgba(255,255,255,.025); }
.permanentPowerFactor small { display:block; width:100%; color:#a9c1d2; font-size:8px; font-weight:1000; line-height:1.15; letter-spacing:.05em; white-space:nowrap; }
.permanentPowerFactor strong { display:block; max-width:100%; margin-top:5px; color:#f4fbff; font-size:12px; font-weight:1000; line-height:1.05; white-space:nowrap; }
.permanentPowerFactor--base { border-color:rgba(110,216,255,.46); background:linear-gradient(180deg,rgba(38,108,139,.32),rgba(4,24,41,.82)); }
.permanentPowerFactor--base strong { color:#8edcff; }
.permanentPowerFactor--direct { border-color:rgba(255,176,90,.5); background:linear-gradient(145deg,rgba(176,92,34,.25),rgba(27,111,127,.18) 55%,rgba(100,58,155,.2)); }
.permanentPowerFactor--direct strong { color:#ffbe73; }
.permanentPowerFactor--speed { border-color:rgba(91,211,255,.46); background:linear-gradient(145deg,rgba(35,126,161,.24),rgba(80,56,139,.2)); }
.permanentPowerFactor--speed strong { color:#70dcff; }
.permanentPowerFactor--crit { border-color:rgba(198,145,255,.48); background:linear-gradient(180deg,rgba(105,54,151,.28),rgba(4,24,41,.82)); }
.permanentPowerFactor--crit strong { color:#d2a4ff; }
.permanentPowerFactor--critDamage { border-color:rgba(255,116,142,.46); background:linear-gradient(180deg,rgba(147,48,72,.25),rgba(4,24,41,.82)); }
.permanentPowerFactor--critDamage strong { color:#ff8da5; }
.permanentPowerFactor--final { flex:1.16 1 0; border-color:rgba(255,224,140,.58); background:linear-gradient(180deg,rgba(139,102,25,.32),rgba(42,31,13,.66)); box-shadow:0 0 14px rgba(255,205,83,.08),inset 0 0 18px rgba(255,231,160,.04); }
.permanentPowerFactor--final small,.permanentPowerFactor--final strong { color:#ffe08c; }
.permanentPowerFactor--final strong { font-size:13.5px; }
.permanentPowerOperator { flex:0 0 auto; align-self:center; color:#b3c7d6; font-size:16px; font-weight:1000; line-height:1; }
.permanentPowerFactorSources { display:flex; align-items:center; justify-content:center; gap:4px; min-height:5px; margin-top:6px; }
.permanentPowerFactorSources i { display:block; width:5px; height:5px; border-radius:999px; background:#8194a3; box-shadow:0 0 5px currentColor; }
.permanentPowerFactorSources i.is-shop { background:#ffad59; color:#ffad59; }
.permanentPowerFactorSources i.is-codex { background:#66dce3; color:#66dce3; }
.permanentPowerFactorSources i.is-prestige { background:#b687ff; color:#b687ff; }
.permanentPowerFactorSources i.is-achievement { background:#ffe08c; color:#ffe08c; }
@media (max-width:560px) {
    .permanentBonusFormula { padding:10px 8px; }
    .permanentBonusFormula h3 { font-size:11px; }
    .permanentBonusFormulaTrack { gap:2px; }
    .permanentPowerFactor { min-height:62px; padding:7px 3px 6px; }
    .permanentPowerFactor small { font-size:7.5px; letter-spacing:.02em; }
    .permanentPowerFactor strong { font-size:10.5px; }
    .permanentPowerFactor--final strong { font-size:11.5px; }
    .permanentPowerOperator { font-size:13px; }
}
.portraitChoiceGridOwned { margin-top: 8px; }
.profileAccountActions { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(214,236,255,.16); }
.profileAccountActions #logout-button { width: 100%; border: 1px solid var(--ui-cyan); border-radius: 8px; background: var(--ui-blue); color: white; padding: 10px 12px; font-size: 11px; font-weight: 800; cursor: pointer; }
.profileResetBlock { margin-top: 10px; display: grid; gap: 6px; }
.profileResetBlock span { color: #b8c6cf; font-size: 9px; line-height: 1.35; text-align: center; }
.profileAccountActions #reset-profile-button { width: 100%; border: 1px solid rgba(255,105,105,.8); border-radius: 8px; background: rgba(105,24,31,.82); color: #ffe4e4; padding: 9px 12px; font-size: 10px; font-weight: 900; cursor: pointer; }
.profileAccountActions #reset-profile-button:hover:not(:disabled) { background: rgba(137,31,40,.94); }
.profileAccountActions #reset-profile-button:disabled { opacity: .55; cursor: wait; }

/* Panneau profil V1 : le reset global historique `button { margin:10px }`
   ne doit pas agrandir les contrôles au-delà de leur conteneur. */
.playerPanel,
.playerPanel *,
.playerPanel *::before,
.playerPanel *::after {
    box-sizing: border-box;
}
.playerPanel button {
    margin: 0;
}

/* Aperçu permanent de l'équipe active à la place de l'ancien bouton MONSTRES.
   Le bloc entier reste le déclencheur du drawer, comme la barre DPS/CLIC. */
#uiBtnContainer {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px) !important;
}
.teamQuickBar {
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    align-items:center;
    width:100%;
    min-width:0;
    height:84px;
    margin:0;
    padding:2px 5px 1px 7px;
    border:1px solid rgba(255,231,178,.62);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(13,55,86,.92),rgba(5,29,52,.95));
    color:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.10);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    cursor:pointer;
    overflow:visible;
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    transform-origin:center bottom;
    transition:
        opacity .18s ease,
        transform .18s cubic-bezier(.2,.72,.25,1),
        visibility 0s linear 0s,
        border-color .18s ease,
        background .18s ease;
}
.teamQuickBar.is-open {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(18px) scale(.96);
    transition:
        opacity .16s ease,
        transform .18s cubic-bezier(.4,0,1,1),
        visibility 0s linear .18s,
        border-color .18s ease,
        background .18s ease;
}
.teamQuickBar:hover,
.teamQuickBar:focus-visible {
    border-color:rgba(255,235,190,.88);
    outline:0;
    background:linear-gradient(180deg,rgba(18,68,103,.96),rgba(6,35,61,.97));
}
.teamQuickSlots {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-items:center;
    height:100%;
    min-width:0;
    gap:0;
}
.teamQuickSlot {
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    height:90px;
    overflow:visible;
}
.teamQuickSlot.is-empty { opacity:.46; }
.teamQuickSlotEmpty {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1.5px solid rgba(220,241,255,.32);
    border-radius:50%;
    background:rgba(255,255,255,.035);
    color:#d7edfa;
    font:900 13px/1 "Poppins",sans-serif;
}
.creatureMedallion--quick {
    width:64px;
    height:89px;
    --medallion-scale:1.08;
    --medallion-core-top:8px;
}
.creatureMedallion--quick .creatureMedallionPower {
    top:70px;
    width:59px;
    height:16px;
    border-radius:5px;
    font-size:8.5px;
    line-height:14px;
}
.creatureMedallion--quick .creatureMedallionPowerIcon {
    width:10px;
    height:10px;
}
.teamQuickBar .creatureMedallionSelectionGlow { display:none; }
.teamQuickOpenIcon {
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    justify-self:center;
    border:1px solid rgba(210,235,250,.25);
    border-radius:50%;
    background:rgba(255,255,255,.055);
    color:#e6f6ff;
    font-size:11px;
    transition:transform .18s ease, background .18s ease;
}
.teamQuickBar.is-open .teamQuickOpenIcon {
    transform:rotate(180deg);
    background:rgba(255,255,255,.10);
}
@media (max-width:390px) {
    #uiBtnContainer { width:calc(100% - 24px); }
    .teamQuickBar { height:86px; padding-left:4px; grid-template-columns:minmax(0,1fr) 30px; }
    .teamQuickSlot { height:82px; }
    .creatureMedallion--quick { width:55px; height:80px; --medallion-scale:.96; --medallion-core-top:7px; }
    .creatureMedallion--quick .creatureMedallionPower { top:63px; width:52px; height:14px; font-size:7.5px; line-height:12px; }
    .teamQuickSlotEmpty { width:23px; height:23px; font-size:12px; }
    .teamQuickOpenIcon { width:26px; height:26px; font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
    .teamQuickBar { transition:none; }
}

/* Drawer équipe : lorsqu'il est ouvert il remplace la quickbar et vient
   directement s'appuyer sur le bord supérieur de la barre DPS/CLIC/CRISTAL-M.
   Le CSS V1 conservait un espace de 51 px prévu pour l'ancien bouton MONSTRES. */
#monsterContainer {
    bottom: 100% !important;
}

/* Quickbar équipe : même emprise horizontale que la barre DPS/CLIC/CRISTAL-M. */
#uiBtnContainer {
    left: 0 !important;
    width: 100% !important;
    padding: 0 12px !important;
    transform: none !important;
    box-sizing: border-box;
}

/* Quand le drawer remplace visuellement la quickbar, son conteneur fantôme
   ne doit plus intercepter les clics destinés au drawer (notamment Gacha). */
.gameContainer.monster-panel-open #uiBtnContainer {
    pointer-events: none !important;
}

.teamQuickBar {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 390px) {
    #uiBtnContainer {
        width: 100% !important;
        padding: 0 12px !important;
    }
}

/* Drawer: supprimer les reliquats visuels du scroll V1.
   Le contenu reste scrollable verticalement, mais sans gutter/barre visible,
   et le header vient affleurer le bord supérieur du panneau. */
#monsterContainer {
    padding-top: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#monsterContainer::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
#monsterContainer .drawerHeader {
    top: 0;
    margin-top: 0;
}

/* 2026-08-24 — Lisibilité puissance individuelle.
   Le bandeau reste sous le portrait mais la typographie et l'icône ATT sont
   volontairement plus grandes sur les trois contextes (équipe, collection,
   quickbar). */
.creatureMedallionPower {
    gap:3px;
    color:#fff3b3;
    font-size:11.5px;
    line-height:17px;
    font-weight:600;
    letter-spacing:.15px;
    font-variant-numeric:tabular-nums;
    text-shadow:0 1px 1px rgba(0,0,0,.85);
}
.creatureMedallionPowerIcon {
    width:14px;
    height:14px;
}
.creatureMedallion--team .creatureMedallionPower {
    height:20px;
    font-size:12px;
    line-height:18px;
}
.creatureMedallion--team .creatureMedallionPowerIcon {
    width:14px;
    height:14px;
}
.creatureMedallion--collection .creatureMedallionPower {
    height:18px;
    font-size:10.5px;
    line-height:16px;
}
.creatureMedallion--collection .creatureMedallionPowerIcon {
    width:12px;
    height:12px;
}
.creatureMedallion--quick .creatureMedallionPower {
    height:19px;
    font-size:11px;
    line-height:17px;
}
.creatureMedallion--quick .creatureMedallionPowerIcon {
    width:13px;
    height:13px;
}

@media (max-width:390px) {
    .creatureMedallion--team .creatureMedallionPower {
        height:18px;
        font-size:10.5px;
        line-height:16px;
    }
    .creatureMedallion--team .creatureMedallionPowerIcon {
        width:12px;
        height:12px;
    }
    .creatureMedallion--collection .creatureMedallionPower {
        height:17px;
        font-size:9.5px;
        line-height:15px;
    }
    .creatureMedallion--collection .creatureMedallionPowerIcon {
        width:11px;
        height:11px;
    }
    .creatureMedallion--quick .creatureMedallionPower {
        height:18px;
        font-size:10px;
        line-height:16px;
    }
    .creatureMedallion--quick .creatureMedallionPowerIcon {
        width:12px;
        height:12px;
    }
}

/* =========================================================
   UX créatures — clic = fiche, actions d'équipe explicites
   ========================================================= */
.teamDrawerCreatureButton,
.creatureSliderDetailsButton {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
}
.teamDrawerCreatureButton:hover,
.teamDrawerCreatureButton:focus-visible,
.creatureSliderDetailsButton:hover,
.creatureSliderDetailsButton:focus-visible {
    outline:0;
    background:transparent;
}
.teamDrawerCreatureButton:focus-visible .creatureMedallionCore,
.creatureSliderDetailsButton:focus-visible .creatureMedallionCore {
    filter:brightness(1.12) drop-shadow(0 0 6px rgba(116,218,255,.68));
}

.teamDrawerRemoveButton,
.creatureTeamAddButton {
    position:absolute;
    z-index:12;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    margin:0;
    padding:0 0 1px;
    border:2px solid rgba(255,255,255,.94);
    border-radius:50%;
    background:transparent;
    color:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.72),0 0 3px rgba(0,0,0,.46);
    font:900 15px/1 "Poppins",Arial,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease;
}
.teamDrawerRemoveButton {
    top:57px;
    left:1px;
    padding-bottom:2px;
}
.creatureTeamAddButton {
    top:45px;
    left:0;
}

.creatureSliderLegacy .creatureTeamAddButton {
    top:8px;
    left:2px;
}
.teamDrawerRemoveButton:hover,
.teamDrawerRemoveButton:focus-visible,
.creatureTeamAddButton:hover,
.creatureTeamAddButton:focus-visible {
    outline:none;
    background:rgba(255,255,255,.10);
    box-shadow:0 2px 6px rgba(0,0,0,.78),0 0 3px rgba(0,0,0,.50),0 0 0 2px rgba(255,255,255,.08);
}
.teamDrawerRemoveButton:active,
.creatureTeamAddButton:active { transform:scale(.90); }

@media (max-width:390px) {
    .teamDrawerRemoveButton,
    .creatureTeamAddButton {
        width:19px;
        min-width:19px;
        height:19px;
        font-size:14px;
    }
    .teamDrawerRemoveButton { top:57px; left:1px; }
    .creatureTeamAddButton { top:45px; left:0; }
    .creatureSliderLegacy .creatureTeamAddButton { top:7px; left:1px; }
}


/* =========================================================
   Économie d'invocation — inventaire pierres/fragments
   ========================================================= */
.gachaInventoryCompact {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin:5px 0 6px;
}
.gachaInventoryItem {
    --summon-accent:190,216,235;
    min-width:0;
    padding:5px 6px 6px;
    border:1px solid rgba(var(--summon-accent),.22);
    border-radius:7px;
    background:rgba(0,0,0,.17);
    color:#c8dce9;
}
.gachaInventoryItem--small { --summon-accent:85,227,127; }
.gachaInventoryItem--medium { --summon-accent:255,175,52; }
.gachaInventoryItem--legendary { --summon-accent:183,112,255; }
.gachaInventoryItem--supreme { --summon-accent:255,226,120; }
.gachaInventoryItem.is-active-pool {
    border-color:rgba(var(--summon-accent),.72);
    box-shadow:inset 0 0 0 1px rgba(var(--summon-accent),.14),0 0 8px rgba(var(--summon-accent),.08);
}
.gachaInventoryItemLabel {
    display:block;
    overflow:hidden;
    color:#d8e7f1;
    font-size:8px;
    font-weight:800;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.gachaInventoryItemResources {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    min-width:0;
    margin-top:2px;
}
.gachaInventoryStone,
.gachaInventoryFragments {
    display:flex;
    align-items:center;
    min-width:0;
}
.gachaInventoryStone { gap:2px; }
.gachaInventoryFragments { gap:1px; justify-content:flex-end; }
.gachaInventoryStoneIcon {
    width:27px;
    height:27px;
    flex:0 0 27px;
    object-fit:contain;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.gachaInventoryFragmentIcon {
    width:19px;
    height:19px;
    flex:0 0 19px;
    object-fit:contain;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.gachaInventoryStone strong {
    color:#ffe494;
    font-size:13px;
    line-height:1;
}
.gachaInventoryFragments small {
    overflow:hidden;
    color:#91aabb;
    font-size:6.5px;
    font-weight:800;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.summonRewardFeedback {
    position:fixed;
    left:50%;
    top:calc(max(12px,env(safe-area-inset-top)) + 118px);
    z-index:4200;
    display:grid;
    gap:4px;
    min-width:180px;
    pointer-events:none;
    transform:translateX(-50%);
}
.summonRewardFeedbackLine {
    padding:7px 12px;
    border:1px solid rgba(225,239,252,.55);
    border-radius:999px;
    background:rgba(8,27,42,.94);
    box-shadow:0 5px 14px rgba(0,0,0,.42);
    color:#f7fbff;
    font:800 10px/1.2 "Poppins",sans-serif;
    text-align:center;
    white-space:nowrap;
}
.summonRewardFeedbackLine--medium { border-color:rgba(255,183,47,.86); color:#fff0b2; }
.summonRewardFeedbackLine--legendary { border-color:rgba(183,112,255,.78); color:#ead5ff; }
.summonRewardFeedbackLine--supreme { border-color:rgba(255,226,120,.86); color:#fff1b8; }
@media (max-width:390px) {
    .gachaInventoryCompact { gap:3px; }
    .gachaInventoryItem { padding:4px; }
    .gachaInventoryItemLabel { font-size:7px; }
    .gachaInventoryStoneIcon { width:24px; height:24px; flex-basis:24px; }
    .gachaInventoryFragmentIcon { width:17px; height:17px; flex-basis:17px; }
    .gachaInventoryStone strong { font-size:11px; }
    .gachaInventoryFragments small { font-size:6px; }
}

/* =========================================================
   Codex / Profil v0.1 — historique permanent + navigation élémentaire
   ========================================================= */
.playerPanelHeader {
    min-height: 54px;
    padding: 8px 12px 7px;
}
.playerPanelHeader strong { font-size: 18px; }
.profileBalanceProfileBadge {
    display: block;
    width: fit-content;
    margin-top: 3px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 196, 82, .62);
    border-radius: 999px;
    background: rgba(91, 55, 3, .42);
    color: #ffe2a0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.35;
}
.profileBalanceProfileBadge[hidden] { display: none; }
#playerPanelClose { font-size: 27px; }
.playerPanelTabs { padding: 6px 8px; gap: 5px; }
.playerPanelTab { padding: 7px 4px; font-size: 11px; }
.playerPanelBody {
    padding: 9px 11px 11px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 213, 231, .70) rgba(4, 20, 36, .55);
}
.playerPanelBody::-webkit-scrollbar,
.portraitChoiceScroller::-webkit-scrollbar { width: 6px; }
.playerPanelBody::-webkit-scrollbar-track,
.portraitChoiceScroller::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(4, 20, 36, .55);
}
.playerPanelBody::-webkit-scrollbar-thumb,
.portraitChoiceScroller::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(100, 213, 231, .88), rgba(36, 126, 166, .92));
}

.profileHero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50%;
    gap: 10px;
    align-items: stretch;
    min-height: 72px;
}
.profileHeroMain {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr);
    gap: 0px;
    align-items: center;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid rgba(154, 190, 225, .22);
    border-radius: 10px;
    background: rgba(5, 25, 46, .82);
}
.profilePortraitPreview {
    width: 90px;
    height: 90px;
    margin: auto;
}
.profileHeroStats {
    display: block;
    align-content: stretch;
    justify-content: space-around;
    margin: auto;
}
.profileHeroMetric {
    min-width:0;
    padding:0;
    border-left:0;
    margin: 15px 0;
}
.profileHeroMetric span {
    display:block;
    color:#b8cee1;
    font-size:8px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.profileHeroMetric strong {
    display:block;
    margin:4px 0 0;
    color:#ffdfa2;
    font-size:18px;
    font-weight:900;
    line-height:1;
}

.profileAuthCard {
    display:grid;
    grid-template-rows:auto 1fr;
    gap:8px;
    min-width:0;
    padding:10px 11px;
    border:1px solid rgba(153,184,255,.28);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(36,53,110,.94), rgba(30,41,100,.94));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.profileAuthHeading {
    display:flex;
    flex-direction:column;
    gap:3px;
}
.profileAuthHeading strong {
    color:#f2f7ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.profileAuthHeading small {
    color:#b6c8ef;
    font-size:8px;
    font-weight:700;
    line-height:1.2;
}
.profileAuthMethods {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    align-self:stretch;
    min-width:0;
}
.profileAuthProvider {
    display:grid;
    grid-template-columns:20px minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    min-width:0;
    min-height:29px;
    padding:7px 10px;
    border:1px solid rgba(214,236,255,.22);
    border-radius:8px;
    background:rgba(9,24,60,.56);
    color:#eef7ff;
    font:800 8px/1 "Poppins",sans-serif;
    text-align:left;
}
.profileAuthProvider .authProviderLogo { width: 14px; height: 14px; justify-self: center; }
.profileAuthProvider span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.profileAuthProvider small { color:#d9e7ff; font-size:7px; font-weight:900; letter-spacing:.05em; }
.profileAuthProvider:not(:disabled):hover,.profileAuthProvider:not(:disabled):focus-visible { outline:0; border-color:#8edcff; filter:brightness(1.12); }
.profileAuthProvider.is-linked { border-color:rgba(96,220,154,.58); background:rgba(20,83,61,.45); color:#dfffee; }
.profileAuthProvider.is-linked small { color:#8df0bb; }
.profileAuthProvider.is-unconfigured { opacity:.42; }
.profileAuthProvider:disabled { cursor:default; }

.profileDifficulty { margin: 10px 0 14px; padding: 10px; border: 1px solid rgba(154,190,225,.3); border-radius: 14px; background: rgba(4,18,34,.72); }
.profileDifficultyHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.profileDifficultyHeading span { color: #eef6ff; font-weight: 900; letter-spacing: .07em; }
.profileDifficultyHeading small { color: #91a7bd; text-align: right; }
.profileDifficultyChoices { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.difficultyChoice { display: grid; grid-template-columns: 24px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 0 7px; min-width: 0; padding: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: #fff; text-align: left; opacity: .72; }
.difficultyChoice img,
.difficultyChoiceTemporaryIcon { grid-row: 1 / 3; width: 24px; height: 34px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); }
.difficultyChoiceTemporaryIcon { display:grid; place-items:center; font-size:1.45rem; filter:none; color:#fff; }
.difficultyChoice span { font-size: .76rem; font-weight: 950; letter-spacing: .04em; }
.difficultyChoice small { overflow: hidden; color: rgba(255,255,255,.72); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.difficultyChoice--normal { background: linear-gradient(145deg, #1f6eaa, #123b68); }
.difficultyChoice--hard { background: linear-gradient(145deg, #773bb2, #3b1c68); }
.difficultyChoice--nightmare { background: linear-gradient(145deg, #a92f47, #551425); }
.difficultyChoice--heaven { background: linear-gradient(145deg, #8d9fba, #4d5f78); }
.difficultyChoice.is-active { opacity: 1; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 7px 16px rgba(0,0,0,.28); }
.difficultyChoice:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .35; }

@media (max-width: 520px) {
    .profileHero { grid-template-columns: minmax(0, 1fr) 50%; gap: 8px; }
    .profileHeroMain { grid-template-columns: 48% minmax(0, 1fr); gap: 7px; padding: 7px 8px; }
    .profilePortraitPreview { width: 90px; height: 90px; margin: auto; }
    .profileHeroStats { display: block; margin: auto; }
    .profileHeroMetric span { font-size: 7px; }
    .profileHeroMetric strong { font-size: 16px; }
    .profileAuthCard { padding: 8px; }
    .profileAuthHeading strong { font-size: 10px; }
    .profileAuthHeading small { font-size: 7px; }
    .profileAuthMethods { gap: 6px; }
    .profileAuthProvider { grid-template-columns: 17px minmax(0,1fr) auto; gap: 5px; min-height: 28px; padding: 6px 8px; }
    .profileAuthProvider span { font-size: 7.5px; }
    .profileAuthProvider small { font-size: 6.5px; }
    .profileDifficultyChoices { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
    .difficultyChoice { grid-template-columns: 26px minmax(0,1fr); gap: 0 5px; padding: 6px 5px; }
    .difficultyChoice img, .difficultyChoiceTemporaryIcon { width: 26px; height: 26px; }
    .difficultyChoice span { font-size: .64rem; }
    .difficultyChoice small { font-size: .55rem; }
    .profileDifficultyHeading { align-items: flex-start; flex-direction: column; }
    .profileDifficultyHeading small { text-align: left; }
}

@media (max-width: 370px) {
    .profileHero { grid-template-columns: minmax(0, 1fr) 50%; gap: 6px; }
    .profileHeroMain { grid-template-columns: 48% minmax(0, 1fr); gap: 5px; padding: 6px; }
    .profilePortraitPreview { width: 62px; height: 62px; }
    .profileAuthCard { padding: 6px; }
    .profileAuthProvider { grid-template-columns: 15px minmax(0,1fr) auto; padding: 5px 6px; }
    .profileAuthProvider small { font-size: 6px; }
}

body[data-difficulty="hard"] { --difficulty-accent: #773bb2; --difficulty-icon: url("/client/assets/difficulty/hard.png"); }
body[data-difficulty="nightmare"] { --difficulty-accent: #a92f47; --difficulty-icon: url("/client/assets/difficulty/nightmare.png"); }
body[data-difficulty="heaven"] { --difficulty-accent: #8d9fba; --difficulty-icon: url("/client/assets/difficulty/heaven.png"); }
body[data-difficulty="hard"] .battle-enemy-portrait::after,
body[data-difficulty="hard"] .enemy-monster-portrait::after,
body[data-difficulty="nightmare"] .battle-enemy-portrait::after,
body[data-difficulty="nightmare"] .enemy-monster-portrait::after,
body[data-difficulty="heaven"] .battle-enemy-portrait::after,
body[data-difficulty="heaven"] .enemy-monster-portrait::after {
    content: "";
    position: absolute;
    z-index: 8;
    right: -3px;
    bottom: 3px;
    width: 26px;
    height: 26px;
    background: var(--difficulty-icon) center / contain no-repeat;
    filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
    pointer-events: none;
}
body[data-difficulty="hard"] .battle-level-info { border-color: rgba(180,112,238,.55); background: linear-gradient(180deg, rgba(75,31,114,.96), rgba(35,17,61,.96)); }
body[data-difficulty="nightmare"] .battle-level-info { border-color: rgba(239,88,111,.58); background: linear-gradient(180deg, rgba(115,27,48,.96), rgba(54,12,26,.96)); }
body[data-difficulty="heaven"] .battle-level-info { border-color: rgba(174,189,210,.62); background: linear-gradient(180deg, rgba(77,95,120,.96), rgba(43,55,74,.97)); }
.playerFieldLabel { margin: 10px 0 4px; font-size: 10px; }
.playerNicknameEdit input { padding: 8px 9px; }
.playerNicknameEdit button { padding: 8px 10px; font-size: 9px; }
#profile-error { margin-bottom: 0; }

.playerPortraitPicker {
    margin-top: 9px;
    padding-top: 8px;
}
.playerPortraitPickerTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.playerPortraitPickerTitle strong {
    padding: 3px 8px;
    border: 1px solid rgba(255, 219, 112, .34);
    border-radius: 999px;
    background: rgba(255, 200, 63, .08);
    color: var(--ui-gold-light);
    font-size: 10px;
    white-space: nowrap;
}
.playerPortraitPicker .playerPanelHint {
    margin: 3px 0 8px;
    font-size: 10px;
    line-height: 1.32;
}
.portraitElementTabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 6px;
    padding: 4px;
    border: 1px solid rgba(214, 236, 255, .16);
    border-radius: 10px;
    background: rgba(0, 0, 0, .18);
}
.portraitElementTab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 40px;
    padding: 3px 4px;
    border: 1px solid rgba(214, 236, 255, .15);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: #b8d2df;
    cursor: pointer;
}
.portraitElementTab img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.portraitElementTab small {
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}
.portraitElementTab.is-active {
    border-color: rgba(99, 223, 239, .88);
    background: linear-gradient(180deg, rgba(40, 143, 173, .32), rgba(14, 73, 104, .30));
    box-shadow: inset 0 0 0 1px rgba(99, 223, 239, .10), 0 0 7px rgba(99, 223, 239, .10);
    color: #effdff;
}
.portraitElementTab.is-complete::after {
    content: "✓";
    position: absolute;
    top: 2px;
    right: 3px;
    color: #ffe58c;
    font-size: 7px;
    font-weight: 900;
}

.portraitChoiceScroller {
    position: relative;
    max-height: min(43dvh, 350px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 3px 3px 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 213, 231, .70) rgba(4, 20, 36, .55);
}
.portraitChoiceGroup {
    margin: 0 0 7px;
    scroll-margin-top: 2px;
}
.portraitChoiceGroupTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1px 5px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(214, 236, 255, .10);
    color: #bcd3df;
    font-size: 9px;
}
.portraitChoiceGroupTitle span { font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.portraitChoiceGroupTitle small { color: #789db1; font-size: 8px; font-weight: 900; }
.portraitChoiceGridCodex {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}
.portraitChoiceGridCodex .portraitChoice {
    border-radius: 7px;
}
.portraitChoice.is-locked {
    opacity: 1;
    cursor: pointer;
    border-color: rgba(181, 198, 209, .14);
    background: rgba(9, 18, 28, .72);
}
.portraitChoice.is-locked .portraitChoiceImage {
    filter: grayscale(1) brightness(.33) contrast(.82);
    opacity: .58;
}
.portraitChoice.is-locked .portraitChoiceRank {
    background: rgba(3, 9, 15, .86);
    color: rgba(196, 208, 215, .55);
}
.profileAccountActions { margin-top: 10px; padding-top: 8px; }
.profileAccountActions #logout-button { padding: 8px 10px; font-size: 9px; }
.profileAccountActions #reset-profile-button { padding: 7px 9px; font-size: 8px; }
.profileResetBlock span { font-size: 8px; }

@media (max-width: 420px) {
    .playerPanelBody { padding: 7px 8px 9px; }
    .profileHero { min-height: 72px; }
    .profileHeroMetric strong { font-size: 16px; }
    .playerPortraitPickerTitle { font-size: 12px; }
    .playerPortraitPickerTitle strong { font-size: 9px; }
    .playerPortraitPicker .playerPanelHint { font-size: 9.5px; }
    .portraitElementTab { height: 35px; padding: 2px 3px; }
    .portraitElementTab img { width: 20px; height: 20px; }
    .portraitElementTab small { font-size: 7px; }
    .portraitChoiceGridCodex { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .portraitChoiceScroller { max-height: min(46dvh, 335px); }
}

.portraitCodexStatus { padding: 14px 4px; text-align: center; }
.portraitCodexStatus.is-error { color: #ff9c9c; }

/* Progression équipe : les slots au-delà de la capacité débloquée restent visibles mais verrouillés. */
.teamQuickSlot.is-locked,
.teamDrawerSlot.is-locked {
    opacity: .34;
    filter: grayscale(1);
}
.teamQuickSlotLock,
.teamDrawerSlotLock {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(220,241,255,.22);
    border-radius: 50%;
    background: rgba(2,15,28,.52);
    color: rgba(235,246,255,.82);
    font-size: 13px;
    line-height: 1;
    user-select: none;
}
.teamDrawerSlotLock {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

.authCard > .authHomeButton {
    width: 100%;
    margin-top: 9px;
    border-color: rgba(210, 235, 255, .18);
    background: transparent;
    color: rgba(207, 238, 255, .78);
}

/* Codex — filtre par rang natif. */
.portraitNatFilters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 5px;
    margin-bottom: 6px;
    padding: 4px;
    border: 1px solid rgba(214, 236, 255, .16);
    border-radius: 10px;
    background: rgba(0, 0, 0, .18);
}
.portraitNatFilter {
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 38px;
    padding: 4px 3px;
    border: 1px solid rgba(214, 236, 255, .15);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: #b8d2df;
    cursor: pointer;
}
.portraitNatFilter strong {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .25px;
}
.portraitNatFilter small {
    color: #789db1;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}
.portraitNatFilter.is-active {
    border-color: rgba(255, 219, 112, .72);
    background: linear-gradient(180deg, rgba(153, 106, 25, .30), rgba(91, 57, 10, .28));
    box-shadow: inset 0 0 0 1px rgba(255, 219, 112, .08), 0 0 7px rgba(255, 201, 63, .08);
    color: #fff2bc;
}
.portraitNatFilter.is-active small {
    color: #ffe08b;
}

@media (max-width: 420px) {
    .portraitNatFilters { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
    .portraitNatFilter { min-height: 34px; }
    .portraitNatFilter strong { font-size: 8.5px; }
    .portraitNatFilter small { font-size: 7px; }
}

/* Bonus Codex — résumé compact fermé par défaut, portraits construits seulement à l'ouverture. */
.permanentBonusCodexHeader {
    width: 100%;
    padding: 0 0 7px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.permanentBonusCodexHeader:hover,
.permanentBonusCodexHeader:focus-visible {
    outline: none;
    background: rgba(142,220,255,.035);
}
.permanentBonusCodexDetails[hidden] { display: none !important; }
.permanentBonusCodexDetails { display: grid; gap: 8px; }

/* =========================================================
   Difficulty modes — visual identity
   NORMAL conserve strictement le rendu historique.
   HARD / NIGHTMARE ajoutent uniquement une identité visuelle de mode.
   ========================================================= */
body[data-difficulty="hard"] {
    --difficulty-accent: #773bb2;
    --difficulty-accent-soft: rgba(119,59,178,.28);
    --difficulty-rail-top: rgba(59,28,104,.97);
    --difficulty-rail-bottom: rgba(31,14,55,.98);
    --difficulty-zone-top: #5d2d91;
    --difficulty-zone-bottom: #3c1c62;
    --difficulty-zone-selected-top: #773bb2;
    --difficulty-zone-selected-bottom: #4f277d;
    --difficulty-hp-start: #8d57c7;
    --difficulty-hp-end: #67319a;
}
body[data-difficulty="nightmare"] {
    --difficulty-accent: #a92f47;
    --difficulty-accent-soft: rgba(169,47,71,.30);
    --difficulty-rail-top: rgba(91,22,39,.96);
    --difficulty-rail-bottom: rgba(49,12,24,.97);
    --difficulty-zone-top: #8d263d;
    --difficulty-zone-bottom: #61182b;
    --difficulty-zone-selected-top: #bf4b61;
    --difficulty-zone-selected-bottom: #8f273e;
    --difficulty-hp-start: #e06a7f;
    --difficulty-hp-end: #a92f47;
}
body[data-difficulty="heaven"] {
    --difficulty-accent: #8d9fba;
    --difficulty-accent-soft: rgba(141,159,186,.30);
    --difficulty-rail-top: rgba(77,95,120,.97);
    --difficulty-rail-bottom: rgba(35,46,63,.98);
    --difficulty-zone-top: #6f819a;
    --difficulty-zone-bottom: #4d5f78;
    --difficulty-zone-selected-top: #aab9ce;
    --difficulty-zone-selected-bottom: #70839d;
    --difficulty-hp-start: #d9e4f1;
    --difficulty-hp-end: #8d9fba;
}

/* Icône de mode : PNG seul, sans badge/cercle. Le drop-shadow noir suit la transparence. */
body[data-difficulty="hard"] #enemyMonsterName,
body[data-difficulty="nightmare"] #enemyMonsterName,
body[data-difficulty="heaven"] #enemyMonsterName {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding-left: 27px;
}
body[data-difficulty="hard"] #enemyMonsterName::before,
body[data-difficulty="nightmare"] #enemyMonsterName::before,
body[data-difficulty="heaven"] #enemyMonsterName::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 16px;
    height: 61px;
    background: var(--difficulty-icon) center / contain no-repeat;
    filter: drop-shadow(0.5px 0 0 #000) drop-shadow(-0.5px 0 0 #000) drop-shadow(0 0.5px 0 #000) drop-shadow(0 -0.5px 0 #000) drop-shadow(0 0.5px 0.5px rgba(0,0,0,.65));
    transform: translateY(-50%);
    pointer-events: none;
}

/* Aucune bordure / aura supplémentaire autour du bloc nom + barre de vie. */
body[data-difficulty="hard"] #enemyMonsterHpBar .progress-bar.bar-100,
body[data-difficulty="nightmare"] #enemyMonsterHpBar .progress-bar.bar-100,
body[data-difficulty="heaven"] #enemyMonsterHpBar .progress-bar.bar-100 {
    background: linear-gradient(90deg, var(--difficulty-hp-start), var(--difficulty-hp-end)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.24) !important;
}

/* Le rail entier adopte la couleur du mode : plus de mélange bleu + violet/rouge. */
body[data-difficulty="hard"] .level-selector-container,
body[data-difficulty="nightmare"] .level-selector-container,
body[data-difficulty="heaven"] .level-selector-container {
    border-color: var(--difficulty-accent) !important;
    background: linear-gradient(180deg, var(--difficulty-rail-top), var(--difficulty-rail-bottom)) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.07) !important;
}
/* Zones ordinaires : couleur propre à la difficulté. */
body[data-difficulty="hard"] .level-selector:not(.is-boss-level),
body[data-difficulty="nightmare"] .level-selector:not(.is-boss-level),
body[data-difficulty="heaven"] .level-selector:not(.is-boss-level) {
    border-color: rgba(238,226,250,.76) !important;
    background: linear-gradient(180deg, var(--difficulty-zone-top), var(--difficulty-zone-bottom)) !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.14) !important;
}
body[data-difficulty="hard"] .level-selector.selected:not(.is-boss-level),
body[data-difficulty="nightmare"] .level-selector.selected:not(.is-boss-level),
body[data-difficulty="heaven"] .level-selector.selected:not(.is-boss-level) {
    border-color: #fff !important;
    background: linear-gradient(180deg, var(--difficulty-zone-selected-top), var(--difficulty-zone-selected-bottom)) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--difficulty-accent-soft), 0 5px 12px rgba(0,0,0,.35) !important;
}

/* Boss non actif : bordure boss orange/jaune, fond de la difficulté.
 * Boss actif : aucune surcharge ici ; le style historique selected + élément
 * reprend la main et change le fond exactement comme en mode Normal. */
body[data-difficulty="hard"] .level-selector.is-boss-level:not(.selected),
body[data-difficulty="nightmare"] .level-selector.is-boss-level:not(.selected),
body[data-difficulty="heaven"] .level-selector.is-boss-level:not(.selected) {
    border-color: rgba(255,188,93,.95) !important;
    background: linear-gradient(180deg, var(--difficulty-zone-top), var(--difficulty-zone-bottom)) !important;
    color: #fff !important;
    box-shadow:
        0 4px 9px rgba(0,0,0,.32),
        inset 0 1px rgba(255,255,255,.16),
        0 0 0 1px rgba(255,112,65,.24) !important;
}
body[data-difficulty="hard"] .level-selector-search,
body[data-difficulty="hard"] .level-selector-jump-max,
body[data-difficulty="hard"] .optimalCrystalControl,
body[data-difficulty="nightmare"] .level-selector-search,
body[data-difficulty="nightmare"] .level-selector-jump-max,
body[data-difficulty="nightmare"] .optimalCrystalControl,
body[data-difficulty="heaven"] .level-selector-search,
body[data-difficulty="heaven"] .level-selector-jump-max,
body[data-difficulty="heaven"] .optimalCrystalControl {
    border-color: rgba(238,226,250,.76) !important;
    background: linear-gradient(180deg, var(--difficulty-zone-selected-top), var(--difficulty-zone-selected-bottom)) !important;
    color: #fff !important;
    box-shadow: 0 4px 9px rgba(0,0,0,.30) !important;
}


.authProviderLogo {
    display:block;
    width:16px;
    height:16px;
    flex:0 0 auto;
    object-fit:contain;
    pointer-events:none;
    filter: drop-shadow(0 0 .5px rgba(0,0,0,.9));
}

/* Auth OAuth direct — Google reste une alternative claire sans masquer le login classique. */
.authOAuthActions {
    display:grid;
    gap:7px;
    margin-top:10px;
}
.authOAuthSeparator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin:8px 0 2px;
    color: #8aa8bc;
    font: 800 9px/1 "Poppins", sans-serif;
    letter-spacing: .08em;
}
.authOAuthSeparator::before,
.authOAuthSeparator::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(210,235,255,.18);
}
.authGoogleButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-color: rgba(224,238,255,.42) !important;
    background: rgba(247,250,255,.96) !important;
    color: #18324a !important;
    text-shadow: none !important;
}
.authGoogleButton .authProviderLogo {
    width: 18px;
    height: 18px;
}
.authGoogleButton:hover,
.authGoogleButton:focus-visible {
    outline: 0;
    filter: brightness(1.05);
    border-color: #fff !important;
}
.authGoogleButton:disabled {
    cursor: wait;
    opacity: .62;
}
.authDiscordButton {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-color:rgba(142,154,255,.58) !important;
    background:#5865f2 !important;
    color:#fff !important;
    text-shadow:none !important;
}
.authDiscordButton .authProviderLogo {
    width:18px;
    height:18px;
}
.authDiscordButton:hover,
.authDiscordButton:focus-visible {
    outline:0;
    filter:brightness(1.08);
    border-color:#aab3ff !important;
}
.authDiscordButton:disabled {
    cursor:wait;
    opacity:.62;
}
.authOAuthValidated {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(96,220,154,.38);
    border-radius: 8px;
    background: rgba(20,83,61,.34);
    color: #dfffee;
    font: 800 10px/1.2 "Poppins", sans-serif;
}
.authOAuthValidated .authProviderLogo {
    width: 15px;
    height: 15px;
}
.authHint--oauth {
    margin: 0 0 8px;
}

.profileAuthAvatarAction {
    display:grid;
    grid-template-columns:20px minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    width:100%;
    min-width:0;
    min-height:29px;
    padding:7px 10px;
    border:1px solid rgba(96,220,154,.58);
    border-radius:8px;
    background:rgba(20,83,61,.45);
    color:#dfffee;
    font:800 8px/1.2 "Poppins",sans-serif;
    text-align:left;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.profileAuthAvatarAction .authProviderLogo { width:14px; height:14px; justify-self:center; }
.profileAuthAvatarAction span { min-width:0; }
.profileAuthAvatarAction:not(:disabled):hover,
.profileAuthAvatarAction:not(:disabled):focus-visible { outline:0; border-color:#8993ff; filter:brightness(1.13); }
.profileAuthAvatarAction.is-active { color:#9cf0bf; }
.profileAuthAvatarAction:disabled { cursor:default; opacity:.7; }
@media (max-width:520px) {
    .profileAuthAvatarAction { grid-template-columns:17px minmax(0,1fr) auto; gap:5px; min-height:28px; padding:6px 8px; font-size:7.5px; }
}
@media (max-width:370px) {
    .profileAuthAvatarAction { grid-template-columns:15px minmax(0,1fr) auto; padding:5px 6px; }
}



/* Difficulty chapter transition ------------------------------------------------ */
.difficultyTransition {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
}
.difficultyTransition[hidden] { display: none !important; }
.difficultyTransitionBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 19, .78);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .34s ease;
}
.difficultyTransitionContent {
    position: relative;
    z-index: 1;
    width: min(92vw, 540px);
    display: grid;
    justify-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .38s ease, transform .52s cubic-bezier(.18,.82,.2,1);
}
.difficultyTransition.is-visible .difficultyTransitionBackdrop { opacity: 1; }
.difficultyTransition.is-visible .difficultyTransitionContent { opacity: 1; transform: translateY(0) scale(1); }
.difficultyTransition.is-revealing .difficultyTransitionBackdrop { opacity: 0; }
.difficultyTransition.is-revealing .difficultyTransitionTitle { opacity: 0; transform: translateY(-10px) scale(.97); }
.difficultyTransition.is-normal-finishing .difficultyTransitionEmblem { opacity: 0; transform: scale(.96); }
.difficultyTransitionTitle {
    color: #f3f8ff;
    font: 950 clamp(1.65rem, 6vw, 3.25rem)/1 "Poppins", sans-serif;
    letter-spacing: .09em;
    text-align: center;
    text-shadow: 0 4px 24px rgba(0,0,0,.65);
    transition: opacity .3s ease, transform .35s ease;
}
.difficultyTransitionEmblem {
    width: min(78vw, 410px);
    display: grid;
    grid-template-columns: minmax(42px,1fr) 96px minmax(42px,1fr);
    align-items: center;
    gap: 16px;
    transform-origin: center;
    will-change: transform, opacity;
    transition: opacity .22s ease, transform .22s ease;
}
.difficultyTransitionEmblem > span,
.difficultyModeBadgeLine {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223,239,255,.74));
    box-shadow: 0 0 8px rgba(177,215,255,.16);
}
.difficultyTransitionEmblem > span:last-child,
.difficultyModeBadgeLine:last-child { transform: scaleX(-1); }
.difficultyTransitionEmblem img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.difficultyTransition[data-difficulty="hard"] .difficultyTransitionTitle { color: #d9bcff; }
.difficultyTransition[data-difficulty="nightmare"] .difficultyTransitionTitle { color: #ffbac8; }
.difficultyTransition[data-difficulty="heaven"] .difficultyTransitionTitle { color: #dce6f3; }

.difficultyModeBadge {
    width: min(280px, 62vw);
    margin: 13px auto 5px;
    display: grid;
    grid-template-columns: minmax(24px, 1fr) 34px auto minmax(34px, 1fr);
    align-items: center;
    gap: 0px;
    opacity: .86;
    transition: opacity .18s ease;
}
.difficultyModeBadge[hidden] { display: none !important; }
.difficultyModeBadge img { width: 34px; height: 34px; object-fit: contain; }
.difficultyModeBadge .difficultyModeBadgeLine:first-child { grid-column: 1; }
.difficultyModeBadge img { grid-column: 2; }
.difficultyModeBadge .difficultyModeBadgeLine:last-child { grid-column: 4; }
.difficultyModeBadge.is-transition-target { opacity: 0; visibility: hidden; }
.difficultyModeBadge.is-visible {
    opacity: .94;
    filter: drop-shadow(1px 1px 0px black);
}
body[data-difficulty="heaven"] .difficultyModeBadgeLine {
    background: linear-gradient(90deg, transparent, rgba(190,205,225,.88));
    box-shadow: 0 0 8px rgba(141,159,186,.28);
}
body.difficulty-transition-active .playerPanelBackdrop { pointer-events: none; }

@media (max-width: 560px) {
    .difficultyTransitionContent { gap: 16px; }
    .difficultyTransitionEmblem { grid-template-columns: minmax(32px,1fr) 78px minmax(32px,1fr); gap: 12px; }
    .difficultyTransitionEmblem img { width: 78px; height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
    .difficultyTransitionBackdrop,
    .difficultyTransitionContent,
    .difficultyTransitionTitle { transition-duration: .01ms !important; }
}

/* HEAVEN — progression visuelle supérieure : rang infini + étoiles blanches. */
.creatureMedallion--heavenStars .creatureMedallionInfiniteSmall::after {
    color:#f7fbff;
    text-shadow:0 0 5px rgba(126,157,196,.95),0 1px 2px rgba(0,0,0,.9);
}
.creatureMedallion--heavenStars .creatureMedallionStar {
    filter:drop-shadow(0 0 2px rgba(228,240,255,.68)) drop-shadow(0 1px 2px rgba(0,0,0,.55));
}