/* Classement entre amis et duels (js/jeu.js) */
:root { --jeu: #4a47ff; --jeu-2: #7b5cff; --gold: #f2b01e; --silver: #a9afbb; --bronze: #cd8550; }
:root[data-theme="dark"] { --jeu: #7c7aff; --jeu-2: #a08bff; }

.jeu { max-width: 980px; }
.jeu-av { --h: 240; display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 55% 32%); font-weight: 650; font-size: 15px; box-shadow: inset 0 0 0 1px hsl(var(--h) 50% 50% / .18); }
:root[data-theme="dark"] .jeu-av { background: hsl(var(--h) 40% 24%); color: hsl(var(--h) 80% 86%); }
.jeu-av.sm { width: 26px; height: 26px; font-size: 11.5px; }
.jeu-av.lg { width: 56px; height: 56px; font-size: 22px; }

/* Invitation (déconnecté) */
.jeu-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; padding: 36px; overflow: hidden; position: relative;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--jeu) 16%, transparent), transparent 60%), var(--surface); }
.jeu-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--jeu); background: color-mix(in srgb, var(--jeu) 10%, transparent);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.jeu-hero .display span { color: var(--jeu); }
.jeu-hero .lead { margin-top: 16px; max-width: 46ch; }
.jeu-perks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.jeu-perks li { display: flex; gap: 12px; align-items: flex-start; }
.jeu-perks li > i { font-size: 22px; color: var(--jeu); margin-top: 1px; }
.jeu-perks b { display: block; font-size: 15px; }
.jeu-perks span { font-size: 13.5px; color: var(--muted); }
.jeu-hero-art { display: grid; place-items: center; align-content: center; gap: 10px; position: relative; }
.jeu-hero-bulle { width: 92px; height: 92px; }
.jeu-mini-podium { display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 300px; }
.jeu-login { padding: 26px 28px; margin-top: 16px; }
.jeu-form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.jeu-field { display: flex; gap: 10px; flex-wrap: wrap; }
.jeu-field .input { flex: 1 1 220px; min-width: 0; }
.jeu-form p { margin: 10px 0 0; font-size: 13px; }
.jeu-code { letter-spacing: .4em; font-size: 20px; text-align: center; max-width: 220px; }
.jeu-note { font-size: 13px; margin: 16px 2px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Tableau (connecté) */
.jeu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 18px; }
.jeu-head .lead { margin: 10px 0 0; }
.jeu-head-bulle { width: 64px; height: 64px; flex: none; }
.jeu-me { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.jeu-me .stat b i { color: #ff7a1a; font-size: .8em; }
.jeu-chase { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--jeu) 9%, transparent); margin: 0 0 14px; font-size: 14.5px; }
.jeu-chase > span:not(.jeu-av) { flex: 1; min-width: 0; }
.jeu-call { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; margin-bottom: 14px;
  border: 1.5px solid color-mix(in srgb, var(--jeu) 45%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--jeu) 12%, var(--surface)), var(--surface)); }
.jeu-call b { display: block; font-size: 17px; }
.jeu-call span { font-size: 13.5px; color: var(--muted); }
.jeu-call .jeu-av { width: 46px; height: 46px; font-size: 19px; }
.jeu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
.jeu-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 26px 18px 0; overflow: hidden; }
.jeu-step { flex: 1 1 0; display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; position: relative; }
.jeu-step b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeu-step small { font-size: 12.5px; color: var(--muted); font-feature-settings: "tnum"; }
.jeu-base { display: grid; place-items: center; width: 100%; margin-top: 8px; border-radius: 14px 14px 0 0; font-weight: 700; font-size: 22px; color: #fff;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, #000)); }
.jeu-step.r1 { --c: var(--gold); } .jeu-step.r1 .jeu-base { height: 112px; }
.jeu-step.r2 { --c: var(--silver); } .jeu-step.r2 .jeu-base { height: 80px; }
.jeu-step.r3 { --c: var(--bronze); } .jeu-step.r3 .jeu-base { height: 58px; }
.jeu-mini-podium .jeu-step.r1 .jeu-base { height: 84px; } .jeu-mini-podium .jeu-step.r2 .jeu-base { height: 60px; } .jeu-mini-podium .jeu-step.r3 .jeu-base { height: 44px; }
.jeu-step.me b { color: var(--jeu); }
.jeu-step.r1 .jeu-av { box-shadow: 0 0 0 3px var(--gold); }
.jeu-crown { position: absolute; top: -20px; color: var(--gold); font-size: 22px; }
.jeu-board { padding: 6px 16px; }
.jeu-row { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.jeu-row:first-child { border-top: 0; }
.jeu-row.me { background: color-mix(in srgb, var(--jeu) 7%, transparent); margin: 0 -16px; padding: 11px 16px; border-radius: 12px; }
.jeu-rk { font-family: var(--mono); color: var(--muted); font-size: 13px; text-align: center; }
.jeu-who { display: flex; flex-direction: column; min-width: 0; }
.jeu-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jeu-row.me .jeu-who b { color: var(--jeu); }
.jeu-who small { font-size: 12px; color: var(--muted); }
.jeu-who small i { color: #ff7a1a; }
.jeu-pts { font-weight: 650; font-size: 18px; font-feature-settings: "tnum"; text-align: right; }
.jeu-pts small { font-weight: 450; font-size: 12px; color: var(--muted); }
.jeu-tag { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); white-space: nowrap; }
.jeu-alone { margin-bottom: 14px; }

/* Duels */
.jeu-duels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.jeu-duel { padding: 16px 18px; display: grid; gap: 12px; }
.jeu-duel.wait { grid-template-columns: auto 1fr; align-items: center; }
.jeu-duel.wait b { display: block; } .jeu-duel.wait span { font-size: 13px; color: var(--muted); }
.jeu-duel-h { display: flex; align-items: center; gap: 10px; }
.jeu-duel-h b { flex: 1; min-width: 0; }
.jeu-left { font-size: 12.5px; font-weight: 600; color: var(--jeu); white-space: nowrap; }
.jeu-duel p { margin: 0; font-size: 13px; }
.jeu-duel.won { border: 1.5px solid color-mix(in srgb, var(--good) 45%, transparent); }
.jeu-duel.won .jeu-duel-h b { color: var(--good); }
.jeu-duel.lost .jeu-duel-h b { color: var(--muted); }
.jeu-bars { display: grid; gap: 7px; }
.jeu-bar { display: grid; grid-template-columns: 70px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.jeu-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.jeu-bar i { display: block; height: 10px; border-radius: 99px; background: var(--silver); min-width: 6px; transition: width .8s var(--ease-out); }
.jeu-bar.me i { background: linear-gradient(90deg, var(--jeu), var(--jeu-2)); }
.jeu-bar.me span { color: var(--ink); font-weight: 600; }
.jeu-bar b { text-align: right; font-feature-settings: "tnum"; }

/* Amis */
.jeu-friends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; margin-top: 22px; }
.jeu-code-card { padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.jeu-code-card .lbl { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.jeu-code-card b { font-size: 20px; letter-spacing: .05em; white-space: nowrap; }
.jeu-code-card p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; }
.jeu-add { padding: 20px 22px; }
.jeu-manage { margin-top: 12px; font-size: 13px; }
.jeu-manage summary { cursor: pointer; color: var(--muted); }
.jeu-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; margin: 8px 6px 0 0; border-radius: 999px; background: var(--bg-soft); }
.jeu-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 50%; }
.jeu-chip button:hover { color: var(--bad); }

/* Accueil */
.jeu-home { margin: 0 0 16px; }
.jeu-promo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--jeu) 14%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--jeu) 22%, transparent); }
.jeu-promo-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(140deg, var(--jeu), var(--jeu-2)); }
.jeu-promo b { display: block; font-size: 16.5px; }
.jeu-promo span:not(.btn):not(.jeu-promo-ic):not(.jeu-promo-av):not(.bi) { font-size: 13.5px; color: var(--muted); }
.jeu-promo-av { display: flex; }
.jeu-promo-av .jeu-av { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }

/* Bandeau de la démo */
.jeu-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 18px; border-radius: var(--r-md); font-size: 13.5px;
  background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.jeu-demo > i { color: var(--gold); font-size: 18px; }
.jeu-demo span { flex: 1 1 240px; }
.jeu-demo a { font-weight: 600; text-decoration: underline; }

@media (max-width: 820px) {
  .jeu-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .jeu-hero-art { order: -1; }
  .jeu-grid, .jeu-friends { grid-template-columns: 1fr; }
  .jeu-me { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jeu-call { grid-template-columns: auto 1fr; }
  .jeu-call .row { grid-column: 1 / -1; }
  .jeu-promo { grid-template-columns: auto minmax(0, 1fr); }
  .jeu-promo > .btn, .jeu-promo-av { display: none; }
  .jeu-row { grid-template-columns: 18px auto minmax(0, 1fr) auto; }
  .jeu-row > :last-child { grid-column: 3 / -1; justify-self: start; }
  .jeu-head-bulle { width: 52px; height: 52px; }
}
.jeu-row > span:empty { display: none; }
.nav a.nav-jeu > i { color: var(--gold); }