/* Layout & type */
.odq { max-width: 900px; margin: 0 auto; padding: 10px; font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.wrap { background:#fff; padding:24px; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.08); }
.title { font-size:clamp(28px,4vw,44px); font-weight:800; text-align:center; margin:0 0 8px; }
.sub { text-align:center; margin:8px auto 18px; max-width:60ch; }
.qtitle { font-size:clamp(20px,3vw,28px); font-weight:800; margin:8px 0 6px; }
.prompt { margin:10px 0 12px; }
.hero { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; margin-bottom:14px; background:#f2f2f6; }

/* Screens + transitions */
.screen { display:none; opacity:0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.screen.active { display:block; opacity:1; transform: translateY(0); }
.result { text-align:center; }

/* Answers */
.answers { display:grid; gap:10px; margin:12px 0; }
.opt { text-align:left; padding:12px 14px; border-radius:12px; border:1px solid #d9d9e3; background:#fafafa; cursor:pointer; }
.opt:hover { background:#f0f4ff; border-color:#a5b4fc; }
.opt.selected, .opt[aria-pressed="true"] { background:#e7efff; border-color:#0a6cff; }

/* Actions */
.actions { display:flex; gap:10px; margin:12px 0 0; }
.cta { display:inline-block; padding:12px 18px; border-radius:999px; border:0; background:#0a6cff; color:#fff; font-weight:700; cursor:pointer; text-decoration:none; }
.cta.secondary { background:#eef2ff; color:#0a2a6c; border:1px solid #cfe1ff; }
.cta[disabled] { opacity:.55; cursor:not-allowed; }
.cta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

/* Helpers */
.hidden { display:none !important; }