/* Interface v2 « Mi-verre » : en jeu (bulles, notifs, bannières, fenêtres, boutons) — l'interface reste discrète. Base : ui-v2.css. Sous body.ui-v2.
   Scott 2026-10-23 : « en jeu j'aimerais un truc discret qui évite les cadres et les gros menus » → le HUD garde ses rails sans cadre et ses
   pièces flottantes ; seuls les bulles, notifs, bannières, fenêtres et boutons prennent le verre sombre (arête nette 1,5 px, rayon 12, ni lueur
   ni ombre). Lime = actions seulement, or = gains. Maquette : mockups/ui_mix.html?m=2&v=game. ?ui=old = l'ancienne interface (rien ici). */

/* ================================================================ barre du haut : Aide / Quitter en texte flottant (pas de pastille) */
body.ui-v2 #topbar .btn-grey { background: none; box-shadow: none; min-height: 34px; padding: 0 12px; border-radius: var(--v-btn-r); font: 700 15px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 #topbar .btn-grey:hover:not(:disabled) { background: var(--v-sec); box-shadow: var(--v-sec-bd); color: var(--v-tx); }
body.ui-v2 #topbar .icon-btn:hover { background: var(--v-sec); }
body.ui-v2.mobile #topbar .btn-grey { min-height: 30px; padding: 0 8px; font-size: 13px; }

/* ================================================================ bulles (contenu ; la coque est dans ui-v2.css) */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) { font-size: 13px; line-height: 1.4; }
body.ui-v2:not(.mobile) :is(#tooltip, #tooltip2) { min-width: 320px; }   /* textes à 13 px : 20 px de plus que la largeur posée par app-tips.js (300) */
body.ui-v2 #tooltip2 { border-color: var(--v-edge-hi); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-head { padding: 12px 12px 10px; gap: 10px; background: none; border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-head :is(canvas, .tt-img) { width: 52px; height: 52px; border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--rc, #7e6ac8) 22%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc, #7e6ac8) 55%, transparent); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-name { font: 800 16px/1.2 Lexend, sans-serif; letter-spacing: 0; color: var(--v-tx); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-name .stars { font-size: 14px; color: var(--v-gold); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-sub { gap: 4px; margin-top: 5px; }
/* étiquettes : verre teinté, arête fine, rayon 6 ; la pastille de pods garde sa couleur pleine (rareté) */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip { height: 22px; line-height: 22px; padding: 0 8px; gap: 4px; border: 0; border-radius: var(--v-chip-r); font: 600 13px/22px Lexend, sans-serif;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--v-tx2); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip img { width: 14px; height: 14px; object-fit: contain; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip.rc { color: #14101f; font-weight: 700; box-shadow: none; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip.link:hover, body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip[data-tip]:hover { color: var(--v-tx); box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip.rc[data-tip]:hover { color: #14101f; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-sub .chip.on { background: var(--v-lime); color: var(--v-on-lime); box-shadow: none; }
/* résistances : vert = résiste, rouge = faible, neutre = 0 */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip.resi { justify-content: center; padding: 0 5px; font-weight: 700; color: var(--v-tx3); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip.resi.up { background: color-mix(in srgb, var(--v-green) 18%, transparent); color: #a4f6c4; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-green) 50%, transparent); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .chip.resi.down { background: color-mix(in srgb, var(--v-red) 18%, transparent); color: #ffb3c1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-red) 50%, transparent); }
/* sections : libellé de section du système (13 px, capitales espacées, lilas) */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-sec { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-sec:last-child { border-bottom: 0; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-label { margin-bottom: 6px; font: 700 13px/1.2 Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tx2); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-label .r { font: 600 13px Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: var(--v-tx3); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-stat span { color: var(--v-tx2); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-stat b { color: var(--v-tx); font-weight: 800; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-grid + .tt-grid, body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-resi { border-top: 1px solid rgba(255, 255, 255, .07); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-resi-l { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) :is(.tt-text, .tt-line > span:first-child, .tt-combo .cn) { color: var(--v-tx2); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-text b { color: var(--v-tx); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-note { color: var(--v-tx3); font-size: 13px; }
/* paliers : numéro en étiquette, palier atteint en lime */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-step { color: var(--v-tx3); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-step.on { color: var(--v-tx); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-step .n { height: 20px; border: 0; border-radius: var(--v-chip-r); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--v-tx2); font-size: 13px; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-step.on .n { background: var(--v-lime); color: var(--v-on-lime); box-shadow: none; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-combo { border-radius: 8px; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-combo.hi { background: color-mix(in srgb, var(--v-lime) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-lime) 40%, transparent); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-combo .ci.it, body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-items span { background: var(--v-tip-row); border: 0; border-radius: 7px; }
/* tuiles sort / objet : rangée de verre */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-gear { gap: 8px; padding: 10px 12px; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-gear.tt-artes { padding-top: 0; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-tile { border-radius: var(--v-row-r); background: var(--v-tip-row); box-shadow: var(--v-row-bd); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-tile.link:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-tile em { font-size: 13px; color: var(--v-tx); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-tile small { font-size: 12px; color: var(--v-tx3); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-tile .tsp-none { background: var(--v-well); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-unequip { height: 22px; border-radius: var(--v-chip-r); background: var(--v-sec); box-shadow: var(--v-sec-bd); font-size: 12px; }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-unequip:hover { background: var(--v-sec-hi); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-lime); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-relic { border-radius: var(--v-row-r); background: color-mix(in srgb, var(--v-gold) 10%, transparent); border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-gold) 36%, transparent); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-relic b { font-size: 13px; color: var(--v-gold-tx); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-relic span { font-size: 13px; color: var(--v-tx2); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-fx span { border-radius: var(--v-chip-r); font-size: 13px; background: color-mix(in srgb, var(--v-green) 18%, transparent); color: #a4f6c4; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-green) 50%, transparent); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-fx span.bad { background: color-mix(in srgb, var(--v-red) 18%, transparent); color: #ffb3c1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-red) 50%, transparent); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .rec-tile:is(:hover, .on) { border-radius: var(--v-row-r); background: color-mix(in srgb, var(--v-lime) 10%, transparent); border-color: color-mix(in srgb, var(--v-lime) 45%, transparent); }
/* pied : bande d'encre basse, texte 13 px ; or = prix, lime = possible, rouge = impossible */
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-foot { padding: 8px 12px; background: var(--v-well); font-size: 13px; color: var(--v-tx3); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-foot b { color: var(--v-gold-tx); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-foot .ok { color: var(--v-lime); }
body.ui-v2 :is(#tooltip, #tooltip2, .tt-box) .tt-foot .bad { color: var(--v-red); }
/* téléphone : barre d'actions collée en bas de la bulle ; textes ≥ 11 px */
body.ui-v2 .tt-acts { background: rgba(18, 12, 38, .96); border-top: 1px solid var(--v-edge); }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) { font-size: 12px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-head { padding: 8px 9px 7px; gap: 8px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-head :is(canvas, .tt-img) { width: 42px; height: 42px; border-radius: 8px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-name { font-size: 14px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .chip { height: 19px; line-height: 19px; padding: 0 6px; font-size: 11px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-sec { padding: 7px 9px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-label { font-size: 11px; letter-spacing: .08em; margin-bottom: 4px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) :is(.tt-label .r, .tt-resi-l, .tt-note, .tt-tile em, .tt-relic b, .tt-relic span, .tt-fx span, .tt-combo .pano, .tt-step .n) { font-size: 11px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-tile small { font-size: 11px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-gear { padding: 7px 9px; gap: 6px; }
body.ui-v2.mobile :is(#tooltip, #tooltip2, .tt-box) .tt-foot { padding: 6px 9px; font-size: 11px; }

/* ================================================================ petites notifs (#toast) : pastille de verre, icône teintée sans tuile */
body.ui-v2 #toast .ev-toast { align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; box-sizing: border-box; overflow: hidden;
  background: var(--v-tip); border: 1.5px solid var(--v-tip-bd); border-radius: var(--v-r); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur);
  color: var(--v-tx); font: 700 14px/1.25 Lexend, sans-serif; }
body.ui-v2 #toast .ev-toast > b { padding: 7px 0; font-weight: 700; }
body.ui-v2 #toast .tk-ic, body.ui-v2 #toast .tk-ic:has(> img) { width: 26px; height: 26px; border-radius: 0; background: none; }
body.ui-v2 #toast .tk-ic > .ev-ico { width: 22px; height: 22px; background: var(--c); }
body.ui-v2 #toast .ev-toast:is(.k-err, .k-net) .tk-ic > .ev-ico { background: var(--v-red); }
body.ui-v2 #toast .tk-ic > img { width: 24px; height: 24px; }
body.ui-v2 #toast .tk-n { margin: 0 0 0 2px; font: 700 14px/1 Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 #toast .tk-bar { height: 2px; background: var(--c); opacity: .8; }
body.ui-v2 #toast .ev-toast.k-err { border-color: color-mix(in srgb, var(--v-red) 55%, transparent); }
body.ui-v2.mobile #toast .ev-toast { min-height: 30px; gap: 5px; padding: 0 10px 0 5px; font-size: 12px; border-radius: 10px; }
body.ui-v2.mobile #toast .ev-toast > b { padding: 5px 0; }
body.ui-v2.mobile #toast .tk-ic { width: 20px; height: 20px; }
body.ui-v2.mobile #toast .tk-ic > .ev-ico, body.ui-v2.mobile #toast .tk-ic > img { width: 18px; height: 18px; }
body.ui-v2.mobile #toast .tk-n { font-size: 12px; }

/* ================================================================ bannières : bande de verre floutée qui s'efface aux deux bouts (maquette « Niveau 4 ! »)
   titre Rowdies (couleur du type), sous-titre Lexend ; la vignette (icône, portrait, monstre, relique) reste à gauche du titre, sans tuile pleine */
body.ui-v2 #banner { --kt: var(--v-tx); --kc: var(--v-tx2); }
body.ui-v2 #banner.level { --kt: var(--v-lime); --kc: var(--v-lime); }
body.ui-v2 #banner.family { --kt: var(--v-tx); --kc: #cfd6de; }
body.ui-v2 #banner.gold, body.ui-v2 #banner.legend { --kt: var(--v-gold-tx); --kc: var(--v-gold); }
body.ui-v2 #banner.legend:has(.ev-emb.spell) { --kt: #c9b8ff; --kc: #8f7bff; }
body.ui-v2 #banner .ev-drift, body.ui-v2 #banner .ev-big { height: auto; min-height: 76px; max-width: none; column-gap: 14px; row-gap: 4px; padding: 10px 84px 12px; border: 0; border-radius: 0;
  background: rgba(18, 12, 38, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
body.ui-v2 #banner .ev-drift:not(:has(.ev-emb, .ev-cell)) { padding-left: 84px; justify-items: center; }
body.ui-v2 #banner .ev-bar, body.ui-v2 #banner .ev-big::after { height: 2px; left: 72px; right: 72px; background: var(--kc); opacity: .7; }
/* vignette : sans tuile ; une icône de masque prend la couleur du type */
body.ui-v2 #banner .ev-emb, body.ui-v2 #banner .ev-cell { width: 52px; height: 52px; border-radius: 10px; background: none; }
body.ui-v2 #banner .ev-cell { background: color-mix(in srgb, var(--kc) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kc) 50%, transparent); }
body.ui-v2 #banner .ev-cell .ev-ico { width: 30px; height: 30px; background: var(--kc); }
body.ui-v2 #banner .ev-emb.spell > img { border-radius: 10px; }
body.ui-v2 #banner :is(.ev-title, .ev-hd span) { font: 400 calc(32px * var(--fit, 1))/1.05 Rowdies, Lexend, sans-serif; letter-spacing: .01em; text-transform: none; color: var(--kt); }
body.ui-v2 #banner .ev-star { background: var(--v-gold); }
body.ui-v2 #banner .bn-sub { font: 600 14px/1.3 Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 #banner .bn-sub :is(em, b) { color: var(--v-tx); font-weight: 700; }
/* grands moments (Défi) : même bande ; portraits ronds sans tuile or, pastille VS d'encre */
body.ui-v2 #banner .ev-big.duel .ev-band { background: none; padding: 0; }
body.ui-v2 #banner .ev-big .ev-pf { background: var(--v-ink3); border-width: 2px; }
body.ui-v2 #banner .ev-big.duel .ev-vs { background: var(--v-ink1); box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 #banner .ev-big.duel .ev-vs::after { color: var(--v-gold-tx); font-size: 11px; }
body.ui-v2 #banner .ev-big.prep .ev-half.F { background: color-mix(in srgb, var(--v-gold) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-gold) 50%, transparent); }
body.ui-v2 #banner .ev-big.prep .ev-half.F::after { background: var(--v-gold); }
body.ui-v2 #banner .ev-big.prep .ev-btitle { font: 600 14px/1.3 Lexend, sans-serif; color: var(--v-lime); }
body.ui-v2 #banner .ev-big.prep .ev-hd span, body.ui-v2 #banner .ev-big.duel .ev-hd span { color: var(--v-gold-tx); }
body.ui-v2.mobile #banner .ev-drift, body.ui-v2.mobile #banner .ev-big { min-height: 52px; padding: 5px 44px 6px; column-gap: 9px; row-gap: 2px; max-width: none; border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38px, #000 calc(100% - 38px), transparent); mask-image: linear-gradient(90deg, transparent, #000 38px, #000 calc(100% - 38px), transparent); }
body.ui-v2.mobile #banner .ev-bar, body.ui-v2.mobile #banner .ev-big::after { left: 38px; right: 38px; }
body.ui-v2.mobile #banner .ev-emb, body.ui-v2.mobile #banner .ev-cell, body.ui-v2.mobile #banner .ev-big.prep .ev-half.F { width: 40px; height: 40px; border-radius: 8px; }
body.ui-v2.mobile #banner .ev-cell .ev-ico, body.ui-v2.mobile #banner .ev-big.prep .ev-half.F::after { width: 24px; height: 24px; }
body.ui-v2.mobile #banner .ev-emb.spr > canvas { width: 52px; height: 52px; margin: -23px 0 0 -26px; }
body.ui-v2.mobile #banner .ev-emb.god > img { width: 40px; height: 40px; }
body.ui-v2.mobile #banner :is(.ev-title, .ev-hd span) { font-size: calc(22px * var(--fit, 1)); }
body.ui-v2.mobile #banner :is(.bn-sub, .ev-big.prep .ev-btitle) { font-size: 11px; }

/* ================================================================ pause : voile d'encre, mot en Rowdies, consigne en pastille de verre */
body.ui-v2 #sk-pause { background: rgba(16, 10, 34, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.ui-v2 #sk-pause small { padding: 7px 14px; border-radius: var(--v-r); background: var(--v-tip); box-shadow: inset 0 0 0 1.5px var(--v-tip-bd); color: var(--v-tx2); font: 600 14px/1.2 Lexend, sans-serif; }
body.ui-v2.mobile #sk-pause small { font-size: 12px; padding: 5px 11px; }

/* ================================================================ voiles des fenêtres en jeu : encre violette + léger flou (comme la maquette) */
body.ui-v2 :is(#quit, #results) { background: rgba(16, 10, 34, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.ui-v2 #evo { background: rgba(16, 10, 34, .7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.ui-v2.mobile #evo { background: rgba(16, 10, 34, .8); }

/* ================================================================ « Quitter la partie ? » : feuille de verre, gains en rangées, « Quitter » en danger discret */
body.ui-v2 #quit .qt-box { background: var(--v-sheet); border: 1.5px solid var(--v-edge); border-radius: var(--v-r); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); padding: 22px 24px; gap: 14px; }
body.ui-v2 #quit .qt-box h2 { font: 400 30px/1.1 Rowdies, Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 #quit .qt-box p { font-size: 14px; color: var(--v-tx2); }
body.ui-v2 #quit .qt-box p b { color: var(--v-tx); }
body.ui-v2 #quit .qt-res > div { border: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); padding: 10px 6px; }
body.ui-v2 #quit .qt-res b { color: var(--v-gold-tx); }
body.ui-v2 #quit .qt-res span { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #quit .qt-res .qt-place b { color: #ff8f9f; }
body.ui-v2 #quit .qt-res .bad b { color: var(--v-red); }
body.ui-v2 #quit .qt-btns .btn-green, body.ui-v2 #quit .qt-quit { height: 46px; font-size: 15px; }
body.ui-v2 #quit .qt-quit { border: 0; border-radius: var(--v-btn-r); background: color-mix(in srgb, var(--v-red) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-red) 60%, transparent); color: #ffb3c1; filter: none; }
body.ui-v2 #quit .qt-quit:hover:not(:disabled) { background: color-mix(in srgb, var(--v-red) 26%, transparent); color: #fff; }
body.ui-v2 #quit .qt-quit:disabled { opacity: .5; filter: none; }

/* ================================================================ fenêtre « Ton sort évolue » : titre en Rowdies, sort actuel en rangée, deux cartes de verre */
body.ui-v2 #evo .evo-title .ev-plate { height: auto; background: none; gap: 14px; }
body.ui-v2 #evo .evo-title .ev-cell { width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--v-lime) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-lime) 55%, transparent); }
body.ui-v2 #evo .evo-title .ev-cell .ev-ico { width: 28px; height: 28px; background: var(--v-lime); }
body.ui-v2 #evo .evo-title .ev-txt { padding: 0 6px 0 0; }
body.ui-v2 #evo .evo-title .ev-title { font: 400 38px/1.1 Rowdies, Lexend, sans-serif; letter-spacing: .01em; text-transform: none; color: var(--v-tx); }
body.ui-v2 #evo .evo-title .ev-bar { display: none; }
body.ui-v2 #evo .evo-title .bn-sub { height: 28px; padding: 0 12px; border-radius: var(--v-chip-r); background: var(--v-sec); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx2); font: 700 13px/1 Lexend, sans-serif; letter-spacing: .12em; }
body.ui-v2 #evo .evo-cur { min-height: 52px; padding: 7px 18px 7px 8px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-card); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); color: var(--v-tx2); }
body.ui-v2 #evo .evo-cur img.spi { border-radius: 8px; background: color-mix(in srgb, #c0742e 40%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #e08a3c 70%, transparent); }
body.ui-v2 #evo .evo-cur em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #evo .evo-cur > b { font: 800 15px/1 Lexend, sans-serif; letter-spacing: 0; color: var(--v-tx); }
body.ui-v2 #evo .evo-opt { border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-card); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); color: var(--v-tx); }
body.ui-v2 #evo .evo-opt img.spi.big { padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, transparent); }
body.ui-v2 #evo .evo-opt > b { font: 400 26px/1.1 Rowdies, Lexend, sans-serif; letter-spacing: .01em; text-transform: none; }
body.ui-v2 #evo .evo-opt > b::before { margin-bottom: 10px; padding: 0 9px; height: 24px; display: inline-flex; align-items: center; border-radius: var(--v-chip-r);
  background: color-mix(in srgb, var(--tc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 50%, transparent); color: color-mix(in srgb, var(--tc) 35%, #fff); font: 700 13px/1 Lexend, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
body.ui-v2 #evo .evo-opt .eo-txt { color: var(--v-tx2); }
body.ui-v2 #evo .evo-opt .eo-txt b { color: var(--v-tx); }
/* « Choisir » : le bouton principal du système (citron plat, bande plus foncée), posé dans la carte */
body.ui-v2 #evo .evo-opt::after { align-self: stretch; height: 48px; margin: 20px 18px 18px; padding: 0 0 2px; border-radius: var(--v-btn-r); background: var(--v-lime); box-shadow: inset 0 -3px 0 var(--v-lime-band);
  color: var(--v-on-lime); font: 700 16px/1 Lexend, sans-serif; letter-spacing: .02em; text-transform: none; }
body.ui-v2 #evo .evo-opt:hover, body.ui-v2 #evo .evo-opt:focus-visible { border-color: var(--v-edge-hi); background: rgba(34, 26, 64, .72); }
body.ui-v2 #evo .evo-opt:hover::after, body.ui-v2 #evo .evo-opt:focus-visible::after { background: var(--v-lime-hi); color: var(--v-on-lime); }
body.ui-v2 #evo .eo-or { background: var(--v-card); box-shadow: inset 0 0 0 1.5px var(--v-edge); color: var(--v-tx2); font-size: 13px; }
body.ui-v2 #evo .evo-must { color: var(--v-tx3); font: 600 13px Lexend, sans-serif; }
body.ui-v2 #evo .evo-min { height: 44px; padding: 0 24px; font-size: 15px; }
body.ui-v2 .evo-pin { background: var(--v-tip); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }
body.ui-v2 .evo-pin:hover { background: rgba(34, 26, 64, .92); }
body.ui-v2 .evo-pin em { color: var(--v-lime); }
body.ui-v2 :is(.evo-tuto, .t4-tip) { transform: none; border-radius: var(--v-chip-r); background: var(--v-tip); box-shadow: inset 0 0 0 1.5px var(--v-tip-bd); color: var(--v-tx2); }
body.ui-v2 :is(.evo-tuto, .t4-tip) > span { transform: none; }
body.ui-v2.mobile #evo .evo-title .ev-cell { width: 32px; height: 32px; border-radius: 8px; }
body.ui-v2.mobile #evo .evo-title .ev-cell .ev-ico { width: 19px; height: 19px; }
body.ui-v2.mobile #evo .evo-title .ev-title { font-size: 22px; }
body.ui-v2.mobile #evo .evo-title .bn-sub { height: 22px; padding: 0 9px; font-size: 11px; letter-spacing: .08em; }
body.ui-v2.mobile #evo .evo-cur { min-height: 38px; padding: 3px 12px 3px 4px; }
body.ui-v2.mobile #evo .evo-cur em { font-size: 11px; }
body.ui-v2.mobile #evo .evo-opt > b { font-size: 19px; }
body.ui-v2.mobile #evo .evo-opt > b::before { height: 19px; padding: 0 7px; margin-bottom: 6px; font-size: 11px; }
body.ui-v2.mobile #evo .evo-opt::after { height: 40px; margin: 10px 12px 12px; font-size: 14px; }

/* ================================================================ récap de fin de combat : carte de verre, arête de la couleur du résultat */
body.ui-v2 #recap { background: var(--v-tip); border: 1.5px solid color-mix(in srgb, var(--v-green) 60%, transparent); border-radius: var(--v-r); box-shadow: none;
  -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); color: var(--v-tx); padding: 10px 12px 11px; }
body.ui-v2 #recap.lose { border-color: color-mix(in srgb, var(--v-red) 65%, transparent); box-shadow: none; }
body.ui-v2 #recap .rc-res { font: 400 20px/1.1 Rowdies, Lexend, sans-serif; letter-spacing: .01em; text-transform: none; color: #a4f6c4; }
body.ui-v2 #recap.lose .rc-res { color: #ffb3c1; }
body.ui-v2 #recap .rc-vs { font-size: 13px; color: var(--v-tx2); opacity: 1; }
body.ui-v2 #recap .rc-dmg { border-radius: var(--v-chip-r); background: var(--v-red); box-shadow: none; }
body.ui-v2 #recap .rc-chips > span { height: 24px; padding: 0 8px; border-radius: var(--v-chip-r); background: var(--v-tip-row); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--v-tx); font-size: 13px; }
body.ui-v2 #recap .rc-chips > .up { background: var(--v-lime); color: var(--v-on-lime); box-shadow: none; }
body.ui-v2 #recap .rc-chips > .bad { background: color-mix(in srgb, var(--v-red) 22%, transparent); color: #ffb3c1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-red) 55%, transparent); }
body.ui-v2 #recap .rc-tac { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #recap .rc-tac b { color: var(--v-gold-tx); }
body.ui-v2.mobile #recap .rc-res { font-size: 16px; }
body.ui-v2.mobile #recap :is(.rc-vs, .rc-tac) { font-size: 11px; }
body.ui-v2.mobile #recap .rc-chips > span { height: 20px; font-size: 11px; padding: 0 6px; }

/* ================================================================ titres des scènes (Top 4, Éliminé, Top 1, Sanctuaire) : la bande de verre des bannières, en grand
   titre Rowdies (or pour les podiums, rose-rouge pour Éliminé), sous-titre en libellé de section ; plus de plaque d'encre ni de pilule indigo */
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct { --kt: var(--v-gold-tx); --kc: var(--v-gold); width: max-content; max-width: 100%; margin: 0 auto; gap: calc(6 * var(--u));
  padding: calc(14 * var(--u)) calc(120 * var(--u)) calc(16 * var(--u)); box-sizing: border-box;
  background: rgba(18, 12, 38, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(100 * var(--u)), #000 calc(100% - 100 * var(--u)), transparent); mask-image: linear-gradient(90deg, transparent, #000 calc(100 * var(--u)), #000 calc(100% - 100 * var(--u)), transparent); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct.kc-red { --kt: #ff8f9f; --kc: var(--v-red); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-plate { height: auto; background: none; border: 0; border-radius: 0; gap: calc(16 * var(--u)); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-cell { width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: 0; border-radius: calc(12 * var(--u));
  background: color-mix(in srgb, var(--kc) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kc) 55%, transparent); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-cell .ev-ico, body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct.kc-red .ev-cell .ev-ico { width: calc(36 * var(--u)); height: calc(36 * var(--u)); background: var(--kc); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-txt, body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-cell + .ev-txt { padding: 0; }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-title { font: 400 max(var(--fmin), calc(52 * var(--u) * var(--fit, 1)))/1.05 Rowdies, Lexend, sans-serif; letter-spacing: .01em; text-transform: none; color: var(--kt); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-bar { display: none; }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .bn-sub { height: auto; padding: 0; border-radius: 0; background: none; animation: none;
  font: 700 max(var(--fmin), calc(15 * var(--u)))/1.2 Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tx2); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .bn-sub :is(em, b), body.ui-v2 .ch-sn { color: var(--v-tx); }
body.ui-v2 :is(.t4-head, .el-box, .ch-title, .lb-title) .sct > .ev-hd span { color: var(--v-gold-tx); }
body.ui-v2 #top4 .sct .ev-ln, body.ui-v2 #champion .sct .ev-ln { display: none; }
/* Éliminé : voile plat (plus de hachures) ; « Clic pour continuer » en pastille de verre */
body.ui-v2 #elim { background: rgba(40, 10, 32, .58); }
body.ui-v2 :is(.t4-foot, .ch-foot) { padding: 4px 10px; border-radius: 8px; background: var(--v-tip); box-shadow: inset 0 0 0 1.5px var(--v-tip-bd); color: var(--v-tx2); font: 600 13px/1.2 Lexend, sans-serif; }
body.ui-v2.mobile :is(#top4 .t4-foot, #champion .ch-foot) { font-size: 11px; line-height: 1.2; padding: 3px 8px; }
/* Top 4 : plaques des noms en verre (plus de biseaux) ; puce TOI citron droite */
body.ui-v2 .t4-pl { background: var(--v-tip); clip-path: none; border-radius: calc(10 * var(--pu)); box-shadow: inset 0 0 0 1.5px var(--v-tip-bd); }
body.ui-v2 .t4-pf { clip-path: none; margin: calc(4 * var(--pu)); width: calc(50 * var(--pu)); border-radius: calc(7 * var(--pu)); background: color-mix(in srgb, var(--c) 28%, var(--v-ink1)); }
body.ui-v2 .t4-pf img { left: 50%; margin-left: calc(-26 * var(--pu)); }
body.ui-v2 .t4-tx { padding-left: calc(4 * var(--pu)); }
body.ui-v2 .t4-bar { left: calc(10 * var(--pu)); right: calc(10 * var(--pu)); height: calc(2 * var(--pu)); }
body.ui-v2 .t4-sub { clip-path: none; border-radius: calc(6 * var(--pu)); background: var(--v-tip); box-shadow: inset 0 0 0 1px var(--v-tip-bd); color: var(--v-tx2); margin-left: calc(8 * var(--pu)); font-size: calc(12 * var(--pu)); }
body.ui-v2 .t4-plate.out .t4-sub { color: #ffb3c1; }
body.ui-v2 .t4-toi { clip-path: none; border-radius: calc(5 * var(--pu)); background: var(--v-lime); color: var(--v-on-lime); }

/* ================================================================ résultats de fin de partie : feuille de verre, rangées, gains en or, cartes du résumé en rangées */
body.ui-v2 #results .rs-box { background: var(--v-sheet); border: 1.5px solid var(--v-edge); border-radius: var(--v-r); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
body.ui-v2 #results .rs-box.champ { border-color: color-mix(in srgb, var(--v-gold) 70%, transparent); box-shadow: none; }
body.ui-v2 #results .rs-box.champ h2 { color: var(--v-gold-tx); text-shadow: none; }
body.ui-v2 #results .rs-place { border-width: 4px; background: none; }
body.ui-v2 #results .rs-place span { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #results .rs-box h2 { color: var(--v-tx); }
body.ui-v2 #results .rs-sub { font-size: 14px; color: var(--v-tx2); }
body.ui-v2 #results :is(.rs-rank, .rs-rewards > div) { border: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 #results .rs-rank span:not(.rs-delta), body.ui-v2 #results .rs-rewards span { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #results .rs-rank .bar { background: var(--v-track); }
body.ui-v2 #results .rs-rewards b { color: var(--v-gold-tx); }
body.ui-v2 #results .rs-rw { transform: none; }
body.ui-v2 #results .rs-rw.on { transform: none; background: color-mix(in srgb, var(--v-gold) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-gold) 60%, transparent); }
body.ui-v2 #results .rs-promo { border-radius: var(--v-row-r); }
body.ui-v2 #results .rs-missions { font-size: 13px; color: var(--v-gold-tx); }
body.ui-v2 #results .rs-btns .btn-green { min-height: 48px; font-size: 16px; }
body.ui-v2 #results .rs-btns .btn-grey, body.ui-v2 #results .rs-wide .rs-btns .btn-grey { height: 44px; border: 0; border-radius: var(--v-btn-r); background: var(--v-sec); box-shadow: var(--v-sec-bd); color: var(--v-tx); font-size: 14px; }
body.ui-v2 #results .rs-wide .rs-btns .btn-grey:hover:not(:disabled) { background: var(--v-sec-hi); box-shadow: var(--v-sec-bd); }
body.ui-v2 #results .rs-wide .rs-btns #rs-watch { box-shadow: var(--v-sec-bd); color: var(--v-tx); }
body.ui-v2 #results .rs-note { color: var(--v-tx2); }
body.ui-v2 #results .rs2-card { border-radius: var(--v-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 #results .rs2-card h4 { font: 700 13px/1.2 Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 #results .rs2-card h4::before { display: none; }
body.ui-v2 #results .rs2-card h4 small { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #results .rs2-card .empty-note { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #results .rs2-bench { border-top: 1px solid rgba(255, 255, 255, .07); }
body.ui-v2 #results .rs2-k { font-size: 12px; color: var(--v-tx3); }
body.ui-v2 #results .rs2-bar { background: var(--v-track); }
body.ui-v2 #results .rs2-v small { font-size: 12px; color: var(--v-tx3); }
body.ui-v2 #results :is(.rs2-s, .rs2-i) { border-radius: var(--v-row-r); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
body.ui-v2 #results .rs2-s b, body.ui-v2 #results .rs2-i em { font-size: 13px; }
body.ui-v2.mobile #results :is(.rs-sub, .rs-rank span:not(.rs-delta), .rs-rewards span, .rs-missions, .rs2-card h4, .rs2-card .empty-note) { font-size: 11px; }
body.ui-v2.mobile #results .rs-btns .btn-green { min-height: 40px; font-size: 14px; }
body.ui-v2.mobile #results .rs-btns .btn-grey { height: 38px; font-size: 13px; }

/* ================================================================ tutoriel : carte coach de verre (plus de biseau ni de reflet), case d'icône teintée, main et voile */
body.ui-v2 .co-box { background: var(--v-tip); border: 1.5px solid var(--v-tip-bd); border-radius: var(--v-r); clip-path: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
body.ui-v2 .co-plate { height: 48px; background: none; border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.ui-v2 .co-cell { width: 32px; height: 32px; margin: 0 0 0 10px; align-self: center; border-radius: 8px; clip-path: none;
  background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
body.ui-v2 .co-ic { width: 20px; height: 20px; margin: 0; background: var(--c); }
body.ui-v2 .co-title { padding: 0 8px 0 10px; font: 800 16px/1.2 Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: var(--v-tx); }
body.ui-v2 .co-n { color: var(--v-tx3); font-size: 13px; }
body.ui-v2 :is(.co-bar, .co-sw) { display: none; }
body.ui-v2 .co-x { padding: 10px 14px 6px; color: var(--v-tx); }
body.ui-v2 .co-x b { color: var(--v-gold-tx); }
body.ui-v2 .co-foot { padding: 6px 12px 12px; }
body.ui-v2 .co-skip { color: var(--v-tx3); font-size: 13px; }
body.ui-v2 .co-skip:hover { color: var(--v-tx); }
body.ui-v2 .co-wait { font-size: 13px; letter-spacing: .12em; }
body.ui-v2 #ts-mask { background: rgba(16, 10, 34, .64); }
body.ui-v2 .coach-ring { outline-color: var(--v-ink1); border-radius: 12px; }
body.ui-v2 .coach-ring polygon.k { stroke: var(--v-ink1); }
body.ui-v2 #ts-hand .th-ghost { background: var(--v-tip); border: 2px solid var(--v-lime); }
body.ui-v2 #ts-hand .th-rip { border-width: 3px; border-color: var(--v-lime); }
body.ui-v2.mobile .co-plate { height: 40px; }
body.ui-v2.mobile .co-cell { width: 28px; height: 28px; margin-left: 8px; }
body.ui-v2.mobile .co-ic { width: 17px; height: 17px; }
body.ui-v2.mobile .co-title { font-size: 17px; }
body.ui-v2.mobile .co-foot { padding: 2px 10px 8px 4px; }

/* ================================================================ titre du Défi de Goultard (js/goultard-intro.js, #gti posé sur body) : la bande de verre des bannières */
body.ui-v2 #gti .gti-veil { background: rgba(16, 10, 34, .5); }
body.ui-v2 #gti .gti-band { border: 0; background: rgba(18, 12, 38, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
body.ui-v2 #gti .gti-glint { display: none; }
body.ui-v2 #gti .gti-tt { font: 400 min(9vh, 5.2vw)/1 Rowdies, Lexend, sans-serif; letter-spacing: .01em; text-transform: none; }
body.ui-v2 #gti .gti-tt .w1 { color: var(--v-tx); font-weight: 400; }
body.ui-v2 #gti .gti-tt .w2 { color: var(--v-gold-tx); }
body.ui-v2 #gti .gti-skip { color: var(--v-tx2); }

/* ---------------------------------------------------------------- panneau de combat « Récap » (Scott 2026-10-23) : replié, une pastille de verre
   sous la timeline à droite, à la hauteur du butin (« horizontal et parallèle aux loots de la manche ») ; ouvert (« adapte aussi la page qui s'y
   ouvre »), la même pastille se déroule en fenêtre de verre : « Récap » reste à sa place, le « – » remplace le « + », toute la ligne de titre
   referme. PC : ancré au bord gauche de la pastille (1225 px), il s'ouvre vers la droite et le bas sans couvrir le plateau ; la comparaison
   (460 px) s'étend vers la gauche. Téléphone : ancré au bord droit (à côté de la colonne des joueurs). */
body.ui-v2.skin-clean #fight-hud { padding: 0 10px 6px 14px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-tip);
  -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); box-shadow: none; color: var(--v-tx); transform-origin: 0 0; }
body.ui-v2.skin-clean:not(.mobile) #fight-hud, body.ui-v2.skin-clean:not(.mobile) #game:has(#players.sk-duel) #fight-hud { left: 1225px; right: auto; top: 152px; }
body.ui-v2.skin-clean:not(.mobile) #fight-hud { width: 250px; }
body.ui-v2.skin-clean:not(.mobile) #fight-hud.wide, body.ui-v2.skin-clean:not(.mobile) #game:has(#players.sk-duel) #fight-hud.wide { left: 1015px; }
body.ui-v2.skin-clean:not(.mobile) #fight-hud.wide { width: 460px; }
body.ui-v2.skin-clean #fight-hud.enter { animation: hudV2In .2s ease-out; }
body.ui-v2.skin-clean.noanim #fight-hud.enter { animation: none; }
@keyframes hudV2In { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
/* ligne de titre : « Récap » + « – », puis le combat (« Dernier combat · défaite » / « Toi contre Luc Asart ») */
body.ui-v2.skin-clean #fight-hud .hud-top { position: relative; flex-wrap: wrap; gap: 0 10px; cursor: pointer; }
body.ui-v2.skin-clean #fight-hud .hud-ttl { display: block; flex: 1; order: 0; height: 37px; font: 700 13px/37px Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tx); }
body.ui-v2.skin-clean #fight-hud .hud-top::after { content: none; }
body.ui-v2.skin-clean #fight-hud .hud-min, body.ui-v2.skin-clean #fight-hud .hud-min:hover:not(:disabled) { position: static; order: 1; align-self: center; width: 26px; height: 26px; margin-right: -4px;
  border: 0; border-radius: 7px; background: var(--v-sec); box-shadow: var(--v-sec-bd); color: var(--v-tx); font-size: 0; }
body.ui-v2.skin-clean #fight-hud .hud-min::before { content: '–'; font: 800 17px/1 Lexend, sans-serif; }
body.ui-v2.skin-clean #fight-hud .hud-min::after { content: ''; position: absolute; inset: 0; }   /* zone de clic : toute la ligne de titre */
body.ui-v2.skin-clean #fight-hud .hud-top:hover .hud-min { background: var(--v-lime); box-shadow: none; color: var(--v-on-lime); }
body.ui-v2.skin-clean #fight-hud #fight-vs { order: 2; flex: 0 0 100%; margin: -2px 0 2px; font: 700 12.5px/1.35 Lexend, sans-serif; text-transform: none; letter-spacing: 0; color: var(--v-tx); }
body.ui-v2.skin-clean #fight-hud #fight-vs em { color: var(--v-tx3); }
body.ui-v2.skin-clean #fight-hud .hud-last { font: 600 11px/1.5 Lexend, sans-serif; letter-spacing: .02em; color: var(--v-tx3); }
body.ui-v2.skin-clean #fight-hud .hud-last b { color: var(--v-green); } body.ui-v2.skin-clean #fight-hud .hud-last b.lose { color: var(--v-red); }
/* onglets, colonnes, lignes */
body.ui-v2.skin-clean #fight-hud .hud-tabs { margin-top: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.ui-v2.skin-clean #fight-hud .hud-tabs button { color: var(--v-tx3); }
body.ui-v2.skin-clean #fight-hud .hud-tabs button:hover, body.ui-v2.skin-clean #fight-hud .hud-tabs button.on, body.ui-v2.skin-clean #fight-hud .hud-tabs button.on:hover { color: var(--v-tx); }
body.ui-v2.skin-clean #fight-hud .hud-tabs button.on::after { border-radius: 2px; background: var(--v-lime); }
body.ui-v2.skin-clean #fight-hud .hud-label { color: var(--v-tx3); }
body.ui-v2.skin-clean #fight-hud .micon { border-color: var(--v-edge-hi); }
body.ui-v2.skin-clean #fight-hud .micon.cmd { border-color: var(--v-lime); }
body.ui-v2.skin-clean #fight-hud .micon b { color: var(--v-gold); }
body.ui-v2.skin-clean #fight-hud .mrow .mb { height: 7px; border-radius: 4px; background: var(--v-track); }
body.ui-v2.skin-clean #fight-hud .mrow .mb i { border-radius: 4px; }
body.ui-v2.skin-clean #fight-hud .mrow .mv { color: var(--v-tx); }
body.ui-v2.skin-clean #fight-hud .mrow:first-child:not(.dead) .mv { color: var(--v-gold-tx); }   /* lignes triées : la meilleure */
body.ui-v2.skin-clean #fight-hud .mrow.dead .mv { color: var(--v-tx3); }
body.ui-v2.skin-clean #fight-hud .mrow.dead .mb i { background: rgba(176, 156, 244, .45); }
body.ui-v2.skin-clean #fight-hud .hud-compare { margin-top: 4px; padding: 9px 0 3px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--v-tx2); }
body.ui-v2.skin-clean #fight-hud .hud-compare:hover { color: var(--v-tx); }
body.ui-v2.skin-clean #fight-hud.wide .hud-col:not(.foe) .hud-label { color: var(--v-lime); }
body.ui-v2.skin-clean #fight-hud.wide .hud-col.foe .hud-label { color: var(--v-red); }
/* replié : la pastille « Récap » + « + » citron ; toute la pastille rouvre */
body.ui-v2.skin-clean #fight-hud.min, body.ui-v2.skin-clean #fight-hud.min.wide { width: auto; height: 38px; padding: 0 6px 0 14px; display: flex; align-items: center; border: 1.5px solid var(--v-edge); cursor: pointer; }
body.ui-v2.skin-clean:not(.mobile) #fight-hud.min, body.ui-v2.skin-clean:not(.mobile) #game:has(#players.sk-duel) #fight-hud.min { left: 1225px; }
body.ui-v2.skin-clean #fight-hud.min:hover { border-color: var(--v-edge-hi); background: rgba(34, 26, 64, .9); }
body.ui-v2.skin-clean #fight-hud.min .hud-top { position: static; flex-direction: row; flex-wrap: nowrap; gap: 10px; }
body.ui-v2.skin-clean #fight-hud.min .hud-ttl { height: auto; line-height: 1; }
body.ui-v2.skin-clean #fight-hud.min .hud-min, body.ui-v2.skin-clean #fight-hud.min .hud-min:hover:not(:disabled) { margin-right: 0; background: var(--v-lime); box-shadow: none; color: var(--v-on-lime); }
body.ui-v2.skin-clean #fight-hud.min .hud-min::before { content: '+'; }
/* téléphone */
body.ui-v2.skin-clean.mobile #fight-hud { right: 66px; top: 98px; width: 214px; padding: 0 8px 4px 10px; }
body.ui-v2.skin-clean.mobile #fight-hud.wide { width: 380px; }
body.ui-v2.skin-clean.mobile #fight-hud .hud-ttl { height: 31px; font-size: 12px; line-height: 31px; }
body.ui-v2.skin-clean.mobile #fight-hud #fight-vs { font-size: 12px; }
body.ui-v2.skin-clean.mobile #fight-hud .hud-min, body.ui-v2.skin-clean.mobile #fight-hud .hud-min:hover:not(:disabled) { width: 24px; height: 24px; margin-right: -4px; }
body.ui-v2.skin-clean.mobile #fight-hud .hud-min::before { font-size: 16px; }
body.ui-v2.skin-clean.mobile #fight-hud:not(.min) { display: flex; flex-direction: column; max-height: calc(100% - var(--hud-top, 98px) - 6px); }   /* trop de lignes : elles défilent */
body.ui-v2.skin-clean.mobile #game:not(.mk-closed) #fight-hud:not(.min) { max-height: calc(326px - var(--hud-top, 98px)); }   /* marché ouvert (haut à 332 px) : la fenêtre s'arrête au-dessus */
body.ui-v2.skin-clean.mobile #fight-hud .hud-cols { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
body.ui-v2.skin-clean.mobile #fight-hud .hud-tabs button { padding: 7px 0 6px; }
body.ui-v2.skin-clean.mobile #fight-hud .mrow { flex: none; height: 26px; }
body.ui-v2.skin-clean.mobile #fight-hud .micon { width: 22px; height: 22px; }
body.ui-v2.skin-clean.mobile #fight-hud .micon b { font-size: 8.5px; height: 10px; bottom: -5px; }
body.ui-v2.skin-clean.mobile #fight-hud .hud-compare { flex: none; height: 32px; }
body.ui-v2.skin-clean.mobile #fight-hud.min { width: auto; height: 32px; padding: 0 4px 0 10px; }
body.ui-v2.skin-clean.mobile #fight-hud.min .hud-top { gap: 7px; }
body.ui-v2.skin-clean.mobile #fight-hud.min .hud-ttl { height: auto; line-height: 1; }
body.ui-v2.skin-clean.mobile #fight-hud.min .hud-min, body.ui-v2.skin-clean.mobile #fight-hud.min .hud-min:hover:not(:disabled) { margin-right: 0; }

/* ================================================================ résultats : carte « Ton héros » (2026-10-23, js/app-tips.js heroCardHtml) — en tête du
   résumé sur toute la largeur : portrait + classe, caractéristiques finales (2 colonnes : les 4 de base, puis pods, puissance,
   initiative, PV), le sort de classe et le total de ses dégâts sur la partie, les artefacts. La mise en page vaut aussi pour ?ui=old. */
.rs2:has(.rs2-hero) { grid-template-areas: "hero hero" "board board" "dmg syn" "dmg made"; grid-template-rows: auto auto 1fr auto; }
.rs2-hero { grid-area: hero; }
.rs2-hb { display: grid; grid-template-columns: 92px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .85fr); grid-template-areas: "id st sp ar"; align-items: center; gap: 14px; }
.rs2-hid { grid-area: id; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; cursor: default; }
.rs2-hh { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.rs2-hid b { margin-top: 4px; font: 700 14px/1.1 Lexend, sans-serif; color: #fff; }
.rs2-hid em { font: 600 13px/1.1 Lexend, sans-serif; font-style: normal; color: var(--muted); }
.rs2-hst { grid-area: st; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 4px 14px; min-width: 0; }
.rs2-hs { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; height: 24px; min-width: 0; }
.rs2-hs img { width: 18px; height: 18px; object-fit: contain; }
.rs2-hs em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1 Lexend, sans-serif; font-style: normal; color: var(--muted); }
.rs2-hs b { font: 700 14px/1 Lexend, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.rs2-hsp { grid-area: sp; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); cursor: default; }
.rs2-spi { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.rs2-spi.none { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); }
.rs2-spi.none img { width: 24px; height: 24px; }
.rs2-hspt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs2-hspt > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.15 Lexend, sans-serif; }
.rs2-hv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font: 400 22px/1 Rowdies, sans-serif; color: #fff; }
.rs2-hv small, .rs2-hmore { font: 600 13px/1.1 Lexend, sans-serif; color: var(--muted); white-space: nowrap; }
.rs2-har { grid-area: ar; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rs2-ha { display: flex; align-items: center; gap: 7px; min-width: 0; height: 30px; padding: 0 8px 0 3px; border-radius: 9px; background: rgba(255, 255, 255, .06); cursor: default; }
.rs2-ha img { flex: none; width: 24px; height: 24px; object-fit: contain; }
.rs2-ha em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1 Lexend, sans-serif; font-style: normal; color: #fff; }
body.ui-v2 #results .rs2-hh { border-radius: var(--v-row-r); background: var(--v-row); box-shadow: inset 0 0 0 1.5px var(--v-edge); }
body.ui-v2 #results :is(.rs2-hid em, .rs2-hs em, .rs2-hv small, .rs2-hmore) { color: var(--v-tx3); }
body.ui-v2 #results :is(.rs2-hid b, .rs2-hs b, .rs2-hv, .rs2-ha em) { color: var(--v-tx); }
body.ui-v2 #results :is(.rs2-hsp, .rs2-ha) { border-radius: var(--v-row-r); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
body.ui-v2 #results .rs2-hv { color: var(--v-gold-tx); }
/* téléphone : deux rangées (portrait + caractéristiques ; sort + artefacts) */
body.mobile .rs-m .rs2-hb { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "id st" "sp sp" "ar ar"; gap: 8px 10px; }
body.mobile .rs-m .rs2-hh { width: 46px; height: 46px; }
body.mobile .rs-m .rs2-hid b { font-size: 11.5px; }
body.mobile .rs-m :is(.rs2-hid em, .rs2-hs em, .rs2-hv small, .rs2-hmore, .rs2-ha em, .rs2-hspt > b) { font-size: 11px; }
body.mobile .rs-m .rs2-hs { height: 18px; gap: 5px; grid-template-columns: 14px minmax(0, 1fr) auto; }
body.mobile .rs-m .rs2-hs img { width: 14px; height: 14px; }
body.mobile .rs-m .rs2-hs b { font-size: 12px; }
body.mobile .rs-m .rs2-hst { gap: 2px 12px; }
body.mobile .rs-m .rs2-hsp { padding: 5px 8px; }
body.mobile .rs-m .rs2-spi { width: 32px; height: 32px; }
body.mobile .rs-m .rs2-hv { font-size: 17px; }
body.mobile .rs-m .rs2-har { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
body.mobile .rs-m .rs2-ha { height: 26px; }
body.mobile .rs-m .rs2-ha img { width: 20px; height: 20px; }