/* ============================================================================
   RCF · LOT 12.1 — SCÈNE 9:16
   ----------------------------------------------------------------------------
   Une seule scène portrait, commune à TOUS les écrans, identique sur téléphone
   et sur PC. Il n'existe pas d'interface desktop parallèle : sur grand écran, la
   scène ne s'élargit pas, elle se centre.

   Règle canonique Lot 12 / Phase C.4 : la scène est STRICTEMENT 9:16 sur
   téléphone comme sur PC. La largeur est bornée par le viewport et par la
   hauteur disponible ; `aspect-ratio` calcule ensuite la hauteur exacte.

       width        : min(100vw, 100dvh * 9 / 16)
       aspect-ratio : 9 / 16

   · PC 1440×900       → 506.25 × 900 ;
   · téléphone 414×736 → 414 × 736 ;
   · téléphone 390×844 → 390 × 693.33, centré verticalement.

   Les zones hors-scène restent uniquement décoratives. Aucune interface
   alternative n'y apparaît.

   Le défilement se fait DANS la scène, pas dans la page. La page, elle, ne
   défile plus : c'est ce qui garantit qu'aucun contenu ne s'échappe du cadre.

   Chargé APRÈS base.css et layout.css : les quelques neutralisations
   ci-dessous surchargent volontairement d'anciennes largeurs de colonne.
   ============================================================================ */

:root{
  --rcf-stage-ratio: 0.5625;          /* 9 / 16 */
  --rcf-safe-t: env(safe-area-inset-top, 0px);
  --rcf-safe-b: env(safe-area-inset-bottom, 0px);
  --rcf-safe-l: env(safe-area-inset-left, 0px);
  --rcf-safe-r: env(safe-area-inset-right, 0px);
}

html{height:100%}

body{
  margin:0;
  padding:0;                 /* l'ancien padding vivait sur le body : il passe
                                dans la scène, sinon il déborderait du cadre */
  min-height:100dvh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;           /* la PAGE ne défile plus */
  overscroll-behavior:none;
}

/* --- le cadre ------------------------------------------------------------ */
/* Le cadre NE défile PAS : il fixe la géométrie 9:16 et sert de bloc conteneur
   aux éléments `position:fixed` (modales, overlays, scrims). C'est ce qui les
   garde DANS le téléphone virtuel au lieu de les laisser couvrir tout l'écran
   du PC — et, parce que le cadre ne défile pas, elles restent immobiles pendant
   qu'on fait défiler le contenu, exactement comme avant. */
#rcfStage{
  position:relative;
  width:min(100vw, calc(100dvh * var(--rcf-stage-ratio)));
  height:auto;
  aspect-ratio:9 / 16;
  max-width:100vw;
  max-height:100dvh;
  overflow:hidden;
  transform:translateZ(0);      /* bloc conteneur pour les `position:fixed` */
  background:transparent;
  /* Le hors-scène reste visible autour : il n'accueille aucun élément de jeu. */
  box-shadow:0 0 0 1px rgba(140,175,210,.10), 0 40px 120px rgba(0,0,0,.55);
}

/* --- la zone qui défile --------------------------------------------------- */
#rcfScroll{
  position:absolute; inset:0;
  overflow-x:hidden;
  overflow-y:auto;
  /* HOTFIX iOS 1 — `-webkit-overflow-scrolling:touch` a été RETIRÉ.

     Cette propriété est dépréciée depuis iOS 13 : l'inertie de défilement y est
     le comportement par défaut, elle n'apporte donc plus rien. Ce qu'elle
     apporte encore, en revanche, c'est un chemin de composition hérité sur
     lequel WebKit est connu pour ne pas repeindre un contenu qui vient de
     passer de `display:none` à `display:block` — exactement ce que fait un
     changement d'écran RCF. La retirer, c'est revenir au chemin moderne, pas
     ajouter une astuce. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
#rcfScroll::-webkit-scrollbar{width:6px}
#rcfScroll::-webkit-scrollbar-thumb{background:rgba(135,167,197,.28);border-radius:3px}

/* La colonne interne reprend le padding que le body portait, plus les safe
   areas du téléphone. */
#rcfScroll > .wrap{
  max-width:none;
  width:100%;
  min-height:100%;
  margin:0;
  padding:calc(18px + var(--rcf-safe-t)) calc(16px + var(--rcf-safe-r))
          calc(34px + var(--rcf-safe-b)) calc(16px + var(--rcf-safe-l));
}

/* Anciennes largeurs de colonne pensées pour une page qui s'élargissait : dans
   la scène, la largeur est déjà bornée par le cadre lui-même. */
#rcfStage .wrap{max-width:none}
@media(max-width:560px){
  #rcfScroll > .wrap{padding-left:calc(10px + var(--rcf-safe-l));padding-right:calc(10px + var(--rcf-safe-r))}
}

/* Les fonds d'ambiance fixes du thème couvrent le hors-scène : c'est voulu,
   ils forment le décor autour du téléphone virtuel. */
body::before, body::after{ z-index:-2 }

/* Un écran occupe toute la hauteur de la scène quand il le demande. */
#rcfStage .screen.on{ min-height:0 }

/* Les fonds d'ambiance sont dimensionnés en 100vw/100vh par le thème : rattachés
   à la scène (cf. `hoteAmbiance()` dans ambience.js), on les ramène à ses
   dimensions plutôt que de les laisser déborder sur tout l'écran d'un PC. */
#rcfStage .rcf-game-bg, #rcfStage .rcf-game-scrim,
#rcfStage .rcf-hero-bg, #rcfStage .rcf-hero-scrim{ width:100%; height:100% }