/* Flock Quiz — compact app-like panel matching the reference UI */
.quiz-page { background: #dfe6da; }
.quiz-header { max-width: 860px; margin-left: auto; margin-right: auto; }
.quiz-header h1 { font-size: 22px; }
.quiz-shell { max-width: 450px; margin: 0 auto; }
.quiz-card {
  background: #244c40;
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow), 8px 8px 0 var(--moss-deep);
  padding: 14px;
  color: var(--cream);
}
.quiz-topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.quiz-mode { display:flex; gap:5px; font-family:'Press Start 2P',monospace; font-size:8px; }
.quiz-mode span { padding:8px 7px; border:2px solid var(--ink); }
.mode-active { background:var(--sun); color:var(--ink); }
.mode-muted { background:#315e4d; color:#c8d6c3; opacity:.75; }
.quiz-score { background:#315e4d; border:2px solid var(--moss); padding:7px 9px; font-family:'Press Start 2P',monospace; font-size:10px; white-space:nowrap; }
.quiz-progress-row { display:flex; justify-content:space-between; color:#d7e3d1; font-size:18px; margin-bottom:5px; }
.quiz-progress { height:10px; background:#17382e; border:2px solid var(--ink); margin-bottom:15px; }
#progress-fill { height:100%; width:0; background:var(--sun); transition:width .2s; }
.bird-frame {
  --bird-aspect: 4 / 3;
  width: min(100%, 420px);
  aspect-ratio: var(--bird-aspect);
  margin: 0 auto;
  background: #e8dfc5;
  border: 4px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width .15s ease, aspect-ratio .15s ease;
}
.bird-frame img { width:100%; height:100%; object-fit:contain; image-rendering:auto; display:block; }
.image-fallback { font-size:70px; }
.quiz-prompt { text-align:center; font-size:25px; padding:14px 0 10px; color:#fff5dc; }
.answers { display:grid; gap:8px; }
.answer-button { appearance:none; width:100%; border:3px solid var(--ink); background:#396653; color:#fff5dc; padding:12px 10px; font:20px 'VT323',monospace; cursor:pointer; box-shadow:3px 3px 0 #17382e; text-align:center; transition:transform .1s,background .1s; }
.answer-button:hover { background:#507e5d; transform:translate(1px,1px); }
.answer-button:disabled { cursor:default; }
.answer-button.correct { background:#d39d3f; color:var(--ink); }
.answer-button.wrong { background:#a65249; color:#fff5dc; }
.answer-button.reveal { background:#668e58; color:#fff5dc; }
.quiz-feedback { margin-top:11px; padding:9px 10px; border:3px solid var(--ink); background:#315e4d; color:#fff5dc; text-align:center; font-size:19px; }
.quiz-feedback a { color:#ffe39a; }
.next-button { width:100%; margin-top:10px; cursor:pointer; }
.quiz-footer-note { text-align:center; color:#b9d0bd; font-size:15px; margin-top:13px; }
.quiz-info { max-width:450px; margin:30px auto 0; }
.quiz-info p { font-size:19px; }
@media (max-width:520px) {
  body { padding-left:12px; padding-right:12px; }
  .quiz-card { padding:10px; }
  .mode-muted { display:none; }
  .quiz-topbar { align-items:flex-start; }
  .answer-button { min-height:48px; }
}