/* ============================================================================
   HABILLAGE « NEO » — Road to Legends, mode ninja
   Actif sous html.neo, l'habillage par défaut depuis le 26/10 (?ui=classique
   rend l'ancien). Posé APRÈS style.css.

   Trois idées, pas une de plus :
   1. LA SCÈNE. Chaque carte s'ouvre sur un lieu (panorama de décor de Storm) et,
      quand la carte nomme quelqu'un du canon, sur ce personnage, détouré, qui
      sort du cadre par le haut. Le texte se lit dessous, sur un aplat.
   2. LE RELIEF. Trois niveaux de surface et une ombre portée nette : la carte
      au-dessus du fond, les choix au-dessus de la carte. Pas de verre dépoli,
      pas de halo, pas de dégradé décoratif — le seul dégradé fond le décor
      dans l'aplat du texte, pour la lecture.
   3. LE MOUVEMENT. Une entrée par carte (le décor glisse, le personnage
      arrive), une réponse au doigt sur les choix, les gains qui tombent un par
      un. Rien qui tourne en boucle sur une image (Chrome la redessine alors en
      basse qualité). prefers-reduced-motion coupe tout.
   ============================================================================ */

html.neo {
  --n-fond: #0a0b0f;
  --n-s1: #13151c;          /* carte */
  --n-s2: #1b1e28;          /* choix, tuiles */
  --n-s3: #252a37;          /* survol */
  --n-filet: rgba(255, 255, 255, 0.08);
  --n-filet-fort: rgba(255, 255, 255, 0.16);
  --n-encre: #f3f1ec;
  --n-doux: #b5b8c4;
  --n-pale: #8a8fa0;
  --n-orange: #ff8a1f;      /* l'action */
  --n-orange-fonce: #e06a00;
  --n-chakra: #4cb3ff;      /* les aptitudes */
  --n-vert: #43d17a;
  --n-rouge: #ff4d4d;
  --n-or: #f2c14e;
  --n-ombre: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 30px -12px rgba(0, 0, 0, 0.75);
  --n-ombre-choix: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.8);
  --n-r: 18px;
  --n-titre: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
html.neo body.sport-naruto {
  background: var(--n-fond) !important;
  color: var(--n-encre);
}
/* Le fond de feuilles qui tombent et le grain restent au mode classique. */
html.neo body.sport-naruto::before,
html.neo body.sport-naruto::after { opacity: 0.35; }

/* ---------------------------------------------------------------------------
   EN-TÊTE DE PARTIE — les aptitudes se voient tout le temps
   --------------------------------------------------------------------------- */
html.neo #game-header {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: var(--n-r) !important;
  box-shadow: var(--n-ombre) !important;
  color: var(--n-encre) !important;
  padding: 10px 12px 10px !important;
}
html.neo #game-header .hd-id strong {
  font-family: var(--n-titre) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em;
  color: var(--n-encre) !important;
}
html.neo #game-header .hd-id strong {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
html.neo #game-header .hd-id strong .hd-rank,
html.neo #game-header .hd-id strong .hd-note { margin: 0 !important; }
html.neo #game-header .hd-id > span { color: var(--n-doux) !important; font-size: 12.5px !important; }
html.neo #game-header .hd-rank {
  border-radius: 6px !important;
  font-family: var(--n-titre) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  font-size: 10.5px !important;
}
html.neo #game-header .hd-note {
  border-radius: 6px !important;
  font-family: var(--n-titre) !important;
  font-weight: 900 !important;
}
html.neo #game-header .hd-exit {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet) !important;
  color: var(--n-encre) !important;
  border-radius: 12px !important;
}
/* Replié, le bandeau garde ses barres : c'est ta progression, elle se suit
   carte après carte au lieu de se chercher derrière une flèche. */
html.neo #game-header .hd-fold:not(.open) {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html.neo #game-header .hd-fold:not(.open) > :not(.hd-bars) { display: none !important; }
html.neo #game-header .hd-bars {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 10px !important;
  margin-top: 8px !important;
}
html.neo #game-header .hd-bars .stat { margin: 0 !important; min-width: 0; }
html.neo #game-header .hd-bars .stat > span {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--n-titre) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n-pale) !important;
  white-space: nowrap;
  overflow: hidden;
}
html.neo #game-header .hd-bars .stat-v {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--n-encre) !important;
  font-variant-numeric: tabular-nums;
}
html.neo #game-header .hd-bars .bar {
  height: 4px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin-top: 3px !important;
  overflow: hidden;
}
html.neo #game-header .hd-bars .bar i {
  background: var(--n-chakra) !important;
  border-radius: 4px !important;
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.neo #game-header .hd-bars .stat-sur .bar i { background: var(--n-or) !important; }

/* ---------------------------------------------------------------------------
   LA CARTE ET SA SCÈNE
   --------------------------------------------------------------------------- */
html.neo #card-zone .game-card {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: var(--n-r) !important;
  box-shadow: var(--n-ombre) !important;
  color: var(--n-encre) !important;
}
html.neo #card-zone .game-card.neo-a-scene {
  padding: 0 0 16px !important;
  overflow: visible !important;
  margin-top: 46px;
}
html.neo #card-zone .game-card.neo-a-scene::before,
html.neo #card-zone .game-card.neo-a-scene::after { display: none !important; }

/* Sous la scène, tout ce que la carte porte d'autre garde la marge du texte. */
html.neo #card-zone .game-card.neo-a-scene > :not(.neo-scene):not(.ev-text):not(.ev-options):not(.fx-chips):not(.btn):not(.joker-zone):not(.ev-death):not(.boss-head) {
  margin-left: 14px !important;
  margin-right: 14px !important;
}
html.neo #card-zone .souffle-row {
  border-radius: 12px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
}
html.neo .neo-scene {
  position: relative;
  height: clamp(190px, 33vh, 300px);
  border-radius: var(--n-r) var(--n-r) 0 0;
  isolation: isolate;
}
html.neo .neo-scene.neo-issue { height: clamp(120px, 20vh, 180px); }
html.neo .neo-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--n-r) var(--n-r) 0 0;
  z-index: 0;
  animation: neo-decor 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Le seul dégradé de la feuille : le décor se fond dans l'aplat du texte. */
html.neo .neo-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0) 35%, rgba(19, 21, 28, 0.72) 72%, var(--n-s1) 100%);
  z-index: 1;
  pointer-events: none;
}
html.neo .neo-perso {
  position: absolute;
  right: -2%;
  bottom: 0;
  height: 118%;
  width: auto;
  max-width: 58%;
  object-fit: contain;
  object-position: right bottom;
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
  animation: neo-perso 0.55s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: none;
}
html.neo .neo-issue .neo-perso { height: 135%; opacity: 0.9; animation: none; }
html.neo .neo-qui {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  font: 800 10.5px/1 var(--n-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-encre);
  background: rgba(10, 11, 15, 0.78);
  border: 1px solid var(--n-filet-fort);
  padding: 6px 8px;
  border-radius: 6px;
}
html.neo .neo-issue .neo-qui { display: none; }
html.neo .neo-plaque {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 40%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
html.neo .neo-avec-perso .neo-plaque { right: 46%; }
html.neo .neo-scene:not(.neo-avec-perso) .neo-plaque { right: 14px; }
html.neo .neo-plaque .season-tag,
html.neo .neo-plaque .ms-banner {
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(10, 11, 15, 0.78) !important;
  color: var(--n-doux) !important;
  font: 700 10.5px/1.2 var(--n-titre) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  text-align: left !important;
  width: auto !important;
}
html.neo .neo-plaque .season-tag::before,
html.neo .neo-plaque .season-tag::after { display: none !important; }
html.neo .neo-plaque .ev-banner,
html.neo .neo-plaque .arc-banner {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  flex-wrap: wrap;
  text-align: left !important;
  box-shadow: none !important;
}
html.neo .neo-plaque .ev-emoji {
  font-size: 17px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  margin: 0 !important;
}
html.neo .neo-plaque .ev-cat { display: inline !important; position: static !important; margin: 0 !important; padding: 0 !important; background: none !important; }
html.neo .neo-plaque .ev-banner::before,
html.neo .neo-plaque .ev-banner::after,
html.neo .neo-plaque .arc-banner::before,
html.neo .neo-plaque .arc-banner::after { display: none !important; }
html.neo .neo-plaque .sceau,
html.neo .neo-plaque .arc-ic {
  display: inline-grid !important;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px !important;
  background: var(--n-rouge) !important;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.8);
  border: 0 !important;
  transform: none !important;
}
html.neo .neo-plaque .ev-cat,
html.neo .neo-plaque .arc-name {
  font: 900 19px/1.05 var(--n-titre) !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
html.neo .neo-plaque .arc-step {
  font: 700 10.5px/1 var(--n-titre) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-or) !important;
  flex-basis: 100%;
}
html.neo .neo-plaque .ev-count { color: var(--n-or) !important; }
/* Les moments-clés : leur bandeau devient le titre de la scène. */
html.neo .neo-plaque .km-banner {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: 900 19px/1.1 var(--n-titre) !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase;
  text-align: left !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
html.neo .neo-plaque .km-banner::before,
html.neo .neo-plaque .km-banner::after { display: none !important; }
html.neo .neo-plaque .km-banner.bad { color: #ffb3b3 !important; }
html.neo .neo-plaque .km-banner.gold { color: var(--n-or) !important; }
/* L'affrontement : l'adversaire est dans la scène, le bandeau garde le décompte. */
html.neo .neo-a-scene .boss-portrait { display: none !important; }
html.neo #card-zone .boss-head {
  margin: 10px 14px 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  color: var(--n-encre) !important;
}
html.neo #card-zone .boss-head .boss-seal {
  border-radius: 8px !important;
  background: var(--n-rouge) !important;
  color: #fff !important;
}
html.neo #card-zone .boss-head .boss-id strong { font-family: var(--n-titre) !important; font-weight: 900 !important; color: #fff !important; }
html.neo #card-zone .boss-head .boss-id small { color: var(--n-doux) !important; }

/* Le texte de la carte : à gauche, gros, sur l'aplat. */
html.neo #card-zone .game-card .ev-text {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--n-encre) !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 6px 18px 4px !important;
}
html.neo #card-zone .game-card:not(.neo-a-scene) .ev-text { padding: 4px 4px !important; }
html.neo #card-zone .ev-death {
  margin: 10px 18px 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 77, 77, 0.12) !important;
  border: 1px solid rgba(255, 77, 77, 0.35) !important;
  color: #ffd2d2 !important;
  text-align: left !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   LES CHOIX — des boutons qu'on a envie d'appuyer
   --------------------------------------------------------------------------- */
html.neo #card-zone .ev-options {
  display: grid !important;
  gap: 10px !important;
  padding: 12px 14px 0 !important;
  margin: 0 !important;
}
html.neo #card-zone .btn-choice {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: 58px;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 40px 13px 16px !important;
  text-align: left !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 14px !important;
  box-shadow: var(--n-ombre-choix) !important;
  color: var(--n-encre) !important;
  font: 700 15.5px/1.35 "Inter", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  animation: neo-choix 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo #card-zone .btn-choice:nth-child(2) { animation-delay: 0.06s; }
html.neo #card-zone .btn-choice:nth-child(3) { animation-delay: 0.12s; }
html.neo #card-zone .btn-choice:nth-child(4) { animation-delay: 0.18s; }
/* Le chevron dit « ça s'appuie ». */
html.neo #card-zone .btn-choice::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--n-orange);
  border-top: 2px solid var(--n-orange);
  transform: translateY(-50%) rotate(45deg);
}
html.neo #card-zone .btn-choice:hover { background: var(--n-s3) !important; border-color: rgba(255, 138, 31, 0.55) !important; }
html.neo #card-zone .btn-choice:active { transform: scale(0.98); }
html.neo #card-zone .btn-choice:focus-visible { outline: 3px solid var(--n-orange) !important; outline-offset: 2px; }
html.neo #card-zone .btn-choice .opt-tag {
  order: -1;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--tc, var(--n-chakra)) 60%, transparent) !important;
  background: color-mix(in srgb, var(--tc, var(--n-chakra)) 18%, var(--n-s2)) !important;
  color: #fff !important;
  font: 800 10.5px/1 var(--n-titre) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
html.neo #card-zone .btn-choice .opt-tag i {
  position: absolute !important;
  left: 0; bottom: 0;
  height: 2px !important;
  width: var(--p, 0%) !important;
  background: var(--tc, var(--n-chakra)) !important;
  margin: 0 !important;
}
/* La lecture de l'option (« à ta portée ») passe sous le libellé. */
html.neo #card-zone .btn-choice > small,
html.neo #card-zone .btn-choice > .opt-lect,
html.neo #card-zone .btn-choice > span:not(.opt-tag) {
  flex-basis: 100%;
  font: 600 12.5px/1.3 "Inter", system-ui, sans-serif !important;
  color: var(--n-pale) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Le joker : discret, en bas. */
html.neo #card-zone .joker-zone {
  margin: 14px 14px 0 !important;
  padding-top: 12px !important;
  border-top: 1px dashed var(--n-filet-fort) !important;
}
html.neo #card-zone .joker-btn {
  width: 100%;
  background: transparent !important;
  border: 1px solid var(--n-filet-fort) !important;
  color: var(--n-doux) !important;
  border-radius: 12px !important;
  font: 700 12.5px/1.3 "Inter", system-ui, sans-serif !important;
}

/* ---------------------------------------------------------------------------
   L'ISSUE — ce que ton choix a donné
   --------------------------------------------------------------------------- */
html.neo #card-zone .game-card.good .neo-scene::before,
html.neo #card-zone .game-card.bad .neo-scene::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  border-radius: var(--n-r) var(--n-r) 0 0;
  z-index: 4;
}
html.neo #card-zone .game-card.good .neo-scene::before { background: var(--n-vert); }
html.neo #card-zone .game-card.bad .neo-scene::before { background: var(--n-rouge); }
html.neo #card-zone .fx-chips {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 12px 18px 0 !important;
  margin: 0 !important;
}
html.neo #card-zone .fx-chip {
  padding: 7px 11px !important;
  border-radius: 999px !important;
  font: 800 13px/1 var(--n-titre) !important;
  letter-spacing: 0 !important;
  border: 1px solid transparent !important;
  animation: neo-gain 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
html.neo #card-zone .fx-chip:nth-child(2) { animation-delay: 0.08s; }
html.neo #card-zone .fx-chip:nth-child(3) { animation-delay: 0.16s; }
html.neo #card-zone .fx-chip:nth-child(4) { animation-delay: 0.24s; }
html.neo #card-zone .fx-chip:nth-child(5) { animation-delay: 0.32s; }
html.neo #card-zone .fx-chip.pos {
  background: rgba(67, 209, 122, 0.14) !important;
  border-color: rgba(67, 209, 122, 0.45) !important;
  color: #9ff0bf !important;
}
html.neo #card-zone .fx-chip.neg {
  background: rgba(255, 77, 77, 0.13) !important;
  border-color: rgba(255, 77, 77, 0.45) !important;
  color: #ffb3b3 !important;
}
html.neo #card-zone .fx-chip.trait-chip {
  background: rgba(242, 193, 78, 0.14) !important;
  border-color: rgba(242, 193, 78, 0.5) !important;
  color: #ffe3a0 !important;
}

/* Les boutons d'action de la partie. */
html.neo #card-zone .btn-primary,
html.neo #card-zone .btn-gold,
html.neo #card-zone .btn-red {
  display: block;
  width: calc(100% - 28px) !important;
  margin: 16px 14px 0 !important;
  min-height: 54px;
  border-radius: 14px !important;
  border: 0 !important;
  font: 900 15px/1 var(--n-titre) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  transition: transform 0.12s ease, filter 0.15s ease;
}
html.neo #card-zone .game-card:not(.neo-a-scene) .btn-primary,
html.neo #card-zone .game-card:not(.neo-a-scene) .btn-gold { width: 100% !important; margin: 16px 0 0 !important; }
html.neo #card-zone .btn-primary,
html.neo #card-zone .btn-gold {
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.22) inset, 0 10px 22px -12px rgba(255, 138, 31, 0.9) !important;
}
html.neo #card-zone .btn-red {
  background: var(--n-rouge) !important;
  color: #1a0000 !important;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.22) inset !important;
}
html.neo #card-zone .btn-primary:active,
html.neo #card-zone .btn-gold:active,
html.neo #card-zone .btn-red:active { transform: translateY(1px) scale(0.99); }

/* ---------------------------------------------------------------------------
   LES BILANS — des sections, des visages
   --------------------------------------------------------------------------- */
html.neo #card-zone .rep-grp,
html.neo #card-zone .end-block {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin: 12px 0 0 !important;
  box-shadow: none !important;
}
html.neo #card-zone .rep-h,
html.neo #card-zone .end-block h3 {
  font: 800 11px/1 var(--n-titre) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--n-orange) !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}
html.neo #card-zone ul.report > li {
  border-color: var(--n-filet) !important;
  color: var(--n-encre) !important;
}
html.neo .neo-ligne-pnj {
  display: grid !important;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px;
  padding-left: 0 !important;
}
html.neo .neo-ligne-txt { min-width: 0; line-height: 1.4; }
html.neo .neo-ligne-pnj::before { display: none !important; }
html.neo .neo-visage {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: var(--n-s3);
  border: 2px solid var(--n-filet-fort);
  font: 900 16px/1 var(--n-titre);
  color: var(--n-doux);
}
html.neo .neo-visage img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
html.neo .neo-visage.neo-sensei { border-color: var(--n-or); }
html.neo .neo-visage.neo-rival { border-color: var(--n-orange); }
html.neo .neo-visage.neo-nemesis { border-color: var(--n-rouge); }
html.neo .neo-visage.neo-escouade { border-color: var(--n-chakra); }

/* ---------------------------------------------------------------------------
   ACCUEIL — une affiche, pas un formulaire
   --------------------------------------------------------------------------- */
/* L'affiche monte jusqu'au bord haut, comme les bandeaux des autres écrans. */
html.neo #screen-home:has(.neo-affiche) { padding-top: 0 !important; }
html.neo #screen-home .home-hero.neo-hero {
  position: relative;
  padding: 0 !important;
  margin: 0 0 8px !important;
  text-align: center;
}
html.neo .neo-affiche {
  position: relative;
  height: calc(clamp(300px, 46vh, 440px) + env(safe-area-inset-top, 0px));
  /* Bord à bord sur téléphone, quel que soit le retrait de l'écran d'accueil. */
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
}
html.neo .neo-affiche-decor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  animation: neo-decor 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
html.neo .neo-affiche::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0.15) 0%, rgba(10, 11, 15, 0) 30%, rgba(10, 11, 15, 0.55) 70%, var(--n-fond) 100%);
  z-index: 2;
}
html.neo .neo-affiche-perso {
  position: absolute;
  bottom: -6%;
  height: 92%;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6));
  animation: neo-perso 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .neo-affiche-perso.p0 { left: -4%; height: 80%; animation-delay: 0.25s; }
html.neo .neo-affiche-perso.p1 { left: 50%; transform: translateX(-50%); height: 96%; z-index: 1; animation-name: neo-perso-centre; animation-delay: 0.1s; }
html.neo .neo-affiche-perso.p2 { right: -6%; height: 82%; animation-delay: 0.4s; }
html.neo #screen-home .neo-hero .wordmark {
  position: relative;
  z-index: 3;
  margin: -118px auto 0 !important;
  max-width: 340px;
}
html.neo #screen-home .neo-hero .wm-logo { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.9)); }
html.neo #screen-home .neo-hero .wordmark::after { display: none !important; }
html.neo #screen-home .neo-hero .tagline {
  position: relative; z-index: 3;
  color: var(--n-doux) !important;
  font-size: 15px !important;
  margin: 6px 8px 0 !important;
}
html.neo #screen-home .neo-hero .tagline em { color: var(--n-orange) !important; }
/* Une voie en cours : « Reprendre » est l'action, « Nouvelle voie » passe en second. */
html.neo #screen-home .home-actions #btn-new.btn-calme {
  min-height: 52px;
  border-radius: 16px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  color: var(--n-encre) !important;
  font: 800 15px/1 var(--n-titre) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  box-shadow: var(--n-ombre-choix) !important;
}
/* « Reprendre » porte un nom et un âge : il reste en casse normale pour se lire. */
html.neo body #screen-home .home-actions #btn-resume {
  text-transform: none !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  padding: 12px 16px !important;
}
html.neo #screen-home .home-actions #btn-resume,
html.neo #screen-home .home-actions #btn-new:not(.btn-calme) {
  min-height: 60px;
  border-radius: 16px !important;
  border: 0 !important;
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  font: 900 17px/1 var(--n-titre) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.22) inset, 0 16px 30px -14px rgba(255, 138, 31, 0.95) !important;
}
html.neo #screen-home .home-card {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: var(--n-r) !important;
  box-shadow: var(--n-ombre) !important;
  color: var(--n-encre) !important;
}
html.neo #screen-home .home-card::before,
html.neo #screen-home .home-card::after { display: none !important; }
html.neo #screen-home .intro-h { font-family: var(--n-titre) !important; font-weight: 900 !important; letter-spacing: -0.02em; }
html.neo #screen-home .intro-p,
html.neo #screen-home .about-p { color: var(--n-doux) !important; }

/* La rangée des menus : des tuiles carrées, quatre par ligne. */
html.neo #screen-home .meta-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px !important;
}
html.neo #screen-home .meta-row .meta-btn {
  min-height: 76px;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 14px !important;
  box-shadow: var(--n-ombre-choix) !important;
  color: var(--n-encre) !important;
  transition: transform 0.12s ease, background-color 0.15s ease;
}
html.neo #screen-home .meta-row .meta-btn:active { transform: scale(0.96); }
html.neo #screen-home .meta-row .meta-btn:hover { background: var(--n-s3) !important; }
html.neo #screen-home .meta-row .meta-btn svg { width: 24px; height: 24px; color: var(--n-orange); }
html.neo #screen-home .meta-row .mb-l {
  font: 700 11px/1.15 var(--n-titre) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--n-doux) !important;
}
html.neo #screen-home .meta-row #btn-quizz { grid-column: span 2 !important; }

/* Défi du jour et Enfer : des cartes illustrées. */
html.neo #screen-home .neo-carte {
  position: relative;
  overflow: hidden;
  padding-top: 150px !important;
  isolation: isolate;
}
html.neo .neo-carte-decor {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 170px;
  width: 100%;
  object-fit: cover;
  z-index: -2;
}
html.neo .neo-carte::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0; right: 0; top: 0;
  height: 172px;
  background: linear-gradient(180deg, rgba(19, 21, 28, 0) 30%, var(--n-s1) 100%) !important;
  z-index: -1;
  border: 0 !important;
  opacity: 1 !important;
}
html.neo .neo-carte-perso {
  position: absolute;
  right: -10px;
  top: 6px;
  height: 200px;
  width: auto;
  z-index: -1;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
}
html.neo .neo-carte .card-ribbon {
  position: absolute !important;
  top: 14px; left: 14px; right: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: rgba(10, 11, 15, 0.8) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 8px !important;
  font: 900 12px/1 var(--n-titre) !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
}
html.neo .neo-carte .card-ribbon::before,
html.neo .neo-carte .card-ribbon::after { display: none !important; }
html.neo .neo-carte .chips { justify-content: flex-start !important; }
html.neo .neo-carte .chip {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  color: var(--n-encre) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
html.neo .neo-carte .daily-status { color: var(--n-doux) !important; text-align: left !important; }
html.neo .neo-carte .reset-chrono { color: var(--n-pale) !important; text-align: left !important; }
html.neo #screen-home .btn-daily {
  min-height: 52px;
  border-radius: 14px !important;
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  border: 0 !important;
  font: 900 15px/1 var(--n-titre) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}
html.neo .neo-carte-enfer .btn-daily { background: var(--n-rouge) !important; color: #1a0000 !important; }
html.neo #screen-home .btn-dark {
  min-height: 48px;
  border-radius: 14px !important;
  background: var(--n-s2) !important;
  color: var(--n-encre) !important;
  border: 1px solid var(--n-filet-fort) !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------------------
   CRÉATION — clans et villages illustrés
   --------------------------------------------------------------------------- */
html.neo #screen-create .choice-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 16px !important;
  box-shadow: var(--n-ombre-choix) !important;
  color: var(--n-encre) !important;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
html.neo #screen-create .choice-card:active { transform: scale(0.985); }
html.neo #screen-create .choice-card:hover { border-color: rgba(255, 138, 31, 0.6) !important; }
html.neo #screen-create .choice-card.neo-cc-clan { min-height: 104px; padding-right: 34% !important; }
/* Le visage du clan dit déjà qui il est : l'émoji de tête s'efface. */
html.neo #screen-create .choice-card.neo-cc-clan .cc-icon { display: none !important; }
html.neo .neo-cc-perso {
  position: absolute;
  right: -4%;
  top: 4px;
  height: 240%;
  width: auto;
  max-width: 42%;
  object-fit: cover;
  object-position: top center;
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  opacity: 0.95;
  pointer-events: none;
}
html.neo #screen-create .choice-card.neo-cc-village { padding-top: 92px !important; }
html.neo .neo-cc-decor {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 110px;
  object-fit: cover;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}
html.neo #screen-create .choice-card strong,
html.neo #screen-create .choice-card h3 {
  font-family: var(--n-titre) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  color: #fff !important;
}
html.neo #screen-create .choice-card p,
html.neo #screen-create .choice-card small { color: var(--n-doux) !important; }

/* ===========================================================================
   HORS DE LA PARTIE — fin, profil, échoppe, classement, exploits, Bingo Book…
   Ces écrans sont faits des mêmes pièces que le reste du jeu (`.end-block`,
   `.pal-table`, `.lad-tab`, `.btn-*`). Deux étages :
   1. LES JETONS. Le mode ninja dessine tout avec ses variables : l'habillage
      les reprend, et chaque pièce qu'on ne restyle pas passe quand même dans
      la même gamme (charbon froid, orange d'action, Inter).
   2. LA STRUCTURE des pièces qui font l'écran : bandeau illustré, blocs
      arrondis, tuiles, onglets, chiffres en grand.
   =========================================================================== */
html.neo.nj-nuit body.sport-naruto {
  --fond: #0a0b0f;
  --paper: #13151c;
  --paper-haut: #1b1e28;
  --panel-solid: #13151c;
  --arete: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ink: #f3f1ec;
  --ink-soft: #b5b8c4;
  --ivory: #f3f1ec;
  --gold: #ff8a1f;
  --gold-deep: #e06a00;
  --gold-ink: #1a0b00;
  --gold-pale: #ffb066;
  --green: #1b1e28;
  --green-deep: #252a37;
  --line: rgba(255, 255, 255, 0.08);
  --edge: rgba(255, 255, 255, 0.16);
  --text-mute: #8a8fa0;
  --red: #ff6b6b;
  --shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.75);
  --surface-hover: #252a37;
  --field-bg: #1b1e28;
  --field-bg-strong: #252a37;
  --chrome-bg: #0f1116;
  --chrome-panel: #0f1116;
  --hd-fond: #13151c;
  --hd-encre: #f3f1ec;
  --hd-doux: #b5b8c4;
  --hd-voile: rgba(255, 255, 255, 0.06);
  --hd-filet: rgba(255, 255, 255, 0.16);
  --panel-hi: #1b1e28;
  --panel-lo: #13151c;
  --score-hi: #1b1e28;
  --score-lo: #13151c;
  --quote-bg: rgba(255, 255, 255, 0.05);
  --veil-hi: rgba(19, 21, 28, 0.985);
  --veil-lo: rgba(10, 11, 15, 0.995);
  --pos: #ffb066;
  --pos-line: #ff8a1f;
  --pos-bg: rgba(255, 138, 31, 0.14);
  --pos-edge: rgba(255, 138, 31, 0.4);
  --serif: "Inter", system-ui, sans-serif;
  --cut: 0px;
}
/* L'habillage est sombre par construction : le bouton jour/nuit n'a rien à basculer. */
html.neo #nj-night-btn { display: none !important; }

/* Le rond « retour » et les boutons du coin : du charbon, pas de l'ivoire. */
html.neo #btn-back-fab,
html.neo body.sport-naruto #lang-toggle,
html.neo body.sport-naruto .nj-snd-btn {
  background: rgba(19, 21, 28, 0.86) !important;
  border: 1px solid var(--n-filet-fort) !important;
  color: var(--n-encre) !important;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8) !important;
}

/* ---------- le bandeau illustré en tête de chaque écran ---------- */
/* Le bandeau monte jusqu'au bord haut : c'est lui qui porte la marge de l'encoche. */
html.neo #screen-meta,
html.neo #screen-end { padding-top: 0 !important; }
html.neo #screen-meta .create-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 calc(50% - 50vw) 18px !important;
  padding: calc(150px + env(safe-area-inset-top, 0px)) 18px 14px !important;
  min-height: calc(205px + env(safe-area-inset-top, 0px));
  border: 0 !important;
  text-align: left !important;
}
html.neo #screen-meta .create-head::before { display: none !important; }
html.neo #screen-meta .create-head::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0.25) 0%, rgba(10, 11, 15, 0.35) 45%, var(--n-fond) 100%);
}
html.neo .neo-bandeau {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: -2;
  animation: neo-decor 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
html.neo .neo-bandeau-perso {
  position: absolute;
  right: -2%; bottom: -30%;
  height: 150%;
  width: auto;
  z-index: -1;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.7));
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 82%);
  animation: neo-perso 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo #screen-meta .create-title {
  font: 900 27px/1.08 var(--n-titre) !important;
  letter-spacing: -0.015em !important;
  color: #fff !important;
  text-align: left !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  margin: 0 !important;
  max-width: 70%;
}
/* La marque de l'écran (者, 店, 簿…) en orange, le titre en blanc. */
html.neo #screen-meta .create-title::first-letter { color: var(--n-orange); }

/* ---------- les blocs ---------- */
html.neo :is(#screen-meta, #screen-end) .end-block,
html.neo :is(#screen-meta, #screen-end) .empty-state,
html.neo :is(#screen-meta, #screen-end) .bingo-ct,
html.neo :is(#screen-meta, #screen-end) .end-vitrine {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: var(--n-r) !important;
  clip-path: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--n-ombre) !important;
  padding: 16px !important;
  color: var(--n-encre) !important;
}
html.neo :is(#screen-meta, #screen-end) .end-block::before,
html.neo :is(#screen-meta, #screen-end) .end-block::after { display: none !important; }
html.neo :is(#screen-meta, #screen-end) .end-block h3,
html.neo :is(#screen-meta, #screen-end) .bingo-ct h3,
html.neo #screen-meta .badge-fam,
html.neo #screen-meta .shop-h3 {
  font: 800 11.5px/1.25 var(--n-titre) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--n-orange) !important;
  text-align: left !important;
  margin: 0 0 12px !important;
}
html.neo #screen-meta .badge-fam {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 2px 0 !important;
  border: 0 !important;
}
html.neo #screen-meta .badge-fam span { color: var(--n-pale); letter-spacing: 0.06em; }
html.neo :is(#screen-meta, #screen-end) .shop-note {
  color: var(--n-doux) !important;
  font: 500 13.5px/1.5 var(--n-titre) !important;
}
html.neo :is(#screen-meta, #screen-end) .end-block .shop-note { text-align: left !important; }
html.neo :is(#screen-meta, #screen-end) .acc-warn,
html.neo #screen-meta .shop-hint {
  background: rgba(255, 138, 31, 0.08) !important;
  border: 0 !important;
  border-left: 3px solid var(--n-orange) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color: #ffc89a !important;
  text-align: left !important;
  font-weight: 600 !important;
}
html.neo :is(#screen-meta, #screen-end) .pal-table td {
  border-bottom: 1px solid var(--n-filet) !important;
  font: 500 14px/1.35 var(--n-titre) !important;
  color: var(--n-doux) !important;
  padding: 10px 2px !important;
}
html.neo :is(#screen-meta, #screen-end) .pal-table td:last-child {
  font: 800 16px/1 var(--n-titre) !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
}
html.neo :is(#screen-meta, #screen-end) .pal-table tr.zero td { opacity: 0.45; }

/* ---------- les boutons ---------- */
html.neo :is(#screen-meta, #screen-end, #modal-overlay) .btn {
  font-family: var(--n-titre) !important;
  border-radius: 14px !important;
  text-shadow: none !important;
}
html.neo :is(#screen-meta, #screen-end, #modal-overlay) .btn-gold,
html.neo #screen-end #btn-replay {
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  border: 0 !important;
  font-weight: 900 !important;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.22) inset, 0 12px 24px -14px rgba(255, 138, 31, 0.95) !important;
}
html.neo :is(#screen-meta, #screen-end, #modal-overlay) .btn-primary:not(#btn-replay) {
  background: var(--n-s2) !important;
  color: var(--n-encre) !important;
  border: 1px solid var(--n-filet-fort) !important;
  box-shadow: var(--n-ombre-choix) !important;
  font-weight: 800 !important;
}
html.neo :is(#screen-meta, #screen-end, #modal-overlay) .btn-ghost {
  background: transparent !important;
  color: var(--n-doux) !important;
  border: 1px solid var(--n-filet-fort) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html.neo :is(#screen-meta, #screen-end, #modal-overlay) .btn-red {
  background: var(--n-rouge) !important;
  color: #1a0000 !important;
  border: 0 !important;
  font-weight: 900 !important;
}
html.neo :is(#screen-meta, #screen-end, #modal-overlay) .btn:active { transform: translateY(1px) scale(0.99); }
html.neo :is(#screen-meta, #screen-end) .name-input,
html.neo #modal-overlay .name-input {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font: 600 15px/1.2 var(--n-titre) !important;
}
html.neo :is(#screen-meta, #screen-end) .name-input:focus { border-color: var(--n-orange) !important; outline: none; }
/* Le bouton Google garde ses couleurs : blanc, encre sombre. */
html.neo :is(#screen-meta, #screen-end) .btn-google {
  background: #fff !important;
  color: #1f1f1f !important;
  border: 0 !important;
  font-weight: 800 !important;
}

/* ---------- les onglets (classement, échoppe) ---------- */
html.neo #screen-meta .lad-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 16px !important;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 14px !important;
}
html.neo #screen-meta .lad-tab {
  flex: 1 1 0;
  min-width: max-content;
  width: auto !important; height: auto !important;
  min-height: 42px;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--n-doux) !important;
  font: 800 13px/1.15 var(--n-titre) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}
html.neo #screen-meta .lad-tab.on {
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
}

/* ---------- l'échoppe et les listes d'objets ---------- */
html.neo #screen-meta :is(.perk-item, .choice-card) {
  display: grid !important;
  /* auto et pas 44px : la miniature d'un cadre fait 64px et débordait sur son nom. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 16px !important;
  box-shadow: var(--n-ombre-choix) !important;
  clip-path: none !important;
  filter: none !important;
  padding: 14px !important;
  color: var(--n-encre) !important;
}
html.neo #screen-meta :is(.perk-item, .choice-card) > :is(.btn, .shop-note) { grid-column: 1 / -1; margin-top: 10px !important; }
html.neo #screen-meta .perk-item > .shop-note { text-align: center; color: var(--n-pale) !important; }
html.neo #screen-meta .cc-icon {
  width: 44px; height: 44px;
  display: grid !important;
  place-items: center;
  border-radius: 12px;
  background: var(--n-s2);
  border: 1px solid var(--n-filet);
  font-size: 22px !important;
  margin: 0 !important;
}
html.neo #screen-meta .cc-body strong { font: 800 16px/1.2 var(--n-titre) !important; color: #fff !important; }
html.neo #screen-meta .cc-body small { color: var(--n-doux) !important; font-size: 13px !important; line-height: 1.4 !important; }
html.neo #screen-meta .perk-slots {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: var(--n-r) !important;
  clip-path: none !important;
}
html.neo #screen-meta .perk-slot {
  background: var(--n-s2) !important;
  border: 1px dashed var(--n-filet-fort) !important;
  border-radius: 14px !important;
  color: var(--n-pale) !important;
}
html.neo #screen-meta .perk-slots-h { color: var(--n-doux) !important; font-family: var(--n-titre) !important; }
html.neo #screen-meta .perk-slots-h b { color: var(--n-orange) !important; }
html.neo #screen-meta :is(.cos-grid, .cardskin-grid, .collec-grid) > * {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 16px !important;
  clip-path: none !important;
}

/* ---------- les exploits : des tuiles ---------- */
html.neo #screen-meta .badge-grid { gap: 8px !important; }
html.neo #screen-meta .badge-cell {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  padding: 14px 10px !important;
}
html.neo #screen-meta .badge-cell strong { font: 800 14px/1.2 var(--n-titre) !important; color: #fff !important; letter-spacing: 0 !important; }
html.neo #screen-meta .badge-cell small { color: var(--n-doux) !important; font: 500 12px/1.35 var(--n-titre) !important; }
html.neo #screen-meta .badge-cell .badge-ic { color: var(--n-pale) !important; font-size: 24px !important; }
html.neo #screen-meta .badge-cell.on,
html.neo #screen-meta .badge-cell.got,
html.neo #screen-meta .badge-cell:not(.locked):has(.badge-how) {
  border-color: rgba(255, 138, 31, 0.5) !important;
  background: linear-gradient(0deg, rgba(255, 138, 31, 0.08), rgba(255, 138, 31, 0.08)), var(--n-s1) !important;
}

/* ---------- le Panthéon et les classements ---------- */
html.neo #screen-meta .pt-banner { display: none !important; }
html.neo #screen-meta .empty-state { text-align: center; }
html.neo #screen-meta .es-icon { color: var(--n-pale) !important; }
html.neo #screen-meta .es-title { font: 900 20px/1.2 var(--n-titre) !important; color: #fff !important; letter-spacing: -0.01em !important; }
html.neo #screen-meta .es-text { color: var(--n-doux) !important; }
html.neo #screen-meta .pantheon-item,
html.neo #screen-meta :is(.lad-row, .ladder-row, .fallen-row) {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 14px !important;
  clip-path: none !important;
  box-shadow: none !important;
}
html.neo #screen-meta .pt-rank { font: 900 15px/1 var(--n-titre) !important; color: var(--n-orange) !important; }
html.neo #screen-meta .pt-score { font: 900 17px/1 var(--n-titre) !important; color: #fff !important; font-variant-numeric: tabular-nums; }

/* ---------- le registre (cent niveaux) et l'expérience ---------- */
html.neo :is(#screen-meta, #screen-end) .xp-rank { font: 900 20px/1.2 var(--n-titre) !important; color: #fff !important; text-align: left !important; }
html.neo :is(#screen-meta, #screen-end) .xp-bar {
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--n-s3) !important;
  border: 0 !important;
  overflow: hidden;
}
html.neo :is(#screen-meta, #screen-end) .xp-bar i { background: var(--n-orange) !important; border-radius: 999px; }

/* ---------- le Quizz ---------- */
html.neo #screen-meta .end-block h3.qz-q {
  font: 800 20px/1.3 var(--n-titre) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #fff !important;
}
html.neo #screen-meta .btn-choice {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 14px !important;
  color: var(--n-encre) !important;
  font: 700 15px/1.3 var(--n-titre) !important;
  box-shadow: var(--n-ombre-choix) !important;
  clip-path: none !important;
}

/* ---------- le Bingo Book : les visages de Storm ---------- */
html.neo #screen-meta .bingo-cell {
  position: relative;
  overflow: hidden;
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 16px !important;
  clip-path: none !important;
  box-shadow: var(--n-ombre-choix) !important;
}
html.neo #screen-meta .bingo-cell .neo-bingo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 12px;
  background: var(--n-s2);
}
html.neo #screen-meta .bingo-cell.neo-bingo-pret > .bingo-img { display: none !important; }
/* Jamais croisé : la silhouette, pas le visage. */
/* (le filtre noircit tout l'élément, fond compris : le fond passe au cadre) */
html.neo #screen-meta .bingo-cell .neo-bingo-cadre {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2c3346 0%, var(--n-s2) 72%);
}
html.neo #screen-meta .bingo-cell .neo-bingo-cadre .neo-bingo { background: none; border-radius: 0; }
html.neo #screen-meta .bingo-cell.locked .neo-bingo {
  filter: brightness(0) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55));
  opacity: 0.9;
}
html.neo #screen-meta .bingo-cell.beaten { border-color: rgba(67, 209, 122, 0.55) !important; }
html.neo #screen-meta .bingo-cell.deadly { border-color: rgba(255, 77, 77, 0.55) !important; }
html.neo #screen-meta .bingo-cell strong { font: 900 15px/1.2 var(--n-titre) !important; color: #fff !important; letter-spacing: 0 !important; }
html.neo #screen-meta .bingo-cell .bc {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet) !important;
  color: var(--n-doux) !important;
  border-radius: 8px !important;
}

/* ---------- la fenêtre de dialogue ---------- */
html.neo #modal-overlay .modal {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 22px !important;
  clip-path: none !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9) !important;
  color: var(--n-encre) !important;
}
html.neo #modal-overlay .modal h3 { font: 900 20px/1.2 var(--n-titre) !important; color: #fff !important; letter-spacing: -0.01em !important; text-transform: none !important; }
html.neo #modal-overlay .modal p { color: var(--n-doux) !important; font-family: var(--n-titre) !important; }

/* ===========================================================================
   L'ÉCRAN DE FIN — l'affiche de ta vie
   =========================================================================== */
html.neo #screen-end .meta-banner.gala,
html.neo #screen-end .end-head .laurel { display: none !important; }
html.neo #screen-end .end-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 calc(50% - 50vw) 16px !important;
  padding: calc(250px + env(safe-area-inset-top, 0px)) 18px 4px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  text-align: left !important;
}
html.neo .neo-fin-scene {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(370px + env(safe-area-inset-top, 0px));
  z-index: -1;
  overflow: hidden;
}
html.neo .neo-fin-decor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: neo-decor 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
html.neo .neo-fin-scene::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0.1) 0%, rgba(10, 11, 15, 0.15) 35%, rgba(10, 11, 15, 0.78) 72%, var(--n-fond) 100%);
}
html.neo .neo-fin-perso {
  position: absolute;
  right: -6%;
  bottom: 4%;
  height: calc(92% - env(safe-area-inset-top, 0px));
  width: auto;
  max-width: 70%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 1;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
  animation: neo-perso 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Tombé : celui qui t'a tué, en ombre portée rouge. */
html.neo .neo-fin-scene.neo-mort .neo-fin-perso { filter: drop-shadow(0 0 18px rgba(255, 60, 60, 0.35)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.8)); }
html.neo .neo-fin-qui {
  position: absolute;
  right: 14px; top: calc(196px + env(safe-area-inset-top, 0px));
  z-index: 3;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(10, 11, 15, 0.82);
  border: 1px solid var(--n-filet-fort);
  font: 800 11px/1 var(--n-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
html.neo .neo-fin-scene.neo-mort .neo-fin-qui { border-color: rgba(255, 77, 77, 0.6); color: #ffb3b3; }
html.neo #screen-end .end-sub {
  text-align: left !important;
  color: var(--n-doux) !important;
  font: 800 11px/1.5 var(--n-titre) !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 2px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  max-width: 72%;
}
html.neo #screen-end .end-sub.fallen-note { color: #ffb3b3 !important; }
html.neo #screen-end .end-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 900 36px/1.02 var(--n-titre) !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9) !important;
  margin: 10px 0 4px !important;
  text-align: left !important;
}
html.neo #screen-end .end-name img { width: 34px; height: 34px; flex: 0 0 auto; }
html.neo #screen-end .end-title {
  font: 800 17px/1.3 var(--n-titre) !important;
  font-style: normal !important;
  color: var(--n-orange) !important;
  text-align: left !important;
  margin: 0 !important;
}
html.neo #screen-end .end-sig {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 12px 0 0 !important;
  padding: 8px 12px !important;
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 12px !important;
  text-align: left !important;
}
html.neo #screen-end .end-sig .sig-name { font: 800 14px/1.2 var(--n-titre) !important; color: #fff !important; }
html.neo #screen-end .end-sig .sig-move { color: var(--n-doux) !important; font-style: normal !important; font-size: 12px !important; }
/* Le score : le plus gros chiffre du jeu, sans cadre. */
html.neo #screen-end .end-score {
  display: flex !important;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  clip-path: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html.neo #screen-end .end-score span {
  font: 800 11px/1 var(--n-titre) !important;
  letter-spacing: 0.16em !important;
  color: var(--n-doux) !important;
}
html.neo #screen-end .end-score strong {
  font: 900 76px/0.9 var(--n-titre) !important;
  letter-spacing: -0.04em !important;
  color: var(--n-orange) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
  animation: neo-score 0.7s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
html.neo #screen-end .end-pct {
  text-align: left !important;
  color: var(--n-doux) !important;
  font: 700 14px/1.3 var(--n-titre) !important;
  margin: 6px 0 0 !important;
}
html.neo #screen-end .end-regret {
  background: var(--n-s1) !important;
  border: 0 !important;
  border-left: 3px solid var(--n-orange) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 16px 0 0 !important;
  color: var(--n-encre) !important;
  font: 600 15px/1.5 var(--n-titre) !important;
  font-style: normal !important;
  text-align: left !important;
  box-shadow: none !important;
}
html.neo #screen-end .end-actions-haut { margin: 16px 0 0 !important; }
html.neo #screen-end .end-actions-haut .btn,
html.neo #screen-end .end-actions .btn {
  width: 100% !important;
  min-height: 54px;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
}
html.neo #screen-end .end-actions-haut #btn-share {
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  border: 0 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.22) inset, 0 14px 26px -14px rgba(255, 138, 31, 0.95) !important;
}
html.neo #screen-end .end-actions:not(.end-actions-haut) {
  display: grid !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
html.neo #screen-end .end-story {
  color: var(--n-doux) !important;
  font: 500 16px/1.6 var(--n-titre) !important;
  font-style: normal !important;
  text-align: left !important;
  text-shadow: none !important;
  margin: 18px 2px 18px !important;
  padding: 0 0 0 14px !important;
  border-left: 2px solid var(--n-filet-fort);
  max-width: none !important;
}
html.neo #screen-end .record-banner {
  border-color: rgba(242, 193, 78, 0.55) !important;
  background: linear-gradient(0deg, rgba(242, 193, 78, 0.1), rgba(242, 193, 78, 0.1)), var(--n-s1) !important;
}
html.neo #screen-end .record-banner p { color: #ffe3a0 !important; font: 800 15px/1.4 var(--n-titre) !important; text-align: left !important; }
/* Le palmarès : des tuiles, le chiffre d'abord. */
html.neo #screen-end .end-block:not([data-fin]) > .pal-table:not(.pal-manque) tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
html.neo #screen-end .end-block:not([data-fin]) > .pal-table:not(.pal-manque) tr {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px;
  background: var(--n-s2);
  border: 1px solid var(--n-filet);
  border-radius: 12px;
}
html.neo #screen-end .end-block:not([data-fin]) > .pal-table:not(.pal-manque) td {
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
  font-size: 12.5px !important;
}
html.neo #screen-end .end-block:not([data-fin]) > .pal-table:not(.pal-manque) td:last-child { font-size: 26px !important; letter-spacing: -0.02em; }
/* Les pastilles (ce que tu es devenu, badges) */
html.neo :is(#screen-meta, #screen-end) .badge-row { justify-content: flex-start !important; gap: 8px !important; }
html.neo :is(#screen-meta, #screen-end) .badge-row .badge {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  border-radius: 999px !important;
  color: var(--n-encre) !important;
  font: 700 13px/1.2 var(--n-titre) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  clip-path: none !important;
}
/* Les souvenirs et le parcours : une frise. */
html.neo #screen-end .journey { position: relative; padding-left: 16px !important; }
html.neo #screen-end .journey::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--n-filet-fort);
  border-radius: 2px;
}
html.neo #screen-end .journey li {
  position: relative;
  border: 0 !important;
  padding: 6px 0 8px !important;
  color: var(--n-encre) !important;
  font: 500 14.5px/1.45 var(--n-titre) !important;
  font-style: normal !important;
  text-align: left !important;
}
html.neo #screen-end .journey li::before {
  content: "";
  position: absolute;
  left: -16px; top: 11px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--n-s1);
  border: 2px solid var(--n-orange);
}
html.neo #screen-end .journey li em {
  display: block;
  font: 800 11px/1.3 var(--n-titre) !important;
  font-style: normal !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-orange) !important;
  margin-bottom: 2px;
}
html.neo #screen-end .journey li small { color: var(--n-pale) !important; }
/* L'entourage : les visages, comme dans les bilans. */
html.neo #screen-end .kin-list { padding-left: 0 !important; }
html.neo #screen-end .kin-list::before { display: none; }
html.neo #screen-end .kin-list li.neo-ligne-pnj::before { display: none !important; }
html.neo #screen-end .kin-list li { padding: 8px 0 !important; border-bottom: 1px solid var(--n-filet) !important; }
html.neo #screen-end .kin-list li:last-child { border-bottom: 0 !important; }
html.neo #screen-end .kin-list li em { display: inline; margin: 0 6px 0 0; }
html.neo #screen-end .kin-list strong { color: #fff !important; font-weight: 800 !important; }
html.neo #screen-end .kin-n { color: var(--n-doux) !important; }
/* Le détail replié */
html.neo #screen-end .end-fold {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: var(--n-r) !important;
  padding: 0 14px !important;
  margin: 16px 0 !important;
}
html.neo #screen-end .end-fold > summary {
  font: 800 13px/1 var(--n-titre) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--n-encre) !important;
  padding: 18px 0 !important;
  border: 0 !important;
}
html.neo #screen-end .end-fold[open] > summary { color: var(--n-orange) !important; }
html.neo #screen-end .end-fold > .end-block { background: var(--n-s2) !important; box-shadow: none !important; }
html.neo #screen-end .fo-verdict { color: var(--n-encre) !important; font: 600 15px/1.5 var(--n-titre) !important; font-style: normal !important; text-align: left !important; }
html.neo #screen-end .mis-reg li { background: var(--n-s2) !important; border-radius: 10px !important; border: 1px solid var(--n-filet) !important; }
html.neo #screen-end .end-free-hint,
html.neo #screen-end .quest-earned { color: var(--n-doux) !important; font-family: var(--n-titre) !important; }
html.neo #screen-end .end-gateciv .ev-text,
html.neo #screen-end .lignee-end .ev-text { color: var(--n-encre) !important; font: 500 15px/1.5 var(--n-titre) !important; text-align: left !important; }

/* ---------- les années d'après : la pastille qui remplace le bandeau ---------- */
html.neo #game-header > .hd-row1 > .season-tag {
  font: 800 12px/1.25 var(--n-titre) !important;
  letter-spacing: 0.1em !important;
  color: var(--n-encre) !important;
  border: 1px solid var(--n-filet-fort) !important;
  background: var(--n-s2) !important;
  border-radius: 10px !important;
}

/* ---------- l'aperçu de la carte de partage ---------- */
html.neo .share-ov { background: rgba(5, 6, 9, 0.92) !important; }
html.neo .share-ov .share-img {
  border-radius: 18px !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--n-filet-fort) !important;
}
html.neo .share-ov .share-hint { color: var(--n-doux) !important; font-family: var(--n-titre) !important; }
html.neo .share-ov .btn { font-family: var(--n-titre) !important; border-radius: 14px !important; min-height: 50px; }
html.neo .share-ov .btn-gold {
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  border: 0 !important;
  font-weight: 900 !important;
}
html.neo .share-ov .btn-primary,
html.neo .share-ov .btn-dark {
  background: var(--n-s2) !important;
  color: var(--n-encre) !important;
  border: 1px solid var(--n-filet-fort) !important;
}
html.neo .share-ov .share-bg-offer {
  background: var(--n-s1) !important;
  border: 1px solid var(--n-filet) !important;
  border-radius: 14px !important;
  color: var(--n-doux) !important;
}
html.neo .share-ov .share-bg-btn {
  background: var(--n-s2) !important;
  border: 1px solid var(--n-filet-fort) !important;
  color: var(--n-encre) !important;
  border-radius: 10px !important;
}

@keyframes neo-score {
  from { transform: translateY(14px) scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   MOUVEMENT
   --------------------------------------------------------------------------- */
@keyframes neo-decor {
  from { transform: scale(1.08) translateX(-2%); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}
@keyframes neo-perso {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes neo-perso-centre {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%); opacity: 1; }
}
@keyframes neo-choix {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes neo-gain {
  from { transform: translateY(6px) scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.neo .neo-decor, html.neo .neo-perso, html.neo .neo-affiche-decor, html.neo .neo-affiche-perso,
  html.neo #card-zone .btn-choice, html.neo #card-zone .fx-chip,
  html.neo .neo-bandeau, html.neo .neo-bandeau-perso, html.neo .neo-fin-decor, html.neo .neo-fin-perso,
  html.neo #screen-end .end-score strong { animation: none !important; }
  html.neo .neo-affiche-perso.p1 { transform: translateX(-50%); }
}

/* Écran large : la scène gagne en hauteur, le personnage reste à droite. */
@media (min-width: 1060px) {
  html.neo .neo-scene { height: 320px; }
  html.neo .neo-affiche { margin: 20px 0 0; border-radius: var(--n-r); height: 460px; }
  html.neo #screen-meta .create-head,
  html.neo #screen-end .end-head { margin: 20px 0 18px !important; border-radius: var(--n-r) !important; }
  html.neo #screen-meta .create-head { min-height: 220px; padding-top: 160px !important; }
  html.neo #screen-end .end-head { padding-top: 290px !important; }
  html.neo .neo-fin-scene { height: 420px; }
  html.neo .neo-fin-perso { height: 86%; right: 2%; }
}