/* ======================================================================
   LES SALONS — le panneau (public/extra/salon.js).

   Bureau : une colonne à gauche, du haut de l'écran jusqu'au-dessus du
   comptoir (dont la hauteur est mesurée par menu.js : --comptoir-haut).
   Téléphone : une barre sous le bandeau (--entete-bas), qui se déplie par-
   dessus la scène ; pliée, elle résume la manche (jeu, phase, compte à
   rebours, pot). Téléphone couché : colonne à gauche, comme la boutique.
   ====================================================================== */

#salonPanneau{
  position:fixed;left:16px;top:16px;bottom:calc(var(--comptoir-haut,90px) + 12px);z-index:12;width:min(330px,34vw);
  display:none;flex-direction:column;gap:8px;
  background:rgba(10,18,14,.86);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.28);border-radius:18px;padding:12px 12px 10px;
  color:var(--creme);font-size:13px;
}
body[data-mode="seated"][data-jeu="salon"] #salonPanneau{display:flex}
body[data-jeu="salon"] .enseigne{visibility:hidden}

#salonPanneau .sx-tete{flex:none;display:flex;align-items:center;gap:8px;min-width:0}
#salonPanneau h3{font-family:"Fraunces",serif;font-weight:900;font-size:22px;color:var(--laiton-clair);letter-spacing:-.02em;line-height:1;margin:0;white-space:nowrap}
#salonPanneau .sx-resume{flex:1;min-width:0;font-size:11px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#salonPanneau .sx-plier{display:none;flex:none;font:inherit;font-size:16px;line-height:1;background:transparent;color:var(--creme);border:1px solid rgba(241,233,214,.25);border-radius:999px;width:30px;height:30px;cursor:pointer}
#salonPanneau .sx-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(201,162,39,.35) transparent}
#salonPanneau .sx-accueil,#salonPanneau .sx-salle{display:flex;flex-direction:column;gap:8px}
#salonPanneau [hidden]{display:none !important}
#salonPanneau .sx-aide{margin:0;font-size:12px;opacity:.65;line-height:1.45}
#salonPanneau .sx-vide{margin:0;font-size:12px;opacity:.55;text-align:center;padding:14px 6px}

#salonPanneau button{
  font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;background:var(--laiton);color:#1A1305;
  border:1px solid transparent;border-radius:999px;padding:8px 13px;cursor:pointer;transition:background .15s,transform .1s;
}
#salonPanneau button:hover:not(:disabled){background:var(--laiton-clair)}
#salonPanneau button.sec{background:transparent;color:var(--creme);border-color:rgba(241,233,214,.28)}
#salonPanneau button:disabled{opacity:.38;cursor:default}
#salonPanneau input{
  font:inherit;font-size:13px;min-width:0;background:rgba(0,0,0,.35);color:var(--creme);
  border:1px solid rgba(241,233,214,.2);border-radius:10px;padding:7px 9px;
}
#salonPanneau label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;opacity:.9}
#salonPanneau label em{font-style:normal;opacity:.6}
#salonPanneau .sx-rang{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* la liste */
.sx-liste{display:flex;flex-direction:column;gap:6px}
.sx-carte{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:12px;background:rgba(241,233,214,.05);border:1px solid rgba(241,233,214,.12)}
.sx-carteTete{display:flex;align-items:baseline;gap:8px;min-width:0}
.sx-carteTete b{flex:1;min-width:0;font-family:"Fraunces",serif;font-size:15px;color:var(--laiton-clair);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-carteTete .sx-jeu{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.sx-carteInfo{font-size:11px;opacity:.7;line-height:1.35}
.sx-carteRejoindre{display:flex;gap:6px}
.sx-carteRejoindre input{flex:1}
.sx-code{display:flex;gap:6px}
.sx-code input[name="code"]{width:70px;text-transform:uppercase;letter-spacing:.12em;text-align:center}
.sx-code input[name="mdp"]{flex:1}
.sx-creer{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:rgba(201,162,39,.07);border:1px solid rgba(201,162,39,.25)}
.sx-jeux{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#salonPanneau .sx-jeux button{background:rgba(241,233,214,.07);color:var(--creme);border-color:rgba(241,233,214,.18);border-radius:10px;padding:8px 6px}
#salonPanneau .sx-jeux button[aria-pressed="true"]{background:var(--laiton);color:#1A1305}

/* la salle */
.sx-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.sx-info b{font-family:"Fraunces",serif;font-size:17px;color:var(--laiton-clair)}
.sx-info .sx-code{font-size:11px;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:999px;background:rgba(241,233,214,.1)}
.sx-info span{font-size:11.5px;opacity:.75}
.sx-phase{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px;padding:8px 10px;border-radius:12px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.3)}
.sx-phase b{font-size:14px;color:var(--laiton-clair)}
.sx-phase .sx-compte{font-family:"Fraunces",serif;font-weight:900;font-size:20px;font-variant-numeric:tabular-nums}
.sx-phase .sx-compte.urgent{color:#FF6B5B}
.sx-phase i{grid-column:1 / -1;font-style:normal;font-size:11.5px;opacity:.8;font-variant-numeric:tabular-nums}
.sx-attente{margin:0;font-size:12px;opacity:.6}
.sx-auto{flex-direction:row !important;align-items:center;gap:6px !important}
.sx-miseMin input{width:110px}
.sx-resultat .sx-texte{margin:0 0 4px;font-weight:600;color:var(--laiton-clair)}
.sx-resultat ul,.sx-membres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sx-resultat li{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
.sx-resultat li.gain span{color:var(--vert-gain,#5FBF8A)}
.sx-resultat li.perte span{color:#E7776B}
.sx-membres li{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 0;min-width:0}
.sx-membres .sx-pastille{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.sx-membres .sx-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-membres em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;color:#1A1305;background:var(--laiton-clair);border-radius:999px;padding:1px 6px}
.sx-membres .sx-mise{font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}
#salonPanneau .sx-exclure{padding:0;width:22px;height:22px;background:transparent;color:var(--creme);border-color:rgba(241,233,214,.25)}
.sx-phrases,.sx-emotes{display:flex;flex-wrap:wrap;gap:4px}
#salonPanneau .sx-phrases button,#salonPanneau .sx-emotes button{font-size:11px;padding:5px 9px;background:rgba(241,233,214,.08);color:var(--creme);border-color:rgba(241,233,214,.16)}
#salonPanneau .sx-emotes button{border-color:rgba(201,162,39,.35)}
.sx-journal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:11px;opacity:.75}
.sx-journal li.sx-sys{opacity:.6;font-style:italic}
.sx-journal b{font-weight:600}
#salonPanneau .sx-quitter{align-self:flex-start}

/* le comptoir : les contrôles de mise du jeu */
.actionsX#actX-salon .sx-comptoir{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.actionsX#actX-salon .sx-jeuComptoir{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}

@media (min-width:901px) and (max-height:820px){
  #salonPanneau{padding:10px 10px 8px;gap:6px}
  #salonPanneau h3{font-size:18px}
  #salonPanneau .sx-aide{display:none}
}

/* ---------- téléphone tenu droit : une barre sous le bandeau, qui se déplie ---------- */
@media (max-width:900px){
  #salonPanneau{
    left:8px;right:8px;width:auto;top:calc(var(--entete-bas,58px) + 4px);bottom:auto;
    max-height:calc(100vh - var(--entete-bas,58px) - var(--comptoir-haut,90px) - 16px);
    padding:6px 8px;border-radius:14px;gap:6px;
  }
  #salonPanneau h3{font-size:15px}
  #salonPanneau .sx-plier{display:block}
  #salonPanneau.plie .sx-corps{display:none}
  #salonPanneau.plie .sx-plier{transform:rotate(180deg)}
  #salonPanneau:not(.dansSalon) .sx-resume{display:none}
  #salonPanneau .sx-aide{display:none}
  .sx-membres li{font-size:12px}
  /* panneau déplié par-dessus la scène : le gros verdict se tait, le résultat est écrit dans le panneau */
  body.salonDeplie[data-jeu="salon"] #verdict{display:none}
  /* le verdict (gain, perte) passe sous la barre du salon, pas dessus */
  html body[data-jeu="salon"][data-mode] #verdict{top:calc(var(--salon-bas,var(--entete-bas,190px)) + 6px)}
}
/* ---------- téléphone couché : colonne à gauche ---------- */
@media (max-width:900px) and (max-height:520px){
  html body #salonPanneau{left:8px;right:auto;top:calc(var(--entete-bas,58px) + 6px);bottom:calc(var(--comptoir-haut,74px) + 6px);width:min(300px,40vw);max-height:none}
  /* en colonne, le panneau ne se plie pas et le verdict se pose à sa droite */
  html body #salonPanneau.plie .sx-corps{display:flex}
  html body #salonPanneau .sx-plier{display:none}
  html body[data-jeu="salon"][data-mode] #verdict{left:calc(min(300px,40vw) + 16px);top:calc(var(--entete-bas,58px) + 5px)}
  body.salonDeplie[data-jeu="salon"] #verdict{display:block}
}

/* Bureau : la colonne de texte du jeu d'origine (#verdict) tombe au milieu de la scène. Au salon, le
   panneau tient la gauche : on la range à droite, au-dessus du comptoir. */
@media (min-width:901px){
  body[data-jeu="salon"] #verdict{left:auto;right:24px;width:min(340px,26vw);top:auto;bottom:calc(var(--comptoir-haut,104px) + 30px);transform:none;text-align:right}
  body[data-jeu="salon"] #verdict .gros{font-size:30px}
}

/* écran bas (portable couché, fenêtre réduite) : le bandeau du jeu est une rangée en haut — le panneau passe dessous */
@media (min-width:901px) and (max-height:560px){
  #salonPanneau{top:calc(var(--entete-bas,58px) + 6px)}
}