/* styles/theme/pinboard/live-count.css
 * ══════════════════════════════════════════════════════════════════
 * COMPTEUR LIVE — panneau d'information de quai RATP suspendu
 * (style "1er train / 2e train" Montreuil) ré-interprété pour ne
 * montrer qu'un compteur de joueurs, sans référence à une ligne.
 *
 * Structure :
 *   .live-display          conteneur global positionné top-right
 *   ├ .ld-arm              bras métallique de fixation au plafond
 *   │   ├ .ld-arm-rod        tige grise
 *   │   └ .ld-arm-cap        embout à la jonction caisson
 *   └ .ld-panel            caisson blanc façon panneau d'information
 *       ├ .ld-row            1ère ligne : "Joueurs" + afficheur LED
 *       ├ .ld-row .ld-row-sub 2ème ligne : sous-label + pastille live
 *       └ .ld-stripe         bande verte basse (identité visuelle)
 * ══════════════════════════════════════════════════════════════════ */

.pinboard-theme .live-display{
  position:absolute;
  top:0; right:108px;
  z-index:50;
  display:flex; flex-direction:column; align-items:flex-end;
  pointer-events:none;
  font-family:'Barlow','Archivo',sans-serif;
}

/* ─── BRAS DE FIXATION (suspension au plafond) ───────────────── */
.pinboard-theme .ld-arm{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  margin-right:24px;            /* décalage vers l'intérieur du caisson */
  height:22px;
}
.pinboard-theme .ld-arm-rod{
  display:block;
  width:6px; height:22px;
  background:linear-gradient(90deg, #7a7870 0%, #b8b5aa 45%, #6e6c64 100%);
  border-radius:0 0 1px 1px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.35);
}
.pinboard-theme .ld-arm-cap{
  display:block;
  width:18px; height:6px;
  margin-top:-1px;
  background:linear-gradient(180deg, #9a968b 0%, #5a5850 100%);
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 2px 3px rgba(0,0,0,.4);
}

/* ─── CAISSON (panneau blanc) ──────────────────────────────── */
.pinboard-theme .ld-panel{
  position:relative;
  display:flex; flex-direction:column;
  gap:2px;
  min-width:210px;
  padding:8px 14px 6px;
  background:#f5f4ef;
  border:1px solid rgba(0,0,0,.35);
  border-radius:2px;
  box-shadow:
    0 6px 14px rgba(0,0,0,.45),
    0 14px 28px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
  color:#111;
}

/* ─── RANGÉES ─────────────────────────────────────────────── */
.pinboard-theme .ld-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-bottom:2px;
}
.pinboard-theme .ld-row:first-child{
  border-bottom:1px solid rgba(0,0,0,.2);
  padding-bottom:5px;
  margin-bottom:3px;
}
.pinboard-theme .ld-label{
  font-family:'Barlow','Archivo',sans-serif;
  font-weight:700; font-size:16px;
  color:#14171a;
  letter-spacing:.2px;
  line-height:1;
}
.pinboard-theme .ld-row-sub{
  padding-bottom:6px;
}
.pinboard-theme .ld-sublabel{
  font-family:'Barlow','Archivo',sans-serif;
  font-weight:600; font-size:10px;
  letter-spacing:1.2px;
  color:#4a5258;
  text-transform:uppercase;
  line-height:1;
}

/* ─── AFFICHEUR LED DOT-MATRIX ─────────────────────────────── */
.pinboard-theme .ld-matrix-wrap{
  display:inline-flex; align-items:center;
  padding:3px 9px;
  background:#1a1611;
  border:1px solid #0a0806;
  border-radius:1px;
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.04);
  /* grille dot-matrix simulée par fond en pointillés très sombres */
  background-image:
    radial-gradient(circle, rgba(255,154,31,.04) .5px, transparent .8px),
    linear-gradient(180deg, #1a1611 0%, #0e0c0a 100%);
  background-size:2.5px 2.5px, auto;
}
.pinboard-theme .ld-matrix{
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  font-size:18px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#ff9a1f;
  text-shadow:
    0 0 4px rgba(255,154,31,.9),
    0 0 10px rgba(255,154,31,.45),
    0 0 16px rgba(255,154,31,.2);
  line-height:1;
}

/* ─── PASTILLE LIVE (dot animé) ────────────────────────────── */
.pinboard-theme .ld-live-dot{
  width:6px; height:6px; border-radius:50%;
  background:#2aa747;
  box-shadow:0 0 5px rgba(42,167,71,.9);
  animation:ld-pulse 1.4s ease-in-out infinite;
}
@keyframes ld-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.4; transform:scale(.85); }
}

/* ─── BANDE DE COULEUR BASSE (identité RATP) ───────────────
 * La couleur est tirée au sort parmi les lignes de métro par
 * src/ui/landing-bits/pinboard-stamp.js et injectée via
 * --stripe-color. Fallback vert ligne 12 si JS pas exécuté. */
.pinboard-theme .ld-stripe{
  position:absolute; left:0; right:0; bottom:0;
  height:7px;
  --stripe-color:#007852;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--stripe-color) 100%, white 10%) 0%,
      var(--stripe-color) 55%,
      color-mix(in srgb, var(--stripe-color) 70%, black 30%) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

/* ─── DARK MODE : caisson plus sombre, mais l'identité reste
 *     reconnaissable (papier peint jauni, LED bien visible) ──── */
html[data-theme="dark"] .pinboard-theme .ld-panel{
  background:#e8e5dc;          /* caisson patiné plutôt que noir */
  border-color:rgba(0,0,0,.55);
  box-shadow:
    0 8px 18px rgba(0,0,0,.55),
    0 18px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="dark"] .pinboard-theme .ld-label{ color:#0a0d0e; }
html[data-theme="dark"] .pinboard-theme .ld-sublabel{ color:#2e363c; }
html[data-theme="dark"] .pinboard-theme .ld-row:first-child{
  border-bottom-color:rgba(0,0,0,.3);
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 720px){
  .pinboard-theme .live-display{
    right:64px;
  }
  .pinboard-theme .ld-panel{
    min-width:150px;
    padding:6px 10px 5px;
  }
  .pinboard-theme .ld-label{ font-size:13px; }
  .pinboard-theme .ld-matrix{ font-size:15px; }
}