/* styles/theme/pinboard/bt-lobby.css
 * Lobby Bon Trajet & Tracé — layout "station de métro" à 3 zones :
 *   - gauche  : panneau bakelite (.bk-panel, voir bt-lobby-station.css)
 *   - centre  : écran CRT ambre (.bt-crt, ici)
 *   - droite  : SIEL code + plaque rivetée boutons (bt-lobby-station.css)
 *
 * Ce fichier définit :
 *   - le layout grid du body lobby
 *   - le header (plaque émaillée + toggle SOLO/MULTI)
 *   - le style CRT ambre (liste joueurs)
 *   - la colonne droite (SIEL au-dessus, ctl-plate en dessous)
 *
 * Les composants "objets station" sont dans bt-lobby-station.css.
 * Max 300 L.
 */

/* Shell lobby : grille verticale stricte.
 *   row 1 : head (plaque)       — auto
 *   row 2 : body (console)       — 1fr (remplit tout l'espace) */
.bt-lobby{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  align-items:stretch !important;
  height:100% !important;
  min-height:0 !important;
  gap:14px !important;
  padding-top:30px !important;
}

/* Header : plaque centrée + toggle sous la plaque */
.bt-lobby-head{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; margin:0 auto;
}
.bt-lobby-plate{ display:flex; justify-content:center; }
.bt-lobby-plate-inner{ pointer-events:none; }
.bt-lobby-plate-inner .mp-plate{
  padding:18px 44px 14px !important;
  min-width:340px;
}
.bt-lobby-plate-inner .mp-title{
  font-size:40px !important;
  letter-spacing:2.5px;
}
.bt-lobby-plate-inner .mp-sub{
  font-size:13px !important;
  letter-spacing:2px;
}

/* Body : contient la console unifiée (écran + barre de contrôle). */
.bt-lobby-body{
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:0 16px 40px;
  min-height:0;
  height:100%;
  box-sizing:border-box;
  display:flex;
}

/* ─── CONSOLE = ÉCRAN + PANNEAU MÉTAL ─────────────────────────────
 * Un seul appareil physique. L'écran CRT noir est en haut, le
 * PANNEAU MÉTAL avec contrôles mécaniques est en dessous. Les deux
 * zones sont visuellement DISTINCTES (écran sombre vs métal clair)
 * mais dans le même cadre console. */
.bt-console{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-height:0;
  max-height:100%;
  background:#0a1420;
  border:1px solid #000;
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 4px 14px rgba(0,0,0,.45);
  overflow:hidden;
}
.bt-console > .bt-crt{
  flex:1 1 auto;
  min-height:0;
  border:none;
  border-radius:0;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.7);    /* creux sous l'écran */
  background:transparent;
}
.bt-console > .bt-crt::before{ bottom:0; }

/* ─── Écran CRT ambre — liste joueurs ─────────────────────────── */
.bt-crt{
  position:relative;
  display:flex; flex-direction:column;
  min-height:320px;
  padding:14px 20px 16px;
  border:1px solid #000;
  border-radius:2px;
  background:#0a1420;
  color:#e8a23a;
  font-family:'VT323','Share Tech Mono',monospace;
  box-shadow:inset 0 4px 12px rgba(0,0,0,.8), 0 4px 10px rgba(0,0,0,.3);
  overflow:hidden;
}
.bt-crt::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,
    transparent 0 3px,
    rgba(0,0,0,.25) 3px 4px);
  pointer-events:none;
  z-index:0;
}
.bt-crt > *{ position:relative; z-index:1; }

.bt-crt-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:15px; letter-spacing:2px;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px dashed rgba(232,162,58,.35);
  opacity:.8;
  text-transform:uppercase;
}

/* Code salle dans le header CRT — ligne dédiée sous l'en-tête,
 * grand format dot-matrix pour être bien lisible à partager. */
.bt-crt-code-row{
  display:flex; align-items:baseline; gap:12px;
  padding:4px 0 10px;
  margin-bottom:8px;
  border-bottom:1px dashed rgba(232,162,58,.35);
}
.bt-crt-code-label{
  font-size:13px; letter-spacing:2px;
  color:rgba(232,162,58,.55);
  text-transform:uppercase;
  flex-shrink:0;
}
.bt-crt-code{
  cursor:pointer;
  display:inline-flex; gap:4px;
  padding:4px 8px;
  border-radius:2px;
  transition:background .25s ease;
}
.bt-crt-code:hover{ background:rgba(255,191,102,.05); }
.bt-crt-code .siel-char{
  font-family:'Share Tech Mono','VT323',monospace;
  font-weight:700;
  font-size:clamp(24px, 2.4vw, 34px);
  line-height:1;
  color:#ffbf66;
  text-shadow:0 0 4px rgba(255,154,31,.65), 0 0 10px rgba(255,154,31,.3);
  min-width:.7em; text-align:center;
}
.bt-crt-code.siel-copied .siel-char{
  color:#7ee787;
  text-shadow:0 0 6px rgba(126,231,135,.85);
}
.bt-crt-mode{ font-weight:400; }
.bt-crt-count{ font-size:13px; letter-spacing:1.6px; opacity:.75; }
.bt-crt-count b{ font-weight:400; color:#ffbf66; }

.bt-crt-body{
  flex:1; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,162,58,.35) transparent;
}
.bt-crt-body::-webkit-scrollbar{ width:6px; }
.bt-crt-body::-webkit-scrollbar-thumb{
  background:rgba(232,162,58,.35); border-radius:3px;
}

.bt-crt-row{
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  gap:12px;
  align-items:baseline;
  padding:5px 0;
  font-size:20px; letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(232,162,58,.75);
}
.bt-crt-row.me{ color:#e8a23a; }
.bt-crt-caret{
  display:inline-block; width:14px;
  font-weight:400;
  color:#ffbf66;
}
.bt-crt-row.me .bt-crt-caret{
  animation:bt-crt-blink 1s steps(2, start) infinite;
}
@keyframes bt-crt-blink{ 50%{ opacity:.2; } }
.bt-crt-idx{
  opacity:.5; font-size:16px; letter-spacing:.8px;
  padding-right:6px; border-right:1px dashed rgba(232,162,58,.25);
}
.bt-crt-name{
  font-weight:400;
  text-overflow:ellipsis; overflow:hidden;
}
.bt-crt-flags{
  display:inline-flex; gap:6px;
  font-size:13px; letter-spacing:1.2px;
  opacity:.55;
}
.bt-crt-flag{ display:inline-block; }

.bt-crt-state{
  font-size:16px; letter-spacing:1.8px;
  text-align:right;
  min-width:110px;
}
.bt-state-wait { color:#ffbf66; }
.bt-state-ready{ color:#7ee787; }
.bt-state-off  { color:#6a6e75; opacity:.6; text-decoration:line-through; }

/* ─── Retire l'ancien layout .lv-* qu'on n'utilise plus ───────── */
.bt-lobby .lv-section,
.bt-lobby .lv-head,
.bt-lobby .lv-head-code,
.bt-lobby .lv-title,
.bt-lobby .lv-tag,
.bt-lobby .lv-head-titles,
.bt-lobby .bt-lobby-options,
.bt-lobby .bt-lobby-actions{ display:none !important; }

/* ─── Mobile (≤ 720px) : plaque et écran compactés ────────────── */
@media (max-width: 720px){
  .bt-lobby{ padding-top:18px !important; gap:10px !important; }
  .bt-lobby-plate-inner .mp-plate{
    min-width:0;
    max-width:calc(100vw - 32px);
    padding:12px 22px 10px !important;
  }
  .bt-lobby-plate-inner .mp-title{ font-size:clamp(24px, 7.5vw, 34px) !important; }
  .bt-lobby-plate-inner .mp-sub{ font-size:11px !important; letter-spacing:1.5px; }
  .bt-lobby-body{ padding:0 10px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .bt-crt{ min-height:200px; padding:10px 12px 12px; }
  .bt-crt-row{ font-size:17px; gap:8px; }
  .bt-crt-state{ min-width:0; font-size:14px; }
  .bt-crt-code .siel-char{ font-size:clamp(22px, 7vw, 30px); }
}