/* 看释义猜成语：释义卡 + 字格 + 候选键盘；判分在前端，无刷新。 */
.quiz-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 22px 26px;
  margin: 0 0 20px;
  background:
    radial-gradient(ellipse at 92% 8%, #e8f5db, transparent 60%),
    linear-gradient(120deg, #f1f8ea, #eaf3e0);
  border: 1px solid #cfe3c0;
  border-radius: 22px;
}
.quiz-hero-copy { flex: 1 1 320px; min-width: 0; }
.quiz-hero-copy .eyebrow { margin-bottom: 6px; }
.quiz-hero-copy h1 { margin: 0 0 8px; font-size: clamp(32px, 3.6vw, 44px); }
.quiz-hero-tag { margin: 0 0 14px; color: var(--muted, #586b62); font-size: 16px; line-height: 1.7; }
.quiz-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.quiz-hero-stats span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #d6e5c6; font-size: 14px; color: #4a5550; }
.quiz-hero-stats b { color: var(--green, #22634c); font-weight: 800; }

.quiz-hero-demo {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid #bcd9a8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(47, 125, 79, .08);
}
.qhd { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; font-size: 30px; font-weight: 800; }
.qhd-fill { background: #eef5e6; color: var(--green, #22634c); border: 2px solid #bcd9a8; }
.qhd-blank { background: #f9fbf5; border: 2px dashed #c8d9b8; }

.quiz-toolbar { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 16px 18px; margin: 0 0 20px; border: 1px solid #d8ecd3; border-radius: 18px; background: #f4faef; }
.quiz-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.quiz-label { font-weight: 700; color: #234b38; font-size: 15px; }
.quiz-chips .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 5px 12px; border: 1px solid #d5e0ca; border-radius: 12px; background: var(--white, #fff); color: #3d4750; font-size: 15px; }
.quiz-chips .chip i { font-style: normal; color: var(--muted, #586b62); font-size: 13px; }
.quiz-chips .chip:hover { border-color: var(--green, #22634c); }
.quiz-chips .chip.on { border-color: var(--green, #22634c); background: var(--green, #22634c); color: #fff; }
.quiz-chips .chip.on i { color: #d9ecda; }

.quiz-board { max-width: 760px; padding: 26px 28px; border: 1px solid #dfe8d3; border-radius: 22px; background: var(--white, #fff); box-shadow: 0 6px 0 rgba(47, 125, 79, .06); }
.quiz-definition { margin: 0 0 20px; font-size: 21px; line-height: 1.9; font-weight: 600; color: var(--ink); }
.quiz-slots { display: flex; gap: 12px; margin: 0 0 18px; }
.quiz-slot { display: grid; place-items: center; width: 74px; height: 74px; border: 2px solid #d5e0ca; border-radius: 16px; background: #f9fbf5; font-size: 34px; font-weight: 800; color: var(--ink); padding: 0; }
.quiz-slot.shown { border-style: solid; background: #eef5e6; border-color: #bcd9a8; }
.quiz-slot.blank { cursor: pointer; }
.quiz-slot.blank:empty:hover { border-color: var(--green, #22634c); }
.quiz-slot.filled { background: #fff; }
.quiz-slot.ok { border-color: var(--green, #22634c); background: #eef5e6; color: var(--green, #22634c); }
.quiz-slot.bad { border-color: #cf5f52; background: #fdf1ef; color: #a3332a; animation: quiz-shake .3s; }
.quiz-slot.hint { border-color: #d9b23c; background: #fdf7e3; color: #8a6d1a; cursor: default; }
@keyframes quiz-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.quiz-keys { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 16px; }
.quiz-key { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #d9e1cf; border-radius: 13px; background: #fff; font-size: 24px; font-weight: 700; color: var(--ink); padding: 0; }
.quiz-key:hover { border-color: var(--green, #22634c); background: #eef5e6; }

.quiz-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.quiz-actions .button { min-width: 108px; justify-content: center; }
.quiz-score { margin: 14px 0 0; color: var(--muted, #586b62); font-size: 15px; }
.quiz-score b { color: var(--green, #22634c); }

.quiz-result { margin: 18px 0 0; padding: 18px 20px; border: 1px solid #bcd9a8; border-radius: 16px; background: #f4faef; }
.quiz-result-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.quiz-result-head b { font-size: 30px; font-weight: 900; letter-spacing: 6px; }
.quiz-result-pinyin { margin: 0 0 6px; color: #77739a; font-size: 17px; }
.quiz-result-definition { margin: 0; line-height: 1.8; }
.quiz-result-example { margin: 8px 0 0; color: var(--muted, #586b62); }
.quiz-praise { margin: 10px 0 0; color: var(--green, #22634c); font-weight: 700; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.quiz-note { margin: 20px 2px 0; color: var(--muted, #586b62); font-size: 13px; line-height: 1.7; }

@media (max-width: 640px) {
  .quiz-slot { width: 60px; height: 60px; font-size: 27px; }
  .quiz-key { width: 48px; height: 48px; font-size: 20px; }
}