/* 👑 Roi du Site : noir / bleu nuit, or pour le Roi, argent (2ᵉ), bronze (3ᵉ) */
.king-page, .king-overlay, .king-banner, .k-prof {
  --k-night: #05070f; --k-night-2: #0b1226; --k-night-3: #121c3a; --k-line: #24325f;
  --k-gold: #ffd35a; --k-gold-2: #ff9f1c; --k-silver: #d5dbe8; --k-bronze: #cd8b4f;
}
.king-page { display: flex; flex-direction: column; gap: 18px; padding-bottom: 30px; }
.king-page h2 { margin: 0 0 10px; font-size: 1.25rem; }
.k-sec { padding: 16px; border-radius: 20px; background: linear-gradient(180deg, var(--k-night-2), var(--k-night)); border: 1px solid var(--k-line); color: #eef2ff; }
.k-sec .muted { color: #9fb0e0; }

/* le Roi : bien plus grand que les autres */
.k-hero { position: relative; overflow: hidden; text-align: center; padding: 26px 16px 22px; border-radius: 28px; color: #fff7dc;
  background: radial-gradient(120% 90% at 50% 0%, #3a2a05 0%, var(--k-night-2) 55%, var(--k-night) 100%); border: 2px solid var(--k-gold); box-shadow: 0 0 0 4px rgba(255,211,90,.12), 0 18px 60px rgba(255,170,30,.28); }
.k-hero.empty { border-color: var(--k-line); box-shadow: none; }
.k-rays { position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,211,90,.16) 10%, transparent 14% 24%, rgba(255,211,90,.12) 26%, transparent 30% 40%, rgba(255,211,90,.16) 42%, transparent 46% 56%, rgba(255,211,90,.12) 58%, transparent 62% 72%, rgba(255,211,90,.16) 74%, transparent 78% 100%); animation: kSpin 40s linear infinite; pointer-events: none; }
.k-hero > * { position: relative; }
.k-crown { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 6px 14px rgba(255,170,30,.7)); animation: kFloat 3s ease-in-out infinite; }
.k-label { letter-spacing: .35em; font-weight: 900; font-size: .85rem; color: var(--k-gold); margin: 4px 0 12px; }
.k-king { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.k-king .avatar { width: 104px; height: 104px; border-radius: 50%; font-size: 3.4rem; border: 4px solid var(--k-gold); box-shadow: 0 0 0 5px rgba(255,211,90,.25), 0 0 40px rgba(255,190,50,.6); }
.k-name { font-size: clamp(1.8rem, 7vw, 2.8rem); font-weight: 900; background: linear-gradient(180deg, #fff3b8, var(--k-gold) 55%, var(--k-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.k-points { font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 900; color: var(--k-gold); margin-top: 2px; font-variant-numeric: tabular-nums; }
.k-points small { font-size: .45em; opacity: .8; font-weight: 700; }
.k-reign { color: #ead9a0; font-size: .95rem; margin-top: 2px; }
.k-count { margin-top: 16px; display: inline-block; padding: 9px 16px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,211,90,.45); font-size: .95rem; }
.k-count b { color: var(--k-gold); font-variant-numeric: tabular-nums; }
.k-count small { opacity: .7; }
.k-hero.empty h1 { margin: 6px 0; }

/* ma position */
.k-me { padding: 16px; border-radius: 20px; background: linear-gradient(135deg, var(--k-night-3), var(--k-night-2)); border: 1px solid #3a4c8a; color: #eef2ff; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.k-me small { display: block; letter-spacing: .12em; font-size: .68rem; color: #9fb0e0; }
.k-me-top { display: flex; gap: 28px; }
.k-me-rank { font-size: 1.9rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.k-msg { margin: 0; font-weight: 800; font-size: 1.05rem; color: #ffe9a8; }
.k-msg.gold { color: var(--k-gold); }
.k-me p { margin: 0; }

/* podium */
.k-podium { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; align-items: end; }
.k-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 6px 14px; border-radius: 20px; color: #fff; text-decoration: none; background: linear-gradient(180deg, var(--k-night-3), var(--k-night)); border: 2px solid var(--k-line); min-width: 0; transition: transform .2s; }
.k-pod:hover { transform: translateY(-3px); }
.k-pod b { overflow-wrap: anywhere; font-size: .95rem; }
.k-pod .k-medal { font-size: 1.6rem; }
.k-pod .k-pts { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .9rem; }
.k-pod.r1 { padding-block: 24px; border-color: var(--k-gold); background: linear-gradient(180deg, #3a2a05, var(--k-night)); box-shadow: 0 10px 34px rgba(255,170,30,.3); }
.k-pod.r1 b, .k-pod.r1 .k-pts { color: var(--k-gold); }
.k-pod.r2 { border-color: var(--k-silver); } .k-pod.r2 .k-pts, .k-pod.r2 .k-medal { color: var(--k-silver); }
.k-pod.r3 { border-color: var(--k-bronze); } .k-pod.r3 .k-pts { color: var(--k-bronze); }
.k-pod .avatar { border-radius: 50%; }
.k-pod.r1 .avatar-lg { width: 76px; height: 76px; font-size: 2.3rem; box-shadow: 0 0 0 3px var(--k-gold), 0 0 24px rgba(255,190,50,.6); }
.k-pod.r2 .avatar { box-shadow: 0 0 0 3px var(--k-silver); } .k-pod.r3 .avatar { box-shadow: 0 0 0 3px var(--k-bronze); }
.k-pod.ghost { visibility: hidden; }

/* classement */
.k-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.k-row-in { display: grid; grid-template-columns: 44px 32px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; color: #eef2ff; text-decoration: none; background: rgba(255,255,255,.04); border: 1px solid transparent; }
.k-row-in:hover { background: rgba(255,255,255,.09); }
.k-rk { font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; color: #9fb0e0; }
.k-un { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.k-un em { font-style: normal; color: #9fb0e0; font-weight: 600; }
.k-rp { font-weight: 800; font-variant-numeric: tabular-nums; }
.k-row.r1 .k-row-in { background: linear-gradient(90deg, rgba(255,211,90,.2), rgba(255,211,90,.04)); border-color: var(--k-gold); } .k-row.r1 .k-rp, .k-row.r1 .k-un { color: var(--k-gold); }
.k-row.r2 .k-row-in { border-color: var(--k-silver); background: rgba(213,219,232,.1); } .k-row.r2 .k-rp { color: var(--k-silver); }
.k-row.r3 .k-row-in { border-color: var(--k-bronze); background: rgba(205,139,79,.12); } .k-row.r3 .k-rp { color: var(--k-bronze); }
.k-row.me .k-row-in { outline: 2px solid #5ab8ff; outline-offset: -2px; }
.k-row.up .k-row-in { animation: kUp 1.6s ease-out; } .k-row.down .k-row-in { animation: kDown 1.2s ease-out; } .k-row.new .k-row-in { animation: kUp 1.6s ease-out; }
.k-mv { font-size: .8rem; } .k-mv.up { color: #4fe3a1; } .k-mv.down { color: #ff7a7a; }

/* récompenses, hall of fame */
.k-rw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.k-rw-c { padding: 12px; border-radius: 16px; border: 1px solid var(--k-line); background: rgba(255,255,255,.03); font-size: .88rem; }
.k-rw-c ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.k-rw-c.gold { border-color: var(--k-gold); } .k-rw-c.gold b { color: var(--k-gold); }
.k-rw-c.silver { border-color: var(--k-silver); } .k-rw-c.bronze { border-color: var(--k-bronze); }
.k-how { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.k-how b { color: var(--k-gold); }
.k-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.k-hall-c { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 18px; text-align: center; color: #fff7dc; text-decoration: none; background: linear-gradient(180deg, #2a2107, var(--k-night)); border: 1px solid #8a6a1c; }
.k-hall-c .avatar { border-radius: 50%; box-shadow: 0 0 0 3px var(--k-gold); }
.k-hall-c b { color: var(--k-gold); overflow-wrap: anywhere; }
.k-hall-n { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.k-hall-c small { color: #cdbb85; } .k-days { font-weight: 800; }
.k-pts { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .k-podium { gap: 6px; } .k-pod { padding-inline: 4px; } .k-pod b { font-size: .8rem; }
  .k-rw { grid-template-columns: 1fr; }
  .k-row-in { grid-template-columns: 36px 32px 1fr auto auto; gap: 8px; padding: 8px; }
}

/* bandeau de l'accueil */
.king-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 14px; border-radius: 18px; color: #fff7dc; text-decoration: none;
  background: linear-gradient(100deg, #3a2a05, var(--k-night-2) 60%, var(--k-night)); border: 2px solid var(--k-gold); box-shadow: 0 8px 28px rgba(255,170,30,.2); }
.kb-crown { font-size: 1.9rem; animation: kFloat 3s ease-in-out infinite; }
.king-banner .avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--k-gold); }
.kb-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.kb-text small { letter-spacing: .25em; color: var(--k-gold); font-size: .65rem; font-weight: 900; }
.kb-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-left { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: .85rem; color: var(--k-gold); white-space: nowrap; }
.kb-left small { color: #cdbb85; font-weight: 600; }

/* profil */
.k-prof { padding: 16px; border-radius: 20px; background: linear-gradient(180deg, var(--k-night-2), var(--k-night)); border: 1px solid var(--k-line); color: #eef2ff; display: flex; flex-direction: column; gap: 12px; }
.k-prof.is-king { border-color: var(--k-gold); box-shadow: 0 0 30px rgba(255,190,50,.25); }
.k-prof h2 { margin: 0; }
.k-prof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.k-prof-stats div { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; }
.k-prof-stats b { font-size: 1.4rem; color: var(--k-gold); } .k-prof-stats span { font-size: .75rem; color: #9fb0e0; }
.k-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.k-badge { padding: 6px 12px; border-radius: 999px; background: rgba(255,211,90,.12); border: 1px solid #8a6a1c; font-weight: 700; font-size: .85rem; }
.k-title-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--k-gold), var(--k-gold-2)); color: #2b1c00; font-weight: 900; font-size: .8rem; }
.avatar.is-king { border-radius: 50%; box-shadow: 0 0 0 4px #ffd35a, 0 0 28px rgba(255,190,50,.7); }

/* annonce d'un nouveau Roi */
.king-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(2,4,12,.82); animation: kFade .3s ease-out; }
.ko-rays { position: absolute; width: 160vmax; height: 160vmax; left: 50%; top: 50%; margin: -80vmax 0 0 -80vmax; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,211,90,.2) 10%, transparent 14% 24%, rgba(255,211,90,.15) 26%, transparent 30% 40%, rgba(255,211,90,.2) 42%, transparent 46% 56%, rgba(255,211,90,.15) 58%, transparent 62% 72%, rgba(255,211,90,.2) 74%, transparent 78%); animation: kSpin 30s linear infinite; pointer-events: none; }
.ko-card { position: relative; text-align: center; padding: 26px 22px; border-radius: 28px; max-width: 420px; width: 100%; background: radial-gradient(120% 90% at 50% 0%, #3a2a05, var(--k-night-2) 60%, var(--k-night)); border: 3px solid var(--k-gold); box-shadow: 0 0 80px rgba(255,170,30,.5); color: #fff7dc; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: kPop .6s cubic-bezier(.2,1.4,.4,1); }
.ko-crown { font-size: 4.4rem; animation: kFloat 2s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(255,170,30,.8)); }
.ko-title { font-weight: 900; font-size: clamp(1.4rem, 6vw, 2rem); background: linear-gradient(180deg, #fff3b8, var(--k-gold), var(--k-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ko-who { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; }
.ko-who .avatar { border-radius: 50%; box-shadow: 0 0 0 4px var(--k-gold); }
.ko-pts { color: var(--k-gold); font-weight: 800; }

@keyframes kSpin { to { transform: rotate(360deg); } }
@keyframes kFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes kUp { 0% { background: rgba(79,227,161,.55); transform: translateX(-6px); } 100% { transform: none; } }
@keyframes kDown { 0% { background: rgba(255,122,122,.35); } 100% { } }
@keyframes kFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .k-rays, .ko-rays, .k-crown, .kb-crown, .ko-crown, .king-overlay, .ko-card, .k-row-in { animation: none !important; } }