.family-entry { display:flex; align-items:center; gap:24px; justify-content:space-between; padding:22px; margin:0 0 20px; border:1px solid #afd4c3; border-radius:18px; background:#edf7f0; }
.family-entry p { margin:5px 0 0; color:var(--muted); font-size:.95rem; }
.family-entry .btn { flex-shrink:0; }
.family-steps { margin-bottom:18px; }
.family-activity .instruction { margin-bottom:14px; }
.family-focus { display:flex; align-items:center; justify-content:center; gap:20px; margin:0 auto 20px; min-width:260px; padding:8px 26px; border:1px solid var(--line); border-radius:20px; background:#f5faf5; color:var(--ink); }
.family-syllable { display:inline-flex; align-items:center; justify-content:center; gap:1px; padding:2px 3px; border:2px solid transparent; border-radius:9px; }
.family-character { font-size:2.65rem; line-height:1.3; }
.family-zhuyin { display:inline-flex; align-items:center; position:relative; font-size:.75rem; line-height:1.05; padding-right:.6em; }
.family-phonemes { display:flex; flex-direction:column; align-items:center; }
.family-tone { position:absolute; right:-.1em; top:50%; transform:translateY(-50%); font-size:1.15em; }
.family-zhuyin:has(.family-phonemes:empty) { display:none; }
.family-focus .family-character { font-size:5.8rem; }
.family-focus .family-zhuyin { font-size:1.4rem; }
.family-match { background:#e4f4e8; border-color:#429c83; }
.family-audio-label { display:flex; align-items:center; justify-content:center; gap:7px; font-size:.8rem; color:var(--green-dark); }
.family-audio-label svg { width:18px; height:18px; }
.family-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.family-card { min-width:0; border:1px solid var(--line); border-radius:18px; padding:10px; background:#fff; color:var(--ink); box-shadow:0 4px 0 #e8f2eb; }
.family-card:hover { border-color:var(--green); background:#fbfdfb; }
.family-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:#fafaf5; border-radius:12px; }
.family-card-text { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 0 4px; }
.family-word { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:1px; }
.family-actions { margin-top:24px; }
.words-only .family-card { min-height:180px; }
.words-only .family-character { font-size:3.2rem; }
.family-help-note { margin:12px 0 0; }
@media(max-width:850px) {
  .family-cards { gap:10px; }
  .family-character { font-size:2.15rem; }
  .family-zhuyin { font-size:.65rem; }
}
@media(max-width:650px) {
  .family-entry { display:block; padding:18px; }
  .family-entry .btn { width:100%; margin-top:14px; }
  .family-activity { padding:18px 12px; }
  .family-activity h1 { font-size:1.35rem; }
  .family-activity .instruction { font-size:.9rem; margin-bottom:12px; }
  .family-focus { min-width:0; width:100%; padding:0 16px; gap:20px; margin-bottom:14px; }
  .family-focus .family-character { font-size:4.4rem; }
  .family-focus .family-zhuyin { font-size:1.1rem; }
  .family-cards { grid-template-columns:1fr; gap:10px; }
  .family-card { display:grid; grid-template-columns:minmax(90px,.85fr) minmax(0,1.3fr); align-items:center; padding:7px; gap:7px; border-radius:14px; }
  .family-card img { aspect-ratio:4/3; }
  .family-card-text { padding:2px 0; gap:7px; }
  .family-character { font-size:2.1rem; }
  .family-zhuyin { font-size:.65rem; }
  .family-syllable { padding:2px 1px; border-radius:7px; }
  .family-card .family-audio-label { font-size:.75rem; }
  .family-actions { margin-top:18px; }
  .words-only .family-card { display:block; min-height:95px; }
  .words-only .family-character { font-size:2.8rem; }
  .family-activity .teacher-rating { grid-template-columns:1fr; }
}
@media(max-width:360px) {
  .family-character { font-size:1.8rem; }
  .family-zhuyin { font-size:.6rem; }
  .family-card { grid-template-columns:minmax(75px,.72fr) minmax(0,1.3fr); }
}