/* ============================================================================
   RCF — UI-MICRO-02
   ÉCRAN DE JEU MOBILE : 6 JAUGES 2 × 3, SALAIRE DANS LA BARRE MÉTIER,
   BARRE MENU / BIBLE / CARRIÈRE RESSERRÉE

   Cible visuelle : la maquette validée (image B du script de micro-correction).

     · D1-D2 — les six tuiles « nom + grand nombre » deviennent six jauges,
       toujours en 2 lignes de 3, dans le même ordre (Technique, Connaissances,
       Réputation / Moral, Fatigue, Résilience). Le nom est écrit dans la
       jauge, au-dessus d'une barre épaisse et graduée. La valeur reste
       lisible, petite et discrète, DANS la barre, à son extrémité droite.
     · D3-D4 — le salaire est dans la barre métier, empilé au-dessus de
       « N saison(s) au poste » (déplacement des nœuds : src/ui/lot12-v4.js).
     · C4    — la tuile autonome « Salaire net mensuel » disparaît.
     · D5    — moins de vide autour de Menu / Bible / Carrière.

   Chargée EN DERNIER dans index.html, comme ui-micro-01-bandeau.css : c'est
   la seule façon de passer devant les `!important` de lot12-v4.css et de
   lot12-c7-targeted.css sans modifier ces feuilles. Tous les sélecteurs sont
   ancrés sous `.wrap:has(#scGame.on)` : aucun autre écran n'est atteint.
   Aucune couleur nouvelle : les teintes des barres restent celles que le
   rendu pose déjà en ligne sur chaque `.bar > i`.
   ========================================================================== */

/* ------------------------------------------------- barre métier + salaire */
.wrap:has(#scGame.on) #plate{
  grid-template-columns:minmax(0,1fr) auto!important;
  padding:8px 12px 8px 14px!important;min-height:62px!important;align-items:center!important
}
.wrap:has(#scGame.on) #plate .hud-pay{
  grid-column:2;grid-row:1/5;align-self:center;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  padding-left:12px;border-left:1px solid rgba(176,211,238,.18);min-width:0
}
.wrap:has(#scGame.on) #plate .hud-pay .k{
  font-family:var(--mono);font-size:7.8px!important;letter-spacing:.1em!important;text-transform:uppercase;
  color:#9cb1c3!important;line-height:1.1!important;white-space:nowrap;margin:0!important
}
.wrap:has(#scGame.on) #plate .hud-pay #vPay{
  font-family:var(--mono);font-size:17px!important;font-weight:700!important;line-height:1.05!important;
  color:var(--l12-yellow)!important;white-space:nowrap;margin:0!important;letter-spacing:.02em
}
.wrap:has(#scGame.on) #plate .hud-pay .xpline{
  font-size:7.8px!important;letter-spacing:.11em!important;line-height:1.1!important;
  padding:0!important;border:0!important;margin:1px 0 0!important;align-self:auto
}
/* C4 — plus de tuile salaire autonome sous les stats. */
.wrap:has(#scGame.on) #stats>.l12-hud-pay,
.wrap:has(#scGame.on) #stats>.stat.pay{display:none!important}

/* ------------------------------------------------------- 6 jauges en 2×3 */
.wrap:has(#scGame.on) #stats{gap:5px!important;margin:0 0 5px!important}
.wrap:has(#scGame.on) #stats>.l12-hud-stat{
  display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;
  min-height:0!important;padding:7px 8px 8px!important;border-radius:11px!important
}
.wrap:has(#scGame.on) #stats>.l12-hud-stat .k{
  display:flex!important;align-items:center!important;gap:5px!important;
  font-size:9px!important;letter-spacing:.04em!important;line-height:1.15!important;
  text-transform:uppercase;white-space:nowrap!important;margin:0!important;color:#c9d7e2!important
}
.wrap:has(#scGame.on) #stats>.l12-hud-stat .k>span{flex:0 0 auto}
/* La barre : la jauge elle-même, épaisse, arrondie, graduée tous les 20 %. */
.wrap:has(#scGame.on) #stats>.l12-hud-stat .bar{
  position:relative!important;height:10px!important;margin:0!important;border-radius:999px!important;overflow:hidden!important;
  border:1px solid rgba(190,222,245,.30)!important;box-sizing:content-box!important;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(200,226,246,.26) calc(20% - 1px) 20%) center/100% 50% no-repeat,
    rgba(0,0,0,.42)!important
}
.wrap:has(#scGame.on) #stats>.l12-hud-stat .bar>i{
  display:block!important;height:100%!important;border-radius:999px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 7px -2px rgba(255,255,255,.35)!important
}
/* La valeur : discrète, DANS la jauge, à son extrémité droite. */
.wrap:has(#scGame.on) #stats>.l12-hud-stat .v{
  position:absolute!important;right:13px!important;bottom:9px!important;z-index:1;
  font-family:var(--mono);font-size:8px!important;font-weight:700!important;line-height:10px!important;margin:0!important;
  color:#eef5fa!important;opacity:.82;text-shadow:0 0 3px #000,0 1px 1px #000;pointer-events:none
}

/* ------------------------------------ Menu / Bible / Carrière, resserrée */
.wrap:has(#scGame.on) .toolbar{row-gap:3px!important;margin:0 0 5px!important}
.wrap:has(#scGame.on) .toolbar .career-btn{min-height:40px!important;padding-top:4px!important;padding-bottom:4px!important}
.wrap:has(#scGame.on) #ambChip{min-height:24px!important;padding:2px 9px!important;margin:0!important;line-height:1.1!important}

/* ----------------------------------------------------------- petits écrans */
@media(max-width:380px){
  .wrap:has(#scGame.on) #stats>.l12-hud-stat{padding:6px 6px 7px!important}
  .wrap:has(#scGame.on) #stats>.l12-hud-stat .k{font-size:8.2px!important;gap:4px!important;letter-spacing:.02em!important}
  .wrap:has(#scGame.on) #stats>.l12-hud-stat .v{right:10px!important;bottom:8px!important}
  .wrap:has(#scGame.on) #plate .hud-pay{padding-left:9px}
  .wrap:has(#scGame.on) #plate .hud-pay #vPay{font-size:15px!important}
}
@media(max-width:350px){
  .wrap:has(#scGame.on) #plate .hud-pay{
    grid-column:1;grid-row:5;align-self:stretch;align-items:flex-start;text-align:left;
    border-left:0;padding:4px 0 0;margin-top:4px;border-top:1px solid rgba(176,211,238,.14)
  }
  .wrap:has(#scGame.on) #stats>.l12-hud-stat .k{font-size:7.6px!important;letter-spacing:0!important}
}