/*
 * Montée d'arène — feuille autonome.
 *
 * Comme `arene-carte.css` et `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é `apal-`, 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.
 */

.apal-racine {
  --apal-ink: #150a1f;
  --apal-rose: #ff5ea8;
  --apal-rose-vif: #ffa8d9;
  --apal-or: #ffc94d;
  --apal-or-vif: #ffe19b;
  --apal-texte: #fff0fa;
  --apal-mute: #c9a8dd;

  position: fixed;
  /* En HAUT et au centre : c'est le seul panneau de l'écran qui demande une
     décision, il ne doit pas se ranger dans la colonne des indicateurs.
     `env(safe-area-inset-top)` pour les téléphones à encoche. */
  inset-block-start: calc(1rem + env(safe-area-inset-top));
  inset-inline: 0;
  margin-inline: auto;
  width: min(92vw, 420px);
  z-index: 2147482500; /* au-dessus de la carte, sous le chat */

  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(36, 20, 50, .96), rgba(21, 10, 31, .96));
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 168, 217, .22) inset;
  font: 600 13px/1.45 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--apal-texte);
  /* Contrairement à la carte, ce panneau se clique : c'est sa raison d'être.
     Il est étroit et en haut, loin de la zone de pilotage. */
  user-select: none;
}

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

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

.apal-titre {
  font-weight: 800;
  font-size: 14px;
  color: var(--apal-or-vif);
}

.apal-detail {
  color: var(--apal-mute);
  font-weight: 500;
}

.apal-detail:empty {
  display: none;
}

.apal-actions {
  display: flex;
  gap: 8px;
  margin-block-start: 2px;
}

.apal-actions[hidden] {
  display: none;
}

/* Deux issues, deux boutons de MÊME poids : ni l'un ni l'autre n'est le
   choix « par défaut ». Seule la couleur les sépare — l'or pour l'argent
   qu'on emporte, le rose de la charte pour le cran au-dessus. */
.apal-sortir,
.apal-monter {
  flex: 1;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease;
}

.apal-sortir {
  background: linear-gradient(160deg, var(--apal-or), var(--apal-or-vif));
  color: var(--apal-ink);
}

.apal-monter {
  background: linear-gradient(160deg, var(--apal-rose), var(--apal-rose-vif));
  color: var(--apal-ink);
}

.apal-sortir:hover:not(:disabled),
.apal-monter:hover:not(:disabled) {
  filter: brightness(1.08);
}

.apal-sortir:disabled,
.apal-monter:disabled {
  background: rgba(255, 255, 255, .1);
  color: var(--apal-mute);
  cursor: not-allowed;
  filter: none;
}