style.css

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

#game-board {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(5, 1fr);
}

.cell {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: transparent;
}

.hidden > .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: rgba(94, 71, 71);
}

#start-btn,
#stop-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
}

.bg-img {
  width: 100%;
  height: auto;
}

.zcm {
  width: 100%;
  overflow: hidden;
}

.zcm>img {
  width: 100%;
  height: auto;
}

.popup-box.active {
  width: 74%;
  height: 120px;
  background: radial-gradient(circle at center, #f9a825, #d46a0c);
  /* 从中心到边缘的径向渐变 */
  border-radius: 60px;
  /* 圆角，使其稍微圆润 */
  box-shadow:
    0 0 30px 10px rgba(255, 215, 0, 0.8),
    /* 金色光环 */
    0 0 70px 30px rgba(255, 215, 0, 0.4),
    /* 较大的光环 */
    0 0 120px 50px rgba(255, 215, 0, 0.2);
  /* 最外层的光环 */
  animation: glow 2s ease-in-out infinite alternate;
  /* 添加动画 */
  opacity: 1;
  transition: all 0.6s ease-in-out;
  /* 定义过渡效果 */
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-box {
  width: 0;
  height: 0;
  opacity: 0;
  /* 初始透明度为0 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glowing {
  z-index: 1;
  background-color: grey;
  overflow: visible; /* 确保伪元素不会被裁剪 */
}

.glowing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  animation: shine 1s infinite alternate;
  z-index: -1; /* 确保伪元素在Div内容之下 */
}

@keyframes shine {
  0% {
    box-shadow: 0 0 0 #FFD700, 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
  }
  100% {
    box-shadow: 0 0 30px #FFD700, 0 0 40px #FFD700, 0 0 70px #FFD700, 0 0 100px #FFD700;
  }
}

@keyframes pop-and-flip {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotateY(0deg);
    /* 超过最终大小以创建弹跳效果 */
    opacity: 1;
  }

  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}


@keyframes glow {
  from {
    box-shadow:
      0 0 30px 10px rgba(255, 215, 0, 0.8),
      0 0 70px 30px rgba(255, 215, 0, 0.4),
      0 0 120px 50px rgba(255, 215, 0, 0.2);
  }

  to {
    box-shadow:
      0 0 40px 15px rgba(255, 215, 0, 0.9),
      /* 增大并增强最内层光环 */
      0 0 80px 35px rgba(255, 215, 0, 0.5),
      /* 增大并增强中间光环 */
      0 0 140px 60px rgba(255, 215, 0, 0.3);
    /* 增大并减弱最外层光环 */
  }
}