/* styles/theme/pinboard/lobby.css
 * Surcharge pinboard du lobby : DA landing appliquée (tuiles RATP,
 * typo Barlow Semi Condensed, zéro glow/néon). Tokens repris de
 * plaques.css. Layout 2 cols (RÉSEAU hug / JOUEURS flex) hérité de
 * styles/views/lobby.css.
 */

/* NB : le sélecteur n'a PAS d'espace — `#view-lobby` a déjà la classe
   `pinboard-theme`, donc `.pinboard-theme#view-lobby` cible l'élément
   lui-même, pas un descendant fictif. */
#view-lobby.pinboard-theme{
  --lv-tile-white: #f8f6f0;
  --lv-tile-white-grout: rgba(60,55,45,.2);
  --lv-tile-blue: #003f7a;
  --lv-tile-blue-grout: rgba(245,241,230,.38);
  --lv-paper: #fbf7ec;
  --lv-ink: #1a1b1c;
}
html[data-theme="dark"] #view-lobby.pinboard-theme{
  --lv-tile-white: #1f2228;
  --lv-tile-white-grout: rgba(0,0,0,.55);
  --lv-paper: #26292e;
  --lv-ink: #e9eaee;
}

/* ── HEADER : plaque émaillée RATP ─────────────────────────── */
.pinboard-theme .lv-head{
  border-bottom:none;
  padding:8px 0 20px;
  gap:20px;
}
.pinboard-theme .lv-head-titles{
  gap:12px;
}
/* "SALLE D'ATTENTE" : plaque bleue mosaïque style Abbesses / Gaîté. */
.pinboard-theme .lv-title{
  --tile-w: 32px; --tile-h: 16px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#f8f6f0;
  padding:14px 22px 12px;
  display:inline-block;
  background-color:var(--lv-tile-blue);
  background-image:
    repeating-linear-gradient(0deg,
      var(--lv-tile-blue-grout) 0 1px,
      rgba(255,255,255,.08)     1px 2px,
      transparent               2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--lv-tile-blue-grout) 0 1px,
      transparent 1px var(--tile-w));
  background-attachment:fixed, fixed;
  box-shadow:
    inset 0 0 0 3px #f8f6f0,
    inset 0 0 0 4px rgba(0,0,0,.35),
    inset 0 -3px 8px rgba(0,0,0,.35),
    inset 0 3px 6px rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.pinboard-theme .lv-tag{
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--lv-ink);
  opacity:.7;
}

/* ── CODE DE ROOM : 4 mini-plaques émaillées ───────────────── */
.pinboard-theme .lv-head-code-lbl{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--lv-ink);
  opacity:.6;
}
.pinboard-theme .lv-tile{
  width:44px; height:52px;
}
/* Chaque tuile = mini-plaque bleue, typo crème épaisse, pas de glow. */
.pinboard-theme .lv-tile-inner{
  --tile-w: 22px; --tile-h: 11px;
  background-color:var(--lv-tile-blue);
  background-image:
    repeating-linear-gradient(0deg,
      var(--lv-tile-blue-grout) 0 1px,
      rgba(255,255,255,.08)     1px 2px,
      transparent               2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--lv-tile-blue-grout) 0 1px,
      transparent 1px var(--tile-w));
  border:none;
  border-radius:2px;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-weight:800;
  font-size:28px;
  letter-spacing:0;
  color:#f8f6f0;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.35),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.1),
    0 3px 6px rgba(0,0,0,.25);
}
.pinboard-theme .lv-tile:hover .lv-tile-inner{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.35),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.1),
    0 6px 12px rgba(0,0,0,.35);
  border-color:transparent;
}
.pinboard-theme .lv-copy-btn{
  background:#f8f6f0;
  border:1px solid rgba(0,0,0,.2);
  color:var(--lv-tile-blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.15);
}
.pinboard-theme .lv-copy-btn:hover{
  background:#fff;
  border-color:var(--lv-tile-blue);
  color:var(--lv-tile-blue);
}

/* ── SECTIONS : panneaux papier crème ─────────────────────── */
.pinboard-theme .lv-section{
  background:var(--lv-paper);
  border:1px solid rgba(0,0,0,.15);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 6px rgba(0,0,0,.12);
  padding:14px 16px;
}
html[data-theme="dark"] .pinboard-theme .lv-section{
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.3);
}
.pinboard-theme .lv-section .mc-section-head{
  padding-bottom:8px;
  border-bottom:1px dashed rgba(0,0,0,.1);
  margin-bottom:4px;
}
html[data-theme="dark"] .pinboard-theme .lv-section .mc-section-head{
  border-bottom-color:rgba(255,255,255,.08);
}
.pinboard-theme .lv-section .mc-section-num,
.pinboard-theme .lv-section .mc-section-lbl{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--lv-ink);
}
.pinboard-theme .lv-section .mc-section-num{ opacity:.5; }

/* ── PILLS : plaque papier inactive, plaque RATP bleue active ─ */
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network{
  animation:none !important;
  background:var(--lv-paper);
  border:1px solid rgba(0,0,0,.2);
  color:var(--lv-ink);
  border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.1);
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.8px;
}
html[data-theme="dark"] #view-lobby.pinboard-theme .lv-tiers .mc-pill-network{
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.25);
}
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network:hover:not(.active):not(.readonly){
  border-color:var(--lv-tile-blue); color:var(--lv-tile-blue);
}
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network.active{
  background:var(--lv-tile-blue); border-color:#f8f6f0; color:#f8f6f0;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.25), inset 0 -2px 4px rgba(0,0,0,.25),
    inset 0 2px 3px rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.2);
}
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network .mc-pill-label,
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network .mc-pill-sub{
  color:inherit; text-shadow:none;
}
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network .mc-pill-sub{ opacity:.75; }
#view-lobby.pinboard-theme .lv-tiers .mc-pill-network.active::after{
  text-shadow:none; color:#f8f6f0;
}

/* ── JOUEURS : cards papier crème ─────────────────────────── */
.pinboard-theme .lv-player{
  background:var(--lv-paper);
  border:1px solid rgba(0,0,0,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 4px rgba(0,0,0,.1);
}
html[data-theme="dark"] .pinboard-theme .lv-player{
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 4px rgba(0,0,0,.25);
}
.pinboard-theme .lv-player.me{
  background:color-mix(in srgb, var(--lv-tile-blue) 5%, var(--lv-paper));
  border-color:var(--lv-tile-blue);
}
.pinboard-theme .lv-player.ready{
  border-color:#2d7a3e;
  box-shadow:inset 0 0 0 1px rgba(45,122,62,.3), 0 2px 4px rgba(0,0,0,.12);
}
.pinboard-theme .lv-player-name{
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-weight:600;
  color:var(--lv-ink);
}
.pinboard-theme .lv-player.me .lv-player-name{ color:var(--lv-tile-blue); }
html[data-theme="dark"] .pinboard-theme .lv-player.me .lv-player-name{ color:#6ea8ff; }
.pinboard-theme .lv-tag-host{
  background:var(--lv-tile-blue); color:#f8f6f0; box-shadow:none;
  font-family:'Barlow Semi Condensed',sans-serif; letter-spacing:1.5px;
}
.pinboard-theme .lv-tag-me{
  background:transparent; color:var(--lv-ink); opacity:.6;
  border:1px solid rgba(0,0,0,.2);
}
html[data-theme="dark"] .pinboard-theme .lv-tag-me{ border-color:rgba(255,255,255,.15); }

/* Ready btn : style valideur RATP (solide, pas de glow) */
.pinboard-theme .lv-ready-btn{
  background:#f8f6f0; border:1px solid rgba(0,0,0,.2); color:var(--lv-tile-blue);
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; border-radius:3px;
}
.pinboard-theme .lv-ready-btn:hover{ background:#fff; border-color:var(--lv-tile-blue); }
.pinboard-theme .lv-ready-btn.on{
  background:#2d7a3e; color:#f8f6f0; border-color:#236030;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.2);
}
.pinboard-theme .lv-ready-btn.on:hover{ background:#328946; filter:none; }

/* ── FOOTER : CTA plaque RATP bleue ───────────────────────── */
.pinboard-theme .lv-foot .mc-cta-main{
  --cta-sh: inset 0 0 0 2px #f8f6f0, inset 0 0 0 3px rgba(0,0,0,.3),
            inset 0 -3px 6px rgba(0,0,0,.3), inset 0 2px 4px rgba(255,255,255,.08);
  background:var(--lv-tile-blue); color:#f8f6f0; border:none; border-radius:3px;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; letter-spacing:2px;
  box-shadow:var(--cta-sh), 0 4px 10px rgba(0,0,0,.25);
  animation:none !important;
}
.pinboard-theme .lv-foot .mc-cta-main:hover:not([disabled]){
  transform:translateY(-1px);
  box-shadow:var(--cta-sh), 0 6px 14px rgba(0,0,0,.35);
}
.pinboard-theme .lv-foot .mc-cta-main .mc-cta-glow{ display:none; }
.pinboard-theme .lv-foot .mc-cta-main[disabled]{
  background:#6a6e75; opacity:.7;
  box-shadow:inset 0 0 0 2px rgba(245,241,230,.6), inset 0 0 0 3px rgba(0,0,0,.15);
}
.pinboard-theme .mc-cta-hint{
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-size:12px; color:var(--lv-ink); opacity:.65; letter-spacing:.4px;
}
.pinboard-theme .lv-waiting{
  background:var(--lv-paper); border:1px dashed rgba(0,0,0,.2); color:var(--lv-ink);
  font-family:'Barlow','Barlow Semi Condensed',sans-serif; letter-spacing:.3px;
}
html[data-theme="dark"] .pinboard-theme .lv-waiting{ border-color:rgba(255,255,255,.15); }