/* =============================================================
   AGORA DES MOTS — ANAGRAMMES
   src/styles/app.css — coquille partagée de l'application.

   Les écrans eux-mêmes (accueil/configuration, jeu) sont des
   éléments personnalisés avec DOM fantôme : leur CSS complet vit
   dans config.css et game.css, chacun scopé par :host. Ce fichier
   ne contient donc que la mise en page de niveau page (bascule
   d'écran) et un tout petit reset, sans dupliquer les tokens
   visuels des écrans.
   ============================================================= */

html, body {
  margin: 0;
  padding: 0;
  background: #07150f;
  /* Nécessaire pour les tiroirs de navigation mobile en position:fixed + transform
     (voir .main-nav / .agora-nav) : un élément fixed transformé hors écran reste
     compté dans le scrollWidth du document par défaut (comportement des moteurs de
     rendu), ce qui provoque un débordement horizontal fantôme même quand rien n'est
     visuellement débordant. Sans incidence sur le scroll vertical normal de la page. */
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

agora-config-view,
agora-game-view {
  display: block;
}

/* Correctif flash initial — avant que config-view.js (dernier d'une longue chaîne de
   <script> bloquants) ne construise son Shadow DOM, l'élément personnalisé n'a aucune
   hauteur : la section SEO qui le suit dans le DOM remonte alors tout en haut de la
   page, puis le vrai contenu (≈1150px desktop) s'affiche d'un coup quelques centaines
   de ms plus tard, provoquant un déplacement de mise en page brutal (CLS mesuré ≈0.92).
   Réserver 100vh ici borne ce déplacement à la hauteur de l'écran, jamais plus. */
agora-config-view {
  min-height: 100vh;
}

agora-config-view[hidden],
agora-game-view[hidden] {
  display: none;
}