/* ==============================================
   LEADERBOARD - Design moderne
   ============================================== */

:root {
  --hero-gradient-start: #0f2540;
  --hero-gradient-end: #1a4d7a;
  --leaderboard-accent: #00d9ff;
  --gold: #fbbf24;
  --silver: #cbd5e1;
  --bronze: #fb923c;
}

/* ===== NAVBAR ===== */

/* Desktop : dropdown au hover + "pont" anti trou d’air */
@media (min-width: 901px){
  #primaryNav .has-sub{ position: relative; }

  /* PONT : comble l’espace entre l’onglet et le menu pour garder :hover */
  #primaryNav .has-sub::after{
    content: "";
    position: absolute;
    left: 0; top: 100%;
    width: 100%; height: 8px;   /* = l’écart visuel sous l’onglet */
    pointer-events: auto;
    background: transparent;
    z-index: 1;
  }

  #primaryNav .has-sub > a{
    display: inline-flex; align-items: center; gap: 6px;
  }
  #primaryNav .has-sub .carret{ font-size: .85rem; opacity: .7; }

  #primaryNav .subnav{
    position: absolute; top: calc(100% + 8px); left: 0;  /* 8px = height du pont */
    min-width: 200px;
    background: var(--menu-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 12px 34px rgba(0,0,0,.35);
    display: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 2050;
    pointer-events: auto;
  }
  #primaryNav .has-sub:hover .subnav{
    display: block; opacity: 1; transform: translateY(0);
  }

  #primaryNav .subnav a{
    display: block; padding: 8px 10px; border-radius: 6px; text-align: left;
  }
  #primaryNav .subnav a:hover,
  #primaryNav .subnav a[data-active="true"]{
    background: rgba(255,255,255,.06); color: var(--accent);
  }
}

/* Mobile (drawer) : sous-menu visible sous "Fish", aligné à gauche */
@media (max-width: 900px){
  #primaryNav .has-sub{
    display: flex; flex-direction: column;
  }
  #primaryNav .has-sub > a{
    display: flex; align-items: center; justify-content: space-between;
    padding-right: 6px;
  }
  #primaryNav .has-sub .carret{ opacity: .7; }

  #primaryNav .subnav{
    display: block;
    padding-left: 8px; margin-top: 4px;
    border-left: 2px solid var(--border-color);
  }
  #primaryNav .subnav a{
    display: block; padding: 10px 8px; border-radius: 8px; text-align: left;
  }
  #primaryNav .subnav a:hover,
  #primaryNav .subnav a[data-active="true"]{
    background: rgba(255,255,255,.06); color: var(--accent);
  }
}

/* ———————————————————————————————————————————————— */
/*  Mise en page du classement : podium + TABLEAU       */
/*  S'appuie sur /styles/theme.css + /styles/typography.css */
/* ———————————————————————————————————————————————— */

body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--hero-gradient-start) 100%);
  min-height: 100vh;
}

/* Hero Section */
.leaderboard-hero {
  position: relative;
  min-height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
  padding: 2rem 1rem 1.5rem;
  margin-bottom: 2rem;
}

.hero-background {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(0, 217, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 150, 255, 0.15) 0%, transparent 50%);
  animation: waterFlow 15s ease-in-out infinite;
}

@keyframes waterFlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-icon {
  font-size: 2rem;
  filter: drop-shadow(0 4px 12px rgba(0, 217, 255, 0.4));
  animation: floatIcon 3s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.hero-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  margin: 0 0 0.5rem;
  background: linear-gradient(135deg, #00d9ff 0%, #0088ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.05em;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--muted);
  opacity: 0.9;
}

.container{
  margin: 0 auto 64px;
  padding: 0 18px;
  color: var(--fg);
}

/* ===== Tabs (A11y) ===== */
.tabs{ 
  display: flex; 
  gap: 12px; 
  margin-bottom: 2rem;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  width: fit-content;
}
.tabs [role="tab"]{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 12px;
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
}
.tabs [role="tab"]:hover{
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
}
.tabs [role="tab"][aria-selected="true"]{
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(0, 136, 255, 0.2));
  border: 1px solid rgba(0, 217, 255, 0.3);
  color: var(--leaderboard-accent);
  box-shadow: 0 4px 16px rgba(0, 217, 255, 0.2);
}
.tabs [role="tab"]:focus-visible{
  outline: 2px solid var(--leaderboard-accent);
  outline-offset: 2px;
  outline-offset: 2px;
}

/* Entête */
.lb-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lb-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  color: var(--fg);
}

/* Boutons */
.btn{
  appearance: none;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--leaderboard-accent), #0088ff);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 217, 255, 0.3);
  transition: all 0.3s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
}
.btn.btn-secondary{
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.btn.btn-secondary:hover{
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.btn:disabled{ opacity: .6; cursor: not-allowed; }

.small{ color: var(--muted); font-size: var(--fs-4); margin: 6px 0 10px; }

/* ===== Fish records grid ===== */
.fish-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.fish-card{ background: var(--card); border:3px solid var(--border); border-radius: 14px; padding: 10px; }
/* Rarity borders (reuse colors from sell page for consistency) */
.fish-card.rarity-commun, .fish-card.rarity-peu-commun { border-color: #6b7280; }
.fish-card.rarity-rare { border-color: #22c55e; }
.fish-card.rarity-tres-rare { border-color: #0ea5e9; }
.fish-card.rarity-epique { border-color: #a855f7; }
.fish-card.rarity-legendaire, .fish-card.rarity-legendary { border-color: #f59e0b; }
.fish-card.rarity-mythique { border-color: #ec4899; }
.fish-card-head{ display:flex; align-items:center; gap:8px; margin-bottom: 6px; }
.fish-card .emoji{ font-size: 1.3rem; }
.fish-card .fish-name{ font-size: 1rem; margin: 0; }
.fish-top3{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.fish-top-item{ display:grid; grid-template-columns: 40px 1fr auto; align-items:center; gap:8px; padding:6px; border-radius:10px; background: color-mix(in oklab, var(--card) 94%, transparent); }
.fish-top-item .medal{ font-size:1.1rem; text-align:center; }
.fish-top-item .who{ display:flex; align-items:center; gap:8px; min-width:0; }
.fish-top-item .who .avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.fish-top-item .who .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fish-top-item .weight{ font-variant-numeric: tabular-nums; }

@media (max-width: 980px){
  .fish-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .fish-grid{ grid-template-columns: 1fr; }
}

/* ====== Podium ====== */
.podium{
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
  margin: 2rem 0 3rem;
}

/* Compat : supporte soit .podium .card (HTML actuel), soit .podium-card (votre ancien nom) */
.podium .card,
.podium-card{
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.podium .card:hover,
.podium-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.podium .rank-badge,
.podium-card .medal{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
  animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.podium .first  .rank-badge { 
  width: 80px; 
  height: 80px; 
  font-size: 3.5rem;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
}
.podium .second .rank-badge { 
  width: 70px; 
  height: 70px; 
  font-size: 3rem;
  background: radial-gradient(circle, rgba(203, 213, 225, 0.3) 0%, transparent 70%);
}
.podium .third  .rank-badge { 
  width: 60px; 
  height: 60px; 
  font-size: 2.5rem;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.3) 0%, transparent 70%);
}
.podium .first  .rank-badge{ color: var(--gold); }
.podium .second .rank-badge{ color: var(--silver); }
.podium .third  .rank-badge{ color: var(--bronze); }

.podium .avatar{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  margin: 1rem auto;
  object-fit: cover;
  background: #111;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.podium .card:hover .avatar{
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.podium .name{ 
  font-weight: var(--fw-black);
  margin: 0.5rem 0 0.25rem;
  font-size: 1.25rem;
  color: var(--fg);
}
.podium .login{ 
  color: var(--muted);
  font-size: 0.9rem;
  opacity: 0.8;
}

.podium .stats{
  display:grid; grid-template-columns: repeat(4,1fr); gap:12px;
  margin-top:12px; font-size:.95rem;
}
.podium .stat span{ display:block; color:var(--muted); font-size:.85rem; }
.podium .stat b{ display:block; font-weight:800; font-variant-numeric: tabular-nums; }

.podium .stand{
  margin-top:12px; height:52px; border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px dashed var(--border);
}
.podium .first  .stand{ height:90px; }
.podium .second .stand{ height:70px; }
.podium .third  .stand{ height:52px; }

/* Surélève visuellement les cartes podium */
.podium .card.second { transform: translateY(18px); }
.podium .card.first  { transform: translateY(-18px); z-index:1; }
.podium .card.third  { transform: translateY(36px); }

@media (max-width: 900px){
  .podium{ grid-template-columns: 1fr; }
  .podium .stand{ height:auto !important; }
}

/* ====== TABLEAU moderne ====== */

/* Carte contenant le tableau */
.card{
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}
.table-card{ margin-top: 3rem; }
.table-wrap{ 
  overflow: auto;
  border-radius: 20px;
}

/* A11y utilitaire */
.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Tableau */
.lb-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-variant-numeric: tabular-nums;
}
.lb-table thead th{
  position: sticky; top: 0; z-index: 1;
  text-align:left; font-weight:700;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent),
                                       color-mix(in oklab, var(--card) 80%, transparent));
  border-bottom: 1px solid var(--border);
  padding: 12px 14px; color: var(--muted);
  text-transform: uppercase; letter-spacing:.04em; font-size:.88rem;
}
.lb-table thead th.col-species,
.lb-table thead th.col-uniques,
.lb-table thead th.col-rod,
.lb-table thead th.col-total {
  text-align: center;
}
.lb-table tbody td{
  padding: 12px 14px; border-bottom: 1px dashed var(--border);
}
.lb-table tbody tr:last-child td{ border-bottom: 0; }

.lb-table tbody tr{
  transition: all 0.2s ease;
}
.lb-table tbody tr:nth-child(even){
  background: rgba(255, 255, 255, 0.02);
}
.lb-table tbody tr:hover{
  background: rgba(0, 217, 255, 0.05);
  transform: translateX(4px);
}

/* Colonnes & contenu */
.col-rank{ width:56px; text-align:right; }
.col-player{ min-width:260px; }
.col-species{ width:120px; text-align:center; }
.col-uniques{ width:100px; text-align:center; }
.col-rod{ width:100px; text-align:center; }
.col-total{ width:120px; text-align:center; }

.c-rank{ text-align:right; }
.c-player{ display:flex; align-items:center; gap:12px; min-width:0; }
.c-player .avatar{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  background:#111; border:1px solid var(--border);
}
.c-player .names{ min-width:0; }
.c-player .display{
  font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-player .login{
  color:var(--muted); font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.c-num{ text-align:center; }
.lb-table a{ color: var(--accent); text-decoration:none; }
.lb-table a:hover{ text-decoration:underline; }

/* Responsive colonnes */
@media (max-width: 980px){
  .col-rank{ width:44px; }
  .col-species{ width:100px; }
  .col-uniques{ width:90px; }
  .col-rod{ width:80px; }
  .col-total{ width:100px; }
}

/* Petits utilitaires */
.small{ opacity:.9; }
.hidden{ display:none !important; }

/* ===== (Option) Compat ancien layout "liste" : vous pouvez supprimer ce bloc si non utilisé ===== */
/* Gardé pour ne pas casser d’éventuels anciens fragments HTML */
.lb-list{ margin-top: 8px; }
.lb-head, .lb-row{
  display:grid;
  grid-template-columns: 64px 1fr 120px 110px 100px 120px;
  gap:12px; align-items:center;
}
.lb-head{
  padding: 6px 8px 10px; border-bottom:1px solid var(--border);
  color: var(--muted); font-weight:600;
}
.lb-rows .lb-row{
  padding: 10px 8px; border-bottom:1px dashed var(--border);
}
.lb-rows .lb-row:last-child{ border-bottom:none; }

.c-player .who{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.who .avatar{
  width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--border);
}
.who .names{ min-width:0; }
.who .name{ font-weight:600; }
.who .login{ color:var(--muted); font-size:.9rem; }

@media (max-width: 760px){
  .lb-head{ display:none; }
  .lb-rows .lb-row{
    grid-template-columns: 48px 1fr 1fr;
    grid-template-areas:
      "rank player player"
      ".    s      u"
      ".    rod    total";
    row-gap: 6px;
  }
  .lb-row .c-rank   { grid-area: rank; text-align:center; }
  .lb-row .c-player { grid-area: player; }
  .lb-row .c-species{ grid-area: s; }
  .lb-row .c-uniques{ grid-area: u; }
  .lb-row .c-rod    { grid-area: rod; }
  .lb-row .c-total  { grid-area: total; }
  .c-species::before, .c-uniques::before, .c-total::before, .c-rod::before{
    content: attr(data-label) " ";
    float:left; color: var(--muted);
  }
}