/* ============================================================
   ARKELITH — Mobile Layer (consolidé Beta 2.4)
   Un seul bloc par breakpoint, zéro redondance.
============================================================ */

:root { --mobile-tap-size: 52px; }

/* ============================================================
   BASE MOBILE <= 900px
============================================================ */
@media (max-width: 900px) {

  html, body { min-width: 0 !important; overflow-x: hidden; }
  body { padding-bottom: 78px; touch-action: manipulation; }

  .aspect-wrap { width: 100% !important; min-width: 0 !important; padding: 0 !important; }
  .app { width: 100% !important; max-width: 100% !important; min-width: 0 !important;
         border-left: none !important; border-right: none !important; border-radius: 0 !important; }
  .page { padding: 10px !important; overflow-x: hidden !important; }
  .page.active { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal, .param-modal, .rings-panel, .prostheses-panel {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 84px) !important;
  }

  /* ── Header : 2 lignes ── */
  .theme-bar {
    position: sticky !important; top: 0 !important; z-index: 100 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "title" "actions" !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    height: auto !important; min-height: 0 !important;
    background: rgba(24,12,6,.97) !important;
    border-bottom: 1px solid var(--border2) !important;
    box-sizing: border-box !important;
  }

  /* Titre centré, une paire d'épées */
  .theme-bar .tb-title, .theme-bar #midjaas-title-egg {
    grid-area: title !important;
    position: static !important; transform: none !important; left: auto !important;
    width: 100% !important; display: block !important; text-align: center !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    letter-spacing: 2px !important; line-height: 1.1 !important;
    white-space: nowrap !important; color: var(--gold) !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
  }
  .theme-bar .tb-title::before, .theme-bar #midjaas-title-egg::before,
  .theme-bar .tb-title::after,  .theme-bar #midjaas-title-egg::after {
    content: none !important;
  }

  .theme-bar .tb-fiche-nom { display: none !important; }

  /* Boutons ligne 2, scrollable */
  .theme-bar .tb-right {
    grid-area: actions !important;
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 5px !important; width: 100% !important;
    overflow-x: auto !important; overflow-y: visible !important;
    padding: 0 0 2px 0 !important; -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }
  .theme-bar .tb-right .btn-sm, .theme-bar .tb-right label.btn-sm {
    flex: 0 0 auto !important; height: 34px !important; min-height: 34px !important;
    padding: 0 10px !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    white-space: nowrap !important; font-size: 0 !important;
    border-radius: 7px !important; box-sizing: border-box !important;
  }
  .theme-bar .tb-right [data-mobile-label]::after {
    content: attr(data-mobile-label) !important;
    font-size: 16px !important; line-height: 1 !important;
  }
  .theme-bar .tb-right .gender-wrap {
    flex: 0 0 auto !important; height: 34px !important;
    display: inline-flex !important; align-items: center !important;
    gap: 6px !important; padding: 0 8px !important;
    border: 1px solid var(--border2) !important; border-radius: 7px !important;
    background: rgba(0,0,0,.22) !important; box-sizing: border-box !important;
  }
  .theme-bar .tb-right .gender-lbl {
    font-size: 13px !important; line-height: 1 !important; white-space: nowrap !important;
    display: inline-flex !important; align-items: center !important; gap: 2px !important;
  }
  .theme-bar .tb-right .gender-lbl input { margin: 0 !important; transform: scale(.78) !important; }
  .theme-bar .tb-right .mobile-reset-action[data-mobile-label]::after { color: #f08080 !important; }

  /* Séparateurs visuels */
  .theme-bar .tb-right button[onclick="exportData()"]::before,
  .theme-bar .tb-right #btn-undo::before,
  .theme-bar .tb-right .gender-wrap::before,
  .theme-bar .tb-right .mobile-reset-action::before {
    content: "|" !important; display: inline-block !important;
    margin: 0 7px 0 -10px !important; color: var(--border2) !important;
    font-size: 17px !important; line-height: 1 !important; pointer-events: none !important;
  }

  /* ── Nav fixe en bas ── */
  .nav-bar {
    position: fixed !important; left: 8px !important; right: 8px !important;
    bottom: 8px !important; width: auto !important; max-width: none !important;
    min-height: 64px !important; z-index: 80 !important;
    display: flex !important; align-items: center !important;
    justify-content: flex-start !important; gap: 8px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--border2) !important; border-radius: 10px !important;
    background: rgba(24,12,6,.96) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    touch-action: pan-x !important; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .nav-bar::-webkit-scrollbar { height: 4px; }
  .nav-bar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--gold), transparent 45%);
    border-radius: 999px;
  }
  .mobile-nav-handle { display: none !important; }
  .nav-btn {
    flex: 0 0 76px !important; width: 76px !important; min-width: 76px !important;
    height: 54px !important; min-height: 54px !important;
    padding: 5px 6px !important; border-radius: 9px !important;
    display: inline-flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important; text-align: center !important;
    font-size: 0 !important; line-height: 1 !important; scroll-snap-align: center;
  }
  .nav-btn::before { content: attr(data-mobile-icon); display: block; font-size: 18px; line-height: 1; color: var(--gold); }
  .nav-btn::after  { content: attr(data-mobile-label); display: block; font-size: 13px; line-height: 1.05; letter-spacing: .2px; }
  .nav-btn.active  { background: rgba(255,201,71,.10) !important; }
  .nav-btn.active::after { font-weight: 700; }

  /* ── Inventaire ── */
  #page-inventaire { overflow-x: hidden !important; padding: 8px !important; }
  #page-inventaire .main-body { display: flex !important; flex-direction: column !important; gap: 10px !important; overflow: visible !important; min-height: auto !important; }
  #page-inventaire .col-equip, #page-inventaire .col-centre, #page-inventaire .col-inv {
    width: 100% !important; min-width: 0 !important; height: auto !important;
    min-height: 0 !important; overflow: visible !important;
    border: 1px solid var(--border2); border-radius: 8px;
    background: rgba(0,0,0,.12); padding: 8px; box-sizing: border-box;
  }
  #page-inventaire .col-equip  { order: 1; }
  #page-inventaire .col-centre { order: 2; }
  #page-inventaire .col-inv    { order: 3; }

  .mobile-inv-section-title {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 42px; margin: 0 0 8px; padding: 8px 10px;
    border: 1px solid var(--border2); border-radius: 7px; background: var(--bg3);
    color: var(--gold); font-family: var(--font); font-weight: bold;
    letter-spacing: .5px; cursor: pointer;
  }
  .mobile-inv-section-title::after { content: "▾"; font-size: 14px; color: var(--muted); }
  .mobile-inv-collapsed .mobile-inv-section-title::after { content: "▸"; }
  #page-inventaire .mobile-inv-collapsed > :not(.mobile-inv-section-title) { display: none !important; }

  #page-inventaire .char-panel { order: -1; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  #page-inventaire .char-row { flex-wrap: wrap; gap: 6px; }
  #page-inventaire .char-input, #page-inventaire select, #page-inventaire input { min-height: 34px; font-size: 16px; }

  #page-inventaire .eq-r1, #page-inventaire .eq-r2, #page-inventaire .eq-r3,
  #page-inventaire .eq-r4, #page-inventaire .centre-row2, #page-inventaire .centre-row3 {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; min-height: 0 !important;
  }
  #page-inventaire .eq-r2-left { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; }

  #page-inventaire .slot, #page-inventaire .prost-slot, #page-inventaire .grid-cell,
  #page-inventaire .spe-cell, #page-inventaire .mun-cell, #page-inventaire .ring-mini {
    min-width: 0 !important; width: 100% !important;
    min-height: var(--mobile-tap-size) !important; height: auto !important;
    box-sizing: border-box; font-size: 14px !important; padding: 8px 10px !important; touch-action: manipulation;
  }
  #page-inventaire .slot-armure, #page-inventaire .slot-bottes, #page-inventaire .slot-ceinture,
  #page-inventaire .slot-amulette, #page-inventaire .slot-cape { width: 100% !important; flex: none !important; }

  #page-inventaire .inv-header, #page-inventaire .inv-grids {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; min-height: 0 !important;
  }
  #page-inventaire .grid-col { height: auto !important; max-height: none !important; overflow: visible !important; min-width: 0 !important; }
  #page-inventaire #bagGrid, #page-inventaire #pocheGrid, #page-inventaire #speGrid,
  #page-inventaire .inv-layout, #page-inventaire .inventory-layout,
  #page-inventaire .inv-main, #page-inventaire .inv-grid-wrap { min-width: 0 !important; }

  #page-inventaire .prostheses-panel { position: static !important; width: 100% !important; max-width: 100% !important; max-height: none !important; transform: none !important; margin-top: 8px; }
  #page-inventaire .prostheses-grid, #page-inventaire .prost-mid-row, #page-inventaire .prost-legs-row,
  #page-inventaire .prost-eyes-row, #page-inventaire .prost-side-col {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important;
  }
  #page-inventaire .mobile-slot-selected { outline: 2px solid var(--gold) !important; box-shadow: 0 0 0 3px rgba(218,165,32,.22) inset !important; }
  #page-inventaire .mobile-slot-can-move { outline: 2px dashed var(--filled) !important; }

  .mobile-inventory-hint {
    display: block; order: 0; margin: 0 0 8px; padding: 8px 10px;
    border: 1px dashed var(--border2); border-radius: 7px;
    color: var(--muted); background: rgba(0,0,0,.16); font-size: 12px; line-height: 1.35;
  }

  /* ── Compétences ── */
  #page-competences { overflow-x: hidden !important; }
  #page-competences .comp-layout { display: flex !important; flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; gap: 12px !important; padding-inline: 8px !important; box-sizing: border-box !important; }
  #page-competences .comp-body { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; }
  #page-competences .comp-col { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; }
  #page-competences .skill-card, #page-competences .skill-dd-row, #page-competences .comp-list,
  #page-competences #list-savoirs, #page-competences #list-coups,
  #page-competences #list-magiques, #page-competences #livre-sorts-body {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
  }
  #page-competences .comp-magie-row, #page-competences .comp-livre-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; box-sizing: border-box !important; }
}

/* ============================================================
   DESKTOP — cacher éléments mobile-only
============================================================ */
@media (min-width: 901px) {
  .mobile-inv-section-title,
  .mobile-inventory-hint,
  .mobile-nav-handle { display: none !important; }
}

/* ============================================================
   PETIT MOBILE <= 390px
============================================================ */
@media (max-width: 390px) {
  .nav-btn { flex-basis: 72px !important; width: 72px !important; min-width: 72px !important; }
}