/* ============================================
   shop-hint.css: the one-time View Shop hint (Oct 2026, pick A)
   The label matches the tour's (first-page-practice.css .sbp-bubble).
   ============================================ */

.sb-shop-hint-ring { position: relative; }
.sb-shop-hint-ring::after {
  content: ""; position: absolute; inset: -5px; border-radius: 999px;
  border: 2px solid #6630d1; opacity: 0; pointer-events: none;
}
.sb-shop-hint-go::after { animation: sb-shop-hint-ring 1.4s ease-out 3; }
@keyframes sb-shop-hint-ring {
  0% { opacity: 0.9; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.35); }
}

.sb-shop-hint {
  position: fixed; z-index: 10020; width: 250px; max-width: calc(100vw - 24px);
  background: #17151f; color: #ffffff; border-radius: 16px; padding: 12px 15px;
  border: 1px solid rgba(94, 234, 212, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.45;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.sb-shop-hint.show { opacity: 1; transform: none; }
.sb-shop-hint::before {
  content: ""; position: absolute; top: -7px; left: var(--sbsh-arrow, 40px); width: 12px; height: 12px;
  background: #17151f; border-left: 1px solid rgba(94, 234, 212, 0.35); border-top: 1px solid rgba(94, 234, 212, 0.35);
  transform: rotate(45deg);
}
.sb-shop-hint-acts { display: flex; justify-content: flex-end; margin-top: 10px; }
.sb-shop-hint-ok {
  border: 0; border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 700;
  color: #ffffff; background: linear-gradient(135deg, #6D28D9, #14B8A6); cursor: pointer;
}
.sb-shop-hint-ok:focus-visible { outline: 2px solid #14B8A6; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sb-shop-hint-go::after { animation: none; }
  .sb-shop-hint { transition: none; }
}