h3 {
  text-align: center;
}
.gradient-ring {
  /* total diameter = inner size + 2×border */
  padding: 6px;
  border-radius: 50%; /* keep the ring round */
  background: conic-gradient(from 60deg, #eb5497, #33c15b, #f4c943, #eb5497);
  display: inline-block; /* shrink‐wrap around the button */
  margin: 0 20px;
}

.buddy-list-item {
  font-size: 70%;
  font-style: italic;
  color: grey;
}

.online {
  font-style: normal;
  font-weight: bold;
}

.dot {
  border-radius: 50%;
  height: 6px;
  width: 6px;
  display: inline-block;
}

.grey-background {
  background-color: grey;
}
.playmates-list {
  overflow: auto;
  overflow-x: hidden;
}
.no-bullet-list {
  list-style-type: none;
  padding-left: 0;
}

.playmates-toggler,
.chat-toggler {
  border-radius: 20px;
  padding: 3px;
  text-align: center;
  font-weight: bold;
  background-color: none;
  border-width: 2px;
}

@media screen and (max-width: 578px) {
  #chat-container {
    width: 90vw;
  }
 
}

@media screen and (min-width: 578px) {
  #messages {
    height: 32vw;
  }
  .playmates-list {
    height: 40vw;
  }
}

@media screen and (min-width: 1200px) {
  #messages {
    height: 410px;
  }
  .playmates-list {
    height: 510px;
  }
}

#word-definition-banner {
  margin: 0 0 10px;
}

#help-button {
  font-size: 250%;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  border: none;
  background-color: #13132a;
  color: #f4c943;
}

#timeless-timer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

#timeless-timer {
  font-size: 150%;
  text-align: left;
  margin-bottom: 5px;
}

#hints {
  position: absolute;
  left: -100px;
  top:10px;
  font-size: 150%;
  background: none;
  padding: 0 5px;
  border-radius: 10px;
  margin-top: 5px;
}

#submit-score {
    position: absolute;
    right:-122px;
    top:14px;
  border-radius: 10px;
  font-weight: bold;
  padding: 5px;
  background: none;
  border-width: 3px;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#start-game {
  display: none;
}
#connecting {
  display: none;
}


.letter-animate {
  animation: fly-to-target 0.8s ease forwards;
  animation-play-state: paused;
  opacity: 1;
}

.letter-animate.start {
  animation-play-state: running;
}

@keyframes fly-to-target {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: var(--move-transform);
    opacity: 0;
  }
}

.perfect-message {
  position: absolute;
  top: 50%; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 5px 10px;
  font-size: 300%;
  font-weight: bold;
  opacity: 1;
  transition: opacity 1s ease-out;
  pointer-events: none; /* clicks pass through */
}
.shard {
  position: absolute;
  overflow: hidden;
  transition: transform 3s ease-out, opacity 3s ease-out;
  pointer-events: none;
}
.perfect-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 200%;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  opacity: 1;
  transition: opacity 3s ease-out;
  z-index: 9998; /* just below the shards (9999) */
  pointer-events: none;
}
@keyframes glowFade {
  from {
    box-shadow: 0 0 200px rgba(255, 255, 0, 1);
  }
  to {
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.71);
  }
}

/* 2) class that runs the animation once, and holds the final state */
.glow-anim {
  animation: glowFade 2s ease-out forwards;
}

/* base arrow styling */
.animated-arrow {
  position: absolute;
  font-size: 200%;
  pointer-events: none;
  opacity: 0;
  font-weight: bold;
}

/* start off just outside the left edge */
.arrow-left {
  transform: translate(-100%, -50%);
  animation: arrowInLeft 2s ease-in-out infinite;
}
/* start off just outside the right edge */
.arrow-right {
  transform: translate(100%, -50%);
  animation: arrowInRight 2s ease-in-out infinite;
}

@keyframes arrowInLeft {
  0%,
  100% {
    transform: translate(-100%, -50%);
    opacity: 0;
  }
  10%,
  50% {
    transform: translate(0, -50%);
    opacity: 1;
  }
}
@keyframes arrowInRight {
  0%,
  100% {
    transform: translate(100%, -50%);
    opacity: 0;
  }
  10%,
  50% {
    transform: translate(0, -50%);
    opacity: 1;
  }
}