/* ===== Unicorn Rainbow Mandarin =====
   Loaded after Rainbow Reading's style.css (buttons, cards, sky, settings); this adds the Mandarin parts. */

:root {
  --zh-font: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  --py-font: 'Andika', 'Century Gothic', system-ui, sans-serif;
  --list: #ff5e7e;
}

.zh { font-family: var(--zh-font); font-weight: 700; }
.greeting .zh { margin-right: 4px; color: #d6336c; }

/* ---------- Cards ---------- */
.zh-card { gap: 4px; }
.zh-big {
  font-family: var(--zh-font);
  font-weight: 500;
  font-size: clamp(4.4rem, 22vw, 8.5rem);
  line-height: 1.05;
  color: var(--ink);
  text-align: center;
}
.zh-big:empty, .zh-py:empty, .zh-meaning:empty { display: none; }
.zh-py { font-family: var(--py-font); font-weight: 700; font-size: clamp(1.7rem, 7vw, 2.6rem); color: #d6336c; letter-spacing: .02em; }
.zh-meaning { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.zh-meaning .num { font-family: var(--py-font); font-weight: 700; font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1; color: var(--purple-dark); }
.zh-meaning .pic { font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1; }
.zh-meaning .en { font-family: var(--py-font); font-weight: 700; font-size: clamp(1.4rem, 5.5vw, 2rem); color: var(--purple-dark); }

/* A flipped Look question shows the meaning big, and asks for the characters */
.prompt-card { min-height: clamp(150px, 26vh, 240px); }
.prompt-card.flipped .zh-meaning { margin-top: 0; }
.prompt-card.flipped .num { font-size: clamp(4rem, 18vw, 6rem); }
.prompt-card.flipped .pic { font-size: clamp(3.4rem, 14vw, 4.6rem); }
.prompt-card.flipped .en { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.prompt-hear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: #e7f5ff;
  font-size: 1.5rem;
  box-shadow: 0 4px 0 #a5d8ff;
}
.prompt-hear:active { transform: translateY(3px); box-shadow: 0 1px 0 #a5d8ff; }

/* Dots to count, in rows of five */
.num-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 114px; }
.num-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--list); }

/* ---------- Learn ---------- */
.hear-btn { background: linear-gradient(180deg, #74c0fc, #4dabf7); box-shadow: 0 7px 0 #1c7ed6, 0 12px 24px rgba(28, 126, 214, .4); }
.hear-btn:active { box-shadow: 0 2px 0 #1c7ed6; }
.hear-btn.speaking { animation: pulse .8s ease-in-out infinite; }
#learn-status { font-size: clamp(1.05rem, 4vw, 1.3rem); }
.status .heard .zh { font-size: 1.1em; }

/* ---------- Choices ---------- */
.word-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  min-height: 104px;
}
.word-choice .num { font-family: var(--py-font); font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1; }
.word-choice .pic { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1; }
.word-choice .en { font-size: clamp(1.1rem, 4.4vw, 1.5rem); line-height: 1.1; }
.word-choice .zh { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.15; }
.word-choice .py { font-family: var(--py-font); font-size: clamp(1rem, 4vw, 1.3rem); color: #d6336c; }

/* ---------- Topics & summary ---------- */
.topics { max-width: 560px; }
.list-btn .lsample.zh { font-family: var(--zh-font); font-size: 1.3rem; }
.zh-chip { font-family: var(--py-font); }
.zh-chip .zh { font-size: 1.2rem; }
.zh-chip small { font-size: .85rem; font-weight: 600; opacity: .85; }

@media (max-height: 640px) {
  .zh-big { font-size: 4rem; }
  .word-choice { min-height: 84px; }
}