/* Dice roll button — reusable next to any dN input. Result displayed inline.

   BLOC UNIQUE DU TRIPLET. Il l'a été à deux endroits : pages/characters-psychic.css
   déclarait la même rangée avec `max-width: 120px`, ce fichier avec
   `min-width: 120px`, et personne ne voyait les deux moitiés ensemble — le champ
   était figé à exactement 120 px, plancher ET plafond. Les déclarations de l'autre
   fichier ont été rapatriées ici sans en changer une valeur ; leur position dans la
   cascade ne change rien parce qu'aucune feuille intercalée ne déclare `max-width`
   sur ce sélecteur, et parce que les deux règles `.psy-alloc-input` qui pourraient
   s'y opposer se jouent à la spécificité (0,1,0 perd, 0,2,0 gagne) dans les deux
   ordres. Le markup est désormais rendu par un seul composant, app/components/
   dice-input.hbs.

   LES DEUX SÉLECTEURS SONT CONSERVÉS TELS QUELS, et ce n'est pas de la timidité :
   `> input` et ` input` ne visent pas le même ensemble. Un site du corpus
   (combat-psychic-modal, la dépense de PP) met un `<label>` entre la rangée et son
   champ ; la forme descendante l'atteint, la forme enfant non. Les fondre en une
   seule donnerait ou bien un `min-width` à un champ qui n'en avait pas, ou bien un
   `max-width` de moins à celui qui en avait un. */
.anima-input-with-dice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.anima-input-with-dice input {
  flex: 1;
  max-width: 120px;
}
.anima-input-with-dice > input {
  min-width: 120px;
}
.anima-dice-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.anima-dice-btn:hover { border-color: var(--accent); }
.anima-dice-result {
  background: var(--surface);
  border: 1px solid var(--zeon);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.anima-dice-result strong { color: var(--zeon); font-weight: 700; font-size: 0.85rem; }
.anima-dice-detail { color: var(--muted); font-size: 0.8rem; }
.anima-dice-open { color: var(--accent); font-weight: 700; }

/* Back button on action picker */
.anima-back-btn {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0 4px;
}
.anima-back-btn:hover { color: var(--zeon); }

.anima-attack-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.anima-attack-type-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--zeon);
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.anima-attack-type-btn.active { border-color: var(--accent); color: var(--accent); }

/* Sous le seuil mobile, les quatorze types passent de trois colonnes à deux.
   MESURÉ, et le symptôme n'est pas celui qu'on suppose : rien n'est coupé, les libellés
   REPLIENT sur deux lignes. Les chiffres qui suivent ont été relevés à 0,7 rem, la
   taille qu'avait ce bouton quand la grille a été recadrée. À 360 px en trois colonnes,
   les colonnes font 76,6 à 98,8 px (elles sont en `1fr`, donc dimensionnées par leur
   contenu et inégales) et HUIT des quatorze boutons passent à deux lignes — hauteur
   55,8 px contre 36,9. À 422 px, quatre encore.
   La marge intérieure horizontale descend de 10 à 6 px pour rendre 8 px au contenu, ce
   qui porte la boîte à 148 px. Le padding vertical, lui, ne bouge pas : c'est la surface
   de frappe au doigt. En deux colonnes et à 0,7 rem, plus aucun libellé ne repliait, aux
   deux largeurs : le plus large, « Immobiliser à distance », demandait 143 px pour ces
   148 de boîte.
   Le relèvement des polices au plancher de 0,8 rem (incrément D) a consommé ces 5 px de
   marge. Remesuré sur la même page-témoin après la remontée : à 360 px, DEUX libellés
   replient — « Immobiliser à distance » (163,4 px demandés) et « Attaque (vêtements) »
   (149,6) — et ces deux boutons passent de 39,6 à 61,2 px de haut. À 422 px la boîte
   fait 179 px et aucun ne replie.
   Le bouton grandit en hauteur, il ne déborde pas : la lisibilité l'emporte sur une
   ligne de plus. */
@media (max-width: 767.98px) {
  .anima-attack-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .anima-attack-type-btn {
    padding: 8px 6px;
  }
}

.anima-turn-counter-banner {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 12px;
  border-radius: 3px;
}
.anima-turn-counter-banner.over-max {
  background: var(--hp-soft);
  border-left-color: var(--hp);
  color: var(--hp);
}
.anima-banner-warn {
  margin-left: 8px;
  font-weight: 700;
}

/* Combat-log: expandable row + damage breakdown */
.anima-combat-log-entry {
  border-bottom: 1px dashed var(--border);
}
.anima-combat-log-entry:last-child {
  border-bottom: none;
}
.anima-combat-log-row.expandable {
  cursor: pointer;
  user-select: none;
}
.anima-combat-log-row.expandable:hover {
  background: var(--surface-2);
}
.anima-combat-log-row .chevron {
  font-size: 0.8rem;
  color: var(--muted);
  margin-right: 4px;
}
.anima-combat-log-row.expanded {
  background: var(--surface-2);
}
.anima-combat-log-breakdown {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  padding: 8px 12px 8px 16px;
  font-size: 0.8rem;
  color: var(--ink);
  margin: 0 8px 4px;
  border-radius: 0 3px 3px 0;
}
.anima-breakdown-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 0;
  font-family: monospace;
}
.anima-breakdown-label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.anima-breakdown-value {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

/* Per-row actions counter (X/Y) on init list */
.anima-actions-counter {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
}
.anima-actions-counter.over-max {
  color: var(--hp);
  border-color: var(--hp);
  background: var(--hp-soft);
  font-weight: 700;
}

/* ── Inline action bar (active actor, under the roster) ── */
.anima-inline-action-bar {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}

.anima-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.anima-action-row button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--zeon);
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.anima-action-row .anima-action-attack { border-color: var(--hp); color: var(--hp); }

/* ── Rappel-interrupteur du mode agressif du Séraphite (Encounter::MartialArtTurnToggle) ──
   Rendu dans la barre d'action de l'acteur, entre son en-tête et ses boutons. Le bouton
   porte le rappel : c'est la même boîte qui montre l'état et le change.

   `align-items: flex-start` et non `stretch` : la boîte ne doit pas s'étirer sur toute la
   largeur de la barre. Ce n'est pas une action de plus au même rang que les douze autres,
   c'est un état — et une bande pleine largeur au-dessus des actions ressemblerait à un
   bandeau d'alerte permanent.

   Il n'y a PAS de règle pour la barre étroite (fenêtre flottante) ni sous le seuil
   téléphone : le bouton est déjà en colonne et ses trois lignes se replient d'elles-mêmes.
   Ajouter un seuil ici en aurait fait un huitième, et la liste des sept est fermée. */
.anima-ma-turn {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
}

/* Une rangée QUI S'ENROULE, et non trois lignes empilées : quand la place ne manque pas,
   l'état et son chiffre tiennent sur la même ligne. C'est la hauteur qui est rare là où
   cette boîte est le plus à l'étroit — la fenêtre flottante de combat, mesurée par
   tests/browser/combat-hud-test.mjs, où la barre d'action empile déjà ses douze boutons.
   Ce que la boîte y coûte, mesuré : 63,2 px de hauteur à 360 px de fenêtre (sa largeur
   par défaut) et 128,0 px à 240 px (son minimum), pour zéro pixel de largeur pris à
   quoi que ce soit et aucun débordement horizontal dans aucun des huit états. */
.anima-ma-turn-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

/* Posé, il coûte : il prend la couleur des PV, celle que tout le reste du combat emploie
   pour ce qui retire quelque chose. Coupé, il reste discret — un joueur qui ne l'a pas
   armé n'a pas à être alerté de son existence à chaque tour. */
.anima-ma-turn-toggle.on {
  border-color: var(--hp);
  border-left-color: var(--hp);
  background: var(--hp-soft);
  color: var(--hp);
}

.anima-ma-turn-state {
  font-size: 0.8rem;
  font-weight: 700;
}

.anima-ma-turn-effect {
  font-size: 0.8rem;
}

/* Le verbe est ce qu'un clic ferait, pas ce qui est. Il se lit en dernier et il est le
   seul des trois à changer de graisse plutôt que de taille : le plancher du projet est à
   0,8 rem et les trois lignes y sont déjà. */
.anima-ma-turn-verb {
  font-size: 0.8rem;
  text-decoration: underline;
}

.anima-pure-defense-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--zeon) 12%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* DETTE CONNUE : 0,75 rem est sous le plancher de 0,8 rem du projet, et c'est le cas le
   plus gênant qui reste — ce texte s'affiche DANS la barre d'action, celle-là même qu'on
   vient de recadrer, et il remplace les douze boutons quand la Défense Totale est active.
   Il n'a pas été remonté avec les autres parce qu'aucune page-témoin ne le rend : le
   relevé « 0 texte sous le plancher » de tests/browser/combat-frame-test.mjs vaut pour ce
   que la page-témoin porte, pas pour tout le cadre. Le remonter demande d'abord de le
   faire entrer dans la page-témoin, sans quoi on corrigerait à l'aveugle une surface dont
   la hauteur n'est mesurée par personne. */
.anima-pure-defense-text {
  font-size: 0.8rem;
  color: var(--zeon);
}
.anima-action-pass {
  background: var(--surface-2);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.anima-action-pass:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }

.anima-disc-list, .anima-power-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.anima-disc-btn, .anima-power-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--zeon);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.anima-disc-btn.active, .anima-power-btn.active {
  border-color: var(--accent); color: var(--accent);
}

.anima-narrative {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.anima-attack-type-master-header {
  font-size: 0.8rem;
  color: var(--bs-secondary);
  margin: 0.5rem 0 0.25rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--bs-border-color);
}

.anima-attack-type-master-note {
  font-size: 0.8rem;
  font-style: italic;
}

.anima-attack-type-btn--master.active {
  border-color: var(--bs-warning);
  color: var(--bs-warning);
}


/* Critical failure (échec critique) inline sections */
.anima-critical-failure-section {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid var(--bs-warning);
  background: var(--bs-warning-bg-subtle);
  border-radius: 0 4px 4px 0;
}

.anima-critical-failure-label {
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.anima-fumble-level-display {
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--bs-warning-text-emphasis);
  font-size: 0.9rem;
}

.anima-fumble-level-required {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--bs-secondary);
  font-style: italic;
}

/* ── Magic combat modal ──────────────────────────────────────────────────── */

/* Form controls — replaces the dated browser-default look on every text/number
   input and select inside the magic modal. */
.anima-magic-modal select,
.anima-magic-modal input[type="number"],
.anima-magic-modal input[type="text"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--ink-strong);
  padding: 7px 10px;
  font-size: 0.8rem;
  line-height: 1.2;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.anima-magic-modal select:hover,
.anima-magic-modal input[type="number"]:hover,
.anima-magic-modal input[type="text"]:hover {
  border-color: var(--zeon);
}
.anima-magic-modal select:focus,
.anima-magic-modal input[type="number"]:focus,
.anima-magic-modal input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.anima-magic-modal input::placeholder {
  color: var(--muted);
}
.anima-magic-modal select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
  cursor: pointer;
}
.anima-magic-modal select option {
  background: var(--surface);
  color: var(--ink-strong);
}

/* Resource summary bar */
.magic-resource-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.magic-res-item {
  background: var(--zeon-soft);
  border: 1px solid var(--zeon);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--ink);
}
.magic-res-item strong {
  color: var(--accent);
  font-weight: 700;
}

/* Maintained spells */
.magic-maintained-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.8rem;
}
.magic-maintained-key {
  flex: 1;
  color: var(--ink);
}
.magic-maintained-cost {
  color: var(--hp);
  font-size: 0.8rem;
}

/* Quick actions */
.magic-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.magic-quick-hint {
  margin-top: 6px;
}

/* Path tabs */
.magic-path-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Spell list + inline description under the selected spell */
.magic-spell-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.magic-spell-desc {
  background: var(--surface);
  border: 1px solid var(--zeon);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 2px 0 6px;
}
.magic-spell-desc .anima-narrative {
  margin: 0;
}
.magic-added-effect {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--success);
}
.magic-maintenance-info {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* Inline badges / totals */
.magic-steps-badge {
  display: inline-block;
  margin-top: 6px;
  background: var(--zeon-soft);
  border: 1px solid var(--zeon);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: var(--zeon);
}
.magic-proj-total {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--accent);
}
.magic-maintain-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
}
.magic-maintain-check input[type="checkbox"] {
  width: auto;
}

/* Sub-path spells (voies secondaires) — grouped picker below the primary paths */
.magic-subpath-section {
  margin-top: 12px;
}
.magic-subpath-group {
  margin-top: 6px;
}
.magic-subpath-group-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

/* Grade select (voies secondaires cast) — locked grades read as disabled */
.anima-magic-modal select option:disabled {
  color: var(--muted);
  font-style: italic;
}

/* Prepared sub-path (voies secondaires) cast: the grade was fixed when the
   spell was prepared on the sheet — shown read-only instead of a select. */
.magic-grade-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.magic-grade-locked-hint {
  font-style: italic;
  color: var(--muted);
}

/* ── Les surfaces d'action sur téléphone (2/2 — ce que ce fichier possède) ──
   Suite du bloc de pages/encounter-combat.css, où sont le relevé et le raisonnement.
   Ces règles-ci vivent dans CE fichier parce que c'est lui qui déclare les boîtes visées,
   et EN FIN DE FICHIER parce qu'une media query n'ajoute pas de spécificité : placées
   avant leurs déclarations, elles perdaient sur l'ordre des sources. */
@media (max-width: 767.98px) {
  .anima-inline-action-bar {
    padding: 10px 6px;
  }

  .anima-combat-log-breakdown {
    padding: 8px 6px 8px 8px;
    margin: 0 4px 4px;
  }

  /* Les douze actions tiennent à plusieurs par ligne dès qu'on leur rend la gouttière
     horizontale ; la verticale ne bouge pas, c'est elle qui fait la cible tactile. */
  .anima-action-row button,
  .anima-action-pass {
    padding: 7px 9px;
  }

  /* Le champ numérique du triplet « libellé + input + DiceRollButton » cesse de
     réclamer 120 px. Le conteneur est en `flex-wrap: wrap` : sous le seuil, ce plancher
     ne rétrécit pas le champ, il POUSSE le bouton de dé à la ligne — ou fait déborder
     la rangée quand elle est dans une cellule de tableau (c'est une des deux causes du
     débordement du tableau de répartition psychique, +432 px au pire).
     La règle est partagée par toutes les copies du triplet. Elles étaient 33, réparties
     sur 13 gabarits et aucune en JS ; elles sont désormais rendues par un composant,
     app/components/dice-input.hbs, sauf une — la dépense de PP de
     combat-psychic-modal.hbs, qui emploie la classe comme conteneur de mise en page
     autour d'un `<label>` et n'a jamais eu de dé. */
  .anima-input-with-dice > input {
    min-width: 0;
  }

  /* Le plafond tombe avec le plancher, sans quoi le champ ne peut pas reprendre la
     largeur qu'on vient de lui rendre. Cette déclaration vivait en fin de
     pages/characters-psychic.css, appariée au `max-width: 120px` du haut de ce
     fichier-ci ; les deux ont été rapatriées ensemble. Forme descendante, comme sa
     règle de base : le champ imbriqué de la dépense de PP en dépend aussi. */
  .anima-input-with-dice input {
    max-width: none;
  }
}