* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #efcfa6;
  font-family: Inter, system-ui, sans-serif;
  user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#game.pixel { image-rendering: pixelated; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1em 0.45em;
  margin: 0 0.1em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 3px;
  font: 600 0.85em Inter, system-ui, sans-serif;
  text-align: center;
}

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; color: #fff; }

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(40, 20, 5, 0.6);
  opacity: 0.85;
}

#lock-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
#lock-marker::before {
  content: '';
  position: absolute;
  left: -15px;
  top: -15px;
  width: 26px;
  height: 26px;
  border: 2px solid #ffd23f;
  box-shadow: 0 0 10px #ff8a1f, inset 0 0 6px #ff8a1f;
  transform: rotate(45deg);
  animation: lockPulse 0.8s ease-in-out infinite alternate;
}
@keyframes lockPulse {
  from { transform: rotate(45deg) scale(1); }
  to { transform: rotate(45deg) scale(0.8); }
}

#help {
  position: absolute;
  right: 16px;
  top: 10px;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.8;
}

#perf {
  position: absolute;
  left: 10px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(30, 15, 5, 0.45);
  font: 600 12px/1.4 Inter, system-ui, sans-serif;
  white-space: pre;
}

#gpu-warning {
  margin: -12px auto 22px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(170, 30, 20, 0.85);
  font-size: 14px;
  line-height: 1.45;
}

#combo {
  position: absolute;
  right: 6vw;
  top: 38%;
  font-family: Bangers, Impact, sans-serif;
  font-size: 34px;
  letter-spacing: 1px;
  color: #fff;
  -webkit-text-stroke: 1.5px #3a1a05;
  text-shadow: 0 3px 0 #3a1a05;
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s;
}
#combo.show { opacity: 1; }
#combo .n { font-size: 64px; color: #ff9a1f; margin-right: 6px; }
#combo .sub { display: block; font-size: 26px; color: #ffd23f; }
#combo.pop { animation: pop 0.25s ease-out; }
@keyframes pop {
  0% { transform: scale(1.35) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}

#toast {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(30, 15, 5, 0.6);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s;
}
#toast.show { opacity: 1; }

#damage-layer { position: absolute; inset: 0; overflow: hidden; }
.dmg {
  position: absolute;
  left: 0;
  top: 0;
  font-family: Bangers, Impact, sans-serif;
  font-size: 30px;
  color: #fff;
  -webkit-text-stroke: 1.5px #3a1a05;
  text-shadow: 0 3px 0 #3a1a05;
  white-space: nowrap;
  will-change: transform, opacity;
}
.dmg.heavy { font-size: 50px; color: #ffb02e; }
/* Onomatopée japonaise (ドン !) : gros trait noir cerné de blanc, comme dans un manga */
.dmg.kanji {
  font-family: "Yu Gothic", "Hiragino Sans", "Noto Sans JP", "MS Gothic", sans-serif;
  font-weight: 900;
  font-size: 54px;
  color: #17110c;
  -webkit-text-stroke: 6px #fff6e0;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
}
/* Très gros coup : blanc-jaune qui brille, contour épais */
.dmg.huge { color: #fff4b8; -webkit-text-stroke: 2.5px #7a2a00; text-shadow: 0 4px 0 #3a1200, 0 0 18px rgba(255, 190, 60, 0.9); }
.dmg.poof { font-size: 40px; color: #f4f1ea; }
/* Venin de Sasori : des petits chiffres verts qui tombent en continu */
.dmg.poison { font-size: 22px; color: #9be34a; -webkit-text-stroke: 1.2px #1d3a0a; text-shadow: 0 2px 0 #1d3a0a; }

.hpbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(30, 15, 5, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: none;
}
.hpbar .fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff6a13, #ffc34a);
  transition: width 0.12s;
}

/* ---------------- Écran titre / pause ---------------- */
/* Trois colonnes : les touches à gauche, le choix du ninja au centre, ses techniques décrites à droite. */
#overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: 22px 16px 32px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(40, 18, 5, 0.15), rgba(22, 10, 3, 0.72) 70%),
    linear-gradient(180deg, rgba(10, 5, 2, 0.1), rgba(10, 5, 2, 0.55));
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

/* Le menu se lit en trois écrans : accueil (le mode), le ninja, la map. Un seul est visible. */
.menu {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
.menu-head { text-align: center; }
.menu-stage[hidden] { display: none !important; } /* les regles #stage-... ci-dessous sont plus fortes */
/* Accueil : les modes à gauche, les réglages à droite */
#stage-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}
/* Choix du ninja : les touches, la ronde, les techniques */
#stage-perso {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(400px, 1.45fr) minmax(320px, 1.1fr);
  gap: 18px;
  align-items: start;
}
#stage-carte { display: grid; }

/* Les grandes cartes : un mode, une map, une mission */
.modes { display: grid; gap: 14px; }
.cartes { max-width: 720px; margin: 0 auto; width: 100%; }
.mode-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  grid-template-areas: "kanji nom" "kanji txt" "kanji lock";
  align-items: center;
  gap: 2px 16px;
  padding: 18px 22px;
  text-align: left;
  color: #fff;
  border-radius: 14px;
  border: 1px solid rgba(255, 186, 120, 0.22);
  background: linear-gradient(120deg, rgba(48, 22, 8, 0.85), rgba(20, 11, 6, 0.7));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.mode-card:hover:not(.off), .mode-card.focus:not(.off) {
  transform: translateY(-2px);
  border-color: #ff9a4a;
  background: linear-gradient(120deg, rgba(92, 42, 12, 0.9), rgba(30, 16, 8, 0.78));
}
.mode-card.off { opacity: 0.42; cursor: default; }
.mc-kanji {
  grid-area: kanji;
  align-self: center;
  justify-self: center;
  font-size: 54px;
  line-height: 1;
  color: #ff8a1f;
  text-shadow: 0 3px 0 #3a1a05;
}
.mc-nom { grid-area: nom; font: 400 34px Bangers, Impact, sans-serif; letter-spacing: 1.4px; color: #fff3e0; }
.mc-txt { grid-area: txt; font-size: 13.5px; line-height: 1.45; opacity: 0.85; }
.mc-lock { grid-area: lock; font-size: 12px; color: #ffb56b; }
.mc-lock:empty { display: none; }
.mc-lieu {
  grid-area: kanji;
  align-self: center;
  justify-self: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #ffb56b;
  opacity: 0.9;
}
/* Une map, une mission : une vignette a gauche, le texte a droite */
.carte-card { grid-template-columns: 170px 1fr; gap: 4px 18px; padding: 16px; }
.carte-card .mc-lieu {
  align-self: stretch;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 14px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 186, 120, 0.25);
  background: linear-gradient(160deg, rgba(122, 82, 44, 0.9), rgba(32, 17, 8, 0.95));
  line-height: 1.4;
}
.carte-card .mc-nom { align-self: end; }
.carte-card .mc-txt { align-self: start; }
/* Une mission : pas de resume, juste l arc et le nom. Le nom se centre sur toute la hauteur. */
.carte-card.sans-texte .mc-nom { align-self: center; grid-row: 1 / -1; }

/* Barre du bas : revenir, valider. Elle COLLE au bas de l ecran : la colonne des techniques est
   plus haute que la fenetre, et il ne faut pas avoir a defiler pour valider son ninja. */
.stage-nav {
  position: sticky;
  bottom: 10px;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(14, 7, 3, 0.82);
  border: 1px solid rgba(255, 186, 120, 0.16);
  backdrop-filter: blur(6px);
  cursor: default;
}
.stage-nav[hidden] { display: none; }
.stage-nav button {
  font: 400 22px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  padding: 6px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255, 186, 120, 0.3);
  background: rgba(40, 20, 8, 0.8);
  color: #ffd9b3;
  cursor: pointer;
}
.stage-nav button:hover { background: rgba(255, 138, 26, 0.3); color: #fff; }
#nav-next { background: #ff7a1a; border-color: #ff9a4a; color: #fff; box-shadow: 0 4px 0 #a24808; }
#nav-next:hover { background: #ff8c33; }
#nav-note { font-size: 13px; color: #ffc89a; opacity: 0.9; }
#party-list { margin-top: 6px; font-size: 12.5px; opacity: 0.85; }
#party-list:empty { display: none; }

.kanji {
  font-size: 42px;
  line-height: 1;
  color: #ff8a1f;
  text-shadow: 0 3px 0 #3a1a05;
}
h1 {
  margin: 4px 0 0;
  font-family: Bangers, Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: 2px;
  -webkit-text-stroke: 2px #3a1a05;
  text-shadow: 0 5px 0 #3a1a05;
}
h1 .h1-num { color: #ff8a1f; }
.sub { margin: 8px 0 16px; font-size: 15px; opacity: 0.85; letter-spacing: 4px; text-transform: uppercase; }

#play {
  font: 400 30px Bangers, Impact, sans-serif;
  letter-spacing: 1.5px;
  padding: 10px 40px;
  border: none;
  border-radius: 12px;
  background: #ff7a1a;
  color: #fff;
  box-shadow: 0 5px 0 #a24808, 0 0 30px rgba(255, 122, 26, 0.35);
  cursor: pointer;
  transition: transform 0.1s, background 0.12s;
}
#play:hover { background: #ff8c33; transform: translateY(-1px); }
#play:active { transform: translateY(3px); box-shadow: 0 2px 0 #a24808; }

/* Les trois panneaux */
.menu-col {
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: rgba(20, 11, 6, 0.66);
  border: 1px solid rgba(255, 186, 120, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  cursor: default;
  text-align: left;
}
.menu-col h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 186, 120, 0.18);
  font: 400 24px Bangers, Impact, sans-serif;
  letter-spacing: 1.2px;
  color: #ffb56b;
}

/* Touches */
.controls {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
  font-size: 13.5px;
}
.controls li { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; }
.controls li .k { justify-self: end; white-space: nowrap; }
.controls li .k kbd { font-size: 11.5px; }
.controls li.sep { display: block; height: 1px; margin: 5px 0; background: rgba(255, 186, 120, 0.14); }
.tip { margin-top: 18px; font-size: 14px; color: #ffd0b8; }

/* Réglages, sous le ninja */
.options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 186, 120, 0.16);
  display: grid;
  gap: 4px;
}
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 14px;
  cursor: pointer;
}
.opt > span:first-child { flex: 0 0 96px; opacity: 0.85; }
.opt small { display: block; font-size: 12px; opacity: 0.75; }
.opt input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ff7a1a; }
.opt input[type="range"] { flex: 1; min-width: 0; accent-color: #ff7a1a; }
.opt b { min-width: 2.2em; text-align: right; }

/* Déblocages : le bouton « tout débloquer » et son compteur */
.opt-unlock button {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid rgba(255, 138, 26, 0.5);
  border-radius: 8px;
  background: rgba(255, 138, 26, 0.14);
  color: #ffe2c2;
  font: inherit;
  cursor: pointer;
}
.opt-unlock button:hover:not(:disabled) { background: rgba(255, 138, 26, 0.26); }
.opt-unlock button:disabled { opacity: 0.4; cursor: default; }
.opt-unlock b { min-width: 3.4em; opacity: 0.8; }

/* ---------------- Défilé de sélection du personnage ---------------- */
/* Toute la troupe est alignée dans le canvas 3D ; nom, passif et pastilles dessous. */
#charselect { margin: 0; }
/* Filtres de la ronde (Tous, Konoha, Akatsuki…) : une rangée d'icônes au-dessus des ninjas */
.cs-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 6px; }
.cs-filter {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 186, 120, 0.22); background: rgba(255, 255, 255, 0.05); color: #f0e2d2;
  font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cs-filter svg { width: 18px; height: 18px; flex: none; }
.cs-filter:hover, .cs-filter:focus-visible { background: rgba(255, 138, 26, 0.2); border-color: rgba(255, 170, 90, 0.6); outline: none; }
.cs-filter.on { background: #ff7a1a; border-color: #ff9a4a; color: #fff; box-shadow: 0 2px 0 #a24808; }
.cs-dot[hidden] { display: none; }
.cs-stage { position: relative; }
.cs-canvas {
  width: 100%;
  height: 330px;
  display: block;
}
.cs-canvas { cursor: grab; touch-action: pan-y; user-select: none; } /* clic : choisir un ninja ; glisser : faire tourner la ronde */
.cs-canvas.dragging { cursor: grabbing; }
.cs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 72px;
  border: 0;
  border-radius: 10px;
  background: rgba(20, 10, 4, 0.4);
  color: #ffd9a8;
  font: 400 34px Bangers, Impact, sans-serif;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.12s, background 0.12s;
}
.cs-arrow:hover, .cs-arrow:focus-visible { opacity: 1; background: rgba(255, 138, 26, 0.4); outline: none; }
.cs-prev { left: 0; }
.cs-next { right: 0; }

.cs-name {
  margin-top: -18px;
  text-align: center;
  font: 400 46px Bangers, Impact, sans-serif;
  letter-spacing: 2px;
  color: #fff3e0;
  text-shadow: 0 3px 0 #3a1a05, 0 0 22px rgba(255, 138, 26, 0.5);
}
/* Ninja pas encore débloqué : son nom reste muet et l'indice explique comment l'obtenir */
.cs-name.verrou { color: #9fb0c4; text-shadow: 0 3px 0 #10151d, 0 0 18px rgba(120, 160, 200, 0.35); }
.cs-passive.verrou { color: #a8bdd4; font-style: italic; }
.cs-dot.lock { background: rgba(160, 190, 220, 0.16); box-shadow: inset 0 0 0 1px rgba(160, 190, 220, 0.4); }
.cs-passive:empty { display: none; }
.cs-passive {
  margin: 2px auto 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  color: #ffe2c2;
  opacity: 0.9;
}
.cs-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cs-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.cs-dot:hover { transform: scale(1.35); }
.cs-dot.on { background: #ff8a1a; transform: scale(1.4); }

/* Techniques, décrites pour le joueur */
#cs-techs { display: grid; gap: 9px; }
.cs-move {
  padding: 10px 12px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border-left: 3px solid rgba(255, 138, 26, 0.55);
}
.cs-move:nth-child(4) { border-left-color: #ff4a3a; }  /* ultime */
.cs-move:nth-child(5) { border-left-color: #ffd24a; background: rgba(255, 210, 74, 0.06); } /* éveil */
.cs-move.cs-extra { border-left-color: #d0a96b; }
.cs-extra .cs-move-head kbd { width: auto; padding: 1px 5px; font-size: 10.5px; }
.cs-move-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
}
.cs-move-head kbd { justify-self: center; width: 24px; padding: 1px 0; font-size: 12px; }
.cs-move-name { font: 400 20px Bangers, Impact, sans-serif; letter-spacing: 0.8px; color: #fff3e0; }
.cs-cost { font-size: 12px; opacity: 0.7; white-space: nowrap; }
.cs-cost.chakra { color: #6ec8ff; opacity: 0.95; }
/* `pre-line` : les descriptions listent les cas un par ligne, les retours doivent tenir */
.cs-desc { margin: 5px 0 0 36px; font-size: 13px; line-height: 1.45; color: #f0e2d2; opacity: 0.88; white-space: pre-line; }

/* Écran moins large : le ninja et ses techniques côte à côte, les touches dessous */
@media (max-width: 1100px) {
  .menu {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "head head"
      "char techs"
      "keys keys";
  }
  .controls { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 20px; }
  .controls li.sep { display: none; }
}
@media (max-width: 760px) {
  .menu { grid-template-columns: 1fr; grid-template-areas: "head" "char" "techs" "keys"; }
  .cs-canvas { height: 240px; }
  .cs-desc { margin-left: 0; }
}

#mode-hud {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(30, 15, 5, 0.55);
  font: 400 20px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #3a1a05;
  white-space: nowrap;
}
#mode-hud b { font-weight: 400; color: #ffb02e; }

/* ---------------- Combat de boss : barre de vie et incantation façon raid ---------------- */
#boss-hud {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: min(620px, 74vw);
  text-align: center;
  pointer-events: none;
}
#boss-hud .b-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 3px;
  font: 400 22px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #3a1a05, 0 0 12px rgba(0, 0, 0, 0.6);
}
#boss-hud .b-phase { font-size: 15px; color: #ffb02e; }
#boss-hud .b-bar {
  position: relative;
  height: 16px;
  border-radius: 4px;
  background: rgba(20, 8, 4, 0.7);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 180, 0.25), 0 4px 14px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#boss-hud .b-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ff9a3a, #d4321a 60%, #7d1408);
  transition: width 0.18s linear;
}
#boss-hud .b-bar i { /* paliers de phase */
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.55);
}
#boss-hud .b-poise {
  height: 5px;
  margin-top: 3px;
  border-radius: 3px;
  background: rgba(20, 8, 4, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 180, 0.2);
  overflow: hidden;
}
#boss-hud .b-poise-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #e8dcc0, #9a8f76);
  transition: width 0.12s linear;
}
#boss-hud .b-poise.broken .b-poise-fill { background: #ff6a3a; }

#boss-hud .b-cast {
  margin: 6px auto 0;
  width: 66%;
}
#boss-hud .b-cast-name {
  display: block;
  font: 400 19px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  color: #ffe0a8;
  text-shadow: 0 2px 0 #3a1a05;
}
#boss-hud .b-cast-bar {
  height: 9px;
  border-radius: 3px;
  background: rgba(20, 8, 4, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 180, 0.3);
  overflow: hidden;
}
#boss-hud .b-cast-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #ffe08a, #ff9a1a);
}
#boss-hud .b-timer {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.5px;
  opacity: 0.7;
}
#boss-hud .b-timer.urgent { color: #ff6a4a; opacity: 1; }
.hpbar.boss { width: 140px; height: 12px; }
.hpbar.boss .fill { background: linear-gradient(90deg, #6a1a8a, #d0304a); }
.hpbar.enemy { width: 56px; }
.hpbar.enemy .fill { background: linear-gradient(90deg, #8a1010, #e03a2a); }

/* ---------------- Barres PV / chakra ---------------- */
.bangers {
  font-family: Bangers, Impact, sans-serif;
}
#stats {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(300px, 42vw);
  display: grid;
  gap: 8px;
}
.stat .s-head {
  display: flex;
  justify-content: space-between;
  font: 400 19px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #3a1a05;
}
.s-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(30, 15, 5, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.s-bar > div { position: absolute; left: 0; top: 0; bottom: 0; }
.hp .s-lag { background: #ffe08a; }
.hp .s-fill { background: linear-gradient(90deg, #c81e16, #ff6a3d); }
.chakra .s-fill { background: linear-gradient(90deg, #1f6fff, #5ad2ff); }
.chakra .s-preview { background: rgba(255, 255, 255, 0.8); animation: blink 0.45s infinite alternate; }
@keyframes blink { to { opacity: 0.35; } }
#stats.low .hp .s-bar { animation: lowhp 0.6s infinite alternate; }
@keyframes lowhp { to { box-shadow: 0 0 12px 2px #ff2a1a; } }
#stats.nochakra .chakra { animation: shake 0.35s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ---------------- Techniques ---------------- */
#skills {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 10px;
}
.skill {
  width: 78px;
  padding: 8px 4px 6px;
  border-radius: 10px;
  background: rgba(30, 15, 5, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.skill kbd { font-size: 15px; }
.skill .s-name { margin-top: 4px; font: 400 17px Bangers, Impact, sans-serif; letter-spacing: 0.5px; }
.skill .s-cost { font-size: 11px; opacity: 0.8; }
.skill.off { opacity: 0.45; filter: grayscale(1); }
.skill.active { border-color: #5ad2ff; box-shadow: 0 0 16px #3aa0ff; }

/* ---------------- Jauge de charge ---------------- */
#gauge {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.12s;
}
#gauge.show { opacity: 1; }
.g-label {
  margin-bottom: 6px;
  font: 400 22px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  -webkit-text-stroke: 1px #3a1a05;
  text-shadow: 0 2px 0 #3a1a05;
}
.g-segs { display: none; gap: 6px; justify-content: center; }
#gauge.segs .g-segs { display: flex; }
.g-seg {
  position: relative;
  width: 46px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(30, 15, 5, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.g-seg .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff8a1f, #ffd23f); }
.g-seg.locked { border-color: #ff4a3a; background: rgba(120, 20, 10, 0.6); }
.g-seg.locked .fill { background: rgba(255, 74, 58, 0.45); }
.g-bar {
  display: none;
  position: relative;
  width: 260px;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(30, 15, 5, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
#gauge.bar .g-bar { display: block; }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #8aa0b8; }
#gauge.ready .g-fill { background: linear-gradient(90deg, #1f6fff, #8fe0ff); }
#gauge.starved .g-fill { background: #ff4a3a; }
.g-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; }

/* ---------------- Roue de sélection (les autres Pains) ---------------- */
#wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  pointer-events: none;
}
#wheel .w-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: rgba(20, 10, 25, 0.65);
  border: 1px solid rgba(185, 163, 214, 0.5);
}
#wheel .w-pick { /* aiguille qui suit la souris */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 74px;
  margin: -74px 0 0 -2px;
  border-radius: 2px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #d3c8e8, rgba(185, 163, 214, 0.1));
}
.w-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124px;
  margin: -34px 0 0 -62px;
  padding: 6px 4px;
  border-radius: 10px;
  text-align: center;
  background: rgba(24, 12, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}
.w-item .w-name { font: 400 17px Bangers, Impact, sans-serif; letter-spacing: 0.5px; }
.w-item .w-desc { font-size: 10px; opacity: 0.75; }
.w-item.sel { border-color: #b9a3d6; box-shadow: 0 0 18px rgba(150, 110, 220, 0.85); transform: scale(1.12); }
.w-item.locked { opacity: 0.35; filter: grayscale(1); }
.w-item.locked .w-desc { text-transform: uppercase; }

/* ---------------- Annonces et effets d'écran ---------------- */
#callout {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  font: 400 clamp(36px, 6vw, 64px) Bangers, Impact, sans-serif;
  letter-spacing: 2px;
  color: #ffb02e;
  -webkit-text-stroke: 2px #3a1a05;
  text-shadow: 0 5px 0 #3a1a05;
  white-space: nowrap;
  opacity: 0;
}
#callout.pop { animation: callout 1.3s ease-out forwards; }
@keyframes callout {
  0% { opacity: 0; transform: translateX(-50%) scale(1.8); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); }
  75% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

#vignette-hurt, #vignette-chakra, #vignette-invuln { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* Fenêtre d'invulnérabilité (esquive…) à la 1re personne : un liseré blanc bleuté qui pulse */
#vignette-invuln { box-shadow: inset 0 0 90px 18px rgba(170, 225, 255, 0.75); }
#vignette-invuln.on { opacity: 1; animation: invulnPulse 0.12s infinite alternate; }
@keyframes invulnPulse { from { opacity: 0.75; } to { opacity: 1; } }
#vignette-hurt { box-shadow: inset 0 0 160px 40px rgba(220, 20, 10, 0.85); }
#vignette-hurt.flash { animation: hurt 0.5s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
#vignette-chakra { box-shadow: inset 0 0 180px 50px rgba(40, 140, 255, 0.6); transition: opacity 0.25s; }
#vignette-chakra.on { opacity: 1; animation: chakraPulse 0.35s infinite alternate; }
@keyframes chakraPulse { to { box-shadow: inset 0 0 220px 70px rgba(80, 170, 255, 0.75); } }

#ko {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(60, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.4s;
}
#ko.show { opacity: 1; }
#ko .ko-title {
  font: 400 110px Bangers, Impact, sans-serif;
  color: #ff4a3a;
  -webkit-text-stroke: 3px #2a0a05;
  text-shadow: 0 6px 0 #2a0a05;
}
#ko p { margin: 0; font-size: 18px; }

/* Mission accomplie : même bandeau que le K.O., en or */
#victoire {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(255, 196, 80, 0.22), rgba(20, 14, 0, 0.55));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
#victoire.show { opacity: 1; }
#victoire .v-title {
  font: 400 96px Bangers, Impact, sans-serif;
  color: #ffd766;
  -webkit-text-stroke: 3px #3a2a05;
  text-shadow: 0 6px 0 #3a2a05, 0 0 34px rgba(255, 210, 110, 0.55);
}
#victoire p { margin: 6px 0 0; font-size: 18px; color: #ffeec4; }

.dmg.clone { font-size: 22px; color: #ffd9a8; }
.dmg.warn { font-size: 50px; color: #ff3a2a; }
.dmg.rasengan { font-size: 62px; color: #7fd0ff; }
.dmg.perilous { font-size: 76px; color: #ff2a1a; -webkit-text-stroke: 2px #2a0000; font-family: system-ui, sans-serif; font-weight: 900; }
.dmg.parry { font-size: 36px; color: #ffe27a; }
.dmg.break { font-size: 36px; color: #ff5a3a; }
.dmg.stun { font-size: 30px; color: #ffe27a; }
.dmg.clone-hurt { font-size: 20px; color: #ff9a8a; }

.hpbar.clone { width: 44px; height: 6px; }
.hpbar.clone .fill { background: linear-gradient(90deg, #2fbf4a, #9be86a); }

/* ---------------- Temps de recharge ---------------- */
.skill { position: relative; overflow: hidden; }
.skill { width: 80px; }
.skill .s-name { font-size: 15px; white-space: nowrap; }
.skill.long-name .s-name { font-size: 13px; }
.skill .s-cost.chakra { color: #8fd4ff; }
.skill.ult { border-color: rgba(255, 170, 60, 0.6); }
.skill.skill-active { border-color: var(--active, #ff9a1f); box-shadow: 0 0 16px var(--active, #ff9a1f); }
.skill.skill-active .cd-text { color: var(--active, #ffb347); }

.vignette { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.vignette.on { opacity: 1; }
#vignette-kyubi { box-shadow: inset 0 0 150px 45px rgba(220, 30, 10, 0.55), inset 0 0 14px 4px rgba(255, 60, 20, 0.8); }
#vignette-susanoo { box-shadow: inset 0 0 160px 50px rgba(130, 70, 255, 0.45); }
#vignette-mangekyo { box-shadow: inset 0 0 220px 90px rgba(90, 0, 10, 0.8); transition: opacity 0.15s; }
.dmg.raiton { font-size: 40px; color: #bfe6ff; }
.dmg.fire { font-size: 40px; color: #ffb347; }
.dmg.fire-tick { font-size: 20px; color: #ff9a4a; }
.dmg.amaterasu { font-size: 24px; color: #b58cff; -webkit-text-stroke: 1.5px #000; }
.dmg.sakura { font-size: 52px; color: #ff8fc0; -webkit-text-stroke: 1.5px #5a1030; }
.dmg.heal { font-size: 26px; color: #6dff9a; }
#vignette-heal { box-shadow: inset 0 0 170px 45px rgba(60, 220, 110, 0.45); }
#vignette-byakugo { box-shadow: inset 0 0 160px 40px rgba(190, 70, 255, 0.4); }
#vignette-crows { box-shadow: inset 0 0 220px 90px rgba(5, 3, 8, 0.8); transition: opacity 0.15s; }
#vignette-kamui { box-shadow: inset 0 0 170px 55px rgba(120, 80, 190, 0.45); transition: opacity 0.12s; }
/* Tsukuyomi : monde rouge et noir */
#game { transition: filter 0.4s; }
#game.tsukuyomi { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(-45deg) contrast(1.3) brightness(0.8); }
#game.analysis { filter: saturate(0.35) contrast(1.15) brightness(0.95); }
#vignette-sharingan { box-shadow: inset 0 0 150px 35px rgba(200, 10, 20, 0.35), inset 0 0 10px 3px rgba(255, 40, 40, 0.6); }
/* Dans un miroir de glace : le givre gagne les bords de l'écran */
#vignette-glace {
  box-shadow: inset 0 0 170px 55px rgba(150, 220, 255, 0.5), inset 0 0 20px 6px rgba(230, 250, 255, 0.55);
  transition: opacity 0.18s;
}
/* Losange du Byakugô en haut de l'écran */
#vignette-byakugo::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  transform: rotate(45deg);
  background: #b04ae0;
  border-radius: 2px;
  box-shadow: 0 0 12px 3px rgba(212, 92, 255, 0.8);
}
.opt select {
  flex: 1;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 600 14px Inter, system-ui, sans-serif;
}
.opt select option { color: #000; }

#game { transition: filter 0.8s; }
#game.sage-blur { filter: blur(6px) saturate(1.3); }

#vignette-sage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
  box-shadow: inset 0 0 130px 40px rgba(255, 120, 0, 0.5), inset 0 0 18px 6px rgba(255, 170, 40, 0.85);
}
#vignette-sage.on { opacity: 1; }
.skill.arming { border-color: #fff; animation: blink 0.12s infinite alternate; }

.skill[hidden] { display: none; } /* la gourde ninja, hors mission */
.skill[data-skill="gourde"] .s-cost { color: #ffb35a; }

.skill .cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(10, 5, 0, 0.7);
  pointer-events: none;
}
.skill .cd-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 30px Bangers, Impact, sans-serif;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
.skill.denied { animation: shake 0.35s; border-color: #ff4a3a; }

/* ---------------- Arme de jet équipée ---------------- */
.skill .s-icon svg { display: block; width: 28px; height: 28px; margin: 3px auto 0; }
.skill.swap { animation: pop 0.25s ease-out; }
.dmg.target { font-size: 26px; color: #ffb02e; }

/* ---------------- Multijoueur ---------------- */
.nametag {
  position: absolute;
  left: 0;
  top: 0;
  font: 400 15px Bangers, Impact, sans-serif;
  letter-spacing: 0.5px;
  color: #ffd9a0;
  -webkit-text-stroke: 1px #3a1a05;
  text-shadow: 0 2px 0 #3a1a05;
  white-space: nowrap;
  pointer-events: none;
}
.opt.mp { display: flex; align-items: center; gap: 8px; }
.opt.mp input {
  width: 96px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(20, 10, 4, 0.6);
  color: #fff;
  font: 400 18px Bangers, Impact, sans-serif;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
}
.opt.mp button {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 138, 31, 0.25);
  color: #fff;
  font: 400 16px Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}
.opt.mp button:hover { background: rgba(255, 138, 31, 0.45); }
#mp-status { margin-top: 4px; font-size: 12px; opacity: 0.8; }
#pad-status { margin: -2px 0 2px; font-size: 12px; opacity: 0.75; }
/* Boutons d'essai des boss, en bas à gauche du menu */
#dev-tests {
  position: fixed;
  left: 18px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 186, 120, 0.25);
  border-radius: 10px;
  background: rgba(18, 11, 7, 0.96);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  z-index: 8;
}
#dev-tests[hidden] { display: none; } /* on ne les montre que sur l ecran d accueil */
#dev-tests span { flex-basis: 100%; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
#dev-tests small { font-size: 11px; opacity: 0.6; }
/* la colonne des touches s'arrête au-dessus du panneau d'essai */

#dev-tests button {
  min-width: 92px;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  color: #ffe9d2;
  background: rgba(70, 40, 24, 0.85);
  border: 1px solid rgba(255, 186, 120, 0.35);
  border-radius: 8px;
  cursor: pointer;
}
#dev-tests button:hover { background: rgba(110, 60, 30, 0.95); }
/* Pastille « mode test » pendant la partie */
#godmode {
  position: absolute;
  left: 16px;
  bottom: 96px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #ffd9a0;
  background: rgba(30, 16, 8, 0.6);
  border: 1px solid rgba(255, 186, 120, 0.4);
  border-radius: 999px;
}
#pad-status.ok { color: #8fe0a0; opacity: 1; }
/* Manette : la carte de bonus visée */
.bp-card.focus { transform: translateY(-6px) scale(1.05); }
.bp-card.focus .bp-face { box-shadow: 0 0 0 3px var(--rar), 0 0 30px -2px var(--rar); }
/* Libellés de manette dans le HUD (L1+✕…) : un peu plus étroits */
#skills.pad kbd { font-size: 10px; letter-spacing: -0.02em; }
#mp-status.ok { color: #8fe0a0; opacity: 1; }
#mp-status.error { color: #ff8a7a; opacity: 1; }

/* Amaterasu payé en PV : l'écran bat au rouge sang */
#vignette-blood { box-shadow: inset 0 0 190px 65px rgba(190, 10, 10, 0.8); }
#vignette-blood.on { animation: bloodPulse 0.6s ease-in-out infinite alternate; }
@keyframes bloodPulse {
  from { box-shadow: inset 0 0 150px 45px rgba(170, 8, 8, 0.65); }
  to { box-shadow: inset 0 0 240px 95px rgba(230, 16, 16, 0.95); }
}

/* Jauge d'armement (src/windupHud.js) : un cercle qui se remplit sous la barre de vie ; plein =
   le coup touche. Orange = parable, rouge = imparable. Le contour sombre reste lisible partout. */
.windup-ring {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: none; pointer-events: none;
  background: rgba(15, 12, 10, 0.55);
  box-shadow: 0 0 0 2px rgba(15, 12, 10, 0.85);
  --c: #ffae1f;
}
.windup-ring.perilous { --c: #ff2a2a; }
.windup-ring .windup-fill {
  position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--f) * 360deg), transparent 0);
}
.windup-ring.full { --c: #ffffff; box-shadow: 0 0 0 2px rgba(15, 12, 10, 0.85), 0 0 14px 5px rgba(255, 255, 255, 0.85); }
.windup-ring.perilous.full { box-shadow: 0 0 0 2px rgba(15, 12, 10, 0.85), 0 0 14px 5px rgba(255, 60, 40, 0.95); }

/* Choix du bonus de fin de manche (src/bonus.js) : deux cartes, touches 1 et 2.
   La couleur de la carte donne sa rareté (commun, rare, épique). */
.bonus-picker {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 20px 20px; border-radius: 14px;
  background: rgba(14, 12, 18, 0.82); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto; z-index: 30; max-width: calc(100vw - 32px); /* cliquable : le curseur est libre pendant le choix */
}
.bonus-picker[hidden] { display: none; }
.bp-title { font-family: 'Bangers', sans-serif; font-size: 30px; letter-spacing: 1px; color: #ffcf6a; }
.bp-sub { font-size: 14px; opacity: 0.85; }
.bp-sub kbd, .bp-card kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 5px;
  background: #f2f2f2; color: #141414; font-weight: 700; text-align: center;
}
.bp-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.bp-face {
  width: 220px; padding: 12px 14px 14px; border-radius: 12px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 2px solid var(--rar); box-shadow: 0 0 18px -4px var(--rar);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.bp-rar { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--rar); }
.bp-name { font-size: 20px; font-weight: 700; }
.bp-text { font-size: 15px; line-height: 1.3; opacity: 0.92; }
.bp-card { cursor: pointer; perspective: 900px; transition: transform 0.12s; }
.bp-card:hover { transform: translateY(-3px) scale(1.03); }
.bp-card:hover .bp-face { box-shadow: 0 0 26px -2px var(--rar); }

/* Arrivée du choix de bonus : les cartes sont distribuées face cachée (elles glissent depuis le bas en
   pivotant), puis se retournent l'une après l'autre ; une carte rare ou épique jette un éclat en se révélant.
   Tant qu'elles ne sont pas retournées (ARM dans src/bonus.js), rien n'est cliquable : un clic de combat ne choisit rien. */
.bonus-picker:not([hidden]) { animation: bp-pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.bonus-picker .bp-go { transition: opacity 0.25s; }
.bonus-picker.arming .bp-go { opacity: 0; }
.bonus-picker.arming .bp-card { pointer-events: none; }
.bp-card { animation: bp-deal 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards; animation-delay: calc(0.12s + var(--i) * 0.14s); }
.bp-inner { position: relative; transform-style: preserve-3d; animation: bp-flip 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) backwards; animation-delay: calc(0.62s + var(--i) * 0.12s); }
.bp-face, .bp-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp-back {
  position: absolute; inset: 0; border-radius: 12px; transform: rotateY(180deg);
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #3a1a08 0 10px, #4a2410 10px 20px);
  border: 2px solid #ff8a1a; box-shadow: inset 0 0 0 4px rgba(255, 138, 26, 0.25);
}
.bp-back span { font-size: 54px; color: #ff8a1a; text-shadow: 0 3px 0 #1d0c03; }
.bp-rare .bp-face, .bp-epique .bp-face { animation: bp-glint 0.7s ease-out backwards; animation-delay: calc(0.95s + var(--i) * 0.12s); }
@keyframes bp-pop { from { opacity: 0; transform: translateX(-50%) scale(0.8); } }
@keyframes bp-deal { from { opacity: 0; transform: translateY(70px) rotate(calc(-10deg + var(--i) * 20deg)) scale(0.8); } }
@keyframes bp-flip { from { transform: rotateY(180deg); } }
@keyframes bp-glint { from { box-shadow: 0 0 60px 14px var(--rar); } }
@media (prefers-reduced-motion: reduce) {
  .bonus-picker:not([hidden]), .bp-card, .bp-inner, .bp-face { animation: none; }
}

/* ---------------- Dialogue d'avant-combat (src/dialogue.js) ---------------- */
.dlg {
  position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%);
  width: min(780px, calc(100vw - 32px));
  display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: stretch;
  padding: 12px 18px 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 10, 6, 0.9), rgba(10, 6, 4, 0.94));
  border: 2px solid rgba(255, 170, 90, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 25; pointer-events: none;
}
.dlg[hidden] { display: none; }
.dlg.dlg-in { animation: dlg-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
@keyframes dlg-in { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.96); } }
.dlg-portrait {
  width: 150px; height: 150px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3a4a66, #141820 75%);
  border: 2px solid rgba(255, 170, 90, 0.45);
}
.dlg-portrait canvas { width: 100%; height: 100%; display: block; }
.dlg-body { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; min-width: 0; }
.dlg-name { font: 400 26px Bangers, Impact, sans-serif; letter-spacing: 1.2px; color: #ffb56b; text-shadow: 0 2px 0 #1d0c03; }
.dlg-text { margin: 0; font: 500 18px/1.5 Inter, system-ui, sans-serif; color: #fff4e6; min-height: 3em; }
.dlg-next { position: absolute; right: 2px; bottom: 0; color: #ffb56b; opacity: 0; font-size: 14px; }
.dlg-next.on { opacity: 1; animation: dlg-next 0.7s ease-in-out infinite alternate; }
@keyframes dlg-next { to { transform: translateY(4px); } }
@media (max-width: 600px) {
  .dlg { grid-template-columns: 96px 1fr; bottom: 110px; }
  .dlg-portrait { width: 96px; height: 96px; }
  .dlg-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .dlg.dlg-in, .dlg-next.on { animation: none; } }

/* Dégâts d'insectes (Shino) */
.dmg.bug { font-size: 22px; color: #b8d24a; }

/* ---------------------------------------------------------------------------
   Menu « Touches » (touchesMenu.js) : une fenêtre par-dessus l'accueil
   --------------------------------------------------------------------------- */
#touches-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 4, 2, 0.72);
  color: #fff;
}
#touches-panel[hidden] { display: none; }
.tp-boite {
  width: min(620px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2a1a10, #170d07);
  border: 1px solid rgba(255, 154, 74, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.tp-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tp-tete h2 { margin: 0; font-family: Bangers, Impact, sans-serif; letter-spacing: 1px; font-size: 28px; }
.tp-onglets { display: flex; gap: 6px; }
.tp-onglets button, .tp-pied button, .tp-ligne button {
  font: inherit;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 12px;
}
.tp-onglets button.actif { background: #ff7a1a; border-color: #ff9a4a; }
.tp-aide { margin: 0; font-size: 13px; opacity: 0.8; min-height: 2.6em; }
.tp-liste { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.tp-liste h3 { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; }
.tp-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 8px; }
.tp-ligne:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.tp-ligne span { flex: 1; min-width: 0; }
.tp-ligne small { display: block; font-size: 11px; opacity: 0.55; }
.tp-ligne button { min-width: 120px; font-weight: 700; }
.tp-ligne button:hover { border-color: #ff9a4a; }
.tp-ligne button.attente { background: #ff7a1a; border-color: #ffb37a; animation: tp-clignote 0.8s infinite alternate; }
@keyframes tp-clignote { from { opacity: 1; } to { opacity: 0.6; } }
.tp-pied { display: flex; justify-content: space-between; gap: 10px; }
.tp-pied #tp-fermer { background: #ff7a1a; border-color: #ff9a4a; }
@media (max-width: 480px) { .tp-ligne button { min-width: 92px; } }

/* Effets d'écran discrets (ecran.js) : lignes de vitesse et halo d'éveil générique */
#lignes-vitesse { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#vignette-eveil { position: absolute; inset: 0; opacity: 0; pointer-events: none; --eveil: #ffd27a;
  background: radial-gradient(ellipse at center, transparent 58%, color-mix(in srgb, var(--eveil) 35%, transparent) 100%);
  box-shadow: inset 0 0 70px 6px color-mix(in srgb, var(--eveil) 55%, transparent); }

/* Menus et HUD animés */
/* Chaque étape du menu entre en glissant ; ses colonnes arrivent l'une après l'autre */
.menu-stage:not([hidden]) > * { animation: etapeEntre 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.menu-stage:not([hidden]) > *:nth-child(2) { animation-delay: 0.06s; }
.menu-stage:not([hidden]) > *:nth-child(3) { animation-delay: 0.12s; }
@keyframes etapeEntre { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
/* Les cartes : un reflet qui les balaie au survol, le kanji qui se soulève */
.mode-card { position: relative; overflow: hidden; }
.mode-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 220, 170, 0.16) 50%, transparent 65%);
  transform: translateX(-110%);
}
.mode-card:hover:not(.off)::after, .mode-card.focus:not(.off)::after { transform: translateX(110%); transition: transform 0.6s ease-out; }
.mode-card:hover:not(.off), .mode-card.focus:not(.off) { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 140, 50, 0.18); }
.mode-card .mc-kanji { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mode-card:hover:not(.off) .mc-kanji, .mode-card.focus:not(.off) .mc-kanji { transform: scale(1.12) rotate(-4deg); }
.mode-card:active:not(.off) { transform: translateY(0) scale(0.99); }
/* Le nom du ninja choisi tombe en place */
.cs-name { animation: nomPose 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes nomPose { from { opacity: 0; transform: translateY(-10px) scale(1.15); } to { opacity: 1; transform: none; } }
/* Une technique redevient disponible : la case s'illumine et bondit */
.skill.pret { animation: pret 0.45s ease-out; }
@keyframes pret {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 120, 0.9); border-color: #ffe0a0; }
  35% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255, 210, 120, 0.35), 0 0 18px rgba(255, 190, 90, 0.7); border-color: #ffe0a0; }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 210, 120, 0); }
}

/* Le conseil du ninja choisi (principe et astuce), sous « Tout débloquer » */
.cs-conseil { margin: 10px 4px 0; padding: 10px 14px; border-radius: 10px; border-left: 3px solid #ff9a4a;
  background: rgba(20, 11, 6, 0.55); color: #f3e6d8; font-size: 14px; line-height: 1.45; }
.cs-conseil:empty { display: none; }

/* --- QTE de Gai : la touche à lancer, sous le viseur, avec l'anneau du temps qui reste --- */
#qte-gai {
  position: fixed; left: 50%; top: calc(50% + 70px); width: 96px; height: 96px;
  transform: translate(-50%, 0) scale(0.6); opacity: 0; pointer-events: none; z-index: 40;
  display: grid; place-items: center; transition: opacity .12s, transform .12s;
}
#qte-gai.on { opacity: 1; transform: translate(-50%, 0) scale(1); animation: qte-pop .22s ease-out; }
#qte-gai svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#qte-gai .fond { fill: rgba(12, 20, 12, .72); stroke: rgba(255, 255, 255, .18); stroke-width: 6; }
#qte-gai .temps { fill: none; stroke: #6dff8a; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px #6dff8a); }
#qte-gai .touche {
  position: relative; font: 900 34px/1 "Segoe UI", Arial, sans-serif; color: #fff; background: none; border: 0;
  text-shadow: 0 0 10px #6dff8a, 0 2px 0 #0a1a0a;
}
#qte-gai .touche.long { font-size: 17px; }
#qte-gai .nom, #qte-gai .chaine {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 700 13px/1.2 "Segoe UI", Arial, sans-serif; color: #eaffea; text-shadow: 0 1px 3px #000;
}
#qte-gai .nom { top: 100px; }
#qte-gai .chaine { top: -22px; color: #ffe07a; font-size: 15px; }
#qte-gai.ok .fond { fill: rgba(40, 110, 40, .85); stroke: #ffe07a; }
#qte-gai.ok .temps { stroke: #ffe07a; }
#qte-gai.ok .touche { text-shadow: 0 0 14px #ffe07a; }
#qte-gai.rate .fond { fill: rgba(110, 20, 20, .8); }
#qte-gai.rate .temps { stroke: #ff5a4a; }
#qte-gai.rate { animation: qte-secousse .25s; }
@keyframes qte-pop { from { transform: translate(-50%, 0) scale(1.35); } to { transform: translate(-50%, 0) scale(1); } }
@keyframes qte-secousse { 25% { margin-left: -6px; } 75% { margin-left: 6px; } }