/* =====================================================================================================
   MARQUE-PAGES DU HUD (PC) — 2026-10-19, demande Simon :
   « revoie le design UX de la popup des améliorations… idem quand il y a un nombre d'améliorations
     dispo. La popup des navires (canard, bot de minage…) doit être affichée latéralement à gauche sur
     PC, au-dessus de la popup d'améliorations, et ne s'afficher que si on passe la souris dessus. Avoir
     une sorte de marque-page visuel pour savoir que si on met la souris sur le côté, la popup arrive.
     Et stopper le bateau au bout de 1 s si la souris est par-dessus la popup. »

   Principe : deux ONGLETS collés au bord GAUCHE de l'écran (Flotte au-dessus, Améliorations
   dessous). Survoler un onglet fait GLISSER son panneau depuis la gauche ; le quitter le referme.
   Le nombre de points à dépenser vit sur l'onglet (pastille jaune qui pulse) au lieu de la vignette
   « x3 » penchée qui recouvrait la Flotte. Comportement : js/hud-marque-pages.js (HUDTABS).
   Scopé `body.hudtabs:not(.vtouch)` : le mobile garde ses panneaux plein écran, inchangés.
   Spécificité volontairement HAUTE (html body … #hud #id) : les panneaux portent déjà une douzaine de
   règles `!important` héritées (style.css, glass-ui.css, charte-pastel.css, arcade-hud.css).
   ===================================================================================================== */

:root {
  --ht-ink: #1a3d55;
  --ht-cream: #fff8e6;
  --ht-yellow: #ffd23c;
  --ht-blue: #00b2e1;
  --ht-green: #4cbf56;
  /* revue UX 2026-10-22 (n°3) : un panneau ouvert doit dépasser l'encart de quêtes (#pq-quests, z 30) */
  --ht-z-panel: 31;
  --ht-z-tabs: 32;
}

/* ---------- 1. LES ONGLETS (marque-pages) ---------- */
#hudtabs { display: none; }
html body.hudtabs:not(.vtouch).in-game #hud #hudtabs {
  display: flex; flex-direction: column-reverse; gap: 10px;
  position: fixed; left: 0; bottom: 22px; z-index: var(--ht-z-tabs);
}
html body.hudtabs #hudtabs .hudtab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 38px; padding: 10px 0 12px; margin: 0;
  background: var(--ht-cream); color: var(--ht-ink);
  border: 3px solid var(--ht-ink); border-left: 0; border-radius: 0 14px 14px 0;
  box-shadow: 0 4px 0 var(--ht-ink);
  font: 900 11px/1 "Fredoka", "Segoe UI", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; pointer-events: auto;
  transition: transform .16s ease, width .16s ease, background .16s ease;
}
html body.hudtabs #hudtabs .hudtab:hover,
html body.hudtabs #hudtabs .hudtab.is-open { width: 46px; background: #ffffff; }
html body.hudtabs #hudtabs .hudtab .ht-ic { width: 20px; height: 20px; display: block; }
html body.hudtabs #hudtabs .hudtab .ht-lbl { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
/* liseré de couleur du côté écran : bleu = améliorations, vert = flotte */
html body.hudtabs #hudtabs .hudtab::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--ht-blue);
}
html body.hudtabs #hudtabs #hudtab-fleet::before { background: var(--ht-green); }
html body.hudtabs:not(.has-fleet) #hudtabs #hudtab-fleet { display: none; }

/* ---------- 2. PASTILLE « N AMÉLIORATIONS DISPO » ---------- */
html body.hudtabs #hudtabs .ht-n {
  position: absolute; top: -10px; right: -12px;
  min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
  display: none; align-items: center; justify-content: center;
  background: var(--ht-yellow); color: var(--ht-ink);
  border: 3px solid var(--ht-ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ht-ink);
  font: 900 13px/1 "Fredoka", "Segoe UI", system-ui, sans-serif; letter-spacing: 0;
}
html body.hudtabs #hudtabs .ht-n.on { display: inline-flex; }
html body.hudtabs #hudtabs .ht-n.bump { animation: htBump .42s cubic-bezier(.3, 1.6, .5, 1); }
html body.hudtabs #hudtabs #hudtab-fleet .ht-n { background: #ffffff; font-size: 11px; }
/* des points à dépenser : l'onglet respire en jaune (sans masquer le jeu) */
html body.hudtabs.has-stat-pts #hudtabs #hudtab-stats { animation: htGlow 1.6s ease-in-out infinite; }
html body.hudtabs.has-stat-pts #hudtabs #hudtab-stats.is-open { animation: none; }
@keyframes htGlow {
  0%, 100% { background: var(--ht-cream); transform: translateX(0); }
  50% { background: #fff1b0; transform: translateX(3px); }
}
@keyframes htBump { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- 3. LES PANNEAUX : cachés hors survol, glissent depuis la gauche ---------- */
html body.hudtabs:not(.vtouch) #hud #stats-panel,
html body.hudtabs:not(.vtouch) #hud #fleet-panel {
  display: block !important;
  position: fixed !important; left: 50px !important; top: auto !important; right: auto !important;
  width: 276px !important; max-height: calc(100vh - 40px) !important; overflow: auto !important;
  margin: 0 !important; box-sizing: border-box !important;
  background: var(--ht-cream) !important; background-image: none !important;
  border: 4px solid var(--ht-ink) !important; border-radius: 18px !important;
  box-shadow: 0 5px 0 var(--ht-ink), 0 14px 30px rgba(10, 30, 45, .25) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important;
  padding: 10px 12px 12px !important;
  z-index: var(--ht-z-panel) !important;
  transform: translateX(calc(-100% - 70px)) !important; opacity: 0 !important; pointer-events: none !important;
  transition: transform .22s cubic-bezier(.2, .9, .25, 1), opacity .16s ease !important;
  animation: none !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel { bottom: var(--ht-stats-b, 22px) !important; }
html body.hudtabs:not(.vtouch) #hud #fleet-panel { bottom: var(--ht-fleet-b, 150px) !important; }
html body.hudtabs:not(.vtouch).ht-open-stats #hud #stats-panel,
html body.hudtabs:not(.vtouch).stats-pinned #hud #stats-panel,
html body.hudtabs:not(.vtouch).ht-open-fleet.has-fleet #hud #fleet-panel,
html body.hudtabs:not(.vtouch).fleet-pinned #hud #fleet-panel {
  transform: none !important; opacity: 1 !important; pointer-events: auto !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel::before, html body.hudtabs:not(.vtouch) #hud #stats-panel::after,
html body.hudtabs:not(.vtouch) #hud #fleet-panel::before { display: none !important; }

/* en-têtes : titre encre + compteur en pilule */
html body.hudtabs:not(.vtouch) #hud #stats-panel h3,
html body.hudtabs:not(.vtouch) #hud #fleet-panel h3 {
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 0 8px !important; padding: 0 30px 0 0 !important;
  color: var(--ht-ink) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important;
  font: 900 14px/1.2 "Fredoka", "Segoe UI", system-ui, sans-serif !important; letter-spacing: .04em !important; text-transform: uppercase !important;
  border: 0 !important; background: none !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel #stat-quota,
html body.hudtabs:not(.vtouch) #hud #fleet-panel #fleet-count {
  margin-left: auto !important; background: #e8f1f6 !important; color: var(--ht-ink) !important;
  border: 2px solid var(--ht-ink) !important; border-radius: 999px !important; padding: 1px 8px !important;
  font-size: 11px !important; -webkit-text-stroke: 0 !important;
}
/* points à dépenser : pilule jaune dans l'en-tête (remplace la vignette « x3 » penchée) */
html body.hudtabs:not(.vtouch) #hud #stat-pts-badge {
  position: absolute !important; top: 9px !important; right: 10px !important; left: auto !important; bottom: auto !important;
  transform: none !important; rotate: none !important; animation: none !important;
  background: var(--ht-yellow) !important; color: var(--ht-ink) !important;
  border: 2.5px solid var(--ht-ink) !important; border-radius: 999px !important; box-shadow: 0 2px 0 var(--ht-ink) !important;
  padding: 1px 7px !important; font: 900 12px/1.3 "Fredoka", "Segoe UI", system-ui, sans-serif !important;
  -webkit-text-stroke: 0 !important; text-shadow: none !important; width: auto !important; height: auto !important;
}
html body.hudtabs:not(.vtouch) #hud #stat-pts-badge.hidden { display: none !important; }
html body.hudtabs:not(.vtouch) #hud .mob-panel-close { display: none !important; }

/* lignes d'amélioration : barre claire à paliers, nom lisible, « + » rond coloré */
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-row { display: flex !important; align-items: center !important; gap: 7px !important; margin: 6px 0 !important; }
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-bar {
  flex: 1 1 auto !important; position: relative !important; height: 24px !important; border-radius: 999px !important;
  background: #e3ecf2 !important; border: 2.5px solid var(--ht-ink) !important; box-shadow: none !important; overflow: hidden !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-fill { background: var(--c, var(--ht-blue)) !important; opacity: 1 !important; border-radius: 0 !important; }
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-name {
  color: var(--ht-ink) !important; -webkit-text-stroke: 3px #ffffff !important; paint-order: stroke fill !important;
  font: 900 12px/19px "Fredoka", "Segoe UI", system-ui, sans-serif !important; text-shadow: none !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-key {
  background: var(--ht-ink) !important; color: #ffffff !important; border-radius: 6px !important;
  font: 900 10px/15px "Fredoka", "Segoe UI", system-ui, sans-serif !important; min-width: 15px !important; height: 15px !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-plus {
  flex: 0 0 28px !important; width: 28px !important; height: 28px !important; padding: 0 !important;
  background: var(--c, var(--ht-blue)) !important; color: #ffffff !important;
  border: 2.5px solid var(--ht-ink) !important; border-radius: 50% !important; box-shadow: 0 3px 0 var(--ht-ink) !important;
  font: 900 18px/22px "Fredoka", "Segoe UI", system-ui, sans-serif !important; -webkit-text-stroke: 1.5px var(--ht-ink) !important; paint-order: stroke fill !important;
  cursor: pointer !important;
}
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-plus:hover:not(.locked):not(.maxed) { transform: translateY(-1px) scale(1.08) !important; }
html body.hudtabs:not(.vtouch) #hud #stats-panel .stat-plus.locked { opacity: .3 !important; box-shadow: none !important; }
html body.hudtabs:not(.vtouch).has-stat-pts #hud #stats-panel .stat-plus:not(.locked):not(.maxed) { animation: htPlus 1.2s ease-in-out infinite !important; }
@keyframes htPlus { 0%, 100% { box-shadow: 0 3px 0 var(--ht-ink); } 50% { box-shadow: 0 3px 0 var(--ht-ink), 0 0 0 4px rgba(255, 210, 60, .65); } }

/* lignes de flotte */
html body.hudtabs:not(.vtouch) #hud #fleet-panel .fleet-row {
  background: #ffffff !important; border: 2.5px solid var(--ht-ink) !important; border-radius: 12px !important;
  box-shadow: 0 3px 0 var(--ht-ink) !important; margin: 0 0 7px !important; opacity: .55;
}
html body.hudtabs:not(.vtouch) #hud #fleet-panel .fleet-row[data-owned] { opacity: 1; background: #f2fbf3 !important; }

/* ---------- 4. NAVIRE À L'ARRÊT (souris posée > 1 s sur un panneau) ---------- */
html body.hudtabs:not(.vtouch) #hud #stats-panel.ht-holding,
html body.hudtabs:not(.vtouch) #hud #fleet-panel.ht-holding { border-color: #2e8236 !important; }
html body.hudtabs:not(.vtouch) #hud #stats-panel.ht-holding h3::before,
html body.hudtabs:not(.vtouch) #hud #fleet-panel.ht-holding h3::before {
  content: '⚓'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ht-green); color: #fff;
  border: 2px solid var(--ht-ink); font: 900 11px/1 system-ui, sans-serif; letter-spacing: 0;
}