/* ── Quiz container ──────────────────────────────────────────────────────── */
.qm-quiz-wrap { max-width: 760px; margin: 0 auto; }
.qm-quiz-header { text-align: center; margin-bottom: 28px; }
.qm-quiz-title { font-size: 1.8rem; font-weight: 800; color: var(--text); }
.qm-quiz-meta  { color: var(--text-muted); margin-top: 6px; font-size: .9rem; }

/* ── Progress ────────────────────────────────────────────────────────────── */
.qm-progress-bar { height: 7px; background: var(--border); border-radius: 4px; margin-bottom: 24px; overflow: hidden; }
.qm-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #66bb6a); border-radius: 4px; transition: width .3s ease; }
.qm-progress-text { text-align: right; font-size: .82rem; color: var(--text-muted); margin-bottom: 6px; }

/* ── Question ────────────────────────────────────────────────────────────── */
.qm-question { background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 6px 24px rgba(0,0,0,.1); animation: fadeSlide .3s ease; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.qm-question-text { font-size: 1.2rem; font-weight: 800; line-height: 1.5; margin-bottom: 22px; color: #1a1a2e; }
.qm-question-image { border-radius: 12px; margin-bottom: 18px; max-height: 300px; width: 100%; object-fit: contain; }

/* ── Answer options — Kahoot style ──────────────────────────────────────── */
.qm-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:600px) { .qm-answers { grid-template-columns: 1fr; } }

.qm-answer {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 14px; border: none;
  cursor: pointer; font-size: 1rem; font-weight: 700;
  transition: transform .13s, box-shadow .13s;
  text-align: left; width: 100%; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); min-height: 68px;
}
/* 10 Kahoot colours */
.qm-answer:nth-child(1) { background: linear-gradient(135deg,#ef5350,#d32f2f); }
.qm-answer:nth-child(2) { background: linear-gradient(135deg,#2196F3,#1565C0); }
.qm-answer:nth-child(3) { background: linear-gradient(135deg,#FFA726,#F57C00); }
.qm-answer:nth-child(4) { background: linear-gradient(135deg,#4CAF50,#2E7D32); }
.qm-answer:nth-child(5) { background: linear-gradient(135deg,#9C27B0,#6A1B9A); }
.qm-answer:nth-child(6) { background: linear-gradient(135deg,#00ACC1,#00838F); }
.qm-answer:nth-child(7) { background: linear-gradient(135deg,#E91E63,#880E4F); }
.qm-answer:nth-child(8) { background: linear-gradient(135deg,#009688,#004D40); }
.qm-answer:nth-child(9) { background: linear-gradient(135deg,#795548,#3E2723); }
.qm-answer:nth-child(10){ background: linear-gradient(135deg,#3F51B5,#1A237E); }

/* Hover: lift only, NO colour/opacity change */
.qm-answer:hover:not(.locked) {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  opacity: 1 !important;
}
.qm-answer:active:not(.locked) { transform: translateY(0) scale(1); }

/* States */
.qm-answer.correct { background: linear-gradient(135deg,#2e7d32,#1b5e20) !important; box-shadow: 0 0 0 4px #a5d6a7, 0 4px 12px rgba(0,0,0,.2) !important; }
.qm-answer.wrong   { opacity: .6 !important; filter: grayscale(.3); }
.qm-answer.locked  { cursor: default; }
.qm-answer.selected { 
  outline: 5px solid #FFD600 !important;
  outline-offset: 3px;
  opacity: 1 !important; 
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  position: relative;
}
/* Checkmark overlay for selected multi-answers */
.qm-answer.selected::after {
  content: '✔';
  position: absolute;
  top: 6px; right: 10px;
  font-size: 1.2rem;
  color: #FFD600;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.qm-answers.has-selection .qm-answer:not(.selected) { opacity: .5; }
.qm-answers.has-selection .qm-answer.selected { opacity: 1 !important; }

/* Letter badge */
.qm-answer-letter {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .9rem;
  border: 2px solid rgba(255,255,255,.4);
}
.qm-answer.correct .qm-answer-letter { background: rgba(255,255,255,.3); }
.qm-answer.wrong   .qm-answer-letter { background: rgba(0,0,0,.15); }

/* ── Timer ───────────────────────────────────────────────────────────────── */
.qm-timer-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qm-timer-bar  { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.qm-timer { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-muted); font-size: 1rem; }
.qm-timer.urgent { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Explanation ─────────────────────────────────────────────────────────── */
.qm-explanation { background: #eff6ff; border-left: 4px solid var(--primary); border-radius: 0 10px 10px 0; padding: 14px 18px; margin-top: 18px; font-size: .9rem; color: #1e40af; display: none; }
.qm-explanation.show { display: block; animation: fadeSlide .3s ease; }
.qm-explanation-label { font-weight: 700; margin-bottom: 4px; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.qm-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }

/* ── Result screen ───────────────────────────────────────────────────────── */
.qm-result { text-align: center; animation: fadeSlide .5s ease; }
.qm-result-icon  { font-size: 4rem; margin-bottom: 16px; }
.qm-result-score { font-size: 3rem; font-weight: 900; color: var(--primary); }
.qm-result-pct   { font-size: 1.1rem; color: var(--text-muted); }
.qm-result-badge { display: inline-block; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: 1rem; margin-top: 12px; }
.qm-result-summary { text-align: left; margin-top: 28px; }
.qm-result-row  { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.qm-result-row-q    { flex: 1; }
.qm-result-row-icon { font-size: 1.1rem; }

/* ── Swipe mode ──────────────────────────────────────────────────────────── */
.swipe-wrap { position: relative; height: 300px; }
.swipe-card { position: absolute; inset: 0; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; padding: 24px; text-align: center; cursor: grab; transition: transform .2s; user-select: none; }
.swipe-btns { display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
.swipe-btn  { width: 64px; height: 64px; border-radius: 50%; border: none; font-size: 1.6rem; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s; }
.swipe-btn:hover { transform: scale(1.1); }
.swipe-no  { background: #fee2e2; }
.swipe-yes { background: #dcfce7; }

/* ── Flipped mode ────────────────────────────────────────────────────────── */
.qm-flipped-card { perspective: 1000px; margin-bottom: 20px; }
.qm-card-inner { position: relative; transform-style: preserve-3d; transition: transform .6s; min-height: 160px; }
.qm-card-inner.flipped { transform: rotateY(180deg); }
.qm-card-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 24px; font-size: 1.1rem; font-weight: 600; }
.qm-card-front { background: var(--primary); color: #fff; }
.qm-card-back  { background: var(--success); color: #fff; transform: rotateY(180deg); }

/* ── Photo options ───────────────────────────────────────────────────────── */
.photo-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.photo-option { border: 3px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; transition: all .2s; }
.photo-option:hover  { border-color: var(--primary); }
.photo-option.correct  { border-color: var(--success); }
.photo-option.wrong    { border-color: var(--danger); }
.photo-option img      { width: 100%; height: 120px; object-fit: cover; display: block; }
.photo-option .label   { padding: 6px 10px; font-size: .82rem; font-weight: 600; text-align: center; background: var(--bg); }

/* ── Propose form ────────────────────────────────────────────────────────── */
.propose-wrap { max-width: 640px; margin: 0 auto; }