.mq-container { max-width: 900px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 12px; }
.mq-hero { display:flex; justify-content:center; }
.mq-hero-img { width:100%; height:auto; border-radius:10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }

.mq-topbar { display:flex; align-items:center; gap:10px; margin:12px 0; flex-wrap:wrap; }
.mq-btn { background:#f4f4f5; border:1px solid #d4d4d8; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.mq-btn:hover { background:#e9e9ee; }
.mq-start { color:#111; }
.mq-pause { color:#111; }
.mq-next { color:#111; }
.mq-refresh { color:#111; }

/* Timer as a clock */
.mq-timer { display:flex; align-items:center; gap:8px; margin-left:auto; }
.mq-timer-svg { width:46px; height:46px; }
.mq-timer-bg { fill:none; stroke:#ddd; stroke-width:2; }
.mq-timer-progress { fill:none; stroke:#111; stroke-width:2; stroke-linecap:round; transform: rotate(-90deg); transform-origin: center; }
.mq-timer-label { font-weight:700; }

.mq-status { margin:8px 0 2px; }
.mq-tris { display:flex; gap:14px; }
.mq-tri { position:relative; padding-left:26px; font-weight:700; }
.mq-tri::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:18px solid black;
}
.mq-tri.real::before { border-bottom-color:#22c55e; }       /* green */
.mq-tri.misleading::before { border-bottom-color:#f59e0b; } /* amber */
.mq-tri.fake::before { border-bottom-color:#ef4444; }       /* red */

.mq-card { background:white; border:1px solid #e5e7eb; border-radius:12px; padding:16px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.mq-meta { color:#6b7280; display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; }
.mq-prompt { font-size:20px; font-weight:700; }

.mq-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.mq-choice { display:flex; align-items:center; justify-content:center; gap:10px; border-radius:14px; padding:18px; color:white; font-size:18px; font-weight:800; border:none; cursor:pointer; }
.mq-choice .mq-key { background:white; color:#111; padding:6px 10px; border-radius:8px; font-weight:800; }
.mq-choice.real { background:#22c55e; }
.mq-choice.misleading { background:#f59e0b; }
.mq-choice.fake { background:#ef4444; }
.mq-choice:disabled { opacity:.6; cursor:not-allowed; }

.mq-feedback { margin-top:10px; font-weight:700; min-height:22px; }
.mq-feedback.good { color:#16a34a; }
.mq-feedback.bad { color:#b91c1c; }

@media (max-width:600px){
  .mq-controls { grid-template-columns:1fr; }
  .mq-topbar { gap:6px; }
}