/* きいてマスター 数学版 — 6形式（4択・途中式の空欄・整数入力）と数式表示の追加スタイル。app.css のトークンを使う。失敗色に赤は使わない（--again の藍色）。 */
.stage.mcq{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%;gap:8px}
.qhead .r{display:flex;gap:6px;align-items:center}
.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);white-space:nowrap}
.typechip.calc{color:var(--ac);background:var(--acbg);border-color:transparent}
.typechip.fs,.typechip.mt,.typechip.fm{color:var(--ac2);background:rgba(255,255,255,.05)}
.typechip.sb,.typechip.cb{color:var(--close);background:rgba(251,191,36,.12);border-color:transparent}
.modechip{font-size:11px;font-weight:800;padding:5px 9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.05);color:var(--dim);border:1px dashed var(--line);white-space:nowrap}
.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)}
/* 問題カード: 指示文 + 式 */
.qcard{width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.qcard.small{max-height:30vh;padding:8px 12px}
.qcard .qtxt{font-size:calc(15.5px * var(--fs));line-height:1.6;font-weight:800;overflow-wrap:anywhere}
.qcard.small .qtxt{font-size:calc(13px * var(--fs));color:var(--dim)}
.qcard .qexpr{font-size:calc(24px * var(--fs));font-weight:800;line-height:1.5;text-align:center;padding:6px 2px;letter-spacing:.01em;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.qcard.small .qexpr{font-size:calc(18px * var(--fs))}
.qcard .qexpr.long{white-space:normal;font-size:calc(19px * var(--fs))}
/* 数式パーツ */
.m{font-family:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;font-weight:800;white-space:nowrap}
.m i{font-style:italic;font-family:'Times New Roman','Noto Serif JP',serif;font-weight:700;padding:0 1px}
.m sup{font-size:.62em;vertical-align:.55em;line-height:0;margin-left:1px}
.m .op{padding:0 .28em}
.m .op.u{padding:0 .05em 0 0}
.m .pr{padding:0 .02em}
.m .sqrt{display:inline-flex;align-items:stretch;vertical-align:middle}
.m .sqrt .rs{font-size:1.15em;line-height:1;align-self:flex-end;transform:translateY(.02em)}
.m .sqrt .rad{border-top:2px solid currentColor;padding:.06em .15em 0 .1em;line-height:1.15;margin-left:-.06em}
.m .frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .18em;line-height:1.15;font-size:.92em}
.m .frac .fn{padding:0 .25em .05em;border-bottom:2px solid currentColor}
.m .frac .fd{padding:.05em .25em 0}
.m .blank{display:inline-block;min-width:2.2em;text-align:center;border-bottom:3px solid var(--ac);color:var(--ac);font-weight:900;padding:0 4px;line-height:1.2;vertical-align:baseline}
.m .blank.filled{border-bottom-color:var(--ok);color:var(--ok)}
.blank{display:inline-block;min-width:2.2em;text-align:center;border-bottom:3px solid var(--ac);color:var(--ac);font-weight:900;padding:0 4px;line-height:1.2}
/* 4択 */
.choices{display:flex;flex-direction:column;gap:9px;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:11px 14px;min-height:58px;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;overflow-wrap:anywhere}
.choice .t .m{white-space:normal}
.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}
/* 整数入力キーパッド */
.numpad{width:100%;display:flex;flex-direction:column;gap:8px}
.numpad .inp{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);border:2px solid var(--line);border-radius:16px;min-height:60px;font-size:calc(30px * var(--fs));font-weight:900;letter-spacing:.05em}
.numpad .inp .ph{font-size:14px;color:var(--dim2);font-weight:800;letter-spacing:0}
.numpad .inp.ok{border-color:var(--ok);color:var(--ok)}
.numpad .inp.ng{border-color:var(--again);color:var(--again)}
.numpad .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.numpad .keys button{min-height:52px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:900;font-size:22px;color:var(--text)}
.numpad .keys button.fn{font-size:16px;color:var(--dim)}
.numpad .keys button.go{background:var(--ac);color:#08101c;grid-row:span 2;font-size:18px}
.numpad[data-locked="1"] .keys button{pointer-events:none;opacity:.5}
/* タイマー */
.timer{width:100%;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:900;color:var(--dim)}
.timer .tbar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.timer .tbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--ac2),var(--ac));width:100%;transition:width .2s linear}
.timer.low .tbar>i{background:var(--close)}
.timer .sec{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.timer.wait{opacity:.55}
.timer.paused .sec{color:var(--close)}
/* 答え */
.answer.mcq{max-height:none}
.answer.mcq .a{font-size:calc(21px * var(--fs));overflow-x:auto;overflow-y:hidden}
.answer.mcq .a .m{font-size:1.05em}
.answer.mcq.ng{background:rgba(129,140,248,.12);border-color:var(--again)}
.answer.mcq.ng .l{color:var(--again)}
.answer .fstep{font-size:calc(13.5px * var(--fs));line-height:1.55;margin:6px 0 4px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--text);font-weight:700}
.answer .fstep b{color:var(--ac);font-weight:900;margin-right:6px}
.answer .e .m{white-space:normal}
.result{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900}
.result.ok{color:var(--ok)} .result.ng{color:var(--again)} .result.to{color:var(--close)}
/* <button> の中身は Chrome では匿名フレックス行として並ぶため、縦積みにしてボタンの高さを中身に合わせる（数学版のみ） */
.continue{display:flex;flex-direction:column;align-items:stretch;gap:0;flex-shrink:0}   /* overflow:hidden のため .screen（flex 列）内で縮んで中身が隠れるのを防ぐ */
.continue small,.continue strong,.continue .bar{width:100%}
.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)}
.q .t .m{white-space:normal}