/* styles/theme/pinboard/bt-lobby-station.css
 * ═══════════════════════════════════════════════════════════════════
 * Lobby v3 : CONSOLE UNIFIÉE — un seul appareil (bt-console) avec
 * écran CRT en haut + barre de contrôle fine (.bt-strip) en bas.
 * Les options sont des contrôles inline minimalistes, les boutons
 * PRÊT/LANCER sont des boutons fins horizontaux.
 *
 * Préfixes : .bt-strip-*, .bt-opt-*, .btn-thin, .rocker*, .rp-*,
 *            .num-*, .bt-difficulty-mini.
 * Max 300 L.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Barre de contrôle MÉTAL (.bt-strip) ──────────────────────
 * PAS dans l'écran. C'est un PANNEAU MÉTAL séparé visuellement du
 * CRT, en dessous. Les options et boutons sont des contrôles
 * MÉCANIQUES montés sur ce métal, avec relief physique.
 *
 * Aluminium brossé avec micro-stries verticales, bordures sombres,
 * rivets aux 4 coins pour renforcer l'effet "panneau industriel". */
.bt-strip{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  flex-wrap:wrap;
  gap:14px;
  padding:14px 18px;
  background:
    /* Micro-stries brossage horizontal */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0 1px,
      rgba(0,0,0,.04) 1px 2px),
    /* Dégradé métal brossé */
    linear-gradient(180deg, #8a867d 0%, #6a6660 50%, #4a4641 100%);
  border-top:2px solid #1a1a1a;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 6px rgba(0,0,0,.45);
  flex-shrink:0;
  min-height:0;
}
/* 4 rivets métalliques aux coins du panneau */
.bt-strip::before, .bt-strip::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #c9bfa3 0%, #4a463d 65%, #0f0e0b 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.12);
  z-index:1;
}
.bt-strip::before{ top:6px; left:10px; }
.bt-strip::after { top:6px; right:10px; }

/* ─── Zone RÉGLAGES : plaque creusée dans le métal ──────────────
 * Les commandes de la room vivent dans UN renfoncement clairement
 * délimité, avec titre gravé. Pour les invités (.readonly-zone),
 * la zone reste LISIBLE (les valeurs gardent leurs couleurs — il
 * faut pouvoir lire la config) mais inerte + badge « HÔTE ». */
.bt-strip-settings{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 16px;
  min-width:0;
  background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.1) 100%);
  border:1px solid rgba(0,0,0,.5);
  border-radius:4px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.18);
}
.bt-strip-settings-head{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:5px;
  padding-right:16px;
  border-right:1px solid rgba(0,0,0,.4);
  box-shadow:1px 0 0 rgba(255,255,255,.12);   /* filet gravé */
  flex-shrink:0;
}
.bt-strip-settings-lbl{
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:2.2px;
  color:rgba(10,10,10,.78);
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
/* Badge HÔTE (invités) : étiquette ambre — écho de l'écran CRT */
.bt-strip-settings-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px;
  font-family:'Share Tech Mono','VT323',monospace;
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase;
  background:#15161a;
  color:#e8a23a;
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(232,162,58,.4);
}
.bt-strip-settings-badge[hidden]{ display:none; }
/* Cadenas CSS-only (currentColor) — même recette que le chip « Fixe » */
.bt-lock{
  position:relative;
  display:inline-block;
  width:9px; height:11px;
  flex-shrink:0;
}
.bt-lock::before{
  content:''; position:absolute; left:0; bottom:0;
  width:9px; height:6.5px;
  background:currentColor;
  border-radius:1px;
}
.bt-lock::after{
  content:''; position:absolute; left:1.8px; top:0;
  width:3.6px; height:5px;
  border:1.4px solid currentColor;
  border-bottom:none;
  border-radius:3px 3px 0 0;
}

.bt-strip-options{
  flex:1 1 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(14px, 2vw, 30px);
  min-width:0;
  flex-wrap:wrap;
}

.bt-strip-actions{
  flex:0 1 auto;
  margin-left:auto;
  display:flex;
  align-items:stretch;
  gap:10px;
}

/* Chaque option = petit groupe vertical sur le métal. Label GRAVÉ
 * dans le métal (texte sombre + highlight clair = relief incrusté). */
.bt-opt{
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  min-width:0;
  position:relative;
}
.bt-opt[hidden]{ display:none; }
/* Lecture seule (invités) : inerte mais LISIBLE — pas de grayscale,
 * les couleurs portent l'information (réseau actif, manches, LED). */
.readonly-zone .bt-opt,
.bt-opt.readonly{
  pointer-events:none;
  opacity:.8;
}
/* Label gravé dans le métal : texte sombre + shadow clair */
.bt-opt-label{
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:1.8px;
  color:rgba(10,10,10,.75);
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* ─── Rocker mini (JOKERS) ──────────────────────────────────────
 * Version compacte du rocker rouge : 24×30, même logique d'état
 * (rouge vif/halo quand ON, gris éteint quand OFF) mais à l'échelle
 * d'un bouton inline. */
.rocker-mini{
  position:relative;
  width:34px; height:46px;
  background:#2a2b2e;
  border:1.5px solid #000;
  border-radius:4px;
  padding:3px;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 3px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.4);
  transition:filter .15s ease, box-shadow .25s ease;
}
.rocker-mini:hover:not([aria-disabled="true"]){ filter:brightness(1.08); }
.rocker-mini .rocker-cap{
  width:100%; height:100%;
  border-radius:2px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding:3px 0 4px;
  font-family:'Share Tech Mono','VT323',monospace;
  font-weight:800; font-size:10px;
  line-height:1;
  transition:background .25s ease, box-shadow .25s ease, color .25s ease;
}
.rocker-mini .rocker-mark{ display:block; }

/* ON : rouge éclatant + halo */
.rocker-mini[data-state="on"]{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 3px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.4),
    0 0 8px rgba(255,50,30,.55),
    0 0 16px rgba(255,50,30,.25);
}
.rocker-mini[data-state="on"] .rocker-cap{
  background:linear-gradient(180deg, #ff5040 0%, #e61a08 50%, #8a0f05 100%);
  color:rgba(0,0,0,.8);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.4),
    inset 0 4px 6px rgba(0,0,0,.55),
    inset 0 -2px 4px rgba(255,120,100,.3);
}
.rocker-mini[data-state="on"] .rocker-mark-on{
  color:#fff;
  text-shadow:0 0 3px rgba(255,255,255,.7);
}
.rocker-mini[data-state="on"] .rocker-mark-off{ color:rgba(0,0,0,.4); }
/* OFF : gris éteint */
.rocker-mini[data-state="off"] .rocker-cap{
  background:linear-gradient(180deg, #4a4845 0%, #2a2826 50%, #1a1817 100%);
  color:rgba(233,227,207,.3);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 -4px 6px rgba(0,0,0,.7);
}
.rocker-mini[data-state="off"] .rocker-mark-off{
  color:rgba(233,227,207,.85);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.rocker-mini[data-state="off"] .rocker-mark-on{ color:rgba(233,227,207,.18); }

/* ─── Pastilles RATP mini (RÉSEAU) ──────────────────────────── */
.rp-row-mini{
  display:flex; gap:8px; align-items:center;
}
.rp-row-mini .rp-pastille{
  appearance:none; border:none; cursor:pointer;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed','Barlow Semi Condensed',sans-serif;
  font-weight:800;
  transition:filter .15s ease, transform .1s ease, box-shadow .18s ease;
}
.rp-row-mini .rp-pastille.rp-metro{
  width:40px; height:40px; border-radius:50%;
  background:#f8f6f0; color:#003f7a;
  font-size:22px; letter-spacing:-.3px;
  border:2.5px solid #003f7a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
}
.rp-row-mini .rp-pastille.rp-rer{
  padding:6px 12px; min-height:40px; border-radius:6px;
  background:#003f7a; color:#f8f6f0;
  font-size:15px; letter-spacing:.5px;
  border:1.5px solid #f8f6f0;
  box-shadow:inset 0 0 0 1px #003f7a, 0 1px 2px rgba(0,0,0,.4);
}
.rp-row-mini .rp-pastille:not(.active){
  filter:grayscale(1) brightness(.45); opacity:.4;
}
.rp-row-mini .rp-pastille.active{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 0 6px rgba(255,154,31,.55),
    0 1px 2px rgba(0,0,0,.3);
}
.rp-row-mini .rp-pastille:hover:not(.readonly){ transform:translateY(-1px); }

/* ─── Voyants numériques mini (MANCHES) ─────────────────────── */
.num-display-mini{
  display:inline-flex; gap:3px;
  padding:3px;
  background:#050608;
  border:1px solid #000;
  border-radius:2px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
}
.num-display-mini .num-tile{
  appearance:none; cursor:pointer;
  min-width:36px; padding:10px 8px;
  background:#0a0b0d;
  border:1px solid #1c1e22;
  border-radius:2px;
  color:rgba(200,180,150,.22);
  font-family:'Share Tech Mono','VT323',monospace;
  font-weight:700; font-size:16px;
  line-height:1;
  text-align:center;
  transition:color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.num-display-mini .num-tile:hover:not(.active){
  color:rgba(255,191,102,.5);
  border-color:#3a3c42;
}
.num-display-mini .num-tile.active{
  background:linear-gradient(180deg, #2a1a00 0%, #0a0b0d 100%);
  border-color:#ff9a1f;
  color:#ffbf66;
  text-shadow:0 0 3px rgba(255,154,31,.85);
  box-shadow:0 0 5px rgba(255,154,31,.35);
}

/* ─── Difficulté = 3 BOUTONS POUSSOIRS labellisés ──────────────
 * Interaction évidente : 3 boutons côte à côte avec le mot complet
 * du niveau. L'actif est enfoncé + LED colorée allumée à gauche du
 * label. Aucun doute sur "quoi cliquer". */
.diff-buttons{
  display:inline-flex; gap:4px;
  padding:3px;
  background:#1a1b1e;
  border:1px solid #000;
  border-radius:3px;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
.diff-pb{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  min-height:42px;
  padding:11px 14px;
  background:linear-gradient(180deg, #3a3c42 0%, #22252a 100%);
  border:1px solid #0a0b0d;
  border-radius:2px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:1.3px;
  text-transform:uppercase;
  color:rgba(233,227,207,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 1px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.3);
  transition:all .15s ease;
}
.diff-pb:hover:not(.active):not(.readonly){
  color:rgba(233,227,207,.85);
  background:linear-gradient(180deg, #4a4d53 0%, #2a2d32 100%);
}
/* LED voyant à gauche du label : éteinte par défaut, allumée quand actif */
.diff-pb-led{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #1a1b1f 0%, #050608 100%);
  border:1px solid #000;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.8);
  flex-shrink:0;
}
.diff-pb-label{ line-height:1; }
/* État ACTIF : bouton enfoncé + LED colorée allumée */
.diff-pb.active{
  background:linear-gradient(180deg, #1a1c20 0%, #0a0b0d 60%, #14161a 100%);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(255,255,255,.05);
  color:rgba(233,227,207,.95);
  font-weight:800;
}
.diff-pb.active.diff-pb-easy .diff-pb-led{
  background:radial-gradient(circle at 35% 35%, #a8f0b4 0%, #2ea84c 65%, #144d24 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 5px rgba(126,231,135,.75);
}
.diff-pb.active.diff-pb-medium .diff-pb-led{
  background:radial-gradient(circle at 35% 35%, #ffe3a0 0%, #e5a436 65%, #805818 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 5px rgba(255,164,54,.75);
}
.diff-pb.active.diff-pb-hard .diff-pb-led{
  background:radial-gradient(circle at 35% 35%, #ffa098 0%, #d63a2e 65%, #601810 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 5px rgba(255,80,50,.85);
}
.diff-pb.readonly{ cursor:not-allowed; opacity:.6; }

/* ─── Boutons mécaniques PRÊT / LANCER ──────────────────────────
 * Montés sur le panneau métal, avec relief physique bien marqué
 * (highlight haut + shadow bas). Couleurs de cap : vert signal
 * pour PRÊT, bleu RATP pour LANCER. */
.btn-thin{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 26px;
  min-height:52px;
  border:1.5px solid #0a0b0d;
  border-radius:3px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800; font-size:13px; letter-spacing:2px;
  text-transform:uppercase;
  transition:all .12s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 3px rgba(0,0,0,.4),
    0 2px 3px rgba(0,0,0,.4);
}
.btn-thin:hover:not([disabled]){
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.btn-thin:active:not([disabled]){ transform:translateY(0); }

.btn-thin.btn-ready{
  background:linear-gradient(180deg, #3fb55a 0%, #1d7a36 55%, #0c4818 100%);
  color:#f5fff8;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.btn-thin.btn-ready.is-on{
  /* Confirmé PRÊT : bouton "enfoncé" + LED + halo */
  background:linear-gradient(180deg, #0c4818 0%, #1d7a36 60%, #3fb55a 100%);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.5),
    inset 0 -1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(126,231,135,.55);
}
.btn-thin.btn-start{
  background:linear-gradient(180deg, #4e87c2 0%, #164a82 55%, #0a2a54 100%);
  color:#f4f7fb;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.btn-thin.btn-start[disabled]{
  background:linear-gradient(180deg, #5a5a5a 0%, #2e2e2e 55%, #1a1a1a 100%);
  color:rgba(245,241,230,.35);
  cursor:not-allowed;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -2px 3px rgba(0,0,0,.3);
}

/* Responsive compact : viewports courts (≤ 700px de haut).
 * On resserre les espacements SANS retomber sous les cibles
 * tactiles (~40px minimum). */
@media (max-height: 700px){
  .bt-strip{ padding:10px 12px; gap:10px; }
  .bt-strip-settings{ padding:8px 12px; gap:12px; }
  .bt-strip-options{ gap:12px; }
  .bt-opt{ gap:4px; }
  .bt-opt-label{ font-size:10px; letter-spacing:1.4px; }
  .rocker-mini{ width:30px; height:40px; }
  .rocker-mini .rocker-cap{ font-size:9px; padding:2px 0 3px; }
  .rp-row-mini .rp-pastille.rp-metro{ width:36px; height:36px; font-size:19px; }
  .rp-row-mini .rp-pastille.rp-rer{ padding:5px 10px; font-size:13px; min-height:36px; }
  .num-display-mini .num-tile{ min-width:32px; padding:8px 6px; font-size:14px; }
  .diff-pb{ padding:9px 11px; font-size:10px; }
  .btn-thin{ min-height:44px; padding:0 18px; font-size:12px; letter-spacing:1.5px; }
}

/* Mobile (≤ 720px) : pupitre empilé — réglages pleine largeur puis
 * actions pleine largeur, LANCER prioritaire. Safe-area en bas. */
@media (max-width: 720px){
  .bt-strip{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .bt-strip-settings{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .bt-strip-settings-head{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:0 0 8px;
    border-right:none;
    box-shadow:none;
    border-bottom:1px solid rgba(0,0,0,.4);
  }
  .bt-strip-options{
    justify-content:space-between;
    gap:12px 16px;
  }
  .bt-strip-actions{
    margin-left:0;
    width:100%;
  }
  .bt-strip-actions .btn-thin{ flex:1 1 auto; }
  /* LANCER = héros : 2× la place de PRÊT quand les deux sont là */
  .bt-strip-actions .btn-start{ flex:2 1 auto; }
}