/* ═══════════════════════════════════════════════════════════════════════
   JAHARTA RP — mobile.css  (chargé EN DERNIER sur toutes les pages)

   Ce fichier ne contient QUE ce qui n'est pas couvert dans les CSS source.
   Chaque CSS source a maintenant ses propres sections @media mobile.
   Ce fichier couvre :
   - Les fondations universelles (overflow, text-size-adjust)
   - Les pages sans CSS source propre (messagerie, darknexusnet, etc.)
   - prefers-reduced-motion global
   ═══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   FONDATIONS UNIVERSELLES
   ══════════════════════════════════════════════════════════════════════ */

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body { overflow-x: hidden; }

@media (max-width: 768px) {
  img, video, canvas, svg { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════
   MESSAGERIE (messagerie.css a déjà 900/600/420px — on complète ici)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  .mz-icon-btn {
    width:     44px;
    height:    44px;
    font-size: 1.1rem;
  }
  .mz-compose-send {
    min-height: 48px;
    padding:    0 18px;
    font-size:  .82rem;
  }
  .mz-compose-input {
    min-height: 48px;
    font-size:  .95rem;
  }
}

@media (max-width: 420px) {
  .mz-tab {
    min-height:  44px;
    padding:     10px 8px;
    font-size:   .72rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mz-item:hover,
  .mz-char-choice:hover,
  .mz-gate-cta:hover     { transform: none; }
  .mz-item:active         { transform: translateY(-1px); }
}


/* ══════════════════════════════════════════════════════════════════════
   DARK NEXUS NET (darknexusnet.css — terminal PvP)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .dnn-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .dnn-btn {
    min-height: 48px;
    font-size:  .82rem;
  }
  .dnn-game-warn {
    font-size:   .82rem;
    line-height: 1.65;
  }
  .dnn-input {
    min-height: 48px;
    font-size:  1rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   SHOPS / UNIVERSAL SHOP (shops.css, universal-shop.css)
   Ces pages utilisent jaharta.css — pas de CSS source propre pour mobile
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .shop-header-title { font-size: 1.1rem; }
  .shop-filter-btn {
    min-height: 44px;
    font-size:  .78rem;
    padding:    10px 16px;
  }
  .ushop-grid-sub {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   FICHES PERSONNAGE (fiches.html, pnj.html — utilisent jaharta.css)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .fiche-grid,
  .pnj-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .fiche-card,
  .pnj-card {
    padding: 18px 16px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   LORE (jaharta.css — on renforce la lisibilité mobile)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .lore-section-title { font-size: 1.1rem; }
  .lore-text          { font-size: .95rem; line-height: 1.75; }

  .lore-nav-btn {
    min-height: 48px;
    font-size:  .82rem;
    padding:    12px 18px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   RACES JOUABLES (racesjouables.html — jaharta.css)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .race-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .race-card {
    padding: 18px 16px;
  }
  .race-modal-content {
    width:      min(96vw, 560px);
    max-height: 88vh;
    overflow-y: auto;
    padding:    22px 18px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   SANCTUAIRE / FORGE / BRASSAGE (atlas.css — complément hub)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Barres de progression */
  .prog-bar-label { font-size: .78rem; }

  /* Résultats de craft / brew */
  .craft-result,
  .brew-result {
    padding:   18px 16px;
    font-size: .88rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   SINGULARITÉ (singularite.css — atlas)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .sg-event-title { font-size: 1rem; }
  .sg-event-desc  { font-size: .82rem; line-height: 1.65; }
  .sg-btn {
    min-height: 52px;
    font-size:  .82rem;
    padding:    14px 22px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — coupe les animations lourdes
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Garde les transitions d'état (overlay) lisibles */
  .hud-menu,
  .mobile-menu,
  .inv-detail-panel,
  .charswap-dialog,
  .i-modal {
    transition-duration: 0.15s !important;
  }
}