/* ============================================================
   CYMOTHOE · quiz.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */
.btn{font-size:.9rem}
.btn--sm{font-size:.68rem}
/* ---- category badges (one per sheet) ---- */
.cat-badge--boats{background:rgba(28,100,136,.14);color:var(--cyan)}
.cat-badge--navigation{background:rgba(85,99,106,.14);color:var(--ink-dim)}
.cat-badge--safety{background:rgba(178,58,46,.14);color:var(--danger)}
.cat-badge--weather{background:rgba(28,100,136,.14);color:var(--cyan)}
.cat-badge--anchors{background:rgba(151,103,26,.16);color:var(--brass)}
.cat-badge--mixed{background:rgba(31,44,51,.1);color:var(--ink-dim)}
/* ---- quiz category picker ---- */
.quiz-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;margin-bottom:1.6rem}
.quiz-cat-card{background:#FFFFFF;padding:1.3rem 1.3rem 1.5rem;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:.5rem;min-height:150px;text-align:left;font:inherit;border:none;width:100%}
.quiz-cat-card:hover{background:#FBF9F2}
.quiz-cat-card h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.2rem;color:var(--ink);line-height:1.1}
.quiz-cat-card p{font-size:.85rem;color:var(--ink-dim);margin-top:auto}
.quiz-cat-card--mixed{background:linear-gradient(180deg,var(--bp-panel-2),var(--bp-panel))}
.quiz-cat-card--mixed:hover{background:var(--bp-panel-2)}
/* ---- quiz runner ---- */
.quiz-stage{max-width:64ch}
.quiz-back{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;display:inline-block;margin-bottom:1.2rem}
.quiz-card{border:1px solid var(--bp-line-strong);border-radius:var(--r);background:linear-gradient(180deg,var(--bp-panel),var(--bp-deep-2));padding:1.4rem}
.quiz-progress{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.quiz-q{font-size:1.05rem;color:var(--ink);margin-bottom:1rem;font-weight:500}
.quiz-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.quiz-option{text-align:left;font-family:var(--font-body);font-size:.92rem;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--bp-line-strong);border-radius:var(--r);padding:.6rem .8rem;cursor:pointer;transition:.15s}
.quiz-option:hover:not(:disabled){border-color:var(--cyan)}
.quiz-option:disabled{cursor:default}
.quiz-option.is-correct{border-color:var(--ok);background:rgba(61,122,80,.14);color:var(--ok)}
.quiz-option.is-wrong{border-color:var(--danger);background:rgba(178,58,46,.12);color:var(--danger)}
.quiz-feedback{min-height:1.6rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.85rem}
.quiz-explain{flex-basis:100%;color:var(--ink-dim);margin:.3rem 0 0}
.quiz-review{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--cyan-text);text-decoration:underline}
.quiz-review:hover{color:var(--brass)}
.quiz-feedback__ok{color:var(--ok);font-weight:600}
.quiz-feedback__no{color:var(--danger)}
.quiz-score{font-size:1.15rem;color:var(--ink);margin-bottom:.8rem;font-weight:500}
@media(max-width:880px){
.quiz-cats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.quiz-cats{grid-template-columns:1fr}
}