/* ============================================================================
   词老大英语 · 单元页（36.html）外星人陪练挂件
   ----------------------------------------------------------------------------
   移植自 grammars/train.html 同款角色与彩蛋：
   常态浮动 + 眨眼 / 答对竖大拇指 / 答错握拳鼓劲 / 戳一戳害羞 /
   天线调大小（localStorage 记忆）/ 久坐委屈哭泣 / 破涕为笑。

   纯视觉层 + 自包含交互，不触碰页面任何既有 JS 与 DOM。

   与 grammars 版的差异（本页适配）：
   1. 徽标配色从紫色塑料改为本站品牌绿塑料，与皮克斯主题统一；
   2. 尺寸断点按本页 940px 居中卡片重排：宽屏放卡片右侧留白，
      视口收窄逐级缩小，避免压住卡片内容；
   3. 微信小程序底部导航（.sidebar 62px / ≤480px 58px）存在时整体上移让位。
   ========================================================================== */

@keyframes botBob{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(0,-7px,0) scale(1.008);}
}
/* 眨眼：闭眼帧交叉淡入再淡出，睁四五秒再连眨两下 */
@keyframes alBlink{
  0%,86.4%{opacity:0;}
  87.2%,89.2%{opacity:1;}
  90.2%{opacity:0;}
  92.6%,93.6%{opacity:1;}
  94.8%,100%{opacity:0;}
}
/* 镜像：脸朝左，正好望向卡片里的单词，像在陪你记单词。
   pointer-events:none 保证永不挡点击；层级低于所有弹层
   （练习抽屉 9990/9991、toast 9990、广告浮层 999999999、底部导航 1000）。 */
.buddy{
  position:fixed;right:16px;bottom:18px;z-index:40;
  width:150px;pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(16,74,63,.22));
  transform-origin:50% 100%;
  animation:botBob 7s ease-in-out infinite alternate;
  will-change:transform;
}
.buddy img{display:block;width:100%;height:auto;transform:scaleX(-1);}
.buddy img.buddy__shut{position:absolute;inset:0;width:100%;opacity:0;animation:alBlink 4.4s linear infinite;}
/* 答题反应帧：答对竖大拇指、答错握拳鼓劲。
   反应帧显示期间必须把常态帧整个藏掉（透明底叠加会变"四条胳膊"），
   切换靠 botPop 弹跳掩盖硬切。 */
.buddy img.buddy__thumb,.buddy img.buddy__cheer{
  position:absolute;inset:0;width:100%;opacity:0;
}
.buddy--ok .buddy__base,.buddy--no .buddy__base{opacity:0;}
.buddy--ok img.buddy__shut,.buddy--no img.buddy__shut{animation:none;opacity:0;}
.buddy--ok img.buddy__thumb{opacity:1;animation:botPop .6s cubic-bezier(.34,1.56,.64,1);}
.buddy--no img.buddy__cheer{opacity:1;animation:botPop .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes botPop{
  0%{transform:scaleX(-1) scale(1);}
  45%{transform:scaleX(-1) scale(1.1) translateY(-7px);}
  100%{transform:scaleX(-1) scale(1);}
}

/* 视口收窄逐级缩小：本页卡片 max-width 940px 居中，
   ≥1261px 时卡片两侧留白 ≥160px，150px 挂件完整落在留白里；
   再往下就不可避免压卡片边缘，只能缩小 + 微降不透明度。 */
@media (max-width:1260px){.buddy{width:104px;right:10px;bottom:14px;}}
@media (max-width:1100px){.buddy{width:88px;right:8px;opacity:.96;}}
@media (max-width:767px){
  .buddy{width:76px;right:8px;bottom:12px;opacity:.94;}
}
@media (max-width:480px){
  .buddy{width:64px;right:6px;bottom:10px;}
}
@media (max-height:560px){.buddy{width:64px;bottom:6px;}}
/* 微信小程序：底部导航条(62px / ≤480px 58px) + 安全区，整体上移让位 */
body.is-wechat-mini-program .buddy{
  bottom:calc(70px + env(safe-area-inset-bottom, 0px));
}
@media (max-width:480px){
  body.is-wechat-mini-program .buddy{
    bottom:calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion:reduce){.buddy,.buddy__shut{animation:none;}}

/* --- 外星人彩蛋：戳一戳会害羞；两根天线 = 左变大 / 右变小 ---
   角色图是 scaleX(-1) 镜像的，热点按「屏幕位置」摆放：
   屏幕左天线 → 变大，屏幕右天线 → 变小；悬停天线浮出 +/− 小徽标。 */
.buddy__stage{
  position:relative;width:100%;
  transform-origin:100% 100%;
  transform:scale(var(--bscale,1));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.buddy__tap{
  position:absolute;inset:0;z-index:5;pointer-events:auto;
  background:transparent;border:none;padding:0;border-radius:30%;
  cursor:grab;-webkit-tap-highlight-color:transparent;touch-action:none;
}
/* 拖动中：停掉浮动/委屈抖动，整体「提起来」一点，指针换成抓手；
   z-index 抬 1 级，保证拖过卡片边缘时仍然在自己这一层之上。 */
.buddy--dragging{animation:none;z-index:41;filter:drop-shadow(0 18px 30px rgba(16,74,63,.34));}
.buddy--dragging .buddy__tap{cursor:grabbing;}
.buddy--dragging .buddy__stage{
  animation:none;
  transition:none;
  transform:scale(calc(var(--bscale,1) * 1.04));
}
@media (prefers-reduced-motion:reduce){
  .buddy--dragging .buddy__stage{transform:scale(var(--bscale,1));}
}
/* 首次「按住我能拖走」提示气泡（只出现一次，JS 动态创建） */
.buddy__tip{
  position:absolute;z-index:9;right:2%;top:-16%;pointer-events:none;
  font-size:12px;font-weight:800;line-height:1.3;color:#25455e;white-space:nowrap;
  background:#fff;border-radius:12px 12px 3px 12px;padding:4px 9px;
  box-shadow:0 2px 0 rgba(16,74,63,.08),inset 0 0 0 1px rgba(40,151,126,.22);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;
}
.buddy__tip.show{opacity:1;transform:translateY(0);}
.buddy__tap:focus-visible{outline:3px solid #1b7261;outline-offset:2px;}
.buddy__ant{
  position:absolute;z-index:6;pointer-events:auto;
  width:34px;height:34px;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.buddy__ant i{
  font-style:normal;font-family:'Baloo 2','PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:900;line-height:1;
  width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  /* 品牌绿塑料（对齐本页 pixar.css 的 --px-brand 色阶） */
  background:linear-gradient(180deg,#46bd9f 0%,#28977e 54%,#1b7261 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(8,60,48,.34),
             0 3px 0 #14554a,0 10px 18px -9px rgba(40,151,126,.55);
  opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s;
}
.buddy__ant:hover i,.buddy__ant:focus-visible i{opacity:1;transform:scale(1);}
.buddy__ant--big{left:25%;top:4%;}
.buddy__ant--small{left:80%;top:5%;}
/* 开局提示：徽标自己浮出一次，告诉孩子天线能点 */
.buddy__ant--hint i{animation:antHint 2.4s ease-in-out 1;}
@keyframes antHint{0%,100%{opacity:0;transform:scale(.5);}15%,45%{opacity:1;transform:scale(1);}60%,85%{opacity:.9;transform:scale(.92);}}
/* 害羞：闭眼别开脸 + 腮红 + 冒小心心 */
.buddy__blush{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;}
.buddy__blush::before,.buddy__blush::after{
  content:"";position:absolute;width:18%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,110,145,.8),rgba(255,110,145,0));
}
.buddy__blush::before{left:58%;top:49%;}
.buddy__blush::after{left:8%;top:46%;}
.buddy__hearts{position:absolute;inset:0;z-index:7;pointer-events:none;}
.buddy__hearts i{
  position:absolute;font-style:normal;color:#ff7d9e;opacity:0;
  text-shadow:0 2px 6px rgba(255,120,150,.45);
}
.buddy__hearts i::before{content:"♥";}
.buddy__hearts i:nth-child(1){left:10%;top:58%;font-size:15px;}
.buddy__hearts i:nth-child(2){left:46%;top:64%;font-size:12px;}
.buddy__hearts i:nth-child(3){left:76%;top:54%;font-size:17px;}
.buddy--shy .buddy__blush{opacity:1;}
.buddy--shy img.buddy__shut{opacity:1;animation:none;}
.buddy--shy .buddy__stage{animation:shyDodge .55s cubic-bezier(.34,1.56,.64,1);}
.buddy--shy .buddy__hearts i{animation:shyHeart 1.4s ease-out forwards;}
.buddy--shy .buddy__hearts i:nth-child(2){animation-delay:.18s;}
.buddy--shy .buddy__hearts i:nth-child(3){animation-delay:.36s;}
@keyframes shyDodge{
  0%{transform:scale(var(--bscale,1)) rotate(0);}
  35%{transform:scale(calc(var(--bscale,1)*.95)) translateX(-7px) rotate(-7deg);}
  70%{transform:scale(calc(var(--bscale,1)*.97)) translateX(-4px) rotate(-4deg);}
  100%{transform:scale(var(--bscale,1)) rotate(0);}
}
@keyframes shyHeart{
  0%{opacity:0;transform:translateY(8px) scale(.4);}
  25%{opacity:1;}
  100%{opacity:0;transform:translateY(-36px) scale(1.15) rotate(10deg);}
}
/* 委屈：两分钟没被理，外星人瘪嘴含泪 + 轻微抽泣抖动 + 「呜…」气泡
   sad 帧插在 shut 之后、thumb/cheer 之前——答题的大拇指/鼓劲帧永远画在它上面，
   委屈归委屈，答题反馈不能被盖住。 */
.buddy__sad{position:absolute;inset:0;width:100%;opacity:0;}
.buddy--sad .buddy__base{opacity:0;}
.buddy--sad .buddy__sad{opacity:1;}
.buddy--sad img.buddy__shut{animation:none;opacity:0;}
.buddy--sad .buddy__stage{animation:sadQuiver 1.6s ease-in-out infinite;}
@keyframes sadQuiver{
  0%,100%{transform:scale(var(--bscale,1)) rotate(0);}
  30%{transform:scale(calc(var(--bscale,1)*.985)) rotate(-1.6deg);}
  60%{transform:scale(calc(var(--bscale,1)*.99)) rotate(1.2deg);}
}
.buddy__sob{
  position:absolute;z-index:8;left:-16%;top:-7%;pointer-events:none;
  font-size:12px;font-weight:900;color:#3c5f77;
  background:#fff;border-radius:12px 12px 12px 3px;padding:4px 9px;
  box-shadow:0 2px 0 rgba(16,74,63,.08),inset 0 0 0 1px rgba(40,151,126,.2);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;
  white-space:nowrap;
}
.buddy--sad .buddy__sob{opacity:1;transform:translateY(0);}
/* 破涕为笑：点一下哭泣的外星人，鼓劲帧 + 小心心 */
.buddy--happy .buddy__base{opacity:0;}
.buddy--happy img.buddy__shut{animation:none;opacity:0;}
.buddy--happy img.buddy__cheer{opacity:1;animation:botPop .6s cubic-bezier(.34,1.56,.64,1);}
.buddy--happy .buddy__hearts i{animation:shyHeart 1.4s ease-out forwards;}
.buddy--happy .buddy__hearts i:nth-child(2){animation-delay:.15s;}
.buddy--happy .buddy__hearts i:nth-child(3){animation-delay:.3s;}
@media (prefers-reduced-motion:reduce){
  .buddy__stage,.buddy__hearts i{animation:none !important;transition:none !important;}
  .buddy--shy .buddy__hearts i,.buddy--happy .buddy__hearts i{opacity:1;}
}