/* ===========================================================
   Aurora — L'ARCADE (couche action temps réel)
   -----------------------------------------------------------
   À charger EN DERNIER, après themes.css et jeux.css. Cette
   feuille N'ÉCRASE RIEN : tous ses sélecteurs commencent par
   `.ax`, un préfixe qui n'existe nulle part ailleurs.

   Aucune couleur en dur : tout est dérivé de style.css et de
   themes.css. Le canvas ne lit pas ces variables à chaque
   image — arcade.js les résout UNE FOIS au montage et à chaque
   changement de thème (MutationObserver sur data-theme /
   data-atheme), via une sonde qui fait résoudre les
   `color-mix()` par le navigateur.

   MÊME CONTENU que la constante CSS_ARCADE de web/js/arcade.js,
   qui sert de repli quand cette feuille n'est pas liée : toute
   modification ici doit être reportée là-bas. Le témoin
   --ax-feuille ci-dessous empêche la double injection.
   =========================================================== */

:root { --ax-feuille: 1; }

/* ---------- Racine : le conteneur de l'arène ----------
   `touch-action:none` est ce qui empêche le navigateur de
   voler le glissement du pouce pour faire défiler la page. */
.ax {
  position: absolute; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  --ax-a: var(--accent);
  --ax-b: var(--accent-2);
  --ax-sol: color-mix(in srgb, var(--bg-1) 78%, var(--bg-0));
  --ax-fond: var(--bg-0);
  --ax-mur: color-mix(in srgb, var(--bg-1) 55%, var(--text) 8%);
  --ax-arete: color-mix(in srgb, var(--text) 22%, var(--bg-1));
  --ax-ombre: color-mix(in srgb, var(--bg-0) 72%, var(--bg-1));
  --ax-lueur: color-mix(in srgb, var(--accent) 60%, white 18%);
  --ax-danger: var(--danger);
  --ax-texte: var(--text);
  --ax-muet: var(--muted);
}

.ax-toile { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- HUD ----------
   Au-dessus du canvas, en DOM : il reste net, il est lisible par
   un lecteur d'écran, et il ne coûte rien à repeindre. */
.ax-hud { position: absolute; inset: 0; pointer-events: none; font: inherit; color: var(--text); }

.ax-haut {
  position: absolute; left: 0; right: 0; top: 0; height: 56px;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
}
.ax-camp { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ax-camp .ax-nom {
  font-size: .78rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 8rem;
}
.ax-plaques { display: flex; gap: 4px; }
.ax-plaque { width: 15px; height: 9px; border-radius: 3px; background: var(--sunken); border: 1px solid var(--border); }
.ax-plaque.on { background: var(--ax-a); }
.ax-camp.b .ax-plaque.on { background: var(--ax-b); }
.ax-score { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ax-chrono {
  flex: 1; text-align: center; font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 var(--bg-0);
}
.ax-note { font-size: .72rem; color: var(--muted); text-align: center; font-weight: 500; }

/* Trois barres, teintées de l'accent. Le rouge n'apparaît que pour
   l'état « mauvais », et c'est --danger, une couleur de thème. */
.ax-reseau { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.ax-reseau i { width: 3px; background: var(--ax-a); opacity: .25; border-radius: 1px; }
.ax-reseau i:nth-child(1) { height: 5px; }
.ax-reseau i:nth-child(2) { height: 9px; }
.ax-reseau i:nth-child(3) { height: 14px; }
.ax-reseau.q1 i:nth-child(1),
.ax-reseau.q2 i:nth-child(1),
.ax-reseau.q2 i:nth-child(2),
.ax-reseau.q3 i { opacity: 1; }
.ax-reseau.q1 i { background: var(--danger); }

.ax-menu {
  pointer-events: auto; width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--glass); color: var(--text);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}

/* ---------- Commandes tactiles ----------
   BANDE_POUCES : rien d'important ne s'y trouve, et la caméra
   garde le véhicule à 160 px du bord bas. */
.ax-cmds {
  position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 14px; pointer-events: none;
  padding: 0 14px 18px 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.ax-gaucher .ax-cmds { right: auto; left: 0; padding: 0 0 18px 14px; align-items: flex-start; }

.ax-bouton {
  pointer-events: auto; border-radius: 50%; border: 1px solid var(--border);
  background: var(--glass); color: var(--text); font-weight: 800; font-size: .74rem;
  letter-spacing: .04em; display: grid; place-items: center; cursor: pointer;
  position: relative; transition: transform .06s ease, background .12s ease;
}
.ax-bouton:active, .ax-bouton.enfonce { transform: translateY(2px); background: var(--glass-2); }
.ax-bouton[disabled] { opacity: .42; }
/* L'anneau de recharge se vide sans jamais attendre le serveur. */
.ax-bouton .ax-anneau {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--ax-a) calc(var(--ax-p, 1) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 62%);
  mask: radial-gradient(circle, transparent 60%, black 62%);
}

/* ---------- Voiles : attente, compte à rebours, pause, fin ---------- */
.ax-voile {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 20px; pointer-events: auto;
  background: color-mix(in srgb, var(--bg-0) 35%, transparent);
}
/* Reconnexion et compte à rebours : pas de flou, il faut voir le terrain. */
.ax-voile.discret { background: color-mix(in srgb, var(--bg-0) 22%, transparent); }
.ax-voile[hidden] { display: none; }

.ax-carte {
  max-width: min(420px, 92vw); display: flex; flex-direction: column; gap: 12px;
  align-items: center; padding: 22px; border-radius: var(--radius);
  background: var(--glass-2); border: 1px solid var(--border);
}
.ax-titre { font-size: 1.24rem; font-weight: 800; }
.ax-sous { font-size: .86rem; color: var(--muted); line-height: 1.4; }
.ax-compte { font-size: 4.6rem; font-weight: 900; line-height: 1; color: var(--ax-a); }
.ax-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ax-btn {
  min-height: 48px; min-width: 48px; padding: 12px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--glass); color: var(--text);
  font: inherit; font-weight: 700; cursor: pointer;
}
.ax-btn.primaire {
  background: linear-gradient(135deg, var(--ax-a), var(--ax-b));
  color: var(--bg-0); border-color: transparent;
}
.ax-btn[disabled] { opacity: .5; cursor: default; }

/* ---------- Voile de diagnostic (réglage arcade.diagnostic) ---------- */
.ax-diag {
  position: absolute; left: 10px; bottom: 10px; font-size: .66rem; line-height: 1.35;
  color: var(--muted); background: var(--sunken); padding: 6px 8px; border-radius: 8px;
  pointer-events: none; white-space: pre; font-variant-numeric: tabular-nums;
}
.ax-diag[hidden] { display: none; }

@media (max-width: 520px) { .ax-camp .ax-nom { max-width: 5rem; } }

/* Une PARTIE d'action n'est pas une animation d'interface : elle
   continue de bouger. Ce sont les effets décoratifs qui tombent,
   côté canvas (facteurSecousse = 0, particules plafonnées). */
@media (prefers-reduced-motion: reduce) {
  .ax-bouton { transition: none; }
}