/* styles/views/lobby.css — extrait de styles.css L2768-L3034. Lobby V2. */

/* ============================================================
   LOBBY V2 — même shell que mode-config (harmonisation)
   ============================================================ */
.lobby-v2{
  flex:1;width:100%;margin:0;
  padding:40px clamp(20px, 3vw, 40px) 32px;
  display:flex;flex-direction:column;gap:24px;
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  box-sizing:border-box;
}

/* Section devient une "card" visuelle harmonisée */
.lv-section{
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--r-card);
  padding:16px 18px;
  box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:12px;
  min-height:0;
}
.lv-players-section{
  flex:1;
  overflow:hidden;
}

/* Lobby utilise le .mc-topbar commun — pas de style spécifique */

/* Header : titre à gauche + code inline à droite */
.lv-head{
  display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
  padding:4px 0 18px;
  border-bottom:1px dashed var(--border);position:relative;
  flex-shrink:0;
}
.lv-head-titles{
  display:flex;flex-direction:column;gap:8px;flex:1;min-width:280px;
}
.lv-title{
  font-family:"Unbounded", var(--sans);
  font-size:44px;font-weight:700;letter-spacing:-.88px;line-height:1;
  margin:0;color:var(--fg);
}
.lv-tag{
  color:var(--fg-dim);font-family:var(--sans);font-size:14px;
  margin:0;line-height:1.4;max-width:560px;
}

/* Bloc code compact aligné à droite */
.lv-head-code{
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;
}
.lv-head-code-lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.6px;font-weight:500;
  color:var(--muted);text-transform:uppercase;
}
.lv-head-code-row{
  display:flex;align-items:center;gap:8px;
}
.lv-copy-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  background:transparent;border:1px solid var(--border-strong);
  border-radius:var(--r-small);
  color:var(--fg-dim);cursor:pointer;
  transition:all .15s ease;
}
.lv-copy-btn:hover{
  border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.lv-copy-btn.copied{ border-color:var(--ok);color:var(--ok); }

.lv-section{ display:flex;flex-direction:column;gap:12px; }
/* Le sélecteur `[hidden]` doit être re-déclaré ici parce que `display:flex`
   ci-dessus écrase le `display:none` implicite de l'attribut HTML hidden.
   Sans cette règle, la section DIFFICULTÉ apparaît en Bon Trajet multi
   alors que JS a pourtant positionné `section.hidden = true`. */
.lv-section[hidden]{ display:none; }

/* --- Code tiles : compactes pour l'inline dans le header --- */
.lv-code{
  display:flex;gap:4px;
}
.lv-tile{
  width:32px;height:40px;
  perspective:600px;
  cursor:pointer;
}
.lv-tile-inner{
  position:relative;
  width:100%;height:100%;
  background:var(--panel-2);
  border:1px solid var(--accent);
  border-radius:var(--r-small);
  display:flex;align-items:center;justify-content:center;
  font-family:"Unbounded", var(--sans);font-size:20px;font-weight:700;letter-spacing:-.4px;
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.lv-tile-inner.flip{
  animation:lv-tile-flip .55s ease;
}
@keyframes lv-tile-flip{
  0%   { transform:rotateX(0deg); }
  50%  { transform:rotateX(90deg); }
  100% { transform:rotateX(0deg); }
}
.lv-tile:hover .lv-tile-inner{
  transform:translateY(-1px);
  border-color:var(--accent);
}

/* Body : Réseau (hug, gauche) + Joueurs (prend le reste, droite).
   Chaque section hug son contenu en hauteur ET en largeur. */
.lv-body{
  flex:1;
  display:flex;flex-direction:row;gap:14px;
  align-items:flex-start;     /* sections hug verticalement, pas de stretch */
  min-height:0;
}
.lv-body > .lv-section{ min-height:0; }

/* Réseau : hug width et height — juste la taille des pills */
#lvNetSection{
  flex:0 0 auto;
}
.lv-tiers{
  display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;
}
.lv-tiers .mc-pill-network{
  min-width:0;
  padding:10px 16px;
}

/* Joueurs : prend le reste de la largeur mais hauteur = contenu (+scroll si trop) */
.lv-players-section{
  flex:1 1 auto;
  display:flex;flex-direction:column;
}
.lv-players{
  flex:0 1 auto;             /* override le flex:1 précédent — hug content */
  max-height:min(60vh, 480px);
  overflow-y:auto;
}

/* Mobile : repasse en colonne, sections prennent la largeur */
@media (max-width:860px){
  .lv-body{ flex-direction:column; }
  #lvNetSection{ align-self:stretch; }
  .lv-tiers .mc-pill-network{ flex:1; }
}

/* --- Players list (scroll + gap, consolidated) --- */
.lv-players{
  display:flex;flex-direction:column;gap:8px;
  flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
}
.lv-players::-webkit-scrollbar{ width:6px; }
.lv-players::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px; }
.lv-player{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  transition:all .2s ease;
  position:relative;
}
.lv-player.me{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.lv-player.offline{ opacity:.4; filter:grayscale(.6); }
.lv-player.ready{
  border-color:var(--ok);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent);
}
.lv-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.02em;
  flex-shrink:0;
  box-shadow:0 0 0 2px var(--panel), 0 0 0 3px currentColor, 0 4px 14px rgba(0,0,0,.3);
}
.lv-player-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.lv-player-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lv-player-row2{display:flex;align-items:center;gap:8px}
.lv-player-name{
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.2px;
  color:var(--fg);
}
.lv-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.6px;font-weight:600;
  padding:2px 8px;border-radius:var(--r-pill);text-transform:uppercase;
}
.lv-tag-host{ background:var(--accent);color:#0a0a0a; }
.lv-tag-me{ border:1px solid var(--border-strong);color:var(--fg-dim); }
.lv-status{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--fg-dim);
}
.lv-status.ready{ color:var(--ok); font-weight:700; }
.lv-status.off  { color:var(--muted); }

.lv-ready-btn{
  padding:6px 16px;
  background:transparent;border:1px solid var(--accent);
  border-radius:var(--r-pill);
  color:var(--accent);cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:normal;
  text-transform:none;
  transition:all .15s ease;
  flex-shrink:0;
}
.lv-ready-btn:hover{
  background:var(--accent);color:#0a0a0a;
}
.lv-ready-btn.on{
  background:var(--ok);color:#0a0a0a;border-color:var(--ok);
}
.lv-ready-btn.on:hover{ filter:brightness(1.1); }

/* --- Tiers info & foot --- */
.lv-tiers-info{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;
}
.mc-pill-network.readonly{ cursor:not-allowed; }

.lv-foot{
  display:flex;flex-direction:column;gap:10px;padding-top:14px;
  align-items:flex-start;
  margin-top:auto;
}
.lv-foot .mc-cta[disabled]{
  opacity:.5;cursor:not-allowed;
  animation:none;
  background:var(--panel-2);color:var(--fg-dim);
  box-shadow:0 0 0 1px var(--border);
}
.lv-waiting{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 20px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:4px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--fg-dim);
}
.lv-waiting-icon{ font-size:18px; animation:lv-spin 2.4s linear infinite; display:inline-block; }
@keyframes lv-spin{ to{ transform:rotate(360deg); } }
.lv-waiting b{color:var(--fg);font-weight:700;}

@media (max-width:720px){
  .lv-title{ font-size:40px; }
  .lv-tile{ width:64px;height:78px; }
  .lv-tile-inner{ font-size:44px; }
  .lv-player{ flex-wrap:wrap; }
  .lv-ready-btn{ width:100%; padding:10px; }
}