/* "Quem é você?": fotos redondas sobrepostas. Medidas em --u, como o resto do sistema. */
.who { --av: calc(5 * var(--u)); --tipf: calc(1.05 * var(--u)); font-variation-settings: "wdth" 100, "wght" 800; }
.who-row { display: flex; align-items: flex-end; gap: calc(1.6 * var(--u)); }
.who-q { font-size: calc(1.15 * var(--u)); line-height: 1.1; text-transform: uppercase; letter-spacing: .06em; padding-bottom: calc(.3 * var(--av)); white-space: nowrap; }
.av-group { display: flex; align-items: flex-end; padding-top: calc(.3 * var(--av)); }
.av {
  position: relative; flex: none; width: var(--av); height: var(--av); margin-left: calc(var(--av) * -.24);
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.av:first-child { margin-left: 0; }
.av-in {
  position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden;
  border: calc(.2 * var(--u)) solid var(--paper); box-shadow: 0 0 0 calc(.12 * var(--u)) var(--ink); background: var(--card);
  will-change: transform;
}
.av-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av:focus-visible { outline: none; }
.av:focus-visible .av-in { box-shadow: 0 0 0 calc(.12 * var(--u)) var(--ink), 0 0 0 calc(.42 * var(--u)) var(--accent); }
.av.is-up { z-index: 3; }
.av.is-picked .av-in { box-shadow: 0 0 0 calc(.28 * var(--u)) var(--accent); }
.who.is-wrong .av.is-picked .av-in { box-shadow: 0 0 0 calc(.28 * var(--u)) var(--ink); }

/* o balão: 24 px acima da foto erguida */
.av-tip {
  position: absolute; left: 50%; bottom: calc(100% + 24px + .3 * var(--av)); z-index: 4; pointer-events: none;
  display: grid; justify-items: start; gap: .2em; width: max-content; max-width: calc(20 * var(--u));
  background: var(--card); color: var(--on-card); border: calc(.14 * var(--u)) solid var(--ink);
  border-radius: 1.2em 1.2em 1.2em .2em; padding: .6em .9em; font-size: var(--tipf); line-height: 1.15; text-align: left;
  box-shadow: calc(.25 * var(--u)) calc(.25 * var(--u)) 0 var(--accent);
  transform-origin: 0 100%; transform: translateX(-10%) scale(.6); opacity: 0;
  transition: transform .35s var(--ease-pop), opacity .15s;
}
.av-tip b { white-space: nowrap; font-weight: normal; font-variation-settings: "wdth" 100, "wght" 800; }
.av-tip small { font-size: .82em; font-variation-settings: "wdth" 100, "wght" 600; color: var(--on-card); }
.av.is-up .av-tip { transform: translateX(-10%) scale(1); opacity: 1; }

.who-out { margin-top: calc(1.4 * var(--u)); min-height: calc(2.6 * var(--u)); }
.who-msg {
  display: inline-block; font-size: calc(1.2 * var(--u)); line-height: 1.3; max-width: calc(34 * var(--u));
  padding: .7em 1em; border-radius: 1em; background: var(--card); color: var(--on-card); border: calc(.14 * var(--u)) solid var(--ink);
  font-variation-settings: "wdth" 100, "wght" 700;
}

/* sem link: silhuetas do fantasma no mesmo grupo */
.av.is-ghost { cursor: default; filter: drop-shadow(calc(-.22 * var(--u)) 0 0 var(--paper)); }
.av.is-ghost .av-in {
  border: 0; box-shadow: none; border-radius: 0; overflow: visible;
  -webkit-mask: var(--ghost) center / 100% 100% no-repeat; mask: var(--ghost) center / 100% 100% no-repeat;
  background:
    radial-gradient(60% 45% at 28% 18%, #bfeaff 0, transparent 70%),
    radial-gradient(55% 50% at 78% 32%, #00bbff 0, transparent 72%),
    radial-gradient(70% 55% at 35% 70%, #3574ff 0, transparent 75%),
    #092745;
}
.av.is-ghost { height: calc(var(--av) * 1.25); margin-left: calc(var(--av) * -.12); }
.av.is-ghost:first-child { margin-left: 0; }
.av.is-ghost i { position: absolute; top: 34%; width: 17%; height: 21%; border-radius: 50%; background: #ffffff; }
.av.is-ghost i:first-child { left: 26%; }
.av.is-ghost i:last-child { left: 56%; }
.who.is-neutral { position: relative; }
.av-tip.is-group { position: absolute; left: 0; bottom: calc(100% + 24px); transform: none; opacity: 1; font-size: calc(1.2 * var(--u)); max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .av-tip { transition: none; }
}
.av-sem { display: grid; place-items: center; width: 100%; height: 100%; background: var(--card); color: var(--on-card); font-size: calc(.42 * var(--av)); font-variation-settings: "wdth" 125, "wght" 900; }