/* ===================================================================
   ÉCHOS DE LA CORRUPTION — Style dark-fantasy, plein écran responsive
   Objectif : aucune barre de défilement globale, tout tient dans le viewport.
   =================================================================== */
:root{
  --bg-0:#0a0709; --bg-1:#150f14; --bg-2:#1e1620;
  --stone:#241b26; --stone-2:#2c2230;
  --gold:#d4a23a; --gold-2:#8a6a22; --gold-hi:#f6dd97;
  --bronze:#6e4f2e; --bronze-2:#3a2a1a;
  --purple:#b066ff; --purple-deep:#5a1e8a; --purple-bar:#7a2fc4;
  --blood:#c0142e; --blood-2:#7a0c1c;
  --teal:#28d8b0; --blue:#5fb4ff;
  --ink:#0c0a0d; --parch:#e8dcc0; --parch-2:#cdbf9a;
  --txt:#efe6d8; --txt-dim:#a99e92;
  --ok:#3ad07a; --hp:#d83a4a; --hp-bg:#3a1418;
  --ult:#4ab8ff; --cd:#1a1116;
  --radius:14px;
  --frame: linear-gradient(145deg,#c79a3e,#6e4f2e 40%,#3a2a1a 60%,#b3892f);
  --commun:#9aa3ad; --rare:#4aa3ff; --epique:#b066ff; --legendaire:#ffb13d;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Spectral','Times New Roman',serif;color:var(--txt);background:#000;
  height:100vh;overflow:hidden}
.font-disp{font-family:'Cinzel','Spectral',serif;letter-spacing:.04em}

#app{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1830aa 0%, transparent 55%),
    radial-gradient(100% 60% at 50% 120%, #1a0c18aa 0%, transparent 50%),
    linear-gradient(180deg, rgba(9,6,11,.80), rgba(7,4,9,.90)),
    url('../assets/bg/battle1.jpg') center/cover no-repeat,
    linear-gradient(180deg,var(--bg-1),var(--bg-0))}

.screen{position:absolute;inset:0 0 64px 0;display:none;flex-direction:column;opacity:0;transition:opacity .25s ease}
.screen#combat{inset:0}
.screen.active{display:flex;opacity:1}

.ornate{position:relative;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--stone-2),var(--stone));
  border:1px solid #00000080;box-shadow:0 2px 0 #00000060, 0 0 0 1px #00000040}
.ornate::before{content:'';position:absolute;inset:3px;border-radius:calc(var(--radius) - 4px);
  border:1px solid transparent;background:var(--frame) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.corner{position:absolute;width:14px;height:14px;border:2px solid var(--gold);opacity:.6}
.corner.tl{top:5px;left:5px;border-right:0;border-bottom:0}
.corner.tr{top:5px;right:5px;border-left:0;border-bottom:0}
.corner.bl{bottom:5px;left:5px;border-right:0;border-top:0}
.corner.br{bottom:5px;right:5px;border-left:0;border-top:0}

.btn{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.05em;color:var(--gold-hi);cursor:pointer;
  user-select:none;padding:11px 16px;border-radius:10px;text-align:center;
  background:linear-gradient(180deg,#3a2c1c,#241a12);border:1px solid #00000080;position:relative;
  box-shadow:0 1px 0 #6e4f2e inset, 0 -1px 0 #000 inset, 0 2px 6px #0008;transition:transform .08s, filter .15s}
.btn::after{content:'';position:absolute;inset:2px;border-radius:8px;border:1px solid #c79a3e40;pointer-events:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:hover{filter:brightness(1.12)}
.btn.primary{background:linear-gradient(180deg,#8a1322,#4a0a13);color:#ffe0d0;box-shadow:0 1px 0 #d4304a inset,0 2px 8px #6a0010}
.btn.primary::after{border-color:#ff8a8a40}
.btn.blue{background:linear-gradient(180deg,#163a5a,#0a1d30);color:#cfeaff;box-shadow:0 1px 0 #4aa3ff inset}
.btn.purple{background:linear-gradient(180deg,#3a1a5a,#1d0a30);color:#e6cfff;box-shadow:0 1px 0 #b066ff inset}
/* KADO : bouton doré brillant (récompense quotidienne, phase de test) */
.btn.kado{position:relative;overflow:hidden;font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;
  color:#3a2600;border:1px solid #ffe6a0;text-shadow:0 1px 0 #fff3c0;
  background:linear-gradient(180deg,#ffe9a8,#f4c044 45%,#d99a1e 78%,#b87b12);
  box-shadow:0 2px 10px #d9a02a66, inset 0 1px 2px #fff7d8, inset 0 -3px 6px #00000033}
.btn.kado::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;
  background:linear-gradient(100deg,transparent,#fffbe6cc,transparent);transform:skewX(-20deg);
  animation:kado-shine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes kado-shine{0%{left:-60%}55%{left:130%}100%{left:130%}}
.btn.kado.ready{animation:kado-pulse 1.4s ease-in-out infinite}
@keyframes kado-pulse{0%,100%{box-shadow:0 2px 10px #d9a02a66, inset 0 1px 2px #fff7d8}
  50%{box-shadow:0 3px 20px #ffcf5add, inset 0 1px 2px #fff7d8}}
.btn.kado:not(.ready){filter:saturate(.78) brightness(.9)}
/* KADO ENERGY — pastille flottante qui dérive sur l'accueil (recharge d'énergie gratuite, 1 h).
   position:fixed mais enfant de #home -> visible uniquement quand l'accueil est actif. */
.kado-energy-float{position:fixed;top:0;left:0;z-index:60;display:none;cursor:pointer;
  width:86px;height:86px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  color:#042a3a;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:.6rem;line-height:1.05;letter-spacing:.03em;
  border:2px solid #cdefff;text-shadow:0 1px 0 #eafaff;
  background:radial-gradient(circle at 38% 30%,#eafcff,#7fdcff 42%,#29a8e0 74%,#1670a8);
  box-shadow:0 4px 18px #29a8e0aa, inset 0 2px 4px #ffffffcc, inset 0 -4px 8px #00000033;
  animation:kado-roam-a 27s ease-in-out infinite, kado-energy-pulse 1.5s ease-in-out infinite}
.kado-energy-float.show{display:flex}
.kado-energy-float .ke-bolt{font-size:1.5rem;line-height:1}
.kado-energy-float:hover{filter:brightness(1.08)}
/* Vagabondage sur TOUT l'écran (unités viewport). Chaque sphère suit un chemin
   distinct pour ne pas se superposer ; bornes prudentes (≤70vw/74vh) pour rester
   visible sur mobile (sphère ≈86px). */
@keyframes kado-roam-a{
  0%  {transform:translate(70vw,14vh) rotate(-4deg)}
  20% {transform:translate(60vw,60vh) rotate(3deg)}
  40% {transform:translate(16vw,70vh) rotate(-3deg)}
  60% {transform:translate(6vw,32vh) rotate(4deg)}
  80% {transform:translate(38vw,10vh) rotate(-2deg)}
  100%{transform:translate(70vw,14vh) rotate(-4deg)}}
@keyframes kado-roam-b{
  0%  {transform:translate(10vw,64vh) rotate(3deg)}
  20% {transform:translate(44vw,26vh) rotate(-3deg)}
  40% {transform:translate(70vw,16vh) rotate(4deg)}
  60% {transform:translate(58vw,72vh) rotate(-4deg)}
  80% {transform:translate(20vw,44vh) rotate(2deg)}
  100%{transform:translate(10vw,64vh) rotate(3deg)}}
@keyframes kado-energy-pulse{0%,100%{box-shadow:0 4px 18px #29a8e0aa, inset 0 2px 4px #ffffffcc}
  50%{box-shadow:0 6px 30px #7fe6ffdd, inset 0 2px 4px #ffffffcc}}
/* Sphère MAUVE de cristaux (UI.doKadoCrystal) — dérivée de la sphère énergie, position distincte */
.kado-crystal-float{position:fixed;top:0;left:0;z-index:60;display:none;cursor:pointer;
  width:86px;height:86px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  color:#2a0a3a;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:.72rem;line-height:1.05;letter-spacing:.03em;
  border:2px solid #efd5ff;text-shadow:0 1px 0 #f6eafa;
  background:radial-gradient(circle at 38% 30%,#f6eaff,#c79bff 42%,#a855f7 74%,#7a2ecc);
  box-shadow:0 4px 18px #a855f7aa, inset 0 2px 4px #ffffffcc, inset 0 -4px 8px #00000033;
  animation:kado-roam-b 33s ease-in-out infinite, kado-crystal-pulse 1.5s ease-in-out infinite}
.kado-crystal-float.show{display:flex}
.kado-crystal-float .ke-bolt{font-size:1.5rem;line-height:1}
.kado-crystal-float:hover{filter:brightness(1.08)}
@keyframes kado-crystal-pulse{0%,100%{box-shadow:0 4px 18px #a855f7aa, inset 0 2px 4px #ffffffcc}
  50%{box-shadow:0 6px 30px #d8a8ffdd, inset 0 2px 4px #ffffffcc}}
.btn:disabled,.btn.disabled{filter:grayscale(.7) brightness(.55);cursor:not-allowed;pointer-events:none}
.btn.sm{padding:7px 11px;font-size:.78rem}

.topbar{display:flex;align-items:center;gap:10px;padding:12px 22px;flex:none;
  background:linear-gradient(180deg,#1c1118,#120a10);border-bottom:1px solid #00000080;box-shadow:0 2px 8px #000a;z-index:5}
.topbar .title{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold-hi);letter-spacing:.1em;text-shadow:0 0 8px #d4a23a55}
.topbar .spacer{flex:1}
/* Sélecteur de langue à drapeaux (topbar + accueil) */
.lang-pick{display:inline-flex;gap:5px;align-items:center;flex:none}
.flag-btn{padding:2px;border:1px solid #ffffff26;border-radius:5px;background:#0006;cursor:pointer;line-height:0;
  opacity:.45;transition:opacity .15s,box-shadow .15s,border-color .15s}
.flag-btn:hover{opacity:.8}
.flag-btn.on{opacity:1;border-color:var(--gold);box-shadow:0 0 7px #d4a23a88}
.flag-svg{width:24px;height:16px;border-radius:2px;display:block}
.home-lang{display:flex;justify-content:center;margin-top:-6px}
.crystal{display:flex;align-items:center;gap:6px;font-family:'Cinzel',serif;color:#dbeeff;font-weight:600;
  background:#0d1420;padding:6px 14px;border-radius:20px;border:1px solid #2f6aa8}
.crystal .gem{width:18px;height:22px;display:inline-block;
  background:url(../assets/ui/cristal.png) center/contain no-repeat;filter:drop-shadow(0 0 5px #4ab8ffaa)}
/* jauge d'énergie (topbar) — cliquable pour recharge cristaux */
.energy{display:flex;align-items:center;gap:5px;font-family:'Cinzel',serif;color:#cfe9ff;font-weight:600;cursor:pointer;
  background:#0e1622;padding:6px 12px;border-radius:20px;border:1px solid #2a4a6a}
.energy .ebolt{color:#ffd24a;text-shadow:0 0 8px #ffcf4a99}
.energy .en-next{font-size:.7rem;color:#7fa8cc;font-weight:400}
.energy.energy-low{color:#ffb0b0;border-color:#7a2c2c;background:#1c0e10}
.energy.energy-low .ebolt{color:#ff6a6a;text-shadow:0 0 8px #ff4a4a99}
/* cristal BLEU réutilisable partout (boutons d'invocation, reforge, récompenses…) — même visuel que la monnaie */
.gem{width:15px;height:19px;display:inline-block;vertical-align:-4px;
  background:url(../assets/ui/cristal.png) center/contain no-repeat;filter:drop-shadow(0 0 3px #4ab8ff99)}
.iconbtn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(180deg,#2a2030,#161018);border:1px solid #00000080;color:var(--gold);cursor:pointer;font-size:1.2rem}
.iconbtn:hover{filter:brightness(1.2)}
.mute-btn{font-size:1.1rem}
.mute-btn.muted{color:#ff6a6a;border-color:#7a2a2a;opacity:.92}
.music-sel{font-family:'Spectral',serif;font-size:.85rem;color:var(--txt);cursor:pointer;
  background:#1c1424;border:1px solid #4a3a52;border-radius:8px;padding:7px 10px;min-width:160px}
.music-sel:focus{outline:none;border-color:var(--gold)}

.navbar{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:20;display:flex;justify-content:center;
  gap:6px;padding:0 12px;background:linear-gradient(180deg,#170e14,#0c070a);border-top:1px solid #00000080;box-shadow:0 -2px 10px #000a}
.navbar .nav{min-width:96px;max-width:160px;flex:1;padding:8px 6px;text-align:center;cursor:pointer;color:var(--txt-dim);
  font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.06em;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;border-top:2px solid transparent}
.navbar .nav .ic{font-size:1.25rem;filter:grayscale(.4)}
.navbar .nav.active{color:var(--gold-hi);border-top-color:var(--gold);background:linear-gradient(180deg,#2a182e88,transparent)}
.navbar .nav.active .ic{filter:none;text-shadow:0 0 8px #d4a23a88}

.page{flex:1;min-height:0;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.wrap{width:100%;max-width:1180px;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px}
/* Menus construits sur le patron .page > .wrap (admin, Arène PvP, Forge, Duel,
   Construction du Monde…) : contenu potentiellement long SANS conteneur de
   défilement interne -> on rend le .wrap défilant par défaut, sinon le bas est
   coupé. Les écrans à scroll interne (équipe/roster/glossaire) ont leur propre
   conteneur `overflow-y:auto` : la règle y est un no-op (leur contenu tient). */
.page > .wrap{overflow-y:auto;padding-right:4px}
.section-h{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:.1em;font-size:.85rem;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;flex:none}
.section-h::before,.section-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#6e4f2e,transparent)}

/* HOME */
/* align-items:center = centrage horizontal ; margin auto (sur .home-wrap) = centrage
   vertical QUAND il y a la place, sinon le contenu défile (overflow-y:auto) au lieu de
   déborder SOUS la navbar (sinon les boutons du bas interceptent les clics — bug admin). */
#home{align-items:center;overflow-y:auto}
.home-wrap{width:100%;max-width:760px;padding:24px;margin:auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.home-hero{position:relative;display:grid;place-items:center;padding:24px 0}
.home-hero h1{font-family:'Cinzel',serif;font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;color:var(--gold-hi);
  text-shadow:0 0 30px #b066ff66,0 2px 0 #000;letter-spacing:.06em}
.home-hero .sub{color:var(--purple);font-style:italic;margin-top:10px;letter-spacing:.22em;font-size:.8rem;text-transform:uppercase}
.home-hero .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#b066ff33,transparent 70%);
  filter:blur(10px);animation:pulse 4s ease-in-out infinite;z-index:-1}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.home-stats{display:flex;gap:14px;width:100%;justify-content:center}
.stat-pill{flex:1;max-width:200px;text-align:center;padding:14px 8px;border-radius:12px}
.stat-pill .v{font-family:'Cinzel',serif;font-size:1.6rem;color:var(--gold-hi)}
.stat-pill .l{font-size:.66rem;color:var(--txt-dim);letter-spacing:.12em;text-transform:uppercase}
.home-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:560px}
.home-actions .btn{font-size:1.05rem;padding:18px}
.home-actions .btn.wide{grid-column:1/-1}

/* Hero cell */
.hero-cell{position:relative;border-radius:12px;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,#241a2a,#15101a);padding:8px 6px 24px;border:1px solid #00000080;transition:transform .1s}
.hero-cell:hover{transform:translateY(-2px)}
.hero-cell:active{transform:scale(.98)}
.hero-cell.sel{box-shadow:0 0 0 2px var(--gold),0 0 16px #d4a23a66}
.hero-cell.locked{filter:grayscale(.9) brightness(.4);cursor:default}
.hero-cell .port{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle,#2a1a30,#0c0810);border:2px solid var(--gold-2);box-shadow:0 0 10px #0008 inset}
.hero-cell .port img{width:104%;height:104%;object-fit:cover}
.hero-cell .nm{font-size:.7rem;text-align:center;margin-top:5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-cell .stars{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.6rem;letter-spacing:1px}
.hero-cell .plus{position:absolute;top:5px;right:6px;font-family:'Cinzel',serif;font-size:.72rem;color:#fff;
  background:#5a0c14;padding:1px 6px;border-radius:8px;border:1px solid #c0142e;z-index:2}
.rar-ring{position:absolute;top:6px;left:6px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 6px currentColor;z-index:2}
.hero-cell .team-badge{position:absolute;bottom:3px;left:5px;font-size:.66rem;color:#bfe0ff;z-index:3;line-height:1.6;
  background:#0e1a2aee;border:1px solid #2f6fae;border-radius:6px;padding:0 4px}
.hero-cell .fav-badge{position:absolute;bottom:3px;right:5px;font-size:.74rem;color:#ffd23f;z-index:3;text-shadow:0 0 6px #ffae00cc}

/* GESTION */
.manage-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(360px,1.4fr);gap:18px}
@media(max-width:880px){.manage-grid{grid-template-columns:1fr;grid-template-rows:minmax(140px,40%) 1fr}}
.roster-panel{display:flex;flex-direction:column;gap:10px;min-height:0}
.roster-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
.roster-scroll::-webkit-scrollbar{width:8px}.roster-scroll::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
/* le cadre ornementé (::before + coins) reste FIXE ; seul l'intérieur défile,
   sinon la bordure de la box défile avec le contenu et coupe le texte (fiches 3+ skills) */
.detail-panel{min-height:0;overflow:hidden;padding:0}
.detail-scroll{height:100%;overflow-y:auto;padding:16px}
.detail-scroll::-webkit-scrollbar{width:8px}.detail-scroll::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}
.empty-detail{display:grid;place-items:center;height:100%;color:var(--txt-dim);font-style:italic}
.sheet-head{display:flex;gap:16px;align-items:flex-start}
.sheet-visual{position:relative;width:160px;height:190px;flex:none;border-radius:12px;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 38%,#5a3a64,#1a0e20);border:1px solid #8a6a22;display:grid;place-items:end center}
/* sprite CONTENU dans le cadre (jamais rogné) : la tête et les pieds restent
   visibles, aligné en bas comme une figure debout. */
.sheet-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 10px #000a)}
.sheet-meta{flex:1;min-width:0}
.sheet-meta h2{font-family:'Cinzel',serif;font-size:1.7rem;color:var(--gold-hi);line-height:1}
.badge{display:inline-block;font-family:'Cinzel',serif;font-size:.66rem;padding:3px 10px;border-radius:10px;letter-spacing:.08em;margin:7px 0;text-transform:uppercase}
.meta-line{font-size:.82rem;color:var(--txt-dim);margin:4px 0;display:flex;gap:7px;align-items:center}
.stat-table{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;padding:12px 16px;font-size:.9rem;margin-top:12px}
.stat-table .lab{color:var(--txt-dim);display:flex;gap:7px;align-items:center}
.stat-table .val{text-align:right;font-family:'Cinzel',serif;color:var(--txt)}
.stat-table .bon{text-align:right;color:var(--ok);font-size:.78rem}
/* puces type de dégât & résistances/faiblesses (Vague 4) */
.dtype-chip{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;padding:1px 8px;border-radius:9px;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.rw-block{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.rw-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.rw-lab{font-size:.7rem;color:var(--txt-dim);min-width:84px;text-transform:uppercase;letter-spacing:.06em}
.rw-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;padding:2px 8px;border-radius:9px;
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent)}
.rw-chip.weak{box-shadow:0 0 6px color-mix(in srgb,var(--c) 40%,transparent)}
.rw-chip.resist{opacity:.85}
.equip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* flex-basis 20 % + min-width : 5 slots en 1 rangée sur desktop, ils WRAPPENT proprement sur mobile
   (min-width:0 sur le contenu via eq-name pour que l'ellipsis marche et éviter le débordement). */
.equip-slot{flex:1 1 calc(20% - 8px);min-width:90px;border-radius:12px;padding:10px;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,#241a2a,#15101a);border:1px solid #4a3a52;transition:transform .1s}
.equip-slot:hover{transform:translateY(-2px);border-color:var(--gold-2)}
.equip-slot.filled{border-color:var(--gold-2)}
.equip-slot .eq-ic{width:46px;height:46px;margin:0 auto;border-radius:10px;display:grid;place-items:center;font-size:1.5rem;overflow:hidden;
  background:radial-gradient(circle,#3a2a18,#160e08);border:1px solid #6e4f2e}
.eq-bonus-line{font-size:.64rem;color:var(--ok);margin-top:3px;line-height:1.25}
.equip-slot.filled .eq-ic{box-shadow:0 0 10px currentColor}
.equip-slot .eq-slot-label{font-size:.6rem;color:var(--txt-dim);letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
.equip-slot .eq-name{font-size:.7rem;color:var(--gold-hi);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-slot .eq-empty{font-size:.7rem;color:#5a4a62;margin-top:2px}
.equip-slot .eq-anvils{justify-content:center}
.equip-slot .eq-slot-cta{margin-top:6px;font-size:.6rem;letter-spacing:.05em;color:var(--gold-hi);opacity:.75}
.equip-slot:hover .eq-slot-cta{opacity:1}
.fusion-box{padding:12px 16px;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fusion-pips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pip{width:20px;height:26px;background:#1a1016;clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%);border:1px solid #3a2a40}
.pip.on{background:linear-gradient(135deg,#d09cff,#7a2fc4);box-shadow:0 0 8px #b066ff99;border-color:#b066ff}
/* symboles distincts par axe de progression : ADN doré, Amélioration cyan */
.pip.adn.on{background:linear-gradient(135deg,#ffe08a,#e0a020);box-shadow:0 0 8px #ffcf5f99;border-color:#ffcf5f}
.pip.amel{clip-path:polygon(50% 0,100% 100%,0 100%)}
.pip.amel.on{background:linear-gradient(135deg,#bfeaff,#2f9fc4);box-shadow:0 0 8px #7fe3ff99;border-color:#7fe3ff}
/* Failles (farm de matériaux) */
.mat-inv{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.mat-chip{display:inline-flex;align-items:center;gap:3px;background:#1a1016;border:1px solid #3a2a40;border-radius:8px;padding:3px 7px;font-size:.82rem}
.mat-chip img{width:22px;height:22px;object-fit:contain}
.mat-chip b{color:var(--gold-hi);margin-left:2px}
.faille-card{margin:10px 0;padding:12px}
.fc-title{font-family:var(--font-disp,serif);font-size:1.05rem;color:var(--gold-hi);margin-bottom:8px}
.faille-diffs{display:flex;gap:10px;flex-wrap:wrap}
.faille-diff{flex:1;min-width:130px;background:#160f1c;border:1px solid #33263c;border-radius:10px;padding:8px}
.fd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.fd-left{font-size:.72rem;color:#9aa3ad}
.fd-rewards{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;min-height:26px}
/* Essences dans le popup de nourrissage */
.feed-ess{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.feed-ess-row{display:flex;align-items:center;gap:8px;background:#160f1c;border:1px solid #33263c;border-radius:8px;padding:5px 8px}
.fe-nm{flex:1;font-size:.85rem}
.fe-xp{color:#bfe0ff;font-size:.78rem}
.fe-step{display:inline-flex;align-items:center;gap:5px}
.fe-btn{width:26px;height:26px;border-radius:6px;border:1px solid #4a3a52;background:#241a2c;color:#fff;font-size:1.05rem;line-height:1;cursor:pointer}
.fe-max{width:auto;padding:0 8px;font-size:.72rem;letter-spacing:.03em;color:#e9d7ff}
.fe-input{width:52px;height:26px;border-radius:6px;border:1px solid #4a3a52;background:#0f0a15;color:#fff;
  text-align:center;font-size:.9rem;font-weight:700;-moz-appearance:textfield}
.fe-input::-webkit-outer-spin-button,.fe-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fe-have{color:#9aa3ad;font-size:.75rem}
/* Ascendance (arbre de talents) */
.asc-voies{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.asc-voie{background:#160f1c;border:1px solid #33263c;border-radius:8px;padding:8px;cursor:pointer}
.asc-voie.on{border-color:var(--gold-hi);box-shadow:0 0 8px #ffcf5f55}
.asc-nodes{display:flex;flex-direction:column;gap:5px;margin:8px 0}
.asc-node{display:flex;align-items:center;gap:8px;background:#160f1c;border:1px solid #33263c;border-radius:8px;padding:6px 8px}
.asc-node.locked{opacity:.55}
.asc-node.maxed{border-color:var(--gold-hi);box-shadow:0 0 6px #ffcf5f44}
/* Arbre de talents : rangées par TIER reliées par des flèches ↓ */
.asc-tree{display:flex;flex-direction:column;gap:2px;margin:8px 0}
.asc-tier{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.asc-tier .asc-node{flex:1 1 180px;min-width:160px}
.asc-link{text-align:center;color:#5a4a62;font-size:.8rem;line-height:1}
.an-nm{flex:1;font-size:.85rem}
.an-lvl{color:var(--gold-hi);font-size:.82rem;min-width:36px;text-align:center}
.skill-row{display:flex;gap:12px;padding:10px 4px;align-items:flex-start;border-top:1px solid #ffffff0d}
.skill-ic{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;
  background:radial-gradient(circle,#3a1a2a,#120a10);border:1px solid var(--gold-2)}
.skill-row .nm{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.9rem}
.skill-row .tag{font-size:.6rem;color:var(--txt-dim);letter-spacing:.1em;text-transform:uppercase}
.skill-row .ds{font-size:.78rem;color:var(--txt-dim);margin-top:3px;line-height:1.4}
.skill-row .ds-eff{font-size:.76rem;color:#bfe0ff;margin-top:4px}
.skill-row .ds-eff b{color:var(--ok)}
.mgmt-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lockfav-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lockfav-row .btn.on-fav{color:#ffd23f;box-shadow:0 0 0 1px #ffae0066 inset,0 0 10px #ffae0044}
.lockfav-row .btn.on-lock{color:#cdbfff;box-shadow:0 0 0 1px #8a6ad066 inset,0 0 10px #8a6ad044}

/* Modal */
/* overlay SCROLLABLE : `margin:auto` centre la carte quand elle tient, et permet de
   DÉFILER quand elle est plus haute que l'écran (ex. Ressources avec beaucoup de matériaux).
   Remplace `align-items/justify-content:center` qui coupait le haut des cartes trop hautes. */
.overlay{position:absolute;inset:0;z-index:40;display:none;overflow-y:auto;padding:16px;background:#000c;backdrop-filter:blur(3px)}
.overlay.show{display:flex}
.overlay>*{margin:auto}
/* Mini-jeux (Fermer_MDR) : conteneur PLEIN ÉCRAN au-dessus du jeu + barre de retour */
#minigame{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:#000}
#minigame.show{display:flex}
#minigame .mg-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;flex:none;
  background:linear-gradient(180deg,#161019,#100b16);border-bottom:1px solid var(--line)}
#minigame .mg-title{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.95rem;flex:1;letter-spacing:.03em}
#minigame .mg-frame{flex:1;width:100%;border:0;background:#000;display:block}
.modal{width:min(92vw,560px);max-height:84vh;overflow-y:auto;padding:20px}
.modal::-webkit-scrollbar{width:8px}.modal::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}
.modal h3{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.2rem;margin-bottom:12px;text-align:center}
.item-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.item-card{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#241a2a,#15101a);border:1px solid #4a3a52;transition:transform .1s}
.item-card:hover{transform:translateY(-2px);border-color:var(--gold-2)}
.item-card .it-ic{width:40px;height:40px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:1.3rem;overflow:hidden;
  background:radial-gradient(circle,#3a2a18,#160e08);border:1px solid currentColor}
.item-card .it-nm{font-size:.78rem;color:var(--gold-hi)}
.item-card .it-bonus{font-size:.66rem;color:var(--ok)}

/* ÉQUIPE */
#team .wrap{align-items:center}
.team-slots{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;flex:none}
.team-slot{width:86px;height:110px;border-radius:14px;position:relative;cursor:pointer;
  background:linear-gradient(180deg,#241a2a,#120c16);border:1px dashed #4a3a52;display:grid;place-items:center}
.team-slot.filled{border-style:solid;border-color:var(--gold-2)}
.team-slot:hover{border-color:var(--gold-2)}
.team-slot img{width:90%;height:90%;object-fit:contain}
.team-slot .ord{position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;
  background:#5a0c14;border:1px solid #c0142e;display:grid;place-items:center;font-size:.72rem;font-family:'Cinzel',serif;color:#fff}
.team-slot .empty{color:#4a3a52;font-size:1.8rem}
/* Ordre d'action : au CENTRE-HAUT du slot (le badge n° est en haut-gauche, la croix ✕
   en haut-droite) -> plus de chevauchement avec la croix de retrait. */
.team-slot .order-pick{position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:4;cursor:pointer;
  background:#3a2c10;color:#ffd97a;border:1.5px solid #ffd97a;border-radius:9px;
  font-family:'Cinzel',serif;font-weight:700;font-size:.72rem;padding:1px 5px;appearance:none;text-align:center;
  box-shadow:0 1px 4px #000a}
.team-slot .order-pick:hover{background:#5a4418}
.team-slot .row-tag{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:.56rem;
  letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:7px;white-space:nowrap;
  font-family:'Cinzel',serif;border:1px solid}
.team-slot.avant .row-tag{color:#9affc0;background:#0e2a1a;border-color:#2f7a4e}
.team-slot.arriere .row-tag{color:#bfdcff;background:#10243a;border-color:#2f5a8a}
.team-slot.avant{box-shadow:0 0 0 1px #2f7a4e44}
.team-slot.arriere{box-shadow:0 0 0 1px #2f5a8a44}
.team-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex:none;flex-wrap:wrap}
.team-power{font-family:'Cinzel',serif;font-size:.86rem;color:#ffd9a0}
.team-power b{color:#fff;font-size:1.05rem}
.train-lock-banner{background:#2a1f0e;border:1px solid #6e5a2a;color:#ffd97a;border-radius:8px;padding:8px 10px;margin-bottom:10px;font-size:.82rem;line-height:1.35}
.lc-row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:.88rem;cursor:pointer}
.lc-slots{display:flex;flex-direction:column;gap:4px}
.lc-slot{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer}
.sum-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px 10px 0}
.sum-tab{padding:6px 12px;border:1px solid #4a3a58;border-radius:16px;font-family:'Cinzel',serif;font-size:.78rem;color:#c9b8e0;cursor:pointer;background:#1a1226}
.sum-tab.on{border-color:var(--gold);color:var(--gold-hi);background:#2a1f3a}
.pool-tools{display:flex;gap:6px;align-items:center;width:100%;margin:4px 0 8px}
.pool-tools .pool-search{flex:1;width:auto;text-align:left;padding:6px 10px;font-size:.9rem}
.pool-tools .sort-sel{flex:none}
.team-pool{flex:1;min-height:0;overflow-y:auto;width:100%;padding-right:6px}
.team-pool::-webkit-scrollbar{width:8px}.team-pool::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}

/* équipes multiples : onglets */
.team-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex:none;width:100%}
.team-tab{display:flex;align-items:center;gap:7px;cursor:pointer;padding:7px 12px;border-radius:10px;
  background:linear-gradient(180deg,#241a2a,#15101a);border:1px solid #4a3a52;color:var(--txt-dim);
  font-family:'Cinzel',serif;font-size:.78rem;transition:transform .1s,border-color .12s}
.team-tab:hover{transform:translateY(-1px);border-color:var(--gold-2)}
.team-tab.on{color:var(--gold-hi);border-color:var(--gold);box-shadow:0 0 12px #d4a23a44}
.team-tab .tt-no{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;
  background:#5a0c14;border:1px solid #c0142e;color:#fff}
.team-tab.on .tt-no{background:#7a2fc4;border-color:#b066ff}
.team-tab.add{color:var(--gold);font-size:1.1rem;padding:7px 14px}
.team-tools{display:flex;gap:10px;justify-content:center;flex:none}
/* bannière de bonus de faction */
.faction-buff{flex:none;font-size:.82rem;color:var(--txt-dim);text-align:center;padding:9px 14px;border-radius:10px;
  background:linear-gradient(180deg,#1a141f,#120e16);border:1px dashed #3a2a44;line-height:1.4}
.faction-buff.active{color:#dfeaff;border:1px solid #2f6fae;border-style:solid;
  background:linear-gradient(180deg,#15263acc,#0c1622cc);box-shadow:0 0 14px #2f6fae44}
.faction-buff b{color:var(--gold-hi)}
.faction-buff.active{display:flex;align-items:center;gap:12px;text-align:left}
.faction-buff .fb-art{width:52px;height:52px;flex:none;border-radius:10px;object-fit:cover;
  border:1px solid var(--fc,#2f6fae);box-shadow:0 0 10px #0008, 0 0 8px var(--fc,#2f6fae)55}
.faction-buff .fb-txt{flex:1}
/* Emblème de l'Alliance sur l'accueil — fond sombre du JPEG effacé par mix-blend screen */
.alliance-emblem{display:block;width:150px;max-width:52%;height:auto;margin:0 auto 6px;
  mix-blend-mode:screen;filter:drop-shadow(0 0 16px #ffcf5a55);opacity:.96;pointer-events:none}
/* ---------- Codex / Lore ---------- */
.codex{display:flex;flex-direction:column;gap:16px;padding-bottom:8px}
.codex-intro{text-align:center;padding:6px 10px 14px}
.codex-intro .codex-alliance{display:block;width:132px;height:auto;margin:0 auto 4px;
  mix-blend-mode:screen;filter:drop-shadow(0 0 14px #ffcf5a55)}
.codex-intro h2{font-family:'Cinzel',serif;color:var(--gold-hi);margin:2px 0 6px;letter-spacing:.04em}
.codex-intro p{font-size:.86rem;color:var(--txt-dim);line-height:1.5;max-width:640px;margin:0 auto}
.codex-facs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.codex-fac{border:1px solid var(--fc);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#16111d,#100c15);box-shadow:0 0 12px #0006, inset 0 0 0 1px #ffffff08}
.codex-banner{position:relative;height:120px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.codex-banner .codex-banner-tint{position:absolute;inset:0;
  background:linear-gradient(180deg,#0000 30%,#000000cc)}
.codex-banner.noart{height:54px;background-image:none;
  background:linear-gradient(135deg,#1c1626,#100c15);border-bottom:2px solid var(--fc)}
.codex-banner h3{position:relative;z-index:1;margin:0;padding:8px 12px;font-family:'Cinzel',serif;
  letter-spacing:.04em;text-shadow:0 2px 6px #000}
.codex-fac p{margin:0;padding:11px 13px 14px;font-size:.82rem;color:#cdbfe0;line-height:1.5}
/* ---------- Page Bonus ---------- */
.bonus-page{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.bonus-item{border:1px solid #3a2a44;border-radius:12px;padding:12px 14px;
  background:linear-gradient(180deg,#16111d,#100c15)}
.bonus-item.active{border-color:var(--ok);box-shadow:0 0 12px #35d08a33}
.bonus-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.bonus-head h3{margin:0;font-family:'Cinzel',serif;font-size:1rem;letter-spacing:.03em;color:var(--gold-hi)}
.bon-on{color:#0c1a12;background:var(--ok);border-radius:20px;padding:2px 10px;font-size:.7rem;font-weight:700}
.bon-off{color:var(--txt-dim);border:1px solid #3a2a44;border-radius:20px;padding:2px 10px;font-size:.7rem}
.bonus-item p{margin:4px 0 0;font-size:.84rem;color:#cdbfe0;line-height:1.5}
.bonus-notes{margin:8px 0 0;padding-left:18px;font-size:.8rem;color:var(--txt-dim);line-height:1.6}
.bonus-empty{text-align:center;color:var(--txt-dim);font-size:.86rem;padding:18px;
  border:1px dashed #3a2a44;border-radius:12px;line-height:1.6}
.bonus-empty span{font-size:.8rem}
.bon-units{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.bon-unit{display:flex;flex-direction:column;align-items:center;gap:2px;width:56px;opacity:.42}
.bon-unit.have{opacity:1}
.bon-unit img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid #3a2a44}
.bon-unit span{font-size:.6rem;text-align:center;color:var(--txt-dim);line-height:1.1}
/* qui peut porter un objet (glossaire armurerie) */
.gloss-who{font-size:.7rem;color:#bdf3e6;margin-top:2px}
/* gomette d'équipe active dans la topbar des menus */
.team-gomette{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;
  background:radial-gradient(circle,#7a2fc4,#2a0a3a);border:1px solid #b066ff;box-shadow:0 0 10px #b066ff55}
.team-gomette .tg-no{font-family:'Cinzel',serif;font-size:.86rem;color:#fff;font-weight:600}
.team-gomette:hover{filter:brightness(1.2)}

/* emplacements : cibles de drop + croix de retrait */
.team-slot.picking{border-color:var(--gold);box-shadow:0 0 14px #d4a23a66}
.team-slot.drag-over{border-color:#5fb4ff;box-shadow:0 0 16px #5fb4ff88;background:linear-gradient(180deg,#15263a,#0c1622)}
.team-slot .slot-x{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:#5a0c14;border:1px solid #c0142e;color:#fff;font-size:.8rem;cursor:pointer;z-index:3}
.team-slot .slot-x:hover{filter:brightness(1.3)}
.team-slot[draggable=true]{cursor:grab}
.team-slot[draggable=true]:active{cursor:grabbing}
.hero-cell[draggable=true]{cursor:grab}

/* champ texte (renommer une équipe) */
.text-input{width:100%;font-family:'Spectral',serif;font-size:1rem;color:var(--txt);text-align:center;
  background:#120c16;border:1px solid #4a3a52;border-radius:10px;padding:10px 12px;margin-bottom:16px}
.text-input:focus{outline:none;border-color:var(--gold)}

/* carte de zoom au maintien */
.zoomcard{position:absolute;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:#000a;backdrop-filter:blur(3px);pointer-events:none}
.zoomcard.show{display:flex;animation:fadein .15s}
.zoom-inner{width:min(86vw,360px);padding:18px 20px 20px;text-align:center}
/* boîte de portrait à hauteur définie + image positionnée en absolu pour rester
   CONTENUE dedans (sinon les sprites hauts débordaient sur les stats en dessous —
   même cause que le médaillon boutique : height:% non résolu sur un item grid). */
.zoom-art{position:relative;height:min(40vh,260px);margin-bottom:8px;overflow:hidden}
.zoom-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px #000c)}
.zoom-nm{font-family:'Cinzel',serif;font-size:1.4rem;color:var(--gold-hi)}
.zoom-meta{font-size:.8rem;color:var(--txt-dim);margin:6px 0 12px}
.zoom-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-family:'Cinzel',serif;font-size:.92rem;color:var(--txt)}
.zoom-stats .zp{color:#ffd9a0}

/* INVOCATION */
#summon .summon-stage{flex:1;min-height:0;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 35%,#2a1040,transparent 70%)}
.summon-portal{width:240px;height:240px;border-radius:50%;position:relative;
  background:radial-gradient(circle,#b066ff44,#5a1e8a22,transparent 70%);display:grid;place-items:center;animation:spin 18s linear infinite}
.summon-portal::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:2px solid #b066ff55;border-top-color:#ffd9ff;animation:spin 6s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.summon-portal .rune{font-family:'Cinzel',serif;font-size:3.4rem;color:#ffd9ff;text-shadow:0 0 20px #b066ff}
.summon-actions{display:flex;gap:16px;justify-content:center;padding:18px;flex:none}
.summon-actions .btn{min-width:200px;font-size:1.05rem;padding:16px}

/* Storm / lightning reveal */
.storm{position:absolute;inset:0;z-index:30;display:none;overflow:hidden;background:#000;cursor:pointer}
.storm.show{display:block}
/* Invocation — nuit étoilée vue du sol + vaisseau « Le Châtiment » + rayons d'invocation au sol */
.summon-sky{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 78% 14%,#cfe9ff,transparent),
    radial-gradient(1.2px 1.2px at 33% 40%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 62% 30%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 88% 44%,#dfe,transparent),
    radial-gradient(1.3px 1.3px at 24% 60%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 52% 12%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 92% 24%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 44% 52%,#cfe9ff,transparent),
    radial-gradient(130% 90% at 50% -10%,#0b1538,#06070f 55%,#000 100%)}
.chatiment-arc{position:absolute;top:5%;left:50%;width:min(78vw,500px);z-index:3;
  filter:drop-shadow(0 8px 20px #000a) drop-shadow(0 0 18px var(--bolt,#88aaff));will-change:transform,opacity}
.chatiment-arc img{width:100%;height:auto;display:block}
.chatiment-arc.arcin{animation:chatiment-arc 1.6s cubic-bezier(.3,.55,.4,1) backwards}
@keyframes chatiment-arc{
  0%{opacity:0;transform:translate(-200%,46px) scale(.42) rotate(7deg)}
  15%{opacity:1}
  55%{transform:translate(90%,-6px) scale(.78) rotate(-5deg)}
  80%{transform:translate(-30%,4px) scale(.95) rotate(2deg)}
  100%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}}
.chatiment-arc.parked{animation:chatiment-hover 3s ease-in-out infinite}
@keyframes chatiment-hover{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
/* rayons : 1 par unité, source ligne en haut -> cône diffusé au sol, unité au pied */
.summon-rays{position:absolute;left:0;right:0;bottom:0;height:84%;z-index:2}
.summon-row{position:absolute;left:0;right:0;bottom:0;height:100%;
  display:flex;align-items:flex-end;justify-content:center;gap:0;padding:0 6px}
/* chevauchement quand les unités sont trop grandes pour tenir côte à côte */
.summon-row .summon-ray + .summon-ray{margin-left:calc(-1 * var(--ov,0px))}
.summon-row.front{z-index:3}
/* rang arrière : beams pleine hauteur depuis le ciel, mais unités plus hautes,
   plus petites, atténuées et décalées d'un demi-pas (effet de profondeur) */
.summon-row.back{z-index:1;transform:translateX(calc(var(--uw,90px) * .5));filter:brightness(.88)}
.summon-row.back .ray-unit{bottom:26%;transform-origin:bottom center}
.summon-row.back .ray-unit.go{animation:ray-unit-in-back .55s forwards}
@keyframes ray-unit-in-back{0%{opacity:0;transform:translateY(16px) scale(.56)}100%{opacity:1;transform:scale(.8)}}
.summon-row.back .ray-cone{filter:brightness(.85)}
.summon-ray{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.summon-ray .ray-line{width:5px;height:18%;border-radius:3px;opacity:0;transform-origin:top;
  background:linear-gradient(to bottom,transparent,var(--rc,#fff));filter:drop-shadow(0 0 8px var(--rc,#fff))}
.summon-ray .ray-line.go{animation:ray-line-in .4s ease-out forwards}
@keyframes ray-line-in{0%{opacity:0;transform:scaleY(0)}100%{opacity:.9;transform:scaleY(1)}}
.summon-ray .ray-cone{width:var(--cw,110px);height:56%;margin-top:-1px;transform-origin:top;opacity:0;
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,var(--rc,#fff) 0%,var(--rc,#fff) 14%,transparent 96%);
  filter:blur(1px) drop-shadow(0 0 16px var(--rc,#fff))}
.summon-ray .ray-cone.go{animation:ray-cone-in .55s ease-out forwards}
@keyframes ray-cone-in{0%{opacity:0;transform:scaleY(0)}55%{opacity:.95}100%{opacity:.7;transform:scaleY(1)}}
.summon-ray .ray-unit{position:absolute;bottom:1%;width:var(--uw,90px);text-align:center;opacity:0;z-index:3}
.summon-ray .ray-unit.go{animation:ray-unit-in .55s forwards}
@keyframes ray-unit-in{0%{opacity:0;transform:translateY(16px) scale(.7)}100%{opacity:1;transform:none}}
.summon-ray .ray-unit img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 14px var(--rc,#fff))}
.summon-ray .ray-stars{font-size:.6rem;letter-spacing:1px;margin-top:-2px;text-shadow:0 1px 3px #000}
.summon-ray .ray-new{font-size:.52rem;color:#ffd9e0;font-family:'Cinzel',serif}
.flash{position:absolute;inset:0;background:var(--bolt,#fff);opacity:0;pointer-events:none;z-index:2}
.flash.on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:.5}100%{opacity:0}}
.reveal-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
/* bounding box : l'apparition reste contenue, ne déborde plus l'écran */
.reveal-hero{width:min(38vh,230px);height:min(38vh,230px);display:grid;place-items:center;overflow:hidden;
  border-radius:18px;padding:10px;background:radial-gradient(60% 60% at 50% 42%,#2a1040cc,transparent 76%);
  border:1px solid #5a1e8a55;box-shadow:0 0 30px #5a1e8a44 inset}
.reveal-hero.pop{animation:popin .45s backwards}
.reveal-hero img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 26px var(--bolt,#fff))}
@keyframes popin{from{transform:scale(.4);opacity:0}}
.reveal-name{font-family:'Cinzel',serif;font-size:1.5rem;color:var(--gold-hi)}
.reveal-stars{font-size:1.1rem;letter-spacing:3px}
.reveal-counter{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:var(--txt-dim);font-family:'Cinzel',serif;font-size:.82rem;z-index:3}
.reveal-skip-btn{position:absolute;top:16px;right:16px;z-index:4;font-family:'Cinzel',serif;
  font-size:.9rem;font-weight:600;letter-spacing:.03em;color:#fff4d6;background:#1a1206ee;
  border:1.5px solid #d9a94e;border-radius:9px;padding:8px 16px;cursor:pointer;
  box-shadow:0 2px 10px #000a,0 0 12px #d9a94e55;animation:kado-pulse 1.6s ease-in-out infinite}
.reveal-skip-btn:hover{background:#2a1c08ee;color:#fff;border-color:#ffd77a;animation:none}
.summon-summary{cursor:pointer}
.bal-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.82rem}
.bal-table th,.bal-table td{padding:4px 6px;text-align:center;border-bottom:1px solid #ffffff14}
.bal-table th{color:var(--txt-dim);font-family:'Cinzel',serif;font-weight:700}
.bal-table td:first-child{text-align:left;color:#cdbfff}
.bal-table input{width:74px;background:#0d0b16;border:1px solid #ffffff22;color:#eee;border-radius:5px;padding:3px 5px;text-align:right}
/* stat d'équipement au MAX de sa fourchette (roll parfait) */
.stat-max{color:#ffcf66;font-weight:700;text-shadow:0 0 6px #ffcf6688}

.result-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.result-cell{text-align:center}
.result-cell .port{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--gold-2);background:#1a1020}
.result-cell .port img{width:106%;height:106%;object-fit:cover}
.result-cell.new .port::after{}
.result-cell.new .tag-new{display:block;font-size:.55rem;color:#ffd9e0;background:#c0142e;border-radius:6px;margin-top:3px}

/* GLOSSAIRE */
.gloss-tabs{display:flex;gap:10px;flex:none;max-width:420px}
.gloss-tabs .btn{flex:1}
.gloss-tabs .btn.on{filter:brightness(1.25);box-shadow:0 0 0 1px var(--gold) inset}
.gloss-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
.gloss-scroll::-webkit-scrollbar{width:8px}.gloss-scroll::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}

/* CAMPAGNE */
.stage-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:6px}
.stage-list::-webkit-scrollbar{width:8px}.stage-list::-webkit-scrollbar-thumb{background:#3a2a1a;border-radius:4px}
.stage-card{display:flex;gap:16px;align-items:center;padding:16px;cursor:pointer}
.stage-card:hover{filter:brightness(1.08)}
.stage-card.locked{filter:grayscale(.8) brightness(.5);cursor:not-allowed}
.stage-card .num{width:52px;height:52px;border-radius:12px;flex:none;display:grid;place-items:center;font-family:'Cinzel',serif;
  font-size:1.5rem;color:var(--gold-hi);background:radial-gradient(circle,#3a1a2a,#120a10);border:1px solid var(--gold-2)}
.stage-card .info{flex:1}
.stage-card .info .t{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.1rem}
.stage-card .info .d{font-size:.78rem;color:var(--txt-dim);font-style:italic}
.stage-card .badge-boss{font-size:.6rem;color:#fff;background:#7a2fc4;padding:3px 9px;border-radius:8px;letter-spacing:.08em}
.stage-card .badge-elite{font-size:.6rem;color:#fff;background:linear-gradient(180deg,#b066ff,#5a1e8a);padding:3px 9px;border-radius:8px;letter-spacing:.08em}

.empty-note{text-align:center;color:var(--txt-dim);font-style:italic;padding:30px 10px;font-size:.9rem}
/* File de toasts (1.8) : empilement propre, chacun sa durée de vie + sortie animée.
   Le conteneur positionne ; chaque .toast s'anime en Y sans se réécraser. */
.toast-stack{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column-reverse;align-items:center;gap:8px;pointer-events:none;
  width:max-content;max-width:92vw}
.toast{background:linear-gradient(180deg,#2a1f10,#160e08);border:1px solid var(--gold);color:var(--gold-hi);
  padding:11px 20px;border-radius:10px;font-size:.85rem;font-family:'Cinzel',serif;box-shadow:0 6px 18px #000c;
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;text-align:center;max-width:100%}
.toast.show{opacity:1;transform:translateY(0)}
.toast.out{opacity:0;transform:translateY(-8px)}

/* COMBAT */
#combat.active{background:#000;display:flex;flex-direction:column}
.combat-top{display:flex;align-items:center;gap:14px;padding:10px 22px;font-family:'Cinzel',serif;font-size:.8rem;
  color:var(--gold-hi);letter-spacing:.05em;flex:none;background:linear-gradient(180deg,#160d12,#0c070a);
  border-bottom:1px solid #6e4f2e44;z-index:8}
.combat-top .seg{display:flex;gap:6px;align-items:center}
.combat-top .seg b{color:#fff}
.combat-top .spacer{flex:1}
/* bandeau bonus de faction attribué par joueur (versus) */
.combat-faction-bonus{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:4px 16px 0;z-index:7;flex:none}
.cfb-chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;padding:3px 10px;border-radius:999px;
  border:1px solid #43e0a266;background:#0e2a1fcc;color:#bff5dd;box-shadow:0 0 10px #43e0a233}
.cfb-chip.foe{border-color:#e76a8666;background:#2a0e16cc;color:#ffd0da;box-shadow:0 0 10px #e76a8633}
.cfb-chip b{color:#fff}
.boss-bar{padding:8px 22px 10px;background:linear-gradient(180deg,#120a10cc,transparent);z-index:7;flex:none}
.boss-bar .row{display:flex;align-items:center;gap:10px;max-width:900px;margin:0 auto}
.boss-icon{width:34px;height:34px;border-radius:8px;flex:none;background:radial-gradient(circle,#7a2fc4,#1a0a2a);
  border:1px solid #b066ff;display:grid;place-items:center;font-size:1rem}
.boss-name{font-family:'Cinzel',serif;color:var(--purple);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;flex:1;text-shadow:0 0 8px #b066ff55}
.boss-hpwrap{height:14px;border-radius:8px;background:#1a0a2a;overflow:hidden;margin-top:4px;border:1px solid #5a1e8a;box-shadow:0 0 8px #b066ff33}
.boss-hp{height:100%;background:linear-gradient(90deg,#9a3fe0,#5a1e8a);box-shadow:0 0 10px #b066ff;transition:width .4s}
.boss-hpval{font-size:.66rem;color:var(--txt-dim);text-align:right;margin-top:2px;max-width:900px;margin-left:auto;margin-right:auto}
.initiative{display:flex;gap:6px;justify-content:center;align-items:center;padding:6px 22px;flex:none;
  background:linear-gradient(180deg,#0c0810cc,transparent);z-index:7;overflow:hidden}
.init-label{font-family:'Cinzel',serif;font-size:.62rem;color:var(--txt-dim);letter-spacing:.1em;margin-right:6px}
.init-chip{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;flex:none;border:2px solid #4a3a52;
  background:#1a1020;opacity:.6;transition:all .3s}
.init-chip img{width:108%;height:108%;object-fit:cover;margin:-4%}
.init-chip.ally{border-color:var(--gold-2)}
.init-chip.enemy{border-color:#7a2fc4}
.init-chip.current{opacity:1;transform:scale(1.18);border-color:var(--gold);box-shadow:0 0 12px var(--gold)}
.init-chip.dead{filter:grayscale(1) brightness(.4)}
.init-arrow{color:var(--gold);font-size:.8rem;opacity:.5}
.init-sep{color:#7a2fc4;font-size:1rem;opacity:.85;margin:0 1px;font-weight:700}   /* Tour Joueur | Tour Monstre */
/* --- Classement PvP --- */
.lb-toggle{text-transform:none;letter-spacing:0;padding:2px 12px;font-size:.72rem;flex:none}
/* Calendrier de connexion (fidélité) */
.lc-card{max-width:540px}
.lc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-height:46vh;overflow-y:auto;padding:2px}
.lc-cell{position:relative;border:1px solid #2e2140;border-radius:8px;background:#181022;padding:5px 3px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lc-cell .lc-day{font-family:'Cinzel',serif;color:var(--txt-dim);font-size:.6rem;margin-bottom:2px}
.lc-cell .lc-rw{line-height:1.25;color:#cfe0ff;font-size:.62rem}
.lc-milestone{border-color:#ffd24a55}
.lc-done{opacity:.45}
.lc-check{position:absolute;top:1px;right:4px;color:var(--ok,#7fe3a0);font-weight:700;font-size:.75rem}
.lc-active{border-color:var(--gold);box-shadow:0 0 10px #ffd24a55;background:#241a10}
/* Objectifs à étoiles (campagne) */
.stage-stars{margin-top:3px;display:flex;gap:2px}
.stage-stars .st{color:#4a4160;font-size:.85rem;line-height:1}
.stage-stars .st.on{color:var(--gold);text-shadow:0 0 5px #ffd24a88}
/* Aperçu loot au survol (🎁) */
.stage-loot{position:relative;display:inline-block;cursor:help;font-size:1rem;margin-bottom:2px}
.loot-pop{position:absolute;right:0;top:118%;z-index:30;display:none;flex-direction:column;gap:2px;
  min-width:172px;padding:8px 10px;border-radius:8px;background:#140e1e;border:1px solid #3a2b52;
  box-shadow:0 6px 18px rgba(0,0,0,.55);text-align:left;font-size:.72rem;line-height:1.5;color:#cfe0ff;white-space:nowrap}
.loot-pop b{color:#fff}
.stage-loot:hover .loot-pop,.stage-loot:focus .loot-pop{display:flex}
.faille-diff.fd-nightmare{border:1px solid #ff5d5d55;border-radius:8px;background:rgba(255,60,60,.05)}
/* ===== UI de combat ATB (bandeau unité active) ===== */
/* Dock ATB : bouton Équipe ancré à gauche (absolu) ; file de course + unité active + actions CENTRÉES */
.atb-dock{display:flex;align-items:center;gap:16px;justify-content:center;width:100%;padding:4px 10px;position:relative}
.atb-team-btn{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;font-size:1.3rem;
  padding:6px 8px;border-radius:10px;border:1px solid #3a2b52;background:#181022;position:absolute;left:8px;top:50%;transform:translateY(-50%)}
.atb-team-btn:hover{border-color:var(--gold)}
.atb-team-lb{font-size:.6rem;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.08em}
/* JAUGE ATB « course » (bas) : barre où CHAQUE unité a UN portrait qui PROGRESSE de gauche → droite ;
   la ligne d'action (⚔) est à DROITE, celui qui l'atteint agit. Position = remplissage (atb/GAUGE_MAX),
   glissement en CSS (transition) → on les voit avancer. AUCUN changement de couleur/brillance. */
.atb-track{position:relative;width:min(56%,600px);height:42px;margin:12px auto 8px;
  background:linear-gradient(180deg,#150e22ee,#0d0916ee);border:1px solid #3a2b52;border-radius:24px;box-shadow:inset 0 2px 6px #000a;overflow:visible}
.atb-goal{position:absolute;right:0;top:0;bottom:0;width:48px;border-radius:0 24px 24px 0;
  background:linear-gradient(90deg,transparent,#3a2f18cc);border-left:2px solid #ffcf6a;pointer-events:none;overflow:hidden}
.atb-goal::after{content:'⚔';position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#ffd97a;font-size:1.05rem;filter:drop-shadow(0 0 4px #ffb03a)}
.atb-run{position:absolute;top:50%;width:34px;height:34px;border-radius:50%;overflow:hidden;
  border:2px solid #4a3a52;background:#0d0a16;transform:translateY(-50%);transition:left .55s linear, transform .3s ease-out;cursor:pointer;z-index:2}
.atb-run img{width:108%;height:108%;object-fit:cover;margin:-4%}
.atb-run.qally{border-color:var(--gold-2)}
.atb-run.qenemy{border-color:#7a2fc4}
.atb-actor{display:flex;flex-direction:column;align-items:center;gap:2px}
.atb-portrait{width:74px;height:74px;border-radius:50%;overflow:hidden;border:2px solid #4a4160;cursor:pointer;background:#0d0a16}
.atb-portrait img{width:100%;height:100%;object-fit:cover}
.atb-actor.my-turn .atb-portrait{border-color:#cfe0ff;box-shadow:0 0 14px #bcd4ffaa}
.atb-actor-nm{font-size:.72rem;color:#e8dcff;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atb-actions{display:flex;gap:8px;align-items:center}
.atb-actions{display:flex;gap:10px;align-items:center}
.atb-actbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:78px;height:74px;padding:5px;border-radius:14px;border:1px solid #4a3a62;background:linear-gradient(180deg,#241733,#160f22);
  cursor:pointer;transition:.12s;box-shadow:0 2px 6px #0006}
.atb-actbtn:hover:not(.disabled){border-color:var(--gold);transform:translateY(-3px);box-shadow:0 4px 12px #0008}
.atb-actbtn.disabled{opacity:.38;cursor:default}
.atb-actbtn .ab-ic{font-size:1.6rem;line-height:1}
.atb-actbtn .ab-lb{font-size:.64rem;color:#e2ecff;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atb-actbtn .ab-sub{position:absolute;top:2px;right:4px;font-size:.6rem;color:#ffd97a}
.atb-enemyturn{color:var(--txt-dim);font-style:italic;font-size:.82rem;padding:0 12px}
.atb-teampanel{position:absolute;left:10px;bottom:96px;z-index:40;min-width:230px;max-width:60vw;
  background:#120d1e;border:1px solid #3a2b52;border-radius:10px;padding:8px 10px;box-shadow:0 8px 22px rgba(0,0,0,.6)}
.atb-teampanel .tp-head{font-family:'Cinzel',serif;color:var(--gold);font-size:.78rem;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.atb-teampanel .tp-close{cursor:pointer;color:var(--txt-dim);font-size:.9rem;padding:0 4px}
.atb-teampanel .tp-row{display:flex;align-items:center;gap:7px;padding:4px 2px;border-top:1px solid #241a33;cursor:pointer}
.atb-teampanel .tp-row.dead{opacity:.4}
.atb-teampanel .tp-row img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.atb-teampanel .tp-nm{flex:1;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atb-teampanel .tp-hp{font-size:.68rem;color:#9fe3b0}
.atb-teampanel .tp-chips{display:flex;gap:2px}
.lb-list{display:flex;flex-direction:column;gap:5px}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:#181022;border:1px solid #2e2140}
.lb-row.me{border-color:var(--gold);box-shadow:0 0 8px #ffd24a44}
.lb-rank{width:26px;text-align:center;font-family:'Cinzel',serif;color:var(--txt-dim)}
.lb-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-tier{font-family:'Cinzel',serif;font-size:.82rem}
.lb-pts{min-width:56px;text-align:right;color:#ffd97a;font-weight:700}
.field{flex:1;min-height:0;position:relative;overflow:hidden;background-size:cover;background-position:center}
.field::before{content:'';position:absolute;inset:0;background:#0a0610;opacity:.42;z-index:0;mix-blend-mode:multiply}
.field::after{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(75% 55% at 50% 92%,#1a0a2a55,transparent 70%),linear-gradient(180deg,#0a0610cc,transparent 30%,#0a0610aa)}
.speech{position:absolute;top:14px;left:50%;transform:translateX(-50%);max-width:60%;z-index:6;
  background:linear-gradient(180deg,#efe6cf,#cdbf9a);color:#2a1a10;padding:11px 16px;border-radius:6px;font-size:.86rem;
  line-height:1.35;font-style:italic;box-shadow:0 4px 12px #000a,0 0 0 2px #8a6a22;animation:fadein .4s;text-align:center}
@keyframes fadein{from{opacity:0;transform:translateX(-50%) translateY(-6px)}}
/* Bandeau « VS <pseudo> » d'ouverture d'un combat PvP : annonce le JOUEUR en défense. */
.pvp-versus{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:8;
  display:flex;align-items:center;gap:18px;pointer-events:none;
  font-family:'Cinzel',serif;text-align:center;animation:vsIn .45s cubic-bezier(.2,.9,.3,1.4)}
.pvp-versus.out{animation:vsOut .55s forwards}
.pvp-versus .vs-x{font-size:1.9rem;color:#b066ff;text-shadow:0 0 12px #b066ffaa}
.pvp-versus .vs-mid{display:flex;flex-direction:column;line-height:1.05}
.pvp-versus .vs-vs{font-size:1.25rem;letter-spacing:.24em;color:#e7d3ff;text-shadow:0 0 10px #b066ff88}
.pvp-versus .vs-name{font-size:2rem;font-weight:700;letter-spacing:.04em;color:#fff;
  text-transform:uppercase;text-shadow:0 0 16px #b066ff,0 2px 4px #000c;max-width:70vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes vsIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@keyframes vsOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.units{position:absolute;inset:0;z-index:4}
.unit{position:absolute;transform:translate(-50%,-100%);cursor:pointer;transition:filter .2s;text-align:center}
.unit.ally{height:clamp(120px,18vh,190px)}
/* tailles par rang : Normal < Soldat < Élite < Boss */
.unit.enemy{height:clamp(110px,16vh,170px)}            /* Normal */
.unit.enemy.soldat-unit{height:clamp(122px,18vh,186px)}  /* Soldat (anciennes « élites » réutilisant un sprite) */
.unit.enemy.elite-unit{height:clamp(145px,21vh,212px)}   /* Élite (monstres dédiés : Liche, Limier) */
.unit.enemy.boss-unit{height:clamp(150px,22vh,230px)}    /* Boss */
/* Boss de RAID (l'Entité) : imposant mais RECULÉ (derrière les combattants du 1er plan,
   au-dessus du décor). Ancré au CENTRE vertical (translate -50%,-50% au lieu du -100% des
   autres unités) + placé à top:50% -> le grand sprite est centré à droite et ne déborde plus du haut. */
.unit.enemy.raid-boss{height:clamp(180px,28vh,340px);z-index:-1;transform:translate(-50%,-50%)}
.unit.enemy.big-art{height:clamp(150px,21vh,218px)}   /* (héritage, réservé) */
.unit.soldat-unit .ename{color:#a9c2ea;text-shadow:0 0 7px #4a78c8;font-weight:600}
.unit.elite-unit .ename{color:#d9b0ff;text-shadow:0 0 8px #b066ff;font-weight:600}
.unit.boss-unit .ename{color:#ff5a6a;text-shadow:0 0 10px #c0142e;font-weight:700;font-size:.72rem;letter-spacing:.04em}
.unit .spr{position:relative;transition:transform .18s;height:100%}
.unit img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 8px 10px #000c);pointer-events:none;display:block;margin:0 auto}
.unit.enemy img{transform:scaleX(-1)}
/* Ennemis à art FRONTAL (ex. sbires de Faille) : ne pas mirrorer (noFlip) */
.unit.enemy.noflip img,.unit.enemy.noflip .spr-anim{transform:none}
/* Enseigne de l'Union : le grand étendard rend le sprite « haut » -> le personnage
   paraît petit vs les autres. On agrandit CE sprite (ancré en bas) pour l'aligner. */
.unit.ally.hero-u_enseigne .spr img{transform:scale(1.35);transform-origin:50% 100%}
/* Lame de Sang (Unité Invoquée de Vyrkhal) : arme dressée, taille réduite + lueur sang */
.unit.blade-unit .blade-spr img{height:auto;max-height:66%;width:auto;margin-top:auto;
  filter:drop-shadow(0 0 6px #b3121e) drop-shadow(0 4px 4px #000b)}
.unit.blade-unit .blade-spr{display:flex;align-items:flex-end;justify-content:center}
.dock .ally.blade-cell .blade-ring img{object-fit:contain;padding:16%;box-sizing:border-box}
.dock .ally.blade-cell{opacity:.92}
/* flash bref quand un monstre « framed » encaisse un coup (Phase 2) */
.unit.enemy img.flash-hit{filter:drop-shadow(0 8px 10px #000c) brightness(1.7) saturate(.5)}
.unit .hpbar{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:64px;height:7px;background:var(--hp-bg);
  border-radius:4px;overflow:hidden;border:1px solid #000}
.unit .hpbar .f{height:100%;background:linear-gradient(90deg,#ff5a5a,#b01020);transition:width .3s}
.unit .ename{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:.64rem;
  color:#ffd9d9;white-space:nowrap;text-shadow:0 1px 3px #000}
/* badge de niveau du monstre (= numéro du stage) */
.unit .ename .enemy-lvl{color:#d9b0ff;background:#2a1740;border:1px solid #7a3bd0;border-radius:6px;
  padding:0 4px;font-size:.9em;margin-right:2px;text-shadow:none}
/* état MORT figé : plus de ré-animation à chaque render (corrige le clignotement) */
.unit.dead{pointer-events:none;opacity:.30;filter:grayscale(1) brightness(.5);
  transform:translate(-50%,-100%) rotate(7deg) scale(.9)}
.unit.dead .spr,.unit.dead .spr-anim>i{animation:none!important}
/* fondu de mort joué UNE seule fois, au moment du décès */
.unit.dying{animation:die .55s forwards}
@keyframes die{to{opacity:.30;transform:translate(-50%,-100%) scale(.9) rotate(7deg);filter:grayscale(1) brightness(.5)}}
.unit.sel-ring .spr::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:70px;height:20px;
  border-radius:50%;border:2px solid #ff3a4a;box-shadow:0 0 12px #ff3a4a;animation:selpulse 1s infinite}
@keyframes selpulse{50%{box-shadow:0 0 24px #ff3a4a}}
.unit.targetable-ally .spr::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:70px;height:20px;
  border-radius:50%;border:2px solid var(--teal);box-shadow:0 0 12px var(--teal);animation:selpulse 1s infinite}
.unit.active .spr{animation:idle 1.6s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-5px)}}
.unit.act-attack .spr{animation:lunge .52s}
@keyframes lunge{38%{transform:translateX(48px) scale(1.13)}}
.unit.enemy.act-attack .spr{animation:lungeL .52s}
@keyframes lungeL{38%{transform:translateX(-48px) scale(1.13)}}
.unit.act-hit .spr{animation:hit .35s}
@keyframes hit{0%,100%{transform:translateX(0)}25%{transform:translateX(-12px)}60%{transform:translateX(7px)}}
.unit.act-hit img{filter:drop-shadow(0 8px 10px #000c) brightness(2.4) sepia(1) hue-rotate(-30deg) saturate(3)}
.unit.act-skill .spr{animation:skillpop .6s}
@keyframes skillpop{40%{transform:translateY(-18px) scale(1.2)}}
.dmg-pop{position:absolute;font-family:'Cinzel',serif;font-weight:700;z-index:20;pointer-events:none;
  animation:dmgrise 1s forwards;text-shadow:0 2px 4px #000;font-size:1.1rem}
@keyframes dmgrise{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-24px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-72px) scale(1)}}
.dmg-pop.dmg{color:#ff6a6a}.dmg-pop.crit{color:#ffcf3a;font-size:1.6rem}
/* Cassian « Mot » : le texte « Silence ! » reste affiché 2 s (au lieu d'1 s). */
.dmg-pop.silence{color:#c9a0ff;font-size:1.35rem;letter-spacing:.5px;animation:dmgrise 2s forwards}
/* Éclat de fin d'entraînement (UI._trainXpBurst) */
.xp-burst{position:fixed;left:50%;top:38%;transform:translateX(-50%);z-index:80;pointer-events:none;text-align:center;animation:xpburst 1.9s ease-out forwards}
.xp-burst .xpb-nm{font-size:.9rem;color:#bdf3e6;text-shadow:0 2px 4px #000}
.xp-burst .xpb-xp{font-family:'Cinzel',serif;font-weight:700;font-size:2.2rem;color:#7fffd6;text-shadow:0 0 14px #1f8a72,0 2px 6px #000}
.xp-burst .xpb-lvl{margin-top:4px;font-family:'Cinzel',serif;font-weight:700;font-size:1.2rem;color:#ffd97a;text-shadow:0 0 12px #b8860b,0 2px 4px #000}
.xp-burst .xpb-cry{margin-top:2px;color:#9fe4ff;font-size:1rem;text-shadow:0 2px 4px #000}
@keyframes xpburst{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}30%{transform:translate(-50%,-14px) scale(1)}80%{opacity:1;transform:translate(-50%,-40px) scale(1)}100%{opacity:0;transform:translate(-50%,-70px) scale(.95)}}
/* Animation d'évolution (UI._evolveAnim) : sacrifice du fourrage + montée d'étoile */
.evo-anim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(5,3,12,.72);pointer-events:none;animation:evo-fade 2.6s forwards}
@keyframes evo-fade{0%{opacity:0}8%{opacity:1}86%{opacity:1}100%{opacity:0}}
.evo-stage{position:relative;width:240px;height:270px;display:flex;align-items:center;justify-content:center}
.evo-glow{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,var(--evc,#ffd97a),transparent 68%);filter:blur(4px);animation:evo-glow 2.6s ease-out forwards}
@keyframes evo-glow{0%{opacity:0;transform:scale(.4)}30%{opacity:.9;transform:scale(1.1)}60%{opacity:.65;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.evo-target{position:relative;width:140px;height:140px;object-fit:contain;z-index:2;filter:drop-shadow(0 0 18px var(--evc,#ffd97a));animation:evo-pop 2.6s ease-out}
@keyframes evo-pop{0%{transform:scale(.7);opacity:.6}20%{transform:scale(1.1)}42%{transform:scale(1)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.evo-fodder{position:absolute;width:62px;height:62px;object-fit:contain;border-radius:50%;z-index:1;animation:evo-sacrifice 1.1s ease-in forwards}
@keyframes evo-sacrifice{0%{transform:translate(var(--fx,-100px),var(--fy,-60px)) scale(1);opacity:.9}100%{transform:translate(0,0) scale(.15);opacity:0;filter:brightness(3)}}
.evo-stars{position:absolute;top:2px;display:flex;gap:6px;z-index:3}
.evo-star{font-size:2rem;color:#ffdf6e;text-shadow:0 0 12px #ffb300,0 0 4px #fff;opacity:0;transform:scale(0);animation:evo-star 1.6s ease-out forwards}
@keyframes evo-star{0%{opacity:0;transform:scale(0) rotate(-40deg)}45%{opacity:1;transform:scale(1.5) rotate(8deg)}65%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.evo-label{position:absolute;bottom:8px;font-family:'Cinzel',serif;font-weight:700;color:#ffe9a8;text-shadow:0 2px 6px #000;animation:popin .6s .55s both}
.dmg-pop.heal{color:#5aff9a}.dmg-pop.miss{color:#cfcfcf}
/* pops secondaires type de dégât (Vague 4) */
.dmg-pop.weak{color:#ff5a8a;font-size:.9rem;letter-spacing:.5px}
.dmg-pop.resist{color:#9fb6c4;font-size:.9rem;letter-spacing:.5px}
.side-btns{position:absolute;z-index:6}
.side-btns.left{left:14px;bottom:18px;display:flex;flex-direction:column;gap:10px}
.side-btns.right{right:14px;bottom:18px;display:flex;flex-direction:column;gap:10px}
.round-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:'Cinzel',serif;font-size:.62rem;
  color:var(--gold-hi);cursor:pointer;background:radial-gradient(circle,#2a2030,#120a14);border:2px solid var(--gold-2);box-shadow:0 2px 8px #000a;line-height:1}
.round-btn .ic{font-size:1.2rem;margin-bottom:2px;display:block}
.round-btn.on{border-color:var(--gold);box-shadow:0 0 14px #d4a23a88;color:#fff}
.round-btn:active{transform:scale(.94)}
.round-btn{position:relative}
.loop-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:#3aa0ff;color:#fff;font:700 .62rem/18px 'Cinzel',serif;text-align:center;
  box-shadow:0 0 8px #3aa0ffaa,0 1px 3px #000a;border:1px solid #bfe0ff}
.dock{background:linear-gradient(180deg,#1c1320,#0c070a);border-top:2px solid #6e4f2e44;padding:12px 8px 14px;z-index:8;box-shadow:0 -4px 14px #000a;flex:none}
.dock-row{display:flex;justify-content:center;gap:18px;flex-wrap:nowrap}
.dock .ally{width:104px;position:relative;text-align:center;flex:0 0 auto;padding-top:22px}
.dock .ally .ring{position:relative;width:68px;height:68px;margin:0 auto;border-radius:50%;background:radial-gradient(circle,#2a1a30,#0c0810);
  border:3px solid var(--gold-2);overflow:hidden;cursor:pointer;box-shadow:0 0 8px #0008 inset}
.dock .ally .ring img{width:112%;height:112%;object-fit:cover;margin:-6%}
.dock .ally.ult-ready .ring{border-color:var(--ult);box-shadow:0 0 16px var(--ult),0 0 30px #4ab8ff66}
.dock .ally.ult-ready .ring::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #aee4ff;animation:selpulse 1.1s infinite;pointer-events:none}
.dock .ally.dead .ring{filter:grayscale(1) brightness(.4)}
.dock .ally.acting .ring{box-shadow:0 0 0 3px #ffd9a0,0 0 18px #ffd9a0}
.dock .ally .nm{font-size:.62rem;color:var(--txt);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .ally .hpval{font-size:.56rem;color:var(--txt-dim)}
.dock .ally .hpmini{width:74px;height:6px;margin:3px auto 0;background:var(--hp-bg);border-radius:3px;overflow:hidden;border:1px solid #000}
.dock .ally .hpmini .f{height:100%;background:linear-gradient(90deg,#ff5a5a,#b01020);transition:width .3s}
.dock .ally .skillbtn{position:absolute;top:54px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;
  cursor:pointer;z-index:4;background:radial-gradient(circle,#3a2a18,#160e08);border:1px solid var(--gold-2);box-shadow:0 1px 4px #000a}
.dock .ally .skillbtn.left{left:0}.ally .skillbtn.right{right:0}
.dock .ally .skillbtn.cooling{filter:grayscale(.6) brightness(.5)}
.dock .ally .skillbtn .cdnum{position:absolute;font-family:'Cinzel',serif;font-size:.72rem;color:#fff;text-shadow:0 1px 2px #000}
.dock .ally .skillbtn.empty{opacity:.25;pointer-events:none}
.dock .ally.dead .skillbtn,.dock .ally.dead .ultpct{display:none}
.tooltip{position:absolute;z-index:50;max-width:260px;padding:11px 13px;background:linear-gradient(180deg,#2a1f10,#160e08);
  border:1px solid var(--gold);border-radius:8px;font-size:.78rem;color:var(--txt);box-shadow:0 6px 18px #000c;display:none}
.tooltip.show{display:block}
.tooltip .nm{font-family:'Cinzel',serif;color:var(--gold-hi);margin-bottom:4px}
.tooltip .tag{font-size:.6rem;color:var(--purple);letter-spacing:.08em}
.result-modal{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:#000c}
.result-modal.show{display:flex}
.result-card{width:min(90vw,400px);text-align:center;padding:28px 22px}
.result-card h2{font-family:'Cinzel',serif;font-size:2.2rem;margin-bottom:10px}
.result-card.win h2{color:var(--gold-hi);text-shadow:0 0 20px #d4a23a88}
.result-card.lose h2{color:#ff5a6a;text-shadow:0 0 20px #c0142e88}
.reward-line{font-size:1rem;margin:12px 0;color:var(--txt)}

/* ===== V3 : tooltip compétences unité, mérite, améliorations ===== */
.tooltip .tip-skill{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding-top:8px;border-top:1px solid #ffffff14}
.tooltip .tip-ic{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.85rem;
  background:radial-gradient(circle,#3a1a2a,#120a10);border:1px solid var(--gold-2)}
.tooltip .tip-skname{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.78rem}
.tooltip .tip-skdesc{font-size:.7rem;color:var(--txt-dim);line-height:1.35;margin-top:2px}

.merit-ico{display:inline-block;font-weight:700;line-height:1}
.reward-line.milestone{color:#ffd9e0;font-size:.92rem}
.merit{display:flex;align-items:center;gap:6px;font-family:'Cinzel',serif;color:#f0dcae;font-weight:600;
  background:#1c1608;padding:6px 14px;border-radius:20px;border:1px solid #6e5a2e}
.merit .mgem{display:inline-block;font-size:.95rem;line-height:1;vertical-align:-1px}

/* level + skill rank chips on sheet */
.lvl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,#1c2a26,#101816);border:1px solid #1f6a58}
.lvl-row .lvl-val{font-family:'Cinzel',serif;color:#bdf3e6;font-size:1.05rem}
.lvl-bar{flex:1;height:8px;border-radius:4px;background:#0c1412;overflow:hidden;border:1px solid #1f6a58}
.lvl-bar .f{height:100%;background:linear-gradient(90deg,#5fe0c0,#1f8a72);transition:width .3s}
.lvl-row .lvl-bar{margin-top:5px}
.xp-note{margin-top:4px;font-size:.72rem;color:#8fb8ae;letter-spacing:.02em}

/* equipment management tab */
.equip-mgmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.eq-card{padding:12px;border-radius:12px;background:linear-gradient(180deg,#241a2a,#15101a);border:1px solid #4a3a52;
  display:flex;flex-direction:column;gap:8px;position:relative}
/* objet RÉSERVÉ (wip) : grisé + badge « À venir » (équipement glossaire & modale) */
.eq-card.wip,.item-card.wip{filter:grayscale(.85) brightness(.7);opacity:.7}
.item-card.wip{cursor:not-allowed}
.wip-tag{position:absolute;top:6px;right:6px;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:#d9c27a;background:#000a;border:1px solid #6e5a2e;border-radius:7px;padding:1px 6px;z-index:2}
.eq-card .eq-head{display:flex;gap:10px;align-items:center}
.eq-card .eq-ic2{width:42px;height:42px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:1.4rem;overflow:hidden;
  background:radial-gradient(circle,#3a2a18,#160e08);border:1px solid currentColor}
.eq-card .eq-nm{font-family:'Cinzel',serif;font-size:.84rem;color:var(--gold-hi)}
.eq-card .eq-lv{font-size:.62rem;color:#bdf3e6}
.eq-card .eq-bonus{font-size:.7rem;color:var(--ok)}
.eq-card .eq-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.eq-card .eq-acts .btn{flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px);padding:7px;font-size:.72rem;white-space:nowrap}
/* objets équipés : liseré + badge portrait du porteur */
.eq-card.equipped{border-color:#6e5a2e;box-shadow:0 0 0 1px #6e5a2e55,0 0 10px #00000060}
.eq-card .eq-wearer{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;
  overflow:hidden;border:2px solid var(--gold-2);background:#0c0810;box-shadow:0 0 8px #000a;z-index:2}
.eq-card .eq-wearer img{width:118%;height:118%;object-fit:cover;margin:-9%}
.eq-card .eq-wearer-tag{font-size:.62rem;color:#ffd9a0;font-family:'Cinzel',serif;opacity:.9;margin-top:-2px}

/* multi-select roster mode */
.hero-cell .selbox{position:absolute;top:5px;left:5px;width:18px;height:18px;border-radius:5px;z-index:4;
  border:2px solid var(--gold);background:#000a;display:none;align-items:center;justify-content:center;font-size:.7rem;color:#fff}
.manage.multiselect .hero-cell .selbox{display:flex}
.hero-cell.checked .selbox{background:var(--gold);color:#000}
.hero-cell.checked{box-shadow:0 0 0 2px var(--gold),0 0 14px #d4a23a66}
.manage-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.manage-toolbar .btn{padding:8px 12px;font-size:.76rem}
/* Barre de navigation Héros : recherche + chips de filtre + onglets de tri (façon GoH) */
.mgmt-tools{display:flex;flex-direction:column;gap:8px;width:100%;margin:8px 0 4px}
.mgmt-tools .pool-search{width:100%;text-align:left;padding:7px 11px;font-size:.9rem}
.mgmt-tools-top{display:flex;gap:8px;align-items:center}
.mgmt-tools-top .pool-search{flex:1}
.mgmt-tools-top .btn{white-space:nowrap}
.mgmt-active-note{font-size:.74rem;color:var(--txt-dim);padding:2px 2px 0}
.mgmt-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mgmt-lbl{font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.08em;color:var(--txt-dim);text-transform:uppercase;margin-right:2px}
.mgmt-chip{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.03em;padding:4px 9px;border-radius:999px;
  border:1px solid var(--gold-2);color:var(--gold-hi);background:linear-gradient(180deg,#221a26,#160f18);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;line-height:1;white-space:nowrap;user-select:none}
.mgmt-chip:hover{border-color:var(--gold)}
.mgmt-chip.on{background:linear-gradient(180deg,#4a3410,#2a1e08);border-color:var(--gold-hi);box-shadow:0 0 8px #d4a23a55}
.mgmt-chip img{width:14px;height:14px;object-fit:contain}
/* Box (Principale + ajoutées) */
.box-cnt{font-size:.66rem;color:var(--txt-dim);margin-left:2px}
.mgmt-chip.box-over{border-color:var(--hp);box-shadow:0 0 8px #d83a4a66}
.mgmt-chip.box-over .box-cnt{color:#ff9a9a}
.mgmt-chip.box-add{border-style:dashed;color:var(--txt-dim)}
.box-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.box-toolbar .box-name{width:auto;flex:1;min-width:120px;text-align:left;padding:5px 9px;font-size:.82rem}
.box-cap-note{font-size:.7rem;color:var(--txt-dim)}
.box-move-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 2px;padding:6px 8px;border:1px solid var(--gold-2);border-radius:8px;background:#1e1620}
.box-move-lbl{font-size:.74rem;color:var(--gold-hi)}
.box-move-btns{display:flex;gap:5px;flex-wrap:wrap}
.box-move-btns .btn.sm{padding:4px 9px;font-size:.7rem}
/* Bandeau d'événement bonus (accueil) */
.event-banner{margin:10px auto 0;max-width:520px;padding:8px 14px;border-radius:10px;text-align:center;
  font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.03em;color:#fff7d8;
  background:linear-gradient(90deg,#7a3a10,#b8781a,#7a3a10);border:1px solid var(--gold-hi);box-shadow:0 0 14px #d4a23a66}
/* Barre de pity (écran Invocation) */
.pity-bar{display:flex;flex-direction:column;gap:4px;width:100%;max-width:420px;margin:0 auto 8px}
.pity-lbl{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.03em;color:var(--gold-hi);text-align:center}
.pity-track{height:7px;border-radius:5px;background:#2a1e2c;border:1px solid var(--gold-2);overflow:hidden}
.pity-fill{display:block;height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold-hi));border-radius:5px}
/* Navigateur de jets d'ADN (reroll par réussite, interface épurée) */
.adn-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 2px}
.adn-nav-lbl{font-size:.82rem;color:var(--gold-hi)}
/* Bandeau récompenses hebdo d'arène */
.arena-weekly{margin:10px 0;padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,#22182a,#160f18);border:1px solid var(--gold-2)}
.arena-weekly .aw-head{font-family:'Cinzel',serif;font-size:.84rem;color:var(--gold-hi);text-align:center;margin-bottom:8px}
.arena-weekly .aw-rows{display:flex;flex-direction:column;gap:3px;max-width:360px;margin:0 auto}
.arena-weekly .aw-row{display:flex;justify-content:space-between;font-size:.8rem;padding:3px 8px;border-radius:6px}
.arena-weekly .aw-row.mine{background:linear-gradient(90deg,#4a3410,#2a1e08);box-shadow:0 0 0 1px var(--gold-hi) inset}
.arena-weekly .aw-rw{color:var(--txt)}
.arena-weekly .aw-note{font-size:.72rem;color:var(--txt-dim);text-align:center;margin-top:8px;line-height:1.5}
.sort-sel{font-family:'Cinzel',serif;font-size:.74rem;color:var(--gold-hi);cursor:pointer;
  background:linear-gradient(180deg,#241a12,#160e08);border:1px solid #6e4f2e;border-radius:8px;padding:7px 9px}
.sort-sel:focus{outline:none;border-color:var(--gold)}

/* confirm dialog */
.confirm-card{width:min(92vw,420px);text-align:center;padding:24px 22px}
.login-input{width:100%;box-sizing:border-box;margin:8px 0;padding:11px 14px;border-radius:10px;
  background:#0e1622;border:1px solid #2a4a6a;color:#e8f2ff;font-size:.95rem}
.login-input:focus{outline:none;border-color:var(--gold-2)}
.login-msg{min-height:18px;font-size:.8rem;color:#ffb0b0;margin:4px 0 8px}
/* porte de connexion (login obligatoire) */
.login-gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{position:relative;width:min(92vw,400px);text-align:center;padding:28px 24px}
.login-title{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.5rem;margin-bottom:4px}
.login-card p{color:var(--txt-dim);font-size:.86rem;margin-bottom:16px}
.btn.wide{width:100%;box-sizing:border-box;margin-top:6px}
/* panel admin */
.admin-btn{background:linear-gradient(180deg,#3a2550,#241038);border:1px solid #6a4caf;color:#e8d9ff}
.admin-card{margin-bottom:14px}
.adm-lbl{display:block;font-size:.72rem;color:var(--txt-dim);margin:8px 0 2px;text-transform:uppercase;letter-spacing:.05em}
.adm-select{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;background:#0e1622;border:1px solid #2a4a6a;color:#e8f2ff;font-size:.9rem}
/* Courrier admin : liste de destinataires (multi-sélection) */
.adm-mail-targets{border:1px solid #2a4a6a;border-radius:10px;background:#0e1622;padding:8px 10px}
.adm-mail-chk{display:flex;align-items:center;gap:8px;color:#e8f2ff;font-size:.86rem;padding:4px 2px;cursor:pointer}
.adm-mail-chk.all{border-bottom:1px solid #2a4a6a;margin-bottom:4px;padding-bottom:7px}
.adm-mail-chk input{width:16px;height:16px;cursor:pointer}
.adm-mail-list{max-height:180px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.adm-mail-chk input:disabled + *{opacity:.4}
.adm-row{display:flex;gap:8px;align-items:center;margin:8px 0}
.adm-row .login-input{margin:0;flex:1}
.adm-warn{font-size:.74rem;color:var(--txt-dim);margin:0 0 8px;line-height:1.4}
.hero-cell .train-badge{position:absolute;top:4px;right:4px;font-size:.9rem;z-index:2;filter:drop-shadow(0 0 3px #000)}
.hero-cell.training-busy{cursor:not-allowed}
.confirm-card h3{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.3rem;margin-bottom:10px}
.confirm-card p{color:var(--txt-dim);font-size:.9rem;line-height:1.5;margin-bottom:18px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* actions de la modale de résultat : empilées et centrées (Continuer au centre) */
.result-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.result-actions .btn{min-width:210px;width:auto;text-align:center;justify-content:center}

/* account badge on home */
.acct-badge{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--txt-dim);
  background:#1a1118;border:1px solid #3a2a40;border-radius:20px;padding:6px 14px;cursor:pointer}
.acct-badge .av{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#3a2a44,#160e1c);
  border:1px solid var(--gold-2);display:grid;place-items:center;font-size:.7rem;color:var(--gold-hi)}
/* Niveau de compte : badge accueil + panneau détail */
.acct-lvl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:4px 10px;border-radius:16px;
  background:#1a1118;border:1px solid #4a3a2a;font-size:.72rem}
.acct-lvl .lv{color:var(--gold-hi);font-weight:600;white-space:nowrap}
.acct-lvl .xpbar{width:52px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.acct-lvl .xpbar .fill,.acct-xpbar .fill{display:block;height:100%;background:linear-gradient(90deg,#ffd27a,#ffb347)}
.acct-panel{max-width:420px}
.acct-panel .acct-xpwrap{margin:6px 0 10px}
.acct-panel .acct-xpbar{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.acct-panel .acct-xptxt{text-align:center;font-size:.72rem;color:var(--txt-dim);margin-top:4px}
.acct-panel .acct-sub{font-size:.76rem;color:var(--txt-dim);margin-bottom:10px}
.acct-panel .acct-perks{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.acct-panel .acct-perk{font-size:.82rem}
.acct-panel .acct-next-h{font-family:var(--font-disp,serif);color:var(--gold-hi);font-size:.82rem;margin:8px 0 4px}
.acct-panel .acct-next{display:flex;flex-direction:column;gap:3px;max-height:150px;overflow:auto}
.acct-panel .acct-row{display:flex;gap:10px;font-size:.76rem;color:var(--txt-dim)}
.acct-panel .acct-row .acct-lv-num{color:var(--gold-hi);min-width:52px;font-weight:600}
.result-cell.mailed{opacity:.7}
.sum-full-note{width:100%;text-align:center;font-size:.76rem;color:#e0c07a;background:#241a10;border:1px solid #4a3a2a;border-radius:10px;padding:8px 12px;margin-bottom:8px;line-height:1.3}

/* ===== V4b : arc d'ultime (SVG) AU-DESSUS du portrait ===== */
.ally .ult-arc{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:92px;height:34px;z-index:6;pointer-events:none;overflow:visible}
.ally .ult-arc path{fill:none;stroke-linecap:round}
.ally .ult-arc .track{stroke:#2a3550;stroke-width:4}
.ally .ult-arc .fill{stroke:#4ab8ff;stroke-width:4;filter:drop-shadow(0 0 4px #4ab8ff);transition:stroke-dashoffset .4s ease}
.ally .ult-arc.full .fill{stroke:#aee4ff;filter:drop-shadow(0 0 6px #4ab8ff) drop-shadow(0 0 12px #aee4ff);animation:arcpulse 1.1s infinite}
@keyframes arcpulse{50%{filter:drop-shadow(0 0 10px #4ab8ff) drop-shadow(0 0 20px #aee4ff)}}
.ally .ring.ult-full{border-color:#4ab8ff;box-shadow:0 0 14px #4ab8ff88}
/* % de charge SOUS la compétence de droite */
.dock .ally .ultpct{position:absolute;top:84px;right:-4px;left:auto;transform:none;font-family:'Cinzel',serif;font-size:.56rem;
  color:#aee4ff;background:#0a1420cc;padding:1px 5px;border-radius:6px;z-index:5;border:1px solid #2a4060}
.dock .ally .ultpct.ready{color:#fff;background:#1a6acc;border-color:#4ab8ff;animation:arcpulse 1.1s infinite}
/* indice "glisser" discret, sous la zone d'action */
.ally.draggable .ring{cursor:grab}
.ally.draggable .ring:active{cursor:grabbing}
.ally.draggable::after{content:'⟵ glisser ⟶';position:absolute;top:46px;left:50%;transform:translateX(-50%);
  font-size:.46rem;color:#ffd9a0;opacity:.6;white-space:nowrap;font-family:'Cinzel',serif;pointer-events:none;z-index:1}

/* radial action chooser shown during drag */
.radial{position:absolute;inset:0;z-index:30;pointer-events:none}
.radial-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#ffd9a0;
  background:radial-gradient(circle,#2a1f30cc,#120a16cc);border:2px solid var(--gold-2);box-shadow:0 0 14px #000a}
.radial-center .radial-hint{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--txt-dim);white-space:nowrap}
.radial-slot{position:absolute;width:200px;max-width:38vw;padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,#241a2ae8,#120a16ee);border:1px solid #4a3a52;box-shadow:0 6px 18px #000a;
  transition:transform .12s,border-color .12s,box-shadow .12s;text-align:center}
.radial-slot.hot{border-color:var(--gold);box-shadow:0 0 18px #d4a23a99;transform:scale(1.06)}
.radial-slot.up{left:50%;top:8%;transform:translateX(-50%)} .radial-slot.up.hot{transform:translateX(-50%) scale(1.06)}
.radial-slot.down{left:50%;bottom:8%;transform:translateX(-50%)} .radial-slot.down.hot{transform:translateX(-50%) scale(1.06)}
.radial-slot.left{left:3%;top:50%;transform:translateY(-50%)} .radial-slot.left.hot{transform:translateY(-50%) scale(1.06)}
.radial-slot.right{right:3%;top:50%;transform:translateY(-50%)} .radial-slot.right.hot{transform:translateY(-50%) scale(1.06)}
.radial-key{font-family:'Cinzel',serif;font-size:.66rem;color:var(--gold);letter-spacing:.08em}
.radial-name{font-family:'Cinzel',serif;font-size:.92rem;color:var(--gold-hi);margin-top:2px}
.radial-name.ko{color:#7a6a5a;text-decoration:line-through}
.radial-extra{font-size:.64rem;color:#ff9a6a;margin-top:1px}
.radial-desc{font-size:.66rem;color:var(--txt-dim);line-height:1.3;margin-top:4px}

/* targeting invitation banner */
.target-hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:25;
  background:linear-gradient(180deg,#2a1f10,#160e08);border:1px solid var(--gold);color:var(--gold-hi);
  padding:8px 16px;border-radius:10px;font-family:'Cinzel',serif;font-size:.82rem;box-shadow:0 4px 14px #000a;
  animation:fadein .3s}

/* ===== V4 : animations par sprite-strips (technique translate interne) =====
   .spr-anim a la taille d'UNE cellule (aspect cw/ch). À l'intérieur, une bande
   <i> large de n cellules est translatée de -100%/n par pas (steps) -> chaque
   frame s'aligne pile dans la fenêtre. */
.unit .spr-anim{
  position:relative; height:100%; aspect-ratio: var(--cw) / var(--ch);
  overflow:hidden; margin:0 auto;
}
.unit .spr-anim > i{
  display:block; height:100%; width:calc(var(--frames) * 100%);
  background-repeat:no-repeat; background-size:100% 100%;
  will-change:transform;
}
.unit.enemy .spr-anim{transform:scaleX(-1)}
/* inner strip is n windows wide; translate by (n-1) windows over steps(n-1)
   so each discrete stop centers one frame. End transform = -(n-1)/n of own width. */
@keyframes strip-3 { from{transform:translateX(0)} to{transform:translateX(-66.667%)} }   /* 2/3 */
@keyframes strip-5 { from{transform:translateX(0)} to{transform:translateX(-80%)} }      /* 4/5 */
@keyframes strip-6 { from{transform:translateX(0)} to{transform:translateX(-83.333%)} }  /* 5/6 */
@keyframes strip-7 { from{transform:translateX(0)} to{transform:translateX(-85.714%)} }  /* 6/7 */
@keyframes strip-8 { from{transform:translateX(0)} to{transform:translateX(-87.5%)} }    /* 7/8 */
.unit.lunge-move{transition:left .28s ease-in, top .28s ease-in; z-index:5}

/* ===== V4 : popups sacrifice/fusion auto ===== */
.auto-popup{width:min(94vw,560px);max-height:84vh;display:flex;flex-direction:column;padding:22px}
.auto-popup h3{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.25rem;margin-bottom:6px;text-align:center}
.auto-popup p{color:var(--txt-dim);font-size:.82rem;line-height:1.45;margin-bottom:14px;text-align:center}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;overflow-y:auto;padding:4px;max-height:46vh}
.auto-chip{position:relative;background:linear-gradient(180deg,#241a2a,#15101a);border:1px solid #3a2a40;border-radius:10px;
  padding:8px 6px;text-align:center;cursor:pointer;opacity:.5;transition:opacity .12s,border-color .12s,box-shadow .12s}
.auto-chip.on{opacity:1;border-color:var(--gold);box-shadow:0 0 12px #d4a23a55}
.auto-chip img{width:54px;height:54px;border-radius:50%;display:block;margin:0 auto 4px}
.auto-chip .ac-nm{font-size:.66rem;color:var(--txt);line-height:1.2}
.auto-chip .ac-rar{font-size:.58rem}
.auto-chip .ac-check{position:absolute;top:4px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#000;
  font-size:.7rem;display:grid;place-items:center;opacity:0}
.auto-chip.on .ac-check{opacity:1}
.auto-total{text-align:center;font-family:'Cinzel',serif;color:#ffd9e0;margin:12px 0;font-size:.9rem}
.fuse-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:52vh;margin-bottom:14px}
.fuse-row{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#1c2230,#12101a);
  border:1px solid #2a3a52;border-radius:10px;padding:8px 12px;cursor:pointer;opacity:.55;transition:opacity .12s,border-color .12s}
.fuse-row.on{opacity:1;border-color:#4ab8ff;box-shadow:0 0 12px #4ab8ff44}
.fuse-row img{width:46px;height:46px;border-radius:50%}
.fuse-row .fr-info{flex:1}
.fuse-row .fr-nm{font-family:'Cinzel',serif;font-size:.85rem}
.fuse-row .fr-d{font-size:.68rem;color:var(--txt-dim)}
.fuse-row .ac-check{width:20px;height:20px;border-radius:50%;background:#4ab8ff;color:#001;display:grid;place-items:center;font-size:.72rem;opacity:0}
.fuse-row.on .ac-check{opacity:1}

/* ===== V4 : loot d'équipement ===== */
.loot-chest{position:absolute;transform:translate(-50%,-50%);font-size:1.8rem;z-index:20;pointer-events:none;
  animation:chestpop 1.4s ease-out forwards;filter:drop-shadow(0 0 8px #ffd9a0)}
@keyframes chestpop{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}
  20%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}
  70%{opacity:1;transform:translate(-50%,-70%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-110%) scale(.9)}
}
/* PRINCE — ratons-compagnons PERSISTANTS autour du Prince (Raton Réveillé R5) */
.prince-raton-comp{position:absolute;width:48px;transform:translate(-50%,-100%);pointer-events:none;z-index:4;
  filter:drop-shadow(0 0 7px #39e06a) drop-shadow(0 2px 3px #000);animation:ratonbob 2.6s ease-in-out infinite}
.prince-raton-comp img{width:100%;height:auto;display:block}
@keyframes ratonbob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-110%)}}
/* Drexyl 6★ — le policier E43 SURGIT sur la cible et la matraque (sprite visible, pas juste un éclair) */
.drexyl-cop{position:absolute;width:104px;transform:translate(-50%,-90%);pointer-events:none;z-index:22;
  filter:drop-shadow(0 0 9px #3df0ff) drop-shadow(0 3px 4px #000);animation:copIn .26s ease-out}
.drexyl-cop img{width:100%;height:auto;display:block}
.drexyl-cop.hit{animation:copHit .42s ease-in forwards}
@keyframes copIn{from{opacity:0;transform:translate(-150%,-128%) scale(.65)}to{opacity:1;transform:translate(-50%,-90%) scale(1)}}
@keyframes copHit{0%{transform:translate(-50%,-90%) scale(1)}28%{transform:translate(-24%,-96%) scale(1.08) rotate(7deg)}100%{opacity:0;transform:translate(-24%,-90%) scale(1) rotate(2deg)}}
/* PRINCE — ratons qui tombent (ultime) : chute rapide via transition de `top` */
.prince-raton{position:absolute;width:56px;height:auto;z-index:24;pointer-events:none;
  transition:top .24s cubic-bezier(.55,0,.85,.4);
  filter:drop-shadow(0 0 6px #39e06a) drop-shadow(0 3px 4px #000)}
/* PRINCE — sprite surgissant au portail (Tir décalé) */
.prince-aval{position:absolute;width:128px;height:auto;z-index:23;pointer-events:none;
  filter:drop-shadow(0 0 10px #39e06a);animation:princeAval .68s ease-out forwards}
@keyframes princeAval{
  0%{opacity:0;transform:scale(.7)}
  25%{opacity:1;transform:scale(1.05)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.98)}
}
.reward-line.loot-head{color:#ffd9a0;font-family:'Cinzel',serif;margin-top:10px}
.loot-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.loot-item{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;padding:5px 10px;border:1px solid;border-radius:8px;background:#0e0a14;white-space:nowrap}
.loot-item .eq-img{position:static;inset:auto;width:26px;height:26px;flex:none}

/* --- FRAGMENTS d'équipement : icône objet + pièce de puzzle (couleur = rareté) --- */
.frag-ic{position:relative;display:inline-grid;place-items:center;width:100%;height:100%}
.frag-ic .eq-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.frag-ic .frag-glyph{font-size:1.4rem;line-height:1}
.frag-badge{position:absolute;right:1px;bottom:1px;width:42%;height:42%;max-width:24px;max-height:24px;
  display:grid;place-items:center;pointer-events:none;z-index:2;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000)}
.frag-badge svg{width:100%;height:100%;display:block}
/* boîte dimensionnée pour afficher un fragment hors conteneur d'icône (puces de butin) */
.frag-box{position:relative;display:inline-block;width:30px;height:30px;flex:none}

/* --- FORGE : barre de progression des fragments par objet --- */
.craft-prog{height:6px;border-radius:4px;background:#1b1320;overflow:hidden;margin:6px 0 3px}
.craft-bar{height:100%;border-radius:4px;transition:width .3s}
.craft-count{font-size:.72rem;color:var(--txt-dim);margin-bottom:6px}
.shop-card.craft-ready{box-shadow:0 0 0 1px var(--rc),0 0 14px -4px var(--rc)}

/* ===== V4 : Hauts-Faits ===== */
.hf-progress{height:8px;border-radius:5px;background:#160f0a;border:1px solid #4a3a22;overflow:hidden;margin-top:4px;box-shadow:inset 0 1px 3px #000}
.hf-progress .f{height:100%;background:linear-gradient(90deg,#8a6a2a,#d4a23a,#ffd97a);transition:width .4s;box-shadow:0 0 8px #d4a23a66}
.hf-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.hf-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(180deg,#1a141f,#120e16);border:1px solid #2e2436}
.hf-card.done{border-color:var(--gold-2);background:linear-gradient(180deg,#241c10,#16110a)}
.hf-card.secret{opacity:.8}
.hf-ic{font-size:1.6rem;width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:radial-gradient(circle,#2a2030,#140e1a);border:1px solid #3a2a40}
.hf-card.done .hf-ic{border-color:var(--gold);box-shadow:0 0 12px #d4a23a55}
.hf-info{flex:1}
.hf-nm{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.95rem}
.hf-card.secret .hf-nm{color:#a98fc4}
.hf-desc{font-size:.74rem;color:var(--txt-dim);margin-top:2px}
.hf-reward{font-family:'Cinzel',serif;color:#ffd9e0;font-size:.82rem;white-space:nowrap}
.hf-reward.claimed{color:var(--ok)}
/* ===== Objectifs : onglets + missions du jour ===== */
.obj-tabs{display:flex;gap:8px;margin-bottom:12px}
.obj-tab{flex:1;text-align:center;padding:10px 8px;border-radius:10px;cursor:pointer;font-family:'Cinzel',serif;
  font-size:.85rem;color:var(--txt-dim);background:linear-gradient(180deg,#1a141f,#120e16);border:1px solid #2e2436}
.obj-tab.active{color:var(--gold-hi);border-color:var(--gold-2);background:linear-gradient(180deg,#241c10,#16110a)}
.obj-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#c0142e;color:#fff;
  font-size:.72rem;line-height:18px;text-align:center;box-shadow:0 0 8px #ff3a5a88;vertical-align:1px}
.msn-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.msn-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(180deg,#1a141f,#120e16);border:1px solid #2e2436}
.msn-card.done{border-color:var(--gold-2);background:linear-gradient(180deg,#241c10,#16110a);opacity:.85}
.msn-info{flex:1}
.msn-nm{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.95rem}
.msn-desc{font-size:.74rem;color:var(--txt-dim);margin:2px 0 6px}
.hf-progress.sm{max-width:220px}
.msn-reward{font-size:.82rem;color:#ffd9e0;margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.msn-claim{flex:none;font-family:'Cinzel',serif;font-size:.82rem;padding:8px 14px;border-radius:10px;text-align:center;min-width:92px}
.msn-claim.ready{cursor:pointer;color:#08120c;background:linear-gradient(180deg,#7fe6a8,#37b86e);border:1px solid #2a9a58;
  box-shadow:0 0 12px #37b86e66;font-weight:700}
.msn-claim.locked{color:var(--txt-dim);background:#160f0a;border:1px solid #4a3a22}
.msn-claim.claimed{color:var(--ok);background:#10160f;border:1px solid #2e4a2e}
/* coffre de complétion quotidienne */
.daily-bonus{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;margin-bottom:12px;
  background:linear-gradient(180deg,#1f1726,#150f1c);border:1px solid #3a2a52}
.daily-bonus.ready{border-color:var(--gold);box-shadow:0 0 16px #d4a23a44;background:linear-gradient(180deg,#28200f,#1a130a)}
.daily-bonus.done{opacity:.85}
.db-info{flex:1}
.db-h{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.95rem;margin-bottom:6px}
.db-sub{font-size:.74rem;color:var(--txt-dim);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.db-gift{flex:none;width:54px;height:54px;display:grid;place-items:center;border-radius:12px;font-size:1.7rem;
  background:radial-gradient(circle,#2a2030,#140e1a);border:1px solid #3a2a40;color:#7a6a86}
.db-gift.ready{cursor:pointer;color:#ffd97a;border-color:var(--gold);box-shadow:0 0 14px #d4a23a66;animation:dbpulse 1.3s ease-in-out infinite}
.db-gift.claimed{color:var(--ok);border-color:#2e4a2e;background:#10160f}
@keyframes dbpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ===== Boîte aux lettres (courrier) ===== */
.mail-list{display:flex;flex-direction:column;gap:10px}
.mail-card .msn-nm{display:flex;align-items:center;gap:8px}
.mail-rewards{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mail-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:9px;font-size:.76rem;
  color:#e8f2ff;background:linear-gradient(180deg,#1a1622,#120e18);border:1px solid #3a2a4088}
.mail-chip-glyph{font-size:.95rem;line-height:1}
.mail-chip-img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#1a1020}
.mail-chip-nm{color:var(--txt-dim)}
.mail-date{font-size:.68rem;color:var(--txt-dim);margin-top:6px;opacity:.75}
/* récap de réclamation : cellule à glyphe (récompenses non-portrait) */
.mail-glyph{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;
  border:2px solid var(--gold-2);background:radial-gradient(circle,#221830,#140e1a)}
.mail-cell-qty{font-family:'Cinzel',serif;font-size:.82rem;margin-top:4px;font-weight:700}
.mail-cell-nm{font-size:.6rem;color:var(--txt-dim);margin-top:2px;line-height:1.1}
/* composeur admin : lignes de récompense */
.adm-mail-body{width:100%;box-sizing:border-box;resize:vertical;min-height:56px;font-family:inherit}
.adm-mail-line{display:flex;gap:6px;align-items:center;margin:6px 0}
.adm-mail-line .adm-mail-type{flex:0 0 120px}
.adm-mail-line .adm-mail-id{flex:1;min-width:0}
.adm-mail-line .adm-mail-qty{flex:0 0 88px;margin:0}
.adm-mail-line .btn.sm{flex:none}

/* Disposition partagée du placement de raid (aperçu résolu, avec le coéquipier) */
.raid-layout{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.raid-lane-lbl{font-size:.72rem;color:var(--txt-dim)}
.raid-lane{display:flex;gap:8px;flex-wrap:wrap;padding:8px;border-radius:10px;background:#120e18;border:1px solid #2e2436}
.raid-lane-front{border-color:#3a2a52}
.raid-slot{width:64px;text-align:center;font-size:.6rem}
.raid-slot .port{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid #444;background:#1a1020;margin:0 auto}
.raid-slot .port img{width:106%;height:106%;object-fit:cover}
.raid-slot.mine .port{border-color:#7fd8ff}
.raid-slot.mate .port{border-color:#ffb060}
.raid-slot.empty{width:64px;color:#5a4a6a;display:flex;align-items:center;justify-content:center;height:56px}
.raid-slot span{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bandeau « puissance recommandée » du raid */
.raid-reco{margin:10px 0;padding:9px 14px;border-radius:10px;font-size:.82rem;text-align:center;
  background:linear-gradient(180deg,#1a1622,#120e18);border:1px solid #3a2a52}
.raid-reco.ok{border-color:#2a9a58}
.raid-reco.low{border-color:#7a5a2a}

/* ===== V4 : Armurerie (boutique) ===== */
.shop-banner{padding:16px 20px;margin-bottom:16px;text-align:center}
.shop-title{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.2rem}
.shop-sub{color:var(--txt-dim);font-size:.78rem;margin-top:4px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.shop-card{padding:14px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,#1c1622,#13101a);border:1px solid var(--rc,#3a2a40);
  box-shadow:0 0 0 1px #0006 inset}
.shop-ic{width:68px;height:68px;margin:0 auto 6px;display:grid;place-items:center;font-size:2rem;
  border-radius:12px;overflow:hidden;background:radial-gradient(circle,#241a14,#120c08);border:1px solid #4a3a2e}
.shop-nm{font-family:'Cinzel',serif;font-size:.88rem}
.shop-rar{font-size:.64rem;color:var(--txt-dim);margin:2px 0 6px}
.shop-bonus{font-size:.72rem;color:var(--ok);min-height:2.2em;margin-bottom:10px}
.shop-card .btn.sm{width:100%}
.shop-stock{font-size:.7rem;color:#bdf3e6;margin:4px 0 6px}
/* Garnison — tuiles du hub */
.garnison-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.garn-tile{position:relative;padding:18px 14px;border-radius:14px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,#1c1424,#120b18);border:1px solid #3a2a40;transition:transform .12s,border-color .12s}
.garn-tile:hover{transform:translateY(-2px);border-color:#6e4f2e}
.garn-tile.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
.garn-tile .gt-ic{font-size:2rem;line-height:1}
.garn-tile .gt-nm{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.92rem;margin-top:8px}
.garn-tile .gt-ds{font-size:.72rem;color:var(--txt-dim);margin-top:4px}
.garn-tile .gt-soon{position:absolute;top:8px;right:8px;font-size:.6rem;color:#ffd9a0;border:1px solid #6e4f2e;border-radius:6px;padding:1px 6px;text-transform:uppercase;letter-spacing:.05em}

/* ===== Salle d'entraînement ===== */
.train-bg{position:relative;border-radius:14px;padding:20px 18px;margin-bottom:14px;overflow:hidden;
  background-size:cover;background-position:center;border:1px solid #4a3a22}
.train-bg::before{content:'';position:absolute;inset:0;background:#0a0610;opacity:.55;z-index:0}
.train-bg .train-h,.train-bg .train-sub{position:relative;z-index:1}
.train-h{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.25rem}
.train-sub{font-size:.8rem;color:#e8dcc6;margin-top:6px}
.train-slots{display:flex;flex-direction:column;gap:10px}
.train-slot{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(180deg,#1a141f,#120e16);border:1px solid #2e2436}
.train-slot.empty{cursor:pointer;justify-content:center;border-style:dashed;color:var(--txt-dim);gap:8px}
.train-slot.empty:hover{border-color:var(--gold-2);color:var(--gold-hi)}
.train-slot.empty .ts-plus{font-size:1.4rem}
.train-slot.done{border-color:var(--gold-2);background:linear-gradient(180deg,#241c10,#16110a)}
.ts-por{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;border:1px solid #3a2a40}
.ts-info{flex:1}
.ts-nm{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.95rem}
.ts-st{font-size:.76rem;color:var(--txt-dim);margin-top:2px}
.ts-st.ok{color:var(--ok)}
.ts-rw{font-size:.78rem;color:#cfe9ff;margin-top:2px}
.train-cd{color:#ffd97a;font-weight:600}
/* sélecteurs (overlay) d'unité et de durée */
.pick-card{width:min(94vw,520px);text-align:center;padding:22px 20px}
.pick-card h3{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.15rem;margin-bottom:14px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:50vh;overflow:auto;margin-bottom:14px}
.pick-unit{cursor:pointer;padding:8px 6px;border-radius:10px;background:#160f0a;border:1px solid #2e2436}
.pick-unit:hover{border-color:var(--gold-2)}
.pu-thumb{position:relative}
.pick-unit img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.pu-thumb .plus{position:absolute;top:4px;right:5px;font-family:'Cinzel',serif;font-size:.7rem;color:#fff;
  background:#5a0c14;padding:1px 6px;border-radius:8px;border:1px solid #c0142e;z-index:2}
.pu-thumb .fav-badge{position:absolute;bottom:4px;right:5px;font-size:.8rem;color:#ffd23f;z-index:3;text-shadow:0 0 6px #ffae00cc}
.pu-nm{font-size:.72rem;color:var(--gold-hi);margin-top:4px;line-height:1.1}
.pu-lv{font-size:.66rem;color:var(--txt-dim)}
.dur-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dur-btn{font-family:'Cinzel',serif}

/* ===== V4 : Glossaire lisible (grands sprites) ===== */
.gloss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.gloss-card{background:linear-gradient(180deg,#1a141f,#110d18);border:1px solid var(--rc,#3a2a40);
  border-radius:14px;padding:12px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s}
.gloss-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #000a,0 0 0 1px var(--rc)}
.gloss-card.locked{cursor:default;opacity:.55;filter:grayscale(.6)}
.gloss-art{height:150px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px;
  background:radial-gradient(ellipse at 50% 90%, #ffffff10, transparent 70%)}
.gloss-art img{max-height:150px;max-width:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 10px #000c)}
.gloss-art.enemy img{transform:scaleX(-1)}
.gloss-art.enemy.noflip img{transform:none}
.gloss-q{font-size:3rem;color:#3a2a44;font-family:'Cinzel',serif}
.gloss-nm{font-family:'Cinzel',serif;font-size:.92rem;line-height:1.2}
.gloss-meta{font-size:.72rem;color:var(--txt-dim);margin-top:4px}
.gloss-tag{font-size:.6rem;padding:2px 8px;border-radius:6px;color:#fff;letter-spacing:.06em}
.gloss-tag.boss{background:#c0142e}
.gloss-tag.elite{background:linear-gradient(180deg,#b066ff,#5a1e8a)}

/* scroll containers V4b */
.hf-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
.shop-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}

/* ===== V4b : enclumes d'amélioration + slots ===== */
.anvil-row{display:flex;align-items:center;gap:2px;font-size:.7rem;margin:2px 0}
.anvil{opacity:.25;filter:grayscale(1)}
.anvil.on{opacity:1;filter:none}
.anvil-txt{margin-left:6px;font-size:.62rem;color:var(--txt-dim)}
.eq-anvils{display:flex;justify-content:center;gap:1px;font-size:.62rem;margin:4px 0}
.equip-slot .eq-slot-tap{cursor:pointer}
.equip-slot .btn.sm{margin-top:4px;font-size:.62rem;padding:4px 6px}

/* ===== V8-31 : modal de gestion / reforge d'objet ===== */
.rf-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rf-ic{position:relative;width:46px;height:46px;flex:0 0 46px;border-radius:10px;display:grid;place-items:center;font-size:1.5rem;overflow:hidden;
  background:radial-gradient(circle,#3a2a18,#160e08);border:1px solid #6e4f2e;box-shadow:0 0 10px currentColor}
.rf-ic img{width:100%;height:100%;object-fit:contain}
.rf-nm{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:600}
.rf-sub{color:var(--txt-dim);font-size:.74rem}
.rf-stats{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rf-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6px 10px;background:#ffffff08;border:1px solid #ffffff12;border-radius:8px}
.rf-stat.maxed{border-color:var(--gold-hi);background:#d9a94e18}
.rf-cur{font-weight:600;color:#eadfce}
.rf-stat.maxed .rf-cur{color:var(--gold-hi)}
.rf-range{font-size:.7rem;color:var(--txt-dim);white-space:nowrap}
.rf-panel{border:1px solid #ffffff14;border-radius:10px;padding:12px;margin-bottom:12px;background:#00000026}
.rf-panel-h{font-family:'Cinzel',serif;font-size:.95rem;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.rf-panel .anvil-row{justify-content:center;margin-bottom:10px}
.rf-note{font-size:.72rem;color:var(--txt-dim);margin:6px 0 10px;line-height:1.4}
.rf-grid{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin-bottom:10px;font-size:.82rem}
.rf-grid span{color:var(--txt-dim)}
.rf-grid b{text-align:right;color:#eadfce}
.rf-actions{display:flex;gap:8px;margin-top:4px}
.rf-actions .btn{flex:1}

/* ===== Anim de reforge (marteau + enclume + étincelles) — anti spam-clic ===== */
.forge-anim{position:absolute;inset:0;border-radius:inherit;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(circle at 50% 60%,rgba(30,16,8,.86),rgba(8,5,10,.94));
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:forge-fade .18s ease}
@keyframes forge-fade{from{opacity:0}to{opacity:1}}
.forge-scene{position:relative;width:150px;height:110px}
/* enclume stylisée (pas d'emoji : rendu fiable partout) */
.forge-anvil{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:86px;height:24px;background:linear-gradient(180deg,#565660,#2a2a30);
  border-radius:5px 16px 3px 3px;box-shadow:0 5px 10px #000b,inset 0 1px 0 #ffffff22}
.forge-anvil::before{content:'';position:absolute;left:50%;top:24px;transform:translateX(-50%);
  width:26px;height:22px;background:linear-gradient(180deg,#3c3c44,#1a1a20)}
.forge-anvil::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:52px;height:9px;background:linear-gradient(180deg,#3c3c44,#17171c);border-radius:3px}
/* marteau : pivote autour du poignet (bas-droite) pour frapper le dessus de l'enclume */
.forge-hammer{position:absolute;left:24px;top:2px;width:64px;height:60px;
  transform-origin:86% 88%;animation:forge-swing .55s cubic-bezier(.5,0,.4,1) infinite}
.hh-handle{position:absolute;right:8px;bottom:0;width:9px;height:52px;border-radius:5px;
  background:linear-gradient(90deg,#8a5a2c,#5a3617);transform:rotate(38deg);transform-origin:bottom right}
.hh-head{position:absolute;left:2px;top:2px;width:40px;height:19px;border-radius:4px;
  background:linear-gradient(180deg,#c9ccd4,#71747e);box-shadow:inset 0 2px 0 #ffffff55,0 2px 4px #0008}
@keyframes forge-swing{
  0%{transform:rotate(-58deg)}
  34%{transform:rotate(10deg)}    /* impact */
  44%{transform:rotate(3deg)}
  62%{transform:rotate(-14deg)}
  100%{transform:rotate(-58deg)}}
/* étincelles : jaillissent au point d'impact (haut de l'enclume) en phase avec la frappe */
.forge-sparks{position:absolute;left:50%;bottom:30px;width:0;height:0}
.forge-spark{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffd36a 55%,#ff8a1e);box-shadow:0 0 6px #ffb43e;
  opacity:0;animation:forge-spark .55s ease-out infinite}
@keyframes forge-spark{
  0%,30%{opacity:0;transform:translate(0,0) scale(.3)}
  36%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-26px)) scale(.2)}}
.forge-spark.s1{--dx:-30px;--dy:-20px}
.forge-spark.s2{--dx:-16px;--dy:-34px}
.forge-spark.s3{--dx:0px;--dy:-40px}
.forge-spark.s4{--dx:16px;--dy:-34px}
.forge-spark.s5{--dx:30px;--dy:-20px}
.forge-spark.s6{--dx:-24px;--dy:-6px}
.forge-spark.s7{--dx:24px;--dy:-6px}
.forge-label{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:.95rem;letter-spacing:.04em;
  text-shadow:0 0 10px #d4a23a66;animation:forge-pulse 1s ease-in-out infinite}
@keyframes forge-pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== V4b : menu Paramètres + engrenage ===== */
.settings-gear{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:1.2rem;cursor:pointer;color:var(--gold-hi);
  background:#1a1118;border:1px solid #3a2a40;transition:transform .2s,box-shadow .2s;z-index:5}
.settings-gear:hover{transform:rotate(45deg);box-shadow:0 0 12px #d4a23a55}
.set-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px;display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;width:100%}
.set-card{padding:18px 20px}
.set-card.danger{border-color:#7a2030}
.set-h{font-family:'Cinzel',serif;color:var(--gold-hi);font-size:1.05rem;margin-bottom:12px}
.set-row{margin:12px 0}
.set-label{font-size:.84rem;color:var(--txt);margin-bottom:6px;display:flex;justify-content:space-between}
.set-label span{color:#bdf3e6}
.set-row input[type=range]{width:100%;accent-color:#d4a23a;cursor:pointer}
.set-note{font-size:.74rem;color:var(--txt-dim);line-height:1.4;margin:8px 0}
.set-card.danger .btn.primary{background:linear-gradient(180deg,#a8202e,#5a0c14);border-color:#c0142e}

/* Mode Boucle (V4c) */
.loop-banner{margin:12px 0 2px;padding:8px 12px;border-radius:8px;
  background:linear-gradient(180deg,#163a5a55,#0a1d3055);border:1px solid #2f6fae;
  color:#cfeaff;font-size:.9rem}
.loop-banner b{color:#fff;font-size:1.05rem}
.btn.blue.on,.btn.sm.blue.on{box-shadow:0 0 0 1px #4aa3ff inset,0 0 10px #1d6fd055}
.stage-loop-btn{display:inline-block;margin-top:5px}
.round-btn.on{box-shadow:0 0 12px #4aa3ff88, 0 0 0 1px #4aa3ff inset}
.round-btn.disabled{opacity:.4;filter:grayscale(.7)}

/* Canvas d'effets de combat (V4e) */
.c-fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.field{will-change:transform}

/* Vente multiple d'équipement (V4d) */
.eq-card.sellable{cursor:pointer;position:relative;transition:border-color .12s, box-shadow .12s}
.eq-card.sellable:hover{border-color:#7a6a86}
.eq-card.sellable.sel{border-color:#ff6b6b;box-shadow:0 0 0 2px #ff6b6b55, 0 0 12px #ff6b6b40}
.eq-card .eq-check{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;border:2px solid #7a6a86;
  display:grid;place-items:center;font-size:.85rem;color:#fff;background:#1a121f;z-index:2}
.eq-card.sellable.sel .eq-check{background:#c0142e;border-color:#ff6b6b}
.eq-card .eq-sellval{font-size:.74rem;color:#bdf3e6;margin-top:2px}
.sell-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(180deg,rgba(20,14,26,.6),rgba(14,10,18,.96));border-top:1px solid #3a2c44;backdrop-filter:blur(4px)}
.sell-bar .sell-info{flex:1;text-align:center;font-size:.82rem;color:#e8dcf0}
.sell-bar .sell-info b{color:#bdf3e6}
.btn.danger{background:linear-gradient(180deg,#7d1020,#4a0a14);border-color:#c0142e;color:#ffd9d9}
.btn.danger:hover{background:linear-gradient(180deg,#9a1428,#5a0c18)}
#equipment .wrap{position:relative}

/* image d'équipement : positionnée en absolu pour remplir EXACTEMENT le médaillon
   (taille définie du parent) puis CONTENUE via object-fit. Indépendant du mode de
   mise en page du parent — contrairement à height:% qui ne se résout pas de façon
   fiable sur un item d'une grille en place-items:center (cause du débordement). */
.eq-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* tous les médaillons d'icône d'objet : référent de position + contenu clippé */
.equip-slot .eq-ic,.item-card .it-ic,.eq-card .eq-ic2,.shop-ic{overflow:hidden;position:relative}

/* ===================================================================
   Tutoriel — porte d'accueil, dialogues, ombres holographiques, récompense
   =================================================================== */

/* --- Porte d'accueil (boutons verrouillés + bouton Tutoriel) --- */
.tuto-gate{position:relative;padding:18px 18px 14px;margin-bottom:12px;text-align:center;
  background:linear-gradient(180deg,#1a2a3a,#10161e);border:1px solid #2f5a7a}
.tuto-gate-h{font-family:'Cinzel',serif;font-size:1.3rem;color:#bfe6ff;letter-spacing:.08em;text-shadow:0 0 12px #5fb4ff66}
.tuto-gate-sub{font-size:.92rem;color:var(--txt-dim);margin:6px 0 14px}
.tuto-pulse{animation:tutoPulse 1.6s ease-in-out infinite}
@keyframes tutoPulse{0%,100%{box-shadow:0 0 0 0 #5fb4ff00}50%{box-shadow:0 0 18px 2px #5fb4ff66}}
.tuto-skip{margin-top:10px;font-size:.82rem;color:var(--txt-dim);cursor:pointer;text-decoration:underline;opacity:.8}
.tuto-skip:hover{opacity:1;color:var(--txt)}
.home-actions.locked .btn.disabled{pointer-events:none}

/* --- Overlay de dialogue plein écran --- */
.tuto-overlay{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;overflow:hidden;background:#000}
.tuto-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.7)}
.tuto-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 30%,transparent 40%,#000a 100%)}
.tuto-skip-top{position:absolute;top:14px;right:16px;z-index:3;font-family:'Cinzel',serif;font-size:.85rem;
  color:#cfe6ff;background:#0d1722cc;border:1px solid #34546e;border-radius:8px;padding:6px 12px;cursor:pointer}
.tuto-skip-top:hover{background:#14283acc;color:#fff}
.tuto-stage{position:relative;flex:1;z-index:2}
.tuto-char{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(12px);
  max-height:66vh;max-width:74vw;width:auto;object-fit:contain;
  filter:drop-shadow(0 12px 22px #000c);opacity:0;transition:opacity .25s ease,transform .25s ease}
.tuto-char.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tuto-bubble{position:relative;z-index:3;margin:0 auto 22px;width:min(92vw,720px);
  background:linear-gradient(180deg,#221a14ee,#16110bf2);border:1px solid var(--gold-2);
  border-radius:var(--radius);padding:18px 20px 16px}
.tuto-name{font-family:'Cinzel',serif;font-size:1.15rem;color:var(--gold-hi);
  letter-spacing:.06em;text-shadow:0 0 8px #d4a23a55;margin-bottom:8px}
.tuto-text{font-size:1.04rem;line-height:1.5;color:var(--txt);min-height:3.2em}
.tuto-text b{color:#ffe6a8}
.tuto-next{margin-top:14px;float:right}
.tuto-bubble::after{content:'';display:block;clear:both}

/* --- Ennemis holographiques (fausses ombres du tutoriel) --- */
.unit.hologram img{opacity:.66;
  filter:drop-shadow(0 0 10px #5fd8ff) drop-shadow(0 8px 10px #0008) brightness(1.25) saturate(.45);
  animation:holoFlicker 2.6s ease-in-out infinite}
.unit.hologram .ename{color:#aee6ff;text-shadow:0 0 6px #5fd8ff88}
@keyframes holoFlicker{0%,100%{opacity:1}48%{opacity:.82}50%{opacity:.62}52%{opacity:.86}}

/* --- Choix de récompense (2 Rares) --- */
.result-card.tuto-reward{width:min(94vw,580px)}
.tuto-reward-row{display:flex;gap:14px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.tuto-reward-card{position:relative;width:min(44vw,210px);padding:12px 10px 14px;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,#201826,#15101a);border:1px solid var(--rc,#4aa3ff);border-radius:12px;
  transition:transform .12s ease,box-shadow .12s ease}
.tuto-reward-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0008,0 0 14px var(--rc)}
.trc-art{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.trc-art img{max-height:120px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #000a)}
.trc-nm{font-family:'Cinzel',serif;font-size:1rem;line-height:1.15}
.trc-meta{font-size:.78rem;color:var(--txt-dim);margin:4px 0}
.trc-role{font-size:.82rem;color:var(--txt);margin-bottom:8px}

/* navbar verrouillée pendant le tutoriel */
.tuto-locked .navbar{opacity:.35;pointer-events:none;filter:grayscale(.6)}

/* Compétence disponible : légère surbrillance du cercle (pour la repérer) */
.dock .ally .skillbtn.ready{border-color:var(--gold-hi);
  box-shadow:0 0 8px 1px var(--gold-hi),0 1px 4px #000a;animation:skillReady 1.5s ease-in-out infinite}
@keyframes skillReady{0%,100%{box-shadow:0 0 6px 0 var(--gold-hi),0 1px 4px #000a}
  50%{box-shadow:0 0 12px 2px var(--gold-hi),0 1px 4px #000a}}

/* Overlay de dialogue : fondu d'entrée (transition douce, pas de coupure brutale) */
.tuto-overlay{animation:tutoFade .28s ease}
@keyframes tutoFade{from{opacity:0}to{opacity:1}}

/* Annonce ENTRE LES VAGUES : superposée au combat (champ visible derrière) */
.tuto-overlay.wave{background:linear-gradient(180deg,#0006 0%,#0002 40%,#000a 100%)}
.tuto-overlay.wave .tuto-stage{flex:1}
.tuto-overlay.wave .tuto-char{left:26%;max-height:46vh;max-width:46vw}
.tuto-overlay.wave .tuto-bubble{margin-bottom:18px;background:linear-gradient(180deg,#221a14f2,#16110bfa)}

/* Bouton mute flottant pendant le tutoriel (au-dessus des overlays) */
.tuto-mute{position:fixed;top:14px;left:16px;z-index:9000;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:1.1rem;cursor:pointer;
  background:#0d1722cc;border:1px solid var(--gold-2);box-shadow:0 2px 8px #000a;color:var(--gold-hi)}
.tuto-mute:hover{background:#14283acc}
.tuto-mute.muted{opacity:.7;border-color:#7a3a3a}


/* ===================== Duel PvP temps réel (js/duelui.js) ===================== */
.duel-online, .duel-invites{ display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.duel-online-row, .duel-invite{ display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 12px; }
.duel-invite{ border-color:rgba(120,224,120,.45); background:rgba(90,200,110,.10); }
.duel-name{ flex:1; font-weight:600; }
.duel-invite b{ color:#ffd97a; }
.duel-teams{ display:flex; gap:16px; flex-wrap:wrap; margin:6px 0; }
.duel-col{ flex:1; min-width:220px; }
.duel-row, .duel-pool{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.duel-unit, .duel-pick{ width:74px; text-align:center; border-radius:10px; padding:4px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.duel-unit img, .duel-pick img{ width:56px; height:56px; object-fit:cover; border-radius:8px; display:block; margin:0 auto; }
.duel-unit span, .duel-pick span{ display:block; font-size:11px; margin-top:3px; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.duel-unit.opp{ border-color:rgba(255,150,150,.35); }
.duel-pick.active{ cursor:pointer; border-color:rgba(120,224,120,.55); box-shadow:0 0 0 1px rgba(120,224,120,.25) inset; }
.duel-pick.active:hover{ background:rgba(120,224,120,.14); transform:translateY(-2px); transition:.12s; }
.duel-pick.active.ban{ border-color:rgba(255,120,120,.6); }
.duel-pick.active.ban:hover{ background:rgba(255,90,90,.16); }
.duel-pick.disabled{ opacity:.45; }
.duel-slotname{ font-size:11px; display:block; margin-top:2px; }

/* Barre d'action du Duel (combat lockstep) */
/* Ancrée EN BAS (au-dessus du dock) au lieu de top:168px : évitait de recouvrir la barre
   d'ordre de tour (.initiative) en duel/PvP (décalée vers le bas par le bandeau de faction). */
.duel-bar{ position:fixed; left:50%; transform:translateX(-50%); top:auto; bottom:172px; z-index:60;
  display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:12px; max-width:92vw;
  background:rgba(18,14,22,.92); border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 22px rgba(0,0,0,.5); }
.duel-bar.wait{ background:rgba(18,14,22,.78); }
.duel-bar-me{ font-size:13px; margin-right:4px; }
.duel-bar-me b{ color:#ffd97a; }
.duel-bar-wait{ font-size:13px; opacity:.85; }
.duel-act{ font:inherit; font-size:13px; cursor:pointer; color:#fff; border-radius:9px;
  padding:8px 12px; border:1px solid rgba(120,224,120,.5); background:rgba(90,200,110,.16); }
.duel-act:hover{ background:rgba(120,224,120,.28); }
.duel-act.off{ opacity:.4; cursor:not-allowed; border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.05); }

/* Décompte du timer en Duel (combat + draft/ban) */
.duel-clock{ margin-left:12px; font-size:13px; opacity:.92; white-space:nowrap; }
.duel-clock b{ color:#ffd97a; }
.duel-bar.urgent .duel-clock b{ color:#ff6a6a; }
.duel-bar.urgent{ box-shadow:0 0 0 1px rgba(255,90,90,.55), 0 6px 22px rgba(0,0,0,.5); }
.duel-countdown{ float:right; font-size:14px; color:#ffd97a; }
.duel-countdown.urgent{ color:#ff6a6a; font-weight:700; }

/* ===================== World-Builder (js/worldui.js) ===================== */
.wb-glo{ display:flex; flex-direction:column; gap:6px; margin:6px 0 14px; }
.wb-glo-row{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:7px 12px; }
.wb-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.wb-glo-nm{ flex:1; font-weight:600; }
.wb-glo-id{ font-size:11px; opacity:.55; font-weight:400; }
.wb-tag{ font-size:10px; background:#3d2b52; color:#d9b8ff; border-radius:6px; padding:1px 6px; margin-left:4px; }
.wb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:6px 0; }
.wb-f{ display:flex; flex-direction:column; gap:3px; font-size:12px; }
.wb-f > span{ opacity:.7; }
.wb-f input, .wb-f select, .wb-f textarea{ background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:7px; padding:6px 8px; font:inherit; font-size:13px; }
.wb-f input:disabled{ opacity:.5; }
.wb-f.wb-wide{ margin:6px 0; }
.wb-f.wb-wide textarea{ min-height:52px; resize:vertical; }
.wb-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 10px; margin:6px 0; }
.wb-card-h{ font-weight:600; font-size:13px; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.wb-checks{ display:flex; gap:16px; margin:6px 0; font-size:13px; }
.wb-skill-slot{ margin:4px 0; }
.wb-toggle{ font-size:13px; cursor:pointer; }
.btn.disabled{ opacity:.4; cursor:not-allowed; }
/* éditeur de vagues (campagne) : monstres alignés, retour à la ligne libre */
.wb-wave{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wb-wave-e{ display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:3px 5px; }
.wb-wave-e select{ max-width:180px; }
/* sélecteur d'effet FX (skill) + bouton aperçu */
.wb-fx-pick{ display:flex; gap:6px; align-items:center; }
.wb-fx-pick select{ flex:1; min-width:0; }
/* overlay d'aperçu d'effet (arène canvas isolée, réutilise FX.mount) */
.wb-fxprev{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.62); }
.wb-fxprev-box{ background:#140d1e; border:1px solid var(--gold-2,#7a5a2a); border-radius:12px; padding:12px; box-shadow:0 12px 44px #000a; }
.wb-fxprev-arena{ position:relative; width:min(70vw,560px); height:min(45vh,340px); background:radial-gradient(ellipse at 50% 55%,#241634,#0c0810); border-radius:10px; overflow:hidden; }
.wb-fxprev-arena canvas{ position:absolute; inset:0; width:100%; height:100%; }
.wb-fxprev-bar{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.wb-fxprev-tok{ flex:1; font-weight:600; color:var(--gold-hi,#ffcf66); }

/* =========================================================================
   1.5 — MENUS DÉROULANTS thémés GLOBALEMENT (boîte + LISTE dépliée).
   Sans style, la liste OS s'affiche fond blanc avec le texte or hérité =
   illisible (retour joueur). On cible `select` globalement (les .adm-select /
   .wb-f select gardent leur fond propre, mais héritent le thème des <option>).
   `option{}` est respecté par Chromium/navigateurs cibles. ========================= */
select{ background:#0e1622; color:#e8f2ff; border:1px solid #2a4a6a; border-radius:10px;
  padding:8px 30px 8px 12px; font-size:.9rem; font-family:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23c9b78a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }
select:focus{ outline:none; border-color:var(--gold-2,#7a5a2a); }
select option{ background:#0e1622; color:#e8f2ff; }
select option:checked{ background:#20304a; color:#ffcf66; }

/* =========================================================================
   1.6 — BARRES DE DÉFILEMENT thémées GLOBALEMENT (WebKit + Firefox).
   Le joueur veut VOIR la barre (savoir qu'une zone défile) : thumb doré visible
   sur piste sombre, partout (pas seulement sur les quelques zones stylées). ==== */
*{ scrollbar-width:thin; scrollbar-color:#5a4630 rgba(0,0,0,.28); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.24); border-radius:6px; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#6a5230,#3a2a1a); border-radius:6px;
  border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#8a6a3e,#4a3620); background-clip:padding-box; }

/* =========================================================================
   LOT 2 — Icônes de Blason, compteurs, badges d'augmentation, panneau Ressources
   ========================================================================= */
/* 2.1 icône de faction (image blason + repli glyph) */
.fac-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.18em;line-height:1}
.fac-icon img{width:1.05em;height:1.05em;object-fit:contain;display:inline-block}
.fac-icon .fac-glyph{display:none;font-size:.95em}
.fac-icon.noimg .fac-glyph{display:inline}
.fac-icon.noimg img{display:none}
/* 2.3 chips de Blason (HUD + panneau) */
.blason-hud{display:inline-flex;gap:5px;align-items:center;margin:0 2px;flex-wrap:wrap}
.blason-chip{display:inline-flex;align-items:center;gap:2px;font-size:.8rem;color:#e8ddc2}
.blason-chip .fac-icon{font-size:1.05em}
.blason-chip b{color:#ffe9b0;font-weight:700}
.blason-chip.lg{font-size:1rem;padding:6px 10px;background:rgba(0,0,0,.28);border:1px solid #4a3a22;border-radius:10px}
/* 2.4 badges d'augmentation sur le portrait (colonne bas-gauche) */
.hero-cell .cell-fac{position:absolute;top:5px;left:6px;z-index:3;font-size:.9rem;filter:drop-shadow(0 1px 2px #000)}
.aug-row{position:absolute;left:5px;bottom:30px;z-index:3;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.aug-chip{display:inline-flex;align-items:center;gap:1px;font-size:.62rem;font-weight:700;line-height:1;
  padding:2px 5px;border-radius:8px;background:rgba(12,8,20,.82);border:1px solid #5a4630;color:#ffe0b0;
  box-shadow:0 1px 3px #0008}
.aug-chip.aug-adn{border-color:#c0142e;color:#ff9db0}
.aug-chip.aug-plus{border-color:#3a86ff;color:#bcd8ff}
.aug-chip.aug-tr{border-color:#ffd873;color:#ffe9a8}
/* ---- Composant PORTRAIT unifié (UI.portraitHTML) façon « GoH », réutilisé PARTOUT.
   Cadre coloré par la RARETÉ ; RÔLE en pastille haut-gauche ; colonne droite ADN /
   Transcendance / Amélioration ; SPHÈRE de niveau bas-droite (couleur = ascendance) ;
   verrou haut-droite ; badges équipe/entraînement/favori bas-gauche. ---- */
.portc{position:relative;width:100%}
.portc .port{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle,#2a1a30,#0c0810);border:2.5px solid var(--rr,var(--gold-2));
  box-shadow:0 0 10px #0008 inset, 0 0 6px var(--rr,#0000)}
.portc .port img{width:104%;height:104%;object-fit:cover}
/* Pastille de RÔLE (haut-gauche) */
.portc-role{position:absolute;top:1px;left:1px;z-index:5}
.role-badge{display:inline-flex;align-items:center;justify-content:center;width:1.55em;height:1.55em;
  border-radius:50%;font-size:.78rem;background:rgba(8,5,14,.86);border:1.5px solid var(--rc,#888);
  color:var(--rc,#fff);box-shadow:0 1px 3px #000a;line-height:1}
/* Colonne d'AUGMENTATIONS (bord droit, haut→bas) */
.portc .aug-col{position:absolute;right:2px;top:16%;z-index:3;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
/* SPHÈRE de niveau (bas-droite), bordure/lueur = ascendance */
.portc-lvl{position:absolute;bottom:1px;right:1px;z-index:5;min-width:1.7em;height:1.7em;padding:0 .2em;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  font-family:'Cinzel',serif;font-weight:700;font-size:.72rem;color:#fff;
  background:radial-gradient(circle at 50% 35%,#2a2036,#0c0810);
  border:2px solid var(--ac,#b9a8e0);box-shadow:0 0 6px var(--ac,#0006),0 1px 3px #000a}
.portc-lvl[data-rank="0"]{border-width:2px}
.portc-lock{position:absolute;top:2px;right:2px;z-index:6;font-size:.7rem;color:#fff;line-height:1.5;
  background:#3a2a40;border:1px solid #6e5a78;border-radius:8px;padding:0 4px}
.portc .plus{position:absolute;top:2px;right:2px;z-index:4;font-family:'Cinzel',serif;font-size:.72rem;color:#fff;
  background:#5a0c14;padding:1px 6px;border-radius:8px;border:1px solid #c0142e}
.portc .team-badge{position:absolute;bottom:2px;left:2px;font-size:.62rem;color:#bfe0ff;z-index:3;line-height:1.6;
  background:#0e1a2aee;border:1px solid #2f6fae;border-radius:6px;padding:0 4px}
.portc .train-badge{position:absolute;bottom:2px;left:2px;font-size:.7rem;z-index:4}
.portc .fav-badge{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:.74rem;color:#ffd23f;z-index:4;text-shadow:0 0 6px #ffae00cc}
.portc-sm{max-width:66px;margin:0 auto}
/* Symboles d'ÉTAT (buff/debuff) sous la barre de vie — monstres (terrain) + alliés (dock) */
.status-chips{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:2px;pointer-events:none}
.st-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.05em;height:1.05em;padding:0 .12em;
  font-size:.62rem;line-height:1;border-radius:4px;background:rgba(8,5,14,.82);
  border:1px solid var(--sc,#888);color:var(--sc,#fff);box-shadow:0 1px 2px #0009}
.dock .ally .status-chips{margin-top:3px}
/* Placement raid : liste avant/arrière par unité */
.raid-place-list{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:10px auto}
.raid-place-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;
  background:linear-gradient(180deg,#241a2a,#15101a);border:1px solid #00000080}
.raid-place-row .portc{width:48px;flex:none}
.raid-place-row .duel-slotname{flex:1;font-size:.82rem;color:var(--txt)}
.lane-toggle{display:flex;gap:4px;flex:none}
.portc-xs{max-width:46px;margin:0 auto}
/* Rôle + augmentations sur le portrait du DOCK de combat (posés sur la CELLULE, pas dans
   le ring en overflow:hidden). Rend visibles en combat le rôle et les augmentations. */
.dock .ally .dk-role{position:absolute;top:20px;left:14px;z-index:6}
.dock .ally .dk-role .role-badge{width:1.4em;height:1.4em;font-size:.72rem}
.dock .ally .aug-row{position:absolute;top:24px;right:12px;bottom:auto;z-index:6;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.dock .ally .aug-chip{font-size:.54rem;padding:1px 3px}
/* 2.0 panneau Ressources */
.res-card{max-width:440px}
.res-sect{margin:12px 0 6px;font-family:'Cinzel',serif;color:var(--gold-hi,#ffcf66);font-size:.82rem;letter-spacing:.04em;
  border-bottom:1px solid #4a3a22;padding-bottom:3px}
.res-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.res-row.blason-row{gap:8px}

/* 3.3 — sous-catégories de l'Intendant (barre de filtres par emplacement) */
.shop-cats{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;justify-content:center}
/* Onglets de premier niveau de l'Intendant (Équipement / Consommables / Journalier) */
.shop-toptabs{margin:8px 0 12px}
.shop-toptabs .btn{font-family:'Cinzel',serif}
/* Boutons d'achat de consommables (×1 / ×10) */
.mat-buy{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.mat-buy .btn.sm{flex:1;min-width:72px}
/* Panneau Ressources : matériaux avec leur utilité (info-texte) */
.res-hint{font-size:.72rem;color:var(--txt-dim,#a99cc0);margin:4px 0 2px;line-height:1.4}
.res-mats{display:flex;flex-direction:column;gap:8px}
.res-mat{display:flex;align-items:center;gap:10px}
.res-mat .mat-chip{font-size:1.05rem;flex:none}
.res-mat-txt{display:flex;flex-direction:column;line-height:1.25}
.res-mat-txt b{color:#e8ddc2;font-size:.82rem}
.res-mat-txt span{color:var(--txt-dim,#a99cc0);font-size:.72rem}
.shop-cats .btn.sm{padding:6px 11px;font-size:.78rem}

/* 3.4 — bouton Info des taux d'invocation + liste de taux */
.sum-info{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid var(--gold-2,#7a5a2a);border-radius:8px;
  color:var(--gold-hi,#ffcf66);font-style:normal;cursor:pointer;font-size:.78rem;white-space:nowrap}
.sum-info:hover{background:rgba(255,207,102,.12)}
.rate-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rate-row{display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(0,0,0,.26);border-radius:8px}
.rate-row .rate-nm{flex:1;font-weight:700}
.rate-row b{color:#ffe9b0;min-width:64px;text-align:right}

/* Barre debug (admin) du combat de test « l'Entité » — forcer chaque action */
.entite-dbg{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:9000;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:96vw;
  padding:6px 10px;border-radius:10px;background:rgba(20,10,30,.82);border:1px solid #6a2bb0;
  box-shadow:0 4px 16px rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.entite-dbg .entite-dbg-t{font-family:'Cinzel',serif;font-size:.78rem;color:#d9b6ff;margin-right:4px;white-space:nowrap}
.entite-dbg .btn{margin:0;padding:5px 11px;font-size:.82rem;width:auto;min-width:0}

/* Éditeur admin « Configuration du Raid » */
.raidcfg-ov{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62);padding:16px;overflow:auto}
.raidcfg-box{width:min(760px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#1a1226,#120c1c);padding:16px 18px}
.raidcfg-box .rc-grp{margin:10px 0;padding:10px;border:1px solid #33244d;border-radius:8px;background:rgba(0,0,0,.22)}
.raidcfg-box .rc-grp>label{display:block;font-family:'Cinzel',serif;color:#d9b6ff;font-size:.82rem;letter-spacing:.04em;margin-bottom:6px}
.raidcfg-box .rc-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0;font-size:.85rem}
.raidcfg-box input[type=number]{width:60px}
.raidcfg-box input,.raidcfg-box select{background:#0e1622;color:#ece6f7;border:1px solid #40507a;border-radius:6px;padding:4px 6px;font-size:.85rem}
.raidcfg-box .rc-txt{flex:1;min-width:110px}
.raidcfg-box .rc-x{cursor:pointer;color:#ff9a9a;padding:2px 7px;border:1px solid #6a2b3a;border-radius:6px;font-size:.8rem}
.raidcfg-box .rc-empty{color:#9a8fb5;font-size:.82rem;padding:4px}
.raidcfg-box .rc-foot{margin-top:14px;display:flex;align-items:center;gap:12px}
.raidcfg-box .btn.sm{padding:3px 9px;font-size:.78rem}

/* ===== Tournoi — arbre à élimination directe (cf. js/tournui.js) ===== */
/* Une colonne par tour, de gauche à droite. Le conteneur scrolle horizontalement
   (beaucoup de tours) SANS jamais faire scroller la page. */
.tb-wrap{ display:flex; gap:14px; overflow-x:auto; padding:8px 2px 14px; align-items:flex-start; }
.tb-col{ flex:0 0 auto; min-width:190px; display:flex; flex-direction:column; gap:10px; }
.tb-colh{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.65; text-align:center; padding-bottom:2px; }
.tb-match{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.tb-match.encours{ border-color:#7fe3a0; box-shadow:0 0 0 1px rgba(127,227,160,.25); animation:tb-pulse 1.6s ease-in-out infinite; }
.tb-match.litige{ border-color:#ffb257; }
.tb-match.bye{ opacity:.75; border-style:dashed; }
@keyframes tb-pulse{ 50%{ box-shadow:0 0 12px rgba(127,227,160,.45); } }
.tb-row{ font-size:14px; line-height:1.5; }
.tb-p{ font-weight:600; }
.tb-won{ color:#7fe3a0; }
.tb-lost{ color:#8b8b93; text-decoration:line-through; font-weight:400; }
.tb-me{ text-shadow:0 0 10px rgba(159,198,255,.7); }
.tb-me::after{ content:" (toi)"; font-size:11px; opacity:.6; font-weight:400; text-shadow:none; }
.tb-empty{ opacity:.35; }
.tb-tag{ font-size:11px; padding:1px 6px; border-radius:6px; align-self:flex-start; }
.tb-tag.live{ background:rgba(127,227,160,.16); color:#7fe3a0; }
.tb-tag.litige{ background:rgba(255,178,87,.16); color:#ffb257; }
.tb-tag.bo3{ background:rgba(216,168,63,.18); color:#ffd97a; border:1px solid rgba(216,168,63,.4); font-weight:600; }
.tb-tag.done{ background:rgba(255,255,255,.06); opacity:.6; }
.tb-tag.pret{ background:rgba(159,198,255,.14); color:#9fc6ff; }
.tb-tag.bye{ background:rgba(255,255,255,.06); opacity:.6; }
.tb-adm{ font-size:11px; opacity:.85; display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.tb-champ{ margin:10px 0; padding:10px 14px; border-radius:10px; text-align:center; font-size:17px;
  background:linear-gradient(90deg, rgba(255,207,138,.12), rgba(255,207,138,.04)); border:1px solid rgba(255,207,138,.35); }
.tb-admin{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.tb-picks{ display:flex; flex-wrap:wrap; gap:6px; }
.tb-pick{ cursor:pointer; user-select:none; padding:5px 10px; border-radius:8px; font-size:13px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.tb-pick.on{ background:rgba(159,198,255,.14); border-color:#9fc6ff; }
.tb-check{ opacity:.8; }

/* Tournoi — panneau de règles admin */
.tb-pick.ko{ opacity:.45; cursor:not-allowed; border-style:dashed; }
.tb-n{ opacity:.6; font-size:11px; }
.tb-warn{ font-size:12px; color:#ffb257; background:rgba(255,178,87,.10); border:1px solid rgba(255,178,87,.35);
  border-radius:8px; padding:6px 10px; margin:6px 0; }
.tb-ok{ font-size:12px; opacity:.6; margin:6px 0; }
.tb-nums{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0; }
.tb-num{ display:flex; flex-direction:column; gap:3px; font-size:11px; opacity:.85; }
.tb-num .login-input{ width:110px; }
.btn.off{ opacity:.4; pointer-events:none; }

/* Tournoi — formats, classement suisse, onglets */
.tb-fmts{ display:flex; gap:8px; flex-wrap:wrap; }
.tb-fmt{ flex:1 1 190px; cursor:pointer; padding:8px 10px; border-radius:10px; font-size:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:3px; }
.tb-fmt.on{ background:rgba(159,198,255,.14); border-color:#9fc6ff; }
.tb-fmt b{ font-size:13px; }
.tb-fmt span{ opacity:.65; line-height:1.35; }
.tb-rules{ font-size:12px; margin:8px 0; padding:6px 10px; border-radius:8px; opacity:.9;
  background:rgba(159,198,255,.10); border:1px solid rgba(159,198,255,.28); }
.tb-tabs{ display:flex; gap:6px; margin:10px 0 4px; }
.tb-standings{ overflow-x:auto; }
.tb-table{ width:100%; border-collapse:collapse; font-size:14px; }
.tb-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.55; padding:4px 8px; font-weight:500; }
.tb-table td{ padding:5px 8px; border-top:1px solid rgba(255,255,255,.06); }
.tb-table tr.tb-cut td{ border-bottom:2px dashed rgba(127,227,160,.55); }
.tb-me-row{ background:rgba(159,198,255,.08); }
.tb-q{ color:#7fe3a0; }
.tb-wl{ opacity:.65; }
.tb-round{ display:flex; gap:10px; flex-wrap:wrap; }
.tb-round .tb-match{ min-width:180px; }

/* Tournoi — bannière « lancement manuel » (Je suis prêt) */
.tr-ready{ margin:10px 0 14px; padding:14px 16px; border-radius:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  background:linear-gradient(90deg, rgba(159,198,255,.14), rgba(159,198,255,.04)); border:1px solid rgba(159,198,255,.42);
  box-shadow:0 0 0 1px rgba(159,198,255,.12); }
.tr-ready.go{ background:linear-gradient(90deg, rgba(127,227,160,.18), rgba(127,227,160,.05)); border-color:rgba(127,227,160,.55); }
.tr-ready .tr-h{ font-size:16px; }
.tr-ready .tr-status{ font-size:13px; }
.tr-status .tr-ok{ color:#7fe3a0; }
.tr-status .tr-here{ color:#9fc6ff; }
.tr-status .tr-wait{ color:#c7bde8; opacity:.85; }
.btn.lg.tr-btn{ font-size:15px; padding:9px 20px; }
.tr-ready:not(.go) .btn.tr-btn.primary{ animation:tr-pulse 1.5s ease-in-out infinite; }
@keyframes tr-pulse{ 50%{ box-shadow:0 0 14px rgba(159,198,255,.6); } }
.tr-ready .tr-hint{ font-size:11px; opacity:.6; }

/* Tournoi — décompte 3·2·1 plein écran (pointer-events:none : ne bloque jamais le draft dessous) */
.tr-cd{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  pointer-events:none; background:radial-gradient(circle at center, rgba(6,4,14,.55), rgba(6,4,14,.82)); }
.tr-cd-box{ text-align:center; }
.tr-cd-vs{ font-size:20px; letter-spacing:.04em; color:#e8def7; margin-bottom:6px; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.tr-cd-n{ font-size:120px; font-weight:800; line-height:1; color:#fff;
  text-shadow:0 0 30px rgba(159,198,255,.9), 0 4px 18px rgba(0,0,0,.6); animation:tr-cd-pop .85s ease-out; }
.tr-cd-go{ font-size:64px; font-weight:800; color:#7fe3a0; text-shadow:0 0 34px rgba(127,227,160,.9); animation:tr-cd-go .5s ease-out; }
@keyframes tr-cd-pop{ 0%{ transform:scale(2.1); opacity:0; } 25%{ opacity:1; } 100%{ transform:scale(1); opacity:.95; } }
@keyframes tr-cd-go{ 0%{ transform:scale(.5); opacity:0; } 40%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); } }

/* Tournoi — animations de progression de l'arbre (déclenchées par le diff de TournUI) */
.tb-crown{ color:#ffcf8a; margin-right:3px; display:inline-block; }
.tb-win-pop{ display:inline-block; animation:tb-win-pop 1s ease-out; }
@keyframes tb-win-pop{ 0%{ transform:scale(1); } 28%{ transform:scale(1.22); text-shadow:0 0 16px rgba(127,227,160,.95); } 100%{ transform:scale(1); } }
.tb-lose-fade{ display:inline-block; animation:tb-lose-fade 1.1s ease-out; }
@keyframes tb-lose-fade{ 0%{ opacity:1; filter:none; } 100%{ opacity:.55; } }
.tb-advance-in{ display:inline-block; animation:tb-advance-in .9s cubic-bezier(.2,.8,.2,1); }
@keyframes tb-advance-in{ 0%{ opacity:0; transform:translateX(-12px); text-shadow:0 0 18px rgba(159,198,255,.95); } 60%{ opacity:1; } 100%{ transform:translateX(0); } }
.tb-match.tb-flash{ animation:tb-flash 1.2s ease-out; }
@keyframes tb-flash{ 0%{ background:rgba(127,227,160,.3); border-color:rgba(127,227,160,.6); } 100%{ background:rgba(255,255,255,.04); } }
.tb-champ.tb-champ-go{ animation:tb-champ-go 1.8s ease-out; }
@keyframes tb-champ-go{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,207,138,.35); } 50%{ box-shadow:0 0 26px rgba(255,207,138,.75); transform:scale(1.02); } }

/* Inter-Faction — paliers et équipe adverse */
.ev-team{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.ev-unit{ display:flex; flex-direction:column; align-items:center; gap:3px; width:74px; font-size:10px; text-align:center; }
.ev-unit img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.18); }
.ev-tiers{ display:flex; gap:12px; flex-wrap:wrap; }
.ev-tier{ flex:1 1 190px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.ev-tier.done{ border-color:rgba(127,227,160,.5); background:rgba(127,227,160,.06); }
.ev-tier.locked{ opacity:.55; }
.ev-th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.ev-pow{ font-size:18px; font-weight:600; }
.ev-rew{ font-size:13px; color:#ffcf8a; display:flex; align-items:center; gap:4px; }
.ev-rew img{ width:16px; height:16px; }
.ev-done{ font-size:12px; color:#7fe3a0; }
.ev-lock{ font-size:11px; opacity:.7; }
.ev-tier.boss{ border-color:rgba(192,20,46,.55); background:rgba(192,20,46,.07); }
.ev-boss{ font-size:11px; color:#ff8a8a; line-height:1.4; }
.ev-boss span{ opacity:.7; display:block; font-size:10px; }