/* Les Histoires de Julia — Le Parcours des Etoiles
   Reprise des regles de scene de tools/previews/preview-obby.html (maquette du
   2026-09-15). Tout est prefixe #parcours / .pk- : aucune regle ne peut fuir
   vers un autre ecran. */

#parcours{padding:0; gap:0; justify-content:stretch; align-items:stretch;}

/* La scene prend toute la place disponible. Plus de cadre, plus de marges :
   le jeu EST l'ecran. */
.pk-stage{
  position:relative; width:100%; height:100%; margin:0;
  border-radius:0; overflow:hidden; background:#cfe9ff;
  touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none;
}
.pk-stage canvas{display:block; width:100%; height:100%;}

/* La barre du haut flotte au-dessus du jeu. */
.pk-haut{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  background:linear-gradient(180deg, rgba(20,14,40,.38), rgba(20,14,40,0));
  pointer-events:none;
}
.pk-haut > *{pointer-events:auto;}
.pk-rond{
  width:40px; height:40px; flex:0 0 auto; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); font-size:17px; line-height:1; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.pk-rond:active{transform:translateY(1px);}
.pk-tickets{
  flex:1 1 auto; color:#fff; font:600 13px/1.2 'Fredoka',system-ui,sans-serif;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* ============================================================
   LE JOYSTICK — fixe, visible, en bas a gauche
   Il etait invisible et naissait sous le pouce. Julia ne pouvait pas savoir
   qu'il existait, ni ou poser son doigt. Il est desormais toujours la, au
   meme endroit : on le voit, on le vise sans regarder, et le petit rond suit
   le pouce quand elle pousse.
   ============================================================ */
.pk-manche{
  position:absolute; z-index:3;
  left:calc(18px + env(safe-area-inset-left));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:104px; height:104px; border-radius:50%;
  background:rgba(255,255,255,.20);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42), 0 6px 18px rgba(0,0,0,.22);
  display:grid; place-items:center;
  touch-action:none;
}
.pk-manche::before{           /* les deux fleches, pour dire a quoi ca sert */
  content:'◀     ▶'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:13px; color:rgba(255,255,255,.55); letter-spacing:2px;
}
.pk-manche i{
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.88);
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  transition:transform .06s linear;
}
.pk-manche.actif{background:rgba(255,255,255,.28);}

/* Le bouton de saut, symetrique, a droite. */
.pk-saut{
  position:absolute; z-index:3;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(22px + env(safe-area-inset-bottom));
  width:92px; height:92px; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 38% 34%, #a99bea, #6f5ebc);
  color:#fff; font-size:30px; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.3), inset 0 -3px 0 rgba(0,0,0,.18);
}
.pk-saut:active{transform:translateY(2px); filter:brightness(1.08);}

/* Les costumes, en bandeau bas et discret, entre les deux commandes. */
.pk-bar{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  max-width:min(52vw, 420px);
}
.pk-cos{
  font:600 12px/1 'Fredoka',system-ui,sans-serif; cursor:pointer; border:0;
  background:rgba(20,14,40,.42); color:#fff; border-radius:999px; padding:7px 11px;
  backdrop-filter:blur(2px);
}
.pk-cos.on{background:linear-gradient(180deg,#8d7bd6,#6f5ebc); box-shadow:0 3px 10px rgba(0,0,0,.3);}
.pk-cos:active{transform:translateY(1px);}

/* Ecran court : on retrecit les commandes plutot que la scene. */
@media (max-height:460px){
  .pk-manche{width:84px; height:84px;}
  .pk-manche i{width:38px; height:38px;}
  .pk-saut{width:74px; height:74px; font-size:25px;}
  .pk-bar{max-width:44vw;}
  .pk-cos{padding:5px 9px; font-size:11px;}
}