/* Know Me Quiz skin — on top of base.css */
.q-dots { display: flex; gap: 8px; justify-content: center; }
.q-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.q-dots i.is-done { background: var(--ink-faint); }
.q-dots i.is-now { background: var(--pink); }
.q-role { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font: 700 13px var(--mono); letter-spacing: .02em; }
.q-role--subject { background: var(--pink-tint); color: #B4234F; }
.q-role--guesser { background: var(--blue-tint); color: var(--on-blue-tint); }
.q-twist { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r8); background: var(--yellow-tint); color: var(--on-yellow-tint); font-weight: 700; font-size: 14px; }
.q-twist small { font-weight: 500; }
.q-textarea { width: min(460px, 100%); min-height: 108px; }
.q-answers .answer .cap { }
.q-mark { display: flex; gap: 10px; justify-content: center; }
.q-points { font: 700 13px var(--mono); letter-spacing: .06em; color: var(--ink-soft); }
.q-pack-hint { font: 13px var(--mono); color: var(--pink); }
.q-mystery { display: grid; place-items: center; font: 800 28px var(--mono); color: var(--ink-faint); background: repeating-linear-gradient(45deg, var(--paper-raised) 0 8px, var(--paper) 8px 16px); }  /* the hatch was two literal whites: the "???" was 2.4:1 on it at night */
.q-result-pct { font: 800 clamp(64px, 14vw, 112px)/1 var(--font); letter-spacing: -.04em; }
.q-result-band { font-size: clamp(22px, 3.5vw, 30px); font-weight: 800; letter-spacing: -.015em; }
.q-knew { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; }
.q-knew .row { justify-content: space-between; padding: 12px 16px; border-radius: var(--r8); background: var(--paper-raised); border: 1px solid var(--line); border-left-width: 4px; font-weight: 700; }
.q-knew .row.pink { border-left-color: var(--pink); } .q-knew .row.blue { border-left-color: var(--blue); }
.q-unlock { width: min(420px, 100%); border: 1px dashed var(--line); border-radius: var(--r8); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.q-unlock .eyebrow { color: #1E5FBF; }
.q-unlock .chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.q-rounds { width: min(460px, 100%); }
.q-rounds .r { align-items: center; }
.q-rounds .r .n { font: 12px var(--mono); color: var(--ink-faint); width: 28px; flex: none; }
.q-rounds .r .t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-rounds .r .ok { color: var(--green); font-weight: 800; } .q-rounds .r .no { color: var(--red); font-weight: 800; }
.q-bonus-card { text-align: left; }
.q-bonus-card .cap { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.q-bonus-card .qq { font-weight: 800; font-size: 17px; margin: 4px 0 8px; }
.q-bonus-card .aa { color: var(--ink); }