body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 2rem; }
main { max-width: 900px; margin: 0 auto; }
.hidden { display: none; }
.small { font-size: 0.9rem; opacity: .85; }
.row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.grow { flex:1; }
.config { display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap:.5rem; margin:.5rem 0 1rem; }
.config label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; }
button { padding:.6rem 1rem; border-radius:.5rem; border:1px solid #ddd; cursor:pointer; }
#choices { display:grid; gap:.5rem; margin:1rem 0; }
#choices button { display:block; width:100%; text-align:left; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.feedback-ok { background:#88e788 !important; color:#000 !important; box-shadow:0 0 0 2px #3aa63a inset; }
.feedback-ko { background:#f06f6f !important; color:#fff !important; box-shadow:0 0 0 2px #b53333 inset; }
#answerMsg { font-weight:600; margin-top:.25rem; }
#answerMsg.ok { color:#2e7d32; }
#answerMsg.ko { color:#c62828; }
.timer { min-width:3rem; text-align:center; font-weight:700; border:1px solid #ddd; border-radius:.5rem; padding:.2rem .5rem; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); color:#fff; font-size:2rem; font-weight:800; z-index:10; }