/*
 * xb-mobile.css v93.31
 * Loads LAST. Double-ID = unbeatable specificity.
 *
 * APPROACH:
 * 1. Doll grid: KEEP grid-template-areas (sprite center, slots around) — just shrink columns
 * 2. Stats: native CSS grid that fits screen — NO overflow-x, NO inner scroll
 */

@media (max-width: 900px) {

/* === GLOBAL === */
#xb-wrapper#xb-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}
#xb-wrapper#xb-wrapper .xb-view-container {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* === 1. HEADER === */
#xb-wrapper#xb-wrapper .xb-header {
    padding: 6px 10px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
}
#xb-wrapper#xb-wrapper .xb-title,
#xb-wrapper#xb-wrapper h1.xb-title { font-size: 15px !important; line-height: 1.2 !important; margin: 0 !important; }
#xb-wrapper#xb-wrapper .xb-subtitle { display: none !important; }
#xb-wrapper#xb-wrapper .xb-main-nav {
    display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important; white-space: nowrap !important; gap: 3px !important;
    padding: 2px 0 !important; scrollbar-width: none !important;
}
#xb-wrapper#xb-wrapper .xb-main-nav::-webkit-scrollbar { display: none !important; }
#xb-wrapper#xb-wrapper .xb-nav-btn { flex-shrink: 0 !important; font-size: 11px !important; padding: 5px 10px !important; min-height: unset !important; }
#xb-wrapper#xb-wrapper .xb-mode-switch,
#xb-wrapper#xb-wrapper #xb-mode-btn { font-size: 11px !important; padding: 3px 10px !important; }
#xb-wrapper#xb-wrapper .xb-controls { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important; }
#xb-wrapper#xb-wrapper .xb-build-id { font-size: 11px !important; padding: 2px 6px !important; }
#xb-wrapper#xb-wrapper .xb-name-input { min-width: 0 !important; flex: 1 1 90px !important; font-size: 13px !important; padding: 4px 8px !important; height: 30px !important; }
#xb-wrapper#xb-wrapper .xb-lvl-input { width: 46px !important; font-size: 13px !important; height: 30px !important; }
#xb-wrapper#xb-wrapper .xb-btn-action { font-size: 11px !important; padding: 4px 8px !important; height: 30px !important; white-space: nowrap !important; min-height: unset !important; }
#xb-wrapper#xb-wrapper .xb-tags-editor { flex-wrap: wrap !important; gap: 4px !important; font-size: 11px !important; }

/* === 2. LAYOUT STACK === */
#xb-wrapper#xb-wrapper .xb-split-container,
#xb-wrapper#xb-wrapper #xb-split-container {
    flex-direction: column !important; display: flex !important; width: 100% !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
}
/* CRITICAL: v88-fixes sets .split-active .xb-split-left { max-width:42% }
   and .split-active .xb-split-right { flex:0 0 58%; min-width:400px }
   These MUST be reset for column layout on mobile */
#xb-wrapper#xb-wrapper .xb-split-left,
#xb-wrapper#xb-wrapper #xb-split-left,
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-split-left {
    width: 100% !important; max-width: 100% !important;
    flex: none !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
}
#xb-wrapper#xb-wrapper .xb-split-right,
#xb-wrapper#xb-wrapper #xb-split-right,
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-split-right {
    width: 100% !important; max-width: 100% !important;
    flex: none !important;
    min-width: 0 !important; /* kill min-width:400px from v88 */
    position: relative !important; top: auto !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid rgba(212, 175, 55, 0.15) !important;
}
#xb-wrapper#xb-wrapper .xb-split-main,
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-split-main {
    flex-direction: column !important; display: flex !important; width: 100% !important;
    overflow: visible !important;
}
#xb-wrapper#xb-wrapper .xb-col-doll,
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-col-doll {
    width: 100% !important; display: flex !important; flex-direction: column !important;
    min-width: 0 !important; flex: none !important;
    overflow: visible !important;
}

/* === 3. HERO DISPLAY === */
#xb-wrapper#xb-wrapper .xb-hero-display { padding: 6px 8px !important; }
#xb-wrapper#xb-wrapper .xb-hero-row { flex-wrap: wrap !important; gap: 4px !important; }
#xb-wrapper#xb-wrapper .xb-hd-name { font-size: 14px !important; }
#xb-wrapper#xb-wrapper #xb-hero-lvl { font-size: 11px !important; }
#xb-wrapper#xb-wrapper .xb-hero-buttons { flex-wrap: wrap !important; gap: 4px !important; }
#xb-wrapper#xb-wrapper .xb-change-class-btn,
#xb-wrapper#xb-wrapper .xb-btn-forgemage-top { font-size: 11px !important; padding: 4px 8px !important; }
#xb-wrapper#xb-wrapper .xb-stat-mode-select { font-size: 11px !important; padding: 4px 20px 4px 8px !important; min-width: 0 !important; }

/* ================================================================
   4. DOLL GRID — KEEP DESKTOP LAYOUT (sprite center + slots around)
   Just shrink columns: 100px → 64px
   ================================================================ */
#xb-wrapper#xb-wrapper .xb-doll-grid {
    display: grid !important;
    /* KEEP the grid-template-areas from v93-fixes — sprite stays in center */
    grid-template-areas:
        "amulette character chapeau"
        "ceinture character cape"
        "anneau1  character anneau2"
        "bottes   character familier"
        "arme     character bouclier"
        "sac      character ." !important;
    grid-template-columns: 64px 1fr 64px !important;
    grid-template-rows: auto !important;
    gap: 5px !important;
    padding: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    margin: 0 auto !important;
    align-content: start !important;
}
/* Slots: compact square */
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    font-size: 9px !important;
    padding: 2px !important;
}
#xb-wrapper#xb-wrapper .xb-slot .xb-slot-label { font-size: 8px !important; }
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot img,
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot .xb-slot-img {
    max-width: 48px !important; max-height: 48px !important; object-fit: contain !important;
}
/* Character zone: contained sprite */
#xb-wrapper#xb-wrapper .xb-char-zone {
    width: 100% !important; min-height: auto !important;
    overflow: visible !important; text-align: center !important;
}
#xb-wrapper#xb-wrapper .xb-sprite,
#xb-wrapper#xb-wrapper #xb-char-sprite {
    max-width: 150px !important; max-height: 200px !important;
    width: auto !important; height: auto !important;
    display: block !important; margin: 0 auto !important; object-fit: contain !important;
}
#xb-wrapper#xb-wrapper .xb-arrows { gap: 60px !important; }
#xb-wrapper#xb-wrapper .xb-arr-btn { width: 28px !important; height: 28px !important; }
/* Dofus row */
#xb-wrapper#xb-wrapper .xb-dofus-inline {
    display: flex !important; flex-wrap: wrap !important; gap: 5px !important;
    justify-content: center !important; width: 100% !important;
    grid-column: 1 / -1 !important; margin-top: 6px !important; padding: 6px 8px !important;
}
#xb-wrapper#xb-wrapper .xb-dofus-inline .xb-slot,
#xb-wrapper#xb-wrapper .xb-dofus-inline .xb-slot-dofus {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    max-width: 36px !important; max-height: 36px !important;
}

/* ================================================================
   5. STATS — NO SCROLL, FITS SCREEN NATIVELY
   v92: body .xb-col-stats { overflow-y:auto!important } → CREATES SCROLL
   v93: .split-active .xb-split-left { overflow-y:auto!important } → PARENT SCROLL
   Fix: force overflow:visible on EVERY container in the stats chain
   ================================================================ */
#xb-wrapper#xb-wrapper .xb-col-stats,
#xb-wrapper#xb-wrapper .xb-split-container .xb-col-stats,
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-col-stats {
    width: 100% !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
}
#xb-wrapper#xb-wrapper .xb-stats-body,
#xb-wrapper#xb-wrapper .xb-split-container .xb-stats-body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
#xb-wrapper#xb-wrapper #xb-stats-secondary {
    overflow: visible !important;
    max-height: none !important;
}
#xb-wrapper#xb-wrapper .xb-stats-compact,
#xb-wrapper#xb-wrapper #xb-stats-inputs {
    width: 100% !important;
    overflow: visible !important; /* NO SCROLL — critical */
    padding: 6px 4px !important;
    box-sizing: border-box !important;
}
/* Kill any scrollbar added by other CSS */
#xb-wrapper#xb-wrapper #xb-stats-inputs::-webkit-scrollbar { display: none !important; }
/* The grid rows: shrink label col, keep 6 stat cols fluid */
#xb-wrapper#xb-wrapper .xb-sc-header,
#xb-wrapper#xb-wrapper .xb-sc-row {
    display: grid !important;
    grid-template-columns: 30px repeat(6, 1fr) !important;
    gap: 2px !important;
    min-width: 0 !important;
    width: 100% !important;
    align-items: center !important;
    margin-bottom: 3px !important;
}
#xb-wrapper#xb-wrapper .xb-sc-header { margin-bottom: 4px !important; padding-bottom: 4px !important; }
/* Stat heads: icon only, no text */
#xb-wrapper#xb-wrapper .xb-sc-stat-head {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    gap: 1px !important; padding: 1px 0 !important; min-width: 0 !important;
}
#xb-wrapper#xb-wrapper .xb-sc-icon { width: 18px !important; height: 18px !important; }
#xb-wrapper#xb-wrapper .xb-sc-stat-name { display: none !important; } /* HIDE text — icons are enough */
/* Row label (Base, Parcho, etc) */
#xb-wrapper#xb-wrapper .xb-sc-label {
    font-size: 8px !important; font-weight: 700 !important;
    min-width: 0 !important; text-align: center !important; white-space: nowrap !important;
    letter-spacing: 0 !important;
}
/* Input cells */
#xb-wrapper#xb-wrapper .xb-sc-input-wrap { min-width: 0 !important; }
#xb-wrapper#xb-wrapper .xb-sc-input {
    width: 100% !important; font-size: 12px !important; padding: 2px 1px !important;
    text-align: center !important; min-width: 0 !important; box-sizing: border-box !important;
}
/* Values */
#xb-wrapper#xb-wrapper .xb-sc-val { font-size: 11px !important; min-width: 0 !important; text-align: center !important; }
#xb-wrapper#xb-wrapper .xb-sc-total { font-size: 13px !important; font-weight: 700 !important; min-width: 0 !important; text-align: center !important; }
#xb-wrapper#xb-wrapper .xb-sc-equip-row .xb-sc-val,
#xb-wrapper#xb-wrapper .xb-sc-detail-label { font-size: 9px !important; }
#xb-wrapper#xb-wrapper .xb-sc-total-label { font-size: 9px !important; }
/* Capital row */
#xb-wrapper#xb-wrapper .xb-capital-row { flex-wrap: wrap !important; gap: 4px !important; font-size: 12px !important; }
#xb-wrapper#xb-wrapper .xb-btn-rst-mini { font-size: 10px !important; padding: 2px 6px !important; }

/* === 6. SECONDARY STATS (Combat/Divers/Résistances) === */
#xb-wrapper#xb-wrapper .xb-db-grid-2 { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
#xb-wrapper#xb-wrapper .xb-db-row { gap: 4px !important; padding: 4px 6px !important; }
#xb-wrapper#xb-wrapper .xb-db-icon { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
#xb-wrapper#xb-wrapper .xb-db-val { font-size: 13px !important; min-width: 28px !important; }
#xb-wrapper#xb-wrapper .xb-db-label {
    font-size: 11px !important; overflow: hidden !important;
    text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important;
}
#xb-wrapper#xb-wrapper .xb-db-title { font-size: 12px !important; padding: 4px 8px !important; }
#xb-wrapper#xb-wrapper .xb-db-block { margin-bottom: 6px !important; }
#xb-wrapper#xb-wrapper .xb-db-res-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-db-res-icon { width: 16px !important; height: 16px !important; }
#xb-wrapper#xb-wrapper .xb-db-res-name { font-size: 9px !important; }
#xb-wrapper#xb-wrapper .xb-db-res-fixe,
#xb-wrapper#xb-wrapper .xb-db-res-pct { font-size: 11px !important; }

/* === 7. INLINE STATS (all-stats / sl-item) === */
#xb-wrapper#xb-wrapper #xb-all-stats,
#xb-wrapper#xb-wrapper .xb-all-stats,
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-col-doll .xb-all-stats {
    width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}
#xb-wrapper#xb-wrapper .xb-stats-section-title { font-size: 12px !important; padding: 4px 8px !important; }
#xb-wrapper#xb-wrapper .xb-stats-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
#xb-wrapper#xb-wrapper .xb-stats-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
#xb-wrapper#xb-wrapper .xb-stats-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
#xb-wrapper#xb-wrapper .xb-stats-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
#xb-wrapper#xb-wrapper .xb-sl-item { font-size: 11px !important; padding: 4px 6px !important; gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-sl-item img { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
#xb-wrapper#xb-wrapper .xb-sl-item b { font-size: 12px !important; }

/* === 8. MES BUILDS CARDS === */
#xb-wrapper#xb-wrapper .xb-cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card { width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; padding: 10px !important; }
#xb-wrapper#xb-wrapper .xb-card-header-row { flex-wrap: wrap !important; gap: 6px !important; }
#xb-wrapper#xb-wrapper .xb-card-name-big { font-size: 14px !important; }
#xb-wrapper#xb-wrapper .xb-card-number { font-size: 14px !important; }
#xb-wrapper#xb-wrapper .xb-card-level-badge { font-size: 11px !important; padding: 3px 8px !important; }
#xb-wrapper#xb-wrapper .xb-card-content { gap: 6px !important; padding: 8px !important; }
#xb-wrapper#xb-wrapper .xb-card-col { gap: 4px !important; overflow: visible !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot,
#xb-wrapper#xb-wrapper .xb-cards-grid .xb-slot { width: 40px !important; height: 40px !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot.xb-slot-md { width: 40px !important; height: 40px !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot.xb-slot-sm { width: 30px !important; height: 30px !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot img,
#xb-wrapper#xb-wrapper .xb-cards-grid .xb-slot img { max-width: 34px !important; max-height: 34px !important; object-fit: contain !important; }
#xb-wrapper#xb-wrapper .xb-card-center { min-width: 0 !important; }
#xb-wrapper#xb-wrapper .xb-card-face { width: 50px !important; height: 50px !important; }
#xb-wrapper#xb-wrapper .xb-card-stats { gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-stat-icon { width: 16px !important; height: 16px !important; }
#xb-wrapper#xb-wrapper .xb-stat-value { font-size: 12px !important; }
#xb-wrapper#xb-wrapper .xb-card-meta { font-size: 10px !important; }
#xb-wrapper#xb-wrapper .xb-card-footer-tags { flex-wrap: wrap !important; gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-card-tag { font-size: 9px !important; padding: 1px 4px !important; }
#xb-wrapper#xb-wrapper .xb-card-bottom-row { gap: 4px !important; padding: 4px 8px !important; flex-wrap: wrap !important; justify-content: center !important; }
#xb-wrapper#xb-wrapper .xb-card-dofus { gap: 4px !important; padding: 6px 8px !important; flex-wrap: wrap !important; }
#xb-wrapper#xb-wrapper .xb-card-panos { flex-wrap: wrap !important; gap: 4px !important; }
#xb-wrapper#xb-wrapper .xb-card-pano-badge { font-size: 10px !important; }
#xb-wrapper#xb-wrapper .xb-card-bottom { flex-wrap: wrap !important; gap: 4px !important; padding: 6px 8px !important; }
#xb-wrapper#xb-wrapper .xb-card-actions { flex-wrap: wrap !important; gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-card-btn { font-size: 12px !important; padding: 4px 6px !important; }
#xb-wrapper#xb-wrapper .xb-builds-toolbar { flex-wrap: wrap !important; gap: 6px !important; }
#xb-wrapper#xb-wrapper .xb-toolbar-tags { flex-wrap: wrap !important; gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-tag-btn { font-size: 10px !important; padding: 3px 6px !important; }
#xb-wrapper#xb-wrapper .xb-folders-bar { flex-wrap: wrap !important; gap: 4px !important; overflow-x: auto !important; }
#xb-wrapper#xb-wrapper .xb-folder-tab { font-size: 11px !important; padding: 4px 8px !important; }

/* === 9. SPLIT ENCYCLOPEDIA — equipment selection === */
#xb-wrapper#xb-wrapper .xb-split-container.split-active .xb-split-right {
    max-height: none !important; height: auto !important; overflow: visible !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    flex: none !important;
}
#xb-wrapper#xb-wrapper .xb-split-ency-header { flex-wrap: wrap !important; gap: 6px !important; padding: 8px !important; }
#xb-wrapper#xb-wrapper .xb-split-ency-title h2 { font-size: 14px !important; }
#xb-wrapper#xb-wrapper .xb-split-close-btn { font-size: 12px !important; padding: 5px 10px !important; }
#xb-wrapper#xb-wrapper .xb-split-search-row { flex-wrap: wrap !important; gap: 6px !important; }
#xb-wrapper#xb-wrapper .xb-split-search-input { width: 100% !important; min-width: unset !important; font-size: 16px !important; padding: 10px 12px !important; min-height: 44px !important; }
#xb-wrapper#xb-wrapper .xb-split-quick-filters { flex-wrap: wrap !important; gap: 3px !important; }
#xb-wrapper#xb-wrapper .xb-split-filter-btn { font-size: 11px !important; padding: 5px 7px !important; }
#xb-wrapper#xb-wrapper .xb-filter-sep { display: none !important; }
#xb-wrapper#xb-wrapper .xb-stat-filter-bar { flex-wrap: wrap !important; gap: 2px !important; }
#xb-wrapper#xb-wrapper .xb-stat-filter-btn { padding: 4px !important; min-width: 32px !important; min-height: 32px !important; }
#xb-wrapper#xb-wrapper .xb-stat-filter-btn img { width: 18px !important; height: 18px !important; }
#xb-wrapper#xb-wrapper .xb-split-items-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
#xb-wrapper#xb-wrapper .xb-split-item-card { padding: 10px !important; min-height: 44px !important; }
#xb-wrapper#xb-wrapper .xb-split-item-name { font-size: 12px !important; }
#xb-wrapper#xb-wrapper .xb-split-item-img { width: 44px !important; height: 44px !important; }
#xb-wrapper#xb-wrapper .xb-split-item-body { gap: 6px !important; }
#xb-wrapper#xb-wrapper .xb-split-stat-line { font-size: 11px !important; }
#xb-wrapper#xb-wrapper .xb-weapon-type-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
#xb-wrapper#xb-wrapper .xb-wt-btn { font-size: 13px !important; padding: 6px 10px !important; white-space: nowrap !important; }
#xb-wrapper#xb-wrapper .xb-split-current { padding: 8px !important; }
#xb-wrapper#xb-wrapper .xb-split-count { font-size: 12px !important; padding: 6px 8px !important; }
#xb-wrapper#xb-wrapper .xb-btn-load-more { width: 100% !important; padding: 12px !important; font-size: 14px !important; }

/* === 10. SIDEBARS / EXPLORER / PROFILE / MODALS === */
#xb-wrapper#xb-wrapper .xb-col-bonus, #xb-wrapper#xb-wrapper .xb-col-manage { width: 100% !important; }
#xb-wrapper#xb-wrapper .xb-bonus-head, #xb-wrapper#xb-wrapper .xb-manage-head { font-size: 13px !important; padding: 6px 10px !important; }
#xb-wrapper#xb-wrapper .xb-explorer-container { width: 100% !important; }
#xb-wrapper#xb-wrapper .xb-xpl-filters { flex-wrap: wrap !important; gap: 6px !important; }
#xb-wrapper#xb-wrapper .xb-explorer-grid { grid-template-columns: 1fr !important; }
#xb-wrapper#xb-wrapper .xb-profile-container { width: 100% !important; padding: 10px !important; }
body .xbt-modal { max-width: 95vw !important; max-height: 90vh !important; margin: 10px !important; }
body .xbt-modal-body { padding: 10px !important; }

} /* end 900px */


/* ================================================================
   768px — WELCOME MODAL + SMALLER DOLL SLOTS
   ================================================================ */
@media (max-width: 768px) {

/* Welcome modal */
#xb-welcome-modal#xb-welcome-modal .xb-welcome-content { max-width: 100% !important; padding: 12px 10px !important; margin: 0 !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-header { padding: 8px 0 !important; margin-bottom: 6px !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-icon-big { font-size: 24px !important; }
#xb-welcome-modal#xb-welcome-modal h1,
#xb-welcome-modal#xb-welcome-modal .xb-welcome-title { font-size: 18px !important; margin: 4px 0 !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-subtitle { font-size: 11px !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-options { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-option,
#xb-welcome-modal#xb-welcome-modal button.xb-welcome-option {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 12px !important; padding: 12px 14px !important; min-height: auto !important; height: auto !important;
}
#xb-welcome-modal#xb-welcome-modal .xb-option-icon { font-size: 22px !important; margin: 0 !important; width: 30px !important; flex-shrink: 0 !important; }
#xb-welcome-modal#xb-welcome-modal .xb-option-title,
#xb-welcome-modal#xb-welcome-modal h2 { font-size: 15px !important; margin: 0 !important; flex: 1 !important; }
#xb-welcome-modal#xb-welcome-modal .xb-option-desc { display: none !important; }
#xb-welcome-modal#xb-welcome-modal .xb-option-tag { font-size: 11px !important; padding: 3px 10px !important; margin: 0 !important; flex-shrink: 0 !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-footer { padding: 6px 0 !important; }
#xb-welcome-modal#xb-welcome-modal .xb-welcome-tip { font-size: 11px !important; }

/* Doll: slightly smaller slots */
#xb-wrapper#xb-wrapper .xb-doll-grid {
    grid-template-columns: 56px 1fr 56px !important;
    gap: 4px !important;
}
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot {
    width: 56px !important; height: 56px !important; max-width: 56px !important;
}
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot img { max-width: 42px !important; max-height: 42px !important; }
#xb-wrapper#xb-wrapper .xb-sprite,
#xb-wrapper#xb-wrapper #xb-char-sprite { max-width: 130px !important; max-height: 170px !important; }

/* Build card content: stack columns */
#xb-wrapper#xb-wrapper .xb-card-content { flex-direction: column !important; align-items: center !important; }
#xb-wrapper#xb-wrapper .xb-card-col { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; }

} /* end 768px */


/* ================================================================
   MODALE SÉLECTION D'OBJET — BARRE DE RECHERCHE MOBILE
   (hors #xb-wrapper, sélecteurs sans double-ID)
   ================================================================ */
@media (max-width: 900px) {

/* Overlay : aligner en haut pour ne pas couper la recherche */
#xb-modal.xb-item-modal {
    align-items: flex-start !important;
}

/* Boîte modale : plein écran, flex colonne */
#xb-modal.xb-item-modal > .xb-mod-box {
    width: 100vw !important;
    height: 100dvh !important;      /* dvh évite l'overlap avec la barre URL mobile */
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Header : compact, pas de débordement */
#xb-modal .xb-mod-header {
    padding: 10px 12px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
#xb-modal .xb-mod-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
}
#xb-modal .xb-mod-title span:first-child {
    font-size: 1rem !important;
}
#xb-modal .xb-result-badge {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
}
#xb-modal .xb-view-toggles {
    flex-shrink: 0 !important;
}
#xb-modal .xb-mod-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.4rem !important;
    flex-shrink: 0 !important;
}

/* Ligne recherche + tri + filtre : wrap sur mobile */
#xb-modal .xb-mod-search-sort-row {
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
}
#xb-modal .xb-mod-search-sort-row .xb-search-input {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;     /* évite le zoom auto iOS */
    padding: 10px 14px !important;
}
#xb-modal .xb-mod-search-sort-row .xb-filter-select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
}
#xb-modal .xb-mod-search-sort-row .xb-filters-toggle {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
}

/* Panneau filtres : compact */
#xb-modal .xb-mod-filters {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
}

/* Grille items : prend le reste et scroll */
#xb-modal .xb-items-grid {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px !important;
}

} /* end modal 900px */


/* ================================================================
   480px — EXTRA SMALL
   ================================================================ */
@media (max-width: 480px) {

#xb-wrapper#xb-wrapper .xb-header { padding: 4px 8px !important; }
#xb-wrapper#xb-wrapper .xb-title { font-size: 13px !important; }
#xb-wrapper#xb-wrapper .xb-nav-btn { font-size: 10px !important; padding: 4px 7px !important; }
#xb-wrapper#xb-wrapper .xb-btn-action { font-size: 10px !important; padding: 3px 6px !important; height: 26px !important; }
#xb-wrapper#xb-wrapper .xb-name-input { font-size: 12px !important; height: 26px !important; }
#xb-wrapper#xb-wrapper .xb-lvl-input { width: 40px !important; font-size: 12px !important; height: 26px !important; }

/* Doll: tiny */
#xb-wrapper#xb-wrapper .xb-doll-grid {
    grid-template-columns: 50px 1fr 50px !important;
    gap: 3px !important; padding: 4px !important;
}
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot {
    width: 50px !important; height: 50px !important; max-width: 50px !important;
}
#xb-wrapper#xb-wrapper .xb-doll-grid .xb-slot img { max-width: 36px !important; max-height: 36px !important; }
#xb-wrapper#xb-wrapper .xb-slot .xb-slot-label { font-size: 7px !important; }
#xb-wrapper#xb-wrapper .xb-sprite, #xb-wrapper#xb-wrapper #xb-char-sprite { max-width: 110px !important; max-height: 140px !important; }
#xb-wrapper#xb-wrapper .xb-dofus-inline .xb-slot { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; }

/* Stats: tighter grid */
#xb-wrapper#xb-wrapper .xb-sc-header,
#xb-wrapper#xb-wrapper .xb-sc-row { grid-template-columns: 25px repeat(6, 1fr) !important; gap: 1px !important; }
#xb-wrapper#xb-wrapper .xb-sc-icon { width: 16px !important; height: 16px !important; }
#xb-wrapper#xb-wrapper .xb-sc-input { font-size: 11px !important; padding: 1px !important; }
#xb-wrapper#xb-wrapper .xb-sc-val { font-size: 10px !important; }
#xb-wrapper#xb-wrapper .xb-sc-total { font-size: 12px !important; }
#xb-wrapper#xb-wrapper .xb-sc-label { font-size: 7px !important; }

/* Inline stats */
#xb-wrapper#xb-wrapper .xb-sl-item { font-size: 10px !important; padding: 3px 4px !important; }
#xb-wrapper#xb-wrapper .xb-sl-item img { width: 14px !important; height: 14px !important; }
/* Secondary */
#xb-wrapper#xb-wrapper .xb-db-val { font-size: 12px !important; }
#xb-wrapper#xb-wrapper .xb-db-label { font-size: 10px !important; }
#xb-wrapper#xb-wrapper .xb-db-icon { width: 16px !important; height: 16px !important; }
/* Build card slots */
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot { width: 34px !important; height: 34px !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot.xb-slot-sm { width: 26px !important; height: 26px !important; }
#xb-wrapper#xb-wrapper .xb-stuff-card .xb-slot img { max-width: 28px !important; max-height: 28px !important; }

} /* end 480px */