/* app/salon.css — le salon d'une partie à deux téléphones (app/salon.js), dans le menu Multijoueur : le mode, les
   deux cartes (la sienne avec ses persos, Atelier et Prêt ; l'autre et son état), le compte à rebours, le bilan de J2.
   Les lignes de persos et les pastilles viennent d'app/escouade.css. */
.salon{position:relative;}
.salon-mode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px;}
.salon-groupe{display:flex;align-items:center;gap:6px;margin-right:6px;}
.salon-mode .arena-btn.salon-choix{flex:0 0 auto;min-height:36px;padding:0 14px;font-size:13px;}
.salon-mode .arena-btn.salon-choix.on{border-color:#46e6f0;background:rgba(70,230,240,.12);box-shadow:0 0 0 1px #46e6f0,0 0 14px rgba(70,230,240,.25);color:#7ff3ff;}
.salon-mode b.salon-choix{color:#7ff3ff;font-size:14px;}
.salon-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 6px;}
.salon-carte{margin:0;display:flex;flex-direction:column;min-width:0;}
.salon-carte .escouade-persos{flex:0 0 auto;}
.salon-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px;}
.salon-actions .arena-btn{flex:1 1 0;min-height:40px;}
.arena-btn.salon-pret{font-weight:900;letter-spacing:.06em;}
.arena-btn.salon-pret.on{border-color:#5fe3a1;background:rgba(95,227,161,.14);box-shadow:0 0 0 1px #5fe3a1,0 0 14px rgba(95,227,161,.3);color:#9df5c6;}
.salon-autre-perso{display:flex;align-items:center;gap:9px;padding:4px 2px;}
.salon-autre-perso canvas{width:52px;height:52px;flex:none;}
.salon-autre-perso b{font-size:14px;font-weight:800;}
.salon-autre-perso small{display:block;font-size:11px;color:#9ea6bd;}
.salon-autre-etat{margin:4px 0 2px;font-size:13px;font-weight:800;color:#ffc58a;}
.salon-carte.j1 .salon-autre-etat{color:#7ff3ff;}
.salon-carte .multi-note{margin-top:auto;}
.arena-btn.salon-couper{color:#ffb4bf;border-color:rgba(255,95,122,.5);}
/* Le compte à rebours : le chiffre en grand, sur un voile, au-dessus du salon. */
.salon-compte{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;border-radius:inherit;
 background:rgba(4,4,12,.55);font:900 92px/1 system-ui,sans-serif;color:#fff;text-shadow:0 0 28px #46e6f0,0 0 6px #46e6f0;}
.salon-compte[hidden]{display:none;}
/* Le bilan de J2, rejoué sur sa sauvegarde (app/progression.js bilan). */
.salon-bilan{margin:6px 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,154,60,.07);border:1px solid rgba(255,154,60,.35);}
.salon-bilan h3{margin:0 0 4px;font-size:14px;font-weight:800;color:#ffc58a;letter-spacing:.04em;text-transform:uppercase;}
@media (orientation:portrait){
 .salon-cartes{grid-template-columns:minmax(0,1fr);}
 .salon-carte .escouade-persos{max-height:112px;}
}
@media (orientation:landscape) and (max-height:430px){
 .salon-carte .escouade-perso{flex:0 0 72px;}
 .salon-carte .escouade-perso canvas{width:40px;height:40px;}
 .salon-mode{margin:2px 0;}
}
/* Le téléphone tenu dans l'autre sens que celui choisi au salon : un voile par-dessus tout (même l'écran de J1). */
.salon-tourne{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
 background:rgba(7,6,15,.96);color:#dce4f5;font:15px/1.4 system-ui,sans-serif;text-align:center;}
.salon-tourne[hidden]{display:none;}
.salon-tourne > div{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:22em;}
.salon-tourne b{font-size:20px;color:#7ff3ff;}
.salon-tourne span{color:#b4c0dc;}
.salon-tourne-tel{display:block;width:34px;height:60px;border:3px solid #ffc58a;border-radius:8px;box-shadow:0 0 14px rgba(255,154,60,.4);
 animation:salon-tourne 1.6s ease-in-out infinite alternate;}
.salon-tourne-tel.paysage{--fin:90deg;}
.salon-tourne-tel.portrait{--fin:0deg;transform:rotate(90deg);}
@keyframes salon-tourne{from{transform:rotate(calc(90deg - var(--fin)));}to{transform:rotate(var(--fin));}}