/* « Le grand saut » — feuille de style du jeu.
   Fournie par l'utilisateur le 2026-09-09, posée telle quelle à une
   exception près : le bloc « CADRE DE PAGE » du fichier d'origine a été
   retiré, comme son propre commentaire le demandait. Il posait un fond et
   un centrage sur <body> et aurait écrasé la mise en page du site.

   Tout le reste est préfixé #gs / .gs- et ne touche à rien d'autre. */
/* ═════════════════════════════════════════════════════════════
   JETONS — calqués sur la capture : encre violette (jamais noire),
   lavande, plateformes violet moyen, jaune pour le super rebond.
   ═════════════════════════════════════════════════════════════ */
:root{
  --gs-encre:#3B2073;
  --gs-violet:#5C2E96;
  --gs-violet-clair:#8A63D8;
  --gs-plateforme:#7E5BD0;
  --gs-jaune:#F5C518;
  --gs-bleu:#4A7BD8;
  --gs-brun:#C08A5A;
  --gs-corail:#E4564F;

  --gs-fond:#FFFFFF;
  --gs-point:rgba(92,46,150,.11);
  --gs-surface:#FFFFFF;
  --gs-surface-2:#F3EDFC;
  --gs-lavande:#EFE7FC;
  --gs-texte:#3B2073;
  --gs-doux:#8A7FAD;          /* neutre biaisé violet, jamais gris pur */
  --gs-trait:#3B2073;
  --gs-trait-fin:rgba(59,32,115,.18);
  --gs-ombre:#3B2073;

  --gs-titre:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --gs-corps:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gs-data:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Le jeu était livré avec un mode sombre suivant le réglage du système.
   Retiré le 2026-09-09 : le site des Lilous n'a pas de mode sombre, le jeu
   apparaissait donc en violet nuit au milieu d'une page claire chez tous
   les visiteurs dont l'ordinateur est réglé en sombre. Pour le rétablir un
   jour, il faudra d'abord donner un mode sombre au reste du site. */

/* ═════════════════════════════════════════════════════════════
   LE WIDGET
   ═════════════════════════════════════════════════════════════ */
#gs, #gs *{box-sizing:border-box}
#gs{
  font-family:var(--gs-corps);
  color:var(--gs-texte);
  width:100%; max-width:560px; margin-inline:auto;
  display:flex; flex-direction:column; gap:14px;
  -webkit-tap-highlight-color:transparent;
}
/* Plusieurs de nos classes posent display:flex, ce qui annulait
   silencieusement l'attribut hidden : il doit toujours l'emporter. */
#gs [hidden]{display:none !important}
#gs p, #gs h1, #gs h2, #gs h3, #gs ul, #gs li{margin:0; padding:0}
#gs ul{list-style:none}
#gs :focus-visible{outline:3px solid var(--gs-jaune); outline-offset:2px; border-radius:6px}

/* ── barre haute ─────────────────────────────────────────── */
.gs-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--gs-surface);
  border:3px solid var(--gs-trait);
  border-radius:18px;
  box-shadow:4px 4px 0 var(--gs-ombre);
  padding:9px 12px;
}
.gs-alt{
  display:flex; align-items:baseline; gap:8px;
  padding:4px 12px 5px; border-radius:12px;
  background:var(--gs-surface-2); border:2px solid var(--gs-trait-fin);
}
.gs-alt-lab{
  font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gs-doux); font-weight:600;
}
.gs-alt-val{font-family:var(--gs-data); font-size:20px; font-variant-numeric:tabular-nums; line-height:1; font-weight:600}
.gs-alt-val b{font-weight:700}
.gs-alt--record .gs-alt-val{font-size:15px}
.gs-outils{display:flex; gap:6px; margin-left:auto}
.gs-icone{
  width:38px; height:38px; display:grid; place-items:center;
  font-size:17px; cursor:pointer;
  background:var(--gs-surface-2); color:var(--gs-texte);
  border:2.5px solid var(--gs-trait); border-radius:12px;
  box-shadow:2px 2px 0 var(--gs-ombre);
  transition:transform .09s, box-shadow .09s;
}
.gs-icone:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--gs-ombre)}
.gs-icone[aria-pressed="true"]{background:var(--gs-jaune)}
.gs-icone[data-inactif="1"]{opacity:.4}
.gs-icone:disabled{opacity:.32; cursor:default}

.gs-scene{display:flex; flex-direction:column; gap:10px; align-items:center;}
.gs-planche{
  position:relative;
  /* La planche a grandi (418 -> 560 px de large). Le rapport hauteur/largeur
     doit rester le meme : le monde fait 400 unites de large quelle que soit
     la taille de l'ecran, donc une planche plus large sans etre plus haute
     montrerait MOINS de hauteur de jeu — on verrait moins loin devant soi et
     le jeu deviendrait plus dur. La largeur est donc bornee par la hauteur
     reellement disponible, pas seulement par 560 px. */
  height:min(866px, calc(100dvh - 150px)); min-height:352px;
  width:min(100%, 560px, max(418px, calc((100dvh - 150px) * 0.647)));
  border:3.5px solid var(--gs-trait);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--gs-ombre);
  overflow:hidden;
  background:var(--gs-lavande);
  touch-action:none; user-select:none;
}
.gs-planche canvas{display:block; width:100%; height:100%}

/* Sur certains téléphones, un double-appui sur le jeu surlignait la zone
   en bleu, comme du texte. user-select seul ne suffit pas sur iOS : il faut
   aussi couper le menu contextuel long-appui et le voile de tap. */
.gs-planche, .gs-planche *{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

/* Plein écran : la planche prend tout, sans cadre ni coins arrondis.
   Le canvas suit tout seul — un ResizeObserver surveille déjà la planche. */
/* Le bouton de pause posé sur la planche : il ne sert qu en plein écran,
   où la barre d outils du dessus n est plus visible. */
.gs-pause-flottant{
  position:absolute; top:12px; right:12px; z-index:20;
  width:46px; height:46px; border-radius:14px;
  border:2.5px solid var(--gs-trait); background:rgba(255,253,247,.9);
  color:var(--gs-trait); font-size:15px; cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
.gs-planche.gs-plein .gs-pause-flottant,
.gs-planche:fullscreen .gs-pause-flottant,
.gs-planche:-webkit-full-screen .gs-pause-flottant{ display:flex; }
/* en pause, l écran de pause prend la main : le bouton ferait doublon */
.gs-planche.gs-plein.gs-en-pause .gs-pause-flottant{ display:none; }

/* Le champion, affiché en pause — de quoi se situer, et se la raconter. */
.gs-champion{
  margin:2px 0 14px; font-size:.92rem; font-weight:700;
  color:var(--gs-trait); display:flex; align-items:center;
  justify-content:center; gap:6px; flex-wrap:wrap;
}
.gs-champion .gs-etoiles{ letter-spacing:1px; }
.gs-champion b{ font-weight:800; }

/* Plein écran « maison », pour iPhone : Safari refuse le plein écran natif
   sur autre chose qu une vidéo. On sort la planche du flux et on lui donne
   tout l écran. dvh, pas vh : la barre d adresse apparaît et disparaît.
   Les marges sûres évitent l encoche et la barre gestuelle. */
.gs-planche.gs-plein{
  position:fixed; inset:0; z-index:9999;
  width:100vw; height:100dvh; max-width:none; max-height:none;
  border:none; border-radius:0; box-shadow:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:var(--gs-lavande);
}
/* pendant ce temps la page derrière ne doit pas défiler */
body.gs-plein-actif{ overflow:hidden; }
.gs-planche:fullscreen,
.gs-planche:-webkit-full-screen{
  width:100vw; height:100dvh; max-width:none; max-height:none;
  border:none; border-radius:0; box-shadow:none;
}

/* jauge de bonus actif */
.gs-jauge{
  position:absolute; left:12px; right:12px; top:12px;
  height:22px; border-radius:11px;
  border:2.5px solid var(--gs-trait); background:rgba(255,253,247,.82);
  overflow:hidden; display:flex; align-items:center;
}
.gs-jauge i{position:absolute; inset:0; transform-origin:left; background:var(--gs-jaune)}
.gs-jauge span{
  position:relative; font-size:11px; font-weight:600; color:var(--gs-encre);
  letter-spacing:.1em; text-transform:uppercase; padding-left:10px;
}

/* zones tactiles : révélées seulement sur appareil tactile */
.gs-cotes{position:absolute; inset:0; display:none; pointer-events:none}
#gs[data-tactile="1"][data-mode="jeu"] .gs-cotes{display:block}
.gs-cote{
  position:absolute; bottom:0; top:0; width:34%;
  display:grid; place-items:center; opacity:0; transition:opacity .12s;
}
.gs-cote::before{
  content:""; width:34px; height:34px; margin-bottom:16%;
  border-left:5px solid rgba(255,255,255,.95); border-bottom:5px solid rgba(255,255,255,.95);
  border-radius:5px; filter:drop-shadow(0 2px 0 rgba(43,36,64,.5));
}
.gs-cote.g{left:0}
.gs-cote.g::before{transform:rotate(45deg)}
.gs-cote.d{right:0}
.gs-cote.d::before{transform:rotate(-135deg)}
.gs-cote[data-on="1"]{opacity:.85}

/* ── écrans superposés ───────────────────────────────────── */
.gs-ecran{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:22px 18px; text-align:center;
  background:rgba(59,32,115,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.gs-carte{
  background:var(--gs-surface); color:var(--gs-texte);
  border:3px solid var(--gs-trait); border-radius:20px;
  box-shadow:5px 5px 0 var(--gs-ombre);
  padding:18px 18px 16px; width:100%; max-width:308px;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.gs-carte h2{
  font-family:var(--gs-titre); font-weight:800; line-height:1.05;
  font-size:26px; text-wrap:balance; color:var(--gs-violet);
}
.gs-carte p{font-size:13.5px; line-height:1.5; color:var(--gs-doux); text-wrap:balance}
.gs-gros{
  font-family:var(--gs-data); font-size:44px; line-height:1; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--gs-texte);
}
.gs-gros small{font-size:17px; color:var(--gs-doux); margin-left:3px}
.gs-bouton{
  font-family:var(--gs-titre); font-weight:800; font-size:19px;
  letter-spacing:.01em; cursor:pointer;
  padding:11px 26px 12px; width:100%;
  background:var(--gs-surface); color:var(--gs-violet);
  border:3px solid var(--gs-trait); border-radius:999px;
  box-shadow:4px 4px 0 var(--gs-ombre);
  transition:transform .09s, box-shadow .09s;
}
.gs-bouton:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--gs-ombre)}
.gs-bouton--doux{
  background:transparent; color:var(--gs-doux); font-size:15px;
  padding:8px 18px 9px; border-color:var(--gs-trait-fin); box-shadow:none;
}
.gs-bouton--doux:active{transform:translateY(1px)}
.gs-badge{
  font-family:var(--gs-titre); font-weight:800; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--gs-jaune); color:var(--gs-encre);
  border:2.5px solid var(--gs-trait); border-radius:999px;
  padding:3px 12px 4px; transform:rotate(-2.5deg);
}
.gs-perso{display:flex; gap:8px}
.gs-perso canvas{display:block; border-radius:14px; background:var(--gs-surface-2); border:2.5px solid var(--gs-trait); box-shadow:3px 3px 0 var(--gs-ombre)}
.gs-bilan{
  display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%;
  border-top:2px dashed var(--gs-trait-fin); padding-top:11px;
}
.gs-bilan div{display:flex; flex-direction:column; gap:1px; align-items:flex-start}
.gs-bilan dt, .gs-bilan .k{
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gs-doux); font-weight:600;
}
.gs-bilan .v{font-family:var(--gs-data); font-size:17px; font-variant-numeric:tabular-nums; font-weight:600}

/* ── pied : rappel des commandes ─────────────────────────── */
.gs-aide{
  display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center;
  font-size:12.5px; color:var(--gs-doux); line-height:1.5;
}
.gs-aide kbd{
  font-family:var(--gs-data); font-size:11.5px; color:var(--gs-texte);
  background:var(--gs-surface); border:2px solid var(--gs-trait-fin);
  border-bottom-width:3px; border-radius:6px; padding:1px 6px;
}
@media (prefers-reduced-motion:reduce){
  .gs-icone,.gs-bouton,.gs-perso button{transition:none}
}