/* ----------------------------------------------------------------- */
/* 模块化 CSS：只对 #cuteBallModule 内部元素生效 */
/* ----------------------------------------------------------------- */

.score-controls {
  font-size: 20px;
  z-index: 100;
}

/* 容器基本样式 (确保居中，但不对全局 body/html 造成影响) */
#cuteBallModule {
  /* 确保定位环境独立，但不影响外部布局 */
  display: inline-block; 
  position: relative; 
  margin-top: 20px;
  z-index: 100;
}

#cuteBallModule #cuteBall {
  width: 150px;
  height: 150px;
  /* background-color: #ff69b4;  */
  background: radial-gradient(circle at 35% 35%, rgb(255 192 224) 0%, rgb(255 105 180) 20%, rgb(225 61 143 / 80%) 60%, rgb(197 54 126) 100%);
  border-radius: 50%; 
  cursor: pointer; 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  font-weight: bold;
  user-select: none; 
  /* 确保定位环境独立，以便爱心能相对于它定位 */
  position: relative; 
  z-index: 2; /* 确保小球在爱心之下 */

  /* 初始阴影 (发光效果由 --glow-level 控制) */
  --glow-level: 5; /* 默认发光级别为 0 */

  /* 基础阴影：这是小球底部的正常阴影，不随发光变化 */
  --base-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  /* 累积发光阴影：强度和颜色增强 */
  --glow-shadow: 
    0 0 calc(var(--glow-level) * 8px) rgba(255, calc(255 - (var(--glow-level) - 3) * 4), calc(255 - (var(--glow-level) - 3) * 25), calc(0.3 + (var(--glow-level) - 5) * 0.1)), /* 亮白色核心，更亮 */
    0 0 calc(var(--glow-level) * 16px) rgba(255, 105, 180, calc(0.3 + (var(--glow-level) - 5) * 0.1)), /* 中层粉色，更大扩散 */
    0 0 calc(var(--glow-level) * 24px) rgba(255, 105, 180, calc(0.3 + (var(--glow-level) - 5) * 0.1)); /* 外层粉色，最大扩散 */
  
  /* 【持久化关键】将基础阴影和发光阴影合并，只要 --glow-level 不变，发光就存在 */
  box-shadow: var(--base-shadow), var(--glow-shadow);
    
  transition: 
    box-shadow 0.5s ease-out,
    background-color 0.3s ease-out;
  
  transform: scale(1) translateZ(0); /* 确保初始状态是 1 */

  overflow: hidden; /* 【关键】隐藏超出小球边缘的水面部分 */
  position: relative; /* 【关键】为伪元素提供定位上下文 */
}
body:not(.no-animation) #cuteBallModule #cuteBall.heartbeat {
    animation: heartbeat 2.5s ease-in-out infinite both;
}
body:not(.no-animation) #cuteBallModule #cuteBall.heartbeat::before {
    animation: liquid-slosh 5s linear infinite;
}

@keyframes heartbeat {
    from{
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    17%{
        transform: scale(0.9);
        animation-timing-function: ease-in;
    }
    25%{
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    40%{
        transform: scale(0.88);
        animation-timing-function: ease-in;

    }
    55%{
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

#cuteBallModule #cuteBall:focus {
  /* 移除浏览器默认的焦点外框，防止干扰动画 */
  outline: none;
  /* 【关键】重新应用发光阴影和基础阴影，防止被外部重置 */
  box-shadow: var(--base-shadow), var(--glow-shadow);
}

/* 激活状态的动画效果 */
#cuteBallModule #cuteBall.active {
  /* 按下时，我们只改变小球底部的阴影 (模仿被压扁)，让发光效果不变 */
  --base-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: bounceEffect 0.8s cubic-bezier(0.2, 0.7, 0.8, 1.2) forwards;
  /* animation: jellyBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
  animation-name: jellyBounce;  */
}

/* 鼠标悬停效果 */
#cuteBallModule #cuteBall:hover {
  /* 【关键】修改基础阴影变量，模拟悬停时的立体感增强，但不覆盖发光 */
  --base-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 爱心粒子样式 (同样限定作用域) */
#cuteBallModule .heart-particle {
  position: absolute; 
  font-size: 16px; 
  color: #ff69b4; 
  opacity: 0;
  pointer-events: none; 
  z-index: 1000; 

  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-fill-mode: forwards;

  /* 新增：强制硬件加速 */
  transform: translateZ(0);
}

/* ----------------------------------------------------------------- */
/* 新增：水面伪元素样式 */
/* ----------------------------------------------------------------- */
#cuteBallModule #cuteBall::before {
    content: '';
    position: absolute;
    bottom: calc(var(--score)*15px - 300px);
    width: 300px;
    height: 300px;
    background-color: rgb(255 217 0 / 70%);
    border-radius: 130px;
    transform: rotate(0deg);
    transform-origin: center;
    z-index: 1;
}

/* ----------------------------------------------------------------- */
/* 新增：水面晃动关键帧动画 */
/* ----------------------------------------------------------------- */
@keyframes liquid-slosh {
  100% { transform: rotate(360deg); }
}

/* 关键帧：向上漂浮和逐渐消失 (关键帧是全局的，无需作用域，但保持代码完整性) */
@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-180px) scale(4); 
    opacity: 0; 
  }
}
/* ----------------------------------------------------------------- */
/* 新增：定义多段弹跳的关键帧动画 */
/* ----------------------------------------------------------------- */
@keyframes bounceEffect {
  0% { transform: scale(0.8) translateZ(0); } /* 按下时的初始状态 */
  30% { transform: scale(1.2) translateZ(0); } /* 第一次夸张回弹 (比 1.0 更高) */
  45% { transform: scale(0.95) translateZ(0); } /* 第一次下落 / 小幅收缩 */
  60% { transform: scale(1.1) translateZ(0); } /* 第二次小幅回弹 */
  80% { transform: scale(0.98) translateZ(0); } /* 第二次下落 / 微收缩 */
  100% { transform: scale(1) translateZ(0); } /* 最终回到原始状态 */
}
@keyframes jellyBounce {
    0%, 100% { 
        transform: scale(1); 
    }
    25% { 
        transform: scale(1.15, 0.85) rotateX(5deg); /* 向下压扁并横向拉伸 */
    }
    50% { 
        transform: scale(0.9, 1.1) rotateX(-5deg); /* 向上拉伸变细 */
    }
    75% { 
        transform: scale(1.05, 0.95) rotateX(2deg); /* 轻微回弹 */
    }
}


/* 评分控件样式 */
.fa-star {
  color: lightgray;
  cursor: pointer;
}
.fa-star.star-light {
  color: gold;
}
.score-controls .fa-star.star-light {
  animation: starLightEffect 0.8s cubic-bezier(0.2, 0.7, 0.8, 1.2) forwards;
}
@keyframes starLightEffect {
  0% { transform: scale(1); color: gold; }
  50% { transform: scale(1.3); color: orange; }
  100% { transform: scale(1); color: gold; }
}
.fa-thumbs-down {
  color: rgb(105 105 105 / 40%);;
  cursor: pointer;
  margin-right: 20px;
  translate: 0 2px;
}
.fa-thumbs-down.thumbs-down-light {
  color: greenyellow;
}
.thumbs-down-animation {
  animation: thumbs-down 0.7s linear;
}
@keyframes thumbs-down {
  /* 0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } */
  0% { transform: translateY(0); }
  20% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}