[data-tooltip] {
  position: relative;
  cursor: pointer;
}

.tooltip-box {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.85);
  color: orange;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 90vw;
  white-space: normal;
  word-break: break-word;
  font-size: 0.9em;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  --arrow-left: 50%;
  transition: opacity 0.2s ease;
}

.tooltip-box[data-single-line="true"] {
  white-space: nowrap;
}

.tooltip-box::before,
.tooltip-box::after {
  content: '';
  position: absolute;
  left: var(--arrow-left);
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px;
}

.tooltip-box::before {
  top: 100%;
  border-color: white transparent transparent transparent;
  z-index: 0;
}

.tooltip-box::after {
  top: calc(100% - 1px);
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  z-index: 1;
}

.tooltip-box.tooltip-below::before {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent white transparent;
}

.tooltip-box.tooltip-below::after {
  top: auto;
  bottom: calc(100% - 1px);
  border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
}

.tooltip-box.active {
  opacity: 1;
  pointer-events: auto;
}

/* 動畫類型 */
.tooltip-animate-fade {
  transition: opacity 0.3s ease;
}
.tooltip-animate-slide-up {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
}
.tooltip-animate-slide-up.active {
  transform: translateY(0);
}
.tooltip-animate-slide-down {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}
.tooltip-animate-slide-down.active {
  transform: translateY(0);
}
.tooltip-animate-zoom-in {
  transform: scale(0.8);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.tooltip-animate-zoom-in.active {
  transform: scale(1);
}
.tooltip-animate-flip {
  transform: rotateX(90deg);
  transform-origin: bottom;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.tooltip-animate-flip.active {
  transform: rotateX(0);
}
.tooltip-animate-bounce {
  animation: bounceIn 0.4s ease forwards;
}
@keyframes bounceIn {
  0% { opacity: 0; transform: translateY(20px); }
  60% { opacity: 1; transform: translateY(-5px); }
  80% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}