/* The title, stage and name occupy separate rows at every viewport width. */
.avatar-onboarding .avatar-page-nav{grid-column:1/-1;display:flex;align-items:center;position:relative;z-index:5}.avatar-onboarding #avatar-home-back{margin:0;min-height:44px;padding:10px 18px;font-size:14px}
.avatar-onboarding .avatar-display{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:16px;box-sizing:border-box;height:auto;min-height:600px;max-height:none;overflow:hidden}
.avatar-onboarding .avatar-display:after{content:none}
.avatar-onboarding .avatar-display>.avatar-welcome{flex:none;position:relative;z-index:4;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:14px 12px;transform:none}
.avatar-onboarding .avatar-welcome h1{font-size:28px;line-height:1.35;margin:6px 0}.avatar-onboarding .avatar-welcome p{font-size:13px;line-height:1.7;margin:7px 0 0}.avatar-onboarding .avatar-welcome>span{font-size:10px;line-height:1.6;display:block}
.avatar-onboarding .avatar-stage-characters{position:relative;isolation:isolate;width:100%;height:360px;min-height:360px;flex:0 0 360px;margin:auto 0 0}
.avatar-onboarding .avatar-stage-characters:after{content:'';position:absolute;left:1%;right:1%;bottom:12px;height:54px;border:4px solid #a97739;border-top-color:#f7d77f;border-radius:50%;background:radial-gradient(ellipse at 50% 20%,#ffeaa7,#d8a351 60%,#987038);box-shadow:0 10px #83562e,0 17px #6a4a2c,0 22px 12px #123b2a55;z-index:0}
.avatar-onboarding .avatar-stage-characters>.avatar-figure{position:absolute;top:auto;bottom:34px;left:auto;right:0;width:72%;max-width:320px;height:auto;aspect-ratio:1;transform:none;margin:0;z-index:2;overflow:hidden}
.avatar-onboarding .avatar-stage-characters>.companion-preview{position:absolute;top:auto;bottom:40px;left:0;right:auto;width:33%;max-width:145px;height:auto;aspect-ratio:1;transform:none;margin:0;z-index:3}
.avatar-onboarding .avatar-display>.avatar-name-plaque{position:relative;flex:none;top:auto;bottom:auto;left:auto;right:auto;width:auto;margin:0 6px;padding:12px;z-index:4;box-sizing:border-box}.avatar-onboarding .avatar-name-plaque>span{font-size:23px;line-height:1.4}.avatar-onboarding .avatar-name-plaque small{display:block;font-size:11px;line-height:1.6;margin-top:3px}
@media(min-width:1001px){.avatar-onboarding .avatar-display{position:sticky;top:20px;align-self:start;min-height:600px}}
@media(max-width:1000px){.avatar-onboarding .avatar-display{position:relative;top:auto;min-height:0;max-width:none}.avatar-onboarding .avatar-display>.avatar-welcome{width:min(100%,440px);align-self:center}.avatar-onboarding .avatar-stage-characters{height:360px;min-height:360px;flex-basis:360px;max-width:510px;align-self:center}.avatar-onboarding .avatar-display>.avatar-name-plaque{width:min(90%,440px);align-self:center}}
@media(max-width:650px){.avatar-onboarding .avatar-display{gap:14px;padding:12px}.avatar-onboarding .avatar-welcome h1{font-size:25px}.avatar-onboarding .avatar-welcome p{font-size:12px}.avatar-onboarding .avatar-stage-characters{height:280px;min-height:280px;flex-basis:280px}.avatar-onboarding .avatar-stage-characters>.avatar-figure{max-width:245px;width:72%;bottom:32px}.avatar-onboarding .avatar-stage-characters>.companion-preview{width:32%;max-width:112px;bottom:37px}.avatar-onboarding .avatar-display>.avatar-name-plaque{width:100%;margin:0}.avatar-onboarding .avatar-name-plaque>span{font-size:21px}}

/* The avatar editor already has its own return button above the frame. */
.avatar-onboarding #home-return{display:none}

/* Center the editable character, keeping its companion beside it on the stage. */
.avatar-onboarding .avatar-stage-characters>.avatar-figure{
  left:50%;right:auto;width:70%;max-width:320px;
  transform:translateX(-50%);bottom:34px;
}
.avatar-onboarding .avatar-stage-characters>.companion-preview{
  left:1%;right:auto;width:30%;max-width:140px;bottom:40px;
}
.avatar-onboarding .avatar-stage-characters>.companion-preview>.companion-label{
  max-width:100%;font-size:12px;line-height:1.5;
}
@media(max-width:650px){
  .avatar-onboarding .avatar-stage-characters>.avatar-figure{width:70%;max-width:245px;bottom:32px}
  .avatar-onboarding .avatar-stage-characters>.companion-preview{width:30%;max-width:108px;bottom:37px}
}