@import url("../../assets/css/common.css");

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 历史统计 */
.stats-label {
  color: #888;
}

.stats-value {
  color: #4fc3f7;
  font-weight: bold;
}

/* 焦点文字容器 */
#focusWord {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

#focusWord.focus-active {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

#focusWord.focus-hidden {
  opacity: 0;
  transform: translateY(20px);
}

/* 焦点词显示 */
.focus-word-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.focus-word-container.active {
  opacity: 1;
  pointer-events: all;
  display: flex;
}

.focus-balloon {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: var(--focus-balloon-color, #ff5252);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* box-shadow: 0 0 40px rgba(255, 82, 82, 0.8); */
  box-shadow: 0 0 30px var(--focus-balloon-color, #ff5252);
  transform: scale(1.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-size: "84px";
}

.focus-balloon:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid var(--focus-balloon-color, #ff5252);
}
.focus-balloon.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.focus-text {
  font-size: 84px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-2px, 0, 0) scale(1.5);
  }

  20%,
  80% {
    transform: translate3d(4px, 0, 0) scale(1.5);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-6px, 0, 0) scale(1.5);
  }

  40%,
  60% {
    transform: translate3d(6px, 0, 0) scale(1.5);
  }
}

#correctWords li {
  background-color: #263238;
  border: 1px solid #37474f;
}