/* leaderboard-inline.css - Styles extraits du HTML inline */

/* Variables CSS */
:root{--font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;--primary:#007aff;--primary-hover:#0056b3;--primary-light:rgba(0,122,255,0.1);--secondary:#4a5568;--secondary-hover:#2d3748;--text-primary:#1c1c1e;--text-secondary:#374151;--text-muted:#6b7280;--success:#28a745;--warning:#ff9500;--error:#ff3b30;--error-dark:#d70015;--error-glow:rgba(255,59,48,0.8);--info:#007aff;--gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-secondary:linear-gradient(135deg,#6b7280,#9ca3af);--gradient-success:linear-gradient(135deg,#10b981,#059669);--gradient-error:linear-gradient(135deg,#ff3b30,#d70015);--gradient-warning:linear-gradient(135deg,#ff9500,#e67e22);--gradient-gold:linear-gradient(135deg,#ffd700,#ff8c00);--bg-glass:rgba(255,255,255,0.98);--bg-glass-light:rgba(255,255,255,0.15);--bg-glass-dark:rgba(0,0,0,0.05);--bg-page:#f2f2f7;--bg-primary:#ffffff;--bg-secondary:#f2f2f7;--bg-tertiary:#e5e5ea;--bg-sudoku:#E6F0FF;--border-light:#e5e5ea;--border-medium:#d1d5db;--border-dark:#484848;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 12px rgba(0,0,0,0.15);--shadow-lg:0 8px 25px rgba(0,0,0,0.15);--shadow-xl:0 25px 50px rgba(0,0,0,0.08);--shadow-2xl:0 25px 50px rgba(0,0,0,0.3);--shadow-primary:0 4px 12px rgba(102,126,234,0.3);--shadow-error:0 0 0 4px var(--error-glow);--transition-fast:0.1s ease;--transition-normal:0.2s ease;--transition-slow:0.3s ease;--transition-smooth:0.3s cubic-bezier(0.4,0,0.2,1);--transition-bounce:0.3s cubic-bezier(0.34,1.56,0.64,1);--font-weight-normal:400;--font-weight-medium:600;--font-weight-semibold:600;--font-weight-bold:800;--font-weight-extrabold:800;--btn-padding-desktop:12px 24px;--btn-radius-desktop:8px;--btn-font-desktop:16px;--header-padding-desktop:15px 30px;--header-height-desktop:70px;--header-font-desktop:16px;--header-logo-height-desktop:55px;--header-logo-max-width-desktop:275px;--header-height:70px}

/* Boutons */
.btn{padding:var(--btn-padding-desktop);border-radius:var(--btn-radius-desktop);font-size:var(--btn-font-desktop);font-weight:var(--font-weight-semibold);cursor:pointer;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.3s ease,opacity 0.3s ease;border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:120px;font-family:var(--font-family);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-primary{background:var(--gradient-primary);color:white;box-shadow:var(--shadow-primary)}
.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#5a67d8 0%,#6b46a3 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.4)}
.btn-secondary{background:var(--gradient-secondary);color:white;box-shadow:0 4px 12px rgba(107,114,128,0.3)}
.btn-secondary:hover:not(:disabled){background:linear-gradient(135deg,#4b5563,#6b7280);transform:translateY(-2px);box-shadow:0 6px 16px rgba(75,85,99,0.4)}
.btn:active{transform:scale(0.98)}

.nav-btn{background:transparent;border:2px solid #d1d5db;font-size:var(--header-font-desktop);font-weight:var(--font-weight-semibold);color:#374151;cursor:pointer;padding:10px 20px;border-radius:6px;transition:transform 0.2s ease,background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;text-decoration:none;font-family:var(--font-family);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.nav-btn:hover{background-color:#f3f4f6;border-color:#9ca3af;color:#1f2937;transform:translateY(-1px)}
.nav-btn.active{background:var(--gradient-primary);color:white;border-color:transparent}

/* Header */
.suiro-header{display:flex;justify-content:space-between;align-items:center;padding:var(--header-padding-desktop);background-color:#fff;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.08);min-height:var(--header-height-desktop);font-family:var(--font-family);z-index:1000;overflow:visible;width:100%}
.suiro-nav-left{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.suiro-logo{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;cursor:pointer;transition:transform 0.3s ease,opacity 0.3s ease;padding:10px 15px;border-radius:8px;display:flex!important;align-items:center!important;justify-content:center!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible!important;z-index:1001!important}
.suiro-logo:hover{background-color:transparent!important;transform:translateX(-50%) scale(1.02)!important}
.suiro-logo .suiro-logo-container{position:static!important;transform:none!important;left:auto!important;right:auto!important;margin:0!important;padding:4px!important;display:inline-block!important}
.suiro-logo-image{height:var(--header-logo-height-desktop);width:auto;max-width:var(--header-logo-max-width-desktop);object-fit:contain;transition:transform 0.3s ease,filter 0.3s ease,opacity 0.3s ease}
.suiro-logo .suiro-logo-svg{height:var(--header-logo-height-desktop)!important;max-width:var(--header-logo-max-width-desktop)!important;width:auto!important}
.suiro-logo:hover .suiro-logo-image{filter:brightness(1.1)}
.suiro-logo-fallback{font-size:30px;font-weight:800;color:var(--secondary);letter-spacing:-0.5px;font-family:Inter}
.suiro-nav-right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.suiro-nav-menu{display:flex!important;align-items:center;gap:12px;visibility:visible!important;opacity:1!important}
.suiro-nav-btn{background:transparent!important;border:2px solid #d1d5db!important;font-size:var(--header-font-desktop)!important;font-weight:600!important;color:#374151!important;cursor:pointer!important;padding:10px 20px!important;border-radius:6px!important;transition:transform 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,color 0.3s ease,box-shadow 0.3s ease!important;text-decoration:none!important;font-family:var(--font-family)!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap!important;display:inline-block!important;visibility:visible!important;opacity:1!important}
.suiro-nav-btn:hover{background-color:#f3f4f6!important;border-color:#9ca3af!important;color:#1f2937!important}
.suiro-nav-btn.active{background:var(--gradient-primary)!important;color:white!important;border-color:transparent!important}
.suiro-auth-buttons{display:flex;align-items:center;gap:12px;min-width:150px;min-height:50px}
.suiro-user-menu{position:relative;display:inline-block}
.suiro-user-name{display:flex;align-items:center;gap:8px;padding:10px 8px;background:transparent;border:none;border-radius:0;color:#374151;font-size:var(--header-font-desktop);font-weight:600;cursor:pointer;transition:color 0.3s ease;font-family:var(--font-family);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.suiro-user-name:hover{background:transparent;border:none;color:#1f2937}
.suiro-user-name::after{content:'▼';font-size:10px;transition:transform 0.3s ease}
.suiro-user-menu:hover .suiro-user-name::after{transform:rotate(180deg)}
.suiro-dropdown-menu{position:absolute;top:100%;right:0;background:rgba(255,255,255,0.98);border:1px solid rgba(229,229,234,0.3);border-radius:12px;box-shadow:0 25px 50px rgba(0,0,0,0.08);min-width:250px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1),visibility 0.3s cubic-bezier(0.4,0,0.2,1);z-index:1000;backdrop-filter:blur(10px)}
.suiro-user-menu:hover .suiro-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.suiro-dropdown-menu a{display:block;padding:14px 20px;color:var(--text-primary);text-decoration:none;font-size:var(--header-font-desktop);font-weight:600;transition:background-color 0.2s ease,color 0.2s ease;border-bottom:1px solid rgba(229,229,234,0.3);font-family:Inter}
.suiro-dropdown-menu a:last-child{border-bottom:none}
.suiro-dropdown-menu a:hover{background:rgba(0,122,255,0.1);color:var(--primary)}
.suiro-dropdown-menu a:first-child{border-top-left-radius:12px;border-top-right-radius:12px}
.suiro-dropdown-menu a:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.suiro-auth-btn{padding:10px 22px;border-radius:8px;font-size:var(--header-font-desktop);font-weight:600;cursor:pointer;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-width:120px;justify-content:center;font-family:var(--font-family);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.suiro-login-btn{background:transparent;border:2px solid #d1d5db;color:#374151;padding:10px 22px;border-radius:8px;font-size:var(--header-font-desktop);min-width:120px;font-family:Inter}
.suiro-login-btn:hover{background:rgba(243,244,246,0.9);border-color:#9ca3af;color:#1f2937;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}

/* Utilitaires */
.hidden{display:none}
.block{display:block}
.show{display:block}
.disabled{opacity:0.6;pointer-events:none}

/* Focus */
*:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
.btn:focus-visible,.nav-btn:focus-visible,.suiro-nav-btn:focus-visible,.suiro-user-name:focus-visible,.suiro-auth-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.suiro-dropdown-menu a:focus-visible{background:rgba(0,122,255,0.1);color:var(--primary)}

/* Skip link */
.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 0.2s ease,opacity 0.2s ease;font-family:Inter}
.skip-link:focus{transform:translateY(0);opacity:1}

/* Screen reader */
.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}

/* Table */
.col-header-text{font-size:32px!important;font-weight:800!important;text-align:center!important;color:#363636!important}
.find-rank-btn{font-size:14px!important;padding:12px 20px!important;min-width:140px!important}
.medal-svg{display:inline-block;vertical-align:middle;width:50px!important;height:50px!important;object-fit:contain;aspect-ratio:1/1;float:right!important}
.col-header-text,.lb-table{font-family:var(--font-family);font-display:swap}

input,textarea,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;caret-color:var(--primary);font-family:Inter}

#main-content{min-height:calc(100vh - var(--header-height));contain:layout style paint;content-visibility:auto;transform:translateZ(0);will-change:auto;}
#lb-body{min-height:500px!important;contain:layout;will-change:contents}
#lb-body tr{height:60px!important;min-height:60px!important;max-height:60px!important}
.lb-row{height:60px!important;min-height:60px!important;max-height:60px!important;contain:layout style paint}
.skeleton-row{animation:pulse-skeleton 1.5s ease-in-out infinite alternate;height:60px!important;min-height:60px!important;max-height:60px!important;contain:layout style paint}
.skeleton-row td{height:60px!important;min-height:60px!important;max-height:60px!important;padding:6px 10px!important;box-sizing:border-box!important}

body.page-ready #lb-body .skeleton-row{display:none!important}

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

/* Drapeaux */
.flag-circle{will-change:auto;contain:layout style paint;width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;max-width:58px!important;max-height:58px!important;border-radius:50%;background-size:cover;background-position:center;background-color:#e5e7eb;flex-shrink:0;box-sizing:border-box;margin-left:0!important;margin-right:auto!important;}
.flag-circle:not(.flag-loaded){background-color:#e5e7eb;background-image:none!important}

#page-viewport{min-height:calc(100vh - var(--header-height));contain:layout}
.leaderboard-container{min-height:calc(100vh - var(--header-height) - 40px);contain:layout;padding-top:20px;transform:translateZ(0);}
.lb-table-wrap{min-height:600px!important;contain:layout;height:auto;transform:translateZ(0);}
.lb-table thead{background:#fff}

.col-header-text{font-size:32px!important;font-weight:800!important;padding:16px!important;text-align:center!important;color:#363636!important;}
.lb-pagination{height:64px!important;min-height:64px!important;max-height:64px!important}

/* Colonnes */
.col-rank{width:50px;min-width:50px;max-width:50px;text-align:right!important;padding-left:8px;padding-right:8px!important;color:#363636!important;font-size:18px!important;font-weight:700!important}
.col-flag{width:70px;min-width:70px;max-width:70px;text-align:left!important;padding-left:8px;padding-right:8px}
.col-name{min-width:180px;padding-left:10px;color:#363636!important;font-size:15px!important;font-weight:600!important}
.col-value{width:100px;min-width:100px;max-width:100px;text-align:left;padding-left:20px;color:#363636!important;font-size:15px!important;font-weight:600!important}

#lb-body .col-rank{font-size:18px!important;font-weight:700!important;color:#363636!important}
#lb-body .col-name{font-size:15px!important;font-weight:600!important;color:#363636!important}
#lb-body .col-value{font-size:15px!important;font-weight:600!important;color:#363636!important}
.lb-table tbody td.col-rank{font-size:18px!important;font-weight:700!important}
.lb-table tbody td.col-name{font-size:15px!important;font-weight:600!important}
.lb-table tbody td.col-value{font-size:15px!important;font-weight:600!important}

@media (prefers-reduced-motion:reduce){.btn,.nav-btn,.suiro-nav-btn,.suiro-logo,.suiro-logo-image,.suiro-user-name,.suiro-dropdown-menu,.suiro-auth-btn,.skip-link{transition:none}}

/* RTL Support - Force LTR pour le contenu du leaderboard, header reste RTL */
.rtl-language .leaderboard-container,
.rtl-language #main-content,
.rtl-language .lb-header-container,
.rtl-language .lb-table-wrap,
.rtl-language .lb-table,
.rtl-language .lb-pagination{direction:ltr;text-align:left}
.rtl-language .lb-table th,
.rtl-language .lb-table td{text-align:left}
.rtl-language .col-rank{text-align:right}
.rtl-language .country-search-container,
.rtl-language .search-group{direction:ltr}
.rtl-language .search-group input{text-align:left}