/* Build B · direction artistique Dofus 3 : panneaux sombres « pierre », accents vert lime, polices du jeu
   (Lexend pour le texte, Rowdies pour les titres) et éléments d'interface exportés du client (assets/ui). */
@font-face { font-family: Lexend; src: url(dofus/assets/fonts/Lexend-Regular.ttf); font-weight: 400; }
@font-face { font-family: Lexend; src: url(dofus/assets/fonts/Lexend-Medium.ttf); font-weight: 500; }
@font-face { font-family: Lexend; src: url(dofus/assets/fonts/Lexend-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: Lexend; src: url(dofus/assets/fonts/Lexend-Bold.ttf); font-weight: 700; }
@font-face { font-family: Rowdies; src: url(dofus/assets/fonts/Rowdies-Regular.ttf); }

:root {
  --bg0: #121116; --bg1: #1c1b22; --bg2: #26252e; --bg3: #302f3a; --line: #3d3c48; --edge: #08080b;
  --text: #ece6d6; --muted: #a39e90; --dim: #6f6b62;
  --lime: #c8e20a; --lime-d: #5d6b00; --gold: #f4c542; --red: #e5493b; --blue: #4c8fe8; --orange: #f08a24; --violet: #a77cff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0a0e; overflow: hidden; }
body { font-family: Lexend, "Segoe UI", sans-serif; font-weight: 500; color: var(--text); user-select: none; }
#viewport { position: fixed; inset: 0; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; background: var(--bg0); overflow: hidden; }
.screen { position: absolute; inset: 0; }
.screen[hidden], [hidden] { display: none !important; }
img { -webkit-user-drag: none; }

/* ---------------------------------------------------------------- briques communes */
.panel { background: linear-gradient(180deg, #25242c, #1a1920); border: 2px solid var(--edge); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); padding: 10px 12px; }
h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase; color: #d9d1b9; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #4a4856, transparent); }
.hint { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.badge { background: var(--lime); color: #1d2400; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.badge:empty { display: none; }
.bar { height: 9px; background: #0d0c11; border: 1px solid #000; border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #e2f55a, #9fb300); transition: width .35s ease; }
.empty-note { font-size: 12px; color: var(--muted); line-height: 1.4; }

button { font: inherit; cursor: pointer; color: var(--text); }
.btn-green { border-style: solid; border-width: 9px 16px; border-image: url(assets/ui/btn_green.png) 10 31 fill / 9px 16px stretch; background: none;
  color: #1c2300; font-weight: 700; font-size: 13px; padding: 0 4px; line-height: 14px; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn-green:hover:not(:disabled) { border-image-source: url(assets/ui/btn_green_over.png); }
.btn-green:active:not(:disabled) { border-image-source: url(assets/ui/btn_green_down.png); }
.btn-green:disabled { border-image-source: url(assets/ui/btn_green_off.png); color: #2b3300; opacity: .75; cursor: default; }
.btn-grey { background: linear-gradient(180deg, #3b3a45, #2a2932); border: 2px solid var(--edge); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 600; font-size: 13px; padding: 4px 12px; }
.btn-grey:hover:not(:disabled) { background: linear-gradient(180deg, #484654, #34333d); }
.btn-grey.on { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
.btn-grey:disabled { opacity: .45; cursor: default; }
.btn-big { border-style: solid; border-width: 22px 30px; border-image: url(assets/ui/btn_big.png) 30 44 fill / 22px 30px stretch; background: none;
  color: #1c2300; font-family: Rowdies, Lexend, sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.btn-big:hover:not(:disabled) { border-image-source: url(assets/ui/btn_big_over.png); }
.btn-big:active:not(:disabled) { border-image-source: url(assets/ui/btn_big_down.png); }
.btn-big:disabled { border-image-source: url(assets/ui/btn_big_off.png); color: #2b3300; cursor: default; }
.icon-btn { width: 34px; height: 34px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #3b3a45, #2a2932); border: 2px solid var(--edge); border-radius: 8px; color: var(--lime); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.icon-btn.off { color: #6a6772; }
.icon-btn.off svg { opacity: .55; }
kbd { font: inherit; font-size: 10px; font-weight: 700; background: rgba(0,0,0,.18); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------------------------------------------------------------- chargement */
#loading { position: absolute; inset: 0; z-index: 50; background: radial-gradient(circle at 50% 42%, rgba(60,40,150,.15), rgba(14,8,44,.82) 75%), url(assets/ui/home_bg.jpg) center / cover; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#loading img { width: 300px; }
#loading b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 40px; letter-spacing: 9px; color: var(--text); }
#loading span { font-size: 16px; color: var(--muted); } #loading i { font-style: normal; color: var(--lime); }
.lbar { width: 420px; height: 12px; border: 1px solid #0c0626; border-radius: 7px; background: #1c1156; overflow: hidden; }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #e2f55a, #9fb300); }

/* ---------------------------------------------------------------- menu principal */
#menu { overflow: hidden; }
.title-sky { position: absolute; inset: 0; background: url(assets/ui/home_bg.jpg) center / cover; }   /* fond neutre de l'accueil Waven (Scott 2026-10-19) */
.menu-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,14,.4), rgba(10,9,14,.1) 40%, rgba(10,9,14,.4)); }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lime); }
.card { position: relative; background: linear-gradient(180deg, rgba(37,36,44,.94), rgba(24,23,30,.94)); border: 2px solid var(--edge); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); padding: 12px 14px; }
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.card-head > img { width: 22px; }
.card-head h3 { margin: 0; font-size: 13px; }
.card-head h3::after { display: none; }
.card-head .timer, .card-head > .btn-grey { margin-left: auto; }
.card-head > .btn-grey { display: flex; align-items: center; gap: 6px; padding: 5px 12px; }
.card-head > .btn-grey img { width: 16px; }
.card-head .timer { font-size: 11.5px; color: var(--muted); }
.card-head .timer b { color: var(--text); font-variant-numeric: tabular-nums; }
.card-head.big h3 { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0; text-transform: none; color: #fff; }
.card-head.big > img { width: 30px; }

/* en-tête */
#mh { position: absolute; left: 0; top: 0; right: 0; height: 72px; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(20,19,25,.97), rgba(14,13,18,.92)); border-bottom: 2px solid #000; box-shadow: inset 0 -1px 0 rgba(200,226,10,.25); }
.mh-brand { display: flex; align-items: center; gap: 8px; width: 206px; }   /* resserré (Scott 2026-10-20) : l'Encyclopédie a allongé le menu, les boutons de son sortaient du cadre */
.mh-brand img { width: 74px; }
.mh-brand b { display: block; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 21px; letter-spacing: 2px; line-height: 1.02; text-transform: uppercase; color: #fff; }
.mh-words { display: flex; flex-direction: column; gap: 2px; }
.mh-brand .mh-words b { font-size: 13px; letter-spacing: 3.4px; color: #9fd8ff; }
#mnav { display: flex; gap: 4px; height: 100%; }
#mnav button { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 13px; height: 100%; background: none; border: none; color: #b9b2a2; font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
#mnav button img { width: 20px; opacity: .6; }
#mnav button:hover { color: #fff; }
#mnav button:hover img { opacity: 1; }
#mnav button.on { color: #fff; }
#mnav button.on img { opacity: 1; }
#mnav button.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--lime); box-shadow: 0 0 12px rgba(200,226,10,.7); }
#mnav button.dot::before { content: ''; position: absolute; right: 8px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 2px #141318; }
.mh-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cur { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 8px; background: rgba(0,0,0,.35); border: 1px solid #000; box-shadow: inset 0 0 0 1px #34333d; border-radius: 19px; }
.cur img { width: 24px; }
.cur b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
#mh-profile { display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 10px 0 4px; background: rgba(0,0,0,.3); border: 1px solid #000; box-shadow: inset 0 0 0 1px #34333d; border-radius: 10px; text-align: left; }
#mh-profile:hover { box-shadow: inset 0 0 0 1px var(--lime); }
#mh-avatar { width: 44px; height: 44px; border-radius: 8px; background: url(assets/ui/slot.png) center / cover; object-fit: cover; border: 1px solid #000; }
.mh-id { display: flex; flex-direction: column; width: 104px; }
.mh-id b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-id span:not(.bar) { font-size: 11px; color: var(--muted); }
.bar.mini { height: 5px; margin-top: 3px; }
#mh-rank { width: 46px; }

/* pages */
#pages { position: absolute; left: 0; right: 0; top: 72px; bottom: 24px; }   /* 24 px : pied de page des pages juridiques (#m-legal) */
#m-legal { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 20px; font: 600 12px/1 Lexend, sans-serif; }
#m-legal a { color: rgba(236, 232, 246, .5); text-decoration: none; }
#m-legal a:hover, #m-legal a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page { position: absolute; inset: 0; padding: 22px 24px 24px; display: flex; gap: 20px; }
.page[hidden] { display: none !important; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col.left { width: 500px; flex: none; }
.col.mid { flex: 1; }
.col.right { width: 440px; flex: none; }
.col.wide { flex: 1; }
.empty-note { font-size: 13px; color: var(--muted); }

/* accueil */
.season { height: 214px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; }
.season h2 { margin: 2px 0 6px; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 34px; color: #fff; }
.season p { margin: 0 0 10px; font-size: 14px; color: #e6e0cf; max-width: 360px; }
.season-end { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.season-end img { width: 18px; }
.season-end b { color: var(--text); font-variant-numeric: tabular-nums; }
/* coffre quotidien qui s'ouvre (js/chestopen.js) : voile, le coffre de Waven au centre, « Ouvrir » sous lui, les gains au-dessus */
.chest-ov { position: fixed; inset: 0; z-index: 400; background: rgba(10, 8, 18, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: coIn .25s ease-out; }
.chest-ov.out { opacity: 0; transition: opacity .2s; }
@keyframes coIn { from { opacity: 0; } }
.cso-box { position: absolute; inset: 0; }
.cso-box.shake { animation: coShake .32s ease-out; }
@keyframes coShake { 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.cso-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.cso-cv.done { cursor: default; }
.cso-gains { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 34px; pointer-events: none; }
/* un gain : l'icône, le nombre en grand, le mot ; sans cadre (Scott : « pas de cadres, c'est pas moderne ») ; il jaillit du coffre (--from) */
.cso-gain { display: flex; flex-direction: column; align-items: center; gap: 0; animation: coPop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.cso-gain img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255, 214, 90, .55)); }
.cso-gain b { margin-top: 2px; font: 800 34px/1 Lexend, sans-serif; color: #fff; font-variant-numeric: tabular-nums; -webkit-text-stroke: 5px #15121d; paint-order: stroke fill; }
.cso-gain span { margin-top: 2px; font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #ffd76a; -webkit-text-stroke: 3px #15121d; paint-order: stroke fill; }
@keyframes coPop { from { opacity: 0; transform: translateY(var(--from, 160px)) scale(.25); } 55% { opacity: 1; } }
@media (max-height: 520px) {   /* écran bas (téléphone en paysage) : gains compacts (js/chestopen.js SPACE_LOW) */
  .cso-gains { gap: 24px; }
  .cso-gain img { width: 40px; height: 40px; }
  .cso-gain b { font-size: 24px; -webkit-text-stroke-width: 4px; }
  .cso-gain span { font-size: 10px; }
}
/* les gains récupérés volent vers les compteurs du haut (js/chestopen.js flyGains) ; le compteur rebondit à l'arrivée */
.cso-fly { position: fixed; z-index: 450; pointer-events: none; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 214, 90, .6)); }
.cso-bump { animation: csoBump .45s ease-out; }
@keyframes csoBump { 30% { transform: scale(1.18); } }
.cso-hint { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px;
  background: #c8e20a; color: #15121d; font-weight: 800; font-size: 15px; cursor: pointer; animation: coHint 1.2s ease-in-out infinite; }
.cso-hint[hidden] { display: none; }
@keyframes coHint { 50% { transform: translateX(-50%) scale(1.06); } }
.cso-ok { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; min-width: 170px; height: 46px; font-size: 16px; }   /* centré sans transform : l'appui des boutons verts (translateY) ne le décale plus */
.cso-ok[hidden] { display: none; }
/* fenêtre « Quitter » : gains réduits selon la phase atteinte (progress.js survivalOf) */
.qt-note { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: #ffb31f; text-align: center; }
/* missions (Scott 2026-10-22, « une UI plus moderne ») : des lignes en cartes, un anneau de progression autour du pictogramme,
   la récompense à droite qui devient le bouton lime quand la mission est faite ; minuteur du prochain tirage (6 h) en pastille */
.missions .card-head { margin-bottom: 10px; }
.ms-timer { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #17161d; font-size: 11.5px; color: var(--muted); }
.ms-timer img { width: 13px; opacity: .75; }
.ms-timer b { color: var(--text); font-variant-numeric: tabular-nums; }
.ms-list { display: flex; flex-direction: column; gap: 7px; }
.ms-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 7px 8px 7px 7px; border: 2px solid transparent; border-radius: 12px; background: #1b1a22; }
.ms-ring { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(#c8e20a calc(var(--k) * 360deg), #34323f 0); }
.ms-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #23222b; }
.ms-ring img { position: relative; width: 21px; opacity: .9; }
/* pastille de notif : chaque mission pas encore récupérée (Scott 2026-10-23 : « un petit point rouge sur chaque mission pas finie ») */
.ms-row:not(.done) .ms-ring::after { content: ''; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: #ff4766; box-shadow: 0 0 0 2px #17112a; }
/* barre de progression sous le texte (« plus visuel qu'un truc est en cours ») */
.ms-bar { position: relative; display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ms-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--k) * 100%); border-radius: 3px; background: #26a9ff; }
.ms-row.ready .ms-bar::after, .ms-row.done .ms-bar::after { background: #c8e20a; }
.ms-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-t b { font-size: 13px; line-height: 1.25; }
.ms-t em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-claim { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; height: 42px; padding: 0 10px; border: 2px solid #2d2c35; border-radius: 10px;
  background: #24232b; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; }
.ms-claim:disabled { opacity: 1; cursor: default; }
.ms-claim img { width: 18px; }
.ms-claim:not(:has(span)) { flex-direction: row; gap: 4px; }
.ms-claim span { margin-top: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.ms-claim > b { display: inline; }
.ms-claim:has(span) { flex-direction: column; }
.ms-claim:has(span) img { display: none; }
.ms-claim:has(span) > b::before { content: '+'; }
.ms-row.ready { border-color: #8ca70a; background: linear-gradient(90deg, rgba(140, 167, 10, .22), #1b1a22 75%); }
.ms-row.ready .ms-claim { border-color: #6f8a05; background: linear-gradient(180deg, #e2f53a, #b4cd10); color: #15121d; animation: msPulse 1.4s ease-in-out infinite; cursor: pointer; }
.ms-row.ready .ms-claim:hover { filter: brightness(1.06); }
.ms-row.done { opacity: .55; }
.ms-row.done .ms-ring { background: #8ca70a; }
.ms-row.done .ms-claim { background: none; border-color: transparent; }
.ms-row.done .ms-claim img { width: 20px; }
@keyframes msPulse { 50% { transform: scale(1.05); } }
.gift { display: flex; align-items: center; gap: 12px; }
.gift-ic { width: 54px; }
.gift.ready .gift-ic { animation: wiggle 1.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-10deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-5deg); } }
.g-text { flex: 1; display: flex; flex-direction: column; }
.g-text b { font-size: 15px; }
.g-text span { font-size: 12.5px; color: var(--muted); }
.gift .btn-green { height: 38px; padding: 0 12px; }
.stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.stage canvas { width: 520px; height: 600px; cursor: pointer; }
.skin-tag { display: inline-block; margin-top: 4px; padding: 2px 12px; border-radius: 12px; background: rgba(0,0,0,.5); border: 1px solid var(--rc); color: var(--rc); font-size: 12.5px; font-weight: 700; }
.rank-card { height: 196px; display: flex; align-items: center; gap: 16px; background-size: cover; background-position: center; padding: 16px 18px; }
.rank-emblem { width: 140px; filter: none; }
.rank-emblem.big { width: 200px; }
.rank-info { flex: 1; }
.rank-info h2, .my-rank h2 { margin: 2px 0 4px; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 32px; color: #fff; }
.lp { font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.lp b { font-size: 17px; color: #fff; }
.lpbar { height: 9px; margin-bottom: 8px; }
.pos { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--gold); }
.pos img { width: 18px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; text-align: left; background: rgba(24,23,30,.92); border: 2px solid #000; box-shadow: inset 0 0 0 1px #34333d; border-radius: 10px; }
.mode img { width: 22px; margin-bottom: 2px; opacity: .7; }
.mode b { font-size: 16px; }
.mode span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mode.on { box-shadow: inset 0 0 0 2px var(--lime), 0 0 18px rgba(200,226,10,.2); background: rgba(40,46,18,.92); }
.mode.on img { opacity: 1; }
#play-btn { height: 112px; font-size: 44px; letter-spacing: 6px; }
.recent-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pl { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 44px; }
.pl img { width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--pc, #555); background: url(assets/ui/slot.png) center / cover; }
.pl b { position: absolute; bottom: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pc, #555); color: #121116; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.pl.p1 { --pc: #ffbb1f; } .pl.p4 { --pc: #8fd14f; } .pl.p8 { --pc: #6f6b78; }

/* champions */
.ch-stage { position: relative; width: 420px; flex: none; }
.ch-stage canvas { width: 420px; height: 500px; cursor: pointer; }
.ch-stage .hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; }
.ch-block { display: flex; gap: 10px; padding: 10px 12px; background: rgba(0,0,0,.25); border: 1px solid #3a3944; border-radius: 9px; }
.ch-block > img { width: 24px; height: 24px; }
.ch-block b { font-size: 14px; color: var(--lime); }
.ch-block p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: #ddd6c4; }
.ch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.my-rank .ch-stats { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.ch-stats > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; background: rgba(0,0,0,.25); border: 1px solid #2d2c35; border-radius: 8px; }
.ch-stats b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 21px; color: #fff; }
.ch-stats span { font-size: 11px; color: var(--muted); }
.sk { position: relative; width: 74px; height: 74px; padding: 0; border-radius: 10px; background: url(assets/ui/slot.png) center / cover; border: 3px solid var(--rc); }
.sk img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.sk.locked img { filter: brightness(.45) saturate(.5); }
.sk.sel { box-shadow: 0 0 0 2px #fff, 0 0 14px var(--rc); }
.sk i { position: absolute; display: flex; align-items: center; justify-content: center; }
.sk .lk { inset: 0; } .sk .lk img { width: 26px; height: 26px; filter: none; }
.sk .eq { right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); }
.sk .eq img { width: 13px; height: 13px; filter: brightness(0); }
.btn-green.big { height: 48px; padding: 0 20px; font-size: 16px; flex: 1; }

/* boutique */
/* boutique : à plat, couleurs saturées par rareté (légendaire or, épique violet, rare bleu), contour sombre cartoon */
#p-shop { flex-direction: column; gap: 14px; }
.skin-card { --rc-bg: #1f6fe0; --rc-hi: #4fa3ff; --rc-dk: #0e3a85; --rc-tx: #d8ebff; }
.skin-card.r-epic { --rc-bg: #8a2fe0; --rc-hi: #b465ff; --rc-dk: #45137d; --rc-tx: #f0dcff; }
.skin-card.r-legendary { --rc-bg: #f28c00; --rc-hi: #ffc22e; --rc-dk: #7d3f00; --rc-tx: #fff0c4; }
.shop-head { display: flex; align-items: center; gap: 16px; }
.sh-title h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 34px; line-height: 1; color: #fff; }
.sh-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; background: #2b2150; border: 2px solid #5a47a8; font-size: 13px; color: #d9d0ff; }
.sh-chip img { width: 17px; }
.sh-chip b { color: #fff; font-variant-numeric: tabular-nums; }
.sh-wallet { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sh-wallet > span { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 19px; background: #1a1622; border: 2px solid #3a3550; font-size: 16px; }
.sh-wallet > span img { width: 22px; }
.sh-wallet b { color: #fff; }
.sh-get { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--lime); border: 2px solid #0b0a0e; color: #1c2300; font-size: 14px; font-weight: 800; }
.sh-get img { width: 15px; filter: brightness(0); }
.sh-get:hover { background: #dcf53a; }
.offers { display: flex; gap: 16px; }
.skin-card { position: relative; cursor: pointer; overflow: hidden; border-radius: 16px; border: 3px solid #0b0a0e;
  background: radial-gradient(circle at 50% 58%, var(--rc-hi) 0 33%, transparent 33.6%), var(--rc-bg); transition: transform .14s, border-color .14s; }
.skin-card:hover { transform: translateY(-5px); border-color: #fff; }
.skin-card.offer { flex: 1; height: 330px; display: flex; flex-direction: column; justify-content: flex-end; }
.skin-card.offer canvas { position: absolute; left: 50%; top: 0; margin-left: -150px; width: 300px; height: 300px; }
.skin-card.grid { width: 176px; height: 262px; flex: none; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 50% 46%, var(--rc-hi) 0 36%, transparent 36.6%), var(--rc-bg); }
.skin-card.grid canvas { position: absolute; left: 50%; top: 0; margin-left: -90px; width: 180px; height: 190px; }
.sc-rar { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 2px 10px; border-radius: 10px; background: var(--rc-dk); border: 2px solid #0b0a0e; color: var(--rc-tx); font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.sc-info { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--rc-dk); border-top: 3px solid #0b0a0e; }
.skin-card.grid .sc-info { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px 10px; }
.sc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-name b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 24px; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-card.grid .sc-name b { font-size: 16px; }
.sc-cls { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--rc-tx); }
.sc-cls img { width: 18px; height: 18px; object-fit: contain; }
.sc-price { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px; background: #fff; border: 2px solid #0b0a0e; color: #1a1420; font-size: 18px; font-weight: 800; white-space: nowrap; }
.skin-card.grid .sc-price { height: 32px; font-size: 15px; }
.sc-price img { width: 22px; }
.skin-card.grid .sc-price img { width: 18px; }
.sc-price s { font-size: 12px; color: #8a7f95; }
.skin-card.owned .sc-price { background: var(--lime); color: #1c2300; }
.skin-card.owned .sc-price img { filter: brightness(0); width: 15px; }
.promo { position: absolute; z-index: 2; top: 14px; left: -34px; width: 140px; padding: 4px 0; transform: rotate(-35deg); background: #ff3b5c; border-top: 2px solid #0b0a0e; border-bottom: 2px solid #0b0a0e; color: #fff; font-size: 15px; font-weight: 800; text-align: center; }
.shop-bar { display: flex; align-items: center; gap: 12px; }
.rar-chips { display: flex; gap: 6px; }
.rar-chips button { height: 34px; padding: 0 14px; border-radius: 17px; background: #1a1622; border: 2px solid #3a3550; font-size: 13px; font-weight: 800; color: var(--muted); }
.rar-chips button:hover { color: #fff; border-color: #8d86b0; }
.rar-chips button.on { color: #fff; border-color: #0b0a0e; }
.rar-chips .rc-all.on, .rar-chips .rc-owned.on { background: var(--lime); color: #1c2300; }
.rar-chips .rc-legendary.on { background: #f28c00; }
.rar-chips .rc-epic.on { background: #8a2fe0; }
.rar-chips .rc-rare.on { background: #1f6fe0; }
.filters { margin-left: auto; display: flex; gap: 4px; }
.filters button { height: 34px; min-width: 34px; padding: 0 4px; border-radius: 9px; background: #1a1622; border: 2px solid #3a3550; font-size: 12px; font-weight: 800; color: var(--muted); }
.filters button:first-child { padding: 0 12px; }
.filters button img { width: 26px; height: 26px; object-fit: contain; }
.filters button:hover { border-color: #8d86b0; }
.filters button.on { border-color: var(--lime); background: #2e3a0c; color: #fff; }
.skin-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; scrollbar-width: thin; scrollbar-color: #5a47a8 transparent; padding: 6px 2px; }
.shop-empty { padding: 20px; }

/* classement */
.my-rank { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px; background-size: cover; background-position: center; }
.my-rank .lpbar { width: 80%; }
.tiers { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }   /* 7 rangs : ils tiennent dans la colonne (Scott 2026-10-21 : ils dépassaient) */
.tier { display: flex; align-items: center; gap: 10px; padding: 1px 8px; border-radius: 8px; }
.tier img { width: 33px; }
.tier b { font-size: 14px; flex: 1; }
.tier span { font-size: 12px; color: var(--muted); }
.tier.on { background: rgba(200,226,10,.12); box-shadow: inset 0 0 0 1px #59661a; }
/* rangs cliquables (menu.js renderLadder) : le rang choisi s'affiche à droite avec ses joueurs */
button.tier { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
button.tier:hover { background: rgba(255,255,255,.07); }
button.tier.sel { background: rgba(98,170,255,.16); box-shadow: inset 0 0 0 1.5px #62aaff; }
button.tier.on.sel { background: linear-gradient(90deg, rgba(98,170,255,.18), rgba(200,226,10,.12)); }
.lad-tier { display: flex; align-items: center; gap: 18px; margin: 2px 0 8px; padding: 8px 18px 8px 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(98,170,255,.16), rgba(98,170,255,.03) 70%); box-shadow: inset 0 0 0 1px rgba(98,170,255,.35); }
.lad-tier[hidden] { display: none; }
.lad-tier .rank-emblem { width: 112px; flex: none; }
.lad-tier .lt-name { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lad-tier .lt-name .kicker { color: #62aaff; }
.lad-tier .lt-name h2 { margin: 0; font-size: 34px; line-height: 1.05; }
.lad-tier .lt-count { display: flex; flex-direction: column; align-items: center; padding: 0 10px; }
.lad-tier .lt-count b { font-size: 28px; line-height: 1; }
.lad-tier .lt-count span { font-size: 12px; color: var(--muted); }
.lp-rules { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.lp-rules img { width: 16px; }
.board-list { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lad-row { display: grid; grid-template-columns: 56px 1fr 170px 90px 80px 70px; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.lad-row.head { height: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.lad-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4856 transparent; }
.lad-body .lad-row:nth-child(odd) { background: rgba(255,255,255,.025); }
.lad-row .n { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 17px; color: var(--muted); }
.lad-row.top1 .n { color: #ffbb1f; } .lad-row.top2 .n { color: #d6dce6; } .lad-row.top3 .n { color: #d0884a; }
.lad-row .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lad-row .who img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: url(assets/ui/slot.png) center / cover; border: 1px solid #000; }
.lad-row .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lad-row .who em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lad-row .rk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.lad-row .rk img { width: 34px; }
.lad-row .lpv { font-weight: 700; font-variant-numeric: tabular-nums; }
.lad-row.me { background: rgba(200,226,10,.16) !important; box-shadow: inset 0 0 0 1px var(--lime); }

/* profil */
.id-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; }
.id-avatar { width: 150px; height: 150px; border-radius: 14px; object-fit: cover; background: url(assets/ui/slot.png) center / cover; border: 2px solid var(--lime); }
.id-name { display: flex; gap: 8px; width: 100%; }
.id-name input, .wl-input input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid #000; box-shadow: inset 0 0 0 1px #4a4856; background: #121116; color: var(--text); font: inherit; font-size: 17px; font-weight: 700; }
.id-name input:focus, .wl-input input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lime); }
.id-name .btn-grey, .wl-input .btn-grey { display: flex; align-items: center; gap: 6px; }
.id-name .btn-grey img, .wl-input .btn-grey img { width: 18px; }
.id-lv { width: 100%; font-size: 13px; color: var(--muted); }
.id-lv b { color: #fff; font-size: 18px; }
.id-lv .bar { margin: 5px 0 3px; }
.av-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; }
.av { width: 58px; height: 58px; padding: 0; border-radius: 9px; background: url(assets/ui/slot.png) center / cover; border: 2px solid #000; }
.av img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.av.on { box-shadow: 0 0 0 2px var(--lime); }
.av canvas { display: block; width: 100%; height: 100%; border-radius: 7px; }
/* profil : le portrait porte un crayon lime en haut à droite qui ouvre « Choisis ton portrait » (Scott 2026-10-21 : la grille d'avatars,
   coupée, est retirée de la page) */
.id-av-btn { position: relative; padding: 0; border: 0; background: none; border-radius: 14px; cursor: pointer; }
.id-av-btn .id-av-edit { position: absolute; top: -9px; right: -9px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--lime); box-shadow: 0 0 0 3px #121116; transition: transform .12s; }
.id-av-btn .id-av-edit img { width: 19px; height: 19px; filter: brightness(0); }
.id-av-btn:hover .id-av-edit { transform: scale(1.12); }
.id-av-btn:hover .id-avatar { filter: brightness(1.08); }
.av-pick { width: min(780px, 92vw); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.av-pick h2 { margin: 0; }
.av-scroll { max-height: min(560px, 62vh); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.av-h { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 8px; font: 800 12px/1 Lexend, "Segoe UI", sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: #fff; }
.av-h:first-child { margin-top: 0; }
.av-h small { font-weight: 600; letter-spacing: 0; color: var(--muted); }
.av-pick .av-grid { max-height: none; overflow: visible; }
.av-pick .wh-btns { justify-content: flex-end; }
.pf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.card.stat { display: flex; flex-direction: column; align-items: center; padding: 14px 6px; }
.card.stat b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 26px; color: #fff; }
.card.stat span { font-size: 11.5px; color: var(--muted); text-align: center; }
.history { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4856 transparent; }
.h-row { display: grid; grid-template-columns: 54px 42px 1fr 90px 80px 120px; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid #2d2c35; }
.h-row .pl { width: auto; }
.h-row .pl b { position: static; height: 26px; min-width: 46px; border-radius: 6px; font-size: 13px; }
.h-row > img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: url(assets/ui/slot.png) center / cover; }
.h-cls b { display: block; font-size: 14px; }
.h-cls em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.h-lp { font-weight: 700; }
.h-lp.up { color: var(--lime); } .h-lp.down { color: var(--red); }
.h-k { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.h-k img { width: 18px; }
.h-date { font-size: 12px; color: var(--muted); text-align: right; }

/* fenêtres : recherche, achat, bienvenue */
#m-modal { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(8,8,11,.72); }
.m-box { background: linear-gradient(180deg, #25242c, #18171d); border: 2px solid #000; box-shadow: 0 0 0 1px #4a4856; border-radius: 14px; padding: 22px 26px; animation: popIn .22s ease-out; }
.mm { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 900px; }
.mm h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 32px; }
.mm-slots { display: flex; gap: 10px; }
.mm-slot { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mm-head { width: 92px; height: 92px; border-radius: 12px; background: url(assets/ui/slot.png) center / cover; border: 2px solid #3a3944; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mm-head img { width: 100%; height: 100%; object-fit: cover; }
.mm-slot.searching .mm-head img { opacity: 0; }
.mm-slot.searching .mm-head { animation: searching 1s ease-in-out infinite; }
@keyframes searching { 50% { border-color: #59661a; box-shadow: 0 0 0 3px rgba(200,226,10,.45); } }
.mm-slot.found .mm-head { border-color: var(--lime); animation: foundPop .3s ease-out; }
.mm-slot.found .mm-head img { opacity: 1; }
@keyframes foundPop { from { transform: scale(.8); } to { transform: none; } }
.mm-slot.me .mm-head { border-color: var(--lime); }
.mm-slot b { font-size: 12.5px; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-slot span { font-size: 11px; color: var(--muted); }
.mm-count { font-family: Rowdies, sans-serif; font-size: 20px; color: var(--lime); }
.mm .btn-grey { padding: 6px 22px; }
.buy { display: flex; gap: 20px; align-items: center; width: 760px; }
.buy canvas { width: 320px; height: 405px; border-radius: 12px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 70%), #121116; box-shadow: inset 0 0 0 2px var(--rc); cursor: pointer; }
.buy-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.buy-info h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 34px; }
.buy-info p { margin: 0; font-size: 14px; color: #ddd6c4; line-height: 1.45; }
.buy-desc { display: flex; flex-direction: column; gap: 2px; }   /* une phrase par ligne (Scott 2026-10-23) */
.buy-price { display: flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 700; }
.buy-price img { width: 34px; }
.buy-price s { font-size: 16px; color: var(--muted); }
/* boutons de la fenêtre d'achat (Scott 2026-10-23 : « plus modernes, et plus gros, là ils sont écrasés ») : l'action principale en
   grand bouton citron, « Fermer » en bouton contour à côté, même hauteur */
.buy-acts { display: flex; gap: 10px; margin-top: 6px; }
.buy-cta, .buy-close { height: 54px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 800 17px/1 Lexend, sans-serif; letter-spacing: .3px; transition: transform .08s, filter .12s, background .12s, border-color .12s; }
.buy-cta { flex: 1; padding: 0 22px; border: 2px solid #15121d; background: linear-gradient(180deg, #e2f53a, #b9d40f); color: #15121d;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35); }
.buy-cta:hover:not(:disabled) { filter: brightness(1.07); }
.buy-cta:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.buy-cta:disabled { background: #2a2833; border-color: #3a3746; color: #a39cb5; box-shadow: none; cursor: default; font-size: 15px; }
.buy-close { flex: none; padding: 0 26px; border: 2px solid rgba(236, 230, 214, .22); background: transparent; color: #ece6d6; font-size: 15px; font-weight: 700; }
.buy-close:hover { background: rgba(236, 230, 214, .08); border-color: rgba(236, 230, 214, .42); }
.buy-close:active { transform: translateY(1px); }
.welcome { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 480px; text-align: center; }
.welcome img { width: 110px; }
.welcome h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 32px; }
.welcome p { margin: 0; font-size: 14px; color: #ddd6c4; }
.wl-input { display: flex; gap: 8px; width: 100%; }
.welcome .btn-green.big { width: 100%; flex: none; }
.welcome .rs-btns .btn-green.big { width: auto; flex: 1; min-width: 0; }   /* à côté d'« Annuler » : il prend la place restante, sans déborder */
#m-toast { position: absolute; z-index: 45; left: 0; right: 0; top: 90px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }

/* ---------------------------------------------------------------- partie : zones */
#topbar { position: absolute; left: 0; top: 0; width: 1600px; height: 56px; background: linear-gradient(180deg, #23222a, #141318); border-bottom: 2px solid #000;
  box-shadow: inset 0 -1px 0 rgba(200,226,10,.25); display: flex; align-items: center; padding: 0 14px; gap: 16px; z-index: 5; }
.tb-round { width: 380px; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
/* PV perdus en cas de défaite (à côté du stage), détail au survol */
.tb-dmg { align-self: center; display: flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; border-radius: 7px; font-style: normal; cursor: help;
  background: rgba(229,73,59,.16); border: 1px solid rgba(255,90,110,.55); }
.tb-dmg img { width: 16px; }
.tb-dmg b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 15px; color: #ff8a98; }
.tb-dmg em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #ffc2ca; }
.tt-sub .chip.on { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
.tb-round b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 28px; color: #fff; }
.tb-round span { font-size: 14px; color: var(--muted); }
#tb-rounds { flex: 1; display: flex; justify-content: center; gap: 5px; }
#tb-rounds span { font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 4px 10px; background: linear-gradient(180deg, #34333d, #24232b); border: 1px solid #000; color: #cfc8b4; display: flex; align-items: center; gap: 5px; }
#tb-rounds span img { width: 15px; }
#tb-rounds span.pve { color: #ffb36b; }
#tb-rounds span.now { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
.tb-right { width: 300px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.heart { position: relative; width: 50px; height: 50px; margin-right: 6px; }
.heart > img { position: absolute; left: 0; top: 0; width: 50px; height: 50px; }
.heart b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 17px; color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 2px #000; }

.rail { position: absolute; top: 56px; width: 230px; height: 654px; background: linear-gradient(180deg, #1d1c23, #16151b); padding: 12px 10px; overflow: hidden; }
#traits { left: 0; height: 270px; border-right: 2px solid #000; }
#traits-list { height: 222px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6c6880 transparent; }
#traits-list.more { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }   /* la suite est plus bas */
#items { left: 0; top: 326px; height: 384px; border-right: 2px solid #000; border-top: 2px solid #000; }
#players { left: 1370px; border-left: 2px solid #000; }
#board { position: absolute; left: 230px; top: 56px; width: 1140px; height: 654px; }

/* synergies */
.trait { display: flex; align-items: center; gap: 7px; height: 30px; border-radius: 7px; padding: 0 7px; margin-bottom: 4px; background: rgba(0,0,0,.25); border: 1px solid #2d2c35; cursor: default; }
.trait.on { background: linear-gradient(90deg, rgba(200,226,10,.16), rgba(0,0,0,.2)); border-color: #59661a; }
.trait .tn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.trait .tn img, .trait .tn canvas { width: 20px; height: 20px; flex: none; }
.trait .tn em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.trait.on .tn em { color: var(--lime); }
.steps { display: flex; gap: 3px; width: 40px; flex: none; }
.steps span { flex: 1; height: 6px; border-radius: 3px; background: #34333d; }
.steps span.on { background: var(--lime); }

/* joueurs */
.score { position: relative; display: flex; align-items: center; gap: 8px; height: 70px; padding: 4px 8px 4px 4px; border-radius: 9px; margin-bottom: 4px; background: rgba(0,0,0,.22); border: 1px solid #2d2c35; }
.score.me { background: linear-gradient(90deg, rgba(200,226,10,.18), rgba(0,0,0,.2)); border-color: #6b7a14; }
.score.next { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.score.dead { opacity: .38; filter: grayscale(1); }
.score.danger::after { content: ''; position: absolute; inset: -1px; border-radius: 10px; border: 2px solid #ff3d2e; pointer-events: none; animation: dangerPulse 1.1s ease-in-out infinite; }   /* une défaite peut l'éliminer */
@keyframes dangerPulse { 50% { border-color: #ff9a4a; box-shadow: 0 0 0 2px rgba(255,61,46,.55); } }
.score:not(.me) { cursor: pointer; }
.score:not(.me):hover { border-color: #59661a; }
.score.viewing { border-color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.score .shead { width: 56px; height: 56px; flex: none; border-radius: 8px; background: #2c2840 url(assets/ui/slot.png) center / cover; border: 1px solid #000; overflow: hidden; }
.score .shead img { width: 100%; height: 100%; object-fit: cover; }
.score .si { flex: 1; min-width: 0; }
.score .sname { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score .scls { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score .sbar { height: 7px; background: #0d0c11; border: 1px solid #000; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.score .sbar i { display: block; height: 100%; background: linear-gradient(180deg, #ff6a5a, #c42d22); transition: width .5s ease; }
.score .shp { width: 30px; text-align: right; font-size: 16px; font-weight: 700; }
/* combats en cours : état de chaque joueur en pastille sur son portrait */
.score .sst { position: absolute; left: 44px; top: 48px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #000; display: flex; align-items: center; justify-content: center; z-index: 1; }
.score .sst img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.score .sst.fight { background: #4f74d9; animation: sstPulse 1s ease-in-out infinite; }
.score .sst.win { background: #2fb84a; }
.score .sst.lose { background: #e5493b; }
.score .sst.draw { background: #8a8794; }
@keyframes sstPulse { 50% { box-shadow: 0 0 0 4px rgba(79,116,217,.35); } }
.score.hurt { animation: scoreHurt .36s steps(2); }
@keyframes scoreHurt { 0%, 50% { box-shadow: inset 0 0 0 2px #e5493b; background-color: rgba(229,73,59,.35); } 100% { box-shadow: none; } }
.tag { display: inline-block; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--red); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }

/* ---------------------------------------------------------------- dock */
#dock { position: absolute; left: 0; top: 710px; width: 1600px; height: 190px; background: linear-gradient(180deg, #1a1920, #0f0e13); border-top: 2px solid #000; box-shadow: inset 0 1px 0 rgba(200,226,10,.25); }
.dock-block { position: absolute; top: 10px; height: 170px; border-radius: 10px; background: linear-gradient(180deg, #25242c, #1a1920); border: 2px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.dock-block.enter { animation: dockIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes dockIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#d-char { left: 10px; width: 380px; display: flex; gap: 9px; padding: 8px; }
.char-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* portrait carré (tête du perso) à côté du nom et du niveau */
.char-top { display: flex; align-items: center; gap: 9px; }
/* PV du joueur : colonne de vie sur le bord gauche du bloc (nombre en haut, jauge qui se vide vers le bas, cœur en bas) */
.hp-col { width: 24px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hp-col b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 15px; line-height: 1; color: #ff8a98; text-shadow: 0 1px 2px #000; }
.hp-vbar { position: relative; flex: 1; width: 14px; border-radius: 7px; background: #1a0d12; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); overflow: hidden; }
.hp-vbar i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(90deg, #ff6b7d, #d8243f); transition: height .5s ease; }
.hp-vbar i::after { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 3px; border-radius: 2px; background: rgba(255,255,255,.28); }
.hp-col img { width: 22px; filter: drop-shadow(0 1px 1px #000); }
.hp-col.low b { animation: hpLow 1s ease-in-out infinite; }
@keyframes hpLow { 0%, 100% { color: #fff; } 50% { color: #ff4f6a; } }
#char-heart.hurt { animation: heartHurt .6s ease-out; }
@keyframes heartHurt { 0% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
.portrait-wrap { position: relative; width: 58px; height: 58px; flex: none; border-radius: 10px; background: url(assets/ui/slot.png) center / cover; border: 2px solid #000; box-shadow: 0 0 0 1px #4a4856, inset 0 0 12px rgba(0,0,0,.5); overflow: hidden; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.char-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-lvl { line-height: 1.1; white-space: nowrap; }
.char-lvl b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 24px; color: #fff; }
.char-lvl b::before { content: 'Niv. '; font-family: Lexend, sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); }
.char-xptext { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#xp-btn { height: 34px; display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; font-size: 12px; }
#xp-btn img { width: 16px; }
#stat-points { align-self: flex-start; }
#stats-list { width: 152px; flex: none; display: flex; flex-direction: column; gap: 3px; }
.stat-row { display: flex; align-items: center; height: 28px; gap: 5px; font-size: 12px; background: rgba(0,0,0,.25); border: 1px solid #2d2c35; border-radius: 6px; padding: 0 3px 0 4px; }
.stat-row img { width: 18px; }
.stat-row .sn { flex: 1; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.stat-row .sv { width: 18px; text-align: right; font-size: 14px; font-weight: 700; }
.stat-row { position: relative; }
.stat-row .sg { position: absolute; right: 25px; top: -4px; padding: 0 3px; border-radius: 4px; background: #121116; font-size: 9px; font-weight: 700; line-height: 12px; color: var(--lime); }   /* part des objets et de la panoplie, au-dessus du total */
.btn-plus { width: 22px; height: 20px; padding: 0; border: 1px solid #000; border-radius: 5px; background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; font-size: 15px; font-weight: 700; line-height: 1; }
.btn-plus:disabled { background: #2d2c35; color: #55525c; cursor: default; }
#d-char.has-points .btn-plus:not(:disabled) { animation: plusGlow 1.2s ease-out infinite; animation-delay: calc(var(--i, 0) * 90ms); }
#d-char.has-points #stat-points { animation: plusGlow 1.2s ease-out infinite; }
#d-char.has-points #stats-list { border-radius: 8px; box-shadow: 0 0 0 2px rgba(200,226,10,.45); }
@keyframes plusGlow { from { box-shadow: 0 0 0 0 var(--lime); } to { box-shadow: 0 0 0 6px transparent; } }
#d-eco { left: 398px; width: 156px; padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; }
.eco-kamas { display: flex; align-items: center; gap: 6px; }
.eco-kamas img { width: 30px; }
.eco-kamas b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 32px; color: var(--gold); line-height: 1; }
.eco-line { font-size: 11.5px; color: var(--muted); line-height: 1.35; cursor: help; text-decoration: underline dotted rgba(255,255,255,.3); text-underline-offset: 3px; }
/* série de victoires / défaites : pastille à droite des kamas (pâle tant qu'elle ne rapporte rien) */
.eco-streak { margin-left: auto; display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 7px 0 4px; border-radius: 13px; border: 1px solid #000; cursor: help; }
.eco-streak img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.eco-streak b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 16px; color: #fff; }
.eco-streak.win { background: linear-gradient(180deg, #ff9a3d, #e0551b); box-shadow: 0 0 10px rgba(255,140,40,.45); }
.eco-streak.lose { background: linear-gradient(180deg, #6f7cff, #3d47c9); box-shadow: 0 0 10px rgba(100,110,255,.4); }
.eco-streak.weak { opacity: .55; box-shadow: none; }
.eco-line b { color: var(--text); }
.eco-line img { width: 1em; height: 1em; object-fit: contain; vertical-align: -.12em; margin-left: 1px; }   /* icône kama après « +N » : hauteur du texte */
.eco-pods { display: flex; align-items: center; gap: 5px; margin-top: auto; }
.eco-pods img { width: 20px; }
.eco-pods span { font-size: 12px; color: var(--muted); }
.eco-pods b { margin-left: auto; font-size: 18px; font-weight: 700; }
.bar.pods.full i { background: linear-gradient(180deg, #ffb35a, #d0700c); }
#d-market, #d-fight { left: 562px; width: 856px; padding: 6px 10px; }
.mk-head { display: flex; align-items: center; gap: 10px; height: 20px; font-size: 13px; }
.mk-head b { font-weight: 700; text-transform: uppercase; letter-spacing: .9px; font-size: 12px; color: #d9d1b9; }
#mk-odds { display: flex; gap: 4px; }
#mk-odds span { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; background: rgba(0,0,0,.3); border: 1px solid #000; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
#mk-odds span i { width: 8px; height: 8px; border-radius: 2px; }
#mk-odds span.zero { opacity: .35; }
#mk-hint { margin-left: auto; }
.check { display: flex; align-items: center; gap: 6px; flex: none; font-size: 11.5px; font-weight: 700; color: #d9d1b9; cursor: pointer; user-select: none; padding: 1px 8px 1px 4px; border-radius: 5px; background: rgba(0,0,0,.3); border: 1px solid #000; }
.check input { display: none; }
.check i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid #8a8070; background: #1d1a14; position: relative; }
.check input:checked + i { border-color: var(--lime); background: #4d6b0a; }
.check input:checked + i::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #e8ff7a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check:hover { color: #fff; }
#mk-cards { position: relative; display: flex; gap: 8px; margin-top: 5px; }
.mslot { display: flex; flex-direction: column; gap: 4px; width: 110px; }
.mcard { position: relative; width: 110px; height: 100px; border-radius: 9px; border: 3px solid #555; cursor: pointer; overflow: hidden;
  background-image: linear-gradient(0deg, var(--rc-soft) 0%, transparent 70%), url(assets/ui/slot.png); background-size: cover; transition: transform .15s ease, box-shadow .2s; }
.mcard:hover { transform: translateY(-3px); }
.mcard.preview { opacity: .45; cursor: default; filter: saturate(.6); }
.mcard.preview:hover { transform: none; }
.mcard.locked::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--lime); border-radius: 6px; pointer-events: none; z-index: 2; }
.mcard.owned { box-shadow: 0 0 0 2px #f4ff9a, 0 0 0 4px rgba(200,226,10,.85); animation: ownedGlow 1.3s ease-in-out infinite; }
@keyframes ownedGlow { 50% { box-shadow: 0 0 0 2px #f4ff9a, 0 0 0 4px rgba(200,226,10,.3); } }
.mcard canvas { position: absolute; left: 30px; right: 0; top: 4px; width: 80px; height: 50px; }
/* test ?market=v2 : 4 cartes + l'aperçu, élargies pour garder la largeur des 7 (7 × 110 + 6 × 8 = 5 × 157 + 4 × 8) */
body.mk-v2:not(.mobile) .mslot, body.mk-v2:not(.mobile) .mcard { width: 157px; }
body.mk-v2:not(.mobile) .mcard canvas { left: auto; right: 10px; }
.mtags { position: absolute; left: 4px; top: 4px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; z-index: 1; }
.mtag { display: flex; align-items: center; gap: 3px; max-width: 76px; padding: 0 5px 0 1px; border-radius: 5px; background: rgba(8,8,11,.72); font-size: 9.5px; font-weight: 700; line-height: 16px; white-space: nowrap; overflow: hidden; }
.mtag.fam { padding-left: 5px; color: #cfc8b4; }
.mtag .rb { width: 14px; height: 14px; }
.mbottom { position: absolute; left: 5px; right: 5px; bottom: 4px; }
.mcard .cn { font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.mrow { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.mcard .pods { display: flex; align-items: center; gap: 2px; padding: 0 5px 0 2px; border-radius: 5px; background: var(--rc); color: #121116; font-size: 11px; font-weight: 700; line-height: 16px; }
.mcard .pods img { width: 13px; filter: brightness(0); opacity: .75; }
.mcard .mprice { display: flex; align-items: center; gap: 2px; padding: 0 5px 0 2px; border-radius: 5px; background: rgba(0,0,0,.6); font-size: 12px; font-weight: 700; color: var(--gold); line-height: 16px; }
.mcard .mprice img { width: 14px; }
.mcard.poor .mprice { color: #ff7a6b; }
.mcard .soon { font-size: 10px; font-weight: 600; color: var(--muted); }
.lockbtn { position: absolute; z-index: 3; right: 3px; top: 3px; width: 24px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,10,14,.78); border: 1px solid #000; border-radius: 6px; }
.lockbtn img { width: 15px; opacity: .7; }
.lockbtn:hover:not(:disabled) { background: #3b3a45; }
.lockbtn:hover img { opacity: 1; }
.lockbtn.on { background: linear-gradient(180deg, #d9f13a, #a7bf00); }
.lockbtn.on img { opacity: 1; filter: brightness(.25); }
.skipbtn { height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, #4a4856, #302f3a); border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); color: var(--text); }
.skipbtn > img { width: 13px; }
.skipbtn b { display: flex; align-items: center; gap: 1px; margin-left: 3px; color: var(--gold); }
.skipbtn b img { width: 14px; }
.skipbtn:hover:not(:disabled) { background: linear-gradient(180deg, #5d5b6c, #3b3a46); box-shadow: inset 0 0 0 1px var(--lime); }
.skipbtn:disabled, .lockbtn:disabled { opacity: .45; cursor: default; }
.skip-space { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--muted); }
#sell-zone { position: absolute; inset: 0; z-index: 3; border-radius: 9px; background: rgba(90, 25, 20, .82); border: 2px dashed #ff9a8f; color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; transition: background .12s; }
#sell-zone img { width: 34px; }
#sell-zone span { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: #ffd6d0; }
#sell-zone b { font-size: 22px; font-weight: 700; color: #fff; }
#sell-zone.hot { background: rgba(190, 40, 28, .95); border-style: solid; border-color: #fff; }
#d-fight { display: flex; gap: 18px; }
#fight-vs { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 19px; margin: 6px 0 14px; line-height: 1.25; }
#fight-vs em { font-style: normal; color: var(--lime); }
.speed { display: flex; gap: 6px; }
.speed button { padding: 4px 13px; }
#meters { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 6px; }
.meter { display: flex; align-items: center; gap: 6px; height: 24px; font-size: 11.5px; transition: opacity .3s; }
.meter .mb { flex: 1; height: 8px; background: #0d0c11; border: 1px solid #000; border-radius: 4px; overflow: hidden; }
.meter .mb i { display: block; height: 100%; background: linear-gradient(180deg, #ff8a5a, #d0441c); transition: width .3s ease; }
.meter .mv { width: 44px; text-align: right; font-weight: 700; }
#d-timer { left: 1426px; width: 164px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; }
.tm-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tm-sec { display: flex; align-items: baseline; gap: 2px; }
.tm-sec b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 54px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.tm-sec span { font-size: 18px; font-weight: 700; color: var(--muted); }
.tm-bar { width: 100%; height: 8px; }
.tm-bar i { transition: width .25s linear; }
.tm-sub { font-size: 11.5px; color: var(--muted); }
#d-timer.urgent .tm-sec b { color: var(--red); animation: urgent .8s ease-in-out infinite; }
#d-timer.urgent .tm-bar i { background: linear-gradient(180deg, #ff7a6b, #c42d22); }
#d-timer.fighting .tm-sec b { font-size: 34px; color: var(--lime); }
#d-timer.sudden .tm-label { color: #ff5a6e; }
#d-timer.sudden .tm-sec b { color: #ff5a6e; animation: urgent .8s ease-in-out infinite; }
#d-timer.sudden .tm-bar i { background: linear-gradient(180deg, #ff7a6b, #c42d22); }
#d-timer.sudden { box-shadow: 0 0 0 2px var(--bn-ink), 0 0 0 4px #ff3b2f; }
@keyframes urgent { 50% { transform: scale(1.08); } }

/* ---------------------------------------------------------------- objets */
#items h3 { margin-bottom: 5px; }
#items .h-res { margin-top: 6px; }
#equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 52px); gap: 5px; }
#equip-grid .slot > img { width: 40px; height: 40px; margin-bottom: 9px; }
.slot { position: relative; background: url(assets/ui/slot_empty.png) center / cover; border: 1px solid #000; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.slot.full { background-image: url(assets/ui/slot.png); cursor: grab; touch-action: none; }
.slot.full:hover { box-shadow: inset 0 0 0 2px #59661a; }
.slot.sel { box-shadow: inset 0 0 0 2px var(--lime); }
.slot.drop { box-shadow: inset 0 0 0 3px var(--lime), 0 0 10px rgba(200,226,10,.5); }
.slot img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 10px; }
.slot .st { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: #ece6d6; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.slot .st span { display: flex; align-items: center; gap: 1px; }
.slot .st img { width: 11px; height: 11px; margin: 0; }
#bag-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 34px); gap: 4px; }
.res { border: 1px solid #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; background: url(assets/ui/slot.png) center / cover; overflow: hidden; }
.res img { width: 30px; height: 30px; object-fit: contain; }
/* ressource : icône de la caractéristique qu'elle donne, en coin */
.res { position: relative; }
.res:hover { box-shadow: inset 0 0 0 2px #59661a; }
.res.sel { box-shadow: inset 0 0 0 2px var(--lime); }
.res.drop { box-shadow: inset 0 0 0 3px var(--lime), 0 0 10px rgba(200,226,10,.5); }
.res.empty { background-image: url(assets/ui/slot_empty.png); cursor: default; }
/* inventaire : parchemins (clic = utiliser), cadre à la couleur du rang */
.res.cons { cursor: pointer; box-shadow: inset 0 0 0 2px var(--cc); }
.res.cons img { width: 28px; height: 28px; }
.res.cons .cs-badge { position: absolute; right: 2px; bottom: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; border: 1px solid #000; background: var(--cc); color: #15131a; font: 400 10px Rowdies, sans-serif; display: flex; align-items: center; justify-content: center; }
.res.cons:hover { box-shadow: inset 0 0 0 3px var(--cc); }
/* butin du sol qui vole jusqu'à l'inventaire */
.ev-fly { position: absolute; z-index: 60; pointer-events: none; width: 34px; height: 34px; margin: -17px; }
.ev-fly i { display: block; } .ev-fly img { width: 34px; height: 34px; object-fit: contain; }
#bag-grid.got, #eco-kamas.got { animation: evBump .26s var(--ease-pop); }
#eco-kamas.spend { color: #ff9a8a; }
#board.loot-hover { cursor: pointer; }
.res.dragging, .slot.dragging { opacity: .3; }
/* fabrication : l'objet vole jusqu'à sa case (cr-fly), la case attend vide (cr-wait) puis saute (cr-pop) ;
   refus, 6 objets portés : la ressource tremble en rouge (shake-red), l'équipement clignote 2 fois en rouge (flash-red) */
.ev-fly.cr-fly { width: 44px; height: 44px; margin: -22px; z-index: 62; }
.ev-fly.cr-fly img { width: 44px; height: 44px; object-fit: contain; }
.slot.cr-wait > img, .slot.cr-wait .st { visibility: hidden; }
.slot.cr-pop { animation: crPop .32s cubic-bezier(.3,1.6,.5,1); }
.shake-red { animation: crShake .45s ease-out; box-shadow: inset 0 0 0 3px #ff2e4d; }
.shake-red::after, #equip-grid.flash-red .slot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #ff2e4d; opacity: 0; pointer-events: none; }
.shake-red::after { animation: crRed .45s ease-out; }
#equip-grid.flash-red, #m-items.flash-red { border-radius: 8px; animation: crFlashRing .9s linear; }
#equip-grid.flash-red .slot::after { animation: crFlash .9s linear; }
@keyframes crPop { 0% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes crShake { 0%, 100% { transform: none; } 15% { transform: translateX(-6px) rotate(-4deg); } 35% { transform: translateX(5px) rotate(3deg); } 55% { transform: translateX(-4px) rotate(-2deg); } 75% { transform: translateX(2px); } }
@keyframes crRed { 0% { opacity: 0; } 15% { opacity: .65; } 60% { opacity: .5; } 100% { opacity: 0; } }
@keyframes crFlash { 0%, 45%, 100% { opacity: 0; } 20%, 70% { opacity: .6; } }
@keyframes crFlashRing { 0%, 45%, 100% { box-shadow: 0 0 0 0 #ff2e4d; } 20%, 70% { box-shadow: 0 0 0 3px #ff2e4d; } }
#sets-list { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.set-chip.more { cursor: help; background: #3a3550; color: #fff; }
.sets-label { font-size: 10.5px; font-weight: 600; color: var(--muted); align-self: center; }
.set-chip { font-size: 11px; font-weight: 600; border: 1px solid #000; border-radius: 5px; padding: 1px 6px; background: #2d2c35; }
.set-chip.on { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
.sell { margin-left: auto; background: linear-gradient(180deg, #f0604f, #b82c1f); border: 1px solid #000; border-radius: 5px; color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; letter-spacing: 0; text-transform: none; }
#drag-ghost { position: absolute; z-index: 42; pointer-events: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: url(assets/ui/slot.png) center / cover; border: 2px solid var(--lime); border-radius: 9px; }
#drag-ghost img { width: 42px; height: 42px; object-fit: contain; }

/* ---------------------------------------------------------------- info-bulles : un en-tête, des sections, un pied */
#tooltip, #tooltip2, .tt-box { position: absolute; z-index: 30; width: 300px; pointer-events: auto; background: linear-gradient(180deg, #24232b, #19181e); border: 2px solid #000; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px #3d3c48; font-size: 12.5px; line-height: 1.4; overflow: hidden; animation: tipIn .12s ease-out; }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#hz-tip { position: fixed; z-index: 95; width: 320px; pointer-events: none; }   /* historique des parties (history.js hzTipBind) : au-dessus du menu et des fenêtres */
body.mobile #hz-tip { width: 290px; max-height: calc(100vh - 16px); overflow-y: auto; pointer-events: auto; overscroll-behavior: contain; }   /* trop haute : elle défile au doigt */
.tt-head { display: flex; gap: 10px; align-items: center; padding: 9px 11px 8px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent); border-bottom: 1px solid #34333d; }
.tt-head canvas, .tt-head .tt-img, .tt-head .rb.big { width: 48px; height: 48px; flex: none; border-radius: 7px; background: url(assets/ui/slot.png) center / cover; border: 2px solid var(--rc, #000); object-fit: contain; }
.tt-title { flex: 1; min-width: 0; }
.tt-name { display: flex; align-items: baseline; gap: 6px; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.15; color: #fff; }
.tt-name .stars { margin-left: auto; font-family: Lexend, sans-serif; font-size: 13px; color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.tt-sub { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; background: rgba(0,0,0,.35); border: 1px solid #000; border-radius: 5px; padding: 0 6px 0 3px; line-height: 17px; color: #ddd6c4; }
.chip img { width: 14px; }
.chip.rc { color: #141414; border-color: rgba(0,0,0,.6); padding-left: 6px; }
.tt-sec { padding: 8px 11px; border-bottom: 1px solid #2d2c35; }
.tt-sec:last-child { border-bottom: none; }
.tt-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lime); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.tt-label .r { margin-left: auto; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.tt-label .r img { width: 14px; }
.tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.tt-stat { display: flex; align-items: center; gap: 5px; }
.tt-stat img { width: 17px; }
.tt-stat span { color: var(--muted); white-space: nowrap; }
.tt-stat b { white-space: nowrap; }
.tt-stat b { margin-left: auto; font-weight: 700; color: #fff; }
.tt-grid + .tt-grid { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #3a3842; }
.tt-items { display: flex; gap: 4px; flex-wrap: wrap; }
.tt-items span { width: 34px; height: 34px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid #000; display: grid; place-items: center; }
.tt-items img { width: 30px; height: 30px; object-fit: contain; }
.tt-text { color: #ddd6c4; }
.tt-text b { color: #fff; }
.tt-foot { display: flex; align-items: center; gap: 5px; padding: 6px 11px; background: rgba(0,0,0,.3); font-size: 11.5px; color: var(--muted); }
.tt-foot img { width: 15px; }
.rc-loot img, .tt-foot .rc-loot img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.tt-foot b { color: var(--gold); }
.tt-foot .ok { color: var(--lime); font-weight: 700; }
.tt-foot .bad { color: var(--red); font-weight: 700; }
.tt-step { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; color: var(--muted); }
.tt-step .n { flex: none; min-width: 22px; padding: 0 3px; white-space: nowrap; height: 18px; border-radius: 4px; background: #2d2c35; border: 1px solid #000; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #ddd6c4; }
.tt-step.on { color: #fff; }
.tt-step img.tt-ii { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin: 0 1px; }   /* icône dans le texte d'une ligne (série : flamme / crâne) */
.tt-step.on .n { background: var(--lime); color: #1c2300; }
.tt-combo { display: flex; align-items: center; gap: 6px; padding: 2px 5px; border-radius: 5px; }
.tt-combo .ci { width: 22px; height: 22px; object-fit: contain; flex: none; }
.tt-sub .ci { width: 22px; height: 22px; object-fit: contain; }
.tt-combo .cn { flex: 1; color: #ddd6c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-combo .cs { display: flex; gap: 4px; color: #fff; font-weight: 600; white-space: nowrap; }
.tt-combo .cs span { display: flex; align-items: center; gap: 1px; }
.tt-combo .cs img { width: 13px; }
.tt-combo.hi { background: rgba(200,226,10,.18); }
.tt-combo .ar { color: var(--muted); flex: none; }
.tt-combo .ci.it { width: 26px; height: 26px; background: rgba(0,0,0,.35); border-radius: 5px; padding: 1px; }

#tooltip2 { z-index: 31; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--lime); }
.chip.link { cursor: help; transition: box-shadow .12s; }
.chip.link:hover, .chip[data-tip]:hover { box-shadow: inset 0 0 0 1px var(--lime); color: #fff; }
.rb { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--c); flex: none; box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); }
.rb img { width: 70% !important; height: 70% !important; object-fit: contain; }
.rb.big { width: 48px; height: 48px; border: 2px solid #000; }
.trait .tn .rb { width: 20px; height: 20px; }
.ct .rb { width: 14px; height: 14px; }
.sp-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.sp { position: relative; width: 42px; height: 42px; border-radius: 8px; border: 2px solid var(--rc); background: url(assets/ui/slot_empty.png) center / cover; opacity: .45; cursor: help; }
.sp canvas { width: 100%; height: 100%; }
.sp.bench { opacity: .8; }
.sp.on { opacity: 1; background-image: url(assets/ui/slot.png); box-shadow: 0 0 0 1px #000, 0 0 8px rgba(200,226,10,.45); }
.sp:hover { opacity: 1; }
.sp i { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; }
.sp i img { width: 10px !important; filter: brightness(0); }
.sp .tier { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 9px; color: var(--gold); text-shadow: 0 0 2px #000, 0 0 2px #000; }
.pod-big { width: 48px; height: 48px; flex: none; border-radius: 10px; border: 2px solid #000; display: flex; align-items: center; justify-content: center; font-family: Rowdies, sans-serif; font-size: 26px; color: #121116; }

/* ---------------------------------------------------------------- écran de résultats de fin de partie */
#results { position: absolute; inset: 0; z-index: 46; background: rgba(8,8,11,.8); display: flex; align-items: center; justify-content: center; }
.rs-box { width: 780px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 30px; text-align: center;
  background: linear-gradient(180deg, #25242c, #18171d); border: 2px solid #000; box-shadow: 0 0 0 1px #4a4856; border-radius: 16px; animation: popIn .3s cubic-bezier(.2,1.4,.4,1); }
.rs-place { width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--pc); background: radial-gradient(circle, color-mix(in srgb, var(--pc) 35%, transparent), transparent 70%); }
.rs-place b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 56px; line-height: 1; color: var(--pc); }
.rs-place span { font-size: 13px; color: var(--muted); }
.rs-place.p1 { --pc: #ffbb1f; } .rs-place.p4 { --pc: #8fd14f; } .rs-place.p8 { --pc: #9a96a3; }
.rs-box h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 36px; }
.rs-sub { margin: 0; font-size: 13.5px; color: var(--muted); }
.rs-rank { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; background: rgba(0,0,0,.3); border: 1px solid #2d2c35; border-radius: 10px; text-align: left; }
.rs-rank img { width: 80px; }
.rs-rank > div { flex: 1; }
.rs-rank b { display: block; font-size: 20px; }
.rs-rank span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-rank .bar { margin-top: 6px; }
.rs-delta { font-family: Rowdies, sans-serif; font-size: 28px; }
.rs-delta.up { color: var(--lime); } .rs-delta.down { color: var(--red); }
.rs-promo { padding: 6px 16px; border-radius: 8px; font-weight: 700; }
.rs-promo.up { background: rgba(200,226,10,.18); color: var(--lime); } .rs-promo.down { background: rgba(229,73,59,.18); color: var(--red); }
.rs-rewards { display: flex; gap: 12px; width: 100%; }
.rs-rewards > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; background: rgba(0,0,0,.3); border: 1px solid #2d2c35; border-radius: 10px; }
.rs-rewards img { width: 30px; }
.rs-rewards b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 24px; }
.rs-rewards span { font-size: 12px; color: var(--muted); }
.rs-missions { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lime); }
.rs-missions img { width: 18px; }
.rs-btns { display: flex; gap: 12px; width: 100%; margin-top: 6px; }
.rs-btns .btn-grey { padding: 0 22px; }

/* ---------------------------------------------------------------- combat : panneau flottant (coin haut droit du plateau) */
#fight-hud { position: absolute; z-index: 6; left: 1090px; top: 136px; width: 270px; padding: 9px 11px; transition: top .25s ease, opacity .2s ease; background: linear-gradient(180deg, rgba(37,36,44,.94), rgba(26,25,32,.94)); }
#fight-hud.enter { animation: dockIn .28s cubic-bezier(.2,.8,.2,1); }
#fight-vs { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.2; margin-bottom: 7px; }
#fight-vs em { font-style: normal; color: var(--lime); }
.speed { display: flex; gap: 5px; }
.speed button { padding: 3px 10px; font-size: 12px; }
.hud-label { margin: 9px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lime); }
/* panneau de combat : onglets, lignes en icônes (étoiles sous le portrait), comparaison avec l'adversaire */
#fight-hud.wide { left: 830px; width: 530px; }
.hud-top { display: flex; align-items: flex-start; gap: 8px; }
.hud-top #fight-vs { flex: 1; margin-bottom: 6px; }
.hud-top .hud-min { width: 28px; height: 26px; padding: 0; font-size: 17px; font-weight: 700; line-height: 1; flex: none; }
#fight-hud.min .hud-tabs, #fight-hud.min .hud-cols, #fight-hud.min .hud-compare { display: none; }
#fight-hud.min .hud-top #fight-vs { margin-bottom: 0; }
#fight-hud .hud-ttl { display: none; }   /* titre « Récap » : interface v2 seulement (ui-v2-game.css) */
#fight-hud.min.wide { left: 1090px; width: 270px; }
.hud-last { font-family: Lexend, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.hud-last b { color: var(--lime); } .hud-last b.lose { color: var(--red); }
.hud-tabs { display: flex; gap: 4px; }
.hud-tabs button { flex: 1; padding: 4px 0; font-size: 11.5px; font-weight: 700; color: #cfc8b4; border: 1px solid #000; border-radius: 6px; background: linear-gradient(180deg, #34333d, #24232b); cursor: pointer; }
.hud-tabs button:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.hud-tabs button.on { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
.hud-cols { display: flex; gap: 14px; }
.hud-col { flex: 1; min-width: 0; }
.hud-col.foe .hud-label { color: #ff8a8a; }
#meters, #meters-foe { display: flex; flex-direction: column; gap: 3px; }
.mrow { display: flex; align-items: center; gap: 7px; height: 34px; transition: opacity .3s; }
.mrow.dead { opacity: .4; }
.micon { position: relative; width: 32px; height: 32px; flex: none; border-radius: 7px; border: 2px solid var(--rc, #4a4856); background: url(assets/ui/slot.png) center / cover; overflow: hidden; }
.micon canvas, .micon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.micon.cmd { border-color: var(--lime); }
.micon b { position: absolute; left: 0; right: 0; bottom: -1px; text-align: center; font-size: 8.5px; line-height: 1; color: var(--gold); text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; }
.mrow .mb { flex: 1; height: 9px; background: #0d0c11; border: 1px solid #000; border-radius: 4px; overflow: hidden; }
.mrow .mb i { display: block; height: 100%; transition: width .3s ease; }
.mrow .mb i.dmg { background: linear-gradient(180deg, #ff8a5a, #d0441c); }
.mrow .mb i.heal { background: linear-gradient(180deg, #7ff07a, #2fa83a); }
.mrow .mb i.taken { background: linear-gradient(180deg, #8fb4ff, #3d63c9); }
.mrow .mv { width: 42px; text-align: right; font-size: 12px; font-weight: 700; }
.hud-compare { width: 100%; margin-top: 8px; padding: 5px 0; font-size: 11.5px; font-weight: 700; color: #ffb3b3; border: 1px dashed rgba(255,120,120,.5); border-radius: 7px; background: rgba(229,73,59,.08); cursor: pointer; }
.hud-compare:hover { background: rgba(229,73,59,.18); }

/* ---------------------------------------------------------------- récapitulatif de fin de combat */
/* fin de combat : petite carte en haut à droite du plateau (l'arête gauche dit victoire ou défaite) */
#recap { position: absolute; z-index: 34; right: 242px; top: 66px; width: 290px; padding: 9px 12px 10px; cursor: pointer; color: #f1e8ff;
  background: var(--bn-ink); border: 0; border-radius: 12px; box-shadow: 0 0 0 3px var(--lime), 0 0 0 5px #000; animation: rcIn .42s var(--ease-pop); transition: opacity .2s ease; }
#recap.lose { box-shadow: 0 0 0 3px var(--red), 0 0 0 5px #000; }
#recap.out { animation: rcOut .26s ease-in forwards; }
@keyframes rcIn { 0% { opacity: 0; transform: translateX(48px) scale(.9,1.1); } 60% { opacity: 1; transform: translateX(-6px) scale(1.04,.96); } 100% { transform: none; } }
@keyframes rcOut { to { opacity: 0; transform: translateX(40px); } }
.rc-head { display: flex; align-items: baseline; gap: 8px; }
.rc-res { font: 700 19px/1.1 Lexend, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.rc-vs { flex: 1; min-width: 0; font-size: 12px; color: #f1e8ff; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-dmg { display: inline-block; padding: 0 7px; border-radius: 8px; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 16px; background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--bn-ink); animation: evStamp .3s var(--ease-pop) .2s both, evShake .26s linear .5s; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.rc-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #e6dfcc; }
.rc-chips > span { background: #2a1d44; animation: evPill .28s var(--ease-pop) calc(.2s + var(--i, 0) * 45ms) both; }
.rc-chips img { width: 16px; height: 16px; object-fit: contain; }
.rc-chips .loot img { width: 20px; height: 20px; }
.rc-chips > .up { background: var(--lime); color: var(--bn-ink); }
.rc-chips > .bad { background: var(--red); color: #fff; }
.rc-tac { margin-top: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.rc-tac b { font-family: Rowdies, sans-serif; font-weight: 400; color: #ffb31f; }
.rc-tac i { font-style: normal; margin: 0 5px; opacity: .5; }

/* ---------------------------------------------------------------- calques */
/* #help : le guide « Comment jouer ? » (js/guide.js), styles en fin de fichier */
#toast { position: absolute; z-index: 37; left: 230px; width: 1140px; top: 180px; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); pointer-events: none; }   /* sous le cadre des pods (et sous la timeline en combat) */
/* notifs : petites plaques sombres biseautées (style Esport), case d'icône et barre basse de la couleur du type ;
   elles entrent par la gauche (balayage), la plus récente en haut, et sortent vers la droite */
#toast, #m-toast { --u: 1px; --fmin: 12px; }
.ev-toast { position: relative; display: flex; align-items: stretch; min-height: calc(50 * var(--u)); max-width: calc(940 * var(--u)); --ts: calc(16 * var(--u));
  background: var(--ink); color: #fff; font: 600 max(var(--fmin), calc(20 * var(--u)))/1.25 Lexend, sans-serif;
  clip-path: polygon(var(--ts) 0, 100% 0, calc(100% - var(--ts)) 100%, 0 100%); animation: tkIn .44s var(--xo) both; }
.ev-toast.out { animation: tkOut .28s var(--xi) forwards; }
.ev-toast > b { display: flex; align-items: center; padding: calc(8 * var(--u)) calc(34 * var(--u)) calc(9 * var(--u)) calc(16 * var(--u)); font-weight: 600; }
.ev-toast > b img { width: 1em; height: 1em; margin: 0 .15em; vertical-align: -.15em; }
.tk-ic { flex: none; width: calc(60 * var(--u)); display: grid; place-items: center; background: linear-gradient(135deg, var(--c2), var(--c)); font-style: normal;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ts)) 100%, 0 100%); }
.tk-ic:has(> img) { background: var(--c3); }   /* image en couleur (kama…) : case sombre du type, l'image reste lisible */
.tk-ic > img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; margin-left: calc(-8 * var(--u)); animation: evPop .42s var(--qo) .14s both; }
.tk-ic > .ev-ico { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(-8 * var(--u)); animation: evPop .42s var(--qo) .14s both; }
.tk-n { align-self: center; margin: 0 calc(30 * var(--u)) 0 calc(-22 * var(--u)); font: 700 max(var(--fmin), calc(20 * var(--u)))/1 Lexend, sans-serif; font-style: normal; color: var(--c); }
.tk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--u)); background: var(--c); transform-origin: 0 50%; animation: evBarIn .52s var(--xo) .12s both; }
.ev-toast.k-err > b { animation: tkNudge .26s linear .38s both; }   /* refus : le texte se décale de 4 px, une fois */
@keyframes tkIn { from { transform: translateX(calc(-30 * var(--u))); clip-path: polygon(var(--ts) 0, var(--ts) 0, 0 100%, 0 100%); } to { transform: none; clip-path: polygon(var(--ts) 0, 100% 0, calc(100% - var(--ts)) 100%, 0 100%); } }
@keyframes tkOut { from { transform: none; clip-path: polygon(var(--ts) 0, 100% 0, calc(100% - var(--ts)) 100%, 0 100%); } to { transform: translateX(calc(30 * var(--u))); clip-path: polygon(100% 0, 100% 0, calc(100% - var(--ts)) 100%, calc(100% - var(--ts)) 100%); } }
@keyframes tkNudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 65% { transform: translateX(3px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* captures automatiques : pas d'animations d'interface */
body.noanim *, body.noanim *::before, body.noanim *::after { animation: none !important; transition: none !important; }

/* personnages : liste, scène, éditeur (gratuit) */
.ed-sec h4 { margin: 0 0 7px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lime); }
.btn-grey.sm { display: flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.btn-grey.sm img { width: 14px; }
/* personnages : onglets Apparence / Sort et évolutions, arbre des évolutions */
.ed-tabs { display: flex; gap: 6px; }
.ed-tabs button { flex: 1; padding: 7px 0; font-size: 13px; font-weight: 700; color: #cfc8b4; border: 1px solid #000; border-radius: 8px; background: linear-gradient(180deg, #34333d, #24232b); cursor: pointer; }
.ed-tabs button:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.ed-tabs button.on { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
.sp-tab { display: flex; flex-direction: column; gap: 9px; }
/* arbre du sort : 3 colonnes (base, niveau 6, niveau 12) reliées par des traits ; les 2 choix en bleu et rose */
.sp-tree { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; grid-template-rows: auto repeat(4, minmax(70px, auto)); column-gap: 0; row-gap: 6px; }
.sp-h { grid-row: 1; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lime); }
.sp-h.c1 { grid-column: 1; } .sp-h.c3 { grid-column: 3; } .sp-h.c5 { grid-column: 5; }
.sp-tree .sp-node { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid #3a3944; }
.sp-tree .sp-node b { display: block; font-size: 13px; color: #fff; line-height: 1.2; }
.sp-tree .sp-node p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.3; color: #ddd6c4; }
.sp-tree .base { grid-column: 1; grid-row: 2 / 6; align-self: center; border-color: var(--lime); }
.sp-tree .lv6.b1 { grid-column: 3; grid-row: 2 / 4; align-self: center; border-color: #5ab4ff; }
.sp-tree .lv6.b2 { grid-column: 3; grid-row: 4 / 6; align-self: center; border-color: #ff8fd8; }
.sp-tree .lv12.b1.t { grid-column: 5; grid-row: 2; } .sp-tree .lv12.b1.u { grid-column: 5; grid-row: 3; }
.sp-tree .lv12.b2.t { grid-column: 5; grid-row: 4; } .sp-tree .lv12.b2.u { grid-column: 5; grid-row: 5; }
.sp-tree .lv12.b1 { border-left: 3px solid #5ab4ff; } .sp-tree .lv12.b2 { border-left: 3px solid #ff8fd8; }
.sp-link { position: relative; }
.sp-link::before { content: ''; position: absolute; top: 25%; bottom: 25%; left: 50%; right: 0; border: 2px solid #6b6a78; border-right: none; border-radius: 6px 0 0 6px; }
.sp-link::after { content: ''; position: absolute; top: 50%; left: 0; width: 50%; border-top: 2px solid #6b6a78; }
.sp-link.l0 { grid-column: 2; grid-row: 2 / 6; }
.sp-link.r1 { grid-column: 4; grid-row: 2 / 4; } .sp-link.r1::before, .sp-link.r1::after { border-color: #5ab4ff; }
.sp-link.r2 { grid-column: 4; grid-row: 4 / 6; } .sp-link.r2::before, .sp-link.r2::after { border-color: #ff8fd8; }
img.spi { width: 34px; height: 34px; flex: none; border-radius: 8px; object-fit: contain; }
img.spi.big { width: 52px; height: 52px; border-radius: 11px; }
.tt-spell { display: flex; gap: 9px; align-items: flex-start; }
.tt-spell > div { flex: 1; min-width: 0; }
.tt-spell img.spi { width: 38px; height: 38px; margin-top: 2px; }
/* résistances des bulles : libellé au-dessus, 4 pastilles égales (vert = résiste, rouge = faible, gris = 0) */
.tt-resi { margin-top: 7px; padding-top: 6px; border-top: 1px dashed #3a3842; }
.tt-resi-l { display: block; margin-bottom: 4px; font-size: 10.5px; color: var(--muted); }
.tt-resi-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.chip.resi { justify-content: center; gap: 3px; height: 22px; padding: 0 5px; border: 0; border-radius: 11px; background: rgba(255,255,255,.07); color: #8f889c; font-size: 11.5px; font-weight: 700; line-height: 22px; white-space: nowrap; }
.chip.resi img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.chip.resi.zero img { opacity: .6; }
.chip.resi.up { background: rgba(126,214,72,.22); color: #b6f27e; }
.chip.resi.down { background: rgba(255,84,72,.22); color: #ff9d92; }
.evo-cur { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 760px; font-size: 13.5px; color: #c9c3dc; }
.evo-cur img.spi { width: 26px; height: 26px; }
.evo-cur em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8d86b0; }
.evo-cur b { color: #fff; font-size: 14px; }
.evo-pick { font-size: 15px; font-weight: 800; color: #fff27a; }
.evo-opt img.spi.big { margin-bottom: 2px; }
.sp-node { padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.04); }
.sp-node.main { background: rgba(255,255,255,.08); }
.sp-node em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; }
.sp-node b { display: block; font-size: 14px; color: #fff; }
.sp-node p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: #ddd6c4; }

/* boutique d'ogrines (test, gratuite) */
.cur { cursor: pointer; transition: box-shadow .15s; }
.cur:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.cur-plus { margin-left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); color: #1c2300; font-style: normal; font-weight: 800; font-size: 13px; line-height: 16px; text-align: center; }
.og-shop { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 760px; text-align: center; }
.og-shop h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 32px; }
.og-shop p { margin: 0; color: var(--muted); }
.og-wallet { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.og-wallet img { width: 26px; }
.og-wallet b { margin-right: 14px; }
.og-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.og-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px 12px; border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, rgba(47,211,107,.22), transparent 70%), url(assets/ui/slot.png) center / cover; border: 2px solid #1d6b46; transition: transform .15s, box-shadow .15s; }
.og-pack.kamas { background: radial-gradient(circle at 50% 35%, rgba(255,194,26,.22), transparent 70%), url(assets/ui/slot.png) center / cover; border-color: #7a5a10; }
.og-pack:hover { transform: translateY(-3px); box-shadow: 0 0 18px rgba(47,211,107,.35); }
.og-pack.kamas:hover { box-shadow: 0 0 18px rgba(255,194,26,.35); }
.og-pack img { width: 58px; height: 58px; object-fit: contain; }
.og-pack b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 26px; color: #fff; }
.og-pack span { font-size: 12px; color: var(--muted); }
.og-pack em { margin-top: 6px; padding: 3px 14px; border-radius: 12px; background: var(--lime); color: #1c2300; font-style: normal; font-weight: 800; font-size: 12.5px; }
.og-bonus { position: absolute; top: 8px; right: 8px; padding: 1px 7px; border-radius: 8px; background: #ff4fd8; color: #fff !important; font-weight: 800; font-size: 11px !important; }

/* première vague : marché fermé */

/* célébrations : grand message au-dessus du plateau */
/* ------------------------------------------------------------------ langage des événements (js/app-events.js) */
/* bannière, notifs, scènes (top 4, éliminé, top 1) et effets en place : mêmes couleurs, même grammaire (plaques biseautées, ruban) ; tout est plat
   (contours pleins box-shadow 0 0 0 Npx ; jamais de flou) */
:root { --bn-ink: #1a0d2e; --ease-pop: cubic-bezier(.2,1.4,.4,1); --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.55,0,.8,.2); --ease-fall: cubic-bezier(.5,0,1,.5);
  /* bannières et notifs (Esport + Ruban) : plaque quasi noire teintée violet, bande indigo, expo / quint, coupes à −16° */
  --ink: #15121d; --ink2: #1e1830; --strip: #170f3a; --xo: cubic-bezier(.16,1,.3,1); --xi: cubic-bezier(.7,0,.84,0); --qo: cubic-bezier(.22,1,.36,1); --io: cubic-bezier(.65,0,.35,1); --sk: -16deg; --usk: 16deg; }
.k-gold { --bn-c: #ffd21f; --bn-c2: #fff27a; }  .k-lime { --bn-c: #c8e20a; --bn-c2: #f4ff9a; }
.k-family { --bn-c: #6fd41a; --bn-c2: #d6ff5c; } .k-level, .k-info { --bn-c: #1aa3ff; --bn-c2: #a8f0ff; }
.k-legend { --bn-c: #e03bd0; --bn-c2: #ffb8f2; } .k-sudden, .k-net { --bn-c: #ff3b2f; --bn-c2: #ffb13a; }
.k-red, .k-err { --bn-c: #e5493b; --bn-c2: #ff9a8a; }
@keyframes evPill { 0% { transform: scale(.4,1.4); opacity: 0; } 60% { transform: scale(1.1,.9); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes evRise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes evLift { to { translate: 0 var(--lift, -24px); opacity: 0; } }   /* translate : garde le scale des scènes posées sur le plateau (téléphone) */
@keyframes evShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes evBump { 0% { transform: none; } 40% { transform: scale(1.18,.86); } 70% { transform: scale(.95,1.05); } 100% { transform: none; } }
@keyframes evPulse { from { box-shadow: 0 0 0 0 var(--rc, var(--bn-c)); } to { box-shadow: 0 0 0 10px transparent; } }
@keyframes evChip { 0% { transform: translate(-50%,-60%) scale(.5); opacity: 0; } 20% { transform: translate(-50%,-100%) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%,-180%); opacity: 0; } }
@keyframes evStamp { 0% { transform: scale(1.6) rotate(-6deg); opacity: 0; } 55% { transform: scale(.9,1.1); opacity: 1; } 100% { transform: none; opacity: 1; } }


/* éclats (étoiles cernées d'encre), effets en place */
.ev-bump { animation: evBump .26s var(--ease-pop); }
.ev-ring { animation: evPulse .52s var(--ease-out); }
.ev-chip { position: absolute; z-index: 61; pointer-events: none; padding: 1px 8px; border-radius: 10px; background: var(--bn-c); color: var(--bn-ink); font: 700 15px/1.2 Lexend, sans-serif;
  box-shadow: 0 0 0 2px var(--bn-ink); white-space: nowrap; animation: evChip .7s var(--ease-out) forwards; }
.ev-chip.k-red, .ev-chip.k-err { color: #fff; }
body.noanim .ev-chip { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ev-chip { display: none; }
  .ev-px, .ev-sw, .ev-str { display: none; }
  #ev-frame .ef-e, #ev-frame .ef-c, #ev-frame .ef-e::before, #ev-frame .ef-c::before { animation: none; }
  #ev-frame .ef-k, #ev-frame .ef-e::after { display: none; }
}

/* mort subite : contour enflammé à l'intérieur du plateau (rien ne cache le combat), dans la langue des plaques (pente 16°, encre, balayage, losanges).
   4 bandes (.ef-e, coupées à 45° aux bouts : onglets propres) sur une tuile de 347 px : 9 langues courbes penchées de 16° au rythme T s M s T M s M s
   (hautes 35 px, moyennes 28, petites 18, creux en U), corps rouge + un cœur décalé sous le vent (orange, jaune pour les hautes), encre 1,5 px dehors seulement,
   socle rouge de 8 px avec un filet jaune de 2 px en haut. Les hautes langues sont à part (::before) : elles seules respirent (×1,18 → 40 px), le socle reste fixe.
   Aux coins, une seule langue haute (1,15 ×) sur la diagonale (.ef-c). Entrée : chaque bande pousse (expo), un balayage blanc fait le tour (::after), gerbe aux coins.
   La bande du haut pousse du bas de la barre de la timeline (son socle passe sous la barre, --fe) ; au-dessus, un rebord de 6 px. Braises (.ef-k, posées par evFrame).
   --fw/--fh : taille du plateau ; --fk : échelle des flammes ; --fs : échelle du canvas ; .nobar (préparation, pas de barre) : les flammes partent du haut du plateau */
#ev-frame { --fw: 1140px; --fh: 654px; --fk: 1; --fs: 1; --ft: calc(70px * var(--fs)); --fe: calc(var(--ft) - 8px * var(--fk)); --fi: calc(var(--fh) - var(--fe)); --fl: calc(44px * var(--fk));
  --tw: calc(347px * var(--fk)); --th: calc(50px * var(--fk)); --rd: rgba(255, 59, 47, .12); --r0: rgba(255, 59, 47, 0); --fv: 60px; --rim: calc(6px * var(--fs));
  --ef1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 347 50' preserveAspectRatio='none'%3E%3Cpath fill='%23ff3b2f' stroke='%231a0d2e' stroke-width='3' stroke-linejoin='round' paint-order='stroke' d='M-80 48L-80 41L-72 41Q-65.7 41 -64.7 36C-66.4 28.3 -52.6 27.6 -49.1 22C-46.6 26.9 -40.2 29.7 -41.5 36Q-40.5 41 -32 41L-32 41Q-27.4 41 -26.4 36C-27.7 33.8 -18.8 33.6 -16 32C-14 33.4 -6.8 34.2 -7.9 36Q-6.9 41 0 41L48 41L48 41Q52.8 41 53.8 36C52.4 33.8 61.6 33.6 64.5 32C66.6 33.4 74.1 34.2 72.9 36Q73.9 41 81 41L81 41Q87.3 41 88.3 36C86.6 28.3 100.4 27.6 103.9 22C106.4 26.9 112.8 29.7 111.5 36Q112.5 41 121 41L121 41Q125.8 41 126.8 36C125.4 33.8 134.6 33.6 137.5 32C139.6 33.4 147.1 34.2 145.9 36Q146.9 41 154 41L202 41L202 41Q208.3 41 209.3 36C207.6 28.3 221.4 27.6 224.9 22C227.4 26.9 233.8 29.7 232.5 36Q233.5 41 242 41L242 41Q246.8 41 247.8 36C246.4 33.8 255.6 33.6 258.5 32C260.6 33.4 268.1 34.2 266.9 36Q267.9 41 275 41L275 41Q281.3 41 282.3 36C280.6 28.3 294.4 27.6 297.9 22C300.4 26.9 306.8 29.7 305.5 36Q306.5 41 315 41L315 41Q319.6 41 320.6 36C319.3 33.8 328.2 33.6 331 32C333 33.4 340.2 34.2 339.1 36Q340.1 41 347 41L395 41L395 41Q399.8 41 400.8 36C399.4 33.8 408.6 33.6 411.5 32C413.6 33.4 421.1 34.2 419.9 36Q420.9 41 428 41L427 41L427 48Z'/%3E%3Cpath fill='%23ff8a1f' d='M-55 42C-54.6 36 -49.5 33.4 -46.3 30C-45.7 34.2 -45.6 38.4 -44.6 42ZM-18.6 42C-18.3 39 -15.2 37.7 -12.7 36C-12.2 38.1 -11.1 40.2 -10.3 42ZM61.8 42C62.2 39 65.3 37.7 67.8 36C68.4 38.1 69.6 40.2 70.4 42ZM98 42C98.4 36 103.5 33.4 106.7 30C107.3 34.2 107.4 38.4 108.4 42ZM134.8 42C135.2 39 138.3 37.7 140.8 36C141.4 38.1 142.6 40.2 143.4 42ZM219 42C219.4 36 224.5 33.4 227.7 30C228.3 34.2 228.4 38.4 229.4 42ZM255.8 42C256.2 39 259.3 37.7 261.8 36C262.4 38.1 263.6 40.2 264.4 42ZM292 42C292.4 36 297.5 33.4 300.7 30C301.3 34.2 301.4 38.4 302.4 42ZM328.4 42C328.7 39 331.8 37.7 334.3 36C334.8 38.1 335.9 40.2 336.7 42ZM408.8 42C409.2 39 412.3 37.7 414.8 36C415.4 38.1 416.6 40.2 417.4 42Z'/%3E%3Cpath fill='%23ffd21f' d='M-1 42H348V44H-1Z'/%3E%3C/svg%3E");
  --ef2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 347 50' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%231a0d2e' stroke-width='3' stroke-linejoin='round' d='M0 41Q7.9 41 8.9 36C7 24.4 24.7 23.4 28.9 15C31.9 22.4 38.4 26.5 36.8 36Q37.8 41 48 41M154 41Q161.9 41 162.9 36C161 24.4 178.7 23.4 182.9 15C185.9 22.4 192.4 26.5 190.8 36Q191.8 41 202 41M347 41Q354.9 41 355.9 36C354 24.4 371.7 23.4 375.9 15C378.9 22.4 385.4 26.5 383.8 36Q384.8 41 395 41'/%3E%3Cpath fill='%23ff3b2f' d='M0 42L0 41Q7.9 41 8.9 36C7 24.4 24.7 23.4 28.9 15C31.9 22.4 38.4 26.5 36.8 36Q37.8 41 48 41L48 42ZM154 42L154 41Q161.9 41 162.9 36C161 24.4 178.7 23.4 182.9 15C185.9 22.4 192.4 26.5 190.8 36Q191.8 41 202 41L202 42ZM347 42L347 41Q354.9 41 355.9 36C354 24.4 371.7 23.4 375.9 15C378.9 22.4 385.4 26.5 383.8 36Q384.8 41 395 41L395 42Z'/%3E%3Cpath fill='%23ffd21f' d='M20.6 42C21.1 33.9 27.8 30.3 31.5 25.8C32.3 31.5 31.9 37.1 33.2 42ZM174.6 42C175.1 33.9 181.8 30.3 185.5 25.8C186.3 31.5 185.9 37.1 187.2 42ZM367.6 42C368.1 33.9 374.8 30.3 378.5 25.8C379.3 31.5 378.9 37.1 380.2 42Z'/%3E%3C/svg%3E");
  --efm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 347 50' preserveAspectRatio='none'%3E%3Cpath d='M-80 48L-80 41L-72 41Q-65.7 41 -64.7 36C-66.4 28.3 -52.6 27.6 -49.1 22C-46.6 26.9 -40.2 29.7 -41.5 36Q-40.5 41 -32 41L-32 41Q-27.4 41 -26.4 36C-27.7 33.8 -18.8 33.6 -16 32C-14 33.4 -6.8 34.2 -7.9 36Q-6.9 41 0 41L48 41L48 41Q52.8 41 53.8 36C52.4 33.8 61.6 33.6 64.5 32C66.6 33.4 74.1 34.2 72.9 36Q73.9 41 81 41L81 41Q87.3 41 88.3 36C86.6 28.3 100.4 27.6 103.9 22C106.4 26.9 112.8 29.7 111.5 36Q112.5 41 121 41L121 41Q125.8 41 126.8 36C125.4 33.8 134.6 33.6 137.5 32C139.6 33.4 147.1 34.2 145.9 36Q146.9 41 154 41L202 41L202 41Q208.3 41 209.3 36C207.6 28.3 221.4 27.6 224.9 22C227.4 26.9 233.8 29.7 232.5 36Q233.5 41 242 41L242 41Q246.8 41 247.8 36C246.4 33.8 255.6 33.6 258.5 32C260.6 33.4 268.1 34.2 266.9 36Q267.9 41 275 41L275 41Q281.3 41 282.3 36C280.6 28.3 294.4 27.6 297.9 22C300.4 26.9 306.8 29.7 305.5 36Q306.5 41 315 41L315 41Q319.6 41 320.6 36C319.3 33.8 328.2 33.6 331 32C333 33.4 340.2 34.2 339.1 36Q340.1 41 347 41L395 41L395 41Q399.8 41 400.8 36C399.4 33.8 408.6 33.6 411.5 32C413.6 33.4 421.1 34.2 419.9 36Q420.9 41 428 41L427 41L427 48ZM0 42L0 41Q7.9 41 8.9 36C7 24.4 24.7 23.4 28.9 15C31.9 22.4 38.4 26.5 36.8 36Q37.8 41 48 41L48 42ZM154 42L154 41Q161.9 41 162.9 36C161 24.4 178.7 23.4 182.9 15C185.9 22.4 192.4 26.5 190.8 36Q191.8 41 202 41L202 42ZM347 42L347 41Q354.9 41 355.9 36C354 24.4 371.7 23.4 375.9 15C378.9 22.4 385.4 26.5 383.8 36Q384.8 41 395 41L395 42Z'/%3E%3C/svg%3E");
  --efc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%231a0d2e' stroke-width='3' stroke-linejoin='round' d='M18 36.7C16.3 24.2 31.6 23.1 35.2 14C37.9 21.9 43.4 26.5 42 36.7'/%3E%3Cpath fill='%23ff3b2f' d='M18 62L18 36.7C16.3 24.2 31.6 23.1 35.2 14C37.9 21.9 43.4 26.5 42 36.7L42 62Z'/%3E%3Cpath fill='%23ffd21f' d='M28.1 46.8C28.5 38.3 33.8 33.7 37.1 27.9C37.7 35.2 37.8 42.5 38.9 40.6L30 48.7Z'/%3E%3C/svg%3E");
  --efy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffd21f' d='M17 35.7L30 48.7L43 35.7L43 38.5L30 51.5L17 38.5Z'/%3E%3C/svg%3E");
  position: absolute; z-index: 5; left: 230px; top: 56px; width: var(--fw); height: var(--fh); overflow: hidden; pointer-events: none; display: none;   /* z 5 : sous le panneau du combat */
  /* rebord rouge de 6 px au-dessus et à côté de la barre, puis voile rouge plat (12 %, nul à 60 px : l'herbe reste verte) */
  background: linear-gradient(#ff3b2f 0 0) 0 0 / 100% var(--rim) no-repeat, linear-gradient(#ff3b2f 0 0) 0 0 / var(--rim) var(--fe) no-repeat,
    linear-gradient(#ff3b2f 0 0) 100% 0 / var(--rim) var(--fe) no-repeat,
    linear-gradient(180deg, var(--r0) var(--ft), var(--rd) var(--ft), var(--r0) calc(var(--ft) + var(--fv))), linear-gradient(0deg, var(--rd), var(--r0) var(--fv)), linear-gradient(90deg, var(--rd), var(--r0) var(--fv)), linear-gradient(270deg, var(--rd), var(--r0) var(--fv));
  /* la barre de la timeline (dessinée dans le canvas : 10, 8, largeur − 20, 62) et la plaque « MORT SUBITE ×2 » passent devant */
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) calc(10px * var(--fs)) calc(8px * var(--fs)) / calc(var(--fw) - 20px * var(--fs)) calc(62px * var(--fs)) no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude; }
#ev-frame.on { display: block; }
#ev-frame.nobar { --ft: 0px; --fe: 0px;   /* sans barre : le bandeau d'information de la préparation (canvas : centré, y 12, --pw × 34, posé par view.js) et l'aide souris (12, 62, 206 × 130 ; --hw 0 sur téléphone) passent devant */
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 50% calc(12px * var(--fs)) / calc(var(--pw, 0px) * var(--fs)) calc(34px * var(--fs)) no-repeat,
    linear-gradient(#000 0 0) calc(12px * var(--fs)) calc(62px * var(--fs)) / calc(var(--hw, 206px) * var(--fs)) calc(130px * var(--fs)) no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude; }
#ev-frame .ef-e { position: absolute; height: var(--fl); transform-origin: 50% 100%; clip-path: polygon(0 100%, var(--fl) 0, calc(100% - var(--fl)) 0, 100% 100%);
  background: var(--ef1) 0 100% / var(--tw) var(--th) repeat-x, linear-gradient(#ff3b2f 0 0) 0 100% / 100% calc(4px * var(--fk)) no-repeat;
  /* le bas du socle à part : une tuile pleine jusqu'au bord bave en haut (filet rouge) */
  animation: efR 5s linear var(--dl) infinite, efGrow .45s cubic-bezier(.16, 1, .3, 1) var(--st) both; }
#ev-frame .ef-e::before { content: ''; position: absolute; inset: 0; background: var(--ef2) 0 100% / var(--tw) var(--th) repeat-x;   /* les hautes langues : elles seules respirent, autour du haut du socle */
  transform-origin: 50% calc(100% - 8px * var(--fk)); animation: efR 5s linear var(--dl) infinite, efPulse 1.4s cubic-bezier(.45, 0, .55, 1) .6s infinite alternate; }
#ev-frame .ef-e::after { content: ''; position: absolute; inset: 0;   /* le balayage, masqué par la silhouette des flammes */
  -webkit-mask: var(--efm) 0 100% / var(--tw) var(--th) repeat-x; mask: var(--efm) 0 100% / var(--tw) var(--th) repeat-x;
  background: linear-gradient(74deg, transparent 20%, rgba(255, 255, 255, .35) 20% 80%, transparent 80%) calc(0% - 100px) 0 / 100px 100% no-repeat;
  animation: efM 5s linear var(--dl) infinite, efSw var(--sd) linear var(--sw) both; }
/* le feu tourne : bas → droite, droite ↑, haut ←, gauche ↓ ; le balayage suit le même chemin (départ coin bas-gauche) */
#ev-frame .ef-e.b { left: 0; top: calc(var(--fh) - var(--fl)); width: var(--fw); --st: 0ms; --dl: 0s; --sw: .1s; --sd: .19s; }
#ev-frame .ef-e.l { left: calc(var(--fi) / -2); top: calc(var(--fe) + var(--fi) / 2 - var(--fl)); width: var(--fi); rotate: 90deg; --st: 50ms; --dl: -.7s; --sw: .58s; --sd: .1s; }
#ev-frame .ef-e.r { left: calc(var(--fw) - var(--fi) / 2); top: calc(var(--fe) + var(--fi) / 2 - var(--fl)); width: var(--fi); rotate: -90deg; --st: 100ms; --dl: -1.3s; --sw: .29s; --sd: .1s; }
#ev-frame .ef-e.t { left: 0; top: calc(var(--fe) - var(--fl)); width: var(--fw); rotate: 180deg; --st: 150ms; --dl: -2.1s; --sw: .39s; --sd: .19s; }
/* langue d'angle : une seule, sur la diagonale, 1,15 × la plus haute, même famille ; elle respire autour du haut du socle (::before), le filet jaune du socle refait par-dessus (::after) */
#ev-frame .ef-c { position: absolute; width: calc(60px * var(--fk)); height: calc(60px * var(--fk)); margin: calc(-60px * var(--fk)) 0 0 calc(-30px * var(--fk)); transform-origin: 50% 100%;
  animation: efGrow .45s cubic-bezier(.16, 1, .3, 1) var(--st) both; }
#ev-frame .ef-c::before, #ev-frame .ef-c::after { content: ''; position: absolute; inset: 0; background: var(--efc) 0 0 / 100% 100% no-repeat; }
#ev-frame .ef-c::before { transform-origin: 50% 81.2%; animation: efPulse 1.4s cubic-bezier(.45, 0, .55, 1) .6s infinite alternate; }
#ev-frame .ef-c::after { background-image: var(--efy); }
#ev-frame .ef-c.bl { left: 0; top: var(--fh); rotate: 45deg; --st: 0ms; }
#ev-frame .ef-c.br { left: var(--fw); top: var(--fh); rotate: -45deg; --st: 50ms; }
#ev-frame .ef-c.tr { left: var(--fw); top: var(--fe); rotate: -135deg; --st: 100ms; }
#ev-frame .ef-c.tl { left: 0; top: var(--fe); rotate: 135deg; --st: 150ms; }
/* braises (losanges pleins, sans encre, qui montent des pointes des hautes langues puis rapetissent et s'éteignent) et gerbe d'entrée aux coins : posées par evFrame (left/top en %, --dx/--dy/--t/--d) */
#ev-frame .ef-k { position: absolute; inset: 0; }
#ev-frame .ef-k i { position: absolute; width: var(--z); height: var(--z); margin: calc(var(--z) / -2) 0 0 calc(var(--z) / -2); background: var(--c); opacity: 0;
  animation: efEm var(--t) linear var(--d) infinite; }
#ev-frame .ef-k i.sp { animation: efEm .6s linear var(--d) both; }
@keyframes efGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes efPulse { from { transform: scaleY(1); } to { transform: scaleY(1.18); } }
@keyframes efR { to { background-position-x: var(--tw), 0; } }
@keyframes efM { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: var(--tw) 100%; mask-position: var(--tw) 100%; } }
@keyframes efSw { from { background-position-x: calc(0% - 100px); } to { background-position-x: calc(100% + 100px); } }
@keyframes efEm {   /* linéaire, la décélération est dans les paliers : la braise reste pleine à mi-course puis rapetit et s'éteint */
  0% { transform: translate(0, 0) rotate(45deg) scale(1); opacity: 0; }
  8% { transform: translate(calc(var(--dx) * .22), calc(var(--dy) * .22)) rotate(45deg) scale(1); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .66), calc(var(--dy) * .66)) rotate(45deg) scale(.85); opacity: 1; }
  75% { transform: translate(calc(var(--dx) * .9), calc(var(--dy) * .9)) rotate(45deg) scale(.45); opacity: .8; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(45deg) scale(0); opacity: 0; } }
body.noanim #ev-frame .ef-e, body.noanim #ev-frame .ef-c, body.noanim #ev-frame .ef-e::before, body.noanim #ev-frame .ef-c::before { animation: none; }   /* l'état final d'un coup */
body.noanim #ev-frame .ef-k, body.noanim #ev-frame .ef-e::after { display: none; }
#game.bn-on #fight-hud { opacity: .35; }


/* ------------------------------------------------------------------ bannières : style « Esport + Ruban » (app-events.js)
   une seule grammaire : coupes à −16°, Lexend 700 en capitales dont l'interlettrage part large et se resserre (transform),
   expo à l'entrée et à la sortie, rebond ≤ 4 %, un seul reflet diagonal, traits d'accent qui s'allongent, éclats nets en
   losange de 3-4 px ; à plat (ni flou ni ombre portée, contours pleins 0 0 0 Npx). Tout est en multiples de --u ; la
   sortie part du délai --out compté depuis la naissance (posé par showBanner). */
.banner { position: absolute; z-index: 36; left: 230px; width: 1140px; top: 243px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
  --u: 1px; --fmin: 12px; --out: 2020ms; --dur: 2400ms; color: #fff; font-family: Lexend, sans-serif; }   /* centré sur le plateau (y 383) */
/* couleurs par type : --c franche, --c2 claire, --cd bande intérieure, --c3 fond profond des tuiles */
.banner, .banner.gold, .kc-gold, .ev-toast.k-gold { --c: #ffd21f; --c2: #fff08a; --cd: #e8590c; --c3: #5c1a00; }
.banner.lime, .kc-lime, .ev-toast.k-lime { --c: #c8e20a; --c2: #ecff6a; --cd: #7c9400; --c3: #3d4a00; }
.banner.family, .kc-family, .ev-toast.k-family { --c: #6fd41a; --c2: #c4f56a; --cd: #13942f; --c3: #08471f; }
.banner.level, .kc-level, .ev-toast.k-info, .ev-toast.k-level { --c: #1aa3ff; --c2: #8fd8ff; --cd: #0a4fd8; --c3: #0b1f7a; }
.banner.legend, .kc-legend, .ev-toast.k-legend { --c: #e03bd0; --c2: #ff8af0; --cd: #7a1fd0; --c3: #2e0f72; }
.banner.sudden, .kc-sudden, .ev-toast.k-net { --c: #ff3b2f; --c2: #ff8a5c; --cd: #b8001f; --c3: #4d0016; }
.banner.red, .kc-red, .ev-toast.k-err { --c: #e5493b; --c2: #ff8a7a; --cd: #a3121f; --c3: #5a0d12; }
.ev-ico { display: block; background: var(--ink); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* le titre lu d'un bloc (lecteurs d'écran) */

/* fin ruban : traverse le plateau d'abord, rayures qui défilent dans deux fenêtres aux extrémités ; sort vers l'autre côté */
.ev-rb { position: absolute; left: 0; right: 0; top: 50%; height: calc(14 * var(--u)); margin-top: calc(-7 * var(--u)); background: var(--c); overflow: hidden;
  animation: bnWipeIn .46s var(--xo) both, bnWipeOut .32s var(--xi) calc(var(--out) + 60ms) forwards; }
.ev-rbl { position: absolute; left: 4%; right: 4%; top: 50%; height: calc(3 * var(--u)); margin-top: calc(-19 * var(--u)); background: var(--c2);
  animation: bnWipeIn .5s var(--xo) .05s both, bnWipeOut .3s var(--xi) calc(var(--out) + 20ms) forwards; }
.ev-strw { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #000 0 20%, transparent 20% 80%, #000 80%); mask-image: linear-gradient(90deg, #000 0 20%, transparent 20% 80%, #000 80%); }
.ev-str { position: absolute; top: 0; bottom: 0; left: calc(-80 * var(--u)); right: calc(-80 * var(--u)); --sp: calc(22 * var(--u));
  background: repeating-linear-gradient(90deg, var(--cd) 0 calc(8 * var(--u)), transparent 0 var(--sp)); animation: bnStr .9s linear infinite; }
.ev-rb .ev-str { transform: skewX(var(--sk)); }

/* plaque sombre (Esport) : s'ouvre en ligne puis en hauteur, case d'icône ou tuile à gauche, barre basse de la couleur du type */
.ev-drift { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: calc(50 * var(--u)); animation: bnDrift var(--dur) linear both; }
.ev-row { position: relative; display: flex; align-items: center; }
.ev-row.has-emb { padding-left: calc(86 * var(--u)); }
.ev-plate { position: relative; display: flex; align-items: center; height: calc(104 * var(--u)); overflow: hidden; --sl: calc(30 * var(--u));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, var(--ink)) 0%, var(--ink) 38%, var(--ink2) 100%);
  clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%);
  animation: bnPlateIn .56s linear .14s both, bnPlateOut .34s var(--xi) var(--out) forwards; }
.has-emb .ev-plate { padding-left: calc(46 * var(--u)); }
.ev-fl { position: absolute; inset: 0; background: var(--c); opacity: 0; animation: bnFlash .62s linear .14s both; }
.ev-cell { position: relative; flex: none; width: calc(124 * var(--u)); height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c2), var(--c));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); }
.ev-cell .ev-ico { width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin-left: calc(-14 * var(--u)); animation: evPop .52s var(--qo) .4s both; }
.ev-txt { position: relative; padding: 0 calc(68 * var(--u)) 0 calc(26 * var(--u)); }
.ev-title { position: relative; display: flex; align-items: center; white-space: nowrap; font: 700 max(var(--fmin), calc(56 * var(--u) * var(--fit, 1)))/1 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.ev-ls { display: inline-flex; white-space: nowrap; }
.ev-l { display: inline-block; font-style: normal; animation: bnTrk .9s var(--xo) .29s both; }
.ev-stars { display: inline-flex; gap: .06em; margin-left: .3em; }
.ev-star { width: .8em; height: .8em; background: #ffd21f; -webkit-mask: url(dofus/assets/ui/ic/starFilled.png) center / contain no-repeat; mask: url(dofus/assets/ui/ic/starFilled.png) center / contain no-repeat;
  animation: bnStarIn .42s var(--qo) calc(.76s + var(--i) * 80ms) both; }
.ev-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(5 * var(--u)); background: var(--c); transform-origin: 0 50%; animation: evBarIn .64s var(--xo) .38s both; }
/* le reflet : deux aplats blancs translucides à bords nets, une seule traversée */
.ev-sw { position: absolute; inset: 0; transform: translateX(110%); animation: bnSweep .76s var(--io) .7s both;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.2) 40% 47%, transparent 47% 50%, rgba(255,255,255,.12) 50% 52%, transparent 52%); }
.ev-ln { position: absolute; height: calc(3 * var(--u)); width: calc(150 * var(--u)); background: var(--c2);
  animation: bnLnIn .7s var(--xo) .32s both, bnLnOut .26s var(--xi) var(--out) forwards; }
.ev-ln.l { right: calc(100% + 14 * var(--u)); bottom: calc(24 * var(--u)); transform-origin: 100% 50%; }
.ev-ln.r { left: calc(100% + 14 * var(--u)); top: calc(24 * var(--u)); transform-origin: 0 50%; }
.ev-ln::after { content: ''; position: absolute; height: calc(1 * var(--u)); width: 55%; background: var(--c); }
.ev-ln.l::after { right: 0; top: calc(-6 * var(--u)); } .ev-ln.r::after { left: 0; top: calc(8 * var(--u)); }
.ev-px { position: absolute; inset: 0; pointer-events: none; }
.ev-px i { position: absolute; top: 50%; width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); background: var(--pc); opacity: 0; transform: rotate(45deg); animation: bnPx .9s var(--qo) var(--pd) forwards; }
/* tuile coupée comme le ruban (relique, famille, fusion, sort, dieu) : la vraie image dedans, un sprite peut dépasser */
.ev-emb { position: absolute; z-index: 2; left: 0; top: 50%; width: calc(118 * var(--u)); height: calc(146 * var(--u)); margin-top: calc(-73 * var(--u));
  animation: bnEmbIn .5s var(--xo) .2s both, bnClipOut .28s var(--xi) var(--out) forwards; }
.ev-emb-bg, .ev-pf > i { position: absolute; inset: 0; background: var(--c3); box-shadow: 0 0 0 calc(5 * var(--u)) var(--c), 0 0 0 calc(9 * var(--u)) var(--ink); transform: skewX(var(--sk)); }
#banner .ev-emb > img, #banner .ev-emb > canvas { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: calc(84 * var(--u)); height: calc(84 * var(--u)); object-fit: contain; border-radius: 0;
  animation: evPop .44s var(--xo) .32s both; }
#banner .ev-emb.relic > img { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
#banner .ev-emb.god > img { width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
#banner .ev-emb.spell > img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(12 * var(--u)); }
#banner .ev-emb.spr > canvas { left: 50%; right: auto; top: auto; bottom: calc(4 * var(--u)); width: calc(176 * var(--u)); height: calc(176 * var(--u)); margin: 0 0 0 calc(-88 * var(--u)); }

/* sous-titre : bande indigo biseautée, puce en losange de la couleur du type */
#banner .bn-sub, .sct .bn-sub { position: relative; z-index: 3; display: flex; align-items: center; height: calc(40 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0 calc(26 * var(--u)); border-radius: 0;
  background: var(--strip); color: #fff; font: 600 max(var(--fmin), calc(19 * var(--u)))/1 Lexend, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  --sx: calc(56 * var(--u)); translate: var(--sx) 0; transform: skewX(var(--sk)); animation: bnSubIn .52s var(--xo) .56s both, bnClipOut .24s var(--xi) calc(var(--out) - 60ms) forwards; }
#banner .bn-sub > span, .sct .bn-sub > span { display: flex; align-items: center; gap: .6em; transform: skewX(var(--usk)); animation: bnSubTx .7s var(--xo) .58s both; }
#banner .bn-sub em, .sct .bn-sub em { display: inline-flex; font-style: normal; color: #ffd21f; }
#banner .bn-sub svg { width: .95em; height: .95em; }
.ev-dot { flex: none; width: .5em; height: .5em; background: var(--c); transform: rotate(45deg); }

/* grands moments : le ruban entier (bande de la couleur, bande intérieure plus sombre, rayures dans les fenêtres) */
.ev-big { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
#banner .ev-big .bn-sub { --sx: 0px; margin-top: calc(22 * var(--u)); }
.ev-hd { position: relative; z-index: 3; height: calc(48 * var(--u)); padding: 0 calc(34 * var(--u)); display: flex; align-items: center; background: var(--strip);
  box-shadow: 0 0 0 calc(4 * var(--u)) #ffd21f; transform: skewX(var(--sk)); animation: bnSubIn .5s var(--xo) .04s both, bnClipOut .3s var(--xi) var(--out) forwards; }
.ev-hd span { transform: skewX(var(--usk)); color: #ffd21f; font: 700 max(var(--fmin), calc(28 * var(--u)))/1 Lexend, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ev-band { position: relative; width: 100%; height: calc(116 * var(--u)); margin-top: calc(30 * var(--u)); clip-path: inset(-80px 0); }
.ev-half { position: absolute; top: 0; bottom: 0; background: var(--c); transform: skewX(var(--sk)); overflow: hidden; }
.ev-half.F { left: 2%; right: 2%; animation: bnWipeIn .46s var(--xo) .06s both, bnWipeOut .32s var(--xi) calc(var(--out) + 40ms) forwards; }
.ev-half.L { left: 2%; right: 49.6%; animation: bnWipeIn .44s var(--xo) .06s both, bnWipeBack .32s var(--xi) calc(var(--out) + 40ms) forwards; }
.ev-half.R { left: 49.6%; right: 2%; animation: bnWipeInR .44s var(--xo) .06s both, bnWipeOut .32s var(--xi) calc(var(--out) + 40ms) forwards; }
.ev-in { position: absolute; left: 0; right: 0; top: calc(16 * var(--u)); bottom: calc(16 * var(--u)); background: var(--cd); overflow: hidden; }
.ev-in .ev-str { --sp: calc(40 * var(--u)); background: repeating-linear-gradient(90deg, var(--c) 0 calc(10 * var(--u)), transparent 0 var(--sp)); animation-duration: 1.2s; }
.ev-half.L .ev-strw { -webkit-mask-image: linear-gradient(90deg, #000 0 24%, transparent 24%); mask-image: linear-gradient(90deg, #000 0 24%, transparent 24%); }
.ev-half.R .ev-strw { -webkit-mask-image: linear-gradient(90deg, transparent 0 76%, #000 76%); mask-image: linear-gradient(90deg, transparent 0 76%, #000 76%); }
.ev-half.R .ev-str { animation-direction: reverse; }
.ev-half .ev-sw { animation-delay: .5s; }
.ev-btitle { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: flex; white-space: nowrap; color: #fff; text-transform: uppercase; letter-spacing: .03em;
  font: 700 max(var(--fmin), calc(44 * var(--u) * var(--fit, 1)))/1 Lexend, sans-serif; animation: bnClipOut .32s var(--xi) calc(var(--out) + 20ms) forwards; }
/* Défi (préparation) : bande courte « Choisis ton adversaire » */
.prep .ev-band { width: 80%; height: calc(96 * var(--u)); }
.prep .ev-btitle { font-size: max(var(--fmin), calc(36 * var(--u) * var(--fit, 1))); }
.prep .ev-strw { -webkit-mask-image: linear-gradient(90deg, #000 0 13%, transparent 13% 87%, #000 87%); mask-image: linear-gradient(90deg, #000 0 13%, transparent 13% 87%, #000 87%); }
/* Défi révélé : toi en bleu à gauche, ceux qui t'ont défié en rouge à droite, losange or aux épées croisées au milieu */
.ev-side { position: absolute; top: calc(-18 * var(--u)); bottom: calc(-18 * var(--u)); width: 50%; display: flex; align-items: center; gap: calc(22 * var(--u)); }
.ev-side.L { left: 0; padding: 0 calc(78 * var(--u)) 0 calc(4% + 14 * var(--u)); animation: bnSideL .44s var(--xo) .1s both, bnClipBack .32s var(--xi) calc(var(--out) + 20ms) forwards; }
.ev-side.R { right: 0; justify-content: flex-end; padding: 0 calc(4% + 14 * var(--u)) 0 calc(78 * var(--u)); animation: bnSideR .44s var(--xo) .1s both, bnClipOut .32s var(--xi) calc(var(--out) + 20ms) forwards; }
.ev-pf { position: relative; flex: none; width: calc(108 * var(--u)); height: calc(142 * var(--u)); animation: bnEmbIn .5s var(--xo) .16s both; }
.ev-pf > i { box-shadow: 0 0 0 calc(5 * var(--u)) var(--c), 0 0 0 calc(9 * var(--u)) var(--c3); }
.ev-pf > img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: calc(100 * var(--u)); height: calc(104 * var(--u)); object-fit: contain; }
.ev-side.R .ev-pf { animation-name: bnEmbInR; animation-delay: .3s; }
.ev-side.R .ev-pf + .ev-pf { margin-left: calc(-40 * var(--u)); animation-delay: .22s; }
.ev-side.R .ev-pf + .ev-pf + .ev-pf { animation-delay: .14s; }
.ev-who { min-width: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); white-space: nowrap; animation: bnSlide .6s var(--xo) .14s both; }
.ev-side.R .ev-who { align-items: flex-end; text-align: right; --sd: 1; }
.ev-who b { max-width: 100%; overflow: hidden; font: 700 max(var(--fmin), calc(42 * var(--u)))/1.08 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.ev-who.many { gap: calc(3 * var(--u)); } .ev-who.many b { font-size: max(var(--fmin), calc(27 * var(--u))); }
.n3 .ev-side.R { gap: calc(16 * var(--u)); } .n3 .ev-side.R .ev-pf { width: calc(92 * var(--u)); height: calc(124 * var(--u)); }   /* trois défieurs : tuiles plus petites */
.n3 .ev-side.R .ev-pf + .ev-pf { margin-left: calc(-34 * var(--u)); } .n3 .ev-side.R .ev-pf > img { width: calc(86 * var(--u)); height: calc(90 * var(--u)); }
.n3 .ev-who.many b { font-size: max(var(--fmin), calc(22 * var(--u))); }
.ev-who small { font: 600 max(var(--fmin), calc(22 * var(--u)))/1 Lexend, sans-serif; color: var(--c2); }
.ev-who .wrap { white-space: normal; overflow-wrap: anywhere; line-height: 1.04; }   /* fitNames : nom trop long même à 12 px, deux lignes plutôt que « … » */
.ev-vs { position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0; animation: bnVsOut .26s var(--xi) var(--out) forwards; }
.ev-vs > i { position: absolute; left: calc(-46 * var(--u)); top: calc(-46 * var(--u)); width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
.ev-vs-bg { background: var(--strip); box-shadow: 0 0 0 calc(5 * var(--u)) #ffd21f, 0 0 0 calc(10 * var(--u)) var(--strip); transform: rotate(45deg); animation: bnVsIn .46s var(--xo) .3s both; }
.ev-vs-ring { border: calc(4 * var(--u)) solid #fff; opacity: 0; transform: rotate(45deg); animation: bnRing .5s var(--xo) .42s forwards; }
.ev-vs > .ev-vs-ic { left: calc(-29 * var(--u)); top: calc(-29 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u)); background: #ffd21f;
  -webkit-mask: url(dofus/assets/ui/ic/crossedSwords.png) center / contain no-repeat; mask: url(dofus/assets/ui/ic/crossedSwords.png) center / contain no-repeat; animation: evPop .4s var(--xo) .38s both; }
body.noanim .ev-px, body.noanim .ev-sw, body.noanim .ev-fl { display: none; }

@keyframes bnWipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes bnWipeInR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes bnWipeOut { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes bnWipeBack { from { clip-path: inset(0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes bnSideL { from { clip-path: inset(-80px 100% -80px -80px); } to { clip-path: inset(-80px); } }
@keyframes bnSideR { from { clip-path: inset(-80px -80px -80px 100%); } to { clip-path: inset(-80px); } }
@keyframes bnClipOut { from { clip-path: inset(-80px); } to { clip-path: inset(-80px -80px -80px 100%); } }
@keyframes bnClipBack { from { clip-path: inset(-80px); } to { clip-path: inset(-80px 100% -80px -80px); } }
@keyframes bnStr { from { translate: 0 0; } to { translate: var(--sp) 0; } }
@keyframes bnDrift { from { translate: calc(8 * var(--u)) 0; } to { translate: calc(-8 * var(--u)) 0; } }
@keyframes bnPlateIn {
  0% { clip-path: polygon(50% calc(50% - 2 * var(--u)), 50% calc(50% - 2 * var(--u)), 50% calc(50% + 2 * var(--u)), 50% calc(50% + 2 * var(--u))); animation-timing-function: var(--xo); }
  36% { clip-path: polygon(var(--sl) calc(50% - 2 * var(--u)), 100% calc(50% - 2 * var(--u)), calc(100% - var(--sl)) calc(50% + 2 * var(--u)), 0 calc(50% + 2 * var(--u))); animation-timing-function: var(--xo); }
  100% { clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); } }
@keyframes bnPlateOut { from { clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); } to { clip-path: polygon(100% 0, 100% 0, calc(100% - var(--sl)) 100%, calc(100% - var(--sl)) 100%); } }
@keyframes bnFlash { 0%, 34% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bnTrk { 0% { transform: translateX(calc(var(--d) * .3em)); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bnStarIn { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes evBarIn { from { transform: scaleX(0); } to { transform: none; } }
@keyframes evPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bnSweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes bnLnIn { from { transform: scaleX(0); } to { transform: none; } }
@keyframes bnLnOut { to { transform: scaleX(0); } }
@keyframes bnPx { 0% { opacity: 1; transform: translate(0, 0) rotate(45deg); } 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(45deg) scale(.5); } }
@keyframes bnSubIn { from { translate: calc(var(--sx, 0px) - 40 * var(--u)) 0; clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px); } }
@keyframes bnSubTx { from { transform: translateX(calc(-24 * var(--u))) skewX(var(--usk)); opacity: 0; } to { transform: skewX(var(--usk)); opacity: 1; } }
@keyframes bnEmbIn { 0% { transform: translateX(calc(-34 * var(--u))) scale(.86); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bnEmbInR { 0% { transform: translateX(calc(34 * var(--u))) scale(.86); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bnSlide { from { transform: translateX(calc((var(--sd, -1) * 40) * var(--u))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bnVsIn { 0% { transform: rotate(-45deg) scale(.5); opacity: 0; } 60% { transform: rotate(48deg) scale(1.04); opacity: 1; } 100% { transform: rotate(45deg); opacity: 1; } }
@keyframes bnRing { 0% { transform: rotate(45deg) scale(1); opacity: 1; } 100% { transform: rotate(45deg) scale(1.9); opacity: 0; } }
@keyframes bnVsOut { to { transform: scale(.3); opacity: 0; } }
/* titres des scènes (sceneTitle : top 4, éliminé, top 1, Sanctuaire, sort évolué) : la plaque et le ruban des bannières,
   sans sortie programmée (la scène part d'un bloc ; .out replie la plaque). La taille vient de l'hôte (--u, --fmin).
   .fill : plaque de la couleur du type, cernée d'encre ; .haz : ruban à hachures ; .ev-hd : bande d'en-tête or */
.sct { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; --out: 9e6ms; color: #fff; font-family: Lexend, sans-serif; pointer-events: none; }
.sct-l { position: relative; align-self: stretch; display: flex; justify-content: center; }
.sct > .ev-hd { margin-bottom: calc(24 * var(--u)); }
.ev-pk { display: none; }
.sct.fill .ev-pk { display: block; position: absolute; left: calc(-6 * var(--u)); right: calc(-6 * var(--u)); top: calc(-6 * var(--u)); bottom: calc(-6 * var(--u)); --sl: calc(34 * var(--u)); background: var(--ink);
  clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%); animation: bnPlateIn .56s linear .1s both; }
.sct.fill .ev-plate { background: linear-gradient(90deg, var(--c2), var(--c) 34%, var(--c)); }
.sct.fill .ev-title { color: var(--tx, var(--ink)); }
.sct.fill.kc-red { --tx: #fff; }
.sct.fill .ev-cell { background: var(--ink); }
.sct.fill .ev-cell .ev-ico { background: var(--c); }
.sct.fill .ev-bar { background: var(--ink); }
.sct.fill .ev-fl { background: #fff; }
.sct.haz .ev-rb { height: calc(34 * var(--u)); margin-top: calc(-17 * var(--u)); background: var(--cd); }
.sct.haz .ev-strw { -webkit-mask: none; mask: none; }
.sct.haz .ev-str { --sp: calc(56 * var(--u)); background: repeating-linear-gradient(90deg, #c4001f 0 calc(28 * var(--u)), #79001a 0 var(--sp)); animation-duration: .7s; }
.sct.haz .ev-rbl { left: 0; right: 0; height: calc(8 * var(--u)); margin-top: calc(-31 * var(--u)); background: repeating-linear-gradient(90deg, #ffd21f 0 calc(18 * var(--u)), #1a0612 0 calc(36 * var(--u))); }
.sct.out .ev-plate, .sct.out .ev-pk { animation: bnPlateOut .34s var(--xi) forwards; }
.sct.out .ev-rb { animation: bnWipeOut .32s var(--xi) .06s forwards; }
.sct.out .ev-rbl { animation: bnWipeOut .3s var(--xi) .02s forwards; }
.sct.out .ev-ln { animation: bnLnOut .26s var(--xi) forwards; }
.sct.out .bn-sub, .sct.out > .ev-hd { animation: bnClipOut .24s var(--xi) forwards; }
.sct.out .ev-px { display: none; }
#d-char.lvlup { animation: lvlFlash .9s ease-out; }
@keyframes lvlFlash { from { box-shadow: 0 0 0 3px #1aa3ff; } to { box-shadow: 0 0 0 12px transparent; } }

/* ---------------------------------------------------------------- quêtes des dieux : case Relique (Objets) */
.relic-slot { display: flex; align-items: center; gap: 7px; height: 44px; margin-bottom: 6px; padding: 3px 6px 3px 3px; border-radius: 8px; cursor: default;
  background: linear-gradient(90deg, rgba(157,124,245,.22), rgba(0,0,0,.25)); border: 1px solid #4b3a86; }
.relic-slot.done { background: linear-gradient(90deg, rgba(255,196,40,.28), rgba(0,0,0,.25)); border-color: #b58a16; }
.relic-slot.pop { --rc: #ffd21f; animation: evBump .26s var(--ease-pop), evPulse .52s var(--ease-out); }
.tt-relic { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 5px 7px; border-radius: 8px; background: rgba(255,196,40,.1); border: 1px solid rgba(255,196,40,.3); }
.tt-relic img { width: 34px; height: 34px; object-fit: contain; }
.tt-relic b { display: block; font-size: 12.5px; color: var(--gold); }
.tt-relic span { font-size: 11.5px; color: #ddd6c4; }
.chip.relic img { width: 16px; height: 16px; object-fit: contain; margin-right: 3px; }

/* ---------------------------------------------------------------- sort évolué : fenêtre de choix obligatoire */
#evo { position: absolute; z-index: 47; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,8,20,.72); }
.evo-box { width: 760px; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: evoIn .42s var(--xo) both; }
@keyframes evoIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.evo-title { width: 100%; margin-bottom: 6px; --u: .78px; --fmin: 12px; }   /* « Ton sort évolue » : plaque et ruban des bannières */
.evo-opts { display: flex; align-items: stretch; gap: 22px; width: 100%; }
.evo-opt { --oc: #4f8dff; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 10px; text-align: center; cursor: pointer;
  background: none; border: none; color: #fff; transition: transform .14s; animation: evRise .3s var(--ease-out) calc(.15s + var(--i, 0) * 90ms) backwards; }
.evo-opt.o1 { --oc: #ff5fb0; }
.evo-opt img.spi.big { width: 64px; height: 64px; margin: 0; transition: transform .14s; }
.evo-opt b { font: 700 26px/1.1 Lexend, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.eo-bar { width: 90px; height: 4px; border-radius: 2px; background: var(--oc); transition: width .18s; }
.eo-txt { font-size: 15px; line-height: 1.45; color: #ece6f8; max-width: 300px; }
.evo-opt:hover { transform: translateY(-4px); }
.evo-opt:hover img.spi.big { transform: scale(1.1); }
.evo-opt:hover .eo-bar { width: 220px; }
.eo-or { align-self: center; font: 700 14px Lexend, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #8d86b0; }
.evo-must { font-size: 12px; color: #a39ec0; }
/* pied de la fenêtre : « Préparation en pause » et « Réduire » (Scott 2026-10-23 : plus de compte à rebours ; le choix attend) */
.evo-foot { display: flex; align-items: center; justify-content: center; gap: 16px; }
.evo-min { height: 40px; padding: 0 22px; font-size: 14px; }
/* fenêtre réduite : une pastille sur le côté jusqu'au choix (app-panels.js evoPin) ; clic = la fenêtre revient */
.evo-pin { position: absolute; z-index: 36; left: 14px; top: 448px; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 7px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(22, 16, 44, .9); box-shadow: inset 0 0 0 1.5px #c8e20a; color: #fff; text-align: left; animation: evoPin 1.8s ease-in-out infinite; }
.evo-pin img.spi { width: 40px; height: 40px; border-radius: 9px; }
.evo-pin b { display: block; font: 700 14px/1.2 Lexend, sans-serif; white-space: nowrap; }
.evo-pin em { font: 800 12px/1.2 Lexend, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #c8e20a; }
.evo-pin:hover { background: rgba(34, 26, 64, .95); }
@keyframes evoPin { 50% { box-shadow: inset 0 0 0 2.5px #dcf53a; } }
body.mobile .evo-pin { left: 212px; top: auto; bottom: 8px; height: 42px; gap: 7px; padding: 0 12px 0 5px; border-radius: 10px; }
body.mobile .evo-pin img.spi { width: 32px; height: 32px; border-radius: 7px; }
body.mobile .evo-pin b { font-size: 12px; }
body.mobile .evo-pin em { font-size: 11px; }

/* ---------------------------------------------------------------- top 4 : page de fête */
#top4 { position: absolute; z-index: 42; left: 230px; top: 56px; width: 1140px; height: 654px; cursor: pointer; overflow: hidden; animation: t4In .35s ease-out; }
@keyframes t4In { from { opacity: 0; } to { opacity: 1; } }
#t4-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.t4-head { position: absolute; left: 0; right: 0; top: 30px; --u: 1.1px; --fmin: 12px; }
#top4.out { --lift: -24px; animation: evLift .4s var(--ease-in) forwards; }
/* plaques des noms sous les persos (Esport) : plaque sombre biseautée teintée du rang, portrait dans une case de la couleur
   du rang, barre basse ; bande indigo « Classe · PV » dessous ; puce TOI citron ; entrent par le bas l'une après l'autre */
.t4-plates { position: absolute; left: 0; right: 0; top: 476px; height: 70px; pointer-events: none; --pu: 1px; --pw: 206; }
/* une seule largeur et une seule hauteur pour les quatre ; --x : x du perso (pieds sur la rangée du milieu, y 452), la plaque centrée dessous */
.t4-plate { position: absolute; top: 0; left: calc(var(--x) - var(--pw) / 2 * var(--pu)); width: calc(var(--pw) * var(--pu)); color: #fff; font-family: Lexend, sans-serif; --ts: calc(12 * var(--pu)); --bc: var(--c);
  animation: t4PlIn .6s cubic-bezier(.22,1.12,.36,1) var(--d, .5s) both; }
.t4-plate.first { --bc: #ffd21f; }
.t4-plate.out .t4-pf img { filter: grayscale(1) brightness(.8); }   /* éliminé à cette manche : portrait éteint, « 4e · éliminé » dessous */
.t4-plate.out .t4-sub { color: #d9b9b3; }
.t4-plate.me { --bc: var(--lime); }
.t4-pl { position: relative; display: flex; align-items: stretch; height: calc(42 * var(--pu)); overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, var(--ink)) 0%, var(--ink) 55%, var(--ink2) 100%);
  clip-path: polygon(var(--ts) 0, 100% 0, calc(100% - var(--ts)) 100%, 0 100%); }
/* portrait : case sombre teintée du rang (les peaux claires gardent leur contraste), tête centrée et un peu zoomée */
.t4-pf { position: relative; flex: none; width: calc(58 * var(--pu)); overflow: hidden; background: color-mix(in srgb, var(--c) 25%, #15121d);
  clip-path: polygon(var(--ts) 0, 100% 0, calc(100% - var(--ts)) 100%, 0 100%); }
.t4-pf img { position: absolute; left: 50%; top: calc(-3 * var(--pu)); width: calc(52 * var(--pu)); height: calc(52 * var(--pu)); margin-left: calc(-25 * var(--pu)); object-fit: cover; }
.t4-tx { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(6 * var(--pu)); padding: 0 calc(24 * var(--pu)) calc(2 * var(--pu)) calc(6 * var(--pu)); }
.t4-tx b { min-width: 0; font: 700 calc(15 * var(--pu))/1.1 Lexend, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t4-plate.first .t4-tx b { font-size: calc(17.25 * var(--pu)); }
.t4-crown { flex: none; width: calc(18 * var(--pu)); height: calc(18 * var(--pu)); background: #ffd21f; -webkit-mask: url(dofus/assets/ui/ic/crown.png) center / contain no-repeat; mask: url(dofus/assets/ui/ic/crown.png) center / contain no-repeat; }
.t4-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--pu)); background: var(--bc); }
.t4-sub { display: flex; align-items: center; gap: .4em; width: max-content; max-width: calc(100% - 16 * var(--pu)); height: calc(20 * var(--pu)); margin: calc(3 * var(--pu)) 0 0 calc(12 * var(--pu));
  padding: 0 calc(14 * var(--pu)) 0 calc(10 * var(--pu)); background: var(--strip); clip-path: polygon(calc(6 * var(--pu)) 0, 100% 0, calc(100% - 6 * var(--pu)) 100%, 0 100%);
  font: 600 calc(11.5 * var(--pu))/1 Lexend, sans-serif; color: #d9ccff; white-space: nowrap; }
.t4-sub > i { flex: none; width: calc(6 * var(--pu)); height: calc(6 * var(--pu)); background: var(--bc); transform: rotate(45deg); }
.t4-sub img { width: 1.15em; height: 1.15em; margin-right: -.15em; }
.t4-cl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* classe trop longue : elle cède, les PV restent entiers */
.t4-toi { position: absolute; z-index: 2; right: calc(2 * var(--pu)); top: calc(-12 * var(--pu)); height: calc(18 * var(--pu)); padding: 0 calc(11 * var(--pu)); background: var(--lime); color: var(--bn-ink);
  font: 700 calc(12 * var(--pu))/calc(18 * var(--pu)) Lexend, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(calc(5 * var(--pu)) 0, 100% 0, calc(100% - 5 * var(--pu)) 100%, 0 100%); }
.t4-plate.first.me .t4-toi { right: auto; left: calc(var(--ts) + 2 * var(--pu)); }   /* 1er et toi : la puce sur le portrait, loin de la couronne */
@keyframes t4PlIn { from { transform: translateY(calc(40 * var(--pu))); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.t4-foot { position: absolute; right: 14px; top: 12px; padding: 2px 10px; border-radius: 10px; background: var(--bn-ink); font-size: 11px; font-weight: 700; color: #fff; }

/* ---------------------------------------------------------------- fin de partie : message par-dessus le combat */
#elim { position: absolute; z-index: 44; left: 230px; top: 56px; width: 1140px; height: 654px; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(229,73,59,.2) 0 18px, transparent 18px 36px), rgba(58,10,46,.58); animation: evFade .26s ease-out both; }
@keyframes evFade { from { opacity: 0; } }
#elim.out { --lift: -24px; animation: evLift .3s var(--ease-in) forwards; }
.el-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; --u: 1.2px; --fmin: 12px; }
.el-btns { display: flex; gap: 12px; margin-top: 8px; pointer-events: auto; animation: evRise .3s var(--ease-out) 1.4s both; }
.el-btns button { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------------------------------------------------------------- quitter la partie : place et gains, « Quitter » après 3 s */
#quit { position: absolute; inset: 0; z-index: 48; display: flex; align-items: center; justify-content: center; background: rgba(8,8,11,.7); }
.qt-box { width: 520px; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; animation: popIn .25s cubic-bezier(.2,1.4,.4,1); }
.qt-box h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 28px; color: #fff; }
.qt-box p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #ddd6c4; }
.qt-res { display: flex; gap: 8px; }
.qt-res > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid #2d2c35; }
.qt-res img { width: 24px; }
.qt-res b { font-family: Rowdies, sans-serif; font-weight: 400; font-size: 22px; color: var(--gold); }
.qt-res span { font-size: 11px; color: var(--muted); text-align: center; }
.qt-res .qt-place b { font-size: 30px; color: #ff8a98; }
.qt-res .bad b { color: var(--red); }
.qt-btns { display: flex; gap: 10px; }
.qt-btns .btn-green { flex: 1; height: 42px; font-size: 15px; }
.qt-quit { flex: 1; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #e5493b, #a8241a); border-color: #000; }
.qt-quit:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }

/* résultats : les blocs arrivent l'un après l'autre, la place « tape » à chaque cran, les gains s'allument */
.rs-box > * { animation: rsIn .4s cubic-bezier(.2,1.3,.4,1) backwards; }
.rs-box > :nth-child(1) { animation-delay: .1s; } .rs-box > :nth-child(2) { animation-delay: .2s; } .rs-box > :nth-child(3) { animation-delay: .28s; }
.rs-box > :nth-child(4) { animation-delay: .36s; } .rs-box > :nth-child(5) { animation-delay: .44s; } .rs-box > :nth-child(6) { animation-delay: .52s; } .rs-box > :nth-child(7) { animation-delay: .6s; }
@keyframes rsIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.rs-place.tick b { animation: rsTick .16s ease-out; }
@keyframes rsTick { from { transform: scale(1.25); } to { transform: none; } }
.rs-rw { opacity: .45; transition: opacity .2s, transform .2s, box-shadow .3s; }
.rs-rw.on { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 3px #ffd21f; }

body.nohud #fight-hud { display: none !important; }

/* accueil (refonte) : colonnes de 420 px, perso au centre avec son nom sous les pieds, mode + JOUER en bas à droite */
.home-l, .home-r { width: 420px !important; }
.home-l .season { height: 136px; padding: 14px 18px; }
.home-l .season h2 { font-size: 30px; margin: 2px 0 8px; }
.stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage canvas { width: 560px; height: 600px; cursor: pointer; }
.stage-plate { display: flex; flex-direction: column; align-items: center; margin-top: -14px; text-align: center; }
.stage-plate h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 44px; line-height: 1.1; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.home-r .rank-card { height: 168px; }
.home-r .rank-emblem { width: 118px; }
.home-r .rank-info h2 { font-size: 28px; }
.home-r .recent-row { gap: 4px; flex-wrap: nowrap; }
.play-box { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px; }
/* choix du mode (menu Jouer) : sélecteur de hauteur fixe ; la liste des modes s'ouvre PAR-DESSUS (rien ne bouge) */
.mode-pick { position: relative; flex: none; }
.mp-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border: 2px solid var(--edge); border-radius: 10px;
  background: linear-gradient(180deg, #8ca70a, #5f7406); color: #fff; font-size: 15px; font-weight: 700; text-align: left; }
.mp-btn img { width: 20px; flex: none; }
.mp-btn b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chev { flex: none; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #fff; transition: transform .15s; }
.mp-btn.open .mp-chev { transform: rotate(180deg); }
.mp-btn:hover { filter: brightness(1.08); }
.mp-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: #17161d; border: 2px solid var(--edge); border-radius: 12px; }
.mp-pop[hidden] { display: none; }
.mp-opt { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid transparent; border-radius: 9px; background: none; color: #fff; text-align: left; }
.mp-opt img { width: 24px; flex: none; opacity: .7; }
.mp-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-opt b { font-size: 14.5px; font-weight: 700; }
.mp-opt em { font-style: normal; font-size: 12px; line-height: 1.3; color: var(--muted); }
.mp-opt:hover { background: #24232b; }
.mp-opt.on { border-color: #8ca70a; background: rgba(140, 167, 10, .14); }
.mp-opt.on img { opacity: 1; }
.play-box #play-btn { height: 104px; font-size: 44px; letter-spacing: 6px; }

/* personnages (refonte) : à gauche tes persos + celui choisi en grand, à droite les onglets Classe / Apparence */
.chs-left { width: 520px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.chs-roster { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }   /* au-dessus du canvas du perso, qui remonte sous les vignettes */
.chs-rhead { display: flex; align-items: center; gap: 10px; }
.chs-rhead h3 { margin: 0; flex: 1; }
.chs-tiles { display: flex; align-items: flex-start; gap: 10px; }
.ch-tile { position: relative; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: none; }
.ch-tile > img { width: 64px; height: 64px; border-radius: 11px; object-fit: cover; background: url(assets/ui/slot.png) center / cover; border: 2px solid #3a3944; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ch-tile span { display: flex; align-items: center; gap: 3px; max-width: 72px; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ch-tile span img { width: 14px; height: 14px; margin: 0; }
.ch-tile span { height: 15px; line-height: 15px; }
.ch-tile:hover > img { transform: translateY(-2px); border-color: #6b6a78; }
.ch-tile.sel > img { border-color: var(--lime); box-shadow: 0 0 14px rgba(200,226,10,.4); }
.ch-tile.sel span { color: #fff; }
.ch-tile .act { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); border: 2px solid #121116; display: flex; align-items: center; justify-content: center; }
.ch-tile .act img { width: 12px; filter: brightness(0); }
.ch-tile.new > img, .rt.buy > img { padding: 19px; object-fit: contain; border-style: dashed; background: rgba(0,0,0,.3); }
.ch-tile.new span { color: var(--lime); }
.chs-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.chs-stage canvas { width: 520px; height: 575px; cursor: pointer; }
.chs-name { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.chs-name h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 42px; line-height: 1.1; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.chs-click { position: absolute; bottom: 4px; }
.chs-stage canvas { transition: opacity .15s; }
.chs-stage.busy canvas { opacity: .3; }
.chs-act { display: flex; flex-direction: column; gap: 8px; }
.chs-act .btn-green.big { flex: none; height: 56px; font-size: 18px; }
.chs-foot { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.chs-foot .hint { font-size: 12px; }
.chs-foot .btn-grey { margin-left: auto; }
.chs-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; }
.ed-tabs.big button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0; font-size: 15px; }
.ed-tabs.big button img { width: 20px; }
.ed-tabs.big button.on img { filter: brightness(.15); }
.cls-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cls-t { display: flex; align-items: center; gap: 7px; height: 62px; padding: 0 8px 0 4px; border-radius: 10px; text-align: left; background: rgba(0,0,0,.28); border: 2px solid #33323c; transition: border-color .15s, transform .15s; }
.cls-t img { width: 50px; height: 50px; flex: none; object-fit: contain; }
.cls-t span { display: flex; flex-direction: column; min-width: 0; }
.cls-t b { font-size: 13.5px; color: #fff; }
.cls-t em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-t:hover { transform: translateY(-2px); border-color: #6b6a78; }
.cls-t.on { border-color: var(--lime); background: rgba(40,46,18,.88); box-shadow: 0 0 12px rgba(200,226,10,.3); }
.cls-t.on em { color: var(--lime); }
#cls-info { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; overflow-y: auto; padding-right: 6px; }   /* textes des sorts longs : la fiche défile */
.ci-head { display: flex; align-items: center; gap: 12px; padding-top: 4px; border-top: 1px solid #2d2c35; }
.ci-head > img { width: 54px; height: 54px; object-fit: contain; }
.ci-head h4 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 26px; line-height: 1.15; color: #fff; }
.ci-head span { font-size: 12.5px; color: var(--muted); }
.ci-prev { margin-left: auto; padding: 4px 11px; border-radius: 8px; border: 1px dashed #ffd34a; color: #ffd34a; font-style: normal; font-size: 12px; font-weight: 700; }
.ed-sec h4 .hint { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.tenues { display: flex; gap: 10px; flex-wrap: wrap; }
.tenue { position: relative; width: 116px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 7px; border-radius: 12px; background: rgba(0,0,0,.28); border: 2px solid #33323c; transition: border-color .15s, transform .15s; }
.tenue > img { width: 84px; height: 84px; border-radius: 9px; object-fit: cover; background: url(assets/ui/slot.png) center / cover; border: 2px solid var(--rc); }
.tenue.locked > img { filter: brightness(.5) saturate(.6); }
.tenue .lk { position: absolute; top: 6px; left: 50%; width: 84px; height: 84px; margin-left: -42px; display: flex; align-items: center; justify-content: center; }
.tenue .lk img { width: 28px; height: 28px; }
.tenue b { max-width: 100%; margin-top: 3px; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenue em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tenue em img { width: 15px; height: 15px; }
.tenue:hover { transform: translateY(-2px); border-color: #6b6a78; }
.tenue.sel { border-color: var(--lime); background: rgba(40,46,18,.88); }
.tenue.sel em { color: var(--lime); }
.tenue.sel em img { filter: none; }

/* planche de captures : toutes les bulles de synergie (?demo=sheet&kind=family|role) */
#sheet { position: absolute; inset: 0; z-index: 60; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 14px; padding: 16px; background: var(--bg0); overflow: hidden; }
#sheet .tt-box { position: relative; animation: none; }

/* intro du Sanctuaire : titre animé (main.js tickLobby), cartes et en-tête qui arrivent ensuite */

/* fondu au noir entre le Sanctuaire et ton plateau */
#board-fade { position: absolute; z-index: 32; left: 230px; top: 56px; width: 1140px; height: 654px; background: #1a0d2e; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
#board-fade.on { opacity: 1; }


/* effets en cours d'une unité (bulle de combat) */
.tt-fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tt-fx span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 4px; border-radius: 9px; font-size: 11.5px; font-weight: 600; background: rgba(47,154,85,.28); color: #e6ffe9; }
.tt-fx span.bad { background: rgba(210,64,47,.3); color: #ffe3de; }
.tt-fx span img { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- volume au survol des boutons de son, paramètres */
.vol-wrap { position: relative; display: inline-flex; }
.vol-pop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 6px; z-index: 80; display: none; }
.vol-wrap:hover .vol-pop, .vol-wrap:focus-within .vol-pop { display: block; }
.vol-box { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(180deg, #25242c, #1a1920); border: 2px solid #000; border-radius: 9px; box-shadow: 0 0 0 1px #4a4856; white-space: nowrap; }
.vol-box span { font-size: 12px; font-weight: 700; color: var(--muted); }
.vol-box b { min-width: 38px; text-align: right; font-size: 12px; color: #fff; }
.vol-box input, .vol-row input { width: 130px; accent-color: var(--lime); cursor: pointer; }
[data-settings] img { width: 18px; height: 18px; }
#settings { position: absolute; inset: 0; z-index: 300; background: rgba(8,8,12,.62); display: flex; align-items: center; justify-content: center; }
.set-box { width: 980px; max-height: 820px; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.set-head { display: flex; align-items: center; }
.set-head h2 { margin: 0; flex: 1; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 30px; }
.set-x { width: 34px; height: 34px; border-radius: 8px; border: 2px solid #000; background: #2d2c35; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.set-sec h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); }
.vol-rows { display: flex; gap: 40px; }
.vol-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.vol-row input { width: 220px; }
.vol-row b { min-width: 44px; color: #fff; }
.keys-list { max-height: 560px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #4a4856 transparent; }
.kg { margin-bottom: 14px; }
.kg h4 { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 4px 0; background: #1f1e25; font-size: 12.5px; color: #fff; text-transform: uppercase; letter-spacing: 1.2px; }
.kg h4::after { content: ''; flex: 1; height: 1px; background: #3a3943; }
.kg-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; align-items: start; }
.kr { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; }
.kr span { flex: 1; color: #ddd6c4; }
.kb { min-width: 74px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid #000; background: #34333d; color: #fff; font: 700 12px Lexend, sans-serif; cursor: pointer; }
.kb:hover:not([disabled]) { box-shadow: inset 0 0 0 2px #59661a; }
.kb.none { color: #6f6b62; }
.kb.wait { background: var(--lime); color: #1c2300; }
.kb[disabled] { cursor: default; opacity: .7; }
.keys-note { margin-top: 6px; font-size: 12.5px; color: #ffcf6a; }
.set-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.set-legal { margin-right: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }   /* pages juridiques, aussi depuis la partie */
.set-legal a { color: rgba(236, 232, 246, .55); text-decoration: none; } .set-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- top 1 : célébration */
#champion { position: absolute; inset: 0; z-index: 45; cursor: pointer; overflow: hidden; }
#ch-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-title { position: absolute; left: 0; right: 0; top: 22px; display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; --u: 1.15px; --fmin: 12px; }
.ch-title.land, body.noanim .ch-title { display: flex; }   /* la plaque s'ouvre à l'atterrissage du perso */
.ch-sn { color: var(--lime); }   /* le nom (TOI) dans la bande, à la suite de « Champion du Sanctuaire » */
.t4-head .sct, .el-box .sct { clip-path: inset(-300px 0); }   /* rien ne déborde du plateau (traits d'accent) */
/* titres des podiums : ni ruban à rayures ni filets décalés, un seul trait d'or de 2 px de chaque côté, centré sur la plaque */
#top4 .sct .ev-rb, #top4 .sct .ev-rbl, #champion .sct .ev-rb, #champion .sct .ev-rbl { display: none; }
#top4 .sct .ev-ln, #champion .sct .ev-ln { top: 50%; bottom: auto; height: 2px; margin-top: -1px; width: calc(190 * var(--u)); background: #ffd21f; }
#top4 .sct .ev-ln::after, #champion .sct .ev-ln::after { display: none; }
.ch-foot { position: absolute; right: 14px; top: 12px; padding: 2px 10px; border-radius: 10px; background: var(--bn-ink); font-size: 11px; font-weight: 700; color: #fff; }   /* comme le Top 4 : pastille sombre en haut à droite */

/* résultats : résumé de la partie */
/* écran de fin v2 (Scott 2026-10-21 : « son dernier banc, les dégâts des top unités, les synergies activées et les items créés ;
   retire le tableau des PV ; plus moderne et joli ; remets “Continuer de regarder” ») — ordinateur : deux colonnes (rs-wide) :
   à gauche la place, le rang, les gains et les boutons ; à droite 4 cartes d'encre (app-tips.js summaryHtml). Halo de la place en haut. */
.rs-box.pl1 { --pc: #ffbb1f; } .rs-box.pl4 { --pc: #8fd14f; } .rs-box.pl8 { --pc: #9a96a3; }
.rs-box.rs-wide { width: 1240px; max-height: 850px; flex-direction: row; align-items: stretch; gap: 22px; padding: 24px; text-align: left;
  background: radial-gradient(90% 60% at 15% 0%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%), linear-gradient(180deg, #221d2c, #14111a); }
.rs-wide .rs-main { width: 360px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.rs-wide .rs-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 4px; }
.rs-wide .rs-place { width: 126px; height: 126px; }
.rs-wide .rs-place b { font-size: 50px; }
.rs-wide .rs-head h2 { font-size: 34px; }
.rs-wide .rs-rank { padding: 10px 12px; gap: 12px; }
.rs-wide .rs-rank img { width: 62px; }
.rs-wide .rs-rank b { font-size: 18px; }
.rs-wide .rs-delta { font-size: 24px; }
.rs-wide .rs-missions { justify-content: center; }
.rs-wide .rs-btns { flex-wrap: wrap; gap: 10px; margin-top: auto; }
.rs-wide .rs-btns .btn-green.big { flex: 1 1 100%; }
.rs-wide .rs-btns .btn-grey { flex: 1 1 0; height: 44px; padding: 0 12px; white-space: nowrap; border: 0; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); color: #fff; }
.rs-wide .rs-btns .btn-grey:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px var(--lime); }
.rs-wide .rs-btns #rs-watch { box-shadow: inset 0 0 0 1.5px rgba(200,226,10,.55); color: var(--lime); }
.rs-wide .rs-btns #rs-report { flex: 1 1 100%; }
.rs-wide .rs-side { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.rs-wide .rs-main > *, .rs-wide .rs2-card { animation: rsIn .4s cubic-bezier(.2,1.3,.4,1) backwards; }
.rs-wide .rs-main > :nth-child(2) { animation-delay: .12s; } .rs-wide .rs-main > :nth-child(3) { animation-delay: .2s; } .rs-wide .rs-main > :nth-child(4) { animation-delay: .28s; } .rs-wide .rs-main > :nth-child(5) { animation-delay: .36s; }
.rs2-card:nth-child(1) { animation-delay: .18s; } .rs2-card:nth-child(2) { animation-delay: .28s; } .rs2-card:nth-child(3) { animation-delay: .38s; } .rs2-card:nth-child(4) { animation-delay: .48s; }
.rs-box.rs-wide > * { animation: none; }
/* les 4 cartes : plateau en haut sur toute la largeur ; meilleures unités à gauche ; synergies et objets empilés à droite */
.rs2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "board board" "dmg syn" "dmg made"; grid-template-rows: auto 1fr auto; gap: 12px; }
.rs2-card { position: relative; min-width: 0; padding: 12px 14px 14px; border-radius: 14px; background: rgba(10,8,14,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.rs2-board { grid-area: board; } .rs2-dmg { grid-area: dmg; } .rs2-syns { grid-area: syn; } .rs2-made { grid-area: made; }
.rs2-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 800 11.5px/1 Lexend, "Segoe UI", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
.rs2-card h4::before { content: ''; width: 4px; height: 13px; border-radius: 2px; background: var(--lime); }
.rs2-card h4 small { margin-left: auto; font: 600 11px/1 Lexend, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted); }
.rs2-card .empty-note { font-size: 12.5px; color: var(--muted); }
/* plateau : portraits sur un fond à la couleur de rareté, étoiles en pastille dessous, objet porté dans le coin */
.rs2-units { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.rs2-u { position: relative; flex: none; width: 66px; height: 66px; border-radius: 13px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 45%, #1b1724), #120f18 78%); box-shadow: inset 0 0 0 2px var(--rc); }
.rs2-u canvas { display: block; width: 100%; height: 100%; border-radius: 13px; }
.rs2-u .rs2-st { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 5px; border-radius: 7px; background: #121116; font: 700 10px/14px Lexend, sans-serif; letter-spacing: -1px; white-space: nowrap; }
.rs2-st { font-style: normal; color: #ffd23f; }
.rs2-it { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: #17161d; box-shadow: 0 0 0 2px #121116, inset 0 0 0 1.5px #ffd23f; }
.rs2-it.ring { box-shadow: 0 0 0 2px #121116, inset 0 0 0 1.5px #d9e6f2; }
.rs2-it img { width: 18px; height: 18px; }
.rs2-u.sm { width: 46px; height: 46px; border-radius: 10px; }
.rs2-u.sm canvas { border-radius: 10px; }
.rs2-u.sm .rs2-it { width: 20px; height: 20px; right: -5px; top: -5px; }
.rs2-u.sm .rs2-it img { width: 14px; height: 14px; }
.rs2-bench { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.1); }
.rs2-k { margin-right: 4px; font: 700 10.5px/1 Lexend, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
/* meilleures unités : rang, portrait rond, nom + étoiles, barre de dégâts (la 1re en lime), valeur */
.rs2-d { display: grid; grid-template-columns: 16px 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 2px; }
.rs2-d + .rs2-d { border-top: 1px solid rgba(255,255,255,.05); }
.rs2-rk { font: 800 13px/1 Lexend, sans-serif; color: var(--muted); text-align: center; }
.rs2-d.top .rs2-rk { color: #ffd23f; }
.rs2-pt { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #120f18; box-shadow: 0 0 0 2px var(--rc); }
.rs2-pt canvas { display: block; width: 100%; height: 100%; }
.rs2-dn { min-width: 0; }
.rs2-dn b { display: flex; align-items: baseline; gap: 6px; font: 700 13px/1.2 Lexend, sans-serif; color: #fff; }
.rs2-dn b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs2-dn .rs2-st { flex: none; font-size: 10px; letter-spacing: -1px; }
.rs2-bar { display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.rs2-bar i { display: block; height: 100%; border-radius: 4px; background: #ff9f1c; transform-origin: left; animation: rs2Bar .9s .45s cubic-bezier(.16,1,.3,1) backwards; }
.rs2-d.top .rs2-bar i { background: var(--lime); }
.rs2-v { text-align: right; font: 400 20px/1 Rowdies, sans-serif; color: #fff; }
.rs2-v small { display: block; margin-top: 3px; font: 600 10.5px/1 Lexend, sans-serif; color: var(--muted); }
@keyframes rs2Bar { from { transform: scaleX(0); } }
/* synergies actives : pastilles tuile + nom + compte ; tuile au palier (bronze, argent, or, prismatique), glyphe à l'encre */
.rs2-syn { display: flex; flex-wrap: wrap; gap: 8px; }
.rs2-s { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 4px; border-radius: 17px; background: rgba(255,255,255,.06); }
.rs2-si { width: 26px; height: 26px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #3a3348; }
.rs2-s[data-tier="1"] .rs2-si { background: #c0742e; } .rs2-s[data-tier="2"] .rs2-si { background: #cfd6de; } .rs2-s[data-tier="3"] .rs2-si { background: #ffd23f; }
.rs2-s[data-tier="4"] .rs2-si { background: conic-gradient(from 200deg, #ff5f6d, #ffd23f, #79d62a, #26a9ff, #c457ff, #ff5f6d); }
.rs2-si .rb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: none; box-shadow: none; }
.rs2-si .rb img, .rs2-si > img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0); opacity: .82; }
.rs2-si canvas { width: 100%; height: 100%; transform: scale(1.18); filter: drop-shadow(0 0 .6px #121116) drop-shadow(0 0 .6px #121116); }
.rs2-s b { font: 700 12.5px/1 Lexend, sans-serif; color: #fff; }
.rs2-s em { font: 800 12px/1 Lexend, sans-serif; font-style: normal; color: var(--muted); }
/* objets créés : icône sertie d'or + nom court */
.rs2-items { display: flex; flex-wrap: wrap; gap: 8px; }
.rs2-i { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px; border-radius: 11px; background: rgba(255,255,255,.06); }
.rs2-i img { width: 30px; height: 30px; padding: 3px; border-radius: 8px; background: #17161d; box-shadow: inset 0 0 0 1.5px #ffd23f; }
.rs2-i em { font: 700 12px/1 Lexend, sans-serif; font-style: normal; color: #fff; white-space: nowrap; }
.rs-box.champ { box-shadow: 0 0 0 2px #ffd34a, 0 0 0 5px #000; }
.rs-box.champ h2 { color: #ffd34a; text-shadow: 0 2px 0 #000; }

/* ---------------------------------------------------------------- partie en ligne : boutons, salle d'attente */
.ol-row { display: flex; gap: 8px; margin-top: 8px; }
.ol-row button { flex: 1; justify-content: center; }
.ol-join input { width: 520px; height: 42px; padding: 0 14px; border-radius: 8px; border: 2px solid #000; background: #121116; color: #fff; font: 600 15px Lexend, sans-serif; outline: none; }
.ol-join input:focus { box-shadow: inset 0 0 0 2px var(--lime); }
.ol-join p { margin: 0; font-size: 14px; color: var(--muted); }
.ol-btns { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.ol-info { display: flex; flex-direction: column; gap: 8px; width: 880px; }
.ol-code { display: flex; align-items: center; gap: 10px; background: #121116; border: 1px solid #000; border-radius: 9px; padding: 8px 12px; }
.ol-code span { font-size: 12px; color: var(--muted); width: 190px; }
.ol-code b { flex: 1; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 20px; color: var(--lime); letter-spacing: 1px; }
.ol-code em { font-style: normal; font-size: 12px; color: var(--muted); }
.ol-help { font-size: 12.5px; line-height: 1.45; color: #cfc8b6; background: rgba(200,226,10,.08); border: 1px solid rgba(200,226,10,.3); border-radius: 9px; padding: 8px 12px; }
.ol-help b { color: #fff; }
.mm-slot.off .mm-head { opacity: .4; border-color: var(--red); }
.ol-code b.masked { color: var(--muted); letter-spacing: 2px; }
.ol-show { align-self: flex-start; }
.ol-help.ok { background: rgba(96,222,100,.1); border-color: rgba(96,222,100,.4); }
.ol-help.warn { background: rgba(255,154,60,.12); border-color: rgba(255,154,60,.5); }

/* ---------------------------------------------------------------- accueil : sélection rapide (presets) */
.home-stage { justify-content: flex-end; gap: 0; }
.home-stage canvas { width: 640px; height: 580px; }   /* version Waven : perso plus gros (Scott 2026-10-19) */
.home-stage .stage-plate { margin-top: -22px; }
.qs { width: 640px; margin-top: 14px; padding: 10px 14px 12px; }
.qs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qs-head b { font-size: 13px; letter-spacing: .9px; text-transform: uppercase; color: #fff; }
.qs-head .hint { flex: 1; font-size: 12px; }
.qs-row { display: flex; align-items: center; gap: 8px; }
.qs-t { position: relative; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: none; }
.qs-t > img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; background: #2a2340; border: 3px solid #3a3550; transition: transform .12s, border-color .12s; }
.qs-t span { max-width: 70px; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-t:hover > img { transform: translateY(-3px); border-color: #8d86b0; }
.qs-t.on > img { border-color: var(--lime); background: #3b4a0c; }
.qs-t.on span { color: var(--lime); }
.qs-n { position: absolute; left: -4px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #1a1622; border: 2px solid #3a3550; font-style: normal; font-size: 11px; font-weight: 800; line-height: 16px; color: #fff; text-align: center; }
.qs-t.on .qs-n, .ch-tile.sel .qs-n { background: var(--lime); border-color: var(--lime); color: #1c2300; }
.qs-t.new > img, .qs-t.tool > img { padding: 16px; object-fit: contain; background: #1f1b2b; border-style: dashed; }
.qs-t.new span { color: var(--lime); }
.qs-t.tool > img { border-style: solid; background: #2b2150; border-color: #5a47a8; }
.qs-t.tool:hover > img { border-color: #8f78ff; }
.qs-t.tool span { color: #c9bcff; }
.qs-sep { flex: 1; }
/* presets nombreux : ils défilent dans leur bande (menu.js qsScroll), les outils restent fixes au bout ; fondu + flèche du côté qui déborde */
.qs-scroll { --qs-img: 58px; position: relative; flex: 0 1 auto; min-width: 0; display: flex; }
.qs-list { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 6px 6px 2px; margin: -6px -6px -2px; }
.qs-list::-webkit-scrollbar { display: none; }
.qs-list > .qs-t, .qs-tools > .qs-t { flex: none; }
.qs-scroll.ovl .qs-list { -webkit-mask-image: linear-gradient(90deg, transparent 4px, #000 40px); mask-image: linear-gradient(90deg, transparent 4px, #000 40px); }
.qs-scroll.ovr .qs-list { -webkit-mask-image: linear-gradient(270deg, transparent 4px, #000 40px); mask-image: linear-gradient(270deg, transparent 4px, #000 40px); }
.qs-scroll.ovl.ovr .qs-list { -webkit-mask-image: linear-gradient(90deg, transparent 4px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 4px)); mask-image: linear-gradient(90deg, transparent 4px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 4px)); }
.qs-arr { position: absolute; top: calc(var(--qs-img) / 2); transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: none; place-items: center;
  cursor: pointer; background: #2b2150; color: #fff; box-shadow: inset 0 0 0 1.5px #5a47a8; }
.qs-arr svg { width: 14px; height: 14px; }
.qs-arr:hover { background: #3a2d6a; }
.qs-scroll.ovl .qs-arr.l { display: grid; left: -10px; }
.qs-scroll.ovr .qs-arr.r { display: grid; right: -10px; }
.qs-tools { display: flex; gap: 8px; flex: none; }
body.mobile .qs-tools .qs-t.tool { position: static; box-shadow: none; }
/* choix de classe (fenêtre) */
.cpick { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 860px; }
.cpick h2 { margin: 0; font-family: Rowdies, sans-serif; font-weight: 400; font-size: 32px; color: #fff; }
.cpick p { margin: 0; font-size: 13px; color: var(--muted); }
.cpick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; width: 100%; margin: 6px 0 4px; }
.cpick-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 12px; background: #221d33; border: 3px solid #3a3550; transition: transform .12s, border-color .12s; }
.cpick-t img { width: 72px; height: 72px; object-fit: contain; }
.cpick-t b { font-size: 14px; color: #fff; }
.cpick-t em { font-style: normal; font-size: 11px; color: var(--muted); }
.cpick-t:hover { transform: translateY(-3px); border-color: #8f78ff; }
.cpick-t.on { border-color: var(--lime); background: #2e3a0c; }
.cls-new { position: absolute; right: -6px; top: -8px; padding: 1px 7px; border-radius: 8px; background: #ff4fd8; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.cls-t { position: relative; }
/* page Personnages : presets */
.chs-explain { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.chs-explain b { color: var(--lime); }
.ch-tile .qs-n { left: -6px; top: -6px; }
.ch-tile.new > img, .ch-tile.new { cursor: pointer; }
.ch-tile.new span { color: #8d86b0; }
.ch-tile.new:hover span { color: var(--lime); }
.chs-editing { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 3px 12px; border-radius: 12px; background: #2b2150; border: 2px solid #5a47a8; color: #d9d0ff; font-size: 12px; font-weight: 700; }
.chs-editing img { width: 15px; }

/* bulles « à la League of Legends » : résultat en couleur, formule entre parenthèses */
.fn { font-weight: 800; }
.ff { color: #a99f8a; font-size: .92em; white-space: normal; }
img.fi { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin: 0 1px; }
.tt-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 2px 0; }
.tt-line > span:first-child { color: #ddd6c4; }
.tt-line > span:first-child::after { content: ' :'; }
.sp-node p b.fn, .tt-text b.fn, .eo-txt b.fn, .evo-cur b.fn { display: inline; font-size: inherit; line-height: inherit; }

/* parties en ligne à code (relais cross.taikoo.fr) */
.ol-code b { font-size: 30px; letter-spacing: 6px; }
.ol-code b.masked { letter-spacing: 8px; }
.ol-eye img { width: 18px; height: 18px; }
.ol-join input.ol-codein { text-transform: uppercase; text-align: center; font-family: Rowdies, sans-serif; font-size: 28px; letter-spacing: 6px; }
.ol-join input.ol-codein::placeholder { letter-spacing: 6px; opacity: .35; }
.tt-note { color: var(--muted); font-size: .92em; margin-top: 4px; }

/* carte du perso : 3 lignes ; pseudo trop long : il défile */
.char-name { overflow: hidden; text-overflow: clip; }
.char-name span { display: inline-block; white-space: nowrap; }
.char-name.scroll span { animation: nameScroll var(--dur, 6s) ease-in-out infinite alternate; }
@keyframes nameScroll { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(var(--dx, 0)); } }
.char-cls { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* bandeau des manches : la phase en cours, manche gagnée en vert, perdue en rouge */
#tb-rounds { align-items: center; }
#tb-rounds .tb-phase-name { font-style: normal; font-family: Rowdies, sans-serif; font-size: 13px; color: var(--lime); margin-right: 4px; white-space: nowrap; }
#tb-rounds span { display: inline-flex; align-items: center; gap: 4px; }
#tb-rounds span.win { background: linear-gradient(180deg, #5fd04c, #2f9a2a); color: #fff; }
#tb-rounds span.lose { background: linear-gradient(180deg, #ef5a4c, #b02a22); color: #fff; }
#tb-rounds span.past { opacity: .6; }
#tb-rounds span img.res { width: 13px; filter: brightness(0) invert(1); }

/* profil : compte en ligne */
.card.account { display: flex; flex-direction: column; gap: 8px; }

/* Défi du Kolizéum : épées pour défier un joueur (liste des joueurs), « défié ×N », flèches de la révélation */
.score { position: relative; }
.duel-btn { position: absolute; left: 38px; top: 36px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #121116; background: #3a3646; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.duel-btn img { width: 18px; height: 18px; }
.duel-btn:hover { background: #59661a; }
.duel-btn.on { background: var(--lime); }
.duel-btn.on img { filter: brightness(0); }
.duel-btn:not(.on) { animation: duelPulse 1.4s ease-in-out infinite; }
@keyframes duelPulse { 50% { box-shadow: 0 0 0 4px rgba(200,226,10,.45); } }
body.noanim .duel-btn { animation: none; }
.score .shead { position: relative; }
.sduel { position: absolute; left: -4px; top: -4px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; height: 18px; border-radius: 9px; border: 1.5px solid #121116; background: #ef3b4f; color: #fff; font: 400 11px Rowdies, sans-serif; }
.sduel img { width: 11px; height: 11px; }
#tb-rounds span.duel:not(.now) { color: #ffd23f; }

/* nouvelle version publiée pendant que la page est ouverte (js/update.js) */
#new-version { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 9px 18px; border-radius: 20px; border: 0; box-shadow: 0 0 0 2px #121116; background: var(--lime); color: #1c2300; font: 700 14px Lexend, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
#new-version span { display: inline-block; }
#new-version.in { animation: nvDrop .42s var(--ease-pop) both; }
#new-version.in span { animation: wiggle 6s 2s infinite; }
@keyframes nvDrop { from { transform: translate(-50%,-60px); } to { transform: translate(-50%,0); } }
#new-version:hover { filter: brightness(1.1); }
#version-tag { position: absolute; left: 12px; bottom: 8px; z-index: 5; font-size: 11px; color: rgba(236,230,214,.45); pointer-events: none; }

#tb-rounds .rt { font-style: normal; }

/* ---------------------------------------------------------------- guide « Comment jouer ? » (menu explicatif, js/guide.js)
   Esport + Ruban : plaques biseautées (−16°) à case d'icône de la couleur de l'onglet et barre basse, bandes indigo à
   losange, à plat (ni flou ni ombre portée). Au-dessus de tout sauf les Paramètres (z 290 < 300). */
#help.guide { position: absolute; inset: 0; z-index: 290; display: flex; align-items: center; justify-content: center; background: rgba(8,6,16,.72); color: #fff; font-family: Lexend, sans-serif; }
#help.guide.gd-in { animation: gdFade .16s ease-out both; }
.guide .kc-grey { --c: #a39e90; --c2: #ddd8cc; --cd: #5d5a52; --c3: #2a2830; }
.gd-box { position: relative; width: 1080px; height: 660px; display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: 84px minmax(0, 1fr) 56px;
  background: #110e18; border: 2px solid #000; box-shadow: 0 0 0 1px #4a4856; border-radius: 14px; overflow: hidden; }
.gd-ico { display: block; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* en-tête : plaque du titre, bande d'état, fermer */
.gd-head { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 0 80px 0 22px; background: #0c0a12; border-bottom: 2px solid #000; }
.gd-plate, .gd-tp { position: relative; display: inline-flex; align-items: stretch; flex: none; overflow: hidden; transform: skewX(var(--sk)); margin-left: 9px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, var(--ink)) 0%, var(--ink) 40%, var(--ink2) 100%); }
.gd-plate { height: 46px; }
.gd-tp { height: 40px; }
.gd-cell { flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--c2), var(--c)); }
.gd-plate .gd-cell { width: 54px; }
.gd-tp .gd-cell { width: 46px; }
.gd-cell .gd-ico { width: 26px; height: 26px; background: var(--ink); transform: skewX(var(--usk)); }
.gd-tp .gd-cell .gd-ico { width: 22px; height: 22px; }
.gd-plate > b, .gd-tp > b { align-self: center; padding: 0 30px 0 16px; transform: skewX(var(--usk)); font: 700 30px/1 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.gd-tp > b { padding: 0 26px 0 14px; font-size: 22px; }
.gd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); }
.gd-tp .gd-bar { height: 3px; }
.gd-sw { position: absolute; inset: 0; transform: translateX(110%); pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.2) 40% 47%, transparent 47% 50%, rgba(255,255,255,.12) 50% 52%, transparent 52%); }
#help.gd-in .gd-plate { animation: gdOpen .28s var(--xo) both; }
#help.gd-in .gd-sw { animation: bnSweep .76s var(--io) .22s both; }
.gd-strip, .gd-status, .gd-newb { display: inline-flex; align-items: center; flex: none; background: var(--strip); transform: skewX(var(--sk)); color: #e9e4ff; font: 600 15px/1 Lexend, sans-serif; white-space: nowrap; }
.gd-strip > span, .gd-status > span, .gd-newb > span { display: flex; align-items: center; gap: .6em; transform: skewX(var(--usk)); }
.gd-strip em, .gd-status em { font-style: normal; }
.gd-strip { height: 30px; margin: 8px 0 0 27px; padding: 0 20px; }
.gd-status { height: 24px; margin-left: 27px; padding: 0 16px; font-size: 13px; }
.gd-x { position: absolute; right: 20px; top: 21px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font: 600 26px/1 Lexend, sans-serif; }
/* onglets : mini-plaques biseautées ; l'actif a sa case d'icône pleine et sa barre */
.gd-tabs { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 9px 15px; background: #0c0a12; border-right: 2px solid #000; overflow: hidden; }
.gd-tab { flex: none; position: relative; display: flex; align-items: stretch; height: 44px; padding: 0; border: 0; border-radius: 0; background: #1e1830; color: #b9b3c9; transform: skewX(var(--sk)); overflow: hidden; text-align: left; }
.gd-tab.last { margin-top: 4px; }
.gd-tc { flex: none; width: 44px; display: grid; place-items: center; }
.gd-tab .gd-ico { width: 26px; height: 26px; background: var(--c); opacity: .75; transform: skewX(var(--usk)); }
.gd-tab b { align-self: center; min-width: 0; padding: 0 8px; transform: skewX(var(--usk)); font: 700 15px/1 Lexend, sans-serif; text-transform: uppercase; white-space: nowrap; }
.gd-tab:hover { background: #2a2240; color: #fff; }
.gd-tab:hover .gd-ico { opacity: 1; }
.gd-tab.on { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, var(--ink)), var(--ink) 70%); color: #fff; }
.gd-tab.on .gd-tc { background: linear-gradient(135deg, var(--c2), var(--c)); }
.gd-tab.on .gd-ico { background: var(--ink); opacity: 1; }
.gd-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
/* contenu d'un onglet : plaque, bande, illustration à gauche, 2 à 4 lignes à droite */
.gd-main { grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; padding: 18px 26px 14px; overflow: hidden; }
.gd-page { height: 100%; display: flex; flex-direction: column; animation: gdRise .18s var(--xo) both; }
.gd-top { display: flex; flex-direction: column; align-items: flex-start; }
.gd-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: start; }
.gd-art { position: relative; width: 400px; height: 300px; display: flex; align-items: center; justify-content: center; background: #1e1830; border-top: 2px solid var(--c); border-radius: 10px; overflow: hidden;
  font: 600 13px/1.2 Lexend, sans-serif; color: #e9e4ff; }
.gd-cap { margin: 10px 4px 0; font: 500 13px/1.4 Lexend, sans-serif; color: #a9a4b4; }
.gd-cap em, .gd-list em { font-style: normal; font-weight: 700; color: #c8e20a; }
.gd-list { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 18px; }
.gd-list li { display: flex; align-items: flex-start; gap: 16px; }
.gd-list p { margin: 0; font: 500 17px/1.35 Lexend, sans-serif; color: #fff; }
.gd-list b { color: #ffd21f; font-weight: 700; }
.gd-ti { flex: none; width: 34px; height: 34px; margin-top: -4px; display: grid; place-items: center; background: #2a2340; border-bottom: 2px solid var(--c); transform: skewX(var(--sk)); }
.gd-ti > * { transform: skewX(var(--usk)); }
.gd-ti > img { width: 22px; height: 22px; object-fit: contain; }
.gd-ti > canvas { width: 30px; height: 30px; }
.gd-ti > .rb { width: 24px; height: 24px; }
/* pied : précédent, losanges, suivant */
.gd-foot { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: #0c0a12; border-top: 2px solid #000; }
.gd-foot .gd-prev { height: 38px; min-width: 140px; padding: 0 18px; font-size: 14px; }
.gd-foot .gd-next { height: 40px; min-width: 160px; font-size: 14px; }
.gd-dots { flex: 1; display: flex; justify-content: center; gap: 13px; }
.gd-dots i { width: 8px; height: 8px; background: #4a4458; transform: rotate(45deg); }
.gd-dots i.on { background: var(--c); box-shadow: 0 0 0 2px #000; }
@keyframes gdFade { from { opacity: 0; } }
@keyframes gdOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes gdRise { from { transform: translateY(12px); opacity: 0; } }

/* illustrations (ga-*) : la vraie art du jeu ; 3 boucles seulement (fusion, glisser, fabrication), le reste est fixe.
   Sans animation : l'image finale (tout visible, en place) */
.ga-obj, .ga-mk, .ga-syn { display: flex; flex-direction: column; align-items: center; }
.ga-obj { gap: 14px; }
.ga-heads { display: flex; gap: 6px; }
.ga-h { position: relative; display: block; flex: none; width: 44px; height: 44px; border-radius: 8px; border: 2px solid #000; background: #2c2840 url(assets/ui/slot.png) center / cover; }
.ga-h > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.ga-h.out > img { opacity: .35; filter: grayscale(1); }
.ga-sk { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e5493b; border: 2px solid #000; }
.ga-sk img { width: 12px; height: 12px; }
.ga-win { position: relative; padding-top: 34px; }
.ga-h.big { width: 104px; height: 104px; border: 3px solid #ffd21f; box-shadow: 0 0 0 3px #000; }
.ga-crown { position: absolute; left: 50%; top: 0; width: 46px; height: 32px; margin-left: -23px; background: #ffd21f; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ga-hp { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; background: var(--ink); border-bottom: 3px solid #e5493b; transform: skewX(var(--sk)); font: 700 18px/1 Lexend, sans-serif; }
.ga-hp > * { transform: skewX(var(--usk)); }
.ga-hp img { width: 22px; height: 22px; object-fit: contain; }
/* dieux : 3 petites cartes (tête du dieu, difficulté, relique) */
.ga-gods { display: flex; gap: 10px; }
.ga-god { --dc: #45d66a; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 10px; background: linear-gradient(180deg, #2b204e, #18122c); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--dc); }
.ga-god.d-mid { --dc: #ffb31f; } .ga-god.d-hard { --dc: #ff4f6a; }
.ga-gh { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: #2a2340; border: 2px solid #000; box-shadow: 0 0 0 2px var(--dc); }
.ga-gh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ga-god b { font: 400 17px/1 Rowdies, sans-serif; color: #fff; }
.ga-god em { padding: 3px 8px; border-radius: 6px; background: var(--dc); color: #16121f; font: 700 12px/1 Lexend, sans-serif; font-style: normal; }
.ga-rel { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,196,40,.12); border: 1px solid rgba(255,196,40,.4); }
.ga-rel img { width: 44px; height: 44px; object-fit: contain; }
/* déroulé d'une manche (Scott 2026-10-21) : 3 étapes en plaques, reliées par des chevrons */
.ga-flow { display: flex; align-items: center; gap: 4px; }
.ga-step { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 10px; background: linear-gradient(180deg, #2b204e, #18122c); border: 2px solid #000; box-shadow: 0 0 0 2px #3a2f63; }
.ga-sic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #2a2340; border: 2px solid #000; box-shadow: 0 0 0 2px #c8e20a; }
.ga-sic img { width: 34px; height: 34px; object-fit: contain; }
.ga-step b { font: 400 16px/1 Rowdies, sans-serif; color: #fff; }
.ga-step em { padding: 3px 8px; border-radius: 6px; background: #c8e20a; color: #16121f; font: 700 12px/1 Lexend, sans-serif; font-style: normal; white-space: nowrap; }
.ga-farr { color: #c8e20a; font: 700 24px/1 Lexend, sans-serif; font-style: normal; }
body.mobile .ga-step { width: 84px; padding: 10px 4px; gap: 6px; }
body.mobile .ga-sic { width: 44px; height: 44px; }
body.mobile .ga-sic img { width: 26px; height: 26px; }
body.mobile .ga-step b { font-size: 13px; }
body.mobile .ga-farr { font-size: 22px; }
/* manches : pastilles de la barre du haut, PV perdus par phase */
/* marché : cartes (pods, prix), fusion en boucle */
.ga-mk { gap: 16px; }
.ga-cards { display: flex; gap: 14px; }
.ga-card { position: relative; width: 96px; height: 100px; display: grid; place-items: center; border-radius: 9px; border: 3px solid var(--rc); background: radial-gradient(circle at 50% 40%, #3a3550, #1a1724); }
.ga-card canvas { width: 72px; height: 72px; }
.ga-card.owned { box-shadow: 0 0 0 3px #c8e20a, 0 0 0 5px #000; }
.ga-pod { position: absolute; left: 4px; top: 4px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; background: var(--rc); color: #15121d; font: 700 13px/22px Lexend, sans-serif; text-align: center; }
.ga-price { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.7); color: #ffd21f; font: 700 13px/1.1 Lexend, sans-serif; }
.ga-price img { width: 14px; height: 14px; }
.ga-merge { position: relative; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.ga-u { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 8px; background: #2a2340; border: 2px solid #000; }
.ga-u canvas { width: 60px; height: 60px; }
.ga-u em { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #ffd21f; font: 700 13px/1 Lexend, sans-serif; font-style: normal; white-space: nowrap; }
.ga-u.c { border-color: #ffd21f; }
.ga-op { width: 14px; text-align: center; color: #c8e20a; font: 700 22px/1 Lexend, sans-serif; font-style: normal; }
.ga-merge .ga-fl { position: absolute; left: 59px; top: 12px; width: 40px; height: 40px; background: #c8e20a; transform: rotate(45deg); opacity: 0; pointer-events: none; }
.ga-merge .ga-u.a { animation: gdMergeA 2.6s var(--io) infinite; }
.ga-merge .ga-u.b { animation: gdMergeB 2.6s var(--io) infinite; }
.ga-merge .ga-u.c { animation: gdMergeC 2.6s var(--xo) infinite; }
.ga-merge .o1 { animation: gdOp 2.6s linear infinite; }
.ga-merge .ga-fl { animation: gdFlash 2.6s linear infinite; }
@keyframes gdMergeA { 0%, 12% { transform: none; opacity: 1; } 38% { transform: translateX(47px); opacity: 1; } 44%, 92% { transform: translateX(47px); opacity: 0; } 100% { transform: none; opacity: 0; } }
@keyframes gdMergeB { 0%, 12% { transform: none; opacity: 1; } 38% { transform: translateX(-47px); opacity: 1; } 44%, 92% { transform: translateX(-47px); opacity: 0; } 100% { transform: none; opacity: 0; } }
@keyframes gdMergeC { 0%, 40% { transform: scale(.6); opacity: .2; } 52% { transform: scale(1.1); opacity: 1; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes gdOp { 0%, 14% { opacity: 1; } 30%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gdFlash { 0%, 36% { opacity: 0; transform: rotate(45deg) scale(.4); } 44% { opacity: .95; transform: rotate(45deg) scale(1.15); } 56%, 100% { opacity: 0; transform: rotate(45deg) scale(1.6); } }
/* plateau : cases rouges / bleues, enclos (planches), un monstre glissé en boucle */
/* synergies : types, familles, exemple de résistances (+20 % à son élément, une faiblesse) */
.ga-syn { gap: 16px; }
.ga-roles { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.ga-role { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ga-role .rb.big { width: 46px; height: 46px; }
.ga-role i { color: #d9cff7; font-style: normal; white-space: nowrap; }
.ga-fams { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.ga-fam { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #2a2340; border: 1px solid #000; }
.ga-fam canvas { width: 38px; height: 38px; }
.ga-el { display: flex; gap: 22px; }
.ga-el > span { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: var(--ink); border-radius: 8px; }
.ga-el img { width: 26px; height: 26px; object-fit: contain; }
.ga-el i { margin-right: 8px; color: #d9cff7; font: 700 15px/1 Lexend, sans-serif; font-style: normal; white-space: nowrap; }
.ga-el i:last-child { margin-right: 0; }
.ga-el i.up { color: #3fe07a; }
.ga-el i.down { color: #ff6b5a; }
/* ton perso : tête, caractéristiques, sort et ses évolutions */
.ga-perso { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 0 8px; }
.ga-me { display: flex; flex-direction: column; align-items: center; }
.ga-me .ga-h.big { width: 92px; height: 92px; border-color: #1aa3ff; }
.ga-lv { position: relative; margin-top: -12px; padding: 4px 10px; background: #1aa3ff; border: 2px solid #000; color: #fff; font: 700 13px/1 Lexend, sans-serif; font-style: normal; transform: skewX(var(--sk)); }
.ga-stats { display: flex; flex-direction: column; gap: 4px; }
.ga-stats span { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 5px; border-left: 3px solid var(--sc); border-radius: 0 6px 6px 0; background: #2a2340; white-space: nowrap; }
.ga-stats img { width: 18px; height: 18px; object-fit: contain; }
.ga-stats b { color: #fff; }
.ga-stats i { color: #c8e20a; font-style: normal; }
.ga-spell { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 7px 12px; border-radius: 8px; background: var(--ink); }
.ga-spell span { display: flex; gap: 3px; }
.ga-spell img.spi { width: 38px; height: 38px; }
.ga-spell span img.spi { width: 30px; height: 30px; }
.ga-spell em { color: #1aa3ff; font: 700 12px/1 Lexend, sans-serif; font-style: normal; }
.ga-arr { color: #8d86b0; font-style: normal; line-height: 1; }
.ga-nosp { display: block; width: 32px; height: 32px; border-radius: 8px; background: #2a2340; }
/* objets : deux ressources = un objet (boucle), kamas et intérêts */
.ga-r { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #000; background: url(assets/ui/slot.png) center / cover; }
.ga-r img { width: 40px; height: 40px; object-fit: contain; }
/* Défi : une ligne de la liste des joueurs, épées dorées (2 impulsions) */
/* au toucher : deux cartes, toucher et appui long */
/* raccourcis (PC) : souris à gauche, touches à droite (lues dans les réglages) */
.gd-set { align-self: flex-start; margin-top: auto; }
.gd-set img { width: 15px !important; }
/* accueil : la ligne du guide entre le choix du mode et JOUER (lime pour un nouveau joueur) */
.gd-row { position: relative; display: flex; align-items: stretch; flex: none; height: 52px; margin: 0 8px; padding: 0; border: 0; overflow: hidden; background: var(--ink); color: #fff; text-align: left; transform: skewX(var(--sk)); }
.gd-row:hover { background: var(--ink2); }
.gd-rc { flex: none; width: 52px; display: grid; place-items: center; background: #2a2638; }
.gd-rc .gd-ico { width: 26px; height: 26px; background: #fff; transform: skewX(var(--usk)); }
.gd-row.new .gd-rc { background: linear-gradient(135deg, #ecff6a, #c8e20a); }
.gd-row.new .gd-rc .gd-ico { background: var(--ink); }
.gd-row.new::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #c8e20a; }
.gd-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px 0 14px; transform: skewX(var(--usk)); }
.gd-rt b { font: 700 15px/1 Lexend, sans-serif; text-transform: uppercase; white-space: nowrap; }
.gd-rt em { color: #a9a4b4; font: 500 12px/1 Lexend, sans-serif; font-style: normal; }
.gd-chev { flex: none; width: 34px; background: #a9a4b4; transform: skewX(var(--usk)); -webkit-mask: url(dofus/assets/ui/ic/chevronRight.png) center / 16px no-repeat; mask: url(dofus/assets/ui/ic/chevronRight.png) center / 16px no-repeat; }
.gd-row:hover .gd-chev { background: #fff; }
.gd-newb { --c: #c8e20a; align-self: center; height: 26px; margin-top: -2px; padding: 0 14px; font-size: 12px; }
/* écran d'accueil : lien vers le guide ; Sanctuaire : bouton du guide ; Paramètres : section Aide */
.wl-how { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; border: 0; background: none; color: #c8e20a; font: 700 14px/1 Lexend, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.wl-how img { width: 16px !important; height: 16px; }
.wl-how:hover { color: #ecff6a; }
.set-hrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.set-hrow .btn-grey { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; }
.set-hrow .btn-grey img { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  #help.guide, #help.guide *, #help.guide *::before, #help.guide *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- tutoriel (carte coach, js/tutorial.js)
   Une carte à la fois, à côté de l'élément expliqué (anneau + flèche), jamais dessus, sans voile. Plaque encre biseautée,
   case d'icône de la couleur du type, barre basse, un reflet ; à plat. z 39 : au-dessus des bulles, du récap, des
   bannières et des notifs ; sous les fenêtres, les scènes (Top 4, Éliminé), le guide et les Paramètres. */
#coach { position: absolute; z-index: 39; left: 0; top: 0; width: 380px; color: #fff; font-family: Lexend, sans-serif; pointer-events: auto; }
.co-box { position: relative; display: flex; flex-direction: column; background: #1e1830; border: 2px solid #000; border-radius: 6px; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.co-plate { position: relative; flex: none; display: flex; align-items: stretch; height: 44px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, var(--ink)) 0%, var(--ink) 45%, var(--ink2) 100%); }
.co-cell { flex: none; width: 48px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c2), var(--c)); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.co-ic { display: block; width: 24px; height: 24px; margin-right: 6px; background: var(--ink); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.co-title { flex: 1; min-width: 0; align-self: center; padding: 0 10px 0 12px; font: 700 16px/1 Lexend, sans-serif; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-n { flex: none; align-self: center; padding: 0 16px 0 4px; color: var(--c); font: 600 12px/1 Lexend, sans-serif; font-style: normal; white-space: nowrap; }
.co-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
.co-sw { position: absolute; inset: 0; transform: translateX(110%); pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.2) 40% 47%, transparent 47% 50%, rgba(255,255,255,.12) 50% 52%, transparent 52%); }
.co-body { min-height: 0; display: flex; flex-direction: column; }
.co-x { margin: 0; padding: 10px 14px 6px; font: 500 15px/1.4 Lexend, sans-serif; color: #f1ecff; }
.co-x b { color: #ffd21f; font-weight: 700; }
.co-x em { color: #c8e20a; font-weight: 700; font-style: normal; }
.co-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 24px 10px 8px; }
.co-skip { height: 32px; padding: 0 6px; border: 0; background: none; color: #a9a4b4; font: 500 12.5px/1 Lexend, sans-serif; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-skip:hover { color: #fff; }
.co-foot .btn-green, .co-foot .btn-grey { height: 34px; padding: 0 18px; font-size: 14px; }
.co-arrow { position: absolute; width: 18px; height: 12px; background: var(--c); pointer-events: none; }
.co-arrow.a-t { top: -12px; margin-left: -9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.co-arrow.a-b { bottom: -12px; margin-left: -9px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.co-arrow.a-l { left: -12px; width: 12px; height: 18px; margin-top: -9px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.co-arrow.a-r { right: -12px; width: 12px; height: 18px; margin-top: -9px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.coach-ring { position: absolute; z-index: 38; pointer-events: none; border: 3px solid var(--c, #c8e20a); outline: 2px solid #15121d; border-radius: 10px; }
.coach-ring.co-pulse { animation: coRing 1.1s ease-in-out 2; }
.coach-ring.poly { border: 0; outline: 0; border-radius: 0; }   /* zone du plateau : contour en losange (SVG), cerné d'encre */
.coach-ring svg { display: block; overflow: visible; }
.coach-ring polygon { fill: none; stroke: var(--c, #c8e20a); stroke-width: 3; stroke-linejoin: round; }
.coach-ring polygon.k { stroke: #15121d; stroke-width: 7; }
#coach.co-in { animation: coIn .2s var(--xo) both; }
#coach.co-in .co-plate { animation: coPlate .28s var(--xo) both; }
#coach.co-in .co-sw { animation: bnSweep .76s var(--io) .2s both; }
#coach.co-out { animation: coOut .16s ease-in forwards; }
@keyframes coIn { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)); } }
@keyframes coPlate { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes coOut { to { opacity: 0; } }
@keyframes coRing { 0%, 100% { transform: none; } 50% { transform: scale(1.05); } }
/* Sanctuaire : « Conseillé » sur la carte Facile ; évolution, Top 4 : une bande indigo à losange (lignes d'un coup) */
.lb-rec { position: absolute; z-index: 2; top: -8px; right: 18px; padding: 3px 10px; background: #c8e20a; color: #15121d; box-shadow: 0 0 0 2px #15121d;
  font: 700 11px/1 Lexend, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; transform: skewX(var(--sk)); pointer-events: none; }
.evo-tuto, .t4-tip { --c: #c8e20a; display: inline-flex; align-items: center; flex: none; background: var(--strip); color: #e9e4ff; transform: skewX(var(--sk)); white-space: nowrap; }
.evo-tuto > span, .t4-tip > span { display: flex; align-items: center; gap: .6em; transform: skewX(var(--usk)); }
.evo-tuto { height: 30px; padding: 0 18px; font: 600 14px/1 Lexend, sans-serif; }
.t4-tip { position: relative; left: 50%; translate: -50% 0; height: calc(34 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0 calc(20 * var(--u)); font: 600 max(var(--fmin), calc(17 * var(--u)))/1 Lexend, sans-serif; }
/* écran d'accueil, page 2 : trois cartes (recrute, place, reste debout) */
.welcome.how { width: 720px; }
.wh-cards { display: flex; gap: 14px; margin: 4px 0 2px; }
.wh-card { width: 220px; min-height: 150px; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; border: 2px solid #000; background: #1e1830; text-align: left; }
.wh-plate { position: relative; flex: none; display: flex; align-items: stretch; height: 52px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, var(--ink)) 0%, var(--ink) 60%); }
.wh-cell { flex: none; width: 52px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c2), var(--c)); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.wh-cell .gd-ico { width: 28px; height: 28px; margin-right: 6px; background: var(--ink); }
.wh-plate b { align-self: center; padding: 0 10px 0 12px; font: 700 17px/1 Lexend, sans-serif; text-transform: uppercase; white-space: nowrap; }
.wh-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
.wh-card p { margin: 0; padding: 12px 14px 14px; font: 500 15px/1.4 Lexend, sans-serif; color: #f1ecff; }
.wh-btns { display: flex; gap: 10px; width: 100%; }
.welcome .wh-btns .btn-green.big { width: auto; flex: 1; min-width: 0; }
.wh-btns .btn-grey { flex: none; padding: 0 18px; }
/* fin du tutoriel sur l'écran des résultats : la notif passe devant */
#game:has(> #results:not([hidden])) #toast { z-index: 47; }
#game:has(> #results:not([hidden])) #tooltip, #game:has(> #results:not([hidden])) #tooltip2 { z-index: 48; }   /* écran de fin : ses bulles passent devant */
@media (prefers-reduced-motion: reduce) {
  #coach, #coach *, .coach-ring { animation: none !important; transition: none !important; }
}

/* ---- version Waven (agent items) : anneaux, brassards, affinités ---- */
.ptc { display: inline-flex; align-items: center; gap: 1px; padding: 0 4px 0 2px; height: 16px; border-radius: 8px; background: var(--ec, #888); color: #15121d; font: 700 11px/16px Lexend, sans-serif; white-space: nowrap; }
.ptc img { width: 12px; height: 12px; margin: 0; filter: brightness(0) saturate(100%) invert(7%); }
.ptc.s { height: 14px; padding: 0 3px 0 1px; font-size: 10px; line-height: 14px; }
.ptc.s img { width: 10px; height: 10px; }
.slot .st .ptc { gap: 0; }
.slot.dup > img { filter: grayscale(.6) brightness(.8); }
.slot .uq-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ffd23f; border: 1.5px solid #15121d; }
.slot .uq-dot.dup { background: #6d6680; }
.slot.can { outline: 2px dashed var(--lime); outline-offset: -3px; }
.res .rs-pts { position: absolute; left: 0; right: 0; bottom: 1px; display: flex; justify-content: center; gap: 1px; pointer-events: none; }
.res.dual { background-color: #2a2140; }
.tt-uq .uq { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 8px; background: #ffd23f; color: #15121d; font: 800 10.5px/15px Lexend, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.tt-uq.dup .uq { background: #6d6680; color: #e8e4f4; }
.tt-uq.dup .tt-text { color: #8d86a3; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.tt-uq.dup .tt-label .r { color: #ffb0a0; }
.chip.aff { border-left: 3px solid var(--ec); }
.chip.aff.up { background: rgba(200,226,10,.22); color: var(--lime); }
.chip.aff.down { background: rgba(255,90,70,.2); color: #ffb0a0; }
.chip.link.on { color: var(--lime); }
.tt-combo.worn .cn { color: #8d86a3; }
.tt-combo.worn .cn::after { content: ' · porté'; color: #8d86a3; font-size: 10.5px; }
.aff-big { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--ec); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #000; }
.aff-big img { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(7%); }
.aff-big b { font: 800 16px/1 Lexend, sans-serif; color: #15121d; }
.set-chip.aff-chip { display: inline-flex; align-items: center; gap: 2px; border-left: 3px solid var(--ec); }
.set-chip.aff-chip img { width: 12px; height: 12px; }
.sk-aff-bar { position: relative; height: 8px; margin: 4px 8px 14px 0; border-radius: 4px; background: #2c2440; }
.sk-aff-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ec); }
.sk-aff-bar > u { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -2px; background: #4b4363; border-radius: 1px; text-decoration: none; }
.sk-aff-bar > u.on { background: var(--lime); }
.sk-aff-bar > u em { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 700 8.5px/1 Lexend, sans-serif; font-style: normal; color: #7a7194; }
.sk-aff-bar > u.on em { color: var(--lime); }
.sk-aff .sk-set-t small { margin-top: 0; }
.sk-aff .sk-set-ic img { filter: none; }
.sk-aff .sk-set-t > span em { color: var(--ec) !important; font-size: 13px !important; }
.tt-uq .tt-dup { margin-top: 4px; font: 700 11px/1.3 Lexend, sans-serif; color: #ffb0a0; }
.tt-uq .tt-label { white-space: nowrap; }

/* bouton de l'accueil pour passer d'une version à l'autre (Scott 2026-10-19 : « sur les deux versions, un gros bouton pour switch ») */
.mode-switch { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; text-decoration: none; color: var(--text, #ece6d6);
  background: linear-gradient(100deg, #8a6a1e, #c9932c); border: 2px solid #f4c542; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, filter .15s; cursor: pointer; }
.mode-switch:hover { transform: translateY(-2px); filter: brightness(1.12); }
.mode-switch:active { transform: translateY(1px); }
.mode-switch .ms-logo { width: 62px; height: 62px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.mode-switch .ms-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-switch .ms-t span { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: .85; }
.mode-switch .ms-t b { font-family: Rowdies, Lexend, sans-serif; font-size: 22px; line-height: 1.05; }
.mode-switch .ms-go { margin-left: auto; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-style: normal; font-size: 34px; font-weight: 900;
  background: rgba(0,0,0,.28); color: #fff; }
body.mobile .mode-switch { margin-top: 8px; padding: 8px 10px; gap: 8px; }
body.mobile .mode-switch .ms-logo { width: 40px; height: 40px; }
body.mobile .mode-switch .ms-t b { font-size: 15px; }
body.mobile .mode-switch .ms-t span { font-size: 10px; }
body.mobile .mode-switch .ms-go { width: 32px; height: 32px; font-size: 24px; }

/* bulle d'unité : tuiles « sort » et « objet » côte à côte (icône Waven du sort, objet porté) ; survol = bulle secondaire */
.tt-gear { display: flex; gap: 8px; padding: 8px 10px; }
.tt-tile { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 6px 6px; border-radius: 9px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-align: center; }
.tt-tile.link { cursor: help; }
.tt-tile.link:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--lime); }
.tt-tile .tsp { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.tt-tile .tsp-none { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.tt-tile .tsp-none img { width: 22px; height: 22px; opacity: .7; }
.tt-tile em { font-style: normal; font-weight: 700; font-size: 12px; color: #fff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-tile small { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 14px; font-size: 10.5px; color: var(--muted, #a39c8c); }
.tt-tile small img { width: 11px; height: 11px; }
.tt-tile.empty { opacity: .75; }
/* bulle d'une unité : « ⤓ Retirer » sous son objet = il revient dans l'inventaire (Scott 2026-10-21 : clair que ça le RANGE, pas que
   ça le supprime → pas de croix rouge, une pilule neutre avec la flèche vers le bac, lime au survol) */
.tt-unequip { display: inline-flex; align-items: center; gap: 4px; height: 20px; margin-top: 2px; padding: 0 9px 0 7px; border: 0; border-radius: 10px; cursor: pointer;
  background: #121116; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); color: #fff; font: 700 10.5px/1 Lexend, "Segoe UI", sans-serif; transition: box-shadow .12s, color .12s; }
.tt-unequip svg { width: 12px; height: 12px; }
.tt-unequip:hover { box-shadow: inset 0 0 0 1.5px var(--lime); color: var(--lime); }
.tt-tile.empty .tsp { width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border: 1.5px dashed rgba(236,230,214,.35); border-radius: 50%; opacity: .6; }
.tt-gear.tt-artes { padding-top: 0; }

/* bulle « Conseillés » (brassards pour une unité) : 3 grosses icônes, les 2 anneaux de la recette dessous (grisés s'ils manquent), détail du survolé */
.rec-row { display: flex; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.rec-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; cursor: help; border: 1px solid transparent; }
.rec-tile:hover, .rec-tile.on { background: rgba(200,226,10,.14); border-color: rgba(200,226,10,.45); }
.rec-tile .big { width: 52px; height: 52px; object-fit: contain; }
.rec-tile .rings { display: flex; gap: 5px; }
.rec-ring { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rec-ring .ri { width: 22px; height: 22px; object-fit: contain; }
.rec-ring .els { display: flex; gap: 1px; }   /* l'élément (ou les 2) que donne l'anneau */
.rec-ring .els img { width: 12px; height: 12px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(0,0,0,.8)); }
.rec-ring.miss { opacity: .35; filter: grayscale(.6); }
.rec-detail { border-top: 1px solid rgba(255,255,255,.1); padding-top: 6px; }
.tt-artes .tt-tile.empty em { color: #8f8a9c; }   /* bulle du héros : place d'artefact libre */

/* ---- syntaxe des bulles (Scott, Atelier 2026-10-21) ---- */
.lx { font-weight: 700; }                                           /* terme spécial : sa couleur (lexicon.js) */
.tt-lex { display: grid; gap: 1px; }                                /* lexique en bas de bulle : « Huilé : » puis son paragraphe */
.tt-lex .lx-t { margin-top: 4px; font-size: 12.5px; }
.tt-lex .lx-t:first-child { margin-top: 0; }
.tt-lex .lx-d { font-size: 12.5px; line-height: 1.4; color: var(--text, #ece6d6); }
.tt-lex .lx-d .fi, .tt-text .fi { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.sp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 3px; }
.sp-name { color: #c8e20a; font-weight: 800; }
.sp-cost { display: inline-flex; align-items: center; gap: 3px; color: #a39e90; font-size: 12px; }
.sp-cost img { width: 14px; height: 14px; }
.br-stat { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.br-stat > img { width: 16px; height: 16px; }
.br-stat .ff img { width: 13px; height: 13px; vertical-align: -0.15em; }
.br-pts { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 4px; }
.tt-uq .ff { margin-top: 4px; }
.ency-lex .tt-lex { padding: 2px 0; }

/* Arabe : la mise en page reste de gauche à droite, chaque bloc de texte prend le sens d'écriture de son contenu */
html[lang="ar"] body :where(div, p, h1, h2, h3, h4, li, td, th, button, label) { unicode-bidi: plaintext; }

/* minuteur de fusion (anneau glissé sur un autre) : 0,5 s ; plein = pulsation, relâcher fusionne */
#fuse-timer { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; }
#fuse-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
#fuse-timer circle { fill: none; stroke-width: 5; }
#fuse-timer .ft-bg { stroke: rgba(0,0,0,.45); }
#fuse-timer .ft-arc { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ftFill linear forwards; }
#fuse-timer.ready .ft-arc { stroke: #fff; animation: none; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px var(--lime)); }
#fuse-timer.ready { animation: ftPulse .45s ease-in-out infinite alternate; }
#fuse-timer.ready::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, rgba(200,226,10,.5), rgba(200,226,10,0) 70%); }
@keyframes ftFill { to { stroke-dashoffset: 0; } }
@keyframes ftPulse { from { transform: scale(1); } to { transform: scale(1.28); } }

/* bulle « Conseillés » : badge « Fusionner » sur un brassard réalisable avec les anneaux du sac (clic = fusion + équipé sur l'unité) */
.rec-craft { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 8px 0 5px; border: 0; border-radius: 9px; cursor: pointer; background: var(--lime); color: #1a1a10;
  font: 800 10px/1 Lexend, "Segoe UI", sans-serif; transition: transform .12s; }
.rec-craft svg { width: 11px; height: 11px; }
.rec-craft:hover { transform: scale(1.08); }