/* skin clean : panneau de combat #fight-hud, variante A « Colonne de droite » (mockups/hud_v2.html?m=A). Toutes les règles sous body.skin-clean.
   Une colonne d'encre à plat (#15121d, bord haut lime de 3 px, ni dégradé ni flou ni ombre), collée au bord gauche du rail des joueurs,
   sous la bande de l'ordre de passage. Les anciennes règles du skin (skin-clean.css : fondu d'encre ::before, onglets) sont reprises ici. */
body.skin-clean #fight-hud { --hk: #15121d; --hk2: #1e1830; --hl: #2c2540; --hm: #8d84ad; --htr: #2a2236;
  box-sizing: border-box; left: 1290px; right: auto; top: 132px; width: 240px; padding: 10px 10px 8px 12px; transform: none;
  background: var(--hk); border: 0; border-top: 3px solid #c8e20a; border-radius: 0; box-shadow: none; backdrop-filter: none; font-family: Lexend, sans-serif; color: #fff; }
body.skin-clean #fight-hud::before, body.skin-clean #fight-hud::after { content: none; display: none; }
body.skin-clean #fight-hud.enter { animation: hudAIn .22s ease-out; }
body.skin-clean.noanim #fight-hud.enter { animation: none; }
@keyframes hudAIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* Défi du Kolizéum : le rail s'élargit (1500 px) */
body.skin-clean:not(.mobile) #game:has(#players.sk-duel) #fight-hud { left: 1260px; }

/* titre « Toi contre les Bworks » + carré « – » */
body.skin-clean #fight-hud .hud-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
body.skin-clean #fight-hud #fight-vs { flex: 1; min-width: 0; margin: 0; font: 700 12.5px/1.25 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
body.skin-clean #fight-hud #fight-vs em { font-style: normal; color: #c8e20a; }
body.skin-clean #fight-hud .hud-last { font: 600 10.5px/1.5 Lexend, sans-serif; letter-spacing: .08em; color: var(--hm); }
body.skin-clean #fight-hud .hud-last b { color: #c8e20a; } body.skin-clean #fight-hud .hud-last b.lose { color: #ff3b5c; }
body.skin-clean #fight-hud .hud-min, body.skin-clean #fight-hud .hud-min:hover:not(:disabled) { flex: none; align-self: flex-start; width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  background: var(--hk2); border: 0; border-radius: 0; box-shadow: none; color: #fff; font: 700 16px/1 Lexend, sans-serif; text-shadow: none; }
body.skin-clean #fight-hud .hud-min:hover:not(:disabled) { background: #c8e20a; color: var(--hk); }

/* onglets en texte : actif blanc souligné lime (3 px) */
body.skin-clean #fight-hud .hud-tabs { display: flex; gap: 14px; margin-top: 6px; border-bottom: 1px solid var(--hl); }
body.skin-clean #fight-hud .hud-tabs button { flex: none; position: relative; padding: 6px 0 7px; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  font: 700 11.5px/1 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--hm); }
body.skin-clean #fight-hud .hud-tabs button:hover { background: none; box-shadow: none; color: #fff; }
body.skin-clean #fight-hud .hud-tabs button.on, body.skin-clean #fight-hud .hud-tabs button.on:hover { background: none; box-shadow: none; color: #fff; }
body.skin-clean #fight-hud .hud-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #c8e20a; }

/* « Tes unités · dégâts infligés » ; lignes : portrait rond 28 px (anneau de couleur, étoiles), barre 120 px, nombre à droite */
body.skin-clean #fight-hud .hud-cols { display: flex; gap: 16px; }
body.skin-clean #fight-hud .hud-col { flex: 1; min-width: 0; }
body.skin-clean #fight-hud .hud-label { margin: 9px 0 4px; font: 600 10.5px/1 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--hm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.skin-clean #fight-hud #meters, body.skin-clean #fight-hud #meters-foe { display: flex; flex-direction: column; gap: 0; margin: 0; }
body.skin-clean #fight-hud .mrow { display: flex; justify-content: flex-start; align-items: center; gap: 9px; height: 36px; margin: 0; opacity: 1; }
body.skin-clean #fight-hud .micon { position: relative; flex: none; width: 28px; height: 28px; box-sizing: border-box; overflow: visible; border-radius: 50%;
  border: 2px solid var(--rc, #c0742e); background: #2a2047; box-shadow: none; }
body.skin-clean #fight-hud .micon.cmd { border-color: #c8e20a; }
body.skin-clean #fight-hud .micon canvas, body.skin-clean #fight-hud .micon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
body.skin-clean #fight-hud .micon.cmd img { object-position: 50% 0; }
body.skin-clean #fight-hud .micon canvas { transform: scale(1.35); transform-origin: 50% 35%; border-radius: 0; clip-path: circle(37% at 50% 46%); }   /* tête en gros, toujours dans l'anneau */
body.skin-clean #fight-hud .micon b { position: absolute; left: 50%; right: auto; bottom: -7px; translate: -50% 0; height: 11px; padding: 0 3px; display: flex; align-items: center;
  background: var(--hk); border-radius: 6px; color: #ffd23f; font: 700 8.5px/1 Lexend, sans-serif; letter-spacing: -.5px; white-space: nowrap; text-shadow: none; }
body.skin-clean #fight-hud .mrow .mb { flex: none; width: 120px; height: 8px; background: var(--htr); border: 0; border-radius: 0; overflow: hidden; }
body.skin-clean #fight-hud .mrow .mb i { border-radius: 0; }
body.skin-clean #fight-hud .mrow .mb i.dmg { background: #ff7a45; }
body.skin-clean #fight-hud .mrow .mb i.heal { background: #5fd85a; }
body.skin-clean #fight-hud .mrow .mb i.taken { background: #6f95ff; }
body.skin-clean #fight-hud .mrow .mv { flex: 1; width: auto; min-width: 0; text-align: right; font: 700 14px/1 Lexend, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
body.skin-clean #fight-hud .mrow:first-child:not(.dead) .mv { color: #c8e20a; }   /* lignes triées : la première est la meilleure */
/* unité tombée : encre violette (pas de gris), crâne sur le portrait */
body.skin-clean #fight-hud .mrow.dead .micon { border-color: #4a4160; }
body.skin-clean #fight-hud .mrow.dead .micon canvas, body.skin-clean #fight-hud .mrow.dead .micon img { opacity: .5; filter: saturate(.5); }
body.skin-clean #fight-hud .mrow.dead .micon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: url(dofus/assets/ui/ic/skull.png) center / 46% no-repeat; }
body.skin-clean #fight-hud .mrow.dead .mv { color: #6e6590; }
body.skin-clean #fight-hud .mrow.dead .mb i { background: #6e5a9e; }

/* « Comparer avec l'adversaire › » : lien lime en pied de colonne */
body.skin-clean #fight-hud .hud-compare { display: block; width: 100%; margin: 6px 0 0; padding: 9px 0 2px; border: 0; border-top: 1px solid var(--hl); border-radius: 0; background: none; box-shadow: none;
  text-align: left; cursor: pointer; font: 700 12px/1 Lexend, sans-serif; color: #c8e20a; text-decoration: none; }
body.skin-clean #fight-hud .hud-compare::after { content: ' ›'; font-size: 14px; }
body.skin-clean #fight-hud .hud-compare:hover { background: none; color: #fff; text-decoration: none; }
body.skin-clean #fight-hud.wide .hud-compare::after { content: ''; }

/* comparaison : la même colonne, élargie vers la gauche (toujours collée au rail), deux listes côte à côte */
body.skin-clean #fight-hud.wide { left: 1070px; width: 460px; }
body.skin-clean:not(.mobile) #game:has(#players.sk-duel) #fight-hud.wide { left: 1040px; }
body.skin-clean #fight-hud.wide .hud-col:not(.foe) .hud-label { color: #c8e20a; }
body.skin-clean #fight-hud.wide .hud-col.foe .hud-label { color: #ff3b5c; }
body.skin-clean #fight-hud.wide .mrow .mb { width: auto; flex: 1; }
body.skin-clean #fight-hud.wide .mrow .mv { flex: none; width: 42px; }

/* replié (« – ») : onglet de 40 px au bord du rail, « + » lime et « RÉCAP » vertical ; tout l'onglet rouvre */
body.skin-clean #fight-hud.min, body.skin-clean #fight-hud.min.wide { left: 1490px; width: 40px; padding: 8px 0 10px; border-top: 0; border-left: 3px solid #c8e20a; }
body.skin-clean:not(.mobile) #game:has(#players.sk-duel) #fight-hud.min { left: 1460px; }
body.skin-clean #fight-hud.min .hud-tabs, body.skin-clean #fight-hud.min .hud-cols, body.skin-clean #fight-hud.min .hud-compare { display: none; }
body.skin-clean #fight-hud.min .hud-top { flex-direction: column; gap: 8px; }
body.skin-clean #fight-hud.min #fight-vs { display: none; }
body.skin-clean #fight-hud.min .hud-min, body.skin-clean #fight-hud.min .hud-min:hover:not(:disabled) { align-self: center; background: #c8e20a; color: var(--hk); font-size: 0; }
body.skin-clean #fight-hud.min .hud-min { position: static; }
body.skin-clean #fight-hud.min .hud-min::before { content: '+'; font: 700 16px/1 Lexend, sans-serif; }
body.skin-clean #fight-hud.min .hud-min::after { content: ''; position: absolute; inset: 0; }   /* zone de clic : tout l'onglet */
body.skin-clean #fight-hud.min .hud-top::after { content: 'Récap'; writing-mode: vertical-rl; rotate: 180deg; font: 700 11px/1 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
body.skin-clean #fight-hud.min:hover .hud-top::after { color: #c8e20a; }

/* téléphone : colonne de 204 px collée à la colonne des joueurs (58 px), sous la bande de la timeline ; repliée d'office (onglet de 48 px) */
body.skin-clean.mobile #fight-hud { left: auto; right: 58px; top: 86px; width: 204px; padding: 8px 8px 6px 10px; transform: none; }
body.skin-clean.mobile #fight-hud #fight-vs { font-size: 14px; letter-spacing: .02em; }
body.skin-clean.mobile #fight-hud .hud-min, body.skin-clean.mobile #fight-hud .hud-min:hover:not(:disabled) { width: 32px; height: 32px; font-size: 20px; }
body.skin-clean.mobile #fight-hud .hud-tabs { gap: 10px; margin-top: 0; }
body.skin-clean.mobile #fight-hud .hud-tabs button { font-size: 14px; letter-spacing: 0; padding: 10px 0 9px; }
body.skin-clean.mobile #fight-hud .hud-col:not(.foe) .hud-label { display: none; }
body.skin-clean.mobile #fight-hud .hud-cols { margin-top: 6px; gap: 12px; }
body.skin-clean.mobile #fight-hud.wide .hud-cols { margin-top: 0; }
body.skin-clean.mobile #fight-hud.wide .hud-col .hud-label { display: block; margin: 7px 0 3px; font-size: 11px; }
body.skin-clean.mobile #fight-hud .mrow { height: 29px; gap: 7px; }
body.skin-clean.mobile #fight-hud .micon { width: 26px; height: 26px; }
body.skin-clean.mobile #fight-hud .micon b { font-size: 10px; height: 12px; bottom: -6px; }
body.skin-clean.mobile #fight-hud .mrow .mb { width: 96px; }
body.skin-clean.mobile #fight-hud .mrow .mv { font-size: 15px; }
body.skin-clean.mobile #fight-hud .hud-compare { height: 38px; margin-top: 4px; padding: 0; font-size: 14px; }
body.skin-clean.mobile #fight-hud .hud-compare { font-size: 0; }   /* téléphone : « Comparer › » / « Masquer » sur une ligne */
body.skin-clean.mobile #fight-hud .hud-compare::before { content: 'Comparer'; font-size: 14px; }
body.skin-clean.mobile #fight-hud.wide .hud-compare::before { content: "Masquer l’adversaire"; }
body.skin-clean.mobile #fight-hud.wide { width: 380px; }
body.skin-clean.mobile #fight-hud.wide .mrow .mb { width: auto; }
body.skin-clean.mobile #fight-hud.min { width: 48px; padding: 8px 0 10px; }
body.skin-clean.mobile #fight-hud.min .hud-min, body.skin-clean.mobile #fight-hud.min .hud-min:hover:not(:disabled) { font-size: 0; }
body.skin-clean.mobile #fight-hud.min .hud-min::before { font-size: 20px; }
body.skin-clean.mobile #fight-hud.min .hud-top::after { font-size: 13px; }
body.skin-clean.mobile #fight-hud.wide .mrow { height: 25px; }   /* comparaison : 8 lignes de 25 px, le pied reste au-dessus de « Marché » */
body.skin-clean.mobile #fight-hud.wide .micon { width: 22px; height: 22px; }
body.skin-clean.mobile #fight-hud.wide .micon b { font-size: 8.5px; height: 10px; bottom: -5px; }
body.skin-clean.mobile #fight-hud.wide .hud-compare { height: 30px; }