/* =========================================================
   Mobile UI pass — 2026-08-26
   Overrides strictement mobiles, chargés après les feuilles historiques.
   Objectifs : lisibilité, densité, zones tactiles et absence de chevauchement.
   ========================================================= */

@media (max-width: 520px) {
    /* ---------- HUD supérieur / navigation ---------- */
   /* #levelUIContainer {
        width: calc(100% - 20px);
    }*/
    .level-selector-container {
        gap: 4px;
        padding: 5px 6px;
    }
    .level-selector {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        line-height: 35px;
        font-size: 16px;
    }
    .level-selector-jump-max {
        flex-basis: 24px;
        width: 24px;
        height: 39px;
        font-size: 19px;
    }
    #levelInfo {
        min-width: 0;
        margin-top: 4px;
        padding: 4px 10px;
        font-size: 12px;
        line-height: 1.15;
    }
    .optimalCrystalZone {
        max-width: calc(100% - 46px);
        gap: 4px;
        padding: 4px 8px;
        font-size: 8.5px;
        line-height: 1;
        white-space: nowrap;
    }
    .optimalCrystalZone strong {
        min-width: 0;
        overflow: hidden;
        font-size: 9.5px;
        text-overflow: ellipsis;
    }

    /* ---------- Rencontre ---------- */
    .gameContainer:not(.monster-panel-open) .enemyMonsterContainer {
        padding-top: clamp(245px, 34vh, 300px);
        padding-bottom: 150px;
    }
    .gameContainer:not(.monster-panel-open) .enemyMonsterHud {
        width: fit-content;
        min-width: 218px;
        max-width: min(284px, calc(100vw - 112px));
        margin-top: 58px;
        padding: 8px 8px 7px;
        border-radius: 16px;
    }
    .gameContainer:not(.monster-panel-open) .enemyMonsterImg--medallion {
        width: 94px;
        height: 98px;
        margin-bottom: 3px;
    }
    .gameContainer:not(.monster-panel-open) .creatureMedallion--enemy {
        width: 94px;
        height: 98px;
        --medallion-scale: 1.34;
        --medallion-core-top: 9px;
    }
    .gameContainer:not(.monster-panel-open) .enemyMonsterInfo {
        width: max-content;
        min-width: 202px;
        max-width: min(268px, calc(100vw - 128px));
        padding: 5px 7px 6px;
        border-radius: 11px;
    }
    .gameContainer:not(.monster-panel-open) #enemyMonsterName {
        max-width: 100%;
        margin-bottom: 3px;
        overflow: hidden;
        font-size: 12.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .gameContainer:not(.monster-panel-open) #enemyMonsterHpBar.progress {
        height: 10px;
    }
    .gameContainer:not(.monster-panel-open) #enemyMonsterHpValue {
        margin-top: 3px;
        font-size: 12px;
    }
    .gameContainer:not(.monster-panel-open) .encounterBadge {
        min-height: 20px;
        margin-bottom: 4px;
        padding: 3px 7px;
        gap: 4px;
        font-size: 8.5px;
    }
    .gameContainer:not(.monster-panel-open) #timer {
        font-size: 11px;
        line-height: 1.1;
    }

    /* ---------- Barre basse ---------- */
    #uiLvlContainer {
        bottom: max(6px, env(safe-area-inset-bottom));
        padding: 0 8px;
    }
    .playerDpsInfos {
        height: 50px;
        border-radius: 14px;
    }
    .statItem {
        grid-template-rows: 24px 15px;
        column-gap: 4px;
        row-gap: 1px;
        padding: 4px 4px 3px;
    }
    .statItem + .statItem::before {
        top: 8px;
        bottom: 8px;
    }
    .statValue {
        font-size: 17px;
        line-height: 1;
    }
    .statLabel {
        font-size: 9px;
        line-height: 1;
    }
    .statIconSvg { width: 17px; height: 17px; }
    .statIconSwords { width: 18px; height: 18px; }
    .statIconClick { font-size: 15px; }
    .statIconImageSc { width: 14px; height: 18px; }

    /* ---------- Quick team ---------- */
    #uiBtnContainer {
        bottom: calc(max(6px, env(safe-area-inset-bottom)) + 56px) !important;
        padding: 0 8px !important;
    }
    .teamQuickBar {
        grid-template-columns: minmax(0, 1fr) 28px;
        height: 82px;
        padding: 0 4px 0 5px;
        border-radius: 15px;
    }
    .teamQuickSlots {
        gap: 2px;
    }
    .teamQuickSlot {
        height: 79px;
    }
    .creatureMedallion--quick {
        width: 56px;
        height: 78px;
        --medallion-scale: .96;
        --medallion-core-top: 7px;
    }
    .creatureMedallion--quick .creatureMedallionPower {
        top: 61px;
        width: 53px;
        height: 16px;
        padding-inline: 2px;
        font-size: 9px;
        line-height: 14px;
    }
    .creatureMedallion--quick .creatureMedallionPowerIcon {
        width: 10px;
        height: 10px;
    }
    .teamQuickOpenIcon {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    /* ---------- Drawer équipe ---------- */
    #monsterContainer {
        --team-drawer-sticky-top: 40px;
        --team-drawer-sticky-gutter: 5px;
        --team-drawer-sticky-overhang: 12px;
        max-height: min(50dvh, 400px);
        padding: 0 5px 5px !important;
        border-radius: 14px;
    }
    .monsterDrawerHeader {
        min-height: 40px;
        margin: 0 -5px 4px;
        padding: 4px 6px 4px 9px;
    }
    .monsterDrawerEyebrow {
        margin-bottom: 1px;
        font-size: 8px;
        letter-spacing: 1px;
    }
    .monsterDrawerTitle { font-size: 14px; }
    .monsterDrawerHeaderActions { gap: 4px; }
    .teamAutoLevelToggle {
        min-height: 28px;
        padding: 0 6px;
        border-radius: 8px;
        font-size: 7px;
        gap: 3px;
    }
    .teamAutoLevelToggle small { min-width: 20px; height: 14px; font-size: 6px; }
    .teamAutoEquipButton {
        min-height: 28px;
        padding: 0 7px;
        border-radius: 8px;
        font-size: 8px;
    }
    .monsterDrawerClose {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 12px;
    }
    .teamDrawerSlots {
        gap: 1px;
        margin-bottom: 3px;
    }
    .teamDrawerSlot {
        height: 76px;
    }
    .creatureMedallion--team {
       width: 62px;
        height: 88px;
        --medallion-scale: 1.08;
        --medallion-core-top: 10px;
    }
    .creatureMedallion--team .creatureMedallionPower {
        top: 68px;
        width: 50px;
        height: 14px;
        padding-inline: 2px;
        font-size: 8px;
        line-height: 12px;
    }
    .teamDrawerRemoveButton { top: 40px; left: 1px; }
    .creatureTeamAddButton { top: 32px; left: 0; }
    .creatureSliderLegacy .creatureTeamAddButton { top: 6px; left: 1px; }
    .creatureMedallion--team .creatureMedallionPowerIcon {
        width: 9px;
        height: 9px;
    }
    .teamDrawerSlotNumber {
        top: 1px;
        left: 1px;
        font-size: 6px;
    }
    .drawerCollectionHeader {
        align-items: center;
        margin: 2px 1px 3px;
    }
    .drawerCollectionHeader strong { font-size: 11px; }
    #team-selection-hint { display: none; }
    #collection-slider-count { font-size: 8px; }
    .collectionSliderLegacy {
        min-height: 78px;
        margin-top: 2px;
        padding: 5px 4px 4px;
        gap: 2px;
    }
    .creatureSliderLegacy {
        flex-basis: 56px;
        width: 56px;
        min-width: 56px;
        height: 75px;
    }
    .creatureMedallion--collection {
        width: 54px;
        height: 74px;
        --medallion-scale: .86;
        --medallion-core-top: 8px;
    }
    .creatureMedallion--collection .creatureMedallionPower {
        top: 57px;
        width: 49px;
        height: 14px;
        font-size: 8px;
        line-height: 12px;
    }

    /* Quand le drawer est ouvert, conserver la même largeur intrinsèque
       que le HUD normal au lieu de revenir à une largeur fixe. */
    .gameContainer.monster-panel-open .enemyMonsterHud {
        width: fit-content !important;
        min-width: 218px !important;
        max-width: min(284px, calc(100vw - 112px)) !important;
        padding: 5px 7px 6px !important;
        border-radius: 13px !important;
    }
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        width: max-content !important;
        min-width: 202px !important;
        max-width: min(268px, calc(100vw - 128px)) !important;
        padding: 4px 6px 5px;
    }
    .gameContainer.monster-panel-open #enemyMonsterName {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- Filtres ---------- */
    .collectionFilterPanel { padding: 5px; }
    .collectionFilterTop { gap: 4px; }
    .collectionFilterSearch { min-height: 30px; font-size: 10px; }
    .collectionFilterReset { min-height: 30px; padding-inline: 7px; font-size: 8px; }
    .collectionFilterGroup {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 3px;
        margin-top: 4px;
    }
    /* Le groupe Élément n'a volontairement pas de libellé.
       Il doit donc conserver toute la largeur : sinon la règle générique
       ci-dessus place sa grille de 6 éléments dans la colonne de 40 px. */
    .collectionFilterGroupElement {
        grid-template-columns: minmax(0, 1fr);
    }
    .collectionFilterLabel { font-size: 7px; }

    /* ---------- Autel d'invocation ---------- */
    .summonPanelDialog {
        width: calc(100% - 6px);
        border-radius: 14px;
    }
    .summonPanelHeader {
        min-height: 40px;
        padding: 4px 6px 4px 10px;
    }
    .summonPanelHeader strong { font-size: 18px; }
    .summonPanelClose { width: 30px; height: 30px; font-size: 17px; }
    .summonStage {
        grid-template-rows: clamp(105px, 15dvh, 124px) auto;
        padding: 3px 6px 4px;
    }
    .summonSelectedStone {
        width: min(23vw, 98px);
        max-height: 108px;
    }
    .summonPanelFooter { padding: 3px 4px 4px; }
    .summonStoneSelector {
        gap: 3px;
        padding-bottom: 1px;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .summonStoneChoice {
        flex: 0 0 126px;
        min-width: 126px;
        min-height: 45px;
        grid-template-columns: 33px minmax(0,1fr);
        gap: 3px;
        padding: 2px 4px;
    }
    .summonStoneChoiceVisual {
        width: 33px;
        height: 38px;
    }
    .summonStoneChoiceVisual img {
        max-width: 30px;
        max-height: 36px;
    }
    .summonStoneChoiceText b { font-size: 8.5px; }
    .summonStoneChoiceText small { font-size: 7px; }


    /* ---------- Résultat invocation simple ---------- */
    .summonResultCard:not(.is-batch) {
        grid-template-rows:auto auto minmax(76px,1fr) auto;
        gap:1px;
        padding:5px 8px 5px;
    }
    .summonResultCard:not(.is-batch) .summonResultName {
        grid-row:1;
        font-size:16px;
    }
    .summonResultCard:not(.is-batch) .summonResultMessage {
        grid-row:2;
        align-self:start;
        margin:1px 0 0;
        font-size:8px;
        line-height:1.05;
    }
    .summonResultCard:not(.is-batch) .summonResultCreature {
        position:relative;
        top:auto;
        left:auto;
        grid-row:3;
        align-self:center;
        transform:none;
    }
    .summonResultCard:not(.is-batch) .creatureMedallion--summon {
        width:90px;
        height:102px;
        --medallion-scale:1.34;
        --medallion-core-top:13px;
    }
    .summonResultCard:not(.is-batch) .summonResultContinue {
        grid-row:4;
        min-height:29px;
        margin:0;
        padding:4px 16px;
        font-size:11px;
    }

    /* ---------- Boutique ---------- */
    .shopPanelDialog {
        width: calc(100% - 6px);
        border-radius: 14px;
    }
    .shopPanelHeader {
        min-height: 40px;
        padding: 4px 6px 4px 10px;
    }
    .shopPanelHeader strong { font-size: 18px; }
    .shopPanelHeaderActions { gap: 4px; }
    .shopPurchaseModeButton {
        min-width: 43px;
        height: 30px;
        padding: 2px 4px;
        border-radius: 8px;
    }
    .shopPurchaseModeButton strong { font-size: 10px; }
    .shopPurchaseModeButton span { font-size: 5px; }
    .shopPanelClose { width: 30px; height: 30px; font-size: 17px; }
    .shopPanelBody { padding: 4px; }
    .shopBalances { gap: 4px; margin-bottom: 4px; }
    .shopBalance {
        min-height: 28px;
        padding: 3px 5px;
        gap: 4px;
        font-size: 8px;
    }
    .shopBalance img { width: 18px; height: 18px; }
    .shopBalance strong { font-size: 12px; }
    .shopSection + .shopSection { margin-top: 5px; }
    .shopSectionHeader { margin-bottom: 3px; }
    .shopSectionHeader strong { font-size: 10px; }
    .shopSectionHeader small { font-size: 7px; }
    .shopOfferGrid { gap: 3px; }
    .shopOffer {
        min-height: 111px;
        padding: 6px 4px 4px;
        border-radius: 8px;
    }
    .shopOfferVisual { width: 46px; height: 42px; margin-top: 3px; }
    .shopOfferVisual img { max-width: 42px; max-height: 40px; }
    .shopOffer.is-summon-item .shopOfferBody { justify-content: center; padding: 1px 0 3px; }
    .shopOffer.is-summon-item .shopOfferVisual { width: 54px; height: 50px; margin-top: 0; }
    .shopOffer.is-summon-item .shopOfferVisual img { max-width: 50px; max-height: 48px; }
    .shopOffer.is-summon-item .shopOfferLabel { min-height: 0; margin-top: 3px; font-size: 9.5px; line-height: 1.04; }
    .shopOffer.is-summon-item .shopOfferMeta { min-height: 0; margin: 3px 0 0; font-size: 7px; }
    .shopPermanentBonusSigil { width: 40px; height: 40px; font-size: 28px; }
    .shopOfferAmount {
        top: 5px;
        right: 5px;
        min-width: 22px;
        padding: 2px 5px;
        font-size: 8px;
    }
    .shopOfferLabel {
        min-height: 24px;
        margin-top: 7px;
        font-size: 9px;
        line-height: 1.04;
    }
    .shopBuyButton {
        min-height: 30px;
        margin-top: auto;
        padding: 3px 5px;
        gap: 4px;
        font-size: 10px;
    }
    .shopBuyButton img { width: 14px; height: 14px; }
    .shopBuyButton strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10px;
        line-height: 1;
    }
}

@media (max-width: 390px) {
    /* Lisibilité prioritaire sur les très petits mobiles.
       On reste plus généreux que l’ancien compactage pour préserver la lecture
       des médaillons et du bandeau DPS/CLIC/CRISTAL-M. */
    .playerDpsInfos {
        height: 54px;
    }
    .statItem {
        grid-template-rows: 23px 14px;
        column-gap: 3px;
        padding: 4px 3px 3px;
    }
    .statValue {
        font-size: 16px;
    }
    .statLabel {
        font-size: 8.5px;
    }
    .teamQuickBar {
        grid-template-columns: minmax(0, 1fr) 27px;
        height: 78px;
        padding: 0 4px 0 4px;
    }
    .teamQuickSlots {
        gap: 1px;
    }
    .teamQuickSlot {
        height: 75px;
    }
    .creatureMedallion--quick {
        width: 52px;
        height: 74px;
        --medallion-scale: .89;
        --medallion-core-top: 6px;
    }
    .creatureMedallion--quick .creatureMedallionPower {
        top: 58px;
        width: 49px;
        height: 15px;
        font-size: 8.25px;
        line-height: 13px;
    }
    .creatureMedallion--quick .creatureMedallionPowerIcon {
        width: 9.5px;
        height: 9.5px;
    }
    .teamQuickOpenIcon {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }
}

@media (max-width: 380px) {
    .level-selector-container { gap: 3px; padding-inline: 4px; }
    .level-selector {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        line-height: 32px;
        font-size: 15px;
    }
    .level-selector-jump-max { width:22px; height:36px; flex-basis:22px; font-size:18px; }
    .creatureMedallion--quick {
        width: 46px;
        height: 67px;
        --medallion-scale: .78;
    }
    .creatureMedallion--quick .creatureMedallionPower {
        top: 52px;
        width: 44px;
        font-size: 7.5px;
    }
    .creatureMedallion--team {
        width: 47px;
        height: 72px;
        --medallion-scale: .80;
    }
    .creatureMedallion--team .creatureMedallionPower {
        top: 56px;
        width: 45px;
        font-size: 7.5px;
    }
    .summonStoneChoice {
        flex-basis: 114px;
        min-width: 114px;
    }
    .shopOfferGrid { gap: 2px; }
    .shopOfferLabel { font-size: 7.5px; }
}

/* Mobile UI pass — enemy HUD intrinsic width by monster name. */
@media (max-width: 380px) {
    .gameContainer:not(.monster-panel-open) .enemyMonsterHud,
    .gameContainer.monster-panel-open .enemyMonsterHud {
        min-width: 204px !important;
        max-width: min(266px, calc(100vw - 96px)) !important;
    }
    .gameContainer:not(.monster-panel-open) .enemyMonsterInfo,
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        min-width: 188px !important;
        max-width: min(250px, calc(100vw - 112px)) !important;
    }
}

/* Mobile UI pass — enemy HUD proportions: portrait first, chrome compact. */
@media (max-width: 760px) {
    /* Le portrait est l'information principale du HUD. */
    .gameContainer:not(.monster-panel-open) .enemyMonsterImg--medallion {
        width: 112px !important;
        height: 116px !important;
        margin-bottom: 1px !important;
    }
    .gameContainer:not(.monster-panel-open) .creatureMedallion--enemy {
        width: 112px !important;
        height: 116px !important;
        --medallion-scale: 1.60;
        --medallion-core-top: 10px;
    }

    /* Drawer équipe ouvert : ne plus écraser le portrait à 62 px. */
    .gameContainer.monster-panel-open .enemyMonsterImg--medallion {
        width: 94px !important;
        height: 98px !important;
        margin-bottom: 0 !important;
    }
    .gameContainer.monster-panel-open .creatureMedallion--enemy {
        width: 94px !important;
        height: 98px !important;
        --medallion-scale: 1.34;
        --medallion-core-top: 9px;
    }

    /* Timer boss : bandeau plus fin, moins dominant. */
    .gameContainer:not(.monster-panel-open) #timer,
    .gameContainer.monster-panel-open #timer {
        min-height: 0 !important;
        margin: -3px auto 2px !important;
        padding: 2px 7px !important;
        border-width: 1px !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10) !important;
    }

    /* Bloc nom / HP : plus fin et moins large. */
    .gameContainer:not(.monster-panel-open) .enemyMonsterHud,
    .gameContainer.monster-panel-open .enemyMonsterHud {
        min-width: 194px !important;
        max-width: min(252px, calc(100vw - 124px)) !important;
        padding: 5px 6px 5px !important;
    }
    .gameContainer:not(.monster-panel-open) .enemyMonsterInfo,
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        width: max-content !important;
        min-width: 180px !important;
        max-width: min(238px, calc(100vw - 138px)) !important;
        padding: 3px 5px 4px !important;
        border-radius: 9px !important;
    }
    .gameContainer:not(.monster-panel-open) #enemyMonsterName,
    .gameContainer.monster-panel-open #enemyMonsterName {
        margin-bottom: 2px !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
    }
    .gameContainer:not(.monster-panel-open) #enemyMonsterHpBar.progress,
   /* .gameContainer.monster-panel-open #enemyMonsterHpBar.progress {
        height: 7px !important;
        border-width: 1px !important;
    }*/
    .gameContainer:not(.monster-panel-open) #enemyMonsterHpValue,
    .gameContainer.monster-panel-open #enemyMonsterHpValue {
        margin-top: 2px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
    }

    /* Bonus/tier éventuels : même philosophie compacte. */
    .gameContainer:not(.monster-panel-open) .encounterBadge,
    .gameContainer.monster-panel-open .encounterBadgeBonus {
        min-height: 16px !important;
        margin-bottom: 2px !important;
        padding: 2px 6px !important;
        gap: 3px !important;
        font-size: 7px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 380px) {
    .gameContainer:not(.monster-panel-open) .enemyMonsterHud,
    .gameContainer.monster-panel-open .enemyMonsterHud {
        min-width: 186px !important;
        max-width: min(238px, calc(100vw - 116px)) !important;
    }
    .gameContainer:not(.monster-panel-open) .enemyMonsterInfo,
    .gameContainer.monster-panel-open .enemyMonsterInfo {
        min-width: 172px !important;
        max-width: min(224px, calc(100vw - 130px)) !important;
    }
}

/* Supreme stone visual tuning */
@media (max-width: 520px) {
    .summonStage[data-tier="supreme"] .summonSelectedStone {
        width: min(29vw, 118px);
        max-height: 128px;
        margin-top: 10px;
    }
    .summonStage[data-tier="supreme"] .summonStoneGlow {
        top: 58%;
        width: min(46vw, 182px);
    }
    .summonStoneChoice--supreme .summonStoneChoiceVisual img {
        max-width: 34px;
        max-height: 40px;
        transform: translateY(2px);
    }
}

/* V1.52 — Combat fermé : centrage vertical réel, indépendant de la largeur.
   Les anciens offsets cumulés (padding-top + margin-top) produisaient des sauts
   à 521px puis selon les largeurs tablette/desktop. Le HUD est désormais centré
   par le conteneur flex dans le viewport. Le mode drawer conserve ses règles. */
.gameContainer:not(.monster-panel-open) .enemyMonsterContainer {
    height: 100dvh !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.gameContainer:not(.monster-panel-open) .enemyMonsterHud {
    margin-top: 0 !important;
}


/* Daily limit shop upgrades: keep the artwork readable on narrow screens. */
@media (max-width: 520px) {
    .shopOffer.is-daily-limit-upgrade { min-height:128px; padding-top:5px; }
    .shopOffer.is-daily-limit-upgrade .shopOfferVisual { width:78px; height:68px; margin-top:0; }
    .shopOffer.is-daily-limit-upgrade .shopOfferVisual img { max-width:76px; max-height:66px; }
    .shopOffer.is-daily-limit-upgrade .shopOfferLabel { min-height:0; margin-top:1px; font-size:9px; line-height:1.02; }
    .shopOffer.is-daily-limit-upgrade .shopOfferAmount { top:5px; right:5px; }
    .shopOffer.is-daily-limit-upgrade .shopOfferInfoButton { top:5px; left:5px; width:20px; height:20px; font-size:10px; }
    .shopSummonRatesInfoButton { top:5px; left:5px; width:20px; height:20px; font-size:10px; }
    .shopSummonRatesPopover { top:4px; left:30px; width:142px; padding:5px; }
    .shopOffer:nth-child(3n) .shopSummonRatesPopover { left:auto; right:30px; }
    .shopSummonRatesPopoverTitle { font-size:8.5px; margin-bottom:4px; }
    .shopSummonRateRow { min-height:22px; padding:4px 6px; font-size:10px; }
}