/* ============================================================
   neo — les trois premières minutes
   Chargé après neo.css, sous html.neo comme lui.
   ============================================================ */

/* ------------------------------------------------------------------------
   LA VOIE D'ACADÉMIE  [29/10/2026]
   Le DOM vient de game.js, bloc « LES TROIS PREMIÈRES MINUTES » :
     #deb-accueil.deb-accueil   l'accueil d'un joueur neuf (à la place de
                                « Nouvelle voie » et de la carte d'intro)
       .deb-acc-tete            le geste : « Entrer à l'Académie », « Passer »
       .deb-acc-carte           la scène (décor + Iruka qui sort du cadre)
                                et les trois temps de la voie
     .deb-bulle                 une règle, posée à côté de ce qu'elle explique
     .deb-diplome · .deb-suite  l'écran de fin : le diplôme, la suite du jeu
   Structure + relief + mouvement : des aplats, un filet net, une ombre
   portée DURE (décalée, sans flou). Pas de verre, pas de halo, pas de
   dégradé décoratif. Le seul dégradé est le fondu du décor sous le texte,
   qui sert la lecture.
   ------------------------------------------------------------------------ */

html.neo {
  --deb-plaque: #151820;
  --deb-plaque-haut: #1d212c;
  --deb-dur: 0 5px 0 #050608;          /* l'ombre portée : un socle, pas un halo */
  --deb-sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- l'accueil d'un joueur neuf ---------- */
html.neo #screen-home.deb-on .home-actions,
html.neo #screen-home.deb-on #intro-card { display: none !important; }

html.neo .deb-accueil {
  width: 100%;
  max-width: 560px;
  margin: 6px auto 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--n-encre);
  font-family: var(--n-titre);
}
html.neo .deb-acc-tete {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
html.neo .deb-accueil .deb-go {
  width: 100%;
  min-height: 60px;
  font-size: 1.12rem !important;
  letter-spacing: 0.04em;
  animation: deb-monte 0.5s var(--deb-sortie) both;
}
html.neo .deb-acc-sous {
  margin: 2px 0 0;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--n-doux);
}
html.neo .deb-passer {
  align-self: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--n-pale);
  font: 600 0.9rem/1.2 var(--n-titre);
  text-decoration: underline;
  text-decoration-color: var(--n-filet-fort);
  text-underline-offset: 4px;
  cursor: pointer;
}
html.neo .deb-passer:hover,
html.neo .deb-passer:focus-visible { color: var(--n-encre); text-decoration-color: var(--n-orange); }

/* La carte : une scène où Iruka dépasse le haut du cadre, puis les trois temps. */
html.neo .deb-acc-carte {
  position: relative;
  margin-top: 46px;                   /* la place de la tête d'Iruka */
  border: 1px solid var(--n-filet-fort);
  border-radius: var(--n-r);
  background: var(--deb-plaque);
  box-shadow: var(--deb-dur);
  animation: deb-monte 0.6s 0.08s var(--deb-sortie) both;
}
html.neo .deb-acc-scene {
  position: relative;
  height: 168px;
  border-radius: var(--n-r) var(--n-r) 0 0;
}
html.neo .deb-acc-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  border-radius: calc(var(--n-r) - 1px) calc(var(--n-r) - 1px) 0 0;
}
/* Le fondu du bas du décor : il pose le texte, il ne décore pas. */
html.neo .deb-acc-scene::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(21, 24, 32, 0), var(--deb-plaque));
  pointer-events: none;
}
html.neo .deb-acc-perso {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 0;
  height: 230px;                       /* 168 de cadre + la tête qui dépasse */
  width: auto;
  filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
  transform-origin: 50% 100%;
  animation: deb-entre 0.7s 0.2s var(--deb-sortie) both;
}
html.neo .deb-acc-corps {
  position: relative;
  z-index: 3;
  padding: 0 18px 18px;
  margin-top: -18px;
}
html.neo .deb-acc-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-orange);
}
html.neo .deb-acc-titre {
  margin: 4px 0 12px;
  max-width: 62%;
  font: 900 1.45rem/1.12 var(--n-titre);
  color: #fff;
}
html.neo .deb-acc-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
html.neo .deb-acc-etapes li {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--n-filet);
  border-radius: 12px;
  background: var(--deb-plaque-haut);
  font-size: 0.95rem;
  line-height: 1.38;
  color: var(--n-encre);
  animation: deb-monte 0.5s calc(0.28s + var(--i) * 0.08s) var(--deb-sortie) both;
}
html.neo .deb-acc-etapes b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--n-fond);
  border: 1px solid var(--n-filet-fort);
  box-shadow: 0 3px 0 #050608;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--n-orange);
}

/* ---------- la bulle : une règle, à côté de ce qu'elle explique ---------- */
html.neo .deb-bulle {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px 10px;
  align-items: start;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 138, 31, 0.55);
  border-left: 4px solid var(--n-orange);
  border-radius: 12px;
  background: #1c1710;
  box-shadow: 0 4px 0 #050608;
  color: var(--n-encre);
  font-family: var(--n-titre);
  text-align: left;
  animation: deb-bulle 0.45s var(--deb-sortie) both;
}
html.neo .deb-b-sceau {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--n-orange);
  color: #1a0b00;
  font-size: 0.85rem;
  font-weight: 800;
}
html.neo .deb-b-txt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--n-encre);
}
html.neo .deb-b-passer {
  float: right;
  margin: 2px 0 0 10px;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--n-pale);
  font: 600 0.8rem/1.6 var(--n-titre);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
html.neo .deb-b-passer:hover,
html.neo .deb-b-passer:focus-visible { color: var(--n-encre); }
/* Dans la création, la bulle tient dans la colonne de la plaque. */
html.neo .crs-name .deb-bulle { margin: 12px var(--crs-g, 12px) 0; order: 1; }

/* ---------- l'écran de fin : le diplôme, puis la suite ---------- */
html.neo #screen-end .end-head .end-sub.deb-diplome {
  display: inline-block;
  margin: 0 0 10px !important;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--n-orange) !important;
  color: #1a0b00 !important;
  -webkit-text-fill-color: #1a0b00;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 3px 0 #7a3500;
  font: 800 0.78rem/1.2 var(--n-titre) !important;
  letter-spacing: 0.05em !important;
  max-width: none !important;
  text-transform: uppercase;
  animation: deb-monte 0.5s var(--deb-sortie) both;
}
html.neo #screen-end .end-head .deb-bulle { max-width: 560px; margin: 14px 0 4px; }
html.neo .deb-suite {
  width: 100%;
  max-width: 560px;
  margin: 18px auto 14px;
  padding: 16px 14px 14px;
  border: 1px solid var(--n-filet-fort);
  border-radius: var(--n-r);
  background: var(--deb-plaque);
  box-shadow: var(--deb-dur);
  font-family: var(--n-titre);
  text-align: left;
}
html.neo .deb-suite-t {
  margin: 0 4px 12px;
  font: 900 1.15rem/1.2 var(--n-titre);
  color: #fff;
}
html.neo .deb-suite-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
html.neo .deb-suite-l li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--n-filet);
  border-radius: 12px;
  background: var(--deb-plaque-haut);
  animation: deb-monte 0.5s calc(0.1s + var(--i) * 0.07s) var(--deb-sortie) both;
}
html.neo .deb-s-k {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--n-fond);
  border: 1px solid var(--n-filet-fort);
  box-shadow: 0 3px 0 #050608;
  color: var(--n-orange);
  font-size: 1.15rem;
}
html.neo .deb-s-c { display: grid; gap: 2px; min-width: 0; }
html.neo .deb-s-c strong { font-size: 0.98rem; font-weight: 800; color: #fff; }
html.neo .deb-s-c span { font-size: 0.86rem; line-height: 1.35; color: var(--n-doux); }
html.neo .deb-suite .deb-s-go { min-height: 44px; min-width: 76px; padding: 0 14px !important; }
html.neo .deb-suite li.ferme { opacity: 0.6; }
html.neo .deb-s-ferme { font-size: 0.78rem; color: var(--n-pale); font-style: normal; }

/* ---------- le mouvement ---------- */
@keyframes deb-monte {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes deb-entre {
  from { opacity: 0; transform: translateX(28px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes deb-bulle {
  0% { opacity: 0; transform: translateY(-8px) scale(0.98); }
  70% { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.neo .deb-accueil *, html.neo .deb-accueil,
  html.neo .deb-bulle, html.neo .deb-suite li, html.neo .deb-diplome { animation: none !important; }
}

/* ---------- grand écran ---------- */
@media (min-width: 900px) {
  html.neo .deb-accueil { max-width: 720px; }
  html.neo .deb-acc-tete { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
  html.neo .deb-accueil .deb-go { width: auto; min-width: 340px; }
  html.neo .deb-acc-sous { flex-basis: 100%; order: 2; }
  html.neo .deb-passer { order: 3; }
  html.neo .deb-acc-carte { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: 36px; }
  html.neo .deb-acc-scene { height: auto; min-height: 250px; border-radius: var(--n-r) 0 0 var(--n-r); }
  html.neo .deb-acc-decor { border-radius: calc(var(--n-r) - 1px) 0 0 calc(var(--n-r) - 1px); }
  html.neo .deb-acc-scene::after { top: 0; bottom: 0; left: auto; width: 60px; height: auto;
    background: linear-gradient(to right, rgba(21, 24, 32, 0), var(--deb-plaque)); }
  html.neo .deb-acc-perso { right: auto; left: 50%; transform: translateX(-50%); height: 290px; animation-name: deb-entre-c; }
  html.neo .deb-acc-corps { margin-top: 0; padding: 20px 20px 20px 6px; }
  html.neo .deb-acc-titre { max-width: none; }
  @keyframes deb-entre-c {
    from { opacity: 0; transform: translateX(-50%) translateY(18px); }
    to { opacity: 1; transform: translateX(-50%); }
  }
}

/* La place de l'Académie, réservée dès la page (classe deb-pre posée dans le
   <head> pour un appareil sans rien) : l'accueil ne saute plus quand game.js
   la remplit. Vide et sans réservation, elle ne prend aucune place. */
html.neo #deb-accueil:empty { display: none; }
html.neo.deb-pre #deb-accueil:empty { display: block; min-height: var(--deb-reserve, 640px); }
html.neo.deb-pre #screen-home .home-actions,
html.neo.deb-pre #screen-home #intro-card { display: none !important; }
html:not(.neo) #deb-accueil { display: none; }
html.neo.deb-pre { --deb-reserve: 654px; }
@media (min-width: 900px) { html.neo.deb-pre { --deb-reserve: 512px; } }