/* ============================================================================
   neo — icônes et boutons
   Chargé après les autres neo-*.css, sous html.neo comme eux.

   Les boutons deviennent les plaques de menu du jeu de combat : bois laqué
   orange pour l'action, bois d'encre pour les choix, avec leur filet clair et
   leurs coins coupés. Les pictogrammes (aptitudes, gains, ryō, joker) sont
   les icônes d'objets et d'états du même jeu, rangées dans une seule planche
   (assets/storm/ui/pictos.webp, cases de 64 px). Le sceau de catégorie est
   une plaque de laque rouge, le titre de la carte court sur un ruban peint.

   Structure + relief + mouvement : la plaque porte son ombre dure, le survol
   allume la plaque comme le curseur des menus, l'appui l'enfonce d'un pixel.
   Pas de verre, pas de halo, pas de dégradé décoratif.

   Ne touche pas aux techniques du duel (.np-tech, .np-ult) : leur tranche de
   couleur est leur sens. Elles gardent l'habillage de neo-partie.css.
   ============================================================================ */

html.neo {
  --ni-orange: url("../assets/storm/ui/plaque-orange.webp");
  --ni-sombre: url("../assets/storm/ui/plaque-sombre.webp");
  --ni-encre: url("../assets/storm/ui/plaque-encre.webp");
  --ni-pictos: url("../assets/storm/ui/pictos.webp");
  --ni-n: 19;                     /* nombre de cases de la planche */
  --ni-texte-orange: #1c0d02;
  --ni-appui: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   1. LE PICTOGRAMME — une case de la planche, à la taille demandée
   --------------------------------------------------------------------------- */
html.neo .nic {
  --s: 20px;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  vertical-align: -0.28em;
  background: var(--ni-pictos) no-repeat;
  background-size: calc(var(--s) * var(--ni-n)) var(--s);
  background-position: calc(var(--i, 0) * var(--s) * -1) 0;
}
html.neo [data-ni="nin"]   { --i: 0; }
html.neo [data-ni="tai"]   { --i: 1; }
html.neo [data-ni="gen"]   { --i: 2; }
html.neo [data-ni="vit"]   { --i: 3; }
html.neo [data-ni="res"]   { --i: 4; }
html.neo [data-ni="ken"]   { --i: 5; }
html.neo [data-ni="rig"]   { --i: 6; }
html.neo [data-ni="vol"]   { --i: 7; }
html.neo [data-ni="ren"]   { --i: 8; }
html.neo [data-ni="ryo"]   { --i: 9; }
html.neo [data-ni="soin"]  { --i: 10; }
html.neo [data-ni="bles"]  { --i: 11; }
html.neo [data-ni="lien"]  { --i: 12; }
html.neo [data-ni="trait"] { --i: 13; }
html.neo [data-ni="joker"] { --i: 14; }
html.neo [data-ni="arme"]  { --i: 15; }
html.neo [data-ni="feu"]   { --i: 16; }
html.neo [data-ni="oeil"]  { --i: 17; }
html.neo [data-ni="tenue"] { --i: 18; }

/* ---------------------------------------------------------------------------
   2. L'EN-TÊTE — une icône devant chaque aptitude
   --------------------------------------------------------------------------- */
/* Le pictogramme tient deux lignes à gauche ; à droite, le libellé, puis la
   barre et son chiffre. Sur quatre colonnes de téléphone, libellé et chiffre
   ne tenaient plus sur une seule ligne une fois l'icône posée. */
html.neo #game-header .hd-bars .stat {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "ic lab lab" "ic bar val";
  align-items: center;
  column-gap: 5px;
  row-gap: 2px;
}
html.neo #game-header .hd-bars .stat > span { display: contents !important; }
html.neo #game-header .hd-bars .stat > span::before {
  content: "";
  grid-area: ic;
  --s: 22px;
  width: var(--s);
  height: var(--s);
  background: var(--ni-pictos) no-repeat;
  background-size: calc(var(--s) * var(--ni-n)) var(--s);
  background-position: calc(var(--i, 0) * var(--s) * -1) 0;
}
html.neo #game-header .hd-bars .stat-l {
  grid-area: lab;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 9.5px/1.25 var(--n-titre);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n-pale);
}
html.neo #game-header .hd-bars .stat-v {
  grid-area: val;
  font-size: 12.5px !important;
  line-height: 1 !important;
}
html.neo #game-header .hd-bars .stat > .bar { grid-area: bar; margin: 0 !important; align-self: center; }
html.neo #game-header .stat-tec  { --i: 0; }
html.neo #game-header .stat-phy  { --i: 1; }
html.neo #game-header .stat-men  { --i: 2; }
html.neo #game-header .stat-vit  { --i: 3; }
html.neo #game-header .stat-res  { --i: 4; }
html.neo #game-header .stat-ken  { --i: 5; }
html.neo #game-header .stat-disc { --i: 6; }
/* Une aptitude sans clé connue (autre mode) : pas de case vide. */
html.neo #game-header .hd-bars .stat:not([class*="stat-"]) > span::before,
html.neo #game-header .hd-bars .stat.stat-sur:not(.stat-tec):not(.stat-phy):not(.stat-men):not(.stat-vit):not(.stat-res):not(.stat-ken):not(.stat-disc) > span::before { display: none; }

/* Les ressources du repli (ryō, renommée, chakra, volonté). */
html.neo #game-header .hd-meta .nic { --s: 18px; margin-right: 2px; }
html.neo #game-header .hd-trait .nic { --s: 18px; margin-right: 5px; }
html.neo #game-header .hd-reg-l .nic { --s: 22px; }

/* Les boutons ronds : le disque laqué des menus. */
html.neo #game-header .hd-exit,
html.neo #btn-back-fab,
html.neo body.sport-naruto #lang-toggle,
html.neo body.sport-naruto .nj-snd-btn {
  background: url("../assets/storm/ui/disque.webp") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
  color: #f6efe2 !important;
  min-width: 44px;
  min-height: 44px;
  transition: transform 0.12s var(--ni-appui), filter 0.15s ease;
}
html.neo #game-header .hd-exit { font-weight: 900 !important; font-size: 18px !important; }
html.neo :is(#game-header .hd-exit, #btn-back-fab, #lang-toggle, .nj-snd-btn):focus-visible {
  outline: 3px solid var(--n-orange) !important;
  outline-offset: 2px;
}
html.neo :is(#game-header .hd-exit, #btn-back-fab, #lang-toggle, .nj-snd-btn):active { transform: translateY(1px) scale(0.96); }
@media (hover: hover) {
  html.neo :is(#game-header .hd-exit, #btn-back-fab, #lang-toggle, .nj-snd-btn):hover { filter: brightness(1.6); }
}
/* La flèche de retour, tracée au pinceau. */
html.neo #btn-back-fab { font-size: 0 !important; }
html.neo #btn-back-fab::before {
  content: "";
  display: block;
  width: 24px; height: 22px;
  margin: auto;
  background: url("../assets/storm/ui/retour.webp") center / contain no-repeat;
}
html.neo .nic-retour {
  display: inline-block;
  width: 20px; height: 18px;
  margin-right: 8px;
  vertical-align: -0.2em;
  background: url("../assets/storm/ui/retour.webp") center / contain no-repeat;
}

/* Écran large : le rail fait 270 px, sept aptitudes sur quatre colonnes ne
   s'y lisaient pas (libellés coupés, chiffres poussés dehors). Deux colonnes. */
@media (min-width: 1000px) {
  html.neo #game-header .hd-bars { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px 12px !important; }
}

/* ---------------------------------------------------------------------------
   3. LA PLAQUE — tous les boutons d'action et de choix
   --------------------------------------------------------------------------- */
/* Orange : l'action (Continuer, Reprendre, Engager, valider). */
html.neo #card-zone :is(.btn-primary, .btn-gold),
html.neo #screen-home .home-actions :is(#btn-resume, #btn-new:not(.btn-calme)),
html.neo :is(#screen-meta, #screen-end, #modal-overlay, #screen-create) .btn-gold,
html.neo #screen-end #btn-replay,
html.neo .share-ov .btn-gold,
html.neo body .btn.btn-gold:not(.crs-go),
html.neo #screen-end .end-actions-haut #btn-share {
  background: transparent !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 7px 9px 9px 7px !important;
  border-image: var(--ni-orange) 14 18 18 14 fill / 7px 9px 9px 7px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ni-texte-orange) !important;
  text-shadow: 0 1px 0 rgba(255, 214, 170, 0.35);
  transition: transform 0.12s var(--ni-appui), filter 0.15s ease !important;
}
/* Encre : les choix, les boutons secondaires. */
html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult),
html.neo #screen-home .home-actions #btn-new.btn-calme,
html.neo :is(#screen-meta, #screen-end, #modal-overlay, #screen-create) .btn-primary:not(#btn-replay),
html.neo #screen-meta .btn-choice,
html.neo #card-zone .joker-btn,
html.neo body .btn.btn-primary:not([id="btn-replay"]):not(.np-tech):not(:where(#card-zone *)) {
  background: transparent !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 6px 8px 8px 6px !important;
  border-image: var(--ni-sombre) 14 18 18 14 fill / 6px 8px 8px 6px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--n-encre) !important;
  transition: transform 0.12s var(--ni-appui), filter 0.15s ease !important;
}
/* Le bouton de second rang : la même plaque, plus sombre. */
html.neo :is(#screen-meta, #screen-end, #modal-overlay, #screen-create) .btn-ghost,
html.neo #card-zone .btn-ghost:not(.joker-btn),
html.neo body .btn.btn-ghost:not(.joker-btn) {
  background: transparent !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 6px 8px 8px 6px !important;
  border-image: var(--ni-encre) 14 18 18 14 fill / 6px 8px 8px 6px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--n-doux) !important;
  min-height: 44px;
}
/* Le doigt : la plaque s'enfonce. */
html.neo body :is(.btn-gold, .btn-primary, .btn-ghost, .joker-btn, .btn-choice:not(.np-tech):not(.np-ult)):active:not(:disabled) {
  transform: translateY(1px) scale(0.99) !important;
}
html.neo body :is(.btn-gold, .btn-primary, .btn-ghost, .joker-btn, .btn-choice:not(.np-tech):not(.np-ult)):focus-visible {
  outline: 3px solid var(--n-or) !important;
  outline-offset: 2px !important;
}
html.neo body :is(.btn-gold, .btn-primary, .btn-ghost):disabled {
  filter: saturate(0.35) brightness(0.85);
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---------- les choix de la carte ---------- */
html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult) {
  padding: 11px 44px 11px 12px !important;
  min-height: 60px;
}
/* Le curseur des menus, à la place du chevron. */
html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult)::after {
  content: "" !important;
  right: 8px !important;
  width: 26px !important; height: 21px !important;
  border: 0 !important;
  background: url("../assets/storm/ui/curseur.webp") center / contain no-repeat !important;
  transform: translateY(-50%) !important;
  transition: transform 0.18s var(--ni-appui);
}
/* Survol et clavier : la plaque s'allume en orange, comme le curseur des menus. */
@media (hover: hover) {
  html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult):hover {
    border-image-source: var(--ni-orange) !important;
    color: var(--ni-texte-orange) !important;
  }
  html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult):hover::after { transform: translate(3px, -50%) !important; }
  html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult):hover > :is(small, .opt-lect, span:not(.opt-tag)) { color: #3a1c06 !important; }
}
html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult):focus-visible {
  border-image-source: var(--ni-orange) !important;
  color: var(--ni-texte-orange) !important;
}
html.neo #card-zone .btn-choice:not(.np-tech):not(.np-ult):focus-visible > :is(small, .opt-lect, span:not(.opt-tag)) { color: #3a1c06 !important; }
html.neo #card-zone .btn-choice:disabled { filter: saturate(0.4); opacity: 0.6; }

/* ---------- Continuer et les actions de la carte ---------- */
html.neo #card-zone :is(.btn-primary, .btn-gold) {
  min-height: 56px;
  font: 900 15px/1 var(--n-titre) !important;
  letter-spacing: 0.08em !important;
}
@media (hover: hover) {
  html.neo body :is(.btn-gold, .btn-primary, .btn-ghost, .joker-btn):hover:not(:disabled) { filter: brightness(1.12); }
}

/* ---------- le joker : une main de cartes ---------- */
html.neo #card-zone .joker-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  color: var(--n-doux) !important;
}
html.neo #card-zone .joker-btn::before {
  content: "";
  --s: 24px;
  flex: none;
  width: var(--s); height: var(--s);
  background: var(--ni-pictos) no-repeat;
  background-size: calc(var(--s) * var(--ni-n)) var(--s);
  background-position: calc(14 * var(--s) * -1) 0;
}

/* ---------------------------------------------------------------------------
   4. LES GAINS — l'objet du gain devant son chiffre
   --------------------------------------------------------------------------- */
html.neo #card-zone .fx-chip[data-k] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px !important;
  min-height: 30px;
}
html.neo #card-zone .fx-chip[data-k]::before {
  content: "";
  --s: 22px;
  flex: none;
  width: var(--s); height: var(--s);
  background: var(--ni-pictos) no-repeat;
  background-size: calc(var(--s) * var(--ni-n)) var(--s);
  background-position: calc(var(--i, 0) * var(--s) * -1) 0;
}
html.neo #card-zone .fx-chip[data-k="tec"]    { --i: 0; }
html.neo #card-zone .fx-chip[data-k="phy"]    { --i: 1; }
html.neo #card-zone .fx-chip[data-k="men"]    { --i: 2; }
html.neo #card-zone .fx-chip[data-k="form"]   { --i: 4; }
html.neo #card-zone .fx-chip[data-k="disc"]   { --i: 6; }
html.neo #card-zone .fx-chip[data-k="mor"]    { --i: 7; }
html.neo #card-zone .fx-chip[data-k="rep"]    { --i: 8; }
html.neo #card-zone .fx-chip[data-k="money"]  { --i: 9; }
html.neo #card-zone .fx-chip[data-k="injury"] { --i: 11; }
html.neo #card-zone .fx-chip[data-k="bond"]   { --i: 12; }
html.neo #card-zone .fx-chip[data-k="trait"]  { --i: 13; }

/* ---------------------------------------------------------------------------
   5. LE BANDEAU DE CATÉGORIE — un sceau de laque, un ruban peint
   --------------------------------------------------------------------------- */
html.neo .neo-plaque .sceau,
html.neo .neo-plaque .arc-ic {
  width: 36px !important; height: 36px !important;
  background: transparent !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 4px !important;
  border-image: url("../assets/storm/ui/sceau.webp") 10 fill / 4px stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff6e6 !important;
  font: 900 19px/1 "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", "Shippori Mincho", serif !important;
  text-shadow: 0 1px 0 rgba(60, 10, 0, 0.7);
  transform: rotate(-3deg) !important;
}
/* Une trame porte son émoji : on montre le kanji de sa catégorie. */
html.neo .neo-plaque .arc-ic[data-k] { font-size: 0 !important; }
html.neo .neo-plaque .arc-ic[data-k]::after {
  content: attr(data-k);
  font-size: 19px;
}
html.neo .neo-plaque :is(.ev-cat, .arc-name) {
  position: relative !important;
  z-index: 0;
  padding: 5px 30px 5px 10px !important;
  margin-left: -10px !important;
}
html.neo .neo-plaque :is(.ev-cat, .arc-name)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/storm/ui/ruban.webp") left center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
  mask-image: linear-gradient(90deg, #000 62%, transparent);
  opacity: 0.92;
}
html.neo .neo-plaque :is(.ev-banner, .arc-banner) { gap: 0 4px !important; }
html.neo .neo-plaque .arc-step { margin-top: 4px; }

/* ---------------------------------------------------------------------------
   6. LE MOUVEMENT, OU PAS
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.neo .btn-choice::after,
  html.neo :is(.btn-gold, .btn-primary, .btn-ghost, .joker-btn, .btn-choice, .hd-exit, #btn-back-fab, #lang-toggle, .nj-snd-btn) { transition: none !important; }
  html.neo body :is(.btn-gold, .btn-primary, .btn-ghost, .joker-btn, .btn-choice):active { transform: none !important; }
  html.neo #card-zone .btn-choice:hover::after { transform: translateY(-50%) !important; }
}

/* ---------------------------------------------------------------------------
   ACCUEIL — les tuiles d'accès portent les objets du jeu de combat
   (assets/storm/ui/accueil.webp, 7 cases de 96 px) : pièces d'or pour
   l'échoppe, coupe pour les exploits, rondin pour l'arbre, rouleau pour les
   légendes, médaille S+ pour le classement, livre pour le journal, « ? »
   pour le quizz. Le profil garde l'avatar du joueur.
   --------------------------------------------------------------------------- */
html.neo #screen-home .meta-row :is(#btn-shop, #btn-badges, #btn-arbre, #btn-pantheon, #btn-ladder, #btn-newslog, #btn-quizz) :is(svg, .mb-k, [aria-hidden="true"]:not(.news-dot):not(.tab-dot)) { display: none !important; }
html.neo #screen-home .meta-row :is(#btn-shop, #btn-badges, #btn-arbre, #btn-pantheon, #btn-ladder, #btn-newslog, #btn-quizz)::before {
  content: "";
  --s: 34px;
  width: var(--s);
  height: var(--s);
  flex: none;
  background: url("../assets/storm/ui/accueil.webp") no-repeat;
  background-size: calc(var(--s) * 7) var(--s);
  background-position: calc(var(--i, 0) * var(--s) * -1) 0;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
  transition: transform 0.15s var(--ni-appui);
}
html.neo #screen-home .meta-row .meta-btn:hover::before { transform: translateY(-2px) scale(1.06); }
html.neo #screen-home .meta-row #btn-shop     { --i: 0; }
html.neo #screen-home .meta-row #btn-badges   { --i: 1; }
html.neo #screen-home .meta-row #btn-arbre    { --i: 2; }
html.neo #screen-home .meta-row #btn-pantheon { --i: 3; }
html.neo #screen-home .meta-row #btn-ladder   { --i: 4; }
html.neo #screen-home .meta-row #btn-newslog  { --i: 5; }
html.neo #screen-home .meta-row #btn-quizz    { --i: 6; }
@media (max-width: 520px) {
  html.neo #screen-home .meta-row :is(#btn-shop, #btn-badges, #btn-arbre, #btn-pantheon, #btn-ladder, #btn-newslog, #btn-quizz)::before { --s: 30px; margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   FIN DE VIE — chaque bouton porte son sceau de laque, comme « 再 Rejoue ma vie »
   --------------------------------------------------------------------------- */
html.neo #screen-end :is(#btn-share, #btn-scroll, #btn-recap, #btn-requick, #btn-coach, #btn-replay) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
html.neo #screen-end .nic-k {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: #b3261b;
  color: #f4efe4;
  font: 700 18px/1 "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-style: normal;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  transform: rotate(-4deg);
}