.timer {
  font-size: 2em;
  font-family: sans-serif;
  padding: 0.2em;
}

/* Define a keyframe animation named 'glow' to create a pulsing glow effect */
@keyframes glow {
  0% {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6); /* Soft glow */
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 255, 0, 1); /* Intense glow */
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6); /* Back to soft glow */
  }
}

/* Apply glow effect only when active */
.timer-active {
  animation: glow 1.5s infinite alternate ease-in-out;
  /* box-shadow: 0px 0px 10px 5px rgba(0, 255, 0, 0.5);*/
  border: 0.1em solid #00aa00;
  background: #fff;
}

/* Inactive timer style */
.timer-inactive {
  background-color: #ccc;
}

/* Control buttons styling */
#controls-white,
#controls-black {
  background-color: #ccc;
  border: 0.1em solid #000;
  border-radius: 0.2em;
  padding: 0.5em;
}

/*Transcript*/
.bubble-black {
  background-color: #424242;
  border: 2px solid #505050;
  color: #e0e0e0;
}
.bubble-white {
  background-color: #fafafa;
  border: 2px solid #e0e0e0;
  color: #424242;
  text-align: right;
}

.selected-bubble {
  border-color: #a0a0a0 !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
}

.button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button-enabled:hover {
  background-color: #374151;
}

.transcript-view {
  padding: 0.75rem;
  border-radius: 0.75em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.control-icon-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}

.topoi-user-svg {
  width: 64px;
  height: 64px;
}

.control-button {
  aspect-ratio: 1/1;
}

.piece-bubble {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 2px;
}

.piece-bubble-black {
  background: #505050;
  color: #e0e0e0;
}

.piece-bubble-white {
  background: #e0e0e0;
  color: #424242;
}

.move-index {
  font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace;
  font-size: 13px;
  color: #666;
  font-weight: 500;
  opacity: 0.8;
  margin-right: 6px;
}

.bubble-black .move-index {
  color: rgba(224, 224, 224, 0.7);
}

.bubble-white .move-index {
  color: rgba(66, 66, 66, 0.7);
}

.move-type {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}