/* ===========================================================
   animations.css —— 史莱姆弹跳 / 粒子特效 / 宝箱飞行 / 光晕
   =========================================================== */

/* ---- 史莱姆基础 ---- */
.slime{
  position:absolute; width:88px; height:88px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  cursor:grab; will-change:transform;
  transition:filter .2s;
  z-index:10;
}
.slime.falling{ animation:slimeFall 2.2s cubic-bezier(.34,1.2,.64,1) forwards; }
.slime.captured{ animation:slimeCapture .5s ease-in forwards; pointer-events:none; }
.slime .word{
  position:absolute; left:50%; top:100%; transform:translate(-50%, 6px);
  font-family:var(--font-en); font-weight:bold; color:#222;
  font-size:42px; text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 0 4px #fff, 0 2px 6px rgba(0,0,0,.15);
  pointer-events:none; white-space:nowrap;
  /* 宽度自适应内容，超长词通过 transform 整体缩小避免溢出 */
  width:max-content; max-width:220px;
}
/* 长单词整体微缩（仍保持放大效果） */
.slime.long .word{ transform:translate(-50%, 6px) scale(0.8); }
.slime.xlong .word{ transform:translate(-50%, 6px) scale(0.6); }

@keyframes slimeFall{
  0%{ transform:translateY(-120px); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes slimeCapture{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(.2) translateY(-20px); opacity:0; }
}

/* 弹跳挤压（状态机用 JS 加 class） */
.slime.crouch{ animation:crouch .3s ease forwards; }
@keyframes crouch{ 0%{ transform:scaleY(1) scaleX(1);} 100%{ transform:scaleY(.7) scaleX(1.25);} }
.slime.jump{ animation:jumpArc 1.5s ease-in-out; }
@keyframes jumpArc{
  0%{ transform:translateY(0) scaleY(.8) scaleX(1.2); }
  25%{ transform:translateY(-40px) scaleY(1.15) scaleX(.9); }
  50%{ transform:translateY(-55px) scaleY(1.1) scaleX(.95); }
  75%{ transform:translateY(-30px) scaleY(1.1) scaleX(.95); }
  100%{ transform:translateY(0) scaleY(1) scaleX(1); }
}

/* ---- 木箱 ---- */
.box{
  position:relative; width:92px; height:74px; flex:0 0 auto;
  background:url('../assets/box.png') center/contain no-repeat;
  cursor:grab; touch-action:none; z-index:50;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s;
}
.box.dragging{ z-index:90; transform:scale(1.08); cursor:grabbing; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.box .box-text{
  font-family:var(--font-cn); font-size:26px; font-weight:bold; color:#5a3a1a;
  text-align:center; width:120px; line-height:1.1;
  position:absolute; top:100%; left:50%; transform:translate(-50%, 4px);
  pointer-events:none; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 0 3px rgba(255,255,255,.5);
}
.box.shatter{ animation:boxShatter .45s ease-in forwards; pointer-events:none; }
@keyframes boxShatter{
  0%{ transform:scale(1); opacity:1; }
  40%{ transform:scale(1.2) rotate(8deg); }
  100%{ transform:scale(.3) rotate(30deg); opacity:0; }
}

/* ---- 宝箱（捕获后转化） ---- */
.chest-drop{
  position:absolute; width:80px; height:80px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  z-index:200; cursor:pointer;
  animation:chestDrop .6s cubic-bezier(.34,1.4,.64,1);
}
@keyframes chestDrop{
  0%{ transform:translateY(-40px) scale(.5); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
.chest-drop.collected{ animation:chestCollect .4s ease-in forwards; }
@keyframes chestCollect{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(.3) translateY(20px); opacity:0; }
}

/* ---- 粒子 ---- */
.particle{
  position:absolute; width:8px; height:8px; border-radius:50%;
  pointer-events:none; z-index:250;
}
.sparkle{ background:radial-gradient(circle,#fff,#ffe27a); box-shadow:0 0 8px #ffe27a; }
.shard{ border-radius:2px; background:#b8860b; }
.rainbow{
  background:conic-gradient(#ff5b5b,#ffd84d,#7ed957,#5b8def,#b06bff,#ff5b5b);
  border-radius:50%;
}

/* 彩虹皇冠（融合/胜利） */
.crown{
  position:absolute; width:120px; height:80px; z-index:260; pointer-events:none;
  background:url('') center/contain no-repeat;
  animation:crownRise 1.5s ease-out forwards;
}
@keyframes crownRise{
  0%{ transform:translateY(40px) scale(.3) rotate(-20deg); opacity:0; }
  60%{ transform:translateY(-10px) scale(1.15) rotate(5deg); opacity:1; }
  100%{ transform:translateY(-30px) scale(1) rotate(0); opacity:0; }
}

/* 融合呼吸光晕 */
.fuse-glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:240;
  background:radial-gradient(circle, rgba(255,255,200,.7), rgba(255,200,80,0));
  animation:fuseGlow 5s ease-in-out forwards;
}
@keyframes fuseGlow{
  0%,100%{ transform:scale(1); opacity:.4; }
  50%{ transform:scale(1.3); opacity:.85; }
}

/* 国王呼吸起伏 */
#king-img{
  animation:kingBreath 2.8s ease-in-out infinite;
}
@keyframes kingBreath{
  0%,100%{ transform:scaleY(1) scaleX(1); }
  35%{ transform:scaleY(1.03) scaleX(0.98); }
  50%{ transform:scaleY(1.05) scaleX(0.97); }
  70%{ transform:scaleY(1.02) scaleX(0.99); }
}

/* 树枝断裂效果 */
.branch-snap{
  position:absolute; width:60px; height:60px; pointer-events:none; z-index:245;
  animation:branchSnap .5s ease-in forwards;
}
@keyframes branchSnap{
  0%{ transform:rotate(0) scale(1); opacity:1; }
  100%{ transform:rotate(60deg) translate(20px,30px) scale(.6); opacity:0; }
}

/* ---- 文字气泡（国王头顶） ---- */
.bubble{
  position:absolute; z-index:70; background:#fff; border-radius:14px;
  padding:8px 14px; font-family:var(--font-en); font-size:18px; color:#333;
  box-shadow:0 3px 8px rgba(0,0,0,.2); pointer-events:none;
  animation:bubblePop 2.4s ease forwards; white-space:nowrap;
}
.bubble.punct{ font-family:var(--font-cn); color:#aaa; }
@keyframes bubblePop{
  0%{ transform:translateY(10px) scale(.6); opacity:0; }
  15%{ transform:translateY(-4px) scale(1.1); opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(-20px) scale(.9); opacity:0; }
}
.bubble::after{
  content:''; position:absolute; bottom:-8px; left:30px;
  border:8px solid transparent; border-top-color:#fff; border-bottom:0;
}

/* ---- 超级宝箱呼吸光效 ---- */
.super-aura{
  position:absolute; inset:-12px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(255,215,0,.5), rgba(255,215,0,0));
  animation:superAura 1.5s ease-in-out infinite;
}
@keyframes superAura{
  0%,100%{ transform:scale(1); opacity:.5; }
  50%{ transform:scale(1.15); opacity:.9; }
}