/* ============================================================================
   HEADER PLAYER — area utente in alto a DESTRA
   Richiesta Angelo (21/07 23:40), rif. `inbox/new/header_player_angelo.png`:
     · username e ESCI vanno SPOSTATI su, nella barra dell'header (oggi stanno in
       una strisciolina al centro, sotto il menu: i tre segni rossi di Angelo sono
       proprio lo spazio vuoto della barra dove devono andare);
     · SALDO visibile nell'header, con l'occhio per NASCONDERLO;
     · BANDIERE (lingua) e ROTELLINA (impostazioni) allineate e della stessa taglia
       degli altri bottoncini (le due frecce rosse indicano quelle due).

   Design D, 22-07-2026. Vestito + stati; il wiring (menu, POST logout, cambio
   lingua, memoria dell'occhio) è di B — vedi `design_reference/header_user/markup.html`.

   Convive col tema importato: tutto è dentro `.hu`, nessun selettore globale,
   niente `!important`. Sulle pagine a tema importato va servito col `<link>`
   iniettato da `AppMobileShell` (come gli altri fogli in B-css-esterno-partial-D.md).
   ========================================================================== */

.hu{
  --hu-ink:#ffffff;
  --hu-dim:rgba(255,255,255,.72);
  --hu-line:rgba(255,255,255,.22);
  --hu-soft:rgba(255,255,255,.10);   /* fondo dei bottoncini */
  --hu-soft-h:rgba(255,255,255,.20); /* … al passaggio del mouse */
  --hu-acc:#f5c451;                  /* oro = denaro e azione principale */
  --hu-acc-ink:#0e2140;
  --hu-live:#e8402a;
  --hu-menu:#0e2140;                 /* fondo delle tendine */

  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  margin-left:auto;                  /* sta SEMPRE a destra nella barra */
  color:var(--hu-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:.86rem;line-height:1;
}

/* ── SALDO + occhio ──────────────────────────────────────────────────────────
   Un pezzo solo: cliccando la cifra si va al portafoglio, l'occhio nasconde.
   L'oro è il denaro, come in tutto il resto del prodotto. */
.hu-saldo{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px 6px 10px;border-radius:999px;
  background:var(--hu-soft);border:1px solid var(--hu-line);
}
.hu-saldo a{
  color:var(--hu-acc);font-weight:900;text-decoration:none;letter-spacing:.2px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hu-saldo a:hover{filter:brightness(1.1)}
.hu-eye{
  width:24px;height:24px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--hu-dim);font-size:14px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.hu-eye:hover{background:var(--hu-soft-h);color:var(--hu-ink)}
/* saldo nascosto: la cifra diventa pallini, la larghezza NON balla
   (`.hu--celato` la mette e la toglie B, ricordandola per il giocatore) */
.hu-saldo.hu--celato .hu-cifra{visibility:hidden}
.hu-saldo.hu--celato .hu-cifra::after{
  content:"••••";visibility:visible;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;letter-spacing:1px;
}
.hu-cifra{position:relative;display:inline-flex;align-items:center;min-width:64px;
  justify-content:flex-end}

/* ── UTENTE (username) + tendina del conto ──────────────────────────────────
   Era la pillola al centro sotto il menu: qui sale nella barra, accanto al saldo. */
.hu-user{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  background:var(--hu-soft);border:1px solid var(--hu-line);
  color:var(--hu-ink);text-decoration:none;font-weight:700;
  max-width:220px;
}
.hu-user:hover{background:var(--hu-soft-h)}
.hu-user .hu-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hu-user .hu-caret{opacity:.7;font-size:.7em}

/* ── bottoni parlanti (Deposita, Premi, Esci) ───────────────────────────── */
.hu-btn{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 13px;border-radius:999px;border:1px solid var(--hu-line);
  background:var(--hu-soft);color:var(--hu-ink);text-decoration:none;
  font:inherit;font-weight:800;cursor:pointer;
}
.hu-btn:hover{background:var(--hu-soft-h)}
.hu-btn--acc{background:var(--hu-acc);border-color:var(--hu-acc);color:var(--hu-acc-ink)}
.hu-btn--acc:hover{filter:brightness(1.06);background:var(--hu-acc)}
/* Esci: si legge come uscita, senza urlare */
.hu-btn--esci{color:#ffd9d4;border-color:rgba(232,64,42,.55)}
.hu-btn--esci:hover{background:rgba(232,64,42,.22);color:#fff}

/* ── bottoncini tondi: regali, messaggi, valuta, ROTELLINA, BANDIERA ─────────
   Tutti della STESSA taglia e sulla STESSA linea (era il disallineamento che
   Angelo segnava con le frecce). */
.hu-ic{
  width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--hu-line);
  background:var(--hu-soft);color:var(--hu-ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;position:relative;text-decoration:none;padding:0;
}
.hu-ic:hover{background:var(--hu-soft-h)}
.hu-ic .hu-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--hu-live);color:#fff;
  font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
/* la bandiera riempie il tondo e non si deforma mai */
.hu-ic--flag{overflow:hidden;padding:0}
.hu-ic--flag img{width:100%;height:100%;object-fit:cover;display:block}
.hu-ic--flag .hu-lingua{
  position:absolute;inset:auto 0 -1px 0;font-size:8px;font-weight:900;
  background:rgba(0,0,0,.45);text-align:center;letter-spacing:.4px;
}

/* focus da tastiera: visibile su tutto, non solo sui link */
.hu a:focus-visible,.hu button:focus-visible{outline:2px solid var(--hu-acc);outline-offset:2px}

/* ── tendine (conto, lingua, impostazioni) ──────────────────────────────────
   Aperte da B con la classe `.on` sul contenitore `.hu-wrap`. */
.hu-wrap{position:relative;display:inline-flex}
.hu-drop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:none;
  min-width:210px;padding:6px;border-radius:10px;white-space:nowrap;
  background:var(--hu-menu);border:1px solid var(--hu-line);
  box-shadow:0 12px 28px rgba(0,0,0,.38);
}
.hu-wrap.on .hu-drop{display:block}
.hu-drop a,.hu-drop button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 10px;border:0;border-radius:7px;background:transparent;
  color:var(--hu-ink);text-decoration:none;font:inherit;font-weight:600;
  cursor:pointer;text-align:left;
}
.hu-drop a:hover,.hu-drop button:hover{background:var(--hu-soft-h)}
.hu-drop hr{border:0;border-top:1px solid var(--hu-line);margin:5px 4px}
.hu-drop img{width:18px;height:13px;object-fit:cover;border-radius:2px;flex:none}
.hu-drop .on{color:var(--hu-acc);font-weight:800}

/* ── responsive: si spoglia per gradi, il denaro resta per ultimo ──────────── */
@media (max-width:1180px){
  .hu-btn .hu-txt{display:none}          /* i bottoni restano, solo icona */
  .hu-btn{padding:7px 10px}
}
@media (max-width:900px){
  .hu-user{max-width:130px}
  .hu-ic--gift,.hu-ic--cur{display:none} /* i secondari se ne vanno */
}
@media (max-width:640px){
  .hu{gap:6px}
  .hu-user .hu-nome{display:none}        /* resta l'omino: apre il conto */
  /* restano SALDO · Deposita · omino · bandiera. Esci, messaggi e rotellina non
     spariscono: vivono nella tendina dell'omino (vedi markup). */
  .hu-btn--premi,.hu-btn--esci,.hu-ic--msg,.hu-ic--set{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMA IMPORTATO — HEADER LOGGATO (rifiniture Dav 23/07). Il tema (`.hd-ctm--c`)
   rende la barra utente; qui la RIVESTIAMO via CSS (regola Dav: niente inline):
   1) sul SALDO l'icona diventa un OCCHIO (mostra/nascondi) al posto della freccia ↻;
   2) il MENU account uniformato agli altri: SFONDO BIANCO, testi BLU, pillole azzurre.
   Scoped a `.hd-ctm--c`, nessun !important non necessario. Il COMPORTAMENTO (toggle
   nascondi-saldo con memoria) è di B — vedi COORDINATION.
   ──────────────────────────────────────────────────────────────────────────── */

/* 1) SALDO: la freccia/reload → OCCHIO (mdi). Stesso glifo-font del tema. */
.hd-ctm.hd-ctm--c .account-info .info-amount .mdi-reload::before{content:"\F0208"}   /* mdi-eye */
.hd-ctm.hd-ctm--c .account-info .info-amount .mdi-reload{cursor:pointer;opacity:.85}
.hd-ctm.hd-ctm--c .account-info .info-amount .mdi-reload:hover{opacity:1}
/* saldo nascosto: B mette `.saldo-hidden` sul wrapper → la cifra si oscura, l'occhio si barra */
.hd-ctm.hd-ctm--c .account-info.saldo-hidden .info-amount{color:transparent;text-shadow:0 0 9px rgba(0,0,0,.55)}
.hd-ctm.hd-ctm--c .account-info.saldo-hidden .info-amount .mdi-reload{color:inherit;-webkit-text-fill-color:currentColor}
.hd-ctm.hd-ctm--c .account-info.saldo-hidden .info-amount .mdi-reload::before{content:"\F06D1"}   /* mdi-eye-off */

/* 2) MENU account (submenu) come gli altri: BIANCO + testi BLU + pillole azzurre */
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu{
  background:#fff;border:1px solid rgba(28,66,103,.14);border-radius:12px;
  box-shadow:0 14px 34px rgba(18,40,66,.20);padding:8px}
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu ul{list-style:none;margin:0;padding:0}
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu ul>li{margin:0 0 6px}
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu ul>li:last-child{margin-bottom:0}
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu ul>li>a{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:999px;
  background:#eaf2fb;color:#1c4267;font-weight:700;font-size:.9rem;text-decoration:none}
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu ul>li>a .mdi{color:#2a6bb0}
.hd-ctm.hd-ctm--c .account-menu .menu-list--submenu ul>li>a:hover{background:#d9e8f8;color:#12456f}