/* ------------------------------
   全局样式
------------------------------ */
body {
  font-family: "Microsoft YaHei", sans-serif;
  background: #fff7e6;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* ------------------------------
   舞台
------------------------------ */
.stage {
  position: relative;
  width: 90%;           /* 自适应宽度 */
  max-width: 600px;     /* PC端最大宽度 */
  height: 320px;
  margin: 30px auto;
}

/* ------------------------------
   🐱 小猫
------------------------------ */
.cat {
  width: 140px;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 3;
  transition: transform 0.25s ease;
}

.cat img {
  width: 100%;
  display: block;
}

.cat.tilt-left { transform: translateX(-50%) rotate(-12deg); }
.cat.tilt-right { transform: translateX(-50%) rotate(12deg); }

.cat.happy {
  animation: happyJump 0.5s ease;
}

@keyframes happyJump {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-14px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* ------------------------------
   🐾 爪子
------------------------------ */
.paw {
  position: absolute;
  font-size: 50px;
  opacity: 0;
  transition: opacity 0.3s, left 0.2s;
  z-index: 4;
}

.paw.show {
  opacity: 1;
  animation: swing 0.6s ease-in-out infinite alternate; /* 加上 ease-in-out */
}

@keyframes swing {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(-10deg); }
}

/* ------------------------------
   左右物品
------------------------------ */
.item {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 60px;
  font-size: 60px;
  transition: left 0.5s, right 0.5s, bottom 0.5s;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* PC端固定像素间距 */
#left { left: 120px; }
#right { right: 120px; }

/* ------------------------------
   🍽️ 食物奖励
------------------------------ */
.food {
  position: absolute;
  font-size: 42px;
  left: 50%;
  bottom: 150px;
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  transition: all 0.5s ease;
  pointer-events: none;
  z-index: 5;
}

/* 奖励食物动画结束后通过 transitionend 控制恢复状态 */
.food.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition: all 0.5s ease; /* 保留 */
}
.food.eat { bottom: 200px; transform: scale(0); opacity: 0; }

/* ------------------------------
   按钮
------------------------------ */
button {
  font-size: 22px;
  padding: 12px 28px;
  margin: 0 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #ffd966;
}

button:disabled { opacity: 0.5; }

/* ------------------------------
   文本信息
------------------------------ */
.message {
  font-size: 22px;
  height: 40px;
  margin-top: 20px;
}

.round { font-size: 20px; }

/* ------------------------------
   移动端适配
------------------------------ */
@media (max-width: 480px) {
  .stage { height: 240px; }

  .cat { bottom: 30px; }

  .item { font-size: 45px; }

  /* 使用 vw 保持距离，距离小猫约为 30% 屏幕宽度 */
  #left { left: calc(50% - 90px); }   /* 左物品在小猫左边 */
  #right { left: calc(50% + 90px); }  /* 右物品在小猫右边 */

  .paw { font-size: 40px; }

  .food { font-size: 32px; bottom: 120px; }

  button { font-size: 18px; padding: 10px 20px; margin: 0 12px; }

  .round { font-size: 18px; }

  .message { font-size: 18px; height: 36px; }
}