/* ═══════════════ L'INTERFACE EN JEU, NOUVEAU STYLE (Js', 04/10, à l'essai) ═══════════════
   « modifie l'UI en jeu afin de match la nouvelle UI, garde une save de l'ancienne, on va juste tester (modifie tout,
   même le compteur de kills en haut à gauche) ». Ce qui est dessiné en partie (mini-carte, compteurs, fil des
   éliminations, ta barre, Tab, annonces…) est dans js/br/hud.js ; ici, ce qui est en HTML, seulement sous html.hud2 :
   sans cette classe (?hud=ancien dans l'adresse), rien ne change.
   Le style des fenêtres refaites (pause, groupe, coffre) : le gros trait d'encre, l'ombre d'encre décalée (pleine), les
   pastilles de couleur, les cartes blanches, l'italique. */

/* ─── au doigt : les gros boutons (attaque, pouvoir, ultime) ───
   l'anneau reste transparent (on voit la carte dessous) mais cerné d'encre ; la pastille du bouton : trait d'encre épais et
   ombre d'encre décalée, comme les pastilles des fenêtres */
html.hud2 .tb { border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 3px var(--ink), 3px 4px 0 3px rgba(21, 21, 21, 0.3); }
html.hud2 .tb.down { box-shadow: 0 0 0 3px var(--ink); }
html.hud2 .tb b { border: 3.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
html.hud2 .tb.down b { box-shadow: 1px 1px 0 var(--ink); }
html.hud2 .tb-u.ready { border-color: #FFD23F; }

/* le joystick : l'anneau cerné d'encre, la boule blanche à l'ombre d'encre */
html.hud2 .stick { border: 3px solid var(--ink); background: rgba(251, 250, 247, 0.3); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
html.hud2 .stick i { background: var(--card); border: 3.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ─── les petits boutons du haut au doigt (émotes, plein écran, pause) : des cartes, l'ombre d'encre plus franche ─── */
html.hud2.touch .tb-mini, html.hud2.touch .emote-btn { border-width: 3.5px; border-radius: 13px; box-shadow: 4px 4px 0 var(--ink); }
html.hud2.touch .tb-mini:active, html.hud2.touch .emote-btn:active { box-shadow: 1px 1px 0 var(--ink); }
/* (au clavier, plus de bulle des émotes en bas à gauche — Js', 04/10 : « y'en a pas besoin c la touche B » ; la touche est
   rappelée pendant le compte à rebours et dans la pause) */
html.hud2:not(.touch) .emote-btn { display: none !important; }
/* l'icône des émotes de la nouvelle interface, plus épaisse (« dans le thème de la nouvelle UI, un peu plus bold ») */
.emote-btn .ei-new { display: none; }
html.hud2 .emote-btn .ei-old { display: none; }
html.hud2 .emote-btn .ei-new { display: block; }

/* ─── la roue des émotes : les émotes en pastilles à l'ombre d'encre, la consigne dans une étiquette de travers ─── */
html.hud2 .ew-ring { border-width: 5px; box-shadow: 10px 10px 0 var(--ink); }
html.hud2 .ew-item { border-width: 3.5px; box-shadow: 3px 3px 0 var(--ink); }
html.hud2 .ew-item.sel { box-shadow: 5px 5px 0 var(--ink); }
html.hud2 .ew-item span { font-style: italic; }
html.hud2 .ew-hint { border: 3px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); font-style: italic; font-weight: 800; transform: rotate(-2deg); }

/* ─── « Quitter » quand tu regardes la partie : rouge, comme « Quitter la partie » de la pause ─── */
html.hud2 .spec-quit { background: #E5484D; color: #fff; border: 4px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); font-style: italic;
  text-shadow: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink); }
html.hud2 .spec-quit svg { filter: drop-shadow(2px 2px 0 var(--ink)); }
html.hud2 .spec-quit:hover { background: #EE5A5E; }
html.hud2.touch .spec-quit { border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }

/* ─── l'hôte qui regarde (terminer / rejouer) : une carte blanche au trait épais, le bouton principal en or ─── */
html.hud2 .host-bar { border-width: 4px; border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); font-style: italic; }
html.hud2 .host-bar .btn { border-width: 3px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font-style: italic; }
html.hud2 .host-bar .btn.primary { background: var(--gold); color: var(--ink); }
html.hud2 .host-bar .btn:hover { box-shadow: 4px 4px 0 var(--ink); }

/* ─── la connexion qui flanche : une étiquette rouge de travers, cernée d'encre ─── */
html.hud2 .net-bad { border: 3px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); font-style: italic; transform: translateX(-50%) rotate(-2deg); text-shadow: 1.5px 1.5px 0 var(--ink); }

/* ─── l'entraînement : la barre du haut en carte blanche (avant : un bandeau sombre) ─── */
html.hud2 .train { padding: 7px; border: 4px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 6px 6px 0 var(--ink); }
html.hud2 .tr-num { color: var(--ink); }
html.hud2 .tr-num small { color: rgba(21, 21, 21, 0.6); font-style: italic; font-weight: 800; }
html.hud2 .tr-tot { border-left: 3px dashed rgba(21, 21, 21, 0.2); }
html.hud2 .tr-b { border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font-style: italic; }
html.hud2 .tr-b:hover { background: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
html.hud2 .tr-b:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
html.hud2 .tr-ult, html.hud2 .tr-ult:hover { background: var(--gold); }
html.hud2.touch .train { padding: 5px; border-width: 3px; border-radius: 13px; box-shadow: 4px 4px 0 var(--ink); }

/* ─── « balldash.io » sous la mini-carte : redessiné dans le jeu, comme le logo de l'entrée (js/br/hud.js, sous la
   mini-carte) — l'étiquette HTML ne sert plus en partie ─── */
html.hud2 body[data-screen="game"] .wm { display: none !important; }