/* ============================================================
   v99-ui-polish.css  [UI-POLISH 2026-06-12]  (claude-uipolish-1)
   ------------------------------------------------------------
   Polish UI statique (CSS only, zéro JS) — 3 chantiers :
   2) Titres de page (.section-luxe-title) réduits de ~30 %
   3) Quêtes du royaume : cartes opaques + bordures contrastées
   4) Battle pass : paliers opaques, texte blanc, bords visibles
   Chargé EN DERNIER dans index.html (après v99-maps.css) →
   gagne les égalités de spécificité ; !important UNIQUEMENT
   là où il faut battre des styles inline générés par le JS.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   2) TITRES DE PAGE/ÉCRAN trop gros ("Mes Amis", "Salle de
      Repos", "Quêtes du Royaume"…). Classe = .section-luxe-title
      (main.css:3680, clamp(30px,5.5vw,42px)) — utilisée UNIQUEMENT
      comme header d'écran (25 occurrences index.html, 0 carte/bouton).
      −30 % responsive + sous-titre (.section-luxe-caption 13px→11.5px).
   ════════════════════════════════════════════════════════════ */
.section-luxe-title {
  font-size: clamp(20px, 4.2vw, 29px) !important; /* avant : clamp(30px,5.5vw,42px) */
  margin-bottom: 6px !important;
}
.section-luxe-caption {
  font-size: 11.5px !important; /* avant : 13px */
}

/* ════════════════════════════════════════════════════════════
   3) QUÊTES DU ROYAUME — cartes illisibles sur le fond quest.png.
      Les cartes sont générées par main.js showQuestsRank() via
      createElement + style.cssText (fond rgba(0,0,0,.35), bordure
      #ffd70066 40% alpha) et appendées dans #quest-list.
      → !important requis pour battre le style inline.
   ════════════════════════════════════════════════════════════ */

/* Règle ROBUSTE (toutes les cartes) : fond sombre opaque + ombre.
   On ne touche PAS à border-color ici → les cartes complétées
   gardent leur bordure verte inline (#2ecc71), zéro régression. */
#quests-screen #quest-list > div {
  background: rgba(8, 8, 14, 0.88) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55) !important;
}

/* Cartes EN COURS : bordure or VIF (au lieu de #ffd70066 40%).
   ⚠ Sélecteur dépendant de la sérialisation navigateur du
   style.cssText : #ffd70066 → "rgba(255, 215, 0, 0.4)" (Chrome/
   Firefox/Safari sérialisent avec espaces). Si le match rate,
   fallback gracieux = la règle robuste ci-dessus suffit déjà
   (bordure or 40% sur fond opaque = lisible). À VÉRIFIER RUNTIME. */
#quests-screen #quest-list > div[style*="rgba(255, 215, 0"] {
  border-color: #ffd700 !important;
}

/* Cartes COMPLÉTÉES : fond sombre teinté vert (la teinte verte
   inline rgba(46,204,113,.12) est écrasée par la règle robuste →
   on la restaure en version opaque). Même caveat sérialisation
   ("#2ecc71" → "rgb(46, 204, 113)"). À VÉRIFIER RUNTIME. */
#quests-screen #quest-list > div[style*="rgb(46, 204, 113)"] {
  background: rgba(10, 24, 17, 0.9) !important;
  border-color: #2ecc71 !important;
}

/* Bannière "Progression des Quêtes" (HTML statique index.html:2706,
   gradient translucide + bordure or 30 %) : même traitement. */
#quest-progress-banner {
  background: rgba(8, 8, 14, 0.88) !important;
  border-color: rgba(255, 215, 0, 0.6) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════
   4) BATTLE PASS — paliers peu visibles sur le fond map.
      Rendu par main.js renderBattlePass() via innerHTML →
      les attributs style sont VERBATIM (sélecteurs [style*=...]
      fiables, pas de sérialisation). Chaque cellule de récompense
      porte onclick="claimBattlePassReward(...)".
   ════════════════════════════════════════════════════════════ */

/* Toutes les cellules de palier : fond sombre OPAQUE + liseré
   intérieur subtil + ombre. On ne touche pas à border-color →
   les états réclamé (#4ecdc4/#aa44ff) et palier courant (teinte
   40 %) restent distincts via leur bordure inline. */
#battlepass-content div[onclick^="claimBattlePassReward"] {
  background-color: rgba(10, 11, 20, 0.94) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}

/* Cellules verrouillées/standard : leur bordure inline
   rgba(255,255,255,0.04) est invisible → on la rend perceptible. */
#battlepass-content div[onclick^="claimBattlePassReward"][style*="rgba(255,255,255,0.04)"] {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Libellés de récompense (inline color:#e0e0f0) → blanc pur.
   Le sélecteur n'attrape PAS les libellés réclamés (teal/violet). */
#battlepass-content div[onclick^="claimBattlePassReward"] div[style*="color:#e0e0f0"] {
  color: #fff !important;
}

/* Sous-libellés "Gratuit" (inline #555) et "Premium" (inline
   #6633aa) : trop sombres sur la map → éclaircis. */
#battlepass-content div[onclick^="claimBattlePassReward"] div[style*="color:#555"] {
  color: #9aa3b8 !important;
}
#battlepass-content div[onclick^="claimBattlePassReward"] div[style*="color:#6633aa"] {
  color: #b48ae0 !important;
}

/* Numéros de palier verrouillés (inline color:#333, quasi
   invisibles sur la map) → gris lisible. Les débloqués (#ffd700)
   et le courant (#81ecff) ne matchent pas ce sélecteur. */
#battlepass-content div[style*="font-weight:900"][style*="color:#333"] {
  color: #7a7f95 !important;
}

/* Ligne "Saison en cours…" (inline color:#888 sous le header). */
#battlepass-screen > p {
  color: #c0c4d4 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}