/* ==========================================================================
   MOUTLAR PACK STUDIO - RESPONSIVE MOBILE FOUNDATIONS
   ========================================================================== */

/* 1. Global Viewport & Safe Areas */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

body {
  /* Prevent horizontal scroll on mobile */
  overflow-x: hidden !important;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-x: none; /* Prevent iOS/Android edge swipe navigation from conflicting with drawer */
}


/* Mobile-only home controls are present in the markup so their existing game
   handlers can be reused, but they must not affect the desktop composition. */
.mps-home-mobile-open-actions,
.mps-home-mobile-quick-links {
  display: none;
}

#mps-root {
  /* Ensure root takes full height with safe areas */
  height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
}

/* Hide overlay by default on desktop */
#mps-sidebar-overlay {
  display: none;
}

/* ==========================================================================
   MOBILE LAYOUT (< 1024px)
   Tablet and below: Transform sidebar into an off-canvas drawer
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- Sidebar / Drawer --- */
  .mps-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    z-index: 100 !important;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    contain: paint;
    box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    padding-top: var(--safe-top) !important;
    padding-bottom: var(--safe-bottom) !important;
    touch-action: pan-y; /* Allow vertical scroll inside sidebar, stop horizontal panning */
  }
  
  html.mobile-sidebar-open .mps-sidebar {
    transform: translate3d(0, 0, 0);
  }

  /* Overlay behind the sidebar */
  .mps-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: opacity;
    touch-action: none; /* Prevent native scroll on overlay */
  }
  
  html.mobile-sidebar-open .mps-sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Catcher to prevent native browser scrolling on the edge */
  .mps-edge-catcher {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 30px;
    z-index: 9999;
    touch-action: none;
    pointer-events: auto;
  }
  
  /* Disable catcher when sidebar is open */
  html.mobile-sidebar-open .mps-edge-catcher {
    display: none;
  }

  /* --- Header --- */
  #mps-header {
    padding-top: calc(20px + var(--safe-top)) !important;
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }

  .mps-hamburger {
    display: block !important;
  }

  /* --- Main Content Area --- */
  #mps-main {
    padding-bottom: var(--safe-bottom) !important;
    padding-left: var(--safe-left) !important;
    padding-right: var(--safe-right) !important;
  }
}

/* ==========================================================================
   MOBILE SPECIFIC (< 768px)
   Smartphones: Compacting the header and global layout
   ========================================================================== */
@media (max-width: 768px) and (orientation: landscape) {
  /* Compact Header using Grid */
  #mps-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: calc(10px + var(--safe-top)) 10px 10px 10px !important;
    height: auto !important;
  }
  
  #mps-header > div:first-child,
  #mps-header > .mps-currencies {
    display: contents !important;
  }
  
  .mps-hamburger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
  }
  
  #mps-header > .mps-currencies > div:nth-child(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  #mps-header > .mps-currencies > div:nth-child(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .mps-header-mobile-actions {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: flex !important;
    gap: 6px !important;
  }
  
  .mps-header-mobile-actions button {
    padding: 6px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  
  /* Compact music controls on second line */
  .mps-music-controls {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  .mps-music-controls button {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
  }
  
  /* Hide unwanted elements on mobile */
  .mps-music-bars,
  .mps-music-title,
  .mps-plus-btn,
  .mps-header-desktop-actions,
  #mps-header > .mps-currencies > .mps-header-desktop-actions,
  .mps-music-controls button[aria-label="Recommencer la piste"] {
    display: none !important;
  }
  
  /* Currency pills — wider to fit large amounts (999 999) */
  #mps-header > .mps-currencies > div:not(.mps-header-desktop-actions) {
    padding: 7px 14px !important;
    gap: 9px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #mps-header > .mps-currencies > div:not(.mps-header-desktop-actions) span:nth-child(2) {
    /* Currency values — fits 6-digit numbers */
    font-size: 15px !important;
    min-width: 56px !important;
    text-align: right !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mps-plus-btn {
    display: none !important;
  }

  /* Home hero booster — the inline height formula uses 52vw as the effective
     driver on narrow phones (vh/px caps rarely bind there), making the pack
     look small; bump the vw coefficient so it reads bigger. Same formula for
     every extension (uniform sizing), aspect-ratio/background-size:contain
     preserved from the inline style, so no distortion. */
  .mps-hero-pack-art {
    height: min(80vh, 76vw, 820px) !important;
  }
}

/* Hide currency "+" buttons on any touchscreen up to tablet/landscape-phone width
   (the <=768px rule above misses landscape phones between 769-1024px) */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1024px) {
  .mps-plus-btn {
    display: none !important;
  }
}

/* ==========================================================================
   TOUCH & PERFORMANCE
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Make all interactive elements easier to tap */
  button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation; /* Faster tap responsiveness */
  }
  
  /* Tap feedback on touch devices */
  button:active, 
  [sc-camel-on-click]:active, 
  [onclick]:active {
    opacity: 0.7;
    transform: scale(0.98);
  }

  #mps-header button {
    min-height: 38px;
    min-width: 38px;
  }
  
  /* Disable hover-based tilt elements */
  .js-tilt-glare { 
    display: none !important; 
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PHASE 3A: ACCUEIL, BOUTIQUE, INVENTAIRE (Mobile & Tablet)
   ========================================================================== */

/* --- ACCUEIL --- */
@media (max-width: 1024px) {
  #mps-home {
    padding: 10px max(16px, var(--safe-left)) 26px !important;
    padding-right: max(16px, var(--safe-right)) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Pack Container (Order 1 visually on mobile) */
  #mps-home > div:nth-child(3) {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 20px !important;
  }
  
  /* Rare Showcase & Open Buttons (Order 2 visually) */
  #mps-home > div:nth-child(4) {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 20px !important;
  }
  
  /* Chat Panel as Right Drawer on Mobile */
  #mps-chat-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(85vw, 360px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: max(20px, var(--safe-top)) 16px max(20px, var(--safe-bottom)) 16px !important;
    z-index: 9999 !important;
    border-radius: 20px 0 0 20px !important;
    border-right: none !important;
    background: #09090ee6 !important;
    backdrop-filter: blur(12px) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform !important;
    contain: paint !important;
  }
  
  #mps-chat-drawer .mps-chat-toggle {
    display: none !important;
  }
  
  #mps-chat-drawer .ap-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  
  :root.mobile-chat-open #mps-chat-drawer {
    transform: translate3d(0, 0, 0) !important;
  }
  
  :root.mobile-chat-dragging #mps-chat-drawer {
    transition: none !important;
  }
}

@media (max-width: 480px) {
  /* Stack the "Boutique" and "Inventaire" buttons under the main CTA */
  #mps-home > div:nth-child(4) > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* --- Inventaire --- */
  #mps-inv {
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  #mps-inv > div[style*="grid-template-columns"] {
    /* 160px was too narrow: each card holds a thumbnail + name + "OUVRIR ×N"
       buttons, which squished/wrapped the button text into an unreadable
       44px box. 260px reliably gives 1 full-width column on phones instead
       of 2 cramped ones, so the buttons render at their natural size. */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
  }
  
  /* --- Collection --- */
  #mps-collection {
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  
  #mps-collection-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  
  #mps-collection-header > div:first-child h2 {
    font-size: 36px !important;
  }
  
  #mps-collection-search-bar {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  #mps-collection-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  
  /* Scroll horizontal pour les filtres série/rareté pour éviter d'encombrer l'écran verticalement */
  #mps-collection-filters-set,
  #mps-collection-filters-rarity {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  
  #mps-collection-filters-set::-webkit-scrollbar,
  #mps-collection-filters-rarity::-webkit-scrollbar {
    display: none;
  }
  
  #mps-collection-filters-set button,
  #mps-collection-filters-rarity button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
  
  /* Grille 2 colonnes minimum sur mobile */
  #mps-collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 12px !important;
  }
  
  #mps-collection-pagination button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Pagination rows (Collection/Missions/Badges/Aventure/Faille compo) — the
     windowed button list (buildPageButtons) is short enough to usually fit,
     but flex-wrap:wrap inline still let an odd button drop to a 2nd row on
     narrow phones. Force one line with internal horizontal scroll instead,
     matching the tabs bars above. */
  .mps-pagination-row,
  .riftCompoPageRow {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
  }
  .mps-pagination-row::-webkit-scrollbar,
  .riftCompoPageRow::-webkit-scrollbar { display: none; }
  .mps-pagination-row > *,
  .riftCompoPageRow > button {
    flex: 0 0 auto !important;
  }

  /* --- Inspection de carte --- */
  #mps-detail-modal {
    flex-direction: column !important;
    padding: 24px 16px !important;
    gap: 20px !important;
    width: min(92vw, 360px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  
  #mps-detail-info {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Désactivation de l'effet 3D tilt sur le showcase mobile */
  #mps-showcase-modal {
    width: 90vw !important;
    height: 80vh !important;
    perspective: none !important;
  }
  
  #mps-showcase-modal > div {
    transform: scale(0.9) !important; /* Contrecarre les styles inline du tilt */
  }
  
  /* --- MISSIONS --- */
  #mps-stub-section {
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  
  #mps-missions-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  #mps-missions-tabs::-webkit-scrollbar { display: none; }

  #mps-missions-tabs button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  /* --- SHOP / INVENTORY CATEGORY TABS ---
     Same "single scrollable row" treatment as Missions above. Inventory's tabs
     used flex-wrap:wrap inline (multiple rows eating vertical space); Shop's
     tabs only had overflow-x:auto with no scroll affordances. Both use the
     shared .ap-section-tabs class, so one rule fixes both screens. */
  .ap-section-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  .ap-section-tabs::-webkit-scrollbar { display: none; }
  .ap-section-tabs > button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  .mps-mission-card {
    padding: 16px !important;
  }
  
  .mps-mission-card-top {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .mps-mission-card-bottom {
    flex-wrap: wrap !important;
  }
  
  /* --- BADGES --- */
  #mps-badges-filters {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  #mps-badges-tier-filters,
  #mps-badges-sort-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  
  #mps-badges-tier-filters::-webkit-scrollbar,
  #mps-badges-sort-filters::-webkit-scrollbar { display: none; }
  
  #mps-badges-tier-filters button,
  #mps-badges-sort-filters button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
  
  #mps-badges-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
  
  #mps-badge-detail-modal {
    padding: 32px 20px !important;
    width: min(92vw, 360px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  
  /* --- CLASSEMENT --- */
  #mps-ranking-section {
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  
  .mps-ranking-row {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  
  /* Allow name truncation on small screens */
  .mps-ranking-row > div:nth-child(3) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  .mps-ranking-row > div:nth-child(3) > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==========================================================================
   PHASE 5: COMPOSITION D'ÉQUIPE ET COMBAT (Mobile)
   ========================================================================== */

@media (max-width: 1024px) {
  /* --- BADGES & CLASSEMENT --- */
  
  #mps-badges-tier-filters,
  #mps-badges-sort-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  
  #mps-badges-tier-filters::-webkit-scrollbar,
  #mps-badges-sort-filters::-webkit-scrollbar { display: none; }
  
  #mps-badges-tier-filters button,
  #mps-badges-sort-filters button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
  
  #mps-badges-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
  
  #mps-badge-detail-modal {
    padding: 32px 20px !important;
    width: min(92vw, 360px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  
  /* --- CLASSEMENT --- */
  #mps-ranking-section {
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  
  .mps-ranking-row {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  
  /* Allow name truncation on small screens */
  .mps-ranking-row > div:nth-child(3) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  .mps-ranking-row > div:nth-child(3) > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --- BOUTIQUE --- */
@media (max-width: 1024px) {
  #mps-shop {
    padding: 15px max(16px, var(--safe-left)) 40px !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  
  /* Adjust title banner */
  #mps-shop > div:first-child h2 {
    font-size: 32px !important;
  }
}

/* --- INVENTAIRE --- */
@media (max-width: 1024px) {
  #mps-inv {
    padding: 15px max(16px, var(--safe-left)) 40px !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  
  #mps-inv h2 {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   PHASE 5: COMPOSITION D'ÉQUIPE ET COMBAT (Mobile)
   ========================================================================== */

@media (max-width: 1024px) {
  /* --- TEAM COMPOSITION --- */
  /* Character names under team slots are redundant with the portrait itself
     and eat vertical space; the remove "x" only needs to stay tappable, not
     as large as the default 25px. */
  .adv-slot-name {
    display: none !important;
  }
  .adv-slot-remove {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .adv-team-backdrop {
    align-items: flex-start !important;
    padding-top: calc(110px + var(--safe-top)) !important;
    padding-bottom: max(16px, var(--safe-bottom)) !important;
  }
  
  #adventure-team-panel {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - 110px - var(--safe-top) - max(16px, var(--safe-bottom))) !important;
    padding: 16px 12px !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
  }
  
  /* Split view UX logic */
  #adventure-team-panel .adv-team-filters,
  #adventure-team-panel .adv-team-roster,
  #adventure-team-panel .adv-team-roster-title,
  #adventure-team-panel .adv-team-pagination {
    display: none !important;
  }
  
  #adventure-team-panel.picking-mode .adv-team-top-row,
  #adventure-team-panel.picking-mode .adv-team-slots,
  #adventure-team-panel.picking-mode .adv-team-bonuses,
  #adventure-team-panel.picking-mode .cbHeadCenter {
    display: none !important;
  }
  
  #adventure-team-panel.picking-mode .adv-team-filters,
  #adventure-team-panel.picking-mode .adv-team-roster {
    display: grid !important;
  }
  
  #adventure-team-panel.picking-mode .adv-team-roster-title,
  #adventure-team-panel.picking-mode .adv-team-pagination {
    display: flex !important;
  }
  
  .adv-mobile-top-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    top: calc(10px + var(--safe-top)) !important;
  }
  .adv-mobile-top-nav > div[style*="border-radius:999px"] {
    font-size: 9.5px !important;
    padding: 6px 10px !important;
  }
  
  .adv-team-slots {
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: visible !important;
  }
  
  .adv-team-bonuses {
    grid-template-columns: 1fr !important;
  }
  
  .adv-team-filters {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .adv-team-roster {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }

  /* --- LA FAILLE (RIFT) --- */
  /* Perf (2026-08-11, "La Faille chauffe le téléphone") : .riftTorch (3 halos de fond,
     toujours visibles tant que la map est affichée) combine un grand rayon de blur avec
     mix-blend-mode:screen — un des combos CSS les plus coûteux à recomposer en continu sur
     un GPU mobile, même quand rien ne bouge à l'écran (l'animation infinite tourne tant
     que l'écran Faille reste monté). Rayon réduit sur mobile ; le halo (déjà un
     radial-gradient doux) reste visible, juste moins cher à recomposer à chaque frame. */
  .riftTorch {
    filter: blur(7px) !important;
    /* Le rayon réduit ci-dessus n'empêche pas l'animation infinite (opacity+scale) de
       forcer une recomposition du calque mix-blend-mode:screen à chaque frame — figé sur
       mobile : le halo (radial-gradient doux) reste visible à l'identique, juste immobile. */
    animation: none !important;
  }

  /* --- ACCUEIL : showcase de raretés + halo ambiant ---
     Perf (2026-08-12, "le jeu chauffe de malade sur téléphone") : l'accueil est l'écran
     par défaut/le plus visité (chat, navigation) et cumulait AU REPOS, en continu tant que
     l'écran restait affiché : ~44 particules infinite (26 homeParticles + 18
     rareShowcaseParticles, réduites plus bas en JS sur mobile), 3 cartes du showcase
     ayant CHACUNE deux calques mix-blend-mode:screen infinite empilés (l'anneau tournant
     .homeRareCard::after + le glow premiumStyle), et un halo plein écran blur+mix-blend-
     mode animé (homeLightStyle, réduit en JS). Cumulé, c'est largement le plus gros
     foyer de chauffe identifié (l'écran le plus visité, pas un écran ponctuel comme la
     Faille/l'ouverture de pack déjà traitées). Les 2 cartes latérales du showcase (pas la
     carte centrale — celle réellement "active/sélectionnée" à l'instant donné) perdent
     leur animation sur mobile ; leur glow reste visible, juste immobile. */
  .homeRareCard:not(:nth-of-type(3))::after {
    animation: none !important;
  }

  .riftCompoWrap {
    padding: 16px 16px 40px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center the column contents */
    justify-content: flex-start !important; /* TOP ALIGNED */
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  .riftSanctuaryWrap {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  .riftToutRow {
    display: none !important;
  }
  
  .riftToutRow .riftHudBtn {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    background: #050308bb !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
  }
  
  .riftCompoFilterBar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 400px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    margin-bottom: 12px !important;
  }
  
  .riftCompoSearchInput {
    grid-column: 1 / -1 !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .riftCompoSelect {
    font-size: 13px !important;
    height: 38px !important;
    line-height: 1.2 !important;
    padding: 0 10px !important;
    /* PAS de `display:flex` ici : un <select> ne peut pas être un conteneur flex —
       ses <option> deviendraient des flex items et WebKit/iOS cesse alors de rendre
       le texte de la valeur sélectionnée, d'où les 4 filtres affichés comme des cases
       VIDES sur iPhone (bug réel signalé le 2026-08-11 ; Chrome desktop tolère, ce qui
       masquait le problème). Un <select> centre déjà sa valeur verticalement dans sa
       hauteur, `align-items` était donc inutile en plus d'être nuisible. */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Déclencheurs des 9 filtres Faille (.riftCompoSelect, hérite du style ci-dessus) +
     Aventure (.mobileFilterTrigger, style dédié car les <select> desktop d'Aventure n'ont
     pas de classe partagée) qui remplacent le <select> natif sur mobile — voir
     setMobileFilterOpen/mobileFilterSheetOpen dans index.html pour le pourquoi structurel
     (le <select> natif n'était pas fiable sur iOS/WebKit, indépendamment de son CSS). */
  .mobileFilterTrigger {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 28px 10px 12px !important;
    border: 1px solid #2a2a31 !important;
    border-radius: 8px !important;
    background: #101017 !important;
    color: #ddd !important;
    font: inherit !important;
    font-size: 11px !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    position: relative !important;
  }
  .riftCompoSelect.mobileFilterTrigger {
    padding-right: 28px !important;
  }
  .mobileFilterTrigger::after {
    content: '▾';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a7fa0;
    font-size: 10px;
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  .mobileFilterSheetBackdrop {
    /* z-index:450, pas 90 : la feuille est montée en dehors de .riftStage (z-index:220) —
       elle se retrouvait DERRIÈRE tout l'écran Faille (et tout autre écran plein écran à
       z-index élevé, ex. .riftDetailModalBackdrop:401) au lieu de par-dessus, invisible et
       inatteignable au tap malgré un `mobileFilterSheetOpen` correctement vrai. 450 la place
       au-dessus des écrans plein écran connus, sous les toasts/journal (9999-10000). */
    position: fixed;
    inset: 0;
    z-index: 450;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #030307b8;
    backdrop-filter: blur(4px);
    padding: 0;
  }
  .mobileFilterSheet {
    width: 100%;
    max-height: min(70dvh, 560px);
    display: flex;
    flex-direction: column;
    border: 1px solid #3a2c48;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(160deg, #171724, #09090f);
    box-shadow: 0 -12px 40px #000c;
    color: #f5f6fb;
    padding-bottom: max(8px, var(--safe-bottom));
  }
  .mobileFilterSheetHead {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid #ffffff16;
    background: #161621;
    border-radius: 16px 16px 0 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .mobileFilterSheetClose {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border: 1px solid #ffffff2d;
    border-radius: 8px;
    background: #08080de0;
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
  }
  .mobileFilterSheetList {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px calc(10px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .mobileFilterSheetOption {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #2a2231;
    border-radius: 9px;
    background: #0d0a12;
    color: #cfc7dc;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    min-height: 44px;
    cursor: pointer;
  }
  .mobileFilterSheetOption.active {
    border-color: #c86bff;
    background: #c86bff22;
    color: #e6c6ff;
  }

  .riftCompoGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 400px !important;
    box-sizing: border-box !important;
    justify-items: center !important;
  }
  
  .riftCompoPageRow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  
  .riftCompoPageRow > button {
    height: 38px !important;
    min-width: 38px !important;
    font-size: 12.5px !important;
  }
  
  /* Hide ANCRAGE banner on mobile — reclaim the space */
  .mps-desktop-only {
    display: none !important;
  }
  
  /* Mobile pagination buttons — the mobile template uses riftCompoPageBtn class 
     without inline styles, so they need explicit styling here */
  .riftCompoPageBtn {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    border: 1px solid #2a2231 !important;
    border-radius: 7px !important;
    background: #0d0a12 !important;
    color: #e6c6ff !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .riftCompoPageBtn.active,
  .riftCompoPageBtn:hover {
    border-color: #c86bff !important;
    background: #c86bff22 !important;
    color: #e6c6ff !important;
  }
  
  /* Page info text — visible on dark backgrounds */
  .riftCompoPageInfo {
    color: #c6b8e0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important; /* Match button height for stability */
    box-sizing: border-box !important;
  }
  
  .riftEnterRow {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 400px !important;
    z-index: 10 !important;
    padding: 0 0 16px 0 !important; /* Padding bottom for space */
    display: flex !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  .riftEnterRow .riftHudBtn {
    width: 100% !important;
    height: 48px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    border-radius: 16px !important;
    background: #050308bb !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .rift-mobile-picker-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    background: #0a0710 !important;
    overflow-y: auto !important;
    padding-top: calc(10px + var(--safe-top)) !important;
  }
  
  .riftPickerCloseBtn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
  }
  
  .riftHeaderBand {
    position: relative !important;
  }
  
  /* --- RIFT HUD (TOP BAR) --- */
  .riftHud {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: max(12px, var(--safe-top)) 16px 8px 16px !important;
  }
  .riftHudRight {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .riftHudRight .riftHudBtn {
    width: auto !important;
    padding: 0 12px !important;
    height: 42px !important;
  }
  .riftRetreatBtn {
    /* Was position:absolute pinned top-right, landing directly on top of
       RÉSONANCE (which stays in the normal .riftHudRight flex flow) — let it
       flow inline with the other HUD buttons instead, wrapping if needed. */
    background: #ff3c4d33 !important; /* Subtle danger background */
    border-radius: 8px !important;
  }
  
  /* --- MAP LAYOUT MOBILE --- */
  .riftMapLayout {
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .riftMapSide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 50vh !important;
    z-index: 10 !important;
    border-radius: 0 0 16px 0 !important;
    background: #0d0a14ee !important;
    backdrop-filter: blur(8px) !important;
    transition: transform 0.3s ease !important;
  }
  
  .riftMapSide.collapsed {
    transform: translateY(-100%) !important;
  }
  
  .riftMapSide:last-child { /* The Detail Panel Bottom Sheet */
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-height: 80vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(16px + var(--safe-bottom)) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8) !important;
    border-top: 1px solid #3a2c48 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: #0d0a14 !important;
    z-index: 100 !important;
  }
  
  .riftMapSide:last-child.no-detail {
    transform: translateY(100%) !important;
    pointer-events: none !important;
  }

  .riftMapSide:last-child.has-detail {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  
  /* DÉTAIL DU NŒUD (bottom-sheet mobile) : textes/icônes centrés + police agrandie, et
     LANCER/QUITTER passent sur la même police (Barlow Condensed) que le titre du panneau,
     au lieu d'hériter du corps de texte par défaut. Scopé à :last-child (le panneau détail)
     uniquement — le panneau gauche STRATE partage certaines classes mais n'est pas concerné. */
  .riftMapSide:last-child .riftMapDetailHead { justify-content: center !important; }
  .riftMapSide:last-child .riftMapDetailName { font-size: 17px !important; }
  .riftMapSide:last-child .riftMapDetailType { font-size: 11px !important; }
  .riftMapSide:last-child .riftMapDetailDesc { font-size: 14px !important; text-align: center !important; }
  .riftMapSide:last-child .riftMapSecLabel { font-size: 12px !important; text-align: center !important; }
  .riftMapSide:last-child .riftMapRewardsRow { justify-content: center !important; }
  .riftMapSide:last-child .riftMapDetailEmpty { font-size: 13px !important; }
  .riftMapSide:last-child .riftHudBtn { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 900 !important; font-size: 15px !important; letter-spacing: .04em !important; }

  .riftMapWrap {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .riftMapWrap::-webkit-scrollbar { display: none !important; }

  .riftMap {
    width: 100% !important;
    min-width: 0 !important;
    /* The height is managed by JS inline styles */
  }
  
  /* --- ECHOS & INVENTORY --- */
  
  /* For the replacement screen specifically, it uses a 1-column layout inline, but we want to ensure row styles fit */
  .riftInventoryPanel {
    padding: 16px 14px 24px !important; /* tighter padding on mobile */
    max-height: 90vh !important;
  }
  /* --- FAILLE PANELS MOBILE UX (BOUTIQUE, RELIQUES, SANCTUAIRE, ANOMALIES, FIN) --- */
  .riftSanctuaryWrap {
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* Empêcher le défilement de toute la page */
  }
  
  .riftScreenPanel,
  .riftScreenPanel.wide,
  .riftEndedBox {
    width: 94vw !important;
    max-width: 440px !important;
    max-height: 85dvh !important; /* Hauteur maximale contenue dans le viewport */
    padding: 20px 16px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important; /* Organisation verticale interne */
    overflow: hidden !important; /* Empêche le débordement hors du panneau */
  }
  
  /* Prevent headers and intro text from shrinking/disappearing when list scrolls */
  .riftScreenPanel > div:not(.riftShopList):not(.riftSanctuaryGrid):not(.riftAnomalyChoices),
  .riftScreenPanel > p,
  .riftEndedBox > img,
  .riftEndedBox > .riftEndedTitle,
  .riftEndedBox > .riftEndedText {
    flex-shrink: 0 !important;
  }
  
  /* End Screen Specific Overrides */
  .riftEndedBox {
    padding: 24px 16px !important;
    gap: 12px !important;
  }
  
  .riftEndedBox > img {
    width: 48px !important;
    height: 48px !important;
  }
  
  .riftEndedTitle {
    font-size: 26px !important;
    margin-bottom: 4px !important;
  }
  
  .riftEndedText {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  
  .riftEndedScrollWrap {
    flex: 1 !important;
    overflow-y: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }
  
  .riftEndedStatsRow {
    gap: 8px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .riftEndedStat {
    flex: 1 1 45% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
  }
  
  .riftEndedStat .k {
    font-size: 9px !important;
  }
  
  .riftEndedStat .v {
    font-size: 13px !important;
  }
  
  .riftEndedRewardsLabel {
    margin-top: 8px !important;
  }
  
  .riftEndedCloseBtn {
    flex: none !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-top: 8px !important;
  }
  
  /* --- PACK OPENING MOBILE UX --- */
  .packOpeningStage {
    /* Main stage container */
    width: 100vw !important;
    height: 100dvh !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  
  .packOpeningPack {
    /* Keep the pack centered and horizontally constrained.
       IMPORTANT: do NOT force height:auto here — the inline openPackStyle sets
       an explicit height (min(74vh,780px)) and the pack's children are all
       position:absolute (zero intrinsic size), so with no width set either,
       height:auto collapsed the whole box to 0x0 — the booster became
       invisible during opening. max-width/max-height alone are enough caps;
       the browser resolves aspect-ratio against the definite inline height. */
    max-width: 82vw !important;
    max-height: 70dvh !important;
  }
  
  .packSkipBtn {
    /* Make skip button easier to tap and position it safely */
    top: 70px !important; /* Safe area top + breathing room */
    right: 20px !important;
    padding: 12px 18px !important; /* Larger touch target */
    font-size: 11px !important;
  }
  
  .packRevealSlot {
    /* Constrain the reveal card horizontally */
    max-width: 82vw !important;
    max-height: 65dvh !important;
    height: auto !important;
  }
  
  /* Text overlays scaling */
  .packCardNew {
    font-size: 13px !important;
  }
  
  .packCardName {
    font-size: 20px !important;
    width: 90vw !important;
    white-space: pre-wrap !important;
  }
  
  .packCardRarity {
    font-size: 14px !important;
  }
  
  /* Summary screen */
  .packSummaryWrap {
    padding: 24px 16px !important;
    max-height: 94dvh !important;
    width: 96vw !important; /* Contenu horizontal */
    margin: 0 auto !important;
    border-radius: 20px !important;
  }
  
  .packSummaryGrid {
    overflow-y: auto !important; /* Scroll interne si nombreuses cartes */
    flex: 1 1 0% !important;
    align-content: flex-start !important;
    padding-bottom: 24px !important;
    max-height: 60vh !important; /* Laisse de la place pour les boutons */
    gap: 12px 8px !important;
  }
  
  .packSummaryCard {
    /* Shrink the cards slightly on mobile to form a nice grid */
    width: 30% !important;
    min-width: 80px !important;
    max-width: 100px !important;
    gap: 6px !important;
  }

  /* NOUVEAU / FAVORIS overlays take too much of these already-small ~90px
     cards. The global touch-target rule (button{min-width/height:44px}) was
     inflating the 28px favorite circle to 44px — opt it out explicitly and
     shrink the NOUVEAU badge to match. */
  .mps-summary-fav-btn {
    min-width: 26px !important;
    min-height: 26px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
    right: 4px !important;
    top: 4px !important;
  }

  .mps-summary-new-badge {
    padding: 2px 6px !important;
    font-size: 7.5px !important;
    top: 4px !important;
    left: 4px !important;
  }


  .packSummaryBtns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  
  .packSummaryBtns > button {
    font-size: 14px !important;
    padding: 16px 20px !important;
    width: 100% !important;
    flex: none !important;
  }
  
  .packSummaryCard > div > button {
    bottom: -6px !important;
    top: auto !important;
    right: -6px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    z-index: 20 !important;
  }
  
  /* --- GENERIC POPUPS / MODALES MOBILE UX --- */
  .mobileModal {
    width: 92vw !important;
    max-width: 440px !important;
    max-height: 85dvh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    will-change: transform, opacity !important;
    contain: content !important;
  }
  
  /* Make sure header doesn't shrink and content scrolls */
  .mobileModal > div:first-child {
    flex-shrink: 0 !important;
    padding: 16px 14px !important; /* Slightly tighter on mobile */
  }
  
  /* Content wrappers */
  .mobileModal > div.ap-scroll,
  .mobileModal > div[style*="overflow:auto"] {
    flex: 1 !important;
    padding: 16px 14px 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  /* Close buttons in absolute or flex headers */
  .mobileModal button[sc-camel-on-click*="close"] {
    width: 42px !important; /* Confortable for thumb */
    height: 42px !important;
  }

  /* Mail: tap a row to preview rewards without claiming (m.expanded state) —
     collapsed rows are compact, tapping again just hides the reward/claim
     row again, no claim happens either way. */
  .mps-mail-row {
    grid-template-columns: 44px 1fr !important;
    row-gap: 10px !important;
    padding: 12px !important;
  }
  .mps-mail-chevron {
    display: inline-block !important;
    font-size: 10px !important;
    color: #8a8a95 !important;
    margin-left: auto !important;
  }
  .mps-mail-row > div:nth-child(3),
  .mps-mail-row > button {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  /* Mail Claim Pop specific */
  .mobileClaimPop {
    padding: 20px 16px !important;
    width: 94vw !important;
    height: auto !important;
  }
  .mobileClaimPop [style*="font-size:31px"] {
    font-size: 24px !important;
  }
  
  /* Profile specific */
  .mobileProfile {
    padding: 20px 14px !important;
    overflow-y: auto !important; /* Profil n'a pas de wrapper interne pour le scroll dans l'HTML */
  }
  .mobileProfile [style*="font-size:38px"] {
    font-size: 26px !important;
  }
  .mobileProfileStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2x2 instead of 4 in a row */
  }

  /* Fiche Carte (Detail) specific */
  .mobileDetailModal {
    flex-direction: column !important; /* Stack card and details vertically */
    padding: 24px 14px !important;
    gap: 20px !important;
    overflow-y: auto !important;
  }
  
  #mps-detail-card {
    width: 72vw !important; /* Override 36vw which is too small on mobile */
    max-width: 260px !important;
    height: auto !important; /* Maintain aspect ratio */
    margin: 0 auto !important;
  }
  
  #mps-detail-info {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important; /* Prevent flex blowout */
  }
  
  /* Contemplation / Zoom Carte (Showcase) */
  .mobileShowcase {
    width: 90vw !important;
    height: 65dvh !important; /* Make sure it doesn't overlap safe areas too much */
  }
  
  .mobileShowcaseInfo {
    width: 90vw !important;
    margin-top: 10px !important;
  }
  
  /* Badge Detail */
  .mobileBadgeModal {
    padding: 40px 20px 24px !important; /* Adjust padding so content fits */
    width: 90vw !important;
    overflow-y: auto !important;
  }
  .mobileBadgeModal > [style*="font-size:30px"] {
    font-size: 24px !important;
  }

  /* Boutique Faille Header fix */
  .riftScreenPanel > div:first-child[style*="justify-content:center;gap:16px"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .riftScreenPanel > div:first-child[style*="justify-content:center;gap:16px"] > .riftPill {
    position: relative !important;
    right: auto !important;
  }

  /* Shop overrides — 2 compact columns instead of 1 full-width column so more
     products fit without scrolling as much. */
  .riftShopList {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 !important;
    flex: 1 !important; /* Prend l'espace disponible */
    overflow-y: auto !important; /* Défilement interne */
    padding-right: 4px !important;
  }
  .riftShopList button {
    min-height: 52px !important;
    height: auto !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }
  .riftShopFooter {
    flex-direction: column !important;
    align-items: center !important; /* CENTRAGE GÉOMÉTRIQUE */
    justify-content: center !important;
    gap: 12px !important;
    flex: none !important; /* Le footer ne rétrécit pas */
    width: 100% !important;
  }

  /* Relics / Echoes overrides — 3 compact columns so all choices are visible
     together instead of a tall single-column list requiring a scroll. */
  .riftSanctuaryGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important; /* No weird right padding */
    flex: 1 !important; /* Prend l'espace disponible */
    overflow-y: auto !important; /* Défilement interne si vraiment nécessaire */
    margin-bottom: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .riftSanctuaryGrid > div {
    /* Relic choices use a plain div with an inline width:308px (no .riftCard
       class for the earlier width override to catch) — that fixed width forced
       the grid track itself to grow to fit it, showing one huge relic and
       pushing the other two off-screen. Echo cards (width:196px, .riftCard)
       were already covered by the rule below, but relics slipped through. */
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important; /* Force to column width */
    box-sizing: border-box !important;
    padding: 8px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Relic card padding/description text — shrink to fit a ~110-130px column
     instead of the desktop 24px/22px padding sized for a 308px-wide card. */
  .riftSanctuaryGrid > div[style*="width:308px"] {
    padding: 12px 6px !important;
  }
  .riftSanctuaryGrid > div[style*="width:308px"] [style*="font-size:16px"] {
    font-size: 11px !important;
  }
  .riftSanctuaryGrid > div[style*="width:308px"] [style*="font-size:13px"] {
    font-size: 9px !important;
    margin: 8px 0 10px !important;
    min-height: 0 !important;
  }
  .riftSanctuaryGrid > div[style*="width:308px"] [style*="font-size:10px"] {
    font-size: 7.5px !important;
  }

  /* CHOISIR/EMPORTER buttons also carry a hardcoded pixel width from
     riftBtnStyle(role, 180|264, h) — same overflow problem as the cards. */
  .riftSanctuaryGrid button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .riftSanctuaryGrid .riftItemSlot {
    width: 40px !important;
    height: 40px !important;
  }

  .riftSanctuaryGrid .riftCard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  /* Clamp long text in small cards */
  .riftSanctuaryGrid .riftCard span,
  .riftSanctuaryGrid .riftCard div[style*="font-size:10px"],
  .riftSanctuaryGrid .riftCard div[style*="font-size:11px"],
  .riftSanctuaryGrid > div[style*="width:308px"] span,
  .riftSanctuaryGrid > div[style*="width:308px"] div {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Role/stat line and skill description text under each Echo/Relic card —
     shrink to fit the narrower 3-column cards. */
  .riftSanctuaryGrid [style*="font-size:11px"],
  .riftSanctuaryGrid [style*="font-size:10.5px"] {
    font-size: 8.5px !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
  }

  /* Anomalies overrides (just in case they need to scroll internally) */
  .riftAnomalyChoices {
    flex: 1 !important;
    overflow-y: auto !important;
  }
  
  /* --- RESONANCE MOBILE UX --- */
  .riftInventoryPanel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* The scroll is in the sub-container now */
  }

  .riftResonanceScrollArea {
    flex: 1 !important;
    width: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
  }
  .riftResonanceScrollArea::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }

  .riftResonanceZigzag {
    min-width: 1000px !important;
    min-height: 560px !important;
    /* Root nodes sit near the bottom of the zigzag's own coordinate system;
       on mobile the panel opens scrolled near there with barely any margin
       below, making them look flush against the edge. Extra bottom margin
       gives them breathing room without touching node placement logic. */
    margin: 20px auto 90px !important;
    transform: none !important;
  }
  
  .riftResonanceDetail {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 100 !important;
    background: #0d0a14 !important;
    border-top: 1px solid #3a2c48 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 16px calc(16px + var(--safe-bottom)) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8) !important;
    margin: 0 !important;
  }

  /* --- COMBAT --- */
  .cbStage {
    width: 100vw !important; /* Pleine largeur */
    max-width: 100vw !important;
    height: auto !important;
    max-height: 88dvh !important;
    border-radius: 0 !important; /* Retire l'arrondi pour prendre tout l'espace */
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  .cbBody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }
  
  /* 1. ENNEMIS / ZONE COMBAT */
  .cbArenaCol {
    order: 1 !important;
    width: 100% !important;
    min-height: auto !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid #ffffff1a !important;
    padding: 12px 8px !important;
  }
  
  /* 3. ÉQUIPE JOUEUR & 4. ACTIONS */
  .cbTeamCol {
    order: 2 !important;
    width: 100% !important;
    flex: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  /* Container des boutons d'actions */
  .cbTeamCol > div[style*="margin-top:auto"] {
    margin-top: 8px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* "Votre équipe" roster + HP bars duplicates info already on the character
     cards and eats a lot of vertical space on mobile — hide it. Engine HP
     data is untouched; this only hides the secondary summary panel. The rest
     of .cbTeamCol (bonuses, relics, play/speed/mute/replay controls) stays. */
  .mps-combat-roster-panel {
    display: none !important;
  }

  /* 5. LOGS */
  .cbLogCol {
    order: 3 !important;
    width: 100% !important;
    flex: none !important;
    border-left: none !important;
    border-top: 1px solid #ffffff1a !important;
    max-height: 20vh !important;
    overflow-y: auto !important;
  }

  /* Combat Cards Responsiveness — 2 per row, name hidden (redundant with the
     ⓘ detail popover), rarity logo shrunk so the portrait dominates.
     IMPORTANT: portraitStyle uses background-size:contain (never crops), but
     the card box previously had only min-height:130px with no matching
     width/aspect-ratio — a box shaped wrong for a portrait character forces
     contain to shrink the character way down to fit, which reads as "cut
     off"/wrong even though nothing is technically cropped. Giving the box a
     real portrait aspect-ratio (matching the character card convention used
     elsewhere, e.g. Rift's aspect-ratio:.7) lets the character fill it
     properly instead of floating tiny in a badly-shaped box. */
  .cbRow5 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .cbRow5 > div {
    /* Respecte exactement le ratio des cartes */
    aspect-ratio: 168 / 236 !important;
    min-height: 0 !important; 
    height: auto !important;
    max-width: none !important;
    flex: none !important;
    width: 100% !important;
  }
  
  .cbUnitCardName {
    display: none !important;
  }

  /* Scale down HP bars and unit names to fit mobile cards */
  .cbRow5 > div [style*="font-size:14px"] {
    font-size: 10px !important;
  }

  .cbUnitCardRarity {
    height: 14px !important;
    width: auto !important;
  }

  .cbTransportCol {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
}

/* 1. Aventure Star Conditions Mobile Popup (hide) */
.adv-star-popup { display: none !important; }

/* 2. Chat Global Mobile */
.mps-chat-drawer-mobile {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: min(380px, 100vw) !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  border-left: 1px solid #ffffff1a !important;
  background: radial-gradient(circle at 100% 50%,#2610444d,transparent 60%), linear-gradient(170deg,#14141c,#0a0a0e 70%) !important;
  box-shadow: -15px 0 40px #000c !important;
  padding: calc(18px + var(--safe-top)) max(18px, var(--safe-right)) calc(18px + var(--safe-bottom)) 20px !important;
  transition: transform 0.35s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
  transform: translateX(110%) !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}
.mps-chat-drawer-mobile.open {
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Global toast — already centered (left:50%/translateX(-50%)) but on mobile a
   long message can stretch wide enough to reach under the chat FAB (bottom
   right corner); push it above the FAB and safe-area, and cap its width so
   it never runs past the viewport edges. */
@media (max-width: 1024px) {
  .mps-global-toast {
    bottom: calc(84px + var(--safe-bottom)) !important;
    max-width: calc(100vw - 32px) !important;
    width: max-content !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

.mobile-chat-fab {
  position: fixed !important;
  bottom: calc(16px + var(--safe-bottom)) !important;
  right: max(16px, var(--safe-right)) !important;
  z-index: 99999 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--th) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s, transform 0.2s !important;
  font-size: 24px !important;
}
.mobile-chat-fab.open {
  background: #2a2a31 !important;
}
.mobile-chat-fab:active {
  transform: scale(0.92) !important;
}

/* Hide desktop chat on mobile — bug corrigé (2026-08-11) : cette règle n'était pas
   scopée par media query et masquait donc aussi le chat PC (display:none!important
   inconditionnel gagnait sur le style inline de #mps-chat-drawer). La version mobile
   du drawer (#mps-chat-drawer-mobile + FAB) prend le relais uniquement en dessous de
   1024px, seuil déjà utilisé par le reste du fichier (voir @media (max-width:1024px)
   plus haut qui repositionne #mps-chat-drawer en tiroir plutôt que de le masquer). */
@media (max-width: 1024px) {
  #mps-chat-drawer { display: none !important; }
}


/* 4. Home Backgrounds */
#mps-global-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background-size: cover !important;
  background-position: 30% center !important; /* Shift framing left to show characters */
}

/* 5. Collection Zoom */
#mps-collection-detail .mobileModal {
  max-width: 90vw !important;
  max-height: 85vh !important;
}

/* 6. Boutique Alignments */
.shop-cat-banner, .shop-pack-name, .shop-category-header {
  text-align: center !important;
}

/* 7. Faille Fixes */
.riftSideCol {
  pointer-events: none !important;
}
.riftSideCol > * {
  pointer-events: auto !important;
}
.riftMapWrap {
  padding-bottom: 240px !important;
}
.riftCompoSelect {
  color: #fff !important;
  background-color: #120c1a !important;
  -webkit-appearance: none !important;
}
.riftCompoPageRow > button, .riftCompoPageInfo {
  color: #fff !important;
  display: flex !important;
}

/* Mailbox fixes */
.mail-reward-item {
  cursor: pointer;
  transition: transform 0.1s;
}
.mail-reward-item:active {
  transform: scale(0.95);
}

.mobile-chat-fab { display: none !important; }
@media (max-width: 1024px) {
  .mobile-chat-fab { display: grid !important; }
}

@media (max-width: 1024px) {
  /* Twitch Login Mobile Fix */
  .twLoginOverlay {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-position: center !important;
  }
  .twLoginPanel {
    margin: 0 !important;
    width: 90vw !important;
    max-width: 400px !important;
    padding: 38px 24px 30px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}
@media (max-width: 1024px) {
  .mps-bg-layer {
    background-size: cover !important;
    background-position: center !important;
  }
  .mobile-chat-fab.open {
    bottom: calc(70px + var(--safe-bottom, 0px)) !important;
    transform: none !important;
  }
  .ap-section-tabs > button {
    flex: 0 0 auto !important;
  }
  .shop-header-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .shop-header-left, .shop-header-right {
    align-items: center !important;
    text-align: center !important;
  }
  .mps-header-desktop-actions {
    display: none !important;
  }
  .mps-header-mobile-actions {
    display: flex !important;
  }
}

@media (max-width: 1024px) {
  .desktop-detail-fav-btn {
    display: none !important;
  }
  .mobile-detail-fav-btn {
    display: grid !important;
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  /* ==================================================
     1. ACCUEIL — COMPACT TCG-STYLE HOME
     ================================================== */
  #mps-header {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    column-gap: 4px !important;
    row-gap: 5px !important;
    padding: calc(4px + var(--safe-top)) 0 6px !important;
    align-items: start !important;
  }
  #mps-header > div:first-child,
  #mps-header > .mps-currencies {
    display: contents !important;
  }
  #mps-header > .mps-music-wrap {
    display: contents !important;
  }
  .mps-hamburger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    padding: 4px 7px 4px 0 !important;
    margin: 0 !important;
  }
  #mps-header > .mps-currencies > div:nth-child(1),
  #mps-header > .mps-currencies > div:nth-child(2) {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    gap: 7px !important;
    justify-content: center !important;
  }
  #mps-header > .mps-currencies > div:nth-child(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  #mps-header > .mps-currencies > div:nth-child(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  #mps-header > .mps-currencies > div:nth-child(1) > span:first-child {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }
  #mps-header > .mps-currencies > div:nth-child(2) > span:first-child {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    border: 0 !important;
    clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    background: #49b8f5 !important;
    filter: drop-shadow(0 0 8px #49b8f5aa) !important;
  }
  #mps-header > .mps-currencies > div:not(.mps-header-desktop-actions) span:nth-child(2) {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
  }
  .mps-header-mobile-actions {
    position: absolute !important;
    top: calc(4px + var(--safe-top)) !important;
    right: max(11px, var(--safe-right)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    transform: none !important;
  }
  .mps-header-mobile-actions button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 5px !important;
  }
  .mps-music-bars,
  .mps-music-title,
  .mps-plus-btn,
  .mps-header-desktop-actions,
  #mps-header > .mps-currencies > .mps-header-desktop-actions,
  .mps-music-controls button[aria-label="Recommencer la piste"] {
    display: none !important;
  }
  #mps-header .mps-music-controls {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    width: auto !important;
    min-height: 28px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #mps-header .mps-music-controls button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px !important;
  }
  .mps-header-mobile-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    transform-origin: top right !important;
    gap: 7px !important;
    padding: 8px !important;
  }
  .mps-header-mobile-menu > button {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .mps-header-mobile-menu > button > span {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }
  .mps-header-mobile-menu > div {
    margin: 1px 0 !important;
  }

  #mps-home {
    padding: 3px max(8px, var(--safe-left)) 10px !important;
    padding-right: max(8px, var(--safe-right)) !important;
  }
  #mps-home > div:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 5px 0 6px !important;
  }
  #mps-home > div:nth-child(3) > div[sc-camel-on-click] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: center !important;
  }
  #mps-home > div:nth-child(3) .mps-hero-pack-art {
    height: min(61vh, 74vw, 520px) !important;
  }
  .mps-home-mobile-open-actions {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 356px) !important;
    margin: 14px auto 0 !important;
  }
  .mps-home-mobile-open-btn {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 10px 8px !important;
    border: 1px solid var(--th) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--th) 68%, #17111f), #111118) !important;
    color: #fff !important;
    font-family: Barlow Condensed, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px -12px var(--th), inset 0 1px 0 #ffffff24 !important;
  }
  .mps-home-mobile-open-five {
    background: linear-gradient(135deg, var(--th), #31204b) !important;
  }
  .mps-home-mobile-open-btn b {
    font-size: 21px !important;
  }
  .mps-home-mobile-quick-links {
    position: absolute !important;
    z-index: 6 !important;
    top: 42% !important;
    right: 1px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }
  .mps-home-mobile-quick-links button {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid #ffffff42 !important;
    border-radius: 11px !important;
    background: #09090dde !important;
    color: #f7f7ff !important;
    box-shadow: 0 6px 16px #0008 !important;
    cursor: pointer !important;
  }
  #mps-home > div:nth-child(4) {
    margin-bottom: 0 !important;
  }
  #mps-home > div:nth-child(4) .rareShowcase {
    min-height: 166px !important;
    padding: 33px 8px 7px !important;
    overflow: visible !important;
  }
  .mps-home-rare-rates {
    top: 9px !important;
    left: 7px !important;
    right: 7px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .mps-home-rare-rates > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .mps-home-rare-rates img {
    height: 11px !important;
  }
  .mps-home-rare-rates > span > span {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
  #mps-home > div:nth-child(4) .rareShowcase .homeRareCard {
    width: clamp(76px, 21vw, 90px) !important;
    flex-basis: clamp(76px, 21vw, 90px) !important;
    overflow: hidden !important;
  }
  #mps-home > div:nth-child(4) .rareShowcase .homeRareCard:nth-of-type(3) {
    width: clamp(92px, 25vw, 106px) !important;
    flex-basis: clamp(92px, 25vw, 106px) !important;
  }
  .mps-home-legacy-open,
  .mps-home-legacy-links {
    display: none !important;
  }

  /* ==================================================
     2. INVENTAIRE — CARTES DE BOOSTERS
     ================================================== */
  #mps-inv {
    padding: 8px max(12px, var(--safe-left)) 26px !important;
    padding-right: max(12px, var(--safe-right)) !important;
  }
  #mps-inv > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }
  #mps-inv .mps-inv-card-main {
    align-items: stretch !important;
    min-height: 108px !important;
  }
  #mps-inv .mps-inv-card-meta {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #mps-inv .mps-inv-card-actions {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    margin-top: 5px !important;
  }
  #mps-inv .mps-inv-card-actions button {
    display: grid !important;
    place-items: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 6px !important;
  }
  #mps-inv .mps-inv-card-rates {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid #ffffff14 !important;
    overflow: hidden !important;
  }
  #mps-inv .mps-inv-card-rates > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    white-space: nowrap !important;
  }
  #mps-inv .mps-inv-card-rates img {
    width: auto !important;
    height: 10px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px #000a) !important;
  }
  #mps-inv .mps-inv-card-rates > span > span {
    overflow: hidden !important;
    font-family: Barlow Condensed, sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    color: #f1f1f6 !important;
    text-overflow: clip !important;
  }

  /* ==================================================
     3. COLLECTION — ENTÊTE, FILTRES ET PAGINATION
     ================================================== */
  #mps-collection {
    padding: 6px max(12px, var(--safe-left)) 28px !important;
    padding-right: max(12px, var(--safe-right)) !important;
  }
  #mps-collection-header {
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
  }
  #mps-collection-header > div:first-child {
    width: 100% !important;
  }
  #mps-collection-header > div:first-child > div {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #mps-collection-header > div:first-child > p {
    font-size: 12px !important;
  }
  #mps-collection-search-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #mps-collection-search {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #mps-collection-own-filters {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 1px 0 3px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #mps-collection-own-filters::-webkit-scrollbar {
    display: none !important;
  }
  #mps-collection-own-filters button {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  #mps-collection-filters-set {
    margin: 12px 0 8px !important;
  }
  #mps-collection-filters-rarity {
    margin: 0 0 12px !important;
  }
  #mps-collection-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    margin: 20px 0 3px !important;
    overflow: hidden !important;
  }
  #mps-collection-pagination > span {
    display: none !important;
  }
  #mps-collection-pagination button {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
  #mps-collection-pagination .mps-collection-page-ellipsis {
    flex-basis: 22px !important;
    width: 22px !important;
    min-width: 22px !important;
  }
  .mps-showcase-hint {
    display: none !important;
  }

  /* ==================================================
     4. MISSIONS — COMPOSITION ET PAGINATION
     ================================================== */
  #mps-stub-section:has(.mps-missions-claim-row) > .mps-stub-title,
  #mps-stub-section:has(#mps-badges-grid) > .mps-stub-title {
    text-align: center !important;
  }
  #mps-stub-section:has(.mps-missions-claim-row) > div:first-of-type,
  #mps-stub-section:has(#mps-badges-grid) > div:first-of-type {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #mps-stub-section:has(.mps-missions-claim-row) > p,
  #mps-stub-section:has(#mps-badges-grid) > p {
    text-align: center !important;
  }
  .mps-missions-claim-row {
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  .mps-mission-reward-desktop {
    display: none !important;
  }
  .mps-mission-card-top {
    gap: 0 !important;
  }
  .mps-mission-card-bottom {
    display: grid !important;
    grid-template-columns: minmax(52px, .8fr) minmax(0, 1.7fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }
  .mps-mission-progress {
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .mps-mission-reward-mobile {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
  }

  /* ==================================================
     5. BADGES — ENTÊTE, TRI ET PAGINATION
     ================================================== */
  .mps-badges-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
  }
  .mps-badges-header > div:first-child {
    text-align: center !important;
  }
  #mps-badges-filters {
    align-items: center !important;
  }
  #mps-badges-sort-filters {
    justify-content: center !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  #mps-badges-sort-filters button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* La même grille fixe que Collection : trois pages autour de l'active,
     une ellipse et la dernière page. Aucun scroll ni saut de ligne. */
  .mps-pagination-row.mps-missions-pagination,
  .mps-pagination-row.mps-badges-pagination {
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mps-missions-pagination button,
  .mps-badges-pagination button {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
  }
  .mps-missions-pagination .mps-collection-page-ellipsis,
  .mps-badges-pagination .mps-collection-page-ellipsis {
    flex-basis: 22px !important;
    width: 22px !important;
    min-width: 22px !important;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  /* ==================================================
     2. FAILLE - RELIQUES & BOUTIQUE PORTRAIT
     ================================================== */
  .riftSanctuaryGrid, .riftShopList {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  /* Le Sanctuaire d'Écho veut ses 3 cartes côte à côte sur UNE ligne (jamais de scroll
     horizontal ni un wrap qui les empile). La règle ci-dessus (display:flex + enfants à
     width:100%, plus bas) est correcte pour la Boutique (liste d'items en colonne) mais
     casse le Sanctuaire : chaque carte à 100% de large en flex-wrap force un wrap à CHAQUE
     carte (une par ligne) au lieu de 3 par ligne. Remis en grid 3 colonnes ici, plus loin
     dans la cascade donc prioritaire à spécificité égale. */
  .riftSanctuaryGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
  .riftSanctuaryGrid > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Sanctuaire d'Écho : retire le nom du perso (sur la carte) et la ligne rôle/stats
     (sous la carte) — retour utilisateur explicite. Le nom n'a pas de sélecteur dédié pour
     cette ligne précise, c'est le div juste après .riftCard dans le même wrapper. */
  .riftSanctuaryGrid .charName { display: none !important; }
  .riftSanctuaryGrid .riftCard + div { display: none !important; }

  /* Relics */
  .riftRelicCardWrap {
    width: auto !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
  }
  .desktop-relic-info, .desktop-shop-info, .desktop-shop-buy {
    display: none !important;
  }
  .shop-icon-slot {
    width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
    transition: transform 0.2s;
  }
  /* Icônes de reliques BEAUCOUP plus grandes dans la grille de l'Autel (retour explicite
     utilisateur) — le slot d'emplacement + l'icône réelle grandissent ensemble. Spécificité
     `.riftSanctuaryGrid .relic-icon-slot` nécessaire : la règle générique
     `.riftSanctuaryGrid .riftItemSlot{width:40px!important}` (ligne ~1512, partagée avec le
     Sanctuaire d'Écho) a 2 classes elle aussi et gagnait sinon, peu importe l'ordre. */
  .relic-icon-slot {
    width: 128px !important;
    height: 128px !important;
    margin: 0 !important;
    transition: transform 0.2s;
  }
  .riftSanctuaryGrid .relic-icon-slot {
    width: 128px !important;
    height: 128px !important;
  }
  .mobile-inspect-open .relic-icon-slot, .mobile-inspect-open .shop-icon-slot {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px #fff8);
  }

  .mobile-relic-info-zone, .mobile-shop-info-zone {
    display: none !important;
  }
  /* Vraie fenêtre de détail séparée (retour utilisateur) au lieu d'une petite bulle ancrée
     à la carte : modale centrée plein écran, backdrop dédié (::before) et textes agrandis
     pour le texte/effet complet. Réutilise exactement le même contenu (nom/catégorie/
     description/bouton) déjà branché — pas de nouveau state, juste une présentation en
     fenêtre au lieu d'un tooltip. */
  .mobile-inspect-open .mobile-relic-info-zone, .mobile-inspect-open .mobile-shop-info-zone {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(320px, 86vw) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    background: #0d0d11 !important;
    border: 1px solid #4a3c58 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    z-index: 220 !important;
    text-align: center;
    box-shadow: 0 0 0 100vmax #000000c2, 0 24px 70px #000c;
  }
  .riftRelicCardWrap > .relic-icon-slot { display:block !important; }
  .riftInspectDismiss{position:fixed!important;inset:0!important;z-index:219!important;border:0!important;background:transparent!important;padding:0!important;cursor:default!important}
  .mobile-inspect-open .mobile-relic-info-zone, .mobile-inspect-open .mobile-shop-info-zone{z-index:220!important}
  /* z-index:-1 sur un ::before position:fixed le fait passer derrière la couche par défaut
     de TOUTE la page (pas seulement derrière son propre parent) — le voile d'assombrissement
     ne couvrait donc rien d'utile et le popup se lisait mal sur un fond chargé. Remonté juste
     sous le popup (219 < 220) au lieu de -1 : vrai voile plein écran devant le reste de l'UI. */
  .mobile-inspect-open .mobile-relic-info-zone::before, .mobile-inspect-open .mobile-shop-info-zone::before {
    display: none;
  }
  .mobile-inspect-open .mobile-relic-info-zone > div:first-child, .mobile-inspect-open .mobile-shop-info-zone > div:first-child {
    font-size: 15px !important;
  }
  .mobile-inspect-open .mobile-relic-info-zone p, .mobile-inspect-open .mobile-shop-info-zone p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Shop Items */
  .riftShopItemWrap {
    width: auto !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* ==================================================
     3. COMBAT - TERRAIN & CARTES (TCG STYLE)
     ================================================== */
  .cbStage {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    padding: 0 !important;
    padding-top: calc(10px + var(--safe-top)) !important;
  }
  .cbHead {
    flex: none !important;
    padding: 0 16px !important;
  }
  .cbBody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important; 
    padding: 0 8px calc(80px + var(--safe-bottom)) 8px !important; 
  }
  
  /* Hide desktop parts */
  .cbTeamCol > div:not(.cbTransportCol) { display: none !important; }
  .cbTeamCol { display: contents !important; }
  .cbArenaCol {
    flex: 1 !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .cbArenaCenter {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    gap: 8px !important; 
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  .cbSideLabel, .cbHint { display: none !important; }
  .cbVsRow { margin: 0 !important; opacity: 0.3 !important; padding: 4px 0 !important; }
  
  /* Cross Layout using Flexbox order */
  .cbRow5 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
  /* BOT TEAM: Leader front (bottom), Supports back (top) */
  .cbBotRow .cbLeader {
    width: 45% !important;
    order: 2 !important;
    z-index: 2 !important;
  }
  .cbBotRow .cbSupport {
    width: 25% !important;
    order: 1 !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
  }
  /* PLAYER TEAM: Leader front (top), Supports back (bottom) */
  .cbPlayerRow .cbLeader {
    width: 45% !important;
    order: 1 !important;
    z-index: 2 !important;
  }
  .cbPlayerRow .cbSupport {
    width: 25% !important;
    order: 2 !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
  }

  /* Clean up cards for portrait */
  .cbRow5 > div { min-height: 0 !important; aspect-ratio: 63/88 !important; border-radius: 8px !important; }
  .cbRow5 > div .cbUnitCardName, 
  .cbRow5 > div > span:not([style*="shieldStyle"]):not([style*="stateStyle"]):not([style*="floatStyle"]) {
    display: none !important;
  }
  .cbRow5 > div .cbUnitCardRarity { display: none !important; }
  .cbRow5 > div [style*="hpTrackStyle"] { margin-top: auto !important; margin-bottom: 4px !important; }

  /* ==================================================
     4. COMBAT - CONTRÔLES & JOURNAL
     ================================================== */
  .cbTransportCol {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px calc(12px + var(--safe-bottom)) !important;
    background: linear-gradient(0deg, #07070ef2, transparent) !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
  }
  .cbIconRow {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  .cbLogCol {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    background: #07070ef0 !important;
    backdrop-filter: blur(8px) !important;
    padding-top: calc(40px + var(--safe-top)) !important;
  }
  .cbLogCol.open {
    display: flex !important;
  }
  .cbLogCol .cbEyebrow {
    text-align: center !important;
    font-size: 16px !important;
    color: #fff !important;
  }

  /* ==================================================
     5. ÉQUIPE & COLLECTION PORTRAIT
     ================================================== */
  /* Ancien bloc `.adv-team-roster{grid-template-columns:repeat(4,1fr)!important;...}`
     retiré (2026-08-12) : malgré son commentaire de section, il ne matchait QUE le roster
     du sélecteur d'équipe Aventure (`#adventure-team-panel .adv-team-roster` — la
     Collection utilise `#mps-collection-grid`, un sélecteur totalement différent). Étant
     plus bas dans la cascade que la vraie règle active (`.adv-team-roster{grid-template-
     columns:repeat(auto-fill,minmax(130px,1fr))}` plus haut dans ce fichier), il l'emportait
     à spécificité égale et écrasait le design réel de la carte (portrait + nom + rôle/
     licence/rareté + stats + bouton AJOUTER/ÉQUIPE) avec une grille 4 colonnes qui masquait
     carrément `div:last-child` (le bouton d'action) et laissait le texte déborder par-dessus
     la pagination — signalé par l'utilisateur comme "tout écrasé" et différent de l'affichage
     d'origine. Aucun autre écran ne consomme ce sélecteur, retiré sans remplacement. */

  /* ==================================================
     6. ACCUEIL PORTRAIT
     ================================================== */
  #mps-home {
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 20px calc(20px + var(--safe-bottom)) !important;
  }
  .homeHero {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  .homeHero > div[style*="heroPackArtStyle"] {
    width: 80% !important;
    height: auto !important;
    aspect-ratio: 945/1772 !important;
  }
  #mps-home .homeNavBtns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  #mps-home .homeNavBtns > button {
    flex: 1 1 40% !important;
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
  
  /* Chat in Home */
  .mobile-chat-fab {
    bottom: calc(16px + var(--safe-bottom)) !important;
    right: 16px !important;
    transform: scale(0.85);
  }

  /* ==================================================
     7. OUVERTURE BOOSTER PORTRAIT
     ================================================== */
  .packOpeningStage {
    width: 100% !important;
    height: 60vh !important;
    margin: auto !important;
  }
  .packActionRow {
    position: fixed !important;
    bottom: calc(20px + var(--safe-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    z-index: 50 !important;
  }

  /* ==================================================
     8. RECAP CARTES PORTRAIT
     ================================================== */
  .packSummaryGrid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .packSummaryGrid > div {
    width: calc(33.333% - 8px) !important;
    margin: 0 !important;
  }
}

/* ═══ Fin de cascade : corrections Aventure + Classement portrait ═══ */
@media (max-width:768px) and (orientation:portrait){
  #mps-ranking-section{padding-left:max(16px,var(--safe-left))!important;padding-right:max(16px,var(--safe-right))!important;text-align:center!important}
  #mps-ranking-section>h2,#mps-ranking-section>p{text-align:center!important}
  #mps-ranking-section>div[style*="height:1px"]{margin-left:auto!important;margin-right:auto!important}
  .adv-mobile-top-nav{left:max(8px,var(--safe-left))!important;right:max(8px,var(--safe-right))!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) 36px!important;justify-items:center!important;gap:6px!important}
  .adv-mobile-top-nav>button:nth-of-type(1){grid-column:1!important}.adv-mobile-top-nav>div:nth-of-type(1){grid-column:2!important;min-width:0!important;max-width:100%!important}.adv-mobile-top-nav>button:nth-of-type(2){grid-column:3!important}
  .adv-mobile-top-nav>div:nth-of-type(n+2),.adv-mobile-top-nav>button:nth-of-type(n+3){display:none!important}
  .adv-mobile-top-nav>div:nth-of-type(1){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:6px 10px!important;box-sizing:border-box!important;text-align:center!important;overflow:hidden!important}
  .adv-mobile-top-nav>div:nth-of-type(1)>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #adventure-map .adv-map-mascot{left:5%!important;right:auto!important;top:auto!important;bottom:7%!important;font-size:48px!important;transform:none!important;z-index:5!important}
  #adventure-map>div[style*="🏕"],#adventure-map>div[style*="DÉPART"]{left:9px!important;top:auto!important;bottom:3%!important;transform:none!important;font-size:9px!important;padding:5px 8px!important}
  #adventure-map [style*="width:max-content"]{max-width:calc(100vw - 26px)!important;font-size:10px!important}
}

/* ═══ COMBAT — plateau mobile fidèle au mockup Combat & Équipe ═══ */
@media (max-width:768px) and (orientation:portrait){
  .mps-combat-stage{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#050608 url('../combat/arena-bg.png') center/cover no-repeat!important}
  .mps-combat-stage::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 18%,#11182722,#020307b8 75%);z-index:0}
  .mps-combat-stage>.cbHead,.mps-combat-stage>.cbBody{position:relative;z-index:1}.mps-combat-stage .cbHead{min-height:58px;padding:5px 10px 0!important;background:transparent!important;border:0!important;align-items:start!important}.mps-combat-stage .cbHeadCenter{text-align:left!important;order:-1}.mps-combat-stage .cbHeadCenter>div:first-child{font-size:11px!important;color:#f5f6fa!important;letter-spacing:.02em!important}.mps-combat-stage .cbHeadCenter>div:last-child{font-size:8px!important;color:#aeb5c4!important}.mps-combat-stage .cbHeadSide.right{gap:6px!important}.mps-combat-stage .cbCurrency{display:none!important}.mps-combat-stage .cbClose{width:26px!important;height:26px!important;border-radius:7px!important;background:#191b23!important}
  .mps-combat-stage .cbBody{height:calc(100dvh - 58px)!important}.mps-combat-stage .cbArenaCol{padding:0 10px 112px!important;background-color:transparent!important}.mps-combat-stage .cbArenaCenter{grid-template-rows:minmax(0,1fr) 16px minmax(0,1fr)!important;gap:0!important;transform:translateY(14px)!important}
  .mps-stage-side{justify-content:center!important}.mps-stage-side.enemy{padding-top:4px!important}.mps-stage-side.player{padding-bottom:0!important}.mps-bench-row{width:100%!important;gap:7px!important;min-height:min(106px,27vw)!important;justify-content:center!important}.mps-bench-card{width:min(calc((100vw - 54px)/3),102px)!important;height:min(calc((100vw - 54px)/2.55),132px)!important;border:1px solid #ffffff22!important;border-radius:8px!important;background:#14161dcc!important;box-shadow:0 7px 15px #000b!important;transform:none!important}.mps-bench-card>div:first-child{background-size:cover!important}.mps-bench-card>img{display:none!important}.mps-mini-hp{left:3px!important;right:3px!important;bottom:2px!important;height:3px!important}
  .mps-active-card{width:min(190px,47vw,33vh)!important;height:auto!important;aspect-ratio:.72!important;min-height:0!important;border:2px solid #ffffff66!important;border-radius:15px!important;background:#14161dcc!important;box-shadow:0 18px 40px #000c,0 0 34px -14px #ffffff66!important;overflow:visible!important}.mps-active-card>div:nth-child(2){border-radius:13px!important;background-size:cover!important;filter:none!important}.mps-active-card>div:nth-child(3){border-radius:0!important}.mps-active-card.enemy{margin-top:-6px!important}.mps-active-card.player{margin-bottom:-3px!important}.mps-active-card [style*="roleBadgeStyle"],.mps-active-card [style*="rarityStyle"]{display:none!important}.mps-active-card .cbUnitCardName{font-size:11.5px!important}.mps-active-hp{font-size:9px!important;color:#f5f6fa!important;font-weight:800!important}
  .mps-combat-stage .cbVsRow{height:16px!important}.mps-combat-stage .cbVsRow .rule{display:none!important}.mps-combat-stage .cbVsRow>div:nth-child(2){width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#f5f6fa!important;font-size:13px!important}
  .mps-combat-stage .cbTeamCol{left:0!important;right:0!important;bottom:0!important;max-height:78px!important;padding:5px 10px!important;border:0!important;border-top:1px solid #ffffff14!important;border-radius:0!important;background:#0b0c10e8!important;backdrop-filter:none!important}.mps-combat-stage .cbIconRow{justify-content:center!important;gap:5px!important}.mps-combat-stage .cbIconBtn{height:26px!important;width:26px!important;border-radius:7px!important;background:#191b23!important;font-size:10px!important}.mps-combat-stage .mps-speed-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:1px!important;line-height:1!important}.mps-combat-stage .mps-speed-button span{display:block!important;line-height:1!important}.mps-combat-stage .mobile-log-toggle{width:auto!important;padding:0 12px!important}.mps-combat-stage .cbTransportCol{width:100%!important}.mps-combat-stage .cbEndPanel{bottom:2px!important}
  .mps-combat-stage .cbLogCol{left:0!important;right:0!important;bottom:0!important;border-radius:0!important;background:#0e0f14f2!important}.mps-combat-stage .mps-battle-vfx{display:none!important}
}

/* AVENTURE + FAILLE — portrait : les bandes horizontales gardent le scroll vertical du panneau. */
@media (max-width:768px) and (orientation:portrait){
  /* Combat : l'art de la carte active reste entier ; aucune image n'est recadrée pour remplir le cadre. */
  /* La carte de Faille vit dans un root flex : largeur explicite pour empêcher le repli à 52px. */
  .riftMapLayout{width:100%!important;min-width:100%!important;box-sizing:border-box!important;flex:0 0 100%!important}
  .riftMapWrap{width:100%!important;min-width:0!important;flex:1 1 auto!important}
  .mps-combat-stage .mps-active-card>div:nth-child(2){background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
  .mps-combat-stage .mps-active-card{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .mps-combat-stage .mps-active-card>div:nth-child(2){border-radius:0!important}

  /* Composition d'équipe : cinq emplacements accessibles par swipe horizontal, sans sortir de la modale. */
  #adventure-team-panel .adv-team-slots{display:flex!important;grid-template-columns:none!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;scroll-snap-type:x proximity!important;touch-action:pan-x pan-y!important;padding:2px 4px 10px!important;margin-left:-4px!important;margin-right:-4px!important;width:calc(100% + 8px)!important}
  #adventure-team-panel .adv-team-slots>*{flex:0 0 min(122px,34vw)!important;min-width:0!important;scroll-snap-align:start!important}
  #adventure-team-panel .adv-team-slots>*>div:first-child{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
  #adventure-team-panel .adv-team-slots>div{align-items:center!important;justify-content:flex-end!important;min-height:168px!important}
  #adventure-team-panel .adv-team-slots>div>div:nth-child(3){width:100%!important;padding:20px 7px 7px!important;text-align:center!important}
  #adventure-team-panel .adv-slot-remove{top:4px!important;right:4px!important;width:14px!important;height:14px!important;min-width:14px!important;padding:0!important;border-width:1px!important;font-size:10px!important;line-height:12px!important}
  #adventure-team-panel .adv-team-slots button[style*="font-size:8px"]{width:auto!important;min-width:0!important;padding:3px 5px!important;border-radius:5px!important;font-size:6.5px!important;letter-spacing:.03em!important}
  #adventure-team-panel .adv-team-slots::-webkit-scrollbar{display:none!important}

  /* Carte Aventure : départ réellement ancré près du niveau 1, boss lisible au-dessus de son portrait. */
  #adventure-map .adv-map-mascot{left:7%!important;right:auto!important;top:auto!important;bottom:2.5%!important;font-size:46px!important;transform:none!important}
  #adventure-map .adv-map-start-tent{left:3%!important;top:auto!important;bottom:1.2%!important;transform:none!important;font-size:42px!important}
  #adventure-map .adv-map-start-label{left:8px!important;top:auto!important;bottom:0.35%!important;transform:none!important;font-size:9px!important;padding:5px 8px!important}
  #adventure-map [style*="white-space:pre-line"]{font-size:15px!important;font-weight:1000!important;line-height:1.2!important}

  /* La Faille : HUD centré, boutons à largeur stable et contenu de composition remonté. */
  .riftHud{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;padding:calc(6px + var(--safe-top)) 10px 5px!important}
  .riftStratum{width:100%!important;align-items:center!important;text-align:center!important;gap:1px!important}
  .riftStratum .k{font-size:9px!important}.riftStratum .v{font-size:18px!important}
  .riftHudRight{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;align-items:center!important;gap:5px!important}
  .riftHudCoin{display:none!important}
  .riftHudRight .riftHudBtn{width:100%!important;min-width:0!important;height:40px!important;padding:0 4px!important;border:1px solid #ffffff1f!important;border-radius:9px!important;background:linear-gradient(135deg,#171222ee,#0b0a12ee)!important;box-shadow:inset 0 1px #ffffff12,0 4px 12px #0006!important;white-space:nowrap!important}
  .riftHudRight .riftHudBtn>img{display:none!important}
  .riftHudRight .riftHudBtn span{font-size:9px!important;letter-spacing:.025em!important;color:#eee5ff!important}
  .riftHudRight .riftRetreatBtn{background:linear-gradient(135deg,#171222ee,#0b0a12ee)!important;border-color:#ffffff1f!important}
  .riftCompoWrap.mps-rift-composition{height:calc(100dvh - 118px)!important;padding:2px 10px 12px!important;overflow-y:auto!important}
  .mps-rift-composition .riftCompoFilterBar{margin:0 0 8px!important;padding:8px!important}
  .mps-rift-composition .riftCompoGrid{gap:9px!important}
  .mps-rift-composition .riftCompoPageRow{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;gap:5px!important;margin:10px 0 8px!important;overflow:hidden!important}
  .mps-rift-composition .riftCompoPageInfo{display:none!important}
  .mps-rift-composition .riftCompoPageBtn{flex:0 0 32px!important;min-width:32px!important;height:32px!important;padding:0!important}
  .mps-rift-composition .riftEnterRow{margin:0!important;padding:0 0 calc(8px + var(--safe-bottom))!important}
  .mps-rift-composition .riftEnterRow .riftHudBtn{max-width:300px!important;height:42px!important}
}

@media (max-width:768px) and (orientation:portrait){
  .packOpeningStage{width:100vw!important;height:100dvh!important;min-height:100dvh!important;margin:0!important;padding:calc(50px + var(--safe-top)) 12px calc(68px + var(--safe-bottom))!important;box-sizing:border-box!important;overflow:hidden!important}
  .packOpeningStage>.packTearPrompt{transform:translateY(-24px)!important}
  .packOpeningStage .packOpeningPack{max-width:84vw!important;max-height:min(68dvh,640px)!important}
  .packRevealProgress{top:calc(10px + var(--safe-top))!important;gap:7px!important}
  .packRevealProgress>div:first-child{font-size:18px!important;font-weight:900!important;letter-spacing:.18em!important;color:#f5f5fb!important}
  .packRevealProgress>div:last-child{gap:8px!important}
  .packRevealProgress>div:last-child>*{transform:scale(1.18)!important}
  .packCardName{left:8px!important;right:8px!important;width:auto!important;text-align:center!important;font-size:20px!important;font-weight:900!important;line-height:1.05!important}
  .packCardRarity{left:8px!important;right:8px!important;text-align:center!important;font-size:15px!important;font-weight:900!important}
  .packSummaryWrap{width:100vw!important;min-height:100dvh!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:calc(42px + var(--safe-top)) 12px calc(72px + var(--safe-bottom))!important;gap:12px!important;justify-content:flex-start!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  .packSummaryWrap h2{font-size:28px!important;margin-top:6px!important}
  .packSummaryGrid{flex:none!important;width:100%!important;max-height:none!important;overflow:visible!important;padding:0 4px 8px!important;gap:10px 7px!important}
  .packSummaryBtns{position:sticky!important;bottom:0!important;z-index:3;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;width:100%!important;gap:8px!important;padding:9px 0 calc(3px + var(--safe-bottom))!important;background:linear-gradient(0deg,#050507 72%,transparent)!important}
  .packSummaryBtns>button{width:auto!important;min-width:0!important;min-height:42px!important;height:42px!important;padding:0 14px!important;font-size:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .packSummaryBtns>.packSummaryAgain{flex:1 1 auto!important;max-width:190px!important}
  .packSummaryBtns>.packSummaryIconBtn{flex:0 0 42px!important;width:42px!important;padding:0!important}
  .packSummaryIconBtn>span{display:none!important}
  #mps-detail-info{color:#fff!important}
  #mps-detail-info>div:first-child{text-align:center!important;align-items:center!important}
  #mps-detail-info>div:first-child>div:last-child{color:#fff!important;text-align:center!important}
  #mps-detail-info [style*="color:#8a8a95"],#mps-detail-info [style*="color:#777"]{color:#fff!important}
  #mps-showcase-modal [style*="ap-card-sweep-continuous"]{background:linear-gradient(135deg,transparent 32%,#ffffff00 42%,#ffffffc0 50%,#ffffff00 58%,transparent 68%)!important}
  .mps-showcase-hint{display:none!important}
}

@media (max-width:768px) and (orientation:portrait){
  .packRevealProgress{top:calc(44px + var(--safe-top))!important}
  .packCardNew{top:auto!important;bottom:calc(50% - min(29vh,320px) - 34px)!important}
  .packOpeningClose{top:calc(6px + var(--safe-top))!important;right:max(4px,var(--safe-right))!important}
  .packOpeningMeta{display:none!important}
  #mps-showcase-modal [style*="ap-card-sweep-continuous"]{background-size:260% 260%!important;animation:ap-card-sweep-continuous 5.4s linear infinite!important}
  #adventure-team-panel .adv-team-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;width:100%!important;margin:0!important;padding:2px!important;gap:10px!important}
  #adventure-team-panel .adv-team-slots>*{min-width:0!important;min-height:154px!important;flex:none!important}
  #adventure-team-panel .adv-team-slots>*:nth-child(n+5){display:none!important}
  #adventure-map-scroll{touch-action:pan-y!important;overscroll-behavior-x:contain!important}
  #adventure-map-scroll+ .adv-mobile-top-nav{pointer-events:auto!important}
  #adventure-map .adv-boss-label{transform:translate(-50%,-138%)!important}
  #mps-inv>h2,#mps-inv>p{text-align:center!important}
  #mps-inv>div[style*="height:1px"]{margin-left:auto!important;margin-right:auto!important}
  #mps-header .mps-music-controls{justify-self:center!important;margin-left:0!important}
  .packSummaryWrap>div:first-child>div,.packSummaryWrap>div:first-child>h2{color:#fff!important}
  #mps-inv .mps-inv-rule{margin-left:auto!important;margin-right:auto!important}
  #adventure-map .adv-boss-label{transform:translate(-50%,-102%)!important}
  #adventure-team-panel .adv-team-slots>*>div:first-child{background-size:cover!important;background-position:center 20%!important}
  #adventure-team-panel .adv-slot-stats{display:none!important}
  #adventure-team-panel .adv-slot-name{font-size:15px!important;line-height:1.1!important;margin:0 0 7px!important}
  #adventure-team-panel .adv-team-slots button[style*="font-size:8px"]{width:auto!important;max-width:82px!important;padding:3px 7px!important}
  .mps-combat-stage .mps-active-card>div:nth-child(3){display:none!important}
  .mps-combat-stage .mps-active-card>div:last-child{left:0!important;right:0!important;bottom:0!important;padding:0 0 3px!important;box-sizing:border-box!important;background:transparent!important}
  .mps-combat-stage .mps-active-card>div:last-child>div:nth-child(2){width:100%!important;box-sizing:border-box!important;border-radius:0!important}
  #adventure-map button>span:first-of-type{color:#08080b!important;text-shadow:none!important}
}

/* AVENTURE > ÉQUIPE — portrait seulement. */
@media (max-width:768px) and (orientation:portrait){
  /* Le leader est l'emplacement 1 : pas de gros bandeau d'action sur les cartes. */
  #adventure-team-panel .adv-slot-leader{display:none!important}
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader{display:grid!important;place-items:center!important;position:absolute!important;left:7px!important;bottom:7px!important;z-index:5!important;width:25px!important;height:25px!important;min-width:25px!important;padding:0!important;border:1px solid #ffe18a99!important;border-radius:50%!important;background:#171108e8!important;color:transparent!important;font-size:0!important;box-shadow:0 2px 8px #000b!important}
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader::after{content:'👑';font-size:14px;line-height:1;color:#ffe18a}
  #adventure-team-panel .adv-team-slot .adv-slot-name{margin:0!important;font-size:16px!important;line-height:1.08!important}
  #adventure-team-panel .adv-team-slot .adv-slot-meta{margin:5px 0 0!important;font-size:11px!important;font-weight:800!important;line-height:1.15!important;color:#f0f0f6!important}
  #adventure-team-panel .adv-team-slots>div>div:nth-child(3){padding:42px 8px 11px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;min-height:0!important}

  /* La liste complète sort de l'écran principal ; le détail reste dans le popup. */
  #adventure-team-panel .adv-synergy-see{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:42px!important;height:24px!important;padding:0 8px!important;border:1px solid #72e2ff77!important;border-radius:999px!important;background:#72e2ff14!important;color:#9cecff!important;font:inherit!important;font-size:8px!important;font-weight:900!important;letter-spacing:.08em!important}
  #adventure-team-panel .adv-synergy-summary{display:none!important}
  #adventure-team-panel .adv-team-bonuses{margin-bottom:8px!important;gap:8px!important}
  #adventure-team-panel .adv-team-bonuses>div{padding:10px 12px!important}
  #adventure-team-panel .adv-team-bonuses>div:last-child{gap:8px!important}
  #adventure-team-panel .adv-team-bonuses>div:last-child button{padding:11px 16px!important}
  #adventure-team-panel .adv-synergy-modal{position:fixed!important;inset:0!important;z-index:80!important;display:grid!important;place-items:center!important;padding:18px!important;background:#030307aa!important;backdrop-filter:blur(5px)!important}
  #adventure-team-panel .adv-synergy-dialog{width:min(100%,360px)!important;max-height:min(72dvh,560px)!important;overflow:auto!important;box-sizing:border-box!important;border:1px solid #72e2ff55!important;border-radius:16px!important;background:linear-gradient(160deg,#151522,#09090f)!important;box-shadow:0 24px 60px #000d!important;color:#f5f6fb!important}
  #adventure-team-panel .adv-synergy-dialog-head{position:sticky!important;top:0!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px!important;border-bottom:1px solid #ffffff14!important;background:#12121beF!important}
  #adventure-team-panel .adv-synergy-dialog-head>div>div{font-family:Barlow Condensed,sans-serif!important;font-size:20px!important;font-weight:900!important;letter-spacing:.05em!important}
  #adventure-team-panel .adv-synergy-dialog-head span{font-size:10px!important;color:#87e6ff!important}
  #adventure-team-panel .adv-synergy-dialog-head button{width:29px!important;height:29px!important;border:1px solid #ffffff2d!important;border-radius:50%!important;background:#08080de0!important;color:#fff!important;font:inherit!important;font-size:20px!important;line-height:1!important}
  #adventure-team-panel .adv-synergy-list{display:flex!important;flex-direction:column!important;gap:8px!important;padding:12px!important}
  #adventure-team-panel .adv-synergy-list article{padding:10px!important;border:1px solid #ffffff13!important;border-radius:10px!important;background:#ffffff08!important}
  #adventure-team-panel .adv-synergy-list article>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
  #adventure-team-panel .adv-synergy-list b{font-size:13px!important;color:#fff!important}
  #adventure-team-panel .adv-synergy-list p{margin:6px 0 0!important;font-size:11px!important;line-height:1.35!important;color:#bfc1cf!important}
  #adventure-team-panel .adv-synergy-list .adv-synergy-effect{color:#8fe8ff!important;font-weight:800!important}
  #adventure-team-panel .adv-synergy-empty{margin:18px!important;text-align:center!important;color:#a3a5b2!important}

  /* Sous-fenêtre de sélection : croix rattachée au titre, pagination fixe. */
  #adventure-team-panel.picking-mode .adv-team-roster-title{display:grid!important;grid-template-columns:minmax(0,1fr) 32px!important;align-items:start!important;gap:8px!important;position:sticky!important;top:0!important;z-index:8!important;padding:8px 0!important;background:#101017!important}
  #adventure-team-panel.picking-mode .adv-team-roster-title input{grid-column:1/-1!important;width:100%!important;min-width:0!important;box-sizing:border-box!important}
  #adventure-team-panel.picking-mode .adv-roster-close{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;padding:0!important;border:1px solid #ffffff35!important;border-radius:50%!important;background:#0a0a10!important;color:#fff!important;font:inherit!important;font-size:21px!important;line-height:1!important}
  #adventure-team-panel.picking-mode .adv-roster-actions{position:absolute!important;right:7px!important;bottom:7px!important;z-index:5!important;display:flex!important;align-items:center!important;gap:5px!important}
  #adventure-team-panel.picking-mode .adv-roster-actions img{position:static!important;width:23px!important;height:23px!important;object-fit:contain!important}
  #adventure-team-panel.picking-mode .adv-roster-actions span{position:static!important;display:inline-flex!important;align-items:center!important;min-height:23px!important;box-sizing:border-box!important}
  #adventure-team-panel.picking-mode .adv-team-pagination{position:sticky!important;bottom:0!important;z-index:8!important;margin:8px -4px 0!important;padding:8px 4px calc(8px + var(--safe-bottom))!important;flex-wrap:nowrap!important;overflow:hidden!important;background:linear-gradient(0deg,#101017 80%,transparent)!important}
  #adventure-team-panel.picking-mode .adv-team-pagination>span{display:none!important}
  #adventure-team-panel.picking-mode .adv-team-pagination button{flex:0 0 34px!important;min-width:34px!important}
}

/* Finition mobile : équipe aventure + combat. Ce bloc arrive volontairement en dernier afin
   d'être l'unique finition portrait de ces composants, sans affecter desktop/landscape. */
@media (max-width:768px) and (orientation:portrait){
  /* Position 1 = leader : une petite couronne graphique, intégrée au bas de l'art. */
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader{
    left:8px!important;bottom:8px!important;width:28px!important;height:22px!important;min-width:0!important;
    border:1px solid #e7bd4d99!important;border-radius:6px!important;background:linear-gradient(145deg,#211a0aee,#0c0a08ee)!important;
    box-shadow:0 3px 10px #000b,inset 0 1px #fff2!important;
  }
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader::after{
    content:'♛'!important;font-family:Georgia,serif!important;font-size:17px!important;font-weight:700!important;
    line-height:1!important;color:#ffd765!important;text-shadow:0 1px 3px #000!important;
  }

  /* Popup de synergies : action lisible, contenu isolé et défilable. */
  #adventure-team-panel .adv-synergy-see{
    min-width:48px!important;height:26px!important;padding:0 10px!important;border-color:#78ddff99!important;
    background:linear-gradient(135deg,#4ecbf522,#6f8dff16)!important;color:#c1f4ff!important;box-shadow:inset 0 1px #ffffff18!important;
  }
  #adventure-team-panel .adv-synergy-dialog{width:min(calc(100vw - 30px),380px)!important;max-height:min(74dvh,580px)!important;border-radius:18px!important}
  #adventure-team-panel .adv-synergy-dialog-head{padding:15px 16px!important;background:linear-gradient(180deg,#191925,#111119)!important}
  #adventure-team-panel .adv-synergy-dialog-head button{border-radius:8px!important;width:32px!important;height:32px!important}
  #adventure-team-panel .adv-synergy-list{padding:12px 14px 16px!important;gap:9px!important}
  #adventure-team-panel .adv-synergy-list article{padding:12px!important;border-radius:12px!important;background:linear-gradient(135deg,#ffffff0c,#5fcffc08)!important}

  /* Sous-fenêtre : le header principal ne doit jamais survivre derrière celui de la sélection. */
  #adventure-team-panel.picking-mode>.cbHead{display:none!important}
  #adventure-team-panel.picking-mode .adv-team-roster-title{
    grid-template-columns:minmax(0,1fr) 38px!important;align-items:center!important;gap:10px!important;
    margin:0 -2px 10px!important;padding:10px 2px 11px!important;border-bottom:1px solid #ffffff18!important;
    background:linear-gradient(180deg,#101017 84%,#101017e8)!important;
  }
  #adventure-team-panel.picking-mode .adv-team-roster-title>div>div:first-child{font-size:20px!important;line-height:1.05!important}
  #adventure-team-panel.picking-mode .adv-team-roster-title>div>div:last-child{margin-top:3px!important;font-size:10px!important;line-height:1.25!important}
  #adventure-team-panel.picking-mode .adv-roster-close{
    width:36px!important;height:36px!important;border-radius:10px!important;border-color:#ffffff28!important;
    background:#1a1b25!important;box-shadow:inset 0 1px #ffffff16!important;font-size:24px!important;color:#f5f6fa!important;
  }
  #adventure-team-panel.picking-mode .adv-team-roster-title input{height:38px!important;padding:0 12px!important;border-radius:9px!important}

  /* Boss : fond local, compact et lisible, sans déplacer le repère de la map. */
  #adventure-map .adv-boss-label{
    display:inline-block!important;width:auto!important;min-width:76px!important;box-sizing:border-box!important;
    padding:5px 9px!important;border:1px solid #ffffff2b!important;border-radius:7px!important;background:#05060bd1!important;
    color:#fff0f1!important;box-shadow:0 3px 10px #000a!important;line-height:1.15!important;
  }

  /* Plateau : chaque carte garde son cadre naturel, son art et ses informations dans le même clip. */
  .mps-combat-stage .cbArenaCol{padding:2px 12px 102px!important}
  .mps-combat-stage .cbArenaCenter{grid-template-rows:minmax(0,1fr) 24px minmax(0,1fr)!important;gap:0!important;transform:translateY(8px)!important}
  .mps-combat-stage .mps-stage-side{justify-content:space-evenly!important}
  .mps-combat-stage .mps-stage-side.enemy{padding:5px 0 7px!important}
  .mps-combat-stage .mps-stage-side.player{padding:7px 0 4px!important}
  .mps-combat-stage .mps-bench-row{min-height:0!important;gap:9px!important}
  .mps-combat-stage .mps-bench-card{width:min(calc((100vw - 56px)/3),108px)!important;height:min(calc((100vw - 56px)/2.48),138px)!important}
  .mps-combat-stage .mps-active-card{
    width:min(198px,49vw,34vh)!important;aspect-ratio:.72!important;overflow:hidden!important;isolation:isolate!important;
    border:1px solid #ffffff55!important;border-radius:13px!important;background:#0b0c12!important;
    box-shadow:0 14px 28px #000c,0 0 24px -14px #ffffff80!important;
  }
  .mps-combat-stage .mps-active-card.enemy,.mps-combat-stage .mps-active-card.player{margin:0!important}
  .mps-combat-stage .mps-active-card>div:first-child{inset:0!important;border-radius:inherit!important;overflow:hidden!important;clip-path:inset(0 round 13px)!important}
  .mps-combat-stage .mps-active-card>div:nth-child(2){inset:0!important;border-radius:inherit!important;background-size:contain!important;background-position:center!important}
  .mps-combat-stage .mps-active-card>div:nth-child(3){left:0!important;right:0!important;bottom:0!important;border-radius:0!important}
  .mps-combat-stage .mps-active-card>div:last-child{
    left:7px!important;right:7px!important;bottom:6px!important;padding:5px 6px 4px!important;box-sizing:border-box!important;
    border-radius:7px!important;background:linear-gradient(180deg,#05060a18,#05060ad9 38%)!important;overflow:hidden!important;
  }
  .mps-combat-stage .mps-active-card .cbUnitCardName{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important;line-height:1.1!important}
  .mps-combat-stage .mps-active-card>div:last-child>div:nth-child(2){width:100%!important;height:5px!important;margin-top:3px!important;box-sizing:border-box!important;overflow:hidden!important;border-radius:999px!important}
  .mps-combat-stage .mps-active-card>div:last-child>div:nth-child(2)>div{max-width:100%!important;height:100%!important;border-radius:inherit!important}
  .mps-combat-stage .mps-active-hp{margin-top:2px!important;font-size:8px!important;line-height:1!important}

  /* Les WebP ne sont plus montés sur mobile : feedback léger, manuel et rattaché à l'action. */
  .mps-combat-stage .mps-battle-vfx,.mps-combat-stage .mps-impact-vfx{display:none!important}
  .mps-combat-stage .mps-battle-action-fx{
    position:absolute!important;z-index:30!important;left:50%!important;top:50%!important;width:42vw!important;height:42vw!important;max-width:190px!important;max-height:190px!important;
    pointer-events:none!important;transform:translate(-50%,-50%)!important;animation:var(--mps-fx-key) .68s cubic-bezier(.18,.76,.24,1) both!important;
  }
  .mps-combat-stage .mps-battle-action-fx i{position:absolute!important;inset:18%!important;border:3px solid #ffd772!important;border-radius:50%!important;box-shadow:0 0 17px #ff8a5599!important;transform:scale(.35)!important}
  .mps-combat-stage .mps-battle-action-fx i:nth-child(2){inset:33%!important;border-width:7px!important;border-color:#fff4d5!important;box-shadow:0 0 14px #ff563faa!important}
  .mps-combat-stage .mps-battle-action-fx strong{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;color:#fff!important;font-family:Barlow Condensed,sans-serif!important;font-size:17px!important;font-weight:900!important;letter-spacing:.08em!important;text-shadow:0 2px 8px #000!important;white-space:nowrap!important}
  .mps-combat-stage .mps-battle-action-fx.heal i{border-color:#77efb1!important;box-shadow:0 0 20px #35d890aa!important}.mps-combat-stage .mps-battle-action-fx.heal i:nth-child(2){border-color:#e4fff0!important}.mps-combat-stage .mps-battle-action-fx.heal strong{color:#c8ffdf!important}
  .mps-combat-stage .mps-battle-action-fx.buff i{border-color:#7eeaff!important;box-shadow:0 0 20px #4d9dffaa!important}.mps-combat-stage .mps-battle-action-fx.buff i:nth-child(2){border-color:#e4f8ff!important}.mps-combat-stage .mps-battle-action-fx.buff strong{color:#c8f6ff!important}
  .mps-combat-stage .mps-battle-action-fx.dot i{border-color:#df85ff!important;box-shadow:0 0 20px #9b43dbaa!important}.mps-combat-stage .mps-battle-action-fx.dot i:nth-child(2){border-color:#f2cbff!important}.mps-combat-stage .mps-battle-action-fx.dot strong{color:#f0c8ff!important}.mps-combat-stage .mps-battle-action-fx.dot::after{content:'☠';position:absolute;left:50%;top:50%;transform:translate(-50%,-125%);font-size:30px;color:#edb6ff;text-shadow:0 0 14px #9b43db}
}

@keyframes mps-manual-fx-0{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}55%{opacity:1;transform:translate(-50%,-50%) scale(.94)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}}
@keyframes mps-manual-fx-1{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}55%{opacity:1;transform:translate(-50%,-50%) scale(.94)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}}

/* Ajustements de composition portrait : les deux leaders se font face au centre, les bancs
   encadrent la scène et utilisent les extrémités de l'écran plutôt que le centre. */
@media (max-width:768px) and (orientation:portrait){
  /* Combat : banc ennemi au sommet, leader ennemi face au leader allié, banc allié au bas. */
  .mps-combat-stage .cbArenaCol{padding:0 12px 96px!important}
  .mps-combat-stage .cbArenaCenter{grid-template-rows:minmax(0,1fr) 28px minmax(0,1fr)!important;transform:none!important}
  /* .mps-stage-side n'avait pas de flex explicite (défaut 0 1 auto = épouse son contenu) —
     .cbArenaCenter est display:flex!important (voir plus haut dans la cascade, PAS un grid
     malgré grid-template-rows encore présent plus bas, resté sans effet), donc chaque camp
     ne prenait que la hauteur de son banc + carte active EN L'ÉTAT AVANT ce correctif, sans
     jamais se partager la hauteur réelle disponible. flex:1 lui donne une vraie part de
     .cbArenaCenter, ce qui permet ensuite à .mps-active-card (flex:1 à l'intérieur) de
     calculer sa taille sur une base réelle au lieu de s'effondrer à 0. */
  .mps-combat-stage .mps-stage-side{justify-content:space-between!important;flex:1!important;min-height:0!important}
  .mps-combat-stage .mps-stage-side.enemy{flex-direction:column!important;padding:4px 0 6px!important}
  .mps-combat-stage .mps-stage-side.player{padding:6px 0 2px!important}
  .mps-combat-stage .mps-bench-row{flex:0 0 auto!important;gap:8px!important}
  /* Les cartes de banc avaient une hauteur plafonnée à 23vw (~86px) pour une largeur de
     ~104px — un ratio ~1.2 (plus large que haut) qui écrase des portraits de carte conçus
     pour un ratio vertical (~0.72, même valeur que .mps-active-card juste en dessous).
     aspect-ratio remplace le plafond de hauteur fixe : proportions naturelles quelle que
     soit la largeur réellement disponible, cohérent avec les cartes actives. */
  .mps-combat-stage .mps-bench-card{width:min(calc((100vw - 58px)/3),104px)!important;aspect-ratio:.72!important;height:auto!important}
  .mps-combat-stage .mps-bench-card>div:first-child{background-size:contain!important}
  /* Fond du dépassement vertical réel-iPhone : la carte active avait une hauteur fixée en
     dvh + plafond px (min(29dvh,244px)), calculée indépendamment du banc + ligne VS + du
     padding au-dessus/dessous. Sur un iPhone 14 Pro Max émulé (932px de haut) la somme
     tombait juste ; sur un vrai appareil (chrome Safari dynamique qui réduit la hauteur
     visible réelle, ou un ratio d'écran différent) la somme dépassait 100dvh → la page
     devait scroller pour atteindre le bas. Remplacé par flex:1 + min-height:0 : la carte
     active prend uniquement CE QUI RESTE dans sa ligne de grille après le banc (déjà
     dimensionné par aspect-ratio) et la ligne VS — elle ne peut donc jamais, par
     construction, dépasser l'espace réellement disponible, quel que soit l'écran.
     max-height reste comme PLAFOND esthétique sur les écrans très hauts, jamais comme
     hauteur forcée. */
  .mps-combat-stage .mps-active-card{
    flex:1 1 0!important;min-height:0!important;width:auto!important;max-height:min(32dvh,270px)!important;aspect-ratio:.72!important;
    border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;
  }
  .mps-combat-stage .mps-active-card.player{max-height:min(34dvh,286px)!important}
  .mps-combat-stage .mps-active-card>div:first-child{border-radius:9px!important;clip-path:inset(0 round 9px)!important}
  .mps-combat-stage .mps-active-card>div:nth-child(2){border-radius:9px!important}
  .mps-combat-stage .mps-active-card>div:last-child{left:5px!important;right:5px!important;bottom:5px!important;padding:4px 5px 3px!important;border-radius:6px!important}
  .mps-combat-stage .mps-active-card .cbUnitCardName{font-size:11px!important}
  .mps-combat-stage .cbVsRow{height:clamp(18px,3dvh,28px)!important;align-self:center!important}

  /* Équipe : couronne sans grosse pastille, raccordée au bas de l'art sans gêner les métadonnées. */
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader{
    left:7px!important;bottom:7px!important;width:17px!important;height:17px!important;padding:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader::after{
    content:'♛'!important;font-size:16px!important;color:#ffda67!important;text-shadow:0 1px 3px #000,0 0 5px #9a6819!important;
  }

  /* Titres et actions : une même ligne visuelle centrée sur les blocs équipe. */
  #adventure-team-panel .adv-team-bonuses>div:first-child>div:first-child,
  #adventure-team-panel .adv-team-bonuses>div:nth-child(2)>div:first-child>div:first-child{
    text-align:center!important;
  }
  #adventure-team-panel .adv-team-bonuses>div:first-child>div:nth-child(4){justify-content:center!important;gap:7px!important}
  #adventure-team-panel .adv-team-bonuses>div:first-child>div:nth-child(4) .adv-synergy-see{order:-1!important;margin:0!important}
  #adventure-team-panel .adv-team-bonuses>div:nth-child(2){align-items:center!important;text-align:center!important}

  /* La fenêtre de collection garde un titre réellement centré ; la croix est son compagnon immédiat. */
  #adventure-team-panel.picking-mode .adv-team-roster-title{
    display:block!important;position:sticky!important;text-align:center!important;padding:10px 2px 12px!important;
  }
  #adventure-team-panel.picking-mode .adv-team-roster-title>div:first-child{padding:0 38px!important;text-align:center!important}
  #adventure-team-panel.picking-mode .adv-team-roster-title>div>div:first-child{font-size:20px!important;text-align:center!important}
  #adventure-team-panel.picking-mode .adv-team-roster-title>div>div:last-child{text-align:center!important}
  #adventure-team-panel.picking-mode .adv-roster-close{
    /* La fondation tactile (@media (hover:none) and (pointer:coarse) { button{min-width/height:44px} },
       plus haut dans ce fichier) impose un plancher de 44px à TOUS les boutons — width/height:28px!important
       ne suffit pas à le contourner (min-width/min-height restent séparés de width/height et gagnent quand
       ils sont plus grands). Le bouton rendait donc réellement 44px alors que le padding du titre
       (0 38px, règle suivante) et ce `left` ne prévoyaient de la place que pour 28px : la croix débordait
       sur le texte "TES CARTES DE PERSONNAGE". min-width/min-height ajoutés ici pour rendre le bouton
       réellement compact comme prévu par ce calc de centrage. */
    position:absolute!important;left:max(7px,calc(50% - 168px))!important;top:10px!important;width:28px!important;height:28px!important;
    min-width:28px!important;min-height:28px!important;
    border-radius:8px!important;font-size:21px!important;
  }
  #adventure-team-panel.picking-mode .adv-team-roster-title input{display:block!important;width:100%!important;margin-top:10px!important}
  #adventure-team-panel.picking-mode .adv-team-pagination{width:100%!important;justify-content:center!important;gap:6px!important;margin-left:0!important;margin-right:0!important}

  /* La légende rose n'est plus nécessaire : le nom et le cartouche du boss portent déjà l'information. */
  #adventure-map .adv-map-boss-legend{display:none!important}
}

/* Combat portrait : contrôles compacts au bas, plateau sans chrome supérieur. */
@media (max-width:768px) and (orientation:portrait){
  /* Verrou anti-scroll de page : même avec .cbBody en overflow:hidden, un vrai Safari iOS
     peut encore laisser le DOCUMENT défiler si le contenu à l'intérieur d'un
     position:fixed dépasse la hauteur visible réelle (bug connu, invisible en émulation
     devtools). Verrouille le document lui-même tant que le combat est ouvert — garantie
     "aucun scroll de page" indépendante du calcul de hauteur ci-dessous. */
  body:has(.mps-combat-stage){overflow:hidden!important;position:fixed!important;inset:0!important;width:100%!important}
  .mps-combat-stage>.cbHead{display:none!important}
  .mps-combat-stage .cbBody{height:100dvh!important}
  .mps-combat-stage .cbArenaCol{padding:clamp(16px,4dvh,34px) 12px 82px!important}
  .mps-combat-stage .cbArenaCenter{transform:translateY(clamp(10px,2.5dvh,22px))!important}
  .mps-combat-stage .cbTeamCol{max-height:min(9dvh,62px)!important;padding:5px 8px calc(5px + var(--safe-bottom))!important}
  .mps-combat-stage .cbIconRow{gap:6px!important}
  .mps-combat-stage .mps-mobile-combat-close{display:grid!important;border-color:#ff647a66!important;background:#ff496c18!important;color:#ffc3cf!important}

  /* Émissions visuelles : trajectoire depuis l'attaquant, impact sur la cible, aucun label. */
  .mps-combat-stage .mps-battle-action-fx{width:92px!important;height:92px!important;max-width:none!important;max-height:none!important;z-index:28!important;overflow:visible!important}
  .mps-combat-stage .mps-battle-action-fx.from-player{top:72%!important;animation:var(--mps-fx-key) .58s cubic-bezier(.18,.78,.24,1) both!important}
  .mps-combat-stage .mps-battle-action-fx.from-enemy{top:28%!important;animation:var(--mps-fx-key) .58s cubic-bezier(.18,.78,.24,1) both!important}
  .mps-combat-stage .mps-battle-action-fx i,.mps-combat-stage .mps-battle-action-fx b{display:block!important;position:absolute!important;pointer-events:none!important}
  .mps-combat-stage .mps-battle-action-fx strong{display:none!important}
  .mps-combat-stage .mps-battle-action-fx.slash i:first-child{inset:39px 4px!important;border:0!important;border-top:5px solid #ffe6b0!important;border-radius:100%!important;box-shadow:0 0 8px #ff573bbb!important;transform:rotate(-26deg) scaleX(.25)!important}
  .mps-combat-stage .mps-battle-action-fx.slash i:nth-child(2){inset:47px 13px!important;border:0!important;border-top:3px solid #ff6049!important;border-radius:100%!important;box-shadow:0 0 8px #ff6049cc!important;transform:rotate(24deg) scaleX(.2)!important}
  .mps-combat-stage .mps-battle-action-fx.magic i:first-child,.mps-combat-stage .mps-battle-action-fx.buff i:first-child,.mps-combat-stage .mps-battle-action-fx.heal i:first-child,.mps-combat-stage .mps-battle-action-fx.debuff i:first-child{inset:24px!important;border:3px solid #a78bfa!important;border-radius:50%!important;background:#7c3aed33!important;box-shadow:0 0 18px #8b5cf6cc!important;transform:scale(.25)!important}
  .mps-combat-stage .mps-battle-action-fx.magic i:nth-child(2){inset:39px!important;border:0!important;background:#f0e5ff!important;border-radius:50%!important;box-shadow:0 0 15px 6px #8b5cf6!important}
  .mps-combat-stage .mps-battle-action-fx.projectile b{left:37px!important;top:37px!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#7ee9ff!important;box-shadow:0 0 8px 4px #38bdf8,0 0 22px 8px #8b5cf6aa!important}
  .mps-combat-stage .mps-battle-action-fx.heal i:first-child{border-color:#6ee7a2!important;background:#38d88725!important;box-shadow:0 0 18px #38d887cc!important}.mps-combat-stage .mps-battle-action-fx.heal i:nth-child(2){inset:39px!important;border:0!important;background:#dcffec!important;border-radius:50%!important;box-shadow:0 0 14px 5px #43d990!important}
  .mps-combat-stage .mps-battle-action-fx.buff i:first-child{border-color:#7eeaff!important;background:#38bdf825!important;box-shadow:0 0 18px #38bdf8cc!important}.mps-combat-stage .mps-battle-action-fx.buff i:nth-child(2){inset:39px!important;border:2px solid #d9f8ff!important;border-radius:50%!important}
  .mps-combat-stage .mps-battle-action-fx.debuff i:first-child{border-color:#e29bff!important;background:#b44bdc28!important;box-shadow:0 0 18px #b44bdccc!important}.mps-combat-stage .mps-battle-action-fx.debuff i:nth-child(2){inset:36px!important;border:0!important;background:#edc6ff!important;border-radius:50%!important;box-shadow:0 0 13px 5px #b44bdc!important}
  .mps-combat-stage .mps-battle-action-fx.critical{filter:drop-shadow(0 0 9px #ffd15f)!important}.mps-combat-stage .mps-battle-action-fx.critical::after{content:''!important;position:absolute!important;inset:8px!important;border:2px solid #ffd76a!important;border-radius:50%!important;animation:mps-critical-ring .58s ease-out both!important}
  .mps-combat-stage .mps-active-card.is-action-source::before{content:''!important;position:absolute!important;z-index:7!important;inset:-4px!important;border:2px solid #fff0b5!important;border-radius:inherit!important;box-shadow:0 0 18px #ff9d4f!important;animation:mps-source-charge .2s ease-out both!important;pointer-events:none!important}
  .mps-combat-stage .mps-active-card.is-action-target::after{content:''!important;position:absolute!important;z-index:9!important;inset:0!important;background:#fff8e2!important;mix-blend-mode:screen!important;pointer-events:none!important;animation:mps-card-hit .35s ease-out both!important}
}
@keyframes mps-cast-up-0{0%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) translateY(-14px) scale(.8)}66%{opacity:1;transform:translate(-50%,-50%) translateY(-270px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-295px) scale(1.38)}}
@keyframes mps-cast-up-1{0%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) translateY(-14px) scale(.8)}66%{opacity:1;transform:translate(-50%,-50%) translateY(-270px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-295px) scale(1.38)}}

/* Combat portrait : les leaders se font face au centre, à gauche et à droite du VS.
   Les cartes de banc restent en haut et en bas ; l'espace central libéré agrandit les leaders. */
@media (max-width:768px) and (orientation:portrait){
  .mps-combat-stage .cbArenaCenter{display:block!important;position:relative!important;min-height:0!important}
  .mps-combat-stage .mps-stage-side{display:contents!important}
  .mps-combat-stage .mps-stage-side.enemy .mps-bench-row{position:absolute!important;top:4px!important;left:0!important;right:0!important}
  .mps-combat-stage .mps-stage-side.player .mps-bench-row{position:absolute!important;bottom:4px!important;left:0!important;right:0!important}
  .mps-combat-stage .mps-active-card.enemy,.mps-combat-stage .mps-active-card.player{position:absolute!important;top:50%!important;margin:0!important;transform:translateY(-50%)!important;width:min(43vw,250px)!important;height:auto!important;max-height:min(46dvh,390px)!important;aspect-ratio:.72!important;z-index:3!important}
  .mps-combat-stage .mps-active-card.enemy{left:0!important}
  .mps-combat-stage .mps-active-card.player{right:0!important}
  .mps-combat-stage .cbVsRow{position:absolute!important;z-index:4!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:auto!important;height:auto!important}
}

/* Collection mobile : la monnaie Éclats n'occupe plus le HUD global. Elle apparaît
   uniquement dans Collection, sur une ligne dédiée sous les pièces d'or. */
@media (max-width:768px){
  .adv-map-next-world{display:none!important}
  #mps-header .mps-eclats-pill{display:none!important}
  #mps-root:has(#mps-collection) #mps-header .mps-eclats-pill,#mps-root:has(#mps-shop) #mps-header .mps-eclats-pill,#mps-root:has(#mps-inv) #mps-header .mps-eclats-pill{display:flex!important;grid-column:2!important;grid-row:2!important;width:100%!important;height:34px!important;min-height:34px!important;justify-content:center!important;padding:0 8px!important;gap:7px!important}
  #mps-root:has(#mps-collection) #mps-header .mps-music-controls,#mps-root:has(#mps-shop) #mps-header .mps-music-controls,#mps-root:has(#mps-inv) #mps-header .mps-music-controls{grid-row:3!important}
  .mps-eclats-modal-head{position:relative!important;flex-direction:column!important;align-items:center!important;text-align:center!important;padding:20px 18px 16px!important}
  .mps-eclats-modal-head>div{width:100%!important}
  .mps-eclats-close{position:static!important;margin:2px auto 0!important;display:grid!important;place-items:center!important}
}

/* Corrections mobiles ciblées : grande zone tactile indépendante du SVG, et deux
   boosters lisibles par ligne dans la boutique sans modifier la grille desktop. */
@media (max-width:768px){
  .mps-hamburger{position:relative!important;z-index:80!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;margin:4px 0 0 3px!important;padding:10px!important;touch-action:manipulation!important;pointer-events:auto!important}
  .mps-hamburger svg{pointer-events:none!important}
  #mps-shop .mps-shop-offers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #mps-shop .mps-shop-offers article{min-width:0!important}
  #mps-shop .mps-shop-offers article > div:last-child{gap:8px!important;padding:11px!important}
  #mps-shop .mps-shop-offers article p{font-size:9px!important;line-height:1.35!important}
  #mps-shop .mps-shop-offers article [style*="font-size:16px"]{font-size:12px!important}
  #mps-shop .mps-shop-offers article [style*="font-size:13px"]{font-size:10px!important}
  /* Bandeau de sélection de quantité (−/×N/+) : en 2 colonnes à 768px, la carte
     n'a pas la place pour son prix (réduit ci-dessus à 12px) ET ce bandeau à sa
     taille desktop (27px/28px par bouton) sur la même ligne — débordait du cadre
     de la carte. Réduit proportionnellement, jamais sous une cible tactile de 24px. */
  #mps-shop .mps-shop-offers article .mps-shop-qty-btn{width:22px!important;height:24px!important;font-size:12px!important}
  #mps-shop .mps-shop-offers article .mps-shop-qty-label{min-width:22px!important;font-size:9.5px!important}
  .riftCard .portrait,.mps-combat-stage .mps-active-card>div:nth-child(2),.mps-combat-stage .mps-bench-card>div:first-child{filter:none!important;opacity:1!important}
}

@media (min-width:769px){
  .riftShopList{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;align-items:stretch}
  .riftShopItemWrap{min-width:0!important;min-height:82px!important;justify-content:center!important;overflow:hidden!important}
  .riftShopItemWrap .desktop-shop-info{gap:10px!important}
  .riftShopItemWrap.mobile-inspect-open{z-index:12!important;box-shadow:0 0 0 1px #c86bff88,0 16px 38px #000a!important}
  .riftShopItemWrap.mobile-inspect-open .desktop-shop-info{align-items:flex-start!important;flex-direction:column!important}
  .riftShopItemWrap.mobile-inspect-open .desktop-shop-info:after{content:'Cliquez à nouveau pour fermer';font-size:9px;color:#a99abe;letter-spacing:.06em}
  .desktop-rift-shop-detail{width:100%;display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid #ffffff14;font-size:11px;color:#c8bce0}
  .desktop-rift-shop-detail p{margin:0;flex:1;line-height:1.35}
  .desktop-rift-shop-detail button{border:1px solid #58db8e88;border-radius:7px;padding:7px 9px;background:#58db8e1c;color:#c8ffdf;font:inherit;font-size:9px;font-weight:900;cursor:pointer;white-space:nowrap}
  .desktop-rift-shop-detail button.close{border-color:#ffffff22;background:transparent;color:#b9b5c4}
  .desktop-rift-relic-detail{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:22px;border:1px solid #c86bff99;border-radius:14px;background:linear-gradient(160deg,#160b24fc,#08070dfc);box-shadow:0 22px 60px #000d;text-align:center;color:#fff}.desktop-rift-relic-detail img{width:62px;height:62px;object-fit:contain}.desktop-rift-relic-detail strong{font-size:17px}.desktop-rift-relic-detail p{margin:0;color:#c8bce0;font-size:12px;line-height:1.45}.desktop-rift-relic-detail button{border:1px solid #c86bff88;border-radius:8px;padding:8px 14px;background:#c86bff20;color:#f1e9ff;font:inherit;font-size:10px;font-weight:900;cursor:pointer}.desktop-rift-relic-detail button.close{position:absolute;top:9px;right:9px;width:28px;height:28px;padding:0;border-color:#ffffff33;background:#08080d;color:#fff;font-size:18px}
  .riftSecretChoices{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:900px!important}
}

@media (max-width:768px){.desktop-rift-shop-detail{display:none!important}}

/* Composition de Faille : les filtres restent toujours accessibles pendant le défilement
   de la liste de cartes, au lieu de disparaître au-dessus de la zone visible. */
@media (max-width:1024px){
  .mps-rift-composition .riftCompoFilterBar{position:sticky!important;top:0!important;z-index:12!important}
  .riftInventoryTabs{display:flex;gap:8px;margin:-6px 0 16px!important;justify-content:center}
  .riftInventoryTab{flex:1;max-width:150px;padding:9px 8px;border:1px solid #3a2c4877;border-radius:8px;background:#0a0710;color:#a79bb8;font:inherit;font-size:10px;font-weight:900;letter-spacing:.07em;cursor:pointer}
  .riftInventoryTab.active{border-color:#c86bff99;background:#c86bff24;color:#f1e9ff;box-shadow:0 0 14px #7c2cff38}
  .mps-global-toast{box-sizing:border-box!important;width:max-content!important;max-width:calc(100vw - 28px)!important;white-space:normal!important;text-align:center!important;line-height:1.35!important}
}
@keyframes mps-cast-down-0{0%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) translateY(14px) scale(.8)}66%{opacity:1;transform:translate(-50%,-50%) translateY(270px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) translateY(295px) scale(1.38)}}
@keyframes mps-cast-down-1{0%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) translateY(14px) scale(.8)}66%{opacity:1;transform:translate(-50%,-50%) translateY(270px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) translateY(295px) scale(1.38)}}
@keyframes mps-source-charge{0%{opacity:0;transform:scale(.93)}100%{opacity:1;transform:scale(1)}}
@keyframes mps-card-hit{0%,100%{opacity:0}28%{opacity:.72}54%{opacity:.16}72%{opacity:.46}}
@keyframes mps-critical-ring{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(1.35)}}

@media (max-width:768px) and (orientation:portrait){
  /* La map doit être un vrai viewport indépendant du HUD. Sans cela le flex parent se
     repliait à la largeur de ses panneaux absolus et .riftMapWrap calculait 0px. */
  .riftStage .riftMapLayout{position:absolute!important;top:118px!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;min-width:100vw!important;height:auto!important;padding:0!important;display:block!important;overflow:hidden!important}
  .riftStage .riftMapWrap{position:absolute!important;inset:0!important;display:block!important;width:100%!important;min-width:100%!important;height:100%!important;overflow-y:auto!important;overflow-x:hidden!important}
  .riftStage .riftMapScrollSpace,.riftStage .riftConnectionsLayer,.riftStage .riftNodesLayer{width:100%!important;min-width:100%!important}
  .mps-combat-stage>.cbHead.mps-mobile-combat-header-hidden{display:none!important}
  /* La vraie cause de la bande noire en haut du combat : le wrapper (position:fixed, inset:0)
     qui porte `battleBackdropStyle` a une animation d'entrée `ap-rise` (translateY(20px)→none)
     qui reste bloquée à son état `from` dans cet environnement (même bug déjà documenté ailleurs
     dans ce projet pour d'autres écrans plein-écran). Comme ce wrapper est en position:fixed
     ET transformé, il devient le containing block de `.mps-combat-stage` (également
     position:fixed, inset:0) : celui-ci hérite donc du décalage de 20px au lieu de coller au
     vrai haut du viewport — d'où la zone non couverte par le décor du combat. Neutraliser
     l'animation seulement sur ce wrapper (scope mobile portrait, ne touche pas au wrapper
     desktop ni à battleBackdropStyle partagé) : le stage colle enfin au vrai haut d'écran. */
  div:has(>.mps-combat-stage){animation:none!important;transform:none!important}
  /* Le fond est maintenant un visuel héros booster tiré au sort par combat (voir
     riftPickArenaHero / battle.mobileArenaBgStyle, inline sur .cbStage) au lieu du décor
     d'arène fixe — ce sont des portraits verticaux déjà prévus pour un cadrage cover/center
     (même technique que la bannière héros de l'accueil), donc plus besoin du zoom+ancrage
     bas qui compensait spécifiquement le cadrage de l'ancien arena-bg.png. */
  .mps-combat-stage{background-size:cover!important;background-position:center center!important}
  /* align-items était en flex-start : les enfants (nom, rôle/rareté) sont des boîtes qui ne
     prennent que la largeur de leur contenu, donc un text-align:center dessus n'a aucun effet
     tant que la boîte elle-même n'est pas centrée dans le panneau — c'était la vraie cause du
     texte "toujours pas centré" malgré le text-align. */
  #adventure-team-panel .adv-team-slot>div:nth-child(3){position:absolute!important;inset:0!important;padding:12px 9px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important}
  #adventure-team-panel .adv-team-slot .adv-slot-name{margin:0 0 6px!important;width:100%!important;text-align:center!important}
  #adventure-team-panel .adv-team-slot .adv-slot-meta{margin:0!important}
  /* Couronne + "rôle rareté" = un seul groupe inline centré ensemble (retour utilisateur :
     la couronne doit être "juste à gauche du texte rôle", pas un élément séparé qui décale
     le centrage du texte). adv-slot-meta reste un simple flux inline (pas flex) : le
     span-couronne suivi directement du texte se centre nativement comme un seul bloc via
     text-align, sans avoir besoin de mesurer sa largeur. */
  #adventure-team-panel .adv-slot-leader{display:none!important}
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-leader{display:none!important}
  #adventure-team-panel .adv-team-slot.is-leader .adv-slot-crown{display:inline-block!important;margin:0 4px 0 0!important;color:#ffda67!important;font-family:Georgia,serif!important;font-size:14px!important;line-height:1!important;vertical-align:-1px!important;text-shadow:0 1px 3px #000,0 0 4px #a96d19!important}
  #adventure-team-panel .adv-team-slot:not(.is-leader) .adv-slot-crown{display:none!important}
  #adventure-team-panel .adv-team-slot .adv-slot-meta{width:100%!important;text-align:center!important}

  /* Le libellé et son action forment une seule unité visuelle, centrée et lisible. */
  #adventure-team-panel .adv-team-bonuses>div:first-child>div:nth-child(4){min-height:30px!important;margin-bottom:8px!important}
  #adventure-team-panel .adv-team-bonuses>div:first-child>div:nth-child(4)>div{font-size:11px!important;line-height:30px!important;letter-spacing:.11em!important}
  #adventure-team-panel .adv-team-bonuses>div:first-child>div:nth-child(4) .adv-synergy-see{min-width:48px!important;height:30px!important;padding:0 10px!important;border-radius:7px!important;font-size:9px!important;letter-spacing:.08em!important}
}