/* ============================================================
 * ws-quiz.css —— 屏幕作答引擎样式（配合 assets/ws-quiz.js）
 * ------------------------------------------------------------
 * 儿童规范：触控目标 ≥48px、题目大字号、反馈色彩柔和、无时间压力视觉
 * 引入：<link rel="stylesheet" href="../assets/ws-quiz.css">
 * ============================================================ */

.wq-wrap { max-width: 720px; margin: 0 auto; padding: 12px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
.wq-top { display: flex; justify-content: space-between; color: #666; font-size: 14px; padding: 6px 4px 14px; }
.wq-stem { position: relative; text-align: center; padding: 26px 8px 18px; }

/* 题干：口算超大字 / 拼音大字 */
.wq-stem-text { font-size: 56px; font-weight: 700; letter-spacing: 4px; color: #263238; font-family: "Times New Roman", "宋体", serif; }
.wq-stem-py { font-size: 60px; color: #1565c0; font-family: "Times New Roman", serif; letter-spacing: 3px; }
.wq-stem-unit { font-size: 14px; color: #888; margin-top: 8px; }

.wq-tts { position: absolute; right: 4px; top: 10px; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid #90a4ae; background: #fff; font-size: 24px; cursor: pointer; }
.wq-tts:active { background: #eceff1; }

/* 即时反馈条 */
.wq-feedback { text-align: center; font-size: 22px; min-height: 34px; padding: 4px 0 10px; }
.wq-fb-ok { color: #2e7d32; }
.wq-fb-no { color: #c62828; }

/* 口算：入口显示 + 数字键盘（3×4 大格） */
.wq-entry { text-align: center; font-size: 44px; min-height: 62px; color: #263238;
  border-bottom: 3px solid #90a4ae; margin: 8px 24px 16px; font-family: "Times New Roman", serif; letter-spacing: 6px; }
.wq-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 8px 20px; }
.wq-key { height: 72px; font-size: 30px; border: none; border-radius: 14px; background: #eceff1; color: #263238; cursor: pointer; }
.wq-key:active { background: #cfd8dc; }
.wq-key-ok { background: #a5d6a7; }
.wq-key-ghost { background: #fff; border: 2px solid #b0bec5; }

/* 语文：字卡 2×2 */
.wq-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 6px 8px 20px; }
.wq-card { height: 110px; font-size: 52px; border: 2px solid #b0bec5; border-radius: 16px; background: #fff;
  color: #263238; cursor: pointer; font-family: "楷体", "KaiTi", "宋体", serif; }
.wq-card:active { background: #eceff1; }
.wq-card:disabled, .wq-key:disabled { opacity: .55; }

/* 结束页 */
.wq-done { text-align: center; padding: 46px 12px 30px; }
.wq-big { font-size: 72px; font-weight: 700; color: #1565c0; }
.wq-pct { font-size: 18px; color: #555; margin: 8px 0 4px; }
.wq-praise { font-size: 20px; color: #2e7d32; margin: 14px 0 26px; }
.wq-btn { height: 56px; padding: 0 34px; font-size: 20px; border: none; border-radius: 12px; cursor: pointer; }
.wq-btn-main { background: #1565c0; color: #fff; }
.wq-btn-main:active { background: #0d47a1; }

/* 窄屏（手机竖屏）：键盘与字卡再放大 */
@media (max-width: 480px) {
  .wq-stem-text { font-size: 46px; }
  .wq-stem-py { font-size: 48px; }
  .wq-key { height: 64px; font-size: 26px; }
  .wq-card { height: 96px; font-size: 44px; }
}