/* ============================================================================
 * widgets.css —— 交互原语样式
 * 视觉规格对齐 iOS 各Lab View：大圆钮、卡片、阴影分级、答对答错反馈。
 * ========================================================================= */

/* ---------- 关卡舞台通用布局 ---------- */
.lesson-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-m);
  padding: var(--sp-m) var(--sp-m) 120px;   /* 底部留白给语音浮标 */
}

/* ---------- W1 投喂 ---------- */
.feed { display: flex; flex-direction: column; align-items: center; gap: var(--sp-m); }
.feed-count {
  font-size: 18px; font-weight: 800; color: var(--footer-ink);
  background: rgba(255,255,255,0.86); padding: 8px 20px; border-radius: var(--r-chip);
}
.feed-cards { display: flex; gap: var(--sp-m); flex-wrap: wrap; justify-content: center; }
.feed-card {
  width: 120px; height: 152px; border: 3px solid #fff; border-radius: var(--r-card);
  background: linear-gradient(160deg,#fff,#f3f0ff);
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease, box-shadow var(--mo-quick) ease;
}
.feed-card.is-pressed { transform: scale(0.93) rotate(-2deg); }
.feed-card.is-hint { animation: glowPulse 1.5s ease-in-out infinite; border-color: var(--star); }
.feed-card:disabled { opacity: 0.55; }
.feed-card-emoji { font-size: 54px; line-height: 1; }
.feed-card-img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 14px;
  display: block; background: #fff;
}
.feed-card-name { font-size: 15px; font-weight: 700; color: var(--footer-ink); }

/* ---------- W2 探索 ---------- */
.hotspot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-m); width: 100%; }
.hotspot-title { font-size: 19px; font-weight: 800; }
.hotspot-grid {
  display: grid; gap: var(--sp-s);
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  width: 100%; max-width: 720px;
}
.hotspot-item {
  position: relative;
  padding: var(--sp-m) var(--sp-s); border: 3px solid #fff; border-radius: var(--r-card);
  background: #fff; box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease;
}
.hotspot-item.is-pressed { transform: scale(0.94); }
.hotspot-item.is-found { background: linear-gradient(160deg,#eaffee,#d6f7e0); border-color: var(--correct); }
.hotspot-emoji { font-size: 44px; line-height: 1; }
.hotspot-name { font-size: 16px; font-weight: 700; }
.hotspot-tick { position: absolute; top: 6px; right: 10px; color: var(--correct); font-size: 20px; font-weight: 900; }
.hotspot-progress { font-size: 16px; font-weight: 800; color: var(--footer-ink); opacity: 0.72; }

/* ---------- W3 序列 ---------- */
.pattern { display: flex; flex-direction: column; align-items: center; gap: var(--sp-l); }
.pt-row { display: flex; gap: var(--sp-s); flex-wrap: wrap; justify-content: center; }
.pt-cell {
  width: 62px; height: 62px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(36,51,88,0.10);
}
.pt-cell.is-empty { border: 3px dashed rgba(36,51,88,0.32); box-shadow: none; }
.pt-blank { font-size: 26px; font-weight: 900; color: rgba(36,51,88,0.38); }
.pt-opts { display: flex; gap: var(--sp-l); }
.pt-opt {
  position: relative;
  width: 106px; height: 106px; border: 4px solid #fff; border-radius: var(--r-card);
  background: #fff; box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
}
.pt-opt.is-pressed { transform: scale(0.93); }
.pt-opt.is-hint { border-color: var(--star); animation: glowPulse 1.5s ease-in-out infinite; }
.pt-opt-shape { max-width: 46px; max-height: 46px; }
.pt-opt-tag {
  position: absolute; top: 6px; left: 8px;
  font-size: 13px; font-weight: 800; color: var(--footer-ink); opacity: 0.5;
}

/* ---------- W4 二元判断 ---------- */
.binary { display: flex; flex-direction: column; align-items: center; gap: var(--sp-l); width: 100%; }
.binary-card {
  background: #fff; border-radius: var(--r-panel); padding: var(--sp-l);
  box-shadow: 0 var(--el-float-color) var(--el-float-r) var(--el-float-y);
  text-align: center; max-width: 560px;
}
.binary-emoji { font-size: 72px; line-height: 1.1; }
.binary-img {
  width: 120px; height: 120px; object-fit: cover; border-radius: 18px;
  display: block; margin: 0 auto 8px; background: #fff;
}
.binary-claim { font-size: 24px; font-weight: 800; margin-top: var(--sp-s); }
.binary-opts { display: flex; gap: var(--sp-l); flex-wrap: wrap; justify-content: center; }
.binary-btn {
  min-width: 168px; min-height: 84px; padding: var(--sp-s) var(--sp-l);
  border: 4px solid #fff; border-radius: var(--r-button);
  background: linear-gradient(160deg,#fff,#eef4ff);
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  font-size: 20px; font-weight: 800; color: var(--footer-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease;
}
.binary-btn.is-pressed { transform: scale(0.94); }
.binary-btn:disabled { opacity: 0.5; }
.binary-btn-emoji { font-size: 32px; }

/* ---------- W5 单选 ---------- */
.mcq { display: flex; flex-direction: column; align-items: center; gap: var(--sp-l); width: 100%; }
.mcq-q {
  font-size: 22px; font-weight: 800; text-align: center;
  background: #fff; padding: var(--sp-m) var(--sp-l); border-radius: var(--r-panel);
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  max-width: 620px;
}
.mcq-q-emoji { font-size: 46px; display: block; margin-bottom: 6px; }
.mcq-opts { display: flex; flex-direction: column; gap: var(--sp-s); width: 100%; max-width: 560px; }
.mcq-opt {
  display: flex; align-items: center; gap: var(--sp-s);
  padding: var(--sp-m); border: 3px solid #fff; border-radius: var(--r-card);
  background: #fff; box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
  font-size: 19px; font-weight: 700; color: var(--footer-ink); text-align: left;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease;
}
.mcq-opt.is-pressed { transform: scale(0.98); }
.mcq-opt-key {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--nova-outfit); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}

/* ---------- W6 拼装 ---------- */
.compose { display: flex; flex-direction: column; align-items: center; gap: var(--sp-l); width: 100%; }
.compose-slots { display: flex; gap: var(--sp-s); flex-wrap: wrap; justify-content: center; }
.compose-slot {
  min-width: 176px; padding: var(--sp-s) var(--sp-m);
  border: 3px dashed rgba(36,51,88,0.24); border-radius: var(--r-card);
  background: rgba(255,255,255,0.72); text-align: center;
}
.compose-slot.is-active { border-color: var(--star); background: #fffdf4; }
.compose-slot.is-filled { border-style: solid; border-color: var(--correct); background: #f2fdf5; }
.compose-slot-label { font-size: 13px; font-weight: 800; color: rgba(36,51,88,0.55); }
.compose-slot-value { font-size: 17px; font-weight: 800; margin-top: 4px; }
.compose-opts { display: flex; gap: var(--sp-s); flex-wrap: wrap; justify-content: center; }
.compose-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: 3px solid #fff; border-radius: var(--r-button);
  background: #fff; box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
  font-size: 17px; font-weight: 700; color: var(--footer-ink);
  cursor: pointer; touch-action: manipulation;
}
.compose-opt.is-pressed { transform: scale(0.94); }
.compose-opt-emoji { font-size: 24px; }

/* ---------- W7 递进 ---------- */
.reveal {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-m);
  background: #fff; border-radius: var(--r-panel); padding: var(--sp-l);
  box-shadow: 0 var(--el-float-color) var(--el-float-r) var(--el-float-y);
  max-width: 620px; text-align: center;
}
.reveal-emoji { font-size: 76px; }
.reveal-title { font-size: 25px; font-weight: 800; }
.reveal-body { font-size: 18px; line-height: 1.65; font-weight: 600; white-space: pre-line; }
.reveal-step { font-size: 14px; font-weight: 800; opacity: 0.5; }

/* ---------- W8 三选一 ---------- */
.choose3 { display: flex; flex-direction: column; align-items: center; gap: var(--sp-m); width: 100%; }
.choose3-q {
  font-size: 21px; font-weight: 800; text-align: center;
  background: #fff; padding: var(--sp-m); border-radius: var(--r-panel);
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  max-width: 600px;
}
.choose3-opts { display: flex; gap: var(--sp-s); flex-wrap: wrap; justify-content: center; }
.choose3-opt {
  width: 186px; min-height: 122px; padding: var(--sp-m);
  border: 3px solid #fff; border-radius: var(--r-card);
  background: #fff; box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--mo-tap) ease;
}
.choose3-opt.is-pressed { transform: scale(0.94); }
.choose3-opt:disabled { opacity: 0.5; }
.choose3-icon { font-size: 38px; }
.choose3-label { font-size: 16px; font-weight: 800; white-space: pre-line; text-align: center; }

/* ---------- W9 多选 ---------- */
.multisel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-m); width: 100%; }
.multisel-q {
  font-size: 21px; font-weight: 800; text-align: center;
  background: #fff; padding: var(--sp-m); border-radius: var(--r-panel); max-width: 600px;
  box-shadow: 0 var(--el-lifted-color) var(--el-lifted-r) var(--el-lifted-y);
}
.multisel-opts { display: flex; flex-direction: column; gap: var(--sp-s); width: 100%; max-width: 620px; }
.multisel-opt {
  display: flex; align-items: center; gap: var(--sp-s); text-align: left;
  padding: var(--sp-s) var(--sp-m); border: 3px solid #fff; border-radius: var(--r-card);
  background: #fff; box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
  cursor: pointer; touch-action: manipulation;
}
.multisel-opt.is-on { border-color: var(--correct); background: #f2fdf5; }
.multisel-badge { font-size: 30px; }
.multisel-text { flex: 1; }
.multisel-name { font-size: 18px; font-weight: 800; }
.multisel-rule { font-size: 14px; font-weight: 600; opacity: 0.72; margin-top: 2px; }
.multisel-check { font-size: 26px; font-weight: 900; color: var(--correct); width: 26px; }
.multisel-foot { display: flex; align-items: center; gap: var(--sp-m); }
.multisel-count { font-size: 15px; font-weight: 800; opacity: 0.6; }

/* ---------- 讲解卡 ---------- */
.explain {
  background: linear-gradient(160deg,#f0fdf4,#e0f7e8);
  border-left: 6px solid var(--correct);
  border-radius: var(--r-card); padding: var(--sp-m);
  font-size: 17px; font-weight: 700; line-height: 1.6; color: #1d5c34;
  max-width: 620px;
}
.explain--wrong {
  background: linear-gradient(160deg,#fef2f2,#fde8e8);
  border-left-color: var(--wrong); color: #8c2a2a;
}