/* ==========================================================================
   玩法六 · 开口读词（read.js）
   录音按钮、实时波形、三条音频对比
   ========================================================================== */

/* 这几个容器自带 display，UA 的 [hidden]{display:none} 会被压过去，
   必须显式收口，否则 JS 里 hidden=true 根本藏不住 */
.rd-mic-zone[hidden],
.rd-fallback[hidden],
.rd-actions[hidden],
.rd-score[hidden] { display: none !important; }

/* ------------------------------ 词卡 ------------------------------ */
/* 喇叭按钮用绝对定位钉在右上角：它默认是 120~180px 的大圆（听音选图那边
   要的就是大），摆在这一行里会把单词挤到换行 —— 「morning」会被拆成
   「morn / ing」，那是真的难看。让它脱离文档流，单词就能用满整行宽度。 */
/* --rd-play 是喇叭按钮的边长，文字区按它算右侧避让。
   提成变量是为了让「按钮多大」和「让开多少」永远对得上 ——
   写死两个数字，改了一个忘了另一个，单词就会被压在按钮底下。 */
.rd-card { width: 100%; position: relative; --rd-play: clamp(46px, 12.5vw, 58px); }

.rd-word {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.rd-word__art {
  flex: 0 0 auto;
  width: clamp(76px, 21vw, 116px);
  display: grid;
  place-items: center;
}
.rd-word__art .wpic__art { width: 100%; }
.rd-word__art .wpic__zh { display: none; }

/* 喇叭浮在右上角，所以文字必须自己让出右边这一块，
   否则窄屏上的长词（afternoon）会一路顶到按钮底下 */
.rd-word__text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: calc(var(--rd-play) + 6px);
}

.rd-word__en {
  font-family: var(--f-en);
  font-size: clamp(28px, 8.2vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--c-ink);
  /* 单词是整体，不许从中间断开 */
  word-break: keep-all;
  hyphens: none;
}
.rd-word__ph { font-size: var(--t-md); color: var(--c-ink3); margin-top: 2px; }
.rd-word__zh { font-size: var(--t-md); color: var(--c-ink2); margin-top: var(--s-1); }

.rd-word__play {
  position: absolute;
  top: calc(var(--s-4) + 2px);
  right: var(--s-4);
  width: var(--rd-play);
  height: var(--rd-play);
  z-index: 1;
}

/* 录音时把单词遮住：避免孩子照着字母念，而不是看着词读 */
.rd-card.is-blind .rd-word__en { filter: blur(11px); user-select: none; }
.rd-card.is-blind .rd-word__ph { filter: blur(6px); }

/* ------------------------------ 录音区 ------------------------------ */
.rd-mic-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
}

.rd-mic {
  position: relative;
  width: clamp(118px, 30vw, 150px);
  height: clamp(118px, 30vw, 150px);
  border: 0;
  border-radius: 50%;
  background: var(--c-grad);
  color: #fff;
  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 14px 32px rgba(107, 69, 245, .32);
  transition: transform .14s var(--ease), box-shadow .2s var(--ease);
}
.rd-mic:active,
.rd-mic.is-on { transform: scale(.95); box-shadow: 0 8px 20px rgba(107, 69, 245, .4); }
.rd-mic[disabled] { opacity: .5; cursor: not-allowed; }

.rd-mic__label {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
}

/* 录音时向外扩散的脉冲环 */
.rd-mic__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid rgba(140, 107, 255, .55);
  opacity: 0;
  pointer-events: none;
}
.rd-mic.is-on .rd-mic__ring {
  opacity: 1;
  animation: rd-pulse 1.35s ease-out infinite;
}
.rd-mic.is-on .rd-mic__ring:nth-of-type(2) { animation-delay: .45s; }
.rd-mic.is-on .rd-mic__ring:nth-of-type(3) { animation-delay: .9s; }

@keyframes rd-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* ------------------------------ 实时波形 ------------------------------ */
.rd-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 42px;
  width: min(100%, 420px);
}
.rd-wave__bar {
  flex: 1 1 auto;
  max-width: 9px;
  min-height: 3px;
  border-radius: 999px;
  background: var(--c-line2);
  transition: height .07s linear, background .2s linear;
}
/* 还没开始录时把波形压暗：留着位置不跳版，但不抢注意力 */
.rd-wave:not(.is-live):not(.is-static) { opacity: .42; }
.rd-wave.is-live .rd-wave__bar { background: var(--c-purple-l); }

/* 回放录音时把包络铺成静态波形，方便和示范音对比 */
.rd-wave.is-static .rd-wave__bar { background: var(--c-ink4); }
.rd-wave.is-static.is-mine .rd-wave__bar { background: var(--c-purple-l); }

.rd-tip {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-ink3);
  text-align: center;
  min-height: 20px;
}
.rd-tip.is-warn { color: var(--c-red); font-weight: 700; }

/* ------------------------------ 结果区 ------------------------------ */
.rd-stars {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  font-size: var(--t-lg);
}

.rd-score {
  font-family: var(--f-num);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-purple);
}

.rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.rd-actions .btn { min-height: 44px; padding-inline: var(--s-4); }
.rd-actions .btn[disabled] { opacity: .45; }

/* 播放中的按钮：加个轻微的呼吸，明确「正在响」 */
.btn.is-playing { animation: rd-breathe .9s ease-in-out infinite; }
@keyframes rd-breathe {
  50% { filter: brightness(1.12); transform: translateY(-1px); }
}

/* ------------------------------ 降级：跟读 ------------------------------ */
.rd-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-warm);
  color: var(--c-warm-ink);
}
.rd-fallback__title { font-size: var(--t-md); font-weight: 700; }
.rd-fallback__sub { font-size: var(--t-sm); line-height: 1.6; opacity: .9; }
.rd-fallback .btn { min-height: 46px; }

/* ------------------------------ 窄屏 ------------------------------ */
/* 320 宽上「插画 + 单词 + 喇叭」三个都要塞进一行，只能各让一步：
   插画缩、字号降、喇叭小，任何一个不让，长词就会被压住或拆行 */
@media (max-width: 380px) {
  .rd-card { --rd-play: 44px; }
  .rd-word { gap: var(--s-3); }
  .rd-word__art { width: clamp(60px, 17vw, 116px); }
  .rd-word__en { font-size: clamp(26px, 8.6vw, 40px); }
  .rd-word__text { padding-right: calc(var(--rd-play) + 4px); }
  .rd-wave { height: 34px; }
}

/* 低动态偏好：脉冲环与呼吸都停掉，保留静态反馈 */
@media (prefers-reduced-motion: reduce) {
  .rd-mic.is-on .rd-mic__ring { animation: none; opacity: .55; }
  .btn.is-playing { animation: none; }
}