/*
 * Classement en direct — feuille autonome (voir arene-classement.js).
 *
 * Tout est préfixé `aclas-` ; rien ne vise le bundle. Mêmes jetons de couleur
 * que la carte d'arène, recopiés en dur : ce fichier est servi sans build.
 *
 * Emplacement : en haut à GAUCHE, sous la barre d'état de 30 px — le chat
 * se déplie en haut à droite, la carte vit en bas à droite, l'aide au centre.
 */

.aclas-racine {
  --aclas-rose: #ff5ea8;
  --aclas-rose-vif: #ffa8d9;
  --aclas-or-vif: #ffe19b;
  --aclas-texte: #fff0fa;
  --aclas-mute: #c9a8dd;

  position: fixed;
  inset-block-start: calc(38px + env(safe-area-inset-top));
  inset-inline-start: calc(12px + env(safe-area-inset-left));
  z-index: 2147482000;
  width: 200px;
  font: 600 11px/1.35 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--aclas-texte);
  pointer-events: none;
  user-select: none;
}

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

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

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

.aclas-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 0 1px;
}

.aclas-titre {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--aclas-rose);
}

.aclas-compte {
  font-size: 10px;
  color: var(--aclas-mute);
  font-variant-numeric: tabular-nums;
}

.aclas-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aclas-ligne,
.aclas-moi {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  align-items: baseline;
  padding: 2px 1px;
}

.aclas-ligne[data-moi='1'],
.aclas-moi {
  color: var(--aclas-or-vif);
}

.aclas-moi {
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 94, 168, .25);
}

.aclas-rang {
  color: var(--aclas-mute);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.aclas-ligne:first-child .aclas-rang {
  color: var(--aclas-or-vif);
}

.aclas-nom {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aclas-masse {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--aclas-rose-vif);
}

/* Fil des éliminations : sous le classement, s'efface tout seul. */
.aclas-fil:not(:empty) {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 94, 168, .18);
}

.aclas-evenement {
  padding: 1px 1px;
  color: var(--aclas-mute);
  font-weight: 500;
  animation: aclas-fondu 7s ease both;
}

.aclas-evenement[data-moi='1'] {
  color: var(--aclas-or-vif);
  font-weight: 700;
}

@keyframes aclas-fondu {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aclas-evenement { animation: none; }
}

/* Téléphone : le panneau rétrécit plutôt que de disparaître. */
@media (max-width: 640px), (max-height: 560px) {
  .aclas-racine { width: 150px; font-size: 10px; }
  .aclas-fil { display: none; }
}