/* styles/theme/pinboard/info-card.css
 * ══════════════════════════════════════════════════════════════════
 * Carte "Info partie" en bas-gauche du mode Bon Trajet.
 * Style inspiré du ticket reveal (papier crème sombre, typo DM Mono,
 * lignes dashed, pastille ligne en haut gauche) — mais data in-game,
 * pas le reveal. Se met à jour à chaque tick du game state.
 *
 * Sections conditionnelles :
 *   · base     : round / réseau / parfaits / retard cumulé
 *   · arcade   : vies / temps / jokers
 *   · multi    : liste des joueurs (état ready/done/offline)
 *
 * Préfixe : .ic-*
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Conteneur bas-gauche ────────────────────────────────── */
#view-game.pinboard-theme .info-card{
  position:absolute;
  left:16px; bottom:16px;
  z-index:40;
  width:280px; max-width:calc(50vw - 24px);
  max-height:calc(100vh - 120px);
  max-height:calc(100dvh - 120px);
  overflow-y:auto;
  padding:14px 18px 16px;
  background:
    /* papier patiné : légère turbulence + teinte crème foncée */
    linear-gradient(180deg, #2a2519 0%, #1e1a12 100%);
  color:#f5ecd7;
  border:1px solid #5a4d35;
  border-radius:2px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(245,236,215,.08);
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.8px;
  line-height:1.65;
}

/* En mode reveal (overlay map), on masque la carte pour ne pas
 * chevaucher le panel ticket. .info-card est cachée via un attribut
 * hidden injecté par reveal-map.js. */
#view-game.pinboard-theme .info-card[hidden]{ display:none !important; }

/* Scrollbar discrète (la carte peut déborder en multi avec 8 joueurs) */
#view-game.pinboard-theme .info-card::-webkit-scrollbar{ width:6px; }
#view-game.pinboard-theme .info-card::-webkit-scrollbar-thumb{
  background:rgba(232,162,58,.3); border-radius:3px;
}

/* ─── Header : pastille ligne + titre ──────────────────── */
.info-card .ic-head{
  display:flex; align-items:center; gap:10px;
  padding-bottom:8px; margin-bottom:8px;
  border-bottom:1px dashed rgba(245,236,215,.35);
}
.info-card .ic-head-badge{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:14px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.4);
  border:1px solid rgba(0,0,0,.35);
  flex-shrink:0;
}
.info-card .ic-head-title{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
}
.info-card .ic-head-kicker{
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:9px; letter-spacing:1.8px;
  color:#e8a23a;
  text-transform:uppercase;
  line-height:1;
}
.info-card .ic-head-label{
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:15px;
  letter-spacing:1.6px;
  color:#f5ecd7;
  line-height:1;
  text-transform:uppercase;
}

/* ─── Rows clé/valeur (style dotted « ...........: ») ─── */
.info-card .ic-row{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:8px;
  align-items:baseline;
  padding:2px 0;
}
.info-card .ic-row-k{
  color:#a89977;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  /* Le tiret "......." est rendu via background-image sur le fond
   * pour rester proprement aligné quoi qu'il arrive. Alternative :
   * ::after avec repeating-linear-gradient, plus simple ci-dessous. */
  overflow:hidden; white-space:nowrap; text-overflow:clip;
  position:relative;
}
.info-card .ic-row-v{
  color:#f5ecd7;
  font-weight:500;
  font-size:12px;
  letter-spacing:.6px;
  white-space:nowrap;
}
/* Variantes colorées des valeurs (delta négatif = rouge, positif = ok) */
.info-card .ic-row-v.ok   { color:#8ae29d; }
.info-card .ic-row-v.warn { color:#e8a23a; }
.info-card .ic-row-v.ko   { color:#ff8872; }

/* Section divider */
.info-card .ic-divider{
  display:block;
  height:1px;
  margin:10px 0 8px;
  background-image:repeating-linear-gradient(90deg,
    rgba(245,236,215,.3) 0 4px,
    transparent 4px 8px);
}
.info-card .ic-section-lbl{
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:10px; letter-spacing:2.2px;
  color:#e8a23a;
  text-transform:uppercase;
  margin:6px 0 4px;
}

/* ─── Arcade : vies / timer ─────────────────────────────── */
.info-card .ic-hearts{
  display:inline-flex; gap:3px;
  vertical-align:middle;
}
.info-card .ic-heart{
  width:12px; height:12px;
  background:#c13a2e;
  clip-path:path('M6 11.2 C2 8 0 5.5 0 3.6 C0 1.6 1.4 0 3.3 0 C4.4 0 5.4 .5 6 1.4 C6.6 .5 7.6 0 8.7 0 C10.6 0 12 1.6 12 3.6 C12 5.5 10 8 6 11.2 Z');
}
.info-card .ic-heart.off{
  background:#4a3d28;
}
.info-card .ic-jokers{
  display:inline-flex; gap:4px;
  vertical-align:middle;
  color:#e8a23a;
  font-size:14px;
  letter-spacing:2px;
}
.info-card .ic-joker.off{ color:#4a3d28; }

/* ─── Multi : player rows ─────────────────────────────── */
.info-card .ic-players{
  display:flex; flex-direction:column; gap:4px;
  margin-top:4px;
}
.info-card .ic-player{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:8px;
  align-items:center;
  padding:3px 6px;
  background:rgba(245,236,215,.04);
  border:1px solid rgba(245,236,215,.1);
  border-radius:2px;
  font-size:11px;
}
.info-card .ic-player-dot{
  width:8px; height:8px; border-radius:50%;
  background:#7a6e54;
}
.info-card .ic-player-dot.done{
  background:#3fb55a;
  box-shadow:0 0 4px rgba(63,181,90,.6);
}
.info-card .ic-player-dot.offline{ background:#4a3d28; }
.info-card .ic-player-name{
  color:#f5ecd7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:500;
  letter-spacing:.4px;
}
.info-card .ic-player.me .ic-player-name{ color:#ffc700; }
.info-card .ic-player.offline{ opacity:.55; }
.info-card .ic-player.out{ opacity:.62; }
.info-card .ic-player.out .ic-player-name{
  color:#a06060;
  text-decoration: line-through;
  text-decoration-color: rgba(192, 64, 64, .55);
}
.info-card .ic-player-dot.out{ background:#8a2a2a; box-shadow:none; }
.info-card .ic-player-lives{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:1px;
  color:#ff6b6b;
  text-shadow:0 0 2px rgba(255, 80, 80, .5);
  margin-right:2px;
  user-select:none;
}
.info-card .ic-player-state{
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:9px; letter-spacing:1.2px;
  color:#a89977;
  text-transform:uppercase;
}

/* Bannière "Tu es out" — remplace le timer en spectateur arcade multi. */
.info-card .ic-row-out{
  background: rgba(192, 64, 64, .12);
  border-left: 2px solid #c04040;
  padding: 6px 8px;
  border-radius: 2px;
  font-style: italic;
  color: #e9b6b6;
  font-size: 11px;
  letter-spacing: .5px;
}

/* ─── Responsive : mobile ───────────────────────────── */
@media (max-width: 720px){
  #view-game.pinboard-theme .info-card{
    width:calc(100vw - 32px);
    max-width:none;
    max-height:40vh;
  }
}