/* ── Shared bubble base ─────────────────────────────────── */
.talk-bubble {
  position: absolute;
  background: white;
  border: 3px solid #222;
  border-radius: 14px;
  padding: 10px 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #1a1a1a;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.12);
}

/* Tail border (outer) */
.talk-bubble::before {
  content: '';
  position: absolute;
  bottom: -18px;
  border: 13px solid transparent;
  border-top-color: #222;
  border-bottom: 0;
}

/* Tail fill (inner white) */
.talk-bubble::after {
  content: '';
  position: absolute;
  bottom: -14px;
  border: 11px solid transparent;
  border-top-color: white;
  border-bottom: 0;
}

/* ── Girl bubble — above Kisha's head, tail points down ──── */
/* Girl at left:470 + scaleX(-1); head centre ≈ x:526       */
.girl-bubble {
  top:  195px;
  left: 420px;
  animation: bubblePop 0.45s 18.5s both, bubbleFade 0.4s 22.5s forwards;
}
.girl-bubble::before { left: 78px; }
.girl-bubble::after  { left: 80px; }

/* ── Shared keyframes ───────────────────────────────────── */
@keyframes bubblePop {
  0%   { opacity: 0; transform: scale(0.65) translateY(-10px); }
  65%  { transform: scale(1.04) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bubbleFade {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.85) translateY(-6px); }
}