/* === POLICES === */
@font-face {
  font-family: "Antique Olive Compact";
  src: url("assets/fonts/AntiqueOliveCompact-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Casquination";
  src: url("assets/fonts/Casquination.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* === VARIABLES === */
:root{
  --bg-dark:#0b0e10;
  --glass:rgba(10,12,14,.55);
  --card:rgba(16,18,22,.68);
  --text:#e8f3ee;
  --muted:#a8b7b1;
  --accent:#2ce573;
  --gold:#ffd166;
  --row-h:72px;
  --gap:10px;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}

/* === BASE === */
*{box-sizing:border-box}
html,body{height:100%}
body.obs{
  margin:0; background:var(--bg-dark); color:var(--text);
  font-family:"Antique Olive Compact", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans";
  overflow:hidden;
}


/* BG */
.bg{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  filter:contrast(1.05) brightness(.82) saturate(1.08); }
.bg-overlay{
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(1200px 800px at 15% 10%, rgba(32,50,42,.55), transparent 60%),
              radial-gradient(1200px 800px at 85% 90%, rgba(14,31,22,.55), transparent 60%),
              linear-gradient(0deg, rgba(5,7,9,.38), rgba(5,7,9,.38));
}

/* Header */
.site-header{ position:relative; z-index:1; display:flex; align-items:center; padding:18px 28px; }
.logo{height:72px; filter: drop-shadow(0 6px 18px rgba(44,229,115,.25));}
.spacer{flex:1}

/* ====== TITRE CLASSEMENT ====== */
.board-title {
  text-align: center;
  font-size: 58px;
  font-weight: 900;
  margin: 0 0 20px 0;
  color: white; 
  font-family: "Antique Olive Compact",sans-serif;
  text-shadow: 0 0 12px rgba(255,209,102,.5);
}


/* Containers */
.container{ position:relative; z-index:1; padding:0 28px 28px 28px; }
.board-wrap{
  width:100%;             /* prend toute la largeur dispo */
  margin:0 auto;
  padding:16px 32px;       /* un peu de marge gauche/droite */
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}


.podium{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    ". first ."
    "second . third";
  gap: 12px;                 /* rapproché */
  margin: 8px 0 16px;
  align-items: start;
  justify-items: stretch;
}

.podium-card{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  min-height:64px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 580px;          /* évite que ça s’étale trop large */
}

.podium-card.first{
  grid-area:first;
  justify-self: center;      /* centré */
  max-width: 580px;          /* un peu plus large pour le 1er */
  border-color: rgba(255,209,102,.9);
}
/* Ajuste le podium pour rapprocher TOP 2 et TOP 3 du centre */
.podium-card.second,
.podium-card.third {
  max-width: 320px;   /* largeur réduite pour les rapprocher */
}

.podium-card.second {
  justify-self: end;  /* colle vers le centre */
}

.podium-card.third {
  justify-self: start; /* colle vers le centre */
}




.p-avatar{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.p-name{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:"Antique Olive Compact","Casquination",sans-serif !important;
  font-weight:700;
  font-size: 24px;
}
.p-rank{
  min-width:40px; text-align:center; font-weight:900; color:var(--accent);
  font-family:"Antique Olive Compact",sans-serif !important;
  font-size: 48px;
}
.p-points{
  margin-left:auto; font-weight:900; font-variant-numeric:tabular-nums;
  font-family:"Casquination","Antique Olive Compact",sans-serif !important;
  color: gold;
  font-size: 24px;
}

.board{display:flex;gap:24px;width:100%}
.col{
  flex:1 1 0;
  min-width:0;               /* évite la compression */
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  min-height:1px;            /* visible même vide */
}


/* Lignes (zéro flash) */
.row{
  display:flex; align-items:center; gap:12px;
  height:var(--row-h); padding:6px 10px;
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; overflow:hidden;
  animation:none !important; opacity:1 !important; transform:none !important;
}

.rank{
  min-width:52px; text-align:center; font-weight:800; color:var(--accent);
  font-family:"Antique Olive Compact",sans-serif !important;
  font-size: 32px;
}
.avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.12); flex:0 0 32px; }
.player{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:"Antique Olive Compact","Casquination",sans-serif !important;
  font-size: 24px;
  font-weight:700;
}
.modo-badge{
  margin-left:8px; padding:3px 8px; border-radius:999px;
  background:rgba(44,229,115,.12); border:1px solid rgba(44,229,115,.5); color:#2ce573;
  font-size:12px; font-weight:800; display:inline-flex; gap:6px; align-items:center;
  font-family:"Casquination","Antique Olive Compact",sans-serif !important;
}
.modo-badge img{ width:14px; height:14px; display:block; }
.points{
  margin-left:auto; font-weight:700; letter-spacing:.2px; font-variant-numeric:tabular-nums;
  font-family:"Casquination","Antique Olive Compact",sans-serif !important;
  color: gold;
  font-size: 24px;
}

/* Info bas */
.last-update{ margin-top:12px; text-align:right; font-size:14px; color:var(--muted);
  font-family:"Antique Olive Compact",sans-serif !important; }

/* Responsive léger */
@media (max-width:1280px){
  :root{ --row-h:42px; }
  .p-avatar{ width:44px; height:44px; }
  .board-wrap{max-width:1200px}
}