/* Guess the Number : face à face à une table. L'adversaire descend du haut de l'écran (à l'envers), toi tu montes du bas,
   chacun avec son post-it sur le front ; au centre, une bulle dont la pointe désigne celui qui doit proposer.
   Base commune (couleurs, polices, boutons) : ../assets/charte/charte.css. */
.gtn{--postit-0:var(--jg-jaune);--postit-1:var(--jg-rose);--t:clamp(104px,min(44vw,calc((100vh - 380px) / 2.3)),230px);
  position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden}
.gtn[data-phase=jeu]{--t:clamp(130px,min(56vw,calc((100vh - 180px) / 2.3)),290px)}
.gtn[data-phase=accueil],.gtn[data-phase=attente],.gtn[data-phase=choix]{--t:clamp(120px,min(52vw,calc((100vh - 300px) / 2.3)),270px)} /* create, join, waiting and number screens: bigger players, the text still fits */

.titre{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;z-index:3;margin:0;font-size:clamp(38px,3.8vw,54px);line-height:1}
/* Turn number: under the title on computers, in its place on phones (level with the Quitter button). */
.numero-tour{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + clamp(38px,3.8vw,54px) + 8px);left:18px;z-index:3;margin:0;color:var(--jg-marine);font-size:17px;font-weight:800;line-height:1.4}
.outils{position:absolute;top:max(10px,env(safe-area-inset-top));right:16px;z-index:3;display:flex;gap:10px}
#micro .barre-micro{display:none}
#micro[aria-pressed=true]{background:var(--jg-rate);color:#fff}
#micro[aria-pressed=true] .barre-micro{display:inline}
.absence{position:absolute;left:50%;top:50%;z-index:4;width:max-content;max-width:calc(100% - 32px);margin:0;padding:10px 18px;border:var(--jg-contour);border-radius:999px;
  background:#fff6cf;box-shadow:var(--jg-ombre);font-weight:800;text-align:center;transform:translate(-50%,-50%)}

.table{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.joueurs{display:contents}
.centre{order:1;width:min(560px,100%);padding:0 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}

/* A player: a simple bust touching its edge of the screen, the post-it on the forehead. */
.joueur{position:relative;flex:none;margin:0;width:var(--t);transition:opacity .4s,width .4s}
.joueur svg{display:block;width:100%;height:auto}
.joueur.haut{order:0;transform:rotate(180deg)}
.joueur.bas{order:2}
.tete{transition:stroke .12s,stroke-width .12s}
.joueur.parle .tete{stroke:var(--jg-juste);stroke-width:6} /* like Discord: green while this person speaks */
.gtn[data-phase=jeu] .joueur:not(.actif){opacity:.45}
.papier{position:absolute;left:50%;top:2%;width:44%;aspect-ratio:1;display:grid;place-items:center;border-radius:2px 2px 8px 2px;
  background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,0) 16%),var(--couleur);box-shadow:0 1px 1px rgba(0,0,0,.06),0 12px 16px -10px rgba(23,36,65,.4);
  transform:translateX(-50%) rotate(var(--penche))}
#postit-0{--couleur:var(--postit-0)}
#postit-1{--couleur:var(--postit-1)}
.joueur.bas{--penche:-5deg}
.joueur.haut{--penche:-4deg}
.nombre{font-size:calc(var(--t) * .28);line-height:1;color:var(--jg-encre)}
/* The pseudo is centred on the chest, like a name badge. */
.nom{position:absolute;left:50%;top:80%;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;transform:translateX(-50%);
  font:800 clamp(13px,calc(var(--t) * .075),18px)/1.2 var(--jg-police)}
.haut .nombre{transform:rotate(180deg)} /* the opponent sits upside down, but reads the right way up */
.haut .nom{transform:translateX(-50%) rotate(180deg)}
.joueur.vide svg{opacity:.3}
.joueur.vide .papier{background:none;border:2px dashed #c9ccd4;box-shadow:none}
.joueur.vide .nombre,.joueur.vide .nom{color:#a3a7b0}

/* A pill holding a field and its button. */
.reponse{position:relative;display:flex;align-items:center;gap:8px;width:min(340px,100%);height:62px;padding:5px 5px 5px 22px;border:var(--jg-contour);border-radius:999px;background:#fff;box-shadow:var(--jg-ombre)}
.reponse input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--jg-encre);font:800 24px/1 var(--jg-police)}
.reponse input::placeholder{color:#8d93a1;font-size:19px;font-weight:700}
.reponse input:focus-visible{outline:none}
.reponse .jg-bouton{height:100%;min-height:0;padding:0 20px}
.reponse .jg-bouton:disabled{opacity:.3}

/* The bubble: its tail points at whoever must guess. */
.bulle{border-radius:28px}
.bulle::after{content:"";position:absolute;left:50%;width:22px;height:22px;margin-left:-11px;background:#fff;border:var(--jg-contour);border-width:0 2px 2px 0}
.gtn[data-tour=moi] .bulle::after{bottom:-12px;transform:rotate(45deg)}
.gtn[data-tour=autre] .bulle::after{top:-12px;transform:rotate(-135deg)}
/* Number fields: short (three digits at most), the number written by hand like the post-its in the middle of the white part, the button on the right. */
.reponse.centree{--bouton:112px;width:min(280px,100%);justify-content:center;padding:5px}
.reponse.centree input,.reponse.centree .attente{position:absolute;inset:0;width:100%;height:100%;padding:0 var(--bouton) 0 0;text-align:center}
.reponse.centree input{border-radius:inherit;font:700 42px/1 var(--jg-manuscrit)}
/* While empty, the field itself takes the placeholder's font, so « 1 à 100 » sits on the middle line instead of the big number's baseline. */
.reponse.centree input:placeholder-shown{font:700 19px/1 var(--jg-police)}
.reponse.centree .attente{display:flex;align-items:center;justify-content:center}
.reponse.centree .attente[hidden]{display:none}
.reponse.centree .jg-bouton{position:absolute;top:5px;right:5px;bottom:5px;z-index:1;height:auto}
.attente{display:flex;flex:1;align-items:center;gap:6px}
.attente[hidden]{display:none}
.attente i{width:9px;height:9px;border-radius:50%;background:var(--jg-marine);animation:points 1.2s ease-in-out infinite}
.attente i:nth-child(2){animation-delay:.2s}
.attente i:nth-child(3){animation-delay:.4s}
@keyframes points{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* After a guess: the number shakes, turns red and gets struck through like the logo's corrections, or turns green. */
.bulle.verdict{width:min(280px,100%);justify-content:center;padding:0 22px} /* same size as the field it replaces */
/* Above the bubble's white tail (it bit into the top of the digits), and wide enough to hold its strike, so nothing is cut while it shakes. */
.verdict-nombre{position:relative;z-index:1;padding:0 6px;font-size:52px;line-height:1}
.verdict.rate .verdict-nombre{color:var(--jg-rate);animation:secoue .45s}
.verdict.rate .verdict-nombre::after{content:"";position:absolute;left:0;right:0;top:48%;height:3px;border-radius:2px;background:var(--jg-rate);
  transform:rotate(-10deg) scaleX(0);transform-origin:left center;animation:barre .3s .3s ease-out forwards}
.verdict.trouve .verdict-nombre{color:var(--jg-juste);animation:saute .5s}
@keyframes secoue{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
@keyframes barre{to{transform:rotate(-10deg) scaleX(1)}}
@keyframes saute{40%{transform:scale(1.3)}}
.confettis{position:fixed;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.confettis i{position:absolute;width:9px;height:14px;border-radius:2px;animation:confetti 1.5s cubic-bezier(.15,.6,.35,1) forwards}
@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

.consigne{margin:0;font:800 clamp(18px,2.3vw,23px)/1.25 var(--jg-police);text-wrap:balance}
.aide{margin:0;color:var(--jg-gris);font-size:15px;line-height:1.4;text-wrap:balance}
/* The explanation of the create and join screens, used as their title: between the help text and the instruction size. */
/* « Jamel t’invite à jouer ! » in the logo's handwriting, so it stands apart from the explanation below. */
.invitation{margin:0;font-size:clamp(36px,4.2vw,48px);line-height:1;text-wrap:balance}
.aide.gras{max-width:26em;color:var(--jg-encre);font-size:clamp(17px,2vw,20px);font-weight:800;line-height:1.35}
.erreur{margin:0;min-height:1.4em;color:var(--jg-rate);font-weight:800}
.erreur:empty{display:none}
.ligne{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.lien{width:min(440px,100%);font-size:15px;text-overflow:ellipsis}
.jauge{width:min(240px,100%);height:12px;border:2px solid var(--jg-marine);border-radius:999px;overflow:hidden}
.jauge i{display:block;width:calc(var(--niveau,0) * 100%);height:100%;background:var(--jg-juste);transition:width .08s}
.statuts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0;padding:0;list-style:none;font-weight:700;color:var(--jg-gris)}
.statuts .ok{color:var(--jg-juste)}
.resultat{margin:0;font-size:clamp(46px,8vw,72px);line-height:.95}
.reprise{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:8px 8px 8px 18px;border:var(--jg-contour);border-radius:999px;background:#fff6cf;font-weight:800}

/* « Quitter la partie ? »: title, one line of explanation, then two buttons of the same width, with room between each. */
.confirmation{width:min(380px,calc(100% - 32px));padding:30px 28px 26px;border:var(--jg-contour);border-radius:22px;box-shadow:var(--jg-ombre);text-align:center}
.confirmation[open]{display:flex;flex-direction:column;align-items:center}
.confirmation::backdrop{background:rgba(23,36,65,.35)}
.confirmation .consigne{font-size:22px;line-height:1.2}
.confirmation .aide{margin-top:10px;line-height:1.45}
.confirmation .ligne{margin-top:24px;flex-wrap:nowrap}
.confirmation .ligne .jg-bouton{flex:1;max-width:150px}

/* Below 760px the title would run into the top player: hidden (the page title keeps the name). */
@media(max-width:760px){.titre{display:none}.numero-tour{top:max(22px,env(safe-area-inset-top))}}
/* On phones the microphone sits in the bottom right corner, within thumb reach; Quitter stays at the top. */
@media(max-width:600px){#micro{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:3}}
/* Short landscape screens: the two players side by side, both upright, the panel between them. */
@media(max-height:520px) and (orientation:landscape){
  .gtn,.gtn[data-phase=jeu]{--t:clamp(80px,calc((100vh - 110px) / 1.6),150px)}
  .table{flex-direction:row;align-items:flex-end;justify-content:space-around;padding-top:56px}
  .joueur.haut{transform:none}
  .haut .nombre{transform:none}
  .haut .nom{transform:translateX(-50%)}
  .centre{align-self:center;width:min(380px,46%)}
  .bulle::after{display:none}
}