/* ═══ in-game balance pill V4 — override des styles inline V2/V3 ═══
 *
 * Inclu dans les 6 pages jeux (blackjack/mines/crash/plinko/roulette/
 * boxes). Chacune a son propre `<div class="header-balance">…` avec
 * une CSS inline qui dessine le look "pièce dorée 3D" V2.
 *
 * V4 unifie le visuel avec le `.coin-badge` du reste du site :
 *   - rectangle flat 10px de bordure
 *   - icône KRU = SVG (pas de radial-gradient gold + lettre "K")
 *   - même hauteur que les autres triggers nav (Réseaux, user pill)
 *
 * `!important` partout car les règles inline des pages utilisent une
 * specificity identique. Le link doit être chargé APRÈS les styles
 * inline pour que ces overrides s'appliquent.
 *
 * Note : les pages utilisent un structure value+label en colonne. On
 * masque le label "Krucoins" et on remet la value en ligne pour matcher
 * exactement le format `[icon] [25 905]` de la nav coin-badge.
 */

.header-balance{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:9px 16px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
  transition:background .15s,border-color .15s,color .15s;
}
.header-balance:hover{
  background:rgba(239,68,68,.06) !important;
  border-color:rgba(239,68,68,.30) !important;
}

/* L'icône : remplace le radial-gradient gold + lettre K par le logo
 * SVG officiel KRU. Toujours rond visuellement (.svg lui-même est
 * circulaire) mais on retire le border-radius CSS pour laisser le
 * fichier SVG gérer sa forme. */
.header-balance__icon{
  width:22px !important;
  height:22px !important;
  border-radius:0 !important;
  background:url('/icons/krucoin-logo.svg') center/contain no-repeat !important;
  filter:drop-shadow(0 1px 3px rgba(239,68,68,.55));
  box-shadow:none !important;
  flex-shrink:0;
}
/* Neutralise la lettre "K" pseudo-element qui se superposait. */
.header-balance__icon::after{content:none !important;display:none !important}

/* Layout du wrapper value+label : passe en row, masque le label. */
.header-balance > div[style*="flex-direction:column"]{
  flex-direction:row !important;
  align-items:center !important;
}
.header-balance__value{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:1.25rem !important;
  letter-spacing:1px !important;
  color:#fff !important;
  line-height:1 !important;
  font-variant-numeric:tabular-nums !important;
  text-shadow:none !important;
  margin:0 !important;
}
/* "Krucoins" sous-texte → masqué (a11y-safe : reste dans le DOM). */
.header-balance__label{
  position:absolute !important;
  width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;
  overflow:hidden !important;clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;border:0 !important;
}

@media(max-width:720px){
  .header-balance{padding:7px 13px !important;gap:7px !important}
  .header-balance__icon{width:19px !important;height:19px !important}
  .header-balance__value{font-size:1.05rem !important;letter-spacing:.8px !important}
}

/* ═══ Header overflow fix sur les pages jeux ═══
 *
 * Problème sur certains téléphones (≤700px portrait) : la barre header
 * débordait à droite, le user-menu (avatar + chevron) sortait du
 * viewport. Cause : logo "LE KRU" (~120px) + mobile-toggle + sound-btn
 * + balance + user-menu > viewport.
 *
 * Fix : compaction progressive selon la largeur.
 * Cible toutes les pages jeux car elles partagent le même header
 * et ce fichier est déjà inclus partout. */

/* Tier 1 (≤700px) : réduit le sound-btn, réduit les gaps et padding. */
@media(max-width:700px){
  header{padding:12px 14px !important;gap:10px !important}
  header .sound-btn{width:32px !important;height:32px !important}
  header .header-right{gap:9px !important}
  header .mobile-toggle{width:36px !important;height:36px !important}
}

/* Tier 2 (≤540px) : remplace "LE KRU" texte par juste la barre. Avatar
 * user-menu sans pseudo (déjà géré dans auth-menu.css à 480px, on
 * remonte le seuil à 540 ici car le sound-btn occupe un slot en plus
 * vs les pages non-jeux). */
@media(max-width:540px){
  header .logo{font-size:0 !important;gap:0 !important;letter-spacing:0 !important}
  header .logo-bar{display:inline-block;width:22px !important}
  header{padding:10px 12px !important;gap:8px !important}
  header .header-right{gap:7px !important}
  .header-balance{padding:6px 11px !important;gap:6px !important}
  .header-balance__icon{width:17px !important;height:17px !important}
  .header-balance__value{font-size:.95rem !important;letter-spacing:.6px !important}
  .user-menu__name{display:none !important}
  .user-menu__trigger{padding:5px 9px 5px 5px !important}
}

/* Tier 3 (≤400px) : ultra-compact pour iPhone SE / petits Android. On
 * masque le sound-btn (le son reste désactivable via les controls du
 * jeu lui-même ou le bouton vidéo). */
@media(max-width:400px){
  header .sound-btn{display:none !important}
  header{padding:8px 10px !important;gap:6px !important}
  header .header-right{gap:6px !important}
  .header-balance{padding:5px 9px !important}
  .header-balance__value{font-size:.9rem !important}
}