/* Page /vitrine-acces.php : parcours de plateformes + porte.
   Seule responsabilité de cette feuille : la mise en page du jeu.
   Couleurs/typo viennent des variables de themes.css, jamais redéfinies ici. */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background: radial-gradient(900px 320px at 18% -100px, var(--glow), transparent 70%), var(--bg);
  color:var(--text);
  font-family:var(--mono);
  min-height:100vh;
  overflow:hidden;
}

/* Picker de thème : chrome de page, pas élément du jeu.
   Coin haut-droit, comme .fx-header-actions dans .fx-header
   (justify-content:space-between) sur dashboard/files/concepteur ;
   mêmes retraits que le padding du header (.75rem 1.25rem = 12px/20px).
   Sorti du flux : en statique il occupait toute la largeur et
   poussait .jeu-wrap vers le bas.
   z-index 80 = au-dessus de #fxOverlay (60) et de la mascotte (50).
   Le .fx-picker-menu (z-index:70, picker.css) devient local à ce
   contexte d'empilement, et s'ouvre vers le bas/droite : le coin
   haut-droit est le seul qui lui laisse la place. */
.vitrine-theme-slot{
  position:fixed;
  top:12px;
  right:20px;
  z-index:80;
}

.jeu-wrap{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto;
  padding:40px 24px 0;
  text-align:center;
}
.jeu-wrap h1{font-size:1.4rem;color:var(--gold);margin:0 0 10px}
.jeu-consigne{font-size:.8rem;margin:0 0 6px;line-height:1.6}
.jeu-retour{margin-top:18px}
.jeu-retour a{color:var(--tan-dim);font-size:.75rem;text-decoration:none;border-bottom:1px dotted var(--gutter)}
.jeu-retour a:hover{color:var(--tan);border-bottom-color:var(--tan-dim)}

/* Point de départ : sert uniquement à satisfaire le sélecteur
   ".header-row .mascotte" attendu par mascotte-libre.js. */
.jeu-depart{
  position:fixed;
  left:40px;
  bottom:0;
  z-index:10;
}

.plateforme{
  position:fixed;
  height:22px;
  border-radius:8px;
  background:var(--pane);
  border:1px solid var(--border);
  box-shadow:0 6px 16px -10px #000;
}
.p1{left:60px;  bottom:90px;  width:140px}
.p2{left:230px; bottom:170px; width:140px}
.p3{left:400px; bottom:250px; width:140px}
.p4{left:570px; bottom:330px; width:140px}
.p5{left:740px; bottom:410px; width:140px}

.porte{
  position:fixed;
  left:860px;
  bottom:432px;
  width:90px;
  height:160px;
  background:linear-gradient(180deg, var(--pane), var(--pane-2));
  border:2px solid var(--gold);
  border-radius:10px 10px 4px 4px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent);
  transition:box-shadow .2s, filter .2s;
}
.porte.ouverte{
  filter:brightness(1.4);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 35%, transparent);
}

.jeu-secours{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:10;
  margin:0;
}
.jeu-secours button{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--tan);
  background:var(--pane);
  border:1px solid var(--border-active);
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}
.jeu-secours button:hover{filter:brightness(1.12)}

@media (max-width: 1000px){
  /* le titre passerait sous le picker fixe (bas du widget ≈ 36px) */
  .jeu-wrap{padding-top:48px}
  .jeu-wrap h1{font-size:1.15rem}
}