/* mallow-overlay.css — 棉花糖上屏（OBS 叠加层） */

.mallow-stage {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  width: min(760px, 86vw);
  pointer-events: none;
}

.mallow-bubble {
  padding: 22px 30px 18px;
  background: rgba(255, 253, 248, 0.96);
  border: 2px solid rgba(207, 161, 78, 0.55);
  border-radius: 26px;
  box-shadow: 0 24px 60px -28px rgba(40, 30, 12, 0.75);
  animation: mallowIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mallow-bubble__text {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.55;
  color: #232a1e;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mallow-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(35, 42, 30, 0.16);
  font-size: 16px;
  color: #6f7763;
}

.mallow-bubble__tag {
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(233, 241, 220, 0.9);
  color: #46652f;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.mallow-stage.is-out .mallow-bubble {
  animation: mallowOut 360ms ease both;
}

@keyframes mallowIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes mallowOut {
  to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}