/* Les Défis REXEL — éléments communs à toutes les pages (préfixe dr-) */
:root {
  --dr-navy: #2a3e87;
  --dr-sky: #3a9ad6;
  --dr-gold: #ffd447;
  --dr-gold-glow: rgba(255, 212, 71, .75);
}

#dr-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* Bannière de victoire */
.dr-banner {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(42, 62, 135, .92), rgba(5, 8, 25, .95) 70%);
  cursor: pointer;
  font-family: 'Orbitron', system-ui, sans-serif;
  text-align: center;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
.dr-banner.open { display: flex; animation: dr-fade .3s ease-out; }
.dr-banner-box { width: min(900px, 100%); display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vmin, 30px); }
.dr-banner img { width: clamp(150px, 34vmin, 420px); height: auto; filter: drop-shadow(0 1vmin 3vmin rgba(0, 0, 0, .5)); animation: dr-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
.dr-banner .dr-b1 { font-size: clamp(28px, 8vmin, 130px); font-weight: 900; letter-spacing: .04em; color: var(--dr-gold); text-shadow: 0 0 3vmin var(--dr-gold-glow); animation: dr-pop .7s .1s cubic-bezier(.2, 1.6, .4, 1) both; }
.dr-banner .dr-b2 { font-size: clamp(18px, 4.6vmin, 72px); font-weight: 700; line-height: 1.25; }
.dr-banner .dr-b2 strong { color: var(--dr-sky); }
.dr-banner .dr-b3 { font-size: clamp(13px, 2.4vmin, 34px); color: #c9d3f2; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.dr-banner .dr-b4 { font-size: clamp(11px, 1.8vmin, 24px); color: #8e9cc8; margin-top: 1vmin; opacity: 0; transition: opacity .3s; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.dr-banner.closable .dr-b4 { opacity: 1; }
@keyframes dr-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes dr-fade { from { opacity: 0; } }

/* Badge « Un lot REXEL gagné » dans les historiques */
.dr-lot {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .55em;
  border-radius: 999px;
  background: var(--dr-navy);
  border: 1px solid var(--dr-sky);
  color: #fff;
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.dr-lot.refused { background: #5a2a00; border-color: #ff9a1f; }

/* Nom du gagnant */
.dr-namer {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 8, 23, .88);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #eef2ff;
  -webkit-user-select: text;
  user-select: text;
}
.dr-namer.open { display: flex; animation: dr-fade .25s ease-out; }
.dr-namer-box {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: #0e1a4a;
  border: 1px solid var(--dr-sky);
  border-radius: 20px;
  padding: clamp(16px, 3vmin, 32px);
  text-align: center;
  font-size: clamp(15px, 2.2vmin, 24px);
  box-shadow: 0 2vh 6vh rgba(0, 0, 0, .6);
}
.dr-namer-box img { height: clamp(40px, 7vmin, 80px); width: auto; }
.dr-namer-box h2 { margin: .5em 0 .2em; font-family: 'Orbitron', system-ui, sans-serif; font-size: 1.35em; color: var(--dr-gold); letter-spacing: .03em; }
.dr-n-detail { margin: 0 0 1em; color: #9aa8d6; font-size: .85em; }
.dr-namer label { display: block; text-align: left; font-weight: 700; margin-bottom: .4em; }
.dr-namer input {
  width: 100%;
  font: inherit;
  font-size: 1.15em;
  padding: .65em .8em;
  border-radius: 12px;
  border: 2px solid var(--dr-sky);
  background: #fff;
  color: #0a1440;
  outline: none;
}
.dr-namer input:focus { box-shadow: 0 0 0 4px rgba(58, 154, 214, .4); }
.dr-n-info { min-height: 1.4em; margin: .6em 0 0; text-align: left; font-size: .85em; color: #9aa8d6; }
.dr-n-info.warn, .dr-n-result.warn { color: #ffb347; }
.dr-n-result { font-size: 1.05em; line-height: 1.45; margin: .6em 0 0; }
.dr-n-result.ok { color: #7dffa8; }
.dr-n-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.1em; }
.dr-n-btn { font: inherit; font-weight: 700; padding: .7em 1.4em; border-radius: 999px; border: 1px solid #24357a; background: transparent; color: #eef2ff; cursor: pointer; }
.dr-n-btn.primary { background: var(--dr-sky); border-color: var(--dr-sky); color: #031027; }
.dr-n-done { display: none; }
.dr-namer.done .dr-n-done { display: block; }
.dr-namer.done .dr-n-ask { display: none; }

/* Afficheur 7 segments */
.dr-segs { display: flex; align-items: stretch; justify-content: center; gap: .06em; }
.dr-segs svg { display: block; height: 100%; width: auto; overflow: visible; }
.dr-segs .seg { fill: var(--digit-off, #2a0907); }
.dr-segs .seg.on, .dr-segs .dotp { fill: var(--seg, #ff2b1c); }