/* ============================================================
   neo — la partie : cartes au glissé, transitions, combats en duel
   Chargé après neo.css, sous html.neo comme lui. Un fichier par
   chantier pour que les refontes parallèles ne se marchent pas dessus.
   ============================================================
   Structure, relief, mouvement — et rien d'autre :
   - pas de verre dépoli, pas de halo, pas de dégradé décoratif. Le seul
     dégradé est celui de neo.css : le décor se fond dans l'aplat du texte ;
   - tout ce qui bouge passe par transform et opacity ;
   - aucune animation sans fin sur une image ;
   - prefers-reduced-motion coupe le mouvement en bas de feuille.
   ============================================================ */

/* ---------------------------------------------------------------------------
   LA CARTE — de quoi bouger à 60 images par seconde
   --------------------------------------------------------------------------- */
/* style.css pose sur chaque carte un flou d'arrière-plan et une ombre en
   filtre : du verre dépoli que la direction artistique refuse, et deux
   calculs refaits à chaque image dès que la carte bouge. L'ombre neo
   (box-shadow) suffit au relief. */
html.neo #card-zone .game-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
html.neo #card-zone { position: relative; }

/* Le calque : la carte qui sort, la technique qui vole. Au-dessus de la carte
   vivante, sous l'en-tête collant. */
html.neo #card-zone > .np-calque {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 6;
  pointer-events: none;
}
html.neo #card-zone .np-calque > .np-sortante {
  position: absolute !important;
  margin: 0 !important;
  transform-origin: 50% 35%;
  will-change: transform, opacity;
}
/* Une copie rejouerait les entrées de sa carte (le décor qui arrive, les
   choix qui montent) : elle est figée à l'état final. */
html.neo #card-zone .np-sortante,
html.neo #card-zone .np-sortante *,
html.neo #card-zone .np-fantome,
html.neo #card-zone .np-fantome * { animation: none !important; transition: none !important; }

/* L'entrée d'une carte neuve : tirée du paquet, elle arrive de la droite. */
html.neo #card-zone .game-card.np-donne {
  animation: np-donne 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* L'issue : le revers de la carte jouée. Elle se retourne pendant que
   l'autre face part. */
html.neo #card-zone .game-card.np-revele {
  animation: np-revele 0.42s 0.2s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  transform-origin: 50% 35%;
}
html.neo #card-zone .game-card.np-revele.np-apres-vol { animation-delay: 0.1s; }
/* Le revers garde son décor : il ne rejoue pas son arrivée. */
html.neo #card-zone .game-card.np-revele .neo-decor { animation: none; }

/* ---------------------------------------------------------------------------
   LE GLISSÉ — la face de la carte (le décor et le texte) se prend au doigt
   --------------------------------------------------------------------------- */
/* neo.css donne une marge de 14 px à tout ce qui n'est pas la scène, par une
   règle de spécificité (1,11,1). La face, elle, va bord à bord : la classe
   répétée passe au-dessus sans toucher à la feuille de neo. */
html.neo #card-zone .game-card.neo-a-scene > .np-face.np-face.np-face.np-face.np-face.np-face.np-face.np-face.np-face {
  margin: 0 !important;
}
html.neo #card-zone .np-face {
  position: relative;
  border-radius: var(--n-r) var(--n-r) 0 0;
  background: var(--n-s1);
  transform-origin: 50% 110%;
}
html.neo #card-zone .np-face.np-glissable {
  /* Le doigt qui part en vertical fait défiler la page ; en horizontal, il prend la carte. */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
html.neo #card-zone .np-face img { -webkit-user-drag: none; }
html.neo #card-zone .np-face.np-tenu {
  z-index: 5;
  cursor: grabbing;
  border-radius: var(--n-r);
  box-shadow: 0 0 0 1px var(--n-filet-fort), 0 26px 40px -18px rgba(0, 0, 0, 0.95);
  will-change: transform;
}
html.neo #card-zone .np-face.np-tenu .neo-scene,
html.neo #card-zone .np-face.np-tenu .neo-decor { border-radius: var(--n-r) var(--n-r) 0 0; }
/* Le tampon : ce que la carte va jouer si on la lâche. */
html.neo #card-zone .np-tampon {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 6;
  max-width: 80%;
  padding: 8px 12px 9px;
  border: 2px solid var(--n-orange);
  border-radius: 10px;
  background: rgba(10, 11, 15, 0.92);
  color: #fff;
  font: 800 14px/1.25 var(--n-titre);
  text-align: left;
  transform: translateX(-50%) rotate(-5deg);
  opacity: 0;
  pointer-events: none;
  display: flex;
  gap: 2px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.9);
}
html.neo #card-zone .np-tampon > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.neo #card-zone .np-tampon.np-vers-g { transform: translateX(-50%) rotate(5deg); }
html.neo #card-zone .np-tampon::before { content: "→"; flex: 0 0 auto; margin-right: 4px; color: var(--n-orange); font-weight: 900; }
html.neo #card-zone .np-tampon.np-vers-g::before { content: "←"; }
html.neo #card-zone .np-face.np-pret .np-tampon { background: var(--n-orange); color: #1a0b00; }
html.neo #card-zone .np-face.np-pret .np-tampon::before { color: #1a0b00; }
/* L'option visée répond pendant le geste : elle glisse du même côté. */
html.neo #card-zone .ev-options .btn-choice.np-cible {
  border-color: rgba(255, 138, 31, 0.7) !important;
  transform: translate3d(-6px, 0, 0);
}
html.neo #card-zone .ev-options .btn-choice.np-cible[data-np-sens="d"] { transform: translate3d(6px, 0, 0); }
html.neo #card-zone .ev-options .btn-choice.np-pret {
  background: color-mix(in srgb, var(--n-orange) 22%, var(--n-s2)) !important;
  border-color: var(--n-orange) !important;
}
/* Pendant le geste, chaque option glissable montre son côté. */
html.neo #card-zone .np-en-glisse .btn-choice[data-np-sens]::before {
  content: "←";
  position: absolute;
  top: -9px;
  left: 12px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--n-orange);
  color: #1a0b00;
  font: 900 11px/1 var(--n-titre);
}
html.neo #card-zone .np-en-glisse .btn-choice[data-np-sens="d"]::before { content: "→"; left: auto; right: 12px; }
/* L'astuce des premières cartes. */
html.neo #card-zone .np-astuce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 18px 0 !important;
  font: 600 12.5px/1.35 var(--n-titre);
  color: var(--n-pale);
  text-align: center;
}
html.neo #card-zone .np-astuce span { color: var(--n-orange); font-weight: 900; font-size: 15px; }

/* ---------------------------------------------------------------------------
   LES GAINS — la pastille vole jusqu'à sa barre
   --------------------------------------------------------------------------- */
#np-vol {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
#np-vol .np-jeton {
  position: absolute;
  left: 0; top: 0;
  padding: 5px 9px;
  border-radius: 999px;
  font: 900 13px/1 "Inter", system-ui, sans-serif;
  background: #43d17a;
  color: #062010;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.9);
  will-change: transform, opacity;
}
#np-vol .np-jeton.neg { background: #ff4d4d; color: #1a0000; }
html.neo #game-header .stat.np-monte .stat-v,
html.neo #game-header .stat.np-baisse .stat-v { display: inline-block; animation: np-chiffre 0.62s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
html.neo #game-header .stat.np-monte .stat-v { color: #9ff0bf !important; }
html.neo #game-header .stat.np-baisse .stat-v { color: #ffb3b3 !important; }
html.neo #game-header .stat.np-monte .bar { animation: np-piste-pos 0.7s ease-out; }
html.neo #game-header .stat.np-baisse .bar { animation: np-piste-neg 0.7s ease-out; }

/* ---------------------------------------------------------------------------
   LE DUEL — la carte
   --------------------------------------------------------------------------- */
html.neo #card-zone .game-card.np-duel {
  padding: 0 0 16px !important;
  overflow: visible !important;
  margin-top: 46px;
  text-align: left;
}
html.neo #card-zone .game-card.np-duel::before,
html.neo #card-zone .game-card.np-duel::after { display: none !important; }
html.neo #card-zone .np-duel .boss-portrait { display: none !important; }
/* L'en-tête et le bandeau d'origine : lus par le lecteur d'écran, plus montrés. */
html.neo #card-zone .np-masque {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
html.neo #card-zone .game-card.np-duel .ev-text {
  padding: 14px 18px 0 !important;
  font-size: 16.5px !important;
  line-height: 1.5 !important;
}
html.neo #card-zone .game-card.np-duel .ev-text.boss-warn {
  margin: 12px 14px 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px;
  background: rgba(255, 77, 77, 0.12);
  border: 1px solid rgba(255, 77, 77, 0.35);
  color: #ffd2d2 !important;
  font-size: 14.5px !important;
  font-weight: 600;
}
html.neo #card-zone .game-card.np-duel .btn-primary,
html.neo #card-zone .game-card.np-duel .btn-gold,
html.neo #card-zone .game-card.np-duel .btn-red { width: calc(100% - 28px) !important; margin: 16px 14px 0 !important; }
html.neo #card-zone .game-card.np-duel .souffle-row { margin: 12px 12px 0 !important; }
html.neo #card-zone .game-card.np-duel .ev-death { margin: 12px 14px 0 !important; }

/* Le corps de la carte (texte, techniques) change ; l'arène, elle, reste. */
html.neo #card-zone .np-duel.np-corps-entre > :not(.np-arene):not(.np-masque):not(.ev-options) {
  animation: np-corps 0.32s 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Après un coup : le récit arrive quand l'impact est passé. */
html.neo #card-zone .np-duel.np-apres.np-apres > :not(.np-arene):not(.np-masque):not(.np-rien) {
  animation: np-corps 0.4s var(--np-apres, 0.5s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------------------------------------------------------------------------
   L'ARÈNE
   --------------------------------------------------------------------------- */
html.neo .np-arene {
  position: relative;
  border-radius: var(--n-r) var(--n-r) 0 0;
  isolation: isolate;
}
/* La scène a sa hauteur ; les jauges passent dessous, à cheval sur le bord. */
html.neo .np-plateau {
  position: relative;
  height: clamp(240px, 36vh, 330px);
  border-radius: inherit;
}
html.neo .np-fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}
html.neo .np-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
/* Le dégradé de neo.css, le même : le décor se fond dans l'aplat de la carte. */
html.neo .np-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0) 40%, rgba(19, 21, 28, 0.7) 76%, var(--n-s1) 100%);
}
/* L'adversaire : en pied, à droite, il sort du cadre par le haut. */
html.neo .np-adv {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 116%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 2;
  pointer-events: none;
  transform-origin: 70% 100%;
}
html.neo .np-adv-img {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
}
html.neo .np-adv.np-duo .np-adv-img:not(.np-second) { z-index: 1; }
html.neo .np-adv.np-duo .np-second {
  position: absolute;
  right: 44%;
  bottom: 0;
  height: 84%;
  max-width: 70%;
  z-index: 0;
  filter: brightness(0.72);
}
/* Le portrait peint (les rares que Storm n'a pas) : fondu par son bord gauche. */
html.neo .np-adv-img.np-portrait {
  height: 92%;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  border-radius: 0 var(--n-r) 0 0;
}
html.neo .np-adv.np-sans-art { height: 100%; width: 46%; right: 4%; }
html.neo .np-face-adv { height: 96%; width: auto; max-width: 100%; }
html.neo .np-face-storm { object-fit: contain; object-position: right bottom; filter: brightness(0.14) drop-shadow(-2px -1px 0 rgba(196, 204, 222, 0.5)); }
html.neo .np-face-storm.np-double { filter: brightness(0.55) saturate(0.6) drop-shadow(-2px -1px 0 rgba(196, 204, 222, 0.5)); }
html.neo .np-face-adv .np-ombre { fill: #0b0d12; }
html.neo .np-face-adv .np-rim { fill: rgba(196, 204, 222, 0.42); }
/* Toi : de dos, au premier plan. */
html.neo .np-moi {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 66%;
  z-index: 3;
  pointer-events: none;
  transform-origin: 30% 100%;
}
/* Le ninja Storm de dos : on le voit des hanches à la tête, dans l'ombre,
   le contour éclairé par la scène. */
html.neo .np-moi { overflow: visible; --np-rim: rgba(255, 214, 170, 0.75); }
/* [27/10, rapport du propriétaire] Le sprite descend sous la scène (on le voit
   des hanches à la tête) : le bandeau du duel cachait ce bas, celui de
   l'examen, plus court sur grand écran, laissait les pieds sur le texte.
   On coupe au bord bas de la scène, et nulle part ailleurs. */
html.neo .np-moi { clip-path: inset(-200% -200% 0 -200%); }
html.neo .np-dos-storm {
  position: absolute;
  left: 2%;
  bottom: -62%;
  height: 162%;
  width: auto;
  max-width: none;
  filter: brightness(0.42) saturate(0.7) drop-shadow(2px -1px 0 var(--np-rim));
  transition: filter 0.25s ease;
}
html.neo .np-arene.np-charge .np-moi { --np-rim: var(--n-chakra); }
html.neo .np-arene.np-victoire .np-moi { --np-rim: var(--n-or); }
/* Le voile rouge du coup encaissé. */
html.neo .np-voile {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: var(--n-rouge);
  opacity: 0;
  pointer-events: none;
}
html.neo .np-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
html.neo .np-eclat { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
html.neo .np-eclat svg { display: block; width: 100%; height: 100%; }
/* L'entaille : un trait plein, bordé d'orange. */
html.neo .np-entaille {
  position: absolute;
  width: 72%;
  height: 7px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--n-orange);
  will-change: transform, opacity;
}
/* Le verdict : celui qui a perdu tombe, et y reste. */
html.neo .np-arene.np-victoire .np-adv {
  transform: translate3d(10px, 7%, 0) rotate(-2.5deg);
  transition: transform 0.9s 0.25s cubic-bezier(0.3, 0.7, 0.2, 1);
}
html.neo .np-arene.np-victoire .np-adv-img,
html.neo .np-arene.np-victoire .np-face-adv {
  filter: grayscale(0.75) brightness(0.55);
  transition: filter 0.9s 0.25s ease;
}
html.neo .np-arene.np-defaite .np-moi {
  transform: translate3d(-6px, 16%, 0) rotate(-3deg);
  transition: transform 0.9s 0.2s cubic-bezier(0.3, 0.7, 0.2, 1);
}
html.neo .np-arene.np-defaite .np-voile { opacity: 0.2; transition: opacity 0.8s 0.2s ease; }

/* ---------- les annonces : « Échange 2 », « Touché », « Contré » ---------- */
html.neo .np-annonce {
  position: absolute;
  left: 0; right: 0;
  top: 34%;
  z-index: 7;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
html.neo .np-annonce span {
  display: block;
  max-width: 86%;
  padding: 8px 18px 9px;
  border-left: 6px solid var(--n-orange);
  border-radius: 4px;
  background: rgba(10, 11, 15, 0.92);
  color: #fff;
  font: italic 900 30px/1 var(--n-titre);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.95);
  transform: skewX(-10deg);
  opacity: 0;
  will-change: transform, opacity;
}
html.neo .np-annonce.np-manche span { font-size: 24px; }
html.neo .np-annonce.np-long span { font-size: 21px; line-height: 1.1; }
html.neo .np-annonce.np-gagne span { background: var(--n-orange); color: #1a0b00; border-left-color: #fff; }
html.neo .np-annonce.np-perdu span { background: var(--n-rouge); color: #1a0000; border-left-color: #fff; }

/* ---------- le regard : la bande des yeux, à l'entrée du combat ---------- */
html.neo .np-regard {
  position: absolute;
  left: -6px; right: -6px;
  top: 28%;
  height: 32%;
  z-index: 8;
  overflow: hidden;
  background: #000;
  border-top: 3px solid var(--n-orange);
  border-bottom: 3px solid var(--n-orange);
  transform: scaleY(0);
  pointer-events: none;
  display: none;
}
html.neo .np-regard.np-vue { display: block; }
html.neo .np-regard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
html.neo .np-regard b {
  position: absolute;
  left: 14px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font: italic 900 16px/1 var(--n-titre);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- les jauges ---------- */
html.neo .np-hud {
  position: relative;
  z-index: 9;
  margin: -24px 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px 10px;
  border-radius: 14px;
  background: var(--n-s2);
  border: 1px solid var(--n-filet-fort);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 26px -14px rgba(0, 0, 0, 0.95);
}
html.neo .np-cote { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.neo .np-cote-adv { align-items: flex-end; text-align: right; }
html.neo .np-ident { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
html.neo .np-bandeau { flex: 0 0 auto; display: block; width: 24px; height: 24px; }
html.neo .np-bandeau svg { display: block; width: 24px; height: 24px; }
html.neo .np-nom {
  min-width: 0;
  font: 800 12px/1.1 var(--n-titre);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n-encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.neo .np-titre {
  max-width: 100%;
  font: 600 10.5px/1.2 var(--n-titre);
  color: var(--n-pale);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.neo .np-barre { display: flex; gap: 5px; width: 100%; padding: 0 4px; }
html.neo .np-cote-adv .np-barre { flex-direction: row-reverse; }
html.neo .np-seg {
  position: relative;
  flex: 1;
  height: 12px;
  border-radius: 3px;
  background: var(--n-orange);
  transform: skewX(-20deg);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.neo .np-cote-adv .np-seg { background: var(--n-rouge); transform: skewX(20deg); }
html.neo .np-seg.np-vide { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--n-filet-fort); }
html.neo .np-eclat-seg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  will-change: transform, opacity;
}
html.neo .np-chakra { display: flex; align-items: center; gap: 4px; min-height: 12px; padding-left: 2px; }
html.neo .np-chakra:empty { display: none; }
html.neo .np-ki { font: 800 11px/1 var(--n-titre); color: var(--n-chakra); margin-right: 2px; }
html.neo .np-chakra i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px var(--n-filet-fort);
}
html.neo .np-chakra i.on { background: var(--n-chakra); box-shadow: none; }
html.neo .np-chakra i.np-puise { background: #fff; box-shadow: 0 0 0 2px var(--n-chakra); }
html.neo .np-centre { display: flex; flex-direction: column; align-items: center; gap: 5px; }
html.neo .np-sceau {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--n-rouge);
  color: #fff;
  font: 900 20px/1 var(--n-titre);
  transform: rotate(-4deg);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 6px 12px -6px rgba(0, 0, 0, 0.85);
}
html.neo .np-manche {
  min-height: 10px;
  font: 800 10px/1 var(--n-titre);
  letter-spacing: 0.12em;
  color: var(--n-doux);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html.neo .np-manche:empty { display: none; }

/* ---------------------------------------------------------------------------
   LES TECHNIQUES — une main de cartes à jouer
   --------------------------------------------------------------------------- */
html.neo #card-zone .np-duel .ev-options.np-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px !important;
  padding: 14px 12px 0 !important;
}
html.neo #card-zone .np-duel .btn-choice.np-tech {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-height: 96px;
  padding: 11px 12px 12px 14px !important;
  border-radius: 12px !important;
  border-left: 4px solid var(--np-teinte) !important;
  font: 750 14.5px/1.3 "Inter", system-ui, sans-serif !important;
}
html.neo #card-zone .np-duel .btn-choice.np-corps { --np-teinte: var(--n-or); }
html.neo #card-zone .np-duel .btn-choice.np-esprit { --np-teinte: var(--n-chakra); }
html.neo #card-zone .np-duel .btn-choice.np-tech::after { display: none; }
html.neo #card-zone .np-duel .btn-choice.np-tech > .np-cache-tag { display: none !important; }
html.neo #card-zone .np-duel .btn-choice.np-tech > .np-ap {
  flex-basis: auto !important;
  display: flex;
  align-items: center;
  gap: 4px;
  font: 800 10.5px/1.1 var(--n-titre) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--np-teinte) !important;
}
html.neo #card-zone .np-duel .np-ap .np-plus {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(76, 179, 255, 0.16);
  color: var(--n-chakra);
  letter-spacing: 0;
}
html.neo #card-zone .np-duel .btn-choice.np-tech.np-large { grid-column: 1 / -1; min-height: 74px; }
html.neo #card-zone .np-duel .btn-choice.np-tech:hover { transform: translate3d(0, -2px, 0); }
html.neo #card-zone .np-duel .btn-choice.np-tech:active { transform: translate3d(0, 1px, 0) scale(0.98); }
/* Les coups qui renversent un échange : une rangée à part, en or. */
html.neo #card-zone .np-duel .btn-choice.np-ult {
  grid-column: 1 / -1;
  min-height: 56px;
  border-color: rgba(242, 193, 78, 0.55) !important;
  background: color-mix(in srgb, var(--n-or) 9%, var(--n-s2)) !important;
}
html.neo #card-zone .np-duel .btn-choice.np-ult.betray {
  border-color: rgba(255, 77, 77, 0.55) !important;
  background: color-mix(in srgb, var(--n-rouge) 9%, var(--n-s2)) !important;
}
/* La main se distribue, carte après carte. */
html.neo #card-zone .np-duel .np-main:not(.np-sans-entree) > .btn-choice {
  animation: np-tech 0.42s calc(0.14s + var(--np-i, 0) * 0.05s) cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
html.neo #card-zone .np-duel .np-main.np-sans-entree > .btn-choice { animation: none; }
/* La technique en vol : une copie, sans entrée ni ombre portée lourde. */
html.neo #card-zone .np-calque .np-fantome {
  position: absolute !important;
  margin: 0 !important;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  box-shadow: 0 0 0 2px var(--n-orange), 0 14px 26px -12px rgba(0, 0, 0, 0.9) !important;
}

/* ---------------------------------------------------------------------------
   LES SCÈNES DE GROUPE — le front, l'examen
   --------------------------------------------------------------------------- */
/* Le nom de l'étape, posé sur le décor en haut à gauche. */
html.neo .np-plaque {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 6;
  max-width: 62%;
  pointer-events: none;
}
html.neo .np-plaque span {
  display: block;
  padding: 6px 10px 7px;
  border-left: 4px solid var(--n-orange);
  border-radius: 3px;
  background: rgba(10, 11, 15, 0.9);
  color: #fff;
  font: italic 900 13px/1.15 var(--n-titre);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.95);
}
/* Les rangs : silhouettes pleines, plus pâles et plus petites au fond. */
html.neo .np-armee,
html.neo .np-allies,
html.neo .np-candidats {
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  /* Un calque à part : les rangs bougent d'un bloc, sans se redessiner. */
  will-change: transform, opacity;
}
html.neo .np-armee { left: 0; height: 100%; z-index: 1; transform-origin: 75% 70%; }
html.neo .np-allies { left: 0; height: 100%; z-index: 2; transform-origin: 60% 100%; }
html.neo .np-candidats { left: 0; height: 80%; bottom: 6%; z-index: 1; }
/* Les rangs de Storm : l'ennemi en contre-jour, les tiens dans l'ombre. */
html.neo .np-armee { filter: brightness(0.5) saturate(0.65) drop-shadow(-1px -1px 0 rgba(196, 204, 222, 0.35)); }
html.neo .np-allies { filter: brightness(0.32) saturate(0.6) drop-shadow(1px -1px 0 rgba(255, 214, 170, 0.45)); }
html.neo .np-candidats { filter: brightness(0.62) saturate(0.8); }
html.neo .np-rang-0 { opacity: 0.62; }
html.neo .np-rang-1 { opacity: 0.85; }
html.neo .np-hampe { fill: #17120e; }
html.neo .np-toile { stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.2; }
html.neo .np-un { transition: opacity 0.35s ease; }
html.neo .np-un.np-parti { opacity: 0; }
/* Le chef nommé : devant ses troupes, plus petit qu'un adversaire de duel. */
html.neo .np-adv.np-adv-chef { width: 44%; height: 100%; right: 3%; }
/* Le surveillant : debout à droite, il regarde l'arène. */
html.neo .np-adv.np-adv-prof { width: 44%; height: 100%; right: 0; }
html.neo .np-adv.np-adv-prof.np-sans-art { height: 96%; width: 38%; right: 3%; }
/* L'issue d'un front : celui qui perd recule, et y reste. */
html.neo .np-front .np-armee,
html.neo .np-front .np-allies,
html.neo .np-front .np-adv-chef {
  transition: transform 0.8s 0.3s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.8s 0.3s ease;
}
html.neo .np-front.np-gagne .np-armee { transform: translate3d(9%, 2%, 0) scale(0.94); opacity: 0.55; }
html.neo .np-front.np-gagne .np-adv-chef { transform: translate3d(8%, 3%, 0); opacity: 0.8; }
html.neo .np-front.np-gagne .np-allies { transform: translate3d(5%, 0, 0); }
html.neo .np-front.np-perdu .np-armee { transform: translate3d(-7%, 1%, 0) scale(1.05); }
html.neo .np-front.np-perdu .np-allies { transform: translate3d(-7%, 4%, 0); opacity: 0.6; }
html.neo .np-front.np-perdu .np-moi {
  transform: translate3d(-5%, 8%, 0) rotate(-2.5deg);
  transition: transform 0.8s 0.3s cubic-bezier(0.3, 0.7, 0.2, 1);
}
html.neo .np-front.np-gagne .np-moi { --np-rim: var(--n-or); }
/* L'examen tranché. */
html.neo .np-exam.np-reussi-e .np-moi { --np-rim: var(--n-or); }
html.neo .np-exam.np-rate-e .np-moi {
  transform: translate3d(-6px, 14%, 0) rotate(-3deg);
  transition: transform 0.9s 0.2s cubic-bezier(0.3, 0.7, 0.2, 1);
}
html.neo .np-exam.np-rate-e .np-voile { opacity: 0.18; transition: opacity 0.8s 0.2s ease; }

/* La piste : un segment par étape. */
html.neo .np-piste:empty { display: none; }
html.neo .np-seg.np-cours { background: rgba(255, 138, 31, 0.12); box-shadow: inset 0 0 0 2px var(--n-orange); }
html.neo .np-seg.np-rate { background: rgba(255, 77, 77, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.6); }
html.neo .np-seg.np-rate::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--n-rouge);
}
/* Le trait de seuil : ce qu'il faut réussir pour passer. */
html.neo .np-seg.np-seuil::before {
  content: "";
  position: absolute;
  right: -4.5px;
  top: -4px;
  bottom: -4px;
  width: 2px;
  border-radius: 1px;
  background: var(--n-encre);
}
html.neo .np-sous {
  font: 600 10.5px/1.25 var(--n-titre);
  color: var(--n-pale);
  padding-left: 4px;
}
html.neo .np-sous:empty { display: none; }
html.neo .np-drapeau {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
html.neo .np-front .np-cote-adv .np-ident { flex-direction: row-reverse; }
/* Les ordres d'un front : la teinte de l'action. */
html.neo #card-zone .np-duel .btn-choice.np-tech.np-ordre { --np-teinte: var(--n-orange); min-height: 74px; }
html.neo #card-zone .np-guerre .front-news { margin: 14px 18px 0 !important; }
html.neo #card-zone .np-guerre .front-news ul { padding-left: 18px; }

/* ---------------------------------------------------------------------------
   LE VOILE DE MORT — le 死 de game.js, meublé : soleil rouge, ombre debout,
   toi à genoux. Aplats seuls, aucun flou, aucun halo.
   --------------------------------------------------------------------------- */
.death-ov.np-voile-mort { align-items: flex-start; background: #0a0505; }
.np-voile-mort .death-kanji {
  position: relative;
  z-index: 3;
  margin-top: 8vh;
  font-size: min(30vmin, 230px);
  text-shadow: none;
  animation-delay: 0.42s;
  animation-fill-mode: both;
}
.np-mort { position: absolute; inset: 0; overflow: hidden; }
.np-mort-soleil {
  position: absolute;
  left: 50%;
  bottom: 27%;
  width: min(80vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #8e1b14;
  transform: translate3d(-50%, 0, 0);
}
.np-mort-sol {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: #050303;
  box-shadow: 0 -2px 0 #2a0d0a;
}
.np-mort-qui {
  position: absolute;
  right: 4%;
  bottom: 17%;
  width: 48%;
  height: 60%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.np-mort-adv { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right bottom; filter: brightness(0); }
.np-mort-qui .np-face-adv { height: 100%; width: auto; filter: brightness(0); }
.np-mort-moi {
  position: absolute;
  left: 2%;
  bottom: 17%;
  width: 42%;
  height: 34%;
  transform-origin: 30% 100%;
  transform: translate3d(-4%, 22%, 0) rotate(-9deg);
}
.np-mort-moi { overflow: hidden; }
html.neo .np-mort-moi .np-dos-storm { bottom: -60%; height: 160%; filter: brightness(0) drop-shadow(2px -1px 0 #b02a1f); }
.np-mort-nom {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9.5%;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.np-mort-nom small { font: 700 11px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #b9a7a3; }
.np-mort-nom b { font: italic 900 24px/1.05 "Inter", system-ui, sans-serif; text-transform: uppercase; color: #fff; }
.np-mort-bande { position: absolute; left: 0; right: 0; height: 8%; background: #000; z-index: 1; }
.np-mort-bande.np-haut { top: 0; transform-origin: 50% 0; }
.np-mort-bande.np-bas { bottom: 0; transform-origin: 50% 100%; }

/* ---------------------------------------------------------------------------
   MOUVEMENT
   --------------------------------------------------------------------------- */
@keyframes np-donne {
  from { transform: translate3d(34px, 14px, 0) rotate(1.6deg) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes np-revele {
  from { transform: perspective(1600px) rotateY(-88deg) scale(0.96); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}
@keyframes np-corps {
  from { transform: translate3d(0, 10px, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes np-tech {
  from { transform: translate3d(0, 26px, 0) rotate(-2.5deg) scale(0.95); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes np-chiffre {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes np-piste-pos {
  0%, 100% { background-color: rgba(255, 255, 255, 0.08); }
  25% { background-color: rgba(67, 209, 122, 0.55); }
}
@keyframes np-piste-neg {
  0%, 100% { background-color: rgba(255, 255, 255, 0.08); }
  25% { background-color: rgba(255, 77, 77, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  html.neo #card-zone .game-card.np-donne,
  html.neo #card-zone .game-card.np-revele,
  html.neo #card-zone .np-duel.np-corps-entre > *,
  html.neo #card-zone .np-duel.np-apres > *,
  html.neo #card-zone .np-duel .np-main > .btn-choice,
  html.neo #game-header .stat .stat-v,
  html.neo #game-header .stat .bar { animation: none !important; }
  html.neo .np-arene *, html.neo .np-arene { transition: none !important; }
  html.neo .np-annonce.np-vue span { opacity: 1; }
  html.neo #card-zone .ev-options .btn-choice.np-cible { transform: none; }
}

/* Écran large : l'arène prend de la hauteur, la main reste à deux colonnes. */
@media (min-width: 1060px) {
  html.neo .np-plateau { height: 360px; }
  html.neo .np-moi { width: 40%; height: 74%; }
  html.neo .np-adv { width: 52%; right: 2%; }
  html.neo .np-annonce span { font-size: 38px; }
  html.neo .np-annonce.np-long span { font-size: 26px; }
  html.neo .np-hud { margin: -26px 16px 0; padding: 11px 14px 12px; }
  html.neo .np-nom { font-size: 13px; }
  html.neo .np-seg { height: 14px; }
  html.neo #card-zone .np-duel .ev-options.np-main { gap: 10px !important; padding: 16px 16px 0 !important; }
}
html.neo #card-zone .np-duel .np-ap .opt-chance { margin: 0 2px 0 0; padding: 2px 5px; font: 800 11px/1.1 "Inter", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }