/*
 * Carte d'arène — feuille autonome.
 *
 * Comme `arene-chat.css`, elle ne partage AUCUN sélecteur avec le bundle du
 * client de jeu (dont la source est perdue, voir ../LISEZMOI.md) : tout est
 * préfixé `acar-`, et rien ici ne touche à `body`, `canvas` ou `#root`. C'est
 * la condition pour que cette greffe survive à une reconstruction du client.
 *
 * Les couleurs reprennent les jetons de la vitrine, recopiés en dur : ce
 * fichier est servi sans build, il n'a pas accès au thème Tailwind.
 */

.acar-racine {
  --acar-ink: #150a1f;
  --acar-rose: #ff5ea8;
  --acar-or-vif: #ffe19b;
  --acar-vert: #3ee08a;
  --acar-rouge: #f87171;
  --acar-texte: #fff0fa;
  --acar-mute: #c9a8dd;

  position: fixed;
  /* Sous le HUD, dans le même coin et sur le même bord gauche que lui : tout
     ce qui s'affiche en jeu tient ainsi dans une seule colonne, et le reste de
     l'écran appartient à l'arène. `HUD_HAUTEUR` est la hauteur de la carte du
     bundle (4 lignes, contenu fixe) ; elle ne bouge pas.
     `inset-inline-start` et non `left` : en arabe la colonne passe à droite
     avec la page, comme celle du bundle. */
  --acar-hud-hauteur: 200px;
  /* `env(safe-area-inset-*)` et `1rem` comme les panneaux du bundle : sur un
     téléphone à encoche, tenu à l'horizontale, un bord fixe ne suffit pas. */
  inset-inline-start: calc(1rem + env(safe-area-inset-left));
  inset-block-start: calc(1rem + env(safe-area-inset-top) + var(--acar-hud-hauteur));
  z-index: 2147482000; /* sous le chat : une carte ne masque pas une phrase */
  font: 600 10px/1.4 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--acar-texte);
  /* Rien ici ne se clique : la carte ne doit voler au canvas ni un clic de
     boost, ni un mouvement de souris — c'est lui qui dirige le serpent. */
  pointer-events: none;
  user-select: none;
}

.acar-racine[hidden] {
  display: none;
}

.acar-racine * {
  box-sizing: border-box;
}

.acar-cadre {
  padding: 6px 6px 4px;
  border: 1px solid rgba(255, 94, 168, .22);
  border-radius: 12px;
  background: rgba(21, 10, 31, .6);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .8);
}

.acar-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 2px;
}

.acar-titre {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--acar-rose);
}

.acar-compte {
  color: var(--acar-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 128 px : assez pour lire une grappe de points et distinguer une couleur, pas
   assez pour peser sur l'écran. La carte est un coup d'œil, pas un tableau de
   bord — c'est l'arène qu'on regarde. */
.acar-toile {
  display: block;
  width: 128px;
  height: 128px;
}

/* La légende s'apprend une fois, puis c'est du texte à lire en pleine partie :
   elle s'en va au bout de quelques secondes, et la carte se referme sur les
   seuls points. Même raison que la barre d'aide clavier du bundle, même
   traitement (voir arene-sobriete.css). */
.acar-legende {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-height: 18px;
  margin-top: 6px;
  overflow: hidden;
  color: var(--acar-mute);
  font-weight: 500;
  animation: acar-legende-partir 1s ease 12s both;
}

@keyframes acar-legende-partir {
  from { opacity: 1; max-height: 18px; margin-top: 6px; }
  to { opacity: 0; max-height: 0; margin-top: 0; }
}

/* Sans animation, la légende RESTE : ce qui gêne ici c'est le mouvement, pas
   deux mots de texte — la faire disparaître d'un coup priverait de la clé de
   lecture quelqu'un qui n'a fait que demander un écran calme. */
@media (prefers-reduced-motion: reduce) {
  .acar-legende {
    animation: none;
  }
}

.acar-pastille {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 4px;
  border-radius: 50%;
  vertical-align: baseline;
}

.acar-proie { background: var(--acar-vert); }
.acar-menace { background: var(--acar-rouge); }

/* Sur un téléphone, la carte rétrécit encore au lieu de changer de place :
   l'habitude de son emplacement compte plus que sa taille. */
@media (max-width: 640px), (max-height: 560px) {
  .acar-toile {
    width: 96px;
    height: 96px;
  }

  .acar-cadre {
    padding: 5px 5px 3px;
  }

  .acar-legende {
    display: none;
  }
}