:root{--header-height:50px;--bg-1:#f6f8fc;--bg-2:#fff;--txt:#0e1424;--txt-dim:#273248;--txt-soft:#6b748c;--acc-a:#7c3aed;--acc-b:#06b6d4;--acc-c:#f59e0b;--glass:rgba(255,255,255,.7);--glass-2:rgba(255,255,255,.8);--glass-3:rgba(255,255,255,.92);--stroke:rgba(13,23,45,.1);--stroke-strong:rgba(13,23,45,.22);--r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:24px;--r-xl:28px;--r-xxl:36px;--shadow-1:0 8px 22px rgba(3,8,20,.06),0 2px 6px rgba(3,8,20,.04);--shadow-2:0 18px 48px rgba(3,8,20,.1),0 8px 16px rgba(3,8,20,.06);--shadow-inset:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(8,14,26,.05);--s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-10:10px;--s-12:12px;--s-14:14px;--s-16:16px;--s-18:18px;--s-20:20px;--s-24:24px;--s-28:28px;--s-32:32px;--s-40:40px;--t-fast:160ms cubic-bezier(.2,.8,.2,1);--t-smooth:300ms cubic-bezier(.22,.61,.36,1);--t-slower:600ms cubic-bezier(.22,.61,.36,1);--font-family:Inter}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;margin:0;overflow:hidden}

html{scroll-behavior:smooth}

#page-viewport{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable both-edges;scroll-behavior:smooth;scroll-padding-top:0;contain:layout style paint;content-visibility:auto}

.leaderboard-container,.section-full,.main-content{min-height:calc(100svh - var(--header-height))}

@media(max-width:768px){#page-viewport{top:0}.leaderboard-container,.section-full,.main-content{min-height:100svh}}

#header-container{z-index:1000}

body{color:var(--txt);background:radial-gradient(1200px 800px at 15% 10%,#ebf1ff 0%,#f6f8fc 60%,#f2f5fb 100%);line-height:1.55}

body::before,body::after{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;background:radial-gradient(700px 700px at 12% 18%,rgba(124,58,237,.14),transparent 62%),radial-gradient(800px 800px at 86% 12%,rgba(6,182,212,.18),transparent 66%),radial-gradient(760px 760px at 40% 88%,rgba(245,158,11,.14),transparent 64%);filter:blur(42px) saturate(115%);animation:aurora-drift 32s linear infinite}

body::after{mix-blend-mode:multiply;opacity:.8;animation-duration:44s;animation-direction:reverse}

@keyframes aurora-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,2%,0) scale(1.04)}100%{transform:translate3d(0,0,0) scale(1)}}

html::before{content:"";position:fixed;inset:0;z-index:-3;background:linear-gradient(120deg,#f6f8fc 0%,#fefefe 55%,#f6f8fc 100%);animation:hue-shift 120s ease-in-out infinite}

@keyframes hue-shift{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(10deg)}100%{filter:hue-rotate(0deg)}}

.hidden{display:none!important}

#leaderboard-main-container{opacity:0;visibility:hidden;transition:opacity var(--t-smooth),visibility var(--t-smooth)}

#leaderboard-main-container[style*="opacity: 1"]{transition:opacity var(--t-slower),visibility var(--t-slower)}

.mobile-back-button{position:fixed;top:12px;left:12px;z-index:10001;background:rgba(255,255,255,.95);border:2px solid #e5e5ea;border-radius:12px;padding:8px 12px;font-size:16px;color:#333;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;display:none;align-items:center;gap:6px;font-weight:600;font-family:Inter;user-select:none}

.mobile-back-button:hover{background-color:rgba(247,250,252,.98);border-color:#cbd5e0;transform:scale(1.02)}

.skip-link{position:fixed;top:8px;left:8px;background:#000;color:#fff;padding:8px;text-decoration:none;border-radius:4px;z-index:10000;transform:translateY(-200%);opacity:0;transition:transform .2s ease,opacity .2s ease;font-family:Inter}

.skip-link:focus{transform:translateY(0);opacity:1}

.leaderboard-container{width:100%;max-width:1200px;margin:0 auto;padding:20px 12px}

/* ========================================
   HEADER DU LEADERBOARD - CORRIGÉ
   ======================================== */

.lb-header-container{
  background:rgba(255,255,255,0.95);
  border-radius:24px;
  padding:32px 40px;
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.3);
  animation:pop-in var(--t-slower) both;
  margin:8px 0 26px;
  z-index:100;
  position:relative;
  min-height:auto;
}

@keyframes pop-in{from{opacity:0;transform:translate3d(0,14px,0) scale(.98)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

.lb-header-container::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-inset);pointer-events:none}

.lb-header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:28px;
  flex-wrap:nowrap;
  gap:20px;
}

.lb-title-section{
  display:flex;
  align-items:center;
  gap:20px;
  flex:1;
  min-width:0;
}

.lb-logo{
  width:80px;
  height:80px;
  border-radius:14px;
  filter:drop-shadow(0 4px 12px rgba(245,158,11,.3));
  flex-shrink:0;
}

.lb-title-text{
  flex:1;
  min-width:0;
}

.lb-title-text h1{
  font-size:36px;
  font-weight:800;
  color:#363636;
  margin:0 0 6px 0;
  line-height:1.2;
  letter-spacing:-0.02em;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.lb-title-text p{
  color:#6b7280;
  font-weight:500;
  font-size:15px;
  margin:0;
  font-family:Inter;
}

.lb-stats-section{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:180px;
  flex-shrink:0;
}

.total-players{
  font-size:18px!important;
  font-weight:700!important;
  color:#374151!important;
  font-family:Inter;
  line-height:1.3;
  display:block;
}

#lb-updated{
  font-size:13px!important;
  font-weight:500!important;
  color:#9ca3af!important;
  font-family:Inter;
  line-height:1.2;
  opacity:0.8;
  display:block;
}

.lb-search-section{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:16px;
  align-items:end;
}

.search-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.search-label{
  font-size:12px;
  font-weight:700;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-family:Inter;
}

.country-search-container{
  position:relative;
  --arrow-right:16px;
}

.country-search-container:has(.clear-search.show),.country-search-container.has-clear{
  --arrow-right:48px;
}

.country-search-input,.player-search-input{
  width:100%;
  padding:14px 48px 14px 16px;
  border:2px solid #e5e7eb;
  border-radius:12px;
  background:rgba(255,255,255,0.9);
  font-family:Inter;
  font-size:15px;
  font-weight:500;
  color:#1f2937;
  outline:none;
  transition:all 0.3s ease;
}

.country-search-input:focus,.player-search-input:focus{
  border-color:#06b6d4;
  box-shadow:0 0 0 3px rgba(6,182,212,0.1);
  background:#fff;
}

.country-search-input::placeholder,.player-search-input::placeholder{
  color:#9ca3af;
  font-weight:400;
}

.search-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--txt-soft);
  font-size:18px;
  pointer-events:none;
  display:none;
}

.dropdown-arrow{
  position:absolute;
  right:var(--arrow-right);
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  padding:8px;
  cursor:default;
  color:#6b7280;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}

.dropdown-arrow svg{
  transition:transform .2s ease;
}

.country-search-container.show .dropdown-arrow svg{
  transform:rotate(180deg);
}

.clear-search{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#9ca3af;
  font-size:20px;
  cursor:pointer;
  padding:4px 8px;
  display:none;
  font-family:Inter;
  z-index:3;
  transition:all 0.2s ease;
}

.clear-search.show{
  display:block;
}

.clear-search:hover{
  color:#ef4444;
  transform:translateY(-50%) scale(1.1);
}

.country-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:rgba(255,255,255,.98);
  border:1px solid var(--border-light);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  max-height:280px;
  overflow-y:auto;
  backdrop-filter:blur(12px);
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) translateZ(0);
  transition:opacity var(--t-smooth),transform var(--t-smooth),visibility var(--t-smooth);
  will-change:opacity,transform;
  backface-visibility:hidden;
  -webkit-tap-highlight-color:transparent;
  scrollbar-gutter:stable both-edges;
  user-select:none;
  -webkit-user-select:none;
}

.country-dropdown.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) translateZ(0);
}

.country-dropdown *:focus{
  outline:none;
}

.country-option:focus-visible{
  outline:2px solid var(--acc-b);
  outline-offset:2px;
}

.country-option{
  padding:12px 20px;
  cursor:pointer;
  transition:background-color .15s ease,transform .1s ease;
  font-family:Inter;
  font-size:15px;
  font-weight:500;
  color:var(--txt-primary);
  border-bottom:1px solid rgba(0,0,0,.05);
}

.country-option:hover,.country-option.highlighted{
  background-color:rgba(6,182,212,.1);
  transform:translateX(2px);
}

.country-option:last-child{
  border-bottom:none;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}

.country-option:first-child{
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

.country-separator{
  padding:8px 20px!important;
  background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(124,58,237,.08))!important;
  color:var(--txt-soft)!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:1px!important;
  text-align:center!important;
  cursor:default!important;
  pointer-events:none!important;
}

.find-rank-btn{
  padding:14px 24px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  border:none;
  border-radius:12px;
  font-family:Inter;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 6px 20px rgba(102,126,234,.3);
  min-width:160px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}

.find-rank-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(102,126,234,.4);
  background:linear-gradient(135deg,#5a67d8 0%,#6b46a3 100%);
}

.find-rank-btn:active{
  transform:translateY(0);
}

.search-results-info{
  margin-top:var(--s-16);
  padding:var(--s-12) var(--s-20);
  background:rgba(6,182,212,.08);
  border-radius:var(--r-sm);
  font-size:14px;
  font-weight:600;
  color:var(--acc-b);
  display:none;
  font-family:Inter;
}

.search-results-info.show{
  display:block;
}

.country-dropdown::-webkit-scrollbar{
  width:6px;
}

.country-dropdown::-webkit-scrollbar-track{
  background:rgba(0,0,0,.05);
  border-radius:3px;
}

.country-dropdown::-webkit-scrollbar-thumb{
  background:rgba(6,182,212,.3);
  border-radius:3px;
}

.country-dropdown::-webkit-scrollbar-thumb:hover{
  background:rgba(6,182,212,.5);
}

/* ========================================
   FIN HEADER DU LEADERBOARD
   ======================================== */

.lb-btn{justify-self:start;display:inline-flex;align-items:center;gap:var(--s-8);border:0;padding:var(--s-14) var(--s-20);border-radius:var(--r-md);font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--acc-b),var(--acc-a));position:relative;isolation:isolate;cursor:pointer;transition:transform var(--t-fast),filter var(--t-fast),box-shadow var(--t-fast);box-shadow:0 10px 26px rgba(6,182,212,.25);font-family:Inter;text-decoration:none;font-size:14px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;text-decoration:none;justify-content:center;min-width:120px;font-family:Inter;font-size:14px}

.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.3)}

.btn-primary:hover{background:linear-gradient(135deg,#5a67d8 0%,#6b46a3 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.4)}

.btn-secondary{background:linear-gradient(135deg,#6b7280,#9ca3af);color:#fff;box-shadow:0 4px 12px rgba(107,114,128,.3)}

.btn-secondary:hover{background:linear-gradient(135deg,#4b5563,#6b7280);transform:translateY(-2px);box-shadow:0 6px 16px rgba(75,85,99,.4)}

.btn:active{transform:scale(.98)}

.lb-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%);transform:translateX(-120%);transition:transform 900ms cubic-bezier(.19,1,.22,1);pointer-events:none}

.lb-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}

.lb-btn:hover::after{transform:translateX(120%)}

.lb-btn:active{transform:translateY(0)}

.lb-table-wrap{position:relative;margin-top:var(--s-16);border-radius:var(--r-xxl);background:linear-gradient(180deg,var(--glass-2),var(--glass-3));border:1px solid var(--stroke);box-shadow:var(--shadow-2);overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:rise var(--t-slower) both;z-index:0;min-height:500px}

@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0) scale(.99)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

.lb-table-wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--shadow-inset);pointer-events:none}

.lb-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px;font-family:Inter;min-height:400px}

.lb-table thead{position:sticky;top:0;z-index:10;color:#0e1424;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.98));backdrop-filter:blur(8px)}

.lb-table th{padding:8px 4px;text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:900;position:relative;font-family:Inter}

.col-header-text{text-align:center!important;font-size:32px!important;text-transform:none!important;letter-spacing:0!important;font-weight:700!important;color:#363636!important;padding:12px 8px!important;transition:background-color .3s ease!important;font-family:Inter!important}

.col-header-text.clickable-header{color:#0e1424!important;cursor:pointer!important;border-radius:8px!important;padding:12px 8px!important}

.col-header-text.clickable-header:hover{color:#0e1424!important;background-color:rgba(6,182,212,.1)!important}

.lb-table-description-row{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.95))!important}

.lb-table-description{text-align:left!important;font-size:13px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;color:var(--txt-soft)!important;padding:6px 12px 10px 12px!important;line-height:1.4!important;font-style:italic!important;border-bottom:1px solid rgba(10,18,36,.08)!important;width:100%!important;display:table-cell!important;box-sizing:border-box!important;font-family:Inter!important}

.lb-table-description-row th{padding:0!important}

.lb-table-description-row th.lb-table-description{width:100%!important;max-width:100%!important}

.countries-description{width:100%}

.countries-list{margin-top:12px;padding:16px;background:rgba(255,255,255,.6);border-radius:8px;border:1px solid rgba(6,182,212,.2);backdrop-filter:blur(8px);overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);max-height:500px;opacity:1;transform:translateY(0)}

.countries-list.hidden{max-height:0;opacity:0;transform:translateY(-10px);margin-top:0;padding-top:0;padding-bottom:0;border-width:0}

.countries-grid{font-size:12px;line-height:1.6;color:var(--txt);font-weight:500;font-family:Inter}

/* ========================================
   CORRECTION: Ligne de séparation header
   ======================================== */
.lb-table th::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(10,18,36,.12);
}

.lb-table-description::after{display:none!important}

/* ⚡ CLS FIX: Colonnes avec largeurs fixes */
.col-rank{width:60px!important;min-width:60px!important;max-width:60px!important;text-align:center;padding-left:8px;padding-right:4px}

/* ⚡ DRAPEAUX 100px: Colonne ajustée */
.col-flag{width:130px!important;min-width:130px!important;max-width:130px!important;text-align:center;padding-left:8px!important;padding-right:8px!important}

.col-name{min-width:220px!important;padding-left:12px;padding-right:12px}

.col-value{width:140px!important;min-width:140px!important;max-width:140px!important;text-align:left;padding-left:32px}

/* ⚡ CLS FIX: Hauteurs strictes pour 110px (drapeaux 100px) */
.lb-table td{
  padding:8px 4px;
  border-bottom:1px solid rgba(10,18,36,.06);
  vertical-align:middle;
  position:relative;
  font-family:Inter;
  height:110px!important;
  min-height:110px!important;
  max-height:110px!important;
  box-sizing:border-box;
}

/* ⚡ CLS FIX: Hauteurs strictes pour les rows */
.lb-row{
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.96));
  transition:transform var(--t-fast),background-color var(--t-fast),box-shadow var(--t-fast);
  cursor:pointer;
  animation:row-in .42s cubic-bezier(.22,.61,.36,1) both;
  height:110px!important;
  min-height:110px!important;
  max-height:110px!important;
  contain:layout style paint;
}

@keyframes row-in{from{opacity:0;transform:translate3d(-10px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

.lb-row:hover{transform:translateY(-1px);background-color:rgba(255,255,255,1);box-shadow:0 6px 18px rgba(4,9,20,.08)}

.lb-row:active{transform:translateY(0)}

.lb-row.current,.lb-row.current-user{background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(245,158,11,.22));box-shadow:0 8px 24px rgba(245,158,11,.16);border-left:4px solid #f59e0b}

.lb-row.highlighted{background:linear-gradient(135deg,rgba(6,182,212,.16),rgba(124,58,237,.22));box-shadow:0 8px 24px rgba(6,182,212,.16);border-left:4px solid #06b6d4;animation:pulse 2.2s ease-in-out}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}

.col-rank{font-weight:900;font-size:18px;color:#363636;font-family:Inter}

.col-flag{font-size:22px;color:var(--txt-dim)}

/* ⚡⚡⚡ NOMS AGRANDIS À 22px ⚡⚡⚡ */
.col-name{font-weight:700;color:#363636;font-size:22px!important;font-family:Inter}

.col-name>div:first-child{font-weight:900;color:#363636;margin-bottom:2px;font-size:22px!important;font-family:Inter}

/* ⚡⚡⚡ NOMBRE DE GAMES AGRANDI À 16px ⚡⚡⚡ */
.col-name>div:last-child{font-size:16px!important;color:var(--txt-soft);font-weight:600;font-family:Inter}

.col-value{font-weight:900;font-size:18px;color:#363636;font-family:Inter}

.medal-emoji{font-size:38px;display:inline-block;margin-right:0;vertical-align:middle;line-height:1}

/* ⚡ CLS FIX: Médailles sans animation filter (cause de CLS) */
.medal-svg{
  display:inline-block;
  vertical-align:middle;
  width:90px!important;
  height:90px!important;
  object-fit:contain;
  margin-right:12px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  transform:translateZ(0);
  backface-visibility:hidden;
  contain:layout style paint;
}

@media (prefers-reduced-motion: reduce) {
  .medal-svg{
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  }
}

/* ⚡ DRAPEAUX 100px: Dimensions fixes strictes */
.flag-circle{
  width:100px!important;
  height:100px!important;
  min-width:100px!important;
  min-height:100px!important;
  max-width:100px!important;
  max-height:100px!important;
  border-radius:50%;
  background-color:#f0f0f0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.3);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:50px!important;
  flex-shrink:0;
  contain:layout style paint;
  box-sizing:border-box;
}

.flag-circle.loading{opacity:.85;animation:flag-pulse 1.5s ease-in-out infinite}

@keyframes flag-pulse{0%,100%{opacity:.85}50%{opacity:.65}}

.flag-circle.loaded{animation:none;background-color:transparent}

.lb-row:nth-child(1){animation-delay:.05s}

.lb-row:nth-child(2){animation-delay:.1s}

.lb-row:nth-child(3){animation-delay:.15s}

.lb-row:nth-child(4){animation-delay:.2s}

.lb-row:nth-child(5){animation-delay:.25s}

.lb-row:nth-child(n+6){animation-delay:.3s}

/* ⚡ CLS FIX: Skeleton rows avec dimensions exactes */
.skeleton-row{
  animation:pulse-skeleton 1.5s ease-in-out infinite alternate;
  height:110px!important;
  min-height:110px!important;
  max-height:110px!important;
  contain:layout style paint;
}

.skeleton-placeholder{position:relative;overflow:hidden;background:#e5e7eb;border-radius:4px;padding:8px 12px;font-family:Inter;min-height:1.4em;display:block}

.skeleton-placeholder::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:skeleton-shimmer 1.5s ease-in-out infinite;transform:translateX(-100%)}

@keyframes skeleton-shimmer{to{transform:translateX(100%)}}

@keyframes pulse-skeleton{0%{opacity:.6}100%{opacity:1}}

.lb-loading{display:none;align-items:center;justify-content:center;gap:var(--s-10);padding:var(--s-20);background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.92));border-top:1px solid rgba(10,18,36,.08);color:var(--txt-soft);font-size:14px;font-weight:700;font-family:Inter}

.lb-loading.show,.lb-loading[style*="display: flex"]{display:flex}

.lb-spinner{width:20px;height:20px;border:2px solid rgba(10,18,36,.18);border-top-color:var(--acc-b);border-radius:50%;animation:spin 1s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}

.lb-pagination{margin-top:var(--s-16);display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s-12);align-items:center;background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--stroke);border-radius:var(--r-lg);padding:var(--s-12) var(--s-16);box-shadow:var(--shadow-1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:slide-up var(--t-smooth) both;min-height:64px;height:64px}

@keyframes slide-up{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

.pagination-btn{padding:var(--s-10) var(--s-16);border-radius:var(--r-sm);border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,1));color:var(--txt);font-weight:700;font-size:14px;cursor:pointer;transition:background-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);font-family:Inter;min-width:100px;display:flex;align-items:center;justify-content:center;gap:6px;height:40px}

.pagination-btn:hover:not(:disabled){background:linear-gradient(180deg,rgba(255,255,255,1),rgba(245,248,250,1));transform:translateY(-1px);box-shadow:var(--shadow-sm)}

.pagination-btn:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(180deg,rgba(240,240,240,.9),rgba(235,235,235,1));color:var(--txt-soft)}

.prev-btn{justify-self:start}

.next-btn{justify-self:end}

#lb-page{font-weight:800;color:var(--txt-dim);opacity:.95;font-family:Inter;text-align:center;min-height:1.2em}

.lb-go{display:inline-flex;gap:var(--s-8);align-items:center;justify-self:end}

#lb-goto{width:130px;padding:var(--s-10) var(--s-12);border-radius:var(--r-sm);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,1));color:var(--txt);border:1.5px solid var(--stroke);font-weight:700;font-size:14px;outline:none;transition:var(--t-fast);font-family:Inter;height:40px}

#lb-goto:focus{border-color:var(--stroke-strong);box-shadow:0 0 0 4px rgba(124,58,237,.18)}

#lb-gobtn{padding:var(--s-10) var(--s-14);border-radius:var(--r-sm);border:0;color:#fff;font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--acc-a),var(--acc-b));box-shadow:0 10px 24px rgba(124,58,237,.22);cursor:pointer;transition:var(--t-fast);font-family:Inter;height:40px}

#lb-gobtn:hover{transform:translateY(-1px)}

#lb-gobtn:active{transform:translateY(0)}

.error-state,.empty-state{margin:var(--s-16) 0;text-align:center;color:var(--txt);border-radius:var(--r-xl);padding:var(--s-32) var(--s-24);background:linear-gradient(180deg,var(--glass-2),var(--glass-3));border:1px solid var(--stroke);box-shadow:var(--shadow-1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fade-in var(--t-smooth) both;font-family:Inter}

@keyframes fade-in{from{opacity:0}to{opacity:1}}

.error-title{font-size:20px;font-weight:900;color:#9f1239;margin-bottom:var(--s-6);font-family:Inter}

.error-text{color:var(--txt-soft);font-weight:700;margin-bottom:var(--s-20);font-family:Inter}

.empty-icon{font-size:48px;opacity:.5;margin-bottom:var(--s-12)}

.empty-title{font-size:18px;font-weight:900;margin-bottom:var(--s-6);font-family:Inter}

.empty-text{font-size:14px;font-weight:700;color:var(--txt-soft);font-family:Inter}

.lb-row.search-result{position:relative}

.lb-row.search-result::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:0 3px 3px 0}

.lb-row.search-result:hover::before{background:linear-gradient(135deg,#2563eb,#1e40af)}

.empty-state{text-align:center;padding:40px 20px;color:var(--text-secondary)}

.empty-icon{font-size:48px;margin-bottom:16px;opacity:.7}

.empty-title{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}

.empty-text{font-size:16px;line-height:1.5}

.privacy-lock{display:inline-block;margin-left:8px;font-size:16px;opacity:.8;filter:grayscale(20%)}

.player-name-row{display:flex;align-items:center;gap:4px}

.player-games-count{font-size:16px!important;color:var(--txt-soft);font-weight:600;font-family:Inter}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.lb-btn:focus,#lb-goto:focus,#lb-gobtn:focus,.lb-row:focus,.pagination-btn:focus{outline:2px solid transparent;box-shadow:0 0 0 4px rgba(6,182,212,.22),0 0 0 1px rgba(6,182,212,.1)}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media(max-width:1024px){
  .leaderboard-container{padding:var(--s-16)}
  .col-rank{width:60px!important;min-width:60px!important;max-width:60px!important}
  .col-flag{width:120px!important;min-width:120px!important;max-width:120px!important}
  .col-value{width:120px!important;min-width:120px!important;max-width:120px!important;padding-left:24px}
}

@media(max-width:900px){
  .lb-header-container{padding:28px 32px}
  
  .lb-header-top{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  
  .lb-title-section{
    width:100%;
  }
  
  .lb-stats-section{
    text-align:left;
    margin-left:0;
    width:100%;
  }
  
  .lb-search-section{
    grid-template-columns:1fr;
    gap:14px;
  }
  
  .find-rank-btn{
    width:100%;
    min-width:auto;
  }
  
  .lb-pagination{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:var(--s-8);
  }
  
  .pagination-btn{min-width:auto}
  .prev-btn{grid-column:1;grid-row:1;justify-self:start}
  .next-btn{grid-column:2;grid-row:1;justify-self:end}
  #lb-page{grid-column:1/-1;grid-row:2;text-align:center}
  .lb-go{grid-column:1/-1;grid-row:3;justify-self:center;margin-top:var(--s-8)}
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media(max-width:768px){
  #header-container,.suiro-header{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important}
  .mobile-back-button{display:flex!important}
  .mobile-hamburger,.mobile-menu-overlay,.mobile-menu{display:none!important}
  
  .leaderboard-container{
    padding:12px!important;
    margin-top:0!important;
    padding-top:60px!important;
  }
  
  .lb-header-container{
    padding:20px!important;
    border-radius:16px!important;
    margin:8px 0 20px!important;
  }
  
  .lb-header-top{
    margin-bottom:20px;
  }
  
  .lb-title-section{
    gap:14px;
  }
  
  .lb-logo{
    width:60px;
    height:60px;
  }
  
  .lb-title-text h1{
    font-size:28px;
  }
  
  .lb-title-text p{
    font-size:14px;
  }
  
  .total-players{
    font-size:16px!important;
  }
  
  #lb-updated{
    font-size:12px!important;
  }
  
  .lb-search-section{
    gap:12px;
  }
  
  .country-search-input,.player-search-input{
    padding:12px 45px 12px 16px;
    font-size:14px;
    border-radius:12px;
    min-height:44px;
  }
  
  .find-rank-btn{
    font-size:14px;
    padding:12px 16px;
    min-height:44px;
    border-radius:12px;
  }
  
  .country-dropdown{
    max-height:240px;
    border-radius:12px;
  }
  
  .country-option{
    padding:12px 16px;
    font-size:14px;
    min-height:44px;
  }
  
  .lb-table-wrap{
    margin-top:12px!important;
    border-radius:16px!important;
    min-height:400px!important;
  }
  
  .lb-table{
    font-size:13px!important;
    min-height:300px!important;
  }
  
  .lb-table th,.lb-table td{
    padding:10px 8px!important;
  }
  
  /* ⚡ MOBILE: Drapeaux 80px au lieu de 100px */
  .col-rank{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    padding-left:8px!important;
    padding-right:4px!important;
  }
  
  .col-flag{
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  
  .col-name{
    padding-left:8px!important;
    padding-right:8px!important;
    min-width:140px!important;
  }
  
  /* ⚡ MOBILE: Noms 16px, games 13px */
  .col-name>div:first-child{
    font-size:16px!important;
  }
  
  .col-name>div:last-child{
    font-size:13px!important;
  }
  
  .col-value{
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    font-size:14px!important;
    padding-left:16px!important;
  }
  
  /* ⚡ MOBILE: Hauteurs 90px */
  .skeleton-row{
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
  }
  
  .lb-row{
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
  }
  
  .lb-table td{
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
  }
  
  /* ⚡ MOBILE: Drapeaux 80px */
  .flag-circle{
    width:80px!important;
    height:80px!important;
    min-width:80px!important;
    min-height:80px!important;
    max-width:80px!important;
    max-height:80px!important;
    font-size:40px!important;
  }
  
  .col-header-text{
    font-size:16px!important;
    padding:14px 12px!important;
  }
  
  .lb-table-description{
    font-size:12px!important;
    padding:var(--s-6) var(--s-20) var(--s-12) var(--s-20)!important;
  }
  
  .countries-list{
    padding:12px!important;
    margin-top:8px!important;
    max-height:400px;
  }
  
  .countries-grid{
    font-size:11px!important;
  }
  
  .lb-pagination{
    margin-top:12px!important;
    padding:10px 12px!important;
    gap:8px!important;
    min-height:56px!important;
    height:56px!important;
  }
  
  .pagination-btn{
    padding:8px 12px!important;
    font-size:13px!important;
    min-width:80px!important;
    height:36px!important;
  }
  
  #lb-goto{
    width:80px!important;
    padding:8px 10px!important;
    font-size:13px!important;
    height:36px!important;
  }
  
  #lb-gobtn{
    padding:8px 12px!important;
    font-size:13px!important;
    min-width:50px!important;
    height:36px!important;
  }
  
  .medal-svg{
    width:70px!important;
    height:70px!important;
    margin-right:8px;
  }
}

@media(max-width:480px){
  .leaderboard-container{
    padding:8px!important;
    padding-top:56px!important;
  }
  
  .lb-header-container{
    padding:16px!important;
    margin:6px 0 16px!important;
  }
  
  .lb-logo{
    width:50px;
    height:50px;
  }
  
  .lb-title-text h1{
    font-size:24px;
  }
  
  .lb-title-text p{
    font-size:13px;
  }
  
  .country-search-input,.player-search-input,.find-rank-btn{
    min-height:48px!important;
    font-size:16px!important;
  }
  
  .col-rank{
    width:45px!important;
    min-width:45px!important;
    max-width:45px!important;
    padding-left:6px!important;
    padding-right:2px!important;
  }
  
  .col-flag{
    width:90px!important;
    min-width:90px!important;
    max-width:90px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
  
  .col-name{
    min-width:120px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  
  /* ⚡ TRÈS PETIT ÉCRAN: Noms 14px, games 12px */
  .col-name>div:first-child{
    font-size:14px!important;
  }
  
  .col-name>div:last-child{
    font-size:12px!important;
  }
  
  .col-value{
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
    font-size:13px!important;
    padding-left:14px!important;
  }
  
  /* ⚡ TRÈS PETIT ÉCRAN: Drapeaux 70px */
  .flag-circle{
    width:70px!important;
    height:70px!important;
    min-width:70px!important;
    min-height:70px!important;
    max-width:70px!important;
    max-height:70px!important;
    font-size:35px!important;
  }
  
  .pagination-btn{
    min-width:70px!important;
  }
  
  #lb-goto{
    width:70px!important;
    font-size:16px!important;
  }
  
  .medal-svg{
    width:60px!important;
    height:60px!important;
    margin-right:6px;
  }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
  
  .lb-row:hover,.lb-btn:hover,#lb-gobtn:hover,.pagination-btn:hover,.find-rank-btn:hover{
    transform:none!important;
  }
  
  .col-header-text.clickable-header:hover{
    transform:none!important;
    background-color:rgba(6,182,212,.1)!important;
  }
  
  .countries-list{
    transition:none!important;
  }
  
  .countries-list.hidden{
    display:none!important;
  }
  
  .skeleton-row{
    animation:none;
    opacity:.8;
  }
  
  .country-search-input,.player-search-input,.country-dropdown,.country-option,.mobile-back-button,.clear-search{
    transition:none!important;
  }
}

@media(prefers-contrast:high){
  .country-search-input,.player-search-input{
    border-width:3px;
    border-color:#000;
  }
  
  .country-option:focus,.pagination-btn:focus{
    outline:3px solid #000;
    background:#fff;
    color:#000;
  }
  
  .mobile-back-button{
    border-width:3px;
  }
}