/* =========================================================
   GLORYUS — Cartes de saison · v2
   Une carte = 4 couches, chacune visible et lisible :
     0. L'ARÈNE      commune à tout GLORYUS (gradins, arcades, sable)
     1. LA DIVISION  reverse holo « DIVISION I » + médaille en chiffres romains
     2. LE RÉSULTAT  couleur du cadre, foil, ornements (lauriers, couronne)
     3. LES STATS    victoires, vies prises/perdues ; ils allument l'arène
   CSS maison (aucun code repris d'une bibliothèque tierce). Charte GLORYUS 2026.
   ========================================================= */

/* Polices officielles : @font-face générées dans fonts.css par build.py.
   Replis libres auto-hébergés : */
@font-face { font-family: "ArchivoV"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "ArchivoV"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2"); }
@font-face { font-family: "GL Marker"; font-weight: 400; font-display: swap;
  src: url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); }

@property --mx     { syntax: "<number>"; inherits: true; initial-value: 50; }
@property --my     { syntax: "<number>"; inherits: true; initial-value: 50; }
@property --rx     { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ry     { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --active { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hyp    { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --snow: #FAFAFA; --onyx: #0D0D0D; --lime: #A1E500;
  --jungle: #29A370; --denim: #6290C3; --lilac: #7B52AD; --berry: #B8336A; --pumpkin: #F58138;

  --f-display: "Thunder", "ArchivoV", "Arial Narrow", sans-serif;
  --f-text: "Zalando Sans SemiExpanded", "ArchivoV", system-ui, sans-serif;
  --f-letter: "Brick", "GL Marker", cursive;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --rainbow: hsl(330 100% 66%), hsl(45 100% 62%), hsl(150 100% 55%), hsl(195 100% 62%), hsl(270 100% 70%), hsl(330 100% 66%);
}
.display { font-family: var(--f-display); font-weight: 800; font-style: italic; font-stretch: 62%; text-transform: uppercase; line-height: .9; }

/* =========================================================
   Structure
   ========================================================= */
.card {
  --card-w: 500px;
  width: var(--card-w); aspect-ratio: 5 / 7;
  perspective: 1400px; container-type: inline-size;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y; user-select: none;
  /* jeu de variables par défaut, surchargé par rareté */
  --frame: var(--onyx);
  --inner: var(--onyx);
  --ink: var(--snow); --ink-soft: rgba(250,250,250,.72);
  --accent: var(--lime);
  --plaque: var(--snow);
  --cut: 0cqw;
  --stone: #161616; --stone-line: rgba(250,250,250,.10); --arch-void: #070707;
  --torch: color-mix(in srgb, var(--accent) 70%, transparent); --torch-core: #fff6c8;
  --sand: color-mix(in srgb, var(--accent) 10%, #141414);
  --div-o: .07;
  --holo-frame: 0; --holo-full: 0; --sparkle: 0; --foil: 0;
  --grain-o: .18; --spray: 0;
}

.card__tilt {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)) scale(calc(1 + var(--active) * .03));
  transition: transform .6s cubic-bezier(.2,.8,.2,1), --mx .6s, --my .6s, --rx .6s, --ry .6s, --active .6s, --hyp .6s;
}
.card.is-interacting .card__tilt { transition: transform .08s linear; }

.card__face {
  position: absolute; inset: 0; border-radius: 4.4cqw; overflow: hidden;
  background: var(--frame); isolation: isolate;
  box-shadow: 0 2cqw 5cqw rgba(0,0,0,.45), 0 0 0 .25cqw rgba(255,255,255,.06) inset;
}

/* Holo du cadre */
.card__holo-frame {
  position: absolute; inset: 0; z-index: 1;
  background-image: repeating-linear-gradient(115deg, var(--rainbow) 30%), var(--grain);
  background-size: 300% 300%, 220px 220px;
  background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%), 0 0;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--holo-frame) * (.35 + var(--active) * .65));
}

/* Panneau intérieur */
.card__inner {
  position: absolute; inset: 2.8cqw; z-index: 2; border-radius: 2.4cqw;
  background: var(--inner); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.card__inner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); background-size: 220px 220px; mix-blend-mode: overlay; opacity: var(--grain-o); }

.card__double {
  position: absolute; inset: 4.4cqw; z-index: 3; pointer-events: none; display: none;
  border: .55cqw solid var(--frame); border-radius: 1.6cqw;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* ---------- COUCHE 0 : l'arène ---------- */
.card__arena { position: absolute; inset: 0; width: 100%; height: 100%; }
.arena__cornice { fill: none; stroke: var(--stone-line); stroke-width: .35; }
.arena__arch { fill: var(--arch-void); stroke: var(--stone-line); stroke-width: .3; }
.arena__arch.is-lit { fill: var(--torch-url); stroke: color-mix(in srgb, var(--accent) 50%, transparent);
  animation: gl-torch 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.arena__sand { fill: var(--sand); }
@keyframes gl-torch { 0%, 100% { opacity: 1; } 45% { opacity: .62; } 60% { opacity: .9; } }

/* ---------- COUCHE 1 : la division (reverse holo) ---------- */
.card__division {
  position: absolute; inset: -30% -40%; transform: rotate(-16deg);
  display: flex; flex-direction: column; justify-content: center; gap: .6cqw;
  font-family: var(--f-display); font-weight: 800; font-style: italic; font-stretch: 62%;
  font-size: 4.6cqw; line-height: 1; white-space: nowrap; letter-spacing: .06em;
  color: transparent;
  background-image: repeating-linear-gradient(115deg, var(--rainbow) 60cqw);
  background-position: calc(var(--mx) * 1.2cqw) calc(var(--my) * .8cqw);
  -webkit-background-clip: text; background-clip: text;
  opacity: calc(var(--div-o) + var(--active) * .16);
  mix-blend-mode: screen;
}
/* Reverse holo : la division brille partout SAUF dans la fenêtre de l'arène */
.card__division-wrap { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 40%, #000 52%); mask-image: linear-gradient(transparent 40%, #000 52%); }
.card__division span:nth-child(even) { margin-left: -9cqw; }

/* ---------- COUCHE 2 : le foil du résultat ---------- */
.card__foil {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--foil) * (.25 + var(--active) * .75));
  background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%);
  /* le holo du résultat brille dans la fenêtre de l'arène (comme l'illustration d'une carte holo) */
  -webkit-mask-image: linear-gradient(#000 0 40%, transparent 52%); mask-image: linear-gradient(#000 0 40%, transparent 52%);
}
.card__spray {
  position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(40% 26% at 50% 34%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(30% 22% at 12% 12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(30% 22% at 90% 14%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  filter: blur(3cqw); opacity: var(--spray); mix-blend-mode: screen;
}

/* ---------- Contenu ---------- */
.card__content {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  padding: 5.4cqw 7.6cqw 5cqw; color: var(--ink);
}
.card__top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.card__rarity {
  font-size: 5.8cqw; letter-spacing: .02em; color: var(--accent);
  padding: .6cqw 2.4cqw .4cqw; border: .4cqw solid currentColor;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.6cqw) 100%, 0 100%);
  background: rgba(13,13,13,.55);
}
.card__brand { height: 6cqw; display: flex; align-items: center; }
.card__brand img { height: 100%; width: auto; display: block; }
.card__brand .display { font-size: 6.2cqw; color: var(--ink); text-shadow: 0 .4cqw 1cqw rgba(0,0,0,.6); }

.card__visual {
  position: relative; flex: 0 0 auto;
  width: 100%; height: 66cqw;
  display: grid; place-items: center;
}
.card__plaque {
  position: relative; z-index: 2;
  width: 42cqw; aspect-ratio: 1; border-radius: 3cqw;
  background: var(--plaque); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 .6cqw var(--frame), 0 0 6cqw color-mix(in srgb, var(--accent) 35%, transparent), 0 2.4cqw 4cqw rgba(0,0,0,.6);
}
.card__plaque.is-dark { background: var(--onyx); }
.card__plaque img { width: 78%; height: 78%; object-fit: contain; display: block; }
.card__monogram { font-size: 19cqw; color: var(--onyx); }
.card__plaque.is-dark .card__monogram { color: var(--snow); }
.card__plaque::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgba(255,255,255,.45), transparent 55%);
  mix-blend-mode: soft-light; opacity: var(--active); }

.card__laurel {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 62cqw; height: 62cqw; transform: translate(-50%, -47%);
  color: var(--accent); filter: drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.6));
}
.card__crown {
  position: absolute; z-index: 3; top: -1.4cqw; left: 50%;
  width: 12cqw; height: 7.7cqw; transform: translateX(-50%);
  color: var(--accent); filter: drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.6));
}
.card__crown svg { width: 100%; height: 100%; display: block; }

.card__medal { /* médaille de division, façon monnaie romaine */
  position: absolute; z-index: 3; left: 0; bottom: 1cqw;
  width: 12.5cqw; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 35% 30%, #2a2a2a, var(--onyx) 70%);
  border: .5cqw solid var(--accent);
  box-shadow: 0 0 0 .5cqw var(--onyx), 0 1cqw 2cqw rgba(0,0,0,.6);
  color: var(--accent);
}
.card__medal small { font-family: var(--f-text); font-stretch: 112%; font-weight: 700; font-size: 1.6cqw; letter-spacing: .2em; line-height: 1; margin-bottom: .3cqw; }
.card__medal b { font-size: 5.6cqw; line-height: .8; letter-spacing: .02em; }

.card__badge {
  position: absolute; z-index: 3; right: 0; bottom: 2.2cqw;
  font-family: var(--f-text); font-stretch: 112%; font-weight: 700;
  font-size: 2.1cqw; letter-spacing: .1em; text-transform: uppercase;
  color: var(--onyx); background: var(--accent); padding: 1cqw 2cqw;
  clip-path: polygon(1.2cqw 0, 100% 0, calc(100% - 1.2cqw) 100%, 0 100%);
  box-shadow: 0 1cqw 2cqw rgba(0,0,0,.4);
}

.card__name { width: 100%; margin: 0; text-align: center; white-space: nowrap; overflow: hidden;
  font-size: 9.6cqw; padding-top: .8cqw; text-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.6); }
.card__tier { margin: 1cqw 0 0; display: flex; align-items: center; gap: 2cqw;
  font-family: var(--f-text); font-stretch: 112%; font-weight: 700;
  font-size: 2.9cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.card__tier::before, .card__tier::after { content: ""; width: 6cqw; height: .4cqw; background: currentColor; }

.card__roster { list-style: none; margin: 1.8cqw 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4cqw 3cqw; max-width: 94%;
  font-family: var(--f-text); font-stretch: 112%; font-weight: 500; font-size: 2.9cqw; color: var(--ink-soft); }
.card__roster li { white-space: nowrap; }
.card__roster li::before { content: ""; display: inline-block; width: .9cqw; height: .9cqw; margin-right: 1.1cqw;
  vertical-align: .45cqw; background: var(--accent); transform: rotate(45deg); }

/* Les 5 portes du parcours */
.card__path { display: flex; gap: 1.4cqw; margin-top: 2.2cqw; }
.card__path i { width: 3.2cqw; height: 4cqw; border-radius: 1.6cqw 1.6cqw 0 0;
  border: .35cqw solid color-mix(in srgb, var(--accent) 55%, transparent); border-bottom-width: .5cqw; }
.card__path i.is-on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 1.6cqw color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- COUCHE 3 : stats ---------- */
.card__stats {
  width: 100%; margin-top: 2cqw;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: .3cqw solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-bottom: .3cqw solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}
.card__stats > div { display: grid; justify-items: center; gap: .6cqw; padding: 1.6cqw 0 1.4cqw; }
.card__stats > div + div { border-left: .25cqw solid color-mix(in srgb, var(--accent) 25%, transparent); }
.card__stats b { font-size: 6.6cqw; color: var(--ink); font-variant-numeric: tabular-nums; }
.card__stats span { font-family: var(--f-text); font-stretch: 112%; font-weight: 700; font-size: 1.85cqw;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.card__foot { margin-top: auto; width: 100%;
  display: flex; justify-content: space-between; align-items: center; padding-top: 2cqw;
  border-top: .3cqw dashed color-mix(in srgb, var(--accent) 60%, transparent);
  font-family: var(--f-text); font-stretch: 112%; font-weight: 700;
  font-size: 2.2cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.card__foot b { color: var(--ink); }

/* ---------- Lumières au-dessus ---------- */
.card__holo-full, .card__sparkle, .card__glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.card__holo-full { z-index: 5;
  background-image: repeating-linear-gradient(110deg, var(--rainbow) 25%);
  background-size: 260% 260%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%);
  mix-blend-mode: color-dodge; filter: brightness(.75) contrast(1.4);
  opacity: calc(var(--holo-full) * (.12 + var(--active) * var(--hyp) * .8 + var(--active) * .2)); }
.card__sparkle { z-index: 6;
  background-image: radial-gradient(circle, #fff 0 .18cqw, transparent .32cqw), radial-gradient(circle, #fff 0 .12cqw, transparent .26cqw);
  background-size: 7cqw 9cqw, 5cqw 6.5cqw;
  background-position: calc(var(--mx) * -.4cqw) calc(var(--my) * -.3cqw), calc(var(--mx) * .3cqw) calc(var(--my) * .5cqw);
  mix-blend-mode: color-dodge;
  -webkit-mask-image: radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), #000 0%, transparent 45%);
          mask-image: radial-gradient(circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), #000 0%, transparent 45%);
  opacity: calc(var(--sparkle) * var(--active)); }
.card__glare { z-index: 7;
  background: radial-gradient(farthest-corner circle at calc(var(--mx) * 1%) calc(var(--my) * 1%),
    rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 22%, rgba(0,0,0,.35) 90%);
  mix-blend-mode: overlay; opacity: calc(var(--active) * .7); }

/* =========================================================
   COUCHE 1 — divisions : angle du motif propre à chaque division
   (aucune hiérarchie de couleur entre divisions : la couleur reste au résultat)
   ========================================================= */
.card.d-2 .card__division { transform: rotate(16deg); }
.card.d-3 .card__division { transform: rotate(-34deg); }
.card.d-4 .card__division { transform: rotate(34deg); }

/* =========================================================
   COUCHE 2 — résultats
   ========================================================= */
.card.r-commune {
  --frame: var(--onyx); --inner: var(--snow);
  --ink: var(--onyx); --ink-soft: rgba(13,13,13,.72); --accent: var(--onyx); --plaque: var(--onyx);
  --stone: #ececec; --stone-line: rgba(13,13,13,.16); --arch-void: #e2e2e2;
  --torch: rgba(13,13,13,.55); --torch-core: rgba(13,13,13,.9); --sand: #e9e9e9;
  --div-o: .07; --grain-o: .08;
}
.card.r-commune .card__inner { box-shadow: 0 0 0 .5cqw var(--snow) inset, 0 0 0 .9cqw var(--onyx) inset; }
.card.r-commune .card__division { mix-blend-mode: multiply; }
.card.r-commune .card__plaque { box-shadow: 0 1.6cqw 3cqw rgba(0,0,0,.25); }
.card.r-commune .card__rarity { background: var(--snow); }
.card.r-commune .card__name, .card.r-commune .card__brand .display { text-shadow: none; }
.card.r-commune .card__medal { background: var(--snow); color: var(--onyx); box-shadow: 0 0 0 .5cqw var(--snow), 0 1cqw 2cqw rgba(0,0,0,.2); }
.card.r-commune .card__path i.is-on { box-shadow: none; }
.card.r-commune .arena__arch.is-lit { fill: rgba(13,13,13,.62); stroke: none; animation: none; }

.card.r-rare {
  --frame: var(--denim); --inner: linear-gradient(175deg, #142233, var(--onyx) 60%); --accent: var(--denim);
  --cut: 5cqw; --holo-frame: .55; --foil: .18; --spray: .3; --grain-o: .22; --div-o: .1;
}
.card.r-rare .card__foil { /* foil léger : lignes verticales */
  background-image: repeating-linear-gradient(90deg, var(--rainbow) 12%);
  background-size: 160% 100%; }

.card.r-epique {
  --frame: var(--lilac); --inner: linear-gradient(175deg, #1f1430, var(--onyx) 62%); --accent: #A884D6;
  --cut: 5.5cqw; --holo-frame: .75; --holo-full: .1; --sparkle: .5; --foil: .45; --spray: .4; --grain-o: .24; --div-o: .12;
}
.card.r-epique .card__foil { /* « regular holo » : diagonales */
  background-image: repeating-linear-gradient(135deg, transparent 0 1.2cqw, rgba(255,255,255,.5) 1.2cqw 1.5cqw), linear-gradient(115deg, var(--rainbow));
  background-size: 100% 100%, 150% 150%; background-blend-mode: overlay; }

.card.r-legendaire {
  --frame: var(--pumpkin); --inner: linear-gradient(175deg, #34190a, var(--onyx) 64%); --accent: var(--pumpkin);
  --cut: 6cqw; --holo-frame: .85; --holo-full: .16; --sparkle: .7; --foil: .55; --spray: .45; --grain-o: .26; --div-o: .14;
}
.card.r-legendaire .card__double { display: block; }
.card.r-legendaire .card__foil { /* « radiant » : trame croisée */
  background-image:
    repeating-linear-gradient(45deg, transparent 0 1cqw, rgba(255,255,255,.45) 1cqw 1.2cqw),
    repeating-linear-gradient(-45deg, transparent 0 1cqw, rgba(255,255,255,.45) 1cqw 1.2cqw),
    linear-gradient(115deg, var(--rainbow));
  background-size: 100% 100%, 100% 100%, 150% 150%; background-blend-mode: overlay; }
.card.r-legendaire .card__laurel { opacity: .55; }

.card.r-mythique {
  --frame: var(--lime); --inner: radial-gradient(120% 80% at 50% 30%, #1c2a04, var(--onyx) 62%); --accent: var(--lime);
  --torch-core: #f4ffd0;
  --cut: 6.5cqw; --holo-frame: 1; --holo-full: .22; --sparkle: 1; --foil: .7; --spray: .5; --grain-o: .28; --div-o: .16;
}
.card.r-mythique .card__double { display: block; }
.card.r-mythique .card__rarity { background: var(--lime); color: var(--onyx); border-color: var(--lime); }
.card.r-mythique .card__foil { /* « secret rare » : arc-en-ciel + paillettes */
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 .12cqw, transparent .2cqw),
    linear-gradient(115deg, var(--rainbow));
  background-size: 3cqw 3cqw, 150% 150%; }
.card.r-mythique .card__plaque { box-shadow: 0 0 0 .6cqw var(--lime), 0 0 9cqw rgba(161,229,0,.55), 0 2.4cqw 4cqw rgba(0,0,0,.6); }

/* =========================================================
   CAST — la voix de l'arène : ultra sympa
   ========================================================= */
.card.r-cast {
  --frame: var(--berry); --accent: #FF6FA8; --inner: radial-gradient(110% 70% at 50% 28%, #3a0f22, var(--onyx) 62%);
  --cut: 5cqw; --holo-frame: .7; --holo-full: .1; --sparkle: .6; --foil: .4; --spray: .45; --grain-o: .24;
}
.card.r-cast .card__foil { background-image: repeating-radial-gradient(circle at 50% 30%, transparent 0 2cqw, rgba(255,255,255,.35) 2cqw 2.3cqw), linear-gradient(115deg, var(--rainbow)); background-size: 100% 100%, 300% 300%; background-blend-mode: overlay; }
.card__visual--cast { height: 82cqw; }
.card__mic { position: relative; z-index: 2; width: 30cqw; height: 36cqw; margin-top: -4cqw;
  filter: drop-shadow(0 0 4cqw rgba(255,111,168,.55)) drop-shadow(0 2cqw 3cqw rgba(0,0,0,.6));
  transform: rotate(-12deg); }
.mic__head { fill: var(--onyx); stroke: var(--accent); stroke-width: 3; }
.mic__grill line { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.mic__arc { fill: none; stroke: var(--snow); stroke-width: 4; stroke-linecap: round; }
.card__eq { position: absolute; z-index: 1; left: 0; right: 0; bottom: 6cqw; height: 18cqw;
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw; }
.card__eq i { width: 2.4cqw; height: 100%; border-radius: 1.2cqw; background: linear-gradient(var(--accent), var(--lime));
  transform: scaleY(calc(.25 + .55 * (1 - (var(--i) - 6) * (var(--i) - 6) / 36)));
  animation: gl-eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); opacity: .85; }
@keyframes gl-eq { from { transform: scaleY(.18); } to { transform: scaleY(calc(.35 + .65 * (1 - (var(--i) - 6) * (var(--i) - 6) / 40))); } }
.card__onlive { position: absolute; z-index: 3; top: 3cqw; right: 2cqw; transform: rotate(8deg);
  font-family: var(--f-letter); font-size: 6.4cqw; color: var(--lime); text-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.6); }
.card__onlive::before { content: ""; display: inline-block; width: 2cqw; height: 2cqw; border-radius: 50%; margin-right: 1.4cqw;
  background: #ff3b3b; box-shadow: 0 0 2cqw #ff3b3b; vertical-align: .6cqw; animation: gl-rec 1.4s steps(2) infinite; }
@keyframes gl-rec { 50% { opacity: .2; } }
.card__bubble { position: absolute; z-index: 3; left: 0; bottom: 3cqw; margin: 0; max-width: 64%;
  padding: 2cqw 3cqw; background: var(--snow); color: var(--onyx);
  font-family: var(--f-letter); font-size: 4.4cqw; line-height: 1.05; transform: rotate(-4deg);
  border-radius: 2.4cqw 2.4cqw 2.4cqw .4cqw; box-shadow: .8cqw .8cqw 0 var(--accent); }

/* =========================================================
   STAFF — hors catégorie : exceptionnelle
   ========================================================= */
.card.r-staff {
  --frame: var(--jungle); --accent: var(--lime);
  --inner: radial-gradient(120% 75% at 50% 32%, #0f3324, #06140e 55%, var(--onyx));
  --torch-core: #f4ffd0; --torch: rgba(161,229,0,.75); --sand: #0f2a1d;
  --cut: 7cqw; --holo-frame: 1; --holo-full: .22; --sparkle: 1; --spray: .5; --grain-o: .3;
}
.card.r-staff .card__double { display: block; border-color: var(--lime); border-width: .4cqw; inset: 4.6cqw; }
.card.r-staff .card__face { background: linear-gradient(160deg, var(--jungle), #1d7a53 45%, var(--lime) 120%); }
.card.r-staff .card__rarity { background: var(--lime); color: var(--onyx); border-color: var(--lime); }
.card__cosmos { /* nébuleuse + champ d'étoiles qui suit la lumière */
  position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 28% 64%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 46% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 64% 44%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 82% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 90% 70%, #fff 50%, transparent),
    radial-gradient(1px 1px at 8% 86%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 56% 80%, #fff 50%, transparent),
    radial-gradient(45% 30% at calc(20% + var(--mx) * .3%) 30%, rgba(41,163,112,.55), transparent 70%),
    radial-gradient(40% 28% at calc(80% - var(--mx) * .3%) 60%, rgba(161,229,0,.35), transparent 70%),
    radial-gradient(35% 25% at 50% calc(10% + var(--my) * .4%), rgba(98,144,195,.35), transparent 70%);
  background-size: 22cqw 26cqw, 18cqw 21cqw, 25cqw 23cqw, 20cqw 27cqw, 23cqw 19cqw, 19cqw 24cqw, 26cqw 22cqw, 21cqw 25cqw, 100% 100%, 100% 100%, 100% 100%;
  opacity: calc(.55 + var(--active) * .45);
}
.card__visual--staff { height: 78cqw; }
.card__laurel--staff { width: 66cqw; height: 66cqw; color: var(--lime); transform: translate(-50%, -50%); top: 52%; }
.card.r-staff .card__crown { top: 2cqw; width: 15cqw; height: 9.6cqw; color: var(--lime); }
.card__staff-letter { position: relative; z-index: 2; font-family: var(--f-letter); font-size: 20cqw; line-height: 1;
  color: var(--snow); transform: rotate(-9deg); margin-top: 6cqw;
  text-shadow: 0 0 4cqw rgba(161,229,0,.7), 0 1cqw 2cqw rgba(0,0,0,.6); }
.card__name--staff { font-size: 15cqw; color: var(--lime); text-shadow: 0 0 5cqw rgba(161,229,0,.45), 0 .8cqw 1.6cqw rgba(0,0,0,.7); margin-top: -2cqw; }
.card__quote { margin: 1.6cqw 0 0; max-width: 86%; text-align: center; font-family: var(--f-text); font-stretch: 112%;
  font-weight: 500; font-style: italic; font-size: 2.8cqw; line-height: 1.35; color: var(--ink-soft); }

/* =========================================================
   Ralenti idle (mythique, staff) et modes
   ========================================================= */
@keyframes gl-idle {
  0%   { --mx: 20; --my: 25; --active: .55; --hyp: .5; }
  50%  { --mx: 80; --my: 70; --active: .72; --hyp: .8; }
  100% { --mx: 20; --my: 25; --active: .55; --hyp: .5; }
}
.card.is-idle .card__tilt { animation: gl-idle 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .card.is-idle .card__tilt, .arena__arch.is-lit, .card__eq i, .card__onlive::before { animation: none; }
  .card__tilt { transition: none; }
}
.capture .card__tilt { transition: none !important; animation: none !important; }
.capture .arena__arch.is-lit, .capture .card__onlive::before { animation: none !important; }
.capture .card__face { box-shadow: none; }
.capture-card .card__tilt { transform: none !important; }