/* ============================================================
   DTS Tutorial — minimal CSS
   All overlay/tooltip styles are set inline by dts_tutorial.js
   so they are guaranteed to be removed when the tutorial closes.
   Only the pulse animation and FAB button live here.
   ============================================================ */

/* Spotlight pulse glow */
@keyframes dts-tut-pulse {
  0% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.72),
      0 0 0 3px #c9a227,
      0 0 12px 4px rgba(201, 162, 39, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.72),
      0 0 0 4px #f0c040,
      0 0 26px 10px rgba(201, 162, 39, 0.7);
  }
  100% {
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.72),
      0 0 0 3px #c9a227,
      0 0 12px 4px rgba(201, 162, 39, 0.45);
  }
}

/* ── Floating Help Button — top right ── */
#dts-tutorial-fab {
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 9000; /* below tutorial overlay (99990) but above normal UI */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  border: 2px solid #c9a227;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition:
    transform 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}

#dts-tutorial-fab:hover {
  transform: scale(1.15);
  background: linear-gradient(135deg, #c9a227, #b8911f);
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#dts-tutorial-fab:active {
  transform: scale(0.92);
}

/* Hover label */
#dts-tutorial-fab::after {
  content: "Tutorial";
  position: absolute;
  top: 50%;
  right: 38px;
  transform: translateY(-50%);
  background: #1a1a1a;
  color: #c9a227;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  border: 1px solid #444;
}

#dts-tutorial-fab:hover::after {
  opacity: 1;
}

@media (max-width: 600px) {
  #dts-tutorial-fab {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  #dts-tutorial-fab::after {
    display: none;
  }
}