/* Love bombing lesson. All rules scoped under .lb-* */

.lb-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.lb-note { font-size: 12px; color: var(--faint); text-align: center; }

/* 45 minutes */
.lb-pair { padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); }
.lb-pair small { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.lb-ppl { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 8px; margin: 6px 0 8px; }
.lb-ppl i { width: 26px; height: 26px; border-radius: 50%; background: #7CC0EE; }
.lb-ppl i:last-child { background: #F29BC0; }
.lb-ppl p { margin: 0; padding: 6px 10px; border-radius: 12px; background: var(--raised); font: 600 15px/1.3 var(--serif); text-align: center; }
.lb-bar { height: 10px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.lb-bar b { display: block; width: 0; height: 100%; border-radius: 999px; background: #F29BC0; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.lb-pb small { color: #F29BC0; }

/* two phones */
.lb-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lb-phone { display: flex; flex-direction: column; height: 272px; padding: 8px; border-radius: 22px; background: #15131F; border: 3px solid #3A3552; transition: border-color .3s, box-shadow .3s; }
.lb-top { display: flex; align-items: baseline; gap: 6px; padding: 0 4px 6px; border-bottom: 1px solid var(--line); }
.lb-top b { font-size: 15px; }
.lb-top span { font-size: 12px; color: var(--faint); }
.lb-body { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; padding: 6px 0; }
.lb-day { font-size: 12px; font-weight: 700; color: var(--faint); text-align: center; }
.lb-m { margin: 0; max-width: 88%; padding: 6px 9px; border-radius: 14px 14px 14px 4px; background: #3B2A45; font-size: 13px; line-height: 1.25; animation: lb-in .3s ease-out; }
.lb-alex .lb-m { background: #4A2A4A; }
.lb-m.lb-me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--violet); color: #fff; }
.lb-dots3 { display: flex; gap: 4px; width: 44px; }
.lb-dots3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: lb-blink 1s infinite; }
.lb-dots3 i:nth-child(2) { animation-delay: .2s; }
.lb-dots3 i:nth-child(3) { animation-delay: .4s; }
@keyframes lb-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes lb-blink { 50% { opacity: .3; } }
.lb-warm { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--dim); }
.lb-warm div { flex: 1; height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.lb-warm b { display: block; width: 0; height: 100%; background: #F29BC0; border-radius: 999px; transition: width .6s, background .6s; }
.lb-phone.lb-cold { border-color: #3E6A8C; }
.lb-phone.lb-cold .lb-warm b { background: #5DA9E0; }
.lb-phone.lb-hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252, 192, 80, .3); }
.lb-card { align-self: center; max-width: 300px; padding: 10px 14px; border-radius: 16px; background: #2B2440; border: 2px dashed var(--gold); text-align: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; z-index: 3; transition: box-shadow .2s, opacity .3s; }
.lb-card small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.lb-card b { font: 600 15px/1.3 var(--serif); }
.lb-card.lb-drag { cursor: grabbing; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
.lb-card.lb-armed { border-style: solid; box-shadow: 0 0 0 3px rgba(252, 192, 80, .35); }
.lb-card.lb-spent { opacity: .35; }

/* evidence */
.lb-shelf { display: flex; align-items: flex-end; justify-content: center; gap: 40px; height: 190px; }
.lb-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.lb-stack i { width: 90px; height: 14px; border-radius: 3px; background: #F29BC0; }
.lb-stack i:nth-child(odd) { background: #D77DA6; width: 84px; }
.lb-s2 i { background: var(--mint); width: 90px; }
.lb-stack span { order: -1; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; max-width: 120px; }
.lb-shelf .lb-stack { opacity: .9; }

/* last case */
.lb-stories { display: flex; flex-direction: column; gap: 8px; }
.lb-st { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 9px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color .3s, opacity .3s; }
.lb-st b { font-size: 15px; }
.lb-st p { margin: 0; font: 600 15px/1.3 var(--serif); }
.lb-st em { grid-column: 2; display: none; font-style: normal; font-size: 12px; font-weight: 800; color: var(--dim); }
.lb-st.lb-hot, .lb-st.lb-cool { }
.lb-st.lb-hot em, .lb-st.lb-cool em { display: block; }
.lb-st.lb-hot { border-color: var(--gold); }
.lb-st.lb-hot em { color: var(--gold); }
.lb-st.lb-cool { opacity: .7; }

@media (max-height: 700px) {
  .lb-phone { height: 232px; }
  .lb-m { font-size: 12px; padding: 5px 8px; }
  .lb-st p { font-size: 14px; }
  .lb-pair p { font-size: 14px; }
}