/* ============================================================
   ASTRA GENESIS, 06-LOBBY.CSS
   v0.3.0, hub de connexion / inscription, écran avant le boot.
   v0.12.0, habillage "menu de jeu 2026" : fond plein cadre en photo
   de colonie (assets/img/fond/accueil-jeu.webp), voile sombre dans sa
   propre couche (même technique que .holo-stage::before,
   css/05-screens.css) pour rester lisible quel que soit le contenu
   de la photo, carte de connexion alignée à droite façon menu de jeu
   plutôt que centrée. Aucun changement fonctionnel (mêmes champs,
   mêmes actions), voir js/00b-lobby.js.
   ============================================================ */
#lobby{
  position:fixed;inset:0;z-index:10500;
  display:flex;align-items:center;justify-content:flex-end;
  padding:calc(48px*var(--scale));
  overflow:hidden;
  transition:opacity .5s ease, filter .5s ease;
}
#lobby.hide{opacity:0;filter:blur(6px);pointer-events:none;}

.lobby-bg{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(100deg, rgba(4,7,13,.94) 0%, rgba(4,7,13,.75) 32%, rgba(4,7,13,.25) 62%, rgba(4,7,13,.15) 100%),
    linear-gradient(0deg, rgba(4,7,13,.85), transparent 40%),
    url('../assets/img/fond/accueil-jeu.webp') center 38% / cover no-repeat;
}

.lobby-title{
  position:absolute;left:calc(48px*var(--scale));bottom:calc(52px*var(--scale));z-index:1;
  max-width:min(560px, 46vw);
}
.lobby-title-mark{
  font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem, 5vw, 4.2rem);
  line-height:1.02;letter-spacing:.12em;color:var(--ink-1);
  text-shadow:0 4px 40px rgba(45,212,191,.35), 0 2px 0 rgba(0,0,0,.6);
}
.lobby-title-tag{
  margin:calc(12px*var(--scale)) 0 0;font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}

.lobby-version{
  position:absolute;right:calc(24px*var(--scale));bottom:calc(14px*var(--scale));z-index:1;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);
}

.lobby-card{
  position:relative;z-index:1;
  width:min(380px, 88vw);
  background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-deep);padding:calc(28px*var(--scale)) calc(26px*var(--scale));
  display:flex;flex-direction:column;gap:calc(14px*var(--scale));
}
@media(max-width:820px){
  #lobby{flex-direction:column;justify-content:center;padding:calc(20px*var(--scale));}
  .lobby-title{position:static;max-width:none;text-align:center;margin-bottom:calc(18px*var(--scale));}
  .lobby-version{display:none;}
}

.lobby-tabs{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.lobby-tab{
  flex:1;text-align:center;padding:calc(9px*var(--scale)) 0;cursor:pointer;
  font-family:var(--font-head);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);transition:.15s;
}
.lobby-tab.active{color:var(--cyan);background:rgba(45,212,191,.08);}

.lobby-panel{display:none;flex-direction:column;gap:calc(12px*var(--scale));}
.lobby-panel.active{display:flex;}
.lobby-panel label{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;
}
.lobby-panel input{
  font-family:var(--font-body);font-size:.9rem;color:var(--ink-1);
  background:var(--panel-soft);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:calc(9px*var(--scale)) calc(11px*var(--scale));
}
.lobby-panel input:focus{outline:none;border-color:var(--cyan);}
/* v0.72.0 : case « Rester connecté » (composant partagé .ag-check) */
.lobby-remember{
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  font-size:.8rem;color:var(--ink-2);
}
.lobby-remember:hover{color:var(--ink-1);}
.lobby-remember:hover .ag-check{border-color:var(--cyan);}

.lobby-error{
  display:none;color:var(--rose);font-size:.78rem;
  border:1px solid rgba(248,113,113,.4);border-radius:var(--r-sm);
  padding:calc(8px*var(--scale)) calc(11px*var(--scale));
}
.lobby-error.lobby-info{color:var(--cyan);border-color:rgba(45,212,191,.4);}
.lobby-sep{text-align:center;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;}
.lobby-note{margin:0;font-size:.72rem;color:var(--ink-3);text-align:center;line-height:1.5;}

.hud-brand .pseudo{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);margin-left:6px;}