/* ── predictions.css — Page Prédictions HexLobby ─────────────────────────── */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pd-hero {
  padding      : 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.pd-title {
  font-size  : 2.2rem;
  font-weight: 900;
  color      : var(--text);
  margin     : 0 0 .5rem;
}
.pd-sub {
  color    : var(--text-muted);
  font-size: .98rem;
  max-width: 560px;
  margin-bottom: 1.5rem;
}

/* Bannière stats personnelles */
.pd-my-banner {
  display    : inline-flex;
  align-items: center;
  gap        : 1.25rem;
  padding    : .75rem 1.25rem;
  background : rgba(129,140,248,.08);
  border     : 1px solid rgba(129,140,248,.2);
  border-radius: .75rem;
}
.pd-my-stat { text-align: center; }
.pd-my-val  {
  display    : block;
  font-size  : 1.4rem;
  font-weight: 900;
  color      : var(--text);
  line-height: 1;
}
.pd-my-lbl  { font-size: .72rem; color: var(--text-muted); display: block; margin-top: .15rem; }
.pd-my-sep  { width: 1px; height: 32px; background: rgba(255,255,255,.1); }

/* ── Titres section ──────────────────────────────────────────────────────── */
.pd-section-title {
  font-size    : 1.35rem;
  font-weight  : 800;
  color        : var(--text);
  margin-bottom: 1.25rem;
  display      : flex;
  align-items  : center;
  gap          : .6rem;
}
.pd-badge-count {
  font-size    : .75rem;
  font-weight  : 700;
  background   : rgba(129,140,248,.15);
  color        : var(--accent);
  border-radius: 1rem;
  padding      : .15rem .55rem;
}
.pd-section-dark { background: rgba(255,255,255,.018); }

/* ── Empty states ────────────────────────────────────────────────────────── */
.pd-empty {
  text-align: center;
  padding   : 3rem 0;
  color     : var(--text-muted);
}
.pd-empty-icon { font-size: 3rem; margin-bottom: .75rem; }
.pd-empty-sub  { font-size: .82rem; opacity: .6; margin-top: .35rem; }
.pd-empty-small { font-size: .85rem; color: var(--text-muted); }

/* ── Grille matchs ───────────────────────────────────────────────────────── */
.pd-matches-grid {
  display: flex;
  flex-direction: column;
  gap    : 1.25rem;
}

/* ── Carte match ─────────────────────────────────────────────────────────── */
.pd-match-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .9rem;
  padding      : 1.35rem;
  transition   : border-color .2s;
}
.pd-match-card:hover { border-color: rgba(129,140,248,.25); }

.pd-match-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : .85rem;
  flex-wrap      : wrap;
  gap            : .5rem;
}
.pd-match-label {
  display    : flex;
  align-items: center;
  gap        : .5rem;
  font-size  : .9rem;
  color      : var(--text);
}
.pd-vote-count {
  font-size: .75rem;
  color    : var(--text-muted);
}

.pd-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  flex-shrink  : 0;
  display      : inline-block;
}
.pd-dot-green  { background: #34d399; animation: pdPulse 1.4s infinite; }
.pd-dot-yellow { background: #fbbf24; animation: pdPulse 1.4s infinite; }
@keyframes pdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}

.pd-status-badge {
  font-size    : .65rem;
  font-weight  : 700;
  padding      : .12rem .45rem;
  border-radius: .3rem;
  letter-spacing: .04em;
}
.pd-status-active     { background: rgba(52,211,153,.15); color: #34d399; }
.pd-status-ready_check { background: rgba(251,191,36,.12); color: #fbbf24; }

.pd-already-voted {
  font-size    : .78rem;
  font-weight  : 600;
  color        : #34d399;
  background   : rgba(52,211,153,.07);
  border       : 1px solid rgba(52,211,153,.18);
  border-radius: .5rem;
  padding      : .4rem .8rem;
  margin-bottom: .85rem;
}

/* ── Liste joueurs ───────────────────────────────────────────────────────── */
.pd-players-list {
  display       : flex;
  flex-direction: column;
  gap           : .55rem;
}

.pd-player-row {
  display    : flex;
  align-items: center;
  gap        : .75rem;
  padding    : .65rem .75rem;
  border-radius: .6rem;
  background : rgba(255,255,255,.02);
  border     : 1px solid transparent;
  transition : background .15s, border-color .15s;
}
.pd-player-row:hover { background: rgba(255,255,255,.05); }
.pd-my-pick {
  background  : rgba(129,140,248,.08) !important;
  border-color: rgba(129,140,248,.3) !important;
}

.pd-player-avatar {
  width        : 32px;
  height       : 32px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}
.pd-player-info {
  display       : flex;
  flex-direction: column;
  gap           : .1rem;
  min-width     : 100px;
  flex-shrink   : 0;
}
.pd-player-name {
  font-size  : .88rem;
  font-weight: 700;
  color      : var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.pd-player-name:hover { color: var(--accent); }
.pd-player-mmr {
  font-size: .72rem;
  color    : var(--text-muted);
}

/* ── Barres de probabilité ───────────────────────────────────────────────── */
.pd-prob-wrap {
  flex   : 1;
  display: flex;
  flex-direction: column;
  gap    : .25rem;
  min-width: 0;
}
.pd-prob-row {
  display    : flex;
  align-items: center;
  gap        : .45rem;
}
.pd-prob-lbl {
  font-size : .62rem;
  color     : rgba(255,255,255,.25);
  width     : 32px;
  flex-shrink: 0;
  text-align: right;
}
.pd-prob-track {
  flex         : 1;
  height       : 6px;
  background   : rgba(255,255,255,.06);
  border-radius: 99px;
  overflow     : hidden;
}
.pd-prob-fill {
  height       : 100%;
  border-radius: 99px;
  transition   : width .6s ease;
}
.pd-prob-algo { background: linear-gradient(90deg, #818cf8, #a78bfa); }
.pd-prob-comm { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.pd-prob-val {
  font-size : .72rem;
  font-weight: 700;
  color     : var(--text-muted);
  width     : 34px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Bouton vote ─────────────────────────────────────────────────────────── */
.pd-vote-btn {
  flex-shrink  : 0;
  padding      : .35rem .85rem;
  background   : rgba(129,140,248,.12);
  border       : 1px solid rgba(129,140,248,.3);
  border-radius: .5rem;
  color        : var(--accent);
  font-size    : .78rem;
  font-weight  : 700;
  cursor       : pointer;
  text-decoration: none;
  transition   : background .15s, transform .1s;
  display      : inline-flex;
  align-items  : center;
}
.pd-vote-btn:hover:not(:disabled) {
  background: rgba(129,140,248,.25);
  transform : scale(1.03);
}
.pd-vote-btn:disabled { opacity: .5; cursor: not-allowed; }
.pd-vote-login { opacity: .6; }

.pd-my-pick-badge {
  font-size  : .72rem;
  font-weight: 700;
  color      : var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Bottom grid ─────────────────────────────────────────────────────────── */
.pd-bottom-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 2rem;
  align-items          : start;
}
@media (max-width: 760px) { .pd-bottom-grid { grid-template-columns: 1fr; } }

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.pd-lb-list {
  display       : flex;
  flex-direction: column;
  gap           : .45rem;
}
.pd-lb-row {
  display        : flex;
  align-items    : center;
  gap            : .7rem;
  padding        : .65rem .9rem;
  background     : var(--bg-card);
  border         : 1px solid var(--border);
  border-radius  : .65rem;
  text-decoration: none;
  transition     : border-color .2s, transform .12s;
}
.pd-lb-row:hover { border-color: rgba(255,255,255,.2); transform: translateX(3px); }

.pd-lb-rank {
  font-size  : .88rem;
  font-weight: 900;
  width      : 26px;
  text-align : center;
  color      : var(--text-muted);
  flex-shrink: 0;
}
.pd-lb-rank-1 { color: #f4d03f; }
.pd-lb-rank-2 { color: #e2e8f0; }
.pd-lb-rank-3 { color: #cd7f32; }

.pd-lb-avatar {
  width        : 34px;
  height       : 34px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}
.pd-lb-info {
  display       : flex;
  flex-direction: column;
  gap           : .1rem;
  flex          : 1;
  min-width     : 0;
}
.pd-lb-name   { font-size: .88rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-lb-detail { font-size: .72rem; color: var(--text-muted); }

.pd-lb-acc { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.pd-lb-acc-val { font-size: 1.1rem; font-weight: 900; color: var(--text); line-height: 1; }
.pd-lb-acc-lbl { font-size: .65rem; color: var(--text-muted); }

/* ── Mes prédictions récentes ────────────────────────────────────────────── */
.pd-recent-list {
  display       : flex;
  flex-direction: column;
  gap           : .4rem;
}
.pd-recent-row {
  display        : flex;
  align-items    : center;
  gap            : .6rem;
  padding        : .6rem .85rem;
  background     : var(--bg-card);
  border         : 1px solid var(--border);
  border-radius  : .6rem;
  text-decoration: none;
  transition     : border-color .15s;
}
.pd-recent-row:hover { border-color: rgba(255,255,255,.2); }
.pd-recent-pending { border-color: rgba(251,191,36,.15); }
.pd-recent-correct { border-color: rgba(52,211,153,.2); }
.pd-recent-wrong   { border-color: rgba(248,113,113,.15); }

.pd-recent-icon { font-size: 1rem; flex-shrink: 0; }
.pd-recent-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pd-recent-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.pd-recent-player { font-size: .85rem; font-weight: 700; color: var(--text); }
.pd-recent-match  { font-size: .7rem; color: var(--text-muted); }
.pd-recent-result {
  font-size : .75rem;
  font-weight: 700;
  flex-shrink: 0;
  color     : var(--text-muted);
}
.pd-recent-correct .pd-recent-result { color: #34d399; }
.pd-recent-wrong   .pd-recent-result { color: #f87171; }

/* Prompt connexion */
.pd-login-prompt {
  text-align   : center;
  padding      : 2rem;
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .85rem;
  color        : var(--text-muted);
}
.pd-login-prompt p { margin-bottom: 1rem; font-size: .9rem; }

/* ── Couleurs partagées ──────────────────────────────────────────────────── */
.pd-val-green { color: #34d399; }
.pd-val-muted { color: var(--text-muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pd-title    { font-size: 1.5rem; }
  .pd-prob-lbl { display: none; }
  .pd-my-banner { flex-wrap: wrap; gap: .75rem; }
}