/* QUIZ'EM ALL v1.1.0 — DÉFI DU JOUR (additif)
   Réutilise les variables :root de styles.css (matte metal, bronze/cuivre). Aucune classe ni aucun ID existant n'est modifié :
   uniquement de NOUVELLES classes préfixées .daily-* et la modale #dailyQuizModal (basée sur .modal-overlay / .modal-content). */

/* ---------- Carte d'accueil ---------- */
.daily-card {
  position: relative;
  margin: 0 0 20px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--metal-gradient, linear-gradient(160deg, #1c1c20, #121215));
  border: 1px solid var(--bronze-lo, #7a6440);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 6px 16px rgba(0, 0, 0, .55)), var(--inset-hi, inset 0 1px 0 rgba(255, 255, 255, .05));
  overflow: hidden;
  animation: dailyCardIn .45s cubic-bezier(.22, 1, .36, 1) both;
}
.daily-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--bronze-gradient, linear-gradient(180deg, #b99c6a, #8a7048));
}
.daily-card.is-done { border-color: var(--steel, #2a2a2f); }
.daily-card.is-done::before { background: var(--success, #6f9a7e); }

.daily-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.daily-titles { min-width: 0; }
.daily-title {
  margin: 0;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: var(--tracking, .12em); text-transform: uppercase;
  color: var(--bronze-hi, #d4af37);
}
.daily-date { margin: 2px 0 0; font-size: .78rem; letter-spacing: .08em; color: var(--text-dim, #b0b0b8); }

.daily-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--steel-hi, #3b3b42);
  background: rgba(10, 10, 12, .65);
  color: var(--text-main, #e0d8c8);
  font-weight: 700; font-size: .88rem; letter-spacing: .04em;
  white-space: nowrap;
}
.daily-card.has-streak .daily-streak { border-color: var(--copper, #8f614f); box-shadow: 0 0 0 1px rgba(143, 97, 79, .35) inset; }
.daily-flame { display: inline-block; transform-origin: 50% 90%; }
.daily-card.has-streak .daily-flame, .daily-streak-big .daily-flame { animation: dailyFlame 1.6s ease-in-out infinite; }

.daily-btn { width: 100%; }
.daily-btn[disabled], .daily-btn[aria-disabled="true"] {
  opacity: .65; cursor: not-allowed; filter: grayscale(.55);
  box-shadow: var(--inset-press, inset 0 3px 10px rgba(0, 0, 0, .65));
  transform: none;
}
.daily-btn:not([disabled]):active { transform: scale(.97); box-shadow: var(--inset-press, inset 0 3px 10px rgba(0, 0, 0, .65)); }

.daily-status, .daily-countdown, .daily-notif-note {
  margin: 0; font-size: .84rem; line-height: 1.45; color: var(--text-dim, #b0b0b8); text-align: center;
}
.daily-status strong, .daily-countdown strong { color: var(--text-main, #e0d8c8); }
.daily-countdown strong { font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--bronze-hi, #d4af37); }

.daily-notif { display: flex; justify-content: center; }
.daily-notif-btn {
  min-height: 44px; padding: 10px 16px;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--text-main, #e0d8c8);
  background: transparent; border: 1px dashed var(--bronze-lo, #7a6440); border-radius: var(--radius, 12px);
  cursor: pointer; transition: background .2s, border-color .2s, transform .12s;
}
.daily-notif-btn:hover { background: rgba(160, 132, 86, .1); border-color: var(--bronze, #a08456); }
.daily-notif-btn:active { transform: scale(.97); }
.daily-link {
  display: inline; padding: 6px 2px; min-height: 0; font: inherit; font-weight: 700;
  color: var(--bronze-hi, #d4af37); background: none; border: 0; text-decoration: underline; cursor: pointer;
}

/* ---------- Modale ---------- */
.daily-overlay { z-index: 11500; }
.daily-modal { max-width: 520px; text-align: center; }
.daily-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 1rem; line-height: 1; color: var(--text-dim, #b0b0b8);
  background: rgba(10, 10, 12, .6); border: 1px solid var(--steel, #2a2a2f);
  cursor: pointer; transition: border-color .2s, color .2s, transform .12s;
}
.daily-close:hover { color: var(--text-main, #e0d8c8); border-color: var(--bronze, #a08456); }
.daily-close:active { transform: scale(.94); }
.daily-body { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

.daily-kicker {
  margin: 0 44px 0 0; text-align: left;
  font-family: var(--font-display, 'Montserrat', sans-serif); font-size: .74rem; font-weight: 700;
  letter-spacing: var(--tracking, .12em); text-transform: uppercase; color: var(--bronze, #a08456);
}
.daily-progress { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.daily-counter { font-size: .86rem; font-weight: 700; letter-spacing: .06em; color: var(--text-main, #e0d8c8); }
.daily-dots { display: inline-flex; gap: 6px; }
.daily-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-inset, #0d0d0f); border: 1px solid var(--steel-hi, #3b3b42); }
.daily-dot.is-current { border-color: var(--bronze-hi, #d4af37); box-shadow: 0 0 0 2px rgba(212, 175, 55, .25); }
.daily-dot.is-ok { background: #00e676; border-color: #00e676; }
.daily-dot.is-ko { background: #ff3b3b; border-color: #ff3b3b; }
.daily-meta { margin: 0; text-align: left; font-size: .8rem; color: var(--text-dim, #b0b0b8); }

.daily-question { text-align: left; font-size: 1.08rem; line-height: 1.5; margin: 2px 0 4px; }
.daily-answers { display: grid; grid-template-columns: 1fr; gap: 10px; }
.daily-answer {
  font-family: inherit; color: var(--text-main, #e0d8c8); text-align: center; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
}
.daily-answer:disabled { opacity: 1; cursor: default; color: var(--text-main, #e0d8c8); }
.daily-answers.locked .daily-answer:not(.correct):not(.wrong) { opacity: .55; }

.daily-feedback { text-align: left; display: flex; flex-direction: column; gap: 8px; animation: dailyFade .3s ease both; }
.daily-feedback .award-chip { align-self: flex-start; margin: 0; }
.daily-correct-line, .daily-anecdote { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-dim, #b0b0b8); }
.daily-correct-line strong { color: #00e676; }
.daily-anecdote strong { color: var(--bronze-hi, #d4af37); }
.daily-next { width: 100%; }

/* ---------- Résultat ---------- */
.daily-result-title {
  margin: 0; font-family: var(--font-display, 'Montserrat', sans-serif); font-size: 1.25rem; font-weight: 800;
  letter-spacing: var(--tracking, .12em); text-transform: uppercase; color: var(--bronze-hi, #d4af37);
}
.daily-score { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--text-main, #e0d8c8); }
.daily-score span { font-size: 1.6rem; color: var(--text-dim, #b0b0b8); font-weight: 600; }
.daily-points { margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .08em; color: var(--bronze, #a08456); }
.daily-emoji-row { font-size: 1.6rem; letter-spacing: .12em; }
.daily-streak-big { align-self: center; font-size: 1rem; padding: 9px 18px; border-color: var(--copper, #8f614f); }
.daily-streak-msg { margin: 0; font-size: .9rem; color: var(--text-dim, #b0b0b8); }
.daily-actions { display: flex; gap: 10px; }
.daily-actions .control-btn { flex: 1; }
.daily-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; color: var(--text-dim, #b0b0b8); }
.daily-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--steel, #2a2a2f); border-top-color: var(--bronze-hi, #d4af37);
  animation: dailySpin .9s linear infinite;
}

/* ---------- Animations ---------- */
@keyframes dailyCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dailyFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dailySpin { to { transform: rotate(360deg); } }
@keyframes dailyFlame {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(255, 140, 40, .45)); }
  35% { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 0 6px rgba(255, 140, 40, .75)); }
  70% { transform: scale(.97) rotate(3deg); filter: drop-shadow(0 0 3px rgba(255, 140, 40, .5)); }
}
@media (prefers-reduced-motion: reduce) {
  .daily-card, .daily-feedback, .daily-flame, .daily-spinner { animation: none !important; }
}

@media (min-width: 560px) {
  .daily-answers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .daily-card { padding: 16px 12px 12px; }
  .daily-score { font-size: 2.9rem; }
}