/* =========================================================
   古木长青 · 树上的彩蛋（访客层 / 连点摇树）
   口径：docs/产品文档/04-养成层-反馈与访客.md 第 11 章
   访客形象是实心色块内联 SVG（与树上虫子同口径：不描边、不引图标库）
   ========================================================= */

/* ---------- 访客层：整层不吃点击，只有 sprite 本体可点，不挡铭牌入口与虫子气泡 ---------- */
.tg-egg-layer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:4;overflow:visible}

/* 三种访客的站位钉在树身上（回落 PNG 阶段图时用；3D 在跑时由宿主投影定位）。
   离底 16% 起排是给左下角的铭牌入口（.tg-plaque-btn.base 占 bottom 6%~15%）让开，
   390 宽下铭牌往中线收（margin-left:-112px），站位再往下压就会被树牌盖住。 */
.tg-egg-slot{position:absolute;animation:tge-in .5s ease-out both}
.tg-egg-slot-base-left{bottom:16%;left:5%}
.tg-egg-slot-canopy-right{top:22%;right:12%}
.tg-egg-slot-air-top{top:7%;left:52%}

/* sprite 本体：可点、有按压反馈，动作循环挂在它身上（槽位不动，出场动画才不会被循环动画顶掉） */
.tg-egg{position:relative;display:block;width:46px;height:42px;padding:0;border:none;background:none;
  cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tg-egg svg{width:100%;height:100%;display:block;overflow:visible;
  /* 极淡的深色描边：八向 1px 硬投影叠出一圈轮廓（与树上虫子同一手法）。
     走 drop-shadow 而不是 stroke：身子由多个圆叠成，描边会在重叠处露出内部弧线 */
  filter:drop-shadow(0 1px 0 var(--egg-line)) drop-shadow(0 -1px 0 var(--egg-line)) drop-shadow(1px 0 0 var(--egg-line)) drop-shadow(-1px 0 0 var(--egg-line)) drop-shadow(.7px .7px 0 var(--egg-line)) drop-shadow(-.7px .7px 0 var(--egg-line)) drop-shadow(.7px -.7px 0 var(--egg-line)) drop-shadow(-.7px -.7px 0 var(--egg-line))}
.tg-egg{--egg-line:rgba(38,48,33,.5)}
.tg-egg:active{transform:scale(.9)}
.tg-egg-s-sparrow{width:42px;height:38px}
.tg-egg-s-butterfly{width:44px;height:38px}

/* 一只只的动法：兔子蹦、麻雀点头、蝴蝶扇翅 */
.tg-egg-k-hop{animation:tge-hop 1.5s ease-in-out infinite}
.tg-egg-k-perch{animation:tge-perch 2s ease-in-out infinite}
.tg-egg-k-float{animation:tge-float 3.4s ease-in-out infinite}
.tg-egg-wing{transform-origin:50% 78%;animation:tge-flap .34s ease-in-out infinite}

/* 离场：自己出画，不是原地缩小。--out 由脚本按它站的半边给（±一个屏宽），
   每只沿用自己站着时那套动法：兔子一窜一窜蹦走、麻雀扑两下往上飞走、蝴蝶飘出去。
   透明度只在最后一段才掉，落点已经在画框外，看不到「半透明地在树中间淡掉」。 */
.tg-egg-slot.tge-leaving{pointer-events:none}
.tg-egg-slot.tge-leaving .tg-egg{pointer-events:none}
.tg-egg-slot.tge-leave-hop{animation:tge-out-hop 1.15s ease-in-out forwards}
.tg-egg-slot.tge-leave-perch{animation:tge-out-fly 1.05s ease-in forwards}
.tg-egg-slot.tge-leave-float{animation:tge-out-float 1.35s ease-in-out forwards}

@keyframes tge-in{0%{opacity:0;transform:translateY(8px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes tge-out-hop{
  0%{transform:translate(0,0) scaleY(1)}
  12%{transform:translate(calc(var(--out)*.05),0) scaleY(.85)}
  34%{transform:translate(calc(var(--out)*.18),-14px) scaleY(1.1)}
  52%{transform:translate(calc(var(--out)*.32),0) scaleY(.9)}
  66%{transform:translate(calc(var(--out)*.46),-11px) scaleY(1.06)}
  82%{transform:translate(calc(var(--out)*.7),0) scaleY(.92);opacity:1}
  94%{transform:translate(calc(var(--out)*.88),-8px) scaleY(1.05)}
  100%{transform:translate(var(--out),0) scaleY(1);opacity:0}
}
@keyframes tge-out-fly{
  0%{transform:translate(0,0) rotate(0deg)}
  16%{transform:translate(calc(var(--out)*.06),-8px) rotate(-5deg);opacity:1}
  44%{transform:translate(calc(var(--out)*.3),-26px) rotate(4deg)}
  72%{transform:translate(calc(var(--out)*.6),-46px) rotate(-4deg);opacity:1}
  100%{transform:translate(var(--out),-76px) rotate(5deg);opacity:0}
}
@keyframes tge-out-float{
  0%{transform:translate(0,0) rotate(0deg)}
  18%{transform:translate(calc(var(--out)*.12),-10px) rotate(-8deg);opacity:1}
  38%{transform:translate(calc(var(--out)*.26),6px) rotate(7deg)}
  58%{transform:translate(calc(var(--out)*.46),-14px) rotate(-6deg);opacity:1}
  78%{transform:translate(calc(var(--out)*.7),5px) rotate(5deg)}
  100%{transform:translate(var(--out),-6px) rotate(0deg);opacity:0}
}
@keyframes tge-hop{
  0%,100%{transform:translate(0,0)}
  18%{transform:translate(2px,-9px)}
  34%{transform:translate(5px,0)}
  52%{transform:translate(6px,-6px)}
  70%{transform:translate(9px,0)}
}
@keyframes tge-perch{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  22%{transform:translate(0,-3px) rotate(-4deg)}
  44%{transform:translate(0,0) rotate(3deg)}
}
@keyframes tge-float{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(10px,-8px)}
  50%{transform:translate(-6px,-14px)}
  75%{transform:translate(-12px,-4px)}
}
@keyframes tge-flap{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.42)}
}

/* 蝴蝶扇翅只动两片翅膀分组 */

/* ---------- 连点摇树：每点一次挤一下，满 2 下摇落叶子 ---------- */
.tg-tree-wrap.tge-squeeze img{animation:tge-squeeze .34s ease-out}
@keyframes tge-squeeze{
  0%{transform:scale(1,1)}
  35%{transform:scale(1.05,.94)}
  70%{transform:scale(.97,1.03)}
  100%{transform:scale(1,1)}
}
.tge-leaf{position:absolute;top:-6%;width:9px;height:9px;border-radius:0 60% 0 60%;
  background:#c8a25a;pointer-events:none;animation:tge-leaf-fall 1.5s linear forwards}
.tge-leaf.b{background:#8aa074;border-radius:60% 0 60% 0}
@keyframes tge-leaf-fall{
  0%{opacity:0;transform:translate(0,0) rotate(0deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx,18px),320px) rotate(300deg)}
}

/* ---------- 访客弹窗卡片：图 + 一句话，答题时接选项 ---------- */
.tge-card-top{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0 10px}
.tge-card-art{width:74px;height:68px}
/* 卡片里的迷你 3D 舞台：iframe 就绪前显示兜底 SVG，就绪后交叉淡入换过来；
   起不来（没 WebGL / 脚本挂了 / 超时）就一直留着 SVG，不留空白方块。口径见 04 档 11.8。 */
.tge-card-stage{position:relative;width:74px;height:68px;flex:0 0 auto}
.tge-card-stage .tge-stage-frame{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:transparent;opacity:0;transition:opacity .18s;pointer-events:none}
.tge-card-stage .tge-stage-fallback{width:100%;height:100%;transition:opacity .18s}
.tge-card-stage.tge-stage-on .tge-stage-frame{opacity:1}
.tge-card-stage.tge-stage-on .tge-stage-fallback{opacity:0}
/* 弹窗里的同一枚 SVG：白底上浅色（兔子）会发虚，套一圈轮廓（比树上的淡一档） */
.tge-card-art svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 1px 0 rgba(38,48,33,.3)) drop-shadow(0 -1px 0 rgba(38,48,33,.3)) drop-shadow(1px 0 0 rgba(38,48,33,.3)) drop-shadow(-1px 0 0 rgba(38,48,33,.3))}
.tge-card-text{font-size:14px;color:var(--ink-2);line-height:1.5;text-align:center}
.tge-q-tag{display:inline-block;margin-top:8px;font-size:12px;color:var(--ink-3)}
.tge-verdict{display:inline-block;padding:2px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.7}
.tge-verdict.ok{background:rgba(90,140,90,.15);color:#4c7a4c}
.tge-verdict.no{background:rgba(200,110,90,.15);color:#b05a45}
.tge-quiz-reward{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:3px 10px;border-radius:999px;
  background:rgba(240,180,60,.14);color:#9a6f18;font-size:12px;line-height:1.6}
.tge-quiz-reward svg{width:13px;height:13px;display:block}
.tge-quiz-reward b{font-size:14px;color:#c07d12}
.tge-opts{display:flex;flex-direction:column;gap:8px;margin:12px 0 2px;text-align:left}
.tge-opt{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(44,62,45,.14);background:var(--paper,#fafaf7);font:inherit;font-size:14px;
  color:var(--ink);cursor:pointer;transition:.14s}
.tge-opt:hover{border-color:var(--accent);background:rgba(90,122,92,.06)}
.tge-opt:active{transform:scale(.98)}
.tge-opt .tge-opt-dot{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(44,62,45,.28)}
.tge-opt.sel{border-color:var(--accent);background:var(--accent-bg,rgba(90,122,92,.1))}
.tge-opt.sel .tge-opt-dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.tge-answer{margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:rgba(44,62,45,.06);
  font-size:13px;line-height:1.55;color:var(--ink-2);text-align:left}
.tge-answer b{color:var(--ink)}

/* ---------- 摇树结果卡：掉东西的惊喜卡 / 没掉东西的安静卡 ---------- */
.tge-prize{position:relative;padding:8px 0 4px;overflow:hidden}
.tge-prize-rays{position:absolute;left:50%;top:52px;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 11deg,rgba(240,186,90,.22) 11deg 17deg,transparent 17deg 43deg,
    rgba(240,186,90,.16) 43deg 49deg,transparent 49deg 75deg,rgba(240,186,90,.22) 75deg 81deg,transparent 81deg 107deg,
    rgba(240,186,90,.16) 107deg 113deg,transparent 113deg 139deg,rgba(240,186,90,.2) 139deg 145deg,transparent 145deg 180deg);
  animation:tge-rays-spin 20s linear infinite}
@keyframes tge-rays-spin{to{transform:rotate(360deg)}}
.tge-prize-icon{position:relative;width:96px;height:96px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#fff8e4,#fbe9bf 72%);box-shadow:0 8px 22px rgba(217,150,40,.22);
  animation:tge-prize-pop .55s cubic-bezier(.18,1.5,.42,1) both}
.tge-prize.is-fruit .tge-prize-icon{background:radial-gradient(circle at 50% 42%,#fff2ee,#fbdfd6 72%);box-shadow:0 8px 22px rgba(217,85,63,.2)}
.tge-prize-icon svg{width:62px;height:62px;display:block}
/* 头部换成卡片里那只还在动的 3D 小动物（点它、答对题两张）：只留动物本体，不垫圆盘也不打光 */
.tge-prize-stage{position:relative;width:126px;height:116px;margin:0 auto 12px;display:flex;align-items:flex-end;justify-content:center;
  animation:tge-prize-pop .55s cubic-bezier(.18,1.5,.42,1) both}
.tge-prize-stage .tge-card-stage{width:106px;height:98px}
.tge-prize .tge-verdict{position:relative;margin:0 0 6px}
@keyframes tge-prize-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.06) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.tge-prize-kicker{position:relative;font-size:11px;letter-spacing:.08em;color:var(--ink-4);margin-bottom:4px}
.tge-prize-title{position:relative;font-size:20px;font-weight:700;color:var(--ink);line-height:1.3}
.tge-prize-sub{position:relative;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.tge-spark{position:absolute;width:7px;height:7px;border-radius:1.6px;background:#f4c95d;transform:rotate(45deg);opacity:0;
  animation:tge-spark-twinkle 1.9s ease-in-out infinite}
.tge-spark.s1{left:21%;top:24px}
.tge-spark.s2{right:19%;top:46px;animation-delay:.45s;background:#e8a63c}
.tge-spark.s3{left:15%;bottom:30px;animation-delay:.9s;background:#f0d38a}
.tge-spark.s4{right:23%;bottom:20px;animation-delay:1.3s}
@keyframes tge-spark-twinkle{0%,100%{opacity:0;transform:rotate(45deg) scale(.4)}45%{opacity:.95;transform:rotate(45deg) scale(1)}}
.tge-claim-btn{position:relative;overflow:hidden}
.tge-claim-btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);
  transform:translateX(-130%);animation:tge-claim-sheen 2.8s ease-in-out infinite}
@keyframes tge-claim-sheen{0%,58%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
.tge-plain{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 2px}
.tge-plain-icon{width:64px;height:64px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center}
.tge-plain-icon svg{width:34px;height:34px}
.tge-plain-text{font-size:14px;color:var(--ink-2);line-height:1.5;text-align:center}

/* ---------- 领取后：光点从四周收进树里 ---------- */
.tge-gather{position:fixed;width:0;height:0;pointer-events:none;z-index:1200;
  --c1:#fff3c9;--c2:#f3c34e;--c3:#e0a52c;--glow:rgba(243,195,78,.55);--ring:rgba(243,195,78,.85)}
.tge-gather.is-fruit{--c1:#ffe6dd;--c2:#e2664f;--c3:#c94b38;--glow:rgba(226,102,79,.5);--ring:rgba(226,102,79,.8)}
.tge-gather-dot{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--c1),var(--c2) 62%,var(--c3));
  box-shadow:0 0 8px var(--ring);opacity:0;
  animation:tge-gather-fly .8s cubic-bezier(.35,.05,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes tge-gather-fly{
  0%{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(1.3)}
  18%{opacity:1}
  80%{opacity:.9}
  100%{opacity:0;transform:translate(0,0) scale(.16)}
}
.tge-gather-ring{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:2px solid var(--ring);opacity:0;animation:tge-gather-ring .9s ease-out .56s forwards}
@keyframes tge-gather-ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
.tge-gather-flash{position:absolute;left:0;top:0;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),rgba(255,255,255,0) 70%);opacity:0;
  animation:tge-gather-flash .8s ease-out .5s forwards}
@keyframes tge-gather-flash{0%{opacity:0;transform:scale(.5)}35%{opacity:.85}100%{opacity:0;transform:scale(1.15)}}

/* ---------- 降低动效偏好：留形状不留循环 ---------- */
@media (prefers-reduced-motion:reduce){
  .tg-egg-slot,.tg-egg,.tg-egg-wing,.tg-egg-slot.tge-leave-hop,.tg-egg-slot.tge-leave-perch,.tg-egg-slot.tge-leave-float,.tg-tree-wrap.tge-squeeze img,.tge-leaf{animation:none}
  .tge-prize-rays,.tge-prize-icon,.tge-prize-stage,.tge-spark,.tge-claim-btn::after{animation:none}
  .tge-spark{opacity:.7}
  .tge-gather-dot,.tge-gather-ring,.tge-gather-flash{animation:none}
}