/* ── live.css — Dashboard Live HexLobby ──────────────────────────────────── */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lv-hero {
  padding      : 3rem 0 2rem;
  border-bottom: 1px solid var(--border);
}
.lv-hero-inner {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : 1.5rem;
}
.lv-live-badge {
  display     : inline-flex;
  align-items : center;
  gap         : .5rem;
  font-size   : .72rem;
  font-weight : 800;
  letter-spacing: .12em;
  color       : #f87171;
  margin-bottom: .5rem;
}
.lv-pulse {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : #f87171;
  animation    : lvPulse 1.4s ease-in-out infinite;
}
@keyframes lvPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.6); }
  50%       { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}
.lv-title {
  font-size  : 2rem;
  font-weight: 900;
  color      : var(--text);
  margin     : 0 0 .4rem;
}
.lv-sub {
  color    : var(--text-muted);
  font-size: .95rem;
}

/* Compteurs hero */
.lv-hero-counters {
  display   : flex;
  align-items: center;
  gap       : 1.5rem;
}
.lv-counter {
  text-align: center;
}
.lv-counter-val {
  display    : block;
  font-size  : 2.4rem;
  font-weight: 900;
  color      : var(--text);
  line-height: 1;
}
.lv-counter-label {
  font-size: .8rem;
  color    : var(--text-muted);
}
.lv-counter-sep {
  width     : 1px;
  height    : 40px;
  background: var(--border);
}

/* ── Layout corps ─────────────────────────────────────────────────────────── */
.lv-body {
  display              : grid;
  grid-template-columns: 1fr 380px;
  gap                  : 1.5rem;
  padding-top          : 2rem;
  padding-bottom       : 3rem;
  align-items          : start;
}
@media (max-width: 1000px) {
  .lv-body { grid-template-columns: 1fr; }
  .lv-col-right { order: -1; }
}

/* ── Titres section ───────────────────────────────────────────────────────── */
.lv-section-title {
  font-size    : 1.1rem;
  font-weight  : 800;
  color        : var(--text);
  margin-bottom: 1rem;
}

/* ── Card générique ──────────────────────────────────────────────────────── */
.lv-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .85rem;
  padding      : 1.35rem;
  margin-bottom: 1.25rem;
}
.lv-card-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 1.1rem;
}
.lv-card-title {
  font-size  : 1rem;
  font-weight: 800;
  color      : var(--text);
  display    : flex;
  align-items: center;
  gap        : .5rem;
}
.lv-card-badge {
  font-size  : .78rem;
  font-weight: 700;
  color      : var(--text-muted);
  background : rgba(255,255,255,.05);
  border     : 1px solid var(--border);
  border-radius: .4rem;
  padding    : .2rem .6rem;
}

/* ── Indicateurs colorés ─────────────────────────────────────────────────── */
.lv-dot {
  display      : inline-block;
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  flex-shrink  : 0;
}
.lv-dot-green  { background: #34d399; animation: lvPulse 1.4s ease-in-out infinite; }
.lv-dot-yellow { background: #fbbf24; animation: lvPulse 1.4s ease-in-out infinite; }
.lv-dot-gray   { background: rgba(255,255,255,.2); }

/* ── Slots visuels ──────────────────────────────────────────────────────── */
.lv-slots {
  display : flex;
  gap     : .45rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.lv-slot {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  border       : 2px dashed rgba(255,255,255,.12);
  display      : flex;
  align-items  : center;
  justify-content: center;
  color        : rgba(255,255,255,.2);
  overflow     : hidden;
  transition   : border-color .2s;
}
.lv-slot img {
  width : 100%;
  height: 100%;
  object-fit: cover;
}
.lv-slot-filled {
  border-color: rgba(129,140,248,.5);
  border-style: solid;
}

/* ── Timer ───────────────────────────────────────────────────────────────── */
.lv-timer {
  display     : flex;
  align-items : center;
  gap         : .4rem;
  font-size   : .85rem;
  color       : #fbbf24;
  font-weight : 600;
  margin-bottom: .85rem;
  padding     : .5rem .75rem;
  background  : rgba(251,191,36,.08);
  border      : 1px solid rgba(251,191,36,.2);
  border-radius: .55rem;
}
.lv-timer-hidden { display: none; }

/* ── Liste joueurs file ──────────────────────────────────────────────────── */
.lv-queue-list {
  display       : flex;
  flex-direction: column;
  gap           : .45rem;
}
.lv-queue-row {
  display    : flex;
  align-items: center;
  gap        : .65rem;
  padding    : .5rem .65rem;
  border-radius: .6rem;
  background : rgba(255,255,255,.03);
  transition : background .15s;
}
.lv-queue-row:hover { background: rgba(255,255,255,.06); }
.lv-queue-pos {
  font-size  : .75rem;
  font-weight: 700;
  color      : var(--text-muted);
  width      : 22px;
  text-align : center;
  flex-shrink: 0;
}
.lv-queue-avatar {
  width        : 30px;
  height       : 30px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}
.lv-queue-name {
  flex      : 1;
  font-size : .88rem;
  font-weight: 600;
  color     : var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow  : hidden;
  text-overflow: ellipsis;
  min-width : 0;
}
.lv-queue-name:hover { color: var(--accent); }
.lv-queue-mmr {
  font-size: .78rem;
  color    : var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lv-queue-since {
  font-size : .72rem;
  color     : rgba(255,255,255,.25);
  flex-shrink: 0;
  min-width : 28px;
  text-align: right;
}

/* ── Matchs actifs ───────────────────────────────────────────────────────── */
.lv-match-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .85rem;
  padding      : 1.25rem;
  margin-bottom: 1rem;
  transition   : border-color .2s;
}
.lv-match-card:hover { border-color: rgba(129,140,248,.3); }

.lv-match-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : .9rem;
  flex-wrap      : wrap;
  gap            : .5rem;
}
.lv-match-id {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  font-size  : .9rem;
  color      : var(--text);
}
.lv-match-status-badge {
  font-size    : .68rem;
  font-weight  : 700;
  border-radius: .35rem;
  padding      : .15rem .5rem;
  letter-spacing: .04em;
}
.lv-status-active    { background: rgba(52,211,153,.15); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
.lv-status-ready_check { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.25); }

.lv-match-meta {
  display : flex;
  gap     : .75rem;
  font-size: .78rem;
  color   : var(--text-muted);
}
.lv-match-elapsed { color: var(--text-muted); }
.lv-match-avg { color: var(--accent); }

/* Avatars rapides */
.lv-match-avatars {
  display  : flex;
  gap      : .4rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.lv-match-avatar-wrap {
  position: relative;
  display : inline-block;
}
.lv-match-avatar {
  width        : 32px;
  height       : 32px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 2px solid transparent;
  transition   : border-color .15s;
}
.lv-avatar-ready { border-color: #34d399; }
.lv-ready-check {
  position   : absolute;
  bottom     : -2px;
  right      : -2px;
  font-size  : .55rem;
  background : #34d399;
  color      : #000;
  border-radius: 50%;
  width      : 13px;
  height     : 13px;
  display    : flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

/* Tableau joueurs lobby */
.lv-match-players {
  display       : flex;
  flex-direction: column;
  gap           : .3rem;
}
.lv-mp-row {
  display    : flex;
  align-items: center;
  gap        : .6rem;
  padding    : .35rem .5rem;
  border-radius: .45rem;
  font-size  : .82rem;
}
.lv-mp-row:hover { background: rgba(255,255,255,.04); }
.lv-mp-idx {
  width     : 18px;
  text-align: center;
  color     : var(--text-muted);
  font-size : .72rem;
  flex-shrink: 0;
}
.lv-mp-name {
  flex      : 1;
  color     : var(--text);
  text-decoration: none;
  font-weight: 600;
  min-width : 0;
  white-space: nowrap;
  overflow  : hidden;
  text-overflow: ellipsis;
}
.lv-mp-name:hover { color: var(--accent); }
.lv-mp-mmr {
  font-size: .78rem;
  color    : var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lv-mp-ready {
  font-size : .72rem;
  font-weight: 700;
  flex-shrink: 0;
  padding   : .15rem .45rem;
  border-radius: .35rem;
}
.lv-ready-yes { color: #34d399; background: rgba(52,211,153,.1); }
.lv-ready-no  { color: #fbbf24; background: rgba(251,191,36,.08); }

/* ── Feed matchs récents ─────────────────────────────────────────────────── */
.lv-feed {
  display       : flex;
  flex-direction: column;
  gap           : .85rem;
}

.lv-feed-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .85rem;
  padding      : 1.1rem;
  transition   : border-color .2s;
}
.lv-feed-card:hover { border-color: rgba(255,255,255,.15); }

.lv-feed-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : .75rem;
}
.lv-feed-id {
  font-size  : .82rem;
  font-weight: 800;
  color      : var(--accent);
}
.lv-feed-meta {
  display  : flex;
  gap      : .65rem;
  font-size: .72rem;
  color    : var(--text-muted);
}

/* Gagnant */
.lv-feed-winner {
  display    : flex;
  align-items: center;
  gap        : .65rem;
  padding    : .6rem .75rem;
  background : rgba(251,191,36,.07);
  border     : 1px solid rgba(251,191,36,.15);
  border-radius: .65rem;
  margin-bottom: .65rem;
}
.lv-feed-winner-avatar {
  width        : 34px;
  height       : 34px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}
.lv-feed-winner-label {
  font-size  : .68rem;
  color      : #fbbf24;
  font-weight: 700;
}
.lv-feed-winner-name {
  font-size  : .9rem;
  font-weight: 800;
  color      : var(--text);
  text-decoration: none;
}
.lv-feed-winner-name:hover { color: var(--accent); }
.lv-feed-winner-delta {
  margin-left: auto;
  font-size  : .95rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Lignes classement */
.lv-feed-rows {
  display       : flex;
  flex-direction: column;
  gap           : .2rem;
  margin-bottom : .65rem;
}
.lv-feed-row {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  padding    : .3rem .4rem;
  border-radius: .4rem;
  font-size  : .8rem;
}
.lv-feed-row:hover { background: rgba(255,255,255,.04); }
.lv-feed-row-winner { background: rgba(251,191,36,.05); }
.lv-feed-place {
  width     : 26px;
  text-align: center;
  flex-shrink: 0;
  font-size : .82rem;
}
.lv-feed-avatar {
  width        : 22px;
  height       : 22px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}
.lv-feed-name {
  flex      : 1;
  color     : var(--text);
  text-decoration: none;
  font-weight: 600;
  min-width : 0;
  white-space: nowrap;
  overflow  : hidden;
  text-overflow: ellipsis;
}
.lv-feed-name:hover { color: var(--accent); }
.lv-feed-delta {
  font-weight: 700;
  font-size  : .8rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width  : 36px;
  text-align : right;
}
.lv-feed-mmr-after {
  font-size : .75rem;
  color     : var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width : 45px;
  text-align: right;
}
.lv-delta-pos { color: #34d399; }
.lv-delta-neg { color: #f87171; }

.lv-feed-detail-link {
  font-size  : .78rem;
  color      : var(--accent);
  text-decoration: none;
  opacity    : .7;
  transition : opacity .15s;
}
.lv-feed-detail-link:hover { opacity: 1; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.lv-empty {
  text-align: center;
  color     : var(--text-muted);
  font-size : .85rem;
  padding   : .5rem 0 .25rem;
}
.lv-empty code {
  background   : rgba(255,255,255,.07);
  padding      : .1rem .35rem;
  border-radius: .3rem;
  font-size    : .82rem;
}
.lv-empty-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .85rem;
  padding      : 2rem;
  text-align   : center;
  color        : var(--text-muted);
  font-size    : .9rem;
}
.lv-empty-card span { display: block; font-size: 2rem; margin-bottom: .5rem; }

/* ── Barre mise à jour ───────────────────────────────────────────────────── */
.lv-update-bar {
  position   : fixed;
  bottom     : 1rem;
  left       : 50%;
  transform  : translateX(-50%);
  background : rgba(15,23,41,.9);
  border     : 1px solid var(--border);
  border-radius: 2rem;
  padding    : .4rem 1rem;
  font-size  : .75rem;
  color      : var(--text-muted);
  display    : flex;
  align-items: center;
  gap        : .45rem;
  backdrop-filter: blur(8px);
  z-index    : 50;
}
.lv-update-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--text-muted);
  display      : block;
  transition   : background .3s;
}
.lv-update-dot.lv-flash { background: #34d399; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lv-title        { font-size: 1.5rem; }
  .lv-hero-counters{ display: none; }
  .lv-slot         { width: 34px; height: 34px; }
  .lv-feed-mmr-after { display: none; }
}