/**
 * PlayAwale — Le badge d'un bot : la tête de robot, l'Elo, le drapeau
 * -----------------------------------------------------------------------------
 * Le portrait d'un bot est le visage de son joueur : sans signe, on croirait
 * affronter une personne. Une pastille — la tête de robot, et l'Elo du joueur
 * quand il est calculé — et son drapeau le disent.
 *
 * COMPOSANT, ET NON PAGE : sorti de pages/solo.css le 07/10/2026, quand la page
 * de rejeu a dû le porter aussi — une partie contre un bot se revoit
 * (replay.php?b=…). Voir la section 69 de la documentation.
 *
 * Sur une carte, il se pose sur « .ghost-figure » ; sur le portrait d'un panneau
 * de jeu, avec « .ghost-badge--panel », à l'échelle du panneau.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* Le portrait garde sa place dans la grille de la carte : le badge est posé
   par-dessus, en bas à droite, sans rien pousser. */
.ghost-figure {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* BIEN LISIBLE — demandé le 07/10/2026 : « qu'on voie mieux l'étiquette avec le
   petit robot et l'Elo ». Corps plus grand (0,72 em au lieu de 0,5 : l'Elo passe
   d'environ 8 à 11,5 px sur la carte), un liseré clair qui la détache du
   portrait comme celui du drapeau, et la tête de robot en ambre sur le fond
   sombre. */
.ghost-badge {
  position: absolute;
  right: -0.55em;
  bottom: -0.15em;

  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  /* Sa largeur, celle de son contenu : posée à 58 % du portrait en partie, elle
     n'aurait sinon que les 42 % restants, et le robot s'écrasait à zéro. */
  width: max-content;
  padding: 0.14em 0.45em 0.14em 0.32em;

  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;

  color: var(--color-surface);
  background: var(--color-text);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-sm);
  pointer-events: none;
}

.ghost-badge__icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  color: var(--color-brand-amber);
}

/* En partie : à l'échelle du panneau, CENTRÉE sous le visage — le bas à gauche
   est la place du drapeau (« aiFlag »), le bas à droite celle du score
   (components/game-panel.css). */
.ghost-badge--panel {
  right: auto;
  /* Un peu à droite du centre : le drapeau, en bas à gauche, déborde vers lui. */
  left: 58%;
  bottom: -2%;
  transform: translateX(-50%);
  font-size: calc(var(--ai-panel-size) * 0.12);
}

/* LE DRAPEAU DU JOUEUR, sur la carte : en haut à droite du portrait, rond et
   cerclé de clair comme celui des panneaux (« panel-flag »), pour qu'on le
   reconnaisse d'un écran à l'autre. En partie, c'est « aiFlag » qui le porte. */
.ghost-flag {
  position: absolute;
  top: -0.15em;
  right: -0.3em;

  width: 0.85em;
  height: 0.85em;

  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-sm);
  pointer-events: none;
}

.ghost-flag img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Sur le portrait du BAS — le propriétaire qui revoit une partie contre son bot
   la voit du côté de son bot : à l'échelle de ce panneau-là. */
.ghost-badge--bottom {
  font-size: calc(var(--player-panel-size, var(--avatar-panel-size)) * 0.12);
}

/* LE PANNEAU D'UN BOT, EN PARTIE — demandé le 07/10/2026 : « améliore l'aspect
   des avatars avec mon bot dans le jeu, et ajoute mon nom ». Son portrait est le
   visage de son joueur : contre SON bot, les deux coins de l'écran portaient le
   même visage. Un anneau sombre liseré d'ambre — les couleurs de son badge — le
   distingue au premier regard ; un souffle d'ombre le détache du fond. */
.ai-panel--bot .ai-panel__avatar {
  border-radius: 50%;
  box-shadow:
    0 0 0 calc(var(--ai-panel-size) * 0.035) var(--color-text),
    0 0 0 calc(var(--ai-panel-size) * 0.06) var(--color-brand-amber),
    0 4px 14px rgba(60, 39, 35, 0.35);
}

/* Son nom — « Bot de Nicolas » — pend sous le portrait, SOUS le badge qui en
   chevauche le bas : un peu plus d'air que le nom d'un joueur en réseau. */
.ai-panel--bot .ai-panel__name {
  /* CALÉE À GAUCHE, ET NON CENTRÉE : le portrait touche presque le bord de
     l'écran, et un long pseudonyme centré sous lui en sortirait à gauche. */
  left: 0;
  transform: none;
  margin-top: calc(var(--ai-panel-size) * 0.14);
  padding: 0.2em 0.7em;
  max-width: min(calc(var(--ai-panel-size) * 2.4), calc(100vw - 40px));

  font-family: var(--font-body);
  font-size: calc(var(--ai-panel-size) * 0.15);
  font-weight: bold;
  color: var(--color-text);
  text-shadow: none;

  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px rgba(60, 39, 35, 0.12), var(--shadow-sm);
}

/* LE PANNEAU D'UN BOT, AJUSTÉ — demandé le 07/10/2026 : « réduis un peu le
   drapeau pour qu'il ne coupe pas l'étiquette du robot avec l'Elo ; décale un
   peu le score vers la droite, et le bouton qui laisse commencer le bot ».
   L'anneau du portrait (plus haut) l'élargit d'autant : ce qui le borde s'écarte.

   LE DRAPEAU : un cinquième du portrait au lieu d'un quart, glissé vers le bord
   — il ne mord plus sur l'étiquette, qui passe de toute façon AU-DESSUS. */
.ai-panel--bot .panel-flag {
  width: calc(var(--ai-panel-size) * 0.2);
  height: calc(var(--ai-panel-size) * 0.2);
  left: -4%;
  bottom: 2%;
}

.ai-panel--bot .ghost-badge--panel {
  z-index: 1;
}

/* LE SCORE, un peu plus à droite : hors de l'anneau et de l'étiquette. */
.ai-panel--bot .ai-panel__score {
  right: -0.85em;
}

/* LE BOUTON QUI LAISSE COMMENCER LE BOT, un peu plus à droite aussi : il
   frôlait l'anneau. */
.ai-panel--bot .ai-panel__start {
  right: -44%;
}