/* =====================================================================================================
   INTERFACE ÉPURÉE — planches P1 / P2 / P3 / P6 / P7 de la maquette validée par Simon (2026-10-21,
   docs/maquette-interface-epuree/DECISIONS.md). Comportement : js/hud-epure.js (HUDEPURE).
   On RANGE, on allège, on regroupe : rien n'est retiré, tout reste accessible (menu ☰ / pause, journal [J]).
   Feuille chargée EN DERNIER : les autres feuilles du HUD portent des dizaines de règles `!important` ; on les
   bat par la spécificité (ids) plutôt que par l'ordre.
   Accessibilité : texte blanc sur fond sombre translucide (≥ 4,5:1 même sur mer claire), focus visible, cibles
   ≥ 44 px au tactile, prefers-reduced-motion respecté.
   ===================================================================================================== */
:root {
  --he-bg: rgba(8, 20, 34, .62);          /* fond translucide des éléments du HUD */
  --he-bg-strong: rgba(8, 20, 34, .86);   /* bannières / toasts : lisibles sur n'importe quelle mer */
  --he-line: rgba(255, 255, 255, .22);
  --he-ink: #ffffff;
  --he-gold: #ffd24a;
  --he-xp: rgba(72, 190, 255, .80);
  --he-cargo: rgba(236, 188, 84, .82);
  --he-font: "Fredoka", "Segoe UI", system-ui, sans-serif;
}

/* ============================== P1 — UNE barre en bas, divisée en deux ============================== */
html body.in-game.in-game #hud #hud-bar {
  position: fixed; left: 50%; bottom: 10px; top: auto; right: auto; transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px)); height: 26px; --he-bar-h: 24px; box-sizing: border-box; z-index: 14;
  display: flex; align-items: stretch; margin: 0; padding: 0;
  border-radius: 13px; overflow: hidden; pointer-events: none;
  background: var(--he-bg); border: 1px solid var(--he-line); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  font-family: var(--he-font);
}
/* moitié gauche : niveau · type de navire · XP */
html body.in-game.in-game #hud #hud-bar #xpbar-wrap {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; flex: 1 1 60%; width: auto !important; min-width: 0; height: 100%; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; display: block !important;
}
html body.in-game.in-game #hud #hud-bar #xpbar-name { display: none !important; }
html body.in-game.in-game #hud #hud-bar #xpbar {
  position: relative; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden;
}
html body.in-game.in-game #hud #hud-bar #xpbar-fill { height: 100% !important; background: var(--he-xp) !important; border-radius: 0 !important; box-shadow: none !important; }
/* moitié droite : cale */
html body.in-game.in-game #hud #hud-bar #cargo-wrap {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; flex: 0 0 40%; width: auto !important; min-width: 0; height: 100%; margin: 0 !important; padding: 0 !important;
  display: block !important; background: none !important; border: 0 !important; border-left: 1px solid var(--he-line) !important; box-shadow: none !important;
  opacity: 1 !important;
}
html body.in-game.in-game #hud #hud-bar #cargo-bar,
html body.in-game.in-game #hud #hud-bar #cargo-wrap.cargo-empty > #cargo-bar {
  display: block !important; position: relative; width: 100% !important; height: 100% !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden;
}
html body.in-game.in-game #hud #hud-bar #cargo-fill { height: 100% !important; background: var(--he-cargo) !important; box-shadow: none !important; border-radius: 0 !important; }
html body.in-game.in-game #hud #hud-bar #cargo-fill.warn { background: rgba(255, 150, 48, .88) !important; }
html body.in-game.in-game #hud #hud-bar #cargo-fill.full { background: rgba(236, 70, 56, .88) !important; }
html body.in-game.in-game #hud #hud-bar #cargo-fill.full::after { display: none; }
/* légendes DANS la barre : blanc, ombre portée (contrainte AA sur fond translucide) */
html body.in-game.in-game #hud #hud-bar #xpbar-label,
html body.in-game.in-game #hud #hud-bar #cargo-wrap > #cargo-label,
html body.in-game.in-game #hud #hud-bar #cargo-wrap.cargo-empty > #cargo-label {
  display: block !important; text-align: center; position: absolute; inset: 0; margin: 0 !important; padding: 0 8px;
  height: 100% !important; line-height: var(--he-bar-h, 24px) !important; color: var(--he-ink) !important; font-weight: 700 !important; font-size: 12px !important; font-family: var(--he-font) !important; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .6) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none !important; border: 0 !important; -webkit-text-stroke: 0 !important;
}
html body.in-game.in-game #hud #hud-bar #xpbar-mult { display: none !important; }   /* le badge ×3 XP reste dans l'autel : la barre ne porte qu'une légende */
html body.in-game.in-game #hud #hud-bar #cargo-wrap #oil-chip, html body.in-game.in-game #hud #hud-bar #cargo-wrap #swarm-chip { position: absolute; bottom: 30px; right: 0; margin: 0; white-space: nowrap; }
/* points d'amélioration : déjà annoncés par la pastille du raccourci « Améliorations » */
html body.in-game.in-game #hud #points-label { display: none !important; }

/* ---------- touche / mobile : même barre, rangée AU-DESSUS des socles de joysticks ---------- */
html body.vtouch.in-game.in-game #hud #hud-bar { bottom: 6px; width: min(360px, 66vw); height: 24px; --he-bar-h: 22px; }
html body.vtouch.vportrait.in-game.in-game #hud #hud-bar { bottom: calc(var(--tc-pad-top, 150px) + 8px + env(safe-area-inset-bottom, 0px)); width: min(320px, 78vw); }
html body.vtouch.in-game.in-game #hud #hud-bar #xpbar-label, html body.vtouch.in-game.in-game #hud #hud-bar #cargo-wrap > #cargo-label { font-size: 11px !important; padding: 0 5px; }

/* ============================== P1 — classement GARDÉ, mais léger ============================== */
html body.in-game.in-game #hud #leaderboard {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
  width: 214px; font-family: var(--he-font);
}
html body.in-game.in-game #hud #leaderboard::before, html body.in-game.in-game #hud #leaderboard::after { display: none !important; }
html body.in-game.in-game #hud #leaderboard h3 {
  margin: 0 0 4px !important; padding: 0 2px !important; background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--he-ink) !important; font: 700 11px/1.2 var(--he-font) !important; letter-spacing: .1em !important; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85) !important; -webkit-text-stroke: 0 !important; display: flex; justify-content: space-between; text-align: left;
}
html body.in-game.in-game #hud #leaderboard h3 span { font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .95; }
html body.in-game.in-game #hud #leaderboard #lb-list { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 3px; }
html body.in-game.in-game #hud #leaderboard #lb-list li {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin: 0 !important; padding: 3px 8px !important; min-height: 22px;
  background: rgba(8, 20, 34, .42) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important;
  color: var(--he-ink) !important; font: 600 12.5px/1.2 var(--he-font) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
  background-image: none !important; -webkit-text-stroke: 0 !important;
}
html body.in-game.in-game #hud #leaderboard #lb-list li::before { display: none !important; }
html body.in-game.in-game #hud #leaderboard #lb-list li.rank1 .lb-name { color: var(--he-gold); }
html body.in-game.in-game #hud #leaderboard #lb-list li.me { background: rgba(255, 210, 74, .30) !important; box-shadow: inset 3px 0 0 var(--he-gold) !important; }
html body.in-game.in-game #hud #leaderboard #lb-list li .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html body.in-game.in-game #hud #leaderboard #lb-list li > span:last-child { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
html body.in-game.in-game #hud #leaderboard #lb-list li.lb-sep { background: none !important; min-height: 0; padding: 0 !important; justify-content: center; line-height: 1; opacity: .8; }

/* ============================== P1 — raccourcis latéraux : languettes VERTICALES collées au bord gauche, plus fines et légères ============================== */
html body.hudtabs:not(.vtouch).in-game.in-game #hud #hudtabs { left: 0; bottom: 236px; gap: 8px; flex-direction: column-reverse; }
html body.hudtabs.in-game.in-game #hudtabs .hudtab {
  flex-direction: column; width: 30px !important; padding: 8px 0 10px; gap: 5px; border: 1px solid rgba(26, 61, 85, .55) !important; border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important; background: rgba(255, 248, 230, .72) !important; color: #1a3d55 !important; box-shadow: none !important;
  font: 700 11px/1 var(--he-font) !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-shadow: none; min-height: 44px; transition: background .15s, width .15s;
}
html body.hudtabs.in-game.in-game #hudtabs .hudtab:hover, html body.hudtabs.in-game.in-game #hudtabs .hudtab.is-open { width: 36px !important; background: rgba(255, 252, 240, .92) !important; }
html body.hudtabs.in-game.in-game #hudtabs .hudtab:focus-visible { outline: 3px solid #1a3d55; outline-offset: 2px; }
html body.hudtabs.in-game.in-game #hudtabs .hudtab::before { left: 0; top: 7px; bottom: 7px; width: 3px; }
html body.hudtabs.in-game.in-game #hudtabs .hudtab .ht-ic { width: 14px; height: 14px; }
html body.hudtabs.in-game.in-game #hudtabs .hudtab .ht-lbl { writing-mode: vertical-rl; transform: rotate(180deg); }
html body.hudtabs.in-game.in-game #hudtabs .ht-n {
  position: absolute; top: -8px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid #1a3d55; box-shadow: none; font: 800 11px/16px var(--he-font);
  background: var(--he-gold); color: #1a1204;
}
html body.hudtabs.in-game.in-game.has-stat-pts #hudtabs #hudtab-stats { animation: none; background: rgba(255, 244, 200, .88) !important; }
html body.hudtabs:not(.vtouch).in-game.in-game #hud #stats-panel, html body.hudtabs:not(.vtouch).in-game.in-game #hud #fleet-panel { left: 40px !important; }
/* hors PC : les boutons ↑ / ⚓ restent des boutons ronds fins translucides */
html body.vtouch.in-game.in-game #hud .mob-toggle { background: var(--he-bg) !important; color: var(--he-ink) !important; border: 1px solid var(--he-line) !important; box-shadow: none !important; }

/* ============================== P1 — haut de l'écran : une seule consigne, en pilule ============================== */
html body.in-game.in-game #onboard-tip#onboard-tip, html body.in-game.in-game #onboard-tip#onboard-tip#onboard-tip.pq-hold {
  position: fixed !important; top: 12px !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translateX(-50%) !important; width: auto !important; max-width: min(640px, calc(100vw - 150px)) !important; height: 36px !important; min-height: 0 !important;
  box-sizing: border-box; display: flex; align-items: center; margin: 0 !important; padding: 0 6px 0 16px !important;
  background: var(--he-bg-strong) !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important;
  color: var(--he-ink) !important; font-family: var(--he-font); animation: none !important; background-image: none !important;
}
html body.in-game.in-game #onboard-tip#onboard-tip.hidden { display: none !important; }
html body.in-game.in-game #onboard-tip#onboard-tip .ob-emblem, html body.in-game.in-game #onboard-tip#onboard-tip::before, html body.in-game.in-game #onboard-tip#onboard-tip::after { display: none !important; }
html body.in-game.in-game #onboard-tip#onboard-tip .ob-body { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; height: 100% !important; max-height: 36px !important; align-items: center; gap: 10px; min-width: 0; width: 100%; padding: 0 !important; margin: 0 !important; background: none !important; }
html body.in-game.in-game #onboard-tip#onboard-tip .ob-top { display: contents !important; }
html body.in-game.in-game #onboard-tip#onboard-tip .ob-text {
  order: 1; flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; color: var(--he-ink) !important; background: none !important;
  font: 700 14px/1.2 var(--he-font) !important; text-shadow: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body.in-game.in-game #onboard-tip#onboard-tip .ob-step {
  order: 2; flex: 0 0 auto; padding: 2px 8px !important; border-radius: 10px !important; background: var(--he-gold) !important; color: #1a1204 !important;
  font: 800 11px/1.3 var(--he-font) !important; letter-spacing: .02em !important; text-transform: none !important; border: 0 !important; box-shadow: none !important;
}
html body.in-game.in-game #onboard-tip#onboard-tip .ob-ok {
  order: 3; flex: 0 0 auto; position: relative; min-width: 0; margin: 0 !important; padding: 0 8px !important; height: 28px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; color: rgba(255, 255, 255, .85) !important;
  font: 600 12px/1 var(--he-font) !important; text-decoration: underline; text-transform: none !important; cursor: pointer;
}
html body.in-game.in-game #onboard-tip#onboard-tip .ob-ok::after { content: ''; position: absolute; inset: -8px -4px; }   /* zone de toucher ≥ 44 px sans élargir la pilule */
html body.in-game.in-game #onboard-tip#onboard-tip .ob-ok:hover { color: #fff !important; }
html body.in-game.in-game #onboard-tip#onboard-tip .ob-ok:focus-visible { outline: 3px solid #fff; outline-offset: 1px; border-radius: 6px; }
/* la boussole « cale pleine » se cale sous la pilule (au lieu de la grande carte) */
html body.in-game.in-game.ob-tip #guide-pointer { top: 56px !important; }
@media (max-width: 520px) {
  html body.in-game.in-game #onboard-tip#onboard-tip .ob-text { font-size: 12.5px !important; }
}
/* mobile portrait : le haut est pris (☰, perles, mini-carte à gauche, classement à droite) → la consigne se pose juste dessous */
html body.vtouch.vportrait.in-game.in-game #onboard-tip#onboard-tip { top: 172px !important; max-width: calc(100vw - 20px) !important; }
html body.vtouch.vportrait.in-game.in-game #pq-quests { transform: translateY(-14px); }

/* le bouton son vit dans le menu / la pause ; le « ? [R] » n'apparaît que si un objet est disponible */
html body.in-game.in-game #hud #btn-mute { display: none !important; }
html body.in-game.in-game #item-slot.is-empty { display: none !important; }
/* revue UX 2026-10-21 (n°16) : l'emplacement d'objet se posait À CÔTÉ de la barre et mordait la cale (« Cale 291/660 »).
   Hors tactile il se pose AU-DESSUS de la barre (bas = 10 + 26 px de barre + 10 d'air), aligné sur son bord droit. */
html body.in-game.in-game:not(.vtouch) #item-slot { left: auto; right: max(12px, calc(50% - 320px)); bottom: 46px; }
/* revue UX 2026-10-21 (n°2) : le compteur de perles se colle au bouton « Menu » (10 px + 44 px de large + 8 px d'air), centré sur lui */
html body.in-game.in-game:not(.vtouch) #hud #pearl-hud { left: 62px; top: 25px; }
/* revue UX 2026-10-21 (n°1) : l'encart de quêtes ne recouvre plus les languettes verticales (#hudtabs, 36 px au survol) */
html body.hudtabs:not(.vtouch).in-game.in-game #pq-quests { left: 46px; }
html body.in-game.in-game #hud #btn-hud-menu { background: var(--he-bg) !important; color: var(--he-ink) !important; border: 1px solid var(--he-line) !important; box-shadow: none !important; }

/* ============================== P2 / P6 — modèle « BANNIÈRE » : une seule, en haut, courte et sombre ============================== */
html body.in-game.in-game #event-card#event-card.event-card {
  position: fixed !important; top: 12px; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; text-align: center;
  width: max-content !important; max-width: min(640px, calc(100vw - 480px)) !important; margin: 0 !important; padding: 7px 16px 5px !important;
  background: var(--he-bg-strong) !important; background-image: none !important; border: 0 !important; border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important; color: var(--he-ink) !important; font-family: var(--he-font); cursor: pointer; animation: none !important;
  transition: opacity .5s ease !important;
}
html body.in-game.in-game #event-card#event-card.event-card.hidden { display: none !important; }
html body.in-game.in-game #event-card#event-card.event-card.ev-out { opacity: 0 !important; }
html body.in-game.in-game #event-card#event-card.event-card * { color: inherit; text-shadow: none !important; -webkit-text-stroke: 0 !important; background-image: none; }
html body.in-game.in-game #event-card#event-card.event-card .ev-ic { font-size: 18px !important; line-height: 1; }
html body.in-game.in-game #event-card#event-card.event-card .ev-name { font: 800 15px/1.2 var(--he-font) !important; letter-spacing: .02em; color: #fff !important; }
html body.in-game.in-game #event-card#event-card.event-card .ev-pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px; font: 700 12px/1.3 var(--he-font) !important; max-width: 100%;
}
html body.in-game.in-game #event-card#event-card.event-card .ev-gain { background: var(--he-gold) !important; color: #1a1204 !important; }
html body.in-game.in-game #event-card#event-card.event-card .ev-danger { background: #c62f23 !important; color: #fff !important; }
html body.in-game.in-game #event-card#event-card.event-card .ev-danger::before { content: none !important; }
html body.in-game.in-game #event-card#event-card.event-card .ev-foot { flex: 1 0 100%; font: 600 10.5px/1.2 var(--he-font) !important; color: rgba(255, 255, 255, .85) !important; margin: 0 !important; padding: 0 !important; }
html body.in-game.in-game #event-card#event-card.event-card .ev-foot::after { content: none; }
@media (max-width: 760px) { html body.in-game.in-game #event-card#event-card.event-card { max-width: calc(100vw - 24px) !important; } }
@media (prefers-reduced-motion: reduce) { html body.in-game.in-game #event-card#event-card.event-card { transition: none !important; } }
/* alerte radio du Gardien / demandes GPS : même famille (haut, sombre) */
html body.in-game.in-game #gardien-radio#gardien-radio { background: var(--he-bg-strong) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important; }

/* ============================== P2 / P6 — modèle « TOAST » : pile bas-gauche, 3 s, sans bouton ============================== */
html body.in-game.in-game #hud #hepure-toasts {
  position: fixed; left: 12px; bottom: 50px; z-index: 15; display: flex; flex-direction: column-reverse; gap: 6px; align-items: flex-start;
  width: max-content; max-width: min(340px, 72vw); pointer-events: none; font-family: var(--he-font);
}
html body.in-game.in-game #hud #hepure-toasts #killfeed {
  position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important;
  display: flex; flex-direction: column-reverse; gap: 6px; width: auto !important; max-width: 100%; margin: 0 !important; padding: 0 !important; background: none !important;
}
html body.in-game.in-game #hud #hepure-toasts #killfeed .feed-msg {
  margin: 0 !important; padding: 6px 12px !important; width: auto; max-width: 100%; background: var(--he-bg-strong) !important; background-image: none !important;
  border: 0 !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important; color: #fff !important;
  font: 600 13px/1.25 var(--he-font) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; transition: opacity .4s ease;
}
html body.in-game.in-game #hud #hepure-toasts #killfeed .feed-msg:nth-child(n+4) { display: none !important; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast {
  position: static !important; top: auto !important; left: auto !important; transform: none !important; display: flex; align-items: center; gap: 8px;
  width: auto !important; max-width: 100%; margin: 0 !important; padding: 6px 12px !important; background: var(--he-bg-strong) !important; background-image: none !important;
  border: 0 !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important; color: #fff !important; animation: none !important;
  font: 600 13px/1.25 var(--he-font) !important; opacity: 1 !important;
}
html body.in-game.in-game #hud #hepure-toasts #quest-toast.hidden { display: none !important; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast * { color: inherit !important; text-shadow: none !important; background: none; -webkit-text-stroke: 0 !important; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-ic { font-size: 15px !important; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-body { display: flex; flex-direction: column; min-width: 0; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-title { font-weight: 700; font-size: 13px; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-label { font-size: 11px; opacity: .9; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-xp { color: var(--he-gold) !important; font-weight: 800; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-confetti { display: none !important; }
/* tactile : le bas appartient aux joysticks → la pile passe en haut (paysage : sous le ☰, à gauche ; portrait : centrée sous la consigne) */
html body.vtouch.in-game.in-game #hud #hepure-toasts { bottom: auto; top: 64px; flex-direction: column; left: 8px; max-width: min(300px, 56vw); }
html body.vtouch.in-game.in-game #hud #hepure-toasts #killfeed { flex-direction: column; }
html body.vtouch:not(.vportrait).in-game.in-game #hud #hepure-toasts { left: 132px; top: 58px; }
html body.vtouch.vportrait.in-game.in-game #hud #hepure-toasts { top: 214px; left: 50%; transform: translateX(-50%); align-items: center; max-width: calc(100vw - 20px); }
html body.vtouch.in-game.in-game #hud #hepure-toasts #quest-toast { flex-wrap: nowrap; }
html body.vtouch.in-game.in-game #hud #hepure-toasts #quest-toast .qt-title { font-size: 11px; white-space: nowrap; }

/* ============================== P3 — atelier : tout le reste disparaît, la mer s'assombrit autour du navire ============================== */
#hepure-spot {
  position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--hs-x, 50%) var(--hs-y, 50%), rgba(3, 14, 28, 0) 0, rgba(3, 14, 28, 0) var(--hs-r, 130px), rgba(3, 14, 28, .68) calc(var(--hs-r, 130px) * 2.7));
}
body.hepure-atj #hepure-spot { opacity: 1; }
body.hepure-atj #hud #leaderboard, body.hepure-atj #hud #hud-bar, body.hepure-atj #hud #hudtabs, body.hepure-atj #hud #hepure-toasts,
body.hepure-atj #hud #btn-hud-menu, body.hepure-atj #hud #pearl-hud, body.hepure-atj #hud #minimap-wrap, body.hepure-atj #minimap-wrap, body.hepure-atj #minimap, body.hepure-atj #minimap-frame, body.hepure-atj #mm-wrap, body.hepure-atj #mm-dot,
body.hepure-atj #onboard-tip#onboard-tip, body.hepure-atj #pq-quests, body.hepure-atj #oog-hud, body.hepure-atj #eg-hud, body.hepure-atj #flash-mission,
body.hepure-atj #event-card, body.hepure-atj #heli-notice, body.hepure-atj #item-slot, body.hepure-atj #guide-pointer, body.hepure-atj #pv-mark,
body.hepure-atj #hud #dash-chip, body.hepure-atj #hud #sb-chip, body.hepure-atj #hud #boost-hud, body.hepure-atj #hud #chest-next, body.hepure-atj #hud #coins,
body.hepure-atj #hud #team-scores, body.hepure-atj #sound-prompt, body.hepure-atj #mob-settings-coach, body.hepure-atj #hud #btn-mob-stats,
body.hepure-atj #hud #btn-mob-fleet, body.hepure-atj #hud #btn-mob-tree,
/* repères de guidage / GPS (revue UX 2026-10-21, n°9) : points de la mini-carte, cap, panneaux « vente », partages de position — reviennent à la fermeture */
body.hepure-atj #mm-bounty-dot, body.hepure-atj #mm-caravan-dot, body.hepure-atj #mm-chest-dot, body.hepure-atj #mm-waypoint-dot, body.hepure-atj #mm-clear-waypoint,
body.hepure-atj #reward-chest, body.hepure-atj #mm-sell, body.hepure-atj #gps-toasts, body.hepure-atj #quest-bubble, body.hepure-atj #chest-guide-overlay, body.hepure-atj #chest-guide-arrow { visibility: hidden !important; }
/* cartes plus grandes, posées sous le navire (top posé par HUDEPURE._follow) */
html body.hepure-atj #atj-up { z-index: 13; gap: 8px; }
html body.hepure-atj #atj-up .atj-title { font-size: 19px; }
html body.hepure-atj #atj-up .atj-row { gap: 12px; }
html body.hepure-atj #atj-up .atj-tile.atj-card { width: 124px; min-height: 124px; padding: 8px 6px 10px; border-radius: 10px; }
html body.hepure-atj #atj-up .atj-tile.atj-card svg { width: 62px; height: 62px; }
html body.hepure-atj #atj-up .atj-nm { font-size: 13.5px; min-height: 30px; }
html body.hepure-atj #atj-up .atj-bdg { font-size: 11px; }
html body.hepure-atj #atj-up .atj-hullc { width: 190px; }
@media (max-width: 520px) {
  html body.hepure-atj #atj-up .atj-tile.atj-card { width: 82px; min-height: 96px; padding: 5px 3px 7px; }
  html body.hepure-atj #atj-up .atj-tile.atj-card svg { width: 40px; height: 40px; }
  html body.hepure-atj #atj-up .atj-row { gap: 6px; }
  html body.hepure-atj #atj-up .atj-nm { font-size: 11px; min-height: 26px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  html body.hepure-atj #atj-up .atj-tile.atj-card { width: 84px; min-height: 76px; padding: 4px 3px 6px; }
  html body.hepure-atj #atj-up .atj-tile.atj-card svg { width: 32px; height: 32px; }
  html body.hepure-atj #atj-up .atj-nm { font-size: 11px; min-height: 24px; }
  html body.hepure-atj #atj-up .atj-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { #hepure-spot { transition: none; } }

/* ============================== P7 — pause (refonte DA antique, revue UX 2026-10-21 : marbre + encre, contrastes AA, Reprendre d'abord) ============================== */
#hepure-pause {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box;
  background: rgba(12, 30, 36, .6); font-family: var(--he-font);
}
#hepure-pause.hidden { display: none; }
#hepure-pause .hp-card {
  --hp-ink: #2f2619; --hp-dim: #5a4a36; --hp-line: #3a2f22; --hp-ori: #e3b85a; --hp-teal: #2b7a6e; --hp-coral: #a8321f;
  width: min(400px, 100%); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; padding: 20px 20px 16px; border-radius: 4px;
  background: #fbf7ee; color: var(--hp-ink); border: 4px solid #a8832f; box-shadow: 0 0 0 2px var(--hp-line), 0 8px 0 rgba(58, 47, 34, .6), 0 16px 36px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 10px;
}
#hepure-pause h2 { margin: 0; font: 800 24px/1.1 "Cinzel", var(--he-font); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--hp-ink); }
#hepure-pause .hp-note { margin: 0 0 4px; font: 500 13px/1.4 var(--he-font); text-align: center; color: var(--hp-dim); }
#hepure-pause .hp-btn {
  min-height: 46px; padding: 0 16px; border-radius: 3px; border: 3px solid var(--hp-line); background: #efe5cf; color: var(--hp-ink);
  font: 700 15px/1 var(--he-font); cursor: pointer; box-shadow: 0 3px 0 var(--hp-line);
}
#hepure-pause .hp-btn:hover { background: #f6eedb; }
#hepure-pause .hp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hp-line); }
#hepure-pause .hp-primary { background: var(--hp-teal); border-color: #154a42; color: #fff; font-size: 18px; min-height: 52px; box-shadow: 0 3px 0 #154a42; }
#hepure-pause .hp-primary:hover { background: #328a7c; }
#hepure-pause .hp-danger { color: var(--hp-coral); border-color: var(--hp-coral); background: #fbf7ee; box-shadow: 0 3px 0 #5e1b10; }
#hepure-pause .hp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font: 700 14px/1.2 var(--he-font); color: var(--hp-ink); }
#hepure-pause .hp-row input[type=range] { flex: 0 0 58%; height: 44px; margin: 0; accent-color: var(--hp-teal); cursor: pointer; }
#hepure-pause .hp-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0; padding-top: 10px; border-top: 2px dashed rgba(58, 47, 34, .3); }
#hepure-pause .hp-quick button {
  min-height: 64px; padding: 6px 4px; border-radius: 3px; border: 2px solid var(--hp-line); background: #efe5cf; color: var(--hp-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-family: var(--he-font);
}
#hepure-pause .hp-quick button:hover { background: #f6eedb; }
#hepure-pause .hp-quick b { font-size: 18px; line-height: 1; color: #7a4e00; }
#hepure-pause .hp-quick span { font: 700 11.5px/1.15 var(--he-font); text-align: center; overflow-wrap: anywhere; }
#hepure-pause :is(button, input):focus-visible { outline: 3px solid #0f4f8a; outline-offset: 2px; }

/* ============================== cohérence : les autres pastilles du HUD passent dans la même famille sombre ============================== */
html body.in-game.in-game #hud #pearl-hud {
  background: var(--he-bg) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--he-line) !important; box-shadow: none !important;
  border-radius: 16px !important; padding: 3px 10px !important; font-family: var(--he-font) !important;
}
html body.in-game.in-game #hud #pearl-hud b { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important; font: 700 14px/1 var(--he-font) !important; }
/* encart de quête (Oogway / contrats) : fin, translucide, texte blanc */
html body.in-game.in-game #pq-quests#pq-quests .oog-box, html body.in-game.in-game #pq-quests#pq-quests #eg-hud > div {
  background: var(--he-bg) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--he-line) !important; border-radius: 10px !important;
  box-shadow: none !important; padding: 6px 10px !important; text-shadow: none !important;
}
html body.in-game.in-game #pq-quests#pq-quests :is(.oog-t, .oog-q, .oog-n, .oog-p) { color: #fff !important; text-shadow: none !important; }
html body.in-game.in-game #pq-quests#pq-quests .oog-t { color: var(--he-gold) !important; }
html body.in-game.in-game #pq-quests#pq-quests .oog-arrow { color: var(--he-gold) !important; }
/* boussole « cale pleine » : seule la flèche reste (le texte « PLEINE · vends au comptoir » vit dans la barre) */
html body.in-game.in-game #guide-pointer#guide-pointer {
  background: var(--he-bg-strong) !important; background-image: none !important; border: 0 !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
  width: 40px !important; height: 40px !important; min-width: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center;
  left: 50% !important; transform: translateX(-50%) !important; top: 58px !important;
}
html body.in-game.in-game #guide-pointer#guide-pointer.hidden { display: none !important; }
html body.in-game.in-game #guide-pointer#guide-pointer .gp-label { display: none !important; }
html body.in-game.in-game #guide-pointer#guide-pointer .gp-arrowwrap, html body.in-game.in-game #guide-pointer#guide-pointer .gp-ic { color: var(--he-gold) !important; background: none !important; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast .qt-xp { background: transparent !important; }

/* cale PLEINE : le segment s'élargit pour que « PLEINE · vends au comptoir » tienne (repli : points de suspension) */
html body.in-game.in-game #hud #hud-bar #cargo-wrap:has(#cargo-fill.full) { flex-basis: 58%; }
body.hepure-pause #mob-settings-coach, body.hepure-pause #sound-prompt { display: none !important; }

/* ============================== P6 — modèle « RÉCOMPENSE » : centre, UN bouton, rare (coffres, coffre mystère, grade) ============================== */
html body #chest-reward .chest-reward-card { pointer-events: auto; }
html body #chest-reward .chest-reward-ok {
  display: block; margin: 12px auto 0; min-width: 120px; min-height: 44px; padding: 0 22px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--he-gold); color: #1a1204; font: 800 16px/1 var(--he-font); box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
html body #chest-reward .chest-reward-ok:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* tactile : la pile de toasts se range SOUS la bannière d'événement quand elle est à l'écran (jamais de superposition) */
html body.vtouch.vportrait.ev-card-on.in-game.in-game #hud #hepure-toasts { top: 272px; }
html body.vtouch:not(.vportrait).ev-card-on.in-game.in-game #hud #hepure-toasts { top: 96px; }
html body.in-game.in-game #hud #hepure-toasts #quest-toast::before, html body.in-game.in-game #hud #hepure-toasts #quest-toast::after { display: none !important; }

/* ============================== boussole : UNIQUEMENT le disque rond (aucun cadre, fond ni ombre carrés — PC et mobile) ============================== */
html body.ui-arcade.in-game.in-game #minimap#minimap, html body.in-game.in-game #minimap#minimap, html body.ui-arcade.vtouch.in-game.in-game #minimap#minimap {
  border: 0 !important; border-radius: 50% !important; box-shadow: none !important; background: transparent !important; outline: 0; filter: none;
}
html body.in-game.in-game #minimap#minimap:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============================== revue UX 2026-10-21 — n°4 : écran de mort (titre + pied) ============================== */
/* bilan déplié : le titre ne mord plus la frise (le padding-top de 10 px de arcade-mort.css le collait au cadre) et reste CENTRÉ */
html body.ui-arcade #death-screen #death-box#death-box.da-open { padding-top: 38px !important; padding-bottom: 34px !important; }
html body.ui-arcade #death-screen #death-box#death-box.da-open .death-head { align-self: center; width: 100%; text-align: center; }
html body.ui-arcade #death-screen #death-box#death-box.da-open .death-head h2 { text-align: center; margin: 0 auto !important; }
/* pied : UNE colonne centrée — rangée de boutons (même gabarit), puis « partage-le sur » + logos, puis action de sortie */
html body.ui-arcade #death-screen #death-box#death-box.da-open .death-footer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px !important; padding-top: 12px !important;
}
html body.ui-arcade #death-screen #death-box.da-open .death-footer #dov-cap-death { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin: 0; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer #dov-cap-death .dov-cap-share { flex: 0 1 230px; justify-content: center; min-height: 44px; box-sizing: border-box; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer #dov-cap-plat { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; width: 100%; margin: 0; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer #dov-cap-plat .dcp-lbl { flex: 1 0 100%; text-align: center; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer #dov-cap-plat .dcp-btn { width: 44px; height: 44px; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer > button { align-self: center; min-height: 44px !important; }
/* petit écran : le bandeau défile en UN bloc (le pied suit le contenu au lieu de le chevaucher) */
@media (max-width: 760px) {
  html body.ui-arcade #death-screen #death-box#death-box.da-open .death-grid { flex: 0 0 auto !important; }
  html body.ui-arcade #death-screen #death-box.da-open .death-footer #dov-cap-death .dov-cap-share { flex: 1 1 140px; }
}

/* ============================== revue UX 2026-10-21 — n°25 : zones de vente proches, toujours visibles ============================== */
/* revue UX 2026-10-22 (n°5) : #mm-sell n'est plus affiché (l'icône vit dans la mini-carte) : région aria-live réservée aux lecteurs d'écran */
#mm-sell { position: fixed; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; pointer-events: none; }
#mm-sell[hidden] { display: none; }
/* 2026-10-23 : INDICATEUR EXTERNE du point de vente le plus proche, hors du disque de la mini-carte (UI.updateSellPointer) :
   pastille sombre à liseré doré (contraste ≥ 4.5:1 : #ffe9a0 sur #10222f), flèche orientée + distance. Discret : pas d'animation. */
#mm-sell-ptr {
  position: fixed; z-index: 9; transform: translate(-50%, -50%); pointer-events: none;
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 5px;
  background: rgba(16, 34, 47, .92); color: #ffe9a0; border: 2px solid #ffd24a; border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  font: 800 11px/1.2 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#mm-sell-ptr[hidden] { display: none; }
#mm-sell-ptr .msp-arrow { flex: 0 0 auto; color: #ffd24a; }
body:not(.in-game) #mm-sell-ptr, body.shop-open #mm-sell-ptr, body.hepure-atj #mm-sell-ptr, body.death-open #mm-sell-ptr { display: none; }

/* ============================== revue UX 2026-10-21 — n°10 : récompenses en orichalque + coffre à ouvrir ============================== */
/* mission éclair : « +80 » suivi d'un lingot (la valeur est en orichalque, plus en XP) */
html body #flash-mission .fm-reward::after {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17l3-9h12l3 9z' fill='%23ffd24a' stroke='%237a5200' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7 8l-1.5 5h13L17 8' fill='%23fff0a8' stroke='%237a5200' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* coffre : modèle « récompense » — UN bouton, bas-centre au-dessus de la barre ; tactile : bord droit, à mi-hauteur */
#reward-chest { position: fixed; z-index: 15; left: 50%; bottom: 52px; transform: translateX(-50%); font-family: var(--he-font); }
#reward-chest.hidden { display: none; }
#reward-chest .rc-btn {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 18px 4px 10px; border-radius: 14px; cursor: pointer;
  background: var(--he-bg-strong); color: var(--he-ink); border: 2px solid var(--he-gold); box-shadow: 0 3px 14px rgba(0, 0, 0, .4); font: inherit; text-align: left;
  animation: rcPulse 1.6s ease-in-out infinite;
}
#reward-chest .rc-btn:hover { background: rgba(8, 20, 34, .95); }
#reward-chest .rc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#reward-chest .rc-svg { width: 44px; height: 37px; flex: 0 0 auto; overflow: visible; }
#reward-chest .rc-lid { transform-origin: 5px 17px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
#reward-chest.rc-open .rc-lid { transform: rotate(-52deg); }
#reward-chest.rc-open .rc-btn { animation: none; pointer-events: none; }
#reward-chest .rc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#reward-chest .rc-lbl { font-size: 12px; font-weight: 600; opacity: .9; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reward-chest .rc-lbl:empty { display: none; }
#reward-chest .rc-amt { font-size: 15px; font-weight: 800; color: var(--he-gold); }
#reward-chest .rc-n { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--he-gold); color: #1a1204; font: 800 12px/22px var(--he-font); text-align: center; box-sizing: border-box; }
#reward-chest .rc-n:empty { display: none; }
@keyframes rcPulse { 0%, 100% { box-shadow: 0 3px 14px rgba(0, 0, 0, .4), 0 0 0 0 rgba(255, 210, 74, .55); } 50% { box-shadow: 0 3px 14px rgba(0, 0, 0, .4), 0 0 0 7px rgba(255, 210, 74, 0); } }
html body.vtouch #reward-chest { left: auto; right: 12px; bottom: auto; top: 52%; transform: none; }
html body.vtouch #reward-chest .rc-lbl { max-width: 120px; }
body.death-open #reward-chest { display: none; }
.rc-ingot { position: fixed; z-index: 60; width: 24px; height: 24px; pointer-events: none; will-change: transform, opacity; }
.rc-ingot svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
#xpbar-wrap.rc-hit #xpbar { animation: rcHit .6s ease-out; }
@keyframes rcHit { 0% { filter: brightness(1); } 25% { filter: brightness(1.9) saturate(1.4); box-shadow: 0 0 0 3px rgba(255, 210, 74, .8); } 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255, 210, 74, 0); } }
@media (prefers-reduced-motion: reduce) {
  #reward-chest .rc-btn { animation: none; }
  #reward-chest .rc-lid { transition: none; }
  #xpbar-wrap.rc-hit #xpbar { animation: none; box-shadow: 0 0 0 3px rgba(255, 210, 74, .8); }
}

/* ============================== SON COUPÉ (revue 2026-10-22) : témoin cliquable sous « Menu » + toast avec bouton ============================== */
#hepure-mute-ind { position: fixed; left: 10px; top: 66px; z-index: 15; width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
  padding: 0; border-radius: 10px; border: 1px solid rgba(255, 150, 140, .6); background: var(--he-bg-strong); color: #ffb4a8; cursor: pointer; }
html body.in-game.in-game:not(.death-open):not(.shop-open) #hepure-mute-ind:not([hidden]) { display: flex; }
#hepure-mute-ind:hover, #hepure-mute-ind:focus-visible { border-color: #fff; color: #fff; }
html body.vtouch #hepure-mute-ind { width: 44px; height: 44px; top: 64px; }
body.hepure-atj #hepure-mute-ind { visibility: hidden; }
html body.in-game.in-game #hud #hepure-toasts .hp-mute-toast { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 10px;
  background: var(--he-bg-strong); color: #fff; font: 600 13px/1.25 var(--he-font); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: auto; transition: opacity .4s ease; }
html body.in-game.in-game #hud #hepure-toasts .hp-mute-toast button { min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--he-gold);
  background: transparent; color: var(--he-gold); font: 700 13px var(--he-font); cursor: pointer; }
html body.in-game.in-game #hud #hepure-toasts .hp-mute-toast button:hover, html body.in-game.in-game #hud #hepure-toasts .hp-mute-toast button:focus-visible { background: var(--he-gold); color: #1a1a1a; }

/* ============================== revue UX 2026-10-22 ============================== */
/* n°1 : les pastilles de boost ACTIFS se collent au compteur de perles (ancre --bh-x/--bh-y publiée par UI.placeBoostHud) */
html body.in-game.in-game #hud #boost-hud {
  left: var(--bh-x, 108px); top: var(--bh-y, 25px); transform: none;
  justify-content: flex-start; max-width: calc(100vw - var(--bh-x, 108px) - 12px);
}
/* n°2 : le dock des boosts à activer se range À DROITE de la colonne des languettes (46 px ouverte + 10 px d'air) :
   plus aucun chevauchement avec « Améliorations » / « Flotte », quelle que soit la hauteur de l'écran. */
html body.hudtabs:not(.vtouch).in-game.in-game #hud #boost-dock { left: 56px; }
/* cible tactile ≥ 44 px (WCAG 2.5.5) */
html body.vtouch.in-game.in-game #hud #boost-dock .boost-dock-btn { min-height: 44px; }