/*
 * Décor d'arène — feuille autonome, sans script.
 *
 * Le bundle dessine l'arène sur un canvas OPAQUE (`alpha: false`) rempli de
 * noir à chaque image : impossible de poser une texture dessous. Le décor
 * est donc posé PAR-DESSUS, en deux pseudo-éléments fixes qui ne captent
 * aucun clic : une grille fine en fusion « écran » (elle n'éclaircit que
 * de quelques pour-cent, les serpents restent nets), et une vignette qui
 * assombrit les bords pour ramener l'œil au centre. L'ensemble donne un sol
 * à l'arène, là où il n'y avait qu'un vide noir.
 *
 * `inset-block-start: 30px` : la barre d'état du haut (arene-sobriete.css)
 * reste hors du décor, pour rester lisible. Les panneaux greffés (carte,
 * chat, classement) ont un z-index bien supérieur : ils passent devant.
 *
 * `html.arene-apercu` : l'aperçu décoratif du hero de la vitrine
 * (`?minimal=1`, classe posée par arene-classement.js) n'a pas de décor —
 * la vitrine y met déjà son propre voile.
 */

html:not(.arene-apercu) body::after {
  content: '';
  position: fixed;
  inset: 30px 0 0 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 94, 168, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 94, 168, .075) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  mix-blend-mode: screen;
}

html:not(.arene-apercu)::after {
  content: '';
  position: fixed;
  inset: 30px 0 0 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(6, 2, 10, .55) 100%);
}