/* Speech bubbles, narrator captions, the cue sparkle and the joystick. Owner: J07. */
#bubbles {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  font-family: var(--font);
}

.bbl {
  position: absolute; left: 0; top: 0;
  width: max-content;
  max-width: min(78vw, 340px);
  will-change: transform;
}
.bbl-card {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  font-size: max(18px, min(2.4vh, 21px));
  font-weight: 600;
  line-height: 1.26;
  padding: 10px 16px 11px;
  border-radius: 20px;
  box-shadow: 0 2px 0 rgba(74, 63, 74, .10), 0 8px 22px rgba(74, 63, 74, .16);
  overflow-wrap: anywhere;
  animation: bbl-in .3s ease-out both;
  transition: opacity .3s ease, box-shadow .2s ease;
}
.bbl.has-tail .bbl-card::after {
  content: '';
  position: absolute;
  left: var(--tail, 50%);
  bottom: -7px;
  width: 16px; height: 16px;
  margin-left: -8px;
  background: var(--cream);
  border-radius: 0 0 5px 0;
  transform: rotate(45deg);
}
.bbl-who { display: none; margin: 3px 0 0 14px; font-size: 13px; font-weight: 700; color: var(--cream); text-shadow: 0 1px 3px rgba(74, 63, 74, .65); }
.bbl--being:not(.has-tail) .bbl-who { display: block; }
.bbl.older .bbl-card { opacity: .84; }
.bbl.out .bbl-card { opacity: 0; }
.bbl.held .bbl-card { box-shadow: 0 0 0 2px #fde39a, 0 8px 22px rgba(74, 63, 74, .16); }

.bbl--whisper .bbl-card {
  font-size: 18px;
  font-weight: 500;
  background: rgba(251, 240, 226, .92);
}

/* The narrator: small, italic, not quite in the room. */
.bbl--caption { max-width: min(84vw, 460px); }
.bbl--caption .bbl-card {
  background: rgba(251, 240, 226, .86);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  text-align: center;
  border-radius: 14px;
  padding: 6px 14px 7px;
  box-shadow: 0 4px 14px rgba(74, 63, 74, .12);
}

.bbl--sign, .bbl--note, .bbl--panel { max-width: min(84vw, 420px); }
.bbl--sign .bbl-card { text-align: center; border-radius: 12px; box-shadow: 0 0 0 3px #e8c97a, 0 8px 22px rgba(74, 63, 74, .18); }
.bbl--note .bbl-card { border-radius: 6px; font-weight: 500; transform: rotate(-1deg); }
.bbl--panel .bbl-card { text-align: center; border-radius: 16px; }

.bbl-cue {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  will-change: transform;
}
.bbl-cue::before {
  content: '';
  display: block; width: 100%; height: 100%;
  background: #fde39a;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 1px 2px rgba(74, 63, 74, .25));
  animation: bbl-twinkle 1s ease-in-out both;
}

.bbl-spoken {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@keyframes bbl-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bbl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bbl-twinkle {
  0% { opacity: 0; transform: scale(.55); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: .85; transform: scale(.9); }
}

/* The in-game reduced motion setting, alongside the OS one in base.css: text and poses only. */
#bubbles.calm .bbl-card { animation-name: bbl-fade; }
#bubbles.calm .bbl-cue::before { animation: none; opacity: .9; }

.tgc-joy {
  position: absolute;
  left: calc(env(safe-area-inset-left) + 20px);
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  width: 124px; height: 124px;
  border-radius: 50%;
  background: rgba(251, 240, 226, .38);
  box-shadow: inset 0 0 0 2px rgba(251, 240, 226, .75), 0 6px 18px rgba(74, 63, 74, .12);
  display: none;
  align-items: center; justify-content: center;
  pointer-events: auto;
  touch-action: none;
}
.tgc-joy.show { display: flex; }
.tgc-joy-knob {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 3px 8px rgba(74, 63, 74, .22);
  opacity: .9;
  transition: transform .16s ease-out;
}
.tgc-joy-knob.on { opacity: 1; transition: none; }