/* QUIZ'EM ALL v2.4.0 — HALL OF FAME « 👑 N°1 » + plaques « ⚔️ Défie tes potes » · Design System 5 (Gold / Magma / Steel)
   Couche 100 % additive, chargée après v2-design.css. Préfixe exclusif .qe-hof*. Animations : transform / opacity seulement.
   prefers-reduced-motion respecté. */
.qe-hof {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 12px 18px;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  color: #fff4c9;
  font: 700 1.12rem/1.3 'Rajdhani', sans-serif;
  letter-spacing: .06em;
  background:
    linear-gradient(110deg, rgba(244, 201, 93, .28) 0%, rgba(255, 138, 61, .22) 45%, rgba(255, 77, 26, .3) 100%),
    linear-gradient(160deg, #2a2e36 0%, #1b1e24 55%, #23272e 100%);
  border: 1px solid var(--v2-gold, #f4c95d);
  box-shadow: 0 0 26px rgba(244, 201, 93, .35), 0 8px 24px rgba(255, 77, 26, .22), inset 0 1px 0 rgba(255, 241, 189, .5);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  animation: qeHofIn .5s ease both;
}
.qe-hof[hidden] { display: none; }
/* Reflet doré qui balaie le bandeau */
.qe-hof::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 241, 189, .35) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: qeHofShine 5.5s ease-in-out 1.2s infinite;
}
.qe-hof-crown {
  flex: 0 0 auto;
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(244, 201, 93, .8)) drop-shadow(0 0 18px rgba(255, 77, 26, .45));
  animation: qeHofFloat 3.2s ease-in-out infinite;
}
.qe-hof-text { min-width: 0; overflow-wrap: anywhere; }
.qe-hof-name {
  color: var(--v2-gold-hi, #ffe9a8);
  text-shadow: 0 0 12px rgba(244, 201, 93, .55);
}
.qe-hof-score { color: #fff; }
.qe-hof[data-state="loading"] .qe-hof-name { opacity: .75; }

/* Plaque « Défie tes potes sur ce mode ! » (Time Attack · Hardcore · Défi Rapide) */
.qe-hof-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 .74rem/1.25 'Rajdhani', sans-serif;
  letter-spacing: .08em;
  color: #1a0c02;
  background: linear-gradient(135deg, #fff1bd 0%, #f4c95d 45%, #ff8a3d 100%);
  border: 1px solid rgba(255, 233, 168, .7);
  box-shadow: 0 0 12px rgba(244, 201, 93, .3), inset 0 1px 0 rgba(255, 255, 255, .55);
  max-width: 100%;
  overflow-wrap: anywhere;
}

@keyframes qeHofIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes qeHofShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes qeHofFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }

@media (max-width: 480px) {
  .qe-hof { padding: 10px 12px; font-size: 1rem; gap: 8px; }
  .qe-hof-crown { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qe-hof, .qe-hof::after, .qe-hof-crown { animation: none !important; }
}