/* ==========================================================================
   BaRez Vous - la page Jeux
   Feuille a part : chargee par jeux.html seulement
   ========================================================================== */

.jeux-grille{display:grid;gap:clamp(1.6rem,4vw,2.8rem)}
.jeu{
  position:relative;border:1.5px solid var(--trait);border-radius:var(--rayon-l);
  background:var(--carte);box-shadow:var(--ombre);overflow:hidden;
}
.jeu-tete{display:flex;align-items:flex-start;gap:1rem;padding:clamp(1.2rem,3vw,1.8rem) clamp(1.2rem,3vw,2rem) 0}
.jeu-num{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--dore-fixe);color:var(--bois);
  display:grid;place-items:center;font-family:"Bangers","Caveat",cursive;font-size:1.4rem;letter-spacing:.04em;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.jeu-tete h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:0 0 .25em}
.jeu-tete p{margin:0;color:var(--brun-2);max-width:60ch}
.aire{margin:1.2rem clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem);display:grid;gap:1rem;justify-items:center}
.aire .aide{font-size:.86rem;color:var(--brun-pale);text-align:center;margin:0}
.aire .btn{font-size:.94rem}
.resultat-jeu{
  width:100%;max-width:560px;text-align:center;background:var(--creme-2);border:1.5px solid var(--trait);
  border-radius:var(--rayon);padding:1rem 1.2rem;min-height:3.2rem;transition:transform .3s var(--gout);
}
.resultat-jeu[hidden]{display:none}
.resultat-jeu .gros{display:block;font-family:var(--main);font-size:clamp(1.5rem,3.4vw,2rem);color:var(--dore);line-height:1.05;margin-bottom:.3rem}
.resultat-jeu .pop{animation:pop .45s var(--gout)}
@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}

/* ------------------------------------------------- 1. le verre qui passe */
.verre-jeu{width:min(100%,300px);text-align:center}
.verre-jeu svg{width:100%;height:auto;display:block;overflow:visible}
.verre-jeu .verre-etat{margin:.4rem 0 0;font-family:var(--main);font-size:1.35rem;color:var(--dore)}
.verre-jeu.renverse svg{animation:renverse .5s cubic-bezier(.36,.07,.19,.97)}
.verre-jeu.renverse #verre-gouttes{opacity:1;transition:opacity .2s}
@keyframes renverse{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}
.verre-curseur{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--brun-2)}
.verre-curseur input{width:180px;accent-color:var(--abricot)}
.verre-curseur[hidden]{display:none}

/* ------------------------------------------------- 2. le photomaton */
.photomaton{width:100%;max-width:560px;display:grid;gap:.9rem;justify-items:center}
.photomaton .choix{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.photomaton .bulles{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.photomaton .bulles input{position:absolute;opacity:0;width:0;height:0}
.photomaton .bulles label{border:1.5px solid var(--trait);border-radius:999px;padding:.4rem .9rem;cursor:pointer;font-family:var(--main);font-size:1.1rem;transition:.2s}
.photomaton .bulles input:checked + label{background:var(--dore-fixe);color:var(--bois);border-color:var(--dore-fixe)}
.photomaton-cadre{
  width:min(100%,360px);aspect-ratio:4/5;background:#1A1410;border:3px solid #1A1410;border-radius:6px;
  box-shadow:4px 4px 0 rgba(26,20,16,.85);display:grid;place-items:center;overflow:hidden;
}
.photomaton-cadre img{width:100%;height:100%;object-fit:cover;display:block}
.photomaton-cadre .vide{color:rgba(248,243,233,.55);font-family:var(--main);font-size:1.3rem;text-align:center;padding:1rem}
.photomaton .travail{color:var(--dore);font-family:var(--main);font-size:1.2rem}
.photomaton .travail[hidden]{display:none}
.photomaton .sortie{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.photomaton .sortie[hidden]{display:none}

/* ------------------------------------------------- 3. le shaker */
.shaker{width:120px;height:170px;transform-origin:50% 90%;transition:transform .2s}
.shaker.secoue{animation:shake .9s cubic-bezier(.36,.07,.19,.97) 2}
@keyframes shake{
  0%,100%{transform:rotate(0)}10%{transform:rotate(-16deg) translateY(-6px)}20%{transform:rotate(14deg) translateY(-10px)}
  30%{transform:rotate(-14deg) translateY(-4px)}40%{transform:rotate(12deg) translateY(-12px)}50%{transform:rotate(-10deg)}
  60%{transform:rotate(10deg) translateY(-8px)}70%{transform:rotate(-8deg)}80%{transform:rotate(6deg) translateY(-4px)}90%{transform:rotate(-3deg)}
}
.shaker-btn-ok{display:none}

/* ------------------------------------------------- 4. tchin */
.tchin{
  position:relative;width:min(100%,520px);aspect-ratio:5/3;border-radius:var(--rayon);
  background:var(--sauge-fonce);border:1.5px solid var(--trait);overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
}
.tchin .verre-g,.tchin .verre-d{position:absolute;bottom:8%;width:26%;transition:transform .35s var(--gout)}
.tchin .verre-g svg,.tchin .verre-d svg{width:100%;height:auto;display:block}
.tchin .verre-g{left:16%;transform-origin:50% 100%}
.tchin .verre-d{right:16%;transform-origin:50% 100%}
.tchin.clink .verre-g{transform:translateX(52%) rotate(14deg)}
.tchin.clink .verre-d{transform:translateX(-52%) rotate(-14deg)}
.tchin .doigt{
  position:absolute;top:12%;width:26px;height:26px;border-radius:50%;border:2px dashed rgba(248,243,233,.6);
  animation:doigt 1.8s ease-in-out infinite;
}
.tchin .doigt.g{left:26%}.tchin .doigt.d{right:26%;animation-delay:-.9s}
@keyframes doigt{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(14px);opacity:1}}
.tchin.clink .doigt{display:none}
.tchin .sfx-tchin{
  position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(0);
  font-family:"Bangers","Caveat",cursive;font-size:clamp(2.2rem,8vw,3.4rem);color:#F0C465;
  -webkit-text-stroke:2.5px #1A1410;paint-order:stroke fill;text-shadow:4px 4px 0 rgba(26,20,16,.9);
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.tchin.clink .sfx-tchin{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}
.tchin .etincelle{position:absolute;left:50%;top:38%;width:6px;height:6px;border-radius:50%;background:#F0C465;opacity:0}
.tchin.clink .etincelle{animation:etincelle .7s ease-out forwards}
.tchin .etincelle:nth-child(2){animation-delay:.05s}.tchin .etincelle:nth-child(3){animation-delay:.1s}.tchin .etincelle:nth-child(4){animation-delay:.15s}
@keyframes etincelle{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px))}}

/* ------------------------------------------------- 5. le sonometre */
.sono{width:min(100%,360px);text-align:center}
.sono svg{width:100%;height:auto;display:block}
#sono-aiguille{transition:transform .12s linear;transform-origin:150px 150px}
.sono-valeur{margin:.2rem 0 0;font-family:var(--serif);font-size:1.6rem;color:var(--encre)}
.sono-valeur small{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brun-pale)}
.sono.defi .sono-valeur{color:var(--dore)}

@media (max-width:600px){
  .jeu-tete{flex-direction:column;gap:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .shaker.secoue,.tchin .doigt,.tchin.clink .etincelle,.verre-jeu.renverse svg{animation:none}
}