/* =====================================================================
   layout.css — écran de choix de profil, en-tête, bandeaux, classement
   ===================================================================== */

.wrap{max-width:640px;margin:0 auto;position:relative;z-index:2;}

/* ---------- GATE : choix du profil ---------- */
#gateScreen{max-width:640px;margin:6vh auto 0;text-align:center;position:relative;z-index:2;}
#gateScreen h1{
  font-family:'Bungee';font-size:clamp(1.6rem,7vw,2.6rem);
  background:linear-gradient(90deg,var(--neon),var(--neon2),var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,94,58,.35));
  margin-bottom:8px;
}
#gateScreen p{color:var(--muted);font-weight:800;margin-bottom:30px;}
.gate-cards{display:flex;flex-direction:column;gap:14px;}
.gate-card{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border:2px solid var(--border);border-radius:20px;
  padding:18px 20px;cursor:pointer;text-align:left;
  transition:transform .2s, border-color .2s, background .2s;
  animation:popIn .4s cubic-bezier(.2,1.6,.4,1) both;
}
.gate-card:hover{transform:translateX(6px) scale(1.02);background:var(--card-hover);}
.gate-avatar{
  font-size:2.2rem;width:56px;height:56px;min-width:56px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;background:var(--night2);
}
.gate-info{flex:1;}
.gate-name{font-weight:800;font-size:1.15rem;}
.gate-pts{color:var(--muted);font-weight:700;font-size:.85rem;}

/* ---------- EN-TÊTE ---------- */
header{
  text-align:center;margin-bottom:16px;position:relative;
  animation:dropIn .6s cubic-bezier(.2,1.4,.4,1) both;
}
h1{
  font-family:'Bungee',cursive;font-size:clamp(1.4rem,6vw,2.2rem);
  background:linear-gradient(90deg,var(--neon),var(--neon2),var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,94,58,.35));
}
.subtitle{color:var(--muted);font-weight:700;margin-top:4px;font-size:.85rem;text-transform:capitalize;}

.me-chip{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  background:var(--night2);border:2px solid var(--border-soft);border-radius:99px;
  padding:6px 16px 6px 6px;
}
.me-chip .av{
  width:32px;height:32px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.me-chip .name{font-weight:800;font-size:.9rem;}
.me-chip .pts{color:var(--neon);font-weight:800;font-size:.85rem;}

.header-btns{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.hbtn{
  background:var(--night2);border:2px solid var(--border-soft);border-radius:12px;color:var(--text);
  font-weight:800;font-size:.78rem;padding:8px 14px;cursor:pointer;
  transition:transform .15s, border-color .2s;
}
.hbtn:hover{transform:scale(1.06);border-color:var(--neon);}

/* ---------- BARRE DE SYNCHRO ---------- */
.sync-bar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.75rem;font-weight:800;color:var(--muted);margin-bottom:18px;
}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);transition:background .3s;}
.sync-dot.on{background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 2s ease infinite;}
.sync-dot.off{background:var(--danger);box-shadow:0 0 8px var(--danger);}
.sync-dot.saving{background:var(--neon);box-shadow:0 0 8px var(--neon);}

/* ---------- BANDEAU RÉSUMÉ ---------- */
.summary-strip{display:flex;gap:12px;margin-bottom:18px;}
.summary-card{
  flex:1;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;text-align:center;font-weight:800;font-size:.85rem;
  animation:dropIn .5s .05s cubic-bezier(.2,1.4,.4,1) both;
}
.summary-card b{display:block;font-family:'Bungee';font-size:1.1rem;color:var(--neon);margin-top:2px;}

/* ---------- BANDEAU ROUE DISPONIBLE ---------- */
.spin-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,rgba(255,143,171,.18),rgba(192,132,252,.18));
  border:2px solid var(--pink);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;
  animation:bannerPulse 2s ease infinite;
}
@keyframes bannerPulse{0%,100%{box-shadow:0 0 0 rgba(255,143,171,0)}50%{box-shadow:0 0 20px rgba(255,143,171,.4)}}
.spin-banner span{font-weight:800;font-size:.9rem;}
.spin-banner button{
  background:linear-gradient(135deg,var(--pink),var(--purple));border:none;border-radius:12px;
  color:#1a1030;font-family:'Bungee';font-size:.8rem;padding:10px 16px;cursor:pointer;
  transition:transform .15s;white-space:nowrap;
}
.spin-banner button:hover{transform:scale(1.08);}

/* ---------- CLASSEMENT & VITRINE DES RÉCOMPENSES ---------- */
.scoreboard{
  background:var(--card);border:2px solid var(--border);border-radius:18px;
  padding:16px;margin-bottom:22px;
  animation:dropIn .5s .1s cubic-bezier(.2,1.4,.4,1) both;
}
.scoreboard h2{
  font-family:'Bungee';font-size:.9rem;color:var(--neon);margin-bottom:12px;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
}
.scoreboard h2::after{
  content:'';flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,179,71,.4),transparent);
}
.reward-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(192,132,252,.15);color:var(--purple);
  border:1.5px solid rgba(192,132,252,.4);
  padding:6px 12px;border-radius:99px;font-weight:800;font-size:.8rem;
  margin:0 6px 6px 0;
}
.score-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
.score-rank{width:22px;font-family:'Bungee';font-size:.85rem;color:var(--muted);text-align:center;}
.score-av{
  width:34px;height:34px;border-radius:50%;background:var(--night2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.score-name{flex:1;font-weight:800;font-size:.9rem;}
.score-bar-wrap{flex:1;height:10px;background:var(--night2);border-radius:99px;overflow:hidden;margin:0 4px;}
.score-bar{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.score-pts{font-weight:800;font-size:.85rem;min-width:56px;text-align:right;}
.score-row.me{background:rgba(255,179,71,.08);border-radius:12px;margin:0 -8px;padding:8px;}

.tiny-label{font-size:.65rem;color:var(--muted);font-weight:800;}