/* きいてマスター 英語版 — mcq / cloze_mcq / reorder / spelling / completion 用の追加スタイル。app.css のトークンを使う */
.stage.eng{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:10px;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.t-cloze_mcq,.typechip.t-mcq{color:var(--ac);background:var(--acbg);border-color:transparent}
.typechip.t-reorder{color:var(--ac2);background:rgba(240,171,252,.12);border-color:transparent}
.typechip.t-spelling,.typechip.t-completion{color:var(--close);background:rgba(251,191,36,.12);border-color:transparent}
.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)}
/* 日本語の指示（ja）と英文（en）を見分けやすく */
.prompt{width:100%;display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px dashed var(--line);border-radius:14px;padding:9px 12px;font-size:calc(13.5px * var(--fs));line-height:1.6;color:var(--text);font-weight:700}
.prompt .lb{flex-shrink:0;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--dim);background:rgba(255,255,255,.07);border-radius:6px;padding:2px 6px;margin-top:3px}
.prompt .ja-target{color:var(--ac);font-weight:900}
.qtext.en{flex:0 0 auto;width:100%;min-height:64px;height:auto;max-height:180px;overflow-y:auto;-webkit-overflow-scrolling:touch;font-family:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;font-size:calc(20px * var(--fs));font-weight:800;line-height:1.55;text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--ac);border-radius:16px;padding:12px 14px;overflow-wrap:anywhere}
.qtext.en.small{min-height:48px;font-size:calc(15px * var(--fs));color:var(--dim);padding:8px 12px;border-left-color:var(--dim2)}
.qtext.en .lb{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--dim);margin-bottom:2px}
.blank{display:inline-block;min-width:3.2em;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)}
.given{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.given .g{font-size:13px;font-weight:900;color:var(--close);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);border-radius:var(--radius-pill);padding:6px 12px}
.given .g b{font-size:15px;letter-spacing:.02em}
.given .hb{margin-left:auto;font-size:12px;font-weight:900;color:var(--dim);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 12px;min-height:34px}
.given .hb.on{color:var(--ac);border-color:var(--ac)}
.hinttext{width:100%;font-size:calc(12.5px * var(--fs));color:var(--dim);font-weight:700;line-height:1.5;background:rgba(255,255,255,.04);border-radius:12px;padding:8px 12px}
/* 4択 */
.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:60px;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}
/* ならべかえ */
.reorder{width:100%;display:flex;flex-direction:column;gap:8px}
.reorder .lb{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--dim)}
.line{min-height:60px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:rgba(0,0,0,.22);border:2px dashed var(--line);border-radius:16px;padding:10px}
.line.ok{border-color:var(--ok)} .line.ng{border-color:var(--again)}
.line .ph{color:var(--dim2);font-size:13px;font-weight:800;padding:0 4px}
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}
.tok{font-family:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;font-size:calc(17px * var(--fs));font-weight:900;padding:9px 14px;min-height:44px;border-radius:12px;background:var(--card);border:2px solid var(--line);color:var(--text)}
.line .tok{background:var(--acbg);border-color:var(--ac);color:var(--text)}
.tok.ghost{opacity:.25;pointer-events:none}
.reorder .acts{display:flex;gap:8px}
.reorder .acts .btn{min-height:50px;font-size:16px}
/* つづり・英文完成 */
.inp{width:100%;display:flex;flex-direction:column;gap:8px}
.inp input{width:100%;min-height:56px;font-family:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;font-size:calc(20px * var(--fs));font-weight:800;color:var(--text);background:rgba(0,0,0,.25);border:2px solid var(--line);border-radius:16px;padding:10px 14px;outline:none}
.inp input:focus{border-color:var(--ac)}
.inp input.ok{border-color:var(--ok);color:var(--ok)} .inp input.ng{border-color:var(--again);color:var(--again)}
.inp .btn{min-height:52px;font-size:16px}
/* 答え */
.answer.eng{max-height:none}
.answer.eng .a{font-family:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;font-size:calc(22px * var(--fs));overflow-wrap:anywhere}
.answer.eng .alt{font-size:calc(12.5px * var(--fs));color:var(--dim);font-weight:800;margin:-4px 0 8px}
.answer.eng .you{font-size:calc(12.5px * var(--fs));color:var(--again);font-weight:800;margin-bottom:6px;overflow-wrap:anywhere}
.answer.eng.ng{background:rgba(129,140,248,.12);border-color:var(--again)}
.answer.eng.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)}