/* "Melyik kincsvadász lény vagy?" kvíz oldal - a közös arculat (style.css) változóit használja. */

.quiz-hero { padding: 70px 0 20px; text-align: center; }
.quiz-hero h1 {
  font-size: clamp(28px, 5vw, 46px);
  max-width: 820px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #fff, var(--amber-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quiz-lead { max-width: 620px; margin: 0 auto; color: var(--ink-dim); font-size: 17px; }

.quiz-section { padding: 24px 0 80px; }
.quiz-box { max-width: 680px; padding-top: 28px; padding-bottom: 32px; text-align: center; }
.quiz-screen[hidden] { display: none; }

.quiz-emoji { font-size: 64px; margin-bottom: 8px; }
.quiz-spin { display: inline-block; animation: quiz-spin 1.1s ease-in-out infinite; }
@keyframes quiz-spin {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50% { transform: scale(1.18) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .quiz-spin { animation: none; } }

.quiz-intro { font-size: 18px; color: var(--ink); margin: 0 0 20px; }
.quiz-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-faint); }
.quiz-box .btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Haladás */
.quiz-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-bottom: 10px; }
.quiz-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--amber-400), var(--amber-600)); transition: width 0.3s; }
.quiz-step { font-size: 13px; color: var(--ink-faint); margin: 0 0 6px; }
.quiz-q { font-size: clamp(20px, 3.2vw, 26px); margin: 4px 0 20px; }

.quiz-answers { display: grid; gap: 10px; }
.quiz-answer {
  font: inherit;
  font-size: 16px;
  text-align: left;
  color: var(--ink);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.quiz-answer:hover, .quiz-answer:focus-visible {
  border-color: var(--amber-400);
  background: rgba(255, 207, 92, 0.1);
  transform: translateY(-1px);
  outline: none;
}

/* Eredmény */
.quiz-result-pre { color: var(--amber-400); font-weight: 600; letter-spacing: 0.04em; margin: 0 0 12px; }
.quiz-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 420px;
  margin: 0 auto 14px;
  padding: 16px;
  border-radius: 22px;
  border: 2px solid var(--amber-600);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  text-align: left;
}
.quiz-card.rarity-gyakori { border-color: #9aa5b1; }
.quiz-card.rarity-ritka { border-color: #4ea1ff; }
.quiz-card.rarity-epikus { border-color: #b86bff; }
.quiz-card.rarity-legendas { border-color: var(--amber-400); box-shadow: 0 0 36px rgba(255, 207, 92, 0.3); }

.quiz-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; background: rgba(0,0,0,0.25); }
.quiz-card-noimg { display: flex; align-items: center; justify-content: center; font-size: 72px; }
.quiz-rarity {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--indigo-950);
  background: var(--amber-400);
  border-radius: 999px;
  padding: 3px 12px;
}
.quiz-card-name { font-size: 26px; margin: 8px 0 12px; }

.quiz-stats { display: grid; gap: 7px; }
.quiz-stat { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.quiz-stat-name { color: var(--ink-dim); }
.quiz-stat-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.quiz-stat-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }
.quiz-stat-val { text-align: right; color: var(--ink); font-weight: 700; }

.quiz-result-text { font-family: 'Cinzel', serif; font-size: 22px; color: var(--amber-400); margin: 6px 0 22px; }

.quiz-cta {
  margin: 0 auto 22px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 207, 92, 0.08);
  border: 1px solid var(--card-border);
}
.quiz-cta p { margin: 0 0 12px; color: var(--ink-dim); font-size: 15px; }
.quiz-cta .store-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.quiz-share { margin-bottom: 20px; }
.quiz-share-title { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.quiz-share-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.quiz-copy-note { margin: 10px 0 0; font-size: 13px; color: var(--teal-400); }

@media (max-width: 480px) {
  .quiz-stat { grid-template-columns: 96px 1fr 26px; }
}

.quiz-follow { margin: 0 0 18px; color: var(--ink-dim); font-size: 15px; }
.quiz-follow a { color: var(--amber-400); text-decoration: none; font-weight: 600; }
.quiz-follow a:hover { text-decoration: underline; }

.quiz-again-note { margin: 0 0 12px; color: var(--ink-faint); font-size: 14px; }