/* きいてマスター 社会版 — 4択（mcq / cloze_mcq / relation_mcq）用の追加スタイル。app.css のトークンを使う */
.stage.mcq{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:12px;padding:4px 0 8px;text-align:left}
.qhead{display:flex;align-items:center;justify-content:space-between;width:100%}
.typechip{font-size:11px;font-weight:900;letter-spacing:.06em;padding:5px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.07);color:var(--dim);border:1px solid var(--line)}
.typechip.cloze{color:var(--ac);background:var(--acbg);border-color:transparent}
.typechip.rel{color:var(--ac2);background:rgba(255,255,255,.05)}
.listenbar{display:flex;align-items:center;gap:10px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-size:12.5px;font-weight:800;color:var(--dim)}
.listenbar .wave{height:20px}
.listenbar .wave i{height:6px}
.listenbar.on{color:var(--ac)}
/* 問題文カード: 本文優先。最低2〜3行は常に見え、内容に応じて伸び、上限を超えた分だけ内部スクロール */
.qtext.mcq{flex:0 0 auto;width:100%;min-height:100px;max-height:160px;height:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:calc(17px * var(--fs));line-height:1.6;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;overflow-wrap:anywhere}
.qtext.mcq.small{min-height:64px;max-height:140px;font-size:calc(14px * var(--fs));color:var(--dim);padding:8px 12px}
@media (max-width:420px){.qtext.mcq{min-height:92px;max-height:172px}}   /* 17px×1.6 の5行＋余白が収まる */
@media (max-height:640px){.qtext.mcq{min-height:88px;max-height:150px}.qtext.mcq.small{min-height:56px;max-height:110px}}
.blank{display:inline-block;min-width:3.5em;text-align:center;border-bottom:3px solid var(--ac);color:var(--ac);font-weight:900;padding:0 4px;line-height:1.2}
.blank.filled{border-bottom-color:var(--ok);color:var(--ok)}
.choices{display:flex;flex-direction:column;gap:10px;width:100%}
.choice{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:12px 14px;min-height:62px;font-weight:800;font-size:calc(16px * var(--fs));line-height:1.45;color:var(--text)}
.choice .k{width:36px;height:36px;border-radius:11px;background:var(--acbg);color:var(--ac);font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.choice .t{flex:1}
.choice .mk{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.choice.correct{border-color:var(--ok);background:rgba(52,211,153,.14)}
.choice.correct .k{background:var(--ok);color:#08101c}
.choice.wrong{border-color:var(--again);background:rgba(129,140,248,.16)}
.choice.wrong .k{background:var(--again);color:#08101c}
.choice.dim{opacity:.4}
.choices[data-locked="1"] .choice{pointer-events:none}
.choices[data-locked="1"] .choice:active{transform:none}
.answer.mcq{max-height:none}
.answer.mcq .a{font-size:calc(21px * var(--fs))}
.answer.mcq.ng{background:rgba(129,140,248,.12);border-color:var(--again)}
.answer.mcq.ng .l{color:var(--again)}
.result{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900}
.result.ok{color:var(--ok)} .result.ng{color:var(--again)}
.continue strong{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 10px}
.legend span{font-size:11px;font-weight:800;color:var(--dim);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 10px}
.legend b{color:var(--ac)}