/* =====================================================================
   Trame -- ce que le mode a plusieurs appareils ajoute a style.css
   ===================================================================== */

.etiquette{font-size:13px; color:var(--texte-doux); font-weight:700;
           text-transform:uppercase; letter-spacing:.08em; margin:6px 0 -4px;}
.lien{color:var(--or); text-decoration:none;}
.centre{text-align:center;}

.separateur{display:flex; align-items:center; gap:12px; margin:14px 0 6px;
            color:var(--texte-doux); font-size:13px;}
.separateur::before,.separateur::after{content:""; flex:1; height:1px;
                                       background:var(--trait);}

.champ.code{text-align:center; font-size:30px; font-weight:800;
            letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
            padding:16px 12px;}

.code-geant{
  font-size:clamp(46px,15vw,72px); font-weight:800; text-align:center;
  letter-spacing:.16em; text-indent:.16em; line-height:1.1; margin:6px 0;
  background:linear-gradient(135deg,var(--or-clair),var(--rose));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.bouton.petit.centre{margin:0 auto 8px; display:block;}

.pastille.large{font-size:16px; font-weight:700; text-align:left;
                padding:14px 16px; min-height:auto;}
.pastille.large small{text-align:left; letter-spacing:0; text-transform:none;
                      font-size:12.5px; margin-top:4px;}
.choix.colonne{flex-direction:column;}

/* qui est la, qui est parti */
.liste-joueurs li.hors-ligne{opacity:.5;}
.pastille-etat{width:9px; height:9px; border-radius:50%; flex:0 0 auto;
               background:var(--menthe);}
.pastille-etat.absent{background:var(--texte-doux);}
.pastille-etat.parti{background:var(--rouge);}
.marque-hote{font-size:11px; font-weight:700; color:var(--or);
             text-transform:uppercase; letter-spacing:.07em;}
.marque-moi{font-size:11px; font-weight:700; color:var(--texte-doux);
            text-transform:uppercase; letter-spacing:.07em;}

/* le bandeau de reconnexion */
.bandeau-lien{
  margin:0 18px; padding:10px 14px; border-radius:12px; font-size:14px;
  background:rgba(240,180,41,.12); border:1px solid rgba(240,180,41,.4);
  color:var(--or-clair); text-align:center;
}
.bandeau-lien.perdu{background:rgba(255,95,86,.12);
                    border-color:rgba(255,95,86,.4); color:var(--rouge);}

/* la frise du joueur, quand ce n'est pas son tour */
.frise.figee{opacity:.75;}

/* ------------------------------------------------------ contestation */
.bloc-contest{
  margin:0 18px; padding:14px; border-radius:var(--rayon);
  border:1px solid rgba(240,70,138,.45); background:rgba(240,70,138,.07);
}
.contest-tete{display:flex; align-items:center; gap:12px;}
.contest-tete .titre-bloc{flex:1; margin:0; color:var(--rose);}
.contest-ou{margin:8px 0 4px; font-size:15px;}
.contest-ou b{color:var(--or-clair);}

.sablier{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:17px;
  color:var(--texte); background:var(--nuit-3);
  border:2px solid var(--rose);
}
.sablier.presse{border-color:var(--rouge); color:var(--rouge);
                animation:battre .9s ease-in-out infinite;}
@keyframes battre{50%{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){.sablier.presse{animation:none}}

/* l'emplacement que le joueur a choisi : on le montre, on ne le propose pas */
.trou-frise.choisi{cursor:default;}
.trou-frise.choisi .plus{
  border-style:solid; border-color:var(--or); background:var(--or);
  color:#241a05; font-size:15px; width:auto; padding:0 9px; border-radius:99px;
}
.bloc-contest .trou-frise .plus{border-color:rgba(240,70,138,.6);
                                color:var(--rose);}
@media (hover:hover){
  .bloc-contest .trou-frise:hover .plus{background:var(--rose); color:#fff;
                                        border-color:var(--rose);}
}

.mot-contest{
  border-top:1px solid var(--trait); padding-top:12px; margin-top:2px;
  font-size:14.5px; color:var(--texte-doux); line-height:1.5;
}
.mot-contest b{color:var(--texte);}
.mot-contest .gagne{color:var(--menthe); font-weight:700;}
.mot-contest .perdu{color:var(--rouge); font-weight:700;}

@media (min-width:700px){
  .autres{flex-direction:row; flex-wrap:wrap;}
  .autre{flex:1 1 260px;}
}