/* ============================================
   first-page-practice.css: practice mode for New Post (Oct 2026)
   One short label, no rings (New Post's own pulse is enough). Nothing dims,
   fills or covers New Post. Locked controls (Backgrounds until a sticker is
   placed, the menu the whole time) fade and ignore taps.
   ============================================ */

.sbp-layer, .sbp-point { position: fixed; inset: 0; z-index: 10040; pointer-events: none; font-family: 'Poppins', sans-serif; }

.sbp-ring {
  position: fixed; border-radius: 14px; pointer-events: none;
  border: 2.5px solid #5eead4; background: transparent;
}
.sbp-ring--round { border-radius: 999px; }
.sbp-ring::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2.5px solid #5eead4; animation: sbp-ring 1.4s ease-out infinite;
}
@keyframes sbp-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.18); opacity: 0; } }

.sbp-bubble {
  position: fixed; left: 14px; right: 14px; max-width: 340px; margin: 0 auto; pointer-events: auto;
  background: #17151f; color: #ffffff; border-radius: 16px; padding: 12px 15px;
  font-size: 14px; line-height: 1.45; border: 1px solid rgba(94, 234, 212, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
@media (min-width: 769px) { .sbp-bubble { margin: 0; width: 320px; } }
.sbp-bubble-acts { display: flex; justify-content: flex-end; margin-top: 10px; }
.sbp-bubble-next {
  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;
}

.sbp-pill {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 10030; line-height: 1.3;
  background: #ecfdf8; color: #0f766e; border: 1px solid #ccf3e8; border-radius: 999px;
  padding: 6px 14px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
}

/* locked while practicing */
.sbp-locked { opacity: 0.35 !important; pointer-events: none !important; transition: opacity 0.2s; }
.sbp-hidden { visibility: hidden !important; pointer-events: none !important; }
/* a sticker that just landed gives a little bump so the tap reads */
.sbp-land { animation: sbp-land 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes sbp-land { 0% { scale: 0.3; } 60% { scale: 1.12; } 100% { scale: 1; } }

/* menu tour: the item(s) the label is about */
.sbp-menu-hl, .sbp-menu-new { background: #f1ebfd !important; box-shadow: inset 0 0 0 1.5px #c4b5fd; border-radius: 12px; }

/* done card */
/* Frosty's note sits in the middle on phones too (Oct 25 2026, like the apps) */
.sbp-done-wrap {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 10, 30, 0.45); padding: 16px 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  font-family: 'Poppins', sans-serif; overflow: hidden;
}
@media (min-width: 769px) { .sbp-done-wrap { align-items: center; } }
.sbp-done {
  width: 100%; max-width: 380px; background: #17151f; color: #ffffff; border-radius: 20px; padding: 20px 18px 14px;
  border: 1px solid rgba(94, 234, 212, 0.35); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.sbp-done h3 { margin: 0 0 6px; font-size: 18px; }
.sbp-done p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #cfcadb; }
.sbp-btn {
  width: 100%; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-weight: 700; font-size: 15px;
  color: #ffffff; background: linear-gradient(135deg, #6D28D9, #4f46e5 60%, #14B8A6); cursor: pointer;
}
.sbp-link { display: block; width: 100%; margin-top: 8px; padding: 8px; background: none; border: 0; font: inherit; font-size: 14px; color: #a8a3b8; cursor: pointer; }
.sbp-btn:focus-visible, .sbp-link:focus-visible, .sbp-bubble-next:focus-visible { outline: 2px solid #14B8A6; outline-offset: 2px; }

.sbp-bump { animation: sbp-bump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes sbp-bump { 0% { transform: scale(0.4); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.sbp-confetti { position: absolute; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: sbp-fall 1.6s ease-in forwards; }
@keyframes sbp-fall { to { transform: translateY(100vh) rotate(540deg); opacity: 0; } }

/* Home: pinned card for people who looked around first */
.sbp-nudge {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  margin: 0 0 14px; padding: 14px 12px 14px 16px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, #6D28D9, #14B8A6); color: #ffffff; font-family: 'Poppins', sans-serif;
  animation: sbp-pulse 1.8s ease-in-out infinite;
}
.sbp-nudge b { display: block; font-size: 15px; }
.sbp-nudge span { font-size: 13px; opacity: 0.92; }
.sbp-nudge-minis { display: flex; gap: 2px; }
.sbp-nudge-minis img { width: 30px; height: 30px; object-fit: contain; }
.sbp-nudge-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
@keyframes sbp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(109, 40, 217, 0); } }

/* starter card: second choice */
.sb-starter-link { background: none; border: 0; font-family: 'Poppins', sans-serif; font-size: 14px; color: #6b6878; cursor: pointer; padding: 4px 8px; margin-top: -6px; }

@media (prefers-reduced-motion: reduce) {
  .sbp-ring::after, .sbp-bump, .sbp-land, .sbp-nudge, .sbp-confetti { animation: none; }
}

/* closing note from Frosty */
.sbp-done .sbp-closing-line { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #ffffff; }
.sbp-done .sbp-closing-sign { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: #5eead4; }
.sbp-done .sbp-closing-role { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: #a8a3b8; }
.sbp-done .sbp-closing-from { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.sbp-done .sbp-closing-from .sbp-closing-sign { margin: 0; }
.sbp-done .sbp-closing-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; border: 2px solid rgba(94, 234, 212, 0.5); }