/* Interface v2 « Mi-verre » : écrans hors jeu (menu, pages, fenêtres). Base : ui-v2.css. Sous body.ui-v2.
   Maquette : mockups/ui_mix.html?m=2&v=menu (&modal=0, &mobile=1). Verre sombre peu saturé, arêtes nettes de 1,5 px, rayon 12
   (lignes 10, puces 6), pas de lueur ni d'ombre portée ; lime = actions seulement, or = récompenses ; libellés de section en
   13 px capitales espacées ; Rowdies pour les grands nombres et les titres. Téléphone : body.mobile (scène 995 × 460, ×0,85). */
body.ui-v2 {
  --vm-silver: #9cc0ff; --vm-eau: #26a9ff; --vm-r4: #b04dff;
  --vm-glow: rgba(98, 76, 184, .42);
}

/* ================================================================ fond, chargement */
body.ui-v2 #menu { background: radial-gradient(62% 72% at 50% 44%, var(--vm-glow), rgba(0, 0, 0, 0) 72%), var(--v-bg); }
body.ui-v2 #menu .title-sky { opacity: .3; mix-blend-mode: luminosity; }
body.ui-v2 #menu .menu-shade { display: none; }
body.ui-v2 #loading { background: radial-gradient(62% 72% at 50% 44%, var(--vm-glow), rgba(0, 0, 0, 0) 72%), var(--v-bg); gap: 14px; }
body.ui-v2 #loading::before { content: ''; position: absolute; inset: 0; background: url(assets/ui/home_bg.jpg) center / cover; opacity: .3; mix-blend-mode: luminosity; }
body.ui-v2 #loading > * { position: relative; }
body.ui-v2 #loading img { width: 240px; }
body.ui-v2 #loading b { font-size: 32px; letter-spacing: .14em; color: var(--v-tx); }
body.ui-v2 #loading span { font: 600 15px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 #loading i { color: var(--v-tx); }
body.ui-v2 .lbar { width: 420px; height: 8px; border: 0; border-radius: 4px; background: var(--v-track); }
body.ui-v2 .lbar i { background: var(--v-lime); border-radius: 4px; }

/* ================================================================ briques du menu */
/* carte = verre sombre, arête nette ; les fonds peints des anciennes cartes (saison, rang) sont retirés */
body.ui-v2 #menu .card, body.ui-v2 #m-modal .card { background: var(--v-card); 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: 16px 18px; color: var(--v-tx); }
body.ui-v2 .v-sheet { background: var(--v-sheet); border: 1.5px solid var(--v-edge); border-radius: var(--v-r); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
/* libellés : capitales de 13 px espacées (.12em) ; le surtitre (kicker) en lime */
body.ui-v2 #menu .kicker, body.ui-v2 #m-modal .kicker { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-lime); }
body.ui-v2 #menu .card-head { gap: 8px; margin-bottom: 12px; }
body.ui-v2 #menu .card-head > img { width: 16px; height: 16px; opacity: .85; }
body.ui-v2 #menu .card-head h3, body.ui-v2 #menu h3 { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tx2); }
body.ui-v2 #menu h3::after { display: none; }
body.ui-v2 #menu .hint, body.ui-v2 #m-modal .hint { font-size: 13px; font-weight: 500; color: var(--v-tx3); }
body.ui-v2 #menu .empty-note, body.ui-v2 #m-modal .empty-note { font-size: 13px; color: var(--v-tx3); }
/* barres : piste claire, remplissage plat */
body.ui-v2 #menu .bar, body.ui-v2 #m-modal .bar { height: 8px; border: 0; border-radius: 4px; background: var(--v-track); box-shadow: none; }
body.ui-v2 #menu .bar i, body.ui-v2 #m-modal .bar i { background: var(--v-lime); border-radius: 4px; }
body.ui-v2 #menu .bar.mini { height: 4px; }
/* boutons du menu : tailles du système (secondaire 40, petit 36) */
body.ui-v2 #menu .btn-grey, body.ui-v2 #m-modal .btn-grey { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; font: 700 14px Lexend, sans-serif; }
body.ui-v2 #menu .btn-grey.sm, body.ui-v2 #m-modal .btn-grey.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
body.ui-v2 #menu .btn-grey img, body.ui-v2 #m-modal .btn-grey img { width: 18px; height: 18px; object-fit: contain; }
body.ui-v2 #menu .btn-green, body.ui-v2 #m-modal .btn-green { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font: 700 15px Lexend, sans-serif; }
body.ui-v2 #menu .btn-green.big, body.ui-v2 #m-modal .btn-green.big { height: 48px; min-height: 48px; padding: 0 20px 2px; font-size: 15px; }
body.ui-v2 #mh .icon-btn { background: transparent; border: 0; border-radius: var(--v-btn-r); color: var(--v-tx2); width: 40px; height: 40px; }
body.ui-v2 #mh .icon-btn:hover { background: var(--v-sec); color: var(--v-tx); }
body.ui-v2 #mh .icon-btn.off { color: var(--v-tx3); }
body.ui-v2 #mh .icon-btn img { width: 20px; height: 20px; opacity: .9; }

/* ================================================================ barre du haut (feuille de verre, filet bas de 1,5 px) */
body.ui-v2 #mh { height: 72px; gap: 2px; padding: 0 20px; background: var(--v-sheet); border-bottom: 1.5px solid var(--v-edge); box-shadow: none;
  -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
body.ui-v2 .mh-brand { width: auto; gap: 10px; margin-right: 16px; }
body.ui-v2 .mh-brand img { width: 50px; height: 46px; object-fit: contain; }
body.ui-v2 .mh-brand .mh-logo + .mh-words b, body.ui-v2 .mh-brand b { font: 400 16px/1 Rowdies, sans-serif; letter-spacing: .04em; color: var(--v-tx); }
body.ui-v2 .mh-words { gap: 0; }
body.ui-v2 #mnav { gap: 2px; }
body.ui-v2 #mnav button { gap: 8px; padding: 0 13px; font: 700 13px Lexend, sans-serif; letter-spacing: .07em; color: var(--v-tx3); }
body.ui-v2 #mnav button img { width: 18px; height: 18px; opacity: .6; }
body.ui-v2 #mnav button:hover { color: var(--v-tx2); }
body.ui-v2 #mnav button.on { color: var(--v-tx); }
body.ui-v2 #mnav button.on img, body.ui-v2 #mnav button:hover img { opacity: 1; }
body.ui-v2 #mnav button.on::after { left: 13px; right: 13px; height: 3px; border-radius: 3px 3px 0 0; background: var(--v-lime); box-shadow: none; }
body.ui-v2 #mnav button.dot::before { right: 5px; top: 22px; width: 7px; height: 7px; background: var(--v-red); box-shadow: none; }
body.ui-v2 .mh-right { gap: 8px; }
body.ui-v2 #menu .cur { height: 40px; padding: 0 5px 0 7px; gap: 8px; border: 0; border-radius: var(--v-btn-r); background: var(--v-sec); box-shadow: inset 0 0 0 1px var(--v-edge); }
body.ui-v2 #menu .cur:hover { background: var(--v-sec-hi); box-shadow: inset 0 0 0 1px var(--v-edge-hi); }
body.ui-v2 #menu .cur img { width: 26px; height: 26px; }
body.ui-v2 #menu .cur b { font: 700 16px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 #menu .cur-plus { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; border-radius: 9px; background: var(--v-lime); color: var(--v-on-lime); font: 700 18px/1 Lexend, sans-serif; }
body.ui-v2 #mh-profile { height: 48px; gap: 10px; padding: 0 12px 0 4px; margin-left: 0; border: 0; border-radius: var(--v-btn-r); background: var(--v-sec); box-shadow: inset 0 0 0 1px var(--v-edge); }
body.ui-v2 #mh-profile:hover { background: var(--v-sec-hi); box-shadow: inset 0 0 0 1px var(--v-edge-hi); }
body.ui-v2 #mh-avatar { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--v-ink3); }
body.ui-v2 .mh-id { width: 96px; }
body.ui-v2 .mh-id b { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .mh-id span:not(.bar) { font: 500 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 #mh-rank { width: 34px; }
body.ui-v2 .mh-login { border-radius: var(--v-btn-r); }

/* ================================================================ accueil (homeV2, menu.js) */
body.ui-v2 #p-home { padding: 24px 24px 20px; gap: 24px; }
body.ui-v2 #p-home .home-l, body.ui-v2 #p-home .home-r { width: 420px !important; position: relative; z-index: 1; gap: 16px; }
body.ui-v2 #p-home .col.mid { position: relative; z-index: 1; }
/* le décor du dieu de ta classe derrière le perso (fondu en disque, mêlé au fond) */
body.ui-v2 #p-home .v-god { position: absolute; left: 50%; top: 342px; width: 1700px; height: 1700px; transform: translate(-50%, -50%); object-fit: cover; opacity: .6; mix-blend-mode: overlay; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); }
body.ui-v2 #p-home .v-god.fade-out { animation: vGodOut .6s ease forwards; }   /* menu.js : l'ancien vitrail, posé sur le nouveau, s'efface */
body.ui-v2 #p-home .v-god.fade-in { animation: vGodIn .6s ease; }
@keyframes vGodOut { to { opacity: 0; } }
@keyframes vGodIn { from { opacity: 0; } }
/* saison : l'illustration à droite, fondue vers la gauche */
body.ui-v2 #p-home .season { position: relative; flex: none; height: 124px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0 18px; background-image: none; }
body.ui-v2 #p-home .season .v-art { position: absolute; right: 0; top: 0; width: 260px; height: 100%; object-fit: cover; opacity: .65;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
body.ui-v2 #p-home .season .v-in { position: relative; }
body.ui-v2 #p-home .season h2 { margin: 4px 0 8px; font: 400 30px/1.15 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .season-end { gap: 6px; font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .season-end img { width: 14px; height: 14px; }
body.ui-v2 .season-end b { color: var(--v-tx); }
/* missions : lignes de 66 px, anneau de progression (eau ; lime une fois faite), récompense dans un puits */
body.ui-v2 #p-home .missions { flex: none; min-height: 0; display: flex; flex-direction: column; }   /* le cadre de saison parti (2026-10-24) : les dernières parties prennent la place */
body.ui-v2 .ms-timer { gap: 6px; padding: 0; border-radius: 0; background: none; font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .ms-timer img { width: 14px; opacity: .85; }
body.ui-v2 .ms-timer b { color: var(--v-tx2); }
body.ui-v2 .ms-list { gap: 8px; margin-top: auto; }
body.ui-v2 .ms-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; height: 66px; padding: 0 12px; border: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .ms-ring { width: 44px; height: 44px; background: none; }
body.ui-v2 .ms-ring::before { inset: 0; border-radius: 50%; background: conic-gradient(var(--vm-eau) calc(var(--k) * 360deg), var(--v-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); }
body.ui-v2 .ms-ring img { width: 20px; opacity: 1; }
body.ui-v2 .ms-t { gap: 2px; }
body.ui-v2 .ms-t b { font: 700 15px/1.25 Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .ms-t em { font: 600 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .ms-bar { background: var(--v-track); }
body.ui-v2 .ms-bar::after { background: var(--vm-eau, #26a9ff); }
body.ui-v2 .ms-row.ready .ms-bar::after, body.ui-v2 .ms-row.done .ms-bar::after { background: var(--v-lime); }
body.ui-v2 .ms-row:not(.done) .ms-ring::after { background: var(--v-red); box-shadow: 0 0 0 2px var(--v-ink1); }
/* coffre quotidien prêt : un halo doré autour de la case, qui respire doucement */
body.ui-v2 #p-home .gift.ready { border-color: rgba(255, 194, 31, .75); box-shadow: 0 0 0 1px rgba(255, 194, 31, .35), 0 0 22px rgba(255, 194, 31, .32); animation: giftGlow 2.4s ease-in-out infinite; }
@keyframes giftGlow { 50% { box-shadow: 0 0 0 1px rgba(255, 194, 31, .55), 0 0 30px rgba(255, 194, 31, .5); } }
body.ui-v2 .ms-claim { min-width: 0; height: 36px; padding: 0 12px 0 6px; gap: 6px; border: 0; border-radius: 8px; background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx); font: 700 15px Lexend, sans-serif; }
body.ui-v2 .ms-claim img { width: 24px; }
body.ui-v2 .ms-row.ready { border: 0; background: color-mix(in srgb, var(--v-lime) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .ms-row.ready .ms-claim { height: 44px; padding: 0 12px 2px; gap: 0; background: var(--v-lime); color: var(--v-on-lime); box-shadow: inset 0 -3px 0 var(--v-lime-band); animation: none; }
body.ui-v2 .ms-row.ready .ms-claim:hover { background: var(--v-lime-hi); filter: none; }
body.ui-v2 .ms-claim span { margin-top: 2px; font: 700 11px Lexend, sans-serif; letter-spacing: .06em; }
body.ui-v2 .ms-row.ready .ms-ring::before, body.ui-v2 .ms-row.done .ms-ring::before { background: var(--v-lime); }
body.ui-v2 .ms-row.done { opacity: 1; }
body.ui-v2 .ms-row.done .ms-ring { background: none; }
body.ui-v2 .ms-row.done .ms-t em { color: var(--v-lime); }
body.ui-v2 .ms-row.done .ms-claim { background: none; box-shadow: none; }
body.ui-v2 .ms-row.done .ms-claim img { width: 20px; }
/* coffre quotidien : les montants en icônes, « Ouvrir » en lime */
body.ui-v2 #p-home .gift { flex: none; height: 96px; gap: 14px; padding: 0 18px 0 14px; }
body.ui-v2 .gift-ic { width: 64px; height: 76px; object-fit: contain; }
body.ui-v2 .g-text b { font: 700 16px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .g-text > span { margin-top: 4px; font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .v-amts { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
body.ui-v2 .v-amt { display: inline-flex; align-items: center; gap: 5px; }
body.ui-v2 .v-amt img { width: 22px; height: 22px; }
body.ui-v2 .v-amt b { font: 700 15px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .v-amt.gold b { color: var(--v-gold-tx); }
body.ui-v2 #menu .gift .btn-green { height: 40px; min-height: 40px; padding: 0 18px 2px; font-size: 14px; }
/* dernières parties : 4 tuiles (place, portrait, mode) */
body.ui-v2 #p-home .recent { flex: 1 1 150px; min-height: 150px; display: flex; flex-direction: column; }
body.ui-v2 #p-home .recent .card-head { margin-bottom: 10px; }
body.ui-v2 .v-last { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }   /* 8 dernières en 2 rangées de tuiles presque carrées (bug n° 1 de Scott, 2026-10-24 : une rangée étirée sur toute la hauteur) */
body.ui-v2 .v-lg { min-width: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
body.ui-v2 .v-pl { display: flex; align-items: center; gap: 6px; }
body.ui-v2 .v-pl b { height: 34px; min-width: 40px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font: 400 18px Rowdies, sans-serif; color: var(--v-on-lime); background: var(--v-ink3); }
body.ui-v2 .v-pl b.p1 { background: var(--v-gold); }
body.ui-v2 .v-pl b.p4 { background: var(--vm-silver); }
body.ui-v2 .v-pl b.p8 { color: var(--v-tx); }
body.ui-v2 .v-pl img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--v-ink3); }
body.ui-v2 .v-lg small { max-width: 100%; padding: 0 4px; font: 600 13px Lexend, sans-serif; color: var(--v-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v2 #p-home .recent .empty-note { margin: auto 0; }
/* mode Dofus : une ligne de verre (plus de plaque dorée) */
body.ui-v2 #p-home .mode-switch { flex: none; height: 64px; margin: 0; gap: 12px; padding: 0 12px 0 10px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-card); box-shadow: none;
  -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); color: var(--v-tx); transition: background .12s; }
body.ui-v2 #p-home .mode-switch:hover { transform: none; filter: none; background: rgba(40, 30, 76, .7); }
body.ui-v2 #p-home .mode-switch .ms-logo { width: 46px; height: 46px; filter: none; }
body.ui-v2 #p-home .mode-switch .ms-t span { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx2); opacity: 1; }
body.ui-v2 #p-home .mode-switch .ms-t b { font: 400 18px/1.1 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 #p-home .mode-switch .ms-go { width: 36px; height: 36px; border-radius: 10px; background: none; color: var(--v-tx3); font: 400 30px/1 Lexend, sans-serif; }
/* centre : le perso, sa plaque, la sélection rapide */
body.ui-v2 #p-home .home-stage { justify-content: flex-end; }
body.ui-v2 #p-home .home-stage canvas { width: auto; height: auto; flex: 1 1 0; min-height: 0; max-width: 100%; aspect-ratio: 640 / 580; }
body.ui-v2 #p-home .home-stage .stage-plate { margin-top: -18px; gap: 4px; }
body.ui-v2 .stage-plate h2 { font: 400 44px/1 Rowdies, sans-serif; text-shadow: none; color: var(--v-tx); }
body.ui-v2 #menu .skin-tag { display: inline-flex; align-items: center; height: 28px; margin-top: 4px; padding: 0 10px; border: 0; border-radius: var(--v-chip-r); font: 600 14px Lexend, sans-serif;
  background: color-mix(in srgb, var(--rc) 18%, transparent); color: color-mix(in srgb, var(--rc) 30%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent); }
body.ui-v2 #menu .qs { width: 100%; height: 136px; margin-top: 18px; padding: 14px 22px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
body.ui-v2 .qs-head { margin: 0; gap: 12px; }
body.ui-v2 .qs-head b { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 .qs-head .hint { flex: 1; font: 500 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .qs-row { gap: 12px; align-items: flex-start; }
body.ui-v2 .qs-scroll { --qs-img: 60px; }
body.ui-v2 .qs-list, body.ui-v2 .qs-tools { gap: 12px; }
body.ui-v2 .qs-arr { background: var(--v-ink2); color: var(--v-tx); box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 .qs-arr:hover { background: var(--v-ink3); }
body.ui-v2.mobile .qs-scroll { --qs-img: 48px; }
body.ui-v2.mobile .qs-list, body.ui-v2.mobile .qs-tools { gap: 8px; }
body.ui-v2.mobile .qs-arr { width: 24px; height: 24px; }
body.ui-v2.mobile .qs-list .qs-t span { max-width: 52px; }   /* le nom ne déborde pas sur le voisin (tuiles de 48 px) */
body.ui-v2 .qs-t { width: 60px; gap: 5px; }
body.ui-v2 .qs-t > img { width: 60px; height: 60px; border: 0; border-radius: var(--v-btn-r); background: var(--v-ink3); transition: background .12s; }
body.ui-v2 .qs-t:hover > img { transform: none; border: 0; background: var(--v-ink3); }
body.ui-v2 .qs-t span { max-width: 74px; font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .qs-t.on > img { outline: 2px solid var(--v-lime); outline-offset: -2px; background: var(--v-ink3); }
body.ui-v2 .qs-t.on span { color: var(--v-tx); }
body.ui-v2 .qs-n { left: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border: 0; border-radius: 6px; background: var(--v-ink2); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx2); font: 700 11px/18px Lexend, sans-serif; }
body.ui-v2 .qs-t.on .qs-n { background: var(--v-lime); box-shadow: none; color: var(--v-on-lime); }
body.ui-v2 .qs-t.new > img { padding: 19px; background: transparent; border: 1.5px dashed var(--v-edge-hi); opacity: .8; }
body.ui-v2 .qs-t.new span { color: var(--v-tx2); }
body.ui-v2 .qs-t.tool > img { padding: 18px; border: 0; background: var(--v-sec); box-shadow: var(--v-sec-bd); }
body.ui-v2 .qs-t.tool:hover > img { background: var(--v-sec-hi); border: 0; }
body.ui-v2 .qs-t.tool span { color: var(--v-tx2); }
/* droite : rang classé */
body.ui-v2 #p-home .rank-card { flex: none; height: 222px; gap: 16px; padding: 16px 18px; background-image: none; }
body.ui-v2 #p-home .rank-emblem { width: 132px; }
body.ui-v2 #menu .rank-info .kicker { color: var(--v-gold-tx); }
body.ui-v2 .rank-info h2, body.ui-v2 .my-rank h2 { margin: 2px 0 0; font: 400 36px/1.1 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .v-lp { display: flex; justify-content: space-between; margin: 8px 0 6px; font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .v-lp b { font-size: 15px; color: var(--v-tx); }
body.ui-v2 #menu .lpbar i { background: var(--v-gold); }
body.ui-v2 #p-home .rank-info .lpbar { margin-bottom: 14px; }
body.ui-v2 #p-home .pos { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--v-edge); font: 700 13px Lexend, sans-serif; color: var(--v-gold-tx); }
body.ui-v2 #menu .pos img { width: 14px; }
/* droite : la feuille de jeu ; JOUER calé en bas (ne bouge jamais) */
body.ui-v2 .v-play { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 16px 18px; }
body.ui-v2 .v-mi { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--v-well); }
body.ui-v2 .v-mi img { width: 22px; height: 22px; object-fit: contain; opacity: .8; }
body.ui-v2 .v-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.ui-v2 .v-mt b { font: 700 15px Lexend, sans-serif; color: var(--v-tx2); white-space: nowrap; }
body.ui-v2 .v-mt small { font: 500 13px Lexend, sans-serif; color: var(--v-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v2 .v-how { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px 0 8px; border: 0; border-radius: var(--v-btn-r); background: var(--v-row); box-shadow: var(--v-row-bd); color: var(--v-tx); text-align: left; cursor: pointer; transition: background .12s; }
body.ui-v2 .v-how { flex: none; margin-top: 14px; padding-right: 12px; background: var(--v-sec); box-shadow: var(--v-sec-bd); }
body.ui-v2 .v-how:hover { background: var(--v-sec-hi); }
body.ui-v2 .v-how .v-mi { background: color-mix(in srgb, var(--vm-eau) 26%, transparent); }
body.ui-v2 .v-how .v-mi img { opacity: 1; }
body.ui-v2 .v-how .v-mt b { color: var(--v-tx); }
body.ui-v2 .v-how.new { box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .v-how.new .v-mi { background: var(--v-lime); }
body.ui-v2 .v-how.new .v-mi img { filter: brightness(0) saturate(100%) invert(7%) sepia(30%) saturate(2000%) hue-rotate(235deg); }
body.ui-v2 .v-chev { flex: none; width: 20px; height: 20px; background: var(--v-tx3); -webkit-mask: url(dofus/assets/ui/ic/chevronRight.png) center / 14px no-repeat; mask: url(dofus/assets/ui/ic/chevronRight.png) center / 14px no-repeat; }
body.ui-v2 .v-tuto { --c: var(--v-lime); align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; height: 28px; padding: 0 10px; border-radius: var(--v-chip-r);
  background: color-mix(in srgb, var(--v-lime) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-lime) 45%, transparent); font: 600 13px Lexend, sans-serif; color: #e8f59a; white-space: nowrap; }
body.ui-v2 #menu .v-jouer { width: 100%; height: 112px; margin-top: auto; padding: 0 0 4px; border-radius: var(--v-btn-r); font: 400 48px/1 Rowdies, sans-serif; letter-spacing: .14em; box-shadow: inset 0 -5px 0 var(--v-lime-band); }
body.ui-v2 #menu .v-jouer:active:not(:disabled) { box-shadow: inset 0 -2px 0 var(--v-lime-band); }
body.ui-v2 .v-play .ol-row { gap: 10px; margin-top: 12px; }
body.ui-v2 #menu .v-play .ol-row button { height: 48px; font-size: 15px; }
body.ui-v2 #menu .v-play .ol-row button img { width: 20px; height: 20px; }

/* ================================================================ accueil · téléphone (maquette &mobile=1 ; scène 995 × 460) */
body.ui-v2.mobile #mh { height: 50px; padding: 0 8px; gap: 2px; }
body.ui-v2.mobile .mh-brand { margin-right: 6px; }
body.ui-v2.mobile .mh-brand img { width: 40px; height: 38px; }
body.ui-v2.mobile #mnav button { padding: 0 8px; font-size: 13px; letter-spacing: .03em; }
body.ui-v2.mobile #mnav button.on::after { left: 8px; right: 8px; }
body.ui-v2.mobile #mnav button.dot::before { top: 12px; right: 1px; width: 6px; height: 6px; }
body.ui-v2.mobile .mh-right { gap: 5px; }
body.ui-v2.mobile #menu .cur { height: 36px; gap: 5px; padding: 0 4px 0 5px; }
body.ui-v2.mobile #menu .cur img { width: 22px; height: 22px; }
body.ui-v2.mobile #menu .cur b { font-size: 14px; }
body.ui-v2.mobile #mh-profile { height: 40px; padding: 0 3px; }
body.ui-v2.mobile #mh-avatar { width: 34px; height: 34px; border-radius: 8px; }
body.ui-v2.mobile #p-home { padding: 8px 10px; gap: 10px; }
body.ui-v2.mobile #p-home .home-l, body.ui-v2.mobile #p-home .home-r { width: 288px !important; gap: 8px; }
body.ui-v2.mobile #p-home .home-l { padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
body.ui-v2.mobile #p-home .v-god { top: 190px; width: 1000px; height: 1000px; }
body.ui-v2.mobile #menu .card { padding: 9px 11px; }
body.ui-v2.mobile #menu .kicker, body.ui-v2.mobile #menu .card-head h3, body.ui-v2.mobile #menu h3, body.ui-v2.mobile .v-lbl, body.ui-v2.mobile .qs-head b { font-size: 13px; letter-spacing: .08em; }
body.ui-v2.mobile #menu .card-head { margin-bottom: 6px; }
body.ui-v2.mobile #p-home .season { display: flex; height: 58px; padding: 0 11px; }
body.ui-v2.mobile #p-home .season .v-art { width: 160px; }
body.ui-v2.mobile #p-home .season h2 { margin: 0; font-size: 19px; }
body.ui-v2.mobile #p-home .season-end { display: none; }
body.ui-v2.mobile #p-home .missions { flex: none; }
body.ui-v2.mobile .ms-list { gap: 5px; }
body.ui-v2.mobile .ms-row { height: 50px; gap: 8px; padding: 0 6px; grid-template-columns: 34px minmax(0, 1fr) auto; border-radius: 9px; }
body.ui-v2.mobile .ms-ring { width: 34px; height: 34px; }
body.ui-v2.mobile .ms-ring::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
body.ui-v2.mobile .ms-ring img { width: 15px; }
body.ui-v2.mobile .ms-t b { font-size: 13px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v2.mobile .ms-t em { font-size: 13px; }
body.ui-v2.mobile .ms-bar { height: 4px; margin-top: 2px; }
body.ui-v2.mobile .ms-row:not(.done) .ms-ring::after { width: 8px; height: 8px; }
body.ui-v2.mobile .ms-claim { height: 30px; padding: 0 7px 0 3px; gap: 3px; font-size: 13px; }
body.ui-v2.mobile .ms-claim img { width: 17px; }
body.ui-v2.mobile .ms-row.ready .ms-claim { height: 38px; padding: 0 8px 2px; }
body.ui-v2.mobile #p-home .gift { height: 92px; gap: 8px; padding: 0 10px 0 6px; }
body.ui-v2.mobile .gift-ic { width: 50px; height: 62px; }
body.ui-v2.mobile .g-text b { font-size: 14px; }
body.ui-v2.mobile .v-amts { gap: 8px; margin-top: 3px; }
body.ui-v2.mobile .v-amt img { width: 17px; height: 17px; }
body.ui-v2.mobile .v-amt b { font-size: 14px; }
body.ui-v2.mobile #menu .gift .btn-green { height: 40px; padding: 0 12px 2px; font-size: 14px; }
body.ui-v2.mobile #p-home .recent { display: flex; height: 120px; }
body.ui-v2.mobile .v-last { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 5px; }
body.ui-v2.mobile .v-lg:nth-child(n+4) { display: none; }
body.ui-v2.mobile .v-pl b { height: 28px; min-width: 34px; font-size: 15px; }
body.ui-v2.mobile .v-pl img { width: 26px; height: 26px; }
body.ui-v2.mobile .v-lg small { font-size: 12px; }
body.ui-v2.mobile #p-home .mode-switch { height: 54px; }
body.ui-v2.mobile #p-home .mode-switch .ms-logo { width: 36px; height: 36px; }
body.ui-v2.mobile #p-home .mode-switch .ms-t span { font-size: 12px; }
body.ui-v2.mobile #p-home .mode-switch .ms-t b { font-size: 16px; }
body.ui-v2.mobile #p-home .home-stage .stage-plate { margin-top: -8px; gap: 2px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; }
body.ui-v2.mobile #p-home .stage-plate .kicker { display: none; }
body.ui-v2.mobile .stage-plate h2 { font-size: 26px; }
body.ui-v2.mobile #menu .skin-tag { height: 24px; margin: 0; font-size: 13px; }
body.ui-v2.mobile #menu .qs { height: 108px; margin-top: 8px; padding: 8px 10px; gap: 6px; }
body.ui-v2.mobile .qs-head .hint { display: none; }
body.ui-v2.mobile .qs-row { gap: 8px; }
body.ui-v2.mobile .qs-t { width: 48px; gap: 3px; }
body.ui-v2.mobile .qs-t > img { width: 48px; height: 48px; }
body.ui-v2.mobile .qs-t.new > img { padding: 15px; }
body.ui-v2.mobile .qs-t.tool > img { padding: 14px; }
body.ui-v2.mobile .qs-t span { font-size: 12px; max-width: 64px; }
body.ui-v2.mobile .qs-t.tool { width: 58px; }
body.ui-v2.mobile .qs-t.tool span { max-width: none; overflow: visible; }
body.ui-v2.mobile .qs-t.tool { background: none; box-shadow: none; }
body.ui-v2.mobile #qs-class { right: auto; }
body.ui-v2.mobile #p-home .rank-card { display: flex; height: 64px; gap: 8px; padding: 0 10px 0 4px; }
body.ui-v2.mobile #p-home .rank-emblem { width: 54px; }
body.ui-v2.mobile #p-home .rank-info { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; }
body.ui-v2.mobile #p-home .rank-info .kicker { grid-column: 1 / -1; }
body.ui-v2.mobile #p-home .rank-info h2 { font-size: 21px; }
body.ui-v2.mobile #p-home .rank-info .v-lp { margin: 0; font-size: 13px; }
body.ui-v2.mobile #p-home .rank-info .v-lp > span:first-child, body.ui-v2.mobile #p-home .rank-info .lpbar, body.ui-v2.mobile #p-home .rank-info .pos { display: none; }
body.ui-v2.mobile .v-play { padding: 9px 10px; }
body.ui-v2.mobile .v-play > .v-lbl { display: none; }
/* téléphone : les modes en contrôle segmenté (le nom seul) */
body.ui-v2.mobile .v-how { height: 48px; margin-top: 7px; gap: 8px; padding: 0 8px 0 5px; }
body.ui-v2.mobile .v-how .v-mi { width: 36px; height: 36px; }
body.ui-v2.mobile .v-how .v-mi img { width: 18px; height: 18px; }
body.ui-v2.mobile .v-mt b { font-size: 14px; }
body.ui-v2.mobile .v-mt small { font-size: 12px; }
body.ui-v2.mobile .v-tuto { height: auto; min-height: 24px; margin-top: 5px; padding: 3px 8px; font-size: 12px; white-space: normal; line-height: 1.15; }
body.ui-v2.mobile #menu .v-jouer { height: 104px; font-size: 40px; }
body.ui-v2.mobile .v-play .ol-row { gap: 6px; margin-top: 7px; }
body.ui-v2.mobile #menu .v-play .ol-row button { height: 44px; padding: 0 6px; font-size: 13px; gap: 5px; }
body.ui-v2.mobile #menu .v-play .ol-row button img { display: none; }
body.ui-v2.mobile #menu .v-play .ol-row button { white-space: nowrap; }
body.ui-v2 .v-lg small.up { color: var(--v-green); }
body.ui-v2 .v-lg small.down { color: var(--v-red); }

/* ================================================================ pages Héros, Terrains, Encyclopédie (herosheet.css, encyclo.css) :
   même fond que l'accueil (plus de fond bleu-vert à hexagones), blocs en verre, hexagones gardés mais aux couleurs du système */
body.ui-v2 #menu .hs { background: none; }
body.ui-v2 #menu .hs h3 { margin-bottom: 12px; color: var(--v-tx2); }
body.ui-v2 #menu .hs .hs-n { font: 600 13px Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: var(--v-tx3); }
body.ui-v2 .hs-sec { padding: 14px 16px; 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); }
/* hexagones : arête de la rareté (--rc) ; défaut violet ; choisi = lime */
body.ui-v2 .hs .hx { background: var(--rc, #5d4c9e); }
body.ui-v2 .hs .hx img { background: var(--v-ink3); }
body.ui-v2 .hs-hex.sel .hx { background: var(--v-lime); }
body.ui-v2 .hs-hex.sel .hx img { background: #3a2f63; }
body.ui-v2 .hs-hex .lk { background: var(--v-ink1); border: 1.5px solid var(--rc); }
body.ui-v2 .hs .hs-act { background: var(--v-lime); border: 2px solid var(--v-ink1); }
body.ui-v2 .hs-pre::before { background: #5d4c9e; }
body.ui-v2 .hs-pre.sel::before { background: var(--v-lime); }
body.ui-v2 .hs-pre > img:first-child { background: var(--v-ink3); }
body.ui-v2 .hs-pre.new::before, body.ui-v2 .hs-pre.buy::before { background: rgba(176, 156, 244, .3); }
body.ui-v2 .hs-pre .hs-num { background: var(--v-ink1); color: var(--v-tx2); }
body.ui-v2 .hs-cls .hs-hex b { font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .hs-cls .hs-hex.sel b { color: var(--v-tx); }
body.ui-v2 #menu .cls-new { padding: 0 6px; height: 18px; line-height: 18px; border-radius: 5px; background: var(--vm-r4); color: #fff; font: 700 11px/18px Lexend, sans-serif; letter-spacing: .04em; }
/* Mâle / Femelle, onglets : contrôle segmenté (puits + segment choisi au liseré lime) */
body.ui-v2 #menu .hs-gender { gap: 3px; padding: 3px; border: 0; border-radius: var(--v-btn-r); background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); }
body.ui-v2 #menu .hs-gender button { height: 36px; border: 0; border-radius: 9px; background: none; color: var(--v-tx3); font: 700 14px Lexend, sans-serif; }
body.ui-v2 #menu .hs-gender button + button { border-left: 0; }
body.ui-v2 #menu .hs-gender button:hover:not(:disabled) { color: var(--v-tx); }
body.ui-v2 #menu .hs-gender button.on { background: var(--v-row); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }
body.ui-v2 #menu .hs-gender button.on img { filter: none; }
body.ui-v2 .hs-gnote { color: var(--v-tx3); font-size: 13px; }
/* centre : nom, héros, bénédiction, gros bouton */
body.ui-v2 .hs-name .hs-editing { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx3); }
body.ui-v2 .hs-name h2 { font: 400 44px/1.05 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .hs-prevtag { height: 24px; line-height: 24px; padding: 0 9px; border-radius: var(--v-chip-r); background: color-mix(in srgb, var(--v-gold) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-gold) 50%, transparent); color: var(--v-gold-tx); font: 700 12px/24px Lexend, sans-serif; letter-spacing: .1em; }
body.ui-v2 .hs-bless { padding: 8px 16px 8px 10px; 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); }
body.ui-v2 .hs-bless .hx { --rc: #5d4c9e; }
body.ui-v2 .hs-bless .hx img { background: var(--v-ink3); }
body.ui-v2 .hs-bless b { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .hs-bless p { font: 500 13px/1.35 Lexend, sans-serif; color: var(--v-tx2); }
/* gros bouton : primaire lime à bande ; « Débloquer » = même bouton, prix après un séparateur ; « Équipé » = état fait */
body.ui-v2 .hs-cta { height: 60px; gap: 12px; padding: 0 22px 3px; border: 0; border-radius: var(--v-btn-r); background: var(--v-lime); color: var(--v-on-lime); box-shadow: inset 0 -3px 0 var(--v-lime-band);
  font: 700 18px Lexend, sans-serif; letter-spacing: 0; }
body.ui-v2 .hs-cta:hover { transform: none; background: var(--v-lime-hi); }
body.ui-v2 .hs-cta:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--v-lime-band); }
body.ui-v2 .hs-cta.buy { background: var(--v-lime); color: var(--v-on-lime); }
body.ui-v2 .hs-cta.buy:hover { background: var(--v-lime-hi); }
body.ui-v2 .hs-cta .hs-price { gap: 6px; padding: 0 0 0 14px; border-radius: 0; background: none; border-left: 1.5px solid rgba(23, 17, 42, .3); color: var(--v-on-lime); font: 700 18px Lexend, sans-serif; }
body.ui-v2 .hs-cta .hs-price img { width: 22px; height: 22px; }
body.ui-v2 .hs-cta .hs-price s { font-size: 13px; opacity: .55; }
body.ui-v2 .hs-cta.done, body.ui-v2 .hs-cta.done:hover { background: var(--v-sec); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-lime); }
/* droite : sort et évolutions (tuiles carrées, liseré de la voie), bulle du sort en ligne de verre */
body.ui-v2 .hs-spell { border-width: 1.5px; border-radius: 10px; background: var(--v-ink2); }
body.ui-v2 .hs-spell img { border-radius: 8px; }
body.ui-v2 .hs-spell:hover, body.ui-v2 .hs-spell.on { border-color: var(--v-tx); }
body.ui-v2 .hs-spell .hs-lv { font: 600 11px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .hs-tip { padding: 9px 12px; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .hs-tip b { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .hs-tip em { font: 600 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .hs-tip p { font: 500 13px/1.4 Lexend, sans-serif; color: var(--v-tx2); }
/* ---------------------------------------------------------------- Terrains (terrainpage.js, terrains.css) */
body.ui-v2 .tp-view { border: 2px solid var(--rc); border-radius: var(--v-r); background: var(--v-ink2); }
body.ui-v2 .tp-badge { height: 26px; line-height: 26px; padding: 0 10px; border-radius: var(--v-chip-r); background: rgba(18, 12, 38, .85); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx2); font: 700 12px/26px Lexend, sans-serif; letter-spacing: .1em; }
body.ui-v2 .tp-badge.on { background: var(--v-lime); box-shadow: none; color: var(--v-on-lime); }
body.ui-v2 .tp-badge.prev { background: color-mix(in srgb, var(--v-gold) 22%, #120c26); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-gold) 55%, transparent); color: var(--v-gold-tx); }
body.ui-v2 .tp-info { padding: 9px 16px; 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); }
body.ui-v2 #menu .tp-info .hint { font-size: 13px; color: var(--v-tx2); }
/* puces de filtre (îles, raretés, tri) : coins de 6 px, choisie = liseré lime */
body.ui-v2 #menu .tp-chips { gap: 6px; }
body.ui-v2 #menu .tp-chips button { height: 30px; padding: 0 10px; border: 0; border-radius: var(--v-chip-r); background: var(--v-row); box-shadow: var(--v-row-bd); color: var(--v-tx2); font: 600 13px Lexend, sans-serif; }
body.ui-v2 #menu .tp-chips button:hover { color: var(--v-tx); background: rgba(255, 255, 255, .08); }
body.ui-v2 #menu .tp-chips button.on { background: color-mix(in srgb, var(--v-lime) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }
body.ui-v2 #menu .tp-chips.rar button.on { background: color-mix(in srgb, var(--rc) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--rc); color: color-mix(in srgb, var(--rc) 30%, #fff); }
/* cartes de terrain : verre, liseré de la rareté, pastilles plates */
body.ui-v2 .ter-card { border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent); border-radius: var(--v-r); background: var(--v-row); color: var(--v-tx); }
body.ui-v2 .tp-grid .ter-card { background: rgba(22, 16, 44, .7); }
body.ui-v2 .ter-card:hover { transform: none; border-color: var(--rc); background: rgba(40, 30, 76, .75); }
body.ui-v2 .tp-grid .ter-card.tp-on, body.ui-v2 .ter-card.sel { border-color: var(--v-lime); box-shadow: inset 0 0 0 1px var(--v-lime); }
body.ui-v2 .ter-rar { padding: 0 7px; height: 20px; line-height: 20px; border-radius: 5px; font: 700 11px/20px Lexend, sans-serif; letter-spacing: .08em; }
body.ui-v2 .ter-sel { padding: 0 7px; height: 20px; line-height: 20px; border-radius: 5px; background: var(--v-lime); color: var(--v-on-lime); font: 700 11px/20px Lexend, sans-serif; }
body.ui-v2 .ter-info b { font: 700 14px/1.2 Lexend, sans-serif; }
body.ui-v2 .ter-info em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .ter-price { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .ter-card.owned .ter-price { color: var(--v-lime); }
body.ui-v2 .sh-kind { gap: 3px; padding: 3px; border-radius: var(--v-btn-r); background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); }
body.ui-v2 .sh-kind button { height: 36px; padding: 0 16px; border-radius: 9px; color: var(--v-tx3); font: 700 14px Lexend, sans-serif; }
body.ui-v2 .sh-kind button.on { background: var(--v-row); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }

/* ---------------------------------------------------------------- Encyclopédie (encyclo.js, encyclo.css) */
body.ui-v2 .ency-title h2 { font: 400 34px/1 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 #menu .ency-tabs button { height: 40px; font-size: 14px; }
body.ui-v2 #menu .ency-tabs button img { width: 18px; height: 18px; }
body.ui-v2 .ency-search { height: 40px; border: 0; border-radius: var(--v-row-r); background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); }
body.ui-v2 .ency-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 .ency-search input { font: 500 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .ency-search input::placeholder { color: var(--v-tx3); }
body.ui-v2 .ency-gh { color: var(--v-tx2); }
body.ui-v2 .ency-gh b { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; }
body.ui-v2 .ency-gh em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .ency-gh i { background: var(--v-well); color: var(--v-tx3); font-size: 12px; }
body.ui-v2 .ency-empty { color: var(--v-tx3); }
body.ui-v2 .ency-row { border: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); color: var(--v-tx); }
body.ui-v2 .ency-row:hover { background: rgba(255, 255, 255, .07); }
body.ui-v2 .ency-row.sel { background: color-mix(in srgb, var(--v-lime) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .ency-pt { border: 1.5px solid var(--rc); border-radius: 8px; background: var(--v-ink3); }
body.ui-v2 .ency-nm b { font: 700 14px Lexend, sans-serif; }
body.ui-v2 .ency-nm em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .ency-plate h2 { font: 400 40px/1 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .ency-big img { border: 2px solid var(--rc); border-radius: var(--v-r); background: var(--v-card); }
body.ui-v2 .ency-pick { padding: 6px 10px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-card); }
body.ui-v2 .ency-pick > span { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 .ency-pick button { height: 36px; border: 0; border-radius: var(--v-chip-r); background: var(--v-row); box-shadow: var(--v-row-bd); color: var(--v-gold-tx); }
body.ui-v2 .ency-pick button:hover { background: rgba(255, 255, 255, .08); }
body.ui-v2 .ency-pick button.on { background: var(--v-lime); box-shadow: none; color: var(--v-on-lime); }
body.ui-v2 .ency-card .ency-pick { border: 0; background: none; }
body.ui-v2 .ency-card { 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); font-size: 13px; color: var(--v-tx); }
body.ui-v2 .ency-card .tt-sec { border-bottom-color: rgba(126, 106, 200, .22); }
body.ui-v2 .ency-card .tt-label { font-size: 13px; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 .ency-card .tt-note, body.ui-v2 .ency-card .tt-stat small { color: var(--v-tx3); }
body.ui-v2 .ency-cs .tt-sec:last-child { border-bottom-color: rgba(126, 106, 200, .22); }
body.ui-v2 .ency-link { border: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .ency-link:hover { background: rgba(255, 255, 255, .08); }
body.ui-v2 .ency-link em { color: var(--v-tx2); }
body.ui-v2 .ency-link > i, body.ui-v2 .ency-link .ar, body.ui-v2 .ency-rec .ar { color: var(--v-tx3); }
body.ui-v2 img.ency-li { background: var(--v-ink3); }
body.ui-v2 .ency-sp { border-width: 1.5px; border-color: var(--v-edge); border-radius: var(--v-row-r); background: var(--v-row); }
body.ui-v2 .ency-sp.base { border-color: var(--v-lime); }
body.ui-v2 .ency-sp.A { border-color: #5ab4ff; } body.ui-v2 .ency-sp.B { border-color: #ff8fd8; }
body.ui-v2 .ency-sp:hover, body.ui-v2 .ency-sp.on { border-color: var(--v-tx); background: rgba(255, 255, 255, .08); }
body.ui-v2 .ency-sp em { font-size: 11px; color: var(--v-tx3); }
body.ui-v2 #menu .chip { border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- téléphone : pages Héros, Terrains, Encyclopédie */
body.ui-v2.mobile .hs-sec { padding: 7px 8px; }
body.ui-v2.mobile #menu .hs h3 { margin-bottom: 6px; font-size: 13px; letter-spacing: .08em; }
body.ui-v2.mobile #menu .hs .hs-n { font-size: 12px; }
body.ui-v2.mobile #menu .hs-gender button { height: 30px; font-size: 13px; }
body.ui-v2.mobile .hs-name h2 { font-size: 26px; }
body.ui-v2.mobile .hs-cls .hs-hex b { font-size: 12px; }
body.ui-v2.mobile .hs-bless { padding: 4px 10px 4px 5px; }
body.ui-v2.mobile .hs-bless b, body.ui-v2.mobile .hs-bless p { font-size: 12px; }
body.ui-v2.mobile .hs-cta { height: 44px; font-size: 15px; padding: 0 16px 3px; }
body.ui-v2.mobile .hs-cta .hs-price { font-size: 15px; padding-left: 10px; }
body.ui-v2.mobile .hs-cta .hs-price img { width: 18px; height: 18px; }
body.ui-v2.mobile .hs-tip b { font-size: 13px; }
body.ui-v2.mobile .hs-tip em, body.ui-v2.mobile .hs-tip p { font-size: 12px; }
body.ui-v2.mobile #menu .tp-chips button { height: 26px; padding: 0 8px; font-size: 12px; }
body.ui-v2.mobile .tp-view { border-width: 1.5px; }
body.ui-v2.mobile .ency-title h2 { font-size: 22px; }
body.ui-v2.mobile #menu .ency-tabs button { height: 32px; font-size: 13px; }
body.ui-v2.mobile .ency-plate h2 { font-size: 26px; }

/* ================================================================ Classement */
body.ui-v2 #p-ladder .my-rank { background-image: none; padding: 20px 18px; }
body.ui-v2 .my-rank .lp, body.ui-v2 .lad-tier .hint { font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .my-rank .lp b { font-size: 16px; color: var(--v-tx); }
body.ui-v2 #menu .ch-stats > div { padding: 10px 4px; border: 0; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 #menu .ch-stats b { font: 400 22px Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 #menu .ch-stats span { font: 600 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 #menu .tier { min-height: 40px; padding: 2px 10px; border-radius: var(--v-row-r); }
body.ui-v2 #menu .tier b { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 #menu .tier span { font: 500 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 #menu .tier.on { background: color-mix(in srgb, var(--v-gold) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-gold) 45%, transparent); }
body.ui-v2 button.tier:hover { background: var(--v-row); }
body.ui-v2 button.tier.sel, body.ui-v2 button.tier.on.sel { background: color-mix(in srgb, var(--v-lime) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .lp-rules { font: 500 13px/1.4 Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .lad-tier { padding: 8px 18px 8px 8px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-row); }
body.ui-v2 #menu .lad-tier .lt-name .kicker { color: var(--v-gold-tx); }
body.ui-v2 .lad-tier .lt-name h2 { font: 400 34px/1.05 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .lad-tier .lt-count b { font: 400 28px/1 Rowdies, sans-serif; }
body.ui-v2 .lad-tier .lt-count span { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .lad-row { border-radius: var(--v-row-r); font-size: 14px; }
body.ui-v2 .lad-row.head { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx3); }
body.ui-v2 .lad-body .lad-row:nth-child(odd) { background: var(--v-row); }
body.ui-v2 .lad-row .n { font: 400 17px Rowdies, sans-serif; color: var(--v-tx3); }
body.ui-v2 .lad-row.top1 .n { color: var(--v-gold-tx); } body.ui-v2 .lad-row.top2 .n { color: var(--vm-silver); } body.ui-v2 .lad-row.top3 .n { color: #e09a5c; }
body.ui-v2 .lad-row .who img { border: 0; border-radius: 8px; background: var(--v-ink3); }
body.ui-v2 .lad-row .who em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .lad-row .rk { font-size: 13px; color: var(--v-tx2); }
body.ui-v2 .lad-row.me { background: color-mix(in srgb, var(--v-lime) 9%, transparent) !important; box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .lad-rep { border-radius: 6px; }

/* ================================================================ Profil */
body.ui-v2 .id-avatar { border: 0; border-radius: var(--v-r); background: var(--v-ink3); }
body.ui-v2 .id-av-btn .id-av-edit { background: var(--v-lime); border: 0; box-shadow: inset 0 -2px 0 var(--v-lime-band); }
body.ui-v2 .id-av-btn .id-av-edit img { filter: brightness(0) saturate(100%) invert(7%) sepia(30%) saturate(2000%) hue-rotate(235deg); }
/* champs de saisie : puits sombre, arête violette, lime au focus */
body.ui-v2 .id-name input, body.ui-v2 .wl-input input, body.ui-v2 .ol-join input, body.ui-v2 #m-modal input[type="text"] { height: 44px; padding: 0 14px; border: 0; border-radius: var(--v-row-r); background: var(--v-well);
  box-shadow: inset 0 0 0 1.5px var(--v-edge); color: var(--v-tx); font: 600 15px Lexend, sans-serif; }
body.ui-v2 .id-name input:focus, body.ui-v2 .wl-input input:focus, body.ui-v2 .ol-join input:focus, body.ui-v2 #m-modal input[type="text"]:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .id-lv { font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .id-lv b { font: 400 20px Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 #menu .card.stat { padding: 14px 6px 12px; gap: 2px; }
body.ui-v2 #menu .card.stat b { font: 400 28px Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 #menu .card.stat span { font: 600 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .h-row { border-top: 1px solid rgba(126, 106, 200, .22); }
body.ui-v2 #menu .pl b, body.ui-v2 #m-modal .pl b { border: 0; color: var(--v-on-lime); font-weight: 700; }
body.ui-v2 #menu .pl.p1 { --pc: var(--v-gold); } body.ui-v2 #menu .pl.p4 { --pc: var(--vm-silver); } body.ui-v2 #menu .pl.p8 { --pc: var(--v-ink3); }
body.ui-v2 #menu .pl.p8 b { color: var(--v-tx); }
body.ui-v2 #menu .pl img { border-color: var(--pc); background: var(--v-ink3); }
body.ui-v2 .h-row > img { border-radius: 8px; background: var(--v-ink3); }
body.ui-v2 .h-cls b { font: 700 14px Lexend, sans-serif; }
body.ui-v2 .h-cls em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .h-lp { font: 700 14px Lexend, sans-serif; }
body.ui-v2 .h-lp.up { color: var(--v-green); } body.ui-v2 .h-lp.down { color: var(--v-red); }
body.ui-v2 .h-k { font: 700 14px Lexend, sans-serif; color: var(--v-gold-tx); }
body.ui-v2 .h-date { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .acc-prov { border-radius: var(--v-chip-r); }
body.ui-v2 .acc-legal { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .acc-legal a, body.ui-v2 .lg-note a { color: var(--v-tx); }
body.ui-v2 .acc-ban { border-radius: var(--v-row-r); background: color-mix(in srgb, var(--v-red) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-red) 45%, transparent); color: #ffb3c1; }

/* ================================================================ Boutique (?page=shop) : cartes de verre teintées de la rareté, plus de ruban */
body.ui-v2 .sh-title h2 { font: 400 34px/1 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .sh-chip, body.ui-v2 .sh-wallet > span { height: 40px; padding: 0 14px; border: 0; border-radius: var(--v-btn-r); background: var(--v-sec); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx2); font: 600 14px Lexend, sans-serif; }
body.ui-v2 .sh-wallet > span { color: var(--v-tx); font-weight: 700; font-size: 16px; }
body.ui-v2 .sh-get { height: 40px; border: 0; 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 14px Lexend, sans-serif; }
body.ui-v2 .skin-card { border: 1.5px solid color-mix(in srgb, var(--rc-bg) 70%, transparent); border-radius: var(--v-r);
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--rc-bg) 34%, transparent) 0 33%, transparent 33.6%), color-mix(in srgb, var(--rc-bg) 18%, rgba(22, 16, 44, .8)); transition: background .12s, border-color .12s; }
body.ui-v2 .skin-card.grid { background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc-bg) 34%, transparent) 0 36%, transparent 36.6%), color-mix(in srgb, var(--rc-bg) 18%, rgba(22, 16, 44, .8)); }
body.ui-v2 .skin-card:hover { transform: none; border-color: var(--rc-hi); }
body.ui-v2 .sc-rar { height: 22px; line-height: 22px; padding: 0 8px; border: 0; border-radius: var(--v-chip-r); background: var(--rc-bg); color: #fff; font: 700 11px/22px Lexend, sans-serif; letter-spacing: .1em; }
body.ui-v2 .sc-info { background: rgba(18, 12, 38, .78); border-top: 1px solid color-mix(in srgb, var(--rc-bg) 45%, transparent); }
body.ui-v2 .sc-name b { color: var(--v-tx); }
body.ui-v2 .sc-cls { color: var(--v-tx2); font-size: 13px; }
body.ui-v2 .sc-price { height: 36px; padding: 0 12px; border: 0; border-radius: var(--v-row-r); background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx); font: 700 16px Lexend, sans-serif; }
body.ui-v2 .skin-card.grid .sc-price { height: 30px; font-size: 14px; }
body.ui-v2 .sc-price s { color: var(--v-tx3); }
body.ui-v2 .skin-card.owned .sc-price { background: none; box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-lime); }
body.ui-v2 .skin-card.owned .sc-price img { filter: none; }
body.ui-v2 .promo { left: 10px; top: 10px; width: auto; height: 24px; padding: 0 8px; line-height: 24px; transform: none; border: 0; border-radius: var(--v-chip-r); background: var(--v-red); font: 700 13px/24px Lexend, sans-serif; }
body.ui-v2 .rar-chips button, body.ui-v2 #p-shop .filters button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--v-chip-r); background: var(--v-row); box-shadow: var(--v-row-bd); color: var(--v-tx2); font: 600 13px Lexend, sans-serif; }
body.ui-v2 .rar-chips button.on, body.ui-v2 .rar-chips .rc-all.on, body.ui-v2 .rar-chips .rc-owned.on, body.ui-v2 #p-shop .filters button.on { background: color-mix(in srgb, var(--v-lime) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }

/* ================================================================ fenêtres du menu (#m-modal) : voile flouté, feuille de verre */
body.ui-v2 #m-modal { background: rgba(10, 6, 24, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); --sk: 0deg; --usk: 0deg; }
body.ui-v2 .m-box { padding: 26px 28px 24px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: rgba(26, 19, 54, .84); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); color: var(--v-tx); }
body.ui-v2 #m-modal h2 { font: 400 32px/1.15 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 #m-modal p { font: 500 14px/1.45 Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 #m-modal p b { color: var(--v-tx); }
body.ui-v2 .welcome { gap: 14px; }
body.ui-v2 .welcome > img { width: 96px; }
body.ui-v2 .wl-how { color: var(--v-tx); font: 700 14px/1 Lexend, sans-serif; text-decoration: none; padding: 8px 12px; border-radius: var(--v-btn-r); }
body.ui-v2 .wl-how:hover { color: var(--v-tx); background: var(--v-sec); }
body.ui-v2 .wl-err { color: #ffb3c1; }
body.ui-v2 .wl-or { color: var(--v-tx3); }
body.ui-v2 #m-modal .rs-btns { gap: 10px; }
body.ui-v2 .ts-end .ts-endp { color: var(--v-tx2); }
/* accueil, page 2 : trois cartes de verre (case d'icône colorée, titre, texte), plus de plaques biseautées */
body.ui-v2 .wh-card { border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: var(--v-row); }
body.ui-v2 .wh-plate { height: 56px; gap: 12px; padding: 0 12px; align-items: center; background: none; }
body.ui-v2 .wh-cell { width: 36px; height: 36px; border-radius: 10px; clip-path: none; background: var(--c); }
body.ui-v2 .wh-cell .gd-ico { width: 20px; height: 20px; margin: 0; background: var(--v-on-lime); }
body.ui-v2 .wh-plate b { padding: 0; font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx); }
body.ui-v2 .wh-bar { display: none; }
body.ui-v2 .wh-card p { padding: 0 14px 14px !important; font: 500 14px/1.4 Lexend, sans-serif !important; color: var(--v-tx2) !important; }
/* recherche, salle d'attente : têtes en tuiles de verre */
body.ui-v2 .mm-head { border: 0; border-radius: var(--v-r); background: var(--v-ink3); box-shadow: inset 0 0 0 1.5px var(--v-edge); }
body.ui-v2 .mm-slot.found .mm-head, body.ui-v2 .mm-slot.me .mm-head { box-shadow: inset 0 0 0 2px var(--v-lime); outline: 2px solid var(--v-lime); outline-offset: -2px; }
body.ui-v2 .mm-slot b { font: 700 13px Lexend, sans-serif; }
body.ui-v2 .mm-slot span { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .mm-count { font: 400 22px Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .ol-code, body.ui-v2 .ol-invl { border: 0; border-radius: var(--v-row-r); background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); }
body.ui-v2 .ol-invk { font-size: 13px; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 .ol-link { color: var(--v-tx); }
body.ui-v2 .ol-join p { color: var(--v-tx2); }
body.ui-v2 #mq-bar { border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: rgba(26, 19, 54, .86); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
body.ui-v2 #mq-bar .mq-t em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 #mq-bar .mq-time { color: var(--v-tx); }
body.ui-v2 .lg-btn { border-radius: var(--v-btn-r); }
body.ui-v2 .lg-btn.dev { background: var(--v-sec); box-shadow: var(--v-sec-bd); }
body.ui-v2 .rp-reasons label { border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
/* changer de classe, portrait : tuiles de verre, choisie au liseré lime */
body.ui-v2 .cpick-t { border: 0; border-radius: var(--v-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .cpick-t:hover { transform: none; background: rgba(255, 255, 255, .08); }
body.ui-v2 .cpick-t.on { background: color-mix(in srgb, var(--v-lime) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .cpick-t b { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .cpick-t em { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .cpick p { color: var(--v-tx2); }
body.ui-v2 .av { border: 0; border-radius: 10px; background: var(--v-ink3); }
body.ui-v2 .av:hover { box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 .av.on { box-shadow: 0 0 0 2px var(--v-lime); }
body.ui-v2 .av-h { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 .av-h small { color: var(--v-tx3); }
/* boutique de gemmes */
body.ui-v2 .og-shop p { color: var(--v-tx2); }
body.ui-v2 .og-wallet b { color: var(--v-tx); }
body.ui-v2 .og-pack { border: 0; border-radius: var(--v-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .og-pack.kamas { background: color-mix(in srgb, var(--v-gold) 8%, var(--v-row)); }
body.ui-v2 .og-pack:hover, body.ui-v2 .og-pack.kamas:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); background: rgba(255, 255, 255, .08); }
body.ui-v2 .og-pack b { font: 400 26px Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .og-pack span { font-size: 13px; color: var(--v-tx3); }
body.ui-v2 .og-pack em { padding: 0 10px; height: 24px; line-height: 24px; border-radius: var(--v-chip-r); background: color-mix(in srgb, var(--v-lime) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-lime) 50%, transparent); color: #e8f59a; font: 700 13px/24px Lexend, sans-serif; }
body.ui-v2 .og-bonus { border-radius: 5px; background: var(--vm-r4); font-size: 12px; }
/* achat d'un skin (maquette : illustration à gauche sur sa couleur, étiquette pleine, Rowdies, prix dans le bouton) */
body.ui-v2 .m-box:has(> .buy) { padding: 0; overflow: hidden; }
body.ui-v2 #m-modal .buy { width: 700px; gap: 0; align-items: stretch; }
body.ui-v2 #m-modal .buy canvas { flex: none; width: 270px; height: auto; aspect-ratio: 320 / 405; border-radius: 0;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc) 36%, transparent) 0 37%, transparent 37.5%), color-mix(in srgb, var(--rc) 22%, transparent); }
body.ui-v2 .buy-info { position: relative; padding: 26px 28px 24px; gap: 0; }
body.ui-v2 .buy-info > .kicker { align-self: flex-start; height: 26px; line-height: 26px; padding: 0 10px; border-radius: var(--v-chip-r); background: var(--rc); color: #fff !important; font: 700 13px/26px Lexend, sans-serif; letter-spacing: .1em; }
body.ui-v2 .buy-info h2 { margin-top: 12px; font-size: 40px !important; }
body.ui-v2 .buy-desc { gap: 6px; margin-top: 14px; }
body.ui-v2 .buy-desc p:first-child { color: var(--v-tx) !important; }
body.ui-v2 .buy-price { margin-top: 14px; gap: 6px; font: 700 22px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .buy-price img { width: 26px; }
body.ui-v2 .buy-price s { font-size: 15px; color: var(--v-tx3); }
body.ui-v2 .buy-acts { gap: 10px; margin-top: auto; padding-top: 18px; }
body.ui-v2 .buy-cta { height: 48px; border: 0; border-radius: var(--v-btn-r); background: var(--v-lime); color: var(--v-on-lime); box-shadow: inset 0 -3px 0 var(--v-lime-band); padding: 0 20px 2px; font: 700 15px Lexend, sans-serif; }
body.ui-v2 .buy-cta:hover:not(:disabled) { filter: none; background: var(--v-lime-hi); }
body.ui-v2 .buy-cta:disabled { background: rgba(255, 255, 255, .07); color: var(--v-tx3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 14px; }
body.ui-v2 .buy-cta .v-sep { width: 1.5px; height: 18px; background: currentColor; opacity: .3; }
body.ui-v2 .buy-cta .v-pr { display: inline-flex; align-items: center; gap: 5px; }
body.ui-v2 .buy-cta .v-pr img { width: 20px; height: 20px; }
body.ui-v2 .buy-cta .v-pr s { font-size: 12px; opacity: .55; }
body.ui-v2 .buy-close { width: 120px; height: 48px; padding: 0; border: 0; border-radius: var(--v-btn-r); background: var(--v-sec); box-shadow: var(--v-sec-bd); color: var(--v-tx); font: 700 15px Lexend, sans-serif; }
body.ui-v2 .buy-close:hover { background: var(--v-sec-hi); border: 0; }
/* achat d'un terrain */
body.ui-v2 .ter-buy .ter-img.big { border: 2px solid var(--rc); border-radius: var(--v-r); }

/* ================================================================ notifs du menu (#m-toast) : comme celles de la partie (ui-v2-game.css #toast) */
body.ui-v2 #m-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 #m-toast .ev-toast > b { padding: 7px 0; font-weight: 700; }
body.ui-v2 #m-toast .tk-ic, body.ui-v2 #m-toast .tk-ic:has(> img) { width: 26px; height: 26px; border-radius: 0; background: none; }
body.ui-v2 #m-toast .tk-ic > .ev-ico { width: 22px; height: 22px; background: var(--c); }
body.ui-v2 #m-toast .ev-toast:is(.k-err, .k-net) .tk-ic > .ev-ico { background: var(--v-red); }
body.ui-v2 #m-toast .tk-ic > img { width: 24px; height: 24px; }
body.ui-v2 #m-toast .tk-n { margin: 0 0 0 2px; font: 700 14px/1 Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 #m-toast .tk-bar { height: 2px; background: var(--c); opacity: .8; }
body.ui-v2 #m-toast .ev-toast.k-err { border-color: color-mix(in srgb, var(--v-red) 55%, transparent); }
body.ui-v2.mobile #m-toast { top: 58px; }
body.ui-v2.mobile #m-toast .ev-toast { min-height: 36px; gap: 6px; padding: 0 12px 0 6px; font-size: 13px; border-radius: 10px; }
body.ui-v2.mobile #m-toast .ev-toast > b { padding: 5px 0; }
body.ui-v2.mobile #m-toast .tk-ic { width: 22px; height: 22px; }
body.ui-v2.mobile #m-toast .tk-ic > .ev-ico, body.ui-v2.mobile #m-toast .tk-ic > img { width: 20px; height: 20px; }

/* ================================================================ coffre quotidien (js/chestopen.js) : voile du fond, pas de lueur sur les gains */
body.ui-v2 .chest-ov { background: rgba(16, 10, 34, .88); }
body.ui-v2 .cso-gain img { filter: none; }
body.ui-v2 .cso-gain b { font: 400 34px/1 Rowdies, sans-serif; -webkit-text-stroke: 5px var(--v-bg); }
body.ui-v2 .cso-gain span { font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-gold-tx); -webkit-text-stroke: 3px var(--v-bg); }
body.ui-v2 .cso-fly { filter: none; }
body.ui-v2 .cso-hint { gap: 8px; height: 40px; padding: 0 18px 2px; border-radius: var(--v-btn-r); background: var(--v-lime); color: var(--v-on-lime); box-shadow: inset 0 -3px 0 var(--v-lime-band); font: 700 15px Lexend, sans-serif; }
body.ui-v2 .cso-ok { min-width: 170px; height: 48px; }
@media (max-height: 520px) {
  body.ui-v2 .cso-gain b { font-size: 26px; -webkit-text-stroke-width: 4px; }
  body.ui-v2 .cso-gain span { font-size: 12px; }
}

/* ================================================================ Paramètres (#settings, aussi en partie) */
body.ui-v2 #settings { background: rgba(10, 6, 24, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.ui-v2 .set-box { gap: 14px; padding: 20px 24px; border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: rgba(26, 19, 54, .9); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); color: var(--v-tx); }
body.ui-v2 .set-head h2 { font: 400 30px/1 Rowdies, sans-serif; color: var(--v-tx); }
body.ui-v2 .set-x { width: 40px; height: 40px; border: 0; border-radius: var(--v-btn-r); background: transparent; color: var(--v-tx2); font: 400 26px/1 Lexend, sans-serif; }
body.ui-v2 .set-x:hover { background: var(--v-sec); color: var(--v-tx); }
body.ui-v2 .set-sec h3 { margin: 0 0 10px; font: 700 13px Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tx2); }
body.ui-v2 .set-sec h3::after { display: none; }
body.ui-v2 .set-sec h3 .hint { font: 500 13px Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: var(--v-tx3); }
body.ui-v2 .lang-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.ui-v2 .lang-b { height: 36px; padding: 0 14px; border: 0; border-radius: var(--v-chip-r); background: var(--v-row); box-shadow: var(--v-row-bd); color: var(--v-tx2); font: 600 14px Lexend, sans-serif; }
body.ui-v2 .lang-b:hover { color: var(--v-tx); background: rgba(255, 255, 255, .08); }
body.ui-v2 .lang-b.on { background: color-mix(in srgb, var(--v-lime) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }
body.ui-v2 .vol-row { font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .vol-row b, body.ui-v2 .vol-box b { color: var(--v-tx); }
body.ui-v2 .vol-box { padding: 10px 14px; border: 1.5px solid var(--v-tip-bd); border-radius: var(--v-r); background: var(--v-tip); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
body.ui-v2 .vol-box span { font-size: 13px; color: var(--v-tx2); }
body.ui-v2 .kg h4 { padding: 6px 0; background: #1f1840; font: 700 13px Lexend, sans-serif; letter-spacing: .12em; color: var(--v-tx2); }
body.ui-v2 .kg h4::after { background: rgba(126, 106, 200, .3); }
body.ui-v2 .kr { font-size: 13px; }
body.ui-v2 .kr span { color: var(--v-tx2); }
body.ui-v2 .kb { min-width: 74px; height: 28px; border: 0; border-radius: var(--v-chip-r); background: var(--v-well); box-shadow: inset 0 0 0 1px var(--v-edge); color: var(--v-tx); font: 700 13px Lexend, sans-serif; }
body.ui-v2 .kb:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 .kb.none { color: var(--v-tx3); }
body.ui-v2 .kb.wait { background: var(--v-lime); box-shadow: none; color: var(--v-on-lime); }
body.ui-v2 .keys-note { color: var(--v-gold-tx); }
body.ui-v2 .keys-list { scrollbar-color: rgba(126, 106, 200, .5) transparent; }
body.ui-v2 #settings .btn-grey, body.ui-v2 #settings .btn-green { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; font: 700 14px Lexend, sans-serif; }
body.ui-v2 #settings .btn-grey img { width: 18px; height: 18px; }
body.ui-v2.mobile .set-box { padding: 12px 16px; }
body.ui-v2.mobile .set-head h2 { font-size: 24px; }

/* ================================================================ guide « Comment jouer ? » (js/guide.js, aussi en partie) : feuille de verre,
   plus de coupes biseautées (--sk à 0) ; chaque onglet garde sa couleur (case d'icône, liseré) */
body.ui-v2 #help.guide { --sk: 0deg; --usk: 0deg; background: rgba(10, 6, 24, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.ui-v2 .gd-box { border: 1.5px solid var(--v-edge); border-radius: var(--v-r); background: rgba(26, 19, 54, .92); box-shadow: none; -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
body.ui-v2 .gd-head, body.ui-v2 .gd-tabs, body.ui-v2 .gd-foot { background: transparent; border-color: rgba(126, 106, 200, .3); }
body.ui-v2 .gd-head { border-bottom-width: 1.5px; }
body.ui-v2 .gd-tabs { border-right-width: 1.5px; padding: 12px 10px; }
body.ui-v2 .gd-foot { border-top-width: 1.5px; }
body.ui-v2 .gd-plate, body.ui-v2 .gd-tp { margin-left: 0; align-items: center; gap: 12px; background: none; overflow: visible; }
body.ui-v2 .gd-cell { width: auto; border-radius: 10px; background: var(--c); }
body.ui-v2 .gd-plate .gd-cell { width: 44px; height: 44px; }
body.ui-v2 .gd-tp .gd-cell { width: 36px; height: 36px; }
body.ui-v2 .gd-cell .gd-ico { background: var(--v-on-lime); }
body.ui-v2 .gd-plate > b { padding: 0; font: 400 30px/1 Rowdies, sans-serif; text-transform: none; color: var(--v-tx); }
body.ui-v2 .gd-tp > b { padding: 0; font: 400 24px/1 Rowdies, sans-serif; text-transform: none; color: var(--v-tx); }
body.ui-v2 .gd-bar, body.ui-v2 .gd-sw { display: none; }
body.ui-v2 .gd-strip, body.ui-v2 .gd-status { height: 28px; margin: 10px 0 0; padding: 0 10px; border-radius: var(--v-chip-r); background: color-mix(in srgb, var(--c, var(--v-lime)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--v-lime)) 45%, transparent); color: var(--v-tx); font: 600 14px Lexend, sans-serif; }
body.ui-v2 .gd-status { margin: 0; font-size: 13px; color: var(--v-tx2); }
body.ui-v2 .gd-head .gd-status { margin-left: 0; }
body.ui-v2 .gd-x { border: 0; border-radius: var(--v-btn-r); background: transparent; color: var(--v-tx2); box-shadow: none; }
body.ui-v2 .gd-x:hover { background: var(--v-sec); color: var(--v-tx); }
body.ui-v2 .gd-tab { height: 44px; border-radius: var(--v-row-r); background: transparent; color: var(--v-tx3); align-items: center; gap: 4px; padding-left: 4px; }
body.ui-v2 .gd-tab .gd-tc { width: 34px; height: 34px; border-radius: 9px; }
body.ui-v2 .gd-tab .gd-ico { width: 20px; height: 20px; opacity: .8; }
body.ui-v2 .gd-tab b { font: 700 13px Lexend, sans-serif; letter-spacing: .08em; }
body.ui-v2 .gd-tab:hover { background: var(--v-row); color: var(--v-tx); }
body.ui-v2 .gd-tab.on { background: var(--v-row); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); color: var(--v-tx); }
body.ui-v2 .gd-tab.on .gd-tc { background: var(--c); }
body.ui-v2 .gd-tab.on .gd-ico { background: var(--v-on-lime); }
body.ui-v2 .gd-tab.on::after { display: none; }
body.ui-v2 .gd-art { border-top: 0; border-radius: var(--v-r); background: var(--v-row); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); color: var(--v-tx); }
body.ui-v2 .gd-cap { color: var(--v-tx3); }
body.ui-v2 .gd-list p { font: 500 17px/1.4 Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .gd-list b { color: var(--v-gold-tx); }
body.ui-v2 .gd-cap em, body.ui-v2 .gd-list em { color: var(--v-lime); }
body.ui-v2 .gd-ti { border-bottom: 0; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
body.ui-v2 .gd-dots i { border-radius: 50%; transform: none; background: rgba(176, 156, 244, .3); }
body.ui-v2 .gd-dots i.on { background: var(--c, var(--v-lime)); box-shadow: none; }
body.ui-v2 .gd-foot .gd-prev { min-height: 40px; }
body.ui-v2 .gd-foot .gd-next { min-height: 40px; }
body.ui-v2.mobile .gd-box { border: 0; border-radius: 0; }
body.ui-v2.mobile .gd-tabs { border-right: 0; border-bottom: 1.5px solid rgba(126, 106, 200, .3); padding: 0 10px; }
body.ui-v2.mobile .gd-tab { flex: none; height: 40px; }
body.ui-v2.mobile .gd-tab b { font-size: 15px; padding: 0 10px 0 4px; }
body.ui-v2.mobile .gd-plate .gd-cell { width: 34px; height: 34px; }
body.ui-v2.mobile .gd-plate > b { font-size: 22px; }
body.ui-v2.mobile .gd-tp .gd-cell { width: 30px; height: 30px; }
body.ui-v2.mobile .gd-tp > b { font-size: 20px; }
body.ui-v2.mobile .gd-strip { margin: 0 0 0 10px; font-size: 15px; }
body.ui-v2.mobile .gd-x { top: 2px; right: 4px; border: 0; }

/* ================================================================ retouches */
body.ui-v2 #p-ladder .my-rank { background-image: none !important; }
body.ui-v2 .set-box { max-height: 840px; overflow: hidden; }
body.ui-v2 .set-sec:has(.keys-list) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.ui-v2 .set-sec .keys-list { flex: 1 1 auto; min-height: 0; max-height: none; }
body.ui-v2 .set-foot { flex: none; }
body.ui-v2.mobile .lad-row.head { font-size: 12px; letter-spacing: .02em; }
body.ui-v2 .ter-binfo .btn-green { margin-top: auto; }
body.ui-v2.mobile #menu .cur-plus { display: none; }
body.ui-v2.mobile #menu .cur { padding: 0 9px 0 5px; }
body.ui-v2.mobile .mh-login { height: 36px; padding: 0 10px; }
body.ui-v2.mobile #mnav button { padding: 0 6px; font-size: 12.5px; letter-spacing: 0; }
body.ui-v2.mobile #mnav button.on::after { left: 6px; right: 6px; }
body.ui-v2.mobile .mh-brand { margin-right: 2px; }

/* ================================================================ historique des parties (2026-10-23, js/history.js) : bouton
   « Historique » de la carte Dernières parties, tuiles reliées à leur partie ; la liste déroulante (la même dans l'onglet Profil et
   dans la fenêtre de l'accueil) : une ligne par partie (place, héros, niveau · manches · mode, sort, artefacts, plateau + banc,
   flèche) ; déroulée : chaque joueur dans l'ordre du classement (le tien en lime), 2e ligne synergies + caractéristiques, barre
   horizontale en bas pour refermer */
body.ui-v2 .v-hist { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px; border: 0; border-radius: var(--v-chip-r);
  background: var(--v-sec); box-shadow: var(--v-sec-bd); color: var(--v-tx); font: 700 13px Lexend, sans-serif; cursor: pointer; }
body.ui-v2 .v-hist:hover { background: var(--v-sec-hi); }
body.ui-v2 .v-hist .v-chev { width: 16px; height: 16px; background: var(--v-tx2); }
body.ui-v2 .v-lg.link { cursor: pointer; }
body.ui-v2 .v-lg.link:hover { background: var(--v-sec-hi); box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
/* fenêtre de l'accueil : en-tête, puis la liste qui défile */
body.ui-v2 #m-modal .m-box.hx-box { width: min(1240px, calc(100vw - 32px)); height: calc(100% - 40px); max-height: 860px; display: flex; flex-direction: column; padding: 22px 24px 20px; overflow: hidden; }
body.ui-v2 .hx { display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; }
body.ui-v2 #m-modal .hx h2 { margin: 0; font-size: 28px; }
body.ui-v2 .hx > .hint { text-align: center; }
body.ui-v2 .hx-top { display: flex; align-items: center; gap: 14px; }
body.ui-v2 .hx-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.ui-v2 .hz-modal .hz-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
body.ui-v2 #menu .card.history.hz-card { padding-right: 10px; scrollbar-gutter: stable; }
/* place : pastille comme les tuiles de l'accueil (or, argent, encre) */
body.ui-v2 .hx-pl { height: 34px; min-width: 44px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font: 400 17px Rowdies, sans-serif; color: var(--v-on-lime); background: var(--v-ink3); }
body.ui-v2 .hx-pl.p1 { background: var(--v-gold); }
body.ui-v2 .hx-pl.p4 { background: var(--vm-silver); }
body.ui-v2 .hx-pl.p8 { color: var(--v-tx); }
body.ui-v2 .hx-pl.live { background: var(--v-ink3); color: var(--v-tx2); }   /* encore en jeu quand tu es parti : place provisoire (PV) */
/* une partie (ligne) ; ses joueurs déroulés reprennent les mêmes colonnes */
body.ui-v2 .hz-list { display: flex; flex-direction: column; gap: 6px; }
body.ui-v2 .hz-g { flex: none; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .hz-g.open { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1.5px var(--v-edge); }
body.ui-v2 .hz-sum, body.ui-v2 .hz-p, body.ui-v2 .hz-cols { display: grid; grid-template-columns: 44px 44px minmax(140px, 196px) 150px 110px minmax(0, 1fr) 24px; column-gap: 12px; align-items: center; }
body.ui-v2 .hz-sum { padding: 8px 12px; border-radius: var(--v-row-r); color: var(--v-tx); font-family: Lexend, sans-serif; cursor: pointer; }
body.ui-v2 .hz-sum:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .hz-g:not(.old) .hz-sum:hover { background: var(--v-sec-hi); box-shadow: inset 0 0 0 1.5px var(--v-edge-hi); }
body.ui-v2 .hz-g.old .hz-sum { cursor: default; }
body.ui-v2 .hz-hd { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--v-ink3); }
body.ui-v2 .hz-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.ui-v2 .hz-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .hz-id b small { margin-left: 8px; font: 600 13px Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .hz-id em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px Lexend, sans-serif; font-style: normal; color: var(--v-tx3); }
body.ui-v2 .hz-sp { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.ui-v2 .hz-sp b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13px/1.25 Lexend, sans-serif; color: var(--v-tx2); }
body.ui-v2 .hx-spi { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
body.ui-v2 .hx-spi.none { display: grid; place-items: center; background: var(--v-row); }
body.ui-v2 .hx-spi.none img { width: 20px; height: 20px; }
body.ui-v2 .hz-ar { display: flex; gap: 4px; }
body.ui-v2 .hx-a { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
body.ui-v2 .hx-a img { width: 28px; height: 28px; object-fit: contain; }
/* plateau (unités : rareté, étoiles, objet porté) puis le banc, plus petit, après un filet */
body.ui-v2 .hz-b { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 5px; min-width: 0; padding: 2px 0 5px; }
body.ui-v2 .hz-bench { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 4px; margin-left: 3px; padding-left: 8px; box-shadow: inset 1.5px 0 0 var(--v-edge); }
body.ui-v2 .hx-u { position: relative; flex: none; width: 38px; height: 38px; border-radius: 9px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 45%, #1b1724), #120f18 78%); box-shadow: inset 0 0 0 1.5px var(--rc); }
body.ui-v2 .hx-u.bn { width: 30px; height: 30px; border-radius: 8px; }
body.ui-v2 .hx-u canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }
body.ui-v2 .hx-u > i { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 0 3px; border-radius: 5px; background: #120e20; font: 700 9px/12px Lexend, sans-serif; font-style: normal; letter-spacing: -1px; color: var(--v-gold-tx); white-space: nowrap; }
body.ui-v2 .hx-it { position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: #17132a; box-shadow: inset 0 0 0 1.5px var(--v-gold); }
body.ui-v2 .hx-it img { width: 13px; height: 13px; }
body.ui-v2 .hz-list .empty-note { font-size: 13px; color: var(--v-tx3); }
/* flèche (repliée) ; déroulée, elle laisse la place à la barre du bas */
body.ui-v2 .hz-chev { width: 24px; height: 24px; background: var(--v-tx2); transform: rotate(90deg);
  -webkit-mask: url(dofus/assets/ui/ic/chevronRight.png) center / 15px no-repeat; mask: url(dofus/assets/ui/ic/chevronRight.png) center / 15px no-repeat; }
body.ui-v2 .hz-g .hz-sum:hover .hz-chev { background: var(--v-lime); }
body.ui-v2 .hz-g.open .hz-chev { transform: rotate(-90deg); }   /* déroulée : la flèche monte, toute la ligne referme */
/* déroulée : date et gains, libellés, un bloc par joueur, la barre */
body.ui-v2 .hz-x { display: flex; flex-direction: column; gap: 6px; margin: 0 10px; padding: 8px 0 4px; border-top: 1px solid rgba(126, 106, 200, .22); }
body.ui-v2 .hz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 2px; font: 600 13px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2 .hz-rw { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--v-tx2); }
body.ui-v2 .hz-rw img { width: 16px; height: 16px; }
body.ui-v2 .hz-rw.gold { color: var(--v-gold-tx); } body.ui-v2 .hz-rw.up { color: var(--v-green); } body.ui-v2 .hz-rw.down { color: var(--v-red); }
body.ui-v2 .hz-cols { padding: 4px 12px 0 10px; font: 700 13px Lexend, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tx2); }
body.ui-v2 .hz-cols span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v2 .hz-cols span:first-child { grid-column: 1 / span 2; letter-spacing: .04em; }
body.ui-v2 .hz-cols span:nth-child(5) { grid-column: 6 / span 2; }
body.ui-v2 .hz-p { row-gap: 6px; padding: 8px 12px 8px 10px; border-radius: var(--v-row-r); background: var(--v-row); box-shadow: var(--v-row-bd); }
body.ui-v2 .hz-p.me { background: color-mix(in srgb, var(--v-lime) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); }
body.ui-v2 .hz-p.me .hz-id b { color: var(--v-lime); }
body.ui-v2 .hz-l2 { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding-top: 7px; border-top: 1px solid rgba(126, 106, 200, .16); }
body.ui-v2 .hz-syn, body.ui-v2 .hz-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
body.ui-v2 .hx-s { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px 0 2px; border-radius: var(--v-chip-r); background: rgba(255, 255, 255, .06); }
body.ui-v2 .hx-s .rs2-si { width: 22px; height: 22px; border-radius: 6px; }
body.ui-v2 .hx-s[data-tier="1"] .rs2-si { background: #c0742e; } body.ui-v2 .hx-s[data-tier="2"] .rs2-si { background: #cfd6de; } body.ui-v2 .hx-s[data-tier="3"] .rs2-si { background: #ffd23f; }
body.ui-v2 .hx-s[data-tier="4"] .rs2-si { background: conic-gradient(from 200deg, #ff5f6d, #ffd23f, #79d62a, #26a9ff, #c457ff, #ff5f6d); }
body.ui-v2 .hx-s.e .rs2-si img { filter: none; opacity: 1; }   /* élément : son icône en couleur (le nom est dans la bulle) */
body.ui-v2 .hx-s em { font: 700 13px Lexend, sans-serif; font-style: normal; color: var(--v-tx2); }
body.ui-v2 .hz-st, body.ui-v2 .hz-dm { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 6px; border-radius: var(--v-chip-r); background: rgba(255, 255, 255, .06); font: 700 13px Lexend, sans-serif; color: var(--v-tx); }
body.ui-v2 .hz-st img { width: 16px; height: 16px; object-fit: contain; }
body.ui-v2 .hz-dm { padding: 0 8px; }
body.ui-v2 .hz-dm em { font: 600 13px Lexend, sans-serif; font-style: normal; color: var(--v-tx3); }
/* téléphone (scène 995 × 460 réduite) : la fenêtre presque plein écran ; ligne : identité, sort, artefacts, flèche ; dessous le plateau */
body.ui-v2.mobile #m-modal .m-box.hx-box { width: calc(100vw - 16px); height: calc(100% - 12px); max-height: none; padding: 10px 12px; }
body.ui-v2.mobile .hx { gap: 6px; }
body.ui-v2.mobile #m-modal .hx h2 { font-size: 20px; }
body.ui-v2.mobile .hx-top .kicker { display: none; }
body.ui-v2.mobile .hz-sum, body.ui-v2.mobile .hz-p { grid-template-columns: 36px 34px minmax(0, 1fr) minmax(0, 150px) auto 20px; grid-template-areas: "pl hd id sp ar ch" ". . bd bd bd bd"; column-gap: 8px; row-gap: 6px; }
body.ui-v2.mobile .hz-sum { padding: 6px 8px; }
body.ui-v2.mobile .hz-p { grid-template-areas: "pl hd id sp ar ch" ". . bd bd bd bd" ". . l2 l2 l2 l2"; padding: 6px 8px; }
body.ui-v2.mobile :is(.hz-sum, .hz-p) > .hx-pl { grid-area: pl; } body.ui-v2.mobile :is(.hz-sum, .hz-p) > .hz-hd { grid-area: hd; }
body.ui-v2.mobile .hz-id { grid-area: id; } body.ui-v2.mobile .hz-sp { grid-area: sp; } body.ui-v2.mobile .hz-ar { grid-area: ar; }
body.ui-v2.mobile .hz-b { grid-area: bd; padding-bottom: 4px; } body.ui-v2.mobile .hz-sum > i { grid-area: ch; } body.ui-v2.mobile .hz-l2 { grid-area: l2; }
body.ui-v2.mobile .hz-cols { display: none; }
body.ui-v2.mobile .hx-pl { height: 28px; min-width: 36px; font-size: 14px; }
body.ui-v2.mobile .hz-hd { width: 34px; height: 34px; border-radius: 8px; }
body.ui-v2.mobile .hz-id b { font-size: 12px; }
body.ui-v2.mobile :is(.hz-id em, .hz-sp b, .hz-meta, .hx-s em, .hz-st, .hz-dm, .hz-dm em, .hz-list .empty-note) { font-size: 11px; }
body.ui-v2.mobile .hx-spi { width: 28px; height: 28px; }
body.ui-v2.mobile .hx-a { width: 28px; height: 28px; } body.ui-v2.mobile .hx-a img { width: 22px; height: 22px; }
body.ui-v2.mobile .hx-u { width: 32px; height: 32px; } body.ui-v2.mobile .hx-u.bn { width: 26px; height: 26px; }
body.ui-v2.mobile :is(.hx-s, .hz-st, .hz-dm) { height: 22px; } body.ui-v2.mobile .hx-s .rs2-si { width: 18px; height: 18px; } body.ui-v2.mobile .hz-st img { width: 14px; height: 14px; }
body.ui-v2.mobile .hz-chev { width: 20px; height: 20px; }
body.ui-v2.mobile .hz-x { margin: 0 6px; }
body.ui-v2.mobile .v-hist { height: 24px; padding: 0 8px; font-size: 12px; }
body.ui-v2.mobile .v-hist .v-chev { display: none; }

/* ================================================================ JOUER + choix du mode (Scott 2026-10-24, proposition D retenue) : le mode est écrit sous
   JOUER, la flèche à droite ouvre la liste des modes au-dessus ; « Comment jouer ? » en gros bouton sous JOUER (Scott : il appuyait dessus pour changer de mode) */
body.ui-v2 .v-play .v-split + .v-how { margin-top: 8px; }
body.ui-v2.mobile .v-play .v-split + .v-how { margin-top: 6px; }
/* le mode choisi en bannière illustrée (menu.js modeBanner) : une carte qui prend toute la place libre au-dessus de JOUER */
body.ui-v2 .hf { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: var(--v-r); }
body.ui-v2 .hf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.ui-v2 .hf-chips i { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--v-chip-r); background: rgba(16, 10, 34, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 600 13px Lexend, sans-serif; font-style: normal; color: var(--v-tx); }
body.ui-v2 .hf-chips img { width: 15px; height: 15px; }
/* illustration en fond calée par le haut, nom en bas sur un dégradé */
body.ui-v2 .hf-art { display: flex; align-items: flex-end; background: var(--art) center top / cover; box-shadow: inset 0 0 0 1.5px var(--v-edge); }
body.ui-v2 .hf-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 10, 34, 0) 30%, rgba(16, 10, 34, .94) 92%); }
body.ui-v2 .hf-in { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; }
body.ui-v2 .hf-in .kicker { color: var(--v-gold-tx); }
body.ui-v2 .hf-in b { font: 400 32px/1 Rowdies, sans-serif; color: var(--v-tx); }
/* « Saison 1 » seul, en haut à droite de la carte de rang (le cadre de saison de la colonne de gauche est parti, Scott 2026-10-24) */
body.ui-v2 .rank-card { position: relative; }
body.ui-v2 .rk-season { position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: var(--v-chip-r); background: color-mix(in srgb, var(--v-gold) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-gold) 45%, transparent); font: 700 11px/16px Lexend, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--v-gold-tx); }
body.ui-v2.mobile .rk-season { top: 6px; right: 8px; padding: 0 6px; font-size: 9.5px; }
body.ui-v2.mobile .hf-art { background-position: center; }   /* la bande du téléphone reste centrée (seul le grand rendu PC est calé par le haut) */
body.ui-v2.mobile .hf-in { gap: 3px; padding: 8px 9px; }
body.ui-v2.mobile .hf-in .kicker { display: none; }   /* téléphone : le nom et les infos seuls (la carte est basse) */
body.ui-v2.mobile .hf-in b { font-size: 22px; }
body.ui-v2.mobile .hf-chips { gap: 4px; }
body.ui-v2.mobile .hf-chips i { height: 20px; padding: 0 6px; font-size: 10.5px; }
body.ui-v2.mobile .hf-chips img { width: 12px; height: 12px; }
body.ui-v2 .v-split { position: relative; display: flex; gap: 4px; margin-top: 10px; }
body.ui-v2 #menu .v-split .v-jouer { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--v-btn-r) 6px 6px var(--v-btn-r); }
body.ui-v2 .v-split .v-jouer small { font: 700 14px Lexend, sans-serif; letter-spacing: .04em; color: rgba(23, 17, 42, .7); }
body.ui-v2 #menu .v-split-pick { flex: none; width: 58px; padding: 0; border: 0; border-radius: 6px var(--v-btn-r) var(--v-btn-r) 6px; background: var(--v-lime); box-shadow: inset 0 -4px 0 var(--v-lime-band); display: grid; place-items: center; cursor: pointer; }
body.ui-v2 .v-split-pick .v-chev { transform: rotate(-90deg); background: var(--v-on-lime); }
body.ui-v2 .v-split-pick.open .v-chev { transform: rotate(90deg); }
body.ui-v2 #menu .v-split .v-pop { position: absolute; z-index: 30; left: 0; right: 0; top: auto; width: auto; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border: 1.5px solid var(--v-edge-hi); border-radius: var(--v-r); background: #18102f; }
body.ui-v2 .v-pop[hidden] { display: none !important; }
body.ui-v2 #menu .v-pop .mp-opt { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px; border: 0; border-radius: 9px; background: none; box-shadow: none; text-align: left; cursor: pointer; color: var(--v-tx2); }
body.ui-v2 #menu .v-pop .mp-opt:hover { background: var(--v-row); }
body.ui-v2 #menu .v-pop .mp-opt.on { background: color-mix(in srgb, var(--v-lime) 10%, transparent); box-shadow: inset 0 0 0 1.5px var(--v-lime); color: var(--v-tx); }
body.ui-v2 .v-pop .mp-opt > img { width: 22px; height: 22px; }
body.ui-v2 .v-pop .mp-opt span { display: flex; flex-direction: column; gap: 2px; }
body.ui-v2 .v-pop .mp-opt b { font: 700 14px Lexend, sans-serif; }
body.ui-v2 .v-pop .mp-opt small { font: 500 12px Lexend, sans-serif; color: var(--v-tx3); }
body.ui-v2.mobile #menu .v-split .v-jouer { gap: 3px; }
body.ui-v2.mobile .v-split .v-jouer small { font-size: 12px; }
body.ui-v2.mobile #menu .v-split-pick { width: 46px; }
body.ui-v2.mobile #menu .v-pop .mp-opt { height: 44px; }

/* ================================================================ Signaler un bug (js/bugreport.js) : la fenêtre, puis le mode Localiser
   (calque transparent sur tout l'écran, l'élément sous le pointeur encadré en lime avec son nom) */
#bug-panel { position: absolute; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; background: rgba(10, 6, 24, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#bug-panel .bug-box { width: 620px; max-height: calc(100% - 24px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; border: 1.5px solid var(--v-edge, #3a2f66);
  border-radius: var(--v-r, 16px); background: rgba(26, 19, 54, .96); color: var(--v-tx, #fff); }
#bug-panel .set-head { display: flex; align-items: center; justify-content: space-between; }
#bug-panel .set-head h2 { margin: 0; font: 400 28px/1 Rowdies, sans-serif; }
.bug-f { display: flex; flex-direction: column; gap: 6px; }
.bug-f span { font: 700 13px Lexend, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v-tx2, #c9c0ee); }
.bug-f textarea { height: 78px; resize: vertical; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--v-well, #120d26); box-shadow: inset 0 0 0 1.5px var(--v-edge, #3a2f66);
  color: var(--v-tx, #fff); font: 500 14px/1.4 Lexend, sans-serif; }
.bug-f textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--v-lime, #c8e20a); }
.bug-f textarea.need { box-shadow: inset 0 0 0 1.5px #ff6b6b; }
#bug-desc { height: 96px; }
.bug-loc { display: flex; align-items: center; gap: 10px; }
.bug-loc .btn-grey, .bug-foot .btn-grey, .bug-foot .btn-green { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; font: 700 14px Lexend, sans-serif; }
.bug-loc .btn-grey img { width: 18px; height: 18px; }
.bug-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px Lexend, sans-serif; color: var(--v-tx3, #8e86b3); }
.bug-where.on { color: var(--v-tx, #fff); }
.bug-where b { color: var(--v-lime, #c8e20a); }
.bug-foot { display: flex; align-items: center; gap: 8px; }
.bug-foot .hint { flex: 1; font: 500 12px Lexend, sans-serif; color: var(--v-tx3, #8e86b3); }
.bug-ok { margin: 0; font: 500 15px Lexend, sans-serif; }
#bug-pick { position: fixed; inset: 0; z-index: 10000; cursor: crosshair; touch-action: none; }
#bug-pick .bp-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--v-lime, #c8e20a); color: #17112a;
  font: 700 14px Lexend, sans-serif; white-space: nowrap; pointer-events: none; }
#bug-hl { position: fixed; z-index: 10001; display: none; pointer-events: none; outline: 2px solid var(--v-lime, #c8e20a); outline-offset: -1px; background: rgba(200, 226, 10, .14); }
#bug-tag { position: fixed; z-index: 10002; display: none; pointer-events: none; padding: 3px 8px; border-radius: 6px; background: #17112a; color: var(--v-lime, #c8e20a); font: 600 12px Lexend, sans-serif; white-space: nowrap; }
body.mobile #bug-panel .bug-box { width: 640px; padding: 12px 16px; gap: 8px; }
body.mobile .bug-f textarea { height: 52px; }
body.mobile #bug-desc { height: 60px; }