/* ============================================================
   v99-maps.css  (claude-maps-1) — MAPS EN FOND D'ÉCRAN
   ------------------------------------------------------------
   Chaque écran reçoit sa carte en fond (background-image sur
   l'élément → le contenu/les boutons sont AUTOMATIQUEMENT au-dessus,
   aucun souci de z-index). Un voile sombre dégradé garde tout lisible.
   background-attachment:fixed → la carte reste un décor (retombe en
   "scroll" sur iOS, ce qui reste correct).
   Fichiers dans icone/ (emplacements fournis par l'utilisateur).
   ============================================================ */

#heal-screen,
#quests-screen,
#friends-screen,
#battlepass-screen,
#auction-screen,
#hdv2-screen,
#joker-screen,
#profile-screen,
#inventory-screen,
#training-screen,
#pvp-battle-screen {
  /* [2026-06-11] CONTAIN (au lieu de cover) → on voit l'IMAGE ENTIÈRE, plus de
     zoom/crop (demande user). Le fond sombre remplit les marges. */
  background-size: contain !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: #060810 !important;
}

/* [2026-06] Voiles ALLÉGÉS (maps plus visibles, texte reste lisible) */
#heal-screen       { background-image: linear-gradient(rgba(6,8,16,.34), rgba(6,8,16,.56)), url('../icone/elara_heal.png') !important; }
#quests-screen     { background-image: linear-gradient(rgba(6,8,16,.36), rgba(6,8,16,.58)), url('../icone/quest.png') !important; }
#friends-screen    { background-image: linear-gradient(rgba(6,8,16,.36), rgba(6,8,16,.58)), url('../icone/tavern_friend.png') !important; }
#battlepass-screen { background-image: linear-gradient(rgba(6,8,16,.34), rgba(6,8,16,.56)), url('../icone/battle pass.png') !important; }
#auction-screen    { background-image: linear-gradient(rgba(6,8,16,.36), rgba(6,8,16,.58)), url('../icone/hotel_de_vente.png') !important; }
/* Le VRAI hôtel des ventes est #hdv2-screen (overlay dynamique de MX_openHDV2), pas auction-screen */
#hdv2-screen       { background-image: linear-gradient(rgba(6,8,16,.40), rgba(6,8,16,.62)), url('../icone/hotel_de_vente.png') !important; }
#joker-screen      { background-image: linear-gradient(rgba(6,8,16,.32), rgba(6,8,16,.54)), url('../icone/tresor.png') !important; }
/* [2026-07-04] nouveau fond d'arène fourni par l'user */
#pvp-battle-screen { background-image: linear-gradient(rgba(6,8,16,.34), rgba(6,8,16,.56)), url('../icone/icone_fond_ecran_arene.png') !important; }
/* [2026-07-03 demande user] nouveaux fonds d'écran fournis : profil + inventaire + training center */
#profile-screen    { background-image: linear-gradient(rgba(6,8,16,.42), rgba(6,8,16,.64)), url('../icone/fond_decran_profil.png') !important; }
#inventory-screen  { background-image: linear-gradient(rgba(6,8,16,.42), rgba(6,8,16,.64)), url('../icone/fond_decran_inventaire.png') !important; }
#training-screen   { background-image: linear-gradient(rgba(6,8,16,.40), rgba(6,8,16,.62)), url('../icone/fond_training_center.png') !important; }
/* [2026-07-04 demande user] fonds boutique (district) + boutique premium (gemmes) */
#market-screen     { background-image: linear-gradient(rgba(6,8,16,.44), rgba(6,8,16,.66)), url('../icone/distrcit_boutique.png') !important; }
#gem-shop-screen   { background-image: linear-gradient(rgba(6,8,16,.44), rgba(6,8,16,.66)), url('../icone/boutique_premium_fond.png') !important; }
/* [2026-07-04 demande user] fonds forteresse (donjons) + citadelle */
#dungeons-screen   { background-image: linear-gradient(rgba(6,8,16,.44), rgba(6,8,16,.66)), url('../icone/forterres_fond_decran.png') !important; }
/* La citadelle est un OVERLAY dynamique (#mx-citadel) avec un background inline → le
   !important bat l'inline (sans !important). Voile sombre + image. */
#mx-citadel {
  background-image: linear-gradient(rgba(6,8,16,.52), rgba(6,8,16,.72)), url('../icone/citadel_fond_decran.png') !important;
}
/* [2026-07-06 demande user] login + combat mystique (portail) + guilde + classement (rank) */
#login-screen      { background-image: linear-gradient(rgba(6,8,16,.46), rgba(6,8,16,.66)), url('../icone/fond_monarque_page_login.png') !important; }
#portal-screen     { background-image: linear-gradient(rgba(6,8,16,.44), rgba(6,8,16,.64)), url('../icone/fond_combat_epqiue.png') !important; }
#guild-screen      { background-image: linear-gradient(rgba(6,8,16,.46), rgba(6,8,16,.66)), url('../icone/fond_guilde.png') !important; }
/* #mx-weight-rank = modale dynamique (voir le rang de tout le monde) → fond derrière la carte */
#mx-weight-rank    { background-image: linear-gradient(rgba(6,8,16,.60), rgba(6,8,16,.78)), url('../icone/fond_rank_onglet.png') !important; }
/* ⚠️ ces images sont en PAYSAGE (~1024×500/683) — contrairement aux maps portrait —
   → COVER dans les DEUX orientations (contain = bande écrasée en haut sur téléphone). */
#profile-screen, #inventory-screen, #training-screen, #market-screen, #gem-shop-screen,
#dungeons-screen, #mx-citadel, #pvp-battle-screen,
#login-screen, #portal-screen, #guild-screen, #mx-weight-rank {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: #060810 !important;
}

/* Overlay d'attente PvP (les "60 secondes") → la map d'attente d'arène en fond
   (remplace le fond noir inline rgba(0,0,0,.92) ; le !important bat le style inline). */
#pvp2-search {
  /* [2026-06-14 FIX] L'ancien `background:#060810 linear-gradient(...), url(...)`
     était INVALIDE (couleur en 1er layer interdite en multi-layer) → toute la
     déclaration rejetée → AUCUNE map d'attente ne s'affichait. Propriétés
     séparées = valides. contain → image d'attente d'arène ENTIÈRE. */
  background-color: #060810 !important;
  background-image: linear-gradient(rgba(6,8,16,.28), rgba(6,8,16,.55)), url('../icone/attente_arene.png') !important;
  background-position: center, center !important;
  background-size: cover, contain !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ============================================================
   [UI-POLISH 2026-06-12] PAYSAGE/DESKTOP → cover (claude-maps-6)
   ------------------------------------------------------------
   Les maps sont des images PORTRAIT (~941×1672). En PAYSAGE,
   `contain` les réduit à une bande verticale au centre (moche).
   → en landscape : cover + position center 20% (l'image remplit
   l'écran, légèrement recadrée, on garde le haut de la scène).
   En portrait (téléphone) : rien ne change, contain reste.
   Les voiles sombres (gradient en 1ère couche) sont conservés.
   ============================================================ */
@media (orientation: landscape) {
  #heal-screen,
  #quests-screen,
  #friends-screen,
  #battlepass-screen,
  #auction-screen,
  #hdv2-screen,
  #joker-screen,
  #profile-screen,
  #inventory-screen,
  #training-screen,
  #pvp-battle-screen {
    background-size: cover !important;
    background-position: center 20% !important;
  }
  /* Overlay d'attente PvP : en paysage, cover (propriétés séparées valides). */
  #pvp2-search {
    background-color: #060810 !important;
    background-image: linear-gradient(rgba(6,8,16,.28), rgba(6,8,16,.55)), url('../icone/attente_arene.png') !important;
    background-position: center, center 20% !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
  }
}