/* ============================================================
   shared-header.css — Barre de titre unifiée pour toutes les apps + hub.

   Pattern commun (position + design constants) :
   - Pill noire 25px rounded, height 100px, width 94vw centered
   - Logo à gauche (clipart-left) + h1 avec gradient text
   - Animation : barre gradient (transparent → var(--main-color) → transparent)
                 2px → 4px expand au hover (::before pseudo)
   - Halo : box-shadow glow 32px en var(--main-color) + translateY(-1px) au hover
   - Variante .is-saga : fond plein --main-color, gradient h1 désactivé

   Théming : chaque app override --main-color dans son :root ou inline :
     Arcade  --main-color: #00E5FF (cyan)
     Casino  --main-color: #D4AF37 (gold) — non appliqué (JS-driven topbar)
     Gaming  --main-color: #5DDC60 (green) -- déjà dans :root de accueil.css
     Music   --main-color: #FF66B3 (pink)
     Hub     --main-color: #2a2e2a (vert sombre) -- déjà défini
   ============================================================ */

.custom-header {
  display: flex;
  width: 94vw;
  margin: 20px auto 0;
  height: 100px;
  /* Le header est parfois un item d'un body en flex-column (ex. le Hub).
     Sans ceci, flex-shrink:1 le compresse dès que la page dépasse la
     hauteur du viewport (le Hub mesurait 85px au lieu de 100px). */
  flex-shrink: 0;
  gap: 4px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
  z-index: 100;
}

.btn-back {
  flex: 0 0 160px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 2.8rem;
  border: 5px solid rgba(0, 0, 0, 0.8);
  border-radius: 25px;
  box-sizing: border-box;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.title-banner {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.8);
  border: 5px solid rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  text-align: left;
  padding-left: 150px;
  transition: background 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Animation : barre gradient horizontal en haut de la pill, slide 2px → 4px au hover */
.title-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
                transparent 0%,
                var(--main-color, #2a2e2a) 50%,
                transparent 100%);
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease, height 0.3s ease;
}

/* Halo glow + lift au hover (cohérent pour btn-back ET title-banner) */
.btn-back:hover,
.btn-back:focus-visible,
.title-banner:hover,
.title-banner:focus-visible {
  box-shadow: 0 0 32px var(--main-color, #2a2e2a);
  transform: translateY(-1px);
  background-color: var(--main-color, #2a2e2a);
  border-color: var(--main-color, #2a2e2a);
  color: #fff;
  outline: none;
}
.title-banner:hover::before,
.title-banner:focus-visible::before {
  opacity: 1;
  height: 4px;
}

/* Au survol : titre devient tout blanc (sinon le dégradé white→var(--main-color)
   ne montre que sa portion blanche car la portion finale se confond avec le fond
   hover qui vient lui aussi de se teinter en --main-color). Le text-shadow
   discret assure la lisibilité sur fond clair. */
.title-banner:hover h1,
.title-banner:focus-visible h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
}

/* Variante saga : fond plein --main-color, gradient text désactivé (sinon illisible) */
.title-banner.is-saga {
  padding-left: 30px;
  background-color: var(--main-color, #2a2e2a);
  border-color: var(--main-color, #2a2e2a);
  --bg-color-2: rgb(39, 39, 39);
}
.title-banner.is-saga:hover,
.title-banner.is-saga:focus-visible {
  background-color: var(--bg-color-2, rgb(39, 39, 39));
  border-color: var(--bg-color-2, rgb(39, 39, 39));
  box-shadow: 0 0 32px var(--bg-color-2, rgb(39, 39, 39));
}
.title-banner.is-saga::before { display: none; }
.title-banner.is-saga h1 {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
  letter-spacing: 1px;
}

/* Sur les pages saga, le btn-back s'aligne sur le fond vert de la banner */
.custom-header:has(.title-banner.is-saga) .btn-back {
  background-color: var(--main-color, #2a2e2a);
  border-color: var(--main-color, #2a2e2a);
}
.custom-header:has(.title-banner.is-saga) .btn-back:hover,
.custom-header:has(.title-banner.is-saga) .btn-back:focus-visible {
  background-color: var(--bg-color-2, rgb(39, 39, 39));
  border-color: var(--bg-color-2, rgb(39, 39, 39));
  box-shadow: 0 0 32px var(--bg-color-2, rgb(39, 39, 39));
}

/* Logo clipart à gauche, ancré sur fond noir de la pill */
.clipart-left {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  padding-left: 45px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

.title-banner h1 {
  font-family: system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.6px;
  margin: 0;
  background: linear-gradient(90deg,
                #ffffff 0%,
                var(--main-color, #2a2e2a) 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Slot d'actions à droite (utilisé par Arcade status, Casino wallet, etc.) */
.title-banner-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 30px;
  z-index: 10;
}

/* === Responsive : mobile resserre === */
@media (max-width: 720px) {
  .custom-header { height: 80px; }
  .title-banner {
    padding-left: 110px;
    height: 80px;
    border-width: 4px;
  }
  .title-banner.is-saga { padding-left: 24px; }
  .clipart-left { padding-left: 24px; }
  .btn-back {
    flex: 0 0 110px;
    font-size: 2.2rem;
    height: 80px;
  }
  /* Sur mobile, le slot .title-banner-actions doit rester compact : on
     raccourcit les gaps, et on masque les éléments secondaires
     (.mood-badge) qui ne tiennent pas dans ~190px utiles. Wallet + mute
     restent visibles car fonctionnels. */
  .title-banner-actions {
    gap: 8px;
    padding-right: 14px;
  }
  .title-banner-actions .mood-badge { display: none; }
}
@media (max-width: 420px) {
  /* Très petit écran : wallet passe en mode compact (label "Credits"
     masqué, juste la valeur + chip). */
  .title-banner-actions { gap: 6px; padding-right: 8px; }
  .title-banner-actions .wallet-label { display: none; }
  /* BUG FIX mobile : entre 381px et ~407px (ex. iPhone 12/13/14 à
     390px), le custom-header fait 94vw et la zone actions (wallet
     ~122px + mute 42px) débordait du header ET sortait de l'écran
     (le mute finissait à x=391 sur un viewport 390). On reprend le
     sizing compact du bloc ≤380px (wallet + mute 36px) pour que tout
     tienne : ~137px utiles < 157px dispo à 390px. */
  .title-banner-actions .wallet { padding: 6px 10px; gap: 7px; }
  .title-banner-actions .wallet-chip { width: 16px; height: 16px; }
  .title-banner-actions .wallet-chip::after { font-size: 8px; }
  .title-banner-actions .wallet-value { font-size: 0.86rem; letter-spacing: 0.01em; }
  .title-banner-actions .icon-btn { width: 36px; height: 36px; }
  .title-banner-actions .icon-btn svg { width: 16px; height: 16px; }
}
/* === iPhone-SE / très-petits écrans — compression agressive ===
   Le topbar déborde encore à 320–380 px :
     - title text "Norex Casino" prend toute la place du h1 (padding-left 110)
     - wallet pill (~120 px) + mute (42 px) dépassent du custom-header 94vw
   Solution compact :
     - Réduit la hauteur du topbar (64 px au lieu de 80)
     - Réduit la padding-left du titre (84 px au lieu de 110)
     - Titre passe à 1.1rem (au lieu du clamp(2rem, 5vw, 3.5rem))
     - Wallet pill au minimum : chip 16 px, padding 6px 10px, font 0.86rem
     - Mute button shrinké à 32 px
   À 320 px vw : custom-header = 94vw = 301px, reste utile 301-84 = 217px,
   title ~80 px + actions (chip+gap+padding+value ≈ 60 + gap 6 + mute 32
   + padding-right 8) = ~106 px → 80+106 = 186 ≤ 217 ✓ */
@media (max-width: 380px) {
  .custom-header { height: 64px; margin-top: 14px; gap: 3px; }
  .title-banner {
    padding-left: 84px;
    height: 64px;
    border-width: 3px;
  }
  .title-banner.is-saga { padding-left: 18px; }
  .clipart-left { padding-left: 16px; }
  .btn-back {
    flex: 0 0 84px;
    height: 64px;
    font-size: 1.8rem;
    border-width: 3px;
  }
  .title-banner h1 {
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    /* Si le titre ne rentre pas, on cache Norex et on garde Casino */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .title-banner h1.is-truncated::before { content: ''; }
  .title-banner h1.is-truncated > .full-text { display: none; }
  .title-banner h1.is-truncated::after { content: attr(data-short); }
  .title-banner-actions {
    gap: 6px;
    padding-right: 8px;
  }
  .title-banner-actions .wallet {
    padding: 6px 10px;
    gap: 7px;
    border-radius: 100px;
  }
  .title-banner-actions .wallet-chip {
    width: 16px;
    height: 16px;
  }
  .title-banner-actions .wallet-chip::after { font-size: 8px; }
  .title-banner-actions .wallet-value {
    font-size: 0.86rem;
    letter-spacing: 0.01em;
  }
  .title-banner-actions .icon-btn {
    width: 32px;
    height: 32px;
  }
  .title-banner-actions .icon-btn svg { width: 16px; height: 16px; }
}

/* iPhone-SE (320 px) — un cran plus serré */
@media (max-width: 340px) {
  .custom-header { margin-top: 12px; }
  .title-banner { padding-left: 70px; }
  .clipart-left { padding-left: 12px; padding-right: 4px; }
  .title-banner h1 { font-size: 0.98rem; }
  .title-banner-actions { gap: 4px; padding-right: 6px; }
  .title-banner-actions .wallet { padding: 5px 8px; gap: 6px; }
  .title-banner-actions .wallet-value { font-size: 0.78rem; }
  .title-banner-actions .icon-btn { width: 28px; height: 28px; }
  .title-banner-actions .icon-btn svg { width: 14px; height: 14px; }
}