:root{
  --bg:#050814;
  --bg-2:#090d1c;
  --panel:rgba(13,17,34,.80);
  --panel-2:rgba(19,24,48,.88);
  --line:rgba(151,139,255,.22);
  --line-strong:rgba(151,139,255,.42);
  --text:#f7f7fb;
  --muted:#a7aec3;
  --purple:#7b3cff;
  --purple-2:#a855f7;
  --blue:#3b82f6;
  --gold:#f6c452;
  --danger:#ff5468;
  --success:#22c55e;
  --shadow:0 24px 60px rgba(0,0,0,.38);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 40% 8%, rgba(84,58,255,.18), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(126,34,206,.16), transparent 28%),
    linear-gradient(180deg,#030611 0%,#070a16 46%,#040713 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
  opacity:.35;
  z-index:-1;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}

.page{
  width:min(1560px,calc(100% - 34px));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(4,7,17,.70);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:1.35rem;
  white-space:nowrap;
}

.brand-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#140b00;
  font-size:21px;
  background:linear-gradient(135deg,#fff0a6,#d7961e 72%);
  box-shadow:0 0 28px rgba(246,196,82,.2);
}

.brand span:last-child{
  background:linear-gradient(90deg,#ffe7a3 0%,#fff 34%,#9d63ff 72%,#6f49ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  color:#dfe4f0;
  font-size:.95rem;
}

.nav-links a{opacity:.78;transition:.2s}
.nav-links a:hover{opacity:1;color:white}

.login-btn{
  padding:11px 22px;
  border-radius:12px;
  border:1px solid rgba(125,112,255,.52);
  background:linear-gradient(180deg,rgba(81,73,143,.28),rgba(18,23,48,.78));
  color:white;
  box-shadow:inset 0 0 20px rgba(124,58,237,.08);
}

.menu-btn{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:#fff;
  font-size:20px;
}

.hero{
  position:relative;
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) 360px;
  gap:24px;
  padding:42px 0 26px;
  align-items:start;
}

.hero:before{
  content:"";
  position:absolute;
  left:-11vw;right:-11vw;top:0;height:560px;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(1,3,12,.05),rgba(2,5,16,.12) 48%,rgba(2,6,17,.94) 100%),
    radial-gradient(circle at 62% 46%,rgba(245,158,11,.18),transparent 18%),
    radial-gradient(circle at 44% 44%,rgba(126,34,206,.28),transparent 28%),
    linear-gradient(115deg,#061022 0%,#0c1533 40%,#160f34 70%,#0c1125 100%);
  border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 -100px 100px rgba(2,4,12,.65);
}

.hero-main{
  min-width:0;
  padding-top:20px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  color:#a8afc6;
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.34em;
  margin-bottom:14px;
}
.eyebrow i{
  width:46px;height:1px;background:linear-gradient(90deg,var(--purple),transparent)
}

h1{
  margin:0;
  max-width:690px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,5.2vw,5.35rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-wrap:balance;
}

h1 .accent{
  color:#8f55ff;
  text-shadow:0 0 32px rgba(139,92,246,.22);
}

.hero-copy{
  margin:20px 0 0;
  max-width:580px;
  color:#c4cada;
  font-size:1.08rem;
  line-height:1.6;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.btn{
  border:0;
  color:white;
  border-radius:13px;
  padding:14px 22px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,#8d45ff,#572cff);
  box-shadow:0 12px 34px rgba(98,47,255,.34),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-secondary{
  border:1px solid rgba(153,137,255,.4);
  background:rgba(16,20,40,.7);
}

.stats-line{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:25px;
  color:#aeb5c8;
  font-size:.9rem;
}
.stats-line span:not(:last-child):after{
  content:"•";
  margin-left:12px;
  color:#616b87;
}

.cards-stage{
  position:absolute;
  left:500px;
  right:380px;
  top:42px;
  height:445px;
  pointer-events:none;
  overflow:visible;
}

.star-card{
  --rarity:#6d5dfc;
  position:absolute;
  width:178px;
  height:294px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--rarity) 68%,white 7%);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),
    #0e1220;
  box-shadow:
    0 18px 46px rgba(0,0,0,.46),
    0 0 28px color-mix(in srgb,var(--rarity) 35%,transparent),
    inset 0 0 20px color-mix(in srgb,var(--rarity) 18%,transparent);
  transform-origin:50% 100%;
  isolation:isolate;
}
.star-card:after{
  content:"";
  position:absolute;inset:0;
  border:2px solid color-mix(in srgb,var(--rarity) 55%,transparent);
  border-radius:21px;
  pointer-events:none;
  z-index:4;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--rarity) 20%,transparent);
}

.star-card img{
  width:100%;
  height:66%;
  object-fit:cover;
  display:block;
  filter:saturate(.9) contrast(1.05);
  background:
    radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rarity) 35%,#182038),#0d1120 65%);
}

.star-card .fallback{
  position:absolute;
  inset:0 0 34% 0;
  display:grid;
  place-items:center;
  z-index:-1;
  font-family:Georgia,serif;
  font-size:3rem;
  font-weight:800;
  color:rgba(255,255,255,.18);
  background:radial-gradient(circle at center,color-mix(in srgb,var(--rarity) 35%,#1d243e),#0a0f1e 70%);
}

.rarity{
  position:absolute;
  z-index:5;
  top:12px;
  left:12px;
  min-width:36px;
  height:36px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:.72rem;
  font-weight:900;
  color:white;
  background:color-mix(in srgb,var(--rarity) 70%,#121629);
  border:1px solid color-mix(in srgb,var(--rarity) 80%,white 20%);
  box-shadow:0 0 18px color-mix(in srgb,var(--rarity) 42%,transparent);
}

.card-info{
  position:absolute;
  z-index:3;
  inset:auto 0 0;
  height:42%;
  padding:25px 13px 12px;
  background:linear-gradient(180deg,transparent 0%,rgba(7,9,16,.9) 26%,rgba(6,7,12,.98) 100%);
  text-align:center;
}

.card-name{
  font-family:Georgia,serif;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.01em;
}

.card-role{
  margin-top:4px;
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9da7be;
}

.card-stats{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.78rem;
  font-weight:800;
}
.atk{color:#ff6b7a}
.def{color:#5da0ff}

.c1{left:1%;top:116px;transform:rotate(-7deg) scale(.86)}
.c2{left:17%;top:60px;transform:rotate(-3deg) scale(.94)}
.c3{left:34%;top:15px;transform:scale(1.16);z-index:5}
.c4{left:54%;top:58px;transform:rotate(3deg) scale(.96);z-index:4}
.c5{left:71%;top:104px;transform:rotate(5deg) scale(.89);z-index:3}

.signup-card{
  position:relative;
  z-index:12;
  border-radius:18px;
  border:1px solid rgba(162,139,255,.36);
  background:
    linear-gradient(145deg,rgba(22,25,49,.94),rgba(10,13,28,.94));
  box-shadow:var(--shadow),inset 0 0 44px rgba(92,46,255,.05);
  padding:24px;
  backdrop-filter:blur(18px);
}

.signup-card h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:1.55rem;
}

.signup-card p{
  color:#9ba5bb;
  margin:7px 0 18px;
  font-size:.86rem;
  line-height:1.5;
}

.input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background:#0d1223;
  border-radius:11px;
  margin-top:10px;
  padding:0 13px;
  transition:.2s;
}
.input:focus-within{
  border-color:#7755ff;
  box-shadow:0 0 0 3px rgba(119,85,255,.12);
}
.input span{opacity:.64}
.input input{
  width:100%;
  padding:13px 0;
  border:0;
  outline:0;
  color:#f7f8ff;
  background:transparent;
  font-size:.88rem;
}

.signup-card .btn{
  width:100%;
  margin-top:14px;
}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:#75809a;
  font-size:.77rem;
}
.divider:before,.divider:after{
  content:"";
  flex:1;height:1px;background:rgba(255,255,255,.08)
}

.socials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.social{
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#0d1223;
  color:white;
  font-weight:800;
}

.dashboard{
  display:grid;
  grid-template-columns:1.05fr .95fr 1.02fr .66fr;
  gap:16px;
  padding-bottom:36px;
}

.panel{
  position:relative;
  min-width:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(145,134,255,.20);
  background:
    linear-gradient(180deg,rgba(24,29,54,.85),rgba(12,16,32,.89));
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:24px;
  min-height:276px;
}

.panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.028),transparent 35%);
}

.panel-number{
  color:#b18aff;
  font-weight:800;
  letter-spacing:.1em;
  font-size:.85rem;
}

.panel h3{
  margin:7px 0 8px;
  font-family:Georgia,serif;
  font-size:1.55rem;
}
.panel p{
  color:#abb2c5;
  margin:0;
  line-height:1.52;
  font-size:.89rem;
}

.rarities{
  display:flex;
  gap:7px;
  margin-top:22px;
  flex-wrap:wrap;
}
.rarity-chip{
  width:30px;height:30px;
  clip-path:polygon(50% 0,91% 25%,91% 75%,50% 100%,9% 75%,9% 25%);
  display:grid;place-items:center;
  font-size:.64rem;
  font-weight:900;
  background:#4b5563;
}

.collection-card{
  position:absolute;
  width:142px;
  height:208px;
  right:22px;
  bottom:18px;
  border-radius:17px;
  transform:rotate(3deg);
  border:1px solid #3a7afc;
  background:
    linear-gradient(180deg,rgba(53,119,255,.06),rgba(53,119,255,.1)),
    #091020;
  box-shadow:0 0 28px rgba(59,130,246,.24);
  overflow:hidden;
}
.collection-card .portrait{
  height:68%;
  background:
    radial-gradient(circle at 50% 25%,rgba(92,153,255,.55),transparent 36%),
    linear-gradient(160deg,#243863,#10182b 65%);
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:2.2rem;
  color:#dfeaff;
  font-weight:900;
}
.collection-card footer{
  text-align:center;
  padding:9px 8px;
  font-size:.75rem;
  font-weight:800;
}

.team-row{
  display:flex;
  gap:7px;
  margin-top:24px;
}
.mini-card{
  width:55px;
  height:78px;
  border-radius:10px;
  border:1px solid #7062ff;
  background:
    radial-gradient(circle at 50% 30%,rgba(114,86,255,.45),transparent 35%),
    linear-gradient(160deg,#263055,#101525 70%);
  box-shadow:0 0 15px rgba(86,65,255,.16);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:7px 4px;
  font-size:.63rem;
  font-weight:800;
  text-align:center;
}

.power-box{
  margin-top:18px;
  border:1px solid rgba(148,112,255,.35);
  background:rgba(86,53,170,.16);
  border-radius:13px;
  padding:11px 13px;
}
.power-head{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  color:#b9c0d5;
}
.power-bar{
  height:7px;
  border-radius:50px;
  overflow:hidden;
  background:#242945;
  margin-top:8px;
}
.power-bar span{
  display:block;
  height:100%;
  width:72%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8247ff,#c467ff);
  box-shadow:0 0 15px rgba(132,71,255,.5);
}

.arena{
  background:
    linear-gradient(180deg,rgba(9,12,27,.45),rgba(9,12,27,.94)),
    radial-gradient(circle at 50% 70%,rgba(111,53,255,.28),transparent 34%),
    linear-gradient(130deg,#241330,#141831 44%,#2c163e);
}
.versus{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
.versus-team{
  display:flex;
  gap:6px;
}
.versus .vs{
  font-weight:1000;
  font-style:italic;
  font-size:1.6rem;
  color:#a268ff;
  text-shadow:0 0 20px rgba(162,104,255,.55);
}

.arena .btn{
  width:100%;
  margin-top:18px;
  padding:12px;
}

.ranking h3{
  font-family:inherit;
  font-size:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 10px;
}
.rank-list{
  margin-top:14px;
}
.rank-row{
  display:grid;
  grid-template-columns:24px 1fr auto;
  align-items:center;
  gap:8px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.78rem;
}
.rank-row:last-child{border-bottom:0}
.rank-no{
  width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;
  font-weight:900;
  font-size:.66rem;
  color:#d8dced;
  background:#20263b;
}
.rank-row:first-child .rank-no{
  color:#2a1a00;
  background:linear-gradient(135deg,#ffe08a,#c58b18);
}
.rank-user{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#5c65a5,#262d4b);
  border:1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
}
.score{color:#c3c8d8;font-weight:700}

.footer-quote{
  padding:4px 0 50px;
  text-align:center;
  color:#6f7894;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.05rem;
}

.mobile-signup{display:none}

@media(max-width:1260px){
  .hero{
    grid-template-columns:minmax(0,1fr) 330px;
  }
  .cards-stage{
    left:45%;
    right:340px;
    opacity:.92;
    transform:scale(.88);
    transform-origin:left top;
  }
  .dashboard{
    grid-template-columns:1fr 1fr;
  }
  .ranking{grid-column:2}
}

@media(max-width:980px){
  .page{width:min(100% - 26px,900px)}
  .nav-links{display:none}
  .menu-btn{display:block}
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-bottom:18px;
  }
  .hero-main{
    padding:10px 0 430px;
  }
  .cards-stage{
    left:0;
    right:0;
    top:310px;
    height:390px;
    transform:scale(.90);
    transform-origin:center top;
  }
  .signup-card{
    display:none;
  }
  .mobile-signup{
    display:block;
    margin:0 0 20px;
  }
  .dashboard{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  .nav{height:66px}
  .brand{font-size:1.05rem}
  .brand-logo{width:36px;height:36px}
  .hero{padding-top:24px}
  .hero-main{padding-bottom:345px}
  .eyebrow{font-size:.62rem;letter-spacing:.23em}
  h1{font-size:clamp(2.7rem,12vw,4rem)}
  .hero-copy{font-size:.98rem}
  .cards-stage{
    top:335px;
    transform:scale(.68);
    width:730px;
    left:50%;
    margin-left:-365px;
  }
  .c1{left:1%}.c2{left:18%}.c3{left:36%}.c4{left:56%}.c5{left:75%}
  .dashboard{grid-template-columns:1fr}
  .ranking{grid-column:auto}
  .panel{min-height:250px}
  .collection-card{opacity:.65}
}

@media(max-width:430px){
  .page{width:calc(100% - 20px)}
  .hero-main{padding-bottom:315px}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .btn{width:100%}
  .stats-line{font-size:.78rem}
  .cards-stage{top:360px;transform:scale(.57)}
  .panel{padding:20px}
}

/* --- Adaptations Stars Master : données réelles, formulaire fonctionnel, pas de style en ligne --- */

/* Raretés du jeu */
.rar-common{--rarity:#8b93a7}
.rar-uncommon{--rarity:#3d78ff}
.rar-rare{--rarity:#9d4cff}
.rar-epic{--rarity:#c026d3}
.rar-legendary{--rarity:#e8a92f}
.rar-iconic{--rarity:#e0343c}

.rarity-chip{background:var(--rarity,#4b5563)}
.mini-card{border-color:var(--rarity,#7062ff)}

/* Image absente ou en erreur : les initiales restent visibles */
.star-card img.broken{visibility:hidden}

/* Navigation */
.nav-links a.login-btn{opacity:1;display:inline-block}

/* Carte d'inscription */
.signup-card form{margin:0}
.signup-card .hint{display:block;margin-top:8px;color:#75809a;font-size:.74rem}
.signup-card a.btn{width:100%;margin-top:0}

/* Joueur connecté : pas de carte d'inscription, l'éventail prend la place */
.hero-member{grid-template-columns:1fr}
.hero-member .cards-stage{right:0}

/* Panneaux */
.collection-role{color:#75a7ff;font-size:.62rem;text-transform:uppercase}
.collection-card footer{text-transform:uppercase}
.btn-soon{opacity:.55;cursor:default}
.btn-soon:hover{transform:none}
.soon-note{margin-top:18px !important;color:#b18aff !important;font-weight:700}
.legal-note{margin:0 0 18px;text-align:center;color:#6f7894;font-size:.8rem}

@media(max-width:980px){
  /* Une seule carte d'inscription, affichée sous l'éventail */
  .signup-card{display:block}
  .nav-links.open{
    display:flex;
    position:absolute;
    top:66px;left:10px;right:10px;
    padding:18px;
    border-radius:16px;
    background:rgba(8,11,25,.98);
    border:1px solid rgba(145,134,255,.22);
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .hero-member .hero-main{padding-bottom:430px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* Le titre reste à gauche de l'éventail de cartes au lieu de passer dessous */
@media(min-width:981px){
  h1{max-width:470px;font-size:clamp(2.3rem,3.3vw,3.5rem);line-height:1}
  .hero-copy{max-width:450px}
  .hero-main{position:relative;z-index:6;max-width:480px}
}

/* Mobile : l'éventail est placé dans le flux, sous les boutons, quelle que soit la hauteur du texte */
@media(max-width:980px){
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-main,.hero-member .hero-main{padding-bottom:0;order:1}
  .cards-stage{
    position:relative;
    order:2;
    top:auto;left:50%;right:auto;
    width:730px;
    margin:26px 0 0 -365px;
    transform-origin:center top;
  }
  .signup-card{order:3;margin-top:10px}
}
@media(max-width:980px) and (min-width:701px){
  .cards-stage{transform:scale(.9);margin-bottom:-40px}
}
@media(max-width:700px){
  .cards-stage{top:auto;transform:scale(.68);margin-bottom:-115px}
}
@media(max-width:430px){
  .cards-stage{top:auto;transform:scale(.52);margin-bottom:-185px}
}

/* ---------- Cartes par palier de rareté (mêmes couleurs que app.css) ----------
   Le fond de la carte porte la rareté : bronze, argent, or, puis trois paliers spéciaux. */
.rar-common{--c1:#7a4f33;--c2:#d8a071;--c3:#58361f;--ink:#26150a;--ink-soft:rgba(38,21,10,.68);--rarity:#d39a6a}
.rar-uncommon{--c1:#8f98a6;--c2:#f1f4f8;--c3:#6a7380;--ink:#1b222b;--ink-soft:rgba(27,34,43,.66);--rarity:#d5dbe4}
.rar-rare{--c1:#c9992f;--c2:#fdea96;--c3:#946915;--ink:#2c1f04;--ink-soft:rgba(44,31,4,.68);--rarity:#f6d35b}
.rar-epic{--c1:#4d1d9c;--c2:#b074ff;--c3:#250c52;--ink:#fff;--ink-soft:rgba(255,255,255,.74);--rarity:#a565ff}
.rar-legendary{--c1:#0d2f86;--c2:#4a97ff;--c3:#06123b;--ink:#ffe7a0;--ink-soft:rgba(255,231,160,.78);--rarity:#3f8cff}
.rar-iconic{--c1:#efe6c8;--c2:#fff;--c3:#c8a43f;--ink:#3a2a06;--ink-soft:rgba(58,42,6,.68);--rarity:#ffe9a3}

.star-card{
  color:var(--ink);
  border-radius:18px 18px 46% 46% / 18px 18px 8% 8%;
  border:1px solid color-mix(in srgb,var(--c2) 72%,white);
  background:
    linear-gradient(118deg,transparent 0 40%,rgba(255,255,255,.26) 48%,transparent 56%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 2px,transparent 2px 10px),
    linear-gradient(160deg,var(--c2),var(--c1) 46%,var(--c3));
  box-shadow:
    0 18px 46px rgba(0,0,0,.46),
    0 0 30px color-mix(in srgb,var(--rarity) 50%,transparent);
}
.star-card:after{border:3px solid rgba(255,255,255,.13);border-radius:inherit;box-shadow:none}
.star-card.rar-legendary,.star-card.rar-iconic{border-color:#f6d35b}
.star-card img{
  height:60%;
  object-position:center 18%;
  background:none;
  filter:saturate(1.05) contrast(1.04);
  mask-image:linear-gradient(to bottom,black 60%,transparent 98%);
  -webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 98%);
}
.star-card .fallback{background:none;color:var(--ink-soft);inset:0 0 40% 0}
.card-info{height:44%;padding:22px 14px 30px;background:none}
.card-name{
  padding-bottom:6px;
  border-bottom:1px solid var(--ink-soft);
  font-family:"DIN Condensed","Oswald","Arial Narrow",Impact,sans-serif;
  font-size:1.02rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.1;
}
.card-role{color:var(--ink-soft);font-weight:700}
.card-stats{margin-top:8px;padding-top:0;border-top:0;justify-content:center;gap:18px}
.atk,.def{color:var(--ink)}

/* Note et sigle de rareté, en haut à gauche */
.rarity{
  top:10px;left:10px;
  min-width:42px;height:auto;
  padding:6px 7px 5px;
  display:grid;justify-items:center;
  line-height:1;
  border-radius:11px 11px 14px 14px;
  border:1px solid color-mix(in srgb,var(--c2) 60%,white);
  background:linear-gradient(160deg,var(--c2),var(--c1));
  color:var(--ink);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.rarity strong{font-family:"DIN Condensed","Oswald","Arial Narrow",Impact,sans-serif;font-size:1.6rem;font-weight:900}
.rarity span{width:100%;margin-top:3px;padding-top:3px;border-top:1px solid var(--ink-soft);font-size:.6rem;letter-spacing:.12em;text-align:center}

.rarity-chip{background:linear-gradient(160deg,var(--c2,#9aa3b5),var(--c1,#4b5563));color:var(--ink,#fff)}
.mini-card{
  border-color:color-mix(in srgb,var(--c2,#7062ff) 72%,white);
  background:linear-gradient(160deg,var(--c2,#263055),var(--c1,#101525) 55%,var(--c3,#101525));
  color:var(--ink,#fff);
  box-shadow:0 0 15px color-mix(in srgb,var(--rarity,#5641ff) 35%,transparent);
}

/* ---------- Animations (désactivées si le système demande moins de mouvement) ---------- */
@media(prefers-reduced-motion:no-preference){
  @keyframes rise-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
  @keyframes deal-in{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
  @keyframes cta-pulse{
    0%,100%{box-shadow:0 12px 34px rgba(98,47,255,.34),0 0 0 0 rgba(141,69,255,.45)}
    50%{box-shadow:0 12px 34px rgba(98,47,255,.34),0 0 0 12px rgba(141,69,255,0)}
  }
  @keyframes shimmer{to{background-position:200% 0}}
  @keyframes fill-bar{from{width:0}}

  /* Le texte du héros monte ligne après ligne */
  .hero-main > *{animation:rise-in .6s ease-out both}
  .hero-main > *:nth-child(2){animation-delay:.08s}
  .hero-main > *:nth-child(3){animation-delay:.16s}
  .hero-main > *:nth-child(4){animation-delay:.24s}
  .hero-main > *:nth-child(5){animation-delay:.32s}
  .signup-card{animation:rise-in .6s ease-out .2s both}

  /* Les cartes sont distribuées une à une, puis flottent doucement.
     Les propriétés translate / opacity laissent intacte la rotation de chaque carte. */
  .star-card{animation:deal-in .7s cubic-bezier(.2,.8,.2,1) both,float 6s ease-in-out infinite}
  .c3{animation-delay:.15s,1.2s}
  .c2{animation-delay:.3s,1.9s}
  .c4{animation-delay:.45s,2.6s}
  .c1{animation-delay:.6s,3.3s}
  .c5{animation-delay:.75s,4s}

  /* Le bouton principal respire, le logo scintille */
  .hero-actions .btn-primary{animation:cta-pulse 2.4s ease-out 1.2s infinite}
  .brand span:last-child{background-size:200% 100%;animation:shimmer 6s linear infinite;
    background-image:linear-gradient(90deg,#ffe7a3 0%,#fff 17%,#9d63ff 36%,#6f49ff 50%,#9d63ff 64%,#fff 83%,#ffe7a3 100%)}
  .btn:hover{filter:brightness(1.1)}

  /* Panneaux : apparition au défilement (classe posée par home.js) */
  .js-reveal .panel{opacity:0;translate:0 26px;transition:opacity .6s ease-out,translate .6s ease-out}
  .js-reveal .panel.in{opacity:1;translate:0 0}
  .js-reveal .panel:nth-child(2){transition-delay:.08s}
  .js-reveal .panel:nth-child(3){transition-delay:.16s}
  .js-reveal .panel:nth-child(4){transition-delay:.24s}
  .panel{transition:border-color .25s,box-shadow .25s}
  .panel:hover{border-color:rgba(162,139,255,.5);box-shadow:0 20px 50px rgba(0,0,0,.25),0 0 30px rgba(123,60,255,.16)}
  .js-reveal .panel.in .power-bar span{animation:fill-bar 1.1s ease-out .3s both}
  .mini-card{transition:translate .2s}
  .mini-card:hover{translate:0 -5px}
}

/* ---------- Illustration de l'accueil (remplace l'éventail de cartes) ---------- */
.hero-art{
  position:absolute;
  /* Exactement la largeur de la fenêtre : aucune carte de l'illustration ne sort de l'écran. */
  left:50%;top:0;
  width:100vw;
  margin-left:-50vw;
  height:560px;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.hero-art img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
}
/* Le texte reste lisible à gauche, et le bas de l'image se fond dans la page. */
.hero-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,6,17,.88) 0%,rgba(3,6,17,.62) 26%,rgba(3,6,17,.12) 52%,transparent 68%),
    linear-gradient(180deg,rgba(3,6,17,.30) 0%,transparent 22%,transparent 62%,rgba(5,8,20,.80) 86%,#050814 100%);
}

@media(max-width:980px){
  /* Mobile : l'image passe dans le flux, sous les boutons, cadrée sur les cartes. */
  .hero-art{
    position:relative;
    order:2;
    left:auto;top:auto;
    width:auto;
    height:auto;
    aspect-ratio:16 / 10;
    margin:24px -13px 0;
    z-index:0;
  }
  .hero-art img{object-position:70% 40%}
  .hero-art:after{
    background:linear-gradient(180deg,#050814 0%,rgba(5,8,20,0) 16%,rgba(5,8,20,0) 70%,#050814 100%);
  }
}
@media(max-width:430px){
  .hero-art{margin:20px -10px 0;aspect-ratio:4 / 3}
}
@media(prefers-reduced-motion:no-preference){
  .hero-art img{animation:hero-art-in 1.1s ease-out both}
  @keyframes hero-art-in{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
}

/* Top joueurs (classement pré-calculé) */
.top-players{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.top-players li{display:flex;align-items:center;gap:10px;font-size:.9rem}
.top-rank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);font-size:.75rem;font-weight:900}
.top-players li:first-child .top-rank{background:linear-gradient(135deg,#ffe08a,#c58b18);color:#2a1a00}
.top-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-players strong{color:#f6c452;font-variant-numeric:tabular-nums;white-space:nowrap}
a.soon-note{display:inline-block;text-decoration:none}