/* ============================================================
   ASTRA GENESIS, 04-HUD-NAV.CSS
   v0.2.0
   - HUD : chaque ressource affiche désormais son NOM en toutes
     lettres (plus seulement une icône + un chiffre), et devient
     cliquable pour ouvrir une fiche stats complète.
   - Navigation : barre HORIZONTALE en bas de l'écran (remplace
     l'ancien anneau radial v0.1.0, jugé trop intimidant).
   ============================================================ */

/* ---------- HUD ---------- */
#hud{
  position:fixed;top:0;left:0;right:0;height:var(--hud-h);z-index:600;
  display:flex;align-items:stretch;
  background:var(--panel);
  border-bottom:1px solid var(--line-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* v0.9.0 : tout ce bloc HUD utilise --text-scale (fixe), pas --scale,
   pour rester intact quand --scale change (demande explicite : ne
   jamais toucher à la barre du haut). */
/* v0.60.1 : bloc de marque sur deux lignes (wordmark, puis version +
   pseudo, puis localisation), et séparation par un biseau plutôt qu'un
   trait droit (voir .hud-bevel plus bas, DA de la maquette cible). */
.hud-brand{
  display:flex;align-items:center;gap:10px;padding:0 calc(18px*var(--text-scale));
  font-family:var(--font-display);font-weight:700;font-size:.86rem;letter-spacing:.2em;color:var(--ink-1);
  white-space:nowrap;flex:none;
}
.hud-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none;}
.hud-brand-txt{display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.1;}
.hud-wordmark{font-size:.86rem;letter-spacing:.2em;}
.hud-brand-sub{display:flex;align-items:center;gap:6px;}
.hud-brand .ver{font-family:var(--font-mono);font-size:.58rem;color:var(--ink-3);letter-spacing:.05em;cursor:pointer;}
.hud-brand .ver:hover{color:var(--cyan);text-decoration:underline;}
.hud-brand .pseudo{
  font-family:var(--font-mono);font-size:.58rem;color:var(--ink-2);letter-spacing:.04em;
  font-weight:400;text-transform:none;
}
.hud-brand .pseudo:not(:empty)::before{content:"· ";color:var(--ink-3);}

/* biseau : un trait incliné entre deux blocs du HUD, jamais une bordure
   droite (repris de la maquette). Posé en ::after pour rester purement
   décoratif et ne jamais décaler la mise en page. */
.hud-brand::after,.hud-right::before{
  content:"";width:calc(14px*var(--text-scale));align-self:stretch;flex:none;
  background:linear-gradient(105deg, transparent 46%, var(--line-strong) 46%, var(--line-strong) 54%, transparent 54%);
}
.hud-brand::after{margin-left:calc(6px*var(--text-scale));}
.hud-right::before{margin-right:calc(6px*var(--text-scale));}

.hud-res{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
.hud-res::-webkit-scrollbar{display:none;}
.res{
  display:flex;align-items:center;gap:calc(9px*var(--text-scale));padding:0 calc(13px*var(--text-scale));
  white-space:nowrap;cursor:pointer;transition:background .15s;flex:none;
}
.res:hover{background:rgba(45,212,191,.05);}
/* v0.60.1 : icône dans un carré arrondi teinté par ressource
   (AG.resTint, js/00-data.js), avec un léger glow de la même teinte.
   --res-tint est posé en style inline par AG.renderHUD. */
.res .ic{
  width:calc(30px*var(--text-scale));height:calc(30px*var(--text-scale));flex:none;
  display:flex;align-items:center;justify-content:center;border-radius:calc(9px*var(--text-scale));
  color:var(--res-tint, var(--cyan));
  background:color-mix(in srgb, var(--res-tint, var(--cyan)) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--res-tint, var(--cyan)) 38%, transparent);
  box-shadow:0 0 calc(10px*var(--text-scale)) color-mix(in srgb, var(--res-tint, var(--cyan)) 22%, transparent);
}
.res .ic svg{width:calc(16px*var(--text-scale));height:calc(16px*var(--text-scale));}
.res .txt{display:flex;flex-direction:column;line-height:1.15;}
.res .name{font-family:var(--font-head);font-size:.66rem;letter-spacing:.03em;color:var(--ink-2);text-transform:uppercase;}
.res .num-row{display:flex;align-items:baseline;gap:6px;}
.res .v{font-family:var(--font-mono);font-size:.84rem;font-weight:600;color:var(--ink-1);}
.res .v.up{color:var(--lime);}
.res .v.down{color:var(--rose);}
/* v0.12.1 : séparateur discret entre groupes brutes / raffinées / spéciales */
.res.res-group-start{border-left:1px solid rgba(255,255,255,.10);}
/* v0.70.2 : cluster centré dans l'espace libre de la barre (primaires +
   hub + vitaux). Marges auto sur le premier et le dernier enfant plutôt
   que justify-content:center : si la barre déborde, le début reste
   atteignable au défilement (centrage « sûr »). Le hub lui-même est
   stylé dans css/15-secondary-resources.css. */
.hud-res > :first-child{margin-left:auto;}
.hud-res > :last-child{margin-right:auto;}

/* v0.60.1 : cluster droit dans un panel biseauté (horloge + cloche +
   options + admin), séparé du bandeau de ressources par le même biseau
   que la marque à gauche. */
.hud-right{
  display:flex;align-items:center;gap:6px;padding:0 calc(12px*var(--text-scale));flex:none;
  background:linear-gradient(180deg, rgba(18,28,43,.55), rgba(10,16,26,.55));
}
.hud-btn{
  width:calc(38px*var(--text-scale));height:calc(38px*var(--text-scale));border-radius:50%;border:1px solid var(--line);background:var(--panel-soft);
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:.15s;position:relative;
}
.hud-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.hud-btn svg{width:calc(17px*var(--text-scale));height:calc(17px*var(--text-scale));}
.hud-badge{
  position:absolute;top:-3px;right:-3px;background:var(--amber);color:#241300;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  min-width:14px;height:14px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;
}
/* v0.60.1 : la localisation vit sous le wordmark, plus à droite du HUD. */
.hud-clock{font-family:var(--font-mono);font-size:.6rem;color:var(--cyan);letter-spacing:.06em;white-space:nowrap;font-weight:400;}

/* ---------- RIBBON D'ALERTE (notifications v1) ----------
   Bannière pleine largeur sous le HUD, pour les états EN COURS (pas les
   événements one-off, ceux-là passent par les toasts). Ambre = avertissement,
   rose = critique (DA v0.14). Max 2 lignes affichées + compteur "+N",
   voir AG.renderRibbon (js/02b-notifications.js). Jamais bloquante : ne
   capte aucun clic en dehors d'elle-même. */
#ribbon-alerts{
  position:fixed;top:var(--hud-h);left:0;right:0;z-index:590;
  display:flex;flex-direction:column;gap:1px;
}
.ribbon-row{
  display:flex;align-items:center;gap:10px;padding:calc(8px*var(--text-scale)) calc(20px*var(--text-scale));
  font-family:var(--font-head);font-size:.8rem;letter-spacing:.02em;color:#fff;
  /* v0.74.0 : dégradé horizontal, valeurs en jetons (css/01-tokens.css) */
  --ribbon-c:var(--ribbon-amber);
  background:linear-gradient(90deg, var(--ribbon-c) 0%, var(--ribbon-c) var(--ribbon-hold), var(--ribbon-end) var(--ribbon-fade), var(--ribbon-end) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--ribbon-c) 55%, transparent);
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.ribbon-row.amber{--ribbon-c:var(--ribbon-amber);}
.ribbon-row.rose{--ribbon-c:var(--ribbon-rose);}
.ribbon-row.cyan{--ribbon-c:var(--ribbon-cyan);}
.ribbon-row .ribbon-ic{flex:none;width:16px;height:16px;}
.ribbon-row .ribbon-ic svg{width:100%;height:100%;}
.ribbon-row .ribbon-msg{flex:1;}
.ribbon-row .ribbon-go{
  flex:none;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;transition:.15s;
}
.ribbon-row .ribbon-go:hover{background:rgba(255,255,255,.22);}
.ribbon-more{
  align-self:center;margin:2px 0;font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}

/* ---------- NAVIGATION HORIZONTALE ---------- */
#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:800;height:var(--nav-h);
  display:flex;align-items:center;justify-content:center;
  padding:0 calc(14px*var(--scale)) calc(10px*var(--scale));
  pointer-events:none; /* seule la barre elle-même capte les clics, pas toute la bande */
}
.nav-bar{
  pointer-events:auto;
  display:flex;align-items:stretch;gap:4px;
  max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:var(--panel);
  border:1px solid var(--line-strong);border-radius:calc(18px*var(--scale));
  padding:calc(7px*var(--scale));
  box-shadow:0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav-bar::-webkit-scrollbar{display:none;}
.nav-btn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:calc(72px*var(--scale));padding:calc(9px*var(--scale)) calc(12px*var(--scale));
  border-radius:calc(13px*var(--scale));border:1px solid transparent;background:transparent;
  color:var(--ink-3);cursor:pointer;transition:.18s;
}
.nav-btn svg{width:calc(19px*var(--scale));height:calc(19px*var(--scale));}
/* v0.11.0 : icônes de nav qui basculent sur un sprite sci-fi
   (AG.icOrSprite) plutôt que l'icône SVG dessinée à la main. */
.nav-btn .sprite-ic{width:calc(22px*var(--scale));height:calc(22px*var(--scale));object-fit:contain;}
.nav-btn .lbl{font-family:var(--font-head);font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.nav-btn:hover{color:var(--ink-1);background:rgba(255,255,255,.04);}
.nav-btn.active{color:var(--cyan);background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.35);}
.nav-btn.active svg{filter:drop-shadow(0 0 6px rgba(45,212,191,.5));}
.nav-btn.active .sprite-ic{filter:drop-shadow(0 0 6px rgba(45,212,191,.5));}
.nav-btn .ping{position:absolute;top:6px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--amber);}
.nav-sep{width:1px;align-self:stretch;margin:6px 4px;background:var(--line);flex:none;}

/* v0.66.0 : 11 entrées. Sous 1440 px, icônes seules (libellé porté par le
   tooltip, AG.syncNavTips, js/03-nav.js) ; libellés visibles à partir de
   1440 px. Même seuil que AG.NAV_LABELS_MIN_W. */
@media(max-width:1439px){
  .nav-btn .lbl{display:none;}
  .nav-btn{min-width:calc(52px*var(--scale));padding:calc(11px*var(--scale)) calc(10px*var(--scale));}
}

/* ---------- DOCK DES FILES (v0.14.1) ----------
   Construction + expédition, toujours visible au-dessus de la nav
   quel que soit l'écran actif (AG.renderDock, js/01-engine.js), masqué
   dès qu'aucune file n'est active. Une future file de recherche
   s'ajouterait ici de la même façon (voir commentaire dans
   AG.renderDock). */
#dock{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 14px);transform:translateX(-50%);z-index:790;
  padding:calc(9px*var(--scale)) calc(16px*var(--scale));
  display:flex;flex-direction:column;gap:6px;max-width:min(680px, 92vw);
}
.dock-row{display:flex;align-items:center;gap:12px;}
.dock-lab{display:flex;flex-direction:column;line-height:1.2;min-width:calc(140px*var(--scale));}
.dock-lab span:first-child{font-family:var(--font-head);font-size:.78rem;color:var(--ink-1);}
.dock-sub{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;}
.dock-time{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);min-width:38px;text-align:right;}
.bar.violet i{background:linear-gradient(90deg, rgba(167,139,250,.5), var(--violet));}